@leftium/logo 0.1.0 → 0.2.0

package/dist/AppLogo.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { AppLogoProps, GradientConfig } from './app-logo/types.js';
-	import { APP_LOGO_DEFAULTS } from './app-logo/defaults.js';
+	import { APP_LOGO_DEFAULTS, DEFAULT_EMOJI_STYLE } from './app-logo/defaults.js';
 	import { resolveIcon, type ResolvedIcon } from './app-logo/iconify.js';
 	import { applyColorMode } from './app-logo/color-transform.js';
 	import { generateCornerPath } from './app-logo/squircle.js';
@@ -13,11 +13,13 @@
 		iconOffsetX = APP_LOGO_DEFAULTS.iconOffsetX,
 		iconOffsetY = APP_LOGO_DEFAULTS.iconOffsetY,
 		iconRotation = APP_LOGO_DEFAULTS.iconRotation,
+		grayscaleLightness = 100,
 		cornerRadius = APP_LOGO_DEFAULTS.cornerRadius,
 		cornerShape = APP_LOGO_DEFAULTS.cornerShape,
 		background = APP_LOGO_DEFAULTS.background as AppLogoProps['background'],
-		size = APP_LOGO_DEFAULTS.size
-	}: AppLogoProps = $props();
+		size = APP_LOGO_DEFAULTS.size,
+		emojiStyle = DEFAULT_EMOJI_STYLE
+	}: AppLogoProps & { emojiStyle?: string } = $props();
 
 	// Resolved icon state — use $state.raw since this is replaced, not mutated
 	let resolved: ResolvedIcon | null = $state.raw(null);
@@ -25,11 +27,12 @@
 	// Fetch icon when the icon prop changes
 	$effect(() => {
 		const currentIcon = icon;
+		const currentEmojiStyle = emojiStyle;
 		resolved = null;
 
-		resolveIcon(currentIcon).then((result) => {
-			// Only update if icon hasn't changed while we were fetching
-			if (icon === currentIcon) {
+		resolveIcon(currentIcon, currentEmojiStyle).then((result) => {
+			// Only update if icon/emojiStyle hasn't changed while we were fetching
+			if (icon === currentIcon && emojiStyle === currentEmojiStyle) {
 				resolved = result;
 			}
 		});
@@ -39,7 +42,13 @@
 	let coloredSvgContent = $derived.by(() => {
 		const r = resolved;
 		if (!r) return '';
-		return applyColorMode(r.svgContent, r.isMonochrome, iconColorMode, iconColor);
+		return applyColorMode(
+			r.svgContent,
+			r.isMonochrome,
+			iconColorMode,
+			iconColor,
+			grayscaleLightness
+		);
 	});
 
 	// Build the full inline SVG with viewBox and 100% sizing

package/dist/AppLogo.svelte.d.ts

@@ -1,4 +1,7 @@
 import type { AppLogoProps } from './app-logo/types.js';
-declare const AppLogo: import("svelte").Component<AppLogoProps, {}, "">;
+type $$ComponentProps = AppLogoProps & {
+    emojiStyle?: string;
+};
+declare const AppLogo: import("svelte").Component<$$ComponentProps, {}, "">;
 type AppLogo = ReturnType<typeof AppLogo>;
 export default AppLogo;

package/dist/app-logo/color-transform.d.ts

@@ -8,15 +8,17 @@ import type { IconColorMode } from './types.js';
 /**
  * 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 declare function toGrayscale(color: string): string;
+export declare function toGrayscale(color: string, lightness?: number): string;
 /**
  * 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 declare function toGrayscaleTint(color: string, tintColor: string): string;
+export declare function toGrayscaleTint(color: string, tintColor: string, lightness?: number): string;
 /**
  * Remap a single CSS color to a target hue, optionally overriding saturation.
  *
@@ -32,5 +34,7 @@ export declare function remapHue(color: string, targetHue: number, targetSaturat
  *
  * 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 declare function applyColorMode(svgContent: string, isMonochrome: boolean, colorMode: IconColorMode, iconColor: string): string;
+export declare function applyColorMode(svgContent: string, isMonochrome: boolean, colorMode: IconColorMode, iconColor: string, grayscaleLightness?: number): string;

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

@@ -37,30 +37,34 @@ function oklchToHex(l, c, h, alpha) {
 /**
  * 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) {
+export function toGrayscale(color, lightness = 100) {
     const oklch = parseToOklch(color);
     if (!oklch)
         return color;
-    return oklchToHex(oklch.l, 0, 0, oklch.alpha);
+    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) {
+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, tint's hue, and a fraction of tint's chroma
+    // 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(oklch.l, tintChroma, tint.h, oklch.alpha);
+    return oklchToHex(l, tintChroma, tint.h, oklch.alpha);
 }
 /**
  * Remap a single CSS color to a target hue, optionally overriding saturation.
@@ -85,8 +89,10 @@ export function remapHue(color, targetHue, targetSaturation) {
  *
  * 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) {
+export function applyColorMode(svgContent, isMonochrome, colorMode, iconColor, grayscaleLightness = 100) {
     // Handle simple string modes first
     if (colorMode === 'original') {
         return svgContent;
@@ -111,10 +117,10 @@ export function applyColorMode(svgContent, isMonochrome, colorMode, iconColor) {
         // Replace currentColor with iconColor before transforming
         const resolvedColor = color === 'currentColor' ? iconColor : color;
         if (colorMode === 'grayscale') {
-            return toGrayscale(resolvedColor);
+            return toGrayscale(resolvedColor, grayscaleLightness);
         }
         if (colorMode === 'grayscale-tint') {
-            return toGrayscaleTint(resolvedColor, iconColor);
+            return toGrayscaleTint(resolvedColor, iconColor, grayscaleLightness);
         }
         // Object mode: { hue, saturation? }
         if (typeof colorMode === 'object') {

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;