@hazem3500/komo 0.9.1 → 0.9.3

package/dist/design-comment-MPAF2YAN.js

@@ -0,0 +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-comment.d.ts

@@ -46,5 +46,8 @@ export interface DesignCommentOptions {
 }
 /** Replace `container`'s content with a change card for each proposal. */
 export declare function renderDesignComment(container: HTMLElement, body: string, options: DesignCommentOptions): void;
-/** A proposal being written: read-only, since the change is already live on the page. */
-export declare function renderDraftProposal(container: HTMLElement, body: string): void;
+/**
+ * A proposal being written. Design mode has already restored the page, so the
+ * card starts on After; posting or closing the composer resets it.
+ */
+export declare function renderDraftProposal(container: HTMLElement, body: string, resolve: DesignCommentOptions["resolve"]): void;

package/dist/design-export-DD2NJI4O.js

@@ -0,0 +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

@@ -1,8 +1,20 @@
-/** On-demand formatting for Design mode's Copy CSS and comment proposal actions. */
+/** On-demand helpers for Design mode's footer: Copy CSS, comment proposals and tool tooltips. */
+/**
+ * A selector that matches exactly `element`: a path of :nth-of-type steps from
+ * body or the nearest unique, non-generated id. Utility classes alone match
+ * dozens of elements in Tailwind apps, so they only label the last step.
+ */
 export declare function cssSelector(element: Element): string;
 export declare function cssText(element: Element, values: Map<string, string>): string;
 /**
  * One proposal for everything previewed on the element. Token-bound properties
  * are described by the token section, so they are not repeated as raw CSS.
+ * `context` lines (theme, component, props) join the first section, after its
+ * header and target; a section's own Component line wins over the context's.
+ */
+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;
+/**
+ * Footer controls use the toolbar's tooltip surface, like the Comments header.
+ * Loaded on the bar's first hover or focus, which `first` replays.
  */
-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;
+export declare function footerTips(bar: HTMLElement, root: ShadowRoot, signal: AbortSignal, first: Event): void;

package/dist/design-mode-styles.d.ts

@@ -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";
+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.d.ts

@@ -1,3 +1,4 @@
+import type { DesignSystem } from "./design-system.js";
 export interface DesignModeOptions {
     root: ShadowRoot;
     /** Shared Komo sidebar surface; the inspector rides its morph. Tests may omit it. */
@@ -10,6 +11,8 @@ export interface DesignModeOptions {
     exitKey?: string;
     /** Move the floating panel to the other side when it covers the target. */
     flip?(): void;
+    /** The app's design-system adapters; `tokens` replaces CSS-variable token chips. */
+    design?: DesignSystem;
 }
 export declare function createDesignMode(options: DesignModeOptions): {
     setActive: (value: boolean) => void;

package/dist/design-mode.js

@@ -1 +1 @@
-import{i as e}from"./chunk-YZP3KX4Y.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},()=>{x.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 b=document.createElement("span");b.className="design-inspector__count",b.title="Preview only · resets on refresh";let x=document.createElement("p");x.className="design-inspector__status",x.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(b,P,x,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,R=null,N=null,B=null,$=0,I=0,j=null,F="",H=null,V=null,K=new Map,O=new Map,U=new WeakMap,W=new WeakMap,X=new AbortController,q=new Set,Y=[];function Q(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 Z(e,t){let n=O.get(e);n||O.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||O.delete(e),ae(R,"selected")}let G=0;new MutationObserver(()=>{let e=x.textContent??"";x.title=e,h.toggleAttribute("data-message",!!e),window.clearTimeout(G),e&&(G=window.setTimeout(function e(){B?.element?G=window.setTimeout(e,2600):x.textContent=""},2600))}).observe(x,{childList:!0,characterData:!0,subtree:!0});let J=!1;function ee(e){if(e===J)return;e&&B?.element&&me(),J=e;let t=!("function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches);for(let[n,i]of O){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){R&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(Q(R,t),H?.noteDesignTokenOverride(R,t,n),R.style.setProperty(t,n,K.get(R)?.get(t)?.priority),Z(R,t),ue()))}function ie(e,t,n=!0){if(!R)return;let i={value:R.style.getPropertyValue(t),priority:R.style.getPropertyPriority(t)},o=W.get(e),s=o?.before??U.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:R,property:t,before:s,after:i};Y.push(n),W.set(e,n)}n&&(U.set(e,i),W.delete(e)),ue()}function oe(){if(f.replaceChildren(),se(),!R){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=`${R.tagName.toLowerCase()}${R.id?`#${R.id}`:""}`;c.textContent=t,p.textContent=R instanceof HTMLIFrameElement?"Frame only · contents are isolated":R.classList.length?`.${[...R.classList].slice(0,2).join(".")}`:"";let i=R.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=R,r=o;r?(r.renderPanel(f,{element:a,changed:O.get(a),collapsed:q,editText:C,begin:(e,t)=>U.set(e,{value:a.style.getPropertyValue(t),priority:a.style.getPropertyPriority(t)}),apply:ne,commit:ie,rerender:oe}),a.closest("[data-komo-inspectable], [data-komo-design-tokens]")&&(V??=import("./react-props-panel-XQ4T3RLV.js").then(e=>H=e).catch(e=>{throw V=null,e}),V.then(e=>{if(!S||R!==a||f.querySelector(".design-react-group, .design-theme-group"))return;let t=n.root,i=e.createReactPropsPanel(a,()=>{x.textContent="React state preview · resets on refresh",ue()},t,le);i&&f.append(i),e.attachStyleTokenControls(a,r.fields,f,(e,t,n)=>{Q(a,e.property,n),Z(a,e.property),U.set(t,{value:n,priority:a.style.getPropertyPriority(e.property)}),ie(t,e.property)},t,r.valueFor,r.toHex);let o=e.createDesignThemePanel(a,r,ue,t);o&&f.append(o)}).catch(()=>{}))):s.then(()=>{S&&R===a&&oe()})}function se(){a.toggleAttribute("data-empty",k.hidden=!R),a.parentElement?.toggleAttribute("data-design-empty",S&&!R)}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!==j||t!==F)){j=e,F=t,window.clearTimeout(I);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)&&(I=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(R??N,R?"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),R=e,N=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(),function(){let e=R,t=e?(O.get(e)?.size??0)+ +!!B?.hasChanges(e)+ +!!H?.hasReactPropChanges(e)||+!!H?.hasDesignTokenEdit(e):0;b.textContent=t?`${t} change${t>1?"s":""}`:"",h.toggleAttribute("data-changes",t>0||Y.length>0||!(!e||!H?.canUndoReactProp(e)&&!H?.canUndoDesignTokenEdit(e))),P.hidden=!t&&!J}(),_.disabled=!(0!==Y.length||R&&H?.canUndoReactProp(R)||R&&H?.canUndoDesignTokenEdit(R)),w.disabled=!R||!O.get(R)?.size&&!B?.hasChanges(R)&&!H?.hasReactPropChanges(R)&&!H?.hasDesignTokenEdit(R),E.disabled=!R||!O.get(R)?.size,k.disabled=!R,C.disabled=!!B?.busy||!R?.isConnected,C.textContent=B?.isEditing(R)?"Done editing":"Edit text",C.setAttribute("aria-label",B?.isEditing(R)?"Finish inline text editing":"Edit selected text inline")}function me(e=!1){B?.finish(e),ue()}function fe(e){e||ee(!1),!e&&B?.element&&me(),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=!R,oe(),pe(!R),ae(R,"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||R&&(x.textContent="Loading inline text editor…",import("./inline-text-editor-SWPVB35B.js").then(t=>{B||!R||!S||(B=t.bindInlineTextTools({button:C,status:x,selected:()=>R,active:()=>S,onChange:ue,onCommit(e){Y.push({kind:"text",element:e})}}),B.toggle(e))}).catch(()=>{x.textContent="Inline text editing is unavailable."}))}),u.addEventListener("click",()=>pe(!a.hasAttribute("data-folded"))),l.addEventListener("click",()=>le(R?.parentElement??null)),g.addEventListener("click",()=>{B?.element&&me(),fe(!1),n.onExit()}),_.addEventListener("click",()=>{let e=Y.pop();e?"text"===e.kind?R===(B?.undo()??e.element)&&oe():(te(e.element,e.property,e.before),H?.syncDesignTokenBinding(e.element,e.property),Z(e.element,e.property),R===e.element&&oe(),ae(R??N,R?"selected":"hover")):(R&&(H?.undoDesignTokenEdit(R),H?.undoReactProp(R),oe()),x.textContent="React state preview · resets on refresh"),ue(),(_.disabled?g:_).focus({preventScroll:!0})}),w.addEventListener("click",()=>{if(!R)return;B?.isEditing(R)&&me(!0);let e=O.get(R),t=B?.hasChanges(R)??!1,n=H?.hasReactPropChanges(R)??!1,i=H?.hasDesignTokenEdit(R)??!1;if(e?.size||t||n||i){t&&B?.reset(R);for(let t of e?.keys()??[])te(R,t,K.get(R)?.get(t));O.delete(R),n&&H?.resetReactProps(R),i&&H?.resetDesignTokenEdits(R);for(let e=Y.length-1;e>=0;e--)Y[e].element===R&&Y.splice(e,1);oe(),ae(R,"selected"),ue(),g.focus({preventScroll:!0})}});let he=()=>import("./design-export-BRBI7S3V.js");E.addEventListener("click",()=>{let e=R,t=e?O.get(e):void 0;!e||!t?.size||he().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),x.textContent="CSS copied"}catch{x.textContent=i}})}),k.addEventListener("click",()=>{let e=R;e&&(B?.isEditing(e)&&me(),he().then(({designProposal:t})=>n.onComment(e,t(e,O.get(e),t=>K.get(e)?.get(t)?.computed,H?.tokenBoundProperties(e),[B?.proposal(e),H?.proposedDesignChanges(e)])),()=>{x.textContent="Comment unavailable · try again"}))});let be=()=>ee(!1);for(let e of[f,y,C])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,be,!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)||(N=t,R||ae(N,"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(),R&&ge(R),2===e.detail&&R?.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?!J:"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(){ee(!1),B?.element&&me(!0),window.clearTimeout(D),window.clearTimeout(G),window.clearTimeout(I),de?.disconnect(),X.abort(),cancelAnimationFrame($);for(let[e,t]of K)for(let[n,i]of t)te(e,n,i);B?.restoreAll(),a.remove(),r.remove(),T.remove(),i.remove()}}}export{n as createDesignMode};
+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

@@ -0,0 +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

@@ -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";
+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

@@ -96,13 +96,21 @@ export interface DesignSystem {
 }
 /**
  * Machine-readable record of a Design mode proposal, versioned so the CLI and
- * agents can apply it. Comments carry it alongside the human-readable text.
+ * agents can apply it. Comments carry it as human-readable text: besides the
+ * changes, the first proposal section names its context in lines such as
+ * "Theme: mode=dark, density=compact", "Component: PromoCard (src/card.tsx:19)"
+ * and 'Props: tone="calm", compact=false', which fill `theme` and
+ * `target.component`. Comments without those lines still parse.
  */
 export interface DesignEdit {
     komo: "design-edit";
     version: 1;
     target: {
-        /** CSS selector for the edited element at proposal time. */
+        /**
+         * Selector that matched exactly the edited element at proposal time: a
+         * :nth-of-type path from body or a unique id. The comment's anchor
+         * (scoped path, text and context) re-finds the element if the page changes.
+         */
         selector: string;
         component?: Omit<ComponentIdentity, "element">;
     };
@@ -128,12 +136,18 @@ export type DesignEditChange =
     from: string;
     to: string;
 }
-/** Change a component prop (from `useKomoInspectable` or the component adapter). */
+/**
+ * Change a component prop (from `useKomoInspectable` or the component adapter).
+ * `token` is the style token path the new value binds, e.g. "color.brand"
+ * for var(--color-brand); absent for custom values. Optional, so v1 edits
+ * without it stay valid.
+ */
  | {
     kind: "prop";
     name: string;
     from: ComponentPropValue | undefined;
     to: ComponentPropValue | undefined;
+    token?: string;
 }
 /** Change text content. */
  | {

package/dist/design-tokens.d.ts

@@ -1,3 +1,4 @@
+import type { TokenAdapter } from "./design-system.js";
 /** Explicit bridge from a site's named CSS custom properties into Design mode. */
 export type KomoDesignTokenType = "color" | "dimension" | "fontFamily" | "fontWeight" | "lineHeight";
 export interface KomoDesignToken {
@@ -75,4 +76,13 @@ export declare function hasDesignTokenChanges(element: HTMLElement): boolean;
 export declare function canUndoDesignToken(element: HTMLElement | null): boolean;
 export declare function undoDesignToken(element: HTMLElement): void;
 export declare function resetDesignTokens(element: HTMLElement): void;
+/** Restore every element and shared theme value, e.g. when Design mode closes. */
+export declare function resetAllDesignTokens(): void;
 export declare function proposedDesignTokenChanges(element: HTMLElement): string | undefined;
+/**
+ * The built-in token adapter: CSS custom properties registered with
+ * `useKomoDesignTokens`. Design mode uses it when `design.tokens` is not set.
+ * `resolve()` reports a token only when the winning declaration references its
+ * variable, and an off-token value for the other allowlisted properties.
+ */
+export declare function cssVariableTokens(): TokenAdapter;

package/dist/dom.d.ts

@@ -1,6 +1,8 @@
 import type { Identity } from "./types.js";
 import { iconMarkup as icons } from "./icon-markup.js";
 export { icons };
+/** Read on each use: the preference can change while the page is open. */
+export declare const reducedMotion: () => boolean;
 export declare const editable: (node?: EventTarget) => boolean;
 /**
  * Events komo stops at its shadow host (isolateEvents), so host shortcut

package/dist/emoji-sequence.d.ts

@@ -0,0 +1 @@
+export declare const isEmoji: (value: unknown) => value is string;

package/dist/index.js

@@ -1 +1 @@
-import{b as o,c as s}from"./chunk-5LHGJFWQ.js";import"./chunk-Q7WSWLMV.js";import"./chunk-Y2GRLW4Q.js";import"./chunk-7YUXYVQA.js";import"./chunk-YZP3KX4Y.js";import"./chunk-I7AUKTXE.js";export{s as initComments,o as initKomo};
+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-2J7DVJQY.js

@@ -0,0 +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};