@grafloria/element 0.3.17 → 0.3.19

package/src/libs/renderer/src/comments/comment-pins.js

@@ -0,0 +1,227 @@
+"use strict";
+// Wave 9 — Card 6: the comment PINS, in the canvas.
+//
+// A pure function from (threads, viewport) to a VNode layer. No DOM, no state, no
+// side effects — so it renders identically in the live canvas, in `renderToStaticSVG`
+// and in a PNG export, and a screen-reader user reading a server-rendered SVG gets the
+// comments too.
+//
+// ===========================================================================
+// WORLD COORDINATES, AND WHY THAT SENTENCE IS THE ENTIRE POSITIONING STORY
+// ===========================================================================
+// The root `<svg>` carries a viewBox — pan and zoom ARE the viewBox. So a child placed
+// at world (640, 480) is on the diagram, not on the glass: it pans and zooms with the
+// nodes because it is in the same coordinate space as the nodes, by construction, with
+// no code. A pin drawn in screen coordinates would need to be re-derived on every pan
+// frame, and would be wrong on the frames where somebody forgot.
+//
+// The pin's SIZE is the one thing that is not a world quantity. A pin drawn at a fixed
+// world radius becomes a dot at zoom 0.1 and swallows the node at zoom 4. It is
+// counter-scaled by `1/zoom` so it stays a constant number of SCREEN pixels — which is
+// what a UI affordance is: a target for a finger, not a feature of the drawing.
+//
+// ===========================================================================
+// ACCESSIBILITY IS NOT A LAYER ON TOP OF THIS. IT IS THE POINT.
+// ===========================================================================
+// A comment is TEXT WRITTEN BY A HUMAN FOR A HUMAN. It is exactly the content a screen
+// reader user must be able to reach — and a pin that is a bare `<circle>` is a decoration
+// that hides a conversation. So each pin:
+//
+//   • is a `role="button"` with a real accessible NAME that says what it is about, how
+//     many replies it has, whether it is resolved, whether it is DETACHED, and how many
+//     messages you have not read;
+//   • carries `aria-expanded` so the AT can say "collapsed"/"expanded" as the panel opens;
+//   • takes part in the diagram's ROVING TABINDEX — `tabindex=-1` unless it is the
+//     focused element — because the canvas is ONE tab stop and a diagram with 40 comment
+//     pins must not become a 40-stop tab trap;
+//   • marks its own graphics `aria-hidden`, so the AT reads the name once instead of
+//     announcing an unlabelled circle and a stray number.
+//
+// The pin is the POINTER to the conversation. The conversation itself is read in the
+// panel (comment-panel.ts), which is real HTML with real headings and a real form —
+// because reading a threaded discussion through SVG semantics would be a hostile joke.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commentPinAccessibleName = commentPinAccessibleName;
+exports.renderCommentPins = renderCommentPins;
+/** Screen-pixel radius of a pin. Big enough to be a touch target at any zoom. */
+const DEFAULT_RADIUS = 11;
+/**
+ * The accessible name of a pin. This is the ONLY thing an AT user hears about a comment
+ * before they decide whether to open it, so it has to answer the question they are
+ * actually asking: what is this about, is it live, and is any of it new to me?
+ */
+function commentPinAccessibleName(thread) {
+    const anchor = thread.resolvedAnchor;
+    const live = thread.messages.filter((m) => !m.deleted);
+    const replies = Math.max(0, live.length - 1);
+    const about = !anchor.attached
+        ? `a deleted ${anchor.targetKind === 'link' ? 'edge' : 'node'}, ${anchor.targetLabel}`
+        : anchor.targetKind === 'region'
+            ? 'a region of the canvas'
+            : anchor.targetLabel;
+    const bits = [`Comment thread on ${about}`];
+    bits.push(replies === 1 ? '1 reply' : `${replies} replies`);
+    if (thread.resolved)
+        bits.push('resolved');
+    // DETACHED IS SAID OUT LOUD, not encoded in a colour or a dash pattern. A sighted user
+    // gets a broken ring; an AT user gets the word. WCAG 1.4.1 is not a styling rule.
+    if (!anchor.attached)
+        bits.push('detached');
+    if (thread.unread > 0)
+        bits.push(`${thread.unread} unread`);
+    return bits.join(', ');
+}
+/** Is this thread's pin inside the visible world rect (pins are small; a small pad). */
+function visible(t, rect, pad) {
+    if (!rect)
+        return true;
+    const { x, y } = t.resolvedAnchor.point;
+    return (x >= rect.x - pad &&
+        x <= rect.x + rect.width + pad &&
+        y >= rect.y - pad &&
+        y <= rect.y + rect.height + pad);
+}
+/**
+ * Build the pin layer.
+ *
+ * Returns a `<g>` even when empty: a stable element keeps the patcher's keyed diff
+ * simple, and an empty `<g>` costs nothing to reconcile.
+ */
+function renderCommentPins(threads, options = {}) {
+    var _a, _b;
+    const zoom = options.zoom && options.zoom > 0 ? options.zoom : 1;
+    const r = (_a = options.radius) !== null && _a !== void 0 ? _a : DEFAULT_RADIUS;
+    const showResolved = (_b = options.showResolved) !== null && _b !== void 0 ? _b : false;
+    // Counter-scale: the pin is a UI affordance, so it lives in screen units.
+    const scale = 1 / zoom;
+    const pad = (r + 4) * scale;
+    const children = [];
+    for (const t of threads) {
+        if (t.resolved && !showResolved)
+            continue;
+        if (!visible(t, options.visibleRect, pad))
+            continue;
+        children.push(pin(t, r, scale, options));
+    }
+    return {
+        type: 'g',
+        key: 'comments-layer',
+        props: {
+            className: 'grafloria-comments-layer',
+            // The LAYER is not a group in the a11y tree — the pins are. A wrapper role here
+            // would just add a level of nesting an AT user has to walk past.
+            'aria-hidden': children.length === 0 ? 'true' : undefined,
+            'data-comment-count': String(children.length),
+        },
+        children,
+    };
+}
+function pin(t, r, scale, options) {
+    const { point, attached } = t.resolvedAnchor;
+    const selected = options.selectedThreadId === t.id;
+    const focused = options.focusedThreadId === t.id;
+    const live = t.messages.filter((m) => !m.deleted);
+    const count = live.length;
+    const cls = [
+        'grafloria-comment-pin',
+        t.resolved ? 'grafloria-comment-pin--resolved' : '',
+        attached ? '' : 'grafloria-comment-pin--detached',
+        t.unread > 0 ? 'grafloria-comment-pin--unread' : '',
+        selected ? 'grafloria-comment-pin--selected' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const body = [
+        // The teardrop tail: points AT the thing. Drawn first so the disc covers its base.
+        {
+            type: 'path',
+            key: 'tail',
+            props: {
+                d: `M 0 ${r * 1.55} L ${-r * 0.45} ${r * 0.55} L ${r * 0.45} ${r * 0.55} Z`,
+                fill: 'currentColor',
+                'aria-hidden': 'true',
+            },
+        },
+        {
+            type: 'circle',
+            key: 'disc',
+            props: {
+                cx: 0,
+                cy: 0,
+                r,
+                fill: 'currentColor',
+                stroke: '#ffffff',
+                'stroke-width': 1.5,
+                'aria-hidden': 'true',
+            },
+        },
+        {
+            type: 'text',
+            key: 'count',
+            props: {
+                x: 0,
+                y: 0,
+                'text-anchor': 'middle',
+                'dominant-baseline': 'central',
+                'font-size': r * 1.1,
+                'font-family': 'system-ui, sans-serif',
+                'font-weight': 600,
+                fill: '#ffffff',
+                // The name on the button already says "3 replies". Letting the AT also read the
+                // bare glyph "3" would announce the same fact twice, badly.
+                'aria-hidden': 'true',
+                textContent: t.resolved ? '✓' : String(count),
+            },
+        },
+    ];
+    // NON-COLOUR ENCODING (WCAG 1.4.1). A detached thread gets a BROKEN RING, a resolved
+    // one a CHECK — not merely a different fill. Colour alone would be invisible to ~8% of
+    // men, and completely invisible in forced-colors mode.
+    if (!attached) {
+        body.push({
+            type: 'circle',
+            key: 'detached-ring',
+            props: {
+                cx: 0,
+                cy: 0,
+                r: r + 3.5,
+                fill: 'none',
+                stroke: 'currentColor',
+                'stroke-width': 1.5,
+                'stroke-dasharray': '2,3',
+                'aria-hidden': 'true',
+            },
+        });
+    }
+    if (t.unread > 0) {
+        body.push({
+            type: 'circle',
+            key: 'unread-dot',
+            props: {
+                cx: r * 0.78,
+                cy: -r * 0.78,
+                r: r * 0.36,
+                fill: '#dc2626',
+                stroke: '#ffffff',
+                'stroke-width': 1,
+                'aria-hidden': 'true',
+            },
+        });
+    }
+    return {
+        type: 'g',
+        key: `comment-${t.id}`,
+        props: Object.assign(Object.assign({ 
+            // The pin is placed in WORLD space; only its own contents are counter-scaled, so
+            // the anchor point stays exact at every zoom.
+            transform: `translate(${point.x}, ${point.y}) scale(${scale})`, className: cls, role: 'button', 'aria-label': commentPinAccessibleName(t), 'aria-expanded': options.selectedThreadId === t.id ? 'true' : 'false', 
+            // ROVING TABINDEX: the canvas is ONE tab stop. Forty pins must not be forty of them.
+            tabindex: focused ? '0' : '-1' }, (focused ? { 'data-focused': 'true' } : {})), { 'data-comment-thread-id': t.id, 'data-comment-attached': attached ? 'true' : 'false', 'data-comment-resolved': t.resolved ? 'true' : 'false', 'data-comment-unread': String(t.unread), style: {
+                // Colour is the SECONDARY cue everywhere; see the glyphs above.
+                color: !attached ? '#b45309' : t.resolved ? '#15803d' : '#2563eb',
+                cursor: 'pointer',
+            } }),
+        children: body,
+    };
+}
+//# sourceMappingURL=comment-pins.js.map

package/src/libs/renderer/src/comments/comment-pins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"comment-pins.js","sourceRoot":"","sources":["../../../../../../renderer/src/comments/comment-pins.ts"],"names":[],"mappings":"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"}

package/src/libs/renderer/src/comments/index.d.ts

@@ -0,0 +1,3 @@
+export * from './comment-pins';
+export * from './comment-panel';
+export * from './comment-overlay';

package/src/libs/renderer/src/comments/index.js

@@ -0,0 +1,17 @@
+"use strict";
+// Wave 9 (Collaboration) — Card 6: the comment overlay.
+//
+//   comment-pins    — the pins IN the canvas. A pure VNode function in WORLD coordinates,
+//                     so pan/zoom carry them for free and SSR/export keep them. Each pin
+//                     is a named `role=button` in the diagram's roving tabindex.
+//   comment-panel   — the conversation ITSELF, as real HTML: headings, a list, a labelled
+//                     reply box, Escape to leave. Not a keyboard trap.
+//   comment-overlay — the controller. Owns the LOCAL view state (selection, focus, read
+//                     markers) and is the one place that keeps wave 8's FRAME GATE honest:
+//                     anything the model cannot see calls `renderer.invalidateFrame()`.
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./comment-pins"), exports);
+tslib_1.__exportStar(require("./comment-panel"), exports);
+tslib_1.__exportStar(require("./comment-overlay"), exports);
+//# sourceMappingURL=index.js.map

package/src/libs/renderer/src/comments/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../renderer/src/comments/index.ts"],"names":[],"mappings":";AAAA,wDAAwD;AACxD,EAAE;AACF,0FAA0F;AAC1F,yFAAyF;AACzF,iFAAiF;AACjF,0FAA0F;AAC1F,uEAAuE;AACvE,wFAAwF;AACxF,2FAA2F;AAC3F,wFAAwF;;;AAExF,yDAA+B;AAC/B,0DAAgC;AAChC,4DAAkC"}

package/src/libs/renderer/src/export/assets.d.ts

@@ -0,0 +1,96 @@
+import type { VNode } from '../types/vnode.types';
+export type FontFormat = 'woff2' | 'woff' | 'truetype' | 'opentype';
+export interface FontSource {
+    /** The family name the diagram's `font-family` refers to, e.g. `Inter`. */
+    family: string;
+    /** The font program's bytes. */
+    data: Uint8Array;
+    format?: FontFormat;
+    /** e.g. `400`, `700`, `'bold'`. Default `'normal'`. */
+    weight?: string | number;
+    /** `'normal'` | `'italic'`. Default `'normal'`. */
+    style?: string;
+    /** Optional `unicode-range` descriptor. */
+    unicodeRange?: string;
+}
+/** `woff2` from a `.woff2` URL, etc. Defaults to woff2 — by far the most common on the web. */
+export declare function fontFormatFromUrl(url: string): FontFormat;
+/**
+ * Build the `@font-face` CSS that makes an export carry its own glyphs.
+ *
+ * PURE — bytes in, CSS out. Hand the result to `SvgExportOptions.embedFontCss` and the file
+ * renders identically on a machine that has never heard of the typeface.
+ *
+ * The `format('…')` hint is not decoration: without it a renderer must sniff the bytes, and
+ * some (notably older librsvg) simply decline and fall back.
+ */
+export declare function fontFaceCss(fonts: FontSource[]): string;
+/** Is this a reference that has to leave the document to resolve? */
+export declare function isExternalUrl(value: unknown): value is string;
+/**
+ * Every external asset URL the tree references. PURE.
+ *
+ * Deduplicated and returned in a STABLE order (first appearance), so a caller that fetches
+ * them and re-inlines gets the same bytes for the same diagram every time — determinism runs
+ * all the way through this module.
+ */
+export declare function collectAssetUrls(root: VNode): string[];
+/**
+ * Replace external asset URLs with the supplied `data:` URIs. PURE — returns a new tree.
+ *
+ * A URL with no entry in the map is LEFT ALONE rather than blanked: a broken-but-present
+ * reference is debuggable, and an element silently stripped of its href is not. The async
+ * layer reports those as warnings.
+ */
+export declare function inlineAssets(root: VNode, byUrl: ReadonlyMap<string, string>): VNode;
+/** Fetch bytes for a URL. Injectable — so tests never touch the network. */
+export type AssetFetcher = (url: string) => Promise<{
+    data: Uint8Array;
+    mimeType: string;
+}>;
+export interface ResolveAssetsOptions {
+    /** How to get the bytes. Defaults to `fetch` when the environment has one. */
+    fetcher?: AssetFetcher;
+    /** Cap on one asset's size, in bytes. Default 5MB — a data: URI is ~33% bigger than the file. */
+    maxBytes?: number;
+}
+export interface ResolveAssetsResult {
+    tree: VNode;
+    /** How many external references were replaced. */
+    inlined: number;
+    warnings: string[];
+}
+/**
+ * Fetch every external asset the tree references and inline it as a `data:` URI.
+ *
+ * A FAILED ASSET IS A WARNING, NOT A THROW. One 404 avatar must not lose you the export of a
+ * 200-node diagram — the reference is left as-is (still broken, but visible and debuggable)
+ * and the caller is told. That is the same rule the batch exporter follows.
+ */
+export declare function resolveAssets(root: VNode, options?: ResolveAssetsOptions): Promise<ResolveAssetsResult>;
+export interface TieredFetchOptions {
+    /** Tier 2: consulted only when the environment's own fetch fails. */
+    fetcher?: AssetFetcher;
+    /** Cap on one asset's size, in bytes. Default 5MB. TERMINAL — no tier retries it. */
+    maxBytes?: number;
+    /** Bound on fetching ONE URL, per tier, in milliseconds. Default 5000. */
+    timeoutMs?: number;
+}
+export interface TieredFetchResult {
+    /** URL → `data:` URI, for every asset some tier could produce. */
+    byUrl: Map<string, string>;
+    /** URL → why EVERY tier failed — ready to surface as a warning. */
+    failures: Map<string, string>;
+}
+/**
+ * Fetch every URL through the tiers above. Deduplicated: a URL is fetched once no
+ * matter how many elements reference it. Resolves when the last URL settles; never
+ * rejects.
+ */
+export declare function fetchAssetsTiered(urls: readonly string[], options?: TieredFetchOptions): Promise<TieredFetchResult>;
+/**
+ * Fetch a font and turn it into a {@link FontSource}, ready for {@link fontFaceCss}.
+ */
+export declare function fetchFont(url: string, descriptor: Omit<FontSource, 'data' | 'format'> & {
+    format?: FontFormat;
+}, options?: ResolveAssetsOptions): Promise<FontSource>;