@leftium/logo 0.0.1 → 0.1.0

package/dist/app-logo/color-transform.js

@@ -0,0 +1,136 @@
+/**
+ * OKLCH-based color transforms for icon color modes.
+ *
+ * Uses culori for perceptually uniform color manipulation.
+ * All transforms operate on individual CSS color strings.
+ */
+import { parse, converter, formatHex, clampChroma, displayable } from 'culori';
+const toOklch = converter('oklch');
+/**
+ * Parse a CSS color string to OKLCH components.
+ * Returns null if the color can't be parsed.
+ */
+function parseToOklch(color) {
+    const parsed = parse(color);
+    if (!parsed)
+        return null;
+    const oklch = toOklch(parsed);
+    return {
+        l: oklch.l ?? 0,
+        c: oklch.c ?? 0,
+        h: oklch.h ?? 0,
+        alpha: oklch.alpha
+    };
+}
+/**
+ * Convert OKLCH components back to a hex color string.
+ * Clamps to sRGB gamut.
+ */
+function oklchToHex(l, c, h, alpha) {
+    let color = { mode: 'oklch', l, c, h, alpha };
+    // Clamp to displayable sRGB gamut
+    if (!displayable(color)) {
+        color = clampChroma(color, 'oklch');
+    }
+    return formatHex(color);
+}
+/**
+ * Transform a single CSS color to grayscale using OKLCH.
+ * Sets chroma to 0, preserving perceptual lightness.
+ */
+export function toGrayscale(color) {
+    const oklch = parseToOklch(color);
+    if (!oklch)
+        return color;
+    return oklchToHex(oklch.l, 0, 0, oklch.alpha);
+}
+/**
+ * Transform a single CSS color to grayscale, then tint toward a target color.
+ *
+ * The tint color's hue and chroma influence the result, while the original
+ * color's lightness is preserved. This unifies a palette while keeping contrast.
+ */
+export function toGrayscaleTint(color, tintColor) {
+    const oklch = parseToOklch(color);
+    if (!oklch)
+        return color;
+    const tint = parseToOklch(tintColor);
+    if (!tint)
+        return color;
+    // Use original lightness, tint's hue, and a fraction of tint's chroma
+    // Scale chroma by the ratio of original chroma to max, to preserve some variation
+    const tintChroma = tint.c * 0.7; // 70% of tint chroma for a softer effect
+    return oklchToHex(oklch.l, tintChroma, tint.h, oklch.alpha);
+}
+/**
+ * Remap a single CSS color to a target hue, optionally overriding saturation.
+ *
+ * Preserves the original lightness. If saturation is provided, it's used as
+ * a percentage of the maximum chroma; otherwise, the original chroma is preserved.
+ */
+export function remapHue(color, targetHue, targetSaturation) {
+    const oklch = parseToOklch(color);
+    if (!oklch)
+        return color;
+    const c = targetSaturation !== undefined
+        ? (targetSaturation / 100) * 0.4 // Map 0-100 to 0-0.4 OKLCH chroma range
+        : oklch.c;
+    return oklchToHex(oklch.l, c, targetHue, oklch.alpha);
+}
+/**
+ * Apply a full IconColorMode transformation to SVG content.
+ *
+ * Handles all modes: 'auto', 'original', 'monochrome', 'grayscale',
+ * 'grayscale-tint', and { hue, saturation? }.
+ *
+ * Color transforms operate on fill/stroke attribute values and style properties,
+ * replacing each color with its transformed equivalent.
+ */
+export function applyColorMode(svgContent, isMonochrome, colorMode, iconColor) {
+    // Handle simple string modes first
+    if (colorMode === 'original') {
+        return svgContent;
+    }
+    if (colorMode === 'auto') {
+        if (isMonochrome) {
+            return svgContent.replace(/currentColor/g, iconColor);
+        }
+        return svgContent;
+    }
+    if (colorMode === 'monochrome') {
+        return svgContent
+            .replace(/(fill=["'])(?!none)([^"']+)(["'])/gi, `$1${iconColor}$3`)
+            .replace(/(stroke=["'])(?!none)([^"']+)(["'])/gi, `$1${iconColor}$3`)
+            .replace(/currentColor/g, iconColor);
+    }
+    // For grayscale, grayscale-tint, and hue remap: transform each color value
+    const transformColor = (color) => {
+        if (color === 'none' || color === 'inherit' || color === 'transparent') {
+            return color;
+        }
+        // Replace currentColor with iconColor before transforming
+        const resolvedColor = color === 'currentColor' ? iconColor : color;
+        if (colorMode === 'grayscale') {
+            return toGrayscale(resolvedColor);
+        }
+        if (colorMode === 'grayscale-tint') {
+            return toGrayscaleTint(resolvedColor, iconColor);
+        }
+        // Object mode: { hue, saturation? }
+        if (typeof colorMode === 'object') {
+            return remapHue(resolvedColor, colorMode.hue, colorMode.saturation);
+        }
+        return color;
+    };
+    // Transform fill/stroke attribute values
+    let result = svgContent.replace(/((?:fill|stroke)=["'])([^"']+)(["'])/gi, (_match, prefix, value, suffix) => {
+        return `${prefix}${transformColor(value.trim())}${suffix}`;
+    });
+    // Transform fill/stroke in style attributes
+    result = result.replace(/((?:fill|stroke)\s*:\s*)([^;"']+)/gi, (_match, prefix, value) => {
+        return `${prefix}${transformColor(value.trim())}`;
+    });
+    // Also replace any remaining currentColor references
+    result = result.replace(/currentColor/g, transformColor('currentColor'));
+    return result;
+}

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

@@ -0,0 +1,16 @@
+import type { GradientConfig, AppLogoProps, IconSourceType } from './types.js';
+/** The Leftium brand gradient: 45deg diagonal, dark blue -> bright blue -> dark blue */
+export declare const LEFTIUM_GRADIENT: GradientConfig;
+/** Default values for all AppLogo props */
+export declare const APP_LOGO_DEFAULTS: Required<Pick<AppLogoProps, 'icon' | 'iconColor' | 'iconColorMode' | 'iconSize' | 'iconOffsetX' | 'iconOffsetY' | 'iconRotation' | 'cornerRadius' | 'cornerShape' | 'size'>> & {
+    background: GradientConfig;
+};
+/**
+ * Detect icon source type from the icon prop string.
+ *
+ * - Starts with `<svg` or `<SVG` -> inline SVG
+ * - Starts with `data:` -> data URL
+ * - Contains `:` (but not `data:`) -> Iconify ID
+ * - Otherwise -> Unicode/emoji text
+ */
+export declare function detectIconSource(icon: string): IconSourceType;

package/dist/app-logo/defaults.js

@@ -0,0 +1,38 @@
+/** The Leftium brand gradient: 45deg diagonal, dark blue -> bright blue -> dark blue */
+export const LEFTIUM_GRADIENT = {
+    colors: ['#0029c1', '#3973ff', '#0029c1'],
+    stops: [0, 0.29, 1],
+    angle: 45 // bottom-left -> top-right
+};
+/** Default values for all AppLogo props */
+export const APP_LOGO_DEFAULTS = {
+    icon: 'fxemoji:rocket',
+    iconColor: '#ffffff',
+    iconColorMode: 'auto',
+    iconSize: 60,
+    iconOffsetX: 0,
+    iconOffsetY: 0,
+    iconRotation: 0,
+    cornerRadius: 0,
+    cornerShape: 'round',
+    background: LEFTIUM_GRADIENT,
+    size: 512
+};
+/**
+ * Detect icon source type from the icon prop string.
+ *
+ * - Starts with `<svg` or `<SVG` -> inline SVG
+ * - Starts with `data:` -> data URL
+ * - Contains `:` (but not `data:`) -> Iconify ID
+ * - Otherwise -> Unicode/emoji text
+ */
+export function detectIconSource(icon) {
+    const trimmed = icon.trim();
+    if (trimmed.startsWith('<svg') || trimmed.startsWith('<SVG'))
+        return 'svg';
+    if (trimmed.startsWith('data:'))
+        return 'data-url';
+    if (trimmed.includes(':'))
+        return 'iconify';
+    return 'emoji';
+}

package/dist/app-logo/generate-favicon-set.d.ts

@@ -0,0 +1,44 @@
+import type { AppLogoConfig } from './types.js';
+export interface FaviconSetResult {
+    svg: string;
+    ico: Blob;
+    appleTouchIcon: Blob;
+    icon192: Blob;
+    icon512: Blob;
+}
+export interface AppInfo {
+    name?: string;
+    shortName?: string;
+}
+/**
+ * Generate the full favicon file set from an AppLogo configuration.
+ *
+ * Returns SVG, ICO, and PNG blobs for all standard favicon sizes.
+ * Browser-only (requires canvas).
+ */
+export declare function generateFaviconSet(config: AppLogoConfig): Promise<FaviconSetResult>;
+/**
+ * Generate a manifest.webmanifest JSON string.
+ */
+export declare function generateManifest(appInfo: AppInfo): string;
+/**
+ * Generate the HTML snippet for pasting into app.html.
+ */
+export declare function generateFaviconHtml(appInfo: AppInfo): string;
+/**
+ * Build the full zip kit as a Blob.
+ *
+ * Zip structure mirrors a SvelteKit project root:
+ *   static/favicon.ico
+ *   static/icon.svg
+ *   static/apple-touch-icon.png
+ *   static/icon-192.png
+ *   static/icon-512.png
+ *   static/logo.png
+ *   static/logo.webp
+ *   static/logo.svg
+ *   static/manifest.webmanifest
+ *   static/_app-logo/config.json
+ *   _snippets/favicon-html.html
+ */
+export declare function generateZipKit(config: AppLogoConfig, appInfo: AppInfo): Promise<Blob>;

package/dist/app-logo/generate-favicon-set.js

@@ -0,0 +1,97 @@
+import JSZip from 'jszip';
+import { generateAppLogoSvg } from './generate-svg.js';
+import { generateAppLogoPng } from './generate-png.js';
+import { pngToIco } from './generate-ico.js';
+/**
+ * Generate the full favicon file set from an AppLogo configuration.
+ *
+ * Returns SVG, ICO, and PNG blobs for all standard favicon sizes.
+ * Browser-only (requires canvas).
+ */
+export async function generateFaviconSet(config) {
+    const [svg, png32, appleTouchIcon, icon192, icon512] = await Promise.all([
+        generateAppLogoSvg(config, 'favicon'),
+        generateAppLogoPng(config, { variant: 'favicon', size: 32 }),
+        generateAppLogoPng(config, { variant: 'favicon', size: 180 }),
+        generateAppLogoPng(config, { variant: 'favicon', size: 192 }),
+        generateAppLogoPng(config, { variant: 'favicon', size: 512 })
+    ]);
+    const ico = await pngToIco(png32);
+    return { svg, ico, appleTouchIcon, icon192, icon512 };
+}
+/**
+ * Generate a manifest.webmanifest JSON string.
+ */
+export function generateManifest(appInfo) {
+    const manifest = {
+        name: appInfo.name || 'My App',
+        short_name: appInfo.shortName || appInfo.name || 'App',
+        icons: [
+            { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
+            { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
+            { src: '/icon.svg', sizes: 'any', type: 'image/svg+xml' }
+        ],
+        theme_color: '#ffffff',
+        background_color: '#ffffff',
+        display: 'standalone'
+    };
+    return JSON.stringify(manifest, null, '\t');
+}
+/**
+ * Generate the HTML snippet for pasting into app.html.
+ */
+export function generateFaviconHtml(appInfo) {
+    const name = appInfo.name || 'My App';
+    return [
+        `\t\t<title>${name}</title>`,
+        `\t\t<link rel="icon" href="/favicon.ico" sizes="32x32">`,
+        `\t\t<link rel="icon" href="/icon.svg" type="image/svg+xml">`,
+        `\t\t<link rel="apple-touch-icon" href="/apple-touch-icon.png">`,
+        `\t\t<link rel="manifest" href="/manifest.webmanifest">`
+    ].join('\n');
+}
+/**
+ * Build the full zip kit as a Blob.
+ *
+ * Zip structure mirrors a SvelteKit project root:
+ *   static/favicon.ico
+ *   static/icon.svg
+ *   static/apple-touch-icon.png
+ *   static/icon-192.png
+ *   static/icon-512.png
+ *   static/logo.png
+ *   static/logo.webp
+ *   static/logo.svg
+ *   static/manifest.webmanifest
+ *   static/_app-logo/config.json
+ *   _snippets/favicon-html.html
+ */
+export async function generateZipKit(config, appInfo) {
+    const [faviconSet, logoPng, logoWebp, logoSvg] = await Promise.all([
+        generateFaviconSet(config),
+        generateAppLogoPng(config, { variant: 'logo', size: 512 }),
+        generateAppLogoPng(config, { variant: 'logo', size: 512, format: 'webp' }),
+        generateAppLogoSvg(config, 'logo')
+    ]);
+    const zip = new JSZip();
+    const staticDir = zip.folder('static');
+    const appLogoDir = staticDir.folder('_app-logo');
+    const snippetsDir = zip.folder('_snippets');
+    // Favicon files
+    staticDir.file('favicon.ico', faviconSet.ico);
+    staticDir.file('icon.svg', faviconSet.svg);
+    staticDir.file('apple-touch-icon.png', faviconSet.appleTouchIcon);
+    staticDir.file('icon-192.png', faviconSet.icon192);
+    staticDir.file('icon-512.png', faviconSet.icon512);
+    // Logo files
+    staticDir.file('logo.png', logoPng);
+    staticDir.file('logo.webp', logoWebp);
+    staticDir.file('logo.svg', logoSvg);
+    // Manifest
+    staticDir.file('manifest.webmanifest', generateManifest(appInfo));
+    // Config for regeneration
+    appLogoDir.file('config.json', JSON.stringify(config, null, '\t'));
+    // HTML snippet
+    snippetsDir.file('favicon-html.html', generateFaviconHtml(appInfo));
+    return zip.generateAsync({ type: 'blob' });
+}

package/dist/app-logo/generate-ico.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ICO binary container generator.
+ *
+ * Wraps a single PNG blob in the ICO container format.
+ * The ICO format is a simple container; modern browsers accept a single 32x32 PNG inside.
+ *
+ * ICO file structure (single image):
+ *   ICONDIR header  (6 bytes)
+ *   ICONDIRENTRY    (16 bytes)
+ *   PNG image data  (variable)
+ */
+/**
+ * Wrap a PNG Blob in an ICO container.
+ *
+ * @param pngBlob - A PNG image blob (should be 32x32 for favicon.ico)
+ * @returns ICO file as a Blob
+ */
+export declare function pngToIco(pngBlob: Blob): Promise<Blob>;

package/dist/app-logo/generate-ico.js

@@ -0,0 +1,63 @@
+/**
+ * ICO binary container generator.
+ *
+ * Wraps a single PNG blob in the ICO container format.
+ * The ICO format is a simple container; modern browsers accept a single 32x32 PNG inside.
+ *
+ * ICO file structure (single image):
+ *   ICONDIR header  (6 bytes)
+ *   ICONDIRENTRY    (16 bytes)
+ *   PNG image data  (variable)
+ */
+/**
+ * Wrap a PNG Blob in an ICO container.
+ *
+ * @param pngBlob - A PNG image blob (should be 32x32 for favicon.ico)
+ * @returns ICO file as a Blob
+ */
+export async function pngToIco(pngBlob) {
+    const pngBytes = new Uint8Array(await pngBlob.arrayBuffer());
+    const pngSize = pngBytes.byteLength;
+    // ICO header: 6 bytes
+    //   reserved (2) = 0
+    //   type     (2) = 1 (icon)
+    //   count    (2) = 1 (number of images)
+    const HEADER_SIZE = 6;
+    const ENTRY_SIZE = 16;
+    const imageOffset = HEADER_SIZE + ENTRY_SIZE;
+    const buffer = new ArrayBuffer(imageOffset + pngSize);
+    const view = new DataView(buffer);
+    const bytes = new Uint8Array(buffer);
+    // ICONDIR header
+    view.setUint16(0, 0, true); // reserved
+    view.setUint16(2, 1, true); // type: 1 = ICO
+    view.setUint16(4, 1, true); // image count: 1
+    // ICONDIRENTRY (16 bytes at offset 6)
+    // width  (1 byte): 0 means 256; use actual size for <=255
+    // height (1 byte): same
+    // We read actual dimensions from the PNG IHDR chunk (bytes 16-23)
+    const width = readPngDimension(pngBytes, 16);
+    const height = readPngDimension(pngBytes, 20);
+    bytes[6] = width >= 256 ? 0 : width; // width (0 = 256)
+    bytes[7] = height >= 256 ? 0 : height; // height (0 = 256)
+    bytes[8] = 0; // color count (0 = no palette)
+    bytes[9] = 0; // reserved
+    view.setUint16(10, 1, true); // color planes
+    view.setUint16(12, 32, true); // bits per pixel
+    view.setUint32(14, pngSize, true); // size of image data
+    view.setUint32(18, imageOffset, true); // offset of image data
+    // PNG image data
+    bytes.set(pngBytes, imageOffset);
+    return new Blob([buffer], { type: 'image/x-icon' });
+}
+/**
+ * Read a 4-byte big-endian uint32 from a Uint8Array at the given offset.
+ * Used to extract width/height from the PNG IHDR chunk.
+ */
+function readPngDimension(bytes, offset) {
+    return (((bytes[offset] << 24) |
+        (bytes[offset + 1] << 16) |
+        (bytes[offset + 2] << 8) |
+        bytes[offset + 3]) >>>
+        0);
+}

package/dist/app-logo/generate-png.d.ts

@@ -0,0 +1,16 @@
+import type { AppLogoConfig } from './types.js';
+/**
+ * Generate a PNG or WebP Blob from an AppLogo configuration.
+ *
+ * Renders the SVG onto an offscreen canvas and exports as PNG or WebP.
+ * Browser-only (requires canvas and Image).
+ *
+ * @param config - The AppLogo configuration
+ * @param options - Export options
+ * @returns PNG or WebP Blob
+ */
+export declare function generateAppLogoPng(config: AppLogoConfig, options?: {
+    variant?: 'logo' | 'favicon';
+    size?: number;
+    format?: 'png' | 'webp';
+}): Promise<Blob>;

package/dist/app-logo/generate-png.js

@@ -0,0 +1,60 @@
+import { generateAppLogoSvg } from './generate-svg.js';
+/**
+ * Generate a PNG or WebP Blob from an AppLogo configuration.
+ *
+ * Renders the SVG onto an offscreen canvas and exports as PNG or WebP.
+ * Browser-only (requires canvas and Image).
+ *
+ * @param config - The AppLogo configuration
+ * @param options - Export options
+ * @returns PNG or WebP Blob
+ */
+export async function generateAppLogoPng(config, options) {
+    const size = options?.size ?? 512;
+    const mimeType = options?.format === 'webp' ? 'image/webp' : 'image/png';
+    // Override size in config for SVG generation
+    const sizedConfig = {
+        ...config,
+        [options?.variant === 'favicon' ? 'favicon' : 'logo']: {
+            ...(options?.variant === 'favicon' ? config.favicon : config.logo),
+            size
+        }
+    };
+    const svg = await generateAppLogoSvg(sizedConfig, options?.variant);
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        img.onload = () => {
+            try {
+                const canvas = document.createElement('canvas');
+                canvas.width = size;
+                canvas.height = size;
+                const ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    reject(new Error('Failed to get canvas 2d context'));
+                    return;
+                }
+                ctx.drawImage(img, 0, 0, size, size);
+                canvas.toBlob((outBlob) => {
+                    URL.revokeObjectURL(url);
+                    if (outBlob) {
+                        resolve(outBlob);
+                    }
+                    else {
+                        reject(new Error('Canvas toBlob returned null'));
+                    }
+                }, mimeType);
+            }
+            catch (err) {
+                URL.revokeObjectURL(url);
+                reject(err);
+            }
+        };
+        img.onerror = () => {
+            URL.revokeObjectURL(url);
+            reject(new Error('Failed to load SVG into Image element'));
+        };
+        img.src = url;
+    });
+}

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

@@ -0,0 +1,9 @@
+import type { AppLogoConfig } from './types.js';
+/**
+ * Generate a complete SVG string for an AppLogo configuration.
+ *
+ * @param config - The AppLogo configuration
+ * @param variant - 'logo' or 'favicon' to use per-output overrides
+ * @returns Complete SVG string
+ */
+export declare function generateAppLogoSvg(config: AppLogoConfig, variant?: 'logo' | 'favicon'): Promise<string>;

package/dist/app-logo/generate-svg.js

@@ -0,0 +1,158 @@
+import { APP_LOGO_DEFAULTS } from './defaults.js';
+import { resolveIcon } from './iconify.js';
+import { applyColorMode } from './color-transform.js';
+import { generateCornerPath } from './squircle.js';
+/**
+ * Resolve merged props from an AppLogoConfig + variant.
+ */
+function resolveProps(config, variant) {
+    const overrides = variant === 'favicon' ? config.favicon : config.logo;
+    return {
+        icon: overrides?.icon ?? config.icon ?? APP_LOGO_DEFAULTS.icon,
+        iconColor: overrides?.iconColor ?? config.iconColor ?? APP_LOGO_DEFAULTS.iconColor,
+        iconColorMode: overrides?.iconColorMode ?? config.iconColorMode ?? APP_LOGO_DEFAULTS.iconColorMode,
+        iconSize: overrides?.iconSize ?? APP_LOGO_DEFAULTS.iconSize,
+        iconOffsetX: overrides?.iconOffsetX ?? APP_LOGO_DEFAULTS.iconOffsetX,
+        iconOffsetY: overrides?.iconOffsetY ?? APP_LOGO_DEFAULTS.iconOffsetY,
+        iconRotation: overrides?.iconRotation ?? APP_LOGO_DEFAULTS.iconRotation,
+        cornerRadius: overrides?.cornerRadius ?? config.cornerRadius ?? APP_LOGO_DEFAULTS.cornerRadius,
+        cornerShape: overrides?.cornerShape ?? config.cornerShape ?? APP_LOGO_DEFAULTS.cornerShape,
+        background: overrides?.background ?? config.background ?? APP_LOGO_DEFAULTS.background,
+        size: overrides?.size ?? APP_LOGO_DEFAULTS.size
+    };
+}
+/**
+ * Convert a CSS gradient angle (degrees, clockwise from top) to SVG linearGradient coordinates.
+ *
+ * CSS: 0deg = bottom-to-top, 90deg = left-to-right, 180deg = top-to-bottom
+ * SVG: x1,y1 = start point, x2,y2 = end point (as percentages)
+ *
+ * @param angleDeg - CSS gradient angle in degrees
+ * @param position - Shift gradient along its axis as % (-100 to 100), default 0
+ * @param scale - Scale gradient length (1 = full span, 0.5 = half, 2 = double), default 1
+ */
+function angleToGradientCoords(angleDeg, position = 0, scale = 1) {
+    // CSS gradient angles: 0deg = to top, 90deg = to right, clockwise.
+    // The gradient line runs FROM the opposite side TO the angle direction.
+    // In SVG coords (Y-axis down): convert CSS angle to SVG start/end points.
+    const rad = (angleDeg * Math.PI) / 180;
+    // Direction vector: CSS 0deg = up (dx=0, dy=-1 in SVG), rotates clockwise
+    const dx = Math.sin(rad);
+    const dy = -Math.cos(rad);
+    // Half-length of the gradient vector, scaled
+    const halfLen = 50 * scale;
+    // Position shift along the gradient axis (% of full span)
+    const shiftX = dx * (position / 100) * 50;
+    const shiftY = dy * (position / 100) * 50;
+    // Center point, shifted by position
+    const cx = 50 + shiftX;
+    const cy = 50 + shiftY;
+    // Start and end points
+    const x1 = Math.round(cx - dx * halfLen);
+    const y1 = Math.round(cy - dy * halfLen);
+    const x2 = Math.round(cx + dx * halfLen);
+    const y2 = Math.round(cy + dy * halfLen);
+    return { x1: `${x1}%`, y1: `${y1}%`, x2: `${x2}%`, y2: `${y2}%` };
+}
+/**
+ * Build a <linearGradient> element for the gradient background.
+ * Returns the element without wrapping <defs>.
+ */
+function buildGradientElement(gradient, id) {
+    const angle = gradient.angle ?? 45;
+    const position = gradient.position ?? 0;
+    const scale = gradient.scale ?? 1;
+    const coords = angleToGradientCoords(angle, position, scale);
+    const stops = gradient.colors
+        .map((color, i) => {
+        const offset = gradient.stops ? gradient.stops[i] : i / (gradient.colors.length - 1);
+        return `<stop offset="${(offset * 100).toFixed(1)}%" stop-color="${color}"/>`;
+    })
+        .join('\n      ');
+    return `<linearGradient id="${id}" x1="${coords.x1}" y1="${coords.y1}" x2="${coords.x2}" y2="${coords.y2}">
+      ${stops}
+    </linearGradient>`;
+}
+/**
+ * Build the background element (solid color or gradient fill).
+ *
+ * For 'round' corners, uses a standard <rect> with rx/ry.
+ * For other corner shapes, uses a <path> with the superellipse curve.
+ */
+function buildBackground(background, size, cornerRadius, cornerShape, gradientId) {
+    const fill = typeof background === 'string' ? background : `url(#${gradientId})`;
+    // For 'round' shape, use standard rect with rx/ry (cleaner SVG)
+    if (cornerShape === 'round') {
+        const rx = cornerRadius > 0
+            ? ` rx="${(cornerRadius / 100) * size}" ry="${(cornerRadius / 100) * size}"`
+            : '';
+        return {
+            defs: '',
+            element: `<rect width="${size}" height="${size}"${rx} fill="${fill}"/>`
+        };
+    }
+    // For other shapes, generate the superellipse path
+    const pathD = generateCornerPath(size, cornerRadius, cornerShape);
+    const clipId = 'app-logo-clip';
+    return {
+        defs: `<clipPath id="${clipId}"><path d="${pathD}"/></clipPath>`,
+        element: `<rect width="${size}" height="${size}" fill="${fill}" clip-path="url(#${clipId})"/>`
+    };
+}
+/**
+ * Build the icon layer as an SVG group, positioned and scaled within the square.
+ */
+function buildIconLayer(svgContent, viewBox, size, iconSize, iconOffsetX, iconOffsetY, iconRotation) {
+    // Parse viewBox
+    const [vbX, vbY, vbW, vbH] = viewBox.split(' ').map(Number);
+    // Icon pixel size
+    const iconPx = (iconSize / 100) * size;
+    // Scale factor to fit icon into iconPx
+    const scale = iconPx / Math.max(vbW, vbH);
+    // Actual rendered dimensions (preserving aspect ratio)
+    const renderedW = vbW * scale;
+    const renderedH = vbH * scale;
+    // Center position with offset
+    const offsetXPx = (iconOffsetX / 100) * size;
+    const offsetYPx = (iconOffsetY / 100) * size;
+    const tx = (size - renderedW) / 2 + offsetXPx;
+    const ty = (size - renderedH) / 2 + offsetYPx;
+    // Rotation around the icon's center
+    const rotateAttr = iconRotation !== 0
+        ? ` rotate(${iconRotation}, ${(renderedW / 2).toFixed(2)}, ${(renderedH / 2).toFixed(2)})`
+        : '';
+    return `<g transform="translate(${tx.toFixed(2)}, ${ty.toFixed(2)})${rotateAttr} scale(${scale.toFixed(4)}) translate(${-vbX}, ${-vbY})">
+    ${svgContent}
+  </g>`;
+}
+/**
+ * Generate a complete SVG string for an AppLogo configuration.
+ *
+ * @param config - The AppLogo configuration
+ * @param variant - 'logo' or 'favicon' to use per-output overrides
+ * @returns Complete SVG string
+ */
+export async function generateAppLogoSvg(config, variant) {
+    const props = resolveProps(config, variant);
+    const size = props.size;
+    const gradientId = 'app-logo-bg';
+    // Resolve icon
+    const resolved = await resolveIcon(props.icon);
+    // Apply color mode (supports all IconColorMode values)
+    const coloredContent = applyColorMode(resolved.svgContent, resolved.isMonochrome, props.iconColorMode, props.iconColor);
+    // Build SVG parts
+    const isGradient = typeof props.background !== 'string';
+    const gradientEl = isGradient
+        ? buildGradientElement(props.background, gradientId)
+        : '';
+    const bg = buildBackground(props.background, size, props.cornerRadius, props.cornerShape, gradientId);
+    const iconLayer = buildIconLayer(coloredContent, resolved.viewBox, size, props.iconSize, props.iconOffsetX, props.iconOffsetY, props.iconRotation);
+    // Combine all defs (gradient + clip path)
+    const allDefs = [gradientEl, bg.defs].filter(Boolean).join('\n    ');
+    const defsBlock = allDefs ? `<defs>\n    ${allDefs}\n  </defs>` : '';
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+  ${defsBlock}
+  ${bg.element}
+  ${iconLayer}
+</svg>`;
+}