@skdx/react 0.27.0 → 0.29.0

package/dist/file-upload/types.d.ts

@@ -1,145 +1,162 @@
 import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/**
- * Per-file upload status. The component performs no transport of its own, so
- * this is pushed onto {@link FileUploadItem} by whoever owns the upload.
- */
+/** Per-file upload status; pushed onto FileUploadItem by the transport owner. */
 export type FileUploadFileStatus = 'idle' | 'uploading' | 'complete' | 'error';
-/**
- * Why one file was refused. Built-in codes are `file-invalid-type` (fails
- * `accept`), `file-too-large` / `file-too-small` (fails `maxFileSize` /
- * `minFileSize`), and `too-many-files` (would exceed `maxFiles`); a
- * {@link FileUploadProps.validate} callback contributes its own codes
- * alongside them.
- */
+/** Why one file was refused: file-invalid-type, file-too-large, file-too-small, or custom codes. */
 export interface FileUploadRejection {
-    /** The file that was refused. It is never added to the file list. */
+    /** The file object that was refused. */
     file: File;
-    /** Every reason it was refused, built-in codes first. Never empty. */
+    /** Every reason this file was refused. */
     errors: string[];
 }
-/** @internal The checks {@link FileUploadProps.validate} and the size/type props feed. */
+/** Device camera: 'user' for front, 'environment' for rear. */
+export type FileUploadCapture = 'user' | 'environment';
+/** @internal Validation options. */
 export interface FileUploadValidateOptions {
-    accept?: string;
-    maxFileSize?: number;
-    minFileSize?: number;
-    validate?: (file: File) => string[] | null | undefined;
+    accept?: string | undefined;
+    maxFileSize?: number | undefined;
+    minFileSize?: number | undefined;
+    validator?: ((file: File) => string[] | null | undefined) | undefined;
 }
-/** Shape returned by the exported `useFileUploadContext` hook; distributed from {@link FileUpload} to its parts via context. */
+/** Context value distributed from FileUpload to its parts. */
 export interface FileUploadContextValue {
     inputRef: React.RefObject<HTMLInputElement | null>;
     files: File[];
     disabled: boolean;
-    accept?: string;
+    accept?: string | undefined;
     multiple: boolean;
     addFiles: (files: FileList | File[]) => void;
-    removeFile: (index: number) => void;
+    removeFile: (file: File) => void;
+    clearFiles: () => void;
     openPicker: () => void;
+    readOnly: boolean;
+    directory: boolean;
+    capture?: FileUploadCapture | undefined;
+    removeLabel: (fileName: string) => string;
+    labelId: string;
+    labelPresent: boolean;
+    /** @internal */
+    setLabelPresent: (present: boolean) => void;
+    descriptionId: string;
+    required: boolean;
+    invalid: boolean;
 }
-/** Props for the {@link FileUpload} root. */
-export interface FileUploadProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
-    /**
-     * The selected files, for controlled usage. Pair with `onValueChange`.
-     * @default undefined — uncontrolled, tracks its own file list internally.
-     */
-    value?: File[];
-    /**
-     * Initially selected files, for uncontrolled usage.
-     * @default []
-     */
-    defaultValue?: File[];
-    /**
-     * Fires with the new file list whenever files are added or removed, controlled or not.
-     * @default undefined — no-op if omitted.
-     */
-    onValueChange?: (files: File[]) => void;
-    /**
-     * Comma-separated file-type filter (extensions like `.png` or MIME
-     * patterns like `image/*`), applied to both the native picker dialog and
-     * drag-and-drop — the browser only filters the former on its own.
-     * @default undefined — every file type is accepted.
-     */
-    accept?: string;
-    /**
-     * Allow selecting/dropping more than one file. When `false`, a new
-     * selection replaces the existing file instead of appending.
-     * @default false
-     */
-    multiple?: boolean;
-    /**
-     * Disables the dropzone, trigger, and file input, and blocks adding or
-     * removing files.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Most files the list may hold; files past the cap are rejected with
-     * `too-many-files` rather than added. Ignored while `multiple` is `false`,
-     * which caps the list at one file anyway.
-     * @default undefined — unlimited.
-     */
-    maxFiles?: number;
-    /**
-     * Largest accepted file size in bytes; a bigger file is rejected with
-     * `file-too-large`.
-     * @default undefined — no upper bound.
-     */
-    maxFileSize?: number;
-    /**
-     * Smallest accepted file size in bytes; a smaller file is rejected with
-     * `file-too-small`.
-     * @default undefined — no lower bound.
-     */
-    minFileSize?: number;
-    /**
-     * Extra per-file check, run after the built-in ones. Return error codes to
-     * reject the file, or `null`/`undefined`/`[]` to accept it.
-     * @default undefined — only the built-in checks apply.
-     */
-    validate?: (file: File) => string[] | null | undefined;
+/** Root ref handle: HTMLDivElement with constraint-validation and addFiles. */
+export interface FileUploadHandle extends HTMLDivElement {
+    /** Whether current selection satisfies constraints, fires invalid if not. */
+    checkValidity(): boolean;
+    /** Like checkValidity, but shows browser's validation message. */
+    reportValidity(): boolean;
+    /** Set external error like setCustomValidity; works whether required or not. */
+    setCustomValidity(message: string): void;
     /**
-     * Fires once per refused file, before the accepted files are committed.
-     * Rejections are transient — nothing is stored, so render them yourself (or
-     * let a wrapping `Field` own the persistent field-level message).
-     * @default undefined — refused files are dropped silently.
+     * Feed files through the picker/drop pipeline: accept, size, maxFiles, validation.
+     * @example upload.current?.addFiles(event.clipboardData.files)
      */
-    onFileReject?: (rejection: FileUploadRejection) => void;
+    addFiles(files: FileList | File[]): void;
+}
+/** Root props; manually-composed parts or children override defaults. */
+export interface FileUploadProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
+    /** Custom anatomy parts; omitted uses showList/showPreview/renderFile. @default undefined */
+    children?: React.ReactNode | undefined;
+    /** Selected files for controlled usage; pair with onValueChange. @default undefined */
+    value?: File[] | undefined;
+    /** Initially selected files for uncontrolled usage. @default [] */
+    defaultValue?: File[] | undefined;
+    /** Fires when files are added or removed. @default undefined */
+    onValueChange?: ((files: File[]) => void) | undefined;
+    /** Comma-separated file-type filter for picker and drag-drop. @default undefined */
+    accept?: string | undefined;
+    /** Allow multiple files; false replaces instead of appending. @default false */
+    multiple?: boolean | undefined;
+    /** Disables dropzone, trigger, and file input. @default false */
+    disabled?: boolean | undefined;
+    /** Max files; excess rejected with too-many-files. @default undefined */
+    maxFiles?: number | undefined;
+    /** Largest file size in bytes; excess rejected. @default undefined */
+    maxFileSize?: number | undefined;
+    /** Smallest file size in bytes; smaller rejected. @default undefined */
+    minFileSize?: number | undefined;
+    /** Extra per-file validation; return error codes to reject. @default undefined */
+    validator?: ((file: File) => string[] | null | undefined) | undefined;
+    /** Fires once per refused file before commit. @default undefined */
+    onFileReject?: ((rejection: FileUploadRejection) => void) | undefined;
+    /** Formats delete button accessible names from file names. @default (fileName) => `Remove ${fileName}` */
+    removeLabel?: ((fileName: string) => string) | undefined;
+    /** Form field name for file input; omitted submits nothing. @default undefined */
+    name?: string | undefined;
+    /** Form id this upload submits into; needs name. @default undefined */
+    form?: string | undefined;
+    /** Marks field required; valueMissing while no files. @default false */
+    required?: boolean | undefined;
+    /** Custom message for valueMissing when required is empty. @default browser wording */
+    requiredMessage?: string | undefined;
+    /** Show selection but block changes; dropzone keeps tab stop. @default false */
+    readOnly?: boolean | undefined;
+    /** Mark invalid from outside; ORed with own required invalidity. @default false */
+    invalid?: boolean | undefined;
+    /** Let picker select whole directory via webkitdirectory. @default false */
+    directory?: boolean | undefined;
+    /** Open device camera instead of file browser; mobile only. @default undefined */
+    capture?: FileUploadCapture | undefined;
+    /** Prevents browser navigation on drop outside dropzone. @default true */
+    preventDocumentDrop?: boolean | undefined;
+    /** Whether to render the derived `FileUploadItemGroup` listing selected files. @default true */
+    showList?: boolean | undefined;
+    /** Show thumbnail before file name in each row. @default false */
+    showPreview?: boolean | undefined;
+    /** Per-file upload state keyed by File; returns status and progress. @default undefined */
+    fileStatus?: ((file: File) => {
+        status?: FileUploadFileStatus | undefined;
+        progress?: number | undefined;
+    } | undefined) | undefined;
+    /** Custom render for file row (replaces name/size/delete). @default undefined */
+    renderFile?: ((file: File) => React.ReactNode) | undefined;
 }
-/** Props for {@link FileUploadDropzone}, the drag-and-drop / click-to-browse target. */
+/** Label element that names the dropzone. */
+export interface FileUploadLabelProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Drag-and-drop / click-to-browse target. */
 export interface FileUploadDropzoneProps extends PrimitivePropsWithRef<'div'> {
+    /** Suppress click-to-open; drag-drop and keyboard work. @default false */
+    disableClick?: boolean | undefined;
 }
-/** Props for {@link FileUploadTrigger}, a button that opens the native file picker. */
+/** Button that opens the native file picker. */
 export interface FileUploadTriggerProps extends PrimitivePropsWithRef<'button'> {
 }
-/**
- * Props for {@link FileUploadInput}, the visually-hidden native `<input type="file">`.
- *
- * `onChange` is *not* omitted, unlike the component-owned `type`/`value`: the
- * input composes the consumer's handler with its own (consumer first), so both
- * run on a selection. Prefer the root's `onValueChange` for the committed file
- * list — this one sees the raw `change` event, before validation and rejection.
- */
+/** Visually-hidden native input; onChange not omitted, compose handlers. */
 export interface FileUploadInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue'> {
 }
-/** Props for {@link FileUploadItem}, a single selected file's row. */
+/** Context value Item publishes to its nested parts. */
+export interface FileUploadItemContextValue {
+    file: File;
+}
+/** Single selected file's row; file used by delete button. */
 export interface FileUploadItemProps extends PrimitivePropsWithRef<'div'> {
-    /** Index of this file in the `FileUpload`'s current file list. */
-    index: number;
-    /**
-     * This file's upload status, owned by whoever runs the transport — the
-     * component never sets it itself. Reflected as `data-status`.
-     * @default 'idle'
-     */
-    status?: FileUploadFileStatus;
-    /**
-     * This file's upload progress, 0-100, owned by whoever runs the transport.
-     * Reflected as `data-progress`.
-     * @default undefined — no progress reported, `data-progress` is omitted.
-     */
-    progress?: number;
+    /** File this row shows; delete button removes by identity. */
+    file: File;
+    /** Upload status, owned by transport; reflected as data-state. @default 'idle' */
+    status?: FileUploadFileStatus | undefined;
+    /** Upload progress 0-100, owned by transport; reflected as data-progress. @default undefined */
+    progress?: number | undefined;
 }
-/** Props for {@link FileUploadItemDelete}, a button that removes one selected file. */
+/** Button that removes one selected file. */
 export interface FileUploadItemDeleteProps extends PrimitivePropsWithRef<'button'> {
-    /** Index of the file to remove from the `FileUpload`'s current file list. */
-    index: number;
+    /** File to remove by identity; defaults to enclosing Item's file. @default the enclosing Item's file */
+    file?: File | undefined;
+}
+/** List wrapper the rows sit in. */
+export interface FileUploadItemGroupProps extends PrimitivePropsWithRef<'div'> {
+}
+/** File name as readable text. */
+export interface FileUploadItemNameProps extends PrimitivePropsWithRef<'span'> {
+}
+/** File size as readable text. */
+export interface FileUploadItemSizeTextProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Slot for thumbnail or file-type icon. */
+export interface FileUploadItemPreviewProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Button that empties the whole list. */
+export interface FileUploadClearProps extends PrimitivePropsWithRef<'button'> {
 }

package/dist/floating-panel/FloatingPanel.cjs

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

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

@@ -1,35 +1,21 @@
 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: {
-    (props: FloatingPanelContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useFloatingPanelContext: (consumerName: string) => FloatingPanelContextValue;
+export declare const FloatingPanelProvider: React.FC<FloatingPanelContextValue & {
+    children: React.ReactNode;
+}>, 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.
- *
- * 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
- * usable while it is open. Focus still returns to the trigger on close, but
- * only when it would otherwise be stranded.
- *
- * Every open/position/size/stage prop works controlled or uncontrolled.
+ * FloatingPanel's state/context primitive: owns open state, position, size
+ * and stage, and renders `children` verbatim with no DOM element of its own.
  *
  * @example
  * ```tsx
- * <FloatingPanel defaultPosition={{ x: 40, y: 40 }}>
+ * <FloatingPanelRoot defaultPosition={{ x: 40, y: 40 }}>
  *   <FloatingPanelTrigger>Open panel</FloatingPanelTrigger>
  *   <FloatingPanelPortal>
  *     <FloatingPanelContent>
@@ -42,10 +28,30 @@ 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 — deriving its header, stage buttons, close button and resize grip.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanel
+ *   title="Layers"
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   stages={[{ stage: 'minimized', label: 'Minimize' }]}
+ * >
+ *   <LayerList />
  * </FloatingPanel>
  * ```
  */
-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,35 +1,21 @@
 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: {
-    (props: FloatingPanelContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useFloatingPanelContext: (consumerName: string) => FloatingPanelContextValue;
+export declare const FloatingPanelProvider: React.FC<FloatingPanelContextValue & {
+    children: React.ReactNode;
+}>, 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.
- *
- * 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
- * usable while it is open. Focus still returns to the trigger on close, but
- * only when it would otherwise be stranded.
- *
- * Every open/position/size/stage prop works controlled or uncontrolled.
+ * FloatingPanel's state/context primitive: owns open state, position, size
+ * and stage, and renders `children` verbatim with no DOM element of its own.
  *
  * @example
  * ```tsx
- * <FloatingPanel defaultPosition={{ x: 40, y: 40 }}>
+ * <FloatingPanelRoot defaultPosition={{ x: 40, y: 40 }}>
  *   <FloatingPanelTrigger>Open panel</FloatingPanelTrigger>
  *   <FloatingPanelPortal>
  *     <FloatingPanelContent>
@@ -42,10 +28,30 @@ 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 — deriving its header, stage buttons, close button and resize grip.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanel
+ *   title="Layers"
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   stages={[{ stage: 'minimized', label: 'Minimize' }]}
+ * >
+ *   <LayerList />
  * </FloatingPanel>
  * ```
  */
-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,2 @@
-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};
+'use client';
+import*as u from"react";import{clamp as X}from"../utils/clamp.js";import{createSafeContext as ut}from"../utils/createContext.js";import{announce as ft}from"../utils/liveAnnouncer.js";import{useCallbackRef as le}from"../utils/useCallbackRef.js";import{useControllableState as Y}from"../utils/useControllableState.js";import{useOpenChangeComplete as pt}from"../utils/useOpenChangeComplete.js";import{Glyph as ct}from"../utils/Glyph.js";import{skdxPart as Ie}from"../utils/part.js";import{composeEventHandlers as Se,Primitive as Me}from"../utils/primitive.js";import{jsx as Ne}from"react/jsx-runtime";var q=({ref:e,...o})=>{let n=h("FloatingPanelCloseTrigger");return Ne(Me.button,{type:"button",...o,...Ie("floating-panel","close-trigger",o.className),ref:e,onClick:Se(o.onClick,()=>n.onOpenChange(!1))})};q.displayName="FloatingPanelCloseTrigger";import*as Q from"react";import{useComposedRefs as Ae}from"../utils/composeRefs.js";import{skdxPart as He}from"../utils/part.js";import{usePresence as Oe}from"../utils/presence.js";import{Primitive as ke}from"../utils/primitive.js";import{useDismiss as Le}from"../utils/useDismiss.js";import{jsx as Ue}from"react/jsx-runtime";var j=({forceMount:e,onEscapeKeyDown:o,onPointerDownOutside:n,onFocusOutside:t,onInteractOutside:i,style:c,ref:l,...y})=>{let r=h("FloatingPanelContent"),C=Ae(l,r.contentRef),{setContentPresent:R}=r,x=Oe(r.open,r.contentRef);if(Q.useEffect(()=>{R(x)},[x,R]),Q.useEffect(()=>()=>R(!1),[R]),Le({enabled:r.open,onEscapeKeyDown:p=>{o?.(p),p.defaultPrevented||r.onOpenChange(!1)},onInteractOutside:i,onPointerDownOutside:p=>{n?.(p),p.defaultPrevented||r.onOpenChange(!1)},onFocusOutside:t},[r.contentRef,r.triggerRef]),!e&&!x)return null;let{position:w,size:a,stage:d}=r,f=d==="maximized"?{x:"0px",y:"0px",width:"100%",height:"100%"}:{x:`${w.x}px`,y:`${w.y}px`,width:`${a.width}px`,height:d==="minimized"?"auto":`${a.height}px`};return Ue(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":d,"data-dragging":r.dragging?"":void 0,"data-resizing":r.resizing?"":void 0,"data-disabled":r.disabled?"":void 0,...y,...He("floating-panel","content",y.className),ref:C,style:{"--skdx-floating-panel-x":f.x,"--skdx-floating-panel-y":f.y,"--skdx-floating-panel-width":f.width,"--skdx-floating-panel-height":f.height,...c}})};j.displayName="FloatingPanelContent";import*as ee from"react";import{directionalKey as Ke,useDirection as Be}from"../utils/direction.js";import{skdxPart as Xe}from"../utils/part.js";import{Primitive as _e,useComposedEventHandlers as N}from"../utils/primitive.js";import{jsx as $e}from"react/jsx-runtime";var Ge=10,Ye={ArrowLeft:{dx:-1,dy:0},ArrowRight:{dx:1,dy:0},ArrowUp:{dx:0,dy:-1},ArrowDown:{dx:0,dy:1}},te=({style:e,ref:o,...n})=>{let t=h("FloatingPanelHeader"),i=Be(),c=ee.useRef(null),l=ee.useRef(!1),y=t.draggable&&!t.disabled,r=a=>{y&&(a.currentTarget.setPointerCapture?.(a.pointerId),c.current={x:a.clientX,y:a.clientY},t.setDragging(!0))},C=a=>{let d=c.current;!y||!d||(t.moveBy(a.clientX-d.x,a.clientY-d.y),c.current={x:a.clientX,y:a.clientY})},R=a=>{c.current&&(a.currentTarget.releasePointerCapture?.(a.pointerId),c.current=null,t.setDragging(!1),t.announceRelease("move"))},x=a=>{if(!y)return;let d=t.step*(a.shiftKey?Ge:1),f=Ke(a.key,a.currentTarget,i),p=Ye[f];p&&(a.preventDefault(),l.current=!0,t.moveBy(p.dx*d,p.dy*d))},w=()=>{l.current&&(l.current=!1,t.announceRelease("move"))};return $e(_e.div,{role:"group","aria-disabled":t.disabled||void 0,"aria-keyshortcuts":t.draggable?"ArrowUp ArrowDown ArrowLeft ArrowRight":void 0,"data-dragging":t.dragging?"":void 0,"data-disabled":t.disabled?"":void 0,tabIndex:t.draggable?0:void 0,...n,...Xe("floating-panel","header",n.className),ref:o,onPointerDown:N(n.onPointerDown,r),onPointerMove:N(n.onPointerMove,C),onPointerUp:N(n.onPointerUp,R),onPointerCancel:N(n.onPointerCancel,R),onKeyDown:N(n.onKeyDown,x),onKeyUp:N(n.onKeyUp,w),style:{touchAction:"none",cursor:y?"move":void 0,...e}})};te.displayName="FloatingPanelHeader";import{Portal as Je}from"../utils/portal.js";import{jsx as Ve}from"react/jsx-runtime";var ne=({forceMount:e,children:o,...n})=>{let t=h("FloatingPanelPortal");return e||t.open||t.contentPresent?Ve(Je,{...n,children:o}):null};ne.displayName="FloatingPanelPortal";import*as oe from"react";import{directionalKey as We,useDirection as Ze}from"../utils/direction.js";import{skdxPart as qe}from"../utils/part.js";import{Primitive as Qe,useComposedEventHandlers as A}from"../utils/primitive.js";import{jsx as ot}from"react/jsx-runtime";var je=10,et={ArrowLeft:{dx:-1,dy:0},ArrowRight:{dx:1,dy:0},ArrowUp:{dx:0,dy:-1},ArrowDown:{dx:0,dy:1}};function tt(e){if(e==="e"||e==="w")return"vertical";if(e==="n"||e==="s")return"horizontal"}function nt(e,o){let n=o?e.size.width:e.size.height,t=o?e.minSize.width:e.minSize.height,i=o?e.maxSize.width:e.maxSize.height,c=Number.POSITIVE_INFINITY;e.bounds&&(c=o?e.bounds.width-e.position.x:e.bounds.height-e.position.y);let l=Math.max(t,Math.min(i,c));return{current:n,minimum:t,maximum:l}}var ae=({direction:e,style:o,ref:n,...t})=>{let i=h("FloatingPanelResizeTrigger"),c=Ze(),l=oe.useRef(null),y=oe.useRef(!1),r=i.resizable&&!i.disabled,C=e.includes("e")||e.includes("w"),{current:R,minimum:x,maximum:w}=nt(i,C),a=tt(e),d=s=>{r&&(s.currentTarget.setPointerCapture?.(s.pointerId),l.current={x:s.clientX,y:s.clientY},i.setResizing(!0))},f=s=>{let T=l.current;!r||!T||(i.resizeBy(e,s.clientX-T.x,s.clientY-T.y),l.current={x:s.clientX,y:s.clientY})},p=s=>{l.current&&(s.currentTarget.releasePointerCapture?.(s.pointerId),l.current=null,i.setResizing(!1),i.announceRelease("resize"))},H=s=>{if(!r)return;let T=i.step*(s.shiftKey?je:1),k=We(s.key,s.currentTarget,c),z=et[k];z&&(s.preventDefault(),y.current=!0,i.resizeBy(e,z.dx*T,z.dy*T))},O=()=>{y.current&&(y.current=!1,i.announceRelease("resize"))};return ot(Qe.div,{role:"separator","aria-orientation":a,"aria-valuenow":Math.round(R),"aria-valuemin":Math.round(x),"aria-valuemax":Number.isFinite(w)?Math.round(w):void 0,"aria-disabled":i.disabled||void 0,"aria-keyshortcuts":i.resizable?"ArrowUp ArrowDown ArrowLeft ArrowRight":void 0,"data-direction":e,"data-resizing":i.resizing?"":void 0,"data-disabled":i.disabled?"":void 0,tabIndex:i.resizable?0:void 0,...t,...qe("floating-panel","resize-trigger",t.className),ref:n,onPointerDown:A(t.onPointerDown,d),onPointerMove:A(t.onPointerMove,f),onPointerUp:A(t.onPointerUp,p),onPointerCancel:A(t.onPointerCancel,p),onKeyDown:A(t.onKeyDown,H),onKeyUp:A(t.onKeyUp,O),style:{touchAction:"none",cursor:r?`${e}-resize`:void 0,...o}})};ae.displayName="FloatingPanelResizeTrigger";import{skdxPart as at}from"../utils/part.js";import{composeEventHandlers as it,Primitive as rt}from"../utils/primitive.js";import{jsx as lt}from"react/jsx-runtime";var ie=({stage:e,ref:o,...n})=>{let t=h("FloatingPanelStageTrigger"),i=t.stage===e;return lt(rt.button,{type:"button","aria-pressed":i,"aria-disabled":t.disabled||void 0,"data-stage":t.stage,"data-state":i?"on":"off","data-disabled":t.disabled?"":void 0,...n,...at("floating-panel","stage-trigger",n.className),ref:o,onClick:it(n.onClick,()=>{t.disabled||t.onStageChange(i?"default":e)})})};ie.displayName="FloatingPanelStageTrigger";import*as ce from"react";import{skdxPart as st}from"../utils/part.js";import{Primitive as gt}from"../utils/primitive.js";import{jsx as dt}from"react/jsx-runtime";var re=({ref:e,...o})=>{let n=h("FloatingPanelTitle"),{setHasTitle:t}=n;return ce.useEffect(()=>(t(!0),()=>t(!1)),[t]),dt(gt.h2,{id:n.titleId,...o,...st("floating-panel","title",o.className),ref:e})};re.displayName="FloatingPanelTitle";import{jsx as D,jsxs as me}from"react/jsx-runtime";var mt=()=>D(ct,{name:"close"}),ue=({title:e,stages:o=[],dismissible:n,resizable:t,children:i,passThrough:c})=>D(ne,{children:me(j,{...c,children:[me(te,{"aria-label":"Drag to move panel",children:[e?D(re,{children:e}):null,o.map(l=>D(ie,{stage:l.stage,children:l.label},l.stage)),n?D(q,{"aria-label":"Close",children:D(mt,{})}):null]}),i,t?D(ae,{direction:"se","aria-label":"Resize panel"}):null]})});import{jsx as ge}from"react/jsx-runtime";function fe(e,{position:o,size:n}){return e==="move"?`Panel moved to ${o.x}, ${o.y}`:`Panel resized to ${n.width} by ${n.height}`}var[Pt,h]=ut("FloatingPanel"),ht={x:0,y:0},yt={width:320,height:240},Rt={width:160,height:120},Ft={width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY};function se(e){let o=e?.current;if(o){let n=o.getBoundingClientRect();return{width:n.width,height:n.height}}return{width:window.innerWidth,height:window.innerHeight}}function $(e,o,n,t){return X(e,o,Math.max(o,Math.min(n,t)))}function pe({children:e,open:o,defaultOpen:n=!1,onOpenChange:t,onOpenChangeComplete:i,position:c,defaultPosition:l=ht,onPositionChange:y,onPositionCommit:r,size:C,defaultSize:R=yt,onSizeChange:x,onSizeCommit:w,minSize:a=Rt,maxSize:d=Ft,boundary:f,stage:p,defaultStage:H="default",onStageChange:O,draggable:s=!0,resizable:T=!0,step:k=10,disabled:z=!1,getGestureAnnouncement:J}){let _=u.useRef(null),L=u.useRef(null),[V,W]=u.useState(!1),[he,ye]=u.useState(!1),[Re,Fe]=u.useState(!1),[be,xe]=u.useState(!1),[E,we]=u.useState(null),[I=!1,Te]=Y({prop:o,defaultProp:n,onChange:t}),[P=l,G]=Y({prop:c,defaultProp:l,onChange:y}),[m=R,Z]=Y({prop:C,defaultProp:R,onChange:x}),[Ce="default",ze]=Y({prop:p,defaultProp:H,onChange:O});pt(I,L,i),u.useEffect(()=>{let g=()=>we(se(f));g();let b=f?.current;if(b&&typeof ResizeObserver<"u"){let F=new ResizeObserver(g);return F.observe(b),()=>F.disconnect()}return window.addEventListener("resize",g),()=>window.removeEventListener("resize",g)},[f]),u.useEffect(()=>{if(!E)return;let g=Math.min(m.width,Math.max(a.width,E.width)),b=Math.min(m.height,Math.max(a.height,E.height));(g!==m.width||b!==m.height)&&Z({width:g,height:b});let F=X(P.x,0,Math.max(0,E.width-g)),v=X(P.y,0,Math.max(0,E.height-b));(F!==P.x||v!==P.y)&&G({x:F,y:v})},[E,m,a,P,Z,G]);let de=u.useRef(I);u.useEffect(()=>{if(de.current&&!I){let g=document.activeElement;(!g||g===document.body||L.current?.contains(g))&&_.current?.focus()}de.current=I},[I]);let ve=le((g,b)=>{if(z||!s)return;let F=se(f),v={x:X(P.x+g,0,Math.max(0,F.width-m.width)),y:X(P.y+b,0,Math.max(0,F.height-m.height))};(v.x!==P.x||v.y!==P.y)&&G(v)}),Ee=le((g,b,F)=>{if(z||!T)return;let v=se(f),{x:U,y:K}=P,{width:S,height:M}=m;if(g.includes("e")&&(S=$(m.width+b,a.width,d.width,v.width-U)),g.includes("w")){let B=U+S;S=$(m.width-b,a.width,d.width,B),U=B-S}if(g.includes("s")&&(M=$(m.height+F,a.height,d.height,v.height-K)),g.includes("n")){let B=K+M;M=$(m.height-F,a.height,d.height,B),K=B-M}(S!==m.width||M!==m.height)&&Z({width:S,height:M}),(U!==P.x||K!==P.y)&&G({x:U,y:K})}),De=le(g=>{g==="resize"&&w?.(m),r?.(P);let b={position:{x:Math.round(P.x),y:Math.round(P.y)},size:{width:Math.round(m.width),height:Math.round(m.height)}},F=(J??fe)(g,b);F&&ft(F)});return ge(Pt,{triggerRef:_,contentRef:L,contentId:u.useId(),titleId:u.useId(),hasTitle:be,setHasTitle:xe,open:I,onOpenChange:Te,position:P,size:m,minSize:a,maxSize:d,bounds:E,stage:Ce,onStageChange:ze,moveBy:ve,resizeBy:Ee,announceRelease:De,draggable:s,resizable:T,disabled:z,step:k,dragging:V,setDragging:W,resizing:he,setResizing:ye,contentPresent:Re,setContentPresent:Fe,children:e})}pe.displayName="FloatingPanelRoot";function Pe({children:e,title:o,stages:n,dismissible:t=!0,resizable:i=!0,open:c,defaultOpen:l,onOpenChange:y,onOpenChangeComplete:r,position:C,defaultPosition:R,onPositionChange:x,onPositionCommit:w,size:a,defaultSize:d,onSizeChange:f,onSizeCommit:p,minSize:H,maxSize:O,boundary:s,stage:T,defaultStage:k,onStageChange:z,draggable:J,step:_,disabled:L,getGestureAnnouncement:V,...W}){return ge(pe,{open:c,defaultOpen:l,onOpenChange:y,onOpenChangeComplete:r,position:C,defaultPosition:R,onPositionChange:x,onPositionCommit:w,size:a,defaultSize:d,onSizeChange:f,onSizeCommit:p,minSize:H,maxSize:O,boundary:s,stage:T,defaultStage:k,onStageChange:z,draggable:J,resizable:i,step:_,disabled:L,getGestureAnnouncement:V,children:ge(ue,{title:o,stages:n,dismissible:t,resizable:i,passThrough:W,children:e})})}Pe.displayName="FloatingPanel";import{useComposedRefs as bt}from"../utils/composeRefs.js";import{skdxPart as xt}from"../utils/part.js";import{composeEventHandlers as wt,Primitive as Tt}from"../utils/primitive.js";import{jsx as zt}from"react/jsx-runtime";var Ct=({ref:e,...o})=>{let n=h("FloatingPanelTrigger"),t=bt(e,n.triggerRef);return zt(Tt.button,{type:"button","aria-haspopup":"dialog","aria-expanded":n.open,"aria-controls":n.contentId,"data-state":n.open?"open":"closed",...o,...xt("floating-panel","trigger",o.className),ref:t,onClick:wt(o.onClick,()=>n.onOpenChange(!n.open))})};Ct.displayName="FloatingPanelTrigger";export{Pe as FloatingPanel,q as FloatingPanelCloseTrigger,j as FloatingPanelContent,te as FloatingPanelHeader,ne as FloatingPanelPortal,Pt as FloatingPanelProvider,ae as FloatingPanelResizeTrigger,pe as FloatingPanelRoot,ie as FloatingPanelStageTrigger,re as FloatingPanelTitle,Ct as FloatingPanelTrigger,fe as gestureAnnouncement,h 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 | undefined;
+    stages?: FloatingPanelProps["stages"] | undefined;
+    dismissible: boolean;
+    resizable: boolean;
+    children?: React.ReactNode | undefined;
+    passThrough?: PassThroughProps | undefined;
+}) => 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 | undefined;
+    stages?: FloatingPanelProps["stages"] | undefined;
+    dismissible: boolean;
+    resizable: boolean;
+    children?: React.ReactNode | undefined;
+    passThrough?: PassThroughProps | undefined;
+}) => React.JSX.Element;

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

@@ -1,10 +1,7 @@
-import * as React from 'react';
+import type * 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
@@ -14,4 +11,7 @@ import type { FloatingPanelCloseTriggerProps } from './types.cjs';
  * </FloatingPanelHeader>
  * ```
  */
-export declare const FloatingPanelCloseTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelCloseTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const FloatingPanelCloseTrigger: {
+    ({ ref: forwardedRef, ...props }: FloatingPanelCloseTriggerProps): React.ReactNode;
+    displayName: string;
+};