@international-iot-association/ui 1.0.0-rc.1

package/README.md

@@ -0,0 +1,4 @@
+# @international-iot-association/ui
+
+工位插件 UI 共用的 shadcn/ui（new-york、zinc）组件与深色主题；含 `styles.css` 独立导出。
+属于**组 B · 独立版本组**（不跟随 `agentApi` major，各自 semver）。

package/dist/index.cjs

@@ -0,0 +1,493 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
+  MeasurementRow: () => MeasurementRow,
+  PrimaryAction: () => PrimaryAction,
+  ScanInput: () => ScanInput,
+  StationStatePanel: () => StationStatePanel,
+  StepRunner: () => StepRunner,
+  badgeVariants: () => badgeVariants,
+  buttonVariants: () => buttonVariants,
+  cn: () => cn,
+  primaryActionVariants: () => primaryActionVariants,
+  stationStatePanelVariants: () => panelVariants
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/button.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_react_slot.Slot : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/card.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-slot": "card-content", className: cn("px-6", className), ...props });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+      ...props
+    }
+  );
+}
+
+// src/components/badge.tsx
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority2.cva)(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        success: "border-transparent bg-emerald-600 text-white"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_react_slot2.Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Comp, { "data-slot": "badge", className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/components/step-runner.tsx
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function StepRunner({
+  steps,
+  emptyHint
+}) {
+  const [records, setRecords] = React.useState([]);
+  const [busy, setBusy] = React.useState(null);
+  const onRun = async (step) => {
+    setBusy(step.key);
+    try {
+      const r = await step.run();
+      setRecords((prev) => [{ ...r, ts: (/* @__PURE__ */ new Date()).toISOString() }, ...prev].slice(0, 50));
+    } catch (e) {
+      setRecords(
+        (prev) => [
+          {
+            ok: false,
+            stepKey: step.key,
+            error: e instanceof Error ? e.message : String(e),
+            ts: (/* @__PURE__ */ new Date()).toISOString()
+          },
+          ...prev
+        ].slice(0, 50)
+      );
+    } finally {
+      setBusy(null);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-wrap gap-2", children: steps.map((s) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Button,
+      {
+        variant: "secondary",
+        size: "sm",
+        disabled: busy !== null,
+        title: s.description,
+        onClick: () => void onRun(s),
+        children: busy === s.key ? "\u8FD0\u884C\u4E2D\u2026" : s.label
+      },
+      s.key
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+      records.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "rounded-md bg-muted/30 px-2 py-3 text-center text-xs text-muted-foreground", children: emptyHint ?? "\u70B9\u51FB\u4E0A\u65B9\u6309\u94AE\u6267\u884C\u6D4B\u8BD5\u6B65\u9AA4\u3002" }),
+      records.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          className: cn(
+            "rounded-md border p-2 text-xs",
+            r.ok ? "border-emerald-500/30 bg-emerald-500/5" : "border-destructive/30 bg-destructive/5"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "rounded px-1.5 py-0.5 text-[10px] font-semibold",
+                    r.ok ? "bg-emerald-500/20 text-emerald-400" : "bg-destructive/20 text-destructive"
+                  ),
+                  children: r.ok ? "PASS" : "FAIL"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-medium", children: r.stepKey }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "ml-auto font-mono text-[10px] text-muted-foreground", children: r.ts.slice(11, 19) })
+            ] }),
+            r.measurements && Object.keys(r.measurements).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { className: "mt-1.5 overflow-x-auto rounded bg-muted/50 p-1.5 font-mono text-[10px]", children: JSON.stringify(r.measurements) }),
+            r.error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mt-1 text-destructive", children: r.error })
+          ]
+        },
+        i
+      ))
+    ] })
+  ] });
+}
+
+// src/components/station-state-panel.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var STATE_META = {
+  idle: { word: "\u5F85\u673A", hint: "\u7B49\u5F85\u626B\u7801" },
+  running: { word: "\u6D4B\u8BD5\u4E2D", hint: "\u8BF7\u52FF\u79FB\u52A8\u4EA7\u54C1" },
+  pass: { word: "\u2713 PASS", hint: "\u5408\u683C" },
+  fail: { word: "\u2715 FAIL", hint: "\u4E0D\u5408\u683C" },
+  fault: { word: "\u26A0 FAULT", hint: "\u5DE5\u4F4D\u6545\u969C" }
+};
+var panelVariants = (0, import_class_variance_authority3.cva)(
+  "flex min-h-[12rem] w-full flex-col items-center justify-center gap-[0.5rem] rounded-lg border-2 px-[1.5rem] py-[2rem] text-center",
+  {
+    variants: {
+      state: {
+        idle: "border-border bg-card text-muted-foreground",
+        running: "border-sky-500/60 bg-sky-500/10 text-sky-400",
+        pass: "border-emerald-500/60 bg-emerald-500/10 text-emerald-400",
+        fail: "border-red-500/60 bg-red-500/10 text-red-400",
+        fault: "border-amber-500/60 bg-amber-500/10 text-amber-400"
+      }
+    }
+  }
+);
+function StationStatePanel({
+  state,
+  title,
+  detail,
+  className,
+  ...props
+}) {
+  const meta = STATE_META[state];
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      "data-slot": "station-state-panel",
+      role: "status",
+      "aria-live": "polite",
+      className: cn(panelVariants({ state }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "span",
+          {
+            className: cn(
+              "text-[3.75rem] leading-none font-bold tracking-tight",
+              state === "running" && "animate-pulse"
+            ),
+            children: title ?? meta.word
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[1.125rem] font-medium opacity-80", children: detail ?? meta.hint })
+      ]
+    }
+  );
+}
+
+// src/components/measurement-row.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var VERDICT_META = {
+  pass: { text: "\u2713 PASS", className: "border-emerald-500/50 bg-emerald-500/10 text-emerald-400" },
+  fail: { text: "\u2715 FAIL", className: "border-red-500/50 bg-red-500/10 text-red-400" },
+  pending: { text: "\u2026", className: "border-border bg-secondary text-muted-foreground" }
+};
+function formatSpec(lo, hi, unit) {
+  if (lo === void 0 && hi === void 0) return "";
+  const u = unit ? ` ${unit}` : "";
+  if (lo !== void 0 && hi !== void 0) return `\u89C4\u683C\uFF1A${lo} ~ ${hi}${u}`;
+  if (lo !== void 0) return `\u89C4\u683C\uFF1A\u2265 ${lo}${u}`;
+  return `\u89C4\u683C\uFF1A\u2264 ${hi}${u}`;
+}
+function MeasurementRow({
+  label,
+  value,
+  unit,
+  lo,
+  hi,
+  verdict = "pending",
+  className,
+  ...props
+}) {
+  const meta = VERDICT_META[verdict];
+  const spec = formatSpec(lo, hi, unit);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      "data-slot": "measurement-row",
+      className: cn(
+        "flex min-h-[3.5rem] w-full items-center gap-[1rem] rounded-md border bg-card px-[1rem] py-[0.5rem]",
+        verdict === "fail" && "border-red-500/50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "min-w-[6rem] shrink-0 text-[1rem] font-medium", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "font-mono text-[1.5rem] font-semibold tabular-nums", children: [
+          value ?? "--",
+          unit ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ml-[0.375rem] text-[1rem] font-normal text-muted-foreground", children: unit }) : null
+        ] }),
+        spec ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ml-auto hidden shrink-0 font-mono text-[0.875rem] text-muted-foreground tabular-nums sm:inline", children: spec }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "span",
+          {
+            className: cn(
+              "inline-flex min-w-[5rem] shrink-0 items-center justify-center rounded-md border px-[0.625rem] py-[0.375rem] text-[0.9375rem] font-semibold",
+              !spec && "ml-auto",
+              meta.className
+            ),
+            children: meta.text
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/primary-action.tsx
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var primaryActionVariants = (0, import_class_variance_authority4.cva)("w-full font-semibold", {
+  variants: {
+    size: {
+      lg: "h-[3rem] rounded-lg px-[1.5rem] text-[1.25rem]",
+      xl: "h-[4.5rem] rounded-lg px-[2rem] text-[1.5rem]"
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+function PrimaryAction({
+  className,
+  size,
+  destructive = false,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "button",
+    {
+      "data-slot": "primary-action",
+      className: cn(
+        buttonVariants({ variant: destructive ? "destructive" : "default" }),
+        primaryActionVariants({ size }),
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/scan-input.tsx
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ScanInput({
+  label,
+  value,
+  onChange,
+  onSubmit,
+  className,
+  disabled,
+  ...props
+}) {
+  const inputRef = React2.useRef(null);
+  const handleKeyDown = (e) => {
+    if (e.key !== "Enter") return;
+    const trimmed = value.trim();
+    if (trimmed === "") return;
+    onSubmit(trimmed);
+    inputRef.current?.select();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex w-full flex-col gap-[0.375rem]", children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[0.875rem] font-medium text-muted-foreground", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        "data-slot": "scan-input",
+        type: "text",
+        autoComplete: "off",
+        spellCheck: false,
+        value,
+        disabled,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        className: cn(
+          "h-[2.75rem] w-full rounded-md border bg-background px-[0.875rem] font-mono text-[1.125rem] tracking-wide",
+          "outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50",
+          "disabled:pointer-events-none disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  MeasurementRow,
+  PrimaryAction,
+  ScanInput,
+  StationStatePanel,
+  StepRunner,
+  badgeVariants,
+  buttonVariants,
+  cn,
+  primaryActionVariants,
+  stationStatePanelVariants
+});

package/dist/index.d.cts

@@ -0,0 +1,117 @@
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+
+declare function Card({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+
+/** 一次步骤运行所解析出的最小结果结构（StepResult 的子集）。 */
+interface StepRunResult {
+    ok: boolean;
+    stepKey: string;
+    measurements?: Record<string, unknown>;
+    error?: string;
+}
+interface StepDef {
+    key: string;
+    label: string;
+    description?: string;
+    /** 执行该步骤；解析为其结果（通常通过一次 API-Bridge 调用得到）。 */
+    run: () => Promise<StepRunResult>;
+}
+/**
+ * 通用的测试工位步骤运行器：一排步骤按钮 + 一个滚动的 PASS/FAIL 结果列表。
+ * 由插件提供具体步骤；每个 `run()` 通常是一次进入插件 runtime 的 API-Bridge 调用。
+ */
+declare function StepRunner({ steps, emptyHint, }: {
+    steps: StepDef[];
+    emptyHint?: string;
+}): React.JSX.Element;
+
+/**
+ * 工位大状态面板：操作员在 2–3 米外一眼可读的当前工位状态。
+ * 颜色永远配合文字（不单独用颜色传递信息）；全部 rem 尺寸，随根字号缩放。
+ */
+type StationState = "idle" | "running" | "pass" | "fail" | "fault";
+declare const panelVariants: (props?: ({
+    state?: "idle" | "running" | "pass" | "fail" | "fault" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface StationStatePanelProps extends Omit<React.ComponentProps<"div">, "children">, VariantProps<typeof panelVariants> {
+    state: StationState;
+    /** 覆盖默认状态词（如 FAIL 时显示失败项名）。 */
+    title?: string;
+    /** 覆盖默认说明（如下一步操作指令）。 */
+    detail?: string;
+}
+declare function StationStatePanel({ state, title, detail, className, ...props }: StationStatePanelProps): React.JSX.Element;
+
+/**
+ * 测量结果行：实测值 + 单位 + 规格上下限 + 结论。
+ * 比单行 "EVM Error" 有用：超限时操作员能直接看到实测值与规格的差距。
+ * 数值使用 tabular-nums 保证逐帧刷新时不跳动；全部 rem 尺寸。
+ */
+type MeasurementVerdict = "pass" | "fail" | "pending";
+interface MeasurementRowProps extends Omit<React.ComponentProps<"div">, "children"> {
+    label: string;
+    /** 实测值；null 表示尚未测得（显示占位）。 */
+    value: number | string | null;
+    unit?: string;
+    /** 规格下限/上限（缺省表示单边或无规格）。 */
+    lo?: number;
+    hi?: number;
+    verdict?: MeasurementVerdict;
+}
+declare function MeasurementRow({ label, value, unit, lo, hi, verdict, className, ...props }: MeasurementRowProps): React.JSX.Element;
+
+/**
+ * 产线主操作按钮：每个工位状态只保留一个主动作。
+ * lg = 3rem 高（高频主操作最小推荐），xl = 4.5rem（超大工位/厚手套）。
+ * 默认全宽；全部 rem 尺寸，随根字号（校准基准 × 模式系数）缩放。
+ */
+declare const primaryActionVariants: (props?: ({
+    size?: "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PrimaryActionProps extends React.ComponentProps<"button">, VariantProps<typeof primaryActionVariants> {
+    /** 危险/终止类动作（红色）。 */
+    destructive?: boolean;
+}
+declare function PrimaryAction({ className, size, destructive, ...props }: PrimaryActionProps): React.JSX.Element;
+
+/**
+ * 条码扫描输入：产线流程的起点。
+ * - 2.75rem 最小触摸高度（校准后 ≈11.6mm 物理高度）；
+ * - Enter 提交后全选，扫码枪连续扫码无需手动清空；
+ * - mono 字体 + 大字号，SN 逐字符可核对。
+ */
+interface ScanInputProps extends Omit<React.ComponentProps<"input">, "onSubmit" | "onChange" | "value"> {
+    label?: string;
+    value: string;
+    onChange: (value: string) => void;
+    /** Enter（扫码枪回车后缀）触发；空值不触发。 */
+    onSubmit: (value: string) => void;
+}
+declare function ScanInput({ label, value, onChange, onSubmit, className, disabled, ...props }: ScanInputProps): React.JSX.Element;
+
+export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, MeasurementRow, type MeasurementRowProps, type MeasurementVerdict, PrimaryAction, type PrimaryActionProps, ScanInput, type ScanInputProps, type StationState, StationStatePanel, type StationStatePanelProps, type StepDef, type StepRunResult, StepRunner, badgeVariants, buttonVariants, cn, primaryActionVariants, panelVariants as stationStatePanelVariants };

package/dist/index.d.ts

@@ -0,0 +1,117 @@
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+
+declare function Card({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+
+/** 一次步骤运行所解析出的最小结果结构（StepResult 的子集）。 */
+interface StepRunResult {
+    ok: boolean;
+    stepKey: string;
+    measurements?: Record<string, unknown>;
+    error?: string;
+}
+interface StepDef {
+    key: string;
+    label: string;
+    description?: string;
+    /** 执行该步骤；解析为其结果（通常通过一次 API-Bridge 调用得到）。 */
+    run: () => Promise<StepRunResult>;
+}
+/**
+ * 通用的测试工位步骤运行器：一排步骤按钮 + 一个滚动的 PASS/FAIL 结果列表。
+ * 由插件提供具体步骤；每个 `run()` 通常是一次进入插件 runtime 的 API-Bridge 调用。
+ */
+declare function StepRunner({ steps, emptyHint, }: {
+    steps: StepDef[];
+    emptyHint?: string;
+}): React.JSX.Element;
+
+/**
+ * 工位大状态面板：操作员在 2–3 米外一眼可读的当前工位状态。
+ * 颜色永远配合文字（不单独用颜色传递信息）；全部 rem 尺寸，随根字号缩放。
+ */
+type StationState = "idle" | "running" | "pass" | "fail" | "fault";
+declare const panelVariants: (props?: ({
+    state?: "idle" | "running" | "pass" | "fail" | "fault" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface StationStatePanelProps extends Omit<React.ComponentProps<"div">, "children">, VariantProps<typeof panelVariants> {
+    state: StationState;
+    /** 覆盖默认状态词（如 FAIL 时显示失败项名）。 */
+    title?: string;
+    /** 覆盖默认说明（如下一步操作指令）。 */
+    detail?: string;
+}
+declare function StationStatePanel({ state, title, detail, className, ...props }: StationStatePanelProps): React.JSX.Element;
+
+/**
+ * 测量结果行：实测值 + 单位 + 规格上下限 + 结论。
+ * 比单行 "EVM Error" 有用：超限时操作员能直接看到实测值与规格的差距。
+ * 数值使用 tabular-nums 保证逐帧刷新时不跳动；全部 rem 尺寸。
+ */
+type MeasurementVerdict = "pass" | "fail" | "pending";
+interface MeasurementRowProps extends Omit<React.ComponentProps<"div">, "children"> {
+    label: string;
+    /** 实测值；null 表示尚未测得（显示占位）。 */
+    value: number | string | null;
+    unit?: string;
+    /** 规格下限/上限（缺省表示单边或无规格）。 */
+    lo?: number;
+    hi?: number;
+    verdict?: MeasurementVerdict;
+}
+declare function MeasurementRow({ label, value, unit, lo, hi, verdict, className, ...props }: MeasurementRowProps): React.JSX.Element;
+
+/**
+ * 产线主操作按钮：每个工位状态只保留一个主动作。
+ * lg = 3rem 高（高频主操作最小推荐），xl = 4.5rem（超大工位/厚手套）。
+ * 默认全宽；全部 rem 尺寸，随根字号（校准基准 × 模式系数）缩放。
+ */
+declare const primaryActionVariants: (props?: ({
+    size?: "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PrimaryActionProps extends React.ComponentProps<"button">, VariantProps<typeof primaryActionVariants> {
+    /** 危险/终止类动作（红色）。 */
+    destructive?: boolean;
+}
+declare function PrimaryAction({ className, size, destructive, ...props }: PrimaryActionProps): React.JSX.Element;
+
+/**
+ * 条码扫描输入：产线流程的起点。
+ * - 2.75rem 最小触摸高度（校准后 ≈11.6mm 物理高度）；
+ * - Enter 提交后全选，扫码枪连续扫码无需手动清空；
+ * - mono 字体 + 大字号，SN 逐字符可核对。
+ */
+interface ScanInputProps extends Omit<React.ComponentProps<"input">, "onSubmit" | "onChange" | "value"> {
+    label?: string;
+    value: string;
+    onChange: (value: string) => void;
+    /** Enter（扫码枪回车后缀）触发；空值不触发。 */
+    onSubmit: (value: string) => void;
+}
+declare function ScanInput({ label, value, onChange, onSubmit, className, disabled, ...props }: ScanInputProps): React.JSX.Element;
+
+export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, MeasurementRow, type MeasurementRowProps, type MeasurementVerdict, PrimaryAction, type PrimaryActionProps, ScanInput, type ScanInputProps, type StationState, StationStatePanel, type StationStatePanelProps, type StepDef, type StepRunResult, StepRunner, badgeVariants, buttonVariants, cn, primaryActionVariants, panelVariants as stationStatePanelVariants };

package/dist/index.js

@@ -0,0 +1,439 @@
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/card.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx2("div", { "data-slot": "card-content", className: cn("px-6", className), ...props });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+      ...props
+    }
+  );
+}
+
+// src/components/badge.tsx
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var badgeVariants = cva2(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        success: "border-transparent bg-emerald-600 text-white"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2 : "span";
+  return /* @__PURE__ */ jsx3(Comp, { "data-slot": "badge", className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/components/step-runner.tsx
+import * as React from "react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function StepRunner({
+  steps,
+  emptyHint
+}) {
+  const [records, setRecords] = React.useState([]);
+  const [busy, setBusy] = React.useState(null);
+  const onRun = async (step) => {
+    setBusy(step.key);
+    try {
+      const r = await step.run();
+      setRecords((prev) => [{ ...r, ts: (/* @__PURE__ */ new Date()).toISOString() }, ...prev].slice(0, 50));
+    } catch (e) {
+      setRecords(
+        (prev) => [
+          {
+            ok: false,
+            stepKey: step.key,
+            error: e instanceof Error ? e.message : String(e),
+            ts: (/* @__PURE__ */ new Date()).toISOString()
+          },
+          ...prev
+        ].slice(0, 50)
+      );
+    } finally {
+      setBusy(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-2", children: steps.map((s) => /* @__PURE__ */ jsx4(
+      Button,
+      {
+        variant: "secondary",
+        size: "sm",
+        disabled: busy !== null,
+        title: s.description,
+        onClick: () => void onRun(s),
+        children: busy === s.key ? "\u8FD0\u884C\u4E2D\u2026" : s.label
+      },
+      s.key
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      records.length === 0 && /* @__PURE__ */ jsx4("div", { className: "rounded-md bg-muted/30 px-2 py-3 text-center text-xs text-muted-foreground", children: emptyHint ?? "\u70B9\u51FB\u4E0A\u65B9\u6309\u94AE\u6267\u884C\u6D4B\u8BD5\u6B65\u9AA4\u3002" }),
+      records.map((r, i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "rounded-md border p-2 text-xs",
+            r.ok ? "border-emerald-500/30 bg-emerald-500/5" : "border-destructive/30 bg-destructive/5"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  className: cn(
+                    "rounded px-1.5 py-0.5 text-[10px] font-semibold",
+                    r.ok ? "bg-emerald-500/20 text-emerald-400" : "bg-destructive/20 text-destructive"
+                  ),
+                  children: r.ok ? "PASS" : "FAIL"
+                }
+              ),
+              /* @__PURE__ */ jsx4("span", { className: "font-medium", children: r.stepKey }),
+              /* @__PURE__ */ jsx4("span", { className: "ml-auto font-mono text-[10px] text-muted-foreground", children: r.ts.slice(11, 19) })
+            ] }),
+            r.measurements && Object.keys(r.measurements).length > 0 && /* @__PURE__ */ jsx4("pre", { className: "mt-1.5 overflow-x-auto rounded bg-muted/50 p-1.5 font-mono text-[10px]", children: JSON.stringify(r.measurements) }),
+            r.error && /* @__PURE__ */ jsx4("div", { className: "mt-1 text-destructive", children: r.error })
+          ]
+        },
+        i
+      ))
+    ] })
+  ] });
+}
+
+// src/components/station-state-panel.tsx
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var STATE_META = {
+  idle: { word: "\u5F85\u673A", hint: "\u7B49\u5F85\u626B\u7801" },
+  running: { word: "\u6D4B\u8BD5\u4E2D", hint: "\u8BF7\u52FF\u79FB\u52A8\u4EA7\u54C1" },
+  pass: { word: "\u2713 PASS", hint: "\u5408\u683C" },
+  fail: { word: "\u2715 FAIL", hint: "\u4E0D\u5408\u683C" },
+  fault: { word: "\u26A0 FAULT", hint: "\u5DE5\u4F4D\u6545\u969C" }
+};
+var panelVariants = cva3(
+  "flex min-h-[12rem] w-full flex-col items-center justify-center gap-[0.5rem] rounded-lg border-2 px-[1.5rem] py-[2rem] text-center",
+  {
+    variants: {
+      state: {
+        idle: "border-border bg-card text-muted-foreground",
+        running: "border-sky-500/60 bg-sky-500/10 text-sky-400",
+        pass: "border-emerald-500/60 bg-emerald-500/10 text-emerald-400",
+        fail: "border-red-500/60 bg-red-500/10 text-red-400",
+        fault: "border-amber-500/60 bg-amber-500/10 text-amber-400"
+      }
+    }
+  }
+);
+function StationStatePanel({
+  state,
+  title,
+  detail,
+  className,
+  ...props
+}) {
+  const meta = STATE_META[state];
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-slot": "station-state-panel",
+      role: "status",
+      "aria-live": "polite",
+      className: cn(panelVariants({ state }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: cn(
+              "text-[3.75rem] leading-none font-bold tracking-tight",
+              state === "running" && "animate-pulse"
+            ),
+            children: title ?? meta.word
+          }
+        ),
+        /* @__PURE__ */ jsx5("span", { className: "text-[1.125rem] font-medium opacity-80", children: detail ?? meta.hint })
+      ]
+    }
+  );
+}
+
+// src/components/measurement-row.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var VERDICT_META = {
+  pass: { text: "\u2713 PASS", className: "border-emerald-500/50 bg-emerald-500/10 text-emerald-400" },
+  fail: { text: "\u2715 FAIL", className: "border-red-500/50 bg-red-500/10 text-red-400" },
+  pending: { text: "\u2026", className: "border-border bg-secondary text-muted-foreground" }
+};
+function formatSpec(lo, hi, unit) {
+  if (lo === void 0 && hi === void 0) return "";
+  const u = unit ? ` ${unit}` : "";
+  if (lo !== void 0 && hi !== void 0) return `\u89C4\u683C\uFF1A${lo} ~ ${hi}${u}`;
+  if (lo !== void 0) return `\u89C4\u683C\uFF1A\u2265 ${lo}${u}`;
+  return `\u89C4\u683C\uFF1A\u2264 ${hi}${u}`;
+}
+function MeasurementRow({
+  label,
+  value,
+  unit,
+  lo,
+  hi,
+  verdict = "pending",
+  className,
+  ...props
+}) {
+  const meta = VERDICT_META[verdict];
+  const spec = formatSpec(lo, hi, unit);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-slot": "measurement-row",
+      className: cn(
+        "flex min-h-[3.5rem] w-full items-center gap-[1rem] rounded-md border bg-card px-[1rem] py-[0.5rem]",
+        verdict === "fail" && "border-red-500/50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx6("span", { className: "min-w-[6rem] shrink-0 text-[1rem] font-medium", children: label }),
+        /* @__PURE__ */ jsxs3("span", { className: "font-mono text-[1.5rem] font-semibold tabular-nums", children: [
+          value ?? "--",
+          unit ? /* @__PURE__ */ jsx6("span", { className: "ml-[0.375rem] text-[1rem] font-normal text-muted-foreground", children: unit }) : null
+        ] }),
+        spec ? /* @__PURE__ */ jsx6("span", { className: "ml-auto hidden shrink-0 font-mono text-[0.875rem] text-muted-foreground tabular-nums sm:inline", children: spec }) : null,
+        /* @__PURE__ */ jsx6(
+          "span",
+          {
+            className: cn(
+              "inline-flex min-w-[5rem] shrink-0 items-center justify-center rounded-md border px-[0.625rem] py-[0.375rem] text-[0.9375rem] font-semibold",
+              !spec && "ml-auto",
+              meta.className
+            ),
+            children: meta.text
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/primary-action.tsx
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var primaryActionVariants = cva4("w-full font-semibold", {
+  variants: {
+    size: {
+      lg: "h-[3rem] rounded-lg px-[1.5rem] text-[1.25rem]",
+      xl: "h-[4.5rem] rounded-lg px-[2rem] text-[1.5rem]"
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+function PrimaryAction({
+  className,
+  size,
+  destructive = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      "data-slot": "primary-action",
+      className: cn(
+        buttonVariants({ variant: destructive ? "destructive" : "default" }),
+        primaryActionVariants({ size }),
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/scan-input.tsx
+import * as React2 from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function ScanInput({
+  label,
+  value,
+  onChange,
+  onSubmit,
+  className,
+  disabled,
+  ...props
+}) {
+  const inputRef = React2.useRef(null);
+  const handleKeyDown = (e) => {
+    if (e.key !== "Enter") return;
+    const trimmed = value.trim();
+    if (trimmed === "") return;
+    onSubmit(trimmed);
+    inputRef.current?.select();
+  };
+  return /* @__PURE__ */ jsxs4("label", { className: "flex w-full flex-col gap-[0.375rem]", children: [
+    label ? /* @__PURE__ */ jsx8("span", { className: "text-[0.875rem] font-medium text-muted-foreground", children: label }) : null,
+    /* @__PURE__ */ jsx8(
+      "input",
+      {
+        ref: inputRef,
+        "data-slot": "scan-input",
+        type: "text",
+        autoComplete: "off",
+        spellCheck: false,
+        value,
+        disabled,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        className: cn(
+          "h-[2.75rem] w-full rounded-md border bg-background px-[0.875rem] font-mono text-[1.125rem] tracking-wide",
+          "outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50",
+          "disabled:pointer-events-none disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+export {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  MeasurementRow,
+  PrimaryAction,
+  ScanInput,
+  StationStatePanel,
+  StepRunner,
+  badgeVariants,
+  buttonVariants,
+  cn,
+  primaryActionVariants,
+  panelVariants as stationStatePanelVariants
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@international-iot-association/ui",
+  "version": "1.0.0-rc.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/International-IoT-Association/MES.git",
+    "directory": "electron-station-plugins/packages/ui"
+  },
+  "description": "Shared shadcn/ui (new-york, zinc) components + dark theme for station plugin UIs.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "files": [
+    "dist",
+    "src/styles.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist .turbo"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@international-iot-association/tsconfig": "1.0.0-rc.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tsup": "^8.4.0",
+    "typescript": "^5.9.3"
+  },
+  "x-internal-version": "1.0.0",
+  "x-source-revision": "410a2f3b85ef03b678f04f22ea0a47718f5ddae1"
+}

package/src/styles.css

@@ -0,0 +1,142 @@
+/*
+  @international-iot-association/ui 共享主题 —— shadcn/ui “zinc”（Tailwind v4 / OKLCH），与工位外壳完全一致，
+  让插件 UI 与宿主观感统一。在插件的 CSS 入口中引入：
+
+    @import "tailwindcss";
+    @import "@international-iot-association/ui/styles.css";
+    @source "../../node_modules/@international-iot-association/ui/dist";   (扫描共享组件用到的类)
+
+  插件 UI 运行在带 <html class="dark"> 的沙箱 iframe 中。
+*/
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --scrollbar-size: 10px;
+  --scrollbar-thumb: oklch(0.552 0.016 285.938 / 32%);
+  --scrollbar-thumb-hover: oklch(0.552 0.016 285.938 / 56%);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --scrollbar-thumb: oklch(0.705 0.015 286.067 / 32%);
+  --scrollbar-thumb-hover: oklch(0.705 0.015 286.067 / 58%);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+    scrollbar-width: thin;
+  }
+  html,
+  body,
+  #root {
+    height: 100%;
+    margin: 0;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
+    font-size: 13px;
+    -webkit-font-smoothing: antialiased;
+  }
+  *::-webkit-scrollbar {
+    width: var(--scrollbar-size);
+    height: var(--scrollbar-size);
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    min-height: 2rem;
+    border: 3px solid transparent;
+    border-radius: 999px;
+    background: var(--scrollbar-thumb);
+    background-clip: content-box;
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover);
+    background-clip: content-box;
+  }
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}