@mithrl/design-system 0.1.0 → 0.3.0

package/dist/components/button/Button.d.ts

@@ -10,6 +10,8 @@ export type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>["size"]
 export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & VariantProps<typeof buttonVariants> & {
     children: ReactNode;
     loading?: boolean;
+    /** Keeps async-action focus while guarding repeat activation with aria-disabled. */
+    preserveFocusWhileLoading?: boolean;
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
 };
@@ -23,6 +25,8 @@ export declare const Button: import("react").ForwardRefExoticComponent<Omit<Butt
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
     children: ReactNode;
     loading?: boolean;
+    /** Keeps async-action focus while guarding repeat activation with aria-disabled. */
+    preserveFocusWhileLoading?: boolean;
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/composer/Composer.d.ts

@@ -0,0 +1,41 @@
+
+export type ComposerMode = "guided" | "autopilot";
+export type ComposerStatus = "idle" | "sending" | "streaming";
+export type ComposerPreviewState = "hover" | "focus";
+export type ComposerLabels = {
+    input: string;
+    add: string;
+    send: string;
+    stop: string;
+    sending: string;
+    guided: string;
+    autopilot: string;
+};
+export type ComposerProps = {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onSubmitPrompt?: (value: string, mode: ComposerMode) => void;
+    onStop?: () => void;
+    onAdd?: () => void;
+    mode?: ComposerMode;
+    defaultMode?: ComposerMode;
+    onModeChange?: (mode: ComposerMode) => void;
+    status?: ComposerStatus;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    autoFocus?: boolean;
+    name?: string;
+    placeholder?: string;
+    labels?: Partial<ComposerLabels>;
+    className?: string;
+    textareaClassName?: string;
+    "aria-describedby"?: string;
+    "data-preview-state"?: ComposerPreviewState;
+};
+/**
+ * Workspace conversation input with attachment, Guided/Autopilot selection,
+ * submission, generation interruption, content growth, and bounded scrolling.
+ */
+export declare const Composer: import("react").ForwardRefExoticComponent<ComposerProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/composer/ComposerAttachmentView.d.ts

@@ -0,0 +1,48 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+
+type NativeComposerAttachmentViewProps = Omit<HTMLAttributes<HTMLElement>, "children" | "title">;
+export type ComposerAttachmentViewProps = NativeComposerAttachmentViewProps & {
+    /** Accessible and visible view heading. */
+    heading?: ReactNode;
+    /** Short file-acquisition instruction below the heading. */
+    description?: ReactNode;
+    /** Product-owned browse-file and browse-folder controls. */
+    acquisitionActions: ReactNode;
+    /** Product-owned selection or drop status. */
+    acquisitionStatus?: ReactNode;
+    /** Product-owned selected resources, queue, progress, or empty state. */
+    children: ReactNode;
+    /** Product-owned Clear, Upload, retry, or equivalent actions. */
+    footerActions: ReactNode;
+    /** Reports the explicit request to return to the Composer. */
+    onClose: () => void;
+    /** Accessible name for the close action. */
+    closeLabel?: string;
+    /** Applies the approved active drop surface without owning drag events. */
+    dragging?: boolean;
+};
+/**
+ * Controlled visual shell for the Composer attachment view. File selection,
+ * queues, transport, retries, and persistence remain product-owned slots.
+ */
+export declare const ComposerAttachmentView: import("react").ForwardRefExoticComponent<NativeComposerAttachmentViewProps & {
+    /** Accessible and visible view heading. */
+    heading?: ReactNode;
+    /** Short file-acquisition instruction below the heading. */
+    description?: ReactNode;
+    /** Product-owned browse-file and browse-folder controls. */
+    acquisitionActions: ReactNode;
+    /** Product-owned selection or drop status. */
+    acquisitionStatus?: ReactNode;
+    /** Product-owned selected resources, queue, progress, or empty state. */
+    children: ReactNode;
+    /** Product-owned Clear, Upload, retry, or equivalent actions. */
+    footerActions: ReactNode;
+    /** Reports the explicit request to return to the Composer. */
+    onClose: () => void;
+    /** Accessible name for the close action. */
+    closeLabel?: string;
+    /** Applies the approved active drop surface without owning drag events. */
+    dragging?: boolean;
+} & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/components/composer/ComposerViewTransition.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type ComposerView = "composer" | "attachments";
+export type ComposerViewTransitionProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Active view. File acquisition state remains owned by the consumer. */
+    view: ComposerView;
+    /** The production Composer instance shown at rest. */
+    composer: ReactNode;
+    /** Consumer-owned file acquisition and selection content. */
+    attachments: ReactNode;
+};
+/**
+ * Bottom-anchored transition between Composer and consumer-owned attachment
+ * content. The shared surface expands upward while both view layers move only
+ * 12px, preserving the approved vertical carousel behavior.
+ */
+export declare const ComposerViewTransition: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Active view. File acquisition state remains owned by the consumer. */
+    view: ComposerView;
+    /** The production Composer instance shown at rest. */
+    composer: ReactNode;
+    /** Consumer-owned file acquisition and selection content. */
+    attachments: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -2,8 +2,9 @@ import { Menu } from "@base-ui/react/menu";
 import { type VariantProps } from "class-variance-authority";
 import { type ComponentPropsWithoutRef, type ReactNode } from "react";
 
+
 export declare const dropdownMenuContentVariants: (props?: ({
-    width?: "compact" | "default" | "maximum" | null | undefined;
+    width?: "compact" | "default" | "maximum" | "trigger" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type DropdownMenuContentWidth = NonNullable<VariantProps<typeof dropdownMenuContentVariants>["width"]>;
 export type DropdownMenuItemTone = "neutral" | "destructive";

package/dist/components/explorer/Explorer.d.ts

@@ -0,0 +1,99 @@
+import { type HTMLAttributes, type MouseEvent, type MouseEventHandler, type ReactNode } from "react";
+
+export type ExplorerUploadFileType = "data" | "structured-data" | "document" | "code" | "notebook" | "image" | "scientific-data" | "archive" | "generic";
+export type ExplorerScientificOutputType = "dataset" | "report" | "figure" | "plot" | "code" | "generic";
+type ExplorerResourceBase = {
+    /** Stable owner-defined identity. IDs are unique across the whole Explorer. */
+    id: string;
+    /** Visible single-line resource name. */
+    name: string;
+    /** Native destination. When omitted, the matching activation callback may own selection. */
+    href?: string;
+};
+export type ExplorerUploadFile = ExplorerResourceBase & {
+    type: "file";
+    fileType: ExplorerUploadFileType;
+};
+export type ExplorerUploadFolder = ExplorerResourceBase & {
+    type: "folder";
+    children: readonly ExplorerUploadNode[];
+};
+export type ExplorerUploadNode = ExplorerUploadFile | ExplorerUploadFolder;
+export type ExplorerScientificOutput = ExplorerResourceBase & {
+    type: "output";
+    outputType: ExplorerScientificOutputType;
+};
+export type ExplorerScientificOutputFolder = ExplorerResourceBase & {
+    type: "folder";
+    children: readonly ExplorerScientificOutputNode[];
+};
+export type ExplorerScientificOutputNode = ExplorerScientificOutput | ExplorerScientificOutputFolder;
+export type ExplorerQuestion = {
+    id: string;
+    name: string;
+    children: readonly ExplorerScientificOutputNode[];
+};
+export type ExplorerLabels = {
+    panel: string;
+    tab: string;
+    panelActions: string;
+    uploads: string;
+    uploadsCount: (count: number) => string;
+    noUploadsTitle: ReactNode;
+    noUploadsDescription: ReactNode;
+    scientificOutputs: string;
+    questionsCount: (count: number) => string;
+    noScientificOutputsTitle: ReactNode;
+    noScientificOutputsDescription: ReactNode;
+    download: (name: string) => string;
+};
+type ResourceClick = MouseEvent<HTMLAnchorElement | HTMLButtonElement>;
+export type ExplorerProps = Omit<HTMLAttributes<HTMLElement>, "children" | "onSelect"> & {
+    uploads?: readonly ExplorerUploadNode[];
+    questions?: readonly ExplorerQuestion[];
+    /** Controlled expanded folder and Question identities. */
+    expandedIds?: readonly string[];
+    /** Initial expanded identities for uncontrolled use. */
+    defaultExpandedIds?: readonly string[];
+    onExpandedIdsChange?: (ids: readonly string[]) => void;
+    onUploadActivate?: (upload: ExplorerUploadFile, event: ResourceClick) => void;
+    onScientificOutputActivate?: (output: ExplorerScientificOutput, event: ResourceClick) => void;
+    /** Independent download action revealed on hover or keyboard focus. */
+    onUploadDownload?: (upload: ExplorerUploadFile, event: MouseEvent<HTMLButtonElement>) => void;
+    /** Independent download action revealed on hover or keyboard focus. */
+    onScientificOutputDownload?: (output: ExplorerScientificOutput, event: MouseEvent<HTMLButtonElement>) => void;
+    onPanelAction?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Renders Explorer's standalone Panel Tab header. Set false when the owning
+     * SecondaryPanel supplies the shared tab collection and panel actions.
+     */
+    showHeader?: boolean;
+    labels?: Partial<ExplorerLabels>;
+};
+/**
+ * Secondary Workspace panel for uploaded files and generated scientific
+ * outputs. Product code owns loading, navigation, previews, and persistence.
+ */
+export declare const Explorer: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children" | "onSelect"> & {
+    uploads?: readonly ExplorerUploadNode[];
+    questions?: readonly ExplorerQuestion[];
+    /** Controlled expanded folder and Question identities. */
+    expandedIds?: readonly string[];
+    /** Initial expanded identities for uncontrolled use. */
+    defaultExpandedIds?: readonly string[];
+    onExpandedIdsChange?: (ids: readonly string[]) => void;
+    onUploadActivate?: (upload: ExplorerUploadFile, event: ResourceClick) => void;
+    onScientificOutputActivate?: (output: ExplorerScientificOutput, event: ResourceClick) => void;
+    /** Independent download action revealed on hover or keyboard focus. */
+    onUploadDownload?: (upload: ExplorerUploadFile, event: MouseEvent<HTMLButtonElement>) => void;
+    /** Independent download action revealed on hover or keyboard focus. */
+    onScientificOutputDownload?: (output: ExplorerScientificOutput, event: MouseEvent<HTMLButtonElement>) => void;
+    onPanelAction?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Renders Explorer's standalone Panel Tab header. Set false when the owning
+     * SecondaryPanel supplies the shared tab collection and panel actions.
+     */
+    showHeader?: boolean;
+    labels?: Partial<ExplorerLabels>;
+} & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/components/global-app-bar/GlobalAppBar.d.ts

@@ -1,10 +1,33 @@
-import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type HTMLAttributes, type MouseEventHandler } from "react";
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type HTMLAttributes, type MouseEventHandler, type ReactElement } from "react";
 import { type AccountMenuProps } from "../account-menu/AccountMenu";
 import { type DropdownMenuProps } from "../dropdown-menu/DropdownMenu";
 import { type ThemeMode } from "../switch/Switch";
+import { type ProjectMenuProps } from "../project-menu/ProjectMenu";
 
 type BrandLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "className" | "href">;
 type AccountButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-controls" | "aria-expanded" | "aria-haspopup" | "aria-label" | "children" | "className" | "onClick" | "type">;
+type ProjectSelectorButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "children" | "className" | "onClick" | "title" | "type">;
+export type GlobalAppBarProjectSelectorPresentation = "full" | "truncated" | "icon-only";
+export type GlobalAppBarProjectSelector = {
+    /** Full project name preserved in the accessible name in every presentation. */
+    name: string;
+    /** Responsive presentation selected by the owning App Shell. */
+    presentation?: GlobalAppBarProjectSelectorPresentation;
+    /** Optional explicit accessible name. Defaults to `Choose project: {name}`. */
+    label?: string;
+    /** Called when project selection is requested. */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Safe native attributes for the project-selector button. */
+    buttonProps?: ProjectSelectorButtonProps;
+    /** Optional searchable menu opened by the selector trigger. */
+    menu?: Omit<ProjectMenuProps, "portalContainer">;
+    /** Controlled project-menu visibility. */
+    menuOpen?: DropdownMenuProps["open"];
+    /** Initial project-menu visibility for uncontrolled use. */
+    defaultMenuOpen?: DropdownMenuProps["defaultOpen"];
+    /** Called when project-menu visibility changes. */
+    onMenuOpenChange?: DropdownMenuProps["onOpenChange"];
+};
 export type GlobalAppBarProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
     /** Home destination used by the official Mithrl brand action. */
     brandHref?: string;
@@ -36,11 +59,20 @@ export type GlobalAppBarProps = Omit<HTMLAttributes<HTMLElement>, "children"> &
     onAccountMenuOpenChange?: DropdownMenuProps["onOpenChange"];
     /** Additional native attributes for the account-menu button. */
     accountButtonProps?: AccountButtonProps;
+    /**
+     * Workspace-only App Shell controls. Each control keeps its own semantics;
+     * Global App Bar owns only their approved order and alignment.
+     */
+    workspaceControls?: {
+        navigationToggle: ReactElement;
+        projectSelector: GlobalAppBarProjectSelector;
+        explorerToggle: ReactElement;
+    };
 };
 /**
- * Persistent Home-level application anchor. Workspace structure, project
- * context, search, creation, and page-local actions intentionally stay out of
- * this composite.
+ * Persistent application anchor. Home keeps the minimal brand, theme, and
+ * account contract; Workspace adds structural panel controls and project
+ * context without introducing a second App Bar component.
  */
 export declare const GlobalAppBar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children"> & {
     /** Home destination used by the official Mithrl brand action. */
@@ -73,5 +105,14 @@ export declare const GlobalAppBar: import("react").ForwardRefExoticComponent<Omi
     onAccountMenuOpenChange?: DropdownMenuProps["onOpenChange"];
     /** Additional native attributes for the account-menu button. */
     accountButtonProps?: AccountButtonProps;
+    /**
+     * Workspace-only App Shell controls. Each control keeps its own semantics;
+     * Global App Bar owns only their approved order and alignment.
+     */
+    workspaceControls?: {
+        navigationToggle: ReactElement;
+        projectSelector: GlobalAppBarProjectSelector;
+        explorerToggle: ReactElement;
+    };
 } & import("react").RefAttributes<HTMLElement>>;
 export {};

package/dist/components/navigation-item/NavigationItem.d.ts

@@ -0,0 +1,47 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type MouseEventHandler } from "react";
+import { type IconGlyphComponent } from "../icon/Icon";
+
+export declare const navigationItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type NavigationItemPreviewState = "hover" | "pressed" | "focus";
+type LeadingIcon = {
+    /** A recognized destination glyph rendered through the Icon primitive. */
+    leading: "icon";
+    icon: IconGlyphComponent;
+};
+type LeadingQuestion = {
+    /** A text-led question destination with no decorative leading marker. */
+    leading?: "question";
+    icon?: never;
+};
+type NavigationItemCommonProps = (LeadingIcon | LeadingQuestion) & {
+    /** The required visible and accessible destination name. */
+    label: string;
+    /** Controlled current/selected state supplied by the owning navigation. */
+    selected?: boolean;
+    /** Controlled active-panel state. It may coexist across multiple Questions. */
+    active?: boolean;
+    /** Shows the approved text shimmer and trailing Progress Indicator. */
+    loading?: boolean;
+    /** Adds the question-row overflow action as a sibling interactive control. */
+    onMenuAction?: MouseEventHandler<HTMLButtonElement>;
+    /** Accessible name for the optional question-row overflow action. */
+    menuActionLabel?: string;
+    /** Storybook-only hook for reviewing native CSS states. */
+    "data-preview-state"?: NavigationItemPreviewState;
+};
+type NavigationItemAnchorProps = NavigationItemCommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "aria-current" | "children" | "href"> & {
+    /** Stable navigation destination. Anchors are the preferred contract. */
+    href: string;
+};
+type NavigationItemButtonProps = NavigationItemCommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-pressed" | "children" | "disabled" | "type"> & {
+    /** Omit href only for an in-place Workspace selection. */
+    href?: never;
+};
+export type NavigationItemProps = NavigationItemAnchorProps | NavigationItemButtonProps;
+/**
+ * A compact destination row for persistent product navigation. Stable routes
+ * render as native anchors; the button form is reserved for in-place
+ * selection. Routing, authorization, and panel layout remain owner concerns.
+ */
+export declare const NavigationItem: import("react").ForwardRefExoticComponent<NavigationItemProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export {};

package/dist/components/panel-tabs/PanelTabs.d.ts

@@ -16,6 +16,8 @@ export type PanelTabItem = {
     panelId?: string;
     /** Optional explicit tab ID used by the associated panel. */
     id?: string;
+    /** Uses the Design System Tooltip when the visible presentation is icon-only. */
+    tooltip?: boolean;
 };
 export type PanelTabsProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> & {
     items: readonly PanelTabItem[];

package/dist/components/popover-surface/PopoverSurface.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes } from "react";
+
+export type PopoverSurfaceProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Visual shell for floating content. Positioning, focus, keyboard interaction,
+ * dismissal, and semantic roles remain owned by the consuming behavior layer.
+ */
+export declare const PopoverSurface: import("react").ForwardRefExoticComponent<PopoverSurfaceProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/project-menu/ProjectMenu.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from "react";
+import { type DropdownMenuContentProps } from "../dropdown-menu/DropdownMenu";
+
+export type ProjectMenuProject = {
+    id: string;
+    name: string;
+    disabled?: boolean;
+};
+export type ProjectMenuLabels = {
+    menu: string;
+    search: string;
+    searchPlaceholder: string;
+    empty: ReactNode;
+    browseAll: ReactNode;
+};
+export type ProjectMenuProps = Omit<DropdownMenuContentProps, "aria-label" | "children" | "width"> & {
+    projects: ProjectMenuProject[];
+    selectedProjectId?: string;
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    onProjectSelect?: (project: ProjectMenuProject) => void;
+    browseAllHref?: string;
+    onBrowseAll?: () => void;
+    labels?: Partial<ProjectMenuLabels>;
+};
+/**
+ * Searchable project-navigation content for the Global App Bar project
+ * selector. The external trigger and open state remain owned by Global App Bar.
+ */
+export declare const ProjectMenu: import("react").ForwardRefExoticComponent<Omit<DropdownMenuContentProps, "aria-label" | "children" | "width"> & {
+    projects: ProjectMenuProject[];
+    selectedProjectId?: string;
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    onProjectSelect?: (project: ProjectMenuProject) => void;
+    browseAllHref?: string;
+    onBrowseAll?: () => void;
+    labels?: Partial<ProjectMenuLabels>;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/resizable-panels/ResizablePanels.d.ts

@@ -0,0 +1,79 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+
+export type ResizablePanelDirection = "horizontal";
+export type ResizablePanelMinimum = "standard" | "compact" | number;
+export type ResizablePanelProps = Omit<HTMLAttributes<HTMLDivElement>, "id"> & {
+    /** Stable identity referenced by the splitter's aria-controls contract. */
+    id: string;
+    /** Pixel minimum or the approved Primary standard/compact policy. */
+    minSize: ResizablePanelMinimum;
+    /** Optional visible heading that names this panel region. */
+    labelId?: string;
+};
+export type ResizableHandleProps = Omit<HTMLAttributes<HTMLDivElement>, "role" | "tabIndex" | "aria-controls" | "aria-orientation" | "aria-valuemin" | "aria-valuemax" | "aria-valuenow">;
+export type ResizablePanelGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "dir" | "onChange"> & {
+    /** V1 supports only the approved horizontal Primary–Secondary layout. */
+    direction?: ResizablePanelDirection;
+    /** Primary share as a percentage of the available panel space. */
+    value?: number;
+    /** Initial Primary share for uncontrolled use. Defaults to 60. */
+    defaultValue?: number;
+    /** Reports every pointer or keyboard resize. */
+    onValueChange?: (value: number) => void;
+    /** Reports the final pointer value or each committed keyboard step. */
+    onValueCommit?: (value: number) => void;
+    /** Controlled Secondary width in pixels. Use instead of `value`. */
+    secondarySize?: number;
+    /** Initial Secondary width in pixels for uncontrolled pixel persistence. */
+    defaultSecondarySize?: number;
+    /** Reports every pointer or keyboard resize in Secondary pixels. */
+    onSecondarySizeChange?: (size: number) => void;
+    /** Reports the final pointer value or each keyboard step in pixels. */
+    onSecondarySizeCommit?: (size: number) => void;
+    /** Exactly Primary Panel, Handle, and Secondary Panel in that order. */
+    children: ReactNode;
+};
+/**
+ * Content-agnostic region used as the Primary or Secondary child of a
+ * ResizablePanelGroup. Surface, header, padding, and scroll ownership remain
+ * with the panel content supplied by the consumer.
+ */
+export declare const ResizablePanel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "id"> & {
+    /** Stable identity referenced by the splitter's aria-controls contract. */
+    id: string;
+    /** Pixel minimum or the approved Primary standard/compact policy. */
+    minSize: ResizablePanelMinimum;
+    /** Optional visible heading that names this panel region. */
+    labelId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Invisible 8px window splitter. Feedback is rendered only on the two panel
+ * edges adjacent to the gap; the target itself never becomes a visible rail.
+ */
+export declare const ResizableHandle: import("react").ForwardRefExoticComponent<ResizableHandleProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Horizontal two-panel layout that owns split measurement, constraints, and
+ * direct manipulation while leaving visibility and persistence to App Shell.
+ */
+export declare const ResizablePanelGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "dir" | "onChange"> & {
+    /** V1 supports only the approved horizontal Primary–Secondary layout. */
+    direction?: ResizablePanelDirection;
+    /** Primary share as a percentage of the available panel space. */
+    value?: number;
+    /** Initial Primary share for uncontrolled use. Defaults to 60. */
+    defaultValue?: number;
+    /** Reports every pointer or keyboard resize. */
+    onValueChange?: (value: number) => void;
+    /** Reports the final pointer value or each committed keyboard step. */
+    onValueCommit?: (value: number) => void;
+    /** Controlled Secondary width in pixels. Use instead of `value`. */
+    secondarySize?: number;
+    /** Initial Secondary width in pixels for uncontrolled pixel persistence. */
+    defaultSecondarySize?: number;
+    /** Reports every pointer or keyboard resize in Secondary pixels. */
+    onSecondarySizeChange?: (size: number) => void;
+    /** Reports the final pointer value or each keyboard step in pixels. */
+    onSecondarySizeCommit?: (size: number) => void;
+    /** Exactly Primary Panel, Handle, and Secondary Panel in that order. */
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/secondary-panel/SecondaryPanel.d.ts

@@ -0,0 +1,69 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type PanelTabItem } from "../panel-tabs/PanelTabs";
+
+export declare const MITHRL_QUESTION_DRAG_TYPE = "application/x-mithrl-question-id";
+export type SecondaryPanelTabKind = "explorer" | "question" | "resource" | "tool";
+export type SecondaryPanelTab = Omit<PanelTabItem, "closable" | "tooltip"> & {
+    /** Controls the approved icon-led or text-only tab identity. */
+    kind: SecondaryPanelTabKind;
+    /** Explorer is persistent; all other destinations may be owner-closeable. */
+    closable?: boolean;
+};
+export type SecondaryPanelDropTarget = "secondary";
+export type SecondaryPanelProps = Omit<HTMLAttributes<HTMLElement>, "children" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop"> & {
+    /** Ordered, controlled panel destinations. Explorer must remain first. */
+    tabs: readonly SecondaryPanelTab[];
+    /** Controlled active destination identity. */
+    activeTabId: string;
+    /** Product-owned content for the active destination. */
+    children: ReactNode;
+    /** Optional product-owned panel actions rendered after the tab viewport. */
+    headerActions?: ReactNode;
+    /** Shows the approved trailing-edge overflow cue over the tab viewport. */
+    overflowFeedback?: boolean;
+    /** Uses the temporary compact full-screen header presentation. */
+    compactMode?: boolean;
+    /** Visible and accessible label for the compact dismissal action. */
+    compactCloseLabel?: string;
+    /** Reports controlled tab selection. */
+    onTabSelect: (tabId: string) => void;
+    /** Reports a close request and the fallback that keeps selection aligned with focus. */
+    onTabClose?: (tabId: string, fallbackTabId: string) => void;
+    /** Enables native Question drops from Workspace Navigation. */
+    onQuestionDrop?: (questionId: string, target: SecondaryPanelDropTarget) => void;
+    /** Reports compact Secondary dismissal without unmounting owner state. */
+    onSecondaryOpenChange: (open: boolean) => void;
+    /** Visible drop feedback. Defaults to the approved action copy. */
+    dropFeedbackLabel?: ReactNode;
+};
+/**
+ * Controlled Secondary Workspace surface. It composes Panel Tabs, compact
+ * presentation, and Question drop feedback while product code retains tab,
+ * placement, visibility, width, content, and persistence ownership.
+ */
+export declare const SecondaryPanel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop"> & {
+    /** Ordered, controlled panel destinations. Explorer must remain first. */
+    tabs: readonly SecondaryPanelTab[];
+    /** Controlled active destination identity. */
+    activeTabId: string;
+    /** Product-owned content for the active destination. */
+    children: ReactNode;
+    /** Optional product-owned panel actions rendered after the tab viewport. */
+    headerActions?: ReactNode;
+    /** Shows the approved trailing-edge overflow cue over the tab viewport. */
+    overflowFeedback?: boolean;
+    /** Uses the temporary compact full-screen header presentation. */
+    compactMode?: boolean;
+    /** Visible and accessible label for the compact dismissal action. */
+    compactCloseLabel?: string;
+    /** Reports controlled tab selection. */
+    onTabSelect: (tabId: string) => void;
+    /** Reports a close request and the fallback that keeps selection aligned with focus. */
+    onTabClose?: (tabId: string, fallbackTabId: string) => void;
+    /** Enables native Question drops from Workspace Navigation. */
+    onQuestionDrop?: (questionId: string, target: SecondaryPanelDropTarget) => void;
+    /** Reports compact Secondary dismissal without unmounting owner state. */
+    onSecondaryOpenChange: (open: boolean) => void;
+    /** Visible drop feedback. Defaults to the approved action copy. */
+    dropFeedbackLabel?: ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;