@lijinmei-810/dev-inspector 0.1.2 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/dev-inspector.css +3216 -93
  2. package/dist/index.cjs +3930 -347
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +3067 -100
  5. package/dist/index.css.map +1 -1
  6. package/dist/index.d.cts +26 -2
  7. package/dist/index.d.ts +26 -2
  8. package/dist/index.js +3931 -348
  9. package/dist/index.js.map +1 -1
  10. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  // src/DevInspector.tsx
2
2
  import { useState, useEffect, useRef, useCallback } from "react";
3
- import { ArrowDown, ArrowUp, CircleHelp, Component as ComponentIcon, Minus, Plus, RotateCcw, Trash2, X } from "lucide-react";
3
+ import { ArrowDown, ArrowLeft, ArrowUp, ChevronDown, CircleHelp, Component as ComponentIcon, Library as LibraryIcon, Minus, Plus, RotateCcw, Trash2, X } from "lucide-react";
4
4
 
5
5
  // src/DevInspectorProvider.tsx
6
6
  import { createContext, useContext } from "react";
@@ -143,7 +143,8 @@ var defaultDevInspectorConfig = {
143
143
  handoff: "/__dev/handoff",
144
144
  reveal: "/__dev/reveal"
145
145
  },
146
- tokens: FALLBACK_TOKENS
146
+ tokens: FALLBACK_TOKENS,
147
+ componentPreviews: []
147
148
  };
148
149
  function mergeDevInspectorConfig(overrides) {
149
150
  return {
@@ -173,6 +174,90 @@ function useDevInspectorConfig() {
173
174
  return useContext(DevInspectorConfigContext);
174
175
  }
175
176
 
177
+ // src/plugins/component-maker.ts
178
+ function getComponentMakerPreview(context) {
179
+ if (context.recognitionLines.length) return context.recognitionLines;
180
+ return ["\u5F53\u524D\u662F\u666E\u901A\u5143\u7D20\uFF1A\u8BF7\u5224\u65AD\u662F\u5426\u5E94\u6C89\u6DC0\u4E3A\u7EC4\u4EF6\u3001primitive \u6216\u4FDD\u6301\u5C40\u90E8\u5143\u7D20\u3002"];
181
+ }
182
+ function getComponentMakerSpecLines(draft) {
183
+ const editableParts = draft.editableParts ?? [];
184
+ const editablePartLines = editableParts.filter((part) => part.editable).map((part) => `${part.label}=${part.value || "\u7A7A"}\uFF08\u5B57\u6BB5\u540D ${part.fieldName || part.id}\uFF09`);
185
+ const readonlyPartLines = editableParts.filter((part) => !part.editable).map((part) => `${part.label}=${part.value || "\u7A7A"}\uFF08\u53EA\u8BFB${part.readonlyReason ? ` / ${part.readonlyReason}` : ""}\uFF09`);
186
+ return [
187
+ ["\u5F52\u5C5E\u65B9\u5F0F", draft.sourceMode],
188
+ ["\u52A8\u4F5C", draft.action],
189
+ ["\u5F52\u7C7B", draft.classification ?? ""],
190
+ ["\u7EC4\u4EF6\u540D", draft.componentName],
191
+ ["\u4F7F\u7528\u573A\u666F", draft.usage ?? ""],
192
+ ["\u53D8\u4F53 / \u72B6\u6001", draft.variants],
193
+ ["\u53EF\u6539\u5185\u5BB9", editablePartLines.length ? editablePartLines.join("\uFF1B") : draft.slots],
194
+ ["\u53EA\u8BFB\u5185\u5BB9", readonlyPartLines.join("\uFF1B")],
195
+ ["\u6837\u5F0F\u89C4\u5219", draft.styleRules]
196
+ ].flatMap(([label, value]) => {
197
+ const normalized = value.trim();
198
+ return normalized ? [`${label}\uFF1A${normalized}`] : [];
199
+ });
200
+ }
201
+ function formatComponentMakerSpecDraft(draft) {
202
+ const lines = getComponentMakerSpecLines(draft);
203
+ return lines.length ? lines.join("\uFF1B") : "\u672A\u586B\u5199\u7EC4\u4EF6\u89C4\u683C";
204
+ }
205
+ function getComponentMakerVariantLines(draft) {
206
+ const items = (draft.items ?? []).filter((item) => item.name.trim());
207
+ if (items.length) {
208
+ return [
209
+ `\u53D8\u4F53\u7EC4\uFF1A${items.length} \u4E2A`,
210
+ ...draft.name.trim() ? [`\u4EE3\u7801\u540D\uFF1A${draft.name.trim()}`] : [],
211
+ ...items.map((item) => {
212
+ const label = item.label?.trim() || item.name.trim();
213
+ const desc = item.description?.trim();
214
+ return [
215
+ `${label}\uFF08${item.dimension.trim() || "\u81EA\u5B9A\u4E49"} / ${item.name.trim()}\uFF09`,
216
+ `\u57FA\u4E8E\uFF1A${item.base.trim() || draft.base.trim() || "\u5F53\u524D\u6837\u5F0F"}`,
217
+ `\u89C4\u5219\uFF1A${item.rules.trim()}`,
218
+ ...desc ? [`\u8BF4\u660E\uFF1A${desc}`] : []
219
+ ].join("\uFF1B");
220
+ })
221
+ ];
222
+ }
223
+ return [
224
+ ["\u7EF4\u5EA6", draft.dimension],
225
+ ["\u65B0\u53D8\u4F53\u540D", draft.name],
226
+ ["\u57FA\u4E8E", draft.base],
227
+ ["\u53D8\u5316\u89C4\u5219", draft.rules]
228
+ ].flatMap(([label, value]) => {
229
+ const normalized = value.trim();
230
+ return normalized ? [`${label}\uFF1A${normalized}`] : [];
231
+ });
232
+ }
233
+ function formatComponentMakerVariantDraft(draft) {
234
+ const lines = getComponentMakerVariantLines(draft);
235
+ return lines.length ? lines.join("\uFF1B") : "\u672A\u586B\u5199\u65B0\u53D8\u4F53\u89C4\u683C";
236
+ }
237
+ function buildComponentMakerPrompt(context) {
238
+ const recognition = getComponentMakerPreview(context).map((line) => `- ${line}`).join("\n");
239
+ const specLines = context.specDraft ? getComponentMakerSpecLines(context.specDraft) : [];
240
+ const variantLines = context.variantDraft ? getComponentMakerVariantLines(context.variantDraft) : [];
241
+ const target = context.isRecognizedComponent ? "\u8BF7\u57FA\u4E8E\u5F53\u524D\u5BF9\u8C61\u8865\u9F50\u7EC4\u4EF6\u5B9A\u4E49\u3001props\u3001variant/status\u3001\u53EF\u6539\u5185\u5BB9\u89C4\u5219\u548C\u793A\u4F8B\u7528\u6CD5\uFF1B\u53EA\u5F00\u653E\u7EC4\u4EF6\u5141\u8BB8\u4FEE\u6539\u7684\u53C2\u6570\u3002" : "\u8BF7\u5224\u65AD\u662F\u5426\u9700\u8981\u65B0\u589E\u7EC4\u4EF6\uFF1B\u5982\u679C\u9700\u8981\uFF0C\u63D0\u70BC\u7EC4\u4EF6\u540D\u79F0\u3001\u53EF\u914D\u7F6E\u53C2\u6570\u3001\u53EF\u6539\u5185\u5BB9\u3001variant \u548C\u9ED8\u8BA4\u6837\u5F0F\u3002\u82E5\u4E0D\u9002\u5408\u7EC4\u4EF6\u5316\uFF0C\u8BF7\u8BF4\u660E\u539F\u56E0\u3002";
242
+ return [
243
+ "DevInspector \u7EC4\u4EF6\u5236\u4F5C\u4EFB\u52A1",
244
+ `\u9875\u9762\uFF1A${context.pageTitle}\uFF08${context.pageUrl}\uFF09`,
245
+ `\u9009\u4E2D\u5BF9\u8C61\uFF1A${context.targetLabel}`,
246
+ `\u5B9A\u4F4D\u9009\u62E9\u5668\uFF1A${context.selector}`,
247
+ `\u4F5C\u7528\u8303\u56F4\uFF1A${context.scopeLabel}`,
248
+ "\u5F53\u524D\u8BC6\u522B\uFF1A",
249
+ recognition,
250
+ ...specLines.length ? ["\u7528\u6237\u786E\u8BA4\u89C4\u683C\uFF1A", specLines.map((line) => `- ${line}`).join("\n")] : [],
251
+ ...variantLines.length ? ["\u7528\u6237\u8981\u521B\u5EFA\u7684\u65B0\u53D8\u4F53\uFF1A", variantLines.map((line) => `- ${line}`).join("\n")] : [],
252
+ "\u76EE\u6807\uFF1A",
253
+ target,
254
+ "\u7EC4\u4EF6\u89C4\u683C\u539F\u5219\uFF1A",
255
+ "\u7528\u6237\u5728 Inspector \u4E2D\u786E\u8BA4\u7684\u53D8\u4F53\u3001\u72B6\u6001\u3001\u53EF\u6539\u5185\u5BB9\u3001\u53EA\u8BFB\u5185\u5BB9\u3001token\u3001\u81EA\u5B9A\u4E49\u6837\u5F0F\u548C\u672C\u6B21\u4FEE\u6539\u5185\u5BB9\u662F\u7EC4\u4EF6\u89C4\u683C\u8349\u7A3F\uFF1B\u4E0D\u8981\u9ED1\u76D2\u731C\u6D4B\uFF0C\u4F18\u5148\u6309\u8FD9\u4E9B\u7ED3\u6784\u5316\u4FE1\u606F\u843D\u4EE3\u7801\u3002",
256
+ "\u7EA6\u675F\uFF1A",
257
+ "\u4E0D\u8981\u624B\u6539 dist\uFF1B\u4F18\u5148\u5B9A\u4F4D\u6E90\u7801\u7EC4\u4EF6\u3001tokens \u548C\u6837\u5F0F\u6587\u4EF6\uFF1B\u4FDD\u7559\u4E1A\u52A1\u903B\u8F91\uFF0C\u53EA\u6C89\u6DC0\u7EC4\u4EF6\u7ED3\u6784\u548C\u6837\u5F0F\u5951\u7EA6\u3002"
258
+ ].join("\n");
259
+ }
260
+
176
261
  // src/DevInspector.tsx
177
262
  import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
178
263
  function calcDropPos(rect, dropHeight = 280, dropWidth = 280) {
@@ -234,11 +319,140 @@ var BORDER_STYLE_OPTIONS = [
234
319
  { label: "\u22EF", value: "dotted", title: "\u70B9\u7EBF" },
235
320
  { label: "\u2715", value: "none", title: "\u65E0" }
236
321
  ];
322
+ var EMPTY_COMPONENT_SPEC_DRAFT = {
323
+ sourceMode: "",
324
+ action: "",
325
+ classification: "",
326
+ componentName: "",
327
+ usage: "",
328
+ editableParts: [],
329
+ variants: "",
330
+ slots: "",
331
+ styleRules: ""
332
+ };
333
+ var EMPTY_COMPONENT_VARIANT_DRAFT = {
334
+ dimension: "",
335
+ name: "",
336
+ base: "",
337
+ rules: "",
338
+ items: []
339
+ };
237
340
  var SIZE_OPTIONS = [
238
341
  { label: "Fill", mode: "fill", value: "100%" },
239
342
  { label: "Hug", mode: "hug", value: "fit-content" },
240
343
  { label: "Fixed", mode: "fixed" }
241
344
  ];
345
+ var COMPONENT_TYPE_GROUP_LABELS = {
346
+ text: "\u6587\u672C",
347
+ action: "\u64CD\u4F5C",
348
+ structure: "\u7ED3\u6784",
349
+ data: "\u6570\u636E",
350
+ form: "\u8868\u5355",
351
+ media: "\u5A92\u4F53",
352
+ navigation: "\u5BFC\u822A"
353
+ };
354
+ var COMPONENT_TYPE_ALIASES = {
355
+ \u6807\u9898: "\u9875\u9762\u6807\u9898",
356
+ \u6587\u672C: "\u6B63\u6587",
357
+ \u6807\u7B7E: "\u72B6\u6001\u6807\u7B7E",
358
+ \u8F93\u5165\u6846: "\u8F93\u5165\u6846",
359
+ \u8868\u5355\u63A7\u4EF6: "\u8F93\u5165\u6846"
360
+ };
361
+ var COMPONENT_CONTAINER_OPTIONS = [
362
+ { key: "page", label: "\u9875\u9762", codePrefix: "page", hint: "\u9875\u9762\u7EA7\u5185\u5BB9\u6216\u9875\u9762\u9AA8\u67B6" },
363
+ { key: "card", label: "\u5361\u7247", codePrefix: "card", hint: "\u5361\u7247\u5185\u7684\u4FE1\u606F\u5757" },
364
+ { key: "menu", label: "\u83DC\u5355", codePrefix: "menu", hint: "\u83DC\u5355\u6216\u5217\u8868\u5BFC\u822A\u9879" },
365
+ { key: "form", label: "\u8868\u5355", codePrefix: "form", hint: "\u8868\u5355\u5B57\u6BB5\u3001\u63A7\u4EF6\u548C\u63D0\u793A" },
366
+ { key: "modal", label: "\u5F39\u7A97", codePrefix: "modal", hint: "\u5F39\u7A97\u3001\u62BD\u5C49\u6216\u6D6E\u5C42\u5185\u5BB9" },
367
+ { key: "list", label: "\u5217\u8868", codePrefix: "list", hint: "\u91CD\u590D\u5217\u8868\u6216\u8868\u683C\u5355\u5143" },
368
+ { key: "navigation", label: "\u5BFC\u822A", codePrefix: "nav", hint: "\u5BFC\u822A\u680F\u3001\u9762\u5305\u5C51\u548C\u5165\u53E3" },
369
+ { key: "action", label: "\u64CD\u4F5C\u533A", codePrefix: "action", hint: "\u6309\u94AE\u7EC4\u6216\u64CD\u4F5C\u5DE5\u5177\u533A" },
370
+ { key: "other", label: "\u5176\u4ED6", codePrefix: "section", hint: "\u6682\u672A\u660E\u786E\u8BED\u4E49\u7684\u533A\u57DF" }
371
+ ];
372
+ var COMPONENT_PURPOSE_OPTIONS = [
373
+ { label: "\u6807\u9898", codePart: "title", slotLabel: "\u6807\u9898\u6587\u5B57", hint: "\u6807\u9898\u6216\u4E3B\u89C6\u89C9\u6587\u5B57", group: "text" },
374
+ { label: "\u6B63\u6587", codePart: "text", slotLabel: "\u6587\u672C\u5185\u5BB9", hint: "\u6B63\u6587\u3001\u6BB5\u843D\u6216\u666E\u901A\u5185\u5BB9", group: "text" },
375
+ { label: "\u8BF4\u660E", codePart: "description", slotLabel: "\u8BF4\u660E\u6587", hint: "\u63CF\u8FF0\u3001\u63D0\u793A\u6216\u8F85\u52A9\u8BF4\u660E", group: "text" },
376
+ { label: "\u6807\u7B7E", codePart: "tag", slotLabel: "\u6807\u7B7E\u6587\u6848", hint: "\u5206\u7C7B\u6216\u77ED\u6807\u7B7E", group: "data" },
377
+ { label: "\u64CD\u4F5C\u5165\u53E3", codePart: "action", slotLabel: "\u64CD\u4F5C\u6587\u6848", hint: "\u4E3B\u8981\u64CD\u4F5C\u6216\u5165\u53E3\u6309\u94AE", group: "action" },
378
+ { label: "\u6309\u94AE\u6587\u6848", codePart: "button-label", slotLabel: "\u6309\u94AE\u6587\u6848", hint: "\u6309\u94AE\u5185\u53EF\u66FF\u6362\u6587\u6848", group: "text" },
379
+ { label: "\u5360\u4F4D\u63D0\u793A", codePart: "placeholder", slotLabel: "\u5360\u4F4D\u63D0\u793A", hint: "\u8F93\u5165\u63A7\u4EF6\u91CC\u7684 placeholder", group: "form" },
380
+ { label: "\u8F93\u5165\u63A7\u4EF6", codePart: "input", slotLabel: "\u8F93\u5165\u503C", hint: "\u8868\u5355\u8F93\u5165\u6216\u9009\u62E9\u63A7\u4EF6", group: "form" },
381
+ { label: "\u5E2E\u52A9\u8BF4\u660E", codePart: "help-text", slotLabel: "\u5E2E\u52A9\u8BF4\u660E", hint: "\u5B57\u6BB5\u5E2E\u52A9\u6216\u8865\u5145\u8BF4\u660E", group: "text" },
382
+ { label: "\u9519\u8BEF\u63D0\u793A", codePart: "error-message", slotLabel: "\u9519\u8BEF\u63D0\u793A", hint: "\u6821\u9A8C\u5931\u8D25\u6216\u9519\u8BEF\u8BF4\u660E", group: "form" },
383
+ { label: "\u6570\u503C", codePart: "value", slotLabel: "\u6570\u503C", hint: "\u6307\u6807\u3001\u6570\u91CF\u6216\u4EF7\u683C", group: "data" },
384
+ { label: "\u72B6\u6001", codePart: "status", slotLabel: "\u72B6\u6001\u6587\u6848", hint: "\u72B6\u6001\u5C55\u793A\u6216\u72B6\u6001\u6807\u7B7E", group: "data" },
385
+ { label: "\u56FE\u6807", codePart: "icon", slotLabel: "\u56FE\u6807\u540D\u79F0", hint: "\u56FE\u5F62\u7B26\u53F7\u6216 icon", group: "media" },
386
+ { label: "\u5185\u5BB9\u533A\u5757", codePart: "section", slotLabel: "\u5185\u5BB9", hint: "\u627F\u8F7D\u5E03\u5C40\u6216\u5185\u5BB9\u533A\u57DF", group: "structure" },
387
+ { label: "\u83DC\u5355\u9879", codePart: "menu-item", slotLabel: "\u83DC\u5355\u6587\u6848", hint: "\u83DC\u5355\u6216\u4E0B\u62C9\u91CC\u7684\u9009\u9879", group: "navigation" },
388
+ { label: "\u5206\u7EC4\u6807\u9898", codePart: "group-title", slotLabel: "\u5206\u7EC4\u6807\u9898", hint: "\u5206\u7EC4\u6216\u5217\u8868\u7684\u5C0F\u6807\u9898", group: "text" },
389
+ { label: "\u5BFC\u822A\u9879", codePart: "nav-item", slotLabel: "\u5BFC\u822A\u6587\u6848", hint: "\u5BFC\u822A\u5165\u53E3\u6216\u8DF3\u8F6C\u9879", group: "navigation" },
390
+ { label: "\u4E3B\u64CD\u4F5C", codePart: "primary-action", slotLabel: "\u4E3B\u64CD\u4F5C\u6587\u6848", hint: "\u9875\u9762\u6216\u533A\u5757\u7684\u4E3B\u8981\u52A8\u4F5C", group: "action" },
391
+ { label: "\u6B21\u64CD\u4F5C", codePart: "secondary-action", slotLabel: "\u6B21\u64CD\u4F5C\u6587\u6848", hint: "\u8F85\u52A9\u52A8\u4F5C\u6216\u6B21\u7EA7\u6309\u94AE", group: "action" },
392
+ { label: "\u56FE\u6807\u6309\u94AE", codePart: "icon-button", slotLabel: "\u56FE\u6807\u540D\u79F0", hint: "\u4EC5\u7528\u56FE\u6807\u8868\u8FBE\u7684\u64CD\u4F5C", group: "action" },
393
+ { label: "\u529F\u80FD\u5217\u8868", codePart: "feature-list", slotLabel: "\u5217\u8868\u5185\u5BB9", hint: "\u5C55\u793A\u529F\u80FD\u3001\u80FD\u529B\u6216\u4EFB\u52A1\u6761\u76EE", group: "structure" },
394
+ { label: "\u6570\u636E\u5217\u8868", codePart: "data-list", slotLabel: "\u5217\u8868\u5185\u5BB9", hint: "\u5C55\u793A\u6570\u636E\u8BB0\u5F55\u6216\u4E1A\u52A1\u5BF9\u8C61", group: "structure" },
395
+ { label: "\u5BFC\u822A\u5217\u8868", codePart: "nav-list", slotLabel: "\u5217\u8868\u5185\u5BB9", hint: "\u5C55\u793A\u5BFC\u822A\u5165\u53E3\u96C6\u5408", group: "navigation" },
396
+ { label: "\u6B65\u9AA4\u5217\u8868", codePart: "step-list", slotLabel: "\u5217\u8868\u5185\u5BB9", hint: "\u5C55\u793A\u6D41\u7A0B\u6B65\u9AA4\u6216\u987A\u5E8F", group: "structure" },
397
+ { label: "\u5185\u5BB9\u5217\u8868", codePart: "content-list", slotLabel: "\u5217\u8868\u5185\u5BB9", hint: "\u5C55\u793A\u6587\u7AE0\u3001\u8BF4\u660E\u6216\u5185\u5BB9\u96C6\u5408", group: "structure" },
398
+ { label: "\u5176\u4ED6", codePart: "custom", slotLabel: "\u5185\u5BB9", hint: "\u81EA\u5B9A\u4E49\u804C\u8D23\uFF0C\u53EF\u5728\u4EFB\u52A1\u91CC\u8865\u5145\u8BF4\u660E", group: "structure" }
399
+ ];
400
+ var COMPONENT_PURPOSES_BY_CONTAINER = {
401
+ page: ["\u6807\u9898", "\u6B63\u6587", "\u8BF4\u660E", "\u5185\u5BB9\u533A\u5757", "\u64CD\u4F5C\u5165\u53E3", "\u5176\u4ED6"],
402
+ card: ["\u6807\u9898", "\u6B63\u6587", "\u8BF4\u660E", "\u6807\u7B7E", "\u64CD\u4F5C\u5165\u53E3", "\u5185\u5BB9\u533A\u5757"],
403
+ menu: ["\u83DC\u5355\u9879", "\u5206\u7EC4\u6807\u9898", "\u56FE\u6807", "\u72B6\u6001", "\u64CD\u4F5C\u5165\u53E3", "\u5176\u4ED6"],
404
+ form: ["\u8F93\u5165\u63A7\u4EF6", "\u5360\u4F4D\u63D0\u793A", "\u5E2E\u52A9\u8BF4\u660E", "\u9519\u8BEF\u63D0\u793A", "\u64CD\u4F5C\u5165\u53E3", "\u5176\u4ED6"],
405
+ modal: ["\u6807\u9898", "\u6B63\u6587", "\u8BF4\u660E", "\u5185\u5BB9\u533A\u5757", "\u64CD\u4F5C\u5165\u53E3", "\u5176\u4ED6"],
406
+ list: ["\u529F\u80FD\u5217\u8868", "\u6570\u636E\u5217\u8868", "\u5BFC\u822A\u5217\u8868", "\u6B65\u9AA4\u5217\u8868", "\u5185\u5BB9\u5217\u8868", "\u5176\u4ED6"],
407
+ navigation: ["\u5BFC\u822A\u9879", "\u5206\u7EC4\u6807\u9898", "\u56FE\u6807", "\u72B6\u6001", "\u5176\u4ED6"],
408
+ action: ["\u4E3B\u64CD\u4F5C", "\u6B21\u64CD\u4F5C", "\u6309\u94AE\u6587\u6848", "\u56FE\u6807\u6309\u94AE", "\u5176\u4ED6"],
409
+ other: ["\u5185\u5BB9\u533A\u5757", "\u6807\u9898", "\u6B63\u6587", "\u8BF4\u660E", "\u64CD\u4F5C\u5165\u53E3", "\u5176\u4ED6"]
410
+ };
411
+ var COMPONENT_TYPE_OPTIONS = [
412
+ { label: "\u9875\u9762\u6807\u9898", name: "Heading", hint: "\u9875\u9762\u4E3B\u6807\u9898", group: "text", category: "\u6807\u9898", codeName: "page-title", slotLabel: "\u6807\u9898\u6587\u5B57" },
413
+ { label: "\u533A\u5757\u6807\u9898", name: "Heading", hint: "\u533A\u5757\u6807\u9898", group: "text", category: "\u6807\u9898", codeName: "section-title", slotLabel: "\u6807\u9898\u6587\u5B57" },
414
+ { label: "\u5C0F\u6807\u9898", name: "Heading", hint: "\u5C40\u90E8\u5C0F\u6807\u9898", group: "text", category: "\u6807\u9898", codeName: "subsection-title", slotLabel: "\u6807\u9898\u6587\u5B57" },
415
+ { label: "\u5361\u7247\u6807\u9898", name: "Heading", hint: "\u5361\u7247\u5185\u6807\u9898", group: "text", category: "\u6807\u9898", codeName: "card-title", slotLabel: "\u6807\u9898\u6587\u5B57" },
416
+ { label: "\u6B63\u6587", name: "Text", hint: "\u6BB5\u843D\u6B63\u6587", group: "text", category: "\u6587\u672C", codeName: "body-text", slotLabel: "\u6587\u672C\u5185\u5BB9" },
417
+ { label: "\u8BF4\u660E\u6587\u5B57", name: "Text", hint: "\u8F85\u52A9\u8BF4\u660E / \u63CF\u8FF0", group: "text", category: "\u6587\u672C", codeName: "description-text", slotLabel: "\u8BF4\u660E\u6587" },
418
+ { label: "\u94FE\u63A5\u6587\u5B57", name: "Text link", hint: "\u6587\u672C\u8DF3\u8F6C\u5165\u53E3", group: "text", category: "\u6587\u672C", codeName: "text-link", slotLabel: "\u94FE\u63A5\u6587\u6848" },
419
+ { label: "\u6309\u94AE\u6587\u5B57", name: "Button label", hint: "\u6309\u94AE\u5185\u6587\u6848", group: "text", category: "\u6587\u672C", codeName: "button-label", slotLabel: "\u6309\u94AE\u6587\u6848" },
420
+ { label: "\u6309\u94AE", name: "Button", hint: "\u89E6\u53D1\u64CD\u4F5C", group: "action", category: "\u64CD\u4F5C", codeName: "button", slotLabel: "\u6309\u94AE\u6587\u6848" },
421
+ { label: "\u56FE\u6807\u6309\u94AE", name: "Icon button", hint: "\u56FE\u6807\u89E6\u53D1\u64CD\u4F5C", group: "action", category: "\u64CD\u4F5C", codeName: "icon-button", slotLabel: "\u65E0" },
422
+ { label: "\u6587\u5B57\u6309\u94AE", name: "Text button", hint: "\u8F7B\u91CF\u6587\u5B57\u64CD\u4F5C", group: "action", category: "\u64CD\u4F5C", codeName: "text-button", slotLabel: "\u6309\u94AE\u6587\u6848" },
423
+ { label: "\u5361\u7247", name: "Card", hint: "\u627F\u8F7D\u4E00\u7EC4\u4FE1\u606F", group: "structure", category: "\u5BB9\u5668", codeName: "card", slotLabel: "\u5185\u5BB9" },
424
+ { label: "\u5BB9\u5668", name: "Container", hint: "\u5E03\u5C40\u627F\u8F7D", group: "structure", category: "\u5E03\u5C40", codeName: "container", slotLabel: "\u5185\u5BB9" },
425
+ { label: "\u5217\u8868\u9879", name: "List item", hint: "\u91CD\u590D\u5217\u8868\u5355\u5143", group: "structure", category: "\u5217\u8868", codeName: "list-item", slotLabel: "\u5185\u5BB9" },
426
+ { label: "\u72B6\u6001\u6807\u7B7E", name: "Badge", hint: "\u72B6\u6001\u6807\u8BC6", group: "data", category: "\u6807\u8BC6", codeName: "status-badge", slotLabel: "\u72B6\u6001\u6587\u6848" },
427
+ { label: "\u5206\u7C7B\u6807\u7B7E", name: "Tag", hint: "\u5206\u7C7B\u6807\u8BC6", group: "data", category: "\u6807\u8BC6", codeName: "tag", slotLabel: "\u6807\u7B7E\u6587\u6848" },
428
+ { label: "\u8F93\u5165\u6846", name: "Input", hint: "\u5355\u884C\u6587\u672C\u8F93\u5165", group: "form", category: "\u8F93\u5165", codeName: "input", slotLabel: "\u8F93\u5165\u503C" },
429
+ { label: "\u6587\u672C\u57DF", name: "Textarea", hint: "\u591A\u884C\u6587\u672C\u8F93\u5165", group: "form", category: "\u8F93\u5165", codeName: "textarea", slotLabel: "\u8F93\u5165\u503C" },
430
+ { label: "\u9009\u62E9\u63A7\u4EF6", name: "Select", hint: "\u9009\u62E9\u4E00\u4E2A\u9009\u9879", group: "form", category: "\u9009\u62E9", codeName: "select", slotLabel: "\u9009\u9879\u503C" },
431
+ { label: "\u56FE\u7247", name: "Image", hint: "\u56FE\u7247\u5C55\u793A", group: "media", category: "\u5A92\u4F53", codeName: "image", slotLabel: "\u56FE\u7247\u8D44\u6E90" },
432
+ { label: "\u56FE\u6807", name: "Icon", hint: "\u56FE\u5F62\u7B26\u53F7", group: "media", category: "\u7B26\u53F7", codeName: "icon", slotLabel: "\u56FE\u6807\u540D\u79F0" },
433
+ { label: "\u5BFC\u822A\u9879", name: "Nav item", hint: "\u5BFC\u822A\u5165\u53E3", group: "navigation", category: "\u5BFC\u822A", codeName: "nav-item", slotLabel: "\u5BFC\u822A\u6587\u6848" },
434
+ { label: "\u9762\u5305\u5C51\u9879", name: "Breadcrumb item", hint: "\u5C42\u7EA7\u5BFC\u822A\u9879", group: "navigation", category: "\u5BFC\u822A", codeName: "breadcrumb-item", slotLabel: "\u5BFC\u822A\u6587\u6848" }
435
+ ];
436
+ var COMPONENT_MAKER_ACTION_OPTIONS = [
437
+ { key: "create-current", label: "\u65B0\u5EFA\u7EC4\u4EF6", hint: "\u628A\u5F53\u524D\u5BF9\u8C61\u6C89\u6DC0\u4E3A\u9ED8\u8BA4\u7EC4\u4EF6" },
438
+ { key: "add-slot", label: "\u52A0\u5165\u7EC4\u4EF6", hint: "\u4F5C\u4E3A\u7EC4\u4EF6\u91CC\u7684\u53EF\u7F16\u8F91\u5185\u5BB9" },
439
+ { key: "create-current-variant", label: "\u65B0\u589E\u5F53\u524D\u53D8\u4F53", hint: "\u628A\u5F53\u524D\u6837\u5F0F\u4F5C\u4E3A\u8BE5\u7EC4\u4EF6\u65B0\u53D8\u4F53" },
440
+ { key: "create-other-variant", label: "\u65B0\u589E\u5176\u4ED6\u53D8\u4F53", hint: "\u624B\u52A8\u5B9A\u4E49\u672A\u51FA\u73B0\u5728\u9875\u9762\u4E0A\u7684\u53D8\u4F53" }
441
+ ];
442
+ var COMPONENT_MAKER_ACTION_LABELS = Object.fromEntries(
443
+ COMPONENT_MAKER_ACTION_OPTIONS.map((option) => [option.key, option.label])
444
+ );
445
+ var COMPONENT_INTERACTION_STATE_OPTIONS = [
446
+ { key: "hover", label: "\u60AC\u505C", description: "\u9F20\u6807\u60AC\u505C\u53CD\u9988", visual: "floating" },
447
+ { key: "pressed", label: "\u6309\u4E0B", description: "\u6309\u4E0B\u77AC\u95F4\u53CD\u9988", visual: "compact" },
448
+ { key: "selected", label: "\u9009\u4E2D", description: "\u5F53\u524D\u9009\u4E2D\u72B6\u6001", visual: "brand" },
449
+ { key: "disabled", label: "\u7981\u7528", description: "\u4E0D\u53EF\u64CD\u4F5C\u72B6\u6001", visual: "disabled" }
450
+ ];
451
+ var COMPONENT_GENERIC_SIZE_OPTIONS = [
452
+ { key: "s", label: "S", description: "\u5C0F\u89C4\u683C", visual: "compact" },
453
+ { key: "m", label: "M", description: "\u9ED8\u8BA4\u89C4\u683C", visual: "size" },
454
+ { key: "l", label: "L", description: "\u5927\u89C4\u683C", visual: "size" }
455
+ ];
242
456
  var JUSTIFY_OPTIONS = [
243
457
  { label: "\u9ED8\u8BA4", value: "normal" },
244
458
  { label: "\u5DE6", value: "flex-start" },
@@ -478,6 +692,8 @@ var TEXT_ONLY_TAGS = /* @__PURE__ */ new Set([
478
692
  "strong"
479
693
  ]);
480
694
  var TEXT_SEMANTIC_CLASS_RE = /(^|[-_])(caption|copy|desc|description|eyebrow|heading|label|subtitle|text|title)([-_]|$)/i;
695
+ var STRUCTURAL_CONTAINER_CLASS_RE = /(^|[-_])(area|block|card|container|content|group|grid|item|layout|list|panel|row|section|shell|stack|zone)([-_]|$)/i;
696
+ var PAGE_SHELL_CLASS_RE = /(^|[-_])(app|page|root|screen|shell|workspace)([-_]|$)/i;
481
697
  var TEXT_GROUP_EXCLUDED_SELECTOR = [
482
698
  "button",
483
699
  "input",
@@ -491,25 +707,104 @@ var TEXT_GROUP_EXCLUDED_SELECTOR = [
491
707
  '[contenteditable="true"]'
492
708
  ].join(",");
493
709
  var TEXT_GROUP_MAX_CHILDREN = 4;
710
+ var STRUCTURAL_CONTAINER_TAGS = /* @__PURE__ */ new Set([
711
+ "article",
712
+ "aside",
713
+ "div",
714
+ "form",
715
+ "li",
716
+ "main",
717
+ "nav",
718
+ "ol",
719
+ "section",
720
+ "ul"
721
+ ]);
494
722
  function hasTextSemanticClass(el) {
495
723
  return getClasses(el).some(
496
724
  (className) => !isStateClass(className) && !/^lucide(-|$)/.test(className) && TEXT_SEMANTIC_CLASS_RE.test(className)
497
725
  );
498
726
  }
727
+ function hasStructuralContainerClass(el) {
728
+ return getClasses(el).some(
729
+ (className) => !isStateClass(className) && STRUCTURAL_CONTAINER_CLASS_RE.test(className)
730
+ );
731
+ }
499
732
  function isTextOnlyTargetElement(el) {
500
733
  if (getInspectorComponentMeta(el)) return false;
501
734
  const tag = el.tagName.toLowerCase();
502
735
  if (TEXT_ONLY_TAGS.has(tag)) return true;
503
736
  if (el.matches(TEXT_GROUP_EXCLUDED_SELECTOR)) return false;
737
+ if (hasStructuralContainerClass(el)) return false;
504
738
  if (hasTextSemanticClass(el)) return true;
505
739
  const children = Array.from(el.children);
506
740
  if (!children.length || children.length > TEXT_GROUP_MAX_CHILDREN) return false;
741
+ if (STRUCTURAL_CONTAINER_TAGS.has(tag) && children.length > 1) return false;
507
742
  if (children.some((child) => child.matches(TEXT_GROUP_EXCLUDED_SELECTOR))) return false;
508
743
  return children.every((child) => {
509
744
  const childTag = child.tagName.toLowerCase();
510
745
  return TEXT_ONLY_TAGS.has(childTag) || hasTextSemanticClass(child);
511
746
  });
512
747
  }
748
+ function isSimpleTextGroupTargetElement(el) {
749
+ if (getInspectorComponentMeta(el)) return false;
750
+ if (el.matches(TEXT_GROUP_EXCLUDED_SELECTOR)) return false;
751
+ const tag = el.tagName.toLowerCase();
752
+ if (!STRUCTURAL_CONTAINER_TAGS.has(tag) && !hasStructuralContainerClass(el)) return false;
753
+ const children = Array.from(el.children).filter(isInspectableChildElement);
754
+ if (children.length < 2 || children.length > TEXT_GROUP_MAX_CHILDREN) return false;
755
+ if (children.some((child) => child.matches(TEXT_GROUP_EXCLUDED_SELECTOR) || getInspectorComponentMeta(child))) return false;
756
+ return children.every((child) => {
757
+ const childTag = child.tagName.toLowerCase();
758
+ return TEXT_ONLY_TAGS.has(childTag) || hasTextSemanticClass(child) || isTextOnlyTargetElement(child);
759
+ });
760
+ }
761
+ function isStructuralContainerTargetElement(el) {
762
+ if (getInspectorComponentMeta(el)) return false;
763
+ if (isTextOnlyTargetElement(el)) return false;
764
+ if (isSimpleTextGroupTargetElement(el)) return false;
765
+ const tag = el.tagName.toLowerCase();
766
+ if (!STRUCTURAL_CONTAINER_TAGS.has(tag) && !hasStructuralContainerClass(el)) return false;
767
+ return el.children.length > 0;
768
+ }
769
+ function isNearAppRoot(el) {
770
+ const parent = el.parentElement;
771
+ if (!parent) return false;
772
+ if (parent === document.body) return true;
773
+ if (parent.id === "root") return true;
774
+ if (parent.parentElement === document.body && parent.children.length === 1) return true;
775
+ return false;
776
+ }
777
+ function isPageShellTargetElement(el) {
778
+ if (getInspectorComponentMeta(el)) return false;
779
+ if (isTextOnlyTargetElement(el)) return false;
780
+ if (el === document.documentElement || el === document.body) return false;
781
+ const tag = el.tagName.toLowerCase();
782
+ const children = Array.from(el.children).filter(isInspectableChildElement);
783
+ if (children.length < 2) return false;
784
+ const rect = el.getBoundingClientRect();
785
+ const coversPageArea = rect.width >= window.innerWidth * 0.55 && rect.height >= window.innerHeight * 0.45;
786
+ const hasPageShellClass = getClasses(el).some(
787
+ (className) => !isStateClass(className) && PAGE_SHELL_CLASS_RE.test(className)
788
+ );
789
+ if (tag === "main" && coversPageArea) return true;
790
+ if (isNearAppRoot(el) && coversPageArea && hasPageShellClass) return true;
791
+ return false;
792
+ }
793
+ function isInspectableChildElement(el) {
794
+ if (el.closest(".di-panel")) return false;
795
+ const rect = el.getBoundingClientRect();
796
+ if (rect.width <= 0 || rect.height <= 0) return false;
797
+ const style = getComputedStyle(el);
798
+ if (style.display === "none" || style.visibility === "hidden") return false;
799
+ return true;
800
+ }
801
+ function getVisibleDirectChildCount(el) {
802
+ return Array.from(el.children).filter(isInspectableChildElement).length;
803
+ }
804
+ function canControlElementGap(el) {
805
+ const cs = getComputedStyle(el);
806
+ return isFlexGridDisplay(cs.display) && getVisibleDirectChildCount(el) >= 2;
807
+ }
513
808
  function classSelector(classes) {
514
809
  const escapeClass = (value) => {
515
810
  try {
@@ -711,6 +1006,118 @@ function getElementDisplayName(el, meta = getInspectorComponentMeta(el)) {
711
1006
  function getTargetDisplayLabel(el, meta = getInspectorComponentMeta(el)) {
712
1007
  return meta ? `${meta.type} / ${getComponentDisplayName(meta)}` : getElementDisplayName(el, meta);
713
1008
  }
1009
+ var LIBRARY_TOKEN_CATEGORIES = [
1010
+ { key: "all", label: "\u5168\u90E8" },
1011
+ { key: "color", label: "\u989C\u8272" },
1012
+ { key: "typography", label: "\u6587\u5B57" },
1013
+ { key: "appearance", label: "\u5916\u89C2" },
1014
+ { key: "space", label: "\u95F4\u8DDD" },
1015
+ { key: "radius", label: "\u5706\u89D2" },
1016
+ { key: "shadow", label: "\u9634\u5F71" }
1017
+ ];
1018
+ var LIBRARY_COMPONENT_CATEGORIES = [
1019
+ { key: "all", label: "\u5168\u90E8" },
1020
+ { key: "action", label: "\u64CD\u4F5C" },
1021
+ { key: "display", label: "\u5C55\u793A" },
1022
+ { key: "feedback", label: "\u53CD\u9988" },
1023
+ { key: "container", label: "\u5BB9\u5668" },
1024
+ { key: "form", label: "\u8868\u5355" },
1025
+ { key: "icon", label: "\u56FE\u6807" },
1026
+ { key: "custom", label: "\u81EA\u5B9A\u4E49" }
1027
+ ];
1028
+ var LIBRARY_COMPONENT_LABELS = {
1029
+ Button: "\u6309\u94AE",
1030
+ Icon: "\u56FE\u6807",
1031
+ Badge: "\u6807\u7B7E",
1032
+ Card: "\u5361\u7247",
1033
+ Form: "\u8868\u5355"
1034
+ };
1035
+ function getLibraryComponentCategory(type) {
1036
+ const normalized = type.trim().toLowerCase();
1037
+ if (normalized.includes("button") || normalized.includes("action")) return "action";
1038
+ if (normalized.includes("badge") || normalized.includes("tag") || normalized.includes("chip")) return "feedback";
1039
+ if (normalized.includes("card") || normalized.includes("text") || normalized.includes("typography")) return "display";
1040
+ if (normalized.includes("form") || normalized.includes("input") || normalized.includes("textarea") || normalized.includes("control")) return "form";
1041
+ if (normalized.includes("icon")) return "icon";
1042
+ if (normalized.includes("container") || normalized.includes("layout") || normalized.includes("section") || normalized.includes("panel")) return "container";
1043
+ return "custom";
1044
+ }
1045
+ function getLibraryComponentCategoryLabel(category) {
1046
+ return LIBRARY_COMPONENT_CATEGORIES.find((item) => item.key === category)?.label ?? "\u81EA\u5B9A\u4E49";
1047
+ }
1048
+ function getLibraryComponentVariantKey(componentId, variantId) {
1049
+ return `${componentId}::${variantId}`;
1050
+ }
1051
+ function getLibraryComponentVariantPurpose(component, variant) {
1052
+ if (variant.usage) return variant.usage;
1053
+ const normalizedType = component.type.trim().toLowerCase();
1054
+ const normalizedProps = (variant.propsLabel ?? "").toLowerCase();
1055
+ if (normalizedType.includes("button")) {
1056
+ if (normalizedProps.includes("primary")) return "\u4E3B\u884C\u52A8\u3001\u5173\u952E\u63D0\u4EA4\u3001\u786E\u8BA4\u64CD\u4F5C";
1057
+ if (normalizedProps.includes("secondary")) return "\u6B21\u7EA7\u64CD\u4F5C\u3001\u8F85\u52A9\u786E\u8BA4\u3001\u5907\u7528\u5165\u53E3";
1058
+ if (normalizedProps.includes("ghost")) return "\u4F4E\u5F3A\u8C03\u64CD\u4F5C\u3001\u5DE5\u5177\u533A\u52A8\u4F5C\u3001\u5F31\u8FB9\u754C\u6309\u94AE";
1059
+ if (normalizedProps.includes("text")) return "\u8F7B\u91CF\u6587\u672C\u64CD\u4F5C\u3001\u94FE\u63A5\u5F0F\u52A8\u4F5C\u3001\u5C40\u90E8\u8865\u5145\u5165\u53E3";
1060
+ return "\u64CD\u4F5C\u89E6\u53D1\u3001\u8868\u5355\u63D0\u4EA4\u6216\u6D41\u7A0B\u63A8\u8FDB";
1061
+ }
1062
+ if (normalizedType.includes("badge")) return "\u72B6\u6001\u63D0\u793A\u3001\u5206\u7C7B\u6807\u8BB0\u548C\u7ED3\u679C\u53CD\u9988";
1063
+ if (normalizedType.includes("card")) return "\u4FE1\u606F\u5206\u7EC4\u3001\u4EFB\u52A1\u5C55\u793A\u548C\u5185\u5BB9\u627F\u8F7D";
1064
+ if (normalizedType.includes("form")) return "\u4FE1\u606F\u5F55\u5165\u3001\u7F16\u8F91\u548C\u63D0\u4EA4";
1065
+ if (normalizedType.includes("icon")) return "\u56FE\u5F62\u5316\u64CD\u4F5C\u5165\u53E3\u6216\u72B6\u6001\u8868\u8FBE";
1066
+ return component.summary || "\u7EC4\u4EF6\u89C4\u683C\u5C55\u793A\u548C\u590D\u7528\u6CBB\u7406";
1067
+ }
1068
+ function getLibraryComponentVariantCapabilities(component, variant) {
1069
+ if (variant.capabilities?.length) return variant.capabilities;
1070
+ const capability = COMPONENT_CAPABILITIES[component.type];
1071
+ const normalizedType = component.type.trim().toLowerCase();
1072
+ const capabilities = /* @__PURE__ */ new Set();
1073
+ if (capability?.variantKind || variant.propsLabel?.includes("variant=")) capabilities.add("\u53D8\u4F53");
1074
+ if (capability?.sizeKind || variant.propsLabel?.includes("size=")) capabilities.add("\u5C3A\u5BF8");
1075
+ if (capability?.statusKind || variant.propsLabel?.includes("status=")) capabilities.add("\u72B6\u6001");
1076
+ if (capability?.colorKind || variant.propsLabel?.includes("tone=")) capabilities.add("\u989C\u8272");
1077
+ if (capability?.editableText || capability?.textSlots?.length) capabilities.add("\u6587\u6848");
1078
+ if (capability?.childSlots?.length) capabilities.add("\u5B50\u9879");
1079
+ if (normalizedType.includes("button")) {
1080
+ capabilities.add("\u70B9\u51FB");
1081
+ capabilities.add("hover");
1082
+ capabilities.add("focus-visible");
1083
+ capabilities.add("disabled \u5F85\u63A5\u5165");
1084
+ }
1085
+ if (normalizedType.includes("form")) {
1086
+ capabilities.add("\u8F93\u5165");
1087
+ capabilities.add("\u63D0\u4EA4");
1088
+ }
1089
+ if (!capabilities.size) capabilities.add("\u9884\u89C8");
1090
+ return Array.from(capabilities);
1091
+ }
1092
+ function getLibraryComponentVariantTokenRefs(component, variant) {
1093
+ if (variant.tokenRefs?.length) return variant.tokenRefs;
1094
+ const normalizedType = component.type.trim().toLowerCase();
1095
+ const normalizedProps = (variant.propsLabel ?? "").toLowerCase();
1096
+ const refs = /* @__PURE__ */ new Set();
1097
+ if (normalizedType.includes("button")) {
1098
+ refs.add("--radius-control");
1099
+ refs.add("--font-size-m");
1100
+ if (normalizedProps.includes("size=s")) refs.add("--font-size-s");
1101
+ if (normalizedProps.includes("size=l")) refs.add("--font-size-l");
1102
+ if (normalizedProps.includes("primary")) refs.add("--color-brand-primary");
1103
+ if (normalizedProps.includes("secondary") || normalizedProps.includes("ghost")) refs.add("--color-border-default");
1104
+ if (normalizedProps.includes("text")) refs.add("--color-brand-primary");
1105
+ } else if (normalizedType.includes("badge")) {
1106
+ refs.add("--radius-pill");
1107
+ refs.add("--font-size-xs");
1108
+ } else if (normalizedType.includes("card")) {
1109
+ refs.add("--color-surface");
1110
+ refs.add("--color-border-default");
1111
+ refs.add("--shadow-card");
1112
+ } else if (normalizedType.includes("form")) {
1113
+ refs.add("--color-surface");
1114
+ refs.add("--color-border-default");
1115
+ refs.add("--radius-control");
1116
+ } else if (normalizedType.includes("icon")) {
1117
+ refs.add("--color-icon-default");
1118
+ }
1119
+ return Array.from(refs);
1120
+ }
714
1121
  var CARD_EDITABLE_TEXT_SLOTS = [
715
1122
  {
716
1123
  key: "title",
@@ -1601,6 +2008,7 @@ function ColorDropdown({ value, onChange, onClose, onAddToken, pos, colorPalette
1601
2008
  const initHex = value.startsWith("#") ? value : "#6b7280";
1602
2009
  const [hexInput, setHexInput] = useState(initHex);
1603
2010
  const [alpha, setAlpha] = useState(100);
2011
+ const customColorInputRef = useRef(null);
1604
2012
  function buildColor(hex, a) {
1605
2013
  const m = hex.match(/^#([0-9a-f]{6})$/i);
1606
2014
  if (!m || a >= 100) return hex;
@@ -1614,57 +2022,74 @@ function ColorDropdown({ value, onChange, onClose, onAddToken, pos, colorPalette
1614
2022
  return /* @__PURE__ */ jsxs(Fragment, { children: [
1615
2023
  /* @__PURE__ */ jsx2("div", { style: { position: "fixed", inset: 0, zIndex: 99997 }, onClick: onClose }),
1616
2024
  /* @__PURE__ */ jsxs("div", { className: "di-palette-dropdown", style, children: [
1617
- /* @__PURE__ */ jsxs("div", { className: "di-palette-group", children: [
1618
- /* @__PURE__ */ jsx2("div", { className: "di-palette-group-label", children: "\u65E0" }),
1619
- /* @__PURE__ */ jsx2("div", { className: "di-palette-swatches", children: /* @__PURE__ */ jsx2(
1620
- "button",
1621
- {
1622
- className: "di-palette-none",
1623
- title: "\u65E0\u80CC\u666F\u8272 / transparent",
1624
- onClick: () => {
1625
- onChange("transparent", "");
1626
- onClose();
1627
- }
1628
- }
1629
- ) })
1630
- ] }),
1631
- colorPalette.map((g) => /* @__PURE__ */ jsxs("div", { className: "di-palette-group", children: [
1632
- /* @__PURE__ */ jsx2("div", { className: "di-palette-group-label", children: g.group }),
1633
- /* @__PURE__ */ jsxs("div", { className: "di-palette-swatches", children: [
1634
- g.colors.map((c) => /* @__PURE__ */ jsx2(
2025
+ /* @__PURE__ */ jsxs("div", { className: "di-palette-scroll", children: [
2026
+ /* @__PURE__ */ jsxs("div", { className: "di-palette-group", children: [
2027
+ /* @__PURE__ */ jsx2("div", { className: "di-palette-group-label", children: "\u65E0" }),
2028
+ /* @__PURE__ */ jsx2("div", { className: "di-palette-swatches", children: /* @__PURE__ */ jsx2(
1635
2029
  "button",
1636
2030
  {
1637
- className: `di-palette-swatch${value === c.val ? " di-palette-swatch--on" : ""}`,
1638
- style: { background: c.val },
1639
- title: `${g.group}\xB7${c.label} ${c.val}`,
2031
+ className: "di-palette-none",
2032
+ title: "\u65E0\u80CC\u666F\u8272 / transparent",
1640
2033
  onClick: () => {
1641
- onChange(c.val, c.token);
2034
+ onChange("transparent", "");
1642
2035
  onClose();
1643
2036
  }
1644
- },
1645
- c.token
1646
- )),
1647
- onAddToken && /* @__PURE__ */ jsx2(
1648
- "button",
1649
- {
1650
- className: "di-palette-add-btn",
1651
- title: `\u6DFB\u52A0\u4E3A${g.group}\u8272 token`,
1652
- onClick: () => {
1653
- onAddToken(buildColor(hexInput, alpha));
1654
- onClose();
1655
- },
1656
- children: "+"
1657
2037
  }
1658
- )
1659
- ] })
1660
- ] }, g.group)),
2038
+ ) })
2039
+ ] }),
2040
+ colorPalette.map((g, index) => /* @__PURE__ */ jsxs("div", { className: `di-palette-group${index === colorPalette.length - 1 ? " di-palette-group--last" : ""}`, children: [
2041
+ /* @__PURE__ */ jsx2("div", { className: "di-palette-group-label", children: g.group }),
2042
+ /* @__PURE__ */ jsxs("div", { className: "di-palette-swatches", children: [
2043
+ g.colors.map((c) => /* @__PURE__ */ jsx2(
2044
+ "button",
2045
+ {
2046
+ className: `di-palette-swatch${value === c.val ? " di-palette-swatch--on" : ""}`,
2047
+ title: `${g.group}\xB7${c.label} ${c.val}`,
2048
+ onClick: () => {
2049
+ onChange(c.val, c.token);
2050
+ onClose();
2051
+ },
2052
+ children: /* @__PURE__ */ jsx2("span", { className: "di-palette-swatch-fill", style: { background: c.val } })
2053
+ },
2054
+ c.token
2055
+ )),
2056
+ onAddToken && /* @__PURE__ */ jsx2(
2057
+ "button",
2058
+ {
2059
+ className: "di-palette-add-btn",
2060
+ title: `\u6DFB\u52A0\u4E3A${g.group}\u8272 token`,
2061
+ onClick: () => {
2062
+ onAddToken(buildColor(hexInput, alpha));
2063
+ onClose();
2064
+ },
2065
+ children: "+"
2066
+ }
2067
+ )
2068
+ ] })
2069
+ ] }, g.group))
2070
+ ] }),
1661
2071
  /* @__PURE__ */ jsxs("div", { className: "di-custom-bottom", children: [
1662
2072
  /* @__PURE__ */ jsx2(
1663
2073
  "button",
1664
2074
  {
1665
2075
  className: "di-custom-color-trigger",
1666
2076
  style: { background: buildColor(hexInput, alpha), flexShrink: 0 },
1667
- onClick: () => {
2077
+ title: "\u9009\u62E9\u81EA\u5B9A\u4E49\u989C\u8272",
2078
+ onClick: () => customColorInputRef.current?.click()
2079
+ }
2080
+ ),
2081
+ /* @__PURE__ */ jsx2(
2082
+ "input",
2083
+ {
2084
+ ref: customColorInputRef,
2085
+ className: "di-custom-color-input",
2086
+ type: "color",
2087
+ value: /^#[0-9a-f]{6}$/i.test(hexInput) ? hexInput : "#6b7280",
2088
+ "aria-label": "\u9009\u62E9\u81EA\u5B9A\u4E49\u989C\u8272",
2089
+ onChange: (event) => {
2090
+ const h = event.currentTarget.value;
2091
+ setHexInput(h);
2092
+ applyColor(h, alpha);
1668
2093
  }
1669
2094
  }
1670
2095
  ),
@@ -1859,6 +2284,168 @@ function getDisplayLabel(val, tokenMap, colorPalette, tokenLabels) {
1859
2284
  if (token) return { label: tokenLabels[token] ?? token.replace("--", ""), sub: displayVal, isHardcoded: false };
1860
2285
  return { label: displayVal, sub: "", isHardcoded: true };
1861
2286
  }
2287
+ function normalizeLibraryTokenName(value) {
2288
+ return value.replace(/^--/, "").replace(/-/g, "\xB7");
2289
+ }
2290
+ function getLibraryTokenItems(tokens, tokenMap) {
2291
+ const items = [];
2292
+ const seen = /* @__PURE__ */ new Set();
2293
+ const add = (item) => {
2294
+ const key = `${item.category}:${item.name}:${item.value}`;
2295
+ if (seen.has(key)) return;
2296
+ seen.add(key);
2297
+ items.push(item);
2298
+ };
2299
+ tokens.colorPalette.forEach((group) => {
2300
+ group.colors.forEach((color) => add({
2301
+ id: `color:${group.group}:${color.token || color.label}`,
2302
+ category: "color",
2303
+ categoryLabel: "\u989C\u8272",
2304
+ name: color.token || `${group.group}.${color.label}`,
2305
+ value: formatColorDisplay(color.val),
2306
+ rawValue: color.val,
2307
+ usage: `${group.group} / ${color.label}`,
2308
+ status: "\u7CFB\u7EDF token",
2309
+ preview: "color",
2310
+ previewValue: color.val,
2311
+ source: "system"
2312
+ }));
2313
+ });
2314
+ Object.entries(tokenMap).forEach(([value, token]) => {
2315
+ if (!token || seen.has(`color:${token}:${formatColorDisplay(value)}`)) return;
2316
+ if (!/^#|rgb|hsl/i.test(value.trim())) return;
2317
+ add({
2318
+ id: `custom-color:${token}:${value}`,
2319
+ category: "color",
2320
+ categoryLabel: "\u989C\u8272",
2321
+ name: token,
2322
+ value: formatColorDisplay(value),
2323
+ rawValue: value,
2324
+ usage: normalizeLibraryTokenName(token),
2325
+ status: "\u81EA\u5B9A\u4E49 token",
2326
+ preview: "color",
2327
+ previewValue: value,
2328
+ source: "custom"
2329
+ });
2330
+ });
2331
+ (tokens.typographyStyles ?? []).forEach((style) => add({
2332
+ id: `typography-style:${style.key}`,
2333
+ category: "typography",
2334
+ categoryLabel: "\u6587\u5B57",
2335
+ name: style.key,
2336
+ value: `${style.value} / ${style.fontWeight}`,
2337
+ rawValue: style.value,
2338
+ usage: style.usage || style.label,
2339
+ status: "\u7CFB\u7EDF token",
2340
+ preview: "text",
2341
+ previewValue: style.color,
2342
+ source: "system"
2343
+ }));
2344
+ tokens.typographyTokens.forEach((token) => add({
2345
+ id: `typography-token:${token.key}`,
2346
+ category: "typography",
2347
+ categoryLabel: "\u6587\u5B57",
2348
+ name: token.key,
2349
+ value: `${token.fontSize} / ${token.fontWeight}`,
2350
+ rawValue: token.fontSize,
2351
+ usage: token.usage || token.label,
2352
+ status: "\u7CFB\u7EDF token",
2353
+ preview: "text",
2354
+ previewValue: token.color,
2355
+ source: "system"
2356
+ }));
2357
+ getContainerStyles(tokens).forEach((style) => add({
2358
+ id: `appearance:${style.key}`,
2359
+ category: "appearance",
2360
+ categoryLabel: "\u5916\u89C2",
2361
+ name: style.key,
2362
+ value: `${style.backgroundVar || formatColorDisplay(style.backgroundColor)} / ${style.borderWidth} / ${style.borderStyle} / ${style.borderRadius}`,
2363
+ rawValue: style.backgroundColor,
2364
+ usage: style.usage || style.label,
2365
+ status: "\u7CFB\u7EDF token",
2366
+ preview: "appearance",
2367
+ previewValue: style.borderColor || style.backgroundColor,
2368
+ source: "system"
2369
+ }));
2370
+ tokens.spaceSteps.forEach((step) => add({
2371
+ id: `space:${step.label}:${step.val}`,
2372
+ category: "space",
2373
+ categoryLabel: "\u95F4\u8DDD",
2374
+ name: step.label,
2375
+ value: step.val,
2376
+ rawValue: step.val,
2377
+ usage: step.size || "\u7A7A\u503C / \u65E0\u95F4\u8DDD",
2378
+ status: "\u7CFB\u7EDF token",
2379
+ preview: "space",
2380
+ source: "system"
2381
+ }));
2382
+ tokens.radiusPresets.forEach((radius) => add({
2383
+ id: `radius:${radius.label}:${radius.value}`,
2384
+ category: "radius",
2385
+ categoryLabel: "\u5706\u89D2",
2386
+ name: radius.token || radius.label,
2387
+ value: radius.value,
2388
+ rawValue: radius.value,
2389
+ usage: radius.sub || "\u65E0\u5706\u89D2",
2390
+ status: "\u7CFB\u7EDF token",
2391
+ preview: "radius",
2392
+ source: "system"
2393
+ }));
2394
+ tokens.shadowTokens.forEach((shadow) => add({
2395
+ id: `shadow:${shadow.cssVar || shadow.label}`,
2396
+ category: "shadow",
2397
+ categoryLabel: "\u9634\u5F71",
2398
+ name: shadow.cssVar || shadow.label,
2399
+ value: shadow.value,
2400
+ rawValue: shadow.value,
2401
+ usage: shadow.usage,
2402
+ status: "\u7CFB\u7EDF token",
2403
+ preview: "shadow",
2404
+ source: "system"
2405
+ }));
2406
+ return items;
2407
+ }
2408
+ var LIBRARY_TOKEN_USAGE_PROPS = {
2409
+ color: ["color", "background-color", "border-color"],
2410
+ typography: ["font-size"],
2411
+ appearance: ["background-color", "border-color", "border-radius"],
2412
+ space: ["padding-top", "padding-right", "padding-bottom", "padding-left", "margin-top", "margin-right", "margin-bottom", "margin-left", "gap"],
2413
+ radius: ["border-radius"],
2414
+ shadow: ["box-shadow"]
2415
+ };
2416
+ function getLibraryTokenUsageTargets(item) {
2417
+ if (!item.rawValue || item.rawValue.includes("var(")) return null;
2418
+ const needle = item.category === "color" || item.category === "appearance" ? normalizeColor(item.rawValue) : item.rawValue.trim();
2419
+ if (!needle || needle === "transparent") return null;
2420
+ const props = LIBRARY_TOKEN_USAGE_PROPS[item.category] ?? [];
2421
+ const targets = [];
2422
+ if (typeof document === "undefined") return targets;
2423
+ document.querySelectorAll("body *").forEach((el) => {
2424
+ if (isInsidePanel(el)) return;
2425
+ const cs = getComputedStyle(el);
2426
+ if (props.some((prop) => {
2427
+ const value = cs.getPropertyValue(prop).trim();
2428
+ const normalized = item.category === "color" || item.category === "appearance" ? normalizeColor(value) : value;
2429
+ return normalized === needle;
2430
+ })) targets.push(el);
2431
+ });
2432
+ return targets;
2433
+ }
2434
+ function countLibraryTokenUsage(item) {
2435
+ return getLibraryTokenUsageTargets(item)?.length ?? null;
2436
+ }
2437
+ function getComponentCapabilitySummary(type, capability) {
2438
+ const parts = [
2439
+ capability.editableText ? "\u6587\u6848" : "",
2440
+ capability.variantKind ? capability.variantKind === "card" ? "\u5C55\u793A" : "\u53D8\u4F53" : "",
2441
+ capability.sizeKind ? "\u5C3A\u5BF8" : "",
2442
+ capability.colorKind ? "\u989C\u8272" : "",
2443
+ capability.statusKind ? "\u72B6\u6001" : "",
2444
+ capability.textSlots?.length ? "\u53EF\u7F16\u8F91\u5185\u5BB9" : "",
2445
+ capability.childSlots?.length ? "\u5B50\u7EC4\u4EF6\u5165\u53E3" : ""
2446
+ ].filter(Boolean);
2447
+ return parts.join(" / ") || `${type} \u8BC6\u522B`;
2448
+ }
1862
2449
  function ColorSelectButton({
1863
2450
  value,
1864
2451
  label,
@@ -1968,10 +2555,11 @@ function InspectorPanel({
1968
2555
  targetEl,
1969
2556
  tokenMap,
1970
2557
  onTokenMapUpdate,
2558
+ onTargetChange,
1971
2559
  onClose
1972
2560
  }) {
1973
2561
  const isSecondary = false;
1974
- const { endpoints, tokens } = useDevInspectorConfig();
2562
+ const { componentPreviews, endpoints, tokens } = useDevInspectorConfig();
1975
2563
  const {
1976
2564
  colorPalette,
1977
2565
  tokenLabels,
@@ -2088,12 +2676,46 @@ function InspectorPanel({
2088
2676
  const [cardVariantVal, setCardVariantVal] = useState("default");
2089
2677
  const [cardVariantClassVal, setCardVariantClassVal] = useState("");
2090
2678
  const [pendingCardVariant, setPendingCardVariant] = useState("");
2679
+ const [componentMakerSourceMode, setComponentMakerSourceMode] = useState("new");
2680
+ const [componentMakerAction, setComponentMakerAction] = useState("create-current");
2681
+ const [componentSpecDraft, setComponentSpecDraft] = useState(EMPTY_COMPONENT_SPEC_DRAFT);
2682
+ const [componentCreateOpen, setComponentCreateOpen] = useState(false);
2683
+ const [componentCreateContainer, setComponentCreateContainer] = useState("page");
2684
+ const [componentCreateContainerMenuOpen, setComponentCreateContainerMenuOpen] = useState(false);
2685
+ const [componentCreateType, setComponentCreateType] = useState("");
2686
+ const [componentCreateTypeMenuOpen, setComponentCreateTypeMenuOpen] = useState(false);
2687
+ const [componentCreatePurpose, setComponentCreatePurpose] = useState("");
2688
+ const [componentCreateNameTouched, setComponentCreateNameTouched] = useState(false);
2689
+ const [componentCreateResolution, setComponentCreateResolution] = useState("new");
2690
+ const [componentVariantDraft, setComponentVariantDraft] = useState(EMPTY_COMPONENT_VARIANT_DRAFT);
2691
+ const [componentVariantExcludedIds, setComponentVariantExcludedIds] = useState([]);
2692
+ const [componentVariantPreviewId, setComponentVariantPreviewId] = useState("");
2091
2693
  const [localDrafts, setLocalDrafts] = useState({});
2092
2694
  const [styleIntentSummary, setStyleIntentSummary] = useState({ pendingCount: 0, latestPending: null, pendingEntries: [] });
2695
+ const [activePlugin, setActivePlugin] = useState(null);
2696
+ const [pluginMsg, setPluginMsg] = useState("");
2093
2697
  const [hasCopied, setHasCopied] = useState(() => _copiedStyles.length > 0);
2094
2698
  const [expandedColor, setExpandedColor] = useState(null);
2095
2699
  const [pendingNewToken, setPendingNewToken] = useState(null);
2096
2700
  const [addTokenModal, setAddTokenModal] = useState(null);
2701
+ const [libraryOpen, setLibraryOpen] = useState(false);
2702
+ const [libraryWorkbenchOpen, setLibraryWorkbenchOpen] = useState(false);
2703
+ const [libraryTab, setLibraryTab] = useState("tokens");
2704
+ const [libraryTokenCategory, setLibraryTokenCategory] = useState("all");
2705
+ const [libraryComponentCategory, setLibraryComponentCategory] = useState("all");
2706
+ const [libraryTokenUsageFilter, setLibraryTokenUsageFilter] = useState("all");
2707
+ const [librarySearch, setLibrarySearch] = useState("");
2708
+ const [selectedLibraryTokenId, setSelectedLibraryTokenId] = useState("");
2709
+ const [selectedLibraryComponentId, setSelectedLibraryComponentId] = useState("");
2710
+ const [selectedLibraryComponentVariantId, setSelectedLibraryComponentVariantId] = useState("");
2711
+ const [libraryTokenForm, setLibraryTokenForm] = useState(null);
2712
+ const [libraryComponentForm, setLibraryComponentForm] = useState(null);
2713
+ const [libraryCustomTokens, setLibraryCustomTokens] = useState([]);
2714
+ const [libraryTokenOverrides, setLibraryTokenOverrides] = useState({});
2715
+ const [libraryDeletedTokenIds, setLibraryDeletedTokenIds] = useState({});
2716
+ const [libraryCustomComponents, setLibraryCustomComponents] = useState([]);
2717
+ const [libraryComponentOverrides, setLibraryComponentOverrides] = useState({});
2718
+ const [libraryDeletedComponentIds, setLibraryDeletedComponentIds] = useState({});
2097
2719
  const [customColorVals, setCustomColorVals] = useState({});
2098
2720
  const selectedRef = useRef(targetEl);
2099
2721
  const localDraftsRef = useRef({});
@@ -2137,11 +2759,10 @@ function InspectorPanel({
2137
2759
  function getDraftTargetInfo(el) {
2138
2760
  const componentMeta2 = getInspectorComponentMeta(el);
2139
2761
  const selector = getSelectorForScope(el, scope);
2140
- const targetLabel = getTargetDisplayLabel(el, componentMeta2);
2141
2762
  return {
2142
2763
  key: `${scope}:${selector}`,
2143
2764
  selector,
2144
- targetLabel,
2765
+ targetLabel: getTargetDisplayLabel(el, componentMeta2),
2145
2766
  scopeLabel: scope === "current" ? "\u5F53\u524D\u5143\u7D20" : "\u76F8\u540C\u5143\u7D20"
2146
2767
  };
2147
2768
  }
@@ -2157,6 +2778,7 @@ function InspectorPanel({
2157
2778
  selectedRef.current = el;
2158
2779
  const rect = el.getBoundingClientRect();
2159
2780
  setPanelPos(calcPanelPos(rect));
2781
+ if (el !== targetEl) onTargetChange(el);
2160
2782
  const elCs = getComputedStyle(el);
2161
2783
  const selectedComponentMeta = getInspectorComponentMeta(el);
2162
2784
  const selectedCapability = getComponentCapability(selectedComponentMeta);
@@ -2214,20 +2836,13 @@ function InspectorPanel({
2214
2836
  };
2215
2837
  setPaddingVal(normPad(`${cs.paddingTop} ${cs.paddingRight} ${cs.paddingBottom} ${cs.paddingLeft}`));
2216
2838
  setMarginVal(normPad(`${cs.marginTop} ${cs.marginRight} ${cs.marginBottom} ${cs.marginLeft}`));
2217
- if (isFlexGridDisplay(cs.display)) {
2839
+ if (canControlElementGap(el)) {
2218
2840
  const g = cs.gap.trim();
2219
2841
  setGapVal(g === "normal" ? "0px" : g);
2220
2842
  gapTargetRef.current = el;
2221
- } else if (el.parentElement) {
2222
- const pcs = getComputedStyle(el.parentElement);
2223
- if (isFlexGridDisplay(pcs.display)) {
2224
- const g = pcs.gap.trim();
2225
- setGapVal(g === "normal" ? "0px" : g);
2226
- gapTargetRef.current = el.parentElement;
2227
- } else {
2228
- setGapVal("0px");
2229
- gapTargetRef.current = el;
2230
- }
2843
+ } else {
2844
+ setGapVal("0px");
2845
+ gapTargetRef.current = null;
2231
2846
  }
2232
2847
  setPendingPadding("");
2233
2848
  setPendingMargin("");
@@ -2312,12 +2927,24 @@ function InspectorPanel({
2312
2927
  setPendingIconColor("");
2313
2928
  setPendingBadgeStatus("");
2314
2929
  setPendingCardVariant("");
2930
+ setComponentMakerSourceMode(selectedComponentMeta ? "existing" : "new");
2931
+ setComponentMakerAction(selectedComponentMeta ? "create-current-variant" : "create-current");
2932
+ setComponentSpecDraft(getComponentMakerSpecDefaults(el));
2933
+ const suggestedCreateContainer = getSuggestedComponentContainer(el);
2934
+ setComponentCreateContainer(suggestedCreateContainer);
2935
+ setComponentCreateContainerMenuOpen(false);
2936
+ setComponentCreateType(getSuggestedComponentCreatePurposeType(el, suggestedCreateContainer));
2937
+ setComponentCreatePurpose(getSuggestedComponentPurpose(el));
2938
+ setComponentCreateOpen(false);
2939
+ setComponentVariantDraft(getComponentMakerVariantDefaults(el));
2940
+ setComponentVariantExcludedIds([]);
2941
+ setComponentVariantPreviewId("");
2315
2942
  setNewTokenProp(null);
2316
2943
  setExpandedColor(null);
2317
2944
  setShowScopeHelp(false);
2318
2945
  setIsEditing(false);
2319
2946
  setSelected(el);
2320
- }, []);
2947
+ }, [onTargetChange, targetEl]);
2321
2948
  useEffect(() => {
2322
2949
  selectEl(targetEl);
2323
2950
  }, [targetEl]);
@@ -2420,7 +3047,7 @@ function InspectorPanel({
2420
3047
  ...pendingFontWeight ? [["font-weight", pendingFontWeight]] : [],
2421
3048
  ...pendingPadding ? [["padding", pendingPadding]] : [],
2422
3049
  ...pendingMargin ? [["margin", pendingMargin]] : [],
2423
- ...pendingGap ? [["gap", pendingGap]] : [],
3050
+ ...pendingGap && gapTargetRef.current ? [["gap", pendingGap]] : [],
2424
3051
  ...pendingTranslate ? [["translate", formatTranslate(pendingTranslate)]] : [],
2425
3052
  ...pendingWidth ? [["width", pendingWidth]] : [],
2426
3053
  ...pendingHeight ? [["height", pendingHeight]] : [],
@@ -2671,166 +3298,1385 @@ function InspectorPanel({
2671
3298
  document.body.removeChild(ta);
2672
3299
  return copied;
2673
3300
  }
2674
- function buildAiTaskPrompt(params) {
2675
- const changes = params.changes.map((change, index) => `${index + 1}. ${getChangeLabel(change.prop)}\uFF1A${formatStoredChangeRecordValue(change.prop, change.from)} \u2192 ${formatStoredChangeRecordValue(change.prop, change.val)}`).join("\n");
2676
- const latestHint = params.entryId ? `\u4F18\u5148\u5904\u7406 id = ${params.entryId} \u8FD9\u6761\u8BB0\u5F55\u3002` : "\u8FD9\u6761\u4EFB\u52A1\u6765\u81EA DevInspector \u5F53\u524D\u9009\u4E2D\u5143\u7D20\u3002";
2677
- return [
2678
- "DevInspector \u6837\u5F0F\u4EFB\u52A1",
2679
- `\u9875\u9762\uFF1A${params.pageLabel}`,
2680
- `\u5143\u7D20\uFF1A${params.targetLabel}`,
2681
- `\u8303\u56F4\uFF1A${params.scopeLabel}`,
2682
- `\u9009\u62E9\u5668\uFF1A${params.selector}`,
2683
- "\u6539\u52A8\uFF1A",
2684
- changes || "\u65E0\u6837\u5F0F\u6539\u52A8",
2685
- ...params.note ? ["\u8865\u5145\uFF1A", params.note] : [],
2686
- "\u5B9A\u4F4D\u63D0\u793A\uFF1A",
2687
- latestHint,
2688
- "\u8BF7\u4F18\u5148\u5B9A\u4F4D\u8BE5\u9009\u62E9\u5668\u5BF9\u5E94\u7684\u7EC4\u4EF6\u6216\u6837\u5F0F\u6E90\u7801\uFF0C\u5224\u65AD\u662F\u5426\u5E94\u56FA\u5316\u4E3A\u6B63\u5F0F\u7EC4\u4EF6\u6837\u5F0F\uFF1B\u4E0D\u8981\u624B\u6539 dist\u3002"
2689
- ].join("\n");
3301
+ function getPluginTargetContext(el) {
3302
+ const meta = getInspectorComponentMeta(el);
3303
+ return {
3304
+ meta,
3305
+ label: getTargetDisplayLabel(el, meta),
3306
+ selector: meta ? getSelectorForScope(el, "component") : getSelectorForScope(el, "current")
3307
+ };
2690
3308
  }
2691
- function buildAiDraftBasketPrompt(drafts) {
2692
- const sections = drafts.sort((a, b) => a.updatedAt - b.updatedAt).map((draft, index) => {
2693
- const changes = draft.changes.map((change, changeIndex) => `${changeIndex + 1}. ${getChangeLabel(change.prop)}\uFF1A${formatStoredChangeRecordValue(change.prop, change.from)} \u2192 ${formatStoredChangeRecordValue(change.prop, change.val)}`).join("\n");
2694
- return [
2695
- `${index + 1}. \u5143\u7D20\uFF1A${draft.targetLabel}`,
2696
- `\u8303\u56F4\uFF1A${draft.scopeLabel}`,
2697
- `\u9009\u62E9\u5668\uFF1A${draft.selector}`,
2698
- "\u6539\u52A8\uFF1A",
2699
- changes || "\u65E0\u6837\u5F0F\u6539\u52A8"
2700
- ].join("\n");
2701
- }).join("\n\n");
2702
- return [
2703
- "DevInspector \u6837\u5F0F\u4EFB\u52A1",
2704
- `\u9875\u9762\uFF1A${document.title || "\u5F53\u524D\u9875\u9762"}\uFF08${window.location.href}\uFF09`,
2705
- `\u5F85\u5904\u7406\u5BF9\u8C61\uFF1A${drafts.length}`,
2706
- sections,
2707
- ...note ? ["\u8865\u5145\uFF1A", note] : [],
2708
- "\u5B9A\u4F4D\u63D0\u793A\uFF1A",
2709
- "\u8FD9\u4E9B\u5185\u5BB9\u6765\u81EA DevInspector \u672C\u6B21\u4FEE\u6539\u5185\u5BB9\uFF0C\u8BF7\u6309\u5BF9\u8C61\u9010\u4E00\u5B9A\u4F4D\u6E90\u7801\uFF0C\u5224\u65AD\u662F\u5426\u5E94\u56FA\u5316\u4E3A\u7EC4\u4EF6\u6837\u5F0F\u3001token \u6216\u5C40\u90E8\u8986\u76D6\uFF1B\u4E0D\u8981\u624B\u6539 dist\u3002"
2710
- ].join("\n");
3309
+ function getComponentMakerSummary(el) {
3310
+ const meta = getInspectorComponentMeta(el);
3311
+ const capability = getComponentCapability(meta);
3312
+ if (!meta || !capability) return ["\u5F53\u524D\u662F\u666E\u901A\u5143\u7D20\uFF1A\u8BF7\u5224\u65AD\u662F\u5426\u5E94\u6C89\u6DC0\u4E3A\u7EC4\u4EF6\u3001primitive \u6216\u4FDD\u6301\u5C40\u90E8\u5143\u7D20\u3002"];
3313
+ const lines = [
3314
+ `\u7EC4\u4EF6\u540D\uFF1A${getComponentDisplayName(meta)}`,
3315
+ `\u7C7B\u578B\uFF1A${meta.type}`,
3316
+ `\u53D8\u4F53\uFF1A${meta.variant || "default"}`,
3317
+ `\u72B6\u6001\uFF1A${getComponentStateLabel(meta.state)}`
3318
+ ];
3319
+ const textSlots = capability.textSlots?.map((slot) => `${slot.label}=${(getComponentSlotElement(el, slot)?.textContent ?? "").trim() || "\u7A7A"}`) ?? [];
3320
+ const childSlots = capability.childSlots?.map((slot) => `${slot.label}=${(getComponentSlotElement(el, slot)?.textContent ?? "").trim() || "\u7A7A"}`) ?? [];
3321
+ if (capability.editableText) lines.push(`\u6587\u6848\uFF1A${getButtonText(el) || "\u7A7A"}`);
3322
+ if (textSlots.length) lines.push(`\u53EF\u7F16\u8F91\u5185\u5BB9\uFF1A${textSlots.join("\uFF1B")}`);
3323
+ if (childSlots.length) lines.push(`\u5B50\u7EC4\u4EF6\uFF1A${childSlots.join("\uFF1B")}`);
3324
+ return lines;
2711
3325
  }
2712
- function handleSubmitToAi() {
2713
- const draftEntries = Object.values(localDraftsRef.current);
2714
- if (draftEntries.length > 0) {
2715
- const prompt2 = buildAiDraftBasketPrompt(draftEntries);
2716
- copyTextToClipboard(prompt2).then((copied) => {
2717
- setSubmitMsg(copied ? "\u4EFB\u52A1\u6587\u672C\u5DF2\u590D\u5236 \u2713" : "\u590D\u5236\u5931\u8D25");
2718
- setTimeout(() => setSubmitMsg(""), copied ? 2200 : 1800);
2719
- }).catch(() => {
2720
- setSubmitMsg("\u590D\u5236\u5931\u8D25");
2721
- setTimeout(() => setSubmitMsg(""), 1800);
3326
+ function getComponentMakerComponentOptions(current) {
3327
+ const options = /* @__PURE__ */ new Map();
3328
+ document.querySelectorAll("body *").forEach((item) => {
3329
+ const node = item;
3330
+ if (node.closest(".di-panel") || node.classList.contains("di-selected")) return;
3331
+ const meta = getInspectorComponentMeta(item);
3332
+ if (!meta) return;
3333
+ const name = getComponentDisplayName(meta);
3334
+ const existing = options.get(name);
3335
+ if (existing) {
3336
+ existing.count += 1;
3337
+ return;
3338
+ }
3339
+ options.set(name, {
3340
+ name,
3341
+ type: meta.type,
3342
+ layer: meta.layer,
3343
+ count: 1
2722
3344
  });
2723
- return;
2724
- }
2725
- const payload = getPendingEntries();
2726
- if (!payload) return;
2727
- const { el, pending, selector } = payload;
2728
- const componentMeta2 = getInspectorComponentMeta(el);
2729
- const changes = getPendingChangeRecords();
2730
- if (pending.length === 0 && !note && !componentMeta2) {
2731
- setSubmitMsg("\u5148\u6539\u70B9\u6837\u5F0F\u6216\u5199\u5907\u6CE8");
2732
- setTimeout(() => setSubmitMsg(""), 1800);
2733
- return;
2734
- }
2735
- const hasOnlyInstanceContentPending = componentMeta2 && (pendingComponentText !== null || Object.keys(pendingComponentTextSlots).length > 0) && !pendingComponentVariant && !pendingComponentSize && !pendingIconColor && !pendingBadgeStatus && !pendingCardVariant && pending.length === 0;
2736
- const scopeLabel = hasOnlyInstanceContentPending ? "\u5F53\u524D\u5143\u7D20" : scope === "current" ? "\u5F53\u524D\u5143\u7D20" : "\u76F8\u540C\u5143\u7D20";
2737
- const targetLabel = getTargetDisplayLabel(el, componentMeta2);
2738
- const stableSelector = componentMeta2 && hasComponentAttrPending && componentSelectorVal ? componentSelectorVal : selector;
2739
- const prompt = buildAiTaskPrompt({
2740
- pageLabel: `${document.title || "\u5F53\u524D\u9875\u9762"}\uFF08${window.location.href}\uFF09`,
2741
- targetLabel,
2742
- selector: stableSelector,
2743
- scopeLabel,
2744
- changes,
2745
- note
2746
3345
  });
2747
- copyTextToClipboard(prompt).then((copied) => {
2748
- setSubmitMsg(copied ? "\u4EFB\u52A1\u6587\u672C\u5DF2\u590D\u5236 \u2713" : "\u590D\u5236\u5931\u8D25");
2749
- setTimeout(() => setSubmitMsg(""), copied ? 2200 : 1800);
2750
- }).catch(() => {
2751
- setSubmitMsg("\u590D\u5236\u5931\u8D25");
2752
- setTimeout(() => setSubmitMsg(""), 1800);
3346
+ const currentMeta = getInspectorComponentMeta(current);
3347
+ if (currentMeta) {
3348
+ const name = getComponentDisplayName(currentMeta);
3349
+ if (!options.has(name)) {
3350
+ options.set(name, {
3351
+ name,
3352
+ type: currentMeta.type,
3353
+ layer: currentMeta.layer,
3354
+ count: 1
3355
+ });
3356
+ }
3357
+ }
3358
+ return Array.from(options.values()).sort((a, b) => a.name.localeCompare(b.name));
3359
+ }
3360
+ function getComponentMakerActions(mode) {
3361
+ return COMPONENT_MAKER_ACTION_OPTIONS.filter((option) => {
3362
+ if (mode === "new") return option.key !== "add-slot";
3363
+ return option.key !== "create-current";
2753
3364
  });
2754
3365
  }
2755
- function handleDeleteStyleIntent(intentId, selector, prop) {
2756
- fetch(endpoints.deleteStyleIntent, {
2757
- method: "POST",
2758
- headers: { "Content-Type": "application/json" },
2759
- body: JSON.stringify({ id: intentId, selector, prop })
2760
- }).then(async (response) => {
2761
- let body = null;
2762
- try {
2763
- body = await response.json();
2764
- } catch {
2765
- body = null;
2766
- }
2767
- return {
2768
- httpOk: response.ok,
2769
- ...body ?? {}
2770
- };
2771
- }).then((r) => {
2772
- if (r.ok) {
2773
- setStyleIntentSummary(formatStyleIntentSummary(r));
2774
- setSubmitMsg(prop ? "\u5DF2\u5220\u9664\u5C5E\u6027" : "\u5DF2\u5220\u9664\u5BF9\u8C61");
2775
- } else {
2776
- const errorMsg = !r.httpOk ? "\u5220\u9664\u5931\u8D25\uFF1A\u672C\u5730\u670D\u52A1\u5F02\u5E38" : `\u5220\u9664\u5931\u8D25${r.error ? `\uFF1A${String(r.error)}` : ""}`;
2777
- setSubmitMsg(errorMsg);
2778
- }
2779
- setTimeout(() => setSubmitMsg(""), 1800);
2780
- }).catch(() => {
2781
- setSubmitMsg("\u5220\u9664\u5931\u8D25\uFF1A\u8BF7\u5237\u65B0\u9875\u9762\u6216\u91CD\u542F\u672C\u5730 dev");
2782
- setTimeout(() => setSubmitMsg(""), 1800);
3366
+ function syncComponentSpecDraft(updates) {
3367
+ setComponentSpecDraft((prev) => ({ ...prev, ...updates }));
3368
+ }
3369
+ function updateComponentMakerSourceMode(mode, fallbackName) {
3370
+ const availableActions = getComponentMakerActions(mode);
3371
+ const nextAction = availableActions.some((option) => option.key === componentMakerAction) ? componentMakerAction : availableActions[0].key;
3372
+ setComponentMakerSourceMode(mode);
3373
+ setComponentMakerAction(nextAction);
3374
+ syncComponentSpecDraft({
3375
+ sourceMode: mode === "existing" ? "\u5DF2\u6709\u7EC4\u4EF6" : "\u65B0\u5EFA\u7EC4\u4EF6",
3376
+ action: COMPONENT_MAKER_ACTION_LABELS[nextAction],
3377
+ componentName: fallbackName
2783
3378
  });
2784
3379
  }
2785
- function getOriginalValueForProp(prop) {
2786
- if (prop === "font-size") return fontSizeVal;
2787
- if (prop === "font-weight") return fontWeightVal;
2788
- if (prop === "color") return getDisplayLabel(textColorVal, tokenMap, colorPalette, tokenLabels).label;
2789
- if (prop === "background-color") return getDisplayLabel(colors[prop] ?? "", tokenMap, colorPalette, tokenLabels).label;
2790
- if (prop === "border-color") return getDisplayLabel(borderColorVal, tokenMap, colorPalette, tokenLabels).label;
2791
- if (prop === "border-width") return borderWidthVal;
2792
- if (prop === "border-style") return borderStyleVal;
2793
- if (prop === "border-radius") return radiusVal;
2794
- if (prop === "box-shadow") return getShadowChangeDisplay(shadowVal, shadowAuthoredVal, shadowTokens);
2795
- if (prop === "padding") return paddingVal;
2796
- if (prop === "margin") return marginVal;
2797
- if (prop === "gap") return gapVal;
2798
- if (prop === "translate") return formatTranslate(translateVal);
2799
- if (prop === "width") return widthVal;
2800
- if (prop === "height") return heightVal;
2801
- if (prop === "min-height") return `${getOneLineHugHeight(selectedRef.current) || Number.parseFloat(heightVal) || 0}px`;
2802
- if (prop === "max-height") return heightVal;
2803
- if (prop === "justify-content") return getAlignmentLabel("justify-content", justifyVal);
2804
- if (prop === "align-items") return getAlignmentLabel("align-items", alignItemsVal);
2805
- return "";
3380
+ function updateComponentMakerAction(action) {
3381
+ setComponentMakerAction(action);
3382
+ syncComponentSpecDraft({ action: COMPONENT_MAKER_ACTION_LABELS[action] });
2806
3383
  }
2807
- function formatChangeRecordValue(prop, value) {
2808
- if (prop === "padding" || prop === "margin") {
2809
- return getSpaceRecordSummary(prop, value) || "\u65E0";
2810
- }
2811
- if (prop === "gap") {
2812
- return getSpaceRecordSummary("gap", value) || "\u65E0";
2813
- }
2814
- if (prop === "width" || prop === "height" || prop === "min-height" || prop === "max-height") {
2815
- return formatSizeDisplay(value);
2816
- }
2817
- if (prop === "justify-content") return getAlignmentLabel("justify-content", value);
2818
- if (prop === "align-items") return getAlignmentLabel("align-items", value);
2819
- return value;
3384
+ function getSuggestedComponentType(el) {
3385
+ const meta = getInspectorComponentMeta(el);
3386
+ if (meta?.type) return COMPONENT_TYPE_ALIASES[meta.type] ?? meta.type;
3387
+ const tag = el.tagName.toLowerCase();
3388
+ if (tag === "h1") return "\u9875\u9762\u6807\u9898";
3389
+ if (tag === "h2") return "\u533A\u5757\u6807\u9898";
3390
+ if (/^h[3-6]$/.test(tag)) return "\u5C0F\u6807\u9898";
3391
+ if (tag === "button") return "\u6309\u94AE";
3392
+ if (tag === "a") return "\u94FE\u63A5\u6587\u5B57";
3393
+ if (tag === "img" || tag === "picture") return "\u56FE\u7247";
3394
+ if (tag === "input") return "\u8F93\u5165\u6846";
3395
+ if (tag === "textarea") return "\u6587\u672C\u57DF";
3396
+ if (tag === "select") return "\u9009\u62E9\u63A7\u4EF6";
3397
+ if (tag === "label") return "\u8BF4\u660E\u6587\u5B57";
3398
+ if (tag === "p") return "\u6B63\u6587";
3399
+ if (tag === "span" || tag === "strong" || tag === "em") return "\u8BF4\u660E\u6587\u5B57";
3400
+ if (tag === "section" || tag === "main" || tag === "aside" || tag === "div") return "\u5BB9\u5668";
3401
+ return "\u5BB9\u5668";
2820
3402
  }
2821
- function formatStoredChangeRecordValue(prop, value) {
2822
- if (prop === "padding" || prop === "margin" || prop === "gap") {
2823
- return formatStoredSpaceRecordValue(value);
2824
- }
2825
- return value;
3403
+ function normalizeComponentType(value) {
3404
+ return value.trim().toLowerCase();
2826
3405
  }
2827
- function normalizeChangeRecordValue(prop, value) {
2828
- const formatted = formatChangeRecordValue(prop, value).trim();
2829
- if (!formatted || formatted === "\u65E0" || formatted === "none") return "empty";
2830
- if (isZeroLengthValue(formatted)) return "0";
2831
- return formatted.replace(/\s+/g, " ");
3406
+ function getComponentContainerOption(key) {
3407
+ return COMPONENT_CONTAINER_OPTIONS.find((option) => option.key === key) ?? COMPONENT_CONTAINER_OPTIONS[0];
2832
3408
  }
2833
- function getPendingChangeRecords() {
3409
+ function getPurposeOptionsForContainer(containerKey) {
3410
+ const labels = COMPONENT_PURPOSES_BY_CONTAINER[containerKey] ?? COMPONENT_PURPOSES_BY_CONTAINER.other;
3411
+ return labels.map((label) => COMPONENT_PURPOSE_OPTIONS.find((option) => option.label === label)).filter((option) => Boolean(option));
3412
+ }
3413
+ function isPurposeAllowedForContainer(type, containerKey) {
3414
+ const label = getComponentPurposeOption(type).label;
3415
+ return getPurposeOptionsForContainer(containerKey).some((option) => option.label === label);
3416
+ }
3417
+ function getDefaultPurposeForContainer(containerKey) {
3418
+ return getPurposeOptionsForContainer(containerKey)[0] ?? COMPONENT_PURPOSE_OPTIONS[0];
3419
+ }
3420
+ function getComponentPurposeOption(type) {
3421
+ const normalized = COMPONENT_TYPE_ALIASES[type] ?? type.trim();
3422
+ if (normalized.includes("\u6807\u9898")) return COMPONENT_PURPOSE_OPTIONS.find((option) => option.label === "\u6807\u9898");
3423
+ if (normalized === "\u6B63\u6587") return COMPONENT_PURPOSE_OPTIONS.find((option) => option.label === "\u6B63\u6587");
3424
+ if (normalized === "\u8BF4\u660E\u6587\u5B57" || normalized === "\u94FE\u63A5\u6587\u5B57") return COMPONENT_PURPOSE_OPTIONS.find((option) => option.label === "\u8BF4\u660E");
3425
+ if (normalized === "\u72B6\u6001\u6807\u7B7E" || normalized === "\u5206\u7C7B\u6807\u7B7E") return COMPONENT_PURPOSE_OPTIONS.find((option) => option.label === "\u6807\u7B7E");
3426
+ if (normalized === "\u6309\u94AE\u6587\u5B57") return COMPONENT_PURPOSE_OPTIONS.find((option) => option.label === "\u6309\u94AE\u6587\u6848");
3427
+ if (normalized === "\u6309\u94AE") return COMPONENT_PURPOSE_OPTIONS.find((option) => option.label === "\u64CD\u4F5C\u5165\u53E3");
3428
+ if (normalized === "\u8F93\u5165\u6846" || normalized === "\u6587\u672C\u57DF" || normalized === "\u9009\u62E9\u63A7\u4EF6") return COMPONENT_PURPOSE_OPTIONS.find((option) => option.label === "\u8F93\u5165\u63A7\u4EF6");
3429
+ if (normalized === "\u56FE\u6807") return COMPONENT_PURPOSE_OPTIONS.find((option) => option.label === "\u56FE\u6807");
3430
+ if (normalized === "\u5217\u8868\u9879") return COMPONENT_PURPOSE_OPTIONS.find((option) => option.label === "\u529F\u80FD\u5217\u8868");
3431
+ if (normalized === "\u5BB9\u5668" || normalized === "\u5361\u7247" || normalized === "\u5185\u5BB9\u5BB9\u5668" || normalized === "\u5185\u5BB9\u533A\u5757") return COMPONENT_PURPOSE_OPTIONS.find((option) => option.label === "\u5185\u5BB9\u533A\u5757");
3432
+ return COMPONENT_PURPOSE_OPTIONS.find((option) => option.label === normalized) ?? COMPONENT_PURPOSE_OPTIONS[0];
3433
+ }
3434
+ function getSuggestedComponentContainer(el) {
3435
+ const meta = getInspectorComponentMeta(el);
3436
+ if (meta?.type === "Card") return "card";
3437
+ if (meta?.type === "Button") return "action";
3438
+ if (meta?.type === "Badge") return "card";
3439
+ const selfAndAncestors = [];
3440
+ let node = el;
3441
+ while (node && node !== document.body && selfAndAncestors.length < 6) {
3442
+ if (node instanceof HTMLElement) selfAndAncestors.push(node);
3443
+ node = node.parentElement;
3444
+ }
3445
+ const haystack = selfAndAncestors.map((item) => `${item.tagName.toLowerCase()} ${Array.from(item.classList).join(" ")} ${item.getAttribute("role") ?? ""}`).join(" ").toLowerCase();
3446
+ if (/\b(card|panel|tile|task-card)\b/.test(haystack)) return "card";
3447
+ if (/\b(menu|dropdown|popover|option)\b/.test(haystack)) return "menu";
3448
+ if (/\b(form|field|input|textarea|select)\b/.test(haystack)) return "form";
3449
+ if (/\b(modal|dialog|drawer|sheet)\b/.test(haystack)) return "modal";
3450
+ if (/\b(list|table|row|item|history)\b/.test(haystack)) return "list";
3451
+ if (/\b(nav|navbar|breadcrumb|tabs)\b/.test(haystack)) return "navigation";
3452
+ if (/\b(actions|toolbar|button-group|footer)\b/.test(haystack)) return "action";
3453
+ const tag = el.tagName.toLowerCase();
3454
+ if (tag === "nav") return "navigation";
3455
+ if (tag === "form") return "form";
3456
+ if (tag === "button") return "action";
3457
+ if (tag === "li" || tag === "tr") return "list";
3458
+ return "page";
3459
+ }
3460
+ function getSuggestedComponentCreatePurposeType(el, containerKey = getSuggestedComponentContainer(el)) {
3461
+ const tag = el.tagName.toLowerCase();
3462
+ const text = (getTextContent(el) ?? "").trim();
3463
+ if (/^h[1-6]$/.test(tag)) return "\u6807\u9898";
3464
+ if (tag === "p") return "\u6B63\u6587";
3465
+ if (tag === "button") return "\u6309\u94AE\u6587\u6848";
3466
+ if (tag === "input" || tag === "textarea") return "\u5360\u4F4D\u63D0\u793A";
3467
+ if (tag === "img" || tag === "svg" || tag === "picture") return "\u56FE\u6807";
3468
+ if (tag === "label") return "\u8BF4\u660E";
3469
+ if (/\b(status|badge|tag|chip)\b/i.test(Array.from(el.classList ?? []).join(" "))) return "\u6807\u7B7E";
3470
+ if (/^\d+([.,]\d+)?%?$/.test(text)) return "\u6570\u503C";
3471
+ if (tag === "span" || tag === "strong" || tag === "em" || tag === "a") return text.length <= 12 ? "\u8BF4\u660E" : "\u6B63\u6587";
3472
+ if (containerKey === "list") return "\u529F\u80FD\u5217\u8868";
3473
+ if (tag === "section" || tag === "main" || tag === "aside" || tag === "div") return "\u5185\u5BB9\u533A\u5757";
3474
+ const suggested = getComponentPurposeOption(getSuggestedComponentType(el)).label;
3475
+ return isPurposeAllowedForContainer(suggested, containerKey) ? suggested : getDefaultPurposeForContainer(containerKey).label;
3476
+ }
3477
+ function getComponentTypeOption(type) {
3478
+ const canonicalType = COMPONENT_TYPE_ALIASES[type] ?? type;
3479
+ return COMPONENT_TYPE_OPTIONS.find((item) => normalizeComponentType(item.label) === normalizeComponentType(canonicalType));
3480
+ }
3481
+ function getComponentTypeClassification(type, fallbackGroup = "structure", containerKey) {
3482
+ const option = getComponentTypeOption(type);
3483
+ const normalized = COMPONENT_TYPE_ALIASES[type] ?? type.trim();
3484
+ const purpose = getComponentPurposeOption(type);
3485
+ const group = option?.group ?? purpose.group ?? fallbackGroup;
3486
+ const groupLabel = containerKey ? getComponentContainerOption(containerKey).label : COMPONENT_TYPE_GROUP_LABELS[group];
3487
+ const category = option?.category ?? "\u81EA\u5B9A\u4E49";
3488
+ const label = containerKey ? purpose.label : option?.label ?? (normalized || "\u81EA\u5B9A\u4E49");
3489
+ return {
3490
+ group,
3491
+ groupLabel,
3492
+ category,
3493
+ label,
3494
+ path: containerKey ? `${groupLabel} / ${label}` : `${groupLabel} / ${category} / ${label}`
3495
+ };
3496
+ }
3497
+ function getSuggestedComponentTypeGroup(el) {
3498
+ const option = getComponentTypeOption(getSuggestedComponentType(el));
3499
+ if (option) return option.group;
3500
+ const tag = el.tagName.toLowerCase();
3501
+ if (/^h[1-6]$/.test(tag) || tag === "p" || tag === "span" || tag === "strong" || tag === "em" || tag === "label" || tag === "a") return "text";
3502
+ if (tag === "button") return "action";
3503
+ if (tag === "input" || tag === "textarea" || tag === "select") return "form";
3504
+ if (tag === "img" || tag === "picture" || tag === "svg") return "media";
3505
+ if (tag === "nav") return "navigation";
3506
+ return "structure";
3507
+ }
3508
+ function getComponentTypeHint(type) {
3509
+ const option = getComponentTypeOption(type);
3510
+ const purpose = getComponentPurposeOption(type);
3511
+ return option ? `${purpose.label} \xB7 ${purpose.hint}` : `${purpose.label} \xB7 ${purpose.hint}`;
3512
+ }
3513
+ function getComponentNameByType(type, el, containerKey) {
3514
+ const normalized = COMPONENT_TYPE_ALIASES[type] ?? type.trim();
3515
+ const option = getComponentTypeOption(normalized);
3516
+ const purpose = getComponentPurposeOption(type);
3517
+ if (containerKey) {
3518
+ const container = getComponentContainerOption(containerKey);
3519
+ if (container.key === "other" && purpose.group === "structure") return purpose.codePart === "section" ? "container" : purpose.codePart;
3520
+ return `${container.codePrefix}-${purpose.codePart}`;
3521
+ }
3522
+ const tag = el.tagName.toLowerCase();
3523
+ if (normalized === "\u9875\u9762\u6807\u9898" && tag === "h1") return "page-title";
3524
+ if (normalized === "\u533A\u5757\u6807\u9898" && tag === "h2") return "section-title";
3525
+ if (normalized === "\u5C0F\u6807\u9898" && /^h[3-6]$/.test(tag)) return "subsection-title";
3526
+ return option?.codeName ?? normalizeComponentMakerCodePart(normalized) ?? "component";
3527
+ }
3528
+ function getComponentSpecValuePart(value, label) {
3529
+ const escaped = label.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
3530
+ const match = value.match(new RegExp(`${escaped}\uFF1A([^\uFF1B]+)`));
3531
+ return match?.[1]?.trim() ?? "";
3532
+ }
3533
+ function getRecordedComponentSpecs() {
3534
+ return Object.values(localDraftsRef.current).flatMap((draft) => draft.changes.filter((change) => change.prop === "component-spec").map((change) => ({
3535
+ targetLabel: draft.targetLabel,
3536
+ componentName: getComponentSpecValuePart(change.val, "\u7EC4\u4EF6\u540D"),
3537
+ classification: getComponentSpecValuePart(change.val, "\u5F52\u7C7B"),
3538
+ usage: getComponentSpecValuePart(change.val, "\u4F7F\u7528\u573A\u666F")
3539
+ })).filter((spec) => spec.componentName || spec.classification));
3540
+ }
3541
+ function getExistingComponentCreateMatch(classification, componentName) {
3542
+ const recordedSpecs = getRecordedComponentSpecs();
3543
+ const byClassification = recordedSpecs.find((spec) => spec.classification === classification);
3544
+ if (byClassification) return byClassification;
3545
+ const normalizedName = normalizeComponentMakerCodePart(componentName);
3546
+ if (!normalizedName) return null;
3547
+ const recordedByName = recordedSpecs.find((spec) => normalizeComponentMakerCodePart(spec.componentName) === normalizedName);
3548
+ if (recordedByName) return recordedByName;
3549
+ const current = selectedRef.current;
3550
+ const existingKnown = current ? getComponentMakerComponentOptions(current).find(
3551
+ (option) => normalizeComponentMakerCodePart(option.name) === normalizedName
3552
+ ) : null;
3553
+ return existingKnown ? {
3554
+ targetLabel: existingKnown.name,
3555
+ componentName: existingKnown.name,
3556
+ classification,
3557
+ usage: `${existingKnown.type} \xB7 ${existingKnown.count}`
3558
+ } : null;
3559
+ }
3560
+ function getUniqueComponentName(baseName) {
3561
+ const normalizedBase = normalizeComponentMakerCodePart(baseName) || "component";
3562
+ const current = selectedRef.current;
3563
+ const used = new Set([
3564
+ ...getRecordedComponentSpecs().map((spec) => normalizeComponentMakerCodePart(spec.componentName)),
3565
+ ...current ? getComponentMakerComponentOptions(current).map((option) => normalizeComponentMakerCodePart(option.name)) : []
3566
+ ].filter(Boolean));
3567
+ if (!used.has(normalizedBase)) return normalizedBase;
3568
+ for (const suffix of ["alt", "custom", "local", "variant"]) {
3569
+ const candidate = `${normalizedBase}-${suffix}`;
3570
+ if (!used.has(candidate)) return candidate;
3571
+ }
3572
+ let index = 2;
3573
+ while (used.has(`${normalizedBase}-${index}`)) index += 1;
3574
+ return `${normalizedBase}-${index}`;
3575
+ }
3576
+ function getSuggestedComponentPurposeByType(type, el, containerKey = getSuggestedComponentContainer(el)) {
3577
+ const label = getElementDisplayName(el);
3578
+ const container = getComponentContainerOption(containerKey).label;
3579
+ const purpose = getComponentPurposeOption(type).label;
3580
+ if (purpose === "\u6807\u9898") return `\u7528\u4E8E${container}\u6807\u9898\u5C55\u793A`;
3581
+ if (purpose === "\u6B63\u6587") return `\u7528\u4E8E${container}\u6B63\u6587\u5185\u5BB9\u5C55\u793A`;
3582
+ if (purpose === "\u8BF4\u660E") return `\u7528\u4E8E${container}\u8F85\u52A9\u8BF4\u660E\u5C55\u793A`;
3583
+ if (purpose === "\u6807\u7B7E" || purpose === "\u72B6\u6001") return `\u7528\u4E8E${container}\u72B6\u6001\u6216\u6807\u7B7E\u5C55\u793A`;
3584
+ if (purpose === "\u6309\u94AE\u6587\u6848") return `\u7528\u4E8E${container}\u64CD\u4F5C\u6309\u94AE\u6587\u6848`;
3585
+ if (purpose === "\u5360\u4F4D\u63D0\u793A") return `\u7528\u4E8E${container}\u8F93\u5165\u63D0\u793A`;
3586
+ if (purpose === "\u6570\u503C") return `\u7528\u4E8E${container}\u6570\u503C\u5C55\u793A`;
3587
+ if (purpose === "\u56FE\u6807") return `\u7528\u4E8E${container}\u56FE\u6807\u5C55\u793A`;
3588
+ if (purpose === "\u5185\u5BB9\u533A\u5757") return `\u7528\u4E8E\u627F\u8F7D${label}\u533A\u57DF\u5185\u5BB9`;
3589
+ if (purpose === "\u529F\u80FD\u5217\u8868") return `\u7528\u4E8E${container}\u529F\u80FD\u6761\u76EE\u5C55\u793A`;
3590
+ if (purpose === "\u6570\u636E\u5217\u8868") return `\u7528\u4E8E${container}\u6570\u636E\u8BB0\u5F55\u5C55\u793A`;
3591
+ if (purpose === "\u5BFC\u822A\u5217\u8868") return `\u7528\u4E8E${container}\u5BFC\u822A\u5165\u53E3\u5C55\u793A`;
3592
+ if (purpose === "\u6B65\u9AA4\u5217\u8868") return `\u7528\u4E8E${container}\u6D41\u7A0B\u6B65\u9AA4\u5C55\u793A`;
3593
+ if (purpose === "\u5185\u5BB9\u5217\u8868") return `\u7528\u4E8E${container}\u5185\u5BB9\u96C6\u5408\u5C55\u793A`;
3594
+ if (purpose === "\u83DC\u5355\u9879") return `\u7528\u4E8E${container}\u83DC\u5355\u9879\u5C55\u793A`;
3595
+ if (purpose === "\u5206\u7EC4\u6807\u9898") return `\u7528\u4E8E${container}\u5206\u7EC4\u6807\u9898\u5C55\u793A`;
3596
+ if (purpose === "\u5BFC\u822A\u9879") return `\u7528\u4E8E${container}\u5BFC\u822A\u5165\u53E3\u5C55\u793A`;
3597
+ if (purpose === "\u4E3B\u64CD\u4F5C") return `\u7528\u4E8E${container}\u4E3B\u64CD\u4F5C`;
3598
+ if (purpose === "\u6B21\u64CD\u4F5C") return `\u7528\u4E8E${container}\u6B21\u7EA7\u64CD\u4F5C`;
3599
+ if (purpose === "\u56FE\u6807\u6309\u94AE") return `\u7528\u4E8E${container}\u56FE\u6807\u64CD\u4F5C`;
3600
+ return `\u7528\u4E8E${label}\u5C55\u793A`;
3601
+ }
3602
+ function getSuggestedComponentSlotsByType(type) {
3603
+ const option = getComponentTypeOption(type);
3604
+ return option?.slotLabel && option.slotLabel !== "\u65E0" ? option.slotLabel : "\u5185\u5BB9";
3605
+ }
3606
+ function getSuggestedComponentName(el) {
3607
+ const meta = getInspectorComponentMeta(el);
3608
+ if (meta) return getComponentDisplayName(meta);
3609
+ const tag = el.tagName.toLowerCase();
3610
+ const tagNameMap = {
3611
+ h1: "page-title",
3612
+ h2: "section-title",
3613
+ h3: "subsection-title",
3614
+ p: "body-text",
3615
+ span: "inline-text",
3616
+ strong: "strong-text",
3617
+ em: "emphasis-text",
3618
+ a: "text-link",
3619
+ label: "form-label",
3620
+ button: "button",
3621
+ img: "image",
3622
+ section: "section",
3623
+ main: "main-content",
3624
+ aside: "side-content",
3625
+ div: "container"
3626
+ };
3627
+ if (tagNameMap[tag] && /^h[1-6]$/.test(tag)) return tagNameMap[tag];
3628
+ const semanticClass = getClasses(el).find(
3629
+ (className) => !isStateClass(className) && !/^lucide(-|$)/.test(className) && /[a-zA-Z]/.test(className)
3630
+ );
3631
+ return normalizeComponentMakerCodePart(semanticClass || tagNameMap[tag] || getElementDisplayName(el)) || "component";
3632
+ }
3633
+ function getSuggestedComponentPurpose(el) {
3634
+ const container = getSuggestedComponentContainer(el);
3635
+ const type = getSuggestedComponentCreatePurposeType(el, container);
3636
+ return getSuggestedComponentPurposeByType(type, el, container);
3637
+ }
3638
+ function getSuggestedComponentSlots(el) {
3639
+ const text = (getTextContent(el) ?? "").trim();
3640
+ const type = getSuggestedComponentType(el);
3641
+ if (!text) return "\u5185\u5BB9";
3642
+ return getSuggestedComponentSlotsByType(type);
3643
+ }
3644
+ function getEditablePartFieldName(label, type) {
3645
+ const normalized = COMPONENT_TYPE_ALIASES[type] ?? type;
3646
+ if (label.includes("\u8BF4\u660E")) return "description";
3647
+ if (label.includes("\u6807\u7B7E") || label.includes("\u72B6\u6001")) return "statusBadge";
3648
+ if (label.includes("\u6309\u94AE") || normalized === "\u6309\u94AE\u6587\u5B57" || normalized === "\u6309\u94AE") return "label";
3649
+ if (label.includes("\u6807\u9898")) return "title";
3650
+ if (label.includes("\u6B63\u6587") || label.includes("\u5185\u5BB9")) return "content";
3651
+ return normalizeComponentMakerCodePart(label) || "content";
3652
+ }
3653
+ function makeEditablePart(part) {
3654
+ return {
3655
+ id: part.id,
3656
+ label: part.label,
3657
+ value: part.value.trim(),
3658
+ fieldName: getEditablePartFieldName(part.label, part.type),
3659
+ editable: part.editable ?? true,
3660
+ readonlyReason: part.readonlyReason
3661
+ };
3662
+ }
3663
+ function getComponentCreateEditableParts(el, type = getSuggestedComponentType(el)) {
3664
+ const meta = getInspectorComponentMeta(el);
3665
+ const capability = getComponentCapability(meta);
3666
+ const parts = [];
3667
+ const pushUnique = (part) => {
3668
+ if (!part.value && !part.label) return;
3669
+ if (parts.some((item) => item.id === part.id || item.label === part.label && item.value === part.value)) return;
3670
+ parts.push(part);
3671
+ };
3672
+ if (capability?.textSlots?.length) {
3673
+ capability.textSlots.forEach((slot) => pushUnique(makeEditablePart({
3674
+ id: slot.key,
3675
+ label: slot.label,
3676
+ value: getComponentSlotValues(el, [slot])[slot.key] ?? "",
3677
+ type
3678
+ })));
3679
+ }
3680
+ if (capability?.editableText) {
3681
+ pushUnique(makeEditablePart({
3682
+ id: "text",
3683
+ label: getSuggestedComponentSlotsByType(type),
3684
+ value: getButtonText(el),
3685
+ type
3686
+ }));
3687
+ }
3688
+ if (capability?.childSlots?.length) {
3689
+ capability.childSlots.forEach((slot) => {
3690
+ const value = getComponentSlotValues(el, [slot])[slot.key] ?? "";
3691
+ if (!value) return;
3692
+ pushUnique(makeEditablePart({
3693
+ id: slot.key,
3694
+ label: slot.label,
3695
+ value,
3696
+ type,
3697
+ editable: false,
3698
+ readonlyReason: "\u5B50\u7EC4\u4EF6"
3699
+ }));
3700
+ });
3701
+ }
3702
+ if (!parts.length) {
3703
+ const directText = (getTextContent(el) ?? "").trim();
3704
+ if (directText) {
3705
+ pushUnique(makeEditablePart({
3706
+ id: "text",
3707
+ label: getSuggestedComponentSlotsByType(type),
3708
+ value: directText,
3709
+ type
3710
+ }));
3711
+ }
3712
+ }
3713
+ if (!parts.length) {
3714
+ const candidates = [
3715
+ { id: "title", label: "\u6807\u9898", selector: '[data-di-slot="title"], .task-title, .card-title, h1, h2, h3', editable: true },
3716
+ { id: "description", label: "\u8BF4\u660E\u6587", selector: '[data-di-slot="description"], .card-desc, .card-description, p', editable: true },
3717
+ { id: "statusBadge", label: "\u6807\u7B7E", selector: '[data-di-slot="status"], .status-badge, .badge, .tag, .chip', editable: false, readonlyReason: "\u5B50\u7EC4\u4EF6" }
3718
+ ];
3719
+ candidates.forEach((candidate) => {
3720
+ const target = el.querySelector(candidate.selector);
3721
+ const value = (target?.textContent ?? "").trim();
3722
+ if (!value) return;
3723
+ pushUnique(makeEditablePart({
3724
+ id: candidate.id,
3725
+ label: candidate.label,
3726
+ value,
3727
+ type,
3728
+ editable: candidate.editable,
3729
+ readonlyReason: candidate.readonlyReason
3730
+ }));
3731
+ });
3732
+ }
3733
+ if (!parts.length) {
3734
+ const allText = (el.textContent ?? "").trim();
3735
+ if (allText) {
3736
+ pushUnique(makeEditablePart({
3737
+ id: "content",
3738
+ label: "\u5185\u5BB9",
3739
+ value: allText,
3740
+ type
3741
+ }));
3742
+ }
3743
+ }
3744
+ return parts;
3745
+ }
3746
+ function getComponentEditablePartsSummary(parts) {
3747
+ const editable = parts.filter((part) => part.editable);
3748
+ if (editable.length) return editable.map((part) => part.label).join("\uFF1B");
3749
+ return parts.length ? parts.map((part) => `${part.label}\uFF08\u53EA\u8BFB\uFF09`).join("\uFF1B") : "\u5185\u5BB9";
3750
+ }
3751
+ function getComponentCreateStyleRules(type, purpose, fallbackGroup = "structure", containerKey) {
3752
+ const classification = getComponentTypeClassification(type, fallbackGroup, containerKey);
3753
+ return [
3754
+ `\u7EC4\u4EF6\u5F52\u7C7B\uFF1A${classification.path}`,
3755
+ `\u4F7F\u7528\u573A\u666F\uFF1A${purpose.trim() || "\u7528\u4E8E\u5F53\u524D\u5143\u7D20\u590D\u7528"}`,
3756
+ "\u4F7F\u7528\u5F53\u524D\u5143\u7D20\u7684\u6587\u5B57\u3001\u5916\u89C2\u3001\u5E03\u5C40\u3001\u9634\u5F71\u548C\u95F4\u8DDD\u4F5C\u4E3A\u7EC4\u4EF6\u9ED8\u8BA4\u6837\u5F0F",
3757
+ "token \u4F18\u5148\uFF1A\u80FD\u5339\u914D token \u7684\u4F7F\u7528 token\uFF0C\u65E0\u6CD5\u5339\u914D\u7684\u4FDD\u7559\u81EA\u5B9A\u4E49\u503C",
3758
+ "\u6682\u4E0D\u521B\u5EFA\u53D8\u4F53",
3759
+ "\u521B\u5EFA\u540E\u7528\u65B0\u7EC4\u4EF6\u66FF\u6362\u5F53\u524D\u5143\u7D20",
3760
+ "\u4E0D\u4FEE\u6539\u4E1A\u52A1\u903B\u8F91"
3761
+ ].join("\uFF1B");
3762
+ }
3763
+ function getComponentMakerSpecDefaults(el) {
3764
+ const meta = getInspectorComponentMeta(el);
3765
+ const capability = getComponentCapability(meta);
3766
+ const suggestedContainer = getSuggestedComponentContainer(el);
3767
+ const suggestedType = getSuggestedComponentCreatePurposeType(el, suggestedContainer);
3768
+ const suggestedTypeGroup = getComponentPurposeOption(suggestedType).group;
3769
+ const classification = getComponentTypeClassification(suggestedType, suggestedTypeGroup, suggestedContainer).path;
3770
+ const editableParts = getComponentCreateEditableParts(el, suggestedType);
3771
+ const variantLabel = meta ? [
3772
+ capability?.variantKind === "card" ? `\u5C55\u793A=${getCardDisplayLabel(meta.variant)}` : `\u53D8\u4F53=${meta.variant || "default"}`,
3773
+ `\u72B6\u6001=${getComponentStateLabel(meta.state)}`
3774
+ ].join("\uFF1B") : "default";
3775
+ return {
3776
+ sourceMode: meta ? "\u5DF2\u6709\u7EC4\u4EF6" : "\u65B0\u5EFA\u7EC4\u4EF6",
3777
+ action: meta ? "\u65B0\u589E\u5F53\u524D\u53D8\u4F53" : "\u521B\u5EFA\u7EC4\u4EF6",
3778
+ classification: meta ? "" : classification,
3779
+ componentName: meta ? getComponentDisplayName(meta) : getComponentNameByType(suggestedType, el, suggestedContainer),
3780
+ usage: meta ? "" : getSuggestedComponentPurpose(el),
3781
+ editableParts,
3782
+ variants: variantLabel,
3783
+ slots: editableParts.length ? getComponentEditablePartsSummary(editableParts) : getSuggestedComponentSlots(el),
3784
+ styleRules: meta ? "\u6CBF\u7528\u5F53\u524D\u7EC4\u4EF6\u767D\u540D\u5355\uFF0C\u53EA\u5F00\u653E\u5141\u8BB8\u4FEE\u6539\u7684 props\u3001\u53EF\u7F16\u8F91\u5185\u5BB9\u3001variant \u548C token\u3002" : getComponentCreateStyleRules(suggestedType, getSuggestedComponentPurpose(el), suggestedTypeGroup, suggestedContainer)
3785
+ };
3786
+ }
3787
+ function getComponentMakerVariantDefaults(el) {
3788
+ const meta = getInspectorComponentMeta(el);
3789
+ const capability = getComponentCapability(meta);
3790
+ const dimension = capability?.variantKind === "card" ? "\u5C55\u793A" : capability?.variantKind ? "\u53D8\u4F53" : capability?.statusKind ? "\u72B6\u6001" : capability?.sizeKind ? "\u5C3A\u5BF8" : "\u81EA\u5B9A\u4E49";
3791
+ const base = meta ? capability?.variantKind === "card" ? getCardDisplayLabel(meta.variant) : meta.variant || getComponentStateLabel(meta.state) : "\u5F53\u524D\u6837\u5F0F";
3792
+ return {
3793
+ dimension,
3794
+ name: "",
3795
+ base,
3796
+ rules: "\u57FA\u4E8E\u5F53\u524D\u7EC4\u4EF6\u6837\u5F0F\u521B\u5EFA\u65B0\u53D8\u4F53\uFF1B\u53EA\u65B0\u589E\u7EC4\u4EF6 API\u3001token \u6620\u5C04\u548C\u6837\u5F0F\u89C4\u5219\uFF0C\u4E0D\u6539\u4E1A\u52A1\u903B\u8F91\u3002"
3797
+ };
3798
+ }
3799
+ function getComponentMakerDimensionDisplayName(dimension) {
3800
+ if (dimension === "\u72B6\u6001") return "\u4EA4\u4E92\u72B6\u6001";
3801
+ if (dimension === "\u5C3A\u5BF8") return "\u5927\u5C0F\u89C4\u683C";
3802
+ if (dimension === "\u5C55\u793A") return "\u5C55\u793A\u5F62\u6001";
3803
+ if (dimension === "\u53D8\u4F53") return "\u5916\u89C2\u53D8\u4F53";
3804
+ if (dimension === "\u989C\u8272") return "\u989C\u8272\u89C4\u683C";
3805
+ return dimension || "\u89C4\u683C";
3806
+ }
3807
+ function normalizeComponentMakerCodePart(value) {
3808
+ return value.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[^a-zA-Z0-9]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase();
3809
+ }
3810
+ function getGeneratedComponentMakerVariantName(componentName, item) {
3811
+ const base = normalizeComponentMakerCodePart(componentName) || "component";
3812
+ const suffix = normalizeComponentMakerCodePart(item?.name || item?.label || "variant") || "variant";
3813
+ return `${base}--${suffix}`;
3814
+ }
3815
+ function makeComponentMakerVariantSuggestion(item) {
3816
+ return item;
3817
+ }
3818
+ function getComponentMakerVariantSuggestions(el) {
3819
+ const meta = getInspectorComponentMeta(el);
3820
+ const capability = getComponentCapability(meta);
3821
+ const base = getComponentMakerVariantDefaults(el).base || "\u5F53\u524D\u6837\u5F0F";
3822
+ const cs = getComputedStyle(el);
3823
+ const colorInfo = getDisplayLabel(normalizeColor(cs.color), tokenMap, colorPalette, tokenLabels);
3824
+ const currentStyle = `${formatFontSizeControlValue(cs.fontSize.trim())} / ${cs.fontWeight.trim()} / ${colorInfo.label}`;
3825
+ const withBase = (item) => makeComponentMakerVariantSuggestion({
3826
+ ...item,
3827
+ base
3828
+ });
3829
+ if (capability?.type === "Button") {
3830
+ return [
3831
+ ...BUTTON_VARIANT_OPTIONS.map((option) => withBase({
3832
+ id: `button-variant-${option.key}`,
3833
+ dimension: "\u53D8\u4F53",
3834
+ name: option.key,
3835
+ label: option.label,
3836
+ description: "\u6309\u94AE\u5916\u89C2\u5206\u652F",
3837
+ rules: `\u8865\u9F50 ${option.label} \u7684\u9ED8\u8BA4\u3001hover\u3001focus-visible \u548C disabled \u89C6\u89C9\u89C4\u5219\u3002`,
3838
+ visual: option.key === "primary" ? "brand" : option.key === "ghost" ? "neutral" : option.key === "text" ? "compact" : "floating"
3839
+ })),
3840
+ ...BUTTON_SIZE_OPTIONS.map((option) => withBase({
3841
+ id: `button-size-${option.key}`,
3842
+ dimension: "\u5C3A\u5BF8",
3843
+ name: option.key.toUpperCase(),
3844
+ label: option.label,
3845
+ description: `${option.minHeight} \u9AD8\u5EA6\u89C4\u683C`,
3846
+ rules: `\u65B0\u589E ${option.label} \u5C3A\u5BF8\uFF1A\u9AD8\u5EA6 ${option.minHeight}\uFF0C\u5185\u8FB9\u8DDD ${option.padding}\uFF0C\u5B57\u53F7 ${option.fontSize}\u3002`,
3847
+ visual: "size"
3848
+ })),
3849
+ withBase({
3850
+ id: "button-state-disabled",
3851
+ dimension: "\u72B6\u6001",
3852
+ name: "disabled",
3853
+ label: "\u7981\u7528",
3854
+ description: "\u4E0D\u53EF\u70B9\u51FB\u72B6\u6001",
3855
+ rules: "\u65B0\u589E disabled \u72B6\u6001\uFF1A\u964D\u4F4E\u5BF9\u6BD4\u5EA6\uFF0C\u4FDD\u7559\u53EF\u8BFB\u6027\uFF0C\u5E76\u7981\u6B62 hover \u5F3A\u53CD\u9988\u3002",
3856
+ visual: "disabled"
3857
+ })
3858
+ ];
3859
+ }
3860
+ if (capability?.type === "Badge") {
3861
+ return [
3862
+ ...BADGE_STATUS_OPTIONS.map((option) => withBase({
3863
+ id: `badge-status-${option.key}`,
3864
+ dimension: "\u72B6\u6001",
3865
+ name: option.key,
3866
+ label: option.label,
3867
+ description: "\u6807\u7B7E\u8BED\u4E49\u72B6\u6001",
3868
+ rules: `\u8865\u9F50 ${option.label} \u6807\u7B7E\u72B6\u6001\uFF1A\u80CC\u666F\u3001\u6587\u5B57\u8272\u3001\u8FB9\u6846\u8272\u4F18\u5148\u590D\u7528\u8BED\u4E49 token\u3002`,
3869
+ visual: option.key === "success" ? "success" : option.key === "warning" ? "warning" : option.key === "danger" ? "danger" : option.key === "progress" ? "brand" : "neutral"
3870
+ })),
3871
+ ...BADGE_SIZE_OPTIONS.map((option) => withBase({
3872
+ id: `badge-size-${option.key}`,
3873
+ dimension: "\u5C3A\u5BF8",
3874
+ name: option.key.toUpperCase(),
3875
+ label: option.label,
3876
+ description: `${option.minHeight} \u6807\u7B7E\u5C3A\u5BF8`,
3877
+ rules: `\u65B0\u589E ${option.label} \u5C3A\u5BF8\uFF1A\u9AD8\u5EA6 ${option.minHeight}\uFF0C\u5185\u8FB9\u8DDD ${option.padding}\uFF0C\u5B57\u53F7 ${option.fontSize}\u3002`,
3878
+ visual: "size"
3879
+ }))
3880
+ ];
3881
+ }
3882
+ if (capability?.type === "Card") {
3883
+ return [
3884
+ ...CARD_VARIANT_OPTIONS.filter((option) => option.key !== "default").map((option) => withBase({
3885
+ id: `card-display-${option.key}`,
3886
+ dimension: "\u5C55\u793A",
3887
+ name: option.key,
3888
+ label: option.label,
3889
+ description: "\u5361\u7247\u5C55\u793A\u5F62\u6001",
3890
+ rules: `\u65B0\u589E ${option.label} \u5C55\u793A\uFF1A\u57FA\u4E8E\u5F53\u524D\u5361\u7247\u7ED3\u6784\u8C03\u6574\u5BB9\u5668\u3001\u9634\u5F71\u3001\u95F4\u8DDD\u548C\u6807\u9898\u5C42\u7EA7\uFF1B\u53EF\u7F16\u8F91\u5185\u5BB9\u4FDD\u6301\u4E0D\u53D8\u3002`,
3891
+ visual: option.key === "compact" ? "compact" : option.key === "floating" ? "floating" : option.key === "emphasis" ? "emphasis" : "neutral"
3892
+ })),
3893
+ ...COMPONENT_INTERACTION_STATE_OPTIONS.map((option) => withBase({
3894
+ id: `card-state-${option.key}`,
3895
+ dimension: "\u72B6\u6001",
3896
+ name: option.key,
3897
+ label: option.label,
3898
+ description: option.description,
3899
+ rules: `\u65B0\u589E ${option.label} \u4EA4\u4E92\u72B6\u6001\uFF1A\u4FDD\u7559\u5361\u7247\u7ED3\u6784\uFF0C\u53EA\u8C03\u6574\u89C6\u89C9\u53CD\u9988\u548C\u53EF\u8BBF\u95EE\u72B6\u6001\u3002`,
3900
+ visual: option.visual
3901
+ })),
3902
+ ...COMPONENT_GENERIC_SIZE_OPTIONS.map((option) => withBase({
3903
+ id: `card-size-${option.key}`,
3904
+ dimension: "\u5C3A\u5BF8",
3905
+ name: option.key,
3906
+ label: option.label,
3907
+ description: option.description,
3908
+ rules: `\u65B0\u589E ${option.label} \u5927\u5C0F\u89C4\u683C\uFF1A\u57FA\u4E8E\u5F53\u524D\u5361\u7247\u8C03\u6574\u5185\u8FB9\u8DDD\u3001\u6700\u5C0F\u9AD8\u5EA6\u548C\u6587\u5B57\u5C42\u7EA7\u3002`,
3909
+ visual: option.visual
3910
+ }))
3911
+ ];
3912
+ }
3913
+ if (capability?.type === "Icon") {
3914
+ return [
3915
+ ...ICON_COLOR_OPTIONS.map((option) => withBase({
3916
+ id: `icon-color-${option.key}`,
3917
+ dimension: "\u989C\u8272",
3918
+ name: option.key,
3919
+ label: option.label,
3920
+ description: "\u56FE\u6807\u8BED\u4E49\u8272",
3921
+ rules: `\u65B0\u589E ${option.label} \u56FE\u6807\u989C\u8272\u6620\u5C04\uFF1A${option.value}\u3002`,
3922
+ visual: option.key === "success" ? "success" : option.key === "warning" ? "warning" : option.key === "danger" ? "danger" : option.key === "brand" ? "brand" : "neutral"
3923
+ })),
3924
+ ...ICON_SIZE_OPTIONS.map((option) => withBase({
3925
+ id: `icon-size-${option.key}`,
3926
+ dimension: "\u5C3A\u5BF8",
3927
+ name: option.key.toUpperCase(),
3928
+ label: option.label,
3929
+ description: `${option.size} \u56FE\u6807\u5C3A\u5BF8`,
3930
+ rules: `\u65B0\u589E ${option.label} \u56FE\u6807\u5C3A\u5BF8\uFF1A\u5BBD\u9AD8 ${option.size}\u3002`,
3931
+ visual: "size"
3932
+ }))
3933
+ ];
3934
+ }
3935
+ const target = meta ? getComponentDisplayName(meta) : getElementDisplayName(el, meta);
3936
+ return [
3937
+ withBase({
3938
+ id: "generic-default",
3939
+ dimension: "\u5C55\u793A",
3940
+ name: "default",
3941
+ label: "\u9ED8\u8BA4",
3942
+ description: currentStyle,
3943
+ rules: `\u6C89\u6DC0 ${target} \u7684\u5F53\u524D\u6837\u5F0F\u4E3A\u9ED8\u8BA4\u6001\uFF1A${currentStyle}\u3002`,
3944
+ visual: "neutral"
3945
+ }),
3946
+ withBase({
3947
+ id: "generic-compact",
3948
+ dimension: "\u5C55\u793A",
3949
+ name: "compact",
3950
+ label: "\u7D27\u51D1",
3951
+ description: "\u538B\u7F29\u7A7A\u95F4",
3952
+ rules: "\u57FA\u4E8E\u5F53\u524D\u6837\u5F0F\u751F\u6210\u7D27\u51D1\u5F62\u6001\uFF1A\u5B57\u53F7\u3001\u95F4\u8DDD\u6216\u9AD8\u5EA6\u964D\u4F4E\u4E00\u6863\uFF0C\u4FDD\u6301\u53EF\u8BFB\u3002",
3953
+ visual: "compact"
3954
+ }),
3955
+ withBase({
3956
+ id: "generic-emphasis",
3957
+ dimension: "\u5C55\u793A",
3958
+ name: "emphasis",
3959
+ label: "\u5F3A\u8C03",
3960
+ description: "\u589E\u5F3A\u91CD\u70B9",
3961
+ rules: "\u57FA\u4E8E\u5F53\u524D\u6837\u5F0F\u751F\u6210\u5F3A\u8C03\u5F62\u6001\uFF1A\u63D0\u5347\u5B57\u91CD\u6216\u8BED\u4E49\u8272\uFF0C\u4E0D\u6539\u53D8\u4E1A\u52A1\u5185\u5BB9\u3002",
3962
+ visual: "emphasis"
3963
+ }),
3964
+ withBase({
3965
+ id: "generic-muted",
3966
+ dimension: "\u72B6\u6001",
3967
+ name: "muted",
3968
+ label: "\u5F31\u5316",
3969
+ description: "\u964D\u4F4E\u5C42\u7EA7",
3970
+ rules: "\u57FA\u4E8E\u5F53\u524D\u6837\u5F0F\u751F\u6210\u5F31\u5316\u5F62\u6001\uFF1A\u964D\u4F4E\u6587\u5B57\u8272\u5C42\u7EA7\u6216\u900F\u660E\u5EA6\uFF0C\u4FDD\u7559\u5E03\u5C40\u3002",
3971
+ visual: "disabled"
3972
+ }),
3973
+ withBase({
3974
+ id: "generic-size-s",
3975
+ dimension: "\u5C3A\u5BF8",
3976
+ name: "S",
3977
+ label: "S",
3978
+ description: "\u5C0F\u5C3A\u5BF8",
3979
+ rules: "\u57FA\u4E8E\u5F53\u524D\u6837\u5F0F\u751F\u6210\u5C0F\u5C3A\u5BF8\u89C4\u683C\uFF0C\u538B\u7F29\u5B57\u53F7\u3001\u5185\u8FB9\u8DDD\u6216\u9AD8\u5EA6\u4E00\u6863\u3002",
3980
+ visual: "size"
3981
+ }),
3982
+ withBase({
3983
+ id: "generic-size-l",
3984
+ dimension: "\u5C3A\u5BF8",
3985
+ name: "L",
3986
+ label: "L",
3987
+ description: "\u5927\u5C3A\u5BF8",
3988
+ rules: "\u57FA\u4E8E\u5F53\u524D\u6837\u5F0F\u751F\u6210\u5927\u5C3A\u5BF8\u89C4\u683C\uFF0C\u653E\u5927\u5B57\u53F7\u3001\u5185\u8FB9\u8DDD\u6216\u9AD8\u5EA6\u4E00\u6863\u3002",
3989
+ visual: "size"
3990
+ })
3991
+ ];
3992
+ }
3993
+ function stripInspectorArtifactsFromPreview(el) {
3994
+ el.classList.remove("di-selected");
3995
+ el.removeAttribute("data-di-panel-role");
3996
+ el.querySelectorAll("*").forEach((child) => {
3997
+ child.classList.remove("di-selected");
3998
+ child.removeAttribute("data-di-panel-role");
3999
+ });
4000
+ }
4001
+ function applyGenericVariantPreview(el, item) {
4002
+ if (!(el instanceof HTMLElement)) return;
4003
+ const key = item.name.toLowerCase();
4004
+ if (item.visual === "compact") {
4005
+ el.style.setProperty("transform", key === "pressed" ? "scale(0.98)" : "scale(0.92)");
4006
+ el.style.setProperty("transform-origin", "left center");
4007
+ }
4008
+ if (item.visual === "floating") {
4009
+ el.style.setProperty("box-shadow", "0 12px 28px rgba(15, 23, 42, 0.16)");
4010
+ el.style.setProperty("transform", "translateY(-2px)");
4011
+ el.style.setProperty("transform-origin", "left center");
4012
+ }
4013
+ if (item.visual === "emphasis") {
4014
+ el.style.setProperty("font-weight", "800");
4015
+ el.style.setProperty("color", "var(--color-text-strong, #0f172a)");
4016
+ }
4017
+ if (item.visual === "brand") {
4018
+ el.style.setProperty("outline", "2px solid #7c3aed");
4019
+ el.style.setProperty("outline-offset", "2px");
4020
+ }
4021
+ if (item.visual === "disabled") {
4022
+ el.style.setProperty("opacity", "0.52");
4023
+ }
4024
+ if (item.id.includes("-size-s")) {
4025
+ el.style.setProperty("transform", "scale(0.92)");
4026
+ el.style.setProperty("transform-origin", "left center");
4027
+ }
4028
+ if (item.id.includes("-size-l")) {
4029
+ el.style.setProperty("transform", "scale(1.04)");
4030
+ el.style.setProperty("transform-origin", "left center");
4031
+ }
4032
+ }
4033
+ function applyComponentMakerPreviewVariant(el, item) {
4034
+ if (!item) return;
4035
+ const key = item.name.toLowerCase();
4036
+ if (item.id.startsWith("card-display-")) {
4037
+ setCardVariantOnTargets([el], key);
4038
+ return;
4039
+ }
4040
+ if (item.id.startsWith("card-state-") || item.id.startsWith("card-size-")) {
4041
+ applyGenericVariantPreview(el, item);
4042
+ return;
4043
+ }
4044
+ if (item.id.startsWith("button-variant-")) {
4045
+ setButtonVariantOnTargets([el], key);
4046
+ return;
4047
+ }
4048
+ if (item.id.startsWith("button-size-")) {
4049
+ setButtonSizeOnTargets([el], key);
4050
+ return;
4051
+ }
4052
+ if (item.id.startsWith("badge-status-")) {
4053
+ setBadgeStatusOnTargets([el], key);
4054
+ return;
4055
+ }
4056
+ if (item.id.startsWith("badge-size-")) {
4057
+ setBadgeSizeOnTargets([el], key);
4058
+ return;
4059
+ }
4060
+ if (item.id.startsWith("icon-color-")) {
4061
+ setIconColorOnTargets([el], key);
4062
+ return;
4063
+ }
4064
+ if (item.id.startsWith("icon-size-")) {
4065
+ setIconSizeOnTargets([el], key);
4066
+ return;
4067
+ }
4068
+ applyGenericVariantPreview(el, item);
4069
+ }
4070
+ function getComponentMakerLivePreviewHtml(el, item) {
4071
+ const clone = el.cloneNode(true);
4072
+ stripInspectorArtifactsFromPreview(clone);
4073
+ applyComponentMakerPreviewVariant(clone, item);
4074
+ clone.classList.add("di-plugin-preview-node");
4075
+ if (clone instanceof HTMLElement) {
4076
+ clone.style.setProperty("max-width", "100%");
4077
+ clone.style.setProperty("box-sizing", "border-box");
4078
+ }
4079
+ return clone.outerHTML;
4080
+ }
4081
+ function getSelectedComponentMakerVariantItems(el) {
4082
+ return getComponentMakerVariantSuggestions(el).filter((item) => !componentVariantExcludedIds.includes(item.id));
4083
+ }
4084
+ function getActiveComponentMakerVariantDraft(el) {
4085
+ const selectedItems = getSelectedComponentMakerVariantItems(el);
4086
+ return {
4087
+ ...componentVariantDraft,
4088
+ items: selectedItems,
4089
+ dimension: selectedItems.length === 1 ? selectedItems[0].dimension : componentVariantDraft.dimension,
4090
+ name: selectedItems.length === 1 ? selectedItems[0].name : componentVariantDraft.name,
4091
+ rules: selectedItems.length ? "\u57FA\u4E8E\u5F53\u524D\u9009\u4E2D\u5BF9\u8C61\u751F\u6210\u4E00\u7EC4\u7EC4\u4EF6\u53D8\u4F53\u8349\u6848\uFF1B\u9009\u4E2D\u5361\u7247\u5373\u4E3A\u672C\u6B21\u8981\u521B\u5EFA\u7684\u53D8\u4F53\u3002" : componentVariantDraft.rules
4092
+ };
4093
+ }
4094
+ function toggleComponentMakerVariantSuggestion(id) {
4095
+ setComponentVariantPreviewId(id);
4096
+ setComponentVariantExcludedIds((prev) => prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]);
4097
+ }
4098
+ function copyPluginPrompt(prompt, successMsg) {
4099
+ if (!prompt) return;
4100
+ copyTextToClipboard(prompt).then((copied) => {
4101
+ setPluginMsg(copied ? successMsg : "\u590D\u5236\u5931\u8D25");
4102
+ setTimeout(() => setPluginMsg(""), copied ? 2200 : 1800);
4103
+ }).catch(() => {
4104
+ setPluginMsg("\u590D\u5236\u5931\u8D25");
4105
+ setTimeout(() => setPluginMsg(""), 1800);
4106
+ });
4107
+ }
4108
+ function handleRecordComponentSpecDraft(draftOverride = componentSpecDraft) {
4109
+ const nextEntry = buildComponentSpecDraftEntry(draftOverride);
4110
+ setLocalDrafts((prev) => ({ ...prev, [nextEntry.key]: nextEntry }));
4111
+ setPluginMsg("\u7EC4\u4EF6\u89C4\u683C\u5DF2\u8BB0\u5F55 \u2713");
4112
+ setTimeout(() => setPluginMsg(""), 2200);
4113
+ }
4114
+ function buildComponentSpecDraftEntry(draftOverride) {
4115
+ const el = selectedRef.current;
4116
+ const info = getDraftTargetInfo(el);
4117
+ const val = formatComponentMakerSpecDraft(draftOverride);
4118
+ const existing = localDraftsRef.current[info.key];
4119
+ const existingByProp = new Map(existing?.changes.map((change) => [change.prop, change]) ?? []);
4120
+ const mergedByProp = /* @__PURE__ */ new Map();
4121
+ existing?.changes.forEach((change) => mergedByProp.set(change.prop, change));
4122
+ const previous = existingByProp.get("component-spec");
4123
+ mergedByProp.set("component-spec", {
4124
+ prop: "component-spec",
4125
+ from: previous?.from ?? "\u672A\u8BB0\u5F55",
4126
+ val
4127
+ });
4128
+ return {
4129
+ ...info,
4130
+ changes: Array.from(mergedByProp.values()),
4131
+ updatedAt: Date.now()
4132
+ };
4133
+ }
4134
+ function openComponentCreateDrawer() {
4135
+ const el = selectedRef.current;
4136
+ setLibraryOpen(false);
4137
+ const defaults = getComponentMakerSpecDefaults(el);
4138
+ const suggestedContainer = getSuggestedComponentContainer(el);
4139
+ const suggestedType = getSuggestedComponentCreatePurposeType(el, suggestedContainer);
4140
+ const suggestedGroup = getComponentPurposeOption(suggestedType).group;
4141
+ const classification = getComponentTypeClassification(suggestedType, suggestedGroup, suggestedContainer).path;
4142
+ const suggestedName = getComponentNameByType(suggestedType, el, suggestedContainer);
4143
+ const existingMatch = getExistingComponentCreateMatch(classification, suggestedName);
4144
+ const resolution = existingMatch ? "reuse" : "new";
4145
+ setComponentMakerSourceMode("new");
4146
+ setComponentMakerAction("create-current");
4147
+ setComponentSpecDraft({
4148
+ ...defaults,
4149
+ sourceMode: resolution === "reuse" ? "\u590D\u7528\u5DF2\u6709\u7EC4\u4EF6" : "\u65B0\u5EFA\u7EC4\u4EF6",
4150
+ action: resolution === "reuse" ? "\u590D\u7528\u7EC4\u4EF6" : "\u521B\u5EFA\u7EC4\u4EF6",
4151
+ classification,
4152
+ componentName: resolution === "reuse" && existingMatch?.componentName ? existingMatch.componentName : suggestedName,
4153
+ usage: getSuggestedComponentPurposeByType(suggestedType, el, suggestedContainer),
4154
+ editableParts: getComponentCreateEditableParts(el, suggestedType),
4155
+ variants: "\u6682\u4E0D\u521B\u5EFA"
4156
+ });
4157
+ setComponentCreateContainer(suggestedContainer);
4158
+ setComponentCreateContainerMenuOpen(false);
4159
+ setComponentCreateType(suggestedType);
4160
+ setComponentCreateTypeMenuOpen(false);
4161
+ setComponentCreatePurpose(getSuggestedComponentPurposeByType(suggestedType, el, suggestedContainer));
4162
+ setComponentCreateNameTouched(false);
4163
+ setComponentCreateResolution(resolution);
4164
+ setComponentCreateOpen(true);
4165
+ }
4166
+ function applyComponentCreateContainer(nextContainer) {
4167
+ const el = selectedRef.current;
4168
+ if (!el) return;
4169
+ const currentType = componentCreateType || getSuggestedComponentCreatePurposeType(el, componentCreateContainer);
4170
+ const type = isPurposeAllowedForContainer(currentType, nextContainer) ? currentType : getSuggestedComponentCreatePurposeType(el, nextContainer);
4171
+ const group = getComponentPurposeOption(type).group;
4172
+ const classification = getComponentTypeClassification(type, group, nextContainer).path;
4173
+ const nextSuggestedName = getComponentNameByType(type, el, nextContainer);
4174
+ const existingMatch = getExistingComponentCreateMatch(classification, nextSuggestedName);
4175
+ const nextResolution = existingMatch ? "reuse" : "new";
4176
+ const currentName = componentSpecDraft.componentName.trim();
4177
+ const previousSuggestedName = getComponentNameByType(type, el, componentCreateContainer);
4178
+ const shouldUpdateName = !componentCreateNameTouched || !currentName || currentName === previousSuggestedName || currentName === getSuggestedComponentName(el);
4179
+ const nextPurpose = getSuggestedComponentPurposeByType(type, el, nextContainer);
4180
+ setComponentCreateContainer(nextContainer);
4181
+ setComponentCreateType(type);
4182
+ setComponentCreateContainerMenuOpen(false);
4183
+ setComponentCreatePurpose(nextPurpose);
4184
+ setComponentCreateResolution(nextResolution);
4185
+ syncComponentSpecDraft({
4186
+ sourceMode: nextResolution === "reuse" ? "\u590D\u7528\u5DF2\u6709\u7EC4\u4EF6" : "\u65B0\u5EFA\u7EC4\u4EF6",
4187
+ action: nextResolution === "reuse" ? "\u590D\u7528\u7EC4\u4EF6" : "\u521B\u5EFA\u7EC4\u4EF6",
4188
+ classification,
4189
+ usage: nextPurpose,
4190
+ ...shouldUpdateName ? { componentName: nextResolution === "reuse" && existingMatch?.componentName ? existingMatch.componentName : nextSuggestedName } : {},
4191
+ styleRules: getComponentCreateStyleRules(type, nextPurpose, group, nextContainer)
4192
+ });
4193
+ }
4194
+ function applyComponentCreateType(nextType) {
4195
+ const type = nextType.trim();
4196
+ if (!type) return;
4197
+ const el = selectedRef.current;
4198
+ if (!el) return;
4199
+ const previousType = componentCreateType;
4200
+ const currentName = componentSpecDraft.componentName.trim();
4201
+ const currentSlots = componentSpecDraft.slots.trim();
4202
+ const previousSuggestedName = previousType ? getComponentNameByType(previousType, el, componentCreateContainer) : getSuggestedComponentName(el);
4203
+ const previousSuggestedSlots = previousType ? getSuggestedComponentSlotsByType(previousType) : getSuggestedComponentSlots(el);
4204
+ const nextEditableParts = getComponentCreateEditableParts(el, type);
4205
+ const group = getComponentPurposeOption(type).group;
4206
+ const classification = getComponentTypeClassification(type, group, componentCreateContainer).path;
4207
+ const nextSuggestedName = getComponentNameByType(type, el, componentCreateContainer);
4208
+ const existingMatch = getExistingComponentCreateMatch(classification, nextSuggestedName);
4209
+ const nextResolution = existingMatch ? "reuse" : "new";
4210
+ const shouldUpdateName = !componentCreateNameTouched || !currentName || currentName === previousSuggestedName || currentName === getSuggestedComponentName(el);
4211
+ const shouldUpdateSlots = !currentSlots || currentSlots === previousSuggestedSlots || currentSlots === getSuggestedComponentSlots(el);
4212
+ setComponentCreateType(type);
4213
+ setComponentCreatePurpose(getSuggestedComponentPurposeByType(type, el, componentCreateContainer));
4214
+ setComponentCreateResolution(nextResolution);
4215
+ syncComponentSpecDraft({
4216
+ sourceMode: nextResolution === "reuse" ? "\u590D\u7528\u5DF2\u6709\u7EC4\u4EF6" : "\u65B0\u5EFA\u7EC4\u4EF6",
4217
+ action: nextResolution === "reuse" ? "\u590D\u7528\u7EC4\u4EF6" : "\u521B\u5EFA\u7EC4\u4EF6",
4218
+ classification,
4219
+ usage: getSuggestedComponentPurposeByType(type, el, componentCreateContainer),
4220
+ editableParts: nextEditableParts,
4221
+ ...shouldUpdateName ? { componentName: nextResolution === "reuse" && existingMatch?.componentName ? existingMatch.componentName : nextSuggestedName } : {},
4222
+ ...shouldUpdateSlots ? { slots: getComponentEditablePartsSummary(nextEditableParts) } : {},
4223
+ styleRules: getComponentCreateStyleRules(type, getSuggestedComponentPurposeByType(type, el, componentCreateContainer), group, componentCreateContainer)
4224
+ });
4225
+ setComponentCreateTypeMenuOpen(false);
4226
+ }
4227
+ function handleSendComponentCreateToAi() {
4228
+ const el = selectedRef.current;
4229
+ const draft = {
4230
+ ...componentSpecDraft,
4231
+ sourceMode: componentCreateResolution === "reuse" ? "\u590D\u7528\u5DF2\u6709\u7EC4\u4EF6" : "\u65B0\u5EFA\u7EC4\u4EF6",
4232
+ action: componentCreateResolution === "reuse" ? "\u590D\u7528\u7EC4\u4EF6" : "\u521B\u5EFA\u7EC4\u4EF6",
4233
+ classification: getComponentTypeClassification(componentCreateType, getComponentPurposeOption(componentCreateType).group, componentCreateContainer).path,
4234
+ componentName: componentSpecDraft.componentName.trim() || getComponentNameByType(componentCreateType, el, componentCreateContainer),
4235
+ usage: componentCreatePurpose.trim() || getSuggestedComponentPurpose(el),
4236
+ editableParts: componentSpecDraft.editableParts?.length ? componentSpecDraft.editableParts : getComponentCreateEditableParts(el, componentCreateType),
4237
+ variants: "\u6682\u4E0D\u521B\u5EFA",
4238
+ slots: componentSpecDraft.slots.trim() || getComponentEditablePartsSummary(componentSpecDraft.editableParts ?? []) || getSuggestedComponentSlots(el),
4239
+ styleRules: getComponentCreateStyleRules(componentCreateType, componentCreatePurpose, getComponentPurposeOption(componentCreateType).group, componentCreateContainer)
4240
+ };
4241
+ const nextEntry = buildComponentSpecDraftEntry(draft);
4242
+ const nextDrafts = { ...localDraftsRef.current, [nextEntry.key]: nextEntry };
4243
+ setComponentSpecDraft(draft);
4244
+ setLocalDrafts(nextDrafts);
4245
+ setComponentCreateOpen(false);
4246
+ setComponentCreateContainerMenuOpen(false);
4247
+ setComponentCreateTypeMenuOpen(false);
4248
+ copyDraftEntriesToAi(Object.values(nextDrafts));
4249
+ }
4250
+ function handleRecordComponentVariantDraft() {
4251
+ const el = selected;
4252
+ const info = getDraftTargetInfo(el);
4253
+ const selectedItems = isRecognizedComponentVariantFlow ? activeComponentMakerVariantDraft.items ?? [] : getSelectedComponentMakerVariantItems(el);
4254
+ if (!selectedItems.length) {
4255
+ setPluginMsg("\u81F3\u5C11\u4FDD\u7559\u4E00\u4E2A\u53D8\u4F53");
4256
+ setTimeout(() => setPluginMsg(""), 1800);
4257
+ return;
4258
+ }
4259
+ const draft = isRecognizedComponentVariantFlow ? activeComponentMakerVariantDraft : getActiveComponentMakerVariantDraft(el);
4260
+ const val = formatComponentMakerVariantDraft(draft);
4261
+ const componentName = isRecognizedComponentVariantFlow ? componentMakerActiveComponentName : componentSpecDraft.componentName.trim() || getElementDisplayName(el);
4262
+ setLocalDrafts((prev) => {
4263
+ const existing = prev[info.key];
4264
+ const existingByProp = new Map(existing?.changes.map((change) => [change.prop, change]) ?? []);
4265
+ const mergedByProp = /* @__PURE__ */ new Map();
4266
+ existing?.changes.forEach((change) => mergedByProp.set(change.prop, change));
4267
+ const prop = `component-variant-group:${componentName}`;
4268
+ const previous = existingByProp.get(prop);
4269
+ mergedByProp.set(prop, {
4270
+ prop,
4271
+ from: previous?.from ?? "\u672A\u521B\u5EFA",
4272
+ val
4273
+ });
4274
+ const nextEntry = {
4275
+ ...info,
4276
+ changes: Array.from(mergedByProp.values()),
4277
+ updatedAt: Date.now()
4278
+ };
4279
+ return { ...prev, [info.key]: nextEntry };
4280
+ });
4281
+ setPluginMsg("\u53D8\u4F53\u7EC4\u5DF2\u8BB0\u5F55 \u2713");
4282
+ setTimeout(() => setPluginMsg(""), 2200);
4283
+ }
4284
+ function recordLibraryCrudChange(params) {
4285
+ const actionLabel = params.action === "create" ? "\u65B0\u589E" : params.action === "update" ? "\u7F16\u8F91" : "\u5220\u9664";
4286
+ const safeName = params.name.trim() || "\u672A\u547D\u540D";
4287
+ const prop = `library-${params.resource}:${params.action}:${safeName}`;
4288
+ const info = {
4289
+ key: "library:design-library",
4290
+ selector: "Library / \u8BBE\u8BA1\u5E93",
4291
+ targetLabel: "Library / \u8BBE\u8BA1\u5E93",
4292
+ scopeLabel: "\u8BBE\u8BA1\u5E93"
4293
+ };
4294
+ setLocalDrafts((prev) => {
4295
+ const existing = prev[info.key];
4296
+ const mergedByProp = /* @__PURE__ */ new Map();
4297
+ existing?.changes.forEach((change) => mergedByProp.set(change.prop, change));
4298
+ mergedByProp.set(prop, {
4299
+ prop,
4300
+ from: params.from,
4301
+ val: `${actionLabel}\uFF1A${params.val}`
4302
+ });
4303
+ return {
4304
+ ...prev,
4305
+ [info.key]: {
4306
+ ...info,
4307
+ changes: Array.from(mergedByProp.values()),
4308
+ updatedAt: Date.now()
4309
+ }
4310
+ };
4311
+ });
4312
+ }
4313
+ function getLibraryTokenPreviewKind(category) {
4314
+ if (category === "typography") return "text";
4315
+ if (category === "radius") return "radius";
4316
+ if (category === "shadow") return "shadow";
4317
+ if (category === "space") return "space";
4318
+ if (category === "appearance") return "appearance";
4319
+ return "color";
4320
+ }
4321
+ function getLibraryTokenCategoryLabel(category) {
4322
+ return LIBRARY_TOKEN_CATEGORIES.find((item) => item.key === category)?.label ?? category;
4323
+ }
4324
+ function formatLibraryTokenSummary(item) {
4325
+ return `${item.categoryLabel} / ${item.name} / ${item.value} / ${item.usage || "\u672A\u767B\u8BB0\u7528\u9014"} / ${item.status}`;
4326
+ }
4327
+ function buildLibraryTokenItemFromForm(form) {
4328
+ const categoryLabel = getLibraryTokenCategoryLabel(form.category);
4329
+ return {
4330
+ id: form.baseId || `draft-token:${Date.now()}:${form.name}`,
4331
+ category: form.category,
4332
+ categoryLabel,
4333
+ name: form.name.trim(),
4334
+ value: form.value.trim(),
4335
+ rawValue: form.value.trim(),
4336
+ usage: form.usage.trim() || "\u672A\u767B\u8BB0\u7528\u9014",
4337
+ status: form.status.trim() || (form.mode === "create" ? "\u65B0\u589E\u8349\u7A3F" : "\u7F16\u8F91\u8349\u7A3F"),
4338
+ preview: getLibraryTokenPreviewKind(form.category),
4339
+ previewValue: form.value.trim(),
4340
+ source: "draft"
4341
+ };
4342
+ }
4343
+ function openLibraryTokenCreate() {
4344
+ const fallbackValue = pendingTextColor || textColorVal || Object.values(pendingColors)[0] || "#111827";
4345
+ setLibraryTokenForm({
4346
+ mode: "create",
4347
+ category: "color",
4348
+ name: "--color-custom",
4349
+ value: fallbackValue,
4350
+ usage: "\u7528\u4E8E\u5F53\u524D\u9875\u9762\u6837\u5F0F",
4351
+ status: "\u65B0\u589E\u8349\u7A3F"
4352
+ });
4353
+ }
4354
+ function openLibraryTokenEdit(item) {
4355
+ setSelectedLibraryTokenId(item.id);
4356
+ setLibraryTokenForm({
4357
+ mode: "update",
4358
+ baseId: item.id,
4359
+ category: item.category,
4360
+ name: item.name,
4361
+ value: item.rawValue || item.value,
4362
+ usage: item.usage,
4363
+ status: item.status.includes("\u8349\u7A3F") ? item.status : "\u7F16\u8F91\u8349\u7A3F"
4364
+ });
4365
+ }
4366
+ function submitLibraryTokenForm() {
4367
+ if (!libraryTokenForm) return;
4368
+ const nextItem = buildLibraryTokenItemFromForm(libraryTokenForm);
4369
+ if (!nextItem.name || !nextItem.value) return;
4370
+ if (libraryTokenForm.mode === "create") {
4371
+ setLibraryCustomTokens((prev) => [nextItem, ...prev]);
4372
+ setSelectedLibraryTokenId(nextItem.id);
4373
+ recordLibraryCrudChange({
4374
+ resource: "token",
4375
+ action: "create",
4376
+ name: nextItem.name,
4377
+ from: "\u672A\u767B\u8BB0",
4378
+ val: formatLibraryTokenSummary(nextItem)
4379
+ });
4380
+ } else {
4381
+ setLibraryTokenOverrides((prev) => ({ ...prev, [nextItem.id]: { ...nextItem, status: "\u7F16\u8F91\u8349\u7A3F", source: "draft" } }));
4382
+ setSelectedLibraryTokenId(nextItem.id);
4383
+ const original = libraryTokenItems.find((item) => item.id === nextItem.id);
4384
+ recordLibraryCrudChange({
4385
+ resource: "token",
4386
+ action: "update",
4387
+ name: nextItem.name,
4388
+ from: original ? formatLibraryTokenSummary(original) : "\u672A\u767B\u8BB0",
4389
+ val: formatLibraryTokenSummary({ ...nextItem, status: "\u7F16\u8F91\u8349\u7A3F" })
4390
+ });
4391
+ }
4392
+ setLibraryTokenForm(null);
4393
+ }
4394
+ function deleteLibraryToken(item) {
4395
+ const usageCount = countLibraryTokenUsage(item);
4396
+ const deleteHint = usageCount === null ? "\u5220\u9664\u8349\u7A3F\uFF08\u4F7F\u7528\u60C5\u51B5\u65E0\u6CD5\u7EDF\u8BA1\uFF0C\u9700 AI \u590D\u6838\uFF09" : usageCount > 0 ? `\u5220\u9664\u8349\u7A3F\uFF08${usageCount} \u5904\u4F7F\u7528\uFF0C\u9700\u5148\u66FF\u6362\uFF09` : "\u5220\u9664\u8349\u7A3F\uFF08\u672A\u4F7F\u7528\uFF09";
4397
+ if (item.source === "draft") {
4398
+ setLibraryCustomTokens((prev) => prev.filter((token) => token.id !== item.id));
4399
+ } else {
4400
+ setLibraryDeletedTokenIds((prev) => ({ ...prev, [item.id]: deleteHint }));
4401
+ }
4402
+ if (selectedLibraryTokenId === item.id) setSelectedLibraryTokenId("");
4403
+ recordLibraryCrudChange({
4404
+ resource: "token",
4405
+ action: "delete",
4406
+ name: item.name,
4407
+ from: formatLibraryTokenSummary(item),
4408
+ val: `${item.name} / ${deleteHint}`
4409
+ });
4410
+ }
4411
+ function focusLibraryTokenUsage(item) {
4412
+ setSelectedLibraryTokenId(item.id);
4413
+ const targets = getLibraryTokenUsageTargets(item);
4414
+ if (targets === null) {
4415
+ setSubmitMsg("\u8BE5 token \u6682\u65E0\u6CD5\u7EDF\u8BA1\u4F7F\u7528");
4416
+ setTimeout(() => setSubmitMsg(""), 1800);
4417
+ return;
4418
+ }
4419
+ const target = targets[0];
4420
+ if (!target) {
4421
+ setSubmitMsg("\u5F53\u524D\u9875\u9762\u672A\u4F7F\u7528\u8BE5 token");
4422
+ setTimeout(() => setSubmitMsg(""), 1800);
4423
+ return;
4424
+ }
4425
+ setLibraryWorkbenchOpen(false);
4426
+ setLibraryOpen(false);
4427
+ setComponentCreateOpen(false);
4428
+ target.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
4429
+ selectEl(target);
4430
+ setSubmitMsg(`\u5DF2\u5B9A\u4F4D 1 / ${targets.length}`);
4431
+ setTimeout(() => setSubmitMsg(""), 1800);
4432
+ }
4433
+ function formatLibraryComponentSummary(item) {
4434
+ return `${item.label} / ${item.type} / ${item.categoryLabel} / ${item.summary || "\u672A\u767B\u8BB0\u80FD\u529B"} / ${item.selector || "\u672A\u767B\u8BB0 selector"} / ${item.status}`;
4435
+ }
4436
+ function openLibraryComponentCreate() {
4437
+ setLibraryComponentForm({
4438
+ mode: "create",
4439
+ category: libraryComponentCategory === "all" ? "custom" : libraryComponentCategory,
4440
+ type: "Custom",
4441
+ label: "\u81EA\u5B9A\u4E49\u7EC4\u4EF6",
4442
+ summary: "\u5F85\u8865\u80FD\u529B",
4443
+ selector: ".custom-component",
4444
+ status: "\u65B0\u589E\u8349\u7A3F"
4445
+ });
4446
+ }
4447
+ function openLibraryComponentEdit(item) {
4448
+ setSelectedLibraryComponentId(item.id);
4449
+ setLibraryComponentForm({
4450
+ mode: "update",
4451
+ baseId: item.id,
4452
+ category: item.category,
4453
+ type: item.type,
4454
+ label: item.label,
4455
+ summary: item.summary,
4456
+ selector: item.selector,
4457
+ status: item.status.includes("\u8349\u7A3F") ? item.status : "\u7F16\u8F91\u8349\u7A3F"
4458
+ });
4459
+ }
4460
+ function submitLibraryComponentForm() {
4461
+ if (!libraryComponentForm) return;
4462
+ const category = libraryComponentForm.category || getLibraryComponentCategory(libraryComponentForm.type);
4463
+ const nextItem = {
4464
+ id: libraryComponentForm.baseId || `draft-component:${Date.now()}:${libraryComponentForm.type}`,
4465
+ category,
4466
+ categoryLabel: getLibraryComponentCategoryLabel(category),
4467
+ type: libraryComponentForm.type.trim() || "Custom",
4468
+ label: libraryComponentForm.label.trim() || libraryComponentForm.type.trim() || "\u81EA\u5B9A\u4E49\u7EC4\u4EF6",
4469
+ summary: libraryComponentForm.summary.trim() || "\u5F85\u8865\u80FD\u529B",
4470
+ selector: libraryComponentForm.selector.trim() || "\u672A\u767B\u8BB0 selector",
4471
+ status: libraryComponentForm.status.trim() || (libraryComponentForm.mode === "create" ? "\u65B0\u589E\u8349\u7A3F" : "\u7F16\u8F91\u8349\u7A3F"),
4472
+ source: "draft"
4473
+ };
4474
+ if (libraryComponentForm.mode === "create") {
4475
+ setLibraryCustomComponents((prev) => [nextItem, ...prev]);
4476
+ setSelectedLibraryComponentId(nextItem.id);
4477
+ recordLibraryCrudChange({
4478
+ resource: "component",
4479
+ action: "create",
4480
+ name: nextItem.type,
4481
+ from: "\u672A\u767B\u8BB0",
4482
+ val: formatLibraryComponentSummary(nextItem)
4483
+ });
4484
+ } else {
4485
+ setLibraryComponentOverrides((prev) => ({ ...prev, [nextItem.id]: { ...nextItem, status: "\u7F16\u8F91\u8349\u7A3F", source: "draft" } }));
4486
+ setSelectedLibraryComponentId(nextItem.id);
4487
+ const original = componentLibraryItems.find((item) => item.id === nextItem.id);
4488
+ recordLibraryCrudChange({
4489
+ resource: "component",
4490
+ action: "update",
4491
+ name: nextItem.type,
4492
+ from: original ? formatLibraryComponentSummary(original) : "\u672A\u767B\u8BB0",
4493
+ val: formatLibraryComponentSummary({ ...nextItem, status: "\u7F16\u8F91\u8349\u7A3F" })
4494
+ });
4495
+ }
4496
+ setLibraryComponentForm(null);
4497
+ }
4498
+ function deleteLibraryComponent(item) {
4499
+ const deleteHint = item.source === "draft" ? "\u5220\u9664\u65B0\u589E\u8349\u7A3F" : "\u5220\u9664\u89C4\u683C\u8349\u7A3F\uFF08\u4E0D\u5220\u9664\u6E90\u7801\u7EC4\u4EF6\uFF09";
4500
+ if (item.source === "draft") {
4501
+ setLibraryCustomComponents((prev) => prev.filter((component) => component.id !== item.id));
4502
+ } else {
4503
+ setLibraryDeletedComponentIds((prev) => ({ ...prev, [item.id]: deleteHint }));
4504
+ }
4505
+ if (selectedLibraryComponentId === item.id) setSelectedLibraryComponentId("");
4506
+ recordLibraryCrudChange({
4507
+ resource: "component",
4508
+ action: "delete",
4509
+ name: item.type,
4510
+ from: formatLibraryComponentSummary(item),
4511
+ val: `${item.type} / ${deleteHint}`
4512
+ });
4513
+ }
4514
+ function buildAiTaskPrompt(params) {
4515
+ const changes = params.changes.map((change, index) => `${index + 1}. ${getChangeLabel(change.prop)}\uFF1A${formatStoredChangeRecordValue(change.prop, change.from)} \u2192 ${formatStoredChangeRecordValue(change.prop, change.val)}`).join("\n");
4516
+ const latestHint = params.entryId ? `\u4F18\u5148\u5904\u7406 id = ${params.entryId} \u8FD9\u6761\u8BB0\u5F55\u3002` : "\u8FD9\u6761\u4EFB\u52A1\u6765\u81EA DevInspector \u5F53\u524D\u9009\u4E2D\u5143\u7D20\u3002";
4517
+ return [
4518
+ "DevInspector \u6837\u5F0F\u4EFB\u52A1",
4519
+ `\u9875\u9762\uFF1A${params.pageLabel}`,
4520
+ `\u5143\u7D20\uFF1A${params.targetLabel}`,
4521
+ `\u8303\u56F4\uFF1A${params.scopeLabel}`,
4522
+ `\u9009\u62E9\u5668\uFF1A${params.selector}`,
4523
+ "\u6539\u52A8\uFF1A",
4524
+ changes || "\u65E0\u6837\u5F0F\u6539\u52A8",
4525
+ ...params.note ? ["\u8865\u5145\uFF1A", params.note] : [],
4526
+ "\u5B9A\u4F4D\u63D0\u793A\uFF1A",
4527
+ latestHint,
4528
+ "\u8BF7\u4F18\u5148\u5B9A\u4F4D\u8BE5\u9009\u62E9\u5668\u5BF9\u5E94\u7684\u7EC4\u4EF6\u6216\u6837\u5F0F\u6E90\u7801\uFF0C\u5224\u65AD\u662F\u5426\u5E94\u56FA\u5316\u4E3A\u6B63\u5F0F\u7EC4\u4EF6\u6837\u5F0F\uFF1B\u4E0D\u8981\u624B\u6539 dist\u3002"
4529
+ ].join("\n");
4530
+ }
4531
+ function buildAiDraftBasketPrompt(drafts) {
4532
+ const hasComponentSpec = drafts.some((draft) => draft.changes.some((change) => change.prop === "component-spec" || change.prop.startsWith("component-new-variant:") || change.prop.startsWith("component-variant-group:")));
4533
+ const hasLibraryChange = drafts.some((draft) => draft.changes.some((change) => change.prop.startsWith("library-")));
4534
+ const sections = drafts.sort((a, b) => a.updatedAt - b.updatedAt).map((draft, index) => {
4535
+ const changes = draft.changes.map((change, changeIndex) => `${changeIndex + 1}. ${getChangeLabel(change.prop)}\uFF1A${formatStoredChangeRecordValue(change.prop, change.from)} \u2192 ${formatStoredChangeRecordValue(change.prop, change.val)}`).join("\n");
4536
+ return [
4537
+ `${index + 1}. \u5143\u7D20\uFF1A${draft.targetLabel}`,
4538
+ `\u8303\u56F4\uFF1A${draft.scopeLabel}`,
4539
+ `\u9009\u62E9\u5668\uFF1A${draft.selector}`,
4540
+ "\u6539\u52A8\uFF1A",
4541
+ changes || "\u65E0\u6837\u5F0F\u6539\u52A8"
4542
+ ].join("\n");
4543
+ }).join("\n\n");
4544
+ const title = hasLibraryChange ? "DevInspector \u8BBE\u8BA1\u5E93 / \u7EC4\u4EF6 / \u6837\u5F0F\u4EFB\u52A1" : hasComponentSpec ? "DevInspector \u7EC4\u4EF6 / \u6837\u5F0F\u4EFB\u52A1" : "DevInspector \u6837\u5F0F\u4EFB\u52A1";
4545
+ const locationHint = hasLibraryChange ? "\u8FD9\u4E9B\u5185\u5BB9\u6765\u81EA DevInspector \u8BBE\u8BA1\u5E93\u5DE5\u4F5C\u53F0\uFF1BToken / Component \u7684\u589E\u5220\u6539\u90FD\u662F\u7528\u6237\u786E\u8BA4\u7684\u53D7\u63A7\u8349\u7A3F\uFF0C\u8BF7\u5148\u5B9A\u4F4D\u8BBE\u8BA1 token \u914D\u7F6E\u3001\u7EC4\u4EF6\u80FD\u529B\u8868\u6216\u6E90\u7801\u4E2D\u7684\u6B63\u5F0F\u5B9A\u4E49\uFF0C\u518D\u5224\u65AD\u5982\u4F55\u843D\u5730\uFF1B\u5220\u9664\u64CD\u4F5C\u9700\u5148\u5904\u7406\u4F7F\u7528\u5173\u7CFB\uFF0C\u4E0D\u8981\u624B\u6539 dist\u3002" : hasComponentSpec ? "\u8FD9\u4E9B\u5185\u5BB9\u6765\u81EA DevInspector \u672C\u6B21\u4FEE\u6539\u5185\u5BB9\uFF1B\u7EC4\u4EF6\u89C4\u683C\u548C\u65B0\u53D8\u4F53\u662F\u7528\u6237\u786E\u8BA4\u7684\u8349\u7A3F\uFF0C\u8BF7\u6309\u7EC4\u4EF6\u540D\u3001\u53EF\u7F16\u8F91\u5185\u5BB9\u3001\u53D8\u4F53\u7EF4\u5EA6\u3001\u72B6\u6001\u3001\u5C3A\u5BF8\u548C\u6837\u5F0F\u89C4\u5219\u5B9A\u4F4D\u6E90\u7801\u843D\u5730\uFF1B\u4E0D\u8981\u624B\u6539 dist\u3002" : "\u8FD9\u4E9B\u5185\u5BB9\u6765\u81EA DevInspector \u672C\u6B21\u4FEE\u6539\u5185\u5BB9\uFF0C\u8BF7\u6309\u5BF9\u8C61\u9010\u4E00\u5B9A\u4F4D\u6E90\u7801\uFF0C\u5224\u65AD\u662F\u5426\u5E94\u56FA\u5316\u4E3A\u7EC4\u4EF6\u6837\u5F0F\u3001token \u6216\u5C40\u90E8\u8986\u76D6\uFF1B\u4E0D\u8981\u624B\u6539 dist\u3002";
4546
+ return [
4547
+ title,
4548
+ `\u9875\u9762\uFF1A${document.title || "\u5F53\u524D\u9875\u9762"}\uFF08${window.location.href}\uFF09`,
4549
+ `\u5F85\u5904\u7406\u5BF9\u8C61\uFF1A${drafts.length}`,
4550
+ sections,
4551
+ ...note ? ["\u8865\u5145\uFF1A", note] : [],
4552
+ "\u5B9A\u4F4D\u63D0\u793A\uFF1A",
4553
+ locationHint
4554
+ ].join("\n");
4555
+ }
4556
+ function handleSubmitToAi() {
4557
+ const draftEntries = Object.values(localDraftsRef.current);
4558
+ if (draftEntries.length > 0) {
4559
+ copyDraftEntriesToAi(draftEntries);
4560
+ return;
4561
+ }
4562
+ const payload = getPendingEntries();
4563
+ if (!payload) return;
4564
+ const { el, pending, selector } = payload;
4565
+ const componentMeta2 = getInspectorComponentMeta(el);
4566
+ const changes = getPendingChangeRecords();
4567
+ if (pending.length === 0 && !note && !componentMeta2) {
4568
+ setSubmitMsg("\u5148\u6539\u70B9\u6837\u5F0F\u6216\u5199\u5907\u6CE8");
4569
+ setTimeout(() => setSubmitMsg(""), 1800);
4570
+ return;
4571
+ }
4572
+ const hasOnlyInstanceContentPending = componentMeta2 && (pendingComponentText !== null || Object.keys(pendingComponentTextSlots).length > 0) && !pendingComponentVariant && !pendingComponentSize && !pendingIconColor && !pendingBadgeStatus && !pendingCardVariant && pending.length === 0;
4573
+ const scopeLabel = hasOnlyInstanceContentPending ? "\u5F53\u524D\u5143\u7D20" : scope === "current" ? "\u5F53\u524D\u5143\u7D20" : "\u76F8\u540C\u5143\u7D20";
4574
+ const stableSelector = componentMeta2 && hasComponentAttrPending && componentSelectorVal ? componentSelectorVal : selector;
4575
+ const prompt = buildAiTaskPrompt({
4576
+ pageLabel: `${document.title || "\u5F53\u524D\u9875\u9762"}\uFF08${window.location.href}\uFF09`,
4577
+ targetLabel: getTargetDisplayLabel(el, componentMeta2),
4578
+ selector: stableSelector,
4579
+ scopeLabel,
4580
+ changes,
4581
+ note
4582
+ });
4583
+ copyTextToClipboard(prompt).then((copied) => {
4584
+ setSubmitMsg(copied ? "\u4EFB\u52A1\u6587\u672C\u5DF2\u590D\u5236 \u2713" : "\u590D\u5236\u5931\u8D25");
4585
+ setTimeout(() => setSubmitMsg(""), copied ? 2200 : 1800);
4586
+ }).catch(() => {
4587
+ setSubmitMsg("\u590D\u5236\u5931\u8D25");
4588
+ setTimeout(() => setSubmitMsg(""), 1800);
4589
+ });
4590
+ }
4591
+ function copyDraftEntriesToAi(draftEntries) {
4592
+ const prompt = buildAiDraftBasketPrompt(draftEntries);
4593
+ copyTextToClipboard(prompt).then((copied) => {
4594
+ setSubmitMsg(copied ? "\u4EFB\u52A1\u6587\u672C\u5DF2\u590D\u5236 \u2713" : "\u590D\u5236\u5931\u8D25");
4595
+ setTimeout(() => setSubmitMsg(""), copied ? 2200 : 1800);
4596
+ }).catch(() => {
4597
+ setSubmitMsg("\u590D\u5236\u5931\u8D25");
4598
+ setTimeout(() => setSubmitMsg(""), 1800);
4599
+ });
4600
+ }
4601
+ function handleDeleteStyleIntent(intentId, selector, prop) {
4602
+ fetch(endpoints.deleteStyleIntent, {
4603
+ method: "POST",
4604
+ headers: { "Content-Type": "application/json" },
4605
+ body: JSON.stringify({ id: intentId, selector, prop })
4606
+ }).then(async (response) => {
4607
+ let body = null;
4608
+ try {
4609
+ body = await response.json();
4610
+ } catch {
4611
+ body = null;
4612
+ }
4613
+ return {
4614
+ httpOk: response.ok,
4615
+ ...body ?? {}
4616
+ };
4617
+ }).then((r) => {
4618
+ if (r.ok) {
4619
+ setStyleIntentSummary(formatStyleIntentSummary(r));
4620
+ setSubmitMsg(prop ? "\u5DF2\u5220\u9664\u5C5E\u6027" : "\u5DF2\u5220\u9664\u5BF9\u8C61");
4621
+ } else {
4622
+ const errorMsg = !r.httpOk ? "\u5220\u9664\u5931\u8D25\uFF1A\u672C\u5730\u670D\u52A1\u5F02\u5E38" : `\u5220\u9664\u5931\u8D25${r.error ? `\uFF1A${String(r.error)}` : ""}`;
4623
+ setSubmitMsg(errorMsg);
4624
+ }
4625
+ setTimeout(() => setSubmitMsg(""), 1800);
4626
+ }).catch(() => {
4627
+ setSubmitMsg("\u5220\u9664\u5931\u8D25\uFF1A\u8BF7\u5237\u65B0\u9875\u9762\u6216\u91CD\u542F\u672C\u5730 dev");
4628
+ setTimeout(() => setSubmitMsg(""), 1800);
4629
+ });
4630
+ }
4631
+ function getOriginalValueForProp(prop) {
4632
+ if (prop === "font-size") return fontSizeVal;
4633
+ if (prop === "font-weight") return fontWeightVal;
4634
+ if (prop === "color") return getDisplayLabel(textColorVal, tokenMap, colorPalette, tokenLabels).label;
4635
+ if (prop === "background-color") return getDisplayLabel(colors[prop] ?? "", tokenMap, colorPalette, tokenLabels).label;
4636
+ if (prop === "border-color") return getDisplayLabel(borderColorVal, tokenMap, colorPalette, tokenLabels).label;
4637
+ if (prop === "border-width") return borderWidthVal;
4638
+ if (prop === "border-style") return borderStyleVal;
4639
+ if (prop === "border-radius") return radiusVal;
4640
+ if (prop === "box-shadow") return getShadowChangeDisplay(shadowVal, shadowAuthoredVal, shadowTokens);
4641
+ if (prop === "padding") return paddingVal;
4642
+ if (prop === "margin") return marginVal;
4643
+ if (prop === "gap") return gapVal;
4644
+ if (prop === "translate") return formatTranslate(translateVal);
4645
+ if (prop === "width") return widthVal;
4646
+ if (prop === "height") return heightVal;
4647
+ if (prop === "min-height") return `${getOneLineHugHeight(selectedRef.current) || Number.parseFloat(heightVal) || 0}px`;
4648
+ if (prop === "max-height") return heightVal;
4649
+ if (prop === "justify-content") return getAlignmentLabel("justify-content", justifyVal);
4650
+ if (prop === "align-items") return getAlignmentLabel("align-items", alignItemsVal);
4651
+ return "";
4652
+ }
4653
+ function formatChangeRecordValue(prop, value) {
4654
+ if (prop === "padding" || prop === "margin") {
4655
+ return getSpaceRecordSummary(prop, value) || "\u65E0";
4656
+ }
4657
+ if (prop === "gap") {
4658
+ return getSpaceRecordSummary("gap", value) || "\u65E0";
4659
+ }
4660
+ if (prop === "width" || prop === "height" || prop === "min-height" || prop === "max-height") {
4661
+ return formatSizeDisplay(value);
4662
+ }
4663
+ if (prop === "justify-content") return getAlignmentLabel("justify-content", value);
4664
+ if (prop === "align-items") return getAlignmentLabel("align-items", value);
4665
+ return value;
4666
+ }
4667
+ function formatStoredChangeRecordValue(prop, value) {
4668
+ if (prop === "padding" || prop === "margin" || prop === "gap") {
4669
+ return formatStoredSpaceRecordValue(value);
4670
+ }
4671
+ return value;
4672
+ }
4673
+ function normalizeChangeRecordValue(prop, value) {
4674
+ const formatted = formatChangeRecordValue(prop, value).trim();
4675
+ if (!formatted || formatted === "\u65E0" || formatted === "none") return "empty";
4676
+ if (isZeroLengthValue(formatted)) return "0";
4677
+ return formatted.replace(/\s+/g, " ");
4678
+ }
4679
+ function getPendingChangeRecords() {
2834
4680
  const records = [];
2835
4681
  const add = (prop, from, val) => {
2836
4682
  if (normalizeChangeRecordValue(prop, from) === normalizeChangeRecordValue(prop, val)) return;
@@ -2927,6 +4773,20 @@ function InspectorPanel({
2927
4773
  });
2928
4774
  });
2929
4775
  function getChangeLabel(prop) {
4776
+ if (prop.startsWith("library-token:") || prop.startsWith("library-component:")) {
4777
+ const [resource = "", action = "", name = "\u672A\u547D\u540D"] = prop.split(":");
4778
+ const resourceLabel = resource === "library-token" ? "Token" : "\u7EC4\u4EF6\u89C4\u683C";
4779
+ const actionLabel = action === "create" ? "\u65B0\u589E" : action === "update" ? "\u7F16\u8F91" : action === "delete" ? "\u5220\u9664" : "\u53D8\u66F4";
4780
+ return `${resourceLabel} \xB7 ${actionLabel} \xB7 ${name}`;
4781
+ }
4782
+ if (prop.startsWith("component-variant-group:")) {
4783
+ const [, name = "\u672A\u547D\u540D\u7EC4\u4EF6"] = prop.split(":");
4784
+ return `\u521B\u5EFA\u53D8\u4F53\u7EC4 \xB7 ${name}`;
4785
+ }
4786
+ if (prop.startsWith("component-new-variant:")) {
4787
+ const [, dimension = "\u81EA\u5B9A\u4E49", name = "\u672A\u547D\u540D"] = prop.split(":");
4788
+ return `\u521B\u5EFA\u53D8\u4F53 \xB7 ${dimension} \xB7 ${name}`;
4789
+ }
2930
4790
  const map = {
2931
4791
  "font-size": "\u5B57\u53F7",
2932
4792
  "font-weight": "\u5B57\u91CD",
@@ -2951,7 +4811,8 @@ function InspectorPanel({
2951
4811
  "component-variant": componentCapability?.variantKind === "card" ? "\u7EC4\u4EF6\u5C55\u793A" : "\u7EC4\u4EF6\u53D8\u4F53",
2952
4812
  "component-size": "\u7EC4\u4EF6\u5C3A\u5BF8",
2953
4813
  "component-color": "\u7EC4\u4EF6\u989C\u8272",
2954
- "component-status": "\u6807\u7B7E\u72B6\u6001"
4814
+ "component-status": "\u6807\u7B7E\u72B6\u6001",
4815
+ "component-spec": "\u7EC4\u4EF6\u89C4\u683C"
2955
4816
  };
2956
4817
  if (prop.startsWith("component-slot:")) {
2957
4818
  const slotKey = prop.replace("component-slot:", "");
@@ -3041,6 +4902,8 @@ function InspectorPanel({
3041
4902
  function resetDraftChangeOnPage(draft, change) {
3042
4903
  const isCurrentDraft = selectedRef.current ? getDraftTargetInfo(selectedRef.current).key === draft.key : false;
3043
4904
  if (isCurrentDraft) clearPendingForProp(change.prop);
4905
+ if (change.prop.startsWith("library-")) return;
4906
+ if (change.prop === "component-spec" || change.prop.startsWith("component-new-variant:")) return;
3044
4907
  const targets = getDraftSelectorTargets(draft.selector);
3045
4908
  if (change.prop === "component-text") {
3046
4909
  targets.forEach((target) => {
@@ -3344,6 +5207,10 @@ function InspectorPanel({
3344
5207
  const componentDisplayName = componentMeta ? getComponentDisplayName(componentMeta) : "";
3345
5208
  const showComponentVariantMeta = !!componentMeta && (!!componentCapability?.variantKind || componentMeta.variant !== "default");
3346
5209
  const isTextOnlyTarget = isTextOnlyTargetElement(selected);
5210
+ const isPageShellTarget = isPageShellTargetElement(selected);
5211
+ const isStructuralContainerTarget = !isPageShellTarget && isStructuralContainerTargetElement(selected);
5212
+ const isSimpleTextGroupTarget = isSimpleTextGroupTargetElement(selected);
5213
+ const hideTextStyleSection = isPageShellTarget || isStructuralContainerTarget || isSimpleTextGroupTarget;
3347
5214
  const canAlignChildren = isFlexGridDisplay(getComputedStyle(selected).display);
3348
5215
  const activeButtonVariant = pendingComponentVariant || componentVariantVal;
3349
5216
  const activeButtonSize = pendingComponentSize || componentSizeVal;
@@ -3370,11 +5237,355 @@ function InspectorPanel({
3370
5237
  "aria-label": `\u91CD\u7F6E${label}`,
3371
5238
  children: /* @__PURE__ */ jsx2(RotateCcw, { size: 14, strokeWidth: 2.2, "aria-hidden": "true" })
3372
5239
  }
3373
- ) : null;
3374
- const activePaddingValue = pendingPadding || paddingVal;
3375
- const activeMarginValue = pendingMargin || marginVal;
3376
- const activeGapValue = pendingGap || gapVal;
3377
- const shouldUseCustomSpaceControls = (variant, value) => spaceCustomModes[variant] || isEmptySpaceValue(variant, value);
5240
+ ) : null;
5241
+ const pluginTargetContext = getPluginTargetContext(selected);
5242
+ const componentMakerComponentOptions = getComponentMakerComponentOptions(selected);
5243
+ const selectedComponentOption = componentMakerComponentOptions.find((option) => option.name === componentSpecDraft.componentName);
5244
+ const componentCreateSuggestedTypeGroup = selected ? getComponentPurposeOption(componentCreateType || getSuggestedComponentCreatePurposeType(selected)).group : "structure";
5245
+ const componentCreateContainerOption = getComponentContainerOption(componentCreateContainer);
5246
+ const componentCreateTypeQuery = normalizeComponentType(componentCreateType);
5247
+ const componentCreateClassification = getComponentTypeClassification(
5248
+ componentCreateType || (selected ? getSuggestedComponentCreatePurposeType(selected) : ""),
5249
+ componentCreateSuggestedTypeGroup,
5250
+ componentCreateContainer
5251
+ );
5252
+ const componentCreatePurposeOptions = getPurposeOptionsForContainer(componentCreateContainer);
5253
+ const componentCreateHasExactType = componentCreatePurposeOptions.some((option) => normalizeComponentType(option.label) === componentCreateTypeQuery);
5254
+ const componentCreateTypeOptions = componentCreatePurposeOptions.filter((option) => {
5255
+ if (!componentCreateTypeQuery || componentCreateHasExactType) return true;
5256
+ return normalizeComponentType(option.label).includes(componentCreateTypeQuery) || normalizeComponentType(option.hint).includes(componentCreateTypeQuery);
5257
+ }).slice(0, 10);
5258
+ const componentMakerActiveComponentName = selectedComponentOption?.name || componentSpecDraft.componentName || pluginTargetContext.label;
5259
+ const componentMakerActiveComponentType = selectedComponentOption?.type || pluginTargetContext.meta?.type || "\u7EC4\u4EF6";
5260
+ const isComponentMakerVariantAction = componentMakerAction === "create-current-variant" || componentMakerAction === "create-other-variant";
5261
+ const isRecognizedComponentVariantFlow = Boolean(pluginTargetContext.meta) && isComponentMakerVariantAction;
5262
+ const componentMakerVariantSuggestions = getComponentMakerVariantSuggestions(selected);
5263
+ const multiSelectedComponentMakerVariantSuggestions = componentMakerVariantSuggestions.filter((item) => !componentVariantExcludedIds.includes(item.id));
5264
+ const activeComponentMakerVariantPreview = componentMakerVariantSuggestions.find((item) => item.id === componentVariantPreviewId) ?? multiSelectedComponentMakerVariantSuggestions[0] ?? componentMakerVariantSuggestions[0] ?? null;
5265
+ const selectedComponentMakerVariantSuggestions = isRecognizedComponentVariantFlow ? activeComponentMakerVariantPreview ? [activeComponentMakerVariantPreview] : [] : multiSelectedComponentMakerVariantSuggestions;
5266
+ const generatedComponentMakerVariantName = getGeneratedComponentMakerVariantName(componentMakerActiveComponentName, activeComponentMakerVariantPreview);
5267
+ const componentMakerVariantCodeName = componentVariantDraft.name.trim() || generatedComponentMakerVariantName;
5268
+ const componentMakerVariantGroups = componentMakerVariantSuggestions.reduce((groups, item) => {
5269
+ const existing = groups.find(([dimension]) => dimension === item.dimension);
5270
+ if (existing) {
5271
+ existing[1].push(item);
5272
+ } else {
5273
+ groups.push([item.dimension, [item]]);
5274
+ }
5275
+ return groups;
5276
+ }, []);
5277
+ const activeComponentMakerVariantDraft = isComponentMakerVariantAction ? {
5278
+ ...getActiveComponentMakerVariantDraft(selected),
5279
+ items: selectedComponentMakerVariantSuggestions,
5280
+ name: componentMakerVariantCodeName,
5281
+ dimension: activeComponentMakerVariantPreview?.dimension ?? componentVariantDraft.dimension
5282
+ } : componentVariantDraft;
5283
+ const componentMakerContext = {
5284
+ pageTitle: document.title || "\u5F53\u524D\u9875\u9762",
5285
+ pageUrl: window.location.href,
5286
+ targetLabel: pluginTargetContext.label,
5287
+ selector: pluginTargetContext.selector,
5288
+ scopeLabel: scope === "current" ? "\u5F53\u524D\u5143\u7D20" : "\u76F8\u540C\u5143\u7D20",
5289
+ recognitionLines: getComponentMakerSummary(selected),
5290
+ isRecognizedComponent: Boolean(pluginTargetContext.meta),
5291
+ specDraft: componentSpecDraft,
5292
+ variantDraft: activeComponentMakerVariantDraft
5293
+ };
5294
+ const componentMakerActions = getComponentMakerActions(componentMakerSourceMode);
5295
+ const componentMakerVariantActionOptions = COMPONENT_MAKER_ACTION_OPTIONS.filter(
5296
+ (option) => option.key === "create-current-variant" || option.key === "create-other-variant"
5297
+ );
5298
+ const componentMakerLivePreviewHtml = getComponentMakerLivePreviewHtml(selected, activeComponentMakerVariantPreview);
5299
+ const canCreateComponent = Boolean(selected) && !componentMeta;
5300
+ const componentCreateTargetLabel = selected ? getElementDisplayName(selected, componentMeta) : "\u5F53\u524D\u5143\u7D20";
5301
+ const componentCreateSelector = selected ? getSelectorForScope(selected, "current") : "";
5302
+ const componentCreateDefaultText = selected ? (getTextContent(selected) ?? "").trim() : "";
5303
+ const componentCreateRulePreview = getComponentCreateStyleRules(componentCreateType, componentCreatePurpose, componentCreateSuggestedTypeGroup, componentCreateContainer).split("\uFF1B").filter(Boolean);
5304
+ const componentCreateEditableParts = componentSpecDraft.editableParts ?? [];
5305
+ const componentCreateExistingMatch = getExistingComponentCreateMatch(
5306
+ componentCreateClassification.path,
5307
+ componentSpecDraft.componentName || (selected ? getComponentNameByType(
5308
+ componentCreateType || getSuggestedComponentCreatePurposeType(selected, componentCreateContainer),
5309
+ selected,
5310
+ componentCreateContainer
5311
+ ) : "")
5312
+ );
5313
+ const panelTitle = "\u9875\u9762\u6837\u5F0F";
5314
+ const activePaddingValue = pendingPadding || paddingVal;
5315
+ const activeMarginValue = pendingMargin || marginVal;
5316
+ const activeGapValue = pendingGap || gapVal;
5317
+ const showElementGapControl = canControlElementGap(selected);
5318
+ const shouldUseCustomSpaceControls = (variant, value) => spaceCustomModes[variant] || isEmptySpaceValue(variant, value);
5319
+ const baseLibraryTokenItems = getLibraryTokenItems(tokens, tokenMap);
5320
+ const libraryTokenItems = [
5321
+ ...baseLibraryTokenItems.filter((item) => !libraryDeletedTokenIds[item.id]).map((item) => libraryTokenOverrides[item.id] ? { ...item, ...libraryTokenOverrides[item.id] } : item),
5322
+ ...libraryCustomTokens
5323
+ ];
5324
+ const normalizedLibrarySearch = librarySearch.trim().toLowerCase();
5325
+ const filteredLibraryTokenItems = libraryTokenItems.filter((item) => {
5326
+ const matchesCategory = libraryTokenCategory === "all" || item.category === libraryTokenCategory;
5327
+ if (!matchesCategory) return false;
5328
+ const usageCount = countLibraryTokenUsage(item);
5329
+ if (libraryTokenUsageFilter === "used" && !(usageCount !== null && usageCount > 0)) return false;
5330
+ if (libraryTokenUsageFilter === "unused" && usageCount !== 0) return false;
5331
+ if (libraryTokenUsageFilter === "unknown" && usageCount !== null) return false;
5332
+ if (!normalizedLibrarySearch) return true;
5333
+ return [
5334
+ item.name,
5335
+ item.value,
5336
+ item.usage,
5337
+ item.status,
5338
+ item.categoryLabel
5339
+ ].some((value) => value.toLowerCase().includes(normalizedLibrarySearch));
5340
+ });
5341
+ const visibleLibraryTokenItems = filteredLibraryTokenItems.slice(0, 80);
5342
+ const libraryTokenCategoryCounts = LIBRARY_TOKEN_CATEGORIES.reduce((acc, category) => {
5343
+ acc[category.key] = category.key === "all" ? libraryTokenItems.length : libraryTokenItems.filter((item) => item.category === category.key).length;
5344
+ return acc;
5345
+ }, {});
5346
+ const selectedLibraryToken = libraryTokenItems.find((item) => item.id === selectedLibraryTokenId) ?? visibleLibraryTokenItems[0] ?? null;
5347
+ const componentPreviewByType = new Map(
5348
+ componentPreviews.map((preview) => [preview.type.trim().toLowerCase(), preview])
5349
+ );
5350
+ const systemComponentTypes = new Set(Object.keys(COMPONENT_CAPABILITIES).map((type) => type.toLowerCase()));
5351
+ const buildLibraryComponentItemFromPreview = (preview) => {
5352
+ const type = preview.type.trim() || "Custom";
5353
+ const category = preview.category ?? getLibraryComponentCategory(type);
5354
+ return {
5355
+ id: `component-preview:${type}`,
5356
+ category,
5357
+ categoryLabel: getLibraryComponentCategoryLabel(category),
5358
+ type,
5359
+ label: preview.label || LIBRARY_COMPONENT_LABELS[type] || type,
5360
+ summary: preview.summary || "\u771F\u5B9E\u7EC4\u4EF6\u9884\u89C8",
5361
+ selector: preview.selector || `\u771F\u5B9E\u7EC4\u4EF6 ${type}`,
5362
+ status: preview.status || "\u771F\u5B9E\u7EC4\u4EF6",
5363
+ preview,
5364
+ source: "system"
5365
+ };
5366
+ };
5367
+ const componentLibraryItems = [
5368
+ ...Object.entries(COMPONENT_CAPABILITIES).map(([type, capability]) => {
5369
+ const id = `component:${type}`;
5370
+ const registeredPreview = componentPreviewByType.get(type.toLowerCase());
5371
+ const category = registeredPreview?.category ?? getLibraryComponentCategory(type);
5372
+ const item = {
5373
+ id,
5374
+ category,
5375
+ categoryLabel: getLibraryComponentCategoryLabel(category),
5376
+ type,
5377
+ label: registeredPreview?.label || LIBRARY_COMPONENT_LABELS[type] || type,
5378
+ summary: registeredPreview?.summary || getComponentCapabilitySummary(type, capability),
5379
+ selector: registeredPreview?.selector || (type === "Icon" ? "svg.lucide" : `.${type.toLowerCase()}, [data-component="${type}"]`),
5380
+ status: registeredPreview?.status || "\u5DF2\u63A5\u5165",
5381
+ preview: registeredPreview,
5382
+ source: "system"
5383
+ };
5384
+ return libraryComponentOverrides[id] ? { ...item, ...libraryComponentOverrides[id] } : item;
5385
+ }).filter((item) => !libraryDeletedComponentIds[item.id]),
5386
+ ...componentPreviews.filter((preview) => !systemComponentTypes.has(preview.type.trim().toLowerCase())).map((preview) => {
5387
+ const item = buildLibraryComponentItemFromPreview(preview);
5388
+ return libraryComponentOverrides[item.id] ? { ...item, ...libraryComponentOverrides[item.id] } : item;
5389
+ }).filter((item) => !libraryDeletedComponentIds[item.id]),
5390
+ ...libraryCustomComponents
5391
+ ];
5392
+ const filteredLibraryComponentItems = componentLibraryItems.filter((item) => {
5393
+ const matchesCategory = libraryComponentCategory === "all" || item.category === libraryComponentCategory;
5394
+ if (!matchesCategory) return false;
5395
+ if (!normalizedLibrarySearch) return true;
5396
+ return [item.type, item.label, item.categoryLabel, item.summary, item.selector, item.status].some((value) => value.toLowerCase().includes(normalizedLibrarySearch));
5397
+ });
5398
+ const filteredLibraryComponentSpecCount = filteredLibraryComponentItems.reduce(
5399
+ (count, item) => count + (item.preview?.variants.length || 1),
5400
+ 0
5401
+ );
5402
+ const libraryComponentCategoryCounts = LIBRARY_COMPONENT_CATEGORIES.reduce((acc, category) => {
5403
+ acc[category.key] = category.key === "all" ? componentLibraryItems.length : componentLibraryItems.filter((item) => item.category === category.key).length;
5404
+ return acc;
5405
+ }, {});
5406
+ const selectedLibraryComponent = componentLibraryItems.find((item) => item.id === selectedLibraryComponentId) ?? filteredLibraryComponentItems[0] ?? null;
5407
+ const selectedLibraryComponentVariant = selectedLibraryComponent?.preview?.variants.find(
5408
+ (variant) => getLibraryComponentVariantKey(selectedLibraryComponent.id, variant.id) === selectedLibraryComponentVariantId
5409
+ ) ?? selectedLibraryComponent?.preview?.variants[0] ?? null;
5410
+ const selectedLibraryComponentSpecKey = selectedLibraryComponent && selectedLibraryComponentVariant ? getLibraryComponentVariantKey(selectedLibraryComponent.id, selectedLibraryComponentVariant.id) : "";
5411
+ const getLibraryComponentSpecSelector = (component, variant) => variant.selector?.trim() || component.selector.trim();
5412
+ const countLibraryComponentSelectorUsage = (selector) => {
5413
+ const normalizedSelector = selector.trim();
5414
+ if (!normalizedSelector || normalizedSelector.startsWith("\u771F\u5B9E\u7EC4\u4EF6") || normalizedSelector === "\u672A\u767B\u8BB0 selector") return null;
5415
+ try {
5416
+ return Array.from(document.querySelectorAll(normalizedSelector)).filter((element) => !element.closest(".di-panel")).length;
5417
+ } catch {
5418
+ return null;
5419
+ }
5420
+ };
5421
+ const selectedLibraryComponentSpec = selectedLibraryComponent && selectedLibraryComponentVariant ? {
5422
+ component: selectedLibraryComponent,
5423
+ variant: selectedLibraryComponentVariant,
5424
+ key: selectedLibraryComponentSpecKey,
5425
+ selector: getLibraryComponentSpecSelector(selectedLibraryComponent, selectedLibraryComponentVariant),
5426
+ purpose: getLibraryComponentVariantPurpose(selectedLibraryComponent, selectedLibraryComponentVariant),
5427
+ capabilities: getLibraryComponentVariantCapabilities(selectedLibraryComponent, selectedLibraryComponentVariant),
5428
+ tokenRefs: getLibraryComponentVariantTokenRefs(selectedLibraryComponent, selectedLibraryComponentVariant),
5429
+ usageCount: countLibraryComponentSelectorUsage(getLibraryComponentSpecSelector(selectedLibraryComponent, selectedLibraryComponentVariant))
5430
+ } : null;
5431
+ const libraryDraftChangeRows = localDraftEntries.flatMap((entry) => entry.changes.map((change, index) => ({ entry, change, index })));
5432
+ const libraryUsageItems = libraryTokenItems.map((item) => ({ item, usageCount: countLibraryTokenUsage(item) })).filter(({ usageCount }) => usageCount !== null).sort((a, b) => (b.usageCount ?? 0) - (a.usageCount ?? 0)).slice(0, 60);
5433
+ const libraryNavItems = [
5434
+ { key: "tokens", label: "Tokens", count: libraryTokenItems.length, hint: "\u8BBE\u8BA1 token" },
5435
+ { key: "components", label: "Components", count: componentLibraryItems.length, hint: "\u7EC4\u4EF6\u89C4\u683C" },
5436
+ { key: "changes", label: "Changes", count: localDraftChangeCount, hint: "\u4FEE\u6539\u7BEE" },
5437
+ { key: "usage", label: "Usage", count: libraryUsageItems.length, hint: "\u4F7F\u7528\u6CBB\u7406" }
5438
+ ];
5439
+ function groupRegisteredPreviewVariants(variants) {
5440
+ const groups = /* @__PURE__ */ new Map();
5441
+ variants.forEach((variant) => {
5442
+ const key = variant.group || "\u9ED8\u8BA4";
5443
+ groups.set(key, [...groups.get(key) ?? [], variant]);
5444
+ });
5445
+ return Array.from(groups.entries()).map(([label, items]) => ({ label, items }));
5446
+ }
5447
+ function selectLibraryComponentSpec(component, variant) {
5448
+ setSelectedLibraryComponentId(component.id);
5449
+ setSelectedLibraryComponentVariantId(getLibraryComponentVariantKey(component.id, variant.id));
5450
+ setLibraryComponentForm(null);
5451
+ }
5452
+ function renderRegisteredComponentPreview(component, preview, mode) {
5453
+ const groups = groupRegisteredPreviewVariants(preview.variants);
5454
+ return /* @__PURE__ */ jsx2(
5455
+ "div",
5456
+ {
5457
+ className: `di-library-real-preview${mode === "detail" ? " di-library-real-preview--detail" : ""}`,
5458
+ onClick: (event) => event.stopPropagation(),
5459
+ onKeyDown: (event) => event.stopPropagation(),
5460
+ children: groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "di-library-real-preview-group", children: [
5461
+ /* @__PURE__ */ jsx2("div", { className: "di-library-real-preview-group-title", children: group.label }),
5462
+ /* @__PURE__ */ jsx2("div", { className: "di-library-real-preview-grid", children: group.items.map((variant) => {
5463
+ const specKey = getLibraryComponentVariantKey(component.id, variant.id);
5464
+ const isSelected = selectedLibraryComponentSpecKey === specKey;
5465
+ return /* @__PURE__ */ jsxs(
5466
+ "div",
5467
+ {
5468
+ className: `di-library-real-preview-item${isSelected ? " di-library-real-preview-item--selected" : ""}`,
5469
+ role: "button",
5470
+ tabIndex: 0,
5471
+ "aria-pressed": isSelected,
5472
+ onMouseDownCapture: () => selectLibraryComponentSpec(component, variant),
5473
+ onKeyDown: (event) => {
5474
+ if (event.key !== "Enter" && event.key !== " ") return;
5475
+ event.preventDefault();
5476
+ selectLibraryComponentSpec(component, variant);
5477
+ },
5478
+ children: [
5479
+ /* @__PURE__ */ jsx2("div", { className: "di-library-real-preview-slot", children: variant.render() }),
5480
+ /* @__PURE__ */ jsxs("div", { className: "di-library-real-preview-meta", children: [
5481
+ /* @__PURE__ */ jsx2("span", { children: variant.label }),
5482
+ variant.propsLabel ? /* @__PURE__ */ jsx2("small", { children: variant.propsLabel }) : null
5483
+ ] })
5484
+ ]
5485
+ },
5486
+ variant.id
5487
+ );
5488
+ }) })
5489
+ ] }, group.label))
5490
+ }
5491
+ );
5492
+ }
5493
+ function renderLibraryComponentPreview(item, mode = "card") {
5494
+ if (item.preview?.variants.length) {
5495
+ return renderRegisteredComponentPreview(item, item.preview, mode);
5496
+ }
5497
+ const normalizedType = item.type.trim().toLowerCase();
5498
+ const matrixModeClass = mode === "detail" ? " di-library-preview-matrix--detail" : "";
5499
+ if (normalizedType.includes("button") || item.category === "action") {
5500
+ const gridStyle = {
5501
+ "--di-library-matrix-columns": `34px repeat(${BUTTON_VARIANT_OPTIONS.length}, minmax(76px, max-content))`
5502
+ };
5503
+ return /* @__PURE__ */ jsxs("div", { className: `di-library-preview-matrix di-library-preview-matrix--button${matrixModeClass}`, "aria-hidden": "true", style: gridStyle, children: [
5504
+ /* @__PURE__ */ jsxs("div", { className: "di-library-preview-matrix-head", children: [
5505
+ /* @__PURE__ */ jsx2("span", { children: "\u5C3A\u5BF8" }),
5506
+ BUTTON_VARIANT_OPTIONS.map((variant) => /* @__PURE__ */ jsx2("span", { children: variant.label }, variant.key))
5507
+ ] }),
5508
+ BUTTON_SIZE_OPTIONS.map((size) => /* @__PURE__ */ jsxs("div", { className: "di-library-preview-matrix-row", children: [
5509
+ /* @__PURE__ */ jsx2("span", { className: "di-library-preview-matrix-label", children: size.label }),
5510
+ BUTTON_VARIANT_OPTIONS.map((variant) => /* @__PURE__ */ jsx2(
5511
+ "span",
5512
+ {
5513
+ className: `di-library-preview-button di-library-preview-button--${variant.key}`,
5514
+ style: { minHeight: size.minHeight, padding: size.padding, fontSize: size.fontSize },
5515
+ children: variant.label
5516
+ },
5517
+ `${size.key}-${variant.key}`
5518
+ ))
5519
+ ] }, size.key))
5520
+ ] });
5521
+ }
5522
+ if (normalizedType.includes("badge") || normalizedType.includes("tag") || item.category === "feedback") {
5523
+ const gridStyle = {
5524
+ "--di-library-matrix-columns": `34px repeat(${BADGE_STATUS_OPTIONS.length}, minmax(58px, max-content))`
5525
+ };
5526
+ return /* @__PURE__ */ jsxs("div", { className: `di-library-preview-matrix di-library-preview-matrix--badge${matrixModeClass}`, "aria-hidden": "true", style: gridStyle, children: [
5527
+ /* @__PURE__ */ jsxs("div", { className: "di-library-preview-matrix-head", children: [
5528
+ /* @__PURE__ */ jsx2("span", { children: "\u5C3A\u5BF8" }),
5529
+ BADGE_STATUS_OPTIONS.map((status) => /* @__PURE__ */ jsx2("span", { children: status.label }, status.key))
5530
+ ] }),
5531
+ BADGE_SIZE_OPTIONS.map((size) => /* @__PURE__ */ jsxs("div", { className: "di-library-preview-matrix-row", children: [
5532
+ /* @__PURE__ */ jsx2("span", { className: "di-library-preview-matrix-label", children: size.label }),
5533
+ BADGE_STATUS_OPTIONS.map((status) => /* @__PURE__ */ jsx2(
5534
+ "span",
5535
+ {
5536
+ className: `di-library-preview-badge di-library-preview-badge--${status.key}`,
5537
+ style: { minHeight: size.minHeight, padding: size.padding, fontSize: size.fontSize },
5538
+ children: status.label
5539
+ },
5540
+ `${size.key}-${status.key}`
5541
+ ))
5542
+ ] }, size.key))
5543
+ ] });
5544
+ }
5545
+ if (normalizedType.includes("card") || item.category === "display") {
5546
+ return /* @__PURE__ */ jsx2("div", { className: `di-library-preview-card-gallery${mode === "detail" ? " di-library-preview-card-gallery--detail" : ""}`, "aria-hidden": "true", children: CARD_VARIANT_OPTIONS.map((variant) => /* @__PURE__ */ jsxs("div", { className: `di-library-preview-card-sample di-library-preview-card-sample--${variant.key}`, children: [
5547
+ /* @__PURE__ */ jsx2("span", { children: variant.label }),
5548
+ /* @__PURE__ */ jsx2("strong", { children: "\u4EFB\u52A1\u6807\u9898" }),
5549
+ /* @__PURE__ */ jsx2("p", { children: variant.key === "compact" ? "\u7D27\u51D1\u4FE1\u606F\u5C42\u7EA7\u3002" : "\u8FD9\u662F\u4E00\u6BB5\u793A\u4F8B\u63CF\u8FF0\u6587\u5B57\uFF0C\u7528\u4E8E\u5C55\u793A\u5361\u7247\u5185\u5BB9\u5C42\u7EA7\u3002" })
5550
+ ] }, variant.key)) });
5551
+ }
5552
+ if (normalizedType.includes("form") || normalizedType.includes("input") || item.category === "form") {
5553
+ return /* @__PURE__ */ jsxs("div", { className: "di-library-preview-form-sample", "aria-hidden": "true", children: [
5554
+ /* @__PURE__ */ jsx2("span", { children: "\u95E8\u5E97\u540D\u79F0" }),
5555
+ /* @__PURE__ */ jsx2("div", { children: "\u4F8B\u5982\uFF1A\u897F\u6E56\u65D7\u8230\u5E97" }),
5556
+ /* @__PURE__ */ jsx2("strong", { children: "\u63D0\u4EA4" })
5557
+ ] });
5558
+ }
5559
+ if (normalizedType.includes("icon") || item.category === "icon") {
5560
+ const gridStyle = {
5561
+ "--di-library-matrix-columns": `34px repeat(${ICON_COLOR_OPTIONS.length}, minmax(44px, 1fr))`
5562
+ };
5563
+ return /* @__PURE__ */ jsxs("div", { className: `di-library-preview-matrix di-library-preview-matrix--icon${matrixModeClass}`, "aria-hidden": "true", style: gridStyle, children: [
5564
+ /* @__PURE__ */ jsxs("div", { className: "di-library-preview-matrix-head", children: [
5565
+ /* @__PURE__ */ jsx2("span", { children: "\u5C3A\u5BF8" }),
5566
+ ICON_COLOR_OPTIONS.map((color) => /* @__PURE__ */ jsx2("span", { children: color.label }, color.key))
5567
+ ] }),
5568
+ ICON_SIZE_OPTIONS.map((size) => /* @__PURE__ */ jsxs("div", { className: "di-library-preview-matrix-row", children: [
5569
+ /* @__PURE__ */ jsx2("span", { className: "di-library-preview-matrix-label", children: size.label }),
5570
+ ICON_COLOR_OPTIONS.map((color) => /* @__PURE__ */ jsx2("span", { className: "di-library-preview-icon-cell", children: /* @__PURE__ */ jsx2(ComponentIcon, { size: Number.parseFloat(size.size), strokeWidth: 2.2, style: { color: color.value } }) }, `${size.key}-${color.key}`))
5571
+ ] }, size.key))
5572
+ ] });
5573
+ }
5574
+ return /* @__PURE__ */ jsxs("div", { className: "di-library-preview-generic", "aria-hidden": "true", children: [
5575
+ /* @__PURE__ */ jsx2(ComponentIcon, { size: 22, strokeWidth: 2.2 }),
5576
+ /* @__PURE__ */ jsx2("strong", { children: item.label }),
5577
+ /* @__PURE__ */ jsx2("span", { children: item.selector })
5578
+ ] });
5579
+ }
5580
+ function renderLibraryComponentSpecPreview(spec) {
5581
+ return /* @__PURE__ */ jsxs("div", { className: "di-library-spec-preview", children: [
5582
+ /* @__PURE__ */ jsx2("div", { className: "di-library-spec-preview-slot", children: spec.variant.render() }),
5583
+ /* @__PURE__ */ jsxs("div", { className: "di-library-spec-preview-meta", children: [
5584
+ /* @__PURE__ */ jsx2("span", { children: spec.variant.label }),
5585
+ spec.variant.propsLabel ? /* @__PURE__ */ jsx2("small", { children: spec.variant.propsLabel }) : null
5586
+ ] })
5587
+ ] });
5588
+ }
3378
5589
  return /* @__PURE__ */ jsxs(Fragment, { children: [
3379
5590
  addTokenModal && /* @__PURE__ */ jsx2(
3380
5591
  AddTokenModal,
@@ -3391,14 +5602,34 @@ function InspectorPanel({
3391
5602
  "div",
3392
5603
  {
3393
5604
  ref: panelElRef,
3394
- className: "di-panel",
5605
+ className: `di-panel${componentCreateOpen || libraryOpen ? " di-panel--drawer-open" : ""}${libraryWorkbenchOpen ? " di-panel--workbench-open" : ""}`,
3395
5606
  "data-di-panel-role": "primary",
3396
5607
  style: { top: panelPos.top, left: panelPos.left },
3397
5608
  children: [
3398
5609
  /* @__PURE__ */ jsxs("div", { className: "di-head", onMouseDown: onDragStart, children: [
3399
5610
  /* @__PURE__ */ jsxs("div", { className: "di-head-left", children: [
3400
- /* @__PURE__ */ jsx2("span", { className: "di-title", children: "\u9875\u9762\u6837\u5F0F" }),
3401
- /* @__PURE__ */ jsx2("span", { className: "di-badge-dev", children: "Dev Only" }),
5611
+ /* @__PURE__ */ jsx2("span", { className: "di-title", children: panelTitle }),
5612
+ /* @__PURE__ */ jsx2("span", { className: "di-badge-dev", title: "\u5F00\u53D1\u73AF\u5883\u5DE5\u5177", children: "DEV" }),
5613
+ /* @__PURE__ */ jsxs(
5614
+ "button",
5615
+ {
5616
+ type: "button",
5617
+ className: `di-library-trigger${libraryOpen ? " di-library-trigger--on" : ""}`,
5618
+ onClick: () => {
5619
+ setLibraryOpen((v) => !v);
5620
+ setComponentCreateOpen(false);
5621
+ setComponentCreateContainerMenuOpen(false);
5622
+ setComponentCreateTypeMenuOpen(false);
5623
+ },
5624
+ title: "\u6253\u5F00\u8BBE\u8BA1\u5E93",
5625
+ "aria-label": "\u6253\u5F00\u8BBE\u8BA1\u5E93",
5626
+ "aria-expanded": libraryOpen,
5627
+ children: [
5628
+ /* @__PURE__ */ jsx2(LibraryIcon, { size: 14, strokeWidth: 2.2, "aria-hidden": "true" }),
5629
+ "Library"
5630
+ ]
5631
+ }
5632
+ ),
3402
5633
  /* @__PURE__ */ jsx2(
3403
5634
  "button",
3404
5635
  {
@@ -3424,9 +5655,1005 @@ function InspectorPanel({
3424
5655
  }
3425
5656
  )
3426
5657
  ] }),
3427
- /* @__PURE__ */ jsx2("div", { className: "di-head-right", children: /* @__PURE__ */ jsx2("button", { className: "di-head-icon-btn", onClick: handleClose, title: "\u5173\u95ED\u9762\u677F", "aria-label": "\u5173\u95ED\u9762\u677F", children: /* @__PURE__ */ jsx2(X, { size: 15, strokeWidth: 2.2, "aria-hidden": "true" }) }) })
3428
- ] }),
3429
- /* @__PURE__ */ jsxs("div", { className: "di-body", children: [
5658
+ /* @__PURE__ */ jsx2("div", { className: "di-head-right", children: /* @__PURE__ */ jsx2("button", { className: "di-head-icon-btn", onClick: handleClose, title: "\u5173\u95ED\u9762\u677F", "aria-label": "\u5173\u95ED\u9762\u677F", children: /* @__PURE__ */ jsx2(X, { size: 15, strokeWidth: 2.2, "aria-hidden": "true" }) }) })
5659
+ ] }),
5660
+ libraryOpen && /* @__PURE__ */ jsx2("div", { className: "di-library-layer", role: "presentation", children: /* @__PURE__ */ jsxs("div", { className: "di-library-drawer", role: "dialog", "aria-modal": "true", "aria-label": "\u8BBE\u8BA1\u5E93", children: [
5661
+ /* @__PURE__ */ jsxs("div", { className: "di-library-head", children: [
5662
+ /* @__PURE__ */ jsxs("div", { className: "di-library-title", children: [
5663
+ /* @__PURE__ */ jsx2(LibraryIcon, { size: 15, strokeWidth: 2.2, "aria-hidden": "true" }),
5664
+ "Library",
5665
+ /* @__PURE__ */ jsx2("span", { children: "\u8BBE\u8BA1\u5E93" })
5666
+ ] }),
5667
+ /* @__PURE__ */ jsxs("div", { className: "di-library-head-actions", children: [
5668
+ /* @__PURE__ */ jsx2(
5669
+ "button",
5670
+ {
5671
+ type: "button",
5672
+ className: "di-library-workbench-trigger",
5673
+ onClick: () => {
5674
+ setLibraryWorkbenchOpen(true);
5675
+ setLibraryOpen(false);
5676
+ setComponentCreateOpen(false);
5677
+ },
5678
+ children: "\u5B8C\u6574\u8BBE\u8BA1\u5E93"
5679
+ }
5680
+ ),
5681
+ /* @__PURE__ */ jsx2(
5682
+ "button",
5683
+ {
5684
+ type: "button",
5685
+ className: "di-head-icon-btn",
5686
+ onClick: () => setLibraryOpen(false),
5687
+ title: "\u5173\u95ED\u8BBE\u8BA1\u5E93",
5688
+ "aria-label": "\u5173\u95ED\u8BBE\u8BA1\u5E93",
5689
+ children: /* @__PURE__ */ jsx2(X, { size: 15, strokeWidth: 2.2, "aria-hidden": "true" })
5690
+ }
5691
+ )
5692
+ ] })
5693
+ ] }),
5694
+ /* @__PURE__ */ jsxs("div", { className: "di-library-tabs", role: "tablist", "aria-label": "\u8BBE\u8BA1\u5E93\u5206\u7C7B", children: [
5695
+ /* @__PURE__ */ jsx2(
5696
+ "button",
5697
+ {
5698
+ type: "button",
5699
+ className: `di-library-tab${libraryTab === "tokens" ? " di-library-tab--active" : ""}`,
5700
+ onClick: () => setLibraryTab("tokens"),
5701
+ role: "tab",
5702
+ "aria-selected": libraryTab === "tokens",
5703
+ children: "Tokens"
5704
+ }
5705
+ ),
5706
+ /* @__PURE__ */ jsx2(
5707
+ "button",
5708
+ {
5709
+ type: "button",
5710
+ className: `di-library-tab${libraryTab === "components" ? " di-library-tab--active" : ""}`,
5711
+ onClick: () => setLibraryTab("components"),
5712
+ role: "tab",
5713
+ "aria-selected": libraryTab === "components",
5714
+ children: "Components"
5715
+ }
5716
+ )
5717
+ ] }),
5718
+ libraryTab === "tokens" ? /* @__PURE__ */ jsxs("div", { className: "di-library-content", role: "tabpanel", "aria-label": "Tokens", children: [
5719
+ /* @__PURE__ */ jsxs("div", { className: "di-library-tools", children: [
5720
+ /* @__PURE__ */ jsxs("label", { className: "di-library-search", children: [
5721
+ /* @__PURE__ */ jsx2("span", { children: "\u641C\u7D22" }),
5722
+ /* @__PURE__ */ jsx2(
5723
+ "input",
5724
+ {
5725
+ value: librarySearch,
5726
+ onChange: (event) => setLibrarySearch(event.currentTarget.value),
5727
+ placeholder: "\u540D\u79F0\u3001\u503C\u3001\u7528\u9014"
5728
+ }
5729
+ )
5730
+ ] }),
5731
+ /* @__PURE__ */ jsx2("div", { className: "di-library-categories", "aria-label": "Token \u5206\u7C7B", children: LIBRARY_TOKEN_CATEGORIES.map((category) => /* @__PURE__ */ jsxs(
5732
+ "button",
5733
+ {
5734
+ type: "button",
5735
+ className: `di-library-category${libraryTokenCategory === category.key ? " di-library-category--active" : ""}`,
5736
+ onClick: () => setLibraryTokenCategory(category.key),
5737
+ children: [
5738
+ category.label,
5739
+ /* @__PURE__ */ jsx2("span", { className: "di-library-category-count", children: libraryTokenCategoryCounts[category.key] ?? 0 })
5740
+ ]
5741
+ },
5742
+ category.key
5743
+ )) })
5744
+ ] }),
5745
+ /* @__PURE__ */ jsxs("div", { className: "di-library-summary", children: [
5746
+ /* @__PURE__ */ jsx2("strong", { children: filteredLibraryTokenItems.length }),
5747
+ /* @__PURE__ */ jsx2("span", { children: "\u4E2A token" }),
5748
+ /* @__PURE__ */ jsx2("small", { children: "\u7EDF\u4E00\u67E5\u770B\u3001\u7B5B\u9009\u548C\u5B9A\u4F4D\u4F7F\u7528\u60C5\u51B5" })
5749
+ ] }),
5750
+ /* @__PURE__ */ jsxs("div", { className: "di-library-list", children: [
5751
+ visibleLibraryTokenItems.map((item) => {
5752
+ const usageCount = countLibraryTokenUsage(item);
5753
+ const previewValue = item.previewValue || item.rawValue;
5754
+ const previewStyle = previewValue ? { "--di-library-preview": previewValue } : void 0;
5755
+ return /* @__PURE__ */ jsxs("div", { className: "di-library-token-row", children: [
5756
+ /* @__PURE__ */ jsx2(
5757
+ "span",
5758
+ {
5759
+ className: `di-library-token-preview di-library-token-preview--${item.preview}`,
5760
+ style: previewStyle,
5761
+ "aria-hidden": "true"
5762
+ }
5763
+ ),
5764
+ /* @__PURE__ */ jsxs("div", { className: "di-library-token-main", children: [
5765
+ /* @__PURE__ */ jsx2("div", { className: "di-library-token-name", children: item.name }),
5766
+ /* @__PURE__ */ jsxs("div", { className: "di-library-token-meta", children: [
5767
+ /* @__PURE__ */ jsx2("span", { children: item.categoryLabel }),
5768
+ /* @__PURE__ */ jsx2("span", { children: item.usage })
5769
+ ] })
5770
+ ] }),
5771
+ /* @__PURE__ */ jsxs("div", { className: "di-library-token-side", children: [
5772
+ /* @__PURE__ */ jsx2("code", { children: item.value }),
5773
+ /* @__PURE__ */ jsx2("span", { children: item.status })
5774
+ ] }),
5775
+ /* @__PURE__ */ jsxs(
5776
+ "button",
5777
+ {
5778
+ type: "button",
5779
+ className: "di-library-token-usage",
5780
+ onClick: () => focusLibraryTokenUsage(item),
5781
+ title: usageCount === null ? "\u65E0\u6CD5\u7EDF\u8BA1\u4F7F\u7528\u60C5\u51B5" : usageCount > 0 ? "\u5B9A\u4F4D\u7B2C\u4E00\u4E2A\u4F7F\u7528\u5904" : "\u5F53\u524D\u9875\u9762\u672A\u4F7F\u7528",
5782
+ children: [
5783
+ /* @__PURE__ */ jsx2("strong", { children: usageCount === null ? "\u2014" : usageCount }),
5784
+ /* @__PURE__ */ jsx2("span", { children: "\u4F7F\u7528" })
5785
+ ]
5786
+ }
5787
+ )
5788
+ ] }, item.id);
5789
+ }),
5790
+ !visibleLibraryTokenItems.length ? /* @__PURE__ */ jsx2("div", { className: "di-library-empty", children: "\u6CA1\u6709\u5339\u914D\u7684 token" }) : null,
5791
+ filteredLibraryTokenItems.length > visibleLibraryTokenItems.length ? /* @__PURE__ */ jsxs("div", { className: "di-library-more", children: [
5792
+ "\u4EC5\u5C55\u793A\u524D ",
5793
+ visibleLibraryTokenItems.length,
5794
+ " \u4E2A\u7ED3\u679C"
5795
+ ] }) : null
5796
+ ] })
5797
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "di-library-content", role: "tabpanel", "aria-label": "Components", children: [
5798
+ /* @__PURE__ */ jsx2("div", { className: "di-library-note", children: "Components \u5728\u8F7B\u5165\u53E3\u5C55\u793A\u5F53\u524D\u8BC6\u522B\u80FD\u529B\u6982\u89C8\uFF1B\u589E\u5220\u6539\u67E5\u8FDB\u5165\u5B8C\u6574\u8BBE\u8BA1\u5E93\uFF0C\u4EE5\u8BBE\u8BA1\u5E93\u8349\u7A3F\u5F62\u5F0F\u8FDB\u5165\u4FEE\u6539\u5185\u5BB9\u3002" }),
5799
+ /* @__PURE__ */ jsx2("div", { className: "di-library-list", children: componentLibraryItems.map((item) => /* @__PURE__ */ jsxs("div", { className: "di-library-component-row", children: [
5800
+ /* @__PURE__ */ jsx2("div", { className: "di-library-component-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(ComponentIcon, { size: 15, strokeWidth: 2.2 }) }),
5801
+ /* @__PURE__ */ jsxs("div", { className: "di-library-component-main", children: [
5802
+ /* @__PURE__ */ jsxs("div", { className: "di-library-component-title", children: [
5803
+ item.label,
5804
+ /* @__PURE__ */ jsx2("span", { children: item.type })
5805
+ ] }),
5806
+ /* @__PURE__ */ jsx2("div", { className: "di-library-component-summary", children: item.summary })
5807
+ ] }),
5808
+ /* @__PURE__ */ jsx2("span", { className: "di-library-component-status", children: item.status })
5809
+ ] }, item.id)) })
5810
+ ] })
5811
+ ] }) }),
5812
+ libraryWorkbenchOpen && /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-layer", role: "presentation", children: /* @__PURE__ */ jsxs("div", { className: "di-library-workbench", role: "dialog", "aria-modal": "true", "aria-label": "\u5B8C\u6574\u8BBE\u8BA1\u5E93", children: [
5813
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-head", children: [
5814
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-title", children: [
5815
+ /* @__PURE__ */ jsx2(LibraryIcon, { size: 18, strokeWidth: 2.2, "aria-hidden": "true" }),
5816
+ /* @__PURE__ */ jsxs("div", { children: [
5817
+ /* @__PURE__ */ jsx2("strong", { children: "Library" }),
5818
+ /* @__PURE__ */ jsx2("span", { children: "\u5B8C\u6574\u8BBE\u8BA1\u5E93\u7BA1\u7406\u9875" })
5819
+ ] })
5820
+ ] }),
5821
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-head-actions", children: [
5822
+ /* @__PURE__ */ jsx2(
5823
+ "button",
5824
+ {
5825
+ type: "button",
5826
+ className: "di-library-workbench-soft-btn",
5827
+ onClick: () => setLibraryOpen(true),
5828
+ children: "\u56DE\u5230\u9762\u677F\u5165\u53E3"
5829
+ }
5830
+ ),
5831
+ /* @__PURE__ */ jsx2(
5832
+ "button",
5833
+ {
5834
+ type: "button",
5835
+ className: "di-head-icon-btn",
5836
+ onClick: () => {
5837
+ setLibraryWorkbenchOpen(false);
5838
+ setLibraryTokenForm(null);
5839
+ setLibraryComponentForm(null);
5840
+ },
5841
+ title: "\u5173\u95ED\u5B8C\u6574\u8BBE\u8BA1\u5E93",
5842
+ "aria-label": "\u5173\u95ED\u5B8C\u6574\u8BBE\u8BA1\u5E93",
5843
+ children: /* @__PURE__ */ jsx2(X, { size: 15, strokeWidth: 2.2, "aria-hidden": "true" })
5844
+ }
5845
+ )
5846
+ ] })
5847
+ ] }),
5848
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-grid", children: [
5849
+ /* @__PURE__ */ jsxs("aside", { className: "di-library-workbench-nav", children: [
5850
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-brand", children: [
5851
+ /* @__PURE__ */ jsx2("strong", { children: "Design Library" }),
5852
+ /* @__PURE__ */ jsx2("span", { children: "\u53EF\u89C6\u5316\u8D44\u6E90\u7BA1\u7406" })
5853
+ ] }),
5854
+ /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-tabs", role: "tablist", "aria-label": "\u8BBE\u8BA1\u5E93\u8D44\u6E90", children: libraryNavItems.map((item) => /* @__PURE__ */ jsxs(
5855
+ "button",
5856
+ {
5857
+ type: "button",
5858
+ className: `di-library-workbench-tab${libraryTab === item.key ? " di-library-workbench-tab--active" : ""}`,
5859
+ onClick: () => {
5860
+ setLibraryTab(item.key);
5861
+ setLibraryTokenForm(null);
5862
+ setLibraryComponentForm(null);
5863
+ },
5864
+ role: "tab",
5865
+ "aria-selected": libraryTab === item.key,
5866
+ children: [
5867
+ /* @__PURE__ */ jsxs("span", { children: [
5868
+ item.label,
5869
+ /* @__PURE__ */ jsx2("small", { children: item.hint })
5870
+ ] }),
5871
+ /* @__PURE__ */ jsx2("strong", { children: item.count })
5872
+ ]
5873
+ },
5874
+ item.key
5875
+ )) }),
5876
+ (libraryTab === "tokens" || libraryTab === "components") && /* @__PURE__ */ jsxs("label", { className: "di-library-workbench-search", children: [
5877
+ /* @__PURE__ */ jsx2("span", { children: "\u641C\u7D22" }),
5878
+ /* @__PURE__ */ jsx2(
5879
+ "input",
5880
+ {
5881
+ value: librarySearch,
5882
+ onChange: (event) => setLibrarySearch(event.currentTarget.value),
5883
+ placeholder: "\u540D\u79F0\u3001\u503C\u3001\u7528\u9014\u3001selector"
5884
+ }
5885
+ )
5886
+ ] }),
5887
+ libraryTab === "tokens" ? /* @__PURE__ */ jsxs(Fragment, { children: [
5888
+ /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-nav-title", children: "\u5206\u7C7B" }),
5889
+ /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-filter-list", children: LIBRARY_TOKEN_CATEGORIES.map((category) => /* @__PURE__ */ jsxs(
5890
+ "button",
5891
+ {
5892
+ type: "button",
5893
+ className: `di-library-workbench-filter${libraryTokenCategory === category.key ? " di-library-workbench-filter--active" : ""}`,
5894
+ onClick: () => setLibraryTokenCategory(category.key),
5895
+ children: [
5896
+ /* @__PURE__ */ jsx2("span", { children: category.label }),
5897
+ /* @__PURE__ */ jsx2("strong", { children: libraryTokenCategoryCounts[category.key] ?? 0 })
5898
+ ]
5899
+ },
5900
+ category.key
5901
+ )) }),
5902
+ /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-nav-title", children: "\u4F7F\u7528\u60C5\u51B5" }),
5903
+ /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-filter-list", children: [
5904
+ ["all", "\u5168\u90E8"],
5905
+ ["used", "\u5DF2\u4F7F\u7528"],
5906
+ ["unused", "\u672A\u4F7F\u7528"],
5907
+ ["unknown", "\u65E0\u6CD5\u7EDF\u8BA1"]
5908
+ ].map(([key, label]) => /* @__PURE__ */ jsx2(
5909
+ "button",
5910
+ {
5911
+ type: "button",
5912
+ className: `di-library-workbench-filter${libraryTokenUsageFilter === key ? " di-library-workbench-filter--active" : ""}`,
5913
+ onClick: () => setLibraryTokenUsageFilter(key),
5914
+ children: /* @__PURE__ */ jsx2("span", { children: label })
5915
+ },
5916
+ key
5917
+ )) })
5918
+ ] }) : libraryTab === "components" ? /* @__PURE__ */ jsxs(Fragment, { children: [
5919
+ /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-nav-title", children: "\u7EC4\u4EF6\u5206\u7C7B" }),
5920
+ /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-filter-list", children: LIBRARY_COMPONENT_CATEGORIES.map((category) => /* @__PURE__ */ jsxs(
5921
+ "button",
5922
+ {
5923
+ type: "button",
5924
+ className: `di-library-workbench-filter${libraryComponentCategory === category.key ? " di-library-workbench-filter--active" : ""}`,
5925
+ onClick: () => setLibraryComponentCategory(category.key),
5926
+ children: [
5927
+ /* @__PURE__ */ jsx2("span", { children: category.label }),
5928
+ /* @__PURE__ */ jsx2("strong", { children: libraryComponentCategoryCounts[category.key] ?? 0 })
5929
+ ]
5930
+ },
5931
+ category.key
5932
+ )) }),
5933
+ /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-note", children: "\u4E2D\u95F4\u5C55\u793A\u771F\u5B9E\u7EC4\u4EF6\u9884\u89C8\uFF1B\u65B0\u589E\u3001\u7F16\u8F91\u3001\u5220\u9664\u4ECD\u53EA\u8FDB\u5165\u8BBE\u8BA1\u5E93\u8349\u7A3F\uFF0C\u4E0D\u76F4\u63A5\u6539\u6E90\u7801\u7EC4\u4EF6\u3002" })
5934
+ ] }) : libraryTab === "changes" ? /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-note", children: "Changes \u662F\u53D1\u9001\u7ED9 AI \u524D\u7684\u590D\u6838\u533A\u3002\u8FD9\u91CC\u5C55\u793A\u6240\u6709\u8BBE\u8BA1\u5E93\u548C\u6837\u5F0F\u8349\u7A3F\uFF0C\u4E0D\u76F4\u63A5\u5199\u6E90\u7801\u3002" }) : /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-note", children: "Usage \u7528\u4E8E\u5220\u9664\u6216\u66FF\u6362\u524D\u7684\u5F71\u54CD\u68C0\u67E5\u3002\u70B9\u51FB\u4F7F\u7528\u6B21\u6570\u4F1A\u56DE\u5230\u9875\u9762\u5B9A\u4F4D\u7B2C\u4E00\u4E2A\u547D\u4E2D\u5143\u7D20\u3002" })
5935
+ ] }),
5936
+ /* @__PURE__ */ jsx2("main", { className: "di-library-workbench-main", children: libraryTab === "tokens" ? /* @__PURE__ */ jsxs(Fragment, { children: [
5937
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-toolbar", children: [
5938
+ /* @__PURE__ */ jsxs("div", { children: [
5939
+ /* @__PURE__ */ jsx2("strong", { children: filteredLibraryTokenItems.length }),
5940
+ /* @__PURE__ */ jsx2("span", { children: "\u4E2A token" })
5941
+ ] }),
5942
+ /* @__PURE__ */ jsx2("button", { type: "button", className: "di-btn-save", onClick: openLibraryTokenCreate, children: "+ Token" })
5943
+ ] }),
5944
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-table", role: "table", "aria-label": "Token \u5217\u8868", children: [
5945
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-table-head", role: "row", children: [
5946
+ /* @__PURE__ */ jsx2("span", { children: "Token" }),
5947
+ /* @__PURE__ */ jsx2("span", { children: "\u503C / \u7528\u9014" }),
5948
+ /* @__PURE__ */ jsx2("span", { children: "\u72B6\u6001" }),
5949
+ /* @__PURE__ */ jsx2("span", { children: "\u4F7F\u7528" }),
5950
+ /* @__PURE__ */ jsx2("span", { children: "\u64CD\u4F5C" })
5951
+ ] }),
5952
+ visibleLibraryTokenItems.map((item) => {
5953
+ const usageCount = countLibraryTokenUsage(item);
5954
+ const isSelected = selectedLibraryToken?.id === item.id;
5955
+ return /* @__PURE__ */ jsxs(
5956
+ "div",
5957
+ {
5958
+ className: `di-library-workbench-row${isSelected ? " di-library-workbench-row--selected" : ""}`,
5959
+ role: "row",
5960
+ onClick: () => {
5961
+ setSelectedLibraryTokenId(item.id);
5962
+ setLibraryTokenForm(null);
5963
+ },
5964
+ children: [
5965
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-token-cell", children: [
5966
+ /* @__PURE__ */ jsx2(
5967
+ "span",
5968
+ {
5969
+ className: `di-library-token-preview di-library-token-preview--${item.preview}`,
5970
+ style: item.previewValue ? { "--di-library-preview": item.previewValue } : void 0,
5971
+ "aria-hidden": "true"
5972
+ }
5973
+ ),
5974
+ /* @__PURE__ */ jsxs("div", { children: [
5975
+ /* @__PURE__ */ jsx2("strong", { children: item.name }),
5976
+ /* @__PURE__ */ jsx2("small", { children: item.categoryLabel })
5977
+ ] })
5978
+ ] }),
5979
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-copy-cell", children: [
5980
+ /* @__PURE__ */ jsx2("code", { children: item.value }),
5981
+ /* @__PURE__ */ jsx2("span", { children: item.usage })
5982
+ ] }),
5983
+ /* @__PURE__ */ jsx2("span", { className: "di-library-workbench-status", children: libraryDeletedTokenIds[item.id] || item.status }),
5984
+ /* @__PURE__ */ jsx2(
5985
+ "button",
5986
+ {
5987
+ type: "button",
5988
+ className: "di-library-workbench-count",
5989
+ onClick: (event) => {
5990
+ event.stopPropagation();
5991
+ focusLibraryTokenUsage(item);
5992
+ },
5993
+ title: usageCount === null ? "\u65E0\u6CD5\u7EDF\u8BA1\u4F7F\u7528\u60C5\u51B5" : usageCount > 0 ? "\u5B9A\u4F4D\u7B2C\u4E00\u4E2A\u4F7F\u7528\u5904" : "\u5F53\u524D\u9875\u9762\u672A\u4F7F\u7528",
5994
+ children: usageCount === null ? "\u2014" : usageCount
5995
+ }
5996
+ ),
5997
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-actions", children: [
5998
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: (event) => {
5999
+ event.stopPropagation();
6000
+ copyTextToClipboard(item.name);
6001
+ }, children: "\u590D\u5236\u540D" }),
6002
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: (event) => {
6003
+ event.stopPropagation();
6004
+ openLibraryTokenEdit(item);
6005
+ }, children: "\u7F16\u8F91" }),
6006
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: (event) => {
6007
+ event.stopPropagation();
6008
+ deleteLibraryToken(item);
6009
+ }, children: "\u5220\u9664" })
6010
+ ] })
6011
+ ]
6012
+ },
6013
+ item.id
6014
+ );
6015
+ }),
6016
+ !visibleLibraryTokenItems.length ? /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-empty", children: "\u6CA1\u6709\u5339\u914D\u7684 token" }) : null
6017
+ ] })
6018
+ ] }) : libraryTab === "components" ? /* @__PURE__ */ jsxs(Fragment, { children: [
6019
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-toolbar", children: [
6020
+ /* @__PURE__ */ jsxs("div", { children: [
6021
+ /* @__PURE__ */ jsx2("strong", { children: filteredLibraryComponentItems.length }),
6022
+ /* @__PURE__ */ jsxs("span", { children: [
6023
+ "\u4E2A\u7EC4\u4EF6 / ",
6024
+ filteredLibraryComponentSpecCount,
6025
+ " \u4E2A\u89C4\u683C"
6026
+ ] })
6027
+ ] }),
6028
+ /* @__PURE__ */ jsx2("button", { type: "button", className: "di-btn-save", onClick: openLibraryComponentCreate, children: "+ \u7EC4\u4EF6\u89C4\u683C" })
6029
+ ] }),
6030
+ /* @__PURE__ */ jsxs("div", { className: "di-library-component-preview-grid", role: "list", "aria-label": "\u7EC4\u4EF6\u771F\u5B9E\u9884\u89C8", children: [
6031
+ filteredLibraryComponentItems.map((item) => {
6032
+ const isSelected = selectedLibraryComponent?.id === item.id;
6033
+ return /* @__PURE__ */ jsxs(
6034
+ "div",
6035
+ {
6036
+ className: `di-library-component-preview-card${isSelected ? " di-library-component-preview-card--selected" : ""}`,
6037
+ role: "listitem",
6038
+ tabIndex: 0,
6039
+ "aria-current": isSelected ? "true" : void 0,
6040
+ onClick: () => {
6041
+ setSelectedLibraryComponentId(item.id);
6042
+ setSelectedLibraryComponentVariantId(item.preview?.variants[0] ? getLibraryComponentVariantKey(item.id, item.preview.variants[0].id) : "");
6043
+ setLibraryComponentForm(null);
6044
+ },
6045
+ onKeyDown: (event) => {
6046
+ if (event.key !== "Enter" && event.key !== " ") return;
6047
+ event.preventDefault();
6048
+ setSelectedLibraryComponentId(item.id);
6049
+ setSelectedLibraryComponentVariantId(item.preview?.variants[0] ? getLibraryComponentVariantKey(item.id, item.preview.variants[0].id) : "");
6050
+ setLibraryComponentForm(null);
6051
+ },
6052
+ children: [
6053
+ /* @__PURE__ */ jsxs("div", { className: "di-library-component-preview-head", children: [
6054
+ /* @__PURE__ */ jsxs("div", { children: [
6055
+ /* @__PURE__ */ jsx2("span", { children: item.categoryLabel }),
6056
+ /* @__PURE__ */ jsx2("strong", { children: item.label })
6057
+ ] }),
6058
+ /* @__PURE__ */ jsx2("small", { children: libraryDeletedComponentIds[item.id] || item.status })
6059
+ ] }),
6060
+ /* @__PURE__ */ jsx2("div", { className: "di-library-component-preview-stage", children: renderLibraryComponentPreview(item) }),
6061
+ /* @__PURE__ */ jsxs("div", { className: "di-library-component-preview-copy", children: [
6062
+ /* @__PURE__ */ jsx2("span", { children: item.type }),
6063
+ /* @__PURE__ */ jsx2("p", { children: item.summary }),
6064
+ /* @__PURE__ */ jsx2("code", { children: item.selector })
6065
+ ] }),
6066
+ /* @__PURE__ */ jsxs("div", { className: "di-library-component-preview-actions", children: [
6067
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: (event) => {
6068
+ event.stopPropagation();
6069
+ copyTextToClipboard(item.selector);
6070
+ }, children: "\u590D\u5236 selector" }),
6071
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: (event) => {
6072
+ event.stopPropagation();
6073
+ openLibraryComponentEdit(item);
6074
+ }, children: "\u7F16\u8F91" }),
6075
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: (event) => {
6076
+ event.stopPropagation();
6077
+ deleteLibraryComponent(item);
6078
+ }, children: "\u5220\u9664" })
6079
+ ] })
6080
+ ]
6081
+ },
6082
+ item.id
6083
+ );
6084
+ }),
6085
+ !filteredLibraryComponentItems.length ? /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-empty", children: "\u6CA1\u6709\u5339\u914D\u7684\u7EC4\u4EF6\u89C4\u683C" }) : null
6086
+ ] })
6087
+ ] }) : libraryTab === "changes" ? /* @__PURE__ */ jsxs(Fragment, { children: [
6088
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-toolbar", children: [
6089
+ /* @__PURE__ */ jsxs("div", { children: [
6090
+ /* @__PURE__ */ jsx2("strong", { children: localDraftChangeCount }),
6091
+ /* @__PURE__ */ jsx2("span", { children: "\u6761\u5F85\u5904\u7406\u4FEE\u6539" })
6092
+ ] }),
6093
+ /* @__PURE__ */ jsx2(
6094
+ "button",
6095
+ {
6096
+ type: "button",
6097
+ className: "di-btn-save",
6098
+ disabled: localDraftChangeCount === 0,
6099
+ onClick: handleSubmitToAi,
6100
+ children: submitMsg || "\u53D1\u9001\u7ED9AI"
6101
+ }
6102
+ )
6103
+ ] }),
6104
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-table", role: "table", "aria-label": "\u4FEE\u6539\u7BEE\u5217\u8868", children: [
6105
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-table-head di-library-workbench-table-head--changes", role: "row", children: [
6106
+ /* @__PURE__ */ jsx2("span", { children: "\u5BF9\u8C61" }),
6107
+ /* @__PURE__ */ jsx2("span", { children: "\u4FEE\u6539\u5185\u5BB9" }),
6108
+ /* @__PURE__ */ jsx2("span", { children: "\u8303\u56F4" }),
6109
+ /* @__PURE__ */ jsx2("span", { children: "\u64CD\u4F5C" })
6110
+ ] }),
6111
+ libraryDraftChangeRows.map(({ entry, change, index }) => /* @__PURE__ */ jsxs(
6112
+ "div",
6113
+ {
6114
+ className: "di-library-workbench-row di-library-workbench-row--changes",
6115
+ role: "row",
6116
+ children: [
6117
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-token-cell", children: [
6118
+ /* @__PURE__ */ jsx2("span", { className: "di-library-change-index", children: index + 1 }),
6119
+ /* @__PURE__ */ jsxs("div", { children: [
6120
+ /* @__PURE__ */ jsx2("strong", { children: entry.targetLabel }),
6121
+ /* @__PURE__ */ jsx2("small", { children: entry.selector })
6122
+ ] })
6123
+ ] }),
6124
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-copy-cell", children: [
6125
+ /* @__PURE__ */ jsx2("code", { children: getChangeLabel(change.prop) }),
6126
+ /* @__PURE__ */ jsxs("span", { children: [
6127
+ formatStoredChangeRecordValue(change.prop, change.from),
6128
+ " \u2192 ",
6129
+ formatStoredChangeRecordValue(change.prop, change.val)
6130
+ ] })
6131
+ ] }),
6132
+ /* @__PURE__ */ jsx2("span", { className: "di-library-workbench-status", children: entry.scopeLabel }),
6133
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-actions", children: [
6134
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => handleResetLocalDraftChange(entry.key, change.prop), children: "\u79FB\u9664" }),
6135
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => handleDeleteLocalDraft(entry.key), children: "\u5220\u9664\u5BF9\u8C61" })
6136
+ ] })
6137
+ ]
6138
+ },
6139
+ `${entry.key}-${change.prop}-${index}`
6140
+ )),
6141
+ !libraryDraftChangeRows.length ? /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-empty", children: "\u4FEE\u6539\u7BEE\u4E3A\u7A7A" }) : null
6142
+ ] })
6143
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
6144
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-toolbar", children: [
6145
+ /* @__PURE__ */ jsxs("div", { children: [
6146
+ /* @__PURE__ */ jsx2("strong", { children: libraryUsageItems.length }),
6147
+ /* @__PURE__ */ jsx2("span", { children: "\u4E2A\u53EF\u7EDF\u8BA1\u8D44\u6E90" })
6148
+ ] }),
6149
+ /* @__PURE__ */ jsx2(
6150
+ "button",
6151
+ {
6152
+ type: "button",
6153
+ className: "di-library-workbench-soft-btn",
6154
+ onClick: () => setLibraryTab("tokens"),
6155
+ children: "\u8FD4\u56DE Tokens"
6156
+ }
6157
+ )
6158
+ ] }),
6159
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-table", role: "table", "aria-label": "\u4F7F\u7528\u6CBB\u7406\u5217\u8868", children: [
6160
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-table-head di-library-workbench-table-head--usage", role: "row", children: [
6161
+ /* @__PURE__ */ jsx2("span", { children: "Token" }),
6162
+ /* @__PURE__ */ jsx2("span", { children: "\u7528\u9014" }),
6163
+ /* @__PURE__ */ jsx2("span", { children: "\u4F7F\u7528" }),
6164
+ /* @__PURE__ */ jsx2("span", { children: "\u6CBB\u7406\u52A8\u4F5C" })
6165
+ ] }),
6166
+ libraryUsageItems.map(({ item, usageCount }) => /* @__PURE__ */ jsxs(
6167
+ "div",
6168
+ {
6169
+ className: "di-library-workbench-row di-library-workbench-row--usage",
6170
+ role: "row",
6171
+ onClick: () => {
6172
+ setSelectedLibraryTokenId(item.id);
6173
+ setLibraryTokenForm(null);
6174
+ },
6175
+ children: [
6176
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-token-cell", children: [
6177
+ /* @__PURE__ */ jsx2(
6178
+ "span",
6179
+ {
6180
+ className: `di-library-token-preview di-library-token-preview--${item.preview}`,
6181
+ style: item.previewValue ? { "--di-library-preview": item.previewValue } : void 0,
6182
+ "aria-hidden": "true"
6183
+ }
6184
+ ),
6185
+ /* @__PURE__ */ jsxs("div", { children: [
6186
+ /* @__PURE__ */ jsx2("strong", { children: item.name }),
6187
+ /* @__PURE__ */ jsx2("small", { children: item.categoryLabel })
6188
+ ] })
6189
+ ] }),
6190
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-copy-cell", children: [
6191
+ /* @__PURE__ */ jsx2("code", { children: item.value }),
6192
+ /* @__PURE__ */ jsx2("span", { children: item.usage })
6193
+ ] }),
6194
+ /* @__PURE__ */ jsx2(
6195
+ "button",
6196
+ {
6197
+ type: "button",
6198
+ className: "di-library-workbench-count",
6199
+ onClick: (event) => {
6200
+ event.stopPropagation();
6201
+ focusLibraryTokenUsage(item);
6202
+ },
6203
+ children: usageCount
6204
+ }
6205
+ ),
6206
+ /* @__PURE__ */ jsxs("div", { className: "di-library-workbench-actions", children: [
6207
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: (event) => {
6208
+ event.stopPropagation();
6209
+ focusLibraryTokenUsage(item);
6210
+ }, children: "\u5B9A\u4F4D" }),
6211
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: (event) => {
6212
+ event.stopPropagation();
6213
+ openLibraryTokenEdit(item);
6214
+ }, children: "\u66FF\u6362\u8349\u7A3F" }),
6215
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: (event) => {
6216
+ event.stopPropagation();
6217
+ deleteLibraryToken(item);
6218
+ }, children: "\u5220\u9664\u8349\u7A3F" })
6219
+ ] })
6220
+ ]
6221
+ },
6222
+ `usage-${item.id}`
6223
+ )),
6224
+ !libraryUsageItems.length ? /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-empty", children: "\u5F53\u524D\u6CA1\u6709\u53EF\u7EDF\u8BA1\u4F7F\u7528\u60C5\u51B5\u7684 token" }) : null
6225
+ ] })
6226
+ ] }) }),
6227
+ /* @__PURE__ */ jsxs("aside", { className: "di-library-workbench-detail", children: [
6228
+ libraryTab === "tokens" ? libraryTokenForm ? /* @__PURE__ */ jsxs("div", { className: "di-library-edit-panel", children: [
6229
+ /* @__PURE__ */ jsxs("div", { className: "di-library-edit-head", children: [
6230
+ /* @__PURE__ */ jsx2("strong", { children: libraryTokenForm.mode === "create" ? "\u65B0\u589E Token" : "\u7F16\u8F91 Token" }),
6231
+ /* @__PURE__ */ jsx2("button", { type: "button", className: "di-head-icon-btn", onClick: () => setLibraryTokenForm(null), "aria-label": "\u5173\u95ED token \u8868\u5355", children: /* @__PURE__ */ jsx2(X, { size: 15, strokeWidth: 2.2, "aria-hidden": "true" }) })
6232
+ ] }),
6233
+ /* @__PURE__ */ jsxs("label", { children: [
6234
+ /* @__PURE__ */ jsx2("span", { children: "\u540D\u79F0" }),
6235
+ /* @__PURE__ */ jsx2("input", { value: libraryTokenForm.name, onChange: (event) => setLibraryTokenForm((prev) => prev ? { ...prev, name: event.currentTarget.value } : prev) })
6236
+ ] }),
6237
+ /* @__PURE__ */ jsxs("label", { children: [
6238
+ /* @__PURE__ */ jsx2("span", { children: "\u5206\u7C7B" }),
6239
+ /* @__PURE__ */ jsx2("select", { value: libraryTokenForm.category, onChange: (event) => setLibraryTokenForm((prev) => prev ? { ...prev, category: event.currentTarget.value } : prev), children: LIBRARY_TOKEN_CATEGORIES.filter((item) => item.key !== "all").map((item) => /* @__PURE__ */ jsx2("option", { value: item.key, children: item.label }, item.key)) })
6240
+ ] }),
6241
+ /* @__PURE__ */ jsxs("label", { children: [
6242
+ /* @__PURE__ */ jsx2("span", { children: "\u503C" }),
6243
+ /* @__PURE__ */ jsx2("input", { value: libraryTokenForm.value, onChange: (event) => setLibraryTokenForm((prev) => prev ? { ...prev, value: event.currentTarget.value } : prev) })
6244
+ ] }),
6245
+ /* @__PURE__ */ jsxs("label", { children: [
6246
+ /* @__PURE__ */ jsx2("span", { children: "\u7528\u9014" }),
6247
+ /* @__PURE__ */ jsx2("input", { value: libraryTokenForm.usage, onChange: (event) => setLibraryTokenForm((prev) => prev ? { ...prev, usage: event.currentTarget.value } : prev) })
6248
+ ] }),
6249
+ /* @__PURE__ */ jsxs("label", { children: [
6250
+ /* @__PURE__ */ jsx2("span", { children: "\u72B6\u6001" }),
6251
+ /* @__PURE__ */ jsx2("input", { value: libraryTokenForm.status, onChange: (event) => setLibraryTokenForm((prev) => prev ? { ...prev, status: event.currentTarget.value } : prev) })
6252
+ ] }),
6253
+ /* @__PURE__ */ jsx2("button", { type: "button", className: "di-btn-save", onClick: submitLibraryTokenForm, children: "\u4FDD\u5B58\u5230\u4FEE\u6539\u5185\u5BB9" })
6254
+ ] }) : selectedLibraryToken ? /* @__PURE__ */ jsxs("div", { className: "di-library-detail-card", children: [
6255
+ /* @__PURE__ */ jsx2("div", { className: "di-library-detail-kicker", children: selectedLibraryToken.categoryLabel }),
6256
+ /* @__PURE__ */ jsx2("h3", { children: selectedLibraryToken.name }),
6257
+ /* @__PURE__ */ jsxs("div", { className: "di-library-detail-preview", children: [
6258
+ /* @__PURE__ */ jsx2(
6259
+ "span",
6260
+ {
6261
+ className: `di-library-token-preview di-library-token-preview--${selectedLibraryToken.preview}`,
6262
+ style: selectedLibraryToken.previewValue ? { "--di-library-preview": selectedLibraryToken.previewValue } : void 0,
6263
+ "aria-hidden": "true"
6264
+ }
6265
+ ),
6266
+ /* @__PURE__ */ jsx2("code", { children: selectedLibraryToken.value })
6267
+ ] }),
6268
+ /* @__PURE__ */ jsxs("dl", { children: [
6269
+ /* @__PURE__ */ jsxs("div", { children: [
6270
+ /* @__PURE__ */ jsx2("dt", { children: "\u7528\u9014" }),
6271
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryToken.usage })
6272
+ ] }),
6273
+ /* @__PURE__ */ jsxs("div", { children: [
6274
+ /* @__PURE__ */ jsx2("dt", { children: "\u6765\u6E90" }),
6275
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryToken.status })
6276
+ ] }),
6277
+ /* @__PURE__ */ jsxs("div", { children: [
6278
+ /* @__PURE__ */ jsx2("dt", { children: "\u4F7F\u7528" }),
6279
+ /* @__PURE__ */ jsx2("dd", { children: countLibraryTokenUsage(selectedLibraryToken) ?? "\u65E0\u6CD5\u7EDF\u8BA1" })
6280
+ ] }),
6281
+ /* @__PURE__ */ jsxs("div", { children: [
6282
+ /* @__PURE__ */ jsx2("dt", { children: "CSS var" }),
6283
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryToken.name.startsWith("--") ? `var(${selectedLibraryToken.name})` : selectedLibraryToken.name })
6284
+ ] })
6285
+ ] }),
6286
+ /* @__PURE__ */ jsxs("div", { className: "di-library-detail-actions", children: [
6287
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => copyTextToClipboard(selectedLibraryToken.name), children: "\u590D\u5236\u540D\u79F0" }),
6288
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => copyTextToClipboard(selectedLibraryToken.value), children: "\u590D\u5236\u503C" }),
6289
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => copyTextToClipboard(selectedLibraryToken.name.startsWith("--") ? `var(${selectedLibraryToken.name})` : selectedLibraryToken.name), children: "\u590D\u5236 var" }),
6290
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => focusLibraryTokenUsage(selectedLibraryToken), children: "\u5B9A\u4F4D\u4F7F\u7528" }),
6291
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => openLibraryTokenEdit(selectedLibraryToken), children: "\u7F16\u8F91" })
6292
+ ] })
6293
+ ] }) : /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-empty", children: "\u9009\u62E9\u4E00\u4E2A token \u67E5\u770B\u8BE6\u60C5" }) : libraryTab === "components" ? libraryComponentForm ? /* @__PURE__ */ jsxs("div", { className: "di-library-edit-panel", children: [
6294
+ /* @__PURE__ */ jsxs("div", { className: "di-library-edit-head", children: [
6295
+ /* @__PURE__ */ jsx2("strong", { children: libraryComponentForm.mode === "create" ? "\u65B0\u589E\u7EC4\u4EF6\u89C4\u683C" : "\u7F16\u8F91\u7EC4\u4EF6\u89C4\u683C" }),
6296
+ /* @__PURE__ */ jsx2("button", { type: "button", className: "di-head-icon-btn", onClick: () => setLibraryComponentForm(null), "aria-label": "\u5173\u95ED\u7EC4\u4EF6\u89C4\u683C\u8868\u5355", children: /* @__PURE__ */ jsx2(X, { size: 15, strokeWidth: 2.2, "aria-hidden": "true" }) })
6297
+ ] }),
6298
+ /* @__PURE__ */ jsxs("label", { children: [
6299
+ /* @__PURE__ */ jsx2("span", { children: "\u5206\u7C7B" }),
6300
+ /* @__PURE__ */ jsx2("select", { value: libraryComponentForm.category, onChange: (event) => setLibraryComponentForm((prev) => prev ? { ...prev, category: event.currentTarget.value } : prev), children: LIBRARY_COMPONENT_CATEGORIES.filter((item) => item.key !== "all").map((item) => /* @__PURE__ */ jsx2("option", { value: item.key, children: item.label }, item.key)) })
6301
+ ] }),
6302
+ /* @__PURE__ */ jsxs("label", { children: [
6303
+ /* @__PURE__ */ jsx2("span", { children: "\u7C7B\u578B" }),
6304
+ /* @__PURE__ */ jsx2("input", { value: libraryComponentForm.type, onChange: (event) => setLibraryComponentForm((prev) => prev ? { ...prev, type: event.currentTarget.value } : prev) })
6305
+ ] }),
6306
+ /* @__PURE__ */ jsxs("label", { children: [
6307
+ /* @__PURE__ */ jsx2("span", { children: "\u540D\u79F0" }),
6308
+ /* @__PURE__ */ jsx2("input", { value: libraryComponentForm.label, onChange: (event) => setLibraryComponentForm((prev) => prev ? { ...prev, label: event.currentTarget.value } : prev) })
6309
+ ] }),
6310
+ /* @__PURE__ */ jsxs("label", { children: [
6311
+ /* @__PURE__ */ jsx2("span", { children: "\u80FD\u529B" }),
6312
+ /* @__PURE__ */ jsx2("input", { value: libraryComponentForm.summary, onChange: (event) => setLibraryComponentForm((prev) => prev ? { ...prev, summary: event.currentTarget.value } : prev) })
6313
+ ] }),
6314
+ /* @__PURE__ */ jsxs("label", { children: [
6315
+ /* @__PURE__ */ jsx2("span", { children: "Selector" }),
6316
+ /* @__PURE__ */ jsx2("input", { value: libraryComponentForm.selector, onChange: (event) => setLibraryComponentForm((prev) => prev ? { ...prev, selector: event.currentTarget.value } : prev) })
6317
+ ] }),
6318
+ /* @__PURE__ */ jsxs("label", { children: [
6319
+ /* @__PURE__ */ jsx2("span", { children: "\u72B6\u6001" }),
6320
+ /* @__PURE__ */ jsx2("input", { value: libraryComponentForm.status, onChange: (event) => setLibraryComponentForm((prev) => prev ? { ...prev, status: event.currentTarget.value } : prev) })
6321
+ ] }),
6322
+ /* @__PURE__ */ jsx2("button", { type: "button", className: "di-btn-save", onClick: submitLibraryComponentForm, children: "\u4FDD\u5B58\u5230\u4FEE\u6539\u5185\u5BB9" })
6323
+ ] }) : selectedLibraryComponentSpec ? /* @__PURE__ */ jsxs("div", { className: "di-library-detail-card", children: [
6324
+ /* @__PURE__ */ jsxs("div", { className: "di-library-detail-kicker", children: [
6325
+ selectedLibraryComponentSpec.component.categoryLabel,
6326
+ " / \u5177\u4F53\u89C4\u683C"
6327
+ ] }),
6328
+ /* @__PURE__ */ jsxs("h3", { children: [
6329
+ selectedLibraryComponentSpec.component.label,
6330
+ " / ",
6331
+ selectedLibraryComponentSpec.variant.label
6332
+ ] }),
6333
+ /* @__PURE__ */ jsx2("div", { className: "di-library-detail-preview di-library-detail-preview--component", children: renderLibraryComponentSpecPreview(selectedLibraryComponentSpec) }),
6334
+ /* @__PURE__ */ jsx2("div", { className: "di-library-spec-pills", "aria-label": "\u7EC4\u4EF6\u89C4\u683C\u80FD\u529B", children: selectedLibraryComponentSpec.capabilities.map((capability) => /* @__PURE__ */ jsx2("span", { children: capability }, capability)) }),
6335
+ /* @__PURE__ */ jsxs("dl", { children: [
6336
+ /* @__PURE__ */ jsxs("div", { children: [
6337
+ /* @__PURE__ */ jsx2("dt", { children: "\u7EC4\u4EF6\u65CF" }),
6338
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryComponentSpec.component.type })
6339
+ ] }),
6340
+ /* @__PURE__ */ jsxs("div", { children: [
6341
+ /* @__PURE__ */ jsx2("dt", { children: "\u7528\u9014" }),
6342
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryComponentSpec.purpose })
6343
+ ] }),
6344
+ /* @__PURE__ */ jsxs("div", { children: [
6345
+ /* @__PURE__ */ jsx2("dt", { children: "Props" }),
6346
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryComponentSpec.variant.propsLabel || "\u9ED8\u8BA4 props" })
6347
+ ] }),
6348
+ /* @__PURE__ */ jsxs("div", { children: [
6349
+ /* @__PURE__ */ jsx2("dt", { children: "\u4F7F\u7528" }),
6350
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryComponentSpec.usageCount === null ? "\u65E0\u6CD5\u7EDF\u8BA1" : `${selectedLibraryComponentSpec.usageCount} \u6B21` })
6351
+ ] }),
6352
+ /* @__PURE__ */ jsxs("div", { children: [
6353
+ /* @__PURE__ */ jsx2("dt", { children: "Selector" }),
6354
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryComponentSpec.selector })
6355
+ ] }),
6356
+ /* @__PURE__ */ jsxs("div", { children: [
6357
+ /* @__PURE__ */ jsx2("dt", { children: "Token \u7ED1\u5B9A" }),
6358
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryComponentSpec.tokenRefs.length ? selectedLibraryComponentSpec.tokenRefs.join(" / ") : "\u672A\u767B\u8BB0" })
6359
+ ] }),
6360
+ /* @__PURE__ */ jsxs("div", { children: [
6361
+ /* @__PURE__ */ jsx2("dt", { children: "\u72B6\u6001" }),
6362
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryComponentSpec.variant.status || selectedLibraryComponentSpec.component.status })
6363
+ ] })
6364
+ ] }),
6365
+ /* @__PURE__ */ jsxs("div", { className: "di-library-detail-actions", children: [
6366
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => copyTextToClipboard(selectedLibraryComponentSpec.selector), children: "\u590D\u5236 selector" }),
6367
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => copyTextToClipboard(selectedLibraryComponentSpec.variant.propsLabel || ""), children: "\u590D\u5236 props" }),
6368
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => openLibraryComponentEdit(selectedLibraryComponentSpec.component), children: "\u7F16\u8F91\u7EC4\u4EF6" }),
6369
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => deleteLibraryComponent(selectedLibraryComponentSpec.component), children: "\u5220\u9664\u8349\u7A3F" })
6370
+ ] })
6371
+ ] }) : selectedLibraryComponent ? /* @__PURE__ */ jsxs("div", { className: "di-library-detail-card", children: [
6372
+ /* @__PURE__ */ jsx2("div", { className: "di-library-detail-kicker", children: selectedLibraryComponent.categoryLabel }),
6373
+ /* @__PURE__ */ jsx2("h3", { children: selectedLibraryComponent.label }),
6374
+ /* @__PURE__ */ jsx2("div", { className: "di-library-detail-preview di-library-detail-preview--component", children: /* @__PURE__ */ jsx2("div", { className: "di-library-component-preview-stage", children: renderLibraryComponentPreview(selectedLibraryComponent, "detail") }) }),
6375
+ /* @__PURE__ */ jsxs("dl", { children: [
6376
+ /* @__PURE__ */ jsxs("div", { children: [
6377
+ /* @__PURE__ */ jsx2("dt", { children: "\u7C7B\u578B" }),
6378
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryComponent.type })
6379
+ ] }),
6380
+ /* @__PURE__ */ jsxs("div", { children: [
6381
+ /* @__PURE__ */ jsx2("dt", { children: "\u5206\u7C7B" }),
6382
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryComponent.categoryLabel })
6383
+ ] }),
6384
+ /* @__PURE__ */ jsxs("div", { children: [
6385
+ /* @__PURE__ */ jsx2("dt", { children: "\u80FD\u529B" }),
6386
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryComponent.summary })
6387
+ ] }),
6388
+ /* @__PURE__ */ jsxs("div", { children: [
6389
+ /* @__PURE__ */ jsx2("dt", { children: "Selector" }),
6390
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryComponent.selector })
6391
+ ] }),
6392
+ /* @__PURE__ */ jsxs("div", { children: [
6393
+ /* @__PURE__ */ jsx2("dt", { children: "\u72B6\u6001" }),
6394
+ /* @__PURE__ */ jsx2("dd", { children: selectedLibraryComponent.status })
6395
+ ] })
6396
+ ] }),
6397
+ /* @__PURE__ */ jsxs("div", { className: "di-library-detail-actions", children: [
6398
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => copyTextToClipboard(selectedLibraryComponent.selector), children: "\u590D\u5236 selector" }),
6399
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => openLibraryComponentEdit(selectedLibraryComponent), children: "\u7F16\u8F91" }),
6400
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => deleteLibraryComponent(selectedLibraryComponent), children: "\u5220\u9664" })
6401
+ ] })
6402
+ ] }) : /* @__PURE__ */ jsx2("div", { className: "di-library-workbench-empty", children: "\u9009\u62E9\u4E00\u4E2A\u7EC4\u4EF6\u89C4\u683C\u67E5\u770B\u8BE6\u60C5" }) : libraryTab === "changes" ? /* @__PURE__ */ jsxs("div", { className: "di-library-detail-card", children: [
6403
+ /* @__PURE__ */ jsx2("div", { className: "di-library-detail-kicker", children: "Changes" }),
6404
+ /* @__PURE__ */ jsx2("h3", { children: "\u4FEE\u6539\u7BEE" }),
6405
+ /* @__PURE__ */ jsxs("dl", { children: [
6406
+ /* @__PURE__ */ jsxs("div", { children: [
6407
+ /* @__PURE__ */ jsx2("dt", { children: "\u5BF9\u8C61" }),
6408
+ /* @__PURE__ */ jsx2("dd", { children: localDraftEntries.length })
6409
+ ] }),
6410
+ /* @__PURE__ */ jsxs("div", { children: [
6411
+ /* @__PURE__ */ jsx2("dt", { children: "\u4FEE\u6539" }),
6412
+ /* @__PURE__ */ jsx2("dd", { children: localDraftChangeCount })
6413
+ ] }),
6414
+ /* @__PURE__ */ jsxs("div", { children: [
6415
+ /* @__PURE__ */ jsx2("dt", { children: "\u94FE\u8DEF" }),
6416
+ /* @__PURE__ */ jsx2("dd", { children: "\u53EA\u751F\u6210 AI \u4EFB\u52A1\uFF0C\u4E0D\u76F4\u63A5\u5199\u6E90\u7801" })
6417
+ ] })
6418
+ ] }),
6419
+ /* @__PURE__ */ jsx2("div", { className: "di-library-detail-actions", children: /* @__PURE__ */ jsx2("button", { type: "button", onClick: handleSubmitToAi, disabled: localDraftChangeCount === 0, children: submitMsg || "\u53D1\u9001\u7ED9AI" }) })
6420
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "di-library-detail-card", children: [
6421
+ /* @__PURE__ */ jsx2("div", { className: "di-library-detail-kicker", children: "Usage" }),
6422
+ /* @__PURE__ */ jsx2("h3", { children: "\u4F7F\u7528\u6CBB\u7406" }),
6423
+ /* @__PURE__ */ jsxs("dl", { children: [
6424
+ /* @__PURE__ */ jsxs("div", { children: [
6425
+ /* @__PURE__ */ jsx2("dt", { children: "\u53EF\u7EDF\u8BA1\u8D44\u6E90" }),
6426
+ /* @__PURE__ */ jsx2("dd", { children: libraryUsageItems.length })
6427
+ ] }),
6428
+ /* @__PURE__ */ jsxs("div", { children: [
6429
+ /* @__PURE__ */ jsx2("dt", { children: "\u5220\u9664\u89C4\u5219" }),
6430
+ /* @__PURE__ */ jsx2("dd", { children: "\u5DF2\u4F7F\u7528 token \u53EA\u80FD\u751F\u6210\u201C\u5148\u66FF\u6362\u518D\u5220\u9664\u201D\u7684\u4EFB\u52A1" })
6431
+ ] }),
6432
+ /* @__PURE__ */ jsxs("div", { children: [
6433
+ /* @__PURE__ */ jsx2("dt", { children: "\u5B9A\u4F4D\u89C4\u5219" }),
6434
+ /* @__PURE__ */ jsx2("dd", { children: "\u70B9\u51FB\u4F7F\u7528\u6B21\u6570\u56DE\u5230\u9875\u9762\u9009\u4E2D\u7B2C\u4E00\u4E2A\u547D\u4E2D\u5143\u7D20" })
6435
+ ] })
6436
+ ] })
6437
+ ] }),
6438
+ /* @__PURE__ */ jsxs("div", { className: "di-library-basket-card", children: [
6439
+ /* @__PURE__ */ jsxs("div", { children: [
6440
+ /* @__PURE__ */ jsx2("span", { children: "\u4FEE\u6539\u7BEE" }),
6441
+ /* @__PURE__ */ jsx2("strong", { children: localDraftChangeCount })
6442
+ ] }),
6443
+ /* @__PURE__ */ jsx2("p", { children: localDraftChangeCount > 0 ? "\u53D1\u9001\u7ED9 AI \u524D\u7EDF\u4E00\u590D\u6838" : "\u6682\u65E0\u8BBE\u8BA1\u5E93\u6216\u6837\u5F0F\u8349\u7A3F" }),
6444
+ /* @__PURE__ */ jsx2(
6445
+ "button",
6446
+ {
6447
+ type: "button",
6448
+ className: "di-btn-save",
6449
+ disabled: localDraftChangeCount === 0,
6450
+ onClick: handleSubmitToAi,
6451
+ children: submitMsg || "\u53D1\u9001\u7ED9AI"
6452
+ }
6453
+ )
6454
+ ] })
6455
+ ] })
6456
+ ] })
6457
+ ] }) }),
6458
+ componentCreateOpen && /* @__PURE__ */ jsx2("div", { className: "di-component-create-layer", role: "presentation", children: /* @__PURE__ */ jsxs("div", { className: "di-component-create-drawer", role: "dialog", "aria-modal": "true", "aria-label": "\u521B\u5EFA\u7EC4\u4EF6\u89C4\u8303", children: [
6459
+ /* @__PURE__ */ jsxs("div", { className: "di-component-create-head", children: [
6460
+ /* @__PURE__ */ jsxs("div", { className: "di-component-create-title", children: [
6461
+ /* @__PURE__ */ jsx2(ComponentIcon, { size: 15, strokeWidth: 2.2, "aria-hidden": "true" }),
6462
+ "\u521B\u5EFA\u7EC4\u4EF6"
6463
+ ] }),
6464
+ /* @__PURE__ */ jsx2(
6465
+ "button",
6466
+ {
6467
+ type: "button",
6468
+ className: "di-head-icon-btn",
6469
+ onClick: () => {
6470
+ setComponentCreateOpen(false);
6471
+ setComponentCreateContainerMenuOpen(false);
6472
+ setComponentCreateTypeMenuOpen(false);
6473
+ },
6474
+ title: "\u5173\u95ED\u521B\u5EFA\u7EC4\u4EF6",
6475
+ "aria-label": "\u5173\u95ED\u521B\u5EFA\u7EC4\u4EF6",
6476
+ children: /* @__PURE__ */ jsx2(X, { size: 15, strokeWidth: 2.2, "aria-hidden": "true" })
6477
+ }
6478
+ )
6479
+ ] }),
6480
+ /* @__PURE__ */ jsxs("div", { className: "di-component-create-scroll", children: [
6481
+ /* @__PURE__ */ jsxs("div", { className: "di-component-create-summary", children: [
6482
+ /* @__PURE__ */ jsxs("div", { children: [
6483
+ /* @__PURE__ */ jsx2("span", { children: "\u5F53\u524D\u5143\u7D20" }),
6484
+ /* @__PURE__ */ jsx2("strong", { children: componentCreateTargetLabel })
6485
+ ] }),
6486
+ /* @__PURE__ */ jsx2("code", { title: componentCreateSelector, children: componentCreateSelector }),
6487
+ componentCreateDefaultText ? /* @__PURE__ */ jsx2("p", { title: componentCreateDefaultText, children: componentCreateDefaultText }) : null
6488
+ ] }),
6489
+ /* @__PURE__ */ jsxs("div", { className: "di-component-create-form", children: [
6490
+ /* @__PURE__ */ jsxs("div", { className: "di-component-create-field di-component-create-field--wide", children: [
6491
+ /* @__PURE__ */ jsx2("span", { children: "\u5BB9\u5668" }),
6492
+ /* @__PURE__ */ jsxs("div", { className: "di-component-type-combobox", children: [
6493
+ /* @__PURE__ */ jsxs(
6494
+ "button",
6495
+ {
6496
+ type: "button",
6497
+ className: "di-component-type-trigger",
6498
+ onClick: () => {
6499
+ setComponentCreateContainerMenuOpen((v) => !v);
6500
+ setComponentCreateTypeMenuOpen(false);
6501
+ },
6502
+ "aria-label": "\u9009\u62E9\u6240\u5C5E\u5BB9\u5668",
6503
+ "aria-expanded": componentCreateContainerMenuOpen,
6504
+ "aria-haspopup": "listbox",
6505
+ children: [
6506
+ /* @__PURE__ */ jsx2("span", { className: "di-component-type-trigger-value", children: componentCreateContainerOption.label }),
6507
+ /* @__PURE__ */ jsx2(ChevronDown, { size: 14, strokeWidth: 2.2, "aria-hidden": "true" })
6508
+ ]
6509
+ }
6510
+ ),
6511
+ componentCreateContainerMenuOpen && /* @__PURE__ */ jsxs("div", { className: "di-component-type-menu", role: "listbox", children: [
6512
+ /* @__PURE__ */ jsx2("div", { className: "di-component-type-menu-head", children: "\u5148\u786E\u5B9A\u8FD9\u4E2A\u5143\u7D20\u670D\u52A1\u4E8E\u54EA\u4E2A\u7ED3\u6784" }),
6513
+ COMPONENT_CONTAINER_OPTIONS.map((option) => /* @__PURE__ */ jsxs(
6514
+ "button",
6515
+ {
6516
+ type: "button",
6517
+ className: `di-component-type-option${option.key === componentCreateContainer ? " di-component-type-option--active" : ""}`,
6518
+ onMouseDown: (event) => event.preventDefault(),
6519
+ onClick: () => applyComponentCreateContainer(option.key),
6520
+ role: "option",
6521
+ "aria-selected": option.key === componentCreateContainer,
6522
+ children: [
6523
+ /* @__PURE__ */ jsx2("strong", { children: option.label }),
6524
+ /* @__PURE__ */ jsx2("span", { children: option.hint })
6525
+ ]
6526
+ },
6527
+ option.key
6528
+ ))
6529
+ ] })
6530
+ ] })
6531
+ ] }),
6532
+ /* @__PURE__ */ jsxs("div", { className: "di-component-create-field di-component-create-field--wide", children: [
6533
+ /* @__PURE__ */ jsx2("span", { children: "\u7528\u9014" }),
6534
+ /* @__PURE__ */ jsxs("div", { className: "di-component-type-combobox", children: [
6535
+ /* @__PURE__ */ jsxs(
6536
+ "button",
6537
+ {
6538
+ type: "button",
6539
+ className: "di-component-type-trigger",
6540
+ onClick: () => {
6541
+ setComponentCreateTypeMenuOpen((v) => !v);
6542
+ setComponentCreateContainerMenuOpen(false);
6543
+ },
6544
+ "aria-label": "\u9009\u62E9\u5143\u7D20\u7528\u9014",
6545
+ "aria-expanded": componentCreateTypeMenuOpen,
6546
+ "aria-haspopup": "listbox",
6547
+ children: [
6548
+ /* @__PURE__ */ jsx2("span", { className: "di-component-type-trigger-value", children: componentCreateType || "\u9009\u62E9\u7528\u9014" }),
6549
+ /* @__PURE__ */ jsx2(ChevronDown, { size: 14, strokeWidth: 2.2, "aria-hidden": "true" })
6550
+ ]
6551
+ }
6552
+ ),
6553
+ componentCreateTypeMenuOpen && /* @__PURE__ */ jsxs("div", { className: "di-component-type-menu", role: "listbox", children: [
6554
+ /* @__PURE__ */ jsx2("div", { className: "di-component-type-menu-head", children: "\u518D\u786E\u5B9A\u5B83\u5728\u5BB9\u5668\u91CC\u7684\u804C\u8D23" }),
6555
+ componentCreateTypeOptions.map((option) => /* @__PURE__ */ jsxs(
6556
+ "button",
6557
+ {
6558
+ type: "button",
6559
+ className: `di-component-type-option${normalizeComponentType(option.label) === componentCreateTypeQuery ? " di-component-type-option--active" : ""}`,
6560
+ onMouseDown: (event) => event.preventDefault(),
6561
+ onClick: () => applyComponentCreateType(option.label),
6562
+ role: "option",
6563
+ "aria-selected": normalizeComponentType(option.label) === componentCreateTypeQuery,
6564
+ children: [
6565
+ /* @__PURE__ */ jsx2("strong", { children: option.label }),
6566
+ /* @__PURE__ */ jsx2("span", { children: option.hint })
6567
+ ]
6568
+ },
6569
+ option.label
6570
+ )),
6571
+ !componentCreateTypeOptions.length ? /* @__PURE__ */ jsx2("div", { className: "di-component-type-empty", children: "\u6CA1\u6709\u5339\u914D\u7528\u9014" }) : null
6572
+ ] })
6573
+ ] })
6574
+ ] }),
6575
+ /* @__PURE__ */ jsxs("label", { className: "di-component-create-field di-component-create-field--wide", children: [
6576
+ /* @__PURE__ */ jsx2("span", { children: "\u540D\u79F0" }),
6577
+ /* @__PURE__ */ jsx2(
6578
+ "input",
6579
+ {
6580
+ value: componentSpecDraft.componentName,
6581
+ onChange: (event) => {
6582
+ setComponentCreateNameTouched(true);
6583
+ syncComponentSpecDraft({ componentName: event.currentTarget.value });
6584
+ },
6585
+ placeholder: "page-title"
6586
+ }
6587
+ )
6588
+ ] }),
6589
+ componentCreateExistingMatch ? /* @__PURE__ */ jsxs("div", { className: "di-component-create-existing", children: [
6590
+ /* @__PURE__ */ jsxs("div", { className: "di-component-create-existing-copy", children: [
6591
+ /* @__PURE__ */ jsx2("span", { children: "\u5DF2\u6709\u540C\u7C7B" }),
6592
+ /* @__PURE__ */ jsx2("strong", { children: componentCreateExistingMatch.componentName }),
6593
+ /* @__PURE__ */ jsx2("small", { children: componentCreateExistingMatch.usage || componentCreateExistingMatch.targetLabel })
6594
+ ] }),
6595
+ /* @__PURE__ */ jsxs("div", { className: "di-component-create-existing-actions", children: [
6596
+ /* @__PURE__ */ jsx2(
6597
+ "button",
6598
+ {
6599
+ type: "button",
6600
+ className: componentCreateResolution === "reuse" ? "di-segment-pill di-segment-pill--active" : "di-segment-pill",
6601
+ onClick: () => {
6602
+ setComponentCreateResolution("reuse");
6603
+ setComponentCreateNameTouched(false);
6604
+ syncComponentSpecDraft({
6605
+ sourceMode: "\u590D\u7528\u5DF2\u6709\u7EC4\u4EF6",
6606
+ action: "\u590D\u7528\u7EC4\u4EF6",
6607
+ componentName: componentCreateExistingMatch.componentName
6608
+ });
6609
+ },
6610
+ children: "\u590D\u7528\u5DF2\u6709\u7EC4\u4EF6"
6611
+ }
6612
+ ),
6613
+ /* @__PURE__ */ jsx2(
6614
+ "button",
6615
+ {
6616
+ type: "button",
6617
+ className: componentCreateResolution === "new" ? "di-segment-pill di-segment-pill--active" : "di-segment-pill",
6618
+ onClick: () => {
6619
+ const nextName = getUniqueComponentName(getComponentNameByType(componentCreateType, selected, componentCreateContainer));
6620
+ setComponentCreateResolution("new");
6621
+ setComponentCreateNameTouched(false);
6622
+ syncComponentSpecDraft({
6623
+ sourceMode: "\u65B0\u5EFA\u540C\u7C7B\u7EC4\u4EF6",
6624
+ action: "\u521B\u5EFA\u7EC4\u4EF6",
6625
+ componentName: nextName
6626
+ });
6627
+ },
6628
+ children: "\u65B0\u5EFA\u540C\u7C7B\u7EC4\u4EF6"
6629
+ }
6630
+ )
6631
+ ] })
6632
+ ] }) : null,
6633
+ /* @__PURE__ */ jsxs("label", { className: "di-component-create-field di-component-create-field--wide", children: [
6634
+ /* @__PURE__ */ jsx2("span", { children: "\u4F7F\u7528\u573A\u666F" }),
6635
+ /* @__PURE__ */ jsx2(
6636
+ "input",
6637
+ {
6638
+ value: componentCreatePurpose,
6639
+ onChange: (event) => {
6640
+ const { value } = event.currentTarget;
6641
+ setComponentCreatePurpose(value);
6642
+ syncComponentSpecDraft({ usage: value });
6643
+ },
6644
+ placeholder: "\u7528\u4E8E\u9875\u9762\u9876\u90E8\u4E3B\u6807\u9898\u5C55\u793A"
6645
+ }
6646
+ )
6647
+ ] })
6648
+ ] }),
6649
+ /* @__PURE__ */ jsxs("div", { className: "di-component-create-rules", children: [
6650
+ /* @__PURE__ */ jsx2("div", { className: "di-component-create-rules-title", children: "\u7EC4\u4EF6\u89C4\u5219" }),
6651
+ /* @__PURE__ */ jsx2("ul", { children: componentCreateRulePreview.map((rule) => /* @__PURE__ */ jsx2("li", { children: rule }, rule)) })
6652
+ ] })
6653
+ ] }),
6654
+ /* @__PURE__ */ jsx2("div", { className: "di-component-create-actions", children: /* @__PURE__ */ jsx2("button", { type: "button", className: "di-btn-save", onClick: handleSendComponentCreateToAi, children: "\u53D1\u9001\u7ED9AI" }) })
6655
+ ] }) }),
6656
+ /* @__PURE__ */ jsxs("div", { className: `di-body${activePlugin === "component-maker" ? " di-body--plugin-page" : ""}`, children: [
3430
6657
  /* @__PURE__ */ jsxs("div", { className: "di-section", children: [
3431
6658
  /* @__PURE__ */ jsxs("div", { className: "di-section-title-row", children: [
3432
6659
  /* @__PURE__ */ jsx2("div", { className: "di-section-title", children: "\u4F5C\u7528\u8303\u56F4" }),
@@ -3451,6 +6678,344 @@ function InspectorPanel({
3451
6678
  ] })
3452
6679
  ] })
3453
6680
  ] }),
6681
+ activePlugin === "component-maker" && /* @__PURE__ */ jsxs("div", { className: "di-section di-plugin-section di-plugin-section--page", children: [
6682
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-page-head", children: [
6683
+ /* @__PURE__ */ jsxs(
6684
+ "button",
6685
+ {
6686
+ type: "button",
6687
+ className: "di-plugin-back",
6688
+ onClick: () => setActivePlugin(null),
6689
+ children: [
6690
+ /* @__PURE__ */ jsx2(ArrowLeft, { size: 14, strokeWidth: 2.1, "aria-hidden": "true" }),
6691
+ "\u6837\u5F0F\u9762\u677F"
6692
+ ]
6693
+ }
6694
+ ),
6695
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-page-title", children: [
6696
+ /* @__PURE__ */ jsx2(ComponentIcon, { size: 14, strokeWidth: 2.2, "aria-hidden": "true" }),
6697
+ "\u7EC4\u4EF6\u5236\u4F5C"
6698
+ ] }),
6699
+ pluginMsg && /* @__PURE__ */ jsx2("span", { className: "di-plugin-msg", children: pluginMsg })
6700
+ ] }),
6701
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-panel di-plugin-panel--maker", children: [
6702
+ isRecognizedComponentVariantFlow ? /* @__PURE__ */ jsxs("div", { className: "di-plugin-maker-compact di-plugin-maker-compact--variant", children: [
6703
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-control-row", children: [
6704
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-label", children: "\u7EC4\u4EF6" }),
6705
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-component-main", children: [
6706
+ /* @__PURE__ */ jsx2("strong", { children: componentMakerActiveComponentName }),
6707
+ /* @__PURE__ */ jsx2("span", { children: componentMakerActiveComponentType })
6708
+ ] })
6709
+ ] }),
6710
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-control-row", children: [
6711
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-label", children: "\u65B0\u589E" }),
6712
+ /* @__PURE__ */ jsx2("div", { className: "di-plugin-action-tiles", role: "group", "aria-label": "\u65B0\u589E\u7EC4\u4EF6\u53D8\u4F53", children: componentMakerVariantActionOptions.map((option) => /* @__PURE__ */ jsx2(
6713
+ "button",
6714
+ {
6715
+ type: "button",
6716
+ className: `di-plugin-action-tile${componentMakerAction === option.key ? " di-plugin-action-tile--on" : ""}`,
6717
+ onClick: () => updateComponentMakerAction(option.key),
6718
+ title: option.hint,
6719
+ children: option.key === "create-current-variant" ? "\u5F53\u524D\u53D8\u4F53" : "\u5176\u4ED6\u53D8\u4F53"
6720
+ },
6721
+ option.key
6722
+ )) })
6723
+ ] })
6724
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "di-plugin-maker-compact", children: [
6725
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-control-row", children: [
6726
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-label", children: "\u7EC4\u4EF6" }),
6727
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-component-main", children: [
6728
+ /* @__PURE__ */ jsx2("strong", { children: componentMakerActiveComponentName }),
6729
+ /* @__PURE__ */ jsx2("span", { children: componentMakerActiveComponentType })
6730
+ ] })
6731
+ ] }),
6732
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-control-row", children: [
6733
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-label", children: "\u5F52\u5C5E" }),
6734
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-source-toggle", role: "group", "aria-label": "\u5F52\u5C5E\u7EC4\u4EF6\u6765\u6E90", children: [
6735
+ /* @__PURE__ */ jsx2(
6736
+ "button",
6737
+ {
6738
+ type: "button",
6739
+ className: `di-plugin-choice${componentMakerSourceMode === "existing" ? " di-plugin-choice--on" : ""}`,
6740
+ disabled: componentMakerComponentOptions.length === 0,
6741
+ onClick: () => {
6742
+ const fallback = selectedComponentOption?.name ?? componentMakerComponentOptions[0]?.name ?? componentSpecDraft.componentName;
6743
+ updateComponentMakerSourceMode("existing", fallback);
6744
+ },
6745
+ children: "\u5DF2\u6709\u7EC4\u4EF6"
6746
+ }
6747
+ ),
6748
+ /* @__PURE__ */ jsx2(
6749
+ "button",
6750
+ {
6751
+ type: "button",
6752
+ className: `di-plugin-choice${componentMakerSourceMode === "new" ? " di-plugin-choice--on" : ""}`,
6753
+ onClick: () => updateComponentMakerSourceMode("new", componentSpecDraft.componentName || getElementDisplayName(selected)),
6754
+ children: "\u65B0\u5EFA\u7EC4\u4EF6"
6755
+ }
6756
+ )
6757
+ ] })
6758
+ ] }),
6759
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-control-row di-plugin-control-row--input", children: [
6760
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-label", children: componentMakerSourceMode === "existing" ? "\u9009\u62E9" : "\u547D\u540D" }),
6761
+ componentMakerSourceMode === "existing" ? componentMakerComponentOptions.length > 0 ? /* @__PURE__ */ jsx2(
6762
+ "select",
6763
+ {
6764
+ className: "di-plugin-inline-input",
6765
+ value: selectedComponentOption?.name ?? componentMakerComponentOptions[0]?.name ?? "",
6766
+ onChange: (event) => {
6767
+ const { value } = event.currentTarget;
6768
+ syncComponentSpecDraft({
6769
+ sourceMode: "\u5DF2\u6709\u7EC4\u4EF6",
6770
+ componentName: value
6771
+ });
6772
+ },
6773
+ children: componentMakerComponentOptions.map((option) => /* @__PURE__ */ jsxs("option", { value: option.name, children: [
6774
+ option.name,
6775
+ " \xB7 ",
6776
+ option.type,
6777
+ " \xB7 ",
6778
+ option.count
6779
+ ] }, option.name))
6780
+ }
6781
+ ) : /* @__PURE__ */ jsx2("span", { className: "di-plugin-empty-note", children: "\u672A\u8BC6\u522B\u5230\u5DF2\u6709\u7EC4\u4EF6\uFF0C\u8BF7\u65B0\u5EFA" }) : /* @__PURE__ */ jsx2(
6782
+ "input",
6783
+ {
6784
+ className: "di-plugin-inline-input",
6785
+ value: componentSpecDraft.componentName,
6786
+ placeholder: "page-title / card-task",
6787
+ onChange: (event) => {
6788
+ const { value } = event.currentTarget;
6789
+ syncComponentSpecDraft({
6790
+ sourceMode: "\u65B0\u5EFA\u7EC4\u4EF6",
6791
+ componentName: value
6792
+ });
6793
+ }
6794
+ }
6795
+ )
6796
+ ] }),
6797
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-control-row", children: [
6798
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-label", children: "\u4EFB\u52A1" }),
6799
+ /* @__PURE__ */ jsx2("div", { className: "di-plugin-action-tiles", role: "group", "aria-label": "\u7EC4\u4EF6\u5236\u4F5C\u52A8\u4F5C", children: componentMakerActions.map((option) => /* @__PURE__ */ jsx2(
6800
+ "button",
6801
+ {
6802
+ type: "button",
6803
+ className: `di-plugin-action-tile${componentMakerAction === option.key ? " di-plugin-action-tile--on" : ""}`,
6804
+ onClick: () => updateComponentMakerAction(option.key),
6805
+ title: option.hint,
6806
+ children: option.label
6807
+ },
6808
+ option.key
6809
+ )) })
6810
+ ] })
6811
+ ] }),
6812
+ /* @__PURE__ */ jsx2("div", { className: `di-plugin-control-card${isRecognizedComponentVariantFlow ? " di-plugin-control-card--variant-flow" : ""}`, children: isRecognizedComponentVariantFlow ? /* @__PURE__ */ jsxs("div", { className: "di-plugin-variant-workflow", children: [
6813
+ /* @__PURE__ */ jsxs("label", { className: "di-plugin-control-row di-plugin-control-row--input", children: [
6814
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-label", children: "\u4EE3\u7801\u540D" }),
6815
+ /* @__PURE__ */ jsx2(
6816
+ "input",
6817
+ {
6818
+ className: "di-plugin-inline-input di-plugin-code-name-input",
6819
+ value: componentMakerVariantCodeName,
6820
+ onChange: (event) => setComponentVariantDraft((prev) => ({ ...prev, name: event.currentTarget.value }))
6821
+ }
6822
+ )
6823
+ ] }),
6824
+ /* @__PURE__ */ jsx2("div", { className: "di-plugin-sandbox-controls di-plugin-sandbox-controls--single", children: componentMakerVariantGroups.map(([dimension, items]) => /* @__PURE__ */ jsxs("div", { className: "di-plugin-sandbox-row", children: [
6825
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-label", children: getComponentMakerDimensionDisplayName(dimension) }),
6826
+ /* @__PURE__ */ jsx2("div", { className: "di-plugin-sandbox-options", children: items.map((item) => {
6827
+ const isPreview = activeComponentMakerVariantPreview?.id === item.id;
6828
+ return /* @__PURE__ */ jsx2(
6829
+ "button",
6830
+ {
6831
+ type: "button",
6832
+ className: `di-plugin-sandbox-option${isPreview ? " di-plugin-sandbox-option--on di-plugin-sandbox-option--preview" : ""}`,
6833
+ "aria-pressed": isPreview,
6834
+ onClick: () => setComponentVariantPreviewId(item.id),
6835
+ onMouseEnter: () => setComponentVariantPreviewId(item.id),
6836
+ title: item.rules,
6837
+ children: item.label
6838
+ },
6839
+ item.id
6840
+ );
6841
+ }) })
6842
+ ] }, dimension)) }),
6843
+ /* @__PURE__ */ jsxs("div", { className: `di-plugin-live-preview di-plugin-live-preview--${activeComponentMakerVariantPreview?.visual ?? "neutral"}`, children: [
6844
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-live-preview-head", children: [
6845
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-label", children: "\u771F\u5B9E\u9884\u89C8" }),
6846
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-variant-count", children: activeComponentMakerVariantPreview?.description ?? "\u5F53\u524D\u7EC4\u4EF6" })
6847
+ ] }),
6848
+ /* @__PURE__ */ jsx2("div", { className: "di-plugin-real-preview-frame", children: /* @__PURE__ */ jsx2(
6849
+ "div",
6850
+ {
6851
+ className: "di-plugin-real-preview-inner",
6852
+ dangerouslySetInnerHTML: { __html: componentMakerLivePreviewHtml }
6853
+ }
6854
+ ) }),
6855
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-preview-meta", children: [
6856
+ /* @__PURE__ */ jsx2("strong", { children: activeComponentMakerVariantPreview?.label ?? "\u5F53\u524D" }),
6857
+ /* @__PURE__ */ jsx2("span", { children: getComponentMakerDimensionDisplayName(activeComponentMakerVariantPreview?.dimension ?? "\u53D8\u4F53") })
6858
+ ] })
6859
+ ] })
6860
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
6861
+ !isComponentMakerVariantAction && /* @__PURE__ */ jsxs("div", { className: "di-plugin-control-row", children: [
6862
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-label", children: "\u89C4\u683C" }),
6863
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-value", children: COMPONENT_MAKER_ACTION_LABELS[componentMakerAction] })
6864
+ ] }),
6865
+ isComponentMakerVariantAction ? /* @__PURE__ */ jsxs("div", { className: "di-plugin-variant-sandbox", children: [
6866
+ componentMakerComponentOptions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "di-plugin-library-row", children: [
6867
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-label", children: "\u7EC4\u4EF6\u5E93" }),
6868
+ /* @__PURE__ */ jsx2("div", { className: "di-plugin-library-pills", "aria-label": "\u9875\u9762\u7EC4\u4EF6\u5E93", children: componentMakerComponentOptions.slice(0, 5).map((option) => {
6869
+ const isCurrent = option.name === (selectedComponentOption?.name ?? componentSpecDraft.componentName);
6870
+ return /* @__PURE__ */ jsx2(
6871
+ "button",
6872
+ {
6873
+ type: "button",
6874
+ className: `di-plugin-library-pill${isCurrent ? " di-plugin-library-pill--on" : ""}`,
6875
+ onClick: () => {
6876
+ updateComponentMakerSourceMode("existing", option.name);
6877
+ setComponentVariantPreviewId("");
6878
+ },
6879
+ title: `${option.name} \xB7 ${option.type} \xB7 ${option.count}`,
6880
+ children: option.name
6881
+ },
6882
+ option.name
6883
+ );
6884
+ }) })
6885
+ ] }),
6886
+ /* @__PURE__ */ jsxs("div", { className: `di-plugin-live-preview di-plugin-live-preview--${activeComponentMakerVariantPreview?.visual ?? "neutral"}`, children: [
6887
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-live-preview-head", children: [
6888
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-label", children: "\u771F\u5B9E\u9884\u89C8" }),
6889
+ /* @__PURE__ */ jsxs("span", { className: "di-plugin-variant-count", children: [
6890
+ selectedComponentMakerVariantSuggestions.length,
6891
+ " / ",
6892
+ componentMakerVariantSuggestions.length
6893
+ ] })
6894
+ ] }),
6895
+ /* @__PURE__ */ jsx2("div", { className: "di-plugin-real-preview-frame", children: /* @__PURE__ */ jsx2(
6896
+ "div",
6897
+ {
6898
+ className: "di-plugin-real-preview-inner",
6899
+ dangerouslySetInnerHTML: { __html: componentMakerLivePreviewHtml }
6900
+ }
6901
+ ) }),
6902
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-preview-meta", children: [
6903
+ /* @__PURE__ */ jsx2("strong", { children: activeComponentMakerVariantPreview?.label ?? "\u5F53\u524D" }),
6904
+ /* @__PURE__ */ jsx2("span", { children: activeComponentMakerVariantPreview?.dimension ?? "\u53D8\u4F53" })
6905
+ ] })
6906
+ ] }),
6907
+ /* @__PURE__ */ jsx2("div", { className: "di-plugin-sandbox-controls", children: componentMakerVariantGroups.map(([dimension, items]) => /* @__PURE__ */ jsxs("div", { className: "di-plugin-sandbox-row", children: [
6908
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-label", children: dimension }),
6909
+ /* @__PURE__ */ jsx2("div", { className: "di-plugin-sandbox-options", children: items.map((item) => {
6910
+ const isSelected = !componentVariantExcludedIds.includes(item.id);
6911
+ const isPreview = activeComponentMakerVariantPreview?.id === item.id;
6912
+ return /* @__PURE__ */ jsx2(
6913
+ "button",
6914
+ {
6915
+ type: "button",
6916
+ className: `di-plugin-sandbox-option${isSelected ? " di-plugin-sandbox-option--on" : ""}${isPreview ? " di-plugin-sandbox-option--preview" : ""}`,
6917
+ "aria-pressed": isSelected,
6918
+ onClick: () => toggleComponentMakerVariantSuggestion(item.id),
6919
+ onMouseEnter: () => setComponentVariantPreviewId(item.id),
6920
+ title: item.rules,
6921
+ children: item.label
6922
+ },
6923
+ item.id
6924
+ );
6925
+ }) })
6926
+ ] }, dimension)) }),
6927
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-selected-variants", children: [
6928
+ /* @__PURE__ */ jsx2("span", { className: "di-plugin-label", children: "\u5DF2\u9009" }),
6929
+ /* @__PURE__ */ jsx2("div", { className: "di-plugin-selected-chip-row", children: selectedComponentMakerVariantSuggestions.length > 0 ? selectedComponentMakerVariantSuggestions.map((item) => /* @__PURE__ */ jsx2(
6930
+ "button",
6931
+ {
6932
+ type: "button",
6933
+ className: "di-plugin-selected-chip",
6934
+ onClick: () => toggleComponentMakerVariantSuggestion(item.id),
6935
+ title: "\u70B9\u51FB\u79FB\u9664",
6936
+ children: item.label
6937
+ },
6938
+ item.id
6939
+ )) : /* @__PURE__ */ jsx2("span", { className: "di-plugin-empty-note", children: "\u81F3\u5C11\u9009\u62E9\u4E00\u4E2A\u53D8\u4F53" }) }),
6940
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-variant-tools", children: [
6941
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => setComponentVariantExcludedIds([]), children: "\u5168\u9009" }),
6942
+ /* @__PURE__ */ jsx2(
6943
+ "button",
6944
+ {
6945
+ type: "button",
6946
+ onClick: () => setComponentVariantExcludedIds(componentMakerVariantSuggestions.map((item) => item.id)),
6947
+ children: "\u6E05\u7A7A"
6948
+ }
6949
+ )
6950
+ ] })
6951
+ ] })
6952
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "di-plugin-spec-grid", children: [
6953
+ /* @__PURE__ */ jsxs("label", { className: "di-plugin-spec-field", children: [
6954
+ /* @__PURE__ */ jsx2("span", { children: "\u53EF\u6539\u5185\u5BB9" }),
6955
+ /* @__PURE__ */ jsx2(
6956
+ "input",
6957
+ {
6958
+ value: componentSpecDraft.slots,
6959
+ onChange: (event) => {
6960
+ const { value } = event.currentTarget;
6961
+ syncComponentSpecDraft({ slots: value });
6962
+ }
6963
+ }
6964
+ )
6965
+ ] }),
6966
+ /* @__PURE__ */ jsxs("label", { className: "di-plugin-spec-field", children: [
6967
+ /* @__PURE__ */ jsx2("span", { children: "\u72B6\u6001/\u53D8\u4F53" }),
6968
+ /* @__PURE__ */ jsx2(
6969
+ "input",
6970
+ {
6971
+ value: componentSpecDraft.variants,
6972
+ onChange: (event) => {
6973
+ const { value } = event.currentTarget;
6974
+ syncComponentSpecDraft({ variants: value });
6975
+ }
6976
+ }
6977
+ )
6978
+ ] }),
6979
+ /* @__PURE__ */ jsxs("label", { className: "di-plugin-spec-field di-plugin-spec-field--wide", children: [
6980
+ /* @__PURE__ */ jsx2("span", { children: "\u89C4\u5219" }),
6981
+ /* @__PURE__ */ jsx2(
6982
+ "textarea",
6983
+ {
6984
+ value: componentSpecDraft.styleRules,
6985
+ onChange: (event) => {
6986
+ const { value } = event.currentTarget;
6987
+ syncComponentSpecDraft({ styleRules: value });
6988
+ }
6989
+ }
6990
+ )
6991
+ ] })
6992
+ ] })
6993
+ ] }) }),
6994
+ /* @__PURE__ */ jsxs("div", { className: "di-plugin-actions", children: [
6995
+ /* @__PURE__ */ jsx2(
6996
+ "button",
6997
+ {
6998
+ type: "button",
6999
+ className: "di-plugin-action",
7000
+ onClick: () => {
7001
+ if (isComponentMakerVariantAction) handleRecordComponentVariantDraft();
7002
+ else handleRecordComponentSpecDraft();
7003
+ },
7004
+ children: isComponentMakerVariantAction ? "\u8BB0\u5F55\u53D8\u4F53\u7EC4" : "\u8BB0\u5F55\u7EC4\u4EF6\u89C4\u683C"
7005
+ }
7006
+ ),
7007
+ /* @__PURE__ */ jsx2(
7008
+ "button",
7009
+ {
7010
+ type: "button",
7011
+ className: "di-plugin-action di-plugin-action--secondary",
7012
+ onClick: () => copyPluginPrompt(buildComponentMakerPrompt(componentMakerContext), "\u7EC4\u4EF6\u4EFB\u52A1\u5DF2\u590D\u5236 \u2713"),
7013
+ children: "\u590D\u5236\u7EC4\u4EF6\u4EFB\u52A1"
7014
+ }
7015
+ )
7016
+ ] })
7017
+ ] })
7018
+ ] }),
3454
7019
  componentMeta && /* @__PURE__ */ jsxs("div", { className: "di-section", children: [
3455
7020
  /* @__PURE__ */ jsx2("div", { className: "di-section-title", children: "\u7EC4\u4EF6" }),
3456
7021
  /* @__PURE__ */ jsxs("div", { className: "di-component-card", children: [
@@ -3656,7 +7221,7 @@ function InspectorPanel({
3656
7221
  ] })
3657
7222
  ] }),
3658
7223
  showElementStyleSections && /* @__PURE__ */ jsxs(Fragment, { children: [
3659
- /* @__PURE__ */ jsxs("div", { className: "di-section di-text-section", children: [
7224
+ !hideTextStyleSection && /* @__PURE__ */ jsxs("div", { className: "di-section di-text-section", children: [
3660
7225
  /* @__PURE__ */ jsxs("div", { className: "di-section-title-row di-section-title-row--action", children: [
3661
7226
  /* @__PURE__ */ jsx2("div", { className: "di-section-title", children: "\u6587\u5B57" }),
3662
7227
  renderSectionReset("text", "\u6587\u5B57")
@@ -4009,8 +7574,9 @@ function InspectorPanel({
4009
7574
  }
4010
7575
  return /* @__PURE__ */ jsxs(Fragment, { children: [
4011
7576
  /* @__PURE__ */ jsx2("div", { className: "di-section-title", children: "\u5916\u89C2" }),
4012
- /* @__PURE__ */ jsxs("div", { className: `di-container-toolbar${showContainerCustomControls ? " di-container-toolbar--custom" : ""}`, children: [
4013
- /* @__PURE__ */ jsxs("div", { className: "di-typography-control-wrap", children: [
7577
+ /* @__PURE__ */ jsxs("div", { className: `di-container-toolbar di-appearance-toolbar${showContainerCustomControls ? " di-container-toolbar--custom di-appearance-toolbar--custom" : ""}`, children: [
7578
+ /* @__PURE__ */ jsxs("div", { className: "di-typography-control-wrap di-appearance-field", children: [
7579
+ showContainerCustomControls && /* @__PURE__ */ jsx2("span", { className: "di-appearance-field-label", children: "\u6837\u5F0F" }),
4014
7580
  showContainerCustomControls ? /* @__PURE__ */ jsx2(
4015
7581
  CustomSelectButton,
4016
7582
  {
@@ -4089,7 +7655,8 @@ function InspectorPanel({
4089
7655
  ] })
4090
7656
  ] }),
4091
7657
  showContainerCustomControls ? /* @__PURE__ */ jsxs(Fragment, { children: [
4092
- /* @__PURE__ */ jsxs("div", { className: "di-typography-control-wrap", children: [
7658
+ /* @__PURE__ */ jsxs("div", { className: "di-typography-control-wrap di-appearance-field", children: [
7659
+ /* @__PURE__ */ jsx2("span", { className: "di-appearance-field-label", children: "\u80CC\u666F" }),
4093
7660
  /* @__PURE__ */ jsx2(
4094
7661
  ColorSelectButton,
4095
7662
  {
@@ -4127,7 +7694,8 @@ function InspectorPanel({
4127
7694
  }
4128
7695
  )
4129
7696
  ] }),
4130
- /* @__PURE__ */ jsxs("div", { className: "di-typography-control-wrap", children: [
7697
+ /* @__PURE__ */ jsxs("div", { className: "di-typography-control-wrap di-appearance-field", children: [
7698
+ /* @__PURE__ */ jsx2("span", { className: "di-appearance-field-label", children: "\u8FB9\u6846" }),
4131
7699
  /* @__PURE__ */ jsx2(
4132
7700
  ColorSelectButton,
4133
7701
  {
@@ -4166,7 +7734,8 @@ function InspectorPanel({
4166
7734
  }
4167
7735
  )
4168
7736
  ] }),
4169
- /* @__PURE__ */ jsxs("div", { className: "di-typography-control-wrap", children: [
7737
+ /* @__PURE__ */ jsxs("div", { className: "di-typography-control-wrap di-appearance-field", children: [
7738
+ /* @__PURE__ */ jsx2("span", { className: "di-appearance-field-label", children: "\u7C97\u7EC6" }),
4170
7739
  /* @__PURE__ */ jsxs(
4171
7740
  "button",
4172
7741
  {
@@ -4213,7 +7782,8 @@ function InspectorPanel({
4213
7782
  )) })
4214
7783
  ] })
4215
7784
  ] }),
4216
- /* @__PURE__ */ jsxs("div", { className: "di-typography-control-wrap", children: [
7785
+ /* @__PURE__ */ jsxs("div", { className: "di-typography-control-wrap di-appearance-field", children: [
7786
+ /* @__PURE__ */ jsx2("span", { className: "di-appearance-field-label", children: "\u7EBF\u6761" }),
4217
7787
  /* @__PURE__ */ jsxs(
4218
7788
  "button",
4219
7789
  {
@@ -4264,7 +7834,8 @@ function InspectorPanel({
4264
7834
  )) })
4265
7835
  ] })
4266
7836
  ] }),
4267
- /* @__PURE__ */ jsxs("div", { className: "di-typography-control-wrap", children: [
7837
+ /* @__PURE__ */ jsxs("div", { className: "di-typography-control-wrap di-appearance-field", children: [
7838
+ /* @__PURE__ */ jsx2("span", { className: "di-appearance-field-label", children: "\u5706\u89D2" }),
4268
7839
  /* @__PURE__ */ jsxs(
4269
7840
  "button",
4270
7841
  {
@@ -4682,7 +8253,7 @@ function InspectorPanel({
4682
8253
  }
4683
8254
  }
4684
8255
  ),
4685
- /* @__PURE__ */ jsx2(
8256
+ showElementGapControl && /* @__PURE__ */ jsx2(
4686
8257
  SpaceCard,
4687
8258
  {
4688
8259
  title: "\u5143\u7D20\u95F4\u8DDD",
@@ -4700,138 +8271,149 @@ function InspectorPanel({
4700
8271
  }
4701
8272
  )
4702
8273
  ] })
8274
+ ] })
8275
+ ] }),
8276
+ /* @__PURE__ */ jsxs("div", { className: "di-section", children: [
8277
+ /* @__PURE__ */ jsxs("div", { className: "di-section-title", children: [
8278
+ "\u672C\u6B21\u4FEE\u6539\u5185\u5BB9 ",
8279
+ localDraftChangeCount
4703
8280
  ] }),
4704
- /* @__PURE__ */ jsxs("div", { className: "di-section", children: [
4705
- /* @__PURE__ */ jsxs("div", { className: "di-section-title", children: [
4706
- "\u672C\u6B21\u4FEE\u6539\u5185\u5BB9 ",
4707
- localDraftChangeCount
4708
- ] }),
4709
- /* @__PURE__ */ jsxs("div", { className: "di-inbox-summary", children: [
4710
- localDraftEntries.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "di-inbox-list", children: localDraftEntries.map((entry) => /* @__PURE__ */ jsxs("div", { className: "di-inbox-card di-inbox-card--draft", children: [
4711
- /* @__PURE__ */ jsxs("div", { className: "di-inbox-card-head", children: [
4712
- /* @__PURE__ */ jsxs("div", { children: [
4713
- /* @__PURE__ */ jsx2("div", { className: "di-inbox-target", children: entry.targetLabel }),
4714
- /* @__PURE__ */ jsxs("div", { className: "di-inbox-meta", children: [
4715
- entry.scopeLabel,
4716
- " \xB7 ",
4717
- entry.selector
4718
- ] })
4719
- ] }),
4720
- /* @__PURE__ */ jsx2(
4721
- "button",
4722
- {
4723
- className: "di-inbox-icon-btn",
4724
- onClick: () => handleDeleteLocalDraft(entry.key),
4725
- title: "\u5220\u9664\u8FD9\u4E2A\u5BF9\u8C61\u7684\u5168\u90E8\u4FEE\u6539",
4726
- "aria-label": "\u5220\u9664\u8FD9\u4E2A\u5BF9\u8C61\u7684\u5168\u90E8\u4FEE\u6539",
4727
- children: /* @__PURE__ */ jsx2(Trash2, { size: 14, strokeWidth: 2.2, "aria-hidden": "true" })
4728
- }
4729
- )
8281
+ /* @__PURE__ */ jsxs("div", { className: "di-inbox-summary", children: [
8282
+ localDraftEntries.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "di-inbox-list", children: localDraftEntries.map((entry) => /* @__PURE__ */ jsxs("div", { className: "di-inbox-card di-inbox-card--draft", children: [
8283
+ /* @__PURE__ */ jsxs("div", { className: "di-inbox-card-head", children: [
8284
+ /* @__PURE__ */ jsxs("div", { children: [
8285
+ /* @__PURE__ */ jsx2("div", { className: "di-inbox-target", children: entry.targetLabel }),
8286
+ /* @__PURE__ */ jsxs("div", { className: "di-inbox-meta", children: [
8287
+ entry.scopeLabel,
8288
+ " \xB7 ",
8289
+ entry.selector
8290
+ ] })
4730
8291
  ] }),
4731
- /* @__PURE__ */ jsx2("ol", { className: "di-inbox-change-list", children: entry.changes.map((change, idx) => /* @__PURE__ */ jsxs("li", { className: "di-inbox-change-item", children: [
4732
- /* @__PURE__ */ jsxs("span", { className: "di-inbox-change-text", children: [
4733
- idx + 1,
4734
- ". ",
4735
- getChangeLabel(change.prop),
4736
- "\uFF1A",
4737
- formatStoredChangeRecordValue(change.prop, change.from),
4738
- " \u2192 ",
4739
- formatStoredChangeRecordValue(change.prop, change.val)
4740
- ] }),
4741
- /* @__PURE__ */ jsx2(
4742
- "button",
4743
- {
4744
- className: "di-inbox-icon-btn di-inbox-icon-btn--mini",
4745
- onClick: () => handleResetLocalDraftChange(entry.key, change.prop),
4746
- title: "\u79FB\u9664\u5E76\u91CD\u7F6E\u8FD9\u6761\u4FEE\u6539",
4747
- "aria-label": "\u79FB\u9664\u5E76\u91CD\u7F6E\u8FD9\u6761\u4FEE\u6539",
4748
- children: /* @__PURE__ */ jsx2(Minus, { size: 14, strokeWidth: 2.4, "aria-hidden": "true" })
4749
- }
4750
- )
4751
- ] }, `${entry.key}-${change.prop}-${idx}`)) })
4752
- ] }, entry.key)) }) : styleIntentSummary.pendingEntries.length === 0 ? /* @__PURE__ */ jsx2("div", { className: "di-empty", children: "\u8FD8\u6CA1\u6709\u8BB0\u5F55\u7684\u4FEE\u6539" }) : null,
4753
- styleIntentSummary.pendingEntries.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "di-inbox-list di-inbox-list--stored", children: styleIntentSummary.pendingEntries.map((entry) => /* @__PURE__ */ jsxs("div", { className: "di-inbox-card", children: [
4754
- /* @__PURE__ */ jsxs("div", { className: "di-inbox-card-head", children: [
4755
- /* @__PURE__ */ jsx2("div", { className: "di-inbox-target", children: entry.targetLabel || entry.selector || "\u672A\u547D\u540D\u5BF9\u8C61" }),
4756
- /* @__PURE__ */ jsx2(
4757
- "button",
4758
- {
4759
- className: "di-inbox-icon-btn",
4760
- onClick: () => handleDeleteStyleIntent(entry.id),
4761
- title: "\u5220\u9664\u8FD9\u6761\u5DF2\u8BB0\u5F55\u5BF9\u8C61",
4762
- "aria-label": "\u5220\u9664\u8FD9\u6761\u5DF2\u8BB0\u5F55\u5BF9\u8C61",
4763
- children: /* @__PURE__ */ jsx2(Trash2, { size: 14, strokeWidth: 2.2, "aria-hidden": "true" })
4764
- }
4765
- )
8292
+ /* @__PURE__ */ jsx2(
8293
+ "button",
8294
+ {
8295
+ className: "di-inbox-icon-btn",
8296
+ onClick: () => handleDeleteLocalDraft(entry.key),
8297
+ title: "\u5220\u9664\u8FD9\u4E2A\u5BF9\u8C61\u7684\u5168\u90E8\u4FEE\u6539",
8298
+ "aria-label": "\u5220\u9664\u8FD9\u4E2A\u5BF9\u8C61\u7684\u5168\u90E8\u4FEE\u6539",
8299
+ children: /* @__PURE__ */ jsx2(Trash2, { size: 14, strokeWidth: 2.2, "aria-hidden": "true" })
8300
+ }
8301
+ )
8302
+ ] }),
8303
+ /* @__PURE__ */ jsx2("ol", { className: "di-inbox-change-list", children: entry.changes.map((change, idx) => /* @__PURE__ */ jsxs("li", { className: "di-inbox-change-item", children: [
8304
+ /* @__PURE__ */ jsxs("span", { className: "di-inbox-change-text", children: [
8305
+ idx + 1,
8306
+ ". ",
8307
+ getChangeLabel(change.prop),
8308
+ "\uFF1A",
8309
+ formatStoredChangeRecordValue(change.prop, change.from),
8310
+ " \u2192 ",
8311
+ formatStoredChangeRecordValue(change.prop, change.val)
4766
8312
  ] }),
4767
- entry.note ? /* @__PURE__ */ jsx2("div", { className: "di-inbox-note", children: entry.note }) : null,
4768
- /* @__PURE__ */ jsx2("ol", { className: "di-inbox-change-list", children: entry.entries.flatMap((group) => group.changes.map((change) => ({ selector: group.selector, ...change }))).map((change, idx) => /* @__PURE__ */ jsxs("li", { className: "di-inbox-change-item", children: [
4769
- /* @__PURE__ */ jsxs("span", { className: "di-inbox-change-text", children: [
4770
- idx + 1,
4771
- ". ",
4772
- getChangeLabel(change.prop),
4773
- "\uFF1A",
4774
- change.from ? `${formatStoredChangeRecordValue(change.prop, change.from)} \u2192 ` : "",
4775
- formatStoredChangeRecordValue(change.prop, change.val)
4776
- ] }),
4777
- /* @__PURE__ */ jsx2(
4778
- "button",
4779
- {
4780
- className: "di-inbox-icon-btn di-inbox-icon-btn--mini",
4781
- onClick: () => handleDeleteStyleIntent(entry.id, change.selector, change.prop),
4782
- title: "\u5220\u9664\u8FD9\u6761\u5DF2\u8BB0\u5F55\u5C5E\u6027",
4783
- "aria-label": "\u5220\u9664\u8FD9\u6761\u5DF2\u8BB0\u5F55\u5C5E\u6027",
4784
- children: /* @__PURE__ */ jsx2(Minus, { size: 14, strokeWidth: 2.4, "aria-hidden": "true" })
4785
- }
4786
- )
4787
- ] }, `${entry.id}-${change.selector}-${change.prop}-${idx}`)) })
4788
- ] }, entry.id)) }) : null
4789
- ] })
8313
+ /* @__PURE__ */ jsx2(
8314
+ "button",
8315
+ {
8316
+ className: "di-inbox-icon-btn di-inbox-icon-btn--mini",
8317
+ onClick: () => handleResetLocalDraftChange(entry.key, change.prop),
8318
+ title: "\u79FB\u9664\u5E76\u91CD\u7F6E\u8FD9\u6761\u4FEE\u6539",
8319
+ "aria-label": "\u79FB\u9664\u5E76\u91CD\u7F6E\u8FD9\u6761\u4FEE\u6539",
8320
+ children: /* @__PURE__ */ jsx2(Minus, { size: 14, strokeWidth: 2.4, "aria-hidden": "true" })
8321
+ }
8322
+ )
8323
+ ] }, `${entry.key}-${change.prop}-${idx}`)) })
8324
+ ] }, entry.key)) }) : styleIntentSummary.pendingEntries.length === 0 ? /* @__PURE__ */ jsx2("div", { className: "di-empty", children: "\u8FD8\u6CA1\u6709\u8BB0\u5F55\u7684\u4FEE\u6539" }) : null,
8325
+ styleIntentSummary.pendingEntries.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "di-inbox-list di-inbox-list--stored", children: styleIntentSummary.pendingEntries.map((entry) => /* @__PURE__ */ jsxs("div", { className: "di-inbox-card", children: [
8326
+ /* @__PURE__ */ jsxs("div", { className: "di-inbox-card-head", children: [
8327
+ /* @__PURE__ */ jsx2("div", { className: "di-inbox-target", children: entry.targetLabel || entry.selector || "\u672A\u547D\u540D\u5BF9\u8C61" }),
8328
+ /* @__PURE__ */ jsx2(
8329
+ "button",
8330
+ {
8331
+ className: "di-inbox-icon-btn",
8332
+ onClick: () => handleDeleteStyleIntent(entry.id),
8333
+ title: "\u5220\u9664\u8FD9\u6761\u5DF2\u8BB0\u5F55\u5BF9\u8C61",
8334
+ "aria-label": "\u5220\u9664\u8FD9\u6761\u5DF2\u8BB0\u5F55\u5BF9\u8C61",
8335
+ children: /* @__PURE__ */ jsx2(Trash2, { size: 14, strokeWidth: 2.2, "aria-hidden": "true" })
8336
+ }
8337
+ )
8338
+ ] }),
8339
+ entry.note ? /* @__PURE__ */ jsx2("div", { className: "di-inbox-note", children: entry.note }) : null,
8340
+ /* @__PURE__ */ jsx2("ol", { className: "di-inbox-change-list", children: entry.entries.flatMap((group) => group.changes.map((change) => ({ selector: group.selector, ...change }))).map((change, idx) => /* @__PURE__ */ jsxs("li", { className: "di-inbox-change-item", children: [
8341
+ /* @__PURE__ */ jsxs("span", { className: "di-inbox-change-text", children: [
8342
+ idx + 1,
8343
+ ". ",
8344
+ getChangeLabel(change.prop),
8345
+ "\uFF1A",
8346
+ change.from ? `${formatStoredChangeRecordValue(change.prop, change.from)} \u2192 ` : "",
8347
+ formatStoredChangeRecordValue(change.prop, change.val)
8348
+ ] }),
8349
+ /* @__PURE__ */ jsx2(
8350
+ "button",
8351
+ {
8352
+ className: "di-inbox-icon-btn di-inbox-icon-btn--mini",
8353
+ onClick: () => handleDeleteStyleIntent(entry.id, change.selector, change.prop),
8354
+ title: "\u5220\u9664\u8FD9\u6761\u5DF2\u8BB0\u5F55\u5C5E\u6027",
8355
+ "aria-label": "\u5220\u9664\u8FD9\u6761\u5DF2\u8BB0\u5F55\u5C5E\u6027",
8356
+ children: /* @__PURE__ */ jsx2(Minus, { size: 14, strokeWidth: 2.4, "aria-hidden": "true" })
8357
+ }
8358
+ )
8359
+ ] }, `${entry.id}-${change.selector}-${change.prop}-${idx}`)) })
8360
+ ] }, entry.id)) }) : null
4790
8361
  ] })
4791
8362
  ] })
4792
8363
  ] }),
4793
8364
  (() => {
4794
8365
  const hasPending = localDraftChangeCount > 0 || currentPendingChangeCount > 0 || !!note;
4795
- return /* @__PURE__ */ jsxs("div", { className: "di-foot", children: [
4796
- /* @__PURE__ */ jsx2("button", { className: "di-btn-cancel", onClick: handleReset, children: "\u91CD\u7F6E" }),
4797
- /* @__PURE__ */ jsx2("button", { className: "di-btn-cancel", onClick: () => {
4798
- const el = selectedRef.current;
4799
- if (!el) return;
4800
- const effectiveColors = { ...colors, ...pendingColors };
4801
- const pending = [
4802
- ...Object.entries(effectiveColors).filter(([, v]) => v && v !== "transparent"),
4803
- [pendingTextColor || textColorVal ? "color" : "", pendingTextColor || textColorVal],
4804
- [pendingRadius || radiusVal ? "border-radius" : "", pendingRadius || radiusVal],
4805
- [pendingShadow || (shadowVal !== "none" ? shadowVal : "") ? "box-shadow" : "", pendingShadow || (shadowVal !== "none" ? shadowVal : "")],
4806
- [pendingBorderColor || borderColorVal ? "border-color" : "", pendingBorderColor || borderColorVal],
4807
- [pendingBorderWidth || (borderWidthVal !== "0px" ? borderWidthVal : "") ? "border-width" : "", pendingBorderWidth || borderWidthVal],
4808
- [pendingBorderStyle || (borderStyleVal !== "none" ? borderStyleVal : "") ? "border-style" : "", pendingBorderStyle || borderStyleVal],
4809
- [pendingFontSize || fontSizeVal ? "font-size" : "", pendingFontSize || fontSizeVal],
4810
- [pendingFontWeight || fontWeightVal ? "font-weight" : "", pendingFontWeight || fontWeightVal],
4811
- [pendingPadding || (paddingVal !== "0px" ? paddingVal : "") ? "padding" : "", pendingPadding || paddingVal],
4812
- [pendingMargin || (marginVal !== "0px" ? marginVal : "") ? "margin" : "", pendingMargin || marginVal],
4813
- [pendingGap || (gapVal !== "0px" ? gapVal : "") ? "gap" : "", pendingGap || gapVal],
4814
- [pendingWidth || widthVal ? "width" : "", pendingWidth || widthVal],
4815
- [pendingHeight || heightVal ? "height" : "", pendingHeight || heightVal],
4816
- [pendingJustifyContent ? "justify-content" : "", pendingJustifyContent],
4817
- [pendingAlignItems ? "align-items" : "", pendingAlignItems]
4818
- ].filter(([k, v]) => k && v);
4819
- const selector = getSelectorForScope(el, scope);
4820
- const css = pending.length > 0 ? `${selector} {
8366
+ return /* @__PURE__ */ jsxs("div", { className: `di-foot${canCreateComponent ? " di-foot--with-maker" : " di-foot--without-maker"}`, children: [
8367
+ /* @__PURE__ */ jsxs("div", { className: "di-foot-secondary-actions", children: [
8368
+ /* @__PURE__ */ jsx2("button", { className: "di-btn-cancel", onClick: handleReset, children: "\u91CD\u7F6E" }),
8369
+ /* @__PURE__ */ jsx2("button", { className: "di-btn-cancel", onClick: () => {
8370
+ const el = selectedRef.current;
8371
+ if (!el) return;
8372
+ const effectiveColors = { ...colors, ...pendingColors };
8373
+ const pending = [
8374
+ ...Object.entries(effectiveColors).filter(([, v]) => v && v !== "transparent"),
8375
+ [pendingTextColor || textColorVal ? "color" : "", pendingTextColor || textColorVal],
8376
+ [pendingRadius || radiusVal ? "border-radius" : "", pendingRadius || radiusVal],
8377
+ [pendingShadow || (shadowVal !== "none" ? shadowVal : "") ? "box-shadow" : "", pendingShadow || (shadowVal !== "none" ? shadowVal : "")],
8378
+ [pendingBorderColor || borderColorVal ? "border-color" : "", pendingBorderColor || borderColorVal],
8379
+ [pendingBorderWidth || (borderWidthVal !== "0px" ? borderWidthVal : "") ? "border-width" : "", pendingBorderWidth || borderWidthVal],
8380
+ [pendingBorderStyle || (borderStyleVal !== "none" ? borderStyleVal : "") ? "border-style" : "", pendingBorderStyle || borderStyleVal],
8381
+ [pendingFontSize || fontSizeVal ? "font-size" : "", pendingFontSize || fontSizeVal],
8382
+ [pendingFontWeight || fontWeightVal ? "font-weight" : "", pendingFontWeight || fontWeightVal],
8383
+ [pendingPadding || (paddingVal !== "0px" ? paddingVal : "") ? "padding" : "", pendingPadding || paddingVal],
8384
+ [pendingMargin || (marginVal !== "0px" ? marginVal : "") ? "margin" : "", pendingMargin || marginVal],
8385
+ [pendingGap || (gapVal !== "0px" ? gapVal : "") ? "gap" : "", pendingGap || gapVal],
8386
+ [pendingWidth || widthVal ? "width" : "", pendingWidth || widthVal],
8387
+ [pendingHeight || heightVal ? "height" : "", pendingHeight || heightVal],
8388
+ [pendingJustifyContent ? "justify-content" : "", pendingJustifyContent],
8389
+ [pendingAlignItems ? "align-items" : "", pendingAlignItems]
8390
+ ].filter(([k, v]) => k && v);
8391
+ const selector = getSelectorForScope(el, scope);
8392
+ const css = pending.length > 0 ? `${selector} {
4821
8393
  ${pending.map(([p, v]) => ` ${p}: ${v};`).join("\n")}
4822
8394
  }` : `/* ${selector} \u2014 \u6682\u65E0\u6539\u52A8 */`;
4823
- const ta = document.createElement("textarea");
4824
- ta.value = css;
4825
- ta.style.cssText = "position:fixed;opacity:0;top:0;left:0";
4826
- document.body.appendChild(ta);
4827
- ta.select();
4828
- document.execCommand("copy");
4829
- document.body.removeChild(ta);
4830
- _copiedStyles = pending.map(([p, v]) => ({ prop: p, val: v }));
4831
- setHasCopied(true);
4832
- setCopyMsg("\u5DF2\u590D\u5236 \u2713");
4833
- setTimeout(() => setCopyMsg(""), 1500);
4834
- }, children: copyMsg || "\u590D\u5236\u6837\u5F0F" }),
8395
+ const ta = document.createElement("textarea");
8396
+ ta.value = css;
8397
+ ta.style.cssText = "position:fixed;opacity:0;top:0;left:0";
8398
+ document.body.appendChild(ta);
8399
+ ta.select();
8400
+ document.execCommand("copy");
8401
+ document.body.removeChild(ta);
8402
+ _copiedStyles = pending.map(([p, v]) => ({ prop: p, val: v }));
8403
+ setHasCopied(true);
8404
+ setCopyMsg("\u5DF2\u590D\u5236 \u2713");
8405
+ setTimeout(() => setCopyMsg(""), 1500);
8406
+ }, children: copyMsg || "\u590D\u5236\u6837\u5F0F" }),
8407
+ canCreateComponent && /* @__PURE__ */ jsx2(
8408
+ "button",
8409
+ {
8410
+ className: "di-btn-cancel di-btn-maker",
8411
+ onClick: openComponentCreateDrawer,
8412
+ title: "\u628A\u5F53\u524D\u666E\u901A\u5143\u7D20\u6C89\u6DC0\u4E3A\u65B0\u7EC4\u4EF6\u89C4\u8303",
8413
+ children: "\u521B\u5EFA\u7EC4\u4EF6"
8414
+ }
8415
+ )
8416
+ ] }),
4835
8417
  /* @__PURE__ */ jsx2(
4836
8418
  "button",
4837
8419
  {
@@ -5109,6 +8691,7 @@ function DevInspector() {
5109
8691
  targetEl: p.el,
5110
8692
  tokenMap,
5111
8693
  onTokenMapUpdate: (updates) => setTokenMap((prev) => ({ ...prev, ...updates })),
8694
+ onTargetChange: (el) => setPanels((prev) => prev.map((item) => item.id === p.id ? { ...item, el } : item)),
5112
8695
  onClose: () => setPanels((prev) => prev.filter((x) => x.id !== p.id))
5113
8696
  },
5114
8697
  p.id