@hazem3500/komo 0.9.27 → 0.9.28

package/dist/react-inspector.d.ts

@@ -5,13 +5,9 @@
  * small, safe subset that can be edited; the consuming React app supplies a
  * state callback so preview changes go through React's normal render cycle.
  */
+import type { ComponentEditor, ComponentIdentity, ComponentProperty } from "./design-system.js";
 export type InspectableScalar = string | number | boolean | undefined;
-export interface InspectableProp {
-    name: string;
-    kind: "string" | "number" | "boolean" | "enum" | "unsupported";
-    required: boolean;
-    values?: Array<string | number | boolean>;
-    typeLabel: string;
+export interface InspectableProp extends ComponentProperty {
 }
 export interface InspectableComponent {
     id: string;
@@ -27,6 +23,9 @@ export interface RegisteredInspectableComponent {
     props: Record<string, InspectableScalar>;
     onChange(next: Record<string, InspectableScalar>): void;
     setProps(next: Record<string, InspectableScalar>): void;
+    preview?: "adapter";
+    releaseProps?(properties: string[]): void;
+    subscribe?(listener: () => void): () => void;
 }
 export interface ReactPropEdit {
     element: HTMLElement;
@@ -34,6 +33,8 @@ export interface ReactPropEdit {
     before: InspectableScalar;
     after: InspectableScalar;
 }
+/** Adapt once per component root so props share the existing Undo and preview lifecycle. */
+export declare function adaptComponentEditor(identity: ComponentIdentity, editor: ComponentEditor): RegisteredInspectableComponent;
 export declare function isEditablePropValue(prop: InspectableProp, value: unknown): value is InspectableScalar;
 /** Register one opt-in root. Never infers ownership from React private internals. */
 export declare function registerInspectableRoot(element: HTMLElement, definition: InspectableComponent, props: Record<string, unknown>, onChange: (next: Record<string, InspectableScalar>) => void): () => void;

package/dist/react-props-panel-Y7F2P3AG.js

@@ -0,0 +1 @@
+import{c as e}from"./chunk-4KEVPMJJ.js";import{a as t,b as n,e as i,f as o,h as r,i as a,j as s,k as d,l,m as p,n as c,o as u,p as f,q as m,r as g,s as h,t as b,u as v,v as x,w as k,x as y,y as w,z as E}from"./chunk-HTMUFH7I.js";import{b as $}from"./chunk-HHG6KWKR.js";import{a as C}from"./chunk-RPY7OOOR.js";var A=new Map,S=new WeakMap,P=!1;function N(e){let t={};for(let n of e?.themes??[])try{t[n.id]=n.current()}catch{}return t}function M(e,t={}){let n=S.get(e);n||S.set(e,n=new Map);let i=JSON.stringify(Object.entries(t).sort()),o=n.get(i);return o||(o=Promise.resolve().then(()=>e.list(Object.keys(t).length?t:void 0)).then(e=>Array.isArray(e)?e.filter(e=>e&&"string"==typeof e.path):[]),o.catch(()=>n.delete(i)),n.set(i,o)),o}function L(e,t){return Promise.resolve().then(()=>e.resolve(t)).then(e=>e??{},()=>({}))}function T(e){let t,n=e.trim().toLowerCase().replace(/\s+/g," "),i=/^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/.exec(n)?.[1];if(i)t=(i.length<5?[...i].map(e=>e+e).join(""):i).match(/../g).map((e,t)=>parseInt(e,16)/(t>2?255:1));else{let e=/^rgba?\(([^)]*)\)$/.exec(n)?.[1].split(/\s*[,/]\s*|\s+/);e&&(3===e.length||4===e.length)&&e.every(e=>/^[\d.]+%?$/.test(e))&&(t=e.map((e,t)=>parseFloat(e)*(e.endsWith("%")?t>2?.01:2.55:1)))}if(!t)return n.replace(/\s*,\s*/g,",");let[o,r,a,s=1]=t.map((e,t)=>t>2?+e.toFixed(2):Math.round(e));return 1===s?`rgb(${o},${r},${a})`:`rgba(${o},${r},${a},${s})`}function j(e,t){let n=T(t);return n?e.find(e=>"string"==typeof e.value&&T(e.value)===n):void 0}function z(e){return e.label||e.path}function R(e){return[e.path,e.ref,e.value,e.states?.length?`States: ${e.states.join(", ")}`:"",e.description].filter(Boolean).join(" · ")}function q(){let e=document.createElement("span");return e.className="design-token-off",e.setAttribute("role","img"),e}function D(e,t,n){e.title=`Not from a token · ${t||"unset"}${n?` · matches ${z(n)}`:""}`,e.setAttribute("aria-label",e.title)}function O(e,t,n,i){try{if(e.preview)return e.preview(t,n,i)??(()=>{})}catch{return()=>{}}return $(t,n,i.value)}function H(e,t){return[...A.get(e)??[]].reverse().find(e=>e.property===t)?.token}function V(e){let t=A.get(e);t?.pop()?.undo(),t&&!t.length&&A.delete(e)}function _(e){return!!A.get(e)?.length}function B(e){for(;A.has(e);)V(e)}function I(e){return[...new Set(A.get(e)?.map(e=>e.property))]}function U(e,t){try{let n=t.adapter.describe?.(e,t.property,t.from,t.token);return n?String(n).replace(/\s+/g," ").replace(/→/g,"->").trim().slice(0,300):void 0}catch{return}}function F(e){let t=[],n=new Set;for(let i of function(e){let t=new Map;for(let n of A.get(e)??[])t.set(n.property,n);return[...t.values()].filter(e=>!("path"in e.from)||e.from.path!==e.token.path)}(e)){n.add(i.adapter.id);let o="path"in i.from?`${i.fromToken?.value?`${i.fromToken.value} `:""}[${i.from.path}]`:i.from.offToken||"(unset)";t.push(`Element ${i.property}: ${o} → ${i.token.value} [${i.token.path}]`);let r=U(e,i);r&&t.push(`Apply: ${r}`)}if(t.length)return["Proposed design-token changes (preview only)",...t,`Token adapter: ${[...n].join(", ")}`].join("\n")}var W=new Map,K=new Map,J=new WeakSet,Y=new WeakMap;function G(e){return void 0===e?"unset":JSON.stringify(e)??"unset"}var Q=new Map,X=e=>e.definition.source?`${e.definition.source}${e.definition.line?`:${e.definition.line}`:""}`:"";function Z(e){if(e)for(let[e,t]of W){let n=i(e);n&&(Q.set(e,n.props),n.setProps({...n.props,...Object.fromEntries(t)}))}else for(let[e,t]of Q)i(e)?.setProps(t);e||Q.clear(),l(e),function(e){if(e!==P){P=e;for(let[t,n]of A)if(e)for(let e of[...n].reverse())e.undo();else for(let e of n)e.undo=O(e.adapter,t,e.property,e.token)}}(e)}function ee(e){return!!W.get(e)?.size}function te(e){let t=i(e),n=t?.definition.textProp,o=t?.definition.props.find(e=>e.name===n);if(!t||!n||"string"!==o?.kind)return null;let r=t.props[n];if("string"!=typeof r||r.length>500)return null;let a=W.get(e);return a||W.set(e,a=new Map),a.has(n)||a.set(n,r),{propName:n,before:r}}function ne(e,t,o){let r=i(e),a=r?.definition.props.find(e=>e.name===t);return!(!r||r.definition.textProp!==t||"string"!==a?.kind||o.length>500||!n(a,o))&&(r.setProps({...r.props,[t]:o}),!0)}function ie(e,t,n,i){if(n===i){let i=W.get(e);return void(i?.get(t)===n&&!(K.get(e)??[]).some(e=>e.propName===t)&&(i.delete(t),i.size||W.delete(e)))}let o=K.get(e);o||K.set(e,o=[]),o.push({propName:t,before:n,after:i})}function oe(e,t,n){ne(e,t,n);let i=W.get(e);i?.get(t)===n&&!(K.get(e)??[]).some(e=>e.propName===t)&&(i.delete(t),i.size||W.delete(e))}function re(e){return!!e&&!!K.get(e)?.length}function ae(e){let t=W.get(e),n=i(e);if(!t?.size||!n)return;let o=r(e),a=[...t].map(([e,t])=>{let i=n.definition.props.find(t=>t.name===e)?.styleProperty,r=n.props[e],a=i&&"string"==typeof r?o?.tokens.find(e=>e.properties.includes(i)&&r===`var(${e.cssVariable})`):void 0;return`- ${e}: ${G(t)} → ${G(r)}${a?` [${a.path}]`:" [custom value]"}`});return["Proposed React prop changes (preview only)",`Component: ${n.definition.name}`,...X(n)?[`Source: ${X(n)}`]:[],...a,"Runtime preview only; inline feedback does not write source files."].join("\n")}function se(e,t){if(i(e))return null;let n;try{n=t?.components?.identify(e)}catch{}let r=o(e);return n?.name&&(!r||r.root!==n.element&&r.root.contains(n.element))?n:null}var de=e=>String(e).replace(/\s+/g," ").trim();function le(e,t){let n=Object.entries(N(t)).map(([e,t])=>`${de(e)}=${de(t)}`).join(", "),r=se(e,t),a=i(e),s=a?{root:e,component:a}:r?void 0:o(e);if(s){let{definition:e,props:t}=s.component;r={name:e.name,source:X(s.component),props:{...t,...Object.fromEntries(W.get(s.root)??[])}}}let d=Object.entries(r?.props??{}).filter(([,e])=>null===e||["boolean","number"].includes(typeof e)||"string"==typeof e&&e.length<=80).slice(0,12).map(([e,t])=>`${de(e)}=${JSON.stringify(t).replace(/→/g,"\\u2192")}`);return[n&&`Theme: ${n}`,r?.name&&`Component: ${de(r.name)}${r.source?` (${de(r.source)})`:""}`,d.length&&`Props: ${d.join(", ")}`].filter(e=>!!e)}function pe(e){return[ae(e),E(e),F(e)].filter(e=>!!e).join("\n\n")||void 0}function ce(e,t,n){Y.get(e)?.abort();let o=new AbortController;Y.set(e,o),e.addEventListener("click",e=>{let o=t();if(!o)return;let r=E(o)||_(o);!i(o)&&!r||(e.stopImmediatePropagation(),n(o,pe(o)))},{capture:!0,signal:o.signal})}function ue(e){return x(e)}function fe(e){return v(e)||_(e)}function me(e){k(e)}function ge(e){y(e),B(e)}function he(e){if(!e||J.has(e))return;let t=document.createElement("style");t.textContent=".design-react-source{display:block;padding:0 0 8px;color:#77736f;font-size:10px;overflow-wrap:anywhere}.design-react-inside{padding:10px 12px}.design-react-inside button{padding:0;border:0;background:none;color:#bda6ef;font:inherit;cursor:pointer}.design-react-inside button:hover{text-decoration:underline}.design-react-field.design-field{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 8px;height:auto;min-height:28px;margin-top:4px;background:none;box-shadow:none;color:#898680;font-size:11px}.design-react-field>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-react-field.design-field>:is(input,select){box-sizing:border-box;width:100%;min-width:0;height:28px;padding:0 8px;border:0;border-radius:6px;background-color:#ffffff0a;color:#f1efeb;font:inherit;font-size:11px}.design-react-field.design-field>:is(input,select):focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}.design-react-field.design-field>select{padding-right:20px}.design-react-field input[type=checkbox]{justify-self:end;width:14px;height:14px;accent-color:#bda6ef}.design-react-field input:disabled{opacity:.55;cursor:not-allowed}.design-react-type{display:none}.design-react-field .design-token-binding{grid-column:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;margin-top:4px;color:#77736f;font-size:10px}.design-react-field .design-token-binding select{min-width:0;height:24px;border:0;border-radius:6px;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 6px center/8px no-repeat;color:#e9e6e1;padding:0 18px 0 6px;font:inherit;font-size:10px;cursor:pointer}.design-react-field .design-token-binding[data-mode=token] select{background-color:#bda6ef24;color:#e6dcfb}.design-token-binding__state{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.design-field>.design-token-binding{display:contents}.design-field:has(>.design-token-binding)>input[data-property]{padding-right:28px}.design-token-icon,.design-token-detach,.design-field>.design-token-binding select{position:absolute;top:4px;right:4px;width:20px;height:20px;box-sizing:border-box;border-radius:5px}.design-token-icon{display:grid;place-items:center;color:#77736f;opacity:0;pointer-events:none;transition:opacity .12s}.design-token-icon::before{content:'';width:6px;height:6px;border:1.2px solid currentColor;border-radius:1.5px;rotate:45deg}.design-field:is(:hover,:focus-within) .design-token-icon{opacity:1}.design-field>.design-token-binding select{margin:0;padding:0;border:0;opacity:0;cursor:pointer;appearance:none}.design-field>.design-token-binding select:hover+.design-token-icon,.design-field:has(.design-token-binding select:hover) .design-token-icon{background:#ffffff14;color:#e9e6e1}.design-field:has(.design-token-binding select:focus-visible) :is(.design-token-icon,.design-token-chip){outline:2px solid #bda6ef;outline-offset:1px;opacity:1}.design-field[data-token-mode=override] .design-token-icon{opacity:1;color:#e7c27d}.design-token-chip,.design-token-detach{display:none}.design-field:is([data-token-mode=token],[data-token-mode=connected])>[data-property]{visibility:hidden}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-chip{position:absolute;inset:4px 28px 4px var(--lead,4px);display:flex;align-items:center;gap:5px;padding:0 6px;border-radius:4px;background:#bda6ef1f;color:#e6dcfb;font-size:11px;white-space:nowrap;overflow:hidden;pointer-events:none}.design-token-chip::before{content:'';flex:none;width:5px;height:5px;border:1.2px solid #c8b5f4;border-radius:1px;rotate:45deg}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-binding select{left:var(--lead,4px);right:28px;width:auto}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-icon{display:none}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-detach{display:grid;place-items:center;color:#898680}.design-token-detach:hover{background:#ffffff14;color:#f1efeb}.design-token-detach svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}.design-theme-group .design-react-source{padding:0 0 6px}.design-theme-heading{display:block;padding:8px 0 2px;color:#77736f;font-size:10px;text-transform:capitalize}.design-theme-token{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) 20px;align-items:center;gap:6px;margin-top:4px}.design-theme-token>span{overflow:hidden;color:#898680;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.design-theme-token[data-changed]>span{color:#e6dcfb}.design-theme-token[data-changed]::before{content:'';position:absolute;top:calc(50% - 2px);left:-8px;width:4px;height:4px;border-radius:50%;background:#bda6ef}.design-theme-reset{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:5px;background:none;color:#77736f;cursor:pointer}.design-theme-reset:disabled{visibility:hidden}.design-theme-reset:hover{background:#ffffff14;color:#f1efeb}.design-theme-reset svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.design-token-off{position:absolute;top:8px;right:24px;display:grid;place-items:center;width:12px;height:12px}.design-token-off::before{content:'';width:4px;height:4px;border-radius:50%;background:#e7c27d;opacity:.7}.design-token-off[hidden]{display:none}.design-field:has(>.design-token-binding>.design-token-off:not([hidden]))>input[data-property]{padding-right:38px}.design-theme-switch{padding:6px 12px 8px}.design-theme-switch .design-react-field>span{text-transform:capitalize}.design-theme-options{display:flex;min-width:0;padding:2px;border-radius:6px;background:#ffffff0a}.design-theme-options button{flex:1;min-width:0;height:24px;padding:0 6px;border:0;border-radius:4px;background:none;color:#898680;font:inherit;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.design-theme-options button:hover{color:#f1efeb}.design-theme-options button[aria-pressed=true]{background:#ffffff1a;color:#f1efeb}.design-theme-options button:focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}@media (max-width:520px){.design-theme-options button{height:30px}.design-react-field.design-field>:is(input,select){height:34px}.design-token-icon,.design-token-detach,.design-field>.design-token-binding select{top:7px}.design-token-off{top:11px}}.design-react-row{display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:4px}.design-react-row>.design-react-field{flex:1;min-width:0;grid-template-columns:minmax(88px,.8fr) minmax(0,1fr);min-height:32px;gap:0 10px;margin-top:6px}.design-react-row .design-react-field>:is(input,select){height:32px}.design-react-row .design-react-field>span{white-space:normal;overflow-wrap:anywhere;line-height:1.4}.design-react-row>.design-theme-reset{flex:none;width:28px;height:28px;margin-top:6px}.design-react-row>.design-theme-reset[hidden]{display:none}.design-react-preview{font-size:10px;color:#8e8799}.design-react-group>.design-react-source:first-of-type{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.design-react-advanced{margin-top:10px}.design-react-advanced>summary{color:#898680;font-size:11px;cursor:pointer}.design-react-field input[readonly]{color:#aaa;background:#ffffff06;cursor:text}.design-react-row .design-react-field>input[type=checkbox]{width:16px;height:16px;margin:8px 0}.design-react-row .design-react-field:has(input[type=checkbox]){cursor:pointer}@media(max-width:520px){.design-react-row .design-react-field>:is(input,select){height:36px}.design-react-row>.design-theme-reset{width:32px;height:32px}}.design-theme-switch{position:relative;flex:none;padding:0}.design-theme-switch>summary{display:flex;align-items:center;gap:5px;max-width:90px;min-height:28px;padding:0 8px;border-radius:7px;background:#ffffff08;color:#b7b1c2;font-size:11px;list-style:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.design-theme-switch>summary::-webkit-details-marker{display:none}.design-theme-switch>summary::after{content:\"⌄\";color:#77736f}.design-theme-switch[open]>summary,.design-theme-switch>summary:hover{background:#ffffff14;color:#f1efeb}.design-theme-popup{position:absolute;z-index:12;top:calc(100% + 6px);right:0;box-sizing:border-box;width:min(280px,calc(100vw - 48px));max-height:50dvh;overflow:auto;padding:10px 12px;border:1px solid #ffffff1a;border-radius:10px;background:#191819;box-shadow:0 12px 40px #0008}.design-theme-popup .design-react-field{grid-template-columns:68px minmax(0,1fr)}.design-theme-popup .design-react-field+ .design-react-field{margin-top:8px}.design-token-match{grid-column:1/-1;display:flex;align-items:center;gap:6px;min-width:0;margin-top:-2px;padding:0 4px;color:#77736f;font-size:10px}.design-token-match[hidden]{display:none}.design-token-match>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-token-match button{flex:none;padding:0;border:0;background:none;color:#bda6ef;font:inherit;cursor:pointer}.design-token-match button:hover{text-decoration:underline}.design-token-match button:focus-visible{outline:1px solid #bda6ef;outline-offset:2px;border-radius:2px}@media (pointer:coarse){.design-token-match button{min-height:32px}}",e.append(t),J.add(e)}function be(e,t){e.dataset.picker="token",e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded","false");let n,i=n=>import("./token-picker-RHPT7HCK.js").then(i=>{!e.isConnected||e.disabled||!n&&i.isTokenPickerOpen(e)||i.toggleTokenPicker({trigger:e,...t()})},()=>{});e.addEventListener("pointerdown",t=>{t.button||(t.preventDefault(),n="mouse"===t.pointerType?void 0:t,!n&&(e.focus(),i(!0)))}),e.addEventListener("pointerup",e=>{n&&Math.abs(e.clientY-n.clientY)<=10&&i(!0),n=void 0});for(let t of["mousedown","touchend"])e.addEventListener(t,e=>{e.cancelable&&e.preventDefault()});e.addEventListener("keydown",e=>{e.ctrlKey||e.metaKey||!["Enter"," ","ArrowDown","ArrowUp"].includes(e.key)||(e.preventDefault(),i(!1))})}function ve(e,t){let n=document.createElement("div");n.className="design-token-match",n.hidden=!0;let i=document.createElement("span"),o=document.createElement("button");o.type="button",o.textContent="Use token",n.append(i,o);let r=()=>{};return o.addEventListener("click",e=>{e.preventDefault(),r()}),{show(a,s){n.isConnected||(e??t.parentElement)?.after(n),n.hidden=!a,r=s,i.textContent=a?`Matches ${a.label||a.path}`:"",i.title=a?`${a.path}${a.ref?` · ${a.ref}`:""} · ${a.value}`:"",o.setAttribute("aria-label",a?`Use token ${a.label||a.path}`:"Use token")}}}function xe(e,t,n,i){let o=r(e);if(!o)return null;let s=b(o,t);if(!s.length)return null;he(i);let d=document.createElement("span");d.className="design-token-binding",d.setAttribute("data-mode","custom");let l=document.createElement("span");l.className="design-token-icon",l.setAttribute("aria-hidden","true");let p=document.createElement("span");p.className="design-token-chip",p.setAttribute("aria-hidden","true");let f=document.createElement("button");f.type="button",f.className="design-token-detach",f.title="Detach token",f.setAttribute("aria-label",`Detach token from ${t}`),f.innerHTML='<svg viewBox="0 0 12 12"><path d="M5 3.5 6.5 2a2.1 2.1 0 0 1 3 3L8 6.5M7 8.5 5.5 10a2.1 2.1 0 0 1-3-3L4 5.5M2 2l8 8"/></svg>';let v=document.createElement("select");v.setAttribute("aria-label",`Style token for ${t}`);let x=document.createElement("small");x.className="design-token-binding__state",x.setAttribute("aria-live","polite");let k=`komo-token-${t}-${Math.random().toString(36).slice(2,8)}`;x.id=k,v.setAttribute("aria-describedby",k);let y=document.createElement("option");y.value="custom",y.textContent="Custom value",v.append(y);for(let e of s){let t=document.createElement("option"),n=a(o,e);t.value=e.path,t.textContent=n?`${e.path} · ${n}`:e.path,v.append(t)}let w=q(),E=e=>({path:e.path,type:e.type,value:a(o,e),properties:e.properties,group:e.path.split(".")[0],ref:e.cssVariable}),C=ve(null,d),A=e=>{v.value=e,v.dispatchEvent(new Event("change"))};be(v,()=>({tokens:s.map(E),property:t,current:v.value,onPreview:n=>{let i=s.find(e=>e.path===n.path);return $(e,t,`var(${i.cssVariable})`)},onSelect:e=>A(e.path)}));let S=()=>{let n=m(o,e,t),i=n?null:g(o,e,t),r="token"===n?.mode?s.find(e=>e.path===n.tokenPath):void 0,a=r??i?.token;v.value=a?.path??"custom",p.textContent=a?.path??"";let l=n?.declaredPath,c=r?"token":i?"connected":l?"override":"custom";d.dataset.mode=c,d.parentElement?.setAttribute("data-token-mode",c),x.textContent="token"===c?l&&l!==r?.path?`Rebound from ${l} · preview`:`Linked to ${r?.path} · preview`:"connected"===c?"Connected "+("inline"===i?.origin?"inline":"from stylesheet"):"override"===c?`Custom override · was ${l}`:"",v.title=x.textContent||"Choose a token",w.hidden="custom"!==c;let u="custom"===c?getComputedStyle(e).getPropertyValue(t).trim():"",f="custom"===c?j(s.map(E),u):void 0;"custom"===c&&D(w,u,f),C.show(f,()=>f&&A(f.path))},P=new MutationObserver(S);P.observe(e,{attributes:!0,attributeFilter:["style"]});let N=new MutationObserver(()=>{d.isConnected||(P.disconnect(),N.disconnect())});return N.observe(d.ownerDocument,{childList:!0,subtree:!0}),v.addEventListener("change",()=>{let i=e.style.getPropertyValue(t),r=s.find(e=>e.path===v.value),a=m(o,e,t);if(r&&a&&r.path===a.declaredPath)h(o,e,t),n(i,e.style.getPropertyValue(t),r.path);else if(r)(r.path!==g(o,e,t)?.token.path||a)&&c(o,e,r,t,{recordHistory:!1})&&n(i,e.style.getPropertyValue(t),r.path);else{let r=d.parentElement?.querySelector("[data-property]")?.value??getComputedStyle(e).getPropertyValue(t).trim(),a=/^-?[\d.]+$/.test(r.trim())&&!/weight|line/.test(t)?`${r.trim()}px`:r;u(o,e,t,a),e.style.setProperty(t,a),n(i,a)}S()}),f.addEventListener("click",()=>{let e=s.find(e=>e.path===v.value),t=d.parentElement?.querySelector("input[data-property]"),n=e&&a(o,e);t&&n&&(t.value="number"===t.type?String(parseFloat(n)):n),v.value="custom",v.dispatchEvent(new Event("change")),d.parentElement?.querySelector("[data-property]")?.focus()}),d.append(p,v,l,f,w,x),queueMicrotask(S),S(),d}function ke(e){let t=r(e);return new Set([...t?.elementBindings.get(e)?.keys()??[],...I(e)])}function ye(e,t,n,i,o,r,a,s,d){let l=t.flatMap(e=>{let t=[...n.querySelectorAll("[data-field-property]")].find(t=>t.dataset.fieldProperty===e.property),i=t?.querySelector("[data-property]");return t&&i?[{field:e,label:t,input:i}]:[]}),p=t=>{for(let{field:i,label:o,input:s}of l){if(o.querySelector(".design-token-binding")||!n.contains(o))continue;let d=t(i,o,s,()=>{r&&(s.value=r(i,e));let t=o.querySelector('input[type="range"],input[type="color"]');t&&(t.value="color"===i.kind&&a?a(s.value):s.value)});d&&o.append(d)}},c=s?.tokens;if(!c)return void p((t,n,r,a)=>xe(e,t.property,e=>{i(t,r,e),a()},o));he(o);let u=function(e,t){let n,i=(Array.isArray(t?.themes)?t.themes:[]).find(e=>Array.isArray(e?.options)&&e.options.length>1&&e.options.length<4);if(i)return()=>n??=Promise.all(i.options.map(n=>M(e,{...N(t),[i.id]:n.id}).then(e=>({label:Re(n.label,n.id),values:new Map(e.map(e=>[e.path,e.value]))})))).catch(()=>[])}(c,s);return Promise.all([M(c,N(s)),L(c,e)]).then(([t,n])=>{p((i,o,r,a)=>we(c,e,i.property,t,n[i.property],e=>{d?.(e),a()},o,r,u))},()=>{})}function we(e,t,n,i,o,r,a,s,d){let l=function(e,t){return e.filter(e=>e.properties?.includes(t))}(i,n);if(!l.length&&!o)return null;let p=o&&"offToken"in o?o.offToken:void 0,c=void 0===p?void 0:j(l,p),u=document.createElement("span");u.className="design-token-binding";let f=document.createElement("span");f.className="design-token-chip",f.setAttribute("aria-hidden","true");let m=document.createElement("span");m.className="design-token-icon",m.setAttribute("aria-hidden","true");let g=document.createElement("button");g.type="button",g.className="design-token-detach",g.title="Edit the value",g.setAttribute("aria-label",`Edit ${n} value`),g.innerHTML='<svg viewBox="0 0 12 12"><path d="M5 3.5 6.5 2a2.1 2.1 0 0 1 3 3L8 6.5M7 8.5 5.5 10a2.1 2.1 0 0 1-3-3L4 5.5M2 2l8 8"/></svg>';let h=document.createElement("select");h.setAttribute("aria-label",`Style token for ${n}`),h.disabled=!l.length;let b=document.createElement("option");b.value="",b.textContent="Choose a token",h.append(b);let v=new Map([["",h]]);for(let e of l){let t=e.group??"",n=v.get(t);n||(n=document.createElement("optgroup"),n.label=t,v.set(t,n));let i=document.createElement("option");i.value=e.path,i.textContent=`${z(e)}${e.ref?` · ${e.ref}`:""}${e===c?" · same value":""}`,i.title=R(e),n.append(i)}for(let[e,t]of v)e&&h.append(t);let x=q();void 0!==p&&D(x,p,c);let k=document.createElement("small");k.className="design-token-binding__state",k.setAttribute("aria-live","polite");let y=!1,w=ve(a,u);be(h,()=>({tokens:i,property:n,current:y?void 0:H(t,n)?.path??(o&&"path"in o?o.path:void 0),themes:d,onPreview:i=>O(e,t,n,i),onSelect:$}));let E=()=>{let e=H(t,n),r=y?void 0:e?.path??(o&&"path"in o?o.path:void 0),s=r?i.find(e=>e.path===r):void 0;h.value=r&&l.some(e=>e.path===r)?r:"",f.textContent=s?z(s):r??"";let d=r?e?"token":"connected":"custom";u.dataset.mode=d,(a??u.parentElement)?.setAttribute("data-token-mode",d),x.hidden=void 0===p||!!e,k.textContent=s?`${e?"Preview":"Uses"} ${R(s)}`:r?`Uses ${r}`:x.hidden?"":x.title,h.title=k.textContent||"Choose a token",w.show(x.hidden||y?void 0:c,()=>c&&$(c))};function $(a){y=!1;let s=o??{offToken:getComputedStyle(t).getPropertyValue(n).trim()},d="path"in s?i.find(e=>e.path===s.path):void 0;r(function(e,t,n,i,o,r){let a=A.get(t);a||A.set(t,a=[]);let s=a.find(e=>e.property===n);return a.push({adapter:e,property:n,token:i,from:s?.from??o,fromToken:s?s.fromToken:r,undo:O(e,t,n,i)}),()=>V(t)}(e,t,n,a,s,d)),E()}return h.addEventListener("change",()=>{let e=l.find(e=>e.path===h.value);e?$(e):E()}),g.addEventListener("click",()=>{y=!0,E(),s?.focus()}),u.append(f,h,m,g,x,k),E(),u}var Ee=!1;function $e(e,t,n,i){let o=r(e);if(!o||!o.tokens.length)return null;he(i);let a=document.createElement("details");a.className="design-group design-theme-group",a.open=Ee,a.addEventListener("toggle",()=>{a.isConnected&&(Ee=a.open)});let s=document.createElement("summary");s.textContent="Shared theme";let d=document.createElement("small");d.className="design-react-source",d.textContent="Changes every element using these tokens",a.append(s,d);let l=new Map;for(let e of o.tokens){let t=e.path.split(".")[0];l.set(t,[...l.get(t)??[],e])}let p=o.tokens.length>6&&l.size>1;for(let[e,i]of p?l:new Map([["",o.tokens]])){if(e){let t=document.createElement("small");t.className="design-theme-heading",t.textContent=e,a.append(t)}for(let r of i)a.append(Ce(o,r,t,n,e))}return a}function Ce(e,t,n,i,o){let r=document.createElement("div");r.className="design-theme-token";let l=document.createElement("span");l.textContent=o&&t.path.slice(o.length+1)||t.path,l.title=`${t.path} · ${s(e,t)} matching · ${t.impactSelector}`;let c=n.fields.find(e=>t.properties.includes(e.property)),u={property:t.cssVariable,label:`Shared theme value for ${t.path}`,kind:"dimension"===t.type?"size":c?.kind??"text",glyph:"color"===t.type?void 0:c?.glyph,values:c?.values},f=!1,m=n.fieldControl(u,{element:e.root,begin:()=>{f=!1},apply:(n,o,r)=>{let a=null!==r&&d(e,t,r.trim(),f);n.setAttribute("aria-invalid",String(!a)),a&&(f=!0,v(),i())},commit:(e,t,n)=>{!1!==n&&(f=!1,"true"===e.getAttribute("aria-invalid")&&b())}}),g=m.querySelector("[data-property]"),h=m.querySelector('input[type="color"]'),b=()=>{let i=a(e,t);g.value=i,h&&(h.value=n.toHex(i)),g.removeAttribute("aria-invalid"),v()},v=()=>{x.disabled=!r.toggleAttribute("data-changed",e.themeEdits.has(t.path)),"fontFamily"===t.type&&(g.title=g.value)},x=document.createElement("button");return x.type="button",x.className="design-theme-reset",x.title="Reset to page value",x.setAttribute("aria-label",`Reset ${t.path}`),x.innerHTML='<svg viewBox="0 0 16 16"><path d="M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5"/></svg>',x.addEventListener("click",()=>{p(e,t),b(),i()}),b(),r.append(l,m,x),r}function Ae(e,t,n){let i=r(e);i&&u(i,e,t,n)}function Se(e,t){let n=r(e);n&&f(n,e,t)}function Pe(e){let t=K.get(e),n=t?.at(-1),o=i(e);if(!n||!o)return;let r=t.find(e=>e.propName===n.propName).before;t.pop(),o.setProps({...o.props,[n.propName]:n.before});let a=W.get(e);a||W.set(e,a=new Map),Object.is(r,n.before)?(a.delete(n.propName),o.releaseProps?.([n.propName])):a.set(n.propName,r),a.size||W.delete(e)}function Ne(){for(let e of[...W.keys()])De(e);W.clear(),K.clear(),w(),function(){for(let e of[...A.keys()])B(e)}(),ze()}var Me,Le=new Map,Te=new WeakMap;function je(e){try{return String(e.current())}catch{return}}function ze(e){for(let[e,t]of Le)try{je(e)!==t&&e.apply(t)}catch{}Le.clear();let t=e?.querySelector(".design-theme-switch");t&&(Te.get(t)?.(),t.remove())}var Re=(e,t)=>e||t.charAt(0).toUpperCase()+t.slice(1);function qe(t,n,i,o){let r=t.closest(".design-inspector")?.querySelector(".design-inspector__heading"),a=(r??t).querySelector(".design-theme-switch"),s=a?.open??!1;a&&Te.get(a)?.(),a?.remove();let d=document.createElement("details");d.className="design-theme-switch";let l=document.createElement("summary");l.setAttribute("aria-label","Preview theme");let p=document.createElement("div");p.className="design-theme-popup",p.setAttribute("role","group"),p.setAttribute("aria-label","Theme preview options"),d.append(l,p);let c,u=[],f=n?.themes;for(let e of Array.isArray(f)?f:[]){let t=je(e),n=Array.isArray(e?.options)?e.options.filter(e=>"string"==typeof e?.id):[];if(void 0===t||n.length<2)continue;let o=Re(e.label,String(e.id));u.push(`${o}: ${Re(n.find(e=>e.id===t)?.label,t)}`);let r=n=>{let o=je(e);if(n!==o){Le.has(e)||Le.set(e,o??t),Me=e;try{e.apply(n)}catch{}i()}},a=document.createElement(n.length>3?"label":"div");a.className="design-field design-react-field";let s,d=document.createElement("span");if(d.textContent=o,n.length>3){let e=document.createElement("select");for(let t of n)e.append(new Option(Re(t.label,t.id),t.id));e.value=t,e.setAttribute("aria-label",`${o} theme`),e.addEventListener("change",()=>r(e.value)),s=e}else{s=document.createElement("div"),s.className="design-theme-options",s.setAttribute("role","group"),s.setAttribute("aria-label",`${o} theme`);for(let e of n){let n=document.createElement("button");n.type="button",n.textContent=Re(e.label,e.id),n.setAttribute("aria-pressed",String(e.id===t)),n.addEventListener("click",()=>r(e.id)),s.append(n)}}Me===e&&(c=s.querySelector("[aria-pressed=true]")??s),a.append(d,s),p.append(a)}if(Me=void 0,!p.childElementCount)return;l.textContent=u[0].split(": ").slice(1).join(": ")+(u.length>1?" +"+(u.length-1):""),l.title=`Preview theme · ${u.join(" · ")}`,d.open=s||!!c;let m=new AbortController,{signal:g}=m,h=()=>{d.open=!1};Te.set(d,()=>{h(),m.abort()}),d.addEventListener("keydown",e=>{"ArrowDown"===e.key&&e.target===l&&(e.preventDefault(),d.open=!0,p.querySelector("button,select")?.focus())}),d.addEventListener("focusout",e=>{e.relatedTarget instanceof Node&&!d.contains(e.relatedTarget)&&h()}),he(o),r?r.insertBefore(d,r.querySelector(".design-inspector__close")):t.prepend(d),d.getRootNode().addEventListener("pointerdown",e=>{e.composedPath().includes(d)||h()},{capture:!0,signal:g}),d.ownerDocument.defaultView?.addEventListener("keydown",e=>{!d.open||"Escape"!==e.key||!e.composedPath().includes(d)||(e.preventDefault(),e.stopImmediatePropagation(),h(),l.focus())},{capture:!0,signal:g}),e(l,()=>{h(),l.isConnected||m.abort()},g),c?.focus({preventScroll:!0})}function De(e){let t=W.get(e),n=i(e);!t?.size||!n||(n.setProps({...n.props,...Object.fromEntries(t)}),n.releaseProps?.([...t.keys()]),W.delete(e),K.delete(e))}function Oe(e,t,i,o,r,a){let s,d=t.definition.props.find(e=>e.name===i);if(!d||!n(d,o))return r.setAttribute("aria-invalid","true"),!1;r.removeAttribute("aria-invalid");try{let e=t.props;if(s=e[i],Object.is(s,o))return!0;t.setProps({...e,[i]:o})}catch{return r.setAttribute("aria-invalid","true"),r.title="Runtime preview is unavailable. The component kept its current props.",!1}let l=W.get(e);l||W.set(e,l=new Map);let p=l.has(i)?l.get(i):(K.get(e)?.find(e=>e.propName===i)??{before:s}).before;Object.is(p,o)?(l.delete(i),t.releaseProps?.([i])):l.set(i,p),l.size||W.delete(e);let c=K.get(e);return c||K.set(e,c=[]),c.push({propName:i,before:s,after:o}),a(()=>Pe(e)),!0}function He(n,a,s,d,l,p){let c=i(n);if(!c){let e,i=se(n,l);try{e=i&&l?.components?.editor?.(i)}catch{}if(e&&i&&C(i.element)){if(i.element!==n){he(s);let e=document.createElement("small");if(e.className="design-react-source design-react-group design-react-inside",e.append(`Inside ${i.name}`),d){let t=document.createElement("button");t.type="button",t.textContent="Select component",t.addEventListener("click",()=>d(i.element)),e.append(" · ",t)}return e}c=t(i,e)}if(!c){let e=null;try{e=i&&l?.components?.panel?.(i)||null}catch{}return e&&he(s),e??function(e,t,n){let i=o(e);if(!i)return null;he(n);let r=document.createElement("small");if(r.className="design-react-source design-react-group design-react-inside",r.append(`Inside ${i.component.definition.name}`),t){let e=document.createElement("button");e.type="button",e.textContent="Select component",e.addEventListener("click",()=>t(i.root)),r.append(" · ",e)}return r}(n,d,s)}}he(s);let u=document.createElement("details");u.className="design-group design-react-group",u.open=!0;let f=document.createElement("summary");f.textContent="Properties",u.append(f);let m=document.createElement("small");m.className="design-react-source",m.textContent=`${c.definition.name}${X(c)?` · ${X(c)}`:""}`,m.title=m.textContent,u.append(m);let g=document.createElement("small");g.className="design-react-source design-react-preview",g.textContent="Runtime preview · Undo or Reset to restore",u.append(g);let h=c;if(p&&c.subscribe){let t=0,n=new AbortController,i=c.subscribe(()=>{t||!u.isConnected||(t=requestAnimationFrame(()=>{if(t=0,!u.isConnected)return;let e=u.getRootNode(),n=e.activeElement;if(n?.closest(".design-inspector__heading"))return;let i=n instanceof HTMLInputElement&&u.contains(n)?n:void 0,o=n&&u.contains(n)?n.getAttribute("aria-label"):null,r=i?.value,a=i?.selectionStart,s=i?.selectionEnd;p(),queueMicrotask(()=>{if(!o)return;let t=[...e.querySelectorAll("[aria-label]")].find(e=>e.getAttribute("aria-label")===o);t&&(t.focus({preventScroll:!0}),t instanceof HTMLInputElement&&void 0!==r&&(t.value=r,null!=a&&t.setSelectionRange(a,s??a)))})}))}),o=()=>{i(),cancelAnimationFrame(t),n.abort()};queueMicrotask(()=>{u.isConnected?e(u,o,n.signal):o()})}for(let e of c.definition.props.filter(e=>"unsupported"!==e.kind)){let t=e.styleProperty,i=document.createElement("label");i.className="design-field design-react-field";let o=document.createElement("span");o.textContent=e.name;let s,d=c.props[e.name];if("enum"===e.kind){let t=document.createElement("select");for(let n of e.values??[]){let e=document.createElement("option");e.value=String(n),e.textContent=String(n),t.append(e)}if(void 0===d&&!e.required){let e=document.createElement("option");e.value="",e.textContent="unset",t.prepend(e)}t.value=void 0===d?"":String(d),s=t}else{let t=document.createElement("input");"boolean"===e.kind?(t.type="checkbox",t.checked=!0===d,t.indeterminate=void 0===d):"number"===e.kind?(t.type="number",t.step="any",t.value="number"==typeof d?String(d):""):(t.type="text",t.maxLength=500,t.autocomplete="off",t.value="string"==typeof d?d:""),s=t}if(s.setAttribute("aria-label",`${c.definition.name} ${e.name}`),"unsupported"===e.kind)s=document.createElement("input"),s.disabled=!0,s.value=`Read only · ${e.typeLabel}`,s.setAttribute("aria-label",`${c.definition.name} ${e.name}, read only`),i.title=`Inline feedback does not edit ${e.typeLabel} props.`;else{let t=()=>{let t=s instanceof HTMLInputElement&&"checkbox"===s.type?s.checked:s.value,i=t;if("number"===e.kind)i=""===String(t).trim()?void 0:Number(t);else if("enum"===e.kind){let n=(e.values??[]).find(e=>String(e)===t);i=""!==t||e.required?n:void 0}else"boolean"===e.kind&&(i=!0===t);Oe(n,h,e.name,i,s,a)};s.addEventListener("change",t)}o.title=e.name,i.append(o,s);let l=document.createElement("div");l.className="design-react-row";let p=document.createElement("button");p.type="button",p.className="design-theme-reset",p.setAttribute("aria-label",`Reset ${c.definition.name} ${e.name}`),p.title="Restore the value before editing",p.innerHTML='<svg viewBox="0 0 16 16"><path d="M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5"/></svg>';let f=()=>{p.hidden=!W.get(n)?.has(e.name)};s.addEventListener("change",f),p.addEventListener("click",()=>{let t=W.get(n);if(!t?.has(e.name))return;Oe(n,h,e.name,t.get(e.name),s,a);let i=h.props[e.name];s instanceof HTMLInputElement&&"checkbox"===s.type?s.checked=!0===i:s.value=void 0===i?"":String(i),f(),s.focus()}),f(),l.append(i,p);let m=document.createElement("small");if(m.className="design-react-type",m.textContent=`${e.typeLabel}${e.required?" · required":" · optional"}`,i.append(m),i.title||=m.textContent,"string"===e.kind&&t){let o=r(n),d=o?b(o,t):[];if(d.length){let o=document.createElement("span");o.className="design-token-binding";let r=document.createElement("span");r.textContent="Style token";let l=document.createElement("select");l.setAttribute("aria-label",`Style token for ${e.name}`);let p=document.createElement("option");p.value="custom",p.textContent="Custom value",l.append(p);for(let e of d){let t=document.createElement("option");t.value=e.path,t.textContent=e.path,l.append(t)}let u=()=>{let t=d.find(t=>c.props[e.name]===`var(${t.cssVariable})`);l.value=t?.path??"custom",o.dataset.mode=t?"token":"custom"};l.addEventListener("change",()=>{let i=d.find(e=>e.path===l.value),o=i?`var(${i.cssVariable})`:"string"==typeof c.props[e.name]&&String(c.props[e.name]).startsWith("var(")?n.ownerDocument.defaultView?.getComputedStyle(n).getPropertyValue(t).trim()??"":"string"==typeof c.props[e.name]?c.props[e.name]:"";Oe(n,c,e.name,o,s,a)&&u()}),o.append(r,l),i.append(o),u()}}u.append(l)}return u}export{ye as attachStyleTokenControls,qe as attachThemeSwitcher,te as beginReactTextEdit,ue as canUndoDesignTokenEdit,re as canUndoReactProp,oe as cancelReactTextEdit,we as createAdapterTokenControl,$e as createDesignThemePanel,xe as createElementTokenControl,He as createReactPropsPanel,le as designContext,ie as finishReactTextEdit,fe as hasDesignTokenEdit,ee as hasReactPropChanges,ce as installCommentCapture,Ae as noteDesignTokenOverride,ne as previewReactTextEdit,pe as proposedDesignChanges,ae as proposedReactChanges,ge as resetDesignTokenEdits,Ne as resetPreviews,De as resetReactProps,ze as restoreThemes,Z as showDesignBefore,Se as syncDesignTokenBinding,ke as tokenBoundProperties,me as undoDesignTokenEdit,Pe as undoReactProp};

package/dist/react-props-panel.d.ts

@@ -1,4 +1,4 @@
-import type { DesignTarget } from "./design-target.js";
+import { type DesignTarget } from "./design-target.js";
 import type { DesignSystem, DesignToken, TokenAdapter, TokenUsage } from "./design-system.js";
 import type { ThemeValues } from "./token-picker.js";
 /** Before/After for React prop previews and shared theme values. */
@@ -51,9 +51,9 @@ export declare function undoReactProp(element: DesignTarget): void;
 /** Undo every prop, token and theme preview, and put switched themes back, e.g. when Design mode closes. */
 export declare function resetPreviews(): void;
 /** Put every axis Design mode switched back to its original option. */
-export declare function restoreThemes(): void;
+export declare function restoreThemes(container?: HTMLElement): void;
 /**
- * One row per theme axis at the top of the panel: a segmented control for two or
+ * A compact header menu with one row per theme axis: a segmented control for two or
  * three options, a select for more. Theme is context, not an edit, so switching
  * isn't counted, undone, reset or flipped by Before/After; Design mode restores
  * each axis's original option when it closes. `onSwitch` re-renders the panel,
@@ -61,5 +61,5 @@ export declare function restoreThemes(): void;
  */
 export declare function attachThemeSwitcher(container: HTMLElement, design: DesignSystem | undefined, onSwitch: () => void, styleRoot?: ShadowRoot): void;
 export declare function resetReactProps(element: DesignTarget): void;
-export declare function createReactPropsPanel(element: DesignTarget, onEdit: () => void, styleRoot?: ShadowRoot, select?: (root: HTMLElement) => void, design?: DesignSystem): HTMLElement | null;
+export declare function createReactPropsPanel(element: DesignTarget, onEdit: (undo?: () => void) => void, styleRoot?: ShadowRoot, select?: (root: DesignTarget) => void, design?: DesignSystem, refresh?: () => void): HTMLElement | null;
 export {};

package/dist/react.js

@@ -1 +1 @@
-"use client";import{b as e,c as n,f as t,z as r}from"./chunk-K6ETEZER.js";import{b as o}from"./chunk-ZSDIMEPV.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-RPY7OOOR.js";import"./chunk-53M6AOAX.js";import"./chunk-WGISPOJV.js";import"./chunk-PLSWBSSX.js";import{useEffect as s,useRef as c}from"react";function u(e){let n=c(null);s(()=>{if(n.current&&function(e,n){return[...new Set([...Object.keys(e),...Object.keys(n)])].every(t=>{if("shortcuts"===t||"features"===t||"frame"===t){let r=e[t]??{},o=n[t]??{};return Object.keys({...r,...o}).every(e=>Object.is(r[e],o[e]))}if("design"===t){let t=e.design,r=n.design;if(!t||!r)return t===r;let o=t.themes??[],s=r.themes??[];return t.tokens===r.tokens&&t.components===r.components&&o.length===s.length&&o.every((e,n)=>e===s[n])}if("onboarding"!==t)return Object.is(e[t],n[t]);let r=e.onboarding,o=n.onboarding;return r&&o?Object.keys({...r,...o}).every(e=>"sites"===e?r.sites?.length===o.sites?.length&&(r.sites??[]).every((e,n)=>e===o.sites?.[n]):Object.is(r[e],o[e])):r===o})}(n.current.config,e)||(n.current?.controller.destroy(),n.current=null,!1===e.enabled))return;let t={...e,...e.onboarding?{onboarding:{...e.onboarding,...e.onboarding.sites?{sites:[...e.onboarding.sites]}:{}}}:{}};n.current={config:t,controller:o(t)}}),s(()=>()=>{n.current?.controller.destroy(),n.current=null},[])}function i(t){let r=c(null),o=c(null);return o.current||(o.current=e=>{r.current=e}),s(()=>{if(!0===t.enabled&&r.current)return e(r.current,t.component,t.props,t.onChange)},[t.enabled,t.component]),s(()=>{!0===t.enabled&&n(r.current,t.component,t.props,t.onChange)},[t.enabled,t.component,t.props,t.onChange]),{ref:o.current,"data-komo-inspectable":t.component.id}}function l(e){s(()=>{if(!0!==e.enabled)return;let n=e.root??document.documentElement;return t(n,e.tokens)},[e.root,e.tokens,e.enabled])}export{r as cssVariableTokens,u as useKomo,l as useKomoDesignTokens,i as useKomoInspectable};
+"use client";import{A as e,c as n,d as t,g as r}from"./chunk-HTMUFH7I.js";import{b as o}from"./chunk-F57BOPTZ.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-RPY7OOOR.js";import"./chunk-53M6AOAX.js";import"./chunk-WGISPOJV.js";import"./chunk-PLSWBSSX.js";import{useEffect as s,useRef as c}from"react";function u(e){let n=c(null);s(()=>{if(n.current&&function(e,n){return[...new Set([...Object.keys(e),...Object.keys(n)])].every(t=>{if("shortcuts"===t||"features"===t||"frame"===t){let r=e[t]??{},o=n[t]??{};return Object.keys({...r,...o}).every(e=>Object.is(r[e],o[e]))}if("design"===t){let t=e.design,r=n.design;if(!t||!r)return t===r;let o=t.themes??[],s=r.themes??[];return t.tokens===r.tokens&&t.components===r.components&&o.length===s.length&&o.every((e,n)=>e===s[n])}if("onboarding"!==t)return Object.is(e[t],n[t]);let r=e.onboarding,o=n.onboarding;return r&&o?Object.keys({...r,...o}).every(e=>"sites"===e?r.sites?.length===o.sites?.length&&(r.sites??[]).every((e,n)=>e===o.sites?.[n]):Object.is(r[e],o[e])):r===o})}(n.current.config,e)||(n.current?.controller.destroy(),n.current=null,!1===e.enabled))return;let t={...e,...e.onboarding?{onboarding:{...e.onboarding,...e.onboarding.sites?{sites:[...e.onboarding.sites]}:{}}}:{}};n.current={config:t,controller:o(t)}}),s(()=>()=>{n.current?.controller.destroy(),n.current=null},[])}function i(e){let r=c(null),o=c(null);return o.current||(o.current=e=>{r.current=e}),s(()=>{if(!0===e.enabled&&r.current)return n(r.current,e.component,e.props,e.onChange)},[e.enabled,e.component]),s(()=>{!0===e.enabled&&t(r.current,e.component,e.props,e.onChange)},[e.enabled,e.component,e.props,e.onChange]),{ref:o.current,"data-komo-inspectable":e.component.id}}function l(e){s(()=>{if(!0!==e.enabled)return;let n=e.root??document.documentElement;return r(n,e.tokens)},[e.root,e.tokens,e.enabled])}export{e as cssVariableTokens,u as useKomo,l as useKomoDesignTokens,i as useKomoInspectable};