@dashfoo/react 0.5.0 → 0.5.1

package/dist/index.js

@@ -1,9 +1,2537 @@
-"use client";import{canRedo as e,canUndo as t,dashfooMachine as n,dragDockMachine as r,findTabset as i,fromJSON as a,normalize as o,reducer as s,resolveDockTarget as c,snapEnabled as l,snapSizes as u,stackModel as d,tabNodeSchema as f,toJSON as p,zoneRect as m}from"@dashfoo/core";import{Fragment as h,createContext as g,forwardRef as _,useCallback as v,useContext as y,useEffect as b,useId as x,useImperativeHandle as S,useInsertionEffect as C,useLayoutEffect as w,useMemo as T,useRef as E,useState as D}from"react";import{Accessibility as O,DragDropManager as k,Draggable as A,Feedback as j,PointerSensor as ee}from"@dnd-kit/dom";import{createStore as M,useStore as N}from"zustand";import{useActorRef as te,useSelector as P}from"@xstate/react";import{Fragment as F,jsx as I,jsxs as L}from"react/jsx-runtime";import{Group as R,Panel as z,Separator as ne}from"react-resizable-panels";const B=(e,t)=>{let{target:n}=e;if(!(n instanceof Element))return!1;let r=n.closest(`
+"use client";
+
+import { canRedo, canUndo, dashfooMachine, dragDockMachine, findTabset, fromJSON, normalize, reducer, resolveDockTarget, snapEnabled, snapSizes, stackModel, tabNodeSchema, toJSON, zoneRect } from "@dashfoo/core";
+import { Fragment, createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Accessibility, DragDropManager, Draggable, Feedback, PointerSensor } from "@dnd-kit/dom";
+import { createStore, useStore } from "zustand";
+import { useActorRef, useSelector } from "@xstate/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Group, Panel as Panel$1, Separator } from "react-resizable-panels";
+
+//#region src/hooks/drag-hooks.tsx
+const INTERACTIVE_SELECTOR = `
   input:not([disabled]),
   select:not([disabled]),
   textarea:not([disabled]),
   button:not([disabled]),
   a[href],
   [contenteditable]:not([contenteditable="false"])
-`);return r!==null&&r!==t.element},V=()=>new k({plugins:e=>e.filter(e=>e!==O&&e!==j),sensors:()=>[ee.configure({preventActivation:B})]}),re=g(null),H=g(null),ie=()=>M(()=>({intent:null,intentOwner:null,subject:null})),ae=(e,t)=>e===t||e!==null&&t!==null&&e.index===t.index&&e.location===t.location&&e.targetId===t.targetId,oe=(e,t)=>e===t||e!==null&&t!==null&&e.id===t.id&&e.kind===t.kind,se=ie(),U=g(null),ce=()=>{let e=E(null),t=E(null);return{draggableRef:t,elementRef:e,ref:v(n=>{e.current=n,t.current&&(t.current.element=n??void 0)},[])}},le=(e,t,n)=>{let r=y(re),i=y(H),a=r?.manager??i,{draggableRef:o,elementRef:s,ref:c}=ce(),{data:l,id:u}=e;return b(()=>{if(!a||t)return;let e=new A({data:{...l,label:``},id:u},a);return e.element=s.current??void 0,o.current=e,()=>{e.destroy(),o.current=null}},[l,t,o,s,u,a]),b(()=>{let e=o.current;e&&(e.data={...l,label:n})},[l,o,n]),{ref:c}},ue=(e,t=!1,n=``)=>le({data:T(()=>({type:`tab`}),[]),id:e},t,n),de=(e,t=!1,n=``)=>le({data:T(()=>({tabsetId:e,type:`tabset`}),[e]),id:`grip-${e}`},t,n),fe=e=>{let t=y(re);return{ref:v(n=>{t?.registerTabset(e,n)},[t,e])}},pe=({createTab:e,disabled:t=!1,label:n=``})=>{let r=x(),i=E(e);return b(()=>{i.current=e}),le({data:T(()=>({createTab:()=>i.current(),type:`external`}),[]),id:`external-${r}`},t,n)},me=()=>N(y(U)??se,e=>e.subject),he=()=>N(y(U)??se,e=>e.intent),ge=()=>{let e=new Map;return{getItem:t=>e.get(t)??null,removeItem:t=>{e.delete(t)},setItem:(t,n)=>{e.set(t,n)}}},_e={getItem:e=>{if(typeof window>`u`)return null;try{return window.localStorage.getItem(e)}catch{return null}},removeItem:e=>{if(!(typeof window>`u`))try{window.localStorage.removeItem(e)}catch{}},setItem:(e,t)=>{if(!(typeof window>`u`))try{window.localStorage.setItem(e,t)}catch(e){console.warn(`[dashfoo] failed to persist layout`,e)}}},ve=(e,t)=>{let n=E(e);b(()=>{n.current=e});let[r]=D(()=>{if(e===null||t===void 0)return t;let n=e.storage.getItem(e.key);if(n===null)return t;try{return a(n)}catch{return t}});b(()=>{let e=n.current;if(e===null)return;let t=e.storage.getItem(e.key);if(t!==null)try{a(t)}catch(t){console.warn(`[dashfoo] discarding unreadable persisted layout`,t),e.storage.removeItem(e.key)}},[]);let i=E(e?.key);b(()=>{e!==null&&e.key!==i.current&&(console.warn(`[dashfoo] persist key changed for a mounted layout; the displayed layout still reflects the previous key — remount (key={persistKey}) to load the new key`),i.current=e.key)},[e]);let o=E(null),s=E(null),c=v(()=>{o.current!==null&&(clearTimeout(o.current),o.current=null),s.current!==null&&(s.current.storage.setItem(s.current.key,s.current.value),s.current=null)},[]),l=v(e=>{let t=n.current;t!==null&&(s.current={key:t.key,storage:t.storage,value:p(e)},o.current!==null&&clearTimeout(o.current),o.current=setTimeout(c,t.debounceMs))},[c]);b(()=>{let e=()=>{c()},t=()=>{document.visibilityState===`hidden`&&c()};return window.addEventListener(`pagehide`,e),document.addEventListener(`visibilitychange`,t),()=>{window.removeEventListener(`pagehide`,e),document.removeEventListener(`visibilitychange`,t),c()}},[c]);let u=v(()=>{o.current!==null&&(clearTimeout(o.current),o.current=null),s.current=null;let e=n.current;e!==null&&e.storage.removeItem(e.key)},[]);return T(()=>({clear:u,initialModel:r,save:l}),[u,r,l])},ye=()=>typeof window<`u`&&typeof window.matchMedia==`function`,be=(e,t)=>{let{query:n}=e;return n?`maxWidth`in n?t<=n.maxWidth:ye()&&window.matchMedia(n.media).matches:!0},xe=(e,t)=>{let n=e.at(-1);if(!n)throw Error(`useResponsiveModel requires at least one breakpoint.`);return e.find(e=>be(e,t))??n},Se=()=>{let[e,t]=D(1/0),n=E(null),r=v(e=>{if(n.current?.disconnect(),!e)return;let r=new ResizeObserver(e=>{let n=e[0];n&&t(n.contentRect.width)});r.observe(e),n.current=r},[]);return b(()=>()=>{n.current?.disconnect()},[]),[r,e]},Ce=({breakpoints:e})=>{let[t,n]=Se(),[,r]=D(0);b(()=>{if(!ye())return;let t=e.flatMap(e=>e.query&&`media`in e.query?[window.matchMedia(e.query.media)]:[]);if(t.length===0)return;let n=()=>{r(e=>e+1)};for(let e of t)e.addEventListener(`change`,n);return()=>{for(let e of t)e.removeEventListener(`change`,n)}},[e]);let i=xe(e,n),a=i.compact===!0;return{breakpoint:i.id,containerRef:t,draggableTabs:!a,draggableTabsets:!a,isCompact:a,model:i.model,resizableSplits:!a}},we=r=>{let{defaultModel:i,model:a,onAction:c,onActiveTabsetChange:l,onMaximizedTabsetChange:u,onModelChange:d}=r,f=a??i;if(f===void 0)throw Error("useDashfooStore requires either a `model` or a `defaultModel`.");let p=te(n,{input:{model:o(f)}}),m=P(p,e=>e.context.history);b(()=>{a!==void 0&&p.send({model:o(a),type:`SET_MODEL`})},[p,a]);let h=a??m.present,g=v((e,t,n)=>{Object.is(e,t)||(d?.(t,n),t.activeTabsetId!==e.activeTabsetId&&l?.(t.activeTabsetId),t.maximizedTabsetId!==e.maximizedTabsetId&&u?.(t.maximizedTabsetId))},[d,l,u]),_=v(e=>{let t=c?c(e):e;if(!t)return;let n=(()=>{if(a===void 0){let e=p.getSnapshot().context.history.present;return p.send({action:t,type:`DISPATCH`}),{after:p.getSnapshot().context.history.present,before:e}}return{after:s(a,t),before:o(a)}})();g(n.before,n.after,t)},[p,a,g,c]),y=v(()=>{if(a!==void 0)return;let e=p.getSnapshot().context.history.present;p.send({type:`UNDO`});let t=p.getSnapshot().context.history.present;g(e,t)},[p,a,g]),x=v(()=>{if(a!==void 0)return;let e=p.getSnapshot().context.history.present;p.send({type:`REDO`});let t=p.getSnapshot().context.history.present;g(e,t)},[p,a,g]),S=v(e=>{p.send({model:o(e),type:`SET_MODEL`})},[p]);return T(()=>({canRedo:()=>e(p.getSnapshot().context.history),canUndo:()=>t(p.getSnapshot().context.history),dispatch:_,model:h,redo:x,setModel:S,undo:y}),[p,_,h,x,S,y])},Te=({children:e})=>{let[t]=D(V);C(()=>()=>t.destroy(),[t]);let[n]=D(ie);return I(H.Provider,{value:t,children:I(U.Provider,{value:n,children:e})})},Ee=e=>M(()=>e),De=g(null),W=e=>{let t=y(De);if(t===null)throw Error(`dashfoo components must be rendered inside <DashfooLayout> or <Layout.Root>.`);return N(t,e)},Oe=(e,t)=>e.x>=t.x&&e.x<=t.x+t.width&&e.y>=t.y&&e.y<=t.y+t.height,ke=(e,t)=>{let n=e.findIndex(e=>t<e.x+e.width/2);return n===-1?e.length:n},Ae=(e,t,n)=>{let r=t[n],i=t.at(-1),a=(r?.x??(i?i.x+i.width:e.x))-4/2;return{height:e.height,width:4,x:Math.max(e.x,Math.min(a,e.x+e.width-4)),y:e.y}},je=(e,t,n)=>!(e===`grip-${t}`||n.length===1&&n[0]===e),Me=new Set,G=(e,t)=>{Me.has(e)||(Me.add(e),console.warn(`[dashfoo] ${t}`))},Ne={boxSizing:`border-box`,pointerEvents:`none`,position:`fixed`,transition:`var(--dashfoo-dock-transition, left 60ms, top 60ms, width 60ms, height 60ms)`,zIndex:9999},Pe=e=>({...Ne,background:`var(--dashfoo-dock-fill, oklch(0.556 0 0 / 0.18))`,border:`var(--dashfoo-dock-border-width, 1px) solid var(--dashfoo-dock-border, oklch(0.708 0 0 / 0.75))`,borderRadius:`var(--dashfoo-dock-radius, 6px)`,height:e.height,left:e.x,top:e.y,width:e.width}),Fe=e=>({...Pe(e),borderRadius:`var(--dashfoo-dock-line-radius, 2px)`}),Ie=(e,t)=>[...e.querySelectorAll(`[data-dashfoo="tab-item"]`)].flatMap(e=>e.querySelector(`[data-dashfoo="tab"]`)?.dataset.tabId===t?[]:[e.getBoundingClientRect()]),Le=({actorRef:e,getTabsetElement:t})=>{let n=P(e,e=>e.context.intent),r=P(e,e=>e.context.subject?.id);if(!n)return null;let i=t(n.targetId);if(!i)return null;if(n.location===`center`){let e=i.querySelector(`[data-dashfoo="tabstrip"]`);if(e)return I(`div`,{"data-dashfoo":`dock-indicator`,style:Fe(Ae(e.getBoundingClientRect(),Ie(e,r),n.index??0))})}return I(`div`,{"data-dashfoo":`dock-indicator`,style:Pe(m(i.getBoundingClientRect(),n.location))})},Re={left:0,position:`fixed`,top:0,zIndex:9999},ze=({overlayRef:e,preview:t})=>t?I(`div`,{"data-dashfoo":`drag-preview`,ref:e,style:{...Re,transform:`translate(${t.x}px, ${t.y}px)`},children:t.label}):null,Be=(e,t)=>[...e.querySelectorAll(`[data-dashfoo="tab"]`)].flatMap(e=>e.dataset.tabId===t?[]:[e.getBoundingClientRect()]),Ve=(e,t,n,r)=>{let i=t.querySelector(`[data-dashfoo="tabstrip"]`);if(i&&Oe(n,i.getBoundingClientRect()))return{index:ke(Be(i,r),n.x),location:`center`,targetId:e};let a=c(n,t.getBoundingClientRect()),o=a.kind===`tab`?`center`:`split-${a.edge}`;return o===`center`&&i?{index:Be(i,r).length,location:o,targetId:e}:{location:o,targetId:e}},K={x:12,y:8},He=e=>{let t=e?.data?.label;return typeof t==`string`?t:``},Ue=e=>typeof e==`function`,We=e=>{let t=e.data;if(t?.type===`tabset`)return{id:String(t.tabsetId),kind:`tabset`};if(t?.type===`external`){if(!Ue(t.createTab))return console.warn(`[dashfoo] external drag source is missing its createTab function`),null;let n;try{n=t.createTab()}catch(e){return console.warn(`[dashfoo] external drag source createTab threw`,e),null}let r=f.safeParse(n);return r.success?{id:String(e.id),kind:`external`,tab:r.data}:(console.warn(`[dashfoo] external drag source returned an invalid tab`,r.error),null)}return{id:String(e.id),kind:`tab`}},Ge=({children:e,onCommit:t,splitDock:n})=>{let i=te(r),a=y(De),[o]=D(()=>new Map),s=E(null),[c,l]=D(null),u=y(H),[d]=D(()=>u?null:V());C(()=>()=>d?.destroy(),[d]);let f=u??d;if(f===null)throw Error(`[dashfoo] DashfooDragProvider unmounted while its layout is still mounted; keep the provider above the layout or remount the layout`);let p=y(U),[m]=D(()=>p??ie()),h=x();b(()=>{let e=i.subscribe(e=>{let{intent:t,subject:n}=e.context,r=m.getState();t===null?r.intent!==null&&r.intentOwner===h&&m.setState({intent:null,intentOwner:null}):(!ae(r.intent,t)||r.intentOwner!==h)&&m.setState({intent:t,intentOwner:h}),oe(m.getState().subject,n)||m.setState({subject:n})});return()=>{e.unsubscribe()}},[i,h,m]);let g=E(t),_=E(n);b(()=>{g.current=t,_.current=n}),b(()=>{let e=i.on(`COMMIT`,e=>{if(a?.getState().editable===!1)return;let t=g.current??a?.getState().dispatch;if(!t){G(`drag-layer-no-commit`,`Layout.DragLayer has neither an onCommit prop nor a <Layout.Root> above it; drops are ignored`);return}t(e.action)});return()=>{e.unsubscribe()}},[i,a]);let S=v((e,t)=>{t?o.set(e,t):o.delete(e)},[o]),w=v(e=>o.get(e),[o]),O=v(e=>{s.current=e},[]);b(()=>{let e=e=>{let t=document.elementFromPoint(e.x,e.y);if(t){for(let[e,n]of o)if(n.contains(t))return{element:n,id:e}}},t=(e,t,n,r)=>{if(a?.getState().editable===!1||!je(r,e,[...t.querySelectorAll(`[data-dashfoo="tab"]`)].map(e=>e.dataset.tabId??``)))return null;let i=Ve(e,t,n,r);return!(_.current??a?.getState().splitDock??!0)&&i.location.startsWith(`split-`)?{location:`center`,targetId:e}:i},n=e=>{let t=s.current;t&&(t.style.transform=`translate(${e.x+K.x}px, ${e.y+K.y}px)`)},r=e=>{let t=e.operation.source;if(!t)return;let n=We(t);if(!n)return;let r=e.operation.position.current;l({label:He(t),x:r.x+K.x,y:r.y+K.y}),i.send({subject:n,type:`START`})},c=r=>{let a=r.operation,o=a.position.current;n(o);let s=a.source?String(a.source.id):void 0,c=e(o);i.send({intent:c?t(c.id,c.element,o,s):null,type:`OVER`})},u=n=>{if(l(null),n.canceled){i.send({type:`CANCEL`});return}let r=n.operation,a=r.position.current,o=r.source?String(r.source.id):void 0,s=e(a);s&&i.send({intent:t(s.id,s.element,a,o),type:`OVER`}),i.send({type:`DROP`})},d=f.monitor.addEventListener(`dragstart`,r),p=f.monitor.addEventListener(`dragmove`,c),m=f.monitor.addEventListener(`dragend`,u);return()=>{d(),p(),m()}},[i,a,f,o]);let k=T(()=>({manager:f,registerTabset:S}),[f,S]);return I(re.Provider,{value:k,children:L(U.Provider,{value:m,children:[e,I(Le,{actorRef:i,getTabsetElement:w}),I(ze,{overlayRef:O,preview:c})]})})},Ke=g(!1),qe=()=>y(Ke),Je=(e,t,n=e)=>({height:e.height,left:Math.max(0,Math.min(e.left,Math.max(0,t.width-n.width))),top:Math.max(0,Math.min(e.top,Math.max(0,t.height-n.height))),width:e.width}),Ye=e=>{let t=(e.closest(`[data-dashfoo="tabset"]`)??e).getBoundingClientRect();return Je({height:Math.max(120,Math.min(Math.round(t.height),340)),left:Math.round(t.left)+16,top:Math.round(t.top)+16,width:Math.max(200,Math.min(Math.round(t.width),480))},{height:window.innerHeight,width:window.innerWidth})},Xe=(e,t,n,r)=>{let{height:i,left:a,top:o,width:s}=e;return t.x===1?s=Math.max(200,e.width+n):t.x===-1&&(s=Math.max(200,e.width-n),a=Math.max(0,e.left+(e.width-s))),t.y===1?i=Math.max(120,e.height+r):t.y===-1&&(i=Math.max(120,e.height-r),o=Math.max(0,e.top+(e.height-i))),{height:i,left:a,top:o,width:s}},Ze={display:`flex`,height:`100%`,position:`relative`,width:`100%`},Qe=({children:e,closableTabs:t=!0,dispatch:n,draggableTabs:r=!0,draggableTabsets:i=!0,editable:a=!0,floatable:o=!1,keepMounted:s=!1,maximizable:c=!0,model:l,renamableTabs:u=!0,renderTab:d,renderTabLabel:f,renderTabsetToolbar:p,resizableSplits:m=!0,rootRef:h,snap:g,style:_,...v})=>{let y=l.global,b={closableTabs:a&&t&&y.tabEnableClose!==!1,dispatch:n,draggableTabs:a&&r&&y.tabEnableDrag!==!1,draggableTabsets:a&&i,editable:a,floatable:a&&o,keepMounted:s,maximizable:c&&y.tabSetEnableMaximize!==!1,maximizedTabsetId:l.maximizedTabsetId,renamableTabs:a&&u&&y.tabEnableRename!==!1,renderTab:d,renderTabLabel:f,renderTabsetToolbar:p,resizableSplits:a&&m&&y.enableSplitResize!==!1,snap:g??y.snap??null,splitDock:y.enableSplitDock!==!1,tabLocation:y.tabLocation??`top`,tabsetMinSize:y.tabSetMinSize??320,tabStripEnabled:y.tabSetEnableTabStrip!==!1},[x]=D(()=>Ee(b));w(()=>{x.setState(b)});let S=y.splitterSize===void 0?{...Ze,..._}:{...Ze,"--dashfoo-splitter-size":`${y.splitterSize}px`,..._};return I(De.Provider,{value:x,children:I(`div`,{...v,"data-dashfoo":`layout`,ref:h,style:S,children:e})})},q=(e,t)=>`dashfoo-tab-${e}-${t}`,$e=e=>`dashfoo-panel-${e}`,et=(e,t,n)=>e?.querySelector(`#${CSS.escape(q(t,n))}`)??null,tt=e=>M((t,n)=>({...e,cancelRename:()=>t({editingTabId:null}),closeTab:e=>{t({restoreFocus:!0}),n().dispatch({tabId:e,type:`deleteTab`})},commitRename:(e,r)=>{t({editingTabId:null});let{node:i,renameTab:a}=n(),o=r.trim(),s=i.children.find(t=>t.id===e)?.name;o&&o!==s&&a(e,o)},editingTabId:null,overflowItems:[],registerRenameInput:()=>(t(e=>({renameInputCount:e.renameInputCount+1})),()=>t(e=>({renameInputCount:e.renameInputCount-1}))),registerTablist:e=>{if(e){let r=n().tablistElement;r&&r!==e&&G(`duplicate-tablist-${n().node.id}`,`more than one <Tabset.Tablist> under the same <Tabset.Root>; the last one wins for keyboard focus and overflow`),t({tablistElement:e});return}t({tablistElement:null})},renameInputCount:0,renameTab:(e,t)=>n().dispatch({name:t,tabId:e,type:`renameTab`}),restoreFocus:!1,selectOverflowTab:e=>{let{dispatch:t,node:r,tablistElement:i}=n(),a=r.children.findIndex(t=>t.id===e);a!==-1&&(t({index:a,tabsetId:r.id,type:`selectTab`}),et(i,r.id,e)?.scrollIntoView({block:`nearest`,inline:`nearest`}))},selectTab:(e,t)=>{let{dispatch:r,node:i,tablistElement:a}=n();if(r({index:e,tabsetId:i.id,type:`selectTab`}),t?.focus){let t=i.children[e]?.id;t&&et(a,i.id,t)?.focus()}},startEditing:e=>{let{node:r,renameInputCount:i,tabsRenamable:a}=n(),o=r.children.find(t=>t.id===e);if(!(!a||o?.enableRename===!1)){if(i===0){G(`missing-rename-input-${r.id}`,`startEditing needs a <Tabset.RenameInput> in the composition; ignoring`);return}t({editingTabId:e})}},tablistElement:null,toggleMaximize:()=>{let{dispatch:e,isMaximized:t,node:r}=n();e({tabsetId:t?null:r.id,type:`setMaximizedTabset`})}})),nt=g(null),J=e=>{let t=y(nt);if(t===null)throw Error(`dashfoo Tabset parts must be rendered inside <Tabset.Root>.`);return N(t,e)},rt=g(null),Y=()=>{let e=y(rt);if(e===null)throw Error(`dashfoo tab parts must be rendered inside <Tabset.Tab>.`);return e},it={flex:1,minHeight:0,overflow:`auto`},at=({render:e,tab:t})=>{let n=W(e=>e.renderTab);return e?e(t):n(t)},ot=({children:e,style:t,...n})=>{let r=J(e=>e.node),i=J(e=>e.visualSelected),a=W(e=>e.keepMounted),o={...it,...t};if(a&&r.children.length>0)return r.children.map((t,a)=>I(`div`,{...n,"aria-labelledby":q(r.id,t.id),"data-dashfoo":`tabcontent`,hidden:a!==i||void 0,id:a===i?$e(r.id):void 0,role:a===i?`tabpanel`:void 0,style:o,tabIndex:a===i?0:void 0,children:I(at,{render:e,tab:t})},t.id));let s=r.children[i];return s?I(`div`,{...n,"aria-labelledby":q(r.id,s.id),"data-dashfoo":`tabcontent`,id:$e(r.id),role:`tabpanel`,style:o,tabIndex:0,children:I(at,{render:e,tab:s})}):I(`div`,{...n,"data-dashfoo":`tabcontent`,style:o})},st=()=>L(`svg`,{"aria-hidden":`true`,fill:`currentColor`,height:`10`,viewBox:`0 0 10 10`,width:`10`,children:[I(`circle`,{cx:`2`,cy:`5`,r:`1`}),I(`circle`,{cx:`5`,cy:`5`,r:`1`}),I(`circle`,{cx:`8`,cy:`5`,r:`1`})]}),ct={position:`absolute`,right:0,top:`100%`,zIndex:10},lt=({items:e,onSelect:t})=>{let[n,r]=D(!1),[i,a]=D(0),o=E(null),s=E(null),c=E([]);b(()=>{if(!n)return;let e=e=>{e.target instanceof Node&&!o.current?.contains(e.target)&&r(!1)};return document.addEventListener(`pointerdown`,e),()=>{document.removeEventListener(`pointerdown`,e)}},[n]),b(()=>{n&&c.current[0]?.focus()},[n]);let l=()=>{r(!1),s.current?.focus()},u=e=>{a(e),c.current[e]?.focus()},d=()=>{a(0),r(e=>!e)},f=e=>{t(e),l()};return L(`div`,{"data-dashfoo":`tab-overflow-root`,ref:o,style:{position:`relative`},children:[I(`button`,{"aria-expanded":n,"aria-haspopup":`menu`,"aria-label":`More tabs`,"data-dashfoo":`tab-overflow`,onClick:d,ref:s,type:`button`,children:I(st,{})}),n?I(`div`,{"data-dashfoo":`tab-overflow-menu`,onBlur:e=>{e.relatedTarget instanceof Node&&o.current?.contains(e.relatedTarget)||r(!1)},onKeyDown:t=>{let n=e.length-1;switch(t.key){case`ArrowDown`:t.preventDefault(),u(i>=n?0:i+1);break;case`ArrowUp`:t.preventDefault(),u(i<=0?n:i-1);break;case`Home`:t.preventDefault(),u(0);break;case`End`:t.preventDefault(),u(n);break;case`Escape`:t.preventDefault(),l();break;default:break}},role:`menu`,style:ct,tabIndex:-1,children:e.map((e,t)=>I(`button`,{"data-dashfoo":`tab-overflow-item`,onClick:()=>f(e.id),ref:e=>{c.current[t]=e},role:`menuitem`,tabIndex:t===i?0:-1,type:`button`,children:e.name},e.id))}):null]})},ut=()=>{let e=J(e=>e.overflowItems),t=J(e=>e.selectOverflowTab);return e.length===0?null:I(lt,{items:e,onSelect:t})},dt=e=>{let t=e.getBoundingClientRect();return[...e.querySelectorAll(`[data-dashfoo="tab"]`)].flatMap(e=>{let n=e.getBoundingClientRect();return(n.right>t.right+1||n.left<t.left-1)&&e.dataset.tabId?[e.dataset.tabId]:[]})},ft=(e,t)=>{let[n,r]=D([]);return b(()=>{let t=()=>{r(t=>{let n=e?dt(e):[];return n.length===0&&t.length===0?t:n})};if(t(),!e)return;let n=new ResizeObserver(t);return n.observe(e),e.addEventListener(`scroll`,t,{passive:!0}),()=>{n.disconnect(),e.removeEventListener(`scroll`,t)}},[e,t]),n},pt=(e,t)=>t+1<e?t+1:t-1,mt={display:`flex`,flexDirection:`column`,height:`100%`,minHeight:0,minWidth:0,width:`100%`},ht=({children:e,node:t,ref:n,style:r,...i})=>{let a=W(e=>e.closableTabs),o=W(e=>e.dispatch),s=W(e=>e.maximizable),c=W(e=>e.maximizedTabsetId),l=W(e=>e.renamableTabs),u=W(e=>e.tabLocation),{ref:d}=fe(t.id),f=me(),p=E(null),m=c===t.id,h=s&&t.enableMaximize!==!1,g=a&&t.enableClose!==!1,_=l,v=f?.kind===`tab`?t.children.findIndex(e=>e.id===f.id):-1,y=v!==-1&&v===t.selected?pt(t.children.length,v):t.selected,x=t.children[y],S=f?.kind===`tabset`&&f.id===t.id,C={activeTab:x,dispatch:o,isMaximized:m,node:t,showMaximize:h,tabsClosable:g,tabsRenamable:_,visualSelected:y},[O]=D(()=>tt(C));w(()=>{O.setState(C)});let k=ft(N(O,e=>e.tablistElement),t.children.map(e=>`${e.id}:${e.name}`).join(`|`)),A=T(()=>{let e=new Map(t.children.map(e=>[e.id,e.name]));return k.map(t=>({id:t,name:e.get(t)??t}))},[k,t.children]);return w(()=>{O.setState({overflowItems:A})},[A,O]),b(()=>{if(!O.getState().restoreFocus)return;O.setState({restoreFocus:!1});let e=t.children[t.selected]?.id;e?p.current?.querySelector(`#${CSS.escape(q(t.id,e))}`)?.focus():p.current?.focus()},[t.children,t.selected,t.id,O]),I(nt.Provider,{value:O,children:I(`div`,{...i,"data-dashfoo":`tabset`,"data-dragging-source":S||void 0,"data-tab-location":u,ref:e=>{d(e),p.current=e,typeof n==`function`?n(e):n&&(n.current=e)},style:{...mt,...r},tabIndex:-1,children:e})})},gt=(e,t)=>{typeof e==`function`?e(t):e&&(e.current=t)},X=(...e)=>t=>{for(let n of e)gt(n,t)},_t=({children:e,ref:t,tab:n,...r})=>{let i=y(nt),a=J(e=>e.node),o=J(e=>e.editingTabId===n.id),s=me(),c=s?.kind===`tab`&&s.id===n.id,l=E(null),u=E(!1),d=a.children.findIndex(e=>e.id===n.id);b(()=>{i?.getState().node.children.some(e=>e.id===n.id)===!1&&G(`orphan-tab-${n.id}`,`<Tabset.Tab> for "${n.id}" is not a child of its Tabset.Root's node; it renders but can never be selected`)},[d===-1,i,n.id]),b(()=>{u.current&&!o&&l.current?.querySelector(`[data-dashfoo="tab"]`)?.focus(),u.current=o},[o]);let f=T(()=>({index:d,tab:n}),[d,n]),p=T(()=>X(l,t),[t]);return I(rt.Provider,{value:f,children:I(`span`,{...r,"data-dashfoo":`tab-item`,"data-dragging":c||void 0,ref:p,children:e})})},vt=({children:e,onClick:t,onDoubleClick:n,ref:r,...i})=>{let{index:a,tab:o}=Y(),s=J(e=>e.node),c=J(e=>e.editingTabId===o.id),l=J(e=>e.selectTab),u=J(e=>e.startEditing),d=J(e=>e.tabsRenamable),f=J(e=>e.visualSelected),p=W(e=>e.draggableTabs),m=W(e=>e.renderTabLabel),{ref:h}=ue(o.id,!p||o.enableDrag===!1,o.name),g=T(()=>X(h,r),[h,r]);if(c)return null;let _=a===f,v=d&&o.enableRename!==!1,y=e=>{t?.(e),l(a)},b=e=>{n?.(e),v&&u(o.id)};return I(`button`,{"aria-label":m?o.name:void 0,...i,"aria-controls":$e(s.id),"aria-selected":_,"data-dashfoo":`tab`,"data-tab-id":o.id,id:q(s.id,o.id),onClick:y,onDoubleClick:b,ref:g,role:`tab`,tabIndex:_?0:-1,type:`button`,children:e??(m?m(o):o.name)})},yt={pointerEvents:`none`},Z=({children:e})=>I(`svg`,{"aria-hidden":`true`,fill:`none`,height:`12`,stroke:`currentColor`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:`2`,style:yt,viewBox:`0 0 24 24`,width:`12`,children:e}),bt=()=>L(Z,{children:[I(`path`,{d:`M18 6 6 18`}),I(`path`,{d:`m6 6 12 12`})]}),xt=()=>L(Z,{children:[I(`circle`,{cx:`12`,cy:`5`,r:`1`}),I(`circle`,{cx:`19`,cy:`5`,r:`1`}),I(`circle`,{cx:`5`,cy:`5`,r:`1`}),I(`circle`,{cx:`12`,cy:`12`,r:`1`}),I(`circle`,{cx:`19`,cy:`12`,r:`1`}),I(`circle`,{cx:`5`,cy:`12`,r:`1`}),I(`circle`,{cx:`12`,cy:`19`,r:`1`}),I(`circle`,{cx:`19`,cy:`19`,r:`1`}),I(`circle`,{cx:`5`,cy:`19`,r:`1`})]}),St=({maximized:e})=>e?L(Z,{children:[I(`path`,{d:`m14 10 7-7`}),I(`path`,{d:`M20 10h-6V4`}),I(`path`,{d:`m3 21 7-7`}),I(`path`,{d:`M4 14h6v6`})]}):L(Z,{children:[I(`path`,{d:`M15 3h6v6`}),I(`path`,{d:`m21 3-7 7`}),I(`path`,{d:`m3 21 7-7`}),I(`path`,{d:`M9 21H3v-6`})]}),Ct=()=>L(Z,{children:[I(`rect`,{height:`14`,rx:`2`,width:`18`,x:`3`,y:`6`}),I(`path`,{d:`M3 10h18`})]}),wt=()=>I(Z,{children:I(`path`,{d:`M5 12h14`})}),Tt=()=>L(Z,{children:[I(`path`,{d:`M3 7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2`}),I(`path`,{d:`M11 8 7 12l4 4`}),I(`path`,{d:`M7 12h10`})]}),Et=({defaultValue:e,onBlur:t,onKeyDown:n,ref:r,...i})=>{let{tab:a}=Y(),o=J(e=>e.cancelRename),s=J(e=>e.commitRename),c=E(null),l=E(!1),u=T(()=>X(c,r),[r]);b(()=>{c.current?.focus(),c.current?.select()},[]);let d=e=>{n?.(e),e.key===`Enter`?(l.current=!0,s(a.id,e.currentTarget.value)):e.key===`Escape`&&(l.current=!0,o())},f=e=>{t?.(e),!l.current&&(l.current=!0,s(a.id,e.currentTarget.value))};return I(`input`,{"aria-label":`Rename ${a.name}`,...i,"data-dashfoo":`tab-rename`,defaultValue:e??a.name,onBlur:f,onKeyDown:d,ref:u,type:`text`})},Dt=e=>{let{tab:t}=Y(),n=J(e=>e.editingTabId===t.id),r=J(e=>e.registerRenameInput);return b(()=>r(),[r]),n?I(Et,{...e}):null},Ot=({children:e,onClick:t,...n})=>{let{index:r,tab:i}=Y(),a=J(e=>e.closeTab),o=J(e=>e.editingTabId===i.id),s=J(e=>e.tabsClosable),c=J(e=>e.visualSelected);if(!(s&&i.enableClose!==!1)||o)return null;let l=e=>{t?.(e),e.stopPropagation(),a(i.id)};return I(`button`,{"aria-label":`Close ${i.name}`,...n,"data-dashfoo":`tab-close`,onClick:l,tabIndex:r===c?0:-1,type:`button`,children:e??I(bt,{})})},kt={display:`flex`,flexShrink:0},At={display:`flex`,minWidth:0,overflowX:`auto`},jt=({style:e,...t})=>I(`div`,{...t,"data-dashfoo":`tabstrip`,style:{...kt,...e}}),Mt=({onKeyDown:e,ref:t,style:n,...r})=>{let i=J(e=>e.node),a=J(e=>e.registerTablist),o=J(e=>e.selectTab),s=t=>{if(e?.(t),t.defaultPrevented||!(t.target instanceof HTMLElement)||!t.target.closest(`[role="tab"]`))return;let n=i.children.length;if(n===0)return;let r={ArrowLeft:(i.selected-1+n)%n,ArrowRight:(i.selected+1)%n,End:n-1,Home:0}[t.key];r!==void 0&&(t.preventDefault(),o(r,{focus:!0}))},c=T(()=>X(a,t),[a,t]);return I(`div`,{"aria-label":i.name??`Tabs`,...r,"aria-orientation":`horizontal`,"data-dashfoo":`tablist`,onKeyDown:s,ref:c,role:`tablist`,style:{...At,...n},tabIndex:-1})},Nt={alignItems:`center`,display:`flex`,flexShrink:0,marginInlineStart:`auto`},Pt=({style:e,...t})=>I(`div`,{...t,"data-dashfoo":`tabset-toolbar`,style:{...Nt,...e}}),Ft=({children:e,ref:t,...n})=>{let r=J(e=>e.activeTab?.name??``),i=J(e=>e.isMaximized),a=J(e=>e.node),o=!W(e=>e.draggableTabsets)||i,{ref:s}=de(a.id,o,r),c=T(()=>X(s,t),[s,t]);return o?null:I(`button`,{"aria-label":`Move tabset`,...n,"data-dashfoo":`tabset-grip`,ref:c,type:`button`,children:e??I(xt,{})})},It=({children:e,onClick:t,...n})=>{let r=J(e=>e.isMaximized),i=J(e=>e.showMaximize),a=J(e=>e.toggleMaximize);if(!i)return null;let o=e=>{t?.(e),a()};return I(`button`,{"aria-label":r?`Restore`:`Maximize`,...n,"aria-pressed":r,"data-dashfoo":`tabset-maximize`,onClick:o,type:`button`,children:e??I(St,{maximized:r})})},Lt=({children:e,onClick:t,...n})=>{let r=W(e=>e.floatable),i=W(e=>e.dispatch),a=J(e=>e.isMaximized),o=J(e=>e.node),s=qe();if(!r||a)return null;if(!s)return G(`float-no-layer`,`Tabset.FloatButton needs a <Layout.FloatLayer> around the layout (DashfooLayout adds one); the float control is hidden`),null;let c=e=>{t?.(e),i({geometry:Ye(e.currentTarget),tabsetId:o.id,type:`floatTabset`})};return I(`button`,{"aria-label":`Float panel`,...n,"data-dashfoo":`tabset-float`,onClick:c,type:`button`,children:e??I(Ct,{})})},Rt=I(ot,{}),zt=()=>{let e=W(e=>e.draggableTabsets),t=W(e=>e.floatable),n=W(e=>e.renderTabsetToolbar),r=W(e=>e.tabLocation),i=W(e=>e.tabStripEnabled),a=J(e=>e.isMaximized),o=J(e=>e.node),s=J(e=>e.overflowItems.length),c=J(e=>e.showMaximize)||n!==void 0||s>0||t&&!a||e&&!a,l=i?L(jt,{children:[I(Mt,{children:o.children.map(e=>L(_t,{tab:e,children:[I(vt,{}),I(Dt,{}),I(Ot,{})]},e.id))}),c?L(Pt,{children:[I(ut,{}),I(Ft,{}),n?.(o),I(Lt,{}),I(It,{})]}):null]}):null;return r===`bottom`?L(F,{children:[Rt,l]}):L(F,{children:[l,Rt]})},Bt=({node:e})=>I(ht,{node:e,children:I(zt,{})}),Vt=e=>`${e.value}${e.unit}`,Ht=e=>e?.unit===`px`?e.value:void 0,Ut={display:`flex`,flex:1,minHeight:0,minWidth:0},Wt=.01,Gt=(e,t)=>e.reduce((e,n)=>(e[n.id]=(n.weight??1)/t*100,e),{}),Kt=(e,t)=>t.map(t=>e[t.id]??0),qt=(e,t)=>t.reduce((t,n,r)=>(t[n.id]=e[r]??0,t),{}),Jt=(e,t)=>{let n=Object.keys(e),r=Object.keys(t);return n.length===r.length?r.every(n=>Math.abs((e[n]??NaN)-t[n])<=Wt):!1},Yt=(e,t,n)=>{let r=Ht(e.min);if(r!==void 0)return r;if(e.min!==void 0)return;if(e.type===`tabset`)return n;let i=[];for(let r of e.children){let e=Yt(r,t,n);if(e===void 0)return;i.push(e)}if(i.length!==0)return e.orientation===t?i.reduce((e,t)=>e+t,0):Math.max(...i)},Xt=({node:e,renderTabset:t})=>{let n=W(e=>e.dispatch),r=W(e=>e.resizableSplits),i=W(e=>e.tabsetMinSize),a=W(e=>e.snap),o=e.snap??a,s=l(o),c=e.orientation===`row`?`horizontal`:`vertical`,d=e.children.reduce((e,t)=>e+(t.weight??1),0),f=T(()=>Gt(e.children,d),[e.children,d]),p=E(!1),m=E(null),g=E(null),_=E(!1),v=E(null),y=E(!1),b=E(null),[x,S]=D(null),C=e=>{e!==b.current&&(b.current=e,S(e))},O=e=>{let t=g.current;t&&(e?t.dataset.dashfooSnapping=`true`:delete t.dataset.dashfooSnapping)};return w(()=>{let e=m.current;if(!e)return;let t=e.getLayout();if(!(Object.keys(t).length===Object.keys(f).length&&Object.keys(f).every(e=>e in t))||Jt(t,f))return;_.current=!0,e.setLayout(f);let n=requestAnimationFrame(()=>{_.current=!1});return()=>{cancelAnimationFrame(n),_.current=!1}},[f]),I(R,{"data-dashfoo":`row`,disabled:!r,elementRef:g,groupRef:m,onLayoutChange:s?t=>{if(y.current||_.current||!r||o===null||!s)return;let n=v.current;if(n===null)return;let{sizes:i,snapped:a}=u(Kt(t,e.children),n,o);if(C(a?n:null),!a){O(!1);return}O(!0);let c=m.current,l=qt(i,e.children);!c||Jt(t,l)||(y.current=!0,c.setLayout(l),y.current=!1)}:void 0,onLayoutChanged:t=>{if(!p.current){p.current=!0;return}if(_.current)return;let i=v.current;if(v.current=null,C(null),O(!1),!r)return;let a=e.children.map(e=>t[e.id]??e.weight??1);i!==null&&o!==null&&s&&(a=u(a,i,o).sizes),a.some((t,n)=>Math.abs(t-(e.children[n]?.weight??1))>Wt)&&n({rowId:e.id,type:`adjustSplit`,weights:a})},orientation:c,style:Ut,children:e.children.map((n,a)=>{let o=(n.weight??1)/d*100,c=n.min?Vt(n.min):void 0;if(c===void 0){let t=Yt(n,e.orientation,i);c=t===void 0?void 0:`${t}px`}let l=n.max?Vt(n.max):void 0;return L(h,{children:[a>0?I(ne,{"data-dashfoo":`splitter`,"data-dashfoo-snapped":x===a-1?`true`:void 0,disabled:!r,onPointerDown:s&&r?()=>{v.current=a-1}:void 0}):null,I(z,{defaultSize:`${o}%`,id:n.id,maxSize:l,minSize:c,children:n.type===`row`?I(Xt,{node:n,renderTabset:t}):t?.(n)??I(Bt,{node:n})})]},n.id)})},e.id)},Q=e=>e.name??`Panel`,Zt={alignItems:`center`,display:`flex`,flexShrink:0,gap:`0.375rem`,touchAction:`none`},Qt={flex:1,minWidth:0,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},$t={alignItems:`center`,cursor:`pointer`,display:`inline-flex`,flexShrink:0},en={flex:1,minHeight:0,position:`relative`},tn=[{edges:{x:0,y:-1},key:`n`,style:{cursor:`ns-resize`,height:6,insetInline:10,top:-3}},{edges:{x:0,y:1},key:`s`,style:{bottom:-3,cursor:`ns-resize`,height:6,insetInline:10}},{edges:{x:1,y:0},key:`e`,style:{cursor:`ew-resize`,insetBlock:10,right:-3,width:6}},{edges:{x:-1,y:0},key:`w`,style:{cursor:`ew-resize`,insetBlock:10,left:-3,width:6}},{edges:{x:1,y:-1},key:`ne`,style:{cursor:`nesw-resize`,height:14,right:-4,top:-4,width:14}},{edges:{x:-1,y:-1},key:`nw`,style:{cursor:`nwse-resize`,height:14,left:-4,top:-4,width:14}},{edges:{x:1,y:1},key:`se`,style:{bottom:-4,cursor:`nwse-resize`,height:14,right:-4,width:14}},{edges:{x:-1,y:1},key:`sw`,style:{bottom:-4,cursor:`nesw-resize`,height:14,left:-4,width:14}}],nn=new Map(tn.map(e=>[e.key,e.edges])),rn={height:34,width:168},an=({dispatch:e,node:t,onDone:n})=>{let r=E(null),i=E(!1);b(()=>{r.current?.focus(),r.current?.select()},[]);let a=r=>{let i=r.trim();i&&i!==Q(t)&&e({floatId:t.id,name:i,type:`renameFloat`}),n()};return I(`input`,{"aria-label":`Rename ${Q(t)}`,"data-dashfoo":`float-rename`,defaultValue:Q(t),onBlur:e=>{i.current||(i.current=!0,a(e.currentTarget.value))},onKeyDown:e=>{e.key===`Enter`?(i.current=!0,a(e.currentTarget.value)):e.key===`Escape`&&(i.current=!0,n())},onPointerDown:e=>e.stopPropagation(),ref:r,style:Qt,type:`text`})},on=({dispatch:e,node:t,renamable:n})=>{let[r,i]=D(!1);return n&&r?I(an,{dispatch:e,node:t,onDone:()=>i(!1)}):I(`span`,{"data-dashfoo":`float-title`,onDoubleClick:n?()=>i(!0):void 0,style:Qt,title:n?`Double-click to rename`:void 0,children:Q(t)})},sn=({global:e,node:t,onFocus:n,zIndex:r})=>{let i=W(e=>e.dispatch),a=W(e=>e.closableTabs),o=W(e=>e.draggableTabs),s=W(e=>e.editable),c=W(e=>e.renamableTabs),l=W(e=>e.resizableSplits),u=W(e=>e.keepMounted),d=W(e=>e.renderTab),f=W(e=>e.renderTabLabel),p=W(e=>e.renderTabsetToolbar),m=W(e=>e.snap),h=E(null),g=E(null),_=E(t.geometry),v=E(!1),y=e=>{h.current=e},b=()=>{s&&i({floatId:t.id,minimized:!1,type:`setFloatMinimized`})},x=e=>{let n=h.current;if(!n||!s)return;v.current=!1;let r=e.currentTarget.dataset.edge,i=n.offsetParent;g.current={bounds:{height:i?.clientHeight??0,width:i?.clientWidth??0},edges:r?nn.get(r)??null:null,pointerId:e.pointerId,start:t.geometry,startX:e.clientX,startY:e.clientY},_.current=t.geometry},S=e=>{let n=g.current,r=h.current;if(!n||!r||e.pointerId!==n.pointerId)return;let i=e.clientX-n.startX,a=e.clientY-n.startY;if(!v.current){if(Math.hypot(i,a)<=4)return;v.current=!0,r.setPointerCapture(n.pointerId)}let o=n.edges?Xe(n.start,n.edges,i,a):Je({...n.start,left:n.start.left+i,top:n.start.top+a},n.bounds,t.minimized?rn:void 0);_.current=o,r.style.left=`${o.left}px`,r.style.top=`${o.top}px`,t.minimized||(r.style.width=`${o.width}px`,r.style.height=`${o.height}px`)},C=e=>{let n=g.current;if(!(!n||e.pointerId!==n.pointerId)){if(g.current=null,!v.current){t.minimized&&b();return}h.current?.releasePointerCapture(e.pointerId),i({floatId:t.id,geometry:_.current,type:`moveFloat`})}};if(t.minimized)return L(`button`,{"aria-label":`Restore ${Q(t)} panel`,"data-dashfoo":`float-chip`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),b())},onPointerDown:x,onPointerDownCapture:n,onPointerMove:S,onPointerUp:C,ref:y,style:{left:t.geometry.left,pointerEvents:`auto`,position:`absolute`,top:t.geometry.top,zIndex:r},title:Q(t),type:`button`,children:[I(Ct,{}),I(`span`,{"data-dashfoo":`float-chip-label`,children:Q(t)})]});let w={global:e,layout:t.layout,version:1};return L(`div`,{"data-dashfoo":`float`,onPointerDownCapture:n,onPointerMove:S,onPointerUp:C,ref:y,style:{height:t.geometry.height,left:t.geometry.left,pointerEvents:`auto`,position:`absolute`,top:t.geometry.top,width:t.geometry.width,zIndex:r},children:[L(`div`,{"data-dashfoo":`float-titlebar`,onPointerDown:x,style:s?Zt:{...Zt,cursor:`default`},children:[I(`span`,{"aria-hidden":`true`,"data-dashfoo":`float-grip`,children:I(xt,{})}),I(on,{dispatch:i,node:t,renamable:s}),s&&L(F,{children:[I(`button`,{"aria-label":`Minimize panel`,"data-dashfoo":`float-minimize`,onClick:()=>i({floatId:t.id,minimized:!0,type:`setFloatMinimized`}),onPointerDown:e=>e.stopPropagation(),style:$t,type:`button`,children:I(wt,{})}),I(`button`,{"aria-label":`Dock panel back into the main layout`,"data-dashfoo":`float-dock`,onClick:()=>i({floatId:t.id,type:`dockFloat`}),onPointerDown:e=>e.stopPropagation(),style:$t,type:`button`,children:I(Tt,{})})]})]}),I(`div`,{"data-dashfoo":`float-body`,style:en,children:I(Qe,{closableTabs:a,dispatch:i,draggableTabs:o,draggableTabsets:!1,editable:s,floatable:!1,keepMounted:u,maximizable:!1,model:w,renamableTabs:c,renderTab:d,renderTabLabel:f,renderTabsetToolbar:p,resizableSplits:l,snap:m??void 0,children:I(Ge,{children:I(Xt,{node:t.layout})})})}),s&&tn.map(e=>I(`div`,{"data-dashfoo":`float-resize`,"data-edge":e.key,onPointerDown:x,style:{position:`absolute`,touchAction:`none`,zIndex:1,...e.style}},e.key))]})},cn={inset:0,pointerEvents:`none`,position:`fixed`},ln=({floats:e,global:t})=>{let[n,r]=D(null);return e.length===0?null:I(`div`,{"data-dashfoo":`float-overlay`,style:cn,children:e.map(e=>I(sn,{global:t,node:e,onFocus:()=>r(e.id),zIndex:e.id===n?2:1},e.id))})},$={DragLayer:Ge,FloatLayer:({children:e,floats:t,global:n})=>L(Ke.Provider,{value:!0,children:[e,I(ln,{floats:t,global:n})]}),Root:Qe,Rows:Xt,Tabset:Bt},un=(e,t)=>e===void 0||!t?null:typeof e==`string`?{debounceMs:300,key:e,storage:_e}:{debounceMs:e.debounceMs??300,key:e.key,storage:e.storage??_e},dn=new Set,fn=_((e,t)=>{let{closableTabs:n=!0,components:r,defaultModel:a,draggableTabs:o=!0,draggableTabsets:s=!0,editable:c=!0,factory:l,floatable:u=!1,keepMounted:f=!1,maximizable:p=!0,model:m,onAction:h,onActiveTabsetChange:g,onMaximizedTabsetChange:_,onModelChange:b,persist:x,renamableTabs:C=!0,renderTabLabel:w,renderTabsetToolbar:D,resizableSplits:O=!0,responsive:k,snap:A}=e,j=ve(T(()=>un(x,a!==void 0),[x,a]),a),ee=v((e,t)=>{j.save(e),b?.(e,t)},[b,j]),M=we({defaultModel:j.initialModel??a,model:m,onAction:h,onActiveTabsetChange:g,onMaximizedTabsetChange:_,onModelChange:ee}),N=y(H)!==null;S(t,()=>({addTab:(e,t)=>M.dispatch({index:t.index,location:t.location??`center`,tab:e,targetId:t.targetId,type:`addNode`}),canRedo:M.canRedo,canUndo:M.canUndo,closeTab:e=>M.dispatch({tabId:e,type:`deleteTab`}),dispatch:M.dispatch,dockFloat:e=>M.dispatch({floatId:e,type:`dockFloat`}),floatTab:e=>M.dispatch({tabId:e,type:`floatTab`}),getModel:()=>M.model,maximizeTabset:e=>M.dispatch({tabsetId:e,type:`setMaximizedTabset`}),redo:M.redo,renameTab:(e,t)=>M.dispatch({name:t,tabId:e,type:`renameTab`}),resetLayout:()=>{j.clear(),a!==void 0&&M.setModel(a)},selectTab:(e,t)=>M.dispatch({index:t,tabsetId:e,type:`selectTab`}),undo:M.undo}),[a,j,M]);let te=v(e=>{if(l)return l(e);let t=r?.[e.component];return t?I(t,{node:e}):(r&&!dn.has(e.component)&&(dn.add(e.component),console.warn(`[dashfoo] no component registered for "${e.component}"`)),null)},[r,l]),[P,F]=Se(),L=k!==void 0&&F<=k.maxWidth,R=T(()=>L?d(M.model,k?.orientation):M.model,[L,k?.orientation,M.model]),z=E(L);z.current=L;let ne=v(e=>{z.current&&e.type===`adjustSplit`||M.dispatch(e)},[M]),B=R.maximizedTabsetId?i(R,R.maximizedTabsetId):void 0,V=I($.FloatLayer,{floats:M.model.floats??[],global:M.model.global,children:I($.DragLayer,{children:B?I($.Tabset,{node:B}):I($.Rows,{node:R.layout})})});return I($.Root,{closableTabs:n,dispatch:ne,draggableTabs:L?!1:o,draggableTabsets:L?!1:s,editable:c,floatable:L?!1:u,keepMounted:f,maximizable:p,model:R,renamableTabs:C,renderTab:te,renderTabLabel:w,renderTabsetToolbar:D,resizableSplits:L?!1:O,rootRef:P,snap:A,children:N?V:I(Te,{children:V})})});fn.displayName=`DashfooLayout`;const pn={Badge:e=>I(`span`,{...e,"data-dashfoo":`panel-badge`}),Body:e=>I(`div`,{...e,"data-dashfoo":`panel-body`}),Header:e=>I(`div`,{...e,"data-dashfoo":`panel-header`}),Icon:e=>I(`span`,{...e,"data-dashfoo":`panel-icon`}),Root:e=>I(`div`,{...e,"data-dashfoo":`panel`}),Title:e=>I(`span`,{...e,"data-dashfoo":`panel-title`})},mn={CloseButton:Ot,Content:ot,FloatButton:Lt,Grip:Ft,MaximizeButton:It,OverflowMenu:ut,RenameInput:Dt,Root:ht,Tab:_t,Tablist:Mt,TabStrip:jt,Toolbar:Pt,Trigger:vt};export{Te as DashfooDragProvider,fn as DashfooLayout,$ as Layout,pn as Panel,mn as Tabset,xe as activeBreakpoint,_e as localStorageAdapter,be as matchBreakpoint,ge as memoryStorageAdapter,Se as useContainerWidth,we as useDashfooStore,me as useDragSubject,he as useDropIntent,pe as useExternalTabSource,W as useLayout,ve as usePersistence,Ce as useResponsiveModel,Y as useTab,J as useTabset};
+`;
+const preventActivation = (event, source) => {
+	const { target } = event;
+	if (!(target instanceof Element)) return false;
+	const interactive = target.closest(INTERACTIVE_SELECTOR);
+	return interactive !== null && interactive !== source.element;
+};
+const createDragManager = () => new DragDropManager({
+	plugins: (defaults) => defaults.filter((plugin) => plugin !== Accessibility && plugin !== Feedback),
+	sensors: () => [PointerSensor.configure({ preventActivation })]
+});
+const DragContext = createContext(null);
+const SharedDragManagerContext = createContext(null);
+const createDragSubjectStore = () => createStore(() => ({
+	intent: null,
+	intentOwner: null,
+	subject: null
+}));
+const sameDropIntent = (a, b) => a === b || a !== null && b !== null && a.index === b.index && a.location === b.location && a.targetId === b.targetId;
+const sameDragSubject = (a, b) => a === b || a !== null && b !== null && a.id === b.id && a.kind === b.kind;
+const nullSubjectStore = createDragSubjectStore();
+const DragSubjectStoreContext = createContext(null);
+const useDraggableHandle = () => {
+	const elementRef = useRef(null);
+	const draggableRef = useRef(null);
+	return {
+		draggableRef,
+		elementRef,
+		ref: useCallback((element) => {
+			elementRef.current = element;
+			if (draggableRef.current) draggableRef.current.element = element ?? void 0;
+		}, [])
+	};
+};
+const useDraggableEntity = (descriptor, disabled, label) => {
+	const context = useContext(DragContext);
+	const sharedManager = useContext(SharedDragManagerContext);
+	const manager = context?.manager ?? sharedManager;
+	const { draggableRef, elementRef, ref } = useDraggableHandle();
+	const { data, id } = descriptor;
+	useEffect(() => {
+		if (!manager || disabled) return;
+		const draggable = new Draggable({
+			data: {
+				...data,
+				label: ""
+			},
+			id
+		}, manager);
+		draggable.element = elementRef.current ?? void 0;
+		draggableRef.current = draggable;
+		return () => {
+			draggable.destroy();
+			draggableRef.current = null;
+		};
+	}, [
+		data,
+		disabled,
+		draggableRef,
+		elementRef,
+		id,
+		manager
+	]);
+	useEffect(() => {
+		const draggable = draggableRef.current;
+		if (draggable) draggable.data = {
+			...data,
+			label
+		};
+	}, [
+		data,
+		draggableRef,
+		label
+	]);
+	return { ref };
+};
+const useTabDraggable = (tabId, disabled = false, label = "") => {
+	return useDraggableEntity({
+		data: useMemo(() => ({ type: "tab" }), []),
+		id: tabId
+	}, disabled, label);
+};
+const useTabsetDraggable = (tabsetId, disabled = false, label = "") => {
+	return useDraggableEntity({
+		data: useMemo(() => ({
+			tabsetId,
+			type: "tabset"
+		}), [tabsetId]),
+		id: `grip-${tabsetId}`
+	}, disabled, label);
+};
+const useTabsetDroppable = (tabsetId) => {
+	const context = useContext(DragContext);
+	return { ref: useCallback((element) => {
+		context?.registerTabset(tabsetId, element);
+	}, [context, tabsetId]) };
+};
+const useExternalTabSource = ({ createTab, disabled = false, label = "" }) => {
+	const id = useId();
+	const createTabRef = useRef(createTab);
+	useEffect(() => {
+		createTabRef.current = createTab;
+	});
+	return useDraggableEntity({
+		data: useMemo(() => ({
+			createTab: () => createTabRef.current(),
+			type: "external"
+		}), []),
+		id: `external-${id}`
+	}, disabled, label);
+};
+const useDragSubject = () => {
+	return useStore(useContext(DragSubjectStoreContext) ?? nullSubjectStore, (state) => state.subject);
+};
+const useDropIntent = () => {
+	return useStore(useContext(DragSubjectStoreContext) ?? nullSubjectStore, (state) => state.intent);
+};
+
+//#endregion
+//#region src/hooks/persistence.ts
+const memoryStorageAdapter = () => {
+	const store = /* @__PURE__ */ new Map();
+	return {
+		getItem: (key) => store.get(key) ?? null,
+		removeItem: (key) => {
+			store.delete(key);
+		},
+		setItem: (key, value) => {
+			store.set(key, value);
+		}
+	};
+};
+const localStorageAdapter = {
+	getItem: (key) => {
+		if (typeof window === "undefined") return null;
+		try {
+			return window.localStorage.getItem(key);
+		} catch {
+			return null;
+		}
+	},
+	removeItem: (key) => {
+		if (typeof window === "undefined") return;
+		try {
+			window.localStorage.removeItem(key);
+		} catch {}
+	},
+	setItem: (key, value) => {
+		if (typeof window === "undefined") return;
+		try {
+			window.localStorage.setItem(key, value);
+		} catch (error) {
+			console.warn("[dashfoo] failed to persist layout", error);
+		}
+	}
+};
+const usePersistence = (config, defaultModel) => {
+	const configRef = useRef(config);
+	useEffect(() => {
+		configRef.current = config;
+	});
+	const [initialModel] = useState(() => {
+		if (config === null || defaultModel === void 0) return defaultModel;
+		const raw = config.storage.getItem(config.key);
+		if (raw === null) return defaultModel;
+		try {
+			return fromJSON(raw);
+		} catch {
+			return defaultModel;
+		}
+	});
+	useEffect(() => {
+		const current = configRef.current;
+		if (current === null) return;
+		const raw = current.storage.getItem(current.key);
+		if (raw === null) return;
+		try {
+			fromJSON(raw);
+		} catch (error) {
+			console.warn("[dashfoo] discarding unreadable persisted layout", error);
+			current.storage.removeItem(current.key);
+		}
+	}, []);
+	const loadedKey = useRef(config?.key);
+	useEffect(() => {
+		if (config !== null && config.key !== loadedKey.current) {
+			console.warn("[dashfoo] persist key changed for a mounted layout; the displayed layout still reflects the previous key — remount (key={persistKey}) to load the new key");
+			loadedKey.current = config.key;
+		}
+	}, [config]);
+	const timer = useRef(null);
+	const pending = useRef(null);
+	const flush = useCallback(() => {
+		if (timer.current !== null) {
+			clearTimeout(timer.current);
+			timer.current = null;
+		}
+		if (pending.current !== null) {
+			pending.current.storage.setItem(pending.current.key, pending.current.value);
+			pending.current = null;
+		}
+	}, []);
+	const save = useCallback((next) => {
+		const current = configRef.current;
+		if (current === null) return;
+		pending.current = {
+			key: current.key,
+			storage: current.storage,
+			value: toJSON(next)
+		};
+		if (timer.current !== null) clearTimeout(timer.current);
+		timer.current = setTimeout(flush, current.debounceMs);
+	}, [flush]);
+	useEffect(() => {
+		const handlePageHide = () => {
+			flush();
+		};
+		const handleVisibilityChange = () => {
+			if (document.visibilityState === "hidden") flush();
+		};
+		window.addEventListener("pagehide", handlePageHide);
+		document.addEventListener("visibilitychange", handleVisibilityChange);
+		return () => {
+			window.removeEventListener("pagehide", handlePageHide);
+			document.removeEventListener("visibilitychange", handleVisibilityChange);
+			flush();
+		};
+	}, [flush]);
+	const clear = useCallback(() => {
+		if (timer.current !== null) {
+			clearTimeout(timer.current);
+			timer.current = null;
+		}
+		pending.current = null;
+		const current = configRef.current;
+		if (current !== null) current.storage.removeItem(current.key);
+	}, []);
+	return useMemo(() => ({
+		clear,
+		initialModel,
+		save
+	}), [
+		clear,
+		initialModel,
+		save
+	]);
+};
+
+//#endregion
+//#region src/hooks/responsive.ts
+const hasMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+const matchBreakpoint = (breakpoint, width) => {
+	const { query } = breakpoint;
+	if (!query) return true;
+	if ("maxWidth" in query) return width <= query.maxWidth;
+	return hasMatchMedia() && window.matchMedia(query.media).matches;
+};
+const activeBreakpoint = (breakpoints, width) => {
+	const fallback = breakpoints.at(-1);
+	if (!fallback) throw new Error("useResponsiveModel requires at least one breakpoint.");
+	return breakpoints.find((breakpoint) => matchBreakpoint(breakpoint, width)) ?? fallback;
+};
+const useContainerWidth = () => {
+	const [width, setWidth] = useState(Number.POSITIVE_INFINITY);
+	const observerRef = useRef(null);
+	const containerRef = useCallback((element) => {
+		observerRef.current?.disconnect();
+		if (!element) return;
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) setWidth(entry.contentRect.width);
+		});
+		observer.observe(element);
+		observerRef.current = observer;
+	}, []);
+	useEffect(() => () => {
+		observerRef.current?.disconnect();
+	}, []);
+	return [containerRef, width];
+};
+const useResponsiveModel = ({ breakpoints }) => {
+	const [containerRef, width] = useContainerWidth();
+	const [, setMediaTick] = useState(0);
+	useEffect(() => {
+		if (!hasMatchMedia()) return;
+		const lists = breakpoints.flatMap((breakpoint) => breakpoint.query && "media" in breakpoint.query ? [window.matchMedia(breakpoint.query.media)] : []);
+		if (lists.length === 0) return;
+		const handleChange = () => {
+			setMediaTick((tick) => tick + 1);
+		};
+		for (const list of lists) list.addEventListener("change", handleChange);
+		return () => {
+			for (const list of lists) list.removeEventListener("change", handleChange);
+		};
+	}, [breakpoints]);
+	const active = activeBreakpoint(breakpoints, width);
+	const isCompact = active.compact === true;
+	return {
+		breakpoint: active.id,
+		containerRef,
+		draggableTabs: !isCompact,
+		draggableTabsets: !isCompact,
+		isCompact,
+		model: active.model,
+		resizableSplits: !isCompact
+	};
+};
+
+//#endregion
+//#region src/hooks/store.ts
+const useDashfooStore = (options) => {
+	const { defaultModel, model: controlledModel, onAction, onActiveTabsetChange, onMaximizedTabsetChange, onModelChange } = options;
+	const initialModel = controlledModel ?? defaultModel;
+	if (initialModel === void 0) throw new Error("useDashfooStore requires either a `model` or a `defaultModel`.");
+	const actorRef = useActorRef(dashfooMachine, { input: { model: normalize(initialModel) } });
+	const history = useSelector(actorRef, (snapshot) => snapshot.context.history);
+	useEffect(() => {
+		if (controlledModel !== void 0) actorRef.send({
+			model: normalize(controlledModel),
+			type: "SET_MODEL"
+		});
+	}, [actorRef, controlledModel]);
+	const model = controlledModel ?? history.present;
+	const notify = useCallback((before, after, action) => {
+		if (Object.is(before, after)) return;
+		onModelChange?.(after, action);
+		if (after.activeTabsetId !== before.activeTabsetId) onActiveTabsetChange?.(after.activeTabsetId);
+		if (after.maximizedTabsetId !== before.maximizedTabsetId) onMaximizedTabsetChange?.(after.maximizedTabsetId);
+	}, [
+		onModelChange,
+		onActiveTabsetChange,
+		onMaximizedTabsetChange
+	]);
+	const dispatch = useCallback((action) => {
+		const resolved = onAction ? onAction(action) : action;
+		if (!resolved) return;
+		const transition = (() => {
+			if (controlledModel === void 0) {
+				const before = actorRef.getSnapshot().context.history.present;
+				actorRef.send({
+					action: resolved,
+					type: "DISPATCH"
+				});
+				return {
+					after: actorRef.getSnapshot().context.history.present,
+					before
+				};
+			}
+			return {
+				after: reducer(controlledModel, resolved),
+				before: normalize(controlledModel)
+			};
+		})();
+		notify(transition.before, transition.after, resolved);
+	}, [
+		actorRef,
+		controlledModel,
+		notify,
+		onAction
+	]);
+	const undo = useCallback(() => {
+		if (controlledModel !== void 0) return;
+		const before = actorRef.getSnapshot().context.history.present;
+		actorRef.send({ type: "UNDO" });
+		const after = actorRef.getSnapshot().context.history.present;
+		notify(before, after);
+	}, [
+		actorRef,
+		controlledModel,
+		notify
+	]);
+	const redo = useCallback(() => {
+		if (controlledModel !== void 0) return;
+		const before = actorRef.getSnapshot().context.history.present;
+		actorRef.send({ type: "REDO" });
+		const after = actorRef.getSnapshot().context.history.present;
+		notify(before, after);
+	}, [
+		actorRef,
+		controlledModel,
+		notify
+	]);
+	const setModel = useCallback((next) => {
+		actorRef.send({
+			model: normalize(next),
+			type: "SET_MODEL"
+		});
+	}, [actorRef]);
+	return useMemo(() => ({
+		canRedo: () => canRedo(actorRef.getSnapshot().context.history),
+		canUndo: () => canUndo(actorRef.getSnapshot().context.history),
+		dispatch,
+		model,
+		redo,
+		setModel,
+		undo
+	}), [
+		actorRef,
+		dispatch,
+		model,
+		redo,
+		setModel,
+		undo
+	]);
+};
+
+//#endregion
+//#region src/components/drag-root.tsx
+const DashfooDragProvider = ({ children }) => {
+	const [manager] = useState(createDragManager);
+	useInsertionEffect(() => () => manager.destroy(), [manager]);
+	const [subjectStore] = useState(createDragSubjectStore);
+	return /* @__PURE__ */ jsx(SharedDragManagerContext.Provider, {
+		value: manager,
+		children: /* @__PURE__ */ jsx(DragSubjectStoreContext.Provider, {
+			value: subjectStore,
+			children
+		})
+	});
+};
+
+//#endregion
+//#region src/hooks/layout-store.ts
+const createLayoutStore = (initial) => createStore(() => initial);
+const LayoutStoreContext = createContext(null);
+const useLayout = (selector) => {
+	const store = useContext(LayoutStoreContext);
+	if (store === null) throw new Error("dashfoo components must be rendered inside <DashfooLayout> or <Layout.Root>.");
+	return useStore(store, selector);
+};
+
+//#endregion
+//#region src/lib/tab-insertion.ts
+const pointInRect = (point, rect) => point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
+const insertionIndex = (rects, pointerX) => {
+	const found = rects.findIndex((rect) => pointerX < rect.x + rect.width / 2);
+	return found === -1 ? rects.length : found;
+};
+const INSERTION_LINE_WIDTH = 4;
+const insertionLineRect = (stripRect, itemRects, index) => {
+	const at = itemRects[index];
+	const last = itemRects.at(-1);
+	const left = (at?.x ?? (last ? last.x + last.width : stripRect.x)) - INSERTION_LINE_WIDTH / 2;
+	return {
+		height: stripRect.height,
+		width: INSERTION_LINE_WIDTH,
+		x: Math.max(stripRect.x, Math.min(left, stripRect.x + stripRect.width - INSERTION_LINE_WIDTH)),
+		y: stripRect.y
+	};
+};
+const shouldAllowDrop = (draggedId, targetId, tabIds) => {
+	if (draggedId === `grip-${targetId}`) return false;
+	if (tabIds.length === 1 && tabIds[0] === draggedId) return false;
+	return true;
+};
+
+//#endregion
+//#region src/lib/warn-once.ts
+const warned = /* @__PURE__ */ new Set();
+const warnOnce = (key, message) => {
+	if (warned.has(key)) return;
+	warned.add(key);
+	console.warn(`[dashfoo] ${message}`);
+};
+
+//#endregion
+//#region src/components/drag-overlays.tsx
+const overlayBase = {
+	boxSizing: "border-box",
+	pointerEvents: "none",
+	position: "fixed",
+	transition: "var(--dashfoo-dock-transition, left 60ms, top 60ms, width 60ms, height 60ms)",
+	zIndex: 9999
+};
+const paneStyle = (zone) => ({
+	...overlayBase,
+	background: "var(--dashfoo-dock-fill, oklch(0.556 0 0 / 0.18))",
+	border: "var(--dashfoo-dock-border-width, 1px) solid var(--dashfoo-dock-border, oklch(0.708 0 0 / 0.75))",
+	borderRadius: "var(--dashfoo-dock-radius, 6px)",
+	height: zone.height,
+	left: zone.x,
+	top: zone.y,
+	width: zone.width
+});
+const lineStyle = (zone) => ({
+	...paneStyle(zone),
+	borderRadius: "var(--dashfoo-dock-line-radius, 2px)"
+});
+const tabItemRects = (strip, excludeId) => [...strip.querySelectorAll("[data-dashfoo=\"tab-item\"]")].flatMap((item) => item.querySelector("[data-dashfoo=\"tab\"]")?.dataset.tabId === excludeId ? [] : [item.getBoundingClientRect()]);
+const DockIndicator = ({ actorRef, getTabsetElement }) => {
+	const intent = useSelector(actorRef, (snapshot) => snapshot.context.intent);
+	const draggedId = useSelector(actorRef, (snapshot) => snapshot.context.subject?.id);
+	if (!intent) return null;
+	const element = getTabsetElement(intent.targetId);
+	if (!element) return null;
+	if (intent.location === "center") {
+		const strip = element.querySelector("[data-dashfoo=\"tabstrip\"]");
+		if (strip) return /* @__PURE__ */ jsx("div", {
+			"data-dashfoo": "dock-indicator",
+			style: lineStyle(insertionLineRect(strip.getBoundingClientRect(), tabItemRects(strip, draggedId), intent.index ?? 0))
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		"data-dashfoo": "dock-indicator",
+		style: paneStyle(zoneRect(element.getBoundingClientRect(), intent.location))
+	});
+};
+const previewStyle = {
+	left: 0,
+	position: "fixed",
+	top: 0,
+	zIndex: 9999
+};
+const DragPreview = ({ overlayRef, preview }) => {
+	if (!preview) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-dashfoo": "drag-preview",
+		ref: overlayRef,
+		style: {
+			...previewStyle,
+			transform: `translate(${preview.x}px, ${preview.y}px)`
+		},
+		children: preview.label
+	});
+};
+
+//#endregion
+//#region src/components/drag-adapter.tsx
+const tabRects = (strip, excludeId) => [...strip.querySelectorAll("[data-dashfoo=\"tab\"]")].flatMap((tab) => tab.dataset.tabId === excludeId ? [] : [tab.getBoundingClientRect()]);
+const intentForTabset = (id, element, point, draggedId) => {
+	const strip = element.querySelector("[data-dashfoo=\"tabstrip\"]");
+	if (strip && pointInRect(point, strip.getBoundingClientRect())) return {
+		index: insertionIndex(tabRects(strip, draggedId), point.x),
+		location: "center",
+		targetId: id
+	};
+	const target = resolveDockTarget(point, element.getBoundingClientRect());
+	const location = target.kind === "tab" ? "center" : `split-${target.edge}`;
+	if (location === "center" && strip) return {
+		index: tabRects(strip, draggedId).length,
+		location,
+		targetId: id
+	};
+	return {
+		location,
+		targetId: id
+	};
+};
+const PREVIEW_OFFSET = {
+	x: 12,
+	y: 8
+};
+const labelOf = (source) => {
+	const raw = source?.data?.label;
+	return typeof raw === "string" ? raw : "";
+};
+const isTabFactory = (value) => typeof value === "function";
+const subjectFor = (source) => {
+	const data = source.data;
+	if (data?.type === "tabset") return {
+		id: String(data.tabsetId),
+		kind: "tabset"
+	};
+	if (data?.type === "external") {
+		if (!isTabFactory(data.createTab)) {
+			console.warn("[dashfoo] external drag source is missing its createTab function");
+			return null;
+		}
+		let candidate;
+		try {
+			candidate = data.createTab();
+		} catch (error) {
+			console.warn("[dashfoo] external drag source createTab threw", error);
+			return null;
+		}
+		const parsed = tabNodeSchema.safeParse(candidate);
+		if (!parsed.success) {
+			console.warn("[dashfoo] external drag source returned an invalid tab", parsed.error);
+			return null;
+		}
+		return {
+			id: String(source.id),
+			kind: "external",
+			tab: parsed.data
+		};
+	}
+	return {
+		id: String(source.id),
+		kind: "tab"
+	};
+};
+const DragProvider = ({ children, onCommit, splitDock }) => {
+	const actorRef = useActorRef(dragDockMachine);
+	const layoutStore = useContext(LayoutStoreContext);
+	const [tabsets] = useState(() => /* @__PURE__ */ new Map());
+	const overlayRef = useRef(null);
+	const [preview, setPreview] = useState(null);
+	const sharedManager = useContext(SharedDragManagerContext);
+	const [ownManager] = useState(() => sharedManager ? null : createDragManager());
+	useInsertionEffect(() => () => ownManager?.destroy(), [ownManager]);
+	const manager = sharedManager ?? ownManager;
+	if (manager === null) throw new Error("[dashfoo] DashfooDragProvider unmounted while its layout is still mounted; keep the provider above the layout or remount the layout");
+	const inheritedStore = useContext(DragSubjectStoreContext);
+	const [subjectStore] = useState(() => inheritedStore ?? createDragSubjectStore());
+	const ownerId = useId();
+	useEffect(() => {
+		const subscription = actorRef.subscribe((snapshot) => {
+			const { intent, subject } = snapshot.context;
+			const state = subjectStore.getState();
+			if (intent !== null) {
+				if (!sameDropIntent(state.intent, intent) || state.intentOwner !== ownerId) subjectStore.setState({
+					intent,
+					intentOwner: ownerId
+				});
+			} else if (state.intent !== null && state.intentOwner === ownerId) subjectStore.setState({
+				intent: null,
+				intentOwner: null
+			});
+			if (!sameDragSubject(subjectStore.getState().subject, subject)) subjectStore.setState({ subject });
+		});
+		return () => {
+			subscription.unsubscribe();
+		};
+	}, [
+		actorRef,
+		ownerId,
+		subjectStore
+	]);
+	const onCommitRef = useRef(onCommit);
+	const splitDockRef = useRef(splitDock);
+	useEffect(() => {
+		onCommitRef.current = onCommit;
+		splitDockRef.current = splitDock;
+	});
+	useEffect(() => {
+		const subscription = actorRef.on("COMMIT", (emitted) => {
+			if (layoutStore?.getState().editable === false) return;
+			const commit = onCommitRef.current ?? layoutStore?.getState().dispatch;
+			if (!commit) {
+				warnOnce("drag-layer-no-commit", "Layout.DragLayer has neither an onCommit prop nor a <Layout.Root> above it; drops are ignored");
+				return;
+			}
+			commit(emitted.action);
+		});
+		return () => {
+			subscription.unsubscribe();
+		};
+	}, [actorRef, layoutStore]);
+	const registerTabset = useCallback((id, element) => {
+		if (element) tabsets.set(id, element);
+		else tabsets.delete(id);
+	}, [tabsets]);
+	const getTabsetElement = useCallback((id) => tabsets.get(id), [tabsets]);
+	const attachOverlay = useCallback((element) => {
+		overlayRef.current = element;
+	}, []);
+	useEffect(() => {
+		const tabsetAt = (point) => {
+			const top = document.elementFromPoint(point.x, point.y);
+			if (!top) return;
+			for (const [id, element] of tabsets) if (element.contains(top)) return {
+				element,
+				id
+			};
+		};
+		const resolveIntent = (targetId, element, point, draggedId) => {
+			if (layoutStore?.getState().editable === false) return null;
+			if (!shouldAllowDrop(draggedId, targetId, [...element.querySelectorAll("[data-dashfoo=\"tab\"]")].map((tab) => tab.dataset.tabId ?? ""))) return null;
+			const intent = intentForTabset(targetId, element, point, draggedId);
+			if (!(splitDockRef.current ?? layoutStore?.getState().splitDock ?? true) && intent.location.startsWith("split-")) return {
+				location: "center",
+				targetId
+			};
+			return intent;
+		};
+		const positionOverlay = (point) => {
+			const element = overlayRef.current;
+			if (element) element.style.transform = `translate(${point.x + PREVIEW_OFFSET.x}px, ${point.y + PREVIEW_OFFSET.y}px)`;
+		};
+		const handleStart = (event) => {
+			const source = event.operation.source;
+			if (!source) return;
+			const subject = subjectFor(source);
+			if (!subject) return;
+			const point = event.operation.position.current;
+			setPreview({
+				label: labelOf(source),
+				x: point.x + PREVIEW_OFFSET.x,
+				y: point.y + PREVIEW_OFFSET.y
+			});
+			actorRef.send({
+				subject,
+				type: "START"
+			});
+		};
+		const handleMove = (event) => {
+			const op = event.operation;
+			const point = op.position.current;
+			positionOverlay(point);
+			const draggedId = op.source ? String(op.source.id) : void 0;
+			const hit = tabsetAt(point);
+			actorRef.send({
+				intent: hit ? resolveIntent(hit.id, hit.element, point, draggedId) : null,
+				type: "OVER"
+			});
+		};
+		const handleEnd = (event) => {
+			setPreview(null);
+			if (event.canceled) {
+				actorRef.send({ type: "CANCEL" });
+				return;
+			}
+			const op = event.operation;
+			const point = op.position.current;
+			const draggedId = op.source ? String(op.source.id) : void 0;
+			const hit = tabsetAt(point);
+			if (hit) actorRef.send({
+				intent: resolveIntent(hit.id, hit.element, point, draggedId),
+				type: "OVER"
+			});
+			actorRef.send({ type: "DROP" });
+		};
+		const offStart = manager.monitor.addEventListener("dragstart", handleStart);
+		const offMove = manager.monitor.addEventListener("dragmove", handleMove);
+		const offEnd = manager.monitor.addEventListener("dragend", handleEnd);
+		return () => {
+			offStart();
+			offMove();
+			offEnd();
+		};
+	}, [
+		actorRef,
+		layoutStore,
+		manager,
+		tabsets
+	]);
+	const contextValue = useMemo(() => ({
+		manager,
+		registerTabset
+	}), [manager, registerTabset]);
+	return /* @__PURE__ */ jsx(DragContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs(DragSubjectStoreContext.Provider, {
+			value: subjectStore,
+			children: [
+				children,
+				/* @__PURE__ */ jsx(DockIndicator, {
+					actorRef,
+					getTabsetElement
+				}),
+				/* @__PURE__ */ jsx(DragPreview, {
+					overlayRef: attachOverlay,
+					preview
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+//#region src/components/float-context.ts
+const FloatLayerContext = createContext(false);
+const useHasFloatLayer = () => useContext(FloatLayerContext);
+
+//#endregion
+//#region src/lib/float-geometry.ts
+const MIN_WIDTH = 200;
+const MIN_HEIGHT = 120;
+const DEFAULT_WIDTH = 480;
+const DEFAULT_HEIGHT = 340;
+const LIFT_OFFSET = 16;
+const clampToBounds = (rect, bounds, size = rect) => ({
+	height: rect.height,
+	left: Math.max(0, Math.min(rect.left, Math.max(0, bounds.width - size.width))),
+	top: Math.max(0, Math.min(rect.top, Math.max(0, bounds.height - size.height))),
+	width: rect.width
+});
+const measureFloatRect = (element) => {
+	const rect = (element.closest("[data-dashfoo=\"tabset\"]") ?? element).getBoundingClientRect();
+	return clampToBounds({
+		height: Math.max(MIN_HEIGHT, Math.min(Math.round(rect.height), DEFAULT_HEIGHT)),
+		left: Math.round(rect.left) + LIFT_OFFSET,
+		top: Math.round(rect.top) + LIFT_OFFSET,
+		width: Math.max(MIN_WIDTH, Math.min(Math.round(rect.width), DEFAULT_WIDTH))
+	}, {
+		height: window.innerHeight,
+		width: window.innerWidth
+	});
+};
+const resizeRect = (start, edges, dx, dy) => {
+	let { height, left, top, width } = start;
+	if (edges.x === 1) width = Math.max(MIN_WIDTH, start.width + dx);
+	else if (edges.x === -1) {
+		width = Math.max(MIN_WIDTH, start.width - dx);
+		left = Math.max(0, start.left + (start.width - width));
+	}
+	if (edges.y === 1) height = Math.max(MIN_HEIGHT, start.height + dy);
+	else if (edges.y === -1) {
+		height = Math.max(MIN_HEIGHT, start.height - dy);
+		top = Math.max(0, start.top + (start.height - height));
+	}
+	return {
+		height,
+		left,
+		top,
+		width
+	};
+};
+
+//#endregion
+//#region src/components/layout-root.tsx
+const DEFAULT_TABSET_MIN_SIZE = 320;
+const rootStyle = {
+	display: "flex",
+	height: "100%",
+	position: "relative",
+	width: "100%"
+};
+const LayoutRoot = ({ children, closableTabs = true, dispatch, draggableTabs = true, draggableTabsets = true, editable = true, floatable = false, keepMounted = false, maximizable = true, model, renamableTabs = true, renderTab, renderTabLabel, renderTabsetToolbar, resizableSplits = true, rootRef, snap, style, ...props }) => {
+	const global = model.global;
+	const snapshot = {
+		closableTabs: editable && closableTabs && global.tabEnableClose !== false,
+		dispatch,
+		draggableTabs: editable && draggableTabs && global.tabEnableDrag !== false,
+		draggableTabsets: editable && draggableTabsets,
+		editable,
+		floatable: editable && floatable,
+		keepMounted,
+		maximizable: maximizable && global.tabSetEnableMaximize !== false,
+		maximizedTabsetId: model.maximizedTabsetId,
+		renamableTabs: editable && renamableTabs && global.tabEnableRename !== false,
+		renderTab,
+		renderTabLabel,
+		renderTabsetToolbar,
+		resizableSplits: editable && resizableSplits && global.enableSplitResize !== false,
+		snap: snap ?? global.snap ?? null,
+		splitDock: global.enableSplitDock !== false,
+		tabLocation: global.tabLocation ?? "top",
+		tabsetMinSize: global.tabSetMinSize ?? DEFAULT_TABSET_MIN_SIZE,
+		tabStripEnabled: global.tabSetEnableTabStrip !== false
+	};
+	const [store] = useState(() => createLayoutStore(snapshot));
+	useLayoutEffect(() => {
+		store.setState(snapshot);
+	});
+	const layoutStyle = global.splitterSize === void 0 ? {
+		...rootStyle,
+		...style
+	} : {
+		...rootStyle,
+		"--dashfoo-splitter-size": `${global.splitterSize}px`,
+		...style
+	};
+	return /* @__PURE__ */ jsx(LayoutStoreContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			"data-dashfoo": "layout",
+			ref: rootRef,
+			style: layoutStyle,
+			children
+		})
+	});
+};
+
+//#endregion
+//#region src/lib/tab-ids.ts
+const tabDomId = (tabsetId, tabId) => `dashfoo-tab-${tabsetId}-${tabId}`;
+const panelDomId = (tabsetId) => `dashfoo-panel-${tabsetId}`;
+
+//#endregion
+//#region src/components/tabset/tabset-store.ts
+const tabButtonIn = (scope, tabsetId, tabId) => scope?.querySelector(`#${CSS.escape(tabDomId(tabsetId, tabId))}`) ?? null;
+const createTabsetStore = (initial) => createStore((set, get) => ({
+	...initial,
+	cancelRename: () => set({ editingTabId: null }),
+	closeTab: (tabId) => {
+		set({ restoreFocus: true });
+		get().dispatch({
+			tabId,
+			type: "deleteTab"
+		});
+	},
+	commitRename: (tabId, value) => {
+		set({ editingTabId: null });
+		const { node, renameTab } = get();
+		const trimmed = value.trim();
+		const current = node.children.find((tab) => tab.id === tabId)?.name;
+		if (trimmed && trimmed !== current) renameTab(tabId, trimmed);
+	},
+	editingTabId: null,
+	overflowItems: [],
+	registerRenameInput: () => {
+		set((state) => ({ renameInputCount: state.renameInputCount + 1 }));
+		return () => set((state) => ({ renameInputCount: state.renameInputCount - 1 }));
+	},
+	registerTablist: (element) => {
+		if (element) {
+			const current = get().tablistElement;
+			if (current && current !== element) warnOnce(`duplicate-tablist-${get().node.id}`, "more than one <Tabset.Tablist> under the same <Tabset.Root>; the last one wins for keyboard focus and overflow");
+			set({ tablistElement: element });
+			return;
+		}
+		set({ tablistElement: null });
+	},
+	renameInputCount: 0,
+	renameTab: (tabId, name) => get().dispatch({
+		name,
+		tabId,
+		type: "renameTab"
+	}),
+	restoreFocus: false,
+	selectOverflowTab: (tabId) => {
+		const { dispatch, node, tablistElement } = get();
+		const index = node.children.findIndex((tab) => tab.id === tabId);
+		if (index === -1) return;
+		dispatch({
+			index,
+			tabsetId: node.id,
+			type: "selectTab"
+		});
+		tabButtonIn(tablistElement, node.id, tabId)?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	},
+	selectTab: (index, options) => {
+		const { dispatch, node, tablistElement } = get();
+		dispatch({
+			index,
+			tabsetId: node.id,
+			type: "selectTab"
+		});
+		if (options?.focus) {
+			const tabId = node.children[index]?.id;
+			if (tabId) tabButtonIn(tablistElement, node.id, tabId)?.focus();
+		}
+	},
+	startEditing: (tabId) => {
+		const { node, renameInputCount, tabsRenamable } = get();
+		const tab = node.children.find((child) => child.id === tabId);
+		if (!tabsRenamable || tab?.enableRename === false) return;
+		if (renameInputCount === 0) {
+			warnOnce(`missing-rename-input-${node.id}`, "startEditing needs a <Tabset.RenameInput> in the composition; ignoring");
+			return;
+		}
+		set({ editingTabId: tabId });
+	},
+	tablistElement: null,
+	toggleMaximize: () => {
+		const { dispatch, isMaximized, node } = get();
+		dispatch({
+			tabsetId: isMaximized ? null : node.id,
+			type: "setMaximizedTabset"
+		});
+	}
+}));
+const TabsetStoreContext = createContext(null);
+const useTabset = (selector) => {
+	const store = useContext(TabsetStoreContext);
+	if (store === null) throw new Error("dashfoo Tabset parts must be rendered inside <Tabset.Root>.");
+	return useStore(store, selector);
+};
+const TabContext = createContext(null);
+const useTab = () => {
+	const value = useContext(TabContext);
+	if (value === null) throw new Error("dashfoo tab parts must be rendered inside <Tabset.Tab>.");
+	return value;
+};
+
+//#endregion
+//#region src/components/tabset/tabset-content.tsx
+const contentStyle = {
+	flex: 1,
+	minHeight: 0,
+	overflow: "auto"
+};
+const TabPanel = ({ render, tab }) => {
+	const renderTab = useLayout((state) => state.renderTab);
+	return render ? render(tab) : renderTab(tab);
+};
+const TabsetContent = ({ children, style, ...props }) => {
+	const node = useTabset((state) => state.node);
+	const visualSelected = useTabset((state) => state.visualSelected);
+	const keepMounted = useLayout((state) => state.keepMounted);
+	const mergedStyle = {
+		...contentStyle,
+		...style
+	};
+	if (keepMounted && node.children.length > 0) return node.children.map((tab, index) => /* @__PURE__ */ jsx("div", {
+		...props,
+		"aria-labelledby": tabDomId(node.id, tab.id),
+		"data-dashfoo": "tabcontent",
+		hidden: index !== visualSelected || void 0,
+		id: index === visualSelected ? panelDomId(node.id) : void 0,
+		role: index === visualSelected ? "tabpanel" : void 0,
+		style: mergedStyle,
+		tabIndex: index === visualSelected ? 0 : void 0,
+		children: /* @__PURE__ */ jsx(TabPanel, {
+			render: children,
+			tab
+		})
+	}, tab.id));
+	const active = node.children[visualSelected];
+	if (active) return /* @__PURE__ */ jsx("div", {
+		...props,
+		"aria-labelledby": tabDomId(node.id, active.id),
+		"data-dashfoo": "tabcontent",
+		id: panelDomId(node.id),
+		role: "tabpanel",
+		style: mergedStyle,
+		tabIndex: 0,
+		children: /* @__PURE__ */ jsx(TabPanel, {
+			render: children,
+			tab: active
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-dashfoo": "tabcontent",
+		style: mergedStyle
+	});
+};
+
+//#endregion
+//#region src/components/tab-overflow.tsx
+const OverflowIcon = () => /* @__PURE__ */ jsxs("svg", {
+	"aria-hidden": "true",
+	fill: "currentColor",
+	height: "10",
+	viewBox: "0 0 10 10",
+	width: "10",
+	children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: "2",
+			cy: "5",
+			r: "1"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "5",
+			cy: "5",
+			r: "1"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "5",
+			r: "1"
+		})
+	]
+});
+const menuStyle = {
+	position: "absolute",
+	right: 0,
+	top: "100%",
+	zIndex: 10
+};
+const TabOverflowMenu = ({ items, onSelect }) => {
+	const [open, setOpen] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(0);
+	const rootRef = useRef(null);
+	const triggerRef = useRef(null);
+	const itemRefs = useRef([]);
+	useEffect(() => {
+		if (!open) return;
+		const handlePointerDown = (event) => {
+			if (event.target instanceof Node && !rootRef.current?.contains(event.target)) setOpen(false);
+		};
+		document.addEventListener("pointerdown", handlePointerDown);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+		};
+	}, [open]);
+	useEffect(() => {
+		if (open) itemRefs.current[0]?.focus();
+	}, [open]);
+	const closeAndReturnFocus = () => {
+		setOpen(false);
+		triggerRef.current?.focus();
+	};
+	const focusItem = (index) => {
+		setActiveIndex(index);
+		itemRefs.current[index]?.focus();
+	};
+	const handleToggle = () => {
+		setActiveIndex(0);
+		setOpen((value) => !value);
+	};
+	const handleSelect = (id) => {
+		onSelect(id);
+		closeAndReturnFocus();
+	};
+	const handleMenuKeyDown = (event) => {
+		const last = items.length - 1;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				focusItem(activeIndex >= last ? 0 : activeIndex + 1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				focusItem(activeIndex <= 0 ? last : activeIndex - 1);
+				break;
+			case "Home":
+				event.preventDefault();
+				focusItem(0);
+				break;
+			case "End":
+				event.preventDefault();
+				focusItem(last);
+				break;
+			case "Escape":
+				event.preventDefault();
+				closeAndReturnFocus();
+				break;
+			default: break;
+		}
+	};
+	const handleFocusOut = (event) => {
+		if (event.relatedTarget instanceof Node && rootRef.current?.contains(event.relatedTarget)) return;
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-dashfoo": "tab-overflow-root",
+		ref: rootRef,
+		style: { position: "relative" },
+		children: [/* @__PURE__ */ jsx("button", {
+			"aria-expanded": open,
+			"aria-haspopup": "menu",
+			"aria-label": "More tabs",
+			"data-dashfoo": "tab-overflow",
+			onClick: handleToggle,
+			ref: triggerRef,
+			type: "button",
+			children: /* @__PURE__ */ jsx(OverflowIcon, {})
+		}), open ? /* @__PURE__ */ jsx("div", {
+			"data-dashfoo": "tab-overflow-menu",
+			onBlur: handleFocusOut,
+			onKeyDown: handleMenuKeyDown,
+			role: "menu",
+			style: menuStyle,
+			tabIndex: -1,
+			children: items.map((item, index) => /* @__PURE__ */ jsx("button", {
+				"data-dashfoo": "tab-overflow-item",
+				onClick: () => handleSelect(item.id),
+				ref: (node) => {
+					itemRefs.current[index] = node;
+				},
+				role: "menuitem",
+				tabIndex: index === activeIndex ? 0 : -1,
+				type: "button",
+				children: item.name
+			}, item.id))
+		}) : null]
+	});
+};
+
+//#endregion
+//#region src/components/tabset/tabset-overflow.tsx
+const TabsetOverflowMenu = () => {
+	const overflowItems = useTabset((state) => state.overflowItems);
+	const selectOverflowTab = useTabset((state) => state.selectOverflowTab);
+	if (overflowItems.length === 0) return null;
+	return /* @__PURE__ */ jsx(TabOverflowMenu, {
+		items: overflowItems,
+		onSelect: selectOverflowTab
+	});
+};
+
+//#endregion
+//#region src/hooks/use-tab-overflow.ts
+const overflowingIds = (tablist) => {
+	const box = tablist.getBoundingClientRect();
+	return [...tablist.querySelectorAll("[data-dashfoo=\"tab\"]")].flatMap((tab) => {
+		const rect = tab.getBoundingClientRect();
+		return (rect.right > box.right + 1 || rect.left < box.left - 1) && tab.dataset.tabId ? [tab.dataset.tabId] : [];
+	});
+};
+const useTabOverflow = (tablist, signature) => {
+	const [overflow, setOverflow] = useState([]);
+	useEffect(() => {
+		const recompute = () => {
+			setOverflow((previous) => {
+				const next = tablist ? overflowingIds(tablist) : [];
+				return next.length === 0 && previous.length === 0 ? previous : next;
+			});
+		};
+		recompute();
+		if (!tablist) return;
+		const observer = new ResizeObserver(recompute);
+		observer.observe(tablist);
+		tablist.addEventListener("scroll", recompute, { passive: true });
+		return () => {
+			observer.disconnect();
+			tablist.removeEventListener("scroll", recompute);
+		};
+	}, [tablist, signature]);
+	return overflow;
+};
+
+//#endregion
+//#region src/lib/tab-selection.ts
+const fallbackSelectedIndex = (count, removedIndex) => removedIndex + 1 < count ? removedIndex + 1 : removedIndex - 1;
+
+//#endregion
+//#region src/components/tabset/tabset-root.tsx
+const tabsetStyle = {
+	display: "flex",
+	flexDirection: "column",
+	height: "100%",
+	minHeight: 0,
+	minWidth: 0,
+	width: "100%"
+};
+const TabsetRoot = ({ children, node, ref: userRef, style, ...props }) => {
+	const closableTabs = useLayout((state) => state.closableTabs);
+	const dispatch = useLayout((state) => state.dispatch);
+	const maximizable = useLayout((state) => state.maximizable);
+	const maximizedTabsetId = useLayout((state) => state.maximizedTabsetId);
+	const renamableTabs = useLayout((state) => state.renamableTabs);
+	const tabLocation = useLayout((state) => state.tabLocation);
+	const { ref } = useTabsetDroppable(node.id);
+	const dragSubject = useDragSubject();
+	const tabsetRef = useRef(null);
+	const isMaximized = maximizedTabsetId === node.id;
+	const showMaximize = maximizable && node.enableMaximize !== false;
+	const tabsClosable = closableTabs && node.enableClose !== false;
+	const tabsRenamable = renamableTabs;
+	const draggingTabIndex = dragSubject?.kind === "tab" ? node.children.findIndex((tab) => tab.id === dragSubject.id) : -1;
+	const visualSelected = draggingTabIndex !== -1 && draggingTabIndex === node.selected ? fallbackSelectedIndex(node.children.length, draggingTabIndex) : node.selected;
+	const activeTab = node.children[visualSelected];
+	const isDragSource = dragSubject?.kind === "tabset" && dragSubject.id === node.id;
+	const snapshot = {
+		activeTab,
+		dispatch,
+		isMaximized,
+		node,
+		showMaximize,
+		tabsClosable,
+		tabsRenamable,
+		visualSelected
+	};
+	const [store] = useState(() => createTabsetStore(snapshot));
+	useLayoutEffect(() => {
+		store.setState(snapshot);
+	});
+	const overflow = useTabOverflow(useStore(store, (state) => state.tablistElement), node.children.map((tab) => `${tab.id}:${tab.name}`).join("|"));
+	const overflowItems = useMemo(() => {
+		const names = new Map(node.children.map((tab) => [tab.id, tab.name]));
+		return overflow.map((id) => ({
+			id,
+			name: names.get(id) ?? id
+		}));
+	}, [overflow, node.children]);
+	useLayoutEffect(() => {
+		store.setState({ overflowItems });
+	}, [overflowItems, store]);
+	useEffect(() => {
+		if (!store.getState().restoreFocus) return;
+		store.setState({ restoreFocus: false });
+		const activeTabId = node.children[node.selected]?.id;
+		if (activeTabId) tabsetRef.current?.querySelector(`#${CSS.escape(tabDomId(node.id, activeTabId))}`)?.focus();
+		else tabsetRef.current?.focus();
+	}, [
+		node.children,
+		node.selected,
+		node.id,
+		store
+	]);
+	return /* @__PURE__ */ jsx(TabsetStoreContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			"data-dashfoo": "tabset",
+			"data-dragging-source": isDragSource || void 0,
+			"data-tab-location": tabLocation,
+			ref: (element) => {
+				ref(element);
+				tabsetRef.current = element;
+				if (typeof userRef === "function") userRef(element);
+				else if (userRef) userRef.current = element;
+			},
+			style: {
+				...tabsetStyle,
+				...style
+			},
+			tabIndex: -1,
+			children
+		})
+	});
+};
+
+//#endregion
+//#region src/lib/merge-refs.ts
+const applyRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+};
+const mergeRefs = (...refs) => (value) => {
+	for (const ref of refs) applyRef(ref, value);
+};
+
+//#endregion
+//#region src/components/tabset/tabset-tab.tsx
+const TabsetTab = ({ children, ref: userRef, tab, ...props }) => {
+	const store = useContext(TabsetStoreContext);
+	const node = useTabset((state) => state.node);
+	const editing = useTabset((state) => state.editingTabId === tab.id);
+	const dragSubject = useDragSubject();
+	const isDragging = dragSubject?.kind === "tab" && dragSubject.id === tab.id;
+	const itemRef = useRef(null);
+	const wasEditing = useRef(false);
+	const index = node.children.findIndex((child) => child.id === tab.id);
+	useEffect(() => {
+		if (store?.getState().node.children.some((child) => child.id === tab.id) === false) warnOnce(`orphan-tab-${tab.id}`, `<Tabset.Tab> for "${tab.id}" is not a child of its Tabset.Root's node; it renders but can never be selected`);
+	}, [
+		index === -1,
+		store,
+		tab.id
+	]);
+	useEffect(() => {
+		if (wasEditing.current && !editing) itemRef.current?.querySelector("[data-dashfoo=\"tab\"]")?.focus();
+		wasEditing.current = editing;
+	}, [editing]);
+	const contextValue = useMemo(() => ({
+		index,
+		tab
+	}), [index, tab]);
+	const refCallback = useMemo(() => mergeRefs(itemRef, userRef), [userRef]);
+	return /* @__PURE__ */ jsx(TabContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("span", {
+			...props,
+			"data-dashfoo": "tab-item",
+			"data-dragging": isDragging || void 0,
+			ref: refCallback,
+			children
+		})
+	});
+};
+const TabsetTrigger = ({ children, onClick, onDoubleClick, ref: userRef, ...props }) => {
+	const { index, tab } = useTab();
+	const node = useTabset((state) => state.node);
+	const editing = useTabset((state) => state.editingTabId === tab.id);
+	const selectTab = useTabset((state) => state.selectTab);
+	const startEditing = useTabset((state) => state.startEditing);
+	const tabsRenamable = useTabset((state) => state.tabsRenamable);
+	const visualSelected = useTabset((state) => state.visualSelected);
+	const draggableTabs = useLayout((state) => state.draggableTabs);
+	const renderTabLabel = useLayout((state) => state.renderTabLabel);
+	const { ref } = useTabDraggable(tab.id, !draggableTabs || tab.enableDrag === false, tab.name);
+	const refCallback = useMemo(() => mergeRefs(ref, userRef), [ref, userRef]);
+	if (editing) return null;
+	const selected = index === visualSelected;
+	const renamable = tabsRenamable && tab.enableRename !== false;
+	const handleClick = (event) => {
+		onClick?.(event);
+		selectTab(index);
+	};
+	const handleDoubleClick = (event) => {
+		onDoubleClick?.(event);
+		if (renamable) startEditing(tab.id);
+	};
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": renderTabLabel ? tab.name : void 0,
+		...props,
+		"aria-controls": panelDomId(node.id),
+		"aria-selected": selected,
+		"data-dashfoo": "tab",
+		"data-tab-id": tab.id,
+		id: tabDomId(node.id, tab.id),
+		onClick: handleClick,
+		onDoubleClick: handleDoubleClick,
+		ref: refCallback,
+		role: "tab",
+		tabIndex: selected ? 0 : -1,
+		type: "button",
+		children: children ?? (renderTabLabel ? renderTabLabel(tab) : tab.name)
+	});
+};
+
+//#endregion
+//#region src/components/tabset-icons.tsx
+const iconStyle = { pointerEvents: "none" };
+const Icon = ({ children }) => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	fill: "none",
+	height: "12",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: "2",
+	style: iconStyle,
+	viewBox: "0 0 24 24",
+	width: "12",
+	children
+});
+const CloseIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })] });
+const GripIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
+	/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "5",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "19",
+		cy: "5",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "5",
+		cy: "5",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "19",
+		cy: "12",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "5",
+		cy: "12",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "19",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "19",
+		cy: "19",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "5",
+		cy: "19",
+		r: "1"
+	})
+] });
+const MaximizeIcon = ({ maximized }) => maximized ? /* @__PURE__ */ jsxs(Icon, { children: [
+	/* @__PURE__ */ jsx("path", { d: "m14 10 7-7" }),
+	/* @__PURE__ */ jsx("path", { d: "M20 10h-6V4" }),
+	/* @__PURE__ */ jsx("path", { d: "m3 21 7-7" }),
+	/* @__PURE__ */ jsx("path", { d: "M4 14h6v6" })
+] }) : /* @__PURE__ */ jsxs(Icon, { children: [
+	/* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
+	/* @__PURE__ */ jsx("path", { d: "m21 3-7 7" }),
+	/* @__PURE__ */ jsx("path", { d: "m3 21 7-7" }),
+	/* @__PURE__ */ jsx("path", { d: "M9 21H3v-6" })
+] });
+const FloatIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [/* @__PURE__ */ jsx("rect", {
+	height: "14",
+	rx: "2",
+	width: "18",
+	x: "3",
+	y: "6"
+}), /* @__PURE__ */ jsx("path", { d: "M3 10h18" })] });
+const MinimizeIcon = () => /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
+const DockIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
+	/* @__PURE__ */ jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2" }),
+	/* @__PURE__ */ jsx("path", { d: "M11 8 7 12l4 4" }),
+	/* @__PURE__ */ jsx("path", { d: "M7 12h10" })
+] });
+
+//#endregion
+//#region src/components/tabset/tabset-tab-controls.tsx
+const RenameEditor = ({ defaultValue, onBlur, onKeyDown, ref: userRef, ...props }) => {
+	const { tab } = useTab();
+	const cancelRename = useTabset((state) => state.cancelRename);
+	const commitRename = useTabset((state) => state.commitRename);
+	const ref = useRef(null);
+	const done = useRef(false);
+	const refCallback = useMemo(() => mergeRefs(ref, userRef), [userRef]);
+	useEffect(() => {
+		ref.current?.focus();
+		ref.current?.select();
+	}, []);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.key === "Enter") {
+			done.current = true;
+			commitRename(tab.id, event.currentTarget.value);
+		} else if (event.key === "Escape") {
+			done.current = true;
+			cancelRename();
+		}
+	};
+	const handleCommitOnBlur = (event) => {
+		onBlur?.(event);
+		if (done.current) return;
+		done.current = true;
+		commitRename(tab.id, event.currentTarget.value);
+	};
+	return /* @__PURE__ */ jsx("input", {
+		"aria-label": `Rename ${tab.name}`,
+		...props,
+		"data-dashfoo": "tab-rename",
+		defaultValue: defaultValue ?? tab.name,
+		onBlur: handleCommitOnBlur,
+		onKeyDown: handleKeyDown,
+		ref: refCallback,
+		type: "text"
+	});
+};
+const TabsetRenameInput = (props) => {
+	const { tab } = useTab();
+	const editing = useTabset((state) => state.editingTabId === tab.id);
+	const registerRenameInput = useTabset((state) => state.registerRenameInput);
+	useEffect(() => registerRenameInput(), [registerRenameInput]);
+	if (!editing) return null;
+	return /* @__PURE__ */ jsx(RenameEditor, { ...props });
+};
+const TabsetCloseButton = ({ children, onClick, ...props }) => {
+	const { index, tab } = useTab();
+	const closeTab = useTabset((state) => state.closeTab);
+	const editing = useTabset((state) => state.editingTabId === tab.id);
+	const tabsClosable = useTabset((state) => state.tabsClosable);
+	const visualSelected = useTabset((state) => state.visualSelected);
+	if (!(tabsClosable && tab.enableClose !== false) || editing) return null;
+	const handleClick = (event) => {
+		onClick?.(event);
+		event.stopPropagation();
+		closeTab(tab.id);
+	};
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": `Close ${tab.name}`,
+		...props,
+		"data-dashfoo": "tab-close",
+		onClick: handleClick,
+		tabIndex: index === visualSelected ? 0 : -1,
+		type: "button",
+		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+	});
+};
+
+//#endregion
+//#region src/components/tabset/tabset-tablist.tsx
+const stripStyle = {
+	display: "flex",
+	flexShrink: 0
+};
+const tablistStyle = {
+	display: "flex",
+	minWidth: 0,
+	overflowX: "auto"
+};
+const TabsetTabStrip = ({ style, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	"data-dashfoo": "tabstrip",
+	style: {
+		...stripStyle,
+		...style
+	}
+});
+const TabsetTablist = ({ onKeyDown, ref: userRef, style, ...props }) => {
+	const node = useTabset((state) => state.node);
+	const registerTablist = useTabset((state) => state.registerTablist);
+	const selectTab = useTabset((state) => state.selectTab);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (!(event.target instanceof HTMLElement) || !event.target.closest("[role=\"tab\"]")) return;
+		const count = node.children.length;
+		if (count === 0) return;
+		const next = {
+			ArrowLeft: (node.selected - 1 + count) % count,
+			ArrowRight: (node.selected + 1) % count,
+			End: count - 1,
+			Home: 0
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		selectTab(next, { focus: true });
+	};
+	const refCallback = useMemo(() => mergeRefs(registerTablist, userRef), [registerTablist, userRef]);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": node.name ?? "Tabs",
+		...props,
+		"aria-orientation": "horizontal",
+		"data-dashfoo": "tablist",
+		onKeyDown: handleKeyDown,
+		ref: refCallback,
+		role: "tablist",
+		style: {
+			...tablistStyle,
+			...style
+		},
+		tabIndex: -1
+	});
+};
+
+//#endregion
+//#region src/components/tabset/tabset-toolbar.tsx
+const toolbarStyle = {
+	alignItems: "center",
+	display: "flex",
+	flexShrink: 0,
+	marginInlineStart: "auto"
+};
+const TabsetToolbar = ({ style, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	"data-dashfoo": "tabset-toolbar",
+	style: {
+		...toolbarStyle,
+		...style
+	}
+});
+const TabsetGrip = ({ children, ref: userRef, ...props }) => {
+	const activeTabName = useTabset((state) => state.activeTab?.name ?? "");
+	const isMaximized = useTabset((state) => state.isMaximized);
+	const node = useTabset((state) => state.node);
+	const hidden = !useLayout((state) => state.draggableTabsets) || isMaximized;
+	const { ref } = useTabsetDraggable(node.id, hidden, activeTabName);
+	const refCallback = useMemo(() => mergeRefs(ref, userRef), [ref, userRef]);
+	if (hidden) return null;
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": "Move tabset",
+		...props,
+		"data-dashfoo": "tabset-grip",
+		ref: refCallback,
+		type: "button",
+		children: children ?? /* @__PURE__ */ jsx(GripIcon, {})
+	});
+};
+const TabsetMaximizeButton = ({ children, onClick, ...props }) => {
+	const isMaximized = useTabset((state) => state.isMaximized);
+	const showMaximize = useTabset((state) => state.showMaximize);
+	const toggleMaximize = useTabset((state) => state.toggleMaximize);
+	if (!showMaximize) return null;
+	const handleClick = (event) => {
+		onClick?.(event);
+		toggleMaximize();
+	};
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": isMaximized ? "Restore" : "Maximize",
+		...props,
+		"aria-pressed": isMaximized,
+		"data-dashfoo": "tabset-maximize",
+		onClick: handleClick,
+		type: "button",
+		children: children ?? /* @__PURE__ */ jsx(MaximizeIcon, { maximized: isMaximized })
+	});
+};
+const TabsetFloatButton = ({ children, onClick, ...props }) => {
+	const floatable = useLayout((state) => state.floatable);
+	const dispatch = useLayout((state) => state.dispatch);
+	const isMaximized = useTabset((state) => state.isMaximized);
+	const node = useTabset((state) => state.node);
+	const hasFloatLayer = useHasFloatLayer();
+	if (!floatable || isMaximized) return null;
+	if (!hasFloatLayer) {
+		warnOnce("float-no-layer", "Tabset.FloatButton needs a <Layout.FloatLayer> around the layout (DashfooLayout adds one); the float control is hidden");
+		return null;
+	}
+	const handleClick = (event) => {
+		onClick?.(event);
+		dispatch({
+			geometry: measureFloatRect(event.currentTarget),
+			tabsetId: node.id,
+			type: "floatTabset"
+		});
+	};
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": "Float panel",
+		...props,
+		"data-dashfoo": "tabset-float",
+		onClick: handleClick,
+		type: "button",
+		children: children ?? /* @__PURE__ */ jsx(FloatIcon, {})
+	});
+};
+
+//#endregion
+//#region src/components/tabset/tabset-view.tsx
+const tabsetContent = /* @__PURE__ */ jsx(TabsetContent, {});
+const DefaultTabsetLayout = () => {
+	const draggableTabsets = useLayout((state) => state.draggableTabsets);
+	const floatable = useLayout((state) => state.floatable);
+	const renderTabsetToolbar = useLayout((state) => state.renderTabsetToolbar);
+	const tabLocation = useLayout((state) => state.tabLocation);
+	const tabStripEnabled = useLayout((state) => state.tabStripEnabled);
+	const isMaximized = useTabset((state) => state.isMaximized);
+	const node = useTabset((state) => state.node);
+	const overflowCount = useTabset((state) => state.overflowItems.length);
+	const showToolbar = useTabset((state) => state.showMaximize) || renderTabsetToolbar !== void 0 || overflowCount > 0 || floatable && !isMaximized || draggableTabsets && !isMaximized;
+	const strip = tabStripEnabled ? /* @__PURE__ */ jsxs(TabsetTabStrip, { children: [/* @__PURE__ */ jsx(TabsetTablist, { children: node.children.map((tab) => /* @__PURE__ */ jsxs(TabsetTab, {
+		tab,
+		children: [
+			/* @__PURE__ */ jsx(TabsetTrigger, {}),
+			/* @__PURE__ */ jsx(TabsetRenameInput, {}),
+			/* @__PURE__ */ jsx(TabsetCloseButton, {})
+		]
+	}, tab.id)) }), showToolbar ? /* @__PURE__ */ jsxs(TabsetToolbar, { children: [
+		/* @__PURE__ */ jsx(TabsetOverflowMenu, {}),
+		/* @__PURE__ */ jsx(TabsetGrip, {}),
+		renderTabsetToolbar?.(node),
+		/* @__PURE__ */ jsx(TabsetFloatButton, {}),
+		/* @__PURE__ */ jsx(TabsetMaximizeButton, {})
+	] }) : null] }) : null;
+	return tabLocation === "bottom" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [tabsetContent, strip] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [strip, tabsetContent] });
+};
+const TabsetView = ({ node }) => /* @__PURE__ */ jsx(TabsetRoot, {
+	node,
+	children: /* @__PURE__ */ jsx(DefaultTabsetLayout, {})
+});
+
+//#endregion
+//#region src/components/row-view.tsx
+const dimensionToSize = (dimension) => `${dimension.value}${dimension.unit}`;
+const dimensionToPixels = (dimension) => dimension?.unit === "px" ? dimension.value : void 0;
+const groupStyle = {
+	display: "flex",
+	flex: 1,
+	minHeight: 0,
+	minWidth: 0
+};
+const WEIGHT_EPSILON = .01;
+const layoutFromWeights = (children, total) => children.reduce((layout, child) => {
+	layout[child.id] = (child.weight ?? 1) / total * 100;
+	return layout;
+}, {});
+const orderedFromLayout = (layout, children) => children.map((child) => layout[child.id] ?? 0);
+const layoutFromOrdered = (sizes, children) => children.reduce((layout, child, index) => {
+	layout[child.id] = sizes[index] ?? 0;
+	return layout;
+}, {});
+const layoutsMatch = (current, expected) => {
+	const currentIds = Object.keys(current);
+	const expectedIds = Object.keys(expected);
+	if (currentIds.length !== expectedIds.length) return false;
+	return expectedIds.every((id) => Math.abs((current[id] ?? NaN) - expected[id]) <= WEIGHT_EPSILON);
+};
+const descendantMinSize = (child, axis, tabsetMinSize) => {
+	const explicit = dimensionToPixels(child.min);
+	if (explicit !== void 0) return explicit;
+	if (child.min !== void 0) return;
+	if (child.type === "tabset") return tabsetMinSize;
+	const childMinimums = [];
+	for (const grandchild of child.children) {
+		const minimum = descendantMinSize(grandchild, axis, tabsetMinSize);
+		if (minimum === void 0) return;
+		childMinimums.push(minimum);
+	}
+	if (childMinimums.length === 0) return;
+	return child.orientation === axis ? childMinimums.reduce((sum, value) => sum + value, 0) : Math.max(...childMinimums);
+};
+const RowView = ({ node, renderTabset }) => {
+	const dispatch = useLayout((state) => state.dispatch);
+	const resizableSplits = useLayout((state) => state.resizableSplits);
+	const tabsetMinSize = useLayout((state) => state.tabsetMinSize);
+	const globalSnap = useLayout((state) => state.snap);
+	const effectiveSnap = node.snap ?? globalSnap;
+	const snapActive = snapEnabled(effectiveSnap);
+	const orientation = node.orientation === "row" ? "horizontal" : "vertical";
+	const total = node.children.reduce((sum, child) => sum + (child.weight ?? 1), 0);
+	const desiredLayout = useMemo(() => layoutFromWeights(node.children, total), [node.children, total]);
+	const measured = useRef(false);
+	const groupRef = useRef(null);
+	const groupElement = useRef(null);
+	const syncing = useRef(false);
+	const activeBoundary = useRef(null);
+	const snapping = useRef(false);
+	const snappedBoundaryRef = useRef(null);
+	const [snappedBoundary, setSnappedBoundary] = useState(null);
+	const setHighlight = (boundary) => {
+		if (boundary !== snappedBoundaryRef.current) {
+			snappedBoundaryRef.current = boundary;
+			setSnappedBoundary(boundary);
+		}
+	};
+	const setSnapTransition = (active) => {
+		const element = groupElement.current;
+		if (!element) return;
+		if (active) element.dataset.dashfooSnapping = "true";
+		else delete element.dataset.dashfooSnapping;
+	};
+	useLayoutEffect(() => {
+		const group = groupRef.current;
+		if (!group) return;
+		const current = group.getLayout();
+		if (!(Object.keys(current).length === Object.keys(desiredLayout).length && Object.keys(desiredLayout).every((id) => id in current)) || layoutsMatch(current, desiredLayout)) return;
+		syncing.current = true;
+		group.setLayout(desiredLayout);
+		const frame = requestAnimationFrame(() => {
+			syncing.current = false;
+		});
+		return () => {
+			cancelAnimationFrame(frame);
+			syncing.current = false;
+		};
+	}, [desiredLayout]);
+	const handleLayoutChange = (layout) => {
+		if (snapping.current || syncing.current || !resizableSplits) return;
+		if (effectiveSnap === null || !snapActive) return;
+		const boundary = activeBoundary.current;
+		if (boundary === null) return;
+		const { sizes, snapped } = snapSizes(orderedFromLayout(layout, node.children), boundary, effectiveSnap);
+		setHighlight(snapped ? boundary : null);
+		if (!snapped) {
+			setSnapTransition(false);
+			return;
+		}
+		setSnapTransition(true);
+		const group = groupRef.current;
+		const target = layoutFromOrdered(sizes, node.children);
+		if (!group || layoutsMatch(layout, target)) return;
+		snapping.current = true;
+		group.setLayout(target);
+		snapping.current = false;
+	};
+	const handleLayoutChanged = (layout) => {
+		if (!measured.current) {
+			measured.current = true;
+			return;
+		}
+		if (syncing.current) return;
+		const boundary = activeBoundary.current;
+		activeBoundary.current = null;
+		setHighlight(null);
+		setSnapTransition(false);
+		if (!resizableSplits) return;
+		let weights = node.children.map((child) => layout[child.id] ?? child.weight ?? 1);
+		if (boundary !== null && effectiveSnap !== null && snapActive) weights = snapSizes(weights, boundary, effectiveSnap).sizes;
+		if (!weights.some((weight, index) => Math.abs(weight - (node.children[index]?.weight ?? 1)) > WEIGHT_EPSILON)) return;
+		dispatch({
+			rowId: node.id,
+			type: "adjustSplit",
+			weights
+		});
+	};
+	return /* @__PURE__ */ jsx(Group, {
+		"data-dashfoo": "row",
+		disabled: !resizableSplits,
+		elementRef: groupElement,
+		groupRef,
+		onLayoutChange: snapActive ? handleLayoutChange : void 0,
+		onLayoutChanged: handleLayoutChanged,
+		orientation,
+		style: groupStyle,
+		children: node.children.map((child, index) => {
+			const percent = (child.weight ?? 1) / total * 100;
+			let min = child.min ? dimensionToSize(child.min) : void 0;
+			if (min === void 0) {
+				const minimum = descendantMinSize(child, node.orientation, tabsetMinSize);
+				min = minimum === void 0 ? void 0 : `${minimum}px`;
+			}
+			const max = child.max ? dimensionToSize(child.max) : void 0;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 ? /* @__PURE__ */ jsx(Separator, {
+				"data-dashfoo": "splitter",
+				"data-dashfoo-snapped": snappedBoundary === index - 1 ? "true" : void 0,
+				disabled: !resizableSplits,
+				onPointerDown: snapActive && resizableSplits ? () => {
+					activeBoundary.current = index - 1;
+				} : void 0
+			}) : null, /* @__PURE__ */ jsx(Panel$1, {
+				defaultSize: `${percent}%`,
+				id: child.id,
+				maxSize: max,
+				minSize: min,
+				children: child.type === "row" ? /* @__PURE__ */ jsx(RowView, {
+					node: child,
+					renderTabset
+				}) : renderTabset?.(child) ?? /* @__PURE__ */ jsx(TabsetView, { node: child })
+			})] }, child.id);
+		})
+	}, node.id);
+};
+
+//#endregion
+//#region src/components/float-panel.tsx
+const floatTitle = (node) => node.name ?? "Panel";
+const titleBarStyle = {
+	alignItems: "center",
+	display: "flex",
+	flexShrink: 0,
+	gap: "0.375rem",
+	touchAction: "none"
+};
+const titleStyle = {
+	flex: 1,
+	minWidth: 0,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+};
+const dockButtonStyle = {
+	alignItems: "center",
+	cursor: "pointer",
+	display: "inline-flex",
+	flexShrink: 0
+};
+const bodyStyle = {
+	flex: 1,
+	minHeight: 0,
+	position: "relative"
+};
+const RESIZE_HANDLES = [
+	{
+		edges: {
+			x: 0,
+			y: -1
+		},
+		key: "n",
+		style: {
+			cursor: "ns-resize",
+			height: 6,
+			insetInline: 10,
+			top: -3
+		}
+	},
+	{
+		edges: {
+			x: 0,
+			y: 1
+		},
+		key: "s",
+		style: {
+			bottom: -3,
+			cursor: "ns-resize",
+			height: 6,
+			insetInline: 10
+		}
+	},
+	{
+		edges: {
+			x: 1,
+			y: 0
+		},
+		key: "e",
+		style: {
+			cursor: "ew-resize",
+			insetBlock: 10,
+			right: -3,
+			width: 6
+		}
+	},
+	{
+		edges: {
+			x: -1,
+			y: 0
+		},
+		key: "w",
+		style: {
+			cursor: "ew-resize",
+			insetBlock: 10,
+			left: -3,
+			width: 6
+		}
+	},
+	{
+		edges: {
+			x: 1,
+			y: -1
+		},
+		key: "ne",
+		style: {
+			cursor: "nesw-resize",
+			height: 14,
+			right: -4,
+			top: -4,
+			width: 14
+		}
+	},
+	{
+		edges: {
+			x: -1,
+			y: -1
+		},
+		key: "nw",
+		style: {
+			cursor: "nwse-resize",
+			height: 14,
+			left: -4,
+			top: -4,
+			width: 14
+		}
+	},
+	{
+		edges: {
+			x: 1,
+			y: 1
+		},
+		key: "se",
+		style: {
+			bottom: -4,
+			cursor: "nwse-resize",
+			height: 14,
+			right: -4,
+			width: 14
+		}
+	},
+	{
+		edges: {
+			x: -1,
+			y: 1
+		},
+		key: "sw",
+		style: {
+			bottom: -4,
+			cursor: "nesw-resize",
+			height: 14,
+			left: -4,
+			width: 14
+		}
+	}
+];
+const EDGE_BY_KEY = new Map(RESIZE_HANDLES.map((h) => [h.key, h.edges]));
+const CHIP_SIZE = {
+	height: 34,
+	width: 168
+};
+const TAP_SLOP = 4;
+const FloatTitleEditor = ({ dispatch, node, onDone }) => {
+	const ref = useRef(null);
+	const done = useRef(false);
+	useEffect(() => {
+		ref.current?.focus();
+		ref.current?.select();
+	}, []);
+	const commit = (value) => {
+		const trimmed = value.trim();
+		if (trimmed && trimmed !== floatTitle(node)) dispatch({
+			floatId: node.id,
+			name: trimmed,
+			type: "renameFloat"
+		});
+		onDone();
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter") {
+			done.current = true;
+			commit(event.currentTarget.value);
+		} else if (event.key === "Escape") {
+			done.current = true;
+			onDone();
+		}
+	};
+	const handleBlur = (event) => {
+		if (done.current) return;
+		done.current = true;
+		commit(event.currentTarget.value);
+	};
+	return /* @__PURE__ */ jsx("input", {
+		"aria-label": `Rename ${floatTitle(node)}`,
+		"data-dashfoo": "float-rename",
+		defaultValue: floatTitle(node),
+		onBlur: handleBlur,
+		onKeyDown: handleKeyDown,
+		onPointerDown: (event) => event.stopPropagation(),
+		ref,
+		style: titleStyle,
+		type: "text"
+	});
+};
+const FloatTitle = ({ dispatch, node, renamable }) => {
+	const [editing, setEditing] = useState(false);
+	if (renamable && editing) return /* @__PURE__ */ jsx(FloatTitleEditor, {
+		dispatch,
+		node,
+		onDone: () => setEditing(false)
+	});
+	return /* @__PURE__ */ jsx("span", {
+		"data-dashfoo": "float-title",
+		onDoubleClick: renamable ? () => setEditing(true) : void 0,
+		style: titleStyle,
+		title: renamable ? "Double-click to rename" : void 0,
+		children: floatTitle(node)
+	});
+};
+const FloatPanel = ({ global, node, onFocus, zIndex }) => {
+	const dispatch = useLayout((state) => state.dispatch);
+	const closableTabs = useLayout((state) => state.closableTabs);
+	const draggableTabs = useLayout((state) => state.draggableTabs);
+	const editable = useLayout((state) => state.editable);
+	const renamableTabs = useLayout((state) => state.renamableTabs);
+	const resizableSplits = useLayout((state) => state.resizableSplits);
+	const keepMounted = useLayout((state) => state.keepMounted);
+	const renderTab = useLayout((state) => state.renderTab);
+	const renderTabLabel = useLayout((state) => state.renderTabLabel);
+	const renderTabsetToolbar = useLayout((state) => state.renderTabsetToolbar);
+	const snap = useLayout((state) => state.snap);
+	const panelRef = useRef(null);
+	const gestureRef = useRef(null);
+	const latestRef = useRef(node.geometry);
+	const movedRef = useRef(false);
+	const setPanel = (element) => {
+		panelRef.current = element;
+	};
+	const restore = () => {
+		if (!editable) return;
+		dispatch({
+			floatId: node.id,
+			minimized: false,
+			type: "setFloatMinimized"
+		});
+	};
+	const handlePointerDown = (event) => {
+		const panel = panelRef.current;
+		if (!panel || !editable) return;
+		movedRef.current = false;
+		const edgeKey = event.currentTarget.dataset.edge;
+		const parent = panel.offsetParent;
+		gestureRef.current = {
+			bounds: {
+				height: parent?.clientHeight ?? 0,
+				width: parent?.clientWidth ?? 0
+			},
+			edges: edgeKey ? EDGE_BY_KEY.get(edgeKey) ?? null : null,
+			pointerId: event.pointerId,
+			start: node.geometry,
+			startX: event.clientX,
+			startY: event.clientY
+		};
+		latestRef.current = node.geometry;
+	};
+	const handlePointerMove = (event) => {
+		const gesture = gestureRef.current;
+		const panel = panelRef.current;
+		if (!gesture || !panel || event.pointerId !== gesture.pointerId) return;
+		const dx = event.clientX - gesture.startX;
+		const dy = event.clientY - gesture.startY;
+		if (!movedRef.current) {
+			if (Math.hypot(dx, dy) <= TAP_SLOP) return;
+			movedRef.current = true;
+			panel.setPointerCapture(gesture.pointerId);
+		}
+		const next = gesture.edges ? resizeRect(gesture.start, gesture.edges, dx, dy) : clampToBounds({
+			...gesture.start,
+			left: gesture.start.left + dx,
+			top: gesture.start.top + dy
+		}, gesture.bounds, node.minimized ? CHIP_SIZE : void 0);
+		latestRef.current = next;
+		panel.style.left = `${next.left}px`;
+		panel.style.top = `${next.top}px`;
+		if (!node.minimized) {
+			panel.style.width = `${next.width}px`;
+			panel.style.height = `${next.height}px`;
+		}
+	};
+	const handlePointerUp = (event) => {
+		const gesture = gestureRef.current;
+		if (!gesture || event.pointerId !== gesture.pointerId) return;
+		gestureRef.current = null;
+		if (!movedRef.current) {
+			if (node.minimized) restore();
+			return;
+		}
+		panelRef.current?.releasePointerCapture(event.pointerId);
+		dispatch({
+			floatId: node.id,
+			geometry: latestRef.current,
+			type: "moveFloat"
+		});
+	};
+	if (node.minimized) return /* @__PURE__ */ jsxs("button", {
+		"aria-label": `Restore ${floatTitle(node)} panel`,
+		"data-dashfoo": "float-chip",
+		onKeyDown: (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				restore();
+			}
+		},
+		onPointerDown: handlePointerDown,
+		onPointerDownCapture: onFocus,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		ref: setPanel,
+		style: {
+			left: node.geometry.left,
+			pointerEvents: "auto",
+			position: "absolute",
+			top: node.geometry.top,
+			zIndex
+		},
+		title: floatTitle(node),
+		type: "button",
+		children: [/* @__PURE__ */ jsx(FloatIcon, {}), /* @__PURE__ */ jsx("span", {
+			"data-dashfoo": "float-chip-label",
+			children: floatTitle(node)
+		})]
+	});
+	const floatModel = {
+		global,
+		layout: node.layout,
+		version: 1
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-dashfoo": "float",
+		onPointerDownCapture: onFocus,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		ref: setPanel,
+		style: {
+			height: node.geometry.height,
+			left: node.geometry.left,
+			pointerEvents: "auto",
+			position: "absolute",
+			top: node.geometry.top,
+			width: node.geometry.width,
+			zIndex
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-dashfoo": "float-titlebar",
+				onPointerDown: handlePointerDown,
+				style: editable ? titleBarStyle : {
+					...titleBarStyle,
+					cursor: "default"
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-dashfoo": "float-grip",
+						children: /* @__PURE__ */ jsx(GripIcon, {})
+					}),
+					/* @__PURE__ */ jsx(FloatTitle, {
+						dispatch,
+						node,
+						renamable: editable
+					}),
+					editable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+						"aria-label": "Minimize panel",
+						"data-dashfoo": "float-minimize",
+						onClick: () => dispatch({
+							floatId: node.id,
+							minimized: true,
+							type: "setFloatMinimized"
+						}),
+						onPointerDown: (event) => event.stopPropagation(),
+						style: dockButtonStyle,
+						type: "button",
+						children: /* @__PURE__ */ jsx(MinimizeIcon, {})
+					}), /* @__PURE__ */ jsx("button", {
+						"aria-label": "Dock panel back into the main layout",
+						"data-dashfoo": "float-dock",
+						onClick: () => dispatch({
+							floatId: node.id,
+							type: "dockFloat"
+						}),
+						onPointerDown: (event) => event.stopPropagation(),
+						style: dockButtonStyle,
+						type: "button",
+						children: /* @__PURE__ */ jsx(DockIcon, {})
+					})] })
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-dashfoo": "float-body",
+				style: bodyStyle,
+				children: /* @__PURE__ */ jsx(LayoutRoot, {
+					closableTabs,
+					dispatch,
+					draggableTabs,
+					draggableTabsets: false,
+					editable,
+					floatable: false,
+					keepMounted,
+					maximizable: false,
+					model: floatModel,
+					renamableTabs,
+					renderTab,
+					renderTabLabel,
+					renderTabsetToolbar,
+					resizableSplits,
+					snap: snap ?? void 0,
+					children: /* @__PURE__ */ jsx(DragProvider, { children: /* @__PURE__ */ jsx(RowView, { node: node.layout }) })
+				})
+			}),
+			editable && RESIZE_HANDLES.map((handle) => /* @__PURE__ */ jsx("div", {
+				"data-dashfoo": "float-resize",
+				"data-edge": handle.key,
+				onPointerDown: handlePointerDown,
+				style: {
+					position: "absolute",
+					touchAction: "none",
+					zIndex: 1,
+					...handle.style
+				}
+			}, handle.key))
+		]
+	});
+};
+
+//#endregion
+//#region src/components/float-layer.tsx
+const overlayStyle = {
+	inset: 0,
+	pointerEvents: "none",
+	position: "fixed"
+};
+const FloatOverlay = ({ floats, global }) => {
+	const [topId, setTopId] = useState(null);
+	if (floats.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-dashfoo": "float-overlay",
+		style: overlayStyle,
+		children: floats.map((node) => /* @__PURE__ */ jsx(FloatPanel, {
+			global,
+			node,
+			onFocus: () => setTopId(node.id),
+			zIndex: node.id === topId ? 2 : 1
+		}, node.id))
+	});
+};
+const FloatLayer = ({ children, floats, global }) => /* @__PURE__ */ jsxs(FloatLayerContext.Provider, {
+	value: true,
+	children: [children, /* @__PURE__ */ jsx(FloatOverlay, {
+		floats,
+		global
+	})]
+});
+
+//#endregion
+//#region src/components/layout.tsx
+const Layout = {
+	DragLayer: DragProvider,
+	FloatLayer,
+	Root: LayoutRoot,
+	Rows: RowView,
+	Tabset: TabsetView
+};
+
+//#endregion
+//#region src/components/dashfoo-layout.tsx
+const DEFAULT_PERSIST_DEBOUNCE_MS = 300;
+const resolvePersist = (persist, hasDefaultModel) => {
+	if (persist === void 0 || !hasDefaultModel) return null;
+	if (typeof persist === "string") return {
+		debounceMs: DEFAULT_PERSIST_DEBOUNCE_MS,
+		key: persist,
+		storage: localStorageAdapter
+	};
+	return {
+		debounceMs: persist.debounceMs ?? DEFAULT_PERSIST_DEBOUNCE_MS,
+		key: persist.key,
+		storage: persist.storage ?? localStorageAdapter
+	};
+};
+const warnedComponents = /* @__PURE__ */ new Set();
+const DashfooLayout = forwardRef((props, ref) => {
+	const { closableTabs = true, components, defaultModel, draggableTabs = true, draggableTabsets = true, editable = true, factory, floatable = false, keepMounted = false, maximizable = true, model, onAction, onActiveTabsetChange, onMaximizedTabsetChange, onModelChange, persist, renamableTabs = true, renderTabLabel, renderTabsetToolbar, resizableSplits = true, responsive, snap } = props;
+	const persistence = usePersistence(useMemo(() => resolvePersist(persist, defaultModel !== void 0), [persist, defaultModel]), defaultModel);
+	const handleModelChange = useCallback((next, action) => {
+		persistence.save(next);
+		onModelChange?.(next, action);
+	}, [onModelChange, persistence]);
+	const store = useDashfooStore({
+		defaultModel: persistence.initialModel ?? defaultModel,
+		model,
+		onAction,
+		onActiveTabsetChange,
+		onMaximizedTabsetChange,
+		onModelChange: handleModelChange
+	});
+	const hasSharedManager = useContext(SharedDragManagerContext) !== null;
+	useImperativeHandle(ref, () => ({
+		addTab: (tab, target) => store.dispatch({
+			index: target.index,
+			location: target.location ?? "center",
+			tab,
+			targetId: target.targetId,
+			type: "addNode"
+		}),
+		canRedo: store.canRedo,
+		canUndo: store.canUndo,
+		closeTab: (tabId) => store.dispatch({
+			tabId,
+			type: "deleteTab"
+		}),
+		dispatch: store.dispatch,
+		dockFloat: (floatId) => store.dispatch({
+			floatId,
+			type: "dockFloat"
+		}),
+		floatTab: (tabId) => store.dispatch({
+			tabId,
+			type: "floatTab"
+		}),
+		getModel: () => store.model,
+		maximizeTabset: (tabsetId) => store.dispatch({
+			tabsetId,
+			type: "setMaximizedTabset"
+		}),
+		redo: store.redo,
+		renameTab: (tabId, name) => store.dispatch({
+			name,
+			tabId,
+			type: "renameTab"
+		}),
+		resetLayout: () => {
+			persistence.clear();
+			if (defaultModel !== void 0) store.setModel(defaultModel);
+		},
+		selectTab: (tabsetId, index) => store.dispatch({
+			index,
+			tabsetId,
+			type: "selectTab"
+		}),
+		undo: store.undo
+	}), [
+		defaultModel,
+		persistence,
+		store
+	]);
+	const renderTab = useCallback((tab) => {
+		if (factory) return factory(tab);
+		const Component = components?.[tab.component];
+		if (!Component) {
+			if (components && !warnedComponents.has(tab.component)) {
+				warnedComponents.add(tab.component);
+				console.warn(`[dashfoo] no component registered for "${tab.component}"`);
+			}
+			return null;
+		}
+		return /* @__PURE__ */ jsx(Component, { node: tab });
+	}, [components, factory]);
+	const [containerRef, width] = useContainerWidth();
+	const isCompact = responsive !== void 0 && width <= responsive.maxWidth;
+	const view = useMemo(() => isCompact ? stackModel(store.model, responsive?.orientation) : store.model, [
+		isCompact,
+		responsive?.orientation,
+		store.model
+	]);
+	const isCompactRef = useRef(isCompact);
+	isCompactRef.current = isCompact;
+	const dispatch = useCallback((action) => {
+		if (isCompactRef.current && action.type === "adjustSplit") return;
+		store.dispatch(action);
+	}, [store]);
+	const maximized = view.maximizedTabsetId ? findTabset(view, view.maximizedTabsetId) : void 0;
+	const tree = /* @__PURE__ */ jsx(Layout.FloatLayer, {
+		floats: store.model.floats ?? [],
+		global: store.model.global,
+		children: /* @__PURE__ */ jsx(Layout.DragLayer, { children: maximized ? /* @__PURE__ */ jsx(Layout.Tabset, { node: maximized }) : /* @__PURE__ */ jsx(Layout.Rows, { node: view.layout }) })
+	});
+	return /* @__PURE__ */ jsx(Layout.Root, {
+		closableTabs,
+		dispatch,
+		draggableTabs: isCompact ? false : draggableTabs,
+		draggableTabsets: isCompact ? false : draggableTabsets,
+		editable,
+		floatable: isCompact ? false : floatable,
+		keepMounted,
+		maximizable,
+		model: view,
+		renamableTabs,
+		renderTab,
+		renderTabLabel,
+		renderTabsetToolbar,
+		resizableSplits: isCompact ? false : resizableSplits,
+		rootRef: containerRef,
+		snap,
+		children: hasSharedManager ? tree : /* @__PURE__ */ jsx(DashfooDragProvider, { children: tree })
+	});
+});
+DashfooLayout.displayName = "DashfooLayout";
+
+//#endregion
+//#region src/components/panel.tsx
+const PanelRoot = (props) => /* @__PURE__ */ jsx("div", {
+	...props,
+	"data-dashfoo": "panel"
+});
+const PanelHeader = (props) => /* @__PURE__ */ jsx("div", {
+	...props,
+	"data-dashfoo": "panel-header"
+});
+const PanelBody = (props) => /* @__PURE__ */ jsx("div", {
+	...props,
+	"data-dashfoo": "panel-body"
+});
+const PanelTitle = (props) => /* @__PURE__ */ jsx("span", {
+	...props,
+	"data-dashfoo": "panel-title"
+});
+const PanelIcon = (props) => /* @__PURE__ */ jsx("span", {
+	...props,
+	"data-dashfoo": "panel-icon"
+});
+const PanelBadge = (props) => /* @__PURE__ */ jsx("span", {
+	...props,
+	"data-dashfoo": "panel-badge"
+});
+const Panel = {
+	Badge: PanelBadge,
+	Body: PanelBody,
+	Header: PanelHeader,
+	Icon: PanelIcon,
+	Root: PanelRoot,
+	Title: PanelTitle
+};
+
+//#endregion
+//#region src/components/tabset/tabset.ts
+const Tabset = {
+	CloseButton: TabsetCloseButton,
+	Content: TabsetContent,
+	FloatButton: TabsetFloatButton,
+	Grip: TabsetGrip,
+	MaximizeButton: TabsetMaximizeButton,
+	OverflowMenu: TabsetOverflowMenu,
+	RenameInput: TabsetRenameInput,
+	Root: TabsetRoot,
+	Tab: TabsetTab,
+	Tablist: TabsetTablist,
+	TabStrip: TabsetTabStrip,
+	Toolbar: TabsetToolbar,
+	Trigger: TabsetTrigger
+};
+
+//#endregion
+export { DashfooDragProvider, DashfooLayout, Layout, Panel, Tabset, activeBreakpoint, localStorageAdapter, matchBreakpoint, memoryStorageAdapter, useContainerWidth, useDashfooStore, useDragSubject, useDropIntent, useExternalTabSource, useLayout, usePersistence, useResponsiveModel, useTab, useTabset };
 //# sourceMappingURL=index.js.map