@mithrl/design-system 0.1.0 → 0.3.0

package/dist/patterns/workspace-app-shell/WorkspaceAppShell.d.ts

@@ -0,0 +1,144 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type GlobalAppBarProjectSelector, type GlobalAppBarProps } from "../../components/global-app-bar/GlobalAppBar";
+import { type ResizablePanelGroupProps, type ResizablePanelMinimum } from "../../components/resizable-panels/ResizablePanels";
+import { type WorkspaceNavigationPresentation, type WorkspaceNavigationProps } from "../../components/workspace-navigation/WorkspaceNavigation";
+import type { ThemeMode } from "../../components/switch/Switch";
+
+export type WorkspaceAppShellLayout = "expanded" | "condensed" | "single";
+type NativeWorkspaceAppShellProps = Omit<HTMLAttributes<HTMLDivElement>, "children">;
+type WorkspaceAppBarConfiguration = Omit<GlobalAppBarProps, "defaultTheme" | "onThemeChange" | "theme" | "workspaceControls">;
+export type WorkspaceNavigationConfiguration = Omit<WorkspaceNavigationProps, "presentation">;
+type WorkspaceProjectSelectorConfiguration = Omit<GlobalAppBarProjectSelector, "presentation">;
+export type WorkspaceAppShellNavigationRenderContext = {
+    /** Active structural layout selected from the shell's rendered width. */
+    layout: WorkspaceAppShellLayout;
+    /** Inline on persistent layouts and Overlay in the single-region layout. */
+    presentation: WorkspaceNavigationPresentation;
+    /** Current controlled or uncontrolled Navigation visibility. */
+    open: boolean;
+    /** Stable App Bar toggle identity for focus return from compact overlays. */
+    navigationToggleId: string;
+    /** Requests dismissal after safely relocating focus through the shell. */
+    requestClose: () => void;
+};
+export type WorkspaceAppShellNavigationRenderer = (context: WorkspaceAppShellNavigationRenderContext) => ReactNode;
+export type WorkspaceAppShellProps = NativeWorkspaceAppShellProps & {
+    /** Global App Bar account, brand, and native attributes. */
+    appBar: WorkspaceAppBarConfiguration;
+    /** Project context rendered by the approved Global App Bar selector. */
+    projectSelector: WorkspaceProjectSelectorConfiguration;
+    /** Workspace Navigation content; App Shell selects Inline or Overlay. */
+    navigation?: WorkspaceNavigationConfiguration;
+    /**
+     * Product-navigation adapter for domain-specific status and nested artifacts.
+     * Use instead of `navigation`; the shell still owns visibility and focus.
+     */
+    renderNavigation?: WorkspaceAppShellNavigationRenderer;
+    /** Product-owned Primary Panel content. */
+    primary: ReactNode;
+    /** Product-owned Secondary Panel content. */
+    secondary: ReactNode;
+    /** Controlled active theme for the entire shell. */
+    theme?: ThemeMode;
+    /** Initial active theme for uncontrolled use. */
+    defaultTheme?: ThemeMode;
+    /** Reports a theme request from the Global App Bar. */
+    onThemeChange?: (theme: ThemeMode) => void;
+    /** Controlled Navigation visibility. */
+    navigationOpen?: boolean;
+    /** Initial Navigation visibility. Defaults to open. */
+    defaultNavigationOpen?: boolean;
+    /** Reports explicit Navigation toggle or compact-overlay dismissal. */
+    onNavigationOpenChange?: (open: boolean) => void;
+    /** Controlled Secondary Panel visibility. */
+    secondaryOpen?: boolean;
+    /** Initial Secondary visibility. Defaults to collapsed. */
+    defaultSecondaryOpen?: boolean;
+    /** Reports explicit Secondary toggle requests. */
+    onSecondaryOpenChange?: (open: boolean) => void;
+    /** Controlled Primary share for the persistent desktop split. */
+    split?: number;
+    /** Initial Primary share. Defaults to the approved 60%. */
+    defaultSplit?: number;
+    /** Reports every pointer or keyboard resize. */
+    onSplitChange?: ResizablePanelGroupProps["onValueChange"];
+    /** Reports the final pointer value or each committed keyboard step. */
+    onSplitCommit?: ResizablePanelGroupProps["onValueCommit"];
+    /** Controlled Secondary width in pixels. Use for product `rightWidth`. */
+    secondaryWidth?: number;
+    /** Initial Secondary width for uncontrolled pixel-based persistence. */
+    defaultSecondaryWidth?: number;
+    /** Reports every resize in Secondary pixels. */
+    onSecondaryWidthChange?: ResizablePanelGroupProps["onSecondarySizeChange"];
+    /** Reports the final pointer value or each keyboard step in pixels. */
+    onSecondaryWidthCommit?: ResizablePanelGroupProps["onSecondarySizeCommit"];
+    /** Primary minimum-size policy. Defaults to Standard. */
+    primaryMinSize?: ResizablePanelMinimum;
+    /** Secondary minimum in pixels. Defaults to 280px. */
+    secondaryMinSize?: number;
+    /** Accessible splitter label when the Primary region has no visible label. */
+    resizeLabel?: string;
+};
+/**
+ * Complete Workspace layout pattern. It composes the approved Global App Bar,
+ * Workspace Navigation, and Resizable Panels contracts while product code
+ * retains routing, content, data fetching, and persistence ownership.
+ */
+export declare const WorkspaceAppShell: import("react").ForwardRefExoticComponent<NativeWorkspaceAppShellProps & {
+    /** Global App Bar account, brand, and native attributes. */
+    appBar: WorkspaceAppBarConfiguration;
+    /** Project context rendered by the approved Global App Bar selector. */
+    projectSelector: WorkspaceProjectSelectorConfiguration;
+    /** Workspace Navigation content; App Shell selects Inline or Overlay. */
+    navigation?: WorkspaceNavigationConfiguration;
+    /**
+     * Product-navigation adapter for domain-specific status and nested artifacts.
+     * Use instead of `navigation`; the shell still owns visibility and focus.
+     */
+    renderNavigation?: WorkspaceAppShellNavigationRenderer;
+    /** Product-owned Primary Panel content. */
+    primary: ReactNode;
+    /** Product-owned Secondary Panel content. */
+    secondary: ReactNode;
+    /** Controlled active theme for the entire shell. */
+    theme?: ThemeMode;
+    /** Initial active theme for uncontrolled use. */
+    defaultTheme?: ThemeMode;
+    /** Reports a theme request from the Global App Bar. */
+    onThemeChange?: (theme: ThemeMode) => void;
+    /** Controlled Navigation visibility. */
+    navigationOpen?: boolean;
+    /** Initial Navigation visibility. Defaults to open. */
+    defaultNavigationOpen?: boolean;
+    /** Reports explicit Navigation toggle or compact-overlay dismissal. */
+    onNavigationOpenChange?: (open: boolean) => void;
+    /** Controlled Secondary Panel visibility. */
+    secondaryOpen?: boolean;
+    /** Initial Secondary visibility. Defaults to collapsed. */
+    defaultSecondaryOpen?: boolean;
+    /** Reports explicit Secondary toggle requests. */
+    onSecondaryOpenChange?: (open: boolean) => void;
+    /** Controlled Primary share for the persistent desktop split. */
+    split?: number;
+    /** Initial Primary share. Defaults to the approved 60%. */
+    defaultSplit?: number;
+    /** Reports every pointer or keyboard resize. */
+    onSplitChange?: ResizablePanelGroupProps["onValueChange"];
+    /** Reports the final pointer value or each committed keyboard step. */
+    onSplitCommit?: ResizablePanelGroupProps["onValueCommit"];
+    /** Controlled Secondary width in pixels. Use for product `rightWidth`. */
+    secondaryWidth?: number;
+    /** Initial Secondary width for uncontrolled pixel-based persistence. */
+    defaultSecondaryWidth?: number;
+    /** Reports every resize in Secondary pixels. */
+    onSecondaryWidthChange?: ResizablePanelGroupProps["onSecondarySizeChange"];
+    /** Reports the final pointer value or each keyboard step in pixels. */
+    onSecondaryWidthCommit?: ResizablePanelGroupProps["onSecondarySizeCommit"];
+    /** Primary minimum-size policy. Defaults to Standard. */
+    primaryMinSize?: ResizablePanelMinimum;
+    /** Secondary minimum in pixels. Defaults to 280px. */
+    secondaryMinSize?: number;
+    /** Accessible splitter label when the Primary region has no visible label. */
+    resizeLabel?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/patterns/workspace-app-shell/WorkspaceNewQuestionDialog.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+import { type DialogContentProps } from "../../components/dialog/Dialog";
+
+export type WorkspaceNewQuestionDraft = {
+    question: string;
+};
+export type WorkspaceNewQuestionDialogProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Associates the controlled Dialog with the Navigation action. */
+    triggerId?: string;
+    initialQuestion?: string;
+    onStart: (draft: WorkspaceNewQuestionDraft) => void | Promise<void>;
+    submitting?: boolean;
+    submitError?: ReactNode;
+    portalContainer?: DialogContentProps["portalContainer"];
+    className?: string;
+};
+/**
+ * Controlled Workspace entry pattern. Session creation, routing, persistence,
+ * authorization, and analytics remain owned by the product.
+ */
+export declare function WorkspaceNewQuestionDialog({ open, defaultOpen, onOpenChange, triggerId, initialQuestion, onStart, submitting, submitError, portalContainer, className, }: WorkspaceNewQuestionDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/workspace-app-shell/WorkspaceQuestionSurface.d.ts

@@ -0,0 +1,49 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+
+export type WorkspaceQuestionSurfacePanel = "primary" | "secondary";
+export type WorkspaceQuestionSurfaceScroll = "consumer" | "surface";
+type NativeWorkspaceQuestionSurfaceProps = Omit<HTMLAttributes<HTMLElement>, "children" | "title">;
+export type WorkspaceQuestionSurfaceProps = NativeWorkspaceQuestionSurfaceProps & {
+    /** Panel that owns this mounted Question. Ownership remains product state. */
+    panel: WorkspaceQuestionSurfacePanel;
+    /** Full Question name used by the Primary header and region label. */
+    questionTitle: string;
+    /** Product-owned Question content inside the approved panel containment. */
+    children: ReactNode;
+    /** Product-owned Composer or ComposerViewTransition for this session. */
+    composer: ReactNode;
+    /**
+     * Scroll owner. Defaults to the consumer so existing Chat viewport logic,
+     * streaming follow, and minimaps remain unchanged.
+     */
+    contentScroll?: WorkspaceQuestionSurfaceScroll;
+    /** Product actions shown beside the Primary Question title. */
+    headerActions?: ReactNode;
+    /** Shows the contextual header. Defaults to true only in Primary. */
+    showHeader?: boolean;
+};
+/**
+ * Session-bound Question layout for either Workspace owner panel. The product
+ * supplies Chat and Composer behavior; this pattern owns the approved header,
+ * scroll containment, bottom anchoring, and adaptive fade.
+ */
+export declare const WorkspaceQuestionSurface: import("react").ForwardRefExoticComponent<NativeWorkspaceQuestionSurfaceProps & {
+    /** Panel that owns this mounted Question. Ownership remains product state. */
+    panel: WorkspaceQuestionSurfacePanel;
+    /** Full Question name used by the Primary header and region label. */
+    questionTitle: string;
+    /** Product-owned Question content inside the approved panel containment. */
+    children: ReactNode;
+    /** Product-owned Composer or ComposerViewTransition for this session. */
+    composer: ReactNode;
+    /**
+     * Scroll owner. Defaults to the consumer so existing Chat viewport logic,
+     * streaming follow, and minimaps remain unchanged.
+     */
+    contentScroll?: WorkspaceQuestionSurfaceScroll;
+    /** Product actions shown beside the Primary Question title. */
+    headerActions?: ReactNode;
+    /** Shows the contextual header. Defaults to true only in Primary. */
+    showHeader?: boolean;
+} & import("react").RefAttributes<HTMLElement>>;
+export {};