dsh-plugin-core-demo 0.0.1 → 0.1.3

package/README.md

@@ -22,8 +22,12 @@ pnpm run build:demo
 
 ## 发布与安装
 
+**不要在本目录手跑 `npm publish`。** 本包与核心共用同一个 `vX.Y.Z` tag，由
+`.github/workflows/demo-publish.yml` 自动发布；版本必须与根 `package.json` 完全一致
+（`test/version-sync.test.mjs` 与 CI 都校验，不一致直接失败）。
+
 ```bash
-npm publish --access public                    # 在本目录
+git tag v0.1.3 && git push origin v0.1.3      # 在仓库根：一次 tag 发库 + 本包
 dsh plugin --profile web add dsh-plugin-core-demo
 ```
 

package/dist/client.js

@@ -156,6 +156,8 @@ body{
   --tdt-radius-lg:var(--dsw-radius-lg,16px);
   --tdt-radius-xl:var(--dsw-radius-xl,20px);
   --tdt-radius-panel:var(--dsw-radius-panel,28px);
+  /* \u5168\u5706\uFF08\u80F6\u56CA\u6807\u7B7E\uFF09\uFF1A\u5BBF\u4E3B\u7684 radius \u6863\u6700\u5927\u53EA\u6709 28px\uFF0C\u6491\u4E0D\u6EE1 24px \u9AD8\u7684 chip */
+  --tdt-radius-pill:999px;
 
   /* \u2500\u2500 \u95F4\u8DDD\u56DB\u62CD\uFF08\u53EA\u8BB8\u7528\u8FD9\u56DB\u6863\uFF0C\u4E0D\u8BB8\u51FA\u73B0 5 / 7 / 9px\uFF09\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
   --tdt-space-1:4px;
@@ -446,26 +448,6 @@ var BUTTON_CSS = `
 .dsh-tdt-iconbtn:focus-visible{outline:2px solid var(--tdt-focus);outline-offset:2px;}
 .dsh-tdt-iconbtn:disabled{cursor:default;opacity:.4;}
 
-/* \u2500\u2500 \u4EA7\u51FA\u7269\u300C\u56FE\u6807 chip\u300DP2\uFF1A28\xD728 \u65B9\u89D2\u5C0F\u5E95\u677F + \u5B98\u65B9\u6587\u4EF6\u7C7B\u578B\u56FE\u6807 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-   \u7528\u9014\uFF1A\u4EA7\u51FA\u7269\u5217\u8868\u91CC**\u53EA\u7ED9\u56FE\u6807**\u7684\u5C0F\u6309\u94AE\uFF08\u5361\u7247\u300C\u6267\u884C\u8BB0\u5F55\u300D\u9762\u677F\u3001\u6267\u884C\u8BB0\u5F55\u603B\u67E5\u8BE2\u9875\u3001\u5C55\u5F00\u533A\u90FD\u6302\u5B83\uFF09\u3002
-   \u26A0\uFE0F \u5E95\u677F**\u5FC5\u987B\u8D70 class**\u2014\u2014inline background \u4F1A\u76D6\u6389 :hover\uFF08\u7528\u6237 2026-10-03 \u8E29\u8FC7\uFF09\u3002
-   hover \u7528 \u300C--tdt-chip-bg-hover\u300D\uFF1A\u6D45\u8272\u66F4\u6DF1\u3001\u6697\u8272\u66F4\u4EAE\uFF08\u4E24\u7AEF\u90FD\u662F\u300C\u66F4\u660E\u663E\u300D\uFF09\uFF1B\u4E0D\u8BB8\u62FF
-   \u300C--tdt-plate-hover\u300D \u9876\u2014\u2014\u6697\u8272\u4E0B\u53CD\u800C\u66F4\u6DE1\uFF0C\u9F20\u6807\u79FB\u4E0A\u53BB\u5E95\u677F\u5C31\u6D88\u5931\u4E86\u3002
-   \u2705 **\u5168\u7AD9\u552F\u4E00\u5B9E\u73B0**\uFF082026-10-04 \u6536\u7F16\uFF09\uFF1A\u6B64\u524D\u5361\u7247\u9762\u677F\u4E0E\u6267\u884C\u8BB0\u5F55\u9875\u5404\u5199\u4E00\u4EFD**\u540C\u540D\u4E0D\u540C\u76AE**\u7684
-   \u300C.dsh-tdt-rec-out\u300D\uFF0C\u4E24\u4EFD CSS \u90FD\u6CE8\u5165\u540C\u4E00\u9875\u9762 \u21D2 \u8C01\u540E\u6CE8\u518C\u8C01\u751F\u6548\u3001\u4E92\u76F8\u6C61\u67D3\uFF1B\u73B0\u5DF2\u6536\u6210\u8FD9\u4E00\u4EFD\u3002 */
-.dsh-tdt-chip{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
-  width:var(--tdt-control-h-md);height:var(--tdt-control-h-md);padding:0;border:none;border-radius:var(--tdt-radius-sm);
-  background:transparent;color:var(--tdt-fg-2);font-family:inherit;line-height:0;cursor:pointer;
-  transition:background-color var(--tdt-dur) var(--tdt-ease),color var(--tdt-dur) var(--tdt-ease);}
-/* \u5E95\u677F**\u5E73\u65F6\u900F\u660E\u3001\u9F20\u6807\u79FB\u4E0A\u53BB\u624D\u6D6E\u51FA\u6765**\uFF08\u7528\u6237 2026-10-04\uFF1A\u300C\u90A3\u4E2A\u5E26\u5E95\u8272\u7684\u6846\uFF0C\u9F20\u6807\u79FB\u4E0A\u53BB\u624D\u6709\u300D\uFF09\u3002
-   \u53EA\u7ED9\u56FE\u6807\u3001\u6CA1\u6709\u6587\u5B57\u53EF\u8BFB \u21D2 hover \u7528\u66F4\u660E\u663E\u7684\u90A3\u6863\uFF08\u6D45\u8272\u66F4\u6DF1\u3001\u6697\u8272\u66F4\u4EAE\uFF0C\u4E24\u7AEF\u90FD\u662F\u300C\u66F4\u660E\u663E\u300D\uFF09\u3002 */
-.dsh-tdt-chip:hover:not(:disabled){background:var(--tdt-chip-bg-hover);}
-.dsh-tdt-chip:focus-visible{outline:2px solid var(--tdt-focus);outline-offset:1px;}
-/* \u4E0D\u53EF\u70B9\uFF08\u6CA1\u6709\u4F1A\u8BDD / \u9884\u89C8\u9762\u672A\u5C31\u4F4D\uFF09\uFF1A\u6CA1\u6709\u5E95\u677F\u3001\u6CA1\u6709\u624B\u6307\uFF0C\u522B\u7ED9\u5047\u5165\u53E3 */
-.dsh-tdt-chip:disabled{cursor:default;background:transparent;color:var(--tdt-fg-3);}
-/* \u6587\u5B57\u578B chip\uFF08\u300C\u2026\u300D / \u300C+N\u300D\uFF09\uFF1A\u4E0D\u56FA\u5B9A\u65B9\u5BBD\uFF0C\u6309\u5185\u5BB9\u6491\u5F00 */
-.dsh-tdt-chip--label{width:auto;padding:0 6px;font-size:var(--tdt-font-md);line-height:var(--tdt-line-md);}
-
 /* \u2500\u2500 \u884C\u5F0F\u6587\u4EF6\u6309\u94AE\uFF08\u56FE\u6807 + \u6587\u4EF6\u540D\uFF09P2\uFF1A**\u5168\u7AD9\u552F\u4E00\u5B9E\u73B0**\uFF082026-10-04 \u6536\u7F16\uFF09\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
    \u7528\u9014\uFF1A\u300C\u4EA7\u51FA\u7269 / \u9644\u4EF6\u300D\u90A3\u79CD**\u4E00\u884C\u4E00\u4E2A\u6587\u4EF6**\u7684\u6E05\u5355\u9879\uFF08\u57FA\u7840\u4FE1\u606F\u53F3\u680F\u4EA7\u51FA\u7269\u6E05\u5355\u3001\u9644\u4EF6\u533A\u3001
    \u6267\u884C\u8BB0\u5F55\u9875\u7684\u5C55\u5F00\u533A\uFF09\u3002\u5E73\u65F6\u900F\u660E\u3001**\u9F20\u6807\u79FB\u4E0A\u53BB\u624D\u51FA\u6D45\u5E95**\uFF08\u6CBF\u7528\u7528\u6237 2026-10-03 \u5B9A\u7684\u89C2\u611F\uFF09\u3002
@@ -484,7 +466,7 @@ var BUTTON_CSS = `
   padding:4px 6px;font-size:var(--tdt-font-xs);}
 .dsh-tdt-filechip--inline{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;font-size:var(--tdt-font-sm);}
 
-@media (prefers-reduced-motion: reduce){.dsh-tdt-btn,.dsh-tdt-iconbtn,.dsh-tdt-chip,.dsh-tdt-filechip{transition:none;}}
+@media (prefers-reduced-motion: reduce){.dsh-tdt-btn,.dsh-tdt-iconbtn,.dsh-tdt-filechip{transition:none;}}
 `;
 var FIELD_CSS = `
 /* \u2500\u2500 \u8F93\u5165\u7C7B P3 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -739,6 +721,15 @@ var FEEDBACK_CSS = `
   border-bottom:1px solid var(--tdt-border-faint);color:var(--tdt-fg);font-size:14px;
 }
 .dsh-tdt-modal__title{flex:1;min-width:0}
+/* \u5173\u95ED\u6309\u94AE\uFF1A24\xD724 \u65B9\u89D2\u56FE\u6807\u4F4D\uFF0C\u4E0D\u501F\u7528 Picker \u7684\u89E6\u53D1\u5668\u76AE\u80A4\uFF08\u90A3\u4EFD\u5E26 min-width:120px\uFF09\u3002 */
+.dsh-tdt-modal__close{
+  display:inline-flex;align-items:center;justify-content:center;flex:none;
+  width:24px;height:24px;padding:0;border:none;border-radius:var(--tdt-radius-sm);
+  background:transparent;color:var(--tdt-fg-3);font-family:inherit;font-size:12px;line-height:1;cursor:pointer;
+  transition:background-color var(--tdt-dur-fast) var(--tdt-ease),color var(--tdt-dur-fast) var(--tdt-ease);
+}
+.dsh-tdt-modal__close:hover{background:var(--tdt-hover);color:var(--tdt-fg)}
+.dsh-tdt-modal__close:focus-visible{outline:2px solid var(--tdt-focus);outline-offset:1px}
 .dsh-tdt-modal__body{flex:1;min-height:0;overflow:auto;padding:12px 14px}
 .dsh-tdt-modal__foot{
   display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;
@@ -805,15 +796,24 @@ var CARD_CSS = `
 .dsh-tdt-card__caret.is-open{transform:rotate(180deg)}
 .dsh-tdt-card__panel{margin-top:8px;padding-top:8px;border-top:1px solid var(--tdt-border-faint)}
 `;
+
+// dist/ui/chip-css.js
 var CHIP_CSS = `
 .dsh-tdt-chip{
-  display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;
-  background:var(--tdt-chip-bg);color:var(--tdt-fg);font-size:11px;line-height:18px;
+  display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:1px 8px;
+  box-sizing:border-box;border-radius:var(--tdt-radius-pill,999px);border:none;
+  background:var(--tdt-chip-bg);color:var(--tdt-fg);
+  font-family:inherit;font-size:11px;line-height:18px;margin:0;
   /* 2026-10-18\uFF1Achip \u662F flex \u884C\u91CC\u7684\u5E38\u7528\u9879\uFF0C\u7981\u6B62\u88AB\u538B\u7F29\u6362\u884C\uFF08\u9884\u89C8\u7AD9\u51FA\u73B0\u8FC7\u6587\u5B57\u7AD6\u6392\u3001\u4E92\u76F8\u53E0\u538B\u7684\u6324\u538B\uFF09\u3002 */
-  white-space:nowrap;flex:none;box-sizing:border-box;
-}
-.dsh-tdt-chip--clickable{cursor:pointer;border:none;font:inherit;font-size:11px}
-.dsh-tdt-chip--clickable:hover{background:var(--tdt-chip-bg-hover)}
+  white-space:nowrap;flex:none;
+  appearance:none;-webkit-appearance:none;
+}
+/* \u53EF\u70B9\u6001\uFF1Abutton \u6E32\u67D3\uFF08\u89C1 Chip.ts\uFF09\uFF0C\u5149\u6807 + hover \u52A0\u6DF1\u3002 */
+.dsh-tdt-chip--clickable{cursor:pointer;transition:background-color var(--tdt-dur-fast) var(--tdt-ease);}
+.dsh-tdt-chip--clickable:hover:not(:disabled){background:var(--tdt-chip-bg-hover)}
+.dsh-tdt-chip:focus-visible{outline:2px solid var(--tdt-focus);outline-offset:1px}
+.dsh-tdt-chip:disabled{cursor:default;color:var(--tdt-fg-3)}
+@media (prefers-reduced-motion: reduce){.dsh-tdt-chip{transition:none}}
 `;
 
 // dist/explorer/explorer-css.js
@@ -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)
@@ -1306,7 +1312,7 @@ function Modal(props) {
     onClick: (e) => e.stopPropagation()
   }, props.hideHeader === true || props.title === void 0 && props.onClose === void 0 ? null : (0, import_react4.createElement)("div", { className: "dsh-tdt-modal__head" }, (0, import_react4.createElement)("div", { className: "dsh-tdt-modal__title" }, props.title ?? ""), props.onClose === void 0 ? null : (0, import_react4.createElement)("button", {
     type: "button",
-    className: "dsh-tdt-picker__trigger",
+    className: "dsh-tdt-modal__close",
     "aria-label": tt("modalClose"),
     onClick: () => props.onClose?.()
   }, "\u2715")), (0, import_react4.createElement)("div", { className: "dsh-tdt-modal__body" }, props.children ?? null), props.footer === void 0 ? null : (0, import_react4.createElement)("div", { className: "dsh-tdt-modal__foot" }, props.footer)));
@@ -1367,12 +1373,11 @@ function showToast(message, opts) {
   el.className = `dsh-tdt-toast${variant === "info" ? "" : ` dsh-tdt-toast--${variant}`}`;
   el.textContent = message;
   host.appendChild(el);
-  const timer = setTimeout(() => {
+  setTimeout(() => {
     el.remove();
     if (host.childElementCount === 0)
       host.remove();
   }, opts?.durationMs ?? DEFAULT_MS);
-  el.addEventListener("remove", () => clearTimeout(timer));
 }
 function ensureHost() {
   const found = document.getElementById(HOST_ID);
@@ -1743,11 +1748,255 @@ 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" },
@@ -1767,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})`,
+                background: `var(${t3.cssVar})`,
                 border: "1px solid var(--tdt-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(--tdt-fg-4)" } }, t3.cssVar)
           )
         )
       )
@@ -1792,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'
 
@@ -1803,13 +2052,13 @@ 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"
+        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)("");
@@ -1823,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" } },
@@ -1838,7 +2087,7 @@ 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" } },
@@ -1847,7 +2096,7 @@ function ButtonsSection() {
           { 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)(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" }),
@@ -1857,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" } },
@@ -1935,7 +2184,7 @@ function ButtonsSection() {
   );
 }
 
-// demo/sections/pickers.tsx
+// packages/demo/src/sections/pickers.tsx
 var import_react21 = require("react");
 var MODELS = [
   {
@@ -1963,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" } },
@@ -1998,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" } },
@@ -2008,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" } },
@@ -2029,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");
@@ -2042,7 +2291,10 @@ function FeedbackSection() {
     null,
     (0, import_react22.createElement)(
       Demo,
-      { title: "Modal", hint: "\u81EA\u7ED8 overlay\uFF08\u4E0D\u7528 portal\uFF09\uFF1B\u70B9\u906E\u7F69 / Esc / \u2715 \u90FD\u80FD\u5173" },
+      {
+        title: "Modal",
+        hint: t2("feedbackModalHint")
+      },
       (0, import_react22.createElement)(
         "div",
         null,
@@ -2056,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" } },
@@ -2080,14 +2332,14 @@ function FeedbackSection() {
         (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"
+          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);
@@ -2096,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" } },
@@ -2140,7 +2392,7 @@ 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" } },
@@ -2184,16 +2436,20 @@ function DisplaySection() {
     ),
     (0, import_react23.createElement)(
       Demo,
-      { title: "Chip / SectionHead / MarqueeText / LiveText" },
+      {
+        title: "Chip / SectionHead / MarqueeText / LiveText",
+        hint: t2("displayChipHint")
+      },
       (0, import_react23.createElement)(
         "div",
         { style: { display: "flex", flexDirection: "column", gap: "12px" } },
         (0, import_react23.createElement)(
           "div",
-          { style: { display: "flex", gap: "6px", flexWrap: "wrap" } },
+          { style: { display: "flex", gap: "6px", flexWrap: "wrap", alignItems: "center" } },
           (0, import_react23.createElement)(Chip, null, "#npm"),
           (0, import_react23.createElement)(Chip, null, "#\u6784\u5EFA"),
-          (0, import_react23.createElement)(Chip, { onClick: () => showToast("\u70B9\u4E86 chip") }, "#\u53EF\u70B9")
+          (0, import_react23.createElement)(Chip, { onClick: () => showToast("\u70B9\u4E86 chip") }, "#\u53EF\u70B9"),
+          (0, import_react23.createElement)(Chip, null, "\u4E00\u6574\u6BB5\u6BD4\u8F83\u957F\u7684\u6807\u7B7E\u6587\u5B57\uFF0C\u5BBD\u5EA6\u5E94\u8BE5\u8DDF\u7740\u6587\u5B57\u8D70")
         ),
         (0, import_react23.createElement)(SectionHead, { icon: "\u25B8", title: "\u5206\u533A\u6807\u9898", right: (0, import_react23.createElement)(Button, { size: "sm" }, "\u64CD\u4F5C") }),
         (0, import_react23.createElement)(
@@ -2207,128 +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]}`;
-}
-
-// 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"],
@@ -2343,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" } },
@@ -2375,7 +2511,7 @@ 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)" };
 
-// demo/sections/explorer.tsx
+// packages/demo/src/sections/explorer.tsx
 var import_react27 = require("react");
 
 // dist/explorer/ExplorerPanel.js
@@ -2385,25 +2521,6 @@ var import_react26 = require("react");
 var import_react25 = require("react");
 
 // dist/explorer/types.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 previewKindOf(path) {
   if (mimeOf(path) !== void 0)
     return "image";
@@ -2443,16 +2560,6 @@ function previewKindOf(path) {
   ]);
   return textLike.has(ext) ? "text" : "unsupported";
 }
-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}`;
-}
 
 // dist/explorer/preview/index.js
 function FilePreview(props) {
@@ -2587,7 +2694,7 @@ function ExplorerPanel(props) {
   }))));
 }
 
-// demo/mock.ts
+// packages/demo/src/mock.ts
 var TREE = {
   ".": [
     { name: "src", type: "directory" },
@@ -2722,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",
@@ -2761,7 +2868,7 @@ function ExplorerSection() {
   );
 }
 
-// demo/sections/session.tsx
+// packages/demo/src/sections/session.tsx
 var import_react29 = require("react");
 
 // dist/session/index.js
@@ -2824,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",
@@ -2853,7 +2960,7 @@ function SessionSection() {
   }
 }
 
-// demo/sections/index.tsx
+// packages/demo/src/sections/index.tsx
 function Demo(props) {
   return (0, import_react30.createElement)(
     "section",
@@ -2896,21 +3003,21 @@ function SectionHead2(props) {
   );
 }
 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()
   );
 }
@@ -2921,11 +3028,23 @@ var ALIAS_TOKEN_NAMES = ["accent", "active", "border", "border-faint", "border-h
 // packages/demo/src/client/index.tsx
 var PANEL_ID = "dsh-plugin-core-demo";
 var PREFIX = "dshpc";
+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 aliasCss() {
   const decls = ALIAS_TOKEN_NAMES.map((n) => `--tdt-${n}:var(--${PREFIX}-${n})`);
   return `body{${decls.join(";")}}`;
 }
 function DemoPage() {
+  useLocaleTick();
   const [active, setActive] = (0, import_react31.useState)(ALL_SECTIONS[0].id);
   return (0, import_react31.createElement)(
     "div",
@@ -2965,7 +3084,7 @@ function DemoPage() {
               marginBottom: "2px"
             }
           },
-          s.title
+          t2(s.titleKey)
         )
       )
     ),
@@ -2998,14 +3117,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() {
@@ -3029,12 +3148,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.0.1",
+  "version": "0.1.3",
   "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",