@_linked/primitives 1.1.0 → 1.2.1

package/lib/esm/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/esm/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/esm/components/ImageThumb.js

@@ -0,0 +1,50 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { cl } from '@_linked/react/utils/ClassNames';
+import style from './ImageThumb.module.css';
+const ImageThumb = ({ src, size = 36, hoverSize = 280, alt = '', className = '', clickToEnlarge = true, }) => {
+    const [hover, setHover] = useState(false);
+    const [lightbox, setLightbox] = useState(false);
+    const [hoverPos, setHoverPos] = useState({
+        top: 0,
+        left: 0,
+    });
+    const thumbRef = useRef(null);
+    const handleMouseEnter = 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 = useCallback((e) => {
+        if (clickToEnlarge) {
+            e.stopPropagation();
+            setHover(false);
+            setLightbox(true);
+        }
+    }, [clickToEnlarge]);
+    const closeLightbox = useCallback(() => {
+        setLightbox(false);
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: cl(style.root, className), onMouseEnter: handleMouseEnter, onMouseLeave: () => setHover(false) },
+            React.createElement("img", { ref: thumbRef, src: src, alt: alt, className: style.thumb, style: { width: size, height: size }, onClick: handleClick, loading: "lazy" }),
+            hover && !lightbox && (React.createElement("div", { className: cl(style.hoverPreview, hover && style.visible), style: {
+                    top: hoverPos.top,
+                    left: hoverPos.left,
+                    width: hoverSize,
+                    height: hoverSize,
+                } },
+                React.createElement("img", { src: src, alt: alt, className: style.hoverPreviewImage, style: { width: hoverSize, height: hoverSize } })))),
+        lightbox && (React.createElement("div", { className: style.previewOverlay, onClick: closeLightbox },
+            React.createElement("div", { className: cl(style.previewBackdrop, style.visible) }),
+            React.createElement("img", { src: src, alt: alt, className: cl(style.previewImage, style.visible) })))));
+};
+/** Small inline thumbnail for use inside chips, badges, and dropdown options */
+export const InlineImageThumb = ({ src, alt = '', }) => (React.createElement("img", { src: src, alt: alt, className: style.inlineThumb, loading: "lazy" }));
+export default ImageThumb;
+//# sourceMappingURL=ImageThumb.js.map

package/lib/esm/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/esm/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/esm/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;

package/lib/esm/components/SkeletonLoader.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import style from './SkeletonLoader.module.css';
+export function SkeletonLoader({ width = '100%', height = 18, borderRadius = 4, className = '', lines = 1, animated = true, }) {
+    if (lines === 1) {
+        return (React.createElement("div", { className: `${style.skeleton} ${animated ? style.animated : ''} ${className}`, style: {
+                width,
+                height,
+                borderRadius,
+            } }));
+    }
+    return (React.createElement("div", { className: className }, Array.from({ length: lines }, (_, index) => (React.createElement("div", { key: index, className: `${style.skeleton} ${animated ? style.animated : ''} ${index < lines - 1 ? style.marginBottom : ''}`, style: {
+            width: index === lines - 1 ? '60%' : '100%',
+            height,
+            borderRadius,
+        } })))));
+}
+// Table row skeleton component
+export function TableRowSkeleton({ columns = 5 }) {
+    return (React.createElement("tr", { className: style.tableRow },
+        React.createElement("td", { className: style.tableCell, style: { width: '48px' } },
+            React.createElement(SkeletonLoader, { width: 18, height: 18, borderRadius: 6 })),
+        Array.from({ length: columns }, (_, index) => (React.createElement("td", { key: index, className: style.tableCell },
+            React.createElement(SkeletonLoader, { width: "18vw", height: 18 })))),
+        React.createElement("td", { className: style.tableCell },
+            React.createElement("div", { className: style.actionButtons },
+                React.createElement(SkeletonLoader, { width: 22, height: 18, borderRadius: 6 }),
+                React.createElement(SkeletonLoader, { width: 22, height: 18, borderRadius: 6 }),
+                React.createElement(SkeletonLoader, { width: 22, height: 18, borderRadius: 6 })))));
+}
+export default SkeletonLoader;
+//# sourceMappingURL=SkeletonLoader.js.map

package/lib/esm/components/SkeletonLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonLoader.js","sourceRoot":"","sources":["../../../src/components/SkeletonLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,MAAM,6BAA6B,CAAC;AAWhD,MAAM,UAAU,cAAc,CAAC,EAC7B,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,EAAE,EACX,YAAY,GAAG,CAAC,EAChB,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,IAAI,GACK;IACpB,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;QAChB,OAAO,CACL,6BACE,SAAS,EAAE,GAAG,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,EAC7E,KAAK,EAAE;gBACL,KAAK;gBACL,MAAM;gBACN,YAAY;aACb,GACD,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,IACtB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3C,6BACE,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,GAAG,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAC/G,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;YAC3C,MAAM;YACN,YAAY;SACb,GACD,CACH,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAED,+BAA+B;AAC/B,MAAM,UAAU,gBAAgB,CAAC,EAAE,OAAO,GAAG,CAAC,EAAwB;IACpE,OAAO,CACL,4BAAI,SAAS,EAAE,KAAK,CAAC,QAAQ;QAC3B,4BAAI,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;YACtD,oBAAC,cAAc,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,GAAI,CACvD;QACJ,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7C,4BAAI,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;YACxC,oBAAC,cAAc,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,GAAI,CACxC,CACN,CAAC;QACF,4BAAI,SAAS,EAAE,KAAK,CAAC,SAAS;YAC5B,6BAAK,SAAS,EAAE,KAAK,CAAC,aAAa;gBACjC,oBAAC,cAAc,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,GAAI;gBAC1D,oBAAC,cAAc,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,GAAI;gBAC1D,oBAAC,cAAc,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,GAAI,CACtD,CACH,CACF,CACN,CAAC;AACJ,CAAC;AAED,eAAe,cAAc,CAAC"}

package/lib/esm/components/SkeletonLoader.module.css

@@ -0,0 +1,83 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+/* ============================================================================
+   SkeletonLoader.module.css
+   
+   Loading placeholder with shimmer animation.
+   Uses semantic tokens from theme.css.
+   ============================================================================ */
+
+/* === Base Skeleton === */
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-bg, var(--color-gray-100)) 25%,
+    var(--skeleton-highlight, var(--color-gray-200)) 50%,
+    var(--skeleton-bg, var(--color-gray-100)) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  display: inline-block;
+  border-radius: var(--radius-selector, 4px);
+}
+
+/* === Animation Variant === */
+.animated {
+  animation: shimmer 1.5s infinite;
+}
+
+/* === Spacing === */
+.marginBottom {
+  margin-bottom: 0.5rem;
+}
+
+/* === Table Row Skeleton === */
+.tableRow {
+  border-bottom: 1px solid var(--skeleton-row-border, var(--table-row-border));
+}
+
+/* === Table Cell Skeleton === */
+.tableCell {
+  padding: var(--skeleton-row-padding-y, var(--surface-gap)) var(--skeleton-row-padding-x, var(--space-sm));
+  vertical-align: middle;
+}
+
+/* === Action Buttons Container === */
+.actionButtons {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/* ============================================================================
+   Dark Mode
+   ============================================================================ */
+
+[data-theme='dark'] .skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-bg, var(--color-gray-800)) 25%,
+    var(--skeleton-highlight, var(--color-gray-700)) 50%,
+    var(--skeleton-bg, var(--color-gray-800)) 75%
+  );
+  background-size: 200% 100%;
+}
+
+[data-theme='dark'] .tableRow {
+  border-bottom-color: var(--skeleton-row-border, var(--table-row-border));
+}
+
+/* ============================================================================
+   Shimmer Animation
+   ============================================================================ */
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}

package/lib/esm/components/Spinner.d.ts

@@ -1,4 +1,23 @@
-import React from 'react';
-export declare function Spinner({ active }: {
+import * as React from 'react';
+export interface SpinnerProps {
+    /** Render nothing when false. */
     active?: boolean;
-}): React.JSX.Element;
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    className?: string;
+    /** Announced to assistive technology. */
+    label?: string;
+}
+/**
+ * A loading indicator: a ring that inherits its colour, so it reads on any background.
+ *
+ * Two things it does that a bare CSS spin does not. It honours
+ * `prefers-reduced-motion` — a spinner is the most common thing to make someone with
+ * vestibular sensitivity look away — showing a still ring rather than nothing, so the
+ * "busy" signal survives. And it renders **nothing** when inactive, so it can be dropped
+ * into a scroll sentinel or a button without reserving space it is not using.
+ *
+ * The ring is an inner element rather than a border on the container. A border on the
+ * container is distorted the moment a flex parent stretches it; an explicitly sized inner
+ * element stays circular.
+ */
+export declare function Spinner({ active, size, className, label, }: SpinnerProps): React.JSX.Element;

package/lib/esm/components/Spinner.js

@@ -1,6 +1,25 @@
-import React from 'react';
+import * as React from 'react';
 import style from './Spinner.module.css';
-export function Spinner({ active = true }) {
-    return (React.createElement("div", { className: [style.spinner, active && style.active].join(' '), role: "progressbar", "aria-busy": active ? 'true' : 'false' }));
+import { cl } from '@_linked/react/utils/ClassNames';
+import { useReducedMotion } from '../hooks/useReducedMotion.js';
+/**
+ * A loading indicator: a ring that inherits its colour, so it reads on any background.
+ *
+ * Two things it does that a bare CSS spin does not. It honours
+ * `prefers-reduced-motion` — a spinner is the most common thing to make someone with
+ * vestibular sensitivity look away — showing a still ring rather than nothing, so the
+ * "busy" signal survives. And it renders **nothing** when inactive, so it can be dropped
+ * into a scroll sentinel or a button without reserving space it is not using.
+ *
+ * The ring is an inner element rather than a border on the container. A border on the
+ * container is distorted the moment a flex parent stretches it; an explicitly sized inner
+ * element stays circular.
+ */
+export function Spinner({ active = true, size = 'small', className, label = 'Loading', }) {
+    const reducedMotion = useReducedMotion();
+    if (!active)
+        return null;
+    return (React.createElement("div", { className: cl(style.spinner, style[size], className), role: "progressbar", "aria-busy": "true", "aria-label": label },
+        React.createElement("span", { className: cl(style.ring, reducedMotion && style.reducedMotion), "aria-hidden": "true" })));
 }
 //# sourceMappingURL=Spinner.js.map

package/lib/esm/components/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,sBAAsB,CAAC;AAEzC,MAAM,UAAU,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE;IACvC,OAAO,CACL,6BACE,SAAS,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC5D,IAAI,EAAC,aAAa,eACP,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,GACpC,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,MAAM,sBAAsB,CAAC;AACzC,OAAO,EAAC,EAAE,EAAC,MAAM,iCAAiC,CAAC;AACnD,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAW9D;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,MAAM,GAAG,IAAI,EACb,IAAI,GAAG,OAAO,EACd,SAAS,EACT,KAAK,GAAG,SAAS,GACJ;IACb,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IAEzC,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EACpD,IAAI,EAAC,aAAa,eACR,MAAM,gBACJ,KAAK;QAEjB,8BACE,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,IAAI,KAAK,CAAC,aAAa,CAAC,iBACnD,MAAM,GAClB,CACE,CACP,CAAC;AACJ,CAAC"}

package/lib/esm/components/Spinner.module.css

@@ -2,20 +2,67 @@
 @import '@_linked/css/package.css';
 
 .spinner {
-  border: var(--spinner-border-width, 4px) solid
-    var(--spinner-track-color, transparent);
-  border-top-color: var(--spinner-indicator-color, var(--meter-indicator-bg));
-  border-radius: 50%;
+  display: inline-flex;
+  /* Never grow or shrink in a flex parent — that would distort the ring. */
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  color: var(--spinner-indicator-color, var(--meter-indicator-bg, currentColor));
+}
+
+/* Sized explicitly rather than filling the container, so the ring stays a circle even when
+   a flex parent stretches the box around it. */
+.ring {
+  box-sizing: border-box;
+  flex: 0 0 auto;
   width: var(--spinner-size, --spacing(4));
   height: var(--spinner-size, --spacing(4));
-  animation: spin var(--spinner-animation-duration, 1s) linear infinite;
+  border-radius: 50%;
+  border: var(--spinner-border-width, 2px) solid currentColor;
+  border-top-color: var(--spinner-track-color, transparent);
+  opacity: 0.85;
+  animation: spinnerRotate var(--spinner-animation-duration, 0.7s) linear infinite;
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
+@keyframes spinnerRotate {
+  to {
     transform: rotate(360deg);
   }
 }
+
+/* Size variants. Each sets `--spinner-size`, so a consumer that sets the variable directly
+   still wins — the variants are a shorthand for it, not a replacement. */
+.small {
+  --spinner-size: --spacing(4);
+}
+.medium {
+  --spinner-size: --spacing(6);
+}
+.large {
+  --spinner-size: --spacing(8);
+  --spinner-border-width: 3px;
+}
+.xlarge {
+  --spinner-size: --spacing(12);
+  --spinner-border-width: 3px;
+}
+
+.small,
+.medium,
+.large,
+.xlarge {
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+}
+
+/* Reduced motion: freeze the ring, keep it visible. Removing it entirely would remove the
+   only signal that something is loading. */
+.reducedMotion {
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ring {
+    animation: none;
+  }
+}

package/lib/esm/components/TruncatedText.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface TruncatedTextProps {
+    /** The full text content */
+    text: string;
+    /** Maximum number of characters to show before truncating (default: 80) */
+    maxLength?: number;
+}
+/**
+ * TruncatedText - Displays truncated text with hover/tap to show full content
+ *
+ * For long text fields, shows first N characters with ellipsis.
+ * On desktop: hover displays full text in a popover with copy button.
+ * On mobile: tap opens a dialog with full text and copy button.
+ */
+declare function TruncatedText({ text, maxLength }: TruncatedTextProps): React.JSX.Element;
+export { TruncatedText };

package/lib/esm/components/TruncatedText.js

@@ -0,0 +1,83 @@
+import { Dialog } from './Dialog.js';
+import { HoverCard } from './HoverCard.js';
+import { IconButton } from './IconButton.js';
+import React, { useState, useEffect } from 'react';
+import style from './TruncatedText.module.css';
+/**
+ * Two inline glyphs rather than a dependency on an icon set.
+ *
+ * This component needs exactly two, and a library whose contract is "a behaviour source plus
+ * a stylesheet" should not make every consumer install an icon package to draw a tick. They
+ * inherit `currentColor`, so they follow the button they sit in.
+ */
+const CheckGlyph = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
+    React.createElement("polyline", { points: "20 6 9 17 4 12" })));
+const CopyGlyph = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
+    React.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+    React.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })));
+/**
+ * TruncatedText - Displays truncated text with hover/tap to show full content
+ *
+ * For long text fields, shows first N characters with ellipsis.
+ * On desktop: hover displays full text in a popover with copy button.
+ * On mobile: tap opens a dialog with full text and copy button.
+ */
+function TruncatedText({ text, maxLength = 80 }) {
+    const [copied, setCopied] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        // Check for touch device or small screen
+        const checkMobile = () => {
+            const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+            const isSmallScreen = window.matchMedia('(max-width: 768px)').matches;
+            setIsMobile(hasTouchScreen || isSmallScreen);
+        };
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+    // If text is short enough, just render it directly
+    if (!text || text.length <= maxLength) {
+        return React.createElement("span", null, text || '-');
+    }
+    const truncatedText = text.slice(0, maxLength) + '...';
+    const handleCopy = async (e) => {
+        e.stopPropagation();
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy text:', err);
+        }
+    };
+    // Mobile: Use Dialog triggered by tap
+    if (isMobile) {
+        return (React.createElement(Dialog.Root, null,
+            React.createElement(Dialog.Trigger, { asChild: true },
+                React.createElement("span", { className: style.truncatedText }, truncatedText)),
+            React.createElement(Dialog.Content, { className: style.dialogContent },
+                React.createElement(Dialog.Header, null,
+                    React.createElement(Dialog.Title, null, "Full Text")),
+                React.createElement("div", { className: style.dialogBody },
+                    React.createElement("div", { className: style.scrollArea },
+                        React.createElement("p", { className: style.fullText }, text))),
+                React.createElement("div", { className: style.dialogFooter },
+                    React.createElement(IconButton, { size: "small", variant: "ghost", className: style.copyButton, onClick: handleCopy, "aria-label": copied ? 'Copied!' : 'Copy to clipboard' }, copied ? (React.createElement(CheckGlyph, null)) : (React.createElement(CopyGlyph, null)))))));
+    }
+    // Desktop: Use HoverCard triggered by hover
+    return (React.createElement(HoverCard.Root, { openDelay: 300, closeDelay: 200 },
+        React.createElement(HoverCard.Trigger, { asChild: true },
+            React.createElement("span", { className: style.truncatedText }, truncatedText)),
+        React.createElement(HoverCard.Portal, null,
+            React.createElement(HoverCard.Content, { side: "top", align: "start", sideOffset: 8, className: style.hoverContent },
+                React.createElement("div", { className: style.contentWrapper },
+                    React.createElement("div", { className: style.scrollArea },
+                        React.createElement("p", { className: style.fullText }, text)),
+                    React.createElement("div", { className: style.copyButtonWrapper },
+                        React.createElement(IconButton, { size: "small", variant: "ghost", className: style.copyButton, onClick: handleCopy, "aria-label": copied ? 'Copied!' : 'Copy to clipboard' }, copied ? (React.createElement(CheckGlyph, null)) : (React.createElement(CopyGlyph, null))))),
+                React.createElement(HoverCard.Arrow, { className: style.arrow })))));
+}
+export { TruncatedText };
+//# sourceMappingURL=TruncatedText.js.map

package/lib/esm/components/TruncatedText.js.map

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