@zendir/ui 0.4.1 → 0.6.0

package/dist/react/core/widgets/ImageFrame.js

@@ -1,201 +1,238 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useRef, useMemo, useEffect } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames, lerp } from "../../utils/index.js";
-const DEFAULT_MAX_ADU = 65535;
-const COLORMAPS = {
-  // Dark teal → yellow; a cividis-style ramp that reads well on dark UI.
-  cividis: (t) => [lerp(42, 237, t), lerp(123, 222, t), lerp(155, 83, t)],
-  gray: (t) => {
-    const v = lerp(0, 255, t);
-    return [v, v, v];
-  }
+import { memo, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/widgets/ImageFrame.tsx
+/**
+* @zendir/ui - ImageFrame Component
+*
+* Renders a single-channel data frame (e.g. a CCD/sensor readout) as a
+* false-colour image on a <canvas>. Purely presentational: hand it an
+* array of samples and it paints them — it has no knowledge of where
+* the data came from (engine, file, websocket, console). This is the
+* reusable surface that callers "dump" a frame into.
+*
+* Pipeline per sample: normalise against a fixed ceiling (`maxADU`) to
+* an intensity in [0,1], run that through a colormap, pack RGBA. The
+* default `cividis` ramp (dark teal → yellow) reads well on dark UI.
+*
+* The canvas's native resolution is the frame's width×height, so each
+* sample is exactly one pixel; CSS scales it up with
+* `image-rendering: pixelated`, keeping small sensor frames crisp.
+*
+* Astro UX Compliance:
+* - Themed surface, border radius, and typography via `useTheme`.
+* - Loading and empty states with friendly messaging.
+* - Monospace raw-value grid for analysis.
+*
+* @example
+* ```tsx
+* <ImageFrame
+*   data={ccdSamples}      // number[] length = width*height
+*   width={28}
+*   maxADU={65535}
+*   title="CCD capture"
+*   showValues
+* />
+* ```
+*/
+var DEFAULT_MAX_ADU = 65535;
+/** Two-stop colormaps: intensity t in [0,1] → [r,g,b] (0..255). */
+var COLORMAPS = {
+	cividis: (t) => [
+		lerp(42, 237, t),
+		lerp(123, 222, t),
+		lerp(155, 83, t)
+	],
+	gray: (t) => {
+		const v = lerp(0, 255, t);
+		return [
+			v,
+			v,
+			v
+		];
+	}
 };
+/**
+* decodeImage — pure transform: single-channel samples → canvas-ready
+* RGBA. Fixed-ceiling normalisation (`sample / maxADU`) so the output
+* reflects the real signal level relative to saturation rather than
+* rescaling per frame. Returns null on invalid input.
+*/
 function decodeImage(opts) {
-  const { data, width, height, maxADU = DEFAULT_MAX_ADU, colormap = "cividis" } = opts;
-  if (!Array.isArray(data)) return null;
-  if (!Number.isFinite(width) || width <= 0) return null;
-  const W = Math.floor(width);
-  const H = Number.isFinite(height) && height > 0 ? Math.floor(height) : W;
-  if (data.length !== W * H) return null;
-  const ramp = COLORMAPS[colormap] || COLORMAPS.cividis;
-  const ceiling = Number.isFinite(maxADU) && maxADU > 0 ? maxADU : DEFAULT_MAX_ADU;
-  const pixels = new Uint8ClampedArray(W * H * 4);
-  for (let i = 0; i < W * H; i++) {
-    const raw = data[i];
-    const t = Number.isFinite(raw) ? raw / ceiling : 0;
-    const [r, g, b] = ramp(t);
-    const off = i * 4;
-    pixels[off + 0] = r;
-    pixels[off + 1] = g;
-    pixels[off + 2] = b;
-    pixels[off + 3] = 255;
-  }
-  return { width: W, height: H, pixels };
+	const { data, width, height, maxADU = DEFAULT_MAX_ADU, colormap = "cividis" } = opts;
+	if (!Array.isArray(data)) return null;
+	if (!Number.isFinite(width) || width <= 0) return null;
+	const W = Math.floor(width);
+	const H = Number.isFinite(height) && height > 0 ? Math.floor(height) : W;
+	if (data.length !== W * H) return null;
+	const ramp = COLORMAPS[colormap] || COLORMAPS.cividis;
+	const ceiling = Number.isFinite(maxADU) && maxADU > 0 ? maxADU : DEFAULT_MAX_ADU;
+	const pixels = new Uint8ClampedArray(W * H * 4);
+	for (let i = 0; i < W * H; i++) {
+		const raw = data[i];
+		const [r, g, b] = ramp(Number.isFinite(raw) ? raw / ceiling : 0);
+		const off = i * 4;
+		pixels[off + 0] = r;
+		pixels[off + 1] = g;
+		pixels[off + 2] = b;
+		pixels[off + 3] = 255;
+	}
+	return {
+		width: W,
+		height: H,
+		pixels
+	};
 }
+/** Pretty-print samples as a width-padded grid for the values view. */
 function formatValues(data, width, height, maxADU) {
-  if (width * height !== data.length) return data.join(", ");
-  const colW = Math.max(3, String(Math.floor(maxADU) || 1).length);
-  const rows = [];
-  for (let y = 0; y < height; y++) {
-    const cells = [];
-    for (let x = 0; x < width; x++) {
-      cells.push(String(data[y * width + x]).padStart(colW, " "));
-    }
-    rows.push(cells.join(" "));
-  }
-  return rows.join("\n");
+	if (width * height !== data.length) return data.join(", ");
+	const colW = Math.max(3, String(Math.floor(maxADU) || 1).length);
+	const rows = [];
+	for (let y = 0; y < height; y++) {
+		const cells = [];
+		for (let x = 0; x < width; x++) cells.push(String(data[y * width + x]).padStart(colW, " "));
+		rows.push(cells.join(" "));
+	}
+	return rows.join("\n");
 }
-const ImageFrame = memo(function ImageFrame2({
-  data,
-  pixels,
-  width,
-  height,
-  maxADU = DEFAULT_MAX_ADU,
-  colormap = "cividis",
-  showValues = false,
-  title,
-  loading = false,
-  emptyMessage = "No frame to display.",
-  className = ""
-}) {
-  const { tokens } = useTheme();
-  const canvasRef = useRef(null);
-  const H = Number.isFinite(height) && height > 0 ? Math.floor(height) : Math.floor(width);
-  const W = Math.floor(width);
-  const decoded = useMemo(() => {
-    if (pixels instanceof Uint8ClampedArray && pixels.length === W * H * 4) {
-      return { width: W, height: H, pixels };
-    }
-    if (Array.isArray(data)) {
-      return decodeImage({ data, width: W, height: H, maxADU, colormap });
-    }
-    return null;
-  }, [data, pixels, W, H, maxADU, colormap]);
-  useEffect(() => {
-    if (!decoded) return;
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    canvas.width = decoded.width;
-    canvas.height = decoded.height;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    const img = ctx.createImageData(decoded.width, decoded.height);
-    img.data.set(decoded.pixels);
-    ctx.putImageData(img, 0, 0);
-  }, [decoded]);
-  const surfaceStyle = {
-    backgroundColor: tokens.colors.background.surface,
-    borderRadius: tokens.borderRadius.lg,
-    padding: tokens.spacing.md,
-    color: tokens.colors.text.primary,
-    fontFamily: tokens.typography.fontFamily.primary,
-    display: "flex",
-    flexDirection: "column",
-    gap: tokens.spacing.sm
-  };
-  if (loading) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: classNames("zendir-image-frame", "loading", className),
-        role: "img",
-        "aria-busy": "true",
-        "aria-label": "Loading image",
-        style: surfaceStyle,
-        children: [
-          title && /* @__PURE__ */ jsx(FrameTitle, { tokens, title }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                width: "100%",
-                aspectRatio: `${W} / ${H}`,
-                background: "rgba(255,255,255,0.06)",
-                borderRadius: tokens.borderRadius.sm
-              }
-            }
-          )
-        ]
-      }
-    );
-  }
-  if (!decoded) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: classNames("zendir-image-frame", "empty", className),
-        role: "img",
-        "aria-label": "No image",
-        style: { ...surfaceStyle, textAlign: "center", color: tokens.colors.text.tertiary },
-        children: [
-          title && /* @__PURE__ */ jsx(FrameTitle, { tokens, title }),
-          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: tokens.typography.fontSize.xs }, children: emptyMessage })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames("zendir-image-frame", className),
-      "aria-label": title || "Image frame",
-      style: surfaceStyle,
-      children: [
-        title && /* @__PURE__ */ jsx(FrameTitle, { tokens, title }),
-        /* @__PURE__ */ jsx(
-          "canvas",
-          {
-            ref: canvasRef,
-            "data-testid": "image-frame-canvas",
-            style: {
-              width: "100%",
-              aspectRatio: `${decoded.width} / ${decoded.height}`,
-              imageRendering: "pixelated",
-              display: "block",
-              background: "rgba(0,0,0,0.4)",
-              borderRadius: tokens.borderRadius.sm
-            }
-          }
-        ),
-        showValues && Array.isArray(data) && /* @__PURE__ */ jsx(
-          "pre",
-          {
-            "data-testid": "image-frame-values",
-            style: {
-              margin: 0,
-              padding: tokens.spacing.sm,
-              background: "rgba(0,0,0,0.45)",
-              borderRadius: tokens.borderRadius.sm,
-              color: tokens.colors.text.primary,
-              fontSize: 10,
-              lineHeight: 1.25,
-              fontFamily: tokens.typography.fontFamily.mono,
-              whiteSpace: "pre",
-              overflow: "auto",
-              maxHeight: 220
-            },
-            children: formatValues(data, decoded.width, decoded.height, maxADU)
-          }
-        )
-      ]
-    }
-  );
+var ImageFrame = memo(function ImageFrame({ data, pixels, width, height, maxADU = DEFAULT_MAX_ADU, colormap = "cividis", showValues = false, title, loading = false, emptyMessage = "No frame to display.", className = "" }) {
+	const { tokens } = useTheme();
+	const canvasRef = useRef(null);
+	const H = Number.isFinite(height) && height > 0 ? Math.floor(height) : Math.floor(width);
+	const W = Math.floor(width);
+	const decoded = useMemo(() => {
+		if (pixels instanceof Uint8ClampedArray && pixels.length === W * H * 4) return {
+			width: W,
+			height: H,
+			pixels
+		};
+		if (Array.isArray(data)) return decodeImage({
+			data,
+			width: W,
+			height: H,
+			maxADU,
+			colormap
+		});
+		return null;
+	}, [
+		data,
+		pixels,
+		W,
+		H,
+		maxADU,
+		colormap
+	]);
+	useEffect(() => {
+		if (!decoded) return;
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		canvas.width = decoded.width;
+		canvas.height = decoded.height;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		const img = ctx.createImageData(decoded.width, decoded.height);
+		img.data.set(decoded.pixels);
+		ctx.putImageData(img, 0, 0);
+	}, [decoded]);
+	const surfaceStyle = {
+		backgroundColor: tokens.colors.background.surface,
+		borderRadius: tokens.borderRadius.lg,
+		padding: tokens.spacing.md,
+		color: tokens.colors.text.primary,
+		fontFamily: tokens.typography.fontFamily.primary,
+		display: "flex",
+		flexDirection: "column",
+		gap: tokens.spacing.sm
+	};
+	if (loading) return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-image-frame", "loading", className),
+		role: "img",
+		"aria-busy": "true",
+		"aria-label": "Loading image",
+		style: surfaceStyle,
+		children: [title && /* @__PURE__ */ jsx(FrameTitle, {
+			tokens,
+			title
+		}), /* @__PURE__ */ jsx("div", { style: {
+			width: "100%",
+			aspectRatio: `${W} / ${H}`,
+			background: "rgba(255,255,255,0.06)",
+			borderRadius: tokens.borderRadius.sm
+		} })]
+	});
+	if (!decoded) return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-image-frame", "empty", className),
+		role: "img",
+		"aria-label": "No image",
+		style: {
+			...surfaceStyle,
+			textAlign: "center",
+			color: tokens.colors.text.tertiary
+		},
+		children: [title && /* @__PURE__ */ jsx(FrameTitle, {
+			tokens,
+			title
+		}), /* @__PURE__ */ jsx("p", {
+			style: {
+				margin: 0,
+				fontSize: tokens.typography.fontSize.xs
+			},
+			children: emptyMessage
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-image-frame", className),
+		"aria-label": title || "Image frame",
+		style: surfaceStyle,
+		children: [
+			title && /* @__PURE__ */ jsx(FrameTitle, {
+				tokens,
+				title
+			}),
+			/* @__PURE__ */ jsx("canvas", {
+				ref: canvasRef,
+				"data-testid": "image-frame-canvas",
+				style: {
+					width: "100%",
+					aspectRatio: `${decoded.width} / ${decoded.height}`,
+					imageRendering: "pixelated",
+					display: "block",
+					background: "rgba(0,0,0,0.4)",
+					borderRadius: tokens.borderRadius.sm
+				}
+			}),
+			showValues && Array.isArray(data) && /* @__PURE__ */ jsx("pre", {
+				"data-testid": "image-frame-values",
+				style: {
+					margin: 0,
+					padding: tokens.spacing.sm,
+					background: "rgba(0,0,0,0.45)",
+					borderRadius: tokens.borderRadius.sm,
+					color: tokens.colors.text.primary,
+					fontSize: 10,
+					lineHeight: 1.25,
+					fontFamily: tokens.typography.fontFamily.mono,
+					whiteSpace: "pre",
+					overflow: "auto",
+					maxHeight: 220
+				},
+				children: formatValues(data, decoded.width, decoded.height, maxADU)
+			})
+		]
+	});
 });
-const FrameTitle = ({ tokens, title }) => /* @__PURE__ */ jsx(
-  "h3",
-  {
-    style: {
-      margin: 0,
-      fontSize: tokens.typography.fontSize.md,
-      fontWeight: tokens.typography.fontWeight.semibold,
-      color: tokens.colors.text.primary
-    },
-    children: title
-  }
-);
-export {
-  ImageFrame,
-  decodeImage
-};
-//# sourceMappingURL=ImageFrame.js.map
+/** Small header row shared across states. */
+var FrameTitle = ({ tokens, title }) => /* @__PURE__ */ jsx("h3", {
+	style: {
+		margin: 0,
+		fontSize: tokens.typography.fontSize.md,
+		fontWeight: tokens.typography.fontWeight.semibold,
+		color: tokens.colors.text.primary
+	},
+	children: title
+});
+//#endregion
+export { ImageFrame, ImageFrame as default, decodeImage };
+
+//# sourceMappingURL=ImageFrame.js.map

package/dist/react/core/widgets/ImageFrame.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageFrame.js","sources":["../../../../src/react/core/widgets/ImageFrame.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - ImageFrame Component\r\n *\r\n * Renders a single-channel data frame (e.g. a CCD/sensor readout) as a\r\n * false-colour image on a <canvas>. Purely presentational: hand it an\r\n * array of samples and it paints them — it has no knowledge of where\r\n * the data came from (engine, file, websocket, console). This is the\r\n * reusable surface that callers \"dump\" a frame into.\r\n *\r\n * Pipeline per sample: normalise against a fixed ceiling (`maxADU`) to\r\n * an intensity in [0,1], run that through a colormap, pack RGBA. The\r\n * default `cividis` ramp (dark teal → yellow) reads well on dark UI.\r\n *\r\n * The canvas's native resolution is the frame's width×height, so each\r\n * sample is exactly one pixel; CSS scales it up with\r\n * `image-rendering: pixelated`, keeping small sensor frames crisp.\r\n *\r\n * Astro UX Compliance:\r\n * - Themed surface, border radius, and typography via `useTheme`.\r\n * - Loading and empty states with friendly messaging.\r\n * - Monospace raw-value grid for analysis.\r\n *\r\n * @example\r\n * ```tsx\r\n * <ImageFrame\r\n *   data={ccdSamples}      // number[] length = width*height\r\n *   width={28}\r\n *   maxADU={65535}\r\n *   title=\"CCD capture\"\r\n *   showValues\r\n * />\r\n * ```\r\n */\r\n\r\nimport React, { memo, useEffect, useMemo, useRef } from 'react';\r\nimport { useTheme } from '../../theme';\r\nimport { classNames, lerp } from '../../utils';\r\n\r\n// =============================================================================\r\n// Types\r\n// =============================================================================\r\n\r\n/** Built-in colormap names. */\r\nexport type ImageColormap = 'cividis' | 'gray';\r\n\r\nexport interface ImageFrameProps {\r\n  /** Flat, row-major single-channel samples. Length must equal width*height. */\r\n  data?: number[];\r\n  /**\r\n   * Pre-decoded RGBA pixels (length = width*height*4). When provided this\r\n   * is painted directly and `data` / `maxADU` / `colormap` are ignored.\r\n   * Escape hatch for callers that already have an image buffer.\r\n   */\r\n  pixels?: Uint8ClampedArray;\r\n  /** Frame width in pixels. */\r\n  width: number;\r\n  /** Frame height in pixels. Defaults to `width` (square). */\r\n  height?: number;\r\n  /** Saturation ceiling used to normalise `data` → [0,1]. Default 65535. */\r\n  maxADU?: number;\r\n  /** Colormap applied to normalised intensities. Default 'cividis'. */\r\n  colormap?: ImageColormap;\r\n  /** Show the raw sample values as a grid below the image. Default false. */\r\n  showValues?: boolean;\r\n  /** Optional title shown above the image. */\r\n  title?: string;\r\n  /** Loading state (skeleton). */\r\n  loading?: boolean;\r\n  /** Message shown when there is no frame to display. */\r\n  emptyMessage?: string;\r\n  /** Custom class name. */\r\n  className?: string;\r\n}\r\n\r\n// =============================================================================\r\n// Pure helpers (exported for testing / reuse)\r\n// =============================================================================\r\n\r\nconst DEFAULT_MAX_ADU = 65535;\r\n\r\n/** Two-stop colormaps: intensity t in [0,1] → [r,g,b] (0..255). */\r\nconst COLORMAPS: Record<ImageColormap, (t: number) => [number, number, number]> = {\r\n  // Dark teal → yellow; a cividis-style ramp that reads well on dark UI.\r\n  cividis: (t) => [lerp(42, 237, t), lerp(123, 222, t), lerp(155, 83, t)],\r\n  gray: (t) => {\r\n    const v = lerp(0, 255, t);\r\n    return [v, v, v];\r\n  },\r\n};\r\n\r\n/**\r\n * decodeImage — pure transform: single-channel samples → canvas-ready\r\n * RGBA. Fixed-ceiling normalisation (`sample / maxADU`) so the output\r\n * reflects the real signal level relative to saturation rather than\r\n * rescaling per frame. Returns null on invalid input.\r\n */\r\nexport function decodeImage(opts: {\r\n  data: number[];\r\n  width: number;\r\n  height?: number;\r\n  maxADU?: number;\r\n  colormap?: ImageColormap;\r\n}): { width: number; height: number; pixels: Uint8ClampedArray } | null {\r\n  const { data, width, height, maxADU = DEFAULT_MAX_ADU, colormap = 'cividis' } = opts;\r\n  if (!Array.isArray(data)) return null;\r\n  if (!Number.isFinite(width) || width <= 0) return null;\r\n  const W = Math.floor(width);\r\n  const H = Number.isFinite(height) && (height as number) > 0 ? Math.floor(height as number) : W;\r\n  if (data.length !== W * H) return null;\r\n\r\n  const ramp = COLORMAPS[colormap] || COLORMAPS.cividis;\r\n  const ceiling = Number.isFinite(maxADU) && maxADU > 0 ? maxADU : DEFAULT_MAX_ADU;\r\n\r\n  const pixels = new Uint8ClampedArray(W * H * 4);\r\n  for (let i = 0; i < W * H; i++) {\r\n    const raw = data[i];\r\n    // sample / ceiling (lerp clamps t to [0,1]); non-finite reads as 0.\r\n    const t = Number.isFinite(raw) ? raw / ceiling : 0;\r\n    const [r, g, b] = ramp(t);\r\n    const off = i * 4;\r\n    pixels[off + 0] = r;\r\n    pixels[off + 1] = g;\r\n    pixels[off + 2] = b;\r\n    pixels[off + 3] = 255;\r\n  }\r\n  return { width: W, height: H, pixels };\r\n}\r\n\r\n/** Pretty-print samples as a width-padded grid for the values view. */\r\nfunction formatValues(data: number[], width: number, height: number, maxADU: number): string {\r\n  if (width * height !== data.length) return data.join(', ');\r\n  const colW = Math.max(3, String(Math.floor(maxADU) || 1).length);\r\n  const rows: string[] = [];\r\n  for (let y = 0; y < height; y++) {\r\n    const cells: string[] = [];\r\n    for (let x = 0; x < width; x++) {\r\n      cells.push(String(data[y * width + x]).padStart(colW, ' '));\r\n    }\r\n    rows.push(cells.join(' '));\r\n  }\r\n  return rows.join('\\n');\r\n}\r\n\r\n// =============================================================================\r\n// Component\r\n// =============================================================================\r\n\r\nexport const ImageFrame = memo(function ImageFrame({\r\n  data,\r\n  pixels,\r\n  width,\r\n  height,\r\n  maxADU = DEFAULT_MAX_ADU,\r\n  colormap = 'cividis',\r\n  showValues = false,\r\n  title,\r\n  loading = false,\r\n  emptyMessage = 'No frame to display.',\r\n  className = '',\r\n}: ImageFrameProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const canvasRef = useRef<HTMLCanvasElement>(null);\r\n\r\n  const H = Number.isFinite(height) && (height as number) > 0 ? Math.floor(height as number) : Math.floor(width);\r\n  const W = Math.floor(width);\r\n\r\n  // Decode once per frame/option change. A pre-decoded `pixels` buffer\r\n  // wins; otherwise decode `data` through the colormap.\r\n  const decoded = useMemo(() => {\r\n    if (pixels instanceof Uint8ClampedArray && pixels.length === W * H * 4) {\r\n      return { width: W, height: H, pixels };\r\n    }\r\n    if (Array.isArray(data)) {\r\n      return decodeImage({ data, width: W, height: H, maxADU, colormap });\r\n    }\r\n    return null;\r\n  }, [data, pixels, W, H, maxADU, colormap]);\r\n\r\n  useEffect(() => {\r\n    if (!decoded) return;\r\n    const canvas = canvasRef.current;\r\n    if (!canvas) return;\r\n    canvas.width = decoded.width;\r\n    canvas.height = decoded.height;\r\n    const ctx = canvas.getContext('2d');\r\n    if (!ctx) return;\r\n    // Build via createImageData + set (rather than `new ImageData(buf,…)`)\r\n    // to sidestep the lib.dom ArrayBuffer/ArrayBufferLike typing mismatch\r\n    // on newer TypeScript, and it's the same cost.\r\n    const img = ctx.createImageData(decoded.width, decoded.height);\r\n    img.data.set(decoded.pixels);\r\n    ctx.putImageData(img, 0, 0);\r\n  }, [decoded]);\r\n\r\n  const surfaceStyle: React.CSSProperties = {\r\n    backgroundColor: tokens.colors.background.surface,\r\n    borderRadius: tokens.borderRadius.lg,\r\n    padding: tokens.spacing.md,\r\n    color: tokens.colors.text.primary,\r\n    fontFamily: tokens.typography.fontFamily.primary,\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: tokens.spacing.sm,\r\n  };\r\n\r\n  // Loading state\r\n  if (loading) {\r\n    return (\r\n      <div\r\n        className={classNames('zendir-image-frame', 'loading', className)}\r\n        role=\"img\"\r\n        aria-busy=\"true\"\r\n        aria-label=\"Loading image\"\r\n        style={surfaceStyle}\r\n      >\r\n        {title && <FrameTitle tokens={tokens} title={title} />}\r\n        <div\r\n          style={{\r\n            width: '100%',\r\n            aspectRatio: `${W} / ${H}`,\r\n            background: 'rgba(255,255,255,0.06)',\r\n            borderRadius: tokens.borderRadius.sm,\r\n          }}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Empty state\r\n  if (!decoded) {\r\n    return (\r\n      <div\r\n        className={classNames('zendir-image-frame', 'empty', className)}\r\n        role=\"img\"\r\n        aria-label=\"No image\"\r\n        style={{ ...surfaceStyle, textAlign: 'center', color: tokens.colors.text.tertiary }}\r\n      >\r\n        {title && <FrameTitle tokens={tokens} title={title} />}\r\n        <p style={{ margin: 0, fontSize: tokens.typography.fontSize.xs }}>{emptyMessage}</p>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={classNames('zendir-image-frame', className)}\r\n      aria-label={title || 'Image frame'}\r\n      style={surfaceStyle}\r\n    >\r\n      {title && <FrameTitle tokens={tokens} title={title} />}\r\n\r\n      <canvas\r\n        ref={canvasRef}\r\n        data-testid=\"image-frame-canvas\"\r\n        style={{\r\n          width: '100%',\r\n          aspectRatio: `${decoded.width} / ${decoded.height}`,\r\n          imageRendering: 'pixelated',\r\n          display: 'block',\r\n          background: 'rgba(0,0,0,0.4)',\r\n          borderRadius: tokens.borderRadius.sm,\r\n        }}\r\n      />\r\n\r\n      {showValues && Array.isArray(data) && (\r\n        <pre\r\n          data-testid=\"image-frame-values\"\r\n          style={{\r\n            margin: 0,\r\n            padding: tokens.spacing.sm,\r\n            background: 'rgba(0,0,0,0.45)',\r\n            borderRadius: tokens.borderRadius.sm,\r\n            color: tokens.colors.text.primary,\r\n            fontSize: 10,\r\n            lineHeight: 1.25,\r\n            fontFamily: tokens.typography.fontFamily.mono,\r\n            whiteSpace: 'pre',\r\n            overflow: 'auto',\r\n            maxHeight: 220,\r\n          }}\r\n        >\r\n          {formatValues(data, decoded.width, decoded.height, maxADU)}\r\n        </pre>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\n/** Small header row shared across states. */\r\nconst FrameTitle = ({ tokens, title }: { tokens: ReturnType<typeof useTheme>['tokens']; title: string }) => (\r\n  <h3\r\n    style={{\r\n      margin: 0,\r\n      fontSize: tokens.typography.fontSize.md,\r\n      fontWeight: tokens.typography.fontWeight.semibold,\r\n      color: tokens.colors.text.primary,\r\n    }}\r\n  >\r\n    {title}\r\n  </h3>\r\n);\r\n\r\nexport default ImageFrame;\r\n"],"names":["ImageFrame"],"mappings":"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"}
+{"version":3,"file":"ImageFrame.js","names":[],"sources":["../../../../src/react/core/widgets/ImageFrame.tsx"],"sourcesContent":["/**\n * @zendir/ui - ImageFrame Component\n *\n * Renders a single-channel data frame (e.g. a CCD/sensor readout) as a\n * false-colour image on a <canvas>. Purely presentational: hand it an\n * array of samples and it paints them — it has no knowledge of where\n * the data came from (engine, file, websocket, console). This is the\n * reusable surface that callers \"dump\" a frame into.\n *\n * Pipeline per sample: normalise against a fixed ceiling (`maxADU`) to\n * an intensity in [0,1], run that through a colormap, pack RGBA. The\n * default `cividis` ramp (dark teal → yellow) reads well on dark UI.\n *\n * The canvas's native resolution is the frame's width×height, so each\n * sample is exactly one pixel; CSS scales it up with\n * `image-rendering: pixelated`, keeping small sensor frames crisp.\n *\n * Astro UX Compliance:\n * - Themed surface, border radius, and typography via `useTheme`.\n * - Loading and empty states with friendly messaging.\n * - Monospace raw-value grid for analysis.\n *\n * @example\n * ```tsx\n * <ImageFrame\n *   data={ccdSamples}      // number[] length = width*height\n *   width={28}\n *   maxADU={65535}\n *   title=\"CCD capture\"\n *   showValues\n * />\n * ```\n */\n\nimport React, { memo, useEffect, useMemo, useRef } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { classNames, lerp } from \"../../utils\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\n/** Built-in colormap names. */\nexport type ImageColormap = \"cividis\" | \"gray\";\n\nexport interface ImageFrameProps {\n  /** Flat, row-major single-channel samples. Length must equal width*height. */\n  data?: number[];\n  /**\n   * Pre-decoded RGBA pixels (length = width*height*4). When provided this\n   * is painted directly and `data` / `maxADU` / `colormap` are ignored.\n   * Escape hatch for callers that already have an image buffer.\n   */\n  pixels?: Uint8ClampedArray;\n  /** Frame width in pixels. */\n  width: number;\n  /** Frame height in pixels. Defaults to `width` (square). */\n  height?: number;\n  /** Saturation ceiling used to normalise `data` → [0,1]. Default 65535. */\n  maxADU?: number;\n  /** Colormap applied to normalised intensities. Default 'cividis'. */\n  colormap?: ImageColormap;\n  /** Show the raw sample values as a grid below the image. Default false. */\n  showValues?: boolean;\n  /** Optional title shown above the image. */\n  title?: string;\n  /** Loading state (skeleton). */\n  loading?: boolean;\n  /** Message shown when there is no frame to display. */\n  emptyMessage?: string;\n  /** Custom class name. */\n  className?: string;\n}\n\n// =============================================================================\n// Pure helpers (exported for testing / reuse)\n// =============================================================================\n\nconst DEFAULT_MAX_ADU = 65535;\n\n/** Two-stop colormaps: intensity t in [0,1] → [r,g,b] (0..255). */\nconst COLORMAPS: Record<\n  ImageColormap,\n  (t: number) => [number, number, number]\n> = {\n  // Dark teal → yellow; a cividis-style ramp that reads well on dark UI.\n  cividis: (t) => [lerp(42, 237, t), lerp(123, 222, t), lerp(155, 83, t)],\n  gray: (t) => {\n    const v = lerp(0, 255, t);\n    return [v, v, v];\n  },\n};\n\n/**\n * decodeImage — pure transform: single-channel samples → canvas-ready\n * RGBA. Fixed-ceiling normalisation (`sample / maxADU`) so the output\n * reflects the real signal level relative to saturation rather than\n * rescaling per frame. Returns null on invalid input.\n */\nexport function decodeImage(opts: {\n  data: number[];\n  width: number;\n  height?: number;\n  maxADU?: number;\n  colormap?: ImageColormap;\n}): { width: number; height: number; pixels: Uint8ClampedArray } | null {\n  const {\n    data,\n    width,\n    height,\n    maxADU = DEFAULT_MAX_ADU,\n    colormap = \"cividis\",\n  } = opts;\n  if (!Array.isArray(data)) return null;\n  if (!Number.isFinite(width) || width <= 0) return null;\n  const W = Math.floor(width);\n  const H =\n    Number.isFinite(height) && (height as number) > 0\n      ? Math.floor(height as number)\n      : W;\n  if (data.length !== W * H) return null;\n\n  const ramp = COLORMAPS[colormap] || COLORMAPS.cividis;\n  const ceiling =\n    Number.isFinite(maxADU) && maxADU > 0 ? maxADU : DEFAULT_MAX_ADU;\n\n  const pixels = new Uint8ClampedArray(W * H * 4);\n  for (let i = 0; i < W * H; i++) {\n    const raw = data[i];\n    // sample / ceiling (lerp clamps t to [0,1]); non-finite reads as 0.\n    const t = Number.isFinite(raw) ? raw / ceiling : 0;\n    const [r, g, b] = ramp(t);\n    const off = i * 4;\n    pixels[off + 0] = r;\n    pixels[off + 1] = g;\n    pixels[off + 2] = b;\n    pixels[off + 3] = 255;\n  }\n  return { width: W, height: H, pixels };\n}\n\n/** Pretty-print samples as a width-padded grid for the values view. */\nfunction formatValues(\n  data: number[],\n  width: number,\n  height: number,\n  maxADU: number,\n): string {\n  if (width * height !== data.length) return data.join(\", \");\n  const colW = Math.max(3, String(Math.floor(maxADU) || 1).length);\n  const rows: string[] = [];\n  for (let y = 0; y < height; y++) {\n    const cells: string[] = [];\n    for (let x = 0; x < width; x++) {\n      cells.push(String(data[y * width + x]).padStart(colW, \" \"));\n    }\n    rows.push(cells.join(\" \"));\n  }\n  return rows.join(\"\\n\");\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\nexport const ImageFrame = memo(function ImageFrame({\n  data,\n  pixels,\n  width,\n  height,\n  maxADU = DEFAULT_MAX_ADU,\n  colormap = \"cividis\",\n  showValues = false,\n  title,\n  loading = false,\n  emptyMessage = \"No frame to display.\",\n  className = \"\",\n}: ImageFrameProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n\n  const H =\n    Number.isFinite(height) && (height as number) > 0\n      ? Math.floor(height as number)\n      : Math.floor(width);\n  const W = Math.floor(width);\n\n  // Decode once per frame/option change. A pre-decoded `pixels` buffer\n  // wins; otherwise decode `data` through the colormap.\n  const decoded = useMemo(() => {\n    if (pixels instanceof Uint8ClampedArray && pixels.length === W * H * 4) {\n      return { width: W, height: H, pixels };\n    }\n    if (Array.isArray(data)) {\n      return decodeImage({ data, width: W, height: H, maxADU, colormap });\n    }\n    return null;\n  }, [data, pixels, W, H, maxADU, colormap]);\n\n  useEffect(() => {\n    if (!decoded) return;\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    canvas.width = decoded.width;\n    canvas.height = decoded.height;\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return;\n    // Build via createImageData + set (rather than `new ImageData(buf,…)`)\n    // to sidestep the lib.dom ArrayBuffer/ArrayBufferLike typing mismatch\n    // on newer TypeScript, and it's the same cost.\n    const img = ctx.createImageData(decoded.width, decoded.height);\n    img.data.set(decoded.pixels);\n    ctx.putImageData(img, 0, 0);\n  }, [decoded]);\n\n  const surfaceStyle: React.CSSProperties = {\n    backgroundColor: tokens.colors.background.surface,\n    borderRadius: tokens.borderRadius.lg,\n    padding: tokens.spacing.md,\n    color: tokens.colors.text.primary,\n    fontFamily: tokens.typography.fontFamily.primary,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: tokens.spacing.sm,\n  };\n\n  // Loading state\n  if (loading) {\n    return (\n      <div\n        className={classNames(\"zendir-image-frame\", \"loading\", className)}\n        role=\"img\"\n        aria-busy=\"true\"\n        aria-label=\"Loading image\"\n        style={surfaceStyle}\n      >\n        {title && <FrameTitle tokens={tokens} title={title} />}\n        <div\n          style={{\n            width: \"100%\",\n            aspectRatio: `${W} / ${H}`,\n            background: \"rgba(255,255,255,0.06)\",\n            borderRadius: tokens.borderRadius.sm,\n          }}\n        />\n      </div>\n    );\n  }\n\n  // Empty state\n  if (!decoded) {\n    return (\n      <div\n        className={classNames(\"zendir-image-frame\", \"empty\", className)}\n        role=\"img\"\n        aria-label=\"No image\"\n        style={{\n          ...surfaceStyle,\n          textAlign: \"center\",\n          color: tokens.colors.text.tertiary,\n        }}\n      >\n        {title && <FrameTitle tokens={tokens} title={title} />}\n        <p style={{ margin: 0, fontSize: tokens.typography.fontSize.xs }}>\n          {emptyMessage}\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={classNames(\"zendir-image-frame\", className)}\n      aria-label={title || \"Image frame\"}\n      style={surfaceStyle}\n    >\n      {title && <FrameTitle tokens={tokens} title={title} />}\n\n      <canvas\n        ref={canvasRef}\n        data-testid=\"image-frame-canvas\"\n        style={{\n          width: \"100%\",\n          aspectRatio: `${decoded.width} / ${decoded.height}`,\n          imageRendering: \"pixelated\",\n          display: \"block\",\n          background: \"rgba(0,0,0,0.4)\",\n          borderRadius: tokens.borderRadius.sm,\n        }}\n      />\n\n      {showValues && Array.isArray(data) && (\n        <pre\n          data-testid=\"image-frame-values\"\n          style={{\n            margin: 0,\n            padding: tokens.spacing.sm,\n            background: \"rgba(0,0,0,0.45)\",\n            borderRadius: tokens.borderRadius.sm,\n            color: tokens.colors.text.primary,\n            fontSize: 10,\n            lineHeight: 1.25,\n            fontFamily: tokens.typography.fontFamily.mono,\n            whiteSpace: \"pre\",\n            overflow: \"auto\",\n            maxHeight: 220,\n          }}\n        >\n          {formatValues(data, decoded.width, decoded.height, maxADU)}\n        </pre>\n      )}\n    </div>\n  );\n});\n\n/** Small header row shared across states. */\nconst FrameTitle = ({\n  tokens,\n  title,\n}: {\n  tokens: ReturnType<typeof useTheme>[\"tokens\"];\n  title: string;\n}) => (\n  <h3\n    style={{\n      margin: 0,\n      fontSize: tokens.typography.fontSize.md,\n      fontWeight: tokens.typography.fontWeight.semibold,\n      color: tokens.colors.text.primary,\n    }}\n  >\n    {title}\n  </h3>\n);\n\nexport default ImageFrame;\n"],"mappings":"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"}

package/dist/react/core/widgets/ImageGallery.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { ResponsiveValue } from '../layout/useBreakpoint';
-
 export interface GalleryImage {
     /** Unique identifier */
     id: string;
@@ -10,6 +9,8 @@ export interface GalleryImage {
     src: string;
     /** Timestamp (ms since epoch) */
     timestamp?: number;
+    /** Optional short label shown as a pill over the thumbnail (e.g. "NEW"). */
+    badge?: string;
     /** Optional metadata */
     metadata?: Record<string, unknown>;
 }