@sableui/react 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # What's new
 
+## 0.17.0
+
+Knowing where you are: a rail that follows a long read, and an approval
+that shows an agent's call the way agent products do.
+
+- **New: `SectionRail`.** A slim vertical rail of dots beside a long read —
+  a case study, an essay, a long landing page — one per section. A bar marks
+  the section being read and glides to the next as the page scrolls; hovering
+  or focusing a dot names it in one tooltip that travels between dots
+  (`TooltipGroup`). Picking a dot jumps there with the page's own
+  `scroll-behavior` (instant under reduced motion), and the bar goes straight
+  to the pick rather than stepping through every section in between. Pass
+  `root` when the content scrolls inside an element: only that element moves,
+  never the page around it. Links are real `#id` anchors, so it works without
+  script. Promoted from carldecaire.com's case-study rail.
+- **New: `useActiveSection(ids, { offset, root })`.** The scroll spy behind it,
+  exported for a contents list you draw yourself. The current section is the
+  last whose top has crossed the reading line; at the end of the scroll the
+  last one in view wins, so a short closing section is still reachable.
+- **`ApprovalBlock` asks the way agent products do.** It wraps the call's own
+  `ToolCall` — tool name and exact input, open on arrival — that turns to
+  Allowed or Denied once answered, and offers Deny / Always allow / Allow once.
+  The details table and the "for the rest of this chat" checkbox are gone;
+  `onApprove({ remember })` is unchanged, with `remember` now true for Always
+  allow. The example is an agent asking to run a command.
+
 ## 0.16.0
 
 Five pieces of the calm, product-chrome look that AI and B2B tools share:

package/dist/blocks/approval-block.js

@@ -1,59 +1,48 @@
 // src/blocks/approval-block.tsx
-import { useEffect, useId, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button } from "../components/button/index.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/card/index.js";
-import { Checkbox } from "../components/checkbox/index.js";
-import { Code } from "../components/code/index.js";
 import { InlineStatus } from "../components/inline-status/index.js";
-import { Label } from "../components/label/index.js";
+import { ToolCall } from "../components/tool-call/index.js";
 import { cn } from "../lib/cn.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var request = {
-  tool: "send_email",
-  title: "Send the invoice to Ada?",
-  description: "The agent wants to email invoice INV-1042. An email can't be unsent.",
-  details: [
-    { label: "To", value: "ada@example.com" },
-    { label: "Subject", value: "INV-1042 for October" },
-    { label: "Attached", value: "INV-1042.pdf" }
-  ],
-  allowed: "Allowed. Sending the email.",
-  denied: "Denied. The agent won't send it."
+  title: "Run this command?",
+  description: "The agent wants to migrate the production database in acme/api. It changes live data.",
+  tool: "run_command",
+  action: "Run a command",
+  // A command reads as the command; a structured call would pass its arguments object.
+  input: "pnpm db:migrate --env production",
+  allowed: "Allowed. Running the migration.",
+  denied: "Denied. The agent won't run it."
 };
 function ApprovalBlock({ className, framed = true, onApprove, onDeny }) {
   const [decision, setDecision] = useState(null);
-  const [remember, setRemember] = useState(false);
-  const id = useId();
   const outcome = useRef(null);
   useEffect(() => {
     if (decision) outcome.current?.focus();
   }, [decision]);
+  const approve = (remember) => {
+    setDecision("allowed");
+    onApprove?.({ remember });
+  };
   return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-md", className), children: [
     /* @__PURE__ */ jsxs(CardHeader, { children: [
       /* @__PURE__ */ jsx(CardTitle, { children: request.title }),
       /* @__PURE__ */ jsx(CardDescription, { children: request.description })
     ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-body-sm", children: [
-        request.details.map((d) => /* @__PURE__ */ jsxs("div", { className: "contents", children: [
-          /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: d.label }),
-          /* @__PURE__ */ jsx("dd", { className: "truncate text-foreground", children: d.value })
-        ] }, d.label)),
-        /* @__PURE__ */ jsxs("div", { className: "contents", children: [
-          /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Tool" }),
-          /* @__PURE__ */ jsx("dd", { className: "min-w-0", children: /* @__PURE__ */ jsx(Code, { children: request.tool }) })
-        ] })
-      ] }),
-      decision ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Checkbox, { id: `${id}-remember`, checked: remember, onCheckedChange: (v) => setRemember(v) }),
-        /* @__PURE__ */ jsxs(Label, { htmlFor: `${id}-remember`, className: "text-body-sm", children: [
-          "Allow ",
-          /* @__PURE__ */ jsx(Code, { children: request.tool }),
-          " for the rest of this chat"
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(CardFooter, { actions: true, className: "justify-end", children: decision ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+      ToolCall,
+      {
+        name: request.tool,
+        title: request.action,
+        status: decision === "allowed" ? "complete" : decision === "denied" ? "denied" : "awaiting",
+        statusLabel: decision === "allowed" ? "Allowed" : void 0,
+        input: request.input,
+        defaultOpen: true
+      }
+    ) }),
+    /* @__PURE__ */ jsx(CardFooter, { actions: true, children: decision ? /* @__PURE__ */ jsx(
       InlineStatus,
       {
         ref: outcome,
@@ -67,7 +56,8 @@ function ApprovalBlock({ className, framed = true, onApprove, onDeny }) {
       /* @__PURE__ */ jsx(
         Button,
         {
-          variant: "outline",
+          variant: "ghost",
+          className: "me-auto",
           onClick: () => {
             setDecision("denied");
             onDeny?.();
@@ -75,16 +65,8 @@ function ApprovalBlock({ className, framed = true, onApprove, onDeny }) {
           children: "Deny"
         }
       ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: () => {
-            setDecision("allowed");
-            onApprove?.({ remember });
-          },
-          children: "Allow"
-        }
-      )
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => approve(true), children: "Always allow" }),
+      /* @__PURE__ */ jsx(Button, { onClick: () => approve(false), children: "Allow once" })
     ] }) })
   ] });
 }

package/dist/blocks/approval-block.meta.js

@@ -4,18 +4,17 @@ var approvalBlockMeta = {
   family: "AI & agents",
   kind: "card",
   width: { min: "18rem", max: "28rem" },
-  summary: `An agent asking permission for one tool call: the question, what will happen and what can't be undone, the call's details, an "allow for the rest of this chat" Checkbox, and Deny / Allow.`,
-  intent: 'Reach for this in a chat or agent run when a tool call waits on the person \u2014 sending, paying, deleting, publishing. The call itself, before and after the decision, is a ToolCall with status="awaiting", then "complete" or "denied". A destructive action outside an agent is DestructiveActionModal.',
+  summary: "An agent asking permission for one tool call: the question, what is at stake, the call itself as a ToolCall with its exact input, and Deny / Always allow / Allow once.",
+  intent: `Reach for this in a chat or agent run when a tool call waits on the person \u2014 running a command, sending, paying, deleting, publishing. It wraps the call's own ToolCall, which shows status="awaiting" until the person answers and then "complete" or "denied". A destructive action outside an agent is DestructiveActionModal.`,
   notes: [
-    `The title is the question in plain words ("Send the invoice to Ada?"), not the tool's name; the tool's name is one row of the details, for the person who wants to know exactly what runs.`,
-    "The description says what can't be undone. That sentence is what the person is deciding on.",
-    "Deny comes first and Allow is the primary on the end, the same order as every Sable confirmation. Neither is focused on arrival: an approval that a stray Enter can grant is not an approval.",
-    "After a decision the buttons give way to one InlineStatus line saying what happened, so the thread keeps a record of the answer."
+    'The title is the question in plain words ("Run this command?"); the description says what is at stake. That sentence is what the person is deciding on.',
+    "The call is shown as the agent made it \u2014 tool name and raw input, open on arrival \u2014 because the exact arguments are what a careful person checks. Do not paraphrase them into a form.",
+    "Three answers, as agent products settle on: Deny on the start edge, then Always allow and Allow once, the primary on the end. Neither is focused on arrival: an approval that a stray Enter can grant is not an approval.",
+    "After a decision the buttons give way to one InlineStatus line saying what happened, and the ToolCall shows the outcome, so the thread keeps a record of the answer."
   ],
   a11y: [
     "Focus moves to the outcome line when the buttons leave, instead of dropping to the page; the line is a role=status region, so the decision is announced.",
-    "The details are a dl, so each value is read with its label.",
-    "The remember Checkbox has its own Label, so the tool name inside it is part of its accessible name."
+    "The ToolCall announces its own status change, and its input is a labelled code view."
   ]
 };
 export {

package/dist/blocks/index.d.ts

@@ -17,7 +17,7 @@ interface ApprovalBlockProps {
     className?: string;
     /** false drops the card's surface and border — for a chat column that already frames it. */
     framed?: boolean;
-    /** The person allowed the call. `remember` is the "for the rest of this chat" choice. */
+    /** The person allowed the call. `remember` is true for "Always allow". */
     onApprove?: (options: {
         remember: boolean;
     }) => void;

package/dist/components/section-rail/index.js

@@ -0,0 +1,7 @@
+// src/components/section-rail/index.ts
+import { SectionRail } from "./section-rail.js";
+import { sectionRailMeta } from "./section-rail.meta.js";
+export {
+  SectionRail,
+  sectionRailMeta
+};

package/dist/components/section-rail/section-rail.js

@@ -0,0 +1,153 @@
+"use client";
+
+// src/components/section-rail/section-rail.tsx
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/cn.js";
+import { HighlightGlide } from "../../lib/highlight-glide.js";
+import { setRef } from "../../lib/refs.js";
+import { useActiveSection } from "../../lib/use-active-section.js";
+import { useMotionLevel } from "../../motion/MotionProvider.js";
+import { SimpleTooltip, TooltipGroup } from "../tooltip/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SCROLL_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "]);
+var GLIDE_HANDOFF = "[&[data-glide]_[data-active]>[data-section-rail-mark]]:opacity-0";
+var GLIDE_MARK = "flex items-center justify-center motion-glide after:h-5 after:w-1 after:rounded-full after:bg-primary";
+function SectionRail({
+  sections,
+  value,
+  onValueChange,
+  offset,
+  root,
+  side = "left",
+  motion,
+  className,
+  "aria-label": ariaLabel = "Sections",
+  ref,
+  ...props
+}) {
+  const rail = useRef(null);
+  const setRail = useCallback(
+    (node) => {
+      rail.current = node;
+      setRef(ref, node);
+    },
+    [ref]
+  );
+  const { enabled, attribute } = useMotionLevel(motion);
+  const spied = useActiveSection(
+    sections.map((section) => section.id),
+    { offset, root }
+  );
+  const [picked, setPicked] = useState(null);
+  const internal = picked ?? spied;
+  const active = value ?? internal;
+  const report = useRef(onValueChange);
+  report.current = onValueChange;
+  const reported = useRef(internal);
+  useEffect(() => {
+    if (internal === null || internal === reported.current) return;
+    reported.current = internal;
+    report.current?.(internal);
+  }, [internal]);
+  useEffect(() => {
+    if (picked === null) return;
+    const release = () => setPicked(null);
+    const releaseOnKey = (event) => {
+      if (SCROLL_KEYS.has(event.key)) release();
+    };
+    const listeners = new AbortController();
+    const options = { passive: true, signal: listeners.signal };
+    window.addEventListener("wheel", release, options);
+    window.addEventListener("touchstart", release, options);
+    window.addEventListener("keydown", releaseOnKey, options);
+    window.addEventListener(
+      "pointerdown",
+      (event) => {
+        if (!(event.target instanceof Node && rail.current?.contains(event.target))) release();
+      },
+      options
+    );
+    return () => listeners.abort();
+  }, [picked]);
+  const jump = (event, id) => {
+    if (event.defaultPrevented || event.button !== 0) return;
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const section = document.getElementById(id);
+    if (!section) return;
+    event.preventDefault();
+    setPicked(id);
+    const behavior = enabled ? "auto" : "instant";
+    const scroller = root?.current;
+    if (scroller) {
+      const margin = Number.parseFloat(getComputedStyle(section).scrollMarginTop) || 0;
+      const top = section.getBoundingClientRect().top - scroller.getBoundingClientRect().top - scroller.clientTop;
+      scroller.scrollTo({ top: scroller.scrollTop + top - margin, behavior });
+    } else {
+      section.scrollIntoView({ behavior, block: "start" });
+      window.history.replaceState(window.history.state, "", `#${id}`);
+    }
+    if (event.detail === 0) {
+      if (!section.hasAttribute("tabindex")) {
+        section.setAttribute("tabindex", "-1");
+        section.addEventListener("blur", () => section.removeAttribute("tabindex"), { once: true });
+      }
+      section.focus({ preventScroll: true });
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref: setRail,
+      "aria-label": ariaLabel,
+      "data-motion": attribute,
+      className: cn(
+        "relative flex w-fit flex-col rounded-full bg-muted py-2",
+        GLIDE_HANDOFF,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(HighlightGlide, { follow: "data-active", timing: "selection", className: GLIDE_MARK }),
+        /* @__PURE__ */ jsx(TooltipGroup, { motion, children: sections.map((section) => {
+          const current = section.id === active;
+          return /* @__PURE__ */ jsx(
+            SimpleTooltip,
+            {
+              content: section.label,
+              side: side === "left" ? "right" : "left",
+              children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: `#${section.id}`,
+                  "aria-label": section.label,
+                  "aria-current": current ? "location" : void 0,
+                  "data-active": current ? "" : void 0,
+                  onClick: (event) => jump(event, section.id),
+                  className: "group/rail-link relative flex h-(--control-sm) w-11 items-center justify-center rounded-full text-muted-foreground outline-none motion-interactive hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      "data-section-rail-mark": "",
+                      className: "size-1 rounded-full bg-current motion-interactive group-hover/rail-link:scale-150 group-focus-visible/rail-link:scale-150 group-data-[active]/rail-link:h-5 group-data-[active]/rail-link:bg-primary"
+                    }
+                  )
+                }
+              )
+            },
+            section.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+SectionRail.displayName = "SectionRail";
+export {
+  SectionRail
+};

package/dist/components/section-rail/section-rail.meta.js

@@ -0,0 +1,189 @@
+// src/components/section-rail/section-rail.meta.ts
+var sectionRailMeta = {
+  name: "SectionRail",
+  summary: "A slim vertical rail of dots, one per section of a long page, that shows where the reader is and jumps to any section. The current section's bar glides as the page scrolls; a shared tooltip names each dot.",
+  keywords: [
+    "section rail",
+    "scroll spy",
+    "scrollspy",
+    "dot navigation",
+    "page navigation",
+    "table of contents",
+    "on this page",
+    "chapter nav",
+    "scroll progress",
+    "case study nav"
+  ],
+  usage: {
+    description: "Use SectionRail beside a long, single-column read \u2014 a case study, an essay, a long landing page \u2014 so the reader can see which section they are in and jump to another without leaving the text. It follows the scroll by itself (useActiveSection); pass value when the parent already knows the current section.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Give every section an id that matches its entry, and keep the list to the page's top-level sections \u2014 about ten at most, so the rail stays shorter than the viewport."
+      },
+      {
+        guidance: "do",
+        description: "Place it with layout classes \u2014 usually `fixed top-1/2 left-6 z-(--z-nav) -translate-y-1/2` \u2014 and hide it below the width where it would overlap the text (`max-lg:hidden`). Offer the same links another way on narrow screens, such as a Collapsible list at the top of the page."
+      },
+      {
+        guidance: "do",
+        description: "Pass `root` when the content scrolls inside an element (a Scroller, an inset AppShell main) rather than the window, and give sections `scroll-mt-*` when a sticky header would cover their tops after a jump."
+      },
+      {
+        guidance: "do",
+        description: 'Set `side="right"` when the rail sits on the right edge, so labels open toward the content.'
+      },
+      {
+        guidance: "dont",
+        description: "Use it for app navigation between pages; that is SideNav or Sidebar. A SectionRail only moves within one page.",
+        instead: ["SideNav", "Sidebar"]
+      },
+      {
+        guidance: "dont",
+        description: "Use it to show the steps of a task or a flow; that is Stepper, which shows progress through steps rather than position in a read.",
+        instead: ["Stepper"]
+      },
+      {
+        guidance: "dont",
+        description: "Use it for a handful of switchable views in one place; that is Tabs.",
+        instead: ["Tabs"]
+      }
+    ],
+    anatomy: [
+      {
+        name: "Rail",
+        required: true,
+        description: "The `<nav>` landmark: a rounded muted track holding one link per section."
+      },
+      {
+        name: "Dot",
+        required: true,
+        description: "A link to `#id`, drawn as a small dot that grows under the pointer or focus."
+      },
+      {
+        name: "Marker",
+        required: true,
+        description: "One primary bar that sits on the current section's dot and glides to the next."
+      },
+      {
+        name: "Label",
+        required: true,
+        description: "A shared tooltip that names the hovered or focused dot and travels between dots."
+      }
+    ]
+  },
+  related: {
+    components: ["SideNav", "Tooltip", "Stepper", "Tabs", "GlidingHighlight"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "sections",
+      type: "readonly { id: string; label: string }[]",
+      description: "The sections, in document order. `id` is the section element's id (the link goes to `#id`); `label` is the tooltip and the link's accessible name."
+    },
+    {
+      name: "value",
+      type: "string",
+      description: "The current section's id, when the parent decides it. Leave it unset and the rail follows the scroll itself."
+    },
+    {
+      name: "onValueChange",
+      type: "(id: string) => void",
+      description: "Called with the new id when the reader scrolls into a section or picks one."
+    },
+    {
+      name: "offset",
+      type: "number",
+      default: "0.35",
+      description: "Where the reading line sits, as a fraction of the viewport from its top. A section becomes current once its top crosses it."
+    },
+    {
+      name: "root",
+      type: "RefObject<HTMLElement | null>",
+      description: "The element that scrolls, when it is not the window."
+    },
+    {
+      name: "side",
+      type: '"left" | "right"',
+      default: '"left"',
+      description: "Which edge of the page the rail sits on. The labels open on the other side, toward the content."
+    },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "How much motion this component uses: `full` inherits the app's policy, `subtle` keeps feedback and drops the marker's glide, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting."
+    },
+    {
+      name: "aria-label",
+      type: "string",
+      default: '"Sections"',
+      description: `The nav landmark's name. Name it for the page ("Case study sections") when it has other navs.`
+    }
+  ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Page chrome arrives with the page; the marker lands on the current section with no transition, because a bar sliding in on load narrates a move nobody made."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Dot",
+      why: "The dot darkens and grows under the pointer or focus, and the label travels between dots as one tooltip (TooltipGroup) rather than closing and reopening at each."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-glide",
+      part: "Marker",
+      why: "One bar travels to the new section as the page scrolls, so the change reads as movement down the page. A picked section holds the bar until the reader scrolls by hand, so it goes straight there instead of stepping through every section in between, and stays on the pick even when the page ends before that section can reach the reading line. Expressive: `subtle` moves it at once."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Navigation chrome has no working state."
+    }
+  ],
+  a11y: [
+    'Renders a <nav> landmark (default name "Sections") of real links to `#id`, so it works with no script, middle-click and copy-link.',
+    `Each link is named by its section's label; the current one carries aria-current="location".`,
+    "Activating a link from the keyboard moves focus into the section, as following an anchor does, so the next Tab continues from there.",
+    "The tooltip opens on focus as well as hover; the dots are 44\xD732 targets.",
+    "Under reduced motion the jump is instant and the marker moves without travel."
+  ],
+  tokensUsed: ["muted", "muted-foreground", "foreground", "primary", "ring", "popover", "popover-foreground", "border-floating"],
+  examples: [
+    {
+      label: "Fixed beside a long read",
+      code: `<SectionRail
+  aria-label="Case study sections"
+  sections={[
+    { id: "overview", label: "Overview" },
+    { id: "problem", label: "The problem" },
+    { id: "process", label: "Process" },
+    { id: "outcome", label: "Outcome" },
+  ]}
+  className="fixed top-1/2 left-6 z-(--z-nav) -translate-y-1/2 max-lg:hidden"
+/>`
+    },
+    {
+      label: "On the right edge",
+      code: `<SectionRail
+  side="right"
+  sections={[
+    { id: "intro", label: "Introduction" },
+    { id: "usage", label: "Usage" },
+    { id: "api", label: "API" },
+  ]}
+  className="fixed top-1/2 right-6 z-(--z-nav) -translate-y-1/2 max-lg:hidden"
+/>`
+    }
+  ]
+};
+export {
+  sectionRailMeta
+};

package/dist/file-hashes.json

@@ -2,8 +2,8 @@
 	"dist/_contract-CDa9-NdB.d.ts": "062fb08b461ea845",
 	"dist/blocks/api-keys-block.js": "0c6d54126392e4fb",
 	"dist/blocks/api-keys-block.meta.js": "41903f3a7743b068",
-	"dist/blocks/approval-block.js": "252c908185759a46",
-	"dist/blocks/approval-block.meta.js": "8a356ebd1f534a54",
+	"dist/blocks/approval-block.js": "b84f4d310ce30664",
+	"dist/blocks/approval-block.meta.js": "e7c947fca94d9d42",
 	"dist/blocks/chat-thread-block.js": "e0981afdbc8e9b84",
 	"dist/blocks/chat-thread-block.meta.js": "e91fdb9ab2277c27",
 	"dist/blocks/command-palette-block.js": "498ad5d4787f9336",
@@ -26,7 +26,7 @@
 	"dist/blocks/goal-progress-block.meta.js": "3e5b376bf58bdb4b",
 	"dist/blocks/hero-block.js": "ac74e80d4d7d2ad9",
 	"dist/blocks/hero-block.meta.js": "2dd2e5be2472a563",
-	"dist/blocks/index.d.ts": "940238f0164f6d03",
+	"dist/blocks/index.d.ts": "5f4a38dda1460f56",
 	"dist/blocks/index.js": "690417c222dc4d2a",
 	"dist/blocks/invite-team-block.js": "be4df15518252535",
 	"dist/blocks/invite-team-block.meta.js": "fd57b632f0f32276",
@@ -386,6 +386,9 @@
 	"dist/components/section-header/index.js": "11f5658b3805ce6e",
 	"dist/components/section-header/section-header.js": "eafb346c6efc6d84",
 	"dist/components/section-header/section-header.meta.js": "011c13a1916b1d04",
+	"dist/components/section-rail/index.js": "30fd32b042f1721e",
+	"dist/components/section-rail/section-rail.js": "0eb588ecae9c68ce",
+	"dist/components/section-rail/section-rail.meta.js": "fa1993dcde9735db",
 	"dist/components/segmented-bar/index.js": "3f544d3233ab578f",
 	"dist/components/segmented-bar/segmented-bar.js": "26d87e5c14fddc87",
 	"dist/components/segmented-bar/segmented-bar.meta.js": "490381c6d0692291",
@@ -509,8 +512,8 @@
 	"dist/icon-sets/brands.js": "9a37d8739f14f2a9",
 	"dist/icon-sets/reicon.d.ts": "52f6e41dc8137b4e",
 	"dist/icon-sets/reicon.js": "0f73074baac9b866",
-	"dist/index.d.ts": "59bef7457412bae9",
-	"dist/index.js": "b6ac1ec603ffaa55",
+	"dist/index.d.ts": "2eefd1036ccd7232",
+	"dist/index.js": "8d2cf095c3399a97",
 	"dist/ios/chrome.css": "a7ca9e3735d8658e",
 	"dist/ios/chrome.js": "37091fef7b68bd28",
 	"dist/ios/frame.css": "dd2703c944ce575a",
@@ -575,8 +578,9 @@
 	"dist/lib/segmented.js": "43c21955f7f3ae33",
 	"dist/lib/selection-card.js": "43c49c8c51dde54c",
 	"dist/lib/status-tone.js": "61f0a8bb4fb9c7d6",
-	"dist/lib/taxonomy.js": "4ecb616f502009c0",
+	"dist/lib/taxonomy.js": "f1de3ec452d7516f",
 	"dist/lib/trim-label.js": "9998d45e03c95515",
+	"dist/lib/use-active-section.js": "9cdda6529e332ac8",
 	"dist/lib/use-caret-trigger.js": "e9dba2b3bc27f18e",
 	"dist/lib/use-copy.js": "5cf22621e4d5e83b",
 	"dist/lib/use-edge-fade.js": "392e8c33f072fd21",