npm - @hazem3500/komo - Versions diffs - 0.9.25 → 0.9.27 - Mend

@hazem3500/komo 0.9.25 → 0.9.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/dist/chunk-4KEVPMJJ.js +1 -0
package/dist/chunk-HHG6KWKR.js +1 -0
package/dist/{chunk-G2QGDYNV.js → chunk-ZSDIMEPV.js} +1 -1
package/dist/design-comment-W2OVUWBL.js +1 -0
package/dist/design-export-JEWGQH3R.js +1 -0
package/dist/design-mode-styles.d.ts +1 -1
package/dist/design-mode.js +1 -1
package/dist/{design-panel-KZCDP47N.js → design-panel-KHZDEA36.js} +1 -1
package/dist/design-popup.d.ts +11 -0
package/dist/design-preview.d.ts +6 -0
package/dist/index.js +1 -1
package/dist/{inline-text-editor-JSJVHPMM.js → inline-text-editor-F4CSRB4G.js} +1 -1
package/dist/node.mjs +1 -1
package/dist/react-props-panel-MN5XOAGL.js +1 -0
package/dist/react.js +1 -1
package/dist/select-menu-QH7IVM7P.js +1 -0
package/dist/select-menu.d.ts +1 -1
package/dist/server.js +1 -1
package/dist/setup.js +1 -1
package/dist/token-adapter.d.ts +1 -0
package/dist/token-picker-RHPT7HCK.js +1 -0
package/dist/token-picker.d.ts +2 -0
package/package.json +1 -1
package/server/setup-client.txt +44 -45
package/dist/design-comment-K2JCM7IT.js +0 -1
package/dist/design-export-LA5VVR5Z.js +0 -1
package/dist/react-props-panel-PV3SKNTA.js +0 -1
package/dist/select-menu-IY5BJMFM.js +0 -1
package/dist/token-picker-XXX4L3Y7.js +0 -1

package/dist/design-comment-W2OVUWBL.js ADDED Viewed

@@ -0,0 +1 @@

+ import{a as e}from"./chunk-HHG6KWKR.js";import{a as t}from"./chunk-RPY7OOOR.js";var n=/^Proposed (.+?) changes? $preview only$$/,r={style:"Style changes","inline text":"Text change","design-token":"Token changes","React prop":"Prop changes"};function a(e){return e.split("\n").some(e=>n.test(e))}function o(e){try{return e.startsWith('"')?JSON.parse(e):e}catch{return e}}function i(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[,r,a,i,s]=n;return"inline text"===t?{label:"Text",before:o(a),after:o(i),apply:{kind:"text",property:"text"}}:"React prop"===t?{label:r,before:o(a),after:o(i),...s&&"custom value"!==s?{token:s}:{}}:{label:r,before:a,after:i,apply:{kind:"style",property:r}}}function s(e){let t=[];for(let a of e.split(/\n{2,}/)){let e=a.split("\n"),o=n.exec(e[0]??"");if(!o){a.trim()&&t.push({text:a.trim()});continue}let s=o[1],l={title:r[s]??`${s[0].toUpperCase()}${s.slice(1)} changes`,changes:[]};for(let t of e.slice(1))if(t.startsWith("Target: "))l.target=t.slice(8);else if(t.startsWith("Component: ")){let[,e,n]=/^(.*?)(?: $(.+)$)?$/.exec(t.slice(11));l.component=e,n&&(l.source=n)}else if(t.startsWith("Source: "))l.source=t.slice(8);else{let e=t.includes("→")?i(t,s):null;e&&e.before!==e.after&&l.changes.push(e)}l.changes.length?t.push(l):t.push({text:a.trim()})}return t}function l(e){let t=s(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),o=n.find(e=>e.target)?.target,i=`Design change · ${a} ${1===a?"edit":"edits"}${o?` on ${p(o)}`:""}`;return r?`${r}\n${i}`:i}function p(e){return(e.split(">").at(-1)??e).trim().replace(/:nth-of-type$\d+$/g,"")||e}var d=/^(#[0-9a-f]{3,8}|rgba?$[^)]*$|hsla?$[^)]*$|oklch$[^)]*$)$/i,c=new Map,f=new Set,g=new Map;function m(e){let t=g.get(e);t&&(clearTimeout(t.timer),g.delete(e),t.finish())}function u(n,r,a,o=!1){m(n);let i=[],s=[],l=[];for(let n of r){let r=a(n.target);for(let a of n.changes)if(a.apply&&"(unset)"!==a.after)if("variable"===a.apply.kind){let e=document.documentElement,t=e.style.getPropertyValue(a.apply.property);e.style.setProperty(a.apply.property,a.after),i.push(()=>t?e.style.setProperty(a.apply.property,t):e.style.removeProperty(a.apply.property))}else if(t(r)&&"style"===a.apply.kind){let t=r.style.getPropertyValue(a.apply.property),n=r.style.getPropertyPriority(a.apply.property),i=!r.hasAttribute("style"),p=a.apply.property,d=()=>"(unset)"!==a.before&&(r.style.setProperty(p,a.before,"important"),!0);o&&d()&&getComputedStyle(r).getPropertyValue(p),r.style.setProperty(p,a.after,"important"),l.push(d),s.push(()=>{t?r.style.setProperty(a.apply.property,t,n):r.style.removeProperty(a.apply.property),i&&e(r)})}else if(r instanceof HTMLElement&&"text"===a.apply.kind&&!r.childElementCount){let e=r.firstChild;if(e instanceof Text){let t=e.data;e.data=a.after,i.push(()=>{e.data=t})}}}return c.set(n,{restore:i,restoreStyles:s,pinBefore:l}),i.length+s.length>0}var h,y=["color","background-color","border-color","outline-color","fill","stroke","box-shadow","text-decoration-color"],x="cubic-bezier(.22, 1, .36, 1)";function b(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)y.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:x})}if(!n.size)return;h&&(clearTimeout(h.timer),h.style.remove());let r=document.createElement("style");r.textContent=`*, *::before, *::after { transition-property: ${[...n].join(", ")} !important; transition-duration: 420ms !important; transition-timing-function: ${x} !important; transition-delay: 0s !important; }`,document.head.append(r),h={style:r,timer:setTimeout(()=>{r.remove(),h=void 0},480)}}function w(e,t=!1){m(e);let n=c.get(e);if(!n)return;c.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();g.set(e,{finish:r,timer:setTimeout(()=>m(e),480)})}function v(e){return c.has(e)||g.has(e)}function k(e=new Set){e.has("draft")||(S=void 0);for(let t of[...g.keys()])e.has(t)||m(t);for(let t of[...c.keys()])e.has(t)||w(t)}function E(e){return"text"===e.apply?.kind||!(e.apply||e.token||d.test(e.before)||d.test(e.after))&&(/\s/.test(e.before+e.after)||e.before.length+e.after.length>32)}function C(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,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(d.test(e)){let t=document.createElement("span");t.className="design-swatch",t.style.background=e,n.append(t)}return n.append(e),n}function N(e,t,n){let r=s(t),a=r.filter(e=>"changes"in e),o=document.createElement("div");o.className="design-comment",o.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 i=!!n.compact;i&&(o.dataset.compact="");let l=i?3:1/0,d=0,g=a.some(e=>e.changes.some(e=>e.apply)),m=[],h=()=>{let e=c.has(n.key);for(let t of m)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),o.append(t);continue}if(l<=0){d+=e.changes.length;continue}let t=document.createElement("section");t.className="design-card";let r=document.createElement("div");r.className="design-card-head";let s=document.createElement("div");s.className="design-card-label",s.append(Object.assign(document.createElement("span"),{className:"design-card-title",textContent:e.title}));let y=e.target?p(e.target):e.component;if(y){let t=Object.assign(document.createElement("span"),{className:"design-card-target",textContent:y});e.target&&(t.title=e.target),s.append(t)}if(r.append(s),g&&!m.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===c.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||b(a,n.resolve),e?u(n.key,a,n.resolve,!o):w(n.key,!o),n.onSwitch&&setTimeout(n.onSwitch,o?0:480),h()}),e.append(o)}m.push(e);for(let e of f)e.isConnected||f.delete(e);f.add(e),r.append(e)}t.append(r);let x=document.createElement("div");x.className="design-rows";let v=4;e.changes.forEach((t,n)=>{if(l<=0)return void d++;i&&l--;let r=document.createElement("div");r.className="design-row",r.hidden=!i&&n>=v&&e.changes.length>v+1;let a=Object.assign(document.createElement("span"),{className:"design-prop",textContent:t.label});if(a.title=t.label,E(t))return r.classList.add("design-row-prose"),r.append(a,C(t.before,t.after)),void x.append(r);let o=document.createElement("span");o.className="design-values";let s=$(t.before);s.classList.add("design-before"),o.append(s,Object.assign(document.createElement("span"),{className:"design-arrow",textContent:"→"}),$(t.after,t.token)),r.append(a,o),x.append(r)}),t.append(x);let k=x.querySelectorAll("[hidden]").length;if(k){let e=Object.assign(document.createElement("button"),{type:"button",className:"design-more",textContent:`Show ${k} more`});e.addEventListener("click",()=>{x.querySelectorAll("[hidden]").forEach(e=>e.hidden=!1),e.remove()}),t.append(e)}e.source&&!i&&t.append(Object.assign(document.createElement("div"),{className:"design-source",textContent:e.source})),o.append(t)}d&&o.append(Object.assign(document.createElement("span"),{className:"design-source",textContent:`+${d} more`})),h(),e.replaceChildren(o),m.length&&(P||(P=!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=[...f].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 S,P=!1;function O(e,t,n){S!==t&&(w("draft"),S=t,u("draft",s(t).filter(e=>"changes"in e),n)),N(e,t,{key:"draft",resolve:n,note:(e,t)=>e.append(t)})}export{a as isDesignComment,v as isPreviewing,s as parseDesignComment,N as renderDesignComment,O as renderDraftProposal,k as resetDesignPreviews,p as shortTarget,l as summarizeDesignComment};

package/dist/design-export-JEWGQH3R.js ADDED Viewed

@@ -0,0 +1 @@

+ import{j as e,k as t}from"./chunk-PLSWBSSX.js";function n(n){let i=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>`,o=/Mac|iPhone|iPad/.test(navigator.platform)?"⌘-click":"Ctrl-click",s=e("p","design-inspector__pick-hint",`${o} inner target · Alt+↑ parent · Alt+↓ child`),r=e("div","design-inspector__empty"),a=e("ul"),p=(...t)=>{let n=e("li");t.forEach((t,i)=>n.append(i%2?e("kbd","",t):t)),a.append(n)};p("","Click"," to inspect"),p("",o," for an inner target"),p("","Alt+↑"," parent · ","Alt+↓"," child"),p("","Double-click"," text to edit"),n.exitKey?p("","Esc"," or ",n.exitKey," to exit"):p("","Esc"," to exit"),r.append(t("design"),e("strong","","Select an element"),a);let d=e("section","design-inspector__pending"),l=e("p"),c=(t,n)=>{let i=e("button","",t);return i.type="button",i.addEventListener("click",n),i},f=c("Review previous element",n.review),g=c("Copy pending proposals",async()=>{let e=n.proposals().filter(Boolean).join("\n\n");try{await navigator.clipboard.writeText(e),n.message("Pending proposals copied")}catch{n.message("Couldn't copy pending proposals. Try again.")}});return d.append(l,f,g,c("Reset all previews",n.reset)),{hint:s,empty:r,pending:d,icons:{undo:i("M5.5 3.5 2.5 6.5l3 3m-3-3h7a4 4 0 0 1 0 8h-2"),reset:i("M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5")},styles:'@keyframes design-status{from{opacity:0;translate:0 2px}}.design-inspector__count{white-space:nowrap;font-variant-numeric:tabular-nums}.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__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__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 0 #ffffff12; color:#c9c5bf; font:inherit; font-size:10px; font-weight:500; line-height:17px; }.design-inspector__pick-hint{flex:none;margin:0 12px 10px;color:#989898;font-size:10px;line-height:1.5}.design-inspector__pending{margin:12px;padding:12px;border:1px solid #ffffff1a;border-radius:10px;display:flex;flex-wrap:wrap;gap:8px}.design-inspector__pending[hidden]{display:none}.design-inspector__pending p{flex-basis:100%;margin:0 0 4px;color:#aaa;line-height:1.5}.design-inspector__pending button{min-height:32px;padding:6px 10px;border:1px solid #ffffff20;border-radius:7px;background:#ffffff08;font:inherit;color:inherit;cursor:pointer}',update(e,t){l.textContent=`${e} element${1===e?" has":"s have"} pending runtime previews. Undo, Reset or reload to restore.`,f.hidden=!t}}}function i(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(""):"",s=[...n.parentElement.children].filter(e=>e.tagName===n.tagName).indexOf(n)+1;t.unshift(`${n.tagName.toLowerCase()}${o}:nth-of-type(${s})`)}return t.join(" > ")}function o(e,t){return`${i(e)} {\n${[...t].map(([e,t])=>` ${e}: ${t};`).join("\n")}\n}`}function s(e,t,n,o,s,r=[]){let a=[...t??[]].filter(([e])=>!o?.has(e)).map(([e,t])=>`- ${e}: ${n(e)||"(unset)"} → ${t}`),p=[a.length?`Proposed style changes (preview only)\nTarget: ${i(e)}\n${a.join("\n")}`:"",...s].filter(e=>!!e);if(p[0]&&r.length){let e=p[0].split("\n"),t=r.filter(t=>!t.startsWith("Component: ")||!e.some(e=>e.startsWith("Component: ")));e.splice(e[1]?.startsWith("Target: ")?2:1,0,...t),p[0]=e.join("\n")}return p.join("\n\n")||void 0}function r(t,n,i,o){if(i.aborted)return;let s=e("div","morphing-menu__tooltip sidebar-tooltip");s.setAttribute("aria-hidden","true"),n.append(s);let r=0,a=()=>{clearTimeout(r),delete s.dataset.open},p=e=>{let t=e.target.closest?.("[data-tip]");if(!t||"focusin"===e.type&&!t.matches(":focus-visible"))return a();clearTimeout(r),r=window.setTimeout(()=>{if(!t.isConnected)return;let e=t.getBoundingClientRect();s.textContent=t.dataset.tip??"";let n=s.offsetWidth/2;s.style.left=`${Math.max(8+n,Math.min(document.documentElement.clientWidth-8-n,e.left+e.width/2))}px`,s.style.top=e.top-8-s.offsetHeight+"px",s.dataset.open="true"},s.dataset.open?0:400)};t.addEventListener("pointerover",p,{signal:i}),t.addEventListener("focusin",p,{signal:i});for(let e of["pointerleave","pointerdown","focusout"])t.addEventListener(e,a,{signal:i});i.addEventListener("abort",()=>{a(),s.remove()}),("focusin"===o.type||t.matches(":hover"))&&p(o)}export{i as cssSelector,o as cssText,s as designProposal,r as footerTips,n as selectionViews};

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

	@@ -1 +1 @@
1	- export declare const designModeStyles = "\n/* Design mode is deliberately an in-page preview: all controls remain in the\n widget shadow root and never become site styles. /\n.design-outline {\n position:fixed; z-index:1; pointer-events:none; box-sizing:border-box;\n outline:2px solid var(--accent,#bda6ef); outline-offset:2px;\n transition:opacity 80ms ease;\n}\n.design-outline[data-kind=\"hover\"] { outline-style:dashed; opacity:.8; }\n.design-outline--prospective[data-kind=\"hover\"] { opacity:.55; }\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__back,.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__back,.design-inspector__close,.design-inspector__fold { flex:none; }\n.design-inspector__back svg,.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg { width:16px; height:16px; }\n.design-inspector__back svg { rotate:90deg; }\n.design-inspector__back[hidden] { display:none; }\n.design-inspector__back:hover,.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/ 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__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";
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 outline:2px solid var(--accent,#bda6ef); outline-offset:2px;\n transition:opacity 80ms ease;\n}\n.design-outline[data-kind=\"hover\"] { outline-style:dashed; opacity:.8; }\n.design-outline--prospective[data-kind=\"hover\"] { opacity:.55; }\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__back,.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__back,.design-inspector__close,.design-inspector__fold { flex:none; }\n.design-inspector__back svg,.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg { width:16px; height:16px; }\n.design-inspector__back svg { rotate:90deg; }\n.design-inspector__back[hidden] { display:none; }\n.design-inspector__back:hover,.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/ 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__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@media (max-width:520px) {\n / A content-sized bottom sheet; folding it leaves only the heading over the page. */\n .design-inspector {\n position:fixed; inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));\n max-height:min(58dvh,560px);\n border-radius:24px; box-shadow:0 -1px 0 #ffffff24,0 16px 48px #0005;\n transition:translate 320ms cubic-bezier(.22,1,.36,1),scale 320ms cubic-bezier(.22,1,.36,1),opacity 150ms ease;\n transform-origin:bottom center;\n }\n .design-inspector__heading { height:52px; padding-left:18px; }\n .design-inspector__fold { display:grid; }\n .design-inspector[data-empty] .design-inspector__identity { visibility:visible; }\n .design-inspector .design-field { height:34px; }\n}\n@media (prefers-reduced-motion:reduce) {\n .design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status { transition:none; animation:none; }\n}\n";

package/dist/design-mode.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{a as e,b as t}from"./chunk-RPY7OOOR.js";import{a as n}from"./chunk-53M6AOAX.js";import{j as i,k as o}from"./chunk-PLSWBSSX.js";var s=(e,t)=>Object.assign(i("button",e,t),{type:"button"}),a=e=>"function"==typeof matchMedia&&matchMedia(e).matches,r=()=>a("(prefers-reduced-motion: reduce)");function d(d){let l=i("style");l.textContent='.design-outline{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;outline:2px solid var(--accent,#bda6ef);outline-offset:2px;transition:opacity 80ms ease}.design-outline[data-kind=hover]{outline-style:dashed;opacity:.8}.design-outline--prospective[data-kind=hover]{opacity:.55}.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__back,.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__back,.design-inspector__close,.design-inspector__fold{flex:none}.design-inspector__back svg,.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg{width:16px;height:16px}.design-inspector__back svg{rotate:90deg}.design-inspector__back[hidden]{display:none}.design-inspector__back:hover,.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__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__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 c=null,p=import("./design-panel-KZCDP47N.js").then(e=>{l.textContent+=e.designPanelStyles,c=e},()=>{A.textContent="Design controls unavailable · try again"}),g=i("aside","design-inspector");g.setAttribute("role","dialog"),g.setAttribute("aria-label","Design mode inspector"),g.setAttribute("aria-hidden","true"),g.hidden=!0;let u=i("div","design-outline");u.setAttribute("aria-hidden","true");let m=i("div","design-outline design-outline--prospective");m.setAttribute("aria-hidden","true"),m.dataset.kind="hover",m.hidden=!0;let h=i("div","design-inspector__heading"),f=null,b=s("design-inspector__back");b.hidden=!0,b.append(o("chevron")),b.addEventListener("click",()=>f?.run());let v=s("design-inspector__parent");v.hidden=!0;let y=i("span","design-inspector__target"),x=i("small"),_=s("design-inspector__close");_.setAttribute("aria-label","Exit design mode"),_.append(o("close"));let w=s("design-inspector__fold");w.append(o("chevron"));let E=i("div","design-inspector__identity");E.append(v,y,x),h.append(b,E,w,_);let k=i("div","design-inspector__controls"),C=i("div","design-inspector__bar"),P=i("span","design-inspector__count");P.title="Runtime preview · Undo, Reset or reload to restore";let A=i("p","design-inspector__status");A.setAttribute("role","status");let L=i("div","design-inspector__actions"),T=e=>{let t=s("design-inspector__tool");return t.dataset.tip=e,t.setAttribute("aria-label",e),t},M=T("Undo"),S=T("Reset"),R=T("Copy CSS");R.append(o("copy"));let D=s("","Comment"),z=s("design-text-edit","Edit text");z.title="Edit text",z.setAttribute("aria-label","Edit selected text inline"),L.append(M,S,R,D);let H=i("div","design-inspector__compare");H.setAttribute("role","group"),H.setAttribute("aria-label","Compare with the page");let K=["Before","After"].map((e,t)=>{let n=s("",e);return n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>me(!t)),H.append(n),n});C.append(P,H,A,L);let B,j=i("div");j.hidden=!0,g.append(h,j,k,C),d.root.append(l,u,m),(d.panelRoot??d.root).append(g);let I,O=!1,V=0,$=null,F=null,U=()=>d.page?.()??location.pathname,q=U(),N=new Map,W=null,X=0,Y=0,J=null,Z="",G=null,Q=null,ee=new Map,te=new Map,ne=new WeakMap,ie=new WeakMap,oe=new AbortController,se=()=>import("./design-export-LA5VVR5Z.js"),ae=e=>{I??=se().then(({footerTips:t})=>t(C,d.root,oe.signal,e),()=>{I=void 0})};C.addEventListener("pointerover",ae),C.addEventListener("focusin",ae);let re=new Set,de=[];function le(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=ee.get(e);o\|\|ee.set(e,o=new Map),o.has(t)\|\|o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function ce(e,t){let n=te.get(e);n\|\|te.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(ee.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size\|\|te.delete(e),we($,"selected")}let pe=0;new MutationObserver(()=>{let e=A.textContent??"";A.title=e,C.toggleAttribute("data-message",!!e),clearTimeout(pe),e&&(pe=window.setTimeout(function e(){W?.element?pe=window.setTimeout(e,2600):A.textContent=""},2600))}).observe(A,{childList:!0,characterData:!0,subtree:!0});let ge,ue=!1;function me(e){if(e===ue)return;e&&W?.element&&Se(),ue=e;let t=!r();for(let[n,i]of te){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=ee.get(n)?.get(t);e?he(n,t,i):n.style.setProperty(t,o,i?.priority)}t&&window.setTimeout(()=>n.style.transition=o,320)}W?.showBefore(e),G?.showDesignBefore(e),K.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),g.toggleAttribute("data-before",e),Me()}function he(e,t,n){n?.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t)}function fe(e,t,n){$&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(le($,t),G?.noteDesignTokenOverride($,t,n),$.style.setProperty(t,n,ee.get($)?.get(t)?.priority),ce($,t),Me()))}function be(e,t,n=!0){if(!$)return;let i={value:$.style.getPropertyValue(t),priority:$.style.getPropertyPriority(t)},o=ie.get(e),s=o?.before??ne.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&de.splice(de.indexOf(o),1),ie.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:$,property:t,before:s,after:i};de.push(n),ie.set(e,n)}n&&(ne.set(e,i),ie.delete(e)),Me()}function ve(){if(k.replaceChildren(),ye(),!$)return B&&k.append(B.empty),y.textContent="Select an element",x.textContent="",void(v.hidden=!0);let e=`${$.tagName.toLowerCase()}${$.id?`#${$.id}`:""}`;y.textContent=e,x.textContent=$ instanceof HTMLIFrameElement?"Frame only · contents are isolated":$.classList.length?`.${[...$.classList].slice(0,2).join(".")}`:"";let t=$.parentElement;v.hidden=!t\|\|t===document.body\|\|t===document.documentElement,v.textContent=t?.tagName.toLowerCase()??"",v.setAttribute("aria-label",`Select parent ${v.textContent}`);let n=$,i=c;i?(i.renderPanel(k,{element:n,changed:te.get(n),collapsed:re,editText:z,begin:(e,t)=>ne.set(e,{value:n.style.getPropertyValue(t),priority:n.style.getPropertyPriority(t)}),apply:fe,commit:be,rerender:ve}),(d.design\|\|n.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(Q??=import("./react-props-panel-PV3SKNTA.js").then(e=>G=e).catch(e=>{throw Q=null,e}),Q.then(e=>{if(!O\|\|$!==n\|\|k.querySelector(".design-react-group, .design-theme-group"))return;let t=d.root;e.attachThemeSwitcher(k,d.design,()=>Pe(n),t);let o=e.createReactPropsPanel(n,()=>{A.textContent="Runtime preview · Undo, Reset or reload to restore",Me()},t,Pe,d.design);o&&k.append(o),e.attachStyleTokenControls(n,i.fields,k,(e,t,i)=>{le(n,e.property,i),ce(n,e.property),ne.set(t,{value:i,priority:n.style.getPropertyPriority(e.property)}),be(t,e.property)},t,i.valueFor,i.toHex,d.design,e=>{de.push({element:n,undo:e}),Me()});let s=e.createDesignThemePanel(n,i,Me,t);s&&k.append(s)}).catch(()=>{}))):p.then(()=>{O&&$===n&&ve()})}function ye(){g.toggleAttribute("data-empty",D.hidden=!$),B&&(B.hint.hidden=!$),g.parentElement?.toggleAttribute("data-design-empty",O&&!$);let e=[...N.keys()].filter(xe);j.hidden=!!$\|\|!e.length,B&&(B.pending.hidden=j.hidden),B?.update(e.length,e.some(e=>e.isConnected&&N.get(e)===U()))}function xe(e){return!!(te.get(e)?.size\|\|e instanceof HTMLElement&&W?.hasChanges(e)\|\|G?.hasReactPropChanges(e)\|\|G?.hasDesignTokenEdit(e))}function _e(){Se(),Ce?.disconnect(),$=null,F=null,u.hidden=m.hidden=!0,ve(),Me()}function we(e,t,i=!1,o=u){if(!O\|\|!e?.isConnected)return void(o.hidden=!0);let s=e.getBoundingClientRect();if(s.width&&s.height){if(o.hidden=!1,o.dataset.kind=t,i&&(e!==J\|\|t!==Z)){J=e,Z=t,clearTimeout(Y);let n=g.getBoundingClientRect(),i=e=>s.left<e+n.width&&s.right>e&&s.top<n.bottom&&s.bottom>n.top;d.flip&&n.width&&i(n.left)&&!i(document.documentElement.clientWidth-n.right)&&(Y=window.setTimeout(d.flip,"hover"===t?350:0))}o.hidden=!n(o,s,e,d.bounds?.(e))}else o.hidden=!0}function Ee(e=!1){we($??F,$?"selected":"hover",e),we($&&F!==$?F:null,"hover",!1,m)}function ke(){X\|\|(X=requestAnimationFrame(()=>{X=0,$&&(!$.isConnected\|\|q!==U())&&_e(),Ee()}))}let Ce="function"==typeof ResizeObserver?new ResizeObserver(ke):null;function Pe(t){!e(t)\|\|!t.isConnected\|\|d.host.contains(t)\|\|(W?.element&&W.element!==t&&Se(),Ce?.disconnect(),Ce?.observe(t),$=t,F=t,q=U(),N.set(t,q),ve(),we(t,"selected",!0),m.hidden=!0,Me())}let Ae=()=>a("(max-width:520px)");function Le(e){g.toggleAttribute("data-folded",e&&Ae()),w.setAttribute("aria-expanded",String(!g.hasAttribute("data-folded"))),w.setAttribute("aria-label",g.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function Te(e){Le(!1),Ae()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=g.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n\|\|window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:r()?"auto":"smooth"})})}function Me(){ke(),M.disabled=!de.length&&!G?.canUndoReactProp($)&&!G?.canUndoDesignTokenEdit($),S.disabled=!function(){let e=$,t=e?(te.get(e)?.size??0)+ +(e instanceof HTMLElement&&!!W?.hasChanges(e))+ +!!G?.hasReactPropChanges(e)\|\|+!!G?.hasDesignTokenEdit(e):0;return P.textContent=t?`${t} change${t>1?"s":""}`:"",C.toggleAttribute("data-changes",t>0\|\|!M.disabled),H.hidden=!t&&!ue,t}(),R.disabled=!$\|\|!te.get($)?.size,D.disabled=!$,z.disabled=!(!W?.busy&&$?.isConnected&&$ instanceof HTMLElement),z.textContent=W?.isEditing($ instanceof HTMLElement?$:null)?"Done editing":"Edit text",z.setAttribute("aria-label",W?.isEditing($ instanceof HTMLElement?$:null)?"Finish inline text editing":"Edit selected text inline"),ye()}function Se(e=!1){W?.finish(e),Me()}function Re(e){!O\|\|"Escape"!==e.key\|\|e.defaultPrevented&&!e.composedPath().includes(d.host)\|\|(e.preventDefault(),e.stopImmediatePropagation(),_e(),De(!1),d.onExit())}function De(e){if(e\|\|(W?.finish(),O&&(ge=ue,me(!0)),G?.restoreThemes()),e&&!O&&void 0!==ge){let e=ge;ge=void 0,me(e)}e&&$&&(!$.isConnected\|\|q!==U())&&_e(),clearTimeout(V),V=0,O=e,ye(),e?(g.hidden=!1,g.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{O&&(g.dataset.state="active")}),u.hidden=!$,ve(),Le(!$),we($,"selected"),_.focus({preventScroll:!0})):(F=null,u.hidden=m.hidden=!0,g.setAttribute("aria-hidden","true"),g.dataset.state="closing",r()?(g.hidden=!0,delete g.dataset.state):V=window.setTimeout(()=>{V=0,O\|\|(g.hidden=!0,delete g.dataset.state)},250))}function ze(){me(!1);for(let[e,t]of ee)for(let[n,i]of t)he(e,n,i);ee.clear(),te.clear(),de.length=0,W?.restoreAll(),G?.resetPreviews(),N.clear(),Me()}function He(e,t){return t(e,te.get(e),t=>ee.get(e)?.get(t)?.computed,G?.tokenBoundProperties(e),[e instanceof HTMLElement?W?.proposal(e):void 0,G?.proposedDesignChanges(e)],G?.designContext(e,d.design))}function Ke(e){W?.isEditing(e instanceof HTMLElement?e:null)&&Se(!0);let t=te.get(e),n=(e instanceof HTMLElement&&W?.hasChanges(e))??!1,i=G?.hasReactPropChanges(e)??!1,o=G?.hasDesignTokenEdit(e)??!1;if(t?.size\|\|n\|\|i\|\|o){n&&e instanceof HTMLElement&&W?.reset(e);for(let n of t?.keys()??[])he(e,n,ee.get(e)?.get(n));te.delete(e),ee.delete(e),N.delete(e),i&&G?.resetReactProps(e),o&&G?.resetDesignTokenEdits(e);for(let t=de.length-1;t>=0;t--)de[t].element===e&&de.splice(t,1)}}z.addEventListener("click",e=>{W\|\|$&&(A.textContent="Loading inline text editor…",import("./inline-text-editor-JSJVHPMM.js").then(t=>{W\|\|!$\|\|!O\|\|(W=t.bindInlineTextTools({button:z,status:A,selected:()=>$ instanceof HTMLElement?$:null,active:()=>O,onChange:Me,onCommit(e){de.push({kind:"text",element:e})}}),W.toggle(e))}).catch(()=>{A.textContent="Inline text editing is unavailable."}))}),w.addEventListener("click",()=>Le(!g.hasAttribute("data-folded"))),v.addEventListener("click",()=>Pe($?.parentElement??null)),_.addEventListener("click",()=>{W?.element&&Se(),_e(),De(!1),d.onExit()}),M.addEventListener("click",()=>{let e=de.pop();e?e.kind?"text"===e.kind?$===(W?.undo()??e.element)&&ve():(he(e.element,e.property,e.before),G?.syncDesignTokenBinding(e.element,e.property),ce(e.element,e.property),$===e.element&&ve(),we($??F,$?"selected":"hover")):(e.undo(),ve()):($&&(G?.undoDesignTokenEdit($),G?.undoReactProp($),ve()),A.textContent="Runtime preview · Undo, Reset or reload to restore"),Me(),(M.disabled?_:M).focus({preventScroll:!0})}),S.addEventListener("click",()=>{$&&(Ke($),ve(),we($,"selected"),Me(),_.focus({preventScroll:!0}))}),R.addEventListener("click",()=>{let e=$,t=e?te.get(e):void 0;!e\|\|!t?.size\|\|se().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),A.textContent="CSS copied"}catch{A.textContent=i}})}),D.addEventListener("click",()=>{let e=$;e&&(W?.isEditing(e instanceof HTMLElement?e:null)&&Se(),se().then(({designProposal:t})=>{if(!O\|\|$!==e\|\|!e.isConnected)return;let n=He(e,t);Ke(e),Me(),d.onComment(e,n)},()=>{A.textContent="Comment unavailable · try again"}))});let Be=()=>me(!1);for(let e of[k,L,z])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,Be,!0);document.addEventListener("pointermove",function(e){if(!O)return;if(e.composedPath().includes(d.host))return F=null,void Ee();let n=t(d.targetAt(e.clientX,e.clientY),e.metaKey\|\|e.ctrlKey);F=n&&!d.host.contains(n)?n:null,Ee(!$)},{capture:!0,signal:oe.signal}),document.addEventListener("pointerdown",function(e){if(!O\|\|0!==e.button\|\|e.composedPath().includes(d.host))return;let n=t(d.targetAt(e.clientX,e.clientY),e.metaKey\|\|e.ctrlKey);!n\|\|d.host.contains(n)\|\|W?.element&&(n===W.element\|\|W.element.contains(n))\|\|(W?.element&&Se(),e.preventDefault(),e.stopImmediatePropagation(),Pe(n))},{capture:!0,signal:oe.signal}),document.addEventListener("click",function(e){!O\|\|e.composedPath().includes(d.host)\|\|(e.preventDefault(),e.stopImmediatePropagation(),$&&Te($),2===e.detail&&$?.contains(e.target)&&!z.disabled&&!W?.element&&z.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:oe.signal}),document.addEventListener("keydown",function(t){if(W?.handleKey(t))return void z.focus({preventScroll:!0});let n=t.key.toLowerCase(),i=t.composedPath()[0],o=i instanceof HTMLElement&&(i.isContentEditable\|\|i.matches("input,textarea,select"));if(O&&$&&t.altKey&&!t.ctrlKey&&!t.metaKey&&!o&&("arrowup"===n\|\|"arrowdown"===n)){let i=("arrowup"===n?$.parentElement:[...$.children].find(t=>e(t)&&!t.matches("script,style,defs,title,desc,metadata")))??null;return void(e(i)&&i!==document.body&&i!==document.documentElement&&!d.host.contains(i)&&(t.preventDefault(),t.stopImmediatePropagation(),Pe(i),Te(i)))}if(O&&!H.hidden&&!t.metaKey&&!t.ctrlKey&&!t.altKey&&("b"===n\|\|"arrowleft"===n\|\|"arrowright"===n)&&!o)return t.preventDefault(),t.stopImmediatePropagation(),void me("b"===n?!ue:"arrowleft"===n);if(O&&!W?.element&&("Enter"===t.key\|\|" "===t.key)&&!t.composedPath().includes(d.host)){let n=document.activeElement;if(e(n)&&n!==document.body&&n!==document.documentElement)return t.preventDefault(),t.stopImmediatePropagation(),Pe(n),void Te(n)}t.composedPath().includes(d.host)&&Re(t)},{capture:!0,signal:oe.signal}),window.addEventListener("keydown",Re,{signal:oe.signal}),window.addEventListener("scroll",ke,{capture:!0,passive:!0,signal:oe.signal}),window.addEventListener("resize",ke,{passive:!0,signal:oe.signal});let je=new MutationObserver(()=>{O&&$&&!$.isConnected&&_e(),F&&!F.isConnected&&(F=null,Ee())});je.observe(document.body,{childList:!0,subtree:!0});let Ie=se().then(e=>{oe.signal.aborted\|\|(B=e.selectionViews({exitKey:d.exitKey,review(){let e=[...N.keys()].reverse().find(e=>e.isConnected&&N.get(e)===U()&&xe(e));e&&Pe(e)},reset:ze,proposals:()=>[...N.keys()].filter(xe).map(t=>He(t,e.designProposal)),message:e=>{A.textContent=e}}),l.textContent+=B.styles,M.innerHTML=B.icons.undo,S.innerHTML=B.icons.reset,g.insertBefore(B.hint,j),j.append(B.pending),O?ve():ye())},()=>{A.textContent="Selection tools unavailable · try again"});return{setActive:De,select:Pe,clearSelection:_e,setReturnAction(e){f=e,b.hidden=!e,e&&(b.setAttribute("aria-label",e.label),b.title=e.label)},mountPanel(e){g.parentElement!==e&&(g.parentElement?.removeAttribute("data-design-empty"),e.append(g),ye())},get active(){return O},ready:Promise.all([p,Ie]),destroy(){W?.finish(!0),De(!1),ze(),clearTimeout(V),clearTimeout(pe),clearTimeout(Y),Ce?.disconnect(),je.disconnect(),oe.abort(),cancelAnimationFrame(X),g.remove(),u.remove(),m.remove(),l.remove()}}}export{d as createDesignMode};
1	+ import{a as e,c as t}from"./chunk-HHG6KWKR.js";import{a as n,b as i}from"./chunk-RPY7OOOR.js";import{a as o}from"./chunk-53M6AOAX.js";import{j as s,k as a}from"./chunk-PLSWBSSX.js";var r=(e,t)=>Object.assign(s("button",e,t),{type:"button"}),d=e=>"function"==typeof matchMedia&&matchMedia(e).matches,l=()=>d("(prefers-reduced-motion: reduce)");function c(c){let p=s("style");p.textContent='.design-outline{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;outline:2px solid var(--accent,#bda6ef);outline-offset:2px;transition:opacity 80ms ease}.design-outline[data-kind=hover]{outline-style:dashed;opacity:.8}.design-outline--prospective[data-kind=hover]{opacity:.55}.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__back,.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__back,.design-inspector__close,.design-inspector__fold{flex:none}.design-inspector__back svg,.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg{width:16px;height:16px}.design-inspector__back svg{rotate:90deg}.design-inspector__back[hidden]{display:none}.design-inspector__back:hover,.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__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__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}@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 g=null,u=import("./design-panel-KHZDEA36.js").then(e=>{p.textContent+=e.designPanelStyles,g=e},()=>{T.textContent="Design controls unavailable · try again"}),h=s("aside","design-inspector");h.setAttribute("role","dialog"),h.setAttribute("aria-label","Design mode inspector"),h.setAttribute("aria-hidden","true"),h.hidden=!0;let m=s("div","design-outline");m.setAttribute("aria-hidden","true");let f=s("div","design-outline design-outline--prospective");f.setAttribute("aria-hidden","true"),f.dataset.kind="hover",f.hidden=!0;let b=s("div","design-inspector__heading"),v=null,y=r("design-inspector__back");y.hidden=!0,y.append(a("chevron")),y.addEventListener("click",()=>v?.run());let x=r("design-inspector__parent");x.hidden=!0;let _=s("span","design-inspector__target"),w=s("small"),E=r("design-inspector__close");E.setAttribute("aria-label","Exit design mode"),E.append(a("close"));let k=r("design-inspector__fold");k.append(a("chevron"));let C=s("div","design-inspector__identity");C.append(x,_,w),b.append(y,C,k,E);let P=s("div","design-inspector__controls"),A=s("div","design-inspector__bar"),L=s("span","design-inspector__count");L.title="Runtime preview · Undo, Reset or reload to restore";let T=s("p","design-inspector__status");T.setAttribute("role","status");let M=s("div","design-inspector__actions"),S=e=>{let t=r("design-inspector__tool");return t.dataset.tip=e,t.setAttribute("aria-label",e),t},R=S("Undo"),D=S("Reset"),z=S("Copy CSS");z.append(a("copy"));let H=r("","Comment"),K=r("design-text-edit","Edit text");K.title="Edit text",K.setAttribute("aria-label","Edit selected text inline"),M.append(R,D,z,H);let B=s("div","design-inspector__compare");B.setAttribute("role","group"),B.setAttribute("aria-label","Compare with the page");let O=["Before","After"].map((e,t)=>{let n=r("",e);return n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>be(!t)),B.append(n),n});A.append(L,B,T,M);let j,I=s("div");I.hidden=!0,h.append(b,I,P,A),c.root.append(p,m,f),(c.panelRoot??c.root).append(h);let F,$=!1,U=0,W=null,V=null,X=()=>c.page?.()??location.pathname,q=X(),G=new Map,N=null,Y=0,J=0,Q=null,Z="",ee=null,te=null,ne=new Map,ie=new WeakSet,oe=new Map,se=new WeakMap,ae=new WeakMap,re=new AbortController,de=()=>import("./design-export-JEWGQH3R.js"),le=e=>{F??=de().then(({footerTips:t})=>t(A,c.root,re.signal,e),()=>{F=void 0})};A.addEventListener("pointerover",le),A.addEventListener("focusin",le);let ce=new Set,pe=[];function ge(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=ne.get(e);o\|\|(ne.set(e,o=new Map),e.hasAttribute("style")\|\|ie.add(e)),o.has(t)\|\|o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function ue(e,t){let n=oe.get(e);n\|\|oe.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(ne.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size\|\|oe.delete(e),Ce(W,"selected")}let he=0;new MutationObserver(()=>{let e=T.textContent??"";T.title=e,A.toggleAttribute("data-message",!!e),clearTimeout(he),e&&(he=window.setTimeout(function e(){N?.element?he=window.setTimeout(e,2600):T.textContent=""},2600))}).observe(T,{childList:!0,characterData:!0,subtree:!0});let me,fe=!1;function be(e,n=!0){if(e===fe)return;e&&N?.element&&ze(),fe=e;let i=n&&!l();for(let[n,o]of oe)t(n,o.keys(),()=>{for(let[t,i]of o){let o=ne.get(n)?.get(t);e?ve(n,t,o):n.style.setProperty(t,i,o?.priority)}},i,ie.has(n));N?.showBefore(e),ee?.showDesignBefore(e),O.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),h.toggleAttribute("data-before",e),De()}function ve(t,n,i){i?.value?t.style.setProperty(n,i.value,i.priority):t.style.removeProperty(n),ie.has(t)&&e(t)}function ye(e,t,n){W&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(ge(W,t),ee?.noteDesignTokenOverride(W,t,n),W.style.setProperty(t,n,ne.get(W)?.get(t)?.priority),ue(W,t),De()))}function xe(e,t,n=!0){if(!W)return;let i={value:W.style.getPropertyValue(t),priority:W.style.getPropertyPriority(t)},o=ae.get(e),s=o?.before??se.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&pe.splice(pe.indexOf(o),1),ae.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:W,property:t,before:s,after:i};pe.push(n),ae.set(e,n)}n&&(se.set(e,i),ae.delete(e)),De()}function _e(){if(Oe(),P.replaceChildren(),we(),!W)return j&&P.append(j.empty),_.textContent="Select an element",w.textContent="",void(x.hidden=!0);let e=`${W.tagName.toLowerCase()}${W.id?`#${W.id}`:""}`;_.textContent=e,w.textContent=W instanceof HTMLIFrameElement?"Frame only · contents are isolated":W.classList.length?`.${[...W.classList].slice(0,2).join(".")}`:"";let t=W.parentElement;x.hidden=!t\|\|t===document.body\|\|t===document.documentElement,x.textContent=t?.tagName.toLowerCase()??"",x.setAttribute("aria-label",`Select parent ${x.textContent}`);let n=W,i=g;i?(i.renderPanel(P,{element:n,changed:oe.get(n),collapsed:ce,editText:K,begin:(e,t)=>se.set(e,{value:n.style.getPropertyValue(t),priority:n.style.getPropertyPriority(t)}),apply:ye,commit:xe,rerender:_e}),(c.design\|\|n.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(te??=import("./react-props-panel-MN5XOAGL.js").then(e=>ee=e).catch(e=>{throw te=null,e}),te.then(e=>{if(!$\|\|W!==n\|\|P.querySelector(".design-react-group, .design-theme-group"))return;let t=c.root;e.attachThemeSwitcher(P,c.design,()=>Te(n),t);let o=e.createReactPropsPanel(n,()=>{T.textContent="Runtime preview · Undo, Reset or reload to restore",De()},t,Te,c.design);o&&P.append(o),e.attachStyleTokenControls(n,i.fields,P,(e,t,i)=>{ge(n,e.property,i),ue(n,e.property),se.set(t,{value:i,priority:n.style.getPropertyPriority(e.property)}),xe(t,e.property)},t,i.valueFor,i.toHex,c.design,e=>{pe.push({element:n,undo:e}),De()});let s=e.createDesignThemePanel(n,i,De,t);s&&P.append(s)}).catch(()=>{}))):u.then(()=>{$&&W===n&&_e()})}function we(){h.toggleAttribute("data-empty",H.hidden=!W),j&&(j.hint.hidden=!W),h.parentElement?.toggleAttribute("data-design-empty",$&&!W);let e=[...G.keys()].filter(Ee);I.hidden=!!W\|\|!e.length,j&&(j.pending.hidden=I.hidden),j?.update(e.length,e.some(e=>e.isConnected&&G.get(e)===X()))}function Ee(e){return!!(oe.get(e)?.size\|\|e instanceof HTMLElement&&N?.hasChanges(e)\|\|ee?.hasReactPropChanges(e)\|\|ee?.hasDesignTokenEdit(e))}function ke(){ze(),Le?.disconnect(),W=null,V=null,m.hidden=f.hidden=!0,_e(),De()}function Ce(e,t,n=!1,i=m){if(!$\|\|!e?.isConnected)return void(i.hidden=!0);let s=e.getBoundingClientRect();if(s.width&&s.height){if(i.hidden=!1,i.dataset.kind=t,n&&(e!==Q\|\|t!==Z)){Q=e,Z=t,clearTimeout(J);let n=h.getBoundingClientRect(),i=e=>s.left<e+n.width&&s.right>e&&s.top<n.bottom&&s.bottom>n.top;c.flip&&n.width&&i(n.left)&&!i(document.documentElement.clientWidth-n.right)&&(J=window.setTimeout(c.flip,"hover"===t?350:0))}i.hidden=!o(i,s,e,c.bounds?.(e))}else i.hidden=!0}function Pe(e=!1){Ce(W??V,W?"selected":"hover",e),Ce(W&&V!==W?V:null,"hover",!1,f)}function Ae(){Y\|\|(Y=requestAnimationFrame(()=>{Y=0,W&&(!W.isConnected\|\|q!==X())&&ke(),Pe()}))}let Le="function"==typeof ResizeObserver?new ResizeObserver(Ae):null;function Te(e){!n(e)\|\|!e.isConnected\|\|c.host.contains(e)\|\|(N?.element&&N.element!==e&&ze(),Le?.disconnect(),Le?.observe(e),W=e,V=e,q=X(),G.set(e,q),_e(),Ce(e,"selected",!0),f.hidden=!0,De())}let Me=()=>d("(max-width:520px)");function Se(e){h.toggleAttribute("data-folded",e&&Me()),k.setAttribute("aria-expanded",String(!h.hasAttribute("data-folded"))),k.setAttribute("aria-label",h.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function Re(e){Se(!1),Me()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=h.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n\|\|window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:l()?"auto":"smooth"})})}function De(){Ae(),R.disabled=!pe.length&&!ee?.canUndoReactProp(W)&&!ee?.canUndoDesignTokenEdit(W),D.disabled=!function(){let e=W,t=e?(oe.get(e)?.size??0)+ +(e instanceof HTMLElement&&!!N?.hasChanges(e))+ +!!ee?.hasReactPropChanges(e)\|\|+!!ee?.hasDesignTokenEdit(e):0;return L.textContent=t?`${t} change${t>1?"s":""}`:"",A.toggleAttribute("data-changes",t>0\|\|!R.disabled),B.hidden=!t&&!fe,t}(),z.disabled=!W\|\|!oe.get(W)?.size,H.disabled=!W,K.disabled=!(!N?.busy&&W?.isConnected&&W instanceof HTMLElement),K.textContent=N?.isEditing(W instanceof HTMLElement?W:null)?"Done editing":"Edit text",K.setAttribute("aria-label",N?.isEditing(W instanceof HTMLElement?W:null)?"Finish inline text editing":"Edit selected text inline"),we()}function ze(e=!1){N?.finish(e),De()}function He(e){!$\|\|"Escape"!==e.key\|\|e.defaultPrevented&&!e.composedPath().includes(c.host)\|\|(e.preventDefault(),e.stopImmediatePropagation(),ke(),Ke(!1),c.onExit())}function Ke(e){if(e\|\|(Oe(),N?.finish(),$&&(me=fe,be(!0,!1)),ee?.restoreThemes()),e&&!$&&void 0!==me){let e=me;me=void 0,be(e,!1)}e&&W&&(!W.isConnected\|\|q!==X())&&ke(),clearTimeout(U),U=0,$=e,we(),e?(h.hidden=!1,h.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{$&&(h.dataset.state="active")}),m.hidden=!W,_e(),Se(!W),Ce(W,"selected"),E.focus({preventScroll:!0})):(V=null,m.hidden=f.hidden=!0,h.setAttribute("aria-hidden","true"),h.dataset.state="closing",l()?(h.hidden=!0,delete h.dataset.state):U=window.setTimeout(()=>{U=0,$\|\|(h.hidden=!0,delete h.dataset.state)},250))}function Be(){Oe(),be(!1,!1);for(let[e,n]of ne)t(e,n.keys(),()=>{for(let[t,i]of n)ve(e,t,i)},!1,ie.has(e)),ie.delete(e);ne.clear(),oe.clear(),pe.length=0,N?.restoreAll(),ee?.resetPreviews(),G.clear(),De()}function Oe(){c.root.dispatchEvent(new Event("komo-preview-cancel"))}function je(e,t){return t(e,oe.get(e),t=>ne.get(e)?.get(t)?.computed,ee?.tokenBoundProperties(e),[e instanceof HTMLElement?N?.proposal(e):void 0,ee?.proposedDesignChanges(e)],ee?.designContext(e,c.design))}function Ie(e){N?.isEditing(e instanceof HTMLElement?e:null)&&ze(!0);let n=oe.get(e),i=(e instanceof HTMLElement&&N?.hasChanges(e))??!1,o=ee?.hasReactPropChanges(e)??!1,s=ee?.hasDesignTokenEdit(e)??!1;if(n?.size\|\|i\|\|o\|\|s){i&&e instanceof HTMLElement&&N?.reset(e),t(e,n?.keys()??[],()=>{for(let t of n?.keys()??[])ve(e,t,ne.get(e)?.get(t))},!1,ie.has(e)),oe.delete(e),ne.delete(e),ie.delete(e),G.delete(e),o&&ee?.resetReactProps(e),s&&ee?.resetDesignTokenEdits(e);for(let t=pe.length-1;t>=0;t--)pe[t].element===e&&pe.splice(t,1)}}K.addEventListener("click",e=>{N\|\|W&&(T.textContent="Loading inline text editor…",import("./inline-text-editor-F4CSRB4G.js").then(t=>{N\|\|!W\|\|!$\|\|(N=t.bindInlineTextTools({button:K,status:T,selected:()=>W instanceof HTMLElement?W:null,active:()=>$,onChange:De,onCommit(e){pe.push({kind:"text",element:e})}}),N.toggle(e))}).catch(()=>{T.textContent="Inline text editing is unavailable."}))}),k.addEventListener("click",()=>Se(!h.hasAttribute("data-folded"))),x.addEventListener("click",()=>Te(W?.parentElement??null)),E.addEventListener("click",()=>{N?.element&&ze(),ke(),Ke(!1),c.onExit()}),R.addEventListener("click",()=>{let e=pe.pop();e?e.kind?"text"===e.kind?W===(N?.undo()??e.element)&&_e():(ve(e.element,e.property,e.before),ee?.syncDesignTokenBinding(e.element,e.property),ue(e.element,e.property),W===e.element&&_e(),Ce(W??V,W?"selected":"hover")):(e.undo(),_e()):(W&&(ee?.undoDesignTokenEdit(W),ee?.undoReactProp(W),_e()),T.textContent="Runtime preview · Undo, Reset or reload to restore"),De(),(R.disabled?E:R).focus({preventScroll:!0})}),D.addEventListener("click",()=>{W&&(Ie(W),_e(),Ce(W,"selected"),De(),E.focus({preventScroll:!0}))}),z.addEventListener("click",()=>{let e=W,t=e?oe.get(e):void 0;!e\|\|!t?.size\|\|de().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),T.textContent="CSS copied"}catch{T.textContent=i}})}),H.addEventListener("click",()=>{let e=W;e&&(N?.isEditing(e instanceof HTMLElement?e:null)&&ze(),de().then(({designProposal:t})=>{if(!$\|\|W!==e\|\|!e.isConnected)return;let n=je(e,t);Ie(e),De(),c.onComment(e,n)},()=>{T.textContent="Comment unavailable · try again"}))});let Fe=()=>be(!1);for(let e of[P,M,K])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,Fe,!0);document.addEventListener("pointermove",function(e){if(!$)return;if(e.composedPath().includes(c.host))return V=null,void Pe();let t=i(c.targetAt(e.clientX,e.clientY),e.metaKey\|\|e.ctrlKey);V=t&&!c.host.contains(t)?t:null,Pe(!W)},{capture:!0,signal:re.signal}),document.addEventListener("pointerdown",function(e){if(!$\|\|0!==e.button\|\|e.composedPath().includes(c.host))return;let t=i(c.targetAt(e.clientX,e.clientY),e.metaKey\|\|e.ctrlKey);!t\|\|c.host.contains(t)\|\|N?.element&&(t===N.element\|\|N.element.contains(t))\|\|(N?.element&&ze(),e.preventDefault(),e.stopImmediatePropagation(),Te(t))},{capture:!0,signal:re.signal}),document.addEventListener("click",function(e){!$\|\|e.composedPath().includes(c.host)\|\|(e.preventDefault(),e.stopImmediatePropagation(),W&&Re(W),2===e.detail&&W?.contains(e.target)&&!K.disabled&&!N?.element&&K.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:re.signal}),document.addEventListener("keydown",function(e){if(N?.handleKey(e))return void K.focus({preventScroll:!0});let t=e.key.toLowerCase(),i=e.composedPath()[0],o=i instanceof HTMLElement&&(i.isContentEditable\|\|i.matches("input,textarea,select"));if($&&W&&e.altKey&&!e.ctrlKey&&!e.metaKey&&!o&&("arrowup"===t\|\|"arrowdown"===t)){let i=("arrowup"===t?W.parentElement:[...W.children].find(e=>n(e)&&!e.matches("script,style,defs,title,desc,metadata")))??null;return void(n(i)&&i!==document.body&&i!==document.documentElement&&!c.host.contains(i)&&(e.preventDefault(),e.stopImmediatePropagation(),Te(i),Re(i)))}if($&&!B.hidden&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&("b"===t\|\|"arrowleft"===t\|\|"arrowright"===t)&&!o)return e.preventDefault(),e.stopImmediatePropagation(),void be("b"===t?!fe:"arrowleft"===t);if($&&!N?.element&&("Enter"===e.key\|\|" "===e.key)&&!e.composedPath().includes(c.host)){let t=document.activeElement;if(n(t)&&t!==document.body&&t!==document.documentElement)return e.preventDefault(),e.stopImmediatePropagation(),Te(t),void Re(t)}e.composedPath().includes(c.host)&&He(e)},{capture:!0,signal:re.signal}),window.addEventListener("keydown",He,{signal:re.signal}),window.addEventListener("scroll",Ae,{capture:!0,passive:!0,signal:re.signal}),window.addEventListener("resize",Ae,{passive:!0,signal:re.signal});let $e=new MutationObserver(()=>{$&&W&&!W.isConnected&&ke(),V&&!V.isConnected&&(V=null,Pe())});$e.observe(document.body,{childList:!0,subtree:!0});let Ue=de().then(e=>{re.signal.aborted\|\|(j=e.selectionViews({exitKey:c.exitKey,review(){let e=[...G.keys()].reverse().find(e=>e.isConnected&&G.get(e)===X()&&Ee(e));e&&Te(e)},reset:Be,proposals:()=>[...G.keys()].filter(Ee).map(t=>je(t,e.designProposal)),message:e=>{T.textContent=e}}),p.textContent+=j.styles,R.innerHTML=j.icons.undo,D.innerHTML=j.icons.reset,h.insertBefore(j.hint,I),I.append(j.pending),$?_e():we())},()=>{T.textContent="Selection tools unavailable · try again"});return{setActive:Ke,select:Te,clearSelection:ke,setReturnAction(e){v=e,y.hidden=!e,e&&(y.setAttribute("aria-label",e.label),y.title=e.label)},mountPanel(e){h.parentElement!==e&&(h.parentElement?.removeAttribute("data-design-empty"),e.append(h),we())},get active(){return $},ready:Promise.all([u,Ue]),destroy(){N?.finish(!0),Ke(!1),Be(),clearTimeout(U),clearTimeout(he),clearTimeout(J),Le?.disconnect(),$e.disconnect(),re.abort(),cancelAnimationFrame(Y),h.remove(),m.remove(),f.remove(),p.remove()}}}export{c as createDesignMode};

package/dist/{design-panel-KZCDP47N.js → design-panel-KHZDEA36.js} RENAMED Viewed

	@@ -1 +1 @@
1	- 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"},{property:"fill",label:"Fill",kind:"color",wide:!0},{property:"stroke",label:"Stroke",kind:"color",wide:!0},{property:"stroke-width",label:"Stroke width",kind:"length",min:0,max:24}],n=import("./select-menu-IY5BJMFM.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(10Number(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 t=document.createElement("span").style;return t.setProperty(e.property,n),t.getPropertyValue(e.property)?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+=2i,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){let i=t.find(e=>e.property===n);s.append(d(e.element instanceof SVGElement&&"color"===n?{...i,label:"Color"}:i,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);if(r instanceof SVGElement)return void e.append(a(t,"Layout",r instanceof SVGSVGElement?["width","height","display"]:["display"]),a(t,"Appearance",["color","fill","stroke","stroke-width"]));let 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};
1	+ 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"},{property:"fill",label:"Fill",kind:"color",wide:!0},{property:"stroke",label:"Stroke",kind:"color",wide:!0},{property:"stroke-width",label:"Stroke width",kind:"length",min:0,max:24}],n=import("./select-menu-QH7IVM7P.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(10Number(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 t=document.createElement("span").style;return t.setProperty(e.property,n),t.getPropertyValue(e.property)?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+=2i,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){let i=t.find(e=>e.property===n);s.append(d(e.element instanceof SVGElement&&"color"===n?{...i,label:"Color"}:i,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(n=>n?.attach(e,t.element));let d=getComputedStyle(r);if(r instanceof SVGElement)return void e.append(a(t,"Layout",r instanceof SVGSVGElement?["width","height","display"]:["display"]),a(t,"Appearance",["color","fill","stroke","stroke-width"]));let 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-popup.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+export { previewStyle } from "./design-preview.js";
+export declare const popupStyles = ".komo-select,.komo-tokens{position:absolute;z-index:20;box-sizing:border-box;border-radius:10px;background:#232323;box-shadow:0 0 0 1px #ffffff14,0 12px 32px #0008;color:#d9d6d1;font-size:11px;font-weight:400;line-height:1.25;text-align:left;cursor:default;transform-origin:top;animation:komo-popup-in var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)) backwards}.komo-select[data-up],.komo-tokens[data-up]{transform-origin:bottom}@keyframes komo-popup-in{from{opacity:0;transform:scale(.97)}}@media (prefers-reduced-motion:reduce){.komo-select,.komo-tokens{animation:none}}";
+/** The nearest scrolling or clipping ancestor, bounded by the viewport. */
+export declare function popupBounds(from: Element): {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+};
+/** Cancel before a Design transition and when a render replaces the trigger. */
+export declare function watchPopup(trigger: HTMLElement, close: () => void, signal: AbortSignal): void;

package/dist/design-preview.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { type DesignTarget } from "./design-target.js";
+export declare function removeEmptyStyle(element: DesignTarget): void;
+/** A transient declaration without changing bindings, proposals or history. */
+export declare function previewStyle(element: Element, property: string, value: string): () => void;
+/** Resume and reset immediately; explicit Before/After comparisons may animate. */
+export declare function changePreviewStyles(element: DesignTarget, properties: Iterable<string>, apply: () => void, animate?: boolean, removeEmpty?: boolean): void;

package/dist/index.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{b as o,c as s}from"./chunk-~~G2QGDYNV~~.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-53M6AOAX.js";import"./chunk-WGISPOJV.js";import"./chunk-PLSWBSSX.js";export{s as initComments,o as initKomo};
1	+ import{b as o,c as s}from"./chunk-ZSDIMEPV.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-53M6AOAX.js";import"./chunk-WGISPOJV.js";import"./chunk-PLSWBSSX.js";export{s as initComments,o as initKomo};

package/dist/{inline-text-editor-JSJVHPMM.js → inline-text-editor-F4CSRB4G.js} RENAMED Viewed

	@@ -1 +1 @@
1	- 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-~~PV3SKNTA~~.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};
1	+ 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-MN5XOAGL.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};