@accelint/design-toolkit 9.10.0 → 9.11.1

package/dist/components/drawer/trigger.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime75 from "react/jsx-runtime";
+import * as react_jsx_runtime133 from "react/jsx-runtime";
 
 //#region src/components/drawer/trigger.d.ts
 
@@ -47,7 +47,7 @@ import * as react_jsx_runtime75 from "react/jsx-runtime";
 declare function DrawerTrigger({
   for: events,
   ...rest
-}: DrawerTriggerProps): react_jsx_runtime75.JSX.Element;
+}: DrawerTriggerProps): react_jsx_runtime133.JSX.Element;
 //#endregion
 export { DrawerTrigger };
 //# sourceMappingURL=trigger.d.ts.map

package/dist/components/drawer/trigger.js

@@ -19,7 +19,7 @@ import "client-only";
 import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 import { isUUID } from "@accelint/core";
-import { Pressable } from "@react-aria/interactions";
+import { Pressable } from "react-aria/Pressable";
 
 //#region src/components/drawer/trigger.tsx
 /**

package/dist/components/drawer/trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"trigger.js","names":[],"sources":["../../../src/components/drawer/trigger.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'use client';\n\nimport { isUUID, type UniqueId } from '@accelint/core';\nimport { Pressable } from '@react-aria/interactions';\nimport 'client-only';\nimport { useContext } from 'react';\nimport { ViewStackContext } from '../view-stack/context';\nimport { useDrawerEmit } from './context';\nimport type { DrawerTriggerProps } from './types';\n\n/**\n * DrawerTrigger - Programmatic trigger for drawer actions.\n *\n * The `for` prop controls the behavior:\n * - `'open'`, `'toggle'`, `'close'`: Control drawer open state\n * - `'back'`: Pop the current view from the stack\n * - `UniqueId`: Push a specific view onto the stack\n * - `'action:viewId'`: Combine action with view ID (e.g., `'open:${viewId}'`)\n * - `Array`: Fire multiple events in sequence\n *\n * @param props - {@link DrawerTriggerProps}\n * @param props.for - The event(s) to fire when the trigger is pressed.\n * @returns The rendered DrawerTrigger component.\n *\n * @example\n * ```tsx\n * <DrawerTrigger for=\"close\">\n *   <Button>Close</Button>\n * </DrawerTrigger>\n * ```\n\n * @example\n * ```tsx\n * <DrawerTrigger for={`open:${viewId}`}>\n *   <Button>Open Settings</Button>\n * </DrawerTrigger>\n * ```\n */\nexport function DrawerTrigger({ for: events, ...rest }: DrawerTriggerProps) {\n  const { parent } = useContext(ViewStackContext);\n  const drawerEmit = useDrawerEmit();\n\n  function handlePress() {\n    for (const type of Array.isArray(events) ? events : [events]) {\n      let [event, id] = (isUUID(type) ? ['push', type] : type.split(':')) as [\n        'back' | 'clear' | 'close' | 'open' | 'push' | 'reset' | 'toggle',\n        UniqueId | undefined | null,\n      ];\n\n      id ??= parent;\n\n      if (!id) {\n        continue;\n      }\n\n      drawerEmit[event](id);\n    }\n  }\n\n  return <Pressable {...rest} onPress={handlePress} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAgB,cAAc,EAAE,KAAK,QAAQ,GAAG,QAA4B;CAC1E,MAAM,EAAE,WAAW,WAAW,iBAAiB;CAC/C,MAAM,aAAa,eAAe;CAElC,SAAS,cAAc;AACrB,OAAK,MAAM,QAAQ,MAAM,QAAQ,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE;GAC5D,IAAI,CAAC,OAAO,MAAO,OAAO,KAAK,GAAG,CAAC,QAAQ,KAAK,GAAG,KAAK,MAAM,IAAI;AAKlE,UAAO;AAEP,OAAI,CAAC,GACH;AAGF,cAAW,OAAO,GAAG;;;AAIzB,QAAO,oBAAC;EAAU,GAAI;EAAM,SAAS;GAAe"}
+{"version":3,"file":"trigger.js","names":[],"sources":["../../../src/components/drawer/trigger.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'use client';\n\nimport { isUUID, type UniqueId } from '@accelint/core';\nimport { Pressable } from 'react-aria/Pressable';\nimport 'client-only';\nimport { useContext } from 'react';\nimport { ViewStackContext } from '../view-stack/context';\nimport { useDrawerEmit } from './context';\nimport type { DrawerTriggerProps } from './types';\n\n/**\n * DrawerTrigger - Programmatic trigger for drawer actions.\n *\n * The `for` prop controls the behavior:\n * - `'open'`, `'toggle'`, `'close'`: Control drawer open state\n * - `'back'`: Pop the current view from the stack\n * - `UniqueId`: Push a specific view onto the stack\n * - `'action:viewId'`: Combine action with view ID (e.g., `'open:${viewId}'`)\n * - `Array`: Fire multiple events in sequence\n *\n * @param props - {@link DrawerTriggerProps}\n * @param props.for - The event(s) to fire when the trigger is pressed.\n * @returns The rendered DrawerTrigger component.\n *\n * @example\n * ```tsx\n * <DrawerTrigger for=\"close\">\n *   <Button>Close</Button>\n * </DrawerTrigger>\n * ```\n\n * @example\n * ```tsx\n * <DrawerTrigger for={`open:${viewId}`}>\n *   <Button>Open Settings</Button>\n * </DrawerTrigger>\n * ```\n */\nexport function DrawerTrigger({ for: events, ...rest }: DrawerTriggerProps) {\n  const { parent } = useContext(ViewStackContext);\n  const drawerEmit = useDrawerEmit();\n\n  function handlePress() {\n    for (const type of Array.isArray(events) ? events : [events]) {\n      let [event, id] = (isUUID(type) ? ['push', type] : type.split(':')) as [\n        'back' | 'clear' | 'close' | 'open' | 'push' | 'reset' | 'toggle',\n        UniqueId | undefined | null,\n      ];\n\n      id ??= parent;\n\n      if (!id) {\n        continue;\n      }\n\n      drawerEmit[event](id);\n    }\n  }\n\n  return <Pressable {...rest} onPress={handlePress} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAgB,cAAc,EAAE,KAAK,QAAQ,GAAG,QAA4B;CAC1E,MAAM,EAAE,WAAW,WAAW,iBAAiB;CAC/C,MAAM,aAAa,eAAe;CAElC,SAAS,cAAc;AACrB,OAAK,MAAM,QAAQ,MAAM,QAAQ,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE;GAC5D,IAAI,CAAC,OAAO,MAAO,OAAO,KAAK,GAAG,CAAC,QAAQ,KAAK,GAAG,KAAK,MAAM,IAAI;AAKlE,UAAO;AAEP,OAAI,CAAC,GACH;AAGF,cAAW,OAAO,GAAG;;;AAIzB,QAAO,oBAAC;EAAU,GAAI;EAAM,SAAS;GAAe"}

package/dist/components/drawer/types.d.ts

@@ -11,11 +11,11 @@
  */
 
 import { AriaAttributesWithRef } from "../../lib/types.js";
-import { ToggleButtonProps as ToggleButtonProps$1 } from "../button/types.js";
+import { ToggleButtonProps } from "../button/types.js";
 import { ViewStackEvent } from "../view-stack/types.js";
 import { DrawerEventTypes } from "./events.js";
 import { ComponentPropsWithRef, DOMAttributes, ReactElement, RefAttributes } from "react";
-import { HeadingProps } from "react-aria-components";
+import { HeadingProps } from "react-aria-components/Heading";
 import { UniqueId } from "@accelint/core";
 import { Payload } from "@accelint/bus";
 import { FocusableElement } from "@react-types/shared";
@@ -143,7 +143,7 @@ type DrawerMenuProps = ComponentPropsWithRef<'nav'> & {
  * DrawerMenuItem implements DrawerTrigger with the default behavior of
  * the trigger's `open` event type, which resets the stack before pushing the new view
  */
-type DrawerMenuItemProps = Omit<ToggleButtonProps$1, 'id' | 'isSelected' | 'className'> & {
+type DrawerMenuItemProps = Omit<ToggleButtonProps, 'id' | 'isSelected' | 'className'> & {
   /**
    * The unique identifier of the view that this menu item controls.
    *

package/dist/components/drawer/view.d.ts

@@ -13,7 +13,7 @@
 import { ViewStackViewProps } from "../view-stack/types.js";
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime55 from "react/jsx-runtime";
+import * as react_jsx_runtime135 from "react/jsx-runtime";
 
 //#region src/components/drawer/view.d.ts
 
@@ -44,7 +44,7 @@ declare function DrawerView({
   children,
   className,
   ...rest
-}: ViewStackViewProps & ComponentPropsWithRef<'div'>): react_jsx_runtime55.JSX.Element;
+}: ViewStackViewProps & ComponentPropsWithRef<'div'>): react_jsx_runtime135.JSX.Element;
 //#endregion
 export { DrawerView };
 //# sourceMappingURL=view.d.ts.map

package/dist/components/flashcard/index.d.ts

@@ -12,14 +12,14 @@
 
 import { FlashcardComponentProps, FlashcardDetailsListProps, FlashcardProps } from "./types.js";
 import "client-only";
-import * as react19 from "react";
-import * as react_jsx_runtime57 from "react/jsx-runtime";
+import * as react34 from "react";
+import * as react_jsx_runtime136 from "react/jsx-runtime";
 
 //#region src/components/flashcard/index.d.ts
 /**
  * Context for sharing Flashcard state across child components.
  */
-declare const FlashcardContext: react19.Context<FlashcardProps>;
+declare const FlashcardContext: react34.Context<FlashcardProps>;
 /**
  * Flashcard - A quick visual identifier for map entity data.
  *
@@ -46,7 +46,7 @@ declare const FlashcardContext: react19.Context<FlashcardProps>;
  * </Flashcard>
  * ```
  */
-declare function Flashcard(props: FlashcardProps): react_jsx_runtime57.JSX.Element;
+declare function Flashcard(props: FlashcardProps): react_jsx_runtime136.JSX.Element;
 declare namespace Flashcard {
   var displayName: string;
 }
@@ -68,7 +68,7 @@ declare namespace Flashcard {
  * </Flashcard>
  * ```
  */
-declare function FlashcardHero(props: FlashcardComponentProps): react_jsx_runtime57.JSX.Element;
+declare function FlashcardHero(props: FlashcardComponentProps): react_jsx_runtime136.JSX.Element;
 declare namespace FlashcardHero {
   var displayName: string;
 }
@@ -92,7 +92,7 @@ declare namespace FlashcardHero {
  * </Flashcard>
  * ```
  */
-declare function FlashcardAdditionalData(props: FlashcardComponentProps): react_jsx_runtime57.JSX.Element | null;
+declare function FlashcardAdditionalData(props: FlashcardComponentProps): react_jsx_runtime136.JSX.Element | null;
 declare namespace FlashcardAdditionalData {
   var displayName: string;
 }
@@ -119,7 +119,7 @@ declare namespace FlashcardAdditionalData {
  * </Flashcard>
  * ```
  */
-declare function FlashcardDetailsList(props: FlashcardDetailsListProps): react_jsx_runtime57.JSX.Element;
+declare function FlashcardDetailsList(props: FlashcardDetailsListProps): react_jsx_runtime136.JSX.Element;
 declare namespace FlashcardDetailsList {
   var displayName: string;
 }
@@ -141,7 +141,7 @@ declare namespace FlashcardDetailsList {
  * </FlashcardDetailsList>
  * ```
  */
-declare function FlashcardDetailsLabel(props: FlashcardComponentProps): react_jsx_runtime57.JSX.Element;
+declare function FlashcardDetailsLabel(props: FlashcardComponentProps): react_jsx_runtime136.JSX.Element;
 declare namespace FlashcardDetailsLabel {
   var displayName: string;
 }
@@ -163,7 +163,7 @@ declare namespace FlashcardDetailsLabel {
  * </FlashcardDetailsList>
  * ```
  */
-declare function FlashcardDetailsValue(props: FlashcardComponentProps): react_jsx_runtime57.JSX.Element;
+declare function FlashcardDetailsValue(props: FlashcardComponentProps): react_jsx_runtime136.JSX.Element;
 declare namespace FlashcardDetailsValue {
   var displayName: string;
 }

package/dist/components/flashcard/index.js

@@ -20,8 +20,9 @@ import { Skeleton } from "../skeleton/index.js";
 import "client-only";
 import { createContext, useContext } from "react";
 import { clsx } from "@accelint/design-foundation/lib/utils";
-import { Heading, Text } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Heading } from "react-aria-components/Heading";
+import { Text } from "react-aria-components/Text";
 import styles from "./styles.module.css";
 
 //#region src/components/flashcard/index.tsx

package/dist/components/flashcard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/flashcard/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\n'use client';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport 'client-only';\nimport { createContext, useContext } from 'react';\nimport { Heading, Text } from 'react-aria-components';\nimport { DetailsList } from '../details-list';\nimport { DetailsListLabel } from '../details-list/label';\nimport { DetailsListValue } from '../details-list/value';\nimport { Skeleton } from '../skeleton';\nimport styles from './styles.module.css';\nimport type {\n  FlashcardComponentProps,\n  FlashcardDetailsListProps,\n  FlashcardProps,\n} from './types';\n\n/**\n * Context for sharing Flashcard state across child components.\n */\nexport const FlashcardContext = createContext<FlashcardProps>({\n  isLoading: false,\n  header: '',\n  subheader: '',\n});\n\n/**\n * Flashcard - A quick visual identifier for map entity data.\n *\n * Container component that provides loading state and header/subheader\n * to child components via context.\n *\n * @param props - {@link FlashcardProps}\n * @param props.isLoading - Whether the flashcard is in a loading state.\n * @param props.header - Primary header text.\n * @param props.subheader - Secondary text below the header.\n * @param props.children - Child components to render.\n * @param props.className - Optional CSS class name.\n * @returns The rendered Flashcard component.\n *\n * @example\n * ```tsx\n * <Flashcard isLoading={false} header=\"Identifier\" subheader=\"DATA\">\n *   <FlashcardHero />\n *   <FlashcardAdditionalData>Secondary info</FlashcardAdditionalData>\n *   <FlashcardDetailsList>\n *     <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>\n *     <FlashcardDetailsValue>Active</FlashcardDetailsValue>\n *   </FlashcardDetailsList>\n * </Flashcard>\n * ```\n */\nexport function Flashcard(props: FlashcardProps) {\n  const { isLoading, header, subheader, children, className, ...rest } = props;\n\n  return (\n    <FlashcardContext.Provider value={{ isLoading, header, subheader }}>\n      <div {...rest} className={clsx(styles.container, className)}>\n        {children}\n      </div>\n    </FlashcardContext.Provider>\n  );\n}\nFlashcard.displayName = 'Flashcard';\n\n/**\n * FlashcardHero - Upper section displaying header and subheader.\n *\n * Reads header and subheader from Flashcard context. Shows skeleton\n * placeholders when the parent Flashcard has isLoading=true.\n *\n * @param props - {@link FlashcardComponentProps}\n * @param props.children - Optional child content.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardHero component.\n *\n * @example\n * ```tsx\n * <Flashcard header=\"Entity Name\" subheader=\"Type\">\n *   <FlashcardHero />\n * </Flashcard>\n * ```\n */\nexport function FlashcardHero(props: FlashcardComponentProps) {\n  const { children, className, ...rest } = props;\n  const { isLoading, header, subheader } = useContext(FlashcardContext);\n\n  if (isLoading) {\n    return (\n      <div {...rest} className={clsx(styles.hero, className, 'gap-s')}>\n        <Skeleton className={styles.skeleton} data-testid='hero-skeleton' />\n        <Skeleton className={clsx(styles.skeleton, styles.half)} />\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={clsx(styles.hero, className)}>\n      <FlashcardHeader className={styles.header}>{header}</FlashcardHeader>\n      <FlashcardSubheader className={styles.subheader}>\n        {subheader}\n      </FlashcardSubheader>\n    </div>\n  );\n}\nFlashcardHero.displayName = 'FlashcardHero';\n\nconst FlashcardHeader = Heading;\nconst FlashcardSubheader = Text;\n\n/**\n * FlashcardAdditionalData - Secondary data section below the hero.\n *\n * Hidden when the parent Flashcard has isLoading=true.\n *\n * @param props - {@link FlashcardComponentProps}\n * @param props.children - Content to display in the section.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardAdditionalData component, or null if loading.\n *\n * @example\n * ```tsx\n * <Flashcard header=\"Entity\" subheader=\"Data\">\n *   <FlashcardHero />\n *   <FlashcardAdditionalData>\n *     Last updated: 2024-01-15\n *   </FlashcardAdditionalData>\n * </Flashcard>\n * ```\n */\nexport function FlashcardAdditionalData(props: FlashcardComponentProps) {\n  const { children, className, ...rest } = props;\n  const { isLoading } = useContext(FlashcardContext);\n\n  // While loading, don't display.\n  if (isLoading) {\n    return null;\n  }\n\n  return (\n    <div {...rest} className={clsx(styles.data, className)}>\n      {children}\n    </div>\n  );\n}\nFlashcardAdditionalData.displayName = 'FlashcardAdditionalData';\n\n/**\n * FlashcardDetailsList - Wrapper for key-value detail pairs.\n *\n * Wraps DetailsList with justify alignment for flashcard styling.\n *\n * @param props - {@link FlashcardDetailsListProps}\n * @param props.children - FlashcardDetailsLabel and FlashcardDetailsValue pairs.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardDetailsList component.\n *\n * @example\n * ```tsx\n * <Flashcard header=\"Aircraft\" subheader=\"Entity\">\n *   <FlashcardHero />\n *   <FlashcardDetailsList>\n *     <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>\n *     <FlashcardDetailsValue>Active</FlashcardDetailsValue>\n *     <FlashcardDetailsLabel>Speed</FlashcardDetailsLabel>\n *     <FlashcardDetailsValue>450 kts</FlashcardDetailsValue>\n *   </FlashcardDetailsList>\n * </Flashcard>\n * ```\n */\nexport function FlashcardDetailsList(props: FlashcardDetailsListProps) {\n  const { children, className, ...rest } = props;\n  return (\n    <DetailsList\n      {...rest}\n      align='justify'\n      classNames={{ list: clsx(styles['details-list'], className) }}\n    >\n      {children}\n    </DetailsList>\n  );\n}\nFlashcardDetailsList.displayName = 'FlashcardDetailsList';\n\n/**\n * FlashcardDetailsLabel - Label for detail items.\n *\n * Shows skeleton placeholder when the parent Flashcard has isLoading=true.\n *\n * @param props - {@link FlashcardComponentProps}\n * @param props.children - Label text content.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardDetailsLabel component.\n *\n * @example\n * ```tsx\n * <FlashcardDetailsList>\n *   <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>\n *   <FlashcardDetailsValue>Active</FlashcardDetailsValue>\n * </FlashcardDetailsList>\n * ```\n */\nexport function FlashcardDetailsLabel(props: FlashcardComponentProps) {\n  const { isLoading } = useContext(FlashcardContext);\n  const { className, children, ...rest } = props;\n  return (\n    <DetailsListLabel\n      {...rest}\n      className={clsx(styles['details-label'], className)}\n    >\n      {isLoading ? (\n        <Skeleton className={clsx(styles.skeleton, styles.smaller)} />\n      ) : (\n        children\n      )}\n    </DetailsListLabel>\n  );\n}\nFlashcardDetailsLabel.displayName = 'FlashcardDetailsLabel';\n\n/**\n * FlashcardDetailsValue - Value for detail items.\n *\n * Shows skeleton placeholder when the parent Flashcard has isLoading=true.\n *\n * @param props - {@link FlashcardComponentProps}\n * @param props.children - Value text content.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardDetailsValue component.\n *\n * @example\n * ```tsx\n * <FlashcardDetailsList>\n *   <FlashcardDetailsLabel>Type</FlashcardDetailsLabel>\n *   <FlashcardDetailsValue>Aircraft</FlashcardDetailsValue>\n * </FlashcardDetailsList>\n * ```\n */\nexport function FlashcardDetailsValue(props: FlashcardComponentProps) {\n  const { isLoading } = useContext(FlashcardContext);\n  const { className, children, ...rest } = props;\n  return (\n    <DetailsListValue\n      {...rest}\n      className={clsx(styles['details-value'], className)}\n    >\n      {isLoading ? (\n        <Skeleton className={clsx(styles.skeleton, styles.smaller)} />\n      ) : (\n        children\n      )}\n    </DetailsListValue>\n  );\n}\nFlashcardDetailsValue.displayName = 'FlashcardDetailsValue';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,mBAAmB,cAA8B;CAC5D,WAAW;CACX,QAAQ;CACR,WAAW;CACZ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BF,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EAAE,WAAW,QAAQ,WAAW,UAAU,WAAW,GAAG,SAAS;AAEvE,QACE,oBAAC,iBAAiB;EAAS,OAAO;GAAE;GAAW;GAAQ;GAAW;YAChE,oBAAC;GAAI,GAAI;GAAM,WAAW,KAAK,OAAO,WAAW,UAAU;GACxD;IACG;GACoB;;AAGhC,UAAU,cAAc;;;;;;;;;;;;;;;;;;;AAoBxB,SAAgB,cAAc,OAAgC;CAC5D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,EAAE,WAAW,QAAQ,cAAc,WAAW,iBAAiB;AAErE,KAAI,UACF,QACE,qBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,WAAW,QAAQ;aAC7D,oBAAC;GAAS,WAAW,OAAO;GAAU,eAAY;IAAkB,EACpE,oBAAC,YAAS,WAAW,KAAK,OAAO,UAAU,OAAO,KAAK,GAAI;GACvD;AAIV,QACE,qBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,UAAU;aACpD,oBAAC;GAAgB,WAAW,OAAO;aAAS;IAAyB,EACrE,oBAAC;GAAmB,WAAW,OAAO;aACnC;IACkB;GACjB;;AAGV,cAAc,cAAc;AAE5B,MAAM,kBAAkB;AACxB,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;AAsB3B,SAAgB,wBAAwB,OAAgC;CACtE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,EAAE,cAAc,WAAW,iBAAiB;AAGlD,KAAI,UACF,QAAO;AAGT,QACE,oBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,UAAU;EACnD;GACG;;AAGV,wBAAwB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;AAyBtC,SAAgB,qBAAqB,OAAkC;CACrE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AACzC,QACE,oBAAC;EACC,GAAI;EACJ,OAAM;EACN,YAAY,EAAE,MAAM,KAAK,OAAO,iBAAiB,UAAU,EAAE;EAE5D;GACW;;AAGlB,qBAAqB,cAAc;;;;;;;;;;;;;;;;;;;AAoBnC,SAAgB,sBAAsB,OAAgC;CACpE,MAAM,EAAE,cAAc,WAAW,iBAAiB;CAClD,MAAM,EAAE,WAAW,UAAU,GAAG,SAAS;AACzC,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,OAAO,kBAAkB,UAAU;YAElD,YACC,oBAAC,YAAS,WAAW,KAAK,OAAO,UAAU,OAAO,QAAQ,GAAI,GAE9D;GAEe;;AAGvB,sBAAsB,cAAc;;;;;;;;;;;;;;;;;;;AAoBpC,SAAgB,sBAAsB,OAAgC;CACpE,MAAM,EAAE,cAAc,WAAW,iBAAiB;CAClD,MAAM,EAAE,WAAW,UAAU,GAAG,SAAS;AACzC,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,OAAO,kBAAkB,UAAU;YAElD,YACC,oBAAC,YAAS,WAAW,KAAK,OAAO,UAAU,OAAO,QAAQ,GAAI,GAE9D;GAEe;;AAGvB,sBAAsB,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/flashcard/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\n'use client';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport 'client-only';\nimport { createContext, useContext } from 'react';\nimport { Heading } from 'react-aria-components/Heading';\nimport { Text } from 'react-aria-components/Text';\nimport { DetailsList } from '../details-list';\nimport { DetailsListLabel } from '../details-list/label';\nimport { DetailsListValue } from '../details-list/value';\nimport { Skeleton } from '../skeleton';\nimport styles from './styles.module.css';\nimport type {\n  FlashcardComponentProps,\n  FlashcardDetailsListProps,\n  FlashcardProps,\n} from './types';\n\n/**\n * Context for sharing Flashcard state across child components.\n */\nexport const FlashcardContext = createContext<FlashcardProps>({\n  isLoading: false,\n  header: '',\n  subheader: '',\n});\n\n/**\n * Flashcard - A quick visual identifier for map entity data.\n *\n * Container component that provides loading state and header/subheader\n * to child components via context.\n *\n * @param props - {@link FlashcardProps}\n * @param props.isLoading - Whether the flashcard is in a loading state.\n * @param props.header - Primary header text.\n * @param props.subheader - Secondary text below the header.\n * @param props.children - Child components to render.\n * @param props.className - Optional CSS class name.\n * @returns The rendered Flashcard component.\n *\n * @example\n * ```tsx\n * <Flashcard isLoading={false} header=\"Identifier\" subheader=\"DATA\">\n *   <FlashcardHero />\n *   <FlashcardAdditionalData>Secondary info</FlashcardAdditionalData>\n *   <FlashcardDetailsList>\n *     <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>\n *     <FlashcardDetailsValue>Active</FlashcardDetailsValue>\n *   </FlashcardDetailsList>\n * </Flashcard>\n * ```\n */\nexport function Flashcard(props: FlashcardProps) {\n  const { isLoading, header, subheader, children, className, ...rest } = props;\n\n  return (\n    <FlashcardContext.Provider value={{ isLoading, header, subheader }}>\n      <div {...rest} className={clsx(styles.container, className)}>\n        {children}\n      </div>\n    </FlashcardContext.Provider>\n  );\n}\nFlashcard.displayName = 'Flashcard';\n\n/**\n * FlashcardHero - Upper section displaying header and subheader.\n *\n * Reads header and subheader from Flashcard context. Shows skeleton\n * placeholders when the parent Flashcard has isLoading=true.\n *\n * @param props - {@link FlashcardComponentProps}\n * @param props.children - Optional child content.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardHero component.\n *\n * @example\n * ```tsx\n * <Flashcard header=\"Entity Name\" subheader=\"Type\">\n *   <FlashcardHero />\n * </Flashcard>\n * ```\n */\nexport function FlashcardHero(props: FlashcardComponentProps) {\n  const { children, className, ...rest } = props;\n  const { isLoading, header, subheader } = useContext(FlashcardContext);\n\n  if (isLoading) {\n    return (\n      <div {...rest} className={clsx(styles.hero, className, 'gap-s')}>\n        <Skeleton className={styles.skeleton} data-testid='hero-skeleton' />\n        <Skeleton className={clsx(styles.skeleton, styles.half)} />\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={clsx(styles.hero, className)}>\n      <FlashcardHeader className={styles.header}>{header}</FlashcardHeader>\n      <FlashcardSubheader className={styles.subheader}>\n        {subheader}\n      </FlashcardSubheader>\n    </div>\n  );\n}\nFlashcardHero.displayName = 'FlashcardHero';\n\nconst FlashcardHeader = Heading;\nconst FlashcardSubheader = Text;\n\n/**\n * FlashcardAdditionalData - Secondary data section below the hero.\n *\n * Hidden when the parent Flashcard has isLoading=true.\n *\n * @param props - {@link FlashcardComponentProps}\n * @param props.children - Content to display in the section.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardAdditionalData component, or null if loading.\n *\n * @example\n * ```tsx\n * <Flashcard header=\"Entity\" subheader=\"Data\">\n *   <FlashcardHero />\n *   <FlashcardAdditionalData>\n *     Last updated: 2024-01-15\n *   </FlashcardAdditionalData>\n * </Flashcard>\n * ```\n */\nexport function FlashcardAdditionalData(props: FlashcardComponentProps) {\n  const { children, className, ...rest } = props;\n  const { isLoading } = useContext(FlashcardContext);\n\n  // While loading, don't display.\n  if (isLoading) {\n    return null;\n  }\n\n  return (\n    <div {...rest} className={clsx(styles.data, className)}>\n      {children}\n    </div>\n  );\n}\nFlashcardAdditionalData.displayName = 'FlashcardAdditionalData';\n\n/**\n * FlashcardDetailsList - Wrapper for key-value detail pairs.\n *\n * Wraps DetailsList with justify alignment for flashcard styling.\n *\n * @param props - {@link FlashcardDetailsListProps}\n * @param props.children - FlashcardDetailsLabel and FlashcardDetailsValue pairs.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardDetailsList component.\n *\n * @example\n * ```tsx\n * <Flashcard header=\"Aircraft\" subheader=\"Entity\">\n *   <FlashcardHero />\n *   <FlashcardDetailsList>\n *     <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>\n *     <FlashcardDetailsValue>Active</FlashcardDetailsValue>\n *     <FlashcardDetailsLabel>Speed</FlashcardDetailsLabel>\n *     <FlashcardDetailsValue>450 kts</FlashcardDetailsValue>\n *   </FlashcardDetailsList>\n * </Flashcard>\n * ```\n */\nexport function FlashcardDetailsList(props: FlashcardDetailsListProps) {\n  const { children, className, ...rest } = props;\n  return (\n    <DetailsList\n      {...rest}\n      align='justify'\n      classNames={{ list: clsx(styles['details-list'], className) }}\n    >\n      {children}\n    </DetailsList>\n  );\n}\nFlashcardDetailsList.displayName = 'FlashcardDetailsList';\n\n/**\n * FlashcardDetailsLabel - Label for detail items.\n *\n * Shows skeleton placeholder when the parent Flashcard has isLoading=true.\n *\n * @param props - {@link FlashcardComponentProps}\n * @param props.children - Label text content.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardDetailsLabel component.\n *\n * @example\n * ```tsx\n * <FlashcardDetailsList>\n *   <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>\n *   <FlashcardDetailsValue>Active</FlashcardDetailsValue>\n * </FlashcardDetailsList>\n * ```\n */\nexport function FlashcardDetailsLabel(props: FlashcardComponentProps) {\n  const { isLoading } = useContext(FlashcardContext);\n  const { className, children, ...rest } = props;\n  return (\n    <DetailsListLabel\n      {...rest}\n      className={clsx(styles['details-label'], className)}\n    >\n      {isLoading ? (\n        <Skeleton className={clsx(styles.skeleton, styles.smaller)} />\n      ) : (\n        children\n      )}\n    </DetailsListLabel>\n  );\n}\nFlashcardDetailsLabel.displayName = 'FlashcardDetailsLabel';\n\n/**\n * FlashcardDetailsValue - Value for detail items.\n *\n * Shows skeleton placeholder when the parent Flashcard has isLoading=true.\n *\n * @param props - {@link FlashcardComponentProps}\n * @param props.children - Value text content.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardDetailsValue component.\n *\n * @example\n * ```tsx\n * <FlashcardDetailsList>\n *   <FlashcardDetailsLabel>Type</FlashcardDetailsLabel>\n *   <FlashcardDetailsValue>Aircraft</FlashcardDetailsValue>\n * </FlashcardDetailsList>\n * ```\n */\nexport function FlashcardDetailsValue(props: FlashcardComponentProps) {\n  const { isLoading } = useContext(FlashcardContext);\n  const { className, children, ...rest } = props;\n  return (\n    <DetailsListValue\n      {...rest}\n      className={clsx(styles['details-value'], className)}\n    >\n      {isLoading ? (\n        <Skeleton className={clsx(styles.skeleton, styles.smaller)} />\n      ) : (\n        children\n      )}\n    </DetailsListValue>\n  );\n}\nFlashcardDetailsValue.displayName = 'FlashcardDetailsValue';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,mBAAmB,cAA8B;CAC5D,WAAW;CACX,QAAQ;CACR,WAAW;CACZ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BF,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EAAE,WAAW,QAAQ,WAAW,UAAU,WAAW,GAAG,SAAS;AAEvE,QACE,oBAAC,iBAAiB;EAAS,OAAO;GAAE;GAAW;GAAQ;GAAW;YAChE,oBAAC;GAAI,GAAI;GAAM,WAAW,KAAK,OAAO,WAAW,UAAU;GACxD;IACG;GACoB;;AAGhC,UAAU,cAAc;;;;;;;;;;;;;;;;;;;AAoBxB,SAAgB,cAAc,OAAgC;CAC5D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,EAAE,WAAW,QAAQ,cAAc,WAAW,iBAAiB;AAErE,KAAI,UACF,QACE,qBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,WAAW,QAAQ;aAC7D,oBAAC;GAAS,WAAW,OAAO;GAAU,eAAY;IAAkB,EACpE,oBAAC,YAAS,WAAW,KAAK,OAAO,UAAU,OAAO,KAAK,GAAI;GACvD;AAIV,QACE,qBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,UAAU;aACpD,oBAAC;GAAgB,WAAW,OAAO;aAAS;IAAyB,EACrE,oBAAC;GAAmB,WAAW,OAAO;aACnC;IACkB;GACjB;;AAGV,cAAc,cAAc;AAE5B,MAAM,kBAAkB;AACxB,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;AAsB3B,SAAgB,wBAAwB,OAAgC;CACtE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,EAAE,cAAc,WAAW,iBAAiB;AAGlD,KAAI,UACF,QAAO;AAGT,QACE,oBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,UAAU;EACnD;GACG;;AAGV,wBAAwB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;AAyBtC,SAAgB,qBAAqB,OAAkC;CACrE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AACzC,QACE,oBAAC;EACC,GAAI;EACJ,OAAM;EACN,YAAY,EAAE,MAAM,KAAK,OAAO,iBAAiB,UAAU,EAAE;EAE5D;GACW;;AAGlB,qBAAqB,cAAc;;;;;;;;;;;;;;;;;;;AAoBnC,SAAgB,sBAAsB,OAAgC;CACpE,MAAM,EAAE,cAAc,WAAW,iBAAiB;CAClD,MAAM,EAAE,WAAW,UAAU,GAAG,SAAS;AACzC,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,OAAO,kBAAkB,UAAU;YAElD,YACC,oBAAC,YAAS,WAAW,KAAK,OAAO,UAAU,OAAO,QAAQ,GAAI,GAE9D;GAEe;;AAGvB,sBAAsB,cAAc;;;;;;;;;;;;;;;;;;;AAoBpC,SAAgB,sBAAsB,OAAgC;CACpE,MAAM,EAAE,cAAc,WAAW,iBAAiB;CAClD,MAAM,EAAE,WAAW,UAAU,GAAG,SAAS;AACzC,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,OAAO,kBAAkB,UAAU;YAElD,YACC,oBAAC,YAAS,WAAW,KAAK,OAAO,UAAU,OAAO,QAAQ,GAAI,GAE9D;GAEe;;AAGvB,sBAAsB,cAAc"}

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

@@ -10,36 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import * as react15 from "react";
-import { DockviewApi } from "dockview-react";
-import { UniqueId } from "@accelint/core/utility/uuid";
+import { FloatingCardContextValue } from "./types.js";
+import * as react35 from "react";
 
 //#region src/components/floating-card/context.d.ts
-/**
- * Context value providing floating card management functionality.
- *
- * @remarks
- * Exposed via FloatingCardProvider to child components. Use useFloatingCard() hook to access.
- */
-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 */
-  closeCard: (id: UniqueId) => void;
-  /** Toggles pin state for a floating card, disabling drag 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;
-};
-declare const FloatingCardContext: react15.Context<FloatingCardContextValue | null>;
+declare const FloatingCardContext: react35.Context<FloatingCardContextValue | null>;
 /**
  * Hook to access floating card management functionality.
  *
@@ -64,5 +39,5 @@ declare const FloatingCardContext: react15.Context<FloatingCardContextValue | nu
  */
 declare function useFloatingCard(): FloatingCardContextValue;
 //#endregion
-export { FloatingCardContext, FloatingCardContextValue, useFloatingCard };
+export { FloatingCardContext, useFloatingCard };
 //# sourceMappingURL=context.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/floating-card/context.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 { createContext, useContext } from 'react';\nimport type { UniqueId } from '@accelint/core/utility/uuid';\nimport type { DockviewApi } from 'dockview-react';\n\n/**\n * Context value providing floating card management functionality.\n *\n * @remarks\n * Exposed via FloatingCardProvider to child components. Use useFloatingCard() hook to access.\n */\nexport type FloatingCardContextValue = {\n  /** Registry mapping card IDs to their rendered DOM containers */\n  cards: Record<UniqueId, HTMLDivElement>;\n\n  /** Registers a DOM ref for a card container after it mounts */\n  addRef: (id: UniqueId, ref: HTMLDivElement | null) => void;\n\n  /** Unregisters a card's DOM ref when it's removed */\n  removeRef: (view: UniqueId) => void;\n\n  /** Programmatically closes a floating card by ID */\n  closeCard: (id: UniqueId) => void;\n\n  /** Toggles pin state for a floating card, disabling drag when pinned */\n  togglePinCard: (id: UniqueId) => void;\n\n  /** Checks if a floating card is currently pinned */\n  isPinned: (id: UniqueId) => boolean;\n\n  /** Subscribes to pin state changes; returns an unsubscribe function */\n  subscribeToPinState: (callback: () => void) => () => void;\n\n  /** Dockview API instance, null until FloatingCardProvider's onReady fires */\n  api: DockviewApi | null;\n};\n\nexport const FloatingCardContext =\n  createContext<FloatingCardContextValue | null>(null);\n/**\n * Hook to access floating card management functionality.\n *\n * Provides access to card registry, ref management, and programmatic control\n * over opening, closing, and pinning floating cards.\n *\n * @returns Context value with card management methods and state.\n * @throws {Error} If used outside of a FloatingCardProvider.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { closeCard, togglePinCard } = useFloatingCard();\n *\n *   return (\n *     <button onClick={() => closeCard('my-card-id' as UniqueId)}>\n *       Close Card\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useFloatingCard(): FloatingCardContextValue {\n  const context = useContext(FloatingCardContext);\n  if (!context) {\n    throw new Error(\n      'useFloatingCard must be used within a FloatingCardProvider.',\n    );\n  }\n  return context;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiDA,MAAa,sBACX,cAA+C,KAAK;;;;;;;;;;;;;;;;;;;;;;;AAuBtD,SAAgB,kBAA4C;CAC1D,MAAM,UAAU,WAAW,oBAAoB;AAC/C,KAAI,CAAC,QACH,OAAM,IAAI,MACR,8DACD;AAEH,QAAO"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/floating-card/context.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 { createContext, useContext } from 'react';\nimport type { FloatingCardContextValue } from './types';\n\nexport const FloatingCardContext =\n  createContext<FloatingCardContextValue | null>(null);\n/**\n * Hook to access floating card management functionality.\n *\n * Provides access to card registry, ref management, and programmatic control\n * over opening, closing, and pinning floating cards.\n *\n * @returns Context value with card management methods and state.\n * @throws {Error} If used outside of a FloatingCardProvider.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { closeCard, togglePinCard } = useFloatingCard();\n *\n *   return (\n *     <button onClick={() => closeCard('my-card-id' as UniqueId)}>\n *       Close Card\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useFloatingCard(): FloatingCardContextValue {\n  const context = useContext(FloatingCardContext);\n  if (!context) {\n    throw new Error(\n      'useFloatingCard must be used within a FloatingCardProvider.',\n    );\n  }\n  return context;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAa,sBACX,cAA+C,KAAK;;;;;;;;;;;;;;;;;;;;;;;AAuBtD,SAAgB,kBAA4C;CAC1D,MAAM,UAAU,WAAW,oBAAoB;AAC/C,KAAI,CAAC,QACH,OAAM,IAAI,MACR,8DACD;AAEH,QAAO"}

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

@@ -10,57 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
+import { FloatingCardProps } from "./types.js";
 import * as react18 from "react";
 import { PropsWithChildren } from "react";
-import { UniqueId } from "@accelint/core";
 
 //#region src/components/floating-card/index.d.ts
-/**
- * Props for the FloatingCard component.
- *
- * @example
- * ```tsx
- * const props: FloatingCardProps = {
- *   id: 'panel-123' as UniqueId,
- *   title: 'My Panel',
- *   isOpen: true,
- *   initialDimensions: { width: 350, height: 450 }
- * };
- * ```
- */
-type FloatingCardProps = Readonly<{
-  /** Unique identifier for the floating card */
-  id: UniqueId;
-  /** Optional title displayed in the floating card header */
-  title?: string;
-  /**
-   * Controls whether the floating card is rendered.
-   *
-   * When `true`, the card registers with the floating card engine and renders its
-   * children via a portal. When `false`, the card is closed and removed.
-   *
-   * @defaultValue true
-   */
-  isOpen?: boolean;
-  /**
-   * Initial dimensions of the floating card panel.
-   *
-   * @defaultValue { width: 300, height: 400 }
-   */
-  initialDimensions?: Readonly<{
-    width: number;
-    height: number;
-  }>;
-  /**
-   * Initial position of the floating card panel.
-   *
-   * When provided, sets the x and y coordinates of the floating card.
-   */
-  initialPosition?: Readonly<{
-    x: number;
-    y: number;
-  }>;
-}>;
+
 /**
  * Renders its children into a floating card using React portals.
  *
@@ -111,5 +66,5 @@ declare function FloatingCard({
   initialPosition
 }: PropsWithChildren<FloatingCardProps>): react18.ReactPortal | null;
 //#endregion
-export { FloatingCard, FloatingCardProps };
+export { FloatingCard };
 //# sourceMappingURL=index.d.ts.map

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 { UniqueId } from '@accelint/core';\n\nconst defaultDimensions = { width: 300, height: 400 } as const;\n\n/**\n * Props for the FloatingCard component.\n *\n * @example\n * ```tsx\n * const props: FloatingCardProps = {\n *   id: 'panel-123' as UniqueId,\n *   title: 'My Panel',\n *   isOpen: true,\n *   initialDimensions: { width: 350, height: 450 }\n * };\n * ```\n */\nexport type FloatingCardProps = Readonly<{\n  /** Unique identifier for the floating card */\n  id: UniqueId;\n  /** Optional title displayed in the floating card header */\n  title?: string;\n  /**\n   * Controls whether the floating card is rendered.\n   *\n   * When `true`, the card registers with the floating card engine and renders its\n   * children via a portal. When `false`, the card is closed and removed.\n   *\n   * @defaultValue true\n   */\n  isOpen?: boolean;\n  /**\n   * Initial dimensions of the floating card panel.\n   *\n   * @defaultValue { width: 300, height: 400 }\n   */\n  initialDimensions?: Readonly<{ width: number; height: number }>;\n  /**\n   * Initial position of the floating card panel.\n   *\n   * When provided, sets the x and y coordinates of the floating card.\n   */\n  initialPosition?: Readonly<{ x: number; y: number }>;\n}>;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFrD,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 { 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"}

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

@@ -10,90 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import { PropsWithChildren, ReactNode } from "react";
-import * as react_jsx_runtime64 from "react/jsx-runtime";
-import { UniqueId } from "@accelint/core/utility/uuid";
+import { FloatingCardProviderProps } from "./types.js";
+import * as react_jsx_runtime60 from "react/jsx-runtime";
 
 //#region src/components/floating-card/provider.d.ts
-/**
- * A value that can be static or dynamically computed per floating card.
- *
- * Enables per-card customization of props by passing a factory function
- * that receives the card ID and returns the appropriate value.
- *
- * @template T - The type of the static value or factory return type.
- */
-type MaybeFactory<T> = T | ((cardId: string) => T);
-/**
- * Configuration for header action buttons in floating cards.
- *
- * Can be a custom button (with icon and onClick), a visual separator ('divider'),
- * or the built-in pin toggle ('pin').
- *
- * @remarks
- * - Custom buttons: Rendered as icon buttons with your provided onClick handler
- * - 'divider': Inserts a vertical divider between action groups
- * - 'pin': Adds built-in pin toggle button (disables dragging when pinned)
- *
- * @example
- * ```tsx
- * const headerActions: FloatingCardHeaderAction[] = [
- *   { icon: <SettingsIcon />, onClick: () => openSettings() },
- *   'divider',
- *   'pin'
- * ];
- * ```
- */
-type FloatingCardHeaderAction = {
-  /** Icon to display in the action button */
-  icon: ReactNode;
-  /** Handler called when the action button is clicked */
-  onClick: () => void;
-} | 'divider' | 'pin';
-/**
- * Props for the FloatingCardProvider component.
- *
- * Configures default icon and header actions for all floating cards. Both can be
- * static values or factory functions that receive the card ID for per-card customization.
- *
- * @example
- * ```tsx
- * <FloatingCardProvider
- *   icon={<AppIcon />}
- *   headerActions={(cardId) => {
- *     if (cardId === 'settings') {
- *       return [{ icon: <CogIcon />, onClick: openSettings }, 'pin'];
- *     }
- *     return ['pin'];
- *   }}
- * >
- *   {children}
- * </FloatingCardProvider>
- * ```
- */
-type FloatingCardProviderProps = Readonly<PropsWithChildren<{
-  /**
-   * Optional icon rendered at the very start of the floating card header.
-   * Can be a `ReactNode` or a function `(cardId: string) => ReactNode`.
-   */
-  icon?: MaybeFactory<ReactNode>;
-  /**
-   * Optional action buttons rendered in the floating card header before the close button.
-   * Can include `'divider'` to separate groups and `'pin'` to add a pin toggle button.
-   * Can be an array or a function `(cardId: string) => array` to return
-   * per-floating card actions.
-   */
-  headerActions?: MaybeFactory<FloatingCardHeaderAction[]>;
-  /**
-   * Optional set of card IDs that should be pinned when the provider first mounts.
-   *
-   * Like other `initial*` props, this value is only read once at mount time.
-   * Changes after mount have no effect.
-   */
-  initialPinned?: readonly UniqueId[];
-  /** Additional CSS class names for styling */
-  className?: string;
-}>>;
+
 /**
  * Provides a context and layout area for floating cards within the application.
  *
@@ -135,7 +56,7 @@ declare function FloatingCardProvider({
   headerActions,
   initialPinned,
   className
-}: FloatingCardProviderProps): react_jsx_runtime64.JSX.Element;
+}: FloatingCardProviderProps): react_jsx_runtime60.JSX.Element;
 //#endregion
-export { FloatingCardHeaderAction, FloatingCardProvider, FloatingCardProviderProps };
+export { FloatingCardProvider };
 //# sourceMappingURL=provider.d.ts.map

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

@@ -15,6 +15,7 @@ import { Icon } from "../icon/index.js";
 import { Button } from "../button/index.js";
 import { Divider } from "../divider/index.js";
 import { FloatingCardContext, useFloatingCard } from "./context.js";
+import { createHeaderAdapter } from "./utils.js";
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -62,8 +63,11 @@ function DefaultLeftHeader({ title, icon, id }) {
 			size: "small",
 			children: icon
 		}) : null, title && title !== id ? /* @__PURE__ */ jsx("div", {
-			className: styles.headerTitle,
-			children: title
+			className: styles.headerTitleContainer,
+			children: /* @__PURE__ */ jsx("div", {
+				className: styles.headerTitle,
+				children: title
+			})
 		}) : null]
 	});
 }
@@ -106,45 +110,6 @@ function DefaultRightHeader({ closeGroup, headerActions, id, togglePinCard, isPi
 		})]
 	});
 }
-/**
-* 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.
-*/
-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;
-}
 const components = { default: FloatingCardContainer };
 /**
 * Provides a context and layout area for floating cards within the application.