dsh-plugin-core-demo 0.7.3 → 0.7.4

package/dist/client.js

@@ -146,9 +146,9 @@ var FIELD_CSS = `
 .dshpc-input--md{height:var(--dshpc-control-h-md);padding:0 10px;font-size:var(--dshpc-font-md);line-height:var(--dshpc-line-md);}
 .dshpc-input--lg{height:var(--dshpc-control-h-lg);padding:0 12px;font-size:var(--dshpc-font-md);line-height:var(--dshpc-line-md);}
 .dshpc-input::placeholder{color:var(--dshpc-fg-dim);}
-/* type="search" \u7684\u6E05\u7A7A\u94AE\u662F\u6D4F\u89C8\u5668 UA \u753B\u7684\uFF08::-webkit-search-cancel-button\uFF09\uFF0C\u9ED8\u8BA4\u7BAD\u5934\u5149\u6807\uFF1A
-   \u770B\u7740\u50CF\u4E0D\u53EF\u70B9\u3002\u5B83\u662F\u771F\u6309\u94AE\uFF0C\u8865\u624B\u578B\uFF08Chromium / Safari \u4E13\u5C5E\u4F2A\u5143\u7D20\uFF1BFirefox \u6CA1\u6709\u8FD9\u4E2A\u94AE\uFF09\u3002 */
-.dshpc-input:not(:disabled)::-webkit-search-cancel-button{cursor:pointer;}
+/* type="search"\uFF1A\u539F\u751F\u6E05\u9664\u94AE\uFF08::-webkit-search-cancel-button\uFF09\u6574\u4E2A\u9690\u6389\uFF0C\u6362\u7EC4\u4EF6\u81EA\u5DF1\u6302\u7684 plain IconButton
+   \u2014\u2014 \u539F\u751F\u90A3\u4E2A\u5404\u5B50\u7CFB\u7EDF\u957F\u76F8\u4E0D\u4E00\u3001\u8FD8\u4E0D\u5403 token\uFF082026-10-28 \u7528\u6237\uFF1A\u4E0D\u597D\u770B\uFF0C\u8981\u6570\u5B57\u6846\u52A0\u51CF\u53F7\u90A3\u79CD\uFF09\u3002 */
+.dshpc-iwrap .dshpc-input::-webkit-search-cancel-button{display:none;}
 .dshpc-input:focus{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus);}
 .dshpc-input--error{border-color:var(--dshpc-danger);}
 .dshpc-input:disabled{cursor:default;opacity:.5;}
@@ -163,6 +163,16 @@ var FIELD_CSS = `
 /* \u7981\u7528\u65F6\u56FE\u6807\u8DDF\u8F93\u5165\u6846\u4E00\u8D77\u53D8\u6DE1\uFF08\u8F93\u5165\u6846\u81EA\u5DF1\u5DF2\u6709 opacity:.5\uFF0C\u56FE\u6807\u4E0D\u5728\u5B83\u91CC\u9762\uFF0C\u5F97\u5355\u72EC\u8DDF\u4E00\u4E0B\uFF09\u3002 */
 .dshpc-iwrap:has(> .dshpc-input:disabled) > .dshpc-iwrap__icon{opacity:.5;}
 
+/* \u641C\u7D22\u6846\u7684\u6E05\u7A7A\u94AE\uFF08Field.ts \u5728\u300C\u6709\u7126\u70B9 + \u6709\u5185\u5BB9\u300D\u65F6\u624D\u6302\u51FA\u6765\uFF09\uFF1A**\u5E76\u8FDB\u6846\u91CC**\uFF0C\u4E0E\u6570\u5B57\u6846\u7684 \u2212 / +
+   \u540C\u5F62\u6001 \u2014\u2014 \u6574\u6BB5\u540C\u9AD8\u3001\u5DE6\u76F4\u53F3\u5706\u3001hover \u5E95\u8272\u94FA\u6EE1\u8FD9\u4E00\u683C\uFF082026-10-28 \u7528\u6237\uFF1A\u4E0D\u8981\u4E00\u9897\u60AC\u5728\u53F3\u8FB9\u7684\u5C0F\u6309\u94AE\uFF09\u3002
+   \u5411\u5185\u8BA9 1px\uFF0C\u514D\u5F97\u5E95\u8272\u538B\u4F4F\u8F93\u5165\u6846\u81EA\u5DF1\u7684\u8FB9\u6846\u3002 */
+.dshpc-iwrap__clear.dshpc-iconbtn{position:absolute;right:1px;top:1px;bottom:1px;width:auto;aspect-ratio:1;
+  border-radius:0 var(--dshpc-radius-md) var(--dshpc-radius-md) 0;font-size:var(--dshpc-font-md);}
+/* \u6587\u5B57\u8BA9\u5F00\u8FD9\u4E00\u6BB5\uFF08\u5BBD\u5EA6 = \u63A7\u4EF6\u9AD8 - 2\uFF0C\u6545\u6309\u6863\u4F4D\u8865\uFF09\u3002 */
+.dshpc-iwrap--clear > .dshpc-input{padding-right:calc(var(--dshpc-control-h-md) + 3px);}
+.dshpc-iwrap--clear.dshpc-iwrap--sm > .dshpc-input{padding-right:calc(var(--dshpc-control-h-sm) + 3px);}
+.dshpc-iwrap--clear.dshpc-iwrap--lg > .dshpc-input{padding-right:calc(var(--dshpc-control-h-lg) + 3px);}
+
 .dshpc-pfx{display:inline-flex;align-items:center;box-sizing:border-box;overflow:hidden;
   border:1px solid var(--dshpc-border);border-radius:var(--dshpc-radius-md);background:var(--dshpc-surface-1);color:var(--dshpc-fg);}
 .dshpc-pfx--sm{height:var(--dshpc-control-h-sm);}
@@ -6231,6 +6241,13 @@ function notify(message, opts) {
 
 // dist/ui/Segmented.js
 var import_react22 = require("react");
+function countText(value) {
+  if (value === void 0)
+    return null;
+  if (typeof value === "number")
+    return value > 0 ? String(value) : null;
+  return value === "" ? null : value;
+}
 function Segmented(props) {
   ensureControls();
   ensureControls();
@@ -6299,6 +6316,8 @@ function Segmented(props) {
           onChange(item.value);
         }
       };
+      const count3 = countText(item.count);
+      const badge = countText(item.badge);
       const itemButton = (0, import_react22.createElement)("button", {
         key: item.value,
         type: "button",
@@ -6307,7 +6326,7 @@ function Segmented(props) {
         "aria-pressed": on,
         disabled,
         onClick: handle
-      }, item.label, item.count !== void 0 && item.count > 0 ? (0, import_react22.createElement)("span", { className: "dshpc-seg__count" }, String(item.count)) : null, item.badge !== void 0 && item.badge > 0 ? (0, import_react22.createElement)("span", { className: "dshpc-seg__badge" }, String(item.badge)) : null);
+      }, item.label, count3 === null ? null : (0, import_react22.createElement)("span", { className: "dshpc-seg__count" }, count3), badge === null ? null : (0, import_react22.createElement)("span", { className: "dshpc-seg__badge" }, badge));
       if (item.tooltip !== void 0 && renderer2 !== void 0) {
         return renderer2({ label: item.tooltip, side: "top", children: itemButton });
       }
@@ -6699,7 +6718,7 @@ function PanelDock(props) {
   const panelRefs = (0, import_react28.useRef)(/* @__PURE__ */ new Map());
   const panes = panesOf(props.children);
   const { defaultWidth, minWidth: fallbackMin } = props.dock.defaults;
-  const widthOf = (pane) => state.widths[pane.id] ?? clampWidth(pane.width ?? defaultWidth, pane.minWidth ?? fallbackMin, pane.maxWidth);
+  const widthOf = (pane) => clampWidth(state.widths[pane.id] ?? pane.width ?? defaultWidth, pane.minWidth ?? fallbackMin, pane.maxWidth);
   const earLabelOf = (id3) => {
     const pane = panes.find((item) => item.id === id3);
     if (pane === void 0)
@@ -6880,6 +6899,9 @@ function sizeClass(size4) {
 function Input(props) {
   ensureControls();
   const { value, onChange, placeholder: placeholder2, size: size4 = "lg", error, disabled, type: type3, icon: icon2, className: className2, style: style2 } = props;
+  const [focused, setFocused] = (0, import_react29.useState)(false);
+  const search = type3 === "search";
+  const showClear = search && value !== "" && focused && disabled !== true;
   const input = (0, import_react29.createElement)("input", {
     ref: props.inputRef,
     type: type3 ?? "text",
@@ -6894,9 +6916,38 @@ function Input(props) {
       onChange(event.target.value);
     },
     onKeyDown: props.onKeyDown,
-    onBlur: props.onBlur
+    onFocus: () => {
+      setFocused(true);
+    },
+    onBlur: () => {
+      setFocused(false);
+      if (props.onBlur !== void 0)
+        props.onBlur();
+    }
   });
-  return withHint(icon2 === void 0 || icon2 === null ? input : (0, import_react29.createElement)("span", { className: `dshpc-iwrap dshpc-iwrap${sizeClass(size4)}` }, (0, import_react29.createElement)("span", { className: "dshpc-iwrap__icon" }, icon2), input), props.hint);
+  const hasIcon = icon2 !== void 0 && icon2 !== null;
+  if (!hasIcon && !search)
+    return withHint(input, props.hint);
+  return withHint((0, import_react29.createElement)(
+    "span",
+    { className: `dshpc-iwrap dshpc-iwrap${sizeClass(size4)}${showClear ? " dshpc-iwrap--clear" : ""}` },
+    hasIcon ? (0, import_react29.createElement)("span", { className: "dshpc-iwrap__icon" }, icon2) : null,
+    input,
+    // 只在 mousedown 上拦焦点：不拦的话 input 先 blur ⇒ 按钮被卸掉 ⇒ 随后的 click 落空。
+    showClear ? (0, import_react29.createElement)(IconButton, {
+      className: "dshpc-iwrap__clear",
+      variant: "plain",
+      size: size4,
+      icon: "\xD7",
+      label: "\u6E05\u7A7A",
+      onMouseDown: (event) => {
+        event.preventDefault();
+      },
+      onClick: () => {
+        onChange("");
+      }
+    }) : null
+  ), props.hint);
 }
 function NumberInput(props) {
   ensureControls();
@@ -56940,8 +56991,8 @@ var docData = {
         "en": "IconButton: variant plain|outline|danger (default plain), size (default lg), icon (required), label (required, doubles as a11y name and title)."
       },
       {
-        "zh": "Segmented\uFF1A`items`\uFF08\u5FC5\u586B\uFF09\u652F\u6301\u5355\u9009 / \u591A\u9009\uFF0C`size`\uFF08\u9ED8\u8BA4 lg\uFF1B\u4E09\u6863\u603B\u9AD8 24 / 28 / 32\uFF09\u3001`bordered`\uFF081px \u5916\u6846\uFF0C\u603B\u9AD8\u4E0D\u53D8\uFF09\u3001`multiple`\uFF08\u591A\u9009\uFF09\u3002\u5916\u89C2\u53EA\u6709\u4E00\u5957\uFF1A\u7070\u5E95\u8F68\u9053 + \u767D\u8272\u9009\u4E2D\u7247\uFF0C\u9009\u4E2D\u7247\u7684\u63CF\u8FB9\u73AF\u4E0E\u9634\u5F71\u7531\u5BBF\u4E3B elevation token \u63D0\u4F9B\uFF08\u79BB\u7EBF\u515C\u5E95\u503C\u6CA1\u6709\u90A3\u5708\u73AF\uFF09\u3002",
-        "en": "Segmented: `items` (required) supports single or multiple selection; `size` (default lg; totals 24 / 28 / 32), `bordered` (1px outer frame, same total height), `multiple` (multi-select). One look only: grey track + white selected pill; its stroke ring and shadow come from the host elevation token (the offline fallback has no ring)."
+        "zh": "Segmented\uFF1A`items`\uFF08\u5FC5\u586B\uFF09\u652F\u6301\u5355\u9009 / \u591A\u9009\uFF0C`size`\uFF08\u9ED8\u8BA4 lg\uFF1B\u4E09\u6863\u603B\u9AD8 24 / 28 / 32\uFF09\u3001`bordered`\uFF081px \u5916\u6846\uFF0C\u603B\u9AD8\u4E0D\u53D8\uFF09\u3001`multiple`\uFF08\u591A\u9009\uFF09\u3002\u5916\u89C2\u53EA\u6709\u4E00\u5957\uFF1A\u7070\u5E95\u8F68\u9053 + \u767D\u8272\u9009\u4E2D\u7247\uFF0C\u9009\u4E2D\u7247\u7684\u63CF\u8FB9\u73AF\u4E0E\u9634\u5F71\u7531\u5BBF\u4E3B elevation token \u63D0\u4F9B\uFF08\u79BB\u7EBF\u515C\u5E95\u503C\u6CA1\u6709\u90A3\u5708\u73AF\uFF09\u3002\u6BB5\u5185 `count`\uFF08\u5F31\u5316\u7070\u5B57\uFF09/ `badge`\uFF08\u7EA2\u89D2\u6807\uFF09\u63A5\u53D7 `number | string`\uFF1A\u6570\u5B57 \u22640 \u4E0D\u663E\u793A\uFF0C\u5B57\u7B26\u4E32\u539F\u6837\u663E\u793A\uFF08\u5982 `1K` / `99+`\uFF09\u3002",
+        "en": "Segmented: `items` (required) supports single or multiple selection; `size` (default lg; totals 24 / 28 / 32), `bordered` (1px outer frame, same total height), `multiple` (multi-select). One look only: grey track + white selected pill; its stroke ring and shadow come from the host elevation token (the offline fallback has no ring). An item\u2019s `count` (muted text) and `badge` (red pill) take `number | string`: numbers \u22640 render nothing, strings render as given (e.g. `'1K'` / `'99+'`)."
       }
     ],
     "api": [
@@ -57048,8 +57099,8 @@ var docData = {
             "type": "value onChange(v) size(\u9ED8\u8BA4 sm) error disabled type icon placeholder inputRef onKeyDown onBlur aria-label title hint",
             "def": "\u2014",
             "desc": {
-              "zh": "\u57FA\u7840\u8F93\u5165\u6846\uFF1Berror \u63CF\u7EA2\uFF1Bhint \u7ED9\u5B57\u7B26\u4E32\u5373\u81EA\u52A8\u6302\u6807\u51C6\u95EE\u53F7\u63D0\u793A\uFF1Bicon \u662F\u5DE6\u4FA7\u56FE\u6807\u69FD\uFF08\u4E0D\u5403\u70B9\u51FB\uFF0C\u5C3A\u5BF8\u53D6 fieldMetricsOf(size).icon\uFF09",
-              "en": "Basic input; error turns it red; passing hint as a string auto-attaches a standard question-mark hint; icon is the leading icon slot (does not swallow clicks; size from fieldMetricsOf(size).icon)"
+              "zh": "\u57FA\u7840\u8F93\u5165\u6846\uFF1Berror \u63CF\u7EA2\uFF1Bhint \u7ED9\u5B57\u7B26\u4E32\u5373\u81EA\u52A8\u6302\u6807\u51C6\u95EE\u53F7\u63D0\u793A\uFF1Bicon \u662F\u5DE6\u4FA7\u56FE\u6807\u69FD\uFF08\u4E0D\u5403\u70B9\u51FB\uFF0C\u5C3A\u5BF8\u53D6 fieldMetricsOf(size).icon\uFF09\uFF1Btype=search \u65F6\u805A\u7126\u4E14\u6709\u5185\u5BB9\u624D\u5728\u53F3\u4FA7\u51FA\u6E05\u7A7A\u94AE",
+              "en": "Basic input; error turns it red; passing hint as a string auto-attaches a standard question-mark hint; icon is the leading icon slot (does not swallow clicks; size from fieldMetricsOf(size).icon); with type=search a clear button appears on the right only while focused and non-empty"
             }
           },
           {
@@ -58632,7 +58683,7 @@ const [kw, setKw] = useState('')
 
 // hint \u53C2\u6570\u7248\uFF1A\u95EE\u53F7\u63D0\u793A\u7531\u7EC4\u4EF6\u81EA\u5DF1\u6302\uFF0C\u4E0D\u7528\u624B\u52A8\u62FC FieldHint
 <Input value={text} onChange={setText} placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D" hint="\u7528\u6237\u540D\u53EA\u80FD\u5305\u542B\u5B57\u6BCD\u3001\u6570\u5B57\u4E0E\u8FDE\u5B57\u7B26\u3002" />
-// \u641C\u7D22\u6846\uFF1Atype="search" \u53EA\u900F\u4F20\u539F\u751F input\uFF0C\u53F3\u4FA7\u5C0F\u53C9\u662F\u6D4F\u89C8\u5668\u81EA\u5E26\u7684\u6E05\u7A7A\u94AE\uFF08\u4E0D\u662F\u6838\u5FC3\u5E93\u753B\u7684\uFF09
+// \u641C\u7D22\u6846\uFF1Atype="search" \u21D2 \u805A\u7126\u4E14\u6709\u5185\u5BB9\u65F6\u53F3\u4FA7\u624D\u51FA\u6E05\u7A7A\u94AE\uFF08\u6570\u5B57\u6846\u52A0\u51CF\u53F7\u540C\u6B3E\u7684 plain IconButton\uFF0C\u539F\u751F\u90A3\u679A\u5DF2\u9690\u6389\uFF09
 // icon \u662F\u5DE6\u4FA7\u56FE\u6807\u69FD\uFF08\u4E0D\u5403\u70B9\u51FB\uFF0C\u70B9\u5728\u56FE\u6807\u4E0A\u7167\u6837\u805A\u7126\uFF09\uFF1B\u56FE\u6807\u5C3A\u5BF8\u6309\u6863\u53D6 fieldMetricsOf(size).icon
 <Input type="search" icon={<IconSearchOutlineRegular size={16} />} value={kw} onChange={setKw} placeholder="\u641C\u7D22" />
 // \u6821\u9A8C\u5931\u8D25\u6001\uFF1A\u63CF\u7EA2
@@ -58708,7 +58759,7 @@ function InputPage() {
           "div",
           { style: { display: "flex", alignItems: "center", gap: "6px" } },
           (0, import_react57.createElement)("span", { style: { color: "var(--dshpc-fg-2)", fontSize: "13px", flex: "none" } }, "\u641C\u7D22"),
-          // 左侧图标槽（icon）+ 原生清除钮（type="search" 透传，小叉由浏览器画）
+          // 左侧图标槽（icon）+ 聚焦且有内容才出的清空钮（type="search"）
           (0, import_react57.createElement)(Input, { type: "search", icon: (0, import_react57.createElement)(import_dsh_client_ui_primitives2.IconSearchOutlineRegular, { size: 16 }), value: kw, onChange: setKw, placeholder: "\u641C\u7D22" })
         ),
         (0, import_react57.createElement)(Input, { value: "bad value", onChange: () => {
@@ -61176,8 +61227,7 @@ function openFilePreview(options) {
     maxPanels: 1,
     defaultWidth: options.width ?? 460,
     minWidth: options.minWidth ?? 320,
-    // 每次打开都从默认宽度起步（预览是临时面板，不继承上次的落位）。
-    storageKey: false,
+    // 宽度按面板 id 记（用户 2026-10-28：拖过一次，下次弹出还是这个宽）。
     // 关钮被点 ⇒ 整个挂载体回收（close 内部幂等，不受 onClose 回调顺序影响）。
     onClose: () => {
       close();
@@ -61845,9 +61895,9 @@ function ReferencePage() {
           "tbody",
           null,
           [
-            [t3("buildCore"), `v${"0.7.3"}`],
-            [t3("buildDemo"), `v${"0.7.3"}`],
-            [t3("buildStamp"), "261028-084445-341"]
+            [t3("buildCore"), `v${"0.7.4"}`],
+            [t3("buildDemo"), `v${"0.7.4"}`],
+            [t3("buildStamp"), "261028-090558-450"]
           ].map(
             ([label, value]) => (0, import_react67.createElement)(
               "tr",
@@ -62169,9 +62219,9 @@ function DemoPage() {
               lineHeight: "14px"
             }
           },
-          (0, import_react69.createElement)("span", null, `core v${"0.7.3"}`),
-          (0, import_react69.createElement)("span", null, `demo v${"0.7.3"}`),
-          (0, import_react69.createElement)("span", { style: { marginTop: "4px", fontSize: "9px" } }, "261028-084445-341")
+          (0, import_react69.createElement)("span", null, `core v${"0.7.4"}`),
+          (0, import_react69.createElement)("span", null, `demo v${"0.7.4"}`),
+          (0, import_react69.createElement)("span", { style: { marginTop: "4px", fontSize: "9px" } }, "261028-090558-450")
         )
       )
     ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-plugin-core-demo",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "The shared UI foundation for DSH plugins, with a live component preview: design tokens, common controls, workspace browsing and notifications maintained in one place — install it to preview every component in a real host.",
   "icon": "./assets/icon-components.svg",
   "keywords": [