@hazem3500/komo 0.9.24 → 0.9.26

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

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

package/dist/design-mode.d.ts

@@ -13,12 +13,25 @@ export interface DesignModeOptions {
     flip?(): void;
     /** The app's design-system adapters; `tokens` replaces CSS-variable token chips. */
     design?: DesignSystem;
+    page?(): string;
+    bounds?(element: Element): {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    } | undefined;
 }
 export declare function createDesignMode(options: DesignModeOptions): {
     setActive: (value: boolean) => void;
+    select: (element: Element | null) => void;
+    clearSelection: () => void;
+    setReturnAction(action: {
+        label: string;
+        run(): void;
+    } | null): void;
     mountPanel(parent: HTMLElement): void;
     readonly active: boolean;
     /** Resolves once the property controls have loaded. */
-    ready: Promise<void>;
+    ready: Promise<[void, void]>;
     destroy(): void;
 };

package/dist/design-mode.js

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

package/dist/design-panel-3SQFWOPU.js

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

package/dist/design-panel.d.ts

@@ -1,3 +1,4 @@
+import type { DesignTarget } from "./design-target.js";
 import { designPanelStyles } from "./design-panel-styles.js";
 /** The property controls load as their own chunk, so the Design mode entry stays small. */
 export { designPanelStyles };
@@ -15,7 +16,7 @@ export type Field = {
     placeholder?: string;
 };
 export interface PanelContext {
-    element: HTMLElement;
+    element: DesignTarget;
     changed?: ReadonlyMap<string, string>;
     collapsed: Set<string>;
     editText: HTMLButtonElement;
@@ -26,7 +27,7 @@ export interface PanelContext {
 }
 export declare const fields: Field[];
 export declare function toHex(value: string): string;
-export declare function valueFor(field: Field, element: HTMLElement): string;
+export declare function valueFor(field: Field, element: DesignTarget): string;
 /** Shared by every section, including the shared theme tokens. */
 export declare function fieldControl(field: Field, context: Pick<PanelContext, "element" | "begin" | "apply" | "commit">): HTMLDivElement;
 /** Render only the sections that apply to the element; empty Fill and Border offer a quiet add. */

package/dist/design-popup.d.ts

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

package/dist/design-target.d.ts

@@ -0,0 +1,4 @@
+export type DesignTarget = HTMLElement | SVGElement;
+export declare function isDesignTarget(element: Element | null): element is DesignTarget;
+/** Icons pick as a whole unless the reviewer explicitly drills into a shape. */
+export declare function pickDesignTarget(element: Element | null, precise?: boolean): DesignTarget | null;

package/dist/design-tokens.d.ts

@@ -1,3 +1,4 @@
+import { type DesignTarget } from "./design-target.js";
 import type { TokenAdapter } from "./design-system.js";
 /** Explicit bridge from a site's named CSS custom properties into Design mode. */
 export type KomoDesignTokenType = "color" | "dimension" | "fontFamily" | "fontWeight" | "lineHeight";
@@ -21,11 +22,11 @@ export interface RegisteredDesignTokenSource {
         after: string;
         inlineBefore: string;
     }>;
-    elementOriginals: Map<HTMLElement, Map<string, {
+    elementOriginals: Map<DesignTarget, Map<string, {
         value: string;
         priority: string;
     }>>;
-    elementBindings: Map<HTMLElement, Map<string, ElementTokenBinding>>;
+    elementBindings: Map<DesignTarget, Map<string, ElementTokenBinding>>;
     previousMarker: string | null;
 }
 export interface ElementTokenBinding {
@@ -55,30 +56,30 @@ export declare function previewThemeToken(source: RegisteredDesignTokenSource, t
 export declare function showThemeBefore(on: boolean): void;
 /** Return one shared token to the page's value; like Reset, it leaves no undo step. */
 export declare function resetThemeToken(source: RegisteredDesignTokenSource, token: KomoDesignToken): void;
-export declare function applyTokenToElement(source: RegisteredDesignTokenSource, element: HTMLElement, token: KomoDesignToken, property: string, options?: {
+export declare function applyTokenToElement(source: RegisteredDesignTokenSource, element: DesignTarget, token: KomoDesignToken, property: string, options?: {
     recordHistory?: boolean;
 }): boolean;
 /** Keep the token reference as provenance when the user types a custom override. */
-export declare function noteElementTokenOverride(source: RegisteredDesignTokenSource, element: HTMLElement, property: string, value: string): void;
+export declare function noteElementTokenOverride(source: RegisteredDesignTokenSource, element: DesignTarget, property: string, value: string): void;
 /** Reconcile token provenance after the style editor's undo restores a declaration. */
-export declare function syncElementTokenBinding(source: RegisteredDesignTokenSource, element: HTMLElement, property: string): void;
-export declare function elementTokenBindingFor(source: RegisteredDesignTokenSource, element: HTMLElement, property: string): ElementTokenBinding | null;
+export declare function syncElementTokenBinding(source: RegisteredDesignTokenSource, element: DesignTarget, property: string): void;
+export declare function elementTokenBindingFor(source: RegisteredDesignTokenSource, element: DesignTarget, property: string): ElementTokenBinding | null;
 /**
  * Report the token a property is connected to only when the winning declared
  * value references it. Equal computed values are never treated as a token.
  * Cross-origin sheets are skipped; cascade layers and scoping are not ranked.
  */
-export declare function declaredTokenFor(source: RegisteredDesignTokenSource, element: HTMLElement, property: string, inline?: string, inlinePriority?: string): DeclaredTokenReference | null;
+export declare function declaredTokenFor(source: RegisteredDesignTokenSource, element: DesignTarget, property: string, inline?: string, inlinePriority?: string): DeclaredTokenReference | null;
 /** Drop Komo's element preview for one property and return to the page's own value. */
-export declare function restoreElementProperty(source: RegisteredDesignTokenSource, element: HTMLElement, property: string): void;
+export declare function restoreElementProperty(source: RegisteredDesignTokenSource, element: DesignTarget, property: string): void;
 export declare function compatibleTokens(source: RegisteredDesignTokenSource, property: string): KomoDesignToken[];
-export declare function hasDesignTokenChanges(element: HTMLElement): boolean;
-export declare function canUndoDesignToken(element: HTMLElement | null): boolean;
-export declare function undoDesignToken(element: HTMLElement): void;
-export declare function resetDesignTokens(element: HTMLElement): void;
+export declare function hasDesignTokenChanges(element: DesignTarget): boolean;
+export declare function canUndoDesignToken(element: DesignTarget | null): boolean;
+export declare function undoDesignToken(element: DesignTarget): void;
+export declare function resetDesignTokens(element: DesignTarget): void;
 /** Restore every element and shared theme value, e.g. when Design mode closes. */
 export declare function resetAllDesignTokens(): void;
-export declare function proposedDesignTokenChanges(element: HTMLElement): string | undefined;
+export declare function proposedDesignTokenChanges(element: DesignTarget): string | undefined;
 /**
  * The built-in token adapter: CSS custom properties registered with
  * `useKomoDesignTokens`. Design mode uses it when `design.tokens` is not set.

package/dist/index.js

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

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

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