@actioneer/ads 1.0.7 → 1.0.9

package/examples/campaigns-screen.tsx

@@ -0,0 +1,439 @@
+/**
+ * Campaigns screen — the ADS collection-screen recipe, built only from ADS exports.
+ *
+ * Follows principles `collection-screens`, `record-detail-panels`,
+ * `status-language` and `tabs-search-opposed` (see `get_principles`):
+ *
+ * - One white panel: BodyPageHeader (title + one primary action), then the
+ *   control row — Tabs with counts leading, SearchDisclosure then Filters as
+ *   icon triggers trailing — then the Table.
+ * - The rows fill the panel: the page size is derived from the height that is
+ *   left, so Pagination always sits on the panel's bottom edge.
+ * - Row checkboxes appear on hover (the header checkbox is always visible).
+ * - Clicking a row opens its detail panel beside the list and marks the row
+ *   with `isActive` — no radio, no modal.
+ * - The detail panel: kicker, title, status Chip + context under the title,
+ *   then Performance (stat cards + chart card) and Details (label–value rows).
+ * - New campaign opens as a Modal over the list (never a separate screen): one
+ *   scrolling form — Campaign name, Caller numbers, Audience — with Cancel and
+ *   Create campaign together in the footer.
+ *
+ * In a full app this screen sits inside the shell, next to the Sidebar
+ * (put the customer's logo in its brand slot with SidebarWorkspace).
+ * Copy it and replace CAMPAIGNS with your own records.
+ */
+import * as React from "react";
+import {
+  Avatar,
+  BodyPageHeader,
+  Button,
+  Checkbox,
+  Chip,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  FileDropzone,
+  Filters,
+  InputField,
+  LineChart,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  Pagination,
+  SearchDisclosure,
+  SegmentedControl,
+  Tab,
+  TabList,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Tabs,
+  type FilterGroup,
+} from "@actioneer/ads";
+
+/** Business-language statuses, one tone per meaning (principle `status-language`). */
+export type CampaignStatus = "Active" | "Scheduled" | "Paused" | "Completed" | "Draft" | "Failed";
+
+export const STATUS_COLOR: Record<CampaignStatus, "info" | "warning" | "success" | "default" | "danger"> = {
+  Active: "info",
+  Scheduled: "info",
+  Paused: "warning",
+  Completed: "success",
+  Draft: "default",
+  Failed: "danger",
+};
+
+export interface CampaignRecord {
+  id: string;
+  name: string;
+  status: CampaignStatus;
+  leads: number;
+  connectRate: string;
+  booked: number;
+  owner: string;
+  started: string;
+  context: string;
+  callingWindows: number;
+  /** Connected calls for the last seven days. */
+  week: number[];
+  cohorts?: CampaignRecord[];
+}
+
+const week = (...values: number[]) => values;
+
+export const CAMPAIGNS: CampaignRecord[] = [
+  {
+    id: "q4", name: "Q4 renewal reminders", status: "Active", leads: 2400, connectRate: "44%", booked: 286, owner: "Divya Shetty", started: "Oct 22", context: "Running since Oct 22", callingWindows: 2, week: week(210, 260, 240, 310, 290, 180, 150),
+    cohorts: [
+      { id: "q4-blr", name: "Bengaluru cohort", status: "Active", leads: 1500, connectRate: "47%", booked: 188, owner: "Divya Shetty", started: "Oct 22", context: "Running since Oct 22", callingWindows: 2, week: week(140, 170, 160, 210, 190, 120, 100) },
+      { id: "q4-bom", name: "Mumbai cohort", status: "Paused", leads: 900, connectRate: "39%", booked: 98, owner: "Kiran Menon", started: "Oct 22", context: "Paused today at 11:40", callingWindows: 2, week: week(70, 90, 80, 100, 100, 60, 0) },
+    ],
+  },
+  { id: "emi", name: "Loan EMI nudges", status: "Completed", leads: 5120, connectRate: "41%", booked: 612, owner: "Vikram Nair", started: "Oct 14", context: "Finished Oct 21", callingWindows: 3, week: week(420, 510, 480, 620, 580, 310, 260) },
+  { id: "kyc", name: "KYC re-verification", status: "Active", leads: 3260, connectRate: "38%", booked: 402, owner: "Rohan Iyer", started: "Oct 20", context: "Running since Oct 20", callingWindows: 2, week: week(260, 300, 320, 340, 330, 280, 310) },
+  { id: "lapse", name: "Policy lapse win-back", status: "Draft", leads: 780, connectRate: "—", booked: 0, owner: "Asha Rao", started: "—", context: "Not launched", callingWindows: 1, week: week(0, 0, 0, 0, 0, 0, 0) },
+  { id: "card", name: "Card activation follow-up", status: "Scheduled", leads: 1840, connectRate: "—", booked: 0, owner: "Meera Pillai", started: "Oct 28", context: "Starts Oct 28 at 10:00", callingWindows: 2, week: week(0, 0, 0, 0, 0, 0, 0) },
+  { id: "payment", name: "Payment failure outreach", status: "Completed", leads: 1120, connectRate: "45%", booked: 151, owner: "Arjun Das", started: "Oct 12", context: "Finished Oct 19", callingWindows: 2, week: week(160, 190, 170, 210, 200, 70, 34) },
+  { id: "festive", name: "Festive offer callbacks", status: "Paused", leads: 640, connectRate: "36%", booked: 52, owner: "Neha Kapoor", started: "Oct 18", context: "Paused yesterday at 18:10", callingWindows: 1, week: week(60, 80, 70, 90, 88, 0, 0) },
+  { id: "abandoned", name: "Abandoned application recovery", status: "Active", leads: 4050, connectRate: "40%", booked: 377, owner: "Sanjay Rao", started: "Oct 18", context: "Running since Oct 18", callingWindows: 3, week: week(340, 380, 400, 420, 410, 330, 310) },
+  { id: "renewal-check", name: "Insurance renewal check-in", status: "Failed", leads: 2210, connectRate: "—", booked: 0, owner: "Kiran Menon", started: "Oct 16", context: "CRM writeback failed on Oct 16", callingWindows: 2, week: week(0, 0, 0, 0, 0, 0, 0) },
+  { id: "credit-limit", name: "Credit limit upgrade offer", status: "Completed", leads: 3480, connectRate: "43%", booked: 298, owner: "Divya Shetty", started: "Oct 08", context: "Finished Oct 15", callingWindows: 3, week: week(300, 320, 310, 360, 340, 120, 80) },
+  { id: "survey", name: "Home loan top-up survey", status: "Active", leads: 2730, connectRate: "35%", booked: 120, owner: "Asha Rao", started: "Oct 24", context: "Running since Oct 24", callingWindows: 1, week: week(0, 0, 120, 180, 210, 190, 160) },
+  { id: "welcome", name: "New account welcome calls", status: "Scheduled", leads: 960, connectRate: "—", booked: 0, owner: "Meera Pillai", started: "Nov 02", context: "Starts Nov 2 at 09:30", callingWindows: 1, week: week(0, 0, 0, 0, 0, 0, 0) },
+];
+
+/** Status tabs use the same words as the status chips. */
+const TABS: Array<{ value: "all" | CampaignStatus; label: string }> = [
+  { value: "all", label: "All" },
+  { value: "Draft", label: "Draft" },
+  { value: "Active", label: "Active" },
+  { value: "Paused", label: "Paused" },
+  { value: "Completed", label: "Completed" },
+];
+
+const INITIAL_FILTERS: FilterGroup[] = [
+  {
+    id: "owner",
+    label: "Owner",
+    value: "all",
+    options: [{ value: "all", label: "All owners" }, ...Array.from(new Set(CAMPAIGNS.map((c) => c.owner))).map((owner) => ({ value: owner, label: owner }))],
+  },
+  {
+    id: "windows",
+    label: "Calling windows",
+    value: "all",
+    options: [
+      { value: "all", label: "Any number" },
+      { value: "1", label: "1 window" },
+      { value: "2", label: "2 windows" },
+      { value: "3", label: "3 windows" },
+    ],
+  },
+];
+
+const ROW_HEIGHT = 64;
+/** Header row + footer (pagination) heights inside the table surface. */
+const TABLE_CHROME = 37 + 53;
+
+/** Derive the page size from the height left in the panel, so rows fill it. */
+function useRowsThatFit(ref: React.RefObject<HTMLDivElement | null>) {
+  const [rows, setRows] = React.useState(8);
+  React.useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const update = () => setRows(Math.max(3, Math.floor((node.clientHeight - TABLE_CHROME) / ROW_HEIGHT)));
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [ref]);
+  return rows;
+}
+
+function findCampaign(id: string | null): CampaignRecord | undefined {
+  if (!id) return undefined;
+  for (const campaign of CAMPAIGNS) {
+    if (campaign.id === id) return campaign;
+    const cohort = campaign.cohorts?.find((child) => child.id === id);
+    if (cohort) return cohort;
+  }
+  return undefined;
+}
+
+function CampaignCells({ campaign }: { campaign: CampaignRecord }) {
+  return (
+    <>
+      <TableCell>{campaign.name}</TableCell>
+      <TableCell>
+        <Chip color={STATUS_COLOR[campaign.status]}>{campaign.status}</Chip>
+      </TableCell>
+      <TableCell align="right" className="tabular-nums">{campaign.leads.toLocaleString("en-IN")}</TableCell>
+      <TableCell>
+        <span className="flex items-center gap-2">
+          <Avatar name={campaign.owner} size="sm" />
+          {campaign.owner}
+        </span>
+      </TableCell>
+    </>
+  );
+}
+
+/** Selection-driven detail panel (principle `record-detail-panels`). */
+export function CampaignDetail({ campaign, onClose }: { campaign: CampaignRecord | undefined; onClose: () => void }) {
+  return (
+    <Drawer open={Boolean(campaign)} onOpenChange={(open) => !open && onClose()} aria-label="Campaign details">
+      {campaign && (
+        <>
+          <DrawerHeader>
+            <p className="text-xs uppercase tracking-wide text-secondary">Campaign</p>
+            <DrawerTitle>{campaign.name}</DrawerTitle>
+            {/* Status lives with the title, so it never floats on its own. */}
+            <div className="mt-1 flex items-center gap-2">
+              <Chip color={STATUS_COLOR[campaign.status]}>{campaign.status}</Chip>
+              <span className="text-s text-secondary">{campaign.context}</span>
+            </div>
+          </DrawerHeader>
+          <DrawerBody className="flex flex-col gap-8 overflow-y-auto">
+            <section aria-label="Performance" className="flex flex-col gap-2">
+              <h3 className="mb-1 text-m font-medium text-foreground">Performance</h3>
+              <dl className="grid grid-cols-3 gap-2">
+                {[
+                  { label: "Leads", value: campaign.leads.toLocaleString("en-IN") },
+                  { label: "Connect rate", value: campaign.connectRate },
+                  { label: "Booked", value: campaign.booked.toLocaleString("en-IN") },
+                ].map((stat) => (
+                  <div key={stat.label} className="min-w-0 rounded-l border border-tertiary p-3">
+                    <dt className="truncate text-s text-secondary">{stat.label}</dt>
+                    <dd className="mt-0.5 text-xl tabular-nums text-foreground">{stat.value}</dd>
+                  </div>
+                ))}
+              </dl>
+              <div className="rounded-l border border-tertiary p-4">
+                <LineChart
+                  title={<span className="text-s font-normal text-secondary">Connected calls · last 7 days</span>}
+                  data={campaign.week.map((calls, index) => ({ day: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"][index], calls }))}
+                  categoryKey="day"
+                  series={["calls"]}
+                  seriesLabels={{ calls: "Connected" }}
+                  legend={false}
+                  showYAxis={false}
+                  height={160}
+                />
+              </div>
+            </section>
+            <section aria-label="Details" className="flex flex-col gap-1">
+              <h3 className="text-m font-medium text-foreground">Details</h3>
+              <dl>
+                {[
+                  { label: "Owner", value: campaign.owner },
+                  { label: "Started", value: campaign.started },
+                  { label: "Calling windows", value: String(campaign.callingWindows) },
+                ].map((row) => (
+                  <div key={row.label} className="flex min-h-10 items-center justify-between gap-3 border-b border-tertiary last:border-0">
+                    <dt className="text-m text-secondary">{row.label}</dt>
+                    <dd className="text-m text-foreground">{row.value}</dd>
+                  </div>
+                ))}
+              </dl>
+            </section>
+          </DrawerBody>
+          <DrawerFooter>
+            <Button variant="outline">Duplicate</Button>
+            <Button>Open full view</Button>
+          </DrawerFooter>
+        </>
+      )}
+    </Drawer>
+  );
+}
+
+const SAVED_AUDIENCES = [
+  { id: "0019b431", name: "CSV audience 0019b431", size: 6 },
+  { id: "b190b191", name: "CSV audience b190b191", size: 868 },
+  { id: "5ee46ae6", name: "CSV audience 5ee46ae6", size: 162 },
+  { id: "9dc3d0b1", name: "CSV audience 9dc3d0b1", size: 188 },
+];
+
+/** Create task launched from the collection: a Modal over the list (principle `minimal-information`). */
+export function NewCampaignModal({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const [name, setName] = React.useState("");
+  const [useNumber, setUseNumber] = React.useState(false);
+  const [audience, setAudience] = React.useState("csv");
+  const [query, setQuery] = React.useState("");
+  const audiences = SAVED_AUDIENCES.filter((item) => item.name.toLowerCase().includes(query.trim().toLowerCase()));
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange} height="fixed">
+      <ModalHeader>
+        <ModalTitle>New campaign</ModalTitle>
+      </ModalHeader>
+      <ModalBody className="flex flex-col gap-6">
+        <InputField label="Campaign name" value={name} onChange={(event) => setName(event.target.value)} placeholder="First-EMI onboarding" />
+        <div className="flex flex-col gap-2">
+          <p className="text-m font-medium text-foreground">Caller numbers</p>
+          <div className="flex min-h-12 items-center gap-3 rounded-m border border-input px-3">
+            <Checkbox aria-label="+91 22 6987 0900" checked={useNumber} onChange={(event) => setUseNumber(event.target.checked)} />
+            <span className="flex-1 text-m tabular-nums text-foreground">+91 22 6987 0900</span>
+            <Chip>Plivo</Chip>
+          </div>
+          <p className="text-s text-secondary">Optional. Tick none to call from any enabled number; you can change this later, even while it is calling.</p>
+        </div>
+        <div className="flex flex-col gap-3">
+          <p className="text-m font-medium text-foreground">Audience</p>
+          <SegmentedControl
+            aria-label="Audience source"
+            options={[{ value: "csv", label: "CSV upload" }, { value: "empty", label: "Empty audience" }]}
+            value={audience}
+            onChange={setAudience}
+          />
+          {audience === "csv" && (
+            <>
+              <InputField aria-label="Search audiences" type="search" placeholder="Search audiences" value={query} onChange={(event) => setQuery(event.target.value)} />
+              <FileDropzone accept=".csv,.xlsx" hint="CSV or first-sheet .xlsx with a phone column; name and other columns are optional" />
+              <ul aria-label="Saved audiences" className="rounded-m border border-input px-3">
+                {audiences.map((item) => (
+                  <li key={item.id} className="flex min-h-10 items-center justify-between gap-3 border-b border-tertiary text-m last:border-0">
+                    <span className="text-foreground">{item.name}</span>
+                    <span className="tabular-nums text-secondary">{item.size.toLocaleString("en-IN")}</span>
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
+        <Button disabled={!name.trim()} onClick={() => onOpenChange(false)}>Create campaign</Button>
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+export function CampaignsScreen() {
+  const [tab, setTab] = React.useState<"all" | CampaignStatus>("all");
+  const [search, setSearch] = React.useState("");
+  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [filters, setFilters] = React.useState(INITIAL_FILTERS);
+  const [selectedKeys, setSelectedKeys] = React.useState<Set<string>>(new Set());
+  const [openId, setOpenId] = React.useState<string | null>(null);
+  const [page, setPage] = React.useState(1);
+  const [creating, setCreating] = React.useState(false);
+  const rowsRef = React.useRef<HTMLDivElement>(null);
+  const pageSize = useRowsThatFit(rowsRef);
+
+  const owner = filters.find((group) => group.id === "owner")?.value ?? "all";
+  const windows = filters.find((group) => group.id === "windows")?.value ?? "all";
+  const query = search.trim().toLowerCase();
+  const visible = CAMPAIGNS.filter(
+    (c) =>
+      (tab === "all" || c.status === tab) &&
+      (owner === "all" || c.owner === owner) &&
+      (windows === "all" || String(c.callingWindows) === windows) &&
+      (!query || c.name.toLowerCase().includes(query)),
+  );
+  const pages = Math.max(1, Math.ceil(visible.length / pageSize));
+  const current = Math.min(page, pages);
+  const pageRows = visible.slice((current - 1) * pageSize, current * pageSize);
+  const countFor = (value: "all" | CampaignStatus) =>
+    value === "all" ? CAMPAIGNS.length : CAMPAIGNS.filter((c) => c.status === value).length;
+
+  return (
+    <div className="flex h-screen gap-3 bg-background p-3 text-foreground">
+      <section aria-label="Voice campaigns" className="flex min-w-0 flex-1 flex-col overflow-hidden rounded-l bg-card">
+        <BodyPageHeader title="Voice campaigns" actions={<Button onClick={() => setCreating(true)}>New campaign</Button>} />
+
+        {/* Tabs lead; search and filters trail as icon triggers. */}
+        <div className="flex items-center justify-between gap-4 px-6">
+          <Tabs className="min-w-0 flex-1" value={tab} onValueChange={(value) => { setTab(value as typeof tab); setPage(1); }}>
+            <TabList aria-label="Filter campaigns by status">
+              {TABS.map((item) => (
+                <Tab key={item.value} value={item.value} count={countFor(item.value)}>
+                  {item.label}
+                </Tab>
+              ))}
+            </TabList>
+          </Tabs>
+          <div className="flex shrink-0 items-center gap-2">
+            <SearchDisclosure
+              value={search}
+              onValueChange={(value) => { setSearch(value); setPage(1); }}
+              open={searchOpen}
+              onOpenChange={setSearchOpen}
+              placeholder="Search campaigns"
+              triggerLabel="Search campaigns"
+            />
+            <Filters
+              triggerLabel="Filter campaigns"
+              groups={filters}
+              onChange={(id, value) => { setFilters((groups) => groups.map((group) => (group.id === id ? { ...group, value } : group))); setPage(1); }}
+            />
+          </div>
+        </div>
+
+        {/* The rows fill what is left of the panel; pagination sits at the bottom. */}
+        <div ref={rowsRef} className="min-h-0 flex-1 px-6 pt-4 pb-6">
+          <Table
+            aria-label="Voice campaigns"
+            selectionMode="multiple"
+            selectedKeys={selectedKeys}
+            onSelectionChange={setSelectedKeys}
+            footer={
+              <Pagination
+                className="w-full"
+                total={pages}
+                page={current}
+                onChange={setPage}
+                summary={`${visible.length === 0 ? 0 : (current - 1) * pageSize + 1}–${Math.min(current * pageSize, visible.length)} of ${visible.length} campaigns`}
+              />
+            }
+          >
+            <TableHeader>
+              <TableRow>
+                <TableColumn>Campaign</TableColumn>
+                <TableColumn>Status</TableColumn>
+                <TableColumn align="right">Leads</TableColumn>
+                <TableColumn>Owner</TableColumn>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {pageRows.map((campaign) => (
+                <TableRow
+                  key={campaign.id}
+                  rowKey={campaign.id}
+                  aria-label={`Open ${campaign.name}`}
+                  isActive={openId === campaign.id}
+                  onClick={() => setOpenId((id) => (id === campaign.id ? null : campaign.id))}
+                  childRows={campaign.cohorts?.map((cohort) => (
+                    <TableRow
+                      key={cohort.id}
+                      rowKey={cohort.id}
+                      aria-label={`Open ${cohort.name}`}
+                      isActive={openId === cohort.id}
+                      onClick={() => setOpenId((id) => (id === cohort.id ? null : cohort.id))}
+                    >
+                      <CampaignCells campaign={cohort} />
+                    </TableRow>
+                  ))}
+                  defaultExpanded={Boolean(campaign.cohorts)}
+                >
+                  <CampaignCells campaign={campaign} />
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </section>
+
+      <CampaignDetail campaign={findCampaign(openId)} onClose={() => setOpenId(null)} />
+      <NewCampaignModal open={creating} onOpenChange={setCreating} />
+    </div>
+  );
+}

package/examples/settings-screen.tsx

@@ -0,0 +1,90 @@
+/**
+ * Settings screen — a settings card built only from ADS exports.
+ *
+ * What it shows: Card header with a status Badge, an InputField, a SettingList
+ * of SettingRows whose trailing control is a Switch or Button, and a footer
+ * with one primary action.
+ */
+import * as React from "react";
+import {
+  Badge,
+  Button,
+  Card,
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  InputField,
+  SettingList,
+  SettingRow,
+  Switch,
+} from "@actioneer/ads";
+import {
+  Database,
+  Settings,
+  User,
+} from "@actioneer/ads/lib/icons";
+
+export function SettingsScreen() {
+  const [digest, setDigest] = React.useState(false);
+  const [sharing, setSharing] = React.useState(true);
+
+  return (
+    <Card className="mx-auto w-full max-w-2xl">
+      <CardHeader>
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex min-w-0 flex-col gap-1">
+            <CardTitle>Workspace preferences</CardTitle>
+            <CardDescription>
+              A canonical settings composition: context first, grouped controls second, one clear save action.
+            </CardDescription>
+          </div>
+          <Badge variant="dot" color="success">Saved</Badge>
+        </div>
+      </CardHeader>
+
+      <CardBody className="flex flex-col gap-5">
+        <InputField
+          label="Workspace name"
+          defaultValue="Actioneer research"
+          description="Shown to everyone in this workspace."
+        />
+
+        <SettingList aria-label="Workspace settings">
+          <SettingRow
+            icon={<User />}
+            label="Weekly digest"
+            description="Receive a concise summary every Monday."
+            action={
+              <Switch checked={digest} onCheckedChange={setDigest}>
+                Weekly digest
+              </Switch>
+            }
+          />
+          <SettingRow
+            icon={<Database />}
+            label="Source sharing"
+            description="Allow teammates to reuse connected sources."
+            action={
+              <Switch checked={sharing} onCheckedChange={setSharing}>
+                Source sharing
+              </Switch>
+            }
+          />
+          <SettingRow
+            icon={<Settings />}
+            label="Advanced controls"
+            description="Manage retention and export permissions."
+            action={<Button variant="ghost" size="sm">Manage</Button>}
+          />
+        </SettingList>
+      </CardBody>
+
+      <CardFooter className="justify-end gap-2">
+        <Button variant="ghost">Cancel</Button>
+        <Button>Save changes</Button>
+      </CardFooter>
+    </Card>
+  );
+}

package/examples/workspace-header.tsx

@@ -0,0 +1,71 @@
+/**
+ * Workspace header — a page header and tabbed body built only from ADS exports.
+ *
+ * What it shows: title with a status Badge, trailing page actions, and Tabs
+ * with counts whose panels hold Cards.
+ */
+import {
+  Badge,
+  Button,
+  Card,
+  CardBody,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+} from "@actioneer/ads";
+import {
+  ArrowUpRight,
+  Plus,
+} from "@actioneer/ads/lib/icons";
+
+export function WorkspaceHeaderScreen() {
+  return (
+    <section className="mx-auto flex w-full max-w-4xl flex-col gap-6">
+      <header className="flex flex-col items-start gap-5 sm:flex-row sm:justify-between">
+        <div className="flex w-full min-w-0 flex-1 flex-col gap-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <h1 className="text-2xl font-medium text-foreground">Research workspace</h1>
+            <Badge variant="dot" color="success">Connected</Badge>
+          </div>
+          <p className="max-w-2xl text-base text-muted-foreground">
+            Keep status beside the title, supporting context below, and primary actions at the far edge.
+          </p>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <Button variant="outline" endContent={<ArrowUpRight aria-hidden />}>Share</Button>
+          <Button startContent={<Plus aria-hidden />}>New board</Button>
+        </div>
+      </header>
+
+      <Tabs defaultValue="boards">
+        <TabList aria-label="Workspace sections">
+          <Tab value="boards" count={12}>Boards</Tab>
+          <Tab value="sources" count={6}>Sources</Tab>
+          <Tab value="members" count={8}>Members</Tab>
+        </TabList>
+        <TabPanel value="boards">
+          <Card>
+            <CardBody>
+              <p className="text-base text-foreground">Boards keep ongoing analysis visible and reusable.</p>
+            </CardBody>
+          </Card>
+        </TabPanel>
+        <TabPanel value="sources">
+          <Card>
+            <CardBody>
+              <p className="text-base text-foreground">Six connected sources are available to this workspace.</p>
+            </CardBody>
+          </Card>
+        </TabPanel>
+        <TabPanel value="members">
+          <Card>
+            <CardBody>
+              <p className="text-base text-foreground">Eight members can collaborate here.</p>
+            </CardBody>
+          </Card>
+        </TabPanel>
+      </Tabs>
+    </section>
+  );
+}

package/lib/icons.d.ts

@@ -21,6 +21,14 @@ export type IconProps = Omit<React.ComponentProps<PhosphorIcon>, "ref"> & {
     /** Legacy Hugeicons prop — `>= 2` maps to weight="bold", else ignored. */
     strokeWidth?: number;
 };
+/**
+ * Icon-only controls (Button `size="icon*"`, TooltipIconButton) provide this
+ * context. The control turns its icon teal on hover and draws no background.
+ * Only the info icon also swaps to its `fill` weight (a hidden twin that
+ * `[data-icon-hover-fill]:hover` in theme.css reveals); every other icon keeps
+ * its regular outline on hover.
+ */
+export declare const IconHoverFillContext: React.Context<boolean>;
 export declare const ArrowDown: React.ForwardRefExoticComponent<Omit<import('@phosphor-icons/react').IconProps, "ref"> & {
     /** Legacy Hugeicons prop — `>= 2` maps to weight="bold", else ignored. */
     strokeWidth?: number;