@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/Image/Image.tsx

@@ -0,0 +1,342 @@
+import {
+  forwardRef,
+  useState,
+  type CSSProperties,
+  type ImgHTMLAttributes,
+  type MouseEventHandler,
+  type ReactNode,
+} from 'react';
+import clsx from 'clsx';
+import { ImageOff } from 'lucide-react';
+import { Button } from '../Button';
+import { Skeleton } from '../Skeleton';
+import { useTranslation } from '../../i18n/useTranslation';
+import styles from './Image.module.scss';
+
+/** How the image fills its box. Maps to CSS `object-fit`. */
+export type ImageObjectFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+
+/** Corner rounding. Maps to the radius token scale. */
+export type ImageRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+
+/** Fixed square size, aligned to the shared `--size-*` scale (xs 20 / sm 24 / md 32 / lg 40 px). */
+export type ImageSize = 'xs' | 'sm' | 'md' | 'lg';
+
+/** Backdrop behind a loaded image: the muted surface fill, or none. */
+export type ImageBackground = 'muted' | 'none';
+
+export interface ImageProps extends Omit<
+  ImgHTMLAttributes<HTMLImageElement>,
+  'alt' | 'children' | 'src' | 'loading' | 'onClick'
+> {
+  /** Image URL. Changing it resets the component to the loading state. */
+  src: string;
+  /**
+   * Alternative text (required). Describe the image's content or function.
+   * Pass an empty string (`alt=""`) for purely decorative images.
+   */
+  alt: string;
+  /**
+   * How the image fills its box. Defaults to `'cover'`.
+   * - `'cover'` — fill + crop (no distortion). Best for thumbnails / heroes.
+   * - `'contain'` — whole image, letterboxed; the bars show the surface, or the muted box with `background="muted"`.
+   * - `'fill'` — stretch to the box (may distort).
+   * - `'none'` / `'scale-down'` — native size / the smaller of none|contain.
+   */
+  objectFit?: ImageObjectFit;
+  /**
+   * Which part of the image stays in view when `objectFit` crops or letterboxes
+   * it. Any CSS `object-position` value. Defaults to `'center'`. Use `'top'` for
+   * document / screenshot thumbnails cropped square, so the header stays visible.
+   */
+  objectPosition?: string;
+  /**
+   * Reserve the box at a fixed ratio to prevent layout shift while loading.
+   * Number (`1.5`) or CSS string (`'16 / 9'`).
+   */
+  aspectRatio?: string | number;
+  /**
+   * Render a fixed **square** box of this size (from the shared `--size-*`
+   * scale: `'xs'` 20 / `'sm'` 24 / `'md'` 32 / `'lg'` 40 px) instead of filling
+   * the container's width. Use for dense thumbnails (e.g. a 40px image cell in a
+   * table row) so you don't need a consumer-owned fixed-width wrapper. Omit for
+   * the default responsive behavior. When set, `aspectRatio` is ignored (the box
+   * is already square); pair with `objectFit="cover"` to crop. Note that a
+   * sized image's error tile is icon-only and **not retryable** — see the
+   * component description.
+   */
+  size?: ImageSize;
+  /**
+   * Corner rounding. Defaults to `'md'`. Pass `'none'` for square corners; for
+   * circular profile images use `<Avatar>`.
+   */
+  radius?: ImageRadius;
+  /**
+   * Backdrop behind the loaded image. Defaults to `'none'`, so transparent
+   * assets (logos, PNG/SVG) show their surface. Pass `'muted'` for the muted
+   * fill (letterboxed `contain` images). The loading skeleton and the error
+   * tile keep their fill either way.
+   */
+  background?: ImageBackground;
+  /**
+   * Custom node rendered in place of the default broken-image placeholder when
+   * the image fails to load. Overrides the icon + message + retry entirely.
+   * This is also the only way to put a control on a failed fixed-`size` image,
+   * whose built-in error tile is icon-only. At a fixed `size` the node is
+   * rendered in a slot that fills the box (so it cannot flow outside the
+   * wrapper's clip); fitting your content into those 20-40px is still yours,
+   * and a labelled button does not fit any of them.
+   */
+  fallback?: ReactNode;
+  /**
+   * Native lazy-loading hint. Defaults to `'lazy'`. Pass `'eager'` for
+   * above-the-fold / LCP images.
+   */
+  loading?: 'eager' | 'lazy';
+  /**
+   * Make the image a flush, keyboard-accessible click target — renders the image
+   * inside a chromeless `<button>` (no padding/border/background; DS focus ring on
+   * `:focus-visible`). Implied when `onClick` is set. Use for a thumbnail that opens
+   * a preview/lightbox. The broken-image error state is non-interactive (the fluid
+   * tile's Retry takes over when its box has room; otherwise there is no control).
+   */
+  interactive?: boolean;
+  /**
+   * Click handler for the interactive trigger. Setting it implies `interactive`.
+   * Fires on click and on Enter/Space (native `<button>` keyboard behavior).
+   */
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  /**
+   * Accessible label for the interactive trigger — action-oriented, e.g.
+   * `"Preview report.png"`. Defaults to `alt` when omitted OR empty — an empty
+   * string is not an explicit name, so it takes the default too. Only used when
+   * interactive. Note:
+   * a native `aria-label` passed via `{...rest}` lands on the `<img>`, not the
+   * trigger button — use `ariaLabel` to name the trigger.
+   */
+  ariaLabel?: string;
+}
+
+type LoadState = 'loading' | 'loaded' | 'error';
+
+const RADIUS_CLASS: Record<ImageRadius, string> = {
+  none: styles.radiusNone,
+  sm: styles.radiusSm,
+  md: styles.radiusMd,
+  lg: styles.radiusLg,
+  full: styles.radiusFull,
+};
+
+const SIZE_CLASS: Record<ImageSize, string> = {
+  xs: styles.sizeXs,
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+};
+
+/**
+ * Displays a remote image with built-in loading and error states.
+ * @see docs/components/Image.md
+ */
+export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
+  {
+    src,
+    alt,
+    objectFit = 'cover',
+    objectPosition = 'center',
+    aspectRatio,
+    size,
+    radius = 'md',
+    background = 'none',
+    fallback,
+    loading = 'lazy',
+    interactive,
+    onClick,
+    ariaLabel,
+    className,
+    style,
+    ...rest
+  },
+  ref,
+) {
+  const t = useTranslation();
+  const [state, setState] = useState<LoadState>('loading');
+  const [reloadNonce, setReloadNonce] = useState(0);
+
+  // Reset to loading when the source changes — during render, not in an
+  // effect: a mount-time effect ran AFTER a cached image's `load` and put it
+  // back to 'loading' for good (#574).
+  const [prevSrc, setPrevSrc] = useState(src);
+  if (src !== prevSrc) {
+    setPrevSrc(src);
+    setState('loading');
+  }
+
+  const retry = () => {
+    setState('loading');
+    setReloadNonce((n) => n + 1); // re-key the <img> to force a re-fetch
+  };
+
+  const wrapperStyle = {
+    // A fixed `size` sets an explicit square box, so aspectRatio is moot.
+    aspectRatio:
+      size !== undefined || aspectRatio === undefined
+        ? undefined
+        : typeof aspectRatio === 'number'
+          ? String(aspectRatio)
+          : aspectRatio,
+    '--image-object-fit': objectFit,
+    '--image-object-position': objectPosition,
+    ...style,
+  } as CSSProperties;
+
+  const isInteractive = interactive || onClick != null;
+
+  const imgNode = (
+    // {...rest} FIRST (Pattern B): the state machine owns src/alt/onLoad/onError,
+    // so a careless spread can't break them. `key` stays before the spread (#707).
+    <img
+      key={`${src}|${reloadNonce}`}
+      {...rest}
+      ref={ref}
+      src={src}
+      alt={state === 'error' ? '' : alt}
+      aria-hidden={state === 'error' || undefined}
+      loading={loading}
+      className={styles.img}
+      onLoad={() => setState('loaded')}
+      onError={() => setState('error')}
+    />
+  );
+
+  const loadingOverlay =
+    state === 'loading' ? <Skeleton variant="rectangular" className={styles.overlay} /> : null;
+
+  return (
+    <span
+      className={clsx(
+        styles.wrapper,
+        RADIUS_CLASS[radius],
+        size && SIZE_CLASS[size],
+        // No box of its own: on error the image goes `display: none` and the
+        // tile is out of flow, so nothing is left to give the wrapper height
+        // (#542). `.unreserved` gives it an icon-high spacer, error state
+        // only. A boxless `fallback` is in flow and sizes the wrapper itself.
+        size === undefined && aspectRatio === undefined && fallback == null && styles.unreserved,
+        className,
+      )}
+      style={wrapperStyle}
+      data-state={state}
+      data-background={background}
+    >
+      {isInteractive ? (
+        <button
+          type="button"
+          className={styles.trigger}
+          onClick={onClick}
+          aria-label={ariaLabel || alt}
+          disabled={state === 'error'}
+        >
+          {imgNode}
+          {loadingOverlay}
+        </button>
+      ) : (
+        <>
+          {imgNode}
+          {loadingOverlay}
+        </>
+      )}
+
+      {state === 'error' &&
+        (fallback != null ? (
+          /* A fallback stands in for the built-in tile, so wherever the box is
+             the wrapper's own it gets the slot the built-in tile has. `.error`
+             is `inset: 0`; a bare child is in FLOW, and when the image is also
+             interactive it flows after `.trigger` (height: 100%) and lands
+             WHOLLY outside the clip — measured at `size="lg"` (box 40..80,
+             fallback 80..105) and again at `aspectRatio="16 / 9"` (fallback
+             starting exactly on the wrapper's bottom edge). That is #538
+             reproduced through the very prop documented as its remedy.
+
+             The slot bounds the fallback to the box. Fitting content INSIDE
+             the box is still the consumer's job — a labelled button is wider
+             than 40px and still clips — and the prop's JSDoc says so.
+
+             Not slotted when the wrapper has NEITHER `size` nor
+             `aspectRatio`: there the wrapper takes its height FROM this child
+             (measured: a 20px-tall fallback gives a 20px-tall wrapper), so
+             pulling it out of flow would collapse the box to zero. (The
+             built-in tile, which IS out of flow, gets `.unreserved`'s spacer
+             for the same reason — #542.) */
+          size !== undefined || aspectRatio !== undefined ? (
+            <span className={styles.fallback}>{fallback}</span>
+          ) : (
+            fallback
+          )
+        ) : size ? (
+          /* Fixed `size` is a 20/24/32/40px square, and the full tile below
+               is over 100px tall. At EVERY one of those sizes the Retry button
+               landed 23-42px past the wrapper's bottom edge: outside
+               `overflow: hidden`, never painted, and still focusable and in
+               the tab order (#538). There is no threshold to tune — the fluid
+               tile's 28px icon alone already overflows xs and sm — so a sized
+               error tile is the icon, scaled to its box by `.errorIcon`, and
+               contains nothing focusable at all. A consumer who needs a
+               control at this size passes `fallback`.
+
+               A11y: the "icon carries only `alt`" reasoning below is a
+               consequence of the visible text, not a rule about the icon, and
+               this branch has no visible text — so it inverts here. Nothing
+               else in the tile can carry the failure, so the icon does: `alt`
+               plus the phrase, the same fold `Lightbox` uses on its failed
+               stage. It names itself even when `alt=""`, because the fluid
+               tile renders its failure text regardless of `alt` too — a
+               decorative image that breaks is discoverable there, and the
+               sized branch must not be the one place a broken tile is
+               silent. */
+          <span className={styles.error}>
+            <ImageOff
+              className={styles.errorIcon}
+              role="img"
+              aria-label={alt ? `${alt}: ${t('image.loadError')}` : t('image.loadError')}
+            />
+          </span>
+        ) : (
+          <span className={styles.error}>
+            {/* `role="img"` moved off the container and onto the ICON.
+                  `img` is Children Presentational, so as a container it pruned
+                  its own descendants from the accessibility tree — the visible
+                  error text and, worse, the Retry button were not exposed at
+                  all: a focusable control with no role and no name (#496).
+                  Testing Library computes roles from the DOM rather than
+                  modelling children-presentational, which is why the existing
+                  `getByRole('button', { name: 'Retry' })` assertion passed
+                  throughout.
+
+                  On a leaf there is nothing to prune, so the name survives and
+                  the siblings stay reachable.
+
+                  The icon carries ONLY `alt`, never the failure phrase: the
+                  sibling below renders that phrase as visible text, so naming
+                  the icon with it too made a reader say "Failed to load" twice
+                  in a row. With no `alt` there is nothing left to name, so the
+                  icon goes decorative and the text carries the message alone.
+                  Both halves of that hold only while the text is there — see
+                  the sized branch above, which has none. */}
+            {alt ? (
+              <ImageOff size={28} role="img" aria-label={alt} />
+            ) : (
+              <ImageOff size={28} aria-hidden />
+            )}
+            <span className={styles.errorText}>{t('image.loadError')}</span>
+            {/* `.retry` exists only to carry the inset focus ring — see the
+                  rule in Image.module.scss for why an outset one cannot survive
+                  this wrapper. */}
+            <Button variant="secondary" size="sm" onClick={retry} className={styles.retry}>
+              {t('image.retry')}
+            </Button>
+          </span>
+        ))}
+    </span>
+  );
+});

package/src/components/Image/index.ts

@@ -0,0 +1,2 @@
+export { Image } from './Image';
+export type { ImageProps, ImageBackground, ImageObjectFit, ImageRadius, ImageSize } from './Image';

package/src/components/ImageCrop/ImageCrop.module.scss

@@ -0,0 +1,274 @@
+@use './ImageCrop.tokens';
+@use '../../styles/mixins' as *;
+
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.viewport {
+  position: relative;
+  background: var(--image-crop-viewport-bg);
+  border-radius: var(--image-crop-viewport-radius);
+  overflow: hidden;
+
+  // Reserve canvas space before image loads so the layout doesn't shift.
+  // Consumer can override via className.
+  min-height: 320px;
+
+  // CSS keyword; prevents browser text selection during drag.
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  user-select: none;
+}
+
+.viewport:focus-visible {
+  @include focus-ring(var(--image-crop-viewport-focus-color));
+}
+
+.image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+
+  // The library's reset (src/styles/reset.scss) applies `max-width: 100%`
+  // to all <img> for general layout safety. We override here because the
+  // image inside ImageCrop must render at its natural pixel size — the
+  // crop math depends on `scale = boxW / value.width` driving the CSS
+  // transform, and that breaks if the image is also being width-capped by
+  // CSS to the parent viewport. Without this override, large source images
+  // (e.g. 4080×3072 phone photos) render visibly tiny in the cropper.
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword override of the global img reset
+  max-width: none;
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  max-height: none;
+
+  // CSS keyword — the crop box owns all pointer interaction.
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  pointer-events: none;
+}
+
+.cropBox {
+  position: absolute;
+  border: var(--border-width) solid var(--image-crop-cropbox-border-color);
+
+  // The box-shadow trick paints a dim overlay everywhere OUTSIDE the box
+  // without an extra DOM element. The 9999px spread covers the viewport.
+  // We use 50% black rather than --color-bg-overlay (35%) intentionally —
+  // the cropper scrim needs higher contrast than Modal's overlay.
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- crop scrim needs higher contrast than --color-bg-overlay
+  box-shadow: 0 0 0 9999px rgb(0 0 0 / 50%);
+
+  // CSS keyword.
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  cursor: move;
+
+  // CSS keyword; box + handle gestures aren't browser scroll/zoom. The scrim and toolbar still scroll the page.
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  touch-action: none;
+}
+
+.grid {
+  position: absolute;
+  inset: 0;
+  opacity: var(--image-crop-grid-opacity);
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- thirds lines are gradient stops with literal percentages
+  background:
+    linear-gradient(
+      to right,
+      transparent calc(33.333% - var(--border-width)),
+      var(--image-crop-grid-color) 0 33.333%,
+      transparent 0 calc(66.666% - var(--border-width)),
+      var(--image-crop-grid-color) 0 66.666%,
+      transparent 0
+    ),
+    linear-gradient(
+      to bottom,
+      transparent calc(33.333% - var(--border-width)),
+      var(--image-crop-grid-color) 0 33.333%,
+      transparent 0 calc(66.666% - var(--border-width)),
+      var(--image-crop-grid-color) 0 66.666%,
+      transparent 0
+    );
+
+  // CSS keyword — grid never intercepts the box's pointer events.
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  pointer-events: none;
+}
+
+.cropBoxActive .grid {
+  opacity: var(--image-crop-grid-opacity-active);
+}
+
+.handle {
+  position: absolute;
+  width: var(--image-crop-handle-size);
+  height: var(--image-crop-handle-size);
+  box-sizing: border-box;
+}
+
+// Corner hit areas straddle the outline (half outside the box); the visible bracket hugs the box corner.
+.handle_nw,
+.handle_ne,
+.handle_sw,
+.handle_se {
+  &::before {
+    content: '';
+    position: absolute;
+    width: calc(var(--image-crop-handle-size) / 2 + var(--image-crop-handle-thickness));
+    height: calc(var(--image-crop-handle-size) / 2 + var(--image-crop-handle-thickness));
+    box-sizing: border-box;
+    border: 0 solid var(--image-crop-handle-color);
+  }
+}
+
+.handle_nw {
+  top: calc(-0.5 * var(--image-crop-handle-size));
+  left: calc(-0.5 * var(--image-crop-handle-size));
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  cursor: nwse-resize;
+
+  &::before {
+    top: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
+    left: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
+    border-top-width: var(--image-crop-handle-thickness);
+    border-left-width: var(--image-crop-handle-thickness);
+  }
+}
+
+.handle_ne {
+  top: calc(-0.5 * var(--image-crop-handle-size));
+  right: calc(-0.5 * var(--image-crop-handle-size));
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  cursor: nesw-resize;
+
+  &::before {
+    top: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
+    right: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
+    border-top-width: var(--image-crop-handle-thickness);
+    border-right-width: var(--image-crop-handle-thickness);
+  }
+}
+
+.handle_sw {
+  bottom: calc(-0.5 * var(--image-crop-handle-size));
+  left: calc(-0.5 * var(--image-crop-handle-size));
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  cursor: nesw-resize;
+
+  &::before {
+    bottom: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
+    left: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
+    border-bottom-width: var(--image-crop-handle-thickness);
+    border-left-width: var(--image-crop-handle-thickness);
+  }
+}
+
+.handle_se {
+  right: calc(-0.5 * var(--image-crop-handle-size));
+  bottom: calc(-0.5 * var(--image-crop-handle-size));
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  cursor: nwse-resize;
+
+  &::before {
+    bottom: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
+    right: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
+    border-bottom-width: var(--image-crop-handle-thickness);
+    border-right-width: var(--image-crop-handle-thickness);
+  }
+}
+
+// Edge handles are invisible hit strips along the box edges.
+.handle_n,
+.handle_s {
+  left: var(--image-crop-handle-size);
+  right: var(--image-crop-handle-size);
+  width: auto;
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  cursor: ns-resize;
+}
+
+.handle_n {
+  top: calc(-0.5 * var(--image-crop-handle-size));
+}
+
+.handle_s {
+  bottom: calc(-0.5 * var(--image-crop-handle-size));
+}
+
+.handle_e,
+.handle_w {
+  top: var(--image-crop-handle-size);
+  bottom: var(--image-crop-handle-size);
+  height: auto;
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  cursor: ew-resize;
+}
+
+.handle_e {
+  right: calc(-0.5 * var(--image-crop-handle-size));
+}
+
+.handle_w {
+  left: calc(-0.5 * var(--image-crop-handle-size));
+}
+
+.skeleton {
+  position: absolute;
+  inset: 0;
+}
+
+.errorState {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--image-crop-error-gap);
+  padding: var(--image-crop-error-padding);
+  color: var(--image-crop-error-fg);
+  font-size: var(--image-crop-error-font-size);
+
+  // CSS keyword — text alignment.
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  text-align: center;
+}
+
+.disabled .viewport {
+  opacity: var(--image-crop-opacity-disabled);
+}
+
+.disabled .cropBox,
+.disabled .handle {
+  // CSS keyword.
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  cursor: not-allowed;
+}
+
+.srOnly {
+  @include visually-hidden;
+}
+
+// Positioning wrapper over the canvas bottom; sits in the reserved TOOLBAR_RESERVE band.
+.toolbar {
+  position: absolute;
+  bottom: var(--image-crop-toolbar-offset);
+  left: 50%;
+  display: flex;
+  align-items: center;
+  gap: var(--image-crop-toolbar-gap);
+  padding: var(--image-crop-toolbar-padding);
+  max-width: 100%;
+  overflow-x: auto;
+  transform: translateX(-50%);
+}

package/src/components/ImageCrop/ImageCrop.tokens.scss

@@ -0,0 +1,33 @@
+// ImageCrop.tokens.scss — component-scoped tokens for <ImageCrop>. Covers viewport surface, crop-box border, error state, and disabled mute. Cursor keywords and the scrim's literal 50% black stay raw in .module.scss.
+:root {
+  // Viewport surface
+  --image-crop-viewport-bg: var(--color-bg-muted);
+  --image-crop-viewport-radius: var(--radius-md);
+  --image-crop-viewport-focus-color: var(--color-accent);
+
+  // Crop box outline
+  --image-crop-cropbox-border-color: var(--color-accent);
+
+  // Crop box handles + thirds grid
+  --image-crop-handle-size: var(--space-6);
+  --image-crop-handle-thickness: var(--border-width-strong);
+  --image-crop-handle-color: var(--color-fg-on-overlay);
+  --image-crop-grid-color: var(--color-fg-on-overlay);
+  --image-crop-grid-opacity: 0;
+  --image-crop-grid-opacity-active: 1;
+
+  // Toolbar positioning
+  // Room so overflow-x clipping doesn't cut button focus rings.
+  --image-crop-toolbar-padding: var(--space-1);
+  --image-crop-toolbar-gap: var(--space-2);
+  --image-crop-toolbar-offset: var(--space-3);
+
+  // Error state
+  --image-crop-error-gap: var(--space-2);
+  --image-crop-error-padding: var(--space-4);
+  --image-crop-error-fg: var(--color-danger);
+  --image-crop-error-font-size: var(--font-size-sm);
+
+  // Disabled mute
+  --image-crop-opacity-disabled: var(--opacity-disabled);
+}