@hazem3500/komo 0.9.2 → 0.9.3

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 (30) hide show
  1. package/README.md +3 -3
  2. package/cli/agent.mjs +37 -9
  3. package/cli/design-edit.mjs +269 -0
  4. package/dist/agent-prompt.d.ts +3 -1
  5. package/dist/agent-prompt.js +1 -1
  6. package/dist/{chunk-Y2GRLW4Q.js → chunk-DH22G2S5.js} +1 -1
  7. package/dist/{chunk-HCGLCO3R.js → chunk-SOY4SE7F.js} +1 -1
  8. package/dist/design-comment-MPAF2YAN.js +1 -0
  9. package/dist/design-export-DD2NJI4O.js +1 -0
  10. package/dist/design-export.d.ts +9 -2
  11. package/dist/design-mode-styles.d.ts +1 -1
  12. package/dist/design-mode.js +1 -1
  13. package/dist/design-panel-NU2WUI4D.js +1 -0
  14. package/dist/design-panel-styles.d.ts +1 -1
  15. package/dist/design-system.d.ts +12 -2
  16. package/dist/index.js +1 -1
  17. package/dist/{inline-text-editor-3JLDAUPO.js → inline-text-editor-2J7DVJQY.js} +1 -1
  18. package/dist/node.mjs +1 -1
  19. package/dist/react-props-panel-YJOE56ZS.js +1 -0
  20. package/dist/react-props-panel.d.ts +7 -0
  21. package/dist/react.js +1 -1
  22. package/dist/select-menu-V7RYOZFK.js +1 -0
  23. package/dist/select-menu.d.ts +5 -0
  24. package/dist/setup.js +1 -1
  25. package/package.json +1 -1
  26. package/server/setup-client.txt +53 -58
  27. package/dist/design-comment-MWNQNKWT.js +0 -1
  28. package/dist/design-export-ZHCBPSWY.js +0 -1
  29. package/dist/design-panel-BPVXFERR.js +0 -1
  30. package/dist/react-props-panel-R5XEVATL.js +0 -1
package/dist/design-comment-MPAF2YAN.js ADDED
@@ -0,0 +1 @@
1
+ import"./chunk-I7AUKTXE.js";var e=/^Proposed (.+?) changes? \(preview only\)$/,t={style:"Style changes","inline text":"Text change","design-token":"Token changes","React prop":"Prop changes"};function n(t){return t.split("\n").some(t=>e.test(t))}function r(e){try{return e.startsWith('"')?JSON.parse(e):e}catch{return e}}function a(e,t){let n=/^Shared theme (\S+) \((--[\w-]+)\): (.*?) → (.*?)(?:; preview scope .*)?$/.exec(e);if(n)return{label:n[1],token:n[1],before:n[3],after:n[4],apply:{kind:"variable",property:n[2]}};if(n=/^Element ([\w-]+): (.*?) → (.*?)(?: \[([^\]]+)\])*$/.exec(e),n){let t=/\[([\w.-]+)\]/.exec(e.slice(e.indexOf("→")))?.[1];return{label:n[1],before:n[2],after:n[3],...t&&!t.includes(" ")?{token:t}:{},apply:{kind:"style",property:n[1]}}}if(n=/^- (.+?): (.*) → (.*?)(?: \[([^\]]+)\])?$/.exec(e),!n)return null;let[,a,o,i,s]=n;return"inline text"===t?{label:"Text",before:r(o),after:r(i),apply:{kind:"text",property:"text"}}:"React prop"===t?{label:a,before:r(o),after:r(i),...s&&"custom value"!==s?{token:s}:{}}:{label:a,before:o,after:i,apply:{kind:"style",property:a}}}function o(n){let r=[];for(let o of n.split(/\n{2,}/)){let n=o.split("\n"),i=e.exec(n[0]??"");if(!i){o.trim()&&r.push({text:o.trim()});continue}let s=i[1],l={title:t[s]??`${s[0].toUpperCase()}${s.slice(1)} changes`,changes:[]};for(let e of n.slice(1))if(e.startsWith("Target: "))l.target=e.slice(8);else if(e.startsWith("Component: ")){let[,t,n]=/^(.*?)(?: \((.+)\))?$/.exec(e.slice(11));l.component=t,n&&(l.source=n)}else if(e.startsWith("Source: "))l.source=e.slice(8);else{let t=e.includes("→")?a(e,s):null;t&&t.before!==t.after&&l.changes.push(t)}l.changes.length?r.push(l):r.push({text:o.trim()})}return r}function i(e){let t=o(e),n=t.filter(e=>"changes"in e),r=t.find(e=>"text"in e)?.text,a=n.reduce((e,t)=>e+t.changes.length,0),i=n.find(e=>e.target)?.target,l=`Design change · ${a} ${1===a?"edit":"edits"}${i?` on ${s(i)}`:""}`;return r?`${r}\n${l}`:l}function s(e){return(e.split(">").at(-1)??e).trim().replace(/:nth-of-type\(\d+\)/g,"")||e}var l=/^(#[0-9a-f]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\)|oklch\([^)]*\))$/i,p=new Map,d=new Set,c=new Map;function f(e){let t=c.get(e);t&&(clearTimeout(t.timer),c.delete(e),t.finish())}function g(e,t,n,r=!1){f(e);let a=[],o=[],i=[];for(let e of t){let t=n(e.target);for(let n of e.changes)if(n.apply&&"(unset)"!==n.after)if("variable"===n.apply.kind){let e=document.documentElement,t=e.style.getPropertyValue(n.apply.property);e.style.setProperty(n.apply.property,n.after),a.push(()=>t?e.style.setProperty(n.apply.property,t):e.style.removeProperty(n.apply.property))}else if(t instanceof HTMLElement&&"style"===n.apply.kind){let e=t.style.getPropertyValue(n.apply.property),a=t.style.getPropertyPriority(n.apply.property),s=n.apply.property,l=()=>"(unset)"!==n.before&&(t.style.setProperty(s,n.before,"important"),!0);r&&l()&&getComputedStyle(t).getPropertyValue(s),t.style.setProperty(s,n.after,"important"),i.push(l),o.push(()=>e?t.style.setProperty(n.apply.property,e,a):t.style.removeProperty(n.apply.property))}else if(t instanceof HTMLElement&&"text"===n.apply.kind&&!t.childElementCount){let e=t.firstChild;if(e instanceof Text){let t=e.data;e.data=n.after,a.push(()=>{e.data=t})}}}return p.set(e,{restore:a,restoreStyles:o,pinBefore:i}),a.length+o.length>0}var m,u=["color","background-color","border-color","outline-color","fill","stroke","box-shadow","text-decoration-color"],h="cubic-bezier(.22, 1, .36, 1)";function y(e,t){let n=new Set;for(let r of e)for(let e of r.changes)if("style"===e.apply?.kind)n.add(e.apply.property);else if("variable"===e.apply?.kind)u.forEach(e=>n.add(e));else if("text"===e.apply?.kind){let e=t(r.target);e instanceof HTMLElement&&e.animate?.([{opacity:1},{opacity:.25,offset:.4},{opacity:1}],{duration:360,easing:h})}if(!n.size)return;m&&(clearTimeout(m.timer),m.style.remove());let r=document.createElement("style");r.textContent=`*, *::before, *::after { transition-property: ${[...n].join(", ")} !important; transition-duration: 420ms !important; transition-timing-function: ${h} !important; transition-delay: 0s !important; }`,document.head.append(r),m={style:r,timer:setTimeout(()=>{r.remove(),m=void 0},480)}}function x(e,t=!1){f(e);let n=p.get(e);if(!n)return;p.delete(e);for(let e of n.restore.reverse())e();let r=()=>{for(let e of n.restoreStyles.reverse())e()};if(!t||!n.pinBefore.length)return r();for(let e of n.pinBefore)e();c.set(e,{finish:r,timer:setTimeout(()=>f(e),480)})}function b(e){return p.has(e)||c.has(e)}function w(e=new Set){e.has("draft")||($=void 0);for(let t of[...c.keys()])e.has(t)||f(t);for(let t of[...p.keys()])e.has(t)||x(t)}function v(e){return"text"===e.apply?.kind||!(e.apply||e.token||l.test(e.before)||l.test(e.after))&&(/\s/.test(e.before+e.after)||e.before.length+e.after.length>32)}function k(e,t){let n=0;for(;n<e.length&&n<t.length&&e[n]===t[n];)n++;let r=0;for(;r<e.length-n&&r<t.length-n&&e[e.length-1-r]===t[t.length-1-r];)r++;for(;n>0&&!/\s/.test(e[n-1]);)n--;for(;r>0&&!/\s/.test(e[e.length-r]);)r--;let a=e.slice(0,n),o=e.slice(e.length-r),i=document.createElement("p");i.className="design-diff",i.append(a.length>48?`…${a.slice(-40)}`:a);let s=e.slice(n,e.length-r),l=t.slice(n,t.length-r);return s&&i.append(Object.assign(document.createElement("del"),{textContent:s})),l&&i.append(Object.assign(document.createElement("ins"),{textContent:l})),i.append(o.length>48?`${o.slice(0,40)}…`:o),i}function E(e,t){let n=document.createElement("span");n.className="design-value";let r=/^var\((--[\w-]+)\)$/.exec(e);if(t&&r)return n.append(Object.assign(document.createElement("span"),{className:"design-token",textContent:t})),n;if(l.test(e)){let t=document.createElement("span");t.className="design-swatch",t.style.background=e,n.append(t)}return n.append(e),n}function C(e,t,n){let r=o(t),a=r.filter(e=>"changes"in e),i=document.createElement("div");i.className="design-comment",i.append(Object.assign(document.createElement("style"),{textContent:'\n.design-comment { display: grid; gap: 8px; margin: 2px 0 6px; }\n.design-note { margin: 0; white-space: pre-wrap; }\n.design-card { border-radius: 10px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff0d; overflow: hidden; font-size: 12px; }\n.design-card-head { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 8px 7px 12px; }\n.design-card-label { display: grid; min-width: 0; gap: 1px; }\n.design-card-title { font-weight: 600; color: #eee; white-space: nowrap; }\n.design-card-target { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a8a8a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }\n.design-toggle { margin-left: auto; display: inline-flex; padding: 2px; border-radius: 7px; background: #ffffff0a; flex: none; }\n.design-toggle button { border: 0; padding: 0 8px; height: 22px; border-radius: 5px; font: inherit; font-size: 11px; color: #9a9a9a; background: none; cursor: pointer; }\n.design-toggle button[aria-pressed="true"] { color: #fff; background: #ffffff1a; }\n.design-rows { display: grid; border-top: 1px solid #ffffff0a; }\n.design-row { display: grid; grid-template-columns: minmax(64px, 30%) minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 12px; }\n.design-row + .design-row { border-top: 1px solid #ffffff06; }\n.design-row[hidden] { display: none; }\n.design-row-prose { grid-template-columns: 1fr; gap: 3px; }\n.design-diff { margin: 0; line-height: 1.5; color: #ddd; overflow-wrap: anywhere; }\n.design-diff del, .design-diff ins { border-radius: 3px; padding: 0 2px; }\n.design-diff del { color: #f6a19a; background: #f28b8224; text-decoration-color: #f6a19a99; }\n.design-diff ins { color: #b9e6ad; background: #8fd69424; text-decoration: none; }\n.design-prop { color: #9a9a9a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.design-values { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; color: #eee; }\n.design-before { color: #858585; text-decoration: line-through; text-decoration-color: #85858599; }\n.design-arrow { color: #666; }\n.design-value { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }\n.design-swatch { width: 12px; height: 12px; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1px #ffffff26; }\n.design-token { padding: 1px 6px; border-radius: 5px; color: var(--accent, #bda6ef); background: color-mix(in srgb, var(--accent, #bda6ef) 14%, transparent); }\n.design-more { border: 0; width: 100%; padding: 7px 12px; text-align: left; font: inherit; font-size: 11px; color: #9a9a9a; background: none; border-top: 1px solid #ffffff06; cursor: pointer; }\n.design-more:hover, .design-toggle button:hover { color: #fff; }\n.design-source { padding: 0 12px 8px; color: #777; font-size: 11px; }\n[data-compact] { gap: 6px; margin: 11px 0 0; }\n[data-compact] .design-card-head, [data-compact] .design-row, [data-compact] > .design-source { min-height: 0; padding: 4px 10px; }\n[data-compact]:hover > .design-source { color: #eee; text-decoration: underline; }\n'}));let l=!!n.compact;l&&(i.dataset.compact="");let c=l?3:1/0,f=0,m=a.some(e=>e.changes.some(e=>e.apply)),u=[],h=()=>{let e=p.has(n.key);for(let t of u)t.querySelectorAll("button").forEach((t,n)=>t.setAttribute("aria-pressed",String(1===n?e:!e)))};for(let e of r){if("text"in e){let t=document.createElement("p");t.className="design-note",n.note(t,e.text),i.append(t);continue}if(c<=0){f+=e.changes.length;continue}let t=document.createElement("section");t.className="design-card";let r=document.createElement("div");r.className="design-card-head";let o=document.createElement("div");o.className="design-card-label",o.append(Object.assign(document.createElement("span"),{className:"design-card-title",textContent:e.title}));let b=e.target?s(e.target):e.component;if(b){let t=Object.assign(document.createElement("span"),{className:"design-card-target",textContent:b});e.target&&(t.title=e.target),o.append(t)}if(r.append(o),m&&!u.length&&e.changes.some(e=>e.apply)){let e=document.createElement("div");e.className="design-toggle",e.setAttribute("role","group"),e.setAttribute("aria-label","Preview on page");for(let[t,r]of["Before","After"].entries()){let o=Object.assign(document.createElement("button"),{type:"button",textContent:r,title:`${r} · ${t?"→":"←"} or B`});o.addEventListener("click",()=>{let e=1===t;if(e===p.has(n.key))return;let r=n.resolve(a.find(e=>e.target)?.target);e&&r?.scrollIntoView({block:"center",behavior:"smooth"});let o="function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches;o||y(a,n.resolve),e?g(n.key,a,n.resolve,!o):x(n.key,!o),n.onSwitch&&setTimeout(n.onSwitch,o?0:480),h()}),e.append(o)}u.push(e);for(let e of d)e.isConnected||d.delete(e);d.add(e),r.append(e)}t.append(r);let w=document.createElement("div");w.className="design-rows";let C=4;e.changes.forEach((t,n)=>{if(c<=0)return void f++;l&&c--;let r=document.createElement("div");r.className="design-row",r.hidden=!l&&n>=C&&e.changes.length>C+1;let a=Object.assign(document.createElement("span"),{className:"design-prop",textContent:t.label});if(a.title=t.label,v(t))return r.classList.add("design-row-prose"),r.append(a,k(t.before,t.after)),void w.append(r);let o=document.createElement("span");o.className="design-values";let i=E(t.before);i.classList.add("design-before"),o.append(i,Object.assign(document.createElement("span"),{className:"design-arrow",textContent:"→"}),E(t.after,t.token)),r.append(a,o),w.append(r)}),t.append(w);let $=w.querySelectorAll("[hidden]").length;if($){let e=Object.assign(document.createElement("button"),{type:"button",className:"design-more",textContent:`Show ${$} more`});e.addEventListener("click",()=>{w.querySelectorAll("[hidden]").forEach(e=>e.hidden=!1),e.remove()}),t.append(e)}e.source&&!l&&t.append(Object.assign(document.createElement("div"),{className:"design-source",textContent:e.source})),i.append(t)}f&&i.append(Object.assign(document.createElement("span"),{className:"design-source",textContent:`+${f} more`})),h(),e.replaceChildren(i),u.length&&(N||(N=!0,document.addEventListener("keydown",e=>{let t="ArrowLeft"===e.key?0:"ArrowRight"===e.key?1:"b"===e.key.toLowerCase()?-1:null;if(null===t||e.metaKey||e.ctrlKey||e.altKey||e.shiftKey||e.isComposing)return;let n=e.composedPath()[0];if(n instanceof HTMLElement&&(n.isContentEditable||n.matches("input, textarea, select")))return;let r=[...d].reverse().find(e=>e.isConnected),a=r?.querySelectorAll("button"),o=-1===t?r?.querySelector('button[aria-pressed="false"]'):a?.[t];o&&(e.preventDefault(),o.click())})))}var $,N=!1;function S(e,t,n){$!==t&&(x("draft"),$=t,g("draft",o(t).filter(e=>"changes"in e),n)),C(e,t,{key:"draft",resolve:n,note:(e,t)=>e.append(t)})}export{n as isDesignComment,b as isPreviewing,o as parseDesignComment,C as renderDesignComment,S as renderDraftProposal,w as resetDesignPreviews,s as shortTarget,i as summarizeDesignComment};
package/dist/design-export-DD2NJI4O.js ADDED
@@ -0,0 +1 @@
1
+ import{i as e}from"./chunk-62YUEO4G.js";import"./chunk-I7AUKTXE.js";function t(e){let t=[];for(let n=e;n;n=n.parentElement){let i=n.id&&!/^radix-|^:r|_r_|«r/.test(n.id)?`#${CSS.escape(n.id)}`:"";if(i&&1===document.querySelectorAll(i).length)return[i,...t].join(" > ");if(n===document.body||!n.parentElement)return[n.tagName.toLowerCase(),...t].join(" > ");let o=n===e?[...n.classList].slice(0,2).map(e=>`.${CSS.escape(e)}`).join(""):"",r=[...n.parentElement.children].filter(e=>e.tagName===n.tagName).indexOf(n)+1;t.unshift(`${n.tagName.toLowerCase()}${o}:nth-of-type(${r})`)}return t.join(" > ")}function n(e,n){return`${t(e)} {\n${[...n].map(([e,t])=>` ${e}: ${t};`).join("\n")}\n}`}function i(e,n,i,o,r,s=[]){let a=[...n??[]].filter(([e])=>!o?.has(e)).map(([e,t])=>`- ${e}: ${i(e)||"(unset)"} → ${t}`),l=[a.length?`Proposed style changes (preview only)\nTarget: ${t(e)}\n${a.join("\n")}`:"",...r].filter(e=>!!e);if(l[0]&&s.length){let e=l[0].split("\n"),t=s.filter(t=>!t.startsWith("Component: ")||!e.some(e=>e.startsWith("Component: ")));e.splice(e[1]?.startsWith("Target: ")?2:1,0,...t),l[0]=e.join("\n")}return l.join("\n\n")||void 0}function o(t,n,i,o){if(i.aborted)return;let r=e("div","morphing-menu__tooltip sidebar-tooltip");r.setAttribute("aria-hidden","true"),n.append(r);let s=0,a=()=>{clearTimeout(s),delete r.dataset.open},l=e=>{let t=e.target.closest?.("[data-tip]");if(!t||"focusin"===e.type&&!t.matches(":focus-visible"))return a();clearTimeout(s),s=window.setTimeout(()=>{if(!t.isConnected)return;let e=t.getBoundingClientRect();r.textContent=t.dataset.tip??"";let n=r.offsetWidth/2;r.style.left=`${Math.max(8+n,Math.min(document.documentElement.clientWidth-8-n,e.left+e.width/2))}px`,r.style.top=e.top-8-r.offsetHeight+"px",r.dataset.open="true"},r.dataset.open?0:400)};t.addEventListener("pointerover",l,{signal:i}),t.addEventListener("focusin",l,{signal:i});for(let e of["pointerleave","pointerdown","focusout"])t.addEventListener(e,a,{signal:i});i.addEventListener("abort",()=>{a(),r.remove()}),("focusin"===o.type||t.matches(":hover"))&&l(o)}export{t as cssSelector,n as cssText,i as designProposal,o as footerTips};
package/dist/design-export.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- /** On-demand formatting for Design mode's Copy CSS and comment proposal actions. */
1
+ /** On-demand helpers for Design mode's footer: Copy CSS, comment proposals and tool tooltips. */
2
2
  /**
3
3
  * A selector that matches exactly `element`: a path of :nth-of-type steps from
4
4
  * body or the nearest unique, non-generated id. Utility classes alone match
@@ -9,5 +9,12 @@ export declare function cssText(element: Element, values: Map<string, string>):
9
9
  /**
10
10
  * One proposal for everything previewed on the element. Token-bound properties
11
11
  * are described by the token section, so they are not repeated as raw CSS.
12
+ * `context` lines (theme, component, props) join the first section, after its
13
+ * header and target; a section's own Component line wins over the context's.
12
14
  */
13
- export declare function designProposal(element: Element, values: Map<string, string> | undefined, before: (property: string) => string | undefined, bound: Set<string> | undefined, sections: Array<string | undefined>): string | undefined;
15
+ export declare function designProposal(element: Element, values: Map<string, string> | undefined, before: (property: string) => string | undefined, bound: Set<string> | undefined, sections: Array<string | undefined>, context?: string[]): string | undefined;
16
+ /**
17
+ * Footer controls use the toolbar's tooltip surface, like the Comments header.
18
+ * Loaded on the bar's first hover or focus, which `first` replays.
19
+ */
20
+ export declare function footerTips(bar: HTMLElement, root: ShadowRoot, signal: AbortSignal, first: Event): void;
package/dist/design-mode-styles.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const designModeStyles = "\n/* Design mode is deliberately an in-page preview: all controls remain in the\n widget shadow root and never become site styles. */\n.design-outline {\n position:fixed; z-index:1; pointer-events:none; box-sizing:border-box;\n border:2px solid var(--accent,#bda6ef); border-radius:8px;\n box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#bda6ef) 22%,transparent), 0 2px 12px #0003;\n transition:all 80ms ease;\n}\n.design-outline[data-kind=\"hover\"] { border-style:dashed; opacity:.8; }\n/* The inspector replaces the Comments view inside Komo's shared sidebar surface. */\n.design-inspector {\n position:absolute; inset:0; z-index:9;\n display:flex; flex-direction:column; overflow:hidden; color:#e9e6e1;\n background:#0d0d0d; border-radius:inherit;\n font:12px/1.4 -apple-system,BlinkMacSystemFont,\"Inter\",\"Segoe UI\",sans-serif; color-scheme:dark;\n opacity:0; translate:0 6px; pointer-events:none;\n transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out);\n}\n.design-inspector[hidden] { display:none; }\n/* Frame docks the inspector in the sidebar column beside the scaled page. */\n:host([data-sidebar=\"background\"]) .design-inspector { position:fixed; inset:0 0 0 auto; width:380px; border-radius:0; }\n/* The floating inspector drags by its heading, like the comment sidebar's grip. */\n:host([data-sidebar=\"edge\"]) .design-inspector__heading { cursor:grab; touch-action:none; padding-top:22px; }\n/* The sidebar's own grip stays visible above the inspector, as it is above Comments. */\n:host(.design-active[data-sidebar=\"edge\"]) .edge-sidebar .edge-sidebar-grip { z-index:10; opacity:1 !important; }\n.design-inspector[data-state=\"active\"] { opacity:1; translate:0 0; pointer-events:auto; }\n.design-inspector[data-state=\"closing\"] { opacity:0; translate:0 4px; }\n.design-inspector button { cursor:pointer; }\n/* Header and icon buttons match the Comments panel's title and icons, on the inspector's 12px gutter. */\n.design-inspector__heading { flex:none; display:flex; align-items:center; gap:4px; min-height:54px; padding:0 8px 0 12px; }\n.design-inspector__identity { min-width:0; flex:1; display:flex; align-items:baseline; gap:6px; white-space:nowrap; }\n.design-inspector__parent { flex:none; max-width:35%; overflow:hidden; text-overflow:ellipsis; margin-left:-6px; padding:2px 6px; border-radius:7px; color:#909090; font-size:15px; font-weight:500; }\n.design-inspector__parent::after { content:'/'; margin-left:6px; color:#555; }\n.design-inspector__parent:hover { color:#eee; background:#161616; }\n.design-inspector__target { flex:none; max-width:60%; overflow:hidden; text-overflow:ellipsis; color:#fff; font-weight:600; font-size:15px; }\n.design-inspector__heading small { min-width:0; overflow:hidden; text-overflow:ellipsis; color:#909090; font-size:13px; }\n.design-inspector__close,.design-inspector__fold { display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:7px; color:#909090; }\n.design-inspector__close svg,.design-inspector__fold svg { width:16px; height:16px; }\n.design-inspector__close:hover,.design-inspector__fold:hover { background:#161616; color:#eee; }\n.design-inspector__fold { display:none; }\n.design-inspector__fold svg { transition:rotate .25s var(--ease-smooth-out); }\n.design-inspector[data-folded] .design-inspector__fold svg { rotate:180deg; }\n.design-inspector[data-folded] > :not(.design-inspector__heading) { display:none; }\n.design-inspector[data-folded] .design-inspector__heading { border:0; }\n.design-inspector__controls { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }\n/* Empty state: the floating sidebar fits a compact, centered hint instead of an empty column. */\n:host([data-sidebar=\"edge\"]) .edge-sidebar[data-design-empty]:not([data-morphing]) { height:auto !important; }\n:host([data-sidebar=\"edge\"]) [data-design-empty] > .design-inspector { position:relative; inset:auto; }\n/* The hidden toolbar docked in the sidebar would otherwise add its height. */\n:host([data-sidebar=\"edge\"]) [data-design-empty]:not([data-morphing]) > .toolbar { position:absolute; }\n.design-inspector[data-empty] .design-inspector__heading { border:0; }\n.design-inspector[data-empty] .design-inspector__identity { visibility:hidden; }\n.design-inspector[data-empty] .design-inspector__controls { display:grid; place-items:center; }\n.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]) { display:none; }\n.design-inspector__empty { display:flex; flex-direction:column; align-items:center; gap:4px; padding:0 24px 28px; color:#898680; font-size:11px; text-align:center; }\n.design-inspector__empty > svg { box-sizing:content-box; width:20px; height:20px; margin-bottom:8px; padding:8px; border-radius:10px; background:#ffffff0a; color:#77736f; }\n.design-inspector__empty strong { color:#e9e6e1; font-size:12px; font-weight:600; }\n.design-inspector__empty ul { display:grid; gap:6px; margin:8px 0 0; padding:0; list-style:none; }\n.design-inspector__empty kbd { display:inline-block; min-width:8px; padding:0 5px; border-radius:4px; background:#ffffff0f; box-shadow:inset 0 0 0 1px #ffffff12,inset 0 -1px 0 #ffffff12; color:#c9c5bf; font:inherit; font-size:10px; font-weight:500; line-height:17px; }\n/* One slim bar: a quiet Comment action, plus a change count and tools once something changed. */\n.design-inspector__bar { flex:none; display:flex; align-items:center; gap:8px; min-height:56px; padding:0 12px; border-top:1px solid #ffffff0d; color:#909090; font-size:12px; }\n.design-inspector__count { white-space:nowrap; font-variant-numeric:tabular-nums; }\n/* Before/After: the same segmented control as design comment cards. */\n.design-inspector__compare { display:inline-flex; flex:none; padding:2px; border-radius:7px; background:#ffffff0a; }\n.design-inspector__compare[hidden],.design-inspector__bar[data-message] .design-inspector__compare { display:none; }\n.design-inspector__compare button { height:22px; padding:0 8px; border-radius:5px; color:#9a9a9a; font:inherit; font-size:11px; }\n.design-inspector__compare button:hover { color:#fff; }\n.design-inspector__compare button[aria-pressed=\"true\"] { color:#fff; background:#ffffff1a; }\n.design-inspector__status { display:none; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; animation:design-status .2s var(--ease-smooth-out); }\n.design-inspector__bar[data-message] .design-inspector__status { display:block; }\n.design-inspector__bar[data-message] .design-inspector__count,.design-inspector__bar:not([data-changes]) .design-inspector__tool { display:none; }\n.design-inspector__actions { display:flex; align-items:center; gap:2px; margin-left:auto; }\n.design-inspector__actions button { display:grid; place-items:center; min-width:28px; height:28px; border-radius:7px; color:#909090; }\n.design-inspector__actions button:hover:not(:disabled) { background:#161616; color:#eee; }\n.design-inspector__actions button:disabled { cursor:default; opacity:.35; }\n.design-inspector__actions svg { width:16px; height:16px; }\n/* Comment is komo's primary action, as on the Comments panel. */\n.design-inspector__actions button:last-child { min-height:34px; margin-left:6px; padding:0 14px; border-radius:8px; background:var(--accent,#bda6ef); color:#211b2d; font-size:12px; font-weight:500; }\n.design-inspector__actions button:last-child:hover:not(:disabled) { background:var(--accent,#bda6ef); color:#211b2d; filter:brightness(1.08); }\n.design-inspector :focus-visible { outline:2px solid var(--accent,#bda6ef); outline-offset:2px; }\n@keyframes design-status { from { opacity:0; translate:0 2px; } }\n@media (max-width:520px) {\n /* A content-sized bottom sheet; folding it leaves only the heading over the page. */\n .design-inspector {\n position:fixed; inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));\n max-height:min(58dvh,560px);\n border-radius:24px; box-shadow:0 -1px 0 #ffffff24,0 16px 48px #0005;\n transition:translate 320ms cubic-bezier(.22,1,.36,1),scale 320ms cubic-bezier(.22,1,.36,1),opacity 150ms ease;\n transform-origin:bottom center;\n }\n .design-inspector__heading { height:52px; padding-left:18px; }\n .design-inspector__fold { display:grid; }\n .design-inspector[data-empty] .design-inspector__identity { visibility:visible; }\n .design-field { height:34px; }\n}\n@media (prefers-reduced-motion:reduce) {\n .design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status { transition:none; animation:none; }\n}\n";
1
+ export declare const designModeStyles = "\n/* Design mode is deliberately an in-page preview: all controls remain in the\n widget shadow root and never become site styles. */\n.design-outline {\n position:fixed; z-index:1; pointer-events:none; box-sizing:border-box;\n border:2px solid var(--accent,#bda6ef); border-radius:8px;\n box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#bda6ef) 22%,transparent), 0 2px 12px #0003;\n transition:all 80ms ease;\n}\n.design-outline[data-kind=\"hover\"] { border-style:dashed; opacity:.8; }\n/* The inspector replaces the Comments view inside Komo's shared sidebar surface. */\n.design-inspector {\n position:absolute; inset:0; z-index:9;\n display:flex; flex-direction:column; overflow:hidden; color:#e9e6e1;\n background:#0d0d0d; border-radius:inherit;\n font:12px/1.4 -apple-system,BlinkMacSystemFont,\"Inter\",\"Segoe UI\",sans-serif; color-scheme:dark;\n opacity:0; translate:0 6px; pointer-events:none;\n transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out);\n}\n.design-inspector[hidden] { display:none; }\n/* Frame docks the inspector in the sidebar column beside the scaled page. */\n:host([data-sidebar=\"background\"]) .design-inspector { position:fixed; inset:0 0 0 auto; width:380px; border-radius:0; }\n/* The floating inspector drags by its heading, like the comment sidebar's grip. */\n:host([data-sidebar=\"edge\"]) .design-inspector__heading { cursor:grab; touch-action:none; padding-top:22px; }\n/* The sidebar's own grip stays visible above the inspector, as it is above Comments. */\n:host(.design-active[data-sidebar=\"edge\"]) .edge-sidebar .edge-sidebar-grip { z-index:10; opacity:1 !important; }\n.design-inspector[data-state=\"active\"] { opacity:1; translate:0 0; pointer-events:auto; }\n.design-inspector[data-state=\"closing\"] { opacity:0; translate:0 4px; }\n.design-inspector button { cursor:pointer; }\n/* Header and icon buttons match the Comments panel's title and icons, on the inspector's 12px gutter. */\n.design-inspector__heading { flex:none; display:flex; align-items:center; gap:4px; min-height:54px; padding:0 8px 0 12px; }\n.design-inspector__identity { min-width:0; flex:1; display:flex; align-items:baseline; gap:6px; white-space:nowrap; }\n.design-inspector__parent { flex:none; max-width:35%; overflow:hidden; text-overflow:ellipsis; margin-left:-6px; padding:2px 6px; border-radius:7px; color:#909090; font-size:15px; font-weight:500; }\n.design-inspector__parent::after { content:'/'; margin-left:6px; color:#555; }\n.design-inspector__target { flex:none; max-width:60%; overflow:hidden; text-overflow:ellipsis; color:#fff; font-weight:600; font-size:15px; }\n.design-inspector__heading small { min-width:0; overflow:hidden; text-overflow:ellipsis; color:#909090; font-size:13px; }\n.design-inspector__close,.design-inspector__fold,.design-inspector__actions button { display:grid; place-items:center; min-width:28px; height:28px; border-radius:7px; color:#909090; }\n.design-inspector__close,.design-inspector__fold { flex:none; }\n.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg { width:16px; height:16px; }\n.design-inspector__parent:hover,.design-inspector__close:hover,.design-inspector__fold:hover,.design-inspector__actions button:hover:not(:disabled) { background:#161616; color:#eee; }\n.design-inspector__fold { display:none; }\n.design-inspector__fold svg { transition:rotate .25s var(--ease-smooth-out); }\n.design-inspector[data-folded] .design-inspector__fold svg { rotate:180deg; }\n.design-inspector[data-folded] > :not(.design-inspector__heading) { display:none; }\n.design-inspector__controls { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }\n/* Empty state: the floating sidebar fits a compact, centered hint instead of an empty column. */\n:host([data-sidebar=\"edge\"]) .edge-sidebar[data-design-empty]:not([data-morphing]) { height:auto !important; }\n:host([data-sidebar=\"edge\"]) [data-design-empty] > .design-inspector { position:relative; inset:auto; }\n/* The hidden toolbar docked in the sidebar would otherwise add its height. */\n:host([data-sidebar=\"edge\"]) [data-design-empty]:not([data-morphing]) > .toolbar { position:absolute; }\n.design-inspector[data-empty] .design-inspector__identity { visibility:hidden; }\n.design-inspector[data-empty] .design-inspector__controls { display:grid; place-items:center; }\n.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]) { display:none; }\n.design-inspector__empty { display:flex; flex-direction:column; align-items:center; gap:4px; padding:0 24px 28px; color:#898680; font-size:11px; text-align:center; }\n.design-inspector__empty > svg { box-sizing:content-box; width:20px; height:20px; margin-bottom:8px; padding:8px; border-radius:10px; background:#ffffff0a; color:#77736f; }\n.design-inspector__empty strong { color:#e9e6e1; font-size:12px; font-weight:600; }\n.design-inspector__empty ul { display:grid; gap:6px; margin:8px 0 0; padding:0; list-style:none; }\n.design-inspector__empty kbd { display:inline-block; min-width:8px; padding:0 5px; border-radius:4px; background:#ffffff0f; box-shadow:inset 0 0 0 1px #ffffff12,inset 0 -1px 0 #ffffff12; color:#c9c5bf; font:inherit; font-size:10px; font-weight:500; line-height:17px; }\n/* One slim bar: a quiet Comment action, plus a change count and tools once something changed. */\n.design-inspector__bar { flex:none; display:flex; align-items:center; gap:8px; min-height:56px; padding:0 12px; border-top:1px solid #ffffff0d; color:#909090; font-size:12px; }\n.design-inspector__count { white-space:nowrap; font-variant-numeric:tabular-nums; }\n/* Before/After: the same segmented control as design comment cards. */\n.design-inspector__compare { display:inline-flex; flex:none; padding:2px; border-radius:7px; background:#ffffff0a; }\n.design-inspector__compare[hidden],.design-inspector__bar[data-message] .design-inspector__compare { display:none; }\n.design-inspector__compare button { height:22px; padding:0 8px; border-radius:5px; color:#9a9a9a; font:inherit; font-size:11px; }\n.design-inspector__compare button:hover { color:#fff; }\n.design-inspector__compare button[aria-pressed=\"true\"] { color:#fff; background:#ffffff1a; }\n.design-inspector__status { display:none; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; animation:design-status .2s var(--ease-smooth-out); }\n.design-inspector__bar[data-message] .design-inspector__status { display:block; }\n.design-inspector__bar[data-message] .design-inspector__count,.design-inspector__bar:not([data-changes]) .design-inspector__tool { display:none; }\n.design-inspector__actions { display:flex; align-items:center; gap:2px; margin-left:auto; }\n.design-inspector__actions button:disabled { cursor:default; opacity:.35; }\n/* Comment is komo's primary action, as on the Comments panel. */\n.design-inspector__actions button:last-child { min-height:34px; margin-left:6px; padding:0 14px; border-radius:8px; background:var(--accent,#bda6ef); color:#211b2d; font-size:12px; font-weight:500; }\n.design-inspector__actions button:last-child:hover:not(:disabled) { background:var(--accent,#bda6ef); color:#211b2d; filter:brightness(1.08); }\n.design-inspector :focus-visible { outline:2px solid var(--accent,#bda6ef); outline-offset:2px; }\n@keyframes design-status { from { opacity:0; translate:0 2px; } }\n@media (max-width:520px) {\n /* A content-sized bottom sheet; folding it leaves only the heading over the page. */\n .design-inspector {\n position:fixed; inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));\n max-height:min(58dvh,560px);\n border-radius:24px; box-shadow:0 -1px 0 #ffffff24,0 16px 48px #0005;\n transition:translate 320ms cubic-bezier(.22,1,.36,1),scale 320ms cubic-bezier(.22,1,.36,1),opacity 150ms ease;\n transform-origin:bottom center;\n }\n .design-inspector__heading { height:52px; padding-left:18px; }\n .design-inspector__fold { display:grid; }\n .design-inspector[data-empty] .design-inspector__identity { visibility:visible; }\n .design-inspector .design-field { height:34px; }\n}\n@media (prefers-reduced-motion:reduce) {\n .design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status { transition:none; animation:none; }\n}\n";
package/dist/design-mode.js CHANGED
@@ -1 +1 @@
1
- import{j as e}from"./chunk-62YUEO4G.js";import"./chunk-I7AUKTXE.js";var t=e=>`<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="${e}"/></svg>`;function n(n){let i=document.createElement("style");i.textContent='.design-outline{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;border:2px solid var(--accent,#bda6ef);border-radius:8px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#bda6ef) 22%,transparent),0 2px 12px #0003;transition:all 80ms ease}.design-outline[data-kind=hover]{border-style:dashed;opacity:.8}.design-inspector{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;overflow:hidden;color:#e9e6e1;background:#0d0d0d;border-radius:inherit;font:12px/1.4 -apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;color-scheme:dark;opacity:0;translate:0 6px;pointer-events:none;transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out)}.design-inspector[hidden]{display:none}:host([data-sidebar="background"]) .design-inspector{position:fixed;inset:0 0 0 auto;width:380px;border-radius:0}:host([data-sidebar="edge"]) .design-inspector__heading{cursor:grab;touch-action:none;padding-top:22px}:host(.design-active[data-sidebar="edge"]) .edge-sidebar .edge-sidebar-grip{z-index:10;opacity:1!important}.design-inspector[data-state=active]{opacity:1;translate:0 0;pointer-events:auto}.design-inspector[data-state=closing]{opacity:0;translate:0 4px}.design-inspector button{cursor:pointer}.design-inspector__heading{flex:none;display:flex;align-items:center;gap:4px;min-height:54px;padding:0 8px 0 12px}.design-inspector__identity{min-width:0;flex:1;display:flex;align-items:baseline;gap:6px;white-space:nowrap}.design-inspector__parent{flex:none;max-width:35%;overflow:hidden;text-overflow:ellipsis;margin-left:-6px;padding:2px 6px;border-radius:7px;color:#909090;font-size:15px;font-weight:500}.design-inspector__parent:after{content:"/";margin-left:6px;color:#555}.design-inspector__parent:hover{color:#eee;background:#161616}.design-inspector__target{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:600;font-size:15px}.design-inspector__heading small{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#909090;font-size:13px}.design-inspector__close,.design-inspector__fold{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:7px;color:#909090}.design-inspector__close svg,.design-inspector__fold svg{width:16px;height:16px}.design-inspector__close:hover,.design-inspector__fold:hover{background:#161616;color:#eee}.design-inspector__fold{display:none}.design-inspector__fold svg{transition:rotate .25s var(--ease-smooth-out)}.design-inspector[data-folded] .design-inspector__fold svg{rotate:180deg}.design-inspector[data-folded]>:not(.design-inspector__heading){display:none}.design-inspector[data-folded] .design-inspector__heading{border:0}.design-inspector__controls{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}:host([data-sidebar="edge"]) .edge-sidebar[data-design-empty]:not([data-morphing]){height:auto!important}:host([data-sidebar="edge"]) [data-design-empty]>.design-inspector{position:relative;inset:auto}:host([data-sidebar="edge"]) [data-design-empty]:not([data-morphing])>.toolbar{position:absolute}.design-inspector[data-empty] .design-inspector__heading{border:0}.design-inspector[data-empty] .design-inspector__identity{visibility:hidden}.design-inspector[data-empty] .design-inspector__controls{display:grid;place-items:center}.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]){display:none}.design-inspector__empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 24px 28px;color:#898680;font-size:11px;text-align:center}.design-inspector__empty>svg{box-sizing:content-box;width:20px;height:20px;margin-bottom:8px;padding:8px;border-radius:10px;background:#ffffff0a;color:#77736f}.design-inspector__empty strong{color:#e9e6e1;font-size:12px;font-weight:600}.design-inspector__empty ul{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}.design-inspector__empty kbd{display:inline-block;min-width:8px;padding:0 5px;border-radius:4px;background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff12,inset 0 -1px #ffffff12;color:#c9c5bf;font:inherit;font-size:10px;font-weight:500;line-height:17px}.design-inspector__bar{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 12px;border-top:1px solid #ffffff0d;color:#909090;font-size:12px}.design-inspector__count{white-space:nowrap;font-variant-numeric:tabular-nums}.design-inspector__compare{display:inline-flex;flex:none;padding:2px;border-radius:7px;background:#ffffff0a}.design-inspector__compare[hidden],.design-inspector__bar[data-message] .design-inspector__compare{display:none}.design-inspector__compare button{height:22px;padding:0 8px;border-radius:5px;color:#9a9a9a;font:inherit;font-size:11px}.design-inspector__compare button:hover{color:#fff}.design-inspector__compare button[aria-pressed=true]{color:#fff;background:#ffffff1a}.design-inspector__status{display:none;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:design-status .2s var(--ease-smooth-out)}.design-inspector__bar[data-message] .design-inspector__status{display:block}.design-inspector__bar[data-message] .design-inspector__count,.design-inspector__bar:not([data-changes]) .design-inspector__tool{display:none}.design-inspector__actions{display:flex;align-items:center;gap:2px;margin-left:auto}.design-inspector__actions button{display:grid;place-items:center;min-width:28px;height:28px;border-radius:7px;color:#909090}.design-inspector__actions button:hover:not(:disabled){background:#161616;color:#eee}.design-inspector__actions button:disabled{cursor:default;opacity:.35}.design-inspector__actions svg{width:16px;height:16px}.design-inspector__actions button:last-child{min-height:34px;margin-left:6px;padding:0 14px;border-radius:8px;background:var(--accent,#bda6ef);color:#211b2d;font-size:12px;font-weight:500}.design-inspector__actions button:last-child:hover:not(:disabled){background:var(--accent,#bda6ef);color:#211b2d;filter:brightness(1.08)}.design-inspector :focus-visible{outline:2px solid var(--accent,#bda6ef);outline-offset:2px}@keyframes design-status{0%{opacity:0;translate:0 2px}}@media(max-width:520px){.design-inspector{position:fixed;inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));max-height:min(58dvh,560px);border-radius:24px;box-shadow:0 -1px #ffffff24,0 16px 48px #0005;transition:translate .32s cubic-bezier(.22,1,.36,1),scale .32s cubic-bezier(.22,1,.36,1),opacity .15s ease;transform-origin:bottom center}.design-inspector__heading{height:52px;padding-left:18px}.design-inspector__fold{display:grid}.design-inspector[data-empty] .design-inspector__identity{visibility:visible}.design-field{height:34px}}@media(prefers-reduced-motion:reduce){.design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status{transition:none;animation:none}}\n';let o=null,s=import("./design-panel-BPVXFERR.js").then(e=>{i.textContent+=e.designPanelStyles,o=e},()=>{b.textContent="Design controls unavailable · try again"}),a=document.createElement("aside");a.className="design-inspector",a.setAttribute("role","dialog"),a.setAttribute("aria-label","Design mode inspector"),a.setAttribute("aria-hidden","true"),a.hidden=!0;let r=document.createElement("div");r.className="design-outline",r.setAttribute("aria-hidden","true");let d=document.createElement("div");d.className="design-inspector__heading";let l=document.createElement("button");l.type="button",l.className="design-inspector__parent",l.hidden=!0;let c=document.createElement("span");c.className="design-inspector__target";let p=document.createElement("small"),g=document.createElement("button");g.type="button",g.className="design-inspector__close",g.setAttribute("aria-label","Exit design mode"),g.append(e("close"));let u=document.createElement("button");u.type="button",u.className="design-inspector__fold",u.append(e("chevron"));let m=document.createElement("div");m.className="design-inspector__identity",m.append(l,c,p),d.append(m,u,g);let f=document.createElement("div");f.className="design-inspector__controls";let h=document.createElement("div");h.className="design-inspector__bar";let x=document.createElement("span");x.className="design-inspector__count",x.title="Preview only · resets on exit";let b=document.createElement("p");b.className="design-inspector__status",b.setAttribute("role","status");let y=document.createElement("div");y.className="design-inspector__actions";let v=(e,t)=>{let n=document.createElement("button");return n.type="button",n.className="design-inspector__tool",n.dataset.tip=e,n.setAttribute("aria-label",e),n.innerHTML=t,n},_=v("Undo",t("M5.5 3.5 2.5 6.5l3 3m-3-3h7a4 4 0 0 1 0 8h-2")),w=v("Reset",t("M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5")),E=v("Copy CSS","");E.append(e("copy"));let k=document.createElement("button");k.type="button",k.textContent="Comment";let C=document.createElement("button");C.type="button",C.className="design-text-edit",C.title="Edit text",C.textContent="Edit text",C.setAttribute("aria-label","Edit selected text inline"),y.append(_,w,E,k);let P=document.createElement("div");P.className="design-inspector__compare",P.setAttribute("role","group"),P.setAttribute("aria-label","Compare with the page");let A=["Before","After"].map((e,t)=>{let n=document.createElement("button");return n.type="button",n.textContent=e,n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>ee(!t)),P.append(n),n});h.append(x,P,b,y);let T=document.createElement("div");T.className="morphing-menu__tooltip sidebar-tooltip",T.setAttribute("aria-hidden","true");let L=0,M=()=>{window.clearTimeout(L),delete T.dataset.open},z=e=>{let t=e.target.closest?.("[data-tip]");if(!t||"focusin"===e.type&&!t.matches(":focus-visible"))return M();window.clearTimeout(L),L=window.setTimeout(()=>{if(!t.isConnected)return;let e=t.getBoundingClientRect();T.textContent=t.dataset.tip??"";let n=T.offsetWidth/2;T.style.left=`${Math.max(8+n,Math.min(document.documentElement.clientWidth-8-n,e.left+e.width/2))}px`,T.style.top=e.top-8-T.offsetHeight+"px",T.dataset.open="true"},T.dataset.open?0:400)};h.addEventListener("pointerover",z),h.addEventListener("focusin",z);for(let e of["pointerleave","pointerdown","focusout"])h.addEventListener(e,M);a.append(d,f,h),n.root.append(i,r,T),(n.panelRoot??n.root).append(a);let S=!1,D=0,N=null,R=null,B=null,$=0,j=0,I=null,F="",H=null,O=null,K=new Map,U=new Map,V=new WeakMap,W=new WeakMap,X=new AbortController,q=new Set,Y=[];function G(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=K.get(e);o||K.set(e,o=new Map),o.has(t)||o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function J(e,t){let n=U.get(e);n||U.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(K.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||U.delete(e),ae(N,"selected")}let Z=0;new MutationObserver(()=>{let e=b.textContent??"";b.title=e,h.toggleAttribute("data-message",!!e),window.clearTimeout(Z),e&&(Z=window.setTimeout(function e(){B?.element?Z=window.setTimeout(e,2600):b.textContent=""},2600))}).observe(b,{childList:!0,characterData:!0,subtree:!0});let Q=!1;function ee(e){if(e===Q)return;e&&B?.element&&me(),Q=e;let t=!("function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches);for(let[n,i]of U){let o=n.style.transition;t&&(n.style.transition=[...i.keys()].map(e=>`${e} .3s cubic-bezier(.22,1,.36,1)`).join());for(let[t,o]of i){let i=K.get(n)?.get(t);e?te(n,t,i):n.style.setProperty(t,o,i?.priority)}t&&window.setTimeout(()=>n.style.transition=o,320)}B?.showBefore(e),H?.showDesignBefore(e),A.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),a.toggleAttribute("data-before",e),ue()}function te(e,t,n){n?.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t)}function ne(e,t,n){N&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(G(N,t),H?.noteDesignTokenOverride(N,t,n),N.style.setProperty(t,n,K.get(N)?.get(t)?.priority),J(N,t),ue()))}function ie(e,t,n=!0){if(!N)return;let i={value:N.style.getPropertyValue(t),priority:N.style.getPropertyPriority(t)},o=W.get(e),s=o?.before??V.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&Y.splice(Y.indexOf(o),1),W.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:N,property:t,before:s,after:i};Y.push(n),W.set(e,n)}n&&(V.set(e,i),W.delete(e)),ue()}function oe(){if(f.replaceChildren(),se(),!N){let t=document.createElement("div");t.className="design-inspector__empty";let i=document.createElement("strong");i.textContent="Select an element";let o=document.createElement("ul"),s=(...e)=>{let t=document.createElement("li");e.forEach((e,n)=>{n%2==0?t.append(e):t.append(Object.assign(document.createElement("kbd"),{textContent:e}))}),o.append(t)};return s("","Click"," to inspect"),s("","Double-click"," text to edit"),n.exitKey?s("","Esc"," or ",n.exitKey," to exit"):s("","Esc"," to exit"),t.append(e("design"),i,o),f.append(t),c.textContent="Select an element",p.textContent="",void(l.hidden=!0)}let t=`${N.tagName.toLowerCase()}${N.id?`#${N.id}`:""}`;c.textContent=t,p.textContent=N instanceof HTMLIFrameElement?"Frame only · contents are isolated":N.classList.length?`.${[...N.classList].slice(0,2).join(".")}`:"";let i=N.parentElement;l.hidden=!i||i===document.body||i===document.documentElement,l.textContent=i?.tagName.toLowerCase()??"",l.setAttribute("aria-label",`Select parent ${l.textContent}`);let a=N,r=o;r?(r.renderPanel(f,{element:a,changed:U.get(a),collapsed:q,editText:C,begin:(e,t)=>V.set(e,{value:a.style.getPropertyValue(t),priority:a.style.getPropertyPriority(t)}),apply:ne,commit:ie,rerender:oe}),(n.design||a.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(O??=import("./react-props-panel-R5XEVATL.js").then(e=>H=e).catch(e=>{throw O=null,e}),O.then(e=>{if(!S||N!==a||f.querySelector(".design-react-group, .design-theme-group"))return;let t=n.root,i=e.createReactPropsPanel(a,()=>{b.textContent="React state preview · resets on exit",ue()},t,le);i&&f.append(i),e.attachStyleTokenControls(a,r.fields,f,(e,t,n)=>{G(a,e.property,n),J(a,e.property),V.set(t,{value:n,priority:a.style.getPropertyPriority(e.property)}),ie(t,e.property)},t,r.valueFor,r.toHex,n.design,e=>{Y.push({element:a,undo:e}),ue()});let o=e.createDesignThemePanel(a,r,ue,t);o&&f.append(o)}).catch(()=>{}))):s.then(()=>{S&&N===a&&oe()})}function se(){a.toggleAttribute("data-empty",k.hidden=!N),a.parentElement?.toggleAttribute("data-design-empty",S&&!N)}function ae(e,t,i=!1){if(!S||!e?.isConnected)return void(r.hidden=!0);let o=e.getBoundingClientRect();if(o.width&&o.height){if(r.hidden=!1,r.dataset.kind=t,i&&(e!==I||t!==F)){I=e,F=t,window.clearTimeout(j);let i=a.getBoundingClientRect(),s=e=>o.left<e+i.width&&o.right>e&&o.top<i.bottom&&o.bottom>i.top;n.flip&&i.width&&s(i.left)&&!s(document.documentElement.clientWidth-i.right)&&(j=window.setTimeout(n.flip,"hover"===t?350:0))}Object.assign(r.style,{left:`${o.left}px`,top:`${o.top}px`,width:`${o.width}px`,height:`${o.height}px`})}else r.hidden=!0}function re(){$||($=requestAnimationFrame(()=>{$=0,ae(N??R,N?"selected":"hover")}))}let de="function"==typeof ResizeObserver?new ResizeObserver(re):null;function le(e){!(e instanceof HTMLElement)||n.host.contains(e)||(B?.element&&B.element!==e&&me(),de?.disconnect(),de?.observe(e),N=e,R=e,oe(),ae(e,"selected",!0),ue())}function ce(){return"function"==typeof matchMedia&&matchMedia("(max-width:520px)").matches}function pe(e){a.toggleAttribute("data-folded",e&&ce()),u.setAttribute("aria-expanded",String(!a.hasAttribute("data-folded"))),u.setAttribute("aria-label",a.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function ge(e){pe(!1),ce()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=a.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"})})}function ue(){re(),_.disabled=!Y.length&&!H?.canUndoReactProp(N)&&!H?.canUndoDesignTokenEdit(N),w.disabled=!function(){let e=N,t=e?(U.get(e)?.size??0)+ +!!B?.hasChanges(e)+ +!!H?.hasReactPropChanges(e)||+!!H?.hasDesignTokenEdit(e):0;return x.textContent=t?`${t} change${t>1?"s":""}`:"",h.toggleAttribute("data-changes",t>0||!_.disabled),P.hidden=!t&&!Q,t}(),E.disabled=!N||!U.get(N)?.size,k.disabled=!N,C.disabled=!!B?.busy||!N?.isConnected,C.textContent=B?.isEditing(N)?"Done editing":"Edit text",C.setAttribute("aria-label",B?.isEditing(N)?"Finish inline text editing":"Edit selected text inline")}function me(e=!1){B?.finish(e),ue()}function fe(e){if(!e){ee(!1),B?.finish();for(let[e,t]of K)for(let[n,i]of t)te(e,n,i);K.clear(),U.clear(),Y.length=0,B?.restoreAll(),H?.resetPreviews(),ue()}window.clearTimeout(D),D=0,S=e,se(),e?(a.hidden=!1,a.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{S&&(a.dataset.state="active")}),r.hidden=!N,oe(),pe(!N),ae(N,"selected"),g.focus({preventScroll:!0})):(r.hidden=!0,a.setAttribute("aria-hidden","true"),a.dataset.state="closing","function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches?(a.hidden=!0,delete a.dataset.state):D=window.setTimeout(()=>{D=0,S||(a.hidden=!0,delete a.dataset.state)},250))}C.addEventListener("click",e=>{B||N&&(b.textContent="Loading inline text editor…",import("./inline-text-editor-3JLDAUPO.js").then(t=>{B||!N||!S||(B=t.bindInlineTextTools({button:C,status:b,selected:()=>N,active:()=>S,onChange:ue,onCommit(e){Y.push({kind:"text",element:e})}}),B.toggle(e))}).catch(()=>{b.textContent="Inline text editing is unavailable."}))}),u.addEventListener("click",()=>pe(!a.hasAttribute("data-folded"))),l.addEventListener("click",()=>le(N?.parentElement??null)),g.addEventListener("click",()=>{B?.element&&me(),fe(!1),n.onExit()}),_.addEventListener("click",()=>{let e=Y.pop();e?e.kind?"text"===e.kind?N===(B?.undo()??e.element)&&oe():(te(e.element,e.property,e.before),H?.syncDesignTokenBinding(e.element,e.property),J(e.element,e.property),N===e.element&&oe(),ae(N??R,N?"selected":"hover")):(e.undo(),oe()):(N&&(H?.undoDesignTokenEdit(N),H?.undoReactProp(N),oe()),b.textContent="React state preview · resets on exit"),ue(),(_.disabled?g:_).focus({preventScroll:!0})}),w.addEventListener("click",()=>{if(!N)return;B?.isEditing(N)&&me(!0);let e=U.get(N),t=B?.hasChanges(N)??!1,n=H?.hasReactPropChanges(N)??!1,i=H?.hasDesignTokenEdit(N)??!1;if(e?.size||t||n||i){t&&B?.reset(N);for(let t of e?.keys()??[])te(N,t,K.get(N)?.get(t));U.delete(N),n&&H?.resetReactProps(N),i&&H?.resetDesignTokenEdits(N);for(let e=Y.length-1;e>=0;e--)Y[e].element===N&&Y.splice(e,1);oe(),ae(N,"selected"),ue(),g.focus({preventScroll:!0})}});let he=()=>import("./design-export-ZHCBPSWY.js");E.addEventListener("click",()=>{let e=N,t=e?U.get(e):void 0;!e||!t?.size||he().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),b.textContent="CSS copied"}catch{b.textContent=i}})}),k.addEventListener("click",()=>{let e=N;e&&(B?.isEditing(e)&&me(),he().then(({designProposal:t})=>n.onComment(e,t(e,U.get(e),t=>K.get(e)?.get(t)?.computed,H?.tokenBoundProperties(e),[B?.proposal(e),H?.proposedDesignChanges(e)])),()=>{b.textContent="Comment unavailable · try again"}))});let xe=()=>ee(!1);for(let e of[f,y,C])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,xe,!0);return document.addEventListener("pointermove",function(e){if(!S||e.composedPath().includes(n.host))return;let t=n.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||n.host.contains(t)||(R=t,N||ae(R,"hover",!0))},{capture:!0,signal:X.signal}),document.addEventListener("pointerdown",function(e){if(!S||e.composedPath().includes(n.host))return;let t=n.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||n.host.contains(t)||B?.element&&(t===B.element||B.element.contains(t))||(B?.element&&me(),e.preventDefault(),e.stopImmediatePropagation(),le(t))},{capture:!0,signal:X.signal}),document.addEventListener("click",function(e){!S||e.composedPath().includes(n.host)||(e.preventDefault(),e.stopImmediatePropagation(),N&&ge(N),2===e.detail&&N?.contains(e.target)&&!C.disabled&&!B?.element&&C.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:X.signal}),document.addEventListener("keydown",function(e){if(B?.handleKey(e))return void C.focus({preventScroll:!0});let t=e.key.toLowerCase(),i=e.composedPath()[0];if(S&&!P.hidden&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&("b"===t||"arrowleft"===t||"arrowright"===t)&&!(i instanceof HTMLElement&&(i.isContentEditable||i.matches("input, textarea, select"))))return e.preventDefault(),e.stopImmediatePropagation(),void ee("b"===t?!Q:"arrowleft"===t);if(S&&!B?.element&&("Enter"===e.key||" "===e.key)&&!e.composedPath().includes(n.host)){let t=document.activeElement;if(t instanceof HTMLElement&&t!==document.body&&t!==document.documentElement)return e.preventDefault(),e.stopImmediatePropagation(),le(t),void ge(t)}S&&"Escape"===e.key&&(e.preventDefault(),e.stopImmediatePropagation(),fe(!1),n.onExit())},{capture:!0,signal:X.signal}),window.addEventListener("scroll",re,{capture:!0,passive:!0,signal:X.signal}),window.addEventListener("resize",re,{passive:!0,signal:X.signal}),{setActive:fe,mountPanel(e){a.parentElement!==e&&(a.parentElement?.removeAttribute("data-design-empty"),e.append(a),se())},get active(){return S},ready:s,destroy(){B?.finish(!0),fe(!1),window.clearTimeout(D),window.clearTimeout(Z),window.clearTimeout(j),de?.disconnect(),X.abort(),cancelAnimationFrame($),a.remove(),r.remove(),T.remove(),i.remove()}}}export{n as createDesignMode};
1
+ import{i as e,j as t}from"./chunk-62YUEO4G.js";import"./chunk-I7AUKTXE.js";var n=(t,n)=>Object.assign(e("button",t,n),{type:"button"}),i=e=>"function"==typeof matchMedia&&matchMedia(e).matches,o=()=>i("(prefers-reduced-motion: reduce)"),s=e=>`<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="${e}"/></svg>`;function a(a){let r=e("style");r.textContent='.design-outline{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;border:2px solid var(--accent,#bda6ef);border-radius:8px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#bda6ef) 22%,transparent),0 2px 12px #0003;transition:all 80ms ease}.design-outline[data-kind=hover]{border-style:dashed;opacity:.8}.design-inspector{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;overflow:hidden;color:#e9e6e1;background:#0d0d0d;border-radius:inherit;font:12px/1.4 -apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;color-scheme:dark;opacity:0;translate:0 6px;pointer-events:none;transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out)}.design-inspector[hidden]{display:none}:host([data-sidebar="background"]) .design-inspector{position:fixed;inset:0 0 0 auto;width:380px;border-radius:0}:host([data-sidebar="edge"]) .design-inspector__heading{cursor:grab;touch-action:none;padding-top:22px}:host(.design-active[data-sidebar="edge"]) .edge-sidebar .edge-sidebar-grip{z-index:10;opacity:1!important}.design-inspector[data-state=active]{opacity:1;translate:0 0;pointer-events:auto}.design-inspector[data-state=closing]{opacity:0;translate:0 4px}.design-inspector button{cursor:pointer}.design-inspector__heading{flex:none;display:flex;align-items:center;gap:4px;min-height:54px;padding:0 8px 0 12px}.design-inspector__identity{min-width:0;flex:1;display:flex;align-items:baseline;gap:6px;white-space:nowrap}.design-inspector__parent{flex:none;max-width:35%;overflow:hidden;text-overflow:ellipsis;margin-left:-6px;padding:2px 6px;border-radius:7px;color:#909090;font-size:15px;font-weight:500}.design-inspector__parent:after{content:"/";margin-left:6px;color:#555}.design-inspector__target{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:600;font-size:15px}.design-inspector__heading small{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#909090;font-size:13px}.design-inspector__close,.design-inspector__fold,.design-inspector__actions button{display:grid;place-items:center;min-width:28px;height:28px;border-radius:7px;color:#909090}.design-inspector__close,.design-inspector__fold{flex:none}.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg{width:16px;height:16px}.design-inspector__parent:hover,.design-inspector__close:hover,.design-inspector__fold:hover,.design-inspector__actions button:hover:not(:disabled){background:#161616;color:#eee}.design-inspector__fold{display:none}.design-inspector__fold svg{transition:rotate .25s var(--ease-smooth-out)}.design-inspector[data-folded] .design-inspector__fold svg{rotate:180deg}.design-inspector[data-folded]>:not(.design-inspector__heading){display:none}.design-inspector__controls{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}:host([data-sidebar="edge"]) .edge-sidebar[data-design-empty]:not([data-morphing]){height:auto!important}:host([data-sidebar="edge"]) [data-design-empty]>.design-inspector{position:relative;inset:auto}:host([data-sidebar="edge"]) [data-design-empty]:not([data-morphing])>.toolbar{position:absolute}.design-inspector[data-empty] .design-inspector__identity{visibility:hidden}.design-inspector[data-empty] .design-inspector__controls{display:grid;place-items:center}.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]){display:none}.design-inspector__empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 24px 28px;color:#898680;font-size:11px;text-align:center}.design-inspector__empty>svg{box-sizing:content-box;width:20px;height:20px;margin-bottom:8px;padding:8px;border-radius:10px;background:#ffffff0a;color:#77736f}.design-inspector__empty strong{color:#e9e6e1;font-size:12px;font-weight:600}.design-inspector__empty ul{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}.design-inspector__empty kbd{display:inline-block;min-width:8px;padding:0 5px;border-radius:4px;background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff12,inset 0 -1px #ffffff12;color:#c9c5bf;font:inherit;font-size:10px;font-weight:500;line-height:17px}.design-inspector__bar{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 12px;border-top:1px solid #ffffff0d;color:#909090;font-size:12px}.design-inspector__count{white-space:nowrap;font-variant-numeric:tabular-nums}.design-inspector__compare{display:inline-flex;flex:none;padding:2px;border-radius:7px;background:#ffffff0a}.design-inspector__compare[hidden],.design-inspector__bar[data-message] .design-inspector__compare{display:none}.design-inspector__compare button{height:22px;padding:0 8px;border-radius:5px;color:#9a9a9a;font:inherit;font-size:11px}.design-inspector__compare button:hover{color:#fff}.design-inspector__compare button[aria-pressed=true]{color:#fff;background:#ffffff1a}.design-inspector__status{display:none;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:design-status .2s var(--ease-smooth-out)}.design-inspector__bar[data-message] .design-inspector__status{display:block}.design-inspector__bar[data-message] .design-inspector__count,.design-inspector__bar:not([data-changes]) .design-inspector__tool{display:none}.design-inspector__actions{display:flex;align-items:center;gap:2px;margin-left:auto}.design-inspector__actions button:disabled{cursor:default;opacity:.35}.design-inspector__actions button:last-child{min-height:34px;margin-left:6px;padding:0 14px;border-radius:8px;background:var(--accent,#bda6ef);color:#211b2d;font-size:12px;font-weight:500}.design-inspector__actions button:last-child:hover:not(:disabled){background:var(--accent,#bda6ef);color:#211b2d;filter:brightness(1.08)}.design-inspector :focus-visible{outline:2px solid var(--accent,#bda6ef);outline-offset:2px}@keyframes design-status{0%{opacity:0;translate:0 2px}}@media(max-width:520px){.design-inspector{position:fixed;inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));max-height:min(58dvh,560px);border-radius:24px;box-shadow:0 -1px #ffffff24,0 16px 48px #0005;transition:translate .32s cubic-bezier(.22,1,.36,1),scale .32s cubic-bezier(.22,1,.36,1),opacity .15s ease;transform-origin:bottom center}.design-inspector__heading{height:52px;padding-left:18px}.design-inspector__fold{display:grid}.design-inspector[data-empty] .design-inspector__identity{visibility:visible}.design-inspector .design-field{height:34px}}@media(prefers-reduced-motion:reduce){.design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status{transition:none;animation:none}}\n';let d=null,l=import("./design-panel-NU2WUI4D.js").then(e=>{r.textContent+=e.designPanelStyles,d=e},()=>{w.textContent="Design controls unavailable · try again"}),p=e("aside","design-inspector");p.setAttribute("role","dialog"),p.setAttribute("aria-label","Design mode inspector"),p.setAttribute("aria-hidden","true"),p.hidden=!0;let c=e("div","design-outline");c.setAttribute("aria-hidden","true");let g=e("div","design-inspector__heading"),u=n("design-inspector__parent");u.hidden=!0;let f=e("span","design-inspector__target"),m=e("small"),h=n("design-inspector__close");h.setAttribute("aria-label","Exit design mode"),h.append(t("close"));let x=n("design-inspector__fold");x.append(t("chevron"));let b=e("div","design-inspector__identity");b.append(u,f,m),g.append(b,x,h);let y=e("div","design-inspector__controls"),v=e("div","design-inspector__bar"),_=e("span","design-inspector__count");_.title="Preview only · resets on exit";let w=e("p","design-inspector__status");w.setAttribute("role","status");let k=e("div","design-inspector__actions"),E=(e,t)=>{let i=n("design-inspector__tool");return i.dataset.tip=e,i.setAttribute("aria-label",e),i.innerHTML=t,i},C=E("Undo",s("M5.5 3.5 2.5 6.5l3 3m-3-3h7a4 4 0 0 1 0 8h-2")),P=E("Reset",s("M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5")),A=E("Copy CSS","");A.append(t("copy"));let T=n("","Comment"),L=n("design-text-edit","Edit text");L.title="Edit text",L.setAttribute("aria-label","Edit selected text inline"),k.append(C,P,A,T);let z=e("div","design-inspector__compare");z.setAttribute("role","group"),z.setAttribute("aria-label","Compare with the page");let D=["Before","After"].map((e,t)=>{let i=n("",e);return i.dataset.tip=`${e} · ${t?"→":"←"} or B`,i.setAttribute("aria-pressed",String(!!t)),i.addEventListener("click",()=>ie(!t)),z.append(i),i});v.append(_,z,w,k),p.append(g,y,v),a.root.append(r,c),(a.panelRoot??a.root).append(p);let M,S=!1,R=0,$=null,B=null,I=null,j=0,O=0,F=null,H="",U=null,K=null,V=new Map,Y=new Map,q=new WeakMap,J=new WeakMap,N=new AbortController,W=()=>import("./design-export-DD2NJI4O.js"),X=e=>{M??=W().then(({footerTips:t})=>t(v,a.root,N.signal,e),()=>{M=void 0})};v.addEventListener("pointerover",X),v.addEventListener("focusin",X);let G=new Set,Q=[];function Z(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=V.get(e);o||V.set(e,o=new Map),o.has(t)||o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function ee(e,t){let n=Y.get(e);n||Y.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(V.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||Y.delete(e),le($,"selected")}let te=0;new MutationObserver(()=>{let e=w.textContent??"";w.title=e,v.toggleAttribute("data-message",!!e),clearTimeout(te),e&&(te=window.setTimeout(function e(){I?.element?te=window.setTimeout(e,2600):w.textContent=""},2600))}).observe(w,{childList:!0,characterData:!0,subtree:!0});let ne=!1;function ie(e){if(e===ne)return;e&&I?.element&&xe(),ne=e;let t=!o();for(let[n,i]of Y){let o=n.style.transition;t&&(n.style.transition=[...i.keys()].map(e=>`${e} .3s cubic-bezier(.22,1,.36,1)`).join());for(let[t,o]of i){let i=V.get(n)?.get(t);e?oe(n,t,i):n.style.setProperty(t,o,i?.priority)}t&&window.setTimeout(()=>n.style.transition=o,320)}I?.showBefore(e),U?.showDesignBefore(e),D.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),p.toggleAttribute("data-before",e),he()}function oe(e,t,n){n?.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t)}function se(e,t,n){$&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(Z($,t),U?.noteDesignTokenOverride($,t,n),$.style.setProperty(t,n,V.get($)?.get(t)?.priority),ee($,t),he()))}function ae(e,t,n=!0){if(!$)return;let i={value:$.style.getPropertyValue(t),priority:$.style.getPropertyPriority(t)},o=J.get(e),s=o?.before??q.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&Q.splice(Q.indexOf(o),1),J.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:$,property:t,before:s,after:i};Q.push(n),J.set(e,n)}n&&(q.set(e,i),J.delete(e)),he()}function re(){if(y.replaceChildren(),de(),!$){let n=e("div","design-inspector__empty"),i=e("strong","","Select an element"),o=e("ul"),s=(...t)=>{let n=e("li");t.forEach((t,i)=>{i%2==0?n.append(t):n.append(e("kbd","",t))}),o.append(n)};return s("","Click"," to inspect"),s("","Double-click"," text to edit"),a.exitKey?s("","Esc"," or ",a.exitKey," to exit"):s("","Esc"," to exit"),n.append(t("design"),i,o),y.append(n),f.textContent="Select an element",m.textContent="",void(u.hidden=!0)}let n=`${$.tagName.toLowerCase()}${$.id?`#${$.id}`:""}`;f.textContent=n,m.textContent=$ instanceof HTMLIFrameElement?"Frame only · contents are isolated":$.classList.length?`.${[...$.classList].slice(0,2).join(".")}`:"";let i=$.parentElement;u.hidden=!i||i===document.body||i===document.documentElement,u.textContent=i?.tagName.toLowerCase()??"",u.setAttribute("aria-label",`Select parent ${u.textContent}`);let o=$,s=d;s?(s.renderPanel(y,{element:o,changed:Y.get(o),collapsed:G,editText:L,begin:(e,t)=>q.set(e,{value:o.style.getPropertyValue(t),priority:o.style.getPropertyPriority(t)}),apply:se,commit:ae,rerender:re}),(a.design||o.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(K??=import("./react-props-panel-YJOE56ZS.js").then(e=>U=e).catch(e=>{throw K=null,e}),K.then(e=>{if(!S||$!==o||y.querySelector(".design-react-group, .design-theme-group"))return;let t=a.root,n=e.createReactPropsPanel(o,()=>{w.textContent="React state preview · resets on exit",he()},t,ge);n&&y.append(n),e.attachStyleTokenControls(o,s.fields,y,(e,t,n)=>{Z(o,e.property,n),ee(o,e.property),q.set(t,{value:n,priority:o.style.getPropertyPriority(e.property)}),ae(t,e.property)},t,s.valueFor,s.toHex,a.design,e=>{Q.push({element:o,undo:e}),he()});let i=e.createDesignThemePanel(o,s,he,t);i&&y.append(i)}).catch(()=>{}))):l.then(()=>{S&&$===o&&re()})}function de(){p.toggleAttribute("data-empty",T.hidden=!$),p.parentElement?.toggleAttribute("data-design-empty",S&&!$)}function le(e,t,n=!1){if(!S||!e?.isConnected)return void(c.hidden=!0);let i=e.getBoundingClientRect();if(i.width&&i.height){if(c.hidden=!1,c.dataset.kind=t,n&&(e!==F||t!==H)){F=e,H=t,clearTimeout(O);let n=p.getBoundingClientRect(),o=e=>i.left<e+n.width&&i.right>e&&i.top<n.bottom&&i.bottom>n.top;a.flip&&n.width&&o(n.left)&&!o(document.documentElement.clientWidth-n.right)&&(O=window.setTimeout(a.flip,"hover"===t?350:0))}Object.assign(c.style,{left:`${i.left}px`,top:`${i.top}px`,width:`${i.width}px`,height:`${i.height}px`})}else c.hidden=!0}function pe(){j||(j=requestAnimationFrame(()=>{j=0,le($??B,$?"selected":"hover")}))}let ce="function"==typeof ResizeObserver?new ResizeObserver(pe):null;function ge(e){!(e instanceof HTMLElement)||a.host.contains(e)||(I?.element&&I.element!==e&&xe(),ce?.disconnect(),ce?.observe(e),$=e,B=e,re(),le(e,"selected",!0),he())}let ue=()=>i("(max-width:520px)");function fe(e){p.toggleAttribute("data-folded",e&&ue()),x.setAttribute("aria-expanded",String(!p.hasAttribute("data-folded"))),x.setAttribute("aria-label",p.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function me(e){fe(!1),ue()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=p.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:o()?"auto":"smooth"})})}function he(){pe(),C.disabled=!Q.length&&!U?.canUndoReactProp($)&&!U?.canUndoDesignTokenEdit($),P.disabled=!function(){let e=$,t=e?(Y.get(e)?.size??0)+ +!!I?.hasChanges(e)+ +!!U?.hasReactPropChanges(e)||+!!U?.hasDesignTokenEdit(e):0;return _.textContent=t?`${t} change${t>1?"s":""}`:"",v.toggleAttribute("data-changes",t>0||!C.disabled),z.hidden=!t&&!ne,t}(),A.disabled=!$||!Y.get($)?.size,T.disabled=!$,L.disabled=!!I?.busy||!$?.isConnected,L.textContent=I?.isEditing($)?"Done editing":"Edit text",L.setAttribute("aria-label",I?.isEditing($)?"Finish inline text editing":"Edit selected text inline")}function xe(e=!1){I?.finish(e),he()}function be(e){if(!e){ie(!1),I?.finish();for(let[e,t]of V)for(let[n,i]of t)oe(e,n,i);V.clear(),Y.clear(),Q.length=0,I?.restoreAll(),U?.resetPreviews(),he()}clearTimeout(R),R=0,S=e,de(),e?(p.hidden=!1,p.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{S&&(p.dataset.state="active")}),c.hidden=!$,re(),fe(!$),le($,"selected"),h.focus({preventScroll:!0})):(c.hidden=!0,p.setAttribute("aria-hidden","true"),p.dataset.state="closing",o()?(p.hidden=!0,delete p.dataset.state):R=window.setTimeout(()=>{R=0,S||(p.hidden=!0,delete p.dataset.state)},250))}L.addEventListener("click",e=>{I||$&&(w.textContent="Loading inline text editor…",import("./inline-text-editor-2J7DVJQY.js").then(t=>{I||!$||!S||(I=t.bindInlineTextTools({button:L,status:w,selected:()=>$,active:()=>S,onChange:he,onCommit(e){Q.push({kind:"text",element:e})}}),I.toggle(e))}).catch(()=>{w.textContent="Inline text editing is unavailable."}))}),x.addEventListener("click",()=>fe(!p.hasAttribute("data-folded"))),u.addEventListener("click",()=>ge($?.parentElement??null)),h.addEventListener("click",()=>{I?.element&&xe(),be(!1),a.onExit()}),C.addEventListener("click",()=>{let e=Q.pop();e?e.kind?"text"===e.kind?$===(I?.undo()??e.element)&&re():(oe(e.element,e.property,e.before),U?.syncDesignTokenBinding(e.element,e.property),ee(e.element,e.property),$===e.element&&re(),le($??B,$?"selected":"hover")):(e.undo(),re()):($&&(U?.undoDesignTokenEdit($),U?.undoReactProp($),re()),w.textContent="React state preview · resets on exit"),he(),(C.disabled?h:C).focus({preventScroll:!0})}),P.addEventListener("click",()=>{if(!$)return;I?.isEditing($)&&xe(!0);let e=Y.get($),t=I?.hasChanges($)??!1,n=U?.hasReactPropChanges($)??!1,i=U?.hasDesignTokenEdit($)??!1;if(e?.size||t||n||i){t&&I?.reset($);for(let t of e?.keys()??[])oe($,t,V.get($)?.get(t));Y.delete($),n&&U?.resetReactProps($),i&&U?.resetDesignTokenEdits($);for(let e=Q.length-1;e>=0;e--)Q[e].element===$&&Q.splice(e,1);re(),le($,"selected"),he(),h.focus({preventScroll:!0})}}),A.addEventListener("click",()=>{let e=$,t=e?Y.get(e):void 0;!e||!t?.size||W().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),w.textContent="CSS copied"}catch{w.textContent=i}})}),T.addEventListener("click",()=>{let e=$;e&&(I?.isEditing(e)&&xe(),W().then(({designProposal:t})=>a.onComment(e,t(e,Y.get(e),t=>V.get(e)?.get(t)?.computed,U?.tokenBoundProperties(e),[I?.proposal(e),U?.proposedDesignChanges(e)],U?.designContext(e,a.design))),()=>{w.textContent="Comment unavailable · try again"}))});let ye=()=>ie(!1);for(let e of[y,k,L])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,ye,!0);return document.addEventListener("pointermove",function(e){if(!S||e.composedPath().includes(a.host))return;let t=a.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||a.host.contains(t)||(B=t,$||le(B,"hover",!0))},{capture:!0,signal:N.signal}),document.addEventListener("pointerdown",function(e){if(!S||e.composedPath().includes(a.host))return;let t=a.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||a.host.contains(t)||I?.element&&(t===I.element||I.element.contains(t))||(I?.element&&xe(),e.preventDefault(),e.stopImmediatePropagation(),ge(t))},{capture:!0,signal:N.signal}),document.addEventListener("click",function(e){!S||e.composedPath().includes(a.host)||(e.preventDefault(),e.stopImmediatePropagation(),$&&me($),2===e.detail&&$?.contains(e.target)&&!L.disabled&&!I?.element&&L.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:N.signal}),document.addEventListener("keydown",function(e){if(I?.handleKey(e))return void L.focus({preventScroll:!0});let t=e.key.toLowerCase(),n=e.composedPath()[0];if(S&&!z.hidden&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&("b"===t||"arrowleft"===t||"arrowright"===t)&&!(n instanceof HTMLElement&&(n.isContentEditable||n.matches("input, textarea, select"))))return e.preventDefault(),e.stopImmediatePropagation(),void ie("b"===t?!ne:"arrowleft"===t);if(S&&!I?.element&&("Enter"===e.key||" "===e.key)&&!e.composedPath().includes(a.host)){let t=document.activeElement;if(t instanceof HTMLElement&&t!==document.body&&t!==document.documentElement)return e.preventDefault(),e.stopImmediatePropagation(),ge(t),void me(t)}S&&"Escape"===e.key&&(e.preventDefault(),e.stopImmediatePropagation(),be(!1),a.onExit())},{capture:!0,signal:N.signal}),window.addEventListener("scroll",pe,{capture:!0,passive:!0,signal:N.signal}),window.addEventListener("resize",pe,{passive:!0,signal:N.signal}),{setActive:be,mountPanel(e){p.parentElement!==e&&(p.parentElement?.removeAttribute("data-design-empty"),e.append(p),de())},get active(){return S},ready:l,destroy(){I?.finish(!0),be(!1),clearTimeout(R),clearTimeout(te),clearTimeout(O),ce?.disconnect(),N.abort(),cancelAnimationFrame(j),p.remove(),c.remove(),r.remove()}}}export{a as createDesignMode};
package/dist/design-panel-NU2WUI4D.js ADDED
@@ -0,0 +1 @@
1
+ import"./chunk-I7AUKTXE.js";var e='.design-inspector__controls>*+*{border-top:1px solid #ffffff0d}.design-group{padding:0 12px 10px}.design-section>.design-group{padding-bottom:12px}.design-group summary{cursor:pointer;display:flex;align-items:center;gap:4px;height:36px;color:#e9e6e1;font-size:11px;font-weight:600;list-style:none}.design-group summary::-webkit-details-marker{display:none}.design-group summary:after{content:"";width:5px;height:5px;margin:-2px 0 0 3px;border:solid #77736f;border-width:0 1.2px 1.2px 0;rotate:45deg;opacity:0;transition:opacity .12s,rotate .2s var(--ease-smooth-out)}.design-group:not([open]) summary:after{rotate:-45deg;margin:0 0 0 2px}.design-group summary:is(:hover,:focus-visible):after,.design-group:not([open]) summary:after{opacity:1}.design-group summary:focus-visible{outline-offset:-2px;border-radius:6px}.design-section{position:relative}.design-section__title{display:flex;align-items:center;height:36px;padding:0 12px;color:#898680;font-size:11px;font-weight:600}.design-section__tools{position:absolute;z-index:1;top:6px;right:8px;display:flex;gap:2px}.design-section__tools button{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:#898680;font-size:16px;line-height:1}.design-section__tools button:hover{background:#ffffff12;color:#f1efeb}.design-text-edit{font-size:0!important}.design-text-edit:before{content:"T";font:600 13px/1 Georgia,Times New Roman,serif}.design-text-edit[aria-label^=Finish]{background:#bda6ef33;color:#e6dcfb!important}.design-text-edit:disabled{opacity:.35;cursor:default}.design-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 8px}.design-field{position:relative;--lead:4px;min-width:0;height:28px;display:flex;align-items:center;border-radius:6px;background:#ffffff0a;color:#898680;transition:box-shadow .12s var(--ease-smooth-out)}.design-field:hover{box-shadow:inset 0 0 0 1px #ffffff1c}.design-field:focus-within{box-shadow:inset 0 0 0 1px #bda6ef}.design-field:has([aria-invalid=true]){box-shadow:inset 0 0 0 1px #fda29b}.design-field[data-wide]{grid-column:1/-1}.design-field:has(.design-field__glyph){--lead:22px}.design-field--color{--lead:26px}.design-field>input:not([type=color]),.design-field>select{flex:1;box-sizing:border-box;width:100%;min-width:0;height:100%;margin:0;padding:0 8px;border:0;border-radius:6px;outline:0;box-shadow:none;background:none;color:#f1efeb;font:inherit;font-size:11px;font-variant-numeric:tabular-nums;text-overflow:ellipsis}.design-field>:is(input,select):focus-visible{outline:0}.design-field input[type=number]{appearance:textfield;-moz-appearance:textfield}.design-field input::-webkit-inner-spin-button{appearance:none}.design-field__glyph{flex:none;display:grid;place-items:center;width:22px;height:100%;margin-right:-6px;color:#77736f;font-size:10px;font-weight:600;cursor:ew-resize;user-select:none;touch-action:none}.design-field__glyph:hover{color:#e9e6e1}.design-field__glyph svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.1}.design-field input[type=color]{flex:none;width:16px;height:16px;margin:0 -2px 0 6px;padding:0;border:0;border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff26;background:none;cursor:pointer}.design-field input[type=color]::-webkit-color-swatch-wrapper{padding:0}.design-field input[type=color]::-webkit-color-swatch{border:0;border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff26}.design-field input[type=color]::-moz-color-swatch{border:0;border-radius:4px}\n',t=[{property:"width",label:"Width",kind:"size",glyph:"W"},{property:"height",label:"Height",kind:"size",glyph:"H"},{property:"padding",label:"Padding",kind:"length",glyph:"M1.5 1.5h9v9h-9zM4.5 4.5h3v3h-3z",max:200},{property:"gap",label:"Gap",kind:"length",glyph:"M1.5 1.5h3v9h-3zM7.5 1.5h3v9h-3z",max:200},{property:"margin",label:"Margin",kind:"length",glyph:"M4 4h4v4H4zM1 3V1h2m6 0h2v2m0 6v2H9m-6 0H1V9",max:200},{property:"border-radius",label:"Corner radius",kind:"length",glyph:"M1.5 10.5V6A4.5 4.5 0 0 1 6 1.5h4.5",max:96},{property:"display",label:"Layout",kind:"select",values:["block","flex","grid","inline-flex","inline-grid"]},{property:"font-family",label:"Font family",kind:"text",wide:!0,placeholder:"system-ui, sans-serif"},{property:"font-size",label:"Font size",kind:"length",glyph:"M2 3V1.5h8V3M6 1.5v9m-1.5 0h3",min:1,max:160},{property:"line-height",label:"Line height",kind:"text",glyph:"M1 1.5h10M1 10.5h10M3.5 8.5 6 3l2.5 5.5",placeholder:"1.4 or 24px"},{property:"font-weight",label:"Weight",kind:"select",values:["300","400","500","600","700","800"]},{property:"text-align",label:"Alignment",kind:"select",values:["left","center","right","justify"]},{property:"color",label:"Text color",kind:"color",wide:!0},{property:"background-color",label:"Fill",kind:"color",wide:!0},{property:"border-width",label:"Border width",kind:"length",glyph:"M1 2.5h10M1 6h10M1 9.5h10",max:24},{property:"border-style",label:"Border style",kind:"select",values:["none","solid","dashed","dotted"]},{property:"border-color",label:"Border color",kind:"color"}],n=import("./select-menu-V7RYOZFK.js").catch(()=>null),i=["font-family","font-size","line-height","font-weight","text-align","color"];function r(e){if(/^#[\da-f]{6}$/i.test(e))return e;if(/^#[\da-f]{3}$/i.test(e))return`#${[...e.slice(1)].map(e=>e+e).join("")}`;let t=e.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);return t?`#${t.slice(1,4).map(e=>Number(e).toString(16).padStart(2,"0")).join("")}`:"#000000"}function o(e){let t=e.match(/^rgba\(.*,\s*([\d.]+)\)$/)?.[1];return void 0===t?/^rgb\(/.test(e)?r(e):e||"transparent":Number(t)?e:"transparent"}function l(e,t){let n=getComputedStyle(t).getPropertyValue(e.property).trim();if("color"===e.kind)return o(n);if("length"===e.kind||"size"===e.kind){let t=n.match(/^(-?\d+(?:\.\d+)?)px$/);return t?String(Math.round(10*Number(t[1]))/10):"size"===e.kind?n||"auto":"0"}return n}function d(e,t){let{element:n}=t,i=document.createElement("div");i.className=`design-field design-field--${e.kind}`,i.dataset.fieldProperty=e.property,i.toggleAttribute("data-wide",!!e.wide);let o="select"===e.kind?document.createElement("select"):document.createElement("input");if(o instanceof HTMLSelectElement)for(let t of e.values??[]){let e=document.createElement("option");e.value=e.textContent=t,o.append(e)}else o.type="length"===e.kind?"number":"text",o.autocomplete="off",o.spellcheck=!1,o.placeholder=e.placeholder??"","length"===e.kind&&(o.min=String(e.min??0),o.max=String(e.max??1e3),o.setAttribute("inputmode","decimal"));if(o.dataset.property=e.property,o.setAttribute("aria-label",e.label),o.title=e.label,o.value=l(e,n),o instanceof HTMLSelectElement&&!o.value){let t=document.createElement("option");t.value=t.textContent=l(e,n),o.prepend(t),o.value=t.value}let d=()=>t.begin(o,e.property),a=()=>{t.apply(o,e.property,function(e,t){let n=t.value.trim();if("color"===e.kind){let e=document.createElement("span").style;return e.color=n,e.color?n:null}if("length"===e.kind){if(!n)return null;let t=Number(n);return!Number.isFinite(t)||t<(e.min??-200)||t>(e.max??1e3)?null:`${t}px`}return"size"===e.kind||"line-height"===e.property?/^(auto|normal|(?:\d+(?:\.\d+)?)(?:px|%|vw|vh|rem|em)?)$/.test(n)?"size"===e.kind&&/^[\d.]+$/.test(n)?`${n}px`:n:null:n}(e,o)),t.commit(o,e.property,!1)},p=()=>t.commit(o,e.property);if(o.addEventListener("focus",d),o.addEventListener("input",a),o.addEventListener("change",p),o.addEventListener("blur",p),"color"===e.kind){let t=document.createElement("input");t.type="color",t.setAttribute("aria-label",`${e.label} picker`);let n=()=>{t.value=r(o.value)};n(),t.addEventListener("pointerdown",d),t.addEventListener("focus",d),t.addEventListener("input",()=>{o.value=t.value,a()}),t.addEventListener("change",p),o.addEventListener("input",n),i.append(t)}if(e.glyph){let t=t=>{let i=o.value.trim().match(/^(-?\d*\.?\d+)([a-z%]*)$/i),r=i?i[2]:"text"===e.kind?"px":"",l=i?Number(i[1]):parseFloat(getComputedStyle(n).getPropertyValue(e.property))||0,d=Math.round(10*(l+t*("text"!==e.kind||r?1:.1)))/10;"text"!==e.kind&&(d=Math.min(e.max??1e4,Math.max(e.min??0,d))),o.value=`${d}${r}`,a()},r=document.createElement("span");r.className="design-field__glyph",r.setAttribute("aria-hidden","true"),r.title=`${e.label} · drag to adjust`,e.glyph.length>1?r.innerHTML=`<svg viewBox="0 0 12 12"><path d="${e.glyph}"/></svg>`:r.textContent=e.glyph,r.addEventListener("pointerdown",e=>{e.preventDefault(),d(),r.setPointerCapture?.(e.pointerId);let n=e.clientX,i=e=>{let i=Math.trunc((e.clientX-n)/2);i&&(n+=2*i,t(i*(e.shiftKey?10:1)))},o=()=>{r.removeEventListener("pointermove",i),p()};r.addEventListener("pointermove",i),r.addEventListener("pointerup",o,{once:!0}),r.addEventListener("pointercancel",o,{once:!0})}),o.addEventListener("keydown",e=>{"ArrowUp"!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),t(("ArrowUp"===e.key?1:-1)*(e.shiftKey?10:1)))}),i.append(r)}return o instanceof HTMLInputElement&&o.addEventListener("keydown",e=>{"Enter"===e.key&&o.blur()}),i.append(o),i}function a(e,n,i,r=[]){let o=document.createElement("section");o.className="design-section";let l=document.createElement("div");if(l.className="design-section__tools",l.append(...r),!i){let e=document.createElement("span");return e.className="design-section__title",e.textContent=n,o.append(e,l),o}let a=document.createElement("details");a.className="design-group",a.open=!e.collapsed.has(n);let p=document.createElement("summary");p.textContent=n;let s=document.createElement("div");s.className="design-grid";for(let n of i)s.append(d(t.find(e=>e.property===n),e));return a.append(p,s),a.addEventListener("toggle",()=>{a.isConnected&&(a.open?e.collapsed.delete(n):e.collapsed.add(n))}),o.append(l,a),o}function p(e,t){let{element:r,changed:l}=t;n.then(t=>t?.attach(e));let d=getComputedStyle(r),p=e=>e.some(e=>l?.has(e)),s=[...r.childNodes].some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim())||/(?:^|;)\s*(?:color|font|line-height|text-align)/.test(r.getAttribute("style")??"")||p(i),c=/flex|grid/.test(d.display)||p(["gap"]),g="transparent"!==o(d.backgroundColor)||p(["background-color"]),u=["top","right","bottom","left"].some(e=>parseFloat(d.getPropertyValue(`border-${e}-width`))>0&&"none"!==d.getPropertyValue(`border-${e}-style`))||p(["border","border-width","border-style","border-color"]),f=(n,i,r,o)=>function(e,t,n){let i=document.createElement("button");return i.type="button",i.title=e,i.setAttribute("aria-label",e),i.textContent=t,i.addEventListener("click",n),i}(`Add ${n}`,"+",()=>{let n=document.createElement("input");t.begin(n,i),t.apply(n,i,r),t.commit(n,i),t.rerender(),e.querySelector(`[data-property="${o}"]`)?.focus()});e.append(a(t,"Layout",["width","height","padding",...c?["gap"]:[],"margin",...u?[]:["border-radius"],"display"])),s&&e.append(a(t,"Typography",i,[t.editText])),e.append(g?a(t,"Fill",["background-color"]):a(t,"Fill",null,[f("fill","background-color","#ffffff","background-color")]),u?a(t,"Border",["border-width","border-radius","border-style","border-color"]):a(t,"Border",null,[f("border","border","1px solid","border-width")]))}export{e as designPanelStyles,d as fieldControl,t as fields,p as renderPanel,r as toHex,l as valueFor};
package/dist/design-panel-styles.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const designPanelStyles = "\n/* Property controls: compact 28px fields in a two-column grid, icon or letter\n glyphs instead of a label column, and quiet section headers. */\n.design-inspector__controls > * + * { border-top:1px solid #ffffff0d; }\n.design-group { padding:0 12px 10px; }\n.design-section > .design-group { padding-bottom:12px; }\n.design-group summary { cursor:pointer; display:flex; align-items:center; gap:4px; height:36px; color:#e9e6e1; font-size:11px; font-weight:600; list-style:none; }\n.design-group summary::-webkit-details-marker { display:none; }\n.design-group summary::after { content:''; width:5px; height:5px; margin:-2px 0 0 3px; border:solid #77736f; border-width:0 1.2px 1.2px 0; rotate:45deg; opacity:0; transition:opacity .12s,rotate .2s var(--ease-smooth-out); }\n.design-group:not([open]) summary::after { rotate:-45deg; margin:0 0 0 2px; }\n.design-group summary:is(:hover,:focus-visible)::after,.design-group:not([open]) summary::after { opacity:1; }\n.design-group summary:focus-visible { outline-offset:-2px; border-radius:6px; }\n.design-section { position:relative; }\n.design-section__title { display:flex; align-items:center; height:36px; padding:0 12px; color:#898680; font-size:11px; font-weight:600; }\n.design-section__tools { position:absolute; z-index:1; top:6px; right:8px; display:flex; gap:2px; }\n.design-section__tools button { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; color:#898680; font-size:16px; line-height:1; }\n.design-section__tools button:hover { background:#ffffff12; color:#f1efeb; }\n.design-text-edit { font-size:0 !important; }\n.design-text-edit::before { content:'T'; font:600 13px/1 Georgia,\"Times New Roman\",serif; }\n.design-text-edit[aria-label^=\"Finish\"] { background:#bda6ef33; color:#e6dcfb !important; }\n.design-text-edit:disabled { opacity:.35; cursor:default; }\n.design-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 8px; }\n.design-field { position:relative; --lead:4px; min-width:0; height:28px; display:flex; align-items:center; border-radius:6px; background:#ffffff0a; color:#898680; transition:box-shadow .12s var(--ease-smooth-out); }\n.design-field:hover { box-shadow:inset 0 0 0 1px #ffffff1c; }\n.design-field:focus-within { box-shadow:inset 0 0 0 1px #bda6ef; }\n.design-field:has([aria-invalid=\"true\"]) { box-shadow:inset 0 0 0 1px #fda29b; }\n.design-field[data-wide] { grid-column:1/-1; }\n.design-field:has(.design-field__glyph) { --lead:22px; }\n.design-field--color { --lead:26px; }\n.design-field > input:not([type=\"color\"]),.design-field > select { flex:1; box-sizing:border-box; width:100%; min-width:0; height:100%; margin:0; padding:0 8px; border:0; border-radius:6px; outline:0; box-shadow:none; background:none; color:#f1efeb; font:inherit; font-size:11px; font-variant-numeric:tabular-nums; text-overflow:ellipsis; }\n.design-field > :is(input,select):focus-visible { outline:0; }\n.design-field > select { appearance:none; padding-right:20px; cursor:pointer; background:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 3 4 5.5 6.5 3' fill='none' stroke='%23898680' stroke-width='1.2'/%3E%3C/svg%3E\") right 7px center/8px no-repeat; }\n.design-field > select option { background:#191919; }\n.design-field input[type=\"number\"] { appearance:textfield; -moz-appearance:textfield; }\n.design-field input::-webkit-inner-spin-button { appearance:none; }\n.design-field__glyph { flex:none; display:grid; place-items:center; width:22px; height:100%; margin-right:-6px; color:#77736f; font-size:10px; font-weight:600; cursor:ew-resize; user-select:none; touch-action:none; }\n.design-field__glyph:hover { color:#e9e6e1; }\n.design-field__glyph svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.1; }\n.design-field input[type=\"color\"] { flex:none; width:16px; height:16px; margin:0 -2px 0 6px; padding:0; border:0; border-radius:4px; box-shadow:inset 0 0 0 1px #ffffff26; background:none; cursor:pointer; }\n.design-field input[type=\"color\"]::-webkit-color-swatch-wrapper { padding:0; }\n.design-field input[type=\"color\"]::-webkit-color-swatch { border:0; border-radius:4px; box-shadow:inset 0 0 0 1px #ffffff26; }\n.design-field input[type=\"color\"]::-moz-color-swatch { border:0; border-radius:4px; }\n";
1
+ export declare const designPanelStyles = "\n/* Property controls: compact 28px fields in a two-column grid, icon or letter\n glyphs instead of a label column, and quiet section headers. */\n.design-inspector__controls > * + * { border-top:1px solid #ffffff0d; }\n.design-group { padding:0 12px 10px; }\n.design-section > .design-group { padding-bottom:12px; }\n.design-group summary { cursor:pointer; display:flex; align-items:center; gap:4px; height:36px; color:#e9e6e1; font-size:11px; font-weight:600; list-style:none; }\n.design-group summary::-webkit-details-marker { display:none; }\n.design-group summary::after { content:''; width:5px; height:5px; margin:-2px 0 0 3px; border:solid #77736f; border-width:0 1.2px 1.2px 0; rotate:45deg; opacity:0; transition:opacity .12s,rotate .2s var(--ease-smooth-out); }\n.design-group:not([open]) summary::after { rotate:-45deg; margin:0 0 0 2px; }\n.design-group summary:is(:hover,:focus-visible)::after,.design-group:not([open]) summary::after { opacity:1; }\n.design-group summary:focus-visible { outline-offset:-2px; border-radius:6px; }\n.design-section { position:relative; }\n.design-section__title { display:flex; align-items:center; height:36px; padding:0 12px; color:#898680; font-size:11px; font-weight:600; }\n.design-section__tools { position:absolute; z-index:1; top:6px; right:8px; display:flex; gap:2px; }\n.design-section__tools button { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; color:#898680; font-size:16px; line-height:1; }\n.design-section__tools button:hover { background:#ffffff12; color:#f1efeb; }\n.design-text-edit { font-size:0 !important; }\n.design-text-edit::before { content:'T'; font:600 13px/1 Georgia,\"Times New Roman\",serif; }\n.design-text-edit[aria-label^=\"Finish\"] { background:#bda6ef33; color:#e6dcfb !important; }\n.design-text-edit:disabled { opacity:.35; cursor:default; }\n.design-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 8px; }\n.design-field { position:relative; --lead:4px; min-width:0; height:28px; display:flex; align-items:center; border-radius:6px; background:#ffffff0a; color:#898680; transition:box-shadow .12s var(--ease-smooth-out); }\n.design-field:hover { box-shadow:inset 0 0 0 1px #ffffff1c; }\n.design-field:focus-within { box-shadow:inset 0 0 0 1px #bda6ef; }\n.design-field:has([aria-invalid=\"true\"]) { box-shadow:inset 0 0 0 1px #fda29b; }\n.design-field[data-wide] { grid-column:1/-1; }\n.design-field:has(.design-field__glyph) { --lead:22px; }\n.design-field--color { --lead:26px; }\n.design-field > input:not([type=\"color\"]),.design-field > select { flex:1; box-sizing:border-box; width:100%; min-width:0; height:100%; margin:0; padding:0 8px; border:0; border-radius:6px; outline:0; box-shadow:none; background:none; color:#f1efeb; font:inherit; font-size:11px; font-variant-numeric:tabular-nums; text-overflow:ellipsis; }\n.design-field > :is(input,select):focus-visible { outline:0; }\n.design-field input[type=\"number\"] { appearance:textfield; -moz-appearance:textfield; }\n.design-field input::-webkit-inner-spin-button { appearance:none; }\n.design-field__glyph { flex:none; display:grid; place-items:center; width:22px; height:100%; margin-right:-6px; color:#77736f; font-size:10px; font-weight:600; cursor:ew-resize; user-select:none; touch-action:none; }\n.design-field__glyph:hover { color:#e9e6e1; }\n.design-field__glyph svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.1; }\n.design-field input[type=\"color\"] { flex:none; width:16px; height:16px; margin:0 -2px 0 6px; padding:0; border:0; border-radius:4px; box-shadow:inset 0 0 0 1px #ffffff26; background:none; cursor:pointer; }\n.design-field input[type=\"color\"]::-webkit-color-swatch-wrapper { padding:0; }\n.design-field input[type=\"color\"]::-webkit-color-swatch { border:0; border-radius:4px; box-shadow:inset 0 0 0 1px #ffffff26; }\n.design-field input[type=\"color\"]::-moz-color-swatch { border:0; border-radius:4px; }\n";
package/dist/design-system.d.ts CHANGED
@@ -96,7 +96,11 @@ export interface DesignSystem {
96
96
  }
97
97
  /**
98
98
  * Machine-readable record of a Design mode proposal, versioned so the CLI and
99
- * agents can apply it. Comments carry it alongside the human-readable text.
99
+ * agents can apply it. Comments carry it as human-readable text: besides the
100
+ * changes, the first proposal section names its context in lines such as
101
+ * "Theme: mode=dark, density=compact", "Component: PromoCard (src/card.tsx:19)"
102
+ * and 'Props: tone="calm", compact=false', which fill `theme` and
103
+ * `target.component`. Comments without those lines still parse.
100
104
  */
101
105
  export interface DesignEdit {
102
106
  komo: "design-edit";
@@ -132,12 +136,18 @@ export type DesignEditChange =
132
136
  from: string;
133
137
  to: string;
134
138
  }
135
- /** Change a component prop (from `useKomoInspectable` or the component adapter). */
139
+ /**
140
+ * Change a component prop (from `useKomoInspectable` or the component adapter).
141
+ * `token` is the style token path the new value binds, e.g. "color.brand"
142
+ * for var(--color-brand); absent for custom values. Optional, so v1 edits
143
+ * without it stay valid.
144
+ */
136
145
  | {
137
146
  kind: "prop";
138
147
  name: string;
139
148
  from: ComponentPropValue | undefined;
140
149
  to: ComponentPropValue | undefined;
150
+ token?: string;
141
151
  }
142
152
  /** Change text content. */
143
153
  | {
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import{b as o,c as s}from"./chunk-HCGLCO3R.js";import"./chunk-KMYXE4O6.js";import"./chunk-Y2GRLW4Q.js";import"./chunk-7YUXYVQA.js";import"./chunk-62YUEO4G.js";import"./chunk-I7AUKTXE.js";export{s as initComments,o as initKomo};
1
+ import{b as o,c as s}from"./chunk-SOY4SE7F.js";import"./chunk-KMYXE4O6.js";import"./chunk-DH22G2S5.js";import"./chunk-7YUXYVQA.js";import"./chunk-62YUEO4G.js";import"./chunk-I7AUKTXE.js";export{s as initComments,o as initKomo};
package/dist/{inline-text-editor-3JLDAUPO.js → inline-text-editor-2J7DVJQY.js} RENAMED
@@ -1 +1 @@
1
- import"./chunk-I7AUKTXE.js";var e="script,style,svg,input,textarea,select,[data-private],[data-sensitive]";function t(e){let t=document.createTreeWalker(e,NodeFilter.SHOW_TEXT),n=[];for(;t.nextNode();)n.push(t.currentNode);return n}function n(e,t,n){if(n&&e.childElementCount)for(let[e,t]of n)e.data=t;else e.textContent=t}function a(){let e=new Map,t=new Map,a=[],r=new Map;return{record(n){!n.reactProp&&n.before!==n.after&&(e.has(n.element)||(e.set(n.element,n.before),t.set(n.element,n.nodes)),a.push(n))},remember(t,n){e.has(t)||e.set(t,n)},original:t=>e.get(t),reconcile(t,n){e.get(t)===n&&e.delete(t)},reset(r){let o=e.get(r);void 0!==o&&n(r,o,t.get(r)),e.delete(r);for(let e=a.length-1;e>=0;e--)a[e].element===r&&a.splice(e,1)},proposal(t){let n=e.get(t),a=t.textContent??"";return void 0!==n&&n!==a?`Proposed inline text change (preview only)\n- Text: ${JSON.stringify(n)} → ${JSON.stringify(a)}\n- Source markup is unchanged; refresh resets this preview.`:void 0},restoreAll(){for(let[a,r]of e)n(a,r,t.get(a));e.clear(),a.length=0},showBefore(a){if(a)for(let[a,o]of e){let e=t.get(a);r.set(a,[a.textContent??"",e?.map(([e])=>[e,e.data])]),n(a,o,e)}else for(let[e,[t,a]]of r)n(e,t,a);a||r.clear()},undo(){let t=a.pop();return t?(n(t.element,t.before,t.nodes),e.get(t.element)===t.before&&e.delete(t.element),t.element):null}}}function r(e){let t=a(),n=null,r=!1;function o(t=!1){let a=n;a&&(n=null,a.finish(t),e.onChange())}return{get element(){return n?.element??null},get busy(){return r},isEditing:e=>!!n&&n.element===e,toggle:async function(a){let l=e.selected();if(n&&n.element===l)return void o();if(!l||!e.active()||r||n)return;let s=i(l);if(s)e.status.textContent=s;else{r=!0,e.status.textContent="Loading inline text editor…",e.onChange();try{let r=await d(l,{loadReactBridge:async()=>await import("./react-props-panel-R5XEVATL.js"),onFinish(n,a){a||n.reactProp||n.before===n.after?n.reactProp&&(e.status.textContent="React state preview · resets on exit"):(t.record(n),e.onCommit(l),e.status.textContent="Text preview · resets on exit")}});r?e.active()&&e.selected()===l?(n=r,a&&function(e,t,n){let a=document.caretPositionFromPoint?.(t,n),r=a?document.createRange():document.caretRangeFromPoint?.(t,n);if(a&&r&&r.setStart(a.offsetNode,a.offset),!r||!e.contains(r.startContainer))return;r.collapse(!0);let o=document.getSelection();o?.removeAllRanges(),o?.addRange(r)}(l,a.clientX,a.clientY),e.status.textContent=l.hasAttribute("data-komo-text-prop")?"React state preview · resets on exit":"Editing text · preview only"):r.finish(!0):e.status.textContent="This text couldn't be connected to its component prop."}catch{e.status.textContent="Inline text editing is unavailable."}finally{r=!1,e.onChange()}}},finish:o,handleKey(e){if(!n||!e.composedPath().includes(n.element)||!n.handleKey(e))return!1;let t=n.element;return o("Escape"===e.key),t.blur(),!0},hasChanges:e=>void 0!==t.original(e),undo(){let n=t.undo();return e.onChange(),n},reset(n){t.reset(n),e.onChange()},reconcile(n,a){t.reconcile(n,a),e.onChange()},proposal:e=>t.proposal(e),restoreAll(){t.restoreAll()},showBefore:t.showBefore}}function o(e){let t=r(e);return e.button.addEventListener("click",e=>{t.toggle(e)}),t}function i(n){return n.matches("input,textarea,select")?"Form fields can't be edited as text.":n.matches("script,style,svg,canvas,video,audio,iframe")?"Graphics, media, and frames can't be edited.":n.closest("[data-private],[data-sensitive]")?"This text is marked private, so it stays read-only.":n.closest("[contenteditable]")?"This text is already editable on the page.":t(n).some(t=>t.data.trim()&&!t.parentElement?.closest(e))?null:"No text here. Double-click the text itself."}function l(e){return!i(e)}function s(e){let t=e.textContent??"",n=document.getSelection(),a=n?.rangeCount?n.getRangeAt(0):null;return a&&e.contains(a.commonAncestorContainer)?a.startContainer===e?Math.min([...e.childNodes].slice(0,a.startOffset).reduce((e,t)=>e+(t.textContent?.length??0),0),t.length):a.startContainer.nodeType===Node.TEXT_NODE?Math.min(a.startOffset,t.length):t.length:-1}function c(e,t){let n=e.firstChild,a=document.getSelection();if(!n||!a)return;let r=document.createRange();r.setStart(n,Math.min(t,n.textContent?.length??0)),r.collapse(!0),a.removeAllRanges(),a.addRange(r)}async function d(a,r){if(!l(a))return null;let o=null,i=null;if(a.dataset.komoTextProp&&(o=await r.loadReactBridge(),i=o.beginReactTextEdit(a),!i))return null;let d=i?.before??(a.textContent??"").slice(0,500),u=!i&&a.childElementCount>0,g=u?t(a).map(e=>[e,e.data]):void 0,p=a.getAttribute("role"),f=a.getAttribute("aria-label"),m=a.getAttribute("aria-multiline"),h=a.getAttribute("spellcheck"),x=new AbortController,C=!1;let v=-1,b=new MutationObserver(()=>{v>=0&&c(a,v)}),T=()=>{u||(a.childElementCount&&(a.textContent=a.textContent??""),(a.textContent??"").length>500&&(a.textContent=(a.textContent??"").slice(0,500)),i&&o&&(v=s(a),o.previewReactTextEdit(a,i.propName,a.textContent??"")||(a.textContent=d)))},E=(t,n)=>{let r=t.startContainer;if(r!==t.endContainer||!(r instanceof Text)||!a.contains(r)||r.parentElement?.closest(e))return;let o=t.endOffset-t.startOffset,i=n.replace(/[\r\n]+/g," ").slice(0,Math.max(0,500-(a.textContent??"").length+o));r.replaceData(t.startOffset,o,i);let l=document.createRange();l.setStart(r,t.startOffset+i.length);let s=document.getSelection();s?.removeAllRanges(),s?.addRange(l)};a.addEventListener("beforeinput",e=>{if(v=-1,!u||"insertCompositionText"===e.inputType)return;e.preventDefault();let t=e.getTargetRanges()[0],n=e.inputType;t&&(n.startsWith("delete")||"insertText"===n||"insertReplacementText"===n)&&E(t,n.startsWith("delete")?"":e.data??e.dataTransfer?.getData("text/plain")??"")},{signal:x.signal}),a.addEventListener("input",T,{signal:x.signal}),i&&b.observe(a,{childList:!0,characterData:!0,subtree:!0}),a.addEventListener("paste",e=>{e.preventDefault();let t=e.clipboardData?.getData("text/plain")??"",n=document.getSelection();u?n?.rangeCount&&E(n.getRangeAt(0),t):(function(e,t){let n=s(e);if(n<0)return;let a=e.textContent??"",r=t.slice(0,Math.max(0,500-a.length));e.textContent=a.slice(0,n)+r+a.slice(n),c(e,n+r.length)}(a,t.replace(/[\r\n]+/g," ").slice(0,500)),T())},{signal:x.signal}),a.addEventListener("drop",e=>e.preventDefault(),{signal:x.signal}),a.setAttribute("contenteditable","true"),a.setAttribute("role","textbox"),a.setAttribute("aria-label","Inline text preview"),a.setAttribute("aria-multiline","false"),a.dataset.komoInlineEditing="true",a.spellcheck=!1,a.focus({preventScroll:!0});let A=document.getSelection(),R=document.createRange();return R.selectNodeContents(a),R.collapse(!1),A?.removeAllRanges(),A?.addRange(R),{element:a,finish(e=!1){if(C)return;C=!0,x.abort(),b.disconnect(),!u&&a.childElementCount&&(a.textContent=a.textContent??"");let t=(a.textContent??"").slice(0,500);(function(){a.removeAttribute("contenteditable"),a.removeAttribute("data-komo-inline-editing");for(let[e,t]of[["role",p],["aria-label",f],["aria-multiline",m],["spellcheck",h]])null===t?a.removeAttribute(e):a.setAttribute(e,t)})(),e?(i&&o&&o.cancelReactTextEdit(a,i.propName,d),n(a,d,g)):i&&o&&o.finishReactTextEdit(a,i.propName,d,t),r.onFinish({element:a,before:d,after:t,nodes:g,...i?{reactProp:i.propName}:{}},e)},handleKey:e=>!e.isComposing&&(("Enter"===e.key||"Escape"===e.key)&&(e.preventDefault(),e.stopImmediatePropagation(),!0))}}export{o as bindInlineTextTools,l as canEditText,r as createInlineTextTools,a as createTextPreviewHistory,d as startInlineTextEditor,i as textEditBlocker};
1
+ import"./chunk-I7AUKTXE.js";var e="script,style,svg,input,textarea,select,[data-private],[data-sensitive]";function t(e){let t=document.createTreeWalker(e,NodeFilter.SHOW_TEXT),n=[];for(;t.nextNode();)n.push(t.currentNode);return n}function n(e,t,n){if(n&&e.childElementCount)for(let[e,t]of n)e.data=t;else e.textContent=t}function a(){let e=new Map,t=new Map,a=[],r=new Map;return{record(n){!n.reactProp&&n.before!==n.after&&(e.has(n.element)||(e.set(n.element,n.before),t.set(n.element,n.nodes)),a.push(n))},remember(t,n){e.has(t)||e.set(t,n)},original:t=>e.get(t),reconcile(t,n){e.get(t)===n&&e.delete(t)},reset(r){let o=e.get(r);void 0!==o&&n(r,o,t.get(r)),e.delete(r);for(let e=a.length-1;e>=0;e--)a[e].element===r&&a.splice(e,1)},proposal(t){let n=e.get(t),a=t.textContent??"";return void 0!==n&&n!==a?`Proposed inline text change (preview only)\n- Text: ${JSON.stringify(n)} → ${JSON.stringify(a)}\n- Source markup is unchanged; refresh resets this preview.`:void 0},restoreAll(){for(let[a,r]of e)n(a,r,t.get(a));e.clear(),a.length=0},showBefore(a){if(a)for(let[a,o]of e){let e=t.get(a);r.set(a,[a.textContent??"",e?.map(([e])=>[e,e.data])]),n(a,o,e)}else for(let[e,[t,a]]of r)n(e,t,a);a||r.clear()},undo(){let t=a.pop();return t?(n(t.element,t.before,t.nodes),e.get(t.element)===t.before&&e.delete(t.element),t.element):null}}}function r(e){let t=a(),n=null,r=!1;function o(t=!1){let a=n;a&&(n=null,a.finish(t),e.onChange())}return{get element(){return n?.element??null},get busy(){return r},isEditing:e=>!!n&&n.element===e,toggle:async function(a){let l=e.selected();if(n&&n.element===l)return void o();if(!l||!e.active()||r||n)return;let s=i(l);if(s)e.status.textContent=s;else{r=!0,e.status.textContent="Loading inline text editor…",e.onChange();try{let r=await d(l,{loadReactBridge:async()=>await import("./react-props-panel-YJOE56ZS.js"),onFinish(n,a){a||n.reactProp||n.before===n.after?n.reactProp&&(e.status.textContent="React state preview · resets on exit"):(t.record(n),e.onCommit(l),e.status.textContent="Text preview · resets on exit")}});r?e.active()&&e.selected()===l?(n=r,a&&function(e,t,n){let a=document.caretPositionFromPoint?.(t,n),r=a?document.createRange():document.caretRangeFromPoint?.(t,n);if(a&&r&&r.setStart(a.offsetNode,a.offset),!r||!e.contains(r.startContainer))return;r.collapse(!0);let o=document.getSelection();o?.removeAllRanges(),o?.addRange(r)}(l,a.clientX,a.clientY),e.status.textContent=l.hasAttribute("data-komo-text-prop")?"React state preview · resets on exit":"Editing text · preview only"):r.finish(!0):e.status.textContent="This text couldn't be connected to its component prop."}catch{e.status.textContent="Inline text editing is unavailable."}finally{r=!1,e.onChange()}}},finish:o,handleKey(e){if(!n||!e.composedPath().includes(n.element)||!n.handleKey(e))return!1;let t=n.element;return o("Escape"===e.key),t.blur(),!0},hasChanges:e=>void 0!==t.original(e),undo(){let n=t.undo();return e.onChange(),n},reset(n){t.reset(n),e.onChange()},reconcile(n,a){t.reconcile(n,a),e.onChange()},proposal:e=>t.proposal(e),restoreAll(){t.restoreAll()},showBefore:t.showBefore}}function o(e){let t=r(e);return e.button.addEventListener("click",e=>{t.toggle(e)}),t}function i(n){return n.matches("input,textarea,select")?"Form fields can't be edited as text.":n.matches("script,style,svg,canvas,video,audio,iframe")?"Graphics, media, and frames can't be edited.":n.closest("[data-private],[data-sensitive]")?"This text is marked private, so it stays read-only.":n.closest("[contenteditable]")?"This text is already editable on the page.":t(n).some(t=>t.data.trim()&&!t.parentElement?.closest(e))?null:"No text here. Double-click the text itself."}function l(e){return!i(e)}function s(e){let t=e.textContent??"",n=document.getSelection(),a=n?.rangeCount?n.getRangeAt(0):null;return a&&e.contains(a.commonAncestorContainer)?a.startContainer===e?Math.min([...e.childNodes].slice(0,a.startOffset).reduce((e,t)=>e+(t.textContent?.length??0),0),t.length):a.startContainer.nodeType===Node.TEXT_NODE?Math.min(a.startOffset,t.length):t.length:-1}function c(e,t){let n=e.firstChild,a=document.getSelection();if(!n||!a)return;let r=document.createRange();r.setStart(n,Math.min(t,n.textContent?.length??0)),r.collapse(!0),a.removeAllRanges(),a.addRange(r)}async function d(a,r){if(!l(a))return null;let o=null,i=null;if(a.dataset.komoTextProp&&(o=await r.loadReactBridge(),i=o.beginReactTextEdit(a),!i))return null;let d=i?.before??(a.textContent??"").slice(0,500),u=!i&&a.childElementCount>0,g=u?t(a).map(e=>[e,e.data]):void 0,p=a.getAttribute("role"),f=a.getAttribute("aria-label"),m=a.getAttribute("aria-multiline"),h=a.getAttribute("spellcheck"),x=new AbortController,C=!1;let v=-1,b=new MutationObserver(()=>{v>=0&&c(a,v)}),T=()=>{u||(a.childElementCount&&(a.textContent=a.textContent??""),(a.textContent??"").length>500&&(a.textContent=(a.textContent??"").slice(0,500)),i&&o&&(v=s(a),o.previewReactTextEdit(a,i.propName,a.textContent??"")||(a.textContent=d)))},E=(t,n)=>{let r=t.startContainer;if(r!==t.endContainer||!(r instanceof Text)||!a.contains(r)||r.parentElement?.closest(e))return;let o=t.endOffset-t.startOffset,i=n.replace(/[\r\n]+/g," ").slice(0,Math.max(0,500-(a.textContent??"").length+o));r.replaceData(t.startOffset,o,i);let l=document.createRange();l.setStart(r,t.startOffset+i.length);let s=document.getSelection();s?.removeAllRanges(),s?.addRange(l)};a.addEventListener("beforeinput",e=>{if(v=-1,!u||"insertCompositionText"===e.inputType)return;e.preventDefault();let t=e.getTargetRanges()[0],n=e.inputType;t&&(n.startsWith("delete")||"insertText"===n||"insertReplacementText"===n)&&E(t,n.startsWith("delete")?"":e.data??e.dataTransfer?.getData("text/plain")??"")},{signal:x.signal}),a.addEventListener("input",T,{signal:x.signal}),i&&b.observe(a,{childList:!0,characterData:!0,subtree:!0}),a.addEventListener("paste",e=>{e.preventDefault();let t=e.clipboardData?.getData("text/plain")??"",n=document.getSelection();u?n?.rangeCount&&E(n.getRangeAt(0),t):(function(e,t){let n=s(e);if(n<0)return;let a=e.textContent??"",r=t.slice(0,Math.max(0,500-a.length));e.textContent=a.slice(0,n)+r+a.slice(n),c(e,n+r.length)}(a,t.replace(/[\r\n]+/g," ").slice(0,500)),T())},{signal:x.signal}),a.addEventListener("drop",e=>e.preventDefault(),{signal:x.signal}),a.setAttribute("contenteditable","true"),a.setAttribute("role","textbox"),a.setAttribute("aria-label","Inline text preview"),a.setAttribute("aria-multiline","false"),a.dataset.komoInlineEditing="true",a.spellcheck=!1,a.focus({preventScroll:!0});let y=document.getSelection(),A=document.createRange();return A.selectNodeContents(a),A.collapse(!1),y?.removeAllRanges(),y?.addRange(A),{element:a,finish(e=!1){if(C)return;C=!0,x.abort(),b.disconnect(),!u&&a.childElementCount&&(a.textContent=a.textContent??"");let t=(a.textContent??"").slice(0,500);(function(){a.removeAttribute("contenteditable"),a.removeAttribute("data-komo-inline-editing");for(let[e,t]of[["role",p],["aria-label",f],["aria-multiline",m],["spellcheck",h]])null===t?a.removeAttribute(e):a.setAttribute(e,t)})(),e?(i&&o&&o.cancelReactTextEdit(a,i.propName,d),n(a,d,g)):i&&o&&o.finishReactTextEdit(a,i.propName,d,t),r.onFinish({element:a,before:d,after:t,nodes:g,...i?{reactProp:i.propName}:{}},e)},handleKey:e=>!e.isComposing&&(("Enter"===e.key||"Escape"===e.key)&&(e.preventDefault(),e.stopImmediatePropagation(),!0))}}export{o as bindInlineTextTools,l as canEditText,r as createInlineTextTools,a as createTextPreviewHistory,d as startInlineTextEditor,i as textEditBlocker};