triiiceratops 0.8.1 → 0.9.0

package/dist/theme/colorUtils.js

@@ -0,0 +1,196 @@
+/**
+ * Color conversion utilities for DaisyUI theming.
+ * DaisyUI v5 uses oklch color format for all theme colors.
+ * The conversion functions were largely generated by Opus 4.5
+ */
+/**
+ * Parse a hex color string to RGB values (0-255)
+ */
+function parseHex(hex) {
+    // Remove # prefix if present
+    hex = hex.replace(/^#/, '');
+    var r, g, b;
+    if (hex.length === 3) {
+        // Short form #rgb
+        r = parseInt(hex[0] + hex[0], 16);
+        g = parseInt(hex[1] + hex[1], 16);
+        b = parseInt(hex[2] + hex[2], 16);
+    }
+    else if (hex.length === 6 || hex.length === 8) {
+        // Full form #rrggbb or #rrggbbaa (ignore alpha)
+        r = parseInt(hex.slice(0, 2), 16);
+        g = parseInt(hex.slice(2, 4), 16);
+        b = parseInt(hex.slice(4, 6), 16);
+    }
+    else {
+        return null;
+    }
+    if (isNaN(r) || isNaN(g) || isNaN(b)) {
+        return null;
+    }
+    return { r: r, g: g, b: b };
+}
+/**
+ * Parse an rgb() or rgba() color string to RGB values (0-255)
+ */
+function parseRgb(rgb) {
+    // Match rgb(r, g, b) or rgba(r, g, b, a) or modern rgb(r g b) / rgb(r g b / a)
+    var match = rgb.match(/rgba?\(\s*(\d+(?:\.\d+)?%?)\s*[,\s]\s*(\d+(?:\.\d+)?%?)\s*[,\s]\s*(\d+(?:\.\d+)?%?)(?:\s*[,/]\s*(\d*\.?\d+%?))?\s*\)/i);
+    if (!match)
+        return null;
+    var parseValue = function (val) {
+        if (val.endsWith('%')) {
+            return (parseFloat(val) / 100) * 255;
+        }
+        return parseFloat(val);
+    };
+    var r = parseValue(match[1]);
+    var g = parseValue(match[2]);
+    var b = parseValue(match[3]);
+    if (isNaN(r) || isNaN(g) || isNaN(b)) {
+        return null;
+    }
+    return { r: r, g: g, b: b };
+}
+/**
+ * Convert sRGB to linear RGB
+ */
+function srgbToLinear(c) {
+    var v = c / 255;
+    return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+}
+/**
+ * Convert linear RGB to XYZ (D65 illuminant)
+ */
+function linearRgbToXyz(r, g, b) {
+    return {
+        x: 0.4124564 * r + 0.3575761 * g + 0.1804375 * b,
+        y: 0.2126729 * r + 0.7151522 * g + 0.072175 * b,
+        z: 0.0193339 * r + 0.119192 * g + 0.9503041 * b,
+    };
+}
+/**
+ * Convert XYZ to OKLAB
+ * Using the standard OKLAB transformation matrices
+ */
+function xyzToOklab(x, y, z) {
+    // XYZ to LMS (using OKLAB's M1 matrix)
+    var l = 0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z;
+    var m = 0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z;
+    var s = 0.0482003018 * x + 0.2643662691 * y + 0.633851707 * z;
+    // Cube root
+    var l_ = Math.cbrt(l);
+    var m_ = Math.cbrt(m);
+    var s_ = Math.cbrt(s);
+    // LMS to OKLAB (using OKLAB's M2 matrix)
+    return {
+        L: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
+        a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
+        b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_,
+    };
+}
+/**
+ * Convert OKLAB to OKLCH
+ */
+function oklabToOklch(L, a, b) {
+    var C = Math.sqrt(a * a + b * b);
+    var h = (Math.atan2(b, a) * 180) / Math.PI;
+    if (h < 0)
+        h += 360;
+    return { L: L, C: C, h: h };
+}
+/**
+ * Convert RGB (0-255) to OKLCH
+ */
+function rgbToOklch(r, g, b) {
+    // sRGB to linear RGB
+    var lr = srgbToLinear(r);
+    var lg = srgbToLinear(g);
+    var lb = srgbToLinear(b);
+    // Linear RGB to XYZ
+    var _a = linearRgbToXyz(lr, lg, lb), x = _a.x, y = _a.y, z = _a.z;
+    // XYZ to OKLAB
+    var _b = xyzToOklab(x, y, z), L = _b.L, a = _b.a, labB = _b.b;
+    // OKLAB to OKLCH
+    return oklabToOklch(L, a, labB);
+}
+/**
+ * Format OKLCH values as a CSS oklch() string
+ * @param L - Lightness (0-1)
+ * @param C - Chroma (typically 0-0.4)
+ * @param h - Hue (0-360)
+ */
+function formatOklch(L, C, h) {
+    // L as percentage, C as decimal, h in degrees
+    var lPercent = (L * 100).toFixed(2);
+    var cValue = C.toFixed(4);
+    var hValue = C < 0.0001 ? 0 : h.toFixed(2); // For achromatic colors, hue is meaningless
+    return "oklch(".concat(lPercent, "% ").concat(cValue, " ").concat(hValue, ")");
+}
+/**
+ * Check if a string is already in oklch format
+ */
+export function isOklch(value) {
+    return value.trim().toLowerCase().startsWith('oklch(');
+}
+/**
+ * Check if a string is a hex color
+ */
+export function isHex(value) {
+    return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(value.trim());
+}
+/**
+ * Check if a string is an rgb() or rgba() color
+ */
+export function isRgb(value) {
+    return /^rgba?\s*\(/i.test(value.trim());
+}
+/**
+ * Convert hex color to oklch format for DaisyUI
+ * @param hex - Color in hex format (#rgb, #rrggbb, or #rrggbbaa)
+ * @returns oklch string like "oklch(65.00% 0.2000 250.00)"
+ */
+export function hexToOklch(hex) {
+    var rgb = parseHex(hex);
+    if (!rgb) {
+        console.warn("Invalid hex color: ".concat(hex, ", returning as-is"));
+        return hex;
+    }
+    var _a = rgbToOklch(rgb.r, rgb.g, rgb.b), L = _a.L, C = _a.C, h = _a.h;
+    return formatOklch(L, C, h);
+}
+/**
+ * Convert rgb() color to oklch format for DaisyUI
+ * @param rgb - Color in rgb(r, g, b) or rgba(r, g, b, a) format
+ * @returns oklch string like "oklch(65.00% 0.2000 250.00)"
+ */
+export function rgbToOklchString(rgb) {
+    var parsed = parseRgb(rgb);
+    if (!parsed) {
+        console.warn("Invalid rgb color: ".concat(rgb, ", returning as-is"));
+        return rgb;
+    }
+    var _a = rgbToOklch(parsed.r, parsed.g, parsed.b), L = _a.L, C = _a.C, h = _a.h;
+    return formatOklch(L, C, h);
+}
+/**
+ * Normalize color input - accepts hex, rgb(), or oklch()
+ * Converts hex and rgb to oklch format for DaisyUI compatibility.
+ * @param color - Color in any supported format
+ * @returns oklch string or original value if already oklch
+ */
+export function normalizeColor(color) {
+    var trimmed = color.trim();
+    if (isOklch(trimmed)) {
+        return trimmed;
+    }
+    if (isHex(trimmed)) {
+        return hexToOklch(trimmed);
+    }
+    if (isRgb(trimmed)) {
+        return rgbToOklchString(trimmed);
+    }
+    // Pass through as-is (could be a CSS variable, named color, etc.)
+    console.warn("Unrecognized color format: ".concat(color, ", passing through as-is"));
+    return color;
+}

package/dist/theme/colorUtils.test.d.ts

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

package/dist/theme/colorUtils.test.js

@@ -0,0 +1,90 @@
+import { describe, it, expect } from 'vitest';
+import { hexToOklch, normalizeColor, isOklch, isHex, isRgb, } from './colorUtils';
+describe('colorUtils', function () {
+    describe('isHex', function () {
+        it('should return true for valid hex colors', function () {
+            expect(isHex('#fff')).toBe(true);
+            expect(isHex('#FFF')).toBe(true);
+            expect(isHex('#ffffff')).toBe(true);
+            expect(isHex('#FFFFFF')).toBe(true);
+            expect(isHex('#3b82f6')).toBe(true);
+            expect(isHex('#3B82F6')).toBe(true);
+            expect(isHex('#3b82f6ff')).toBe(true); // with alpha
+        });
+        it('should return false for invalid hex colors', function () {
+            expect(isHex('fff')).toBe(false);
+            expect(isHex('#ff')).toBe(false);
+            expect(isHex('#ffff')).toBe(false);
+            expect(isHex('#fffff')).toBe(false);
+            expect(isHex('rgb(255, 255, 255)')).toBe(false);
+            expect(isHex('oklch(50% 0.2 250)')).toBe(false);
+        });
+    });
+    describe('isRgb', function () {
+        it('should return true for valid rgb colors', function () {
+            expect(isRgb('rgb(255, 255, 255)')).toBe(true);
+            expect(isRgb('rgb(0, 0, 0)')).toBe(true);
+            expect(isRgb('rgba(255, 255, 255, 0.5)')).toBe(true);
+            expect(isRgb('rgb(59 130 246)')).toBe(true); // modern syntax
+        });
+        it('should return false for non-rgb colors', function () {
+            expect(isRgb('#fff')).toBe(false);
+            expect(isRgb('oklch(50% 0.2 250)')).toBe(false);
+        });
+    });
+    describe('isOklch', function () {
+        it('should return true for oklch colors', function () {
+            expect(isOklch('oklch(50% 0.2 250)')).toBe(true);
+            expect(isOklch('OKLCH(50% 0.2 250)')).toBe(true);
+            expect(isOklch('  oklch(50% 0.2 250)  ')).toBe(true);
+        });
+        it('should return false for non-oklch colors', function () {
+            expect(isOklch('#fff')).toBe(false);
+            expect(isOklch('rgb(255, 255, 255)')).toBe(false);
+        });
+    });
+    describe('hexToOklch', function () {
+        it('should convert black correctly', function () {
+            var result = hexToOklch('#000000');
+            expect(result).toMatch(/^oklch\(0\.00%/);
+        });
+        it('should convert white correctly', function () {
+            var result = hexToOklch('#ffffff');
+            // White should have high lightness and low chroma
+            expect(result).toMatch(/^oklch\(100\.00%/);
+        });
+        it('should convert primary blue correctly', function () {
+            var result = hexToOklch('#3b82f6');
+            // Should produce a valid oklch string
+            expect(result).toMatch(/^oklch\(\d+\.\d+% \d+\.\d+ \d+\.\d+\)$/);
+        });
+        it('should handle short hex notation', function () {
+            var result = hexToOklch('#fff');
+            expect(result).toMatch(/^oklch\(100\.00%/);
+        });
+        it('should handle hex with alpha (ignoring alpha)', function () {
+            var result = hexToOklch('#3b82f680');
+            // Should produce same result as without alpha
+            expect(result).toMatch(/^oklch\(\d+\.\d+% \d+\.\d+ \d+\.\d+\)$/);
+        });
+    });
+    describe('normalizeColor', function () {
+        it('should pass through oklch colors unchanged', function () {
+            var oklch = 'oklch(65.00% 0.2000 250.00)';
+            expect(normalizeColor(oklch)).toBe(oklch);
+        });
+        it('should convert hex to oklch', function () {
+            var result = normalizeColor('#3b82f6');
+            expect(result).toMatch(/^oklch\(/);
+        });
+        it('should convert rgb to oklch', function () {
+            var result = normalizeColor('rgb(59, 130, 246)');
+            expect(result).toMatch(/^oklch\(/);
+        });
+        it('should pass through unknown formats with warning', function () {
+            // Named colors, CSS variables, etc. should pass through
+            var result = normalizeColor('var(--some-color)');
+            expect(result).toBe('var(--some-color)');
+        });
+    });
+});

package/dist/theme/index.js

@@ -0,0 +1,52 @@
+/**
+ * Theme customization for Triiiceratops viewer.
+ *
+ * This module provides utilities for customizing DaisyUI themes.
+ *
+ * @example Setting a built-in theme
+ * ```html
+ * <triiiceratops-viewer manifest-id="..." theme="dark"></triiiceratops-viewer>
+ * ```
+ *
+ * @example Custom theme configuration (web component)
+ * ```html
+ * <triiiceratops-viewer
+ *   manifest-id="..."
+ *   theme="light"
+ *   theme-config='{"primary":"#3b82f6","radiusBox":"0.5rem"}'
+ * ></triiiceratops-viewer>
+ * ```
+ *
+ * @example Custom theme configuration (JavaScript)
+ * ```javascript
+ * const viewer = document.querySelector('triiiceratops-viewer');
+ * viewer.theme = 'dark';
+ * viewer.themeConfig = {
+ *   primary: '#3b82f6',
+ *   secondary: '#8b5cf6',
+ *   radiusBox: '0.75rem',
+ *   border: '2px',
+ * };
+ * ```
+ *
+ * @example Svelte component
+ * ```svelte
+ * <script>
+ *   import { TriiiceratopsViewer } from 'triiiceratops';
+ *   import { MediaQuery } from 'svelte/reactivity';
+ *
+ *   const prefersDark = new MediaQuery('(prefers-color-scheme: dark)');
+ * </script>
+ *
+ * <TriiiceratopsViewer
+ *   manifestId="..."
+ *   theme={prefersDark.current ? 'dark' : 'light'}
+ *   themeConfig={{ primary: '#0ea5e9' }}
+ * />
+ * ```
+ */
+export { DAISYUI_THEMES } from './types';
+// Theme manager utilities
+export { applyTheme, applyBuiltInTheme, applyThemeConfig, clearThemeConfig, isBuiltInTheme, parseThemeConfig, getThemeCssVariables, getThemePropertyNames, } from './themeManager';
+// Color utilities
+export { hexToOklch, normalizeColor, isOklch, isHex, isRgb, } from './colorUtils';

package/dist/{src/lib/theme → theme}/themeManager.d.ts

@@ -1,4 +1,7 @@
-import { ThemeConfig, DaisyUITheme } from './types';
+/**
+ * Theme manager for applying DaisyUI themes and custom theme configurations.
+ */
+import type { ThemeConfig, DaisyUITheme } from './types';
 /**
  * Check if a string is a valid built-in DaisyUI theme name
  */

package/dist/theme/themeManager.js

@@ -0,0 +1,177 @@
+/**
+ * Theme manager for applying DaisyUI themes and custom theme configurations.
+ */
+import { DAISYUI_THEMES } from './types';
+import { normalizeColor } from './colorUtils';
+/**
+ * Map friendly ThemeConfig property names to DaisyUI CSS variable names
+ */
+var CSS_VAR_MAP = {
+    // Semantic colors
+    primary: '--color-primary',
+    primaryContent: '--color-primary-content',
+    secondary: '--color-secondary',
+    secondaryContent: '--color-secondary-content',
+    accent: '--color-accent',
+    accentContent: '--color-accent-content',
+    neutral: '--color-neutral',
+    neutralContent: '--color-neutral-content',
+    // Base colors
+    base100: '--color-base-100',
+    base200: '--color-base-200',
+    base300: '--color-base-300',
+    baseContent: '--color-base-content',
+    // State colors
+    info: '--color-info',
+    infoContent: '--color-info-content',
+    success: '--color-success',
+    successContent: '--color-success-content',
+    warning: '--color-warning',
+    warningContent: '--color-warning-content',
+    error: '--color-error',
+    errorContent: '--color-error-content',
+    // Border radius
+    radiusBox: '--radius-box',
+    radiusField: '--radius-field',
+    radiusSelector: '--radius-selector',
+    // Sizing
+    sizeSelector: '--size-selector',
+    sizeField: '--size-field',
+    // Border
+    border: '--border',
+    // Effects
+    depth: '--depth',
+    noise: '--noise',
+    // Color scheme (handled specially, not a CSS variable)
+    colorScheme: 'color-scheme',
+};
+/**
+ * Set of properties that are colors and need oklch conversion
+ */
+var COLOR_PROPS = new Set([
+    'primary',
+    'primaryContent',
+    'secondary',
+    'secondaryContent',
+    'accent',
+    'accentContent',
+    'neutral',
+    'neutralContent',
+    'base100',
+    'base200',
+    'base300',
+    'baseContent',
+    'info',
+    'infoContent',
+    'success',
+    'successContent',
+    'warning',
+    'warningContent',
+    'error',
+    'errorContent',
+]);
+/**
+ * Check if a string is a valid built-in DaisyUI theme name
+ */
+export function isBuiltInTheme(theme) {
+    return DAISYUI_THEMES.includes(theme);
+}
+/**
+ * Apply a built-in theme to an element by setting data-theme attribute
+ */
+export function applyBuiltInTheme(element, theme) {
+    element.setAttribute('data-theme', theme);
+}
+/**
+ * Apply custom theme configuration as CSS custom properties on an element.
+ * These override the base theme's values.
+ */
+export function applyThemeConfig(element, config) {
+    for (var _i = 0, _a = Object.entries(config); _i < _a.length; _i++) {
+        var _b = _a[_i], key = _b[0], value = _b[1];
+        if (value === undefined || value === null)
+            continue;
+        var propKey = key;
+        // Handle colorScheme specially - it's not a CSS variable
+        if (propKey === 'colorScheme') {
+            element.style.colorScheme = value;
+            continue;
+        }
+        var cssVar = CSS_VAR_MAP[propKey];
+        if (!cssVar)
+            continue;
+        var cssValue = String(value);
+        // Convert colors to oklch format
+        if (COLOR_PROPS.has(propKey)) {
+            cssValue = normalizeColor(cssValue);
+        }
+        element.style.setProperty(cssVar, cssValue);
+    }
+}
+/**
+ * Clear all custom theme CSS variables from an element
+ */
+export function clearThemeConfig(element) {
+    for (var _i = 0, _a = Object.entries(CSS_VAR_MAP); _i < _a.length; _i++) {
+        var _b = _a[_i], key = _b[0], cssVar = _b[1];
+        if (key === 'colorScheme') {
+            element.style.colorScheme = '';
+        }
+        else {
+            element.style.removeProperty(cssVar);
+        }
+    }
+}
+/**
+ * Parse a theme config from a JSON string (for HTML attribute usage)
+ */
+export function parseThemeConfig(json) {
+    try {
+        var parsed = JSON.parse(json);
+        if (typeof parsed === 'object' && parsed !== null) {
+            return parsed;
+        }
+        return null;
+    }
+    catch (_a) {
+        return null;
+    }
+}
+/**
+ * Apply theme to an element.
+ *
+ * @param element - The HTML element to apply the theme to
+ * @param theme - Built-in theme name (defaults to light/dark based on prefers-color-scheme)
+ * @param config - Optional custom theme configuration to override the base theme
+ * @param prefersDark - Whether the user prefers dark mode (from media query)
+ */
+export function applyTheme(element, theme, config) {
+    if (theme) {
+        // Apply the requested theme
+        applyBuiltInTheme(element, theme);
+    }
+    else {
+        // If no theme specified, remove the attribute to allow inheritance
+        element.removeAttribute('data-theme');
+    }
+    // Clear any previous custom config
+    if (!config) {
+        clearThemeConfig(element);
+    }
+    else {
+        // Apply custom config overrides
+        applyThemeConfig(element, config);
+    }
+}
+/**
+ * Get all CSS variable names that can be customized
+ */
+export function getThemeCssVariables() {
+    return Object.values(CSS_VAR_MAP).filter(function (v) { return v !== 'color-scheme'; });
+}
+/**
+ * Get all customizable theme property names
+ */
+export function getThemePropertyNames() {
+    return Object.keys(CSS_VAR_MAP);
+}

package/dist/theme/types.js

@@ -0,0 +1,40 @@
+/**
+ * List of all built-in DaisyUI themes for runtime validation
+ */
+export var DAISYUI_THEMES = [
+    'light',
+    'dark',
+    'cupcake',
+    'bumblebee',
+    'emerald',
+    'corporate',
+    'synthwave',
+    'retro',
+    'cyberpunk',
+    'valentine',
+    'halloween',
+    'garden',
+    'forest',
+    'aqua',
+    'lofi',
+    'pastel',
+    'fantasy',
+    'wireframe',
+    'black',
+    'luxury',
+    'dracula',
+    'cmyk',
+    'autumn',
+    'business',
+    'acid',
+    'lemonade',
+    'night',
+    'coffee',
+    'winter',
+    'dim',
+    'nord',
+    'sunset',
+    'caramellatte',
+    'abyss',
+    'silk',
+];