@hazem3500/komo 0.9.26 → 0.9.28

package/dist/chunk-HHG6KWKR.js

@@ -0,0 +1 @@
+import{a as t}from"./chunk-RPY7OOOR.js";function e(t){t.style.length||(t.getAttribute("style"),t.removeAttribute("style"))}function r(r,o,i){if(!t(r))return()=>{};let s=r.style.getPropertyValue(o),y=r.style.getPropertyPriority(o),n=!r.hasAttribute("style");return r.style.setProperty(o,i,y),()=>{s?r.style.setProperty(o,s,y):r.style.removeProperty(o),n&&e(r)}}var o=new WeakMap;function i(t,r,i,s=!1,y=!1){let n=o.get(t);n&&(clearTimeout(n.timer),n.restore());let l=t.style.getPropertyValue("transition"),a=t.style.getPropertyPriority("transition"),p=s?[...r].map(t=>`${t} .3s cubic-bezier(.22,1,.36,1)`).join():"none";t.style.setProperty("transition",p,"important");let u=t.style.getPropertyValue("transition"),P=()=>{o.delete(t),t.style.getPropertyValue("transition")===u&&"important"===t.style.getPropertyPriority("transition")&&(l?t.style.setProperty("transition",l,a):t.style.removeProperty("transition"),y&&e(t))};i(),s?o.set(t,{restore:P,timer:window.setTimeout(P,320)}):(getComputedStyle(t).color,P())}export{e as a,r as b,i as c};

package/dist/chunk-HTMUFH7I.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk-RPY7OOOR.js";var t=new WeakMap,r=new WeakMap,n=new WeakMap;function o(e,t){let r=n.get(e.element);if(r?.editor===t)return r.component;let o={id:e.name,name:e.name,source:e.source??"",line:0,props:t.schema},i={definition:o,preview:"adapter",releaseProps:e=>t.release?.(e),subscribe:t.subscribe?.bind(t),get props(){return l(o,t.read())},onChange:e=>t.apply(e),setProps(e){if(!1===t.available?.())return;let r=l(o,e);if(Object.keys(r).length!==Object.keys(e).length||o.props.some(e=>"unsupported"!==e.kind&&e.required&&!(e.name in r)))throw new Error("Component props no longer match the editor schema.");t.apply(r)}};return n.set(e.element,{editor:t,component:i}),i}function i(e,t){return void 0===t?!e.required:!(!function(e){return void 0===e||"string"==typeof e||"number"==typeof e&&Number.isFinite(e)||"boolean"==typeof e}(t)||"unsupported"===e.kind)&&("string"===e.kind?"string"==typeof t&&t.length<=500:"number"===e.kind?"number"==typeof t&&Number.isFinite(t):"boolean"===e.kind?"boolean"==typeof t:"enum"===e.kind&&(e.values??[]).includes(t))}function l(e,t){let r={};for(let n of e.props){if("unsupported"===n.kind)continue;let e=t[n.name];i(n,e)&&(r[n.name]=e)}return r}function s(e,n,o,i){let s=n.textProp&&n.props.some(e=>e.name===n.textProp&&"string"===e.kind)?n.textProp:void 0,a=l(n,o),p=new Set,u={definition:n,props:a,onChange:i,subscribe:e=>(p.add(e),()=>{p.delete(e)}),setProps(e){let t=l(n,e);if(Object.keys(t).length===Object.keys(e).length){for(let e of n.props)if("unsupported"!==e.kind&&e.required&&!(e.name in t))return;u.props=t,u.onChange(t)}}};return t.set(e,u),e.dataset.komoInspectable=n.id,s?e.dataset.komoTextProp=s:delete e.dataset.komoTextProp,r.set(u,p),()=>{t.get(e)===u&&(t.delete(e),p.clear(),e.dataset.komoInspectable===n.id&&delete e.dataset.komoInspectable,e.dataset.komoTextProp===s&&delete e.dataset.komoTextProp)}}function a(e,n,o,i){if(!e)return;let s=t.get(e);if(!s||s.definition.id!==n.id)return;s.definition=n,s.props=l(n,o),s.onChange=i;let a=n.textProp&&n.props.some(e=>e.name===n.textProp&&"string"===e.kind)?n.textProp:void 0;a?e.dataset.komoTextProp=a:delete e.dataset.komoTextProp,r.get(s)?.forEach(e=>e())}function p(e){let r=e&&t.get(e);if(r&&e.getAttribute("data-komo-inspectable")===r.definition.id)return r;let o=e&&n.get(e);return o&&!1!==o.editor.available?.()?o.component:null}function u(e){for(let t=e?.parentElement;t;t=t.parentElement){let e=p(t);if(e)return{root:t,component:e}}return null}var f=new Set,d=new WeakMap,m=new WeakMap,c=new WeakMap,h={color:new Set(["color","background-color","border-color"]),dimension:new Set(["gap","padding","margin","border-radius","font-size","width","height"]),fontFamily:new Set(["font-family"]),fontWeight:new Set(["font-weight"]),lineHeight:new Set(["line-height"])};function g(e,t){if(t.length>100||t.some(e=>!function(e){return!!e&&"string"==typeof e.path&&e.path.length<=160&&/^--[a-zA-Z0-9_-]+$/.test(e.cssVariable)&&!!h[e.type]&&Array.isArray(e.properties)&&e.properties.length>0&&e.properties.every(t=>h[e.type].has(t))&&"string"==typeof e.impactSelector&&e.impactSelector.length<=200}(e)))throw new Error("Komo design tokens must use supported, explicit CSS-variable metadata");let r=new Set(t.map(e=>e.path)),n=new Set(t.map(e=>e.cssVariable));if(r.size!==t.length||n.size!==t.length)throw new Error("Komo design token paths and CSS variables must be unique");for(let r of t)e.querySelectorAll(r.impactSelector);let o={root:e,tokens:t.map(e=>({...e,properties:[...e.properties]})),themeEdits:new Map,elementOriginals:new Map,elementBindings:new Map,previousMarker:e.getAttribute("data-komo-design-tokens")};return d.set(e,o),f.add(o),c.set(o,[]),e.setAttribute("data-komo-design-tokens",String(t.length)),()=>{if(d.get(e)===o){for(let[t,r]of o.themeEdits){let n=o.tokens.find(e=>e.path===t);n&&(r.inlineBefore?e.style.setProperty(n.cssVariable,r.inlineBefore):e.style.removeProperty(n.cssVariable))}for(let[e,t]of o.elementOriginals)for(let[r,n]of t)n.value?e.style.setProperty(r,n.value,n.priority):e.style.removeProperty(r);o.elementBindings.clear(),f.delete(o),d.delete(e),null===o.previousMarker?e.removeAttribute("data-komo-design-tokens"):e.setAttribute("data-komo-design-tokens",o.previousMarker)}}}function y(e){if(!e)return null;let t=null;for(let r of f)(r.root===e||r.root.contains(e))&&(!t||t.root.contains(r.root))&&(t=r);return t}function k(e,t){return e.root.ownerDocument.defaultView?.getComputedStyle(e.root).getPropertyValue(t.cssVariable).trim()??""}function b(e,t){try{return e.root.querySelectorAll(t.impactSelector).length}catch{return 0}}function P(e,t,r,n=!1){if(!e.tokens.some(e=>e===t||e.path===t.path)||!function(e,t,r){if(!r||r.length>160||/[{};]/.test(r)||/(?:url|expression)\s*\(/i.test(r))return!1;let n=e.root.ownerDocument.defaultView?.CSS;return!n?.supports||t.properties.some(e=>n.supports(e,r))}(e,t,r))return!1;let o=k(e,t),i=e.themeEdits.get(t.path),l=e.root.style.getPropertyValue(t.cssVariable),s=i?.inlineBefore??l,a=c.get(e)??[];if(o===r)return!0;e.root.style.setProperty(t.cssVariable,r),r===(i?.before??o)?e.themeEdits.delete(t.path):e.themeEdits.set(t.path,{before:i?.before??o,after:r,inlineBefore:s});let p=a.at(-1);return n&&"theme"===p?.kind&&p.token.path===t.path?r===p.before?a.pop():p.after=r:a.push({kind:"theme",source:e,token:t,before:o,after:r,inlineBefore:l}),c.set(e,a),!0}function v(e){for(let t of f)for(let[r,n]of t.themeEdits){let o=t.tokens.find(e=>e.path===r)?.cssVariable;if(!o)continue;let i=e?n.inlineBefore:n.after;i?t.root.style.setProperty(o,i):t.root.style.removeProperty(o)}}function w(e,t){let r=e.themeEdits.get(t.path),n=c.get(e)??[],o=n.find(e=>"theme"===e.kind&&e.token.path===t.path),i=r?.inlineBefore??("theme"===o?.kind?o.inlineBefore:void 0);void 0!==i&&(i?e.root.style.setProperty(t.cssVariable,i):e.root.style.removeProperty(t.cssVariable),e.themeEdits.delete(t.path),c.set(e,n.filter(e=>"theme"!==e.kind||e.token.path!==t.path)))}function V(e,t,r,n,o={}){if(!e.tokens.some(e=>e.path===r.path)||!r.properties.includes(n))return!1;let i=e.elementOriginals.get(t);i||e.elementOriginals.set(t,i=new Map),i.has(n)||i.set(n,{value:t.style.getPropertyValue(n),priority:t.style.getPropertyPriority(n)});let l=t.style.getPropertyValue(n),s=t.style.getPropertyPriority(n),a=`var(${r.cssVariable})`,p=e.elementBindings.get(t);p||e.elementBindings.set(t,p=new Map);let u=p.get(n);if(p.set(n,{tokenPath:r.path,initialValue:u?.initialValue??l,initialPriority:u?.initialPriority??s,mode:"token",declaredPath:u?u.declaredPath:A(e,t,n)?.token.path}),t.style.setProperty(n,a,s),!1===o.recordHistory)return!0;let f={kind:"element",element:t,property:n,before:l,priority:s,after:a},d=c.get(e)??[];d.push(f),c.set(e,d);let h=m.get(t)??[];return h.push(f),m.set(t,h),!0}function B(e,t,r,n){let o=e.elementBindings.get(t),i=o?.get(r);if(!i){let n=A(e,t,r);if(!n)return;o||e.elementBindings.set(t,o=new Map),i={tokenPath:n.token.path,initialValue:t.style.getPropertyValue(r),initialPriority:t.style.getPropertyPriority(r),mode:"custom",declaredPath:n.token.path},o.set(r,i)}i.mode="custom",i.customValue=n}function S(e,t,r){let n=e.elementBindings.get(t)?.get(r);if(!n)return;let o=t.style.getPropertyValue(r);o!==n.initialValue||t.style.getPropertyPriority(r)!==n.initialPriority?e.tokens.find(e=>e.path===n.tokenPath&&e.properties.includes(r)&&o===`var(${e.cssVariable})`)?(n.mode="token",delete n.customValue):(n.mode="custom",n.customValue=o):e.elementBindings.get(t)?.delete(r)}function $(e,t,r){let n=e.elementBindings.get(t)?.get(r);return n?{...n}:null}var E={"background-color":["background"],"border-color":["border"],"font-family":["font"],"font-size":["font"],"font-weight":["font"],"line-height":["font"]};function x(e,t,r,n){let o=[...r.matchAll(/var\(\s*(--[\w-]+)/g)].map(e=>e[1]);if(!o.length||n&&!/^var\(\s*--[\w-]+\s*(?:,[^;{}]*)?\)$/.test(r.trim()))return;let i=e.tokens.filter(e=>e.properties.includes(t)&&o.includes(e.cssVariable));return 1===i.length?i[0]:void 0}function M(e){let t=e.replace(/:(?:where)\([^)]*\)/g,"").replace(/"[^"]*"|'[^']*'/g,"");return 1e4*(t.match(/#[\w-]+/g)?.length??0)+100*(t.match(/\.[\w-]+|\[[^\]]*\]|:(?!:)[\w-]+/g)?.length??0)+(t.match(/(?:^|[\s>+~(])[a-z][\w-]*/gi)?.length??0)}function O(e){let t=[],r=0,n=0;for(let o=0;o<e.length;o++){let i=e[o];"("===i||"["===i?r++:")"===i||"]"===i?r--:","===i&&0===r&&(t.push(e.slice(n,o)),n=o+1)}return t.push(e.slice(n)),t.map(e=>e.trim()).filter(Boolean)}function A(e,t,r,n=t.style.getPropertyValue(r),o=t.style.getPropertyPriority(r)){let i=t.ownerDocument.defaultView,l=null,s=0,a=e=>{for(let n of e){s++;let e=n.media;if(e&&i?.matchMedia&&e.mediaText&&!i.matchMedia(e.mediaText).matches)continue;let o=n.style,p=n.selectorText;if(o&&p)for(let e of[r,...E[r]??[]]){let r=o.getPropertyValue(e).trim();if(!r)continue;let n=-1;for(let e of O(p))try{t.matches(e)&&(n=Math.max(n,M(e)))}catch{}if(!(n<0)){n+=o.getPropertyPriority(e)?1e9:0,(!l||n>l.rank||n===l.rank&&s>=l.order)&&(l={value:r,property:e,rank:n,order:s});break}}let u=n.cssRules;u&&!o&&a(u)}};for(let e of t.ownerDocument.styleSheets)try{e.disabled||a(e.cssRules)}catch{}let p=l;if(n&&(!(p&&p.rank>=1e9)||o)){let t=x(e,r,n,!0);return t?{token:t,origin:"inline"}:null}if(!p)return null;let u=x(e,r,p.value,p.property===r);return u?{token:u,origin:"stylesheet"}:null}function T(e,t,r){let n=e.elementBindings.get(t)?.get(r),o=e.elementOriginals.get(t)?.get(r),i=n?.initialValue??o?.value??"",l=n?.initialPriority??o?.priority??"";i?t.style.setProperty(r,i,l):t.style.removeProperty(r),e.elementBindings.get(t)?.delete(r)}function C(e,t){return e.tokens.filter(e=>e.properties.includes(t))}function z(e){let t=y(e);return!!t&&(t.themeEdits.size>0||!!m.get(e)?.length||!!t.elementBindings.get(e)?.size)}function j(e){let t=y(e);return!!t&&!!c.get(t)?.length}function q(e){let t=y(e),r=t&&c.get(t)?.pop();if(!t||!r)return;if("theme"===r.kind){r.inlineBefore?t.root.style.setProperty(r.token.cssVariable,r.inlineBefore):t.root.style.removeProperty(r.token.cssVariable);let e=t.themeEdits.get(r.token.path);if(e&&e.after===r.after)e.before===r.before?t.themeEdits.delete(r.token.path):t.themeEdits.set(r.token.path,{...e,after:r.before});else if(!e){let e=c.get(t).find(e=>"theme"===e.kind&&e.token.path===r.token.path);t.themeEdits.set(r.token.path,{before:r.after,after:r.before,inlineBefore:("theme"===e?.kind?e:r).inlineBefore})}return}r.before?r.element.style.setProperty(r.property,r.before,r.priority):r.element.style.removeProperty(r.property);let n=m.get(r.element)??[];n.pop(),n.length||m.delete(r.element)}function W(e){let t=y(e);if(!t)return;for(let[e,r]of t.themeEdits){let n=t.tokens.find(t=>t.path===e);n&&(r.inlineBefore?t.root.style.setProperty(n.cssVariable,r.inlineBefore):t.root.style.removeProperty(n.cssVariable))}t.themeEdits.clear();let r=t.elementOriginals.get(e);for(let[t,n]of r??[])n.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t);t.elementOriginals.delete(e),t.elementBindings.delete(e),m.delete(e),c.set(t,(c.get(t)??[]).filter(t=>"element"===t.kind&&t.element!==e))}function D(){for(let e of f){for(let t of[e.root,...e.elementOriginals.keys(),...e.elementBindings.keys()])W(t);c.set(e,[])}}function R(e){let t=y(e);if(!t)return;let r=[];for(let[n,o]of t.elementBindings.get(e)??[]){let e=t.tokens.find(e=>e.path===o.tokenPath&&e.properties.includes(n));if(!e)continue;let i=t.tokens.find(e=>e.path===o.declaredPath),l=i?`var(${i.cssVariable}) [${i.path}]`:o.initialValue||"(unset)";"token"===o.mode?i!==e&&r.push(`Element ${n}: ${l} → var(${e.cssVariable}) [${e.path}]${i?" [rebind]":""}`):r.push(`Element ${n}: ${l} → ${o.customValue||"(unset)"} [${i?"custom override":"custom value"}]`)}for(let n of m.get(e)??[]){if("element"!==n.kind||t.elementBindings.get(e)?.has(n.property))continue;let o=t.tokens.find(e=>n.after===`var(${e.cssVariable})`);o&&r.push(`Element ${n.property}: ${n.before||"(unset)"} → var(${o.cssVariable}) [${o.path}]`)}for(let[e,n]of t.themeEdits){let o=t.tokens.find(t=>t.path===e);o&&r.push(`Shared theme ${e} (${o.cssVariable}): ${n.before} → ${n.after}; preview scope ${o.impactSelector} (${b(t,o)} matching elements)`)}return r.length?["Proposed design-token changes (preview only)",...r,"Token references are preserved for element assignments; refresh resets previews."].join("\n"):void 0}function F(){return{id:"css-variables",list:()=>[...f].flatMap(e=>e.tokens.map(t=>function(e,t){return{path:t.path,type:t.type,value:k(e,t),properties:[...t.properties],group:t.path.split(".")[0],ref:t.cssVariable}}(e,t))),resolve(t){let r=y(t),n={};if(!r||!e(t))return n;let o=t.ownerDocument.defaultView?.getComputedStyle(t);for(let e of new Set(r.tokens.flatMap(e=>e.properties))){let i=A(r,t,e);n[e]=i?{path:i.token.path}:{offToken:o?.getPropertyValue(e).trim()??""}}return n},preview(t,r,n){let o=y(t),i=o?.tokens.find(e=>e.path===n.path);if(!o||!i||!e(t))return()=>{};let l=t.style.getPropertyValue(r),s=t.style.getPropertyPriority(r);return V(o,t,i,r,{recordHistory:!1}),()=>{l?t.style.setProperty(r,l,s):t.style.removeProperty(r),S(o,t,r)}},describe:(e,t,r,n)=>`Set ${t} to var(${n.ref})`}}export{o as a,i as b,s as c,a as d,p as e,u as f,g,y as h,k as i,b as j,P as k,v as l,w as m,V as n,B as o,S as p,$ as q,A as r,T as s,C as t,z as u,j as v,q as w,W as x,D as y,R as z,F as A};

package/dist/design-comment-W2OVUWBL.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk-HHG6KWKR.js";import{a as t}from"./chunk-RPY7OOOR.js";var n=/^Proposed (.+?) changes? \(preview only\)$/,r={style:"Style changes","inline text":"Text change","design-token":"Token changes","React prop":"Prop changes"};function a(e){return e.split("\n").some(e=>n.test(e))}function o(e){try{return e.startsWith('"')?JSON.parse(e):e}catch{return e}}function i(e,t){let n=/^Shared theme (\S+) \((--[\w-]+)\): (.*?) → (.*?)(?:; preview scope .*)?$/.exec(e);if(n)return{label:n[1],token:n[1],before:n[3],after:n[4],apply:{kind:"variable",property:n[2]}};if(n=/^Element ([\w-]+): (.*?) → (.*?)(?: \[([^\]]+)\])*$/.exec(e),n){let t=/\[([\w.-]+)\]/.exec(e.slice(e.indexOf("→")))?.[1];return{label:n[1],before:n[2],after:n[3],...t&&!t.includes(" ")?{token:t}:{},apply:{kind:"style",property:n[1]}}}if(n=/^- (.+?): (.*) → (.*?)(?: \[([^\]]+)\])?$/.exec(e),!n)return null;let[,r,a,i,s]=n;return"inline text"===t?{label:"Text",before:o(a),after:o(i),apply:{kind:"text",property:"text"}}:"React prop"===t?{label:r,before:o(a),after:o(i),...s&&"custom value"!==s?{token:s}:{}}:{label:r,before:a,after:i,apply:{kind:"style",property:r}}}function s(e){let t=[];for(let a of e.split(/\n{2,}/)){let e=a.split("\n"),o=n.exec(e[0]??"");if(!o){a.trim()&&t.push({text:a.trim()});continue}let s=o[1],l={title:r[s]??`${s[0].toUpperCase()}${s.slice(1)} changes`,changes:[]};for(let t of e.slice(1))if(t.startsWith("Target: "))l.target=t.slice(8);else if(t.startsWith("Component: ")){let[,e,n]=/^(.*?)(?: \((.+)\))?$/.exec(t.slice(11));l.component=e,n&&(l.source=n)}else if(t.startsWith("Source: "))l.source=t.slice(8);else{let e=t.includes("→")?i(t,s):null;e&&e.before!==e.after&&l.changes.push(e)}l.changes.length?t.push(l):t.push({text:a.trim()})}return t}function l(e){let t=s(e),n=t.filter(e=>"changes"in e),r=t.find(e=>"text"in e)?.text,a=n.reduce((e,t)=>e+t.changes.length,0),o=n.find(e=>e.target)?.target,i=`Design change · ${a} ${1===a?"edit":"edits"}${o?` on ${p(o)}`:""}`;return r?`${r}\n${i}`:i}function p(e){return(e.split(">").at(-1)??e).trim().replace(/:nth-of-type\(\d+\)/g,"")||e}var d=/^(#[0-9a-f]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\)|oklch\([^)]*\))$/i,c=new Map,f=new Set,g=new Map;function m(e){let t=g.get(e);t&&(clearTimeout(t.timer),g.delete(e),t.finish())}function u(n,r,a,o=!1){m(n);let i=[],s=[],l=[];for(let n of r){let r=a(n.target);for(let a of n.changes)if(a.apply&&"(unset)"!==a.after)if("variable"===a.apply.kind){let e=document.documentElement,t=e.style.getPropertyValue(a.apply.property);e.style.setProperty(a.apply.property,a.after),i.push(()=>t?e.style.setProperty(a.apply.property,t):e.style.removeProperty(a.apply.property))}else if(t(r)&&"style"===a.apply.kind){let t=r.style.getPropertyValue(a.apply.property),n=r.style.getPropertyPriority(a.apply.property),i=!r.hasAttribute("style"),p=a.apply.property,d=()=>"(unset)"!==a.before&&(r.style.setProperty(p,a.before,"important"),!0);o&&d()&&getComputedStyle(r).getPropertyValue(p),r.style.setProperty(p,a.after,"important"),l.push(d),s.push(()=>{t?r.style.setProperty(a.apply.property,t,n):r.style.removeProperty(a.apply.property),i&&e(r)})}else if(r instanceof HTMLElement&&"text"===a.apply.kind&&!r.childElementCount){let e=r.firstChild;if(e instanceof Text){let t=e.data;e.data=a.after,i.push(()=>{e.data=t})}}}return c.set(n,{restore:i,restoreStyles:s,pinBefore:l}),i.length+s.length>0}var h,y=["color","background-color","border-color","outline-color","fill","stroke","box-shadow","text-decoration-color"],x="cubic-bezier(.22, 1, .36, 1)";function b(e,t){let n=new Set;for(let r of e)for(let e of r.changes)if("style"===e.apply?.kind)n.add(e.apply.property);else if("variable"===e.apply?.kind)y.forEach(e=>n.add(e));else if("text"===e.apply?.kind){let e=t(r.target);e instanceof HTMLElement&&e.animate?.([{opacity:1},{opacity:.25,offset:.4},{opacity:1}],{duration:360,easing:x})}if(!n.size)return;h&&(clearTimeout(h.timer),h.style.remove());let r=document.createElement("style");r.textContent=`*, *::before, *::after { transition-property: ${[...n].join(", ")} !important; transition-duration: 420ms !important; transition-timing-function: ${x} !important; transition-delay: 0s !important; }`,document.head.append(r),h={style:r,timer:setTimeout(()=>{r.remove(),h=void 0},480)}}function w(e,t=!1){m(e);let n=c.get(e);if(!n)return;c.delete(e);for(let e of n.restore.reverse())e();let r=()=>{for(let e of n.restoreStyles.reverse())e()};if(!t||!n.pinBefore.length)return r();for(let e of n.pinBefore)e();g.set(e,{finish:r,timer:setTimeout(()=>m(e),480)})}function v(e){return c.has(e)||g.has(e)}function k(e=new Set){e.has("draft")||(S=void 0);for(let t of[...g.keys()])e.has(t)||m(t);for(let t of[...c.keys()])e.has(t)||w(t)}function E(e){return"text"===e.apply?.kind||!(e.apply||e.token||d.test(e.before)||d.test(e.after))&&(/\s/.test(e.before+e.after)||e.before.length+e.after.length>32)}function C(e,t){let n=0;for(;n<e.length&&n<t.length&&e[n]===t[n];)n++;let r=0;for(;r<e.length-n&&r<t.length-n&&e[e.length-1-r]===t[t.length-1-r];)r++;for(;n>0&&!/\s/.test(e[n-1]);)n--;for(;r>0&&!/\s/.test(e[e.length-r]);)r--;let a=e.slice(0,n),o=e.slice(e.length-r),i=document.createElement("p");i.className="design-diff",i.append(a.length>48?`…${a.slice(-40)}`:a);let s=e.slice(n,e.length-r),l=t.slice(n,t.length-r);return s&&i.append(Object.assign(document.createElement("del"),{textContent:s})),l&&i.append(Object.assign(document.createElement("ins"),{textContent:l})),i.append(o.length>48?`${o.slice(0,40)}…`:o),i}function $(e,t){let n=document.createElement("span");n.className="design-value";let r=/^var\((--[\w-]+)\)$/.exec(e);if(t&&r)return n.append(Object.assign(document.createElement("span"),{className:"design-token",textContent:t})),n;if(d.test(e)){let t=document.createElement("span");t.className="design-swatch",t.style.background=e,n.append(t)}return n.append(e),n}function N(e,t,n){let r=s(t),a=r.filter(e=>"changes"in e),o=document.createElement("div");o.className="design-comment",o.append(Object.assign(document.createElement("style"),{textContent:'\n.design-comment { display: grid; gap: 8px; margin: 2px 0 6px; }\n.design-note { margin: 0; white-space: pre-wrap; }\n.design-card { border-radius: 10px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff0d; overflow: hidden; font-size: 12px; }\n.design-card-head { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 8px 7px 12px; }\n.design-card-label { display: grid; min-width: 0; gap: 1px; }\n.design-card-title { font-weight: 600; color: #eee; white-space: nowrap; }\n.design-card-target { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a8a8a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }\n.design-toggle { margin-left: auto; display: inline-flex; padding: 2px; border-radius: 7px; background: #ffffff0a; flex: none; }\n.design-toggle button { border: 0; padding: 0 8px; height: 22px; border-radius: 5px; font: inherit; font-size: 11px; color: #9a9a9a; background: none; cursor: pointer; }\n.design-toggle button[aria-pressed="true"] { color: #fff; background: #ffffff1a; }\n.design-rows { display: grid; border-top: 1px solid #ffffff0a; }\n.design-row { display: grid; grid-template-columns: minmax(64px, 30%) minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 12px; }\n.design-row + .design-row { border-top: 1px solid #ffffff06; }\n.design-row[hidden] { display: none; }\n.design-row-prose { grid-template-columns: 1fr; gap: 3px; }\n.design-diff { margin: 0; line-height: 1.5; color: #ddd; overflow-wrap: anywhere; }\n.design-diff del, .design-diff ins { border-radius: 3px; padding: 0 2px; }\n.design-diff del { color: #f6a19a; background: #f28b8224; text-decoration-color: #f6a19a99; }\n.design-diff ins { color: #b9e6ad; background: #8fd69424; text-decoration: none; }\n.design-prop { color: #9a9a9a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.design-values { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; color: #eee; }\n.design-before { color: #858585; text-decoration: line-through; text-decoration-color: #85858599; }\n.design-arrow { color: #666; }\n.design-value { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }\n.design-swatch { width: 12px; height: 12px; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1px #ffffff26; }\n.design-token { padding: 1px 6px; border-radius: 5px; color: var(--accent, #bda6ef); background: color-mix(in srgb, var(--accent, #bda6ef) 14%, transparent); }\n.design-more { border: 0; width: 100%; padding: 7px 12px; text-align: left; font: inherit; font-size: 11px; color: #9a9a9a; background: none; border-top: 1px solid #ffffff06; cursor: pointer; }\n.design-more:hover, .design-toggle button:hover { color: #fff; }\n.design-source { padding: 0 12px 8px; color: #777; font-size: 11px; }\n[data-compact] { gap: 6px; margin: 11px 0 0; }\n[data-compact] .design-card-head, [data-compact] .design-row, [data-compact] > .design-source { min-height: 0; padding: 4px 10px; }\n[data-compact]:hover > .design-source { color: #eee; text-decoration: underline; }\n'}));let i=!!n.compact;i&&(o.dataset.compact="");let l=i?3:1/0,d=0,g=a.some(e=>e.changes.some(e=>e.apply)),m=[],h=()=>{let e=c.has(n.key);for(let t of m)t.querySelectorAll("button").forEach((t,n)=>t.setAttribute("aria-pressed",String(1===n?e:!e)))};for(let e of r){if("text"in e){let t=document.createElement("p");t.className="design-note",n.note(t,e.text),o.append(t);continue}if(l<=0){d+=e.changes.length;continue}let t=document.createElement("section");t.className="design-card";let r=document.createElement("div");r.className="design-card-head";let s=document.createElement("div");s.className="design-card-label",s.append(Object.assign(document.createElement("span"),{className:"design-card-title",textContent:e.title}));let y=e.target?p(e.target):e.component;if(y){let t=Object.assign(document.createElement("span"),{className:"design-card-target",textContent:y});e.target&&(t.title=e.target),s.append(t)}if(r.append(s),g&&!m.length&&e.changes.some(e=>e.apply)){let e=document.createElement("div");e.className="design-toggle",e.setAttribute("role","group"),e.setAttribute("aria-label","Preview on page");for(let[t,r]of["Before","After"].entries()){let o=Object.assign(document.createElement("button"),{type:"button",textContent:r,title:`${r} · ${t?"→":"←"} or B`});o.addEventListener("click",()=>{let e=1===t;if(e===c.has(n.key))return;let r=n.resolve(a.find(e=>e.target)?.target);e&&r?.scrollIntoView({block:"center",behavior:"smooth"});let o="function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches;o||b(a,n.resolve),e?u(n.key,a,n.resolve,!o):w(n.key,!o),n.onSwitch&&setTimeout(n.onSwitch,o?0:480),h()}),e.append(o)}m.push(e);for(let e of f)e.isConnected||f.delete(e);f.add(e),r.append(e)}t.append(r);let x=document.createElement("div");x.className="design-rows";let v=4;e.changes.forEach((t,n)=>{if(l<=0)return void d++;i&&l--;let r=document.createElement("div");r.className="design-row",r.hidden=!i&&n>=v&&e.changes.length>v+1;let a=Object.assign(document.createElement("span"),{className:"design-prop",textContent:t.label});if(a.title=t.label,E(t))return r.classList.add("design-row-prose"),r.append(a,C(t.before,t.after)),void x.append(r);let o=document.createElement("span");o.className="design-values";let s=$(t.before);s.classList.add("design-before"),o.append(s,Object.assign(document.createElement("span"),{className:"design-arrow",textContent:"→"}),$(t.after,t.token)),r.append(a,o),x.append(r)}),t.append(x);let k=x.querySelectorAll("[hidden]").length;if(k){let e=Object.assign(document.createElement("button"),{type:"button",className:"design-more",textContent:`Show ${k} more`});e.addEventListener("click",()=>{x.querySelectorAll("[hidden]").forEach(e=>e.hidden=!1),e.remove()}),t.append(e)}e.source&&!i&&t.append(Object.assign(document.createElement("div"),{className:"design-source",textContent:e.source})),o.append(t)}d&&o.append(Object.assign(document.createElement("span"),{className:"design-source",textContent:`+${d} more`})),h(),e.replaceChildren(o),m.length&&(P||(P=!0,document.addEventListener("keydown",e=>{let t="ArrowLeft"===e.key?0:"ArrowRight"===e.key?1:"b"===e.key.toLowerCase()?-1:null;if(null===t||e.metaKey||e.ctrlKey||e.altKey||e.shiftKey||e.isComposing)return;let n=e.composedPath()[0];if(n instanceof HTMLElement&&(n.isContentEditable||n.matches("input, textarea, select")))return;let r=[...f].reverse().find(e=>e.isConnected),a=r?.querySelectorAll("button"),o=-1===t?r?.querySelector('button[aria-pressed="false"]'):a?.[t];o&&(e.preventDefault(),o.click())})))}var S,P=!1;function O(e,t,n){S!==t&&(w("draft"),S=t,u("draft",s(t).filter(e=>"changes"in e),n)),N(e,t,{key:"draft",resolve:n,note:(e,t)=>e.append(t)})}export{a as isDesignComment,v as isPreviewing,s as parseDesignComment,N as renderDesignComment,O as renderDraftProposal,k as resetDesignPreviews,p as shortTarget,l as summarizeDesignComment};

package/dist/design-export-JEWGQH3R.js

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

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

@@ -1 +1 @@
-export declare const designModeStyles = "\n/* Design mode is deliberately an in-page preview: all controls remain in the\n   widget shadow root and never become site styles. */\n.design-outline {\n  position:fixed; z-index:1; pointer-events:none; box-sizing:border-box;\n  outline:2px solid var(--accent,#bda6ef); outline-offset:2px;\n  transition:opacity 80ms ease;\n}\n.design-outline[data-kind=\"hover\"] { outline-style:dashed; opacity:.8; }\n.design-outline--prospective[data-kind=\"hover\"] { opacity:.55; }\n/* The inspector replaces the Comments view inside Komo's shared sidebar surface. */\n.design-inspector {\n  position:absolute; inset:0; z-index:9;\n  display:flex; flex-direction:column; overflow:hidden; color:#e9e6e1;\n  background:#0d0d0d; border-radius:inherit;\n  font:12px/1.4 -apple-system,BlinkMacSystemFont,\"Inter\",\"Segoe UI\",sans-serif; color-scheme:dark;\n  opacity:0; translate:0 6px; pointer-events:none;\n  transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out);\n}\n.design-inspector[hidden] { display:none; }\n/* Frame docks the inspector in the sidebar column beside the scaled page. */\n:host([data-sidebar=\"background\"]) .design-inspector { position:fixed; inset:0 0 0 auto; width:380px; border-radius:0; }\n/* The floating inspector drags by its heading, like the comment sidebar's grip. */\n:host([data-sidebar=\"edge\"]) .design-inspector__heading { cursor:grab; touch-action:none; padding-top:22px; }\n/* The sidebar's own grip stays visible above the inspector, as it is above Comments. */\n:host(.design-active[data-sidebar=\"edge\"]) .edge-sidebar .edge-sidebar-grip { z-index:10; opacity:1 !important; }\n.design-inspector[data-state=\"active\"] { opacity:1; translate:0 0; pointer-events:auto; }\n.design-inspector[data-state=\"closing\"] { opacity:0; translate:0 4px; }\n.design-inspector button { cursor:pointer; }\n/* Header and icon buttons match the Comments panel's title and icons, on the inspector's 12px gutter. */\n.design-inspector__heading { flex:none; display:flex; align-items:center; gap:4px; min-height:54px; padding:0 8px 0 12px; }\n.design-inspector__identity { min-width:0; flex:1; display:flex; align-items:baseline; gap:6px; white-space:nowrap; }\n.design-inspector__parent { flex:none; max-width:35%; overflow:hidden; text-overflow:ellipsis; margin-left:-6px; padding:2px 6px; border-radius:7px; color:#909090; font-size:15px; font-weight:500; }\n.design-inspector__parent::after { content:'/'; margin-left:6px; color:#555; }\n.design-inspector__target { flex:none; max-width:60%; overflow:hidden; text-overflow:ellipsis; color:#fff; font-weight:600; font-size:15px; }\n.design-inspector__heading small { min-width:0; overflow:hidden; text-overflow:ellipsis; color:#909090; font-size:13px; }\n.design-inspector__back,.design-inspector__close,.design-inspector__fold,.design-inspector__actions button { display:grid; place-items:center; min-width:28px; height:28px; border-radius:7px; color:#909090; }\n.design-inspector__back,.design-inspector__close,.design-inspector__fold { flex:none; }\n.design-inspector__back svg,.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg { width:16px; height:16px; }\n.design-inspector__back svg { rotate:90deg; }\n.design-inspector__back[hidden] { display:none; }\n.design-inspector__back:hover,.design-inspector__parent:hover,.design-inspector__close:hover,.design-inspector__fold:hover,.design-inspector__actions button:hover:not(:disabled) { background:#161616; color:#eee; }\n.design-inspector__fold { display:none; }\n.design-inspector__fold svg { transition:rotate .25s var(--ease-smooth-out); }\n.design-inspector[data-folded] .design-inspector__fold svg { rotate:180deg; }\n.design-inspector[data-folded] > :not(.design-inspector__heading) { display:none; }\n.design-inspector__controls { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }\n/* Empty state: the floating sidebar fits a compact, centered hint instead of an empty column. */\n:host([data-sidebar=\"edge\"]) .edge-sidebar[data-design-empty]:not([data-morphing]) { height:auto !important; }\n:host([data-sidebar=\"edge\"]) [data-design-empty] > .design-inspector { position:relative; inset:auto; }\n/* The hidden toolbar docked in the sidebar would otherwise add its height. */\n:host([data-sidebar=\"edge\"]) [data-design-empty]:not([data-morphing]) > .toolbar { position:absolute; }\n.design-inspector[data-empty] .design-inspector__identity { visibility:hidden; }\n.design-inspector[data-empty] .design-inspector__controls { display:grid; place-items:center; }\n.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]) { display:none; }\n/* One slim bar: a quiet Comment action, plus a change count and tools once something changed. */\n.design-inspector__bar { flex:none; display:flex; align-items:center; gap:8px; min-height:56px; padding:0 12px; border-top:1px solid #ffffff0d; color:#909090; font-size:12px; }\n.design-inspector__actions { display:flex; align-items:center; gap:2px; margin-left:auto; }\n.design-inspector__actions button:disabled { cursor:default; opacity:.35; }\n/* Comment is komo's primary action, as on the Comments panel. */\n.design-inspector__actions button:last-child { min-height:34px; margin-left:6px; padding:0 14px; border-radius:8px; background:var(--accent,#bda6ef); color:#211b2d; font-size:12px; font-weight:500; }\n.design-inspector__actions button:last-child:hover:not(:disabled) { background:var(--accent,#bda6ef); color:#211b2d; filter:brightness(1.08); }\n.design-inspector :focus-visible { outline:2px solid var(--accent,#bda6ef); outline-offset:2px; }\n@keyframes design-status { from { opacity:0; translate:0 2px; } }\n@media (max-width:520px) {\n  /* A content-sized bottom sheet; folding it leaves only the heading over the page. */\n  .design-inspector {\n    position:fixed; inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));\n    max-height:min(58dvh,560px);\n    border-radius:24px; box-shadow:0 -1px 0 #ffffff24,0 16px 48px #0005;\n    transition:translate 320ms cubic-bezier(.22,1,.36,1),scale 320ms cubic-bezier(.22,1,.36,1),opacity 150ms ease;\n    transform-origin:bottom center;\n  }\n  .design-inspector__heading { height:52px; padding-left:18px; }\n  .design-inspector__fold { display:grid; }\n  .design-inspector[data-empty] .design-inspector__identity { visibility:visible; }\n  .design-inspector .design-field { height:34px; }\n}\n@media (prefers-reduced-motion:reduce) {\n  .design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status { transition:none; animation:none; }\n}\n";
+export declare const designModeStyles = "\n/* Design mode is deliberately an in-page preview: all controls remain in the\n   widget shadow root and never become site styles. */\n.design-outline {\n  position:fixed; z-index:1; pointer-events:none; box-sizing:border-box;\n  outline:2px solid var(--accent,#bda6ef); outline-offset:2px;\n  transition:opacity 80ms ease;\n}\n.design-outline[data-kind=\"hover\"] { outline-style:dashed; opacity:.8; }\n.design-outline--prospective[data-kind=\"hover\"] { opacity:.55; }\n/* The inspector replaces the Comments view inside Komo's shared sidebar surface. */\n.design-inspector {\n  position:absolute; inset:0; z-index:9;\n  display:flex; flex-direction:column; overflow:hidden; color:#e9e6e1;\n  background:#0d0d0d; border-radius:inherit;\n  font:12px/1.4 -apple-system,BlinkMacSystemFont,\"Inter\",\"Segoe UI\",sans-serif; color-scheme:dark;\n  opacity:0; translate:0 6px; pointer-events:none;\n  transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out);\n}\n.design-inspector[hidden] { display:none; }\n/* Frame docks the inspector in the sidebar column beside the scaled page. */\n:host([data-sidebar=\"background\"]) .design-inspector { position:fixed; inset:0 0 0 auto; width:380px; border-radius:0; }\n/* The floating inspector drags by its heading, like the comment sidebar's grip. */\n:host([data-sidebar=\"edge\"]) .design-inspector__heading { cursor:grab; touch-action:none; padding-top:22px; }\n/* The sidebar's own grip stays visible above the inspector, as it is above Comments. */\n:host(.design-active[data-sidebar=\"edge\"]) .edge-sidebar .edge-sidebar-grip { z-index:10; opacity:1 !important; }\n.design-inspector[data-state=\"active\"] { opacity:1; translate:0 0; pointer-events:auto; }\n.design-inspector[data-state=\"closing\"] { opacity:0; translate:0 4px; }\n.design-inspector button { cursor:pointer; }\n/* Header and icon buttons match the Comments panel's title and icons, on the inspector's 12px gutter. */\n.design-inspector__heading { flex:none; display:flex; align-items:center; gap:4px; min-height:54px; padding:0 8px 0 12px; }\n.design-inspector__identity { min-width:0; flex:1; display:flex; align-items:baseline; gap:6px; white-space:nowrap; }\n.design-inspector__parent { flex:none; max-width:35%; overflow:hidden; text-overflow:ellipsis; margin-left:-6px; padding:2px 6px; border-radius:7px; color:#909090; font-size:15px; font-weight:500; }\n.design-inspector__parent::after { content:'/'; margin-left:6px; color:#555; }\n.design-inspector__target { flex:none; max-width:60%; overflow:hidden; text-overflow:ellipsis; color:#fff; font-weight:600; font-size:15px; }\n.design-inspector__heading small { min-width:0; overflow:hidden; text-overflow:ellipsis; color:#909090; font-size:13px; }\n.design-inspector__back,.design-inspector__close,.design-inspector__fold,.design-inspector__actions button { display:grid; place-items:center; min-width:28px; height:28px; border-radius:7px; color:#909090; }\n.design-inspector__back,.design-inspector__close,.design-inspector__fold { flex:none; }\n.design-inspector__back svg,.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg { width:16px; height:16px; }\n.design-inspector__back svg { rotate:90deg; }\n.design-inspector__back[hidden] { display:none; }\n.design-inspector__back:hover,.design-inspector__parent:hover,.design-inspector__close:hover,.design-inspector__fold:hover,.design-inspector__actions button:hover:not(:disabled) { background:#161616; color:#eee; }\n.design-inspector__fold { display:none; }\n.design-inspector__fold svg { transition:rotate .25s var(--ease-smooth-out); }\n.design-inspector[data-folded] .design-inspector__fold svg { rotate:180deg; }\n.design-inspector[data-folded] > :not(.design-inspector__heading) { display:none; }\n.design-inspector__controls { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }\n/* Empty state: the floating sidebar fits a compact, centered hint instead of an empty column. */\n:host([data-sidebar=\"edge\"]) .edge-sidebar[data-design-empty]:not([data-morphing]) { height:auto !important; }\n:host([data-sidebar=\"edge\"]) [data-design-empty] > .design-inspector { position:relative; inset:auto; }\n/* The hidden toolbar docked in the sidebar would otherwise add its height. */\n:host([data-sidebar=\"edge\"]) [data-design-empty]:not([data-morphing]) > .toolbar { position:absolute; }\n.design-inspector[data-empty] .design-inspector__identity { visibility:hidden; }\n.design-inspector[data-empty] .design-inspector__controls { display:grid; place-items:center; }\n.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]) { display:none; }\n/* One slim bar: a quiet Comment action, plus a change count and tools once something changed. */\n.design-inspector__bar { flex:none; display:flex; align-items:center; gap:8px; min-height:56px; padding:0 12px; border-top:1px solid #ffffff0d; color:#909090; font-size:12px; }\n.design-inspector__actions { display:flex; align-items:center; gap:2px; margin-left:auto; }\n.design-inspector__actions button:disabled { cursor:default; opacity:.35; }\n/* Comment is komo's primary action, as on the Comments panel. */\n.design-inspector__actions button:last-child { min-height:34px; margin-left:6px; padding:0 14px; border-radius:8px; background:var(--accent,#bda6ef); color:#211b2d; font-size:12px; font-weight:500; }\n.design-inspector__actions button:last-child:hover:not(:disabled) { background:var(--accent,#bda6ef); color:#211b2d; filter:brightness(1.08); }\n.design-inspector :focus-visible { outline:2px solid var(--accent,#bda6ef); outline-offset:2px; }\n@media (max-width:520px) {\n  /* A content-sized bottom sheet; folding it leaves only the heading over the page. */\n  .design-inspector {\n    position:fixed; inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));\n    max-height:min(58dvh,560px);\n    border-radius:24px; box-shadow:0 -1px 0 #ffffff24,0 16px 48px #0005;\n    transition:translate 320ms cubic-bezier(.22,1,.36,1),scale 320ms cubic-bezier(.22,1,.36,1),opacity 150ms ease;\n    transform-origin:bottom center;\n  }\n  .design-inspector__heading { height:52px; padding-left:18px; }\n  .design-inspector__fold { display:grid; }\n  .design-inspector[data-empty] .design-inspector__identity { visibility:visible; }\n  .design-inspector .design-field { height:34px; }\n}\n@media (prefers-reduced-motion:reduce) {\n  .design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status { transition:none; animation:none; }\n}\n";

package/dist/design-mode.js

@@ -1 +1 @@
-import{a as e,b as t}from"./chunk-RPY7OOOR.js";import{a as n}from"./chunk-53M6AOAX.js";import{j as i,k as o}from"./chunk-PLSWBSSX.js";var s=(e,t)=>Object.assign(i("button",e,t),{type:"button"}),a=e=>"function"==typeof matchMedia&&matchMedia(e).matches,r=()=>a("(prefers-reduced-motion: reduce)");function d(d){let l=i("style");l.textContent='.design-outline{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;outline:2px solid var(--accent,#bda6ef);outline-offset:2px;transition:opacity 80ms ease}.design-outline[data-kind=hover]{outline-style:dashed;opacity:.8}.design-outline--prospective[data-kind=hover]{opacity:.55}.design-inspector{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;overflow:hidden;color:#e9e6e1;background:#0d0d0d;border-radius:inherit;font:12px/1.4 -apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;color-scheme:dark;opacity:0;translate:0 6px;pointer-events:none;transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out)}.design-inspector[hidden]{display:none}:host([data-sidebar="background"]) .design-inspector{position:fixed;inset:0 0 0 auto;width:380px;border-radius:0}:host([data-sidebar="edge"]) .design-inspector__heading{cursor:grab;touch-action:none;padding-top:22px}:host(.design-active[data-sidebar="edge"]) .edge-sidebar .edge-sidebar-grip{z-index:10;opacity:1!important}.design-inspector[data-state=active]{opacity:1;translate:0 0;pointer-events:auto}.design-inspector[data-state=closing]{opacity:0;translate:0 4px}.design-inspector button{cursor:pointer}.design-inspector__heading{flex:none;display:flex;align-items:center;gap:4px;min-height:54px;padding:0 8px 0 12px}.design-inspector__identity{min-width:0;flex:1;display:flex;align-items:baseline;gap:6px;white-space:nowrap}.design-inspector__parent{flex:none;max-width:35%;overflow:hidden;text-overflow:ellipsis;margin-left:-6px;padding:2px 6px;border-radius:7px;color:#909090;font-size:15px;font-weight:500}.design-inspector__parent:after{content:"/";margin-left:6px;color:#555}.design-inspector__target{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:600;font-size:15px}.design-inspector__heading small{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#909090;font-size:13px}.design-inspector__back,.design-inspector__close,.design-inspector__fold,.design-inspector__actions button{display:grid;place-items:center;min-width:28px;height:28px;border-radius:7px;color:#909090}.design-inspector__back,.design-inspector__close,.design-inspector__fold{flex:none}.design-inspector__back svg,.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg{width:16px;height:16px}.design-inspector__back svg{rotate:90deg}.design-inspector__back[hidden]{display:none}.design-inspector__back:hover,.design-inspector__parent:hover,.design-inspector__close:hover,.design-inspector__fold:hover,.design-inspector__actions button:hover:not(:disabled){background:#161616;color:#eee}.design-inspector__fold{display:none}.design-inspector__fold svg{transition:rotate .25s var(--ease-smooth-out)}.design-inspector[data-folded] .design-inspector__fold svg{rotate:180deg}.design-inspector[data-folded]>:not(.design-inspector__heading){display:none}.design-inspector__controls{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}:host([data-sidebar="edge"]) .edge-sidebar[data-design-empty]:not([data-morphing]){height:auto!important}:host([data-sidebar="edge"]) [data-design-empty]>.design-inspector{position:relative;inset:auto}:host([data-sidebar="edge"]) [data-design-empty]:not([data-morphing])>.toolbar{position:absolute}.design-inspector[data-empty] .design-inspector__identity{visibility:hidden}.design-inspector[data-empty] .design-inspector__controls{display:grid;place-items:center}.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]){display:none}.design-inspector__bar{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 12px;border-top:1px solid #ffffff0d;color:#909090;font-size:12px}.design-inspector__actions{display:flex;align-items:center;gap:2px;margin-left:auto}.design-inspector__actions button:disabled{cursor:default;opacity:.35}.design-inspector__actions button:last-child{min-height:34px;margin-left:6px;padding:0 14px;border-radius:8px;background:var(--accent,#bda6ef);color:#211b2d;font-size:12px;font-weight:500}.design-inspector__actions button:last-child:hover:not(:disabled){background:var(--accent,#bda6ef);color:#211b2d;filter:brightness(1.08)}.design-inspector :focus-visible{outline:2px solid var(--accent,#bda6ef);outline-offset:2px}@keyframes design-status{0%{opacity:0;translate:0 2px}}@media(max-width:520px){.design-inspector{position:fixed;inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));max-height:min(58dvh,560px);border-radius:24px;box-shadow:0 -1px #ffffff24,0 16px 48px #0005;transition:translate .32s cubic-bezier(.22,1,.36,1),scale .32s cubic-bezier(.22,1,.36,1),opacity .15s ease;transform-origin:bottom center}.design-inspector__heading{height:52px;padding-left:18px}.design-inspector__fold{display:grid}.design-inspector[data-empty] .design-inspector__identity{visibility:visible}.design-inspector .design-field{height:34px}}@media(prefers-reduced-motion:reduce){.design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status{transition:none;animation:none}}\n';let c=null,p=import("./design-panel-3SQFWOPU.js").then(e=>{l.textContent+=e.designPanelStyles,c=e},()=>{A.textContent="Design controls unavailable · try again"}),g=i("aside","design-inspector");g.setAttribute("role","dialog"),g.setAttribute("aria-label","Design mode inspector"),g.setAttribute("aria-hidden","true"),g.hidden=!0;let u=i("div","design-outline");u.setAttribute("aria-hidden","true");let m=i("div","design-outline design-outline--prospective");m.setAttribute("aria-hidden","true"),m.dataset.kind="hover",m.hidden=!0;let h=i("div","design-inspector__heading"),f=null,b=s("design-inspector__back");b.hidden=!0,b.append(o("chevron")),b.addEventListener("click",()=>f?.run());let v=s("design-inspector__parent");v.hidden=!0;let y=i("span","design-inspector__target"),x=i("small"),_=s("design-inspector__close");_.setAttribute("aria-label","Exit design mode"),_.append(o("close"));let w=s("design-inspector__fold");w.append(o("chevron"));let E=i("div","design-inspector__identity");E.append(v,y,x),h.append(b,E,w,_);let k=i("div","design-inspector__controls"),C=i("div","design-inspector__bar"),P=i("span","design-inspector__count");P.title="Runtime preview · Undo, Reset or reload to restore";let A=i("p","design-inspector__status");A.setAttribute("role","status");let L=i("div","design-inspector__actions"),T=e=>{let t=s("design-inspector__tool");return t.dataset.tip=e,t.setAttribute("aria-label",e),t},M=T("Undo"),S=T("Reset"),R=T("Copy CSS");R.append(o("copy"));let D=s("","Comment"),z=s("design-text-edit","Edit text");z.title="Edit text",z.setAttribute("aria-label","Edit selected text inline"),L.append(M,S,R,D);let H=i("div","design-inspector__compare");H.setAttribute("role","group"),H.setAttribute("aria-label","Compare with the page");let B=["Before","After"].map((e,t)=>{let n=s("",e);return n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>me(!t)),H.append(n),n});C.append(P,H,A,L);let K,O=i("div");O.hidden=!0,g.append(h,O,k,C),d.root.append(l,u,m),(d.panelRoot??d.root).append(g);let I,j=!1,F=0,$=null,U=null,V=()=>d.page?.()??location.pathname,W=V(),X=new Map,q=null,Y=0,N=0,G=null,Q="",Z=null,J=null,ee=new Map,te=new Map,ne=new WeakMap,ie=new WeakMap,oe=new AbortController,se=()=>import("./design-export-LA5VVR5Z.js"),ae=e=>{I??=se().then(({footerTips:t})=>t(C,d.root,oe.signal,e),()=>{I=void 0})};C.addEventListener("pointerover",ae),C.addEventListener("focusin",ae);let re=new Set,de=[];function le(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=ee.get(e);o||ee.set(e,o=new Map),o.has(t)||o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function ce(e,t){let n=te.get(e);n||te.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(ee.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||te.delete(e),we($,"selected")}let pe=0;new MutationObserver(()=>{let e=A.textContent??"";A.title=e,C.toggleAttribute("data-message",!!e),clearTimeout(pe),e&&(pe=window.setTimeout(function e(){q?.element?pe=window.setTimeout(e,2600):A.textContent=""},2600))}).observe(A,{childList:!0,characterData:!0,subtree:!0});let ge,ue=!1;function me(e){if(e===ue)return;e&&q?.element&&Se(),ue=e;let t=!r();for(let[n,i]of te){let o=n.style.transition;t&&(n.style.transition=[...i.keys()].map(e=>`${e} .3s cubic-bezier(.22,1,.36,1)`).join());for(let[t,o]of i){let i=ee.get(n)?.get(t);e?he(n,t,i):n.style.setProperty(t,o,i?.priority)}t&&window.setTimeout(()=>n.style.transition=o,320)}q?.showBefore(e),Z?.showDesignBefore(e),B.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),g.toggleAttribute("data-before",e),Me()}function he(e,t,n){n?.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t)}function fe(e,t,n){$&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(le($,t),Z?.noteDesignTokenOverride($,t,n),$.style.setProperty(t,n,ee.get($)?.get(t)?.priority),ce($,t),Me()))}function be(e,t,n=!0){if(!$)return;let i={value:$.style.getPropertyValue(t),priority:$.style.getPropertyPriority(t)},o=ie.get(e),s=o?.before??ne.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&de.splice(de.indexOf(o),1),ie.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:$,property:t,before:s,after:i};de.push(n),ie.set(e,n)}n&&(ne.set(e,i),ie.delete(e)),Me()}function ve(){if(He(),k.replaceChildren(),ye(),!$)return K&&k.append(K.empty),y.textContent="Select an element",x.textContent="",void(v.hidden=!0);let e=`${$.tagName.toLowerCase()}${$.id?`#${$.id}`:""}`;y.textContent=e,x.textContent=$ instanceof HTMLIFrameElement?"Frame only · contents are isolated":$.classList.length?`.${[...$.classList].slice(0,2).join(".")}`:"";let t=$.parentElement;v.hidden=!t||t===document.body||t===document.documentElement,v.textContent=t?.tagName.toLowerCase()??"",v.setAttribute("aria-label",`Select parent ${v.textContent}`);let n=$,i=c;i?(i.renderPanel(k,{element:n,changed:te.get(n),collapsed:re,editText:z,begin:(e,t)=>ne.set(e,{value:n.style.getPropertyValue(t),priority:n.style.getPropertyPriority(t)}),apply:fe,commit:be,rerender:ve}),(d.design||n.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(J??=import("./react-props-panel-IU7XYCCH.js").then(e=>Z=e).catch(e=>{throw J=null,e}),J.then(e=>{if(!j||$!==n||k.querySelector(".design-react-group, .design-theme-group"))return;let t=d.root;e.attachThemeSwitcher(k,d.design,()=>Pe(n),t);let o=e.createReactPropsPanel(n,()=>{A.textContent="Runtime preview · Undo, Reset or reload to restore",Me()},t,Pe,d.design);o&&k.append(o),e.attachStyleTokenControls(n,i.fields,k,(e,t,i)=>{le(n,e.property,i),ce(n,e.property),ne.set(t,{value:i,priority:n.style.getPropertyPriority(e.property)}),be(t,e.property)},t,i.valueFor,i.toHex,d.design,e=>{de.push({element:n,undo:e}),Me()});let s=e.createDesignThemePanel(n,i,Me,t);s&&k.append(s)}).catch(()=>{}))):p.then(()=>{j&&$===n&&ve()})}function ye(){g.toggleAttribute("data-empty",D.hidden=!$),K&&(K.hint.hidden=!$),g.parentElement?.toggleAttribute("data-design-empty",j&&!$);let e=[...X.keys()].filter(xe);O.hidden=!!$||!e.length,K&&(K.pending.hidden=O.hidden),K?.update(e.length,e.some(e=>e.isConnected&&X.get(e)===V()))}function xe(e){return!!(te.get(e)?.size||e instanceof HTMLElement&&q?.hasChanges(e)||Z?.hasReactPropChanges(e)||Z?.hasDesignTokenEdit(e))}function _e(){Se(),Ce?.disconnect(),$=null,U=null,u.hidden=m.hidden=!0,ve(),Me()}function we(e,t,i=!1,o=u){if(!j||!e?.isConnected)return void(o.hidden=!0);let s=e.getBoundingClientRect();if(s.width&&s.height){if(o.hidden=!1,o.dataset.kind=t,i&&(e!==G||t!==Q)){G=e,Q=t,clearTimeout(N);let n=g.getBoundingClientRect(),i=e=>s.left<e+n.width&&s.right>e&&s.top<n.bottom&&s.bottom>n.top;d.flip&&n.width&&i(n.left)&&!i(document.documentElement.clientWidth-n.right)&&(N=window.setTimeout(d.flip,"hover"===t?350:0))}o.hidden=!n(o,s,e,d.bounds?.(e))}else o.hidden=!0}function Ee(e=!1){we($??U,$?"selected":"hover",e),we($&&U!==$?U:null,"hover",!1,m)}function ke(){Y||(Y=requestAnimationFrame(()=>{Y=0,$&&(!$.isConnected||W!==V())&&_e(),Ee()}))}let Ce="function"==typeof ResizeObserver?new ResizeObserver(ke):null;function Pe(t){!e(t)||!t.isConnected||d.host.contains(t)||(q?.element&&q.element!==t&&Se(),Ce?.disconnect(),Ce?.observe(t),$=t,U=t,W=V(),X.set(t,W),ve(),we(t,"selected",!0),m.hidden=!0,Me())}let Ae=()=>a("(max-width:520px)");function Le(e){g.toggleAttribute("data-folded",e&&Ae()),w.setAttribute("aria-expanded",String(!g.hasAttribute("data-folded"))),w.setAttribute("aria-label",g.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function Te(e){Le(!1),Ae()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=g.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:r()?"auto":"smooth"})})}function Me(){ke(),M.disabled=!de.length&&!Z?.canUndoReactProp($)&&!Z?.canUndoDesignTokenEdit($),S.disabled=!function(){let e=$,t=e?(te.get(e)?.size??0)+ +(e instanceof HTMLElement&&!!q?.hasChanges(e))+ +!!Z?.hasReactPropChanges(e)||+!!Z?.hasDesignTokenEdit(e):0;return P.textContent=t?`${t} change${t>1?"s":""}`:"",C.toggleAttribute("data-changes",t>0||!M.disabled),H.hidden=!t&&!ue,t}(),R.disabled=!$||!te.get($)?.size,D.disabled=!$,z.disabled=!(!q?.busy&&$?.isConnected&&$ instanceof HTMLElement),z.textContent=q?.isEditing($ instanceof HTMLElement?$:null)?"Done editing":"Edit text",z.setAttribute("aria-label",q?.isEditing($ instanceof HTMLElement?$:null)?"Finish inline text editing":"Edit selected text inline"),ye()}function Se(e=!1){q?.finish(e),Me()}function Re(e){!j||"Escape"!==e.key||e.defaultPrevented&&!e.composedPath().includes(d.host)||(e.preventDefault(),e.stopImmediatePropagation(),_e(),De(!1),d.onExit())}function De(e){if(e||(He(),q?.finish(),j&&(ge=ue,me(!0)),Z?.restoreThemes()),e&&!j&&void 0!==ge){let e=ge;ge=void 0,me(e)}e&&$&&(!$.isConnected||W!==V())&&_e(),clearTimeout(F),F=0,j=e,ye(),e?(g.hidden=!1,g.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{j&&(g.dataset.state="active")}),u.hidden=!$,ve(),Le(!$),we($,"selected"),_.focus({preventScroll:!0})):(U=null,u.hidden=m.hidden=!0,g.setAttribute("aria-hidden","true"),g.dataset.state="closing",r()?(g.hidden=!0,delete g.dataset.state):F=window.setTimeout(()=>{F=0,j||(g.hidden=!0,delete g.dataset.state)},250))}function ze(){He(),me(!1);for(let[e,t]of ee)for(let[n,i]of t)he(e,n,i);ee.clear(),te.clear(),de.length=0,q?.restoreAll(),Z?.resetPreviews(),X.clear(),Me()}function He(){d.root.dispatchEvent(new Event("komo-preview-cancel"))}function Be(e,t){return t(e,te.get(e),t=>ee.get(e)?.get(t)?.computed,Z?.tokenBoundProperties(e),[e instanceof HTMLElement?q?.proposal(e):void 0,Z?.proposedDesignChanges(e)],Z?.designContext(e,d.design))}function Ke(e){q?.isEditing(e instanceof HTMLElement?e:null)&&Se(!0);let t=te.get(e),n=(e instanceof HTMLElement&&q?.hasChanges(e))??!1,i=Z?.hasReactPropChanges(e)??!1,o=Z?.hasDesignTokenEdit(e)??!1;if(t?.size||n||i||o){n&&e instanceof HTMLElement&&q?.reset(e);for(let n of t?.keys()??[])he(e,n,ee.get(e)?.get(n));te.delete(e),ee.delete(e),X.delete(e),i&&Z?.resetReactProps(e),o&&Z?.resetDesignTokenEdits(e);for(let t=de.length-1;t>=0;t--)de[t].element===e&&de.splice(t,1)}}z.addEventListener("click",e=>{q||$&&(A.textContent="Loading inline text editor…",import("./inline-text-editor-AMTG5O25.js").then(t=>{q||!$||!j||(q=t.bindInlineTextTools({button:z,status:A,selected:()=>$ instanceof HTMLElement?$:null,active:()=>j,onChange:Me,onCommit(e){de.push({kind:"text",element:e})}}),q.toggle(e))}).catch(()=>{A.textContent="Inline text editing is unavailable."}))}),w.addEventListener("click",()=>Le(!g.hasAttribute("data-folded"))),v.addEventListener("click",()=>Pe($?.parentElement??null)),_.addEventListener("click",()=>{q?.element&&Se(),_e(),De(!1),d.onExit()}),M.addEventListener("click",()=>{let e=de.pop();e?e.kind?"text"===e.kind?$===(q?.undo()??e.element)&&ve():(he(e.element,e.property,e.before),Z?.syncDesignTokenBinding(e.element,e.property),ce(e.element,e.property),$===e.element&&ve(),we($??U,$?"selected":"hover")):(e.undo(),ve()):($&&(Z?.undoDesignTokenEdit($),Z?.undoReactProp($),ve()),A.textContent="Runtime preview · Undo, Reset or reload to restore"),Me(),(M.disabled?_:M).focus({preventScroll:!0})}),S.addEventListener("click",()=>{$&&(Ke($),ve(),we($,"selected"),Me(),_.focus({preventScroll:!0}))}),R.addEventListener("click",()=>{let e=$,t=e?te.get(e):void 0;!e||!t?.size||se().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),A.textContent="CSS copied"}catch{A.textContent=i}})}),D.addEventListener("click",()=>{let e=$;e&&(q?.isEditing(e instanceof HTMLElement?e:null)&&Se(),se().then(({designProposal:t})=>{if(!j||$!==e||!e.isConnected)return;let n=Be(e,t);Ke(e),Me(),d.onComment(e,n)},()=>{A.textContent="Comment unavailable · try again"}))});let Oe=()=>me(!1);for(let e of[k,L,z])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,Oe,!0);document.addEventListener("pointermove",function(e){if(!j)return;if(e.composedPath().includes(d.host))return U=null,void Ee();let n=t(d.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);U=n&&!d.host.contains(n)?n:null,Ee(!$)},{capture:!0,signal:oe.signal}),document.addEventListener("pointerdown",function(e){if(!j||0!==e.button||e.composedPath().includes(d.host))return;let n=t(d.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);!n||d.host.contains(n)||q?.element&&(n===q.element||q.element.contains(n))||(q?.element&&Se(),e.preventDefault(),e.stopImmediatePropagation(),Pe(n))},{capture:!0,signal:oe.signal}),document.addEventListener("click",function(e){!j||e.composedPath().includes(d.host)||(e.preventDefault(),e.stopImmediatePropagation(),$&&Te($),2===e.detail&&$?.contains(e.target)&&!z.disabled&&!q?.element&&z.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:oe.signal}),document.addEventListener("keydown",function(t){if(q?.handleKey(t))return void z.focus({preventScroll:!0});let n=t.key.toLowerCase(),i=t.composedPath()[0],o=i instanceof HTMLElement&&(i.isContentEditable||i.matches("input,textarea,select"));if(j&&$&&t.altKey&&!t.ctrlKey&&!t.metaKey&&!o&&("arrowup"===n||"arrowdown"===n)){let i=("arrowup"===n?$.parentElement:[...$.children].find(t=>e(t)&&!t.matches("script,style,defs,title,desc,metadata")))??null;return void(e(i)&&i!==document.body&&i!==document.documentElement&&!d.host.contains(i)&&(t.preventDefault(),t.stopImmediatePropagation(),Pe(i),Te(i)))}if(j&&!H.hidden&&!t.metaKey&&!t.ctrlKey&&!t.altKey&&("b"===n||"arrowleft"===n||"arrowright"===n)&&!o)return t.preventDefault(),t.stopImmediatePropagation(),void me("b"===n?!ue:"arrowleft"===n);if(j&&!q?.element&&("Enter"===t.key||" "===t.key)&&!t.composedPath().includes(d.host)){let n=document.activeElement;if(e(n)&&n!==document.body&&n!==document.documentElement)return t.preventDefault(),t.stopImmediatePropagation(),Pe(n),void Te(n)}t.composedPath().includes(d.host)&&Re(t)},{capture:!0,signal:oe.signal}),window.addEventListener("keydown",Re,{signal:oe.signal}),window.addEventListener("scroll",ke,{capture:!0,passive:!0,signal:oe.signal}),window.addEventListener("resize",ke,{passive:!0,signal:oe.signal});let Ie=new MutationObserver(()=>{j&&$&&!$.isConnected&&_e(),U&&!U.isConnected&&(U=null,Ee())});Ie.observe(document.body,{childList:!0,subtree:!0});let je=se().then(e=>{oe.signal.aborted||(K=e.selectionViews({exitKey:d.exitKey,review(){let e=[...X.keys()].reverse().find(e=>e.isConnected&&X.get(e)===V()&&xe(e));e&&Pe(e)},reset:ze,proposals:()=>[...X.keys()].filter(xe).map(t=>Be(t,e.designProposal)),message:e=>{A.textContent=e}}),l.textContent+=K.styles,M.innerHTML=K.icons.undo,S.innerHTML=K.icons.reset,g.insertBefore(K.hint,O),O.append(K.pending),j?ve():ye())},()=>{A.textContent="Selection tools unavailable · try again"});return{setActive:De,select:Pe,clearSelection:_e,setReturnAction(e){f=e,b.hidden=!e,e&&(b.setAttribute("aria-label",e.label),b.title=e.label)},mountPanel(e){g.parentElement!==e&&(g.parentElement?.removeAttribute("data-design-empty"),e.append(g),ye())},get active(){return j},ready:Promise.all([p,je]),destroy(){q?.finish(!0),De(!1),ze(),clearTimeout(F),clearTimeout(pe),clearTimeout(N),Ce?.disconnect(),Ie.disconnect(),oe.abort(),cancelAnimationFrame(Y),g.remove(),u.remove(),m.remove(),l.remove()}}}export{d as createDesignMode};
+import{a as e,c as t}from"./chunk-HHG6KWKR.js";import{a as n,b as i}from"./chunk-RPY7OOOR.js";import{a as o}from"./chunk-53M6AOAX.js";import{j as s,k as a}from"./chunk-PLSWBSSX.js";var r=(e,t)=>Object.assign(s("button",e,t),{type:"button"}),d=e=>"function"==typeof matchMedia&&matchMedia(e).matches,l=()=>d("(prefers-reduced-motion: reduce)");function c(c){let p=s("style");p.textContent='.design-outline{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;outline:2px solid var(--accent,#bda6ef);outline-offset:2px;transition:opacity 80ms ease}.design-outline[data-kind=hover]{outline-style:dashed;opacity:.8}.design-outline--prospective[data-kind=hover]{opacity:.55}.design-inspector{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;overflow:hidden;color:#e9e6e1;background:#0d0d0d;border-radius:inherit;font:12px/1.4 -apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;color-scheme:dark;opacity:0;translate:0 6px;pointer-events:none;transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out)}.design-inspector[hidden]{display:none}:host([data-sidebar="background"]) .design-inspector{position:fixed;inset:0 0 0 auto;width:380px;border-radius:0}:host([data-sidebar="edge"]) .design-inspector__heading{cursor:grab;touch-action:none;padding-top:22px}:host(.design-active[data-sidebar="edge"]) .edge-sidebar .edge-sidebar-grip{z-index:10;opacity:1!important}.design-inspector[data-state=active]{opacity:1;translate:0 0;pointer-events:auto}.design-inspector[data-state=closing]{opacity:0;translate:0 4px}.design-inspector button{cursor:pointer}.design-inspector__heading{flex:none;display:flex;align-items:center;gap:4px;min-height:54px;padding:0 8px 0 12px}.design-inspector__identity{min-width:0;flex:1;display:flex;align-items:baseline;gap:6px;white-space:nowrap}.design-inspector__parent{flex:none;max-width:35%;overflow:hidden;text-overflow:ellipsis;margin-left:-6px;padding:2px 6px;border-radius:7px;color:#909090;font-size:15px;font-weight:500}.design-inspector__parent:after{content:"/";margin-left:6px;color:#555}.design-inspector__target{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:600;font-size:15px}.design-inspector__heading small{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#909090;font-size:13px}.design-inspector__back,.design-inspector__close,.design-inspector__fold,.design-inspector__actions button{display:grid;place-items:center;min-width:28px;height:28px;border-radius:7px;color:#909090}.design-inspector__back,.design-inspector__close,.design-inspector__fold{flex:none}.design-inspector__back svg,.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg{width:16px;height:16px}.design-inspector__back svg{rotate:90deg}.design-inspector__back[hidden]{display:none}.design-inspector__back:hover,.design-inspector__parent:hover,.design-inspector__close:hover,.design-inspector__fold:hover,.design-inspector__actions button:hover:not(:disabled){background:#161616;color:#eee}.design-inspector__fold{display:none}.design-inspector__fold svg{transition:rotate .25s var(--ease-smooth-out)}.design-inspector[data-folded] .design-inspector__fold svg{rotate:180deg}.design-inspector[data-folded]>:not(.design-inspector__heading){display:none}.design-inspector__controls{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}:host([data-sidebar="edge"]) .edge-sidebar[data-design-empty]:not([data-morphing]){height:auto!important}:host([data-sidebar="edge"]) [data-design-empty]>.design-inspector{position:relative;inset:auto}:host([data-sidebar="edge"]) [data-design-empty]:not([data-morphing])>.toolbar{position:absolute}.design-inspector[data-empty] .design-inspector__identity{visibility:hidden}.design-inspector[data-empty] .design-inspector__controls{display:grid;place-items:center}.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]){display:none}.design-inspector__bar{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 12px;border-top:1px solid #ffffff0d;color:#909090;font-size:12px}.design-inspector__actions{display:flex;align-items:center;gap:2px;margin-left:auto}.design-inspector__actions button:disabled{cursor:default;opacity:.35}.design-inspector__actions button:last-child{min-height:34px;margin-left:6px;padding:0 14px;border-radius:8px;background:var(--accent,#bda6ef);color:#211b2d;font-size:12px;font-weight:500}.design-inspector__actions button:last-child:hover:not(:disabled){background:var(--accent,#bda6ef);color:#211b2d;filter:brightness(1.08)}.design-inspector :focus-visible{outline:2px solid var(--accent,#bda6ef);outline-offset:2px}@media(max-width:520px){.design-inspector{position:fixed;inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));max-height:min(58dvh,560px);border-radius:24px;box-shadow:0 -1px #ffffff24,0 16px 48px #0005;transition:translate .32s cubic-bezier(.22,1,.36,1),scale .32s cubic-bezier(.22,1,.36,1),opacity .15s ease;transform-origin:bottom center}.design-inspector__heading{height:52px;padding-left:18px}.design-inspector__fold{display:grid}.design-inspector[data-empty] .design-inspector__identity{visibility:visible}.design-inspector .design-field{height:34px}}@media(prefers-reduced-motion:reduce){.design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status{transition:none;animation:none}}\n';let g=null,u=import("./design-panel-KHZDEA36.js").then(e=>{p.textContent+=e.designPanelStyles,g=e},()=>{T.textContent="Design controls unavailable · try again"}),h=s("aside","design-inspector");h.setAttribute("role","dialog"),h.setAttribute("aria-label","Design mode inspector"),h.setAttribute("aria-hidden","true"),h.hidden=!0;let m=s("div","design-outline");m.setAttribute("aria-hidden","true");let f=s("div","design-outline design-outline--prospective");f.setAttribute("aria-hidden","true"),f.dataset.kind="hover",f.hidden=!0;let b=s("div","design-inspector__heading"),v=null,y=r("design-inspector__back");y.hidden=!0,y.append(a("chevron")),y.addEventListener("click",()=>v?.run());let x=r("design-inspector__parent");x.hidden=!0;let _=s("span","design-inspector__target"),w=s("small"),E=r("design-inspector__close");E.setAttribute("aria-label","Exit design mode"),E.append(a("close"));let k=r("design-inspector__fold");k.append(a("chevron"));let C=s("div","design-inspector__identity");C.append(x,_,w),b.append(y,C,k,E);let P=s("div","design-inspector__controls"),A=s("div","design-inspector__bar"),L=s("span","design-inspector__count");L.title="Runtime preview · Undo, Reset or reload to restore";let T=s("p","design-inspector__status");T.setAttribute("role","status");let M=s("div","design-inspector__actions"),S=e=>{let t=r("design-inspector__tool");return t.dataset.tip=e,t.setAttribute("aria-label",e),t},R=S("Undo"),D=S("Reset"),H=S("Copy CSS");H.append(a("copy"));let z=r("","Comment"),K=r("design-text-edit","Edit text");K.title="Edit text",K.setAttribute("aria-label","Edit selected text inline"),M.append(R,D,H,z);let B=s("div","design-inspector__compare");B.setAttribute("role","group"),B.setAttribute("aria-label","Compare with the page");let O=["Before","After"].map((e,t)=>{let n=r("",e);return n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>be(!t)),B.append(n),n});A.append(L,B,T,M);let j,I=s("div");I.hidden=!0,h.append(b,I,P,A),c.root.append(p,m,f),(c.panelRoot??c.root).append(h);let F,$=!1,W=0,U=null,V=null,q=()=>c.page?.()??location.pathname,X=q(),Y=new Map,G=null,N=0,J=0,Q=null,Z="",ee=null,te=null,ne=new Map,ie=new WeakSet,oe=new Map,se=new WeakMap,ae=new WeakMap,re=new AbortController,de=()=>import("./design-export-JEWGQH3R.js"),le=e=>{F??=de().then(({footerTips:t})=>t(A,c.root,re.signal,e),()=>{F=void 0})};A.addEventListener("pointerover",le),A.addEventListener("focusin",le);let ce=new Set,pe=[];function ge(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=ne.get(e);o||(ne.set(e,o=new Map),e.hasAttribute("style")||ie.add(e)),o.has(t)||o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function ue(e,t){let n=oe.get(e);n||oe.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(ne.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||oe.delete(e),Ce(U,"selected")}let he=0;new MutationObserver(()=>{let e=T.textContent??"";T.title=e,A.toggleAttribute("data-message",!!e),clearTimeout(he),e&&(he=window.setTimeout(function e(){G?.element?he=window.setTimeout(e,2600):T.textContent=""},2600))}).observe(T,{childList:!0,characterData:!0,subtree:!0});let me,fe=!1;function be(e,n=!0){if(e===fe)return;e&&G?.element&&He(),fe=e;let i=n&&!l();for(let[n,o]of oe)t(n,o.keys(),()=>{for(let[t,i]of o){let o=ne.get(n)?.get(t);e?ve(n,t,o):n.style.setProperty(t,i,o?.priority)}},i,ie.has(n));G?.showBefore(e),ee?.showDesignBefore(e),O.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),h.toggleAttribute("data-before",e),De()}function ve(t,n,i){i?.value?t.style.setProperty(n,i.value,i.priority):t.style.removeProperty(n),ie.has(t)&&e(t)}function ye(e,t,n){U&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(ge(U,t),ee?.noteDesignTokenOverride(U,t,n),U.style.setProperty(t,n,ne.get(U)?.get(t)?.priority),ue(U,t),De()))}function xe(e,t,n=!0){if(!U)return;let i={value:U.style.getPropertyValue(t),priority:U.style.getPropertyPriority(t)},o=ae.get(e),s=o?.before??se.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&pe.splice(pe.indexOf(o),1),ae.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:U,property:t,before:s,after:i};pe.push(n),ae.set(e,n)}n&&(se.set(e,i),ae.delete(e)),De()}function _e(){if(Oe(),P.replaceChildren(),we(),!U)return j&&P.append(j.empty),_.textContent="Select an element",w.textContent="",void(x.hidden=!0);let e=`${U.tagName.toLowerCase()}${U.id?`#${U.id}`:""}`;_.textContent=e,w.textContent=U instanceof HTMLIFrameElement?"Frame only · contents are isolated":U.classList.length?`.${[...U.classList].slice(0,2).join(".")}`:"";let t=U.parentElement;x.hidden=!t||t===document.body||t===document.documentElement,x.textContent=t?.tagName.toLowerCase()??"",x.setAttribute("aria-label",`Select parent ${x.textContent}`);let n=U,i=g;i?(i.renderPanel(P,{element:n,changed:oe.get(n),collapsed:ce,editText:K,begin:(e,t)=>se.set(e,{value:n.style.getPropertyValue(t),priority:n.style.getPropertyPriority(t)}),apply:ye,commit:xe,rerender:_e}),(c.design||n.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(te??=import("./react-props-panel-Y7F2P3AG.js").then(e=>ee=e).catch(e=>{throw te=null,e}),te.then(e=>{if(!$||U!==n||P.querySelector(".design-react-group, .design-theme-group"))return;let t=c.root;e.attachThemeSwitcher(P,c.design,()=>Te(n),t);let o=e=>{e&&pe.push({element:n,undo:e}),De()},s=e.createReactPropsPanel(n,o,t,Te,c.design,_e);s&&P.prepend(s),e.attachStyleTokenControls(n,i.fields,P,(e,t,i)=>{ge(n,e.property,i),ue(n,e.property),se.set(t,{value:i,priority:n.style.getPropertyPriority(e.property)}),xe(t,e.property)},t,i.valueFor,i.toHex,c.design,o);let a=e.createDesignThemePanel(n,i,De,t);a&&P.append(a)}).catch(()=>{}))):u.then(()=>{$&&U===n&&_e()})}function we(){h.toggleAttribute("data-empty",z.hidden=!U),j&&(j.hint.hidden=!U),h.parentElement?.toggleAttribute("data-design-empty",$&&!U);let e=[...Y.keys()].filter(Ee);I.hidden=!!U||!e.length,j&&(j.pending.hidden=I.hidden),j?.update(e.length,e.some(e=>e.isConnected&&Y.get(e)===q()))}function Ee(e){return!!(oe.get(e)?.size||e instanceof HTMLElement&&G?.hasChanges(e)||ee?.hasReactPropChanges(e)||ee?.hasDesignTokenEdit(e))}function ke(){He(),Le?.disconnect(),U=null,V=null,m.hidden=f.hidden=!0,_e(),De()}function Ce(e,t,n=!1,i=m){if(!$||!e?.isConnected)return void(i.hidden=!0);let s=e.getBoundingClientRect();if(s.width&&s.height){if(i.hidden=!1,i.dataset.kind=t,n&&(e!==Q||t!==Z)){Q=e,Z=t,clearTimeout(J);let n=h.getBoundingClientRect(),i=e=>s.left<e+n.width&&s.right>e&&s.top<n.bottom&&s.bottom>n.top;c.flip&&n.width&&i(n.left)&&!i(document.documentElement.clientWidth-n.right)&&(J=window.setTimeout(c.flip,"hover"===t?350:0))}i.hidden=!o(i,s,e,c.bounds?.(e))}else i.hidden=!0}function Pe(e=!1){Ce(U??V,U?"selected":"hover",e),Ce(U&&V!==U?V:null,"hover",!1,f)}function Ae(){N||(N=requestAnimationFrame(()=>{N=0,U&&(!U.isConnected||X!==q())&&ke(),Pe()}))}let Le="function"==typeof ResizeObserver?new ResizeObserver(Ae):null;function Te(e){!n(e)||!e.isConnected||c.host.contains(e)||(G?.element&&G.element!==e&&He(),Le?.disconnect(),Le?.observe(e),U=e,V=e,X=q(),Y.set(e,X),_e(),Ce(e,"selected",!0),f.hidden=!0,De())}let Me=()=>d("(max-width:520px)");function Se(e){h.toggleAttribute("data-folded",e&&Me()),k.setAttribute("aria-expanded",String(!h.hasAttribute("data-folded"))),k.setAttribute("aria-label",h.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function Re(e){Se(!1),Me()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=h.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:l()?"auto":"smooth"})})}function De(){Ae(),R.disabled=!pe.length&&!ee?.canUndoReactProp(U)&&!ee?.canUndoDesignTokenEdit(U),D.disabled=!function(){let e=U,t=e?(oe.get(e)?.size??0)+ +(e instanceof HTMLElement&&!!G?.hasChanges(e))+ +!!ee?.hasReactPropChanges(e)||+!!ee?.hasDesignTokenEdit(e):0;return L.textContent=t?`${t} change${t>1?"s":""}`:"",A.toggleAttribute("data-changes",t>0||!R.disabled),B.hidden=!t&&!fe,t}(),H.disabled=!U||!oe.get(U)?.size,z.disabled=!U,K.disabled=!(!G?.busy&&U?.isConnected&&U instanceof HTMLElement),K.textContent=G?.isEditing(U instanceof HTMLElement?U:null)?"Done editing":"Edit text",K.setAttribute("aria-label",G?.isEditing(U instanceof HTMLElement?U:null)?"Finish inline text editing":"Edit selected text inline"),we()}function He(e=!1){G?.finish(e),De()}function ze(e){!$||"Escape"!==e.key||e.defaultPrevented&&!e.composedPath().includes(c.host)||(e.preventDefault(),e.stopImmediatePropagation(),ke(),Ke(!1),c.onExit())}function Ke(e){if(e||(Oe(),G?.finish(),$&&(me=fe,be(!0,!1)),ee?.restoreThemes(h)),e&&!$&&void 0!==me){let e=me;me=void 0,be(e,!1)}e&&U&&(!U.isConnected||X!==q())&&ke(),clearTimeout(W),W=0,$=e,we(),e?(h.hidden=!1,h.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{$&&(h.dataset.state="active")}),m.hidden=!U,_e(),Se(!U),Ce(U,"selected"),E.focus({preventScroll:!0})):(V=null,m.hidden=f.hidden=!0,h.setAttribute("aria-hidden","true"),h.dataset.state="closing",l()?(h.hidden=!0,delete h.dataset.state):W=window.setTimeout(()=>{W=0,$||(h.hidden=!0,delete h.dataset.state)},250))}function Be(){Oe(),be(!1,!1);for(let[e,n]of ne)t(e,n.keys(),()=>{for(let[t,i]of n)ve(e,t,i)},!1,ie.has(e)),ie.delete(e);ne.clear(),oe.clear(),pe.length=0,G?.restoreAll(),ee?.resetPreviews(),Y.clear(),De()}function Oe(){c.root.dispatchEvent(new Event("komo-preview-cancel"))}function je(e,t){return t(e,oe.get(e),t=>ne.get(e)?.get(t)?.computed,ee?.tokenBoundProperties(e),[e instanceof HTMLElement?G?.proposal(e):void 0,ee?.proposedDesignChanges(e)],ee?.designContext(e,c.design))}function Ie(e){G?.isEditing(e instanceof HTMLElement?e:null)&&He(!0);let n=oe.get(e),i=(e instanceof HTMLElement&&G?.hasChanges(e))??!1,o=ee?.hasReactPropChanges(e)??!1,s=ee?.hasDesignTokenEdit(e)??!1;if(n?.size||i||o||s){i&&e instanceof HTMLElement&&G?.reset(e),t(e,n?.keys()??[],()=>{for(let t of n?.keys()??[])ve(e,t,ne.get(e)?.get(t))},!1,ie.has(e)),oe.delete(e),ne.delete(e),ie.delete(e),Y.delete(e),o&&ee?.resetReactProps(e),s&&ee?.resetDesignTokenEdits(e);for(let t=pe.length-1;t>=0;t--)pe[t].element===e&&pe.splice(t,1)}}K.addEventListener("click",e=>{G||U&&(T.textContent="Loading inline text editor…",import("./inline-text-editor-OMRCO3H3.js").then(t=>{G||!U||!$||(G=t.bindInlineTextTools({button:K,status:T,selected:()=>U instanceof HTMLElement?U:null,active:()=>$,onChange:De,onCommit(e){pe.push({kind:"text",element:e})}}),G.toggle(e))}).catch(()=>{T.textContent="Inline text editing is unavailable."}))}),k.addEventListener("click",()=>Se(!h.hasAttribute("data-folded"))),x.addEventListener("click",()=>Te(U?.parentElement??null)),E.addEventListener("click",()=>{G?.element&&He(),ke(),Ke(!1),c.onExit()}),R.addEventListener("click",()=>{let e=pe.pop();e?e.kind?"text"===e.kind?U===(G?.undo()??e.element)&&_e():(ve(e.element,e.property,e.before),ee?.syncDesignTokenBinding(e.element,e.property),ue(e.element,e.property),U===e.element&&_e(),Ce(U??V,U?"selected":"hover")):(e.undo(),_e()):(U&&(ee?.undoDesignTokenEdit(U),ee?.undoReactProp(U),_e()),T.textContent="Runtime preview · Undo, Reset or reload to restore"),De(),(R.disabled?E:R).focus({preventScroll:!0})}),D.addEventListener("click",()=>{U&&(Ie(U),_e(),Ce(U,"selected"),De(),E.focus({preventScroll:!0}))}),H.addEventListener("click",()=>{let e=U,t=e?oe.get(e):void 0;!e||!t?.size||de().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),T.textContent="CSS copied"}catch{T.textContent=i}})}),z.addEventListener("click",()=>{let e=U;e&&(G?.isEditing(e instanceof HTMLElement?e:null)&&He(),de().then(({designProposal:t})=>{if(!$||U!==e||!e.isConnected)return;let n=je(e,t);Ie(e),De(),c.onComment(e,n)},()=>{T.textContent="Comment unavailable · try again"}))});let Fe=()=>be(!1);for(let e of[P,M,K])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,Fe,!0);document.addEventListener("pointermove",function(e){if(!$)return;if(e.composedPath().includes(c.host))return V=null,void Pe();let t=i(c.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);V=t&&!c.host.contains(t)?t:null,Pe(!U)},{capture:!0,signal:re.signal}),document.addEventListener("pointerdown",function(e){if(!$||0!==e.button||e.composedPath().includes(c.host))return;let t=i(c.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);!t||c.host.contains(t)||G?.element&&(t===G.element||G.element.contains(t))||(G?.element&&He(),e.preventDefault(),e.stopImmediatePropagation(),Te(t))},{capture:!0,signal:re.signal}),document.addEventListener("click",function(e){!$||e.composedPath().includes(c.host)||(e.preventDefault(),e.stopImmediatePropagation(),U&&Re(U),2===e.detail&&U?.contains(e.target)&&!K.disabled&&!G?.element&&K.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:re.signal}),document.addEventListener("keydown",function(e){if(G?.handleKey(e))return void K.focus({preventScroll:!0});let t=e.key.toLowerCase(),i=e.composedPath()[0],o=i instanceof HTMLElement&&(i.isContentEditable||i.matches("input,textarea,select"));if($&&U&&e.altKey&&!e.ctrlKey&&!e.metaKey&&!o&&("arrowup"===t||"arrowdown"===t)){let i=("arrowup"===t?U.parentElement:[...U.children].find(e=>n(e)&&!e.matches("script,style,defs,title,desc,metadata")))??null;return void(n(i)&&i!==document.body&&i!==document.documentElement&&!c.host.contains(i)&&(e.preventDefault(),e.stopImmediatePropagation(),Te(i),Re(i)))}if($&&!B.hidden&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&("b"===t||"arrowleft"===t||"arrowright"===t)&&!o)return e.preventDefault(),e.stopImmediatePropagation(),void be("b"===t?!fe:"arrowleft"===t);if($&&!G?.element&&("Enter"===e.key||" "===e.key)&&!e.composedPath().includes(c.host)){let t=document.activeElement;if(n(t)&&t!==document.body&&t!==document.documentElement)return e.preventDefault(),e.stopImmediatePropagation(),Te(t),void Re(t)}e.composedPath().includes(c.host)&&ze(e)},{capture:!0,signal:re.signal}),window.addEventListener("keydown",ze,{signal:re.signal}),window.addEventListener("scroll",Ae,{capture:!0,passive:!0,signal:re.signal}),window.addEventListener("resize",Ae,{passive:!0,signal:re.signal});let $e=new MutationObserver(()=>{$&&U&&!U.isConnected&&ke(),V&&!V.isConnected&&(V=null,Pe())});$e.observe(document.body,{childList:!0,subtree:!0});let We=de().then(e=>{re.signal.aborted||(j=e.selectionViews({exitKey:c.exitKey,review(){let e=[...Y.keys()].reverse().find(e=>e.isConnected&&Y.get(e)===q()&&Ee(e));e&&Te(e)},reset:Be,proposals:()=>[...Y.keys()].filter(Ee).map(t=>je(t,e.designProposal)),message:e=>{T.textContent=e}}),p.textContent+=j.styles,R.innerHTML=j.icons.undo,D.innerHTML=j.icons.reset,h.insertBefore(j.hint,I),I.append(j.pending),$?_e():we())},()=>{T.textContent="Selection tools unavailable · try again"});return{setActive:Ke,select:Te,clearSelection:ke,setReturnAction(e){v=e,y.hidden=!e,e&&(y.setAttribute("aria-label",e.label),y.title=e.label)},mountPanel(e){h.parentElement!==e&&(h.parentElement?.removeAttribute("data-design-empty"),e.append(h),we())},get active(){return $},ready:Promise.all([u,We]),destroy(){G?.finish(!0),Ke(!1),Be(),clearTimeout(W),clearTimeout(he),clearTimeout(J),Le?.disconnect(),$e.disconnect(),re.abort(),cancelAnimationFrame(N),h.remove(),m.remove(),f.remove(),p.remove()}}}export{c as createDesignMode};

package/dist/{design-panel-3SQFWOPU.js → design-panel-KHZDEA36.js}

@@ -1 +1 @@
-var e='.design-inspector__controls>*+*{border-top:1px solid #ffffff0d}.design-group{padding:0 12px 10px}.design-section>.design-group{padding-bottom:12px}.design-group summary{cursor:pointer;display:flex;align-items:center;gap:4px;height:36px;color:#e9e6e1;font-size:11px;font-weight:600;list-style:none}.design-group summary::-webkit-details-marker{display:none}.design-group summary:after{content:"";width:5px;height:5px;margin:-2px 0 0 3px;border:solid #77736f;border-width:0 1.2px 1.2px 0;rotate:45deg;opacity:0;transition:opacity .12s,rotate .2s var(--ease-smooth-out)}.design-group:not([open]) summary:after{rotate:-45deg;margin:0 0 0 2px}.design-group summary:is(:hover,:focus-visible):after,.design-group:not([open]) summary:after{opacity:1}.design-group summary:focus-visible{outline-offset:-2px;border-radius:6px}.design-section{position:relative}.design-section__title{display:flex;align-items:center;height:36px;padding:0 12px;color:#898680;font-size:11px;font-weight:600}.design-section__tools{position:absolute;z-index:1;top:6px;right:8px;display:flex;gap:2px}.design-section__tools button{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:#898680;font-size:16px;line-height:1}.design-section__tools button:hover{background:#ffffff12;color:#f1efeb}.design-text-edit{font-size:0!important}.design-text-edit:before{content:"T";font:600 13px/1 Georgia,Times New Roman,serif}.design-text-edit[aria-label^=Finish]{background:#bda6ef33;color:#e6dcfb!important}.design-text-edit:disabled{opacity:.35;cursor:default}.design-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 8px}.design-field{position:relative;--lead:4px;min-width:0;height:28px;display:flex;align-items:center;border-radius:6px;background:#ffffff0a;color:#898680;transition:box-shadow .12s var(--ease-smooth-out)}.design-field:hover{box-shadow:inset 0 0 0 1px #ffffff1c}.design-field:focus-within{box-shadow:inset 0 0 0 1px #bda6ef}.design-field:has([aria-invalid=true]){box-shadow:inset 0 0 0 1px #fda29b}.design-field[data-wide]{grid-column:1/-1}.design-field:has(.design-field__glyph){--lead:22px}.design-field--color{--lead:26px}.design-field>input:not([type=color]),.design-field>select{flex:1;box-sizing:border-box;width:100%;min-width:0;height:100%;margin:0;padding:0 8px;border:0;border-radius:6px;outline:0;box-shadow:none;background:none;color:#f1efeb;font:inherit;font-size:11px;font-variant-numeric:tabular-nums;text-overflow:ellipsis}.design-field>:is(input,select):focus-visible{outline:0}.design-field input[type=number]{appearance:textfield;-moz-appearance:textfield}.design-field input::-webkit-inner-spin-button{appearance:none}.design-field__glyph{flex:none;display:grid;place-items:center;width:22px;height:100%;margin-right:-6px;color:#77736f;font-size:10px;font-weight:600;cursor:ew-resize;user-select:none;touch-action:none}.design-field__glyph:hover{color:#e9e6e1}.design-field__glyph svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.1}.design-field input[type=color]{flex:none;width:16px;height:16px;margin:0 -2px 0 6px;padding:0;border:0;border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff26;background:none;cursor:pointer}.design-field input[type=color]::-webkit-color-swatch-wrapper{padding:0}.design-field input[type=color]::-webkit-color-swatch{border:0;border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff26}.design-field input[type=color]::-moz-color-swatch{border:0;border-radius:4px}\n',t=[{property:"width",label:"Width",kind:"size",glyph:"W"},{property:"height",label:"Height",kind:"size",glyph:"H"},{property:"padding",label:"Padding",kind:"length",glyph:"M1.5 1.5h9v9h-9zM4.5 4.5h3v3h-3z",max:200},{property:"gap",label:"Gap",kind:"length",glyph:"M1.5 1.5h3v9h-3zM7.5 1.5h3v9h-3z",max:200},{property:"margin",label:"Margin",kind:"length",glyph:"M4 4h4v4H4zM1 3V1h2m6 0h2v2m0 6v2H9m-6 0H1V9",max:200},{property:"border-radius",label:"Corner radius",kind:"length",glyph:"M1.5 10.5V6A4.5 4.5 0 0 1 6 1.5h4.5",max:96},{property:"display",label:"Layout",kind:"select",values:["block","flex","grid","inline-flex","inline-grid"]},{property:"font-family",label:"Font family",kind:"text",wide:!0,placeholder:"system-ui, sans-serif"},{property:"font-size",label:"Font size",kind:"length",glyph:"M2 3V1.5h8V3M6 1.5v9m-1.5 0h3",min:1,max:160},{property:"line-height",label:"Line height",kind:"text",glyph:"M1 1.5h10M1 10.5h10M3.5 8.5 6 3l2.5 5.5",placeholder:"1.4 or 24px"},{property:"font-weight",label:"Weight",kind:"select",values:["300","400","500","600","700","800"]},{property:"text-align",label:"Alignment",kind:"select",values:["left","center","right","justify"]},{property:"color",label:"Text color",kind:"color",wide:!0},{property:"background-color",label:"Fill",kind:"color",wide:!0},{property:"border-width",label:"Border width",kind:"length",glyph:"M1 2.5h10M1 6h10M1 9.5h10",max:24},{property:"border-style",label:"Border style",kind:"select",values:["none","solid","dashed","dotted"]},{property:"border-color",label:"Border color",kind:"color"},{property:"fill",label:"Fill",kind:"color",wide:!0},{property:"stroke",label:"Stroke",kind:"color",wide:!0},{property:"stroke-width",label:"Stroke width",kind:"length",min:0,max:24}],n=import("./select-menu-QS4CXU6O.js").catch(()=>null),i=["font-family","font-size","line-height","font-weight","text-align","color"];function r(e){if(/^#[\da-f]{6}$/i.test(e))return e;if(/^#[\da-f]{3}$/i.test(e))return`#${[...e.slice(1)].map(e=>e+e).join("")}`;let t=e.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);return t?`#${t.slice(1,4).map(e=>Number(e).toString(16).padStart(2,"0")).join("")}`:"#000000"}function o(e){let t=e.match(/^rgba\(.*,\s*([\d.]+)\)$/)?.[1];return void 0===t?/^rgb\(/.test(e)?r(e):e||"transparent":Number(t)?e:"transparent"}function l(e,t){let n=getComputedStyle(t).getPropertyValue(e.property).trim();if("color"===e.kind)return o(n);if("length"===e.kind||"size"===e.kind){let t=n.match(/^(-?\d+(?:\.\d+)?)px$/);return t?String(Math.round(10*Number(t[1]))/10):"size"===e.kind?n||"auto":"0"}return n}function d(e,t){let{element:n}=t,i=document.createElement("div");i.className=`design-field design-field--${e.kind}`,i.dataset.fieldProperty=e.property,i.toggleAttribute("data-wide",!!e.wide);let o="select"===e.kind?document.createElement("select"):document.createElement("input");if(o instanceof HTMLSelectElement)for(let t of e.values??[]){let e=document.createElement("option");e.value=e.textContent=t,o.append(e)}else o.type="length"===e.kind?"number":"text",o.autocomplete="off",o.spellcheck=!1,o.placeholder=e.placeholder??"","length"===e.kind&&(o.min=String(e.min??0),o.max=String(e.max??1e3),o.setAttribute("inputmode","decimal"));if(o.dataset.property=e.property,o.setAttribute("aria-label",e.label),o.title=e.label,o.value=l(e,n),o instanceof HTMLSelectElement&&!o.value){let t=document.createElement("option");t.value=t.textContent=l(e,n),o.prepend(t),o.value=t.value}let d=()=>t.begin(o,e.property),a=()=>{t.apply(o,e.property,function(e,t){let n=t.value.trim();if("color"===e.kind){let t=document.createElement("span").style;return t.setProperty(e.property,n),t.getPropertyValue(e.property)?n:null}if("length"===e.kind){if(!n)return null;let t=Number(n);return!Number.isFinite(t)||t<(e.min??-200)||t>(e.max??1e3)?null:`${t}px`}return"size"===e.kind||"line-height"===e.property?/^(auto|normal|(?:\d+(?:\.\d+)?)(?:px|%|vw|vh|rem|em)?)$/.test(n)?"size"===e.kind&&/^[\d.]+$/.test(n)?`${n}px`:n:null:n}(e,o)),t.commit(o,e.property,!1)},p=()=>t.commit(o,e.property);if(o.addEventListener("focus",d),o.addEventListener("input",a),o.addEventListener("change",p),o.addEventListener("blur",p),"color"===e.kind){let t=document.createElement("input");t.type="color",t.setAttribute("aria-label",`${e.label} picker`);let n=()=>{t.value=r(o.value)};n(),t.addEventListener("pointerdown",d),t.addEventListener("focus",d),t.addEventListener("input",()=>{o.value=t.value,a()}),t.addEventListener("change",p),o.addEventListener("input",n),i.append(t)}if(e.glyph){let t=t=>{let i=o.value.trim().match(/^(-?\d*\.?\d+)([a-z%]*)$/i),r=i?i[2]:"text"===e.kind?"px":"",l=i?Number(i[1]):parseFloat(getComputedStyle(n).getPropertyValue(e.property))||0,d=Math.round(10*(l+t*("text"!==e.kind||r?1:.1)))/10;"text"!==e.kind&&(d=Math.min(e.max??1e4,Math.max(e.min??0,d))),o.value=`${d}${r}`,a()},r=document.createElement("span");r.className="design-field__glyph",r.setAttribute("aria-hidden","true"),r.title=`${e.label} · drag to adjust`,e.glyph.length>1?r.innerHTML=`<svg viewBox="0 0 12 12"><path d="${e.glyph}"/></svg>`:r.textContent=e.glyph,r.addEventListener("pointerdown",e=>{e.preventDefault(),d(),r.setPointerCapture?.(e.pointerId);let n=e.clientX,i=e=>{let i=Math.trunc((e.clientX-n)/2);i&&(n+=2*i,t(i*(e.shiftKey?10:1)))},o=()=>{r.removeEventListener("pointermove",i),p()};r.addEventListener("pointermove",i),r.addEventListener("pointerup",o,{once:!0}),r.addEventListener("pointercancel",o,{once:!0})}),o.addEventListener("keydown",e=>{"ArrowUp"!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),t(("ArrowUp"===e.key?1:-1)*(e.shiftKey?10:1)))}),i.append(r)}return o instanceof HTMLInputElement&&o.addEventListener("keydown",e=>{"Enter"===e.key&&o.blur()}),i.append(o),i}function a(e,n,i,r=[]){let o=document.createElement("section");o.className="design-section";let l=document.createElement("div");if(l.className="design-section__tools",l.append(...r),!i){let e=document.createElement("span");return e.className="design-section__title",e.textContent=n,o.append(e,l),o}let a=document.createElement("details");a.className="design-group",a.open=!e.collapsed.has(n);let p=document.createElement("summary");p.textContent=n;let s=document.createElement("div");s.className="design-grid";for(let n of i){let i=t.find(e=>e.property===n);s.append(d(e.element instanceof SVGElement&&"color"===n?{...i,label:"Color"}:i,e))}return a.append(p,s),a.addEventListener("toggle",()=>{a.isConnected&&(a.open?e.collapsed.delete(n):e.collapsed.add(n))}),o.append(l,a),o}function p(e,t){let{element:r,changed:l}=t;n.then(n=>n?.attach(e,t.element));let d=getComputedStyle(r);if(r instanceof SVGElement)return void e.append(a(t,"Layout",r instanceof SVGSVGElement?["width","height","display"]:["display"]),a(t,"Appearance",["color","fill","stroke","stroke-width"]));let p=e=>e.some(e=>l?.has(e)),s=[...r.childNodes].some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim())||/(?:^|;)\s*(?:color|font|line-height|text-align)/.test(r.getAttribute("style")??"")||p(i),c=/flex|grid/.test(d.display)||p(["gap"]),g="transparent"!==o(d.backgroundColor)||p(["background-color"]),u=["top","right","bottom","left"].some(e=>parseFloat(d.getPropertyValue(`border-${e}-width`))>0&&"none"!==d.getPropertyValue(`border-${e}-style`))||p(["border","border-width","border-style","border-color"]),f=(n,i,r,o)=>function(e,t,n){let i=document.createElement("button");return i.type="button",i.title=e,i.setAttribute("aria-label",e),i.textContent=t,i.addEventListener("click",n),i}(`Add ${n}`,"+",()=>{let n=document.createElement("input");t.begin(n,i),t.apply(n,i,r),t.commit(n,i),t.rerender(),e.querySelector(`[data-property="${o}"]`)?.focus()});e.append(a(t,"Layout",["width","height","padding",...c?["gap"]:[],"margin",...u?[]:["border-radius"],"display"])),s&&e.append(a(t,"Typography",i,[t.editText])),e.append(g?a(t,"Fill",["background-color"]):a(t,"Fill",null,[f("fill","background-color","#ffffff","background-color")]),u?a(t,"Border",["border-width","border-radius","border-style","border-color"]):a(t,"Border",null,[f("border","border","1px solid","border-width")]))}export{e as designPanelStyles,d as fieldControl,t as fields,p as renderPanel,r as toHex,l as valueFor};
+var e='.design-inspector__controls>*+*{border-top:1px solid #ffffff0d}.design-group{padding:0 12px 10px}.design-section>.design-group{padding-bottom:12px}.design-group summary{cursor:pointer;display:flex;align-items:center;gap:4px;height:36px;color:#e9e6e1;font-size:11px;font-weight:600;list-style:none}.design-group summary::-webkit-details-marker{display:none}.design-group summary:after{content:"";width:5px;height:5px;margin:-2px 0 0 3px;border:solid #77736f;border-width:0 1.2px 1.2px 0;rotate:45deg;opacity:0;transition:opacity .12s,rotate .2s var(--ease-smooth-out)}.design-group:not([open]) summary:after{rotate:-45deg;margin:0 0 0 2px}.design-group summary:is(:hover,:focus-visible):after,.design-group:not([open]) summary:after{opacity:1}.design-group summary:focus-visible{outline-offset:-2px;border-radius:6px}.design-section{position:relative}.design-section__title{display:flex;align-items:center;height:36px;padding:0 12px;color:#898680;font-size:11px;font-weight:600}.design-section__tools{position:absolute;z-index:1;top:6px;right:8px;display:flex;gap:2px}.design-section__tools button{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:#898680;font-size:16px;line-height:1}.design-section__tools button:hover{background:#ffffff12;color:#f1efeb}.design-text-edit{font-size:0!important}.design-text-edit:before{content:"T";font:600 13px/1 Georgia,Times New Roman,serif}.design-text-edit[aria-label^=Finish]{background:#bda6ef33;color:#e6dcfb!important}.design-text-edit:disabled{opacity:.35;cursor:default}.design-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 8px}.design-field{position:relative;--lead:4px;min-width:0;height:28px;display:flex;align-items:center;border-radius:6px;background:#ffffff0a;color:#898680;transition:box-shadow .12s var(--ease-smooth-out)}.design-field:hover{box-shadow:inset 0 0 0 1px #ffffff1c}.design-field:focus-within{box-shadow:inset 0 0 0 1px #bda6ef}.design-field:has([aria-invalid=true]){box-shadow:inset 0 0 0 1px #fda29b}.design-field[data-wide]{grid-column:1/-1}.design-field:has(.design-field__glyph){--lead:22px}.design-field--color{--lead:26px}.design-field>input:not([type=color]),.design-field>select{flex:1;box-sizing:border-box;width:100%;min-width:0;height:100%;margin:0;padding:0 8px;border:0;border-radius:6px;outline:0;box-shadow:none;background:none;color:#f1efeb;font:inherit;font-size:11px;font-variant-numeric:tabular-nums;text-overflow:ellipsis}.design-field>:is(input,select):focus-visible{outline:0}.design-field input[type=number]{appearance:textfield;-moz-appearance:textfield}.design-field input::-webkit-inner-spin-button{appearance:none}.design-field__glyph{flex:none;display:grid;place-items:center;width:22px;height:100%;margin-right:-6px;color:#77736f;font-size:10px;font-weight:600;cursor:ew-resize;user-select:none;touch-action:none}.design-field__glyph:hover{color:#e9e6e1}.design-field__glyph svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.1}.design-field input[type=color]{flex:none;width:16px;height:16px;margin:0 -2px 0 6px;padding:0;border:0;border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff26;background:none;cursor:pointer}.design-field input[type=color]::-webkit-color-swatch-wrapper{padding:0}.design-field input[type=color]::-webkit-color-swatch{border:0;border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff26}.design-field input[type=color]::-moz-color-swatch{border:0;border-radius:4px}\n',t=[{property:"width",label:"Width",kind:"size",glyph:"W"},{property:"height",label:"Height",kind:"size",glyph:"H"},{property:"padding",label:"Padding",kind:"length",glyph:"M1.5 1.5h9v9h-9zM4.5 4.5h3v3h-3z",max:200},{property:"gap",label:"Gap",kind:"length",glyph:"M1.5 1.5h3v9h-3zM7.5 1.5h3v9h-3z",max:200},{property:"margin",label:"Margin",kind:"length",glyph:"M4 4h4v4H4zM1 3V1h2m6 0h2v2m0 6v2H9m-6 0H1V9",max:200},{property:"border-radius",label:"Corner radius",kind:"length",glyph:"M1.5 10.5V6A4.5 4.5 0 0 1 6 1.5h4.5",max:96},{property:"display",label:"Layout",kind:"select",values:["block","flex","grid","inline-flex","inline-grid"]},{property:"font-family",label:"Font family",kind:"text",wide:!0,placeholder:"system-ui, sans-serif"},{property:"font-size",label:"Font size",kind:"length",glyph:"M2 3V1.5h8V3M6 1.5v9m-1.5 0h3",min:1,max:160},{property:"line-height",label:"Line height",kind:"text",glyph:"M1 1.5h10M1 10.5h10M3.5 8.5 6 3l2.5 5.5",placeholder:"1.4 or 24px"},{property:"font-weight",label:"Weight",kind:"select",values:["300","400","500","600","700","800"]},{property:"text-align",label:"Alignment",kind:"select",values:["left","center","right","justify"]},{property:"color",label:"Text color",kind:"color",wide:!0},{property:"background-color",label:"Fill",kind:"color",wide:!0},{property:"border-width",label:"Border width",kind:"length",glyph:"M1 2.5h10M1 6h10M1 9.5h10",max:24},{property:"border-style",label:"Border style",kind:"select",values:["none","solid","dashed","dotted"]},{property:"border-color",label:"Border color",kind:"color"},{property:"fill",label:"Fill",kind:"color",wide:!0},{property:"stroke",label:"Stroke",kind:"color",wide:!0},{property:"stroke-width",label:"Stroke width",kind:"length",min:0,max:24}],n=import("./select-menu-QH7IVM7P.js").catch(()=>null),i=["font-family","font-size","line-height","font-weight","text-align","color"];function r(e){if(/^#[\da-f]{6}$/i.test(e))return e;if(/^#[\da-f]{3}$/i.test(e))return`#${[...e.slice(1)].map(e=>e+e).join("")}`;let t=e.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);return t?`#${t.slice(1,4).map(e=>Number(e).toString(16).padStart(2,"0")).join("")}`:"#000000"}function o(e){let t=e.match(/^rgba\(.*,\s*([\d.]+)\)$/)?.[1];return void 0===t?/^rgb\(/.test(e)?r(e):e||"transparent":Number(t)?e:"transparent"}function l(e,t){let n=getComputedStyle(t).getPropertyValue(e.property).trim();if("color"===e.kind)return o(n);if("length"===e.kind||"size"===e.kind){let t=n.match(/^(-?\d+(?:\.\d+)?)px$/);return t?String(Math.round(10*Number(t[1]))/10):"size"===e.kind?n||"auto":"0"}return n}function d(e,t){let{element:n}=t,i=document.createElement("div");i.className=`design-field design-field--${e.kind}`,i.dataset.fieldProperty=e.property,i.toggleAttribute("data-wide",!!e.wide);let o="select"===e.kind?document.createElement("select"):document.createElement("input");if(o instanceof HTMLSelectElement)for(let t of e.values??[]){let e=document.createElement("option");e.value=e.textContent=t,o.append(e)}else o.type="length"===e.kind?"number":"text",o.autocomplete="off",o.spellcheck=!1,o.placeholder=e.placeholder??"","length"===e.kind&&(o.min=String(e.min??0),o.max=String(e.max??1e3),o.setAttribute("inputmode","decimal"));if(o.dataset.property=e.property,o.setAttribute("aria-label",e.label),o.title=e.label,o.value=l(e,n),o instanceof HTMLSelectElement&&!o.value){let t=document.createElement("option");t.value=t.textContent=l(e,n),o.prepend(t),o.value=t.value}let d=()=>t.begin(o,e.property),a=()=>{t.apply(o,e.property,function(e,t){let n=t.value.trim();if("color"===e.kind){let t=document.createElement("span").style;return t.setProperty(e.property,n),t.getPropertyValue(e.property)?n:null}if("length"===e.kind){if(!n)return null;let t=Number(n);return!Number.isFinite(t)||t<(e.min??-200)||t>(e.max??1e3)?null:`${t}px`}return"size"===e.kind||"line-height"===e.property?/^(auto|normal|(?:\d+(?:\.\d+)?)(?:px|%|vw|vh|rem|em)?)$/.test(n)?"size"===e.kind&&/^[\d.]+$/.test(n)?`${n}px`:n:null:n}(e,o)),t.commit(o,e.property,!1)},p=()=>t.commit(o,e.property);if(o.addEventListener("focus",d),o.addEventListener("input",a),o.addEventListener("change",p),o.addEventListener("blur",p),"color"===e.kind){let t=document.createElement("input");t.type="color",t.setAttribute("aria-label",`${e.label} picker`);let n=()=>{t.value=r(o.value)};n(),t.addEventListener("pointerdown",d),t.addEventListener("focus",d),t.addEventListener("input",()=>{o.value=t.value,a()}),t.addEventListener("change",p),o.addEventListener("input",n),i.append(t)}if(e.glyph){let t=t=>{let i=o.value.trim().match(/^(-?\d*\.?\d+)([a-z%]*)$/i),r=i?i[2]:"text"===e.kind?"px":"",l=i?Number(i[1]):parseFloat(getComputedStyle(n).getPropertyValue(e.property))||0,d=Math.round(10*(l+t*("text"!==e.kind||r?1:.1)))/10;"text"!==e.kind&&(d=Math.min(e.max??1e4,Math.max(e.min??0,d))),o.value=`${d}${r}`,a()},r=document.createElement("span");r.className="design-field__glyph",r.setAttribute("aria-hidden","true"),r.title=`${e.label} · drag to adjust`,e.glyph.length>1?r.innerHTML=`<svg viewBox="0 0 12 12"><path d="${e.glyph}"/></svg>`:r.textContent=e.glyph,r.addEventListener("pointerdown",e=>{e.preventDefault(),d(),r.setPointerCapture?.(e.pointerId);let n=e.clientX,i=e=>{let i=Math.trunc((e.clientX-n)/2);i&&(n+=2*i,t(i*(e.shiftKey?10:1)))},o=()=>{r.removeEventListener("pointermove",i),p()};r.addEventListener("pointermove",i),r.addEventListener("pointerup",o,{once:!0}),r.addEventListener("pointercancel",o,{once:!0})}),o.addEventListener("keydown",e=>{"ArrowUp"!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),t(("ArrowUp"===e.key?1:-1)*(e.shiftKey?10:1)))}),i.append(r)}return o instanceof HTMLInputElement&&o.addEventListener("keydown",e=>{"Enter"===e.key&&o.blur()}),i.append(o),i}function a(e,n,i,r=[]){let o=document.createElement("section");o.className="design-section";let l=document.createElement("div");if(l.className="design-section__tools",l.append(...r),!i){let e=document.createElement("span");return e.className="design-section__title",e.textContent=n,o.append(e,l),o}let a=document.createElement("details");a.className="design-group",a.open=!e.collapsed.has(n);let p=document.createElement("summary");p.textContent=n;let s=document.createElement("div");s.className="design-grid";for(let n of i){let i=t.find(e=>e.property===n);s.append(d(e.element instanceof SVGElement&&"color"===n?{...i,label:"Color"}:i,e))}return a.append(p,s),a.addEventListener("toggle",()=>{a.isConnected&&(a.open?e.collapsed.delete(n):e.collapsed.add(n))}),o.append(l,a),o}function p(e,t){let{element:r,changed:l}=t;n.then(n=>n?.attach(e,t.element));let d=getComputedStyle(r);if(r instanceof SVGElement)return void e.append(a(t,"Layout",r instanceof SVGSVGElement?["width","height","display"]:["display"]),a(t,"Appearance",["color","fill","stroke","stroke-width"]));let p=e=>e.some(e=>l?.has(e)),s=[...r.childNodes].some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim())||/(?:^|;)\s*(?:color|font|line-height|text-align)/.test(r.getAttribute("style")??"")||p(i),c=/flex|grid/.test(d.display)||p(["gap"]),g="transparent"!==o(d.backgroundColor)||p(["background-color"]),u=["top","right","bottom","left"].some(e=>parseFloat(d.getPropertyValue(`border-${e}-width`))>0&&"none"!==d.getPropertyValue(`border-${e}-style`))||p(["border","border-width","border-style","border-color"]),f=(n,i,r,o)=>function(e,t,n){let i=document.createElement("button");return i.type="button",i.title=e,i.setAttribute("aria-label",e),i.textContent=t,i.addEventListener("click",n),i}(`Add ${n}`,"+",()=>{let n=document.createElement("input");t.begin(n,i),t.apply(n,i,r),t.commit(n,i),t.rerender(),e.querySelector(`[data-property="${o}"]`)?.focus()});e.append(a(t,"Layout",["width","height","padding",...c?["gap"]:[],"margin",...u?[]:["border-radius"],"display"])),s&&e.append(a(t,"Typography",i,[t.editText])),e.append(g?a(t,"Fill",["background-color"]):a(t,"Fill",null,[f("fill","background-color","#ffffff","background-color")]),u?a(t,"Border",["border-width","border-radius","border-style","border-color"]):a(t,"Border",null,[f("border","border","1px solid","border-width")]))}export{e as designPanelStyles,d as fieldControl,t as fields,p as renderPanel,r as toHex,l as valueFor};

package/dist/design-popup.d.ts

@@ -1,6 +1,5 @@
+export { previewStyle } from "./design-preview.js";
 export declare const popupStyles = ".komo-select,.komo-tokens{position:absolute;z-index:20;box-sizing:border-box;border-radius:10px;background:#232323;box-shadow:0 0 0 1px #ffffff14,0 12px 32px #0008;color:#d9d6d1;font-size:11px;font-weight:400;line-height:1.25;text-align:left;cursor:default;transform-origin:top;animation:komo-popup-in var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)) backwards}.komo-select[data-up],.komo-tokens[data-up]{transform-origin:bottom}@keyframes komo-popup-in{from{opacity:0;transform:scale(.97)}}@media (prefers-reduced-motion:reduce){.komo-select,.komo-tokens{animation:none}}";
-/** A transient declaration without changing bindings, proposals or history. */
-export declare function previewStyle(element: Element, property: string, value: string): () => void;
 /** The nearest scrolling or clipping ancestor, bounded by the viewport. */
 export declare function popupBounds(from: Element): {
     top: number;

package/dist/design-preview.d.ts

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

package/dist/design-system.d.ts

@@ -54,7 +54,7 @@ export interface TokenAdapter {
      */
     describe?(element: Element, property: string, from: TokenUsage, to: DesignToken): string;
 }
-/** Theme state: axis id → option id, e.g. { mode: "dark", product: "track" }. */
+/** Theme state: axis id → option id, e.g. { mode: "dark", product: "docs" }. */
 export type ThemeState = Record<string, string>;
 export interface ThemeOption {
     id: string;
@@ -74,6 +74,26 @@ export interface ThemeAxis {
     apply(optionId: string): void;
 }
 export type ComponentPropValue = string | number | boolean | null;
+/** The declared, safe subset of a component's runtime props. */
+export interface ComponentProperty {
+    name: string;
+    kind: "string" | "number" | "boolean" | "enum" | "unsupported";
+    required: boolean;
+    values?: Array<string | number | boolean>;
+    typeLabel: string;
+}
+export interface ComponentEditor {
+    schema: ComponentProperty[];
+    read(): Record<string, string | number | boolean | undefined>;
+    /** Apply through the host renderer/state callback, preserving other props. */
+    apply(next: Record<string, string | number | boolean | undefined>): void;
+    /** Stop retaining these overrides after the inspector restores their baseline values. */
+    release?(properties: string[]): void;
+    /** Notify after the renderer commits, so computed controls follow the rendered preview. */
+    subscribe?(listener: () => void): () => void;
+    /** False when the original component unmounts; never retarget another instance. */
+    available?(): boolean;
+}
 /** What the app knows about the component that renders an element. */
 export interface ComponentIdentity {
     /** Display name, e.g. "Button". Prefer the design-system or Figma Code Connect name. */
@@ -98,6 +118,8 @@ export interface ComponentAdapter {
      * The Design panel shows it under the picked element's other controls.
      */
     panel?(identity: ComponentIdentity): HTMLElement | null;
+    /** Optional runtime preview editor. Source files are never changed. */
+    editor?(identity: ComponentIdentity): ComponentEditor | null;
 }
 export interface DesignSystem {
     tokens?: TokenAdapter;

package/dist/index.js

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

package/dist/{inline-text-editor-AMTG5O25.js → inline-text-editor-OMRCO3H3.js}

@@ -1 +1 @@
-var e="script,style,svg,input,textarea,select,[data-private],[data-sensitive]";function t(e){let t=document.createTreeWalker(e,NodeFilter.SHOW_TEXT),n=[];for(;t.nextNode();)n.push(t.currentNode);return n}function n(e,t,n){if(n&&e.childElementCount)for(let[e,t]of n)e.data=t;else e.textContent=t}function a(){let e=new Map,t=new Map,a=[],r=new Map;return{record(n){!n.reactProp&&n.before!==n.after&&(e.has(n.element)||(e.set(n.element,n.before),t.set(n.element,n.nodes)),a.push(n))},remember(t,n){e.has(t)||e.set(t,n)},original:t=>e.get(t),reconcile(t,n){e.get(t)===n&&e.delete(t)},reset(r){let o=e.get(r);void 0!==o&&n(r,o,t.get(r)),e.delete(r);for(let e=a.length-1;e>=0;e--)a[e].element===r&&a.splice(e,1)},proposal(t){let n=e.get(t),a=t.textContent??"";return void 0!==n&&n!==a?`Proposed inline text change (preview only)\n- Text: ${JSON.stringify(n)} → ${JSON.stringify(a)}\n- Source markup is unchanged; refresh resets this preview.`:void 0},restoreAll(){for(let[a,r]of e)n(a,r,t.get(a));e.clear(),a.length=0},showBefore(a){if(a)for(let[a,o]of e){let e=t.get(a);r.set(a,[a.textContent??"",e?.map(([e])=>[e,e.data])]),n(a,o,e)}else for(let[e,[t,a]]of r)n(e,t,a);a||r.clear()},undo(){let t=a.pop();return t?(n(t.element,t.before,t.nodes),e.get(t.element)===t.before&&e.delete(t.element),t.element):null}}}function r(e){let t=a(),n=null,r=!1;function o(t=!1){let a=n;a&&(n=null,a.finish(t),e.onChange())}return{get element(){return n?.element??null},get busy(){return r},isEditing:e=>!!n&&n.element===e,toggle:async function(a){let l=e.selected();if(n&&n.element===l)return void o();if(!l||!e.active()||r||n)return;let s=i(l);if(s)e.status.textContent=s;else{r=!0,e.status.textContent="Loading inline text editor…",e.onChange();try{let r=await d(l,{loadReactBridge:async()=>await import("./react-props-panel-IU7XYCCH.js"),onFinish(n,a){a||n.reactProp||n.before===n.after?n.reactProp&&(e.status.textContent="React state preview · resets on exit"):(t.record(n),e.onCommit(l),e.status.textContent="Text preview · resets on exit")}});r?e.active()&&e.selected()===l?(n=r,a&&function(e,t,n){let a=document.caretPositionFromPoint?.(t,n),r=a?document.createRange():document.caretRangeFromPoint?.(t,n);if(a&&r&&r.setStart(a.offsetNode,a.offset),!r||!e.contains(r.startContainer))return;r.collapse(!0);let o=document.getSelection();o?.removeAllRanges(),o?.addRange(r)}(l,a.clientX,a.clientY),e.status.textContent=l.hasAttribute("data-komo-text-prop")?"React state preview · resets on exit":"Editing text · preview only"):r.finish(!0):e.status.textContent="This text couldn't be connected to its component prop."}catch{e.status.textContent="Inline text editing is unavailable."}finally{r=!1,e.onChange()}}},finish:o,handleKey(e){if(!n||!e.composedPath().includes(n.element)||!n.handleKey(e))return!1;let t=n.element;return o("Escape"===e.key),t.blur(),!0},hasChanges:e=>void 0!==t.original(e),undo(){let n=t.undo();return e.onChange(),n},reset(n){t.reset(n),e.onChange()},reconcile(n,a){t.reconcile(n,a),e.onChange()},proposal:e=>t.proposal(e),restoreAll(){t.restoreAll()},showBefore:t.showBefore}}function o(e){let t=r(e);return e.button.addEventListener("click",e=>{t.toggle(e)}),t}function i(n){return n.matches("input,textarea,select")?"Form fields can't be edited as text.":n.matches("script,style,svg,canvas,video,audio,iframe")?"Graphics, media, and frames can't be edited.":n.closest("[data-private],[data-sensitive]")?"This text is marked private, so it stays read-only.":n.closest("[contenteditable]")?"This text is already editable on the page.":t(n).some(t=>t.data.trim()&&!t.parentElement?.closest(e))?null:"No text here. Double-click the text itself."}function l(e){return!i(e)}function s(e){let t=e.textContent??"",n=document.getSelection(),a=n?.rangeCount?n.getRangeAt(0):null;return a&&e.contains(a.commonAncestorContainer)?a.startContainer===e?Math.min([...e.childNodes].slice(0,a.startOffset).reduce((e,t)=>e+(t.textContent?.length??0),0),t.length):a.startContainer.nodeType===Node.TEXT_NODE?Math.min(a.startOffset,t.length):t.length:-1}function c(e,t){let n=e.firstChild,a=document.getSelection();if(!n||!a)return;let r=document.createRange();r.setStart(n,Math.min(t,n.textContent?.length??0)),r.collapse(!0),a.removeAllRanges(),a.addRange(r)}async function d(a,r){if(!l(a))return null;let o=null,i=null;if(a.dataset.komoTextProp&&(o=await r.loadReactBridge(),i=o.beginReactTextEdit(a),!i))return null;let d=i?.before??(a.textContent??"").slice(0,500),u=!i&&a.childElementCount>0,g=u?t(a).map(e=>[e,e.data]):void 0,p=a.getAttribute("role"),f=a.getAttribute("aria-label"),m=a.getAttribute("aria-multiline"),h=a.getAttribute("spellcheck"),x=new AbortController,C=!1;let v=-1,b=new MutationObserver(()=>{v>=0&&c(a,v)}),T=()=>{u||(a.childElementCount&&(a.textContent=a.textContent??""),(a.textContent??"").length>500&&(a.textContent=(a.textContent??"").slice(0,500)),i&&o&&(v=s(a),o.previewReactTextEdit(a,i.propName,a.textContent??"")||(a.textContent=d)))},E=(t,n)=>{let r=t.startContainer;if(r!==t.endContainer||!(r instanceof Text)||!a.contains(r)||r.parentElement?.closest(e))return;let o=t.endOffset-t.startOffset,i=n.replace(/[\r\n]+/g," ").slice(0,Math.max(0,500-(a.textContent??"").length+o));r.replaceData(t.startOffset,o,i);let l=document.createRange();l.setStart(r,t.startOffset+i.length);let s=document.getSelection();s?.removeAllRanges(),s?.addRange(l)};a.addEventListener("beforeinput",e=>{if(v=-1,!u||"insertCompositionText"===e.inputType)return;e.preventDefault();let t=e.getTargetRanges()[0],n=e.inputType;t&&(n.startsWith("delete")||"insertText"===n||"insertReplacementText"===n)&&E(t,n.startsWith("delete")?"":e.data??e.dataTransfer?.getData("text/plain")??"")},{signal:x.signal}),a.addEventListener("input",T,{signal:x.signal}),i&&b.observe(a,{childList:!0,characterData:!0,subtree:!0}),a.addEventListener("paste",e=>{e.preventDefault();let t=e.clipboardData?.getData("text/plain")??"",n=document.getSelection();u?n?.rangeCount&&E(n.getRangeAt(0),t):(function(e,t){let n=s(e);if(n<0)return;let a=e.textContent??"",r=t.slice(0,Math.max(0,500-a.length));e.textContent=a.slice(0,n)+r+a.slice(n),c(e,n+r.length)}(a,t.replace(/[\r\n]+/g," ").slice(0,500)),T())},{signal:x.signal}),a.addEventListener("drop",e=>e.preventDefault(),{signal:x.signal}),a.setAttribute("contenteditable","true"),a.setAttribute("role","textbox"),a.setAttribute("aria-label","Inline text preview"),a.setAttribute("aria-multiline","false"),a.dataset.komoInlineEditing="true",a.spellcheck=!1,a.focus({preventScroll:!0});let y=document.getSelection(),R=document.createRange();return R.selectNodeContents(a),R.collapse(!1),y?.removeAllRanges(),y?.addRange(R),{element:a,finish(e=!1){if(C)return;C=!0,x.abort(),b.disconnect(),!u&&a.childElementCount&&(a.textContent=a.textContent??"");let t=(a.textContent??"").slice(0,500);(function(){a.removeAttribute("contenteditable"),a.removeAttribute("data-komo-inline-editing");for(let[e,t]of[["role",p],["aria-label",f],["aria-multiline",m],["spellcheck",h]])null===t?a.removeAttribute(e):a.setAttribute(e,t)})(),e?(i&&o&&o.cancelReactTextEdit(a,i.propName,d),n(a,d,g)):i&&o&&o.finishReactTextEdit(a,i.propName,d,t),r.onFinish({element:a,before:d,after:t,nodes:g,...i?{reactProp:i.propName}:{}},e)},handleKey:e=>!e.isComposing&&(("Enter"===e.key||"Escape"===e.key)&&(e.preventDefault(),e.stopImmediatePropagation(),!0))}}export{o as bindInlineTextTools,l as canEditText,r as createInlineTextTools,a as createTextPreviewHistory,d as startInlineTextEditor,i as textEditBlocker};
+var e="script,style,svg,input,textarea,select,[data-private],[data-sensitive]";function t(e){let t=document.createTreeWalker(e,NodeFilter.SHOW_TEXT),n=[];for(;t.nextNode();)n.push(t.currentNode);return n}function n(e,t,n){if(n&&e.childElementCount)for(let[e,t]of n)e.data=t;else e.textContent=t}function a(){let e=new Map,t=new Map,a=[],r=new Map;return{record(n){!n.reactProp&&n.before!==n.after&&(e.has(n.element)||(e.set(n.element,n.before),t.set(n.element,n.nodes)),a.push(n))},remember(t,n){e.has(t)||e.set(t,n)},original:t=>e.get(t),reconcile(t,n){e.get(t)===n&&e.delete(t)},reset(r){let o=e.get(r);void 0!==o&&n(r,o,t.get(r)),e.delete(r);for(let e=a.length-1;e>=0;e--)a[e].element===r&&a.splice(e,1)},proposal(t){let n=e.get(t),a=t.textContent??"";return void 0!==n&&n!==a?`Proposed inline text change (preview only)\n- Text: ${JSON.stringify(n)} → ${JSON.stringify(a)}\n- Source markup is unchanged; refresh resets this preview.`:void 0},restoreAll(){for(let[a,r]of e)n(a,r,t.get(a));e.clear(),a.length=0},showBefore(a){if(a)for(let[a,o]of e){let e=t.get(a);r.set(a,[a.textContent??"",e?.map(([e])=>[e,e.data])]),n(a,o,e)}else for(let[e,[t,a]]of r)n(e,t,a);a||r.clear()},undo(){let t=a.pop();return t?(n(t.element,t.before,t.nodes),e.get(t.element)===t.before&&e.delete(t.element),t.element):null}}}function r(e){let t=a(),n=null,r=!1;function o(t=!1){let a=n;a&&(n=null,a.finish(t),e.onChange())}return{get element(){return n?.element??null},get busy(){return r},isEditing:e=>!!n&&n.element===e,toggle:async function(a){let l=e.selected();if(n&&n.element===l)return void o();if(!l||!e.active()||r||n)return;let s=i(l);if(s)e.status.textContent=s;else{r=!0,e.status.textContent="Loading inline text editor…",e.onChange();try{let r=await d(l,{loadReactBridge:async()=>await import("./react-props-panel-Y7F2P3AG.js"),onFinish(n,a){a||n.reactProp||n.before===n.after?n.reactProp&&(e.status.textContent="React state preview · resets on exit"):(t.record(n),e.onCommit(l),e.status.textContent="Text preview · resets on exit")}});r?e.active()&&e.selected()===l?(n=r,a&&function(e,t,n){let a=document.caretPositionFromPoint?.(t,n),r=a?document.createRange():document.caretRangeFromPoint?.(t,n);if(a&&r&&r.setStart(a.offsetNode,a.offset),!r||!e.contains(r.startContainer))return;r.collapse(!0);let o=document.getSelection();o?.removeAllRanges(),o?.addRange(r)}(l,a.clientX,a.clientY),e.status.textContent=l.hasAttribute("data-komo-text-prop")?"React state preview · resets on exit":"Editing text · preview only"):r.finish(!0):e.status.textContent="This text couldn't be connected to its component prop."}catch{e.status.textContent="Inline text editing is unavailable."}finally{r=!1,e.onChange()}}},finish:o,handleKey(e){if(!n||!e.composedPath().includes(n.element)||!n.handleKey(e))return!1;let t=n.element;return o("Escape"===e.key),t.blur(),!0},hasChanges:e=>void 0!==t.original(e),undo(){let n=t.undo();return e.onChange(),n},reset(n){t.reset(n),e.onChange()},reconcile(n,a){t.reconcile(n,a),e.onChange()},proposal:e=>t.proposal(e),restoreAll(){t.restoreAll()},showBefore:t.showBefore}}function o(e){let t=r(e);return e.button.addEventListener("click",e=>{t.toggle(e)}),t}function i(n){return n.matches("input,textarea,select")?"Form fields can't be edited as text.":n.matches("script,style,svg,canvas,video,audio,iframe")?"Graphics, media, and frames can't be edited.":n.closest("[data-private],[data-sensitive]")?"This text is marked private, so it stays read-only.":n.closest("[contenteditable]")?"This text is already editable on the page.":t(n).some(t=>t.data.trim()&&!t.parentElement?.closest(e))?null:"No text here. Double-click the text itself."}function l(e){return!i(e)}function s(e){let t=e.textContent??"",n=document.getSelection(),a=n?.rangeCount?n.getRangeAt(0):null;return a&&e.contains(a.commonAncestorContainer)?a.startContainer===e?Math.min([...e.childNodes].slice(0,a.startOffset).reduce((e,t)=>e+(t.textContent?.length??0),0),t.length):a.startContainer.nodeType===Node.TEXT_NODE?Math.min(a.startOffset,t.length):t.length:-1}function c(e,t){let n=e.firstChild,a=document.getSelection();if(!n||!a)return;let r=document.createRange();r.setStart(n,Math.min(t,n.textContent?.length??0)),r.collapse(!0),a.removeAllRanges(),a.addRange(r)}async function d(a,r){if(!l(a))return null;let o=null,i=null;if(a.dataset.komoTextProp&&(o=await r.loadReactBridge(),i=o.beginReactTextEdit(a),!i))return null;let d=i?.before??(a.textContent??"").slice(0,500),u=!i&&a.childElementCount>0,g=u?t(a).map(e=>[e,e.data]):void 0,p=a.getAttribute("role"),f=a.getAttribute("aria-label"),m=a.getAttribute("aria-multiline"),h=a.getAttribute("spellcheck"),x=new AbortController,C=!1;let v=-1,b=new MutationObserver(()=>{v>=0&&c(a,v)}),T=()=>{u||(a.childElementCount&&(a.textContent=a.textContent??""),(a.textContent??"").length>500&&(a.textContent=(a.textContent??"").slice(0,500)),i&&o&&(v=s(a),o.previewReactTextEdit(a,i.propName,a.textContent??"")||(a.textContent=d)))},E=(t,n)=>{let r=t.startContainer;if(r!==t.endContainer||!(r instanceof Text)||!a.contains(r)||r.parentElement?.closest(e))return;let o=t.endOffset-t.startOffset,i=n.replace(/[\r\n]+/g," ").slice(0,Math.max(0,500-(a.textContent??"").length+o));r.replaceData(t.startOffset,o,i);let l=document.createRange();l.setStart(r,t.startOffset+i.length);let s=document.getSelection();s?.removeAllRanges(),s?.addRange(l)};a.addEventListener("beforeinput",e=>{if(v=-1,!u||"insertCompositionText"===e.inputType)return;e.preventDefault();let t=e.getTargetRanges()[0],n=e.inputType;t&&(n.startsWith("delete")||"insertText"===n||"insertReplacementText"===n)&&E(t,n.startsWith("delete")?"":e.data??e.dataTransfer?.getData("text/plain")??"")},{signal:x.signal}),a.addEventListener("input",T,{signal:x.signal}),i&&b.observe(a,{childList:!0,characterData:!0,subtree:!0}),a.addEventListener("paste",e=>{e.preventDefault();let t=e.clipboardData?.getData("text/plain")??"",n=document.getSelection();u?n?.rangeCount&&E(n.getRangeAt(0),t):(function(e,t){let n=s(e);if(n<0)return;let a=e.textContent??"",r=t.slice(0,Math.max(0,500-a.length));e.textContent=a.slice(0,n)+r+a.slice(n),c(e,n+r.length)}(a,t.replace(/[\r\n]+/g," ").slice(0,500)),T())},{signal:x.signal}),a.addEventListener("drop",e=>e.preventDefault(),{signal:x.signal}),a.setAttribute("contenteditable","true"),a.setAttribute("role","textbox"),a.setAttribute("aria-label","Inline text preview"),a.setAttribute("aria-multiline","false"),a.dataset.komoInlineEditing="true",a.spellcheck=!1,a.focus({preventScroll:!0});let y=document.getSelection(),A=document.createRange();return A.selectNodeContents(a),A.collapse(!1),y?.removeAllRanges(),y?.addRange(A),{element:a,finish(e=!1){if(C)return;C=!0,x.abort(),b.disconnect(),!u&&a.childElementCount&&(a.textContent=a.textContent??"");let t=(a.textContent??"").slice(0,500);(function(){a.removeAttribute("contenteditable"),a.removeAttribute("data-komo-inline-editing");for(let[e,t]of[["role",p],["aria-label",f],["aria-multiline",m],["spellcheck",h]])null===t?a.removeAttribute(e):a.setAttribute(e,t)})(),e?(i&&o&&o.cancelReactTextEdit(a,i.propName,d),n(a,d,g)):i&&o&&o.finishReactTextEdit(a,i.propName,d,t),r.onFinish({element:a,before:d,after:t,nodes:g,...i?{reactProp:i.propName}:{}},e)},handleKey:e=>!e.isComposing&&(("Enter"===e.key||"Escape"===e.key)&&(e.preventDefault(),e.stopImmediatePropagation(),!0))}}export{o as bindInlineTextTools,l as canEditText,r as createInlineTextTools,a as createTextPreviewHistory,d as startInlineTextEditor,i as textEditBlocker};