@timbal-ai/timbal-react 1.2.0 → 1.3.0

package/dist/app.d.cts

@@ -1,18 +1,34 @@
-export { A as APP_KIT_AGENT_INSTRUCTIONS, a as AppChatPanel, b as AppChatPanelProps, c as AppConfirmDialog, d as AppConfirmDialogProps, e as AppCopilotContextValue, f as AppCopilotProvider, g as AppCopilotProviderProps, h as AppShell, i as AppShellChatControls, j as AppShellChatTrigger, k as AppShellChatTriggerProps, l as AppShellNavControls, m as AppShellProps, n as AppShellSidebarTrigger, o as AppShellSidebarTriggerProps, p as AppShellTopbar, q as AppShellTopbarProps, B as BreadcrumbEntry, r as BreadcrumbItem, s as Breadcrumbs, t as BreadcrumbsProps, C as CHART_PALETTE, u as COLOR_UTILITY_PREFIXES, v as ChartArtifactView, w as ChartLayout, x as ChartMargin, y as ChartPanel, z as ChartPanelProps, D as ChartSeries, E as ChartTooltipIndicator, F as ChartVariant, G as ConnectionRow, H as ConnectionRowList, I as ConnectionRowListProps, J as ConnectionRowProps, K as DangerZone, L as DangerZoneAction, M as DangerZoneActionProps, N as DangerZoneProps, O as DataTable, P as DataTableColumn, Q as DataTableProps, R as DataTableSort, S as DataTableSortDirection, T as DescriptionItem, U as DescriptionList, V as DescriptionListProps, W as EmptyState, X as EmptyStateProps, Y as ExpandableSection, Z as ExpandableSectionProps, _ as Field, $ as FieldInput, a0 as FieldInputProps, a1 as FieldProps, a2 as FieldRow, a3 as FieldRowProps, a4 as FieldSelect, a5 as FieldSelectProps, a6 as FieldSwitch, a7 as FieldSwitchProps, a8 as FieldTextarea, a9 as FieldTextareaProps, aa as FilterBar, ab as FilterBarProps, ac as FilterField, ad as FilterFieldProps, ae as FloatingUnsavedChangesBar, af as FloatingUnsavedChangesBarProps, ag as FormSection, ah as FormSectionProps, ai as HOUSE_RULES, aj as HouseRule, ak as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, al as InfoCard, am as InfoCardProps, an as InfoCardTone, ao as IntegrationCard, ap as IntegrationCardProps, aq as IntegrationCardStatus, ar as IntegrationsEmptyState, as as IntegrationsEmptyStateProps, at as LineAreaChart, au as LineAreaChartProps, av as LintFinding, aw as LintOptions, ax as LintResult, ay as LintSeverity, az as MetricChartCard, aA as MetricChartCardProps, aB as MetricChartMetric, aC as MetricRow, aD as MetricRowItem, aE as MetricRowProps, aF as MetricTile, aG as MetricTileProps, aH as Page, aI as PageHeader, aJ as PageHeaderProps, aK as PageProps, aL as PieChart, aM as PieChartProps, aN as PlanBadge, aO as PlanBadgeProps, aP as PlanBadgeTone, aQ as RESERVED_GRADIENT_TOKENS, aR as RadarChart, aS as RadarChartProps, aT as RadialChart, aU as RadialChartProps, aV as ResourceCard, aW as ResourceCardProps, aX as ReviewResult, aY as SEMANTIC_COLOR_TOKENS, aZ as SLOP_BUDGETS, a_ as SearchInput, a$ as SearchInputProps, b0 as Section, b1 as SectionProps, b2 as SemanticColorToken, b3 as SettingsSection, b4 as SettingsSectionHeader, b5 as SettingsSectionHeaderProps, b6 as SettingsSectionProps, b7 as Sparkline, b8 as SparklineProps, b9 as StatTile, ba as StatTileProps, bb as StatusBadge, bc as StatusBadgeProps, bd as StatusBadgeTone, be as StatusDot, bf as StatusDotProps, bg as StatusDotTone, bh as SubNav, bi as SubNavItem, bj as SubNavProps, bk as SurfaceCard, bl as SurfaceCardProps, bm as TAILWIND_PALETTE_COLORS, bn as THEME_AGENT_INSTRUCTIONS, bo as TIMBAL_THEME_PRESETS, bp as ThemePresetGallery, bq as ThemePresetGalleryProps, br as ThemeShadow, bs as ThemeToCssOptions, bt as ThemeTokenMap, bu as TimbalThemeIntent, bv as TimbalThemePreset, bw as TimbalThemePresetId, bx as TimbalThemeStyle, by as TimbalThemeStyleProps, bz as TimbalThemeTokens, bA as TimbalThemeTypography, bB as UI_REVIEW_AGENT_INSTRUCTIONS, bC as UseLiveQueryOptions, bD as UseLiveQueryResult, bE as applyThemePreset, bF as applyTimbalTheme, bG as clearTimbalTheme, bH as connectionRowListClass, bI as createTimbalTheme, bJ as ensureThemeFontLink, bK as flushBarCategoryGap, bL as flushLineAreaEdgeToEdge, bM as formatLintReport, bN as getStoredThemePreset, bO as getThemePreset, bP as lintGeneratedUi, bQ as resolveChartMargin, bR as resolveTooltipCategory, bS as reviewGeneratedUi, bT as themeToCss, bU as useAppCopilotContext, bV as useAppShellChat, bW as useAppShellNav, bX as useInterval, bY as useLiveQuery } from './chart-artifact-E58ve76I.cjs';
+import { A as AppDensity, a as AppDensityClassKey } from './chart-artifact-WDEW9dHT.cjs';
+export { b as APP_DENSITY_CHART_HEIGHT, c as APP_DENSITY_CLASSES, d as APP_KIT_AGENT_INSTRUCTIONS, e as AppChatPanel, f as AppChatPanelProps, g as AppConfirmDialog, h as AppConfirmDialogProps, i as AppCopilotContextValue, j as AppCopilotProvider, k as AppCopilotProviderProps, l as AppShell, m as AppShellChatControls, n as AppShellChatTrigger, o as AppShellChatTriggerProps, p as AppShellNavControls, q as AppShellProps, r as AppShellSidebarTrigger, s as AppShellSidebarTriggerProps, t as AppShellTopbar, u as AppShellTopbarProps, B as BreadcrumbEntry, v as BreadcrumbItem, w as Breadcrumbs, x as BreadcrumbsProps, C as CHART_PALETTE, y as COLOR_UTILITY_PREFIXES, z as ChartArtifactView, D as ChartLayout, E as ChartMargin, F as ChartPanel, G as ChartPanelProps, H as ChartSeries, I as ChartTooltipIndicator, J as ChartVariant, K as ConnectionRow, L as ConnectionRowList, M as ConnectionRowListProps, N as ConnectionRowProps, O as DangerZone, P as DangerZoneAction, Q as DangerZoneActionProps, R as DangerZoneProps, S as DataTable, T as DataTableColumn, U as DataTableProps, V as DataTableSort, W as DataTableSortDirection, X as DescriptionItem, Y as DescriptionList, Z as DescriptionListProps, _ as EmptyState, $ as EmptyStateProps, a0 as ExpandableSection, a1 as ExpandableSectionProps, a2 as Field, a3 as FieldInput, a4 as FieldInputProps, a5 as FieldProps, a6 as FieldRow, a7 as FieldRowProps, a8 as FieldSelect, a9 as FieldSelectProps, aa as FieldSwitch, ab as FieldSwitchProps, ac as FieldTextarea, ad as FieldTextareaProps, ae as FilterBar, af as FilterBarProps, ag as FilterField, ah as FilterFieldProps, ai as FloatingUnsavedChangesBar, aj as FloatingUnsavedChangesBarProps, ak as FormSection, al as FormSectionProps, am as HOUSE_RULES, an as HouseRule, ao as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, ap as InfoCard, aq as InfoCardProps, ar as InfoCardTone, as as IntegrationCard, at as IntegrationCardProps, au as IntegrationCardStatus, av as IntegrationsEmptyState, aw as IntegrationsEmptyStateProps, ax as LineAreaChart, ay as LineAreaChartProps, az as LintFinding, aA as LintOptions, aB as LintResult, aC as LintSeverity, aD as MetricChartCard, aE as MetricChartCardProps, aF as MetricChartMetric, aG as MetricRow, aH as MetricRowItem, aI as MetricRowProps, aJ as MetricTile, aK as MetricTileProps, aL as Page, aM as PageHeader, aN as PageHeaderProps, aO as PageProps, aP as PieChart, aQ as PieChartProps, aR as PlanBadge, aS as PlanBadgeProps, aT as PlanBadgeTone, aU as RESERVED_GRADIENT_TOKENS, aV as RadarChart, aW as RadarChartProps, aX as RadialChart, aY as RadialChartProps, aZ as ResourceCard, a_ as ResourceCardProps, a$ as ReviewResult, b0 as SEMANTIC_COLOR_TOKENS, b1 as SLOP_BUDGETS, b2 as SearchInput, b3 as SearchInputProps, b4 as Section, b5 as SectionProps, b6 as SemanticColorToken, b7 as SettingsSection, b8 as SettingsSectionHeader, b9 as SettingsSectionHeaderProps, ba as SettingsSectionProps, bb as Sparkline, bc as SparklineProps, bd as StatTile, be as StatTileProps, bf as StatusBadge, bg as StatusBadgeProps, bh as StatusBadgeTone, bi as StatusDot, bj as StatusDotProps, bk as StatusDotTone, bl as SubNav, bm as SubNavItem, bn as SubNavProps, bo as SurfaceCard, bp as SurfaceCardProps, bq as TAILWIND_PALETTE_COLORS, br as THEME_AGENT_INSTRUCTIONS, bs as TIMBAL_THEME_PRESETS, bt as ThemeShadow, bu as ThemeToCssOptions, bv as ThemeTokenMap, bw as TimbalThemeIntent, bx as TimbalThemePreset, by as TimbalThemePresetId, bz as TimbalThemeStyle, bA as TimbalThemeStyleProps, bB as TimbalThemeTokens, bC as TimbalThemeTypography, bD as UI_REVIEW_AGENT_INSTRUCTIONS, bE as UseLiveQueryOptions, bF as UseLiveQueryResult, bG as appDensityClass, bH as applyThemePreset, bI as applyTimbalTheme, bJ as clearTimbalTheme, bK as connectionRowListClass, bL as createTimbalTheme, bM as ensureThemeFontLink, bN as flushBarCategoryGap, bO as flushLineAreaEdgeToEdge, bP as formatLintReport, bQ as getStoredThemePreset, bR as getThemePreset, bS as lintGeneratedUi, bT as resolveChartMargin, bU as resolveTooltipCategory, bV as reviewGeneratedUi, bW as themeToCss, bX as useAppCopilotContext, bY as useAppShellChat, bZ as useAppShellNav, b_ as useInterval, b$ as useLiveQuery } from './chart-artifact-WDEW9dHT.cjs';
+import { FC, ReactNode } from 'react';
 export { B as Button } from './button-BoyX5pM_.cjs';
 export { C as ChartArtifact, a as ChartSeriesConfig, T as ThreadVariant, b as TimbalChat, c as TimbalChatProps } from './chat-ClmzWzCX.cjs';
-import 'react';
 import 'react/jsx-runtime';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 import '@assistant-ui/react';
 
+interface AppDensityProviderProps {
+    density?: AppDensity;
+    children: ReactNode;
+}
+/** Sets layout density for descendant app-kit blocks (`Page`, `Section`, cards, metrics). */
+declare const AppDensityProvider: FC<AppDensityProviderProps>;
+/** Active layout density — `"default"` outside a provider. */
+declare function useAppDensity(): AppDensity;
+/** Resolved layout class for the active density (or an explicit override). */
+declare function useAppDensityClass(key: AppDensityClassKey, override?: AppDensity): string;
+
 /**
  * Class composites for the `app` kit (dashboards, settings, data views).
  * Colours via semantic tokens in styles.css — no hardcoded palette literals.
  */
-/** App page column — centered within the shell content area (right of the sidebar inset). */
-declare const appPageColumnClass = "mx-auto w-full max-w-6xl px-4 md:px-6";
+/**
+ * App page column — centered within the shell content area (right of the
+ * sidebar inset). Wide cap so dashboards use the available width instead of
+ * leaving large side gutters; the cap only kicks in on ultra-wide displays.
+ */
+declare const appPageColumnClass = "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
 /**
  * Topbar horizontal inset — full content width (no `max-w-6xl`), same side
  * padding as the page column so controls sit closer to the viewport edges.
@@ -34,4 +50,4 @@ declare const appFilterBarClass = "flex flex-wrap items-end gap-2";
  *  search field and a dropdown placed side by side match exactly. */
 declare const appSearchInputClass: string;
 
-export { appFilterBarClass, appPageColumnClass, appSearchInputClass, appShellInsetTopClass, appShellTopbarInsetClass, appStatTileClass, appSurfaceCardClass };
+export { AppDensity, AppDensityClassKey, AppDensityProvider, type AppDensityProviderProps, appFilterBarClass, appPageColumnClass, appSearchInputClass, appShellInsetTopClass, appShellTopbarInsetClass, appStatTileClass, appSurfaceCardClass, useAppDensity, useAppDensityClass };

package/dist/app.d.ts

@@ -1,18 +1,34 @@
-export { A as APP_KIT_AGENT_INSTRUCTIONS, a as AppChatPanel, b as AppChatPanelProps, c as AppConfirmDialog, d as AppConfirmDialogProps, e as AppCopilotContextValue, f as AppCopilotProvider, g as AppCopilotProviderProps, h as AppShell, i as AppShellChatControls, j as AppShellChatTrigger, k as AppShellChatTriggerProps, l as AppShellNavControls, m as AppShellProps, n as AppShellSidebarTrigger, o as AppShellSidebarTriggerProps, p as AppShellTopbar, q as AppShellTopbarProps, B as BreadcrumbEntry, r as BreadcrumbItem, s as Breadcrumbs, t as BreadcrumbsProps, C as CHART_PALETTE, u as COLOR_UTILITY_PREFIXES, v as ChartArtifactView, w as ChartLayout, x as ChartMargin, y as ChartPanel, z as ChartPanelProps, D as ChartSeries, E as ChartTooltipIndicator, F as ChartVariant, G as ConnectionRow, H as ConnectionRowList, I as ConnectionRowListProps, J as ConnectionRowProps, K as DangerZone, L as DangerZoneAction, M as DangerZoneActionProps, N as DangerZoneProps, O as DataTable, P as DataTableColumn, Q as DataTableProps, R as DataTableSort, S as DataTableSortDirection, T as DescriptionItem, U as DescriptionList, V as DescriptionListProps, W as EmptyState, X as EmptyStateProps, Y as ExpandableSection, Z as ExpandableSectionProps, _ as Field, $ as FieldInput, a0 as FieldInputProps, a1 as FieldProps, a2 as FieldRow, a3 as FieldRowProps, a4 as FieldSelect, a5 as FieldSelectProps, a6 as FieldSwitch, a7 as FieldSwitchProps, a8 as FieldTextarea, a9 as FieldTextareaProps, aa as FilterBar, ab as FilterBarProps, ac as FilterField, ad as FilterFieldProps, ae as FloatingUnsavedChangesBar, af as FloatingUnsavedChangesBarProps, ag as FormSection, ah as FormSectionProps, ai as HOUSE_RULES, aj as HouseRule, ak as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, al as InfoCard, am as InfoCardProps, an as InfoCardTone, ao as IntegrationCard, ap as IntegrationCardProps, aq as IntegrationCardStatus, ar as IntegrationsEmptyState, as as IntegrationsEmptyStateProps, at as LineAreaChart, au as LineAreaChartProps, av as LintFinding, aw as LintOptions, ax as LintResult, ay as LintSeverity, az as MetricChartCard, aA as MetricChartCardProps, aB as MetricChartMetric, aC as MetricRow, aD as MetricRowItem, aE as MetricRowProps, aF as MetricTile, aG as MetricTileProps, aH as Page, aI as PageHeader, aJ as PageHeaderProps, aK as PageProps, aL as PieChart, aM as PieChartProps, aN as PlanBadge, aO as PlanBadgeProps, aP as PlanBadgeTone, aQ as RESERVED_GRADIENT_TOKENS, aR as RadarChart, aS as RadarChartProps, aT as RadialChart, aU as RadialChartProps, aV as ResourceCard, aW as ResourceCardProps, aX as ReviewResult, aY as SEMANTIC_COLOR_TOKENS, aZ as SLOP_BUDGETS, a_ as SearchInput, a$ as SearchInputProps, b0 as Section, b1 as SectionProps, b2 as SemanticColorToken, b3 as SettingsSection, b4 as SettingsSectionHeader, b5 as SettingsSectionHeaderProps, b6 as SettingsSectionProps, b7 as Sparkline, b8 as SparklineProps, b9 as StatTile, ba as StatTileProps, bb as StatusBadge, bc as StatusBadgeProps, bd as StatusBadgeTone, be as StatusDot, bf as StatusDotProps, bg as StatusDotTone, bh as SubNav, bi as SubNavItem, bj as SubNavProps, bk as SurfaceCard, bl as SurfaceCardProps, bm as TAILWIND_PALETTE_COLORS, bn as THEME_AGENT_INSTRUCTIONS, bo as TIMBAL_THEME_PRESETS, bp as ThemePresetGallery, bq as ThemePresetGalleryProps, br as ThemeShadow, bs as ThemeToCssOptions, bt as ThemeTokenMap, bu as TimbalThemeIntent, bv as TimbalThemePreset, bw as TimbalThemePresetId, bx as TimbalThemeStyle, by as TimbalThemeStyleProps, bz as TimbalThemeTokens, bA as TimbalThemeTypography, bB as UI_REVIEW_AGENT_INSTRUCTIONS, bC as UseLiveQueryOptions, bD as UseLiveQueryResult, bE as applyThemePreset, bF as applyTimbalTheme, bG as clearTimbalTheme, bH as connectionRowListClass, bI as createTimbalTheme, bJ as ensureThemeFontLink, bK as flushBarCategoryGap, bL as flushLineAreaEdgeToEdge, bM as formatLintReport, bN as getStoredThemePreset, bO as getThemePreset, bP as lintGeneratedUi, bQ as resolveChartMargin, bR as resolveTooltipCategory, bS as reviewGeneratedUi, bT as themeToCss, bU as useAppCopilotContext, bV as useAppShellChat, bW as useAppShellNav, bX as useInterval, bY as useLiveQuery } from './chart-artifact-_PEJgCpQ.js';
+import { A as AppDensity, a as AppDensityClassKey } from './chart-artifact-Q5QgMtbj.js';
+export { b as APP_DENSITY_CHART_HEIGHT, c as APP_DENSITY_CLASSES, d as APP_KIT_AGENT_INSTRUCTIONS, e as AppChatPanel, f as AppChatPanelProps, g as AppConfirmDialog, h as AppConfirmDialogProps, i as AppCopilotContextValue, j as AppCopilotProvider, k as AppCopilotProviderProps, l as AppShell, m as AppShellChatControls, n as AppShellChatTrigger, o as AppShellChatTriggerProps, p as AppShellNavControls, q as AppShellProps, r as AppShellSidebarTrigger, s as AppShellSidebarTriggerProps, t as AppShellTopbar, u as AppShellTopbarProps, B as BreadcrumbEntry, v as BreadcrumbItem, w as Breadcrumbs, x as BreadcrumbsProps, C as CHART_PALETTE, y as COLOR_UTILITY_PREFIXES, z as ChartArtifactView, D as ChartLayout, E as ChartMargin, F as ChartPanel, G as ChartPanelProps, H as ChartSeries, I as ChartTooltipIndicator, J as ChartVariant, K as ConnectionRow, L as ConnectionRowList, M as ConnectionRowListProps, N as ConnectionRowProps, O as DangerZone, P as DangerZoneAction, Q as DangerZoneActionProps, R as DangerZoneProps, S as DataTable, T as DataTableColumn, U as DataTableProps, V as DataTableSort, W as DataTableSortDirection, X as DescriptionItem, Y as DescriptionList, Z as DescriptionListProps, _ as EmptyState, $ as EmptyStateProps, a0 as ExpandableSection, a1 as ExpandableSectionProps, a2 as Field, a3 as FieldInput, a4 as FieldInputProps, a5 as FieldProps, a6 as FieldRow, a7 as FieldRowProps, a8 as FieldSelect, a9 as FieldSelectProps, aa as FieldSwitch, ab as FieldSwitchProps, ac as FieldTextarea, ad as FieldTextareaProps, ae as FilterBar, af as FilterBarProps, ag as FilterField, ah as FilterFieldProps, ai as FloatingUnsavedChangesBar, aj as FloatingUnsavedChangesBarProps, ak as FormSection, al as FormSectionProps, am as HOUSE_RULES, an as HouseRule, ao as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, ap as InfoCard, aq as InfoCardProps, ar as InfoCardTone, as as IntegrationCard, at as IntegrationCardProps, au as IntegrationCardStatus, av as IntegrationsEmptyState, aw as IntegrationsEmptyStateProps, ax as LineAreaChart, ay as LineAreaChartProps, az as LintFinding, aA as LintOptions, aB as LintResult, aC as LintSeverity, aD as MetricChartCard, aE as MetricChartCardProps, aF as MetricChartMetric, aG as MetricRow, aH as MetricRowItem, aI as MetricRowProps, aJ as MetricTile, aK as MetricTileProps, aL as Page, aM as PageHeader, aN as PageHeaderProps, aO as PageProps, aP as PieChart, aQ as PieChartProps, aR as PlanBadge, aS as PlanBadgeProps, aT as PlanBadgeTone, aU as RESERVED_GRADIENT_TOKENS, aV as RadarChart, aW as RadarChartProps, aX as RadialChart, aY as RadialChartProps, aZ as ResourceCard, a_ as ResourceCardProps, a$ as ReviewResult, b0 as SEMANTIC_COLOR_TOKENS, b1 as SLOP_BUDGETS, b2 as SearchInput, b3 as SearchInputProps, b4 as Section, b5 as SectionProps, b6 as SemanticColorToken, b7 as SettingsSection, b8 as SettingsSectionHeader, b9 as SettingsSectionHeaderProps, ba as SettingsSectionProps, bb as Sparkline, bc as SparklineProps, bd as StatTile, be as StatTileProps, bf as StatusBadge, bg as StatusBadgeProps, bh as StatusBadgeTone, bi as StatusDot, bj as StatusDotProps, bk as StatusDotTone, bl as SubNav, bm as SubNavItem, bn as SubNavProps, bo as SurfaceCard, bp as SurfaceCardProps, bq as TAILWIND_PALETTE_COLORS, br as THEME_AGENT_INSTRUCTIONS, bs as TIMBAL_THEME_PRESETS, bt as ThemeShadow, bu as ThemeToCssOptions, bv as ThemeTokenMap, bw as TimbalThemeIntent, bx as TimbalThemePreset, by as TimbalThemePresetId, bz as TimbalThemeStyle, bA as TimbalThemeStyleProps, bB as TimbalThemeTokens, bC as TimbalThemeTypography, bD as UI_REVIEW_AGENT_INSTRUCTIONS, bE as UseLiveQueryOptions, bF as UseLiveQueryResult, bG as appDensityClass, bH as applyThemePreset, bI as applyTimbalTheme, bJ as clearTimbalTheme, bK as connectionRowListClass, bL as createTimbalTheme, bM as ensureThemeFontLink, bN as flushBarCategoryGap, bO as flushLineAreaEdgeToEdge, bP as formatLintReport, bQ as getStoredThemePreset, bR as getThemePreset, bS as lintGeneratedUi, bT as resolveChartMargin, bU as resolveTooltipCategory, bV as reviewGeneratedUi, bW as themeToCss, bX as useAppCopilotContext, bY as useAppShellChat, bZ as useAppShellNav, b_ as useInterval, b$ as useLiveQuery } from './chart-artifact-Q5QgMtbj.js';
+import { FC, ReactNode } from 'react';
 export { B as Button } from './button-BoyX5pM_.js';
 export { C as ChartArtifact, a as ChartSeriesConfig, T as ThreadVariant, b as TimbalChat, c as TimbalChatProps } from './chat-ClmzWzCX.js';
-import 'react';
 import 'react/jsx-runtime';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 import '@assistant-ui/react';
 
+interface AppDensityProviderProps {
+    density?: AppDensity;
+    children: ReactNode;
+}
+/** Sets layout density for descendant app-kit blocks (`Page`, `Section`, cards, metrics). */
+declare const AppDensityProvider: FC<AppDensityProviderProps>;
+/** Active layout density — `"default"` outside a provider. */
+declare function useAppDensity(): AppDensity;
+/** Resolved layout class for the active density (or an explicit override). */
+declare function useAppDensityClass(key: AppDensityClassKey, override?: AppDensity): string;
+
 /**
  * Class composites for the `app` kit (dashboards, settings, data views).
  * Colours via semantic tokens in styles.css — no hardcoded palette literals.
  */
-/** App page column — centered within the shell content area (right of the sidebar inset). */
-declare const appPageColumnClass = "mx-auto w-full max-w-6xl px-4 md:px-6";
+/**
+ * App page column — centered within the shell content area (right of the
+ * sidebar inset). Wide cap so dashboards use the available width instead of
+ * leaving large side gutters; the cap only kicks in on ultra-wide displays.
+ */
+declare const appPageColumnClass = "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
 /**
  * Topbar horizontal inset — full content width (no `max-w-6xl`), same side
  * padding as the page column so controls sit closer to the viewport edges.
@@ -34,4 +50,4 @@ declare const appFilterBarClass = "flex flex-wrap items-end gap-2";
  *  search field and a dropdown placed side by side match exactly. */
 declare const appSearchInputClass: string;
 
-export { appFilterBarClass, appPageColumnClass, appSearchInputClass, appShellInsetTopClass, appShellTopbarInsetClass, appStatTileClass, appSurfaceCardClass };
+export { AppDensity, AppDensityClassKey, AppDensityProvider, type AppDensityProviderProps, appFilterBarClass, appPageColumnClass, appSearchInputClass, appShellInsetTopClass, appShellTopbarInsetClass, appStatTileClass, appSurfaceCardClass, useAppDensity, useAppDensityClass };

package/dist/app.esm.js

@@ -1,8 +1,11 @@
 import {
+  APP_DENSITY_CHART_HEIGHT,
+  APP_DENSITY_CLASSES,
   APP_KIT_AGENT_INSTRUCTIONS,
   AppChatPanel,
   AppConfirmDialog,
   AppCopilotProvider,
+  AppDensityProvider,
   AppShell,
   AppShellChatTrigger,
   AppShellSidebarTrigger,
@@ -56,9 +59,9 @@ import {
   TAILWIND_PALETTE_COLORS,
   THEME_AGENT_INSTRUCTIONS,
   TIMBAL_THEME_PRESETS,
-  ThemePresetGallery,
   TimbalThemeStyle,
   UI_REVIEW_AGENT_INSTRUCTIONS,
+  appDensityClass,
   appFilterBarClass,
   appPageColumnClass,
   appSearchInputClass,
@@ -79,11 +82,13 @@ import {
   reviewGeneratedUi,
   themeToCss,
   useAppCopilotContext,
+  useAppDensity,
+  useAppDensityClass,
   useAppShellChat,
   useAppShellNav,
   useInterval,
   useLiveQuery
-} from "./chunk-XDIY2WSL.esm.js";
+} from "./chunk-YCXN67SD.esm.js";
 import "./chunk-QIABF4KB.esm.js";
 import {
   CHART_PALETTE,
@@ -97,17 +102,20 @@ import {
   flushLineAreaEdgeToEdge,
   resolveChartMargin,
   resolveTooltipCategory
-} from "./chunk-UY7AKWJL.esm.js";
-import "./chunk-FEYZUVBM.esm.js";
-import "./chunk-NAMKO2MU.esm.js";
+} from "./chunk-GQBYZRD7.esm.js";
+import "./chunk-UCGVL7ZY.esm.js";
+import "./chunk-VXMM2HX7.esm.js";
 import {
   Button
-} from "./chunk-BMXFXLVV.esm.js";
+} from "./chunk-QU7ET55D.esm.js";
 export {
+  APP_DENSITY_CHART_HEIGHT,
+  APP_DENSITY_CLASSES,
   APP_KIT_AGENT_INSTRUCTIONS,
   AppChatPanel,
   AppConfirmDialog,
   AppCopilotProvider,
+  AppDensityProvider,
   AppShell,
   AppShellChatTrigger,
   AppShellSidebarTrigger,
@@ -168,10 +176,10 @@ export {
   TAILWIND_PALETTE_COLORS,
   THEME_AGENT_INSTRUCTIONS,
   TIMBAL_THEME_PRESETS,
-  ThemePresetGallery,
   TimbalChat,
   TimbalThemeStyle,
   UI_REVIEW_AGENT_INSTRUCTIONS,
+  appDensityClass,
   appFilterBarClass,
   appPageColumnClass,
   appSearchInputClass,
@@ -196,6 +204,8 @@ export {
   reviewGeneratedUi,
   themeToCss,
   useAppCopilotContext,
+  useAppDensity,
+  useAppDensityClass,
   useAppShellChat,
   useAppShellNav,
   useInterval,

package/dist/{chart-artifact-_PEJgCpQ.d.ts → chart-artifact-Q5QgMtbj.d.ts}

@@ -384,24 +384,6 @@ interface TimbalThemeStyleProps {
  */
 declare const TimbalThemeStyle: FC<TimbalThemeStyleProps>;
 
-interface ThemePresetGalleryProps {
-    /** Currently selected preset id (controlled). */
-    value?: TimbalThemePresetId;
-    /** Called when the user picks a preset. */
-    onSelect?: (id: TimbalThemePresetId) => void;
-    /** Restrict the catalog to a subset of presets. */
-    presets?: readonly TimbalThemePresetId[];
-    className?: string;
-}
-/**
- * Preview + pick a brand preset. Each card renders a *real* mini fixture
- * (a primary button + a metric tile + a token strip) scoped via
- * `data-timbal-theme`, so several presets preview side-by-side without
- * changing the live app — the host applies the choice on `onSelect`
- * (e.g. via `applyThemePreset`).
- */
-declare const ThemePresetGallery: FC<ThemePresetGalleryProps>;
-
 interface AppShellProps {
     /** Primary navigation (e.g. StudioSidebar or custom rail). */
     sidebar?: ReactNode;
@@ -517,6 +499,63 @@ interface AppShellSidebarTriggerProps {
  */
 declare const AppShellSidebarTrigger: FC<AppShellSidebarTriggerProps>;
 
+/**
+ * App kit layout density — shared spacing scale for dashboards.
+ * Default matches timbal-platform list pages; compact tightens rhythm for data-heavy views.
+ */
+type AppDensity = "default" | "compact";
+/** Default chart plot height per density (overridable via component `height` prop). */
+declare const APP_DENSITY_CHART_HEIGHT: Record<AppDensity, number>;
+/** Layout class maps keyed by density — consumed via `useAppDensityClass` in app components. */
+declare const APP_DENSITY_CLASSES: {
+    readonly pageColumn: {
+        readonly default: "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
+        readonly compact: "mx-auto w-full max-w-none px-3 md:px-4";
+    };
+    readonly pageHeader: {
+        readonly default: string;
+        readonly compact: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between pb-2 pt-1";
+    };
+    readonly section: {
+        readonly default: "flex flex-col gap-4 py-4";
+        readonly compact: "flex flex-col gap-2 py-2";
+    };
+    readonly surfaceCard: {
+        readonly default: string;
+        readonly compact: string;
+    };
+    readonly statTile: {
+        readonly default: string;
+        readonly compact: string;
+    };
+    readonly emptyState: {
+        readonly default: string;
+        readonly compact: string;
+    };
+    readonly metricCardHeader: {
+        readonly default: "flex items-start justify-between gap-3 px-4 pb-1 pt-3";
+        readonly compact: "flex items-start justify-between gap-2 px-3 pb-0.5 pt-2";
+    };
+    readonly metricTile: {
+        readonly default: "relative flex min-w-0 flex-1 flex-col gap-1 px-4 py-3 text-left font-normal";
+        readonly compact: "relative flex min-w-0 flex-1 flex-col gap-1 px-3 py-2 text-left font-normal";
+    };
+    readonly metricChartRegion: {
+        readonly default: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 pt-2";
+        readonly compact: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 pt-1";
+    };
+    readonly metricChartPlotRegion: {
+        readonly default: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 px-0 pt-5 pb-3";
+        readonly compact: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 px-0 pt-3 pb-2";
+    };
+    readonly chartPanelBody: {
+        readonly default: "pt-2 pb-3";
+        readonly compact: "pt-1 pb-2";
+    };
+};
+type AppDensityClassKey = keyof typeof APP_DENSITY_CLASSES;
+declare function appDensityClass(key: AppDensityClassKey, density?: AppDensity): string;
+
 interface PageHeaderProps {
     title: ReactNode;
     description?: ReactNode;
@@ -529,6 +568,11 @@ interface PageProps extends PageHeaderProps {
     children: ReactNode;
     /** Slot above the title (breadcrumbs). */
     breadcrumbs?: ReactNode;
+    /**
+     * Layout rhythm for this page and descendant app-kit blocks.
+     * `compact` tightens page insets, section gaps, and card padding.
+     */
+    density?: AppDensity;
     className?: string;
 }
 declare const Page: FC<PageProps>;
@@ -537,6 +581,8 @@ interface SectionProps {
     title?: ReactNode;
     description?: ReactNode;
     children: ReactNode;
+    /** Override inherited page density for this section only. */
+    density?: AppDensity;
     className?: string;
 }
 declare const Section: FC<SectionProps>;
@@ -581,18 +627,25 @@ interface EmptyStateProps {
 }
 declare const EmptyState: FC<EmptyStateProps>;
 
+/**
+ * Tone skin — a soft tint, a matching foreground, and an inset hairline ring so
+ * the pill reads as a deliberate object rather than faint colored text. The dot
+ * (when enabled) uses an opaque version of the same hue.
+ */
 declare const statusBadgeToneClass: {
-    readonly default: "bg-muted text-foreground";
-    readonly primary: "bg-primary/10 text-primary";
-    readonly success: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400";
-    readonly warn: "bg-amber-500/10 text-amber-600 dark:text-amber-400";
-    readonly danger: "bg-destructive/10 text-destructive";
-    readonly muted: "bg-muted/80 text-muted-foreground";
+    readonly default: "bg-muted text-foreground ring-border";
+    readonly primary: "bg-primary/10 text-primary ring-primary/20";
+    readonly success: "bg-emerald-500/10 text-emerald-700 ring-emerald-500/20 dark:text-emerald-400";
+    readonly warn: "bg-amber-500/10 text-amber-700 ring-amber-500/25 dark:text-amber-400";
+    readonly danger: "bg-destructive/10 text-destructive ring-destructive/20";
+    readonly muted: "bg-muted/70 text-muted-foreground ring-border/60";
 };
 type StatusBadgeTone = keyof typeof statusBadgeToneClass;
 interface StatusBadgeProps {
     children: ReactNode;
     tone?: StatusBadgeTone;
+    /** Render a small leading status dot in the tone color. */
+    dot?: boolean;
     className?: string;
 }
 declare const StatusBadge: FC<StatusBadgeProps>;
@@ -1030,7 +1083,7 @@ interface ChartPanelProps {
     artifact?: ChartArtifact;
     children?: ReactNode;
     actions?: ReactNode;
-    /** Plot height in px. Default 300 (same as `MetricChartCard`). */
+    /** Plot height in px. Defaults to the active page density (300 default, 220 compact). */
     height?: number;
     /** Render a skeleton at the plot height while data loads. */
     loading?: boolean;
@@ -1408,4 +1461,4 @@ interface ChartArtifactViewProps {
  */
 declare const ChartArtifactView: FC<ChartArtifactViewProps>;
 
-export { FieldInput as $, APP_KIT_AGENT_INSTRUCTIONS as A, type BreadcrumbEntry as B, CHART_PALETTE as C, type ChartSeries as D, type ChartTooltipIndicator as E, type ChartVariant as F, ConnectionRow as G, ConnectionRowList as H, type ConnectionRowListProps as I, type ConnectionRowProps as J, DangerZone as K, DangerZoneAction as L, type DangerZoneActionProps as M, type DangerZoneProps as N, DataTable as O, type DataTableColumn as P, type DataTableProps as Q, type DataTableSort as R, type DataTableSortDirection as S, type DescriptionItem as T, DescriptionList as U, type DescriptionListProps as V, EmptyState as W, type EmptyStateProps as X, ExpandableSection as Y, type ExpandableSectionProps as Z, Field as _, AppChatPanel as a, type SearchInputProps as a$, type FieldInputProps as a0, type FieldProps as a1, FieldRow as a2, type FieldRowProps as a3, FieldSelect as a4, type FieldSelectProps as a5, FieldSwitch as a6, type FieldSwitchProps as a7, FieldTextarea as a8, type FieldTextareaProps as a9, type MetricChartCardProps as aA, type MetricChartMetric as aB, MetricRow as aC, type MetricRowItem as aD, type MetricRowProps as aE, MetricTile as aF, type MetricTileProps as aG, Page as aH, PageHeader as aI, type PageHeaderProps as aJ, type PageProps as aK, PieChart as aL, type PieChartProps as aM, PlanBadge as aN, type PlanBadgeProps as aO, type PlanBadgeTone as aP, RESERVED_GRADIENT_TOKENS as aQ, RadarChart as aR, type RadarChartProps as aS, RadialChart as aT, type RadialChartProps as aU, ResourceCard as aV, type ResourceCardProps as aW, type ReviewResult as aX, SEMANTIC_COLOR_TOKENS as aY, SLOP_BUDGETS as aZ, SearchInput as a_, FilterBar as aa, type FilterBarProps as ab, FilterField as ac, type FilterFieldProps as ad, FloatingUnsavedChangesBar as ae, type FloatingUnsavedChangesBarProps as af, FormSection as ag, type FormSectionProps as ah, HOUSE_RULES as ai, type HouseRule as aj, INTEGRATION_CATALOG_CARD_HEIGHT_CLASS as ak, InfoCard as al, type InfoCardProps as am, type InfoCardTone as an, IntegrationCard as ao, type IntegrationCardProps as ap, type IntegrationCardStatus as aq, IntegrationsEmptyState as ar, type IntegrationsEmptyStateProps as as, LineAreaChart as at, type LineAreaChartProps as au, type LintFinding as av, type LintOptions as aw, type LintResult as ax, type LintSeverity as ay, MetricChartCard as az, type AppChatPanelProps as b, Section as b0, type SectionProps as b1, type SemanticColorToken as b2, SettingsSection as b3, SettingsSectionHeader as b4, type SettingsSectionHeaderProps as b5, type SettingsSectionProps as b6, Sparkline as b7, type SparklineProps as b8, StatTile as b9, type TimbalThemeTypography as bA, UI_REVIEW_AGENT_INSTRUCTIONS as bB, type UseLiveQueryOptions as bC, type UseLiveQueryResult as bD, applyThemePreset as bE, applyTimbalTheme as bF, clearTimbalTheme as bG, connectionRowListClass as bH, createTimbalTheme as bI, ensureThemeFontLink as bJ, flushBarCategoryGap as bK, flushLineAreaEdgeToEdge as bL, formatLintReport as bM, getStoredThemePreset as bN, getThemePreset as bO, lintGeneratedUi as bP, resolveChartMargin as bQ, resolveTooltipCategory as bR, reviewGeneratedUi as bS, themeToCss as bT, useAppCopilotContext as bU, useAppShellChat as bV, useAppShellNav as bW, useInterval as bX, useLiveQuery as bY, type StatTileProps as ba, StatusBadge as bb, type StatusBadgeProps as bc, type StatusBadgeTone as bd, StatusDot as be, type StatusDotProps as bf, type StatusDotTone as bg, SubNav as bh, type SubNavItem as bi, type SubNavProps as bj, SurfaceCard as bk, type SurfaceCardProps as bl, TAILWIND_PALETTE_COLORS as bm, THEME_AGENT_INSTRUCTIONS as bn, TIMBAL_THEME_PRESETS as bo, ThemePresetGallery as bp, type ThemePresetGalleryProps as bq, type ThemeShadow as br, type ThemeToCssOptions as bs, type ThemeTokenMap as bt, type TimbalThemeIntent as bu, type TimbalThemePreset as bv, type TimbalThemePresetId as bw, TimbalThemeStyle as bx, type TimbalThemeStyleProps as by, type TimbalThemeTokens as bz, AppConfirmDialog as c, type AppConfirmDialogProps as d, type AppCopilotContextValue as e, AppCopilotProvider as f, type AppCopilotProviderProps as g, AppShell as h, type AppShellChatControls as i, AppShellChatTrigger as j, type AppShellChatTriggerProps as k, type AppShellNavControls as l, type AppShellProps as m, AppShellSidebarTrigger as n, type AppShellSidebarTriggerProps as o, AppShellTopbar as p, type AppShellTopbarProps as q, type BreadcrumbItem as r, Breadcrumbs as s, type BreadcrumbsProps as t, COLOR_UTILITY_PREFIXES as u, ChartArtifactView as v, type ChartLayout as w, type ChartMargin as x, ChartPanel as y, type ChartPanelProps as z };
+export { type EmptyStateProps as $, type AppDensity as A, type BreadcrumbEntry as B, CHART_PALETTE as C, type ChartLayout as D, type ChartMargin as E, ChartPanel as F, type ChartPanelProps as G, type ChartSeries as H, type ChartTooltipIndicator as I, type ChartVariant as J, ConnectionRow as K, ConnectionRowList as L, type ConnectionRowListProps as M, type ConnectionRowProps as N, DangerZone as O, DangerZoneAction as P, type DangerZoneActionProps as Q, type DangerZoneProps as R, DataTable as S, type DataTableColumn as T, type DataTableProps as U, type DataTableSort as V, type DataTableSortDirection as W, type DescriptionItem as X, DescriptionList as Y, type DescriptionListProps as Z, EmptyState as _, type AppDensityClassKey as a, type ReviewResult as a$, ExpandableSection as a0, type ExpandableSectionProps as a1, Field as a2, FieldInput as a3, type FieldInputProps as a4, type FieldProps as a5, FieldRow as a6, type FieldRowProps as a7, FieldSelect as a8, type FieldSelectProps as a9, type LintOptions as aA, type LintResult as aB, type LintSeverity as aC, MetricChartCard as aD, type MetricChartCardProps as aE, type MetricChartMetric as aF, MetricRow as aG, type MetricRowItem as aH, type MetricRowProps as aI, MetricTile as aJ, type MetricTileProps as aK, Page as aL, PageHeader as aM, type PageHeaderProps as aN, type PageProps as aO, PieChart as aP, type PieChartProps as aQ, PlanBadge as aR, type PlanBadgeProps as aS, type PlanBadgeTone as aT, RESERVED_GRADIENT_TOKENS as aU, RadarChart as aV, type RadarChartProps as aW, RadialChart as aX, type RadialChartProps as aY, ResourceCard as aZ, type ResourceCardProps as a_, FieldSwitch as aa, type FieldSwitchProps as ab, FieldTextarea as ac, type FieldTextareaProps as ad, FilterBar as ae, type FilterBarProps as af, FilterField as ag, type FilterFieldProps as ah, FloatingUnsavedChangesBar as ai, type FloatingUnsavedChangesBarProps as aj, FormSection as ak, type FormSectionProps as al, HOUSE_RULES as am, type HouseRule as an, INTEGRATION_CATALOG_CARD_HEIGHT_CLASS as ao, InfoCard as ap, type InfoCardProps as aq, type InfoCardTone as ar, IntegrationCard as as, type IntegrationCardProps as at, type IntegrationCardStatus as au, IntegrationsEmptyState as av, type IntegrationsEmptyStateProps as aw, LineAreaChart as ax, type LineAreaChartProps as ay, type LintFinding as az, APP_DENSITY_CHART_HEIGHT as b, useLiveQuery as b$, SEMANTIC_COLOR_TOKENS as b0, SLOP_BUDGETS as b1, SearchInput as b2, type SearchInputProps as b3, Section as b4, type SectionProps as b5, type SemanticColorToken as b6, SettingsSection as b7, SettingsSectionHeader as b8, type SettingsSectionHeaderProps as b9, type TimbalThemeStyleProps as bA, type TimbalThemeTokens as bB, type TimbalThemeTypography as bC, UI_REVIEW_AGENT_INSTRUCTIONS as bD, type UseLiveQueryOptions as bE, type UseLiveQueryResult as bF, appDensityClass as bG, applyThemePreset as bH, applyTimbalTheme as bI, clearTimbalTheme as bJ, connectionRowListClass as bK, createTimbalTheme as bL, ensureThemeFontLink as bM, flushBarCategoryGap as bN, flushLineAreaEdgeToEdge as bO, formatLintReport as bP, getStoredThemePreset as bQ, getThemePreset as bR, lintGeneratedUi as bS, resolveChartMargin as bT, resolveTooltipCategory as bU, reviewGeneratedUi as bV, themeToCss as bW, useAppCopilotContext as bX, useAppShellChat as bY, useAppShellNav as bZ, useInterval as b_, type SettingsSectionProps as ba, Sparkline as bb, type SparklineProps as bc, StatTile as bd, type StatTileProps as be, StatusBadge as bf, type StatusBadgeProps as bg, type StatusBadgeTone as bh, StatusDot as bi, type StatusDotProps as bj, type StatusDotTone as bk, SubNav as bl, type SubNavItem as bm, type SubNavProps as bn, SurfaceCard as bo, type SurfaceCardProps as bp, TAILWIND_PALETTE_COLORS as bq, THEME_AGENT_INSTRUCTIONS as br, TIMBAL_THEME_PRESETS as bs, type ThemeShadow as bt, type ThemeToCssOptions as bu, type ThemeTokenMap as bv, type TimbalThemeIntent as bw, type TimbalThemePreset as bx, type TimbalThemePresetId as by, TimbalThemeStyle as bz, APP_DENSITY_CLASSES as c, APP_KIT_AGENT_INSTRUCTIONS as d, AppChatPanel as e, type AppChatPanelProps as f, AppConfirmDialog as g, type AppConfirmDialogProps as h, type AppCopilotContextValue as i, AppCopilotProvider as j, type AppCopilotProviderProps as k, AppShell as l, type AppShellChatControls as m, AppShellChatTrigger as n, type AppShellChatTriggerProps as o, type AppShellNavControls as p, type AppShellProps as q, AppShellSidebarTrigger as r, type AppShellSidebarTriggerProps as s, AppShellTopbar as t, type AppShellTopbarProps as u, type BreadcrumbItem as v, Breadcrumbs as w, type BreadcrumbsProps as x, COLOR_UTILITY_PREFIXES as y, ChartArtifactView as z };

package/dist/{chart-artifact-E58ve76I.d.cts → chart-artifact-WDEW9dHT.d.cts}

@@ -384,24 +384,6 @@ interface TimbalThemeStyleProps {
  */
 declare const TimbalThemeStyle: FC<TimbalThemeStyleProps>;
 
-interface ThemePresetGalleryProps {
-    /** Currently selected preset id (controlled). */
-    value?: TimbalThemePresetId;
-    /** Called when the user picks a preset. */
-    onSelect?: (id: TimbalThemePresetId) => void;
-    /** Restrict the catalog to a subset of presets. */
-    presets?: readonly TimbalThemePresetId[];
-    className?: string;
-}
-/**
- * Preview + pick a brand preset. Each card renders a *real* mini fixture
- * (a primary button + a metric tile + a token strip) scoped via
- * `data-timbal-theme`, so several presets preview side-by-side without
- * changing the live app — the host applies the choice on `onSelect`
- * (e.g. via `applyThemePreset`).
- */
-declare const ThemePresetGallery: FC<ThemePresetGalleryProps>;
-
 interface AppShellProps {
     /** Primary navigation (e.g. StudioSidebar or custom rail). */
     sidebar?: ReactNode;
@@ -517,6 +499,63 @@ interface AppShellSidebarTriggerProps {
  */
 declare const AppShellSidebarTrigger: FC<AppShellSidebarTriggerProps>;
 
+/**
+ * App kit layout density — shared spacing scale for dashboards.
+ * Default matches timbal-platform list pages; compact tightens rhythm for data-heavy views.
+ */
+type AppDensity = "default" | "compact";
+/** Default chart plot height per density (overridable via component `height` prop). */
+declare const APP_DENSITY_CHART_HEIGHT: Record<AppDensity, number>;
+/** Layout class maps keyed by density — consumed via `useAppDensityClass` in app components. */
+declare const APP_DENSITY_CLASSES: {
+    readonly pageColumn: {
+        readonly default: "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
+        readonly compact: "mx-auto w-full max-w-none px-3 md:px-4";
+    };
+    readonly pageHeader: {
+        readonly default: string;
+        readonly compact: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between pb-2 pt-1";
+    };
+    readonly section: {
+        readonly default: "flex flex-col gap-4 py-4";
+        readonly compact: "flex flex-col gap-2 py-2";
+    };
+    readonly surfaceCard: {
+        readonly default: string;
+        readonly compact: string;
+    };
+    readonly statTile: {
+        readonly default: string;
+        readonly compact: string;
+    };
+    readonly emptyState: {
+        readonly default: string;
+        readonly compact: string;
+    };
+    readonly metricCardHeader: {
+        readonly default: "flex items-start justify-between gap-3 px-4 pb-1 pt-3";
+        readonly compact: "flex items-start justify-between gap-2 px-3 pb-0.5 pt-2";
+    };
+    readonly metricTile: {
+        readonly default: "relative flex min-w-0 flex-1 flex-col gap-1 px-4 py-3 text-left font-normal";
+        readonly compact: "relative flex min-w-0 flex-1 flex-col gap-1 px-3 py-2 text-left font-normal";
+    };
+    readonly metricChartRegion: {
+        readonly default: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 pt-2";
+        readonly compact: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 pt-1";
+    };
+    readonly metricChartPlotRegion: {
+        readonly default: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 px-0 pt-5 pb-3";
+        readonly compact: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 px-0 pt-3 pb-2";
+    };
+    readonly chartPanelBody: {
+        readonly default: "pt-2 pb-3";
+        readonly compact: "pt-1 pb-2";
+    };
+};
+type AppDensityClassKey = keyof typeof APP_DENSITY_CLASSES;
+declare function appDensityClass(key: AppDensityClassKey, density?: AppDensity): string;
+
 interface PageHeaderProps {
     title: ReactNode;
     description?: ReactNode;
@@ -529,6 +568,11 @@ interface PageProps extends PageHeaderProps {
     children: ReactNode;
     /** Slot above the title (breadcrumbs). */
     breadcrumbs?: ReactNode;
+    /**
+     * Layout rhythm for this page and descendant app-kit blocks.
+     * `compact` tightens page insets, section gaps, and card padding.
+     */
+    density?: AppDensity;
     className?: string;
 }
 declare const Page: FC<PageProps>;
@@ -537,6 +581,8 @@ interface SectionProps {
     title?: ReactNode;
     description?: ReactNode;
     children: ReactNode;
+    /** Override inherited page density for this section only. */
+    density?: AppDensity;
     className?: string;
 }
 declare const Section: FC<SectionProps>;
@@ -581,18 +627,25 @@ interface EmptyStateProps {
 }
 declare const EmptyState: FC<EmptyStateProps>;
 
+/**
+ * Tone skin — a soft tint, a matching foreground, and an inset hairline ring so
+ * the pill reads as a deliberate object rather than faint colored text. The dot
+ * (when enabled) uses an opaque version of the same hue.
+ */
 declare const statusBadgeToneClass: {
-    readonly default: "bg-muted text-foreground";
-    readonly primary: "bg-primary/10 text-primary";
-    readonly success: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400";
-    readonly warn: "bg-amber-500/10 text-amber-600 dark:text-amber-400";
-    readonly danger: "bg-destructive/10 text-destructive";
-    readonly muted: "bg-muted/80 text-muted-foreground";
+    readonly default: "bg-muted text-foreground ring-border";
+    readonly primary: "bg-primary/10 text-primary ring-primary/20";
+    readonly success: "bg-emerald-500/10 text-emerald-700 ring-emerald-500/20 dark:text-emerald-400";
+    readonly warn: "bg-amber-500/10 text-amber-700 ring-amber-500/25 dark:text-amber-400";
+    readonly danger: "bg-destructive/10 text-destructive ring-destructive/20";
+    readonly muted: "bg-muted/70 text-muted-foreground ring-border/60";
 };
 type StatusBadgeTone = keyof typeof statusBadgeToneClass;
 interface StatusBadgeProps {
     children: ReactNode;
     tone?: StatusBadgeTone;
+    /** Render a small leading status dot in the tone color. */
+    dot?: boolean;
     className?: string;
 }
 declare const StatusBadge: FC<StatusBadgeProps>;
@@ -1030,7 +1083,7 @@ interface ChartPanelProps {
     artifact?: ChartArtifact;
     children?: ReactNode;
     actions?: ReactNode;
-    /** Plot height in px. Default 300 (same as `MetricChartCard`). */
+    /** Plot height in px. Defaults to the active page density (300 default, 220 compact). */
     height?: number;
     /** Render a skeleton at the plot height while data loads. */
     loading?: boolean;
@@ -1408,4 +1461,4 @@ interface ChartArtifactViewProps {
  */
 declare const ChartArtifactView: FC<ChartArtifactViewProps>;
 
-export { FieldInput as $, APP_KIT_AGENT_INSTRUCTIONS as A, type BreadcrumbEntry as B, CHART_PALETTE as C, type ChartSeries as D, type ChartTooltipIndicator as E, type ChartVariant as F, ConnectionRow as G, ConnectionRowList as H, type ConnectionRowListProps as I, type ConnectionRowProps as J, DangerZone as K, DangerZoneAction as L, type DangerZoneActionProps as M, type DangerZoneProps as N, DataTable as O, type DataTableColumn as P, type DataTableProps as Q, type DataTableSort as R, type DataTableSortDirection as S, type DescriptionItem as T, DescriptionList as U, type DescriptionListProps as V, EmptyState as W, type EmptyStateProps as X, ExpandableSection as Y, type ExpandableSectionProps as Z, Field as _, AppChatPanel as a, type SearchInputProps as a$, type FieldInputProps as a0, type FieldProps as a1, FieldRow as a2, type FieldRowProps as a3, FieldSelect as a4, type FieldSelectProps as a5, FieldSwitch as a6, type FieldSwitchProps as a7, FieldTextarea as a8, type FieldTextareaProps as a9, type MetricChartCardProps as aA, type MetricChartMetric as aB, MetricRow as aC, type MetricRowItem as aD, type MetricRowProps as aE, MetricTile as aF, type MetricTileProps as aG, Page as aH, PageHeader as aI, type PageHeaderProps as aJ, type PageProps as aK, PieChart as aL, type PieChartProps as aM, PlanBadge as aN, type PlanBadgeProps as aO, type PlanBadgeTone as aP, RESERVED_GRADIENT_TOKENS as aQ, RadarChart as aR, type RadarChartProps as aS, RadialChart as aT, type RadialChartProps as aU, ResourceCard as aV, type ResourceCardProps as aW, type ReviewResult as aX, SEMANTIC_COLOR_TOKENS as aY, SLOP_BUDGETS as aZ, SearchInput as a_, FilterBar as aa, type FilterBarProps as ab, FilterField as ac, type FilterFieldProps as ad, FloatingUnsavedChangesBar as ae, type FloatingUnsavedChangesBarProps as af, FormSection as ag, type FormSectionProps as ah, HOUSE_RULES as ai, type HouseRule as aj, INTEGRATION_CATALOG_CARD_HEIGHT_CLASS as ak, InfoCard as al, type InfoCardProps as am, type InfoCardTone as an, IntegrationCard as ao, type IntegrationCardProps as ap, type IntegrationCardStatus as aq, IntegrationsEmptyState as ar, type IntegrationsEmptyStateProps as as, LineAreaChart as at, type LineAreaChartProps as au, type LintFinding as av, type LintOptions as aw, type LintResult as ax, type LintSeverity as ay, MetricChartCard as az, type AppChatPanelProps as b, Section as b0, type SectionProps as b1, type SemanticColorToken as b2, SettingsSection as b3, SettingsSectionHeader as b4, type SettingsSectionHeaderProps as b5, type SettingsSectionProps as b6, Sparkline as b7, type SparklineProps as b8, StatTile as b9, type TimbalThemeTypography as bA, UI_REVIEW_AGENT_INSTRUCTIONS as bB, type UseLiveQueryOptions as bC, type UseLiveQueryResult as bD, applyThemePreset as bE, applyTimbalTheme as bF, clearTimbalTheme as bG, connectionRowListClass as bH, createTimbalTheme as bI, ensureThemeFontLink as bJ, flushBarCategoryGap as bK, flushLineAreaEdgeToEdge as bL, formatLintReport as bM, getStoredThemePreset as bN, getThemePreset as bO, lintGeneratedUi as bP, resolveChartMargin as bQ, resolveTooltipCategory as bR, reviewGeneratedUi as bS, themeToCss as bT, useAppCopilotContext as bU, useAppShellChat as bV, useAppShellNav as bW, useInterval as bX, useLiveQuery as bY, type StatTileProps as ba, StatusBadge as bb, type StatusBadgeProps as bc, type StatusBadgeTone as bd, StatusDot as be, type StatusDotProps as bf, type StatusDotTone as bg, SubNav as bh, type SubNavItem as bi, type SubNavProps as bj, SurfaceCard as bk, type SurfaceCardProps as bl, TAILWIND_PALETTE_COLORS as bm, THEME_AGENT_INSTRUCTIONS as bn, TIMBAL_THEME_PRESETS as bo, ThemePresetGallery as bp, type ThemePresetGalleryProps as bq, type ThemeShadow as br, type ThemeToCssOptions as bs, type ThemeTokenMap as bt, type TimbalThemeIntent as bu, type TimbalThemePreset as bv, type TimbalThemePresetId as bw, TimbalThemeStyle as bx, type TimbalThemeStyleProps as by, type TimbalThemeTokens as bz, AppConfirmDialog as c, type AppConfirmDialogProps as d, type AppCopilotContextValue as e, AppCopilotProvider as f, type AppCopilotProviderProps as g, AppShell as h, type AppShellChatControls as i, AppShellChatTrigger as j, type AppShellChatTriggerProps as k, type AppShellNavControls as l, type AppShellProps as m, AppShellSidebarTrigger as n, type AppShellSidebarTriggerProps as o, AppShellTopbar as p, type AppShellTopbarProps as q, type BreadcrumbItem as r, Breadcrumbs as s, type BreadcrumbsProps as t, COLOR_UTILITY_PREFIXES as u, ChartArtifactView as v, type ChartLayout as w, type ChartMargin as x, ChartPanel as y, type ChartPanelProps as z };
+export { type EmptyStateProps as $, type AppDensity as A, type BreadcrumbEntry as B, CHART_PALETTE as C, type ChartLayout as D, type ChartMargin as E, ChartPanel as F, type ChartPanelProps as G, type ChartSeries as H, type ChartTooltipIndicator as I, type ChartVariant as J, ConnectionRow as K, ConnectionRowList as L, type ConnectionRowListProps as M, type ConnectionRowProps as N, DangerZone as O, DangerZoneAction as P, type DangerZoneActionProps as Q, type DangerZoneProps as R, DataTable as S, type DataTableColumn as T, type DataTableProps as U, type DataTableSort as V, type DataTableSortDirection as W, type DescriptionItem as X, DescriptionList as Y, type DescriptionListProps as Z, EmptyState as _, type AppDensityClassKey as a, type ReviewResult as a$, ExpandableSection as a0, type ExpandableSectionProps as a1, Field as a2, FieldInput as a3, type FieldInputProps as a4, type FieldProps as a5, FieldRow as a6, type FieldRowProps as a7, FieldSelect as a8, type FieldSelectProps as a9, type LintOptions as aA, type LintResult as aB, type LintSeverity as aC, MetricChartCard as aD, type MetricChartCardProps as aE, type MetricChartMetric as aF, MetricRow as aG, type MetricRowItem as aH, type MetricRowProps as aI, MetricTile as aJ, type MetricTileProps as aK, Page as aL, PageHeader as aM, type PageHeaderProps as aN, type PageProps as aO, PieChart as aP, type PieChartProps as aQ, PlanBadge as aR, type PlanBadgeProps as aS, type PlanBadgeTone as aT, RESERVED_GRADIENT_TOKENS as aU, RadarChart as aV, type RadarChartProps as aW, RadialChart as aX, type RadialChartProps as aY, ResourceCard as aZ, type ResourceCardProps as a_, FieldSwitch as aa, type FieldSwitchProps as ab, FieldTextarea as ac, type FieldTextareaProps as ad, FilterBar as ae, type FilterBarProps as af, FilterField as ag, type FilterFieldProps as ah, FloatingUnsavedChangesBar as ai, type FloatingUnsavedChangesBarProps as aj, FormSection as ak, type FormSectionProps as al, HOUSE_RULES as am, type HouseRule as an, INTEGRATION_CATALOG_CARD_HEIGHT_CLASS as ao, InfoCard as ap, type InfoCardProps as aq, type InfoCardTone as ar, IntegrationCard as as, type IntegrationCardProps as at, type IntegrationCardStatus as au, IntegrationsEmptyState as av, type IntegrationsEmptyStateProps as aw, LineAreaChart as ax, type LineAreaChartProps as ay, type LintFinding as az, APP_DENSITY_CHART_HEIGHT as b, useLiveQuery as b$, SEMANTIC_COLOR_TOKENS as b0, SLOP_BUDGETS as b1, SearchInput as b2, type SearchInputProps as b3, Section as b4, type SectionProps as b5, type SemanticColorToken as b6, SettingsSection as b7, SettingsSectionHeader as b8, type SettingsSectionHeaderProps as b9, type TimbalThemeStyleProps as bA, type TimbalThemeTokens as bB, type TimbalThemeTypography as bC, UI_REVIEW_AGENT_INSTRUCTIONS as bD, type UseLiveQueryOptions as bE, type UseLiveQueryResult as bF, appDensityClass as bG, applyThemePreset as bH, applyTimbalTheme as bI, clearTimbalTheme as bJ, connectionRowListClass as bK, createTimbalTheme as bL, ensureThemeFontLink as bM, flushBarCategoryGap as bN, flushLineAreaEdgeToEdge as bO, formatLintReport as bP, getStoredThemePreset as bQ, getThemePreset as bR, lintGeneratedUi as bS, resolveChartMargin as bT, resolveTooltipCategory as bU, reviewGeneratedUi as bV, themeToCss as bW, useAppCopilotContext as bX, useAppShellChat as bY, useAppShellNav as bZ, useInterval as b_, type SettingsSectionProps as ba, Sparkline as bb, type SparklineProps as bc, StatTile as bd, type StatTileProps as be, StatusBadge as bf, type StatusBadgeProps as bg, type StatusBadgeTone as bh, StatusDot as bi, type StatusDotProps as bj, type StatusDotTone as bk, SubNav as bl, type SubNavItem as bm, type SubNavProps as bn, SurfaceCard as bo, type SurfaceCardProps as bp, TAILWIND_PALETTE_COLORS as bq, THEME_AGENT_INSTRUCTIONS as br, TIMBAL_THEME_PRESETS as bs, type ThemeShadow as bt, type ThemeToCssOptions as bu, type ThemeTokenMap as bv, type TimbalThemeIntent as bw, type TimbalThemePreset as bx, type TimbalThemePresetId as by, TimbalThemeStyle as bz, APP_DENSITY_CLASSES as c, APP_KIT_AGENT_INSTRUCTIONS as d, AppChatPanel as e, type AppChatPanelProps as f, AppConfirmDialog as g, type AppConfirmDialogProps as h, type AppCopilotContextValue as i, AppCopilotProvider as j, type AppCopilotProviderProps as k, AppShell as l, type AppShellChatControls as m, AppShellChatTrigger as n, type AppShellChatTriggerProps as o, type AppShellNavControls as p, type AppShellProps as q, AppShellSidebarTrigger as r, type AppShellSidebarTriggerProps as s, AppShellTopbar as t, type AppShellTopbarProps as u, type BreadcrumbItem as v, Breadcrumbs as w, type BreadcrumbsProps as x, COLOR_UTILITY_PREFIXES as y, ChartArtifactView as z };

package/dist/chat.esm.js

@@ -7,7 +7,7 @@ import {
 } from "./chunk-KC5QLVUG.esm.js";
 import {
   WorkforceSelector
-} from "./chunk-AGJKK6R7.esm.js";
+} from "./chunk-OFWC4MIY.esm.js";
 import {
   Composer,
   ComposerAddAttachment,
@@ -24,8 +24,8 @@ import {
   useTimbalRuntime,
   useTimbalStream,
   useToolRunning
-} from "./chunk-UY7AKWJL.esm.js";
-import "./chunk-BMXFXLVV.esm.js";
+} from "./chunk-GQBYZRD7.esm.js";
+import "./chunk-QU7ET55D.esm.js";
 export {
   Composer,
   ComposerAddAttachment,

package/dist/{chunk-UY7AKWJL.esm.js → chunk-GQBYZRD7.esm.js}

@@ -23,7 +23,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
   cn
-} from "./chunk-BMXFXLVV.esm.js";
+} from "./chunk-QU7ET55D.esm.js";
 
 // src/chat/tooltip-icon-button.tsx
 import { forwardRef } from "react";

package/dist/{chunk-AGJKK6R7.esm.js → chunk-OFWC4MIY.esm.js}

@@ -1,10 +1,10 @@
 import {
   studioTopbarPillHeightClass
-} from "./chunk-UY7AKWJL.esm.js";
+} from "./chunk-GQBYZRD7.esm.js";
 import {
   cn,
   controlSurfaceClass
-} from "./chunk-BMXFXLVV.esm.js";
+} from "./chunk-QU7ET55D.esm.js";
 
 // src/chat/workforce-selector.tsx
 import { ChevronDownIcon } from "lucide-react";