@accelint/design-toolkit 9.13.0 → 10.0.0

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

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

@@ -12,10 +12,35 @@
 
 import { MaybeFactory } from "./utils.js";
 import { PropsWithChildren, ReactNode } from "react";
-import { DockviewApi } from "dockview-react";
 import { UniqueId } from "@accelint/core/utility/uuid";
 
 //#region src/components/floating-card/types.d.ts
+/** A point in the provider's coordinate space. */
+type Position = {
+  x: number;
+  y: number;
+};
+/** A card's rendered size. */
+type Dimensions = {
+  width: number;
+  height: number;
+};
+/** The box a card is kept inside while dragging and resizing. */
+type Bounds = {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+};
+/** Edge or corner a resize gesture pulls from. */
+type ResizeHandle = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+/** Geometry, title, and stacking for one card, tracked by the provider. */
+type FloatingCardLayout = {
+  title: string | undefined;
+  position: Position;
+  dimensions: Dimensions;
+  zIndex: number;
+};
 /**
  * Context value providing floating card management functionality.
  *
@@ -25,20 +50,19 @@ import { UniqueId } from "@accelint/core/utility/uuid";
 type FloatingCardContextValue = {
   /** Registry mapping card IDs to their rendered DOM containers */
   cards: Record<UniqueId, HTMLDivElement>;
-  /** Registers a DOM ref for a card container after it mounts */
-  addRef: (id: UniqueId, ref: HTMLDivElement | null) => void;
-  /** Unregisters a card's DOM ref when it's removed */
-  removeRef: (view: UniqueId) => void;
-  /** Programmatically closes a floating card by ID */
+  /**
+   * Programmatically closes a floating card by ID.
+   *
+   * @remarks Closing clears the card's pin state, so a pinned card that closes
+   * reopens unpinned.
+   */
   closeCard: (id: UniqueId) => void;
-  /** Toggles pin state for a floating card, disabling drag when pinned */
+  /** Toggles pin state for a floating card, disabling drag and resize when pinned */
   togglePinCard: (id: UniqueId) => void;
   /** Checks if a floating card is currently pinned */
   isPinned: (id: UniqueId) => boolean;
   /** Subscribes to pin state changes; returns an unsubscribe function */
   subscribeToPinState: (callback: () => void) => () => void;
-  /** Dockview API instance, null until FloatingCardProvider's onReady fires */
-  api: DockviewApi | null;
 };
 /**
  * Props for the FloatingCard component.
@@ -109,6 +133,13 @@ type FloatingCardProps = Readonly<{
 type FloatingCardHeaderAction = {
   /** Icon to display in the action button */
   icon: ReactNode;
+  /**
+   * Accessible name for the button.
+   *
+   * @remarks The button renders an icon with no visible text, so without a
+   * label screen readers announce it only as "button".
+   */
+  label?: string;
   /** Handler called when the action button is clicked */
   onClick: () => void;
 } | 'divider' | 'pin';
@@ -146,6 +177,16 @@ type FloatingCardProviderProps = Readonly<PropsWithChildren<{
    * per-floating card actions.
    */
   headerActions?: MaybeFactory<FloatingCardHeaderAction[]>;
+  /**
+   * Region that cards are kept inside while being dragged and resized.
+   *
+   * `'provider'` confines cards to the provider element, so a provider that
+   * occupies part of the page keeps its cards within that region.
+   * `'viewport'` lets cards move anywhere on screen.
+   *
+   * @defaultValue 'provider'
+   */
+  bounds?: 'provider' | 'viewport';
   /**
    * Optional set of card IDs that should be pinned when the provider first mounts.
    *
@@ -157,5 +198,5 @@ type FloatingCardProviderProps = Readonly<PropsWithChildren<{
   className?: string;
 }>>;
 //#endregion
-export { FloatingCardContextValue, FloatingCardHeaderAction, FloatingCardProps, FloatingCardProviderProps };
+export { Bounds, Dimensions, FloatingCardContextValue, FloatingCardHeaderAction, FloatingCardLayout, FloatingCardProps, FloatingCardProviderProps, Position, ResizeHandle };
 //# sourceMappingURL=types.d.ts.map

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

@@ -1,20 +1,3 @@
-/*
- * 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 { FloatingCardHeaderAction } from "./types.js";
-import { FunctionComponent, ReactNode } from "react";
-import { IDockviewHeaderActionsProps } from "dockview-react";
-import { UniqueId } from "@accelint/core/utility/uuid";
-
 //#region src/components/floating-card/utils.d.ts
 /**
  * A value that can be static or dynamically computed per floating card.
@@ -26,79 +9,19 @@ import { UniqueId } from "@accelint/core/utility/uuid";
  */
 type MaybeFactory<T> = T | ((cardId: string) => T);
 /**
- * Configuration options passed to floating card header adapter functions.
- *
- * Used internally by the floating card system to provide header components
- * with the necessary props and callbacks for rendering customizable headers.
+ * Reads a value that callers may supply either directly or as a per-card factory.
  *
- * @remarks
- * This type is primarily used when creating custom header adapters that need
- * access to icon, actions, and pin state management from the FloatingCardProvider.
+ * @template T - Type of the resolved value.
+ * @param value - The static value or factory.
+ * @param cardId - Card the value is being resolved for.
+ * @returns The value for this card.
  *
  * @example
  * ```tsx
- * function createHeaderAdapter(options: HeaderAdapterOptions) {
- *   return (props: DockviewHeaderProps) => {
- *     const icon = typeof options.icon === 'function'
- *       ? options.icon(props.id)
- *       : options.icon;
- *     const actions = typeof options.headerActions === 'function'
- *       ? options.headerActions(props.id)
- *       : options.headerActions;
- *
- *     return (
- *       <CustomHeader
- *         icon={icon}
- *         actions={actions}
- *         isPinned={options.isPinned?.(props.id)}
- *         onTogglePin={() => options.togglePinCard?.(props.id)}
- *       />
- *     );
- *   };
- * }
+ * const icon = resolveMaybeFactory(props.icon, cardId);
  * ```
  */
-type HeaderAdapterOptions = {
-  icon?: MaybeFactory<ReactNode>;
-  headerActions?: MaybeFactory<FloatingCardHeaderProps['headerActions']>;
-  togglePinCard?: (id: UniqueId) => void;
-  isPinned?: (id: UniqueId) => boolean;
-  subscribeToPinState?: (callback: () => void) => () => void;
-};
-/**
- * Props passed to floating card header components.
- *
- * @remarks Internal type used by header adapters to map Dockview props to custom header components.
- */
-type FloatingCardHeaderProps = {
-  /** ID of the active floating card panel */
-  id?: string;
-  /** Title text displayed in the header */
-  title?: string;
-  /** Optional icon displayed at the start of the header */
-  icon?: ReactNode;
-  /** Callback to close the entire card group */
-  closeGroup: () => void;
-  /** Toggles pin state for the specified card */
-  togglePinCard?: (id: UniqueId) => void;
-  /** Checks if the specified card is pinned */
-  isPinned?: (id: UniqueId) => boolean;
-  /** Subscribes to pin state changes; returns an unsubscribe function */
-  subscribeToPinState?: (callback: () => void) => () => void;
-  /** Custom action buttons to render in the header */
-  headerActions?: FloatingCardHeaderAction[];
-};
-/**
- * Creates an adapter component to map Dockview's header action props to custom header component props.
- *
- * Handles title change subscriptions and resolves MaybeFactory options (icon, headerActions)
- * either as static values or by invoking factory functions with the active card ID.
- *
- * @param Component - The header component to wrap.
- * @param options - Configuration options including icon and headerActions (static or factory).
- * @returns Adapter component compatible with Dockview's header API.
- */
-declare function createHeaderAdapter(Component: FunctionComponent<FloatingCardHeaderProps>, options: HeaderAdapterOptions): FunctionComponent<IDockviewHeaderActionsProps>;
+declare function resolveMaybeFactory<T>(value: MaybeFactory<T> | undefined, cardId: string): T | undefined;
 //#endregion
-export { FloatingCardHeaderProps, MaybeFactory, createHeaderAdapter };
+export { MaybeFactory, resolveMaybeFactory };
 //# sourceMappingURL=utils.d.ts.map

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

@@ -11,50 +11,24 @@
  */
 
 
-import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-
 //#region src/components/floating-card/utils.tsx
 /**
-* Creates an adapter component to map Dockview's header action props to custom header component props.
+* Reads a value that callers may supply either directly or as a per-card factory.
 *
-* Handles title change subscriptions and resolves MaybeFactory options (icon, headerActions)
-* either as static values or by invoking factory functions with the active card ID.
+* @template T - Type of the resolved value.
+* @param value - The static value or factory.
+* @param cardId - Card the value is being resolved for.
+* @returns The value for this card.
 *
-* @param Component - The header component to wrap.
-* @param options - Configuration options including icon and headerActions (static or factory).
-* @returns Adapter component compatible with Dockview's header API.
+* @example
+* ```tsx
+* const icon = resolveMaybeFactory(props.icon, cardId);
+* ```
 */
-function createHeaderAdapter(Component, options) {
-	function HeaderAdapter(props) {
-		const panelId = props.panels[0]?.id ?? "";
-		const [title, setTitle] = useState(props.activePanel?.title);
-		useEffect(() => {
-			const panel = props.activePanel;
-			if (!panel) return;
-			setTitle(panel.title);
-			const disposable = panel.api.onDidTitleChange(() => {
-				setTitle(panel.title);
-			});
-			return () => {
-				disposable.dispose();
-			};
-		}, [props.activePanel]);
-		return /* @__PURE__ */ jsx(Component, {
-			icon: props.activePanel ? typeof options?.icon === "function" ? options.icon(panelId) : options?.icon : void 0,
-			headerActions: typeof options?.headerActions === "function" ? options.headerActions(panelId) : options?.headerActions,
-			title,
-			id: props.activePanel?.id,
-			closeGroup: () => props.api.close(),
-			togglePinCard: options.togglePinCard,
-			isPinned: options.isPinned,
-			subscribeToPinState: options.subscribeToPinState
-		});
-	}
-	HeaderAdapter.displayName = `HeaderAdapter(${Component.displayName ?? Component.name ?? "Anonymous"})`;
-	return HeaderAdapter;
+function resolveMaybeFactory(value, cardId) {
+	return typeof value === "function" ? value(cardId) : value;
 }
 
 //#endregion
-export { createHeaderAdapter };
+export { resolveMaybeFactory };
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/floating-card/utils.tsx"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  type FunctionComponent,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport type { UniqueId } from '@accelint/core/utility/uuid';\nimport type { IDockviewHeaderActionsProps } from 'dockview-react';\nimport type { FloatingCardHeaderAction } from './types';\n\n/**\n * A value that can be static or dynamically computed per floating card.\n *\n * Enables per-card customization of props by passing a factory function\n * that receives the card ID and returns the appropriate value.\n *\n * @template T - The type of the static value or factory return type.\n */\nexport type MaybeFactory<T> = T | ((cardId: string) => T);\n\n/**\n * Configuration options passed to floating card header adapter functions.\n *\n * Used internally by the floating card system to provide header components\n * with the necessary props and callbacks for rendering customizable headers.\n *\n * @remarks\n * This type is primarily used when creating custom header adapters that need\n * access to icon, actions, and pin state management from the FloatingCardProvider.\n *\n * @example\n * ```tsx\n * function createHeaderAdapter(options: HeaderAdapterOptions) {\n *   return (props: DockviewHeaderProps) => {\n *     const icon = typeof options.icon === 'function'\n *       ? options.icon(props.id)\n *       : options.icon;\n *     const actions = typeof options.headerActions === 'function'\n *       ? options.headerActions(props.id)\n *       : options.headerActions;\n *\n *     return (\n *       <CustomHeader\n *         icon={icon}\n *         actions={actions}\n *         isPinned={options.isPinned?.(props.id)}\n *         onTogglePin={() => options.togglePinCard?.(props.id)}\n *       />\n *     );\n *   };\n * }\n * ```\n */\ntype HeaderAdapterOptions = {\n  icon?: MaybeFactory<ReactNode>;\n  headerActions?: MaybeFactory<FloatingCardHeaderProps['headerActions']>;\n  togglePinCard?: (id: UniqueId) => void;\n  isPinned?: (id: UniqueId) => boolean;\n  subscribeToPinState?: (callback: () => void) => () => void;\n};\n\n/**\n * Props passed to floating card header components.\n *\n * @remarks Internal type used by header adapters to map Dockview props to custom header components.\n */\nexport type FloatingCardHeaderProps = {\n  /** ID of the active floating card panel */\n  id?: string;\n  /** Title text displayed in the header */\n  title?: string;\n  /** Optional icon displayed at the start of the header */\n  icon?: ReactNode;\n  /** Callback to close the entire card group */\n  closeGroup: () => void;\n  /** Toggles pin state for the specified card */\n  togglePinCard?: (id: UniqueId) => void;\n  /** Checks if the specified card is pinned */\n  isPinned?: (id: UniqueId) => boolean;\n  /** Subscribes to pin state changes; returns an unsubscribe function */\n  subscribeToPinState?: (callback: () => void) => () => void;\n  /** Custom action buttons to render in the header */\n  headerActions?: FloatingCardHeaderAction[];\n};\n\n/**\n * Creates an adapter component to map Dockview's header action props to custom header component props.\n *\n * Handles title change subscriptions and resolves MaybeFactory options (icon, headerActions)\n * either as static values or by invoking factory functions with the active card ID.\n *\n * @param Component - The header component to wrap.\n * @param options - Configuration options including icon and headerActions (static or factory).\n * @returns Adapter component compatible with Dockview's header API.\n */\nexport function createHeaderAdapter(\n  Component: FunctionComponent<FloatingCardHeaderProps>,\n  options: HeaderAdapterOptions,\n): FunctionComponent<IDockviewHeaderActionsProps> {\n  function HeaderAdapter(props: Readonly<IDockviewHeaderActionsProps>) {\n    const panelId = props.panels[0]?.id ?? '';\n    const [title, setTitle] = useState(props.activePanel?.title);\n\n    useEffect(() => {\n      const panel = props.activePanel;\n\n      if (!panel) {\n        return;\n      }\n\n      setTitle(panel.title);\n\n      const disposable = panel.api.onDidTitleChange(() => {\n        setTitle(panel.title);\n      });\n\n      return () => {\n        disposable.dispose();\n      };\n    }, [props.activePanel]);\n    const icon = props.activePanel\n      ? typeof options?.icon === 'function'\n        ? options.icon(panelId)\n        : options?.icon\n      : undefined;\n    const headerActions =\n      typeof options?.headerActions === 'function'\n        ? options.headerActions(panelId)\n        : options?.headerActions;\n    return (\n      <Component\n        icon={icon}\n        headerActions={headerActions}\n        title={title}\n        id={props.activePanel?.id}\n        closeGroup={() => props.api.close()}\n        togglePinCard={options.togglePinCard}\n        isPinned={options.isPinned}\n        subscribeToPinState={options.subscribeToPinState}\n      />\n    );\n  }\n\n  HeaderAdapter.displayName = `HeaderAdapter(${Component.displayName ?? Component.name ?? 'Anonymous'})`;\n  return HeaderAdapter;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA4GA,SAAgB,oBACd,WACA,SACgD;CAChD,SAAS,cAAc,OAA8C;EACnE,MAAM,UAAU,MAAM,OAAO,IAAI,MAAM;EACvC,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM,aAAa,MAAM;AAE5D,kBAAgB;GACd,MAAM,QAAQ,MAAM;AAEpB,OAAI,CAAC,MACH;AAGF,YAAS,MAAM,MAAM;GAErB,MAAM,aAAa,MAAM,IAAI,uBAAuB;AAClD,aAAS,MAAM,MAAM;KACrB;AAEF,gBAAa;AACX,eAAW,SAAS;;KAErB,CAAC,MAAM,YAAY,CAAC;AAUvB,SACE,oBAAC;GACC,MAXS,MAAM,cACf,OAAO,SAAS,SAAS,aACvB,QAAQ,KAAK,QAAQ,GACrB,SAAS,OACX;GAQA,eANF,OAAO,SAAS,kBAAkB,aAC9B,QAAQ,cAAc,QAAQ,GAC9B,SAAS;GAKJ;GACP,IAAI,MAAM,aAAa;GACvB,kBAAkB,MAAM,IAAI,OAAO;GACnC,eAAe,QAAQ;GACvB,UAAU,QAAQ;GAClB,qBAAqB,QAAQ;IAC7B;;AAIN,eAAc,cAAc,iBAAiB,UAAU,eAAe,UAAU,QAAQ,YAAY;AACpG,QAAO"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/floating-card/utils.tsx"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n * A value that can be static or dynamically computed per floating card.\n *\n * Enables per-card customization of props by passing a factory function\n * that receives the card ID and returns the appropriate value.\n *\n * @template T - The type of the static value or factory return type.\n */\nexport type MaybeFactory<T> = T | ((cardId: string) => T);\n\n/**\n * Reads a value that callers may supply either directly or as a per-card factory.\n *\n * @template T - Type of the resolved value.\n * @param value - The static value or factory.\n * @param cardId - Card the value is being resolved for.\n * @returns The value for this card.\n *\n * @example\n * ```tsx\n * const icon = resolveMaybeFactory(props.icon, cardId);\n * ```\n */\nexport function resolveMaybeFactory<T>(\n  value: MaybeFactory<T> | undefined,\n  cardId: string,\n): T | undefined {\n  return typeof value === 'function'\n    ? (value as (cardId: string) => T)(cardId)\n    : value;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,oBACd,OACA,QACe;AACf,QAAO,OAAO,UAAU,aACnB,MAAgC,OAAO,GACxC"}

package/dist/components/gantt/components/base-elements/point.d.ts

@@ -12,7 +12,7 @@
 
 import { GanttRowElementColorProp } from "../../types.js";
 import { HTMLAttributes, PropsWithChildren } from "react";
-import * as react_jsx_runtime148 from "react/jsx-runtime";
+import * as react_jsx_runtime215 from "react/jsx-runtime";
 
 //#region src/components/gantt/components/base-elements/point.d.ts
 /** Props for point-based Gantt elements (markers, brackets). */
@@ -22,7 +22,7 @@ type PointProps = HTMLAttributes<HTMLDivElement> & {
   /** Visual color variant. @default 'accent' */
   color?: GanttRowElementColorProp;
 };
-declare function Point(props: PropsWithChildren<PointProps>): react_jsx_runtime148.JSX.Element | null;
+declare function Point(props: PropsWithChildren<PointProps>): react_jsx_runtime215.JSX.Element | null;
 //#endregion
 export { Point, PointProps };
 //# sourceMappingURL=point.d.ts.map

package/dist/components/gantt/components/base-elements/range.d.ts

@@ -12,7 +12,7 @@
 
 import { GanttRowElementColorProp } from "../../types.js";
 import { HTMLAttributes, PropsWithChildren } from "react";
-import * as react_jsx_runtime153 from "react/jsx-runtime";
+import * as react_jsx_runtime217 from "react/jsx-runtime";
 
 //#region src/components/gantt/components/base-elements/range.d.ts
 /** Props for range-based Gantt elements (blocks, spacers). */
@@ -24,7 +24,7 @@ type RangeProps = HTMLAttributes<HTMLDivElement> & {
   /** Visual color variant. @default 'accent' */
   color?: GanttRowElementColorProp;
 };
-declare function Range(props: PropsWithChildren<RangeProps>): react_jsx_runtime153.JSX.Element | null;
+declare function Range(props: PropsWithChildren<RangeProps>): react_jsx_runtime217.JSX.Element | null;
 //#endregion
 export { Range, RangeProps };
 //# sourceMappingURL=range.d.ts.map

package/dist/components/gantt/components/containers/external/gantt-content-container/index.d.ts

@@ -11,13 +11,13 @@
  */
 
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime222 from "react/jsx-runtime";
+import * as react_jsx_runtime237 from "react/jsx-runtime";
 
 //#region src/components/gantt/components/containers/external/gantt-content-container/index.d.ts
 /** Scrollable content area of the Gantt chart containing the timeline header and virtualized content rows. */
 declare function GanttContentContainer({
   children
-}: PropsWithChildren): react_jsx_runtime222.JSX.Element;
+}: PropsWithChildren): react_jsx_runtime237.JSX.Element;
 //#endregion
 export { GanttContentContainer };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/gantt/components/containers/external/gantt-panel-container/index.d.ts

@@ -11,13 +11,13 @@
  */
 
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime221 from "react/jsx-runtime";
+import * as react_jsx_runtime239 from "react/jsx-runtime";
 
 //#region src/components/gantt/components/containers/external/gantt-panel-container/index.d.ts
 /** Fixed-width side panel of the Gantt chart for row labels, paired alongside `GanttContentContainer`. */
 declare function GanttPanelContainer({
   children
-}: PropsWithChildren): react_jsx_runtime221.JSX.Element;
+}: PropsWithChildren): react_jsx_runtime239.JSX.Element;
 //#endregion
 export { GanttPanelContainer };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/gantt/components/containers/internal/index.d.ts

@@ -11,12 +11,12 @@
  */
 
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime219 from "react/jsx-runtime";
+import * as react_jsx_runtime235 from "react/jsx-runtime";
 
 //#region src/components/gantt/components/containers/internal/index.d.ts
 declare function RootContainer({
   children
-}: PropsWithChildren): react_jsx_runtime219.JSX.Element;
+}: PropsWithChildren): react_jsx_runtime235.JSX.Element;
 //#endregion
 export { RootContainer };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/gantt/components/containers/internal/layout-container/index.d.ts

@@ -11,12 +11,12 @@
  */
 
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime223 from "react/jsx-runtime";
+import * as react_jsx_runtime238 from "react/jsx-runtime";
 
 //#region src/components/gantt/components/containers/internal/layout-container/index.d.ts
 declare function LayoutContainer({
   children
-}: PropsWithChildren): react_jsx_runtime223.JSX.Element;
+}: PropsWithChildren): react_jsx_runtime238.JSX.Element;
 //#endregion
 export { LayoutContainer };
 //# sourceMappingURL=index.d.ts.map