@snap-rail/framework-shadcn 0.0.0-stage → 0.2.0

package/package.json

@@ -1,6 +1,141 @@
 {
   "name": "@snap-rail/framework-shadcn",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "description": "The UI framework (single-active): slot vocabulary, renderer runtime + shell, shadcn-style shared primitives, theme tokens, settings/session/variables/workflows services, the settings dialog shell with its first-party plugin/theme/update pages, and the fallback layout",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./runtime": {
+      "types": "./lib/types/runtime.d.ts",
+      "default": "./lib/runtime.js"
+    },
+    "./slots": {
+      "types": "./lib/types/slots.d.ts",
+      "default": "./lib/slots.js"
+    },
+    "./semantic": {
+      "types": "./lib/types/semantic.d.ts",
+      "default": "./lib/semantic.js"
+    },
+    "./ui": {
+      "types": "./lib/types/ui/index.d.ts",
+      "default": "./lib/ui/index.js"
+    },
+    "./settings-pages": {
+      "types": "./lib/types/settings-pages.d.ts",
+      "default": "./lib/settings-pages.js"
+    },
+    "./session": {
+      "types": "./lib/types/session.d.ts",
+      "default": "./lib/session.js"
+    },
+    "./variables": {
+      "types": "./lib/types/variables.d.ts",
+      "default": "./lib/variables.js"
+    },
+    "./workflows": {
+      "types": "./lib/types/workflows.d.ts",
+      "default": "./lib/workflows.js"
+    },
+    "./fallback": {
+      "types": "./lib/types/fallback.d.ts",
+      "default": "./lib/fallback.js"
+    },
+    "./templates/*": "./templates/*",
+    "./docs/*": "./docs/*",
+    "./theme.css": "./src/ui/theme.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "src/ui/theme.css",
+    "templates",
+    "docs"
+  ],
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.8",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-progress": "^1.1.16",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.18",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.4.3"
+  },
+  "peerDependencies": {
+    "@snap-rail/cordis": "^4.0.1",
+    "@snap-rail/equipment": "^0.1.0",
+    "@snap-rail/protocol": "^0.1.1",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.3.3",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "happy-dom": "^20.0.11",
+    "lucide-react": "^1.34.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwindcss": "^4.3.3",
+    "tsdown": "^0.22.2",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.8",
+    "@snap-rail/app-boot": "0.1.2",
+    "@snap-rail/audit": "0.1.0",
+    "@snap-rail/client-kernel": "0.1.1",
+    "@snap-rail/connection": "0.1.0",
+    "@snap-rail/cordis": "4.0.3",
+    "@snap-rail/cordis-plugin-timer": "1.1.3",
+    "@snap-rail/equipment": "0.1.4",
+    "@snap-rail/gateway": "0.1.1",
+    "@snap-rail/plugin-kit": "0.2.1",
+    "@snap-rail/plugin-sdk": "0.2.2",
+    "@snap-rail/protocol": "0.1.1",
+    "@snap-rail/settings": "0.1.0",
+    "@snap-rail/station-rpc": "0.1.0",
+    "@snap-rail/store-sqlite": "0.1.1"
+  },
+  "snapRail": {
+    "kind": "framework",
+    "layer": "ui",
+    "exclusive": "framework",
+    "category": "界面",
+    "clientOnly": true,
+    "client": {
+      "entry": "lib-client/client.js",
+      "seeds": [
+        "ui",
+        "slots",
+        "semantic",
+        "settings-pages",
+        "session",
+        "variables",
+        "workflows",
+        "runtime",
+        "fallback"
+      ]
+    },
+    "title": "界面框架"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && pnpm exec tailwindcss -i src/ui/theme.css -o lib-client/theme.css && node -e \"const fs=require('node:fs');fs.mkdirSync('lib/ui',{recursive:true});fs.copyFileSync('src/ui/theme.css','lib/ui/theme.css')\" && tsdown --config tsdown.config.ts",
+    "test": "vitest run",
+    "pack": "snap-rail-plugin pack . --out dist"
+  }
 }

package/src/ui/theme.css

@@ -0,0 +1,271 @@
+/*
+ * The snap-rail theme: Tailwind v4 tokens carrying the industrial HMI
+ * palette. Two modes share one token vocabulary — the dark graphite-steel
+ * set is the @theme default, `html[data-mode='light']` overrides the same
+ * tokens with the fog-white shop-floor set (accent: cobalt #4a6cff/#3857e8,
+ * picked in docs/design/theme-samples.html). Data series colors live in
+ * --color-chart-1…6 (see docs/theme.md); red/amber/green stay reserved for
+ * state semantics. Class scanning is explicit (auto-detection roots at
+ * the Vite cwd, which is the app, not the workspace), @source globs
+ * resolve relative to this file, and gitignore is respected — build
+ * outputs under lib/lib-client/dist are skipped naturally. One broad
+ * glob covers every package's sources (spine client faces, suites,
+ * field stations alike), so the occupant roster is never re-listed
+ * here; the theme.spec gate fails loud if a package falls outside it.
+ */
+@import "tailwindcss";
+
+@source "../../../../**/src/**/*.{ts,tsx}";
+
+@theme {
+  --color-background: #0b0f14;
+  --color-foreground: #ced8e3;
+
+  --color-card: #11161d;
+  --color-card-foreground: #ced8e3;
+
+  --color-popover: #161b22;
+  --color-popover-foreground: #ced8e3;
+
+  --color-primary: #4a6cff;
+  --color-primary-foreground: #ffffff;
+
+  --color-secondary: #1c2430;
+  --color-secondary-foreground: #ced8e3;
+
+  --color-muted: #161b22;
+  --color-muted-foreground: #8b949e;
+
+  --color-accent: #1c2430;
+  --color-accent-foreground: #e8eef4;
+
+  --color-destructive: #f85149;
+  --color-destructive-foreground: #ffffff;
+
+  --color-success: #3fb950;
+  --color-success-foreground: #0b0f14;
+
+  --color-warning: #d29922;
+  --color-warning-foreground: #0b0f14;
+
+  --color-border: #1f2933;
+  --color-input: #1f2933;
+  --color-ring: #4a6cff;
+
+  /* Data series (docs/theme.md): series 1 = primary hue, 2/3 derived,
+   * 4-6 the steel-gray ramp. Not for state semantics. */
+  --color-chart-1: #4a6cff;
+  --color-chart-2: #3147a1;
+  --color-chart-3: #667fcd;
+  --color-chart-4: #7d8fa5;
+  --color-chart-5: #55677c;
+  --color-chart-6: #33414f;
+
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  --font-sans: system-ui, "Segoe UI", "Microsoft YaHei", sans-serif;
+  --font-mono: "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, monospace;
+  --text-xs: 0.8125rem;
+  --text-sm: 0.9375rem;
+  --text-base: 1.0625rem;
+}
+
+@layer base {
+  :root {
+    color-scheme: dark;
+    /* Glow strengths (color-mix percentages) — brighter at night, restrained
+     * under shop lights. Consumed by the glow-number/glow-bar utilities. */
+    --glow-a: 55%;
+    --glow-b: 20%;
+    --bar-glow: 45%;
+    --app-gradient: radial-gradient(
+      130% 100% at 50% 0%,
+      color-mix(in srgb, var(--color-primary) 8%, var(--color-background)) 0%,
+      var(--color-background) 62%
+    );
+  }
+
+  html[data-mode='light'] {
+    color-scheme: light;
+
+    --color-background: #e4e9ef;
+    --color-foreground: #26323e;
+
+    --color-card: #f3f6f9;
+    --color-card-foreground: #26323e;
+
+    --color-popover: #ffffff;
+    --color-popover-foreground: #26323e;
+
+    --color-primary: #3857e8;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #dde4ec;
+    --color-secondary-foreground: #26323e;
+
+    --color-muted: #e6ebf1;
+    --color-muted-foreground: #5d6d7e;
+
+    --color-accent: #dde4ec;
+    --color-accent-foreground: #101b26;
+
+    --color-destructive: #dc2626;
+    --color-destructive-foreground: #ffffff;
+
+    --color-success: #15803d;
+    --color-success-foreground: #ffffff;
+
+    --color-warning: #b45309;
+    --color-warning-foreground: #ffffff;
+
+    --color-border: #c7d0da;
+    --color-input: #c7d0da;
+    --color-ring: #3857e8;
+
+    --color-chart-1: #3857e8;
+    --color-chart-2: #7088ee;
+    --color-chart-3: #667dd0;
+    --color-chart-4: #94a3b8;
+    --color-chart-5: #b3c0cd;
+    --color-chart-6: #ccd6e0;
+
+    --glow-a: 20%;
+    --glow-b: 7%;
+    --bar-glow: 30%;
+    --app-gradient: radial-gradient(
+      130% 100% at 50% 0%,
+      color-mix(in srgb, var(--color-primary) 6%, var(--color-background)) 0%,
+      var(--color-background) 62%
+    );
+  }
+
+  * {
+    border-color: var(--color-border);
+  }
+  html,
+  body,
+  #root {
+    height: 100%;
+  }
+  body {
+    background-color: var(--color-background);
+    background-image: var(--app-gradient);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    margin: 0;
+  }
+
+  /* Chunky themed scrollbars: grabbable on a touch panel, tinted per mode. */
+  ::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+  }
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--color-muted-foreground) 32%, transparent);
+    background-clip: content-box;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--color-muted-foreground) 48%, transparent);
+    background-clip: content-box;
+  }
+
+  /* A DragScroll container sets this while a mouse pan is active. */
+  [data-panning='true'] {
+    cursor: grabbing;
+    user-select: none;
+  }
+
+  /* Modal entrance (Dialog surfaces); exit stays instant. */
+  .overlay-in {
+    animation: snap-overlay-in 0.15s ease-out;
+  }
+  .dialog-in {
+    animation: snap-dialog-in 0.18s ease-out;
+  }
+  @keyframes snap-overlay-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  /* Centering lives on Tailwind v4's `translate` property (not `transform`),
+   * so keyframes must only animate scale/opacity — a translate here would
+   * stack with the utility and fling the panel off-center during entry. */
+  @keyframes snap-dialog-in {
+    from {
+      opacity: 0;
+      transform: scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .overlay-in,
+    .dialog-in {
+      animation: none;
+    }
+  }
+}
+
+@utility drag-region {
+  -webkit-app-region: drag;
+}
+
+@utility no-drag {
+  -webkit-app-region: no-drag;
+}
+
+/* Hero readouts: large tabular numerals pick up a primary-tinted halo. */
+@utility glow-number {
+  text-shadow:
+    0 0 14px color-mix(in srgb, var(--color-primary) var(--glow-a), transparent),
+    0 0 44px color-mix(in srgb, var(--color-primary) var(--glow-b), transparent);
+}
+
+/* Chart bodies: the series-1 bars get a soft light bloom. */
+@utility glow-bar {
+  box-shadow: 0 0 12px color-mix(in srgb, var(--color-chart-1) var(--bar-glow), transparent);
+}
+
+/* The selected-channel keyline: a 3px primary rail on the inline-start edge. */
+@utility channel-keyline {
+  box-shadow: inset 3px 0 0 0 var(--color-primary);
+}
+
+/*
+ * Workflow sidebar attention effects. One keyframe pair serves every
+ * breathing light: the element sets --breathe-color (a CSS color) and
+ * --breathe-period (a duration); the glow ring pulses around a constant
+ * inner keyline so the item stays identifiable at the dim end.
+ */
+.breathe {
+  --breathe-color: var(--color-destructive);
+  --breathe-period: 2.4s;
+  animation: snap-breathe var(--breathe-period) ease-in-out infinite;
+}
+
+@keyframes snap-breathe {
+  0%, 100% {
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--breathe-color) 60%, transparent),
+      0 0 2px 0 color-mix(in srgb, var(--breathe-color) 25%, transparent);
+  }
+  50% {
+    box-shadow:
+      inset 0 0 0 2px var(--breathe-color),
+      0 0 16px 4px color-mix(in srgb, var(--breathe-color) 70%, transparent);
+  }
+}

package/templates/ui-extension/README.md

@@ -0,0 +1,17 @@
+# ui-extension 扩展库脚手架
+
+站在一个 UI 框架之上、向所有 Component 插件贡献**共享组件**的插件：
+client 面导出 `seeds` 映射，壳把每个 `<package>/<key>` 播种进种子表，
+所有消费者共享同一份实例。
+
+```sh
+snap-rail-plugin init my-ext --template ui-extension --framework @snap-rail/framework-shadcn
+```
+
+要点：
+- 组件构建在框架贡献的原语之上（`client.externalSeeds` 声明你 require 的
+  框架面，如 `@snap-rail/framework-shadcn/ui`）——绝不内联私有副本；
+- manifest 的 `client.seeds` 声明你贡献的子路径（如 `widget`），消费者
+  以 `<你的包>/widget` require；
+- 组件样式只用框架的 theme 令牌，随框架 zip 的预编译 CSS 生效；
+- 框架不在场时扩展不挂载（绑定预检 fail-loud）——这是特性。

package/templates/ui-view/README.md

@@ -0,0 +1,17 @@
+# ui-view 组件脚手架
+
+一个 Component 插件：绑定一个 UI 框架、占其槽位、渲染自己的页面。
+
+```sh
+snap-rail-plugin init my-view --template ui-view --framework @snap-rail/framework-shadcn
+```
+
+`--framework` 换成任意框架包名——脚手架会写入该框架的 devDependency、
+`requires` 里的框架依赖（`<框架>@^0.1`，绑定即依赖）、`client.externalSeeds`（本组件 require 的贡献
+种子 id），源码里的 import 也指向该框架。
+
+要点：
+- 页面只组合框架的共享原语（构建期 external、运行期种子表单实例）；
+- 页面自身的数据接入订阅统一 wire 帧（`subscribeFrame`），不 import 其他
+  插件的面；
+- 词汇常量（`UI_SLOT_IDS` 等）来自框架包的 `/slots` 面，禁止裸字符串槽 id。