@leftium/logo 0.0.2 → 0.2.0

package/dist/app-logo/iconify.js

@@ -0,0 +1,223 @@
+import { detectIconSource, DEFAULT_EMOJI_STYLE } from './defaults.js';
+/** Cached Iconify SVG strings keyed by icon ID */
+const iconCache = new Map();
+/** Cached emoji slug resolution keyed by `${prefix}:${emoji}` */
+const emojiSlugCache = new Map();
+/**
+ * Fetch an Iconify icon SVG by its ID (e.g. "mdi:rocket-launch").
+ * Results are cached in memory for the session.
+ */
+async function fetchIconifySvg(iconId) {
+    const cached = iconCache.get(iconId);
+    if (cached)
+        return cached;
+    const [prefix, name] = iconId.split(':');
+    if (!prefix || !name) {
+        throw new Error(`Invalid Iconify icon ID: "${iconId}". Expected format: "prefix:name"`);
+    }
+    const url = `https://api.iconify.design/${prefix}/${name}.svg`;
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch icon "${iconId}": ${response.status} ${response.statusText}`);
+    }
+    const svg = await response.text();
+    iconCache.set(iconId, svg);
+    return svg;
+}
+/**
+ * Decode a data URL to an SVG string.
+ * Supports both base64 and plain-text encoded data URLs.
+ */
+function decodeDataUrl(dataUrl) {
+    // data:image/svg+xml;base64,PHN2Zy...
+    // data:image/svg+xml,%3Csvg...
+    // data:image/svg+xml;utf8,<svg...
+    const commaIndex = dataUrl.indexOf(',');
+    if (commaIndex === -1) {
+        throw new Error('Invalid data URL: no comma separator found');
+    }
+    const meta = dataUrl.substring(0, commaIndex);
+    const data = dataUrl.substring(commaIndex + 1);
+    if (meta.includes(';base64')) {
+        return atob(data);
+    }
+    // URL-encoded or UTF-8
+    return decodeURIComponent(data);
+}
+/**
+ * Parse viewBox from an SVG string. Falls back to "0 0 24 24" (Iconify default).
+ */
+function parseViewBox(svg) {
+    const match = svg.match(/viewBox=["']([^"']+)["']/);
+    return match?.[1] ?? '0 0 24 24';
+}
+/**
+ * Extract the inner content of an SVG element (everything between <svg> and </svg>).
+ */
+function extractSvgContent(svg) {
+    // Remove the outer <svg ...> and </svg> tags
+    const openTagEnd = svg.indexOf('>');
+    const closeTagStart = svg.lastIndexOf('</svg>');
+    if (openTagEnd === -1 || closeTagStart === -1) {
+        return svg; // Return as-is if we can't parse
+    }
+    return svg.substring(openTagEnd + 1, closeTagStart).trim();
+}
+/**
+ * Detect whether an SVG is monochrome (uses currentColor) or multicolor (hardcoded fills).
+ *
+ * Heuristic: if the SVG contains "currentColor" it's monochrome.
+ * If it contains hardcoded color values (hex, rgb, named colors) in fill/stroke attributes,
+ * it's multicolor.
+ */
+function detectMonochrome(svg) {
+    // If it explicitly uses currentColor, it's monochrome
+    if (svg.includes('currentColor'))
+        return true;
+    // Check for hardcoded fill/stroke colors (hex, rgb, named colors)
+    // If we find fill or stroke with a value that's not "none" or "currentColor", it's multicolor
+    const colorAttrPattern = /(?:fill|stroke)=["'](?!none|currentColor)([^"']+)["']/gi;
+    const hasHardcodedColors = colorAttrPattern.test(svg);
+    // Also check for fill/stroke in style attributes
+    const styleColorPattern = /(?:fill|stroke)\s*:\s*(?!none|currentColor)([^;"']+)/gi;
+    const hasStyleColors = styleColorPattern.test(svg);
+    if (hasHardcodedColors || hasStyleColors)
+        return false;
+    // No colors found at all -- treat as monochrome (will use currentColor behavior)
+    return true;
+}
+// ─── Emoji → Iconify slug resolution ────────────────────────────────────
+/**
+ * Convert an emoji string to its Unicode codepoint sequence (e.g. "🚀" → "1f680").
+ * Strips variation selectors (U+FE0E, U+FE0F).
+ */
+function emojiToCodepoints(emoji) {
+    const codepoints = [];
+    for (const codePoint of emoji) {
+        const cp = codePoint.codePointAt(0);
+        if (cp === undefined)
+            continue;
+        // Skip variation selectors
+        if (cp === 0xfe0e || cp === 0xfe0f)
+            continue;
+        codepoints.push(cp.toString(16));
+    }
+    return codepoints.join('-');
+}
+/**
+ * Resolve an emoji to its Iconify icon slug within a given set.
+ *
+ * Strategy A: Use the Iconify search API, which accepts emoji characters
+ * directly and returns matching icon names.
+ *
+ * Returns the icon name (slug) or null if not found.
+ * Results are cached by `${prefix}:${emoji}`.
+ */
+export async function resolveEmojiSlug(emoji, prefix) {
+    const cacheKey = `${prefix}:${emoji}`;
+    const cached = emojiSlugCache.get(cacheKey);
+    if (cached !== undefined)
+        return cached;
+    try {
+        // Strategy A: Iconify search API
+        const encoded = encodeURIComponent(emoji);
+        const url = `https://api.iconify.design/search?query=${encoded}&prefix=${prefix}&limit=1`;
+        const response = await fetch(url);
+        if (response.ok) {
+            const data = await response.json();
+            // Response format: { icons: ["prefix:name", ...] }
+            if (data.icons && data.icons.length > 0) {
+                const fullId = data.icons[0];
+                // Extract just the name part (after the prefix:)
+                const colonIndex = fullId.indexOf(':');
+                const slug = colonIndex >= 0 ? fullId.substring(colonIndex + 1) : fullId;
+                emojiSlugCache.set(cacheKey, slug);
+                return slug;
+            }
+        }
+        // Strategy B fallback: Try codepoint-based name (many sets use this)
+        const codepoints = emojiToCodepoints(emoji);
+        if (codepoints) {
+            // Try fetching directly — if it exists, the codepoint IS the name
+            const directUrl = `https://api.iconify.design/${prefix}/${codepoints}.svg`;
+            const directResponse = await fetch(directUrl, { method: 'HEAD' });
+            if (directResponse.ok) {
+                emojiSlugCache.set(cacheKey, codepoints);
+                return codepoints;
+            }
+        }
+        // Not found
+        emojiSlugCache.set(cacheKey, null);
+        return null;
+    }
+    catch {
+        // Network error — don't cache failures
+        return null;
+    }
+}
+// ─── Main resolution ────────────────────────────────────────────────────
+/**
+ * Resolve an icon prop value to SVG data ready for rendering.
+ *
+ * Handles all 4 source types: Iconify ID, emoji, inline SVG, data URL.
+ * For emoji, auto-maps to an Iconify emoji set unless emojiStyle is 'native'.
+ *
+ * @param icon - The icon prop value
+ * @param emojiStyle - Iconify emoji set prefix (default: DEFAULT_EMOJI_STYLE).
+ *                     Use 'native' to disable auto-mapping and render as <text>.
+ */
+export async function resolveIcon(icon, emojiStyle = DEFAULT_EMOJI_STYLE) {
+    const sourceType = detectIconSource(icon);
+    switch (sourceType) {
+        case 'iconify': {
+            const svg = await fetchIconifySvg(icon);
+            return {
+                svgContent: extractSvgContent(svg),
+                viewBox: parseViewBox(svg),
+                isMonochrome: detectMonochrome(svg),
+                sourceType
+            };
+        }
+        case 'data-url': {
+            const svg = decodeDataUrl(icon);
+            return {
+                svgContent: extractSvgContent(svg),
+                viewBox: parseViewBox(svg),
+                isMonochrome: detectMonochrome(svg),
+                sourceType
+            };
+        }
+        case 'svg': {
+            const svg = icon.trim();
+            return {
+                svgContent: extractSvgContent(svg),
+                viewBox: parseViewBox(svg),
+                isMonochrome: detectMonochrome(svg),
+                sourceType
+            };
+        }
+        case 'emoji': {
+            // Auto-map emoji to Iconify SVG icon
+            if (emojiStyle !== 'native') {
+                const slug = await resolveEmojiSlug(icon, emojiStyle);
+                if (slug) {
+                    const iconId = `${emojiStyle}:${slug}`;
+                    const svg = await fetchIconifySvg(iconId);
+                    return {
+                        svgContent: extractSvgContent(svg),
+                        viewBox: parseViewBox(svg),
+                        isMonochrome: detectMonochrome(svg),
+                        sourceType: 'iconify' // Resolved as Iconify, even though input was emoji
+                    };
+                }
+            }
+            // Fallback: platform-native <text> rendering
+            return {
+                svgContent: `<text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="80" font-family="'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif">${icon}</text>`,
+                viewBox: '0 0 100 100',
+                isMonochrome: false,
+                sourceType
+            };
+        }
+    }
+}

package/dist/app-logo/squircle.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Superellipse / corner-shape path generation.
+ *
+ * Follows the CSS Borders Level 4 specification for corner-shape rendering.
+ * Maps CornerShape keywords to superellipse parameters and generates SVG paths.
+ *
+ * The CSS spec defines the curve parametrically:
+ *   K = 2^abs(curvature)
+ *   For T in [0, 1]: point = mapPointToCorner(T^K, (1-T)^K)
+ *
+ * @see https://drafts.csswg.org/css-borders-4/#corner-shape-rendering
+ */
+import type { CornerShape } from './types.js';
+/**
+ * Map a CornerShape keyword or superellipse(n) to its numeric curvature parameter.
+ *
+ * CSS spec keyword -> superellipse parameter:
+ *   round       -> 1    (standard elliptical arc)
+ *   squircle    -> 2    (iOS-style continuous curvature)
+ *   square      -> Infinity  (sharp 90 deg corner)
+ *   bevel       -> 0    (straight diagonal cut)
+ *   scoop       -> -1   (inward concave curve)
+ *   notch       -> -Infinity (inward right-angle cut)
+ */
+export declare function cornerShapeToK(shape: CornerShape): number;
+/**
+ * Generate an SVG path `d` attribute for a rounded rectangle with a
+ * superellipse corner shape.
+ *
+ * The curve for each corner is sampled parametrically per the CSS Borders L4 spec:
+ *   K = 2^abs(curvature)
+ *   point(T) = mapPointToCorner(T^K, (1-T)^K) for T in [0, 1]
+ *
+ * For convex shapes (curvature > 0), the curve bulges outward.
+ * For concave shapes (curvature < 0), the center reference flips to the
+ * outer corner, creating inward "scoop" curves.
+ *
+ * @param size - Square side length in pixels
+ * @param cornerRadius - Corner radius as percentage (0-50)
+ * @param cornerShape - CornerShape keyword or superellipse(n)
+ * @returns SVG path `d` string
+ */
+export declare function generateCornerPath(size: number, cornerRadius: number, cornerShape: CornerShape): string;

package/dist/app-logo/squircle.js

@@ -0,0 +1,213 @@
+/**
+ * Superellipse / corner-shape path generation.
+ *
+ * Follows the CSS Borders Level 4 specification for corner-shape rendering.
+ * Maps CornerShape keywords to superellipse parameters and generates SVG paths.
+ *
+ * The CSS spec defines the curve parametrically:
+ *   K = 2^abs(curvature)
+ *   For T in [0, 1]: point = mapPointToCorner(T^K, (1-T)^K)
+ *
+ * @see https://drafts.csswg.org/css-borders-4/#corner-shape-rendering
+ */
+/** Number of line segments to sample per corner arc. */
+const SEGMENTS = 64;
+/**
+ * Map a CornerShape keyword or superellipse(n) to its numeric curvature parameter.
+ *
+ * CSS spec keyword -> superellipse parameter:
+ *   round       -> 1    (standard elliptical arc)
+ *   squircle    -> 2    (iOS-style continuous curvature)
+ *   square      -> Infinity  (sharp 90 deg corner)
+ *   bevel       -> 0    (straight diagonal cut)
+ *   scoop       -> -1   (inward concave curve)
+ *   notch       -> -Infinity (inward right-angle cut)
+ */
+export function cornerShapeToK(shape) {
+    switch (shape) {
+        case 'round':
+            return 1;
+        case 'squircle':
+            return 2;
+        case 'square':
+            return Infinity;
+        case 'bevel':
+            return 0;
+        case 'scoop':
+            return -1;
+        case 'notch':
+            return -Infinity;
+        default: {
+            // superellipse(n) -- parse the numeric value
+            const match = shape.match(/^superellipse\((.+)\)$/);
+            if (match) {
+                const val = match[1].trim();
+                if (val === 'infinity')
+                    return Infinity;
+                if (val === '-infinity')
+                    return -Infinity;
+                const n = Number(val);
+                if (!isNaN(n))
+                    return n;
+            }
+            return 1; // fallback to round
+        }
+    }
+}
+/**
+ * Generate an SVG path `d` attribute for a rounded rectangle with a
+ * superellipse corner shape.
+ *
+ * The curve for each corner is sampled parametrically per the CSS Borders L4 spec:
+ *   K = 2^abs(curvature)
+ *   point(T) = mapPointToCorner(T^K, (1-T)^K) for T in [0, 1]
+ *
+ * For convex shapes (curvature > 0), the curve bulges outward.
+ * For concave shapes (curvature < 0), the center reference flips to the
+ * outer corner, creating inward "scoop" curves.
+ *
+ * @param size - Square side length in pixels
+ * @param cornerRadius - Corner radius as percentage (0-50)
+ * @param cornerShape - CornerShape keyword or superellipse(n)
+ * @returns SVG path `d` string
+ */
+export function generateCornerPath(size, cornerRadius, cornerShape) {
+    // No rounding needed
+    if (cornerRadius <= 0) {
+        return `M0,0 H${size} V${size} H0 Z`;
+    }
+    const curvature = cornerShapeToK(cornerShape);
+    // square (Infinity): sharp corners, radius is ignored
+    if (curvature === Infinity) {
+        return `M0,0 H${size} V${size} H0 Z`;
+    }
+    // Convert percentage to pixels, clamped to half the side
+    const r = Math.min((cornerRadius / 100) * size, size / 2);
+    // notch (-Infinity): inward right-angle cut at each corner.
+    // Goes from tangent point on one edge INWARD to the corner-region center,
+    // then back out to the tangent point on the other edge (concave square corner).
+    if (curvature === -Infinity) {
+        return [
+            `M${rd(r)},0`,
+            `H${rd(size - r)}`,
+            // top-right: inward to center of corner region, then out
+            `L${rd(size - r)},${rd(r)}`,
+            `L${rd(size)},${rd(r)}`,
+            `V${rd(size - r)}`,
+            // bottom-right: inward to center, then out
+            `L${rd(size - r)},${rd(size - r)}`,
+            `L${rd(size - r)},${rd(size)}`,
+            `H${rd(r)}`,
+            // bottom-left: inward to center, then out
+            `L${rd(r)},${rd(size - r)}`,
+            `L0,${rd(size - r)}`,
+            `V${rd(r)}`,
+            // top-left: inward to center, then out
+            `L${rd(r)},${rd(r)}`,
+            `L${rd(r)},0`,
+            `Z`
+        ].join(' ');
+    }
+    // bevel (0): straight diagonal cut from tangent to tangent
+    if (curvature === 0) {
+        return [
+            `M${rd(r)},0`,
+            `H${rd(size - r)}`,
+            `L${rd(size)},${rd(r)}`,
+            `V${rd(size - r)}`,
+            `L${rd(size - r)},${rd(size)}`,
+            `H${rd(r)}`,
+            `L0,${rd(size - r)}`,
+            `V${rd(r)}`,
+            `Z`
+        ].join(' ');
+    }
+    // round (1): use SVG arc commands for a perfect quarter-ellipse.
+    // This matches what browsers render for border-radius and is exact,
+    // unlike the parametric approximation.
+    if (curvature === 1) {
+        return [
+            `M${rd(r)},0`,
+            `H${rd(size - r)}`,
+            `A${rd(r)},${rd(r)} 0 0 1 ${rd(size)},${rd(r)}`,
+            `V${rd(size - r)}`,
+            `A${rd(r)},${rd(r)} 0 0 1 ${rd(size - r)},${rd(size)}`,
+            `H${rd(r)}`,
+            `A${rd(r)},${rd(r)} 0 0 1 0,${rd(size - r)}`,
+            `V${rd(r)}`,
+            `A${rd(r)},${rd(r)} 0 0 1 ${rd(r)},0`,
+            `Z`
+        ].join(' ');
+    }
+    // Parametric superellipse curve.
+    // K = 2^abs(curvature) per the CSS spec: "Let K be 0.5^(-abs(curvature))"
+    const K = Math.pow(2, Math.abs(curvature));
+    // Invert: for the outline path (not clip-out), convex shapes use outer corner as ref
+    const useOuterAsRef = curvature > 0;
+    // Sample the corner arc and return SVG line-to commands.
+    //
+    // The CSS spec generates a "clip-out" path (what to REMOVE from the rect).
+    // Since we generate the OUTLINE path (what to KEEP), we invert the reference:
+    // - Convex (squircle, round): curveCenter = outerCorner (curve bows outward)
+    // - Concave (scoop): curveCenter = cornerCenter (curve bows inward)
+    //
+    // The parametric curve maps (T^K, (1-T)^K) through mapPointToCorner,
+    // which scales by vectors from curveCenter to the two tangent points.
+    const parts = [`M${rd(size - r)},0`];
+    // Top-right corner: start=(size-r, 0), end=(size, r), outer=(size, 0), center=(size-r, r)
+    parts.push(sampleCorner(size - r, 0, size, r, size, 0, size - r, r, K, useOuterAsRef));
+    // Right edge
+    parts.push(`L${rd(size)},${rd(size - r)}`);
+    // Bottom-right corner: start=(size, size-r), end=(size-r, size), outer=(size, size), center=(size-r, size-r)
+    parts.push(sampleCorner(size, size - r, size - r, size, size, size, size - r, size - r, K, useOuterAsRef));
+    // Bottom edge
+    parts.push(`L${rd(r)},${rd(size)}`);
+    // Bottom-left corner: start=(r, size), end=(0, size-r), outer=(0, size), center=(r, size-r)
+    parts.push(sampleCorner(r, size, 0, size - r, 0, size, r, size - r, K, useOuterAsRef));
+    // Left edge
+    parts.push(`L0,${rd(r)}`);
+    // Top-left corner: start=(0, r), end=(r, 0), outer=(0, 0), center=(r, r)
+    parts.push(sampleCorner(0, r, r, 0, 0, 0, r, r, K, useOuterAsRef));
+    parts.push('Z');
+    return parts.join(' ');
+}
+/**
+ * Sample a superellipse corner arc as SVG line-to commands.
+ *
+ * @param sx, sy - Start point (tangent point on the "start" edge)
+ * @param ex, ey - End point (tangent point on the "end" edge)
+ * @param ox, oy - Outer corner point (the actual rectangle corner)
+ * @param cx, cy - Center point (diagonally opposite the outer corner within the corner region)
+ * @param K - Exponent: 2^abs(curvature)
+ * @param useOuterAsRef - Whether to use outer corner as the curve reference point
+ */
+function sampleCorner(sx, sy, ex, ey, ox, oy, cx, cy, K, useOuterAsRef) {
+    // For convex shapes (outline path), use outer corner so curve bows outward.
+    // For concave shapes (outline path), use inner center so curve bows inward.
+    const refX = useOuterAsRef ? ox : cx;
+    const refY = useOuterAsRef ? oy : cy;
+    // Vectors from curveCenter to the tangent points
+    const toEndX = ex - refX;
+    const toEndY = ey - refY;
+    const toStartX = sx - refX;
+    const toStartY = sy - refY;
+    const cmds = [];
+    // Sample T from 0 to 1 (exclusive of 0 since we're already at start)
+    for (let i = 1; i <= SEGMENTS; i++) {
+        const t = i / SEGMENTS;
+        const xParam = Math.pow(t, K);
+        const yParam = Math.pow(1 - t, K);
+        // mapPointToCorner(xParam, yParam):
+        //   refPoint + toEnd * xParam + toStart * yParam
+        const px = refX + toEndX * xParam + toStartX * yParam;
+        const py = refY + toEndY * xParam + toStartY * yParam;
+        cmds.push(`L${rd(px)},${rd(py)}`);
+    }
+    return cmds.join(' ');
+}
+/**
+ * Round a number to 2 decimal places for clean SVG output.
+ */
+function rd(n) {
+    return Math.round(n * 100) / 100;
+}

package/dist/app-logo/types.d.ts

@@ -0,0 +1,39 @@
+export type IconColorMode = 'auto' | 'original' | 'monochrome' | 'grayscale' | 'grayscale-tint' | {
+    hue: number;
+    saturation?: number;
+};
+export type CornerShape = 'round' | 'squircle' | 'square' | 'bevel' | 'scoop' | 'notch' | `superellipse(${number})`;
+export interface GradientConfig {
+    colors: string[];
+    stops?: number[];
+    angle?: number;
+    position?: number;
+    scale?: number;
+}
+export interface AppLogoProps {
+    icon?: string;
+    iconColor?: string;
+    iconColorMode?: IconColorMode;
+    iconSize?: number;
+    iconOffsetX?: number;
+    iconOffsetY?: number;
+    iconRotation?: number;
+    grayscaleLightness?: number;
+    cornerRadius?: number;
+    cornerShape?: CornerShape;
+    background?: string | GradientConfig;
+    size?: number;
+}
+export interface AppLogoConfig {
+    icon: string;
+    iconColor?: string;
+    iconColorMode?: IconColorMode;
+    background?: AppLogoProps['background'];
+    cornerRadius?: number;
+    cornerShape?: CornerShape;
+    emojiStyle?: string;
+    logo?: Partial<AppLogoProps>;
+    favicon?: Partial<AppLogoProps>;
+}
+/** Detected source type of the icon prop value */
+export type IconSourceType = 'iconify' | 'emoji' | 'svg' | 'data-url';

package/dist/app-logo/types.js

@@ -0,0 +1 @@
+export {};

package/dist/assets/logo-parts/glow-squircle.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Squircle variant of glow (50% radius, K=2 superellipse) -->
+
+<svg
+   width="1375.7469"
+   height="1375.7469"
+   viewBox="0 0 1375.7469 1375.7469"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter3"
+       x="-0.10799999"
+       y="-0.108"
+       width="1.216"
+       height="1.216">
+      <feGaussianBlur
+         stdDeviation="50.911691"
+         id="feGaussianBlur3" />
+    </filter>
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-122.54569,-162.64743)">
+    <g
+       id="g1"
+       transform="translate(253.40376,284.58137)"
+       style="display:inline">
+      <g
+         id="g8"
+         style="display:inline">
+        <path
+           style="opacity:0.7;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter3)"
+           id="path2"
+           transform="translate(-8.6700182, 0.25409326)"
+           d="M565.69,0 L600.22,0 L633.15,0 L664.52,0 L694.39,0.01 L722.8,0.02 L749.81,0.04 L775.45,0.08 L799.78,0.14 L822.83,0.22 L844.67,0.34 L865.32,0.49 L884.84,0.7 L903.27,0.96 L920.64,1.3 L937,1.71 L952.38,2.21 L966.84,2.82 L980.4,3.54 L993.11,4.39 L1004.99,5.39 L1016.1,6.56 L1026.45,7.9 L1036.09,9.44 L1045.05,11.19 L1053.37,13.17 L1061.07,15.41 L1068.18,17.92 L1074.74,20.72 L1080.77,23.85 L1086.31,27.31 L1091.38,31.14 L1096.02,35.36 L1100.23,39.99 L1104.06,45.06 L1107.52,50.6 L1110.65,56.63 L1113.45,63.19 L1115.96,70.31 L1118.2,78 L1120.18,86.32 L1121.94,95.28 L1123.47,104.92 L1124.81,115.27 L1125.98,126.38 L1126.98,138.26 L1127.83,150.97 L1128.55,164.53 L1129.16,178.99 L1129.66,194.37 L1130.08,210.73 L1130.41,228.11 L1130.67,246.53 L1130.88,266.05 L1131.03,286.7 L1131.15,308.54 L1131.23,331.59 L1131.29,355.92 L1131.33,381.56 L1131.35,408.57 L1131.36,436.98 L1131.37,466.85 L1131.37,498.22 L1131.37,531.15 L1131.37,565.69 L1131.37,565.69 L1131.37,600.22 L1131.37,633.15 L1131.37,664.52 L1131.36,694.39 L1131.35,722.8 L1131.33,749.81 L1131.29,775.45 L1131.23,799.78 L1131.15,822.83 L1131.03,844.67 L1130.88,865.32 L1130.67,884.84 L1130.41,903.27 L1130.08,920.64 L1129.66,937 L1129.16,952.38 L1128.55,966.84 L1127.83,980.4 L1126.98,993.11 L1125.98,1004.99 L1124.81,1016.1 L1123.47,1026.45 L1121.94,1036.09 L1120.18,1045.05 L1118.2,1053.37 L1115.96,1061.07 L1113.45,1068.18 L1110.65,1074.74 L1107.52,1080.77 L1104.06,1086.31 L1100.23,1091.38 L1096.02,1096.02 L1091.38,1100.23 L1086.31,1104.06 L1080.77,1107.52 L1074.74,1110.65 L1068.18,1113.45 L1061.07,1115.96 L1053.37,1118.2 L1045.05,1120.18 L1036.09,1121.94 L1026.45,1123.47 L1016.1,1124.81 L1004.99,1125.98 L993.11,1126.98 L980.4,1127.83 L966.84,1128.55 L952.38,1129.16 L937,1129.66 L920.64,1130.08 L903.27,1130.41 L884.84,1130.67 L865.32,1130.88 L844.67,1131.03 L822.83,1131.15 L799.78,1131.23 L775.45,1131.29 L749.81,1131.33 L722.8,1131.35 L694.39,1131.36 L664.52,1131.37 L633.15,1131.37 L600.22,1131.37 L565.69,1131.37 L565.69,1131.37 L531.15,1131.37 L498.22,1131.37 L466.85,1131.37 L436.98,1131.36 L408.57,1131.35 L381.56,1131.33 L355.92,1131.29 L331.59,1131.23 L308.54,1131.15 L286.7,1131.03 L266.05,1130.88 L246.53,1130.67 L228.11,1130.41 L210.73,1130.08 L194.37,1129.66 L178.99,1129.16 L164.53,1128.55 L150.97,1127.83 L138.26,1126.98 L126.38,1125.98 L115.27,1124.81 L104.92,1123.47 L95.28,1121.94 L86.32,1120.18 L78,1118.2 L70.31,1115.96 L63.19,1113.45 L56.63,1110.65 L50.6,1107.52 L45.06,1104.06 L39.99,1100.23 L35.36,1096.02 L31.14,1091.38 L27.31,1086.31 L23.85,1080.77 L20.72,1074.74 L17.92,1068.18 L15.41,1061.07 L13.17,1053.37 L11.19,1045.05 L9.44,1036.09 L7.9,1026.45 L6.56,1016.1 L5.39,1004.99 L4.39,993.11 L3.54,980.4 L2.82,966.84 L2.21,952.38 L1.71,937 L1.3,920.64 L0.96,903.27 L0.7,884.84 L0.49,865.32 L0.34,844.67 L0.22,822.83 L0.14,799.78 L0.08,775.45 L0.04,749.81 L0.02,722.8 L0.01,694.39 L0,664.52 L0,633.15 L0,600.22 L0,565.69 L0,565.69 L0,531.15 L0,498.22 L0,466.85 L0.01,436.98 L0.02,408.57 L0.04,381.56 L0.08,355.92 L0.14,331.59 L0.22,308.54 L0.34,286.7 L0.49,266.05 L0.7,246.53 L0.96,228.11 L1.3,210.73 L1.71,194.37 L2.21,178.99 L2.82,164.53 L3.54,150.97 L4.39,138.26 L5.39,126.38 L6.56,115.27 L7.9,104.92 L9.44,95.28 L11.19,86.32 L13.17,78 L15.41,70.31 L17.92,63.19 L20.72,56.63 L23.85,50.6 L27.31,45.06 L31.14,39.99 L35.36,35.36 L39.99,31.14 L45.06,27.31 L50.6,23.85 L56.63,20.72 L63.19,17.92 L70.31,15.41 L78,13.17 L86.32,11.19 L95.28,9.44 L104.92,7.9 L115.27,6.56 L126.38,5.39 L138.26,4.39 L150.97,3.54 L164.53,2.82 L178.99,2.21 L194.37,1.71 L210.73,1.3 L228.11,0.96 L246.53,0.7 L266.05,0.49 L286.7,0.34 L308.54,0.22 L331.59,0.14 L355.92,0.08 L381.56,0.04 L408.57,0.02 L436.98,0.01 L466.85,0 L498.22,0 L531.15,0 L565.69,0 Z" />
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/index.d.ts

@@ -1,5 +1,10 @@
-import LeftiumLogo from './LeftiumLogo.svelte';
-import toggleAnimation from './LeftiumLogo.svelte';
-import setAnimated from './LeftiumLogo.svelte';
+import LeftiumLogo, { toggleAnimation, setAnimated } from './LeftiumLogo.svelte';
 import favicon from './assets/favicon.svg';
 export { LeftiumLogo, toggleAnimation, setAnimated, favicon };
+export { default as AppLogo } from './AppLogo.svelte';
+export type { AppLogoProps, AppLogoConfig, GradientConfig, IconColorMode, CornerShape } from './app-logo/types.js';
+export { generateAppLogoSvg } from './app-logo/generate-svg.js';
+export { generateAppLogoPng } from './app-logo/generate-png.js';
+export { LEFTIUM_GRADIENT } from './app-logo/defaults.js';
+export { generateCornerPath, cornerShapeToK } from './app-logo/squircle.js';
+export { applyColorMode } from './app-logo/color-transform.js';

package/dist/index.js

@@ -1,6 +1,12 @@
 // Reexport your entry components here
-import LeftiumLogo from './LeftiumLogo.svelte';
-import toggleAnimation from './LeftiumLogo.svelte';
-import setAnimated from './LeftiumLogo.svelte';
+import LeftiumLogo, { toggleAnimation, setAnimated } from './LeftiumLogo.svelte';
 import favicon from './assets/favicon.svg';
 export { LeftiumLogo, toggleAnimation, setAnimated, favicon };
+// Phase 1: AppLogo component and generation utilities
+export { default as AppLogo } from './AppLogo.svelte';
+export { generateAppLogoSvg } from './app-logo/generate-svg.js';
+export { generateAppLogoPng } from './app-logo/generate-png.js';
+export { LEFTIUM_GRADIENT } from './app-logo/defaults.js';
+// Phase 2: Advanced styling utilities
+export { generateCornerPath, cornerShapeToK } from './app-logo/squircle.js';
+export { applyColorMode } from './app-logo/color-transform.js';

package/dist/leftium-logo/generate-svg.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Generate a self-contained static SVG for the Leftium logo.
+ *
+ * Replicates the LeftiumLogo.svelte layout geometry as pure SVG,
+ * with all assets inlined as base64 data URIs.
+ */
+export type BoundingBox = 'square' | 'default' | 'encircled' | 'cropped';
+export interface LeftiumLogoConfig {
+    /** Output canvas width in pixels. For 'cropped' mode the height will differ. Default: 800 */
+    size?: number;
+    /** Corner shape of the blue square. Default: true (squircle) */
+    squircle?: boolean;
+    /** Bounding box mode. Default: 'default' */
+    boundingBox?: BoundingBox;
+    /** Background fill. 'transparent' or a CSS color string e.g. '#ffffff'. Default: 'transparent' */
+    background?: string;
+}
+/**
+ * Generate a complete, self-contained SVG string for the static Leftium logo.
+ *
+ * All asset SVGs are inlined as base64 data URIs so the output is a single
+ * portable file with no external dependencies.
+ */
+export declare function generateLeftiumLogoSvg(config?: LeftiumLogoConfig): string;
+/**
+ * Rasterise the Leftium logo to a PNG or WebP Blob.
+ * Browser-only (requires canvas + Image).
+ */
+export declare function generateLeftiumLogoPng(config: LeftiumLogoConfig, format?: 'png' | 'webp'): Promise<Blob>;