@accelint/design-toolkit 9.12.0 → 10.0.0

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 };

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

@@ -1 +1 @@
-{"version":3,"file":"provider.js","names":["CloseIcon","components: Record<string, FunctionComponent<IDockviewPanelProps>>"],"sources":["../../../src/components/floating-card/provider.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 { clsx } from '@accelint/design-foundation/lib/utils';\nimport CloseIcon from '@accelint/icons/cancel';\nimport PinIcon from '@accelint/icons/pin';\nimport {\n  type DockviewApi,\n  DockviewReact,\n  type DockviewReadyEvent,\n  type IDockviewPanelProps,\n} from 'dockview-react';\nimport {\n  type FunctionComponent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react';\nimport { Button } from '../button';\nimport { Divider } from '../divider';\nimport { Icon } from '../icon';\nimport { FloatingCardContext, useFloatingCard } from './context';\nimport styles from './styles.module.css';\nimport { createHeaderAdapter, type FloatingCardHeaderProps } from './utils';\nimport type { UniqueId } from '@accelint/core/utility/uuid';\nimport type {\n  FloatingCardContextValue,\n  FloatingCardProviderProps,\n} from './types';\n\n/**\n * Internal component that registers a DOM ref for a card container.\n *\n * Used by the floating card engine to mount portal targets. Also manages\n * the data-pinned attribute on the resize container to control drag handle visibility.\n *\n * @param props - Dockview panel props containing the card ID.\n */\nfunction FloatingCardContainer(props: Readonly<IDockviewPanelProps>) {\n  const { addRef, isPinned, subscribeToPinState } = useFloatingCard();\n  const cardId = props.api.id as UniqueId;\n\n  const pinned = useSyncExternalStore(\n    subscribeToPinState,\n    () => isPinned(cardId),\n    () => false,\n  );\n\n  const cardRef = useRef<HTMLDivElement | null>(null);\n\n  const refCallback = useCallback(\n    (ref: HTMLDivElement | null) => {\n      cardRef.current = ref;\n      addRef(cardId, ref);\n    },\n    [addRef, cardId],\n  );\n\n  // Toggle a data-pinned attribute on the ancestor .dv-resize-container\n  // so CSS can disable pointer-events on the drag handle.\n  useEffect(() => {\n    const el = cardRef.current;\n    const container = el?.closest<HTMLElement>('.dv-resize-container');\n\n    if (!container) {\n      return;\n    }\n\n    if (pinned) {\n      container.dataset.pinned = '';\n    } else {\n      delete container.dataset.pinned;\n    }\n  }, [pinned]);\n\n  return <div className={styles.cardContent} ref={refCallback} />;\n}\n\n/**\n * Default left header showing an optional custom icon and the card's title.\n */\nfunction DefaultLeftHeader({\n  title,\n  icon,\n  id,\n}: Readonly<FloatingCardHeaderProps>) {\n  return (\n    <div className={styles.headerSide}>\n      {icon ? <Icon size='small'>{icon}</Icon> : null}\n      {title && title !== id ? (\n        <div className={styles.headerTitleContainer}>\n          <div className={styles.headerTitle}>{title}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/** Stable no-op subscribe for useSyncExternalStore when no pin subscription is available. */\nconst noopSubscribe = () => () => undefined;\n\n/**\n * Default right header showing optional action buttons and an always-present close button.\n *\n * @remarks Handles rendering of 'divider' and 'pin' action types specially.\n */\nfunction DefaultRightHeader({\n  closeGroup,\n  headerActions,\n  id,\n  togglePinCard,\n  isPinned,\n  subscribeToPinState,\n}: Readonly<FloatingCardHeaderProps>) {\n  const pinned = useSyncExternalStore(\n    subscribeToPinState ?? noopSubscribe,\n    () => (id && isPinned ? isPinned(id as UniqueId) : false),\n    () => false,\n  );\n\n  return (\n    <div className={styles.headerSide}>\n      {headerActions?.map((action, index) => {\n        if (action === 'divider') {\n          return (\n            // biome-ignore lint/suspicious/noArrayIndexKey: Using index as key is acceptable here because the order of actions is unlikely to change.\n            <Divider key={`${id}-divider-${index}`} orientation='vertical' />\n          );\n        }\n        if (action === 'pin') {\n          return (\n            <Button\n              className={styles.pinButton}\n              // biome-ignore lint/suspicious/noArrayIndexKey: Using index as key is acceptable here because the order of actions is unlikely to change.\n              key={`${id}-pin-${index}`}\n              variant='icon'\n              size='small'\n              color={pinned ? 'accent' : undefined}\n              aria-label='Pin'\n              aria-pressed={pinned}\n              onClick={() => {\n                if (id && togglePinCard) {\n                  togglePinCard(id as UniqueId);\n                }\n              }}\n            >\n              <Icon>\n                <PinIcon />\n              </Icon>\n            </Button>\n          );\n        }\n        return (\n          <Button\n            key={`${id}-${\n              // biome-ignore lint/suspicious/noArrayIndexKey: Using index as key is acceptable here because the order of actions is unlikely to change.\n              index\n            }`}\n            variant='icon'\n            size='small'\n            onClick={action.onClick}\n          >\n            <Icon>{action.icon}</Icon>\n          </Button>\n        );\n      })}\n      <Button variant='icon' size='small' onClick={closeGroup}>\n        <Icon>\n          <CloseIcon />\n        </Icon>\n      </Button>\n    </div>\n  );\n}\n\nconst components: Record<string, FunctionComponent<IDockviewPanelProps>> = {\n  default: FloatingCardContainer,\n};\n\n/**\n * Provides a context and layout area for floating cards within the application.\n *\n * Wraps children with floating card context and renders a Dockview instance to manage\n * docking, dragging, and layout of floating cards.\n *\n * @param props - The props for the FloatingCardProvider component.\n * @param props.children - Child components rendered inside the floating card provider.\n * @param props.icon - Optional icon rendered in all card headers (static or factory).\n * @param props.headerActions - Optional action buttons for card headers (static or factory).\n * @param props.className - Additional CSS class names for styling.\n * @returns The FloatingCardProvider component that manages floating card layout and context.\n *\n * @remarks\n * - Manages registration and cleanup of floating card DOM references\n * - Exposes closeCard, togglePinCard, and isPinned via context\n * - Automatically cleans up refs when cards are removed via any path (drag close, group close, API close)\n * - Cards are bounded within the viewport\n *\n * @example\n * ```tsx\n * <FloatingCardProvider\n *   icon={<AppLogo />}\n *   headerActions={[\n *     { icon: <SettingsIcon />, onClick: openSettings },\n *     'divider',\n *     'pin'\n *   ]}\n * >\n *   <FloatingCard id=\"panel-1\" title=\"My Panel\">\n *     <div>Panel content</div>\n *   </FloatingCard>\n * </FloatingCardProvider>\n * ```\n */\nexport function FloatingCardProvider({\n  children,\n  icon,\n  headerActions,\n  initialPinned,\n  className,\n}: FloatingCardProviderProps) {\n  const [api, setApi] = useState<DockviewApi | null>(null);\n  const [cards, setCards] = useState<Record<UniqueId, HTMLDivElement>>({});\n  const pinnedCardsRef = useRef<Set<UniqueId>>(new Set(initialPinned));\n  const pinListenersRef = useRef<Set<() => void>>(new Set());\n\n  const closeCard = useCallback(\n    (id: UniqueId) => {\n      api?.getPanel(id)?.api.close();\n    },\n    [api],\n  );\n\n  const togglePinCard = useCallback((id: UniqueId) => {\n    const next = new Set(pinnedCardsRef.current);\n    if (next.has(id)) {\n      next.delete(id);\n    } else {\n      next.add(id);\n    }\n    pinnedCardsRef.current = next;\n    for (const listener of pinListenersRef.current) {\n      listener();\n    }\n  }, []);\n\n  const isPinned = useCallback(\n    (id: UniqueId) => pinnedCardsRef.current.has(id),\n    [],\n  );\n\n  const subscribeToPinState = useCallback((callback: () => void) => {\n    pinListenersRef.current.add(callback);\n    return () => {\n      pinListenersRef.current.delete(callback);\n    };\n  }, []);\n\n  const removeRef = useCallback((view: UniqueId) => {\n    setCards((prev) => {\n      const newCards = { ...prev };\n      delete newCards[view];\n      return newCards;\n    });\n    if (pinnedCardsRef.current.has(view)) {\n      const next = new Set(pinnedCardsRef.current);\n      next.delete(view);\n      pinnedCardsRef.current = next;\n      for (const listener of pinListenersRef.current) {\n        listener();\n      }\n    }\n  }, []);\n\n  const addRef = useCallback((id: UniqueId, ref: HTMLDivElement | null) => {\n    if (ref) {\n      setCards((prev) => {\n        if (prev[id]) {\n          return prev;\n        }\n        return { ...prev, [id]: ref };\n      });\n    }\n  }, []);\n\n  // Clean up stale refs when cards are removed via any path\n  // (drag close, group close, API close, etc.)\n  useEffect(() => {\n    if (!api) {\n      return;\n    }\n\n    const disposable = api.onDidRemovePanel((event) => {\n      removeRef(event.id as UniqueId);\n    });\n\n    return () => {\n      disposable.dispose();\n    };\n  }, [api, removeRef]);\n\n  const contextValue = useMemo<FloatingCardContextValue>(\n    () => ({\n      cards,\n      addRef,\n      removeRef,\n      closeCard,\n      togglePinCard,\n      isPinned,\n      subscribeToPinState,\n      api,\n    }),\n    [\n      cards,\n      closeCard,\n      removeRef,\n      api,\n      addRef,\n      togglePinCard,\n      isPinned,\n      subscribeToPinState,\n    ],\n  );\n\n  const leftAdapter = useMemo(\n    () =>\n      createHeaderAdapter(DefaultLeftHeader, {\n        icon,\n      }),\n    [icon],\n  );\n\n  const rightAdapter = useMemo(\n    () =>\n      createHeaderAdapter(DefaultRightHeader, {\n        headerActions,\n        togglePinCard,\n        isPinned,\n        subscribeToPinState,\n      }),\n    [headerActions, togglePinCard, isPinned, subscribeToPinState],\n  );\n\n  const theme = useMemo(\n    () => ({\n      name: 'accelint',\n      className: styles.floatingCardProvider ?? '',\n    }),\n    [],\n  );\n\n  const onReady = useCallback((event: DockviewReadyEvent) => {\n    setApi(event.api);\n  }, []);\n\n  return (\n    <FloatingCardContext.Provider value={contextValue}>\n      <div className={clsx(styles.providerRoot, className)}>\n        <DockviewReact\n          locked\n          floatingGroupBounds={'boundedWithinViewport'}\n          components={components}\n          prefixHeaderActionsComponent={leftAdapter}\n          rightHeaderActionsComponent={rightAdapter}\n          onReady={onReady}\n          theme={theme}\n        />\n        {children}\n      </div>\n    </FloatingCardContext.Provider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"provider.js","names":["CloseIcon"],"sources":["../../../src/components/floating-card/provider.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 { clsx } from '@accelint/design-foundation/lib/utils';\nimport CloseIcon from '@accelint/icons/cancel';\nimport PinIcon from '@accelint/icons/pin';\nimport {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react';\nimport { Button } from '../button';\nimport { Divider } from '../divider';\nimport { Icon } from '../icon';\nimport { FloatingCardContext, FloatingCardRegistryContext } from './context';\nimport type { FloatingCardRegistryValue } from './context';\nimport { useCardLayout } from './hooks/use-card-layout';\nimport { FloatingCardPanel } from './panel';\nimport styles from './styles.module.css';\nimport { resolveMaybeFactory } from './utils';\nimport type { UniqueId } from '@accelint/core/utility/uuid';\nimport type {\n  Bounds,\n  Dimensions,\n  FloatingCardContextValue,\n  FloatingCardHeaderAction,\n  FloatingCardLayout,\n  FloatingCardProviderProps,\n  Position,\n} from './types';\n\n/** Header shown at the start of a card: optional icon plus the title. */\nfunction CardHeaderStart({\n  icon,\n  title,\n}: Readonly<{ icon: React.ReactNode; title: string | undefined }>) {\n  return (\n    <div className={styles.headerSide}>\n      {icon ? <Icon size='small'>{icon}</Icon> : null}\n      {title ? (\n        <div className={styles.headerTitleContainer}>\n          <div className={styles.headerTitle}>{title}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/** Action buttons for a card, ending in the always-present close button. */\nfunction CardHeaderActions({\n  actions,\n  id,\n  isPinned,\n  onClose,\n  onTogglePin,\n}: Readonly<{\n  actions: FloatingCardHeaderAction[] | undefined;\n  id: UniqueId;\n  isPinned: boolean;\n  onClose: () => void;\n  onTogglePin: () => void;\n}>) {\n  return (\n    <>\n      {actions?.map((action, index) => {\n        if (action === 'divider') {\n          return (\n            // biome-ignore lint/suspicious/noArrayIndexKey: Using index as key is acceptable here because the order of actions is unlikely to change.\n            <Divider key={`${id}-divider-${index}`} orientation='vertical' />\n          );\n        }\n\n        if (action === 'pin') {\n          return (\n            <Button\n              aria-label='Pin'\n              aria-pressed={isPinned}\n              color={isPinned ? 'accent' : undefined}\n              // biome-ignore lint/suspicious/noArrayIndexKey: Using index as key is acceptable here because the order of actions is unlikely to change.\n              key={`${id}-pin-${index}`}\n              onPress={onTogglePin}\n              size='small'\n              variant='icon'\n            >\n              <Icon>\n                <PinIcon />\n              </Icon>\n            </Button>\n          );\n        }\n\n        return (\n          <Button\n            aria-label={action.label}\n            // biome-ignore lint/suspicious/noArrayIndexKey: Using index as key is acceptable here because the order of actions is unlikely to change.\n            key={`${id}-action-${index}`}\n            onPress={action.onClick}\n            size='small'\n            variant='icon'\n          >\n            <Icon>{action.icon}</Icon>\n          </Button>\n        );\n      })}\n      <Button aria-label='Close' onPress={onClose} size='small' variant='icon'>\n        <Icon>\n          <CloseIcon />\n        </Icon>\n      </Button>\n    </>\n  );\n}\n\n/**\n * Provides a context and layout area for floating cards within the application.\n *\n * Wraps children with floating card context and renders each registered card as\n * a draggable, resizable panel bounded by the provider's own box.\n *\n * @param props - The props for the FloatingCardProvider component.\n * @param props.children - Child components rendered inside the floating card provider.\n * @param props.icon - Optional icon rendered in all card headers (static or factory).\n * @param props.headerActions - Optional action buttons for card headers (static or factory).\n * @param props.initialPinned - Card IDs that start pinned.\n * @param props.bounds - Region cards are confined to. Defaults to `'provider'`.\n * @param props.className - Additional CSS class names for styling.\n * @returns The FloatingCardProvider component that manages floating card layout and context.\n *\n * @remarks\n * - Manages registration and cleanup of floating card DOM references\n * - Exposes closeCard, togglePinCard, and isPinned via context\n * - Cards are bounded within the provider element by default; `bounds='viewport'`\n *   lets them move anywhere on screen\n * - Cards are dragged by their header; pinning a card freezes drag and resize\n *\n * @example\n * ```tsx\n * <FloatingCardProvider\n *   icon={<AppLogo />}\n *   headerActions={[\n *     { icon: <SettingsIcon />, onClick: openSettings },\n *     'divider',\n *     'pin'\n *   ]}\n * >\n *   <FloatingCard id=\"panel-1\" title=\"My Panel\">\n *     <div>Panel content</div>\n *   </FloatingCard>\n * </FloatingCardProvider>\n * ```\n */\nexport function FloatingCardProvider({\n  children,\n  icon,\n  headerActions,\n  initialPinned,\n  bounds = 'provider',\n  className,\n}: FloatingCardProviderProps) {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const [cards, setCards] = useState<Record<UniqueId, HTMLDivElement>>({});\n\n  const pinnedRef = useRef<Set<UniqueId>>(new Set(initialPinned));\n  const pinListenersRef = useRef<Set<() => void>>(new Set());\n\n  const {\n    layouts,\n    registerCard,\n    unregisterCard,\n    moveCard,\n    resizeCard,\n    bringToFront,\n  } = useCardLayout();\n\n  const notifyPinChange = useCallback(() => {\n    for (const listener of pinListenersRef.current) {\n      listener();\n    }\n  }, []);\n\n  const isPinned = useCallback((id: UniqueId) => pinnedRef.current.has(id), []);\n\n  const subscribeToPinState = useCallback((callback: () => void) => {\n    pinListenersRef.current.add(callback);\n\n    return () => {\n      pinListenersRef.current.delete(callback);\n    };\n  }, []);\n\n  const togglePinCard = useCallback(\n    (id: UniqueId) => {\n      const next = new Set(pinnedRef.current);\n\n      if (next.has(id)) {\n        next.delete(id);\n      } else {\n        next.add(id);\n      }\n\n      pinnedRef.current = next;\n      notifyPinChange();\n    },\n    [notifyPinChange],\n  );\n\n  const removeRef = useCallback(\n    (id: UniqueId) => {\n      setCards((current) => {\n        if (!current[id]) {\n          return current;\n        }\n\n        const next = { ...current };\n        delete next[id];\n\n        return next;\n      });\n\n      if (pinnedRef.current.has(id)) {\n        const next = new Set(pinnedRef.current);\n        next.delete(id);\n        pinnedRef.current = next;\n        notifyPinChange();\n      }\n    },\n    [notifyPinChange],\n  );\n\n  const addRef = useCallback((id: UniqueId, ref: HTMLDivElement | null) => {\n    if (!ref) {\n      return;\n    }\n\n    setCards((current) =>\n      current[id] === ref ? current : { ...current, [id]: ref },\n    );\n  }, []);\n\n  const closeCard = useCallback(\n    (id: UniqueId) => {\n      unregisterCard(id);\n      removeRef(id);\n    },\n    [removeRef, unregisterCard],\n  );\n\n  const getBounds = useCallback((): Bounds => {\n    const element = rootRef.current;\n\n    if (!element) {\n      return { top: 0, left: 0, right: 0, bottom: 0 };\n    }\n\n    const rect = element.getBoundingClientRect();\n\n    if (bounds === 'viewport') {\n      // Cards are positioned relative to the provider, so the viewport box is\n      // expressed in that coordinate space by subtracting the provider offset.\n      return {\n        top: -rect.top,\n        left: -rect.left,\n        right: window.innerWidth - rect.left,\n        bottom: window.innerHeight - rect.top,\n      };\n    }\n\n    return { top: 0, left: 0, right: rect.width, bottom: rect.height };\n  }, [bounds]);\n\n  const contextValue = useMemo<FloatingCardContextValue>(\n    () => ({\n      cards,\n      closeCard,\n      togglePinCard,\n      isPinned,\n      subscribeToPinState,\n    }),\n    [cards, closeCard, togglePinCard, isPinned, subscribeToPinState],\n  );\n\n  const registryValue = useMemo<FloatingCardRegistryValue>(\n    () => ({ openCard: registerCard, addRef }),\n    [registerCard, addRef],\n  );\n\n  return (\n    <FloatingCardContext.Provider value={contextValue}>\n      <FloatingCardRegistryContext.Provider value={registryValue}>\n        <div className={clsx(styles.providerRoot, className)} ref={rootRef}>\n          {Object.entries(layouts).map(([id, layout]) => (\n            <CardPanel\n              actions={resolveMaybeFactory(headerActions, id)}\n              getBounds={getBounds}\n              icon={resolveMaybeFactory(icon, id)}\n              id={id as UniqueId}\n              isPinned={isPinned}\n              key={id}\n              layout={layout}\n              onAddRef={addRef}\n              onClose={closeCard}\n              onFocus={bringToFront}\n              onMove={moveCard}\n              onResize={resizeCard}\n              onTogglePin={togglePinCard}\n              subscribeToPinState={subscribeToPinState}\n            />\n          ))}\n          {children}\n        </div>\n      </FloatingCardRegistryContext.Provider>\n    </FloatingCardContext.Provider>\n  );\n}\n\ntype CardPanelProps = {\n  actions: FloatingCardHeaderAction[] | undefined;\n  getBounds: () => Bounds;\n  icon: React.ReactNode;\n  id: UniqueId;\n  isPinned: (id: UniqueId) => boolean;\n  layout: FloatingCardLayout;\n  onAddRef: (id: UniqueId, ref: HTMLDivElement | null) => void;\n  onClose: (id: UniqueId) => void;\n  onFocus: (id: UniqueId) => void;\n  onMove: (id: UniqueId, position: Position) => void;\n  onResize: (id: UniqueId, dimensions: Dimensions, position: Position) => void;\n  onTogglePin: (id: UniqueId) => void;\n  subscribeToPinState: (callback: () => void) => () => void;\n};\n\n/**\n * Binds one card's identity to the provider's callbacks so {@link FloatingCardPanel}\n * can stay a plain presentational component.\n *\n * @remarks\n * Pin state lives in a mutable store rather than React state, so it is read\n * through `useSyncExternalStore` -- only the cards whose pin state changed\n * re-render.\n */\nfunction CardPanel({\n  actions,\n  getBounds,\n  icon,\n  id,\n  isPinned,\n  layout,\n  onAddRef,\n  onClose,\n  onFocus,\n  onMove,\n  onResize,\n  onTogglePin,\n  subscribeToPinState,\n}: CardPanelProps) {\n  const { title } = layout;\n\n  const pinned = useSyncExternalStore(\n    subscribeToPinState,\n    () => isPinned(id),\n    () => false,\n  );\n\n  const contentRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      onAddRef(id, element);\n    },\n    [id, onAddRef],\n  );\n\n  return (\n    <FloatingCardPanel\n      actions={\n        <CardHeaderActions\n          actions={actions}\n          id={id}\n          isPinned={pinned}\n          onClose={() => onClose(id)}\n          onTogglePin={() => onTogglePin(id)}\n        />\n      }\n      contentRef={contentRef}\n      getBounds={getBounds}\n      header={<CardHeaderStart icon={icon} title={title} />}\n      id={id}\n      isPinned={pinned}\n      // Ids are typically uuids, which read as noise to a screen reader, so an\n      // untitled card gets a generic name instead.\n      label={title ?? 'Floating card'}\n      layout={layout}\n      onFocus={() => onFocus(id)}\n      onMove={(position) => onMove(id, position)}\n      onResize={(dimensions, position) => onResize(id, dimensions, position)}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,SAAS,gBAAgB,EACvB,MACA,SACiE;AACjE,QACE,qBAAC;EAAI,WAAW,OAAO;aACpB,OAAO,oBAAC;GAAK,MAAK;aAAS;IAAY,GAAG,MAC1C,QACC,oBAAC;GAAI,WAAW,OAAO;aACrB,oBAAC;IAAI,WAAW,OAAO;cAAc;KAAY;IAC7C,GACJ;GACA;;;AAKV,SAAS,kBAAkB,EACzB,SACA,IACA,UACA,SACA,eAOE;AACF,QACE,8CACG,SAAS,KAAK,QAAQ,UAAU;AAC/B,MAAI,WAAW,UACb,QAEE,oBAAC,WAAuC,aAAY,cAAtC,GAAG,GAAG,WAAW,QAAkC;AAIrE,MAAI,WAAW,MACb,QACE,oBAAC;GACC,cAAW;GACX,gBAAc;GACd,OAAO,WAAW,WAAW;GAG7B,SAAS;GACT,MAAK;GACL,SAAQ;aAER,oBAAC,kBACC,oBAAC,YAAU,GACN;KAPF,GAAG,GAAG,OAAO,QAQX;AAIb,SACE,oBAAC;GACC,cAAY,OAAO;GAGnB,SAAS,OAAO;GAChB,MAAK;GACL,SAAQ;aAER,oBAAC,kBAAM,OAAO,OAAY;KALrB,GAAG,GAAG,UAAU,QAMd;GAEX,EACF,oBAAC;EAAO,cAAW;EAAQ,SAAS;EAAS,MAAK;EAAQ,SAAQ;YAChE,oBAAC,kBACC,oBAACA,WAAY,GACR;GACA,IACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CP,SAAgB,qBAAqB,EACnC,UACA,MACA,eACA,eACA,SAAS,YACT,aAC4B;CAC5B,MAAM,UAAU,OAA8B,KAAK;CACnD,MAAM,CAAC,OAAO,YAAY,SAA2C,EAAE,CAAC;CAExE,MAAM,YAAY,OAAsB,IAAI,IAAI,cAAc,CAAC;CAC/D,MAAM,kBAAkB,uBAAwB,IAAI,KAAK,CAAC;CAE1D,MAAM,EACJ,SACA,cACA,gBACA,UACA,YACA,iBACE,eAAe;CAEnB,MAAM,kBAAkB,kBAAkB;AACxC,OAAK,MAAM,YAAY,gBAAgB,QACrC,WAAU;IAEX,EAAE,CAAC;CAEN,MAAM,WAAW,aAAa,OAAiB,UAAU,QAAQ,IAAI,GAAG,EAAE,EAAE,CAAC;CAE7E,MAAM,sBAAsB,aAAa,aAAyB;AAChE,kBAAgB,QAAQ,IAAI,SAAS;AAErC,eAAa;AACX,mBAAgB,QAAQ,OAAO,SAAS;;IAEzC,EAAE,CAAC;CAEN,MAAM,gBAAgB,aACnB,OAAiB;EAChB,MAAM,OAAO,IAAI,IAAI,UAAU,QAAQ;AAEvC,MAAI,KAAK,IAAI,GAAG,CACd,MAAK,OAAO,GAAG;MAEf,MAAK,IAAI,GAAG;AAGd,YAAU,UAAU;AACpB,mBAAiB;IAEnB,CAAC,gBAAgB,CAClB;CAED,MAAM,YAAY,aACf,OAAiB;AAChB,YAAU,YAAY;AACpB,OAAI,CAAC,QAAQ,IACX,QAAO;GAGT,MAAM,OAAO,EAAE,GAAG,SAAS;AAC3B,UAAO,KAAK;AAEZ,UAAO;IACP;AAEF,MAAI,UAAU,QAAQ,IAAI,GAAG,EAAE;GAC7B,MAAM,OAAO,IAAI,IAAI,UAAU,QAAQ;AACvC,QAAK,OAAO,GAAG;AACf,aAAU,UAAU;AACpB,oBAAiB;;IAGrB,CAAC,gBAAgB,CAClB;CAED,MAAM,SAAS,aAAa,IAAc,QAA+B;AACvE,MAAI,CAAC,IACH;AAGF,YAAU,YACR,QAAQ,QAAQ,MAAM,UAAU;GAAE,GAAG;IAAU,KAAK;GAAK,CAC1D;IACA,EAAE,CAAC;CAEN,MAAM,YAAY,aACf,OAAiB;AAChB,iBAAe,GAAG;AAClB,YAAU,GAAG;IAEf,CAAC,WAAW,eAAe,CAC5B;CAED,MAAM,YAAY,kBAA0B;EAC1C,MAAM,UAAU,QAAQ;AAExB,MAAI,CAAC,QACH,QAAO;GAAE,KAAK;GAAG,MAAM;GAAG,OAAO;GAAG,QAAQ;GAAG;EAGjD,MAAM,OAAO,QAAQ,uBAAuB;AAE5C,MAAI,WAAW,WAGb,QAAO;GACL,KAAK,CAAC,KAAK;GACX,MAAM,CAAC,KAAK;GACZ,OAAO,OAAO,aAAa,KAAK;GAChC,QAAQ,OAAO,cAAc,KAAK;GACnC;AAGH,SAAO;GAAE,KAAK;GAAG,MAAM;GAAG,OAAO,KAAK;GAAO,QAAQ,KAAK;GAAQ;IACjE,CAAC,OAAO,CAAC;CAEZ,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACD,GACD;EAAC;EAAO;EAAW;EAAe;EAAU;EAAoB,CACjE;CAED,MAAM,gBAAgB,eACb;EAAE,UAAU;EAAc;EAAQ,GACzC,CAAC,cAAc,OAAO,CACvB;AAED,QACE,oBAAC,oBAAoB;EAAS,OAAO;YACnC,oBAAC,4BAA4B;GAAS,OAAO;aAC3C,qBAAC;IAAI,WAAW,KAAK,OAAO,cAAc,UAAU;IAAE,KAAK;eACxD,OAAO,QAAQ,QAAQ,CAAC,KAAK,CAAC,IAAI,YACjC,oBAAC;KACC,SAAS,oBAAoB,eAAe,GAAG;KACpC;KACX,MAAM,oBAAoB,MAAM,GAAG;KAC/B;KACM;KAEF;KACR,UAAU;KACV,SAAS;KACT,SAAS;KACT,QAAQ;KACR,UAAU;KACV,aAAa;KACQ;OARhB,GASL,CACF,EACD;KACG;IAC+B;GACV;;;;;;;;;;;AA6BnC,SAAS,UAAU,EACjB,SACA,WACA,MACA,IACA,UACA,QACA,UACA,SACA,SACA,QACA,UACA,aACA,uBACiB;CACjB,MAAM,EAAE,UAAU;CAElB,MAAM,SAAS,qBACb,2BACM,SAAS,GAAG,QACZ,MACP;CAED,MAAM,aAAa,aAChB,YAAmC;AAClC,WAAS,IAAI,QAAQ;IAEvB,CAAC,IAAI,SAAS,CACf;AAED,QACE,oBAAC;EACC,SACE,oBAAC;GACU;GACL;GACJ,UAAU;GACV,eAAe,QAAQ,GAAG;GAC1B,mBAAmB,YAAY,GAAG;IAClC;EAEQ;EACD;EACX,QAAQ,oBAAC;GAAsB;GAAa;IAAS;EACjD;EACJ,UAAU;EAGV,OAAO,SAAS;EACR;EACR,eAAe,QAAQ,GAAG;EAC1B,SAAS,aAAa,OAAO,IAAI,SAAS;EAC1C,WAAW,YAAY,aAAa,SAAS,IAAI,YAAY,SAAS;GACtE"}

package/dist/components/floating-card/styles.module.css

@@ -13,21 +13,36 @@
 @reference '@accelint/design-foundation/styles';
 
 @layer components.l3 {
-  .cardContent {
-    @apply h-full w-full;
-  }
-
+  /* The provider covers its container but stays transparent to pointer events,
+     so only the cards themselves are interactive and the application content
+     beneath keeps working normally. */
   .providerRoot {
     @apply pointer-events-none absolute inset-0;
   }
 
+  .panel {
+    @apply bg-surface-default rounded-large shadow-elevation-overlay-bold pointer-events-auto absolute flex flex-col overflow-hidden;
+  }
+
+  .header {
+    @apply p-xs gap-xs text-header-m @container/floating-card-header flex h-32 shrink-0 cursor-grab items-center;
+  }
+
+  /* A pinned card cannot be moved, so its header stops advertising a drag. */
+  .panel[data-pinned] .header {
+    @apply cursor-default;
+  }
+
   .headerSide {
     @apply gap-xs flex h-full items-center;
   }
 
-  /* Zero width + pointer-events-none lets the title visually overflow the
-     flex row without consuming drag-handle space or intercepting pointer
-     gestures meant for dockview's drag handle (.dv-void-container). */
+  .headerActions {
+    @apply gap-xs ml-auto flex h-full items-center;
+  }
+
+  /* Zero width + pointer-events-none lets the title visually overflow the flex
+     row without consuming space or swallowing the header's drag gesture. */
   .headerTitleContainer {
     @apply text-header-m pl-xs pointer-events-none h-full w-0;
   }
@@ -42,37 +57,76 @@
     @apply h-full truncate leading-24 @min-[1rem]/floating-card-header:w-[calc(100cqw-10rem)];
   }
 
-  .floatingCardProvider {
-    @apply absolute inset-0;
-    :global(.dv-dockview) {
-      --dv-group-view-background-color: transparent;
-      --dv-tabs-and-actions-container-background-color: var(
-        --bg-surface-default
-      );
-      --dv-floating-box-shadow: var(--shadow-elevation-overlay-bold);
-    }
-    :global(.dv-groupview) {
-      --dv-group-view-background-color: var(--bg-surface-default);
-      @apply pointer-events-auto;
-    }
-    :global(.dv-resize-container) {
-      @apply rounded-large pointer-events-auto;
-    }
-
-    :global(.dv-tabs-and-actions-container) {
-      --dv-tabs-and-actions-container-height: 32px;
-      @apply p-xs text-header-m @container/floating-card-header;
-    }
-    :global(.dv-scrollable) {
-      display: none;
-    }
-    :global(.dv-void-container) {
-      cursor: grab;
-    }
-
-    :global(.dv-resize-container[data-pinned]) :global(.dv-void-container) {
-      pointer-events: none;
-      cursor: default;
-    }
+  .content {
+    @apply min-h-0 flex-1;
+  }
+
+  /* Resize handles are invisible hit areas laid over the card's edges and
+     corners. Corners sit above edges so the diagonal cursors win where the two
+     overlap. */
+  .resize-n,
+  .resize-s,
+  .resize-e,
+  .resize-w,
+  .resize-ne,
+  .resize-nw,
+  .resize-se,
+  .resize-sw {
+    @apply absolute;
+  }
+
+  .resize-n,
+  .resize-s {
+    @apply h-xxs inset-x-0;
+    cursor: ns-resize;
+  }
+
+  .resize-e,
+  .resize-w {
+    @apply w-xxs inset-y-0;
+    cursor: ew-resize;
+  }
+
+  .resize-n {
+    @apply top-0;
+  }
+
+  .resize-s {
+    @apply bottom-0;
+  }
+
+  .resize-e {
+    @apply right-0;
+  }
+
+  .resize-w {
+    @apply left-0;
+  }
+
+  .resize-ne,
+  .resize-nw,
+  .resize-se,
+  .resize-sw {
+    @apply size-s z-1;
+  }
+
+  .resize-ne {
+    @apply top-0 right-0;
+    cursor: nesw-resize;
+  }
+
+  .resize-nw {
+    @apply top-0 left-0;
+    cursor: nwse-resize;
+  }
+
+  .resize-se {
+    @apply right-0 bottom-0;
+    cursor: nwse-resize;
+  }
+
+  .resize-sw {
+    @apply bottom-0 left-0;
+    cursor: nesw-resize;
   }
 }