@timbal-ai/timbal-react 0.6.0 → 0.7.0

package/dist/chunk-533MK5EA.esm.js

@@ -0,0 +1,2294 @@
+import {
+  SIDEBAR_INSET_PX_EXPANDED,
+  ShellInsetProvider,
+  studioChromeShellStyle,
+  studioSidebarWidthTransition
+} from "./chunk-Z27GBSOT.esm.js";
+import {
+  ChartArtifactView,
+  LineAreaChart,
+  Thread,
+  TimbalRuntimeProvider,
+  monotoneAreaPath,
+  monotoneLinePath,
+  studioIntegrationCardClass,
+  studioSearchChromeClass,
+  studioSecondaryChromeClass,
+  studioTopbarPillHeightClass,
+  toNum
+} from "./chunk-TLUF2RUL.esm.js";
+import {
+  PillSegmentedTabs
+} from "./chunk-TDIJHV4I.esm.js";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  TIMBAL_V2_ELEVATED_SURFACE,
+  TIMBAL_V2_LOGO_TILE,
+  TIMBAL_V2_SWITCH_THUMB,
+  TIMBAL_V2_SWITCH_TRACK_OFF,
+  TimbalV2Button,
+  cn
+} from "./chunk-2XZ3S4OP.esm.js";
+
+// src/app/agent-instructions.ts
+var APP_KIT_AGENT_INSTRUCTIONS = `
+## App kit (@timbal-ai/timbal-react/app)
+
+Build **dashboard and operations UIs** with React components. Import from \`@timbal-ai/timbal-react/app\` (or the main package entry if your app already uses it).
+
+### Creative freedom (read this first)
+
+You are **not** required to copy any example layout, page title, section order, or visual theme.
+
+- **Do** invent layouts that fit the user's domain (CRM, inventory, billing, internal tools, etc.).
+- **Do** pick only the components you need; skip shell, sidebar, or copilot when the task does not need them.
+- **Do** vary density, grid columns, navigation patterns, and copy \u2014 as long as you follow the **design guidelines** below.
+- **Do not** treat \`examples/app-kit/reference/\` as a template to clone (no default "Operations" dashboard with sidebar + three KPI tiles + SubNav + table unless the user asked for that).
+- **Do** use \`examples/app-kit/recipes/\` as **short grammar examples** (one concern per file), not as a full app blueprint.
+
+When in doubt: compose from the **component menu** + **guidelines**, then adapt creatively to the request.
+
+### Module layout (source folders)
+
+Presentational groups \u2014 import from the package root, not from these paths:
+
+| Folder | Components |
+|--------|------------|
+| \`data/\` | \`MetricRow\`, \`MetricChartCard\`, \`MetricTile\`, \`DataTable\`, \`FilterBar\`, \`ChartPanel\` |
+| \`integrations/\` | \`IntegrationCard\`, \`ConnectionRow\`, \`ConnectionRowList\`, \`IntegrationsEmptyState\`, \`PlanBadge\` |
+| \`settings/\` | \`SettingsSection\`, \`FieldRow\`, \`DangerZone\`, \`FloatingUnsavedChangesBar\` |
+| \`surfaces/\` | \`StatTile\`, \`InfoCard\`, \`ResourceCard\`, \`DescriptionList\`, \`ExpandableSection\`, \`StatusDot\`, \`StatusBadge\`, \`EmptyState\` |
+| \`layout/\` | \`AppShell\`, \`Page\`, \`Section\` |
+| \`charts\` (re-exported) | \`LineAreaChart\`, \`Sparkline\`, \`CHART_PALETTE\` |
+
+Also re-exported: \`Button\`, \`TimbalChat\`, \`ChartArtifactView\`, \`APP_KIT_AGENT_INSTRUCTIONS\`.
+
+### Design guidelines (required)
+
+| Area | Rule |
+|------|------|
+| **Copilot** | Use \`AppCopilotProvider\` for page context (\`useAppCopilotContext\`). Copilot is a **floating overlay** via \`AppShell\` \`chat={<AppChatPanel />}\` \u2014 not a sidebar column that shrinks main content. |
+| **Chat panel** | \`AppChatPanel\` only; \`Thread\` uses \`variant="panel"\` internally. Dismiss with **X**; trigger is a **text-only** pill (e.g. "Assistant") \u2014 **no** MessageSquare or chat icons on the shell trigger. |
+| **Context** | Do not show raw JSON context in the panel header; keep context in \`AppCopilotProvider\` only. |
+| **Theming** | Use semantic Tailwind tokens (\`bg-background\`, \`text-foreground\`, \`border-border\`, \`bg-elevated-from\`, etc.) from the host app's \`styles.css\`. Optional: \`import "@timbal-ai/timbal-react/styles.css"\`. |
+| **Layout chrome** | \`Page\` \u2192 \`Section\` for main content hierarchy. \`AppShellTopbar\` for global actions (auth, theme). |
+| **Data** | Prefer \`DataTable\` with typed \`columns\` / \`rows\` / \`getRowKey\`; use \`ChartPanel\` with \`ChartArtifact\` for charts. |
+| **Modals** | Use \`AppConfirmDialog\` for destructive/export confirmations. |
+| **Metrics** | Overview KPIs \u2192 \`MetricRow\` or \`MetricChartCard\` (not four separate heavy cards). Values use **normal** font weight, not bold. |
+| **Integrations** | Catalog \u2192 \`IntegrationCard\` grid; connected list \u2192 \`ConnectionRow\` inside \`ConnectionRowList\`. Footer CTAs: \`Button variant="secondary"\`. |
+| **Anti-slop** | No loud green/red trend pills on every tile; no \`bg-card\` flat grids when platform chrome exists; avoid recycling demo names ("Operations", mock workforce lists). |
+
+### Accessibility (required)
+
+| Area | Rule |
+|------|------|
+| **Headings** | Use \`Page\` / \`Section\` titles for hierarchy. Card titles inside premade components are already \`h3\`/\`h4\`. |
+| **Selectable metrics** | \`MetricChartCard\` / \`MetricRow\` tiles are buttons with \`aria-pressed\`. Pass \`metricsAriaLabel\` when the default "Metrics" is too vague. |
+| **Charts** | \`LineAreaChart\` exposes \`role="img"\` + \`aria-label\`; \`MetricChartCard\` updates the chart label when the active metric changes (\`aria-live\` on the plot region). |
+| **Integration cards** | Whole-card click \u2192 \`onClick\` only (no nested footer button). With footer \`action\`, render a static \`article\` \u2014 do not wrap the CTA in a card button. Pass \`ariaLabel\` when \`name\` is not plain text. |
+| **Lists** | Wrap \`ConnectionRow\` in \`ConnectionRowList\` (\`role="list"\`); rows expose \`role="listitem"\`. |
+| **Status** | Pair \`StatusDot\` / \`StatusBadge\` with visible text \u2014 do not rely on color alone. |
+| **Forms** | Use \`Field*\` components; errors use \`role="alert"\`. |
+| **Custom labels** | \`ariaLabel\` props exist on \`MetricTile\`, \`IntegrationCard\`, \`ConnectionRow\`, \`ResourceCard\` when slots are icons or rich nodes. |
+
+### Component menu
+
+| Component | Use for |
+|-----------|---------|
+| \`AppShell\` | Shell: optional \`sidebar\`, \`topbar\`, main \`children\`, optional floating \`chat\`. Props: \`chatTriggerLabel\`, \`chatCollapsible\`, \`chatWidth\`, \`chatHeight\`, controlled \`chatOpen\`. |
+| \`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\`, children. |
+| \`Section\` | Titled block inside a page. |
+| \`SubNav\` | In-page tabs: \`items\`, \`activeId\`, \`onChange\`. |
+| \`Breadcrumbs\` | Trail: \`items: [{ label, href? }]\`. |
+| \`Button\` | Actions \u2014 \`variant="secondary"\` for catalog/secondary CTAs; \`variant="default"\` for primary. |
+| \`StatTile\` | Single KPI in its own card (grid of scattered stats). Prefer \`MetricRow\` for a unified overview strip. |
+| \`StatusBadge\` | Status pill: \`tone\` (\`success\`, \`warn\`, \u2026), children. |
+| \`FilterBar\` | Horizontal filter row (wraps \`SearchInput\`, buttons, etc.). |
+| \`SearchInput\` | Filter field with consistent app styling. |
+| \`DataTable\` | Sortable table: \`columns\`, \`rows\`, \`getRowKey\`, optional \`sort\` / \`onSortChange\`, \`emptyTitle\`, \`showRowCount\`, \`caption\` for screen readers. |
+| \`ChartPanel\` | Same shell as \`MetricChartCard\`: title row (\`px-4 pt-4\`), flush plot (\`pt-2\` only). Pass \`title\` + \`artifact\` (omit \`artifact.title\` to avoid duplicates) or \`children\`. |
+| \`FieldInput\`, \`FieldTextarea\`, \`FieldSelect\`, \`FieldSwitch\` | Settings-style forms with labels and hints. |
+| \`FormSection\` | Grouped form block. |
+| \`AppConfirmDialog\` | Confirm/cancel modal: \`open\`, \`onOpenChange\`, \`title\`, \`description\`, \`onConfirm\`. |
+| \`SurfaceCard\`, \`EmptyState\` | Generic surfaces when needed. |
+| \`TimbalChat\` | Re-export if you need chat outside \`AppChatPanel\`. |
+
+#### Charts & metrics
+
+| Component | Use for |
+|-----------|---------|
+| \`LineAreaChart\` | Chart engine. Props: \`data\`, \`xKey\`, \`series\`, \`variant\` (\`"area"\`), \`layout\` (\`"flush"\`), \`height\`, \`ariaLabel\`, \`formatX\`, \`formatValue\`. |
+| \`Sparkline\` | Tiny inline trend (table cells): \`data\`, \`color\`, \`area\`. |
+| \`MetricTile\` | Low-level KPI cell \u2014 prefer \`MetricRow\` / \`MetricChartCard\` instead of hand-wiring tiles. |
+| \`MetricRow\` | KPI strip in one elevated card (no chart). Props: \`metrics: [{ id, label, value, unit?, trend? }]\`, optional \`onMetricChange\`, \`metricsAriaLabel\`. |
+| \`MetricChartCard\` | KPI strip + flush chart; tile click swaps series. Same metrics shape + \`data\` per metric. Default chart height 300. |
+
+#### Settings
+
+| Component | Use for |
+|-----------|---------|
+| \`SettingsSection\` | Two-column settings block: \`title\` + \`description\` rail on the left, controls on the right. |
+| \`FieldRow\` | Labeled control row: \`label\`, \`description\`, \`inline\` (right-aligned control for switches). |
+| \`DangerZone\` + \`DangerZoneAction\` | Destructive-actions container with destructive border. |
+| \`FloatingUnsavedChangesBar\` | Portaled discard/save pill: \`visible\`, \`onDiscard\`, \`onSave\`, \`isSaving\`. |
+
+#### Integrations & resources
+
+| Component | Use for |
+|-----------|---------|
+| \`IntegrationCard\` | Catalog tile: \`logo\`, \`name\`, \`description\`, \`badge\`, \`status\`, footer \`action\` **or** whole-card \`onClick\` (never both). |
+| \`ConnectionRow\` | One connected provider row: \`logo\`, \`name\`, \`meta\`, \`badge\`, \`action\`. |
+| \`ConnectionRowList\` | Wrapper for rows (\`role="list"\`) \u2014 use instead of raw class strings. |
+| \`IntegrationsEmptyState\` | Empty catalog hero: \`icon\`, \`title\`, \`description\`, \`action\`. |
+| \`PlanBadge\` | Neutral tier chip on catalog cards. |
+| \`ResourceCard\` | Project/agent/dataset card on elevated surface + logo tile: \`media\`, \`title\`, \`subtitle\`, optional \`badge\`, \`footer\` (\`StatusDot\`), \`action\` (\`Sparkline\`). |
+
+#### Surfaces & details
+
+| Component | Use for |
+|-----------|---------|
+| \`InfoCard\` | Soft callout: \`icon\`, \`title\`, body, \`action\`, \`tone\` (\`info\`/\`success\`/\`warn\`/\`danger\`). |
+| \`DescriptionList\` | Read-only key/value metadata: \`items: [{ label, value }]\`, optional \`stacked\`. |
+| \`ExpandableSection\` | Collapsible block: \`title\`, \`icon\`, \`count\`, animated body (\`aria-expanded\` + \`aria-controls\`). |
+| \`StatusDot\` | Status indicator dot: \`tone\`, \`label\`, \`pulse\`. |
+
+Studio chrome (\`StudioSidebar\`, \`ModeToggle\`, \u2026) lives in \`@timbal-ai/timbal-react/studio\` \u2014 optional, not required for every dashboard.
+
+### Recipe index (\`examples/app-kit/recipes/\`)
+
+| Recipe file | Components to study |
+|-------------|---------------------|
+| \`metrics-row.tsx\` | \`Page\`, \`MetricRow\` |
+| \`analytics-card.tsx\` | \`MetricChartCard\`, \`Button\` |
+| \`integrations-grid.tsx\` | \`IntegrationCard\`, \`ConnectionRowList\`, \`PlanBadge\` |
+| \`table-with-filters.tsx\` | \`FilterBar\`, \`DataTable\` |
+| \`settings-page.tsx\` | \`SettingsSection\`, \`DangerZone\`, \`FloatingUnsavedChangesBar\` |
+| \`resource-gallery.tsx\` | \`ResourceCard\`, \`StatusDot\`, \`Sparkline\` |
+| \`charts-panel.tsx\` | \`ChartPanel\`, \`ChartArtifact\` |
+| \`copilot-overlay.tsx\` | \`AppShell\`, \`AppChatPanel\` |
+
+### Typical compositions
+
+- **Metrics overview** \u2014 \`MetricRow\` or \`MetricChartCard\` (not four isolated stat cards with bold numbers).
+- **Analytics** \u2014 \`MetricChartCard\`; header action: \`Button variant="secondary" size="sm"\`.
+- **Table workspace** \u2014 \`Page\` + \`FilterBar\` + \`DataTable\` (+ \`StatusBadge\` / \`StatusDot\` in cells).
+- **Settings** \u2014 \`Page\` + \`SettingsSection\`s + \`DangerZone\` + \`FloatingUnsavedChangesBar\`.
+- **Integrations** \u2014 grid of \`IntegrationCard\`; \`ConnectionRowList\` for connected providers; \`IntegrationsEmptyState\` when empty.
+- **Resource gallery** \u2014 grid of \`ResourceCard\`.
+- **Copilot-assisted app** \u2014 \`AppCopilotProvider\` + \`AppShell\` with \`chat={<AppChatPanel workforceId="\u2026" />}\`.
+
+### Example imports
+
+\`\`\`tsx
+import {
+  AppShell,
+  AppCopilotProvider,
+  AppChatPanel,
+  Page,
+  Section,
+  MetricRow,
+  MetricChartCard,
+  IntegrationCard,
+  ConnectionRow,
+  ConnectionRowList,
+  Button,
+  DataTable,
+  FilterBar,
+} from "@timbal-ai/timbal-react/app";
+\`\`\`
+
+### Examples in this repo (for humans/tools)
+
+| Path | Purpose |
+|------|---------|
+| \`examples/app-kit/recipes/*\` | **Recipes** \u2014 one pattern each (~20\u201380 lines). Use for capability, not layout. |
+| \`examples/app-kit/reference/operations-dashboard.tsx\` | **Reference only** \u2014 full wired app; do not treat as the default generated layout. |
+
+### Rules
+
+- Prefer stable props documented above; avoid undocumented \`design/*\` class exports (\`connectionRowListClass\` is exported but \`ConnectionRowList\` is preferred).
+- Match the user's domain language in titles and labels.
+- For rich in-chat widgets, use **artifacts** (\`ARTIFACT_AGENT_INSTRUCTIONS\`) \u2014 app kit is for the **host application shell**.
+`.trim();
+
+// src/design/app-classes.ts
+var appPageColumnClass = "mx-auto w-full max-w-6xl px-4 md:px-6";
+var appShellTopbarInsetClass = "w-full px-4 md:px-6";
+var appShellInsetTopClass = "pt-4 md:pt-6";
+var appShellTopbarRowClass = cn(
+  studioTopbarPillHeightClass,
+  "flex w-full items-center justify-between gap-2"
+);
+var appShellTopbarStickyClass = cn(
+  "sticky top-0 z-20 shrink-0 bg-background pb-2",
+  appShellInsetTopClass
+);
+var appPageHeaderClass = cn(
+  "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+  "pb-4 pt-2"
+);
+var appSectionClass = "flex flex-col gap-4 py-4";
+var appSectionTitleClass = "text-lg font-semibold text-foreground";
+var appSectionDescriptionClass = "text-sm text-muted-foreground";
+var appSurfaceCardClass = cn(
+  studioIntegrationCardClass,
+  "p-4 md:p-5"
+);
+var appStatTileClass = cn(
+  appSurfaceCardClass,
+  "flex flex-col gap-1 px-4 py-3 shadow-none"
+);
+var appStatValueClass = "text-2xl font-normal tracking-tight text-foreground tabular-nums";
+var appStatLabelClass = "text-xs font-normal text-muted-foreground";
+var appFilterBarClass = cn(
+  "flex flex-wrap items-center gap-2",
+  studioTopbarPillHeightClass
+);
+var appSearchInputClass = cn(studioSearchChromeClass, "text-sm");
+var appBreadcrumbsClass = "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground";
+var appBreadcrumbLinkClass = "transition-colors hover:text-foreground";
+var appFieldClass = "flex flex-col gap-1.5";
+var appFieldLabelClass = "text-sm font-medium text-foreground";
+var appFieldHintClass = "text-xs text-muted-foreground";
+var appInputClass = cn(
+  studioSecondaryChromeClass,
+  "h-10 w-full rounded-lg px-3 text-sm text-foreground outline-none",
+  "placeholder:text-muted-foreground/70",
+  "focus-visible:ring-2 focus-visible:ring-foreground/10"
+);
+var appEmptyStateClass = cn(
+  appSurfaceCardClass,
+  "flex flex-col items-center justify-center gap-2 py-12 text-center"
+);
+var appEmptyStateTitleClass = "text-base font-medium text-foreground";
+var appEmptyStateDescriptionClass = "max-w-sm text-sm text-muted-foreground";
+var appChartPanelClass = cn(appSurfaceCardClass, "flex flex-col gap-3");
+
+// src/app/layout/app-shell-chat-context.tsx
+import { createContext, useContext } from "react";
+var AppShellChatContext = createContext(null);
+var AppShellChatProvider = AppShellChatContext.Provider;
+function useAppShellChat() {
+  return useContext(AppShellChatContext);
+}
+
+// src/app/layout/AppShell.tsx
+import { motion, useReducedMotion } from "motion/react";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var floatingTriggerClass = cn(
+  "aui-app-shell-chat-trigger-fixed fixed z-50 rounded-full px-5 py-2.5 text-sm font-medium shadow-card-elevated",
+  "bg-primary text-primary-foreground transition-colors hover:bg-primary/90",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  "bottom-6 right-6 max-sm:bottom-4 max-sm:right-4"
+);
+var floatingPanelClass = cn(
+  "aui-app-shell-chat-float fixed z-50 flex flex-col overflow-hidden rounded-2xl border border-border/60 shadow-card-elevated",
+  "bg-card/85 backdrop-blur-xl supports-backdrop-filter:bg-card/75",
+  // Mobile: stretch between insets (no fixed width — avoids a wide empty strip on the right)
+  "max-sm:inset-x-3 max-sm:top-3 max-sm:bottom-3 max-sm:w-auto",
+  "sm:top-6 sm:right-6 sm:bottom-6 sm:w-[var(--app-shell-chat-width)] sm:max-w-[calc(100vw-3rem)]"
+);
+var AppShellBody = ({
+  sidebar,
+  topbarContent,
+  mainClassName,
+  insetPaddingPx,
+  insetExpanded,
+  children
+}) => {
+  const reducedMotion = useReducedMotion();
+  const layoutDirection = insetExpanded ? "expand" : "collapse";
+  const layoutTransition = studioSidebarWidthTransition(
+    !!reducedMotion,
+    layoutDirection
+  );
+  const insetPadding = sidebar ? insetPaddingPx : 0;
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "aui-app-shell-body relative z-10 flex min-h-0 min-w-0 flex-1 flex-col",
+      initial: false,
+      animate: { paddingLeft: insetPadding },
+      transition: layoutTransition,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "aui-app-shell-scroll flex min-h-0 flex-1 flex-col overflow-y-auto",
+            !topbarContent && appShellInsetTopClass
+          ),
+          children: [
+            topbarContent ? /* @__PURE__ */ jsx("header", { className: cn("aui-app-shell-topbar-region", appShellTopbarStickyClass), children: /* @__PURE__ */ jsx("div", { className: appShellTopbarInsetClass, children: topbarContent }) }) : null,
+            /* @__PURE__ */ jsx("main", { className: cn("aui-app-shell-main min-w-0 flex-1", mainClassName), children })
+          ]
+        }
+      )
+    }
+  );
+};
+var AppShell = ({
+  sidebar,
+  topbar,
+  header,
+  children,
+  chat,
+  chatWidth = "24rem",
+  chatHeight,
+  chatOpen: chatOpenProp,
+  defaultChatOpen = false,
+  onChatOpenChange,
+  chatCollapsible = true,
+  chatTriggerLabel = "Assistant",
+  hideChatTrigger = false,
+  className,
+  mainClassName
+}) => {
+  const topbarContent = topbar ?? header;
+  const hasChat = Boolean(chat);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultChatOpen);
+  const isChatControlled = chatOpenProp !== void 0;
+  const chatOpen = isChatControlled ? chatOpenProp : uncontrolledOpen;
+  const setChatOpen = useCallback(
+    (open) => {
+      if (!isChatControlled) {
+        setUncontrolledOpen(open);
+      }
+      onChatOpenChange?.(open);
+    },
+    [isChatControlled, onChatOpenChange]
+  );
+  const toggleChat = useCallback(() => {
+    setChatOpen(!chatOpen);
+  }, [chatOpen, setChatOpen]);
+  const [insetPaddingPx, setInsetPaddingPx] = useState(
+    sidebar ? SIDEBAR_INSET_PX_EXPANDED : 0
+  );
+  const reportShellInset = useCallback((insetPx) => {
+    setInsetPaddingPx(insetPx);
+  }, []);
+  const insetExpanded = insetPaddingPx >= SIDEBAR_INSET_PX_EXPANDED;
+  const shellBody = /* @__PURE__ */ jsx(
+    AppShellBody,
+    {
+      sidebar,
+      topbarContent,
+      mainClassName,
+      insetPaddingPx,
+      insetExpanded,
+      children
+    }
+  );
+  const tree = /* @__PURE__ */ jsx(ShellInsetProvider, { value: sidebar ? reportShellInset : null, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "aui-app-shell relative flex h-dvh overflow-hidden bg-background",
+        className
+      ),
+      style: studioChromeShellStyle,
+      children: [
+        sidebar,
+        shellBody,
+        hasChat && chatOpen ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: floatingPanelClass,
+            style: {
+              ["--app-shell-chat-width"]: chatWidth,
+              ...chatHeight ? { height: chatHeight } : void 0
+            },
+            role: "dialog",
+            "aria-label": typeof chatTriggerLabel === "string" ? chatTriggerLabel : "Assistant",
+            children: chat
+          }
+        ) : null,
+        hasChat && chatCollapsible && !chatOpen && !hideChatTrigger ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: floatingTriggerClass,
+            onClick: () => setChatOpen(true),
+            "aria-expanded": false,
+            children: chatTriggerLabel
+          }
+        ) : null
+      ]
+    }
+  ) });
+  if (!hasChat) {
+    return tree;
+  }
+  return /* @__PURE__ */ jsx(
+    AppShellChatProvider,
+    {
+      value: {
+        open: chatOpen,
+        setOpen: setChatOpen,
+        toggle: toggleChat,
+        collapsible: chatCollapsible
+      },
+      children: tree
+    }
+  );
+};
+
+// src/app/layout/AppShellTopbar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var AppShellTopbar = ({
+  start,
+  actions,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("aui-app-shell-topbar", appShellTopbarRowClass, className), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      start,
+      children
+    ] }),
+    actions ? /* @__PURE__ */ jsx2("div", { className: "aui-app-shell-topbar-actions flex shrink-0 items-center gap-2", children: actions }) : null
+  ] });
+};
+
+// src/app/layout/AppShellChatTrigger.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var floatingPositionClass = "fixed bottom-6 right-6 z-50 max-sm:bottom-4 max-sm:right-4";
+var AppShellChatTrigger = ({
+  className,
+  label = "Assistant",
+  placement = "inline"
+}) => {
+  const shellChat = useAppShellChat();
+  if (!shellChat || shellChat.open) return null;
+  return /* @__PURE__ */ jsx3(
+    TimbalV2Button,
+    {
+      type: "button",
+      variant: placement === "floating" ? "primary" : "secondary",
+      size: "sm",
+      className: cn(
+        "aui-app-shell-chat-trigger",
+        placement === "floating" && floatingPositionClass,
+        placement === "floating" && "shadow-card-elevated",
+        className
+      ),
+      onClick: () => shellChat.setOpen(true),
+      "aria-expanded": false,
+      children: label
+    }
+  );
+};
+
+// src/app/layout/PageHeader.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var PageHeader = ({
+  title,
+  description,
+  actions,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs3("header", { className: cn("aui-app-page-header", appPageHeaderClass, className), children: [
+    /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx4("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
+      description ? /* @__PURE__ */ jsx4("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx4("div", { className: "aui-app-page-header-actions flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
+  ] });
+};
+
+// src/app/layout/Page.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Page = ({
+  children,
+  breadcrumbs,
+  className,
+  ...headerProps
+}) => {
+  return /* @__PURE__ */ jsxs4("div", { className: cn("aui-app-page", appPageColumnClass, className), children: [
+    breadcrumbs,
+    /* @__PURE__ */ jsx5(PageHeader, { ...headerProps }),
+    children
+  ] });
+};
+
+// src/app/layout/Section.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var Section = ({
+  title,
+  description,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs5("section", { className: cn("aui-app-section", appSectionClass, className), children: [
+    title ? /* @__PURE__ */ jsx6("h2", { className: appSectionTitleClass, children: title }) : null,
+    description ? /* @__PURE__ */ jsx6("p", { className: appSectionDescriptionClass, children: description }) : null,
+    children
+  ] });
+};
+
+// src/app/copilot/app-copilot-context.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var AppCopilotContext = createContext2(null);
+var AppCopilotProvider = ({
+  value,
+  children
+}) => {
+  return /* @__PURE__ */ jsx7(AppCopilotContext.Provider, { value, children });
+};
+function useAppCopilotContext() {
+  return useContext2(AppCopilotContext) ?? {};
+}
+
+// src/app/chat/AppChatPanel.tsx
+import { XIcon } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var shellClass = "aui-app-chat-panel flex h-full min-h-0 flex-col overflow-hidden";
+var chromeClass = cn(
+  "aui-app-chat-panel-chrome relative z-20 flex min-h-12 shrink-0 items-center justify-end",
+  "bg-card/90 px-2 pt-3 pb-3 backdrop-blur-sm"
+);
+var closeButtonClass = cn(
+  "aui-app-chat-panel-close flex size-8 shrink-0 items-center justify-center rounded-md",
+  "text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+);
+var bodyClass = cn(
+  "aui-app-chat-panel-body relative min-h-0 flex-1 overflow-hidden",
+  "[&_.aui-thread-root]:h-full",
+  "[&_.aui-thread-viewport]:scrollbar-thin",
+  "[&_.aui-thread-viewport]:[scrollbar-color:var(--border)_transparent]",
+  // Reserve the scrollbar gutter on BOTH edges so the composer + messages
+  // stay symmetric (otherwise the right-side scrollbar adds a phantom inset).
+  "[&_.aui-thread-viewport]:[scrollbar-gutter:stable_both-edges]",
+  // Tighter symmetric horizontal inset for panel + composer
+  "[&_.aui-thread-viewport]:!px-2",
+  "[&_.aui-thread-viewport]:!pt-2",
+  "[&_.aui-user-message-root]:!px-0",
+  "[&_.aui-composer-input]:!px-2",
+  "[&_.aui-composer-action-wrapper]:!px-2"
+);
+var AppChatPanel = ({
+  className,
+  workforceId,
+  baseUrl,
+  fetch,
+  attachments,
+  attachmentsUploadUrl,
+  attachmentsAccept,
+  debug,
+  welcome,
+  suggestions,
+  composerPlaceholder,
+  components,
+  artifacts,
+  onArtifactEvent,
+  ...rest
+}) => {
+  const shellChat = useAppShellChat();
+  return /* @__PURE__ */ jsxs6("div", { className: cn(shellClass, className), children: [
+    shellChat?.collapsible ? /* @__PURE__ */ jsx8("div", { className: chromeClass, children: /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        className: closeButtonClass,
+        onClick: () => shellChat.setOpen(false),
+        "aria-label": "Close assistant",
+        children: /* @__PURE__ */ jsx8(XIcon, { className: "size-4", "aria-hidden": true })
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx8("div", { className: bodyClass, children: /* @__PURE__ */ jsx8(
+      TimbalRuntimeProvider,
+      {
+        workforceId,
+        baseUrl,
+        fetch,
+        attachments,
+        attachmentsUploadUrl,
+        attachmentsAccept,
+        debug,
+        children: /* @__PURE__ */ jsx8(
+          Thread,
+          {
+            variant: "panel",
+            className: "aui-app-chat-panel-thread",
+            welcome,
+            suggestions,
+            composerPlaceholder,
+            components,
+            artifacts,
+            onArtifactEvent,
+            ...rest
+          }
+        )
+      }
+    ) })
+  ] });
+};
+
+// src/app/surfaces/SurfaceCard.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var SurfaceCard = ({ children, className }) => {
+  return /* @__PURE__ */ jsx9("div", { className: cn("aui-app-surface-card", appSurfaceCardClass, className), children });
+};
+
+// src/app/surfaces/StatTile.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var StatTile = ({ label, value, hint, className }) => {
+  return /* @__PURE__ */ jsxs7("div", { className: cn("aui-app-stat-tile", appStatTileClass, className), children: [
+    /* @__PURE__ */ jsx10("span", { className: appStatLabelClass, children: label }),
+    /* @__PURE__ */ jsx10("span", { className: appStatValueClass, children: value }),
+    hint ? /* @__PURE__ */ jsx10("span", { className: "text-xs text-muted-foreground", children: hint }) : null
+  ] });
+};
+
+// src/app/surfaces/EmptyState.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var EmptyState = ({
+  title,
+  description,
+  action,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs8("div", { className: cn("aui-app-empty-state", appEmptyStateClass, className), children: [
+    /* @__PURE__ */ jsx11("p", { className: appEmptyStateTitleClass, children: title }),
+    description ? /* @__PURE__ */ jsx11("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
+    action
+  ] });
+};
+
+// src/app/surfaces/StatusBadge.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var statusBadgeToneClass = {
+  default: "bg-muted text-foreground",
+  primary: "bg-primary/10 text-primary",
+  success: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+  warn: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  muted: "bg-muted/80 text-muted-foreground"
+};
+var StatusBadge = ({
+  children,
+  tone = "default",
+  className
+}) => {
+  return /* @__PURE__ */ jsx12(
+    "span",
+    {
+      className: cn(
+        "aui-app-status-badge inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
+        statusBadgeToneClass[tone],
+        className
+      ),
+      children
+    }
+  );
+};
+
+// src/app/surfaces/AppConfirmDialog.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var bodyClass2 = "flex flex-col gap-4 p-6";
+var titleClass = "pr-8";
+var actionsClass = "flex flex-wrap justify-end gap-2";
+var AppConfirmDialog = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  destructive = false,
+  className
+}) => {
+  return /* @__PURE__ */ jsx13(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx13(
+    DialogContent,
+    {
+      className: cn("gap-0 p-0 sm:max-w-md", className),
+      children: /* @__PURE__ */ jsxs9("div", { className: bodyClass2, children: [
+        /* @__PURE__ */ jsx13(DialogTitle, { className: titleClass, children: title }),
+        description ? /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: description }) : null,
+        /* @__PURE__ */ jsxs9("div", { className: actionsClass, children: [
+          /* @__PURE__ */ jsx13(
+            TimbalV2Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "sm",
+              onClick: () => onOpenChange(false),
+              children: cancelLabel
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            TimbalV2Button,
+            {
+              type: "button",
+              variant: destructive ? "destructive" : "primary",
+              size: "sm",
+              onClick: () => {
+                onConfirm();
+                onOpenChange(false);
+              },
+              children: confirmLabel
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
+};
+
+// src/app/surfaces/InfoCard.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var toneClass = {
+  neutral: "border-border bg-muted/40",
+  info: "border-primary/25 bg-primary/5",
+  success: "border-emerald-500/25 bg-emerald-500/5",
+  warn: "border-amber-500/25 bg-amber-500/5",
+  danger: "border-destructive/25 bg-destructive/5"
+};
+var InfoCard = ({
+  title,
+  children,
+  icon,
+  action,
+  tone = "neutral",
+  className
+}) => /* @__PURE__ */ jsxs10(
+  "div",
+  {
+    className: cn(
+      "flex items-start gap-3 rounded-xl border p-4",
+      toneClass[tone],
+      className
+    ),
+    children: [
+      icon ? /* @__PURE__ */ jsx14("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: icon }) : null,
+      /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
+        title ? /* @__PURE__ */ jsx14("p", { className: "text-sm font-medium text-foreground", children: title }) : null,
+        children ? /* @__PURE__ */ jsx14("div", { className: cn("text-sm text-muted-foreground", title && "mt-1"), children }) : null
+      ] }),
+      action ? /* @__PURE__ */ jsx14("div", { className: "shrink-0", children: action }) : null
+    ]
+  }
+);
+
+// src/app/surfaces/StatusDot.tsx
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var dotClass = {
+  online: "bg-emerald-500",
+  busy: "bg-amber-500",
+  offline: "bg-muted-foreground/50",
+  error: "bg-destructive",
+  neutral: "bg-muted-foreground"
+};
+var StatusDot = ({
+  tone = "neutral",
+  label,
+  pulse = false,
+  className
+}) => /* @__PURE__ */ jsxs11("span", { className: cn("inline-flex items-center gap-1.5", className), children: [
+  /* @__PURE__ */ jsxs11("span", { className: "relative flex size-2", children: [
+    pulse ? /* @__PURE__ */ jsx15(
+      "span",
+      {
+        className: cn(
+          "absolute inline-flex size-full animate-ping rounded-full opacity-60",
+          dotClass[tone]
+        )
+      }
+    ) : null,
+    /* @__PURE__ */ jsx15("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
+  ] }),
+  label ? /* @__PURE__ */ jsx15("span", { className: "text-xs text-muted-foreground", children: label }) : null
+] });
+
+// src/app/surfaces/DescriptionList.tsx
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var DescriptionList = ({
+  items,
+  stacked = false,
+  className
+}) => /* @__PURE__ */ jsx16(
+  "dl",
+  {
+    className: cn(
+      "divide-y divide-border rounded-xl border border-border bg-card",
+      className
+    ),
+    children: items.map((item, i) => /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        className: cn(
+          "px-4 py-3",
+          stacked ? "flex flex-col gap-0.5" : "flex items-center justify-between gap-4"
+        ),
+        children: [
+          /* @__PURE__ */ jsx16("dt", { className: "text-sm text-muted-foreground", children: item.label }),
+          /* @__PURE__ */ jsx16(
+            "dd",
+            {
+              className: cn(
+                "text-sm text-foreground",
+                !stacked && "text-right tabular-nums"
+              ),
+              children: item.value
+            }
+          )
+        ]
+      },
+      i
+    ))
+  }
+);
+
+// src/app/surfaces/ExpandableSection.tsx
+import { useId, useState as useState2 } from "react";
+import { AnimatePresence, motion as motion2, useReducedMotion as useReducedMotion2 } from "motion/react";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var Chevron = ({ open }) => /* @__PURE__ */ jsx17(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    className: cn(
+      "size-4 text-muted-foreground transition-transform duration-200",
+      open && "rotate-180"
+    ),
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsx17("path", { d: "m6 9 6 6 6-6" })
+  }
+);
+var ExpandableSection = ({
+  title,
+  icon,
+  count,
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  className
+}) => {
+  const reduceMotion = useReducedMotion2();
+  const panelId = useId();
+  const [internalOpen, setInternalOpen] = useState2(defaultOpen);
+  const open = openProp ?? internalOpen;
+  const toggle = () => {
+    if (openProp == null) setInternalOpen((o) => !o);
+    onOpenChange?.(!open);
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: cn("border-b border-border last:border-0", className), children: [
+    /* @__PURE__ */ jsxs13(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        "aria-expanded": open,
+        "aria-controls": panelId,
+        className: "flex w-full items-center justify-between gap-3 bg-transparent px-4 py-3 text-left hover:bg-transparent active:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/10",
+        children: [
+          /* @__PURE__ */ jsxs13("span", { className: "flex min-w-0 items-center gap-3", children: [
+            icon ? /* @__PURE__ */ jsx17("span", { className: "flex size-8 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground", children: icon }) : null,
+            /* @__PURE__ */ jsx17("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
+            count != null ? /* @__PURE__ */ jsx17("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: count }) : null
+          ] }),
+          /* @__PURE__ */ jsx17(Chevron, { open })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx17(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx17(
+      motion2.div,
+      {
+        id: panelId,
+        initial: reduceMotion ? void 0 : { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: reduceMotion ? void 0 : { height: 0, opacity: 0 },
+        transition: { duration: 0.2, ease: "easeOut" },
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ jsx17("div", { className: "bg-muted/20", children })
+      },
+      "body"
+    ) : null })
+  ] });
+};
+
+// src/app/surfaces/ResourceCard.tsx
+import { Fragment, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var resourceCardShellClass = cn(
+  "flex min-h-[8.5rem] flex-col rounded-2xl p-4 text-left font-normal",
+  TIMBAL_V2_ELEVATED_SURFACE
+);
+var mediaShellClass = cn(
+  "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-xl text-sm font-normal text-foreground",
+  TIMBAL_V2_LOGO_TILE
+);
+var resourceCardInteractiveClass = cn(
+  resourceCardShellClass,
+  "cursor-pointer bg-transparent hover:bg-transparent active:bg-transparent",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+);
+var ResourceCard = ({
+  title,
+  subtitle,
+  media,
+  badge,
+  footer,
+  action,
+  onClick,
+  ariaLabel,
+  className
+}) => {
+  const body = /* @__PURE__ */ jsxs14(Fragment, { children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex items-start gap-3", children: [
+      media ? /* @__PURE__ */ jsx18("span", { className: mediaShellClass, children: media }) : null,
+      /* @__PURE__ */ jsxs14("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+        /* @__PURE__ */ jsx18("p", { className: "truncate text-sm font-normal leading-snug text-foreground", children: title }),
+        subtitle ? /* @__PURE__ */ jsx18("p", { className: "mt-1 line-clamp-2 text-xs font-normal text-muted-foreground", children: subtitle }) : null
+      ] }),
+      badge ? /* @__PURE__ */ jsx18("span", { className: "shrink-0 pt-0.5", children: badge }) : null
+    ] }),
+    footer || action ? /* @__PURE__ */ jsxs14("div", { className: "mt-auto flex items-center justify-between gap-3 border-t border-border/40 pt-3 text-xs font-normal text-muted-foreground", children: [
+      /* @__PURE__ */ jsx18("span", { className: "min-w-0 truncate", children: footer }),
+      action ? /* @__PURE__ */ jsx18("span", { className: "shrink-0 opacity-80", children: action }) : null
+    ] }) : null
+  ] });
+  if (onClick) {
+    return /* @__PURE__ */ jsx18("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
+  }
+  return /* @__PURE__ */ jsx18("article", { className: cn(resourceCardShellClass, className), children: body });
+};
+
+// src/app/settings/SettingsSection.tsx
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var SettingsSectionHeader = ({
+  title,
+  description,
+  className
+}) => /* @__PURE__ */ jsxs15("div", { className: cn("flex flex-col", className), children: [
+  /* @__PURE__ */ jsx19("h3", { className: "text-[17px] font-medium leading-tight text-foreground", children: title }),
+  description ? /* @__PURE__ */ jsx19("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+] });
+var SettingsSection = ({
+  title,
+  description,
+  descriptionFooter,
+  children,
+  noBorderTop = false,
+  className
+}) => /* @__PURE__ */ jsxs15(
+  "section",
+  {
+    className: cn(
+      "grid grid-cols-1 gap-y-4 lg:grid-cols-[minmax(200px,280px)_minmax(0,1fr)] lg:gap-x-12 lg:gap-y-0",
+      noBorderTop ? "pb-6" : "border-t border-border py-6",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsxs15("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx19("h2", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx19("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
+        descriptionFooter ? /* @__PURE__ */ jsx19("div", { className: "mt-3 min-w-0", children: descriptionFooter }) : null
+      ] }),
+      /* @__PURE__ */ jsx19("div", { className: "min-w-0 space-y-3", children })
+    ]
+  }
+);
+
+// src/app/settings/FieldRow.tsx
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var FieldRow = ({
+  label,
+  children,
+  description,
+  inline = false,
+  htmlFor,
+  className
+}) => {
+  if (inline) {
+    return /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between gap-4 rounded-lg border border-border bg-card px-3.5 py-3",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs16("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx20(
+              "label",
+              {
+                htmlFor,
+                className: "block text-sm font-medium text-foreground",
+                children: label
+              }
+            ),
+            description ? /* @__PURE__ */ jsx20("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
+          ] }),
+          /* @__PURE__ */ jsx20("div", { className: "shrink-0", children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs16("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsx20("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
+    children,
+    description ? /* @__PURE__ */ jsx20("p", { className: "text-xs text-muted-foreground", children: description }) : null
+  ] });
+};
+
+// src/app/settings/FloatingUnsavedChangesBar.tsx
+import { useEffect, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence as AnimatePresence2, motion as motion3, useReducedMotion as useReducedMotion3 } from "motion/react";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+var FloatingUnsavedChangesBar = ({
+  visible,
+  message = "Unsaved changes",
+  discardLabel = "Discard",
+  saveLabel = "Save changes",
+  isSaving = false,
+  saveDisabled = false,
+  onDiscard,
+  onSave,
+  ariaLabel = "Unsaved changes",
+  className
+}) => {
+  const reduceMotion = useReducedMotion3();
+  const [mounted, setMounted] = useState3(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted || typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx21(AnimatePresence2, { children: visible ? /* @__PURE__ */ jsx21("div", { className: "pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center px-4", children: /* @__PURE__ */ jsxs17(
+      motion3.div,
+      {
+        role: "region",
+        "aria-label": ariaLabel,
+        initial: reduceMotion ? { opacity: 0 } : { opacity: 0, y: 28, scale: 0.94 },
+        animate: { opacity: 1, y: 0, scale: 1 },
+        exit: reduceMotion ? { opacity: 0 } : { opacity: 0, y: 18, scale: 0.96 },
+        transition: { type: "spring", stiffness: 420, damping: 32 },
+        className: cn(
+          "pointer-events-auto inline-flex max-w-[calc(100vw-2rem)] items-center gap-3 rounded-full border border-border bg-card py-1.5 pl-4 pr-1.5 shadow-card-elevated",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx21("span", { className: "text-sm text-muted-foreground", children: message }),
+          /* @__PURE__ */ jsxs17("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx21(Button, { variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSaving, children: discardLabel }),
+            /* @__PURE__ */ jsx21(Button, { size: "sm", onClick: onSave, disabled: saveDisabled || isSaving, children: isSaving ? "Saving\u2026" : saveLabel })
+          ] })
+        ]
+      }
+    ) }) : null }),
+    document.body
+  );
+};
+
+// src/app/settings/DangerZone.tsx
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+var DangerZoneAction = ({
+  title,
+  description,
+  action,
+  className
+}) => /* @__PURE__ */ jsxs18(
+  "div",
+  {
+    className: cn(
+      "flex flex-col gap-3 px-4 py-3.5 sm:flex-row sm:items-center sm:justify-between",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsxs18("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx22("p", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx22("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+      ] }),
+      /* @__PURE__ */ jsx22("div", { className: "shrink-0", children: action })
+    ]
+  }
+);
+var DangerZone = ({
+  title = "Danger zone",
+  description,
+  children,
+  className
+}) => /* @__PURE__ */ jsxs18(
+  "section",
+  {
+    className: cn(
+      "overflow-hidden rounded-xl border border-destructive/30",
+      className
+    ),
+    children: [
+      (title || description) && /* @__PURE__ */ jsxs18("header", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-3", children: [
+        title ? /* @__PURE__ */ jsx22("h3", { className: "text-sm font-semibold text-destructive", children: title }) : null,
+        description ? /* @__PURE__ */ jsx22("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+      ] }),
+      /* @__PURE__ */ jsx22("div", { className: "divide-y divide-border bg-card", children })
+    ]
+  }
+);
+
+// src/app/integrations/IntegrationCard.tsx
+import { useId as useId2 } from "react";
+import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+var INTEGRATION_CATALOG_CARD_HEIGHT_CLASS = "h-[12.25rem] min-h-[12.25rem] max-h-[12.25rem]";
+var statusLabel = {
+  available: null,
+  connected: "Connected",
+  disabled: "Disabled",
+  locked: "Locked"
+};
+var catalogCardShellClass = cn(
+  "group relative box-border flex flex-col overflow-hidden rounded-2xl px-4 pb-4 pt-4 text-left font-normal",
+  INTEGRATION_CATALOG_CARD_HEIGHT_CLASS,
+  TIMBAL_V2_ELEVATED_SURFACE,
+  "transition-opacity duration-200 ease-out"
+);
+var catalogCardInteractiveClass = cn(
+  catalogCardShellClass,
+  "cursor-pointer bg-transparent hover:bg-transparent active:bg-transparent",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+);
+var catalogCardMutedClass = cn(
+  "border-border/60 saturate-[0.72]",
+  "from-muted/80 to-muted/50 dark:border-white/[0.06] dark:from-white/[0.04] dark:to-white/[0.02]"
+);
+var logoShellClass = cn(
+  "relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-xl",
+  TIMBAL_V2_LOGO_TILE
+);
+var IntegrationCard = ({
+  name,
+  description,
+  logo,
+  badge,
+  status = "available",
+  action,
+  onClick,
+  ariaLabel,
+  className
+}) => {
+  const titleId = useId2();
+  const locked = status === "locked";
+  const dimmed = status === "disabled" || locked;
+  const body = /* @__PURE__ */ jsxs19("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex shrink-0 items-start gap-3 pr-2", children: [
+      logo ? /* @__PURE__ */ jsx23("span", { className: logoShellClass, "aria-hidden": Boolean(ariaLabel), children: logo }) : null,
+      /* @__PURE__ */ jsx23("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ jsxs19("div", { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs19("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx23(
+            "h4",
+            {
+              id: onClick && !action ? void 0 : titleId,
+              className: "truncate text-sm font-normal leading-snug text-foreground",
+              children: name
+            }
+          ),
+          statusLabel[status] ? /* @__PURE__ */ jsx23("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
+        ] }),
+        badge ? /* @__PURE__ */ jsx23("span", { className: "shrink-0", children: badge }) : null
+      ] }) })
+    ] }),
+    description ? /* @__PURE__ */ jsx23(
+      "p",
+      {
+        className: cn(
+          "mt-3 line-clamp-3 shrink-0 text-sm leading-relaxed text-muted-foreground",
+          dimmed && "text-muted-foreground/80"
+        ),
+        children: description
+      }
+    ) : null,
+    action ? /* @__PURE__ */ jsxs19(Fragment2, { children: [
+      /* @__PURE__ */ jsx23("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
+      /* @__PURE__ */ jsx23("div", { className: "relative mt-3 shrink-0", children: action })
+    ] }) : null
+  ] });
+  const shellClass3 = cn(
+    catalogCardShellClass,
+    dimmed && catalogCardMutedClass,
+    locked && "cursor-default opacity-75",
+    className
+  );
+  if (onClick && !action) {
+    return /* @__PURE__ */ jsx23(
+      "button",
+      {
+        type: "button",
+        onClick,
+        disabled: locked,
+        "aria-label": ariaLabel,
+        className: cn(
+          catalogCardInteractiveClass,
+          dimmed && catalogCardMutedClass,
+          locked && "cursor-default opacity-75",
+          className
+        ),
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx23("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
+};
+
+// src/app/integrations/IntegrationsEmptyState.tsx
+import { useId as useId3 } from "react";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+var IntegrationsEmptyState = ({
+  title = "No integrations yet",
+  description = "Connect a provider to start syncing data and powering your workforce.",
+  icon,
+  action,
+  className
+}) => {
+  const titleId = useId3();
+  return /* @__PURE__ */ jsxs20(
+    "section",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center gap-3 rounded-2xl px-6 py-14 text-center",
+        TIMBAL_V2_ELEVATED_SURFACE,
+        className
+      ),
+      "aria-labelledby": titleId,
+      children: [
+        icon ? /* @__PURE__ */ jsx24(
+          "span",
+          {
+            className: cn(
+              "flex size-14 items-center justify-center overflow-hidden rounded-2xl",
+              TIMBAL_V2_LOGO_TILE,
+              "text-muted-foreground"
+            ),
+            "aria-hidden": true,
+            children: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsx24("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx24("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
+        action ? /* @__PURE__ */ jsx24("div", { className: "mt-1", children: action }) : null
+      ]
+    }
+  );
+};
+
+// src/app/integrations/PlanBadge.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+var planBadgeClass = "inline-flex h-5 max-w-full shrink-0 items-center rounded-md border border-border bg-muted/90 px-2 text-[11px] font-normal text-muted-foreground dark:border-white/10 dark:bg-white/5 dark:text-muted-foreground";
+var PlanBadge = ({ children, className }) => /* @__PURE__ */ jsx25("span", { className: cn(planBadgeClass, className), children });
+
+// src/app/integrations/ConnectionRow.tsx
+import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+var logoShellClass2 = cn(
+  "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg",
+  TIMBAL_V2_LOGO_TILE
+);
+var ConnectionRow = ({
+  name,
+  logo,
+  meta,
+  badge,
+  action,
+  onClick,
+  ariaLabel,
+  className
+}) => {
+  const inner = /* @__PURE__ */ jsxs21(Fragment3, { children: [
+    logo ? /* @__PURE__ */ jsx26("span", { className: logoShellClass2, children: logo }) : null,
+    /* @__PURE__ */ jsxs21("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx26("p", { className: "truncate text-sm font-normal text-foreground", children: name }),
+      meta ? /* @__PURE__ */ jsx26("p", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
+    ] }),
+    badge ? /* @__PURE__ */ jsx26("span", { className: "shrink-0", children: badge }) : null,
+    action ? /* @__PURE__ */ jsx26("span", { className: "shrink-0", children: action }) : null
+  ] });
+  const rowClass2 = cn(
+    "flex w-full items-center gap-3 px-4 py-3 text-left",
+    onClick && "cursor-pointer bg-transparent hover:bg-transparent active:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/10",
+    className
+  );
+  if (onClick) {
+    return /* @__PURE__ */ jsx26(
+      "button",
+      {
+        type: "button",
+        role: "listitem",
+        onClick,
+        "aria-label": ariaLabel,
+        className: rowClass2,
+        children: inner
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx26("div", { role: "listitem", className: rowClass2, children: inner });
+};
+var connectionRowListClass = cn(
+  "overflow-hidden rounded-2xl",
+  TIMBAL_V2_ELEVATED_SURFACE
+);
+
+// src/app/integrations/ConnectionRowList.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var ConnectionRowList = ({
+  children,
+  "aria-label": ariaLabel = "Connected integrations",
+  className
+}) => /* @__PURE__ */ jsx27(
+  "div",
+  {
+    role: "list",
+    "aria-label": ariaLabel,
+    className: cn(connectionRowListClass, "divide-y divide-border", className),
+    children
+  }
+);
+
+// src/app/navigation/SubNav.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+var SubNav = ({
+  items,
+  activeId,
+  onChange,
+  className,
+  "aria-label": ariaLabel = "Section navigation",
+  layoutId
+}) => {
+  return /* @__PURE__ */ jsx28("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx28(
+    PillSegmentedTabs,
+    {
+      value: activeId,
+      onChange,
+      tabs: items.map((item) => ({ key: item.id, label: item.label })),
+      trackVariant: "flush",
+      layoutId: layoutId ?? "app-sub-nav-segmented",
+      "aria-label": ariaLabel
+    }
+  ) });
+};
+
+// src/app/navigation/Breadcrumbs.tsx
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+var Breadcrumbs = ({ items, className }) => {
+  return /* @__PURE__ */ jsx29("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx29("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs22("li", { className: "inline-flex items-center gap-1.5", children: [
+      index > 0 ? /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
+      isLast ? /* @__PURE__ */ jsx29("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx29("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ jsx29(
+        "button",
+        {
+          type: "button",
+          className: appBreadcrumbLinkClass,
+          onClick: item.onClick,
+          children: item.label
+        }
+      )
+    ] }, index);
+  }) }) });
+};
+
+// src/app/forms/Field.tsx
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+var Field = ({
+  label,
+  hint,
+  error,
+  children,
+  className,
+  htmlFor
+}) => {
+  return /* @__PURE__ */ jsxs23("div", { className: cn("aui-app-field", appFieldClass, className), children: [
+    /* @__PURE__ */ jsx30("label", { className: appFieldLabelClass, htmlFor, children: label }),
+    children,
+    hint && !error ? /* @__PURE__ */ jsx30("p", { className: appFieldHintClass, children: hint }) : null,
+    error ? /* @__PURE__ */ jsx30("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
+  ] });
+};
+var FieldInput = ({
+  label,
+  hint,
+  error,
+  fieldClassName,
+  className,
+  id,
+  ...inputProps
+}) => {
+  const inputId = id ?? inputProps.name;
+  return /* @__PURE__ */ jsx30(
+    Field,
+    {
+      label,
+      hint,
+      error,
+      htmlFor: inputId,
+      className: fieldClassName,
+      children: /* @__PURE__ */ jsx30(
+        "input",
+        {
+          id: inputId,
+          className: cn(appInputClass, className),
+          "aria-invalid": error ? true : void 0,
+          ...inputProps
+        }
+      )
+    }
+  );
+};
+
+// src/app/forms/FieldTextarea.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+var textareaClass = cn(
+  appInputClass,
+  "min-h-[5.5rem] resize-y py-2.5 leading-relaxed"
+);
+var FieldTextarea = ({
+  label,
+  hint,
+  error,
+  fieldClassName,
+  className,
+  id,
+  ...props
+}) => {
+  const textareaId = id ?? props.name;
+  return /* @__PURE__ */ jsx31(
+    Field,
+    {
+      label,
+      hint,
+      error,
+      htmlFor: textareaId,
+      className: fieldClassName,
+      children: /* @__PURE__ */ jsx31(
+        "textarea",
+        {
+          id: textareaId,
+          className: cn(textareaClass, className),
+          "aria-invalid": error ? true : void 0,
+          ...props
+        }
+      )
+    }
+  );
+};
+
+// src/app/forms/FieldSelect.tsx
+import { ChevronDownIcon } from "lucide-react";
+import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+var selectWrapClass = "relative";
+var selectClass = cn(
+  appInputClass,
+  "appearance-none pr-9"
+);
+var FieldSelect = ({
+  label,
+  hint,
+  error,
+  fieldClassName,
+  className,
+  children,
+  id,
+  ...props
+}) => {
+  const selectId = id ?? props.name;
+  return /* @__PURE__ */ jsx32(
+    Field,
+    {
+      label,
+      hint,
+      error,
+      htmlFor: selectId,
+      className: fieldClassName,
+      children: /* @__PURE__ */ jsxs24("div", { className: selectWrapClass, children: [
+        /* @__PURE__ */ jsx32(
+          "select",
+          {
+            id: selectId,
+            className: cn(selectClass, className),
+            "aria-invalid": error ? true : void 0,
+            ...props,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx32(
+          ChevronDownIcon,
+          {
+            className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground",
+            "aria-hidden": true
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/app/forms/FieldSwitch.tsx
+import { jsx as jsx33, jsxs as jsxs25 } from "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",
+  "peer-focus-visible:ring-2 peer-focus-visible:ring-foreground/10",
+  "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+  TIMBAL_V2_SWITCH_TRACK_OFF,
+  "peer-checked:border-foreground/15 peer-checked:from-primary-fill-from peer-checked:to-primary-fill-to peer-checked:shadow-card",
+  "peer-checked:[&>span]:translate-x-4"
+);
+var thumbClass = cn(
+  "pointer-events-none inline-block size-4 shrink-0 translate-x-0.5 rounded-full transition-transform",
+  TIMBAL_V2_SWITCH_THUMB
+);
+var FieldSwitch = ({
+  label,
+  description,
+  className,
+  id,
+  ...props
+}) => {
+  const inputId = id ?? props.name ?? "switch";
+  return /* @__PURE__ */ jsxs25(
+    "label",
+    {
+      className: cn(
+        "aui-app-field-switch flex cursor-pointer items-start gap-3",
+        className
+      ),
+      htmlFor: inputId,
+      children: [
+        /* @__PURE__ */ jsxs25("span", { className: "relative mt-0.5", children: [
+          /* @__PURE__ */ jsx33(
+            "input",
+            {
+              id: inputId,
+              type: "checkbox",
+              role: "switch",
+              className: "peer sr-only",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx33("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ jsx33("span", { className: thumbClass }) })
+        ] }),
+        /* @__PURE__ */ jsxs25("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx33("span", { className: "text-sm font-medium text-foreground", children: label }),
+          description ? /* @__PURE__ */ jsx33("span", { className: "text-xs text-muted-foreground", children: description }) : null
+        ] })
+      ]
+    }
+  );
+};
+
+// src/app/forms/SearchInput.tsx
+import { SearchIcon } from "lucide-react";
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+var SearchInput = ({
+  className,
+  placeholder = "Search\u2026",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs26(
+    "label",
+    {
+      className: cn(
+        "aui-app-search-input inline-flex min-w-[12rem] items-center gap-2",
+        appSearchInputClass,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx34(SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx34(
+          "input",
+          {
+            type: "search",
+            placeholder,
+            className: "min-w-0 flex-1 border-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground/70",
+            ...props
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/app/forms/FormSection.tsx
+import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+var FormSection = ({ title, children, className }) => {
+  return /* @__PURE__ */ jsxs27("fieldset", { className: cn("aui-app-form-section", appSectionClass, "border-0 p-0", className), children: [
+    title ? /* @__PURE__ */ jsx35("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
+    /* @__PURE__ */ jsx35("div", { className: "flex flex-col gap-4", children })
+  ] });
+};
+
+// src/app/data/FilterBar.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+var FilterBar = ({ children, className }) => {
+  return /* @__PURE__ */ jsx36(
+    "div",
+    {
+      className: cn("aui-app-filter-bar", appFilterBarClass, className),
+      role: "toolbar",
+      "aria-label": "Filters",
+      children
+    }
+  );
+};
+
+// src/app/data/DataTable.tsx
+import { useMemo, useState as useState4 } from "react";
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
+import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+var shellClass2 = "overflow-hidden rounded-xl border border-border bg-card shadow-card";
+var tableClass = "w-full border-collapse bg-transparent text-sm";
+var headCellClass = "border-b border-border/60 bg-transparent px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide text-muted-foreground";
+var bodyCellClass = "border-b border-border/40 bg-transparent px-4 py-2.5 text-foreground";
+var rowClass = "bg-transparent transition-colors hover:bg-foreground/[0.03] data-[clickable=true]:cursor-pointer";
+var footCellClass = "border-t border-border/60 bg-transparent px-4 py-2.5 text-xs text-muted-foreground";
+var footInnerClass = "flex flex-wrap items-center gap-2";
+var emptyCellClass = "bg-transparent px-4 py-10 text-center text-sm text-muted-foreground";
+var sortButtonClass = "group inline-flex min-w-0 items-center gap-1.5 rounded-md -mx-1 px-1 py-0.5 text-left font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10";
+var stickyHeadClass = "sticky top-0 z-[1] bg-card/95 shadow-[0_1px_0_0_hsl(var(--border)/0.5)] backdrop-blur-sm [&_th]:bg-card/95";
+var alignClass = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+function compareSortValues(a, b) {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (typeof a === "boolean" && typeof b === "boolean") return Number(a) - Number(b);
+  return String(a).localeCompare(String(b), void 0, { sensitivity: "base" });
+}
+function nextSort(current, columnId) {
+  if (current?.columnId !== columnId) {
+    return { columnId, direction: "asc" };
+  }
+  if (current.direction === "asc") {
+    return { columnId, direction: "desc" };
+  }
+  return null;
+}
+function SortIndicator({
+  active,
+  direction
+}) {
+  const iconClass = "size-3.5 shrink-0 opacity-60 group-hover:opacity-100";
+  if (!active) {
+    return /* @__PURE__ */ jsx37(ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
+  }
+  if (direction === "desc") {
+    return /* @__PURE__ */ jsx37(ArrowDownIcon, { className: iconClass, "aria-hidden": true });
+  }
+  return /* @__PURE__ */ jsx37(ArrowUpIcon, { className: iconClass, "aria-hidden": true });
+}
+function DataTable({
+  columns,
+  rows,
+  getRowKey,
+  emptyTitle = "No data",
+  emptyDescription,
+  emptyMode = "replace",
+  className,
+  sort: sortProp,
+  defaultSort = null,
+  onSortChange,
+  showRowCount = false,
+  rowCountLabel,
+  footer,
+  onRowClick,
+  stickyHeader = false,
+  dense = false,
+  caption
+}) {
+  const [uncontrolledSort, setUncontrolledSort] = useState4(
+    defaultSort
+  );
+  const isSortControlled = sortProp !== void 0;
+  const sort = isSortControlled ? sortProp : uncontrolledSort;
+  const setSort = (next) => {
+    if (!isSortControlled) {
+      setUncontrolledSort(next);
+    }
+    onSortChange?.(next);
+  };
+  const sortedRows = useMemo(() => {
+    if (!sort) return rows;
+    const column = columns.find((col) => col.id === sort.columnId);
+    if (!column?.sortable) return rows;
+    const getValue = column.sortValue ?? ((row) => {
+      const rendered = column.cell(row);
+      if (rendered === null || rendered === void 0 || typeof rendered === "string" || typeof rendered === "number" || typeof rendered === "boolean") {
+        return rendered;
+      }
+      return String(rendered);
+    });
+    return [...rows].sort((a, b) => {
+      const cmp = compareSortValues(getValue(a), getValue(b));
+      return sort.direction === "asc" ? cmp : -cmp;
+    });
+  }, [columns, rows, sort]);
+  const cellPad = dense ? "px-3 py-2" : void 0;
+  const headPad = dense ? "px-3 py-2" : void 0;
+  if (rows.length === 0 && emptyMode === "replace") {
+    return /* @__PURE__ */ jsx37(EmptyState, { title: emptyTitle, description: emptyDescription, className });
+  }
+  const rowCountText = rowCountLabel?.(sortedRows.length) ?? `${sortedRows.length} row${sortedRows.length === 1 ? "" : "s"}`;
+  const hasFoot = Boolean((showRowCount || footer) && sortedRows.length > 0);
+  return /* @__PURE__ */ jsx37("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ jsx37("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs28("table", { className: tableClass, children: [
+    caption ? /* @__PURE__ */ jsx37("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ jsx37("thead", { className: cn(stickyHeader && stickyHeadClass), children: /* @__PURE__ */ jsx37("tr", { children: columns.map((col) => {
+      const isSorted = sort?.columnId === col.id;
+      const ariaSort = col.sortable ? isSorted ? sort.direction === "asc" ? "ascending" : "descending" : "none" : void 0;
+      const headerContent = col.sortable ? /* @__PURE__ */ jsxs28(
+        "button",
+        {
+          type: "button",
+          className: sortButtonClass,
+          onClick: () => setSort(nextSort(sort, col.id)),
+          children: [
+            /* @__PURE__ */ jsx37("span", { className: "truncate", children: col.header }),
+            /* @__PURE__ */ jsx37(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
+          ]
+        }
+      ) : col.header;
+      return /* @__PURE__ */ jsx37(
+        "th",
+        {
+          scope: "col",
+          "aria-sort": ariaSort,
+          className: cn(
+            headCellClass,
+            headPad,
+            col.align && alignClass[col.align],
+            col.headerClassName
+          ),
+          children: headerContent
+        },
+        col.id
+      );
+    }) }) }),
+    /* @__PURE__ */ jsx37("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: sortedRows.length === 0 ? /* @__PURE__ */ jsx37("tr", { children: /* @__PURE__ */ jsx37("td", { colSpan: columns.length, className: emptyCellClass, children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ jsx37("p", { className: "font-medium text-foreground", children: emptyTitle }),
+      emptyDescription ? /* @__PURE__ */ jsx37("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
+    ] }) }) }) : sortedRows.map((row) => /* @__PURE__ */ jsx37(
+      "tr",
+      {
+        className: rowClass,
+        "data-clickable": onRowClick ? "true" : void 0,
+        onClick: onRowClick ? () => onRowClick(row) : void 0,
+        onKeyDown: onRowClick ? (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            onRowClick(row);
+          }
+        } : void 0,
+        tabIndex: onRowClick ? 0 : void 0,
+        role: onRowClick ? "button" : void 0,
+        children: columns.map((col) => /* @__PURE__ */ jsx37(
+          "td",
+          {
+            className: cn(
+              bodyCellClass,
+              cellPad,
+              col.align && alignClass[col.align],
+              col.className
+            ),
+            children: col.cell(row)
+          },
+          col.id
+        ))
+      },
+      getRowKey(row)
+    )) }),
+    hasFoot ? /* @__PURE__ */ jsx37("tfoot", { children: /* @__PURE__ */ jsx37("tr", { children: /* @__PURE__ */ jsx37("td", { colSpan: columns.length, className: footCellClass, children: /* @__PURE__ */ jsxs28(
+      "div",
+      {
+        className: cn(
+          footInnerClass,
+          showRowCount && footer ? "justify-between" : "justify-start"
+        ),
+        children: [
+          showRowCount ? /* @__PURE__ */ jsx37("span", { children: rowCountText }) : null,
+          footer
+        ]
+      }
+    ) }) }) }) : null
+  ] }) }) });
+}
+
+// src/app/data/ChartPanel.tsx
+import { useId as useId4 } from "react";
+
+// src/app/data/metrics-shared.tsx
+import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+var metricCardShellClass = cn(
+  studioIntegrationCardClass,
+  "aui-app-metric-card shadow-none",
+  "flex flex-col overflow-hidden"
+);
+var metricCardHeaderClass = "flex items-start justify-between gap-3 px-4 pb-1 pt-3";
+var metricTilesRowClass = "grid w-full min-w-0";
+var metricChartRegionClass = "relative min-h-0 w-full border-t border-border/40 pt-2";
+var metricChartPlotRegionClass = "relative min-h-0 w-full border-t border-border/40 px-0 pt-5 pb-3";
+var metricCellDividerClass = "border-r border-border/40";
+var MetricCardHeader = ({
+  title,
+  titleId,
+  description,
+  actions
+}) => {
+  if (!title && !description && !actions) return null;
+  return /* @__PURE__ */ jsxs29("header", { className: metricCardHeaderClass, children: [
+    /* @__PURE__ */ jsxs29("div", { className: "min-w-0", children: [
+      title ? /* @__PURE__ */ jsx38("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }) : null,
+      description ? /* @__PURE__ */ jsx38("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx38("div", { className: "shrink-0", children: actions }) : null
+  ] });
+};
+function metricTilesGridColsClass(n) {
+  switch (n) {
+    case 1:
+      return "grid-cols-1";
+    case 2:
+      return "grid-cols-2";
+    case 3:
+      return "grid-cols-3";
+    case 5:
+      return "grid-cols-2 sm:grid-cols-5";
+    case 6:
+      return "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6";
+    default:
+      return "grid-cols-2 md:grid-cols-4";
+  }
+}
+
+// src/app/data/ChartPanel.tsx
+import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+var ChartPanel = ({
+  title,
+  description,
+  artifact,
+  children,
+  actions,
+  height = 300,
+  className
+}) => {
+  const titleId = useId4();
+  const resolvedTitle = title ?? artifact?.title;
+  const hasHeader = Boolean(resolvedTitle || description || actions);
+  const body = children ?? (artifact ? /* @__PURE__ */ jsx39(ChartArtifactView, { artifact, embedded: true, height }) : null);
+  return /* @__PURE__ */ jsxs30(
+    "section",
+    {
+      className: cn(metricCardShellClass, "aui-app-chart-panel", className),
+      "aria-labelledby": resolvedTitle ? titleId : void 0,
+      children: [
+        /* @__PURE__ */ jsx39(
+          MetricCardHeader,
+          {
+            title: resolvedTitle,
+            titleId,
+            description,
+            actions
+          }
+        ),
+        /* @__PURE__ */ jsx39(
+          "div",
+          {
+            className: cn(
+              "relative min-h-0 w-full",
+              hasHeader ? metricChartPlotRegionClass : "pt-2 pb-3"
+            ),
+            children: body ?? /* @__PURE__ */ jsx39(
+              "div",
+              {
+                className: "flex items-center justify-center text-sm font-normal text-muted-foreground",
+                style: { minHeight: height },
+                role: "status",
+                children: "No chart"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/app/data/MetricTile.tsx
+import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
+var trendToneClass = {
+  up: "border-border/80 bg-muted/40 text-muted-foreground",
+  down: "border-border/80 bg-muted/40 text-muted-foreground",
+  neutral: "border-border/80 bg-muted/30 text-muted-foreground"
+};
+var metricTileBaseClass = "relative flex min-w-0 flex-1 flex-col gap-1 px-4 py-3 text-left font-normal";
+var metricTileInteractiveClass = cn(
+  metricTileBaseClass,
+  "bg-transparent hover:bg-transparent active:bg-transparent",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/10"
+);
+var MetricTile = ({
+  label,
+  value,
+  unit,
+  trend,
+  trendTone = "neutral",
+  active = false,
+  showDivider = false,
+  onSelect,
+  ariaLabel,
+  className
+}) => {
+  const content = /* @__PURE__ */ jsxs31(Fragment4, { children: [
+    active ? /* @__PURE__ */ jsx40(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "absolute inset-x-0 bottom-0 h-0.5 bg-foreground dark:bg-white"
+      }
+    ) : null,
+    /* @__PURE__ */ jsx40("span", { className: "text-xs font-normal text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxs31("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs31("span", { className: "flex items-baseline gap-1", children: [
+        /* @__PURE__ */ jsx40("span", { className: "text-2xl font-normal tracking-tight text-foreground tabular-nums", children: value }),
+        unit ? /* @__PURE__ */ jsx40("span", { className: "text-xs font-normal text-muted-foreground", children: unit }) : null
+      ] }),
+      trend ? /* @__PURE__ */ jsx40(
+        "span",
+        {
+          className: cn(
+            "rounded-full border px-1.5 py-0.5 text-xs font-normal",
+            trendToneClass[trendTone]
+          ),
+          children: trend
+        }
+      ) : null
+    ] })
+  ] });
+  const divider = showDivider ? metricCellDividerClass : void 0;
+  if (onSelect) {
+    return /* @__PURE__ */ jsx40(
+      "button",
+      {
+        type: "button",
+        onClick: onSelect,
+        "aria-pressed": active,
+        "aria-label": ariaLabel,
+        className: cn(metricTileInteractiveClass, divider, className),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx40("div", { className: cn(metricTileBaseClass, divider, className), children: content });
+};
+
+// src/app/data/MetricRow.tsx
+import { useId as useId5, useState as useState5 } from "react";
+import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+var MetricRow = ({
+  title,
+  description,
+  actions,
+  metrics,
+  activeMetricId,
+  defaultActiveMetricId,
+  onMetricChange,
+  metricsAriaLabel = "Metrics",
+  className
+}) => {
+  const titleId = useId5();
+  const selectable = onMetricChange != null || activeMetricId != null;
+  const [internalId, setInternalId] = useState5(
+    defaultActiveMetricId ?? metrics[0]?.id
+  );
+  const activeId = activeMetricId ?? internalId;
+  const select = (id) => {
+    if (activeMetricId == null) setInternalId(id);
+    onMetricChange?.(id);
+  };
+  return /* @__PURE__ */ jsxs32(
+    "section",
+    {
+      className: cn(metricCardShellClass, className),
+      "aria-labelledby": title ? titleId : void 0,
+      children: [
+        /* @__PURE__ */ jsx41(
+          MetricCardHeader,
+          {
+            title,
+            titleId,
+            description,
+            actions
+          }
+        ),
+        /* @__PURE__ */ jsx41(
+          "div",
+          {
+            role: selectable ? "group" : void 0,
+            "aria-label": selectable ? metricsAriaLabel : void 0,
+            className: cn(
+              metricTilesRowClass,
+              metricTilesGridColsClass(metrics.length),
+              (title || description || actions) && "mt-3"
+            ),
+            children: metrics.map((m, index) => /* @__PURE__ */ jsx41(
+              MetricTile,
+              {
+                label: m.label,
+                value: m.value,
+                unit: m.unit,
+                trend: m.trend,
+                trendTone: m.trendTone,
+                active: selectable && m.id === activeId,
+                showDivider: index < metrics.length - 1,
+                onSelect: selectable ? () => select(m.id) : void 0
+              },
+              m.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/app/data/MetricChartCard.tsx
+import { useId as useId6, useState as useState6 } from "react";
+import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
+var MetricChartCard = ({
+  title,
+  description,
+  actions,
+  metrics,
+  activeMetricId,
+  defaultActiveMetricId,
+  onMetricChange,
+  xKey = "date",
+  variant = "area",
+  height = 300,
+  formatX,
+  formatValue,
+  emptyLabel = "No data yet",
+  metricsAriaLabel = "Metrics",
+  className
+}) => {
+  const titleId = useId6();
+  const [internalId, setInternalId] = useState6(
+    defaultActiveMetricId ?? metrics[0]?.id
+  );
+  const activeId = activeMetricId ?? internalId;
+  const active = metrics.find((m) => m.id === activeId) ?? metrics[0];
+  const select = (id) => {
+    if (activeMetricId == null) setInternalId(id);
+    onMetricChange?.(id);
+  };
+  const hasHeader = Boolean(title || description || actions);
+  const chartAriaLabel = typeof active?.label === "string" ? `${active.label} over time` : "Metric chart";
+  return /* @__PURE__ */ jsxs33(
+    "section",
+    {
+      className: cn(metricCardShellClass, className),
+      "aria-labelledby": title ? titleId : void 0,
+      children: [
+        /* @__PURE__ */ jsx42(
+          MetricCardHeader,
+          {
+            title,
+            titleId,
+            description,
+            actions
+          }
+        ),
+        /* @__PURE__ */ jsx42(
+          "div",
+          {
+            role: "group",
+            "aria-label": metricsAriaLabel,
+            className: cn(
+              metricTilesRowClass,
+              metricTilesGridColsClass(metrics.length),
+              hasHeader && "mt-3"
+            ),
+            children: metrics.map((m, index) => /* @__PURE__ */ jsx42(
+              MetricTile,
+              {
+                label: m.label,
+                value: m.value,
+                unit: m.unit,
+                trend: m.trend,
+                trendTone: m.trendTone,
+                active: m.id === active?.id,
+                showDivider: index < metrics.length - 1,
+                onSelect: () => select(m.id)
+              },
+              m.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx42("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: active?.data && active.data.length > 0 ? /* @__PURE__ */ jsx42(
+          LineAreaChart,
+          {
+            data: active.data,
+            xKey,
+            series: [
+              {
+                dataKey: active.dataKey ?? "value",
+                label: typeof active.label === "string" ? active.label : active.id,
+                color: active.color
+              }
+            ],
+            variant,
+            layout: "flush",
+            height,
+            formatX,
+            formatValue,
+            ariaLabel: chartAriaLabel
+          },
+          active.id
+        ) : /* @__PURE__ */ jsx42(
+          "div",
+          {
+            className: "flex w-full items-center justify-center text-sm font-normal text-muted-foreground",
+            style: { height },
+            role: "status",
+            children: emptyLabel
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// src/charts/sparkline.tsx
+import { useId as useId7 } from "react";
+import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+var Sparkline = ({
+  data,
+  dataKey = "value",
+  color = "var(--primary, #6366f1)",
+  area = true,
+  width = 96,
+  height = 28,
+  strokeWidth = 1.5,
+  className,
+  ariaLabel = "Trend"
+}) => {
+  const uid = useId7();
+  const values = data.map((d) => typeof d === "number" ? d : toNum(d[dataKey]));
+  if (values.length === 0) {
+    return /* @__PURE__ */ jsx43("span", { className: cn("inline-block", className), style: { width, height } });
+  }
+  const pad = strokeWidth + 1;
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const range = max - min || 1;
+  const innerW = width - pad * 2;
+  const innerH = height - pad * 2;
+  const points = values.map((v, i) => ({
+    x: pad + (values.length > 1 ? i / (values.length - 1) * innerW : innerW / 2),
+    y: pad + innerH - (v - min) / range * innerH
+  }));
+  return /* @__PURE__ */ jsxs34(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", className),
+      role: "img",
+      "aria-label": ariaLabel,
+      preserveAspectRatio: "none",
+      children: [
+        area && /* @__PURE__ */ jsxs34(Fragment5, { children: [
+          /* @__PURE__ */ jsx43("defs", { children: /* @__PURE__ */ jsxs34("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx43("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
+            /* @__PURE__ */ jsx43("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
+          ] }) }),
+          /* @__PURE__ */ jsx43("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
+        ] }),
+        /* @__PURE__ */ jsx43(
+          "path",
+          {
+            d: monotoneLinePath(points),
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  APP_KIT_AGENT_INSTRUCTIONS,
+  appPageColumnClass,
+  appShellTopbarInsetClass,
+  appShellInsetTopClass,
+  appSurfaceCardClass,
+  appStatTileClass,
+  appFilterBarClass,
+  appSearchInputClass,
+  useAppShellChat,
+  AppShell,
+  AppShellTopbar,
+  AppShellChatTrigger,
+  PageHeader,
+  Page,
+  Section,
+  AppCopilotProvider,
+  useAppCopilotContext,
+  AppChatPanel,
+  SurfaceCard,
+  StatTile,
+  EmptyState,
+  StatusBadge,
+  AppConfirmDialog,
+  InfoCard,
+  StatusDot,
+  DescriptionList,
+  ExpandableSection,
+  ResourceCard,
+  SettingsSectionHeader,
+  SettingsSection,
+  FieldRow,
+  FloatingUnsavedChangesBar,
+  DangerZoneAction,
+  DangerZone,
+  INTEGRATION_CATALOG_CARD_HEIGHT_CLASS,
+  IntegrationCard,
+  IntegrationsEmptyState,
+  PlanBadge,
+  ConnectionRow,
+  connectionRowListClass,
+  ConnectionRowList,
+  SubNav,
+  Breadcrumbs,
+  Field,
+  FieldInput,
+  FieldTextarea,
+  FieldSelect,
+  FieldSwitch,
+  SearchInput,
+  FormSection,
+  FilterBar,
+  DataTable,
+  ChartPanel,
+  MetricTile,
+  MetricRow,
+  MetricChartCard,
+  Sparkline
+};