dsh-plugin-core-demo 0.1.2 → 0.1.4

package/README.md

@@ -38,6 +38,6 @@ dsh plugin --profile web add dsh-plugin-core-demo
 - client 侧只导出 `apply`；依赖一律 `ctx.inject([...], cb)` 内等待（顶层导出 `inject` 会卡死宿主启动）。
 - 三块注册（`sidebar.panellist` / `main` / `settings.plugin.item`）各自 `ctx.inject`、自成一块；
   `settings.plugin.item` 与 `main` 的 key 必须 = 包名（宿主机制）。
-- 变量前缀用本插件独有的 `dshpc`，**不占用 `--tdt-*`**（宿主里别的插件在用）；
-  展示代码里的 `--tdt-*` 由 `src/client/token-alias.ts` 那层别名接过去。
+- 变量前缀统一用 `dshpc`，**完全不碰 `--tdt-*` / `--dsw-*` / `--dsh-*`**（兄弟插件与宿主在用）；
+  展示代码直接用 `--dshpc-*`。已删除旧的 `token-alias` 别名层——那层会往 `body` 写 `--tdt-*`，把兄弟插件的 token 抢过来。
 - 零运行时依赖：不引内部 `@deepseek-ai/*`，故不声明 schemastery Config。

package/dist/client.js

@@ -889,7 +889,7 @@ var CONTROLS_CSS = [
   CARD_CSS,
   CHIP_CSS
 ].join("\n");
-var current = createStyleKit({ id: "dsh-plugin-core-ui", prefix: "dsh" });
+var current = createStyleKit({ id: "dsh-plugin-core-ui", prefix: "dshpc" });
 function setStyleKit(kit) {
   current = kit;
 }
@@ -1046,6 +1046,12 @@ var DICT = {
   }
 };
 var current2 = "zh";
+function setLocale(locale) {
+  current2 = locale;
+}
+function getLocale() {
+  return current2;
+}
 function t(key, vars) {
   const template = DICT[current2][key] ?? DICT.zh[key] ?? key;
   if (vars === void 0)
@@ -1742,23 +1748,267 @@ function NumberInput(props) {
   );
 }
 
-// demo/sections/index.tsx
+// dist/utils/date.js
+function pad2(value) {
+  return String(value).padStart(2, "0");
+}
+var FALLBACK = "\u2014";
+function formatDateTime(iso, opts) {
+  const ms = Date.parse(iso);
+  if (Number.isNaN(ms))
+    return opts?.fallback ?? iso;
+  const d = new Date(ms);
+  const base = `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())} ${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+  return opts?.seconds === true ? `${base}:${pad2(d.getSeconds())}` : base;
+}
+function formatYmd(iso, opts) {
+  const ms = Date.parse(iso);
+  if (Number.isNaN(ms))
+    return opts?.fallback ?? FALLBACK;
+  const d = new Date(ms);
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+}
+function formatClock(iso, opts) {
+  const fb = opts?.fallback ?? "-";
+  if (iso === null || iso === void 0 || iso === "")
+    return fb;
+  const ms = Date.parse(iso);
+  if (Number.isNaN(ms))
+    return fb;
+  const d = new Date(ms);
+  return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
+}
+function formatDurationHms(ms) {
+  if (!Number.isFinite(ms) || ms < 0)
+    return "-";
+  const totalSec = Math.round(ms / 1e3);
+  const h31 = Math.floor(totalSec / 3600);
+  const m = Math.floor(totalSec % 3600 / 60);
+  const s = totalSec % 60;
+  return h31 > 0 ? `${h31}:${pad2(m)}:${pad2(s)}` : `${pad2(m)}:${pad2(s)}`;
+}
+function sameCalendarDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function relativePast(iso, nowMs, translate) {
+  const tt = translate ?? t;
+  const diff = nowMs - Date.parse(iso);
+  if (Number.isNaN(diff) || !(diff >= 0))
+    return tt("relNow");
+  if (diff < 6e4)
+    return tt("relJustNow");
+  const minutes = Math.floor(diff / 6e4);
+  if (minutes < 60)
+    return tt("relMinutesAgo", { n: minutes });
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24)
+    return tt("relHoursAgo", { n: hours });
+  const days = Math.floor(hours / 24);
+  if (days < 7)
+    return tt("relDaysAgo", { n: days });
+  if (days < 30)
+    return tt("relWeeksAgo", { n: Math.floor(days / 7) });
+  const months = Math.floor(days / 30);
+  if (months < 12)
+    return tt("relMonthsAgo", { n: months });
+  return tt("relYearsAgo", { n: Math.floor(days / 365) });
+}
+function relativeFuture(iso, nowMs, translate) {
+  const tt = translate ?? t;
+  const diff = Date.parse(iso) - nowMs;
+  if (Number.isNaN(diff))
+    return formatYmd(iso);
+  if (diff <= 0)
+    return tt("relNow");
+  if (diff < 6e4)
+    return tt("relInJustNow");
+  const minutes = Math.floor(diff / 6e4);
+  if (minutes < 60)
+    return tt("relInMinutes", { n: minutes });
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24)
+    return tt("relInHours", { n: hours });
+  const days = Math.floor(hours / 24);
+  if (days < 30)
+    return tt("relInDays", { n: days });
+  const months = Math.floor(days / 30);
+  if (months < 12)
+    return tt("relInMonths", { n: months });
+  return tt("relInYears", { n: Math.floor(days / 365) });
+}
+function formatRange(fromIso, toIso, opts) {
+  const from = Date.parse(fromIso);
+  const to = Date.parse(toIso);
+  if (Number.isNaN(from) || Number.isNaN(to))
+    return FALLBACK;
+  const a = new Date(from);
+  const b = new Date(to);
+  const clock = (d) => opts?.seconds === true ? `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}` : `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+  if (sameCalendarDay(a, b))
+    return `${clock(a)} \u2013 ${clock(b)}`;
+  const day = (d) => `${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+  return `${day(a)} ${clock(a)} \u2013 ${day(b)} ${clock(b)}`;
+}
+
+// dist/utils/number.js
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes <= 0)
+    return "\u2014";
+  if (bytes < 1024)
+    return `${bytes} B`;
+  const units = ["KB", "MB", "GB", "TB"];
+  let value = bytes / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit++;
+  }
+  return `${value >= 10 ? String(Math.round(value)) : value.toFixed(1)} ${units[unit]}`;
+}
+
+// dist/utils/path.js
+var IMAGE_EXT = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  webp: "image/webp",
+  bmp: "image/bmp",
+  svg: "image/svg+xml",
+  ico: "image/x-icon"
+};
+function mimeOf(path) {
+  const ext = extOf(path);
+  return ext === "" ? void 0 : IMAGE_EXT[ext];
+}
+function extOf(path) {
+  const name = path.slice(path.lastIndexOf("/") + 1);
+  const dot = name.lastIndexOf(".");
+  return dot <= 0 ? "" : name.slice(dot + 1).toLowerCase();
+}
+function crumbsOf(path) {
+  return path.split("/").filter((s) => s !== "");
+}
+function parentOf(path) {
+  const cut = path.lastIndexOf("/");
+  return cut < 0 ? "" : path.slice(0, cut);
+}
+function joinPath(dir, name) {
+  return dir === "" ? name : `${dir}/${name}`;
+}
+
+// packages/demo/src/sections/index.tsx
 var import_react30 = require("react");
 
-// demo/sections/design.tsx
+// packages/demo/src/sections/design.tsx
 var import_react19 = require("react");
+
+// packages/demo/src/i18n.ts
+var DICT2 = {
+  zh: {
+    sessionHint: "\u4E09\u79CD\u627F\u8F7D\uFF1Amodal / sidebar / page\uFF1Bsource \u662F mock \u7684\uFF1BrenderMessage \u53EF\u63A5\u7BA1\u5BCC\u5185\u5BB9",
+    explorerHint: "\u9762\u5305\u5C51 + \u76EE\u5F55\u6811 + \u9884\u89C8\uFF1BworkspaceFiles \u662F mock \u7684\uFF08\u771F\u5B9E\u63D2\u4EF6\u4ECE ctx \u53D6\u51FA\u540E\u6CE8\u5165\uFF09",
+    utilsHint: "\u89E3\u6790\u5931\u8D25\u4E0D\u629B\u9519\u3001\u7ED9\u515C\u5E95\u3001\u4E0D\u7F16\u9020\uFF1B\u6240\u6709\u51FD\u6570\u65E0 UI \u4F9D\u8D56",
+    displayCardHint: "\u6392\u7248\u5B8C\u5168\u7531\u8C03\u7528\u65B9\u51B3\u5B9A\u2014\u2014\u771F\u5B9E\u63D2\u4EF6\u7684\u5F62\u6001\uFF1A\u6807\u9898\u884C + \u53F3\u4FA7\u5143\u4FE1\u606F + chips \u884C\uFF1Baccent \u4E94\u6863\u89C1\u4E0B\u65B9\u901F\u89C8",
+    displayStripHint: "\u540C\u4E00\u4E2A\u8272\u6761\u673A\u5236\uFF0C\u5916\u89C2\u662F\u901A\u9AD8\u8D34\u9876\u5230\u5E95\u2014\u2014\u771F\u5B9E\u63D2\u4EF6\u7684\u5F62\u6001\uFF1A\u6807\u9898 + \u5143\u4FE1\u606F\u884C + \u53F3\u4FA7\u65F6\u95F4/\u64CD\u4F5C",
+    displayChipHint: "chip \u53EA\u6709\u300C\u80F6\u56CA\u6807\u7B7E\u300D\u4E00\u5957\u76AE\u80A4\uFF1A\u5BBD\u5EA6\u6309\u6587\u5B57\u6491\u5F00\u3001\u4E0D\u6362\u884C\uFF1B\u6700\u540E\u4E00\u9897\u662F\u957F\u6587\u5B57\uFF0C\u82E5\u88AB\u538B\u6210 28px \u7AD6\u6392\u5C31\u662F\u53C8\u6DF7\u8FDB\u4E86\u56FE\u6807\u6309\u94AE\u7684\u5B9A\u5BBD\u89C4\u5219",
+    feedbackModalHint: "\u81EA\u7ED8 overlay\uFF08\u4E0D\u7528 portal\uFF09\uFF1B\u70B9\u906E\u7F69 / Esc / \u2715 \u90FD\u80FD\u5173\u3002\u6807\u9898\u680F\u7684 \u2715 \u662F 24\xD724 \u56FE\u6807\u4F4D\uFF0C\u4E0D\u8BE5\u51FA\u73B0\u8FB9\u6846\u6216 120px \u5BBD\u7684\u5E95\u8272\u5757",
+    feedbackToastHint: "\u547D\u4EE4\u5F0F showToast\uFF0C\u4E0D\u8981\u6C42\u6302\u7EC4\u4EF6",
+    pickerHint: "\u5355\u9009 / \u591A\u9009 / \u4E0A\u9650 / \u641C\u7D22 / \u5206\u7EC4 / \u7A7A\u6001 / \u964D\u7EA7\u2014\u2014\u5168\u90E8\u53EF\u7528 props \u63A7\u5236",
+    modelPickerHint: "flat \u4E00\u4E2A\u4E0B\u62C9 / cascade \u5148\u9009\u4F9B\u5E94\u5546\u518D\u9009\u6A21\u578B\u2014\u2014\u540C\u4E00\u4EFD\u6570\u636E\u4E24\u79CD\u5F62\u6001",
+    workspacePickerHint: "\u6570\u636E\u8C03\u7528\u65B9\u7ED9\uFF08\u8981\u8DE8 host\u2194client \u8FB9\u754C\uFF0C\u7EC4\u4EF6\u53D6\u4E0D\u5230\uFF09",
+    buttonHint: "variant \u56DB\u6863 \xD7 size \u4E09\u6863",
+    inputHint: "Input / PrefixedInput / NumberInput / Textarea\uFF0C\u90FD\u652F\u6301 error \u63CF\u7EA2\uFF1B\u884C\u5C3E\u53EF\u6302 FieldHint \u95EE\u53F7\u63D0\u793A",
+    checkboxHint: "\u5916\u89C2\u5BF9\u9F50\u771F\u5B9E\u63D2\u4EF6\uFF1A\u7070\u5E95 inset\uFF08\u65E0\u5916\u63CF\u8FB9\uFF09\uFF1B\u5E26\u63CF\u8FB9\u7684 default \u4EC5\u4F9B\u7279\u6B8A\u573A\u5408\uFF0C\u89C1\u4E0B",
+    designTokenHint: "\u989C\u8272\u5168\u90E8\u6765\u81EA design \u7684 token\uFF1B\u5207\u6362\u53F3\u4E0A\u89D2\u660E\u6697\uFF0C\u4E0B\u9762\u4F1A\u8DDF\u7740\u53D8",
+    designInjectHint: "\u63A7\u4EF6\u6E32\u67D3\u524D\u8C03\u4E00\u6B21 setStyleKit + ensureControls\uFF0Ctoken \u4E0E\u63A7\u4EF6 CSS \u7531 kit \u6CE8\u5165 <head>",
+    fieldHintDate: "\u4EFB\u52A1\u81EA\u8BE5\u65E5\u8D77\u5F00\u59CB\u6267\u884C\u3002\u53EF\u63D0\u524D\u521B\u5EFA\u4EFB\u52A1\uFF0C\u81F3\u8BE5\u65E5\u81EA\u52A8\u5F00\u8DD1\uFF1B\u300C\u6BCF N \u5468\u300D\u4EA6\u81EA\u8BE5\u65E5\u8D77\u7B97\u9996\u5468\u3002",
+    loadingNote: "Loading \u662F\u8D34\u5230\u4E3B\u5BB9\u5668\u53F3\u4E0B\u89D2\u7684\u6307\u793A\u5668\uFF08anchorId \u9ED8\u8BA4 dsh-tdt-main\uFF09\uFF0C\u6B64\u5904\u4E0D\u6E32\u67D3\u4EE5\u514D\u906E\u6321\u3002",
+    secDesign: "\u8BBE\u8BA1\u57FA\u7840",
+    secButtons: "\u6309\u94AE\u4E0E\u8F93\u5165",
+    secPickers: "\u9009\u62E9\u5668",
+    secFeedback: "\u5F39\u7A97\u4E0E\u53CD\u9988",
+    secDisplay: "\u5361\u7247\u4E0E\u5C55\u793A",
+    secUtils: "\u901A\u7528\u65B9\u6CD5",
+    secExplorer: "\u5DE5\u4F5C\u533A\u6D4F\u89C8",
+    secSession: "\u4F1A\u8BDD\u9884\u89C8",
+    demoTokenPalette: "token \u8272\u677F",
+    demoStyleInject: "\u6837\u5F0F\u6CE8\u5165\u673A\u5236",
+    demoInputFamily: "Input \u5BB6\u65CF",
+    demoUtilsTitle: "\u65E5\u671F / \u5B57\u7B26\u4E32 / \u5B57\u8282",
+    demoCardTitle: "Card\uFF08\u5706\u89D2 + \u8FB9\u6846 + \u77ED\u8272\u6761\uFF09",
+    demoStripTitle: "StripCard\uFF08\u65E0\u8FB9\u6846 + \u901A\u9AD8\u7AD6\u7EBF\uFF09",
+    designInjectNote: "\u672C\u9884\u89C8\u63D2\u4EF6\u81EA\u5DF1\u5C31\u662F\u8FD9\u4E48\u505A\u521D\u59CB\u5316\u7684\u2014\u2014\u9884\u89C8\u4E0E\u771F\u5B9E\u63D2\u4EF6\u8D70\u540C\u4E00\u6761\u8DEF\u3002",
+    pluginTitle: "\u7EC4\u4EF6\u9884\u89C8",
+    pluginCardDesc: "\u6253\u5F00 dsh-plugin-core \u7684\u63A7\u4EF6\u4E0E\u4E1A\u52A1\u7EC4\u4EF6\u5C55\u793A\u9875",
+    pluginCardOpen: "\u6253\u5F00 \u203A"
+  },
+  en: {
+    sessionHint: "Three carriers: modal / sidebar / page; source is mocked; renderMessage can take over rich content",
+    explorerHint: "Breadcrumb + directory tree + preview; workspaceFiles is mocked (a real plugin reads it from ctx and injects)",
+    utilsHint: "No throw on parse failure \u2014 falls back gracefully and never fabricates; all functions are UI-free",
+    displayCardHint: "Layout is entirely up to the caller \u2014 the real-plugin shape: title row + right-side meta + chips row; five accent tiers below",
+    displayStripHint: "Same accent-bar mechanism, but full-height edge-to-edge \u2014 real-plugin shape: title + meta row + right-side time/actions",
+    displayChipHint: "Chip has one pill skin only: width hugs the text, no wrap; the last one is long text \u2014 if squeezed into a 28px vertical stack, the icon-button fixed-width rule crept back in",
+    feedbackModalHint: "Hand-rolled overlay (no portal); click backdrop / Esc / \u2715 all close it. The header \u2715 is a 24\xD724 icon slot \u2014 no border or 120px-wide color block should appear",
+    feedbackToastHint: "Imperative showToast \u2014 no component mounting required",
+    pickerHint: "Single / multi / max / search / grouped / empty / degraded \u2014 all driven by props",
+    modelPickerHint: "flat: one dropdown / cascade: pick provider then model \u2014 same data, two shapes",
+    workspacePickerHint: "Data is supplied by the caller (crosses the host\u2194client boundary; the component cannot fetch it)",
+    buttonHint: "Four variants \xD7 three sizes",
+    inputHint: "Input / PrefixedInput / NumberInput / Textarea, all support error highlighting; a FieldHint question-mark tip can hang at the row end",
+    checkboxHint: "Looks match the real plugin: grey inset background (no outer border); the bordered default is for special cases only, see below",
+    designTokenHint: "All colors come from design tokens; switch light/dark at top-right and these update with it",
+    designInjectHint: "Call setStyleKit + ensureControls once before controls render; the kit injects tokens and control CSS into <head>",
+    fieldHintDate: 'The task runs starting from this date. You can create it ahead of time and it auto-starts on that day; "every N weeks" also counts its first week from this date.',
+    loadingNote: "Loading is an indicator pinned to the bottom-right of the main container (anchorId defaults to dsh-tdt-main); not rendered here to avoid covering content.",
+    secDesign: "Design basics",
+    secButtons: "Buttons & inputs",
+    secPickers: "Pickers",
+    secFeedback: "Modal & feedback",
+    secDisplay: "Cards & display",
+    secUtils: "Utilities",
+    secExplorer: "Workspace browsing",
+    secSession: "Session preview",
+    demoTokenPalette: "Token palette",
+    demoStyleInject: "Style injection",
+    demoInputFamily: "Input family",
+    demoUtilsTitle: "Date / String / Bytes",
+    demoCardTitle: "Card (rounded + border + accent bar)",
+    demoStripTitle: "StripCard (borderless + full-height stripe)",
+    designInjectNote: "This preview plugin initializes itself exactly this way \u2014 preview and real plugin take the same path.",
+    pluginTitle: "Component preview",
+    pluginCardDesc: "Open the showcase of dsh-plugin-core controls and business components",
+    pluginCardOpen: "Open \u203A"
+  }
+};
+var boundT;
+function setDemoTranslate(fn) {
+  boundT = fn;
+}
+function t2(key, vars) {
+  if (boundT !== void 0) return boundT(key, vars);
+  const template = DICT2[getLocale()][key] ?? DICT2.zh[key] ?? key;
+  if (vars === void 0) return template;
+  return template.replace(/\{(\w+)\}/g, (whole, name) => {
+    const value = vars[name];
+    return value === void 0 ? whole : String(value);
+  });
+}
+
+// packages/demo/src/sections/design.tsx
 var TOKENS = [
-  { label: "business", cssVar: "--tdt-business" },
-  { label: "success", cssVar: "--tdt-success" },
-  { label: "warning", cssVar: "--tdt-warning" },
-  { label: "danger", cssVar: "--tdt-danger" },
-  { label: "surface-1", cssVar: "--tdt-surface-1" },
-  { label: "surface-2", cssVar: "--tdt-surface-2" },
-  { label: "surface-sunken", cssVar: "--tdt-surface-sunken" },
-  { label: "border", cssVar: "--tdt-border" },
-  { label: "fg", cssVar: "--tdt-fg" },
-  { label: "fg-3", cssVar: "--tdt-fg-3" },
-  { label: "fg-4", cssVar: "--tdt-fg-4" }
+  { label: "business", cssVar: "--dshpc-business" },
+  { label: "success", cssVar: "--dshpc-success" },
+  { label: "warning", cssVar: "--dshpc-warning" },
+  { label: "danger", cssVar: "--dshpc-danger" },
+  { label: "surface-1", cssVar: "--dshpc-surface-1" },
+  { label: "surface-2", cssVar: "--dshpc-surface-2" },
+  { label: "surface-sunken", cssVar: "--dshpc-surface-sunken" },
+  { label: "border", cssVar: "--dshpc-border" },
+  { label: "fg", cssVar: "--dshpc-fg" },
+  { label: "fg-3", cssVar: "--dshpc-fg-3" },
+  { label: "fg-4", cssVar: "--dshpc-fg-4" }
 ];
 function DesignSection() {
   return (0, import_react19.createElement)(
@@ -1766,24 +2016,24 @@ function DesignSection() {
     null,
     (0, import_react19.createElement)(
       Demo,
-      { title: "token \u8272\u677F", hint: "\u989C\u8272\u5168\u90E8\u6765\u81EA design \u7684 token\uFF1B\u5207\u6362\u53F3\u4E0A\u89D2\u660E\u6697\uFF0C\u4E0B\u9762\u4F1A\u8DDF\u7740\u53D8" },
+      { title: t2("demoTokenPalette"), hint: t2("designTokenHint") },
       (0, import_react19.createElement)(
         "div",
         { style: { display: "flex", flexWrap: "wrap", gap: "10px" } },
         TOKENS.map(
-          (t2) => (0, import_react19.createElement)(
+          (t3) => (0, import_react19.createElement)(
             "div",
-            { key: t2.cssVar, style: { width: "104px" } },
+            { key: t3.cssVar, style: { width: "104px" } },
             (0, import_react19.createElement)("div", {
               style: {
                 height: "40px",
                 borderRadius: "6px",
-                background: `var(${t2.cssVar})`,
-                border: "1px solid var(--tdt-border-faint)"
+                background: `var(${t3.cssVar})`,
+                border: "1px solid var(--dshpc-border-faint)"
               }
             }),
-            (0, import_react19.createElement)("div", { style: { fontSize: "11px", marginTop: "4px" } }, t2.label),
-            (0, import_react19.createElement)("div", { style: { fontSize: "10px", color: "var(--tdt-fg-4)" } }, t2.cssVar)
+            (0, import_react19.createElement)("div", { style: { fontSize: "11px", marginTop: "4px" } }, t3.label),
+            (0, import_react19.createElement)("div", { style: { fontSize: "10px", color: "var(--dshpc-fg-4)" } }, t3.cssVar)
           )
         )
       )
@@ -1791,8 +2041,8 @@ function DesignSection() {
     (0, import_react19.createElement)(
       Demo,
       {
-        title: "\u6837\u5F0F\u6CE8\u5165\u673A\u5236",
-        hint: "\u63A7\u4EF6\u6E32\u67D3\u524D\u8C03\u4E00\u6B21 setStyleKit + ensureControls\uFF0Ctoken \u4E0E\u63A7\u4EF6 CSS \u7531 kit \u6CE8\u5165 <head>",
+        title: t2("demoStyleInject"),
+        hint: t2("designInjectHint"),
         code: `import { createStyleKit } from 'dsh-plugin-core/design'
 import { ensureControls, setStyleKit } from 'dsh-plugin-core/ui'
 
@@ -1801,14 +2051,14 @@ ensureControls()`
       },
       (0, import_react19.createElement)(
         "div",
-        { style: { color: "var(--tdt-fg-3)", fontSize: "12px" } },
-        "\u672C\u9884\u89C8\u7AD9\u81EA\u5DF1\u5C31\u662F\u8FD9\u4E48\u505A\u521D\u59CB\u5316\u7684\uFF08\u89C1 demo/main.tsx\uFF09\u2014\u2014\u9884\u89C8\u4E0E\u771F\u5B9E\u63D2\u4EF6\u8D70\u540C\u4E00\u6761\u8DEF\u3002"
+        { style: { color: "var(--dshpc-fg-3)", fontSize: "12px" } },
+        t2("designInjectNote")
       )
     )
   );
 }
 
-// demo/sections/buttons.tsx
+// packages/demo/src/sections/buttons.tsx
 var import_react20 = require("react");
 function ButtonsSection() {
   const [text, setText] = (0, import_react20.useState)("");
@@ -1822,7 +2072,7 @@ function ButtonsSection() {
     null,
     (0, import_react20.createElement)(
       Demo,
-      { title: "Button", hint: "variant \u56DB\u6863 \xD7 size \u4E09\u6863" },
+      { title: "Button", hint: t2("buttonHint") },
       (0, import_react20.createElement)(
         "div",
         { style: { display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" } },
@@ -1837,16 +2087,16 @@ function ButtonsSection() {
     ),
     (0, import_react20.createElement)(
       Demo,
-      { title: "Input \u5BB6\u65CF", hint: "Input / PrefixedInput / NumberInput / Textarea\uFF0C\u90FD\u652F\u6301 error \u63CF\u7EA2\uFF1B\u884C\u5C3E\u53EF\u6302 FieldHint \u95EE\u53F7\u63D0\u793A" },
+      { title: t2("demoInputFamily"), hint: t2("inputHint") },
       (0, import_react20.createElement)(
         "div",
         { style: { display: "flex", flexDirection: "column", gap: "10px", maxWidth: "380px" } },
         (0, import_react20.createElement)(
           "div",
           { style: { display: "flex", alignItems: "center", gap: "6px" } },
-          (0, import_react20.createElement)("span", { style: { color: "var(--tdt-fg-2)", fontSize: "13px", flex: "none" } }, "\u5F00\u59CB\u65F6\u95F4"),
+          (0, import_react20.createElement)("span", { style: { color: "var(--dshpc-fg-2)", fontSize: "13px", flex: "none" } }, "\u5F00\u59CB\u65F6\u95F4"),
           (0, import_react20.createElement)(Input, { value: text, onChange: setText, placeholder: "\u9009\u62E9\u65E5\u671F" }),
-          (0, import_react20.createElement)(FieldHint, { text: "\u4EFB\u52A1\u81EA\u8BE5\u65E5\u8D77\u5F00\u59CB\u6267\u884C\u3002\u53EF\u63D0\u524D\u521B\u5EFA\u4EFB\u52A1\uFF0C\u81F3\u8BE5\u65E5\u81EA\u52A8\u5F00\u8DD1\uFF1B\u300C\u6BCF N \u5468\u300D\u4EA6\u81EA\u8BE5\u65E5\u8D77\u7B97\u9996\u5468\u3002" })
+          (0, import_react20.createElement)(FieldHint, { text: t2("fieldHintDate") })
         ),
         (0, import_react20.createElement)(Input, { value: "bad value", onChange: () => {
         }, error: true, placeholder: "\u6821\u9A8C\u5931\u8D25\u6001" }),
@@ -1856,7 +2106,7 @@ function ButtonsSection() {
     ),
     (0, import_react20.createElement)(
       Demo,
-      { title: "Checkbox / Segmented", hint: "\u5916\u89C2\u5BF9\u9F50\u771F\u5B9E\u63D2\u4EF6\uFF1A\u7070\u5E95 inset\uFF08\u65E0\u5916\u63CF\u8FB9\uFF09\uFF1B\u5E26\u63CF\u8FB9\u7684 default \u4EC5\u4F9B\u7279\u6B8A\u573A\u5408\uFF0C\u89C1\u4E0B" },
+      { title: "Checkbox / Segmented", hint: t2("checkboxHint") },
       (0, import_react20.createElement)(
         "div",
         { style: { display: "flex", flexDirection: "column", gap: "14px", alignItems: "flex-start" } },
@@ -1934,7 +2184,7 @@ function ButtonsSection() {
   );
 }
 
-// demo/sections/pickers.tsx
+// packages/demo/src/sections/pickers.tsx
 var import_react21 = require("react");
 var MODELS = [
   {
@@ -1962,7 +2212,7 @@ function PickersSection() {
     null,
     (0, import_react21.createElement)(
       Demo,
-      { title: "Picker", hint: "\u5355\u9009 / \u591A\u9009 / \u4E0A\u9650 / \u641C\u7D22 / \u5206\u7EC4 / \u7A7A\u6001 / \u964D\u7EA7\u2014\u2014\u5168\u90E8\u53EF\u7528 props \u63A7\u5236" },
+      { title: "Picker", hint: t2("pickerHint") },
       (0, import_react21.createElement)(
         "div",
         { style: { display: "flex", gap: "12px", flexWrap: "wrap", alignItems: "flex-start" } },
@@ -1997,7 +2247,7 @@ function PickersSection() {
     ),
     (0, import_react21.createElement)(
       Demo,
-      { title: "ModelPicker", hint: "flat \u4E00\u4E2A\u4E0B\u62C9 / cascade \u5148\u9009\u4F9B\u5E94\u5546\u518D\u9009\u6A21\u578B\u2014\u2014\u540C\u4E00\u4EFD\u6570\u636E\u4E24\u79CD\u5F62\u6001" },
+      { title: "ModelPicker", hint: t2("modelPickerHint") },
       (0, import_react21.createElement)(
         "div",
         { style: { display: "flex", gap: "12px", flexWrap: "wrap" } },
@@ -2007,7 +2257,7 @@ function PickersSection() {
     ),
     (0, import_react21.createElement)(
       Demo,
-      { title: "WorkspacePicker / FilePicker", hint: "\u6570\u636E\u8C03\u7528\u65B9\u7ED9\uFF08\u8981\u8DE8 host\u2194client \u8FB9\u754C\uFF0C\u7EC4\u4EF6\u53D6\u4E0D\u5230\uFF09" },
+      { title: "WorkspacePicker / FilePicker", hint: t2("workspacePickerHint") },
       (0, import_react21.createElement)(
         "div",
         { style: { display: "flex", gap: "12px", flexWrap: "wrap" } },
@@ -2028,7 +2278,7 @@ function PickersSection() {
   );
 }
 
-// demo/sections/feedback.tsx
+// packages/demo/src/sections/feedback.tsx
 var import_react22 = require("react");
 function Boom() {
   throw new Error("\u6F14\u793A\uFF1A\u5B50\u7EC4\u4EF6\u629B\u9519\u88AB\u8FB9\u754C\u63A5\u4F4F");
@@ -2043,7 +2293,7 @@ function FeedbackSection() {
       Demo,
       {
         title: "Modal",
-        hint: "\u81EA\u7ED8 overlay\uFF08\u4E0D\u7528 portal\uFF09\uFF1B\u70B9\u906E\u7F69 / Esc / \u2715 \u90FD\u80FD\u5173\u3002\u6807\u9898\u680F\u7684 \u2715 \u662F 24\xD724 \u56FE\u6807\u4F4D\uFF0C\u4E0D\u8BE5\u51FA\u73B0\u8FB9\u6846\u6216 120px \u5BBD\u7684\u5E95\u8272\u5757"
+        hint: t2("feedbackModalHint")
       },
       (0, import_react22.createElement)(
         "div",
@@ -2058,7 +2308,7 @@ function FeedbackSection() {
     ),
     (0, import_react22.createElement)(
       Demo,
-      { title: "toast", hint: "\u547D\u4EE4\u5F0F showToast\uFF0C\u4E0D\u8981\u6C42\u6302\u7EC4\u4EF6" },
+      { title: "toast", hint: t2("feedbackToastHint") },
       (0, import_react22.createElement)(
         "div",
         { style: { display: "flex", gap: "8px" } },
@@ -2076,20 +2326,20 @@ function FeedbackSection() {
         (0, import_react22.createElement)(EmptyState, { text: "\u6682\u65E0\u6570\u636E" }),
         (0, import_react22.createElement)(
           "div",
-          { style: { border: "1px solid var(--tdt-border-faint)", borderRadius: "8px", padding: "10px" } },
+          { style: { border: "1px solid var(--dshpc-border-faint)", borderRadius: "8px", padding: "10px" } },
           boom ? (0, import_react22.createElement)(ErrorBoundary, null, (0, import_react22.createElement)(Boom, null)) : (0, import_react22.createElement)(Button, { variant: "danger", onClick: () => setBoom(true) }, "\u70B9\u6211\u629B\u9519\uFF08\u770B\u8FB9\u754C\u515C\u5E95\uFF09")
         ),
         (0, import_react22.createElement)(
           "div",
-          { style: { color: "var(--tdt-fg-3)", fontSize: "12px" } },
-          "Loading \u662F\u8D34\u5230\u4E3B\u5BB9\u5668\u53F3\u4E0B\u89D2\u7684\u6307\u793A\u5668\uFF08anchorId \u9ED8\u8BA4 dsh-tdt-main\uFF09\uFF0C\u6B64\u5904\u4E0D\u6E32\u67D3\u4EE5\u514D\u906E\u6321\u3002"
+          { style: { color: "var(--dshpc-fg-3)", fontSize: "12px" } },
+          t2("loadingNote")
         )
       )
     )
   );
 }
 
-// demo/sections/display.tsx
+// packages/demo/src/sections/display.tsx
 var import_react23 = require("react");
 function DisplaySection() {
   const [open, setOpen] = (0, import_react23.useState)(false);
@@ -2098,7 +2348,7 @@ function DisplaySection() {
     null,
     (0, import_react23.createElement)(
       Demo,
-      { title: "Card\uFF08\u5706\u89D2 + \u8FB9\u6846 + \u77ED\u8272\u6761\uFF09", hint: "\u6392\u7248\u5B8C\u5168\u7531\u8C03\u7528\u65B9\u51B3\u5B9A\u2014\u2014\u771F\u5B9E\u63D2\u4EF6\u7684\u5F62\u6001\uFF1A\u6807\u9898\u884C + \u53F3\u4FA7\u5143\u4FE1\u606F + chips \u884C\uFF1Baccent \u4E94\u6863\u89C1\u4E0B\u65B9\u901F\u89C8" },
+      { title: t2("demoCardTitle"), hint: t2("displayCardHint") },
       (0, import_react23.createElement)(
         "div",
         { style: { display: "flex", flexDirection: "column", gap: "10px", maxWidth: "640px" } },
@@ -2111,10 +2361,10 @@ function DisplaySection() {
             { style: { display: "flex", alignItems: "baseline", gap: "8px" } },
             (0, import_react23.createElement)(
               "div",
-              { style: { fontWeight: 600, flex: "1 1 auto", minWidth: 0, fontSize: "var(--tdt-font-md)" } },
+              { style: { fontWeight: 600, flex: "1 1 auto", minWidth: 0, fontSize: "var(--dshpc-font-md)" } },
               "\u5C06 OpenSSH \u4E0A\u6240\u6709 NPM \u5B89\u88C5\u8FC1\u79FB\u5230 PNPM"
             ),
-            (0, import_react23.createElement)("div", { style: { color: "var(--tdt-fg-3)", fontSize: "var(--tdt-font-xs)", flex: "none" } }, "2026-10-18 \u521B\u5EFA")
+            (0, import_react23.createElement)("div", { style: { color: "var(--dshpc-fg-3)", fontSize: "var(--dshpc-font-xs)", flex: "none" } }, "2026-10-18 \u521B\u5EFA")
           ),
           (0, import_react23.createElement)(
             "div",
@@ -2134,7 +2384,7 @@ function DisplaySection() {
             (a) => (0, import_react23.createElement)(
               Card,
               { key: a, accent: a, style: { padding: "8px 12px" } },
-              (0, import_react23.createElement)("div", { style: { fontSize: "var(--tdt-font-sm)", color: "var(--tdt-fg-2)" } }, `accent="${a}"`)
+              (0, import_react23.createElement)("div", { style: { fontSize: "var(--dshpc-font-sm)", color: "var(--dshpc-fg-2)" } }, `accent="${a}"`)
             )
           )
         )
@@ -2142,24 +2392,24 @@ function DisplaySection() {
     ),
     (0, import_react23.createElement)(
       Demo,
-      { title: "StripCard\uFF08\u65E0\u8FB9\u6846 + \u901A\u9AD8\u7AD6\u7EBF\uFF09", hint: "\u540C\u4E00\u4E2A\u8272\u6761\u673A\u5236\uFF0C\u5916\u89C2\u662F\u901A\u9AD8\u8D34\u9876\u5230\u5E95\u2014\u2014\u771F\u5B9E\u63D2\u4EF6\u7684\u5F62\u6001\uFF1A\u6807\u9898 + \u5143\u4FE1\u606F\u884C + \u53F3\u4FA7\u65F6\u95F4/\u64CD\u4F5C" },
+      { title: t2("demoStripTitle"), hint: t2("displayStripHint") },
       (0, import_react23.createElement)(
         "div",
-        { style: { maxWidth: "640px", background: "var(--tdt-surface-sunken)", borderRadius: "8px", overflow: "hidden" } },
+        { style: { maxWidth: "640px", background: "var(--dshpc-surface-sunken)", borderRadius: "8px", overflow: "hidden" } },
         (0, import_react23.createElement)(
           StripCard,
           {
             accent: "business",
-            action: (0, import_react23.createElement)("span", { style: { color: "var(--tdt-fg-3)", fontSize: "var(--tdt-font-xs)", flex: "none" } }, "2026-10-18 \u5F00\u59CB \xB7 \u4ECA\u5929")
+            action: (0, import_react23.createElement)("span", { style: { color: "var(--dshpc-fg-3)", fontSize: "var(--dshpc-font-xs)", flex: "none" } }, "2026-10-18 \u5F00\u59CB \xB7 \u4ECA\u5929")
           },
-          (0, import_react23.createElement)("div", { style: { fontWeight: 600, fontSize: "var(--tdt-font-md)" } }, "DAY:1 - Docker \u955C\u50CF\u7248\u672C\u68C0\u67E5\u5668"),
+          (0, import_react23.createElement)("div", { style: { fontWeight: 600, fontSize: "var(--dshpc-font-md)" } }, "DAY:1 - Docker \u955C\u50CF\u7248\u672C\u68C0\u67E5\u5668"),
           (0, import_react23.createElement)(
             "div",
             { style: { display: "flex", alignItems: "center", gap: "6px", marginTop: "4px", flexWrap: "wrap" } },
             (0, import_react23.createElement)(Chip, null, "NAS-Docker"),
             (0, import_react23.createElement)(
               "span",
-              { style: { color: "var(--tdt-fg-3)", fontSize: "var(--tdt-font-xs)" } },
+              { style: { color: "var(--dshpc-fg-3)", fontSize: "var(--dshpc-font-xs)" } },
               "\u8BA1\u5212 02:00 \xB7 \u5B9E\u9645 02:00 \xB7 \u65F6\u957F 04:02 \xB7 2.4M"
             )
           )
@@ -2167,8 +2417,8 @@ function DisplaySection() {
         (0, import_react23.createElement)(
           StripCard,
           { accent: "success" },
-          (0, import_react23.createElement)("div", { style: { fontWeight: 600, fontSize: "var(--tdt-font-md)" } }, "\u6267\u884C\u6210\u529F"),
-          (0, import_react23.createElement)("div", { style: { color: "var(--tdt-fg-3)", fontSize: "var(--tdt-font-xs)", marginTop: "4px" } }, "\u8017\u65F6 12s \xB7 3 \u4E2A\u6587\u4EF6\u53D8\u66F4")
+          (0, import_react23.createElement)("div", { style: { fontWeight: 600, fontSize: "var(--dshpc-font-md)" } }, "\u6267\u884C\u6210\u529F"),
+          (0, import_react23.createElement)("div", { style: { color: "var(--dshpc-fg-3)", fontSize: "var(--dshpc-font-xs)", marginTop: "4px" } }, "\u8017\u65F6 12s \xB7 3 \u4E2A\u6587\u4EF6\u53D8\u66F4")
         ),
         (0, import_react23.createElement)(
           StripCard,
@@ -2177,10 +2427,10 @@ function DisplaySection() {
             expanded: open,
             onToggle: () => setOpen(!open),
             action: (0, import_react23.createElement)(Button, { size: "sm", variant: "ghost" }, "\u67E5\u770B\u4F1A\u8BDD"),
-            panel: (0, import_react23.createElement)("div", { style: { fontSize: "12px", color: "var(--tdt-fg-3)" } }, "\u5C55\u5F00\u540E\u7684\u8BE6\u60C5\u9762\u677F")
+            panel: (0, import_react23.createElement)("div", { style: { fontSize: "12px", color: "var(--dshpc-fg-3)" } }, "\u5C55\u5F00\u540E\u7684\u8BE6\u60C5\u9762\u677F")
           },
-          (0, import_react23.createElement)("div", { style: { fontWeight: 600, fontSize: "var(--tdt-font-md)" } }, "\u6709\u8B66\u544A\uFF08\u53EF\u6298\u53E0\uFF0C\u70B9\u53F3\u4FA7\u7BAD\u5934\uFF09"),
-          (0, import_react23.createElement)("div", { style: { color: "var(--tdt-fg-3)", fontSize: "var(--tdt-font-xs)", marginTop: "4px" } }, "\u8017\u65F6 8s \xB7 1 \u4E2A\u8B66\u544A")
+          (0, import_react23.createElement)("div", { style: { fontWeight: 600, fontSize: "var(--dshpc-font-md)" } }, "\u6709\u8B66\u544A\uFF08\u53EF\u6298\u53E0\uFF0C\u70B9\u53F3\u4FA7\u7BAD\u5934\uFF09"),
+          (0, import_react23.createElement)("div", { style: { color: "var(--dshpc-fg-3)", fontSize: "var(--dshpc-font-xs)", marginTop: "4px" } }, "\u8017\u65F6 8s \xB7 1 \u4E2A\u8B66\u544A")
         )
       )
     ),
@@ -2188,7 +2438,7 @@ function DisplaySection() {
       Demo,
       {
         title: "Chip / SectionHead / MarqueeText / LiveText",
-        hint: "chip \u53EA\u6709\u300C\u80F6\u56CA\u6807\u7B7E\u300D\u4E00\u5957\u76AE\u80A4\uFF1A\u5BBD\u5EA6\u6309\u6587\u5B57\u6491\u5F00\u3001\u4E0D\u6362\u884C\uFF1B\u6700\u540E\u4E00\u9897\u662F\u957F\u6587\u5B57\uFF0C\u82E5\u88AB\u538B\u6210 28px \u7AD6\u6392\u5C31\u662F\u53C8\u6DF7\u8FDB\u4E86\u56FE\u6807\u6309\u94AE\u7684\u5B9A\u5BBD\u89C4\u5219"
+        hint: t2("displayChipHint")
       },
       (0, import_react23.createElement)(
         "div",
@@ -2213,159 +2463,8 @@ function DisplaySection() {
   );
 }
 
-// demo/sections/utils.tsx
+// packages/demo/src/sections/utils.tsx
 var import_react24 = require("react");
-
-// dist/utils/date.js
-function pad2(value) {
-  return String(value).padStart(2, "0");
-}
-var FALLBACK = "\u2014";
-function formatDateTime(iso, opts) {
-  const ms = Date.parse(iso);
-  if (Number.isNaN(ms))
-    return opts?.fallback ?? iso;
-  const d = new Date(ms);
-  const base = `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())} ${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
-  return opts?.seconds === true ? `${base}:${pad2(d.getSeconds())}` : base;
-}
-function formatYmd(iso, opts) {
-  const ms = Date.parse(iso);
-  if (Number.isNaN(ms))
-    return opts?.fallback ?? FALLBACK;
-  const d = new Date(ms);
-  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
-}
-function formatClock(iso, opts) {
-  const fb = opts?.fallback ?? "-";
-  if (iso === null || iso === void 0 || iso === "")
-    return fb;
-  const ms = Date.parse(iso);
-  if (Number.isNaN(ms))
-    return fb;
-  const d = new Date(ms);
-  return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
-}
-function formatDurationHms(ms) {
-  if (!Number.isFinite(ms) || ms < 0)
-    return "-";
-  const totalSec = Math.round(ms / 1e3);
-  const h31 = Math.floor(totalSec / 3600);
-  const m = Math.floor(totalSec % 3600 / 60);
-  const s = totalSec % 60;
-  return h31 > 0 ? `${h31}:${pad2(m)}:${pad2(s)}` : `${pad2(m)}:${pad2(s)}`;
-}
-function sameCalendarDay(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-function relativePast(iso, nowMs, translate) {
-  const tt = translate ?? t;
-  const diff = nowMs - Date.parse(iso);
-  if (Number.isNaN(diff) || !(diff >= 0))
-    return tt("relNow");
-  if (diff < 6e4)
-    return tt("relJustNow");
-  const minutes = Math.floor(diff / 6e4);
-  if (minutes < 60)
-    return tt("relMinutesAgo", { n: minutes });
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24)
-    return tt("relHoursAgo", { n: hours });
-  const days = Math.floor(hours / 24);
-  if (days < 7)
-    return tt("relDaysAgo", { n: days });
-  if (days < 30)
-    return tt("relWeeksAgo", { n: Math.floor(days / 7) });
-  const months = Math.floor(days / 30);
-  if (months < 12)
-    return tt("relMonthsAgo", { n: months });
-  return tt("relYearsAgo", { n: Math.floor(days / 365) });
-}
-function relativeFuture(iso, nowMs, translate) {
-  const tt = translate ?? t;
-  const diff = Date.parse(iso) - nowMs;
-  if (Number.isNaN(diff))
-    return formatYmd(iso);
-  if (diff <= 0)
-    return tt("relNow");
-  if (diff < 6e4)
-    return tt("relInJustNow");
-  const minutes = Math.floor(diff / 6e4);
-  if (minutes < 60)
-    return tt("relInMinutes", { n: minutes });
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24)
-    return tt("relInHours", { n: hours });
-  const days = Math.floor(hours / 24);
-  if (days < 30)
-    return tt("relInDays", { n: days });
-  const months = Math.floor(days / 30);
-  if (months < 12)
-    return tt("relInMonths", { n: months });
-  return tt("relInYears", { n: Math.floor(days / 365) });
-}
-function formatRange(fromIso, toIso, opts) {
-  const from = Date.parse(fromIso);
-  const to = Date.parse(toIso);
-  if (Number.isNaN(from) || Number.isNaN(to))
-    return FALLBACK;
-  const a = new Date(from);
-  const b = new Date(to);
-  const clock = (d) => opts?.seconds === true ? `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}` : `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
-  if (sameCalendarDay(a, b))
-    return `${clock(a)} \u2013 ${clock(b)}`;
-  const day = (d) => `${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
-  return `${day(a)} ${clock(a)} \u2013 ${day(b)} ${clock(b)}`;
-}
-
-// dist/utils/number.js
-function formatBytes(bytes) {
-  if (!Number.isFinite(bytes) || bytes <= 0)
-    return "\u2014";
-  if (bytes < 1024)
-    return `${bytes} B`;
-  const units = ["KB", "MB", "GB", "TB"];
-  let value = bytes / 1024;
-  let unit = 0;
-  while (value >= 1024 && unit < units.length - 1) {
-    value /= 1024;
-    unit++;
-  }
-  return `${value >= 10 ? String(Math.round(value)) : value.toFixed(1)} ${units[unit]}`;
-}
-
-// dist/utils/path.js
-var IMAGE_EXT = {
-  png: "image/png",
-  jpg: "image/jpeg",
-  jpeg: "image/jpeg",
-  gif: "image/gif",
-  webp: "image/webp",
-  bmp: "image/bmp",
-  svg: "image/svg+xml",
-  ico: "image/x-icon"
-};
-function mimeOf(path) {
-  const ext = extOf(path);
-  return ext === "" ? void 0 : IMAGE_EXT[ext];
-}
-function extOf(path) {
-  const name = path.slice(path.lastIndexOf("/") + 1);
-  const dot = name.lastIndexOf(".");
-  return dot <= 0 ? "" : name.slice(dot + 1).toLowerCase();
-}
-function crumbsOf(path) {
-  return path.split("/").filter((s) => s !== "");
-}
-function parentOf(path) {
-  const cut = path.lastIndexOf("/");
-  return cut < 0 ? "" : path.slice(0, cut);
-}
-function joinPath(dir, name) {
-  return dir === "" ? name : `${dir}/${name}`;
-}
-
-// demo/sections/utils.tsx
 var NOW = Date.parse("2026-10-18T12:00:00.000Z");
 var ROWS = [
   ["formatDateTime", formatDateTime("2026-10-18T09:30:05.000Z", { seconds: true }), "2026-10-18 09:30:05"],
@@ -2380,7 +2479,7 @@ var ROWS = [
 function UtilsSection() {
   return (0, import_react24.createElement)(
     Demo,
-    { title: "\u65E5\u671F / \u5B57\u7B26\u4E32 / \u5B57\u8282", hint: "\u89E3\u6790\u5931\u8D25\u4E0D\u629B\u9519\u3001\u7ED9\u515C\u5E95\u3001\u4E0D\u7F16\u9020\uFF1B\u6240\u6709\u51FD\u6570\u65E0 UI \u4F9D\u8D56" },
+    { title: t2("demoUtilsTitle"), hint: t2("utilsHint") },
     (0, import_react24.createElement)(
       "table",
       { style: { borderCollapse: "collapse", fontSize: "13px" } },
@@ -2409,10 +2508,10 @@ function UtilsSection() {
     )
   );
 }
-var th = { textAlign: "left", padding: "6px 14px 6px 0", color: "var(--tdt-fg-3)" };
-var td = { padding: "5px 14px 5px 0", borderTop: "1px solid var(--tdt-border-faint)" };
+var th = { textAlign: "left", padding: "6px 14px 6px 0", color: "var(--dshpc-fg-3)" };
+var td = { padding: "5px 14px 5px 0", borderTop: "1px solid var(--dshpc-border-faint)" };
 
-// demo/sections/explorer.tsx
+// packages/demo/src/sections/explorer.tsx
 var import_react27 = require("react");
 
 // dist/explorer/ExplorerPanel.js
@@ -2595,7 +2694,7 @@ function ExplorerPanel(props) {
   }))));
 }
 
-// demo/mock.ts
+// packages/demo/src/mock.ts
 var TREE = {
   ".": [
     { name: "src", type: "directory" },
@@ -2730,14 +2829,14 @@ function delay(ms) {
   return new Promise((r) => setTimeout(r, ms));
 }
 
-// demo/sections/explorer.tsx
+// packages/demo/src/sections/explorer.tsx
 function ExplorerSection() {
   const [selected, setSelected] = (0, import_react27.useState)(null);
   return (0, import_react27.createElement)(
     Demo,
     {
       title: "ExplorerPanel",
-      hint: "\u9762\u5305\u5C51 + \u76EE\u5F55\u6811 + \u9884\u89C8\uFF1BworkspaceFiles \u662F mock \u7684\uFF08\u771F\u5B9E\u63D2\u4EF6\u4ECE ctx \u53D6\u51FA\u540E\u6CE8\u5165\uFF09"
+      hint: t2("explorerHint")
     },
     (0, import_react27.createElement)(
       "div",
@@ -2749,7 +2848,7 @@ function ExplorerSection() {
             width: "520px",
             height: "380px",
             overflow: "hidden",
-            border: "1px solid var(--tdt-border)",
+            border: "1px solid var(--dshpc-border)",
             borderRadius: "8px"
           }
         },
@@ -2762,14 +2861,14 @@ function ExplorerSection() {
       ),
       (0, import_react27.createElement)(
         "div",
-        { style: { fontSize: "12px", color: "var(--tdt-fg-3)", alignSelf: "center" } },
+        { style: { fontSize: "12px", color: "var(--dshpc-fg-3)", alignSelf: "center" } },
         selected === null ? "\u70B9\u5DE6\u4FA7\u6587\u4EF6\u8BD5\u8BD5" : `\u5DF2\u9009\u4E2D\uFF1A${selected}`
       )
     )
   );
 }
 
-// demo/sections/session.tsx
+// packages/demo/src/sections/session.tsx
 var import_react29 = require("react");
 
 // dist/session/index.js
@@ -2832,14 +2931,14 @@ function SessionPreview(props) {
   return (0, import_react28.createElement)("div", { className: `dsh-tdt-ses dsh-tdt-ses--${variant}` }, props.onClose === void 0 ? null : (0, import_react28.createElement)("div", { className: "dsh-tdt-ses__head" }, (0, import_react28.createElement)("button", { type: "button", className: "dsh-tdt-exp__crumb", onClick: props.onClose }, "\u2715")), body);
 }
 
-// demo/sections/session.tsx
+// packages/demo/src/sections/session.tsx
 function SessionSection() {
   const [open, setOpen] = (0, import_react29.useState)(false);
   return (0, import_react29.createElement)(
     Demo,
     {
       title: "SessionPreview",
-      hint: "\u4E09\u79CD\u627F\u8F7D\uFF1Amodal / sidebar / page\uFF1Bsource \u662F mock \u7684\uFF1BrenderMessage \u53EF\u63A5\u7BA1\u5BCC\u5185\u5BB9"
+      hint: t2("sessionHint")
     },
     (0, import_react29.createElement)(
       "div",
@@ -2861,7 +2960,7 @@ function SessionSection() {
   }
 }
 
-// demo/sections/index.tsx
+// packages/demo/src/sections/index.tsx
 function Demo(props) {
   return (0, import_react30.createElement)(
     "section",
@@ -2869,13 +2968,13 @@ function Demo(props) {
       style: {
         marginBottom: "28px",
         padding: "16px 18px",
-        border: "1px solid var(--tdt-border-faint)",
+        border: "1px solid var(--dshpc-border-faint)",
         borderRadius: "8px",
-        background: "var(--tdt-surface-1)"
+        background: "var(--dshpc-surface-1)"
       }
     },
     (0, import_react30.createElement)("h3", { style: { margin: "0 0 2px", fontSize: "15px" } }, props.title),
-    props.hint === void 0 ? null : (0, import_react30.createElement)("div", { style: { color: "var(--tdt-fg-3)", fontSize: "12px", marginBottom: "12px" } }, props.hint),
+    props.hint === void 0 ? null : (0, import_react30.createElement)("div", { style: { color: "var(--dshpc-fg-3)", fontSize: "12px", marginBottom: "12px" } }, props.hint),
     (0, import_react30.createElement)("div", { style: { marginBottom: props.code === void 0 ? 0 : "12px" } }, props.children ?? null),
     props.code === void 0 ? null : (0, import_react30.createElement)(
       "pre",
@@ -2885,9 +2984,9 @@ function Demo(props) {
           padding: "10px 12px",
           borderRadius: "6px",
           overflowX: "auto",
-          background: "var(--tdt-code-surface)",
-          color: "var(--tdt-fg)",
-          font: "var(--tdt-code-font)",
+          background: "var(--dshpc-code-surface)",
+          color: "var(--dshpc-fg)",
+          font: "var(--dshpc-code-font)",
           fontSize: "12px"
         }
       },
@@ -2900,40 +2999,45 @@ function SectionHead2(props) {
     "div",
     { id: `sec-${props.id}`, style: { margin: "28px 0 14px" } },
     (0, import_react30.createElement)("h2", { style: { margin: 0, fontSize: "20px" } }, props.title),
-    (0, import_react30.createElement)("div", { style: { height: "3px", width: "36px", background: "var(--tdt-business)", borderRadius: "2px", marginTop: "6px" } })
+    (0, import_react30.createElement)("div", { style: { height: "3px", width: "36px", background: "var(--dshpc-business)", borderRadius: "2px", marginTop: "6px" } })
   );
 }
 var ALL_SECTIONS = [
-  { id: "design", title: "\u8BBE\u8BA1\u57FA\u7840", render: () => (0, import_react30.createElement)(DesignSection, null) },
-  { id: "buttons", title: "\u6309\u94AE\u4E0E\u8F93\u5165", render: () => (0, import_react30.createElement)(ButtonsSection, null) },
-  { id: "pickers", title: "\u9009\u62E9\u5668", render: () => (0, import_react30.createElement)(PickersSection, null) },
-  { id: "feedback", title: "\u5F39\u7A97\u4E0E\u53CD\u9988", render: () => (0, import_react30.createElement)(FeedbackSection, null) },
-  { id: "display", title: "\u5361\u7247\u4E0E\u5C55\u793A", render: () => (0, import_react30.createElement)(DisplaySection, null) },
-  { id: "utils", title: "\u901A\u7528\u65B9\u6CD5", render: () => (0, import_react30.createElement)(UtilsSection, null) },
-  { id: "explorer", title: "\u5DE5\u4F5C\u533A\u6D4F\u89C8", render: () => (0, import_react30.createElement)(ExplorerSection, null) },
-  { id: "session", title: "\u4F1A\u8BDD\u9884\u89C8", render: () => (0, import_react30.createElement)(SessionSection, null) }
+  { id: "design", titleKey: "secDesign", render: () => (0, import_react30.createElement)(DesignSection, null) },
+  { id: "buttons", titleKey: "secButtons", render: () => (0, import_react30.createElement)(ButtonsSection, null) },
+  { id: "pickers", titleKey: "secPickers", render: () => (0, import_react30.createElement)(PickersSection, null) },
+  { id: "feedback", titleKey: "secFeedback", render: () => (0, import_react30.createElement)(FeedbackSection, null) },
+  { id: "display", titleKey: "secDisplay", render: () => (0, import_react30.createElement)(DisplaySection, null) },
+  { id: "utils", titleKey: "secUtils", render: () => (0, import_react30.createElement)(UtilsSection, null) },
+  { id: "explorer", titleKey: "secExplorer", render: () => (0, import_react30.createElement)(ExplorerSection, null) },
+  { id: "session", titleKey: "secSession", render: () => (0, import_react30.createElement)(SessionSection, null) }
 ];
 function Sections(props) {
   const current3 = ALL_SECTIONS.find((s) => s.id === props.active) ?? ALL_SECTIONS[0];
   return (0, import_react30.createElement)(
     "div",
     null,
-    (0, import_react30.createElement)(SectionHead2, { id: current3.id, title: current3.title }),
+    (0, import_react30.createElement)(SectionHead2, { id: current3.id, title: t2(current3.titleKey) }),
     current3.render()
   );
 }
 
-// packages/demo/src/client/token-alias.ts
-var ALIAS_TOKEN_NAMES = ["accent", "active", "border", "border-faint", "border-heavy", "border-strong", "business", "chip-bg", "chip-bg-hover", "code-font", "code-surface", "control-h-lg", "control-h-md", "control-h-sm", "danger", "dur", "dur-fast", "ease", "fg", "fg-2", "fg-3", "fg-4", "fg-dim", "fg-inverse", "focus", "font-lg", "font-md", "font-mono", "font-sm", "font-xs", "hover", "line-lg", "line-md", "line-sm", "link", "on-signal", "on-solid", "open-bg", "open-bg-soft", "radius-md", "radius-sm", "radius-xs", "shadow-1", "shadow-2", "shadow-raised", "solid", "space-1", "space-2", "space-3", "space-4", "success", "surface-1", "surface-2", "surface-base", "surface-menu", "surface-sunken", "warning", "warning-label", "z-dock", "z-menu"];
-
 // packages/demo/src/client/index.tsx
 var PANEL_ID = "dsh-plugin-core-demo";
 var PREFIX = "dshpc";
-function aliasCss() {
-  const decls = ALIAS_TOKEN_NAMES.map((n) => `--tdt-${n}:var(--${PREFIX}-${n})`);
-  return `body{${decls.join(";")}}`;
+var localeRuntime;
+function useLocaleTick() {
+  const [, setTick] = (0, import_react31.useState)(0);
+  (0, import_react31.useEffect)(() => {
+    const rt = localeRuntime;
+    if (rt === void 0) return;
+    return rt.subscribe(() => {
+      setTick((v) => v + 1);
+    });
+  }, []);
 }
 function DemoPage() {
+  useLocaleTick();
   const [active, setActive] = (0, import_react31.useState)(ALL_SECTIONS[0].id);
   return (0, import_react31.createElement)(
     "div",
@@ -2973,7 +3077,7 @@ function DemoPage() {
               marginBottom: "2px"
             }
           },
-          s.title
+          t2(s.titleKey)
         )
       )
     ),
@@ -3006,14 +3110,14 @@ function OpenPreviewCard(props) {
     (0, import_react31.createElement)(
       "div",
       null,
-      (0, import_react31.createElement)("div", { style: { fontWeight: 600, fontSize: "14px" } }, "\u7EC4\u4EF6\u9884\u89C8"),
+      (0, import_react31.createElement)("div", { style: { fontWeight: 600, fontSize: "14px" } }, t2("pluginTitle")),
       (0, import_react31.createElement)(
         "div",
         { style: { color: "var(--dshpc-fg-3)", fontSize: "12px", marginTop: "2px" } },
-        "\u6253\u5F00 dsh-plugin-core \u7684\u63A7\u4EF6\u4E0E\u4E1A\u52A1\u7EC4\u4EF6\u5C55\u793A\u9875"
+        t2("pluginCardDesc")
       )
     ),
-    (0, import_react31.createElement)("span", { style: { color: "var(--dshpc-business)", fontSize: "13px" } }, "\u6253\u5F00 \u203A")
+    (0, import_react31.createElement)("span", { style: { color: "var(--dshpc-business)", fontSize: "13px" } }, t2("pluginCardOpen"))
   );
 }
 function PanelIcon() {
@@ -3027,7 +3131,6 @@ function apply(ctx) {
   const kit = createStyleKit({ id: "dsh-plugin-core-plugin", prefix: PREFIX });
   setStyleKit(kit);
   ensureControls(kit);
-  kit.registerStyle("tdt-alias", aliasCss());
   kit.ensureStyles();
   let jump = () => {
   };
@@ -3037,12 +3140,28 @@ function apply(ctx) {
       select(id);
     };
   });
+  ctx.inject(["locale"], (sub) => {
+    const loc = sub?.locale;
+    if (loc === void 0) return;
+    localeRuntime = loc;
+    try {
+      loc.register(PANEL_ID, "zh", { ...DICT2.zh });
+      loc.register(PANEL_ID, "en", { ...DICT2.en });
+      setDemoTranslate(loc.bind(PANEL_ID));
+    } catch {
+    }
+    const sync = () => {
+      setLocale(loc.getLocale().active === "en" ? "en" : "zh");
+    };
+    sync();
+    loc.subscribe(sync);
+  });
   ctx.inject(["slots"], (sub) => {
     const slots = sub.slots;
     if (slots === void 0) return;
     slots.inject("sidebar.panellist", () => {
       slots.register(
-        { name: "sidebar.panellist", id: PANEL_ID, order: 90, label: () => "\u7EC4\u4EF6\u9884\u89C8" },
+        { name: "sidebar.panellist", id: PANEL_ID, order: 90, label: () => t2("pluginTitle") },
         PanelIcon
       );
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-plugin-core-demo",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "dsh-plugin-core 的组件预览插件：装进 DSH 宿主后，在真实宿主环境里预览控件与业务组件",
   "keywords": ["deepseek", "harness", "dsh", "dsh-plugin", "dsh-plugin-core"],
   "homepage": "https://github.com/cq-guojia/dsh-plugin-core/tree/main/packages/demo",