@principal-ai/logo-component 0.1.15 → 0.1.17

package/dist/esm/TrailCityDiagram.js

@@ -0,0 +1,241 @@
+'use client';
+import React, { useId, useMemo } from '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.
+ */
+export 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 = 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 = 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 = 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 = useMemo(() => new Set(markerCells.map(m => `${m.col},${m.row}`)), [markerCells]);
+    const buildings = useMemo(() => buildCity(palette, pinnedCells), [palette, pinnedCells]);
+    const markers = useMemo(() => markerCells.map(m => {
+        const c = cellCenter(m.col, m.row);
+        return { x: c.x, y: c.y, label: m.label };
+    }), [markerCells]);
+    const trailPath = 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 = useMemo(() => activeMarker
+        ? lRoutePath({ x: activeMarker.x, y: activeMarker.y }, snippetAnchor)
+        : '', [activeMarker, snippetAnchor.x, snippetAnchor.y]);
+    return (React.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.createElement("defs", null,
+            React.createElement("linearGradient", { id: `fade-${uid}`, x1: "0", x2: "0", y1: "0", y2: "1" },
+                React.createElement("stop", { offset: "0%", stopColor: bg, stopOpacity: 0 }),
+                React.createElement("stop", { offset: "100%", stopColor: bg, stopOpacity: 0.7 }))),
+        React.createElement("rect", { x: 0, y: 0, width: VIEW_W, height: VIEW_H, fill: bg, rx: 12 }),
+        React.createElement("g", { style: {
+                opacity: highlightTrail ? 0.2 : 1,
+                transition: 'opacity 300ms ease',
+            } }, buildings.map((b, i) => (React.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.createElement("g", { style: snippetGateStyle },
+                React.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.createElement("rect", { x: 0, y: VIEW_H - 80, width: VIEW_W, height: 80, fill: `url(#fade-${uid})`, pointerEvents: "none" }),
+        !hideTrail && (React.createElement("g", { style: trailGateStyle },
+            React.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.createElement("animate", { attributeName: "stroke-dashoffset", from: 0, to: -44, dur: "1.4s", repeatCount: "indefinite" }))))),
+        !hideSnippet && (React.createElement("g", { style: snippetGateStyle },
+            React.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.createElement("circle", { cx: activeMarker.x, cy: activeMarker.y, r: 3.5, fill: accent, opacity: highlightTrail ? 0 : 1, style: { transition: 'opacity 300ms ease' } })))),
+        !hideTrail && (React.createElement("g", { style: trailGateStyle }, markers.map((m, i) => {
+            const isActive = i === markers.length - 1;
+            const size = 22;
+            const half = size / 2;
+            return (React.createElement("g", { key: m.label },
+                isActive && (React.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.createElement("animate", { attributeName: "opacity", values: "0.28;0;0.28", dur: "2.4s", repeatCount: "indefinite" }))),
+                React.createElement("rect", { x: m.x - half, y: m.y - half, width: size, height: size, rx: 4, fill: surface, stroke: accent, strokeWidth: 1.75 }),
+                React.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.createElement("g", { style: snippetGateStyle },
+            React.createElement("g", { style: {
+                    opacity: highlightTrail ? 0.15 : 1,
+                    transition: 'opacity 300ms ease',
+                } },
+                React.createElement("circle", { cx: snippetAnchor.x, cy: snippetAnchor.y, r: 3.5, fill: accent }),
+                React.createElement(SnippetCard, { x: snippetAnchor.x, y: snippetAnchor.y - 22, surface: surface, text: text, muted: muted, accent: accent })))),
+        React.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.createElement("g", { key: i, transform: `translate(${cx}, ${cy}) rotate(${s.rotation})`, opacity: isEmpty ? 0.55 : 0.85 },
+                React.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.createElement(React.Fragment, null,
+                    React.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.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.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.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.createElement("g", { transform: `translate(${x}, ${y})` },
+        React.createElement("rect", { width: W, height: H, rx: 10, fill: surface, stroke: withAlpha(accent, 0.55), strokeWidth: 1.5 }),
+        React.createElement("rect", { width: W, height: HEADER, rx: 10, fill: withAlpha(accent, 0.08) }),
+        React.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.createElement("g", { transform: `translate(16, ${HEADER + 18})` }, lines.map((l, i) => (React.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/index.js

@@ -6,5 +6,7 @@ export { WreathLogo } from './WreathLogo';
 export { TelemetryReveal } from './TelemetryReveal';
 export { TextReveal } from './TextReveal';
 export { OpenTypeTextReveal } from './OpenTypeTextReveal';
+export { TrailCityDiagram } from './TrailCityDiagram';
+export { FileCityLogo } from './FileCityLogo';
 export { TELEMETRY_PRESETS } from './presets';
 export { STROKE_CHARACTERS, layoutText } from './strokeCharacters';

package/dist/index.d.ts

@@ -6,6 +6,10 @@ export { WreathLogo } from './WreathLogo';
 export { TelemetryReveal } from './TelemetryReveal';
 export { TextReveal } from './TextReveal';
 export { OpenTypeTextReveal } from './OpenTypeTextReveal';
+export { TrailCityDiagram } from './TrailCityDiagram';
+export type { TrailCityDiagramProps } from './TrailCityDiagram';
+export { FileCityLogo } from './FileCityLogo';
+export type { FileCityLogoProps, FileCityMark, FileCityGradient } from './FileCityLogo';
 export { TELEMETRY_PRESETS } from './presets';
 export { STROKE_CHARACTERS, layoutText } from './strokeCharacters';
 export type { PathDefinition, ShapePreset } from './presets';

package/dist/index.esm.js

@@ -6,5 +6,7 @@ export { WreathLogo } from './WreathLogo';
 export { TelemetryReveal } from './TelemetryReveal';
 export { TextReveal } from './TextReveal';
 export { OpenTypeTextReveal } from './OpenTypeTextReveal';
+export { TrailCityDiagram } from './TrailCityDiagram';
+export { FileCityLogo } from './FileCityLogo';
 export { TELEMETRY_PRESETS } from './presets';
 export { STROKE_CHARACTERS, layoutText } from './strokeCharacters';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.layoutText = exports.STROKE_CHARACTERS = exports.TELEMETRY_PRESETS = exports.OpenTypeTextReveal = exports.TextReveal = exports.TelemetryReveal = exports.WreathLogo = exports.SquareLogo = exports.ForksLogo = exports.LogoSmall = exports.Logo = void 0;
+exports.layoutText = exports.STROKE_CHARACTERS = exports.TELEMETRY_PRESETS = exports.FileCityLogo = exports.TrailCityDiagram = exports.OpenTypeTextReveal = exports.TextReveal = exports.TelemetryReveal = exports.WreathLogo = exports.SquareLogo = exports.ForksLogo = exports.LogoSmall = exports.Logo = void 0;
 var Logo_1 = require("./Logo");
 Object.defineProperty(exports, "Logo", { enumerable: true, get: function () { return Logo_1.Logo; } });
 var LogoSmall_1 = require("./LogoSmall");
@@ -17,6 +17,10 @@ var TextReveal_1 = require("./TextReveal");
 Object.defineProperty(exports, "TextReveal", { enumerable: true, get: function () { return TextReveal_1.TextReveal; } });
 var OpenTypeTextReveal_1 = require("./OpenTypeTextReveal");
 Object.defineProperty(exports, "OpenTypeTextReveal", { enumerable: true, get: function () { return OpenTypeTextReveal_1.OpenTypeTextReveal; } });
+var TrailCityDiagram_1 = require("./TrailCityDiagram");
+Object.defineProperty(exports, "TrailCityDiagram", { enumerable: true, get: function () { return TrailCityDiagram_1.TrailCityDiagram; } });
+var FileCityLogo_1 = require("./FileCityLogo");
+Object.defineProperty(exports, "FileCityLogo", { enumerable: true, get: function () { return FileCityLogo_1.FileCityLogo; } });
 var presets_1 = require("./presets");
 Object.defineProperty(exports, "TELEMETRY_PRESETS", { enumerable: true, get: function () { return presets_1.TELEMETRY_PRESETS; } });
 var strokeCharacters_1 = require("./strokeCharacters");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/logo-component",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Animated wireframe sphere logo component",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -26,7 +26,7 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@principal-ade/industry-theme": "^0.1.19",
+    "@principal-ade/industry-theme": "^0.1.20",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/blocks": "^8.6.14",
     "@storybook/react": "^8.6.14",