@leftium/logo 0.0.2 → 0.2.0

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,160 @@
+import { APP_LOGO_DEFAULTS, DEFAULT_EMOJI_STYLE } 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,
+        grayscaleLightness: overrides?.grayscaleLightness ?? 100,
+        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 (pass emojiStyle for emoji auto-mapping)
+    const emojiStyle = config.emojiStyle ?? DEFAULT_EMOJI_STYLE;
+    const resolved = await resolveIcon(props.icon, emojiStyle);
+    // Apply color mode (supports all IconColorMode values)
+    const coloredContent = applyColorMode(resolved.svgContent, resolved.isMonochrome, props.iconColorMode, props.iconColor, props.grayscaleLightness);
+    // 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>`;
+}

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

@@ -0,0 +1,35 @@
+import type { IconSourceType } from './types.js';
+/**
+ * Resolved icon data ready for rendering/export.
+ */
+export interface ResolvedIcon {
+    /** The raw SVG markup (without the outer <svg> wrapper for Iconify/data-url/svg sources) */
+    svgContent: string;
+    /** The viewBox of the original icon SVG */
+    viewBox: string;
+    /** Whether the icon uses currentColor (monochrome) vs hardcoded colors (multicolor) */
+    isMonochrome: boolean;
+    /** The detected source type */
+    sourceType: IconSourceType;
+}
+/**
+ * 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 declare function resolveEmojiSlug(emoji: string, prefix: string): Promise<string | null>;
+/**
+ * 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 declare function resolveIcon(icon: string, emojiStyle?: string): Promise<ResolvedIcon>;