@mangtre/ui 0.1.0

package/dist/catalog.js

@@ -0,0 +1,1210 @@
+// src/catalog/areas/core.ts
+var CORE_ENTRIES = [
+  // ---- theme ----
+  {
+    id: "theme/MangThemeProvider",
+    area: "theme",
+    name: "MangThemeProvider",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "C\u1EA5p theme/locale/density cho m\u1ECDi component @mangtre/ui (ch\u1EC9 context, kh\xF4ng b\u1ECDc DOM). B\u1ECDc c\xE2y con b\u1EB1ng theme='dark' \u0111\u1EC3 \u0111\u1EB7t l\xEAn n\u1EC1n t\u1ED1i c\u1EE7a shell; m\u1EB7c \u0111\u1ECBnh 'light' (ru\u1ED9t mini-app).",
+      en: "Provides theme/locale/density to all @mangtre/ui components (context only, no DOM). Wrap a subtree with theme='dark' for the shell surface; default 'light' (mini-app interior)."
+    },
+    code: `import { MangThemeProvider, Button } from "@mangtre/ui";
+
+<MangThemeProvider theme="light" locale="vi">
+  <Button>L\u01B0u</Button>
+</MangThemeProvider>`,
+    props: [
+      {
+        name: "theme",
+        type: '"light" | "dark" | "auto"',
+        default: '"light"',
+        desc: { vi: "B\u1EC1 m\u1EB7t s\xE1ng/t\u1ED1i", en: "Surface theme" }
+      },
+      {
+        name: "locale",
+        type: '"vi" | "en"',
+        default: '"vi"',
+        desc: { vi: "Ng\xF4n ng\u1EEF nh\xE3n", en: "Label language" }
+      },
+      {
+        name: "density",
+        type: '"comfortable" | "compact" | "touch"',
+        default: '"comfortable"',
+        desc: { vi: "M\u1EADt \u0111\u1ED9 control", en: "Control density" }
+      }
+    ],
+    related: ["theme/hooks"]
+  },
+  {
+    id: "theme/hooks",
+    area: "theme",
+    name: "useMangTheme, useLocale, useDensity, useScope, useKitStyles, cx",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Hook n\u1EC1n cho component t\u1EF1 d\u1EF1ng: \u0111\u1ECDc theme/locale/density, mount CSS scoped, gh\xE9p className. H\u1EA7u h\u1EBFt app KH\xD4NG c\u1EA7n \u2014 ch\u1EC9 khi t\u1EF1 vi\u1EBFt component theo chu\u1EA9n M\u0103ng.",
+      en: "Low-level hooks for building components: read theme/locale/density, mount scoped CSS, join classNames. Most apps don't need these \u2014 only when authoring M\u0103ng-style components."
+    },
+    code: `import { useScope, useKitStyles, cx } from "@mangtre/ui";
+
+function Thing({ theme }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return <div {...scope} className={cx(scope.className, "my-thing")} />;
+}`
+  },
+  {
+    id: "theme/MangApp",
+    area: "theme",
+    name: "MangApp",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P2",
+    version: "0.1.0",
+    summary: {
+      vi: "B\u1ECDc m\u1ED9t-d\xF2ng cho RU\u1ED8T mini-app: g\u1ED9p MangThemeProvider + m\u1ED9t root .mang-ui-scope th\u1EADt (\u0111\u1EC3 m\u1ECDi var(--m-*) ph\xE2n gi\u1EA3i, k\u1EC3 c\u1EA3 markup th\xF4) + ToastProvider, v\xE0 (tu\u1EF3 ch\u1ECDn) chi\u1EBFu sdk.theme qua applyThemeVars. M\u1EB7c \u0111\u1ECBnh theme='light' (AD v0.2 \xA79).",
+      en: "One-line wrapper for a mini-app INTERIOR: MangThemeProvider + a real .mang-ui-scope root (so every var(--m-*) resolves, even raw markup) + ToastProvider, and optionally projects sdk.theme via applyThemeVars. Default theme='light' (AD v0.2 \xA79)."
+    },
+    code: `import { MangApp } from "@mangtre/ui";
+import { createRoot } from "react-dom/client";
+
+export const mount = (root, sdk) => {
+  const r = createRoot(root);
+  r.render(
+    <MangApp locale={sdk.locale} sdkTheme={sdk.theme}>
+      <App storage={sdk.storage} />
+    </MangApp>,
+  );
+  return () => r.unmount();
+};`,
+    props: [
+      {
+        name: "theme",
+        type: '"light" | "dark" | "auto"',
+        default: '"light"',
+        desc: { vi: "B\u1EC1 m\u1EB7t ru\u1ED9t app", en: "Interior surface" }
+      },
+      {
+        name: "locale",
+        type: '"vi" | "en"',
+        default: '"vi"',
+        desc: { vi: "Truy\u1EC1n sdk.locale", en: "Pass sdk.locale" }
+      },
+      {
+        name: "sdkTheme",
+        type: "ThemeTokens",
+        desc: { vi: "S\u1EE3i accent runtime (sdk.theme)", en: "Runtime accent thread (sdk.theme)" }
+      },
+      {
+        name: "withToasts",
+        type: "boolean",
+        default: "true",
+        desc: { vi: "Mount ToastProvider", en: "Mount ToastProvider" }
+      }
+    ],
+    related: ["theme/MangThemeProvider", "overlay/Toast"]
+  },
+  // ---- primitives ----
+  {
+    id: "primitives/Stack",
+    area: "primitives",
+    name: "Box, Stack, HStack, VStack, Spacer",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Kh\u1ED1i layout flex theo thang spacing token. HStack=h\xE0ng, VStack=c\u1ED9t, Spacer \u0111\u1EA9y gi\xE3n. Kh\xF4ng m\xE0u n\xEAn kh\xF4ng c\u1EA7n theme.",
+      en: "Flex layout built on the token spacing scale. HStack=row, VStack=column, Spacer pushes apart. No color, so no theme needed."
+    },
+    code: `import { VStack, HStack, Spacer, Button } from "@mangtre/ui";
+
+<VStack gap={4}>
+  <HStack gap={2}>
+    <Button>L\u01B0u</Button>
+    <Spacer />
+    <Button variant="ghost">Hu\u1EF7</Button>
+  </HStack>
+</VStack>`,
+    props: [
+      {
+        name: "gap",
+        type: "0\u201316 (token step)",
+        default: "4",
+        desc: { vi: "Kho\u1EA3ng c\xE1ch gi\u1EEFa con", en: "Gap between children" }
+      },
+      {
+        name: "direction",
+        type: '"row" | "column"',
+        default: '"column"',
+        desc: { vi: "Tr\u1EE5c ch\xEDnh (Stack)", en: "Main axis (Stack)" }
+      },
+      {
+        name: "align / justify / wrap",
+        type: "CSS values / boolean",
+        desc: { vi: "C\u0103n ch\u1EC9nh flex", en: "Flex alignment" }
+      }
+    ]
+  },
+  {
+    id: "primitives/Text",
+    area: "primitives",
+    name: "Text, Heading",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Ch\u1EEF th\xE2n (Text, tone default/muted/strong/accent) v\xE0 ti\xEAu \u0111\u1EC1 (Heading level 1\u20136, font Quicksand). T\u1EF1 \u0111\xFAng m\xE0u theo theme.",
+      en: "Body text (Text, tone default/muted/strong/accent) and headings (Heading level 1\u20136, Quicksand). Theme-correct color."
+    },
+    code: `import { Heading, Text } from "@mangtre/ui";
+
+<Heading level={2}>Nh\xF3m c\u1EE7a b\u1EA1n</Heading>
+<Text tone="muted" size="sm">Ch\u1EA1y offline, d\u1EEF li\u1EC7u tr\xEAn m\xE1y.</Text>`,
+    props: [
+      {
+        name: "tone",
+        type: '"default" | "muted" | "strong" | "accent"',
+        default: '"default"',
+        desc: { vi: "S\u1EAFc \u0111\u1ED9 ch\u1EEF (Text)", en: "Text tone" }
+      },
+      {
+        name: "size",
+        type: "xs \u2026 3xl",
+        default: '"base"',
+        desc: { vi: "C\u1EE1 ch\u1EEF token", en: "Font-size token" }
+      },
+      {
+        name: "level",
+        type: "1\u20136",
+        default: "2",
+        desc: { vi: "C\u1EA5p ti\xEAu \u0111\u1EC1 (Heading)", en: "Heading level" }
+      }
+    ]
+  },
+  {
+    id: "primitives/Divider",
+    area: "primitives",
+    name: "Divider",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "\u0110\u01B0\u1EDDng k\u1EBB m\u1EA3nh theo m\xE0u line c\u1EE7a theme.",
+      en: "Hairline rule in the theme's line color."
+    },
+    code: `import { Divider } from "@mangtre/ui";
+
+<Divider />`
+  },
+  // ---- actions ----
+  {
+    id: "actions/Button",
+    area: "actions",
+    name: "Button",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "N\xFAt h\xE0nh \u0111\u1ED9ng. primary = n\u1EC1n xanh tre; secondary = vi\u1EC1n; ghost = trong su\u1ED1t; danger = \u0111\u1ECF. C\u1EE1 sm/md/lg, c\xF3 icon + block.",
+      en: "Action button. primary = bamboo-green fill; secondary = outline; ghost; danger = red. Sizes sm/md/lg, supports icon + block."
+    },
+    code: `import { Button } from "@mangtre/ui";
+
+<Button onClick={save}>L\u01B0u</Button>
+<Button variant="secondary">Hu\u1EF7</Button>
+<Button variant="danger" icon="\u{1F5D1}">Xo\xE1</Button>`,
+    props: [
+      {
+        name: "variant",
+        type: '"primary" | "secondary" | "ghost" | "danger"',
+        default: '"primary"',
+        desc: { vi: "Ki\u1EC3u n\xFAt", en: "Style" }
+      },
+      {
+        name: "size",
+        type: '"sm" | "md" | "lg"',
+        default: '"md"',
+        desc: { vi: "K\xEDch c\u1EE1", en: "Size" }
+      },
+      { name: "icon", type: "ReactNode", desc: { vi: "Icon \u0111\u1EE9ng tr\u01B0\u1EDBc", en: "Leading icon" } },
+      { name: "block", type: "boolean", desc: { vi: "Gi\xE3n h\u1EBFt chi\u1EC1u ngang", en: "Full width" } }
+    ],
+    related: ["actions/IconButton"]
+  },
+  {
+    id: "actions/IconButton",
+    area: "actions",
+    name: "IconButton, ButtonGroup",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "IconButton: n\xFAt vu\xF4ng ch\u1EC9-icon (b\u1EAFt bu\u1ED9c `label` cho a11y). ButtonGroup: h\xE0ng n\xFAt c\xE1ch \u0111\u1EC1u.",
+      en: "IconButton: square icon-only button (requires `label` for a11y). ButtonGroup: an evenly-spaced row."
+    },
+    code: `import { IconButton, ButtonGroup, Button } from "@mangtre/ui";
+
+<ButtonGroup>
+  <Button>L\u01B0u</Button>
+  <IconButton label="L\xE0m m\u1EDBi" variant="secondary">\u21BB</IconButton>
+</ButtonGroup>`,
+    props: [
+      {
+        name: "label",
+        type: "string",
+        required: true,
+        desc: { vi: "Nh\xE3n cho screen-reader", en: "Accessible label" }
+      }
+    ]
+  },
+  // ---- forms ----
+  {
+    id: "forms/Field",
+    area: "forms",
+    name: "Field",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "B\u1ECDc 1 control v\u1EDBi label/m\xF4 t\u1EA3/l\u1ED7i; t\u1EF1 n\u1ED1i id + aria. \u0110\u1EB7t control l\xE0m con duy nh\u1EA5t.",
+      en: "Wraps one control with label/description/error; auto-wires id + aria. Pass the control as the single child."
+    },
+    code: `import { Field, Input } from "@mangtre/ui";
+
+<Field label="T\xEAn nh\xF3m" description="Hi\u1EC3n th\u1ECB cho m\u1ECDi ng\u01B0\u1EDDi" required>
+  <Input placeholder="VD: \u0110i \u0110\xE0 L\u1EA1t" />
+</Field>`,
+    props: [
+      {
+        name: "label / description / error",
+        type: "ReactNode",
+        desc: { vi: "Nh\xE3n / m\xF4 t\u1EA3 / l\u1ED7i", en: "Label / desc / error" }
+      },
+      { name: "required", type: "boolean", desc: { vi: "Hi\u1EC7n d\u1EA5u *", en: "Show *" } }
+    ]
+  },
+  {
+    id: "forms/Input",
+    area: "forms",
+    name: "Input, TextArea, Select",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Control nh\u1EADp li\u1EC7u chu\u1EA9n (`.mang-control`): Input, TextArea, Select. Nh\u1EADn m\u1ECDi thu\u1ED9c t\xEDnh HTML g\u1ED1c; gh\xE9p v\u1EDBi Field.",
+      en: "Standard text controls (`.mang-control`): Input, TextArea, Select. Accept all native HTML attrs; pair with Field."
+    },
+    code: `import { Input, TextArea, Select } from "@mangtre/ui";
+
+<Input value={name} onChange={(e) => setName(e.target.value)} />
+<TextArea rows={3} />
+<Select value={bank} onChange={...}>
+  <option value="vcb">Vietcombank</option>
+</Select>`
+  },
+  {
+    id: "forms/Toggle",
+    area: "forms",
+    name: "Checkbox, Switch",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Control nh\u1ECB ph\xE2n: Checkbox (\u0111\xE1nh d\u1EA5u) v\xE0 Switch (b\u1EADt/t\u1EAFt). \u0110\u1EC1u b\u1ECDc input g\u1ED1c n\xEAn accessible + controlled qua checked/onChange.",
+      en: "Boolean controls: Checkbox and Switch. Both wrap a native input \u2014 accessible + controlled via checked/onChange."
+    },
+    code: `import { Checkbox, Switch } from "@mangtre/ui";
+
+<Checkbox label="\u0110\xE3 thanh to\xE1n" checked={paid} onChange={(e) => setPaid(e.target.checked)} />
+<Switch label="Ph\xF2ng tr\u1EF1c ti\u1EBFp" checked={live} onChange={(e) => setLive(e.target.checked)} />`
+  },
+  {
+    id: "forms/SegmentedControl",
+    area: "forms",
+    name: "SegmentedControl",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P2",
+    version: "0.1.0",
+    summary: {
+      vi: "Chuy\u1EC3n ch\u1EBF \u0111\u1ED9/b\u1ED9 l\u1ECDc m\u1ED9t-l\u1EF1a-ch\u1ECDn (ki\u1EC3u radio, n\xFAt li\u1EC1n nhau). D\xF9ng cho 2\u20134 ch\u1EBF \u0111\u1ED9 lo\u1EA1i tr\u1EEB nhau (vd 'H\xF4m nay / Tu\u1EA7n', 'T\u1EADp / \u0102n').",
+      en: "Single-select mode/filter toggle (radio-like, flush buttons). For 2\u20134 mutually exclusive modes (e.g. 'Today / Week', 'Workout / Meal')."
+    },
+    code: `import { SegmentedControl } from "@mangtre/ui";
+
+<SegmentedControl
+  ariaLabel="Ch\u1EBF \u0111\u1ED9 xem"
+  value={view}
+  onChange={setView}
+  options={[
+    { value: "today", label: "H\xF4m nay" },
+    { value: "week", label: "Tu\u1EA7n" },
+  ]}
+/>`,
+    props: [
+      {
+        name: "options",
+        type: "{ value: string; label: ReactNode; disabled?: boolean }[]",
+        required: true,
+        desc: { vi: "Danh s\xE1ch l\u1EF1a ch\u1ECDn", en: "Option list" }
+      },
+      {
+        name: "value",
+        type: "string",
+        required: true,
+        desc: { vi: "Gi\xE1 tr\u1ECB \u0111ang ch\u1ECDn", en: "Selected value" }
+      },
+      {
+        name: "onChange",
+        type: "(value: string) => void",
+        required: true,
+        desc: { vi: "Khi \u0111\u1ED5i l\u1EF1a ch\u1ECDn", en: "On selection change" }
+      },
+      {
+        name: "size",
+        type: '"sm" | "md"',
+        default: '"md"',
+        desc: { vi: "K\xEDch th\u01B0\u1EDBc", en: "Size" }
+      }
+    ],
+    related: ["navigation/Tabs"]
+  },
+  {
+    id: "forms/Chip",
+    area: "forms",
+    name: "Chip",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P2",
+    version: "0.1.0",
+    summary: {
+      vi: "Pill g\u1ECDn \u2014 ch\u1ECDn \u0111\u01B0\u1EE3c (onClick) v\xE0/ho\u1EB7c xo\xE1 \u0111\u01B0\u1EE3c (onRemove). D\xF9ng cho tag, b\u1ED9 l\u1ECDc nhanh, ch\u1ECDn nhi\u1EC1u (m\xF4n \u0103n/b\xE0i t\u1EADp).",
+      en: "Compact pill \u2014 selectable (onClick) and/or removable (onRemove). For tags, quick filters, multi-pick (meals/exercises)."
+    },
+    code: `import { Chip } from "@mangtre/ui";
+
+<Chip selected={on} onClick={() => setOn(!on)}>C\xE0 ph\xEA</Chip>
+<Chip onRemove={() => removeTag(t)}>{t}</Chip>`,
+    props: [
+      {
+        name: "selected",
+        type: "boolean",
+        desc: { vi: "Tr\u1EA1ng th\xE1i ch\u1ECDn", en: "Selected state" }
+      },
+      {
+        name: "onClick",
+        type: "() => void",
+        desc: { vi: "Bi\u1EBFn chip th\xE0nh n\xFAt toggle", en: "Make the chip a toggle button" }
+      },
+      {
+        name: "onRemove",
+        type: "() => void",
+        desc: { vi: "Th\xEAm n\xFAt \xD7 \u0111\u1EC3 xo\xE1", en: "Add a trailing \xD7 remove button" }
+      }
+    ]
+  },
+  {
+    id: "forms/NumberStepper",
+    area: "forms",
+    name: "NumberStepper",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P2",
+    version: "0.1.0",
+    summary: {
+      vi: "Nh\u1EADp s\u1ED1 v\u1EDBi n\xFAt \u2212/+, k\u1EB9p trong [min,max]. D\xF9ng cho s\u1ED1 l\u01B0\u1EE3ng, s\u1ED1 l\u1EA7n (reps), \u0111\u1EBFm.",
+      en: "Numeric entry with \u2212/+ buttons, clamped to [min,max]. For quantities, reps, counts."
+    },
+    code: `import { NumberStepper } from "@mangtre/ui";
+
+<NumberStepper ariaLabel="S\u1ED1 l\u1EA7n" value={reps} onChange={setReps} min={0} max={99} />`,
+    props: [
+      {
+        name: "value",
+        type: "number",
+        required: true,
+        desc: { vi: "Gi\xE1 tr\u1ECB", en: "Value" }
+      },
+      {
+        name: "onChange",
+        type: "(value: number) => void",
+        required: true,
+        desc: { vi: "Khi \u0111\u1ED5i gi\xE1 tr\u1ECB (\u0111\xE3 k\u1EB9p)", en: "On change (clamped)" }
+      },
+      {
+        name: "min / max / step",
+        type: "number",
+        desc: { vi: "Gi\u1EDBi h\u1EA1n + b\u01B0\u1EDBc nh\u1EA3y", en: "Bounds + step" }
+      }
+    ]
+  },
+  // ---- surface ----
+  {
+    id: "surface/Card",
+    area: "surface",
+    name: "Card, CardHeader, CardBody, CardFooter, Panel",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Card: b\u1EC1 m\u1EB7t n\u1ED9i dung ch\xEDnh (c\xF3 Header/Body/Footer, `interactive` \u0111\u1EC3 hover n\u1EA3y). Panel: b\u1EC1 m\u1EB7t ch\xECm gom n\u1ED9i dung ph\u1EE5.",
+      en: "Card: primary content surface (Header/Body/Footer, `interactive` for hover lift). Panel: a sunken surface for secondary content."
+    },
+    code: `import { Card, CardHeader, CardBody, CardFooter, Heading, Button } from "@mangtre/ui";
+
+<Card>
+  <CardHeader><Heading level={4}>Nh\xF3m c\u1EE7a b\u1EA1n</Heading></CardHeader>
+  <CardBody>3 ng\u01B0\u1EDDi \xB7 3 kho\u1EA3n</CardBody>
+  <CardFooter><Button size="sm">Xem ai n\u1EE3 ai</Button></CardFooter>
+</Card>`,
+    props: [
+      {
+        name: "interactive",
+        type: "boolean",
+        desc: { vi: "Hover n\u1EA3y + con tr\u1ECF pointer", en: "Hover lift + pointer" }
+      }
+    ]
+  },
+  // ---- navigation ----
+  {
+    id: "navigation/Tabs",
+    area: "navigation",
+    name: "Tabs, TabList, Tab, TabPanel",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Tab g\u1ED9p (controlled qua value/onValueChange, ho\u1EB7c defaultValue). B\xE0n ph\xEDm \u2190/\u2192/Home/End. TabPanel hi\u1EC7n theo value.",
+      en: "Compound tabs (controlled via value/onValueChange, or defaultValue). Keyboard \u2190/\u2192/Home/End. TabPanel shows by value."
+    },
+    code: `import { Tabs, TabList, Tab, TabPanel } from "@mangtre/ui";
+
+<Tabs defaultValue="a">
+  <TabList label="V\xED d\u1EE5">
+    <Tab value="a">T\u1ED5ng quan</Tab>
+    <Tab value="b">Kho\u1EA3n chi</Tab>
+  </TabList>
+  <TabPanel value="a">\u2026</TabPanel>
+  <TabPanel value="b">\u2026</TabPanel>
+</Tabs>`
+  },
+  // ---- overlay ----
+  {
+    id: "overlay/Dialog",
+    area: "overlay",
+    name: "Dialog",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Modal gi\u1EEFa m\xE0n (in-tree fixed, KH\xD4NG portal \u2192 kh\xF4ng b\u1ECB `container-type` nh\u1ED1t). B\u1EABy focus, Esc/n\u1EC1n \u0111\xF3ng. \u0110i\u1EC1u khi\u1EC3n qua open/onClose.",
+      en: "Centered modal (in-tree fixed, NOT a portal \u2192 never trapped by `container-type`). Focus-trapped, Esc/backdrop close. Controlled via open/onClose."
+    },
+    code: `import { Dialog, Button } from "@mangtre/ui";
+
+<Dialog open={open} onClose={() => setOpen(false)} title="Xo\xE1 nh\xF3m?"
+  footer={<><Button variant="ghost" onClick={close}>Hu\u1EF7</Button>
+            <Button variant="danger" onClick={remove}>Xo\xE1</Button></>}>
+  H\xE0nh \u0111\u1ED9ng n\xE0y kh\xF4ng th\u1EC3 ho\xE0n t\xE1c.
+</Dialog>`,
+    props: [
+      { name: "open", type: "boolean", required: true, desc: { vi: "Hi\u1EC3n th\u1ECB", en: "Visible" } },
+      {
+        name: "onClose",
+        type: "() => void",
+        required: true,
+        desc: { vi: "Khi \u0111\xF3ng", en: "On close" }
+      },
+      {
+        name: "title / footer",
+        type: "ReactNode",
+        desc: { vi: "Ti\xEAu \u0111\u1EC1 / ch\xE2n", en: "Title / footer" }
+      }
+    ],
+    related: ["overlay/Sheet", "overlay/Toast"]
+  },
+  {
+    id: "overlay/Sheet",
+    area: "overlay",
+    name: "Sheet",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Ng\u0103n k\xE9o tr\u01B0\u1EE3t t\u1EEB c\u1EA1nh (right/left/bottom). C\xF9ng c\u01A1 ch\u1EBF overlay nh\u01B0 Dialog.",
+      en: "Drawer sliding from an edge (right/left/bottom). Same overlay behavior as Dialog."
+    },
+    code: `import { Sheet } from "@mangtre/ui";
+
+<Sheet open={open} onClose={close} side="right" title="B\u1ED9 l\u1ECDc">\u2026</Sheet>`,
+    props: [
+      {
+        name: "side",
+        type: '"right" | "left" | "bottom"',
+        default: '"right"',
+        desc: { vi: "C\u1EA1nh g\u1EAFn", en: "Edge" }
+      }
+    ]
+  },
+  {
+    id: "overlay/Toast",
+    area: "overlay",
+    name: "ToastProvider, useToast",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Th\xF4ng b\xE1o n\u1ED5i. B\u1ECDc app b\u1EB1ng ToastProvider, r\u1ED3i g\u1ECDi toast({message, tone}) t\u1EEB useToast(). T\u1EF1 \u1EA9n sau 4s.",
+      en: "Floating notifications. Wrap the app in ToastProvider, then call toast({message, tone}) from useToast(). Auto-dismiss after 4s."
+    },
+    code: `import { ToastProvider, useToast } from "@mangtre/ui";
+
+function Save() {
+  const { toast } = useToast();
+  return <button onClick={() => toast({ message: "\u0110\xE3 l\u01B0u \u2713", tone: "success" })}>L\u01B0u</button>;
+}
+// <ToastProvider><App/></ToastProvider>`
+  },
+  // ---- feedback ----
+  {
+    id: "feedback/states",
+    area: "feedback",
+    name: "EmptyState, ErrorState",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Tr\u1EA1ng th\xE1i r\u1ED7ng/l\u1ED7i c\u0103n gi\u1EEFa: icon + ti\xEAu \u0111\u1EC1 + m\xF4 t\u1EA3 + action. \u0110\u1EB7t trong Card ho\u1EB7c v\xF9ng n\u1ED9i dung.",
+      en: "Centered empty/error states: icon + title + description + action. Place inside a Card or content area."
+    },
+    code: `import { EmptyState, Button } from "@mangtre/ui";
+
+<EmptyState icon="\u{1F331}" title="Ch\u01B0a c\xF3 nh\xF3m n\xE0o"
+  description="T\u1EA1o nh\xF3m \u0111\u1EA7u ti\xEAn \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u."
+  action={<Button size="sm">T\u1EA1o nh\xF3m</Button>} />`
+  },
+  {
+    id: "feedback/loaders",
+    area: "feedback",
+    name: "Skeleton, Spinner, Progress",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Ch\u1EC9 b\xE1o t\u1EA3i: Skeleton (khung ch\u1EDD), Spinner (xoay), Progress (thanh; b\u1ECF value = v\xF4 \u0111\u1ECBnh). An to\xE0n reduced-motion.",
+      en: "Loading indicators: Skeleton (placeholder), Spinner, Progress (bar; omit value = indeterminate). Reduced-motion safe."
+    },
+    code: `import { Skeleton, Spinner, Progress } from "@mangtre/ui";
+
+<Spinner />
+<Skeleton width="8rem" />
+<Progress value={64} />
+<Progress />  {/* indeterminate */}`
+  }
+];
+
+// src/catalog/areas/domain.ts
+var DOMAIN_ENTRIES = [
+  // ---- money ----
+  {
+    id: "money/components",
+    area: "money",
+    name: "AmountSummary, ExpenseList, ExpenseRow, SettlementCard, PaidBadge, UnpaidBadge",
+    importPath: "@mangtre/ui/money",
+    status: "stable",
+    since: "P1",
+    version: "0.1.0",
+    summary: {
+      vi: "B\u1ED9 chia ti\u1EC1n: t\u1ED5ng s\u1ED1 ti\u1EC1n l\u1EDBn, danh s\xE1ch/h\xE0ng kho\u1EA3n chi, th\u1EBB t\u1EA5t to\xE1n (k\xE8m slot VietQR + \u0111\xE1nh d\u1EA5u \u0111\xE3 tr\u1EA3), badge \u0111\xE3/ch\u01B0a tr\u1EA3. Hi\u1EC3n th\u1ECB thu\u1EA7n \u2014 kh\xF4ng gi\u1EEF ti\u1EC1n.",
+      en: "Money-splitting kit: big amount summary, expense list/rows, settlement card (with a VietQR slot + mark-paid), paid/unpaid badges. Display only \u2014 never holds money."
+    },
+    code: `import { AmountSummary, ExpenseList, ExpenseRow, SettlementCard } from "@mangtre/ui/money";
+
+<AmountSummary label="T\u1ED5ng qu\u1EF9" amount={5900000} />
+<ExpenseList>
+  <ExpenseRow note="\u0102n t\u1ED1i" meta="rum tr\u1EA3 \xB7 chia 3" amount={450000} />
+</ExpenseList>
+<SettlementCard from="B\xECnh" to="rum" amount={150000} onMarkPaid={pay} />`
+  },
+  // ---- learning ----
+  {
+    id: "learning/components",
+    area: "learning",
+    name: "Flashcard, QuizCard, ScoreCard, StreakBadge",
+    importPath: "@mangtre/ui/learning",
+    status: "stable",
+    since: "P1",
+    version: "0.1.0",
+    summary: {
+      vi: "B\u1ED9 h\u1ECDc t\u1EADp: th\u1EBB l\u1EADt (Flashcard), c\xE2u h\u1ECFi tr\u1EAFc nghi\u1EC7m (QuizCard, c\xF3 reveal \u0111\xFAng/sai), th\u1EBB \u0111i\u1EC3m, badge chu\u1ED7i ng\xE0y. App s\u1EDF h\u1EEFu logic SM-2/quiz.",
+      en: "Learning kit: flip Flashcard, multiple-choice QuizCard (with correct/wrong reveal), ScoreCard, StreakBadge. App owns the SM-2/quiz logic."
+    },
+    code: `import { Flashcard, QuizCard, ScoreCard, StreakBadge } from "@mangtre/ui/learning";
+
+<Flashcard front={<>Photosynthesis?</>} back={<>Quang h\u1EE3p</>} />
+<QuizCard question="Th\u1EE7 \u0111\xF4 VN?" options={[{id:"a",label:"H\xE0 N\u1ED9i"},{id:"b",label:"TP.HCM"}]}
+  value={pick} onSelect={setPick} />
+<ScoreCard score={8} total={10} /> <StreakBadge days={12} />`
+  },
+  // ---- layout ----
+  {
+    id: "layout/components",
+    area: "layout",
+    name: "AppFrame, Page, Container, PageHeader, Section, BottomActionBar, SafeArea",
+    importPath: "@mangtre/ui/layout",
+    status: "stable",
+    since: "P2",
+    version: "0.1.0",
+    summary: {
+      vi: "Khung trang desktop-responsive (Design System \xA79): Page (gi\u1EDBi h\u1EA1n ~68rem), Container (\u0111\u1ECDc/cap), PageHeader (eyebrow+title+actions), Section, thanh h\xE0nh \u0111\u1ED9ng \u0111\xE1y d\xEDnh, SafeArea cho notch.",
+      en: "Desktop-responsive page scaffolding (Design System \xA79): Page (~68rem cap), Container, PageHeader (eyebrow+title+actions), Section, sticky BottomActionBar, SafeArea for notches."
+    },
+    code: `import { Page, PageHeader, Section, Button } from "@mangtre/ui/layout";
+
+<Page>
+  <PageHeader eyebrow="Nh\xF3m" title="Chia ti\u1EC1n nh\xF3m" actions={<Button>Chia s\u1EBB</Button>} />
+  <Section title="Kho\u1EA3n chi">\u2026</Section>
+</Page>`
+  },
+  {
+    id: "layout/ListRow",
+    area: "layout",
+    name: "ListRow",
+    importPath: "@mangtre/ui/layout",
+    status: "stable",
+    since: "P2",
+    version: "0.1.0",
+    summary: {
+      vi: "D\xF2ng danh s\xE1ch v\u1EDBi slot leading / title+meta / trailing. Th\xE0nh n\xFAt khi c\xF3 onClick. Ti\xEAu \u0111\u1EC1 t\u1EF1 c\u1EAFt (ellipsis); d\xF9ng cho m\u1ECDi list/menu (m\xF4n h\u1ECDc, deadline, th\xE0nh vi\xEAn\u2026).",
+      en: "A list item with leading / title+meta / trailing slots. Becomes a button with onClick. Title ellipsizes; for any list/menu (subjects, deadlines, members\u2026)."
+    },
+    code: `import { ListRow } from "@mangtre/ui/layout";
+
+<ListRow
+  leading="\u{1F4D5}"
+  title="Gi\u1EA3i t\xEDch 1"
+  meta="T2 \xB7 7:00\u20139:00 \xB7 P.301"
+  trailing={<Badge>S\u1EAFp t\u1EDBi</Badge>}
+  onClick={() => open(slot)}
+/>`,
+    props: [
+      {
+        name: "title",
+        type: "ReactNode",
+        required: true,
+        desc: { vi: "D\xF2ng ti\xEAu \u0111\u1EC1", en: "Title line" }
+      },
+      {
+        name: "leading / trailing",
+        type: "ReactNode",
+        desc: { vi: "Slot tr\xE1i / ph\u1EA3i", en: "Left / right slots" }
+      },
+      {
+        name: "meta",
+        type: "ReactNode",
+        desc: { vi: "D\xF2ng ph\u1EE5 d\u01B0\u1EDBi ti\xEAu \u0111\u1EC1", en: "Secondary line" }
+      },
+      {
+        name: "onClick",
+        type: "() => void",
+        desc: { vi: "Bi\u1EBFn c\u1EA3 d\xF2ng th\xE0nh n\xFAt", en: "Make the whole row a button" }
+      }
+    ]
+  },
+  // ---- media ----
+  {
+    id: "media/components",
+    area: "media",
+    name: "Dropzone, FilePreview, ImagePreview, Avatar, AvatarGroup",
+    importPath: "@mangtre/ui/media",
+    status: "stable",
+    since: "P2",
+    version: "0.1.0",
+    summary: {
+      vi: "B\u1ED9 media: v\xF9ng k\xE9o-th\u1EA3 t\u1EC7p, th\u1EBB xem t\u1EC7p, xem \u1EA3nh, avatar (ch\u1EEF c\xE1i/\u1EA3nh) + nh\xF3m avatar ch\u1ED3ng. App x\u1EED l\xFD t\u1EC7p th\u1EADt.",
+      en: "Media kit: file dropzone, file preview card, image preview, Avatar (initials/image) + stacked AvatarGroup. App handles the actual files."
+    },
+    code: `import { Dropzone, Avatar, AvatarGroup } from "@mangtre/ui/media";
+
+<Dropzone onFiles={(files) => upload(files)} accept="image/*" multiple />
+<AvatarGroup people={[{ name: "An" }, { name: "B\xECnh" }]} />`
+  },
+  // ---- settings ----
+  {
+    id: "settings/components",
+    area: "settings",
+    name: "SettingsSection, SettingsRow, SettingsToggle",
+    importPath: "@mangtre/ui/settings",
+    status: "stable",
+    since: "P2",
+    version: "0.1.0",
+    summary: {
+      vi: "Khung trang c\xE0i \u0111\u1EB7t: nh\xF3m c\xF3 ti\xEAu \u0111\u1EC1, h\xE0ng (label+m\xF4 t\u1EA3+control), v\xE0 h\xE0ng c\xF4ng t\u1EAFc ti\u1EC7n d\u1EE5ng.",
+      en: "Settings scaffolding: titled section, row (label+description+control), and a convenience toggle row."
+    },
+    code: `import { SettingsSection, SettingsToggle } from "@mangtre/ui/settings";
+
+<SettingsSection title="C\xE0i \u0111\u1EB7t">
+  <SettingsToggle label="Th\xF4ng b\xE1o" description="Nh\u1EAFc deadline h\u1EB1ng ng\xE0y"
+    checked={on} onChange={setOn} />
+</SettingsSection>`
+  },
+  // ---- privacy ----
+  {
+    id: "privacy/components",
+    area: "privacy",
+    name: "PrivacyNotice, LocalFirstNotice, NoPiiBadge, ExternalLinkWarning",
+    importPath: "@mangtre/ui/privacy",
+    status: "stable",
+    since: "P2",
+    version: "0.1.0",
+    summary: {
+      vi: "Copy ni\u1EC1m tin/ri\xEAng t\u01B0: th\xF4ng b\xE1o chung, 'ch\u1EA1y offline \xB7 d\u1EEF li\u1EC7u tr\xEAn m\xE1y', badge kh\xF4ng-PII, c\u1EA3nh b\xE1o m\u1EDF li\xEAn k\u1EBFt ngo\xE0i. C\u1EE7ng c\u1ED1 h\u1EE3p \u0111\u1ED3ng local-first.",
+      en: "Trust/privacy copy: generic notice, 'runs offline \xB7 data on device', No-PII badge, external-link warning. Reinforces the local-first contract."
+    },
+    code: `import { LocalFirstNotice, NoPiiBadge } from "@mangtre/ui/privacy";
+
+<LocalFirstNotice />
+<NoPiiBadge />`
+  },
+  // ---- editor ----
+  {
+    id: "editor/components",
+    area: "editor",
+    name: "Prose, CodeBlock, Kbd, CalloutBlock",
+    importPath: "@mangtre/ui/editor",
+    status: "stable",
+    since: "P2",
+    version: "0.1.0",
+    summary: {
+      vi: "Nguy\xEAn th\u1EE7y n\u1ED9i dung: Prose (b\u1ECDc ch\u1EEF typographic), CodeBlock (c\xF3 n\xFAt ch\xE9p), Kbd (ph\xEDm), CalloutBlock (note/tip/warn/danger). KH\xD4NG nh\xFAng HTML th\xF4 \u2014 render markdown \u1EDF app sau khi sanitize.",
+      en: "Content primitives: Prose (typographic wrapper), CodeBlock (copy button), Kbd, CalloutBlock (note/tip/warn/danger). NO raw HTML injection \u2014 render markdown app-side after sanitizing."
+    },
+    code: `import { CodeBlock, CalloutBlock, Kbd } from "@mangtre/ui/editor";
+
+<CalloutBlock tone="tip">D\xF9ng <Kbd>\u2318K</Kbd> \u0111\u1EC3 m\u1EDF b\u1EA3ng l\u1EC7nh.</CalloutBlock>
+<CodeBlock code={'sdk.data?.set("k", { v: 1 })'} />`
+  },
+  // ---- monetization ----
+  {
+    id: "monetization/components",
+    area: "monetization",
+    name: "ComingSoonMonetizationCard, PayoutStatusBadge, EarningsLedgerTable",
+    importPath: "@mangtre/ui/monetization",
+    status: "stub",
+    since: "P2",
+    version: "0.1.0",
+    summary: {
+      vi: "CH\u1EC8 l\xE0 v\u1ECF tr\xECnh b\xE0y \u2014 thanh to\xE1n/chia doanh thu v\u1EABn n\u1EB1m ngo\xE0i l\u1ED9 tr\xECnh (LATER). D\xF9ng \u0111\u1EC3 dashboard hi\u1EC7n 's\u1EAFp c\xF3' m\xE0 kh\xF4ng ph\u1EA3i t\u1EF1 b\u1ECBa UI.",
+      en: "PRESENTATIONAL STUBS ONLY \u2014 payments/rev-share remain anti-roadmap (LATER). Lets a dashboard show a 'coming later' surface without inventing one."
+    },
+    code: `import { ComingSoonMonetizationCard } from "@mangtre/ui/monetization";
+
+<ComingSoonMonetizationCard />`
+  }
+];
+
+// src/catalog/areas/platform.ts
+var PLATFORM_ENTRIES = [
+  // ---- platform ----
+  {
+    id: "platform/Badge",
+    area: "platform",
+    name: "Badge, VerifiedBadge",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Badge: vi\xEAn tr\u1EA1ng th\xE1i (tone accent/neutral/success/danger/warning/info). VerifiedBadge: d\u1EA5u 'M\u0103ng Verified' (compact = ch\u1EC9 icon).",
+      en: "Badge: status pill (tone accent/neutral/success/danger/warning/info). VerifiedBadge: the 'M\u0103ng Verified' mark (compact = icon only)."
+    },
+    code: `import { Badge, VerifiedBadge } from "@mangtre/ui";
+
+<Badge tone="success">Th\xE0nh c\xF4ng</Badge>
+<VerifiedBadge />`,
+    props: [
+      {
+        name: "tone",
+        type: '"accent" | "neutral" | "success" | "danger" | "warning" | "info"',
+        default: '"accent"',
+        desc: { vi: "S\u1EAFc th\xE1i", en: "Tone" }
+      }
+    ]
+  },
+  {
+    id: "platform/seam-badges",
+    area: "platform",
+    name: "SurfaceBadge, PermissionBadge, LocalBadge, CloudBadge, RealtimeBadge",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Badge g\u1EAFn seam: b\u1EC1 m\u1EB7t (desktop/web/zalo), quy\u1EC1n (sensitive \u2192 c\u1EA3nh b\xE1o), v\xE0 ch\u1EBF \u0111\u1ED9 d\u1EEF li\u1EC7u (Tr\xEAn m\xE1y / \u0110\xE1m m\xE2y / Tr\u1EF1c ti\u1EBFp).",
+      en: "Seam-aware badges: surface (desktop/web/zalo), permission (sensitive \u2192 warning), and data mode (On-device / Cloud / Live)."
+    },
+    code: `import { SurfaceBadge, PermissionBadge, CloudBadge } from "@mangtre/ui";
+
+<SurfaceBadge surface="desktop" />
+<PermissionBadge permission="data" sensitive />
+<CloudBadge />`
+  },
+  {
+    id: "platform/gates",
+    area: "platform",
+    name: "SurfaceGate, PermissionGate, GracefulDegradePanel, DesktopOnly, WebOnly, ZaloOnly",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P1",
+    version: "0.1.0",
+    summary: {
+      vi: "Hi\u1EC7n n\u1ED9i dung theo n\u01A1i ch\u1EA1y/quy\u1EC1n. B\u1ECB ch\u1EB7n \u2192 fallback (m\u1EB7c \u0111\u1ECBnh GracefulDegradePanel gi\u1EA3i th\xEDch, kh\xF4ng \u1EA9n l\u1EB7ng). Kh\u1EDBp seam surfaces.",
+      en: "Render by surface/permission. Blocked \u2192 fallback (default GracefulDegradePanel explains; never silently hidden). Matches the surfaces seam."
+    },
+    code: `import { SurfaceGate, PermissionGate } from "@mangtre/ui";
+
+<SurfaceGate surfaces={["desktop"]} current={surface}>
+  <AiPanel />
+</SurfaceGate>
+<PermissionGate granted={canData} fallback={<p>C\u1EA7n quy\u1EC1n data</p>}>
+  <LiveRoom />
+</PermissionGate>`
+  },
+  {
+    id: "platform/money-text",
+    area: "platform",
+    name: "VndText, MoneyText, formatVnd",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "Hi\u1EC3n th\u1ECB ti\u1EC1n: VndText (\u0111\u1ED3ng VN, c\xF3 t\xF4 m\xE0u +/-), MoneyText (\u0111a ti\u1EC1n t\u1EC7), formatVnd (h\xE0m thu\u1EA7n). Ch\u1EC9 hi\u1EC3n th\u1ECB \u2014 M\u0103ng kh\xF4ng gi\u1EEF ti\u1EC1n.",
+      en: "Money display: VndText (\u0111\u1ED3ng, optional +/- color), MoneyText (any currency), formatVnd (pure fn). Display only \u2014 M\u0103ng never holds money."
+    },
+    code: `import { VndText, formatVnd } from "@mangtre/ui";
+
+<VndText amount={150000} sign="auto" />
+formatVnd(1500000); // "1.500.000 \u0111"`
+  },
+  // ---- charts ----
+  {
+    id: "charts/Stat",
+    area: "charts",
+    name: "Stat, StatGroup",
+    importPath: "@mangtre/ui/charts",
+    status: "stable",
+    since: "P1",
+    version: "0.1.0",
+    summary: {
+      vi: "Ch\u1EC9 s\u1ED1 \u0111\u01A1n (nh\xE3n + gi\xE1 tr\u1ECB + delta t\u0103ng/gi\u1EA3m) v\xE0 l\u01B0\u1EDBi Stat. Cho dashboard/b\xE1o c\xE1o.",
+      en: "Single metric (label + value + up/down delta) and a grid of Stats. For dashboards/reports."
+    },
+    code: `import { Stat, StatGroup } from "@mangtre/ui/charts";
+
+<StatGroup>
+  <Stat label="Ng\u01B0\u1EDDi d\xF9ng" value="1.240" delta="+12%" direction="up" />
+  <Stat label="Quay l\u1EA1i" value="58%" delta="-3%" direction="down" />
+</StatGroup>`
+  },
+  {
+    id: "charts/plots",
+    area: "charts",
+    name: "Sparkline, BarChart, LineChart, AreaChart, DonutChart, Heatmap, Legend",
+    importPath: "@mangtre/ui/charts",
+    status: "stable",
+    since: "P1",
+    version: "0.1.0",
+    summary: {
+      vi: "Bi\u1EC3u \u0111\u1ED3 SVG nh\u1EB9 (KH\xD4NG th\u01B0 vi\u1EC7n). M\xE0u chu\u1ED7i xoay theo palette th\u01B0\u01A1ng hi\u1EC7u; geometry thu\u1EA7n (chart-utils) c\xF3 test.",
+      en: "Lightweight inline-SVG charts (NO dependency). Series colors cycle the brand palette; pure geometry (chart-utils) is tested."
+    },
+    code: `import { LineChart, BarChart, DonutChart, Sparkline } from "@mangtre/ui/charts";
+
+<Sparkline values={[3,7,4,9,6,11,8]} />
+<LineChart values={[2,5,3,8,6,10,7]} area />
+<BarChart values={[4,8,3,9,6]} />
+<DonutChart values={[5,3,2]} />`,
+    props: [
+      { name: "values", type: "number[]", required: true, desc: { vi: "D\u1EEF li\u1EC7u", en: "Data" } }
+    ]
+  },
+  // ---- ai ----
+  {
+    id: "ai/PowerPicker",
+    area: "ai",
+    name: "PowerPicker",
+    importPath: "@mangtre/ui",
+    status: "stable",
+    since: "P0",
+    version: "0.1.0",
+    summary: {
+      vi: "B\u1ED9 ch\u1ECDn 'N\u0103ng l\u1EF1c AI' chu\u1EA9n cho seam ai. App truy\u1EC1n powers + value/onChange; component s\u1EDF h\u1EEFu UI (kh\xF4ng tu\u1EF3 bi\u1EBFn). \u1EA8n khi < 2 power.",
+      en: "The canonical 'AI power' picker for the ai seam. App passes powers + value/onChange; the component owns the UI (no per-app restyle). Hidden when < 2 powers."
+    },
+    code: `import { PowerPicker } from "@mangtre/ui";
+
+<PowerPicker powers={powers} value={tier} onChange={setTier} locale="vi" />`
+  },
+  {
+    id: "ai/cards",
+    area: "ai",
+    name: "AiStatusCard, AiSetupCard",
+    importPath: "@mangtre/ui/ai",
+    status: "stable",
+    since: "P1",
+    version: "0.1.0",
+    summary: {
+      vi: "Th\u1EBB tr\u1EA1ng th\xE1i AI (s\u1EB5n s\xE0ng + d\xF2ng ri\xEAng t\u01B0) v\xE0 th\u1EBB c\xE0i \u0111\u1EB7t (c\xE0i runtime + t\u1EA3i model). App n\u1ED1i sdk.ai; component ch\u1EC9 tr\xECnh b\xE0y. Desktop-local.",
+      en: "AI status card (ready + privacy line) and setup card (install runtime + pull model). App wires sdk.ai; UI only. Desktop-local."
+    },
+    code: `import { AiStatusCard, AiSetupCard } from "@mangtre/ui/ai";
+
+<AiStatusCard ready detail="qwen3 \xB7 balanced" />
+<AiSetupCard models={[{ id: "q3", name: "Qwen3 3B", meta: "~2GB" }]} onInstall={...} onPull={...} />`
+  },
+  // ---- handoff ----
+  {
+    id: "handoff/components",
+    area: "handoff",
+    name: "HandoffPairingPanel, HandoffPayloadBanner, HandoffConnectionStatus",
+    importPath: "@mangtre/ui/handoff",
+    status: "stable",
+    since: "P1",
+    version: "0.1.0",
+    summary: {
+      vi: "UI cho seam handoff (d\xE1n t\u1EEB thi\u1EBFt b\u1ECB g\u1EA7n qua LAN, desktop-only). Panel gh\xE9p QR + tr\u1EA1ng th\xE1i; banner payload \u0111\u1EBFn \u2192 D\xE1n/B\u1ECF. App s\u1EDF h\u1EEFu transport + QR.",
+      en: "UI for the handoff seam (paste from a nearby device over LAN, desktop-only). Pairing panel (QR + status); incoming-payload banner \u2192 Paste/Dismiss. App owns transport + QR."
+    },
+    code: `import { HandoffPairingPanel, HandoffPayloadBanner } from "@mangtre/ui/handoff";
+
+<HandoffPairingPanel qr={<QrCanvas/>} connected device="iPhone" />
+<HandoffPayloadBanner kind="JSON" device="iPhone" onPaste={paste} onDismiss={hide} />`
+  },
+  // ---- data-room ----
+  {
+    id: "data-room/components",
+    area: "data-room",
+    name: "RoomStatusBadge, RoomShareButton, RoomLinkCard, RoomPresence, RoomConflictNotice",
+    importPath: "@mangtre/ui/data-room",
+    status: "stable",
+    since: "P1",
+    version: "0.1.0",
+    summary: {
+      vi: "UI cho seam data ('Ph\xF2ng s\u1ED1ng'): badge tr\u1EA1ng th\xE1i (offline/cloud/realtime + s\u1ED1 ng\u01B0\u1EDDi), n\xFAt chia s\u1EBB, th\u1EBB link, avatar hi\u1EC7n di\u1EC7n, th\xF4ng b\xE1o xung \u0111\u1ED9t. Capability-based, kh\xF4ng t\xE0i kho\u1EA3n.",
+      en: "UI for the data seam ('Ph\xF2ng s\u1ED1ng'): status badge (offline/cloud/realtime + peers), share button, link card, presence avatars, conflict notice. Capability-based, no accounts."
+    },
+    code: `import { RoomStatusBadge, RoomPresence, RoomShareButton } from "@mangtre/ui/data-room";
+
+<RoomStatusBadge status="realtime" peers={3} />
+<RoomPresence peers={["An","B\xECnh","Chi"]} />
+<RoomShareButton onShare={share} />`
+  },
+  // ---- analytics ----
+  {
+    id: "analytics/components",
+    area: "analytics",
+    name: "AnalyticsConsentToggle, GateMetBadge, GateReport, EventLogTable",
+    importPath: "@mangtre/ui/analytics",
+    status: "stable",
+    since: "P1",
+    version: "0.1.0",
+    summary: {
+      vi: "UI cho seam analytics: c\xF4ng t\u1EAFc \u0111\u1ED3ng \xFD (opt-out), badge \u0111\u1EA1t c\u1ED5ng, b\u1EA3ng retention m\u1ED7i-app, b\u1EA3ng log s\u1EF1 ki\u1EC7n. Non-PII theo h\u1EE3p \u0111\u1ED3ng.",
+      en: "UI for the analytics seam: consent toggle (opt-out), gate-met badge, per-app retention table, event-log table. Non-PII by contract."
+    },
+    code: `import { AnalyticsConsentToggle, GateReport } from "@mangtre/ui/analytics";
+
+<AnalyticsConsentToggle enabled={on} onChange={setOn} />
+<GateReport rows={[{ app: "chia-tien-nhom", devices: 120, returning: 64 }]} />`
+  },
+  // ---- sandbox ----
+  {
+    id: "sandbox/components",
+    area: "sandbox",
+    name: "SandboxFrame, SandboxError, SafetyScanBadge, StaticScanResult",
+    importPath: "@mangtre/ui/sandbox",
+    status: "stable",
+    since: "P1",
+    version: "0.1.0",
+    summary: {
+      vi: "UI h\u1ED9p c\xE1t/ki\u1EC3m duy\u1EC7t: khung quanh iframe app (badge ngu\u1ED3n/origin), tr\u1EA1ng th\xE1i l\u1ED7i, badge m\u1EE9c qu\xE9t (an to\xE0n/c\u1EA7n xem/ch\u1EB7n), danh s\xE1ch ph\xE1t hi\u1EC7n.",
+      en: "Sandbox/curation UI: chrome around the app iframe (source/origin badges), error state, scan-level badge (safe/review/blocked), findings list."
+    },
+    code: `import { SandboxFrame, SafetyScanBadge } from "@mangtre/ui/sandbox";
+
+<SandboxFrame origin="mang-apps.com" source={<Badge tone="neutral">sandbox</Badge>}>
+  <iframe \u2026 />
+</SandboxFrame>
+<SafetyScanBadge level="review" />`
+  },
+  // ---- creator ----
+  {
+    id: "creator/components",
+    area: "creator",
+    name: "BundleUploadDropzone, ManifestPreview, StaticScanPanel, ReviewStatusBadge, VersionBadge, BuildBadge",
+    importPath: "@mangtre/ui/creator",
+    status: "stable",
+    since: "P1",
+    version: "0.1.0",
+    summary: {
+      vi: "UI b\u1EA3ng creator: k\xE9o-th\u1EA3 bundle, xem manifest, panel qu\xE9t t\u0129nh, badge tr\u1EA1ng th\xE1i duy\u1EC7t (ch\u1EDD/live/c\u1EA7n s\u1EEDa/t\u1EEB ch\u1ED1i), badge version/build.",
+      en: "Creator-dashboard UI: bundle dropzone, manifest preview, static-scan panel, review-status badge (pending/live/changes/rejected), version/build badges."
+    },
+    code: `import { BundleUploadDropzone, ManifestPreview, ReviewStatusBadge } from "@mangtre/ui/creator";
+
+<BundleUploadDropzone onFile={upload} file={selected} />
+<ManifestPreview manifest={{ id: "my-app", name: "My App", version: "1.0.0", permissions: ["storage"] }} />
+<ReviewStatusBadge status="pending_review" />`
+  }
+];
+
+// src/catalog/index.ts
+var CATALOG_VERSION = "0.1.0";
+var CATALOG = [...CORE_ENTRIES, ...PLATFORM_ENTRIES, ...DOMAIN_ENTRIES];
+var AREAS = [
+  {
+    id: "theme",
+    title: { vi: "Theme & n\u1EC1n", en: "Theme & foundation" },
+    blurb: { vi: "Provider + hook + token", en: "Provider + hooks + tokens" }
+  },
+  {
+    id: "primitives",
+    title: { vi: "Nguy\xEAn th\u1EE7y", en: "Primitives" },
+    blurb: { vi: "Layout + ch\u1EEF", en: "Layout + text" }
+  },
+  { id: "actions", title: { vi: "H\xE0nh \u0111\u1ED9ng", en: "Actions" }, blurb: { vi: "N\xFAt", en: "Buttons" } },
+  {
+    id: "forms",
+    title: { vi: "Bi\u1EC3u m\u1EABu", en: "Forms" },
+    blurb: { vi: "Field + control", en: "Field + controls" }
+  },
+  {
+    id: "surface",
+    title: { vi: "B\u1EC1 m\u1EB7t", en: "Surface" },
+    blurb: { vi: "Card + Panel", en: "Cards + panels" }
+  },
+  {
+    id: "navigation",
+    title: { vi: "\u0110i\u1EC1u h\u01B0\u1EDBng", en: "Navigation" },
+    blurb: { vi: "Tabs", en: "Tabs" }
+  },
+  {
+    id: "overlay",
+    title: { vi: "L\u1EDBp ph\u1EE7", en: "Overlay" },
+    blurb: { vi: "Dialog/Sheet/Toast", en: "Dialog/Sheet/Toast" }
+  },
+  {
+    id: "feedback",
+    title: { vi: "Ph\u1EA3n h\u1ED3i", en: "Feedback" },
+    blurb: { vi: "Empty/Error/Loader", en: "Empty/Error/loaders" }
+  },
+  {
+    id: "platform",
+    title: { vi: "N\u1EC1n t\u1EA3ng", en: "Platform" },
+    blurb: { vi: "Badge + gate + ti\u1EC1n", en: "Badges + gates + money" }
+  },
+  {
+    id: "charts",
+    title: { vi: "Bi\u1EC3u \u0111\u1ED3", en: "Charts" },
+    blurb: { vi: "SVG nh\u1EB9", en: "Lightweight SVG" }
+  },
+  { id: "ai", title: { vi: "AI", en: "AI" }, blurb: { vi: "Seam ai", en: "ai seam" } },
+  {
+    id: "handoff",
+    title: { vi: "Handoff", en: "Handoff" },
+    blurb: { vi: "Seam handoff (LAN)", en: "handoff seam (LAN)" }
+  },
+  {
+    id: "data-room",
+    title: { vi: "Ph\xF2ng s\u1ED1ng", en: "Data room" },
+    blurb: { vi: "Seam data", en: "data seam" }
+  },
+  {
+    id: "analytics",
+    title: { vi: "Ph\xE2n t\xEDch", en: "Analytics" },
+    blurb: { vi: "Seam analytics", en: "analytics seam" }
+  },
+  {
+    id: "sandbox",
+    title: { vi: "H\u1ED9p c\xE1t", en: "Sandbox" },
+    blurb: { vi: "Ki\u1EC3m duy\u1EC7t/an to\xE0n", en: "Curation/safety" }
+  },
+  {
+    id: "creator",
+    title: { vi: "Ng\u01B0\u1EDDi t\u1EA1o", en: "Creator" },
+    blurb: { vi: "\u0110\u0103ng app", en: "Publishing" }
+  },
+  { id: "money", title: { vi: "Ti\u1EC1n", en: "Money" }, blurb: { vi: "Chia ti\u1EC1n", en: "Splitting" } },
+  {
+    id: "learning",
+    title: { vi: "H\u1ECDc t\u1EADp", en: "Learning" },
+    blurb: { vi: "Flashcard/quiz", en: "Flashcard/quiz" }
+  },
+  {
+    id: "layout",
+    title: { vi: "B\u1ED1 c\u1EE5c", en: "Layout" },
+    blurb: { vi: "Khung trang", en: "Page scaffolding" }
+  },
+  {
+    id: "media",
+    title: { vi: "Media", en: "Media" },
+    blurb: { vi: "T\u1EC7p/\u1EA3nh/avatar", en: "Files/images/avatars" }
+  },
+  {
+    id: "settings",
+    title: { vi: "C\xE0i \u0111\u1EB7t", en: "Settings" },
+    blurb: { vi: "Trang c\xE0i \u0111\u1EB7t", en: "Settings rows" }
+  },
+  {
+    id: "privacy",
+    title: { vi: "Ri\xEAng t\u01B0", en: "Privacy" },
+    blurb: { vi: "Copy ni\u1EC1m tin", en: "Trust copy" }
+  },
+  {
+    id: "editor",
+    title: { vi: "So\u1EA1n th\u1EA3o", en: "Editor" },
+    blurb: { vi: "Prose/CodeBlock", en: "Prose/CodeBlock" }
+  },
+  {
+    id: "monetization",
+    title: { vi: "Ki\u1EBFm ti\u1EC1n", en: "Monetization" },
+    blurb: { vi: "V\u1ECF (LATER)", en: "Stubs (LATER)" }
+  }
+];
+function entriesByArea(area) {
+  return CATALOG.filter((e) => e.area === area);
+}
+function getEntry(id) {
+  return CATALOG.find((e) => e.id === id);
+}
+export {
+  AREAS,
+  CATALOG,
+  CATALOG_VERSION,
+  entriesByArea,
+  getEntry
+};