@signal9/era-ui 2.14.0 → 2.16.0

package/dist/ai/index.d.ts

@@ -27,7 +27,7 @@ export { default as Checkpoint } from './checkpoint.svelte';
 export { default as Loader } from './loader.svelte';
 export { default as Shimmer } from './shimmer.svelte';
 export { default as AIImage } from './image.svelte';
-export { default as CopyButton } from './copy-button.svelte';
+export { CopyButton } from '../ui/copy-button/index.js';
 export { StickToBottom } from './stick-to-bottom.svelte.js';
 export type { PromptAttachment, PromptMessage, ChatStatus } from './prompt-input/index.js';
 export type { MessageRole, MessageVersion } from './message/index.js';

package/dist/ai/index.js

@@ -32,7 +32,8 @@ export { default as Checkpoint } from './checkpoint.svelte';
 export { default as Loader } from './loader.svelte';
 export { default as Shimmer } from './shimmer.svelte';
 export { default as AIImage } from './image.svelte';
-export { default as CopyButton } from './copy-button.svelte';
+// Promoted to a ui primitive; re-exported here so `$lib/ai`'s surface is stable.
+export { CopyButton } from '../ui/copy-button/index.js';
 export { StickToBottom } from './stick-to-bottom.svelte.js';
 export { categorizeError } from './error-panel/index.js';
 export { projectMessages, toolState } from './project.js';

package/dist/dev/audit/audits/_helpers.d.ts

@@ -1,5 +1,14 @@
 /** Sub-pixel tolerance. Below this, treat values as equal. */
 export declare const TOL = 0.5;
+/**
+ * The children that actually participate in the container's flex layout.
+ *
+ * Out-of-flow children (a slider thumb, a file-upload drop overlay, any
+ * absolutely-positioned decoration) are laid out against the container's padding
+ * box, not against their siblings — measuring them as flex items produces
+ * nonsense: overlapping boxes report NEGATIVE sibling gaps, which is how the
+ * slider reported a −87px gap and file-upload a −237px one. Skip them.
+ */
 export declare function flexChildren(el: HTMLElement): HTMLElement[];
 export declare function isFlex(style: CSSStyleDeclaration): boolean;
 export declare function isHorizontalFlex(style: CSSStyleDeclaration): boolean;

package/dist/dev/audit/audits/_helpers.js

@@ -1,7 +1,21 @@
 /** Sub-pixel tolerance. Below this, treat values as equal. */
 export const TOL = 0.5;
+/**
+ * The children that actually participate in the container's flex layout.
+ *
+ * Out-of-flow children (a slider thumb, a file-upload drop overlay, any
+ * absolutely-positioned decoration) are laid out against the container's padding
+ * box, not against their siblings — measuring them as flex items produces
+ * nonsense: overlapping boxes report NEGATIVE sibling gaps, which is how the
+ * slider reported a −87px gap and file-upload a −237px one. Skip them.
+ */
 export function flexChildren(el) {
-    return [...el.children].filter((c) => c instanceof HTMLElement);
+    return [...el.children].filter((c) => {
+        if (!(c instanceof HTMLElement))
+            return false;
+        const pos = getComputedStyle(c).position;
+        return pos !== 'absolute' && pos !== 'fixed';
+    });
 }
 export function isFlex(style) {
     return style.display === 'flex' || style.display === 'inline-flex';

package/dist/dev/audit/audits/index.d.ts

@@ -1,4 +1,5 @@
 import { concentricInset } from './concentric-inset.js';
+import { radiusConcentricity } from './radius-concentricity.js';
 import { uniformSiblingGaps } from './uniform-sibling-gaps.js';
 import { wallMatchesGap } from './wall-matches-gap.js';
-export { concentricInset, uniformSiblingGaps, wallMatchesGap };
+export { concentricInset, radiusConcentricity, uniformSiblingGaps, wallMatchesGap };

package/dist/dev/audit/audits/index.js

@@ -1,9 +1,11 @@
 import { registry } from '../registry.js';
 import { concentricInset } from './concentric-inset.js';
+import { radiusConcentricity } from './radius-concentricity.js';
 import { uniformSiblingGaps } from './uniform-sibling-gaps.js';
 import { wallMatchesGap } from './wall-matches-gap.js';
-export { concentricInset, uniformSiblingGaps, wallMatchesGap };
+export { concentricInset, radiusConcentricity, uniformSiblingGaps, wallMatchesGap };
 // Auto-register built-ins. Consumers can still unregister or add their own.
 registry.register(concentricInset);
+registry.register(radiusConcentricity);
 registry.register(uniformSiblingGaps);
 registry.register(wallMatchesGap);

package/dist/dev/audit/audits/radius-concentricity.d.ts

@@ -0,0 +1,2 @@
+import type { Audit } from '../types.js';
+export declare const radiusConcentricity: Audit;

package/dist/dev/audit/audits/radius-concentricity.js

@@ -0,0 +1,52 @@
+import { TOL, flexChildren, isFlex } from './_helpers.js';
+import { getConcentricity } from '../../measure.js';
+/*
+ * The concentricity law: nested corners share a centre of curvature only when
+ * the radius step equals the gap. Stated as one identity —
+ *
+ *     rd_outer − rd_inner  ==  (h_outer − h_inner) / 2  ==  gap
+ *
+ * Checking any TWO of those three terms passes boxes that are visibly wrong, so
+ * this asserts all three together. Rounded containers only: on data-corners
+ * ="square" every radius collapses to 0 and the law is vacuously true.
+ */
+/**
+ * Tallest a container can be and still be a bounded TIER control. The tallest
+ * tier is --era-h-lg, which peaks at 64px on touch; anything above that is an
+ * unbounded content container.
+ */
+const BOUNDED_MAX = 64;
+export const radiusConcentricity = {
+    id: 'layout/radius-concentricity',
+    name: 'Concentric radius',
+    description: 'A rounded child in a rounded container must satisfy rd_outer − rd_inner = (h_outer − h_inner)/2 = gap, so the corners share a centre of curvature.',
+    category: 'layout',
+    severity: 'warn',
+    selector: '*',
+    check(el) {
+        const s = getComputedStyle(el);
+        if (!isFlex(s) || parseFloat(s.borderTopLeftRadius) <= 0)
+            return null;
+        // Bounded tier controls only. An unbounded container (card, pane, dialog
+        // body) is padded OPTICALLY (--era-pad-*), not by the even-gap law, so the
+        // radius step has nothing to be equal to — holding it to the identity is a
+        // false positive by the design system's own rules.
+        if (el.getBoundingClientRect().height > BOUNDED_MAX)
+            return null;
+        const issues = [];
+        for (const kid of flexChildren(el)) {
+            if (parseFloat(getComputedStyle(kid).borderTopLeftRadius) <= 0)
+                continue;
+            const c = getConcentricity(kid, el, TOL);
+            if (c.holds)
+                continue;
+            issues.push({
+                auditId: 'layout/radius-concentricity',
+                element: kid,
+                message: `radius step ${c.radiusDelta.toFixed(1)} ≠ implied gap ${c.impliedGap.toFixed(1)} ≠ measured gap ${c.gap.toFixed(1)}`,
+                details: { ...c }
+            });
+        }
+        return issues.length > 0 ? issues : null;
+    }
+};

package/dist/dev/index.d.ts

@@ -1,2 +1,3 @@
 export * from './audit/index.js';
+export * from './measure.js';
 export { default as AuditOverlay } from './audit-overlay.svelte';

package/dist/dev/index.js

@@ -1,2 +1,3 @@
 export * from './audit/index.js';
+export * from './measure.js';
 export { default as AuditOverlay } from './audit-overlay.svelte';

package/dist/dev/measure.d.ts

@@ -0,0 +1,75 @@
+/** Sub-pixel residual to forgive — fractional line boxes and dpr rounding. */
+export declare const TOL = 0.5;
+export interface Box {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    /** Computed top-left border-radius, in px (all four corners are equal in era). */
+    readonly radius: number;
+}
+export interface Gaps {
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+}
+/** Rect + resolved radius, relative to the viewport. */
+export declare function getRect(el: Element): Box;
+/** Rect relative to an offset root, so overlays can draw in the root's space. */
+export declare function getRelativeRect(el: Element, root: Element): Box;
+/**
+ * The four gaps between a child's border box and its container's border box —
+ * what the eye actually reads as the inset, padding and border included.
+ */
+export declare function getGaps(child: Element, container: Element): Gaps;
+/** Shortest edge-to-edge distance between two boxes; 0 when they intersect. */
+export declare function getDistance(a: Element, b: Element): number;
+export declare function isEven(g: Gaps, tol?: number): boolean;
+export interface Concentricity {
+    readonly outerRadius: number;
+    readonly innerRadius: number;
+    /** rd_outer − rd_inner */
+    readonly radiusDelta: number;
+    /** (h_outer − h_inner) / 2 — the vertical gap the tiers imply. */
+    readonly impliedGap: number;
+    /** The gap actually measured on top. */
+    readonly gap: number;
+    /** The identity: rd_outer − rd_inner == (h_outer − h_inner)/2 == gap. */
+    readonly holds: boolean;
+}
+/**
+ * The concentricity law. Nested corners share a centre of curvature only when
+ * the radius step equals the gap — checking any two of the three terms passes
+ * boxes that are visibly wrong, so assert all three at once.
+ */
+export declare function getConcentricity(child: Element, container: Element, tol?: number): Concentricity;
+/**
+ * One control nested in one container — the unit the overlay puts numbers on.
+ *
+ * A readout is NOT a verdict. Whether a box is WRONG is the audits' call
+ * (`runAudits` in ./audit), because the laws are subtler than any single pair:
+ * in a row of three buttons the middle one's distance to the container's left
+ * wall is meaningless, so "is this child's left gap equal to its top gap?" is
+ * the wrong question to ask of it. The audits ask the right ones — vertical
+ * symmetry per child, wall-vs-gap on the row, uniform sibling gaps, concentric
+ * radius — and this type just carries the geometry to draw.
+ */
+export interface Readout {
+    readonly container: HTMLElement;
+    readonly child: HTMLElement;
+    readonly childBox: Box;
+    readonly gaps: Gaps;
+    /** Only meaningful when both boxes are rounded; null otherwise. */
+    readonly concentric: Concentricity | null;
+}
+/**
+ * Every container/child pair in a subtree worth putting a number on.
+ *
+ * The filter is what keeps this from drowning in noise: a pair qualifies only
+ * when the container is a CONTROL-shaped box — bounded height, and rounded or
+ * flex/grid — because the even-gap law is about the geometric padding inside a
+ * bounded tier, not the optical padding of an unbounded card. Layout wrappers (a
+ * section, a demo column) are skipped, and so is anything inside an <svg>.
+ */
+export declare function measureReadouts(root: HTMLElement, maxContainerHeight?: number): Readout[];

package/dist/dev/measure.js

@@ -0,0 +1,142 @@
+/*
+ * Measurement primitives — the numbers era's layout rules are stated in.
+ *
+ * A class string is a claim; the rendered box is the fact. Every metric rule in
+ * the design system (the even-gap law, the concentricity law) is an assertion
+ * about geometry that only a real layout pass can settle, so this module reads
+ * it back off the DOM: rects, computed radii, and the gaps between a control and
+ * its container.
+ *
+ * The API is deliberately shaped like mezr's (getRect / getGaps / getDistance)
+ * so it can be swapped for that library, but it stays in-repo for two reasons a
+ * generic measurement library can't cover:
+ *
+ *   - era's rules turn on border-RADIUS as much as on distance (the
+ *     concentricity identity), which no DOM-distance library reports;
+ *   - the readouts have to render as token-driven DOM so they inherit
+ *     data-surface / data-mode / data-font like everything else. A canvas ruler
+ *     (@scena/ruler) is blind to those axes.
+ *
+ * DOM-only: every function here reads layout, so it must run in the browser.
+ */
+/** Sub-pixel residual to forgive — fractional line boxes and dpr rounding. */
+export const TOL = 0.5;
+/** Rect + resolved radius, relative to the viewport. */
+export function getRect(el) {
+    const r = el.getBoundingClientRect();
+    return {
+        x: r.x,
+        y: r.y,
+        width: r.width,
+        height: r.height,
+        radius: parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0
+    };
+}
+/** Rect relative to an offset root, so overlays can draw in the root's space. */
+export function getRelativeRect(el, root) {
+    const b = getRect(el);
+    const r = root.getBoundingClientRect();
+    return { ...b, x: b.x - r.x, y: b.y - r.y };
+}
+/**
+ * The four gaps between a child's border box and its container's border box —
+ * what the eye actually reads as the inset, padding and border included.
+ */
+export function getGaps(child, container) {
+    const c = child.getBoundingClientRect();
+    const p = container.getBoundingClientRect();
+    return {
+        top: c.top - p.top,
+        right: p.right - c.right,
+        bottom: p.bottom - c.bottom,
+        left: c.left - p.left
+    };
+}
+/** Shortest edge-to-edge distance between two boxes; 0 when they intersect. */
+export function getDistance(a, b) {
+    const r1 = a.getBoundingClientRect();
+    const r2 = b.getBoundingClientRect();
+    const dx = Math.max(r2.left - r1.right, r1.left - r2.right, 0);
+    const dy = Math.max(r2.top - r1.bottom, r1.top - r2.bottom, 0);
+    return Math.hypot(dx, dy);
+}
+export function isEven(g, tol = TOL) {
+    const { top, right, bottom, left } = g;
+    return (Math.abs(top - bottom) <= tol && Math.abs(left - right) <= tol && Math.abs(top - left) <= tol);
+}
+/**
+ * The concentricity law. Nested corners share a centre of curvature only when
+ * the radius step equals the gap — checking any two of the three terms passes
+ * boxes that are visibly wrong, so assert all three at once.
+ */
+export function getConcentricity(child, container, tol = TOL) {
+    const inner = getRect(child);
+    const outer = getRect(container);
+    const gaps = getGaps(child, container);
+    const radiusDelta = outer.radius - inner.radius;
+    const impliedGap = (outer.height - inner.height) / 2;
+    return {
+        outerRadius: outer.radius,
+        innerRadius: inner.radius,
+        radiusDelta,
+        impliedGap,
+        gap: gaps.top,
+        holds: Math.abs(radiusDelta - impliedGap) <= tol &&
+            Math.abs(impliedGap - gaps.top) <= tol &&
+            Math.abs(radiusDelta - gaps.top) <= tol
+    };
+}
+/**
+ * Every container/child pair in a subtree worth putting a number on.
+ *
+ * The filter is what keeps this from drowning in noise: a pair qualifies only
+ * when the container is a CONTROL-shaped box — bounded height, and rounded or
+ * flex/grid — because the even-gap law is about the geometric padding inside a
+ * bounded tier, not the optical padding of an unbounded card. Layout wrappers (a
+ * section, a demo column) are skipped, and so is anything inside an <svg>.
+ */
+export function measureReadouts(root, maxContainerHeight = 96) {
+    const out = [];
+    const isCandidate = (el) => {
+        if (el === root)
+            return false;
+        const r = el.getBoundingClientRect();
+        if (r.height === 0 || r.height > maxContainerHeight)
+            return false;
+        const s = getComputedStyle(el);
+        return parseFloat(s.borderTopLeftRadius) > 0 || /flex|grid/.test(s.display);
+    };
+    const push = (container, child) => {
+        const childBox = getRect(child);
+        if (childBox.width === 0 || childBox.height === 0)
+            return;
+        // An absolutely-positioned child is out of flow — its gaps say nothing
+        // about the container's padding.
+        if (getComputedStyle(child).position === 'absolute')
+            return;
+        const containerBox = getRect(container);
+        out.push({
+            container,
+            child: child,
+            childBox,
+            gaps: getGaps(child, container),
+            concentric: childBox.radius > 0 && containerBox.radius > 0 ? getConcentricity(child, container) : null
+        });
+    };
+    const walk = (el) => {
+        for (const child of el.children) {
+            if (child instanceof SVGElement) {
+                if (isCandidate(el))
+                    push(el, child); // never descend into svg internals
+                continue;
+            }
+            if (!(child instanceof HTMLElement))
+                continue;
+            if (isCandidate(el))
+                push(el, child);
+            walk(child);
+        }
+    };
+    walk(root);
+    return out;
+}