{
  "schemaVersion": "1.0",
  "id": "appearance-language",
  "title": "Giao diện và ngôn ngữ",
  "purpose": "Persistent light/dark/system with complete Vietnamese only.",
  "roles": [
    "adult"
  ],
  "group": "settings-privacy",
  "variantOf": null,
  "layout": {
    "canvas": {
      "width": 390,
      "height": 844
    },
    "responsive": {
      "minimumWidth": 360,
      "maximumWidth": 430,
      "scroll": "vertical",
      "safeAreaBottom": true,
      "fontScale": "native dynamic type; reflow without clipping",
      "keyboard": "composer sticky within resized viewport; dialog scrolls; no fixed keyboard overlay"
    },
    "regions": [
      {
        "id": "header",
        "order": 0,
        "type": "safe-area/header",
        "height": "intrinsic"
      },
      {
        "id": "content",
        "order": 1,
        "type": "purpose-specific preferences",
        "componentIds": [
          "screen-header",
          "appearance-language-0",
          "appearance-language-1",
          "appearance-language-2",
          "screen-actions"
        ]
      },
      {
        "id": "actions",
        "order": 2,
        "type": "one primary + secondary controls"
      },
      {
        "id": "navigation",
        "order": 3,
        "type": "none"
      }
    ]
  },
  "components": [
    {
      "id": "screen-header",
      "type": "Header",
      "props": {
        "homeLabel": "Nhà Lá",
        "scopeGate": "A",
        "backTarget": "settings",
        "settingsTarget": "settings"
      },
      "tokens": {
        "foreground": "{semantic.light.fg}",
        "darkForeground": "{semantic.dark.fg}"
      },
      "accessibility": {
        "label": "Thanh đầu màn hình",
        "readingOrder": 0,
        "focusOrder": "back then settings"
      }
    },
    {
      "id": "appearance-language-0",
      "type": "ChoiceGroup",
      "props": {
        "legend": "Giao diện",
        "name": "theme",
        "options": [
          [
            "light",
            "Sáng"
          ],
          [
            "dark",
            "Tối"
          ],
          [
            "system",
            "Theo thiết bị"
          ]
        ],
        "multiple": false
      },
      "tokens": {
        "background": "{semantic.light.surface}",
        "foreground": "{semantic.light.fg}",
        "darkBackground": "{semantic.dark.surface}",
        "darkForeground": "{semantic.dark.fg}",
        "bodySize": "{primitive.type.body}",
        "touchTarget": "{primitive.space.48}"
      },
      "accessibility": {
        "label": "Giao diện và ngôn ngữ · ChoiceGroup",
        "readingOrder": 1,
        "colorOnly": false,
        "fontScaling": true,
        "minimumTouchTarget": 48,
        "instructions": "Đọc theo thứ tự; công bố nhãn trạng thái và lỗi, không chỉ màu."
      }
    },
    {
      "id": "appearance-language-1",
      "type": "DetailList",
      "props": {
        "items": [
          [
            "Ngôn ngữ",
            "Tiếng Việt · toàn bộ bản thiết kế"
          ],
          [
            "Tiếng Anh",
            "Chưa có bản dịch, không giả đã hỗ trợ"
          ]
        ]
      },
      "tokens": {
        "background": "{semantic.light.surface}",
        "foreground": "{semantic.light.fg}",
        "darkBackground": "{semantic.dark.surface}",
        "darkForeground": "{semantic.dark.fg}",
        "bodySize": "{primitive.type.body}",
        "touchTarget": "{primitive.space.48}"
      },
      "accessibility": {
        "label": "Giao diện và ngôn ngữ · DetailList",
        "readingOrder": 2,
        "colorOnly": false,
        "fontScaling": true,
        "minimumTouchTarget": 48,
        "instructions": "Đọc theo thứ tự; công bố nhãn trạng thái và lỗi, không chỉ màu."
      }
    },
    {
      "id": "appearance-language-2",
      "type": "ToggleGroup",
      "props": {
        "items": [
          [
            "reduced_motion",
            "Giảm chuyển động",
            "Luôn tôn trọng cài đặt của hệ điều hành.",
            true
          ]
        ]
      },
      "tokens": {
        "background": "{semantic.light.surface}",
        "foreground": "{semantic.light.fg}",
        "darkBackground": "{semantic.dark.surface}",
        "darkForeground": "{semantic.dark.fg}",
        "bodySize": "{primitive.type.body}",
        "touchTarget": "{primitive.space.48}"
      },
      "accessibility": {
        "label": "Giao diện và ngôn ngữ · ToggleGroup",
        "readingOrder": 3,
        "colorOnly": false,
        "fontScaling": true,
        "minimumTouchTarget": 48,
        "instructions": "Đọc theo thứ tự; công bố nhãn trạng thái và lỗi, không chỉ màu."
      }
    },
    {
      "id": "screen-actions",
      "type": "ActionGroup",
      "props": {
        "actions": [
          {
            "id": "save-theme",
            "label": "Áp dụng giao diện",
            "kind": "mutate",
            "target": null,
            "confirmationRequired": false
          },
          {
            "id": "link-settings",
            "label": "Cài đặt",
            "kind": "navigate",
            "target": "settings",
            "confirmationRequired": false
          }
        ],
        "primaryCount": 1
      },
      "tokens": {
        "lightBackground": "{component.light.button.background}",
        "lightForeground": "{component.light.button.foreground}",
        "darkBackground": "{component.dark.button.background}",
        "darkForeground": "{component.dark.button.foreground}",
        "height": "{primitive.space.48}"
      },
      "accessibility": {
        "label": "Hành động của màn hình",
        "keyboard": true,
        "focusVisible": true,
        "disabledOnlyLowContrast": true
      }
    }
  ],
  "fields": [
    {
      "id": "theme",
      "label": "Giao diện",
      "control": "radio",
      "options": [
        {
          "value": "light",
          "label": "Sáng"
        },
        {
          "value": "dark",
          "label": "Tối"
        },
        {
          "value": "system",
          "label": "Theo thiết bị"
        }
      ],
      "validation": {
        "required": true,
        "allowlist": [
          "light",
          "dark",
          "system"
        ],
        "minSelections": 1,
        "errorMessage": "Chọn ít nhất một mục phù hợp."
      },
      "binding": "theme",
      "accessibleErrorAssociation": "form error summary via role alert; native bind field-specific error ID"
    },
    {
      "id": "reduced_motion",
      "label": "Giảm chuyển động",
      "control": "switch",
      "default": true,
      "validation": {
        "required": false,
        "mustBeTrue": false,
        "serverAllowlistRequired": true
      },
      "binding": "reduced_motion"
    }
  ],
  "states": [
    {
      "id": "light",
      "when": "theme=light",
      "visibleUI": "Foreground/background pairs sáng",
      "availableActions": [
        "save-theme",
        "link-settings"
      ],
      "mutationPolicy": "Actor, exact capability and current versions must still pass; this state never grants rights."
    },
    {
      "id": "dark",
      "when": "theme=dark",
      "visibleUI": "Paired tokens tối",
      "availableActions": [
        "save-theme",
        "link-settings"
      ],
      "mutationPolicy": "Actor, exact capability and current versions must still pass; this state never grants rights."
    },
    {
      "id": "system",
      "when": "theme=system",
      "visibleUI": "Resolve prefers-color-scheme",
      "availableActions": [
        "save-theme",
        "link-settings"
      ],
      "mutationPolicy": "Actor, exact capability and current versions must still pass; this state never grants rights."
    },
    {
      "id": "language-unavailable",
      "when": "Chưa dịch en",
      "visibleUI": "Không cho chọn language chưa hoàn chỉnh",
      "availableActions": [
        "save-theme",
        "link-settings"
      ],
      "mutationPolicy": "Actor, exact capability and current versions must still pass; this state never grants rights."
    }
  ],
  "actions": [
    {
      "id": "save-theme",
      "label": "Áp dụng giao diện",
      "kind": "mutate",
      "targetScreenId": null,
      "permission": "A/C own preference",
      "confirmationRequired": false,
      "contractRef": "Local appearance; PATCH /v1/me/preferences locale when supported",
      "localBehavior": "Only validated draft/local domain where supported; remote adapters never report success.",
      "idempotency": "Stable actor/household/command key and canonical body; changed payload is a new confirmed intent."
    },
    {
      "id": "link-settings",
      "label": "Cài đặt",
      "kind": "navigate",
      "targetScreenId": "settings",
      "permission": "A",
      "confirmationRequired": false,
      "contractRef": "local navigation"
    }
  ],
  "dataBindings": [
    {
      "source": "PATCH /v1/me/preferences",
      "shape": {
        "version": "integer",
        "weekday_budgets": "{weekday:1..7,effort_budget:integer}[] (SchedulePreferencesDto, schedule screens only)",
        "notifications": "NotificationPreferencesDto {locale:vi|en, enabled, quiet_start_local HH:mm|null, quiet_end_local HH:mm|null, version}",
        "theme": "device-local light|dark|system; not an API field"
      },
      "sample": {
        "version": 1,
        "weekday_budgets": [
          {
            "weekday": 1,
            "effort_budget": 4
          },
          {
            "weekday": 2,
            "effort_budget": 4
          },
          {
            "weekday": 3,
            "effort_budget": 4
          },
          {
            "weekday": 4,
            "effort_budget": 4
          },
          {
            "weekday": 5,
            "effort_budget": 4
          },
          {
            "weekday": 6,
            "effort_budget": 6
          },
          {
            "weekday": 7,
            "effort_budget": 6
          }
        ],
        "notifications": {
          "locale": "vi",
          "enabled": true,
          "quiet_start_local": "21:00",
          "quiet_end_local": "07:00",
          "version": 1
        },
        "theme": "light"
      },
      "sampleOnly": true,
      "actorConstraint": "exact actor allowlist",
      "envelope": "API refs use CommandEnvelope; local review context is not an API property."
    }
  ],
  "copy": {
    "heading": "Giao diện và ngôn ngữ",
    "primary": "Áp dụng giao diện",
    "empty": null,
    "notices": [],
    "locale": "vi",
    "demoLabel": "Bản thiết kế · dữ liệu mẫu · không kết nối dịch vụ"
  },
  "implementation": {
    "nativeRoute": "/design/appearance-language",
    "nativeRouteStatus": "proposed mapping, verify against implementing native navigator",
    "apiRefs": [
      "PATCH /v1/me/preferences"
    ],
    "newContractRefs": [],
    "notes": [
      "Tất cả ví dụ là dữ liệu thiết kế, không bằng chứng native/API/store đã chạy.",
      "Native route dưới đây là đề xuất mapping cho agent, không tuyên bố route source đã tồn tại.",
      "Mọi mutation dùng envelope {data,version,household_revision,replayed}, stable Idempotency-Key và expected_version khi sửa."
    ],
    "integrationStatus": "design complete; local static/draft interactions; native/API adapters pending",
    "sourceAuthority": [
      "docs/product-brief.md",
      "plans/261013-1409-sweepy-vietnam-mobile/mobile-flows.md",
      "plans/261013-1409-sweepy-vietnam-mobile/api-contracts.md",
      "packages/domain/src/contracts/phase2.ts",
      "packages/domain/src/index.ts",
      "packages/domain/src/contracts/phase3.ts",
      "packages/domain/src/contracts/billing.ts",
      "apps/mobile/src/lib/api.ts"
    ],
    "capability": "A",
    "errors": {
      "401": "Stop queue; adult login or child re-pair without parent account.",
      "403": "Do not retry lost capability. FEATURE_REQUIRED never grants Pro.",
      "409": "Fetch canonical scoped state; review/reconfirm new intent, do not rewrite old replay payload.",
      "422": "Field error with retained draft.",
      "429": "Respect Retry-After.",
      "503": "Backoff only retryable commands with original key."
    }
  }
}