@starci/skills 1.1.0

package/knowledge/INDEX.md

@@ -0,0 +1,22 @@
+# Knowledge
+
+This tree contains decision authority, not workflow.
+
+| Branch | Owns | Must not own |
+| --- | --- | --- |
+| [`ui/`](ui/INDEX.md) | Cross-family condition-to-Grammar rules, practical Core examples, measurable UI relationships, and review falsifiers | Business facts, page copy, routes, artwork identity, one-off effects, or operator orchestration |
+| [`grammars/starci/`](grammars/starci/INDEX.md) | Exact StarCi public exports, component/state/composition contracts, direct consumption, and derived-family extension rules | Product truth, local substitutes, or app-owned repairs of Grammar output |
+
+Load the smallest canonical English `.md` file and indexed rule that can change the current decision.
+Same-stem `.vi.md` files are human mirrors and must not enter runtime context. Knowledge files omit
+per-topic routing metadata; Grammar operators own lookup and orchestration.
+
+`@starci/grammar/core` is the reference compatibility contract. A published derived Grammar may
+override family-scoped CSS, replace existing Core renderers/elements, and add elements through
+declared extension points while preserving public props, meaning, state behavior, accessibility,
+ownership, and substitutability. The application selects one family and supplies product truth; it
+does not patch CSS or import a parallel primitive.
+
+When both branches apply, UI knowledge selects the relationship and the selected Grammar binds it to
+an exact published interface. Missing typed family registration or a missing component/prop remains
+`grammar-gap`; neither branch may invent a runnable API or silently override the other.

package/knowledge/INDEX.vi.md

@@ -0,0 +1,22 @@
+# Knowledge
+
+Cây này chứa decision authority, không chứa workflow.
+
+| Nhánh | Sở hữu | Không được sở hữu |
+| --- | --- | --- |
+| [`ui/`](ui/INDEX.vi.md) | Rule condition-to-Grammar dùng chung giữa family, ví dụ Core thực dụng, quan hệ UI đo được và review falsifier | Business fact, copy page, route, identity artwork, effect một lần hay operator orchestration |
+| [`grammars/starci/`](grammars/starci/INDEX.vi.md) | Exact public export của StarCi, contract component/state/composition, direct consumption và luật extension của derived family | Product truth, substitute cục bộ hay sửa Grammar output ở app |
+
+Chỉ load file `.md` tiếng Anh canonical và indexed rule nhỏ nhất có thể đổi quyết định hiện tại. File
+`.vi.md` cùng stem là mirror cho người đọc, không được vào runtime context. Knowledge file bỏ routing
+metadata riêng theo topic; Grammar operator sở hữu lookup và orchestration.
+
+`@starci/grammar/core` là reference compatibility contract. Derived Grammar đã publish được override
+CSS có scope theo family, thay renderer/element Core hiện có và thêm element qua extension point đã
+khai báo, đồng thời giữ public prop, meaning, state behavior, accessibility, ownership và
+substitutability. Application chọn đúng một family và truyền product truth; không patch CSS hay
+import primitive song song.
+
+Khi cả hai nhánh cùng áp dụng, UI knowledge chọn quan hệ và Grammar đã chọn bind quan hệ đó vào public
+interface chính xác. Typed family registration hoặc component/prop còn thiếu vẫn là `grammar-gap`;
+không nhánh nào được bịa API runnable hay âm thầm override nhánh kia.

package/knowledge/grammars/starci/DNA.md

@@ -0,0 +1,146 @@
+# StarCi Core — DNA
+
+`@starci/grammar@0.4.1` · checkout `f7167fa78d4c5edb847b16354403aec1c9d5476b` · generated 2026-09-03
+
+This file is generated from the live `@starci/grammar` package, never written by hand: identity, tokens, renderers, published props, `data-contract` claims, and emitted classes are read out of `src/`, and the gap list is copied from the `## Gaps` table in [Family and DNA](family.md). Prime a direction agent with this file: it says what exists. [Idioms](idioms.md) says how StarCi composes it, and [Playbook](playbook.md) says which idioms a business shape needs. Regenerate with `node scripts/generate-grammar-dna.mjs`, and verify with `--check`; it needs the routed FE checkout, so it is not part of `npm test`.
+
+## Identity
+
+| Fact | Value |
+| --- | --- |
+| Package | `@starci/grammar` |
+| Version | `0.4.1` |
+| Checkout head | `f7167fa78d4c5edb847b16354403aec1c9d5476b` |
+| Family id | `core` |
+| Root component | `CoreGrammarRoot` |
+| Family scope | `data-grammar-family="core"` |
+| Style entrypoint | `@starci/grammar/core/styles.css` |
+| Counts | 41 renderers · 59 tokens · 104 claim entries · 13 gaps |
+
+## Tokens
+
+| Token | Default |
+| --- | --- |
+| `--starci-core-accent` | `#7547ff` |
+| `--starci-core-accent-foreground` | `oklch(100% 0 0)` |
+| `--starci-core-border` | `oklch(90% 0.0015 354.13)` |
+| `--starci-core-canvas` | `oklch(97.02% 0.0015 354.13)` |
+| `--starci-core-contained-max-height` | `calc(100dvh - 3rem)` |
+| `--starci-core-control-radius` | `0.75rem` |
+| `--starci-core-copy-gap` | `0.25rem` |
+| `--starci-core-danger` | `oklch(65.32% 0.2335 37.78)` |
+| `--starci-core-danger-foreground` | `oklch(99.11% 0 0)` |
+| `--starci-core-disabled-opacity` | `0.55` |
+| `--starci-core-field-gap` | `0.5rem` |
+| `--starci-core-focus` | `#7248ff` |
+| `--starci-core-foreground` | `oklch(21.03% 0.0015 354.13)` |
+| `--starci-core-form-compact-measure` | `28rem` |
+| `--starci-core-form-measure` | `30rem` |
+| `--starci-core-highlight-angle` | `360deg` |
+| `--starci-core-highlight-inset` | `0` |
+| `--starci-core-info` | `oklch(72% 0.17 250)` |
+| `--starci-core-info-foreground` | `oklch(21.03% 0.0059 250)` |
+| `--starci-core-inline-gap` | `var(--grammar-inline-gap)` |
+| `--starci-core-motion-duration` | `180ms` |
+| `--starci-core-motion-easing` | `cubic-bezier(0.2, 0, 0, 1)` |
+| `--starci-core-muted` | `oklch(55.17% 0.003 354.13)` |
+| `--starci-core-navbar-z` | `50` |
+| `--starci-core-page-inset` | `var(--grammar-page-inset)` |
+| `--starci-core-page-measure` | `80rem` |
+| `--starci-core-pill-radius` | `999px` |
+| `--starci-core-rail-collapsed` | `4rem` |
+| `--starci-core-rail-compact` | `16rem` |
+| `--starci-core-rail-gap` | `1rem` |
+| `--starci-core-rail-gap-compact` | `0.75rem` |
+| `--starci-core-rail-offset` | `5.5rem` |
+| `--starci-core-rail-standard` | `20rem` |
+| `--starci-core-rail-wide` | `24rem` |
+| `--starci-core-reading-measure` | `72ch` |
+| `--starci-core-region-gap` | `var(--grammar-region-gap)` |
+| `--starci-core-row-gap` | `var(--grammar-row-gap)` |
+| `--starci-core-row-gap-compact` | `0.5rem` |
+| `--starci-core-row-inset` | `1rem` |
+| `--starci-core-section-gap` | `var(--grammar-section-gap)` |
+| `--starci-core-separator` | `oklch(92% 0.0015 354.13)` |
+| `--starci-core-subnav-offset` | `4rem` |
+| `--starci-core-subnav-z` | `40` |
+| `--starci-core-success` | `oklch(73.29% 0.1941 162.85)` |
+| `--starci-core-success-foreground` | `oklch(21.03% 0.0059 162.85)` |
+| `--starci-core-surface` | `oklch(100% 0.0008 354.13)` |
+| `--starci-core-surface-inset` | `1rem` |
+| `--starci-core-surface-radius` | `1rem` |
+| `--starci-core-surface-secondary` | `oklch(95.24% 0.0012 354.13)` |
+| `--starci-core-surface-shadow` | `0 8px 28px oklch(21.03% 0.0059 354.13 / 0.07)` |
+| `--starci-core-warning` | `oklch(78.19% 0.159 84.37)` |
+| `--starci-core-warning-foreground` | `oklch(21.03% 0.0059 84.37)` |
+| `--starci-core-workspace-floating-inset` | `1rem` |
+| `--starci-core-workspace-floating-max` | `22rem` |
+| `--starci-core-workspace-floating-z` | `40` |
+| `--starci-core-workspace-leading-seam` | `2rem` |
+| `--starci-core-workspace-navigation-track` | `minmax(14rem, var(--starci-core-workspace-navigation-width, 18rem))` |
+| `--starci-core-workspace-navigation-width` | `18rem` |
+| `--starci-core-workspace-rail-track` | `minmax(16rem, var(--starci-core-rail-standard, 20rem))` |
+
+## Renderers
+
+| Renderer | Kind | Props with closed values | Claims | Classes |
+| --- | --- | --- | --- | --- |
+| `GrammarRoot` `GrammarRootProps` | primitive | theme: `system` \| `light` \| `dark` | — | — |
+| `PageContainer` `PageContainerProps` | primitive | measure: `reading` \| `product` \| `full` | computed: MARGIN-AUTO MEASURE-1 | `starci-core-page-container` |
+| `Badge` `BadgeProps` | primitive | tone: `neutral` \| `accent` \| `success` \| `warning` \| `danger` | — | — |
+| `Button` `ButtonProps` | primitive | variant: `primary` \| `secondary` \| `tertiary` \| `outline` \| `ghost`; size: `sm` \| `md` \| `lg`; target: `_blank` \| `_self`; type: `button` \| `submit` \| `reset` | — | — |
+| `Divider` `DividerProps` | primitive | — | BOUNDARY-5 GAP-3 | — |
+| `Heading` `HeadingProps` | primitive | level: `1` \| `2` \| `3` \| `4`; scale: `standard` \| `display` | computed: FONT-1 FONT-2 FONT-3 FONT-4 FONT-6 TONE-2 | — |
+| `Icon` `IconProps` | primitive | usage: `heading` \| `leading` \| `chip` | — | — |
+| `IconTile` `IconTileProps` | primitive | source: IconSource; tone: `neutral` \| `accent` \| `success` \| `warning` \| `danger`; size: `sm` \| `md` | computed: OVERFLOW-2 SURFACE-4 SURFACE-5 TONE-2 | — |
+| `IconButton` `IconButtonProps` | primitive | source: IconSource | — | — |
+| `Label` `LabelProps` | primitive | depth: `top` \| `nested`; as: `span` \| `h3` | computed: FONT-1 FONT-2 MARGIN-0 | `starci-core-label` |
+| `Input` `InputProps` | primitive | kind: `email` \| `password` \| `newPassword` \| `code` \| `text`; variant: `primary` \| `secondary` | FONT-1 GAP-2 TONE-2 | — |
+| `Progress` `ProgressProps` | primitive | — | MEASURE-2 | — |
+| `Text` `TextProps` | primitive | as: `div` \| `p` \| `span`; size: `xs` \| `sm` \| `md` \| `metric-lead`; tone: `default` \| `muted` \| `accent`; weight: `normal` \| `medium` \| `semibold`; live: `off` \| `polite` \| `assertive` | computed: FONT-1 FONT-2 FONT-3 FONT-5 GAP-2 TONE-1 TONE-2 TONE-3 | — |
+| `TextAction` `TextActionProps` | primitive | appearance: ActionAppearance; size: ActionTextSize; target: `_blank` \| `_self` | computed: FONT-1 FONT-2 FONT-3 GAP-2 MEASURE-3 PADDING-1 PADDING-2 PADDING-3 SURFACE-4 TONE-1 TONE-2 TONE-3 | — |
+| `SectionHeader` `SectionHeaderProps` | primitive | level: `1` \| `2` \| `3` \| `4`; composition: `section-header` \| `context-intro` | FLOW-3 GAP-2 GAP-5 MARGIN-0 | `starci-core-section-action` `starci-core-section-description` `starci-core-section-eyebrow` `starci-core-section-header` `starci-core-section-header-copy` `starci-core-section-title` |
+| `MediaFrame` `MediaFrameProps` | primitive | aspect: `landscape` \| `portrait` \| `square` \| `auto`; fit: `cover` \| `contain`; treatment: `framed` \| `plain` | FLOW-3 GAP-2 MARGIN-0 computed: BOUNDARY-5 OVERFLOW-2 SURFACE-1 SURFACE-3 | `starci-core-media-caption` `starci-core-media-frame` `starci-core-media-viewport` |
+| `IncludedMark` `IncludedMarkProps` | primitive | — | — | `starci-core-included-mark` |
+| `RankArtwork` `RankArtworkProps` | primitive | kind: `first` \| `second` \| `third` \| `cup` | — | `starci-core-rank-artwork` |
+| `SurfaceCopyGroup` `SurfaceCopyGroupProps` | primitive | density: `compact` \| `comfortable` | computed: GAP-2 GAP-3 | `starci-core-surface-copy-group` |
+| `PrimaryRailLayout` `PrimaryRailLayoutProps` | composition | railWidth: `compact` \| `standard` \| `wide`; align: `start` \| `stretch` | GAP-5 | `starci-core-primary-rail-container` `starci-core-primary-rail-layout` `starci-core-primary-region` `starci-core-rail-region` |
+| `NavigationFeatureNav` `NavigationFeatureNavProps` | composition | position: `static` \| `sticky` | BOUNDARY-1 GAP-2 GAP-3 MEASURE-2 PADDING-3 | `starci-core-navigation-feature-nav` `starci-core-navigation-feature-nav-actions` `starci-core-navigation-feature-nav-compact-navigation` `starci-core-navigation-feature-nav-feature` `starci-core-navigation-feature-nav-identity` `starci-core-navigation-feature-nav-navigation` `starci-core-navigation-feature-nav-primary` |
+| `Sidebar` `SidebarProps` | composition | source: IconSource; presentation: `rail` \| `drawer`; toggleSource: IconSource | FLOW-4 FONT-1 FONT-2 GAP-1 PADDING-0 PADDING-1 PADDING-2 PADDING-3 TONE-2 computed: GAP-3 MEASURE-2 MEASURE-6 OVERFLOW-2 SURFACE-4 TONE-1 | — |
+| `WorkspaceShell` `WorkspaceShellProps` | composition | navigationTrack: `fixed` \| `intrinsic`; navigationVisibility: `always` \| `wide`; railMode: `flow` \| `sticky`; railWidth: `compact` \| `standard` \| `wide`; railInset: `none` \| `content`; railPosition: `leading` \| `trailing`; align: `start` \| `stretch` | BOUNDARY-1 BOUNDARY-4 GAP-5 MARGIN-5 MEASURE-1 OVERFLOW-4 | `starci-core-workspace-shell` `starci-core-workspace-shell-compact-header` `starci-core-workspace-shell-compact-navigation` `starci-core-workspace-shell-floating-layer` `starci-core-workspace-shell-header` `starci-core-workspace-shell-layout` `starci-core-workspace-shell-leading-rule` `starci-core-workspace-shell-navigation` `starci-core-workspace-shell-primary` `starci-core-workspace-shell-rail` |
+| `ChatWorkspace` `ChatWorkspaceProps` | composition | railWidth: `compact` \| `standard` \| `wide` | BOUNDARY-1 FONT-2 GAP-5 OVERFLOW-2 OVERFLOW-4 OVERFLOW-5 PADDING-0 PADDING-2 PADDING-3 PADDING-4 SURFACE-2 TONE-1 | `starci-core-chat-workspace` `starci-core-chat-workspace-composer` `starci-core-chat-workspace-conversation` `starci-core-chat-workspace-drawer-body` `starci-core-chat-workspace-drawer-close` `starci-core-chat-workspace-drawer-content` `starci-core-chat-workspace-drawer-dialog` `starci-core-chat-workspace-header` `starci-core-chat-workspace-inline-rail` `starci-core-chat-workspace-layout` `starci-core-chat-workspace-layout-without-rail` `starci-core-chat-workspace-overlay-rail` `starci-core-chat-workspace-primary` `starci-core-chat-workspace-rail-trigger` `starci-core-chat-workspace-rail-trigger-boundary` |
+| `StateMark` `StateMarkProps` | core | state: PresentationState | — | — |
+| `LeadingNumber` `LeadingNumberProps` | core | — | — | — |
+| `OtpInput` `OtpInputProps` | core | — | OVERFLOW-3 OVERFLOW-5 PADDING-1 | — |
+| `StaticStateRow` `StaticStateRowProps` | composite | state: PresentationState | BOUNDARY-3 GAP-1 GAP-3 PADDING-4 | — |
+| `EmptyNotice` `EmptyNoticeProps` | composite | iconSource: IconSource; actionVariant: ButtonVariant | GAP-3 PADDING-4 | — |
+| `HorizontalScrollRegion` `HorizontalScrollRegionProps` | composite | — | MEASURE-3 OVERFLOW-3 OVERFLOW-5 PADDING-1 | `starci-core-horizontal-scroll-region` |
+| `VerticalScrollRegion` `VerticalScrollRegionProps` | composite | — | MEASURE-7 OVERFLOW-3 | — |
+| `SurfaceCard` `SurfaceCardProps` | branch | depth: `top` \| `nested`; state: PresentationState; frame: `bounded` \| `frameless`; scroll: `page` \| `contained`; composition: `single` \| `joined`; measure: `content` \| `form` \| `formCompact`; height: `auto` \| `fill` | GAP-2 computed: BOUNDARY-5 BOUNDARY-6 GAP-0 OVERFLOW-1 OVERFLOW-2 PADDING-0 PADDING-4 SURFACE-1 SURFACE-2 SURFACE-4 | `starci-core-frameless-surface` `starci-core-surface` `starci-core-surface-card` `starci-core-surface-card--fill` `starci-core-surface-content` `starci-core-surface-highlight` `starci-core-surface-highlight-sweep` `starci-core-surface-label` |
+| `SurfaceListCard` `SurfaceListCardProps` | branch | depth: `top` \| `nested` | GAP-2 OVERFLOW-2 PADDING-0 SURFACE-2 computed: FONT-1 FONT-2 TONE-2 | `starci-core-list-shell` `starci-core-owned-collection` `starci-core-surface` `starci-core-surface-footer` `starci-core-surface-label` `starci-core-surface-list` |
+| `FencedCodeBlock` `FencedCodeBlockProps` | branch | measure: `reading` \| `compact` | OVERFLOW-4 | — |
+| `MarkdownArticle` `MarkdownArticleProps` | branch | measure: `reading` \| `compact` | OVERFLOW-4 | — |
+| `MarkdownTableFrame` `MarkdownTableFrameProps` | branch | measure: `reading` \| `compact` | OVERFLOW-4 | — |
+| `SurfaceAccordionCard` `SurfaceAccordionCardProps` | branch | depth: `top` \| `nested` | BOUNDARY-3 GAP-2 MARGIN-0 PADDING-0 PADDING-4 PADDING-8 TONE-1 computed: BOUNDARY-5 BOUNDARY-6 OVERFLOW-1 OVERFLOW-2 SURFACE-1 SURFACE-2 | `starci-core-accordion-body` `starci-core-accordion-heading` `starci-core-accordion-panel` `starci-core-accordion-row` `starci-core-accordion-scroll-region` `starci-core-accordion-shell` `starci-core-accordion-trigger` `starci-core-surface-accordion-card` |
+| `Rail` `RailProps` | branch | height: `content` \| `fill`; mode: `flow` \| `sticky`; width: `compact` \| `standard` \| `wide`; state: PresentationState; collapse: `expanded` \| `collapsed`; motion: `static` \| `animated` \| `reduced`; inset: `none` \| `content` | GAP-4 computed: MEASURE-6 OVERFLOW-3 PADDING-3 PADDING-5 | `starci-core-rail` `starci-core-rail-body` `starci-core-rail-footer` `starci-core-rail-frame` `starci-core-visually-hidden` |
+| `Subnav` `SubnavProps` | branch | position: `static` \| `sticky`; visibility: `always` \| `compact` | BOUNDARY-1 FLOW-4 GAP-2 GAP-3 PADDING-3 | `starci-core-subnav` `starci-core-subnav-identity` `starci-core-subnav-leading` `starci-core-subnav-title` `starci-core-subnav-toggle` |
+| `Tabs` `TabsProps` | branch | labelVisibility: `responsive` \| `always`; inset: `page` \| `none` | FLOW-2 GAP-2 OVERFLOW-4 PADDING-3 computed: PADDING-5 | `starci-core-tab-content` `starci-core-tab-label` `starci-core-tabs` `starci-core-tabs-frame` `starci-core-tabs-scroll` |
+| `Tooltip` `TooltipProps` | branch | placement: `top` \| `bottom` | FLOW-2 FONT-1 PADDING-1 PADDING-2 | `starci-core-tooltip` `starci-core-tooltip-content` |
+
+## Gaps
+
+| Component | Missing capability | Evidence |
+| --- | --- | --- |
+| `SurfaceCard`, `SurfaceListCard`, `SurfaceAccordionCard` | no typed heading level and no labelled-by-external-heading capability, so a surface whose correct level is not 3 has no owner | `packages/grammar/src/core/primitive/Label/index.tsx`; `packages/grammar/src/core/branch/SurfaceCard/index.tsx` |
+| Common overlay owner | Common publishes no general overlay or elevation prop | `packages/grammar/src/core/branch/Tooltip/index.tsx`; `packages/grammar/src/common/styles.css` |
+| `Badge` | `Badge` accepts absent `children` and renders a non-breaking space, so a glyph-only chip is representable and word presence is not enforced by the type | `packages/grammar/src/core/primitive/Badge/index.tsx` |
+| `Tabs` | `leading` is an optional `ReactNode`, not a typed `Icon`, so nothing forces a glyph or its `usage` on each peer | `packages/grammar/src/core/branch/Tabs/index.tsx` |
+| `Button`, `TextAction` | neither action publishes a motion anchor or attribute for its adornment, so a family has nothing to animate beyond `data-component` | `packages/grammar/src/core/primitive/Button/index.tsx`; `packages/grammar/src/core/primitive/TextAction/index.tsx` |
+| `Icon` | `Icon` has no direction-aware mirroring contract; the app's registry chooses the literal glyph | `packages/grammar/src/core/primitive/Icon/index.tsx` |
+| `IconButton` | `isActive` emits `data-active="true"` only, with no `aria-pressed`, so an active utility is visual-only | `packages/grammar/src/core/primitive/IconButton/index.tsx` |
+| `Tooltip` | `aria-describedby` is placed on the tooltip's wrapper `span`, not on the focusable control, so the description is not programmatically attached to the button | `packages/grammar/src/core/branch/Tooltip/index.tsx` |
+| `Icon` | `Icon` accepts only `source`; there is no fallback or error contract, so a missing registry mapping must be resolved by the app before render | `packages/grammar/src/core/primitive/Icon/index.tsx` |
+| `MediaFrame` | no `object-position` or focal prop, and `className` reaches the figure rather than the viewport child, so a required off-centre crop has no owner | `packages/grammar/src/core/primitive/MediaFrame/index.tsx`; `packages/grammar/src/common/styles.css` |
+| `MediaFrame` | `MediaFrame` publishes no loading or error prop and renders no state | `packages/grammar/src/core/primitive/MediaFrame/index.tsx` |
+| `OtpInput` | `OtpInput` publishes `disabled` and `invalid` (not the `isDisabled`/`isError` names) and no skeleton input, so its unresolved state has no owner | `packages/grammar/src/core/OtpInput.tsx` |
+| `OtpInput` | `OtpInput` publishes no `label`, `hint`, or `errorMessage` slot; only `describedBy` links outside text, so its visible identity has no Common owner | `packages/grammar/src/core/OtpInput.tsx` |

package/knowledge/grammars/starci/DNA.vi.md

@@ -0,0 +1,146 @@
+# StarCi Core — DNA
+
+`@starci/grammar@0.4.1` · checkout `f7167fa78d4c5edb847b16354403aec1c9d5476b` · sinh ngày 2026-09-03
+
+File này được sinh ra từ package `@starci/grammar` đang chạy, không viết tay: danh tính, token, renderer, prop công bố, claim `data-contract` và class phát ra đều đọc thẳng từ `src/`, còn danh sách gap được chép từ bảng `## Gap` trong [Family và DNA](family.vi.md). Hãy mồi cho agent định hướng bằng đúng file này: nó nói cái gì đang tồn tại. [Idiom](idioms.vi.md) nói StarCi ghép chúng ra sao, còn [Playbook](playbook.vi.md) nói hình dạng nghiệp vụ nào cần chuỗi idiom nào. Sinh lại bằng `node scripts/generate-grammar-dna.mjs`, kiểm bằng `--check`; lệnh này cần checkout FE đã định tuyến nên không nằm trong `npm test`.
+
+## Danh tính
+
+| Dữ kiện | Giá trị |
+| --- | --- |
+| Package | `@starci/grammar` |
+| Phiên bản | `0.4.1` |
+| Head của checkout | `f7167fa78d4c5edb847b16354403aec1c9d5476b` |
+| Family id | `core` |
+| Component gốc | `CoreGrammarRoot` |
+| Phạm vi family | `data-grammar-family="core"` |
+| Điểm vào CSS | `@starci/grammar/core/styles.css` |
+| Số đếm | 41 renderer · 59 token · 104 mục claim · 13 gap |
+
+## Token
+
+| Token | Mặc định |
+| --- | --- |
+| `--starci-core-accent` | `#7547ff` |
+| `--starci-core-accent-foreground` | `oklch(100% 0 0)` |
+| `--starci-core-border` | `oklch(90% 0.0015 354.13)` |
+| `--starci-core-canvas` | `oklch(97.02% 0.0015 354.13)` |
+| `--starci-core-contained-max-height` | `calc(100dvh - 3rem)` |
+| `--starci-core-control-radius` | `0.75rem` |
+| `--starci-core-copy-gap` | `0.25rem` |
+| `--starci-core-danger` | `oklch(65.32% 0.2335 37.78)` |
+| `--starci-core-danger-foreground` | `oklch(99.11% 0 0)` |
+| `--starci-core-disabled-opacity` | `0.55` |
+| `--starci-core-field-gap` | `0.5rem` |
+| `--starci-core-focus` | `#7248ff` |
+| `--starci-core-foreground` | `oklch(21.03% 0.0015 354.13)` |
+| `--starci-core-form-compact-measure` | `28rem` |
+| `--starci-core-form-measure` | `30rem` |
+| `--starci-core-highlight-angle` | `360deg` |
+| `--starci-core-highlight-inset` | `0` |
+| `--starci-core-info` | `oklch(72% 0.17 250)` |
+| `--starci-core-info-foreground` | `oklch(21.03% 0.0059 250)` |
+| `--starci-core-inline-gap` | `var(--grammar-inline-gap)` |
+| `--starci-core-motion-duration` | `180ms` |
+| `--starci-core-motion-easing` | `cubic-bezier(0.2, 0, 0, 1)` |
+| `--starci-core-muted` | `oklch(55.17% 0.003 354.13)` |
+| `--starci-core-navbar-z` | `50` |
+| `--starci-core-page-inset` | `var(--grammar-page-inset)` |
+| `--starci-core-page-measure` | `80rem` |
+| `--starci-core-pill-radius` | `999px` |
+| `--starci-core-rail-collapsed` | `4rem` |
+| `--starci-core-rail-compact` | `16rem` |
+| `--starci-core-rail-gap` | `1rem` |
+| `--starci-core-rail-gap-compact` | `0.75rem` |
+| `--starci-core-rail-offset` | `5.5rem` |
+| `--starci-core-rail-standard` | `20rem` |
+| `--starci-core-rail-wide` | `24rem` |
+| `--starci-core-reading-measure` | `72ch` |
+| `--starci-core-region-gap` | `var(--grammar-region-gap)` |
+| `--starci-core-row-gap` | `var(--grammar-row-gap)` |
+| `--starci-core-row-gap-compact` | `0.5rem` |
+| `--starci-core-row-inset` | `1rem` |
+| `--starci-core-section-gap` | `var(--grammar-section-gap)` |
+| `--starci-core-separator` | `oklch(92% 0.0015 354.13)` |
+| `--starci-core-subnav-offset` | `4rem` |
+| `--starci-core-subnav-z` | `40` |
+| `--starci-core-success` | `oklch(73.29% 0.1941 162.85)` |
+| `--starci-core-success-foreground` | `oklch(21.03% 0.0059 162.85)` |
+| `--starci-core-surface` | `oklch(100% 0.0008 354.13)` |
+| `--starci-core-surface-inset` | `1rem` |
+| `--starci-core-surface-radius` | `1rem` |
+| `--starci-core-surface-secondary` | `oklch(95.24% 0.0012 354.13)` |
+| `--starci-core-surface-shadow` | `0 8px 28px oklch(21.03% 0.0059 354.13 / 0.07)` |
+| `--starci-core-warning` | `oklch(78.19% 0.159 84.37)` |
+| `--starci-core-warning-foreground` | `oklch(21.03% 0.0059 84.37)` |
+| `--starci-core-workspace-floating-inset` | `1rem` |
+| `--starci-core-workspace-floating-max` | `22rem` |
+| `--starci-core-workspace-floating-z` | `40` |
+| `--starci-core-workspace-leading-seam` | `2rem` |
+| `--starci-core-workspace-navigation-track` | `minmax(14rem, var(--starci-core-workspace-navigation-width, 18rem))` |
+| `--starci-core-workspace-navigation-width` | `18rem` |
+| `--starci-core-workspace-rail-track` | `minmax(16rem, var(--starci-core-rail-standard, 20rem))` |
+
+## Renderer
+
+| Renderer | Loại | Prop có tập giá trị đóng | Claim | Class |
+| --- | --- | --- | --- | --- |
+| `GrammarRoot` `GrammarRootProps` | primitive | theme: `system` \| `light` \| `dark` | — | — |
+| `PageContainer` `PageContainerProps` | primitive | measure: `reading` \| `product` \| `full` | computed: MARGIN-AUTO MEASURE-1 | `starci-core-page-container` |
+| `Badge` `BadgeProps` | primitive | tone: `neutral` \| `accent` \| `success` \| `warning` \| `danger` | — | — |
+| `Button` `ButtonProps` | primitive | variant: `primary` \| `secondary` \| `tertiary` \| `outline` \| `ghost`; size: `sm` \| `md` \| `lg`; target: `_blank` \| `_self`; type: `button` \| `submit` \| `reset` | — | — |
+| `Divider` `DividerProps` | primitive | — | BOUNDARY-5 GAP-3 | — |
+| `Heading` `HeadingProps` | primitive | level: `1` \| `2` \| `3` \| `4`; scale: `standard` \| `display` | computed: FONT-1 FONT-2 FONT-3 FONT-4 FONT-6 TONE-2 | — |
+| `Icon` `IconProps` | primitive | usage: `heading` \| `leading` \| `chip` | — | — |
+| `IconTile` `IconTileProps` | primitive | source: IconSource; tone: `neutral` \| `accent` \| `success` \| `warning` \| `danger`; size: `sm` \| `md` | computed: OVERFLOW-2 SURFACE-4 SURFACE-5 TONE-2 | — |
+| `IconButton` `IconButtonProps` | primitive | source: IconSource | — | — |
+| `Label` `LabelProps` | primitive | depth: `top` \| `nested`; as: `span` \| `h3` | computed: FONT-1 FONT-2 MARGIN-0 | `starci-core-label` |
+| `Input` `InputProps` | primitive | kind: `email` \| `password` \| `newPassword` \| `code` \| `text`; variant: `primary` \| `secondary` | FONT-1 GAP-2 TONE-2 | — |
+| `Progress` `ProgressProps` | primitive | — | MEASURE-2 | — |
+| `Text` `TextProps` | primitive | as: `div` \| `p` \| `span`; size: `xs` \| `sm` \| `md` \| `metric-lead`; tone: `default` \| `muted` \| `accent`; weight: `normal` \| `medium` \| `semibold`; live: `off` \| `polite` \| `assertive` | computed: FONT-1 FONT-2 FONT-3 FONT-5 GAP-2 TONE-1 TONE-2 TONE-3 | — |
+| `TextAction` `TextActionProps` | primitive | appearance: ActionAppearance; size: ActionTextSize; target: `_blank` \| `_self` | computed: FONT-1 FONT-2 FONT-3 GAP-2 MEASURE-3 PADDING-1 PADDING-2 PADDING-3 SURFACE-4 TONE-1 TONE-2 TONE-3 | — |
+| `SectionHeader` `SectionHeaderProps` | primitive | level: `1` \| `2` \| `3` \| `4`; composition: `section-header` \| `context-intro` | FLOW-3 GAP-2 GAP-5 MARGIN-0 | `starci-core-section-action` `starci-core-section-description` `starci-core-section-eyebrow` `starci-core-section-header` `starci-core-section-header-copy` `starci-core-section-title` |
+| `MediaFrame` `MediaFrameProps` | primitive | aspect: `landscape` \| `portrait` \| `square` \| `auto`; fit: `cover` \| `contain`; treatment: `framed` \| `plain` | FLOW-3 GAP-2 MARGIN-0 computed: BOUNDARY-5 OVERFLOW-2 SURFACE-1 SURFACE-3 | `starci-core-media-caption` `starci-core-media-frame` `starci-core-media-viewport` |
+| `IncludedMark` `IncludedMarkProps` | primitive | — | — | `starci-core-included-mark` |
+| `RankArtwork` `RankArtworkProps` | primitive | kind: `first` \| `second` \| `third` \| `cup` | — | `starci-core-rank-artwork` |
+| `SurfaceCopyGroup` `SurfaceCopyGroupProps` | primitive | density: `compact` \| `comfortable` | computed: GAP-2 GAP-3 | `starci-core-surface-copy-group` |
+| `PrimaryRailLayout` `PrimaryRailLayoutProps` | composition | railWidth: `compact` \| `standard` \| `wide`; align: `start` \| `stretch` | GAP-5 | `starci-core-primary-rail-container` `starci-core-primary-rail-layout` `starci-core-primary-region` `starci-core-rail-region` |
+| `NavigationFeatureNav` `NavigationFeatureNavProps` | composition | position: `static` \| `sticky` | BOUNDARY-1 GAP-2 GAP-3 MEASURE-2 PADDING-3 | `starci-core-navigation-feature-nav` `starci-core-navigation-feature-nav-actions` `starci-core-navigation-feature-nav-compact-navigation` `starci-core-navigation-feature-nav-feature` `starci-core-navigation-feature-nav-identity` `starci-core-navigation-feature-nav-navigation` `starci-core-navigation-feature-nav-primary` |
+| `Sidebar` `SidebarProps` | composition | source: IconSource; presentation: `rail` \| `drawer`; toggleSource: IconSource | FLOW-4 FONT-1 FONT-2 GAP-1 PADDING-0 PADDING-1 PADDING-2 PADDING-3 TONE-2 computed: GAP-3 MEASURE-2 MEASURE-6 OVERFLOW-2 SURFACE-4 TONE-1 | — |
+| `WorkspaceShell` `WorkspaceShellProps` | composition | navigationTrack: `fixed` \| `intrinsic`; navigationVisibility: `always` \| `wide`; railMode: `flow` \| `sticky`; railWidth: `compact` \| `standard` \| `wide`; railInset: `none` \| `content`; railPosition: `leading` \| `trailing`; align: `start` \| `stretch` | BOUNDARY-1 BOUNDARY-4 GAP-5 MARGIN-5 MEASURE-1 OVERFLOW-4 | `starci-core-workspace-shell` `starci-core-workspace-shell-compact-header` `starci-core-workspace-shell-compact-navigation` `starci-core-workspace-shell-floating-layer` `starci-core-workspace-shell-header` `starci-core-workspace-shell-layout` `starci-core-workspace-shell-leading-rule` `starci-core-workspace-shell-navigation` `starci-core-workspace-shell-primary` `starci-core-workspace-shell-rail` |
+| `ChatWorkspace` `ChatWorkspaceProps` | composition | railWidth: `compact` \| `standard` \| `wide` | BOUNDARY-1 FONT-2 GAP-5 OVERFLOW-2 OVERFLOW-4 OVERFLOW-5 PADDING-0 PADDING-2 PADDING-3 PADDING-4 SURFACE-2 TONE-1 | `starci-core-chat-workspace` `starci-core-chat-workspace-composer` `starci-core-chat-workspace-conversation` `starci-core-chat-workspace-drawer-body` `starci-core-chat-workspace-drawer-close` `starci-core-chat-workspace-drawer-content` `starci-core-chat-workspace-drawer-dialog` `starci-core-chat-workspace-header` `starci-core-chat-workspace-inline-rail` `starci-core-chat-workspace-layout` `starci-core-chat-workspace-layout-without-rail` `starci-core-chat-workspace-overlay-rail` `starci-core-chat-workspace-primary` `starci-core-chat-workspace-rail-trigger` `starci-core-chat-workspace-rail-trigger-boundary` |
+| `StateMark` `StateMarkProps` | core | state: PresentationState | — | — |
+| `LeadingNumber` `LeadingNumberProps` | core | — | — | — |
+| `OtpInput` `OtpInputProps` | core | — | OVERFLOW-3 OVERFLOW-5 PADDING-1 | — |
+| `StaticStateRow` `StaticStateRowProps` | composite | state: PresentationState | BOUNDARY-3 GAP-1 GAP-3 PADDING-4 | — |
+| `EmptyNotice` `EmptyNoticeProps` | composite | iconSource: IconSource; actionVariant: ButtonVariant | GAP-3 PADDING-4 | — |
+| `HorizontalScrollRegion` `HorizontalScrollRegionProps` | composite | — | MEASURE-3 OVERFLOW-3 OVERFLOW-5 PADDING-1 | `starci-core-horizontal-scroll-region` |
+| `VerticalScrollRegion` `VerticalScrollRegionProps` | composite | — | MEASURE-7 OVERFLOW-3 | — |
+| `SurfaceCard` `SurfaceCardProps` | branch | depth: `top` \| `nested`; state: PresentationState; frame: `bounded` \| `frameless`; scroll: `page` \| `contained`; composition: `single` \| `joined`; measure: `content` \| `form` \| `formCompact`; height: `auto` \| `fill` | GAP-2 computed: BOUNDARY-5 BOUNDARY-6 GAP-0 OVERFLOW-1 OVERFLOW-2 PADDING-0 PADDING-4 SURFACE-1 SURFACE-2 SURFACE-4 | `starci-core-frameless-surface` `starci-core-surface` `starci-core-surface-card` `starci-core-surface-card--fill` `starci-core-surface-content` `starci-core-surface-highlight` `starci-core-surface-highlight-sweep` `starci-core-surface-label` |
+| `SurfaceListCard` `SurfaceListCardProps` | branch | depth: `top` \| `nested` | GAP-2 OVERFLOW-2 PADDING-0 SURFACE-2 computed: FONT-1 FONT-2 TONE-2 | `starci-core-list-shell` `starci-core-owned-collection` `starci-core-surface` `starci-core-surface-footer` `starci-core-surface-label` `starci-core-surface-list` |
+| `FencedCodeBlock` `FencedCodeBlockProps` | branch | measure: `reading` \| `compact` | OVERFLOW-4 | — |
+| `MarkdownArticle` `MarkdownArticleProps` | branch | measure: `reading` \| `compact` | OVERFLOW-4 | — |
+| `MarkdownTableFrame` `MarkdownTableFrameProps` | branch | measure: `reading` \| `compact` | OVERFLOW-4 | — |
+| `SurfaceAccordionCard` `SurfaceAccordionCardProps` | branch | depth: `top` \| `nested` | BOUNDARY-3 GAP-2 MARGIN-0 PADDING-0 PADDING-4 PADDING-8 TONE-1 computed: BOUNDARY-5 BOUNDARY-6 OVERFLOW-1 OVERFLOW-2 SURFACE-1 SURFACE-2 | `starci-core-accordion-body` `starci-core-accordion-heading` `starci-core-accordion-panel` `starci-core-accordion-row` `starci-core-accordion-scroll-region` `starci-core-accordion-shell` `starci-core-accordion-trigger` `starci-core-surface-accordion-card` |
+| `Rail` `RailProps` | branch | height: `content` \| `fill`; mode: `flow` \| `sticky`; width: `compact` \| `standard` \| `wide`; state: PresentationState; collapse: `expanded` \| `collapsed`; motion: `static` \| `animated` \| `reduced`; inset: `none` \| `content` | GAP-4 computed: MEASURE-6 OVERFLOW-3 PADDING-3 PADDING-5 | `starci-core-rail` `starci-core-rail-body` `starci-core-rail-footer` `starci-core-rail-frame` `starci-core-visually-hidden` |
+| `Subnav` `SubnavProps` | branch | position: `static` \| `sticky`; visibility: `always` \| `compact` | BOUNDARY-1 FLOW-4 GAP-2 GAP-3 PADDING-3 | `starci-core-subnav` `starci-core-subnav-identity` `starci-core-subnav-leading` `starci-core-subnav-title` `starci-core-subnav-toggle` |
+| `Tabs` `TabsProps` | branch | labelVisibility: `responsive` \| `always`; inset: `page` \| `none` | FLOW-2 GAP-2 OVERFLOW-4 PADDING-3 computed: PADDING-5 | `starci-core-tab-content` `starci-core-tab-label` `starci-core-tabs` `starci-core-tabs-frame` `starci-core-tabs-scroll` |
+| `Tooltip` `TooltipProps` | branch | placement: `top` \| `bottom` | FLOW-2 FONT-1 PADDING-1 PADDING-2 | `starci-core-tooltip` `starci-core-tooltip-content` |
+
+## Gap
+
+| Component | Năng lực còn thiếu | Bằng chứng |
+| --- | --- | --- |
+| `SurfaceCard`, `SurfaceListCard`, `SurfaceAccordionCard` | không có cấp heading có kiểu và không có khả năng gắn nhãn bằng heading bên ngoài, nên một surface mà cấp đúng không phải 3 thì không có owner | `packages/grammar/src/core/primitive/Label/index.tsx`; `packages/grammar/src/core/branch/SurfaceCard/index.tsx` |
+| Owner overlay của Common | Common không công bố prop overlay hay độ nâng tổng quát nào | `packages/grammar/src/core/branch/Tooltip/index.tsx`; `packages/grammar/src/common/styles.css` |
+| `Badge` | `Badge` chấp nhận thiếu `children` và render một khoảng trắng không ngắt, nên chip chỉ có glyph vẫn biểu diễn được và sự hiện diện của chữ không được kiểu dữ liệu ép | `packages/grammar/src/core/primitive/Badge/index.tsx` |
+| `Tabs` | `leading` là `ReactNode` tuỳ chọn, không phải `Icon` có kiểu, nên không gì ép glyph hay `usage` của nó lên từng mục | `packages/grammar/src/core/branch/Tabs/index.tsx` |
+| `Button`, `TextAction` | không action nào công bố neo hay thuộc tính chuyển động cho phần trang trí của nó, nên family không có gì để animate ngoài `data-component` | `packages/grammar/src/core/primitive/Button/index.tsx`; `packages/grammar/src/core/primitive/TextAction/index.tsx` |
+| `Icon` | `Icon` không có hợp đồng soi gương theo hướng; registry của app chọn glyph nguyên nghĩa | `packages/grammar/src/core/primitive/Icon/index.tsx` |
+| `IconButton` | `isActive` chỉ phát `data-active="true"`, không có `aria-pressed`, nên một tiện ích đang active chỉ là thị giác | `packages/grammar/src/core/primitive/IconButton/index.tsx` |
+| `Tooltip` | `aria-describedby` được đặt lên `span` bọc của tooltip, không lên control nhận focus, nên mô tả không được gắn theo chương trình vào nút | `packages/grammar/src/core/branch/Tooltip/index.tsx` |
+| `Icon` | `Icon` chỉ nhận `source`; không có hợp đồng dự phòng hay lỗi, nên một ánh xạ registry thiếu phải được app giải quyết trước khi render | `packages/grammar/src/core/primitive/Icon/index.tsx` |
+| `MediaFrame` | không có prop `object-position` hay tiêu điểm, và `className` chạm tới figure chứ không tới con của viewport, nên một crop lệch tâm bắt buộc không có owner | `packages/grammar/src/core/primitive/MediaFrame/index.tsx`; `packages/grammar/src/common/styles.css` |
+| `MediaFrame` | `MediaFrame` không công bố prop loading hay error và không render state nào | `packages/grammar/src/core/primitive/MediaFrame/index.tsx` |
+| `OtpInput` | `OtpInput` công bố `disabled` và `invalid` (không phải tên `isDisabled`/`isError`) và không có đầu vào skeleton, nên state chưa phân giải của nó không có owner | `packages/grammar/src/core/OtpInput.tsx` |
+| `OtpInput` | `OtpInput` không công bố slot `label`, `hint` hay `errorMessage`; chỉ `describedBy` nối tới chữ bên ngoài, nên danh tính nhìn thấy của nó không có owner Common | `packages/grammar/src/core/OtpInput.tsx` |

package/knowledge/grammars/starci/INDEX.md

@@ -0,0 +1,25 @@
+# StarCi Core Grammar — reading index
+
+This branch documents one visual family: StarCi Core, and the taste that directs how it is composed. Universal UI law remains canonical in [knowledge/ui](../../ui/INDEX.md); this branch maps those X-n rules to the live Core family and records the idioms StarCi actually builds with. It never re-narrates renderer anatomy — [DNA](DNA.md), generated from the package, already says what exists and what each renderer owns.
+
+## Authority chain
+
+`knowledge/ui X-n → @starci/grammar/common props/anatomy/state → @starci/grammar/core DNA and scoped CSS → product adapter`
+
+- Common owns public renderers, props, semantic DOM, accessibility, presentation states, universal spacing, `COMMON_GRAMMAR_COMPONENTS`, and `defineGrammarFamily`.
+- Core is a sibling family with id `core`; `CoreGrammarRoot` installs `data-grammar-family="core"`, and the `@starci/grammar/core` entry re-exports every Common renderer, so a Core consumer imports from one entry.
+- Feature code owns domain facts, routes, copy, permissions, persistence, and effects.
+- Product names such as Learn, Console, Dashboard, Navbar, or Course never become Grammar identities.
+
+## Read order
+
+0. [DNA](DNA.md) — generated from the package: what exists. Prime a direction agent with this file.
+1. [Idioms](idioms.md) — how StarCi composes what exists, each idiom evidenced at least twice in the live blocks.
+2. [Playbook](playbook.md) — which idiom sequence a business shape asks for, and what a supplied reference may contribute.
+3. [Family and DNA](family.md) — the visual family's own identity, tokens, CSS direction, theme binding, and the one gap table the whole family publishes.
+
+Read 0 through 2 to decide what to build; read 3 when a row raises a question about the family itself. How the package is consumed in code (imports, one family root, forbidden clones) is FE-IMPORTS-5 and FE-IMPORTS-7 in knowledge/patterns/fe.
+
+## Review gates
+
+A valid change has no renderer import from `@starci/grammar/core`, no Common CSS import of Core CSS, no feature-named component in Grammar, no duplicated X-n law, and no EN/VI drift. Core-specific claims must resolve to live source or be named as a gap.

package/knowledge/grammars/starci/INDEX.vi.md

@@ -0,0 +1,25 @@
+# StarCi Core Grammar — mục lục đọc
+
+Nhánh này mô tả một visual family: StarCi Core, và cái gu chỉ đạo cách ghép nó. Luật UI universal vẫn canonical tại [knowledge/ui](../../ui/INDEX.vi.md); nhánh này map các luật X-n đó vào family Core đang chạy và ghi lại những idiom StarCi thực sự dựng bằng. Nó không kể lại giải phẫu renderer — [DNA](DNA.vi.md), sinh ra từ package, đã nói cái gì tồn tại và mỗi renderer sở hữu cái gì.
+
+## Chuỗi authority
+
+`knowledge/ui X-n → @starci/grammar/common props/anatomy/state → @starci/grammar/core DNA và scoped CSS → product adapter`
+
+- Common sở hữu public renderer, props, semantic DOM, accessibility, presentation state, universal spacing, `COMMON_GRAMMAR_COMPONENTS` và `defineGrammarFamily`.
+- Core là sibling family có id `core`; `CoreGrammarRoot` cài `data-grammar-family="core"`.
+- Feature code sở hữu domain fact, route, copy, permission, persistence và effect.
+- Tên product như Learn, Console, Dashboard, Navbar hay Course không bao giờ trở thành Grammar identity.
+
+## Thứ tự đọc
+
+0. [DNA](DNA.vi.md) — sinh ra từ package: cái gì đang tồn tại. Mồi cho agent định hướng bằng đúng file này.
+1. [Idiom](idioms.vi.md) — StarCi ghép những thứ đang tồn tại ra sao, mỗi idiom có ít nhất hai bằng chứng trong block đang chạy.
+2. [Playbook](playbook.vi.md) — hình dạng nghiệp vụ nào đòi chuỗi idiom nào, và tham chiếu được góp gì.
+3. [Family và DNA](family.vi.md) — danh tính riêng của visual family, token, hướng CSS, binding theme, và bảng gap duy nhất mà cả family công bố.
+
+Đọc 0 tới 2 để quyết định dựng gì; đọc 3 khi một dòng đặt câu hỏi về chính family. Cách tiêu thụ gói trong code (import, một root family, cấm clone) là FE-IMPORTS-5 và FE-IMPORTS-7 trong knowledge/patterns/fe.
+
+## Gate review
+
+Thay đổi hợp lệ không import renderer từ `@starci/grammar/core`, Common CSS không import Core CSS, Grammar không có feature-named component, không lặp luật X-n và không drift EN/VI. Claim riêng của Core phải resolve được tới source đang chạy hoặc ghi rõ là gap.

package/knowledge/grammars/starci/family.md

@@ -0,0 +1,50 @@
+# StarCi Core family and DNA
+
+## Family identity
+
+StarCi Core is defined by `coreGrammar` and selected by `CoreGrammarRoot`. It implements the Common contract; it is not the parent of Common or of any other family. `CORE_GRAMMAR_COMPONENTS` remains only a compatibility alias to `COMMON_GRAMMAR_COMPONENTS`.
+
+Applicable universal rules: [TONE-1..3](../../ui/presentation/tone.md), [ACCENT-1..5](../../ui/composition/accent.md), [BOUNDARY-1..6](../../ui/presentation/boundary.md), [FONT-1..6](../../ui/presentation/font.md), [GAP-0..6](../../ui/presentation/gap.md), and [PADDING-0..8](../../ui/presentation/padding.md).
+
+## CSS dependency direction
+
+`core/styles.css` imports `common/styles.css`. Common supplies renderer anatomy, geometry, state structure, responsive composition, and universal `--grammar-*` spacing. Core supplies only family-scoped values and theme bindings. Common never imports Core; another family never imports Core.
+
+## Core DNA
+
+`STARCI_CORE_DNA`, token names, light/dark defaults, and legacy spacing aliases are published only by `@starci/grammar/core`. Core binds semantic variables including canvas/background, surface, foreground, muted, border/separator, accent/focus, success/warning/danger/info pairs, fields, radii, shadow, and motion.
+
+The universal spacing source is Common: `COMMON_SPACING_SCALE` and `COMMON_SPACING_TOKENS`. `--starci-core-page-inset`, `--starci-core-region-gap`, `--starci-core-section-gap`, `--starci-core-row-gap`, and `--starci-core-inline-gap` are compatibility aliases to `--grammar-*`, not a second scale.
+
+## Theme and accessibility binding
+
+Core supports light, explicit dark, system dark, forced colors, focus-visible, and reduced motion under the Core root. It preserves Common semantics and cannot use palette or motion to change business truth. Applicable rules: [A11Y-1..4](../../ui/proof/accessibility.md), [FOCUS-1..4](../../ui/proof/focus.md), [MOTION-1..4](../../ui/proof/motion.md), and [STATE-1..3](../../ui/composition/state.md).
+
+## Source-backed family behavior and gaps
+
+- Core keeps the Common `SurfaceCard` renderer/props/semantics and uses family-scoped CSS plus the neutral `data-grammar-surface-labelled` hook to paint the outer labelled card as one material box. The inner bounded frame becomes transparent/no-shadow, so the label is visually inside Core material. Heritage's symmetric test paints only its inner frame, keeping the label outside without creating a second contract.
+- `ButtonVariant` has no destructive/danger variant ([CTA-4](../../ui/composition/cta.md)).
+- Common has no general modal focus-containment/restoration owner ([FOCUS-3](../../ui/proof/focus.md)).
+
+## Gaps
+
+Capabilities the live package does not publish, read out of the renderer source named in each row.
+This table is the one gap inventory of the family: `scripts/generate-grammar-dna.mjs` copies it into
+[DNA](DNA.md), so a gap recorded anywhere else is not published. A row states what is missing, never
+which rule it once hung on.
+
+| Component | Missing capability | Evidence |
+| --- | --- | --- |
+| `SurfaceCard`, `SurfaceListCard`, `SurfaceAccordionCard` | no typed heading level and no labelled-by-external-heading capability, so a surface whose correct level is not 3 has no owner | `packages/grammar/src/core/primitive/Label/index.tsx`; `packages/grammar/src/core/branch/SurfaceCard/index.tsx` |
+| Common overlay owner | Common publishes no general overlay or elevation prop | `packages/grammar/src/core/branch/Tooltip/index.tsx`; `packages/grammar/src/common/styles.css` |
+| `Badge` | `Badge` accepts absent `children` and renders a non-breaking space, so a glyph-only chip is representable and word presence is not enforced by the type | `packages/grammar/src/core/primitive/Badge/index.tsx` |
+| `Tabs` | `leading` is an optional `ReactNode`, not a typed `Icon`, so nothing forces a glyph or its `usage` on each peer | `packages/grammar/src/core/branch/Tabs/index.tsx` |
+| `Button`, `TextAction` | neither action publishes a motion anchor or attribute for its adornment, so a family has nothing to animate beyond `data-component` | `packages/grammar/src/core/primitive/Button/index.tsx`; `packages/grammar/src/core/primitive/TextAction/index.tsx` |
+| `Icon` | `Icon` has no direction-aware mirroring contract; the app's registry chooses the literal glyph | `packages/grammar/src/core/primitive/Icon/index.tsx` |
+| `IconButton` | `isActive` emits `data-active="true"` only, with no `aria-pressed`, so an active utility is visual-only | `packages/grammar/src/core/primitive/IconButton/index.tsx` |
+| `Tooltip` | `aria-describedby` is placed on the tooltip's wrapper `span`, not on the focusable control, so the description is not programmatically attached to the button | `packages/grammar/src/core/branch/Tooltip/index.tsx` |
+| `Icon` | `Icon` accepts only `source`; there is no fallback or error contract, so a missing registry mapping must be resolved by the app before render | `packages/grammar/src/core/primitive/Icon/index.tsx` |
+| `MediaFrame` | no `object-position` or focal prop, and `className` reaches the figure rather than the viewport child, so a required off-centre crop has no owner | `packages/grammar/src/core/primitive/MediaFrame/index.tsx`; `packages/grammar/src/common/styles.css` |
+| `MediaFrame` | `MediaFrame` publishes no loading or error prop and renders no state | `packages/grammar/src/core/primitive/MediaFrame/index.tsx` |
+| `OtpInput` | `OtpInput` publishes `disabled` and `invalid` (not the `isDisabled`/`isError` names) and no skeleton input, so its unresolved state has no owner | `packages/grammar/src/core/OtpInput.tsx` |
+| `OtpInput` | `OtpInput` publishes no `label`, `hint`, or `errorMessage` slot; only `describedBy` links outside text, so its visible identity has no Common owner | `packages/grammar/src/core/OtpInput.tsx` |

package/knowledge/grammars/starci/family.vi.md

@@ -0,0 +1,50 @@
+# StarCi Core family và DNA
+
+## Family identity
+
+StarCi Core được định nghĩa bởi `coreGrammar` và được chọn bằng `CoreGrammarRoot`. Nó hiện thực Common contract; nó không phải parent của Common hay family khác. `CORE_GRAMMAR_COMPONENTS` chỉ còn là compatibility alias tới `COMMON_GRAMMAR_COMPONENTS`.
+
+Luật universal áp dụng: [TONE-1..3](../../ui/presentation/tone.vi.md), [ACCENT-1..5](../../ui/composition/accent.vi.md), [BOUNDARY-1..6](../../ui/presentation/boundary.vi.md), [FONT-1..6](../../ui/presentation/font.vi.md), [GAP-0..6](../../ui/presentation/gap.vi.md) và [PADDING-0..8](../../ui/presentation/padding.vi.md).
+
+## Hướng dependency CSS
+
+`core/styles.css` import `common/styles.css`. Common cung cấp renderer anatomy, geometry, cấu trúc state, responsive composition và spacing universal `--grammar-*`. Core chỉ cung cấp value theo scope family và theme binding. Common không import Core; family khác không import Core.
+
+## Core DNA
+
+`STARCI_CORE_DNA`, token name, default light/dark và legacy spacing alias chỉ được publish từ `@starci/grammar/core`. Core bind các semantic variable gồm canvas/background, surface, foreground, muted, border/separator, accent/focus, cặp success/warning/danger/info, field, radius, shadow và motion.
+
+Nguồn spacing universal là Common: `COMMON_SPACING_SCALE` và `COMMON_SPACING_TOKENS`. `--starci-core-page-inset`, `--starci-core-region-gap`, `--starci-core-section-gap`, `--starci-core-row-gap` và `--starci-core-inline-gap` là compatibility alias tới `--grammar-*`, không phải scale thứ hai.
+
+## Binding theme và accessibility
+
+Core hỗ trợ light, explicit dark, system dark, forced colors, focus-visible và reduced motion dưới Core root. Nó giữ semantics Common và không được dùng palette hay motion để đổi business truth. Luật áp dụng: [A11Y-1..4](../../ui/proof/accessibility.vi.md), [FOCUS-1..4](../../ui/proof/focus.vi.md), [MOTION-1..4](../../ui/proof/motion.vi.md) và [STATE-1..3](../../ui/composition/state.vi.md).
+
+## Behavior family và gap có bằng chứng source
+
+- Core giữ Common `SurfaceCard` renderer/props/semantics và dùng family-scoped CSS cùng hook neutral `data-grammar-surface-labelled` để paint outer labelled card thành một material box. Inner bounded frame trở thành transparent/không shadow nên label visually inside Core material. Test đối xứng của Heritage chỉ paint inner frame, giữ label ở ngoài mà không tạo contract thứ hai.
+- `ButtonVariant` chưa có destructive/danger variant ([CTA-4](../../ui/composition/cta.vi.md)).
+- Common chưa có owner tổng quát cho modal focus containment/restoration ([FOCUS-3](../../ui/proof/focus.vi.md)).
+
+## Gap
+
+Những năng lực package đang chạy không công bố, đọc từ đúng source renderer mà mỗi dòng nêu tên. Bảng
+này là bản kiểm kê gap duy nhất của family: `scripts/generate-grammar-dna.mjs` chép nó sang
+[DNA](DNA.vi.md), nên một gap ghi ở chỗ khác là chưa được công bố. Mỗi dòng nói cái gì đang thiếu,
+không nói nó từng treo vào luật nào.
+
+| Component | Năng lực còn thiếu | Bằng chứng |
+| --- | --- | --- |
+| `SurfaceCard`, `SurfaceListCard`, `SurfaceAccordionCard` | không có cấp heading có kiểu và không có khả năng gắn nhãn bằng heading bên ngoài, nên một surface mà cấp đúng không phải 3 thì không có owner | `packages/grammar/src/core/primitive/Label/index.tsx`; `packages/grammar/src/core/branch/SurfaceCard/index.tsx` |
+| Owner overlay của Common | Common không công bố prop overlay hay độ nâng tổng quát nào | `packages/grammar/src/core/branch/Tooltip/index.tsx`; `packages/grammar/src/common/styles.css` |
+| `Badge` | `Badge` chấp nhận thiếu `children` và render một khoảng trắng không ngắt, nên chip chỉ có glyph vẫn biểu diễn được và sự hiện diện của chữ không được kiểu dữ liệu ép | `packages/grammar/src/core/primitive/Badge/index.tsx` |
+| `Tabs` | `leading` là `ReactNode` tuỳ chọn, không phải `Icon` có kiểu, nên không gì ép glyph hay `usage` của nó lên từng mục | `packages/grammar/src/core/branch/Tabs/index.tsx` |
+| `Button`, `TextAction` | không action nào công bố neo hay thuộc tính chuyển động cho phần trang trí của nó, nên family không có gì để animate ngoài `data-component` | `packages/grammar/src/core/primitive/Button/index.tsx`; `packages/grammar/src/core/primitive/TextAction/index.tsx` |
+| `Icon` | `Icon` không có hợp đồng soi gương theo hướng; registry của app chọn glyph nguyên nghĩa | `packages/grammar/src/core/primitive/Icon/index.tsx` |
+| `IconButton` | `isActive` chỉ phát `data-active="true"`, không có `aria-pressed`, nên một tiện ích đang active chỉ là thị giác | `packages/grammar/src/core/primitive/IconButton/index.tsx` |
+| `Tooltip` | `aria-describedby` được đặt lên `span` bọc của tooltip, không lên control nhận focus, nên mô tả không được gắn theo chương trình vào nút | `packages/grammar/src/core/branch/Tooltip/index.tsx` |
+| `Icon` | `Icon` chỉ nhận `source`; không có hợp đồng dự phòng hay lỗi, nên một ánh xạ registry thiếu phải được app giải quyết trước khi render | `packages/grammar/src/core/primitive/Icon/index.tsx` |
+| `MediaFrame` | không có prop `object-position` hay tiêu điểm, và `className` chạm tới figure chứ không tới con của viewport, nên một crop lệch tâm bắt buộc không có owner | `packages/grammar/src/core/primitive/MediaFrame/index.tsx`; `packages/grammar/src/common/styles.css` |
+| `MediaFrame` | `MediaFrame` không công bố prop loading hay error và không render state nào | `packages/grammar/src/core/primitive/MediaFrame/index.tsx` |
+| `OtpInput` | `OtpInput` công bố `disabled` và `invalid` (không phải tên `isDisabled`/`isError`) và không có đầu vào skeleton, nên state chưa phân giải của nó không có owner | `packages/grammar/src/core/OtpInput.tsx` |
+| `OtpInput` | `OtpInput` không công bố slot `label`, `hint` hay `errorMessage`; chỉ `describedBy` nối tới chữ bên ngoài, nên danh tính nhìn thấy của nó không có owner Common | `packages/grammar/src/core/OtpInput.tsx` |