@vegastack/design 0.7.99 → 0.7.101

package/bin/verify-registry-item.mjs

@@ -64,6 +64,7 @@ import {
   writeFileSync,
 } from "node:fs";
 import { tmpdir } from "node:os";
+import { parseEnv } from "node:util";
 import { pathToFileURL } from "node:url";
 import { join, resolve, basename, relative, isAbsolute, sep } from "node:path";
 import { createHash } from "node:crypto";
@@ -71,6 +72,28 @@ import tsconfigPaths from "tsconfig-paths";
 
 const { loadConfig: loadTsconfigPaths } = tsconfigPaths;
 
+/** Load credential values only; checkout-local files never control trust anchors. */
+export function loadRegistryCredentials(cwd, env = process.env) {
+  const loaded = {};
+  for (const name of [".env", ".env.local"]) {
+    let contents;
+    try {
+      contents = readFileSync(join(cwd, name), "utf8");
+    } catch (error) {
+      if (error.code === "ENOENT") continue;
+      throw error;
+    }
+    const values = parseEnv(contents);
+    for (const key of ["CF_ACCESS_CLIENT_ID", "CF_ACCESS_CLIENT_SECRET"]) {
+      if (values[key] !== undefined) loaded[key] = values[key];
+    }
+  }
+  for (const [key, value] of Object.entries(loaded)) {
+    if (env[key] === undefined) env[key] = value;
+  }
+  return env;
+}
+
 // ── canonical item hash (INLINED from tooling/registry-hash.mjs — keep IDENTICAL) ──
 // Covers the WHOLE item (not just file content); meta.integrity is excluded so the hash
 // is self-describing and stable. The provenance header (`// @vegastack <name>@<version>
@@ -947,6 +970,7 @@ if (import.meta.url === pathToFileURL(process.argv[1] ?? "").href) {
       /\/$/,
       "",
     );
+    loadRegistryCredentials(process.cwd());
     const headers = requestHeaders();
 
     const tempDir = mkdtempSync(join(tmpdir(), "vegastack-verify-"));

package/dist/{chunk-4YF3V35A.js → chunk-R6IZOGT5.js}

@@ -134,14 +134,32 @@ var FLOATING = {
 };
 function mergeRefs(...refs) {
   return (node) => {
-    for (const ref of refs) {
-      if (ref == null) continue;
+    const cleanups = refs.map((ref) => {
+      if (ref == null) return void 0;
       if (typeof ref === "function") {
-        ref(node);
-      } else {
-        ref.current = node;
+        const cleanup = ref(node);
+        return typeof cleanup === "function" ? cleanup : () => ref(null);
       }
-    }
+      ref.current = node;
+      return () => {
+        ref.current = null;
+      };
+    });
+    let cleaned = false;
+    return () => {
+      if (cleaned) return;
+      cleaned = true;
+      const errors = [];
+      for (const cleanup of cleanups) {
+        try {
+          cleanup?.();
+        } catch (error) {
+          errors.push(error);
+        }
+      }
+      if (errors.length)
+        throw new AggregateError(errors, "Merged ref cleanup failed");
+    };
   };
 }
 

package/dist/create-animated-icon.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-4YF3V35A.js";
+} from "./chunk-R6IZOGT5.js";
 
 // src/icons/create-animated-icon.tsx
 import * as React from "react";

package/dist/icons/index.js

@@ -1,6 +1,6 @@
 import {
   cn
-} from "../chunk-4YF3V35A.js";
+} from "../chunk-R6IZOGT5.js";
 
 // src/icons/icon.tsx
 import "react";

package/dist/index.cjs

@@ -163,14 +163,32 @@ var FLOATING = {
 };
 function mergeRefs(...refs) {
   return (node) => {
-    for (const ref of refs) {
-      if (ref == null) continue;
+    const cleanups = refs.map((ref) => {
+      if (ref == null) return void 0;
       if (typeof ref === "function") {
-        ref(node);
-      } else {
-        ref.current = node;
+        const cleanup = ref(node);
+        return typeof cleanup === "function" ? cleanup : () => ref(null);
       }
-    }
+      ref.current = node;
+      return () => {
+        ref.current = null;
+      };
+    });
+    let cleaned = false;
+    return () => {
+      if (cleaned) return;
+      cleaned = true;
+      const errors = [];
+      for (const cleanup of cleanups) {
+        try {
+          cleanup?.();
+        } catch (error) {
+          errors.push(error);
+        }
+      }
+      if (errors.length)
+        throw new AggregateError(errors, "Merged ref cleanup failed");
+    };
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.d.cts

@@ -193,7 +193,7 @@ declare const FLOATING: {
  * (only ref objects the caller already holds), so it is server-safe like `cn`.
  *
  * **Not memoized.** Calling it produces a NEW function every time, and React detaches a
- * changed ref callback (calls it with `null`) and reattaches it on every render. Wrap the
+ * changed ref callback (runs its cleanup; legacy callbacks receive `null`) and reattaches it on every render. Wrap the
  * CALL at the call site when the inputs are stable:
  *
  * @example

package/dist/index.d.ts

@@ -193,7 +193,7 @@ declare const FLOATING: {
  * (only ref objects the caller already holds), so it is server-safe like `cn`.
  *
  * **Not memoized.** Calling it produces a NEW function every time, and React detaches a
- * changed ref callback (calls it with `null`) and reattaches it on every render. Wrap the
+ * changed ref callback (runs its cleanup; legacy callbacks receive `null`) and reattaches it on every render. Wrap the
  * CALL at the call site when the inputs are stable:
  *
  * @example

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   mergeRefs,
   prose,
   proseClassName
-} from "./chunk-4YF3V35A.js";
+} from "./chunk-R6IZOGT5.js";
 export {
   FLOATING,
   TIMINGS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegastack/design",
-  "version": "0.7.99",
+  "version": "0.7.101",
   "description": "VegaStack design system — cn utility, icon runtime, Tailwind v4 preset, and the vegastack-design CLI (tokens ship separately as @vegastack/design-tokens)",
   "license": "MIT",
   "repository": {
@@ -67,7 +67,7 @@
     "lint": "eslint . && node ../../tooling/design-lint.mjs src && pnpm run verify",
     "verify": "node ../../tooling/verify-preset-source.mjs",
     "typecheck": "tsc --noEmit",
-    "test": "node test/compare.test.mjs && node test/check-updates.test.mjs && node test/skills-install.test.mjs && node test/doctor.test.mjs"
+    "test": "node test/compare.test.mjs && node test/check-updates.test.mjs && node test/skills-install.test.mjs && node test/doctor.test.mjs && node --test test/merge-refs.test.mjs test/registry-credentials.test.mjs"
   },
   "dependencies": {
     "@vegastack/design-tokens": "^0.7.80",

package/skills/vegastack-consume/SKILL.md

@@ -18,15 +18,16 @@ the icon runtime, the Tailwind v4 preset, and the `vegastack-design` CLI.
 
 **Invoking the CLI.** The bin is `vegastack-design` but the package is `@vegastack/design`, so a
 bare `npx vegastack-design …` in a project that does not already have it installed would try to
-fetch an unrelated, unscoped package from npm. Use one of these instead — the first once it is a
-local dependency (it resolves from `node_modules` and never contacts the registry), the second for a
-standalone one-off:
+fetch an unrelated, unscoped package from npm. Use the installed CLI so the project's lockfile
+selects its approved version:
 
 ```bash
 pnpm exec vegastack-design <command>
-npx --package=@vegastack/design vegastack-design <command>
 ```
 
+A standalone invocation must explicitly pin an approved `@vegastack/design` version; do not
+resolve a different verifier version during the preflight/install/post-write sequence.
+
 `@vegastack/ui` is private and is never installed downstream — components arrive by copy-in.
 
 ## 2. Tailwind v4 CSS
@@ -52,12 +53,51 @@ inside the published builds — the icon runtime, and the compiled Toaster (its
 and status-tint classes live in `@vegastack/ui/dist`, and Tailwind has to be told to generate them).
 Your own application and component source is scanned by Tailwind as usual.
 
-## 3. Wrap the app root in the provider
+## 3. Configure registry access
+
+Components come from a private registry behind Cloudflare Access service tokens.
+
+If the project has no `components.json` yet, create one first — pick the **base** style, never
+`radix`, because VegaStack components are Base UI:
+
+```bash
+pnpm dlx shadcn@4.21.0 init --base base
+```
+
+Then add the registry block to `components.json`:
+
+```json
+{
+  "registries": {
+    "@vegastack": {
+      "url": "https://design.vegastack.com/r/{name}.json",
+      "headers": {
+        "CF-Access-Client-Id": "${CF_ACCESS_CLIENT_ID}",
+        "CF-Access-Client-Secret": "${CF_ACCESS_CLIENT_SECRET}"
+      }
+    }
+  }
+}
+```
+
+Store credentials in your secret manager or ignored `.env.local`. The installed verifier loads
+only `CF_ACCESS_CLIENT_ID` and `CF_ACCESS_CLIENT_SECRET` from `.env` then `.env.local`; an existing
+process value wins. Registry origin and signer overrides are accepted only from the operator's
+process environment, never a checkout-local dotenv file. Do not source the whole dotenv file.
+
+Configure this registry before the first provider/component add. Inspect before writing anything:
 
 ```bash
-npx shadcn@latest add @vegastack/provider
+pnpm dlx shadcn@4.21.0 add @vegastack/button --dry-run
 ```
 
+External and client projects are **tokenless** — components are copied in during development, and
+the shipped application holds zero VegaStack credentials.
+
+## 4. Wrap the app root in the provider
+
+Install `provider` using the complete fail-closed procedure in step 5 before adding this wrapper.
+
 This copies `VegaStackProvider` and `useVegaStackTheme` into your project, composing the `toast`
 Toaster item.
 
@@ -80,8 +120,7 @@ putting `className="isolate"` on your `<body>` yourself. Without it, popups can
 chrome or mis-position in stacking-context-heavy layouts.
 
 **Stop iOS focus zoom.** iOS Safari zooms into any focused field under 16px. `base.css` renders
-text-entry controls at 16px on touch pointers, and the viewport should cap the scale as well, which
-stops focus zoom while pinch-zoom keeps working on iOS. In Next.js, in the root layout:
+text-entry controls at 16px on touch pointers. Keep zoom unrestricted; do not add a maximum-scale cap. In Next.js, in the root layout:
 
 ```tsx
 import type { Viewport } from "next";
@@ -89,46 +128,9 @@ import type { Viewport } from "next";
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
-  maximumScale: 1,
 };
 ```
 
-## 4. Configure registry access
-
-Components come from a private registry behind Cloudflare Access service tokens.
-
-If the project has no `components.json` yet, create one first — pick the **base** style, never
-`radix`, because VegaStack components are Base UI:
-
-```bash
-pnpm dlx shadcn@latest init --base base
-```
-
-Then add the registry block to `components.json`:
-
-```json
-{
-  "registries": {
-    "@vegastack": {
-      "url": "https://design.vegastack.com/r/{name}.json",
-      "headers": {
-        "CF-Access-Client-Id": "${CF_ACCESS_CLIENT_ID}",
-        "CF-Access-Client-Secret": "${CF_ACCESS_CLIENT_SECRET}"
-      }
-    }
-  }
-}
-```
-
-Put the credentials in `.env.local`. Inspect before writing anything:
-
-```bash
-pnpm dlx shadcn@latest add @vegastack/button --dry-run
-```
-
-External and client projects are **tokenless** — components are copied in during development, and
-the shipped application holds zero VegaStack credentials.
-
 ## 5. Add a component (fail-closed, three steps)
 
 This is the only safe way to add a component. Do not collapse it to a bare `shadcn add`: that leaves
@@ -140,16 +142,16 @@ a time-of-check/time-of-use gap, because `shadcn add` re-fetches the item after
 DIR="$(mktemp -d "${TMPDIR:-/tmp}/vegastack-verify.XXXXXX")"; ITEM="$DIR/button.json"
 
 # 1) PRE-WRITE — verify signature + hash, and save the trusted bytes for step 3.
-npx --package=@vegastack/design vegastack-design verify --save "$ITEM" button
+pnpm exec vegastack-design verify --save "$ITEM" button
 
 # Retain the verified digest in the parent shell BEFORE shadcn or dependency code runs.
 EXPECTED="$(node -e 'process.stdout.write(JSON.parse(require("node:fs").readFileSync(process.argv[1],"utf8")).meta.integrity)' "$ITEM")"
 
 # 2) COPY-IN — shadcn writes the files, rewriting import aliases per your components.json.
-pnpm dlx shadcn@latest add @vegastack/button
+pnpm dlx shadcn@4.21.0 add @vegastack/button
 
 # 3) POST-WRITE — prove the copied files match the SAVED item. Exits 1 on any tampering.
-npx --package=@vegastack/design vegastack-design verify \
+pnpm exec vegastack-design verify \
   --post-write --item "$ITEM" --expected-integrity "$EXPECTED" --target-dir .
 ```
 
@@ -176,7 +178,7 @@ Never override a `--color-*` variable — that is the build-inlined bridge, not
 Copy-in means no automatic updates.
 
 ```bash
-npx --package=@vegastack/design vegastack-design check-updates    # ⬆ update · ≈ drift · ✓ up to date
+pnpm exec vegastack-design check-updates    # ⬆ update · ≈ drift · ✓ up to date
 ```
 
 Then per stale component: `shadcn add @vegastack/<name> --diff` to review, `--overwrite` to apply,
@@ -190,7 +192,7 @@ Add the Renovate preset `github>VegaStack/renovate-config` so additive token bum
 If this project's agents do not already have them:
 
 ```bash
-npx --package=@vegastack/design vegastack-design skills install
+pnpm exec vegastack-design skills install
 ```
 
 Writes the public VegaStack skills into `.claude/skills/` and `.agents/skills/`.

package/skills/vegastack-design-audit/SKILL.md

@@ -83,7 +83,7 @@ rg -n '(focus|focus-visible|focus-within|data-focused|popup-open)[^ "]*:border-(
 - **a focus border** — a border colour under a focus or open-popup variant (`focus:border-ring/70`,
   `focus-within:border-ring`, `data-popup-open:border-input`, `not-focus:aria-invalid:…`) in app
   code. A border never changes colour on focus or while active (FOC-14) — the DS's own text-entry
-  components are the one exception (a subtle `border-ring/40` focus border, no fill) and carry it
+  components are the one exception (a subtle `border-ring/50` focus border, no fill) and carry it
   themselves; only an invalid field's destructive border shows, in every state. **error**
 - a status FILL used as a text ink on that family's own tint — `bg-destructive/10 text-destructive`
   measures 3.98:1. The readable half is `text-destructive-text`. **error**

package/skills/vegastack-design-system/SKILL.md

@@ -79,12 +79,10 @@ link` (upstream's set, verbatim). `destructive` is a soft tint, not a solid red
   need a search field (it is the preset `country-select` and `region-select` are built from — reach
   for it before composing `combobox` by hand); **`combobox`** directly only for free text,
   suggestions or multi-select chips.
-- **One view-switch rule.** A form value is a **`radio-group`**. An immediate view or scope switch
-  over the same content (Mine | Team, All | Unread, Grid | List) is a single-select
-  **`toggle-group`** that always keeps one item pressed — `deselectable={false}` — with
-  `spacing={0}` for 2–5 options inline (`wrap` when they can outgrow the row). Swapping in-page regions is
-  **`tabs`**; moving between URLs is navigation — links, not `tabs` (a route-tabs recipe is
-  not shipped yet).
+- **One view-switch rule.** Form choices use `radio-group`; toolbar scope switches use default
+  `Tabs`, and Grid | List | Board uses `ViewToggle` (which composes Tabs). `ToggleGroup` is for
+  pressed action/value choices. URL navigation uses links and the route-tabs recipe.
+
 - **Empty is tiered** — nothing yet, no matches ("Clear filters"), couldn't load (`role="alert"`,
   "Try again"), blocked. Pick the tier from the empty-state foundation
   (<https://design.vegastack.com/docs/foundations/empty-states>); never leave a region blank.
@@ -243,7 +241,7 @@ on shadcn's `neutral` base. Always use the utility, never a raw value.
 | Fill     | `bg-primary` (solid action, every checked control) · `bg-secondary` (soft) · `bg-muted` (well, track, skeleton) · `bg-accent` (hover)                                                                               |
 | Text     | `text-foreground` · `text-muted-foreground` · `text-{primary,secondary,accent,card,popover}-foreground`                                                                                                             |
 | Status   | `bg-{destructive,success,warning,info}` · `-foreground` (ink ON the fill) · `-text` (ink on the page or on the family's own tint)                                                                                   |
-| Border   | `border-border` · `border-input` — there are no rings; focus is a global background tint (Tabs alone keep a ring)                                                                                                   |
+| Border   | `border-border` · `border-input` — there are no rings; focus is a global background tint (Tabs included)                                                                                                            |
 | Radius   | `rounded-{sm,md,lg,xl,2xl}` — all derived from the single `--radius`                                                                                                                                                |
 | Type     | Tailwind's own `text-{xs…7xl}`. `text-sm` is 14px, `text-base` is 16px. Line-height and letter-spacing above `text-base` come from the theme — never write `tracking-*`, an arbitrary `text-[13px]`, or `uppercase` |
 | Font     | `font-sans` `font-mono` `font-serif` `font-heading`                                                                                                                                                                 |
@@ -290,10 +288,10 @@ heading down `n` levels (capped at h6) so the outline never skips back up.
 
 **Markdown is read with `MarkdownView` and edited with `TextEdit format="markdown"`** — never a
 textarea, a local prose class, or a hand-rolled editor. For in-place editing, swap the view for
-`<TextEdit format="markdown" variant="ghost" onSave onCancel />`: ghost is borderless with no inset,
-so the text does not move, and Save/Cancel sit at the toolbar's end (⌘/Ctrl+Enter saves, Esc
-cancels). Pick `toolbar="minimal"` for comments, `"standard"` (default) for notes and summaries,
-`"full"` for documents; the schema follows the toolbar. Keep `variant="outline"` inside forms.
+`<TextEdit format="markdown" variant="document" onCommit={save} />` for inline document editing.
+Use `variant="boxed"` inside forms and `variant="composer"` for submission composers.
+Commit through `onCommit`; `onRevert` observes a revert. The editor owns its contextual toolbar;
+there are no `toolbar`, `onSave` or `onCancel` props.
 
 `muted`, `accent` and `secondary` share one value in this base, and all three are kept: name the one
 whose ROLE you mean, so a consumer can retune one without moving the others.
@@ -357,7 +355,11 @@ contract.
   players); schedules → `formatDateRange` / `formatTimeOfDay`; feed/inbox headers → `groupByDay`.
   Pass the viewer's `timeZone` (the `tz` cookie via `getTimeZone(cookie, orgZone)` on the server,
   `useTimeZone()` on the client; render `TimeZoneScript` + `TimeZoneProvider` once at the root).
-  API/JSON output stays ISO.
+  Pass a serialized request timestamp as `TimeZoneProvider.referenceNow`; groups, due badges and
+  picker presets read the same live epoch clock via `useDateTimeNow()` from `relative-time`.
+  `DateTime` and `DueLabel` share it too; explicit `DateTime.options.now` stays controlled.
+  It is `undefined` during SSR without that reference; render affected date content pending rather
+  than reading a separate render-time clock. API/JSON output stays ISO.
 
 ## Do / Don't
 

package/skills/vegastack-design-system/references/components.md

@@ -3,7 +3,7 @@
 <!-- GENERATED — do not hand-edit. Regenerated from the design system's component contract,
      which is the authority for membership and counts. -->
 
-**145 components**, plus 467 animated-icon items, 13 hooks (`use-animation-replay`, `use-announcer`, `use-async-search`, `use-drag-reorder`, `use-file-drop`, `use-inline-edit`, `use-list-nav`, `use-media-query`, `use-mobile`, `use-modal-inert`, `use-overflow`, `use-platform`, `use-tabs-swipe`), 14 starter blocks (`app-shell-01`, `board-01`, `issue-detail-01`, `page-editor-01`, `command-search-01`, `list-page-01`, `library-01`, `login-01`, `notifications-01`, `review-split-01`, `settings-01`, `settings-02`, `status-pages-01`, `share-01`), 68 chart blocks across 7 families, and 11 data libs (`code-highlight`, `date-time`, `geo-data`, `emoji-data`, `drag-item`, `text-anchor`, `text-anchor-doc`, `file-kind`, `media-probe`, `page-layout`, `tile-overlay`) — 718 registry items in total.
+**149 components**, plus 467 animated-icon items, 13 hooks (`use-animation-replay`, `use-announcer`, `use-async-search`, `use-drag-reorder`, `use-file-drop`, `use-inline-edit`, `use-list-nav`, `use-media-query`, `use-mobile`, `use-modal-inert`, `use-overflow`, `use-platform`, `use-tabs-swipe`), 14 starter blocks (`app-shell-01`, `board-01`, `issue-detail-01`, `page-editor-01`, `command-search-01`, `list-page-01`, `library-01`, `login-01`, `notifications-01`, `review-split-01`, `settings-01`, `settings-02`, `status-pages-01`, `share-01`), 68 chart blocks across 7 families, and 11 data libs (`code-highlight`, `date-time`, `geo-data`, `emoji-data`, `drag-item`, `text-anchor`, `text-anchor-doc`, `file-kind`, `media-probe`, `page-layout`, `tile-overlay`) — 722 registry items in total.
 
 Install any of them with `shadcn add @vegastack/<name>`. Animated icons install as
 `@vegastack/icon-<name>`; the bare name is reserved for components, so a component whose name
@@ -23,6 +23,7 @@ starts with `icon-` is a component and never an icon.
 - **`calendar`** — A date-field calendar on React DayPicker — single, multiple and range selection.
 - **`checkbox`** — A binary (or indeterminate) toggle on Base UI Checkbox, with a 24px invisible hit area (A11Y-2).
 - **`chip-input`** — Free-token entry field — Enter/comma/paste commits chips, Backspace removes, per-chip validation marks invalid entries instead of dropping them. InputGroup field chrome + real Tag chips.
+- **`choice-card`** — A radio option drawn as a card — icon, title, description and the radio — in a group that is two across from @sm and stacked below. A thin wrapper over the Field choice-card pattern.
 - **`color-picker`** — A swatch-triggered popover presenting a grid of preset colors — pick one, fire onValueChange, mark the selection.
 - **`combobox`** — A filterable listbox behind a text input — grouped items, an announced empty state and a chips mode.
 - **`country-select`** — A searchable country picker returning the ISO 3166-1 alpha-2 code, with flag + name. A thin wrapper over SearchableSelect fed by the geo-data item.
@@ -47,6 +48,7 @@ starts with `icon-` is a component and never an icon.
 - **`searchable-select`** — The Select-shaped Combobox preset: a full-width trigger, an in-panel search field, a tick on the selected row (matched by key, so async options tick too), a standard person option (name plus muted email, both searched) and an optional clear control. Single or multiple, controlled through value/onValueChange.
 - **`select`** — A dropdown for one value — trigger, grouped scrollable popup and item-aligned positioning.
 - **`slider`** — A number or range over a continuous track — horizontal or vertical, any number of thumbs.
+- **`space-picker`** — SpaceChip — a space as a quiet property chip (tile, name, chevron) — and SpacePicker, that chip opening a searchable list of spaces with My space first, a check on the current one and disabled rows that say why.
 - **`switch`** — An on/off toggle for instant settings — two sizes and a 24px invisible hit area (A11Y-2).
 - **`textarea`** — A styled native textarea that grows with its content; focus darkens its border subtly with an ease and paints no fill.
 
@@ -108,6 +110,7 @@ starts with `icon-` is a component and never an icon.
 
 ## Overlay
 
+- **`access-chip`** — How far one record reaches as one focusable chip: the space tile and name, a lock and Only invited, My space, or a space the viewer cannot see (someone's My space, a private space) — with a globe when published and the full sentence in a tooltip. Clicking opens Share.
 - **`alert-dialog`** — A modal that interrupts for a decision — an optional media slot, two sizes and an action/cancel footer.
 - **`context-menu`** — The same menu vocabulary opened by right-click, positioned at the pointer.
 - **`dialog`** — A modal overlay — backdrop, centred popup, a plain right-aligned footer and an optional close button; opens onto the first field or the popup, never the close ×.
@@ -117,6 +120,7 @@ starts with `icon-` is a component and never an icon.
 - **`panel-search`** — The sticky, box-free search row a filtering popup puts at the top of its panel (decision OVL-11) — shared by EmojiPicker and ShortcutOverlay.
 - **`permission-menu`** — An access level on a sharing row — a ghost trigger reading the level, a menu of levels with one-line descriptions and a check on the current one, an optional destructive Remove access, and a read-only text mode for built-in rows.
 - **`popover`** — An anchored, dismissible surface for secondary content, with a header, title and description.
+- **`responsive-dialog`** — One overlay API that is a centred Dialog from 768px up and a bottom Sheet with a drag handle and a safe-area footer below it — the same header, body and footer in both.
 - **`sheet`** — A panel that slides in from any edge — Dialog semantics with a side, a header and a footer; opens onto the first field, never the close ×; a left sheet can dock beside the sidebar rail (beside).
 - **`shortcut-overlay`** — The ?-triggered dialog listing keyboard shortcuts, rendered from a declaration registry (keys, label, category, when) — grouped, filterable, platform-aware via use-platform + Kbd.
 - **`tooltip`** — A floating label on hover or focus, portaled inside the theme scope (OVL-13).