@hazem3500/komo 0.9.1 → 0.9.3

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

@@ -1 +0,0 @@
-import{a as e,d as t,e as n,g as i,h as o,i as a,j as r,k as s,l as d,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,w as x,x as v}from"./chunk-JC6FXUNO.js";import"./chunk-I7AUKTXE.js";var y=new Map,w=new WeakMap,E=new WeakSet,C=new WeakMap;function $(e){return void 0===e?"unset":JSON.stringify(e)??"unset"}var S=new Map;function P(e){if(e)for(let[e,n]of y){let i=t(e);i&&(S.set(e,i.props),i.setProps({...i.props,...Object.fromEntries(n)}))}else for(let[e,n]of S)t(e)?.setProps(n);e||S.clear(),s(e)}function N(e){return!!y.get(e)?.size}function A(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=y.get(e);return r||y.set(e,r=new Map),r.has(i)||r.set(i,a),{propName:i,before:a}}function z(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 M(e,t,n,i){if(n===i){let i=y.get(e);return void(i?.get(t)===n&&!(w.get(e)??[]).some(e=>e.propName===t)&&(i.delete(t),i.size||y.delete(e)))}let o=w.get(e);o||w.set(e,o=[]),o.push({propName:t,before:n,after:i})}function L(e,t,n){z(e,t,n);let i=y.get(e);i?.get(t)===n&&!(w.get(e)??[]).some(e=>e.propName===t)&&(i.delete(t),i.size||y.delete(e))}function T(e){return!!e&&!!w.get(e)?.length}function R(e){let n=y.get(e),o=t(e);if(!n?.size||!o)return;let a=i(e),r=[...n].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}: ${$(t)} → ${$(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 q(e){return[R(e),v(e)].filter(e=>!!e).join("\n\n")||void 0}function D(e,n,i){C.get(e)?.abort();let o=new AbortController;C.set(e,o),e.addEventListener("click",e=>{let o=n();if(!o)return;let a=v(o);!t(o)&&!a||(e.stopImmediatePropagation(),i(o,q(o)))},{capture:!0,signal:o.signal})}function j(e){return b(e)}function O(e){return h(e)}function V(e){k(e)}function B(e){x(e)}function H(e){if(!e||E.has(e))return;let t=document.createElement("style");t.textContent=".design-react-source{display:block;padding:0 0 8px;color:#77736f;font-size:10px;overflow-wrap:anywhere}.design-react-inside{padding:10px 12px}.design-react-inside button{padding:0;border:0;background:none;color:#bda6ef;font:inherit;cursor:pointer}.design-react-inside button:hover{text-decoration:underline}.design-react-field.design-field{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 8px;height:auto;min-height:28px;margin-top:4px;background:none;box-shadow:none;color:#898680;font-size:11px}.design-react-field>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-react-field.design-field>:is(input,select){box-sizing:border-box;width:100%;min-width:0;height:28px;padding:0 8px;border:0;border-radius:6px;background:#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}",e.append(t),E.add(e)}function F(e,t,n,a){let r=i(e);if(!r)return null;let s=m(r,t);if(!s.length)return null;H(a);let d=document.createElement("span");d.className="design-token-binding",d.setAttribute("data-mode","custom");let c=document.createElement("span");c.className="design-token-icon",c.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 s){let t=document.createElement("option"),n=o(r,e);t.value=e.path,t.textContent=n?`${e.path} · ${n}`:e.path,k.append(t)}let w=()=>{let n=u(r,e,t),i=n?null:g(r,e,t),o="token"===n?.mode?s.find(e=>e.path===n.tokenPath):void 0,a=o??i?.token;k.value=a?.path??"custom",h.textContent=a?.path??"";let l=n?.declaredPath,p=o?"token":i?"connected":l?"override":"custom";d.dataset.mode=p,d.parentElement?.setAttribute("data-token-mode",p),x.textContent="token"===p?l&&l!==o?.path?`Rebound from ${l} · preview`:`Linked to ${o?.path} · preview`:"connected"===p?"Connected "+("inline"===i?.origin?"inline":"from stylesheet"):"override"===p?`Custom override · was ${l}`:"",k.title=x.textContent||"Choose a token"},E=new MutationObserver(w);E.observe(e,{attributes:!0,attributeFilter:["style"]});let C=new MutationObserver(()=>{d.isConnected||(E.disconnect(),C.disconnect())});return C.observe(d.ownerDocument,{childList:!0,subtree:!0}),k.addEventListener("change",()=>{let i=e.style.getPropertyValue(t),o=s.find(e=>e.path===k.value),a=u(r,e,t);if(o&&a&&o.path===a.declaredPath)f(r,e,t),n(i,e.style.getPropertyValue(t),o.path);else if(o)(o.path!==g(r,e,t)?.token.path||a)&&l(r,e,o,t,{recordHistory:!1})&&n(i,e.style.getPropertyValue(t),o.path);else{let o=d.parentElement?.querySelector("[data-property]")?.value??getComputedStyle(e).getPropertyValue(t).trim(),a=/^-?[\d.]+$/.test(o.trim())&&!/weight|line/.test(t)?`${o.trim()}px`:o;p(r,e,t,a),e.style.setProperty(t,a),n(i,a)}w()}),b.addEventListener("click",()=>{let e=s.find(e=>e.path===k.value),t=d.parentElement?.querySelector("input[data-property]"),n=e&&o(r,e);t&&n&&(t.value="number"===t.type?String(parseFloat(n)):n),k.value="custom",k.dispatchEvent(new Event("change")),d.parentElement?.querySelector("[data-property]")?.focus()}),d.append(h,k,c,b,x),queueMicrotask(w),w(),d}function I(e){let t=i(e);return new Set(t?.elementBindings.get(e)?.keys()??[])}function U(e,t,n,i,o,a,r){for(let s of t){let t=[...n.querySelectorAll("[data-field-property]")].find(e=>e.dataset.fieldProperty===s.property);if(!t||t.querySelector(".design-token-binding"))continue;let d=t.querySelector("[data-property]");if(!d)continue;let l=F(e,s.property,n=>{i(s,d,n),a&&(d.value=a(s,e));let o=t.querySelector('input[type="range"],input[type="color"]');o&&(o.value="color"===s.kind&&r?r(d.value):d.value)},o);l&&t.append(l)}}var W=!1;function _(e,t,n,o){let a=i(e);if(!a||!a.tokens.length)return null;H(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 s=document.createElement("summary");s.textContent="Shared theme";let d=document.createElement("small");d.className="design-react-source",d.textContent="Changes every element using these tokens",r.append(s,d);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,i]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 i)r.append(K(a,o,t,n,e))}return r}function K(e,t,n,i,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} · ${a(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,o,a)=>{let s=null!==a&&r(e,t,a.trim(),g);n.setAttribute("aria-invalid",String(!s)),s&&(g=!0,k(),i())},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 i=o(e,t);m.value=i,h&&(h.value=n.toHex(i)),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",()=>{d(e,t),b(),i()}),b(),l.append(p,f,x),l}function J(e,t,n){let o=i(e);o&&p(o,e,t,n)}function X(e,t){let n=i(e);n&&c(n,e,t)}function G(e){let n=w.get(e)?.pop(),i=t(e);if(!n||!i)return;i.setProps({...i.props,[n.propName]:n.before});let o=y.get(e);if(o){let t=o.get(n.propName);Object.is(t,n.before)&&o.delete(n.propName),o.size||y.delete(e)}}function Q(e){let n=y.get(e),i=t(e);!n?.size||!i||(i.setProps({...i.props,...Object.fromEntries(n)}),y.delete(e),w.delete(e))}function Y(t,n,i,o,a,r){let s=n.definition.props.find(e=>e.name===i);if(!s||!e(s,o))return a.setAttribute("aria-invalid","true"),!1;a.removeAttribute("aria-invalid");let d=n.props[i];if(Object.is(d,o))return!0;let l=y.get(t);l||y.set(t,l=new Map);let p=l.has(i)?l.get(i):d;Object.is(p,o)?l.delete(i):l.set(i,p),l.size||y.delete(t);let c=w.get(t);return c||w.set(t,c=[]),c.push({propName:i,before:d,after:o}),n.setProps({...n.props,[i]:o}),r(),!0}function Z(e,o,a,r){let s=t(e);if(!s)return function(e,t,i){let o=n(e);if(!o)return null;H(i);let a=document.createElement("small");if(a.className="design-react-source design-react-group design-react-inside",a.append(`Inside ${o.component.definition.name}`),t){let e=document.createElement("button");e.type="button",e.textContent="Select component",e.addEventListener("click",()=>t(o.root)),a.append(" · ",e)}return a}(e,r,a);H(a);let d=document.createElement("details");d.className="design-group design-react-group",d.open=!0;let l=document.createElement("summary");l.textContent="Properties",d.append(l);let p=document.createElement("small");p.className="design-react-source",p.textContent=`${s.definition.name} · ${s.definition.source}:${s.definition.line}`,d.append(p);for(let t of s.definition.props){let n=t.styleProperty,a=document.createElement("label");a.className="design-field design-react-field";let r=document.createElement("span");r.textContent=t.name;let l,p=s.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",`${s.definition.name} ${t.name}`),"unsupported"===t.kind)l=document.createElement("input"),l.disabled=!0,l.value=`Read only · ${t.typeLabel}`,l.setAttribute("aria-label",`${s.definition.name} ${t.name}, read only`),a.title=`Komo does not edit ${t.typeLabel} props.`;else{let n=()=>{let n=l instanceof HTMLInputElement&&"checkbox"===l.type?l.checked:l.value,i=n;if("number"===t.kind)i=""===String(n).trim()?void 0:Number(n);else if("enum"===t.kind){let e=(t.values??[]).find(e=>String(e)===n);i=""!==n||t.required?e:void 0}else"boolean"===t.kind&&(i=!0===n);Y(e,s,t.name,i,l,o)};l.addEventListener("change",n)}a.append(r,l);let c=document.createElement("small");if(c.className="design-react-type",c.textContent=`${t.typeLabel}${t.required?" · required":" · optional"}`,a.append(c),a.title||=c.textContent,"string"===t.kind&&n){let r=i(e),d=r?m(r,n):[];if(d.length){let i=document.createElement("span");i.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 d){let t=document.createElement("option");t.value=e.path,t.textContent=e.path,p.append(t)}let u=()=>{let e=d.find(e=>s.props[t.name]===`var(${e.cssVariable})`);p.value=e?.path??"custom",i.dataset.mode=e?"token":"custom"};p.addEventListener("change",()=>{let i=d.find(e=>e.path===p.value),a=i?`var(${i.cssVariable})`:"string"==typeof s.props[t.name]&&String(s.props[t.name]).startsWith("var(")?e.ownerDocument.defaultView?.getComputedStyle(e).getPropertyValue(n).trim()??"":"string"==typeof s.props[t.name]?s.props[t.name]:"";Y(e,s,t.name,a,l,o)&&u()}),i.append(r,p),a.append(i),u()}}d.append(a)}return d}export{U as attachStyleTokenControls,A as beginReactTextEdit,j as canUndoDesignTokenEdit,T as canUndoReactProp,L as cancelReactTextEdit,_ as createDesignThemePanel,F as createElementTokenControl,Z as createReactPropsPanel,M as finishReactTextEdit,O as hasDesignTokenEdit,N as hasReactPropChanges,D as installCommentCapture,J as noteDesignTokenOverride,z as previewReactTextEdit,q as proposedDesignChanges,R as proposedReactChanges,B as resetDesignTokenEdits,Q as resetReactProps,P as showDesignBefore,X as syncDesignTokenBinding,I as tokenBoundProperties,V as undoDesignTokenEdit,G as undoReactProp};

package/dist/tag-editor-ZA7NLPOJ.js

@@ -1 +0,0 @@
-import"./chunk-I7AUKTXE.js";var t=12,e=/^[\p{L}\p{N}][\p{L}\p{N} ._-]{0,31}$/u;function n(t){let n=t.trim().replace(/^#/,"").toLocaleLowerCase("en-US");return e.test(n)?n:null}function a(t,e){let a=[...e.tags],o=!1,i=!1,r=(...e)=>{i=!0,t.replaceChildren(...e),i=!1},l=`komo-tags-${Math.random().toString(36).slice(2)}`,d=null,p=0,s=()=>{cancelAnimationFrame(p),d?.remove(),d=null};!function c(g=!1){s();let u=document.createElement("style");u.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/* A floating menu attached to komo\'s root, so no container can clip it. */\n.tag-options {\n  position: fixed; z-index: 40; display: grid; gap: 1px; width: 220px; max-height: 220px; overflow: auto;\n  padding: 4px; border-radius: 10px; background: #2a2a2a; box-shadow: 0 0 0 1px #ffffff14, 0 12px 32px #0007;\n  font-size: 12px;\n}\n.tag-options:empty { display: none; }\n.tag-option {\n  display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; border-radius: 6px;\n  color: #ddd; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;\n}\n.tag-option[aria-selected="true"] { background: #ffffff14; color: #fff; }\n.tag-option-hint, .tag-option-empty { color: #858585; }\n.tag-option-empty { padding: 6px 8px; }\n/* The tag row grows when the picker opens, instead of spilling over the text above it. */\n.new-comment-composer .draft-body:has(.tag-slot) { grid-template-rows: minmax(28px, auto) minmax(28px, auto); }\n.new-comment-composer .draft-body .tag-slot { grid-row: 2; grid-column: 2; align-self: start; min-width: 0; padding-top: 2px; }\n.new-comment-composer .draft-body:has(.tag-slot) .send { align-self: start; }\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: 8px 16px 12px 48px; }\n';let f=document.createElement("div");f.className="tag-row",f.setAttribute("role","group"),f.setAttribute("aria-label","Tags");for(let t of a){let n=document.createElement("span");n.className="tag-chip";let o=document.createElement("span");o.textContent=`#${t}`;let i=document.createElement("button");i.type="button",i.textContent="×",i.setAttribute("aria-label",`Remove tag ${t}`),i.addEventListener("click",()=>{a=a.filter(e=>e!==t),e.onRemove(t),c()}),n.append(o,i),f.append(n)}if(o){let m=document.createElement("input");m.className="tag-input",m.placeholder="Add tag…",m.maxLength=33,m.autocomplete="off",m.setAttribute("role","combobox"),m.setAttribute("aria-label","Add tag"),m.setAttribute("aria-autocomplete","list"),m.setAttribute("aria-controls",l);let x=document.createElement("div");x.className="tag-options",x.id=l,x.setAttribute("role","listbox"),x.setAttribute("aria-label","Tags");let h=[],b=-1,w=t=>{!a.includes(t)&&a.length<12&&(a=[...a,t].sort(),e.onAdd(t)),o=a.length<12,c(o)},v=t=>{b=t,x.querySelectorAll("[role=option]").forEach((e,n)=>{e.setAttribute("aria-selected",String(n===t)),n===t&&e.scrollIntoView?.({block:"nearest"})}),t>=0?m.setAttribute("aria-activedescendant",`${l}-${t}`):m.removeAttribute("aria-activedescendant")},y=()=>{let t=m.value.trim().replace(/^#/,"").toLocaleLowerCase("en-US"),o=n(m.value),i=e.suggestions.filter(t=>!a.includes(t));h=(t?[...i.filter(e=>e.startsWith(t)),...i.filter(e=>!e.startsWith(t)&&e.includes(t))]:i).map(t=>({tag:t,create:!1})),o&&!a.includes(o)&&!i.includes(o)&&h.push({tag:o,create:!0}),x.replaceChildren(...h.map(({tag:t,create:e},n)=>{let a=document.createElement("div");return a.id=`${l}-${n}`,a.className="tag-option",a.setAttribute("role","option"),e&&a.append(Object.assign(document.createElement("span"),{className:"tag-option-hint",textContent:"Create"})),a.append(Object.assign(document.createElement("span"),{textContent:`#${t}`})),a.addEventListener("pointerdown",t=>t.preventDefault()),a.addEventListener("click",()=>w(t)),a.addEventListener("pointermove",()=>v(n)),a})),h.length||x.append(Object.assign(document.createElement("div"),{className:"tag-option-empty",textContent:t?a.includes(o??"")?"Already added":"Use letters, numbers, spaces, . _ or -":"Type to create a tag"})),m.setAttribute("aria-expanded",String(h.length>0)),v(t&&h.length?0:-1)};m.addEventListener("input",y),m.addEventListener("keydown",t=>{if(t.stopPropagation(),!t.isComposing)if("ArrowDown"===t.key||"ArrowUp"===t.key){if(t.preventDefault(),!h.length)return;let e=h.length-1;v("ArrowDown"===t.key?b>=e?0:b+1:b<=0?e:b-1)}else if("Enter"===t.key||","===t.key)if(t.preventDefault(),b>=0&&h[b])w(h[b].tag);else if(m.value.trim()){let t=n(m.value);t?w(t):m.setAttribute("aria-invalid","true")}else o=!1,c();else if("Escape"===t.key)t.preventDefault(),o=!1,c();else if("Backspace"===t.key&&!m.value&&a.length){let t=a.at(-1);a=a.slice(0,-1),e.onRemove(t),c(!0)}}),m.addEventListener("input",()=>m.removeAttribute("aria-invalid")),m.addEventListener("blur",()=>{i||!m.isConnected||!o||(o=!1,c())}),f.append(m),r(u,f);let A=t.getRootNode();(A instanceof ShadowRoot?A:document.body).append(x),d=x;let k=()=>{if(!m.isConnected)return s();let t=m.getBoundingClientRect(),e=x.offsetHeight,n=window.innerHeight-t.bottom-8,a=e+4<=n||t.top-8<n?t.bottom+4:t.top-4-e;x.style.top=`${Math.max(8,a)}px`,x.style.left=`${Math.max(8,Math.min(t.left,window.innerWidth-x.offsetWidth-8))}px`,p=requestAnimationFrame(k)};return y(),k(),void((g||o)&&m.focus({preventScroll:!0}))}if(a.length<12){let t=document.createElement("button");t.type="button",t.className="tag-add",t.textContent=a.length?"+":"+ Add tag",t.setAttribute("aria-label","Add tag"),t.addEventListener("click",()=>{o=!0,c(!0)}),f.append(t)}r(u,f)}()}export{t as MAX_TAGS,n as normalizeTag,a as tagEditor};