@ramme-io/ui 4.1.1 → 4.2.1

package/dist/index.d.ts

@@ -68,6 +68,7 @@ export * from './lib/hooks/useChartTheme';
 export * from './lib/hooks/useMediaQuery';
 export * from './lib/hooks/useBodyScrollLock';
 export * from './lib/hooks/useSheetGesture';
+export * from './lib/hooks/useDialogFocus';
 export * from './components/hardware/CircularDial';
 export * from './components/hardware/HardwareCommandButton';
 export * from './components/hardware/Sparkline';

package/dist/index.js

@@ -6,10 +6,10 @@ import { Loader as n } from "./blocks/ai/Loader.js";
 import { Actions as s, Suggestion as T } from "./blocks/ai/Actions.js";
 import { PromptInput as h } from "./blocks/ai/PromptInput.js";
 import { Message as c } from "./blocks/ai/Message.js";
-import { Conversation as g } from "./blocks/ai/Conversation.js";
+import { Conversation as S } from "./blocks/ai/Conversation.js";
 import { ChatFAB as b } from "./blocks/ai/ChatFAB.js";
-import { AIChatThread as I } from "./components/ai/AIChatThread/AIChatThread.js";
-import { KeyInjectionOverlay as D } from "./components/ai/KeyInjectionOverlay.js";
+import { AIChatThread as D } from "./components/ai/AIChatThread/AIChatThread.js";
+import { KeyInjectionOverlay as A } from "./components/ai/KeyInjectionOverlay.js";
 import { TAY_DREAMBOAT_THEME as B, ThemeProvider as R, availableThemes as E, useTheme as v } from "./contexts/ThemeContext.js";
 import { AuthLayout as y } from "./components/auth/AuthLayout.js";
 import { LoginPage as w } from "./components/auth/LoginPage.js";
@@ -31,10 +31,10 @@ import { Alert as nr } from "./components/feedback/Alert.js";
 import { EmptyState as sr } from "./components/feedback/EmptyState.js";
 import { Skeleton as dr } from "./components/feedback/Skeleton.js";
 import { Plan as Cr } from "./components/feedback/Plan.js";
-import { TippyTooltip as Sr } from "./components/feedback/TippyTooltip.js";
+import { TippyTooltip as gr } from "./components/feedback/TippyTooltip.js";
 import { Toast as ur } from "./components/feedback/Toast.js";
-import { ToastProvider as Pr, useToast as Ir } from "./components/feedback/ToastProvider.js";
-import { Label as Dr } from "./components/forms/Label.js";
+import { ToastProvider as Pr, useToast as Dr } from "./components/feedback/ToastProvider.js";
+import { Label as Ar } from "./components/forms/Label.js";
 import { ButtonGroup as Br } from "./components/forms/ButtonGroup.js";
 import { Checkbox as Er } from "./components/forms/Checkbox.js";
 import { ComboBox as Mr } from "./components/forms/ComboBox.js";
@@ -54,247 +54,249 @@ import { useChartTheme as mo } from "./lib/hooks/useChartTheme.js";
 import { MOBILE_BREAKPOINT_PX as po, MOBILE_BREAKPOINT_QUERY as fo, useIsMobile as xo, useMediaQuery as io } from "./lib/hooks/useMediaQuery.js";
 import { useBodyScrollLock as lo } from "./lib/hooks/useBodyScrollLock.js";
 import { DISMISS_THRESHOLD as To, FLICK_VELOCITY as ho, settleTo as Co, useSheetGesture as co } from "./lib/hooks/useSheetGesture.js";
-import { CircularDial as go } from "./components/hardware/CircularDial.js";
-import { HardwareCommandButton as bo } from "./components/hardware/HardwareCommandButton.js";
-import { Sparkline as Io } from "./components/hardware/Sparkline.js";
-import { EdgeInsightTerminal as Do } from "./components/hardware/EdgeInsightTerminal.js";
-import { DeviceCard as Bo } from "./blocks/iot/DeviceCard.js";
-import { WaterPumpControl as Eo } from "./blocks/iot/WaterPumpControl.js";
-import { TelemetryLog as Mo } from "./blocks/iot/TelemetryLog.js";
-import { DataCard as Fo } from "./components/molecular/DataCard.js";
-import { StateMatrix as ko } from "./components/molecular/StateMatrix.js";
-import { ConnectorOverlay as _o } from "./components/molecular/ConnectorOverlay.js";
-import { AppShell as Go } from "./components/layout/AppShell.js";
-import { SettingsContainer as Ko } from "./components/layout/SettingsContainer.js";
-import { DetailDrawer as Uo } from "./components/layout/DetailDrawer.js";
-import { RammeInspectorTrigger as Qo } from "./components/layout/RammeInspectorTrigger.js";
-import { AboutRamme as zo } from "./components/layout/AboutRamme.js";
-import { Header as Xo } from "./components/layout/Header.js";
-import { Toolbar as Jo } from "./components/layout/Toolbar.js";
-import { FilterPanel as $o } from "./components/layout/FilterPanel.js";
-import { Statusbar as oe } from "./components/layout/Statusbar.js";
-import { Accordion as te, AccordionItem as me } from "./components/layout/Accordion.js";
-import { Card as pe, CardContent as fe, CardDescription as xe, CardFooter as ie, CardHeader as ne, CardLabel as le, CardTitle as se } from "./components/layout/Card.js";
-import { Drawer as de } from "./components/layout/Drawer.js";
-import { Sheet as Ce } from "./components/layout/Sheet.js";
-import { DefinitionDescription as Se, DefinitionList as ge, DefinitionTerm as ue, List as be, ListItem as Pe } from "./components/layout/List.js";
-import { Modal as Ae } from "./components/layout/Modal.js";
-import { Sidebar as Le } from "./components/layout/Sidebar.js";
-import { ActionBar as Re } from "./components/layout/ActionBar.js";
-import { PageContainer as ve } from "./components/layout/PageContainer.js";
-import { PageHeader as ye } from "./components/layout/PageHeader.js";
-import { SectionHeader as we } from "./components/layout/SectionHeader.js";
-import { ButtonItem as Oe, UserNav as _e } from "./components/layout/UserNav.js";
-import { CollectionLayout as Ge } from "./components/layout/CollectionLayout.js";
-import { DenseMetricRibbon as Ke } from "./components/layout/DenseMetricRibbon.js";
-import { BreadcrumbItem as Ue, Breadcrumbs as Ye } from "./components/navigation/Breadcrumbs.js";
-import { Menu as We, MenuDivider as ze, MenuItem as je } from "./components/navigation/Menu.js";
-import { MobileNav as qe } from "./components/navigation/MobileNav.js";
-import { Pagination as Ze } from "./components/navigation/Pagination.js";
-import { Stepper as rt } from "./components/navigation/Stepper.js";
-import { TabPanel as et, Tabs as tt } from "./components/navigation/Tabs.js";
-import { FinancialAssetSchema as at, WatchlistEngine as pt } from "./blocks/engines/WatchlistEngine.js";
-import { Avatar as xt } from "./components/ui/Avatar.js";
-import { Badge as nt, badgeVariants as lt } from "./components/ui/Badge.js";
-import { Button as Tt, buttonVariants as dt } from "./components/ui/Button.js";
-import { Icon as Ct } from "./components/ui/Icon.js";
-import { BrandLogo as St } from "./components/ui/BrandLogo.js";
-import { cn as ut } from "./utils/cn.js";
-import { formatValue as Pt } from "./lib/formatters.js";
-import { ThemeSynthesizer as At } from "./components/theme/ThemeSynthesizer.js";
-import { AestheticProfileGrid as Lt } from "./components/theme/AestheticProfileGrid.js";
-import { FineTuningControls as Rt } from "./components/theme/FineTuningControls.js";
-import { PaletteSwatch as vt, ThemeLivePreview as Mt } from "./components/theme/ThemeLivePreview.js";
-import { ThemeSettings as Ft } from "./components/theme/ThemeSettings.js";
-import { ThemeLab as kt } from "./components/theme/ThemeLab.js";
-import { AESTHETIC_PROFILES as _t, generateFromProfile as Ht, generateFromPrompt as Gt, generateRandom as Vt, hslToCssString as Kt, hslToRgb as Nt, hslToRgbString as Ut, lightToDark as Yt, paletteToRgbVars as Qt } from "./lib/theme/ThemeGenerator.logic.js";
-import { THEME_TOKEN_VARS as zt, applyThemeToDom as jt, generateRandomTheme as Xt, getContrastColor as qt, hexToRgbTriplet as Jt, isCustomTheme as Zt, loadGoogleFont as $t, randomRgb as rm, tokensToVars as om } from "./lib/theme/themeUtils.js";
-import { generateThemeFromPrompt as tm } from "./lib/theme/themeAgent.js";
-import { CompanyProfileCard as am } from "./components/ai/CompanyProfileCard/CompanyProfileCard.js";
-import { CounterpartyGraphCard as fm } from "./components/ai/CounterpartyGraphCard/CounterpartyGraphCard.js";
-import { DivergenceMetricsCard as im } from "./components/ai/DivergenceMetricsCard/DivergenceMetricsCard.js";
-import { ArchitectureReferenceCard as lm } from "./components/ai/ArchitectureReferenceCard/ArchitectureReferenceCard.js";
-import { LiveQuoteCard as Tm } from "./components/ai/LiveQuoteCard/LiveQuoteCard.js";
-import { NewsSummaryCard as hm } from "./components/ai/NewsSummaryCard/NewsSummaryCard.js";
-import { StockChart as cm } from "./components/ai/StockChart/StockChart.js";
-import { TelemetryGraph as gm } from "./components/ai/TelemetryGraph/TelemetryGraph.js";
-import { ShowroomContainer as bm } from "./components/showroom/ShowroomContainer.js";
-import { ShowroomSidebar as Im } from "./components/showroom/ShowroomSidebar.js";
-import { ShowroomCanvas as Dm } from "./components/showroom/ShowroomCanvas.js";
-import { SkuBadge as Bm } from "./components/showroom/SkuBadge.js";
-import { resolvePreview as Em } from "./components/showroom/ShowroomRenderer.js";
+import { useDialogFocus as So } from "./lib/hooks/useDialogFocus.js";
+import { CircularDial as bo } from "./components/hardware/CircularDial.js";
+import { HardwareCommandButton as Do } from "./components/hardware/HardwareCommandButton.js";
+import { Sparkline as Ao } from "./components/hardware/Sparkline.js";
+import { EdgeInsightTerminal as Bo } from "./components/hardware/EdgeInsightTerminal.js";
+import { DeviceCard as Eo } from "./blocks/iot/DeviceCard.js";
+import { WaterPumpControl as Mo } from "./blocks/iot/WaterPumpControl.js";
+import { TelemetryLog as Fo } from "./blocks/iot/TelemetryLog.js";
+import { DataCard as ko } from "./components/molecular/DataCard.js";
+import { StateMatrix as _o } from "./components/molecular/StateMatrix.js";
+import { ConnectorOverlay as Go } from "./components/molecular/ConnectorOverlay.js";
+import { AppShell as Ko } from "./components/layout/AppShell.js";
+import { SettingsContainer as Uo } from "./components/layout/SettingsContainer.js";
+import { DetailDrawer as Qo } from "./components/layout/DetailDrawer.js";
+import { RammeInspectorTrigger as zo } from "./components/layout/RammeInspectorTrigger.js";
+import { AboutRamme as Xo } from "./components/layout/AboutRamme.js";
+import { Header as Jo } from "./components/layout/Header.js";
+import { Toolbar as $o } from "./components/layout/Toolbar.js";
+import { FilterPanel as oe } from "./components/layout/FilterPanel.js";
+import { Statusbar as te } from "./components/layout/Statusbar.js";
+import { Accordion as ae, AccordionItem as pe } from "./components/layout/Accordion.js";
+import { Card as xe, CardContent as ie, CardDescription as ne, CardFooter as le, CardHeader as se, CardLabel as Te, CardTitle as de } from "./components/layout/Card.js";
+import { Drawer as Ce } from "./components/layout/Drawer.js";
+import { Sheet as ge } from "./components/layout/Sheet.js";
+import { DefinitionDescription as ue, DefinitionList as be, DefinitionTerm as Pe, List as De, ListItem as Ie } from "./components/layout/List.js";
+import { Modal as Le } from "./components/layout/Modal.js";
+import { Sidebar as Re } from "./components/layout/Sidebar.js";
+import { ActionBar as ve } from "./components/layout/ActionBar.js";
+import { PageContainer as ye } from "./components/layout/PageContainer.js";
+import { PageHeader as we } from "./components/layout/PageHeader.js";
+import { SectionHeader as Oe } from "./components/layout/SectionHeader.js";
+import { ButtonItem as He, UserNav as Ge } from "./components/layout/UserNav.js";
+import { CollectionLayout as Ke } from "./components/layout/CollectionLayout.js";
+import { DenseMetricRibbon as Ue } from "./components/layout/DenseMetricRibbon.js";
+import { BreadcrumbItem as Qe, Breadcrumbs as We } from "./components/navigation/Breadcrumbs.js";
+import { Menu as je, MenuDivider as Xe, MenuItem as qe } from "./components/navigation/Menu.js";
+import { MobileNav as Ze } from "./components/navigation/MobileNav.js";
+import { Pagination as rt } from "./components/navigation/Pagination.js";
+import { Stepper as et } from "./components/navigation/Stepper.js";
+import { TabPanel as mt, Tabs as at } from "./components/navigation/Tabs.js";
+import { FinancialAssetSchema as ft, WatchlistEngine as xt } from "./blocks/engines/WatchlistEngine.js";
+import { Avatar as nt } from "./components/ui/Avatar.js";
+import { Badge as st, badgeVariants as Tt } from "./components/ui/Badge.js";
+import { Button as ht, buttonVariants as Ct } from "./components/ui/Button.js";
+import { Icon as gt } from "./components/ui/Icon.js";
+import { BrandLogo as ut } from "./components/ui/BrandLogo.js";
+import { cn as Pt } from "./utils/cn.js";
+import { formatValue as It } from "./lib/formatters.js";
+import { ThemeSynthesizer as Lt } from "./components/theme/ThemeSynthesizer.js";
+import { AestheticProfileGrid as Rt } from "./components/theme/AestheticProfileGrid.js";
+import { FineTuningControls as vt } from "./components/theme/FineTuningControls.js";
+import { PaletteSwatch as yt, ThemeLivePreview as Ft } from "./components/theme/ThemeLivePreview.js";
+import { ThemeSettings as kt } from "./components/theme/ThemeSettings.js";
+import { ThemeLab as _t } from "./components/theme/ThemeLab.js";
+import { AESTHETIC_PROFILES as Gt, generateFromProfile as Vt, generateFromPrompt as Kt, generateRandom as Nt, hslToCssString as Ut, hslToRgb as Yt, hslToRgbString as Qt, lightToDark as Wt, paletteToRgbVars as zt } from "./lib/theme/ThemeGenerator.logic.js";
+import { THEME_TOKEN_VARS as Xt, applyThemeToDom as qt, generateRandomTheme as Jt, getContrastColor as Zt, hexToRgbTriplet as $t, isCustomTheme as rm, loadGoogleFont as om, randomRgb as em, tokensToVars as tm } from "./lib/theme/themeUtils.js";
+import { generateThemeFromPrompt as am } from "./lib/theme/themeAgent.js";
+import { CompanyProfileCard as fm } from "./components/ai/CompanyProfileCard/CompanyProfileCard.js";
+import { CounterpartyGraphCard as im } from "./components/ai/CounterpartyGraphCard/CounterpartyGraphCard.js";
+import { DivergenceMetricsCard as lm } from "./components/ai/DivergenceMetricsCard/DivergenceMetricsCard.js";
+import { ArchitectureReferenceCard as Tm } from "./components/ai/ArchitectureReferenceCard/ArchitectureReferenceCard.js";
+import { LiveQuoteCard as hm } from "./components/ai/LiveQuoteCard/LiveQuoteCard.js";
+import { NewsSummaryCard as cm } from "./components/ai/NewsSummaryCard/NewsSummaryCard.js";
+import { StockChart as Sm } from "./components/ai/StockChart/StockChart.js";
+import { TelemetryGraph as bm } from "./components/ai/TelemetryGraph/TelemetryGraph.js";
+import { ShowroomContainer as Dm } from "./components/showroom/ShowroomContainer.js";
+import { ShowroomSidebar as Am } from "./components/showroom/ShowroomSidebar.js";
+import { ShowroomCanvas as Bm } from "./components/showroom/ShowroomCanvas.js";
+import { SkuBadge as Em } from "./components/showroom/SkuBadge.js";
+import { resolvePreview as Mm } from "./components/showroom/ShowroomRenderer.js";
 export {
-  _t as AESTHETIC_PROFILES,
-  I as AIChatThread,
+  Gt as AESTHETIC_PROFILES,
+  D as AIChatThread,
   a as AUTO_REGISTRY,
-  zo as AboutRamme,
-  te as Accordion,
-  me as AccordionItem,
-  Re as ActionBar,
+  Xo as AboutRamme,
+  ae as Accordion,
+  pe as AccordionItem,
+  ve as ActionBar,
   s as Actions,
   V as ActivityFeed,
-  Lt as AestheticProfileGrid,
+  Rt as AestheticProfileGrid,
   nr as Alert,
-  Go as AppShell,
-  lm as ArchitectureReferenceCard,
+  Ko as AppShell,
+  Tm as ArchitectureReferenceCard,
   Y as AreaChart,
   y as AuthLayout,
-  xt as Avatar,
-  nt as Badge,
+  nt as Avatar,
+  st as Badge,
   W as BarChart,
-  St as BrandLogo,
-  Ue as BreadcrumbItem,
-  Ye as Breadcrumbs,
-  Tt as Button,
+  ut as BrandLogo,
+  Qe as BreadcrumbItem,
+  We as Breadcrumbs,
+  ht as Button,
   Br as ButtonGroup,
-  Oe as ButtonItem,
-  pe as Card,
-  fe as CardContent,
-  xe as CardDescription,
-  ie as CardFooter,
-  ne as CardHeader,
-  le as CardLabel,
-  se as CardTitle,
+  He as ButtonItem,
+  xe as Card,
+  ie as CardContent,
+  ne as CardDescription,
+  le as CardFooter,
+  se as CardHeader,
+  Te as CardLabel,
+  de as CardTitle,
   j as ChartWithTable,
   b as ChatFAB,
   Er as Checkbox,
-  go as CircularDial,
+  bo as CircularDial,
   er as CodeBlock,
-  Ge as CollectionLayout,
+  Ke as CollectionLayout,
   Mr as ComboBox,
-  am as CompanyProfileCard,
-  _o as ConnectorOverlay,
-  g as Conversation,
-  fm as CounterpartyGraphCard,
+  fm as CompanyProfileCard,
+  Go as ConnectorOverlay,
+  S as Conversation,
+  im as CounterpartyGraphCard,
   To as DISMISS_THRESHOLD,
-  Fo as DataCard,
+  ko as DataCard,
   H as DataTable,
   Fr as DatePicker,
-  Se as DefinitionDescription,
-  ge as DefinitionList,
-  ue as DefinitionTerm,
-  Ke as DenseMetricRibbon,
-  Uo as DetailDrawer,
-  Bo as DeviceCard,
-  im as DivergenceMetricsCard,
-  de as Drawer,
-  Do as EdgeInsightTerminal,
+  ue as DefinitionDescription,
+  be as DefinitionList,
+  Pe as DefinitionTerm,
+  Ue as DenseMetricRibbon,
+  Qo as DetailDrawer,
+  Eo as DeviceCard,
+  lm as DivergenceMetricsCard,
+  Ce as Drawer,
+  Bo as EdgeInsightTerminal,
   sr as EmptyState,
   ho as FLICK_VELOCITY,
   kr as FileUpload,
-  $o as FilterPanel,
-  at as FinancialAssetSchema,
-  Rt as FineTuningControls,
+  oe as FilterPanel,
+  ft as FinancialAssetSchema,
+  vt as FineTuningControls,
   _r as FormTemplate,
-  bo as HardwareCommandButton,
-  Xo as Header,
-  Ct as Icon,
+  Do as HardwareCommandButton,
+  Jo as Header,
+  gt as Icon,
   Gr as Input,
-  D as KeyInjectionOverlay,
+  A as KeyInjectionOverlay,
   pr as KpiGrid,
-  Dr as Label,
+  Ar as Label,
   q as LineChart,
-  be as List,
-  Pe as ListItem,
-  Tm as LiveQuoteCard,
+  De as List,
+  Ie as ListItem,
+  hm as LiveQuoteCard,
   n as Loader,
   w as LoginPage,
   po as MOBILE_BREAKPOINT_PX,
   fo as MOBILE_BREAKPOINT_QUERY,
-  We as Menu,
-  ze as MenuDivider,
-  je as MenuItem,
+  je as Menu,
+  Xe as MenuDivider,
+  qe as MenuItem,
   c as Message,
-  qe as MobileNav,
-  Ae as Modal,
+  Ze as MobileNav,
+  Le as Modal,
   Kr as MultiSelect,
-  hm as NewsSummaryCard,
-  ve as PageContainer,
-  ye as PageHeader,
-  Ze as Pagination,
-  vt as PaletteSwatch,
+  cm as NewsSummaryCard,
+  ye as PageContainer,
+  we as PageHeader,
+  rt as Pagination,
+  yt as PaletteSwatch,
   Z as PieChart,
   Cr as Plan,
   h as PromptInput,
   Ur as Radio,
-  Qo as RammeInspectorTrigger,
+  zo as RammeInspectorTrigger,
   rr as ScatterChart,
   Qr as SearchInput,
-  we as SectionHeader,
+  Oe as SectionHeader,
   zr as SegmentedControl,
   Xr as Select,
-  Ko as SettingsContainer,
-  Ce as Sheet,
-  Dm as ShowroomCanvas,
-  bm as ShowroomContainer,
-  Im as ShowroomSidebar,
-  Le as Sidebar,
+  Uo as SettingsContainer,
+  ge as Sheet,
+  Bm as ShowroomCanvas,
+  Dm as ShowroomContainer,
+  Am as ShowroomSidebar,
+  Re as Sidebar,
   O as SignupPage,
   dr as Skeleton,
-  Bm as SkuBadge,
-  Io as Sparkline,
+  Em as SkuBadge,
+  Ao as Sparkline,
   mr as StatCard,
-  ko as StateMatrix,
+  _o as StateMatrix,
   xr as StatusBadge,
-  oe as Statusbar,
-  rt as Stepper,
-  cm as StockChart,
+  te as Statusbar,
+  et as Stepper,
+  Sm as StockChart,
   T as Suggestion,
   $r as Switch,
   B as TAY_DREAMBOAT_THEME,
-  zt as THEME_TOKEN_VARS,
-  et as TabPanel,
+  Xt as THEME_TOKEN_VARS,
+  mt as TabPanel,
   N as Table,
-  tt as Tabs,
-  gm as TelemetryGraph,
-  Mo as TelemetryLog,
+  at as Tabs,
+  bm as TelemetryGraph,
+  Fo as TelemetryLog,
   Jr as Textarea,
-  kt as ThemeLab,
-  Mt as ThemeLivePreview,
+  _t as ThemeLab,
+  Ft as ThemeLivePreview,
   R as ThemeProvider,
-  Ft as ThemeSettings,
-  At as ThemeSynthesizer,
-  Sr as TippyTooltip,
+  kt as ThemeSettings,
+  Lt as ThemeSynthesizer,
+  gr as TippyTooltip,
   ur as Toast,
   Pr as ToastProvider,
   ro as ToggleSwitch,
-  Jo as Toolbar,
-  _e as UserNav,
-  pt as WatchlistEngine,
-  Eo as WaterPumpControl,
-  jt as applyThemeToDom,
+  $o as Toolbar,
+  Ge as UserNav,
+  xt as WatchlistEngine,
+  Mo as WaterPumpControl,
+  qt as applyThemeToDom,
   E as availableThemes,
-  lt as badgeVariants,
-  dt as buttonVariants,
-  ut as cn,
-  Pt as formatValue,
-  Ht as generateFromProfile,
-  Gt as generateFromPrompt,
-  Vt as generateRandom,
-  Xt as generateRandomTheme,
-  tm as generateThemeFromPrompt,
-  qt as getContrastColor,
-  Jt as hexToRgbTriplet,
-  Kt as hslToCssString,
-  Nt as hslToRgb,
-  Ut as hslToRgbString,
-  Zt as isCustomTheme,
-  Yt as lightToDark,
-  $t as loadGoogleFont,
+  Tt as badgeVariants,
+  Ct as buttonVariants,
+  Pt as cn,
+  It as formatValue,
+  Vt as generateFromProfile,
+  Kt as generateFromPrompt,
+  Nt as generateRandom,
+  Jt as generateRandomTheme,
+  am as generateThemeFromPrompt,
+  Zt as getContrastColor,
+  $t as hexToRgbTriplet,
+  Ut as hslToCssString,
+  Yt as hslToRgb,
+  Qt as hslToRgbString,
+  rm as isCustomTheme,
+  Wt as lightToDark,
+  om as loadGoogleFont,
   f as mockChartData,
   x as mockTableData,
-  Qt as paletteToRgbVars,
-  rm as randomRgb,
-  Em as resolvePreview,
+  zt as paletteToRgbVars,
+  em as randomRgb,
+  Mm as resolvePreview,
   Co as settleTo,
-  om as tokensToVars,
+  tm as tokensToVars,
   lo as useBodyScrollLock,
   mo as useChartTheme,
   eo as useDataFetch,
+  So as useDialogFocus,
   xo as useIsMobile,
   io as useMediaQuery,
   co as useSheetGesture,
   v as useTheme,
-  Ir as useToast,
+  Dr as useToast,
   t as wizardManifest
 };

package/dist/lib/hooks/useDialogFocus.d.ts

@@ -0,0 +1 @@
+export declare function useDialogFocus(isActive: boolean, containerRef: React.RefObject<HTMLElement | null>): void;

package/dist/lib/hooks/useDialogFocus.js

@@ -0,0 +1,46 @@
+import { useRef as m, useEffect as b } from "react";
+const y = [
+  "a[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(","), l = (o) => Array.from(o.querySelectorAll(y)).filter(
+  // offsetParent is null for display:none. A zero-size element is still
+  // reachable by keyboard, so size is not the test — visibility is.
+  (n) => !n.hasAttribute("aria-hidden") && n.getAttribute("tabindex") !== "-1"
+);
+function E(o, n) {
+  const i = m(null);
+  b(() => {
+    if (!o) return;
+    const e = n.current;
+    if (!e) return;
+    i.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const s = () => {
+      (l(e)[0] ?? e).focus();
+    };
+    s();
+    const d = requestAnimationFrame(() => {
+      e.contains(document.activeElement) || s();
+    }), u = (t) => {
+      if (t.key !== "Tab") return;
+      const r = l(e);
+      if (r.length === 0) {
+        t.preventDefault(), e.focus();
+        return;
+      }
+      const a = r[0], f = r[r.length - 1], c = document.activeElement;
+      t.shiftKey && (c === a || !e.contains(c)) ? (t.preventDefault(), f.focus()) : !t.shiftKey && (c === f || !e.contains(c)) && (t.preventDefault(), a.focus());
+    };
+    return document.addEventListener("keydown", u, !0), () => {
+      cancelAnimationFrame(d), document.removeEventListener("keydown", u, !0);
+      const t = i.current;
+      t && document.contains(t) && t.focus();
+    };
+  }, [o, n]);
+}
+export {
+  E as useDialogFocus
+};

package/dist/utils/apiBaseUrl.d.ts

@@ -0,0 +1 @@
+export declare const apiBaseUrl: () => string;

package/dist/utils/apiBaseUrl.js

@@ -0,0 +1,10 @@
+const t = "http://localhost:8000", r = () => {
+  try {
+    return t;
+  } catch {
+    return t;
+  }
+};
+export {
+  r as apiBaseUrl
+};

package/dist/wizardManifest.js

@@ -1098,7 +1098,7 @@ const e = {
     {
       id: "status-badge",
       name: "StatusBadge",
-      version: "1.0.1",
+      version: "1.0.2",
       description: "A consistent status indicator featuring a color-coded dot and an optional text label. Essential for IoT devices and system states.",
       tags: [
         "status",
@@ -1117,7 +1117,7 @@ const e = {
         {
           name: "color",
           type: "string",
-          description: "Tailwind background class for the dot (e.g. 'bg-emerald-500'). Overrides the `status` preset's color when both are given."
+          description: "Background class for the dot (e.g. 'bg-success'). Use a semantic token — a numeric shade does not adapt to the active theme. Overrides the `status` preset's colour when both are given."
         },
         {
           name: "label",
@@ -3671,7 +3671,7 @@ const e = {
     {
       id: "detail-drawer",
       name: "DetailDrawer",
-      version: "1.0.0",
+      version: "1.0.2",
       description: 'A resizable side panel for inspecting one record without leaving the list. Strategic purpose: the master-detail companion — `push` compresses its siblings in a flex layout so the list stays visible and usable, while `overlay` floats above the page like a classic drawer. Use this for "click a row, see the detail" flows; use Modal when the task must block everything else.',
       tags: [
         "layout",
@@ -3696,7 +3696,7 @@ const e = {
         {
           name: "variant",
           type: "string",
-          description: "'push' compresses sibling flex content so the list stays visible; 'overlay' floats fixed above the page. Defaults to push."
+          description: "'push' compresses sibling flex content so the list stays visible; 'overlay' floats fixed above the page. Defaults to overlay."
         },
         {
           name: "side",
@@ -3728,6 +3728,11 @@ const e = {
           type: "number",
           description: "Upper bound for resizing. Defaults to 60% of the window width."
         },
+        {
+          name: "title",
+          type: "string",
+          description: 'Names the panel for assistive technology. Not rendered: there is no header row to put it in, and adding one is a design decision. Without it an overlay announces only as "dialog".'
+        },
         {
           name: "children",
           type: "ReactNode",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/ui",
-  "version": "4.1.1",
+  "version": "4.2.1",
   "description": "The structural component library for the Ramme Framework.",
   "license": "MIT",
   "private": false,
@@ -54,7 +54,7 @@
     "tailwind-merge": "^3.3.1",
     "tippy.js": "^6.3.7",
     "zod": "^3.23.8",
-    "@ramme-io/shared": "3.1.2"
+    "@ramme-io/shared": "3.2.0"
   },
   "devDependencies": {
     "@storybook/addon-links": "^10.5.9",