@hazem3500/komo 0.9.36 → 0.9.38

package/dist/chunk-WNJLJD4A.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk-RPY7OOOR.js";function t(e){let t=new WeakMap,s=new WeakMap;return{begin(e,r){t.set(e,r)},override(e,r){let i=t.get(e);r&&i&&!i.bindingUndo&&!s.has(e)&&(i.bindingUndo=r)},commit(r,i,l,o){let n={value:i.style.getPropertyValue(l),priority:i.style.getPropertyPriority(l)},y=s.get(r),a=y?.before??t.get(r)??{value:"",priority:""};if(n.value!==a.value||n.priority!==a.priority||a.bindingUndo)if(y)y.after=n;else{let t={kind:"style",element:i,property:l,before:a,after:n};e.push(t),s.set(r,t)}else y&&e.splice(e.indexOf(y),1),s.delete(r);o&&(t.set(r,n),s.delete(r))},cancel(i,l,o){let n=s.get(i);n&&(r(l,o,n.before),n.before.bindingUndo?.(),e.splice(e.indexOf(n),1)),s.delete(i),t.delete(i)}}}function r(e,t,r){r?.restore?r.restore():e.style.setProperty(t,r?.value??"",r?.priority)}function s(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 i(e,t){if(!t)return null;let r="",s=0,i=!1;for(let e of t)if(i)i=!1;else if("\\"===e)i=!0;else if(r)e===r&&(r="");else if('"'===e||"'"===e)r=e;else if("("===e)s++;else if(")"===e&&--s<0)return null;if(r||s||i)return null;let l=document.createElement("span").style;return l.setProperty(e,t),l.getPropertyValue(e)?t:null}function l(e,t){let r=e.getAttribute("style"),s=e.style.cssText,i=e.style.getPropertyValue(t),l=e.style.getPropertyPriority(t),n=getComputedStyle(e).getPropertyValue(t).trim(),y=r=>{let s=e.ownerDocument.createElement("span").style;return s.cssText=r,s.setProperty(t,""),s.cssText},a=y(s);return{value:i,priority:l,computed:n,absent:null===r,restore(){y(e.style.cssText)===a?null===r?(e.getAttribute("style"),e.removeAttribute("style")):e.setAttribute("style",r):(e.style.setProperty(t,i,l),null===r&&!e.style.length&&o(e))}}}function o(e){e.style.length||(e.getAttribute("style"),e.removeAttribute("style"))}function n(t,r,s){if(!e(t))return()=>{};let i=t.style.getPropertyValue(r),l=t.style.getPropertyPriority(r),n=!t.hasAttribute("style");return t.style.setProperty(r,s,l),()=>{i?t.style.setProperty(r,i,l):t.style.removeProperty(r),n&&o(t)}}var y=new WeakMap;function a(e,t,r,s=!1,i=!1){let l=y.get(e);l&&(clearTimeout(l.timer),l.restore());let n=e.style.getPropertyValue("transition"),a=e.style.getPropertyPriority("transition"),u=!e.hasAttribute("style"),p=s?[...t].map(e=>`${e} .3s cubic-bezier(.22,1,.36,1)`).join():"none";e.style.setProperty("transition",p,"important");let f=e.style.getPropertyValue("transition"),g=()=>{y.delete(e),e.style.getPropertyValue("transition")===f&&"important"===e.style.getPropertyPriority("transition")&&(n?e.style.setProperty("transition",n,a):e.style.removeProperty("transition"),(i||u)&&o(e))};r(),s?y.set(e,{restore:g,timer:window.setTimeout(g,320)}):(getComputedStyle(e).color,g())}export{t as a,r as b,s as c,i as d,l as e,o as f,n as g,a as h};

package/dist/design-comment-BYUC2WXI.js

@@ -0,0 +1 @@
+import{e}from"./chunk-ZJWJEB5S.js";import{b as t,f as n,g as r,h as o,p as a}from"./chunk-CIOHAE5J.js";import"./chunk-4KEVPMJJ.js";import{f as s}from"./chunk-WNJLJD4A.js";import{a as i}from"./chunk-RPY7OOOR.js";var l=/^Proposed (.+?) changes? \(preview only\)$/,d={style:"Style changes","inline text":"Text change","design-token":"Token changes","React prop":"Prop changes"};function p(e){return e.split("\n").some(e=>l.test(e))}function c(e){try{return e.startsWith('"')?JSON.parse(e):e}catch{return e}}function f(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,o,a,s]=n;return"inline text"===t?{label:"Text",before:c(o),after:c(a),apply:{kind:"text",property:"text"}}:"React prop"===t?{label:r,before:c(o),after:c(a),...s&&"custom value"!==s?{token:s}:{}}:{label:r,before:o,after:a,apply:{kind:"style",property:r}}}function g(e){let t=[];for(let n of e.split(/\n{2,}/)){let e=n.split("\n"),r=l.exec(e[0]??"");if(!r){n.trim()&&t.push({text:n.trim()});continue}let o=r[1],a={title:d[o]??`${o[0].toUpperCase()}${o.slice(1)} changes`,changes:[]};for(let t of e.slice(1))if(t.startsWith("Target: "))a.target=t.slice(8);else if(t.startsWith("Component: ")){let[,e,n]=/^(.*?)(?: \((.+)\))?$/.exec(t.slice(11));a.component=e,n&&(a.source=n)}else if(t.startsWith("Source: "))a.source=t.slice(8);else{let e=t.includes("→")?f(t,o):null;e&&e.before!==e.after&&a.changes.push(e)}a.changes.length?t.push(a):t.push({text:n.trim()})}return t}function u(e){let t=g(e),n=t.filter(e=>"changes"in e),r=t.find(e=>"text"in e)?.text,o=n.reduce((e,t)=>e+t.changes.length,0),a=n.find(e=>e.target)?.target,s=`Design change · ${o} ${1===o?"edit":"edits"}${a?` on ${m(a)}`:""}`;return r?`${r}\n${s}`:s}function m(e){return(e.split(">").at(-1)??e).trim().replace(/:nth-of-type\(\d+\)/g,"")||e}var h=/^(#[0-9a-f]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\)|oklch\([^)]*\))$/i,y=new Map,x=new Set,b=new Set,v="Preview unavailable: the target or its text has changed.";function w(e){x.add(e),j(e);for(let t of b){if(t.dataset.previewKey!==e||!t.isConnected)continue;t.querySelectorAll("button").forEach((e,t)=>{e.setAttribute("aria-pressed",String(0===t)),1===t&&(e.disabled=!0)});let n=t.closest(".design-comment")?.querySelector('[role="status"]');n&&(n.textContent=v,n.hidden=!1)}}var k=new Map;function E(e){let t=k.get(e);t&&(clearTimeout(t.timer),k.delete(e),t.finish())}function $(t,n,r,o=!1,l){if(x.has(t))return!1;E(t);let d=[],p=[],c=[],f=new Set,g=!1;for(let u of n){let n=r(u.target);for(let r of u.changes)if(r.apply&&"(unset)"!==r.after)if("variable"===r.apply.kind){let e=document.documentElement,t=e.style.getPropertyValue(r.apply.property);e.style.setProperty(r.apply.property,r.after),d.push(()=>t?e.style.setProperty(r.apply.property,t):e.style.removeProperty(r.apply.property))}else if(i(n)&&"style"===r.apply.kind){n.hasAttribute("style")||f.add(n);let e=r.token&&l?.tokens.find(e=>e.path===r.token);if(e&&l){try{d.push(a(l.adapter,n,r.apply.property,e))}catch{g=!0}continue}let t=n.style.getPropertyValue(r.apply.property),i=n.style.getPropertyPriority(r.apply.property),u=!n.hasAttribute("style"),m=r.apply.property,h=()=>"(unset)"!==r.before&&(n.style.setProperty(m,r.before,"important"),!0);o&&h()&&getComputedStyle(n).getPropertyValue(m),n.style.setProperty(m,r.after,"important"),c.push(h),p.push(()=>{t?n.style.setProperty(r.apply.property,t,i):n.style.removeProperty(r.apply.property),u&&s(n)})}else if("text"===r.apply.kind){let o=n instanceof HTMLElement?e(n,r.before,r.after,()=>w(t)):void 0;o?d.push(o):g=!0}else"style"===r.apply.kind&&(g=!0)}if(f.size&&p.unshift(()=>{for(let e of f)i(e)&&s(e)}),g){for(let e of[...d,...p].reverse())e();return!1}return d.length+p.length&&y.set(t,{restore:d,restoreStyles:p,pinBefore:c}),d.length+p.length>0}var C,S=["color","background-color","border-color","outline-color","fill","stroke","box-shadow","text-decoration-color"],P="cubic-bezier(.22, 1, .36, 1)";function N(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)S.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:P})}if(!n.size)return;C&&(clearTimeout(C.timer),C.style.remove());let r=document.createElement("style");r.textContent=`*, *::before, *::after { transition-property: ${[...n].join(", ")} !important; transition-duration: 420ms !important; transition-timing-function: ${P} !important; transition-delay: 0s !important; }`,document.head.append(r),C={style:r,timer:setTimeout(()=>{r.remove(),C=void 0},480)}}function j(e,t=!1){E(e);let n=y.get(e);if(!n)return;y.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();k.set(e,{finish:r,timer:setTimeout(()=>E(e),480)})}function A(e){return y.has(e)||k.has(e)}function O(e=new Set){e.has("draft")||(W=void 0,q?.events.abort(),q=void 0);for(let t of[...k.keys()])e.has(t)||E(t);for(let t of[...y.keys()])e.has(t)||j(t);for(let t of x)e.has(t)||x.delete(t)}function T(e){return"text"===e.apply?.kind||!(e.apply||e.token||h.test(e.before)||h.test(e.after))&&(/\s/.test(e.before+e.after)||e.before.length+e.after.length>32)}function L(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 o=e.slice(0,n),a=e.slice(e.length-r),s=document.createElement("p");s.className="design-diff",s.append(o.length>48?`…${o.slice(-40)}`:o);let i=e.slice(n,e.length-r),l=t.slice(n,t.length-r);return i&&s.append(Object.assign(document.createElement("del"),{textContent:i})),l&&s.append(Object.assign(document.createElement("ins"),{textContent:l})),s.append(a.length>48?`${a.slice(0,40)}…`:a),s}function M(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(h.test(e)){let t=document.createElement("span");t.className="design-swatch",t.style.background=e,n.append(t)}return n.append(e),n}function D(e,t,n){let r=g(t),o=r.filter(e=>"changes"in e),a=document.createElement("div");a.className="design-comment",a.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-toggle button:disabled { opacity: .45; cursor: not-allowed; }\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 s=document.createElement("p");s.className="design-source",s.setAttribute("role","status"),s.hidden=!x.has(n.key),s.textContent=v;let i=!!n.compact;i&&(a.dataset.compact="");let l=i?3:1/0,d=0,p=o.some(e=>e.changes.some(e=>e.apply)),c=[],f=()=>{let e=y.has(n.key);for(let t of c)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),a.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 g=document.createElement("div");g.className="design-card-label",g.append(Object.assign(document.createElement("span"),{className:"design-card-title",textContent:e.title}));let u=e.target?m(e.target):e.component;if(u){let t=Object.assign(document.createElement("span"),{className:"design-card-target",textContent:u});e.target&&(t.title=e.target),g.append(t)}if(r.append(g),p&&!c.length&&e.changes.some(e=>e.apply)){let e=document.createElement("div");e.dataset.previewKey=n.key,e.className="design-toggle",e.setAttribute("role","group"),e.setAttribute("aria-label","Preview on page");for(let[t,r]of["Before","After"].entries()){let a=Object.assign(document.createElement("button"),{type:"button",textContent:r,title:`${r} · ${t?"→":"←"} or B`});1===t&&(a.disabled=x.has(n.key)),a.addEventListener("click",()=>{let e=1===t;if(e===y.has(n.key))return;let r=n.resolve(o.find(e=>e.target)?.target);e&&r?.scrollIntoView({block:"center",behavior:"smooth"});let a="function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches;a||N(o,n.resolve),e?(s.hidden=$(n.key,o,n.resolve,!a,n.tokens),s.textContent=v):j(n.key,!a),n.onSwitch&&setTimeout(n.onSwitch,a?0:480),f()}),e.append(a)}c.push(e);for(let e of b)e.isConnected||b.delete(e);b.add(e),r.append(e)}t.append(r);let h=document.createElement("div");h.className="design-rows";let w=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>=w&&e.changes.length>w+1;let o=Object.assign(document.createElement("span"),{className:"design-prop",textContent:t.label});if(o.title=t.label,T(t))return r.classList.add("design-row-prose"),r.append(o,L(t.before,t.after)),void h.append(r);let a=document.createElement("span");a.className="design-values";let s=M(t.before);s.classList.add("design-before"),a.append(s,Object.assign(document.createElement("span"),{className:"design-arrow",textContent:"→"}),M(t.after,t.token)),r.append(o,a),h.append(r)}),t.append(h);let k=h.querySelectorAll("[hidden]").length;if(k){let e=Object.assign(document.createElement("button"),{type:"button",className:"design-more",textContent:`Show ${k} more`});e.addEventListener("click",()=>{h.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})),a.append(t)}d&&a.append(Object.assign(document.createElement("span"),{className:"design-source",textContent:`+${d} more`})),a.append(s),f(),e.replaceChildren(a),c.length&&(z||(z=!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=[...b].reverse().find(e=>e.isConnected),o=r?.querySelectorAll("button"),a=-1===t?r?.querySelector('button[aria-pressed="false"]'):o?.[t];a&&(e.preventDefault(),a.click())})))}var W,q,z=!1;function J(e,a,s,i={}){let d=i.design,p=d?.tokens;if(d&&p){if(q&&q.options.design===d&&(a===q.source||a===q.body))return q.container=e,q.options=i,void D(e,q.body,{key:"draft",resolve:q.resolve,tokens:q.context,note:(e,t)=>e.append(t)});q?.events.abort(),j("draft"),x.delete("draft"),W=a;let c=new AbortController,f=new Map(g(a).filter(e=>"changes"in e).map(e=>[e.target,s(e.target)])),u=0,m=!0,h=q={source:a,body:a,container:e,resolve:e=>{let t=f.get(e);return t?.isConnected?t:null},options:i,events:c,context:void 0,async refresh(){let e=++u,r=await o(p,n(d));if(c.signal.aborted||e!==u)return;let a=m||y.has("draft");m=!1,j("draft"),h.context={adapter:p,tokens:r},h.body=function(e,r,o,a){let s=Object.entries(n(o)).map(([e,t])=>`${e}=${t}`.replace(/\s+/g," ").replace(/→/g,"->")).join(", ");return e.split(/(\n{2,})/).map(e=>{let n=e.split("\n");if(!l.test(n[0]))return e;let o=a(n.find(e=>e.startsWith("Target: "))?.slice(8));return n.map(e=>{if(e.startsWith("Theme: ")&&s)return`Theme: ${s}`;if(n[0].startsWith("Proposed style ")){let n=/^- ([\w-]+): (.*?) → (.*)$/.exec(e),a=n&&t(o,n[1]),s=a&&"path"in a&&r.find(e=>e.path===a.path);return n&&s?`- ${n[1]}: ${s.value} → ${n[3]}`:e}if(!n[0].startsWith("Proposed design-token "))return e;let a=/^Element ([\w-]+): (.*?) → (.*?) \[([^\]]+)\]$/.exec(e);if(!a)return e;let[,i,l,,d]=a,p=r.find(e=>e.path===d);if(!p)return e;let c=/\[([^\]]+)\]$/.exec(l)?.[1],f=c&&r.find(e=>e.path===c);return`Element ${i}: ${f?`${f.value} [${f.path}]`:l} → ${p.value} [${d}]`}).join("\n")}).join("")}(h.source,r,d,h.resolve),W=h.body,h.options.onUpdate?.(h.body);let s=g(h.body).filter(e=>"changes"in e);a&&$("draft",s,h.resolve,!1,h.context);let i=h.container.querySelector(".design-toggle button:focus")?.textContent;D(h.container,h.body,{key:"draft",resolve:h.resolve,tokens:h.context,note:(e,t)=>e.append(t)}),i&&[...h.container.querySelectorAll(".design-toggle button")].find(e=>e.textContent===i)?.focus({preventScroll:!0})}};return r(d,e.ownerDocument,()=>{h.refresh().catch(()=>{})},c.signal),h.refresh()}q?.events.abort(),q=void 0,W!==a&&(j("draft"),x.delete("draft"),W=a,$("draft",g(a).filter(e=>"changes"in e),s)),D(e,a,{key:"draft",resolve:s,note:(e,t)=>e.append(t)})}export{p as isDesignComment,A as isPreviewing,g as parseDesignComment,D as renderDesignComment,J as renderDraftProposal,O as resetDesignPreviews,m as shortTarget,u as summarizeDesignComment};

package/dist/design-comment.d.ts

@@ -1,3 +1,4 @@
+import type { DesignSystem, DesignToken, TokenAdapter } from "./design-system.js";
 export interface DesignChange {
     label: string;
     before: string;
@@ -28,6 +29,10 @@ export declare function parseDesignComment(body: string): DesignBlock[];
 export declare function summarizeDesignComment(body: string): string;
 /** The last step of a generated selector, without :nth-of-type noise. */
 export declare function shortTarget(selector: string): string;
+type DraftTokens = {
+    adapter: TokenAdapter;
+    tokens: readonly DesignToken[];
+};
 /** Whether a comment's After state is currently applied to the page. */
 export declare function isPreviewing(key: string): boolean;
 /** Undo every live preview except those whose cards are still on screen. */
@@ -43,11 +48,18 @@ export interface DesignCommentOptions {
     compact?: boolean;
     /** Called once a Before/After switch has settled, e.g. to move a dialog off a resized element. */
     onSwitch?(): void;
+    /** Current semantic values for an unsaved draft; saved comments keep their recorded values. */
+    tokens?: DraftTokens;
 }
 /** Replace `container`'s content with a change card for each proposal. */
 export declare function renderDesignComment(container: HTMLElement, body: string, options: DesignCommentOptions): void;
+interface DraftOptions {
+    design?: DesignSystem;
+    onUpdate?(body: string): void;
+}
 /**
  * A proposal being written. Design mode has already restored the page, so the
  * card starts on After; posting or closing the composer resets it.
  */
-export declare function renderDraftProposal(container: HTMLElement, body: string, resolve: DesignCommentOptions["resolve"]): void;
+export declare function renderDraftProposal(container: HTMLElement, body: string, resolve: DesignCommentOptions["resolve"], options?: DraftOptions): void | Promise<void>;
+export {};

package/dist/{design-export-44WHYCLI.js → design-export-47CRMQ2M.js}

@@ -1 +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.map(t=>t&&!/^Target: /m.test(t)?t.replace("\n",`\nTarget: ${i(e)}\n`):t)].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};
+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.map(t=>t&&!/^Target: /m.test(t)?t.replace("\n",`\nTarget: ${i(e)}\n`):t)].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.js

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

package/dist/{design-panel-7XSEHKNG.js → design-panel-RSY5OPUN.js}

@@ -1 +1 @@
-import{c as e,d as t}from"./chunk-4JLPHVWU.js";import"./chunk-RPY7OOOR.js";var n='.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',i=[{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}],r=import("./select-menu-ZUYNQ5VF.js").catch(()=>null),o=["font-family","font-size","line-height","font-weight","text-align","color"];function l(t){let n=t.match(/^rgba\(.*,\s*([\d.]+)\)$/)?.[1];return void 0===n?/^rgb\(/.test(t)?e(t):t||"transparent":Number(n)?t:"transparent"}function d(e,t){let n=getComputedStyle(t).getPropertyValue(e.property).trim();if("color"===e.kind)return l(n);if("length"===e.kind||"size"===e.kind){let t=n.match(/^(-?\d+(?:\.\d+)?)px$/);return t?String(Math.round(10*Number(t[1]))/10):"size"===e.kind?n||"auto":"0"}return n}function a(n,i){let{element:r}=i,o=document.createElement("div");o.className=`design-field design-field--${n.kind}`,o.dataset.fieldProperty=n.property,o.toggleAttribute("data-wide",!!n.wide);let l="select"===n.kind?document.createElement("select"):document.createElement("input");if(l instanceof HTMLSelectElement)for(let e of n.values??[]){let t=document.createElement("option");t.value=t.textContent=e,l.append(t)}else l.type="length"===n.kind?"number":"text",l.autocomplete="off",l.spellcheck=!1,l.placeholder=n.placeholder??"","length"===n.kind&&(l.min=String(n.min??0),l.max=String(n.max??1e3),l.setAttribute("inputmode","decimal"));if(l.dataset.property=n.property,l.setAttribute("aria-label",n.label),l.title=n.label,l.value=d(n,r),l instanceof HTMLSelectElement&&!l.value){let e=document.createElement("option");e.value=e.textContent=d(n,r),l.prepend(e),l.value=e.value}let a=()=>i.begin(l,n.property),p=()=>{i.apply(l,n.property,function(e,n){let i=n.value.trim();if("color"===e.kind)return t(e.property,i);if("length"===e.kind){if(!i)return null;let t=Number(i);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(i)?"size"===e.kind&&/^[\d.]+$/.test(i)?`${i}px`:i:null:t(e.property,i)}(n,l)),i.commit(l,n.property,!1)},s=()=>i.commit(l,n.property);if(l.addEventListener("focus",a),l.addEventListener("input",p),l.addEventListener("change",s),l.addEventListener("blur",s),"color"===n.kind){let t=document.createElement("input");t.type="color",t.setAttribute("aria-label",`${n.label} picker`);let i=()=>{t.value=e(l.value)};i(),t.addEventListener("pointerdown",a),t.addEventListener("focus",a),t.addEventListener("input",()=>{l.value=t.value,p()}),t.addEventListener("change",s),l.addEventListener("input",i),o.append(t)}if(n.glyph){let e=e=>{let t=l.value.trim().match(/^(-?\d*\.?\d+)([a-z%]*)$/i),i=t?t[2]:"text"===n.kind?"px":"",o=t?Number(t[1]):parseFloat(getComputedStyle(r).getPropertyValue(n.property))||0,d=Math.round(10*(o+e*("text"!==n.kind||i?1:.1)))/10;"text"!==n.kind&&(d=Math.min(n.max??1e4,Math.max(n.min??0,d))),l.value=`${d}${i}`,p()},t=document.createElement("span");t.className="design-field__glyph",t.setAttribute("aria-hidden","true"),t.title=`${n.label} · drag to adjust`,n.glyph.length>1?t.innerHTML=`<svg viewBox="0 0 12 12"><path d="${n.glyph}"/></svg>`:t.textContent=n.glyph,t.addEventListener("pointerdown",n=>{n.preventDefault(),a(),t.setPointerCapture?.(n.pointerId);let i=n.clientX,r=t=>{let n=Math.trunc((t.clientX-i)/2);n&&(i+=2*n,e(n*(t.shiftKey?10:1)))},o=()=>{t.removeEventListener("pointermove",r),s()};t.addEventListener("pointermove",r),t.addEventListener("pointerup",o,{once:!0}),t.addEventListener("pointercancel",o,{once:!0})}),l.addEventListener("keydown",t=>{"ArrowUp"!==t.key&&"ArrowDown"!==t.key||(t.preventDefault(),e(("ArrowUp"===t.key?1:-1)*(t.shiftKey?10:1)))}),o.append(t)}return l instanceof HTMLInputElement&&l.addEventListener("keydown",e=>{"Enter"===e.key&&l.blur()}),o.addEventListener("keydown",t=>{if("Escape"!==t.key||!i.cancel)return;t.preventDefault(),t.stopImmediatePropagation(),i.cancel(l,n.property),l.value=d(n,r);let a=o.querySelector('input[type="color"]');a&&(a.value=e(l.value)),queueMicrotask(()=>{"custom"!==o.dataset.tokenMode&&o.querySelector(".design-token-binding select")?.focus()})}),o.append(l),o}function p(e,t,n,r=[]){let o=document.createElement("section");o.className="design-section";let l=document.createElement("div");if(l.className="design-section__tools",l.append(...r),!n){let e=document.createElement("span");return e.className="design-section__title",e.textContent=t,o.append(e,l),o}let d=document.createElement("details");d.className="design-group",d.open=!e.collapsed.has(t);let p=document.createElement("summary");p.textContent=t;let s=document.createElement("div");s.className="design-grid";for(let t of n){let n=i.find(e=>e.property===t);s.append(a(e.element instanceof SVGElement&&"color"===t?{...n,label:"Color"}:n,e))}return d.append(p,s),d.addEventListener("toggle",()=>{d.isConnected&&(d.open?e.collapsed.delete(t):e.collapsed.add(t))}),o.append(l,d),o}function s(e,t){let{element:n,changed:i}=t;r.then(n=>n?.attach(e,t.element));let d=getComputedStyle(n);if(n instanceof SVGElement)return void e.append(p(t,"Layout",n instanceof SVGSVGElement?["width","height","display"]:["display"]),p(t,"Appearance",["color","fill","stroke","stroke-width"]));let a=e=>e.some(e=>i?.has(e)),s=!!n.textContent?.trim()||/(?:^|;)\s*(?:color|font|line-height|text-align)/.test(n.getAttribute("style")??"")||a(o),c=/flex|grid/.test(d.display)||a(["gap"]),g="transparent"!==l(d.backgroundColor)||a(["background-color"]),u=["top","right","bottom","left"].some(e=>parseFloat(d.getPropertyValue(`border-${e}-width`))>0&&"none"!==d.getPropertyValue(`border-${e}-style`))||a(["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(p(t,"Layout",["width","height","padding",...c?["gap"]:[],"margin",...u?[]:["border-radius"],"display"])),s&&e.append(p(t,"Typography",o,[t.editText])),e.append(g?p(t,"Fill",["background-color"]):p(t,"Fill",null,[f("fill","background-color","#ffffff","background-color")]),u?p(t,"Border",["border-width","border-radius","border-style","border-color"]):p(t,"Border",null,[f("border","border","1px solid","border-width")]))}export{n as designPanelStyles,a as fieldControl,i as fields,s as renderPanel,e as toHex,d as valueFor};
+import{c as e,d as t}from"./chunk-WNJLJD4A.js";import"./chunk-RPY7OOOR.js";var n='.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',i=[{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}],r=import("./select-menu-6V2OGRHY.js").catch(()=>null),o=["font-family","font-size","line-height","font-weight","text-align","color"];function l(t){let n=t.match(/^rgba\(.*,\s*([\d.]+)\)$/)?.[1];return void 0===n?/^rgb\(/.test(t)?e(t):t||"transparent":Number(n)?t:"transparent"}function d(e,t){let n=getComputedStyle(t).getPropertyValue(e.property).trim();if("color"===e.kind)return l(n);if("length"===e.kind||"size"===e.kind){let t=n.match(/^(-?\d+(?:\.\d+)?)px$/);return t?String(Math.round(10*Number(t[1]))/10):"size"===e.kind?n||"auto":"0"}return n}function a(n,i){let{element:r}=i,o=document.createElement("div");o.className=`design-field design-field--${n.kind}`,o.dataset.fieldProperty=n.property,o.toggleAttribute("data-wide",!!n.wide);let l="select"===n.kind?document.createElement("select"):document.createElement("input");if(l instanceof HTMLSelectElement)for(let e of n.values??[]){let t=document.createElement("option");t.value=t.textContent=e,l.append(t)}else l.type="length"===n.kind?"number":"text",l.autocomplete="off",l.spellcheck=!1,l.placeholder=n.placeholder??"","length"===n.kind&&(l.min=String(n.min??0),l.max=String(n.max??1e3),l.setAttribute("inputmode","decimal"));if(l.dataset.property=n.property,l.setAttribute("aria-label",n.label),l.title=n.label,l.value=d(n,r),l instanceof HTMLSelectElement&&!l.value){let e=document.createElement("option");e.value=e.textContent=d(n,r),l.prepend(e),l.value=e.value}let a=()=>i.begin(l,n.property),p=()=>{i.apply(l,n.property,function(e,n){let i=n.value.trim();if("color"===e.kind)return t(e.property,i);if("length"===e.kind){if(!i)return null;let t=Number(i);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(i)?"size"===e.kind&&/^[\d.]+$/.test(i)?`${i}px`:i:null:t(e.property,i)}(n,l)),i.commit(l,n.property,!1)},s=()=>i.commit(l,n.property);if(l.addEventListener("focus",a),l.addEventListener("input",p),l.addEventListener("change",s),l.addEventListener("blur",s),"color"===n.kind){let t=document.createElement("input");t.type="color",t.setAttribute("aria-label",`${n.label} picker`);let i=()=>{t.value=e(l.value)};i(),t.addEventListener("pointerdown",a),t.addEventListener("focus",a),t.addEventListener("input",()=>{l.value=t.value,p()}),t.addEventListener("change",s),l.addEventListener("input",i),o.append(t)}if(n.glyph){let e=e=>{let t=l.value.trim().match(/^(-?\d*\.?\d+)([a-z%]*)$/i),i=t?t[2]:"text"===n.kind?"px":"",o=t?Number(t[1]):parseFloat(getComputedStyle(r).getPropertyValue(n.property))||0,d=Math.round(10*(o+e*("text"!==n.kind||i?1:.1)))/10;"text"!==n.kind&&(d=Math.min(n.max??1e4,Math.max(n.min??0,d))),l.value=`${d}${i}`,p()},t=document.createElement("span");t.className="design-field__glyph",t.setAttribute("aria-hidden","true"),t.title=`${n.label} · drag to adjust`,n.glyph.length>1?t.innerHTML=`<svg viewBox="0 0 12 12"><path d="${n.glyph}"/></svg>`:t.textContent=n.glyph,t.addEventListener("pointerdown",n=>{n.preventDefault(),a(),t.setPointerCapture?.(n.pointerId);let i=n.clientX,r=t=>{let n=Math.trunc((t.clientX-i)/2);n&&(i+=2*n,e(n*(t.shiftKey?10:1)))},o=()=>{t.removeEventListener("pointermove",r),s()};t.addEventListener("pointermove",r),t.addEventListener("pointerup",o,{once:!0}),t.addEventListener("pointercancel",o,{once:!0})}),l.addEventListener("keydown",t=>{"ArrowUp"!==t.key&&"ArrowDown"!==t.key||(t.preventDefault(),e(("ArrowUp"===t.key?1:-1)*(t.shiftKey?10:1)))}),o.append(t)}return l instanceof HTMLInputElement&&l.addEventListener("keydown",e=>{"Enter"===e.key&&l.blur()}),o.addEventListener("keydown",t=>{if("Escape"!==t.key||!i.cancel)return;t.preventDefault(),t.stopImmediatePropagation(),i.cancel(l,n.property),l.value=d(n,r);let a=o.querySelector('input[type="color"]');a&&(a.value=e(l.value)),queueMicrotask(()=>{"custom"!==o.dataset.tokenMode&&o.querySelector(".design-token-binding select")?.focus()})}),o.append(l),o}function p(e,t,n,r=[]){let o=document.createElement("section");o.className="design-section";let l=document.createElement("div");if(l.className="design-section__tools",l.append(...r),!n){let e=document.createElement("span");return e.className="design-section__title",e.textContent=t,o.append(e,l),o}let d=document.createElement("details");d.className="design-group",d.open=!e.collapsed.has(t);let p=document.createElement("summary");p.textContent=t;let s=document.createElement("div");s.className="design-grid";for(let t of n){let n=i.find(e=>e.property===t);s.append(a(e.element instanceof SVGElement&&"color"===t?{...n,label:"Color"}:n,e))}return d.append(p,s),d.addEventListener("toggle",()=>{d.isConnected&&(d.open?e.collapsed.delete(t):e.collapsed.add(t))}),o.append(l,d),o}function s(e,t){let{element:n,changed:i}=t;r.then(n=>n?.attach(e,t.element));let d=getComputedStyle(n);if(n instanceof SVGElement)return void e.append(p(t,"Layout",n instanceof SVGSVGElement?["width","height","display"]:["display"]),p(t,"Appearance",["color","fill","stroke","stroke-width"]));let a=e=>e.some(e=>i?.has(e)),s=!!n.textContent?.trim()||/(?:^|;)\s*(?:color|font|line-height|text-align)/.test(n.getAttribute("style")??"")||a(o),c=/flex|grid/.test(d.display)||a(["gap"]),g="transparent"!==l(d.backgroundColor)||a(["background-color"]),u=["top","right","bottom","left"].some(e=>parseFloat(d.getPropertyValue(`border-${e}-width`))>0&&"none"!==d.getPropertyValue(`border-${e}-style`))||a(["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(p(t,"Layout",["width","height","padding",...c?["gap"]:[],"margin",...u?[]:["border-radius"],"display"])),s&&e.append(p(t,"Typography",o,[t.editText])),e.append(g?p(t,"Fill",["background-color"]):p(t,"Fill",null,[f("fill","background-color","#ffffff","background-color")]),u?p(t,"Border",["border-width","border-radius","border-style","border-color"]):p(t,"Border",null,[f("border","border","1px solid","border-width")]))}export{n as designPanelStyles,a as fieldControl,i as fields,s as renderPanel,e as toHex,d as valueFor};

package/dist/design-preview.d.ts

@@ -30,6 +30,7 @@ export declare function inlineStyleSnapshot(element: DesignTarget, property: str
     value: string;
     priority: string;
     computed: string;
+    absent: boolean;
     restore(): void;
 };
 export declare function removeEmptyStyle(element: DesignTarget): void;

package/dist/design-system.d.ts

@@ -72,6 +72,8 @@ export interface ThemeAxis {
     current(): string;
     /** Switch the page to `optionId`. komo restores the original option when Design mode closes. */
     apply(optionId: string): void;
+    /** Notify when the host changes this axis outside the inspector, including state held outside the DOM. */
+    subscribe?(listener: () => void): () => void;
 }
 export type ComponentPropValue = string | number | boolean | null;
 /** The declared, safe subset of a component's runtime props. */

package/dist/index.js

@@ -1 +1 @@
-import{b as o,c as s}from"./chunk-FACQL6LQ.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-MLH3Z6TW.js";import"./chunk-WGISPOJV.js";import"./chunk-PLSWBSSX.js";export{s as initComments,o as initKomo};
+import{b as o,c as s}from"./chunk-HHOQUW5B.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-3276ZULN.js";import"./chunk-WGISPOJV.js";import"./chunk-PLSWBSSX.js";export{s as initComments,o as initKomo};

package/dist/{inline-text-editor-LN5QPR3P.js → inline-text-editor-ADEGBENA.js}

@@ -1 +1 @@
-import{a as e,b as t,c as n,d as a,f as r}from"./chunk-ZJWJEB5S.js";import{e as i}from"./chunk-4JLPHVWU.js";import"./chunk-RPY7OOOR.js";function o(e,t,a){a?n(a,e):e.firstChild instanceof Text&&!e.childElementCount&&(e.firstChild.data=t)}function l(e){let t=r(),n=null,a=!1;function i(a=!1){let r=n;r&&(n=null,r.finish(a),t.resume(r.element),e.onChange())}return{get element(){return n?.element??null},get busy(){return a},isEditing:e=>!!n&&n.element===e,toggle:async function(r){let o=e.selected();if(n&&n.element===o)return void i();if(!o||!e.active()||a||n)return;let l=c(o);if(l)e.status.textContent=l;else{a=!0,t.pause(o),e.status.textContent="Loading inline text editor…",e.onChange();try{let a=await f(o,{accent:getComputedStyle(e.button).getPropertyValue("--accent").trim()||"#bda6ef",loadReactBridge:async()=>await import("./react-props-panel-YVEKJH4C.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(o),e.status.textContent="Text preview · resets on exit")}});a?e.active()&&e.selected()===o?(n=a,r&&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 i=document.getSelection();i?.removeAllRanges(),i?.addRange(r)}(o,r.clientX,r.clientY),e.status.textContent=o.hasAttribute("data-komo-text-prop")?"React state preview · resets on exit":"Editing text · preview only"):a.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{a=!1,n||t.resume(o),e.onChange()}}},finish:i,handleKey(e){if(!n||!e.composedPath().includes(n.element)||!n.handleKey(e))return!1;let t=n.element;return i("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 s(e){let t=l(e);return e.button.addEventListener("click",e=>{t.toggle(e)}),t}function c(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 d(e){return!c(e)}function u(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 p(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 f(n,r){if(!d(n))return null;let l=null,s=null;if(n.dataset.komoTextProp&&(l=await r.loadReactBridge(),s=l.beginReactTextEdit(n),!s))return null;let c=s?.before??(n.textContent??"").slice(0,500),f=!s&&n.childElementCount>0,m=s?void 0:t(n),g=m?.map(([e,t])=>[e,t]),h=()=>{for(let e of g??[])e[1]=e[0].data},x=g?a(n,g):()=>{},b=["outline","outline-offset","box-shadow","white-space"].map(e=>i(n,e)),C=n.getAttribute("role"),v=n.getAttribute("aria-label"),y=n.getAttribute("aria-multiline"),T=n.getAttribute("spellcheck"),E=new AbortController,R=!1;let A=-1,w=new MutationObserver(()=>{A>=0&&p(n,A)}),k=()=>{h(),!f&&((n.textContent??"").length>500&&o(n,(n.textContent??"").slice(0,500)),s&&l&&(A=u(n),l.previewReactTextEdit(n,s.propName,n.textContent??"")||o(n,c)))},P=(t,a)=>{let r=t.startContainer;if(r!==t.endContainer||!(r instanceof Text)||!n.contains(r)||r.parentElement?.closest(e))return;let i=t.endOffset-t.startOffset,o=a.replace(/[\r\n]+/g," ").slice(0,Math.max(0,500-(n.textContent??"").length+i));r.replaceData(t.startOffset,i,o),h();let l=document.createRange();l.setStart(r,t.startOffset+o.length);let s=document.getSelection();s?.removeAllRanges(),s?.addRange(l)};n.addEventListener("beforeinput",e=>{if(A=-1,s||"insertCompositionText"===e.inputType)return;e.preventDefault();let t=e.getTargetRanges()[0],n=e.inputType;t&&(n.startsWith("delete")||"insertText"===n||"insertReplacementText"===n)&&P(t,n.startsWith("delete")?"":e.data??e.dataTransfer?.getData("text/plain")??"")},{signal:E.signal}),n.addEventListener("input",k,{signal:E.signal}),s&&w.observe(n,{childList:!0,characterData:!0,subtree:!0}),n.addEventListener("paste",e=>{e.preventDefault();let t=e.clipboardData?.getData("text/plain")??"",a=document.getSelection();f?a?.rangeCount&&P(a.getRangeAt(0),t):(function(e,t){let n=u(e);if(n<0)return;let a=e.textContent??"",r=t.slice(0,Math.max(0,500-a.length));o(e,a.slice(0,n)+r+a.slice(n)),p(e,n+r.length)}(n,t.replace(/[\r\n]+/g," ").slice(0,500)),k())},{signal:E.signal}),n.addEventListener("drop",e=>e.preventDefault(),{signal:E.signal}),n.setAttribute("contenteditable","true"),n.setAttribute("role","textbox"),n.setAttribute("aria-label","Inline text preview"),n.setAttribute("aria-multiline","false"),n.dataset.komoInlineEditing="true",n.spellcheck=!1,n.style.setProperty("outline",`2px solid ${r.accent??"#bda6ef"}`,"important"),n.style.setProperty("outline-offset","2px","important"),n.style.setProperty("box-shadow","none","important"),n.style.setProperty("white-space","pre-wrap","important"),n.focus({preventScroll:!0});let S=document.getSelection(),D=document.createRange(),O=t(n).reverse().find(([t])=>!t.parentElement?.closest(e))?.[0];return O?D.setStart(O,O.length):D.selectNodeContents(n),D.collapse(!0),S?.removeAllRanges(),S?.addRange(D),{element:n,finish(e=!1){if(R)return;R=!0,E.abort(),w.disconnect(),x();for(let e of b.reverse())e.restore();let t=(n.textContent??"").slice(0,500);(function(){n.removeAttribute("contenteditable"),n.removeAttribute("data-komo-inline-editing");for(let[e,t]of[["role",C],["aria-label",v],["aria-multiline",y],["spellcheck",T]])null===t?n.removeAttribute(e):n.setAttribute(e,t)})(),e?(s&&l&&l.cancelReactTextEdit(n,s.propName,c),o(n,c,m)):s&&l&&l.finishReactTextEdit(n,s.propName,c,t),r.onFinish({element:n,before:c,after:t,nodes:m,...s?{reactProp:s.propName}:{}},e)},handleKey:e=>!e.isComposing&&(("Enter"===e.key||"Escape"===e.key)&&(e.preventDefault(),e.stopImmediatePropagation(),!0))}}export{s as bindInlineTextTools,d as canEditText,l as createInlineTextTools,r as createTextPreviewHistory,f as startInlineTextEditor,c as textEditBlocker};
+import{a as e,b as t,c as n,d as a,f as r}from"./chunk-ZJWJEB5S.js";import{e as i}from"./chunk-WNJLJD4A.js";import"./chunk-RPY7OOOR.js";function o(e,t,a){a?n(a,e):e.firstChild instanceof Text&&!e.childElementCount&&(e.firstChild.data=t)}function l(e){let t=r(),n=null,a=!1;function i(a=!1){let r=n;r&&(n=null,r.finish(a),t.resume(r.element),e.onChange())}return{get element(){return n?.element??null},get busy(){return a},isEditing:e=>!!n&&n.element===e,toggle:async function(r){let o=e.selected();if(n&&n.element===o)return void i();if(!o||!e.active()||a||n)return;let l=c(o);if(l)e.status.textContent=l;else{a=!0,t.pause(o),e.status.textContent="Loading inline text editor…",e.onChange();try{let a=await f(o,{accent:getComputedStyle(e.button).getPropertyValue("--accent").trim()||"#bda6ef",loadReactBridge:async()=>await import("./react-props-panel-5VXPVY3H.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(o),e.status.textContent="Text preview · resets on exit")}});a?e.active()&&e.selected()===o?(n=a,r&&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 i=document.getSelection();i?.removeAllRanges(),i?.addRange(r)}(o,r.clientX,r.clientY),e.status.textContent=o.hasAttribute("data-komo-text-prop")?"React state preview · resets on exit":"Editing text · preview only"):a.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{a=!1,n||t.resume(o),e.onChange()}}},finish:i,handleKey(e){if(!n||!e.composedPath().includes(n.element)||!n.handleKey(e))return!1;let t=n.element;return i("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 s(e){let t=l(e);return e.button.addEventListener("click",e=>{t.toggle(e)}),t}function c(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 d(e){return!c(e)}function u(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 p(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 f(n,r){if(!d(n))return null;let l=null,s=null;if(n.dataset.komoTextProp&&(l=await r.loadReactBridge(),s=l.beginReactTextEdit(n),!s))return null;let c=s?.before??(n.textContent??"").slice(0,500),f=!s&&n.childElementCount>0,m=s?void 0:t(n),g=m?.map(([e,t])=>[e,t]),h=()=>{for(let e of g??[])e[1]=e[0].data},x=g?a(n,g):()=>{},b=["outline","outline-offset","box-shadow","white-space"].map(e=>i(n,e)),C=n.getAttribute("role"),v=n.getAttribute("aria-label"),y=n.getAttribute("aria-multiline"),T=n.getAttribute("spellcheck"),R=new AbortController,E=!1;let A=-1,w=new MutationObserver(()=>{A>=0&&p(n,A)}),k=()=>{h(),!f&&((n.textContent??"").length>500&&o(n,(n.textContent??"").slice(0,500)),s&&l&&(A=u(n),l.previewReactTextEdit(n,s.propName,n.textContent??"")||o(n,c)))},P=(t,a)=>{let r=t.startContainer;if(r!==t.endContainer||!(r instanceof Text)||!n.contains(r)||r.parentElement?.closest(e))return;let i=t.endOffset-t.startOffset,o=a.replace(/[\r\n]+/g," ").slice(0,Math.max(0,500-(n.textContent??"").length+i));r.replaceData(t.startOffset,i,o),h();let l=document.createRange();l.setStart(r,t.startOffset+o.length);let s=document.getSelection();s?.removeAllRanges(),s?.addRange(l)};n.addEventListener("beforeinput",e=>{if(A=-1,s||"insertCompositionText"===e.inputType)return;e.preventDefault();let t=e.getTargetRanges()[0],n=e.inputType;t&&(n.startsWith("delete")||"insertText"===n||"insertReplacementText"===n)&&P(t,n.startsWith("delete")?"":e.data??e.dataTransfer?.getData("text/plain")??"")},{signal:R.signal}),n.addEventListener("input",k,{signal:R.signal}),s&&w.observe(n,{childList:!0,characterData:!0,subtree:!0}),n.addEventListener("paste",e=>{e.preventDefault();let t=e.clipboardData?.getData("text/plain")??"",a=document.getSelection();f?a?.rangeCount&&P(a.getRangeAt(0),t):(function(e,t){let n=u(e);if(n<0)return;let a=e.textContent??"",r=t.slice(0,Math.max(0,500-a.length));o(e,a.slice(0,n)+r+a.slice(n)),p(e,n+r.length)}(n,t.replace(/[\r\n]+/g," ").slice(0,500)),k())},{signal:R.signal}),n.addEventListener("drop",e=>e.preventDefault(),{signal:R.signal}),n.setAttribute("contenteditable","true"),n.setAttribute("role","textbox"),n.setAttribute("aria-label","Inline text preview"),n.setAttribute("aria-multiline","false"),n.dataset.komoInlineEditing="true",n.spellcheck=!1,n.style.setProperty("outline",`2px solid ${r.accent??"#bda6ef"}`,"important"),n.style.setProperty("outline-offset","2px","important"),n.style.setProperty("box-shadow","none","important"),n.style.setProperty("white-space","pre-wrap","important"),n.focus({preventScroll:!0});let S=document.getSelection(),D=document.createRange(),N=t(n).reverse().find(([t])=>!t.parentElement?.closest(e))?.[0];return N?D.setStart(N,N.length):D.selectNodeContents(n),D.collapse(!0),S?.removeAllRanges(),S?.addRange(D),{element:n,finish(e=!1){if(E)return;E=!0,R.abort(),w.disconnect(),x();for(let e of b.reverse())e.restore();let t=(n.textContent??"").slice(0,500);(function(){n.removeAttribute("contenteditable"),n.removeAttribute("data-komo-inline-editing");for(let[e,t]of[["role",C],["aria-label",v],["aria-multiline",y],["spellcheck",T]])null===t?n.removeAttribute(e):n.setAttribute(e,t)})(),e?(s&&l&&l.cancelReactTextEdit(n,s.propName,c),o(n,c,m)):s&&l&&l.finishReactTextEdit(n,s.propName,c,t),r.onFinish({element:n,before:c,after:t,nodes:m,...s?{reactProp:s.propName}:{}},e)},handleKey:e=>!e.isComposing&&(("Enter"===e.key||"Escape"===e.key)&&(e.preventDefault(),e.stopImmediatePropagation(),!0))}}export{s as bindInlineTextTools,d as canEditText,l as createInlineTextTools,r as createTextPreviewHistory,f as startInlineTextEditor,c as textEditBlocker};