@hazem3500/komo 0.0.0-stage → 0.8.0

package/dist/design-panel-BPVXFERR.js

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

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

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

package/dist/design-panel.d.ts

@@ -0,0 +1,33 @@
+import { designPanelStyles } from "./design-panel-styles.js";
+/** The property controls load as their own chunk, so the Design mode entry stays small. */
+export { designPanelStyles };
+export type Control = HTMLInputElement | HTMLSelectElement;
+export type Field = {
+    property: string;
+    label: string;
+    kind: "color" | "length" | "size" | "select" | "text";
+    /** Short letter or icon path; numeric fields scrub when it is dragged. */
+    glyph?: string;
+    wide?: boolean;
+    values?: string[];
+    min?: number;
+    max?: number;
+    placeholder?: string;
+};
+export interface PanelContext {
+    element: HTMLElement;
+    changed?: ReadonlyMap<string, string>;
+    collapsed: Set<string>;
+    editText: HTMLButtonElement;
+    begin(control: Control, property: string): void;
+    apply(control: Control, property: string, value: string | null): void;
+    commit(control: Control, property: string, final?: boolean): void;
+    rerender(): void;
+}
+export declare const fields: Field[];
+export declare function toHex(value: string): string;
+export declare function valueFor(field: Field, element: HTMLElement): 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. */
+export declare function renderPanel(container: HTMLElement, context: PanelContext): void;

package/dist/design-tokens.d.ts

@@ -0,0 +1,76 @@
+/** Explicit bridge from a site's named CSS custom properties into Design mode. */
+export type KomoDesignTokenType = "color" | "dimension" | "fontFamily" | "fontWeight" | "lineHeight";
+export interface KomoDesignToken {
+    /** Stable DTCG-style token path, e.g. "color.brand.primary". */
+    path: string;
+    /** Existing CSS custom property that supplies this token. */
+    cssVariable: string;
+    /** DTCG scalar type; composite types remain unsupported. */
+    type: KomoDesignTokenType;
+    /** Explicit CSS properties that may use this token on the selected element. */
+    properties: string[];
+    /** Explicit scope used only to estimate global theme impact. */
+    impactSelector: string;
+}
+export interface RegisteredDesignTokenSource {
+    root: HTMLElement;
+    tokens: KomoDesignToken[];
+    themeEdits: Map<string, {
+        before: string;
+        after: string;
+        inlineBefore: string;
+    }>;
+    elementOriginals: Map<HTMLElement, Map<string, {
+        value: string;
+        priority: string;
+    }>>;
+    elementBindings: Map<HTMLElement, Map<string, ElementTokenBinding>>;
+    previousMarker: string | null;
+}
+export interface ElementTokenBinding {
+    tokenPath: string;
+    initialValue: string;
+    initialPriority: string;
+    mode: "token" | "custom";
+    customValue?: string;
+    /** Token the element used before Komo changed it, from its inline style or stylesheet. */
+    declaredPath?: string;
+}
+/** A token reference the page itself declares for one element property. */
+export interface DeclaredTokenReference {
+    token: KomoDesignToken;
+    origin: "inline" | "stylesheet";
+}
+export declare function registerDesignTokenSource(root: HTMLElement, tokens: readonly KomoDesignToken[]): () => void;
+export declare function tokenSourceFor(target: Element | null): RegisteredDesignTokenSource | null;
+export declare function tokenValue(source: RegisteredDesignTokenSource, token: KomoDesignToken): string;
+export declare function tokenImpactCount(source: RegisteredDesignTokenSource, token: KomoDesignToken): number;
+/**
+ * Preview a shared theme value. With `merge`, a live edit (typing, scrubbing, picking)
+ * extends the last undo step for the same token instead of adding one per keystroke.
+ */
+export declare function previewThemeToken(source: RegisteredDesignTokenSource, token: KomoDesignToken, value: string, merge?: boolean): boolean;
+/** 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?: {
+    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;
+/** 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;
+/**
+ * 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;
+/** 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 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 proposedDesignTokenChanges(element: HTMLElement): string | undefined;

package/dist/dom.d.ts

@@ -0,0 +1,10 @@
+import type { Identity } from "./types.js";
+import { iconMarkup as icons } from "./icon-markup.js";
+export { icons };
+export declare function el<K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, text?: string): HTMLElementTagNameMap[K];
+export declare function icon(name: keyof typeof icons): SVGSVGElement;
+export declare function button(label: string, action: () => void, className?: string, glyph?: keyof typeof icons): HTMLButtonElement;
+export declare const initials: (name: string) => string;
+export declare function age(time: number): string;
+export declare function avatar(user: Identity): HTMLSpanElement;
+export declare function googleLogo(): HTMLImageElement;

package/dist/drawer-expand-motion.d.ts

@@ -0,0 +1,46 @@
+/** Motion shared by the drawer menu expand and the drawer → edge sidebar hand-off. */
+export declare const drawerExpandSpring: {
+    readonly type: "spring";
+    readonly duration: 0.4;
+    readonly bounce: 0.24;
+};
+export declare const drawerExpandCompress: {
+    readonly duration: 0.1;
+    readonly ease: readonly [0.4, 0, 0.2, 1];
+};
+export declare const drawerCollapse: {
+    readonly duration: 0.25;
+    readonly ease: readonly [0.22, 1, 0.36, 1];
+};
+export declare const drawerBarExit: {
+    readonly duration: 0.15;
+};
+export declare const drawerBarEnter: {
+    readonly duration: 0.22;
+    readonly delay: 0.08;
+    readonly ease: "easeOut";
+};
+export declare const drawerRowEnter: {
+    readonly type: "spring";
+    readonly duration: 0.4;
+    readonly bounce: 0.3;
+};
+export declare const drawerRowExit: {
+    readonly type: "spring";
+    readonly duration: 0.12;
+    readonly bounce: 0.3;
+};
+export declare const drawerRowEnterDelay = 0.2;
+export declare const drawerRowStagger = 0.02;
+/** Same squish the drawer shell uses before it springs open. */
+export declare function compressedDrawerSize(barWidth: number, barHeight: number): {
+    width: number;
+    height: number;
+};
+/** Bottom-center anchor, matching `.morphing-menu__shell`. */
+export declare function boxFromAnchor(anchorX: number, anchorBottom: number, width: number, height: number): {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};

package/dist/drawer-presence.d.ts

@@ -0,0 +1,4 @@
+export declare function drawerPresence(toolbar: HTMLElement, keepOpen: () => boolean, signal: AbortSignal, autoHide?: boolean): {
+    show(): void;
+    update(): void;
+};

package/dist/edge-sidebar.d.ts

@@ -0,0 +1,39 @@
+import { type Placement } from "./floating-drag.js";
+export declare const EDGE_SIDEBAR_WIDTH = 380;
+export declare const EDGE_MARGIN = 16;
+/** How many pixels of the closed sidebar stay visible while peeking. */
+export declare const EDGE_PEEK_SLIVER = 76;
+/** Clearance the closed sidebar parks beyond the viewport edge. */
+export declare const EDGE_PARK_CLEARANCE = 24;
+/** Panel height cap; a taller viewport still parks flush against the edge. */
+export declare const EDGE_SIDEBAR_MAX_HEIGHT = 680;
+export declare const EDGE_SIDEBAR_MIN_WIDTH = 240;
+export declare const EDGE_SIDEBAR_MIN_HEIGHT = 200;
+export type EdgeResizeDir = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
+export interface EdgeBox {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/** Resize from an edge or corner. Same screen-space math as panels. */
+export declare function resizeEdgeBox(dir: EdgeResizeDir, start: EdgeBox, dx: number, dy: number, vw: number, vh: number): EdgeBox;
+export type EdgeSide = "left" | "right";
+export interface EdgeSidebarGeometry {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    side: EdgeSide;
+}
+/** The sidebar's on-screen placement, docked to the right by default. */
+export declare function edgeSidebarPlacement(placement: Placement | undefined, width: number, height: number, vw: number, vh: number): EdgeSidebarGeometry;
+/**
+ * Horizontal translates (style px) that park the sidebar off its docked edge
+ * and reveal it as a peek sliver. Applied on top of the placed position, so a
+ * dragged placement keeps its park direction consistent with its dock.
+ */
+export declare function edgeSidebarOffsets(g: EdgeSidebarGeometry, vw: number): {
+    parked: number;
+    peek: number;
+};

package/dist/emoji-history.d.ts

@@ -0,0 +1,8 @@
+export declare const DEFAULT_EMOJI: string[];
+export type EmojiHistory = {
+    counts: Record<string, number>;
+    recent?: string;
+};
+export declare function rankedEmoji(history: EmojiHistory, selected?: string): string[];
+export declare function emojiHistory(key: string): EmojiHistory;
+export declare function recordEmoji(key: string, emoji: string): void;

package/dist/emoji.d.ts

@@ -0,0 +1 @@
+export declare function isEmoji(value: unknown): value is string;

package/dist/floating-drag.d.ts

@@ -0,0 +1,9 @@
+export interface Placement {
+    x: number;
+    y: number;
+    edgeX?: "left" | "right";
+    edgeY?: "top" | "bottom";
+}
+export declare function constrain(p: Placement, width: number, height: number, vw: number, vh: number): Placement;
+export declare function settle(p: Placement, width: number, height: number, vw: number, vh: number): Placement;
+export declare function floatingDrag(element: HTMLElement, handle: HTMLElement, save: (p: Placement) => void, signal: AbortSignal, beforeDrag?: () => void, onSettled?: () => void, enabled?: () => boolean, allowInteractiveStart?: (target: Element) => boolean): void;

package/dist/icon-markup.d.ts

@@ -0,0 +1,4 @@
+import { type ComponentType, type SVGProps } from "react";
+export type IconName = "chevron" | "drawer" | "edit" | "trash" | "info" | "more" | "person" | "search" | "plus" | "comment" | "copy" | "pointer" | "expand" | "close" | "check" | "arrow" | "link" | "code" | "smile" | "tag" | "design";
+export declare const components: Record<IconName, ComponentType<SVGProps<SVGSVGElement>>>;
+export declare const iconMarkup: Record<IconName, string>;

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { type KomoConfig } from "./config.js";
+export type { KomoConfig } from "./config.js";
+import type { CommentsController, CommentsOptions } from "./types.js";
+export type * from "./types.js";
+/** Initialize from inline public project settings. */
+export declare function initKomo(config: KomoConfig): CommentsController;
+/** Mount once on the client. The returned destroy() restores the host page. */
+export declare function initComments(options: CommentsOptions): CommentsController;

package/dist/index.js

@@ -0,0 +1 @@
+import{b as o,c as s}from"./chunk-ZUNTYWJF.js";import"./chunk-RPKLGTEU.js";import"./chunk-Y2GRLW4Q.js";import"./chunk-7YUXYVQA.js";import"./chunk-E5X4IQJ2.js";import"./chunk-I7AUKTXE.js";export{s as initComments,o as initKomo};

package/dist/inline-text-editor-F7B6FQQ3.js

@@ -0,0 +1 @@
+import"./chunk-I7AUKTXE.js";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=[];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 i=e.get(r);void 0!==i&&n(r,i,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))},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 i(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 i();if(!l||!e.active()||r||n)return;let s=o(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-XSMDR2CY.js"),onFinish(n,a){a||n.reactProp||n.before===n.after?n.reactProp&&(e.status.textContent="React state preview · resets on refresh"):(t.record(n),e.onCommit(l),e.status.textContent="Text preview · resets on refresh")}});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 i=document.getSelection();i?.removeAllRanges(),i?.addRange(r)}(l,a.clientX,a.clientY),e.status.textContent=l.hasAttribute("data-komo-text-prop")?"React state preview · resets on refresh":"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:i,handleKey(e){if(!n||!e.composedPath().includes(n.element)||!n.handleKey(e))return!1;let t=n.element;return i("Escape"===e.key),t.blur(),!0},hasChanges:e=>void 0!==t.original(e),undo(){let n=t.undo();return e.onChange(),n},reset(n){t.reset(n),e.onChange()},reconcile(n,a){t.reconcile(n,a),e.onChange()},proposal:e=>t.proposal(e),restoreAll(){t.restoreAll()}}}function i(e){let t=r(e);return e.button.addEventListener("click",e=>{t.toggle(e)}),t}function o(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!o(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 i=null,o=null;if(a.dataset.komoTextProp&&(i=await r.loadReactBridge(),o=i.beginReactTextEdit(a),!o))return null;let d=o?.before??(a.textContent??"").slice(0,500),u=!o&&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)),o&&i&&(v=s(a),i.previewReactTextEdit(a,o.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 i=t.endOffset-t.startOffset,o=n.replace(/[\r\n]+/g," ").slice(0,Math.max(0,500-(a.textContent??"").length+i));r.replaceData(t.startOffset,i,o);let l=document.createRange();l.setStart(r,t.startOffset+o.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}),o&&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 R=document.getSelection(),y=document.createRange();return y.selectNodeContents(a),y.collapse(!1),R?.removeAllRanges(),R?.addRange(y),{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?(o&&i&&i.cancelReactTextEdit(a,o.propName,d),n(a,d,g)):o&&i&&i.finishReactTextEdit(a,o.propName,d,t),r.onFinish({element:a,before:d,after:t,nodes:g,...o?{reactProp:o.propName}:{}},e)},handleKey:e=>!e.isComposing&&(("Enter"===e.key||"Escape"===e.key)&&(e.preventDefault(),e.stopImmediatePropagation(),!0))}}export{i as bindInlineTextTools,l as canEditText,r as createInlineTextTools,a as createTextPreviewHistory,d as startInlineTextEditor,o as textEditBlocker};

package/dist/inline-text-editor.d.ts

@@ -0,0 +1,70 @@
+export interface ReactTextBridge {
+    beginReactTextEdit(element: HTMLElement): {
+        propName: string;
+        before: string;
+    } | null;
+    previewReactTextEdit(element: HTMLElement, propName: string, value: string): boolean;
+    finishReactTextEdit(element: HTMLElement, propName: string, before: string, after: string): void;
+    cancelReactTextEdit(element: HTMLElement, propName: string, before: string): void;
+}
+export interface InlineTextEditResult {
+    element: HTMLElement;
+    before: string;
+    after: string;
+    reactProp?: string;
+    /** Text node values before the edit, for elements with nested markup. */
+    nodes?: TextSnapshot;
+}
+export type TextSnapshot = Array<[Text, string]>;
+export interface InlineTextEditor {
+    readonly element: HTMLElement;
+    finish(cancel?: boolean): void;
+    handleKey(event: KeyboardEvent): boolean;
+}
+export interface InlineTextEditorOptions {
+    loadReactBridge(): Promise<ReactTextBridge>;
+    onFinish(result: InlineTextEditResult, cancel: boolean): void;
+}
+export interface InlineTextToolsOptions {
+    button: HTMLButtonElement;
+    status: HTMLElement;
+    selected(): HTMLElement | null;
+    active(): boolean;
+    onChange(): void;
+    onCommit(element: HTMLElement): void;
+}
+export interface InlineTextTools {
+    readonly element: HTMLElement | null;
+    readonly busy: boolean;
+    isEditing(element: HTMLElement | null): boolean;
+    /** Start or finish editing; a point inside the text places the caret there. */
+    toggle(point?: {
+        clientX: number;
+        clientY: number;
+    }): Promise<void>;
+    finish(cancel?: boolean): void;
+    handleKey(event: KeyboardEvent): boolean;
+    hasChanges(element: HTMLElement): boolean;
+    undo(): HTMLElement | null;
+    reset(element: HTMLElement): void;
+    reconcile(element: HTMLElement, text: string): void;
+    proposal(element: HTMLElement): string | undefined;
+    restoreAll(): void;
+}
+export interface TextPreviewHistory {
+    record(result: InlineTextEditResult): void;
+    remember(element: HTMLElement, before: string): void;
+    original(element: HTMLElement): string | undefined;
+    reconcile(element: HTMLElement, text: string): void;
+    reset(element: HTMLElement): void;
+    proposal(element: HTMLElement): string | undefined;
+    restoreAll(): void;
+    undo(): HTMLElement | null;
+}
+export declare function createTextPreviewHistory(): TextPreviewHistory;
+export declare function createInlineTextTools(options: InlineTextToolsOptions): InlineTextTools;
+export declare function bindInlineTextTools(options: InlineTextToolsOptions): InlineTextTools;
+/** Why an element's text can't be edited inline, or null when it can. */
+export declare function textEditBlocker(element: HTMLElement): string | null;
+export declare function canEditText(element: HTMLElement): boolean;
+export declare function startInlineTextEditor(element: HTMLElement, options: InlineTextEditorOptions): Promise<InlineTextEditor | null>;

package/dist/lazy-accent-picker.d.ts

@@ -0,0 +1,4 @@
+export declare function accentPicker(initial: string, onChange: (color: string) => void): {
+    element: HTMLDivElement;
+    destroy: () => void;
+};

package/dist/lazy-toolbar.d.ts

@@ -0,0 +1,19 @@
+import type { MenuItem, MorphingMenuProps } from "./MorphingMenu.js";
+import { type icons } from "./dom.js";
+import type { Identity } from "./types.js";
+export type ToolbarIcon = {
+    glyph: keyof typeof icons;
+} | {
+    user: Identity | null;
+};
+export type ToolbarItem = Omit<MenuItem, "icon" | "activeIcon" | "children"> & {
+    icon: ToolbarIcon;
+};
+export type ToolbarProps = Omit<MorphingMenuProps, "items"> & {
+    items: readonly ToolbarItem[];
+};
+/** Pins and the compact drawer work immediately; React's menu loads on intent. */
+export declare function createToolbar(element: HTMLElement, glyph: (id: string) => Node): {
+    render(next: ToolbarProps): void;
+    unmount(): void;
+};

package/dist/message-links.d.ts

@@ -0,0 +1,2 @@
+/** Append safe HTTP(S) links while leaving all unmatched text as text nodes. */
+export declare function appendMessageLinks(element: HTMLElement, text: string): void;

package/dist/morphing-menu-styles.d.ts

@@ -0,0 +1 @@
+export declare const morphingMenuStyles = "/* Self-contained: inherit the host's color-scheme and font; customize --mm-*.\n   The inverted surface matches the original menu in both light and dark mode. */\n.morphing-menu {\n  --mm-surface: light-dark(#0d0d0d, #fff);\n  --mm-ink: light-dark(rgb(255 255 255 / 90%), rgb(13 13 13 / 90%));\n  --mm-hover: light-dark(rgb(255 255 255 / 6%), rgb(0 0 0 / 4%));\n  --mm-button: 44px;\n  --mm-inset: 4px;\n  --mm-bar-height: calc(var(--mm-button) + 2 * var(--mm-inset));\n  --mm-bar-width: min(calc(var(--mm-count) * var(--mm-button) + 2 * var(--mm-inset)), calc(100vw - 32px));\n  --mm-panel-width: min(268px, calc(100vw - 32px));\n  --mm-panel-padding: 8px;\n  --mm-radius: calc(var(--mm-bar-height) / 2);\n  position: relative;\n  width: var(--mm-bar-width);\n  height: var(--mm-bar-height);\n  flex: none;\n  font-family: inherit;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.morphing-menu *, .morphing-menu *::before, .morphing-menu *::after { box-sizing: border-box; }\n\n.morphing-menu__shell {\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  translate: -50% 0;\n  width: var(--mm-bar-width);\n  height: var(--mm-bar-height);\n  border-radius: var(--mm-radius);\n  background: var(--mm-surface, #0d0d0d);\n  color: var(--mm-ink, #fff);\n  box-shadow:\n    inset 0 1px 1px light-dark(rgb(255 255 255 / 8%), rgb(255 255 255 / 40%)),\n    inset 0 -1px 2px light-dark(rgb(0 0 0 / 50%), rgb(0 0 0 / 20%)),\n    0 1px 2px rgb(0 0 0 / 12%);\n  overflow: hidden;\n  isolation: isolate;\n}\n\n.morphing-menu__bar {\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  translate: -50% 0;\n  display: flex;\n  align-items: center;\n  padding: var(--mm-inset);\n  width: var(--mm-bar-width);\n  height: var(--mm-bar-height);\n}\n\n.morphing-menu__shortcut, .morphing-menu__row {\n  appearance: none;\n  display: flex;\n  align-items: center;\n  flex: none;\n  border: 0;\n  margin: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 20px;\n  text-decoration: none;\n  cursor: pointer;\n  touch-action: manipulation;\n  scale: 1;\n  transition: background 150ms ease, scale 180ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.morphing-menu__shortcut {\n  justify-content: center;\n  width: 0;\n  flex: 1;\n  height: var(--mm-button);\n  padding: 0;\n  border-radius: 999px;\n}\n\n.morphing-menu__panel {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  translate: -50% 0;\n  width: var(--mm-panel-width);\n  padding: var(--mm-panel-padding);\n  max-height: calc(100dvh - 64px);\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n}\n\n.morphing-menu [aria-hidden=\"true\"] { pointer-events: none; }\n.morphing-menu__row {\n  gap: 8px;\n  width: 100%;\n  min-height: 40px;\n  padding: 10px 12px;\n  border-radius: calc(var(--mm-radius) - var(--mm-panel-padding));\n  text-align: left;\n}\n.morphing-menu__panel[aria-hidden=\"true\"] .morphing-menu__row { opacity: 0; }\n.morphing-menu__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.morphing-menu__icon { display: flex; flex: none; }\n.morphing-menu svg { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n.morphing-menu__chevron { margin-left: auto; opacity: 0.6; }\n.morphing-menu__shortcut:focus-visible, .morphing-menu__row:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }\n\n.morphing-menu__tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  translate: -50% 0;\n  padding: 6px 10px;\n  border-radius: 14px;\n  background: light-dark(#fff, #171717);\n  color: light-dark(#111, #fefefe);\n  box-shadow: 0 0 0 1px light-dark(rgb(0 0 0 / 6%), rgb(255 255 255 / 10%)), 0 1px 2px -1px rgb(0 0 0 / 6%), 0 2px 4px rgb(0 0 0 / 4%);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n@media (hover: hover) {\n  .morphing-menu__shortcut:hover, .morphing-menu__row:hover { background: var(--mm-hover); }\n}\n@media (pointer: coarse) {\n  .morphing-menu { --mm-button: 48px; --mm-bar-width: min(296px, calc(100vw - 32px)); --mm-panel-width: min(296px, calc(100vw - 32px)); --mm-panel-padding: 12px; }\n  .morphing-menu__row { min-height: 44px; padding-block: 12px; }\n}\n@media (prefers-reduced-motion: no-preference) {\n  .morphing-menu__shortcut:active, .morphing-menu__row:active { transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }\n  .morphing-menu__shortcut:active { scale: 0.95; }\n  .morphing-menu__row:active { scale: 0.96; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .morphing-menu__shortcut, .morphing-menu__row { transition: none; scale: 1; }\n}\n";