@nadicodeai/ui 1.0.0 → 1.0.2

package/dist/components/agent-visual.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-visual.d.ts","sourceRoot":"","sources":["../../src/components/agent-visual.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAKzE,KAAK,uBAAuB,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE9D,KAAK,wBAAwB,GACzB;IAAE,UAAU,CAAC,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACpC;IAAE,UAAU,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,KAAK,gBAAgB,GAAG,wBAAwB,GAAG;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,MAAM,EAAE,iBAAiB,CAAC;CAC3B,CAAC;AAkCF,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,UAAiB,EACjB,KAAK,EACL,YAAqB,EACrB,MAAM,GACP,EAAE,gBAAgB,+BAmElB;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,uBAAuB,EAAE,KAAK,gBAAgB,EAAE,KAAK,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"agent-visual.d.ts","sourceRoot":"","sources":["../../src/components/agent-visual.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAKzE,KAAK,uBAAuB,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE9D,KAAK,wBAAwB,GACzB;IAAE,UAAU,CAAC,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACpC;IAAE,UAAU,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,KAAK,gBAAgB,GAAG,wBAAwB,GAAG;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,MAAM,EAAE,iBAAiB,CAAC;CAC3B,CAAC;AAuBF,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,UAAiB,EACjB,KAAK,EACL,YAAqB,EACrB,MAAM,GACP,EAAE,gBAAgB,+BAoFlB;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,uBAAuB,EAAE,KAAK,gBAAgB,EAAE,KAAK,iBAAiB,EAAE,CAAC"}

package/dist/components/agent-visual.js

@@ -16,21 +16,10 @@ class AgentVisualErrorBoundary extends Component {
         return this.state.failed ? null : this.props.children;
     }
 }
-function supportsAmbientAgentVisual() {
-    try {
-        const context = document.createElement("canvas").getContext("webgl2");
-        if (!context)
-            return false;
-        context.getExtension("WEBGL_lose_context")?.loseContext();
-        return true;
-    }
-    catch {
-        return false;
-    }
-}
 function AgentVisual({ className, decorative = true, label, presentation = "card", recipe, }) {
     const hostRef = useRef(null);
     const [canAnimate, setCanAnimate] = useState(false);
+    const [isInViewport, setIsInViewport] = useState(false);
     const [rendererReady, setRendererReady] = useState(false);
     const handleReady = useCallback(() => setRendererReady(true), []);
     const handleUnavailable = useCallback(() => {
@@ -40,20 +29,35 @@ function AgentVisual({ className, decorative = true, label, presentation = "card
     useEffect(() => {
         setCanAnimate(false);
         setRendererReady(false);
-        if (presentation !== "detail")
-            return;
         if (typeof window.matchMedia !== "function")
             return;
         const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
         const update = () => {
             setRendererReady(false);
-            setCanAnimate(!reducedMotion.matches && supportsAmbientAgentVisual());
+            setCanAnimate(!reducedMotion.matches);
         };
         update();
         reducedMotion.addEventListener("change", update);
         return () => reducedMotion.removeEventListener("change", update);
-    }, [presentation, recipe]);
-    const hasAmbientRenderer = presentation === "detail" && canAnimate;
+    }, [recipe]);
+    useEffect(() => {
+        const host = hostRef.current;
+        if (!host)
+            return;
+        if (typeof IntersectionObserver !== "function") {
+            setIsInViewport(true);
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            const isIntersecting = entry?.isIntersecting ?? false;
+            setIsInViewport(isIntersecting);
+            if (!isIntersecting)
+                setRendererReady(false);
+        });
+        observer.observe(host);
+        return () => observer.disconnect();
+    }, []);
+    const hasAmbientRenderer = canAnimate && isInViewport;
     return (_jsxs("div", { "aria-hidden": decorative || undefined, "aria-label": decorative ? undefined : label, className: cn("relative isolate size-full overflow-hidden rounded-xl bg-nc-campo-inchiostro", presentation === "card" && "min-h-20", presentation === "detail" && "min-h-48", className), "data-agent-visual-motion": hasAmbientRenderer ? "ambient" : "static", "data-agent-visual-presentation": presentation, "data-agent-visual-recipe": recipe, ref: hostRef, role: decorative ? undefined : "img", children: [_jsx(AgentVisualPoster, { recipe: recipe }), hasAmbientRenderer && hostRef.current ? (_jsx("div", { "aria-hidden": "true", className: cn("absolute inset-0 opacity-0 transition-opacity duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)]", rendererReady && "opacity-100"), "data-agent-visual-renderer": "paper-metaballs", children: _jsx(AgentVisualErrorBoundary, { onUnavailable: handleUnavailable, children: _jsx(Suspense, { fallback: null, children: _jsx(LazyAgentVisualRenderer, { host: hostRef.current, onReady: handleReady, onUnavailable: handleUnavailable, recipe: recipe }) }) }) })) : null] }));
 }
 export { AgentVisual };

package/dist/components/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/components/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAUpE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAE1E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAW1E;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAWpE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAWrE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQrE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,qBAQ7E;AAED,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/components/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAUpE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAQ1E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAW1E;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAWpE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAWrE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQrE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,qBAQ7E;AAED,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/table.js

@@ -5,10 +5,10 @@ function Table({ className, ...props }) {
     return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto bg-background", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom bg-background text-sm", className), ...props }) }));
 }
 function TableHeader({ className, ...props }) {
-    return _jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props });
+    return (_jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:h-9 [&_tr]:border-b", className), ...props }));
 }
 function TableBody({ className, ...props }) {
-    return (_jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr:last-child]:border-0", className), ...props }));
+    return (_jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr]:h-10 [&_tr:last-child]:border-0", className), ...props }));
 }
 function TableFooter({ className, ...props }) {
     return (_jsx("tfoot", { "data-slot": "table-footer", className: cn("border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
@@ -17,7 +17,7 @@ function TableRow({ className, ...props }) {
     return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b border-border transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
 }
 function TableHead({ className, ...props }) {
-    return (_jsx("th", { "data-slot": "table-head", className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className), ...props }));
+    return (_jsx("th", { "data-slot": "table-head", className: cn("h-9 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className), ...props }));
 }
 function TableCell({ className, ...props }) {
     return (_jsx("td", { "data-slot": "table-cell", className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className), ...props }));

package/dist/internal/agent-visual/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/internal/agent-visual/color.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAyCpD,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAExF"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/internal/agent-visual/color.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AA4EpD,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAGxF"}

package/dist/internal/agent-visual/color.js

@@ -34,6 +34,39 @@ function parseOklch(value) {
         clamp(alpha),
     ];
 }
+function parseLab(value) {
+    if (!value.startsWith("lab"))
+        return null;
+    const start = value.indexOf("(");
+    const end = value.lastIndexOf(")");
+    if (start < 0 || end <= start)
+        return null;
+    const [channels, alphaValue] = value.slice(start + 1, end).split("/");
+    const [lightnessValue, aValue, bValue] = channels?.trim().split(/\s+/) ?? [];
+    const lightness = Number.parseFloat(lightnessValue ?? "");
+    const a = Number.parseFloat(aValue ?? "");
+    const b = Number.parseFloat(bValue ?? "");
+    const alpha = alphaValue ? Number.parseFloat(alphaValue.trim()) : 1;
+    if (![lightness, a, b, alpha].every(Number.isFinite))
+        return null;
+    const delta = 6 / 29;
+    const inverseLab = (channel) => channel > delta ? channel ** 3 : 3 * delta ** 2 * (channel - 4 / 29);
+    const f1 = (lightness + 16) / 116;
+    const x50 = 0.96422 * inverseLab(f1 + a / 500);
+    const y50 = inverseLab(f1);
+    const z50 = 0.82521 * inverseLab(f1 - b / 200);
+    // CSS Lab uses D50; WebGL colors use sRGB's D65 white point.
+    const x65 = 0.9555766 * x50 - 0.0230393 * y50 + 0.0631636 * z50;
+    const y65 = -0.0282895 * x50 + 1.0099416 * y50 + 0.0210077 * z50;
+    const z65 = 0.0122982 * x50 - 0.020483 * y50 + 1.3299098 * z50;
+    return [
+        linearToSrgb(3.2404542 * x65 - 1.5371385 * y65 - 0.4985314 * z65),
+        linearToSrgb(-0.969266 * x65 + 1.8760108 * y65 + 0.041556 * z65),
+        linearToSrgb(0.0556434 * x65 - 0.2040259 * y65 + 1.0572252 * z65),
+        clamp(alpha),
+    ];
+}
 export function resolveCampoColor(element, variable) {
-    return parseOklch(getComputedStyle(element).getPropertyValue(variable).trim());
+    const value = getComputedStyle(element).getPropertyValue(variable).trim();
+    return parseOklch(value) ?? parseLab(value);
 }

package/docs/contract.md

@@ -44,6 +44,14 @@ falls back to the same solid floating surface.
 Page and region states own one opaque dashed boundary. A Card-scoped Empty is
 transparent and unframed because the Card already owns containment.
 
+### Tables
+
+`Table` owns the native table structure, solid semantic background, horizontal
+overflow, and one compact density: 36px header rows and 40px body rows. Consumers
+compose `TableHeader`, `TableBody`, `TableRow`, `TableHead`, and `TableCell`; they
+do not replace table layout with grid or flex, hide the header to create another
+presentation, or reconstruct the native semantics with ARIA.
+
 ## Status Vocabulary
 
 `Badge` is the product's only status carrier. It ships five semantic tone
@@ -83,12 +91,14 @@ Assistant conversation and runtime APIs enter through `@nadicodeai/ui/agents`; A
 freedom are deliberately closed: one of `general`, `reasoning`,
 `coordination`, `communication`, or `execution`, plus the structural
 presentation `registry`, `card`, or `detail`. Consumers cannot supply colours,
-shader code, speed, count, density, frame, or material. Registry and Card
-presentations are deterministic posters. Detail may mount the Paper Metaballs
-renderer only after WebGL2 and reduced-motion checks; SSR, reduced motion,
-missing WebGL, initialization failure, and context loss retain the same poster.
-The visual is decorative by default. A meaningful selectable image opts into
-`decorative={false}` and supplies `label`.
+shader code, speed, count, density, frame, or material. Every presentation
+mounts the same ambient Paper Metaballs renderer after the reduced-motion
+check. The shared component mounts it only while the visual intersects the
+viewport, releasing its WebGL context offscreen; the vendor pauses it when the
+document is hidden. SSR, first paint, reduced motion,
+missing WebGL, initialization failure, and context loss retain the same
+deterministic poster. The visual is decorative by default. A meaningful
+selectable image opts into `decorative={false}` and supplies `label`.
 
 `AgentCard` composes the fundamental `Card` with explicit `visual`, `name`,
 `job`, `status`, `meta`, and `action` slots. It owns presentation only. The app

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -63,7 +63,7 @@
     "@assistant-ui/react": "0.15.1",
     "@assistant-ui/react-markdown": "0.14.8",
     "@base-ui/react": "^1.6.0",
-    "@nadicodeai/design-system": "1.0.0",
+    "@nadicodeai/design-system": "1.0.2",
     "@paper-design/shaders": "0.0.78",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/skills/nadicodeai-ui/SKILL.md

@@ -49,7 +49,7 @@ import { Thread } from "@nadicodeai/ui/agents";
 
 - Use `@nadicodeai/ui/agents` for assistant-ui conversation primitives, providers, hooks, runtimes, and types. It is a client-only entry; do not import assistant-ui packages directly or recreate their behavior.
 - Import Agent identity from `@nadicodeai/ui/components/agent-card` and `@nadicodeai/ui/components/agent-visual`. Direct subpaths keep the Card composition server-compatible and the animated visual at a client leaf.
-- Use `AgentVisual` with an explicit closed recipe and `registry`, `card`, or `detail` presentation; never infer or randomize identity from a free-form role. Compose it through `AgentCard` when the Agent is a recognizable content object. There is no `AgentGlyph` or `AgentRow`.
+- Use `AgentVisual` with an explicit closed recipe and `registry`, `card`, or `detail` presentation; every role renders the living identity when motion and WebGL are available. The poster is first paint and fallback. Never infer or randomize identity from a free-form role. Compose it through `AgentCard` when the Agent is a recognizable content object. There is no `AgentGlyph` or `AgentRow`.
 - `Card` defaults to the resting material. Select `surface="raised"` for physically raised/selected work and `surface="plain"` for an intentional structural/auth/website escape. Do not add border, ring, or shadow classes at call sites.
 - Use `Empty scope="page|region|card"` so only the owning container draws a frame. Use `GlassControl shape="control"` for compact floating controls and `shape="bar"` for full-width header chrome, never content or modal bodies.
 - Use first-party shadcn registry source in the consuming app for generic data tables, command palettes, and chart cards; do not import a NadicodeAI package abstraction for those patterns.