@hazem3500/komo 0.9.16 → 0.9.18

package/dist/react.js

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

package/dist/setup.js

@@ -1 +1 @@
-import{a as o,c as n}from"./chunk-65SLG7FY.js";import"./chunk-URGMAMH5.js";import"./chunk-DH22G2S5.js";import"./chunk-53M6AOAX.js";import"./chunk-WGISPOJV.js";import"./chunk-ANKCS6NI.js";function r(r){return(s={})=>n(o({...r,...s}))}export{r as defineKomo};
+import{a as o,c as n}from"./chunk-57AHSROT.js";import"./chunk-URGMAMH5.js";import"./chunk-DH22G2S5.js";import"./chunk-53M6AOAX.js";import"./chunk-WGISPOJV.js";import"./chunk-ANKCS6NI.js";function r(r){return(s={})=>n(o({...r,...s}))}export{r as defineKomo};

package/dist/tag-editor-MMAMOEI4.js

@@ -0,0 +1 @@
+var e,t=12,n=/^[\p{L}\p{N}][\p{L}\p{N} ._-]{0,31}$/u,a='\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-options {\n  position: fixed; z-index: 40; pointer-events: auto; 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.tag-popover { position: fixed; z-index: 40; pointer-events: auto; width: 252px; box-sizing: border-box; padding: 8px; border-radius: 12px; background: #292929; color: #ddd; box-shadow: 0 0 0 1px #ffffff18, 0 12px 32px #0007; font-family: inherit; font-size: 12px; line-height: 1.4; overflow: auto; }\n.tag-popover .tag-input { box-sizing: border-box; width: 100%; height: 32px; padding: 0 9px; border: 1px solid #ffffff18; border-radius: 7px; outline: none; background: #ffffff07; color: #eee; font: inherit; }\n.tag-popover .tag-input:focus { border-color: #ffffff50; }\n.tag-popover .tag-input:focus-visible { outline: 2px solid var(--accent, #bda6ef); outline-offset: 1px; }\n.tag-popover .tag-input[aria-invalid=true] { border-color: #f28b82; }\n.tag-popover-choices { display: grid; gap: 2px; max-height: 200px; overflow: auto; margin-top: 6px; }\n.tag-popover-choice { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 32px; width: 100%; box-sizing: border-box; border: 0; padding: 6px 8px; border-radius: 7px; background: none; color: #ddd; font: inherit; text-align: left; cursor: pointer; }\n.tag-popover-choice:hover,.tag-popover-choice:focus-visible { background: #ffffff0d; outline: 1px solid #ffffff40; outline-offset: -1px; }\n.tag-popover-choice[aria-pressed=true] { color: var(--accent, #bda6ef); }\n.tag-popover-choice:disabled { opacity: .4; cursor: default; }\n.tag-popover-check { width: 14px; flex: none; }\n.tag-popover-label { min-width: 0; overflow-wrap: anywhere; }\n.tag-popover-note { color: #aaa; padding: 8px; font-size: 11px; }\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';function o(e){let t=e.trim().replace(/^#/,"").toLocaleLowerCase("en-US");return n.test(t)?t:null}function r(t,n){if(n.trigger)return function(t,n,r){let i,l,d=[...n.tags],s=0,p=`komo-tag-popover-${Math.random().toString(36).slice(2)}`,c=(t=!1)=>{cancelAnimationFrame(s),l?.abort(),i?.remove(),i=void 0,r.setAttribute("aria-expanded","false"),e===g&&(e=void 0),t&&r.isConnected&&r.focus({preventScroll:!0})},g=()=>c(),u=()=>{let e=document.createElement("style");e.textContent=a;let n=document.createElement("div");n.className="tag-row",n.setAttribute("role","group"),n.setAttribute("aria-label","Tags");for(let e of d){let t=document.createElement("span");t.className="tag-chip",t.title=e,t.append(Object.assign(document.createElement("span"),{textContent:`#${e}`})),n.append(t)}t.replaceChildren(e,n),t.hidden=!d.length;let o=d.length?"Manage tags":"Add tag";r.title=o,r.setAttribute("aria-label",o)};r.setAttribute("aria-haspopup","dialog"),r.setAttribute("aria-controls",p),r.setAttribute("aria-expanded","false"),r.onclick=()=>{if(i)return c(!0);let a=t.getRootNode(),f=a instanceof ShadowRoot?a:document.body;e?.(),e=g,l=new AbortController;let m=l.signal;i=document.createElement("div"),i.className="tag-popover",i.id=p,i.setAttribute("role","dialog"),i.setAttribute("aria-label","Manage tags");let h=document.createElement("input");h.className="tag-input",h.type="search",h.placeholder="Search or create tag…",h.maxLength=33,h.autocomplete="off",h.setAttribute("aria-label","Search or create tag");let b=document.createElement("div");b.className="tag-popover-choices",b.setAttribute("role","group"),b.setAttribute("aria-label","Tag choices");let x=document.createElement("div");x.className="tag-popover-note",x.setAttribute("role","status"),i.append(h,b,x),f.append(i),r.setAttribute("aria-expanded","true");let v=(e,t=!1)=>{if(d.includes(e))d=d.filter(t=>t!==e),n.onRemove(e);else{if(!(d.length<12))return;d=[...d,e].sort(),n.onAdd(e)}t&&(h.value=""),u(),w(e),t&&h.focus({preventScroll:!0})},w=e=>{let t=h.value.trim().replace(/^#/,"").toLocaleLowerCase("en-US"),a=o(h.value),r=[...new Set([...d,...n.suggestions])],i=r.filter(e=>e.includes(t)).sort((e,n)=>Number(d.includes(n))-Number(d.includes(e))||Number(n.startsWith(t))-Number(e.startsWith(t))||e.localeCompare(n));b.replaceChildren();let l=(t,n)=>{let a=document.createElement("button");a.type="button",a.className="tag-popover-choice",a.dataset.tag=t,a.setAttribute("aria-pressed",String(d.includes(t))),a.disabled=!d.includes(t)&&d.length>=12,a.append(Object.assign(document.createElement("span"),{className:"tag-popover-check",textContent:d.includes(t)?"✓":n?"+":""}),Object.assign(document.createElement("span"),{className:"tag-popover-label",textContent:`${n?"Create ":""}#${t}`})),a.addEventListener("click",()=>v(t,n)),b.append(a),e===t&&a.focus({preventScroll:!0})};i.forEach(e=>l(e,!1)),a&&!r.includes(a)&&l(a,!0),x.textContent=d.length>=12?"Maximum 12 tags. Remove one to add another.":b.children.length?`${d.length} of 12 tags selected`:t?"Use letters, numbers, spaces, . _ or -":"Type to create a tag"};h.addEventListener("input",()=>{h.removeAttribute("aria-invalid"),w()}),i.addEventListener("keydown",e=>{if(e.stopPropagation(),e.isComposing)return;let t=[...b.querySelectorAll("button:not(:disabled)")],n=a instanceof ShadowRoot?a.activeElement:document.activeElement;if("Escape"===e.key)e.preventDefault(),c(!0);else if("ArrowDown"===e.key||"ArrowUp"===e.key){e.preventDefault();let a=t.indexOf(n);("ArrowDown"===e.key?t[a+1]??h:a>0?t[a-1]:h)?.focus({preventScroll:!0})}else if("Enter"===e.key&&e.target===h){e.preventDefault();let t=o(h.value);t&&!d.includes(t)?v(t,!0):h.value.trim()&&!t&&h.setAttribute("aria-invalid","true")}});let y=e=>{let t=e.composedPath();!t.includes(i)&&!t.includes(r)&&c()};document.addEventListener("pointerdown",y,{capture:!0,signal:m}),document.addEventListener("focusin",y,{signal:m}),document.addEventListener("keydown",e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),c(!0))},{capture:!0,signal:m});let A=()=>{if(!r.isConnected||!t.isConnected)return c();let e=r.getBoundingClientRect();if(e.bottom<0||e.top>innerHeight)return c();let n=r.closest(".dialog")?.getBoundingClientRect(),a=Math.max(8,(n?.left??0)+8),o=Math.min(innerWidth-8,(n?.right??innerWidth)-8),l=Math.max(0,Math.min(252,o-a));i.style.width=`${l}px`,i.style.maxHeight=`${Math.max(80,innerHeight-16)}px`;let d=i.offsetHeight,p=innerHeight-e.bottom-8,g=d+6<=p||e.top<p?e.bottom+6:e.top-d-6;i.style.left=`${Math.max(a,Math.min(e.right-l,o-l))}px`,i.style.top=`${Math.max(8,Math.min(g,innerHeight-d-8))}px`,s=requestAnimationFrame(A)};w(),A(),h.focus({preventScroll:!0})},u()}(t,n,n.trigger);let r=[...n.tags],i=!1,l=!1,d=(...e)=>{l=!0,t.replaceChildren(...e),l=!1},s=`komo-tags-${Math.random().toString(36).slice(2)}`,p=null,c=0,g=()=>{cancelAnimationFrame(c),p?.remove(),p=null};!function e(u=!1){if(g(),t.hidden=!!n.trigger&&!r.length&&!i,n.trigger){let e=r.length?"Manage tags":"Add tag";n.trigger.title=e,n.trigger.setAttribute("aria-label",e),n.trigger.setAttribute("aria-expanded",String(i))}let f=document.createElement("style");f.textContent=a;let m=document.createElement("div");m.className="tag-row",m.setAttribute("role","group"),m.setAttribute("aria-label","Tags");for(let a of r){let o=document.createElement("span");o.className="tag-chip";let l=document.createElement("span");l.textContent=`#${a}`;let d=document.createElement("button");d.type="button",d.textContent="×",d.setAttribute("aria-label",`Remove tag ${a}`),d.addEventListener("pointerdown",e=>e.preventDefault()),d.addEventListener("click",()=>{let o=t.getRootNode()instanceof ShadowRoot?t.getRootNode().activeElement===d:document.activeElement===d,l=r.indexOf(a);r=r.filter(e=>e!==a),n.onRemove(a),e(i),o&&!i&&(t.querySelectorAll(".tag-chip button")[Math.min(l,r.length-1)]??n.trigger??t.querySelector(".tag-add"))?.focus()}),o.append(l,d),m.append(o)}if(i){let a=document.createElement("input");a.className="tag-input",a.placeholder="Add tag…",a.maxLength=33,a.autocomplete="off",a.setAttribute("role","combobox"),a.setAttribute("aria-label","Add tag"),a.setAttribute("aria-autocomplete","list"),a.setAttribute("aria-controls",s);let h=document.createElement("div");h.className="tag-options",h.id=s,h.setAttribute("role","listbox"),h.setAttribute("aria-label","Tags");let b=[],x=-1,v=t=>{!r.includes(t)&&r.length<12&&(r=[...r,t].sort(),n.onAdd(t)),i=r.length<12,e(i),i||n.trigger?.focus({preventScroll:!0})},w=e=>{x=e,h.querySelectorAll("[role=option]").forEach((t,n)=>{t.setAttribute("aria-selected",String(n===e)),n===e&&t.scrollIntoView?.({block:"nearest"})}),e>=0?a.setAttribute("aria-activedescendant",`${s}-${e}`):a.removeAttribute("aria-activedescendant")},y=()=>{let e=a.value.trim().replace(/^#/,"").toLocaleLowerCase("en-US"),t=o(a.value),i=n.suggestions.filter(e=>!r.includes(e));b=(e?[...i.filter(t=>t.startsWith(e)),...i.filter(t=>!t.startsWith(e)&&t.includes(e))]:i).map(e=>({tag:e,create:!1})),t&&!r.includes(t)&&!i.includes(t)&&b.push({tag:t,create:!0}),h.replaceChildren(...b.map(({tag:e,create:t},n)=>{let a=document.createElement("div");return a.id=`${s}-${n}`,a.className="tag-option",a.setAttribute("role","option"),t&&a.append(Object.assign(document.createElement("span"),{className:"tag-option-hint",textContent:"Create"})),a.append(Object.assign(document.createElement("span"),{textContent:`#${e}`})),a.addEventListener("click",()=>v(e)),a.addEventListener("pointermove",()=>w(n)),a})),b.length||h.append(Object.assign(document.createElement("div"),{className:"tag-option-empty",textContent:e?r.includes(t??"")?"Already added":"Use letters, numbers, spaces, . _ or -":"Type to create a tag"})),a.setAttribute("aria-expanded",String(b.length>0)),w(e&&b.length?0:-1)};a.addEventListener("input",y),a.addEventListener("keydown",t=>{if(t.stopPropagation(),!t.isComposing)if("ArrowDown"===t.key||"ArrowUp"===t.key){if(t.preventDefault(),!b.length)return;let e=b.length-1;w("ArrowDown"===t.key?x>=e?0:x+1:x<=0?e:x-1)}else if("Enter"===t.key||","===t.key)if(t.preventDefault(),x>=0&&b[x])v(b[x].tag);else if(a.value.trim()){let e=o(a.value);e?v(e):a.setAttribute("aria-invalid","true")}else i=!1,e(),n.trigger?.focus({preventScroll:!0});else if("Escape"===t.key)t.preventDefault(),i=!1,e(),n.trigger?.focus({preventScroll:!0});else if("Backspace"===t.key&&!a.value&&r.length){let t=r.at(-1);r=r.slice(0,-1),n.onRemove(t),e(!0)}}),a.addEventListener("input",()=>a.removeAttribute("aria-invalid"));let A=!1;h.addEventListener("pointerdown",e=>{e.preventDefault(),A=!0}),a.addEventListener("blur",()=>{if(A)return A=!1,void requestAnimationFrame(()=>a.isConnected&&a.focus({preventScroll:!0}));l||!a.isConnected||!i||(i=!1,e())}),m.append(a),d(f,m);let E=t.getRootNode();(E instanceof ShadowRoot?E:document.body).append(h),p=h;let k=()=>{if(!a.isConnected)return g();let e=a.getBoundingClientRect(),t=h.offsetHeight,n=window.innerHeight-e.bottom-8,o=t+4<=n||e.top-8<n?e.bottom+4:e.top-4-t;h.style.top=`${Math.max(8,o)}px`,h.style.left=`${Math.max(8,Math.min(e.left,window.innerWidth-h.offsetWidth-8))}px`,c=requestAnimationFrame(k)};return y(),k(),void((u||i)&&a.focus({preventScroll:!0}))}if(!n.trigger&&r.length<12){let t=document.createElement("button");t.type="button",t.className="tag-add",t.textContent=r.length?"+":"+ Add tag",t.setAttribute("aria-label","Add tag"),t.addEventListener("click",()=>{i=!0,e(!0)}),m.append(t)}d(f,m)}()}export{t as MAX_TAGS,o as normalizeTag,r as tagEditor};

package/dist/types.d.ts

@@ -134,9 +134,10 @@ export interface CommentsOptions {
     pickRoots?: () => Element[];
     /**
      * Frame view scales body-level portals (dialogs, overlays, toasts) with the
-     * page. By default it frames each position: fixed child of body without an
-     * inline transform; script-positioned popovers already follow their framed
-     * anchors. `include` overrides that choice per body child.
+     * page, including fixed descendants of portal wrappers. Script-positioned
+     * popovers keep their viewport placement while their contents scale.
+     * `include` overrides the default per body child; true maps the whole child
+     * through the frame, and false leaves its subtree alone.
      */
     frame?: {
         include?(element: HTMLElement): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazem3500/komo",
-  "version": "0.9.16",
+  "version": "0.9.18",
   "description": "Point, area, and threaded comments for website branches.",
   "type": "module",
   "license": "MIT",