@leftium/logo 0.0.2 → 0.2.0

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

@@ -0,0 +1,142 @@
+/**
+ * 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.
+ * @param lightness Optional lightness multiplier (0-200), default 100 = no change
+ */
+export function toGrayscale(color, lightness = 100) {
+    const oklch = parseToOklch(color);
+    if (!oklch)
+        return color;
+    const l = Math.min(1, Math.max(0, oklch.l * (lightness / 100)));
+    return oklchToHex(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.
+ * @param lightness Optional lightness multiplier (0-200), default 100 = no change
+ */
+export function toGrayscaleTint(color, tintColor, lightness = 100) {
+    const oklch = parseToOklch(color);
+    if (!oklch)
+        return color;
+    const tint = parseToOklch(tintColor);
+    if (!tint)
+        return color;
+    // Use original lightness (scaled by multiplier), 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 l = Math.min(1, Math.max(0, oklch.l * (lightness / 100)));
+    const tintChroma = tint.c * 0.7; // 70% of tint chroma for a softer effect
+    return oklchToHex(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.
+ *
+ * @param grayscaleLightness Lightness multiplier for grayscale modes (0-200), default 100
+ */
+export function applyColorMode(svgContent, isMonochrome, colorMode, iconColor, grayscaleLightness = 100) {
+    // 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, grayscaleLightness);
+        }
+        if (colorMode === 'grayscale-tint') {
+            return toGrayscaleTint(resolvedColor, iconColor, grayscaleLightness);
+        }
+        // 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/config-serialization.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Config serialization: bidirectional conversion between the UI-level ColumnState
+ * (flat, slider-friendly) and the export-level AppLogoConfig (structured, spec-compliant).
+ *
+ * Also handles URL hash encoding/decoding and Svelte snippet generation.
+ */
+import type { AppLogoConfig, CornerShape, GradientConfig, IconColorMode } from './types.js';
+export interface ColumnState {
+    icon: string;
+    iconColor: string;
+    iconColorModeKey: string;
+    hueValue: number;
+    saturationValue: number;
+    iconSize: number;
+    iconOffsetX: number;
+    iconOffsetY: number;
+    iconRotation: number;
+    grayscaleLightness: number;
+    cornerRadius: number;
+    cornerK: number;
+    solidColor: string;
+    useGradient: boolean;
+    gradientAngle: number;
+    gradientPosition: number;
+    gradientScale: number;
+}
+export declare const DEFAULT_STATE: ColumnState;
+export declare const DEFAULT_LOCKS: Record<keyof ColumnState, boolean>;
+export declare function cornerKToShape(k: number): CornerShape;
+export declare function cornerShapeToK(shape: CornerShape): number;
+export declare function cornerKLabel(k: number): string;
+export declare function iconColorModeFromFlat(key: string, hue: number, saturation: number): IconColorMode;
+export declare function iconColorModeToFlat(mode: IconColorMode): {
+    key: string;
+    hue: number;
+    saturation: number;
+};
+export declare function backgroundFromFlat(col: ColumnState): string | GradientConfig;
+/**
+ * Build an AppLogoConfig from the logo and effective favicon ColumnState.
+ * Also accepts the lock state to determine which favicon fields are overrides.
+ */
+export declare function buildFullConfig(logoState: ColumnState, effectiveFaviconState: ColumnState, lockState: Record<keyof ColumnState, boolean>, emojiStyle?: string): AppLogoConfig;
+/**
+ * Build a single-variant AppLogoConfig for export/rendering.
+ */
+export declare function buildVariantConfig(col: ColumnState, variant: 'logo' | 'favicon', emojiStyle?: string): AppLogoConfig;
+/**
+ * Convert an AppLogoConfig back to ColumnState + lock state.
+ * Shared fields populate the logo column. Favicon overrides populate
+ * the favicon column and unlock the corresponding locks.
+ */
+export declare function configToUIState(config: AppLogoConfig): {
+    logo: ColumnState;
+    favicon: ColumnState;
+    locks: Record<keyof ColumnState, boolean>;
+    emojiStyle: string;
+};
+/**
+ * Encode a config object to a base64url string for URL hash.
+ * Uses TextEncoder for Unicode safety (emoji icon names, non-ASCII app names).
+ */
+export declare function encodeConfigToHash(config: AppLogoConfig): string;
+/**
+ * Decode a base64url string from URL hash back to AppLogoConfig.
+ * Returns null if decoding fails.
+ */
+export declare function decodeConfigFromHash(hash: string): AppLogoConfig | null;
+/**
+ * Generate a minimal <AppLogo> Svelte snippet with only non-default props.
+ */
+export declare function generateSvelteSnippet(config: AppLogoConfig): string;
+/**
+ * Generate the HTML favicon snippet for clipboard copy.
+ * Re-exports the existing function for convenience.
+ */
+export declare function generateHtmlSnippet(appInfo: {
+    name?: string;
+    shortName?: string;
+}): string;