@orbit-work/ui 0.1.2-preview.0 → 0.1.2

package/dist/chunk-66VEV7G2.js

@@ -0,0 +1,111 @@
+// src/lib/browser-annotation-popup.ts
+var BROWSER_ANNOTATION_PROPERTY_DEFS = [
+  { key: "textContent", label: "\u6587\u672C", cssProp: "", type: "text" },
+  { key: "color", label: "\u6587\u672C\u989C\u8272", cssProp: "color", type: "color" },
+  { key: "backgroundColor", label: "\u80CC\u666F", cssProp: "backgroundColor", type: "color" },
+  { key: "opacity", label: "Opacity", cssProp: "opacity", type: "number", step: 0.1, min: 0, max: 1 },
+  { key: "fontFamily", label: "\u5B57\u4F53", cssProp: "fontFamily", type: "select", options: [] },
+  { key: "fontSize", label: "\u5B57\u53F7", cssProp: "fontSize", type: "number", unit: "px" },
+  {
+    key: "fontWeight",
+    label: "\u5B57\u91CD",
+    cssProp: "fontWeight",
+    type: "select",
+    options: ["100", "200", "300", "400", "500", "600", "700", "800", "900"]
+  },
+  { key: "borderRadius", label: "\u8FB9\u6846\u5706\u89D2\u534A\u5F84", cssProp: "borderRadius", type: "number", unit: "px" },
+  { key: "borderColor", label: "\u8FB9\u6846\u989C\u8272", cssProp: "borderColor", type: "color" },
+  { key: "borderWidth", label: "\u8FB9\u6846\u5BBD\u5EA6", cssProp: "borderWidth", type: "number", unit: "px" },
+  { key: "width", label: "\u5BBD\u5EA6", cssProp: "width", type: "number", unit: "px" },
+  { key: "height", label: "\u9AD8\u5EA6", cssProp: "height", type: "number", unit: "px" },
+  { key: "padding", label: "\u5185\u8FB9\u8DDD", cssProp: "padding", type: "spacing" },
+  { key: "margin", label: "\u5916\u8FB9\u8DDD", cssProp: "margin", type: "spacing" }
+];
+var BROWSER_ANNOTATION_POPUP_STYLES = `
+[data-slot="browser-annotation-popup"]{all:initial;box-sizing:border-box;
+/* \u2500\u2500 DS 2.0 \u6D45\u6863\u7EC8\u503C\u955C\u50CF\u8868\uFF08\u5DE6\uFF1D\u672C\u5730\u9694\u79BB\u952E\uFF0C\u53F3\u6CE8\u91CA\uFF1D\u6240\u6284\u7684 DS 2.0 token\uFF09\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+--ow-annotation-primary:#0F1B3D;          /* --ow-btn-primary-bg\uFF08\uFF1D--ow-accent / --ow-navy\uFF09 */
+--ow-annotation-primary-hover:#202942;    /* --ow-btn-primary-hover */
+--ow-annotation-on-fill:#F7F6F1;          /* --ow-on-fill\uFF08\uFF1D--ow-btn-primary-fg\uFF1B\u4E0A\u6E38 text \u547D\u540D\u53EA\u5728\u5BFC\u5165\u8FB9\u754C\u5F52\u4E00\uFF09 */
+--ow-annotation-bg:#FFFFFF;               /* --ow-popover-bg \u2014\u2014 \u6D6E\u5C42\u81EA\u5DF1\u7684\u9762 */
+--ow-annotation-bg-muted:#F1F0EA;         /* --ow-surface-2\uFF08\u5D4C\u5957\u4E95/\u8F93\u5165\u5E95/\u8868\u5934\u5E95\uFF09\uFF0C\u6D45\u6863\u4E0E --ow-hover-pop \u540C\u503C */
+--ow-annotation-bg-hover:#ECEBE5;         /* --ow-press-pop \u2014\u2014 \u6BD4 bg-muted \u518D\u6DF1\u4E00\u6863\uFF08\xA75 \u5F39\u5C42\u4E0A\u8D70 pop \u6863\uFF09 */
+--ow-annotation-fg:#333B50;               /* --ow-text */
+--ow-annotation-fg-muted:#646B7A;         /* --ow-text-2 */
+--ow-annotation-fg-subtle:#646B7A;        /* --ow-text-3\uFF08\u53EF\u8BFB\u526F\u6587\u672C\u6863\uFF09 */
+--ow-annotation-fg-placeholder:#646B7A;   /* --ow-placeholder\uFF08\u6D45\u6863\uFF1D--ow-text-3\uFF09 */
+--ow-annotation-line:#DCDCD7;             /* --ow-border\uFF08\uFF1D--ow-input-border\uFF09\u2014\u2014 \u63CF\u8FB9\u4E0E\u5206\u9694\u7EBF rest */
+--ow-annotation-line-strong:#C2C3C1;      /* --ow-border-strong \u2014\u2014 \u8F93\u5165 hover \u6863\uFF08\xA76 \u4E09\u6001\u8FB9\u6846\uFF09 */
+--ow-annotation-shadow-pop:0 4px 12px rgba(15, 27, 61, 0.10); /* --ow-shadow-pop */
+/* \u5B57\u4F53\u6808\u4E5F\u8981\u955C\u50CF\uFF1A\u6CE8\u8FDB\u7B2C\u4E09\u65B9\u9875\u65F6 --ow-font-sans \u4E0D\u5728\u573A\uFF0C\u56DE\u9000\u503C\u5FC5\u987B\u9010\u5B57\u6284 DS 2.0 \u7684\u6808
+   \uFF08\xA78 \u5DF2\u77E5\u5751\uFF1Aemoji \u65CF\u5FC5\u987B\u7F6E\u4E8E\u6808\u5C3E\uFF0CLinux \u6570\u5B57\u6E32\u67D3\u7F3A\u9677\uFF0C\u52FF\u8C03\u5E8F\uFF09\u3002 */
+--ow-annotation-font-sans:'HarmonyOS Sans SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji'; /* --ow-font-sans */
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+position:fixed;z-index:2147483647;font-family:var(--ow-annotation-font-sans);font-size:var(--ow-fs-ui, 13px);color:var(--ow-annotation-fg);pointer-events:auto;width:320px;background:var(--ow-annotation-bg);border:var(--ow-border-width-default, 1px) solid var(--ow-annotation-line);border-radius:var(--ow-radius-lg, 12px);box-shadow:var(--ow-annotation-shadow-pop);overflow:hidden;display:flex;flex-direction:column;}
+[data-slot="browser-annotation-popup"][data-preview="true"]{position:relative;z-index:1;max-height:100%;}
+[data-slot="browser-annotation-popup"] *{box-sizing:border-box;}
+/* \u5DE6\u4FA7\u7AD6\u6761\u662F\u7EAF\u88C5\u9970\u7684\u4E00\u6761\u810A\uFF0C\u4E0D\u7F16\u7801\u4EFB\u4F55\u72B6\u6001\u2014\u2014\u6309 \xA74 R2/R1 \u5B83\u6CA1\u6709\u8D44\u683C\u62FF\u63D0\u8272\uFF0C\u8D70\u4E2D\u6027\u63CF\u8FB9\u3002 */
+[data-slot="browser-annotation-popup"] [data-ow-part="collapsed-view"]{display:flex;align-items:center;gap:var(--ow-space-15, 6px);padding:10px var(--ow-space-3, 12px);border-left:3px solid var(--ow-annotation-line-strong);border-radius:var(--ow-radius-lg, 12px);}
+[data-slot="browser-annotation-popup"] [data-ow-part="expanded-view"]{display:none;flex-direction:column;overflow:hidden;flex:1;min-height:0;}
+[data-slot="browser-annotation-popup"][data-ow-state="expanded"] [data-ow-part="collapsed-view"]{display:none;}
+[data-slot="browser-annotation-popup"][data-ow-state="expanded"] [data-ow-part="expanded-view"]{display:flex;}
+[data-slot="browser-annotation-popup"][data-ow-state="expanded"][data-placement="flipped"] [data-ow-part="expanded-view"]{flex-direction:column-reverse;}
+[data-slot="browser-annotation-popup"][data-ow-state="expanded"][data-placement="flipped"]{border-radius:var(--ow-radius-lg, 12px);}
+[data-slot="browser-annotation-popup"] [data-ow-part="top"]{display:flex;align-items:center;gap:var(--ow-space-2, 8px);padding:10px var(--ow-space-3, 12px);border-left:3px solid var(--ow-annotation-line-strong);border-radius:var(--ow-radius-lg, 12px) var(--ow-radius-lg, 12px) 0 0;flex-shrink:0;}
+/* \u5DE5\u5177\u6761\u6309\u94AE\u8D70 ghost\uFF08DS 2.0 P6-7\uFF09\uFF1A\u9759\u6B62\u900F\u660E\uFF0Chover \u624D\u4E0A\u5E95\uFF0Cpress \u518D\u6DF1\u4E00\u6863\u3002
+   \u4E4B\u524D\u9759\u6B62\u5C31\u5E26 bg-muted\uFF0C\u7B49\u4E8E\u4E00\u76F4\u662F\u4E2A\u5B9E\u5FC3 chip\uFF0C\u8DDF \xA75\u300C\u8D34\u5730\u4E0D\u4E0A\u5E95\u300D\u5BF9\u4E0D\u4E0A\u3002 */
+[data-slot="browser-annotation-popup"] [data-ow-part="settings-btn"]{all:initial;cursor:pointer;font:inherit;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ow-radius-sm, 8px);background:transparent;color:var(--ow-annotation-fg-muted);flex-shrink:0;transition:background var(--ow-dur-1, 120ms) var(--ow-ease-beacon, cubic-bezier(0.22, 1, 0.36, 1));font-size:0;}
+[data-slot="browser-annotation-popup"] [data-ow-part="settings-btn"]:hover{background:var(--ow-annotation-bg-muted);}
+[data-slot="browser-annotation-popup"] [data-ow-part="settings-btn"]:active{background:var(--ow-annotation-bg-hover);}
+[data-slot="browser-annotation-popup"] [data-ow-part="input"]{all:initial;flex:1;font:inherit;font-size:var(--ow-fs-ui, 13px);color:var(--ow-annotation-fg);padding:var(--ow-space-05, 2px) 0;border:none;outline:none;background:transparent;min-width:0;}
+[data-slot="browser-annotation-popup"] [data-ow-part="input"]::placeholder{color:var(--ow-annotation-fg-placeholder);}
+/* \u63D0\u4EA4\u94AE\u4E0E\u540C\u4E00\u884C\u7684 settings-btn \u540C\u6863\uFF1A28\xD728\uFF08\xA77 \u63A7\u4EF6\u9AD8 {28,32,40}\uFF0C\u56FE\u6807\u94AE \u226528\xD728\uFF09\u3002
+   \u65E7\u503C 30\xD730 \u4E0D\u5728\u6863\u5185\uFF0C\u4E14\u4E0E\u884C\u5185\u90BB\u5C45\u5BF9\u4E0D\u9F50\u3002 */
+[data-slot="browser-annotation-popup"] [data-ow-part="submit-btn"]{all:initial;cursor:pointer;font:inherit;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ow-radius-sm, 8px);background:transparent;color:var(--ow-annotation-fg-subtle);flex-shrink:0;transition:background var(--ow-dur-1, 120ms) var(--ow-ease-beacon, cubic-bezier(0.22, 1, 0.36, 1)),color var(--ow-dur-1, 120ms) var(--ow-ease-beacon, cubic-bezier(0.22, 1, 0.36, 1));}
+[data-slot="browser-annotation-popup"] [data-ow-part="submit-btn"]:hover{background:var(--ow-annotation-bg-muted);}
+/* \u6709\u5B57\u624D\u662F\u300C\u80FD\u63D0\u4EA4\u4E86\u300D\u2014\u2014\u5B9E\u5E95\uFF0B\u63D0\u8272\uFF0C\u5F62\u72B6\u4E0D\u53D8\uFF0C\u989C\u8272\u662F\u7B2C\u4E8C\u7F16\u7801\uFF08R1\uFF09\u3002 */
+[data-slot="browser-annotation-popup"] [data-ow-part="submit-btn"][data-ow-state="has-text"]{background:var(--ow-annotation-primary);color:var(--ow-annotation-on-fill);}
+[data-slot="browser-annotation-popup"] [data-ow-part="submit-btn"][data-ow-state="has-text"]:hover{background:var(--ow-annotation-primary-hover);}
+/* \xA76\uFF1A\u7126\u70B9\u73AF 2px + 2px \u7559\u767D\u7F1D\uFF0C\u4E0D\u9760 all:initial \u4E4B\u540E\u6D88\u5931\u7684\u6D4F\u89C8\u5668\u9ED8\u8BA4\u73AF\u3002
+   \u73AF\u8272\u5F15 primary\uFF1ADS 2.0 \u6D45\u6863 --ow-focus-ring \u4E0E --ow-btn-primary-bg \u540C\u4E3A #0F1B3D\uFF0C
+   \u4E0D\u53E6\u7ACB\u952E\uFF1B\u82E5\u4E0A\u6E38\u628A\u4E24\u8005\u62C6\u5F00\uFF0C\u8FD9\u91CC\u8981\u8DDF\u7740\u8865 --ow-annotation-focus-ring\u3002 */
+[data-slot="browser-annotation-popup"] [data-ow-part="settings-btn"]:focus-visible,[data-slot="browser-annotation-popup"] [data-ow-part="submit-btn"]:focus-visible,[data-slot="browser-annotation-popup"] [data-ow-part="cancel"]:focus-visible,[data-slot="browser-annotation-popup"] [data-ow-part="confirm"]:focus-visible{outline:var(--ow-focus-ring-w, 2px) solid var(--ow-annotation-primary);outline-offset:var(--ow-focus-ring-offset, 2px);}
+[data-slot="browser-annotation-popup"] [data-ow-part="tag"]{display:flex;align-items:center;justify-content:space-between;padding:var(--ow-space-15, 6px) 14px;background:var(--ow-annotation-bg-muted);font-weight:700;font-size:var(--ow-fs-ui, 13px);color:var(--ow-annotation-fg);flex-shrink:0;}
+/* \u62D6\u62FD\u63E1\u628A\u662F\u5B57\u5F62\u4E0D\u662F\u88C5\u9970\u8272\u5757\uFF0C\xA77\u300C\u56FE\u6807\u8272\u53EA\u53D6 text/text-2/text-3\u300D\u2014\u2014\u539F fg-faint(#C2C3C1)
+   \u5728 DS 2.0 \u91CC\u662F --ow-border-strong\uFF0C\u6CA1\u6709\u5BF9\u5E94\u7684\u6587\u5B57\u6863\uFF0C\u6545\u5E76\u5165 text-3\u3002 */
+[data-slot="browser-annotation-popup"] [data-ow-part="tag-drag"]{color:var(--ow-annotation-fg-subtle);cursor:grab;font-size:var(--ow-fs-body, 14px);letter-spacing:1px;}
+[data-slot="browser-annotation-popup"] [data-ow-part="props"]{padding:var(--ow-space-05, 2px) 14px var(--ow-space-1, 4px);overflow-y:auto;flex:1;min-height:0;}
+[data-slot="browser-annotation-popup"] [data-ow-part="prop"]{display:flex;align-items:center;padding:var(--ow-space-15, 6px) 0;border-bottom: var(--ow-border-width-default, 1px) solid var(--ow-annotation-line);gap:10px;}
+[data-slot="browser-annotation-popup"] [data-ow-part="prop"]:last-child{border-bottom:none;}
+[data-slot="browser-annotation-popup"] [data-ow-part="prop-label"]{width:60px;flex-shrink:0;font-size:var(--ow-fs-mark-md, 11px);color:var(--ow-annotation-fg);font-weight:500;}
+[data-slot="browser-annotation-popup"] [data-ow-part="prop-value"]{flex:1;display:flex;align-items:center;gap:5px;position:relative;}
+/* \u8F93\u5165\u7C7B\u5E95\u8272\u8D70 --ow-surface-2 \u7684\u955C\u50CF\uFF08\xA75\u300C\u5D4C\u5957\u4E95\uFF1D\u8F93\u5165\u5E95\u300D\uFF09\uFF0C\u5750\u5728 popover \u767D\u9762\u4E0A\u624D\u8BFB\u5F97\u51FA\u4E95\uFF1B
+   \u4E09\u6001\u8FB9\u6846 rest(line) \u2192 hover(line-strong) \u2192 focus(focus-ring\uFF0C\u6D45\u6863\u540C primary)\uFF0C\xA76\u3002 */
+[data-slot="browser-annotation-popup"] [data-ow-part="prop-input"]{all:initial;font:inherit;font-size:var(--ow-fs-mark-md, 11px);color:var(--ow-annotation-fg);box-sizing:border-box;height:28px;padding:0 var(--ow-space-2, 8px);border: var(--ow-border-width-default, 1px) solid var(--ow-annotation-line);border-radius:var(--ow-radius-xs, 6px);width:100%;outline:none;background:var(--ow-annotation-bg-muted);}
+[data-slot="browser-annotation-popup"] [data-ow-part="prop-input"]:hover{border-color:var(--ow-annotation-line-strong);}
+[data-slot="browser-annotation-popup"] [data-ow-part="prop-input"]:focus{border-color:var(--ow-annotation-primary);}
+[data-slot="browser-annotation-popup"] [data-ow-part="prop-unit"]{font-size:var(--ow-fs-mark-sm, 10px);color:var(--ow-annotation-fg-subtle);position:absolute;right:8px;pointer-events:none;}
+[data-slot="browser-annotation-popup"] [data-ow-part="prop-select"]{all:initial;font:inherit;font-size:var(--ow-fs-mark-md, 11px);color:var(--ow-annotation-fg);box-sizing:border-box;height:28px;padding:0 var(--ow-space-2, 8px);border: var(--ow-border-width-default, 1px) solid var(--ow-annotation-line);border-radius:var(--ow-radius-xs, 6px);width:100%;outline:none;appearance:auto;cursor:pointer;background:var(--ow-annotation-bg-muted);}
+[data-slot="browser-annotation-popup"] [data-ow-part="prop-select"]:hover{border-color:var(--ow-annotation-line-strong);}
+[data-slot="browser-annotation-popup"] [data-ow-part="prop-select"]:focus{border-color:var(--ow-annotation-primary);}
+/* \xA77 \u5F62\u72B6\u8868\uFF1A999 \u53EA\u7559\u7ED9\u5E26\u72B6\u6001\u70B9/\u8BA1\u6570\u7684 chip \u4E0E\u771F\u5706\u4EF6\uFF08\u5934\u50CF/\u72B6\u6001\u70B9\uFF09\u3002\u8272\u677F\u662F\u4E2A\u53D6\u8272\u63A7\u4EF6\uFF0C
+   \u843D\u6309\u94AE\u6863 8px\uFF08\u539F 50% \u5706\u70B9\u662F V1 \u8272\u677F\u6BCD\u9898\uFF09\u3002 */
+[data-slot="browser-annotation-popup"] [data-ow-part="color-swatch"]{width:20px;height:20px;border-radius:var(--ow-radius-sm, 8px);border: var(--ow-border-width-default, 1px) solid var(--ow-annotation-line);flex-shrink:0;cursor:pointer;position:relative;overflow:hidden;}
+[data-slot="browser-annotation-popup"] [data-ow-part="color-swatch"]:hover{border-color:var(--ow-annotation-line-strong);}
+[data-slot="browser-annotation-popup"] [data-ow-part="color-swatch"] input{position:absolute;inset:-4px;width:28px;height:28px;opacity:0;cursor:pointer;}
+[data-slot="browser-annotation-popup"] [data-ow-part="spacing"]{display:flex;gap:3px;flex:1;}
+[data-slot="browser-annotation-popup"] [data-ow-part="spacing"] input{all:initial;font:inherit;font-size:var(--ow-fs-mark-sm, 10px);color:var(--ow-annotation-fg);box-sizing:border-box;height:28px;padding:0 3px;border: var(--ow-border-width-default, 1px) solid var(--ow-annotation-line);border-radius:var(--ow-radius-xs, 6px);width:100%;text-align:center;outline:none;background:var(--ow-annotation-bg-muted);}
+[data-slot="browser-annotation-popup"] [data-ow-part="spacing"] input:hover{border-color:var(--ow-annotation-line-strong);}
+[data-slot="browser-annotation-popup"] [data-ow-part="spacing"] input:focus{border-color:var(--ow-annotation-primary);}
+[data-slot="browser-annotation-popup"] [data-ow-part="actions"]{display:flex;align-items:center;justify-content:space-between;padding:var(--ow-space-2, 8px) var(--ow-space-3, 12px);border-top: var(--ow-border-width-default, 1px) solid var(--ow-annotation-line);flex-shrink:0;}
+[data-slot="browser-annotation-popup"] [data-ow-part="cancel"]{all:initial;cursor:pointer;font:inherit;font-weight:500;font-size:var(--ow-fs-ui, 13px);color:var(--ow-annotation-fg);box-sizing:border-box;height:32px;padding:0 14px;border:none;border-radius:var(--ow-radius-sm, 8px);background:var(--ow-annotation-bg-muted);transition:background var(--ow-dur-1, 120ms) var(--ow-ease-beacon, cubic-bezier(0.22, 1, 0.36, 1));display:inline-flex;align-items:center;justify-content:center;}
+[data-slot="browser-annotation-popup"] [data-ow-part="cancel"]:hover{background:var(--ow-annotation-bg-hover);}
+[data-slot="browser-annotation-popup"] [data-ow-part="confirm"]{all:initial;cursor:pointer;font:inherit;font-weight:500;font-size:var(--ow-fs-ui, 13px);box-sizing:border-box;height:32px;padding:0 14px;border:none;border-radius:var(--ow-radius-sm, 8px);background:var(--ow-annotation-primary);color:var(--ow-annotation-on-fill);transition:background var(--ow-dur-1, 120ms) var(--ow-ease-beacon, cubic-bezier(0.22, 1, 0.36, 1));display:inline-flex;align-items:center;justify-content:center;gap:var(--ow-space-1, 4px);}
+[data-slot="browser-annotation-popup"] [data-ow-part="confirm"]:hover{background:var(--ow-annotation-primary-hover);}
+`;
+
+export {
+  BROWSER_ANNOTATION_PROPERTY_DEFS,
+  BROWSER_ANNOTATION_POPUP_STYLES
+};
+//# sourceMappingURL=chunk-66VEV7G2.js.map

package/dist/chunk-66VEV7G2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/browser-annotation-popup.ts"],"sourcesContent":["export type BrowserAnnotationPropertyType = \"text\" | \"color\" | \"number\" | \"select\" | \"spacing\"\n\nexport interface BrowserAnnotationPropertyDefinition {\n  key: string\n  label: string\n  cssProp: string\n  type: BrowserAnnotationPropertyType\n  unit?: string\n  options?: readonly string[]\n  step?: number\n  min?: number\n  max?: number\n}\n\n/**\n * Annotation properties shared by the WebView runtime and the React preview.\n * Keep this module free of React and DOM imports so Electron can bundle it in\n * the sandboxed guest preload without pulling in the component library.\n */\nexport const BROWSER_ANNOTATION_PROPERTY_DEFS: readonly BrowserAnnotationPropertyDefinition[] = [\n  { key: \"textContent\", label: \"文本\", cssProp: \"\", type: \"text\" },\n  { key: \"color\", label: \"文本颜色\", cssProp: \"color\", type: \"color\" },\n  { key: \"backgroundColor\", label: \"背景\", cssProp: \"backgroundColor\", type: \"color\" },\n  { key: \"opacity\", label: \"Opacity\", cssProp: \"opacity\", type: \"number\", step: 0.1, min: 0, max: 1 },\n  { key: \"fontFamily\", label: \"字体\", cssProp: \"fontFamily\", type: \"select\", options: [] },\n  { key: \"fontSize\", label: \"字号\", cssProp: \"fontSize\", type: \"number\", unit: \"px\" },\n  {\n    key: \"fontWeight\",\n    label: \"字重\",\n    cssProp: \"fontWeight\",\n    type: \"select\",\n    options: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"],\n  },\n  { key: \"borderRadius\", label: \"边框圆角半径\", cssProp: \"borderRadius\", type: \"number\", unit: \"px\" },\n  { key: \"borderColor\", label: \"边框颜色\", cssProp: \"borderColor\", type: \"color\" },\n  { key: \"borderWidth\", label: \"边框宽度\", cssProp: \"borderWidth\", type: \"number\", unit: \"px\" },\n  { key: \"width\", label: \"宽度\", cssProp: \"width\", type: \"number\", unit: \"px\" },\n  { key: \"height\", label: \"高度\", cssProp: \"height\", type: \"number\", unit: \"px\" },\n  { key: \"padding\", label: \"内边距\", cssProp: \"padding\", type: \"spacing\" },\n  { key: \"margin\", label: \"外边距\", cssProp: \"margin\", type: \"spacing\" },\n]\n\n/**\n * Isolated light-surface skin used inside arbitrary third-party pages. The\n * scoped semantic variables prevent host-page CSS variables from changing the\n * popup while keeping every visual value in this Orbitwork UI-owned source.\n *\n * DS 2.0 契约（P6-7 / W4 去痕）：这段 CSS 注进的是**第三方页面**，全局 `--ow-*` token 表\n * 不在场，所以 `var(--ow-x, y)` 里真正生效的永远是回退值 y —— 这份 `--ow-annotation-*`\n * 就是 DS token 的镜像，是本文件唯一允许出现字面色值的地方。规则块里一律零裸色：\n * 新值先在这里立一个 `--ow-annotation-*`（值抄 DS 2.0 浅档终值），再去规则里引。\n *\n * 表里每行右侧注释＝它抄的那个 DS 2.0 token 名；终值出自 `src/tokens/{base,metrics}.ts` +\n * `src/tokens/light.ts`（解析后与 `contracts/ds2-spec.json` 的 light 档逐值一致）。\n * 改值的顺序永远是「先改 DS token，再回来同步这张表」，两边不许各自漂。\n *\n * **单主题（恒浅档）是有意的决定**：浮层落在任意第三方页面上，宿主页的明暗与我们无关，\n * 我们也拿不到自己的 `[data-theme]`；跟着宿主猜主题只会得到一个半明半暗的壳。所以这张表\n * 恒取 DS 2.0 **浅档**终值，浮层永远是一块自带 `--ow-popover-bg` 白面 ＋ 1px `--ow-border`\n * ＋ `--ow-shadow-pop` 的离地卡片（§5 立面：悬浮层永远保留 1px 边框），靠自己的立面立住，\n * 不靠宿主底色。`data-preview=\"true\"`（应用内 React 预览）沿用同一张表，两处所见一致。\n *\n * 圆角走 `--ow-radius-lg`(12)：浮层是 popover/卡片档（§7 形状表 12＝卡片/popover/toast），\n * 不是 modal 档；旧写法 `var(--ow-radius-modal, 14px)` 既走错语义档、14 又是形状表外的\n * 自造值（表内只有 4/6/8/10/12/16/999）。\n *\n * `data-slot` / `data-ow-part` 是与 desktop preload（webviewPreload.ts createPopup）和\n * BrowserAnnotationPopupView 之间的三方约定，改动要三处同步。\n */\nexport const BROWSER_ANNOTATION_POPUP_STYLES = `\n[data-slot=\"browser-annotation-popup\"]{all:initial;box-sizing:border-box;\n/* ── DS 2.0 浅档终值镜像表（左＝本地隔离键，右注释＝所抄的 DS 2.0 token）───────────── */\n--ow-annotation-primary:#0F1B3D;          /* --ow-btn-primary-bg（＝--ow-accent / --ow-navy） */\n--ow-annotation-primary-hover:#202942;    /* --ow-btn-primary-hover */\n--ow-annotation-on-fill:#F7F6F1;          /* --ow-on-fill（＝--ow-btn-primary-fg；上游 text 命名只在导入边界归一） */\n--ow-annotation-bg:#FFFFFF;               /* --ow-popover-bg —— 浮层自己的面 */\n--ow-annotation-bg-muted:#F1F0EA;         /* --ow-surface-2（嵌套井/输入底/表头底），浅档与 --ow-hover-pop 同值 */\n--ow-annotation-bg-hover:#ECEBE5;         /* --ow-press-pop —— 比 bg-muted 再深一档（§5 弹层上走 pop 档） */\n--ow-annotation-fg:#333B50;               /* --ow-text */\n--ow-annotation-fg-muted:#646B7A;         /* --ow-text-2 */\n--ow-annotation-fg-subtle:#646B7A;        /* --ow-text-3（可读副文本档） */\n--ow-annotation-fg-placeholder:#646B7A;   /* --ow-placeholder（浅档＝--ow-text-3） */\n--ow-annotation-line:#DCDCD7;             /* --ow-border（＝--ow-input-border）—— 描边与分隔线 rest */\n--ow-annotation-line-strong:#C2C3C1;      /* --ow-border-strong —— 输入 hover 档（§6 三态边框） */\n--ow-annotation-shadow-pop:0 4px 12px rgba(15, 27, 61, 0.10); /* --ow-shadow-pop */\n/* 字体栈也要镜像：注进第三方页时 --ow-font-sans 不在场，回退值必须逐字抄 DS 2.0 的栈\n   （§8 已知坑：emoji 族必须置于栈尾，Linux 数字渲染缺陷，勿调序）。 */\n--ow-annotation-font-sans:'HarmonyOS Sans SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji'; /* --ow-font-sans */\n/* ──────────────────────────────────────────────────────────────────────────────── */\nposition:fixed;z-index:2147483647;font-family:var(--ow-annotation-font-sans);font-size:var(--ow-fs-ui, 13px);color:var(--ow-annotation-fg);pointer-events:auto;width:320px;background:var(--ow-annotation-bg);border:var(--ow-border-width-default, 1px) solid var(--ow-annotation-line);border-radius:var(--ow-radius-lg, 12px);box-shadow:var(--ow-annotation-shadow-pop);overflow:hidden;display:flex;flex-direction:column;}\n[data-slot=\"browser-annotation-popup\"][data-preview=\"true\"]{position:relative;z-index:1;max-height:100%;}\n[data-slot=\"browser-annotation-popup\"] *{box-sizing:border-box;}\n/* 左侧竖条是纯装饰的一条脊，不编码任何状态——按 §4 R2/R1 它没有资格拿提色，走中性描边。 */\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"collapsed-view\"]{display:flex;align-items:center;gap:var(--ow-space-15, 6px);padding:10px var(--ow-space-3, 12px);border-left:3px solid var(--ow-annotation-line-strong);border-radius:var(--ow-radius-lg, 12px);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"expanded-view\"]{display:none;flex-direction:column;overflow:hidden;flex:1;min-height:0;}\n[data-slot=\"browser-annotation-popup\"][data-ow-state=\"expanded\"] [data-ow-part=\"collapsed-view\"]{display:none;}\n[data-slot=\"browser-annotation-popup\"][data-ow-state=\"expanded\"] [data-ow-part=\"expanded-view\"]{display:flex;}\n[data-slot=\"browser-annotation-popup\"][data-ow-state=\"expanded\"][data-placement=\"flipped\"] [data-ow-part=\"expanded-view\"]{flex-direction:column-reverse;}\n[data-slot=\"browser-annotation-popup\"][data-ow-state=\"expanded\"][data-placement=\"flipped\"]{border-radius:var(--ow-radius-lg, 12px);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"top\"]{display:flex;align-items:center;gap:var(--ow-space-2, 8px);padding:10px var(--ow-space-3, 12px);border-left:3px solid var(--ow-annotation-line-strong);border-radius:var(--ow-radius-lg, 12px) var(--ow-radius-lg, 12px) 0 0;flex-shrink:0;}\n/* 工具条按钮走 ghost（DS 2.0 P6-7）：静止透明，hover 才上底，press 再深一档。\n   之前静止就带 bg-muted，等于一直是个实心 chip，跟 §5「贴地不上底」对不上。 */\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"settings-btn\"]{all:initial;cursor:pointer;font:inherit;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ow-radius-sm, 8px);background:transparent;color:var(--ow-annotation-fg-muted);flex-shrink:0;transition:background var(--ow-dur-1, 120ms) var(--ow-ease-beacon, cubic-bezier(0.22, 1, 0.36, 1));font-size:0;}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"settings-btn\"]:hover{background:var(--ow-annotation-bg-muted);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"settings-btn\"]:active{background:var(--ow-annotation-bg-hover);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"input\"]{all:initial;flex:1;font:inherit;font-size:var(--ow-fs-ui, 13px);color:var(--ow-annotation-fg);padding:var(--ow-space-05, 2px) 0;border:none;outline:none;background:transparent;min-width:0;}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"input\"]::placeholder{color:var(--ow-annotation-fg-placeholder);}\n/* 提交钮与同一行的 settings-btn 同档：28×28（§7 控件高 {28,32,40}，图标钮 ≥28×28）。\n   旧值 30×30 不在档内，且与行内邻居对不齐。 */\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"submit-btn\"]{all:initial;cursor:pointer;font:inherit;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ow-radius-sm, 8px);background:transparent;color:var(--ow-annotation-fg-subtle);flex-shrink:0;transition:background var(--ow-dur-1, 120ms) var(--ow-ease-beacon, cubic-bezier(0.22, 1, 0.36, 1)),color var(--ow-dur-1, 120ms) var(--ow-ease-beacon, cubic-bezier(0.22, 1, 0.36, 1));}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"submit-btn\"]:hover{background:var(--ow-annotation-bg-muted);}\n/* 有字才是「能提交了」——实底＋提色，形状不变，颜色是第二编码（R1）。 */\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"submit-btn\"][data-ow-state=\"has-text\"]{background:var(--ow-annotation-primary);color:var(--ow-annotation-on-fill);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"submit-btn\"][data-ow-state=\"has-text\"]:hover{background:var(--ow-annotation-primary-hover);}\n/* §6：焦点环 2px + 2px 留白缝，不靠 all:initial 之后消失的浏览器默认环。\n   环色引 primary：DS 2.0 浅档 --ow-focus-ring 与 --ow-btn-primary-bg 同为 #0F1B3D，\n   不另立键；若上游把两者拆开，这里要跟着补 --ow-annotation-focus-ring。 */\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"settings-btn\"]:focus-visible,[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"submit-btn\"]:focus-visible,[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"cancel\"]:focus-visible,[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"confirm\"]:focus-visible{outline:var(--ow-focus-ring-w, 2px) solid var(--ow-annotation-primary);outline-offset:var(--ow-focus-ring-offset, 2px);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"tag\"]{display:flex;align-items:center;justify-content:space-between;padding:var(--ow-space-15, 6px) 14px;background:var(--ow-annotation-bg-muted);font-weight:700;font-size:var(--ow-fs-ui, 13px);color:var(--ow-annotation-fg);flex-shrink:0;}\n/* 拖拽握把是字形不是装饰色块，§7「图标色只取 text/text-2/text-3」——原 fg-faint(#C2C3C1)\n   在 DS 2.0 里是 --ow-border-strong，没有对应的文字档，故并入 text-3。 */\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"tag-drag\"]{color:var(--ow-annotation-fg-subtle);cursor:grab;font-size:var(--ow-fs-body, 14px);letter-spacing:1px;}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"props\"]{padding:var(--ow-space-05, 2px) 14px var(--ow-space-1, 4px);overflow-y:auto;flex:1;min-height:0;}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"prop\"]{display:flex;align-items:center;padding:var(--ow-space-15, 6px) 0;border-bottom: var(--ow-border-width-default, 1px) solid var(--ow-annotation-line);gap:10px;}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"prop\"]:last-child{border-bottom:none;}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"prop-label\"]{width:60px;flex-shrink:0;font-size:var(--ow-fs-mark-md, 11px);color:var(--ow-annotation-fg);font-weight:500;}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"prop-value\"]{flex:1;display:flex;align-items:center;gap:5px;position:relative;}\n/* 输入类底色走 --ow-surface-2 的镜像（§5「嵌套井＝输入底」），坐在 popover 白面上才读得出井；\n   三态边框 rest(line) → hover(line-strong) → focus(focus-ring，浅档同 primary)，§6。 */\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"prop-input\"]{all:initial;font:inherit;font-size:var(--ow-fs-mark-md, 11px);color:var(--ow-annotation-fg);box-sizing:border-box;height:28px;padding:0 var(--ow-space-2, 8px);border: var(--ow-border-width-default, 1px) solid var(--ow-annotation-line);border-radius:var(--ow-radius-xs, 6px);width:100%;outline:none;background:var(--ow-annotation-bg-muted);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"prop-input\"]:hover{border-color:var(--ow-annotation-line-strong);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"prop-input\"]:focus{border-color:var(--ow-annotation-primary);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"prop-unit\"]{font-size:var(--ow-fs-mark-sm, 10px);color:var(--ow-annotation-fg-subtle);position:absolute;right:8px;pointer-events:none;}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"prop-select\"]{all:initial;font:inherit;font-size:var(--ow-fs-mark-md, 11px);color:var(--ow-annotation-fg);box-sizing:border-box;height:28px;padding:0 var(--ow-space-2, 8px);border: var(--ow-border-width-default, 1px) solid var(--ow-annotation-line);border-radius:var(--ow-radius-xs, 6px);width:100%;outline:none;appearance:auto;cursor:pointer;background:var(--ow-annotation-bg-muted);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"prop-select\"]:hover{border-color:var(--ow-annotation-line-strong);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"prop-select\"]:focus{border-color:var(--ow-annotation-primary);}\n/* §7 形状表：999 只留给带状态点/计数的 chip 与真圆件（头像/状态点）。色板是个取色控件，\n   落按钮档 8px（原 50% 圆点是 V1 色板母题）。 */\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"color-swatch\"]{width:20px;height:20px;border-radius:var(--ow-radius-sm, 8px);border: var(--ow-border-width-default, 1px) solid var(--ow-annotation-line);flex-shrink:0;cursor:pointer;position:relative;overflow:hidden;}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"color-swatch\"]:hover{border-color:var(--ow-annotation-line-strong);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"color-swatch\"] input{position:absolute;inset:-4px;width:28px;height:28px;opacity:0;cursor:pointer;}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"spacing\"]{display:flex;gap:3px;flex:1;}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"spacing\"] input{all:initial;font:inherit;font-size:var(--ow-fs-mark-sm, 10px);color:var(--ow-annotation-fg);box-sizing:border-box;height:28px;padding:0 3px;border: var(--ow-border-width-default, 1px) solid var(--ow-annotation-line);border-radius:var(--ow-radius-xs, 6px);width:100%;text-align:center;outline:none;background:var(--ow-annotation-bg-muted);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"spacing\"] input:hover{border-color:var(--ow-annotation-line-strong);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"spacing\"] input:focus{border-color:var(--ow-annotation-primary);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"actions\"]{display:flex;align-items:center;justify-content:space-between;padding:var(--ow-space-2, 8px) var(--ow-space-3, 12px);border-top: var(--ow-border-width-default, 1px) solid var(--ow-annotation-line);flex-shrink:0;}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"cancel\"]{all:initial;cursor:pointer;font:inherit;font-weight:500;font-size:var(--ow-fs-ui, 13px);color:var(--ow-annotation-fg);box-sizing:border-box;height:32px;padding:0 14px;border:none;border-radius:var(--ow-radius-sm, 8px);background:var(--ow-annotation-bg-muted);transition:background var(--ow-dur-1, 120ms) var(--ow-ease-beacon, cubic-bezier(0.22, 1, 0.36, 1));display:inline-flex;align-items:center;justify-content:center;}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"cancel\"]:hover{background:var(--ow-annotation-bg-hover);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"confirm\"]{all:initial;cursor:pointer;font:inherit;font-weight:500;font-size:var(--ow-fs-ui, 13px);box-sizing:border-box;height:32px;padding:0 14px;border:none;border-radius:var(--ow-radius-sm, 8px);background:var(--ow-annotation-primary);color:var(--ow-annotation-on-fill);transition:background var(--ow-dur-1, 120ms) var(--ow-ease-beacon, cubic-bezier(0.22, 1, 0.36, 1));display:inline-flex;align-items:center;justify-content:center;gap:var(--ow-space-1, 4px);}\n[data-slot=\"browser-annotation-popup\"] [data-ow-part=\"confirm\"]:hover{background:var(--ow-annotation-primary-hover);}\n`\n"],"mappings":";AAmBO,IAAM,mCAAmF;AAAA,EAC9F,EAAE,KAAK,eAAe,OAAO,gBAAM,SAAS,IAAI,MAAM,OAAO;AAAA,EAC7D,EAAE,KAAK,SAAS,OAAO,4BAAQ,SAAS,SAAS,MAAM,QAAQ;AAAA,EAC/D,EAAE,KAAK,mBAAmB,OAAO,gBAAM,SAAS,mBAAmB,MAAM,QAAQ;AAAA,EACjF,EAAE,KAAK,WAAW,OAAO,WAAW,SAAS,WAAW,MAAM,UAAU,MAAM,KAAK,KAAK,GAAG,KAAK,EAAE;AAAA,EAClG,EAAE,KAAK,cAAc,OAAO,gBAAM,SAAS,cAAc,MAAM,UAAU,SAAS,CAAC,EAAE;AAAA,EACrF,EAAE,KAAK,YAAY,OAAO,gBAAM,SAAS,YAAY,MAAM,UAAU,MAAM,KAAK;AAAA,EAChF;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS,CAAC,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;AAAA,EACzE;AAAA,EACA,EAAE,KAAK,gBAAgB,OAAO,wCAAU,SAAS,gBAAgB,MAAM,UAAU,MAAM,KAAK;AAAA,EAC5F,EAAE,KAAK,eAAe,OAAO,4BAAQ,SAAS,eAAe,MAAM,QAAQ;AAAA,EAC3E,EAAE,KAAK,eAAe,OAAO,4BAAQ,SAAS,eAAe,MAAM,UAAU,MAAM,KAAK;AAAA,EACxF,EAAE,KAAK,SAAS,OAAO,gBAAM,SAAS,SAAS,MAAM,UAAU,MAAM,KAAK;AAAA,EAC1E,EAAE,KAAK,UAAU,OAAO,gBAAM,SAAS,UAAU,MAAM,UAAU,MAAM,KAAK;AAAA,EAC5E,EAAE,KAAK,WAAW,OAAO,sBAAO,SAAS,WAAW,MAAM,UAAU;AAAA,EACpE,EAAE,KAAK,UAAU,OAAO,sBAAO,SAAS,UAAU,MAAM,UAAU;AACpE;AA6BO,IAAM,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}