@hazem3500/komo 0.8.0 → 0.9.1

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

@@ -1 +0,0 @@
-import{a as e,d as t,f as n,g as i,h as o,i as a,j as r,k as d,l as s,m as l,n as p,o as c,p as u,q as g,r as f,s as m,t as h,u as b,v as k}from"./chunk-Z2ABBESO.js";import"./chunk-I7AUKTXE.js";var x=new Map,v=new WeakMap,y=new WeakSet,w=new WeakMap,E=".design-react-source{display:block;padding:0 0 8px;color:#77736f;font-size:10px;overflow-wrap:anywhere}.design-react-field.design-field{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 8px;height:auto;min-height:28px;margin-top:4px;background:none;box-shadow:none;color:#898680;font-size:11px}.design-react-field>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-react-field.design-field>:is(input,select){box-sizing:border-box;width:100%;min-width:0;height:28px;padding:0 8px;border:0;border-radius:6px;background:#ffffff0a;color:#f1efeb;font:inherit;font-size:11px}.design-react-field.design-field>:is(input,select):focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}.design-react-field input[type=checkbox]{justify-self:end;width:14px;height:14px;accent-color:#bda6ef}.design-react-field input:disabled{opacity:.55;cursor:not-allowed}.design-react-type{display:none}.design-react-field .design-token-binding{grid-column:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;margin-top:4px;color:#77736f;font-size:10px}.design-react-field .design-token-binding select{min-width:0;height:24px;border:0;border-radius:6px;background:#ffffff0a;color:#e9e6e1;padding:0 6px;font:inherit;font-size:10px}.design-react-field .design-token-binding[data-mode=token] select{background:#bda6ef24;color:#e6dcfb}.design-token-binding__state{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.design-field>.design-token-binding{display:contents}.design-field:has(>.design-token-binding)>input[data-property]{padding-right:28px}.design-token-icon,.design-token-detach,.design-field>.design-token-binding select{position:absolute;top:4px;right:4px;width:20px;height:20px;box-sizing:border-box;border-radius:5px}.design-token-icon{display:grid;place-items:center;color:#77736f;opacity:0;pointer-events:none;transition:opacity .12s}.design-token-icon::before{content:'';width:6px;height:6px;border:1.2px solid currentColor;border-radius:1.5px;rotate:45deg}.design-field:is(:hover,:focus-within) .design-token-icon{opacity:1}.design-field>.design-token-binding select{margin:0;padding:0;border:0;opacity:0;cursor:pointer;appearance:none}.design-field>.design-token-binding select:hover+.design-token-icon,.design-field:has(.design-token-binding select:hover) .design-token-icon{background:#ffffff14;color:#e9e6e1}.design-field:has(.design-token-binding select:focus-visible) :is(.design-token-icon,.design-token-chip){outline:2px solid #bda6ef;outline-offset:1px;opacity:1}.design-field[data-token-mode=override] .design-token-icon{opacity:1;color:#e7c27d}.design-token-chip,.design-token-detach{display:none}.design-field:is([data-token-mode=token],[data-token-mode=connected])>input[data-property]{visibility:hidden}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-chip{position:absolute;inset:4px 28px 4px var(--lead,4px);display:flex;align-items:center;gap:5px;padding:0 6px;border-radius:4px;background:#bda6ef1f;color:#e6dcfb;font-size:11px;white-space:nowrap;overflow:hidden;pointer-events:none}.design-token-chip::before{content:'';flex:none;width:5px;height:5px;border:1.2px solid #c8b5f4;border-radius:1px;rotate:45deg}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-binding select{left:var(--lead,4px);right:28px;width:auto}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-icon{display:none}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-detach{display:grid;place-items:center;color:#898680}.design-token-detach:hover{background:#ffffff14;color:#f1efeb}.design-token-detach svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}.design-theme-group .design-react-source{padding:0 0 6px}.design-theme-heading{display:block;padding:8px 0 2px;color:#77736f;font-size:10px;text-transform:capitalize}.design-theme-token{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) 20px;align-items:center;gap:6px;margin-top:4px}.design-theme-token>span{overflow:hidden;color:#898680;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.design-theme-token[data-changed]>span{color:#e6dcfb}.design-theme-token[data-changed]::before{content:'';position:absolute;top:calc(50% - 2px);left:-8px;width:4px;height:4px;border-radius:50%;background:#bda6ef}.design-theme-reset{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:5px;background:none;color:#77736f;cursor:pointer}.design-theme-reset:disabled{visibility:hidden}.design-theme-reset:hover{background:#ffffff14;color:#f1efeb}.design-theme-reset svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}";function C(e){return void 0===e?"unset":JSON.stringify(e)??"unset"}function $(e){return!!x.get(e)?.size}function S(e){let n=t(e),i=n?.definition.textProp,o=n?.definition.props.find(e=>e.name===i);if(!n||!i||"string"!==o?.kind)return null;let a=n.props[i];if("string"!=typeof a||a.length>500)return null;let r=x.get(e);return r||x.set(e,r=new Map),r.has(i)||r.set(i,a),{propName:i,before:a}}function P(n,i,o){let a=t(n),r=a?.definition.props.find(e=>e.name===i);return!(!a||a.definition.textProp!==i||"string"!==r?.kind||o.length>500||!e(r,o))&&(a.setProps({...a.props,[i]:o}),!0)}function N(e,t,n,i){if(n===i){let i=x.get(e);return void(i?.get(t)===n&&!(v.get(e)??[]).some(e=>e.propName===t)&&(i.delete(t),i.size||x.delete(e)))}let o=v.get(e);o||v.set(e,o=[]),o.push({propName:t,before:n,after:i})}function A(e,t,n){P(e,t,n);let i=x.get(e);i?.get(t)===n&&!(v.get(e)??[]).some(e=>e.propName===t)&&(i.delete(t),i.size||x.delete(e))}function z(e){return!!e&&!!v.get(e)?.length}function M(e){let i=x.get(e),o=t(e);if(!i?.size||!o)return;let a=n(e),r=[...i].map(([e,t])=>{let n=o.definition.props.find(t=>t.name===e)?.styleProperty,i=o.props[e],r=n&&"string"==typeof i?a?.tokens.find(e=>e.properties.includes(n)&&i===`var(${e.cssVariable})`):void 0;return`- ${e}: ${C(t)} → ${C(i)}${r?` [${r.path}]`:" [custom value]"}`});return["Proposed React prop changes (preview only)",`Component: ${o.definition.name}`,`Source: ${o.definition.source}:${o.definition.line}`,...r,"Preview values use the app's React state callback; Komo does not write source files."].join("\n")}function L(e){return[M(e),k(e)].filter(e=>!!e).join("\n\n")||void 0}function R(e,n,i){w.get(e)?.abort();let o=new AbortController;w.set(e,o),e.addEventListener("click",e=>{let o=n();if(!o)return;let a=k(o);!t(o)&&!a||(e.stopImmediatePropagation(),i(o,L(o)))},{capture:!0,signal:o.signal})}function T(e){return m(e)}function q(e){return f(e)}function D(e){h(e)}function j(e){b(e)}function V(e){if(!e||y.has(e))return;let t=document.createElement("style");t.textContent=E,e.append(t),y.add(e)}function O(e,t,o,a){let r=n(e);if(!r)return null;let l=g(r,t);if(!l.length)return null;V(a);let f=document.createElement("span");f.className="design-token-binding",f.setAttribute("data-mode","custom");let m=document.createElement("span");m.className="design-token-icon",m.setAttribute("aria-hidden","true");let h=document.createElement("span");h.className="design-token-chip",h.setAttribute("aria-hidden","true");let b=document.createElement("button");b.type="button",b.className="design-token-detach",b.title="Detach token",b.setAttribute("aria-label",`Detach token from ${t}`),b.innerHTML='<svg viewBox="0 0 12 12"><path d="M5 3.5 6.5 2a2.1 2.1 0 0 1 3 3L8 6.5M7 8.5 5.5 10a2.1 2.1 0 0 1-3-3L4 5.5M2 2l8 8"/></svg>';let k=document.createElement("select");k.setAttribute("aria-label",`Style token for ${t}`);let x=document.createElement("small");x.className="design-token-binding__state",x.setAttribute("aria-live","polite");let v=`komo-token-${t}-${Math.random().toString(36).slice(2,8)}`;x.id=v,k.setAttribute("aria-describedby",v);let y=document.createElement("option");y.value="custom",y.textContent="Custom value",k.append(y);for(let e of l){let t=document.createElement("option"),n=i(r,e);t.value=e.path,t.textContent=n?`${e.path} · ${n}`:e.path,k.append(t)}let w=()=>{let n=p(r,e,t),i=n?null:c(r,e,t),o="token"===n?.mode?l.find(e=>e.path===n.tokenPath):void 0,a=o??i?.token;k.value=a?.path??"custom",h.textContent=a?.path??"";let d=n?.declaredPath,s=o?"token":i?"connected":d?"override":"custom";f.dataset.mode=s,f.parentElement?.setAttribute("data-token-mode",s),x.textContent="token"===s?d&&d!==o?.path?`Rebound from ${d} · preview`:`Linked to ${o?.path} · preview`:"connected"===s?"Connected "+("inline"===i?.origin?"inline":"from stylesheet"):"override"===s?`Custom override · was ${d}`:"",k.title=x.textContent||"Choose a token"},E=new MutationObserver(w);E.observe(e,{attributes:!0,attributeFilter:["style"]});let C=new MutationObserver(()=>{f.isConnected||(E.disconnect(),C.disconnect())});return C.observe(f.ownerDocument,{childList:!0,subtree:!0}),k.addEventListener("change",()=>{let n=e.style.getPropertyValue(t),i=l.find(e=>e.path===k.value),a=p(r,e,t);if(i&&a&&i.path===a.declaredPath)u(r,e,t),o(n,e.style.getPropertyValue(t),i.path);else if(i)(i.path!==c(r,e,t)?.token.path||a)&&d(r,e,i,t,{recordHistory:!1})&&o(n,e.style.getPropertyValue(t),i.path);else{let i=f.parentElement?.querySelector("[data-property]")?.value??getComputedStyle(e).getPropertyValue(t).trim(),a=/^-?[\d.]+$/.test(i.trim())&&!/weight|line/.test(t)?`${i.trim()}px`:i;s(r,e,t,a),e.style.setProperty(t,a),o(n,a)}w()}),b.addEventListener("click",()=>{let e=l.find(e=>e.path===k.value),t=f.parentElement?.querySelector("input[data-property]"),n=e&&i(r,e);t&&n&&(t.value="number"===t.type?String(parseFloat(n)):n),k.value="custom",k.dispatchEvent(new Event("change")),f.parentElement?.querySelector("[data-property]")?.focus()}),f.append(h,k,m,b,x),queueMicrotask(w),w(),f}function B(e){let t=n(e);return new Set(t?.elementBindings.get(e)?.keys()??[])}function H(e,t,n,i,o,a,r){for(let d of t){let t=[...n.querySelectorAll("[data-field-property]")].find(e=>e.dataset.fieldProperty===d.property);if(!t||t.querySelector(".design-token-binding"))continue;let s=t.querySelector("[data-property]");if(!s)continue;let l=O(e,d.property,n=>{i(d,s,n),a&&(s.value=a(d,e));let o=t.querySelector('input[type="range"],input[type="color"]');o&&(o.value="color"===d.kind&&r?r(s.value):s.value)},o);l&&t.append(l)}}var W=!1;function _(e,t,i,o){let a=n(e);if(!a||!a.tokens.length)return null;V(o);let r=document.createElement("details");r.className="design-group design-theme-group",r.open=W,r.addEventListener("toggle",()=>{r.isConnected&&(W=r.open)});let d=document.createElement("summary");d.textContent="Shared theme";let s=document.createElement("small");s.className="design-react-source",s.textContent="Changes every element using these tokens",r.append(d,s);let l=new Map;for(let e of a.tokens){let t=e.path.split(".")[0];l.set(t,[...l.get(t)??[],e])}let p=a.tokens.length>6&&l.size>1;for(let[e,n]of p?l:new Map([["",a.tokens]])){if(e){let t=document.createElement("small");t.className="design-theme-heading",t.textContent=e,r.append(t)}for(let o of n)r.append(F(a,o,t,i,e))}return r}function F(e,t,n,d,s){let l=document.createElement("div");l.className="design-theme-token";let p=document.createElement("span");p.textContent=s&&t.path.slice(s.length+1)||t.path,p.title=`${t.path} · ${o(e,t)} matching · ${t.impactSelector}`;let c=n.fields.find(e=>t.properties.includes(e.property)),u={property:t.cssVariable,label:`Shared theme value for ${t.path}`,kind:"dimension"===t.type?"size":c?.kind??"text",glyph:"color"===t.type?void 0:c?.glyph,values:c?.values},g=!1,f=n.fieldControl(u,{element:e.root,begin:()=>{g=!1},apply:(n,i,o)=>{let r=null!==o&&a(e,t,o.trim(),g);n.setAttribute("aria-invalid",String(!r)),r&&(g=!0,k(),d())},commit:(e,t,n)=>{!1!==n&&(g=!1,"true"===e.getAttribute("aria-invalid")&&b())}}),m=f.querySelector("[data-property]"),h=f.querySelector('input[type="color"]'),b=()=>{let o=i(e,t);m.value=o,h&&(h.value=n.toHex(o)),m.removeAttribute("aria-invalid"),k()},k=()=>{x.disabled=!l.toggleAttribute("data-changed",e.themeEdits.has(t.path)),"fontFamily"===t.type&&(m.title=m.value)},x=document.createElement("button");return x.type="button",x.className="design-theme-reset",x.title="Reset to page value",x.setAttribute("aria-label",`Reset ${t.path}`),x.innerHTML='<svg viewBox="0 0 16 16"><path d="M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5"/></svg>',x.addEventListener("click",()=>{r(e,t),b(),d()}),b(),l.append(p,f,x),l}function I(e,t,i){let o=n(e);o&&s(o,e,t,i)}function K(e,t){let i=n(e);i&&l(i,e,t)}function U(e){let n=v.get(e)?.pop(),i=t(e);if(!n||!i)return;i.setProps({...i.props,[n.propName]:n.before});let o=x.get(e);if(o){let t=o.get(n.propName);Object.is(t,n.before)&&o.delete(n.propName),o.size||x.delete(e)}}function J(e){let n=x.get(e),i=t(e);!n?.size||!i||(i.setProps({...i.props,...Object.fromEntries(n)}),x.delete(e),v.delete(e))}function X(t,n,i,o,a,r){let d=n.definition.props.find(e=>e.name===i);if(!d||!e(d,o))return a.setAttribute("aria-invalid","true"),!1;a.removeAttribute("aria-invalid");let s=n.props[i];if(Object.is(s,o))return!0;let l=x.get(t);l||x.set(t,l=new Map);let p=l.has(i)?l.get(i):s;Object.is(p,o)?l.delete(i):l.set(i,p),l.size||x.delete(t);let c=v.get(t);return c||v.set(t,c=[]),c.push({propName:i,before:s,after:o}),n.setProps({...n.props,[i]:o}),r(),!0}function Z(e,i,o){let a=t(e);if(!a)return null;if(o&&!y.has(o)){let e=document.createElement("style");e.textContent=E,o.append(e),y.add(o)}let r=document.createElement("details");r.className="design-group design-react-group",r.open=!0;let d=document.createElement("summary");d.textContent="React props",r.append(d);let s=document.createElement("small");s.className="design-react-source",s.textContent=`${a.definition.name} · ${a.definition.source}:${a.definition.line}`,r.append(s);for(let t of a.definition.props){let o=t.styleProperty,d=document.createElement("label");d.className="design-field design-react-field";let s=document.createElement("span");s.textContent=t.name;let l,p=a.props[t.name];if("enum"===t.kind){let e=document.createElement("select");for(let n of t.values??[]){let t=document.createElement("option");t.value=String(n),t.textContent=String(n),e.append(t)}if(void 0===p&&!t.required){let t=document.createElement("option");t.value="",t.textContent="unset",e.prepend(t)}e.value=void 0===p?"":String(p),l=e}else{let e=document.createElement("input");"boolean"===t.kind?(e.type="checkbox",e.checked=!0===p):"number"===t.kind?(e.type="number",e.step="any",e.value="number"==typeof p?String(p):""):(e.type="text",e.maxLength=500,e.autocomplete="off",e.value="string"==typeof p?p:""),l=e}if(l.setAttribute("aria-label",`${a.definition.name} ${t.name}`),"unsupported"===t.kind)l=document.createElement("input"),l.disabled=!0,l.value=`Read only · ${t.typeLabel}`,l.setAttribute("aria-label",`${a.definition.name} ${t.name}, read only`),d.title=`Komo does not edit ${t.typeLabel} props.`;else{let n=()=>{let n=l instanceof HTMLInputElement&&"checkbox"===l.type?l.checked:l.value,o=n;if("number"===t.kind)o=""===String(n).trim()?void 0:Number(n);else if("enum"===t.kind){let e=(t.values??[]).find(e=>String(e)===n);o=""!==n||t.required?e:void 0}else"boolean"===t.kind&&(o=!0===n);X(e,a,t.name,o,l,i)};l.addEventListener("change",n)}d.append(s,l);let c=document.createElement("small");if(c.className="design-react-type",c.textContent=`${t.typeLabel}${t.required?" · required":" · optional"}`,d.append(c),d.title||=c.textContent,"string"===t.kind&&o){let r=n(e),s=r?g(r,o):[];if(s.length){let n=document.createElement("span");n.className="design-token-binding";let r=document.createElement("span");r.textContent="Style token";let p=document.createElement("select");p.setAttribute("aria-label",`Style token for ${t.name}`);let c=document.createElement("option");c.value="custom",c.textContent="Custom value",p.append(c);for(let e of s){let t=document.createElement("option");t.value=e.path,t.textContent=e.path,p.append(t)}let u=()=>{let e=s.find(e=>a.props[t.name]===`var(${e.cssVariable})`);p.value=e?.path??"custom",n.dataset.mode=e?"token":"custom"};p.addEventListener("change",()=>{let n=s.find(e=>e.path===p.value),r=n?`var(${n.cssVariable})`:"string"==typeof a.props[t.name]&&String(a.props[t.name]).startsWith("var(")?e.ownerDocument.defaultView?.getComputedStyle(e).getPropertyValue(o).trim()??"":"string"==typeof a.props[t.name]?a.props[t.name]:"";X(e,a,t.name,r,l,i)&&u()}),n.append(r,p),d.append(n),u()}}r.append(d)}return r}export{H as attachStyleTokenControls,S as beginReactTextEdit,T as canUndoDesignTokenEdit,z as canUndoReactProp,A as cancelReactTextEdit,_ as createDesignThemePanel,O as createElementTokenControl,Z as createReactPropsPanel,N as finishReactTextEdit,q as hasDesignTokenEdit,$ as hasReactPropChanges,R as installCommentCapture,I as noteDesignTokenOverride,P as previewReactTextEdit,L as proposedDesignChanges,M as proposedReactChanges,j as resetDesignTokenEdits,J as resetReactProps,K as syncDesignTokenBinding,B as tokenBoundProperties,D as undoDesignTokenEdit,U as undoReactProp};

package/dist/tag-editor-VDPZ6CO3.js

@@ -1 +0,0 @@
-import"./chunk-I7AUKTXE.js";var t=12,e=/^[\p{L}\p{N}][\p{L}\p{N} ._-]{0,31}$/u;function a(t){let a=t.trim().replace(/^#/,"").toLocaleLowerCase("en-US");return e.test(a)?a:null}function n(t,e){let n=[...e.tags],r=!1,o=!1,i=(...e)=>{o=!0,t.replaceChildren(...e),o=!1},l=`komo-tags-${Math.random().toString(36).slice(2)}`;!function t(d=!1){let p=document.createElement("style");p.textContent='\n.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; min-height: 24px; font-size: 12px; }\n.tag-row .tag-chip {\n  display: inline-flex; align-items: center; gap: 2px; max-width: 160px; height: 22px; padding: 0 2px 0 7px;\n  border-radius: 6px; font-weight: 500; line-height: 1; color: var(--accent, #bda6ef);\n  background: color-mix(in srgb, var(--accent, #bda6ef) 14%, transparent);\n}\n.tag-row .tag-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.tag-row .tag-chip button, .tag-row .tag-add {\n  display: inline-flex; align-items: center; border: 0; padding: 0; color: inherit; background: none; cursor: pointer; font-family: inherit;\n}\n.tag-row .tag-chip button { justify-content: center; width: 18px; height: 18px; border-radius: 4px; opacity: .6; }\n.tag-row .tag-chip button:hover, .tag-row .tag-chip button:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }\n.tag-row .tag-add {\n  gap: 4px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 12px; color: #858585;\n  transition: color var(--duration-quick, 150ms), background var(--duration-quick, 150ms);\n}\n.tag-row .tag-add:hover, .tag-row .tag-add:focus-visible { color: #eee; background: #ffffff0d; }\n.tag-row .tag-input {\n  width: 96px; height: 24px; padding: 0 8px; border: 0; border-radius: 6px; outline: none;\n  font-family: inherit; font-size: 12px; color: #eee; background: #ffffff07; box-shadow: inset 0 0 0 1px #ffffff05;\n}\n.tag-row .tag-input::placeholder { color: #858585; }\n.tag-row .tag-input:focus { box-shadow: inset 0 0 0 1px #ffffff20; }\n.tag-row .tag-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #f28b8299; }\n.tag-row .tag-options {\n  flex-basis: 100%; display: grid; gap: 1px; max-height: 172px; overflow: auto; padding: 4px; border-radius: 8px;\n  background: #ffffff07; box-shadow: inset 0 0 0 1px #ffffff0a;\n}\n.tag-row .tag-options:empty { display: none; }\n.tag-row .tag-option {\n  display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 8px; border-radius: 5px;\n  color: #ddd; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;\n}\n.tag-row .tag-option[aria-selected="true"] { background: #ffffff12; color: #fff; }\n.tag-row .tag-option-hint, .tag-row .tag-option-empty { color: #858585; }\n.tag-row .tag-option-empty { padding: 5px 8px; }\n.new-comment-composer .draft-body .tag-slot { grid-row: 2; grid-column: 2; align-self: center; min-width: 0; }\n.new-comment-composer .draft-body:not(:has(.avatar)) .tag-slot { grid-column: 1; }\n/* Line up with message text: 16px gutter plus the 24px avatar and 8px gap. */\n.thread-tags { padding: 0 16px 12px 48px; margin-top: -6px; }\n';let s=document.createElement("div");s.className="tag-row",s.setAttribute("role","group"),s.setAttribute("aria-label","Tags");for(let a of n){let r=document.createElement("span");r.className="tag-chip";let o=document.createElement("span");o.textContent=`#${a}`;let i=document.createElement("button");i.type="button",i.textContent="×",i.setAttribute("aria-label",`Remove tag ${a}`),i.addEventListener("click",()=>{n=n.filter(t=>t!==a),e.onRemove(a),t()}),r.append(o,i),s.append(r)}if(r){let c=document.createElement("input");c.className="tag-input",c.placeholder="Add tag…",c.maxLength=33,c.autocomplete="off",c.setAttribute("role","combobox"),c.setAttribute("aria-label","Add tag"),c.setAttribute("aria-autocomplete","list"),c.setAttribute("aria-controls",l);let g=document.createElement("div");g.className="tag-options",g.id=l,g.setAttribute("role","listbox"),g.setAttribute("aria-label","Tags");let u=[],f=-1,m=a=>{!n.includes(a)&&n.length<12&&(n=[...n,a].sort(),e.onAdd(a)),r=n.length<12,t(r)},x=t=>{f=t,g.querySelectorAll("[role=option]").forEach((e,a)=>{e.setAttribute("aria-selected",String(a===t)),a===t&&e.scrollIntoView?.({block:"nearest"})}),t>=0?c.setAttribute("aria-activedescendant",`${l}-${t}`):c.removeAttribute("aria-activedescendant")},b=()=>{let t=c.value.trim().replace(/^#/,"").toLocaleLowerCase("en-US"),r=a(c.value),o=e.suggestions.filter(t=>!n.includes(t));u=(t?[...o.filter(e=>e.startsWith(t)),...o.filter(e=>!e.startsWith(t)&&e.includes(t))]:o).map(t=>({tag:t,create:!1})),r&&!n.includes(r)&&!o.includes(r)&&u.push({tag:r,create:!0}),g.replaceChildren(...u.map(({tag:t,create:e},a)=>{let n=document.createElement("div");return n.id=`${l}-${a}`,n.className="tag-option",n.setAttribute("role","option"),e&&n.append(Object.assign(document.createElement("span"),{className:"tag-option-hint",textContent:"Create"})),n.append(Object.assign(document.createElement("span"),{textContent:`#${t}`})),n.addEventListener("pointerdown",t=>t.preventDefault()),n.addEventListener("click",()=>m(t)),n.addEventListener("pointermove",()=>x(a)),n})),u.length||g.append(Object.assign(document.createElement("div"),{className:"tag-option-empty",textContent:t?n.includes(r??"")?"Already added":"Use letters, numbers, spaces, . _ or -":"Type to create a tag"})),c.setAttribute("aria-expanded",String(u.length>0)),x(t&&u.length?0:-1)};return c.addEventListener("input",b),c.addEventListener("keydown",o=>{if(o.stopPropagation(),!o.isComposing)if("ArrowDown"===o.key||"ArrowUp"===o.key){if(o.preventDefault(),!u.length)return;let t=u.length-1;x("ArrowDown"===o.key?f>=t?0:f+1:f<=0?t:f-1)}else if("Enter"===o.key||","===o.key)if(o.preventDefault(),f>=0&&u[f])m(u[f].tag);else if(c.value.trim()){let t=a(c.value);t?m(t):c.setAttribute("aria-invalid","true")}else r=!1,t();else if("Escape"===o.key)o.preventDefault(),r=!1,t();else if("Backspace"===o.key&&!c.value&&n.length){let a=n.at(-1);n=n.slice(0,-1),e.onRemove(a),t(!0)}}),c.addEventListener("input",()=>c.removeAttribute("aria-invalid")),c.addEventListener("blur",()=>{o||!c.isConnected||!r||(r=!1,t())}),s.append(c,g),i(p,s),b(),void((d||r)&&c.focus({preventScroll:!0}))}if(n.length<12){let e=document.createElement("button");e.type="button",e.className="tag-add",e.textContent=n.length?"+":"+ Add tag",e.setAttribute("aria-label","Add tag"),e.addEventListener("click",()=>{r=!0,t(!0)}),s.append(e)}i(p,s)}()}export{t as MAX_TAGS,a as normalizeTag,n as tagEditor};

package/dist/toolbar-runtime-MYOLQPTJ.js

@@ -1 +0,0 @@
-import{$ as t,A as e,B as n,C as r,D as i,E as o,F as s,G as a,H as l,I as u,J as c,K as d,L as h,M as m,N as p,O as f,P as g,Q as v,R as y,S as w,T as x,U as E,V as P,W as S,X as b,Y as C,Z as M,_ as k,a as T,aa as A,b as L,ba as D,c as I,ca as j,da as V,ea as _,fa as O,ga as R,ha as W,ia as N,j as B,ja as F,k as H,ka as U,l as G,m as $,n as Y,o as X,p as z,q,r as J,s as K,t as Q,u as Z,v as tt,w as et,x as nt,y as rt,z as it}from"./chunk-7YUXYVQA.js";import{c as ot,g as st}from"./chunk-E5X4IQJ2.js";import{a as at}from"./chunk-I7AUKTXE.js";import{createRoot as lt}from"react-dom/client";import{flushSync as ut}from"react-dom";import{createElement as ct}from"react";import*as dt from"react";var ht=({size:t=24,color:e="currentColor",...n})=>dt.createElement("svg",{viewBox:"0 0 24 24",width:t,height:t,stroke:e,strokeWidth:"2",fill:"none",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...n},dt.createElement("path",{d:"m7 15 5 5 5-5M7 9l5-5 5 5"}));ht.displayName="ChevronSelectorVertical";import*as mt from"react";var pt=({size:t=24,color:e="currentColor",...n})=>mt.createElement("svg",{viewBox:"0 0 24 24",width:t,height:t,stroke:e,strokeWidth:"2",fill:"none",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...n},mt.createElement("path",{d:"M18 6 6 18M6 6l12 12"}));pt.displayName="XClose";import*as ft from"react";var gt=({size:t=24,color:e="currentColor",...n})=>ft.createElement("svg",{viewBox:"0 0 24 24",width:t,height:t,stroke:e,strokeWidth:"2",fill:"none",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...n},ft.createElement("path",{d:"M19 12H5m0 0 7 7m-7-7 7-7"}));gt.displayName="ArrowLeft";import*as vt from"react";var yt=({size:t=24,color:e="currentColor",...n})=>vt.createElement("svg",{viewBox:"0 0 24 24",width:t,height:t,stroke:e,strokeWidth:"2",fill:"none",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...n},vt.createElement("path",{d:"m9 18 6-6-6-6"}));yt.displayName="ChevronRight";import{useEffect as wt,useId as xt,useLayoutEffect as Et,useRef as Pt,useState as St}from"react";import{createContext as bt}from"react";var Ct=bt({});import{useRef as Mt}from"react";import{useLayoutEffect as kt,useEffect as Tt}from"react";var At=typeof window<"u"?kt:Tt;import{createContext as Lt}from"react";var Dt=Lt(null);import{createContext as It}from"react";var jt=It({transformPagePoint:t=>t,isStatic:!1,reducedMotion:"never"});import{useContext as Vt,useId as _t,useEffect as Ot,useCallback as Rt}from"react";import{createContext as Wt}from"react";var Nt=Wt({strict:!1}),Bt={animation:["animate","variants","whileHover","whileTap","exit","whileInView","whileFocus","whileDrag"],exit:["exit"],drag:["drag","dragControls"],focus:["whileFocus"],hover:["whileHover","onHoverStart","onHoverEnd"],tap:["whileTap","onTap","onTapStart","onTapCancel"],pan:["onPan","onPanStart","onPanSessionStart","onPanEnd"],inView:["whileInView","onViewportEnter","onViewportLeave"],layout:["layout","layoutId"]},Ft=!1;function Ht(){return function(){if(Ft)return;let t={};for(let e in Bt)t[e]={isEnabled:t=>Bt[e].some(e=>!!t[e])};v(t),Ft=!0}(),y()}var Ut=new Set(["animate","exit","variants","initial","style","values","variants","transition","transformTemplate","custom","inherit","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","_dragX","_dragY","onHoverStart","onHoverEnd","onViewportEnter","onViewportLeave","globalTapTarget","propagate","ignoreStrict","viewport"]);function Gt(t){return t.startsWith("while")||t.startsWith("drag")&&"draggable"!==t||t.startsWith("layout")||t.startsWith("onTap")||t.startsWith("onPan")||t.startsWith("onLayout")||Ut.has(t)}var $t,Yt=t=>!Gt(t);try{"function"==typeof($t=at("@emotion/is-prop-valid").default)&&(Yt=t=>t.startsWith("on")?!Gt(t):$t(t))}catch{}import{jsxs as Xt,jsx as zt}from"react/jsx-runtime";import{forwardRef as qt,useContext as Jt}from"react";import{createContext as Kt}from"react";var Qt=Kt({});import{useContext as Zt,useMemo as te}from"react";function ee(t){let{initial:e,animate:n}=function(t,e){if(h(t)){let{initial:e,animate:n}=t;return{initial:!1===e||d(e)?e:void 0,animate:d(n)?n:void 0}}return!1!==t.inherit?e:{}}(t,Zt(Qt));return te(()=>({initial:e,animate:n}),[ne(e),ne(n)])}function ne(t){return Array.isArray(t)?t.join(" "):t}import{Fragment as re,useMemo as ie,createElement as oe}from"react";import{useMemo as se}from"react";var ae=()=>({style:{},transform:{},transformOrigin:{},vars:{}});function le(t,e,n){for(let r in e)!rt(e[r])&&!b(r,n)&&(t[r]=e[r])}function ue(t,e){let n={};return le(n,t.style||{},t),Object.assign(n,function({transformTemplate:t},e){return se(()=>{let n={style:{},transform:{},transformOrigin:{},vars:{}};return S(n,e,t),Object.assign({},n.vars,n.style)},[e])}(t,e)),n}function ce(t,e){let n={},r=ue(t,e);return t.drag&&!1!==t.dragListener&&(n.draggable=!1,r.userSelect=r.WebkitUserSelect=r.WebkitTouchCallout="none",r.touchAction=!0===t.drag?"none":"pan-"+("x"===t.drag?"y":"x")),void 0===t.tabIndex&&(t.onTap||t.onTapStart||t.whileTap)&&(n.tabIndex=0),n.style=r,n}import{useMemo as de}from"react";var he=()=>({style:{},transform:{},transformOrigin:{},vars:{},attrs:{}});function me(e,n,r,i){let o=de(()=>{let r={style:{},transform:{},transformOrigin:{},vars:{},attrs:{}};return k(r,n,t(i),e.transformTemplate,e.style),{...r.attrs,style:{...r.style}}},[n]);if(e.style){let t={};le(t,e.style,e),o.style={...t,...o.style}}return o}var pe=["animate","circle","defs","desc","ellipse","g","image","line","filter","marker","mask","metadata","path","pattern","polygon","polyline","rect","stop","switch","symbol","svg","text","tspan","use","view"];function fe(t){return"string"==typeof t&&!t.includes("-")&&!!(pe.indexOf(t)>-1||/[A-Z]/u.test(t))}function ge(t,e,n,{latestValues:r},i,o=!1,s){let a=(s??fe(t)?me:ce)(e,r,i,t),l=function(t,e,n){let r={};for(let i in t)"values"===i&&"object"==typeof t.values||rt(t[i])||(Yt(i)||!0===n&&Gt(i)||!e&&!Gt(i)||t.draggable&&i.startsWith("onDrag"))&&(r[i]=t[i]);return r}(e,"string"==typeof t,o),u=t!==re?{...l,...a,ref:n}:{},{children:c}=e,d=ie(()=>rt(c)?c.get():c,[c]);return oe(t,{...u,children:d})}import{useContext as ve}from"react";function ye(t,e,n,r){let i={},o=r(t,{});for(let t in o)i[t]=R(o[t]);let{initial:s,animate:a}=t,l=h(t),u=m(t);e&&u&&!l&&!1!==t.inherit&&(void 0===s&&(s=e.initial),void 0===a&&(a=e.animate));let d=!!n&&!1===n.initial;d=d||!1===s;let p=d?a:s;if(p&&"boolean"!=typeof p&&!c(p)){let e=Array.isArray(p)?p:[p];for(let n=0;n<e.length;n++){let r=et(t,e[n]);if(r){let{transitionEnd:t,transition:e,...n}=r;for(let t in n){let e=n[t];if(Array.isArray(e)){e=e[d?e.length-1:0]}null!==e&&(i[t]=e)}for(let e in t)i[e]=t[e]}}}return i}var we=t=>(e,n)=>{let r=ve(Qt),i=ve(Dt),o=()=>function({scrapeMotionValuesFromProps:t,createRenderState:e},n,r,i){return{latestValues:ye(n,r,i,t),renderState:e()}}(t,e,r,i);return n?o():function(t){let e=Mt(null);return null===e.current&&(e.current=t()),e.current}(o)},xe=we({scrapeMotionValuesFromProps:C,createRenderState:ae}),Ee=we({scrapeMotionValuesFromProps:A,createRenderState:he}),Pe=Symbol.for("motionComponentSymbol");import{useRef as Se,useInsertionEffect as be,useCallback as Ce}from"react";function Me(t,e,n){let r=Se(n);be(()=>{r.current=n});let i=Se(null);return Ce(n=>{n&&t.onMount?.(n),e&&(n?e.mount(n):e.unmount());let o=r.current;if("function"==typeof o)if(n){let t=o(n);"function"==typeof t&&(i.current=t)}else i.current?(i.current(),i.current=null):o(n);else o&&(o.current=n)},[e])}import{useContext as ke,useRef as Te,useInsertionEffect as Ae,useEffect as Le}from"react";import{createContext as De}from"react";var Ie=De({});function je(t){return t&&"object"==typeof t&&Object.prototype.hasOwnProperty.call(t,"current")}function Ve(t,n,r,i,o,s){let{visualElement:a}=ke(Qt),l=ke(Nt),u=ke(Dt),c=ke(jt),d=c.reducedMotion,h=c.skipAnimations,m=Te(null),p=Te(!1);i=i||l.renderer,!m.current&&i&&(m.current=i(t,{visualState:n,parent:a,props:r,presenceContext:u,blockInitialAnimation:!!u&&!1===u.initial,reducedMotionConfig:d,skipAnimations:h,isSVG:s}),p.current&&m.current&&(m.current.manuallyAnimateOnMount=!0));let f=m.current,g=ke(Ie);f&&!f.projection&&o&&("html"===f.type||"svg"===f.type)&&function(t,e,n,r){let{layoutId:i,layout:o,drag:s,dragConstraints:a,layoutScroll:l,layoutRoot:u,layoutAnchor:c,layoutCrossfade:d}=e;t.projection=new n(t.latestValues,e["data-framer-portal-id"]?void 0:_e(t.parent)),t.projection.setOptions({layoutId:i,layout:o,alwaysMeasureLayout:!!s||a&&je(a),visualElement:t,animationType:"string"==typeof o?o:"both",initialPromotionConfig:r,crossfade:d,layoutScroll:l,layoutRoot:u,layoutAnchor:c})}(m.current,r,o,g);let v=Te(!1);Ae(()=>{f&&v.current&&f.update(r,u)});let y=r[e],w=Te(!!y&&typeof window<"u"&&!window.MotionHandoffIsComplete?.(y)&&window.MotionHasOptimisedAnimation?.(y));return At(()=>{p.current=!0,f&&(v.current=!0,window.MotionIsMounted=!0,f.updateFeatures(),f.scheduleRenderMicrotask(),w.current&&f.animationState&&f.animationState.animateChanges())}),Le(()=>{f&&(!w.current&&f.animationState&&f.animationState.animateChanges(),w.current&&(queueMicrotask(()=>{window.MotionHandoffMarkAsComplete?.(y)}),w.current=!1),f.enteringChildren=void 0)}),f}function _e(t){if(t)return!1!==t.options.allowProjection?t.projection:_e(t.parent)}function Oe(t,{forwardMotionProps:e=!1,type:n}={},r,i){r&&function(t){let e=Ht();for(let n in t)e[n]={...e[n],...t[n]};v(e)}(r);let o=n?"svg"===n:fe(t),s=o?Ee:xe;function a(n,r){let a,l={...Jt(jt),...n,layoutId:Re(n)},{isStatic:u}=l,c=ee(n),d=s(n,u);if(!u&&typeof window<"u"){Jt(Nt).strict;let e=function(t){let e=Ht(),{drag:n,layout:r}=e;if(!n&&!r)return{};let i={...n,...r};return{MeasureLayout:n?.isEnabled(t)||r?.isEnabled(t)?i.MeasureLayout:void 0,ProjectionNode:i.ProjectionNode}}(l);a=e.MeasureLayout,c.visualElement=Ve(t,d,l,i,e.ProjectionNode,o)}return Xt(Qt.Provider,{value:c,children:[a&&c.visualElement?zt(a,{visualElement:c.visualElement,...l}):null,ge(t,n,Me(d,c.visualElement,r),d,u,e,o)]})}a.displayName=`motion.${"string"==typeof t?t:`create(${t.displayName??t.name??""})`}`;let l=qt(a);return l[Pe]=t,l}function Re({layoutId:t}){let e=Jt(Ct).id;return e&&void 0!==t?e+"-"+t:t}import{Fragment as We}from"react";var Ne=0,Be={animation:{Feature:class extends w{constructor(t){super(t),t.animationState||(t.animationState=j(t))}updateAnimationControlsSubscription(){let{animate:t}=this.node.getProps();c(t)&&(this.unmountControls=t.subscribe(this.node))}mount(){this.updateAnimationControlsSubscription()}update(){let{animate:t}=this.node.getProps(),{animate:e}=this.node.prevProps||{};t!==e&&this.updateAnimationControlsSubscription()}unmount(){this.node.animationState.reset(),this.unmountControls?.()}}},exit:{Feature:class extends w{constructor(){super(...arguments),this.id=Ne++,this.isExitComplete=!1}update(){if(!this.node.presenceContext)return;let{isPresent:t,onExitComplete:e}=this.node.presenceContext,{isPresent:n}=this.node.prevPresenceContext||{};if(!this.node.animationState||t===n)return;if(t&&!1===n){if(this.isExitComplete){let{initial:t,custom:e}=this.node.getProps();if("string"==typeof t||"object"==typeof t&&null!==t&&!Array.isArray(t)){let n=nt(this.node,t,e);if(n){let{transition:t,transitionEnd:e,...r}=n;for(let t in r)this.node.getValue(t)?.jump(r[t])}}this.node.animationState.reset(),this.node.animationState.animateChanges()}else this.node.animationState.setActive("exit",!1);return void(this.isExitComplete=!1)}let r=this.node.animationState.setActive("exit",!t);e&&!t&&r.then(()=>{this.isExitComplete=!0,e(this.id)})}mount(){let{register:t,onExitComplete:e}=this.node.presenceContext||{};e&&e(this.id),t&&(this.unmount=t(this.id))}unmount(){}}}};function Fe(t){return{point:{x:t.pageX,y:t.pageY}}}function He(t,e,n,r){return O(t,e,(t=>e=>o(e)&&t(e,Fe(e)))(n),r)}var Ue=({current:t})=>t?t.ownerDocument.defaultView:null,Ge=new Set(["auto","scroll"]),$e=class{constructor(t,e,{transformPagePoint:n,contextWindow:r=window,dragSnapToOrigin:i=!1,distanceThreshold:s=3,element:a}={}){if(this.startEvent=null,this.lastMoveEvent=null,this.lastMoveEventInfo=null,this.lastRawMoveEventInfo=null,this.handlers={},this.contextWindow=window,this.scrollPositions=new Map,this.removeScrollListeners=null,this.onElementScroll=t=>{this.handleScroll(t.target)},this.onWindowScroll=()=>{this.handleScroll(window)},this.updatePoint=()=>{if(!this.lastMoveEvent||!this.lastMoveEventInfo)return;this.lastRawMoveEventInfo&&(this.lastMoveEventInfo=Ye(this.lastRawMoveEventInfo,this.transformPagePoint));let t=ze(this.lastMoveEventInfo,this.history),e=null!==this.startEvent,n=U(t.offset,{x:0,y:0})>=this.distanceThreshold;if(!e&&!n)return;let{point:r}=t,{timestamp:i}=K;this.history.push({...r,timestamp:i});let{onStart:o,onMove:s}=this.handlers;e||(o&&o(this.lastMoveEvent,t),this.startEvent=this.lastMoveEvent),s&&s(this.lastMoveEvent,t)},this.handlePointerMove=(t,e)=>{this.lastMoveEvent=t,this.lastRawMoveEventInfo=e,this.lastMoveEventInfo=Ye(e,this.transformPagePoint),q.update(this.updatePoint,!0)},this.handlePointerUp=(t,e)=>{this.end();let{onEnd:n,onSessionEnd:r,resumeAnimation:i}=this.handlers;if((this.dragSnapToOrigin||!this.startEvent)&&i&&i(),!this.lastMoveEvent||!this.lastMoveEventInfo)return;let o=ze("pointercancel"===t.type?this.lastMoveEventInfo:Ye(e,this.transformPagePoint),this.history);this.startEvent&&n&&n(t,o),r&&r(t,o)},!o(t))return;this.dragSnapToOrigin=i,this.handlers=e,this.transformPagePoint=n,this.distanceThreshold=s,this.contextWindow=r||window;let l=Ye(Fe(t),this.transformPagePoint),{point:u}=l,{timestamp:c}=K;this.history=[{...u,timestamp:c}];let{onSessionStart:d}=e;d&&d(t,ze(l,this.history));let h={passive:!0,capture:!0};this.removeListeners=$(He(this.contextWindow,"pointermove",this.handlePointerMove,h),He(this.contextWindow,"pointerup",this.handlePointerUp,h),He(this.contextWindow,"pointercancel",this.handlePointerUp,h)),a&&this.startScrollTracking(a)}startScrollTracking(t){let e=t.parentElement;for(;e;){let t=getComputedStyle(e);(Ge.has(t.overflowX)||Ge.has(t.overflowY))&&this.scrollPositions.set(e,{x:e.scrollLeft,y:e.scrollTop}),e=e.parentElement}this.scrollPositions.set(window,{x:window.scrollX,y:window.scrollY}),window.addEventListener("scroll",this.onElementScroll,{capture:!0}),window.addEventListener("scroll",this.onWindowScroll),this.removeScrollListeners=()=>{window.removeEventListener("scroll",this.onElementScroll,{capture:!0}),window.removeEventListener("scroll",this.onWindowScroll)}}handleScroll(t){let e=this.scrollPositions.get(t);if(!e)return;let n=t===window,r=n?{x:window.scrollX,y:window.scrollY}:{x:t.scrollLeft,y:t.scrollTop},i=r.x-e.x,o=r.y-e.y;0===i&&0===o||(n?this.lastMoveEventInfo&&(this.lastMoveEventInfo.point.x+=i,this.lastMoveEventInfo.point.y+=o):this.history.length>0&&(this.history[0].x-=i,this.history[0].y-=o),this.scrollPositions.set(t,r),q.update(this.updatePoint,!0))}updateHandlers(t){this.handlers=t}end(){this.removeListeners&&this.removeListeners(),this.removeScrollListeners&&this.removeScrollListeners(),this.scrollPositions.clear(),J(this.updatePoint)}};function Ye(t,e){return e?{point:e(t.point)}:t}function Xe(t,e){return{x:t.x-e.x,y:t.y-e.y}}function ze({point:t},e){return{point:t,delta:Xe(t,Je(e)),offset:Xe(t,qe(e)),velocity:Ke(e,.1)}}function qe(t){return t[0]}function Je(t){return t[t.length-1]}function Ke(t,e){if(t.length<2)return{x:0,y:0};let n=t.length-1,r=null,i=Je(t);for(;n>=0&&(r=t[n],!(i.timestamp-r.timestamp>X(e)));)n--;if(!r)return{x:0,y:0};r===t[0]&&t.length>2&&i.timestamp-r.timestamp>2*X(e)&&(r=t[1]);let o=z(i.timestamp-r.timestamp);if(0===o)return{x:0,y:0};let s={x:(i.x-r.x)/o,y:(i.y-r.y)/o};return s.x===1/0&&(s.x=0),s.y===1/0&&(s.y=0),s}function Qe(t,e,n){return{min:void 0!==e?t.min+e:void 0,max:void 0!==n?t.max+n-(t.max-t.min):void 0}}function Ze(t,e){let n=e.min-t.min,r=e.max-t.max;return e.max-e.min<t.max-t.min&&([n,r]=[r,n]),{min:n,max:r}}var tn=.35;function en(t,e,n){return{min:nn(t,e),max:nn(t,n)}}function nn(t,e){return"number"==typeof t?t:t[e]||0}var rn=new WeakMap,on=class{constructor(t){this.openDragLock=null,this.isDragging=!1,this.currentDirection=null,this.originPoint={x:0,y:0},this.constraints=!1,this.hasMutatedConstraints=!1,this.elastic=u(),this.latestPointerEvent=null,this.latestPanInfo=null,this.visualElement=t}start(t,{snapToCursor:e=!1,distanceThreshold:n}={}){let{presenceContext:i}=this.visualElement;if(i&&!1===i.isPresent)return;let{dragSnapToOrigin:o}=this.getProps();this.panSession=new $e(t,{onSessionStart:t=>{e&&this.snapToCursor(Fe(t).point),this.stopAnimation()},onStart:(t,e)=>{let{drag:n,dragPropagation:i,onDragStart:o}=this.getProps();if(n&&!i&&(this.openDragLock&&this.openDragLock(),this.openDragLock=r(n),!this.openDragLock))return;this.latestPointerEvent=t,this.latestPanInfo=e,this.isDragging=!0,this.currentDirection=null,this.resolveConstraints(),this.visualElement.projection&&(this.visualElement.projection.isAnimationBlocked=!0,this.visualElement.projection.target=void 0),_(t=>{let e=this.getAxisMotionValue(t).get()||0;if(Q.test(e)){let{projection:n}=this.visualElement;if(n&&n.layout){let r=n.layout.layoutBox[t];r&&(e=V(r)*(parseFloat(e)/100))}}this.originPoint[t]=e}),o&&q.update(()=>o(t,e),!1,!0),it(this.visualElement,"transform");let{animationState:s}=this.visualElement;s&&s.setActive("whileDrag",!0)},onMove:(t,e)=>{this.latestPointerEvent=t,this.latestPanInfo=e;let{dragPropagation:n,dragDirectionLock:r,onDirectionLock:i,onDrag:o}=this.getProps();if(!n&&!this.openDragLock)return;let{offset:s}=e;if(r&&null===this.currentDirection)return this.currentDirection=function(t,e=10){let n=null;return Math.abs(t.y)>e?n="y":Math.abs(t.x)>e&&(n="x"),n}(s),void(null!==this.currentDirection&&i&&i(this.currentDirection));this.updateAxis("x",e.point,s),this.updateAxis("y",e.point,s),this.visualElement.render(),o&&q.update(()=>o(t,e),!1,!0)},onSessionEnd:(t,e)=>{this.latestPointerEvent=t,this.latestPanInfo=e,this.stop(t,e),this.latestPointerEvent=null,this.latestPanInfo=null},resumeAnimation:()=>{let{dragSnapToOrigin:t}=this.getProps();(t||this.constraints)&&this.startAnimation({x:0,y:0})}},{transformPagePoint:this.visualElement.getTransformPagePoint(),dragSnapToOrigin:o,distanceThreshold:n,contextWindow:Ue(this.visualElement),element:this.visualElement.current})}stop(t,e){let n=t||this.latestPointerEvent,r=e||this.latestPanInfo,i=this.isDragging;if(this.cancel(),!i||!r||!n)return;let{velocity:o}=r;this.startAnimation(o);let{onDragEnd:s}=this.getProps();s&&q.postRender(()=>s(n,r))}cancel(){this.isDragging=!1;let{projection:t,animationState:e}=this.visualElement;t&&(t.isAnimationBlocked=!1),this.endPanSession();let{dragPropagation:n}=this.getProps();!n&&this.openDragLock&&(this.openDragLock(),this.openDragLock=null),e&&e.setActive("whileDrag",!1)}endPanSession(){this.panSession&&this.panSession.end(),this.panSession=void 0}updateAxis(t,e,n){let{drag:r}=this.getProps();if(!n||!an(t,r,this.currentDirection))return;let i=this.getAxisMotionValue(t),o=this.originPoint[t]+n[t];this.constraints&&this.constraints[t]&&(o=function(t,{min:e,max:n},r){return void 0!==e&&t<e?t=r?Z(e,t,r.min):Math.max(t,e):void 0!==n&&t>n&&(t=r?Z(n,t,r.max):Math.min(t,n)),t}(o,this.constraints[t],this.elastic[t])),i.set(o)}resolveConstraints(){let{dragConstraints:t,dragElastic:e}=this.getProps(),n=this.visualElement.projection&&!this.visualElement.projection.layout?this.visualElement.projection.measure(!1):this.visualElement.projection?.layout,r=this.constraints;t&&je(t)?this.constraints||(this.constraints=this.resolveRefConstraints()):this.constraints=!(!t||!n)&&function(t,{top:e,left:n,bottom:r,right:i}){return{x:Qe(t.x,n,i),y:Qe(t.y,e,r)}}(n.layoutBox,t),this.elastic=function(t=tn){return!1===t?t=0:!0===t&&(t=tn),{x:en(t,"left","right"),y:en(t,"top","bottom")}}(e),r!==this.constraints&&!je(t)&&n&&this.constraints&&!this.hasMutatedConstraints&&_(t=>{!1!==this.constraints&&this.getAxisMotionValue(t)&&(this.constraints[t]=function(t,e){let n={};return void 0!==e.min&&(n.min=e.min-t.min),void 0!==e.max&&(n.max=e.max-t.min),n}(n.layoutBox[t],this.constraints[t]))})}resolveRefConstraints(){let{dragConstraints:t,onMeasureDragConstraints:e}=this.getProps();if(!t||!je(t))return!1;let n=t.current;H(null!==n,"If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.","drag-constraints-ref");let{projection:r}=this.visualElement;if(!r||!r.layout)return!1;r.root&&(r.root.scroll=void 0,r.root.updateScroll());let i=P(n,r.root,this.visualElement.getTransformPagePoint()),o=function(t,e){return{x:Ze(t.x,e.x),y:Ze(t.y,e.y)}}(r.layout.layoutBox,i);if(e){let t=e(E(o));this.hasMutatedConstraints=!!t,t&&(o=x(t))}return o}startAnimation(t){let{drag:e,dragMomentum:n,dragElastic:r,dragTransition:i,dragSnapToOrigin:o,onDragTransitionEnd:s}=this.getProps(),a=this.constraints||{},l=_(s=>{if(!an(s,e,this.currentDirection))return;let l=a&&a[s]||{};(!0===o||o===s)&&(l={min:0,max:0});let u=r?200:1e6,c=r?40:1e7,d={type:"inertia",velocity:n?t[s]:0,bounceStiffness:u,bounceDamping:c,timeConstant:750,restDelta:1,restSpeed:10,...i,...l};return this.startAxisValueAnimation(s,d)});return Promise.all(l).then(s)}startAxisValueAnimation(t,e){let n=this.getAxisMotionValue(t);return it(this.visualElement,t),n.start(tt(t,n,0,e,this.visualElement,!1))}stopAnimation(){_(t=>this.getAxisMotionValue(t).stop())}getAxisMotionValue(t){let e=`_drag${t.toUpperCase()}`;return this.visualElement.getProps()[e]||this.visualElement.getValue(t,this.visualElement.latestValues[t]??0)}snapToCursor(t){_(e=>{let{drag:n}=this.getProps();if(!an(e,n,this.currentDirection))return;let{projection:r}=this.visualElement,i=this.getAxisMotionValue(e);if(r&&r.layout){let{min:n,max:o}=r.layout.layoutBox[e],s=i.get()||0;i.set(t[e]-Z(n,o,.5)+s)}})}scalePositionWithinConstraints(){if(!this.visualElement.current)return;let{drag:t,dragConstraints:e}=this.getProps(),{projection:n}=this.visualElement;if(!je(e)||!n||!this.constraints)return;this.stopAnimation();let r={x:0,y:0};_(t=>{let e=this.getAxisMotionValue(t);if(e&&!1!==this.constraints){let n=e.get();r[t]=function(t,e){let n=.5,r=V(t),i=V(e);return i>r?n=Y(e.min,e.max-r,t.min):r>i&&(n=Y(t.min,t.max-i,e.min)),B(0,1,n)}({min:n,max:n},this.constraints[t])}});let{transformTemplate:i}=this.visualElement.getProps();this.visualElement.current.style.transform=i?i({},""):"none",n.root&&n.root.updateScroll(),n.updateLayout(),this.constraints=!1,this.resolveConstraints(),_(e=>{if(!an(e,t,null))return;let n=this.getAxisMotionValue(e),{min:i,max:o}=this.constraints[e];n.set(Z(i,o,r[e]))}),this.visualElement.render()}addListeners(){if(!this.visualElement.current)return;rn.set(this.visualElement,this);let t,e=this.visualElement.current,n=He(e,"pointerdown",t=>{let{drag:n,dragListener:r=!0}=this.getProps(),i=t.target,o=i!==e&&s(i);n&&r&&!o&&this.start(t)}),r=()=>{let{dragConstraints:n}=this.getProps();je(n)&&n.current&&(this.constraints=this.resolveRefConstraints(),t||(t=function(t,e,n){let r=l(t,sn(n)),i=l(e,sn(n));return()=>{r(),i()}}(e,n.current,()=>this.scalePositionWithinConstraints())))},{projection:i}=this.visualElement,o=i.addEventListener("measure",r);i&&!i.layout&&(i.root&&i.root.updateScroll(),i.updateLayout()),q.read(r);let a=O(window,"resize",()=>this.scalePositionWithinConstraints()),u=i.addEventListener("didUpdate",({delta:t,hasLayoutChanged:e})=>{this.isDragging&&e&&(_(e=>{let n=this.getAxisMotionValue(e);n&&(this.originPoint[e]+=t[e].translate,n.set(n.get()+t[e].translate))}),this.visualElement.render())});return()=>{a(),n(),o(),u&&u(),t&&t()}}getProps(){let t=this.visualElement.getProps(),{drag:e=!1,dragDirectionLock:n=!1,dragPropagation:r=!1,dragConstraints:i=!1,dragElastic:o=tn,dragMomentum:s=!0}=t;return{...t,drag:e,dragDirectionLock:n,dragPropagation:r,dragConstraints:i,dragElastic:o,dragMomentum:s}}};function sn(t){let e=!0;return()=>{e?e=!1:t()}}function an(t,e,n){return!(!0!==e&&e!==t||null!==n&&n!==t)}var ln=t=>(e,n)=>{t&&q.update(()=>t(e,n),!1,!0)};import{jsx as un}from"react/jsx-runtime";import{useContext as cn,Component as dn}from"react";var hn=!1,mn=class extends dn{componentDidMount(){let{visualElement:t,layoutGroup:e,switchLayoutGroup:n,layoutId:r}=this.props,{projection:i}=t;i&&(e.group&&e.group.add(i),n&&n.register&&r&&n.register(i),hn&&i.root.didUpdate(),i.addEventListener("animationComplete",()=>{this.safeToRemove()}),i.setOptions({...i.options,layoutDependency:this.props.layoutDependency,onExitComplete:()=>this.safeToRemove()})),W.hasEverUpdated=!0}getSnapshotBeforeUpdate(t){let{layoutDependency:e,visualElement:n,drag:r,isPresent:i}=this.props,{projection:o}=n;return o&&(o.isPresent=i,t.layoutDependency!==e&&o.setOptions({...o.options,layoutDependency:e}),hn=!0,r||t.layoutDependency!==e||void 0===e||t.isPresent!==i?o.willUpdate():this.safeToRemove(),t.isPresent!==i&&(i?o.promote():o.relegate()||q.postRender(()=>{let t=o.getStack();(!t||!t.members.length)&&this.safeToRemove()}))),null}componentDidUpdate(){let{visualElement:t,layoutAnchor:e}=this.props,{projection:r}=t;r&&(r.options.layoutAnchor=e,r.root.didUpdate(),n.postRender(()=>{!r.currentAnimation&&r.isLead()&&this.safeToRemove()}))}componentWillUnmount(){let{visualElement:t,layoutGroup:e,switchLayoutGroup:n}=this.props,{projection:r}=t;hn=!0,r&&(r.scheduleCheckAfterUnmount(),e&&e.group&&e.group.remove(r),n&&n.deregister&&n.deregister(r))}safeToRemove(){let{safeToRemove:t}=this.props;t&&t()}render(){return null}};function pn(t){let[e,n]=function(t=!0){let e=Vt(Dt);if(null===e)return[!0,null];let{isPresent:n,onExitComplete:r,register:i}=e,o=_t();Ot(()=>{if(t)return i(o)},[t]);let s=Rt(()=>t&&r&&r(o),[o,r,t]);return!n&&r?[!1,s]:[!0]}(),r=cn(Ct);return un(mn,{...t,layoutGroup:r,switchLayoutGroup:cn(Ie),isPresent:e,safeToRemove:n})}var fn={pan:{Feature:class extends w{constructor(){super(...arguments),this.removePointerDownListener=G}onPointerDown(t){this.session=new $e(t,this.createPanHandlers(),{transformPagePoint:this.node.getTransformPagePoint(),contextWindow:Ue(this.node)})}createPanHandlers(){let{onPanSessionStart:t,onPanStart:e,onPan:n,onPanEnd:r}=this.node.getProps();return{onSessionStart:ln(t),onStart:ln(e),onMove:ln(n),onEnd:(t,e)=>{delete this.session,r&&q.postRender(()=>r(t,e))}}}mount(){this.removePointerDownListener=He(this.node.current,"pointerdown",t=>this.onPointerDown(t))}update(){this.session&&this.session.updateHandlers(this.createPanHandlers())}unmount(){this.removePointerDownListener(),this.session&&this.session.end()}}},drag:{Feature:class extends w{constructor(t){super(t),this.removeGroupControls=G,this.removeListeners=G,this.controls=new on(t)}mount(){let{dragControls:t}=this.node.getProps();t&&(this.removeGroupControls=t.subscribe(this.controls)),this.removeListeners=this.controls.addListeners()||G}update(){let{dragControls:t}=this.node.getProps(),{dragControls:e}=this.node.prevProps||{};t!==e&&(this.removeGroupControls(),t&&(this.removeGroupControls=t.subscribe(this.controls)))}unmount(){this.removeGroupControls(),this.removeListeners(),this.controls.isDragging||this.controls.endPanSession()}},ProjectionNode:N,MeasureLayout:pn}};function gn(t,e,n){let{props:r}=t;t.animationState&&r.whileHover&&t.animationState.setActive("whileHover","Start"===n);let i=r["onHover"+n];i&&q.postRender(()=>i(e,Fe(e)))}function vn(t,e,n){let{props:r}=t;if(t.current instanceof HTMLButtonElement&&t.current.disabled)return;t.animationState&&r.whileTap&&t.animationState.setActive("whileTap","Start"===n);let i=r["onTap"+("End"===n?"":n)];i&&q.postRender(()=>i(e,Fe(e)))}var yn=new WeakMap,wn=new WeakMap,xn=t=>{let e=yn.get(t.target);e&&e(t)},En=t=>{t.forEach(xn)};function Pn(t,e,n){let r=function({root:t,...e}){let n=t||document;wn.has(n)||wn.set(n,{});let r=wn.get(n),i=JSON.stringify(e);return r[i]||(r[i]=new IntersectionObserver(En,{root:t,...e})),r[i]}(e);return yn.set(t,n),r.observe(t),()=>{yn.delete(t),r.unobserve(t)}}var Sn={some:0,all:1};var bn={inView:{Feature:class extends w{constructor(){super(...arguments),this.hasEnteredView=!1,this.isInView=!1}startObserver(){this.stopObserver?.();let{viewport:t={}}=this.node.getProps(),{root:e,margin:n,amount:r="some",once:i}=t,o={root:e?e.current:void 0,rootMargin:n,threshold:"number"==typeof r?r:Sn[r]};this.stopObserver=Pn(this.node.current,o,t=>{let{isIntersecting:e}=t;if(this.isInView===e||(this.isInView=e,i&&!e&&this.hasEnteredView))return;e&&(this.hasEnteredView=!0),this.node.animationState&&this.node.animationState.setActive("whileInView",e);let{onViewportEnter:n,onViewportLeave:r}=this.node.getProps(),o=e?n:r;o&&o(t)})}mount(){this.startObserver()}update(){if(typeof IntersectionObserver>"u")return;let{props:t,prevProps:e}=this.node;["amount","margin","root"].some(function({viewport:t={}},{viewport:e={}}={}){return n=>t[n]!==e[n]}(t,e))&&this.startObserver()}unmount(){this.stopObserver?.(),this.hasEnteredView=!1,this.isInView=!1}}},tap:{Feature:class extends w{mount(){let{current:t}=this.node;if(!t)return;let{globalTapTarget:e,propagate:n}=this.node.props;this.unmount=a(t,(t,e)=>(vn(this.node,e,"Start"),(t,{success:e})=>vn(this.node,t,e?"End":"Cancel")),{useGlobalTarget:e,stopPropagation:!1===n?.tap})}unmount(){}}},focus:{Feature:class extends w{constructor(){super(...arguments),this.isActive=!1}onFocus(){let t=!1;try{t=this.node.current.matches(":focus-visible")}catch{t=!0}!t||!this.node.animationState||(this.node.animationState.setActive("whileFocus",!0),this.isActive=!0)}onBlur(){!this.isActive||!this.node.animationState||(this.node.animationState.setActive("whileFocus",!1),this.isActive=!1)}mount(){this.unmount=$(O(this.node.current,"focus",()=>this.onFocus()),O(this.node.current,"blur",()=>this.onBlur()))}unmount(){}}},hover:{Feature:class extends w{mount(){let{current:t}=this.node;t&&(this.unmount=i(t,(t,e)=>(gn(this.node,e,"Start"),t=>gn(this.node,t,"End"))))}unmount(){}}}},Cn=function(t,e){if(typeof Proxy>"u")return Oe;let n=new Map,r=(n,r)=>Oe(n,r,t,e);return new Proxy((t,e)=>r(t,e),{get:(i,o)=>"create"===o?r:(n.has(o)||n.set(o,Oe(o,void 0,t,e)),n.get(o))})}({...Be,...bn,...fn,...{layout:{ProjectionNode:N,MeasureLayout:pn}}},(t,e)=>e.isSVG??fe(t)?new D(e):new M(e,{allowProjection:t!==We}));import{useState as Mn}from"react";var kn=Cn;import{Fragment as Tn,jsx as An,jsxs as Ln}from"react/jsx-runtime";function Dn({items:t,defaultActiveId:e,activeId:n,edge:r="bottom",alignEnd:i=!1,onActiveChange:o,label:s="App navigation",moreLabel:a="More",backLabel:l="Back",className:u="",style:c}){let d=xt(),[h,m]=St({kind:"collapsed"}),[v,y]=St(e??t[0]?.id),[w,x]=St(null),E=Pt(null),P=Pt(null),S=Pt(r),b="left"===r||"right"===r;Et(()=>{let t=P.current;if(!t||!w)return;let e=t.getBoundingClientRect(),n=Math.max(8-e.left,Math.min(0,window.innerWidth-8-e.right)),r=Math.max(8-e.top,Math.min(0,window.innerHeight-8-e.bottom));t.style.left=`${w.x+n}px`,t.style.top=`${w.y+r}px`},[w]);let C=Pt(null),M=Pt(null),k=Pt(h),A=Pt("more"),D=Pt(!1),j=Pt(!1),V=Pt(!1),_=Pt(null),O=Pt(void 0),R=Pt(void 0),W=Pt(!1),N=Pt(!1),B=function(){!f.current&&g();let[t]=Mn(p.current);return t}(),H=n??v,U="collapsed"!==h.kind,G=t.filter(t=>!1!==t.showInBar),$=G.find(t=>"dismiss"===t.id),Y=G.filter(t=>"dismiss"!==t.id),X=t.filter(t=>t.children?.length);function z(){clearTimeout(O.current),x(null)}function q(){z(),clearTimeout(R.current),W.current=!1}function J(t,e,n=!1){clearTimeout(O.current);let i=E.current,o=M.current;if(!i||!o||U||j.current||V.current&&!n)return;let s=i.getBoundingClientRect(),a=t.getBoundingClientRect(),l={label:e,x:"left"===r?s.width+8:"right"===r?-8:a.left-s.left+a.width/2,y:"top"===r?s.height+8:"bottom"===r?-8:a.top-s.top+a.height/2};clearTimeout(R.current);let u=()=>{W.current=!0,x(l)};n||W.current?u():O.current=setTimeout(u,400)}function K(t,e,n){q(),U||(A.current=e,D.current=n),_.current="first",m(t)}function Q(t=!0,e=A.current){q(),V.current=!0,_.current=t&&D.current?e:null,m({kind:"collapsed"})}function Z(){"group"===h.kind&&(_.current=h.id,m({kind:"main"}))}function tt(t,e){let n=!!t.children?.length,r=H===t.id||!!t.children?.some(t=>t.id===H),i=!e&&t.keepOpenOnSelect,s=(e,n=!1)=>An(jn,{label:t.label,icon:n,reduced:!!B,children:e}),a=r&&t.activeIcon?t.activeIcon:t.icon,l=Ln(Tn,{children:[An("span",{className:"morphing-menu__icon","aria-hidden":"true",style:i?{display:"grid"}:void 0,children:i?s(a,!0):a}),!e&&An("span",{className:"morphing-menu__label",style:i?{display:"grid"}:void 0,children:i?s(t.label):t.label}),!e&&n&&An(In,{})]}),u={className:e?"morphing-menu__shortcut":"morphing-menu__row","data-menu-item":t.id,"aria-label":t.label,"aria-current":r?n?"true":"page":void 0,"aria-expanded":n?"group"===h.kind&&h.id===t.id:void 0,"aria-controls":n?`${d}-group-${t.id}`:void 0,onClick:e=>n?K({kind:"group",id:t.id},t.id,0===e.detail):function(t){y(t.id),o?.(t.id),U&&!t.keepOpenOnSelect?Q(!0,"group"===h.kind?h.id:t.id):q(),t.onSelect?.()}(t),onPointerEnter:n=>{e&&"mouse"===n.pointerType&&J(n.currentTarget,t.label)},onPointerLeave:z,onPointerDown:q,onFocus:n=>{e&&n.currentTarget.matches(":focus-visible")&&J(n.currentTarget,t.label,!0)},onBlur:z};return t.href&&!n?An("a",{href:t.href,...u,children:l},t.id):An(kn.button,{layout:!!e&&"position",transition:B?{duration:0}:T,type:"button",...u,children:l},t.id)}Et(()=>{let t=E.current,e=C.current,n=M.current;if(!t||!e||!n)return;let i=S.current!==r;S.current=r;let o=k.current;k.current=h;let s=[...t.querySelectorAll(".morphing-menu__panel")],a=s.find(t=>"false"===t.getAttribute("aria-hidden")),l=[],u=!1,c=t=>(l.push(t),t),d=()=>({width:a?.offsetWidth??n.offsetWidth,height:a?.offsetHeight??n.offsetHeight}),p=i||o.kind!==h.kind||"group"===o.kind&&"group"===h.kind&&o.id!==h.id,f="collapsed"===o.kind!=("collapsed"===h.kind),g=B||!p;if(g)(()=>{let t=d();e.style.width=`${t.width}px`,e.style.height=`${t.height}px`})();else if(f&&!U)c(F(e,d(),I));else if(f){let t=Math.min(n.offsetWidth,n.offsetWidth>250?280:200);c(F(e,{width:t,height:n.offsetHeight>52?32:28},L)).finished.then(()=>{u||c(F(e,d(),{...T,bounce:U?.24:.15}))}).catch(()=>{})}else c(F(e,d(),{...T,duration:.25,bounce:.1}));c(F(n,{opacity:U?0:1,scale:U&&!B?.8:1,filter:U&&!B?"blur(8px)":"blur(0px)"},{duration:g?0:U?.15:.22,delay:g||U?0:.08,...U?{}:{ease:"easeOut"}}));for(let t of s){let e=t===a;for(let[n,r]of[...t.querySelectorAll(".morphing-menu__row")].entries())e&&f&&!g&&Object.assign(r.style,{opacity:"0",transform:"translateY(48px)",filter:"blur(4px)"}),c(F(r,{opacity:e?1:0,y:e||B?0:16,filter:e||B?"blur(0px)":"blur(2px)"},{...T,duration:g?0:e?f?.4:.25:.12,bounce:f?.3:0,delay:!g&&e?(f?.2:0)+.02*n:0}))}let v=[...(U?a:n)?.querySelectorAll("[data-menu-item]")??[]],y=_.current;_.current=null,y&&(j.current=!0,(("first"===y?v[0]:v.find(t=>t.dataset.menuItem===y))??(U?void 0:v.find(t=>"more"===t.dataset.menuItem)))?.focus({preventScroll:!0}),j.current=!1);let w=()=>m(t=>({...t}));return window.addEventListener("resize",w),()=>{u=!0,l.forEach(t=>t.stop()),window.removeEventListener("resize",w)}},[h,B,r,t.length,G.length]),wt(()=>{if(!U)return;let t=t=>{t.target instanceof Node&&!t.composedPath().includes(E.current)&&Q(!1)};return document.addEventListener("pointerdown",t),()=>document.removeEventListener("pointerdown",t)},[U]),wt(()=>()=>{clearTimeout(O.current),clearTimeout(R.current)},[]);let et=Ln("button",{type:"button",className:"morphing-menu__row","data-menu-item":"close",onClick:()=>Q(!0,"more"),children:[An(pt,{"aria-hidden":"true"}),An("span",{className:"morphing-menu__label",children:"Close drawer"})]});return Ln("nav",{ref:E,"aria-label":s,className:["morphing-menu",u].filter(Boolean).join(" "),"data-view":h.kind,"data-edge":r,"data-vertical":b,"data-align-end":i,style:{"--mm-count":G.length+1,...c},onPointerMove:t=>{if(!V.current||"mouse"!==t.pointerType||!t.movementX&&!t.movementY)return;V.current=!1;let e=t.target instanceof Element?t.target.closest(".morphing-menu__shortcut"):null;e&&J(e,e.getAttribute("aria-label")??"")},onKeyDown:t=>{"Escape"===t.key&&(V.current=!0,q(),U&&(t.preventDefault(),t.stopPropagation(),"group"===h.kind?Z():Q()))},onBlur:t=>{t.relatedTarget instanceof Node&&t.currentTarget.contains(t.relatedTarget)||(U?t.relatedTarget instanceof Node&&Q(!1):N.current||q())},children:[Ln("div",{ref:C,className:"morphing-menu__shell",children:[Ln("div",{ref:M,className:"morphing-menu__bar","aria-hidden":U,inert:U,onPointerEnter:t=>{"mouse"===t.pointerType&&(N.current=!0,clearTimeout(R.current))},onPointerLeave:t=>{"mouse"===t.pointerType&&(N.current=!1,z(),clearTimeout(R.current),R.current=setTimeout(()=>{W.current=!1},300))},children:[Y.map(t=>tt(t,!0)),An(kn.button,{layout:"position",transition:B?{duration:0}:T,type:"button",className:"morphing-menu__shortcut","data-menu-item":"more","aria-label":a,"aria-expanded":U,"aria-controls":`${d}-main`,onClick:t=>K({kind:"main"},"more",0===t.detail),onPointerEnter:t=>{"mouse"===t.pointerType&&J(t.currentTarget,a)},onPointerLeave:z,onPointerDown:q,onBlur:z,onFocus:t=>{t.currentTarget.matches(":focus-visible")&&J(t.currentTarget,a,!0)},children:An(ht,{"aria-hidden":"true"})}),$&&tt($,!0)]}),Ln("div",{id:`${d}-main`,className:"morphing-menu__panel","aria-hidden":"main"!==h.kind,inert:"main"!==h.kind,children:[[...t].sort((t,e)=>(t.expandedOrder??0)-(e.expandedOrder??0)).map(t=>tt(t,!1)),et]}),X.map(t=>{let e="group"===h.kind&&h.id===t.id;return Ln("div",{id:`${d}-group-${t.id}`,className:"morphing-menu__panel","aria-label":t.label,"aria-hidden":!e,inert:!e,children:[Ln("button",{type:"button",className:"morphing-menu__row","data-menu-item":"back",onClick:Z,children:[An(gt,{"aria-hidden":"true"}),An("span",{children:l})]}),t.children.map(t=>tt(t,!1)),et]},t.id)})]}),w&&!U&&An("div",{ref:P,className:"morphing-menu__tooltip","aria-hidden":"true",style:{left:w.x,top:w.y},children:w.label})]})}function In(){return An(yt,{className:"morphing-menu__chevron","aria-hidden":"true"})}function jn({label:t,icon:e,reduced:n,children:r}){let i=Pt(null),o=Pt(null);return Et(()=>{let r=i.current,s=o.current;if(o.current={label:t,node:r.cloneNode(!0)},!s||s.label===t||n)return;let a=s.node;a.setAttribute("aria-hidden","true"),r.parentElement.append(a);let l={duration:200,easing:"cubic-bezier(.22,1,.36,1)"},u=r.animate([{opacity:0,transform:e?"scale(.7)":"translateY(4px)",filter:"blur(2px)"},{opacity:1,transform:"none",filter:"blur(0px)"}],l),c=a.animate([{opacity:1,transform:"none",filter:"blur(0px)"},{opacity:0,transform:e?"scale(.7)":"translateY(-4px)",filter:"blur(2px)"}],l);return c.finished.then(()=>a.remove()).catch(()=>{}),()=>{u.cancel(),c.cancel(),a.remove()}},[t,e,n]),An("span",{ref:i,style:{gridArea:"1 / 1",display:"flex",alignItems:"center"},children:r})}function Vn(t){return"glyph"in t?ct("span",{style:{display:"contents"},dangerouslySetInnerHTML:{__html:ot[t.glyph]}}):ct("span",{className:"review-avatar"},t.user?.avatarUrl?ct("img",{src:t.user.avatarUrl,alt:"",referrerPolicy:"no-referrer"}):t.user?st(t.user.name):Vn({glyph:"person"}))}var _n=t=>ct(Dn,{...t,items:t.items.map(t=>({...t,icon:Vn(t.icon)}))});function On(t,e){t.replaceChildren();let n=lt(t);return ut(()=>n.render(_n(e))),{render:t=>n.render(_n(t)),unmount:()=>n.unmount()}}export{On as mountToolbar};