@accelint/design-toolkit 9.13.0 → 10.1.0

package/dist/components/floating-card/hooks/use-drag.d.ts

@@ -0,0 +1,62 @@
+/*
+ * 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, Position } from "../types.js";
+
+//#region src/components/floating-card/hooks/use-drag.d.ts
+/**
+ * Clamps a position so the card stays fully inside its bounds.
+ *
+ * @param position - Desired top-left position.
+ * @param dimensions - Card size, used to keep the far edges inside.
+ * @param bounds - Box the card must remain within.
+ * @returns The clamped position.
+ */
+declare function constrainPosition(position: Position, dimensions: Dimensions, bounds: Bounds): Position;
+type UseDragProps = {
+  /** Whether dragging is disabled, e.g. because the card is pinned. */
+  disabled: boolean;
+  /** Current card position. */
+  position: Position;
+  /** Current card dimensions. */
+  dimensions: Dimensions;
+  /** Reads the bounding box once when the gesture starts. */
+  getBounds: () => Bounds;
+  /** Called with each new position during the drag. */
+  onPositionChange: (position: Position) => void;
+  /** Called once when the drag threshold is first crossed. */
+  onDragStart?: () => void;
+};
+/**
+ * Drags a card by a pointer gesture, keeping it inside its container.
+ *
+ * @param props - {@link UseDragProps}
+ * @returns A `handleStart` handler to attach to the card's drag surface.
+ *
+ * @remarks
+ * A drag only begins once the pointer moves past {@link DRAG_THRESHOLD}, so a
+ * click on the header still reads as a click. Bounds are read once per gesture
+ * rather than per move to keep the drag off the layout path.
+ */
+declare function useDrag({
+  disabled,
+  position,
+  dimensions,
+  getBounds,
+  onPositionChange,
+  onDragStart
+}: UseDragProps): {
+  handleStart: (event: PointerEvent, payload: void) => void;
+};
+//#endregion
+export { UseDragProps, constrainPosition, useDrag };
+//# sourceMappingURL=use-drag.d.ts.map

package/dist/components/floating-card/hooks/use-drag.js

@@ -0,0 +1,100 @@
+/*
+ * 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 { DRAG_THRESHOLD } from "../constants.js";
+import { useMouseInteraction } from "./use-mouse-interaction.js";
+import { useRef } from "react";
+import { clamp } from "radashi";
+
+//#region src/components/floating-card/hooks/use-drag.ts
+/** Elements that own their own pointer behavior and must never begin a drag. */
+const INTERACTIVE_SELECTORS = [
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"a",
+	"[role=\"button\"]",
+	"[role=\"link\"]",
+	"[contenteditable]"
+].join(", ");
+function isInteractiveElement(target) {
+	return target instanceof Element && target.closest(INTERACTIVE_SELECTORS) ? true : false;
+}
+/**
+* Clamps a position so the card stays fully inside its bounds.
+*
+* @param position - Desired top-left position.
+* @param dimensions - Card size, used to keep the far edges inside.
+* @param bounds - Box the card must remain within.
+* @returns The clamped position.
+*/
+function constrainPosition(position, dimensions, bounds) {
+	const maxX = Math.max(bounds.left, bounds.right - dimensions.width);
+	const maxY = Math.max(bounds.top, bounds.bottom - dimensions.height);
+	return {
+		x: clamp(position.x, bounds.left, maxX),
+		y: clamp(position.y, bounds.top, maxY)
+	};
+}
+/**
+* Drags a card by a pointer gesture, keeping it inside its container.
+*
+* @param props - {@link UseDragProps}
+* @returns A `handleStart` handler to attach to the card's drag surface.
+*
+* @remarks
+* A drag only begins once the pointer moves past {@link DRAG_THRESHOLD}, so a
+* click on the header still reads as a click. Bounds are read once per gesture
+* rather than per move to keep the drag off the layout path.
+*/
+function useDrag({ disabled, position, dimensions, getBounds, onPositionChange, onDragStart }) {
+	const latest = useRef({
+		position,
+		dimensions,
+		disabled
+	});
+	latest.current = {
+		position,
+		dimensions,
+		disabled
+	};
+	const { handleStart } = useMouseInteraction({
+		shouldStart: (event) => !latest.current.disabled && event.button === 0 && !isInteractiveElement(event.target),
+		onStart: (event) => ({
+			isDragging: false,
+			pointerX: event.clientX,
+			pointerY: event.clientY,
+			origin: latest.current.position,
+			bounds: getBounds()
+		}),
+		onMove: (event, session) => {
+			const deltaX = event.clientX - session.pointerX;
+			const deltaY = event.clientY - session.pointerY;
+			if (!session.isDragging && Math.hypot(deltaX, deltaY) < DRAG_THRESHOLD) return;
+			if (!session.isDragging) {
+				session.isDragging = true;
+				onDragStart?.();
+			}
+			onPositionChange(constrainPosition({
+				x: session.origin.x + deltaX,
+				y: session.origin.y + deltaY
+			}, latest.current.dimensions, session.bounds));
+		}
+	});
+	return { handleStart };
+}
+
+//#endregion
+export { constrainPosition, useDrag };
+//# sourceMappingURL=use-drag.js.map

package/dist/components/floating-card/hooks/use-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-drag.js","names":[],"sources":["../../../../src/components/floating-card/hooks/use-drag.ts"],"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 { clamp } from 'radashi';\nimport { useRef } from 'react';\nimport { DRAG_THRESHOLD } from '../constants';\nimport { useMouseInteraction } from './use-mouse-interaction';\nimport type { Bounds, Dimensions, Position } from '../types';\n\n/** Elements that own their own pointer behavior and must never begin a drag. */\nconst INTERACTIVE_SELECTORS = [\n  'button',\n  'input',\n  'select',\n  'textarea',\n  'a',\n  '[role=\"button\"]',\n  '[role=\"link\"]',\n  '[contenteditable]',\n].join(', ');\n\nfunction isInteractiveElement(target: EventTarget | null): boolean {\n  return target instanceof Element && target.closest(INTERACTIVE_SELECTORS)\n    ? true\n    : false;\n}\n\n/**\n * Clamps a position so the card stays fully inside its bounds.\n *\n * @param position - Desired top-left position.\n * @param dimensions - Card size, used to keep the far edges inside.\n * @param bounds - Box the card must remain within.\n * @returns The clamped position.\n */\nexport function constrainPosition(\n  position: Position,\n  dimensions: Dimensions,\n  bounds: Bounds,\n): Position {\n  // A card wider than its bounds has no valid range, so the far edge is pinned\n  // to the near one and the card rests against the top-left corner.\n  const maxX = Math.max(bounds.left, bounds.right - dimensions.width);\n  const maxY = Math.max(bounds.top, bounds.bottom - dimensions.height);\n\n  return {\n    x: clamp(position.x, bounds.left, maxX),\n    y: clamp(position.y, bounds.top, maxY),\n  };\n}\n\ntype DragSession = {\n  isDragging: boolean;\n  pointerX: number;\n  pointerY: number;\n  origin: Position;\n  bounds: Bounds;\n};\n\nexport type UseDragProps = {\n  /** Whether dragging is disabled, e.g. because the card is pinned. */\n  disabled: boolean;\n  /** Current card position. */\n  position: Position;\n  /** Current card dimensions. */\n  dimensions: Dimensions;\n  /** Reads the bounding box once when the gesture starts. */\n  getBounds: () => Bounds;\n  /** Called with each new position during the drag. */\n  onPositionChange: (position: Position) => void;\n  /** Called once when the drag threshold is first crossed. */\n  onDragStart?: () => void;\n};\n\n/**\n * Drags a card by a pointer gesture, keeping it inside its container.\n *\n * @param props - {@link UseDragProps}\n * @returns A `handleStart` handler to attach to the card's drag surface.\n *\n * @remarks\n * A drag only begins once the pointer moves past {@link DRAG_THRESHOLD}, so a\n * click on the header still reads as a click. Bounds are read once per gesture\n * rather than per move to keep the drag off the layout path.\n */\nexport function useDrag({\n  disabled,\n  position,\n  dimensions,\n  getBounds,\n  onPositionChange,\n  onDragStart,\n}: UseDragProps) {\n  // Read inside the session so a drag in progress always sees current values.\n  const latest = useRef({ position, dimensions, disabled });\n  latest.current = { position, dimensions, disabled };\n\n  const { handleStart } = useMouseInteraction<DragSession>({\n    shouldStart: (event) =>\n      !latest.current.disabled &&\n      event.button === 0 &&\n      !isInteractiveElement(event.target),\n    onStart: (event) => ({\n      isDragging: false,\n      pointerX: event.clientX,\n      pointerY: event.clientY,\n      origin: latest.current.position,\n      bounds: getBounds(),\n    }),\n    onMove: (event, session) => {\n      const deltaX = event.clientX - session.pointerX;\n      const deltaY = event.clientY - session.pointerY;\n\n      if (!session.isDragging && Math.hypot(deltaX, deltaY) < DRAG_THRESHOLD) {\n        return;\n      }\n\n      if (!session.isDragging) {\n        session.isDragging = true;\n        onDragStart?.();\n      }\n\n      onPositionChange(\n        constrainPosition(\n          {\n            x: session.origin.x + deltaX,\n            y: session.origin.y + deltaY,\n          },\n          latest.current.dimensions,\n          session.bounds,\n        ),\n      );\n    },\n  });\n\n  return { handleStart };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,wBAAwB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC,KAAK,KAAK;AAEZ,SAAS,qBAAqB,QAAqC;AACjE,QAAO,kBAAkB,WAAW,OAAO,QAAQ,sBAAsB,GACrE,OACA;;;;;;;;;;AAWN,SAAgB,kBACd,UACA,YACA,QACU;CAGV,MAAM,OAAO,KAAK,IAAI,OAAO,MAAM,OAAO,QAAQ,WAAW,MAAM;CACnE,MAAM,OAAO,KAAK,IAAI,OAAO,KAAK,OAAO,SAAS,WAAW,OAAO;AAEpE,QAAO;EACL,GAAG,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK;EACvC,GAAG,MAAM,SAAS,GAAG,OAAO,KAAK,KAAK;EACvC;;;;;;;;;;;;;AAqCH,SAAgB,QAAQ,EACtB,UACA,UACA,YACA,WACA,kBACA,eACe;CAEf,MAAM,SAAS,OAAO;EAAE;EAAU;EAAY;EAAU,CAAC;AACzD,QAAO,UAAU;EAAE;EAAU;EAAY;EAAU;CAEnD,MAAM,EAAE,gBAAgB,oBAAiC;EACvD,cAAc,UACZ,CAAC,OAAO,QAAQ,YAChB,MAAM,WAAW,KACjB,CAAC,qBAAqB,MAAM,OAAO;EACrC,UAAU,WAAW;GACnB,YAAY;GACZ,UAAU,MAAM;GAChB,UAAU,MAAM;GAChB,QAAQ,OAAO,QAAQ;GACvB,QAAQ,WAAW;GACpB;EACD,SAAS,OAAO,YAAY;GAC1B,MAAM,SAAS,MAAM,UAAU,QAAQ;GACvC,MAAM,SAAS,MAAM,UAAU,QAAQ;AAEvC,OAAI,CAAC,QAAQ,cAAc,KAAK,MAAM,QAAQ,OAAO,GAAG,eACtD;AAGF,OAAI,CAAC,QAAQ,YAAY;AACvB,YAAQ,aAAa;AACrB,mBAAe;;AAGjB,oBACE,kBACE;IACE,GAAG,QAAQ,OAAO,IAAI;IACtB,GAAG,QAAQ,OAAO,IAAI;IACvB,EACD,OAAO,QAAQ,YACf,QAAQ,OACT,CACF;;EAEJ,CAAC;AAEF,QAAO,EAAE,aAAa"}

package/dist/components/floating-card/hooks/use-mouse-interaction.d.ts

@@ -0,0 +1,58 @@
+//#region src/components/floating-card/hooks/use-mouse-interaction.d.ts
+/**
+ * Configuration for a pointer-driven interaction session.
+ *
+ * @template Session - Mutable state carried through a single interaction.
+ */
+type MouseInteractionConfig<Session, Payload = void> = {
+  /**
+   * Called on pointerdown. Return the session state, or null to abort.
+   *
+   * @remarks `payload` carries whatever the caller passed to `handleStart`,
+   * which lets one element's handler describe what it started -- a resize
+   * handle naming its direction, for instance.
+   */
+  onStart: (event: PointerEvent, payload: Payload) => Session | null;
+  /**
+   * Called on each pointermove while a session is active.
+   *
+   * @remarks The session object persists across the whole gesture and may be
+   * mutated in place to carry state between moves.
+   */
+  onMove: (event: PointerEvent, session: Session) => void;
+  /** Optional. Called on pointerup or pointercancel, ending the session. */
+  onEnd?: (event: PointerEvent, session: Session) => void;
+  /** Optional guard run before onStart; return false to ignore the event. */
+  shouldStart?: (event: PointerEvent) => boolean;
+};
+/**
+ * Runs a pointer-driven interaction (drag, resize) against document-level
+ * listeners so the gesture keeps tracking when the pointer leaves the element.
+ *
+ * @param config - Session lifecycle callbacks.
+ * @returns A `handleStart` handler to attach to the element that begins the gesture.
+ *
+ * @remarks
+ * Listeners are registered only for the duration of a session and torn down
+ * with an AbortController, which also covers unmounting mid-gesture.
+ *
+ * @example
+ * ```ts
+ * const { handleStart } = useMouseInteraction({
+ *   onStart: (event) => ({ startX: event.clientX }),
+ *   onMove: (event, session) => move(event.clientX - session.startX),
+ *   onEnd: () => commit(),
+ * });
+ * ```
+ */
+declare function useMouseInteraction<Session, Payload = void>({
+  onStart,
+  onMove,
+  onEnd,
+  shouldStart
+}: MouseInteractionConfig<Session, Payload>): {
+  handleStart: (event: PointerEvent, payload: Payload) => void;
+};
+//#endregion
+export { MouseInteractionConfig, useMouseInteraction };
+//# sourceMappingURL=use-mouse-interaction.d.ts.map

package/dist/components/floating-card/hooks/use-mouse-interaction.js

@@ -0,0 +1,91 @@
+/*
+ * 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 { useCallback, useEffect, useRef } from "react";
+
+//#region src/components/floating-card/hooks/use-mouse-interaction.ts
+/**
+* Runs a pointer-driven interaction (drag, resize) against document-level
+* listeners so the gesture keeps tracking when the pointer leaves the element.
+*
+* @param config - Session lifecycle callbacks.
+* @returns A `handleStart` handler to attach to the element that begins the gesture.
+*
+* @remarks
+* Listeners are registered only for the duration of a session and torn down
+* with an AbortController, which also covers unmounting mid-gesture.
+*
+* @example
+* ```ts
+* const { handleStart } = useMouseInteraction({
+*   onStart: (event) => ({ startX: event.clientX }),
+*   onMove: (event, session) => move(event.clientX - session.startX),
+*   onEnd: () => commit(),
+* });
+* ```
+*/
+function useMouseInteraction({ onStart, onMove, onEnd, shouldStart }) {
+	const sessionRef = useRef(null);
+	const abortRef = useRef(null);
+	const handlers = useRef({
+		onStart,
+		onMove,
+		onEnd,
+		shouldStart
+	});
+	handlers.current = {
+		onStart,
+		onMove,
+		onEnd,
+		shouldStart
+	};
+	const endSession = useCallback(() => {
+		sessionRef.current = null;
+		abortRef.current?.abort();
+		abortRef.current = null;
+	}, []);
+	const handleStart = useCallback((event, payload) => {
+		if (handlers.current.shouldStart?.(event) === false) return;
+		const session = handlers.current.onStart(event, payload);
+		if (session === null) return;
+		abortRef.current?.abort();
+		sessionRef.current = session;
+		event.preventDefault();
+		const controller = new AbortController();
+		abortRef.current = controller;
+		const handleMove = (moveEvent) => {
+			if (sessionRef.current === null) return;
+			handlers.current.onMove(moveEvent, sessionRef.current);
+		};
+		const handleEnd = (endEvent) => {
+			if (sessionRef.current === null) return;
+			handlers.current.onEnd?.(endEvent, sessionRef.current);
+			endSession();
+		};
+		const options = { signal: controller.signal };
+		document.addEventListener("pointermove", handleMove, options);
+		document.addEventListener("pointerup", handleEnd, options);
+		document.addEventListener("pointercancel", handleEnd, options);
+	}, [endSession]);
+	useEffect(() => {
+		return () => {
+			abortRef.current?.abort();
+			abortRef.current = null;
+		};
+	}, []);
+	return { handleStart };
+}
+
+//#endregion
+export { useMouseInteraction };
+//# sourceMappingURL=use-mouse-interaction.js.map

package/dist/components/floating-card/hooks/use-mouse-interaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mouse-interaction.js","names":[],"sources":["../../../../src/components/floating-card/hooks/use-mouse-interaction.ts"],"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, useEffect, useRef } from 'react';\n\n/**\n * Configuration for a pointer-driven interaction session.\n *\n * @template Session - Mutable state carried through a single interaction.\n */\nexport type MouseInteractionConfig<Session, Payload = void> = {\n  /**\n   * Called on pointerdown. Return the session state, or null to abort.\n   *\n   * @remarks `payload` carries whatever the caller passed to `handleStart`,\n   * which lets one element's handler describe what it started -- a resize\n   * handle naming its direction, for instance.\n   */\n  onStart: (event: PointerEvent, payload: Payload) => Session | null;\n  /**\n   * Called on each pointermove while a session is active.\n   *\n   * @remarks The session object persists across the whole gesture and may be\n   * mutated in place to carry state between moves.\n   */\n  onMove: (event: PointerEvent, session: Session) => void;\n  /** Optional. Called on pointerup or pointercancel, ending the session. */\n  onEnd?: (event: PointerEvent, session: Session) => void;\n  /** Optional guard run before onStart; return false to ignore the event. */\n  shouldStart?: (event: PointerEvent) => boolean;\n};\n\n/**\n * Runs a pointer-driven interaction (drag, resize) against document-level\n * listeners so the gesture keeps tracking when the pointer leaves the element.\n *\n * @param config - Session lifecycle callbacks.\n * @returns A `handleStart` handler to attach to the element that begins the gesture.\n *\n * @remarks\n * Listeners are registered only for the duration of a session and torn down\n * with an AbortController, which also covers unmounting mid-gesture.\n *\n * @example\n * ```ts\n * const { handleStart } = useMouseInteraction({\n *   onStart: (event) => ({ startX: event.clientX }),\n *   onMove: (event, session) => move(event.clientX - session.startX),\n *   onEnd: () => commit(),\n * });\n * ```\n */\nexport function useMouseInteraction<Session, Payload = void>({\n  onStart,\n  onMove,\n  onEnd,\n  shouldStart,\n}: MouseInteractionConfig<Session, Payload>) {\n  const sessionRef = useRef<Session | null>(null);\n  const abortRef = useRef<AbortController | null>(null);\n\n  // Callbacks are read from refs so a session started with one render's\n  // handlers keeps working after a re-render without re-binding listeners.\n  const handlers = useRef({ onStart, onMove, onEnd, shouldStart });\n  handlers.current = { onStart, onMove, onEnd, shouldStart };\n\n  const endSession = useCallback(() => {\n    sessionRef.current = null;\n    abortRef.current?.abort();\n    abortRef.current = null;\n  }, []);\n\n  const handleStart = useCallback(\n    (event: PointerEvent, payload: Payload) => {\n      if (handlers.current.shouldStart?.(event) === false) {\n        return;\n      }\n\n      const session = handlers.current.onStart(event, payload);\n\n      if (session === null) {\n        return;\n      }\n\n      // A second press before the first releases -- a lost pointerup, or a\n      // resize handle pressed mid-drag -- would otherwise strand the previous\n      // controller's listeners, leaving two sessions driving the same card.\n      abortRef.current?.abort();\n\n      sessionRef.current = session;\n      event.preventDefault();\n\n      const controller = new AbortController();\n      abortRef.current = controller;\n\n      const handleMove = (moveEvent: PointerEvent) => {\n        if (sessionRef.current === null) {\n          return;\n        }\n\n        handlers.current.onMove(moveEvent, sessionRef.current);\n      };\n\n      const handleEnd = (endEvent: PointerEvent) => {\n        if (sessionRef.current === null) {\n          return;\n        }\n\n        handlers.current.onEnd?.(endEvent, sessionRef.current);\n        endSession();\n      };\n\n      const options = { signal: controller.signal };\n\n      document.addEventListener('pointermove', handleMove, options);\n      document.addEventListener('pointerup', handleEnd, options);\n      document.addEventListener('pointercancel', handleEnd, options);\n    },\n    [endSession],\n  );\n\n  useEffect(() => {\n    return () => {\n      abortRef.current?.abort();\n      abortRef.current = null;\n    };\n  }, []);\n\n  return { handleStart };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,SAAgB,oBAA6C,EAC3D,SACA,QACA,OACA,eAC2C;CAC3C,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,WAAW,OAA+B,KAAK;CAIrD,MAAM,WAAW,OAAO;EAAE;EAAS;EAAQ;EAAO;EAAa,CAAC;AAChE,UAAS,UAAU;EAAE;EAAS;EAAQ;EAAO;EAAa;CAE1D,MAAM,aAAa,kBAAkB;AACnC,aAAW,UAAU;AACrB,WAAS,SAAS,OAAO;AACzB,WAAS,UAAU;IAClB,EAAE,CAAC;CAEN,MAAM,cAAc,aACjB,OAAqB,YAAqB;AACzC,MAAI,SAAS,QAAQ,cAAc,MAAM,KAAK,MAC5C;EAGF,MAAM,UAAU,SAAS,QAAQ,QAAQ,OAAO,QAAQ;AAExD,MAAI,YAAY,KACd;AAMF,WAAS,SAAS,OAAO;AAEzB,aAAW,UAAU;AACrB,QAAM,gBAAgB;EAEtB,MAAM,aAAa,IAAI,iBAAiB;AACxC,WAAS,UAAU;EAEnB,MAAM,cAAc,cAA4B;AAC9C,OAAI,WAAW,YAAY,KACzB;AAGF,YAAS,QAAQ,OAAO,WAAW,WAAW,QAAQ;;EAGxD,MAAM,aAAa,aAA2B;AAC5C,OAAI,WAAW,YAAY,KACzB;AAGF,YAAS,QAAQ,QAAQ,UAAU,WAAW,QAAQ;AACtD,eAAY;;EAGd,MAAM,UAAU,EAAE,QAAQ,WAAW,QAAQ;AAE7C,WAAS,iBAAiB,eAAe,YAAY,QAAQ;AAC7D,WAAS,iBAAiB,aAAa,WAAW,QAAQ;AAC1D,WAAS,iBAAiB,iBAAiB,WAAW,QAAQ;IAEhE,CAAC,WAAW,CACb;AAED,iBAAgB;AACd,eAAa;AACX,YAAS,SAAS,OAAO;AACzB,YAAS,UAAU;;IAEpB,EAAE,CAAC;AAEN,QAAO,EAAE,aAAa"}

package/dist/components/floating-card/hooks/use-resize.d.ts

@@ -0,0 +1,56 @@
+/*
+ * 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, Position, ResizeHandle } from "../types.js";
+
+//#region src/components/floating-card/hooks/use-resize.d.ts
+type UseResizeProps = {
+  /** Whether resizing is disabled, e.g. because the card is pinned. */
+  disabled: boolean;
+  /** Current card position. */
+  position: Position;
+  /** Current card dimensions. */
+  dimensions: Dimensions;
+  /** Reads the bounding box once when the gesture starts. */
+  getBounds: () => Bounds;
+  /** Called with the new geometry during the resize. */
+  onResize: (dimensions: Dimensions, position: Position) => void;
+  /** Called once when the gesture begins. */
+  onResizeStart?: () => void;
+};
+/**
+ * Resizes a card from any of its eight edges and corners.
+ *
+ * @param props - {@link UseResizeProps}
+ * @returns `getHandleProps`, which builds the pointer handler for one handle.
+ *
+ * @remarks
+ * North and west handles move the card's origin as well as its size so the
+ * opposite edge stays put. Every result is clamped to {@link MIN_DIMENSIONS}
+ * and to the container, so a card can never be resized outside its bounds or
+ * collapsed to nothing.
+ */
+declare function useResize({
+  disabled,
+  position,
+  dimensions,
+  getBounds,
+  onResize,
+  onResizeStart
+}: UseResizeProps): {
+  getHandleProps: (handle: ResizeHandle) => {
+    onPointerDown: (event: React.PointerEvent) => void;
+  };
+};
+//#endregion
+export { UseResizeProps, useResize };
+//# sourceMappingURL=use-resize.d.ts.map

package/dist/components/floating-card/hooks/use-resize.js

@@ -0,0 +1,98 @@
+/*
+ * 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 { MIN_DIMENSIONS } from "../constants.js";
+import { useMouseInteraction } from "./use-mouse-interaction.js";
+import { useCallback, useRef } from "react";
+import { clamp } from "radashi";
+
+//#region src/components/floating-card/hooks/use-resize.ts
+/**
+* Resizes a card from any of its eight edges and corners.
+*
+* @param props - {@link UseResizeProps}
+* @returns `getHandleProps`, which builds the pointer handler for one handle.
+*
+* @remarks
+* North and west handles move the card's origin as well as its size so the
+* opposite edge stays put. Every result is clamped to {@link MIN_DIMENSIONS}
+* and to the container, so a card can never be resized outside its bounds or
+* collapsed to nothing.
+*/
+function useResize({ disabled, position, dimensions, getBounds, onResize, onResizeStart }) {
+	const latest = useRef({
+		position,
+		dimensions,
+		disabled
+	});
+	latest.current = {
+		position,
+		dimensions,
+		disabled
+	};
+	const { handleStart } = useMouseInteraction({
+		shouldStart: (event) => !latest.current.disabled && event.button === 0,
+		onStart: (event, handle) => {
+			onResizeStart?.();
+			return {
+				pointerX: event.clientX,
+				pointerY: event.clientY,
+				origin: latest.current.position,
+				size: latest.current.dimensions,
+				handle,
+				bounds: getBounds()
+			};
+		},
+		onMove: (event, session) => {
+			const deltaX = event.clientX - session.pointerX;
+			const deltaY = event.clientY - session.pointerY;
+			const { handle, origin, size, bounds } = session;
+			let { x, y } = origin;
+			let { width, height } = size;
+			if (handle.includes("e")) {
+				const limit = Math.max(bounds.right - origin.x, size.width);
+				width = Math.min(size.width + deltaX, limit);
+			}
+			if (handle.includes("s")) {
+				const limit = Math.max(bounds.bottom - origin.y, size.height);
+				height = Math.min(size.height + deltaY, limit);
+			}
+			if (handle.includes("w")) {
+				const right = origin.x + size.width;
+				const limit = Math.min(bounds.left, origin.x);
+				x = clamp(origin.x + deltaX, limit, right - MIN_DIMENSIONS.width);
+				width = right - x;
+			}
+			if (handle.includes("n")) {
+				const bottom = origin.y + size.height;
+				const limit = Math.min(bounds.top, origin.y);
+				y = clamp(origin.y + deltaY, limit, bottom - MIN_DIMENSIONS.height);
+				height = bottom - y;
+			}
+			onResize({
+				width: Math.max(width, MIN_DIMENSIONS.width),
+				height: Math.max(height, MIN_DIMENSIONS.height)
+			}, {
+				x,
+				y
+			});
+		}
+	});
+	return { getHandleProps: useCallback((handle) => ({ onPointerDown: (event) => {
+		handleStart(event.nativeEvent, handle);
+	} }), [handleStart]) };
+}
+
+//#endregion
+export { useResize };
+//# sourceMappingURL=use-resize.js.map

package/dist/components/floating-card/hooks/use-resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resize.js","names":[],"sources":["../../../../src/components/floating-card/hooks/use-resize.ts"],"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 { clamp } from 'radashi';\nimport { useCallback, useRef } from 'react';\nimport { MIN_DIMENSIONS } from '../constants';\nimport { useMouseInteraction } from './use-mouse-interaction';\nimport type { Bounds, Dimensions, Position, ResizeHandle } from '../types';\n\ntype ResizeSession = {\n  pointerX: number;\n  pointerY: number;\n  origin: Position;\n  size: Dimensions;\n  handle: ResizeHandle;\n  bounds: Bounds;\n};\n\nexport type UseResizeProps = {\n  /** Whether resizing is disabled, e.g. because the card is pinned. */\n  disabled: boolean;\n  /** Current card position. */\n  position: Position;\n  /** Current card dimensions. */\n  dimensions: Dimensions;\n  /** Reads the bounding box once when the gesture starts. */\n  getBounds: () => Bounds;\n  /** Called with the new geometry during the resize. */\n  onResize: (dimensions: Dimensions, position: Position) => void;\n  /** Called once when the gesture begins. */\n  onResizeStart?: () => void;\n};\n\n/**\n * Resizes a card from any of its eight edges and corners.\n *\n * @param props - {@link UseResizeProps}\n * @returns `getHandleProps`, which builds the pointer handler for one handle.\n *\n * @remarks\n * North and west handles move the card's origin as well as its size so the\n * opposite edge stays put. Every result is clamped to {@link MIN_DIMENSIONS}\n * and to the container, so a card can never be resized outside its bounds or\n * collapsed to nothing.\n */\nexport function useResize({\n  disabled,\n  position,\n  dimensions,\n  getBounds,\n  onResize,\n  onResizeStart,\n}: UseResizeProps) {\n  const latest = useRef({ position, dimensions, disabled });\n  latest.current = { position, dimensions, disabled };\n\n  const { handleStart } = useMouseInteraction<ResizeSession, ResizeHandle>({\n    shouldStart: (event) => !latest.current.disabled && event.button === 0,\n    onStart: (event, handle) => {\n      onResizeStart?.();\n\n      return {\n        pointerX: event.clientX,\n        pointerY: event.clientY,\n        origin: latest.current.position,\n        size: latest.current.dimensions,\n        handle,\n        bounds: getBounds(),\n      };\n    },\n    onMove: (event, session) => {\n      const deltaX = event.clientX - session.pointerX;\n      const deltaY = event.clientY - session.pointerY;\n      const { handle, origin, size, bounds } = session;\n\n      let { x, y } = origin;\n      let { width, height } = size;\n\n      // A card that already extends past its bounds must still be resizable, so\n      // the limit never falls below the size the gesture started at -- otherwise\n      // the first pointermove would snap it inward.\n      if (handle.includes('e')) {\n        const limit = Math.max(bounds.right - origin.x, size.width);\n\n        width = Math.min(size.width + deltaX, limit);\n      }\n\n      if (handle.includes('s')) {\n        const limit = Math.max(bounds.bottom - origin.y, size.height);\n\n        height = Math.min(size.height + deltaY, limit);\n      }\n\n      if (handle.includes('w')) {\n        // Clamping x first keeps the right edge fixed while honouring bounds.\n        const right = origin.x + size.width;\n        const limit = Math.min(bounds.left, origin.x);\n\n        x = clamp(origin.x + deltaX, limit, right - MIN_DIMENSIONS.width);\n        width = right - x;\n      }\n\n      if (handle.includes('n')) {\n        const bottom = origin.y + size.height;\n        const limit = Math.min(bounds.top, origin.y);\n\n        y = clamp(origin.y + deltaY, limit, bottom - MIN_DIMENSIONS.height);\n        height = bottom - y;\n      }\n\n      onResize(\n        {\n          width: Math.max(width, MIN_DIMENSIONS.width),\n          height: Math.max(height, MIN_DIMENSIONS.height),\n        },\n        { x, y },\n      );\n    },\n  });\n\n  const getHandleProps = useCallback(\n    (handle: ResizeHandle) => ({\n      onPointerDown: (event: React.PointerEvent) => {\n        handleStart(event.nativeEvent, handle);\n      },\n    }),\n    [handleStart],\n  );\n\n  return { getHandleProps };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,SAAgB,UAAU,EACxB,UACA,UACA,YACA,WACA,UACA,iBACiB;CACjB,MAAM,SAAS,OAAO;EAAE;EAAU;EAAY;EAAU,CAAC;AACzD,QAAO,UAAU;EAAE;EAAU;EAAY;EAAU;CAEnD,MAAM,EAAE,gBAAgB,oBAAiD;EACvE,cAAc,UAAU,CAAC,OAAO,QAAQ,YAAY,MAAM,WAAW;EACrE,UAAU,OAAO,WAAW;AAC1B,oBAAiB;AAEjB,UAAO;IACL,UAAU,MAAM;IAChB,UAAU,MAAM;IAChB,QAAQ,OAAO,QAAQ;IACvB,MAAM,OAAO,QAAQ;IACrB;IACA,QAAQ,WAAW;IACpB;;EAEH,SAAS,OAAO,YAAY;GAC1B,MAAM,SAAS,MAAM,UAAU,QAAQ;GACvC,MAAM,SAAS,MAAM,UAAU,QAAQ;GACvC,MAAM,EAAE,QAAQ,QAAQ,MAAM,WAAW;GAEzC,IAAI,EAAE,GAAG,MAAM;GACf,IAAI,EAAE,OAAO,WAAW;AAKxB,OAAI,OAAO,SAAS,IAAI,EAAE;IACxB,MAAM,QAAQ,KAAK,IAAI,OAAO,QAAQ,OAAO,GAAG,KAAK,MAAM;AAE3D,YAAQ,KAAK,IAAI,KAAK,QAAQ,QAAQ,MAAM;;AAG9C,OAAI,OAAO,SAAS,IAAI,EAAE;IACxB,MAAM,QAAQ,KAAK,IAAI,OAAO,SAAS,OAAO,GAAG,KAAK,OAAO;AAE7D,aAAS,KAAK,IAAI,KAAK,SAAS,QAAQ,MAAM;;AAGhD,OAAI,OAAO,SAAS,IAAI,EAAE;IAExB,MAAM,QAAQ,OAAO,IAAI,KAAK;IAC9B,MAAM,QAAQ,KAAK,IAAI,OAAO,MAAM,OAAO,EAAE;AAE7C,QAAI,MAAM,OAAO,IAAI,QAAQ,OAAO,QAAQ,eAAe,MAAM;AACjE,YAAQ,QAAQ;;AAGlB,OAAI,OAAO,SAAS,IAAI,EAAE;IACxB,MAAM,SAAS,OAAO,IAAI,KAAK;IAC/B,MAAM,QAAQ,KAAK,IAAI,OAAO,KAAK,OAAO,EAAE;AAE5C,QAAI,MAAM,OAAO,IAAI,QAAQ,OAAO,SAAS,eAAe,OAAO;AACnE,aAAS,SAAS;;AAGpB,YACE;IACE,OAAO,KAAK,IAAI,OAAO,eAAe,MAAM;IAC5C,QAAQ,KAAK,IAAI,QAAQ,eAAe,OAAO;IAChD,EACD;IAAE;IAAG;IAAG,CACT;;EAEJ,CAAC;AAWF,QAAO,EAAE,gBATc,aACpB,YAA0B,EACzB,gBAAgB,UAA8B;AAC5C,cAAY,MAAM,aAAa,OAAO;IAEzC,GACD,CAAC,YAAY,CACd,EAEwB"}

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

@@ -11,7 +11,7 @@
  */
 
 import { FloatingCardProps } from "./types.js";
-import * as react20 from "react";
+import * as react16 from "react";
 import { PropsWithChildren } from "react";
 
 //#region src/components/floating-card/index.d.ts
@@ -33,6 +33,10 @@ import { PropsWithChildren } from "react";
  * @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
@@ -64,7 +68,7 @@ declare function FloatingCard({
   isOpen,
   initialDimensions,
   initialPosition
-}: PropsWithChildren<FloatingCardProps>): react20.ReactPortal | null;
+}: PropsWithChildren<FloatingCardProps>): react16.ReactPortal | null;
 //#endregion
 export { FloatingCard };
 //# sourceMappingURL=index.d.ts.map

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