@principal-ai/logo-component 0.1.15 → 0.1.17

package/dist/TrailCityDiagram.js

@@ -0,0 +1,277 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrailCityDiagram = TrailCityDiagram;
+const react_1 = __importStar(require("react"));
+const VIEW_W = 700;
+const VIEW_H = 700;
+const CITY_COLS = 12;
+const CITY_ROWS = 12;
+const CELL_W = 50;
+const CELL_H = 50;
+const CITY_OFFSET_X = 50;
+const CITY_OFFSET_Y = 50;
+/** Center point of a grid cell, in viewBox coords. */
+function cellCenter(col, row) {
+    return {
+        x: CITY_OFFSET_X + col * CELL_W + CELL_W / 2,
+        y: CITY_OFFSET_Y + row * CELL_H + CELL_H / 2,
+    };
+}
+function buildCity(palette, pinned) {
+    const rng = mulberry32(7);
+    const cells = [];
+    for (let r = 0; r < CITY_ROWS; r++) {
+        for (let c = 0; c < CITY_COLS; c++) {
+            const isPinned = pinned.has(`${c},${r}`);
+            // Pinned cells (the ones markers sit on top of) always get a
+            // building so the marker has something to be centered on. Other
+            // cells skip occasionally to break up the grid.
+            const skipRoll = rng();
+            // Keep the RNG sequence stable so colors don't shift after dropping
+            // the per-building size jitter.
+            rng();
+            rng();
+            const colorRoll = rng();
+            if (!isPinned && skipRoll < 0.18)
+                continue;
+            const w = CELL_W - 8;
+            const h = CELL_H - 8;
+            cells.push({
+                x: CITY_OFFSET_X + c * CELL_W + (CELL_W - w) / 2,
+                y: CITY_OFFSET_Y + r * CELL_H + (CELL_H - h) / 2,
+                w,
+                h,
+                fill: palette[Math.floor(colorRoll * palette.length)],
+            });
+        }
+    }
+    return cells;
+}
+function mulberry32(seed) {
+    let t = seed;
+    return () => {
+        t = (t + 0x6d2b79f5) | 0;
+        let r = t;
+        r = Math.imul(r ^ (r >>> 15), r | 1);
+        r ^= r + Math.imul(r ^ (r >>> 7), r | 61);
+        return ((r ^ (r >>> 14)) >>> 0) / 4294967296;
+    };
+}
+/** VH leader from `a` (marker) to `b` (snippet anchor): exits `a` going
+ *  vertically toward `b.y`, then turns and runs horizontally to `b.x`. */
+function lRoutePath(a, b, radius = 12) {
+    const goingUp = b.y < a.y;
+    const ySign = goingUp ? -1 : 1;
+    const xSign = b.x < a.x ? -1 : 1;
+    const r = Math.min(radius, Math.abs(a.y - b.y) / 2, Math.abs(a.x - b.x) / 2);
+    return [
+        `M ${a.x} ${a.y}`,
+        `L ${a.x} ${b.y - ySign * r}`,
+        `Q ${a.x} ${b.y} ${a.x + xSign * r} ${b.y}`,
+        `L ${b.x} ${b.y}`,
+    ].join(' ');
+}
+/**
+ * Static SVG version of the FileCity trail overlay — a top-down grid of
+ * building rectangles with numbered markers wired by a dashed path, plus
+ * an L-routed leader line to a snippet card. Mirrors the look of
+ * `TrailFilePath` + `TrailLeaderLine` from the 3D panel without the
+ * three.js projection — suitable for marketing surfaces.
+ */
+function TrailCityDiagram({ theme, className, hideSnippet = false, snippetVisible = true, hideTrail = false, trailVisible = true, highlightTrail = false, stampRowVisible = false, userStamped = false, }) {
+    var _a, _b, _c, _d, _e, _f;
+    const snippetGateStyle = {
+        opacity: snippetVisible ? 1 : 0,
+        transition: 'opacity 500ms ease',
+        transitionDelay: snippetVisible ? '700ms' : '0ms',
+    };
+    const trailGateStyle = {
+        opacity: trailVisible ? 1 : 0,
+        transition: 'opacity 500ms ease',
+    };
+    const stampRowGateStyle = {
+        opacity: stampRowVisible ? 1 : 0,
+        transition: 'opacity 500ms ease',
+        transitionDelay: stampRowVisible ? '700ms' : '0ms',
+    };
+    const colors = theme === null || theme === void 0 ? void 0 : theme.colors;
+    const uid = (0, react_1.useId)().replace(/:/g, '');
+    const accent = (_a = colors === null || colors === void 0 ? void 0 : colors.primary) !== null && _a !== void 0 ? _a : '#22d3ee';
+    const surface = (_b = colors === null || colors === void 0 ? void 0 : colors.surface) !== null && _b !== void 0 ? _b : '#0f1419';
+    const text = (_c = colors === null || colors === void 0 ? void 0 : colors.text) !== null && _c !== void 0 ? _c : '#f8fafc';
+    const muted = (_d = colors === null || colors === void 0 ? void 0 : colors.textMuted) !== null && _d !== void 0 ? _d : '#94a3b8';
+    const bg = (_e = colors === null || colors === void 0 ? void 0 : colors.background) !== null && _e !== void 0 ? _e : '#0a0f14';
+    const success = (_f = colors === null || colors === void 0 ? void 0 : colors.success) !== null && _f !== void 0 ? _f : '#10b981';
+    // Silvery white-grey ink for ACK stamps — brighter than `muted` so it
+    // reads cleanly against the dark city.
+    const silver = '#d1d8e0';
+    const palette = (0, react_1.useMemo)(() => [
+        withAlpha(accent, 0.18),
+        withAlpha(accent, 0.32),
+        withAlpha(text, 0.08),
+        withAlpha(text, 0.14),
+        withAlpha(text, 0.22),
+    ], [accent, text]);
+    const markerCells = (0, react_1.useMemo)(() => [
+        { col: 1, row: 10, label: '1' },
+        { col: 3, row: 7, label: '2' },
+        { col: 6, row: 9, label: '3' },
+        { col: 4, row: 5, label: '4' },
+    ], []);
+    const pinnedCells = (0, react_1.useMemo)(() => new Set(markerCells.map(m => `${m.col},${m.row}`)), [markerCells]);
+    const buildings = (0, react_1.useMemo)(() => buildCity(palette, pinnedCells), [palette, pinnedCells]);
+    const markers = (0, react_1.useMemo)(() => markerCells.map(m => {
+        const c = cellCenter(m.col, m.row);
+        return { x: c.x, y: c.y, label: m.label };
+    }), [markerCells]);
+    const trailPath = (0, react_1.useMemo)(() => {
+        const [first, ...rest] = markers;
+        if (!first)
+            return '';
+        return [`M ${first.x} ${first.y}`, ...rest.map(m => `L ${m.x} ${m.y}`)].join(' ');
+    }, [markers]);
+    const activeMarker = markers[markers.length - 1];
+    const snippetAnchor = { x: VIEW_W - 320, y: 100 };
+    const leaderPath = (0, react_1.useMemo)(() => activeMarker
+        ? lRoutePath({ x: activeMarker.x, y: activeMarker.y }, snippetAnchor)
+        : '', [activeMarker, snippetAnchor.x, snippetAnchor.y]);
+    return (react_1.default.createElement("svg", { viewBox: `0 0 ${VIEW_W} ${VIEW_H}`, className: className, style: { display: 'block', width: '100%', height: 'auto', overflow: 'visible' }, role: "img", "aria-label": "A trail of code locations connected across a top-down city of files" },
+        react_1.default.createElement("defs", null,
+            react_1.default.createElement("linearGradient", { id: `fade-${uid}`, x1: "0", x2: "0", y1: "0", y2: "1" },
+                react_1.default.createElement("stop", { offset: "0%", stopColor: bg, stopOpacity: 0 }),
+                react_1.default.createElement("stop", { offset: "100%", stopColor: bg, stopOpacity: 0.7 }))),
+        react_1.default.createElement("rect", { x: 0, y: 0, width: VIEW_W, height: VIEW_H, fill: bg, rx: 12 }),
+        react_1.default.createElement("g", { style: {
+                opacity: highlightTrail ? 0.2 : 1,
+                transition: 'opacity 300ms ease',
+            } }, buildings.map((b, i) => (react_1.default.createElement("rect", { key: i, x: b.x, y: b.y, width: b.w, height: b.h, fill: b.fill, stroke: withAlpha(text, 0.08), strokeWidth: 0.5, rx: 2 })))),
+        !hideSnippet && (() => {
+            const activeCell = markerCells[markerCells.length - 1];
+            if (!activeCell)
+                return null;
+            return (react_1.default.createElement("g", { style: snippetGateStyle },
+                react_1.default.createElement("rect", { x: CITY_OFFSET_X + activeCell.col * CELL_W + 4, y: CITY_OFFSET_Y + activeCell.row * CELL_H + 4, width: CELL_W - 8, height: CELL_H - 8, fill: "none", stroke: accent, strokeWidth: 2, rx: 2, style: {
+                        opacity: highlightTrail ? 0.2 : 1,
+                        transition: 'opacity 300ms ease',
+                    } })));
+        })(),
+        react_1.default.createElement("rect", { x: 0, y: VIEW_H - 80, width: VIEW_W, height: 80, fill: `url(#fade-${uid})`, pointerEvents: "none" }),
+        !hideTrail && (react_1.default.createElement("g", { style: trailGateStyle },
+            react_1.default.createElement("path", { d: trailPath, fill: "none", stroke: accent, strokeWidth: highlightTrail ? 3.5 : 2, strokeLinecap: "round", strokeDasharray: "6 5", opacity: highlightTrail ? 1 : 0.9, style: {
+                    transition: 'stroke-width 300ms ease, opacity 300ms ease',
+                    filter: highlightTrail
+                        ? `drop-shadow(0 0 8px ${withAlpha(accent, 0.7)})`
+                        : undefined,
+                } }, highlightTrail && (react_1.default.createElement("animate", { attributeName: "stroke-dashoffset", from: 0, to: -44, dur: "1.4s", repeatCount: "indefinite" }))))),
+        !hideSnippet && (react_1.default.createElement("g", { style: snippetGateStyle },
+            react_1.default.createElement("path", { d: leaderPath, fill: "none", stroke: accent, strokeWidth: 1.5, strokeDasharray: "5 4", opacity: highlightTrail ? 0 : 0.7, style: { transition: 'opacity 300ms ease' } }),
+            activeMarker && (react_1.default.createElement("circle", { cx: activeMarker.x, cy: activeMarker.y, r: 3.5, fill: accent, opacity: highlightTrail ? 0 : 1, style: { transition: 'opacity 300ms ease' } })))),
+        !hideTrail && (react_1.default.createElement("g", { style: trailGateStyle }, markers.map((m, i) => {
+            const isActive = i === markers.length - 1;
+            const size = 22;
+            const half = size / 2;
+            return (react_1.default.createElement("g", { key: m.label },
+                isActive && (react_1.default.createElement("rect", { x: m.x - half - 4, y: m.y - half - 4, width: size + 8, height: size + 8, rx: 6, fill: accent, opacity: 0.18 },
+                    react_1.default.createElement("animate", { attributeName: "opacity", values: "0.28;0;0.28", dur: "2.4s", repeatCount: "indefinite" }))),
+                react_1.default.createElement("rect", { x: m.x - half, y: m.y - half, width: size, height: size, rx: 4, fill: surface, stroke: accent, strokeWidth: 1.75 }),
+                react_1.default.createElement("text", { x: m.x, y: m.y + 1, textAnchor: "middle", dominantBaseline: "central", fontSize: 14, fontWeight: 700, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: text }, m.label)));
+        }))),
+        !hideSnippet && (react_1.default.createElement("g", { style: snippetGateStyle },
+            react_1.default.createElement("g", { style: {
+                    opacity: highlightTrail ? 0.15 : 1,
+                    transition: 'opacity 300ms ease',
+                } },
+                react_1.default.createElement("circle", { cx: snippetAnchor.x, cy: snippetAnchor.y, r: 3.5, fill: accent }),
+                react_1.default.createElement(SnippetCard, { x: snippetAnchor.x, y: snippetAnchor.y - 22, surface: surface, text: text, muted: muted, accent: accent })))),
+        react_1.default.createElement("g", { style: stampRowGateStyle }, [
+            { initials: 'AJ', kind: 'LGTM', rotation: -6 },
+            { initials: 'MK', kind: 'ACK', rotation: 4 },
+            { initials: 'RT', kind: 'LGTM', rotation: -3 },
+            { initials: null, kind: null, rotation: 0 },
+        ].map((s, i) => {
+            const isEmpty = s.initials === null;
+            if (isEmpty && userStamped)
+                return null;
+            const W = 54;
+            const H = 36;
+            const gap = 6;
+            const rowX = snippetAnchor.x;
+            const rowY = snippetAnchor.y + 200;
+            const cx = rowX + i * (W + gap) + W / 2;
+            const cy = rowY + H / 2;
+            const ink = isEmpty ? muted : s.kind === 'LGTM' ? success : silver;
+            return (react_1.default.createElement("g", { key: i, transform: `translate(${cx}, ${cy}) rotate(${s.rotation})`, opacity: isEmpty ? 0.55 : 0.85 },
+                react_1.default.createElement("rect", { x: -W / 2, y: -H / 2, width: W, height: H, rx: 4, fill: isEmpty ? 'none' : withAlpha(ink, 0.08), stroke: ink, strokeWidth: 1.5, strokeDasharray: isEmpty ? '3 3' : undefined }),
+                !isEmpty && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("rect", { x: -W / 2 + 3, y: -H / 2 + 3, width: W - 6, height: H - 6, rx: 2, fill: "none", stroke: ink, strokeWidth: 0.75, opacity: 0.7 }),
+                    react_1.default.createElement("text", { x: 0, y: -5, textAnchor: "middle", dominantBaseline: "central", fontSize: 11, fontWeight: 700, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: ink, letterSpacing: "0.1em" }, s.initials),
+                    react_1.default.createElement("text", { x: 0, y: 7, textAnchor: "middle", dominantBaseline: "central", fontSize: 7, fontWeight: 700, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: ink, letterSpacing: "0.14em" }, s.kind))),
+                isEmpty && (react_1.default.createElement("text", { x: 0, y: 1, textAnchor: "middle", dominantBaseline: "central", fontSize: 18, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: ink, opacity: 0.7 }, "+"))));
+        }))));
+}
+function SnippetCard({ x, y, surface, text, muted, accent, }) {
+    const W = 280;
+    const H = 200;
+    const HEADER = 28;
+    const lines = [
+        { w: 170, c: muted },
+        { w: 220, c: text },
+        { w: 130, c: accent },
+        { w: 200, c: text },
+        { w: 150, c: muted },
+        { w: 100, c: text },
+    ];
+    return (react_1.default.createElement("g", { transform: `translate(${x}, ${y})` },
+        react_1.default.createElement("rect", { width: W, height: H, rx: 10, fill: surface, stroke: withAlpha(accent, 0.55), strokeWidth: 1.5 }),
+        react_1.default.createElement("rect", { width: W, height: HEADER, rx: 10, fill: withAlpha(accent, 0.08) }),
+        react_1.default.createElement("text", { x: 16, y: HEADER / 2, dominantBaseline: "central", fontSize: 13, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: text }, "db/users.ts:42"),
+        react_1.default.createElement("g", { transform: `translate(16, ${HEADER + 18})` }, lines.map((l, i) => (react_1.default.createElement("rect", { key: i, x: 0, y: i * 20, width: l.w, height: 7, rx: 2, fill: l.c, opacity: 0.75 }))))));
+}
+function withAlpha(color, alpha) {
+    // Accept #rgb / #rrggbb / rgb()/rgba()/hsl()/named — leave non-hex
+    // as-is and rely on the caller. For hex, append a 2-digit alpha.
+    if (/^#([0-9a-f]{3}){1,2}$/i.test(color)) {
+        let hex = color.slice(1);
+        if (hex.length === 3)
+            hex = hex.split('').map(c => c + c).join('');
+        const a = Math.round(Math.max(0, Math.min(1, alpha)) * 255)
+            .toString(16)
+            .padStart(2, '0');
+        return `#${hex}${a}`;
+    }
+    return color;
+}

package/dist/esm/FileCityLogo.js

@@ -0,0 +1,318 @@
+import React, { useId } from 'react';
+const VIEW = 100;
+// 5-row pixel glyphs — the primary-colored files trace these.
+//   `1` = a mark (primary) file
+//   `H` = the letter's counter — a forced hole (background shows through,
+//         no city file) so the loop reads as a real hole
+//   `0` = a city file (muted backdrop)
+const GLYPHS = {
+    // Closed bowl with a single hole punched in its center.
+    P: ['111', '1H1', '111', '100', '100'],
+    A: ['0110', '1HH1', '1111', '1001', '1001'],
+    I: ['111', '010', '010', '010', '111'],
+};
+const MARK_LETTERS = {
+    P: ['P'],
+    AI: ['A', 'I'],
+    PAI: ['P', 'A', 'I'],
+};
+/** Compose letters side by side (1 city column between them) into a
+ *  single kind map: 1 = mark, 2 = void/hole, 0 = city. */
+function composeMark(letters, gap = 1) {
+    const rows = 5;
+    const out = Array.from({ length: rows }, () => []);
+    letters.forEach((key, li) => {
+        if (li > 0)
+            for (let r = 0; r < rows; r++)
+                out[r].push(...new Array(gap).fill(0));
+        const glyph = GLYPHS[key];
+        for (let r = 0; r < rows; r++) {
+            for (const ch of glyph[r])
+                out[r].push(ch === '1' ? 1 : ch === 'H' ? 2 : 0);
+        }
+    });
+    return out;
+}
+function mulberry32(seed) {
+    let t = seed;
+    return () => {
+        t = (t + 0x6d2b79f5) | 0;
+        let r = t;
+        r = Math.imul(r ^ (r >>> 15), r | 1);
+        r ^= r + Math.imul(r ^ (r >>> 7), r | 61);
+        return ((r ^ (r >>> 14)) >>> 0) / 4294967296;
+    };
+}
+function withAlpha(color, alpha) {
+    // Accept #rgb / #rrggbb — leave non-hex as-is and rely on the caller.
+    if (/^#([0-9a-f]{3}){1,2}$/i.test(color)) {
+        let hex = color.slice(1);
+        if (hex.length === 3)
+            hex = hex.split('').map(c => c + c).join('');
+        const a = Math.round(Math.max(0, Math.min(1, alpha)) * 255)
+            .toString(16)
+            .padStart(2, '0');
+        return `#${hex}${a}`;
+    }
+    return color;
+}
+function toRgb(color) {
+    if (!/^#([0-9a-f]{3}){1,2}$/i.test(color))
+        return null;
+    let hex = color.slice(1);
+    if (hex.length === 3)
+        hex = hex.split('').map(c => c + c).join('');
+    return [
+        parseInt(hex.slice(0, 2), 16),
+        parseInt(hex.slice(2, 4), 16),
+        parseInt(hex.slice(4, 6), 16),
+    ];
+}
+/** Blend two colors. `t` = 0 returns `a`, `t` = 1 returns `b`. Falls
+ *  back to `a` when either side isn't a parseable hex. */
+function mix(a, b, t) {
+    const ca = toRgb(a);
+    const cb = toRgb(b);
+    if (!ca || !cb)
+        return a;
+    const ch = (i) => Math.round(ca[i] + (cb[i] - ca[i]) * Math.max(0, Math.min(1, t)))
+        .toString(16)
+        .padStart(2, '0');
+    return `#${ch(0)}${ch(1)}${ch(2)}`;
+}
+/**
+ * A compact, iconic "file city" mark — the same top-down grid of file
+ * squares as {@link TrailCityDiagram}, distilled to a logo: a small grid
+ * of smaller buildings, no trail / markers / snippet. The primary-colored
+ * files spell out the brand mark (P / AI / PAI) so the letters emerge
+ * from the muted city.
+ */
+export const FileCityLogo = ({ width = 150, height = 150, mark = 'P', primary, accent, color, background, theme, cells = 5, highlight = true, trail = false, gradient = 'diagonal', rounded = true, opacity = 0.9, }) => {
+    var _a, _b, _c, _d;
+    const uid = useId().replace(/:/g, '');
+    const primaryColor = (_a = primary !== null && primary !== void 0 ? primary : theme === null || theme === void 0 ? void 0 : theme.colors.primary) !== null && _a !== void 0 ? _a : '#22d3ee';
+    const accentColor = (_b = accent !== null && accent !== void 0 ? accent : theme === null || theme === void 0 ? void 0 : theme.colors.accent) !== null && _b !== void 0 ? _b : primaryColor;
+    const baseColor = (_c = color !== null && color !== void 0 ? color : theme === null || theme === void 0 ? void 0 : theme.colors.text) !== null && _c !== void 0 ? _c : '#f8fafc';
+    const bgColor = (_d = background !== null && background !== void 0 ? background : theme === null || theme === void 0 ? void 0 : theme.colors.background) !== null && _d !== void 0 ? _d : '#0a0f14';
+    // Same palette weighting as TrailCityDiagram so the two read as a set.
+    const palette = [
+        withAlpha(primaryColor, 0.18),
+        withAlpha(primaryColor, 0.32),
+        withAlpha(baseColor, 0.08),
+        withAlpha(baseColor, 0.14),
+        withAlpha(baseColor, 0.22),
+    ];
+    // The mark files vary in shade so the letter doesn't read as one flat
+    // block, but every shade stays vivid so it still stands out from the
+    // muted city behind it.
+    const markPalette = [
+        primaryColor,
+        mix(primaryColor, '#ffffff', 0.22),
+        mix(primaryColor, '#ffffff', 0.1),
+        withAlpha(primaryColor, 0.82),
+    ];
+    // Same idea for `accent` cells (e.g. the AI in the lockup), so they
+    // read in the accent color while the P stays primary.
+    const accentPalette = [
+        accentColor,
+        mix(accentColor, '#ffffff', 0.22),
+        mix(accentColor, '#ffffff', 0.1),
+        withAlpha(accentColor, 0.82),
+    ];
+    // Dimmed accent — used for the A in the lockup so it sits back from the
+    // brighter I.
+    const accentDimPalette = [
+        withAlpha(accentColor, 0.5),
+        withAlpha(accentColor, 0.62),
+        withAlpha(accentColor, 0.42),
+        withAlpha(accentColor, 0.55),
+    ];
+    // Build a square grid. For `mark="none"` it's a plain `cells × cells`
+    // city; otherwise the glyph bitmap sits inside a square grid (side =
+    // longest glyph dimension + a margin ring) so the city reads square.
+    const margin = 1;
+    const trailEnabled = trail && (mark === 'P' || mark === 'PAI');
+    let side;
+    let offX = 0;
+    let offY = 0;
+    let kindAt;
+    if (mark === 'none') {
+        side = cells;
+        const hi = Math.floor((cells - 1) / 2);
+        kindAt = (c, r) => (highlight && c === hi && r === hi ? 'mark' : 'city');
+    }
+    else if (mark === 'lockup') {
+        // Brand lockup: P on the left (cols 0-2, vertically centered), a gap
+        // column, then a stacked "AI" filling the right 3 columns — A in the
+        // top 4 rows, I in the bottom 3.
+        side = 7;
+        const pGlyph = GLYPHS.P; // 3 × 5
+        const aGlyph = ['111', '1H1', '111', '101']; // 3 × 4
+        const iGlyph = ['111', '010', '111']; // 3 × 3
+        const at = (g, gc, gr) => {
+            if (gr < 0 || gr >= g.length)
+                return null;
+            const row = g[gr];
+            return gc < 0 || gc >= row.length ? null : row[gc];
+        };
+        kindAt = (c, r) => {
+            // P is primary; the stacked AI is accent.
+            const pch = at(pGlyph, c, r - 1); // P: cols 0-2, rows 1-5
+            if (pch != null) {
+                return pch === '1' ? 'mark' : pch === 'H' ? 'void' : 'city';
+            }
+            const ach = at(aGlyph, c - 4, r); // A: cols 4-6, rows 0-3 (dimmer)
+            if (ach != null) {
+                return ach === '1' ? 'accentDim' : ach === 'H' ? 'void' : 'city';
+            }
+            const ich = at(iGlyph, c - 4, r - 4); // I: cols 4-6, rows 4-6 (brighter)
+            if (ich != null) {
+                return ich === '1' ? 'accent' : ich === 'H' ? 'void' : 'city';
+            }
+            return 'city';
+        };
+    }
+    else {
+        const bitmap = composeMark(MARK_LETTERS[mark]);
+        const bw = bitmap[0].length;
+        const bh = bitmap.length;
+        side = Math.max(bw, bh) + margin * 2;
+        // With a trail, shove the letter to the left so the trail has room
+        // on the right; otherwise center it in the square.
+        offX = trailEnabled ? margin : Math.floor((side - bw) / 2);
+        offY = Math.floor((side - bh) / 2);
+        kindAt = (c, r) => {
+            const bc = c - offX;
+            const br = r - offY;
+            if (br < 0 || br >= bh || bc < 0 || bc >= bw)
+                return 'city';
+            const v = bitmap[br][bc];
+            return v === 1 ? 'mark' : v === 2 ? 'void' : 'city';
+        };
+    }
+    const cols = side;
+    const rows = side;
+    // Trail to the right of the letter — starts in the top-right corner,
+    // crosses 2 cells diagonally to its first node, zigzags down, and ends
+    // in the bottom-right corner. The dots sit on city files, which are
+    // forced to render under them.
+    const trailGrid = trailEnabled
+        ? [
+            [cols - 1, 0], // start: top-right corner
+            [cols - 3, 2], // first segment crosses 2 diagonally
+            [cols - 2, 4],
+            [cols - 1, rows - 1], // end: bottom-right corner
+        ]
+        : [];
+    const trailKeys = new Set(trailGrid.map(([c, r]) => `${c}-${r}`));
+    const centerOf = (c, r) => ({
+        x: startX + c * cell + cell / 2,
+        y: startY + r * cell + cell / 2,
+    });
+    // True when an edge neighbor is a letter file (mark or accent) — those
+    // city cells must always render so no empty square shares a side with
+    // the letter (and breaks a stroke). Diagonal corners are allowed to go
+    // empty, so the margins around the letter still get some missing squares.
+    const isLetterKind = (k) => k === 'mark' || k === 'accent' || k === 'accentDim';
+    const touchesMark = (c, r) => isLetterKind(kindAt(c - 1, r)) ||
+        isLetterKind(kindAt(c + 1, r)) ||
+        isLetterKind(kindAt(c, r - 1)) ||
+        isLetterKind(kindAt(c, r + 1));
+    // Per-file shade for a letter cell. `scatter` keeps the random-shade
+    // texture; the directional modes interpolate the letter's base color
+    // dark→light across the grid.
+    const baseFor = (kind) => kind === 'accent'
+        ? accentColor
+        : kind === 'accentDim'
+            ? mix(accentColor, bgColor, 0.45)
+            : primaryColor;
+    const gradientShade = (base, c, r) => {
+        const fx = cols > 1 ? c / (cols - 1) : 0;
+        const fy = rows > 1 ? r / (rows - 1) : 0;
+        const t = gradient === 'vertical'
+            ? fy
+            : gradient === 'horizontal'
+                ? fx
+                : (fx + fy) / 2; // diagonal
+        const lo = mix(base, '#000000', 0.12);
+        const hi = mix(base, '#ffffff', 0.4);
+        return mix(lo, hi, t);
+    };
+    // Square files centered in the panel; letterboxed when the mark is
+    // wider than it is tall (AI / PAI).
+    const pad = 12;
+    const avail = VIEW - pad * 2;
+    const cell = Math.min(avail / cols, avail / rows);
+    const sq = cell * 0.74; // smaller than the cell → gaps between buildings
+    const inset = (cell - sq) / 2;
+    const startX = (VIEW - cell * cols) / 2;
+    const startY = (VIEW - cell * rows) / 2;
+    const rng = mulberry32(7);
+    const files = [];
+    // Track the previous cell to the left (per row) and above (per column)
+    // so we never leave two empty squares back to back in either
+    // direction — that's what produced the long blank runs.
+    const colEmpty = new Array(cols).fill(false);
+    for (let r = 0; r < rows; r++) {
+        let lastEmpty = false;
+        for (let c = 0; c < cols; c++) {
+            const kind = kindAt(c, r);
+            const skipRoll = rng();
+            const colorRoll = rng();
+            // Void cells are the letter's counter — leave them empty so the
+            // background shows through as a real hole. Mark files always
+            // render; city files skip occasionally so the primary letters read
+            // against a sparser, muted backdrop — but only when the square to
+            // the left and the square above are both filled, so gaps stay
+            // isolated.
+            if (kind === 'void') {
+                lastEmpty = true;
+                colEmpty[c] = true;
+                continue;
+            }
+            if (kind === 'city' && !lastEmpty && !colEmpty[c] && !touchesMark(c, r) && !trailKeys.has(`${c}-${r}`) && skipRoll < 0.2) {
+                lastEmpty = true;
+                colEmpty[c] = true;
+                continue;
+            }
+            lastEmpty = false;
+            colEmpty[c] = false;
+            const isLetter = isLetterKind(kind);
+            const letterPalette = kind === 'accent'
+                ? accentPalette
+                : kind === 'accentDim'
+                    ? accentDimPalette
+                    : markPalette;
+            const letterColor = kind === 'accent' || kind === 'accentDim' ? accentColor : primaryColor;
+            const letterFill = gradient === 'scatter'
+                ? letterPalette[Math.floor(colorRoll * letterPalette.length)]
+                : gradientShade(baseFor(kind), c, r);
+            const x = startX + c * cell + inset;
+            const y = startY + r * cell + inset;
+            files.push(React.createElement("rect", { key: `${c}-${r}`, x: x, y: y, width: sq, height: sq, rx: Math.max(1, sq * 0.12), fill: isLetter
+                    ? letterFill
+                    : palette[Math.floor(colorRoll * palette.length)], stroke: isLetter ? withAlpha(letterColor, 0.55) : withAlpha(baseColor, 0.08), strokeWidth: isLetter ? 0.6 : 0.4 }));
+        }
+    }
+    // Trail overlay — a dashed accent path to the right of the letter with
+    // a marker dot on each node.
+    if (trailEnabled && trailGrid.length > 1) {
+        const linePts = trailGrid.map(([c, r]) => centerOf(c, r));
+        const d = linePts.map((p, i) => `${i ? 'L' : 'M'} ${p.x} ${p.y}`).join(' ');
+        const dot = Math.max(1.5, sq * 0.3);
+        files.push(React.createElement("path", { key: "trail-path", d: d, fill: "none", stroke: accentColor, strokeWidth: Math.max(1, cell * 0.12), strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: `${cell * 0.18} ${cell * 0.18}`, opacity: 0.9 }));
+        trailGrid.forEach(([c, r], i) => {
+            const p = centerOf(c, r);
+            files.push(React.createElement("circle", { key: `trail-dot-${i}`, cx: p.x, cy: p.y, r: dot, fill: mix(accentColor, '#ffffff', 0.15), stroke: bgColor, strokeWidth: 0.5 }));
+        });
+    }
+    return (React.createElement("svg", { width: width, height: height, viewBox: `0 0 ${VIEW} ${VIEW}`, xmlns: "http://www.w3.org/2000/svg", style: { opacity, display: 'block', overflow: 'visible' }, role: "img", "aria-label": mark === 'none'
+            ? 'A top-down grid of file squares'
+            : `A top-down grid of file squares spelling ${mark}` },
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: `panel-${uid}` },
+                React.createElement("rect", { x: 0, y: 0, width: VIEW, height: VIEW, rx: rounded ? 14 : 0 }))),
+        React.createElement("g", { clipPath: `url(#panel-${uid})` },
+            React.createElement("rect", { x: 0, y: 0, width: VIEW, height: VIEW, fill: bgColor, rx: rounded ? 14 : 0 }),
+            files)));
+};