@omniviewdev/base-ui 0.2.1 → 0.3.0

package/dist/index.d.ts

@@ -69,6 +69,7 @@ import { Ref } from 'react';
 import { RefAttributes } from 'react';
 import { RefCallback } from 'react';
 import { RefObject } from 'react';
+import { Row } from '@tanstack/react-table';
 import { RowSelectionState } from '@tanstack/react-table';
 import { Select as Select_2 } from '@base-ui/react/select';
 import { SelectArrowProps } from '@base-ui/react';
@@ -622,10 +623,13 @@ export declare interface BuildSectionsOptions {
     value?: Date | null;
 }
 
-export declare const BUILT_IN_THEME_MODES: readonly BuiltInThemeMode[];
+export declare const BUILT_IN_THEME_IDS: ReadonlySet<BuiltInThemeId>;
 
-/** The built-in modes that a custom theme can inherit from. */
-export declare type BuiltInThemeMode = 'dark' | 'light' | 'high-contrast-dark' | 'high-contrast-light' | 'obsidian' | 'carbon' | 'void';
+export declare const BUILT_IN_THEME_MODES: readonly ["void", "dark", "light", "obsidian", "carbon", "solarized-dark", "solarized-light", "high-contrast-dark", "high-contrast-light"];
+
+export declare const BUILT_IN_THEMES: readonly Readonly<ThemeSummary>[];
+
+export declare type BuiltInThemeId = 'void' | 'dark' | 'light' | 'obsidian' | 'carbon' | 'solarized-dark' | 'solarized-light' | 'high-contrast-dark' | 'high-contrast-light';
 
 export declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & RefAttributes<HTMLElement>>;
 
@@ -993,8 +997,6 @@ export declare interface CollapsibleTriggerProps extends HTMLAttributes<HTMLButt
     children: ReactNode;
 }
 
-declare type ColorTokenKey = 'color.accent.soft' | 'color.accent.strong' | 'color.ansi.black' | 'color.ansi.blue' | 'color.ansi.bright.black' | 'color.ansi.bright.blue' | 'color.ansi.bright.cyan' | 'color.ansi.bright.green' | 'color.ansi.bright.magenta' | 'color.ansi.bright.red' | 'color.ansi.bright.white' | 'color.ansi.bright.yellow' | 'color.ansi.cyan' | 'color.ansi.green' | 'color.ansi.magenta' | 'color.ansi.red' | 'color.ansi.white' | 'color.ansi.yellow' | 'color.bg.base' | 'color.bg.elevated' | 'color.bg.inset' | 'color.bg.surface' | 'color.bg.surface.overlay' | 'color.bg.surface.raised' | 'color.border.default' | 'color.border.focus' | 'color.border.muted' | 'color.border.strong' | 'color.brand.300' | 'color.brand.400' | 'color.brand.500' | 'color.danger' | 'color.danger.soft' | 'color.datepicker.cell.bg' | 'color.datepicker.cell.bg.hover' | 'color.datepicker.cell.bg.selected' | 'color.datepicker.cell.bg.today' | 'color.datepicker.cell.fg' | 'color.datepicker.cell.fg.disabled' | 'color.datepicker.cell.fg.other.month' | 'color.datepicker.cell.fg.selected' | 'color.datepicker.cell.fg.today' | 'color.datepicker.header.bg' | 'color.diff.insert.bg' | 'color.diff.remove.bg' | 'color.discovery' | 'color.discovery.soft' | 'color.drawer.handle' | 'color.drawer.handle.hover' | 'color.editor.bg' | 'color.editor.bracket.1' | 'color.editor.bracket.2' | 'color.editor.bracket.3' | 'color.editor.bracket.4' | 'color.editor.bracket.5' | 'color.editor.bracket.6' | 'color.editor.bracket.match.bg' | 'color.editor.bracket.match.border' | 'color.editor.cursor' | 'color.editor.fg' | 'color.editor.find.match.bg' | 'color.editor.find.match.border' | 'color.editor.find.range.bg' | 'color.editor.group.bg' | 'color.editor.group.border' | 'color.editor.group.drop.border' | 'color.editor.group.header.bg' | 'color.editor.indent.guide' | 'color.editor.indent.guide.active' | 'color.editor.line.highlight.bg' | 'color.editor.line.highlight.border' | 'color.editor.line.number' | 'color.editor.line.number.active' | 'color.editor.link' | 'color.editor.ruler' | 'color.editor.selection.bg' | 'color.editor.selection.inactive.bg' | 'color.editor.whitespace' | 'color.fg.default' | 'color.fg.disabled' | 'color.fg.inverse' | 'color.fg.muted' | 'color.fg.subtle' | 'color.gutter.added' | 'color.gutter.bg' | 'color.gutter.deleted' | 'color.gutter.modified' | 'color.info' | 'color.info.soft' | 'color.minimap.bg' | 'color.minimap.error' | 'color.minimap.find.match' | 'color.minimap.selection' | 'color.minimap.warning' | 'color.progress.fill' | 'color.progress.track' | 'color.scrollarea.thumb' | 'color.scrollarea.thumb.hover' | 'color.scrollarea.track' | 'color.secondary' | 'color.secondary.soft' | 'color.state.focus.ring' | 'color.state.hover' | 'color.state.pressed' | 'color.state.selected' | 'color.success' | 'color.success.soft' | 'color.tab.active.bg' | 'color.tab.active.border' | 'color.tab.active.fg' | 'color.tab.bg' | 'color.tab.border' | 'color.tab.fg' | 'color.tab.hover.bg' | 'color.tab.hover.fg' | 'color.tab.inactive.bg' | 'color.tab.inactive.fg' | 'color.tab.modified.border' | 'color.terminal.bg' | 'color.terminal.border' | 'color.terminal.cursor' | 'color.terminal.fg' | 'color.terminal.selection.bg' | 'color.terminal.selection.fg' | 'color.warning' | 'color.warning.soft';
-
 export declare interface ColumnDef {
     /** Unique column identifier, used for Cell matching and sort callbacks */
     id: string;
@@ -1375,6 +1377,8 @@ export declare interface ContextMenuTriggerProps extends Omit<ComponentPropsWith
 
 export declare function createThemeRegistry(): ThemeRegistry;
 
+export declare function createThemeRootApplier(root: HTMLElement): ThemeRootApplier;
+
 export declare const DataTable: DataTableCompound;
 
 declare const DataTableBody: ForwardRefExoticComponent<DataTableBodyProps & RefAttributes<HTMLTableSectionElement>>;
@@ -1482,6 +1486,14 @@ export declare interface DataTableVirtualBodyProps extends HTMLAttributes<HTMLTa
      * to avoid forced reflow on mount — a significant perf win for large tables.
      */
     fixedRowHeight?: boolean;
+    /** Called when a row is clicked. Not called if a `getRowProps` onClick prevents default. */
+    onRowClick?: (row: Row<any>, event: MouseEvent_2<HTMLTableRowElement>) => void;
+    /**
+     * Extra props for each `<tr>` (className, aria/data attributes, handlers).
+     * Positioning styles and data attributes owned by the table take precedence.
+     * Memoize it (e.g. `useCallback`): a new function re-renders every row.
+     */
+    getRowProps?: (row: Row<any>) => HTMLAttributes<HTMLTableRowElement>;
 }
 
 /**
@@ -2337,6 +2349,8 @@ declare const InputRoot: ForwardRefExoticComponent<Omit<InputRootProps, "ref"> &
 export declare interface InputRootProps extends Field.Root.Props, StyledComponentProps {
 }
 
+export declare function isBuiltInThemeId(id: string): id is BuiltInThemeId;
+
 /** True if the `year` is a leap year (Gregorian calendar). */
 export declare function isLeapYear(year: number): boolean;
 
@@ -2934,6 +2948,10 @@ export declare interface RadioRootProps extends Omit<ComponentPropsWithoutRef<ty
     value: string;
 }
 
+export declare interface RegisteredTheme extends ThemeSummary {
+    definition: ThemeDefinition;
+}
+
 export declare type ReorderMeta = {
     id: TabId;
     from: number;
@@ -3661,6 +3679,8 @@ export declare interface StyledComponentProps {
     size?: ComponentSize;
 }
 
+declare type SupportsColor = (value: string) => boolean;
+
 export declare type SurfaceElevation = 0 | 1 | 2 | 3;
 
 export declare type SurfaceType = 'base' | 'default' | 'raised' | 'overlay' | 'inset' | 'elevated';
@@ -3708,8 +3728,6 @@ declare const SwitchThumb: ForwardRefExoticComponent<SwitchThumbProps & RefAttri
 export declare interface SwitchThumbProps extends Omit<ComponentPropsWithoutRef<typeof Switch_2.Thumb>, 'color'>, StyledComponentProps {
 }
 
-declare type SyntaxTokenKey = 'syntax.class' | 'syntax.comment' | 'syntax.decorator' | 'syntax.function' | 'syntax.interface' | 'syntax.keyword' | 'syntax.keyword.control' | 'syntax.keyword.operator' | 'syntax.method' | 'syntax.namespace' | 'syntax.number' | 'syntax.operator' | 'syntax.parameter' | 'syntax.property' | 'syntax.punctuation' | 'syntax.regexp' | 'syntax.string' | 'syntax.string.escape' | 'syntax.style.comment' | 'syntax.style.function' | 'syntax.style.keyword' | 'syntax.style.type' | 'syntax.type' | 'syntax.variable';
-
 export declare type TabDescriptor = {
     id: TabId;
     title: string;
@@ -3911,8 +3929,6 @@ export declare interface TagInputProps extends Omit<HTMLAttributes<HTMLDivElemen
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 
-declare type TerminalTokenKey = never;
-
 declare const Text_2: TextComponent;
 export { Text_2 as Text }
 
@@ -3995,95 +4011,114 @@ declare interface TextOwnProps extends TypographyBaseProps, TruncationProps {
 export declare type TextProps<C extends TextElement = TextElement> = PolymorphicComponentProps<C, TextOwnProps>;
 
 export declare interface ThemeContextValue extends ThemeState {
-    setTheme: (theme: ThemeMode) => void;
+    setTheme: (themeId: ThemeMode) => void;
     setDensity: (density: ThemeDensity) => void;
     setMotion: (motion: ThemeMotion) => void;
 }
 
-export declare interface ThemeDefinition {
-    /** Stable identifier, used for persistence and activation. */
+export declare type ThemeDefinition = ThemeDefinitionV1;
+
+export declare interface ThemeDefinitionV1 {
+    schemaVersion: 1;
     id: string;
-    /** Human-readable display name. */
     name: string;
-    /** The built-in mode this theme inherits from. */
-    base: BuiltInThemeMode;
-    /** Optional author metadata. */
+    base: BuiltInThemeId;
     author?: string;
-    /** Optional version string. */
     version?: string;
-    /** UI chrome color overrides, keyed by dotted token path. */
-    colors?: Partial<Record<ColorTokenKey, string>>;
-    /** Syntax highlighting overrides. */
-    syntax?: Partial<Record<SyntaxTokenKey, string>>;
-    /** Terminal ANSI palette overrides. */
-    terminal?: Partial<Record<TerminalTokenKey, string>>;
+    description?: string;
+    tokens: Partial<Record<ThemeTokenKey, string>>;
 }
 
 export declare type ThemeDensity = 'compact' | 'comfortable';
 
-export declare interface ThemeInfo {
-    id: string;
-    name: string;
-    base: BuiltInThemeMode;
-    builtIn: boolean;
-}
-
 /**
  * A theme identifier. Built-in mode ids autocomplete; any registered custom
  * theme id is also accepted.
  */
-export declare type ThemeMode = BuiltInThemeMode | (string & {});
+export declare type ThemeMode = BuiltInThemeId | (string & {});
 
 export declare type ThemeMotion = 'normal' | 'reduced';
 
-export declare function ThemeProvider({ children, initialTheme, initialDensity, initialMotion, persist, }: ThemeProviderProps): JSX.Element;
+export declare type ThemeOwner = {
+    kind: 'builtin';
+    id: 'base-ui';
+} | {
+    kind: 'plugin';
+    id: string;
+} | {
+    kind: 'user';
+    id: string;
+};
+
+export declare function ThemeProvider({ children, themeId, onThemeChange, fallbackThemeId, initialDensity, initialMotion, registry, root, }: ThemeProviderProps): JSX.Element;
 
 export declare interface ThemeProviderProps extends PropsWithChildren {
-    initialTheme?: ThemeMode;
+    themeId: string;
+    onThemeChange?: (themeId: string) => void;
+    fallbackThemeId?: string;
     initialDensity?: ThemeDensity;
     initialMotion?: ThemeMotion;
-    persist?: boolean;
+    registry?: ThemeRegistry;
+    root?: HTMLElement | null;
 }
 
 export declare interface ThemeRegistry {
-    register(theme: ThemeDefinition): void;
-    unregister(id: string): void;
-    get(id: string): ThemeDefinition | undefined;
-    list(): ThemeInfo[];
+    register(theme: ThemeDefinition, owner: ThemeOwner): () => void;
+    unregister(id: string, owner: ThemeOwner): boolean;
+    unregisterOwner(owner: ThemeOwner): number;
+    get(id: string): Readonly<RegisteredTheme> | undefined;
     has(id: string): boolean;
-    apply(id: string): void;
-    active(): string | null;
+    getSnapshot(): ThemeRegistrySnapshot;
     subscribe(listener: ThemeRegistryListener): () => void;
 }
 
-/** Module-level singleton. */
 export declare const themeRegistry: ThemeRegistry;
 
-export declare type ThemeRegistryEvent = {
-    type: 'registered';
-    id: string;
-} | {
-    type: 'unregistered';
-    id: string;
-} | {
-    type: 'applied';
-    id: string;
-};
+export declare type ThemeRegistryListener = () => void;
+
+export declare interface ThemeRegistrySnapshot {
+    readonly themes: readonly Readonly<ThemeSummary>[];
+}
 
-export declare type ThemeRegistryListener = (event: ThemeRegistryEvent) => void;
+export declare interface ThemeRootApplier {
+    apply(theme: Readonly<RegisteredTheme>): void;
+    cleanup(): void;
+}
 
 export declare interface ThemeState {
-    theme: ThemeMode;
+    requestedThemeId: string;
+    activeTheme: Readonly<ThemeSummary>;
+    isFallback: boolean;
     density: ThemeDensity;
     motion: ThemeMotion;
 }
 
+export declare interface ThemeSummary {
+    id: string;
+    name: string;
+    base: BuiltInThemeId;
+    appearance: 'dark' | 'light';
+    description?: string;
+    builtIn: boolean;
+    owner: ThemeOwner;
+}
+
 export declare const ThemeSwitcher: NamedExoticComponent<ThemeSwitcherProps>;
 
 export declare interface ThemeSwitcherProps {
     className?: string;
 }
 
+declare type ThemeTokenKey = 'color.accent.soft' | 'color.accent.strong' | 'color.ansi.black' | 'color.ansi.blue' | 'color.ansi.bright.black' | 'color.ansi.bright.blue' | 'color.ansi.bright.cyan' | 'color.ansi.bright.green' | 'color.ansi.bright.magenta' | 'color.ansi.bright.red' | 'color.ansi.bright.white' | 'color.ansi.bright.yellow' | 'color.ansi.cyan' | 'color.ansi.green' | 'color.ansi.magenta' | 'color.ansi.red' | 'color.ansi.white' | 'color.ansi.yellow' | 'color.bg.base' | 'color.bg.elevated' | 'color.bg.inset' | 'color.bg.surface' | 'color.bg.surface.overlay' | 'color.bg.surface.raised' | 'color.border.default' | 'color.border.focus' | 'color.border.muted' | 'color.border.strong' | 'color.brand.300' | 'color.brand.400' | 'color.brand.500' | 'color.danger' | 'color.danger.soft' | 'color.datepicker.cell.bg' | 'color.datepicker.cell.bg.hover' | 'color.datepicker.cell.bg.selected' | 'color.datepicker.cell.bg.today' | 'color.datepicker.cell.fg' | 'color.datepicker.cell.fg.disabled' | 'color.datepicker.cell.fg.other.month' | 'color.datepicker.cell.fg.selected' | 'color.datepicker.cell.fg.today' | 'color.datepicker.header.bg' | 'color.diff.insert.bg' | 'color.diff.remove.bg' | 'color.discovery' | 'color.discovery.soft' | 'color.drawer.handle' | 'color.drawer.handle.hover' | 'color.editor.bg' | 'color.editor.bracket.1' | 'color.editor.bracket.2' | 'color.editor.bracket.3' | 'color.editor.bracket.4' | 'color.editor.bracket.5' | 'color.editor.bracket.6' | 'color.editor.bracket.match.bg' | 'color.editor.bracket.match.border' | 'color.editor.cursor' | 'color.editor.fg' | 'color.editor.find.match.bg' | 'color.editor.find.match.border' | 'color.editor.find.range.bg' | 'color.editor.group.bg' | 'color.editor.group.border' | 'color.editor.group.drop.border' | 'color.editor.group.header.bg' | 'color.editor.indent.guide' | 'color.editor.indent.guide.active' | 'color.editor.line.highlight.bg' | 'color.editor.line.highlight.border' | 'color.editor.line.number' | 'color.editor.line.number.active' | 'color.editor.link' | 'color.editor.ruler' | 'color.editor.selection.bg' | 'color.editor.selection.inactive.bg' | 'color.editor.whitespace' | 'color.fg.default' | 'color.fg.disabled' | 'color.fg.inverse' | 'color.fg.muted' | 'color.fg.subtle' | 'color.gutter.added' | 'color.gutter.bg' | 'color.gutter.deleted' | 'color.gutter.modified' | 'color.info' | 'color.info.soft' | 'color.minimap.bg' | 'color.minimap.error' | 'color.minimap.find.match' | 'color.minimap.selection' | 'color.minimap.warning' | 'color.progress.fill' | 'color.progress.track' | 'color.scrollarea.thumb' | 'color.scrollarea.thumb.hover' | 'color.scrollarea.track' | 'color.secondary' | 'color.secondary.soft' | 'color.state.focus.ring' | 'color.state.hover' | 'color.state.pressed' | 'color.state.selected' | 'color.success' | 'color.success.soft' | 'color.tab.active.bg' | 'color.tab.active.border' | 'color.tab.active.fg' | 'color.tab.bg' | 'color.tab.border' | 'color.tab.fg' | 'color.tab.hover.bg' | 'color.tab.hover.fg' | 'color.tab.inactive.bg' | 'color.tab.inactive.fg' | 'color.tab.modified.border' | 'color.terminal.bg' | 'color.terminal.border' | 'color.terminal.cursor' | 'color.terminal.fg' | 'color.terminal.selection.bg' | 'color.terminal.selection.fg' | 'color.warning' | 'color.warning.soft' | 'syntax.class' | 'syntax.comment' | 'syntax.decorator' | 'syntax.function' | 'syntax.interface' | 'syntax.keyword' | 'syntax.keyword.control' | 'syntax.keyword.operator' | 'syntax.method' | 'syntax.namespace' | 'syntax.number' | 'syntax.operator' | 'syntax.parameter' | 'syntax.property' | 'syntax.punctuation' | 'syntax.regexp' | 'syntax.string' | 'syntax.string.escape' | 'syntax.style.comment' | 'syntax.style.function' | 'syntax.style.keyword' | 'syntax.style.type' | 'syntax.type' | 'syntax.variable';
+
+export declare class ThemeValidationError extends Error {
+    readonly code: ThemeValidationErrorCode;
+    readonly path: string;
+    constructor(code: ThemeValidationErrorCode, path: string, message: string);
+}
+
+export declare type ThemeValidationErrorCode = 'unsupported_schema' | 'invalid_id' | 'invalid_metadata' | 'unknown_base' | 'unknown_token' | 'invalid_value' | 'duplicate_id' | 'reserved_id' | 'owner_mismatch';
+
 export declare function TimeColumns({ value, onChange, hourCycle, showSeconds, minuteStep, disabled, readOnly, className, }: TimeColumnsProps): JSX.Element;
 
 export declare interface TimeColumnsProps {
@@ -4741,12 +4776,7 @@ export declare function useTabDragBroker(): TabDragBrokerValue | null;
 
 export declare function useTheme(): ThemeContextValue;
 
-/**
- * React hook that returns the current list of registered themes (built-in +
- * custom) and re-renders the calling component whenever a theme is
- * registered or unregistered.
- */
-export declare function useThemeList(): readonly ThemeInfo[];
+export declare function useThemeList(registry?: ThemeRegistry): readonly Readonly<ThemeSummary>[];
 
 /** Returns the module-level theme registry singleton. */
 export declare function useThemeRegistry(): ThemeRegistry;
@@ -4787,6 +4817,8 @@ export declare interface ValidateSectionsResult {
     incomplete: boolean;
 }
 
+export declare function validateThemeDefinition(input: unknown, supportsColor?: SupportsColor): ThemeDefinition;
+
 declare type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
 export { }