@loykin/designkit 0.0.1-dev.5 → 0.0.1-dev.6

package/dist/index.d.cts

@@ -35,6 +35,14 @@ declare const badgeVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
 
+declare function Breadcrumb({ className, ...props }: React$1.ComponentProps<'nav'>): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React$1.ComponentProps<'ol'>): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function BreadcrumbPage({ className, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
+
 declare const buttonVariants: (props?: ({
     variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
@@ -236,37 +244,6 @@ declare function TabsList({ className, variant, ...props }: Tabs$2.List.Props &
 declare function TabsTrigger({ className, ...props }: Tabs$2.Tab.Props): react_jsx_runtime.JSX.Element;
 declare function TabsContent({ className, ...props }: Tabs$2.Panel.Props): react_jsx_runtime.JSX.Element;
 
-type ShellId = 'sidebar' | 'header';
-type DensityId = 'compact' | 'default' | 'comfortable';
-type TemplateId = 'table' | 'table-infinity' | 'table-drag' | 'table-card' | 'table-card-list' | 'tabbed' | 'form' | 'form-stacked' | 'form-wizard' | 'form-inline' | 'databody' | 'databody-detail' | 'databody-split' | 'sectioned' | 'typography' | 'colors' | 'login' | 'login-forgot' | 'login-reset' | 'login-otp' | 'dashboard' | 'workbench-panel-editor' | 'workbench-sql-editor' | 'workbench-agent-chat' | 'browse' | 'detail' | 'detail-record' | 'detail-full' | 'list-detail' | 'panel';
-interface GlobalTheme {
-    radius: number;
-    primaryHue: number;
-    primaryChroma: number;
-    fontScale: number;
-    lineHeight: number;
-    density: DensityId;
-    darkMode: boolean;
-}
-interface TemplateOverride {
-    radius?: number;
-    primaryChroma?: number;
-    density?: DensityId;
-    pagePaddingY?: string;
-    panelGap?: string;
-    toolbarHeight?: string;
-}
-interface ThemeState {
-    global: GlobalTheme;
-    overrides: Record<TemplateId, TemplateOverride>;
-    activeShell: ShellId;
-    activeTemplate: TemplateId;
-    setGlobal: (patch: Partial<GlobalTheme>) => void;
-    setOverride: (id: TemplateId, patch: Partial<TemplateOverride>) => void;
-    setShell: (shell: ShellId) => void;
-    setTemplate: (template: TemplateId) => void;
-}
-
 interface DashboardPanelProps {
     title?: string;
     description?: string;
@@ -295,6 +272,11 @@ interface DashboardBodyTemplateProps {
 }
 declare function DashboardBodyTemplate({ theme, className, title, description, topBar, toolbar, variableBar, children, contentClassName, }: DashboardBodyTemplateProps): react_jsx_runtime.JSX.Element;
 
+interface WorkbenchResizeState {
+    leftPaneWidth: number;
+    rightPaneWidth: number;
+    bottomPaneHeight: number;
+}
 interface WorkbenchBodyTemplateProps {
     theme?: CSSProperties;
     className?: string;
@@ -326,6 +308,7 @@ interface WorkbenchBodyTemplateProps {
     maxRightPaneWidth?: number;
     minBottomPaneHeight?: number;
     maxBottomPaneHeight?: number;
+    onResize?: (state: WorkbenchResizeState) => void;
     leftPaneClassName?: string;
     mainPaneClassName?: string;
     rightPaneClassName?: string;
@@ -335,7 +318,7 @@ interface WorkbenchBodyTemplateProps {
     /** Mobile Sheet label for the right pane trigger */
     rightPaneLabel?: string;
 }
-declare function WorkbenchBodyTemplate({ theme, className, contentClassName, title, description, status, topBar, headerRight, toolbar, actions, leftPane, mainPane, rightPane, bottomPane, children, resizable, leftPaneCollapsed, rightPaneCollapsed, bottomPaneCollapsed, leftPaneWidth, rightPaneWidth, bottomPaneHeight, minLeftPaneWidth, maxLeftPaneWidth, minRightPaneWidth, maxRightPaneWidth, minBottomPaneHeight, maxBottomPaneHeight, leftPaneClassName, mainPaneClassName, rightPaneClassName, bottomPaneClassName, leftPaneLabel, rightPaneLabel, }: WorkbenchBodyTemplateProps): react_jsx_runtime.JSX.Element;
+declare function WorkbenchBodyTemplate({ theme, className, contentClassName, title, description, status, topBar, headerRight, toolbar, actions, leftPane, mainPane, rightPane, bottomPane, children, resizable, leftPaneCollapsed, rightPaneCollapsed, bottomPaneCollapsed, leftPaneWidth, rightPaneWidth, bottomPaneHeight, minLeftPaneWidth, maxLeftPaneWidth, minRightPaneWidth, maxRightPaneWidth, minBottomPaneHeight, maxBottomPaneHeight, onResize, leftPaneClassName, mainPaneClassName, rightPaneClassName, bottomPaneClassName, leftPaneLabel, rightPaneLabel, }: WorkbenchBodyTemplateProps): react_jsx_runtime.JSX.Element;
 
 interface DataBodyTabProps {
     id: string;
@@ -632,7 +615,7 @@ interface DataPageFooterProps {
 }
 declare function Root({ children, className, style }: DataPageProps): react_jsx_runtime.JSX.Element;
 declare function Header({ children, className }: DataPageHeaderProps): react_jsx_runtime.JSX.Element;
-declare function TitleBlock({ title, description, breadcrumb, status, className }: DataPageTitleBlockProps): react_jsx_runtime.JSX.Element | null;
+declare function TitleBlock({ title, description, breadcrumb, status, className, }: DataPageTitleBlockProps): react_jsx_runtime.JSX.Element | null;
 declare function Actions({ children, className }: DataPageActionsProps): react_jsx_runtime.JSX.Element | null;
 declare function Tabs({ children, className }: DataPageTabsProps): react_jsx_runtime.JSX.Element | null;
 declare function Tab({ active, count, children, onClick, disabled, className }: DataPageTabProps): react_jsx_runtime.JSX.Element;
@@ -680,6 +663,7 @@ interface PageTopBarProps {
     right?: React__default.ReactNode;
     variant?: PageTopBarVariant;
     height?: string;
+    minHeight?: string;
     className?: string;
     style?: React__default.CSSProperties;
     children?: React__default.ReactNode;
@@ -706,10 +690,10 @@ declare function buildTopBar(opts: {
     left: React__default.ReactNode;
     right?: React__default.ReactNode;
 }): React__default.ReactNode;
-declare function PageTopBar({ left, right, variant, height, className, style, children, sidebarTrigger, }: PageTopBarProps): react_jsx_runtime.JSX.Element;
+declare function PageTopBar({ left, right, variant, height, minHeight, className, style, children, sidebarTrigger, }: PageTopBarProps): react_jsx_runtime.JSX.Element;
 
 interface TemplateNavigationItem {
-    id: TemplateId;
+    id: string;
     label: string;
     icon?: ComponentType<{
         className?: string;
@@ -723,7 +707,66 @@ interface TemplateNavigationGroup {
 
 declare function useIsMobile(): boolean;
 
-declare function useStyleInjector(): void;
+type ShellId = 'sidebar' | 'header';
+type DensityId = 'compact' | 'default' | 'comfortable';
+type CurrentTemplateId = 'form-wizard' | 'databody' | 'sectioned' | 'typography' | 'colors' | 'login' | 'dashboard' | 'workbench' | 'browse' | 'detail' | 'list-detail' | 'panel';
+/**
+ * @deprecated Playground/demo template identifiers remain available for one
+ * release for source compatibility. New code should use `CurrentTemplateId`
+ * for shipped DesignKit layouts or app-owned string ids for playground routes.
+ */
+type LegacyTemplateId = 'table' | 'table-infinity' | 'table-drag' | 'table-card' | 'table-card-list' | 'tabbed' | 'form' | 'form-stacked' | 'form-inline' | 'databody-detail' | 'databody-split' | 'login-forgot' | 'login-reset' | 'login-otp' | 'workbench-panel-editor' | 'workbench-sql-editor' | 'workbench-agent-chat' | 'detail-record' | 'detail-full';
+type TemplateId = CurrentTemplateId | LegacyTemplateId;
+interface GlobalTheme {
+    radius: number;
+    primaryHue: number;
+    primaryChroma: number;
+    fontScale: number;
+    lineHeight: number;
+    density: DensityId;
+    darkMode: boolean;
+}
+interface TemplateOverride {
+    radius?: number;
+    primaryChroma?: number;
+    density?: DensityId;
+    pagePaddingY?: string;
+    panelGap?: string;
+    toolbarHeight?: string;
+}
+interface ThemeState {
+    global: GlobalTheme;
+    overrides: Record<string, TemplateOverride>;
+    /**
+     * @deprecated Playground navigation state is no longer managed by DesignKit.
+     * Keep route or view state in the consuming app instead.
+     */
+    activeShell: ShellId;
+    /**
+     * @deprecated Playground navigation state is no longer managed by DesignKit.
+     * Keep route or view state in the consuming app instead.
+     */
+    activeTemplate: string;
+    setGlobal: (patch: Partial<GlobalTheme>) => void;
+    setOverride: (id: string, patch: Partial<TemplateOverride>) => void;
+    /**
+     * @deprecated No-op compatibility shim. Keep shell routing in the consuming app.
+     */
+    setShell: (shell: ShellId) => void;
+    /**
+     * @deprecated No-op compatibility shim. Keep template routing in the consuming app.
+     */
+    setTemplate: (template: string) => void;
+}
+
+interface StyleInjectorOptions {
+    /**
+     * CSS selector that receives the generated DesignKit variables.
+     * Defaults to `:root`. Use this when embedding DesignKit inside a scoped host.
+     */
+    scope?: string;
+}
+declare function useStyleInjector(options?: StyleInjectorOptions): void;
 /** Returns CSS custom properties for a template — used as inline style for external usage */
 declare function buildTemplateTheme(g: {
     radius: number;
@@ -746,4 +789,4 @@ declare function cn(...inputs: ClassValue[]): string;
 
 declare const useThemeStore: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
 
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BrowseBodyTemplate, type BrowseBodyTemplateProps, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, type ColorsBodyTemplateProps, DashboardBodyTemplate, type DashboardBodyTemplateProps, DashboardPanel, type DashboardPanelProps, type DataBodyBodyProps, type DataBodyFieldProps, type DataBodyGroupProps, type DataBodyRowProps, type DataBodySectionProps, type DataBodySummaryProps, type DataBodyTabProps, DataBodyTemplate, type DataBodyTemplateProps, DataPage, type DataPageActionsProps, type DataPageContentProps, type DataPageFooterProps, type DataPageGroupBodyProps, type DataPageGroupHeaderProps, type DataPageGroupProps, type DataPageGroupToolbarProps, type DataPageHeaderProps, type DataPageProps, type DataPageTabProps, type DataPageTabsProps, type DataPageTitleBlockProps, type DensityId, type DetailBodyHeaderProps, type DetailBodySectionProps, type DetailBodyTabProps, DetailBodyTemplate, type DetailBodyTemplateProps, type DetailBodyVariant, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateAction, type EmptyStateProps, FormWizardBodyTemplate, type FormWizardBodyTemplateProps, type FormWizardStep, type FormWizardVariant, type GlobalTheme, type GroupLayout, type GroupVariant, Input, Label, ListDetailBodyTemplate, type ListDetailBodyTemplateProps, type LoginBg, LoginBodyTemplate, type LoginBodyTemplateProps, type LoginCard, type LoginCardWidth, type LoginLayout, type LoginSide, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, PageBreadcrumb, type PageBreadcrumbItem, PageTopBar, type PageTopBarProps, type PageTopBarVariant, PanelTemplate, type PanelTemplateProps, type PanelTemplateSectionProps, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, type ShellId, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, type TemplateId, type TemplateNavigationGroup, type TemplateNavigationItem, type TemplateOverride, type ThemeState, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBodyTemplate, type TypographyBodyTemplateProps, WorkbenchBodyTemplate, type WorkbenchBodyTemplateProps, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useSidebarOptional, useStyleInjector, useThemeStore };
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BrowseBodyTemplate, type BrowseBodyTemplateProps, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, type ColorsBodyTemplateProps, type CurrentTemplateId, DashboardBodyTemplate, type DashboardBodyTemplateProps, DashboardPanel, type DashboardPanelProps, type DataBodyBodyProps, type DataBodyFieldProps, type DataBodyGroupProps, type DataBodyRowProps, type DataBodySectionProps, type DataBodySummaryProps, type DataBodyTabProps, DataBodyTemplate, type DataBodyTemplateProps, DataPage, type DataPageActionsProps, type DataPageContentProps, type DataPageFooterProps, type DataPageGroupBodyProps, type DataPageGroupHeaderProps, type DataPageGroupProps, type DataPageGroupToolbarProps, type DataPageHeaderProps, type DataPageProps, type DataPageTabProps, type DataPageTabsProps, type DataPageTitleBlockProps, type DensityId, type DetailBodyHeaderProps, type DetailBodySectionProps, type DetailBodyTabProps, DetailBodyTemplate, type DetailBodyTemplateProps, type DetailBodyVariant, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateAction, type EmptyStateProps, FormWizardBodyTemplate, type FormWizardBodyTemplateProps, type FormWizardStep, type FormWizardVariant, type GlobalTheme, type GroupLayout, type GroupVariant, Input, Label, type LegacyTemplateId, ListDetailBodyTemplate, type ListDetailBodyTemplateProps, type LoginBg, LoginBodyTemplate, type LoginBodyTemplateProps, type LoginCard, type LoginCardWidth, type LoginLayout, type LoginSide, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, PageBreadcrumb, type PageBreadcrumbItem, PageTopBar, type PageTopBarProps, type PageTopBarVariant, PanelTemplate, type PanelTemplateProps, type PanelTemplateSectionProps, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, type ShellId, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type StyleInjectorOptions, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, type TemplateId, type TemplateNavigationGroup, type TemplateNavigationItem, type TemplateOverride, type ThemeState, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBodyTemplate, type TypographyBodyTemplateProps, WorkbenchBodyTemplate, type WorkbenchBodyTemplateProps, type WorkbenchResizeState, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useSidebarOptional, useStyleInjector, useThemeStore };

package/dist/index.d.ts

@@ -35,6 +35,14 @@ declare const badgeVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
 
+declare function Breadcrumb({ className, ...props }: React$1.ComponentProps<'nav'>): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React$1.ComponentProps<'ol'>): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function BreadcrumbPage({ className, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
+
 declare const buttonVariants: (props?: ({
     variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
@@ -236,37 +244,6 @@ declare function TabsList({ className, variant, ...props }: Tabs$2.List.Props &
 declare function TabsTrigger({ className, ...props }: Tabs$2.Tab.Props): react_jsx_runtime.JSX.Element;
 declare function TabsContent({ className, ...props }: Tabs$2.Panel.Props): react_jsx_runtime.JSX.Element;
 
-type ShellId = 'sidebar' | 'header';
-type DensityId = 'compact' | 'default' | 'comfortable';
-type TemplateId = 'table' | 'table-infinity' | 'table-drag' | 'table-card' | 'table-card-list' | 'tabbed' | 'form' | 'form-stacked' | 'form-wizard' | 'form-inline' | 'databody' | 'databody-detail' | 'databody-split' | 'sectioned' | 'typography' | 'colors' | 'login' | 'login-forgot' | 'login-reset' | 'login-otp' | 'dashboard' | 'workbench-panel-editor' | 'workbench-sql-editor' | 'workbench-agent-chat' | 'browse' | 'detail' | 'detail-record' | 'detail-full' | 'list-detail' | 'panel';
-interface GlobalTheme {
-    radius: number;
-    primaryHue: number;
-    primaryChroma: number;
-    fontScale: number;
-    lineHeight: number;
-    density: DensityId;
-    darkMode: boolean;
-}
-interface TemplateOverride {
-    radius?: number;
-    primaryChroma?: number;
-    density?: DensityId;
-    pagePaddingY?: string;
-    panelGap?: string;
-    toolbarHeight?: string;
-}
-interface ThemeState {
-    global: GlobalTheme;
-    overrides: Record<TemplateId, TemplateOverride>;
-    activeShell: ShellId;
-    activeTemplate: TemplateId;
-    setGlobal: (patch: Partial<GlobalTheme>) => void;
-    setOverride: (id: TemplateId, patch: Partial<TemplateOverride>) => void;
-    setShell: (shell: ShellId) => void;
-    setTemplate: (template: TemplateId) => void;
-}
-
 interface DashboardPanelProps {
     title?: string;
     description?: string;
@@ -295,6 +272,11 @@ interface DashboardBodyTemplateProps {
 }
 declare function DashboardBodyTemplate({ theme, className, title, description, topBar, toolbar, variableBar, children, contentClassName, }: DashboardBodyTemplateProps): react_jsx_runtime.JSX.Element;
 
+interface WorkbenchResizeState {
+    leftPaneWidth: number;
+    rightPaneWidth: number;
+    bottomPaneHeight: number;
+}
 interface WorkbenchBodyTemplateProps {
     theme?: CSSProperties;
     className?: string;
@@ -326,6 +308,7 @@ interface WorkbenchBodyTemplateProps {
     maxRightPaneWidth?: number;
     minBottomPaneHeight?: number;
     maxBottomPaneHeight?: number;
+    onResize?: (state: WorkbenchResizeState) => void;
     leftPaneClassName?: string;
     mainPaneClassName?: string;
     rightPaneClassName?: string;
@@ -335,7 +318,7 @@ interface WorkbenchBodyTemplateProps {
     /** Mobile Sheet label for the right pane trigger */
     rightPaneLabel?: string;
 }
-declare function WorkbenchBodyTemplate({ theme, className, contentClassName, title, description, status, topBar, headerRight, toolbar, actions, leftPane, mainPane, rightPane, bottomPane, children, resizable, leftPaneCollapsed, rightPaneCollapsed, bottomPaneCollapsed, leftPaneWidth, rightPaneWidth, bottomPaneHeight, minLeftPaneWidth, maxLeftPaneWidth, minRightPaneWidth, maxRightPaneWidth, minBottomPaneHeight, maxBottomPaneHeight, leftPaneClassName, mainPaneClassName, rightPaneClassName, bottomPaneClassName, leftPaneLabel, rightPaneLabel, }: WorkbenchBodyTemplateProps): react_jsx_runtime.JSX.Element;
+declare function WorkbenchBodyTemplate({ theme, className, contentClassName, title, description, status, topBar, headerRight, toolbar, actions, leftPane, mainPane, rightPane, bottomPane, children, resizable, leftPaneCollapsed, rightPaneCollapsed, bottomPaneCollapsed, leftPaneWidth, rightPaneWidth, bottomPaneHeight, minLeftPaneWidth, maxLeftPaneWidth, minRightPaneWidth, maxRightPaneWidth, minBottomPaneHeight, maxBottomPaneHeight, onResize, leftPaneClassName, mainPaneClassName, rightPaneClassName, bottomPaneClassName, leftPaneLabel, rightPaneLabel, }: WorkbenchBodyTemplateProps): react_jsx_runtime.JSX.Element;
 
 interface DataBodyTabProps {
     id: string;
@@ -632,7 +615,7 @@ interface DataPageFooterProps {
 }
 declare function Root({ children, className, style }: DataPageProps): react_jsx_runtime.JSX.Element;
 declare function Header({ children, className }: DataPageHeaderProps): react_jsx_runtime.JSX.Element;
-declare function TitleBlock({ title, description, breadcrumb, status, className }: DataPageTitleBlockProps): react_jsx_runtime.JSX.Element | null;
+declare function TitleBlock({ title, description, breadcrumb, status, className, }: DataPageTitleBlockProps): react_jsx_runtime.JSX.Element | null;
 declare function Actions({ children, className }: DataPageActionsProps): react_jsx_runtime.JSX.Element | null;
 declare function Tabs({ children, className }: DataPageTabsProps): react_jsx_runtime.JSX.Element | null;
 declare function Tab({ active, count, children, onClick, disabled, className }: DataPageTabProps): react_jsx_runtime.JSX.Element;
@@ -680,6 +663,7 @@ interface PageTopBarProps {
     right?: React__default.ReactNode;
     variant?: PageTopBarVariant;
     height?: string;
+    minHeight?: string;
     className?: string;
     style?: React__default.CSSProperties;
     children?: React__default.ReactNode;
@@ -706,10 +690,10 @@ declare function buildTopBar(opts: {
     left: React__default.ReactNode;
     right?: React__default.ReactNode;
 }): React__default.ReactNode;
-declare function PageTopBar({ left, right, variant, height, className, style, children, sidebarTrigger, }: PageTopBarProps): react_jsx_runtime.JSX.Element;
+declare function PageTopBar({ left, right, variant, height, minHeight, className, style, children, sidebarTrigger, }: PageTopBarProps): react_jsx_runtime.JSX.Element;
 
 interface TemplateNavigationItem {
-    id: TemplateId;
+    id: string;
     label: string;
     icon?: ComponentType<{
         className?: string;
@@ -723,7 +707,66 @@ interface TemplateNavigationGroup {
 
 declare function useIsMobile(): boolean;
 
-declare function useStyleInjector(): void;
+type ShellId = 'sidebar' | 'header';
+type DensityId = 'compact' | 'default' | 'comfortable';
+type CurrentTemplateId = 'form-wizard' | 'databody' | 'sectioned' | 'typography' | 'colors' | 'login' | 'dashboard' | 'workbench' | 'browse' | 'detail' | 'list-detail' | 'panel';
+/**
+ * @deprecated Playground/demo template identifiers remain available for one
+ * release for source compatibility. New code should use `CurrentTemplateId`
+ * for shipped DesignKit layouts or app-owned string ids for playground routes.
+ */
+type LegacyTemplateId = 'table' | 'table-infinity' | 'table-drag' | 'table-card' | 'table-card-list' | 'tabbed' | 'form' | 'form-stacked' | 'form-inline' | 'databody-detail' | 'databody-split' | 'login-forgot' | 'login-reset' | 'login-otp' | 'workbench-panel-editor' | 'workbench-sql-editor' | 'workbench-agent-chat' | 'detail-record' | 'detail-full';
+type TemplateId = CurrentTemplateId | LegacyTemplateId;
+interface GlobalTheme {
+    radius: number;
+    primaryHue: number;
+    primaryChroma: number;
+    fontScale: number;
+    lineHeight: number;
+    density: DensityId;
+    darkMode: boolean;
+}
+interface TemplateOverride {
+    radius?: number;
+    primaryChroma?: number;
+    density?: DensityId;
+    pagePaddingY?: string;
+    panelGap?: string;
+    toolbarHeight?: string;
+}
+interface ThemeState {
+    global: GlobalTheme;
+    overrides: Record<string, TemplateOverride>;
+    /**
+     * @deprecated Playground navigation state is no longer managed by DesignKit.
+     * Keep route or view state in the consuming app instead.
+     */
+    activeShell: ShellId;
+    /**
+     * @deprecated Playground navigation state is no longer managed by DesignKit.
+     * Keep route or view state in the consuming app instead.
+     */
+    activeTemplate: string;
+    setGlobal: (patch: Partial<GlobalTheme>) => void;
+    setOverride: (id: string, patch: Partial<TemplateOverride>) => void;
+    /**
+     * @deprecated No-op compatibility shim. Keep shell routing in the consuming app.
+     */
+    setShell: (shell: ShellId) => void;
+    /**
+     * @deprecated No-op compatibility shim. Keep template routing in the consuming app.
+     */
+    setTemplate: (template: string) => void;
+}
+
+interface StyleInjectorOptions {
+    /**
+     * CSS selector that receives the generated DesignKit variables.
+     * Defaults to `:root`. Use this when embedding DesignKit inside a scoped host.
+     */
+    scope?: string;
+}
+declare function useStyleInjector(options?: StyleInjectorOptions): void;
 /** Returns CSS custom properties for a template — used as inline style for external usage */
 declare function buildTemplateTheme(g: {
     radius: number;
@@ -746,4 +789,4 @@ declare function cn(...inputs: ClassValue[]): string;
 
 declare const useThemeStore: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
 
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BrowseBodyTemplate, type BrowseBodyTemplateProps, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, type ColorsBodyTemplateProps, DashboardBodyTemplate, type DashboardBodyTemplateProps, DashboardPanel, type DashboardPanelProps, type DataBodyBodyProps, type DataBodyFieldProps, type DataBodyGroupProps, type DataBodyRowProps, type DataBodySectionProps, type DataBodySummaryProps, type DataBodyTabProps, DataBodyTemplate, type DataBodyTemplateProps, DataPage, type DataPageActionsProps, type DataPageContentProps, type DataPageFooterProps, type DataPageGroupBodyProps, type DataPageGroupHeaderProps, type DataPageGroupProps, type DataPageGroupToolbarProps, type DataPageHeaderProps, type DataPageProps, type DataPageTabProps, type DataPageTabsProps, type DataPageTitleBlockProps, type DensityId, type DetailBodyHeaderProps, type DetailBodySectionProps, type DetailBodyTabProps, DetailBodyTemplate, type DetailBodyTemplateProps, type DetailBodyVariant, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateAction, type EmptyStateProps, FormWizardBodyTemplate, type FormWizardBodyTemplateProps, type FormWizardStep, type FormWizardVariant, type GlobalTheme, type GroupLayout, type GroupVariant, Input, Label, ListDetailBodyTemplate, type ListDetailBodyTemplateProps, type LoginBg, LoginBodyTemplate, type LoginBodyTemplateProps, type LoginCard, type LoginCardWidth, type LoginLayout, type LoginSide, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, PageBreadcrumb, type PageBreadcrumbItem, PageTopBar, type PageTopBarProps, type PageTopBarVariant, PanelTemplate, type PanelTemplateProps, type PanelTemplateSectionProps, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, type ShellId, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, type TemplateId, type TemplateNavigationGroup, type TemplateNavigationItem, type TemplateOverride, type ThemeState, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBodyTemplate, type TypographyBodyTemplateProps, WorkbenchBodyTemplate, type WorkbenchBodyTemplateProps, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useSidebarOptional, useStyleInjector, useThemeStore };
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BrowseBodyTemplate, type BrowseBodyTemplateProps, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, type ColorsBodyTemplateProps, type CurrentTemplateId, DashboardBodyTemplate, type DashboardBodyTemplateProps, DashboardPanel, type DashboardPanelProps, type DataBodyBodyProps, type DataBodyFieldProps, type DataBodyGroupProps, type DataBodyRowProps, type DataBodySectionProps, type DataBodySummaryProps, type DataBodyTabProps, DataBodyTemplate, type DataBodyTemplateProps, DataPage, type DataPageActionsProps, type DataPageContentProps, type DataPageFooterProps, type DataPageGroupBodyProps, type DataPageGroupHeaderProps, type DataPageGroupProps, type DataPageGroupToolbarProps, type DataPageHeaderProps, type DataPageProps, type DataPageTabProps, type DataPageTabsProps, type DataPageTitleBlockProps, type DensityId, type DetailBodyHeaderProps, type DetailBodySectionProps, type DetailBodyTabProps, DetailBodyTemplate, type DetailBodyTemplateProps, type DetailBodyVariant, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateAction, type EmptyStateProps, FormWizardBodyTemplate, type FormWizardBodyTemplateProps, type FormWizardStep, type FormWizardVariant, type GlobalTheme, type GroupLayout, type GroupVariant, Input, Label, type LegacyTemplateId, ListDetailBodyTemplate, type ListDetailBodyTemplateProps, type LoginBg, LoginBodyTemplate, type LoginBodyTemplateProps, type LoginCard, type LoginCardWidth, type LoginLayout, type LoginSide, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, PageBreadcrumb, type PageBreadcrumbItem, PageTopBar, type PageTopBarProps, type PageTopBarVariant, PanelTemplate, type PanelTemplateProps, type PanelTemplateSectionProps, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, type ShellId, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type StyleInjectorOptions, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, type TemplateId, type TemplateNavigationGroup, type TemplateNavigationItem, type TemplateOverride, type ThemeState, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBodyTemplate, type TypographyBodyTemplateProps, WorkbenchBodyTemplate, type WorkbenchBodyTemplateProps, type WorkbenchResizeState, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useSidebarOptional, useStyleInjector, useThemeStore };