@qijenchen/design-system 0.1.0-beta.3 → 0.1.0-beta.32

package/dist/react-day-picker.css

@@ -0,0 +1,457 @@
+/* Variables declaration */
+.rdp-root {
+  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
+  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
+
+  --rdp-day-height: 44px; /* The height of the day cells. */
+  --rdp-day-width: 44px; /* The width of the day cells. */
+
+  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
+  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
+  --rdp-day_button-height: 42px; /* The height of the day cells. */
+  --rdp-day_button-width: 42px; /* The width of the day cells. */
+
+  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
+  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
+  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
+  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
+
+  --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */
+
+  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
+
+  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
+  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
+  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
+  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
+
+  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
+  --rdp-range_middle-color: inherit; /* The color of the range text. */
+
+  --rdp-range_start-color: white; /* The color of the range text. */
+  --rdp-range_start-background: linear-gradient(
+    var(--rdp-gradient-direction),
+    transparent 50%,
+    var(--rdp-range_middle-background-color) 50%
+  ); /* Used for the background of the start of the selected range. */
+  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */
+
+  --rdp-range_end-background: linear-gradient(
+    var(--rdp-gradient-direction),
+    var(--rdp-range_middle-background-color) 50%,
+    transparent 50%
+  ); /* Used for the background of the end of the selected range. */
+  --rdp-range_end-color: white; /* The color of the range text. */
+  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */
+
+  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
+  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
+
+  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
+  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
+  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
+  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
+
+  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
+  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
+  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
+
+  --rdp-gradient-direction: 90deg;
+
+  --rdp-animation_duration: 0.3s;
+  --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.rdp-root[dir="rtl"] {
+  --rdp-gradient-direction: -90deg;
+}
+
+.rdp-root[data-broadcast-calendar="true"] {
+  --rdp-outside-opacity: unset;
+}
+
+/* Root of the component. */
+.rdp-root {
+  position: relative; /* Required to position the navigation toolbar. */
+  box-sizing: border-box;
+}
+
+.rdp-root * {
+  box-sizing: border-box;
+}
+
+.rdp-day {
+  width: var(--rdp-day-width);
+  height: var(--rdp-day-height);
+  text-align: center;
+}
+
+.rdp-day_button {
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+
+  width: var(--rdp-day_button-width);
+  height: var(--rdp-day_button-height);
+  border: var(--rdp-day_button-border);
+  border-radius: var(--rdp-day_button-border-radius);
+}
+
+.rdp-day_button:disabled {
+  cursor: revert;
+}
+
+.rdp-caption_label {
+  z-index: 1;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  white-space: nowrap;
+  border: 0;
+}
+
+.rdp-dropdown:focus-visible ~ .rdp-caption_label {
+  outline: 5px auto Highlight;
+  /* biome-ignore lint/suspicious/noDuplicateProperties: backward compatibility */
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.rdp-button_next,
+.rdp-button_previous {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  appearance: none;
+
+  width: var(--rdp-nav_button-width);
+  height: var(--rdp-nav_button-height);
+}
+
+.rdp-button_next:disabled,
+.rdp-button_next[aria-disabled="true"],
+.rdp-button_previous:disabled,
+.rdp-button_previous[aria-disabled="true"] {
+  cursor: revert;
+
+  opacity: var(--rdp-nav_button-disabled-opacity);
+}
+
+.rdp-chevron {
+  display: inline-block;
+  fill: var(--rdp-accent-color);
+}
+
+.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
+  transform: rotate(180deg);
+  transform-origin: 50%;
+}
+
+.rdp-dropdowns {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rdp-dropdown-gap);
+}
+.rdp-dropdown {
+  z-index: 2;
+
+  /* Reset */
+  opacity: 0;
+  appearance: none;
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: inherit;
+  border: none;
+  line-height: inherit;
+}
+
+.rdp-dropdown_root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
+  opacity: var(--rdp-disabled-opacity);
+}
+
+.rdp-month_caption {
+  display: flex;
+  align-content: center;
+  height: var(--rdp-nav-height);
+  font-weight: bold;
+  font-size: large;
+}
+
+.rdp-root[data-nav-layout="around"] .rdp-month,
+.rdp-root[data-nav-layout="after"] .rdp-month {
+  position: relative;
+}
+
+.rdp-root[data-nav-layout="around"] .rdp-month_caption {
+  justify-content: center;
+  margin-inline-start: var(--rdp-nav_button-width);
+  margin-inline-end: var(--rdp-nav_button-width);
+  position: relative;
+}
+
+.rdp-root[data-nav-layout="around"] .rdp-button_previous {
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  height: var(--rdp-nav-height);
+  display: inline-flex;
+}
+
+.rdp-root[data-nav-layout="around"] .rdp-button_next {
+  position: absolute;
+  inset-inline-end: 0;
+  top: 0;
+  height: var(--rdp-nav-height);
+  display: inline-flex;
+  justify-content: center;
+}
+
+.rdp-months {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rdp-months-gap);
+  max-width: fit-content;
+}
+
+.rdp-month_grid {
+  border-collapse: collapse;
+}
+
+.rdp-nav {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+
+  display: flex;
+  align-items: center;
+
+  height: var(--rdp-nav-height);
+}
+
+.rdp-weekday {
+  opacity: var(--rdp-weekday-opacity);
+  padding: var(--rdp-weekday-padding);
+  font-weight: 500;
+  font-size: smaller;
+  text-align: var(--rdp-weekday-text-align);
+  text-transform: var(--rdp-weekday-text-transform);
+}
+
+.rdp-week_number {
+  opacity: var(--rdp-week_number-opacity);
+  font-weight: 400;
+  font-size: small;
+  height: var(--rdp-week_number-height);
+  width: var(--rdp-week_number-width);
+  border: var(--rdp-week_number-border);
+  border-radius: var(--rdp-week_number-border-radius);
+  text-align: var(--rdp-weeknumber-text-align);
+}
+
+/* DAY MODIFIERS */
+.rdp-today:not(.rdp-outside) {
+  color: var(--rdp-today-color);
+}
+
+.rdp-selected {
+  font-weight: bold;
+  font-size: large;
+}
+
+.rdp-selected .rdp-day_button {
+  border: var(--rdp-selected-border);
+}
+
+.rdp-outside {
+  opacity: var(--rdp-outside-opacity);
+}
+
+.rdp-disabled:not(.rdp-selected) {
+  opacity: var(--rdp-disabled-opacity);
+}
+
+.rdp-hidden {
+  visibility: hidden;
+  color: var(--rdp-range_start-color);
+}
+
+.rdp-range_start {
+  background: var(--rdp-range_start-background);
+}
+
+.rdp-range_start .rdp-day_button {
+  background-color: var(--rdp-range_start-date-background-color);
+  color: var(--rdp-range_start-color);
+}
+
+.rdp-range_middle {
+  background-color: var(--rdp-range_middle-background-color);
+}
+
+.rdp-range_middle .rdp-day_button {
+  border: unset;
+  border-radius: unset;
+  color: var(--rdp-range_middle-color);
+}
+
+.rdp-range_end {
+  background: var(--rdp-range_end-background);
+  color: var(--rdp-range_end-color);
+}
+
+.rdp-range_end .rdp-day_button {
+  color: var(--rdp-range_start-color);
+  background-color: var(--rdp-range_end-date-background-color);
+}
+
+.rdp-range_start.rdp-range_end {
+  background: revert;
+}
+
+.rdp-focusable {
+  cursor: pointer;
+}
+
+@keyframes rdp-slide_in_left {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes rdp-slide_in_right {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes rdp-slide_out_left {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes rdp-slide_out_right {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.rdp-weeks_before_enter {
+  animation: rdp-slide_in_left var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-weeks_before_exit {
+  animation: rdp-slide_out_left var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-weeks_after_enter {
+  animation: rdp-slide_in_right var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-weeks_after_exit {
+  animation: rdp-slide_out_right var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-root[dir="rtl"] .rdp-weeks_after_enter {
+  animation: rdp-slide_in_left var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-root[dir="rtl"] .rdp-weeks_before_exit {
+  animation: rdp-slide_out_right var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-root[dir="rtl"] .rdp-weeks_before_enter {
+  animation: rdp-slide_in_right var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-root[dir="rtl"] .rdp-weeks_after_exit {
+  animation: rdp-slide_out_left var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+@keyframes rdp-fade_in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes rdp-fade_out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.rdp-caption_after_enter {
+  animation: rdp-fade_in var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-caption_after_exit {
+  animation: rdp-fade_out var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-caption_before_enter {
+  animation: rdp-fade_in var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}
+
+.rdp-caption_before_exit {
+  animation: rdp-fade_out var(--rdp-animation_duration)
+    var(--rdp-animation_timing) forwards;
+}

package/dist/stories-helpers/anatomy/anatomy-utils.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+/**
+ * Shared helper components for all `*.anatomy.stories.tsx` files.
+ *
+ * Canonical definitions picked from Button/button.anatomy.stories.tsx and
+ * Slider/slider.anatomy.stories.tsx. Before duplicating these helpers locally,
+ * consider whether the shared version meets your need — visual consistency
+ * across anatomy stories is intentional.
+ *
+ * If you must diverge locally, add a comment explaining why.
+ */
+export declare const H3: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Desc: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Td: ({ children, mono, className }: {
+    children: React.ReactNode;
+    mono?: boolean;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Th: ({ children }: {
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Token color preview swatch.
+ * - `transparent` / `none` / `—` → checkerboard pattern (communicates "no color")
+ * - `white` → literal #fff (CSS var won't resolve to white in all themes)
+ * - otherwise → `var(--token-name)` via backgroundColor
+ */
+export declare const Swatch: ({ value, size }: {
+    value: string;
+    size?: "sm" | "md";
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TokenCell: ({ token, display }: {
+    token: string;
+    display?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=anatomy-utils.d.ts.map

package/dist/stories-helpers/anatomy/anatomy-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"anatomy-utils.d.ts","sourceRoot":"","sources":["../../../src/stories-helpers/anatomy/anatomy-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;GASG;AAEH,eAAO,MAAM,EAAE,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAE7D,CAAA;AAED,eAAO,MAAM,IAAI,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAE/D,CAAA;AAED,eAAO,MAAM,EAAE,GAAI,+BAA+B;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4CAElH,CAAA;AAED,eAAO,MAAM,EAAE,GAAI,cAAc;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAE9D,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,MAAM,GAAI,iBAAwB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CAAE,4CAqBnF,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,oBAAoB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,4CAKhF,CAAA"}

package/dist/tokens/elevation/overlay-geometry.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Overlay geometry SSOT — Radix prop number constants(non-CSS-var,JS-side single source).
+ *
+ * Why JS const not CSS var:Radix `sideOffset` / `collisionPadding` 接 number prop,
+ * 不接 `var(--...)`。改值要動 5+ primitive default = 假 SSOT。本檔抽 const,
+ * primitive default 統一 import → 改值只動一處全部聯動。
+ *
+ * Canonical source:`elevation.spec.md` § 浮層間距 sideOffset。
+ */
+export declare const OVERLAY_SIDE_OFFSET = 8;
+export declare const OVERLAY_COLLISION_PADDING = 8;
+//# sourceMappingURL=overlay-geometry.d.ts.map

package/dist/tokens/elevation/overlay-geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-geometry.d.ts","sourceRoot":"","sources":["../../../src/tokens/elevation/overlay-geometry.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,eAAO,MAAM,mBAAmB,IAAI,CAAA;AAEpC,eAAO,MAAM,yBAAyB,IAAI,CAAA"}

package/dist/tokens/elevation/overlay-geometry.js

@@ -0,0 +1,7 @@
+const OVERLAY_SIDE_OFFSET = 8;
+const OVERLAY_COLLISION_PADDING = 8;
+export {
+  OVERLAY_COLLISION_PADDING,
+  OVERLAY_SIDE_OFFSET
+};
+//# sourceMappingURL=overlay-geometry.js.map

package/dist/tokens/elevation/overlay-geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-geometry.js","sources":["../../../src/tokens/elevation/overlay-geometry.ts"],"sourcesContent":["/**\n * Overlay geometry SSOT — Radix prop number constants(non-CSS-var,JS-side single source).\n *\n * Why JS const not CSS var:Radix `sideOffset` / `collisionPadding` 接 number prop,\n * 不接 `var(--...)`。改值要動 5+ primitive default = 假 SSOT。本檔抽 const,\n * primitive default 統一 import → 改值只動一處全部聯動。\n *\n * Canonical source:`elevation.spec.md` § 浮層間距 sideOffset。\n */\n\nexport const OVERLAY_SIDE_OFFSET = 8\n\nexport const OVERLAY_COLLISION_PADDING = 8\n"],"names":[],"mappings":"AAUO,MAAM,sBAAsB;AAE5B,MAAM,4BAA4B;"}

package/dist/tokens/motion/motion.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Motion tokens — JS mirror of `motion.css` for Radix/JS API consumers.
+ *
+ * Radix primitive props(`delayDuration` / `openDelay` / `closeDelay`)期望 number ms,
+ * 不認 CSS var。本 file 是 motion.css 對應 number value 鏡像;改值必同步兩處(或加 lint)。
+ *
+ * SSOT: `motion.css` + `motion.spec.md`。
+ */
+/** 純文字提示(Tooltip)— passive hint。2026-05-20 200→500ms 對齊 Material 3 / Apple HIG / shadcn-Radix 主流 */
+export declare const HOVER_DELAY_PLAIN_MS = 500;
+/** 內容預覽(HoverCard / NameCard)— rich preview。2026-05-20 300→700ms 避免列表掃視誤觸發 fetch */
+export declare const HOVER_DELAY_RICH_MS = 700;
+/** 通用關閉延遲(所有 hover overlay)— accidental-hover 容錯 */
+export declare const HOVER_DELAY_CLOSE_MS = 200;
+//# sourceMappingURL=motion.d.ts.map

package/dist/tokens/motion/motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../../src/tokens/motion/motion.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,oGAAoG;AACpG,eAAO,MAAM,oBAAoB,MAAM,CAAA;AAEvC,oFAAoF;AACpF,eAAO,MAAM,mBAAmB,MAAM,CAAA;AAEtC,oDAAoD;AACpD,eAAO,MAAM,oBAAoB,MAAM,CAAA"}

package/dist/tokens/motion/motion.js

@@ -0,0 +1,9 @@
+const HOVER_DELAY_PLAIN_MS = 500;
+const HOVER_DELAY_RICH_MS = 700;
+const HOVER_DELAY_CLOSE_MS = 200;
+export {
+  HOVER_DELAY_CLOSE_MS,
+  HOVER_DELAY_PLAIN_MS,
+  HOVER_DELAY_RICH_MS
+};
+//# sourceMappingURL=motion.js.map

package/dist/tokens/motion/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","sources":["../../../src/tokens/motion/motion.ts"],"sourcesContent":["/**\n * Motion tokens — JS mirror of `motion.css` for Radix/JS API consumers.\n *\n * Radix primitive props(`delayDuration` / `openDelay` / `closeDelay`)期望 number ms,\n * 不認 CSS var。本 file 是 motion.css 對應 number value 鏡像;改值必同步兩處(或加 lint)。\n *\n * SSOT: `motion.css` + `motion.spec.md`。\n */\n\n/** 純文字提示(Tooltip)— passive hint。2026-05-20 200→500ms 對齊 Material 3 / Apple HIG / shadcn-Radix 主流 */\nexport const HOVER_DELAY_PLAIN_MS = 500\n\n/** 內容預覽(HoverCard / NameCard)— rich preview。2026-05-20 300→700ms 避免列表掃視誤觸發 fetch */\nexport const HOVER_DELAY_RICH_MS = 700\n\n/** 通用關閉延遲(所有 hover overlay)— accidental-hover 容錯 */\nexport const HOVER_DELAY_CLOSE_MS = 200\n"],"names":[],"mappings":"AAUO,MAAM,uBAAuB;AAG7B,MAAM,sBAAsB;AAG5B,MAAM,uBAAuB;"}

package/dist/tokens/uiSize/icon-size.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Icon Size SSOT — cross-domain re-export entry
+ *
+ * Owner:`packages/design-system/src/patterns/element-anatomy/item-anatomy.tsx:66` `ICON_SIZE`
+ * Spec:`packages/design-system/src/tokens/uiSize/uiSize.spec.md` 「Icon Size Tier」段
+ *
+ * ── 為什麼 re-export 不直接動 owner ──
+ * `ICON_SIZE` const codified in `item-anatomy.tsx` 是 row primitive SSOT(MenuItem / TreeView /
+ * Sidebar / DropdownMenu / SelectionItem / Item-anatomy 等 row-based primitives 消費)。
+ *
+ * Form control(Button / Input / Combobox / DatePicker / Tabs / Select / SegmentedControl 等)
+ * 不該 cross-domain import patterns/element-anatomy(會造成 components→patterns 反向 dependency
+ * 增加 cycle 風險)。透過 `tokens/uiSize/` 作 token home 是 cross-domain SSOT 的慣例(token 是 DS
+ * 內最底層,所有 layer 都可 consume 不違反 dependency direction)。
+ *
+ * ── Tier ──
+ * `field-height-xs / sm / md` → icon **16px**
+ * `field-height-lg`           → icon **20px**
+ *
+ * 詳 spec L132+ Icon Size Tier 段(stroke 下限 12px / Tag-Field 配對 / etc.)
+ *
+ * ── Consumer 用法 ──
+ * ```tsx
+ * import { ICON_SIZE } from '../../tokens/uiSize/icon-size'
+ *
+ * // sm/md → 16, lg → 20
+ * <LucideIcon size={ICON_SIZE[size]} />
+ *
+ * // form control xs(field-height-xs 24)用 ICON_SIZE.sm(同 16,per spec L132 Tier)
+ * <LucideIcon size={size === 'xs' ? ICON_SIZE.sm : ICON_SIZE[size]} />
+ * ```
+ *
+ * ── 防漂移 ──
+ * 1. uiSize.spec.md「Icon Size Tier」段 codify 16/16/16/20 tier(text-based canonical)
+ * 2. 本 const 程式化 SSOT(type-safe Record<RowSize, number>)
+ * 3. Hook `check_icon_size_literal.sh`(write-time regex 攔非標準 literal)
+ * 4. Audit Dim「Icon size literal compliance」DS-wide audit-time scan
+ *
+ * ── Carve-out(不適用本 SSOT)──
+ * - `rating.spec.md` Rating star 20/24/24(identity scale,cite Ant/Material/Airbnb)
+ * - `avatar.spec.md` Avatar 內 icon `round_even(size × 0.6)`(Material/Apple HIG)
+ * - `empty.tsx` Empty 用 Avatar 48 wrap → icon 28(Avatar formula derived)
+ * - `file-viewer.tsx` thumb 64 → icon 20(thumbnail file-type indicator,hardcode 無公式)
+ * - `circular-progress.tsx` `strokeWidth = max(2, size/10)`(stroke ring 厚度公式,非 icon)
+ * - `steps.tsx` INDICATOR_ICON_SIZE `{sm:0, md:16, lg:20}`(部分對齊 tier,sm 因圓圈 8px 太小)
+ * - `slider.tsx` thumb 固定不隨 size 變(視覺 single tier)
+ * - `checkbox.tsx` + `switch.tsx` check `{sm:12, md:12, lg:16}`(form-control internal,stroke 下限)
+ *
+ * 詳 uiSize.spec.md「跨 regime pointer index」段。
+ */
+export { ICON_SIZE } from '../../patterns/element-anatomy/item-anatomy';
+export type { RowSize } from '../../patterns/element-anatomy/item-anatomy';
+//# sourceMappingURL=icon-size.d.ts.map

package/dist/tokens/uiSize/icon-size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-size.d.ts","sourceRoot":"","sources":["../../../src/tokens/uiSize/icon-size.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,uDAAuD,CAAA;AACjF,YAAY,EAAE,OAAO,EAAE,MAAM,uDAAuD,CAAA"}

package/ds-canonical/commands/README.md

@@ -0,0 +1,26 @@
+# .claude/commands/ Charter
+
+## 這裡只收:**one-shot slash commands**(無 phase,單次 action)
+
+每個 command 一檔 `.md`,用戶打 `/<name>` 直接觸發。**vs Skill**:skill 是多 phase workflow + user CP;command 是單次動作無 CP。
+
+## 當前居民(1 pilot,2026-04-24)
+
+| Command | 觸發 | 用途 |
+|---------|------|------|
+| `/gov-status` | user 輸入 `/gov-status` | 一次印 governance health snapshot(行數/retire rate/logs freshness/drift/pending)—不走 skill workflow,不要 CP,純 dump |
+
+## 這裡**不收**(反例)
+
+| 疑似要放這但其實不是 | 正確去處 | 為什麼 |
+|---------------------|---------|--------|
+| 多 phase + user 決策 | `.claude/skills/` | skill 管 phase + CP |
+| 機械 tool-event 檢查 | `.claude/hooks/` | hook 是 pre/post tool 觸發,不是 user 觸發 |
+| 需要 isolated context / scoped tools | `.claude/agents/` | agent 是 AI worker,command 是 quick action |
+
+## 新 command criteria
+
+1. **< 10 秒完成**(不是 workflow)
+2. **無 user CP**(有決策點 = skill)
+3. **輸出簡潔**(一段 markdown / 表)
+4. **可重複 run**(每次同 behaviour)