@_linked/primitives 1.0.9 → 1.2.0

package/.github/workflows/publish.yml

@@ -14,6 +14,12 @@ jobs:
     permissions:
       contents: write
       pull-requests: write
+      # `npm stage publish --provenance` signs the tarball with a GitHub OIDC token, so the
+      # job needs to be able to mint one. This does NOT switch the package to OIDC trusted
+      # publishing — authentication is still the org npm token. It only lets npm attest where
+      # the tarball was built, which is worth having on a package a human is about to approve
+      # sight-unseen.
+      id-token: write
     steps:
       # Author the changesets "Version Packages" PR as the org release App (not the default
       # GITHUB_TOKEN) so its CI runs without a manual "Approve and run" gate. Requires the org
@@ -36,31 +42,92 @@ jobs:
           node-version: 22.16.0
           registry-url: 'https://registry.npmjs.org'
 
+      # `npm stage` landed in CLI 11.15.0; Node 22.16 ships npm 10.x, so the bundled one
+      # cannot stage. Pinned rather than `@latest` so a future npm release cannot change how
+      # releases behave without a commit here.
+      - name: Use an npm that can stage
+        run: npm i -g npm@^11.15.0
+
       - name: Install dependencies
         run: npm ci --legacy-peer-deps
 
       - name: Build
         run: npm run build
 
-      - name: Create release Pull Request or Publish
+      # No `publish:` — changesets only opens/updates the version PR here. Publishing is the
+      # step below, because `changeset publish` shells out to `npm publish`, which a
+      # stage-only token cannot do (changesets/changesets#2025 is open for first-class
+      # support). Splitting them keeps changesets doing what it is good at — versions and
+      # changelogs — and leaves the registry call to us.
+      - name: Create release Pull Request
         id: changesets
         uses: changesets/action@v1
         with:
-          publish: npx changeset publish
           title: 'chore: release'
           commit: 'chore: release'
         env:
           GITHUB_TOKEN: ${{ steps.app-token.outputs.token }}
+
+      # Stage the version for a human to approve.
+      #
+      # A staged version is uploaded but NOT public: a maintainer reviews it and approves with
+      # 2FA, from the Staged Packages tab in the npm user menu or `npm stage approve`. That is
+      # the point — every release keeps a proof-of-presence step even though CI is
+      # unattended — and it is why the org token is scoped "read and write (stage only)".
+      #
+      # Idempotent: this workflow runs on every push to main, including the merge of the
+      # version PR and any later commit, so it must do nothing when the version is already on
+      # the registry or already sitting in the queue.
+      - name: Stage the release for approval
+        if: steps.changesets.outputs.hasChangesets != 'true'
+        env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+        run: |
+          set -euo pipefail
+          name=$(node -p "require('./package.json').name")
+          version=$(node -p "require('./package.json').version")
+          private=$(node -p "require('./package.json').private === true")
+          if [ "$private" = "true" ]; then
+            echo "$name is private — nothing to publish."; exit 0
+          fi
+
+          if npm view "$name@$version" version >/dev/null 2>&1; then
+            echo "$name@$version is already on the registry — nothing to do."
+            exit 0
+          fi
+
+          if npm stage list "$name" 2>/dev/null | grep -q "$version"; then
+            echo "$name@$version is already staged and waiting for approval."
+            exit 0
+          fi
+
+          echo "Staging $name@$version…"
+          npm stage publish --access public --provenance
+
+          {
+            echo "### 📦 \`$name@$version\` is staged, not published"
+            echo
+            echo "It is uploaded and held for review. **Approve it to make it public:**"
+            echo
+            echo "- **CLI:** \`npm stage approve $name@$version\`"
+            echo "- **Web:** [npmjs.com](https://www.npmjs.com) → your avatar → **Staged"
+            echo "  Packages** → **Approve**. The button stays disabled until npm has"
+            echo "  finished scanning the tarball; the page refreshes every minute."
+            echo
+            echo "Both prompt for 2FA. Until then \`npm install $name\` still resolves"
+            echo "\`$(npm view "$name" version 2>/dev/null || echo 'nothing')\`."
+          } >> "$GITHUB_STEP_SUMMARY"
+
+          echo "::notice title=Approval needed::$name@$version is staged. Run: npm stage approve $name@$version — or approve it from Staged Packages in the npm user menu."
 
-      # When changesets opened/updated the version PR (rather than publishing), merge it so the
-      # release ships without a manual click. App token → the merge's push re-triggers this
-      # workflow, which then runs `changeset publish`. DIRECT-merge (not `--auto`): GitHub
+      # When changesets opened/updated the version PR, merge it so the release reaches the
+      # staging queue without a manual click. App token → the merge's push re-triggers this
+      # workflow, which then stages. DIRECT-merge (not `--auto`): GitHub
       # auto-merge ignores branch-protection review-bypass allowances; main is check-only so a
       # direct merge lands once the required check is green — retry until then.
-      - name: Merge the version PR to publish
-        if: steps.changesets.outputs.hasChangesets == 'true' && steps.changesets.outputs.published != 'true'
+      - name: Merge the version PR to stage the release
+        if: steps.changesets.outputs.hasChangesets == 'true'
         env:
           GH_TOKEN: ${{ steps.app-token.outputs.token }}
         run: |

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @\_linked/primitives
 
+## 1.2.0
+
+### Minor Changes
+
+- [#15](https://github.com/linked-cm/primitives/pull/15) [`cf860da`](https://github.com/linked-cm/primitives/commit/cf860da7a9df9462e7939fe1fcd430ab582152c0) Thanks [@flyon](https://github.com/flyon)! - Absorb four components that had been living inside an application, and replace the
+  hand-rolled confirm dialog with a composition over `AlertDialog`.
+
+  **`Spinner` is superseded.** The version here was twelve lines with one prop. The replacement
+  adds size variants, `prefers-reduced-motion` support, a configurable `aria-label`, and draws
+  the ring as an inner element so a flex parent cannot distort it into an ellipse. Three
+  differences worth knowing, none of which affects a caller that renders `<Spinner />`:
+
+  - `active={false}` now renders **nothing** rather than an element with `aria-busy="false"`.
+    A spinner in a scroll sentinel must not reserve space when idle, and `active` had no visual
+    effect before — `.active` was never defined in the CSS. (It also emitted a class literally
+    named `false`.)
+  - The ring is an inner `<span>`, so the border is no longer on the container. Consumer CSS
+    targeting the container's `border` needs updating; size still comes from the container.
+  - `--spinner-border-width` defaults to 2px rather than 4px, and the animation to 0.7s rather
+    than 1s. Every `--spinner-*` variable still works, so a consumer that themed it keeps its
+    theme.
+
+  **`ConfirmDialog` is new, and is a composition over the Radix `AlertDialog` already here.** It
+  replaces a hand-rolled `createPortal` implementation that had no focus trap, no escape
+  handling, no `aria-modal` and no focus restoration — the worst possible component to get
+  wrong, since its only job is guarding a destructive action. `tone="danger"` reads the
+  `--intent-danger-*` family rather than taking a class name, which is what the previous version
+  did by exporting its own CSS-module object.
+
+  **`SkeletonLoader`** and **`ImageThumb`** are new; neither had an equivalent here.
+
+  **`motion`** (new export) carries the animation presets — variants, transitions, and
+  `useReducedMotion`. Typed against `framer-motion` but importing nothing from it at runtime:
+  every export is a plain object, so `framer-motion` is an **optional** peer and a consumer that
+  does not animate never installs it.
+
+  The colours these bring are all expressed as `--<component>-*` variables falling back to
+  semantic tokens, per the library contract; none defines a raw colour.
+
+## 1.1.1
+
+### Patch Changes
+
+- [#13](https://github.com/linked-cm/primitives/pull/13) [`d23b948`](https://github.com/linked-cm/primitives/commit/d23b948f28a2f552e9b40230cc8cec3b48336f6a) Thanks [@flyon](https://github.com/flyon)! - Add a README stating what this library is, and what belongs in it.
+
+  The invariant was already held by every component in the package but written down nowhere:
+  a headless behaviour source, a CSS module reading `@_linked/css` tokens, and no knowledge of
+  data, shapes, or any particular application. The package description said only "a UI library
+  based on Radix UI", which undersells it and is not quite true — `Command` and `MultiSelect`
+  are cmdk, `Drawer` is vaul, and seven components are hand-written.
+
+  Stating it matters because the question this package keeps getting asked is "does X belong
+  here?", and without an answer components get copied instead of shared. The README gives the
+  three-question test and shows where the neighbouring layers sit.
+
+## 1.1.0
+
+### Minor Changes
+
+- [#11](https://github.com/linked-cm/primitives/pull/11) [`85deea9`](https://github.com/linked-cm/primitives/commit/85deea9406d9a5c655427d9302e015c334799691) Thanks [@flyon](https://github.com/flyon)! - Add the `Badge` primitive — badge, tag, chip and pill in one component, with the
+  variant and size vocabulary the rest of the library uses.
+
+  Also forwards `aria-label` and `aria-disabled` to the single thumb in `Slider`, so a
+  one-thumb slider is announced correctly by screen readers.
+
 ## 1.0.9
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,62 @@
+# `@_linked/primitives`
+
+A UI component library: a headless behaviour source, a CSS module, and nothing else.
+
+## What belongs here
+
+Every component in this package is three things and no more:
+
+1. **A headless behaviour source** — [Radix UI](https://www.radix-ui.com) for most of them,
+   [cmdk](https://cmdk.paco.me) for `Command` and `MultiSelect`, [vaul](https://vaul.emilkowal.ski)
+   for `Drawer`, or hand-written where none of those has an answer (`Input`, `Textarea`,
+   `Heading`, `Text`, `Spinner`).
+2. **A CSS module** that reads design tokens from
+   [`@_linked/css`](https://www.npmjs.com/package/@_linked/css) and defines no colours,
+   spacing or radii of its own.
+3. **No knowledge of data, of shapes, or of any particular application.**
+
+That third point is the one that decides whether something belongs here. Three questions,
+and a component only qualifies if the answer to all three is no:
+
+- Does it read or write data?
+- Does it know what a SHACL shape is?
+- Does it know the vocabulary of one specific product — statuses, verification levels,
+  domain-specific badge variants?
+
+A component that needs any of those belongs a layer up. Something that renders *any* shape
+belongs in the shape-driven layer; something that renders *one product's* concepts belongs
+in that product.
+
+## Where it sits
+
+| Layer | Package | Knows about |
+|---|---|---|
+| Design tokens | `@_linked/css` | nothing — CSS custom properties only |
+| **Headless components** | **`@_linked/primitives`** | **the DOM and the tokens** |
+| Data binding | `@_linked/react` | shapes and queries; ships no components |
+| Shape-driven UI | `@_linked/ui` | how to render an arbitrary shape |
+| Product surfaces | the application | its own domain vocabulary |
+
+The layering is what keeps the same component from being written three times. When a
+component has no stated home, it gets copied — and then the copies drift.
+
+## Theming
+
+Components never hard-code a value. Each reads a component-scoped variable that falls back
+to a semantic token:
+
+```css
+.Root {
+  background: var(--dialog-content-bg, var(--modal-bg));
+}
+```
+
+So a component renders sensibly with only `@_linked/css` imported, an application re-skins
+it by setting the semantic token, and a single instance can be overridden by setting the
+component-scoped one. See [`@_linked/css`'s styling guide](../css/docs/styling-and-themes.md)
+for the token vocabulary and the required import order.
+
+## Authoring
+
+See `docs/component-authoring-guide.md` in the workspace root for slot naming, the
+token-fallback pattern, and the semantic mapping table.

package/lib/cjs/components/Badge.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+/**
+ * Badge — a small status/metadata label (badge, tag, chip, pill).
+ *
+ * One primitive, many looks: every axis is an independent prop so surfaces can
+ * swap variation without new components —
+ *
+ *   variant  solid | soft | outline | ghost      fill strength
+ *   color    neutral | primary | success | warning | danger | info
+ *   size     small | medium | large
+ *   shape    pill | rounded
+ *   dot      leading status dot in the badge color
+ *   asChild  render as the child element (a link, a button) via Radix Slot,
+ *            so an interactive badge keeps real semantics and focus behavior
+ *
+ * Theming follows the library contract: the component consumes `--badge-*`
+ * variables with working fallbacks, so it renders sensibly out of the box and
+ * apps re-skin it from their theme without touching the component.
+ */
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    asChild?: boolean;
+    variant?: 'solid' | 'soft' | 'outline' | 'ghost';
+    color?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    size?: 'small' | 'medium' | 'large';
+    shape?: 'pill' | 'rounded';
+    /** Leading status dot in the badge color. */
+    dot?: boolean;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { Badge };

package/lib/cjs/components/Badge.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+const React = __importStar(require("react"));
+const Badge_module_css_1 = __importDefault(require("./Badge.module.css"));
+const ClassNames_1 = require("@_linked/react/utils/ClassNames");
+const react_slot_1 = require("@radix-ui/react-slot");
+const Badge = React.forwardRef((_a, ref) => {
+    var { className, variant = 'soft', color = 'neutral', size = 'medium', shape = 'pill', dot = false, asChild = false, children } = _a, props = __rest(_a, ["className", "variant", "color", "size", "shape", "dot", "asChild", "children"]);
+    const Comp = asChild ? react_slot_1.Slot : 'span';
+    return (React.createElement(Comp, Object.assign({ className: (0, ClassNames_1.cl)(Badge_module_css_1.default.Root, Badge_module_css_1.default[variant], Badge_module_css_1.default[color], Badge_module_css_1.default[size], Badge_module_css_1.default[shape], className), ref: ref }, props), asChild ? (children) : (React.createElement(React.Fragment, null,
+        dot && React.createElement("span", { className: Badge_module_css_1.default.dot, "aria-hidden": true }),
+        children))));
+});
+exports.Badge = Badge;
+Badge.displayName = 'Badge';
+//# sourceMappingURL=Badge.js.map

package/lib/cjs/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,0EAAuC;AACvC,gEAAqD;AACrD,qDAA4C;AA8B5C,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,MAAM,EACd,GAAG,GAAG,KAAK,EACX,OAAO,GAAG,KAAK,EACf,QAAQ,OAET,EADI,KAAK,cATV,gFAUC,CADS;IAIV,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAErC,OAAO,CACL,oBAAC,IAAI,kBACH,SAAS,EAAE,IAAA,eAAE,EACX,0BAAK,CAAC,IAAI,EACV,0BAAK,CAAC,OAAO,CAAC,EACd,0BAAK,CAAC,KAAK,CAAC,EACZ,0BAAK,CAAC,IAAI,CAAC,EACX,0BAAK,CAAC,KAAK,CAAC,EACZ,SAAS,CACV,EACD,GAAG,EAAE,GAAG,IACJ,KAAK,GAER,OAAO,CAAC,CAAC,CAAC,CACT,QAAQ,CACT,CAAC,CAAC,CAAC,CACF;QACG,GAAG,IAAI,8BAAM,SAAS,EAAE,0BAAK,CAAC,GAAG,wBAAgB;QACjD,QAAQ,CACR,CACJ,CACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,sBAAK;AAFd,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/lib/cjs/components/Badge.module.css

@@ -0,0 +1,89 @@
+/* Badge — consumes `--badge-*` semantic variables with working fallbacks, so it
+   renders out of the box and apps re-skin it from their theme (same contract as
+   Button/Input: the component names the tokens, the app supplies them). */
+
+.Root {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  border: solid 1px transparent;
+  gap: var(--badge-gap, 0.3em);
+  font-family: var(--badge-font-family, inherit);
+  font-weight: var(--badge-font-weight, 500);
+  line-height: var(--badge-line-height, 1.2);
+
+  /* Per-color base; every visual below derives from this one custom property,
+     which is what keeps the variant × color matrix to two small class sets. */
+  --_badge-color: var(--badge-color-neutral, #64748b);
+}
+
+/* ── color ─────────────────────────────────────────────────────────────── */
+.neutral { --_badge-color: var(--badge-color-neutral, #64748b); }
+.primary { --_badge-color: var(--badge-color-primary, var(--primary, #4f46e5)); }
+.success { --_badge-color: var(--badge-color-success, #15803d); }
+.warning { --_badge-color: var(--badge-color-warning, #b45309); }
+.danger  { --_badge-color: var(--badge-color-danger, #b91c1c); }
+.info    { --_badge-color: var(--badge-color-info, #0369a1); }
+
+/* ── variant ───────────────────────────────────────────────────────────── */
+.solid {
+  background: var(--_badge-color);
+  color: var(--badge-solid-foreground, #fff);
+}
+.soft {
+  background: color-mix(in oklch, var(--_badge-color) 12%, transparent);
+  color: var(--_badge-color);
+}
+.outline {
+  border-color: color-mix(in oklch, var(--_badge-color) 45%, transparent);
+  color: var(--_badge-color);
+}
+.ghost {
+  color: var(--_badge-color);
+}
+
+/* ── size ──────────────────────────────────────────────────────────────── */
+.small {
+  font-size: var(--badge-font-size-sm, 0.6875rem);
+  padding: var(--badge-padding-y-sm, 0.0625rem) var(--badge-padding-x-sm, 0.375rem);
+}
+.medium {
+  font-size: var(--badge-font-size, 0.75rem);
+  padding: var(--badge-padding-y, 0.125rem) var(--badge-padding-x, 0.5rem);
+}
+.large {
+  font-size: var(--badge-font-size-lg, 0.8125rem);
+  padding: var(--badge-padding-y-lg, 0.1875rem) var(--badge-padding-x-lg, 0.625rem);
+}
+
+/* ── shape ─────────────────────────────────────────────────────────────── */
+.pill { border-radius: var(--badge-radius-pill, 999px); }
+.rounded { border-radius: var(--badge-radius, var(--control-radius, 0.375rem)); }
+
+/* ── dot ───────────────────────────────────────────────────────────────── */
+.dot {
+  width: 0.375em;
+  height: 0.375em;
+  border-radius: 999px;
+  background: currentColor;
+  flex: none;
+}
+
+/* Interactive badges (asChild over a link/button) get hover/focus affordance
+   without imposing it on static ones. */
+a.Root,
+button.Root {
+  cursor: pointer;
+  transition: var(--transition-fast, background-color 120ms ease);
+  text-decoration: none;
+}
+a.Root:hover,
+button.Root:hover {
+  filter: brightness(0.95);
+}
+a.Root:focus-visible,
+button.Root:focus-visible {
+  outline: 2px solid color-mix(in oklch, var(--_badge-color) 45%, transparent);
+  outline-offset: 1px;
+}

package/lib/cjs/components/Command.d.ts

@@ -27,7 +27,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.D
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -53,7 +53,7 @@ declare const Group: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -71,7 +71,7 @@ declare const Item: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -108,7 +108,7 @@ export declare const Command: {
         ref?: React.Ref<HTMLInputElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
         value?: string;
         onValueChange?: (search: string) => void;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -134,7 +134,7 @@ export declare const Command: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
         heading?: React.ReactNode;
         value?: string;
         forceMount?: boolean;
@@ -145,7 +145,7 @@ export declare const Command: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
         disabled?: boolean;
         onSelect?: (value: string) => void;
         value?: string;

package/lib/cjs/components/ConfirmDialog.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm: () => void;
+    title: string;
+    message: React.ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+    /**
+     * `danger` for a destructive action. Not a colour — a statement about consequence, which
+     * is what `--intent-danger-*` exists to express.
+     */
+    tone?: 'default' | 'danger';
+    /** The confirm action is in flight: both buttons lock. */
+    isLoading?: boolean;
+    /** Withhold confirmation until the caller has something complete to confirm. */
+    confirmDisabled?: boolean;
+    /** Replaces the confirm label while loading. */
+    loadingContent?: React.ReactNode;
+    /** Wider layout, for multi-column content such as an impact preview. */
+    wide?: boolean;
+    className?: string;
+}
+/**
+ * "Are you sure?" — a title, a message, and two buttons.
+ *
+ * A composition over `AlertDialog` rather than its own dialog. The hand-rolled version this
+ * replaces built its own portal and its own backdrop, and in doing so had no focus trap, no
+ * escape handling, no `aria-modal` and no restoration of focus on close — a confirmation
+ * step that a keyboard or screen-reader user could not reliably complete, which is the worst
+ * possible component to get wrong, since the whole point is guarding a destructive action.
+ *
+ * `alertdialog` semantics are the right ones here, not `dialog`: it interrupts, and it must
+ * not be dismissed by clicking away.
+ */
+export declare function ConfirmDialog({ open, onOpenChange, onConfirm, title, message, confirmText, cancelText, tone, isLoading, confirmDisabled, loadingContent, wide, className, }: ConfirmDialogProps): React.JSX.Element;

package/lib/cjs/components/ConfirmDialog.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmDialog = ConfirmDialog;
+const React = __importStar(require("react"));
+const ClassNames_1 = require("@_linked/react/utils/ClassNames");
+const AlertDialog_js_1 = require("./AlertDialog.js");
+const Button_js_1 = require("./Button.js");
+const ConfirmDialog_module_css_1 = __importDefault(require("./ConfirmDialog.module.css"));
+/**
+ * "Are you sure?" — a title, a message, and two buttons.
+ *
+ * A composition over `AlertDialog` rather than its own dialog. The hand-rolled version this
+ * replaces built its own portal and its own backdrop, and in doing so had no focus trap, no
+ * escape handling, no `aria-modal` and no restoration of focus on close — a confirmation
+ * step that a keyboard or screen-reader user could not reliably complete, which is the worst
+ * possible component to get wrong, since the whole point is guarding a destructive action.
+ *
+ * `alertdialog` semantics are the right ones here, not `dialog`: it interrupts, and it must
+ * not be dismissed by clicking away.
+ */
+function ConfirmDialog({ open, onOpenChange, onConfirm, title, message, confirmText = 'Confirm', cancelText = 'Cancel', tone = 'default', isLoading = false, confirmDisabled = false, loadingContent, wide = false, className, }) {
+    return (React.createElement(AlertDialog_js_1.AlertDialog.Root, { open: open, onOpenChange: onOpenChange },
+        React.createElement(AlertDialog_js_1.AlertDialog.Content, { className: (0, ClassNames_1.cl)(ConfirmDialog_module_css_1.default.Content, wide && ConfirmDialog_module_css_1.default.wide, className) },
+            React.createElement(AlertDialog_js_1.AlertDialog.Header, null,
+                React.createElement(AlertDialog_js_1.AlertDialog.Title, null, title),
+                React.createElement(AlertDialog_js_1.AlertDialog.Description, { asChild: typeof message !== 'string' }, typeof message === 'string' ? message : React.createElement("div", null, message))),
+            React.createElement(AlertDialog_js_1.AlertDialog.Footer, null,
+                React.createElement(AlertDialog_js_1.AlertDialog.Cancel, { asChild: true },
+                    React.createElement(Button_js_1.Button, { variant: "ghost", disabled: isLoading }, cancelText)),
+                React.createElement(Button_js_1.Button, { className: (0, ClassNames_1.cl)(tone === 'danger' && ConfirmDialog_module_css_1.default.danger), onClick: onConfirm, disabled: isLoading || confirmDisabled }, isLoading && loadingContent ? loadingContent : confirmText)))));
+}
+//# sourceMappingURL=ConfirmDialog.js.map

package/lib/cjs/components/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,sCAiDC;AA3FD,6CAA+B;AAC/B,gEAAmD;AACnD,qDAA6C;AAC7C,2CAAmC;AACnC,0FAA+C;AA0B/C;;;;;;;;;;;GAWG;AACH,SAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,OAAO,EACP,WAAW,GAAG,SAAS,EACvB,UAAU,GAAG,QAAQ,EACrB,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,KAAK,EACvB,cAAc,EACd,IAAI,GAAG,KAAK,EACZ,SAAS,GACU;IACnB,OAAO,CACL,oBAAC,4BAAW,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY;QACtD,oBAAC,4BAAW,CAAC,OAAO,IAClB,SAAS,EAAE,IAAA,eAAE,EAAC,kCAAK,CAAC,OAAO,EAAE,IAAI,IAAI,kCAAK,CAAC,IAAI,EAAE,SAAS,CAAC;YAE3D,oBAAC,4BAAW,CAAC,MAAM;gBACjB,oBAAC,4BAAW,CAAC,KAAK,QAAE,KAAK,CAAqB;gBAI9C,oBAAC,4BAAW,CAAC,WAAW,IAAC,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,IAC1D,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,iCAAM,OAAO,CAAO,CACrC,CACP;YACrB,oBAAC,4BAAW,CAAC,MAAM;gBACjB,oBAAC,4BAAW,CAAC,MAAM,IAAC,OAAO;oBACzB,oBAAC,kBAAM,IAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,SAAS,IACxC,UAAU,CACJ,CACU;gBAIrB,oBAAC,kBAAM,IACL,SAAS,EAAE,IAAA,eAAE,EAAC,IAAI,KAAK,QAAQ,IAAI,kCAAK,CAAC,MAAM,CAAC,EAChD,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,IAAI,eAAe,IAErC,SAAS,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,WAAW,CACpD,CACU,CACD,CACL,CACpB,CAAC;AACJ,CAAC"}

package/lib/cjs/components/ConfirmDialog.module.css

@@ -0,0 +1,22 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Content {
+  max-width: var(--confirm-dialog-width, 32rem);
+}
+
+.wide {
+  max-width: var(--confirm-dialog-width-wide, 56rem);
+}
+
+/* Destructive confirmation. Reads the intent family rather than a red primitive, so an app
+   that restyles what "danger" looks like restyles this too. */
+.danger {
+  background: var(--confirm-dialog-danger-bg, var(--intent-danger-icon));
+  border-color: var(--confirm-dialog-danger-border, var(--intent-danger-border));
+  color: var(--confirm-dialog-danger-text, var(--color-white));
+}
+
+.danger:hover:not(:disabled) {
+  background: var(--confirm-dialog-danger-bg-hover, var(--intent-danger-text));
+}

package/lib/cjs/components/ImageThumb.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface ImageThumbProps {
+    src: string;
+    size?: number;
+    hoverSize?: number;
+    alt?: string;
+    className?: string;
+    /** If true, clicking opens a full-screen lightbox preview */
+    clickToEnlarge?: boolean;
+}
+declare const ImageThumb: React.FC<ImageThumbProps>;
+/** Small inline thumbnail for use inside chips, badges, and dropdown options */
+export declare const InlineImageThumb: React.FC<{
+    src: string;
+    alt?: string;
+}>;
+export default ImageThumb;