@hjmds/react 1.10.0 → 1.12.0

package/dist/task-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-list.js","sourceRoot":"","sources":["../src/task-list.tsx"],"names":[],"mappings":";AACA,OAAM,EAAC,aAAa,EAAe,MAAI,mCAAmC,CAAC;AAC3E,OAAM,EAAC,QAAQ,EAAC,MAAI,gBAAgB,CAAC;AAAA,OAAM,EAAC,IAAI,EAAC,MAAI,uBAAuB,CAAC;AAE7E,iHAAiH;AACjH,MAAM,UAAU,QAAQ,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,iBAAiB,EAAC,QAAQ,GAAC,KAAK,EAAC,YAAY,EAAC,gBAAgB,EAAe;IAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAAA,IAAG,CAAC,KAAK,CAAC,IAAI,EAAE;QAAC,MAAM,IAAI,SAAS,CAAC,kCAAkC,CAAC,CAAC;IAClN,MAAM,UAAU,GAAC,CAAC,IAAa,EAAC,EAAE,GAAC,MAAM,OAAO,GAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,IAAE,IAAI,CAAC,QAAQ,KAAG,IAAI,EAAE,eAAe,EAAE,SAAS,CAAA,EAAE,CAAA,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAC,SAAS,CAAC,KAAM,CAAC,IAAI,CAAC,WAAW,KAAG,SAAS,CAAA,CAAC,CAAA,EAAE,CAAA,CAAC,CAAA,EAAC,WAAW,EAAC,IAAI,CAAC,WAAW,EAAC,CAAC,GAAG,CAAC,CAAA,OAAO,cAAK,KAAK,EAAE,EAAC,OAAO,EAAC,qBAAqB,EAAC,YAAG,OAAO,GAAO,CAAC,CAAA,CAAC,CAAC;IACjW,IAAG,KAAK,CAAC,MAAM,KAAG,CAAC;QAAC,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,YAAG,YAAY,GAAQ,CAAC;IACrE,IAAG,gBAAgB;QAAC,OAAO,4BAAG,gBAAgB,CAAC,EAAC,KAAK,EAAC,UAAU,EAAC,CAAC,GAAI,CAAC;IACvE,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAC,SAAS,YAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAA,EAAE,CAAA,wBAAoB,UAAU,CAAC,IAAI,CAAC,IAA1B,IAAI,CAAC,EAAE,CAA0B,CAAC,GAAQ,CAAC;AACvH,CAAC","sourcesContent":["import type{ReactNode}from'react';\nimport{validateTasks,type TaskItem}from'@hjmds/design-contracts/task-list';\nimport{Checkbox}from'./selection.js';import{List}from'./advanced-display.js';\nexport type TaskListProps=Readonly<{label:string;items:readonly TaskItem[];onCompletedChange:(id:string,completed:boolean)=>void;disabled?:boolean;emptyContent?:ReactNode;renderCollection?:(context:Readonly<{items:readonly TaskItem[];renderItem:(item:TaskItem)=>ReactNode}>)=>ReactNode}>;\n/** Canonical Checkbox/List own semantics; optional collection composition keeps drag peers out of this entry. */\nexport function TaskList({label,items,onCompletedChange,disabled=false,emptyContent,renderCollection}:TaskListProps){validateTasks(items);if(!label.trim())throw new TypeError('TaskList needs a localized label');\n const renderItem=(item:TaskItem)=>{const control=<Checkbox label={item.label} checked={item.completed} disabled={disabled||item.disabled===true} onCheckedChange={completed=>onCompletedChange(item.id,completed)} {...(item.description===undefined?{}:{description:item.description})}/>;return <div style={{padding:\"var(--hjm-space-md)\"}}>{control}</div>;};\n if(items.length===0)return <List label={label}>{emptyContent}</List>;\n if(renderCollection)return <>{renderCollection({items,renderItem})}</>;\n return <List label={label} appearance=\"grouped\">{items.map(item=><div key={item.id}>{renderItem(item)}</div>)}</List>;\n}\n"]}

package/dist/thinking-orb.d.ts

@@ -5,5 +5,5 @@ export type ThinkingOrbProps = ThinkingOrbOptions & Readonly<{
     style?: CSSProperties;
 }>;
 /** Optional AI status presentation; ordinary loading retains Spinner. */
-export declare function ThinkingOrb({ state, size, label, speed, paused, active, className, style }: ThinkingOrbProps): import("react").JSX.Element;
+export declare function ThinkingOrb({ state, appearance, size, label, speed, paused, active, className, style }: ThinkingOrbProps): import("react").JSX.Element;
 //# sourceMappingURL=thinking-orb.d.ts.map

package/dist/thinking-orb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thinking-orb.d.ts","sourceRoot":"","sources":["../src/thinking-orb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAyF,KAAK,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AAGjL,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,GAAG,QAAQ,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,CAAC,CAAC;AAC5G,yEAAyE;AACzE,wBAAgB,WAAW,CAAC,EAAE,KAAiB,EAAE,IAAS,EAAE,KAAK,EAAE,KAAS,EAAE,MAAc,EAAE,MAAa,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,gBAAgB,+BAgEhJ"}
+{"version":3,"file":"thinking-orb.d.ts","sourceRoot":"","sources":["../src/thinking-orb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAyF,KAAK,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AAGjL,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,GAAG,QAAQ,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,CAAC,CAAC;AAC5G,yEAAyE;AACzE,wBAAgB,WAAW,CAAC,EAAE,KAAiB,EAAE,UAAoB,EAAE,IAAS,EAAE,KAAK,EAAE,KAAS,EAAE,MAAc,EAAE,MAAa,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,gBAAgB,+BAgEtK"}

package/dist/thinking-orb.js

@@ -3,8 +3,8 @@ import { useEffect, useRef } from "react";
 import { buildThinkingOrbFrame, createThinkingOrbClock, thinkingOrbRecipe, validateThinkingOrb } from "@hjmds/design-contracts/components/thinking-orb";
 import { useHjmTheme } from "./provider.js";
 /** Optional AI status presentation; ordinary loading retains Spinner. */
-export function ThinkingOrb({ state = "working", size = 64, label, speed = 1, paused = false, active = true, className, style }) {
-    validateThinkingOrb({ state, size, speed, label });
+export function ThinkingOrb({ state = "working", appearance = "state", size = 64, label, speed = 1, paused = false, active = true, className, style }) {
+    validateThinkingOrb({ state, appearance, size, speed, label });
     const theme = useHjmTheme();
     const ink = theme.palette.theme.text;
     const reduced = theme.environment.reducedMotion;
@@ -20,7 +20,7 @@ export function ThinkingOrb({ state = "working", size = 64, label, speed = 1, pa
         let visible = typeof IntersectionObserver === "undefined";
         let disposed = false;
         const draw = () => {
-            const frame = buildThinkingOrbFrame(state, size, reduced ? thinkingOrbRecipe.motion.staticTime : clock.current.time);
+            const frame = buildThinkingOrbFrame(state, size, reduced ? thinkingOrbRecipe.motion.staticTime : clock.current.time, appearance);
             ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
             ctx.clearRect(0, 0, size, size);
             ctx.fillStyle = ctx.strokeStyle = ink;
@@ -80,7 +80,7 @@ export function ThinkingOrb({ state = "working", size = 64, label, speed = 1, pa
             document.removeEventListener("visibilitychange", sync);
             window.removeEventListener("resize", resize);
         };
-    }, [state, size, speed, active, paused, reduced, ink]);
+    }, [state, appearance, size, speed, active, paused, reduced, ink]);
     return _jsxs("span", { className: className, "data-hjm-thinking-orb": state, role: "status", "aria-live": "polite", "aria-atomic": "true", style: { display: "inline-flex", ...style }, children: [_jsx("canvas", { ref: canvasRef, "aria-hidden": "true", style: { width: size, height: size, display: "block" } }), _jsx("span", { style: { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clipPath: "inset(50%)", whiteSpace: "nowrap", border: 0 }, children: label })] });
 }
 //# sourceMappingURL=thinking-orb.js.map

package/dist/thinking-orb.js.map

@@ -1 +1 @@
-{"version":3,"file":"thinking-orb.js","sourceRoot":"","sources":["../src/thinking-orb.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, type CSSProperties } from \"react\";\nimport { buildThinkingOrbFrame, createThinkingOrbClock, thinkingOrbRecipe, validateThinkingOrb, type ThinkingOrbOptions } from \"@hjmds/design-contracts/components/thinking-orb\";\nimport { useHjmTheme } from \"./provider.js\";\n\nexport type ThinkingOrbProps = ThinkingOrbOptions & Readonly<{ className?: string; style?: CSSProperties }>;\n/** Optional AI status presentation; ordinary loading retains Spinner. */\nexport function ThinkingOrb({ state = \"working\", size = 64, label, speed = 1, paused = false, active = true, className, style }: ThinkingOrbProps) {\n  validateThinkingOrb({ state, size, speed, label });\n  const theme = useHjmTheme();\n  const ink = theme.palette.theme.text;\n  const reduced = theme.environment.reducedMotion;\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const clock = useRef(createThinkingOrbClock());\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    const ctx = canvas?.getContext(\"2d\");\n    if (!canvas || !ctx) return;\n    let ratio = 1;\n    let raf = 0;\n    let visible = typeof IntersectionObserver === \"undefined\";\n    let disposed = false;\n    const draw = () => {\n      const frame = buildThinkingOrbFrame(state, size, reduced ? thinkingOrbRecipe.motion.staticTime : clock.current.time);\n      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);\n      ctx.clearRect(0, 0, size, size);\n      ctx.fillStyle = ctx.strokeStyle = ink;\n      // Depth becomes semantic-ink opacity, so brand palettes work on any HJM surface.\n      for (const line of frame.lines) {\n        ctx.globalAlpha = (1 - Math.min(1, Math.max(0, line.white))) * (line.a ?? 1);\n        ctx.lineWidth = line.w;\n        ctx.beginPath(); ctx.moveTo(line.x1, line.y1); ctx.lineTo(line.x2, line.y2); ctx.stroke();\n      }\n      for (const dot of frame.dots) {\n        ctx.globalAlpha = (1 - Math.min(1, Math.max(0, dot.white))) * (dot.a ?? 1);\n        ctx.beginPath(); ctx.arc(dot.x, dot.y, dot.r, 0, Math.PI * 2); ctx.fill();\n      }\n      ctx.globalAlpha = 1;\n    };\n    const resize = () => {\n      ratio = Math.min(thinkingOrbRecipe.maxPixelRatio, window.devicePixelRatio || 1);\n      canvas.width = Math.round(size * ratio); canvas.height = Math.round(size * ratio);\n      draw();\n    };\n    const eligible = () => !disposed && active && !paused && !reduced && visible && document.visibilityState !== \"hidden\";\n    const loop = (now: number) => {\n      raf = 0;\n      if (!eligible()) return;\n      clock.current.sample(now, speed); draw();\n      raf = requestAnimationFrame(loop);\n    };\n    const sync = () => {\n      cancelAnimationFrame(raf); raf = 0; clock.current.resetDelta();\n      if (eligible()) raf = requestAnimationFrame(loop);\n    };\n    const observer = typeof IntersectionObserver === \"undefined\" ? null : new IntersectionObserver(entries => {\n      visible = entries[0]?.isIntersecting ?? false; sync();\n    });\n    resize(); observer?.observe(canvas); sync();\n    document.addEventListener(\"visibilitychange\", sync);\n    window.addEventListener(\"resize\", resize);\n    return () => {\n      disposed = true; cancelAnimationFrame(raf); observer?.disconnect(); clock.current.resetDelta();\n      document.removeEventListener(\"visibilitychange\", sync); window.removeEventListener(\"resize\", resize);\n    };\n  }, [state, size, speed, active, paused, reduced, ink]);\n  return <span className={className} data-hjm-thinking-orb={state} role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" style={{ display: \"inline-flex\", ...style }}>\n    <canvas ref={canvasRef} aria-hidden=\"true\" style={{ width: size, height: size, display: \"block\" }} />\n    {/* Inline hiding works for granular consumers who do not import the stylesheet. */}\n    <span style={{ position: \"absolute\", width: 1, height: 1, padding: 0, margin: -1, overflow: \"hidden\", clipPath: \"inset(50%)\", whiteSpace: \"nowrap\", border: 0 }}>{label}</span>\n  </span>;\n}\n"]}
+{"version":3,"file":"thinking-orb.js","sourceRoot":"","sources":["../src/thinking-orb.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, type CSSProperties } from \"react\";\nimport { buildThinkingOrbFrame, createThinkingOrbClock, thinkingOrbRecipe, validateThinkingOrb, type ThinkingOrbOptions } from \"@hjmds/design-contracts/components/thinking-orb\";\nimport { useHjmTheme } from \"./provider.js\";\n\nexport type ThinkingOrbProps = ThinkingOrbOptions & Readonly<{ className?: string; style?: CSSProperties }>;\n/** Optional AI status presentation; ordinary loading retains Spinner. */\nexport function ThinkingOrb({ state = \"working\", appearance = \"state\", size = 64, label, speed = 1, paused = false, active = true, className, style }: ThinkingOrbProps) {\n  validateThinkingOrb({ state, appearance, size, speed, label });\n  const theme = useHjmTheme();\n  const ink = theme.palette.theme.text;\n  const reduced = theme.environment.reducedMotion;\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const clock = useRef(createThinkingOrbClock());\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    const ctx = canvas?.getContext(\"2d\");\n    if (!canvas || !ctx) return;\n    let ratio = 1;\n    let raf = 0;\n    let visible = typeof IntersectionObserver === \"undefined\";\n    let disposed = false;\n    const draw = () => {\n      const frame = buildThinkingOrbFrame(state, size, reduced ? thinkingOrbRecipe.motion.staticTime : clock.current.time, appearance);\n      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);\n      ctx.clearRect(0, 0, size, size);\n      ctx.fillStyle = ctx.strokeStyle = ink;\n      // Depth becomes semantic-ink opacity, so brand palettes work on any HJM surface.\n      for (const line of frame.lines) {\n        ctx.globalAlpha = (1 - Math.min(1, Math.max(0, line.white))) * (line.a ?? 1);\n        ctx.lineWidth = line.w;\n        ctx.beginPath(); ctx.moveTo(line.x1, line.y1); ctx.lineTo(line.x2, line.y2); ctx.stroke();\n      }\n      for (const dot of frame.dots) {\n        ctx.globalAlpha = (1 - Math.min(1, Math.max(0, dot.white))) * (dot.a ?? 1);\n        ctx.beginPath(); ctx.arc(dot.x, dot.y, dot.r, 0, Math.PI * 2); ctx.fill();\n      }\n      ctx.globalAlpha = 1;\n    };\n    const resize = () => {\n      ratio = Math.min(thinkingOrbRecipe.maxPixelRatio, window.devicePixelRatio || 1);\n      canvas.width = Math.round(size * ratio); canvas.height = Math.round(size * ratio);\n      draw();\n    };\n    const eligible = () => !disposed && active && !paused && !reduced && visible && document.visibilityState !== \"hidden\";\n    const loop = (now: number) => {\n      raf = 0;\n      if (!eligible()) return;\n      clock.current.sample(now, speed); draw();\n      raf = requestAnimationFrame(loop);\n    };\n    const sync = () => {\n      cancelAnimationFrame(raf); raf = 0; clock.current.resetDelta();\n      if (eligible()) raf = requestAnimationFrame(loop);\n    };\n    const observer = typeof IntersectionObserver === \"undefined\" ? null : new IntersectionObserver(entries => {\n      visible = entries[0]?.isIntersecting ?? false; sync();\n    });\n    resize(); observer?.observe(canvas); sync();\n    document.addEventListener(\"visibilitychange\", sync);\n    window.addEventListener(\"resize\", resize);\n    return () => {\n      disposed = true; cancelAnimationFrame(raf); observer?.disconnect(); clock.current.resetDelta();\n      document.removeEventListener(\"visibilitychange\", sync); window.removeEventListener(\"resize\", resize);\n    };\n  }, [state, appearance, size, speed, active, paused, reduced, ink]);\n  return <span className={className} data-hjm-thinking-orb={state} role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" style={{ display: \"inline-flex\", ...style }}>\n    <canvas ref={canvasRef} aria-hidden=\"true\" style={{ width: size, height: size, display: \"block\" }} />\n    {/* Inline hiding works for granular consumers who do not import the stylesheet. */}\n    <span style={{ position: \"absolute\", width: 1, height: 1, padding: 0, margin: -1, overflow: \"hidden\", clipPath: \"inset(50%)\", whiteSpace: \"nowrap\", border: 0 }}>{label}</span>\n  </span>;\n}\n"]}

package/dist/voice-note.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import { type VoiceNoteDescriptor } from "@hjmds/design-contracts/voice-note";
+export type VoiceNoteProps = Readonly<{
+    descriptor: VoiceNoteDescriptor;
+    labels: Readonly<{
+        play: string;
+        pause: string;
+        seek: string;
+        loading: string;
+        error: string;
+        retry: string;
+        backward: string;
+        forward: string;
+    }>;
+    /** Localized elapsed/duration text and slider accessible value. */
+    formatTime: (seconds: number) => string;
+    artwork?: ReactNode;
+    onPlayingChange: (playing: boolean) => void;
+    onSeek: (seconds: number) => void;
+    onRetry?: () => void;
+}>;
+/** Audio engine, network, file permission and playback lifecycle remain host-owned. */
+export declare function VoiceNote({ descriptor, labels, formatTime, artwork, onPlayingChange, onSeek, onRetry }: VoiceNoteProps): import("react").JSX.Element;
+//# sourceMappingURL=voice-note.d.ts.map

package/dist/voice-note.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"voice-note.d.ts","sourceRoot":"","sources":["../src/voice-note.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAoB,KAAK,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAMhG,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACpC,UAAU,EAAE,mBAAmB,CAAC;IAChC,MAAM,EAAE,QAAQ,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClJ,mEAAmE;IACnE,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC,CAAC;AAEH,uFAAuF;AACvF,wBAAgB,SAAS,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,cAAc,+BAgBtH"}

package/dist/voice-note.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveVoiceNote } from "@hjmds/design-contracts/voice-note";
+import { Asset } from "./asset.js";
+import { Button } from "./actions.js";
+import { Slider } from "./slider.js";
+import { Stack, Surface, Text } from "./layout.js";
+/** Audio engine, network, file permission and playback lifecycle remain host-owned. */
+export function VoiceNote({ descriptor, labels, formatTime, artwork, onPlayingChange, onSeek, onRetry }) {
+    const media = resolveVoiceNote(descriptor);
+    const error = media.state === "error";
+    return _jsx(Surface, { padding: "lg", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { axis: "inline", gap: "md", children: [artwork ? _jsx(Asset, { descriptor: { kind: "image", decorative: true, shape: "circle" }, children: artwork }) : null, _jsx(Text, { emphasis: "strong", children: media.title })] }), _jsx(Slider, { label: labels.seek, min: 0, max: media.duration || 1, step: 0.1, value: media.position, disabled: !media.canSeek, onValueChange: onSeek, getValueText: formatTime }), _jsxs(Text, { tone: "muted", children: [formatTime(media.position), media.duration === null ? "" : ` / ${formatTime(media.duration)}`] }), error ? _jsx(Text, { role: "alert", children: labels.error }) : null, _jsxs(Stack, { axis: "inline", gap: "sm", children: [_jsx(Button, { disabled: !media.canPlay, loading: media.state === "loading", onClick: () => onPlayingChange(media.state !== "playing"), children: media.state === "loading" ? labels.loading : media.state === "playing" ? labels.pause : labels.play }), error && onRetry ? _jsx(Button, { disabled: media.disabled ?? false, onClick: onRetry, children: labels.retry }) : null] })] }) });
+}
+//# sourceMappingURL=voice-note.js.map

package/dist/voice-note.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voice-note.js","sourceRoot":"","sources":["../src/voice-note.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAA4B,MAAM,oCAAoC,CAAC;AAChG,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAanD,uFAAuF;AACvF,MAAM,UAAU,SAAS,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,OAAO,EAAkB;IACrH,MAAM,KAAK,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAC3C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,KAAK,OAAO,CAAC;IACtC,OAAO,KAAC,OAAO,IAAC,OAAO,EAAC,IAAI,YAAC,MAAC,KAAK,IAAC,GAAG,EAAC,IAAI,aAC1C,MAAC,KAAK,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC1B,OAAO,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,UAAU,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,YAAG,OAAO,GAAS,CAAC,CAAC,CAAC,IAAI,EACrG,KAAC,IAAI,IAAC,QAAQ,EAAC,QAAQ,YAAE,KAAK,CAAC,KAAK,GAAQ,IACtC,EACR,KAAC,MAAM,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,GAAK,EAC9K,MAAC,IAAI,IAAC,IAAI,EAAC,OAAO,aAAE,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAQ,EACxH,KAAK,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,YAAE,MAAM,CAAC,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,EACxD,MAAC,KAAK,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC3B,KAAC,MAAM,IAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,YAAG,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,GAAU,EAC9O,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,EAAE,OAAO,EAAE,OAAO,YAAG,MAAM,CAAC,KAAK,GAAU,CAAC,CAAC,CAAC,IAAI,IACzG,IACF,GAAU,CAAC;AACrB,CAAC","sourcesContent":["import type { ReactNode } from \"react\";\nimport { resolveVoiceNote, type VoiceNoteDescriptor } from \"@hjmds/design-contracts/voice-note\";\nimport { Asset } from \"./asset.js\";\nimport { Button } from \"./actions.js\";\nimport { Slider } from \"./slider.js\";\nimport { Stack, Surface, Text } from \"./layout.js\";\n\nexport type VoiceNoteProps = Readonly<{\n  descriptor: VoiceNoteDescriptor;\n  labels: Readonly<{ play: string; pause: string; seek: string; loading: string; error: string; retry: string; backward: string; forward: string }>;\n  /** Localized elapsed/duration text and slider accessible value. */\n  formatTime: (seconds: number) => string;\n  artwork?: ReactNode;\n  onPlayingChange: (playing: boolean) => void;\n  onSeek: (seconds: number) => void;\n  onRetry?: () => void;\n}>;\n\n/** Audio engine, network, file permission and playback lifecycle remain host-owned. */\nexport function VoiceNote({ descriptor, labels, formatTime, artwork, onPlayingChange, onSeek, onRetry }: VoiceNoteProps) {\n  const media = resolveVoiceNote(descriptor);\n  const error = media.state === \"error\";\n  return <Surface padding=\"lg\"><Stack gap=\"md\">\n    <Stack axis=\"inline\" gap=\"md\">\n      {artwork ? <Asset descriptor={{kind:\"image\",decorative:true,shape:\"circle\"}}>{artwork}</Asset> : null}\n      <Text emphasis=\"strong\">{media.title}</Text>\n    </Stack>\n    <Slider label={labels.seek} min={0} max={media.duration || 1} step={0.1} value={media.position} disabled={!media.canSeek} onValueChange={onSeek} getValueText={formatTime}  />\n    <Text tone=\"muted\">{formatTime(media.position)}{media.duration === null ? \"\" : ` / ${formatTime(media.duration)}`}</Text>\n    {error ? <Text role=\"alert\">{labels.error}</Text> : null}\n    <Stack axis=\"inline\" gap=\"sm\">\n      <Button disabled={!media.canPlay} loading={media.state === \"loading\"} onClick={() => onPlayingChange(media.state !== \"playing\")}>{media.state === \"loading\" ? labels.loading : media.state === \"playing\" ? labels.pause : labels.play}</Button>\n      {error && onRetry ? <Button disabled={media.disabled ?? false} onClick={onRetry}>{labels.retry}</Button> : null}\n    </Stack>\n  </Stack></Surface>;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hjmds/react",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "description": "Accessible React 19 renderers for HJM design contracts.",
   "license": "MIT",
   "publishConfig": {
@@ -367,7 +367,97 @@
       "default": "./dist/celebration.js"
     },
     "./styles.css": "./dist/styles.css",
-    "./styles.layered.css": "./dist/styles.layered.css"
+    "./styles.layered.css": "./dist/styles.layered.css",
+    "./avatar-blobatar": {
+      "types": "./dist/avatar-blobatar.d.ts",
+      "import": "./dist/avatar-blobatar.js",
+      "default": "./dist/avatar-blobatar.js"
+    },
+    "./effect-surface": {
+      "types": "./dist/effect-surface.d.ts",
+      "import": "./dist/effect-surface.js",
+      "default": "./dist/effect-surface.js"
+    },
+    "./icon-lucide": {
+      "types": "./dist/icon-lucide.d.ts",
+      "import": "./dist/icon-lucide.js",
+      "default": "./dist/icon-lucide.js"
+    },
+    "./duration-field": {
+      "types": "./dist/duration-field.d.ts",
+      "import": "./dist/duration-field.js",
+      "default": "./dist/duration-field.js"
+    },
+    "./inline-confirm": {
+      "types": "./dist/inline-confirm.d.ts",
+      "import": "./dist/inline-confirm.js",
+      "default": "./dist/inline-confirm.js"
+    },
+    "./reaction-picker": {
+      "types": "./dist/reaction-picker.d.ts",
+      "import": "./dist/reaction-picker.js",
+      "default": "./dist/reaction-picker.js"
+    },
+    "./notification-bell": {
+      "types": "./dist/notification-bell.d.ts",
+      "import": "./dist/notification-bell.js",
+      "default": "./dist/notification-bell.js"
+    },
+    "./scroll-progress": {
+      "types": "./dist/scroll-progress.d.ts",
+      "import": "./dist/scroll-progress.js",
+      "default": "./dist/scroll-progress.js"
+    },
+    "./code-block": {
+      "types": "./dist/code-block.d.ts",
+      "import": "./dist/code-block.js",
+      "default": "./dist/code-block.js"
+    },
+    "./activity-heatmap": {
+      "types": "./dist/activity-heatmap.d.ts",
+      "import": "./dist/activity-heatmap.js",
+      "default": "./dist/activity-heatmap.js"
+    },
+    "./task-list": {
+      "types": "./dist/task-list.d.ts",
+      "import": "./dist/task-list.js",
+      "default": "./dist/task-list.js"
+    },
+    "./folder-preview": {
+      "types": "./dist/folder-preview.d.ts",
+      "import": "./dist/folder-preview.js",
+      "default": "./dist/folder-preview.js"
+    },
+    "./avatar-blobatar-motion": {
+      "types": "./dist/avatar-blobatar-motion.d.ts",
+      "import": "./dist/avatar-blobatar-motion.js",
+      "default": "./dist/avatar-blobatar-motion.js"
+    },
+    "./step-player": {
+      "types": "./dist/step-player.d.ts",
+      "import": "./dist/step-player.js",
+      "default": "./dist/step-player.js"
+    },
+    "./voice-note": {
+      "types": "./dist/voice-note.d.ts",
+      "import": "./dist/voice-note.js",
+      "default": "./dist/voice-note.js"
+    },
+    "./grid-reveal": {
+      "types": "./dist/grid-reveal.d.ts",
+      "import": "./dist/grid-reveal.js",
+      "default": "./dist/grid-reveal.js"
+    },
+    "./gravity-letters": {
+      "types": "./dist/gravity-letters.d.ts",
+      "import": "./dist/gravity-letters.js",
+      "default": "./dist/gravity-letters.js"
+    },
+    "./navigation-bar": {
+      "types": "./dist/navigation-bar.d.ts",
+      "import": "./dist/navigation-bar.js",
+      "default": "./dist/navigation-bar.js"
+    }
   },
   "files": [
     "dist",
@@ -376,7 +466,7 @@
     "THIRD_PARTY_NOTICES.md"
   ],
   "peerDependencies": {
-    "@hjmds/design-contracts": ">=1.10.0 <1.11.0",
+    "@hjmds/design-contracts": ">=1.12.0 <1.13.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "@number-flow/react": "0.6.2",
@@ -386,7 +476,10 @@
     "@dnd-kit/react": "0.5.0",
     "embla-carousel-react": "8.6.0",
     "canvas-confetti": "1.9.4",
-    "@dnd-kit/dom": "0.5.0"
+    "@dnd-kit/dom": "0.5.0",
+    "blobatar": "2.7.0",
+    "@blobatar/react": "2.7.0",
+    "lucide-react": "1.49.0"
   },
   "devDependencies": {
     "@types/node": "^24.13.3",
@@ -407,7 +500,10 @@
     "canvas-confetti": "1.9.4",
     "@types/canvas-confetti": "1.9.0",
     "@dnd-kit/dom": "0.5.0",
-    "@hjmds/design-contracts": "1.10.0"
+    "blobatar": "2.7.0",
+    "@blobatar/react": "2.7.0",
+    "lucide-react": "1.49.0",
+    "@hjmds/design-contracts": "1.12.0"
   },
   "peerDependenciesMeta": {
     "@number-flow/react": {
@@ -433,6 +529,15 @@
     },
     "@dnd-kit/dom": {
       "optional": true
+    },
+    "blobatar": {
+      "optional": true
+    },
+    "@blobatar/react": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
     }
   },
   "scripts": {