@tangle-network/ui 11.39.0 → 11.40.1

package/src/primitives/avatar.tsx

@@ -2,14 +2,19 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as React from "react";
 import { cn } from "../lib/utils";
 
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
+const AVATAR_SIZES = { sm: "h-8 w-8", md: "h-10 w-10" } as const;
+
+export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+  /** sm 32px (a list row beside a two-line name), md 40px (default). */
+  size?: keyof typeof AVATAR_SIZES;
+}
+
+const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(({ className, size = "md", ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      "relative flex shrink-0 overflow-hidden rounded-full",
+      AVATAR_SIZES[size],
       className,
     )}
     {...props}

package/src/primitives/button.tsx

@@ -36,7 +36,8 @@ function buttonClassName(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | "bare" | null;
+  /** `destructive-outline` is a destructive action at rest, such as "Delete project…", whose confirmation uses `destructive`. */
+  variant?: "default" | "destructive" | "destructive-outline" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | "bare" | null;
   /** sm 32px, default/md 36px (`--control-height`), lg 44px; icon sizes are squares on the same heights. */
   size?: "default" | "md" | "sm" | "lg" | "xl" | "display" | "icon" | "icon-sm" | "icon-lg" | "compact" | "touch" | null;
   asChild?: boolean;

package/src/primitives/control-presentation.stories.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Button } from "./button";
+import { X } from "lucide-react";
 import { HelpText } from "./help-text";
 import { Input, Textarea } from "./input";
 import { Label } from "./label";
@@ -13,7 +14,7 @@ function Contract() {
   return (
     <main className="mx-auto max-w-5xl space-y-6 bg-background p-4 text-foreground" data-presentation-contract>
       <h1 className="text-xl font-semibold">Field and metric presentation</h1>
-      {(["sm", "md", "lg", "compact", "touch"] as const).map((size) => (
+      {(["default", "sm", "md", "lg", "compact", "touch"] as const).map((size) => (
         <section key={size} data-size-row={size} className="space-y-2">
           <h2 className="font-semibold">{size}</h2>
           <div className="flex flex-wrap items-end gap-3">
@@ -27,10 +28,16 @@ function Contract() {
             </Select>
             <Button size={size} onClick={() => setActions((value) => value + 1)}>Save</Button>
             <Button size={size} variant="outline">Cancel</Button>
+            <Button size={size} aria-label={`${size} short action`}>+</Button>
           </div>
           <Textarea size={size} aria-label={`${size} notes`} placeholder="Details" />
         </section>
       ))}
+      <section className="flex flex-wrap gap-3" aria-label="Icon controls">
+        {(["icon-sm", "icon", "icon-lg"] as const).map((size) => (
+          <Button key={size} size={size} aria-label={`${size} action`} onClick={() => setActions((value) => value + 1)}><X aria-hidden="true" /></Button>
+        ))}
+      </section>
       <section className="max-w-sm space-y-1.5" data-form-text>
         <Label htmlFor="workspace-name">Workspace name</Label>
         <Input id="workspace-name" aria-describedby="workspace-name-hint" placeholder="Acme" />

package/src/primitives/field.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { CircleAlert } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { InfoTip } from "./info-tip";
+import { Label } from "./label";
+
+export interface FieldProps {
+  label: string;
+  /** The control's id; the label targets it. */
+  htmlFor: string;
+  /** Help that explains what the setting does, shown from an info button. */
+  info?: React.ReactNode;
+  /** One short sentence the person needs to fill the field in. */
+  hint?: React.ReactNode;
+  /** A validation error. The control should set `aria-invalid` and reference {@link fieldMessageId}. */
+  error?: React.ReactNode;
+  /** A non-error status, such as a check that passed. */
+  status?: React.ReactNode;
+  /** Trailing content in the label row, such as a "Use default" action. */
+  aside?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+/** The id of a field's hint, error, or status line, for the control's `aria-describedby`. */
+export function fieldMessageId(htmlFor: string): string {
+  return `${htmlFor}-message`;
+}
+
+/**
+ * A labelled form field: the label (with an optional info tip and a trailing
+ * aside) above the control, and one message line under it. Every line is
+ * 14px; an error replaces the status and the hint and is announced.
+ */
+export function Field({ label, htmlFor, info, hint, error, status, aside, children }: FieldProps) {
+  const message = error ?? status ?? hint;
+  return (
+    <div className="min-w-0 space-y-2">
+      <div className="flex min-h-6 items-center justify-between gap-2">
+        <span className="flex min-w-0 items-center gap-1.5">
+          <Label htmlFor={htmlFor} className="leading-6 text-foreground">{label}</Label>
+          {info && <InfoTip label={label}>{info}</InfoTip>}
+        </span>
+        {aside}
+      </div>
+      {children}
+      {message && (
+        <div
+          id={fieldMessageId(htmlFor)}
+          role={error ? "alert" : undefined}
+          className={cn(
+            "text-sm leading-6 [overflow-wrap:anywhere]",
+            error ? "flex items-start gap-1.5 text-[var(--surface-danger-text)]" : "text-muted-foreground",
+          )}
+        >
+          {error && <CircleAlert aria-hidden="true" className="mt-1 size-4 shrink-0" />}
+          {error ? <span className="min-w-0">{message}</span> : message}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/primitives/index.ts

@@ -79,6 +79,7 @@ export { Badge, badgeVariants } from "./badge";
 export type { BadgeProps } from "./badge";
 
 export { Avatar, AvatarImage, AvatarFallback } from "./avatar";
+export type { AvatarProps } from "./avatar";
 
 export {
   DropdownMenu,
@@ -199,6 +200,21 @@ export type { HeadingProps, HeadingVariant } from "./heading";
 export { PageShell } from "./page-shell";
 export type { PageShellProps } from "./page-shell";
 
+export { Field, fieldMessageId } from "./field";
+export type { FieldProps } from "./field";
+
+export { SettingsList, SettingsListItem, SettingsRow, SettingsSection } from "./settings";
+export type {
+  SettingsListAction,
+  SettingsListColumns,
+  SettingsListItemProps,
+  SettingsListMenuItem,
+  SettingsListProps,
+  SettingsRowLayout,
+  SettingsRowProps,
+  SettingsSectionProps,
+} from "./settings";
+
 export { PageHeader } from "./page-header";
 export type { PageHeaderProps } from "./page-header";
 

package/src/primitives/info-tip.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Info } from "lucide-react";
+import * as React from "react";
+import { Button } from "./button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+
+/**
+ * An info button beside a label, for help that explains a setting. It opens
+ * on hover and keyboard focus and toggles on tap. The glyph stays 20px; on a
+ * coarse pointer a transparent 44px hit area surrounds it. It brings its own
+ * provider, so a row or field works in an app that never mounted one.
+ */
+export function InfoTip({ label, children }: { label: string; children: React.ReactNode }) {
+  const [open, setOpen] = React.useState(false);
+  // Radix closes a tooltip on every trigger press and click; a tap or click toggles it instead.
+  const openAtPress = React.useRef(false);
+  return (
+    <TooltipProvider delayDuration={150}>
+      <Tooltip open={open} onOpenChange={setOpen}>
+        <TooltipTrigger asChild>
+          <Button
+            type="button"
+            variant="bare"
+            aria-label={`About ${label}`}
+            onPointerDown={() => { openAtPress.current = open; }}
+            onClick={(event) => {
+              event.preventDefault();
+              setOpen(event.detail === 0 ? !open : !openAtPress.current);
+            }}
+            className="relative inline-flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground pointer-coarse:before:absolute pointer-coarse:before:-inset-3 pointer-coarse:before:content-['']"
+          >
+            <Info aria-hidden="true" className="size-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="top" className="max-w-72 text-sm leading-5">{children}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/src/primitives/page-shell.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import * as React from "react";
 import type { ReactNode } from "react";
 import { cn } from "../lib/utils";
 
@@ -7,23 +10,82 @@ export interface PageShellProps {
   navigation?: ReactNode;
   article?: ReactNode;
   outline?: ReactNode;
+  /** Spans the reading layout above navigation and article, such as the page's `PageHeader`. */
+  header?: ReactNode;
+  /**
+   * The reading layout's measure. `reading` (default) is the 42rem document
+   * column. `settings` is a 48rem column of cards whose navigation is a sticky
+   * 13rem column of rows when its frame is at least 60rem wide, and a sticky
+   * 56px tab strip under the header below that; the current link
+   * (`aria-current="page"`) is centred by scrolling the strip only. Put
+   * links (or a list of links) in `navigation`; an `svg` in a link shows only
+   * in the column, and an element with `data-count` sits at its end.
+   */
+  measure?: "reading" | "settings";
   navigationLabel?: string;
   outlineLabel?: string;
   className?: string;
 }
 
+/**
+ * Centre the current link of a horizontally scrolling nav, so the links on
+ * both sides show that the strip scrolls. It moves the strip, never the page.
+ */
+function useCurrentLinkInView(ref: React.RefObject<HTMLElement | null>, enabled: boolean) {
+  React.useEffect(() => {
+    const nav = ref.current;
+    if (!enabled || !nav) return;
+    const reveal = () => {
+      if (nav.scrollWidth <= nav.clientWidth) return;
+      const current = nav.querySelector<HTMLElement>('[aria-current="page"]');
+      if (!current) return;
+      const strip = nav.getBoundingClientRect();
+      const link = current.getBoundingClientRect();
+      nav.scrollLeft += link.left + link.width / 2 - (strip.left + strip.width / 2);
+    };
+    let live = true;
+    reveal();
+    // A web font swap widens the tabs without resizing the strip, so the
+    // resize observer alone would leave the current tab where it was.
+    void document.fonts?.ready.then(() => { if (live) reveal(); });
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(reveal);
+    resize?.observe(nav);
+    // Links that a caller replaces (sections loaded later, a count that
+    // changes) move the current tab as surely as a new aria-current does.
+    const links = new MutationObserver(reveal);
+    links.observe(nav, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["aria-current"] });
+    return () => {
+      live = false;
+      resize?.disconnect();
+      links.disconnect();
+    };
+  }, [ref, enabled]);
+}
+
 /**
  * Ported from sandbox-ui/src/primitives/page-shell.tsx. An optional bounded
  * width, gutter and vertical rhythm, not an application shell or a card grid.
- * The caller owns landmarks, routing, auth, navigation and data state. Use
- * className to override the bound/gutters, or omit it for a workbench layout.
+ * The caller owns landmarks, routing, auth, navigation and data state.
+ * Without slots, className overrides the bound/gutters, or omit it for a
+ * workbench layout. With slots it goes on the reading grid. With
+ * `measure="settings"` it goes on the frame, the width the layout answers to,
+ * so a `max-w-*` there bounds the measure and a narrow frame gets the strip.
  */
-export function PageShell({ children, className, navigation, article, outline, navigationLabel = "Sections", outlineLabel = "On this page" }: PageShellProps) {
-  if (navigation || article || outline) return <div className={cn("tangle-reading-shell",className)}>
-    {navigation && <nav aria-label={navigationLabel} className="tangle-reading-nav">{navigation}</nav>}
-    <article className="tangle-reading-article">{article ?? children}</article>
-    {outline && <aside aria-label={outlineLabel} className="tangle-reading-outline">{outline}</aside>}
-  </div>;
+export function PageShell({ children, className, navigation, article, outline, header, measure = "reading", navigationLabel = "Sections", outlineLabel = "On this page" }: PageShellProps) {
+  const navRef = React.useRef<HTMLElement>(null);
+  const settings = measure === "settings";
+  useCurrentLinkInView(navRef, settings && Boolean(navigation));
+  if (navigation || article || outline || header || settings) {
+    const shell = <div className={cn("tangle-reading-shell", !settings && className)} data-measure={settings ? "settings" : undefined}>
+      {header && <div className="tangle-reading-header">{header}</div>}
+      {navigation && <nav ref={navRef} aria-label={navigationLabel} className="tangle-reading-nav">{navigation}</nav>}
+      <article className="tangle-reading-article">{article ?? children}</article>
+      {outline && <aside aria-label={outlineLabel} className="tangle-reading-outline">{outline}</aside>}
+    </div>;
+    // The frame is the width container the settings layout answers to, so the
+    // navigation switches on the content area's width, not the viewport's.
+    return settings ? <div className={cn("tangle-settings-frame", className)}>{shell}</div> : shell;
+  }
   return (
     <div
       className={cn(

package/src/primitives/settings.stories.tsx

@@ -0,0 +1,267 @@
+import { Bell, Bot, Check, CreditCard, Inbox, Loader2, Settings, Users, Workflow } from "lucide-react";
+import { useEffect, useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar, AvatarFallback } from "./avatar";
+import { Button } from "./button";
+import { Card } from "./card";
+import { Field, fieldMessageId } from "./field";
+import { Input, Textarea } from "./input";
+import { PageHeader } from "./page-header";
+import { PageShell } from "./page-shell";
+import { SegmentedControl } from "./segmented-control";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+import { SettingsList, SettingsListItem, SettingsRow, SettingsSection } from "./settings";
+import { Switch } from "./switch";
+
+/** Example data only: no routing, persistence or fetching. Every state is drawn at once so one screenshot shows them all. */
+
+const SECTIONS = [
+  { id: "general", label: "General", icon: Settings },
+  { id: "agent", label: "Agent", icon: Bot },
+  { id: "notifications", label: "Notifications", icon: Bell },
+  { id: "automations", label: "Automations", icon: Workflow },
+  { id: "leads", label: "Inbound leads", icon: Inbox },
+  { id: "team", label: "Team", icon: Users, count: 4 },
+  { id: "billing", label: "Ad spend", icon: CreditCard },
+] as const;
+
+function Saving() {
+  return <><Loader2 aria-hidden="true" className="size-4 animate-spin motion-reduce:animate-none" />Saving…</>;
+}
+
+function Saved() {
+  return <span className="inline-flex items-center gap-1 text-[var(--surface-success-text)]"><Check aria-hidden="true" className="size-4" />Saved</span>;
+}
+
+interface Automation { name: string; meta: string; state: string; verb: string; ownerOnly?: boolean; error?: string }
+
+const automations: Automation[] = [
+  { name: "Weekly competitor scan", meta: "Mondays at 09:00", state: "Active", verb: "Pause" },
+  { name: "Inbound lead triage", meta: "When a signed webhook arrives", state: "Paused", verb: "Resume", ownerOnly: true },
+  { name: "Daily brief", meta: "Every day at 08:00 · Europe/Berlin", state: "Couldn't start", verb: "Try again", error: "Platform didn't respond. Nothing ran; try again." },
+];
+
+/** Pause turns an automation off; Resume and Try again turn it back on. */
+function runVerb(job: Automation): Automation {
+  return job.state === "Active" ? { ...job, state: "Paused", verb: "Resume" } : { ...job, state: "Active", verb: "Pause", error: undefined };
+}
+
+const members = [
+  { name: "Priya Raman", email: "priya@fieldnote.example", role: "owner" },
+  { name: "Jonas Weber", email: "jonas@fieldnote.example", role: "admin" },
+  { name: "Ana Lima", email: "ana.lima.growth-operations-team@fieldnote-analytics.example", role: "editor" },
+];
+
+const roles = [
+  { value: "owner", label: "Owner" },
+  { value: "admin", label: "Can manage settings and people" },
+  { value: "editor", label: "Can edit and chat" },
+  { value: "viewer", label: "Can only view" },
+];
+
+interface SettingsPageProps {
+  /** Only the first two sections render at first; the rest arrive 300ms later, as role-gated sections do. */
+  sectionsLoadLater?: boolean;
+  /** Leave out the section navigation. */
+  withoutNavigation?: boolean;
+  className?: string;
+}
+
+function SettingsPage({ sectionsLoadLater = false, withoutNavigation = false, className }: SettingsPageProps) {
+  const [current, setCurrent] = useState("team");
+  const [sections, setSections] = useState<readonly (typeof SECTIONS)[number][]>(sectionsLoadLater ? SECTIONS.slice(0, 2) : SECTIONS);
+  useEffect(() => {
+    if (!sectionsLoadLater) return;
+    const loaded = setTimeout(() => setSections(SECTIONS), 300);
+    return () => clearTimeout(loaded);
+  }, [sectionsLoadLater]);
+  const [name, setName] = useState("Fieldnote GTM");
+  const [digest, setDigest] = useState(true);
+  const [approval, setApproval] = useState("each");
+  const [jobs, setJobs] = useState(automations);
+  const [roleOf, setRoleOf] = useState<Record<string, string>>(Object.fromEntries(members.map((m) => [m.email, m.role])));
+
+  const navigation = withoutNavigation ? undefined : sections.map((section) => {
+    const Icon = section.icon;
+    return (
+      <a key={section.id} href={`#${section.id}`} aria-current={current === section.id ? "page" : undefined} onClick={() => setCurrent(section.id)}>
+        <Icon aria-hidden="true" />
+        <span>{section.label}</span>
+        {"count" in section && <span data-count="">{section.count}</span>}
+      </a>
+    );
+  });
+
+  return (
+    <PageShell
+      measure="settings"
+      className={className}
+      navigationLabel="Settings sections"
+      header={<PageHeader title="Project settings" description="Fieldnote GTM" />}
+      navigation={navigation}
+      article={<>
+        <SettingsSection id="general" title="General">
+          <SettingsRow label="Project name" htmlFor="project-name" status={<Saved />}>
+            <Input id="project-name" value={name} onChange={(event) => setName(event.target.value)} />
+          </SettingsRow>
+          <SettingsRow label="Timezone" htmlFor="timezone" description="Moves the digest hour; scheduled posts never move." info="Dates in chats, emails and exports use this zone.">
+            <Select defaultValue="berlin">
+              <SelectTrigger id="timezone" aria-describedby={fieldMessageId("timezone")}><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="berlin">Europe/Berlin (UTC+2)</SelectItem>
+                <SelectItem value="new-york">America/New_York (UTC−4)</SelectItem>
+              </SelectContent>
+            </Select>
+          </SettingsRow>
+          <SettingsRow label="Business brief" layout="compact">
+            <Button type="button" variant="outline">Edit brief</Button>
+          </SettingsRow>
+          <SettingsRow label="Custom instructions" htmlFor="instructions" layout="stacked" status={<Saving />} description="Applies to new chats and the next automation run.">
+            <Textarea id="instructions" defaultValue="Write in plain English. Never promise delivery dates." />
+          </SettingsRow>
+        </SettingsSection>
+
+        <SettingsSection id="notifications" title="Notifications" description="Daily digest and approval notices go to the owner.">
+          <SettingsRow label="Daily digest" htmlFor="digest" layout="compact">
+            <Switch id="digest" checked={digest} onCheckedChange={setDigest} />
+          </SettingsRow>
+          <SettingsRow label="Approval notices" htmlFor="approval-mode">
+            <SegmentedControl
+              id="approval-mode"
+              aria-label="Approval notices"
+              value={approval}
+              onValueChange={setApproval}
+              options={[{ value: "each", label: "Each request" }, { value: "daily", label: "Once a day" }, { value: "never", label: "Never" }]}
+            />
+          </SettingsRow>
+          <SettingsRow label="Digest hour" htmlFor="digest-hour" error="Couldn't save the digest hour." onRetry={() => undefined}>
+            <Input id="digest-hour" defaultValue="08:00" />
+          </SettingsRow>
+          <SettingsRow label="Texting phone" htmlFor="texting-phone" disabledReason="Only Priya, the owner, can change the texting phone.">
+            <Input id="texting-phone" defaultValue="+1 (555) 010-0199" disabled />
+          </SettingsRow>
+          <SettingsRow label="Send today's digest" layout="compact">
+            <Button type="button" variant="outline">Send now</Button>
+          </SettingsRow>
+        </SettingsSection>
+
+        <SettingsSection id="automations" title="Automations" info="Automations run on the project's agent and are billed as compute." actions={<Button type="button" variant="outline">New automation</Button>}>
+          <SettingsList aria-label="Automations" columns={{ status: "8rem", action: "9rem" }}>
+            {jobs.map((job) => (
+              <SettingsListItem
+                key={job.name}
+                title={<a href={`#${job.name}`}>{job.name}</a>}
+                meta={job.meta}
+                status={job.error ? <span className="font-medium text-[var(--surface-danger-text)]">{job.state}</span> : job.state}
+                error={job.error}
+                action={{
+                  label: job.verb,
+                  onSelect: () => setJobs((all) => all.map((each) => (each.name === job.name ? runVerb(each) : each))),
+                  disabledReason: job.ownerOnly ? "Only Priya, the owner, can resume it." : undefined,
+                }}
+                menu={[
+                  { label: "Duplicate", onSelect: () => undefined },
+                  job.ownerOnly
+                    ? { label: "Delete", tone: "danger", onSelect: () => undefined, disabledReason: "Only Priya, the owner, can delete it." }
+                    : { label: "Delete", tone: "danger", onSelect: () => undefined },
+                ]}
+              />
+            ))}
+          </SettingsList>
+        </SettingsSection>
+
+        <SettingsSection id="team" title="Members" actions={<Button type="button">Invite</Button>}>
+          <SettingsList aria-label="Members" columns={{ leading: "32px", status: "18rem", menu: "36px" }}>
+            {members.map((member) => {
+              const roleId = `role-${member.email}`;
+              return (
+                <SettingsListItem
+                  key={member.email}
+                  leading={<Avatar size="sm"><AvatarFallback>{member.name.split(" ").map((part) => part[0]).join("")}</AvatarFallback></Avatar>}
+                  title={member.name}
+                  meta={member.email}
+                  status={member.role === "owner" ? <span className="text-foreground">Owner</span> : (
+                    <Select value={roleOf[member.email]} onValueChange={(role) => setRoleOf((all) => ({ ...all, [member.email]: role }))}>
+                      <SelectTrigger id={roleId} aria-label={`Role for ${member.name}`}><SelectValue /></SelectTrigger>
+                      <SelectContent>
+                        {roles.filter((role) => role.value !== "owner").map((role) => <SelectItem key={role.value} value={role.value}>{role.label}</SelectItem>)}
+                      </SelectContent>
+                    </Select>
+                  )}
+                  menu={member.role === "owner" ? undefined : [{ label: "Remove from project", tone: "danger", onSelect: () => undefined }]}
+                />
+              );
+            })}
+          </SettingsList>
+        </SettingsSection>
+
+        <SettingsSection
+          id="billing"
+          title="Ad spend caps"
+          description="Ads pause when a cap is reached."
+          footer={<>
+            <span className="text-muted-foreground">2 unsaved changes</span>
+            <span className="ml-auto flex gap-2">
+              <Button type="button" variant="ghost">Discard</Button>
+              <Button type="button">Save caps</Button>
+            </span>
+          </>}
+        >
+          <SettingsRow label="Daily cap" htmlFor="daily-cap"><Input id="daily-cap" defaultValue="$40" /></SettingsRow>
+          <SettingsRow label="Monthly cap" htmlFor="monthly-cap"><Input id="monthly-cap" defaultValue="$900" /></SettingsRow>
+        </SettingsSection>
+
+        <SettingsSection id="delete" tone="danger" title="Delete project" description="Deletes every chat, vault file and automation for everyone." actions={<Button type="button" variant="destructive-outline">Delete project…</Button>} />
+      </>}
+    />
+  );
+}
+
+function FieldsExample() {
+  const [model, setModel] = useState("claude-sonnet");
+  return (
+    <div className="mx-auto max-w-xl p-6">
+      <Card className="space-y-4 p-4">
+        <Field label="Display name" htmlFor="display-name" hint="Use 40 characters or fewer.">
+          <Input id="display-name" defaultValue="Research agent" aria-describedby={fieldMessageId("display-name")} />
+        </Field>
+        <Field label="Default model" htmlFor="default-model" info="Replaces the profile's model for new chats." aside={<Button type="button" variant="ghost">Use default</Button>}
+          error={model.startsWith("claude") ? "This project's catalog refuses Anthropic models. Pick another." : undefined}>
+          <Select value={model} onValueChange={setModel}>
+            <SelectTrigger id="default-model" aria-invalid={model.startsWith("claude") || undefined} aria-describedby={fieldMessageId("default-model")}><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="claude-sonnet">claude-sonnet</SelectItem>
+              <SelectItem value="gpt-6.1-sol">gpt-6.1-sol</SelectItem>
+            </SelectContent>
+          </Select>
+        </Field>
+        <Field label="Webhook URL" htmlFor="webhook" status="Reachable: the last check returned 200.">
+          <Input id="webhook" defaultValue="https://hooks.fieldnote.example/gtm/leads" aria-describedby={fieldMessageId("webhook")} />
+        </Field>
+      </Card>
+    </div>
+  );
+}
+
+const meta = {
+  title: "Primitives/Settings",
+  component: SettingsSection,
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof SettingsSection>;
+export default meta;
+type Story = StoryObj<typeof SettingsSection>;
+
+/** Every settings atom state on one page in PageShell measure="settings"; resize to see the nav switch at 60rem and rows stack at 34rem. */
+export const Page: Story = { render: () => <SettingsPage /> };
+
+/** The sections a role gates load after the page renders; on a phone the strip still centres the current tab when it arrives. */
+export const SectionsLoadLater: Story = { render: () => <SettingsPage sectionsLoadLater /> };
+
+/** A settings page with no section navigation is the 48rem column alone at every width. */
+export const WithoutNavigation: Story = { render: () => <SettingsPage withoutNavigation /> };
+
+/** className bounds the frame the layout answers to, so a 42rem page in a wide window gets the tab strip. */
+export const Bounded: Story = { render: () => <SettingsPage className="mx-auto max-w-2xl" /> };
+
+/** The promoted Field: hint, info tip with an aside action, a live error, and a status. */
+export const Fields: Story = { render: () => <FieldsExample /> };