@_linked/primitives 1.1.0 → 1.2.1

package/.gitattributes

@@ -0,0 +1 @@
+package-lock.json linguist-generated=true -diff merge=ours

package/.github/workflows/pr.yml

@@ -0,0 +1,18 @@
+name: PR
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  checks:
+    uses: linked-fw/.github/.github/workflows/pr.yml@v1
+    # The changeset reminder posts a PR comment. A reusable workflow only holds what its
+    # caller granted, and the org default is read-only.
+    permissions:
+      contents: read
+      pull-requests: write
+    with:
+      require-tests: false
+      run-e2e: false

package/.github/workflows/publish.yml

@@ -1,3 +1,8 @@
+# Calls the shared workflow in linked-fw/.github.
+#
+# This FILENAME is what npm's trusted-publisher check validates — not the shared workflow's.
+# Renaming this file invalidates this package's trusted publisher, and the only symptom is
+# that releases quietly start needing manual approval again.
 name: Publish
 
 on:
@@ -9,69 +14,17 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 jobs:
   release:
-    name: Publish Release
-    runs-on: ubuntu-latest
+    uses: linked-fw/.github/.github/workflows/publish.yml@v1
     permissions:
       contents: write
       pull-requests: 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
-      # App installed on this repo + org secrets RELEASE_APP_ID / RELEASE_APP_PRIVATE_KEY.
-      - name: Generate GitHub App token
-        id: app-token
-        uses: actions/create-github-app-token@v2
-        with:
-          app-id: ${{ secrets.RELEASE_APP_ID }}
-          private-key: ${{ secrets.RELEASE_APP_PRIVATE_KEY }}
-
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          token: ${{ steps.app-token.outputs.token }}
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22.16.0
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
-
-      - name: Build
-        run: npm run build
-
-      - name: Create release Pull Request or Publish
-        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 }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
-
-      # 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
-      # 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'
-        env:
-          GH_TOKEN: ${{ steps.app-token.outputs.token }}
-        run: |
-          pr=$(gh pr list --base main --head changeset-release/main --state open --json number --jq '.[0].number // empty')
-          if [ -z "$pr" ]; then echo "No open version PR (nothing to merge)."; exit 0; fi
-          for i in $(seq 1 40); do
-            if gh pr merge "$pr" --merge 2>/tmp/merge_err; then
-              echo "Merged version PR #$pr on attempt $i."
-              exit 0
-            fi
-            echo "Attempt $i/40: version PR #$pr not mergeable yet ($(tr -d '\n' < /tmp/merge_err)); waiting for the required check…"
-            sleep 15
-          done
-          echo "::warning::Version PR #$pr not merged after retries — merge it manually."
+      # Needed HERE as well as in the shared workflow: a reusable workflow cannot widen the
+      # permissions its caller was granted, and without this npm never gets an id-token and
+      # every release silently falls back to the approval queue.
+      id-token: write
+    # Named rather than `inherit`: `inherit` forwards everything this repo can see, which is
+    # how a community repo would end up forwarding a first-party token.
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+      RELEASE_APP_ID: ${{ secrets.RELEASE_APP_ID }}
+      RELEASE_APP_PRIVATE_KEY: ${{ secrets.RELEASE_APP_PRIVATE_KEY }}

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # @\_linked/primitives
 
+## 1.2.1
+
+### Patch Changes
+
+- [#24](https://github.com/linked-fw/primitives/pull/24) [`781aebc`](https://github.com/linked-fw/primitives/commit/781aebcdd83d3222acf9a00e54175687bb91b848) Thanks [@flyon](https://github.com/flyon)! - Declare npm as the package manager for this repo, convert the build scripts off `yarn`, and mark `package-lock.json` as a generated file.
+
+## 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

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/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;

package/lib/cjs/components/ImageThumb.js

@@ -0,0 +1,90 @@
+"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.InlineImageThumb = void 0;
+const react_1 = __importStar(require("react"));
+const ClassNames_1 = require("@_linked/react/utils/ClassNames");
+const ImageThumb_module_css_1 = __importDefault(require("./ImageThumb.module.css"));
+const ImageThumb = ({ src, size = 36, hoverSize = 280, alt = '', className = '', clickToEnlarge = true, }) => {
+    const [hover, setHover] = (0, react_1.useState)(false);
+    const [lightbox, setLightbox] = (0, react_1.useState)(false);
+    const [hoverPos, setHoverPos] = (0, react_1.useState)({
+        top: 0,
+        left: 0,
+    });
+    const thumbRef = (0, react_1.useRef)(null);
+    const handleMouseEnter = (0, react_1.useCallback)(() => {
+        if (thumbRef.current) {
+            const rect = thumbRef.current.getBoundingClientRect();
+            // Position the hover preview to the right of the thumbnail,
+            // but clamp so it doesn't overflow the viewport
+            const left = Math.min(rect.right + 8, window.innerWidth - hoverSize - 16);
+            const top = Math.max(8, Math.min(rect.top - hoverSize / 2 + size / 2, window.innerHeight - hoverSize - 16));
+            setHoverPos({ top, left });
+        }
+        setHover(true);
+    }, [hoverSize, size]);
+    const handleClick = (0, react_1.useCallback)((e) => {
+        if (clickToEnlarge) {
+            e.stopPropagation();
+            setHover(false);
+            setLightbox(true);
+        }
+    }, [clickToEnlarge]);
+    const closeLightbox = (0, react_1.useCallback)(() => {
+        setLightbox(false);
+    }, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", { className: (0, ClassNames_1.cl)(ImageThumb_module_css_1.default.root, className), onMouseEnter: handleMouseEnter, onMouseLeave: () => setHover(false) },
+            react_1.default.createElement("img", { ref: thumbRef, src: src, alt: alt, className: ImageThumb_module_css_1.default.thumb, style: { width: size, height: size }, onClick: handleClick, loading: "lazy" }),
+            hover && !lightbox && (react_1.default.createElement("div", { className: (0, ClassNames_1.cl)(ImageThumb_module_css_1.default.hoverPreview, hover && ImageThumb_module_css_1.default.visible), style: {
+                    top: hoverPos.top,
+                    left: hoverPos.left,
+                    width: hoverSize,
+                    height: hoverSize,
+                } },
+                react_1.default.createElement("img", { src: src, alt: alt, className: ImageThumb_module_css_1.default.hoverPreviewImage, style: { width: hoverSize, height: hoverSize } })))),
+        lightbox && (react_1.default.createElement("div", { className: ImageThumb_module_css_1.default.previewOverlay, onClick: closeLightbox },
+            react_1.default.createElement("div", { className: (0, ClassNames_1.cl)(ImageThumb_module_css_1.default.previewBackdrop, ImageThumb_module_css_1.default.visible) }),
+            react_1.default.createElement("img", { src: src, alt: alt, className: (0, ClassNames_1.cl)(ImageThumb_module_css_1.default.previewImage, ImageThumb_module_css_1.default.visible) })))));
+};
+/** Small inline thumbnail for use inside chips, badges, and dropdown options */
+const InlineImageThumb = ({ src, alt = '', }) => (react_1.default.createElement("img", { src: src, alt: alt, className: ImageThumb_module_css_1.default.inlineThumb, loading: "lazy" }));
+exports.InlineImageThumb = InlineImageThumb;
+exports.default = ImageThumb;
+//# sourceMappingURL=ImageThumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageThumb.js","sourceRoot":"","sources":["../../../src/components/ImageThumb.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,134 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+/* ============================================================================
+   ImageThumb.module.css
+
+   Thumbnail image with enlarged hover preview.
+   Uses semantic tokens from theme.css.
+   ============================================================================ */
+
+.root {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+/* === Thumbnail === */
+.thumb {
+  object-fit: cover;
+  border-radius: var(--radius-field);
+  border: 1px solid var(--surface-border);
+  cursor: pointer;
+  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
+  background-color: var(--section-bg);
+}
+
+.thumb:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transform: scale(1.05);
+}
+
+/* === Hover Preview Overlay === */
+.previewOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.previewBackdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: auto;
+}
+
+.previewBackdrop.visible {
+  opacity: 1;
+}
+
+.previewImage {
+  position: relative;
+  max-width: 80vw;
+  max-height: 80vh;
+  object-fit: contain;
+  border-radius: var(--radius-box);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+  z-index: 1;
+  opacity: 0;
+  transform: scale(0.92);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  pointer-events: auto;
+}
+
+.previewImage.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* === Hover tooltip preview (positioned near thumbnail) === */
+.hoverPreview {
+  position: fixed;
+  z-index: 10000;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  border-radius: var(--radius-box);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  background-color: var(--section-bg);
+}
+
+.hoverPreview.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.hoverPreviewImage {
+  display: block;
+  object-fit: cover;
+  border-radius: var(--radius-box);
+}
+
+/* === Dark mode adjustments === */
+[data-theme='dark'] .thumb {
+  border-color: var(--surface-border);
+}
+
+[data-theme='dark'] .previewBackdrop {
+  background: rgba(0, 0, 0, 0.6);
+}
+
+[data-theme='dark'] .hoverPreview {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+
+/* === Inline variant (used inside chips/badges) === */
+.inlineThumb {
+  width: 20px;
+  height: 20px;
+  object-fit: cover;
+  border-radius: var(--radius-selector, 3px);
+  border: 1px solid var(--surface-border);
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+/* === Reduced motion === */
+@media (prefers-reduced-motion: reduce) {
+  .thumb:hover {
+    transform: none;
+  }
+  .hoverPreview,
+  .previewImage,
+  .previewBackdrop {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+interface SkeletonLoaderProps {
+    width?: string | number;
+    height?: string | number;
+    borderRadius?: string | number;
+    className?: string;
+    lines?: number;
+    animated?: boolean;
+}
+export declare function SkeletonLoader({ width, height, borderRadius, className, lines, animated, }: SkeletonLoaderProps): React.JSX.Element;
+export declare function TableRowSkeleton({ columns }: {
+    columns?: number;
+}): React.JSX.Element;
+export default SkeletonLoader;