@sableui/react 0.5.0 → 0.6.1

package/dist/{chunk-RCLKXF2N.js → chunk-7QSDYBXO.js}

@@ -1,3 +1,4 @@
+import { StackedActionsContext, CardDepthContext, usePresentation, PresentationProvider } from './chunk-FKZXAFIY.js';
 import { cn } from './chunk-SRQWQUTW.js';
 import { Icon } from './chunk-QJ6FWTUG.js';
 import { createContext, useMemo, useState, useRef, useLayoutEffect, useEffect, useSyncExternalStore, useCallback, useContext, isValidElement, Children, useId, cloneElement } from 'react';
@@ -11,6 +12,7 @@ import { Input as Input$1 } from '@base-ui/react/input';
 import { Field as Field$1 } from '@base-ui/react/field';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { Switch as Switch$1 } from '@base-ui/react/switch';
+import { grainGradientMeta, staticMeshGradientMeta, getShaderNoiseTexture, grainGradientFragmentShader, staticMeshGradientFragmentShader } from '@paper-design/shaders';
 import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
 import { Progress as Progress$1 } from '@base-ui/react/progress';
 import { Select as Select$1 } from '@base-ui/react/select';
@@ -462,7 +464,8 @@ function Button({
 }) {
   const tier = useTypeTier();
   const isNativeButton = render === void 0;
-  const resolvedSize = size ?? "md";
+  const stacked = useContext(StackedActionsContext) && !String(size ?? "md").startsWith("icon");
+  const resolvedSize = stacked ? "cta" : size ?? "md";
   const hasLabel = children != null && children !== false;
   const spinner = /* @__PURE__ */ jsx(Spinner, { className: "size-(--button-icon)", thickness: 2 });
   const start = loading ? spinner : iconStart;
@@ -486,7 +489,8 @@ function Button({
     props: {
       ...props,
       className: cn(
-        buttonVariants({ variant, size }),
+        buttonVariants({ variant, size: resolvedSize }),
+        stacked ? "w-full" : null,
         tier.action,
         optical,
         // Busy is not disabled. Loading sets `disabled` so the action cannot
@@ -793,7 +797,9 @@ function Card({
   ref,
   ...props
 }) {
-  return useRender({
+  const depth = useContext(CardDepthContext);
+  const bleed = usePresentation() === "sheet" && variant === "flat" && depth === 0;
+  const element = useRender({
     render: render ?? /* @__PURE__ */ jsx("div", {}),
     ref,
     props: {
@@ -818,10 +824,15 @@ function Card({
         INTERACTIVE_HOVER[variant],
         className
       ),
-      style: { "--card-p": DENSITY_PAD[density], ...style }
+      style: {
+        "--card-p": DENSITY_PAD[density],
+        ...bleed ? { margin: "calc(var(--card-p) * -1)", width: "calc(100% + var(--card-p) * 2)", maxWidth: "none" } : null,
+        ...style
+      }
     },
     defaultTagName: "div"
   });
+  return /* @__PURE__ */ jsx(CardDepthContext.Provider, { value: depth + 1, children: element });
 }
 Card.displayName = "Card";
 function CardHeader({
@@ -924,20 +935,27 @@ function CardList({
   );
 }
 function CardFooter({
+  actions = false,
   className,
+  children,
   ...props
 }) {
+  const depth = useContext(CardDepthContext);
+  const stacked = usePresentation() === "sheet" && actions && depth <= 1;
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "card-footer",
+      "data-actions": actions ? stacked ? "stack" : "row" : void 0,
       className: cn(
         "flex items-center gap-2 p-[var(--card-p,--spacing(6))] pt-0",
         "[[data-slot=card-header]+&]:pt-[var(--card-p,--spacing(6))]",
         "[:is([data-slot=card-list],[data-slot=card-content][data-flush])+&]:border-t [:is([data-slot=card-list],[data-slot=card-content][data-flush])+&]:border-border [:is([data-slot=card-list],[data-slot=card-content][data-flush])+&]:pt-[var(--card-p,--spacing(6))]",
-        className
+        className,
+        stacked && "mt-auto flex-col-reverse items-stretch justify-start"
       ),
-      ...props
+      ...props,
+      children: stacked ? /* @__PURE__ */ jsx(StackedActionsContext.Provider, { value: true, children }) : children
     }
   );
 }
@@ -1072,8 +1090,8 @@ var cardMeta = {
     },
     {
       name: "CardFooter",
-      type: 'ComponentPropsWithRef<"div">',
-      description: "Bottom row for actions/meta. Padding follows the density knob."
+      type: 'ComponentPropsWithRef<"div"> & { actions?: boolean }',
+      description: "Bottom row for actions/meta. Padding follows the density knob. `actions` marks it as the card's action row (buttons only): in a sheet (IosSheet, a bottom SheetContent) it becomes a full-width stack pinned to the bottom, primary on top; on a page nothing changes."
     }
   ],
   variants: {
@@ -1325,16 +1343,18 @@ var MATRIX = {
   // raw tone clears 4.5:1 on the page, but on its own 15% wash it did not
   // (light info 4.2:1, dark edition 3.6:1, most of Verdant's tones ~4.1:1).
   // Mixing toward --foreground moves it AWAY from the wash in both modes and
-  // every theme, and keeps the hue.
+  // every theme, and keeps the hue. Status tones mix from their -text token,
+  // not the fill: dark fills now sit low enough for a white label, and ink
+  // mixed from them fell under 4.5:1 (Meridian dark destructive, 3.8:1).
   soft: {
     neutral: "bg-secondary text-secondary-foreground",
     standard: "bg-tone-standard/15 text-[color-mix(in_oklch,var(--tone-standard)_75%,var(--foreground))]",
     collectible: "bg-tone-collectible/15 text-[color-mix(in_oklch,var(--tone-collectible)_75%,var(--foreground))]",
     edition: "bg-tone-edition/15 text-[color-mix(in_oklch,var(--tone-edition)_75%,var(--foreground))]",
-    info: "bg-tone-info/15 text-[color-mix(in_oklch,var(--tone-info)_75%,var(--foreground))]",
-    success: "bg-success/15 text-[color-mix(in_oklch,var(--success)_75%,var(--foreground))]",
-    warning: "bg-tone-warning/15 text-[color-mix(in_oklch,var(--tone-warning)_75%,var(--foreground))]",
-    destructive: "bg-destructive/15 text-[color-mix(in_oklch,var(--destructive)_75%,var(--foreground))]"
+    info: "bg-tone-info/15 text-[color-mix(in_oklch,var(--tone-info-text)_75%,var(--foreground))]",
+    success: "bg-success/15 text-[color-mix(in_oklch,var(--success-text)_75%,var(--foreground))]",
+    warning: "bg-tone-warning/15 text-[color-mix(in_oklch,var(--tone-warning-text)_75%,var(--foreground))]",
+    destructive: "bg-destructive/15 text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))]"
   },
   outline: {
     neutral: "border border-border text-foreground",
@@ -1639,16 +1659,16 @@ function usePortalThemeScope() {
   const [portal, setPortal] = useState(null);
   const [probed, setProbed] = useState(null);
   const probeRef = useRef(null);
-  const pending = portal !== null && probed !== portal;
+  const pending2 = portal !== null && probed !== portal;
   useIsomorphicLayoutEffect(() => {
-    if (!pending || !portal) return;
+    if (!pending2 || !portal) return;
     const probe = probeRef.current;
     if (probe) applyPortalThemeScope(portal, resolvePortalThemeScope(probe));
     setProbed(portal);
-  }, [pending, portal]);
+  }, [pending2, portal]);
   return {
     portalRef: setPortal,
-    probe: pending ? /* @__PURE__ */ jsx("span", { ref: probeRef, hidden: true, "data-sable-portal-probe": "" }) : null
+    probe: pending2 ? /* @__PURE__ */ jsx("span", { ref: probeRef, hidden: true, "data-sable-portal-probe": "" }) : null
   };
 }
 function withPortalThemeScope(Portal) {
@@ -1720,7 +1740,7 @@ function FullscreenContent({
         ),
         ...props,
         children: [
-          children,
+          /* @__PURE__ */ jsx(PresentationProvider, { value: "page", children }),
           showCloseButton ? (
             // The floating Button: Sable's control over content. Its own
             // translucent popover chip and border keep it legible over bright
@@ -1778,7 +1798,7 @@ function CardContent2({
         ),
         ...props,
         children: [
-          scroll ? /* @__PURE__ */ jsx("div", { className: "-m-2 min-h-0 overflow-y-auto overscroll-contain p-2 scrollbar-quiet", children }) : children,
+          /* @__PURE__ */ jsx(PresentationProvider, { value: "page", children: scroll ? /* @__PURE__ */ jsx("div", { className: "-m-2 min-h-0 overflow-y-auto overscroll-contain p-2 scrollbar-quiet", children }) : children }),
           showCloseButton ? /* @__PURE__ */ jsx(
             Dialog$1.Close,
             {
@@ -3027,6 +3047,539 @@ var switchMeta = {
     }
   ]
 };
+var VERTEX = `#version 300 es
+precision mediump float;
+
+layout(location = 0) in vec4 a_position;
+
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+uniform float u_originX;
+uniform float u_originY;
+uniform float u_worldWidth;
+uniform float u_worldHeight;
+uniform float u_fit;
+uniform float u_scale;
+uniform float u_rotation;
+uniform float u_offsetX;
+uniform float u_offsetY;
+
+out vec2 v_objectUV;
+out vec2 v_objectBoxSize;
+out vec2 v_patternUV;
+out vec2 v_patternBoxSize;
+
+vec3 getBoxSize(float boxRatio, vec2 givenBoxSize) {
+  vec2 box = vec2(0.);
+  box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y);
+  float noFitBoxWidth = box.x;
+  if (u_fit == 1.) {
+    box.x = boxRatio * min(u_resolution.x / boxRatio, u_resolution.y);
+  } else if (u_fit == 2.) {
+    box.x = boxRatio * max(u_resolution.x / boxRatio, u_resolution.y);
+  }
+  box.y = box.x / boxRatio;
+  return vec3(box, noFitBoxWidth);
+}
+
+void main() {
+  gl_Position = a_position;
+
+  vec2 uv = gl_Position.xy * .5;
+  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
+  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
+  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
+  float r = u_rotation * 3.14159265358979323846 / 180.;
+  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
+  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
+
+  vec2 fixedRatioBoxGivenSize = vec2(
+    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+  );
+  v_objectBoxSize = getBoxSize(1., fixedRatioBoxGivenSize).xy;
+  vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize;
+  v_objectUV = uv;
+  v_objectUV *= objectWorldScale;
+  v_objectUV += boxOrigin * (objectWorldScale - 1.);
+  v_objectUV += graphicOffset;
+  v_objectUV /= u_scale;
+  v_objectUV = graphicRotation * v_objectUV;
+
+  vec2 patternBoxGivenSize = vec2(
+    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+  );
+  float patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;
+  vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize);
+  v_patternBoxSize = boxSizeData.xy;
+  float patternBoxNoFitBoxWidth = boxSizeData.z;
+  vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;
+  v_patternUV = uv;
+  v_patternUV += graphicOffset / patternBoxScale;
+  v_patternUV += boxOrigin;
+  v_patternUV -= boxOrigin / patternBoxScale;
+  v_patternUV *= u_resolution.xy;
+  v_patternUV /= u_pixelRatio;
+  if (u_fit > 0.) {
+    v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);
+  }
+  v_patternUV /= u_scale;
+  v_patternUV = graphicRotation * v_patternUV;
+  v_patternUV += boxOrigin / patternBoxScale;
+  v_patternUV -= boxOrigin;
+  v_patternUV *= .01;
+}
+`;
+var FRAGMENTS = { mesh: staticMeshGradientFragmentShader, grain: grainGradientFragmentShader };
+var MAX_COLORS = { mesh: staticMeshGradientMeta.maxColorCount, grain: grainGradientMeta.maxColorCount };
+var GRAIN_CORNERS = 4;
+var state;
+var noiseImage = null;
+var listeners = /* @__PURE__ */ new Set();
+function onArtInvalidate(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+var invalidate = () => {
+  for (const listener of listeners) listener();
+};
+function compile(gl, type, source) {
+  const shader = gl.createShader(type);
+  if (!shader) return null;
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    console.error("GradientArt: shader failed to compile", gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+function programFor(s, variant) {
+  const cached = s.programs[variant];
+  if (cached !== void 0) return cached;
+  s.programs[variant] = null;
+  const { gl } = s;
+  const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX);
+  const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENTS[variant]);
+  if (!vertex || !fragment) return null;
+  const program = gl.createProgram();
+  if (!program) return null;
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.error("GradientArt: shader failed to link", gl.getProgramInfoLog(program));
+    return null;
+  }
+  const entry = { program, uniforms: /* @__PURE__ */ new Map() };
+  s.programs[variant] = entry;
+  return entry;
+}
+function setup(s) {
+  const { gl } = s;
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(0);
+  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+  s.programs = {};
+  s.noise = null;
+  if (noiseImage?.complete && noiseImage.naturalWidth) uploadNoise(s, noiseImage);
+}
+function uploadNoise(s, image) {
+  const { gl } = s;
+  const texture = gl.createTexture();
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+  s.noise = texture;
+}
+function getState() {
+  if (state !== void 0) return state;
+  if (typeof document === "undefined") return null;
+  const canvas = document.createElement("canvas");
+  const gl = canvas.getContext("webgl2", { alpha: true, premultipliedAlpha: true, antialias: false, preserveDrawingBuffer: true });
+  if (!gl) {
+    state = null;
+    return state;
+  }
+  const s = { canvas, gl, programs: {}, noise: null, lost: false };
+  setup(s);
+  canvas.addEventListener("webglcontextlost", (event) => {
+    event.preventDefault();
+    s.lost = true;
+  });
+  canvas.addEventListener("webglcontextrestored", () => {
+    s.lost = false;
+    setup(s);
+    invalidate();
+  });
+  state = s;
+  return state;
+}
+function noiseReady(s) {
+  if (s.noise) return true;
+  if (!noiseImage) {
+    noiseImage = getShaderNoiseTexture() ?? null;
+    noiseImage?.decode().then(
+      () => {
+        const current = getState();
+        if (current && noiseImage) uploadNoise(current, noiseImage);
+        invalidate();
+      },
+      () => {
+      }
+    );
+  }
+  return false;
+}
+function artSupported() {
+  return getState() !== null;
+}
+function paintArt(target, job) {
+  const s = getState();
+  if (!s || s.lost) return false;
+  if (job.variant === "grain" && !noiseReady(s)) return false;
+  const entry = programFor(s, job.variant);
+  if (!entry) return false;
+  const { gl, canvas } = s;
+  const { width, height } = job;
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+  gl.viewport(0, 0, width, height);
+  gl.useProgram(entry.program);
+  const at = (name) => {
+    if (!entry.uniforms.has(name)) entry.uniforms.set(name, gl.getUniformLocation(entry.program, name));
+    return entry.uniforms.get(name) ?? null;
+  };
+  const float = (name, value) => gl.uniform1f(at(name), value);
+  gl.uniform2f(at("u_resolution"), width, height);
+  float("u_pixelRatio", job.pixelRatio);
+  float("u_originX", 0.5);
+  float("u_originY", 0.5);
+  float("u_worldWidth", 0);
+  float("u_worldHeight", 0);
+  float("u_fit", 2);
+  float("u_scale", 1);
+  float("u_offsetX", 0);
+  float("u_offsetY", 0);
+  const max = MAX_COLORS[job.variant];
+  const fill = (colors) => {
+    const flat = new Float32Array(max * 4);
+    colors.slice(0, max).forEach((color, i) => flat.set(color, i * 4));
+    gl.uniform4fv(at("u_colors"), flat);
+    float("u_colorsCount", Math.min(colors.length, max));
+  };
+  if (job.variant === "mesh") {
+    float("u_scale", 0.72);
+    float("u_rotation", job.seed * 360);
+    fill(job.colors);
+    float("u_positions", job.seed * 100);
+    float("u_waveX", job.warp);
+    float("u_waveXShift", job.seed);
+    float("u_waveY", job.warp);
+    float("u_waveYShift", job.seed * 7.3 % 1);
+    float("u_mixing", job.softness);
+    float("u_grainMixer", job.grain * 0.6);
+    float("u_grainOverlay", job.grain);
+  } else {
+    const [ground2 = [0, 0, 0, 1], ...bands] = job.colors;
+    float("u_rotation", job.seed * 360);
+    gl.uniform4fv(at("u_colorBack"), ground2);
+    fill(bands.length ? bands : [ground2]);
+    float("u_time", job.seed * 100);
+    float("u_softness", job.softness * 0.8);
+    float("u_intensity", 0.15 + job.warp * 0.2);
+    float("u_noise", 0.15 + job.grain * 0.5);
+    float("u_shape", GRAIN_CORNERS);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, s.noise);
+    gl.uniform1i(at("u_noiseTexture"), 0);
+  }
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  if (target.width !== width || target.height !== height) {
+    target.width = width;
+    target.height = height;
+  }
+  const context = target.getContext("2d");
+  if (!context) return false;
+  context.clearRect(0, 0, width, height);
+  context.drawImage(canvas, 0, 0);
+  return true;
+}
+var swatch;
+var parsed = /* @__PURE__ */ new Map();
+function cssColorToRgba(color) {
+  const hit = parsed.get(color);
+  if (hit) return hit;
+  if (swatch === void 0) {
+    swatch = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+    if (swatch) swatch.canvas.width = swatch.canvas.height = 1;
+  }
+  if (!swatch) return null;
+  swatch.clearRect(0, 0, 1, 1);
+  swatch.fillStyle = "transparent";
+  swatch.fillStyle = color;
+  swatch.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = swatch.getImageData(0, 0, 1, 1).data;
+  const out = [r / 255, g / 255, b / 255, a / 255];
+  if (parsed.size > 512) parsed.clear();
+  parsed.set(color, out);
+  return out;
+}
+var themeListeners = /* @__PURE__ */ new Set();
+var observer = null;
+var pending = 0;
+function onThemeChange(listener) {
+  themeListeners.add(listener);
+  if (!observer && typeof MutationObserver !== "undefined") {
+    const notify = () => {
+      if (pending) return;
+      pending = requestAnimationFrame(() => {
+        pending = 0;
+        for (const fn of themeListeners) fn();
+      });
+    };
+    observer = new MutationObserver(notify);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style", "data-sable-theme"] });
+    observer.observe(document.head, { childList: true, subtree: true, characterData: true });
+  }
+  return () => {
+    themeListeners.delete(listener);
+    if (!themeListeners.size && observer) {
+      observer.disconnect();
+      observer = null;
+      cancelAnimationFrame(pending);
+      pending = 0;
+    }
+  };
+}
+var ART_SLOTS = ["var(--art-1)", "var(--art-2)", "var(--art-3)", "var(--art-4)", "var(--art-5)", "var(--art-6)"];
+var ART_GROUND = "var(--art-ground)";
+var lifted = (tone) => `oklch(from var(--tone-${tone}) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h)`;
+var ground = (tone) => `color-mix(in oklab, var(--primary) 55%, oklch(from var(--tone-${tone}) 0.3 c h))`;
+function seedValue(seed) {
+  if (seed == null) return 0.37;
+  if (typeof seed === "number") return Math.abs(seed * 0.618034) % 1;
+  let hash = 2166136261;
+  for (let i = 0; i < seed.length; i++) {
+    hash ^= seed.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0) / 4294967296;
+}
+function fallback(palette, groundColor, seed) {
+  const spots = palette.map((color, i) => {
+    const angle = (seed + i / palette.length) * Math.PI * 2;
+    const x = Math.round(50 + Math.cos(angle) * 38);
+    const y = Math.round(50 + Math.sin(angle) * 38);
+    return `radial-gradient(in oklab at ${x}% ${y}%, ${color}, transparent 60%)`;
+  });
+  return [...spots, groundColor].join(", ");
+}
+function rotate(items, seed) {
+  if (items.length < 2) return [...items];
+  const shift = Math.floor(seed * 7919) % items.length;
+  return [...items.slice(shift), ...items.slice(0, shift)];
+}
+function param(style, name, fallbackValue) {
+  const n = Number.parseFloat(style.getPropertyValue(name));
+  return Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : fallbackValue;
+}
+var MAX_PIXELS = 15e5;
+function GradientArt({ variant = "mesh", tones, seed, className, style, children, ...props }) {
+  const root = useRef(null);
+  const canvas = useRef(null);
+  const probes = useRef(null);
+  const value = seedValue(seed);
+  const palette = tones?.length ? tones.map(lifted) : ART_SLOTS;
+  const groundColor = tones?.length ? ground(tones[0]) : ART_GROUND;
+  const paletteKey = palette.join(" ");
+  const background = fallback(rotate(palette, value), groundColor, value);
+  useEffect(() => {
+    const element = root.current;
+    const target = canvas.current;
+    const swatches = probes.current;
+    if (!element || !target || !swatches || !artSupported()) return;
+    if (typeof IntersectionObserver === "undefined" || typeof ResizeObserver === "undefined") return;
+    let visible = false;
+    let frame = 0;
+    let last = "";
+    const paint = () => {
+      frame = 0;
+      if (!visible) return;
+      const rect = element.getBoundingClientRect();
+      if (!rect.width || !rect.height) return;
+      let ratio = Math.min(window.devicePixelRatio || 1, 2);
+      const pixels = rect.width * rect.height * ratio * ratio;
+      if (pixels > MAX_PIXELS) ratio *= Math.sqrt(MAX_PIXELS / pixels);
+      const width = Math.max(1, Math.round(rect.width * ratio));
+      const height = Math.max(1, Math.round(rect.height * ratio));
+      const resolve = (probe) => cssColorToRgba(getComputedStyle(probe).color);
+      const [groundProbe, ...colorProbes] = Array.from(swatches.children);
+      const colors = rotate(
+        colorProbes.map(resolve).filter((c) => c != null && c[3] > 0.01),
+        value
+      );
+      const groundRgba = groundProbe ? resolve(groundProbe) : null;
+      if (!colors.length) return;
+      const own = getComputedStyle(element);
+      const character = { warp: param(own, "--art-warp", 0.8), softness: param(own, "--art-softness", 0.88), grain: param(own, "--art-grain", 0) };
+      const key = JSON.stringify([variant, value, width, height, colors, groundRgba, character]);
+      if (key === last) return;
+      const ordered = variant === "grain" && groundRgba ? [groundRgba, ...colors] : colors;
+      if (paintArt(target, { variant, colors: ordered, seed: value, width, height, pixelRatio: ratio, ...character })) {
+        last = key;
+        target.dataset.painted = "";
+      }
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(paint);
+    };
+    const repaint = () => {
+      last = "";
+      schedule();
+    };
+    const intersection = new IntersectionObserver(
+      ([entry]) => {
+        visible = entry.isIntersecting;
+        if (visible) schedule();
+      },
+      { rootMargin: "200px" }
+    );
+    intersection.observe(element);
+    const resize = new ResizeObserver(schedule);
+    resize.observe(element);
+    const offTheme = onThemeChange(schedule);
+    const offInvalidate = onArtInvalidate(repaint);
+    return () => {
+      cancelAnimationFrame(frame);
+      intersection.disconnect();
+      resize.disconnect();
+      offTheme();
+      offInvalidate();
+    };
+  }, [variant, value, paletteKey]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      "data-slot": "gradient-art",
+      "data-variant": variant,
+      className: cn("relative isolate overflow-hidden", className),
+      style: { background, ...style },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvas,
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 -z-10 size-full opacity-0 motion-interactive data-[painted]:opacity-100",
+            style: { transitionProperty: "opacity" }
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { ref: probes, hidden: true, children: [
+          /* @__PURE__ */ jsx("span", { style: { color: groundColor } }),
+          palette.map((color) => /* @__PURE__ */ jsx("span", { style: { color } }, color))
+        ] }),
+        children
+      ]
+    }
+  );
+}
+GradientArt.displayName = "GradientArt";
+
+// src/components/gradient-art/gradient-art.meta.ts
+var gradientArtMeta = {
+  name: "GradientArt",
+  summary: "Placeholder artwork painted by a static WebGL shader from the preset's own art direction (the --art-* tokens: palette, ground, warp, softness, grain) \u2014 Ember burns, Prism airbrushes, Meridian is grainy monochrome \u2014 with a CSS gradient underneath for prerendered pages and browsers without WebGL2.",
+  status: "beta",
+  keywords: ["gradient", "mesh gradient", "grain", "shader", "artwork", "placeholder image", "cover", "banner", "avatar fallback", "generative"],
+  usage: {
+    description: "Use GradientArt where a real image belongs but none exists yet, or where the image is decoration: a product cover before upload, a profile banner, an album tile, an avatar with no photo. It reads the theme's own tokens, so it follows every preset, mode and live edit; `seed` fixes each item's composition so a list of covers or avatars stays individually recognisable.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Pass a stable `seed` per item \u2014 the name for an avatar, the title for a cover. Each item then keeps the same art across renders, reloads and themes, which is what lets someone recognise it."
+      },
+      {
+        guidance: "do",
+        description: "Size it with layout classes (`aspect-[4/3]`, `h-20`, `size-10 rounded-full`) and put any glyph or initials inside as children; they render above the art."
+      },
+      {
+        guidance: "do",
+        description: "Keep the default `mesh` for covers, tiles and avatars. Reach for `grain` where a printed, tactile surface suits \u2014 a banner, a hero card \u2014 and keep one variant per surface type so art reads as a system."
+      },
+      {
+        guidance: "dont",
+        description: "Do not put body text over it. The art spans the palette's lightest and most saturated tones, so no single ink is guaranteed to clear contrast across it; reserve overlays for a short label on a scrim or an avatar's initials."
+      },
+      {
+        guidance: "dont",
+        description: "Do not pass colours, and reach for `tones` rarely. The art follows the preset's --art-* tokens on purpose; to change how a product's art looks, set the --theme-art-* hooks in its theme or preset, so every cover, banner and avatar changes together."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it as a page or hero background. It paints at the element's pixel size, so a full-viewport instance costs a large frame on every theme change; it is sized for covers, banners and tiles."
+      }
+    ]
+  },
+  related: { components: ["Avatar", "Card", "AspectBox"] },
+  props: [
+    { name: "variant", type: '"mesh" | "grain"', default: '"mesh"', description: "mesh: soft spots of colour pulled together by gentle waves. grain: glowing light over deep corners with a printed texture." },
+    {
+      name: "tones",
+      type: '("info" | "standard" | "collectible" | "edition" | "warning")[]',
+      description: "Paint these `--tone-*` colours instead of the preset's art palette. Leave unset to follow the preset's art direction."
+    },
+    { name: "seed", type: "string | number", description: "Fixes the composition: the same seed paints the same art in every theme. Pass a stable id." },
+    { name: "children", type: "ReactNode", description: "Rendered above the art \u2014 initials, a glyph, a short label." },
+    { name: "className", type: "string", description: "Size and shape: aspect, height, rounding." }
+  ],
+  variants: { variant: ["mesh", "grain"] },
+  tokensUsed: ["art-1", "art-2", "art-3", "art-4", "art-5", "art-6", "art-ground", "art-warp", "art-softness", "art-grain", "primary", "tone-info", "tone-standard", "tone-collectible", "tone-edition", "tone-warning"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "motion-interactive",
+      part: "canvas",
+      why: "The shader frame fades in over the CSS gradient it replaces, so the swap from fallback to shader reads as the art settling rather than a flash."
+    },
+    { slot: "response", recipe: "none", part: "root", why: "Artwork, not a control: it does not react to the pointer." },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "canvas",
+      why: "A theme change repaints the frame in place on the next animation frame; there are no states to move between."
+    },
+    { slot: "activity", recipe: "none", part: "root", why: "Static by design: nothing animates between paints, so it costs nothing while idle and respects reduced motion without a branch." }
+  ],
+  a11y: [
+    "Decorative by default: the canvas is aria-hidden. When the art stands for something (an avatar), label the element that contains it, not the art.",
+    "Children render above the art in the normal reading order, so initials or a label are announced as usual."
+  ],
+  examples: [
+    { label: "Product cover", code: '<GradientArt seed="Untitled (gold rush)" className="aspect-[4/3] rounded-lg" />' },
+    { label: "Grain banner", code: '<GradientArt variant="grain" seed="juno" tones={["info", "edition"]} className="h-20 rounded-md" />' },
+    {
+      label: "Avatar with initials",
+      code: '<GradientArt seed="Mara Okafor" className="grid size-10 place-items-center rounded-full text-label-md text-overlay-foreground">MO</GradientArt>'
+    }
+  ]
+};
 var avatarVariants = cva(
   "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-muted",
   {
@@ -3111,17 +3664,22 @@ AvatarFallback.displayName = "AvatarFallback";
 function Avatar({
   src,
   alt,
-  fallback,
+  fallback: fallback2,
   fallbackDelay,
   size,
   status,
+  variant = "neutral",
+  seed,
   className,
   ...props
 }) {
   const named = !src && alt ? { role: "img", "aria-label": alt } : null;
   const avatar = /* @__PURE__ */ jsxs(AvatarRoot, { size, className: status == null ? className : void 0, ...named, ...props, children: [
     src ? /* @__PURE__ */ jsx(AvatarImage, { src, alt: alt ?? "" }) : null,
-    /* @__PURE__ */ jsx(AvatarFallback, { delay: fallbackDelay, "aria-hidden": named ? true : void 0, children: fallback })
+    variant === "art" ? /* @__PURE__ */ jsx(AvatarFallback, { delay: fallbackDelay, "aria-hidden": named ? true : void 0, className: "size-full", children: /* @__PURE__ */ jsxs(GradientArt, { seed: seed ?? (typeof fallback2 === "string" && fallback2 || alt || void 0), className: "flex size-full items-center justify-center text-overlay-foreground", children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-0 bg-overlay/30" }),
+      /* @__PURE__ */ jsx("span", { className: "relative", children: fallback2 })
+    ] }) }) : /* @__PURE__ */ jsx(AvatarFallback, { delay: fallbackDelay, "aria-hidden": named ? true : void 0, children: fallback2 })
   ] });
   if (status == null) return avatar;
   return /* @__PURE__ */ jsxs("span", { "data-slot": "avatar-status-anchor", className: cn("relative inline-flex shrink-0 rounded-full", className), children: [
@@ -3247,6 +3805,10 @@ var avatarMeta = {
   usage: {
     description: 'Use Avatar to represent a person, team, or account with a compact visual identity. Wrap several in AvatarGroup for collaborators, assignees, or attendees \u2014 it overlaps them, rings each in the surface colour, and collapses the rest into a "+N" count; use the low-level parts only when you need custom image/fallback layout.',
     bestPractices: [
+      {
+        guidance: "do",
+        description: 'Use `variant="art"` where people without photos sit side by side \u2014 a member list, an activity feed, a chat. Seeded by the person, each gets their own colour, so faces stay tellable apart at a glance; the neutral fallback makes everyone the same grey circle.'
+      },
       {
         guidance: "do",
         description: "Provide meaningful alt text for profile images, or an empty alt when the adjacent text already names the person."
@@ -3341,6 +3903,17 @@ var avatarMeta = {
       type: '"sm" | "md" | "lg"',
       default: '"md"',
       description: "Square footprint: 32px / 40px / 48px."
+    },
+    {
+      name: "variant",
+      type: '"neutral" | "art"',
+      default: '"neutral"',
+      description: "What the fallback looks like. neutral: initials on the muted surface. art: initials over GradientArt seeded by the person, so each person without a photo gets their own stable colour from the theme."
+    },
+    {
+      name: "seed",
+      type: "string | number",
+      description: "The art variant's seed. Defaults to the fallback text, then `alt`, so a person keeps one colour wherever they appear; pass a user id to tell apart two people who share initials."
     }
   ],
   subcomponents: [
@@ -3371,9 +3944,10 @@ var avatarMeta = {
     }
   ],
   variants: {
-    size: ["sm", "md", "lg"]
+    size: ["sm", "md", "lg"],
+    variant: ["neutral", "art"]
   },
-  tokensUsed: ["muted", "muted-foreground", "background", "card", "popover"],
+  tokensUsed: ["muted", "muted-foreground", "background", "card", "popover", "overlay", "overlay-foreground"],
   a11y: [
     "Base UI tracks the image loading status and swaps to the fallback on missing/loading/error \u2014 no manual onError wiring.",
     "Provide meaningful alt text via the alt prop; pass an empty alt for decorative avatars.",
@@ -3390,6 +3964,10 @@ var avatarMeta = {
       label: "Fallback only",
       code: '<Avatar fallback="AM" alt="Alex Morgan" />'
     },
+    {
+      label: "Art fallback",
+      code: '<Avatar variant="art" fallback="AM" alt="Alex Morgan" />'
+    },
     {
       label: "Sizes",
       code: '<Avatar src="/pfp.png" alt="Alex Morgan" fallback="AM" size="sm" />\n<Avatar src="/pfp.png" alt="Alex Morgan" fallback="AM" size="md" />\n<Avatar src="/pfp.png" alt="Alex Morgan" fallback="AM" size="lg" />'
@@ -4120,9 +4698,11 @@ function MenuContent({
 }
 var MENU_ITEM_DESTRUCTIVE = (
   // The ink is pulled a quarter toward --foreground (as Badge's soft tones
-  // are): raw dark-mode destructive on the popover's 10% red wash measured
-  // 3.5-4.0:1 across themes. It reads as the same red and clears 4.5:1.
-  "text-[color-mix(in_oklch,var(--destructive)_75%,var(--foreground))] data-[highlighted]:bg-destructive/10 data-[highlighted]:text-[color-mix(in_oklch,var(--destructive)_75%,var(--foreground))]"
+  // are), from --destructive-text rather than the fill: dark fills sit low
+  // enough for a white label, and ink mixed from them measured 3.8:1 on
+  // Meridian's popover. From the text token every theme clears 4.5:1 (worst
+  // 5.4:1, Prism dark, on the 10% red wash).
+  "text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))] data-[highlighted]:bg-destructive/10 data-[highlighted]:text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))]"
 );
 function MenuItem({ className, variant = "default", ...props }) {
   const tier = useTypeTier();
@@ -5634,7 +6214,7 @@ function DestructiveActionModal({
   confirmLabel = "Delete",
   cancelLabel = "Cancel",
   onConfirm,
-  pending,
+  pending: pending2,
   confirmingLabel,
   children,
   confirmText
@@ -5643,8 +6223,8 @@ function DestructiveActionModal({
   const [internalBusy, setInternalBusy] = useState(false);
   const inFlight = useRef(false);
   const cancelRef = useRef(null);
-  const controlledPending = pending !== void 0;
-  const busy = pending ?? internalBusy;
+  const controlledPending = pending2 !== void 0;
+  const busy = pending2 ?? internalBusy;
   useEffect(() => {
     if (!open) {
       setTyped("");
@@ -6838,4 +7418,4 @@ var attachmentMeta = {
   ]
 };
 
-export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, Attachment, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, Bubble, BubbleReaction, BubbleReactions, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Code, CodeBlock, CodeHighlightProvider, Density, DensityProvider, DestructiveActionModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Entity, FIELD_INVALID, FIELD_SHELL, FIELD_SHELL_XS, Field, Form, HighlightGlide, Input, Label, MENU_ITEM_DESTRUCTIVE, MOBILE_FIELD_TIER, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, MotionProvider, OverflowMenu, Pill, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleTooltip, Spinner, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, anchoredListScroll, anchoredScroll, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bubbleMeta, buttonMeta, buttonVariants, cardMeta, codeBlockMeta, codeMeta, destructiveActionModalMeta, dialogMeta, entityMeta, formMeta, inputMeta, labelMeta, menuMeta, mergeRefs, messageMeta, overflowMenuMeta, pillVariants, progressMeta, progressTrackVariants, selectMeta, separatorMeta, setRef, spinnerMeta, statusDotMeta, statusDotVariants, switchMeta, tableMeta, textareaMeta, tooltipMeta, trimLabel, useAnchoredDensity, useCopy, useDensity, useEdgeFade, useIsomorphicLayoutEffect, useMotion, useReducedMotion, useResizeObserver, useScrollActivity, useTypeTier, withPortalThemeScope };
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, Attachment, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, Bubble, BubbleReaction, BubbleReactions, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Code, CodeBlock, CodeHighlightProvider, Density, DensityProvider, DestructiveActionModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Entity, FIELD_INVALID, FIELD_SHELL, FIELD_SHELL_XS, Field, Form, GradientArt, HighlightGlide, Input, Label, MENU_ITEM_DESTRUCTIVE, MOBILE_FIELD_TIER, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, MotionProvider, OverflowMenu, Pill, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleTooltip, Spinner, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, anchoredListScroll, anchoredScroll, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bubbleMeta, buttonMeta, buttonVariants, cardMeta, codeBlockMeta, codeMeta, destructiveActionModalMeta, dialogMeta, entityMeta, formMeta, gradientArtMeta, inputMeta, labelMeta, menuMeta, mergeRefs, messageMeta, overflowMenuMeta, pillVariants, progressMeta, progressTrackVariants, selectMeta, separatorMeta, setRef, spinnerMeta, statusDotMeta, statusDotVariants, switchMeta, tableMeta, textareaMeta, tooltipMeta, trimLabel, useAnchoredDensity, useCopy, useDensity, useEdgeFade, useIsomorphicLayoutEffect, useMotion, useReducedMotion, useResizeObserver, useScrollActivity, useTypeTier, withPortalThemeScope };