@accelint/design-toolkit 9.13.0 → 10.0.0

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_runtime76 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_runtime76.JSX.Element;
+}: FloatingCardProviderProps): react_jsx_runtime99.JSX.Element;
 //#endregion
 export { FloatingCardProvider };
 //# sourceMappingURL=provider.d.ts.map

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

@@ -14,55 +14,26 @@
 import { Icon } from "../icon/index.js";
 import { Button } from "../button/index.js";
 import { Divider } from "../divider/index.js";
-import { FloatingCardContext, useFloatingCard } from "./context.js";
-import { createHeaderAdapter } from "./utils.js";
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { FloatingCardContext, FloatingCardRegistryContext } from "./context.js";
+import { useCardLayout } from "./hooks/use-card-layout.js";
+import { FloatingCardPanel } from "./panel.js";
+import { resolveMaybeFactory } from "./utils.js";
+import { useCallback, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { clsx } from "@accelint/design-foundation/lib/utils";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Cancel from "@accelint/icons/cancel";
 import PinIcon from "@accelint/icons/pin";
-import { DockviewReact } from "dockview-react";
 import styles from "./styles.module.css";
 
 //#region src/components/floating-card/provider.tsx
-/**
-* Internal component that registers a DOM ref for a card container.
-*
-* Used by the floating card engine to mount portal targets. Also manages
-* the data-pinned attribute on the resize container to control drag handle visibility.
-*
-* @param props - Dockview panel props containing the card ID.
-*/
-function FloatingCardContainer(props) {
-	const { addRef, isPinned, subscribeToPinState } = useFloatingCard();
-	const cardId = props.api.id;
-	const pinned = useSyncExternalStore(subscribeToPinState, () => isPinned(cardId), () => false);
-	const cardRef = useRef(null);
-	const refCallback = useCallback((ref) => {
-		cardRef.current = ref;
-		addRef(cardId, ref);
-	}, [addRef, cardId]);
-	useEffect(() => {
-		const container = cardRef.current?.closest(".dv-resize-container");
-		if (!container) return;
-		if (pinned) container.dataset.pinned = "";
-		else delete container.dataset.pinned;
-	}, [pinned]);
-	return /* @__PURE__ */ jsx("div", {
-		className: styles.cardContent,
-		ref: refCallback
-	});
-}
-/**
-* Default left header showing an optional custom icon and the card's title.
-*/
-function DefaultLeftHeader({ title, icon, id }) {
+/** Header shown at the start of a card: optional icon plus the title. */
+function CardHeaderStart({ icon, title }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: styles.headerSide,
 		children: [icon ? /* @__PURE__ */ jsx(Icon, {
 			size: "small",
 			children: icon
-		}) : null, title && title !== id ? /* @__PURE__ */ jsx("div", {
+		}) : null, title ? /* @__PURE__ */ jsx("div", {
 			className: styles.headerTitleContainer,
 			children: /* @__PURE__ */ jsx("div", {
 				className: styles.headerTitle,
@@ -71,64 +42,55 @@ function DefaultLeftHeader({ title, icon, id }) {
 		}) : null]
 	});
 }
-/** Stable no-op subscribe for useSyncExternalStore when no pin subscription is available. */
-const noopSubscribe = () => () => void 0;
-/**
-* Default right header showing optional action buttons and an always-present close button.
-*
-* @remarks Handles rendering of 'divider' and 'pin' action types specially.
-*/
-function DefaultRightHeader({ closeGroup, headerActions, id, togglePinCard, isPinned, subscribeToPinState }) {
-	const pinned = useSyncExternalStore(subscribeToPinState ?? noopSubscribe, () => id && isPinned ? isPinned(id) : false, () => false);
-	return /* @__PURE__ */ jsxs("div", {
-		className: styles.headerSide,
-		children: [headerActions?.map((action, index) => {
-			if (action === "divider") return /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }, `${id}-divider-${index}`);
-			if (action === "pin") return /* @__PURE__ */ jsx(Button, {
-				className: styles.pinButton,
-				variant: "icon",
-				size: "small",
-				color: pinned ? "accent" : void 0,
-				"aria-label": "Pin",
-				"aria-pressed": pinned,
-				onClick: () => {
-					if (id && togglePinCard) togglePinCard(id);
-				},
-				children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(PinIcon, {}) })
-			}, `${id}-pin-${index}`);
-			return /* @__PURE__ */ jsx(Button, {
-				variant: "icon",
-				size: "small",
-				onClick: action.onClick,
-				children: /* @__PURE__ */ jsx(Icon, { children: action.icon })
-			}, `${id}-${index}`);
-		}), /* @__PURE__ */ jsx(Button, {
+/** Action buttons for a card, ending in the always-present close button. */
+function CardHeaderActions({ actions, id, isPinned, onClose, onTogglePin }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [actions?.map((action, index) => {
+		if (action === "divider") return /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }, `${id}-divider-${index}`);
+		if (action === "pin") return /* @__PURE__ */ jsx(Button, {
+			"aria-label": "Pin",
+			"aria-pressed": isPinned,
+			color: isPinned ? "accent" : void 0,
+			onPress: onTogglePin,
+			size: "small",
 			variant: "icon",
+			children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(PinIcon, {}) })
+		}, `${id}-pin-${index}`);
+		return /* @__PURE__ */ jsx(Button, {
+			"aria-label": action.label,
+			onPress: action.onClick,
 			size: "small",
-			onClick: closeGroup,
-			children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Cancel, {}) })
-		})]
-	});
+			variant: "icon",
+			children: /* @__PURE__ */ jsx(Icon, { children: action.icon })
+		}, `${id}-action-${index}`);
+	}), /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Close",
+		onPress: onClose,
+		size: "small",
+		variant: "icon",
+		children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Cancel, {}) })
+	})] });
 }
-const components = { default: FloatingCardContainer };
 /**
 * 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
@@ -146,113 +108,157 @@ const components = { default: FloatingCardContainer };
 * </FloatingCardProvider>
 * ```
 */
-function FloatingCardProvider({ children, icon, headerActions, initialPinned, className }) {
-	const [api, setApi] = useState(null);
+function FloatingCardProvider({ children, icon, headerActions, initialPinned, bounds = "provider", className }) {
+	const rootRef = useRef(null);
 	const [cards, setCards] = useState({});
-	const pinnedCardsRef = useRef(new Set(initialPinned));
+	const pinnedRef = useRef(new Set(initialPinned));
 	const pinListenersRef = useRef(/* @__PURE__ */ new Set());
-	const closeCard = useCallback((id) => {
-		api?.getPanel(id)?.api.close();
-	}, [api]);
-	const togglePinCard = useCallback((id) => {
-		const next = new Set(pinnedCardsRef.current);
-		if (next.has(id)) next.delete(id);
-		else next.add(id);
-		pinnedCardsRef.current = next;
+	const { layouts, registerCard, unregisterCard, moveCard, resizeCard, bringToFront } = useCardLayout();
+	const notifyPinChange = useCallback(() => {
 		for (const listener of pinListenersRef.current) listener();
 	}, []);
-	const isPinned = useCallback((id) => pinnedCardsRef.current.has(id), []);
+	const isPinned = useCallback((id) => pinnedRef.current.has(id), []);
 	const subscribeToPinState = useCallback((callback) => {
 		pinListenersRef.current.add(callback);
 		return () => {
 			pinListenersRef.current.delete(callback);
 		};
 	}, []);
-	const removeRef = useCallback((view) => {
-		setCards((prev) => {
-			const newCards = { ...prev };
-			delete newCards[view];
-			return newCards;
+	const togglePinCard = useCallback((id) => {
+		const next = new Set(pinnedRef.current);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		pinnedRef.current = next;
+		notifyPinChange();
+	}, [notifyPinChange]);
+	const removeRef = useCallback((id) => {
+		setCards((current) => {
+			if (!current[id]) return current;
+			const next = { ...current };
+			delete next[id];
+			return next;
 		});
-		if (pinnedCardsRef.current.has(view)) {
-			const next = new Set(pinnedCardsRef.current);
-			next.delete(view);
-			pinnedCardsRef.current = next;
-			for (const listener of pinListenersRef.current) listener();
+		if (pinnedRef.current.has(id)) {
+			const next = new Set(pinnedRef.current);
+			next.delete(id);
+			pinnedRef.current = next;
+			notifyPinChange();
 		}
-	}, []);
+	}, [notifyPinChange]);
 	const addRef = useCallback((id, ref) => {
-		if (ref) setCards((prev) => {
-			if (prev[id]) return prev;
-			return {
-				...prev,
-				[id]: ref
-			};
+		if (!ref) return;
+		setCards((current) => current[id] === ref ? current : {
+			...current,
+			[id]: ref
 		});
 	}, []);
-	useEffect(() => {
-		if (!api) return;
-		const disposable = api.onDidRemovePanel((event) => {
-			removeRef(event.id);
-		});
-		return () => {
-			disposable.dispose();
+	const closeCard = useCallback((id) => {
+		unregisterCard(id);
+		removeRef(id);
+	}, [removeRef, unregisterCard]);
+	const getBounds = useCallback(() => {
+		const element = rootRef.current;
+		if (!element) return {
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0
+		};
+		const rect = element.getBoundingClientRect();
+		if (bounds === "viewport") return {
+			top: -rect.top,
+			left: -rect.left,
+			right: window.innerWidth - rect.left,
+			bottom: window.innerHeight - rect.top
+		};
+		return {
+			top: 0,
+			left: 0,
+			right: rect.width,
+			bottom: rect.height
 		};
-	}, [api, removeRef]);
+	}, [bounds]);
 	const contextValue = useMemo(() => ({
 		cards,
-		addRef,
-		removeRef,
 		closeCard,
 		togglePinCard,
 		isPinned,
-		subscribeToPinState,
-		api
+		subscribeToPinState
 	}), [
 		cards,
 		closeCard,
-		removeRef,
-		api,
-		addRef,
 		togglePinCard,
 		isPinned,
 		subscribeToPinState
 	]);
-	const leftAdapter = useMemo(() => createHeaderAdapter(DefaultLeftHeader, { icon }), [icon]);
-	const rightAdapter = useMemo(() => createHeaderAdapter(DefaultRightHeader, {
-		headerActions,
-		togglePinCard,
-		isPinned,
-		subscribeToPinState
-	}), [
-		headerActions,
-		togglePinCard,
-		isPinned,
-		subscribeToPinState
-	]);
-	const theme = useMemo(() => ({
-		name: "accelint",
-		className: styles.floatingCardProvider ?? ""
-	}), []);
-	const onReady = useCallback((event) => {
-		setApi(event.api);
-	}, []);
+	const registryValue = useMemo(() => ({
+		openCard: registerCard,
+		addRef
+	}), [registerCard, addRef]);
 	return /* @__PURE__ */ jsx(FloatingCardContext.Provider, {
 		value: contextValue,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: clsx(styles.providerRoot, className),
-			children: [/* @__PURE__ */ jsx(DockviewReact, {
-				locked: true,
-				floatingGroupBounds: "boundedWithinViewport",
-				components,
-				prefixHeaderActionsComponent: leftAdapter,
-				rightHeaderActionsComponent: rightAdapter,
-				onReady,
-				theme
-			}), children]
+		children: /* @__PURE__ */ jsx(FloatingCardRegistryContext.Provider, {
+			value: registryValue,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx(styles.providerRoot, className),
+				ref: rootRef,
+				children: [Object.entries(layouts).map(([id, layout]) => /* @__PURE__ */ jsx(CardPanel, {
+					actions: resolveMaybeFactory(headerActions, id),
+					getBounds,
+					icon: resolveMaybeFactory(icon, id),
+					id,
+					isPinned,
+					layout,
+					onAddRef: addRef,
+					onClose: closeCard,
+					onFocus: bringToFront,
+					onMove: moveCard,
+					onResize: resizeCard,
+					onTogglePin: togglePinCard,
+					subscribeToPinState
+				}, id)), children]
+			})
 		})
 	});
 }
+/**
+* Binds one card's identity to the provider's callbacks so {@link FloatingCardPanel}
+* can stay a plain presentational component.
+*
+* @remarks
+* Pin state lives in a mutable store rather than React state, so it is read
+* through `useSyncExternalStore` -- only the cards whose pin state changed
+* re-render.
+*/
+function CardPanel({ actions, getBounds, icon, id, isPinned, layout, onAddRef, onClose, onFocus, onMove, onResize, onTogglePin, subscribeToPinState }) {
+	const { title } = layout;
+	const pinned = useSyncExternalStore(subscribeToPinState, () => isPinned(id), () => false);
+	const contentRef = useCallback((element) => {
+		onAddRef(id, element);
+	}, [id, onAddRef]);
+	return /* @__PURE__ */ jsx(FloatingCardPanel, {
+		actions: /* @__PURE__ */ jsx(CardHeaderActions, {
+			actions,
+			id,
+			isPinned: pinned,
+			onClose: () => onClose(id),
+			onTogglePin: () => onTogglePin(id)
+		}),
+		contentRef,
+		getBounds,
+		header: /* @__PURE__ */ jsx(CardHeaderStart, {
+			icon,
+			title
+		}),
+		id,
+		isPinned: pinned,
+		label: title ?? "Floating card",
+		layout,
+		onFocus: () => onFocus(id),
+		onMove: (position) => onMove(id, position),
+		onResize: (dimensions, position) => onResize(id, dimensions, position)
+	});
+}
 
 //#endregion
 export { FloatingCardProvider };