@skdx/react 0.26.0 → 0.28.0

package/dist/floating-panel/FloatingPanel.d.cts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { FloatingPanelContextValue, FloatingPanelGeometry, FloatingPanelGesture, FloatingPanelProps } from './types.cjs';
 /**
- * The default wording of the release announcement, exported so
- * {@link FloatingPanelProps.getGestureAnnouncement} can defer to it for the
- * gesture it does not want to re-word.
+ * Default release announcement for {@link FloatingPanelProps.getGestureAnnouncement}.
  */
 export declare function gestureAnnouncement(gesture: FloatingPanelGesture, { position, size }: FloatingPanelGeometry): string;
 export declare const FloatingPanelProvider: {
@@ -12,13 +10,15 @@ export declare const FloatingPanelProvider: {
     }): React.JSX.Element;
     displayName: string;
 }, useFloatingPanelContext: (consumerName: string) => FloatingPanelContextValue;
+/** Props for {@link FloatingPanelRoot}: {@link FloatingPanelProps} minus the derived-anatomy-only props. */
+export type FloatingPanelRootProps = Omit<FloatingPanelProps, 'title' | 'stages' | 'dismissible'>;
 /**
- * Root of a draggable, resizable, **non-modal** floating panel — the movable
- * window pattern. Owns open state, position, size, and stage, and hands them
- * down to `FloatingPanelTrigger` / `FloatingPanelPortal` /
- * `FloatingPanelContent` / `FloatingPanelHeader` / `FloatingPanelTitle` /
- * `FloatingPanelCloseTrigger` / `FloatingPanelResizeTrigger` /
- * `FloatingPanelStageTrigger` via context. Renders no DOM element itself.
+ * FloatingPanel's state/context primitive: owns open state, position, size and
+ * stage, and hands them down to `FloatingPanelTrigger` /
+ * `FloatingPanelPortal` / `FloatingPanelContent` / `FloatingPanelHeader` /
+ * `FloatingPanelTitle` / `FloatingPanelCloseTrigger` /
+ * `FloatingPanelResizeTrigger` / `FloatingPanelStageTrigger` via context,
+ * rendering `children` verbatim. Renders no DOM element itself.
  *
  * Non-modal is not a default here, it is the point: there is no backdrop, no
  * focus trap, and no scroll lock, so the page behind the panel stays fully
@@ -27,9 +27,18 @@ export declare const FloatingPanelProvider: {
  *
  * Every open/position/size/stage prop works controlled or uncontrolled.
  *
+ * Geometry is reported on two channels, not one: `onPositionChange` /
+ * `onSizeChange` fire per frame, for painting; `onPositionCommit` /
+ * `onSizeCommit` fire once, when the gesture settles, for persisting.
+ *
+ * `FloatingPanel` (the recipe, below) wraps this with `FloatingPanelAnatomy`
+ * and always derives from `title`/`stages`/`dismissible`/`resizable`. Reach
+ * for this directly — via `@skdx/react/primitives/floating-panel`'s `FloatingPanelRoot` —
+ * for full manual composition of the parts.
+ *
  * @example
  * ```tsx
- * <FloatingPanel defaultPosition={{ x: 40, y: 40 }}>
+ * <FloatingPanelRoot defaultPosition={{ x: 40, y: 40 }}>
  *   <FloatingPanelTrigger>Open panel</FloatingPanelTrigger>
  *   <FloatingPanelPortal>
  *     <FloatingPanelContent>
@@ -42,10 +51,63 @@ export declare const FloatingPanelProvider: {
  *       <FloatingPanelResizeTrigger direction="se" aria-label="Resize panel" />
  *     </FloatingPanelContent>
  *   </FloatingPanelPortal>
+ * </FloatingPanelRoot>
+ * ```
+ */
+export declare function FloatingPanelRoot({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, position: positionProp, defaultPosition, onPositionChange, onPositionCommit, size: sizeProp, defaultSize, onSizeChange, onSizeCommit, minSize, maxSize, boundary, stage: stageProp, defaultStage, onStageChange, draggable, resizable, step, disabled, getGestureAnnouncement, }: FloatingPanelRootProps): React.JSX.Element;
+export declare namespace FloatingPanelRoot {
+    var displayName: string;
+}
+/**
+ * A draggable, resizable, **non-modal** floating panel — the movable window
+ * pattern. Owns open state, position, size and stage, all of them controlled
+ * or uncontrolled.
+ *
+ * Always draws the derived anatomy: the portal, the movable surface, a header
+ * holding the derived `title`, one stage button per `stages` entry and a close
+ * button when `dismissible`, the body (`children`), and a south-east resize
+ * grip while `resizable`. `children` is the panel's body, never a switch —
+ * this component never inspects what it was given. For full manual
+ * composition of the parts, use `FloatingPanelRoot` from
+ * `@skdx/react/primitives/floating-panel` instead of this recipe.
+ *
+ * There is no derived trigger: you drive `open` yourself, exactly as with
+ * `Dialog` and `Drawer`. `FloatingPanelTrigger` is a primitive for the panels that want one.
+ *
+ * Geometry is reported on two channels, not one: `onPositionChange` /
+ * `onSizeChange` fire per frame, for painting; `onPositionCommit` /
+ * `onSizeCommit` fire once, when the gesture settles, for persisting.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanel
+ *   title="Layers"
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   stages={[{ stage: 'minimized', label: 'Minimize' }]}
+ * >
+ *   <LayerList />
  * </FloatingPanel>
  * ```
+ *
+ * @example Full manual composition, for anything the derived anatomy can't express — `@skdx/react/primitives/floating-panel`.
+ * ```tsx
+ * import { FloatingPanelContent, FloatingPanelHeader, FloatingPanelPortal, FloatingPanelResizeTrigger, FloatingPanelRoot, FloatingPanelTitle, FloatingPanelTrigger } from '@skdx/react/primitives/floating-panel';
+ *
+ * <FloatingPanelRoot>
+ *   <FloatingPanelTrigger>Open panel</FloatingPanelTrigger>
+ *   <FloatingPanelPortal>
+ *     <FloatingPanelContent>
+ *       <FloatingPanelHeader aria-label="Drag to move panel">
+ *         <FloatingPanelTitle>Inspector</FloatingPanelTitle>
+ *       </FloatingPanelHeader>
+ *       <FloatingPanelResizeTrigger direction="se" aria-label="Resize panel" />
+ *     </FloatingPanelContent>
+ *   </FloatingPanelPortal>
+ * </FloatingPanelRoot>
+ * ```
  */
-export declare function FloatingPanel({ children, open: openProp, defaultOpen, onOpenChange, position: positionProp, defaultPosition, onPositionChange, size: sizeProp, defaultSize, onSizeChange, minSize, maxSize, boundary, stage: stageProp, defaultStage, onStageChange, draggable, resizable, step, disabled, getGestureAnnouncement, }: FloatingPanelProps): React.JSX.Element;
+export declare function FloatingPanel({ children, title, stages, dismissible, resizable, open, defaultOpen, onOpenChange, onOpenChangeComplete, position, defaultPosition, onPositionChange, onPositionCommit, size, defaultSize, onSizeChange, onSizeCommit, minSize, maxSize, boundary, stage, defaultStage, onStageChange, draggable, step, disabled, getGestureAnnouncement, ...rest }: FloatingPanelProps): React.JSX.Element;
 export declare namespace FloatingPanel {
     var displayName: string;
 }

package/dist/floating-panel/FloatingPanel.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { FloatingPanelContextValue, FloatingPanelGeometry, FloatingPanelGesture, FloatingPanelProps } from './types.js';
 /**
- * The default wording of the release announcement, exported so
- * {@link FloatingPanelProps.getGestureAnnouncement} can defer to it for the
- * gesture it does not want to re-word.
+ * Default release announcement for {@link FloatingPanelProps.getGestureAnnouncement}.
  */
 export declare function gestureAnnouncement(gesture: FloatingPanelGesture, { position, size }: FloatingPanelGeometry): string;
 export declare const FloatingPanelProvider: {
@@ -12,13 +10,15 @@ export declare const FloatingPanelProvider: {
     }): React.JSX.Element;
     displayName: string;
 }, useFloatingPanelContext: (consumerName: string) => FloatingPanelContextValue;
+/** Props for {@link FloatingPanelRoot}: {@link FloatingPanelProps} minus the derived-anatomy-only props. */
+export type FloatingPanelRootProps = Omit<FloatingPanelProps, 'title' | 'stages' | 'dismissible'>;
 /**
- * Root of a draggable, resizable, **non-modal** floating panel — the movable
- * window pattern. Owns open state, position, size, and stage, and hands them
- * down to `FloatingPanelTrigger` / `FloatingPanelPortal` /
- * `FloatingPanelContent` / `FloatingPanelHeader` / `FloatingPanelTitle` /
- * `FloatingPanelCloseTrigger` / `FloatingPanelResizeTrigger` /
- * `FloatingPanelStageTrigger` via context. Renders no DOM element itself.
+ * FloatingPanel's state/context primitive: owns open state, position, size and
+ * stage, and hands them down to `FloatingPanelTrigger` /
+ * `FloatingPanelPortal` / `FloatingPanelContent` / `FloatingPanelHeader` /
+ * `FloatingPanelTitle` / `FloatingPanelCloseTrigger` /
+ * `FloatingPanelResizeTrigger` / `FloatingPanelStageTrigger` via context,
+ * rendering `children` verbatim. Renders no DOM element itself.
  *
  * Non-modal is not a default here, it is the point: there is no backdrop, no
  * focus trap, and no scroll lock, so the page behind the panel stays fully
@@ -27,9 +27,18 @@ export declare const FloatingPanelProvider: {
  *
  * Every open/position/size/stage prop works controlled or uncontrolled.
  *
+ * Geometry is reported on two channels, not one: `onPositionChange` /
+ * `onSizeChange` fire per frame, for painting; `onPositionCommit` /
+ * `onSizeCommit` fire once, when the gesture settles, for persisting.
+ *
+ * `FloatingPanel` (the recipe, below) wraps this with `FloatingPanelAnatomy`
+ * and always derives from `title`/`stages`/`dismissible`/`resizable`. Reach
+ * for this directly — via `@skdx/react/primitives/floating-panel`'s `FloatingPanelRoot` —
+ * for full manual composition of the parts.
+ *
  * @example
  * ```tsx
- * <FloatingPanel defaultPosition={{ x: 40, y: 40 }}>
+ * <FloatingPanelRoot defaultPosition={{ x: 40, y: 40 }}>
  *   <FloatingPanelTrigger>Open panel</FloatingPanelTrigger>
  *   <FloatingPanelPortal>
  *     <FloatingPanelContent>
@@ -42,10 +51,63 @@ export declare const FloatingPanelProvider: {
  *       <FloatingPanelResizeTrigger direction="se" aria-label="Resize panel" />
  *     </FloatingPanelContent>
  *   </FloatingPanelPortal>
+ * </FloatingPanelRoot>
+ * ```
+ */
+export declare function FloatingPanelRoot({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, position: positionProp, defaultPosition, onPositionChange, onPositionCommit, size: sizeProp, defaultSize, onSizeChange, onSizeCommit, minSize, maxSize, boundary, stage: stageProp, defaultStage, onStageChange, draggable, resizable, step, disabled, getGestureAnnouncement, }: FloatingPanelRootProps): React.JSX.Element;
+export declare namespace FloatingPanelRoot {
+    var displayName: string;
+}
+/**
+ * A draggable, resizable, **non-modal** floating panel — the movable window
+ * pattern. Owns open state, position, size and stage, all of them controlled
+ * or uncontrolled.
+ *
+ * Always draws the derived anatomy: the portal, the movable surface, a header
+ * holding the derived `title`, one stage button per `stages` entry and a close
+ * button when `dismissible`, the body (`children`), and a south-east resize
+ * grip while `resizable`. `children` is the panel's body, never a switch —
+ * this component never inspects what it was given. For full manual
+ * composition of the parts, use `FloatingPanelRoot` from
+ * `@skdx/react/primitives/floating-panel` instead of this recipe.
+ *
+ * There is no derived trigger: you drive `open` yourself, exactly as with
+ * `Dialog` and `Drawer`. `FloatingPanelTrigger` is a primitive for the panels that want one.
+ *
+ * Geometry is reported on two channels, not one: `onPositionChange` /
+ * `onSizeChange` fire per frame, for painting; `onPositionCommit` /
+ * `onSizeCommit` fire once, when the gesture settles, for persisting.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanel
+ *   title="Layers"
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   stages={[{ stage: 'minimized', label: 'Minimize' }]}
+ * >
+ *   <LayerList />
  * </FloatingPanel>
  * ```
+ *
+ * @example Full manual composition, for anything the derived anatomy can't express — `@skdx/react/primitives/floating-panel`.
+ * ```tsx
+ * import { FloatingPanelContent, FloatingPanelHeader, FloatingPanelPortal, FloatingPanelResizeTrigger, FloatingPanelRoot, FloatingPanelTitle, FloatingPanelTrigger } from '@skdx/react/primitives/floating-panel';
+ *
+ * <FloatingPanelRoot>
+ *   <FloatingPanelTrigger>Open panel</FloatingPanelTrigger>
+ *   <FloatingPanelPortal>
+ *     <FloatingPanelContent>
+ *       <FloatingPanelHeader aria-label="Drag to move panel">
+ *         <FloatingPanelTitle>Inspector</FloatingPanelTitle>
+ *       </FloatingPanelHeader>
+ *       <FloatingPanelResizeTrigger direction="se" aria-label="Resize panel" />
+ *     </FloatingPanelContent>
+ *   </FloatingPanelPortal>
+ * </FloatingPanelRoot>
+ * ```
  */
-export declare function FloatingPanel({ children, open: openProp, defaultOpen, onOpenChange, position: positionProp, defaultPosition, onPositionChange, size: sizeProp, defaultSize, onSizeChange, minSize, maxSize, boundary, stage: stageProp, defaultStage, onStageChange, draggable, resizable, step, disabled, getGestureAnnouncement, }: FloatingPanelProps): React.JSX.Element;
+export declare function FloatingPanel({ children, title, stages, dismissible, resizable, open, defaultOpen, onOpenChange, onOpenChangeComplete, position, defaultPosition, onPositionChange, onPositionCommit, size, defaultSize, onSizeChange, onSizeCommit, minSize, maxSize, boundary, stage, defaultStage, onStageChange, draggable, step, disabled, getGestureAnnouncement, ...rest }: FloatingPanelProps): React.JSX.Element;
 export declare namespace FloatingPanel {
     var displayName: string;
 }

package/dist/floating-panel/FloatingPanel.js

@@ -1 +1 @@
-import*as p from"react";import{clamp as G}from"../utils/clamp.js";import{createSafeContext as Re}from"../utils/createContext.js";import{announce as xe}from"../utils/liveAnnouncer.js";import{useCallbackRef as Y}from"../utils/useCallbackRef.js";import{useControllableState as O}from"../utils/useControllableState.js";import{jsx as ve}from"react/jsx-runtime";function Te(e,{position:n,size:t}){return e==="move"?`Panel moved to ${n.x}, ${n.y}`:`Panel resized to ${t.width} by ${t.height}`}var[we,g]=Re("FloatingPanel"),Ce={x:0,y:0},be={width:320,height:240},ze={width:160,height:120},Ee={width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY};function Z(e){let n=e?.current;if(n){let t=n.getBoundingClientRect();return{width:t.width,height:t.height}}return{width:window.innerWidth,height:window.innerHeight}}function _(e,n,t,o){return G(e,n,Math.max(n,Math.min(t,o)))}function De({children:e,open:n,defaultOpen:t=!1,onOpenChange:o,position:a,defaultPosition:h=Ce,onPositionChange:f,size:u,defaultSize:i=be,onSizeChange:w,minSize:d=ze,maxSize:m=Ee,boundary:R,stage:r,defaultStage:s="default",onStageChange:P,draggable:c=!0,resizable:B=!0,step:$=10,disabled:l=!1,getGestureAnnouncement:x}){let b=p.useRef(null),z=p.useRef(null),[le,se]=p.useState(!1),[ge,de]=p.useState(!1),[ce,fe]=p.useState(!1),[S=!1,ue]=O({prop:n,defaultProp:t,onChange:o}),[T=h,X]=O({prop:a,defaultProp:h,onChange:f}),[y=i,me]=O({prop:u,defaultProp:i,onChange:w}),[Pe="default",pe]=O({prop:r,defaultProp:s,onChange:P}),V=p.useRef(S);p.useEffect(()=>{if(V.current&&!S){let F=document.activeElement;(!F||F===document.body||z.current?.contains(F))&&b.current?.focus()}V.current=S},[S]);let he=Y((F,E)=>{if(l||!c)return;let C=Z(R),D={x:G(T.x+F,0,Math.max(0,C.width-y.width)),y:G(T.y+E,0,Math.max(0,C.height-y.height))};(D.x!==T.x||D.y!==T.y)&&X(D)}),ye=Y((F,E,C)=>{if(l||!B)return;let D=Z(R),{x:L,y:N}=T,{width:v,height:M}=y;if(F.includes("e")&&(v=_(y.width+E,d.width,m.width,D.width-L)),F.includes("w")){let k=L+v;v=_(y.width-E,d.width,m.width,k),L=k-v}if(F.includes("s")&&(M=_(y.height+C,d.height,m.height,D.height-N)),F.includes("n")){let k=N+M;M=_(y.height-C,d.height,m.height,k),N=k-M}(v!==y.width||M!==y.height)&&me({width:v,height:M}),(L!==T.x||N!==T.y)&&X({x:L,y:N})}),Fe=Y(F=>{let E={position:{x:Math.round(T.x),y:Math.round(T.y)},size:{width:Math.round(y.width),height:Math.round(y.height)}},C=(x??Te)(F,E);C&&xe(C)});return ve(we,{triggerRef:b,contentRef:z,contentId:p.useId(),titleId:p.useId(),open:S,onOpenChange:ue,position:T,size:y,minSize:d,maxSize:m,stage:Pe,onStageChange:pe,moveBy:he,resizeBy:ye,announceRelease:Fe,draggable:c,resizable:B,disabled:l,step:$,dragging:le,setDragging:se,resizing:ge,setResizing:de,contentPresent:ce,setContentPresent:fe,children:e})}De.displayName="FloatingPanel";import*as W from"react";import{useComposedRefs as Me}from"../utils/composeRefs.js";import{skdxPart as Ie}from"../utils/part.js";import{composeEventHandlers as He,Primitive as Se}from"../utils/primitive.js";import{jsx as Le}from"react/jsx-runtime";var q=W.forwardRef((e,n)=>{let t=g("FloatingPanelTrigger"),o=Me(n,t.triggerRef);return Le(Se.button,{type:"button","aria-haspopup":"dialog","aria-expanded":t.open,"aria-controls":t.contentId,"data-state":t.open?"open":"closed",...e,...Ie("floating-panel","trigger",e.className),ref:o,onClick:He(e.onClick,()=>t.onOpenChange(!t.open))})});q.displayName="FloatingPanelTrigger";import{Portal as Ne}from"../utils/portal.js";import{jsx as ke}from"react/jsx-runtime";var J=({forceMount:e,children:n,...t})=>{let o=g("FloatingPanelPortal");return e||o.open||o.contentPresent?ke(Ne,{...t,children:n}):null};J.displayName="FloatingPanelPortal";import*as K from"react";import{useComposedRefs as Ke}from"../utils/composeRefs.js";import{skdxPart as Ue}from"../utils/part.js";import{usePresence as Ae}from"../utils/presence.js";import{Primitive as Be}from"../utils/primitive.js";import{useDismiss as Oe}from"../utils/useDismiss.js";import{jsx as _e}from"react/jsx-runtime";var Q=K.forwardRef(({forceMount:e,onEscapeKeyDown:n,onPointerDownOutside:t,onFocusOutside:o,onInteractOutside:a,style:h,...f},u)=>{let i=g("FloatingPanelContent"),w=Ke(u,i.contentRef),{setContentPresent:d}=i,m=Ae(i.open,i.contentRef);if(K.useEffect(()=>{d(m)},[m,d]),K.useEffect(()=>()=>d(!1),[d]),Oe({enabled:i.open,onEscapeKeyDown:c=>{n?.(c),c.defaultPrevented||i.onOpenChange(!1)},onInteractOutside:a,onPointerDownOutside:c=>{t?.(c),c.defaultPrevented||i.onOpenChange(!1)},onFocusOutside:o},[i.contentRef,i.triggerRef]),!e&&!m)return null;let{position:R,size:r,stage:s}=i,P=s==="maximized"?{x:"0px",y:"0px",width:"100%",height:"100%"}:{x:`${R.x}px`,y:`${R.y}px`,width:`${r.width}px`,height:s==="minimized"?"auto":`${r.height}px`};return _e(Be.div,{role:"dialog","aria-modal":!1,"aria-labelledby":i.titleId,id:i.contentId,"data-state":i.open?"open":"closed","data-stage":s,"data-dragging":i.dragging?"":void 0,"data-resizing":i.resizing?"":void 0,"data-disabled":i.disabled?"":void 0,...f,...Ue("floating-panel","content",f.className),ref:w,style:{"--skdx-floating-panel-x":P.x,"--skdx-floating-panel-y":P.y,"--skdx-floating-panel-width":P.width,"--skdx-floating-panel-height":P.height,...h}})});Q.displayName="FloatingPanelContent";import*as U from"react";import{directionalKey as $e,useDirection as Ye}from"../utils/direction.js";import{skdxPart as Ge}from"../utils/part.js";import{composeEventHandlers as I,Primitive as Xe}from"../utils/primitive.js";import{jsx as Ze}from"react/jsx-runtime";var Ve=10,j=U.forwardRef(({style:e,...n},t)=>{let o=g("FloatingPanelHeader"),a=Ye(),h=U.useRef(null),f=U.useRef(!1),u=o.draggable&&!o.disabled,i=r=>{u&&(r.currentTarget.setPointerCapture?.(r.pointerId),h.current={x:r.clientX,y:r.clientY},o.setDragging(!0))},w=r=>{let s=h.current;!u||!s||(o.moveBy(r.clientX-s.x,r.clientY-s.y),h.current={x:r.clientX,y:r.clientY})},d=r=>{h.current&&(r.currentTarget.releasePointerCapture?.(r.pointerId),h.current=null,o.setDragging(!1),o.announceRelease("move"))},m=r=>{if(!u)return;let s=o.step*(r.shiftKey?Ve:1),P=$e(r.key,r.currentTarget,a),c=P==="ArrowLeft"?{dx:-s,dy:0}:P==="ArrowRight"?{dx:s,dy:0}:P==="ArrowUp"?{dx:0,dy:-s}:P==="ArrowDown"?{dx:0,dy:s}:null;c&&(r.preventDefault(),f.current=!0,o.moveBy(c.dx,c.dy))},R=()=>{f.current&&(f.current=!1,o.announceRelease("move"))};return Ze(Xe.div,{"data-dragging":o.dragging?"":void 0,"data-disabled":o.disabled?"":void 0,tabIndex:u?0:void 0,...n,...Ge("floating-panel","header",n.className),ref:t,onPointerDown:I(n.onPointerDown,i),onPointerMove:I(n.onPointerMove,w),onPointerUp:I(n.onPointerUp,d),onPointerCancel:I(n.onPointerCancel,d),onKeyDown:I(n.onKeyDown,m),onKeyUp:I(n.onKeyUp,R),style:{touchAction:"none",cursor:u?"move":void 0,...e}})});j.displayName="FloatingPanelHeader";import*as ee from"react";import{skdxPart as We}from"../utils/part.js";import{Primitive as qe}from"../utils/primitive.js";import{jsx as Je}from"react/jsx-runtime";var te=ee.forwardRef((e,n)=>{let t=g("FloatingPanelTitle");return Je(qe.h2,{id:t.titleId,...e,...We("floating-panel","title",e.className),ref:n})});te.displayName="FloatingPanelTitle";import*as ne from"react";import{skdxPart as Qe}from"../utils/part.js";import{composeEventHandlers as je,Primitive as et}from"../utils/primitive.js";import{jsx as tt}from"react/jsx-runtime";var oe=ne.forwardRef((e,n)=>{let t=g("FloatingPanelCloseTrigger");return tt(et.button,{type:"button",...e,...Qe("floating-panel","close-trigger",e.className),ref:n,onClick:je(e.onClick,()=>t.onOpenChange(!1))})});oe.displayName="FloatingPanelCloseTrigger";import*as A from"react";import{directionalKey as nt,useDirection as ot}from"../utils/direction.js";import{skdxPart as at}from"../utils/part.js";import{composeEventHandlers as H,Primitive as it}from"../utils/primitive.js";import{jsx as lt}from"react/jsx-runtime";var rt=10,ae=A.forwardRef(({direction:e,style:n,...t},o)=>{let a=g("FloatingPanelResizeTrigger"),h=ot(),f=A.useRef(null),u=A.useRef(!1),i=a.resizable&&!a.disabled,w=e.includes("e")||e.includes("w"),d=w?a.size.width:a.size.height,m=w?a.minSize.width:a.minSize.height,R=w?a.maxSize.width:a.maxSize.height,r=e==="e"||e==="w"?"vertical":e==="n"||e==="s"?"horizontal":void 0,s=l=>{i&&(l.currentTarget.setPointerCapture?.(l.pointerId),f.current={x:l.clientX,y:l.clientY},a.setResizing(!0))},P=l=>{let x=f.current;!i||!x||(a.resizeBy(e,l.clientX-x.x,l.clientY-x.y),f.current={x:l.clientX,y:l.clientY})},c=l=>{f.current&&(l.currentTarget.releasePointerCapture?.(l.pointerId),f.current=null,a.setResizing(!1),a.announceRelease("resize"))},B=l=>{if(!i)return;let x=a.step*(l.shiftKey?rt:1),b=nt(l.key,l.currentTarget,h),z=b==="ArrowLeft"?{dx:-x,dy:0}:b==="ArrowRight"?{dx:x,dy:0}:b==="ArrowUp"?{dx:0,dy:-x}:b==="ArrowDown"?{dx:0,dy:x}:null;z&&(l.preventDefault(),u.current=!0,a.resizeBy(e,z.dx,z.dy))},$=()=>{u.current&&(u.current=!1,a.announceRelease("resize"))};return lt(it.div,{role:"separator","aria-orientation":r,"aria-valuenow":Math.round(d),"aria-valuemin":Math.round(m),"aria-valuemax":Number.isFinite(R)?Math.round(R):void 0,"aria-disabled":a.disabled||void 0,"data-direction":e,"data-resizing":a.resizing?"":void 0,"data-disabled":a.disabled?"":void 0,tabIndex:i?0:void 0,...t,...at("floating-panel","resize-trigger",t.className),ref:o,onPointerDown:H(t.onPointerDown,s),onPointerMove:H(t.onPointerMove,P),onPointerUp:H(t.onPointerUp,c),onPointerCancel:H(t.onPointerCancel,c),onKeyDown:H(t.onKeyDown,B),onKeyUp:H(t.onKeyUp,$),style:{touchAction:"none",cursor:i?`${e}-resize`:void 0,...n}})});ae.displayName="FloatingPanelResizeTrigger";import*as ie from"react";import{skdxPart as st}from"../utils/part.js";import{composeEventHandlers as gt,Primitive as dt}from"../utils/primitive.js";import{jsx as ct}from"react/jsx-runtime";var re=ie.forwardRef(({stage:e,...n},t)=>{let o=g("FloatingPanelStageTrigger"),a=o.stage===e;return ct(dt.button,{type:"button","aria-pressed":a,disabled:o.disabled||void 0,"data-stage":o.stage,"data-state":a?"on":"off","data-disabled":o.disabled?"":void 0,...n,...st("floating-panel","stage-trigger",n.className),ref:t,onClick:gt(n.onClick,()=>{o.disabled||o.onStageChange(a?"default":e)})})});re.displayName="FloatingPanelStageTrigger";export{De as FloatingPanel,oe as FloatingPanelCloseTrigger,Q as FloatingPanelContent,j as FloatingPanelHeader,J as FloatingPanelPortal,we as FloatingPanelProvider,ae as FloatingPanelResizeTrigger,re as FloatingPanelStageTrigger,te as FloatingPanelTitle,q as FloatingPanelTrigger,Te as gestureAnnouncement,g as useFloatingPanelContext};
+import*as u from"react";import{clamp as V}from"../utils/clamp.js";import{createSafeContext as ct}from"../utils/createContext.js";import{announce as mt}from"../utils/liveAnnouncer.js";import{useCallbackRef as se}from"../utils/useCallbackRef.js";import{useControllableState as q}from"../utils/useControllableState.js";import{useOpenChangeComplete as ut}from"../utils/useOpenChangeComplete.js";import*as me from"react";import{skdxPart as Se}from"../utils/part.js";import{composeEventHandlers as Ae,Primitive as Le}from"../utils/primitive.js";import{jsx as ke}from"react/jsx-runtime";var te=me.forwardRef((e,a)=>{let t=p("FloatingPanelCloseTrigger");return ke(Le.button,{type:"button",...e,...Se("floating-panel","close-trigger",e.className),ref:a,onClick:Ae(e.onClick,()=>t.onOpenChange(!1))})});te.displayName="FloatingPanelCloseTrigger";import*as $ from"react";import{useComposedRefs as Ne}from"../utils/composeRefs.js";import{skdxPart as Oe}from"../utils/part.js";import{usePresence as Ue}from"../utils/presence.js";import{Primitive as Ke}from"../utils/primitive.js";import{useDismiss as Be}from"../utils/useDismiss.js";import{jsx as _e}from"react/jsx-runtime";var ne=$.forwardRef(({forceMount:e,onEscapeKeyDown:a,onPointerDownOutside:t,onFocusOutside:n,onInteractOutside:o,style:h,...g},y)=>{let r=p("FloatingPanelContent"),b=Ne(y,r.contentRef),{setContentPresent:R}=r,T=Ue(r.open,r.contentRef);if($.useEffect(()=>{R(T)},[T,R]),$.useEffect(()=>()=>R(!1),[R]),Be({enabled:r.open,onEscapeKeyDown:P=>{a?.(P),P.defaultPrevented||r.onOpenChange(!1)},onInteractOutside:o,onPointerDownOutside:P=>{t?.(P),P.defaultPrevented||r.onOpenChange(!1)},onFocusOutside:n},[r.contentRef,r.triggerRef]),!e&&!T)return null;let{position:C,size:i,stage:l}=r,c=l==="maximized"?{x:"0px",y:"0px",width:"100%",height:"100%"}:{x:`${C.x}px`,y:`${C.y}px`,width:`${i.width}px`,height:l==="minimized"?"auto":`${i.height}px`};return _e(Ke.div,{role:"dialog","aria-modal":!1,"aria-labelledby":r.hasTitle?r.titleId:void 0,id:r.contentId,"data-state":r.open?"open":"closed","data-stage":l,"data-dragging":r.dragging?"":void 0,"data-resizing":r.resizing?"":void 0,"data-disabled":r.disabled?"":void 0,...g,...Oe("floating-panel","content",g.className),ref:b,style:{"--skdx-floating-panel-x":c.x,"--skdx-floating-panel-y":c.y,"--skdx-floating-panel-width":c.width,"--skdx-floating-panel-height":c.height,...h}})});ne.displayName="FloatingPanelContent";import*as G from"react";import{directionalKey as Ye,useDirection as $e}from"../utils/direction.js";import{skdxPart as Ge}from"../utils/part.js";import{composeEventHandlers as N,Primitive as Xe}from"../utils/primitive.js";import{jsx as Ze}from"react/jsx-runtime";var Ve=10,oe=G.forwardRef(({style:e,...a},t)=>{let n=p("FloatingPanelHeader"),o=$e(),h=G.useRef(null),g=G.useRef(!1),y=n.draggable&&!n.disabled,r=i=>{y&&(i.currentTarget.setPointerCapture?.(i.pointerId),h.current={x:i.clientX,y:i.clientY},n.setDragging(!0))},b=i=>{let l=h.current;!y||!l||(n.moveBy(i.clientX-l.x,i.clientY-l.y),h.current={x:i.clientX,y:i.clientY})},R=i=>{h.current&&(i.currentTarget.releasePointerCapture?.(i.pointerId),h.current=null,n.setDragging(!1),n.announceRelease("move"))},T=i=>{if(!y)return;let l=n.step*(i.shiftKey?Ve:1),c=Ye(i.key,i.currentTarget,o),P=c==="ArrowLeft"?{dx:-l,dy:0}:c==="ArrowRight"?{dx:l,dy:0}:c==="ArrowUp"?{dx:0,dy:-l}:c==="ArrowDown"?{dx:0,dy:l}:null;P&&(i.preventDefault(),g.current=!0,n.moveBy(P.dx,P.dy))},C=()=>{g.current&&(g.current=!1,n.announceRelease("move"))};return Ze(Xe.div,{"aria-disabled":n.disabled||void 0,"aria-keyshortcuts":n.draggable?"ArrowUp ArrowDown ArrowLeft ArrowRight":void 0,"data-dragging":n.dragging?"":void 0,"data-disabled":n.disabled?"":void 0,tabIndex:n.draggable?0:void 0,...a,...Ge("floating-panel","header",a.className),ref:t,onPointerDown:N(a.onPointerDown,r),onPointerMove:N(a.onPointerMove,b),onPointerUp:N(a.onPointerUp,R),onPointerCancel:N(a.onPointerCancel,R),onKeyDown:N(a.onKeyDown,T),onKeyUp:N(a.onKeyUp,C),style:{touchAction:"none",cursor:y?"move":void 0,...e}})});oe.displayName="FloatingPanelHeader";import{Portal as We}from"../utils/portal.js";import{jsx as qe}from"react/jsx-runtime";var ae=({forceMount:e,children:a,...t})=>{let n=p("FloatingPanelPortal");return e||n.open||n.contentPresent?qe(We,{...t,children:a}):null};ae.displayName="FloatingPanelPortal";import*as X from"react";import{directionalKey as Je,useDirection as Qe}from"../utils/direction.js";import{skdxPart as je}from"../utils/part.js";import{composeEventHandlers as O,Primitive as et}from"../utils/primitive.js";import{jsx as nt}from"react/jsx-runtime";var tt=10,ie=X.forwardRef(({direction:e,style:a,...t},n)=>{let o=p("FloatingPanelResizeTrigger"),h=Qe(),g=X.useRef(null),y=X.useRef(!1),r=o.resizable&&!o.disabled,b=e.includes("e")||e.includes("w"),R=b?o.size.width:o.size.height,T=b?o.minSize.width:o.minSize.height,C=b?o.maxSize.width:o.maxSize.height,i=o.bounds?b?o.bounds.width-o.position.x:o.bounds.height-o.position.y:Number.POSITIVE_INFINITY,l=Math.max(T,Math.min(C,i)),c=e==="e"||e==="w"?"vertical":e==="n"||e==="s"?"horizontal":void 0,P=d=>{r&&(d.currentTarget.setPointerCapture?.(d.pointerId),g.current={x:d.clientX,y:d.clientY},o.setResizing(!0))},U=d=>{let F=g.current;!r||!F||(o.resizeBy(e,d.clientX-F.x,d.clientY-F.y),g.current={x:d.clientX,y:d.clientY})},I=d=>{g.current&&(d.currentTarget.releasePointerCapture?.(d.pointerId),g.current=null,o.setResizing(!1),o.announceRelease("resize"))},H=d=>{if(!r)return;let F=o.step*(d.shiftKey?tt:1),v=Je(d.key,d.currentTarget,h),E=v==="ArrowLeft"?{dx:-F,dy:0}:v==="ArrowRight"?{dx:F,dy:0}:v==="ArrowUp"?{dx:0,dy:-F}:v==="ArrowDown"?{dx:0,dy:F}:null;E&&(d.preventDefault(),y.current=!0,o.resizeBy(e,E.dx,E.dy))},S=()=>{y.current&&(y.current=!1,o.announceRelease("resize"))};return nt(et.div,{role:"separator","aria-orientation":c,"aria-valuenow":Math.round(R),"aria-valuemin":Math.round(T),"aria-valuemax":Number.isFinite(l)?Math.round(l):void 0,"aria-disabled":o.disabled||void 0,"aria-keyshortcuts":o.resizable?"ArrowUp ArrowDown ArrowLeft ArrowRight":void 0,"data-direction":e,"data-resizing":o.resizing?"":void 0,"data-disabled":o.disabled?"":void 0,tabIndex:o.resizable?0:void 0,...t,...je("floating-panel","resize-trigger",t.className),ref:n,onPointerDown:O(t.onPointerDown,P),onPointerMove:O(t.onPointerMove,U),onPointerUp:O(t.onPointerUp,I),onPointerCancel:O(t.onPointerCancel,I),onKeyDown:O(t.onKeyDown,H),onKeyUp:O(t.onKeyUp,S),style:{touchAction:"none",cursor:r?`${e}-resize`:void 0,...a}})});ie.displayName="FloatingPanelResizeTrigger";import*as ue from"react";import{skdxPart as ot}from"../utils/part.js";import{composeEventHandlers as at,Primitive as it}from"../utils/primitive.js";import{jsx as rt}from"react/jsx-runtime";var re=ue.forwardRef(({stage:e,...a},t)=>{let n=p("FloatingPanelStageTrigger"),o=n.stage===e;return rt(it.button,{type:"button","aria-pressed":o,"aria-disabled":n.disabled||void 0,"data-stage":n.stage,"data-state":o?"on":"off","data-disabled":n.disabled?"":void 0,...a,...ot("floating-panel","stage-trigger",a.className),ref:t,onClick:at(a.onClick,()=>{n.disabled||n.onStageChange(o?"default":e)})})});re.displayName="FloatingPanelStageTrigger";import*as W from"react";import{skdxPart as lt}from"../utils/part.js";import{Primitive as st}from"../utils/primitive.js";import{jsx as gt}from"react/jsx-runtime";var le=W.forwardRef((e,a)=>{let t=p("FloatingPanelTitle"),{setHasTitle:n}=t;return W.useEffect(()=>(n(!0),()=>n(!1)),[n]),gt(st.h2,{id:t.titleId,...e,...lt("floating-panel","title",e.className),ref:a})});le.displayName="FloatingPanelTitle";import{jsx as M,jsxs as fe}from"react/jsx-runtime";var dt=()=>M("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false",children:M("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})}),pe=({title:e,stages:a=[],dismissible:t,resizable:n,children:o,passThrough:h})=>M(ae,{children:fe(ne,{...h,children:[fe(oe,{"aria-label":"Drag to move panel",children:[e?M(le,{children:e}):null,a.map(g=>M(re,{stage:g.stage,children:g.label},g.stage)),t?M(te,{"aria-label":"Close",children:M(dt,{})}):null]}),o,n?M(ie,{direction:"se","aria-label":"Resize panel"}):null]})});import{jsx as de}from"react/jsx-runtime";function he(e,{position:a,size:t}){return e==="move"?`Panel moved to ${a.x}, ${a.y}`:`Panel resized to ${t.width} by ${t.height}`}var[ft,p]=ct("FloatingPanel"),pt={x:0,y:0},ht={width:320,height:240},Pt={width:160,height:120},yt={width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY};function ge(e){let a=e?.current;if(a){let t=a.getBoundingClientRect();return{width:t.width,height:t.height}}return{width:window.innerWidth,height:window.innerHeight}}function J(e,a,t,n){return V(e,a,Math.max(a,Math.min(t,n)))}function Pe({children:e,open:a,defaultOpen:t=!1,onOpenChange:n,onOpenChangeComplete:o,position:h,defaultPosition:g=pt,onPositionChange:y,onPositionCommit:r,size:b,defaultSize:R=ht,onSizeChange:T,onSizeCommit:C,minSize:i=Pt,maxSize:l=yt,boundary:c,stage:P,defaultStage:U="default",onStageChange:I,draggable:H=!0,resizable:S=!0,step:d=10,disabled:F=!1,getGestureAnnouncement:v}){let E=u.useRef(null),K=u.useRef(null),[Q,j]=u.useState(!1),[Fe,xe]=u.useState(!1),[we,be]=u.useState(!1),[Te,Ce]=u.useState(!1),[D,ze]=u.useState(null),[A=!1,ve]=q({prop:a,defaultProp:t,onChange:n}),[f=g,Z]=q({prop:h,defaultProp:g,onChange:y}),[m=R,ee]=q({prop:b,defaultProp:R,onChange:T}),[Ee="default",Me]=q({prop:P,defaultProp:U,onChange:I});ut(A,K,o),u.useEffect(()=>{let s=()=>ze(ge(c));s();let w=c?.current;if(w&&typeof ResizeObserver<"u"){let x=new ResizeObserver(s);return x.observe(w),()=>x.disconnect()}return window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[c]),u.useEffect(()=>{if(!D)return;let s=Math.min(m.width,Math.max(i.width,D.width)),w=Math.min(m.height,Math.max(i.height,D.height));(s!==m.width||w!==m.height)&&ee({width:s,height:w});let x=V(f.x,0,Math.max(0,D.width-s)),z=V(f.y,0,Math.max(0,D.height-w));(x!==f.x||z!==f.y)&&Z({x,y:z})},[D,m,i,f,ee,Z]);let ce=u.useRef(A);u.useEffect(()=>{if(ce.current&&!A){let s=document.activeElement;(!s||s===document.body||K.current?.contains(s))&&E.current?.focus()}ce.current=A},[A]);let De=se((s,w)=>{if(F||!H)return;let x=ge(c),z={x:V(f.x+s,0,Math.max(0,x.width-m.width)),y:V(f.y+w,0,Math.max(0,x.height-m.height))};(z.x!==f.x||z.y!==f.y)&&Z(z)}),Ie=se((s,w,x)=>{if(F||!S)return;let z=ge(c),{x:B,y:_}=f,{width:L,height:k}=m;if(s.includes("e")&&(L=J(m.width+w,i.width,l.width,z.width-B)),s.includes("w")){let Y=B+L;L=J(m.width-w,i.width,l.width,Y),B=Y-L}if(s.includes("s")&&(k=J(m.height+x,i.height,l.height,z.height-_)),s.includes("n")){let Y=_+k;k=J(m.height-x,i.height,l.height,Y),_=Y-k}(L!==m.width||k!==m.height)&&ee({width:L,height:k}),(B!==f.x||_!==f.y)&&Z({x:B,y:_})}),He=se(s=>{s==="resize"&&C?.(m),r?.(f);let w={position:{x:Math.round(f.x),y:Math.round(f.y)},size:{width:Math.round(m.width),height:Math.round(m.height)}},x=(v??he)(s,w);x&&mt(x)});return de(ft,{triggerRef:E,contentRef:K,contentId:u.useId(),titleId:u.useId(),hasTitle:Te,setHasTitle:Ce,open:A,onOpenChange:ve,position:f,size:m,minSize:i,maxSize:l,bounds:D,stage:Ee,onStageChange:Me,moveBy:De,resizeBy:Ie,announceRelease:He,draggable:H,resizable:S,disabled:F,step:d,dragging:Q,setDragging:j,resizing:Fe,setResizing:xe,contentPresent:we,setContentPresent:be,children:e})}Pe.displayName="FloatingPanelRoot";function ye({children:e,title:a,stages:t,dismissible:n=!0,resizable:o=!0,open:h,defaultOpen:g,onOpenChange:y,onOpenChangeComplete:r,position:b,defaultPosition:R,onPositionChange:T,onPositionCommit:C,size:i,defaultSize:l,onSizeChange:c,onSizeCommit:P,minSize:U,maxSize:I,boundary:H,stage:S,defaultStage:d,onStageChange:F,draggable:v,step:E,disabled:K,getGestureAnnouncement:Q,...j}){return de(Pe,{open:h,defaultOpen:g,onOpenChange:y,onOpenChangeComplete:r,position:b,defaultPosition:R,onPositionChange:T,onPositionCommit:C,size:i,defaultSize:l,onSizeChange:c,onSizeCommit:P,minSize:U,maxSize:I,boundary:H,stage:S,defaultStage:d,onStageChange:F,draggable:v,resizable:o,step:E,disabled:K,getGestureAnnouncement:Q,children:de(pe,{title:a,stages:t,dismissible:n,resizable:o,passThrough:j,children:e})})}ye.displayName="FloatingPanel";import*as Re from"react";import{useComposedRefs as Rt}from"../utils/composeRefs.js";import{skdxPart as Ft}from"../utils/part.js";import{composeEventHandlers as xt,Primitive as wt}from"../utils/primitive.js";import{jsx as Tt}from"react/jsx-runtime";var bt=Re.forwardRef((e,a)=>{let t=p("FloatingPanelTrigger"),n=Rt(a,t.triggerRef);return Tt(wt.button,{type:"button","aria-haspopup":"dialog","aria-expanded":t.open,"aria-controls":t.contentId,"data-state":t.open?"open":"closed",...e,...Ft("floating-panel","trigger",e.className),ref:n,onClick:xt(e.onClick,()=>t.onOpenChange(!t.open))})});bt.displayName="FloatingPanelTrigger";export{ye as FloatingPanel,te as FloatingPanelCloseTrigger,ne as FloatingPanelContent,oe as FloatingPanelHeader,ae as FloatingPanelPortal,ft as FloatingPanelProvider,ie as FloatingPanelResizeTrigger,Pe as FloatingPanelRoot,re as FloatingPanelStageTrigger,le as FloatingPanelTitle,bt as FloatingPanelTrigger,he as gestureAnnouncement,p as useFloatingPanelContext};

package/dist/floating-panel/FloatingPanelAnatomy.d.cts

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+import type { FloatingPanelProps } from './types.cjs';
+/**
+ * Renders FloatingPanel anatomy: portal with movable surface, header, and body. Non-modal, no overlay or focus trap.
+ * @internal
+ */
+export declare const FloatingPanelAnatomy: ({ title, stages, dismissible, resizable, children, passThrough, }: {
+    title?: string;
+    stages?: FloatingPanelProps["stages"];
+    dismissible: boolean;
+    resizable: boolean;
+    children?: React.ReactNode;
+    passThrough?: PassThroughProps;
+}) => React.JSX.Element;

package/dist/floating-panel/FloatingPanelAnatomy.d.ts

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { FloatingPanelProps } from './types.js';
+/**
+ * Renders FloatingPanel anatomy: portal with movable surface, header, and body. Non-modal, no overlay or focus trap.
+ * @internal
+ */
+export declare const FloatingPanelAnatomy: ({ title, stages, dismissible, resizable, children, passThrough, }: {
+    title?: string;
+    stages?: FloatingPanelProps["stages"];
+    dismissible: boolean;
+    resizable: boolean;
+    children?: React.ReactNode;
+    passThrough?: PassThroughProps;
+}) => React.JSX.Element;

package/dist/floating-panel/FloatingPanelCloseTrigger.d.cts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import type { FloatingPanelCloseTriggerProps } from './types.cjs';
 /**
- * Button that closes the panel, returning focus to `FloatingPanelTrigger`.
- * Usually lives in the header next to the stage triggers, but works anywhere
- * inside `FloatingPanelContent`. Unaffected by `disabled`, which freezes the
- * panel's geometry rather than sealing it shut.
+ * Closes the panel, returning focus to FloatingPanelTrigger. Unaffected by `disabled`.
  *
  * @example
  * ```tsx

package/dist/floating-panel/FloatingPanelCloseTrigger.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import type { FloatingPanelCloseTriggerProps } from './types.js';
 /**
- * Button that closes the panel, returning focus to `FloatingPanelTrigger`.
- * Usually lives in the header next to the stage triggers, but works anywhere
- * inside `FloatingPanelContent`. Unaffected by `disabled`, which freezes the
- * panel's geometry rather than sealing it shut.
+ * Closes the panel, returning focus to FloatingPanelTrigger. Unaffected by `disabled`.
  *
  * @example
  * ```tsx

package/dist/floating-panel/FloatingPanelContent.d.cts

@@ -2,28 +2,17 @@ import * as React from 'react';
 import type { FloatingPanelContentProps } from './types.cjs';
 /**
  * The movable surface: `role="dialog"` with **`aria-modal="false"`**, named by
- * `FloatingPanelTitle` through `aria-labelledby`. It traps nothing, locks
- * nothing, and covers nothing — the page behind it keeps working, which is the
- * whole reason to reach for a panel instead of a dialog.
+ * `FloatingPanelTitle` through `aria-labelledby` (emitted only while Title mounted, so `aria-label` persists).
+ * Traps nothing, locks nothing, covers nothing — page behind keeps working (reason to use panel over dialog).
  *
- * Closes on Escape or on pointer-down outside itself and its trigger, each
- * reported to `onEscapeKeyDown`/`onPointerDownOutside` and, for the outside
- * paths, to `onInteractOutside` first with the same event — so one
- * `event.preventDefault()` vetoes the dismissal either way. Focus moving
- * outside is reported to `onFocusOutside` but never closes the panel: a
- * non-modal window that vanished when you tabbed back to the page would be
- * unusable.
+ * Closes on Escape or pointer-down outside itself/trigger (reported to `onEscapeKeyDown`/`onPointerDownOutside`,
+ * then to `onInteractOutside` first so one `preventDefault()` vetoes dismissal either way).
+ * Focus moving outside reported to `onFocusOutside` but never closes (non-modal window closing on blur is unusable).
  *
- * Publishes its geometry as `--skdx-floating-panel-x` / `-y` / `-width` /
- * `-height` so a consumer can position it entirely from CSS, and exposes
- * `data-state`, `data-stage`, `data-dragging`, `data-resizing`, and
- * `data-disabled`. At `stage="maximized"` the published width and height
- * become `100%` rather than a measured pixel value — nothing has to observe
- * the boundary for the panel to fill it. At `stage="minimized"` the height
- * becomes `auto`, collapsing the panel to whatever its header needs.
- *
- * Stays mounted past close until its CSS exit animation ends; `forceMount`
- * only matters if you animate with something other than CSS.
+ * Publishes geometry as `--skdx-floating-panel-x` / `-y` / `-width` / `-height` for CSS positioning.
+ * Exposes `data-state`, `data-stage`, `data-dragging`, `data-resizing`, `data-disabled`.
+ * At `stage="maximized"`, width/height become `100%`. At `stage="minimized"`, height becomes `auto`.
+ * Stays mounted past close until CSS exit animation ends; `forceMount` only matters if animating non-CSS.
  *
  * @example
  * ```tsx

package/dist/floating-panel/FloatingPanelContent.d.ts

@@ -2,28 +2,17 @@ import * as React from 'react';
 import type { FloatingPanelContentProps } from './types.js';
 /**
  * The movable surface: `role="dialog"` with **`aria-modal="false"`**, named by
- * `FloatingPanelTitle` through `aria-labelledby`. It traps nothing, locks
- * nothing, and covers nothing — the page behind it keeps working, which is the
- * whole reason to reach for a panel instead of a dialog.
+ * `FloatingPanelTitle` through `aria-labelledby` (emitted only while Title mounted, so `aria-label` persists).
+ * Traps nothing, locks nothing, covers nothing — page behind keeps working (reason to use panel over dialog).
  *
- * Closes on Escape or on pointer-down outside itself and its trigger, each
- * reported to `onEscapeKeyDown`/`onPointerDownOutside` and, for the outside
- * paths, to `onInteractOutside` first with the same event — so one
- * `event.preventDefault()` vetoes the dismissal either way. Focus moving
- * outside is reported to `onFocusOutside` but never closes the panel: a
- * non-modal window that vanished when you tabbed back to the page would be
- * unusable.
+ * Closes on Escape or pointer-down outside itself/trigger (reported to `onEscapeKeyDown`/`onPointerDownOutside`,
+ * then to `onInteractOutside` first so one `preventDefault()` vetoes dismissal either way).
+ * Focus moving outside reported to `onFocusOutside` but never closes (non-modal window closing on blur is unusable).
  *
- * Publishes its geometry as `--skdx-floating-panel-x` / `-y` / `-width` /
- * `-height` so a consumer can position it entirely from CSS, and exposes
- * `data-state`, `data-stage`, `data-dragging`, `data-resizing`, and
- * `data-disabled`. At `stage="maximized"` the published width and height
- * become `100%` rather than a measured pixel value — nothing has to observe
- * the boundary for the panel to fill it. At `stage="minimized"` the height
- * becomes `auto`, collapsing the panel to whatever its header needs.
- *
- * Stays mounted past close until its CSS exit animation ends; `forceMount`
- * only matters if you animate with something other than CSS.
+ * Publishes geometry as `--skdx-floating-panel-x` / `-y` / `-width` / `-height` for CSS positioning.
+ * Exposes `data-state`, `data-stage`, `data-dragging`, `data-resizing`, `data-disabled`.
+ * At `stage="maximized"`, width/height become `100%`. At `stage="minimized"`, height becomes `auto`.
+ * Stays mounted past close until CSS exit animation ends; `forceMount` only matters if animating non-CSS.
  *
  * @example
  * ```tsx

package/dist/floating-panel/FloatingPanelHeader.d.cts

@@ -1,19 +1,9 @@
 import * as React from 'react';
 import type { FloatingPanelHeaderProps } from './types.cjs';
 /**
- * The panel's drag handle — the bar you grab to move the window, and the
- * natural home for `FloatingPanelTitle` and the close/stage buttons.
- *
- * **Keyboard-operable, not mouse-only.** While focused, the arrow keys move
- * the panel by the root's `step` and Shift+arrow by ten times that, clamped to
- * the boundary exactly as a drag would be. The final position is announced
- * politely once, on release — never per frame. Under `dir="rtl"` the
- * horizontal arrows mirror, like every other horizontal interaction in the
- * package.
- *
- * It becomes focusable (`tabIndex={0}`) whenever dragging is actually
- * available, so give it an `aria-label` — a focusable bar with no name tells
- * a screen-reader user nothing about what the arrow keys will do.
+ * Drag handle for the panel. Arrow keys move it by `step`, Shift+arrow by 10×.
+ * Position announced politely on release. Mirrors under `dir="rtl"`.
+ * Provide `aria-label` when focusable, describing keyboard behavior to screen readers.
  *
  * @example
  * ```tsx

package/dist/floating-panel/FloatingPanelHeader.d.ts

@@ -1,19 +1,9 @@
 import * as React from 'react';
 import type { FloatingPanelHeaderProps } from './types.js';
 /**
- * The panel's drag handle — the bar you grab to move the window, and the
- * natural home for `FloatingPanelTitle` and the close/stage buttons.
- *
- * **Keyboard-operable, not mouse-only.** While focused, the arrow keys move
- * the panel by the root's `step` and Shift+arrow by ten times that, clamped to
- * the boundary exactly as a drag would be. The final position is announced
- * politely once, on release — never per frame. Under `dir="rtl"` the
- * horizontal arrows mirror, like every other horizontal interaction in the
- * package.
- *
- * It becomes focusable (`tabIndex={0}`) whenever dragging is actually
- * available, so give it an `aria-label` — a focusable bar with no name tells
- * a screen-reader user nothing about what the arrow keys will do.
+ * Drag handle for the panel. Arrow keys move it by `step`, Shift+arrow by 10×.
+ * Position announced politely on release. Mirrors under `dir="rtl"`.
+ * Provide `aria-label` when focusable, describing keyboard behavior to screen readers.
  *
  * @example
  * ```tsx

package/dist/floating-panel/FloatingPanelPortal.d.cts

@@ -1,13 +1,8 @@
 import type { FloatingPanelPortalProps } from './types.cjs';
 /**
  * Teleports `FloatingPanelContent` to `document.body` (or a custom
- * `container`), so a movable window is not clipped by whatever `overflow`
- * ancestor its trigger happens to live in.
- *
- * Unlike the other overlays' portals, this one does not unmount the instant
- * the panel closes: it stays while `FloatingPanelContent` is still present,
- * which is how a CSS exit animation gets to finish inside a portal that would
- * otherwise have been torn out from under it.
+ * `container`) so the window is not clipped by `overflow` ancestors.
+ * Remains mounted during exit animations.
  *
  * @example
  * ```tsx

package/dist/floating-panel/FloatingPanelPortal.d.ts

@@ -1,13 +1,8 @@
 import type { FloatingPanelPortalProps } from './types.js';
 /**
  * Teleports `FloatingPanelContent` to `document.body` (or a custom
- * `container`), so a movable window is not clipped by whatever `overflow`
- * ancestor its trigger happens to live in.
- *
- * Unlike the other overlays' portals, this one does not unmount the instant
- * the panel closes: it stays while `FloatingPanelContent` is still present,
- * which is how a CSS exit animation gets to finish inside a portal that would
- * otherwise have been torn out from under it.
+ * `container`) so the window is not clipped by `overflow` ancestors.
+ * Remains mounted during exit animations.
  *
  * @example
  * ```tsx

package/dist/floating-panel/FloatingPanelResizeTrigger.d.cts

@@ -1,25 +1,7 @@
 import * as React from 'react';
 import type { FloatingPanelResizeTriggerProps } from './types.cjs';
 /**
- * One resize grip, for the edge or corner named by `direction`. Render as many
- * as you want handles — eight for a full window, one `"se"` corner for the
- * common case.
- *
- * Renders `role="separator"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
- * describing the dimension this grip controls (width for `e`/`w` and the
- * corners, height for `n`/`s`), plus `aria-orientation` on the four edges,
- * `data-direction`, `data-resizing`, and `data-disabled`.
- *
- * **Keyboard-operable.** While focused, the arrow keys resize along this
- * grip's own direction — a `"e"` grip ignores the vertical arrows, a `"se"`
- * grip answers to all four — by the root's `step`, or ten times that with
- * Shift. Dragging a `w` or `n` grip moves the panel's origin as well as its
- * size, so the opposite edge stays put. Every result is clamped to `minSize`,
- * `maxSize`, and the boundary. The final size is announced politely once, on
- * release. Under `dir="rtl"` the horizontal arrows mirror.
- *
- * Give it an `aria-label` — a grip announced only as "separator" is not
- * operable by anyone who cannot see where it sits.
+ * Resize grip for an edge or corner. Keyboard-operable: arrow keys resize by root's `step`, Shift multiplies by 10, mirrored under `dir="rtl"`, clamped to `minSize`/`maxSize`. Requires `aria-label`.
  *
  * @example
  * ```tsx

package/dist/floating-panel/FloatingPanelResizeTrigger.d.ts

@@ -1,25 +1,7 @@
 import * as React from 'react';
 import type { FloatingPanelResizeTriggerProps } from './types.js';
 /**
- * One resize grip, for the edge or corner named by `direction`. Render as many
- * as you want handles — eight for a full window, one `"se"` corner for the
- * common case.
- *
- * Renders `role="separator"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
- * describing the dimension this grip controls (width for `e`/`w` and the
- * corners, height for `n`/`s`), plus `aria-orientation` on the four edges,
- * `data-direction`, `data-resizing`, and `data-disabled`.
- *
- * **Keyboard-operable.** While focused, the arrow keys resize along this
- * grip's own direction — a `"e"` grip ignores the vertical arrows, a `"se"`
- * grip answers to all four — by the root's `step`, or ten times that with
- * Shift. Dragging a `w` or `n` grip moves the panel's origin as well as its
- * size, so the opposite edge stays put. Every result is clamped to `minSize`,
- * `maxSize`, and the boundary. The final size is announced politely once, on
- * release. Under `dir="rtl"` the horizontal arrows mirror.
- *
- * Give it an `aria-label` — a grip announced only as "separator" is not
- * operable by anyone who cannot see where it sits.
+ * Resize grip for an edge or corner. Keyboard-operable: arrow keys resize by root's `step`, Shift multiplies by 10, mirrored under `dir="rtl"`, clamped to `minSize`/`maxSize`. Requires `aria-label`.
  *
  * @example
  * ```tsx

package/dist/floating-panel/FloatingPanelStageTrigger.d.cts

@@ -1,15 +1,9 @@
 import * as React from 'react';
 import type { FloatingPanelStageTriggerProps } from './types.cjs';
 /**
- * Button that switches the panel to the `stage` it names — and back to
- * `'default'` when the panel is already there. That toggle is why minimize and
- * restore are one button rather than two: it reports the state it is in via
- * `aria-pressed`, so a screen reader announces "Minimize, pressed" rather than
- * two buttons swapping places under the user.
- *
- * Also exposes the panel's current stage as `data-stage` and its own active
- * state as `data-state` (`on`/`off`). Refuses to act while the panel is
- * `disabled`, since a stage change rewrites the panel's geometry.
+ * Switches the panel to the named stage or back to `'default'`. One button
+ * for minimize and restore, reporting state via `aria-pressed`. Exposes
+ * `data-stage` and `data-state` (`on`/`off`). Refuses to act while disabled.
  *
  * @example
  * ```tsx

package/dist/floating-panel/FloatingPanelStageTrigger.d.ts

@@ -1,15 +1,9 @@
 import * as React from 'react';
 import type { FloatingPanelStageTriggerProps } from './types.js';
 /**
- * Button that switches the panel to the `stage` it names — and back to
- * `'default'` when the panel is already there. That toggle is why minimize and
- * restore are one button rather than two: it reports the state it is in via
- * `aria-pressed`, so a screen reader announces "Minimize, pressed" rather than
- * two buttons swapping places under the user.
- *
- * Also exposes the panel's current stage as `data-stage` and its own active
- * state as `data-state` (`on`/`off`). Refuses to act while the panel is
- * `disabled`, since a stage change rewrites the panel's geometry.
+ * Switches the panel to the named stage or back to `'default'`. One button
+ * for minimize and restore, reporting state via `aria-pressed`. Exposes
+ * `data-stage` and `data-state` (`on`/`off`). Refuses to act while disabled.
  *
  * @example
  * ```tsx