@principal-ai/logo-component 0.1.4 → 0.1.6

package/dist/esm/TextReveal.js

@@ -0,0 +1,159 @@
+import React, { useMemo, useRef, useState, useEffect } from "react";
+import { layoutText } from "./strokeCharacters";
+let globalIdCounter = 0;
+/**
+ * Estimates path length from SVG path data.
+ */
+function estimatePathLength(d) {
+    const coords = d.match(/-?\d+\.?\d*/g);
+    if (!coords || coords.length < 4)
+        return 100;
+    let totalLength = 0;
+    for (let i = 2; i < coords.length; i += 2) {
+        const x1 = parseFloat(coords[i - 2]);
+        const y1 = parseFloat(coords[i - 1]);
+        const x2 = parseFloat(coords[i]);
+        const y2 = parseFloat(coords[i + 1]);
+        totalLength += Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+    }
+    return totalLength || 100;
+}
+/**
+ * Parse start and end points from path data
+ */
+function getPathEndpoints(d) {
+    const coords = d.match(/-?\d+\.?\d*/g);
+    if (!coords || coords.length < 4) {
+        return { start: { x: 0, y: 0 }, end: { x: 0, y: 0 } };
+    }
+    return {
+        start: { x: parseFloat(coords[0]), y: parseFloat(coords[1]) },
+        end: { x: parseFloat(coords[coords.length - 2]), y: parseFloat(coords[coords.length - 1]) },
+    };
+}
+/**
+ * Seeded random for consistent chaos patterns
+ */
+function seededRandom(seed) {
+    return () => {
+        seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+        return seed / 0x7fffffff;
+    };
+}
+export const TextReveal = ({ text, width = 400, height = 100, scale = 1, letterSpacing = 4, centerText = true, chaosMode = "none", chaosDuration = 2, dotsDuration = 1.5, flowDuration = 2, flowDelay = 0.3, particlesPerPath = 1, particleRadius = 2.5, color = "currentColor", particleColor, strokeWidth = 2, opacity = 0.9, showGlow = true, fadeAfterAssembly = true, fadeOpacity = 0.5, loop = true, loopDelay = 1, }) => {
+    const idRef = useRef(null);
+    if (idRef.current === null) {
+        idRef.current = `txr${globalIdCounter++}`;
+    }
+    const uniqueId = idRef.current;
+    const finalParticleColor = particleColor || color;
+    const isFragmented = chaosMode === "fragmented";
+    // Loop via remount
+    const [cycle, setCycle] = useState(0);
+    // Layout the text into paths
+    const { paths: layoutPaths, width: textWidth, height: textHeight } = useMemo(() => {
+        return layoutText(text, { letterSpacing, scale });
+    }, [text, letterSpacing, scale]);
+    // Calculate centering offset
+    const offsetX = centerText ? (width - textWidth) / 2 : 0;
+    const offsetY = centerText ? (height - textHeight) / 2 : 0;
+    // Apply offset to paths
+    const resolvedPaths = useMemo(() => {
+        return layoutPaths.map((path) => (Object.assign(Object.assign({}, path), { d: offsetPath(path.d, offsetX, offsetY) })));
+    }, [layoutPaths, offsetX, offsetY]);
+    // Calculate path data
+    const pathData = useMemo(() => {
+        return resolvedPaths.map((p) => ({
+            length: estimatePathLength(p.d),
+            endpoints: getPathEndpoints(p.d),
+        }));
+    }, [resolvedPaths]);
+    // Generate offsets for fragmented mode
+    const fragmentOffsets = useMemo(() => {
+        const random = seededRandom(42);
+        return resolvedPaths.map(() => ({
+            x: (random() - 0.5) * 120,
+            y: (random() - 0.5) * 80,
+        }));
+    }, [resolvedPaths]);
+    // Timing calculations
+    const numPaths = resolvedPaths.length || 1;
+    const perItemDotsDuration = (dotsDuration * 0.5) / numPaths;
+    const perItemLinesDuration = (dotsDuration * 0.5) / numPaths;
+    const perItemAssemblyDuration = chaosDuration / numPaths;
+    const dotsPhaseEnd = dotsDuration * 0.5;
+    const linesPhaseEnd = dotsDuration;
+    const assemblyEndTime = isFragmented ? dotsDuration + chaosDuration : 0;
+    const flowBeginTime = assemblyEndTime + flowDelay;
+    // Total animation duration
+    const totalDuration = flowBeginTime + flowDuration;
+    // Remount-based loop
+    useEffect(() => {
+        if (!loop)
+            return;
+        const timeout = setTimeout(() => {
+            setCycle((c) => c + 1);
+        }, (totalDuration + loopDelay) * 1000);
+        return () => clearTimeout(timeout);
+    }, [loop, totalDuration, loopDelay, cycle]);
+    // Calculate viewBox to fit content
+    const viewBox = `0 0 ${width} ${height}`;
+    return (React.createElement("svg", { key: cycle, width: width, height: height, viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
+        React.createElement("defs", null,
+            showGlow && (React.createElement("filter", { id: `glow-${uniqueId}`, x: "-50%", y: "-50%", width: "200%", height: "200%" },
+                React.createElement("feGaussianBlur", { stdDeviation: "2", result: "blur" }),
+                React.createElement("feMerge", null,
+                    React.createElement("feMergeNode", { in: "blur" }),
+                    React.createElement("feMergeNode", { in: "SourceGraphic" })))),
+            React.createElement("radialGradient", { id: `particleGradient-${uniqueId}`, cx: "50%", cy: "50%", r: "50%" },
+                React.createElement("stop", { offset: "0%", style: { stopColor: finalParticleColor, stopOpacity: 1 } }),
+                React.createElement("stop", { offset: "100%", style: { stopColor: finalParticleColor, stopOpacity: 0.3 } }))),
+        React.createElement("g", { className: "text-paths" }, resolvedPaths.map((path, index) => {
+            const offset = fragmentOffsets[index];
+            const { length: pathLength, endpoints } = pathData[index] || {
+                length: 100,
+                endpoints: { start: { x: 0, y: 0 }, end: { x: 0, y: 0 } },
+            };
+            const dotRadius = strokeWidth / 2;
+            return (React.createElement("g", { key: path.id, transform: isFragmented ? `translate(${offset.x}, ${offset.y})` : undefined },
+                isFragmented && (React.createElement(React.Fragment, null,
+                    React.createElement("circle", { cx: endpoints.start.x, cy: endpoints.start.y, r: dotRadius, fill: color, opacity: "0" },
+                        React.createElement("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.15s", begin: `${index * perItemDotsDuration}s`, fill: "freeze" }),
+                        React.createElement("animate", { attributeName: "opacity", from: "1", to: "0", dur: "0.2s", begin: `${dotsPhaseEnd + (index + 1) * perItemLinesDuration}s`, fill: "freeze" })),
+                    React.createElement("circle", { cx: endpoints.end.x, cy: endpoints.end.y, r: dotRadius, fill: color, opacity: "0" },
+                        React.createElement("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.15s", begin: `${index * perItemDotsDuration}s`, fill: "freeze" }),
+                        React.createElement("animate", { attributeName: "opacity", from: "1", to: "0", dur: "0.2s", begin: `${dotsPhaseEnd + (index + 1) * perItemLinesDuration}s`, fill: "freeze" })))),
+                React.createElement("path", { d: path.d, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", opacity: isFragmented ? 0 : 1, strokeDasharray: isFragmented ? pathLength : undefined, strokeDashoffset: isFragmented ? pathLength : undefined },
+                    isFragmented && (React.createElement(React.Fragment, null,
+                        React.createElement("animate", { attributeName: "opacity", values: `0;1;1;${fadeAfterAssembly ? fadeOpacity : 1}`, keyTimes: "0;0.1;0.9;1", dur: `${perItemLinesDuration + chaosDuration}s`, begin: `${dotsPhaseEnd + index * perItemLinesDuration}s`, fill: "freeze" }),
+                        React.createElement("animate", { attributeName: "stroke-dashoffset", from: pathLength, to: "0", dur: `${perItemLinesDuration}s`, begin: `${dotsPhaseEnd + index * perItemLinesDuration}s`, fill: "freeze", calcMode: "spline", keySplines: "0.4 0 0.2 1", keyTimes: "0;1" }))),
+                    !isFragmented && fadeAfterAssembly && (React.createElement("animate", { attributeName: "opacity", from: "1", to: fadeOpacity, dur: "0.5s", begin: `${flowBeginTime}s`, fill: "freeze" }))),
+                isFragmented && (React.createElement("animateTransform", { attributeName: "transform", type: "translate", from: `${offset.x} ${offset.y}`, to: "0 0", dur: `${perItemAssemblyDuration}s`, begin: `${linesPhaseEnd + index * perItemAssemblyDuration}s`, fill: "freeze", calcMode: "spline", keySplines: "0.33 0 0.2 1", keyTimes: "0;1" }))));
+        })),
+        React.createElement("g", { className: "text-particles", filter: showGlow ? `url(#glow-${uniqueId})` : undefined }, resolvedPaths.flatMap((path, pathIndex) => {
+            return Array.from({ length: particlesPerPath }).map((_, particleIndex) => {
+                const particleDelay = (particleIndex / particlesPerPath) * flowDuration;
+                const beginTime = flowBeginTime + particleDelay;
+                return (React.createElement("circle", { key: `particle-${pathIndex}-${particleIndex}`, r: particleRadius, fill: `url(#particleGradient-${uniqueId})`, opacity: "0" },
+                    React.createElement("animateMotion", { dur: `${flowDuration}s`, begin: `${beginTime}s`, fill: "freeze", path: path.d }),
+                    React.createElement("animate", { attributeName: "opacity", values: "0;1;1;0", keyTimes: "0;0.1;0.9;1", dur: `${flowDuration}s`, begin: `${beginTime}s`, fill: "freeze" })));
+            });
+        }))));
+};
+/**
+ * Offset all coordinates in a path by the given amounts
+ */
+function offsetPath(d, offsetX, offsetY) {
+    let coordIndex = 0;
+    return d.replace(/-?\d+\.?\d*/g, (match) => {
+        const num = parseFloat(match);
+        const isY = coordIndex % 2 === 1;
+        coordIndex++;
+        if (isY) {
+            return String(num + offsetY);
+        }
+        else {
+            return String(num + offsetX);
+        }
+    });
+}

package/dist/esm/WreathLogo.js

@@ -0,0 +1,85 @@
+import React from 'react';
+export const WreathLogo = ({ width = 150, height = 150, pColor = '#2C3E50', wreathColor = '#27AE60', leafAccentColor = '#52BE80', opacity = 0.9, animationSpeed = 3, }) => {
+    const wreathRadius = 58;
+    return (React.createElement("svg", { width: width, height: height, viewBox: "0 0 200 200", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
+        React.createElement("defs", null,
+            React.createElement("radialGradient", { id: "wreathGlow", cx: "50%", cy: "50%", r: "50%" },
+                React.createElement("stop", { offset: "0%", style: { stopColor: wreathColor, stopOpacity: 0.3 } }),
+                React.createElement("stop", { offset: "100%", style: { stopColor: wreathColor, stopOpacity: 0 } })),
+            React.createElement("filter", { id: "softGlow" },
+                React.createElement("feGaussianBlur", { stdDeviation: "2", result: "coloredBlur" }),
+                React.createElement("feMerge", null,
+                    React.createElement("feMergeNode", { in: "coloredBlur" }),
+                    React.createElement("feMergeNode", { in: "SourceGraphic" })))),
+        React.createElement("circle", { cx: "100", cy: "100", r: "70", fill: "url(#wreathGlow)", opacity: "0.3" }),
+        React.createElement("path", { d: (() => {
+                const numPoints = 24;
+                const waveAmplitude = 2;
+                let pathD = '';
+                const points = [];
+                // Generate all points first
+                for (let i = 0; i <= numPoints; i++) {
+                    const angle = (360 / numPoints) * i;
+                    const radians = (angle * Math.PI) / 180;
+                    // Use sine wave for smooth variation
+                    const radiusVariation = Math.sin((angle * Math.PI) / 180 * 6) * waveAmplitude;
+                    const currentRadius = wreathRadius + radiusVariation;
+                    const x = 100 + currentRadius * Math.cos(radians);
+                    const y = 100 + currentRadius * Math.sin(radians);
+                    points.push({ x, y, angle, radians });
+                }
+                // Create smooth cubic bezier path with better control points
+                pathD = `M ${points[0].x},${points[0].y}`;
+                for (let i = 0; i < points.length - 1; i++) {
+                    const current = points[i];
+                    const next = points[i + 1];
+                    // Calculate tangent for smooth curves
+                    const tangentLength = 0.4;
+                    const cp1x = current.x - Math.sin(current.radians) * tangentLength * 15;
+                    const cp1y = current.y + Math.cos(current.radians) * tangentLength * 15;
+                    const cp2x = next.x + Math.sin(next.radians) * tangentLength * 15;
+                    const cp2y = next.y - Math.cos(next.radians) * tangentLength * 15;
+                    pathD += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y}`;
+                }
+                return pathD + ' Z';
+            })(), fill: "none", stroke: wreathColor, strokeWidth: "7", strokeLinecap: "round", strokeLinejoin: "round", opacity: "0.75", filter: "url(#softGlow)" },
+            React.createElement("animate", { attributeName: "stroke-opacity", values: "0.65;0.85;0.65", dur: `${animationSpeed}s`, repeatCount: "indefinite" })),
+        React.createElement("path", { d: (() => {
+                const numPoints = 24;
+                const waveAmplitude = 1.5;
+                const innerRadius = wreathRadius - 9;
+                let pathD = '';
+                const points = [];
+                for (let i = 0; i <= numPoints; i++) {
+                    const angle = (360 / numPoints) * i + 15; // Offset from main wreath
+                    const radians = (angle * Math.PI) / 180;
+                    // Use sine wave offset for smooth variation
+                    const radiusVariation = Math.sin(((angle + 30) * Math.PI) / 180 * 6) * waveAmplitude;
+                    const currentRadius = innerRadius + radiusVariation;
+                    const x = 100 + currentRadius * Math.cos(radians);
+                    const y = 100 + currentRadius * Math.sin(radians);
+                    points.push({ x, y, radians });
+                }
+                pathD = `M ${points[0].x},${points[0].y}`;
+                for (let i = 0; i < points.length - 1; i++) {
+                    const current = points[i];
+                    const next = points[i + 1];
+                    const tangentLength = 0.4;
+                    const cp1x = current.x - Math.sin(current.radians) * tangentLength * 15;
+                    const cp1y = current.y + Math.cos(current.radians) * tangentLength * 15;
+                    const cp2x = next.x + Math.sin(next.radians) * tangentLength * 15;
+                    const cp2y = next.y - Math.cos(next.radians) * tangentLength * 15;
+                    pathD += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y}`;
+                }
+                return pathD + ' Z';
+            })(), fill: "none", stroke: leafAccentColor, strokeWidth: "5", strokeLinecap: "round", strokeLinejoin: "round", opacity: "0.6", filter: "url(#softGlow)" },
+            React.createElement("animate", { attributeName: "stroke-opacity", values: "0.5;0.7;0.5", dur: `${animationSpeed}s`, repeatCount: "indefinite", begin: "0.5s" })),
+        React.createElement("g", { filter: "url(#softGlow)" },
+            React.createElement("defs", null,
+                React.createElement("linearGradient", { id: "pGradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%" },
+                    React.createElement("stop", { offset: "0%", style: { stopColor: pColor, stopOpacity: 1 } }),
+                    React.createElement("stop", { offset: "100%", style: { stopColor: pColor, stopOpacity: 0.85 } }))),
+            React.createElement("path", { d: "M 82,70\n             L 82,130\n             L 90,130\n             L 90,102\n             L 104,102\n             C 114,102 122,94 122,84\n             C 122,74 114,70 104,70\n             Z\n             M 90,78\n             L 104,78\n             C 109,78 114,80 114,84\n             C 114,88 109,94 104,94\n             L 90,94\n             Z", fill: "url(#pGradient)" },
+                React.createElement("animate", { attributeName: "opacity", values: "0.95;1;0.95", dur: `${animationSpeed}s`, repeatCount: "indefinite" })),
+            React.createElement("path", { d: "M 83,72 L 83,128 L 84,128 L 84,72 Z", fill: "white", opacity: "0.15" }))));
+};

package/dist/esm/index.js

@@ -1,3 +1,10 @@
 export { Logo } from './Logo';
 export { LogoSmall } from './LogoSmall';
 export { ForksLogo } from './ForksLogo';
+export { SquareLogo } from './SquareLogo';
+export { WreathLogo } from './WreathLogo';
+export { TelemetryReveal } from './TelemetryReveal';
+export { TextReveal } from './TextReveal';
+export { OpenTypeTextReveal } from './OpenTypeTextReveal';
+export { TELEMETRY_PRESETS } from './presets';
+export { STROKE_CHARACTERS, layoutText } from './strokeCharacters';

package/dist/esm/presets.js

@@ -0,0 +1,88 @@
+export const TELEMETRY_PRESETS = {
+    network: {
+        name: "network",
+        viewBox: "0 0 200 200",
+        paths: [
+            // Cardinal directions
+            { d: "M 100,100 L 100,30", id: "n-top" },
+            { d: "M 100,100 L 170,100", id: "n-right" },
+            { d: "M 100,100 L 100,170", id: "n-bottom" },
+            { d: "M 100,100 L 30,100", id: "n-left" },
+            // Diagonals
+            { d: "M 100,100 L 150,50", id: "n-tr" },
+            { d: "M 100,100 L 150,150", id: "n-br" },
+            { d: "M 100,100 L 50,150", id: "n-bl" },
+            { d: "M 100,100 L 50,50", id: "n-tl" },
+        ],
+    },
+    tree: {
+        name: "tree",
+        viewBox: "0 0 200 200",
+        paths: [
+            // Root to trunk
+            { d: "M 100,180 L 100,100", id: "trunk" },
+            // Main branches
+            { d: "M 100,100 L 55,55", id: "branch-l1" },
+            { d: "M 100,100 L 145,55", id: "branch-r1" },
+            // Sub-branches left
+            { d: "M 55,55 L 30,25", id: "branch-l2" },
+            { d: "M 55,55 L 70,25", id: "branch-l3" },
+            // Sub-branches right
+            { d: "M 145,55 L 130,25", id: "branch-r2" },
+            { d: "M 145,55 L 170,25", id: "branch-r3" },
+        ],
+    },
+    circuit: {
+        name: "circuit",
+        viewBox: "0 0 200 200",
+        paths: [
+            // Horizontal bus lines
+            { d: "M 25,50 L 175,50", id: "h1" },
+            { d: "M 25,100 L 175,100", id: "h2" },
+            { d: "M 25,150 L 175,150", id: "h3" },
+            // Vertical connectors
+            { d: "M 60,50 L 60,100", id: "v1" },
+            { d: "M 100,50 L 100,150", id: "v2" },
+            { d: "M 140,100 L 140,150", id: "v3" },
+        ],
+    },
+    hexagon: {
+        name: "hexagon",
+        viewBox: "0 0 200 200",
+        paths: [
+            // Hexagon edges (clockwise from top)
+            { d: "M 100,25 L 160,55", id: "hex1" },
+            { d: "M 160,55 L 160,125", id: "hex2" },
+            { d: "M 160,125 L 100,155", id: "hex3" },
+            { d: "M 100,155 L 40,125", id: "hex4" },
+            { d: "M 40,125 L 40,55", id: "hex5" },
+            { d: "M 40,55 L 100,25", id: "hex6" },
+            // Spokes to center
+            { d: "M 100,90 L 100,25", id: "spoke1" },
+            { d: "M 100,90 L 160,55", id: "spoke2" },
+            { d: "M 100,90 L 160,125", id: "spoke3" },
+        ],
+    },
+    codebase: {
+        name: "codebase",
+        viewBox: "0 0 200 200",
+        paths: [
+            // Root vertical line
+            { d: "M 35,35 L 35,165", id: "root" },
+            // First level directories
+            { d: "M 35,55 L 75,55", id: "dir1" },
+            { d: "M 35,90 L 75,90", id: "dir2" },
+            { d: "M 35,125 L 75,125", id: "dir3" },
+            // Nested structure from dir1
+            { d: "M 75,55 L 75,80", id: "sub1" },
+            { d: "M 75,65 L 115,65", id: "file1" },
+            // Nested structure from dir2
+            { d: "M 75,90 L 75,115", id: "sub2" },
+            { d: "M 75,100 L 135,100", id: "file2" },
+            { d: "M 75,110 L 105,110", id: "file3" },
+            // Cross-references (dependencies)
+            { d: "M 115,65 L 155,45", id: "link1" },
+            { d: "M 135,100 L 165,80", id: "link2" },
+        ],
+    },
+};