@tangle-network/ui 11.38.2 → 11.40.0

package/src/primitives/settings.tsx

@@ -0,0 +1,404 @@
+"use client";
+
+import { CircleAlert, Ellipsis, Lock } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { Card, CardFooter, CardTitle } from "./card";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu";
+import { fieldMessageId } from "./field";
+import { InfoTip } from "./info-tip";
+import { Label } from "./label";
+
+/*
+ * Settings rows and lists answer to their section card's width, not the
+ * viewport's: the card is the `settings-section` query container, so a card in
+ * a phone and one in a narrow split pane stack the same way. Below 34rem a
+ * label and a 13rem control no longer fit side by side.
+ *
+ * Type is one size: 14px for labels, values, descriptions, statuses and
+ * errors; section titles are 16px. Controls keep their own `md` size.
+ */
+
+const SCROLL_OFFSET = "scroll-mt-[calc(var(--shell-header-height)_+_1rem)]";
+const DIVIDED = "not-first:border-t not-first:border-[color:var(--border-subtle)]";
+const ERROR_TEXT = "text-[color:var(--surface-danger-text)]";
+
+function ErrorLine({ id, className, children }: { id?: string; className?: string; children: React.ReactNode }) {
+  return (
+    <div id={id} role="alert" className={cn("flex items-start gap-1.5 text-sm leading-5 [overflow-wrap:anywhere]", ERROR_TEXT, className)}>
+      <CircleAlert aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
+      <div className="min-w-0">{children}</div>
+    </div>
+  );
+}
+
+function LockLine({ id, className, children }: { id?: string; className?: string; children: React.ReactNode }) {
+  return (
+    <div id={id} className={cn("flex items-start gap-1.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]", className)}>
+      <Lock aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
+      <div className="min-w-0">{children}</div>
+    </div>
+  );
+}
+
+export type SettingsRowLayout = "inline" | "compact" | "stacked";
+
+export interface SettingsRowProps {
+  /** The row's id, for a deep link such as `#timezone`. */
+  id?: string;
+  label: string;
+  /** One line that states a consequence the person needs to act. Most rows need none. */
+  description?: React.ReactNode;
+  /** Help that explains the setting, shown from an info button beside the label. */
+  info?: React.ReactNode;
+  /**
+   * The control's id. The label targets it, and the row's description, error
+   * or lock reason renders at {@link fieldMessageId}. When the row's only child
+   * carries this id, the row adds that message to its `aria-describedby` and
+   * marks it invalid on error; otherwise point the control there yourself.
+   */
+  htmlFor?: string;
+  /** A save state after the label, such as "Saving…" or "Saved". It is announced politely. */
+  status?: React.ReactNode;
+  /** Replaces the description in danger text and is announced. */
+  error?: React.ReactNode;
+  /** Shows a Retry action after the error. */
+  onRetry?: () => void;
+  /**
+   * `inline` (default): text left, control right, stacked below 34rem.
+   * `compact`: the control keeps its own width and stays on the line (switches, single buttons).
+   * `stacked`: the control spans the row under the text (textareas, lists).
+   */
+  layout?: SettingsRowLayout;
+  /** Why the control is unavailable, naming who can change it. Replaces the description after a lock glyph. */
+  disabledReason?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+const ROW_COLUMNS: Record<SettingsRowLayout, string> = {
+  inline: "grid-cols-[minmax(0,1fr)_minmax(13rem,20rem)] @max-[34rem]/settings-section:grid-cols-1",
+  compact: "grid-cols-[minmax(0,1fr)_auto]",
+  stacked: "grid-cols-1",
+};
+
+const ROW_CONTROL: Record<SettingsRowLayout, string> = {
+  inline: "justify-end @max-[34rem]/settings-section:flex-col @max-[34rem]/settings-section:items-stretch",
+  compact: "justify-end",
+  stacked: "flex-col items-stretch",
+};
+
+type DescribableProps = { id?: string; "aria-describedby"?: string; "aria-invalid"?: unknown };
+
+/** Point the row's own control at the row's message without changing anything else about it. */
+function describeControl(children: React.ReactNode, htmlFor: string | undefined, messageId: string | undefined, invalid: boolean) {
+  if (!htmlFor || !messageId || !React.isValidElement<DescribableProps>(children) || children.props.id !== htmlFor) return children;
+  const ids = new Set([...(children.props["aria-describedby"] ?? "").split(/\s+/), messageId].filter(Boolean));
+  return React.cloneElement(children, {
+    "aria-describedby": [...ids].join(" "),
+    ...(invalid && children.props["aria-invalid"] === undefined ? { "aria-invalid": true } : {}),
+  });
+}
+
+/**
+ * One setting: its label, an optional consequence line and its control. The
+ * label carries the save status after it; an error or a lock reason replaces
+ * the description. Rows inside a {@link SettingsSection} are divided by a
+ * hairline and stack when the card is narrower than 34rem.
+ */
+export function SettingsRow({
+  id, label, description, info, htmlFor, status, error, onRetry, layout = "inline", disabledReason, children,
+}: SettingsRowProps) {
+  const messageId = htmlFor ? fieldMessageId(htmlFor) : undefined;
+  const hasMessage = error != null || disabledReason != null || description != null;
+  const control = describeControl(children, htmlFor, hasMessage ? messageId : undefined, error != null);
+  return (
+    <div
+      id={id}
+      data-layout={layout}
+      className={cn(
+        "grid min-w-0 items-center gap-x-8 gap-y-3 px-5 py-4 @max-[34rem]/settings-section:px-4",
+        SCROLL_OFFSET,
+        DIVIDED,
+        ROW_COLUMNS[layout],
+      )}
+    >
+      <div className="min-w-0">
+        <div className="flex min-h-5 flex-wrap items-center gap-x-2 gap-y-1">
+          {htmlFor
+            ? <Label htmlFor={htmlFor} className="leading-5 text-foreground">{label}</Label>
+            : <span className="font-medium text-sm leading-5 text-foreground">{label}</span>}
+          {info != null && <InfoTip label={label}>{info}</InfoTip>}
+          <span aria-live="polite" className="inline-flex items-center gap-1 text-sm leading-5 text-muted-foreground">{status}</span>
+        </div>
+        {error != null
+          ? <ErrorLine id={messageId} className="mt-0.5">
+            {error}
+            {onRetry && <>{" "}<Button type="button" variant="bare" onClick={onRetry} className="rounded-sm font-medium text-[var(--accent-text)] underline-offset-4 hover:underline">Retry</Button></>}
+          </ErrorLine>
+          : disabledReason != null
+            ? <LockLine id={messageId} className="mt-0.5">{disabledReason}</LockLine>
+            : description != null && (
+              <div id={messageId} className="mt-0.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]">{description}</div>
+            )}
+      </div>
+      {control != null && control !== false && (
+        <div className={cn("flex min-w-0 items-center gap-2", ROW_CONTROL[layout])}>{control}</div>
+      )}
+    </div>
+  );
+}
+
+export interface SettingsSectionProps {
+  /** The section's anchor: `#id` scrolls to it. The title's id is `${id}-title`. */
+  id: string;
+  title: string;
+  /** One short line, at most about twelve words. Leave it out when the title says enough. */
+  description?: React.ReactNode;
+  /** Help that explains the section, shown from an info button beside the title. */
+  info?: React.ReactNode;
+  /** Section actions, top right, such as "Edit brief" or "Add source". */
+  actions?: React.ReactNode;
+  /** `danger` draws the card's edge and title in the danger tone. */
+  tone?: "default" | "danger";
+  /** The card's footer on the muted plane, such as the one save bar a section may have. */
+  footer?: React.ReactNode;
+  /** Rows, lists and any other blocks of the section. */
+  children?: React.ReactNode;
+}
+
+/**
+ * One settings card: a 16px title with optional description, info tip and
+ * actions, then its rows and lists, then an optional footer. The card is the
+ * width container its rows and lists respond to.
+ */
+export function SettingsSection({
+  id, title, description, info, actions, tone = "default", footer, children,
+}: SettingsSectionProps) {
+  const titleId = `${id}-title`;
+  const danger = tone === "danger";
+  return (
+    <Card
+      id={id}
+      role="region"
+      aria-labelledby={titleId}
+      data-tone={tone}
+      className={cn("@container/settings-section min-w-0", SCROLL_OFFSET, danger && "border-[color:var(--surface-danger-border)]")}
+    >
+      <div className="flex items-start justify-between gap-4 px-5 py-4 @max-[34rem]/settings-section:flex-wrap @max-[34rem]/settings-section:px-4">
+        <div className="min-w-0">
+          <div className="flex items-center gap-1.5">
+            <CardTitle as="h2" id={titleId} className={cn("leading-6 [overflow-wrap:anywhere]", danger && ERROR_TEXT)}>{title}</CardTitle>
+            {info != null && <InfoTip label={title}>{info}</InfoTip>}
+          </div>
+          {description != null && (
+            <div className="mt-0.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]">{description}</div>
+          )}
+        </div>
+        {actions != null && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
+      </div>
+      {children}
+      {footer != null && (
+        <CardFooter className="justify-between gap-3 rounded-b-[inherit] border-t border-[color:var(--border-subtle)] bg-muted px-5 py-3 text-sm leading-5 [&:not(:first-child)]:pt-3 @max-[34rem]/settings-section:px-4">
+          {footer}
+        </CardFooter>
+      )}
+    </Card>
+  );
+}
+
+/** Track widths for a {@link SettingsList}. Every slot its items use needs a column, except status and menu, which have fallbacks. */
+export interface SettingsListColumns {
+  /** A logo or avatar column, such as `"36px"`. */
+  leading?: string;
+  /** The title column; `minmax(0,1fr)` by default. */
+  main?: string;
+  /** A fixed state column, such as `"8rem"`. Below 34rem the state moves under the title, full width. */
+  status?: string;
+  /** A fixed column for the at-rest action, such as `"9rem"`. Below 34rem it shrinks to its content. */
+  action?: string;
+  /** A column for the ⋯ menu, such as `"36px"`. Without it the menu ends the action cell. */
+  menu?: string;
+}
+
+const LIST_SLOTS = ["leading", "main", "status", "action", "menu"] as const;
+
+const LENGTH = /^[\d.]+(?:px|rem|em|ch)$/;
+
+function listTracks(columns: SettingsListColumns, narrow: boolean) {
+  const tracks = LIST_SLOTS.flatMap((slot): Array<[string, string]> => {
+    if (slot === "main") return [[slot, columns.main ?? "minmax(0,1fr)"]];
+    const width = columns[slot];
+    if (!width || (narrow && slot === "status")) return [];
+    return [[slot, narrow && slot === "action" ? "auto" : width]];
+  });
+  // A subgrid item's inline padding (px-5, px-4 when narrow) lands on its edge
+  // cells as extra margin, so a fixed edge track grows by it to keep its width.
+  const pad = narrow ? "1rem" : "1.25rem";
+  return tracks.map(([slot, width], index) => {
+    const edge = index === 0 || index === tracks.length - 1;
+    return `[${slot}] ${edge && LENGTH.test(width) ? `calc(${width} + ${pad})` : width}`;
+  }).join(" ");
+}
+
+const SettingsListContext = React.createContext<SettingsListColumns>({});
+
+export interface SettingsListProps {
+  columns: SettingsListColumns;
+  "aria-label"?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * Comparable rows whose status and action columns line up across items (CSS
+ * subgrid). Below 34rem each item becomes two lines: the title and meta with
+ * its action on the right, then the state under them at full width.
+ */
+export function SettingsList({ columns, children, "aria-label": ariaLabel }: SettingsListProps) {
+  const style = {
+    "--settings-list-columns": listTracks(columns, false),
+    "--settings-list-columns-narrow": listTracks(columns, true),
+  } as React.CSSProperties;
+  return (
+    <SettingsListContext.Provider value={columns}>
+      <ul
+        role="list"
+        aria-label={ariaLabel}
+        style={style}
+        className={cn(
+          "grid min-w-0 gap-x-4 [grid-template-columns:var(--settings-list-columns)] @max-[34rem]/settings-section:[grid-template-columns:var(--settings-list-columns-narrow)]",
+          DIVIDED,
+        )}
+      >
+        {children}
+      </ul>
+    </SettingsListContext.Provider>
+  );
+}
+
+export interface SettingsListMenuItem {
+  label: string;
+  onSelect: () => void;
+  /** Destructive actions (delete, remove, revoke) belong here, in the danger tone. */
+  tone?: "danger";
+  /** Shown under the label; the item stays focusable so the reason is read, and selecting it does nothing. */
+  disabledReason?: React.ReactNode;
+}
+
+export interface SettingsListAction {
+  label: string;
+  onSelect: () => void;
+  /** Why the action is unavailable, naming who can take it. The button stays focusable, does nothing, and the reason shows under the meta. */
+  disabledReason?: React.ReactNode;
+}
+
+export interface SettingsListItemProps {
+  /** A logo or avatar, in the list's `leading` column. */
+  leading?: React.ReactNode;
+  /** The item's name. Make it the link to the item's detail. */
+  title: React.ReactNode;
+  /** One line under the title, such as an address or a schedule. */
+  meta?: React.ReactNode;
+  /** The item's state as plain text, or a control that sets it (a role select). */
+  status?: React.ReactNode;
+  /** Shown under the meta in danger text and announced. */
+  error?: React.ReactNode;
+  /** The one verb the item needs at rest. It is drawn as an outline button, so it never reads as the state beside it. */
+  action?: SettingsListAction;
+  /** Everything else, including destructive actions, behind a ⋯ button. */
+  menu?: SettingsListMenuItem[];
+}
+
+function ItemMenu({ items, titleId }: { items: SettingsListMenuItem[]; titleId: string }) {
+  const triggerId = React.useId();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button type="button" variant="ghost" size="icon" id={triggerId} aria-label="More actions" aria-labelledby={`${triggerId} ${titleId}`}>
+          <Ellipsis aria-hidden="true" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-44 max-w-72">
+        {items.map((item) => {
+          const unavailable = item.disabledReason != null;
+          return (
+            <DropdownMenuItem
+              key={item.label}
+              aria-disabled={unavailable || undefined}
+              onSelect={(event) => { if (unavailable) event.preventDefault(); else item.onSelect(); }}
+              className={cn(
+                "flex-col items-start gap-0.5 leading-5",
+                item.tone === "danger" && !unavailable && cn(ERROR_TEXT, "focus:text-[color:var(--surface-danger-text)]"),
+                unavailable && "cursor-not-allowed text-muted-foreground focus:text-muted-foreground",
+              )}
+            >
+              <span>{item.label}</span>
+              {unavailable && <LockLine>{item.disabledReason}</LockLine>}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+// Below 34rem the state takes a second line from the title to the card edge, so a role select gets the full width.
+const NARROW_STATUS = "@max-[34rem]/settings-section:col-start-[main] @max-[34rem]/settings-section:col-end-[-1] @max-[34rem]/settings-section:row-start-2 @max-[34rem]/settings-section:mt-2";
+
+/**
+ * One item in a {@link SettingsList}; each slot goes to the list's column of
+ * that name. Without a status column the state follows the meta, and without
+ * a menu column the ⋯ menu ends the action cell.
+ */
+export function SettingsListItem({ leading, title, meta, status, error, action, menu }: SettingsListItemProps) {
+  const columns = React.useContext(SettingsListContext);
+  const titleId = React.useId();
+  const reasonId = `${titleId}-reason`;
+  const locked = action?.disabledReason != null;
+  const menuNode = menu && menu.length > 0 ? <ItemMenu items={menu} titleId={titleId} /> : null;
+  const actionButton = action && (
+    <Button
+      type="button"
+      variant="outline"
+      aria-disabled={locked || undefined}
+      aria-describedby={locked ? reasonId : undefined}
+      onClick={locked ? undefined : action.onSelect}
+    >
+      {action.label}
+    </Button>
+  );
+  const actionCell = (actionButton || (menuNode && !columns.menu)) && (
+    <>{actionButton}{!columns.menu && menuNode}</>
+  );
+  return (
+    <li
+      className={cn(
+        "col-span-full grid grid-cols-subgrid items-center px-5 py-3 @max-[34rem]/settings-section:px-4",
+        DIVIDED,
+      )}
+    >
+      {leading != null && <div className="col-start-[leading] row-start-1 flex">{leading}</div>}
+      <div className="col-start-[main] row-start-1 min-w-0">
+        <div
+          id={titleId}
+          className="font-medium text-sm leading-5 text-foreground [overflow-wrap:anywhere] [&_a]:rounded-sm [&_a]:text-foreground [&_a]:underline-offset-4 [&_a:hover]:underline [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-[var(--focus-border)]"
+        >
+          {title}
+        </div>
+        {meta != null && <div className="text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]">{meta}</div>}
+        {status != null && !columns.status && <div className="mt-1 text-sm leading-5 text-muted-foreground">{status}</div>}
+        {locked && <LockLine id={reasonId} className="mt-1">{action?.disabledReason}</LockLine>}
+      </div>
+      {error != null && (
+        <ErrorLine className="col-start-[main] row-start-2 mt-1 @max-[34rem]/settings-section:col-end-[-1] @max-[34rem]/settings-section:row-start-3">{error}</ErrorLine>
+      )}
+      {status != null && columns.status && (
+        <div className={cn("col-start-[status] row-start-1 min-w-0 text-sm leading-5 text-muted-foreground", NARROW_STATUS)}>{status}</div>
+      )}
+      {actionCell && (
+        <div className="col-start-[action] row-start-1 flex min-w-0 items-center justify-end gap-1">{actionCell}</div>
+      )}
+      {menuNode && columns.menu && <div className="col-start-[menu] row-start-1 flex justify-end">{menuNode}</div>}
+    </li>
+  );
+}

package/src/primitives/switch.tsx

@@ -22,6 +22,9 @@ const Switch = React.forwardRef<
       // theme. The bg-primary fill is tuned to carry white text and measured
       // 2.4:1 on the dark card, with a bg-background thumb at 2.5:1 on it.
       // brand's switch-contrast.test.ts asserts these pairs for every theme.
+      // On a coarse pointer a transparent 44px hit area surrounds the 20px track,
+      // as on InfoTip; the insets start inside the 2px border.
+      "relative pointer-coarse:before:absolute pointer-coarse:before:-inset-x-1.5 pointer-coarse:before:-inset-y-3.5 pointer-coarse:before:content-['']",
       "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-[var(--accent-text)] data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent",
       focusRing,
       className,

package/src/primitives/tooltip.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Slottable } from "@radix-ui/react-slot";
 import * as React from "react";
 import { SurfaceMotion } from "../lib/surface-motion";
 import { surfaceMotion } from "../lib/motion";
@@ -48,9 +49,12 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
  */
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 6, asChild, children, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    /** Render through a portal; use false to keep content in its local owner. */
+    portal?: boolean;
+  }
+>(({ className, sideOffset = 6, asChild, children, portal = true, ...props }, ref) => {
+  const content = (
     <TooltipPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
@@ -61,9 +65,13 @@ const TooltipContent = React.forwardRef<
       )}
       {...props}
       asChild
-    ><SurfaceMotion kind="tooltip" asChild={asChild}>{children}</SurfaceMotion></TooltipPrimitive.Content>
-  </TooltipPrimitive.Portal>
-));
+    ><SurfaceMotion kind="tooltip" asChild={asChild}>
+      {/* Keep the caller as the slot target when Radix adds accessibility children. */}
+      {asChild ? <Slottable>{children}</Slottable> : children}
+    </SurfaceMotion></TooltipPrimitive.Content>
+  );
+  return portal ? <TooltipPrimitive.Portal>{content}</TooltipPrimitive.Portal> : content;
+});
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/styles/presentation.css

@@ -14,15 +14,56 @@
 .tangle-reading-article { width: 100%; max-width: var(--reading-max-width); overflow-wrap: anywhere; }
 .tangle-reading-nav a, .tangle-reading-outline a { display: block; padding: 0.5rem 0; color: hsl(var(--muted-foreground)); text-decoration: none; }
 .tangle-reading-nav a[aria-current]:not([aria-current="false"]), .tangle-reading-outline a[aria-current]:not([aria-current="false"]) { color: var(--accent-text); font-weight: 600; }
+/* The 13rem track exists only beside a nav, so an article with no nav keeps the full column. */
 @media(min-width: 64rem) {
-  .tangle-reading-shell { grid-template-columns: 13rem minmax(0,1fr); }
+  .tangle-reading-shell:has(> .tangle-reading-nav) { grid-template-columns: 13rem minmax(0,1fr); }
   .tangle-reading-outline { display: none; }
   .tangle-reading-nav { position: sticky; top: var(--shell-header-height); align-self: start; max-height: calc(100dvh - var(--shell-header-height)); overflow: auto; }
 }
 @media(min-width: 80rem) {
-  .tangle-reading-shell:has(.tangle-reading-outline) { grid-template-columns: 13rem minmax(0,1fr) 11rem; }
+  .tangle-reading-shell:has(> .tangle-reading-outline) { grid-template-columns: minmax(0,1fr) 11rem; }
+  .tangle-reading-shell:where(:has(> .tangle-reading-nav)):has(> .tangle-reading-outline) { grid-template-columns: 13rem minmax(0,1fr) 11rem; }
   .tangle-reading-outline { display: block; position: sticky; top: var(--shell-header-height); align-self: start; }
 }
+.tangle-reading-header { grid-column: 1 / -1; min-width: 0; }
+/* PageShell measure="settings". The frame is the query container, so the layout follows the content area's width, not the viewport's.
+   Below 60rem the navigation is a sticky tab strip whose track is the divider; from 60rem it is a sticky 13rem column beside a 48rem article.
+   Without a nav the page is the 48rem column alone. */
+.tangle-settings-frame { container: tangle-settings / inline-size; width: 100%; min-width: 0; }
+.tangle-reading-shell[data-measure="settings"] { --tangle-settings-gutter: 1.5rem; grid-template-columns: minmax(0,1fr); gap: 0; max-width: calc(13rem + 2.5rem + 48rem + 4rem); padding: 1.5rem var(--tangle-settings-gutter) 3rem; }
+/* Without a nav the shell is the column and its gutters, so the centred shell centres the column and its header. */
+.tangle-reading-shell[data-measure="settings"]:not(:has(> .tangle-reading-nav)) { max-width: calc(48rem + 2 * var(--tangle-settings-gutter)); }
+.tangle-reading-shell[data-measure="settings"] > .tangle-reading-header { margin-bottom: 0.5rem; }
+.tangle-reading-shell[data-measure="settings"] > .tangle-reading-header > * { margin-bottom: 0; }
+.tangle-reading-shell[data-measure="settings"] > .tangle-reading-outline { display: none; }
+.tangle-reading-shell[data-measure="settings"] > .tangle-reading-article { max-width: 48rem; display: flex; flex-direction: column; gap: 1.5rem; }
+.tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-end; gap: 0.25rem; height: var(--shell-header-height); max-height: none; margin: 0 calc(-1 * var(--tangle-settings-gutter)) 1.25rem; padding: 0 var(--tangle-settings-gutter); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; background: hsl(var(--background)); box-shadow: inset 0 -1px 0 hsl(var(--border)); }
+.tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav::-webkit-scrollbar { display: none; }
+.tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav > :is(ul, ol) { display: flex; flex: none; align-items: flex-end; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
+.tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a { flex: none; display: flex; align-items: center; gap: 0.5rem; min-height: var(--control-height-lg, 2.75rem); padding: 0 0.75rem; color: hsl(var(--muted-foreground)); font-size: var(--font-size-label, 0.875rem); font-weight: 500; line-height: 1.25rem; white-space: nowrap; text-decoration: none; transition: color var(--motion-control), background-color var(--motion-control), box-shadow var(--motion-control); }
+.tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a > svg { display: none; }
+.tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a > [data-count] { color: var(--text-dim); font-weight: 400; font-variant-numeric: tabular-nums; }
+.tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a:hover { color: hsl(var(--foreground)); box-shadow: inset 0 -2px 0 hsl(var(--hsl-ring) / 0.4); }
+.tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a[aria-current="page"] { color: var(--accent-text); font-weight: 500; background: hsl(var(--hsl-ring) / 0.07); box-shadow: inset 0 -2px 0 var(--ix-sel-ring); }
+.tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a:focus-visible { outline: 1px solid var(--focus-border); outline-offset: -1px; box-shadow: inset 0 0 0 4px var(--focus-halo); }
+@container tangle-settings (max-width: 40rem) {
+  .tangle-reading-shell[data-measure="settings"] { --tangle-settings-gutter: 1rem; padding: 1rem var(--tangle-settings-gutter) 2.5rem; }
+  .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav { margin-bottom: 1rem; }
+  .tangle-reading-shell[data-measure="settings"] > .tangle-reading-article { gap: 1rem; }
+}
+@container tangle-settings (min-width: 60rem) {
+  .tangle-reading-shell[data-measure="settings"] { --tangle-settings-gutter: 2rem; grid-template-columns: minmax(0,48rem); column-gap: 2.5rem; align-items: start; padding: 2rem; }
+  .tangle-reading-shell[data-measure="settings"]:has(> .tangle-reading-nav) { grid-template-columns: 13rem minmax(0,48rem); }
+  .tangle-reading-shell[data-measure="settings"] > .tangle-reading-header { margin-bottom: 1.75rem; }
+  .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav { top: 2rem; flex-direction: column; align-items: stretch; gap: 2px; height: auto; margin: 0; padding: 0; overflow: visible; background: none; box-shadow: none; }
+  .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav > :is(ul, ol) { flex-direction: column; align-items: stretch; gap: 2px; }
+  .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a { min-height: var(--control-height, 2.25rem); gap: 0.625rem; padding: 0 0.625rem; border-radius: var(--radius-md); }
+  .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a > svg { display: block; flex: none; width: 1rem; height: 1rem; }
+  .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a > [data-count] { margin-inline-start: auto; }
+  .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a:hover { background: var(--ix-hover-bg); box-shadow: none; }
+  .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a[aria-current="page"] { background: var(--ix-sel-bg); box-shadow: inset 0 0 0 1px var(--ix-sel-ring); }
+  .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a:focus-visible { outline-offset: 0; box-shadow: 0 0 0 4px var(--focus-halo); }
+}
 /* Native dialog has the same solid reading surface as React's Dialog/Sheet. */
 .tangle-native-dialog { max-width: min(32rem,calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; margin: auto; padding: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card)); color: hsl(var(--card-foreground)); }
 .tangle-native-dialog::backdrop { background: var(--scrim); }