@timbal-ai/timbal-react 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -4,6 +4,24 @@ All notable changes to `@timbal-ai/timbal-react` are documented here.
 
 ## [Unreleased]
 
+## [1.4.0] — 2026-06-05
+
+### Added
+
+- **`AppShell contentFill`** — makes the content region a bounded, non-scrolling flex column instead of the default padded scroll area. For full-bleed pages that own their own scroll (a full-page chat, a canvas, an editor, a split master–detail view): a `h-full` / `flex-1 min-h-0` child now fills exactly and a pinned footer (the chat composer) stays put instead of riding down on scroll. No `mainClassName` surgery and no `h-[calc(100dvh-…)]` guesses required.
+- **`Page fill`** — makes a `Page` a `min-h-0 flex-1` flex column (pair with `AppShell contentFill` for full-height content). Give the fill child `min-h-0 flex-1`.
+- **Headerless `Page`** — `Page.title` (and `PageHeader.title`) is now optional. Omit it to render a page with no `<h1>` header row (and no header padding), instead of dropping `Page` entirely to lose a heading.
+- **New layout recipes** (`examples/app-kit/src/recipes/`): **full-page chat** (`contentFill` + headerless `fill` + `TimbalChat`), **split view** (master–detail two-pane), and **bento dashboard** (asymmetric `SurfaceCard`/`ChartPanel`/`StatTile` grid) — surfaced in the Blocks gallery and `APP_KIT_AGENT_INSTRUCTIONS` as distinct layout archetypes so generated UIs vary beyond the single sidebar+topbar+MetricRow+table shape.
+
+### Changed
+
+- **`AppShell` `main` is now a bounded flex column by default** (`flex min-h-0 flex-col`, keeping `pb-8 md:pb-10`). Previously the content `main` was content-sized, so every full-height child had to pass `mainClassName="flex min-h-0 flex-col"` to undo a layout deficiency; `h-full` / `flex-1` children now resolve a height out of the box. Scrolling `Page` content is unaffected (the outer scroll region still scrolls).
+- **`APP_KIT_AGENT_INSTRUCTIONS`** documents a **Layout archetypes** menu (sidebar dashboard, focused, bento overview, split master–detail, full-page chat/canvas, copilot overlay, section-switcher) and the full-height contract (`contentFill` / `fill` / headerless `Page`), steering codegen away from shipping the same layout every time and away from `h-[calc(100dvh-…)]` / `min-h-[…]` sizing hacks.
+
+### Fixed
+
+- **`FieldSwitch` / `FieldSelect` id collision** — these derived their input id from `id ?? name ?? "switch"`, so multiple unlabeled instances all rendered `id="switch"` and toggling one flipped the others (and labels mis-associated). They now fall back to a `useId()`-generated id, so every instance is unique by default. `FieldInput` / `FieldTextarea` get the same `useId()` fallback (fixes silent label/control mis-association when no `name` is set).
+
 ## [1.3.0] — 2026-06-04
 
 ### Added

package/README.md

@@ -356,6 +356,16 @@ function MyShell() {
 
 For a fully custom shell, drive your own offset from `StudioSidebar`'s `onInsetChange` callback, which fires with the live inset width (px) whenever the collapse state changes.
 
+The `AppShell` content region is a padded scroll area by default. For a **full-bleed page that fills the viewport** (a full-page chat, a canvas, an editor, a split master–detail view), pass `contentFill` to `AppShell` and `fill` to `Page` (omit `Page.title` for a headerless page), then give the filling child `min-h-0 flex-1` — the composer / footer stays pinned and you avoid `h-[calc(100dvh-…)]` guesses:
+
+```tsx
+<AppShell contentFill>
+  <Page fill>
+    <TimbalChat workforceId="…" className="min-h-0 flex-1" />
+  </Page>
+</AppShell>
+```
+
 ### Drop-in shell (header + agent picker)
 
 `TimbalChatShell` wraps the common blueprint layout: brand area, workforce selector, optional header actions, and a full-height chat. When `workforceId` is omitted, it fetches `{baseUrl}/workforce` and selects the first agent automatically:

package/dist/app.cjs

@@ -336,6 +336,40 @@ You are **not** required to copy any example layout, page title, section order,
 
 When in doubt: compose from the **component menu** + **guidelines**, then adapt creatively to the request.
 
+### Layout archetypes \u2014 pick the shape that fits (don't default to one)
+
+The most common failure is shipping the **same** layout every time: sidebar + topbar + \`Page\` + one \`MetricRow\` + one full-width \`DataTable\`. That is *one* archetype, not *the* layout. Choose deliberately \u2014 different domains want different shapes, and varying the shell/page composition is encouraged.
+
+| Archetype | When | Compose |
+|-----------|------|---------|
+| **Sidebar dashboard** | Multi-section product (CRM, billing, ops) with nav | \`StudioSidebar\` in \`AppShell.sidebar\` + \`Page\` \u2192 \`Section\` |
+| **Focused / no-chrome** | A single tool or one-screen utility | \`AppShell\` (no sidebar) + \`Page\` (optionally just \`AppShellTopbar\`); or a centered narrow column |
+| **Bento overview** | Home / at-a-glance dashboards | \`Page\` + an **asymmetric grid** of \`SurfaceCard\` / \`ChartPanel\` / \`StatTile\` spanning different widths (not a uniform row + table) |
+| **Split master\u2013detail** | Inbox, triage queue, record browser, log explorer | \`AppShell contentFill\` + \`Page fill\` + a two-column flex row, each pane \`min-h-0 overflow-y-auto\` |
+| **Full-page chat / canvas** | Chat-first app, editor, map, single full-bleed surface | \`AppShell contentFill\` + headerless \`Page fill\` + a \`min-h-0 flex-1\` child (e.g. \`TimbalChat\`) |
+| **Copilot overlay** | A data app that also wants an assistant | any of the above + \`AppShell chat={<AppChatPanel />}\` (floating, never a second column) |
+| **Section-switcher** | One page, several views | \`SubNav\` / \`PillSegmentedTabs\` (\`trackVariant="flush"\`) switching panels with state/router |
+
+Mix them: vary the grid columns, density, header placement (\`Page\` actions vs. a global \`AppShellTopbar\`), and whether there's a sidebar at all. Two dashboards for two domains should not look identical.
+
+### Full-height pages (chat, canvas, split views)
+
+The content region is a **padded scroll area** by default \u2014 great for stacked \`Page\` \u2192 \`Section\` content, wrong for a surface that must fill the viewport. For full-bleed pages:
+
+- Pass **\`contentFill\`** to \`AppShell\` \u2192 the content region becomes a bounded, non-scrolling flex column (clipped, no bottom padding).
+- Pass **\`fill\`** to \`Page\` \u2192 the page becomes a \`min-h-0 flex-1\` flex column.
+- Give the filling child **\`min-h-0 flex-1\`** (or \`h-full\`) so its own scroll/footer resolves \u2014 e.g. \`<TimbalChat className="min-h-0 flex-1" />\`, or a two-pane row where each pane is \`min-h-0 overflow-y-auto\`.
+
+\`\`\`tsx
+<AppShell contentFill topbar={<AppShellTopbar actions={<ModeToggle />} />}>
+  <Page fill>                                  {/* headerless: omit title */}
+    <TimbalChat workforceId="\u2026" className="min-h-0 flex-1" />
+  </Page>
+</AppShell>
+\`\`\`
+
+**Don't** size full-height content with \`h-[calc(100dvh-\u2026)]\` (guesses chrome height \u2192 spurious scrollbar) or \`min-h-[\u2026]\` (free-growing floor \u2192 a pinned footer like the chat composer rides down on scroll). Let \`contentFill\` + \`fill\` provide the bounded height. \`Page\` with no \`title\` renders **no header** \u2014 you don't need to abandon \`Page\` to drop a heading.
+
 ### Module layout (source folders)
 
 Presentational groups \u2014 import from the package root, not from these paths:
@@ -394,12 +428,12 @@ The cause of slop is dropping **below** the curated block layer into raw primiti
 
 | Component | Use for |
 |-----------|---------|
-| \`AppShell\` | Shell: optional \`sidebar\`, \`topbar\`, main \`children\`, optional floating \`chat\`. Props: \`chatTriggerLabel\`, \`chatCollapsible\`, \`chatWidth\`, \`chatHeight\`, controlled \`chatOpen\`. |
+| \`AppShell\` | Shell: optional \`sidebar\`, \`topbar\`, main \`children\`, optional floating \`chat\`. Props: \`chatTriggerLabel\`, \`chatCollapsible\`, \`chatWidth\`, \`chatHeight\`, controlled \`chatOpen\`, **\`contentFill\`** (bounded non-scrolling content region for full-bleed pages \u2014 chat/canvas/split view). |
 | \`AppShellTopbar\` | Full-width top bar: \`start\`, \`actions\` slots. |
 | \`AppCopilotProvider\` | React context for copilot-aware tools (page, filters, selection, etc.). |
 | \`AppChatPanel\` | Floating thread: \`workforceId\`, \`welcome\`, \`debug\`. |
 | \`useAppShellChat\` | Custom open/close trigger when \`hideChatTrigger\` on shell. |
-| \`Page\` | Page title, description, \`breadcrumbs\`, \`actions\`, \`density\` (\`"default"\` | \`"compact"\`), children. |
+| \`Page\` | Page title, description, \`breadcrumbs\`, \`actions\`, \`density\` (\`"default"\` | \`"compact"\`), children. **\`title\` is optional** \u2014 omit it for a headerless page (no \`<h1>\`). **\`fill\`** makes it a \`min-h-0 flex-1\` column for full-height content (pair with \`AppShell contentFill\`). |
 | \`Section\` | Titled block inside a page. Optional \`density\` overrides inherited page density. |
 | \`SubNav\` | **Section switcher** (Overview / Reports pill bar): \`items\`, \`activeId\`, \`onChange\`. Never use Radix/shadcn \`Tabs\` \u2014 it is not in this package. Switch panels with state or the router. |
 | **Menus** | **Select** = short list, no search. **Combobox** = searchable (same trigger as Select). **Command** only inside \`PopoverContent variant="list"\` or Combobox \u2014 never padded default Popover. See \`examples/app-kit/src/recipes/primitives-catalog.ts\`. |
@@ -492,8 +526,11 @@ Ready-made **section patterns** assembled from the components above. Each is a c
 - **Empty states** \u2014 no-data / no-results / first-run. Compose \`EmptyState\` + \`Card\` + \`Button\`.
 - **Sign-in card** \u2014 centered auth entry. Compose \`Card\` + \`Input\` + \`Label\` + \`Button\`.
 
-**Shells & theming**
+**Shells & layouts**
 - **Minimal shell** \u2014 \`AppShell\` + \`Page\` (no sidebar/chat).
+- **Bento dashboard** \u2014 \`Page\` + an asymmetric grid of \`SurfaceCard\` / \`ChartPanel\` / \`StatTile\` (varied spans) for overview/home screens.
+- **Split view** \u2014 master\u2013detail: \`AppShell contentFill\` + \`Page fill\` + a two-pane flex row (list + detail), each pane \`min-h-0 overflow-y-auto\`.
+- **Full-page chat** \u2014 \`AppShell contentFill\` + headerless \`Page fill\` + \`TimbalChat className="min-h-0 flex-1"\` (composer pinned; no \`h-[calc(...)]\`).
 - **Copilot overlay** \u2014 \`AppShell\` + floating \`AppChatPanel\`.
 - **Theme presets** \u2014 apply a brand preset programmatically (\`applyThemePreset\` / \`applyTimbalTheme\`); never hand-author OKLCH and don't expose a theme picker to end users.
 
@@ -2253,6 +2290,7 @@ var AppShellBody = ({
   sidebar,
   topbarContent,
   mainClassName,
+  contentFill = false,
   insetPaddingPx,
   insetExpanded,
   children
@@ -2275,7 +2313,10 @@ var AppShellBody = ({
         "div",
         {
           className: cn(
-            "aui-app-shell-scroll flex min-h-0 flex-1 flex-col overflow-y-auto",
+            "aui-app-shell-scroll flex min-h-0 flex-1 flex-col",
+            // Padded scroll region by default; a full-bleed page (chat / canvas) owns
+            // its own scroll, so clip here and let the bounded `main` fill exactly.
+            contentFill ? "overflow-hidden" : "overflow-y-auto",
             !topbarContent && appShellInsetTopClass
           ),
           children: [
@@ -2284,8 +2325,11 @@ var AppShellBody = ({
               "main",
               {
                 className: cn(
-                  "aui-app-shell-main min-w-0 flex-1",
-                  appShellInsetBottomClass,
+                  // Bounded flex column by default so `h-full` / `flex-1 min-h-0` children
+                  // (full-page chat, canvas) resolve a height without `mainClassName` surgery.
+                  "aui-app-shell-main flex min-h-0 min-w-0 flex-1 flex-col",
+                  // Bottom breathing room for scrolling content; full-bleed pages skip it.
+                  !contentFill && appShellInsetBottomClass,
                   mainClassName
                 ),
                 children
@@ -2315,7 +2359,8 @@ var AppShell = ({
   defaultNavOpen = false,
   onNavOpenChange,
   className,
-  mainClassName
+  mainClassName,
+  contentFill = false
 }) => {
   const topbarContent = topbar ?? header;
   const hasChat = Boolean(chat);
@@ -2362,6 +2407,7 @@ var AppShell = ({
       sidebar,
       topbarContent,
       mainClassName,
+      contentFill,
       insetPaddingPx,
       insetExpanded,
       children
@@ -2511,11 +2557,14 @@ var PageHeader = ({
   className
 }) => {
   const pageHeaderClass = useAppDensityClass("pageHeader");
+  if (title == null && description == null && actions == null) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className: cn("aui-app-page-header", pageHeaderClass, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
+    title != null || description != null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "min-w-0", children: [
+      title != null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }) : null,
       description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
-    ] }),
+    ] }) : null,
     actions ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "aui-app-page-header-actions flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
   ] });
 };
@@ -2525,6 +2574,7 @@ var import_jsx_runtime13 = require("react/jsx-runtime");
 var PageFrame = ({
   children,
   breadcrumbs,
+  fill = false,
   className,
   ...headerProps
 }) => {
@@ -2533,7 +2583,11 @@ var PageFrame = ({
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
-      className: cn("aui-app-page", pageColumnClass, className),
+      className: cn(
+        "aui-app-page",
+        fill ? "flex min-h-0 min-w-0 flex-1 flex-col" : pageColumnClass,
+        className
+      ),
       "data-density": density,
       children: [
         breadcrumbs,
@@ -2547,10 +2601,20 @@ var Page = ({
   density = "default",
   children,
   breadcrumbs,
+  fill = false,
   className,
   ...headerProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AppDensityProvider, { density, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PageFrame, { breadcrumbs, className, ...headerProps, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AppDensityProvider, { density, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    PageFrame,
+    {
+      breadcrumbs,
+      fill,
+      className,
+      ...headerProps,
+      children
+    }
+  ) });
 };
 
 // src/app/layout/Section.tsx
@@ -8154,6 +8218,7 @@ var Breadcrumbs = ({ items, className }) => {
 };
 
 // src/app/forms/Field.tsx
+var import_react48 = require("react");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var Field = ({
   label,
@@ -8179,7 +8244,8 @@ var FieldInput = ({
   id,
   ...inputProps
 }) => {
-  const inputId = id ?? inputProps.name;
+  const autoId = (0, import_react48.useId)();
+  const inputId = id ?? inputProps.name ?? autoId;
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     Field,
     {
@@ -8202,6 +8268,7 @@ var FieldInput = ({
 };
 
 // src/app/forms/FieldTextarea.tsx
+var import_react49 = require("react");
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var textareaClass = cn(
   appInputClass,
@@ -8216,7 +8283,8 @@ var FieldTextarea = ({
   id,
   ...props
 }) => {
-  const textareaId = id ?? props.name;
+  const autoId = (0, import_react49.useId)();
+  const textareaId = id ?? props.name ?? autoId;
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     Field,
     {
@@ -8239,6 +8307,7 @@ var FieldTextarea = ({
 };
 
 // src/app/forms/FieldSelect.tsx
+var import_react50 = require("react");
 var import_lucide_react11 = require("lucide-react");
 var import_jsx_runtime75 = require("react/jsx-runtime");
 var selectWrapClass = "relative";
@@ -8256,7 +8325,8 @@ var FieldSelect = ({
   id,
   ...props
 }) => {
-  const selectId = id ?? props.name;
+  const autoId = (0, import_react50.useId)();
+  const selectId = id ?? props.name ?? autoId;
   return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     Field,
     {
@@ -8289,6 +8359,7 @@ var FieldSelect = ({
 };
 
 // src/app/forms/FieldSwitch.tsx
+var import_react51 = require("react");
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var trackClass = cn(
   "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-[background,box-shadow,border-color] duration-200",
@@ -8309,7 +8380,8 @@ var FieldSwitch = ({
   id,
   ...props
 }) => {
-  const inputId = id ?? props.name ?? "switch";
+  const autoId = (0, import_react51.useId)();
+  const inputId = id ?? props.name ?? autoId;
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     "label",
     {
@@ -8418,7 +8490,7 @@ var FilterField = ({
 };
 
 // src/app/data/DataTable.tsx
-var import_react48 = require("react");
+var import_react52 = require("react");
 var import_lucide_react14 = require("lucide-react");
 
 // src/ui/checkbox.tsx
@@ -8546,7 +8618,7 @@ function DataTable({
   defaultPageIndex = 0,
   onPageChange
 }) {
-  const [uncontrolledSort, setUncontrolledSort] = (0, import_react48.useState)(
+  const [uncontrolledSort, setUncontrolledSort] = (0, import_react52.useState)(
     defaultSort
   );
   const isSortControlled = sortProp !== void 0;
@@ -8557,19 +8629,19 @@ function DataTable({
     }
     onSortChange?.(next);
   };
-  const [uncontrolledSelected, setUncontrolledSelected] = (0, import_react48.useState)(
+  const [uncontrolledSelected, setUncontrolledSelected] = (0, import_react52.useState)(
     defaultSelectedKeys ?? []
   );
   const isSelectionControlled = selectedKeysProp !== void 0;
   const selectedKeys = isSelectionControlled ? selectedKeysProp : uncontrolledSelected;
-  const selectedSet = (0, import_react48.useMemo)(() => new Set(selectedKeys), [selectedKeys]);
+  const selectedSet = (0, import_react52.useMemo)(() => new Set(selectedKeys), [selectedKeys]);
   const setSelected = (next) => {
     if (!isSelectionControlled) {
       setUncontrolledSelected(next);
     }
     onSelectionChange?.(next);
   };
-  const [uncontrolledPage, setUncontrolledPage] = (0, import_react48.useState)(defaultPageIndex);
+  const [uncontrolledPage, setUncontrolledPage] = (0, import_react52.useState)(defaultPageIndex);
   const isPageControlled = pageIndexProp !== void 0;
   const rawPageIndex = isPageControlled ? pageIndexProp : uncontrolledPage;
   const setPage = (next) => {
@@ -8578,7 +8650,7 @@ function DataTable({
     }
     onPageChange?.(next);
   };
-  const sortedRows = (0, import_react48.useMemo)(() => {
+  const sortedRows = (0, import_react52.useMemo)(() => {
     if (!sort) return rows;
     const column = columns.find((col) => col.id === sort.columnId);
     if (!column?.sortable) return rows;
@@ -8597,13 +8669,13 @@ function DataTable({
   const paginated = typeof pageSize === "number" && pageSize > 0;
   const pageCount = paginated ? Math.max(1, Math.ceil(sortedRows.length / pageSize)) : 1;
   const pageIndex = Math.min(Math.max(0, rawPageIndex), pageCount - 1);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!paginated || isPageControlled) return;
     if (uncontrolledPage > pageCount - 1) {
       setUncontrolledPage(pageCount - 1);
     }
   }, [paginated, isPageControlled, uncontrolledPage, pageCount]);
-  const visibleRows = (0, import_react48.useMemo)(() => {
+  const visibleRows = (0, import_react52.useMemo)(() => {
     if (!paginated) return sortedRows;
     const start = pageIndex * pageSize;
     return sortedRows.slice(start, start + pageSize);
@@ -8814,7 +8886,7 @@ function DataTable({
 }
 
 // src/app/data/ChartPanel.tsx
-var import_react49 = require("react");
+var import_react53 = require("react");
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var ChartPanel = ({
   title,
@@ -8830,7 +8902,7 @@ var ChartPanel = ({
   const height = heightProp ?? APP_DENSITY_CHART_HEIGHT[density];
   const metricChartPlotRegionClass = useAppDensityClass("metricChartPlotRegion");
   const chartPanelBodyClass = useAppDensityClass("chartPanelBody");
-  const titleId = (0, import_react49.useId)();
+  const titleId = (0, import_react53.useId)();
   const resolvedTitle = title ?? artifact?.title;
   const hasHeader = Boolean(resolvedTitle || description || actions);
   const body = loading ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Skeleton, { className: "w-full rounded-lg", style: { height }, "aria-hidden": true }) : children ?? (artifact ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ChartArtifactView, { artifact, embedded: true, height }) : null);
@@ -8873,7 +8945,7 @@ var ChartPanel = ({
 };
 
 // src/app/data/MetricRow.tsx
-var import_react50 = require("react");
+var import_react54 = require("react");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var MetricRow = ({
   title,
@@ -8888,9 +8960,9 @@ var MetricRow = ({
   className
 }) => {
   const metricTileClass = useAppDensityClass("metricTile");
-  const titleId = (0, import_react50.useId)();
+  const titleId = (0, import_react54.useId)();
   const selectable = onMetricChange != null || activeMetricId != null;
-  const [internalId, setInternalId] = (0, import_react50.useState)(
+  const [internalId, setInternalId] = (0, import_react54.useState)(
     defaultActiveMetricId ?? metrics[0]?.id
   );
   const activeId = activeMetricId ?? internalId;
@@ -8957,7 +9029,7 @@ var MetricRow = ({
 };
 
 // src/app/data/MetricChartCard.tsx
-var import_react51 = require("react");
+var import_react55 = require("react");
 var import_jsx_runtime86 = require("react/jsx-runtime");
 var MetricChartCard = ({
   title,
@@ -8981,8 +9053,8 @@ var MetricChartCard = ({
   const height = heightProp ?? APP_DENSITY_CHART_HEIGHT[density];
   const metricChartRegionClass = useAppDensityClass("metricChartRegion");
   const metricTileClass = useAppDensityClass("metricTile");
-  const titleId = (0, import_react51.useId)();
-  const [internalId, setInternalId] = (0, import_react51.useState)(
+  const titleId = (0, import_react55.useId)();
+  const [internalId, setInternalId] = (0, import_react55.useState)(
     defaultActiveMetricId ?? metrics[0]?.id
   );
   const activeId = activeMetricId ?? internalId;
@@ -9088,13 +9160,13 @@ var MetricChartCard = ({
 };
 
 // src/hooks/use-live-query.ts
-var import_react52 = require("react");
+var import_react56 = require("react");
 function useInterval(callback, delayMs) {
-  const saved = (0, import_react52.useRef)(callback);
-  (0, import_react52.useEffect)(() => {
+  const saved = (0, import_react56.useRef)(callback);
+  (0, import_react56.useEffect)(() => {
     saved.current = callback;
   }, [callback]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (delayMs === null) return;
     const id = setInterval(() => saved.current(), delayMs);
     return () => clearInterval(id);
@@ -9107,25 +9179,25 @@ function useLiveQuery(fetcher, options = {}) {
     immediate = true,
     refetchOnFocus = true
   } = options;
-  const [data, setData] = (0, import_react52.useState)(void 0);
-  const [error, setError] = (0, import_react52.useState)(void 0);
-  const [loading, setLoading] = (0, import_react52.useState)(enabled);
-  const [refreshing, setRefreshing] = (0, import_react52.useState)(false);
-  const [lastUpdated, setLastUpdated] = (0, import_react52.useState)(null);
-  const fetcherRef = (0, import_react52.useRef)(fetcher);
-  (0, import_react52.useEffect)(() => {
+  const [data, setData] = (0, import_react56.useState)(void 0);
+  const [error, setError] = (0, import_react56.useState)(void 0);
+  const [loading, setLoading] = (0, import_react56.useState)(enabled);
+  const [refreshing, setRefreshing] = (0, import_react56.useState)(false);
+  const [lastUpdated, setLastUpdated] = (0, import_react56.useState)(null);
+  const fetcherRef = (0, import_react56.useRef)(fetcher);
+  (0, import_react56.useEffect)(() => {
     fetcherRef.current = fetcher;
   }, [fetcher]);
-  const mounted = (0, import_react52.useRef)(true);
-  const requestId = (0, import_react52.useRef)(0);
-  const hasData = (0, import_react52.useRef)(false);
-  (0, import_react52.useEffect)(() => {
+  const mounted = (0, import_react56.useRef)(true);
+  const requestId = (0, import_react56.useRef)(0);
+  const hasData = (0, import_react56.useRef)(false);
+  (0, import_react56.useEffect)(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
     };
   }, []);
-  const run = (0, import_react52.useCallback)(() => {
+  const run = (0, import_react56.useCallback)(() => {
     const id = ++requestId.current;
     if (hasData.current) {
       setRefreshing(true);
@@ -9147,15 +9219,15 @@ function useLiveQuery(fetcher, options = {}) {
       setRefreshing(false);
     });
   }, []);
-  const refetch = (0, import_react52.useCallback)(() => {
+  const refetch = (0, import_react56.useCallback)(() => {
     if (!enabled) return;
     run();
   }, [enabled, run]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!enabled) return;
     if (immediate) run();
   }, [enabled, immediate, run]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!enabled || intervalMs === null) return;
     const tick = () => {
       if (refetchOnFocus && typeof document !== "undefined" && document.visibilityState === "hidden") {
@@ -9166,7 +9238,7 @@ function useLiveQuery(fetcher, options = {}) {
     const handle = setInterval(tick, intervalMs);
     return () => clearInterval(handle);
   }, [enabled, intervalMs, refetchOnFocus, run]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!enabled || !refetchOnFocus || typeof document === "undefined") return;
     const onVisible = () => {
       if (document.visibilityState === "visible") run();
@@ -9178,7 +9250,7 @@ function useLiveQuery(fetcher, options = {}) {
 }
 
 // src/charts/sparkline.tsx
-var import_react53 = require("react");
+var import_react57 = require("react");
 var import_jsx_runtime87 = require("react/jsx-runtime");
 var Sparkline = ({
   data,
@@ -9191,7 +9263,7 @@ var Sparkline = ({
   className,
   ariaLabel = "Trend"
 }) => {
-  const uid = (0, import_react53.useId)();
+  const uid = (0, import_react57.useId)();
   const values = data.map((d) => typeof d === "number" ? d : toNum(d[dataKey]));
   if (values.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: cn("inline-block", className), style: { width, height } });

package/dist/app.d.cts

@@ -1,5 +1,5 @@
-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 { A as AppDensity, a as AppDensityClassKey } from './chart-artifact-C8-Py6lc.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-C8-Py6lc.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';

package/dist/app.d.ts

@@ -1,5 +1,5 @@
-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 { A as AppDensity, a as AppDensityClassKey } from './chart-artifact-CMnDys2t.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-CMnDys2t.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';

package/dist/app.esm.js

@@ -88,7 +88,7 @@ import {
   useAppShellNav,
   useInterval,
   useLiveQuery
-} from "./chunk-YCXN67SD.esm.js";
+} from "./chunk-VOWNCS3F.esm.js";
 import "./chunk-QIABF4KB.esm.js";
 import {
   CHART_PALETTE,

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

@@ -426,6 +426,15 @@ interface AppShellProps {
     onNavOpenChange?: (open: boolean) => void;
     className?: string;
     mainClassName?: string;
+    /**
+     * Make the content region a bounded, non-scrolling flex column instead of the
+     * default padded scroll area. Use for full-bleed pages that own their own
+     * scroll — a full-page chat (`TimbalChat` / `Thread`), a canvas, a map, an
+     * editor — so a `h-full` / `flex-1 min-h-0` child fills exactly and a pinned
+     * footer (e.g. the chat composer) stays put instead of riding down on scroll.
+     * Do **not** combine with `h-[calc(100dvh-…)]` guesses on the child.
+     */
+    contentFill?: boolean;
 }
 /**
  * App-first layout: sidebar + topbar + main, with optional **floating** copilot.
@@ -557,7 +566,8 @@ type AppDensityClassKey = keyof typeof APP_DENSITY_CLASSES;
 declare function appDensityClass(key: AppDensityClassKey, density?: AppDensity): string;
 
 interface PageHeaderProps {
-    title: ReactNode;
+    /** Page title. Omit for a headerless page (no `<h1>` rendered). */
+    title?: ReactNode;
     description?: ReactNode;
     actions?: ReactNode;
     className?: string;
@@ -573,6 +583,13 @@ interface PageProps extends PageHeaderProps {
      * `compact` tightens page insets, section gaps, and card padding.
      */
     density?: AppDensity;
+    /**
+     * Make the page a bounded, full-height flex column instead of a centered,
+     * content-sized column. Pair with `AppShell contentFill` for full-bleed pages
+     * (a full-page chat, a canvas, an editor) whose body should fill the viewport
+     * and own its own scroll. Give the fill child `min-h-0 flex-1`.
+     */
+    fill?: boolean;
     className?: string;
 }
 declare const Page: FC<PageProps>;