@usetheo/ui 0.6.2-next.0 → 0.7.0-next.0

package/dist/index.d.ts

@@ -194,6 +194,14 @@ interface ThemeScriptProps {
     defaultTheme?: string;
     /** Mode to apply when no persisted value exists. Default `"dark"`. */
     defaultMode?: ThemeMode;
+    /**
+     * Density to apply when no persisted value exists. Default `"comfortable"`.
+     * Mirrors `ThemeProvider`'s `defaultDensity` so the inline-script and
+     * the React provider agree on the SSR-default density (and the
+     * `data-density` attribute set by this script matches what
+     * `ThemeProvider` promotes via its post-mount hydration effect).
+     */
+    defaultDensity?: "compact" | "comfortable" | "spacious";
     /**
      * localStorage namespace. Must match the `storageKey` passed to
      * `<ThemeProvider>`. Default `"theo-ui:theme"`. Pass `null` to disable
@@ -201,7 +209,7 @@ interface ThemeScriptProps {
      */
     storageKey?: string | null;
 }
-declare function ThemeScript({ defaultTheme, defaultMode, storageKey, }: ThemeScriptProps): JSX$1.Element;
+declare function ThemeScript({ defaultTheme, defaultMode, defaultDensity, storageKey, }: ThemeScriptProps): JSX$1.Element;
 
 interface ThemeSwitcherProps {
     className?: string;
@@ -2596,6 +2604,179 @@ interface ToolResultProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare const ToolResult: react.ForwardRefExoticComponent<ToolResultProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Progress — accessible progress bar primitive.
+ *
+ * Built on `<div role="progressbar">` (NOT native `<progress>`) so Tailwind
+ * classes can style the track + fill cross-browser (Chrome/Safari/Firefox
+ * shadow-DOM hooks for `<progress>` diverge). Matches Radix / shadcn /
+ * Mantine convention.
+ *
+ * Variants:
+ *   - intent: `default` | `success` | `warning` | `destructive` — controls fill color
+ *   - height: `h-1` (4px, default) | `h-1.5` | `h-2` | `h-3`
+ *   - indeterminate: animated bar, no value (e.g. "uploading…", "building…")
+ *
+ * Composition:
+ *   <Progress value={42} max={100} intent="success" aria-label="Upload" />
+ *   <Progress indeterminate aria-label="Building" />
+ *
+ * A11y:
+ *   - role="progressbar"
+ *   - aria-valuenow / aria-valuemin / aria-valuemax (determinate)
+ *   - aria-busy="true" when indeterminate
+ *   - Respects `prefers-reduced-motion` (no animation when set)
+ *
+ * Used by `<UsageMeter>` to render each metric's fill bar, but ships as a
+ * standalone primitive for direct consumer use (deploy phase, file upload,
+ * build progress, quota fill).
+ */
+interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+    /** Current value (0..max). Values outside the range are clamped. */
+    value?: number;
+    /** Maximum value. Defaults to 100. */
+    max?: number;
+    /** Visual intent — controls fill color. */
+    intent?: "default" | "success" | "warning" | "destructive";
+    /** Bar height in tailwind units. Defaults to `"h-1"` (4px). */
+    height?: "h-1" | "h-1.5" | "h-2" | "h-3";
+    /** When true, animated bar with no value. Omits `aria-valuenow`, adds `aria-busy`. */
+    indeterminate?: boolean;
+    /** Accessible label. Required if not preceded by an `aria-labelledby` element. */
+    "aria-label"?: string;
+}
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * PlanBadge — semantic pricing-tier badge.
+ *
+ * Five canonical tiers (`free` / `hobby` / `pro` / `team` / `enterprise`) with
+ * distinct color tokens. Consumers self-document intent with `plan="hobby"`
+ * instead of mapping a generic `<Badge variant="outline">` to colors per app.
+ * Future rebrand / dark-mode tweaks propagate automatically — no consumer
+ * code change.
+ *
+ * Visual spec (per `theo/docs/handoff/2026-05-23-theo-ui-cloud-dashboard-gaps-brief.md`):
+ *
+ *   | tier         | bg                  | border                   | text                  |
+ *   |--------------|---------------------|--------------------------|-----------------------|
+ *   | free         | bg-muted/40         | border-muted-foreground/20 | text-muted-foreground |
+ *   | hobby        | bg-warning/10       | border-warning/30        | text-warning          |
+ *   | pro          | bg-primary/10       | border-primary/30        | text-primary          |
+ *   | team         | bg-success/10       | border-success/30        | text-success          |
+ *   | enterprise   | bg-foreground/5     | border-foreground/20     | text-foreground       |
+ *
+ * Default label capitalizes the tier (`hobby → "Hobby"`, `enterprise → "Enterprise"`).
+ *
+ * Used by `<AccountMenu>` inline with the user name; usable standalone.
+ */
+type PlanTier = "free" | "hobby" | "pro" | "team" | "enterprise";
+interface PlanBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Plan tier identifier. */
+    plan: PlanTier;
+    /** Override the display label. Defaults to the capitalized tier name. */
+    label?: string;
+    /** Size variant. */
+    size?: "sm" | "md";
+}
+declare const PlanBadge: react.ForwardRefExoticComponent<PlanBadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * UsageMeter — multi-metric stacked usage card.
+ *
+ * PaaS-shape sibling of `<CostMeter>` (which is mono-USD). Displays N
+ * metrics with arbitrary units (GB, requests, build-minutes, seats) per
+ * the reference TheoCloud dashboard mockup. Each row = label + value/max
+ * + `<Progress>` fill bar.
+ *
+ * Composition:
+ *
+ *   <UsageMeter
+ *     title="Last 30 days"
+ *     action={<Badge variant="outline">Upgrade</Badge>}
+ *     metrics={[
+ *       { label: "Fast Data Transfer", value: 0, max: 100, unit: "GB" },
+ *       { label: "Edge Requests", value: 0, max: 1_000_000, unit: "req",
+ *         formatter: (v, m) => `${v} / ${m >= 1e6 ? `${m / 1e6}M` : m}` },
+ *     ]}
+ *   />
+ *
+ * Over-quota detection: when `value > max`, the value text gets the
+ * `text-warning` class and the underlying `<Progress>` uses
+ * `intent="warning"` (bar fills 100% via Progress's own clamping).
+ *
+ * `compact` mode renders only the bars (no label/value text) — useful in
+ * narrow nav-bar slots.
+ *
+ * Imports the sibling `<Progress>` primitive via relative path (per RFC
+ * dashboard-paas-primitives D3) — primitives must not depend on the
+ * `@usetheo/ui` barrel.
+ */
+interface UsageMetric {
+    /** Display label (e.g. "Fast Data Transfer"). */
+    label: ReactNode;
+    /** Current consumption. */
+    value: number;
+    /** Maximum allowed in the current period. */
+    max: number;
+    /** Unit string (e.g. "GB", "req", "min"). Rendered after value/max. */
+    unit?: string;
+    /** Optional custom formatter — overrides default `${value} / ${max} ${unit}`. */
+    formatter?: (value: number, max: number, unit?: string) => string;
+}
+interface UsageMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Card title (e.g. "Last 30 days", "This billing period"). */
+    title?: ReactNode;
+    /** Optional right-aligned action slot (e.g. an Upgrade Badge or Button). */
+    action?: ReactNode;
+    /** Array of metrics to display. Order preserved. */
+    metrics: UsageMetric[];
+    /** When true, show only the bars without label/value text (sparkline mode). */
+    compact?: boolean;
+}
+declare const UsageMeter: react.ForwardRefExoticComponent<UsageMeterProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * AccountMenu — sidebar header for PaaS surfaces.
+ *
+ * Renders avatar + name + (optional) plan badge + (optional) secondary line.
+ * Dual mode: with `onClick`, renders as a `<button>` with a `ChevronsUpDown`
+ * trailing icon (account picker affordance); without, renders as a static
+ * `<div>` (read-only display, not focusable).
+ *
+ * Composition:
+ *
+ *   <Sidebar.Header className="p-0">
+ *     <AccountMenu
+ *       name="paulohenriquevn"
+ *       avatar="https://avatars.githubusercontent.com/u/12345"
+ *       plan="hobby"
+ *       onClick={openAccountSwitcher}
+ *     />
+ *   </Sidebar.Header>
+ *
+ * Avatar handling:
+ *   - URL (`http(s)://` or `/`) → `<Avatar.Image>` with `<Avatar.Fallback>` initials
+ *   - Short string (≤2 chars) → treated as initials directly
+ *   - Undefined → initials derived from the first character of `name`
+ *
+ * PaaS-shape sibling of `<ProjectSwitcher>` (workspace + branch + agent-status).
+ * Same dual-mode (interactive vs static) pattern; different semantics.
+ */
+interface AccountMenuProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children" | "name"> {
+    /** Display name (username, email, org name). */
+    name: ReactNode;
+    /** Avatar URL or 1-2-char initials. If undefined, derives initials from `name`. */
+    avatar?: string;
+    /** Plan tier — renders inline `<PlanBadge size="sm">`. Omit for none. */
+    plan?: PlanTier;
+    /** Optional secondary line below name (e.g. email). */
+    secondary?: ReactNode;
+    /** Make the row interactive (button) with a trailing chevron. */
+    onClick?: () => void;
+}
+declare const AccountMenu: react.ForwardRefExoticComponent<AccountMenuProps & react.RefAttributes<HTMLElement>>;
+
 interface ProgressChecklistProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     title?: ReactNode;
     steps: TaskStep[];
@@ -3662,4 +3843,4 @@ interface CommandPaletteProps {
  */
 declare function CommandPalette({ open, onOpenChange, items, onSelect, placeholder, emptyMessage, filter, }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
 
-export { ALL_MODES, AgentComposer, type AgentDraft, AgentEditor, AgentErrorCard, type AgentErrorKind, AgentEvent, type AgentEvent$1 as AgentEventModel, type AgentEventStatus, type AgentEventType, AgentHandoff, AgentProfile, type AgentProfileDescriptor, AgentStartingState, AgentStream, type AgentStreamItem, AgentStreaming, AgentTimeline, ApprovalCard, type ApprovalSeverity, ArtifactPreview, type Attachment, AttachmentChip, type AuditActorKind, type AuditEntry, AuditLogEntry, type AuditSeverity, AutoCompactNotice, Avatar, BadgeWithDot as Badge, type BadgeProps, BrowserControls, BuildLogStream, Button, type ButtonProps, type Capability, CapabilityIndicator, type CapabilityState, Card, ChatComposer, ChatMessage, ChatMessageAction, type ChatMessageActionProps, ChatMessageActions, type ChatMessageActionsProps, ChatMessageBranch, ChatMessageBranchContent, type ChatMessageBranchContentProps, ChatMessageBranchNext, type ChatMessageBranchNextProps, ChatMessageBranchPage, type ChatMessageBranchPageProps, ChatMessageBranchPrevious, type ChatMessageBranchPreviousProps, type ChatMessageBranchProps, ChatMessageBranchSelector, type ChatMessageBranchSelectorProps, ChatMessageContent, type ChatMessageContentProps, type ChatMessageContentVariant, type ChatMessageProps, ChatMessageResponse, type ChatMessageResponseProps, ChatMessageRoot, type ChatMessageRootProps, ChatMessageToolbar, type ChatMessageToolbarProps, ChatThread, Checkbox, type ColorScale, type CommandItem, CommandPalette, type ComposerMode, ContextCard, ContextWindowBar, CostMeter, type CreatedFile, CreatedFilesCard, type CronJob, CronJobCard, type CronJobStatus, CronJobsList, type CustomContentUIPart, DataPart, type DataPartProps, type DataRenderer, type DataRendererMap, type DataUIPart, type DefineThemeInput, type Density, type DensityContextValue, type Deployment, DeploymentRow, type DeploymentStatus, Dialog, type DiffHunk, type DiffLine, type DiffLineKind, DiffViewer, type Domain, DomainConfig, type DomainStatus, EmptyState, type EnvScope, type EnvVar, EnvVarEditor, FilePart, type FilePartProps, type FileUIPart, FolderContextCard, type FolderEntry, FolderSelector, FormField, HOOK_EVENTS, type HandoffParty, HookConfig, type HookEntry, type HookEvent, type HookEventEntry, HookEventLog, type HookEventResult, Input, type InputProps, type IntentOption, IntentSelector, Label, type Lane, LaneBoard, type LaneCard, type LaneState, type LogLevel, type LogLine, LoginSplit, type MCPServer, MCPServerCard, MCPServerList, type MCPServerStatus, MODE_LABEL, MemoryEditor, type MemoryLayer, type MemoryScope, type MentionItem, MentionMenu, type MentionTrigger, type MessageRole, type Metric, MetricsPanel, type Mode, type ModelCapabilityFlag, ModelCard, type ModelInfo, type ModelOption, ModelSelector, type PartRendererMap, type PermissionDecision, type PermissionDecisionKind, PermissionMatrix, PermissionModal, type PermissionOperation, type PermissionRequest, type PermissionRule, type PlanNode, type PlanNodeStatus, type PreviewEnv, PreviewEnvCard, PreviewPanel, type PreviewService, ProgressChecklist, type Project, ProjectCard, type ProjectStatus, ProjectSwitcher, type ProviderMetadata, type QuickAction, QuickActionChips, RadioGroup, type RailStep, type ReasoningFileUIPart, ReasoningPart, type ReasoningPartProps, type ReasoningUIPart, type RecentFolder, RecentFoldersList, type RenderPartOptions, type RollbackTarget, RollbackUI, type Rule, RuleCard, RuleEditor, type RuleScope, type RuleState, RunStats, type RunningTaskItem, type RunningTaskStatus, RunningTasksPanel, ScrollArea, Select, SessionListItem, type SessionMode, type SessionRunStatus, type SessionStatus, type SessionSummary, SessionTimeline, Sheet, Sidebar, Skeleton, type Skill, SkillCard, SkillEditor, type SkillSource, type SkillState, SkillsList, SocialAuthRow, type SocialProvider, SourceDocumentPart, type SourceDocumentPartProps, type SourceDocumentUIPart, SourceUrlPart, type SourceUrlPartProps, type SourceUrlUIPart, type StepStartUIPart, StepsRail, SubAgentDispatch, type SubAgentRun, type SubAgentState, Switch, SystemPromptEditor, Tabs, TaskHeader, TaskNode, TaskPlan, type TaskSource, type TaskStatus, type TaskStep, type TaskStepStatus, type TerminalLine, TerminalPanel, TextPart, type TextPartProps, type TextUIPart, Textarea, type TextareaProps, type Theme, type ThemeFonts, type ThemeMode, ThemeProvider, ThemeScript, ThemeSwitcher, TheoUIProvider, type TheoUIProviderProps, Toast, type ToastVariant, Toaster, TokenUsageChart, type TokenUsagePoint, ToolCall, ToolCallCard, ToolCallPart, type ToolCallPartProps, type ToolCallStatus, type ToolEnablement, type ToolEntry, type ToolInvocationState, ToolResult, type ToolUIPart, ToolsList, TooltipWithStatics as Tooltip, TopNav, type UIMessage, type UIMessagePart, anthropicStyle, auroraTerminal, avatarVariants, badgeVariants, builtinThemes, buttonVariants, capabilityPresets, classicPaper, cn, defineTheme, dracula, githubDark, hex, isCustomContentUIPart, isDataUIPart, isFileUIPart, isReasoningFileUIPart, isReasoningUIPart, isSourceDocumentUIPart, isSourceUrlUIPart, isStepStartUIPart, isTextUIPart, isToolUIPart, linearGlass, modelCapabilityPresets, oneDark, openaiStyle, renderPart, rgb, sheetVariants, useDensity, useTheme, useToast, vercelMono, violetForge };
+export { ALL_MODES, AccountMenu, type AccountMenuProps, AgentComposer, type AgentDraft, AgentEditor, AgentErrorCard, type AgentErrorKind, AgentEvent, type AgentEvent$1 as AgentEventModel, type AgentEventStatus, type AgentEventType, AgentHandoff, AgentProfile, type AgentProfileDescriptor, AgentStartingState, AgentStream, type AgentStreamItem, AgentStreaming, AgentTimeline, ApprovalCard, type ApprovalSeverity, ArtifactPreview, type Attachment, AttachmentChip, type AuditActorKind, type AuditEntry, AuditLogEntry, type AuditSeverity, AutoCompactNotice, Avatar, BadgeWithDot as Badge, type BadgeProps, BrowserControls, BuildLogStream, Button, type ButtonProps, type Capability, CapabilityIndicator, type CapabilityState, Card, ChatComposer, ChatMessage, ChatMessageAction, type ChatMessageActionProps, ChatMessageActions, type ChatMessageActionsProps, ChatMessageBranch, ChatMessageBranchContent, type ChatMessageBranchContentProps, ChatMessageBranchNext, type ChatMessageBranchNextProps, ChatMessageBranchPage, type ChatMessageBranchPageProps, ChatMessageBranchPrevious, type ChatMessageBranchPreviousProps, type ChatMessageBranchProps, ChatMessageBranchSelector, type ChatMessageBranchSelectorProps, ChatMessageContent, type ChatMessageContentProps, type ChatMessageContentVariant, type ChatMessageProps, ChatMessageResponse, type ChatMessageResponseProps, ChatMessageRoot, type ChatMessageRootProps, ChatMessageToolbar, type ChatMessageToolbarProps, ChatThread, Checkbox, type ColorScale, type CommandItem, CommandPalette, type ComposerMode, ContextCard, ContextWindowBar, CostMeter, type CreatedFile, CreatedFilesCard, type CronJob, CronJobCard, type CronJobStatus, CronJobsList, type CustomContentUIPart, DataPart, type DataPartProps, type DataRenderer, type DataRendererMap, type DataUIPart, type DefineThemeInput, type Density, type DensityContextValue, type Deployment, DeploymentRow, type DeploymentStatus, Dialog, type DiffHunk, type DiffLine, type DiffLineKind, DiffViewer, type Domain, DomainConfig, type DomainStatus, EmptyState, type EnvScope, type EnvVar, EnvVarEditor, FilePart, type FilePartProps, type FileUIPart, FolderContextCard, type FolderEntry, FolderSelector, FormField, HOOK_EVENTS, type HandoffParty, HookConfig, type HookEntry, type HookEvent, type HookEventEntry, HookEventLog, type HookEventResult, Input, type InputProps, type IntentOption, IntentSelector, Label, type Lane, LaneBoard, type LaneCard, type LaneState, type LogLevel, type LogLine, LoginSplit, type MCPServer, MCPServerCard, MCPServerList, type MCPServerStatus, MODE_LABEL, MemoryEditor, type MemoryLayer, type MemoryScope, type MentionItem, MentionMenu, type MentionTrigger, type MessageRole, type Metric, MetricsPanel, type Mode, type ModelCapabilityFlag, ModelCard, type ModelInfo, type ModelOption, ModelSelector, type PartRendererMap, type PermissionDecision, type PermissionDecisionKind, PermissionMatrix, PermissionModal, type PermissionOperation, type PermissionRequest, type PermissionRule, PlanBadge, type PlanBadgeProps, type PlanNode, type PlanNodeStatus, type PlanTier, type PreviewEnv, PreviewEnvCard, PreviewPanel, type PreviewService, Progress, ProgressChecklist, type ProgressProps, type Project, ProjectCard, type ProjectStatus, ProjectSwitcher, type ProviderMetadata, type QuickAction, QuickActionChips, RadioGroup, type RailStep, type ReasoningFileUIPart, ReasoningPart, type ReasoningPartProps, type ReasoningUIPart, type RecentFolder, RecentFoldersList, type RenderPartOptions, type RollbackTarget, RollbackUI, type Rule, RuleCard, RuleEditor, type RuleScope, type RuleState, RunStats, type RunningTaskItem, type RunningTaskStatus, RunningTasksPanel, ScrollArea, Select, SessionListItem, type SessionMode, type SessionRunStatus, type SessionStatus, type SessionSummary, SessionTimeline, Sheet, Sidebar, Skeleton, type Skill, SkillCard, SkillEditor, type SkillSource, type SkillState, SkillsList, SocialAuthRow, type SocialProvider, SourceDocumentPart, type SourceDocumentPartProps, type SourceDocumentUIPart, SourceUrlPart, type SourceUrlPartProps, type SourceUrlUIPart, type StepStartUIPart, StepsRail, SubAgentDispatch, type SubAgentRun, type SubAgentState, Switch, SystemPromptEditor, Tabs, TaskHeader, TaskNode, TaskPlan, type TaskSource, type TaskStatus, type TaskStep, type TaskStepStatus, type TerminalLine, TerminalPanel, TextPart, type TextPartProps, type TextUIPart, Textarea, type TextareaProps, type Theme, type ThemeFonts, type ThemeMode, ThemeProvider, ThemeScript, ThemeSwitcher, TheoUIProvider, type TheoUIProviderProps, Toast, type ToastVariant, Toaster, TokenUsageChart, type TokenUsagePoint, ToolCall, ToolCallCard, ToolCallPart, type ToolCallPartProps, type ToolCallStatus, type ToolEnablement, type ToolEntry, type ToolInvocationState, ToolResult, type ToolUIPart, ToolsList, TooltipWithStatics as Tooltip, TopNav, type UIMessage, type UIMessagePart, UsageMeter, type UsageMeterProps, type UsageMetric, anthropicStyle, auroraTerminal, avatarVariants, badgeVariants, builtinThemes, buttonVariants, capabilityPresets, classicPaper, cn, defineTheme, dracula, githubDark, hex, isCustomContentUIPart, isDataUIPart, isFileUIPart, isReasoningFileUIPart, isReasoningUIPart, isSourceDocumentUIPart, isSourceUrlUIPart, isStepStartUIPart, isTextUIPart, isToolUIPart, linearGlass, modelCapabilityPresets, oneDark, openaiStyle, renderPart, rgb, sheetVariants, useDensity, useTheme, useToast, vercelMono, violetForge };

package/dist/index.js

@@ -188,35 +188,25 @@ function ThemeProvider({
   useEffect(() => {
     setThemes(mergedThemes);
   }, [mergedThemes]);
-  const [themeName, setThemeName] = useState(() => {
-    if (typeof window === "undefined" || !storageKey) return defaultTheme;
-    try {
-      return window.localStorage.getItem(`${storageKey}:name`) ?? defaultTheme;
-    } catch (err) {
-      warnStorageFailure("read theme name", err);
-      return defaultTheme;
-    }
-  });
-  const [mode, setModeState] = useState(() => {
-    if (typeof window === "undefined" || !storageKey) return defaultMode;
-    try {
-      const stored = window.localStorage.getItem(`${storageKey}:mode`);
-      return stored === "dark" || stored === "light" ? stored : defaultMode;
-    } catch (err) {
-      warnStorageFailure("read theme mode", err);
-      return defaultMode;
-    }
-  });
-  const [density, setDensityState] = useState(() => {
-    if (typeof window === "undefined" || !storageKey) return defaultDensity;
+  const [themeName, setThemeName] = useState(defaultTheme);
+  const [mode, setModeState] = useState(defaultMode);
+  const [density, setDensityState] = useState(defaultDensity);
+  const skipFirstPersistRef = useRef(true);
+  useEffect(() => {
+    if (typeof window === "undefined" || !storageKey) return;
     try {
-      const stored = window.localStorage.getItem(`${storageKey}:density`);
-      return stored === "compact" || stored === "comfortable" || stored === "spacious" ? stored : defaultDensity;
+      const storedName = window.localStorage.getItem(`${storageKey}:name`);
+      const storedMode = window.localStorage.getItem(`${storageKey}:mode`);
+      const storedDensity = window.localStorage.getItem(`${storageKey}:density`);
+      if (storedName) setThemeName(storedName);
+      if (storedMode === "dark" || storedMode === "light") setModeState(storedMode);
+      if (storedDensity === "compact" || storedDensity === "comfortable" || storedDensity === "spacious") {
+        setDensityState(storedDensity);
+      }
     } catch (err) {
-      warnStorageFailure("read density", err);
-      return defaultDensity;
+      warnStorageFailure("read theme + mode + density", err);
     }
-  });
+  }, [storageKey]);
   useEffect(() => {
     injectThemeCss(themes);
   }, [themes]);
@@ -232,6 +222,10 @@ function ThemeProvider({
     injectDensityCss();
   }, [themeName, mode, density, themes]);
   useEffect(() => {
+    if (skipFirstPersistRef.current) {
+      skipFirstPersistRef.current = false;
+      return;
+    }
     if (typeof window === "undefined" || !storageKey) return;
     try {
       window.localStorage.setItem(`${storageKey}:name`, themeName);
@@ -285,18 +279,20 @@ function useTheme() {
 function safe(value) {
   return JSON.stringify(value).replace(/</g, "\\u003c");
 }
-function buildScript(defaultTheme, defaultMode, storageKey) {
+function buildScript(defaultTheme, defaultMode, defaultDensity, storageKey) {
   const k = safe(storageKey);
   const t = safe(defaultTheme);
   const m = safe(defaultMode);
-  return `(function(){try{var k=${k};var d=document.documentElement;var t=null;var m=null;if(k){t=localStorage.getItem(k+":name");m=localStorage.getItem(k+":mode");}d.setAttribute("data-theme",t||${t});d.setAttribute("data-mode",m||${m});if((m||${m})==="dark"){d.classList.add("dark");}}catch(e){}})();`;
+  const dn = safe(defaultDensity);
+  return `(function(){try{var k=${k};var d=document.documentElement;var t=null;var m=null;var dn=null;if(k){t=localStorage.getItem(k+":name");m=localStorage.getItem(k+":mode");dn=localStorage.getItem(k+":density");}d.setAttribute("data-theme",t||${t});d.setAttribute("data-mode",m||${m});d.setAttribute("data-density",dn||${dn});if((m||${m})==="dark"){d.classList.add("dark");}}catch(e){}})();`;
 }
 function ThemeScript({
   defaultTheme = "violet-forge",
   defaultMode = "dark",
+  defaultDensity = "comfortable",
   storageKey = "theo-ui:theme"
 }) {
-  const code = buildScript(defaultTheme, defaultMode, storageKey);
+  const code = buildScript(defaultTheme, defaultMode, defaultDensity, storageKey);
   return /* @__PURE__ */ jsx("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: code } });
 }
 function ThemeSwitcher({ className, showModeToggle = true }) {
@@ -5550,12 +5546,12 @@ async function sanitizeHast(tree) {
   return safe2.type === "root" ? safe2 : { type: "root", children: [safe2] };
 }
 async function hastToReact(tree, components) {
-  const { Fragment: Fragment17, jsx: jsx117, jsxs: jsxs95 } = await import('react/jsx-runtime');
+  const { Fragment: Fragment18, jsx: jsx121, jsxs: jsxs97 } = await import('react/jsx-runtime');
   const { toJsxRuntime } = await import('hast-util-to-jsx-runtime');
   return toJsxRuntime(tree, {
-    Fragment: Fragment17,
-    jsx: jsx117,
-    jsxs: jsxs95,
+    Fragment: Fragment18,
+    jsx: jsx121,
+    jsxs: jsxs97,
     components
   });
 }
@@ -6756,6 +6752,251 @@ var ToolResult = forwardRef(
   }
 );
 ToolResult.displayName = "ToolResult";
+var INTENT_FILL = {
+  default: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive"
+};
+var Progress = forwardRef(
+  ({
+    className,
+    value = 0,
+    max = 100,
+    intent = "default",
+    height = "h-1",
+    indeterminate = false,
+    ...props
+  }, ref) => {
+    const clampedMax = Math.max(0, max);
+    const clampedValue = Math.min(clampedMax, Math.max(0, value));
+    const percent = clampedMax > 0 ? clampedValue / clampedMax * 100 : 0;
+    const fillClass = INTENT_FILL[intent];
+    return (
+      // biome-ignore lint/a11y/useFocusableInteractive: WAI-ARIA `progressbar` is a status role (https://www.w3.org/TR/wai-aria-1.2/#progressbar) — NOT supposed to be focusable; screen readers announce updates without keyboard navigation.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": clampedMax,
+          "aria-valuenow": indeterminate ? void 0 : clampedValue,
+          "aria-busy": indeterminate ? true : void 0,
+          className: cn("relative w-full overflow-hidden rounded-full bg-muted", height, className),
+          ...props,
+          children: indeterminate ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-y-0 left-0 w-1/3 rounded-full",
+                "animate-[progress-indeterminate_1.4s_ease-in-out_infinite] motion-reduce:animate-none",
+                "motion-reduce:w-full motion-reduce:opacity-50",
+                fillClass
+              )
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "h-full rounded-full transition-[width] duration-base ease-out-soft",
+                "motion-reduce:transition-none",
+                fillClass
+              ),
+              style: { width: `${percent}%` }
+            }
+          )
+        }
+      )
+    );
+  }
+);
+Progress.displayName = "Progress";
+var TIER_CLASS = {
+  free: "bg-muted/40 border-muted-foreground/20 text-muted-foreground",
+  hobby: "bg-warning/10 border-warning/30 text-warning",
+  pro: "bg-primary/10 border-primary/30 text-primary",
+  team: "bg-success/10 border-success/30 text-success",
+  enterprise: "bg-foreground/5 border-foreground/20 text-foreground"
+};
+var SIZE_CLASS = {
+  sm: "px-1.5 py-0 text-label-caps",
+  md: "px-2 py-0.5 text-label"
+};
+function defaultLabel2(plan) {
+  return plan.charAt(0).toUpperCase() + plan.slice(1);
+}
+var PlanBadge = forwardRef(
+  ({ className, plan, label, size = "md", ...props }, ref) => {
+    const tierClass = TIER_CLASS[plan] ?? TIER_CLASS.free;
+    const displayLabel = label ?? defaultLabel2(plan);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center rounded-md border",
+          "font-mono uppercase tabular-nums tracking-wider",
+          tierClass,
+          SIZE_CLASS[size],
+          className
+        ),
+        "data-plan": plan,
+        ...props,
+        children: displayLabel
+      }
+    );
+  }
+);
+PlanBadge.displayName = "PlanBadge";
+function defaultFormat(value, max, unit) {
+  return `${value} / ${max}${unit ? ` ${unit}` : ""}`;
+}
+function metricAriaLabel(metric, formatted) {
+  const label = typeof metric.label === "string" ? metric.label : "metric";
+  return `${label}: ${formatted}`;
+}
+var UsageMeter = forwardRef(
+  ({ className, title, action, metrics, compact = false, ...props }, ref) => {
+    const hasHeader = Boolean(title) || Boolean(action);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "grid gap-3 rounded-xl border border-border bg-card p-4",
+          compact && "gap-2",
+          className
+        ),
+        "data-theo-usage-meter": "",
+        ...props,
+        children: [
+          hasHeader ? /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between gap-3", children: [
+            title ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "font-mono text-label-caps text-muted-foreground uppercase tracking-wider"
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsx("span", {}),
+            action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
+          ] }) : null,
+          metrics.map((metric, idx) => {
+            const overQuota = metric.value > metric.max;
+            const fmt = metric.formatter ?? defaultFormat;
+            const formatted = fmt(metric.value, metric.max, metric.unit);
+            const intent = overQuota ? "warning" : "default";
+            const key = `${typeof metric.label === "string" ? metric.label : "metric"}-${idx}`;
+            if (compact) {
+              return /* @__PURE__ */ jsx(
+                Progress,
+                {
+                  value: metric.value,
+                  max: metric.max,
+                  intent,
+                  "aria-label": metricAriaLabel(metric, formatted)
+                },
+                key
+              );
+            }
+            return /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3 text-body-sm", children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: metric.label }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "shrink-0 font-mono tabular-nums",
+                      overQuota ? "text-warning" : "text-foreground"
+                    ),
+                    children: formatted
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                Progress,
+                {
+                  value: metric.value,
+                  max: metric.max,
+                  intent,
+                  "aria-label": metricAriaLabel(metric, formatted)
+                }
+              )
+            ] }, key);
+          })
+        ]
+      }
+    );
+  }
+);
+UsageMeter.displayName = "UsageMeter";
+var URL_RE = /^(?:https?:\/\/|\/)/;
+function deriveInitials(name, avatar) {
+  if (avatar && !URL_RE.test(avatar) && avatar.length <= 2) {
+    return avatar.toUpperCase();
+  }
+  if (typeof name === "string" && name.length > 0) {
+    return name.charAt(0).toUpperCase();
+  }
+  return "?";
+}
+var AccountMenu = forwardRef(
+  ({ className, name, avatar, plan, secondary, onClick, ...props }, ref) => {
+    const interactive = typeof onClick === "function";
+    const initials = deriveInitials(name, avatar);
+    const isUrlAvatar = avatar !== void 0 && URL_RE.test(avatar);
+    const altText = typeof name === "string" ? name : "account";
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Avatar, { size: "sm", children: [
+        isUrlAvatar ? /* @__PURE__ */ jsx(Avatar.Image, { src: avatar, alt: altText }) : null,
+        /* @__PURE__ */ jsx(Avatar.Fallback, { delayMs: 0, children: initials })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-body-sm text-foreground", children: name }),
+          plan ? /* @__PURE__ */ jsx(PlanBadge, { plan, size: "sm" }) : null
+        ] }),
+        secondary ? /* @__PURE__ */ jsx("span", { className: "truncate text-label text-muted-foreground", children: secondary }) : null
+      ] }),
+      interactive ? /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3 shrink-0 text-muted-foreground", "aria-hidden": "true" }) : null
+    ] });
+    const baseClass = cn(
+      "flex w-full items-center gap-3 px-3 py-2",
+      interactive && cn(
+        "rounded-md text-left transition-colors",
+        "hover:bg-muted/40",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card"
+      ),
+      className
+    );
+    if (interactive) {
+      const { ...buttonProps } = props;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          className: baseClass,
+          onClick,
+          ...buttonProps,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: baseClass,
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+AccountMenu.displayName = "AccountMenu";
 var statusIcon2 = {
   pending: CircleDashed,
   running: Loader2,
@@ -9526,6 +9767,6 @@ function CommandPalette({
   ] }) });
 }
 
-export { ALL_MODES, AgentComposer, AgentEditor, AgentErrorCard, AgentEvent, AgentHandoff, AgentProfile, AgentStartingState, AgentStream, AgentStreaming, AgentTimeline, ApprovalCard, ArtifactPreview, AttachmentChip, AuditLogEntry, AutoCompactNotice, Avatar, BadgeWithDot as Badge, BrowserControls, BuildLogStream, Button, CapabilityIndicator, Card, ChatComposer, ChatMessage, ChatMessageAction, ChatMessageActions, ChatMessageBranch, ChatMessageBranchContent, ChatMessageBranchNext, ChatMessageBranchPage, ChatMessageBranchPrevious, ChatMessageBranchSelector, ChatMessageContent, ChatMessageResponse, ChatMessageRoot, ChatMessageToolbar, ChatThread, Checkbox, CommandPalette, ContextCard, ContextWindowBar, CostMeter, CreatedFilesCard, CronJobCard, CronJobsList, DataPart, DeploymentRow, Dialog, DiffViewer, DomainConfig, EmptyState, EnvVarEditor, FilePart, FolderContextCard, FolderSelector, FormField, HOOK_EVENTS, HookConfig, HookEventLog, Input, IntentSelector, Label, LaneBoard, LoginSplit, MCPServerCard, MCPServerList, MODE_LABEL, MemoryEditor, MentionMenu, MetricsPanel, ModelCard, ModelSelector, PermissionMatrix, PermissionModal, PreviewEnvCard, PreviewPanel, ProgressChecklist, ProjectCard, ProjectSwitcher, QuickActionChips, RadioGroup, ReasoningPart, RecentFoldersList, RollbackUI, RuleCard, RuleEditor, RunStats, RunningTasksPanel, ScrollArea, Select, SessionListItem, SessionTimeline, Sheet, Sidebar, Skeleton, SkillCard, SkillEditor, SkillsList, SocialAuthRow, SourceDocumentPart, SourceUrlPart, StepsRail, SubAgentDispatch, Switch, SystemPromptEditor, Tabs, TaskHeader, TaskNode, TaskPlan, TerminalPanel, TextPart, Textarea, ThemeProvider, ThemeScript, ThemeSwitcher, TheoUIProvider, Toast, Toaster, TokenUsageChart, ToolCall, ToolCallCard, ToolCallPart, ToolResult, ToolsList, TooltipWithStatics as Tooltip, TopNav, anthropicStyle, auroraTerminal, avatarVariants, badgeVariants, builtinThemes, buttonVariants, capabilityPresets, classicPaper, cn, defineTheme, dracula, githubDark, hex, isCustomContentUIPart, isDataUIPart, isFileUIPart, isReasoningFileUIPart, isReasoningUIPart, isSourceDocumentUIPart, isSourceUrlUIPart, isStepStartUIPart, isTextUIPart, isToolUIPart, linearGlass, modelCapabilityPresets, oneDark, openaiStyle, renderPart, rgb, sheetVariants, useDensity, useTheme, useToast, vercelMono, violetForge };
+export { ALL_MODES, AccountMenu, AgentComposer, AgentEditor, AgentErrorCard, AgentEvent, AgentHandoff, AgentProfile, AgentStartingState, AgentStream, AgentStreaming, AgentTimeline, ApprovalCard, ArtifactPreview, AttachmentChip, AuditLogEntry, AutoCompactNotice, Avatar, BadgeWithDot as Badge, BrowserControls, BuildLogStream, Button, CapabilityIndicator, Card, ChatComposer, ChatMessage, ChatMessageAction, ChatMessageActions, ChatMessageBranch, ChatMessageBranchContent, ChatMessageBranchNext, ChatMessageBranchPage, ChatMessageBranchPrevious, ChatMessageBranchSelector, ChatMessageContent, ChatMessageResponse, ChatMessageRoot, ChatMessageToolbar, ChatThread, Checkbox, CommandPalette, ContextCard, ContextWindowBar, CostMeter, CreatedFilesCard, CronJobCard, CronJobsList, DataPart, DeploymentRow, Dialog, DiffViewer, DomainConfig, EmptyState, EnvVarEditor, FilePart, FolderContextCard, FolderSelector, FormField, HOOK_EVENTS, HookConfig, HookEventLog, Input, IntentSelector, Label, LaneBoard, LoginSplit, MCPServerCard, MCPServerList, MODE_LABEL, MemoryEditor, MentionMenu, MetricsPanel, ModelCard, ModelSelector, PermissionMatrix, PermissionModal, PlanBadge, PreviewEnvCard, PreviewPanel, Progress, ProgressChecklist, ProjectCard, ProjectSwitcher, QuickActionChips, RadioGroup, ReasoningPart, RecentFoldersList, RollbackUI, RuleCard, RuleEditor, RunStats, RunningTasksPanel, ScrollArea, Select, SessionListItem, SessionTimeline, Sheet, Sidebar, Skeleton, SkillCard, SkillEditor, SkillsList, SocialAuthRow, SourceDocumentPart, SourceUrlPart, StepsRail, SubAgentDispatch, Switch, SystemPromptEditor, Tabs, TaskHeader, TaskNode, TaskPlan, TerminalPanel, TextPart, Textarea, ThemeProvider, ThemeScript, ThemeSwitcher, TheoUIProvider, Toast, Toaster, TokenUsageChart, ToolCall, ToolCallCard, ToolCallPart, ToolResult, ToolsList, TooltipWithStatics as Tooltip, TopNav, UsageMeter, anthropicStyle, auroraTerminal, avatarVariants, badgeVariants, builtinThemes, buttonVariants, capabilityPresets, classicPaper, cn, defineTheme, dracula, githubDark, hex, isCustomContentUIPart, isDataUIPart, isFileUIPart, isReasoningFileUIPart, isReasoningUIPart, isSourceDocumentUIPart, isSourceUrlUIPart, isStepStartUIPart, isTextUIPart, isToolUIPart, linearGlass, modelCapabilityPresets, oneDark, openaiStyle, renderPart, rgb, sheetVariants, useDensity, useTheme, useToast, vercelMono, violetForge };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map