@mithrl/design-system 0.2.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/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/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/navigation-item/NavigationItem.d.ts

@@ -18,6 +18,8 @@ type NavigationItemCommonProps = (LeadingIcon | LeadingQuestion) & {
     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. */

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/resizable-panels/ResizablePanels.d.ts

@@ -22,6 +22,14 @@ export type ResizablePanelGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "chi
     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;
 };
@@ -58,6 +66,14 @@ export declare const ResizablePanelGroup: import("react").ForwardRefExoticCompon
     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>>;

package/dist/components/workspace-navigation/WorkspaceNavigation.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "class-variance-authority";
-import { type HTMLAttributes, type MouseEvent, type MouseEventHandler } from "react";
+import { type DragEvent, type HTMLAttributes, type MouseEvent, type MouseEventHandler } from "react";
 import { type IconButtonProps } from "../icon-button/IconButton";
 
 export declare const workspaceNavigationVariants: (props?: ({
@@ -15,9 +15,14 @@ export type WorkspaceNavigationQuestion = {
     href?: string;
     /** Uses the approved text shimmer and Progress Indicator. */
     loading?: boolean;
+    /** Enables opening this unopened Question through native drag. */
+    draggable?: boolean;
+    /** Optional explicit name for the product-owned overflow action. */
+    menuActionLabel?: string;
 };
 type NavigationClick = MouseEvent<HTMLAnchorElement | HTMLButtonElement>;
 type MenuClick = MouseEvent<HTMLButtonElement>;
+type QuestionDrag = DragEvent<HTMLAnchorElement | HTMLButtonElement>;
 export type WorkspaceNavigationProps = Omit<HTMLAttributes<HTMLElement>, "children" | "onSelect"> & VariantProps<typeof workspaceNavigationVariants> & {
     /** Accessible name for the navigation landmark. */
     "aria-label"?: string;
@@ -27,16 +32,24 @@ export type WorkspaceNavigationProps = Omit<HTMLAttributes<HTMLElement>, "childr
     allProjectsLabel?: string;
     /** Visible label for the creation action. */
     newQuestionLabel?: string;
+    /** Stable identity for a controlled New Question dialog trigger. */
+    newQuestionTriggerId?: string;
     /** Visible heading for the question destination region. */
     questionsLabel?: string;
     /** Controlled question destinations in display order. */
     questions: readonly WorkspaceNavigationQuestion[];
     /** Controlled current question identity. */
     selectedQuestionId?: string;
+    /** Controlled Questions currently active in Primary or Secondary panels. */
+    activeQuestionIds?: readonly string[];
     /** Selects a question without prescribing router ownership. */
     onQuestionSelect?: (question: WorkspaceNavigationQuestion, event: NavigationClick) => void;
     /** Opens the product-owned menu for one question. */
     onQuestionMenuAction?: (question: WorkspaceNavigationQuestion, event: MenuClick) => void;
+    /** Reports the beginning of an enabled Question drag. */
+    onQuestionDragStart?: (question: WorkspaceNavigationQuestion, event: QuestionDrag) => void;
+    /** Reports the end of an enabled Question drag. */
+    onQuestionDragEnd?: (question: WorkspaceNavigationQuestion, event: QuestionDrag) => void;
     /** Starts a new question. */
     onNewQuestion: MouseEventHandler<HTMLButtonElement>;
     /** Reports activation of the All Projects destination. */
@@ -60,16 +73,24 @@ export declare const WorkspaceNavigation: import("react").ForwardRefExoticCompon
     allProjectsLabel?: string;
     /** Visible label for the creation action. */
     newQuestionLabel?: string;
+    /** Stable identity for a controlled New Question dialog trigger. */
+    newQuestionTriggerId?: string;
     /** Visible heading for the question destination region. */
     questionsLabel?: string;
     /** Controlled question destinations in display order. */
     questions: readonly WorkspaceNavigationQuestion[];
     /** Controlled current question identity. */
     selectedQuestionId?: string;
+    /** Controlled Questions currently active in Primary or Secondary panels. */
+    activeQuestionIds?: readonly string[];
     /** Selects a question without prescribing router ownership. */
     onQuestionSelect?: (question: WorkspaceNavigationQuestion, event: NavigationClick) => void;
     /** Opens the product-owned menu for one question. */
     onQuestionMenuAction?: (question: WorkspaceNavigationQuestion, event: MenuClick) => void;
+    /** Reports the beginning of an enabled Question drag. */
+    onQuestionDragStart?: (question: WorkspaceNavigationQuestion, event: QuestionDrag) => void;
+    /** Reports the end of an enabled Question drag. */
+    onQuestionDragEnd?: (question: WorkspaceNavigationQuestion, event: QuestionDrag) => void;
     /** Starts a new question. */
     onNewQuestion: MouseEventHandler<HTMLButtonElement>;
     /** Reports activation of the All Projects destination. */

package/dist/index.d.ts

@@ -13,6 +13,8 @@ export { SegmentedTabs, segmentedTabsVariants, } from "./components/segmented-ta
 export type { SegmentedTabItem, SegmentedTabsActivationMode, SegmentedTabsProps, SegmentedTabsSize, } from "./components/segmented-tabs/SegmentedTabs";
 export { PanelTabs } from "./components/panel-tabs/PanelTabs";
 export type { PanelTabItem, PanelTabsProps, } from "./components/panel-tabs/PanelTabs";
+export { MITHRL_QUESTION_DRAG_TYPE, SecondaryPanel, } from "./components/secondary-panel/SecondaryPanel";
+export type { SecondaryPanelDropTarget, SecondaryPanelProps, SecondaryPanelTab, SecondaryPanelTabKind, } from "./components/secondary-panel/SecondaryPanel";
 export { Switch, ThemeSwitch } from "./components/switch/Switch";
 export type { SwitchProps, ThemeMode, ThemeSwitchProps, } from "./components/switch/Switch";
 export { ToggleButton, toggleButtonVariants, } from "./components/toggle-button/ToggleButton";
@@ -27,6 +29,8 @@ export { Composer } from "./components/composer/Composer";
 export type { ComposerLabels, ComposerMode, ComposerPreviewState, ComposerProps, ComposerStatus, } from "./components/composer/Composer";
 export { ComposerViewTransition } from "./components/composer/ComposerViewTransition";
 export type { ComposerView, ComposerViewTransitionProps, } from "./components/composer/ComposerViewTransition";
+export { ComposerAttachmentView } from "./components/composer/ComposerAttachmentView";
+export type { ComposerAttachmentViewProps, } from "./components/composer/ComposerAttachmentView";
 export { Select, selectVariants } from "./components/select/Select";
 export type { SelectPreviewState, SelectProps, SelectSize, } from "./components/select/Select";
 export { Link, linkVariants } from "./components/link/Link";
@@ -61,6 +65,8 @@ export { PopoverSurface } from "./components/popover-surface/PopoverSurface";
 export type { PopoverSurfaceProps } from "./components/popover-surface/PopoverSurface";
 export { ProjectMenu } from "./components/project-menu/ProjectMenu";
 export type { ProjectMenuLabels, ProjectMenuProject, ProjectMenuProps, } from "./components/project-menu/ProjectMenu";
+export { Explorer } from "./components/explorer/Explorer";
+export type { ExplorerLabels, ExplorerProps, ExplorerQuestion, ExplorerScientificOutput, ExplorerScientificOutputFolder, ExplorerScientificOutputNode, ExplorerScientificOutputType, ExplorerUploadFile, ExplorerUploadFileType, ExplorerUploadFolder, ExplorerUploadNode, } from "./components/explorer/Explorer";
 export { AccountMenu } from "./components/account-menu/AccountMenu";
 export type { AccountMenuAction, AccountMenuProps, } from "./components/account-menu/AccountMenu";
 export { GlobalAppBar } from "./components/global-app-bar/GlobalAppBar";
@@ -80,4 +86,8 @@ export type { DialogBackdropProps, DialogBodyProps, DialogCloseButtonProps, Dial
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "./components/resizable-panels/ResizablePanels";
 export type { ResizableHandleProps, ResizablePanelDirection, ResizablePanelGroupProps, ResizablePanelMinimum, ResizablePanelProps, } from "./components/resizable-panels/ResizablePanels";
 export { WorkspaceAppShell } from "./patterns/workspace-app-shell/WorkspaceAppShell";
-export type { WorkspaceAppShellLayout, WorkspaceAppShellProps, } from "./patterns/workspace-app-shell/WorkspaceAppShell";
+export { WorkspaceNewQuestionDialog } from "./patterns/workspace-app-shell/WorkspaceNewQuestionDialog";
+export { WorkspaceQuestionSurface } from "./patterns/workspace-app-shell/WorkspaceQuestionSurface";
+export type { WorkspaceAppShellNavigationRenderContext, WorkspaceAppShellNavigationRenderer, WorkspaceAppShellLayout, WorkspaceAppShellProps, WorkspaceNavigationConfiguration, } from "./patterns/workspace-app-shell/WorkspaceAppShell";
+export type { WorkspaceNewQuestionDialogProps, WorkspaceNewQuestionDraft, } from "./patterns/workspace-app-shell/WorkspaceNewQuestionDialog";
+export type { WorkspaceQuestionSurfacePanel, WorkspaceQuestionSurfaceProps, WorkspaceQuestionSurfaceScroll, } from "./patterns/workspace-app-shell/WorkspaceQuestionSurface";