@q1travel/design-system 0.2.0 → 0.3.1

package/{dist → dist-pkg}/style.css

@@ -1,7 +1,6 @@
 /* q1travel design system — 发布样式（tokens + 字体兜底 + foundations + components）。构建产物，勿手改。 */
 :root {
-  /* 钉死到站点主题而非 OS 偏好：原生控件（select 弹层/滚动条/search ✕）随 data-theme 渲染。 */
-  color-scheme: light;
+  /* color-scheme 不在此声明：tokens.css 随包发布，全局副作用交消费方应用掌管（门户侧在 global.css）。 */
   --q1-color-background-100: #ffffff;
   --q1-color-background-200: #fafafa;
   --q1-color-gray-100: #f2f2f2;
@@ -206,7 +205,6 @@
 }
 
 :root[data-theme='dark'] {
-  color-scheme: dark;
   /* 画布抬灰（对标 Geist 暗色 #0a0a0a）：表面自带浮起感，纯黑仅留给 background-200 底壳。 */
   --q1-color-background-100: #0a0a0a;
   --q1-color-background-200: #000000;
@@ -340,7 +338,7 @@
 
 
 
-.sr-only {
+.q1-sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -956,7 +954,7 @@
   color: var(--q1-color-status-danger);
 }
 
-.kbd {
+.q1-kbd {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -972,7 +970,7 @@
   line-height: 1;
 }
 
-.kbd--small {
+.q1-kbd--small {
   min-width: 20px;
   height: 20px;
   padding: 0 4px;
@@ -2230,14 +2228,14 @@ a.breadcrumb__link:hover {
   padding-right: 48px;
 }
 
-.tabs-specimen {
+.tabs-root {
   border: 1px solid var(--q1-color-border);
   border-radius: var(--q1-radius-3);
   background: var(--q1-color-bg-panel);
   padding: var(--q1-space-6);
 }
 
-/* 分段控件 Switch（对标 Geist Switch）：一组互斥选项，选中段抬起；底层 sr-only 单选组，方向键原生可用。 */
+/* 分段控件 Switch（对标 Geist Switch）：一组互斥选项，选中段抬起；底层 q1-sr-only 单选组，方向键原生可用。 */
 .switch-control {
   display: inline-flex;
   align-items: center;
@@ -2308,7 +2306,7 @@ a.breadcrumb__link:hover {
   align-items: center;
 }
 
-.tabs-specimen {
+.tabs-root {
   display: grid;
   gap: var(--q1-space-4);
 }
@@ -2419,7 +2417,7 @@ a.breadcrumb__link:hover {
     padding-inline: 10px;
   }
 
-  /* 带 tooltip 的禁用 tab 外层包了一个 span：真正的 flex item 是它而不是内层 button，
+  /* 带 q1-tooltip 的禁用 tab 外层包了一个 span：真正的 flex item 是它而不是内层 button，
      基础规则里固定 flex: none，这里要覆盖成跟裸 tab 一样按比例伸展，否则窄屏下完全不随宽度变化
      （实测：加了这条后仍比裸 tab 窄约 10-20px，是嵌套 flex 容器的已知残留误差，量级上远好于
      修复前的 flex: none，暂不继续深挖）。 */
@@ -3624,7 +3622,7 @@ a.breadcrumb__link:hover {
 }
 
 /* 外层只负责宽度约束与视觉样式；实际的 head/tail flex 布局交给 __visual——
-   sr-only 完整文本节点与 __visual 是并列的两个子节点，sr-only 绝对定位不占布局空间。 */
+   q1-sr-only 完整文本节点与 __visual 是并列的两个子节点，q1-sr-only 绝对定位不占布局空间。 */
 .middle-truncate {
   display: block;
   min-width: 0;
@@ -4229,120 +4227,120 @@ a.breadcrumb__link:hover {
   color: var(--q1-tone-fg-danger);
 }
 
-.card {
+.q1-card {
   border: 1px solid var(--q1-color-border);
   border-radius: var(--q1-radius-3);
   background: var(--q1-color-bg-panel);
   max-width: 400px;
 }
 
-.card__text {
+.q1-card__text {
   margin: 0;
   padding: var(--q1-space-4);
   font-size: 14px;
   color: var(--q1-color-text-secondary);
 }
 
-.card--hover {
+.q1-card--hover {
   cursor: pointer;
   transition: transform 0.15s ease;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .card--hover:hover {
+  .q1-card--hover:hover {
     transform: translateY(-2px);
   }
 }
 
-.card--hover:hover {
+.q1-card--hover:hover {
   border-color: var(--q1-color-border-strong);
   box-shadow: 0 6px 18px color-mix(in srgb, var(--q1-color-mask-opaque) 12%, transparent);
 }
 
-.card--secondary {
+.q1-card--secondary {
   background: var(--q1-color-bg-subtle);
 }
 
 /* 分段卡片给容器 16px 内边距（对齐 Geist p-4）：section 随之内缩，分隔线不贯满卡片边、左端对齐文字。
    这是分隔线"内缩"的来源——不是给线加 inset，而是容器留边、section 无水平 padding，线随 section 内缩。 */
-.card--divided {
+.q1-card--divided {
   padding: var(--q1-space-4);
 }
 
-.card--divided .card__section {
+.q1-card--divided .q1-card__section {
   /* 竖排段：只留垂直 padding（对齐 Geist py-2），水平交给容器内边距，分隔线因此内缩对齐文字。 */
   padding: var(--q1-space-2) 0;
   font-size: 14px;
   color: var(--q1-color-text-primary);
 }
 
-.card--divided .card__section + .card__section {
+.q1-card--divided .q1-card__section + .q1-card__section {
   border-top: 1px solid var(--q1-color-border);
 }
 
 /* 横向铺开（direction="row"）：段横向排布；等分占位，窄屏也不挤成一条缝。
-   特异性用 .card.card--row(0,2,0) 压过可点卡片的 a.card(0,1,1)，否则 <a> 卡片的 display:block 会把 flex 打回竖排。 */
-.card.card--row {
+   特异性用 .q1-card.q1-card--row(0,2,0) 压过可点卡片的 a.q1-card(0,1,1)，否则 <a> 卡片的 display:block 会把 flex 打回竖排。 */
+.q1-card.q1-card--row {
   display: flex;
   /* 横排指标块并列需要空间，解除默认 400px 限宽，充满容器（对齐 Geist 横排充满 demo 框）。 */
   max-width: none;
 }
 
-.card--row .card__section {
+.q1-card--row .q1-card__section {
   flex: 1 1 0;
 }
 
-.card--divided.card--row .card__section {
+.q1-card--divided.q1-card--row .q1-card__section {
   /* 横排段：垂直 padding 归 0（内缩交给容器）、水平 8px 给文字到竖线的间距（对齐 Geist row section 0 8px）。 */
   padding: 0 var(--q1-space-2);
 }
 
-.card--divided.card--row .card__section + .card__section {
+.q1-card--divided.q1-card--row .q1-card__section + .q1-card__section {
   border-top: none;
   border-left: 1px solid var(--q1-color-border);
 }
 
 /* 指标块：数字 + 标签垂直堆叠，横排铺开成仪表盘式 KPI 概览——横排分段放并列指标才填得满、才有意义。 */
-.card__metric {
+.q1-card__metric {
   display: flex;
   flex-direction: column;
   gap: var(--q1-space-1);
 }
 
-.card__metric-value {
+.q1-card__metric-value {
   font-size: 20px;
   font-weight: 600;
   line-height: 1.2;
   color: var(--q1-color-text-primary);
 }
 
-.card__metric-label {
+.q1-card__metric-label {
   font-size: 12px;
   color: var(--q1-color-text-secondary);
 }
 
 /* 常驻柔和投影（对齐 Geist shadow）：贴地薄影 + 扩散软影两层，让卡片浮于背景。 */
-.card--shadow {
+.q1-card--shadow {
   box-shadow:
     0 1px 2px color-mix(in srgb, var(--q1-color-shadow) 6%, transparent),
     0 8px 24px color-mix(in srgb, var(--q1-color-shadow) 8%, transparent);
 }
 
 /* 无框卡片（bordered={false}）：去边框，靠底色/投影表达边界（对齐 Geist border 可选）。 */
-.card--borderless {
+.q1-card--borderless {
   border-color: transparent;
 }
 
 /* 整卡可点（传 href → <a>）：去链接默认样式、继承文本色，补键盘焦点环让其可达。 */
-a.card {
+a.q1-card {
   display: block;
   text-decoration: none;
   color: inherit;
 }
 
-/* 可点卡片焦点环用 outline 独立层：不占 box-shadow，避免顶掉 .card--shadow 的常驻投影；
+/* 可点卡片焦点环用 outline 独立层：不占 box-shadow，避免顶掉 .q1-card--shadow 的常驻投影；
    且 outline 在 forced-colors 强制颜色模式仍可见（box-shadow 在该模式不渲染）。 */
-a.card:focus-visible {
+a.q1-card:focus-visible {
   outline: 2px solid var(--q1-color-primary-700);
   outline-offset: 2px;
 }
@@ -5524,11 +5522,11 @@ a.card:focus-visible {
   background: color-mix(in srgb, var(--q1-color-green-700) 16%, transparent);
   color: var(--q1-color-green-700);
 }
-.tooltip {
+.q1-tooltip {
   position: relative;
   display: inline-flex;
 }
-.tooltip__trigger {
+.q1-tooltip__trigger {
   min-width: 56px;
   padding: var(--q1-space-2) var(--q1-space-4);
   border: 1px solid var(--q1-color-border-strong);
@@ -5539,11 +5537,11 @@ a.card:focus-visible {
   font-size: 14px;
   cursor: default;
 }
-.tooltip__trigger:focus-visible {
+.q1-tooltip__trigger:focus-visible {
   outline: none;
   box-shadow: var(--q1-shadow-focus);
 }
-.tooltip__bubble {
+.q1-tooltip__bubble {
   position: fixed;
   z-index: 1000;
   width: max-content;
@@ -5558,11 +5556,11 @@ a.card:focus-visible {
   pointer-events: none;
   transition: opacity 0.12s ease, transform 0.12s ease;
 }
-.tooltip__bubble--open {
+.q1-tooltip__bubble--open {
   opacity: 1;
 }
 /* caret 指示箭头 */
-.tooltip__bubble::after {
+.q1-tooltip__bubble::after {
   content: '';
   position: absolute;
   width: 8px;
@@ -5571,66 +5569,66 @@ a.card:focus-visible {
   transform: rotate(45deg);
 }
 /* 方位：仅入场位移；坐标由 JS 以 fixed 视口坐标给出，箭头用 --tt-caret 绝对定位 */
-.tooltip__bubble--top {
+.q1-tooltip__bubble--top {
   transform: translateY(4px);
 }
-.tooltip__bubble--top.tooltip__bubble--open {
+.q1-tooltip__bubble--top.q1-tooltip__bubble--open {
   transform: translateY(0);
 }
-.tooltip__bubble--top::after {
+.q1-tooltip__bubble--top::after {
   top: 100%;
   left: var(--tt-caret, 50%);
   margin-left: -4px;
   margin-top: -4px;
 }
-.tooltip__bubble--bottom {
+.q1-tooltip__bubble--bottom {
   transform: translateY(-4px);
 }
-.tooltip__bubble--bottom.tooltip__bubble--open {
+.q1-tooltip__bubble--bottom.q1-tooltip__bubble--open {
   transform: translateY(0);
 }
-.tooltip__bubble--bottom::after {
+.q1-tooltip__bubble--bottom::after {
   bottom: 100%;
   left: var(--tt-caret, 50%);
   margin-left: -4px;
   margin-bottom: -4px;
 }
-.tooltip__bubble--left {
+.q1-tooltip__bubble--left {
   transform: translateX(4px);
 }
-.tooltip__bubble--left.tooltip__bubble--open {
+.q1-tooltip__bubble--left.q1-tooltip__bubble--open {
   transform: translateX(0);
 }
-.tooltip__bubble--left::after {
+.q1-tooltip__bubble--left::after {
   left: 100%;
   top: var(--tt-caret, 50%);
   margin-top: -4px;
   margin-left: -4px;
 }
-.tooltip__bubble--right {
+.q1-tooltip__bubble--right {
   transform: translateX(-4px);
 }
-.tooltip__bubble--right.tooltip__bubble--open {
+.q1-tooltip__bubble--right.q1-tooltip__bubble--open {
   transform: translateX(0);
 }
-.tooltip__bubble--right::after {
+.q1-tooltip__bubble--right::after {
   right: 100%;
   top: var(--tt-caret, 50%);
   margin-top: -4px;
   margin-right: -4px;
 }
-.tooltip__bubble--no-tip::after {
+.q1-tooltip__bubble--no-tip::after {
   display: none;
 }
-.tooltip__bubble--center {
+.q1-tooltip__bubble--center {
   text-align: center;
 }
 @media (prefers-reduced-motion: reduce) {
-  .tooltip__bubble {
+  .q1-tooltip__bubble {
     transition: opacity 0.12s ease;
   }
 }
-.toast-region {
+.q1-toast-region {
   position: fixed;
   right: var(--q1-space-6);
   bottom: var(--q1-space-6);
@@ -5639,7 +5637,7 @@ a.card:focus-visible {
   width: min(420px, calc(100vw - 2 * var(--q1-space-6)));
   height: var(--toast-stack-h, 0px);
 }
-.toast {
+.q1-toast {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -5660,58 +5658,58 @@ a.card:focus-visible {
   transform: translateY(calc(var(--depth, 0) * -14px)) scale(calc(1 - var(--depth, 0) * 0.06));
   opacity: calc(1 - max(0, var(--depth, 0) - 2));
 }
-.toast-region[data-expanded='true'] .toast {
+.q1-toast-region[data-expanded='true'] .q1-toast {
   transform: translateY(var(--y, 0px)) scale(1);
   opacity: 1;
 }
-/* 状态 toast：实心 tone 底色 + 浅色文字（对标 Geist 的 success/warning/error） */
-.toast--success,
-.toast--warning,
-.toast--error {
+/* 状态 q1-toast：实心 tone 底色 + 浅色文字（对标 Geist 的 success/warning/error） */
+.q1-toast--success,
+.q1-toast--warning,
+.q1-toast--error {
   color: var(--q1-color-mask-opaque);
   box-shadow:
     0 6px 16px -4px color-mix(in srgb, var(--q1-color-mask-opaque) 28%, transparent),
     0 16px 30px -10px color-mix(in srgb, var(--q1-color-mask-opaque) 20%, transparent);
 }
-.toast--success {
+.q1-toast--success {
   background: var(--q1-color-green-600);
 }
-.toast--warning {
+.q1-toast--warning {
   background: var(--q1-color-amber-600);
 }
-.toast--error {
+.q1-toast--error {
   background: var(--q1-color-red-600);
 }
-.toast__icon {
+.q1-toast__icon {
   flex: none;
 }
-.toast__body {
+.q1-toast__body {
   flex: 1 1 auto;
   min-width: 0;
 }
-.toast__title {
+.q1-toast__title {
   margin: 0;
   font-size: 14px;
   font-weight: 500;
 }
-.toast__description {
+.q1-toast__description {
   margin: 4px 0 0;
   font-size: 14px;
   color: currentColor;
   opacity: 0.74;
 }
-.toast__description a {
+.q1-toast__description a {
   color: inherit;
   opacity: 1;
   text-decoration: underline;
   text-underline-offset: 2px;
 }
-.toast__description a:focus-visible {
+.q1-toast__description a:focus-visible {
   outline: none;
   box-shadow: var(--q1-shadow-focus);
   border-radius: 2px;
 }
-.toast__action {
+.q1-toast__action {
   flex: none;
   align-self: center;
   padding: var(--q1-space-1) var(--q1-space-3);
@@ -5724,15 +5722,15 @@ a.card:focus-visible {
   font-weight: 500;
   cursor: pointer;
 }
-.toast__action:hover {
+.q1-toast__action:hover {
   background: color-mix(in srgb, currentColor 12%, transparent);
 }
-.toast__action:focus-visible,
-.toast__close:focus-visible {
+.q1-toast__action:focus-visible,
+.q1-toast__close:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 55%, transparent);
 }
-.toast__close {
+.q1-toast__close {
   flex: none;
   display: grid;
   place-items: center;
@@ -5745,15 +5743,15 @@ a.card:focus-visible {
   opacity: 0.7;
   cursor: pointer;
 }
-.toast__close:hover {
+.q1-toast__close:hover {
   opacity: 1;
   background: color-mix(in srgb, currentColor 12%, transparent);
 }
 @media (prefers-reduced-motion: no-preference) {
-  .toast {
+  .q1-toast {
     transition: transform 0.32s cubic-bezier(0.25, 0.75, 0.6, 0.98), opacity 0.28s ease;
   }
-  .toast-region {
+  .q1-toast-region {
     transition: height 0.32s cubic-bezier(0.25, 0.75, 0.6, 0.98);
   }
 }

package/package.json

@@ -1,20 +1,29 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "private": false,
   "type": "module",
-  "main": "./dist/design-system.js",
-  "module": "./dist/design-system.js",
-  "types": "./dist/design-system.d.ts",
+  "main": "./dist-pkg/design-system.js",
+  "module": "./dist-pkg/design-system.js",
+  "types": "./dist-pkg/design-system.d.ts",
+  "bin": {
+    "q1-design": "bin/q1-design.mjs"
+  },
   "exports": {
     ".": {
-      "types": "./dist/design-system.d.ts",
-      "import": "./dist/design-system.js"
+      "types": "./dist-pkg/design-system.d.ts",
+      "import": "./dist-pkg/design-system.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist-pkg/style.css",
+    "./contracts/*": "./contracts/*",
+    "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist-pkg",
+    "contracts",
+    ".agents",
+    "tooling",
+    "bin"
   ],
   "sideEffects": [
     "*.css"
@@ -29,7 +38,8 @@
     "check": "npm run build && npm run check:shell && npm run check:browser",
     "build:lib": "vite build --config vite.lib.config.ts",
     "build:style": "node scripts/build-style.mjs",
-    "build:pkg": "npm run build:lib && npm run build:style"
+    "build:pkg": "npm run build:lib && npm run build:style",
+    "prepack": "npm run build:pkg"
   },
   "dependencies": {
     "lucide-react": "^0.468.0"

package/tooling/README.md

@@ -0,0 +1,9 @@
+# tooling/scripts/evals
+
+产品设计框架的确定性工具层(规则 + eval)。
+
+- `evals/rules-checklist.json` —— 稳定 ID 规则清单(`Q1-DS-*`);`kind=deterministic` 可静态强制,`kind=judgment` 留给 product-design skill / Review。
+- `evals/fixtures.json` —— eval fixture 索引。
+- `evals/<fixture>/{before,after}/` —— 每条规则的前后态样例,用来测 skill / linter 是否产出预期改动。
+
+**现状**:`q1-design lint` 已实现 `Q1-DS-001`(`--ds-*`)/`Q1-DS-401`(`transition: all`)/`Q1-DS-501`(裸颜色字面量)三条纯机械规则;`q1-design eval` 已实现,对每个 fixture 校验 before 命中且 after 零命中。其余 `kind=deterministic` 规则(含判断成分)与全部 `kind=judgment` 规则待后续批次。见 `../.agents/skills/product-design/references/coverage-gaps.md`。

package/tooling/scripts/evals/fixtures.json

@@ -0,0 +1,7 @@
+{
+  "note": "eval 种子:每个 fixture 引一条规则,给 before/after 两态,用来测 skill/linter 是否产出预期改动。runner 即 `q1-design eval`(bin/q1-design.mjs,已实现);expectedHits 为 before 的精确命中数,after 恒 0。",
+  "version": 0,
+  "fixtures": [
+    { "id": "transition-all", "rule": "Q1-DS-401", "dir": "transition-all", "summary": "transition: all → 只过渡具体属性", "expectedHits": 1 }
+  ]
+}

package/tooling/scripts/evals/rules-checklist.json

@@ -0,0 +1,23 @@
+{
+  "note": "q1travel 产品设计确定性规则清单。每条带稳定 ID + canonical 出处。kind=deterministic 的可由 linter 静态强制;kind=judgment 的留给 product-design skill / Review。linter CLI 与 eval runner 已实现:`q1-design lint`(Q1-DS-001/401/501)与 `q1-design eval`(bin/q1-design.mjs);覆盖缺口见 ../../../.agents/skills/product-design/references/coverage-gaps.md。",
+  "version": 0,
+  "idScheme": {
+    "0xx": "token 与事实源",
+    "1xx": "交互与命中区",
+    "2xx": "表单",
+    "3xx": "内容与可访问性",
+    "4xx": "动效",
+    "5xx": "主题"
+  },
+  "rules": [
+    { "id": "Q1-DS-001", "title": "新代码用 --q1-*,不用 --ds-*", "source": "contracts/token-naming.md", "severity": "error", "kind": "deterministic", "detect": "新增/改动代码里出现 --ds-* 声明或作为新决策源名", "fix": "改用 --q1-* canonical token" },
+    { "id": "Q1-DS-101", "title": "导航用原生 link、动作用原生 button", "source": "contracts/interface-guidelines.md#interactions", "severity": "error", "kind": "judgment", "detect": "用 div/span + onClick 承载导航或动作", "fix": "导航用 <a href>,动作用 <button>" },
+    { "id": "Q1-DS-102", "title": "命中区 ≥24px(触摸 44px)", "source": "contracts/interface-guidelines.md#interactions", "severity": "warn", "kind": "judgment", "detect": "可点击元素视觉/命中区小于 24px 且未扩大命中区", "fix": "min-width/height + 负 margin 扩大命中区,不撑高容器" },
+    { "id": "Q1-DS-301", "title": "icon-only 控件必须有可访问名", "source": "contracts/interface-guidelines.md#content-and-accessibility", "severity": "error", "kind": "judgment", "detect": "只含图标的 button/link 无 aria-label / 可访问名", "fix": "补 aria-label 或视觉隐藏文本" },
+    { "id": "Q1-DS-401", "title": "禁用 transition: all", "source": "contracts/interface-guidelines.md#animation", "severity": "error", "kind": "deterministic", "detect": "CSS 出现 `transition: all` 或 `transition-property: all`", "fix": "只列需要过渡的具体属性(opacity / transform)" },
+    { "id": "Q1-DS-402", "title": "必须 honor prefers-reduced-motion", "source": "contracts/interface-guidelines.md#animation", "severity": "warn", "kind": "judgment", "detect": "有非平凡动效但无 prefers-reduced-motion 兜底", "fix": "加 @media (prefers-reduced-motion: reduce) 降级" },
+    { "id": "Q1-DS-403", "title": "只动 opacity / transform", "source": "contracts/interface-guidelines.md#animation", "severity": "warn", "kind": "deterministic", "detect": "transition/animation 作用于非 opacity/transform 属性且无书面理由", "fix": "改用 opacity/transform,或记书面理由" },
+    { "id": "Q1-DS-501", "title": "主题用 token,不用页面局部颜色常量", "source": "contracts/interface-guidelines.md#theming", "severity": "error", "kind": "deterministic", "detect": "组件 CSS 出现裸 hex / rgba() 颜色字面量", "fix": "改用 --q1-color-* / 语义 token;需要混色用 color-mix" },
+    { "id": "Q1-DS-502", "title": "native select 显式设前景/背景", "source": "contracts/interface-guidelines.md#theming", "severity": "warn", "kind": "judgment", "detect": "样式化的 <select> 未显式设 color / background", "fix": "显式设 select 的 fg/bg 以匹配当前主题" }
+  ]
+}

package/tooling/scripts/evals/transition-all/after/example.css

@@ -0,0 +1,4 @@
+/* after —— 只过渡具体属性(opacity / transform) */
+.q1-card {
+  transition: opacity 200ms ease, transform 200ms ease;
+}

package/tooling/scripts/evals/transition-all/before/example.css

@@ -0,0 +1,4 @@
+/* before —— 违反 Q1-DS-401(注释不得含规则字面量,否则自身会被 lint 命中) */
+.q1-card {
+  transition: all 200ms ease;
+}