@accelint/design-toolkit 9.12.0 → 10.0.0

package/dist/components/floating-card/index.js

@@ -11,15 +11,12 @@
  */
 
 
-import { useFloatingCard } from "./context.js";
+import { DEFAULT_DIMENSIONS, DEFAULT_POSITION } from "./constants.js";
+import { useFloatingCard, useFloatingCardRegistry } from "./context.js";
 import { useEffect } from "react";
 import { createPortal } from "react-dom";
 
 //#region src/components/floating-card/index.tsx
-const defaultDimensions = {
-	width: 300,
-	height: 400
-};
 /**
 * Renders its children into a floating card using React portals.
 *
@@ -37,6 +34,10 @@ const defaultDimensions = {
 * @remarks
 * - Requires `FloatingCardProvider` as an ancestor.
 * - The floating card is only rendered if a valid DOM reference exists for the given `id`.
+* - `initialDimensions` and `initialPosition` are applied each time the card
+*   opens. While it stays open, later changes to them are ignored so a user's
+*   own drag or resize is never overridden; closing and reopening starts the
+*   card from those values again.
 *
 * @example
 * ```tsx
@@ -62,29 +63,22 @@ const defaultDimensions = {
 * ```
 */
 function FloatingCard({ id, children, title, isOpen = true, initialDimensions, initialPosition }) {
-	const { cards, api: floatingCardApi } = useFloatingCard();
-	const { width, height } = initialDimensions ?? defaultDimensions;
-	const { x, y } = initialPosition ?? {};
+	const { cards, closeCard } = useFloatingCard();
+	const { openCard } = useFloatingCardRegistry();
+	const { width, height } = initialDimensions ?? DEFAULT_DIMENSIONS;
+	const { x, y } = initialPosition ?? DEFAULT_POSITION;
 	useEffect(() => {
-		if (!floatingCardApi) return;
 		if (!isOpen) {
-			floatingCardApi.getPanel(id)?.api.close();
+			closeCard(id);
 			return;
 		}
-		if (!floatingCardApi.getPanel(id)) {
-			const panel = floatingCardApi.addPanel({
-				id,
-				title,
-				component: "default",
-				floating: {
-					width,
-					height,
-					x,
-					y
-				}
-			});
-			panel.group.locked = "no-drop-target";
-		}
+		openCard(id, title, {
+			x,
+			y
+		}, {
+			width,
+			height
+		});
 	}, [
 		id,
 		title,
@@ -93,16 +87,14 @@ function FloatingCard({ id, children, title, isOpen = true, initialDimensions, i
 		height,
 		x,
 		y,
-		floatingCardApi
+		openCard,
+		closeCard
 	]);
 	useEffect(() => {
-		const panel = floatingCardApi?.getPanel(id);
-		if (panel) panel.setTitle(title ?? id);
-	}, [
-		title,
-		floatingCardApi,
-		id
-	]);
+		return () => {
+			closeCard(id);
+		};
+	}, [id, closeCard]);
 	return isOpen && cards[id] ? createPortal(children, cards[id]) : null;
 }
 

package/dist/components/floating-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/floating-card/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { type PropsWithChildren, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useFloatingCard } from './context';\nimport type { FloatingCardProps } from './types';\n\nconst defaultDimensions = { width: 300, height: 400 } as const;\n\n/**\n * Renders its children into a floating card using React portals.\n *\n * The `FloatingCard` component registers itself with the floating card engine on mount\n * and renders its children into the corresponding DOM node via a portal.\n *\n * @param id - Unique identifier for the floating card.\n * @param title - Optional title displayed in the floating card header.\n * @param isOpen - Whether the floating card is rendered. Defaults to `true`.\n * @param initialDimensions - Initial width and height of the floating card. Defaults to `{ width: 300, height: 400 }`.\n * @param initialPosition - Initial x and y coordinates of the floating card.\n * @param children - React children to render inside the floating card.\n * @returns The floating card component (portaled content) or null.\n *\n * @remarks\n * - Requires `FloatingCardProvider` as an ancestor.\n * - The floating card is only rendered if a valid DOM reference exists for the given `id`.\n *\n * @example\n * ```tsx\n * import { uuid } from '@accelint/core/utility/uuid';\n *\n * const cardId = uuid();\n * const [isOpen, setIsOpen] = useState(true);\n *\n * <FloatingCardProvider>\n *   <FloatingCard\n *     id={cardId}\n *     title=\"Settings Panel\"\n *     isOpen={isOpen}\n *     initialDimensions={{ width: 400, height: 500 }}\n *   >\n *     <SettingsForm />\n *   </FloatingCard>\n *\n *   <button onClick={() => setIsOpen(!isOpen)}>\n *     Toggle Panel\n *   </button>\n * </FloatingCardProvider>\n * ```\n */\nexport function FloatingCard({\n  id,\n  children,\n  title,\n  isOpen = true,\n  initialDimensions,\n  initialPosition,\n}: PropsWithChildren<FloatingCardProps>) {\n  const { cards, api: floatingCardApi } = useFloatingCard();\n\n  const { width, height } = initialDimensions ?? defaultDimensions;\n  const { x, y } = initialPosition ?? {};\n\n  // Register card with Dockview API when isOpen changes.\n  // Early return if API not ready (Dockview not fully initialized).\n  useEffect(() => {\n    if (!floatingCardApi) {\n      return;\n    }\n    if (!isOpen) {\n      floatingCardApi.getPanel(id)?.api.close();\n      return;\n    }\n\n    if (!floatingCardApi.getPanel(id)) {\n      const panel = floatingCardApi.addPanel({\n        id,\n        title,\n        component: 'default',\n        floating: { width, height, x, y },\n      });\n\n      panel.group.locked = 'no-drop-target';\n    }\n\n    // Cleanup not included here. Cleanup is done at the provider level when the card is removed from the `cards` registry.\n  }, [id, title, isOpen, width, height, x, y, floatingCardApi]);\n\n  useEffect(() => {\n    const panel = floatingCardApi?.getPanel(id);\n    if (panel) {\n      panel.setTitle(title ?? id);\n    }\n  }, [title, floatingCardApi, id]);\n\n  return isOpen && cards[id] ? createPortal(children, cards[id]) : null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,MAAM,oBAAoB;CAAE,OAAO;CAAK,QAAQ;CAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CrD,SAAgB,aAAa,EAC3B,IACA,UACA,OACA,SAAS,MACT,mBACA,mBACuC;CACvC,MAAM,EAAE,OAAO,KAAK,oBAAoB,iBAAiB;CAEzD,MAAM,EAAE,OAAO,WAAW,qBAAqB;CAC/C,MAAM,EAAE,GAAG,MAAM,mBAAmB,EAAE;AAItC,iBAAgB;AACd,MAAI,CAAC,gBACH;AAEF,MAAI,CAAC,QAAQ;AACX,mBAAgB,SAAS,GAAG,EAAE,IAAI,OAAO;AACzC;;AAGF,MAAI,CAAC,gBAAgB,SAAS,GAAG,EAAE;GACjC,MAAM,QAAQ,gBAAgB,SAAS;IACrC;IACA;IACA,WAAW;IACX,UAAU;KAAE;KAAO;KAAQ;KAAG;KAAG;IAClC,CAAC;AAEF,SAAM,MAAM,SAAS;;IAItB;EAAC;EAAI;EAAO;EAAQ;EAAO;EAAQ;EAAG;EAAG;EAAgB,CAAC;AAE7D,iBAAgB;EACd,MAAM,QAAQ,iBAAiB,SAAS,GAAG;AAC3C,MAAI,MACF,OAAM,SAAS,SAAS,GAAG;IAE5B;EAAC;EAAO;EAAiB;EAAG,CAAC;AAEhC,QAAO,UAAU,MAAM,MAAM,aAAa,UAAU,MAAM,IAAI,GAAG"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/floating-card/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { type PropsWithChildren, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { DEFAULT_DIMENSIONS, DEFAULT_POSITION } from './constants';\nimport { useFloatingCard, useFloatingCardRegistry } from './context';\nimport type { FloatingCardProps } from './types';\n\n/**\n * Renders its children into a floating card using React portals.\n *\n * The `FloatingCard` component registers itself with the floating card engine on mount\n * and renders its children into the corresponding DOM node via a portal.\n *\n * @param id - Unique identifier for the floating card.\n * @param title - Optional title displayed in the floating card header.\n * @param isOpen - Whether the floating card is rendered. Defaults to `true`.\n * @param initialDimensions - Initial width and height of the floating card. Defaults to `{ width: 300, height: 400 }`.\n * @param initialPosition - Initial x and y coordinates of the floating card.\n * @param children - React children to render inside the floating card.\n * @returns The floating card component (portaled content) or null.\n *\n * @remarks\n * - Requires `FloatingCardProvider` as an ancestor.\n * - The floating card is only rendered if a valid DOM reference exists for the given `id`.\n * - `initialDimensions` and `initialPosition` are applied each time the card\n *   opens. While it stays open, later changes to them are ignored so a user's\n *   own drag or resize is never overridden; closing and reopening starts the\n *   card from those values again.\n *\n * @example\n * ```tsx\n * import { uuid } from '@accelint/core/utility/uuid';\n *\n * const cardId = uuid();\n * const [isOpen, setIsOpen] = useState(true);\n *\n * <FloatingCardProvider>\n *   <FloatingCard\n *     id={cardId}\n *     title=\"Settings Panel\"\n *     isOpen={isOpen}\n *     initialDimensions={{ width: 400, height: 500 }}\n *   >\n *     <SettingsForm />\n *   </FloatingCard>\n *\n *   <button onClick={() => setIsOpen(!isOpen)}>\n *     Toggle Panel\n *   </button>\n * </FloatingCardProvider>\n * ```\n */\nexport function FloatingCard({\n  id,\n  children,\n  title,\n  isOpen = true,\n  initialDimensions,\n  initialPosition,\n}: PropsWithChildren<FloatingCardProps>) {\n  const { cards, closeCard } = useFloatingCard();\n  const { openCard } = useFloatingCardRegistry();\n\n  const { width, height } = initialDimensions ?? DEFAULT_DIMENSIONS;\n  const { x, y } = initialPosition ?? DEFAULT_POSITION;\n\n  useEffect(() => {\n    if (!isOpen) {\n      closeCard(id);\n\n      return;\n    }\n\n    openCard(id, title, { x, y }, { width, height });\n  }, [id, title, isOpen, width, height, x, y, openCard, closeCard]);\n\n  // Unregister on unmount so a card removed from the tree leaves no panel behind.\n  useEffect(() => {\n    return () => {\n      closeCard(id);\n    };\n  }, [id, closeCard]);\n\n  return isOpen && cards[id] ? createPortal(children, cards[id]) : null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,SAAgB,aAAa,EAC3B,IACA,UACA,OACA,SAAS,MACT,mBACA,mBACuC;CACvC,MAAM,EAAE,OAAO,cAAc,iBAAiB;CAC9C,MAAM,EAAE,aAAa,yBAAyB;CAE9C,MAAM,EAAE,OAAO,WAAW,qBAAqB;CAC/C,MAAM,EAAE,GAAG,MAAM,mBAAmB;AAEpC,iBAAgB;AACd,MAAI,CAAC,QAAQ;AACX,aAAU,GAAG;AAEb;;AAGF,WAAS,IAAI,OAAO;GAAE;GAAG;GAAG,EAAE;GAAE;GAAO;GAAQ,CAAC;IAC/C;EAAC;EAAI;EAAO;EAAQ;EAAO;EAAQ;EAAG;EAAG;EAAU;EAAU,CAAC;AAGjE,iBAAgB;AACd,eAAa;AACX,aAAU,GAAG;;IAEd,CAAC,IAAI,UAAU,CAAC;AAEnB,QAAO,UAAU,MAAM,MAAM,aAAa,UAAU,MAAM,IAAI,GAAG"}

package/dist/components/floating-card/panel.d.ts

@@ -0,0 +1,69 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { Bounds, Dimensions, FloatingCardLayout, Position } from "./types.js";
+import { ReactNode, RefCallback } from "react";
+import * as react_jsx_runtime98 from "react/jsx-runtime";
+import { UniqueId } from "@accelint/core/utility/uuid";
+
+//#region src/components/floating-card/panel.d.ts
+type FloatingCardPanelProps = {
+  /** Identifier of the card this panel renders. */
+  id: UniqueId;
+  /** Current geometry and stacking order. */
+  layout: FloatingCardLayout;
+  /** Whether the card is pinned, which freezes drag and resize. */
+  isPinned: boolean;
+  /** Header content rendered before the title. */
+  header: ReactNode;
+  /** Header content rendered after the title, typically actions. */
+  actions: ReactNode;
+  /** Reads the provider's box so gestures can be constrained to it. */
+  getBounds: () => Bounds;
+  /** Registers the portal target that card children render into. */
+  contentRef: RefCallback<HTMLDivElement>;
+  /** Raises this card above its siblings. */
+  onFocus: () => void;
+  /** Commits a new position during a drag. */
+  onMove: (position: Position) => void;
+  /** Commits new geometry during a resize. */
+  onResize: (dimensions: Dimensions, position: Position) => void;
+  /** Accessible name for the card, taken from its title. */
+  label: string;
+};
+/**
+ * Renders one floating card: its chrome, its drag surface, and the portal
+ * target its children mount into.
+ *
+ * @param props - {@link FloatingCardPanelProps}
+ * @returns The positioned card element.
+ *
+ * @remarks
+ * Presentational only -- all geometry is owned by the provider and passed in,
+ * so this component stays a pure function of its props.
+ */
+declare function FloatingCardPanel({
+  id,
+  layout,
+  isPinned,
+  header,
+  actions,
+  getBounds,
+  contentRef,
+  onFocus,
+  onMove,
+  onResize,
+  label
+}: FloatingCardPanelProps): react_jsx_runtime98.JSX.Element;
+//#endregion
+export { FloatingCardPanel, FloatingCardPanelProps };
+//# sourceMappingURL=panel.d.ts.map

package/dist/components/floating-card/panel.js

@@ -0,0 +1,111 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+import { useDrag } from "./hooks/use-drag.js";
+import { useResize } from "./hooks/use-resize.js";
+import { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./styles.module.css";
+
+//#region src/components/floating-card/panel.tsx
+/** Handles rendered around the card, paired with the cursor each one shows. */
+const RESIZE_HANDLES = [
+	"n",
+	"s",
+	"e",
+	"w",
+	"ne",
+	"nw",
+	"se",
+	"sw"
+];
+/**
+* Renders one floating card: its chrome, its drag surface, and the portal
+* target its children mount into.
+*
+* @param props - {@link FloatingCardPanelProps}
+* @returns The positioned card element.
+*
+* @remarks
+* Presentational only -- all geometry is owned by the provider and passed in,
+* so this component stays a pure function of its props.
+*/
+function FloatingCardPanel({ id, layout, isPinned, header, actions, getBounds, contentRef, onFocus, onMove, onResize, label }) {
+	const { position, dimensions, zIndex } = layout;
+	const { handleStart } = useDrag({
+		disabled: isPinned,
+		position,
+		dimensions,
+		getBounds,
+		onPositionChange: onMove,
+		onDragStart: onFocus
+	});
+	const { getHandleProps } = useResize({
+		disabled: isPinned,
+		position,
+		dimensions,
+		getBounds,
+		onResize,
+		onResizeStart: onFocus
+	});
+	const handleHeaderPointerDown = useCallback((event) => {
+		onFocus();
+		handleStart(event.nativeEvent);
+	}, [handleStart, onFocus]);
+	const style = useMemo(() => ({
+		left: position.x,
+		top: position.y,
+		width: dimensions.width,
+		height: dimensions.height,
+		zIndex
+	}), [
+		position.x,
+		position.y,
+		dimensions.width,
+		dimensions.height,
+		zIndex
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-label": label,
+		"aria-modal": "false",
+		className: styles.panel,
+		"data-pinned": isPinned || void 0,
+		onPointerDown: onFocus,
+		role: "dialog",
+		style,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: styles.header,
+				onPointerDown: handleHeaderPointerDown,
+				children: [header, /* @__PURE__ */ jsx("div", {
+					className: styles.headerActions,
+					children: actions
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: styles.content,
+				ref: contentRef
+			}),
+			isPinned ? null : RESIZE_HANDLES.map((handle) => /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: styles[`resize-${handle}`],
+				"data-handle": handle,
+				...getHandleProps(handle)
+			}, `${id}-resize-${handle}`))
+		]
+	});
+}
+
+//#endregion
+export { FloatingCardPanel };
+//# sourceMappingURL=panel.js.map

package/dist/components/floating-card/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","names":["RESIZE_HANDLES: readonly ResizeHandle[]"],"sources":["../../../src/components/floating-card/panel.tsx"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { useCallback, useMemo } from 'react';\nimport { useDrag } from './hooks/use-drag';\nimport { useResize } from './hooks/use-resize';\nimport styles from './styles.module.css';\nimport type { UniqueId } from '@accelint/core/utility/uuid';\nimport type { ReactNode, RefCallback } from 'react';\nimport type {\n  Bounds,\n  Dimensions,\n  FloatingCardLayout,\n  Position,\n  ResizeHandle,\n} from './types';\n\n/** Handles rendered around the card, paired with the cursor each one shows. */\nconst RESIZE_HANDLES: readonly ResizeHandle[] = [\n  'n',\n  's',\n  'e',\n  'w',\n  'ne',\n  'nw',\n  'se',\n  'sw',\n];\n\nexport type FloatingCardPanelProps = {\n  /** Identifier of the card this panel renders. */\n  id: UniqueId;\n  /** Current geometry and stacking order. */\n  layout: FloatingCardLayout;\n  /** Whether the card is pinned, which freezes drag and resize. */\n  isPinned: boolean;\n  /** Header content rendered before the title. */\n  header: ReactNode;\n  /** Header content rendered after the title, typically actions. */\n  actions: ReactNode;\n  /** Reads the provider's box so gestures can be constrained to it. */\n  getBounds: () => Bounds;\n  /** Registers the portal target that card children render into. */\n  contentRef: RefCallback<HTMLDivElement>;\n  /** Raises this card above its siblings. */\n  onFocus: () => void;\n  /** Commits a new position during a drag. */\n  onMove: (position: Position) => void;\n  /** Commits new geometry during a resize. */\n  onResize: (dimensions: Dimensions, position: Position) => void;\n  /** Accessible name for the card, taken from its title. */\n  label: string;\n};\n\n/**\n * Renders one floating card: its chrome, its drag surface, and the portal\n * target its children mount into.\n *\n * @param props - {@link FloatingCardPanelProps}\n * @returns The positioned card element.\n *\n * @remarks\n * Presentational only -- all geometry is owned by the provider and passed in,\n * so this component stays a pure function of its props.\n */\nexport function FloatingCardPanel({\n  id,\n  layout,\n  isPinned,\n  header,\n  actions,\n  getBounds,\n  contentRef,\n  onFocus,\n  onMove,\n  onResize,\n  label,\n}: FloatingCardPanelProps) {\n  const { position, dimensions, zIndex } = layout;\n\n  const { handleStart } = useDrag({\n    disabled: isPinned,\n    position,\n    dimensions,\n    getBounds,\n    onPositionChange: onMove,\n    onDragStart: onFocus,\n  });\n\n  const { getHandleProps } = useResize({\n    disabled: isPinned,\n    position,\n    dimensions,\n    getBounds,\n    onResize,\n    onResizeStart: onFocus,\n  });\n\n  const handleHeaderPointerDown = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      onFocus();\n      handleStart(event.nativeEvent);\n    },\n    [handleStart, onFocus],\n  );\n\n  const style = useMemo(\n    () => ({\n      left: position.x,\n      top: position.y,\n      width: dimensions.width,\n      height: dimensions.height,\n      zIndex,\n    }),\n    [position.x, position.y, dimensions.width, dimensions.height, zIndex],\n  );\n\n  return (\n    // biome-ignore lint/a11y/useKeyWithClickEvents: pointerdown only raises the card; every control inside stays keyboard reachable.\n    <div\n      aria-label={label}\n      // Cards coexist with the rest of the application rather than blocking it,\n      // so the dialog is explicitly non-modal.\n      aria-modal='false'\n      className={styles.panel}\n      data-pinned={isPinned || undefined}\n      onPointerDown={onFocus}\n      role='dialog'\n      style={style}\n    >\n      <div className={styles.header} onPointerDown={handleHeaderPointerDown}>\n        {header}\n        <div className={styles.headerActions}>{actions}</div>\n      </div>\n\n      <div className={styles.content} ref={contentRef} />\n\n      {isPinned\n        ? null\n        : RESIZE_HANDLES.map((handle) => (\n            <div\n              aria-hidden='true'\n              className={styles[`resize-${handle}`]}\n              data-handle={handle}\n              key={`${id}-resize-${handle}`}\n              {...getHandleProps(handle)}\n            />\n          ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4BA,MAAMA,iBAA0C;CAC9C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;;;AAsCD,SAAgB,kBAAkB,EAChC,IACA,QACA,UACA,QACA,SACA,WACA,YACA,SACA,QACA,UACA,SACyB;CACzB,MAAM,EAAE,UAAU,YAAY,WAAW;CAEzC,MAAM,EAAE,gBAAgB,QAAQ;EAC9B,UAAU;EACV;EACA;EACA;EACA,kBAAkB;EAClB,aAAa;EACd,CAAC;CAEF,MAAM,EAAE,mBAAmB,UAAU;EACnC,UAAU;EACV;EACA;EACA;EACA;EACA,eAAe;EAChB,CAAC;CAEF,MAAM,0BAA0B,aAC7B,UAA8C;AAC7C,WAAS;AACT,cAAY,MAAM,YAAY;IAEhC,CAAC,aAAa,QAAQ,CACvB;CAED,MAAM,QAAQ,eACL;EACL,MAAM,SAAS;EACf,KAAK,SAAS;EACd,OAAO,WAAW;EAClB,QAAQ,WAAW;EACnB;EACD,GACD;EAAC,SAAS;EAAG,SAAS;EAAG,WAAW;EAAO,WAAW;EAAQ;EAAO,CACtE;AAED,QAEE,qBAAC;EACC,cAAY;EAGZ,cAAW;EACX,WAAW,OAAO;EAClB,eAAa,YAAY;EACzB,eAAe;EACf,MAAK;EACE;;GAEP,qBAAC;IAAI,WAAW,OAAO;IAAQ,eAAe;eAC3C,QACD,oBAAC;KAAI,WAAW,OAAO;eAAgB;MAAc;KACjD;GAEN,oBAAC;IAAI,WAAW,OAAO;IAAS,KAAK;KAAc;GAElD,WACG,OACA,eAAe,KAAK,WAClB,oBAAC;IACC,eAAY;IACZ,WAAW,OAAO,UAAU;IAC5B,eAAa;IAEb,GAAI,eAAe,OAAO;MADrB,GAAG,GAAG,UAAU,SAErB,CACF;;GACF"}

package/dist/components/floating-card/provider.d.ts

@@ -11,28 +11,31 @@
  */
 
 import { FloatingCardProviderProps } from "./types.js";
-import * as react_jsx_runtime37 from "react/jsx-runtime";
+import * as react_jsx_runtime99 from "react/jsx-runtime";
 
 //#region src/components/floating-card/provider.d.ts
 
 /**
  * Provides a context and layout area for floating cards within the application.
  *
- * Wraps children with floating card context and renders a Dockview instance to manage
- * docking, dragging, and layout of floating cards.
+ * Wraps children with floating card context and renders each registered card as
+ * a draggable, resizable panel bounded by the provider's own box.
  *
  * @param props - The props for the FloatingCardProvider component.
  * @param props.children - Child components rendered inside the floating card provider.
  * @param props.icon - Optional icon rendered in all card headers (static or factory).
  * @param props.headerActions - Optional action buttons for card headers (static or factory).
+ * @param props.initialPinned - Card IDs that start pinned.
+ * @param props.bounds - Region cards are confined to. Defaults to `'provider'`.
  * @param props.className - Additional CSS class names for styling.
  * @returns The FloatingCardProvider component that manages floating card layout and context.
  *
  * @remarks
  * - Manages registration and cleanup of floating card DOM references
  * - Exposes closeCard, togglePinCard, and isPinned via context
- * - Automatically cleans up refs when cards are removed via any path (drag close, group close, API close)
- * - Cards are bounded within the viewport
+ * - Cards are bounded within the provider element by default; `bounds='viewport'`
+ *   lets them move anywhere on screen
+ * - Cards are dragged by their header; pinning a card freezes drag and resize
  *
  * @example
  * ```tsx
@@ -55,8 +58,9 @@ declare function FloatingCardProvider({
   icon,
   headerActions,
   initialPinned,
+  bounds,
   className
-}: FloatingCardProviderProps): react_jsx_runtime37.JSX.Element;
+}: FloatingCardProviderProps): react_jsx_runtime99.JSX.Element;
 //#endregion
 export { FloatingCardProvider };
 //# sourceMappingURL=provider.d.ts.map