@hazem3500/komo 0.0.0-stage → 0.9.0

package/dist/tag-editor-VDPZ6CO3.js

@@ -0,0 +1 @@
+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/tag-editor.d.ts

@@ -0,0 +1,12 @@
+export declare const MAX_TAGS = 12;
+export interface TagEditorOptions {
+    tags: readonly string[];
+    /** Tags already used in this project, offered while typing. */
+    suggestions: readonly string[];
+    onAdd(tag: string): void;
+    onRemove(tag: string): void;
+}
+/** Lowercase and validate a typed tag; returns null when it isn't a valid tag. */
+export declare function normalizeTag(value: string): string | null;
+/** Render removable tag chips and an inline "Tag" input into `slot`. */
+export declare function tagEditor(slot: HTMLElement, options: TagEditorOptions): void;

package/dist/toolbar-runtime-2SIUE6SQ.js

@@ -0,0 +1 @@
+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 Y,n as $,o as X,p as z,q,r as K,s as Z,t as J,u as Q,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,k as at}from"./chunk-YZP3KX4Y.js";import{a as lt}from"./chunk-I7AUKTXE.js";import{createRoot as ut}from"react-dom/client";import{flushSync as ct}from"react-dom";import{createElement as dt}from"react";import*as ht from"react";var mt=({size:t=24,color:e="currentColor",...n})=>ht.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},ht.createElement("path",{d:"m7 15 5 5 5-5M7 9l5-5 5 5"}));mt.displayName="ChevronSelectorVertical";import*as pt from"react";var ft=({size:t=24,color:e="currentColor",...n})=>pt.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},pt.createElement("path",{d:"M18 6 6 18M6 6l12 12"}));ft.displayName="XClose";import*as gt from"react";var vt=({size:t=24,color:e="currentColor",...n})=>gt.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},gt.createElement("path",{d:"M19 12H5m0 0 7 7m-7-7 7-7"}));vt.displayName="ArrowLeft";import*as yt from"react";var wt=({size:t=24,color:e="currentColor",...n})=>yt.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},yt.createElement("path",{d:"m9 18 6-6-6-6"}));wt.displayName="ChevronRight";import{useEffect as xt,useId as Et,useLayoutEffect as Pt,useRef as St,useState as bt}from"react";import{createContext as Ct}from"react";var Mt=Ct({});import{useRef as kt}from"react";import{useLayoutEffect as Tt,useEffect as At}from"react";var Lt=typeof window<"u"?Tt:At;import{createContext as Dt}from"react";var It=Dt(null);import{createContext as jt}from"react";var Vt=jt({transformPagePoint:t=>t,isStatic:!1,reducedMotion:"never"});import{useContext as _t,useId as Ot,useEffect as Rt,useCallback as Wt}from"react";import{createContext as Nt}from"react";var Bt=Nt({strict:!1}),Ft={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"]},Ht=!1;function Ut(){return function(){if(Ht)return;let t={};for(let e in Ft)t[e]={isEnabled:t=>Ft[e].some(e=>!!t[e])};v(t),Ht=!0}(),y()}var Gt=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 Yt(t){return t.startsWith("while")||t.startsWith("drag")&&"draggable"!==t||t.startsWith("layout")||t.startsWith("onTap")||t.startsWith("onPan")||t.startsWith("onLayout")||Gt.has(t)}var $t,Xt=t=>!Yt(t);try{"function"==typeof($t=lt("@emotion/is-prop-valid").default)&&(Xt=t=>t.startsWith("on")?!Yt(t):$t(t))}catch{}import{jsxs as zt,jsx as qt}from"react/jsx-runtime";import{forwardRef as Kt,useContext as Zt}from"react";import{createContext as Jt}from"react";var Qt=Jt({});import{useContext as te,useMemo as ee}from"react";function ne(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,te(Qt));return ee(()=>({initial:e,animate:n}),[re(e),re(n)])}function re(t){return Array.isArray(t)?t.join(" "):t}import{Fragment as ie,useMemo as oe,createElement as se}from"react";import{useMemo as ae}from"react";var le=()=>({style:{},transform:{},transformOrigin:{},vars:{}});function ue(t,e,n){for(let r in e)!rt(e[r])&&!b(r,n)&&(t[r]=e[r])}function ce(t,e){let n={};return ue(n,t.style||{},t),Object.assign(n,function({transformTemplate:t},e){return ae(()=>{let n={style:{},transform:{},transformOrigin:{},vars:{}};return S(n,e,t),Object.assign({},n.vars,n.style)},[e])}(t,e)),n}function de(t,e){let n={},r=ce(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 he}from"react";var me=()=>({style:{},transform:{},transformOrigin:{},vars:{},attrs:{}});function pe(e,n,r,i){let o=he(()=>{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={};ue(t,e.style,e),o.style={...t,...o.style}}return o}var fe=["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 ge(t){return"string"==typeof t&&!t.includes("-")&&!!(fe.indexOf(t)>-1||/[A-Z]/u.test(t))}function ve(t,e,n,{latestValues:r},i,o=!1,s){let a=(s??ge(t)?pe:de)(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])||(Xt(i)||!0===n&&Yt(i)||!e&&!Yt(i)||t.draggable&&i.startsWith("onDrag"))&&(r[i]=t[i]);return r}(e,"string"==typeof t,o),u=t!==ie?{...l,...a,ref:n}:{},{children:c}=e,d=oe(()=>rt(c)?c.get():c,[c]);return se(t,{...u,children:d})}import{useContext as ye}from"react";function we(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 xe=t=>(e,n)=>{let r=ye(Qt),i=ye(It),o=()=>function({scrapeMotionValuesFromProps:t,createRenderState:e},n,r,i){return{latestValues:we(n,r,i,t),renderState:e()}}(t,e,r,i);return n?o():function(t){let e=kt(null);return null===e.current&&(e.current=t()),e.current}(o)},Ee=xe({scrapeMotionValuesFromProps:C,createRenderState:le}),Pe=xe({scrapeMotionValuesFromProps:A,createRenderState:me}),Se=Symbol.for("motionComponentSymbol");import{useRef as be,useInsertionEffect as Ce,useCallback as Me}from"react";function ke(t,e,n){let r=be(n);Ce(()=>{r.current=n});let i=be(null);return Me(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 Te,useRef as Ae,useInsertionEffect as Le,useEffect as De}from"react";import{createContext as Ie}from"react";var je=Ie({});function Ve(t){return t&&"object"==typeof t&&Object.prototype.hasOwnProperty.call(t,"current")}function _e(t,n,r,i,o,s){let{visualElement:a}=Te(Qt),l=Te(Bt),u=Te(It),c=Te(Vt),d=c.reducedMotion,h=c.skipAnimations,m=Ae(null),p=Ae(!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=Te(je);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:Oe(t.parent)),t.projection.setOptions({layoutId:i,layout:o,alwaysMeasureLayout:!!s||a&&Ve(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=Ae(!1);Le(()=>{f&&v.current&&f.update(r,u)});let y=r[e],w=Ae(!!y&&typeof window<"u"&&!window.MotionHandoffIsComplete?.(y)&&window.MotionHasOptimisedAnimation?.(y));return Lt(()=>{p.current=!0,f&&(v.current=!0,window.MotionIsMounted=!0,f.updateFeatures(),f.scheduleRenderMicrotask(),w.current&&f.animationState&&f.animationState.animateChanges())}),De(()=>{f&&(!w.current&&f.animationState&&f.animationState.animateChanges(),w.current&&(queueMicrotask(()=>{window.MotionHandoffMarkAsComplete?.(y)}),w.current=!1),f.enteringChildren=void 0)}),f}function Oe(t){if(t)return!1!==t.options.allowProjection?t.projection:Oe(t.parent)}function Re(t,{forwardMotionProps:e=!1,type:n}={},r,i){r&&function(t){let e=Ut();for(let n in t)e[n]={...e[n],...t[n]};v(e)}(r);let o=n?"svg"===n:ge(t),s=o?Pe:Ee;function a(n,r){let a,l={...Zt(Vt),...n,layoutId:We(n)},{isStatic:u}=l,c=ne(n),d=s(n,u);if(!u&&typeof window<"u"){Zt(Bt).strict;let e=function(t){let e=Ut(),{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=_e(t,d,l,i,e.ProjectionNode,o)}return zt(Qt.Provider,{value:c,children:[a&&c.visualElement?qt(a,{visualElement:c.visualElement,...l}):null,ve(t,n,ke(d,c.visualElement,r),d,u,e,o)]})}a.displayName=`motion.${"string"==typeof t?t:`create(${t.displayName??t.name??""})`}`;let l=Kt(a);return l[Se]=t,l}function We({layoutId:t}){let e=Zt(Mt).id;return e&&void 0!==t?e+"-"+t:t}import{Fragment as Ne}from"react";var Be=0,Fe={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=Be++,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 He(t){return{point:{x:t.pageX,y:t.pageY}}}function Ue(t,e,n,r){return O(t,e,(t=>e=>o(e)&&t(e,He(e)))(n),r)}var Ge=({current:t})=>t?t.ownerDocument.defaultView:null,Ye=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=Xe(this.lastRawMoveEventInfo,this.transformPagePoint));let t=qe(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}=Z;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=Xe(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=qe("pointercancel"===t.type?this.lastMoveEventInfo:Xe(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=Xe(He(t),this.transformPagePoint),{point:u}=l,{timestamp:c}=Z;this.history=[{...u,timestamp:c}];let{onSessionStart:d}=e;d&&d(t,qe(l,this.history));let h={passive:!0,capture:!0};this.removeListeners=Y(Ue(this.contextWindow,"pointermove",this.handlePointerMove,h),Ue(this.contextWindow,"pointerup",this.handlePointerUp,h),Ue(this.contextWindow,"pointercancel",this.handlePointerUp,h)),a&&this.startScrollTracking(a)}startScrollTracking(t){let e=t.parentElement;for(;e;){let t=getComputedStyle(e);(Ye.has(t.overflowX)||Ye.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(),K(this.updatePoint)}};function Xe(t,e){return e?{point:e(t.point)}:t}function ze(t,e){return{x:t.x-e.x,y:t.y-e.y}}function qe({point:t},e){return{point:t,delta:ze(t,Ze(e)),offset:ze(t,Ke(e)),velocity:Je(e,.1)}}function Ke(t){return t[0]}function Ze(t){return t[t.length-1]}function Je(t,e){if(t.length<2)return{x:0,y:0};let n=t.length-1,r=null,i=Ze(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 tn(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 en=.35;function nn(t,e,n){return{min:rn(t,e),max:rn(t,n)}}function rn(t,e){return"number"==typeof t?t:t[e]||0}var on=new WeakMap,sn=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(He(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(J.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:Ge(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||!ln(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?Q(e,t,r.min):Math.max(t,e):void 0!==n&&t>n&&(t=r?Q(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&&Ve(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=en){return!1===t?t=0:!0===t&&(t=en),{x:nn(t,"left","right"),y:nn(t,"top","bottom")}}(e),r!==this.constraints&&!Ve(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||!Ve(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:tn(t.x,e.x),y:tn(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(!ln(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(!ln(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]-Q(n,o,.5)+s)}})}scalePositionWithinConstraints(){if(!this.visualElement.current)return;let{drag:t,dragConstraints:e}=this.getProps(),{projection:n}=this.visualElement;if(!Ve(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=$(e.min,e.max-r,t.min):r>i&&(n=$(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(!ln(e,t,null))return;let n=this.getAxisMotionValue(e),{min:i,max:o}=this.constraints[e];n.set(Q(i,o,r[e]))}),this.visualElement.render()}addListeners(){if(!this.visualElement.current)return;on.set(this.visualElement,this);let t,e=this.visualElement.current,n=Ue(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();Ve(n)&&n.current&&(this.constraints=this.resolveRefConstraints(),t||(t=function(t,e,n){let r=l(t,an(n)),i=l(e,an(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=en,dragMomentum:s=!0}=t;return{...t,drag:e,dragDirectionLock:n,dragPropagation:r,dragConstraints:i,dragElastic:o,dragMomentum:s}}};function an(t){let e=!0;return()=>{e?e=!1:t()}}function ln(t,e,n){return!(!0!==e&&e!==t||null!==n&&n!==t)}var un=t=>(e,n)=>{t&&q.update(()=>t(e,n),!1,!0)};import{jsx as cn}from"react/jsx-runtime";import{useContext as dn,Component as hn}from"react";var mn=!1,pn=class extends hn{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),mn&&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}),mn=!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;mn=!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 fn(t){let[e,n]=function(t=!0){let e=_t(It);if(null===e)return[!0,null];let{isPresent:n,onExitComplete:r,register:i}=e,o=Ot();Rt(()=>{if(t)return i(o)},[t]);let s=Wt(()=>t&&r&&r(o),[o,r,t]);return!n&&r?[!1,s]:[!0]}(),r=dn(Mt);return cn(pn,{...t,layoutGroup:r,switchLayoutGroup:dn(je),isPresent:e,safeToRemove:n})}var gn={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:Ge(this.node)})}createPanHandlers(){let{onPanSessionStart:t,onPanStart:e,onPan:n,onPanEnd:r}=this.node.getProps();return{onSessionStart:un(t),onStart:un(e),onMove:un(n),onEnd:(t,e)=>{delete this.session,r&&q.postRender(()=>r(t,e))}}}mount(){this.removePointerDownListener=Ue(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 sn(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:fn}};function vn(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,He(e)))}function yn(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,He(e)))}var wn=new WeakMap,xn=new WeakMap,En=t=>{let e=wn.get(t.target);e&&e(t)},Pn=t=>{t.forEach(En)};function Sn(t,e,n){let r=function({root:t,...e}){let n=t||document;xn.has(n)||xn.set(n,{});let r=xn.get(n),i=JSON.stringify(e);return r[i]||(r[i]=new IntersectionObserver(Pn,{root:t,...e})),r[i]}(e);return wn.set(t,n),r.observe(t),()=>{wn.delete(t),r.unobserve(t)}}var bn={some:0,all:1};var Cn={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:bn[r]};this.stopObserver=Sn(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)=>(yn(this.node,e,"Start"),(t,{success:e})=>yn(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=Y(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)=>(vn(this.node,e,"Start"),t=>vn(this.node,t,"End"))))}unmount(){}}}},Mn=function(t,e){if(typeof Proxy>"u")return Re;let n=new Map,r=(n,r)=>Re(n,r,t,e);return new Proxy((t,e)=>r(t,e),{get:(i,o)=>"create"===o?r:(n.has(o)||n.set(o,Re(o,void 0,t,e)),n.get(o))})}({...Fe,...Cn,...gn,...{layout:{ProjectionNode:N,MeasureLayout:fn}}},(t,e)=>e.isSVG??ge(t)?new D(e):new M(e,{allowProjection:t!==Ne}));import{useState as kn}from"react";var Tn=Mn;import{Fragment as An,jsx as Ln,jsxs as Dn}from"react/jsx-runtime";function In({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=Et(),[h,m]=bt({kind:"collapsed"}),[v,y]=bt(e??t[0]?.id),[w,x]=bt(null),E=St(null),P=St(null),S=St(r),b="left"===r||"right"===r;Pt(()=>{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=St(null),M=St(null),k=St(h),A=St("more"),D=St(!1),j=St(!1),V=St(!1),_=St(null),O=St(void 0),R=St(void 0),W=St(!1),N=St(!1),B=function(){!f.current&&g();let[t]=kn(p.current);return t}(),H=n??v,U="collapsed"!==h.kind,G=t.filter(t=>!1!==t.showInBar),Y=G.find(t=>"dismiss"===t.id),$=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 K(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 Z(t,e,n){q(),U||(A.current=e,D.current=n),_.current="first",m(t)}function J(t=!0,e=A.current){q(),V.current=!0,_.current=t&&D.current?e:null,m({kind:"collapsed"})}function Q(){"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)=>Ln(Vn,{label:t.label,icon:n,reduced:!!B,children:e}),a=r&&t.activeIcon?t.activeIcon:t.icon,l=Dn(An,{children:[Ln("span",{className:"morphing-menu__icon","aria-hidden":"true",style:i?{display:"grid"}:void 0,children:i?s(a,!0):a}),!e&&Ln("span",{className:"morphing-menu__label",style:i?{display:"grid"}:void 0,children:i?s(t.label):t.label}),!e&&n&&Ln(jn,{})]}),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?Z({kind:"group",id:t.id},t.id,0===e.detail):function(t){y(t.id),o?.(t.id),U&&!t.keepOpenOnSelect?J(!0,"group"===h.kind?h.id:t.id):q(),t.onSelect?.()}(t),onPointerEnter:n=>{e&&"mouse"===n.pointerType&&K(n.currentTarget,t.label)},onPointerLeave:z,onPointerDown:q,onFocus:n=>{e&&n.currentTarget.matches(":focus-visible")&&K(n.currentTarget,t.label,!0)},onBlur:z};return t.href&&!n?Ln("a",{href:t.href,...u,children:l},t.id):Ln(Tn.button,{layout:!!e&&"position",transition:B?{duration:0}:T,type:"button",...u,children:l},t.id)}Pt(()=>{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]),xt(()=>{if(!U)return;let t=new AbortController;return st(E.current,"pointerdown",t=>{t.target instanceof Node&&!t.composedPath().includes(E.current)&&J(!1)},{signal:t.signal}),()=>t.abort()},[U]),xt(()=>()=>{clearTimeout(O.current),clearTimeout(R.current)},[]);let et=Dn("button",{type:"button",className:"morphing-menu__row","data-menu-item":"close",onClick:()=>J(!0,"more"),children:[Ln(ft,{"aria-hidden":"true"}),Ln("span",{className:"morphing-menu__label",children:"Close drawer"})]});return Dn("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&&K(e,e.getAttribute("aria-label")??"")},onKeyDown:t=>{"Escape"===t.key&&(V.current=!0,q(),U&&(t.preventDefault(),t.stopPropagation(),"group"===h.kind?Q():J()))},onBlur:t=>{t.relatedTarget instanceof Node&&t.currentTarget.contains(t.relatedTarget)||(U?t.relatedTarget instanceof Node&&J(!1):N.current||q())},children:[Dn("div",{ref:C,className:"morphing-menu__shell",children:[Dn("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:[$.map(t=>tt(t,!0)),Ln(Tn.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=>Z({kind:"main"},"more",0===t.detail),onPointerEnter:t=>{"mouse"===t.pointerType&&K(t.currentTarget,a)},onPointerLeave:z,onPointerDown:q,onBlur:z,onFocus:t=>{t.currentTarget.matches(":focus-visible")&&K(t.currentTarget,a,!0)},children:Ln(mt,{"aria-hidden":"true"})}),Y&&tt(Y,!0)]}),Dn("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 Dn("div",{id:`${d}-group-${t.id}`,className:"morphing-menu__panel","aria-label":t.label,"aria-hidden":!e,inert:!e,children:[Dn("button",{type:"button",className:"morphing-menu__row","data-menu-item":"back",onClick:Q,children:[Ln(vt,{"aria-hidden":"true"}),Ln("span",{children:l})]}),t.children.map(t=>tt(t,!1)),et]},t.id)})]}),w&&!U&&Ln("div",{ref:P,className:"morphing-menu__tooltip","aria-hidden":"true",style:{left:w.x,top:w.y},children:w.label})]})}function jn(){return Ln(wt,{className:"morphing-menu__chevron","aria-hidden":"true"})}function Vn({label:t,icon:e,reduced:n,children:r}){let i=St(null),o=St(null);return Pt(()=>{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]),Ln("span",{ref:i,style:{gridArea:"1 / 1",display:"flex",alignItems:"center"},children:r})}function _n(t){return"glyph"in t?dt("span",{style:{display:"contents"},dangerouslySetInnerHTML:{__html:ot[t.glyph]}}):dt("span",{className:"review-avatar"},t.user?.avatarUrl?dt("img",{src:t.user.avatarUrl,alt:"",referrerPolicy:"no-referrer"}):t.user?at(t.user.name):_n({glyph:"person"}))}var On=t=>dt(In,{...t,items:t.items.map(t=>({...t,icon:_n(t.icon)}))});function Rn(t,e){t.replaceChildren();let n=ut(t);return ct(()=>n.render(On(e))),{render:t=>n.render(On(t)),unmount:()=>n.unmount()}}export{Rn as mountToolbar};

package/dist/toolbar-runtime.d.ts

@@ -0,0 +1,5 @@
+import type { ToolbarProps } from "./lazy-toolbar.js";
+export declare function mountToolbar(element: HTMLElement, props: ToolbarProps): {
+    render: (next: ToolbarProps) => void;
+    unmount: () => void;
+};

package/dist/types.d.ts

@@ -0,0 +1,163 @@
+export interface Identity {
+    id: string;
+    name: string;
+    verified: boolean;
+    avatarUrl?: string;
+    accentColor?: string;
+}
+export interface Anchor {
+    /** A manually moved indicator keeps its own position instead of joining a stack. */
+    unstacked?: boolean;
+    selector: string;
+    text: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    pageX: number;
+    pageY: number;
+    viewportWidth: number;
+    source?: string;
+    /** Optional public target details; old anchors remain valid without them. */
+    context?: {
+        tag?: string;
+        role?: string;
+        label?: string;
+        nearby?: string;
+        classes?: string;
+        selectedText?: string;
+        styles?: string;
+        scope?: string;
+    };
+}
+export interface Comment {
+    id: string;
+    body: string;
+    author: Identity;
+    createdAt: number;
+    editedAt: number | null;
+    reactions: Record<string, string[]>;
+}
+export interface Thread {
+    id: string;
+    page: string;
+    anchor: Anchor;
+    resolved: boolean;
+    resolvedBy: Identity | null;
+    createdAt: number;
+    updatedAt: number;
+    /** Reviewer-defined labels used to group related feedback. */
+    tags?: string[];
+    comments: Comment[];
+}
+export interface OnboardingOptions {
+    /** Temporary first-run setup inside the consuming site. Generated by the CLI. */
+    inProject?: boolean;
+    /** Suggested deployed sites shown for owner approval during first-run setup. */
+    sites?: string[];
+    invite?: string;
+    code?: string;
+    workspace?: string;
+    claimKey?: string;
+    site?: string;
+}
+/**
+ * Keyboard shortcuts as a key with optional Ctrl, Alt, Shift, or Meta
+ * modifiers, e.g. "M" or "Shift+J". Set false to disable one. Escape and Tab
+ * are reserved.
+ */
+export interface KomoShortcuts {
+    /** Toggle comment mode. Defaults to "C". */
+    comment?: string | false;
+    /** Return to browsing. Defaults to "V". */
+    browse?: string | false;
+    /** Toggle Design mode. Defaults to "D". Has no effect when features.designMode is false. */
+    design?: string | false;
+    /** Restore a dismissed toolbar. Defaults to "Shift+K". */
+    restore?: string | false;
+}
+/** Optional review features. Each defaults to true; false removes it from the UI. */
+export interface KomoFeatures {
+    /** Design mode inspector, style previews, and design proposals. */
+    designMode?: boolean;
+    /** Thread group tags: add them while writing a comment or on an open thread; shown in the sidebar. */
+    tags?: boolean;
+}
+export interface CommentsOptions {
+    /** Used by the hosted setup screen to reuse the sidebar account UI. */
+    onboarding?: OnboardingOptions;
+    /** Shared API URL. Never put a private credential here. */
+    endpoint: string;
+    /** Repository identifier, normally owner/repository. */
+    repo: string;
+    branch: string;
+    /** Public project key registered in the API configuration. */
+    project: string;
+    enabled?: boolean;
+    /** Hide the toolbar until controller.open() or the restore shortcut is used. Defaults to true. */
+    showToolbar?: boolean;
+    /** Override or disable the review keyboard shortcuts. */
+    shortcuts?: KomoShortcuts;
+    /** Turn optional features off, e.g. { designMode: false, tags: false }. */
+    features?: KomoFeatures;
+    /**
+     * Sidebar presentation when the review opens. "edge" (default) is a floating,
+     * draggable sidebar that parks off and peeks from the viewport edge while
+     * closed. "background" frames the site and shows the sidebar in the scaled
+     * review sheet. Users can switch Floating and Frame from the Account panel;
+     * that choice is remembered per project. Compact viewports always use a bottom
+     * Drawer, retaining the desktop preference when the viewport grows.
+     */
+    sidebar?: "background" | "edge";
+    /** Hide the drawer away from the pointer. Defaults to true. */
+    autoHideDrawer?: boolean;
+    /** Center the default drawer position within this element. */
+    drawerContainer?: HTMLElement;
+    /** Mounted content root for Frame. Defaults to a sole body content element; otherwise Floating only. */
+    pageRoot?: HTMLElement;
+    /**
+     * Roots, besides pageRoot, whose elements can be picked for comments and
+     * Design mode, such as a portal container. Defaults to all of body except
+     * komo, so body-level dialogs and popovers are pickable. Return [] to limit
+     * picking to pageRoot. Called on every pick; keep it cheap.
+     */
+    pickRoots?: () => Element[];
+    /**
+     * Stop komo's own pointer, focus, wheel and typing events at its host
+     * element, so page shortcuts and open modals don't react to komo's UI.
+     * Defaults to true; set false if the host needs to observe them.
+     */
+    isolateEvents?: boolean;
+    /** Resolve an anchor to a repository-relative source path. */
+    source?: (element: Element) => string | undefined;
+    /** Defaults to GitHub's source viewer. */
+    sourceUrl?: (source: string, branch: string) => string;
+    /** Defaults to location.pathname; query strings are not stored. */
+    page?: () => string;
+    pollInterval?: number;
+    /** Full emoji JSON URL; fetched only when choosing another emoji. */
+    emojiDataSource?: string;
+    /** Opt-in trusted parent domain. Every sibling host can receive the session. */
+    sessionDomain?: string;
+    /** Canonical API identity for trusted gateways to the same service. Defaults to endpoint. */
+    sessionEndpoint?: string;
+}
+export interface CommentsController {
+    /** Open a new comment anchored to an element. */
+    comment(element: Element): void;
+    destroy(): void;
+    open(): void;
+    close(): void;
+    refresh(): Promise<void>;
+}
+export interface AccountUsage {
+    hosted: boolean;
+    projects: {
+        used: number;
+        limit: number | null;
+    } | null;
+    comments: {
+        used: number;
+        limit: number | null;
+    };
+}

package/package.json

@@ -1,6 +1,116 @@
 {
   "name": "@hazem3500/komo",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.9.0",
+  "description": "Point, area, and threaded comments for website branches.",
+  "type": "module",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "server/index.ts",
+    "server/validation.ts",
+    "server/migrations",
+    "server/tsconfig.json",
+    "server/secrets.d.ts",
+    "src/types.ts",
+    "src/emoji.ts",
+    "README.md",
+    "NODE.md",
+    "LICENSE",
+    "src/page.ts",
+    "NOTICE.md",
+    "cli",
+    "server/workspaces.ts",
+    "server/setup-page.ts",
+    "server/setup-client.txt",
+    "server/project-management.ts",
+    "server/webhooks.ts",
+    "server/node-webhooks.ts",
+    "server/import-project.ts",
+    "server/digest.ts",
+    "server/project-sites.ts"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./setup": {
+      "types": "./dist/setup.d.ts",
+      "import": "./dist/setup.js"
+    },
+    "./server": "./server/index.ts",
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    },
+    "./node": {
+      "import": "./dist/node.mjs"
+    }
+  },
+  "sideEffects": [
+    "./dist/chunk-*.js",
+    "./dist/picker-*.js"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs && pnpm run build:setup && pnpm run build:node",
+    "prepack": "pnpm run build",
+    "typecheck": "wrangler types --config server/wrangler.jsonc server/worker-configuration.d.ts && tsc -p tsconfig.json --noEmit && tsc -p server/tsconfig.json",
+    "test": "pnpm run build:setup && vitest run --config vitest.config.ts",
+    "dev:api": "wrangler dev --config server/wrangler.jsonc --port 8788",
+    "migrate:local": "wrangler d1 migrations apply DB --local --config server/wrangler.jsonc",
+    "migrate:remote": "wrangler d1 migrations apply DB --remote --config server/wrangler.jsonc",
+    "deploy:api": "pnpm run build:setup && wrangler deploy --config server/wrangler.jsonc",
+    "build:setup": "esbuild src/setup-browser.ts --bundle --format=esm --minify --outfile=server/setup-client.txt",
+    "size": "node scripts/measure.mjs",
+    "bench": "node scripts/bench.mjs",
+    "demo:react-props": "node examples/react-props/build.mjs",
+    "test:package": "pnpm run build && node scripts/check-package.mjs",
+    "build:node": "esbuild server/node.ts --bundle --platform=node --format=esm --packages=external --loader:.txt=text --outfile=dist/node.mjs && mkdir -p dist/postgres && cp server/postgres/*.sql dist/postgres/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hazem3500/komo.git",
+    "directory": "packages/komo"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/node": "^26",
+    "@types/pg": "^8.23.1",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@untitledui/icons": "0.0.22",
+    "emoji-picker-element": "^1.29.1",
+    "esbuild": "^0.25.0",
+    "jsdom": "^30.1.0",
+    "motion": "^12.43.0",
+    "react": "19.2.7",
+    "react-colorful": "^5.8.1",
+    "react-dom": "19.2.7",
+    "terser": "5.44.0",
+    "typescript": "^6.0.0",
+    "vitest": "4.1.11",
+    "wrangler": "4.136.3"
+  },
+  "dependencies": {
+    "emoji-regex": "^10.6.0",
+    "pg": "^8.23.0"
+  },
+  "bin": {
+    "komo": "./cli/index.mjs"
+  },
+  "engines": {
+    "node": ">=22.12"
+  },
+  "homepage": "https://github.com/hazem3500/komo#readme",
+  "bugs": {
+    "url": "https://github.com/hazem3500/komo/issues"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  }
+}

package/server/digest.ts

@@ -0,0 +1,8 @@
+export async function digest(value: string) {
+  return Array.from(
+    new Uint8Array(
+      await crypto.subtle.digest("SHA-256", new TextEncoder().encode(value))
+    ),
+    (b) => b.toString(16).padStart(2, "0")
+  ).join("");
+}

package/server/import-project.ts

@@ -0,0 +1,164 @@
+import { check, string, pagePath, anchorValue } from "./validation";
+import { digest } from "./digest";
+import { isEmoji } from "../src/emoji";
+
+export async function importProject(
+  env: Env,
+  project: string,
+  data: Record<string, unknown>
+) {
+  const source = string(data.source, 100, "source project");
+  const kind = string(data.kind, 20, "table");
+  check(
+    Array.isArray(data.records) &&
+      data.records.length > 0 &&
+      data.records.length <= 50,
+    400,
+    "Import 1–50 records at a time."
+  );
+  const repo =
+    (
+      await env.DB.prepare("SELECT repo FROM workspaces WHERE id=?")
+        .bind(project)
+        .first<{ repo: string }>()
+    )?.repo ?? JSON.parse(env.PROJECTS)[project]?.repo;
+  check(repo, 404, "Unknown destination project.");
+  const id = async (value: unknown, identity = false) =>
+    (identity ? "guest:import:" : "import:") +
+    (await digest(`${project}\n${source}\n${string(value, 200, "source ID")}`));
+  const time = (value: unknown) => {
+    check(
+      typeof value === "number" && Number.isSafeInteger(value) && value >= 0,
+      400,
+      "Invalid timestamp."
+    );
+    return value;
+  };
+  const statements: D1PreparedStatement[] = [];
+  for (const value of data.records) {
+    check(
+      value && typeof value === "object" && !Array.isArray(value),
+      400,
+      "Invalid record."
+    );
+    const row = value as Record<string, unknown>;
+    if (kind === "users") {
+      const accent = row.accent_color;
+      check(
+        accent === undefined ||
+          accent === null ||
+          (typeof accent === "string" && /^#[a-f0-9]{6}$/i.test(accent)),
+        400,
+        "Invalid accent color."
+      );
+      const photo = row.avatar_url;
+      check(
+        photo === undefined ||
+          photo === null ||
+          (typeof photo === "string" &&
+            photo.length <= 12000 &&
+            (/^(https:\/\/|data:image\/jpeg;base64,)/.test(photo) ||
+              photo === "")),
+        400,
+        "Invalid avatar."
+      );
+      const authorId = await id(row.id, true);
+      statements.push(
+        env.DB.prepare(
+          "INSERT OR IGNORE INTO users(id,name,verified,avatar_url,accent_color) VALUES(?,?,0,?,?) RETURNING id"
+        ).bind(
+          authorId,
+          string(row.name, 60, "author name"),
+          photo ?? null,
+          accent ?? null
+        ),
+        env.DB.prepare(
+          "INSERT OR IGNORE INTO project_members(project,user_id) VALUES(?,?)"
+        ).bind(project, authorId)
+      );
+    } else if (kind === "threads") {
+      let rawAnchor = row.anchor;
+      if (typeof rawAnchor === "string") {
+        try {
+          rawAnchor = JSON.parse(rawAnchor);
+        } catch {
+          check(false, 400, "Invalid imported anchor.");
+        }
+      }
+      const anchor = anchorValue(rawAnchor);
+      check(
+        row.resolved === 0 || row.resolved === 1,
+        400,
+        "Invalid resolved state."
+      );
+      statements.push(
+        env.DB.prepare(
+          "INSERT OR IGNORE INTO threads(id,project,repo,branch,page,anchor,resolved,resolved_by,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?,?) RETURNING id"
+        ).bind(
+          await id(row.id),
+          project,
+          repo,
+          string(row.branch, 250, "branch"),
+          pagePath(row.page),
+          JSON.stringify(anchor),
+          row.resolved,
+          row.resolved_by ? await id(row.resolved_by, true) : null,
+          time(row.created_at),
+          time(row.updated_at)
+        )
+      );
+    } else if (kind === "comments") {
+      const thread = await id(row.thread_id),
+        author = await id(row.user_id, true);
+      check(
+        await env.DB.prepare("SELECT id FROM threads WHERE id=? AND project=?")
+          .bind(thread, project)
+          .first(),
+        400,
+        "Import the parent thread first."
+      );
+      statements.push(
+        env.DB.prepare(
+          "INSERT OR IGNORE INTO comments(id,thread_id,user_id,body,created_at,edited_at) VALUES(?,?,?,?,?,?) RETURNING id"
+        ).bind(
+          await id(row.id),
+          thread,
+          author,
+          string(row.body, 4000, "comment"),
+          time(row.created_at),
+          row.edited_at == null ? null : time(row.edited_at)
+        )
+      );
+    } else if (kind === "reactions") {
+      const comment = await id(row.comment_id);
+      check(
+        await env.DB.prepare(
+          "SELECT c.id FROM comments c JOIN threads t ON t.id=c.thread_id WHERE c.id=? AND t.project=?"
+        )
+          .bind(comment, project)
+          .first(),
+        400,
+        "Import the comment first."
+      );
+      check(
+        typeof row.emoji === "string" && isEmoji(row.emoji),
+        400,
+        "Invalid reaction."
+      );
+      statements.push(
+        env.DB.prepare(
+          "INSERT OR IGNORE INTO reactions(comment_id,user_id,emoji) VALUES(?,?,?) RETURNING comment_id"
+        ).bind(comment, await id(row.user_id, true), row.emoji)
+      );
+    } else check(false, 400, "Unknown import table.");
+  }
+  const results = await env.DB.batch(statements);
+  return Response.json({
+    ok: true,
+    imported: results.reduce(
+      (total, result, index) =>
+        total + (kind === "users" && index % 2 ? 0 : result.results.length),
+      0
+    ),
+  });
+}