@hazem3500/palette 0.9.108 → 0.9.110

package/dist/chunk-VX6XCU4E.js

@@ -0,0 +1 @@
+function t(t,e=r()){let a=[t.ctrl&&"Control",t.alt&&"Alt",t.shift&&"Shift",t.meta&&"Meta",n(t.key)].filter(Boolean),o=e?{Control:"⌃",Alt:"⌥",Shift:"⇧",Meta:"⌘"}:{Control:"Ctrl",Meta:"Meta"};return{aria:a.join("+"),spoken:a.map(t=>"Meta"===t&&e?"Command":"Alt"===t&&e?"Option":t).join(" + "),keys:a.map(t=>o[t]??{ArrowLeft:"←",ArrowRight:"→",ArrowUp:"↑",ArrowDown:"↓",Enter:"↵",Escape:"Esc"}[t]??t)}}function e(e,r,o="surface"){let n=t(e,r);return a(n.keys,n.spoken,o)}function a(t,e,a="surface"){let r=document.createElement("span");r.className="palette-kbd",r.dataset.variant=a,r.setAttribute("role","img"),r.setAttribute("aria-label",e);for(let e of t){let t=document.createElement("kbd");t.textContent=e,t.setAttribute("aria-hidden","true"),r.append(t)}return r}var r=()=>/mac|iphone|ipad/i.test(navigator.userAgentData?.platform||navigator.platform),o=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Enter","Escape","Tab","Backspace","Delete","Home","End","PageUp","PageDown"],n=t=>1===t.length?t.toUpperCase():o.find(e=>e.toLowerCase()===t.toLowerCase())??t;export{r as a,t as b,e as c,a as d};

package/dist/color-editor-QPJQD36F.js

@@ -0,0 +1 @@
+import{k as e}from"./chunk-HLXSRXTK.js";import"./chunk-PF4NYFZK.js";import"./chunk-4FX5IS2U.js";import"./chunk-XOMOONGK.js";import{E as t}from"./chunk-4HBBEVFK.js";var r=["Hex","RGB","HSL","HSB","CSS"],o=(e,t,r)=>Math.min(r,Math.max(t,e)),{round:a}=Math,l=e=>a(100*e),n=e=>a(e).toString(16).padStart(2,"0");function i(e,t,r){let a=a=>{let l=(a+e/60)%6;return 255*(r-r*t*o(Math.min(l,4-l),0,1))};return[a(5),a(3),a(1)]}function p(e,t,r){let a=t*Math.min(r,1-r),l=t=>{let l=(t+e/30)%12;return 255*(r-a*o(Math.min(l-3,9-l),-1,1))};return[l(0),l(8),l(4)]}var s=(e,t,r,o,a)=>a?60*(o===e?((t-r)/a+6)%6:o===t?(r-e)/a+2:(e-t)/a+4):0;function c(e,t,r){let o=Math.max(e,t,r),a=o-Math.min(e,t,r);return[s(e,t,r,o,a),o?a/o:0,o/255]}function u(e,t,r){let o=Math.max(e,t,r),a=Math.min(e,t,r),l=o-a,n=(o+a)/510;return[s(e,t,r,o,l),l?l/255/(1-Math.abs(2*n-1)):0,n]}function d(e){let r=e.trim().toLowerCase();if("transparent"===r)return[0,0,0,0];let a=/^#?([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/.exec(r)?.[1];if(a){let e=a.length<5?[...a].map(e=>e+e).join(""):a,t=t=>parseInt(e.slice(t,t+2),16);return[t(0),t(2),t(4),e.length>6?t(6)/255:1]}let l=/^(rgb|hsl|hs[bv])a?\(([^)]*)\)$/.exec(r);if(l){let e=l[2].split(/[\s,/]+/).filter(Boolean),t=(e="1",t=1)=>/^-?(\d+\.?\d*|\.\d+)(%|deg)?$/.test(e)?parseFloat(e)/(e.endsWith("%")?100:1)*(e.endsWith("%")?t:1):NaN;if(e.length<3||e.length>4)return;let[r,a,n]="rgb"===l[1]?e.slice(0,3).map(e=>t(e,255)):[t(e[0]),parseFloat(e[1])/100,parseFloat(e[2])/100],s="rgb"===l[1]?[r,a,n]:("hsl"===l[1]?p:i)((r%360+360)%360,o(a,0,1),o(n,0,1)),c=t(e[3]);return[...s,c].some(Number.isNaN)?void 0:[...s.map(e=>o(e,0,255)),o(c,0,1)]}if(/var\(|currentcolor|^$/.test(r)||!globalThis.CSS?.supports?.("color",r))return;let n=t("canvas").getContext?.("2d",{willReadFrequently:!0});if(!n)return;n.fillStyle=r,n.fillRect(0,0,1,1);let[s,c,u,d]=n.getImageData(0,0,1,1).data;return[s,c,u,d/255]}var f=(e,t=!1)=>e<1?`${t?",":" /"} ${l(e)}%`:"";function h([e,t,r,o],i,p){if("RGB"===i||"CSS"===i)return`rgb(${a(e)} ${a(t)} ${a(r)}${f(o)})`;if("HSL"===i){let[n,i,s]=u(e,t,r);return`hsl(${a(i?n:p??n)} ${l(i)}% ${l(s)}%${f(o)})`}return`#${n(e)}${n(t)}${n(r)}${o<1?n(255*o):""}`}function b(e,t,r){let[o,n,i,p]=e;if("CSS"===t)return[h(e,"CSS")];if("Hex"===t)return[h([o,n,i,1],"Hex").slice(1).toUpperCase(),String(l(p))];let[s,c,d]="HSL"===t?u(o,n,i):r;return[...("RGB"===t?[o,n,i]:["HSB"===t||c?s:r[0],100*c,100*d]).map(e=>String(a(e))),String(l(p))]}var g={Hex:["Hex","Opacity"],RGB:["Red","Green","Blue","Opacity"],HSL:["Hue","Saturation","Lightness","Opacity"],HSB:["Hue","Saturation","Brightness","Opacity"],CSS:["CSS color"]},x={Red:255,Green:255,Blue:255,Hue:360};function m(e=document.body,t=12,r=600){let o=new Map,a=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT);for(let e=a.nextNode(),t=0;e&&t<r;e=a.nextNode(),t++){if(e.hasAttribute("data-branch-comments"))continue;let t=getComputedStyle(e);for(let e of["color","background-color","border-top-color","fill","stroke"]){if("border-top-color"===e&&!parseFloat(t.borderTopWidth))continue;let r=d(t.getPropertyValue(e));if(!r?.[3])continue;let a=h(r,"Hex");o.set(a,(o.get(a)??0)+1)}}return[...o].sort((e,t)=>t[1]-e[1]).slice(0,t).map(([e])=>e)}var _=()=>`palette:colors:${document.querySelector("[data-branch-comments]")?.getAttribute("data-branch-comments")||location.host}`;function v(){try{let e=JSON.parse(localStorage.getItem(_())??"[]");return Array.isArray(e)?e.filter(e=>"string"==typeof e&&d(e)).slice(0,8):[]}catch{return[]}}function w(e){try{localStorage.setItem(_(),JSON.stringify([e,...v().filter(t=>t!==e)].slice(0,8)))}catch{}}function S(t,r,o){let a=h(t,"Hex");return e(r,o).find(e=>"color"===e.type&&e.value&&!/var\(/i.test(e.value)&&(()=>{let t=d(e.value);return t&&h(t,"Hex")===a})())}function y(e,n){let{property:s}=e,u=t("div","palette-color"),f=t("style","",".palette-color{display:grid;gap:8px;padding:8px}.palette-color__area{position:relative;aspect-ratio:4/3;border-radius:6px;background:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#0000),var(--hue);cursor:crosshair;touch-action:none}.palette-color__area>i,.palette-color__track>i{position:absolute;width:12px;height:12px;box-sizing:border-box;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0006,inset 0 0 0 1px #0004;translate:-50% -50%;pointer-events:none}.palette-color__row{display:flex;align-items:center;gap:8px}.palette-color__tools{display:flex;align-items:center;gap:4px}.palette-color__sliders{display:grid;flex:1;gap:8px;min-width:0}.palette-color__track{position:relative;height:10px;border-radius:5px;cursor:pointer;touch-action:none}.palette-color__track>i{top:50%;width:14px;height:14px}.palette-color__hue{background:linear-gradient(to right,red,#ff0,lime,cyan,blue,#f0f,red)}.palette-color__alpha,.palette-color__chip,.palette-color__swatches button{background:linear-gradient(var(--color),var(--color)),repeating-conic-gradient(#ffffff40 0 25%,#ffffff12 0 50%) 0 0/8px 8px}.palette-color__alpha{background:linear-gradient(to right,#0000,var(--solid)),repeating-conic-gradient(#ffffff40 0 25%,#ffffff12 0 50%) 0 0/8px 8px}.palette-color__chip{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #ffffff26}.palette-color__drop{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:5px;background:none;color:#b5b1ab;cursor:pointer}.palette-color__drop:hover{background:#ffffff14;color:#f1efeb}.palette-color__drop svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.palette-color__value{display:flex;gap:4px;min-width:0}.palette-color__value select{flex:none;width:64px;height:24px;padding:0 16px 0 6px;border:0;border-radius:5px;box-shadow:none;appearance:none;background:#ffffff0a url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 3 4 5.5 6.5 3' fill='none' stroke='%23898680' stroke-width='1.2'/%3E%3C/svg%3E\") right 5px center/8px no-repeat;color:#f1efeb;font:inherit;cursor:pointer}.palette-color__channels{display:flex;flex:1;min-width:0;border-radius:5px;background:#ffffff0a}.palette-color__channels label{display:flex;flex:1;align-items:center;min-width:0}.palette-color__channels label:first-child{flex:2.2}.palette-color__channels[data-format=RGB] label:first-child,.palette-color__channels[data-format=HSL] label:first-child,.palette-color__channels[data-format=HSB] label:first-child{flex:1}.palette-color__channels span{flex:none;width:12px;color:#77736f;font-size:9px;text-align:center;cursor:ew-resize;user-select:none;touch-action:none}.palette-color__channels span:hover{color:#e9e6e1}.palette-color__channels input{width:100%;min-width:0;height:24px;box-sizing:border-box;padding:0 2px;border:0;border-radius:0;outline:0;box-shadow:none;background:none;color:#f1efeb;font:inherit;font-variant-numeric:tabular-nums}.palette-color__channels input:focus,.palette-color__channels input:focus-visible{outline:0;box-shadow:none}.palette-color__channels:hover{box-shadow:inset 0 0 0 1px #ffffff1c}.palette-color__channels:focus-within{box-shadow:inset 0 0 0 1px #bda6ef}.palette-color__channels [aria-invalid=true]{color:#f8a898}.palette-tokens .palette-color small{position:static;display:block;margin:2px 0 4px;padding:0;background:none;color:#77736f;font-size:10px}.palette-color__swatches>div{display:flex;gap:4px;overflow:hidden}.palette-color__swatches button{width:16px;height:16px;padding:0;border:0;border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff26;cursor:pointer}.palette-color__match{display:flex;align-items:center;gap:6px;color:#b5b1ab;font-size:10px}.palette-color__match span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.palette-color__match button{padding:0;border:0;background:none;color:#bda6ef;font:inherit;cursor:pointer}.palette-color [role=slider]:focus-visible,.palette-color button:focus-visible{outline:1px solid #bda6ef;outline-offset:2px}.palette-color select:focus-visible{outline:0;box-shadow:inset 0 0 0 1px #bda6ef}@media (pointer:coarse){.palette-color__track{height:16px}.palette-color__value select,.palette-color__channels input{height:32px}.palette-color__swatches button{width:24px;height:24px}}"),[_,y,k,A]=[0,0,0,1],C="Hex";try{C=r.find(e=>e===localStorage.getItem("palette:color-format"))??C}catch{}let H,$=!1,R=!1,B=()=>[...i(_,y,k),A],M=()=>H??h(B(),C,_),N=()=>H??h(B(),"Hex"),E=e=>{let[t,r,o]=c(e[0],e[1],e[2]);o&&r&&(_=t),o&&(y=r),k=o,A=e[3]},P=e=>{let t=d(e);return t&&E(t),!!t};P(e.custom.value);let D=N(),O=(e,r)=>{let o=t("div",e);return o.tabIndex=0,o.setAttribute("role","slider"),o.setAttribute("aria-label",r),o.append(t("i")),o},L=O("palette-color__area","Saturation and brightness"),G=O("palette-color__track palette-color__hue","Hue"),T=O("palette-color__track palette-color__alpha","Opacity");G.setAttribute("aria-valuemax","360");for(let e of[L,G,T])e.setAttribute("aria-valuemin","0");L.setAttribute("aria-valuemax","100"),T.setAttribute("aria-valuemax","100");let U=t("span","palette-color__chip");U.setAttribute("aria-hidden","true");let F=t("div","palette-color__tools"),j=globalThis.EyeDropper;if(j&&isSecureContext){let e=t("button","palette-color__drop");e.type="button",e.title="Pick from screen",e.setAttribute("aria-label","Pick color from screen"),e.innerHTML='<svg viewBox="0 0 16 16" aria-hidden="true"><path d="m9.5 3.5 3 3M11 2a1.4 1.4 0 0 1 2 2l-1.5 1.5-2-2zM10 5 4 11l-1 3 3-1 6-6"/></svg>',e.onclick=async()=>{try{let{sRGBHex:e}=await(new j).open();u.isConnected&&P(e)&&Z(!0)}catch{}},F.append(e)}F.append(U);let I=t("div","palette-color__sliders");I.append(G,T);let z=t("div","palette-color__row");z.append(F,I);let K=t("select");K.setAttribute("aria-label","Color format");for(let e of r)K.append(new Option(e,e));let X=t("div","palette-color__channels"),W=t("div","palette-color__value");W.append(K,X);let q,V=t("div","palette-color__swatches"),J=t("div","palette-color__match");function Y(r){let i=B(),[c,f,m]=i,v=`rgb(${a(c)} ${a(f)} ${a(m)})`;u.style.setProperty("--hue",`hsl(${a(_)} 100% 50%)`),u.style.setProperty("--solid",v),u.style.setProperty("--color",h(i,"RGB"));let w=(e,t,r=50)=>{let o=e.firstElementChild;o.style.left=`${t}%`,o.style.top=`${r}%`};w(L,100*y,100-100*k),w(G,_/3.6),w(T,100*A),L.setAttribute("aria-valuenow",String(l(y))),L.setAttribute("aria-valuetext",`Saturation ${l(y)}%, brightness ${l(k)}%`),G.setAttribute("aria-valuenow",String(a(_))),G.setAttribute("aria-valuetext",`Hue ${a(_)}°`),T.setAttribute("aria-valuenow",String(l(A))),T.setAttribute("aria-valuetext",`Opacity ${l(A)}%`),K.value=C;let R=b(i,C,[_,y,k]);X.dataset.format!==C&&(X.dataset.format=C,X.replaceChildren(...g[C].map((e,r)=>{let l=t("label"),n=t("span","","Hex"===C?r?"%":"#":"CSS"===C?"":e[0]),i=t("input");i.setAttribute("aria-label","Hex"===C&&r?"Opacity":e),i.spellcheck=!1,i.autocomplete="off";let c="CSS"!==C&&!("Hex"===C&&!r);c&&(i.inputMode="decimal");let u=e=>{if("CSS"===C){let t=!!e.trim()&&!!globalThis.CSS?.supports?.(s,e)&&!/[{};]/.test(e);return t&&(H=e.trim(),P(e)),t}if(!c){let t=A,r=/^[\da-f]{3}([\da-f]{3})?$/i.test(e.trim())&&P(e);return A=t,r}let t=Number(e);if(""===e.trim()||!Number.isFinite(t))return!1;let r=[...X.querySelectorAll("input")].map(e=>Number(e===i?t:e.value)),[a,l,n]=r,u=o(r[r.length-1],0,100)/100;if("Hex"===C)return A=u,!0;let d=[o(a,0,x[g[C][0]]),o(l,0,"RGB"===C?255:100),o(n,0,"RGB"===C?255:100)];return"HSB"===C?[_,y,k]=[d[0]%360,d[1]/100,d[2]/100]:(E([..."RGB"===C?d:p(d[0]%360,d[1]/100,d[2]/100),1]),"HSL"===C&&(_=d[0]%360)),A=u,!0};i.oninput=()=>{$=!0;let e=u(i.value);i.setAttribute("aria-invalid",String(!e)),e&&Z(!1,i)},i.onkeydown=e=>{"Enter"===e.key?(e.preventDefault(),e.stopPropagation(),"true"!==i.getAttribute("aria-invalid")&&Z(!0,!0)):c&&("ArrowUp"===e.key||"ArrowDown"===e.key)&&(e.preventDefault(),f(("ArrowUp"===e.key?1:-1)*(e.shiftKey?10:1),!0))},i.onblur=()=>{"true"!==i.getAttribute("aria-invalid")&&N()!==D&&Z(!0,!0)},i.onpaste=e=>{let t=e.clipboardData?.getData("text")??"",r=d(t);!r||!c&&/^#?[\da-f]{6}$/i.test(t.trim())||(e.preventDefault(),"CSS"===C?H=t.trim():E(r),Z(!0,"CSS"===C||void 0))};let f=(t,l)=>{let n=Number(i.value)||0,p="Hex"===C||r===g[C].length-1?100:x[e]??("RGB"===C?255:100);i.value=String(o(a(n+t),0,p)),u(i.value)&&Z(l)};return c&&(n.title=`${e} · drag to adjust`,n.onpointerdown=e=>{e.preventDefault(),n.setPointerCapture?.(e.pointerId);let t=e.clientX;n.onpointermove=e=>{let r=Math.trunc((e.clientX-t)/2);r&&(t+=2*r,f(r*(e.shiftKey?10:1),!1))},n.onpointerup=n.onpointercancel=()=>{n.onpointermove=null,Z(!0)}}),l.append(n,i),l}))),X.querySelectorAll("input").forEach((e,t)=>{let o="CSS"===C?M():R[t];if(e===r||e.value===o)return;let{selectionStart:a,selectionEnd:l}=e;e.value=o,e.removeAttribute("aria-invalid"),null!==a&&e===e.getRootNode().activeElement&&e.setSelectionRange(a,l)});let O=S(i,e.tokens,s);if(J.hidden=!O,O&&O!==q){q=O;let e=O.label||O.path;J.replaceChildren(t("span","",`Matches ${e}`),Object.assign(t("button","","Use it"),{type:"button",onclick:()=>n.token(O)})),J.lastElementChild.setAttribute("aria-label",`Use token ${e}`)}}function Z(e,t){if(!R){if($=!0,t||(H=void 0),Y(!0===t?void 0:t),!e)return n.preview(M());N()!==D&&(n.commit(M()),w(h(B(),"Hex"))),D=N()}}J.hidden=!0,u.append(f,L,z,W,V,J),K.onchange=()=>{C=K.value,H=void 0;try{localStorage.setItem("palette:color-format",C)}catch{}Y()};let Q=(e,t,r)=>{let a=r=>{let a=e.getBoundingClientRect();t(o((r.clientX-a.left)/a.width,0,1),o((r.clientY-a.top)/a.height,0,1)),Z(!1)};e.onpointerdown=t=>{t.button||(t.preventDefault(),e.focus({preventScroll:!0,focusVisible:!1}),e.setPointerCapture?.(t.pointerId),a(t),e.onpointermove=a,e.onpointerup=e.onpointercancel=()=>{e.onpointermove=null,Z(!0)})},e.onkeydown=e=>{r(e.key,e.shiftKey?10:1)&&(e.preventDefault(),e.stopPropagation(),Z(!0))}};Q(L,(e,t)=>{y=e,k=1-t},(e,t)=>{let r=t/100;if("ArrowLeft"===e||"ArrowRight"===e)y=o(y+("ArrowRight"===e?r:-r),0,1);else if("ArrowUp"===e||"ArrowDown"===e)k=o(k+("ArrowUp"===e?r:-r),0,1);else if("Home"===e||"End"===e)y="End"===e?1:0;else{if("PageUp"!==e&&"PageDown"!==e)return!1;k=o(k+("PageUp"===e?.1:-.1),0,1)}return!0});let ee=(e,t,r)=>(a,l)=>{let n="Home"===a?0:"End"===a?r:t()+{ArrowRight:l,ArrowUp:l,ArrowLeft:-l,ArrowDown:-l,PageUp:10,PageDown:-10}[a];return!Number.isNaN(n)&&(e(o(n,0,r)),!0)};Q(G,e=>{_=360*e},ee(e=>{_=e},()=>_,360)),Q(T,e=>{A=e},ee(e=>{A=e/100},()=>100*A,100));return setTimeout(()=>{u.isConnected&&(()=>{let e=v(),r=new Set(e.map(e=>e.toLowerCase())),o=[...e.map(e=>[e,"Recent"]),...m().filter(e=>!r.has(e.toLowerCase())).map(e=>[e,"Document"])].slice(0,8),a=t("div");a.setAttribute("role","group"),a.setAttribute("aria-label","Recent and page colors"),a.append(...o.map(([e,r])=>{let o=t("button");return o.type="button",o.title=e,o.setAttribute("aria-label",`${r} color ${e}`),o.style.setProperty("--color",e),o.onclick=()=>{P(e)&&Z(!0)},o})),V.replaceChildren(...o.length?[a]:[]),V.hidden=!o.length})()},16),Y(),Object.assign(u,{live:!0,destroy(){R=!0},refresh(e){$||!P(e)||(D=N(),Y())}})}export{b as colorChannels,m as documentColors,h as formatColor,r as formats,p as hslToRgb,i as hsvToRgb,S as matchingToken,d as parseColor,y as pickerEditor,v as recentColors,w as rememberColor,u as rgbToHsl,c as rgbToHsv};

package/dist/config.d.ts

@@ -1,6 +1,6 @@
 import type { CommentsOptions } from "./types.js";
 export type PaletteConfig = Omit<CommentsOptions, "repo" | "branch" | "endpoint"> & {
-    /** Defaults to the hosted Palette service. */
+    /** Your Palette server. Without it, Palette logs an error and does not mount. */
     endpoint?: string;
     repo?: string;
     /** Shared feedback across deployments by default. */

package/dist/design-comment-BF2KGPWU.js

@@ -0,0 +1 @@
+import{f as e}from"./chunk-6CIC7VU7.js";import{a as t,b as n}from"./chunk-S6NEYT36.js";import{b as r,c as o,g as a,h as i,i as l,q as s}from"./chunk-HLXSRXTK.js";import{a as p,b as d}from"./chunk-QFDNGHSH.js";import"./chunk-PF4NYFZK.js";import{a as c}from"./chunk-XP22SMEQ.js";import{f,g as u}from"./chunk-4FX5IS2U.js";import{a as g}from"./chunk-XOMOONGK.js";import{e as m,j as h,l as y,t as b,z as x}from"./chunk-4HBBEVFK.js";var v=/^Proposed (.+?) changes? \(preview only\)$/,w={style:"Style changes","inline text":"Text change","design-token":"Token changes",token:"Token changes","React prop":"Prop changes"};function k(e){return e.split("\n").some(e=>v.test(e))}function $(e){try{return e.startsWith('"')?JSON.parse(e):e}catch{return e}}function E(e,t){if("geometry"===t){let t=/^- Resize \([\w-]+\) ([\w-]+): (.*?) → (.*?)((?: · .*)?)$/.exec(e);if(t)return{label:t[1],before:t[2],after:t[3],apply:{kind:"style",property:t[1],also:[...t[4].matchAll(/ · sets ([\w-]+): ([^·]*[^\s·])/g)].map(([,e,t])=>[e,t])}};if(t=/^- Move (.+): from (.+) \((\d+\w+)\) → (.+) \((\d+\w+)\)$/.exec(e),t){let e=e=>/^[\w$.()]+$/.test(e)&&!d(e)?"":e,[n,r]=[e(t[2]),e(t[4])],o=t[4]===t[2],a=(e,t)=>e?`${e} · ${t}`:t;return{label:t[1],before:a(n,t[3]),after:o?t[5]:a(r,t[5]),...n&&(o||r)?{place:o?n:`${n} → ${r}`}:{},apply:{kind:"move",property:""}}}if(t=/^- Move \(translate\): Δx (\S+), Δy ([^\s·]+)/.exec(e),t)return{label:"translate",before:"none",after:`${t[1]} ${t[2]}`,apply:{kind:"style",property:"translate"}};let[,n,r="",o]=/^- (.+?): (?:(.*) → )?(.*)$/.exec(e)??[];return n?{label:n,before:r,after:o}:null}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=/^Token: ([\w.-]+)(?: \(([^()]+)\))? (.*?) → (.*)$/.exec(e),n)return{label:n[2]?`${n[1]} (${n[2]})`:n[1],token:n[1],before:n[3],after:n[4],apply:{kind:"token",property:n[1],...n[2]?{theme:n[2]}:{}}};if(n=/^Element ([\w-]+): (.*?) → (.*?)(?: \[([^\]]+)\])*$/.exec(e),n){let t=/\[([\w.-]+)\]/.exec(e.slice(e.indexOf("→")))?.[1];return{label:n[1],before:n[2],after:n[3],...t&&!t.includes(" ")?{token:t}:{},apply:{kind:"style",property:n[1]}}}if(n=/^- (.+?): (.*) → (.*?)(?: \[([^\]]+)\])?$/.exec(e),!n)return null;let[,r,o,a,i]=n;return"inline text"===t&&"white-space"===r?{label:r,before:o,after:a,apply:{kind:"style",property:r}}:"inline text"===t?{label:"Text",before:$(o),after:$(a),apply:{kind:"text",property:"text"}}:"React prop"===t?{label:r,before:$(o),after:$(a),...i&&"custom value"!==i?{token:i}:{},apply:{kind:"prop",property:r,value:a}}:{label:r,before:o,after:a,apply:{kind:"style",property:r}}}function S(e){let t=[];for(let n of e.split(/\n{2,}/)){let e=n.split("\n"),r=v.exec(e[0]??"");if(!r){n.trim()&&t.push({text:n.trim()});continue}let o=r[1],a={title:w[o]??`${o[0].toUpperCase()}${o.slice(1)} changes`,changes:[]};for(let t of e.slice(1))if(t.startsWith("Target: "))a.target=t.slice(8);else if(t.startsWith("Component: ")){let[,e,n]=/^(.*?)(?: \((.+)\))?$/.exec(t.slice(11));a.component=e,n&&(a.source=n)}else if(t.startsWith("Source: "))a.source=t.slice(8);else if(/^(From|To): /.test(t)){let e=[...a.changes].reverse().find(e=>"move"===e.apply?.kind)?.apply,[n,r]=t.slice(t.indexOf(" ")+1).split(" · ");e&&(e["F"===t[0]?"from":"to"]={parent:n,index:parseInt(r?.slice(6))||0})}else{let e=t.includes("→")||"geometry"===o?E(t,o):null;e&&e.before!==e.after&&a.changes.push(e)}a.changes.length?t.push(a):t.push({text:n.trim()})}return t}function C(e){let t=S(e),n=t.filter(e=>"changes"in e),r=t.find(e=>"text"in e)?.text,o=n.reduce((e,t)=>e+t.changes.length,0),a=n.find(e=>e.target)?.target,i=`${!a&&n.length&&n.every(e=>e.title===w.token)?w.token:"Design change"} · ${o} ${1===o?"edit":"edits"}${a?` on ${N(a)}`:""}`;return r?`${r}\n${i}`:i}function N(e){return(e.split(">").at(-1)??e).trim().replace(/:nth-of-type\(\d+\)/g,"")||e}function j(e,t){let n=d(e.component);if(n)return n;let r=t?.localName??/(?:^|[\s>])([a-z][\w-]*)[^\s>]*$/i.exec(e.target??"")?.[1]?.toLowerCase()??"";return p(t,r,e.changes.find(e=>"text"===e.apply?.kind)?.before)}var A=/^(#[0-9a-f]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\)|oklch\([^)]*\))$/i,O=new Map,P=new Map,T=new Set,M=new Set,q="Preview unavailable: the target or its text has changed.";function L(e){T.add(e),J(e);for(let t of M){if(t.dataset.previewKey!==e||!t.isConnected)continue;t.querySelectorAll("button").forEach((e,t)=>{e.setAttribute("aria-pressed",String(0===t)),1===t&&(e.disabled=!0)});let n=t.closest(".design-comment")?.querySelector('[role="status"]');n&&(n.textContent=q,n.hidden=!1)}}var z=new Map;function D(e){let t=z.get(e);t&&(clearTimeout(t.timer),z.delete(e),t.finish())}var R=(e,t)=>[...e.children].filter(e=>e!==t&&!e.hasAttribute(K)&&!e.matches("script,style,template")&&!/^(none|contents)$/.test(getComputedStyle(e).display)),F=(e,t)=>R(t,e).filter(t=>t.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING).length,K="data-palette-move-clone",W=Symbol.for("palette.stand-in");function B(e,{from:t,to:n}){let r=e.ownerDocument,o=e.parentElement,a=n&&r.querySelector(n.parent);return g(e)&&t&&n&&o&&a?r.querySelector(t.parent)!==o||F(e,o)!==t.index?a===o&&F(e,o)===n.index?"Already moved on this page":"This element has moved since":"":"Destination not found on this page"}function H(e,t,n){let r=B(e,t);if(r||!g(e))return r;let o,a,i=e.ownerDocument,l=t.to,s=e.parentElement,p=y(e),d=y(s),c=e,u=i.querySelector(l.parent),m="",h=()=>{a=f(c,"display"),c.style.setProperty("display","none","important")},b=()=>{o?.remove(),o=c.cloneNode(!0);for(let e of[o,...o.querySelectorAll("[id]")])e.removeAttribute("id");o.setAttribute(K,""),o.setAttribute("aria-hidden","true"),o.inert=!0,o.removeAttribute("style");let e=c.getAttribute("style");e&&o.setAttribute("style",e.replace(/(^|;)\s*display\s*:[^;]*/g,"$1")),a.value&&o.style.setProperty("display",a.value,a.priority),m=`${c.getAttribute("class")}\n${c.innerHTML}`,c[W]=o};h(),b();let x=()=>{if(c.isConnected)("none"!==c.style.getPropertyValue("display")||"important"!==c.style.getPropertyPriority("display"))&&h();else{let e=n?[...i.querySelectorAll(n)].find(e=>!e.hasAttribute(K))??null:null;if(!g(e))return o.remove();delete c[W],c=e,c[W]=o,h()}if(u.isConnected||(u=i.querySelector(l.parent)??u),!u.isConnected)return o.remove();m!==`${c.getAttribute("class")}\n${c.innerHTML}`&&b();let e=R(u,c)[l.index]??null;(o.parentNode!==u||o.nextElementSibling!==e)&&u.insertBefore(o,e)};x();let v=new MutationObserver(x);return v.observe(i.documentElement,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["style","class"]}),{shown:()=>o,undo(){v.disconnect(),o.remove(),delete c[W],c.isConnected&&a.restore()},origin(){let e=y(s.isConnected?s:u);return new DOMRect(p.left+e.left-d.left,p.top+e.top-d.top,p.width,p.height)}}}function V(e,t,n="",r){try{let o,a=c(e,r),i=a?.identify(e),l=i&&a.editor?.(i);if(!l||!1===l.available?.()||!l.schema.some(e=>e.name===t&&"unsupported"!==e.kind))return;try{o="unset"===n?void 0:JSON.parse(n)}catch{o=n}let s=l.read();return l.apply({...s,[t]:o}),()=>{try{l.apply(s),l.release?.([t])}catch{}}}catch{return}}function I(t,n,r,o=!1,a,i={}){if(T.has(t))return[!1,q];D(t);let l=[],p=[],d=[],c=new Set,b=[],x=[],v="",w=new Set,k=(e,t)=>{v||=t,w.add(e.label)};for(let u of n){let n=r(u.target),v=()=>n;for(let r of u.changes)if(r.apply&&"(unset)"!==r.after)if("token"===r.apply.kind){let e=/^\{(.+)\}$/.exec(r.after)?.[1];b.push({path:r.apply.property,value:e?a?.tokens.find(t=>t.path===e)?.value??"":r.after,...r.apply.theme?{theme:r.apply.theme}:{},...e?{alias:e}:{}})}else if("variable"===r.apply.kind){let e=m().root,t=e.style.getPropertyValue(r.apply.property);e.style.setProperty(r.apply.property,r.after),l.push(()=>t?e.style.setProperty(r.apply.property,t):e.style.removeProperty(r.apply.property))}else if(n)if("move"===r.apply.kind){let e=H(n,r.apply,u.target);"string"==typeof e?k(r,e):(l.push(e.undo),x.push({box:e.origin,origin:!0}),v=e.shown)}else if("prop"===r.apply.kind){let e=V(n,r.apply.property,r.apply.value,i.design);e?l.push(e):k(r,"This component can't preview props here")}else if(g(n)&&"style"===r.apply.kind){n.hasAttribute("style")||c.add(n);let e=r.token&&a?.tokens.find(e=>e.path===r.token);if(e&&a){try{l.push(s(a.adapter,n,r.apply.property,e))}catch{k(r,q)}continue}for(let[e,t,a]of[[r.apply.property,r.after,r.before],...r.apply.also??[]]){let r=f(n,e),i=()=>!(!a||"(unset)"===a)&&(n.style.setProperty(e,a,"important"),!0);o&&i()&&getComputedStyle(n).getPropertyValue(e),n.style.setProperty(e,t,"important"),d.push(i),p.push(r.restore)}}else if("text"===r.apply.kind){let o=h(n)?e(n,r.before,r.after,()=>L(t)):void 0;o?l.push(o):k(r,q)}else k(r,q);else k(r,"Element not found on this page");n&&u.changes.some(e=>e.apply)&&x.push({box:()=>{let e=v();return e?.isConnected?y(e):null}})}if(b.length)try{l.push(a.adapter.previewValues(b,a.theme))}catch{v||=q,b.forEach(e=>w.add(e.path))}return c.size&&p.unshift(()=>{for(let e of c)g(e)&&u(e)}),l.length||p.length?(i.root&&x.length&&l.push(function(e,t,n="var(--palette-selection,var(--komo-selection,#0c93f5))"){let r=document.createElement("div");r.setAttribute("aria-hidden","true");let o=t.map(({origin:e})=>r.appendChild(Object.assign(document.createElement("div"),{className:"design-mark",style:`position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;border-radius:4px;outline:${e?`1px dashed ${n};opacity:.6`:`2px solid ${n}`};outline-offset:2px`})));(e instanceof ShadowRoot?e:document.body).append(r);let a=0,i=()=>{t.forEach(({box:e},t)=>{let n=e(),r=o[t];r.hidden=!n?.width&&!n?.height,n&&Object.assign(r.style,{left:`${n.left}px`,top:`${n.top}px`,width:`${n.width}px`,height:`${n.height}px`})}),a=requestAnimationFrame(i)};return i(),()=>{cancelAnimationFrame(a),r.remove()}}(i.root,x,i.design?.selectionColor)),O.set(t,{restore:l,restoreStyles:p,pinBefore:d}),P.set(t,w.size?`Not previewed: ${[...w].join(", ")}`:""),[!0,w.size?`Not previewed: ${[...w].join(", ")}`:""]):[!1,v||q]}var U,X=["color","background-color","border-color","outline-color","fill","stroke","box-shadow","text-decoration-color"],G="cubic-bezier(.22, 1, .36, 1)";function Z(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||"token"===e.apply?.kind)X.forEach(e=>n.add(e));else if("text"===e.apply?.kind){let e=t(r.target);h(e)&&e.animate?.([{opacity:1},{opacity:.25,offset:.4},{opacity:1}],{duration:360,easing:G})}if(!n.size)return;U&&(clearTimeout(U.timer),U.style.remove());let r=document.createElement("style");r.textContent=`*, *::before, *::after { transition-property: ${[...n].join(", ")} !important; transition-duration: 420ms !important; transition-timing-function: ${G} !important; transition-delay: 0s !important; }`,(m().document.head??m().root).append(r),U={style:r,timer:setTimeout(()=>{r.remove(),U=void 0},480)}}function J(e,t=!1){D(e);let n=O.get(e);if(!n)return;O.delete(e),P.delete(e);for(let e of n.restore.reverse())e();let r=()=>{for(let e of n.restoreStyles.reverse())e()};if(!t||!n.pinBefore.length)return r();for(let e of n.pinBefore)e();z.set(e,{finish:r,timer:setTimeout(()=>D(e),480)})}function Q(e){return O.has(e)||z.has(e)}function Y(e=new Set){e.has("draft")||(ie=void 0,le?.events.abort(),le=void 0);for(let t of[...z.keys()])e.has(t)||D(t);for(let t of[...O.keys()])e.has(t)||J(t);for(let t of T)e.has(t)||T.delete(t)}function _(e){return"text"===e.apply?.kind||!(e.apply||e.token||A.test(e.before)||A.test(e.after))&&(/\s/.test(e.before+e.after)||e.before.length+e.after.length>32)}function ee(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++;if(/[\p{L}\p{N}]/u.test(e.slice(n,e.length-r)+t.slice(n,t.length-r))){for(;n>0&&!/\s/.test(e[n-1]);)n--;for(;r>0&&!/\s/.test(e[e.length-r]);)r--}let o=e.slice(0,n),a=e.slice(e.length-r),i=document.createElement("p");i.className="design-diff",i.append(o.length>48?`…${o.slice(-40)}`:o);let l=e.slice(n,e.length-r),s=t.slice(n,t.length-r);return l&&i.append(Object.assign(document.createElement("del"),{textContent:l})),s&&i.append(Object.assign(document.createElement("ins"),{textContent:s})),i.append(a.length>48?`${a.slice(0,40)}…`:a),i}function te(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,title:t})),n;if(A.test(e)){let t=document.createElement("span");t.className="design-swatch",t.style.background=e,n.append(t)}return n.append(Object.assign(document.createElement("span"),{className:"design-value-text",textContent:e,title:e})),n}var ne=e=>`<svg viewBox="0 0 12 12" aria-hidden="true"><path d="${e}"/></svg>`,re=[ne("M2.5 6.5a3.5 3.5 0 1 0 1.2-2.6M3 1.8v2.4h2.4"),ne("M1 6s1.8-3.5 5-3.5S11 6 11 6s-1.8 3.5-5 3.5S1 6 1 6Zm5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z")],oe=e=>(e?.themes??[]).filter(e=>e.options?.length>1).map(t=>a(e)[t.id]).join("+")||void 0;function ae(e,r,o){let a=S(r),i=a.filter(e=>"changes"in e),l=document.createElement("div");l.className="design-comment",l.append(Object.assign(document.createElement("style"),{textContent:'\n.design-comment { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; margin: 2px 0 6px; }\n.design-note { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }\n.design-card { min-width: 0; border-radius: 10px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff0d; font-size: 12px; }\n.design-card-head { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 40px; padding: 7px 8px 7px 12px; }\n.design-card-label { display: grid; flex: 1; min-width: 0; gap: 1px; }\n.design-card-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; font-weight: 600; color: #eee; }\n.design-card-target { display: -webkit-box; min-width: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; color: #8a8a8a; font-size: 11px; }\n.design-toggle { display: inline-flex; padding: 2px; border-radius: 7px; background: #ffffff0a; flex: none; }\n.design-toggle button { display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 0 7px; height: 22px; border-radius: 5px; font: inherit; font-size: 11px; color: #9a9a9a; background: none; cursor: pointer; }\n.design-toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }\n.design-toggle button[aria-pressed="true"] { color: #fff; background: #ffffff1a; }\n.design-toggle button:disabled { opacity: .45; cursor: not-allowed; }\n.design-rows { display: grid; grid-template-columns: minmax(0, 1fr); 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: #e3a29c; background: #f28b8214; text-decoration-color: #e3a29c80; }\n.design-diff ins { color: #add8a3; background: #8fd69414; text-decoration: none; }\n.design-prop { color: #9a9a9a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.design-values { display: flex; 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-also { grid-column: 2; color: #858585; font-size: 11px; overflow-wrap: anywhere; }\n.design-value { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 5px; min-width: 0; }\n.design-values { flex-wrap: wrap; }\n.design-value-text { min-width: 0; overflow-wrap: anywhere; }\n.design-token { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n[data-compact] .design-value-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.design-swatch { width: 12px; height: 12px; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1px #ffffff26; }\n.design-token { max-width: 100%; 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 { margin: 0; padding: 0 12px 8px; color: #777; font-size: 11px; overflow-wrap: anywhere; }\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'+t}));let s=document.createElement("p");s.className="design-source",s.setAttribute("role","status");let p=!!o.compact;p&&(l.dataset.compact="");let d=p?3:1/0,c=0,f=o.tokens?.adapter??o.design?.tokens,u=f&&{adapter:f,tokens:o.tokens?.tokens??[],theme:oe(o.design)},g=e=>!(!e.apply||"token"===e.apply.kind&&!f?.previewValues),m=()=>T.has(o.key)?q:o.blocked?.()||function(e,t,n){for(let r of e){let e=r.changes.filter(e=>n(e)&&"token"!==e.apply.kind&&"variable"!==e.apply.kind);if(!e.length)continue;let o=t(r.target);if(!o)return"Element not found on this page";for(let t of e)if("move"===t.apply.kind){let e=B(o,t.apply);if(e)return e}}return e.some(e=>e.changes.some(n))?"":"This change can't be previewed here"}(i,o.resolve,g),h=O.has(o.key)?P.get(o.key)??"":m();s.textContent=h,s.hidden=!h;let y={design:o.design,root:e.getRootNode()},x=[],v=()=>{let e=O.has(o.key);for(let t of x)t.querySelectorAll("button").forEach((t,n)=>t.setAttribute("aria-pressed",String(1===n?e:!e)))};for(let e of a){if("text"in e){let t=document.createElement("p");t.className="design-note",o.note(t,e.text),l.append(t);continue}if(d<=0){c+=e.changes.length;continue}let t=document.createElement("section");t.className="design-card";let r=document.createElement("div");r.className="design-card-head";let a=document.createElement("div");a.className="design-card-label";let f=e.changes.find(e=>"move"===e.apply?.kind);a.append(Object.assign(document.createElement("span"),{className:"design-card-title",textContent:f?`Moved ${f.label}`:e.title}));let g=e.component??i.find(t=>t.target===e.target&&t.component)?.component,b=f?f.place??`${f.before} → ${f.after}`:e.target||g?j({...e,component:g},o.resolve(e.target)):"";if(b&&a.append(Object.assign(document.createElement("span"),{className:"design-card-target",textContent:b,title:f?`${f.before} → ${f.after}`:b})),r.append(a),e.source&&!p&&r.append(n(e.component||b||"Change",e.source,o.sourceHref)),!x.length){let e=document.createElement("div");e.dataset.previewKey=o.key,e.className="design-toggle",e.setAttribute("role","group"),e.setAttribute("aria-label","Preview on page");for(let[t,n]of["Before","After"].entries()){let r=Object.assign(document.createElement("button"),{type:"button",title:`${n} · ${t?"→":"←"} or B`});r.innerHTML=re[t],r.append(n),1===t&&h&&!O.has(o.key)&&(r.disabled=!0,r.title=h),r.addEventListener("click",()=>{let e=1===t;if(e===O.has(o.key))return;let n=e&&m();if(n)return s.textContent=n,void(s.hidden=!1);let r=i.find(e=>e.target)?.target;e&&r&&o.resolve(r)?.scrollIntoView({block:"center",behavior:"smooth"});let a="function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches;if(a||Z(i,o.resolve),e){let[,e]=I(o.key,i,o.resolve,!a,u,y);s.hidden=!e,s.textContent=e}else J(o.key,!a);o.onSwitch&&setTimeout(o.onSwitch,a?0:480),v()}),e.append(r)}x.push(e);for(let e of M)e.isConnected||M.delete(e);M.add(e),r.append(e)}t.append(r);let w=document.createElement("div");w.className="design-rows";let k=4;e.changes.forEach((t,n)=>{if(t===f)return;if(d<=0)return void c++;p&&d--;let r=document.createElement("div");r.className="design-row",r.hidden=!p&&n>=k&&e.changes.length>k+1;let a="token"===t.apply?.kind&&t.token,i=a&&(u?.tokens.find(e=>e.path===a)?.label||a.split(".").pop()),l=Object.assign(document.createElement("span"),{className:"design-prop",textContent:i||t.label});if(l.title=t.label,i&&(l.setAttribute("aria-label",t.label),o.tip?.(l)),_(t))return r.classList.add("design-row-prose"),r.append(l,ee(t.before,t.after)),void w.append(r);let s=document.createElement("span");s.className="design-values";let g=te(t.before);g.classList.add("design-before"),s.append(g,Object.assign(document.createElement("span"),{className:"design-arrow",textContent:"→"}),te(t.after,t.token)),r.append(l,s),t.apply?.also?.length&&r.append(Object.assign(document.createElement("span"),{className:"design-also",textContent:t.apply.also.map(([e,t])=>`sets ${e}: ${t}`).join(" · ")})),w.append(r)}),w.childElementCount&&t.append(w);let $=w.querySelectorAll("[hidden]").length;if($){let e=Object.assign(document.createElement("button"),{type:"button",className:"design-more",textContent:`Show ${$} more`});e.addEventListener("click",()=>{w.querySelectorAll("[hidden]").forEach(e=>e.hidden=!1),e.remove()}),t.append(e)}l.append(t)}c&&l.append(Object.assign(document.createElement("span"),{className:"design-source",textContent:`+${c} more`})),l.append(s),v(),e.replaceChildren(l),x.length&&function(e){e instanceof ShadowRoot&&!pe.has(e)&&(pe.add(e),e.addEventListener("keydown",de)),!se&&(se=!0,document.addEventListener("keydown",de),b("keydown",de))}(e.getRootNode())}var ie,le,se=!1,pe=new WeakSet;function de(e){let t="ArrowLeft"===e.key?0:"ArrowRight"===e.key?1:"b"===e.key.toLowerCase()?-1:null;if(e.defaultPrevented||null===t||e.metaKey||e.ctrlKey||e.altKey||e.shiftKey||e.isComposing)return;let n=e.composedPath(),r=[...M].find(e=>e.isConnected&&n.includes(e)),o=n[0],a=-1!==t&&"textarea"===o?.localName&&!o.value&&!!o.closest?.(".composer");if(!r&&!a&&(-1!==t||x(n[0])))return;let i=a?o.closest("form")?.querySelector(".design-toggle"):null,l=r??i??[...M].reverse().find(e=>e.isConnected),s=l?.querySelectorAll("button"),p=-1===t?l?.querySelector('button[aria-pressed="false"]'):s?.[t];p&&(e.preventDefault(),p.click())}function ce(e,t,n,s={}){let p=s.design,d=p?.tokens;if(p&&d){if(le&&le.options.design===p&&(t===le.source||t===le.body))return le.container=e,le.options=s,void ae(e,le.body,{...s,key:"draft",resolve:le.resolve,tokens:le.context,note:(e,t)=>e.append(t)});le?.events.abort(),J("draft"),T.delete("draft"),ie=t;let c=new AbortController,f=new Map(S(t).filter(e=>"changes"in e).map(e=>[e.target,n(e.target)])),u=0,g=!0,m=le={source:t,body:t,container:e,resolve:e=>{let t=f.get(e);return t?.isConnected?t:null},options:s,events:c,context:void 0,async refresh(){let e=++u,t=await l(d,a(p));if(c.signal.aborted||e!==u)return;let n=g||O.has("draft");g=!1,J("draft"),m.context={adapter:d,tokens:t,theme:oe(p)},m.body=function(e,t,n,o){let i=Object.entries(a(n)).map(([e,t])=>`${e}=${t}`.replace(/\s+/g," ").replace(/→/g,"->")).join(", ");return e.split(/(\n{2,})/).map(e=>{let n=e.split("\n");if(!v.test(n[0]))return e;let a=o(n.find(e=>e.startsWith("Target: "))?.slice(8));return n.map(e=>{if(e.startsWith("Theme: ")&&i)return`Theme: ${i}`;if(n[0].startsWith("Proposed style ")){let n=/^- ([\w-]+): (.*?) → (.*)$/.exec(e),o=n&&r(a,n[1]),i=o&&"path"in o&&t.find(e=>e.path===o.path);return n&&i?`- ${n[1]}: ${i.value} → ${n[3]}`:e}if(!n[0].startsWith("Proposed design-token "))return e;let o=/^Element ([\w-]+): (.*?) → (.*?) \[([^\]]+)\]$/.exec(e);if(!o)return e;let[,l,s,,p]=o,d=t.find(e=>e.path===p);if(!d)return e;let c=/\[([^\]]+)\]$/.exec(s)?.[1],f=c&&t.find(e=>e.path===c);return`Element ${l}: ${f?`${f.value} [${f.path}]`:s} → ${d.value} [${p}]`}).join("\n")}).join("")}(m.source,t,p,m.resolve),ie=m.body,m.options.onUpdate?.(m.body);let i=S(m.body).filter(e=>"changes"in e);for(let e of i){let n=m.resolve(e.target);n&&o(n,d,t,e.changes.flatMap(e=>"style"===e.apply?.kind?[e.apply.property]:[]))}n&&I("draft",i,m.resolve,!1,m.context,{design:p,root:m.container.getRootNode()});let s=m.container.querySelector(".design-toggle button:focus")?.textContent;ae(m.container,m.body,{...m.options,key:"draft",resolve:m.resolve,tokens:m.context,note:(e,t)=>e.append(t)}),s&&[...m.container.querySelectorAll(".design-toggle button")].find(e=>e.textContent===s)?.focus({preventScroll:!0})}};return i(p,e.ownerDocument,()=>{m.refresh().catch(()=>{})},c.signal),m.refresh()}le?.events.abort(),le=void 0,ie!==t&&(J("draft"),T.delete("draft"),ie=t,I("draft",S(t).filter(e=>"changes"in e),n,!1,void 0,{design:s.design,root:e.getRootNode()})),ae(e,t,{...s,key:"draft",resolve:n,note:(e,t)=>e.append(t)})}export{k as isDesignComment,Q as isPreviewing,S as parseDesignComment,ae as renderDesignComment,ce as renderDraftProposal,Y as resetDesignPreviews,N as shortTarget,C as summarizeDesignComment,j as targetLabel};

package/dist/{design-export-BNNHI4JP.js → design-export-Y2GU3KER.js}

@@ -1 +1 @@
-import{a as s,b as o,c as a,d as e,e as c,f as t,g as i,h as n,i as r,j as p}from"./chunk-FD4GACV2.js";import"./chunk-QFDNGHSH.js";import"./chunk-RBHY7UDS.js";import"./chunk-XOMOONGK.js";import"./chunk-6HM4JQLV.js";import"./chunk-IQOPM3JF.js";export{a as changeKind,e as changeRow,t as cssSelector,i as cssText,s as designKeyboard,n as designProposal,r as footerTips,o as keepFocus,c as selectionViews,p as watchDesignStatus};
+import{a as s,b as o,c as a,d as e,e as c,f as t,g as i,h as n,i as r,j as p}from"./chunk-2FX2JEMO.js";import"./chunk-QFDNGHSH.js";import"./chunk-RBHY7UDS.js";import"./chunk-XOMOONGK.js";import"./chunk-VX6XCU4E.js";import"./chunk-4HBBEVFK.js";export{a as changeKind,e as changeRow,t as cssSelector,i as cssText,s as designKeyboard,n as designProposal,r as footerTips,o as keepFocus,c as selectionViews,p as watchDesignStatus};

package/dist/design-geometry-HJLEXLPO.js

@@ -0,0 +1 @@
+import{f as e}from"./chunk-2FX2JEMO.js";import{a as t}from"./chunk-KELFDOEC.js";import{a as o,b as n}from"./chunk-QFDNGHSH.js";import"./chunk-RBHY7UDS.js";import{a as r,f as i,i as a}from"./chunk-4FX5IS2U.js";import"./chunk-XOMOONGK.js";import{a as s,b as l}from"./chunk-VX6XCU4E.js";import{c as d,i as p,j as c,k as m,l as h,o as g,t as f}from"./chunk-4HBBEVFK.js";var u="data-palette-move-clone",y=e=>getComputedStyle(e).display,b=e=>e.hasAttribute(u),x=e=>`${e}${e%100>10&&e%100<14?"th":["th","st","nd","rd"][e%10]??"th"}`,v=(e,t)=>[...e.children].filter(e=>e!==t&&!b(e)&&!/^(none|contents)$/.test(y(e))&&!e.matches("script,style,template"));function w(e,t,o){let n=t?e.nextElementSibling:e.previousElementSibling;for(;n&&(n===o||b(n)||/^(none|contents)$/.test(y(n)));)n=t?n.nextElementSibling:n.previousElementSibling;return n}function $(e){let t=e.parentElement,o=h(e),n=v(t,e).map(e=>h(e));if(!n.length){let e=getComputedStyle(t);return/flex/.test(e.display)&&e.flexDirection.startsWith("row")}return n.some(e=>e.top<o.bottom-1&&e.bottom>o.top+1)}function k(e,t=e){let o=e?.parentElement;if(!e?.isConnected||!o)return"Select an element on the page.";let n=e.ownerDocument;if(e===n.body||o===n.body||o===n.documentElement)return"The page and app roots can't be moved.";if(m(e)&&e.ownerSVGElement)return"SVG shapes can't be moved. Select the SVG root.";if(e.matches("thead,tbody,tfoot,caption,colgroup,col"))return"Table sections can't be moved. Select the table.";for(let t=e;t&&t!==n.body;t=t.parentElement)if("inline"===y(t)&&"svg"!==t.localName&&!t.matches("img,video,canvas,iframe,embed,object,input,select,textarea,button")||t===o&&t.matches("p,h1,h2,h3,h4,h5,h6,a,label,button,span,em,strong,b,i,small,code"))return"Inline text runs can't be moved. Select the paragraph or the block around them.";return t&&!/^(none|contents)$/.test(y(t))&&t.getClientRects().length?null:"This element has no box to move."}function S(e,t,o){return!(e===t||t.contains(e)||b(e)||e.closest(`[${u}]`)||o.contains(e))&&(t.matches("tr")?e===t.parentElement:t.matches("td,th")?e.matches("tr")&&e.closest("table")===t.closest("table"):c(e)&&e!==e.ownerDocument.body&&e!==e.ownerDocument.documentElement&&!e.matches("p,h1,h2,h3,h4,h5,h6,a,button,label,select,option,textarea,input,img,video,audio,canvas,iframe,embed,object,svg,br,hr,pre,picture,table,thead,tbody,tfoot,tr,colgroup,col,caption,script,style,template,slot")&&!/^(inline|contents|none)$/.test(y(e)))}function E(r){let s=new Set,l=d(),c=new(l.defaultView??window).CSSStyleSheet;l.adoptedStyleSheets=[...l.adoptedStyleSheets,c];let m,x="",E=!1,_=null,M=0,C=e=>[...r.history].reverse().find(t=>t.element===e&&t.place),A=e=>!!e&&C(e.element)===e&&!r.before()&&e.element.isConnected,P=e=>{let t=C(e);return A(t)&&t.clone?.isConnected?t.clone:e},L=()=>s.forEach(e=>e.clone?.remove()),j=e=>n(r.component(e)),z=e=>j(e)??o(e),D=e=>j(e)??(e.matches("[role],[aria-label]")?o(e):`${e.localName}${e.id?`#${e.id}`:e.classList[0]?`.${e.classList[0]}`:""}`),N=(t,o,i)=>{let a=n(r.component(t));return{parent:e(t),label:D(t),index:o,...a?{component:a}:{},...i?{position:i}:{}}},I=(e,t,o)=>{let n=v(e,o),r=t?n.findIndex(e=>e===t||!!(t.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING)):-1;return r<0?n.length:r};function O(e,o){let n=e.cloneNode(!0),r=[e,...e.querySelectorAll("*")];return[n,...n.querySelectorAll("*")].forEach((e,t)=>{e.removeAttribute("id"),(!t||r.length<400)&&function(e,t){let o=getComputedStyle(t),n=e.style;for(let e of o)n.setProperty(e,o.getPropertyValue(e));n.setProperty("transition","none"),n.setProperty("animation","none")}(e,r[t])}),n.style.display=o.display,n.setAttribute(u,""),n.removeAttribute(t),n.setAttribute("aria-hidden","true"),n.inert=!0,n}function T(){for(let e of s){let{element:t,place:o}=e;if(r.history.includes(e)||s.delete(e),!A(e)||!o){e.clone?.remove();continue}if("none"!==t.style.getPropertyValue("display")&&t.style.setProperty("display","none",e.priority),!o.parent.isConnected||o.before&&o.before.parentNode!==o.parent){L(),o.parent=l.querySelector(o.selectors[0])??o.parent;let e=o.selectors[1]?l.querySelector(o.selectors[1]):null;o.before=e?.parentNode===o.parent?e:null}if(!o.parent.isConnected){e.clone?.remove();continue}let n=`${t.getAttribute("style")}\n${t.getAttribute("class")}\n${t.innerHTML}`;e.sig!==n&&(e.clone?.remove(),e.clone=void 0,e.sig=n),e.clone??=O(t,e);let i=e.clone.nextSibling;for(;p(i)&&b(i);)i=i.nextSibling;(e.clone.parentNode!==o.parent||i!==o.before)&&o.parent.insertBefore(e.clone,o.before)}let t=r.selected(),o=!E&&r.enabled()&&t&&P(t)===t&&!k(t)&&e(t),n=E?"*{cursor:grabbing!important}":o?`${o},${o} *{cursor:move}`:"";n!==x&&c.replaceSync(x=n)}let K=new MutationObserver(()=>{s.size&&!M&&(M=requestAnimationFrame(()=>{M=0,T()}))});function V(t,o){for(;o.before&&b(o.before);)o.before=o.before.nextElementSibling;let n=C(t),l=n?.clone?.isConnected?n.clone:t;if(o.parent===l.parentElement&&(o.before===l||o.before===w(l,!0)))return null;L();let d=t.parentElement,p=n?.geometry[0].move.from??N(d,v(d).indexOf(t)),c={label:z(t),target:n?.geometry[0].move.target??e(t),from:p,to:N(o.parent,I(o.parent,o.before,t),o.position)},m=i(t,"display"),h={element:t,display:n?.display??y(t),priority:m.priority,place:{parent:o.parent,before:o.before,selectors:[e(o.parent),o.before?e(o.before):null]},geometry:[{mode:"structure",layout:r.layout(t),move:c,effects:[]}],undo(){a(t,["display"],()=>m.restore()),r.track(t,"display")},redo(){s.add(h),a(t,["display"],()=>t.style.setProperty("display","none",m.priority)),r.track(t,"display")}};s.add(h),r.history.push(h),r.remember(t,"display"),a(t,["display"],()=>t.style.setProperty("display","none",m.priority)),r.track(t,"display"),T(),r.update();try{localStorage.setItem("palette:geometry-moved","1")}catch{}return"Moved "+("inside"===o.position?`into ${D(o.parent)}`:`${o.position} ${z(o.ref)}`)}K.observe(l.documentElement,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["style","class"]});let q=document.createElement("div"),R=document.createElement("div"),F=document.createElement("div");q.className="design-geometry__line",R.className="design-geometry__drop",F.className="design-geometry__readout design-geometry__chip";for(let e of[q,R,F])e.hidden=!0;let H=e=>Math.round(100*e)/100+"px";function W(e,t,o,n){if(q.hidden=R.hidden=F.hidden=!e,!e)return;let r=(e,t,o,n,r)=>Object.assign(e.style,{left:H(t),top:H(o),width:H(n),height:H(r)});R.hidden="inside"!==e.position;let i=h(e.parent);r(R,i.left,i.top,i.width,i.height);let a=v(e.parent,t),s=I(e.parent,e.before,t),[l,d]=[a[s-1],a[s]].map(e=>e&&h(e)),p=a[s]??a[s-1];if(q.hidden=!p,p){let e=d??l;$(p)?r(q,d?(l&&l.top<d.bottom&&l.bottom>d.top?(l.right+d.left)/2:d.left-2)-1:l.right+1,e.top,2,e.height):r(q,e.left,d?(l?(l.bottom+d.top)/2:d.top-2)-1:l.bottom+1,e.width,2)}F.textContent=((e,t)=>"inside"===e.position?`Into ${D(e.parent)} · position ${I(e.parent,e.before,t)+1}`:`${"before"===e.position?"Before":"After"} ${z(e.ref)}`)(e,t),Object.assign(F.style,{left:H(o+14),top:H(n+18)})}function G(){m=void 0,_=null,E&&(E=!1,r.drag(null)),W(null,l.body,0,0),T()}let B={capture:!0,signal:r.signal},X=e=>{let t=r.selected();if(e.button||e.metaKey||e.ctrlKey||!r.enabled()||!t||e.composedPath().includes(r.host)||k(t,P(t)))return;let o=h(P(t)),n=g(e);n.x<o.left||n.x>o.right||n.y<o.top||n.y>o.bottom||(e.preventDefault(),e.stopImmediatePropagation(),m={...n,id:e.pointerId})},U=e=>{let t=r.selected();if(!m||e.pointerId!==m.id||!t)return;let o=g(e),n=o.x-m.x,i=o.y-m.y;!E&&Math.hypot(n,i)<4||(e.stopImmediatePropagation(),E||(E=!0,T()),r.drag([n,i]),_=function(e,t,o){let n=r.targetAt(e,t);for(;n&&n!==n.ownerDocument.body&&(!n.parentElement||!S(n.parentElement,o,r.host)||/^(inline|contents)$/.test(y(n)));)n=n.parentElement;if(!n||n===n.ownerDocument.body||o.contains(n))return null;let i=h(n),a=$(n),[s,l,d]=a?[i.left,i.width,e]:[i.top,i.height,t],p=Math.min(12,l/4);if(![...n.childNodes].some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent.trim())&&S(n,o,r.host)&&d>s+p&&d<s+l-p){let r=v(n,o).find(o=>((e,t,o)=>e.top<o&&e.bottom>o?e.left+e.width/2>t:e.top+e.height/2>o)(h(o),e,t))??null;return{parent:n,before:r,position:"inside",ref:null}}let c=d>=s+l/2;return{parent:n.parentElement,before:c?n.nextElementSibling:n,position:c?"after":"before",ref:n}}(o.x,o.y,t),W(_,t,o.x,o.y))},Y=e=>{let t=r.selected();if(!m||e.pointerId!==m.id)return;let o=E,n=_,i=g(e);if(G(),!o)return void(t&&P(t)===t&&r.pick(i.x,i.y));e.stopImmediatePropagation();let a=t&&n&&V(t,n);a&&r.announce(a)},J=()=>m&&G(),Q=e=>{!E||"Escape"!==e.key||(e.preventDefault(),e.stopImmediatePropagation(),G())};for(let[e,t]of[["pointerdown",X],["pointermove",U],["pointerup",Y],["pointercancel",J],["keydown",Q]])window.addEventListener(e,t,B),f(e,t,B,"window");return r.signal.addEventListener("abort",()=>{K.disconnect(),cancelAnimationFrame(M),L(),l.adoptedStyleSheets=l.adoptedStyleSheets.filter(e=>e!==c)},{once:!0}),{nodes:[q,R,F],shown:P,sync:T,key(e,t,o){let n=k(e,P(e)),i=n?null:function(e,t,o){let n=C(e),i=A(n)&&n.clone?.isConnected?n.clone:e,a=i.parentElement;if(o&&!t){let t=a.parentElement;return t&&S(t,e,r.host)?{parent:t,before:a.nextElementSibling,position:"after",ref:a}:null}let s=w(i,t&&!o,e);return o?s&&S(s,e,r.host)?{parent:s,before:null,position:"inside",ref:null}:null:s?{parent:a,before:t?s.nextElementSibling:s,position:t?"after":"before",ref:s}:null}(e,t,o);r.announce(n??(i&&V(e,i))??(o?t?"No container before it to move into":"Can't move out of this parent":t?"Already last":"Already first"))},detach(){L(),M||(M=requestAnimationFrame(()=>{M=0,T()}))}}}function _(e){let t=e=>`${e.parent} · index ${e.index}${e.position?` · ${e.position}`:""}${e.component?` · component ${e.component}`:""}`;return[`- Move ${e.label}: from ${e.from.label} (${x(e.from.index+1)}) → ${e.to.label} (${x(e.to.index+1)})`,`From: ${t(e.from)}`,`To: ${t(e.to)}`]}var M=e=>Math.round(100*e)/100,C=e=>`${M(e)}px`,A=e=>parseFloat(e)||0,P=(e,t)=>t.reduce((t,o)=>t+A(e.getPropertyValue(o)),0),L=["padding-left","padding-right","border-left-width","border-right-width"],j=["padding-top","padding-bottom","border-top-width","border-bottom-width"],z="img,video,canvas,iframe,embed,object",D=["flex","flex-grow","flex-shrink","flex-basis","max-width","max-height","min-width","min-height"],N=e=>e.parentElement??e.getRootNode().host??null,I=e=>"svg"===e.localName&&m(e)&&!e.ownerSVGElement;var O="Wait for this element's animation to finish.";function T(e){if(!e?.isConnected)return"Select an element on the page.";let o=e.ownerDocument;if(e===o.body||e===o.documentElement)return"The page root can't be moved or resized.";if(m(e)&&!I(e))return"SVG shapes can't be moved or resized. Select the SVG root.";if(!c(e)&&!I(e))return"Only HTML boxes and SVG roots can be moved or resized.";let n=getComputedStyle(e).display;if("none"===n)return"display: none has no box";if("contents"===n)return"display: contents has no box";if("inline"===n&&!I(e)&&!e.matches(`${z},input,select,textarea,button`))return"Inline text box can't be resized";if(n.startsWith("table-"))return"Table cells and rows size with their table. Select the table.";if(/ruby|math/.test(n))return`display: ${n} boxes can't be moved or resized.`;let r=e.getClientRects().length,i=h(e);if(!r||!i.width||!i.height)return"This element has no rendered box.";if(r>1)return"Boxes split across lines or columns can't be previewed.";for(let n=e;n&&n!==o.documentElement;n=N(n)){let e=getComputedStyle(n),o=e.transform&&"none"!==e.transform?new DOMMatrix(e.transform):null,r=e.scale&&"none"!==e.scale?e.scale.split(/\s+/).map(Number):[1];if(e.rotate&&"none"!==e.rotate||o&&(!o.is2D||o.b||o.c||o.a<=0||o.d<=0)||r.length>2||r.some(e=>!(e>0)))return"Rotated, skewed, 3D or mirrored boxes can't be previewed.";if(!n.closest(`[${t}]`)&&n.getAnimations?.().some(e=>"running"===e.playState&&e.effect?.getKeyframes?.().some(e=>Object.keys(e).some(e=>/^(transform|translate|scale|rotate|inset|left|top|right|bottom|flex|grid)|(width|height)$/i.test(e)))))return O}return null}function K(e){for(let t=N(e);t&&t!==e.ownerDocument.body&&t!==e.ownerDocument.documentElement;t=N(t))if(!T(t))return t;return null}function V(e){let t=getComputedStyle(e).position,o=function(e){let t=e.assignedSlot??N(e);for(;t&&"contents"===getComputedStyle(t).display;)t=t.assignedSlot??N(t);return t}(e),n=o?getComputedStyle(o):void 0,r="absolute"===t||"fixed"===t?"":n?.display??"",i="static"===t?"":`, position: ${t}`;if(/flex/.test(r)){let e=n.flexDirection.startsWith("row")===!n.writingMode.startsWith("vertical");return{kind:"flex",row:e,parent:o,parentStyle:n,position:t,label:`flex item, ${e?"row":"column"}${i}`}}return/grid/.test(r)?{kind:"grid",parent:o,parentStyle:n,position:t,label:`grid item${i}`}:{kind:"static"===t?"flow":"positioned",parent:o,parentStyle:n,position:t,label:"static"===t?"normal flow":`position: ${t}`}}function q(e,t,o,n,r,i){let a=[...t];for(;n>0&&a.length<e.length+12&&a.at(-1)+o/2<i;)a.push(a.at(-1)+o+n);let s=r;for(let e=r;e<a.length;e++)Math.abs(a[e]-i)<Math.abs(a[s]-i)&&(s=e);return s-r+1}function R(e){let{moves:t,sizes:o,layout:n}=F(e),r=e=>e.map(e=>` · ${e}`).join(""),i=[...t.flatMap(e=>e.move?_(e.move):[`- Move (${e.mode}): Δx ${C(e.dx)}, Δy ${C(e.dy)}${r(e.effects)}`]),...o.map(e=>`- Resize (${e.mode}) ${e.property}: ${e.from} → ${e.to}${r(e.effects)}`)];return i.length?`Proposed geometry changes (preview only)\nLayout: ${n}\n${i.join("\n")}`:void 0}function F(e){let t=new Map,o=new Map,n="";for(let r of e)if(n=r.layout,r.property){let e=o.get(r.property);o.delete(r.property),o.set(r.property,{...r,from:e?.from??r.from})}else if(r.move){let e=t.get(r.mode);t.set(r.mode,{...r,move:{...r.move,from:e?.move?.from??r.move.from}})}else{let e=t.get(r.mode);t.set(r.mode,{...r,dx:(e?.dx??0)+r.dx,dy:(e?.dy??0)+r.dy,effects:[...new Set([...e?.effects??[],...r.effects])]})}return{layout:n,moves:[...t.values()].filter(({move:e,dx:t,dy:o})=>e?e.from.parent!==e.to.parent||e.from.index!==e.to.index:M(t)||M(o)),sizes:[...o.values()].filter(e=>e.from!==e.to)}}function H(e){let t=getComputedStyle(e),o="border-box"===t.boxSizing,n=A(t.width),r=A(t.height),i=I(e)||e.matches(z),a=t.aspectRatio&&"auto"!==t.aspectRatio?t.aspectRatio.replace(/^auto\s*/,""):"",s=e=>/px$/.test(t.getPropertyValue(`max-${e}`))&&A(t.getPropertyValue(`max-${e}`))<=A(t.getPropertyValue(`min-${e}`)),l=(i||a)&&r?n/r:0,d=!s("width")&&!s("height");return{css:t,border:o,width:n,height:r,replaced:i,aspect:a,ratio:l,borderWidth:n+(o?0:P(t,L)),borderHeight:r+(o?0:P(t,j)),axes:l?[d,d]:[!s("width"),!s("height")]}}function W(e,{parent:t,kind:o,row:n},r,i){let a=[],s=[];if(!t)return{x:a,y:s};let l="flow"===o||"flex"===o&&!n,d="flex"!==o||!n,p=h(t),c=getComputedStyle(t),m=p.left+r*P(c,["padding-left","border-left-width"]),g=p.right-r*P(c,["padding-right","border-right-width"]),f=p.top+i*P(c,["padding-top","border-top-width"]),u=p.bottom-i*P(c,["padding-bottom","border-bottom-width"]);for(let e of[m,g,(m+g)/2])a.push({at:e,from:p.top,to:p.bottom});for(let e of l?[f]:[f,u,(f+u)/2])s.push({at:e,from:p.left,to:p.right});for(let o of[...t.children].slice(0,60)){let t=h(o);o===e||!t.width&&!t.height||(d&&a.push({at:t.left,from:t.top,to:t.bottom},{at:t.right,from:t.top,to:t.bottom}),l||s.push({at:t.top,from:t.left,to:t.right},{at:t.bottom,from:t.left,to:t.right}))}return{x:a,y:s}}var G=["n","s","e","w","nw","ne","sw","se"],B={ArrowLeft:[-1,0],ArrowRight:[1,0],ArrowUp:[0,-1],ArrowDown:[0,1]};function X(e){let t=(e,t,o)=>o.appendChild(Object.assign(document.createElement(e),{className:t})),o=document.createElement("div");o.className="design-geometry";let n=document.createElement("style");n.textContent=".design-geometry{--palette-sel:var(--palette-selection,var(--komo-selection,#0c93f5));position:fixed;inset:0;pointer-events:none;z-index:2}.design-geometry[hidden],.design-geometry [hidden],.design-geometry-note[hidden],.design-geometry-note [hidden]{display:none}.design-geometry:not([data-on])>*{display:none}.design-outline[data-kind=selected]:has(~.design-geometry[data-on]:not([hidden])){outline:0}:host(.design-active[data-palette-overlays-hidden]) :is(.design-geometry,.design-outline,.pins){visibility:hidden}.design-geometry>*{position:fixed;box-sizing:border-box}.design-geometry__frame{border:1px solid var(--palette-sel);outline:0}.design-geometry__frame:focus-visible{box-shadow:0 0 0 2px color-mix(in oklab,var(--palette-sel) 35%,transparent)}.design-geometry__frame,.design-geometry__handle{transition:opacity .12s ease}.design-geometry__handle{opacity:0;pointer-events:auto;touch-action:none}.design-geometry:is([data-near],[data-active],[data-focus]) .design-geometry__handle{opacity:1}.design-geometry[data-quiet] .design-geometry__handle{opacity:0;pointer-events:none}.design-geometry[data-quiet] .design-geometry__frame{opacity:.4}.design-geometry[data-preview] .design-geometry__frame{opacity:0}.design-geometry__handle::before{content:'';position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;box-sizing:border-box;border-radius:1px;background:#fff;border:1px solid var(--palette-sel);box-shadow:0 1px 2px #0000001f}.design-geometry__handle:hover::before,.design-geometry__handle[data-active]::before{background:var(--palette-sel)}.design-geometry__handle[data-small]::before{display:none}[data-handle=n],[data-handle=s]{cursor:ns-resize}[data-handle=e],[data-handle=w]{cursor:ew-resize}[data-handle=nw],[data-handle=se]{cursor:nwse-resize}[data-handle=ne],[data-handle=sw]{cursor:nesw-resize}.design-geometry__guide{background:var(--palette-selection,var(--komo-selection,#0c93f5))}.design-geometry__readout{translate:-50% 0;padding:2px 6px;border-radius:4px;background:var(--palette-sel);color:#fff;font:500 11px/16px system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 1px 3px #0003}.design-geometry[data-dragging] :is(.design-geometry__handle,.design-geometry__guide){display:none}.design-geometry__line{background:var(--palette-sel);border-radius:1px}.design-geometry__drop{border:2px dashed var(--palette-sel);border-radius:4px}.design-geometry__chip{translate:none}@media (prefers-reduced-motion:reduce){.design-geometry__frame,.design-geometry__handle{transition:none}}.design-geometry-note{display:grid;gap:8px;padding:0 12px 12px;color:#a19d97;font-size:11px;line-height:1.45}.design-geometry-note p{margin:0}.design-geometry-note div{display:flex;flex-wrap:wrap;gap:6px}.design-geometry-note button{height:24px;padding:0 8px;border-radius:6px;background:#ffffff0f;color:#e9e6e1;font-size:11px}.design-geometry-note button:hover{background:#ffffff1a}.design-geometry-note button[aria-pressed=true]{background:color-mix(in oklab,var(--accent,#bda6ef) 32%,transparent)}.design-inspector__eye{display:grid;place-items:center;flex:none;min-width:28px;height:28px;border-radius:7px;color:#909090}.design-inspector__eye:hover{background:#161616;color:#eee}.design-inspector__eye svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3}.design-geometry-wait{order:1;width:5px;height:5px;margin-left:4px;border-radius:50%;background:#e7c27d;opacity:.7}";let d=t("div","design-geometry__frame",o);d.tabIndex=0,d.setAttribute("role","group"),d.setAttribute("aria-roledescription","selection");let c=G.map(e=>{let n=t("div","design-geometry__handle",o);return n.dataset.handle=e,n.setAttribute("aria-hidden","true"),{name:e,handle:n,ex:e.includes("e")?1:e.includes("w")?-1:0,ey:e.includes("s")?1:e.includes("n")?-1:0}}),m=[t("div","design-geometry__guide",o),t("div","design-geometry__guide",o)],u=t("div","design-geometry__readout",o);u.setAttribute("aria-hidden","true");let y=e=>o.dispatchEvent(new CustomEvent("palette-announce",{detail:e,bubbles:!0,composed:!0})),b=document.createElement("div");b.className="design-geometry-note",b.title=r;let x=t("p","",b),v=t("div","",b),w=e=>Object.assign(t("button","",v),{type:"button",textContent:e}),$=w("Select parent"),S=w("Snap to grid tracks");S.setAttribute("aria-pressed","false"),S.title="Resize changes grid-column-end / grid-row-end spans instead of width and height";let z=t("i","design-geometry-wait",b);z.title=O,z.setAttribute("role","img"),z.setAttribute("aria-label",O);let N=0,I=0;e.options.root.append(n,o);let X,U,Y=null,J=!1,Q=[!1,!1],Z=null,ee={x:-1e4,y:-1e4},te=[],oe=0,ne=!1,re=e.options.visibility,ie=re?` (${l(re).keys.join(s()?"":"+")})`:"",ae=s()?"Meta":"Control",se=(e,t)=>(e=["Control","Alt","Shift","Meta"].filter(t=>e.includes(t)),s()?`${e.map(e=>({Alt:"⌥",Shift:"⇧",Meta:"⌘"}[e])).join("")}${t.length>3?" ":""}${t}`:`${e.map(e=>"Control"===e?"Ctrl":e).join("+")}+${t}`),le=e=>{U&&e-U.at>350&&pe(U.was),U=void 0},de=Object.assign(document.createElement("button"),{type:"button",className:"design-inspector__eye"});function pe(t){ne=t,e.options.host.toggleAttribute("data-palette-overlays-hidden",t),de.setAttribute("aria-pressed",String(t)),de.setAttribute("aria-label",de.title=`${t?"Show":"Hide"} selection${ie}`),de.innerHTML=`<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8 12.1 12.5 8 12.5 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="2"/>${t?'<path d="M2.5 13.5l11-11"/>':""}</svg>`}pe(!1);let ce=e.options.design?.selectionColor;function me(){let t=e.options.root,n=e.panel().closest(".design-inspector"),r=t.activeElement,i=t.querySelector(".palette-select:popover-open,.palette-tokens:popover-open"),a=!!r&&!!n?.contains(r)&&r.matches("input,textarea,select,[contenteditable]");o.toggleAttribute("data-quiet",!X&&(!!i||a||!!t.querySelector(".palette-color")||!!n&&te.includes(n))),o.toggleAttribute("data-preview",!!i&&te.includes(i)),o.toggleAttribute("data-near",!!Z&&ee.x>Z.left-12&&ee.x<Z.right+12&&ee.y>Z.top-12&&ee.y<Z.bottom+12),o.toggleAttribute("data-active",!!X||o.hasAttribute("data-dragging")),o.toggleAttribute("data-focus",r===d)}ce&&e.options.host.style.setProperty("--palette-selection",ce),de.addEventListener("click",()=>pe(!ne));let he=()=>{oe||(oe=requestAnimationFrame(()=>{oe=0,me()}))},ge=new AbortController,fe=t=>e.history.reduce((e,o)=>o.element!==t?e:o.geometry?[...e,...o.geometry]:o.property?e.filter(e=>e.property!==o.property):e,[]),ue=E({signal:ge.signal,host:e.options.host,targetAt:e.options.targetAt,history:e.history,selected:e.selected,pick:e.pick,enabled:e.enabled,before:e.before,remember:e.remember,track:e.track,update:e.update,component:t=>e.tokens()?.designContext(t,e.options.design).find(e=>e.startsWith("Component: "))?.slice(11).replace(/ \(.*\)$/,""),layout:e=>V(e).label,announce:y,drag(e){o.toggleAttribute("data-dragging",!!e),d.style.translate=e?`${e[0]}px ${e[1]}px`:""}});o.append(...ue.nodes);function ye(t=!1){let o=X;if(!o)return;X=void 0;let{element:n,before:r}=o,i=new Map([...r.keys()].map(e=>[e,[n.style.getPropertyValue(e),n.style.getPropertyPriority(e)]]));for(let[e,[t,o]]of i)t===r.get(e).value&&o===r.get(e).priority&&i.delete(e);let s=()=>[...r.values()].reverse().forEach(e=>e.restore());if(a(n,r.keys(),s),s(),!t&&i.size){let t=[];for(let t of i.keys())e.remember(n,t);a(n,i.keys(),()=>{for(let[o,[a]]of i){let i=e.tokens()?.noteDesignTokenOverride(n,o,a);t.push(i?.undo),n.style.setProperty(o,a,i?.priority??r.get(o).priority),e.track(n,o)}}),e.history.push({element:n,geometry:o.changes,undo(){a(n,r.keys(),()=>{s(),t.reverse().forEach(e=>e?.());for(let t of r.keys())e.tokens()?.syncDesignTokenBinding(n,t),e.track(n,t)}),s()},redo(){a(n,i.keys(),()=>{for(let[t,[o,r]]of i)n.style.setProperty(t,o,r),e.tokens()?.syncDesignTokenBinding(n,t),e.track(n,t)})}}),y(`Resized: ${(e=>e.map(e=>`${e.property} ${e.to}`).join(", "))(o.changes)}`)}void 0!==o.pointer&&o.source.hasPointerCapture(o.pointer)&&o.source.releasePointerCapture(o.pointer),o.source.removeAttribute("data-active"),u.hidden=m[0].hidden=m[1].hidden=!0,e.update(),$e()}function be(t,o,n,r,a){ye(!0);let s=e.selected();if(!e.enabled()||!s||T(s)||s===Y)return;let l=H(s),{css:d,width:p,height:c,borderWidth:m,borderHeight:g,border:f,replaced:u,aspect:y,ratio:b}=l;if(!l.axes[2===t?1:0]||!l.axes[1===t?0:1])return;let x,v=h(s),w=V(s),$=J&&"grid"===w.kind,k={},S=w.parentStyle,E=w.parent&&h(w.parent),_=(e,t)=>["stretch","normal"].includes("auto"===e?t:e)&&!u&&!y,C=(e,t)=>Math.abs((e?v.width+P(d,["margin-left","margin-right"])*v.width/m:v.height+P(d,["margin-top","margin-bottom"])*v.height/g)-t)<1.5;if("flex"===w.kind&&E&&S&&_(d.alignSelf,S.alignItems)){let e=w.row?v.height/g:v.width/m,t=w.row?E.height-e*P(S,j):E.width-e*P(S,L);C(!w.row,t)&&(k[w.row?"height":"width"]="align-self")}"grid"===w.kind&&S&&(x=[!0,!1].map(e=>{let t=function(e,t,o){let n=(o?t.gridTemplateColumns:t.gridTemplateRows).split(/\s+/).filter(e=>/^[\d.]+px$/.test(e)).map(A),r=A(o?t.columnGap:t.rowGap),i=[],a=[],s=0;for(let e of n)i.push(s),a.push(s+e),s+=e+r;let l=h(e),d=(o?l.width/e.offsetWidth:l.height/e.offsetHeight)||1;return{starts:i,ends:a,gap:r,scale:d,origin:(o?l.left:l.top)+d*P(t,o?["padding-left","border-left-width"]:["padding-top","border-top-width"]),size:n.at(-1)??0}}(w.parent,S,e),o=(e?v.left:v.top)-t.origin,n=(e?v.right:v.bottom)-t.origin,r=0;t.starts.forEach((e,n)=>{Math.abs(e*t.scale-o)<Math.abs(t.starts[r]*t.scale-o)&&(r=n)});let i=q(t.starts,t.ends,t.gap,t.size,r,n/t.scale)+r-1;return(e?_(d.justifySelf,S.justifyItems):_(d.alignSelf,S.alignItems))&&t.ends.length&&C(e,((t.ends[i]??t.ends.at(-1))-t.starts[r])*t.scale)&&(k[e?"width":"height"]=e?"justify-self":"align-self"),{...t,start:r,edge:n/t.scale,from:e?d.gridColumnEnd:d.gridRowEnd}}));let z=$?["grid-column-end","grid-row-end"]:["width","height","flex-basis","flex-grow","flex-shrink"],N=v.width/m,I=v.height/g;X={element:s,kind:t,ex:o,ey:n,source:r,pointer:a?.pointerId,x:a?.clientX??0,y:a?.clientY??0,dx:0,dy:0,sx:N,sy:I,width:p,height:c,start:{left:v.left,top:v.top,right:v.right,bottom:v.bottom,width:v.width,height:v.height},rect:v,layout:w,snap:$,ratio:b,lock:!1,stretch:k,grid:x,lines:W(s,w,N,I),css:Object.fromEntries(D.map(e=>[e,d.getPropertyValue(e)])),ratioText:y||`${M(p)} / ${M(c)}`,minWidth:f?Math.max(16,P(d,L)):16,minHeight:f?Math.max(16,P(d,j)):16,changes:[],before:new Map(z.map(e=>[e,i(s,e)]))}}function xe(e,t,o,n){e.changes=[];for(let r of[!0,!1]){if(e.kind===(r?2:1))continue;let i=e.grid[r?0:1];if(!i.ends.length)return!1;let a=q(i.starts,i.ends,i.gap,i.size,i.start,i.edge+(r?t:o)/i.scale),s=r?"grid-column-end":"grid-row-end";n(s,`span ${a}`),e.changes.push({mode:"span",layout:e.layout.label,property:s,from:i.from,to:`span ${a}`,effects:[`spans ${a} ${r?"column":"row"} track${a>1?"s":""}`]})}return!0}function ve(e,t,o,n){let{element:r,kind:i,layout:a,css:s}=e,l=e.ratio||(e.lock?e.width/e.height:0),d=e.width+t/e.sx,p=e.height+o/e.sy;if(l){1===i||3===i&&Math.abs(t/e.sx)/e.width>=Math.abs(o/e.sy)/e.height?p=d/l:d=p*l;let n=Math.max(1,e.minWidth/d,e.minHeight/p);d*=n,p*=n}else d=Math.max(e.minWidth,d),p=Math.max(e.minHeight,p);let c=new Map([...l||2!==i?[["width",d]]:[],...l||1!==i?[["height",p]]:[]]),m=new Map([...c.keys()].map(e=>[e,[]])),h="flex"===a.kind&&"absolute"!==a.position&&"fixed"!==a.position?a.row?"width":"height":"",g=!!h&&c.has(h)&&"auto"!==s["flex-basis"],f="0"!==s["flex-grow"];for(let[e,t]of c)n(e,C(t));if(h&&c.has(h)){let e=m.get(h);(g||f)&&e.push(`${h} overrides flex: ${s.flex||`${s["flex-grow"]} ${s["flex-shrink"]} ${s["flex-basis"]}`}`),g&&(n("flex-basis",C(c.get(h))),e.push(`sets flex-basis: ${C(c.get(h))}`)),f&&(n("flex-grow","0"),e.push("sets flex-grow: 0")),A(getComputedStyle(r).getPropertyValue(h))<c.get(h)-.5&&"0"!==s["flex-shrink"]&&(n("flex-shrink","0"),e.push("sets flex-shrink: 0"))}for(let[t,o]of c){let a=m.get(t),l=A(getComputedStyle(r).getPropertyValue(t));if(e.stretch[t]&&a.push(`${t} overrides ${e.stretch[t]}: stretch`),e.ratio&&a.length<9&&t===(2===i?"height":"width")&&a.push(`keeps aspect ratio ${e.ratioText}`),Math.abs(l-o)>.5){let e=s[`${l<o?"max":"min"}-${t}`];a.push(l<o?"limited by "+("none"!==e?`max-${t}: ${e}`:"its container"):"held at "+(["auto","0px"].includes(e)?"its content size":`min-${t}: ${e}`)),c.set(t,l),n(t,C(l)),t===h&&g&&n("flex-basis",C(l))}}return e.changes=[...c].map(([t,o])=>({mode:t===h&&g?"flex-basis":"size",layout:a.label,property:t,from:C("width"===t?e.width:e.height),to:C(o),effects:m.get(t)})),!0}function we(t,o,n=!0){let r=X;if(!r)return;if(!e.enabled()||e.selected()!==r.element||T(r.element))return void ye(!0);let{element:i,before:s,start:l,kind:d}=r,p=(e,t)=>{r.dx=e,r.dy=t;let o=!0;return a(i,s.keys(),()=>{for(let[e,t]of s)i.style.setProperty(e,t.value,t.priority);o=(r.snap?xe:ve)(r,e*r.ex,t*r.ey,(e,t)=>i.style.setProperty(e,t,s.get(e).priority))}),o};if(!p(t,o))return Y=i,void ye(!0);let c=h(i),g=e=>e?[[c.left,c.left-l.left],[c.right,c.right-l.right]]:[[c.top,c.top-l.top],[c.bottom,c.bottom-l.bottom]],f=!n&&!r.snap,y=e=>{let t=e?c.width-l.width:c.height-l.height,o=0,n=4;if(f&&d&(e?1:2)&&Math.abs(t)>.5)for(let[i,a]of g(e))if(Math.abs(a)>.5&&Math.abs(a)>=Math.abs(t)/3)for(let s of r.lines[e?"x":"y"])Math.abs(s.at-i)<=n&&(n=Math.abs(s.at-i),o=(s.at-i)*t/a);return o},b=y(!0),x=y(!1);(b||x)&&(p(t+b*r.ex,o+x*r.ey),c=h(i)),m.forEach((e,t)=>{let o=!t;if(e.hidden=!0,f&&d&(o?1:2))for(let[t,n]of g(o)){let i=Math.abs(n)>.5&&Math.abs(n)>=Math.abs(o?c.width-l.width:c.height-l.height)/3&&r.lines[o?"x":"y"].find(e=>Math.abs(e.at-t)<.75);if(!i)continue;let a=Math.min(i.from,o?c.top:c.left),s=Math.max(i.to,o?c.bottom:c.right);e.hidden=!1,Object.assign(e.style,o?{left:C(i.at),top:C(a),width:"1px",height:C(s-a)}:{left:C(a),top:C(i.at),width:C(s-a),height:"1px"})}}),r.rect=c,u.textContent=`${Math.round(c.width/r.sx)} × ${Math.round(c.height/r.sy)}`,u.hidden=!1,$e()}function $e(){ue.sync();let t=e.selected(),n=e.enabled()&&!!t?.isConnected;if(o.hidden=!n,o.removeAttribute("data-on"),Z=null,b.hidden=!t?.isConnected,z.hidden=!0,n||ye(!0),!t?.isConnected)return;t!==Y&&(Y=null);let r=ue.shown(t),i=r!==t,a=i?null:T(t),s=a===O,l=performance.now();N=s?N||l:0,clearTimeout(I),s&&(I=window.setTimeout($e,400));let p=s&&l-N>=400,g=s||i?null:a??(Y?"Host styles override this preview. Select the parent or another element.":null),f=k(t,r);(g||i||s)&&X&&ye(!0);let y=e.panel(),v=[...y.querySelectorAll(".design-section")].find(e=>"Layout"===e.querySelector("summary")?.textContent)??y;b.parentElement!==v&&v.append(b);let w=v!==y&&v.querySelector("summary");w&&z.parentElement!==w&&w.append(z),z.hidden=!p;let E=g||f?K(t):null;$.hidden=!E,E&&$.setAttribute("aria-label",`Select movable parent ${E.tagName.toLowerCase()}`),S.hidden=!!g||i||"grid"!==V(t).kind,S.setAttribute("aria-pressed",String(J));let{moves:M,sizes:A}=F(fe(t)),P=M.flatMap(e=>e.move?[_(e.move)[0].slice(2)]:[]),L=!0;try{L=!!localStorage.getItem("palette:geometry-moved")}catch{}x.textContent=[g,f].filter(Boolean).join(" · ")||[...new Set([...P,...[...X?.changes??[],...M,...A].flatMap(e=>e.effects)])].join(" · ")||(L||i?"":"Drag to reorder · M, then ⌥↑/⌥↓");let j=y.closest(".design-inspector")?.querySelector(".design-inspector__heading");j&&de.parentElement!==j&&j.querySelector(".design-inspector__fold")?.before(de),x.hidden=!x.textContent,b.hidden=x.hidden&&$.hidden&&S.hidden;let D=h(r),q=e.options.bounds?.(r)??{left:0,top:0,right:innerWidth,bottom:innerHeight};if((g||p)&&f||!n||D.right<=q.left||D.left>=q.right||D.bottom<=q.top||D.top>=q.bottom)return;o.setAttribute("data-on","");let R=H(t);Q=g||i||p?[!1,!1]:R.axes;let W=`${t.tagName.toLowerCase()}${t.id?`#${t.id}`:""}`;d.setAttribute("aria-label",`${f?"Resize":"Move or resize"} ${W}: ${f?"":`${se(["Alt"],"↑/↓")} move, ${se(["Alt","Shift"],"↑/↓")} move out or into, `}${se([ae],"arrows")} resize, ${se(["Shift",ae],"arrows")} by 10px`);let G=devicePixelRatio||1,B=e=>Math.round(e*G)/G,U=B(D.left),ee=B(D.top),te=B(D.right),oe=B(D.bottom);Z={left:U,top:ee,right:te,bottom:oe};let ne=(e,t)=>getComputedStyle(e)[t].match(/[\d.]+/g)?.map(Number)??[],[re,ie]=[ne(r,"backgroundColor"),ne(m[0],"backgroundColor")];o.style.setProperty("--palette-sel",re.length>2&&(re[3]??1)>.5&&Math.hypot(re[0]-ie[0],re[1]-ie[1],re[2]-ie[2])<90?"#e5359b":""),Object.assign(d.style,{left:C(U),top:C(ee),width:C(te-U),height:C(oe-ee),clipPath:`inset(${[q.top-ee,te-q.right,oe-q.bottom,q.left-U].map(e=>C(Math.max(0,e))).join(" ")})`});let le=te-U<24||oe-ee<24,pe=le?0:4,ce=12-pe,he=Q[0]&&Q[1],ge=(e,t,o)=>o<0?e+.5:o>0?t-.5:B((e+t)/2)+.5,be=(e,t,o)=>o<0?[e-ce,e+pe]:o>0?[t-pe,t+ce]:t-e-2*pe>=12?[e+pe,t-pe]:[(e+t-8-4)/2,(e+t+8+4)/2];for(let{handle:e,ex:t,ey:o}of c){let n=ge(U,te,t),r=ge(ee,oe,o),i=!t||!o,[a,s]=be(U,te,t),[l,d]=be(ee,oe,o);e.hidden=(i?!Q[t?0:1]||!!R.ratio:!he)||n<q.left||n>q.right||r<q.top||r>q.bottom,e.toggleAttribute("data-small",le||i&&he&&(t?oe-ee:te-U)<40),Object.assign(e.style,{left:C(a),top:C(l),width:C(s-a),height:C(d-l)}),e.style.setProperty("--x",C(n-3.5-a)),e.style.setProperty("--y",C(r-3.5-l))}let xe=oe+7+30<q.bottom;Object.assign(u.style,{left:C(Math.max(q.left+40,Math.min(q.right-40,(U+te)/2))),top:C(xe?oe+7+4:ee-7-24)}),me()}$.addEventListener("click",()=>{let t=e.selected(),o=t&&K(t);o&&e.select(o)}),S.addEventListener("click",()=>{ye(!0),J=!J,$e()});for(let{handle:e,ex:t,ey:o}of c){let n=(t?1:0)+(o?2:0);e.addEventListener("pointerdown",r=>{0===r.button&&(r.preventDefault(),r.stopPropagation(),be(n,t,o,e,r),e.toggleAttribute("data-active",!!X),me(),X&&e.setPointerCapture(r.pointerId))}),e.addEventListener("pointermove",e=>{X?.pointer===e.pointerId&&(X.lock=e.shiftKey&&3===n,we(e.clientX-X.x,e.clientY-X.y,e.altKey))}),e.addEventListener("pointerup",()=>ye()),e.addEventListener("pointercancel",()=>ye(!0)),e.addEventListener("lostpointercapture",()=>ye(!0)),e.addEventListener("click",e=>{e.preventDefault(),e.stopPropagation()})}d.addEventListener("blur",()=>{X?.keyboard&&ye()});let ke=t=>{let n=B[t.key],r=t.composedPath(),i=r[0]===d,a=!(t.altKey||t.ctrlKey||t.metaKey||t.shiftKey),s=r.some(e=>p(e)&&e.matches("input,textarea,select,[contenteditable]:not([contenteditable=false])")),l=re;if(l&&!s&&e.options.host.classList.contains("design-active")&&t.key.toLowerCase()===l.key&&t.shiftKey===l.shift&&t.altKey===l.alt&&t.ctrlKey===l.ctrl&&t.metaKey===l.meta)return t.preventDefault(),t.stopImmediatePropagation(),void(t.repeat||(U={at:t.timeStamp,was:ne},pe(!ne)));let c,m=e.selected();if(!X&&i&&"Escape"===t.key?c=()=>d.blur():!a||"m"!==t.key.toLowerCase()||i||s||r.includes(e.options.host)||!o.hasAttribute("data-on")||e.options.reservedKey?.(t)?i&&n&&m&&t.altKey&&!t.ctrlKey&&!t.metaKey&&!X&&(c=()=>ue.key(m,n[0]+n[1]>0,t.shiftKey)):c=()=>d.focus({preventScroll:!0}),c)return t.preventDefault(),t.stopImmediatePropagation(),void c();if(("Escape"!==t.key||!X)&&(!i||!n||!t.ctrlKey&&!t.metaKey||t.altKey))return;if(t.preventDefault(),t.stopImmediatePropagation(),!n)return ye(!0);let h=n[0]?1:2;if(X&&X.kind!==h&&ye(),!X&&Q[h-1]&&be(h,1,1,d),!X)return;X.keyboard=!0;let g=X.grid?.[h-1],f=X.snap?(g.size+g.gap)*g.scale:(t.shiftKey?10:1)*(1===h?X.sx:X.sy);we(X.dx+n[0]*f,X.dy+n[1]*f)};window.addEventListener("keydown",ke,{capture:!0,signal:ge.signal}),f("keydown",ke,{capture:!0,signal:ge.signal},"window");let Se=e=>{U&&re&&(e.key.toLowerCase()===re.key||{Shift:re.shift,Alt:re.alt,Control:re.ctrl,Meta:re.meta}[e.key])&&le(e.timeStamp),X?.keyboard&&/^(Arrow|Control|Meta)/.test(e.key)&&ye()};window.addEventListener("keyup",Se,{capture:!0,signal:ge.signal}),f("keyup",Se,{capture:!0,signal:ge.signal},"window");let Ee=()=>{if(void 0!==X?.pointer){let e=h(X.element),t=e.left-X.rect.left,o=e.top-X.rect.top;X.x+=t,X.y+=o;for(let e of["left","right"])X.start[e]+=t;for(let e of["top","bottom"])X.start[e]+=o;for(let e of X.lines.x)e.at+=t,e.from+=o,e.to+=o;for(let e of X.lines.y)e.at+=o,e.from+=t,e.to+=t;we(X.dx-t,X.dy-o)}$e()},_e=e=>{ee=g(e),te=e.composedPath(),he()};for(let[e,t]of[["scroll",Ee],["pointermove",_e],["focusin",he],["focusout",he]]){let o={capture:!0,passive:"focusin"!==e&&"focusout"!==e,signal:ge.signal};window.addEventListener(e,t,o),f(e,t,o,"window")}return window.addEventListener("blur",()=>le(1/0),{signal:ge.signal}),f("blur",()=>setTimeout(()=>document.hasFocus()||le(1/0)),{signal:ge.signal},"window"),document.addEventListener("visibilitychange",()=>{document.hidden&&le(1/0)},{signal:ge.signal}),u.hidden=m[0].hidden=m[1].hidden=!0,$e(),e.signal.addEventListener("abort",()=>{ye(!0),ge.abort(),clearTimeout(I),cancelAnimationFrame(oe),pe(!1),o.remove(),n.remove(),b.remove(),de.remove(),z.remove()},{once:!0}),{render:$e,cancel:()=>ye(!0),proposal:e=>(ue.detach(),R(fe(e))),moved:e=>fe(e).some(e=>e.move)}}export{O as WAIT,X as bindGeometry,K as eligibleAncestor,R as geometryProposal,T as geometryReason,q as spanFor};

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(--komo-selection,#0c93f5); 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 Palette'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; flex-wrap:wrap; align-items:center; gap:8px; min-height:36px; padding:10px 12px; border-top:1px solid #ffffff0d; color:#909090; font-size:12px; container-type:inline-size; }\n.design-inspector__count:empty { display:none; }\n.design-inspector__actions { display:flex; align-items:center; gap:2px; margin-left:auto; }\n.design-inspector__actions button:disabled { cursor:default; opacity:.35; }\n/* Comment is Palette's primary action, as on the Comments panel. */\n.design-inspector__actions button:last-child { flex:none; white-space:nowrap; 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@container (max-width:419px) { .design-inspector__actions { flex-basis:calc(100% + 6px); margin-left:-6px; } .design-inspector__actions button:last-child { margin-left:auto; } }\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";
+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(--palette-selection,var(--komo-selection,#0c93f5)); 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 Palette'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; flex-wrap:wrap; align-items:center; gap:8px; min-height:36px; padding:10px 12px; border-top:1px solid #ffffff0d; color:#909090; font-size:12px; container-type:inline-size; }\n.design-inspector__count:empty { display:none; }\n.design-inspector__actions { display:flex; align-items:center; gap:2px; margin-left:auto; }\n.design-inspector__actions button:disabled { cursor:default; opacity:.35; }\n/* Comment is Palette's primary action, as on the Comments panel. */\n.design-inspector__actions button:last-child { flex:none; white-space:nowrap; 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@container (max-width:419px) { .design-inspector__actions { flex-basis:calc(100% + 6px); margin-left:-6px; } .design-inspector__actions button:last-child { margin-left:auto; } }\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}from"./chunk-XP22SMEQ.js";import{a as t,b as n,c as i,f as o,g as s,i as a}from"./chunk-4FX5IS2U.js";import{a as r,b as d}from"./chunk-XOMOONGK.js";import{a as l,b as c}from"./chunk-DZRM3YUQ.js";import{a as p}from"./chunk-6HM4JQLV.js";import{E as g,F as u,j as h,l as m,o as f,t as b}from"./chunk-IQOPM3JF.js";var v=(e,t)=>Object.assign(g("button",e,t),{type:"button"}),y=e=>"function"==typeof matchMedia&&matchMedia(e).matches,x=()=>y("(prefers-reduced-motion: reduce)");function _(_){let k=g("style");k.textContent='.design-outline{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;outline:2px solid var(--komo-selection,#0c93f5);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;flex-wrap:wrap;align-items:center;gap:8px;min-height:36px;padding:10px 12px;border-top:1px solid #ffffff0d;color:#909090;font-size:12px;container-type:inline-size}.design-inspector__count:empty{display:none}.design-inspector__actions{display:flex;align-items:center;gap:2px;margin-left:auto}.design-inspector__actions button:disabled{cursor:default;opacity:.35}.design-inspector__actions button:last-child{flex:none;white-space:nowrap;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)}@container (max-width:419px){.design-inspector__actions{flex-basis:calc(100% + 6px);margin-left:-6px}.design-inspector__actions button:last-child{margin-left:auto}}.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 w=null,E=import("./design-panel-HTN6LR3V.js").then(e=>{k.textContent+=e.designPanelStyles,w=e},()=>{N.textContent="Design controls unavailable · try again"}),C=g("aside","design-inspector");C.setAttribute("role","dialog"),C.setAttribute("aria-label","Design mode inspector"),C.setAttribute("aria-hidden","true"),C.hidden=!0;let A=g("div","design-outline");A.setAttribute("aria-hidden","true");let P=g("div","design-outline design-outline--prospective");P.setAttribute("aria-hidden","true"),P.dataset.kind="hover",P.hidden=!0;let L=g("div","design-inspector__heading"),S=null,D=v("design-inspector__back");D.hidden=!0,D.append(u("chevron")),D.addEventListener("click",()=>S?.run());let T=v("design-inspector__parent");T.hidden=!0;let z=g("span","design-inspector__target");z.tabIndex=-1;let R=g("small"),M=v("design-inspector__close");M.setAttribute("aria-label","Exit design mode"),M.append(u("close"));let j=v("design-inspector__fold");j.append(u("chevron"));let B=g("div","design-inspector__identity");B.append(T,z,R),L.append(D,B,j,M);let F=g("div","design-inspector__controls"),I=g("div","design-inspector__bar"),K=g("span","design-inspector__count");K.title=t;let N=g("p","design-inspector__status");N.setAttribute("role","status");let H=g("div","design-inspector__actions"),O=e=>{let t=v("design-inspector__tool");return t.dataset.tip=e,t.setAttribute("aria-label",e),t},U=O("Undo"),$=O("Redo");U.dataset.tip="Undo · "+(p()?"⌘Z":"Ctrl+Z"),$.dataset.tip="Redo · "+(p()?"⌘⇧Z":"Ctrl+Y");let Q=O("Reset"),V=O("Copy CSS");V.append(u("copy"));let X=v("","Comment"),Z=v("design-text-edit","Edit text");Z.title="Edit text",Z.setAttribute("aria-label","Edit selected text inline"),H.append(U,$,Q,V,X);let q=g("div","design-inspector__compare");q.setAttribute("role","group"),q.setAttribute("aria-label","Compare with the page");let G=["Before","After"].map((e,t)=>{let n=v("",e);return n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>je(!t)),q.append(n),n});I.append(K,q,N,H);let J,W=g("div");C.append(L,W,F,I),_.root.append(k,A,P),(_.panelRoot??_.root).append(C);let Y,ee=!1,te=null,ne=!0,ie=0,oe=null,se=null,ae=()=>_.page?.()??location.pathname,re=ae(),de=new Map,le=null,ce=0,pe=0,ge=null,ue="",he=null,me=null,fe=new Map,be=new WeakSet,ve=new Map,ye=new AbortController,xe=()=>import("./design-export-BNNHI4JP.js"),_e=e=>{Y??=xe().then(({footerTips:t})=>t(I,_.root,ye.signal,e),()=>{Y=void 0})};I.addEventListener("pointerover",_e),I.addEventListener("focusin",_e);let ke=new Set,we=[],Ee=[],Ce=!1,Ae=we.push.bind(we);we.push=(...e)=>(Ce||(Ee.length=0),Ae(...e));let Pe,Le=n(we);function Se(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let s=he?.originalDesignTokenStyle(e,t),a=fe.get(e);a||(fe.set(e,a=new Map),(s?.absent||!e.hasAttribute("style"))&&be.add(e)),a.has(t)||a.set(t,s??{...o(e,t),value:n,priority:i})}function De(e,t){let n=ve.get(e);n||ve.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(fe.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||ve.delete(e),qe()}function Te(e){return(ve.get(e)?.size??0)+Number(h(e)&&!!le?.hasChanges(e))+ +!!he?.hasReactPropChanges(e)||+!!he?.hasDesignTokenEdit(e)}_.design?.experimentalGeometry&&import("./design-geometry-DPMHGQEK.js").then(e=>{ye.signal.aborted||(Pe=e.bindGeometry({options:_,signal:ye.signal,selected:()=>oe,enabled:()=>ee&&ne&&!Re&&!le?.element,remember:Se,track:De,history:we,update:ot,select:Ye,tokens:()=>he,panel:()=>F,before:()=>Re,pick(e,t){let n=d(_.targetAt(e,t));n&&!_.host.contains(n)&&(ne=!0,dt(n))}}))});let ze,Re=!1,Me=0;function je(e,t=!0){if(Pe?.cancel(),ne=!1,qe(),e===Re)return;e&&le?.element&&st(),Re=e,e&&he?.showDesignBefore(!0);let n=t&&!x();for(let[t,i]of fe){let o=ve.get(t);a(t,i.keys(),()=>{for(let n of i.keys()){let i=fe.get(t)?.get(n);e?Be(t,n,i):o?.has(n)&&t.style.setProperty(n,o.get(n),i?.priority)}},n,be.has(t))}n&&(clearTimeout(Me),Me=window.setTimeout(()=>{Me=0,ot()},330)),le?.showBefore(e,t),e||he?.showDesignBefore(!1),G.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),C.toggleAttribute("data-before",e),ot()}function Be(e,t,n){i(e,t,n),be.has(e)&&s(e)}function Fe(e,t,n){if(!oe||(e.setAttribute("aria-invalid",String(null===n)),null===n))return;Se(oe,t);let i=he?.noteDesignTokenOverride(oe,t,n);Le.override(e,i?.undo),oe.style.setProperty(t,n,i?.priority??fe.get(oe)?.get(t)?.priority),De(oe,t),ot()}function Ie(e,t,n=!0){oe&&(Le.commit(e,oe,t,n),ot())}let Ke,Ne,He=()=>z.focus({preventScroll:!0}),Oe=null;function Ue(t){let n=C.getRootNode().activeElement,i=n&&oe===Oe&&F.contains(n)&&Ne;if(Oe=oe,i&&Ke?.(!1),ht(),F.replaceChildren(),i&&(Ke=i(F,n,()=>{Ke=void 0},()=>{ee&&oe&&He()})),$e(),!oe)return J&&F.append(J.empty),z.textContent="Select an element",R.textContent="",void(T.hidden=!0);let s=`${oe.tagName.toLowerCase()}${oe.id?`#${oe.id}`:""}`;z.textContent=s,R.textContent="iframe"===oe.localName?"Frame only · contents are isolated":oe.classList.length?`.${[...oe.classList].slice(0,2).join(".")}`:"";let a=oe.parentElement;T.hidden=!a||a===oe.ownerDocument.body||a===oe.ownerDocument.documentElement,T.textContent=a?.tagName.toLowerCase()??"",T.setAttribute("aria-label",`Select parent ${T.textContent}`);let r=oe,d=w;d?(d.renderPanel(F,{element:r,changed:ve.get(r),collapsed:ke,editText:Z,begin:(e,t)=>Le.begin(e,o(r,t)),apply:Fe,commit:Ie,cancel(e,t){Le.cancel(e,r,t),De(r,t),ot()},rerender:Ue,reserved:_.reservedKey}),t&&F.prepend(t),(_.design?.tokens||_.design?.themes||e(r,_.design)||r.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(me??=import("./react-props-panel-4XO3NSX3.js").then(e=>he=e).catch(e=>{throw me=null,e}),me.then(e=>{!ee||oe!==r||e.attachDesignSystemControls(r,F,d,_,{signal:ye.signal,select:Ye,refresh:Ue,retainedProps:t,updateActions:ot,history:we,isFieldDirty:Le.isDirty,syncStyles(){for(let e of fe.get(r)?.keys()??[])De(r,e)},onStyleEdit(e,t,n){Se(r,e.property,n),De(r,e.property),Le.begin(t,{value:n,priority:r.style.getPropertyPriority(e.property)}),Ie(t,e.property)}})}).catch(()=>{}))):E.then(()=>{ee&&oe===r&&Ue()})}function $e(){C.toggleAttribute("data-empty",X.hidden=!oe),C.parentElement?.toggleAttribute("data-design-empty",ee&&!oe),J?.update(!!oe)}function Qe(e){return!!(ve.get(e)?.size||h(e)&&le?.hasChanges(e)||he?.hasReactPropChanges(e)||he?.hasDesignTokenEdit(e))}function Ve(){st(),We?.disconnect(),oe=null,se=null,A.hidden=P.hidden=!0,Ue(),ot()}function Xe(e,t,n=!1,i=A){if(!ee||!ne||!e?.isConnected)return void(i.hidden=!0);let o=m(e);if(o.width&&o.height){if(i.dataset.kind=t,n&&(e!==ge||t!==ue)){ge=e,ue=t,clearTimeout(pe);let n=C.getBoundingClientRect(),i=e=>o.left<e+n.width&&o.right>e&&o.top<n.bottom&&o.bottom>n.top;_.flip&&n.width&&i(n.left)&&!i(document.documentElement.clientWidth-n.right)&&(pe=window.setTimeout(_.flip,"hover"===t?350:0))}i.hidden=!l(i,o,e,_.bounds?.(e))}else i.hidden=!0}let Ze=null;function qe(e=!1){Pe?.render(),Xe(oe??se??Ze,oe||!se?"selected":"hover",e),Xe(oe&&se!==oe?se:null,"hover",!1,P)}function Ge(){ce||(ce=requestAnimationFrame(()=>{ce=0,oe&&(re!==ae()||!oe.isConnected&&!Je())&&Ve(),se&&!se.isConnected&&(se=null),qe()}))}function Je(){let e=oe;return!(!e||re!==ae()||!he?.retainReactPropSelection(e,F,_,we,le,(t,n)=>{oe=t,se=t,We?.disconnect(),We?.observe(t),Qe(e)||de.delete(e),de.set(t,re),Ue(n)}))&&(ot(),!0)}let We="function"==typeof ResizeObserver?new ResizeObserver(Ge):null;function Ye(e){!r(e)||!e.isConnected||_.host.contains(e)||(J?.settle(),le?.element&&le.element!==e&&st(),We?.disconnect(),We?.observe(e),oe=e,se=e,re=ae(),de.set(e,re),Ue(),qe(!0),ot())}let et,tt=()=>y("(max-width:520px)");function nt(e){C.toggleAttribute("data-folded",e&&tt()),j.setAttribute("aria-expanded",String(!C.hasAttribute("data-folded"))),j.setAttribute("aria-label",C.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function it(e){nt(!1),tt()&&requestAnimationFrame(()=>{let t=m(e),n=C.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:x()?"auto":"smooth"})})}function ot(){Ge(),U.disabled=!(J?.parked||we.length||he?.canUndoReactProp(oe)||he?.canUndoDesignTokenEdit(oe)),$.disabled=!Ee.length,Q.disabled=!function(){let e=oe,t=e?Te(e):0,n=t+(e&&J?.tokens?.size||0);return K.textContent=n?`${n} change${n>1?"s":""}`:"",I.toggleAttribute("data-changes",n>0||!U.disabled),q.hidden=!!J?.parked||!n&&!Re,t}(),V.disabled=!oe||!ve.get(oe)?.size,X.disabled=!oe,Z.disabled=!!le?.busy||!oe?.isConnected||!h(oe),Z.textContent=le?.isEditing(h(oe)?oe:null)?"Done editing":"Edit text",Z.setAttribute("aria-label",le?.isEditing(h(oe)?oe:null)?"Finish inline text editing":"Edit selected text inline"),oe&&!Me&&w?.syncFields(F,Le.isDirty),$e()}function st(e=!1){le?.finish(e),ot()}function at(e){if(!ee)return;if(e.composedPath().includes(_.host))return se=null,void qe();let t=f(e),n=d(_.targetAt(t.x,t.y),e.metaKey||e.ctrlKey);se=n&&!_.host.contains(n)?n:null,se&&(ne=!0),qe(!oe)}function rt(e){if(!ee||0!==e.button)return;let t=e.composedPath();if(t.includes(_.host))return void(h(t[0])&&t[0].matches(".frame-stage")&&Ve());let n=f(e),i=d(_.targetAt(n.x,n.y),e.metaKey||e.ctrlKey);i&&i!==i.ownerDocument.body&&i!==i.ownerDocument.documentElement?_.host.contains(i)||(ne=!0,(!le?.element||i!==le.element&&!le.element.contains(i))&&(e.preventDefault(),e.stopImmediatePropagation(),dt(i))):le?.element||Ve()}function dt(e){le?.element&&st(),Ye(e);let t=_.root.activeElement??document.activeElement;h(t)&&t.blur(),Ke?.(!1)}function lt(e){!ee||e.composedPath().includes(_.host)||(e.preventDefault(),e.stopImmediatePropagation(),oe&&it(oe),2===e.detail&&oe?.contains(e.target)&&!Z.disabled&&!le?.element&&Z.dispatchEvent(new MouseEvent("click",e)))}function ct(e){if(!e.isComposing&&229!==e.keyCode){if(le?.handleKey(e))return void Z.focus({preventScroll:!0});ee&&et?.(e)||e.composedPath().includes(_.host)&&pt(e)}}function pt(e){!ee||"Escape"!==e.key||e.isComposing||229===e.keyCode||e.defaultPrevented&&!e.composedPath().includes(_.host)||(e.preventDefault(),e.stopImmediatePropagation(),te=oe&&[oe,ae()],Ve(),gt(!1),_.onExit())}function gt(e){if(e||(ht(),le?.finish(),ee&&(ze=Re,je(!0,!1)),he?.restoreThemes(C)),e&&!ee&&void 0!==ze){let e=ze;ze=void 0,je(e,!1)}e&&oe&&(re!==ae()||!oe.isConnected&&!Je())&&Ve(),e&&!ee&&!oe&&te?.[0].isConnected&&te[1]===ae()&&Ye(te[0]),e&&(te=null),clearTimeout(ie),ie=0,ee=e,$e(),e?(C.hidden=!1,C.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{ee&&(C.dataset.state="active")}),Ue(),nt(!oe),qe(),M.focus({preventScroll:!0})):(se=null,A.hidden=P.hidden=!0,C.setAttribute("aria-hidden","true"),C.dataset.state="closing",x()?(C.hidden=!0,delete C.dataset.state):ie=window.setTimeout(()=>{ie=0,ee||(C.hidden=!0,delete C.dataset.state)},250))}function ut(){ht(),je(!1,!1),he?.resetPreviews();for(let[e,t]of fe)a(e,t.keys(),()=>{for(let[n,i]of t)Be(e,n,i)},!1,be.has(e)),be.delete(e);fe.clear(),ve.clear(),we.length=Ee.length=0,le?.restoreAll(),J?.tokens?.reset(),de.clear(),ot()}function ht(){Pe?.cancel(),_.root.dispatchEvent(new Event("komo-preview-cancel"))}function mt(e){let t=ve.get(e);return t&&Pe?.moved(e)?new Map([...t].filter(([e])=>"display"!==e)):t}function ft(e,t){return t(e,mt(e),t=>fe.get(e)?.get(t)?.computed,he?.tokenBoundProperties(e),[h(e)?le?.proposal(e):void 0,he?.proposedDesignChanges(e),Pe?.proposal(e)],he?.designContext(e,_.design))}function bt(e){le?.isEditing(h(e)?e:null)&&st(!0);let t=ve.get(e),n=(h(e)&&le?.hasChanges(e))??!1,i=he?.hasReactPropChanges(e)??!1,o=he?.hasDesignTokenEdit(e)??!1;if(t?.size||n||i||o){n&&h(e)&&le?.reset(e),o&&he?.resetDesignTokenEdits(e),a(e,t?.keys()??[],()=>{for(let n of t?.keys()??[])Be(e,n,fe.get(e)?.get(n))},!1,be.has(e)),ve.delete(e),fe.delete(e),be.delete(e),de.delete(e),i&&he?.resetReactProps(e);for(let t=we.length-1;t>=0;t--)we[t].element===e&&we.splice(t,1);Ee.length=0}}Z.addEventListener("click",e=>{le||oe&&(N.textContent="Loading inline text editor…",import("./inline-text-editor-AMFRKW5Z.js").then(t=>{le||!oe||!ee||(le=t.bindInlineTextTools({button:Z,status:N,selected:()=>h(oe)?oe:null,active:()=>ee,onChange:ot,onCommit(e){we.push({kind:"text",element:e})}}),le.toggle(e))}).catch(()=>{N.textContent="Inline text editing is unavailable."}))}),j.addEventListener("click",()=>nt(!C.hasAttribute("data-folded"))),T.addEventListener("click",()=>Ye(oe?.parentElement??null)),M.addEventListener("click",()=>{le?.element&&st(),Ve(),gt(!1),_.onExit()}),U.addEventListener("click",()=>{if(J?.restore())return Ee.push([{kind:"discard"},()=>J?.discard()]),ot();let e=we.pop();if(e)if(e.kind)"text"===e.kind?(oe===(le?.undo()??e.element)&&Ue(),Ee.push([e,()=>le?.redo()])):"token"===e.kind?(J?.tokens?.undo(),Ee.push([e,()=>J?.tokens?.redo()])):(Ee.push([e,()=>{i(e.element,e.property,e.after),he?.syncDesignTokenBinding(e.element,e.property),De(e.element,e.property)}]),Be(e.element,e.property,e.before),e.before.bindingUndo?.(),he?.syncDesignTokenBinding(e.element,e.property),De(e.element,e.property),oe===e.element&&Ue(),qe());else{let t=e.element.getAttribute("style");e.undo(),Ee.push([e,e.redo??(e.props?()=>he?.redoReactProp(e.element):()=>null===t?e.element.removeAttribute("style"):e.element.setAttribute("style",t))]),Ue()}else oe&&(he?.undoDesignTokenEdit(oe),he?.undoReactProp(oe),Ue()),N.textContent=t;ot(),_.root.dispatchEvent(new CustomEvent("komo-announce",{detail:"Undone"}));let n=_.root.activeElement;!Ke&&(!n||n===U||!n.getClientRects().length)&&(U.disabled?He():U.focus({preventScroll:!0}))}),$.addEventListener("click",()=>{let e=Ee.pop();if(!e)return;Ce=!0,"token"!==e[0].kind&&"discard"!==e[0].kind&&we.push(e[0]),e[1](),Ce=!1,Ue(),qe(),ot(),_.root.dispatchEvent(new CustomEvent("komo-announce",{detail:"Redone"}));let t=_.root.activeElement;!Ke&&(!t||t===$||!t.getClientRects().length)&&($.disabled?He():$.focus({preventScroll:!0}))}),Q.addEventListener("click",()=>{oe&&(bt(oe),Ue(),qe(),ot(),Ke||He())}),V.addEventListener("click",()=>{let e=oe,t=e?mt(e):void 0;!e||!t?.size||xe().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),N.textContent="CSS copied"}catch{N.textContent=i}})}),X.addEventListener("click",()=>{let e=oe;e&&(le?.isEditing(h(e)?e:null)&&st(),xe().then(({designProposal:t})=>{if(!ee||oe!==e||!e.isConnected)return;let n=[ft(e,t),J?.tokens?.proposal()].filter(Boolean).join("\n\n")||void 0;bt(e),J?.tokens?.reset(),ot(),_.onComment(e,n)},()=>{N.textContent="Comment unavailable · try again"}))});let vt=()=>je(!1);for(let e of[F,H,Z])for(let t of["pointerdown","focusin","click","input"])e.addEventListener(t,vt,!0);_.root.addEventListener("komo-announce",e=>{let t=_.root.querySelector(".sr-only[aria-live]");t&&(t.textContent=e.detail)},{signal:ye.signal}),document.addEventListener("pointermove",at,{capture:!0,signal:ye.signal}),document.addEventListener("pointerdown",rt,{capture:!0,signal:ye.signal}),document.addEventListener("click",lt,{capture:!0,signal:ye.signal}),document.addEventListener("keydown",ct,{capture:!0,signal:ye.signal}),window.addEventListener("keydown",pt,{signal:ye.signal}),window.addEventListener("scroll",Ge,{capture:!0,passive:!0,signal:ye.signal}),window.addEventListener("resize",Ge,{passive:!0,signal:ye.signal});for(let[e,t,n]of[["pointermove",at],["pointerdown",rt],["click",lt],["keydown",ct],["keydown",pt,1],["scroll",Ge,1],["resize",Ge,1]])b(e,t,{capture:"resize"!==e&&!(n&&"keydown"===e),passive:"scroll"===e||"resize"===e,signal:ye.signal},n?"window":"document");c(_.host,()=>ee?[oe??se,se]:[],Ge,ye.signal,()=>{Je()||Ve()});let yt=xe().then(e=>{if(ye.signal.aborted)return;Ne=e.keepFocus;let t=e=>{ne=!0,Ye(e),it(e)};et=e.designKeyboard({host:_.host,compare:q,reserved:_.reservedKey,root:_.root,undo:U,redo:$,keys:_.keys,signal:ye.signal,selected:()=>re===ae()?oe:null,comment:()=>!(!oe||X.disabled)&&(X.click(),!0),select:t,compareBefore(e){je(e??!Re)},help:_.shortcutHelp}),e.watchDesignStatus(N,I,()=>!!le?.element,ye.signal),J=e.selectionViews({help:_.shortcutHelp,select:t,peek(e){Ze=e,ne=!0,qe()},before(e){Ee.length=0,je(e)},reset:ut,items:()=>[...de].filter(([e])=>Qe(e)).map(([t,n])=>({element:t,here:n===ae()&&t.isConnected,count:Te(t),proposal:ft(t,e.designProposal)})),message:e=>{N.textContent=e},mode:_,signal:ye.signal,history:we,update:ot,clear:Ve}),I.before(J.chip),k.textContent+=J.styles,U.innerHTML=J.icons.undo,$.innerHTML=J.icons.redo,Q.innerHTML=J.icons.reset,W.append(J.pending),ee?Ue():$e()},()=>{N.textContent="Selection tools unavailable · try again"});return{setActive:gt,select:Ye,clearSelection:Ve,setReturnAction(e){S=e,D.hidden=!e,e&&(D.setAttribute("aria-label",e.label),D.title=e.label)},mountPanel(e){C.parentElement!==e&&(C.parentElement?.removeAttribute("data-design-empty"),e.append(C),$e())},get active(){return ee},get selected(){return oe},get edited(){return we.length>0},ready:Promise.all([E,yt]).then(()=>{C.dataset.ready=""}),destroy(){le?.finish(!0),gt(!1),ut(),clearTimeout(ie),clearTimeout(pe),clearTimeout(Me),We?.disconnect(),ye.abort(),cancelAnimationFrame(ce),C.remove(),A.remove(),P.remove(),k.remove()}}}export{_ as createDesignMode};
+import{a as e}from"./chunk-XP22SMEQ.js";import{a as t,b as n,c as i,f as o,g as s,i as a}from"./chunk-4FX5IS2U.js";import{a as r,b as d}from"./chunk-XOMOONGK.js";import{a as l,b as c}from"./chunk-J47R52WX.js";import{a as p}from"./chunk-VX6XCU4E.js";import{E as g,F as u,j as h,l as m,o as f,t as b}from"./chunk-4HBBEVFK.js";var v=(e,t)=>Object.assign(g("button",e,t),{type:"button"}),y=e=>"function"==typeof matchMedia&&matchMedia(e).matches,x=()=>y("(prefers-reduced-motion: reduce)");function _(_){let k=g("style");k.textContent='.design-outline{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;outline:2px solid var(--palette-selection,var(--komo-selection,#0c93f5));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;flex-wrap:wrap;align-items:center;gap:8px;min-height:36px;padding:10px 12px;border-top:1px solid #ffffff0d;color:#909090;font-size:12px;container-type:inline-size}.design-inspector__count:empty{display:none}.design-inspector__actions{display:flex;align-items:center;gap:2px;margin-left:auto}.design-inspector__actions button:disabled{cursor:default;opacity:.35}.design-inspector__actions button:last-child{flex:none;white-space:nowrap;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)}@container (max-width:419px){.design-inspector__actions{flex-basis:calc(100% + 6px);margin-left:-6px}.design-inspector__actions button:last-child{margin-left:auto}}.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 w=null,E=import("./design-panel-ZQS4WQCI.js").then(e=>{k.textContent+=e.designPanelStyles,w=e},()=>{U.textContent="Design controls unavailable · try again"}),C=g("aside","design-inspector");C.setAttribute("role","dialog"),C.setAttribute("aria-label","Design mode inspector"),C.setAttribute("aria-hidden","true"),C.hidden=!0;let A=g("div","design-outline");A.setAttribute("aria-hidden","true");let P=g("div","design-outline design-outline--prospective");P.setAttribute("aria-hidden","true"),P.dataset.kind="hover",P.hidden=!0;let S=g("div","design-inspector__heading"),L=null,D=v("design-inspector__back");D.hidden=!0,D.append(u("chevron")),D.addEventListener("click",()=>L?.run());let T=v("design-inspector__parent");T.hidden=!0;let z=g("span","design-inspector__target");z.tabIndex=-1;let R=g("small"),M=v("design-inspector__close");M.setAttribute("aria-label","Exit design mode"),M.append(u("close"));let B=v("design-inspector__fold");B.append(u("chevron"));let j=g("div","design-inspector__identity");j.append(T,z,R),S.append(D,j,B,M);let F=g("div","design-inspector__controls"),K=g("div","design-inspector__bar"),I=g("span","design-inspector__count");I.title=t;let U=g("p","design-inspector__status");U.setAttribute("role","status");let $=g("div","design-inspector__actions"),H=e=>{let t=v("design-inspector__tool");return t.dataset.tip=e,t.setAttribute("aria-label",e),t},O=H("Undo"),X=H("Redo");O.dataset.tip="Undo · "+(p()?"⌘Z":"Ctrl+Z"),X.dataset.tip="Redo · "+(p()?"⌘⇧Z":"Ctrl+Y");let N=H("Reset"),G=H("Copy CSS");G.append(u("copy"));let V=v("","Comment"),Z=v("design-text-edit","Edit text");Z.title="Edit text",Z.setAttribute("aria-label","Edit selected text inline"),$.append(O,X,N,G,V);let q=g("div","design-inspector__compare");q.setAttribute("role","group"),q.setAttribute("aria-label","Compare with the page");let Q=["Before","After"].map((e,t)=>{let n=v("",e);return n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>Be(!t)),q.append(n),n});K.append(I,q,U,$);let W,J=g("div");C.append(S,J,F,K),_.root.append(k,A,P),(_.panelRoot??_.root).append(C);let Y,ee=!1,te=null,ne=!0,ie=0,oe=null,se=null,ae=()=>_.page?.()??location.pathname,re=ae(),de=new Map,le=null,ce=0,pe=0,ge=null,ue="",he=null,me=null,fe=new Map,be=new WeakSet,ve=new Map,ye=new AbortController,xe=()=>import("./design-export-Y2GU3KER.js"),_e=e=>{Y??=xe().then(({footerTips:t})=>t(K,_.root,ye.signal,e),()=>{Y=void 0})};K.addEventListener("pointerover",_e),K.addEventListener("focusin",_e);let ke=new Set,we=[],Ee=[],Ce=!1,Ae=we.push.bind(we);we.push=(...e)=>(Ce||(Ee.length=0),Ae(...e));let Pe,Se=n(we);function Le(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let s=he?.originalDesignTokenStyle(e,t),a=fe.get(e);a||(fe.set(e,a=new Map),(s?.absent||!e.hasAttribute("style"))&&be.add(e)),a.has(t)||a.set(t,s??{...o(e,t),value:n,priority:i})}function De(e,t){let n=ve.get(e);n||ve.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(fe.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||ve.delete(e),qe()}function Te(e){return(ve.get(e)?.size??0)+Number(h(e)&&!!le?.hasChanges(e))+ +!!he?.hasReactPropChanges(e)||+!!he?.hasDesignTokenEdit(e)}_.design?.experimentalGeometry&&import("./design-geometry-HJLEXLPO.js").then(e=>{ye.signal.aborted||(Pe=e.bindGeometry({options:_,signal:ye.signal,selected:()=>oe,enabled:()=>ee&&ne&&!Re&&!le?.element,remember:Le,track:De,history:we,update:ot,select:Ye,tokens:()=>he,panel:()=>F,before:()=>Re,pick(e,t){let n=d(_.targetAt(e,t));n&&!_.host.contains(n)&&(ne=!0,dt(n))}}))});let ze,Re=!1,Me=0;function Be(e,t=!0){if(Pe?.cancel(),ne=!1,qe(),e===Re)return;e&&le?.element&&st(),Re=e,e&&he?.showDesignBefore(!0);let n=t&&!x();for(let[t,i]of fe){let o=ve.get(t);a(t,i.keys(),()=>{for(let n of i.keys()){let i=fe.get(t)?.get(n);e?je(t,n,i):o?.has(n)&&t.style.setProperty(n,o.get(n),i?.priority)}},n,be.has(t))}n&&(clearTimeout(Me),Me=window.setTimeout(()=>{Me=0,ot()},330)),le?.showBefore(e,t),e||he?.showDesignBefore(!1),Q.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),C.toggleAttribute("data-before",e),ot()}function je(e,t,n){i(e,t,n),be.has(e)&&s(e)}function Fe(e,t,n){if(!oe||(e.setAttribute("aria-invalid",String(null===n)),null===n))return;Le(oe,t);let i=he?.noteDesignTokenOverride(oe,t,n);Se.override(e,i?.undo),oe.style.setProperty(t,n,i?.priority??fe.get(oe)?.get(t)?.priority),De(oe,t),ot()}function Ke(e,t,n=!0){oe&&(Se.commit(e,oe,t,n),ot())}let Ie,Ue,$e=()=>z.focus({preventScroll:!0}),He=null;function Oe(t){let n=C.getRootNode().activeElement,i=n&&oe===He&&F.contains(n)&&Ue;if(He=oe,i&&Ie?.(!1),ht(),F.replaceChildren(),i&&(Ie=i(F,n,()=>{Ie=void 0},()=>{ee&&oe&&$e()})),Xe(),!oe)return W&&F.append(W.empty),z.textContent="Select an element",R.textContent="",void(T.hidden=!0);let s=`${oe.tagName.toLowerCase()}${oe.id?`#${oe.id}`:""}`;z.textContent=s,R.textContent="iframe"===oe.localName?"Frame only · contents are isolated":oe.classList.length?`.${[...oe.classList].slice(0,2).join(".")}`:"";let a=oe.parentElement;T.hidden=!a||a===oe.ownerDocument.body||a===oe.ownerDocument.documentElement,T.textContent=a?.tagName.toLowerCase()??"",T.setAttribute("aria-label",`Select parent ${T.textContent}`);let r=oe,d=w;d?(d.renderPanel(F,{element:r,changed:ve.get(r),collapsed:ke,editText:Z,begin:(e,t)=>Se.begin(e,o(r,t)),apply:Fe,commit:Ke,cancel(e,t){Se.cancel(e,r,t),De(r,t),ot()},rerender:Oe,reserved:_.reservedKey}),t&&F.prepend(t),(_.design?.tokens||_.design?.themes||e(r,_.design)||r.closest("[data-palette-inspectable],[data-komo-inspectable],[data-palette-design-tokens],[data-komo-design-tokens]"))&&(me??=import("./react-props-panel-ZSKQ44GS.js").then(e=>he=e).catch(e=>{throw me=null,e}),me.then(e=>{!ee||oe!==r||e.attachDesignSystemControls(r,F,d,_,{signal:ye.signal,select:Ye,refresh:Oe,retainedProps:t,updateActions:ot,history:we,isFieldDirty:Se.isDirty,syncStyles(){for(let e of fe.get(r)?.keys()??[])De(r,e)},onStyleEdit(e,t,n){Le(r,e.property,n),De(r,e.property),Se.begin(t,{value:n,priority:r.style.getPropertyPriority(e.property)}),Ke(t,e.property)}})}).catch(()=>{}))):E.then(()=>{ee&&oe===r&&Oe()})}function Xe(){C.toggleAttribute("data-empty",V.hidden=!oe),C.parentElement?.toggleAttribute("data-design-empty",ee&&!oe),W?.update(!!oe)}function Ne(e){return!!(ve.get(e)?.size||h(e)&&le?.hasChanges(e)||he?.hasReactPropChanges(e)||he?.hasDesignTokenEdit(e))}function Ge(){st(),Je?.disconnect(),oe=null,se=null,A.hidden=P.hidden=!0,Oe(),ot()}function Ve(e,t,n=!1,i=A){if(!ee||!ne||!e?.isConnected)return void(i.hidden=!0);let o=m(e);if(o.width&&o.height){if(i.dataset.kind=t,n&&(e!==ge||t!==ue)){ge=e,ue=t,clearTimeout(pe);let n=C.getBoundingClientRect(),i=e=>o.left<e+n.width&&o.right>e&&o.top<n.bottom&&o.bottom>n.top;_.flip&&n.width&&i(n.left)&&!i(document.documentElement.clientWidth-n.right)&&(pe=window.setTimeout(_.flip,"hover"===t?350:0))}i.hidden=!l(i,o,e,_.bounds?.(e))}else i.hidden=!0}let Ze=null;function qe(e=!1){Pe?.render(),Ve(oe??se??Ze,oe||!se?"selected":"hover",e),Ve(oe&&se!==oe?se:null,"hover",!1,P)}function Qe(){ce||(ce=requestAnimationFrame(()=>{ce=0,oe&&(re!==ae()||!oe.isConnected&&!We())&&Ge(),se&&!se.isConnected&&(se=null),qe()}))}function We(){let e=oe;return!(!e||re!==ae()||!he?.retainReactPropSelection(e,F,_,we,le,(t,n)=>{oe=t,se=t,Je?.disconnect(),Je?.observe(t),Ne(e)||de.delete(e),de.set(t,re),Oe(n)}))&&(ot(),!0)}let Je="function"==typeof ResizeObserver?new ResizeObserver(Qe):null;function Ye(e){!r(e)||!e.isConnected||_.host.contains(e)||(W?.settle(),le?.element&&le.element!==e&&st(),Je?.disconnect(),Je?.observe(e),oe=e,se=e,re=ae(),de.set(e,re),Oe(),qe(!0),ot())}let et,tt=()=>y("(max-width:520px)");function nt(e){C.toggleAttribute("data-folded",e&&tt()),B.setAttribute("aria-expanded",String(!C.hasAttribute("data-folded"))),B.setAttribute("aria-label",C.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function it(e){nt(!1),tt()&&requestAnimationFrame(()=>{let t=m(e),n=C.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:x()?"auto":"smooth"})})}function ot(){Qe(),O.disabled=!(W?.parked||we.length||he?.canUndoReactProp(oe)||he?.canUndoDesignTokenEdit(oe)),X.disabled=!Ee.length,N.disabled=!function(){let e=oe,t=e?Te(e):0,n=t+(e&&W?.tokens?.size||0);return I.textContent=n?`${n} change${n>1?"s":""}`:"",K.toggleAttribute("data-changes",n>0||!O.disabled),q.hidden=!!W?.parked||!n&&!Re,t}(),G.disabled=!oe||!ve.get(oe)?.size,V.disabled=!oe,Z.disabled=!!le?.busy||!oe?.isConnected||!h(oe),Z.textContent=le?.isEditing(h(oe)?oe:null)?"Done editing":"Edit text",Z.setAttribute("aria-label",le?.isEditing(h(oe)?oe:null)?"Finish inline text editing":"Edit selected text inline"),oe&&!Me&&w?.syncFields(F,Se.isDirty),Xe()}function st(e=!1){le?.finish(e),ot()}function at(e){if(!ee)return;if(e.composedPath().includes(_.host))return se=null,void qe();let t=f(e),n=d(_.targetAt(t.x,t.y),e.metaKey||e.ctrlKey);se=n&&!_.host.contains(n)?n:null,se&&(ne=!0),qe(!oe)}function rt(e){if(!ee||0!==e.button)return;let t=e.composedPath();if(t.includes(_.host))return void(h(t[0])&&t[0].matches(".frame-stage")&&Ge());let n=f(e),i=d(_.targetAt(n.x,n.y),e.metaKey||e.ctrlKey);i&&i!==i.ownerDocument.body&&i!==i.ownerDocument.documentElement?_.host.contains(i)||(ne=!0,(!le?.element||i!==le.element&&!le.element.contains(i))&&(e.preventDefault(),e.stopImmediatePropagation(),dt(i))):le?.element||Ge()}function dt(e){le?.element&&st(),Ye(e);let t=_.root.activeElement??document.activeElement;h(t)&&t.blur(),Ie?.(!1)}function lt(e){!ee||e.composedPath().includes(_.host)||(e.preventDefault(),e.stopImmediatePropagation(),oe&&it(oe),2===e.detail&&oe?.contains(e.target)&&!Z.disabled&&!le?.element&&Z.dispatchEvent(new MouseEvent("click",e)))}function ct(e){if(!e.isComposing&&229!==e.keyCode){if(le?.handleKey(e))return void Z.focus({preventScroll:!0});ee&&et?.(e)||e.composedPath().includes(_.host)&&pt(e)}}function pt(e){!ee||"Escape"!==e.key||e.isComposing||229===e.keyCode||e.defaultPrevented&&!e.composedPath().includes(_.host)||(e.preventDefault(),e.stopImmediatePropagation(),te=oe&&[oe,ae()],Ge(),gt(!1),_.onExit())}function gt(e){if(e||(ht(),le?.finish(),ee&&(ze=Re,Be(!0,!1)),he?.restoreThemes(C)),e&&!ee&&void 0!==ze){let e=ze;ze=void 0,Be(e,!1)}e&&oe&&(re!==ae()||!oe.isConnected&&!We())&&Ge(),e&&!ee&&!oe&&te?.[0].isConnected&&te[1]===ae()&&Ye(te[0]),e&&(te=null),clearTimeout(ie),ie=0,ee=e,Xe(),e?(C.hidden=!1,C.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{ee&&(C.dataset.state="active")}),Oe(),nt(!oe),qe(),M.focus({preventScroll:!0})):(se=null,A.hidden=P.hidden=!0,C.setAttribute("aria-hidden","true"),C.dataset.state="closing",x()?(C.hidden=!0,delete C.dataset.state):ie=window.setTimeout(()=>{ie=0,ee||(C.hidden=!0,delete C.dataset.state)},250))}function ut(){ht(),Be(!1,!1),he?.resetPreviews();for(let[e,t]of fe)a(e,t.keys(),()=>{for(let[n,i]of t)je(e,n,i)},!1,be.has(e)),be.delete(e);fe.clear(),ve.clear(),we.length=Ee.length=0,le?.restoreAll(),W?.tokens?.reset(),de.clear(),ot()}function ht(){Pe?.cancel(),_.root.dispatchEvent(new Event("palette-preview-cancel"))}function mt(e){let t=ve.get(e);return t&&Pe?.moved(e)?new Map([...t].filter(([e])=>"display"!==e)):t}function ft(e,t){return t(e,mt(e),t=>fe.get(e)?.get(t)?.computed,he?.tokenBoundProperties(e),[h(e)?le?.proposal(e):void 0,he?.proposedDesignChanges(e),Pe?.proposal(e)],he?.designContext(e,_.design))}function bt(e){le?.isEditing(h(e)?e:null)&&st(!0);let t=ve.get(e),n=(h(e)&&le?.hasChanges(e))??!1,i=he?.hasReactPropChanges(e)??!1,o=he?.hasDesignTokenEdit(e)??!1;if(t?.size||n||i||o){n&&h(e)&&le?.reset(e),o&&he?.resetDesignTokenEdits(e),a(e,t?.keys()??[],()=>{for(let n of t?.keys()??[])je(e,n,fe.get(e)?.get(n))},!1,be.has(e)),ve.delete(e),fe.delete(e),be.delete(e),de.delete(e),i&&he?.resetReactProps(e);for(let t=we.length-1;t>=0;t--)we[t].element===e&&we.splice(t,1);Ee.length=0}}Z.addEventListener("click",e=>{le||oe&&(U.textContent="Loading inline text editor…",import("./inline-text-editor-MK6FHDAM.js").then(t=>{le||!oe||!ee||(le=t.bindInlineTextTools({button:Z,status:U,selected:()=>h(oe)?oe:null,active:()=>ee,onChange:ot,onCommit(e){we.push({kind:"text",element:e})}}),le.toggle(e))}).catch(()=>{U.textContent="Inline text editing is unavailable."}))}),B.addEventListener("click",()=>nt(!C.hasAttribute("data-folded"))),T.addEventListener("click",()=>Ye(oe?.parentElement??null)),M.addEventListener("click",()=>{le?.element&&st(),Ge(),gt(!1),_.onExit()}),O.addEventListener("click",()=>{if(W?.restore())return Ee.push([{kind:"discard"},()=>W?.discard()]),ot();let e=we.pop();if(e)if(e.kind)"text"===e.kind?(oe===(le?.undo()??e.element)&&Oe(),Ee.push([e,()=>le?.redo()])):"token"===e.kind?(W?.tokens?.undo(),Ee.push([e,()=>W?.tokens?.redo()])):(Ee.push([e,()=>{i(e.element,e.property,e.after),he?.syncDesignTokenBinding(e.element,e.property),De(e.element,e.property)}]),je(e.element,e.property,e.before),e.before.bindingUndo?.(),he?.syncDesignTokenBinding(e.element,e.property),De(e.element,e.property),oe===e.element&&Oe(),qe());else{let t=e.element.getAttribute("style");e.undo(),Ee.push([e,e.redo??(e.props?()=>he?.redoReactProp(e.element):()=>null===t?e.element.removeAttribute("style"):e.element.setAttribute("style",t))]),Oe()}else oe&&(he?.undoDesignTokenEdit(oe),he?.undoReactProp(oe),Oe()),U.textContent=t;ot(),_.root.dispatchEvent(new CustomEvent("palette-announce",{detail:"Undone"}));let n=_.root.activeElement;!Ie&&(!n||n===O||!n.getClientRects().length)&&(O.disabled?$e():O.focus({preventScroll:!0}))}),X.addEventListener("click",()=>{let e=Ee.pop();if(!e)return;Ce=!0,"token"!==e[0].kind&&"discard"!==e[0].kind&&we.push(e[0]),e[1](),Ce=!1,Oe(),qe(),ot(),_.root.dispatchEvent(new CustomEvent("palette-announce",{detail:"Redone"}));let t=_.root.activeElement;!Ie&&(!t||t===X||!t.getClientRects().length)&&(X.disabled?$e():X.focus({preventScroll:!0}))}),N.addEventListener("click",()=>{oe&&(bt(oe),Oe(),qe(),ot(),Ie||$e())}),G.addEventListener("click",()=>{let e=oe,t=e?mt(e):void 0;!e||!t?.size||xe().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),U.textContent="CSS copied"}catch{U.textContent=i}})}),V.addEventListener("click",()=>{let e=oe;e&&(le?.isEditing(h(e)?e:null)&&st(),xe().then(({designProposal:t})=>{if(!ee||oe!==e||!e.isConnected)return;let n=[ft(e,t),W?.tokens?.proposal()].filter(Boolean).join("\n\n")||void 0;bt(e),W?.tokens?.reset(),ot(),_.onComment(e,n)},()=>{U.textContent="Comment unavailable · try again"}))});let vt=()=>Be(!1);for(let e of[F,$,Z])for(let t of["pointerdown","focusin","click","input"])e.addEventListener(t,vt,!0);_.root.addEventListener("palette-announce",e=>{let t=_.root.querySelector(".sr-only[aria-live]");t&&(t.textContent=e.detail)},{signal:ye.signal}),document.addEventListener("pointermove",at,{capture:!0,signal:ye.signal}),document.addEventListener("pointerdown",rt,{capture:!0,signal:ye.signal}),document.addEventListener("click",lt,{capture:!0,signal:ye.signal}),document.addEventListener("keydown",ct,{capture:!0,signal:ye.signal}),window.addEventListener("keydown",pt,{signal:ye.signal}),window.addEventListener("scroll",Qe,{capture:!0,passive:!0,signal:ye.signal}),window.addEventListener("resize",Qe,{passive:!0,signal:ye.signal});for(let[e,t,n]of[["pointermove",at],["pointerdown",rt],["click",lt],["keydown",ct],["keydown",pt,1],["scroll",Qe,1],["resize",Qe,1]])b(e,t,{capture:"resize"!==e&&!(n&&"keydown"===e),passive:"scroll"===e||"resize"===e,signal:ye.signal},n?"window":"document");c(_.host,()=>ee?[oe??se,se]:[],Qe,ye.signal,()=>{We()||Ge()});let yt=xe().then(e=>{if(ye.signal.aborted)return;Ue=e.keepFocus;let t=e=>{ne=!0,Ye(e),it(e)};et=e.designKeyboard({host:_.host,compare:q,reserved:_.reservedKey,root:_.root,undo:O,redo:X,keys:_.keys,signal:ye.signal,selected:()=>re===ae()?oe:null,comment:()=>!(!oe||V.disabled)&&(V.click(),!0),select:t,compareBefore(e){Be(e??!Re)},help:_.shortcutHelp}),e.watchDesignStatus(U,K,()=>!!le?.element,ye.signal),W=e.selectionViews({help:_.shortcutHelp,select:t,peek(e){Ze=e,ne=!0,qe()},before(e){Ee.length=0,Be(e)},reset:ut,items:()=>[...de].filter(([e])=>Ne(e)).map(([t,n])=>({element:t,here:n===ae()&&t.isConnected,count:Te(t),proposal:ft(t,e.designProposal)})),message:e=>{U.textContent=e},mode:_,signal:ye.signal,history:we,update:ot,clear:Ge}),K.before(W.chip),k.textContent+=W.styles,O.innerHTML=W.icons.undo,X.innerHTML=W.icons.redo,N.innerHTML=W.icons.reset,J.append(W.pending),ee?Oe():Xe()},()=>{U.textContent="Selection tools unavailable · try again"});return{setActive:gt,select:Ye,clearSelection:Ge,setReturnAction(e){L=e,D.hidden=!e,e&&(D.setAttribute("aria-label",e.label),D.title=e.label)},mountPanel(e){C.parentElement!==e&&(C.parentElement?.removeAttribute("data-design-empty"),e.append(C),Xe())},get active(){return ee},get selected(){return oe},get edited(){return we.length>0},ready:Promise.all([E,yt]).then(()=>{C.dataset.ready=""}),destroy(){le?.finish(!0),gt(!1),ut(),clearTimeout(ie),clearTimeout(pe),clearTimeout(Me),Je?.disconnect(),ye.abort(),cancelAnimationFrame(ce),C.remove(),A.remove(),P.remove(),k.remove()}}}export{_ as createDesignMode};

package/dist/design-panel-ZQS4WQCI.js

@@ -0,0 +1 @@
+import{a as e,b as t,d as n}from"./chunk-ONUORDYE.js";import"./chunk-3BVM3I52.js";import{d as o}from"./chunk-4FX5IS2U.js";import"./chunk-XOMOONGK.js";var r=0;var i='.design-inspector__controls>*+*{border-top:1px solid #ffffff0d}.design-group{--palette-inset:12px;padding:0 var(--palette-inset) 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;--palette-inset:12px}.design-section__title{display:flex;align-items:center;height:36px;padding:0 var(--palette-inset);color:#898680;font-size:11px;font-weight:600}.design-section__tools{position:absolute;z-index:1;top:6px;right:calc(var(--palette-inset) - 4px);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 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',l=[{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",wide:!0,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:"letter-spacing",label:"Letter spacing",kind:"text",glyph:"M1 2.5v7M11 2.5v7M3.5 9.5 6 2.5l2.5 7M4.4 7h3.2",placeholder:"0 or 0.02em"},{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:"opacity",label:"Layer opacity",kind:"text",glyph:"M6 1.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9v9",min:0,max:1,step:.01,placeholder:"0–1"},{property:"box-shadow",label:"Shadow",kind:"text",wide:!0},{property:"stroke-width",label:"Stroke width",kind:"length",min:0,max:24}],a=import("./select-menu-OZVNHZ73.js").catch(()=>null),d=import("./live-colors-D426RBEC.js").catch(()=>null),p=import("./field-controls-4AIIXPNQ.js").catch(()=>null),s=["font-family","font-size","line-height","letter-spacing","font-weight","text-align","color"];function c(e){let t=e.match(/^rgba\(.*,\s*([\d.]+)\)$/)?.[1];return void 0===t?/^rgb\(/.test(e)?o(e):e||"transparent":Number(t)?e:"transparent"}function g(e,t,n){let o=(n||getComputedStyle(t).getPropertyValue(e.property)).trim();if("color"===e.kind)return c(o);if("length"===e.kind||"size"===e.kind){let t=o.match(/^(-?\d+(?:\.\d+)?)px$/);return t?String(Math.round(10*Number(t[1]))/10):"size"===e.kind?o||"auto":"0"}return o}function u(t,i){let{element:l}=i,a=document.createElement("div");a.className=`design-field design-field--${t.kind}`,a.dataset.fieldProperty=t.property,a.toggleAttribute("data-wide",!!t.wide);let d="select"===t.kind?document.createElement("select"):document.createElement("input");if(d instanceof HTMLSelectElement)for(let e of t.values??[]){let t=document.createElement("option");t.value=t.textContent=e,d.append(t)}else d.type="length"===t.kind?"number":"text",d.autocomplete="off",d.spellcheck=!1,d.placeholder=t.placeholder??"","length"===t.kind&&(d.min=String(t.min??0),d.max=String(t.max??1e3),d.setAttribute("inputmode","decimal"));let p=function(e,t,n,o=!1){n.dataset.fieldLabel=t.label,o||(n.style.marginTop="20px");let i=document.createElement("label");return i.className="design-field__label",o||(i.style.cssText="position:absolute;inset:auto 0 calc(100% + 4px);color:#b5b1ab;font-size:10px;line-height:14px;white-space:normal;overflow-wrap:anywhere;cursor:default"),e.id||="palette-field-"+ ++r,i.htmlFor=e.id,i.textContent=t.label,i}(d,t,a);a.append(p),d.dataset.property=t.property,d.setAttribute("aria-label",t.label);let s=()=>{let e=g(t,l);d instanceof HTMLSelectElement&&![...d.options].some(t=>t.value===e)&&d.prepend(new Option(e,e)),d.value=e;let n=a.querySelector('input[type="color"]');n&&(n.value=o(e))};s();let c=()=>i.begin(d,t.property),u=()=>f(()=>{i.apply(d,t.property,n(t,d)),i.commit(d,t.property,!1)}),h=()=>f(()=>i.commit(d,t.property));if(d.addEventListener("focus",c),d.addEventListener("input",u),d.addEventListener("change",h),d.addEventListener("blur",h),"color"===t.kind){let e=document.createElement("input");e.type="color",e.setAttribute("aria-label",`${t.label} picker`);let n=()=>{e.value=o(d.value)};n(),e.addEventListener("pointerdown",c),e.addEventListener("focus",c),e.addEventListener("input",()=>{d.value=e.value,u()}),e.addEventListener("change",h),d.addEventListener("input",n),a.append(e)}if(t.glyph){let e=e=>{let n=d.value.trim().match(/^(-?\d*\.?\d+)([a-z%]*)$/i),o=n?n[2]:"text"===t.kind?"px":"",r=n?Number(n[1]):parseFloat(getComputedStyle(l).getPropertyValue(t.property))||0,i=Math.round(100*(r+e*(t.step??("text"!==t.kind||o?1:.1))))/100;("text"!==t.kind||t.max)&&(i=Math.min(t.max??1e4,Math.max(t.min??0,i))),d.value=`${i}${o}`,u()},n=document.createElement("span");n.className="design-field__glyph",n.setAttribute("aria-hidden","true"),n.title=`${t.label} · drag to adjust`,t.glyph.length>1?n.innerHTML=`<svg viewBox="0 0 12 12"><path d="${t.glyph}"/></svg>`:n.textContent=t.glyph,p.style.cssText+=";cursor:ew-resize;user-select:none;touch-action:none";for(let t of[n,p])t.addEventListener("pointerdown",n=>{if(n.button)return;n.preventDefault(),c(),t.setPointerCapture?.(n.pointerId);let o=n.clientX,r=t=>{let n=Math.trunc((t.clientX-o)/2);n&&(o+=2*n,e(n*(t.shiftKey?10:1)))},i=()=>{t.removeEventListener("pointermove",r),h()};t.addEventListener("pointermove",r),t.addEventListener("pointerup",i,{once:!0}),t.addEventListener("pointercancel",i,{once:!0})});d.addEventListener("keydown",t=>{"ArrowUp"!==t.key&&"ArrowDown"!==t.key||(t.preventDefault(),e(("ArrowUp"===t.key?1:-1)*(t.shiftKey?10:1)))}),a.append(n)}d instanceof HTMLInputElement&&d.addEventListener("keydown",e=>{"Enter"===e.key&&d.blur()}),a.addEventListener("keydown",e=>{if("Escape"!==e.key)return;let n=e.target===d;if(!i.cancel)return n&&d.blur();e.preventDefault(),e.stopImmediatePropagation(),i.cancel(d,t.property),s(),n&&d.blur(),queueMicrotask(()=>{"custom"!==a.dataset.tokenMode&&a.querySelector(".design-token-binding select")?.focus()})}),a.append(d);let f=e(d,t,i,s);return a}function h(e,t,n,o=[]){let r=document.createElement("section");r.className="design-section";let i=document.createElement("div");if(i.className="design-section__tools",i.append(...o),!n){let e=document.createElement("span");return e.className="design-section__title",e.textContent=t,r.append(e,i),r}let a=document.createElement("details");a.className="design-group",a.open=!e.collapsed.has(t);let d=document.createElement("summary");d.textContent=t;let p=document.createElement("div");p.className="design-grid";for(let t of n){let n=l.find(e=>e.property===t);p.append(u("http://www.w3.org/2000/svg"===e.element.namespaceURI&&"color"===t?{...n,label:"Color"}:n,e))}return a.append(d,p),a.addEventListener("toggle",()=>{a.isConnected&&(a.open?e.collapsed.delete(t):e.collapsed.add(t))}),r.append(i,a),r}function f(e,t){let n=[...e.querySelectorAll(".design-field--color")];n.length&&d.then(e=>e?.liveColors(n,t,g))}function m(e,t){let{element:n,changed:o}=t;a.then(n=>n?.attach(e,t.element,t.reserved)),p.then(n=>n?.enhance(e,t.element));let r=getComputedStyle(n);if("http://www.w3.org/2000/svg"===n.namespaceURI)return e.append(h(t,"Layout","svg"===n.localName?["width","height","display"]:["display"]),h(t,"Appearance",["color","fill","stroke","stroke-width"])),f(e,n);let i=e=>e.some(e=>o?.has(e)),l=!!n.textContent?.trim()||/(?:^|;)\s*(?:color|font|line-height|text-align)/.test(n.getAttribute("style")??"")||i(s),d=/flex|grid/.test(r.display)||i(["gap"]),g="transparent"!==c(r.backgroundColor)||i(["background-color"]),u=["top","right","bottom","left"].some(e=>parseFloat(r.getPropertyValue(`border-${e}-width`))>0&&"none"!==r.getPropertyValue(`border-${e}-style`))||i(["border","border-width","border-style","border-color"]),m=r.boxShadow&&"none"!==r.boxShadow||i(["box-shadow"]),b=(n,o,r,i)=>function(e,t,n){let o=document.createElement("button");return o.type="button",o.title=e,o.setAttribute("aria-label",e),o.textContent=t,o.addEventListener("click",n),o}(`Add ${n}`,"+",()=>{let n=document.createElement("input");t.begin(n,o),t.apply(n,o,r),t.commit(n,o),t.rerender(),e.querySelector(`[data-property="${i}"]`)?.focus()});e.append(h(t,"Layout",["width","height","padding",...d?["gap"]:[],"margin",...u?[]:["border-radius"],"display"])),l&&e.append(h(t,"Typography",s,[t.editText])),e.append(g?h(t,"Fill",["background-color"]):h(t,"Fill",null,[b("fill","background-color","#ffffff","background-color")]),u?h(t,"Border",["border-width","border-radius","border-style","border-color"]):h(t,"Border",null,[b("border","border","1px solid","border-width")]),h(t,"Effects",m?["opacity","box-shadow"]:["opacity"],m?[]:[b("shadow","box-shadow","0 1px 3px rgba(0, 0, 0, 0.12)","box-shadow")])),f(e,n)}export{i as designPanelStyles,u as fieldControl,l as fields,m as renderPanel,t as syncFields,o as toHex,g as valueFor};

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

@@ -1 +1 @@
-export declare const designPanelStyles = "\n/* Property controls keep essential labels above compact value rows. */\n.design-inspector__controls > * + * { border-top:1px solid #ffffff0d; }\n.design-group { --komo-inset:12px; padding:0 var(--komo-inset) 10px; }\n.design-section > .design-group { padding-bottom:12px; }\n.design-group summary { cursor:pointer; display:flex; align-items:center; gap:4px; height:36px; color:#e9e6e1; font-size:11px; font-weight:600; list-style:none; }\n.design-group summary::-webkit-details-marker { display:none; }\n.design-group summary::after { content:''; width:5px; height:5px; margin:-2px 0 0 3px; border:solid #77736f; border-width:0 1.2px 1.2px 0; rotate:45deg; opacity:0; transition:opacity .12s,rotate .2s var(--ease-smooth-out); }\n.design-group:not([open]) summary::after { rotate:-45deg; margin:0 0 0 2px; }\n.design-group summary:is(:hover,:focus-visible)::after,.design-group:not([open]) summary::after { opacity:1; }\n.design-group summary:focus-visible { outline-offset:-2px; border-radius:6px; }\n.design-section { position:relative; --komo-inset:12px; }\n.design-section__title { display:flex; align-items:center; height:36px; padding:0 var(--komo-inset); color:#898680; font-size:11px; font-weight:600; }\n.design-section__tools { position:absolute; z-index:1; top:6px; right:calc(var(--komo-inset) - 4px); display:flex; gap:2px; }\n.design-section__tools button { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; color:#898680; font-size:16px; line-height:1; }\n.design-section__tools button:hover { background:#ffffff12; color:#f1efeb; }\n.design-text-edit { font-size:0 !important; }\n.design-text-edit::before { content:'T'; font:600 13px/1 Georgia,\"Times New Roman\",serif; }\n.design-text-edit[aria-label^=\"Finish\"] { background:#bda6ef33; color:#e6dcfb !important; }\n.design-text-edit:disabled { opacity:.35; cursor:default; }\n.design-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 8px; }\n.design-field { position:relative; --lead:4px; min-width:0; height:28px; display:flex; align-items:center; border-radius:6px; background:#ffffff0a; color:#898680; transition:box-shadow .12s var(--ease-smooth-out); }\n.design-field:hover { box-shadow:inset 0 0 0 1px #ffffff1c; }\n.design-field:focus-within { box-shadow:inset 0 0 0 1px #bda6ef; }\n.design-field:has([aria-invalid=\"true\"]) { box-shadow:inset 0 0 0 1px #fda29b; }\n.design-field[data-wide] { grid-column:1/-1; }\n.design-field:has(.design-field__glyph) { --lead:22px; }\n.design-field--color { --lead:26px; }\n.design-field > input:not([type=\"color\"]),.design-field > select { flex:1; box-sizing:border-box; width:100%; min-width:0; height:100%; margin:0; padding:0 8px; border:0; border-radius:6px; outline:0; box-shadow:none; background:none; color:#f1efeb; font:inherit; font-size:11px; font-variant-numeric:tabular-nums; text-overflow:ellipsis; }\n.design-field input[type=\"number\"] { appearance:textfield; -moz-appearance:textfield; }\n.design-field input::-webkit-inner-spin-button { appearance:none; }\n.design-field__glyph { flex:none; display:grid; place-items:center; width:22px; height:100%; margin-right:-6px; color:#77736f; font-size:10px; font-weight:600; cursor:ew-resize; user-select:none; touch-action:none; }\n.design-field__glyph:hover { color:#e9e6e1; }\n.design-field__glyph svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.1; }\n.design-field input[type=\"color\"] { flex:none; width:16px; height:16px; margin:0 -2px 0 6px; padding:0; border:0; border-radius:4px; box-shadow:inset 0 0 0 1px #ffffff26; background:none; cursor:pointer; }\n.design-field input[type=\"color\"]::-webkit-color-swatch-wrapper { padding:0; }\n.design-field input[type=\"color\"]::-webkit-color-swatch { border:0; border-radius:4px; box-shadow:inset 0 0 0 1px #ffffff26; }\n.design-field input[type=\"color\"]::-moz-color-swatch { border:0; border-radius:4px; }\n";
+export declare const designPanelStyles = "\n/* Property controls keep essential labels above compact value rows. */\n.design-inspector__controls > * + * { border-top:1px solid #ffffff0d; }\n.design-group { --palette-inset:12px; padding:0 var(--palette-inset) 10px; }\n.design-section > .design-group { padding-bottom:12px; }\n.design-group summary { cursor:pointer; display:flex; align-items:center; gap:4px; height:36px; color:#e9e6e1; font-size:11px; font-weight:600; list-style:none; }\n.design-group summary::-webkit-details-marker { display:none; }\n.design-group summary::after { content:''; width:5px; height:5px; margin:-2px 0 0 3px; border:solid #77736f; border-width:0 1.2px 1.2px 0; rotate:45deg; opacity:0; transition:opacity .12s,rotate .2s var(--ease-smooth-out); }\n.design-group:not([open]) summary::after { rotate:-45deg; margin:0 0 0 2px; }\n.design-group summary:is(:hover,:focus-visible)::after,.design-group:not([open]) summary::after { opacity:1; }\n.design-group summary:focus-visible { outline-offset:-2px; border-radius:6px; }\n.design-section { position:relative; --palette-inset:12px; }\n.design-section__title { display:flex; align-items:center; height:36px; padding:0 var(--palette-inset); color:#898680; font-size:11px; font-weight:600; }\n.design-section__tools { position:absolute; z-index:1; top:6px; right:calc(var(--palette-inset) - 4px); display:flex; gap:2px; }\n.design-section__tools button { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; color:#898680; font-size:16px; line-height:1; }\n.design-section__tools button:hover { background:#ffffff12; color:#f1efeb; }\n.design-text-edit { font-size:0 !important; }\n.design-text-edit::before { content:'T'; font:600 13px/1 Georgia,\"Times New Roman\",serif; }\n.design-text-edit[aria-label^=\"Finish\"] { background:#bda6ef33; color:#e6dcfb !important; }\n.design-text-edit:disabled { opacity:.35; cursor:default; }\n.design-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 8px; }\n.design-field { position:relative; --lead:4px; min-width:0; height:28px; display:flex; align-items:center; border-radius:6px; background:#ffffff0a; color:#898680; transition:box-shadow .12s var(--ease-smooth-out); }\n.design-field:hover { box-shadow:inset 0 0 0 1px #ffffff1c; }\n.design-field:focus-within { box-shadow:inset 0 0 0 1px #bda6ef; }\n.design-field:has([aria-invalid=\"true\"]) { box-shadow:inset 0 0 0 1px #fda29b; }\n.design-field[data-wide] { grid-column:1/-1; }\n.design-field:has(.design-field__glyph) { --lead:22px; }\n.design-field--color { --lead:26px; }\n.design-field > input:not([type=\"color\"]),.design-field > select { flex:1; box-sizing:border-box; width:100%; min-width:0; height:100%; margin:0; padding:0 8px; border:0; border-radius:6px; outline:0; box-shadow:none; background:none; color:#f1efeb; font:inherit; font-size:11px; font-variant-numeric:tabular-nums; text-overflow:ellipsis; }\n.design-field input[type=\"number\"] { appearance:textfield; -moz-appearance:textfield; }\n.design-field input::-webkit-inner-spin-button { appearance:none; }\n.design-field__glyph { flex:none; display:grid; place-items:center; width:22px; height:100%; margin-right:-6px; color:#77736f; font-size:10px; font-weight:600; cursor:ew-resize; user-select:none; touch-action:none; }\n.design-field__glyph:hover { color:#e9e6e1; }\n.design-field__glyph svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.1; }\n.design-field input[type=\"color\"] { flex:none; width:16px; height:16px; margin:0 -2px 0 6px; padding:0; border:0; border-radius:4px; box-shadow:inset 0 0 0 1px #ffffff26; background:none; cursor:pointer; }\n.design-field input[type=\"color\"]::-webkit-color-swatch-wrapper { padding:0; }\n.design-field input[type=\"color\"]::-webkit-color-swatch { border:0; border-radius:4px; box-shadow:inset 0 0 0 1px #ffffff26; }\n.design-field input[type=\"color\"]::-moz-color-swatch { border:0; border-radius:4px; }\n";

package/dist/design-popup.d.ts

@@ -1,5 +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}}";
+export declare const popupStyles = ".palette-select,.palette-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:palette-popup-in var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)) backwards}.palette-select[data-up],.palette-tokens[data-up]{transform-origin:bottom}@keyframes palette-popup-in{from{opacity:0;transform:scale(.97)}}@media (prefers-reduced-motion:reduce){.palette-select,.palette-tokens{animation:none}}";
 /** The nearest scrolling or clipping ancestor, bounded by the viewport. */
 export declare function popupBounds(from: Element): {
     top: number;

package/dist/design-system.d.ts

@@ -189,8 +189,8 @@ export interface DesignSystem {
     /**
      * Canvas selection color for Design mode's hover and selection outlines, resize handles and move
      * feedback, e.g. "#0c93f5" (the default) or "rebeccapurple". The panel keeps Palette's accent. It
-     * applies with `experimentalGeometry`; the `--komo-selection` custom property on Palette's host
-     * element sets it from CSS either way.
+     * applies with `experimentalGeometry`; the `--palette-selection` custom property (or the older
+     * `--komo-selection`) on Palette's host element sets it from CSS either way.
      */
     selectionColor?: string;
     tokens?: TokenAdapter;
@@ -203,10 +203,11 @@ export interface DesignSystem {
  * changes, the first proposal section names its context in lines such as
  * "Theme: mode=dark, density=compact", "Component: PromoCard (src/card.tsx:19)"
  * and 'Props: tone="calm", compact=false', which fill `theme` and
- * `target.component`. Comments without those lines still parse.
+ * `target.component`. Comments without those lines still parse. Records from
+ * older releases carry `komo: "design-edit"` instead; the CLI reads both.
  */
 export interface DesignEdit {
-    komo: "design-edit";
+    palette: "design-edit";
     version: 1;
     target: {
         /**

package/dist/{field-controls-4ROTPXMO.js → field-controls-4AIIXPNQ.js}

@@ -1 +1 @@
-import{h as e}from"./chunk-4FX5IS2U.js";import"./chunk-XOMOONGK.js";var t={"text-align":{left:"M1.5 2.5h9M1.5 5h6M1.5 7.5h9M1.5 10h6",center:"M1.5 2.5h9M3 5h6M1.5 7.5h9M3 10h6",right:"M1.5 2.5h9M4.5 5h6M1.5 7.5h9M4.5 10h6",justify:"M1.5 2.5h9M1.5 5h9M1.5 7.5h9M1.5 10h9"},"border-style":{none:"M3 3l6 6M9 3 3 9",solid:"M1.5 6h9",dashed:"M1.5 6h2M5 6h2M8.5 6h2",dotted:"M2 6h.01M4.67 6h.01M7.33 6h.01M10 6h.01"}},n=new Set(["font-size","line-height","letter-spacing","gap","border-width","padding","margin","border-radius"]),i=new WeakSet,d=globalThis.ResizeObserver&&new ResizeObserver(e=>{for(let{target:t}of e)t.closest(".design-field")?.style.setProperty("--chip",`${t.offsetWidth}px`)});function o(e,t){let n=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e),"value");Object.defineProperty(e,"value",{configurable:!0,get:()=>n.get.call(e),set:i=>{n.set.call(e,i),t()}}),e.addEventListener("input",t),t()}function a(e,a){let l=e.getRootNode();if((l instanceof ShadowRoot||l===document)&&!i.has(l)){i.add(l);let e=document.createElement("style");e.textContent=".design-segments{display:flex;flex:1;gap:2px;min-width:0;height:100%;box-sizing:border-box;padding:2px}.design-field:has(>.design-segments)>select{display:none}.design-field:has(>.design-token-binding)>.design-segments{margin-right:24px}.design-segments button{flex:1;display:grid;place-items:center;min-width:0;padding:0;border:0;border-radius:4px;background:none;color:#898680;font:inherit;font-size:10px;cursor:pointer}.design-segments button:hover{color:#f1efeb}.design-segments button[aria-checked=true]{background:#ffffff1a;color:#f1efeb}.design-segments button:focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}.design-segments svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}.design-field__unit{flex:none;padding-right:8px;color:#77736f;font-size:10px;pointer-events:none}.design-field__unit:empty{display:none}.design-field.design-field:has(>.design-field__unit:not(:empty))>input[data-property]{padding-right:2px}.design-field:has(>.design-token-binding)>.design-field__unit{margin-right:20px}.design-field:is([data-token-mode=token],[data-token-mode=connected])>.design-field__unit{visibility:hidden}.design-field:has(>.design-token-binding>.design-token-off:not([hidden]))>.design-field__unit{margin-right:30px}.design-field.design-field[data-inline-token]:is([data-token-mode=token],[data-token-mode=connected])>:is([data-property],.design-field__unit){visibility:visible}.design-field.design-field[data-inline-token]:is([data-token-mode=token],[data-token-mode=connected])>.design-field__unit{display:block;margin-right:calc(var(--chip,50%) + 30px)}.design-field.design-field[data-inline-token]:is([data-token-mode=token],[data-token-mode=connected]) .design-token-chip{left:auto;width:max-content;max-width:50%;box-sizing:border-box;overflow:clip;overflow-clip-margin:content-box}.design-field.design-field[data-inline-token]:is([data-token-mode=token],[data-token-mode=connected]) .design-token-binding select{left:auto;width:var(--chip,50%)}.design-token-chip__verb{display:contents}.design-field[data-inline-token] .design-token-chip__verb{display:none}.design-field.design-field[data-inline-token]:is([data-token-mode=token],[data-token-mode=connected])>input[data-property]{padding-right:2px}.design-field[data-inline-token]>.komo-tokens:not([data-custom])>.komo-tokens__head,.design-field[data-inline-token] .komo-custom__body>.komo-typed:not(.komo-typed__advanced){display:none}",(l instanceof ShadowRoot?l:document.head).append(e)}for(let i of e.querySelectorAll(".design-field[data-field-property]")){if(i.dataset.enhanced)continue;i.dataset.enhanced="";let e=i.dataset.fieldProperty,l=i.querySelector(":scope > [data-property]");if(!l)continue;if(l instanceof HTMLSelectElement&&"font-weight"===e)for(let e of l.options)e.style.fontWeight=e.value;l instanceof HTMLSelectElement&&t[e]&&s(i,l,a,t[e]);let r=n.has(e);if(!(l instanceof HTMLInputElement)||!r&&!/design-field--(length|size)/.test(i.className))continue;let g=document.createElement("span");g.className="design-field__unit",g.setAttribute("aria-hidden","true"),l.after(g);let c=()=>{r&&!i.querySelector(":scope > .komo-tokens")&&i.toggleAttribute("data-inline-token",!/\s/.test(getComputedStyle(a).getPropertyValue(e).trim()))},f=()=>{let e=i.querySelector(".design-token-chip");e&&d?.observe(e)};r&&new MutationObserver(()=>{f(),c()}).observe(i,{childList:!0}),f(),o(l,()=>{g.textContent="line-height"!==e&&/^-?\d*\.?\d+$/.test(l.value.trim())?"px":"",c()})}}function s(t,n,i,d){let a=document.createElement("div");a.className="design-segments",a.setAttribute("role","radiogroup"),a.setAttribute("aria-label",n.getAttribute("aria-label")??"");let s,l=()=>{let e=s;s=void 0,e?.()},r=[...n.options].filter(e=>d[e.value]).map(t=>{let o=document.createElement("button");return o.type="button",o.setAttribute("role","radio"),o.value=t.value,o.title=t.label,o.setAttribute("aria-label",t.label),o.innerHTML=`<svg viewBox="0 0 12 12" aria-hidden="true"><path d="${d[t.value]}"/></svg>`,o.addEventListener("pointerenter",()=>{l(),n.value!==t.value&&(s=e(i,n.dataset.property,t.value))}),o.addEventListener("pointerleave",l),o.addEventListener("click",()=>g(t.value)),o}),g=e=>{l(),n.value!==e&&(n.dispatchEvent(new Event("focus")),n.value=e,n.dispatchEvent(new Event("input",{bubbles:!0})),n.dispatchEvent(new Event("change",{bubbles:!0})))};a.addEventListener("keydown",e=>{let t={ArrowRight:1,ArrowDown:1,ArrowLeft:-1,ArrowUp:-1}[e.key];if("Escape"===e.key&&s)return l(),void e.stopPropagation();if(!t)return;e.preventDefault();let n=(Math.max(0,r.findIndex(e=>"true"===e.getAttribute("aria-checked")))+t+r.length)%r.length;g(r[n].value),r[n].focus()}),a.append(...r),n.after(a),o(n,()=>{let e={start:"left",end:"right"}[n.value]??n.value,t=r.findIndex(t=>t.value===e);r.forEach((e,n)=>{e.setAttribute("aria-checked",String(n===t)),e.tabIndex=n===Math.max(t,0)?0:-1})})}export{a as enhance};
+import{h as e}from"./chunk-4FX5IS2U.js";import"./chunk-XOMOONGK.js";var t={"text-align":{left:"M1.5 2.5h9M1.5 5h6M1.5 7.5h9M1.5 10h6",center:"M1.5 2.5h9M3 5h6M1.5 7.5h9M3 10h6",right:"M1.5 2.5h9M4.5 5h6M1.5 7.5h9M4.5 10h6",justify:"M1.5 2.5h9M1.5 5h9M1.5 7.5h9M1.5 10h9"},"border-style":{none:"M3 3l6 6M9 3 3 9",solid:"M1.5 6h9",dashed:"M1.5 6h2M5 6h2M8.5 6h2",dotted:"M2 6h.01M4.67 6h.01M7.33 6h.01M10 6h.01"}},n=new Set(["font-size","line-height","letter-spacing","gap","border-width","padding","margin","border-radius"]),i=new WeakSet,d=globalThis.ResizeObserver&&new ResizeObserver(e=>{for(let{target:t}of e)t.closest(".design-field")?.style.setProperty("--chip",`${t.offsetWidth}px`)});function o(e,t){let n=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e),"value");Object.defineProperty(e,"value",{configurable:!0,get:()=>n.get.call(e),set:i=>{n.set.call(e,i),t()}}),e.addEventListener("input",t),t()}function a(e,a){let l=e.getRootNode();if((l instanceof ShadowRoot||l===document)&&!i.has(l)){i.add(l);let e=document.createElement("style");e.textContent=".design-segments{display:flex;flex:1;gap:2px;min-width:0;height:100%;box-sizing:border-box;padding:2px}.design-field:has(>.design-segments)>select{display:none}.design-field:has(>.design-token-binding)>.design-segments{margin-right:24px}.design-segments button{flex:1;display:grid;place-items:center;min-width:0;padding:0;border:0;border-radius:4px;background:none;color:#898680;font:inherit;font-size:10px;cursor:pointer}.design-segments button:hover{color:#f1efeb}.design-segments button[aria-checked=true]{background:#ffffff1a;color:#f1efeb}.design-segments button:focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}.design-segments svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}.design-field__unit{flex:none;padding-right:8px;color:#77736f;font-size:10px;pointer-events:none}.design-field__unit:empty{display:none}.design-field.design-field:has(>.design-field__unit:not(:empty))>input[data-property]{padding-right:2px}.design-field:has(>.design-token-binding)>.design-field__unit{margin-right:20px}.design-field:is([data-token-mode=token],[data-token-mode=connected])>.design-field__unit{visibility:hidden}.design-field:has(>.design-token-binding>.design-token-off:not([hidden]))>.design-field__unit{margin-right:30px}.design-field.design-field[data-inline-token]:is([data-token-mode=token],[data-token-mode=connected])>:is([data-property],.design-field__unit){visibility:visible}.design-field.design-field[data-inline-token]:is([data-token-mode=token],[data-token-mode=connected])>.design-field__unit{display:block;margin-right:calc(var(--chip,50%) + 30px)}.design-field.design-field[data-inline-token]:is([data-token-mode=token],[data-token-mode=connected]) .design-token-chip{left:auto;width:max-content;max-width:50%;box-sizing:border-box;overflow:clip;overflow-clip-margin:content-box}.design-field.design-field[data-inline-token]:is([data-token-mode=token],[data-token-mode=connected]) .design-token-binding select{left:auto;width:var(--chip,50%)}.design-token-chip__verb{display:contents}.design-field[data-inline-token] .design-token-chip__verb{display:none}.design-field.design-field[data-inline-token]:is([data-token-mode=token],[data-token-mode=connected])>input[data-property]{padding-right:2px}.design-field[data-inline-token]>.palette-tokens:not([data-custom])>.palette-tokens__head,.design-field[data-inline-token] .palette-custom__body>.palette-typed:not(.palette-typed__advanced){display:none}",(l instanceof ShadowRoot?l:document.head).append(e)}for(let i of e.querySelectorAll(".design-field[data-field-property]")){if(i.dataset.enhanced)continue;i.dataset.enhanced="";let e=i.dataset.fieldProperty,l=i.querySelector(":scope > [data-property]");if(!l)continue;if(l instanceof HTMLSelectElement&&"font-weight"===e)for(let e of l.options)e.style.fontWeight=e.value;l instanceof HTMLSelectElement&&t[e]&&s(i,l,a,t[e]);let r=n.has(e);if(!(l instanceof HTMLInputElement)||!r&&!/design-field--(length|size)/.test(i.className))continue;let g=document.createElement("span");g.className="design-field__unit",g.setAttribute("aria-hidden","true"),l.after(g);let p=()=>{r&&!i.querySelector(":scope > .palette-tokens")&&i.toggleAttribute("data-inline-token",!/\s/.test(getComputedStyle(a).getPropertyValue(e).trim()))},c=()=>{let e=i.querySelector(".design-token-chip");e&&d?.observe(e)};r&&new MutationObserver(()=>{c(),p()}).observe(i,{childList:!0}),c(),o(l,()=>{g.textContent="line-height"!==e&&/^-?\d*\.?\d+$/.test(l.value.trim())?"px":"",p()})}}function s(t,n,i,d){let a=document.createElement("div");a.className="design-segments",a.setAttribute("role","radiogroup"),a.setAttribute("aria-label",n.getAttribute("aria-label")??"");let s,l=()=>{let e=s;s=void 0,e?.()},r=[...n.options].filter(e=>d[e.value]).map(t=>{let o=document.createElement("button");return o.type="button",o.setAttribute("role","radio"),o.value=t.value,o.title=t.label,o.setAttribute("aria-label",t.label),o.innerHTML=`<svg viewBox="0 0 12 12" aria-hidden="true"><path d="${d[t.value]}"/></svg>`,o.addEventListener("pointerenter",()=>{l(),n.value!==t.value&&(s=e(i,n.dataset.property,t.value))}),o.addEventListener("pointerleave",l),o.addEventListener("click",()=>g(t.value)),o}),g=e=>{l(),n.value!==e&&(n.dispatchEvent(new Event("focus")),n.value=e,n.dispatchEvent(new Event("input",{bubbles:!0})),n.dispatchEvent(new Event("change",{bubbles:!0})))};a.addEventListener("keydown",e=>{let t={ArrowRight:1,ArrowDown:1,ArrowLeft:-1,ArrowUp:-1}[e.key];if("Escape"===e.key&&s)return l(),void e.stopPropagation();if(!t)return;e.preventDefault();let n=(Math.max(0,r.findIndex(e=>"true"===e.getAttribute("aria-checked")))+t+r.length)%r.length;g(r[n].value),r[n].focus()}),a.append(...r),n.after(a),o(n,()=>{let e={start:"left",end:"right"}[n.value]??n.value,t=r.findIndex(t=>t.value===e);r.forEach((e,n)=>{e.setAttribute("aria-checked",String(n===t)),e.tabIndex=n===Math.max(t,0)?0:-1})})}export{a as enhance};

package/dist/{frame-iframe-WBEP3R6S.js → frame-iframe-PYLYMCOK.js}

@@ -1 +1 @@
-import{E as e,a as t,h as n,r as o,u as r}from"./chunk-IQOPM3JF.js";function i(e){let t=e&&e!==window?e.frameElement:null;if(!t)return null;let n=t.getBoundingClientRect(),o=n.width/(t.offsetWidth||1)||1;return{left:n.left+t.clientLeft*o,top:n.top+t.clientTop*o,scale:o}}function a(e,t){let n=i(t);return n?new DOMRect(n.left+e.left*n.scale,n.top+e.top*n.scale,e.width*n.scale,e.height*n.scale):new DOMRect(e.left,e.top,e.width,e.height)}function l(e,t,n){let o=i(n);return o?{x:(e-o.left)/o.scale,y:(t-o.top)/o.scale}:{x:e,y:t}}o({toScreen:a,toView:l,screenRect(e){let t=e.getBoundingClientRect(),n=e.ownerDocument.defaultView;return n===window?t:a(t,n)},clientPoint(e){let t=e.view;if(!t||t===window)return{x:e.clientX,y:e.clientY};let n=a({left:e.clientX,top:e.clientY,width:0,height:0},t);return{x:n.left,y:n.top}},pageElementsAt(e,t){let o=n(),r=o?.parentElement?.getBoundingClientRect();if(!o||!r||e<r.left||e>=r.right||t<r.top||t>=r.bottom)return document.elementsFromPoint(e,t);let i=l(e,t,o.contentWindow);return o.contentDocument.elementsFromPoint(i.x,i.y)},counterpart(e,t){if(e.ownerDocument===t)return e;let n=[];for(let t=e;t&&t!==t.ownerDocument.documentElement;t=t.parentElement){if(t.id||t===t.ownerDocument.body){n.unshift(t.id?`#${CSS.escape(t.id)}`:"body");break}n.unshift(`${t.localName}:nth-child(${[...t.parentElement.children].indexOf(t)+1})`)}try{return n.length?t.querySelector(n.join(">")):t.documentElement}catch{return null}}});async function c(t){if(new URL(t,location.href).origin!==location.origin)return"The viewport URL is on another origin, so Palette can't reach into it.";let n=e("iframe");n.hidden=!0,document.body.append(n);try{let e=await(n.contentWindow?.fetch??fetch)(t,{redirect:"manual",credentials:"include"});if("opaqueredirect"===e.type)return"The page redirected to another origin, so Palette can't reach into it.";if((e.headers.get("x-frame-options")?.toLowerCase()??"").includes("deny"))return"The page sends X-Frame-Options: DENY, which blocks a separate viewport.";let o=/frame-ancestors([^;,]*)/i.exec(e.headers.get("content-security-policy")??"")?.[1].trim();if(void 0!==o&&!/'self'|\*|https?:/.test(o))return`The page's Content-Security-Policy (frame-ancestors ${o||"'none'"}) blocks a separate viewport.`}catch{}finally{n.remove()}return"The page didn't load as a same-origin document in a separate viewport."}function s(n){let o=e("style");o.textContent=".frame-stage{position:fixed;inset:0;z-index:0;background:#080808;pointer-events:auto}.frame-port{position:absolute;overflow:clip;border-radius:12px;overscroll-behavior:contain}.frame-port[data-pan]{overflow:auto;scrollbar-width:thin;scrollbar-color:#5a5a5a transparent}.frame-stage[data-loading]{visibility:hidden;pointer-events:none}.frame-port iframe{display:block;border:0;transform-origin:0 0;color-scheme:normal}";let i=e("div","frame-stage"),a=e("div","frame-port");i.dataset.loading="",a.style.background=n.background;let l=e("iframe");l.name=t,l.dataset.komoViewport="",l.title="Page viewport",a.append(l),i.append(a),n.parent.insertBefore(o,n.before),n.parent.insertBefore(i,n.before);let s=new AbortController,d=null,u=!1,p=e=>{u||(u=!0,clearTimeout(h),r(null),n.failed(e))},h=window.setTimeout(()=>p(`The page took longer than ${Math.round((n.timeout??15e3)/1e3)} seconds to load in a separate viewport.`),n.timeout??15e3);return l.addEventListener("load",()=>{if(u)return;let e=null;try{e=l.contentDocument,e&&l.contentWindow.location.origin!==location.origin&&(e=null)}catch{e=null}if(!e||"about:blank"===e.URL)return d?p("The page navigated to another origin, so Palette can't reach into it."):void c(n.url).then(p);clearTimeout(h),d||l.contentWindow.scrollTo({top:n.scroll,behavior:"instant"}),d=e,r(l),function(e,t){let o=()=>queueMicrotask(()=>!u&&n.changed());for(let t of["pushState","replaceState"]){let n=e.history[t];e.history[t]=function(...e){let t=n.apply(this,e);return o(),t}}for(let n of["popstate","hashchange","resize"])e.addEventListener(n,o,{signal:t});let r=new MutationObserver(o);r.observe(e.document.documentElement,{childList:!0,subtree:!0,characterData:!0}),t.addEventListener("abort",()=>r.disconnect(),{once:!0})}(l.contentWindow,s.signal),delete i.dataset.loading,n.ready()},{signal:s.signal}),a.addEventListener("scroll",()=>n.changed(),{passive:!0,signal:s.signal}),l.src=n.url,{iframe:l,port:a,place({left:e,top:t,width:n,height:o,logical:r,scale:i,pan:c}){Object.assign(a.style,{left:`${e}px`,top:`${t}px`,width:`${n}px`,height:`${o}px`}),c||a.scrollTo(0,0),a.toggleAttribute("data-pan",c),Object.assign(l.style,{width:`${r[0]}px`,height:`${r[1]}px`,transform:1===i?"":`scale(${i})`})},destroy(){u=!0,clearTimeout(h),s.abort(),r(null),i.remove(),o.remove()}}}export{c as frameFailure,s as openFrameViewport};
+import{E as e,a as t,h as n,r as o,u as r}from"./chunk-4HBBEVFK.js";function i(e){let t=e&&e!==window?e.frameElement:null;if(!t)return null;let n=t.getBoundingClientRect(),o=n.width/(t.offsetWidth||1)||1;return{left:n.left+t.clientLeft*o,top:n.top+t.clientTop*o,scale:o}}function a(e,t){let n=i(t);return n?new DOMRect(n.left+e.left*n.scale,n.top+e.top*n.scale,e.width*n.scale,e.height*n.scale):new DOMRect(e.left,e.top,e.width,e.height)}function l(e,t,n){let o=i(n);return o?{x:(e-o.left)/o.scale,y:(t-o.top)/o.scale}:{x:e,y:t}}o({toScreen:a,toView:l,screenRect(e){let t=e.getBoundingClientRect(),n=e.ownerDocument.defaultView;return n===window?t:a(t,n)},clientPoint(e){let t=e.view;if(!t||t===window)return{x:e.clientX,y:e.clientY};let n=a({left:e.clientX,top:e.clientY,width:0,height:0},t);return{x:n.left,y:n.top}},pageElementsAt(e,t){let o=n(),r=o?.parentElement?.getBoundingClientRect();if(!o||!r||e<r.left||e>=r.right||t<r.top||t>=r.bottom)return document.elementsFromPoint(e,t);let i=l(e,t,o.contentWindow);return o.contentDocument.elementsFromPoint(i.x,i.y)},counterpart(e,t){if(e.ownerDocument===t)return e;let n=[];for(let t=e;t&&t!==t.ownerDocument.documentElement;t=t.parentElement){if(t.id||t===t.ownerDocument.body){n.unshift(t.id?`#${CSS.escape(t.id)}`:"body");break}n.unshift(`${t.localName}:nth-child(${[...t.parentElement.children].indexOf(t)+1})`)}try{return n.length?t.querySelector(n.join(">")):t.documentElement}catch{return null}}});async function c(t){if(new URL(t,location.href).origin!==location.origin)return"The viewport URL is on another origin, so Palette can't reach into it.";let n=e("iframe");n.hidden=!0,document.body.append(n);try{let e=await(n.contentWindow?.fetch??fetch)(t,{redirect:"manual",credentials:"include"});if("opaqueredirect"===e.type)return"The page redirected to another origin, so Palette can't reach into it.";if((e.headers.get("x-frame-options")?.toLowerCase()??"").includes("deny"))return"The page sends X-Frame-Options: DENY, which blocks a separate viewport.";let o=/frame-ancestors([^;,]*)/i.exec(e.headers.get("content-security-policy")??"")?.[1].trim();if(void 0!==o&&!/'self'|\*|https?:/.test(o))return`The page's Content-Security-Policy (frame-ancestors ${o||"'none'"}) blocks a separate viewport.`}catch{}finally{n.remove()}return"The page didn't load as a same-origin document in a separate viewport."}function s(n){let o=e("style");o.textContent=".frame-stage{position:fixed;inset:0;z-index:0;background:#080808;pointer-events:auto}.frame-port{position:absolute;overflow:clip;border-radius:12px;overscroll-behavior:contain}.frame-port[data-pan]{overflow:auto;scrollbar-width:thin;scrollbar-color:#5a5a5a transparent}.frame-stage[data-loading]{visibility:hidden;pointer-events:none}.frame-port iframe{display:block;border:0;transform-origin:0 0;color-scheme:normal}";let i=e("div","frame-stage"),a=e("div","frame-port");i.dataset.loading="",a.style.background=n.background;let l=e("iframe");l.name=t,l.dataset.paletteViewport=l.dataset.komoViewport="",l.title="Page viewport",a.append(l),i.append(a),n.parent.insertBefore(o,n.before),n.parent.insertBefore(i,n.before);let s=new AbortController,d=null,u=!1,p=e=>{u||(u=!0,clearTimeout(h),r(null),n.failed(e))},h=window.setTimeout(()=>p(`The page took longer than ${Math.round((n.timeout??15e3)/1e3)} seconds to load in a separate viewport.`),n.timeout??15e3);return l.addEventListener("load",()=>{if(u)return;let e=null;try{e=l.contentDocument,e&&l.contentWindow.location.origin!==location.origin&&(e=null)}catch{e=null}if(!e||"about:blank"===e.URL)return d?p("The page navigated to another origin, so Palette can't reach into it."):void c(n.url).then(p);clearTimeout(h),d||l.contentWindow.scrollTo({top:n.scroll,behavior:"instant"}),d=e,r(l),function(e,t){let o=()=>queueMicrotask(()=>!u&&n.changed());for(let t of["pushState","replaceState"]){let n=e.history[t];e.history[t]=function(...e){let t=n.apply(this,e);return o(),t}}for(let n of["popstate","hashchange","resize"])e.addEventListener(n,o,{signal:t});let r=new MutationObserver(o);r.observe(e.document.documentElement,{childList:!0,subtree:!0,characterData:!0}),t.addEventListener("abort",()=>r.disconnect(),{once:!0})}(l.contentWindow,s.signal),delete i.dataset.loading,n.ready()},{signal:s.signal}),a.addEventListener("scroll",()=>n.changed(),{passive:!0,signal:s.signal}),l.src=n.url,{iframe:l,port:a,place({left:e,top:t,width:n,height:o,logical:r,scale:i,pan:c}){Object.assign(a.style,{left:`${e}px`,top:`${t}px`,width:`${n}px`,height:`${o}px`}),c||a.scrollTo(0,0),a.toggleAttribute("data-pan",c),Object.assign(l.style,{width:`${r[0]}px`,height:`${r[1]}px`,transform:1===i?"":`scale(${i})`})},destroy(){u=!0,clearTimeout(h),s.abort(),r(null),i.remove(),o.remove()}}}export{c as frameFailure,s as openFrameViewport};