@hanzo/mod 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { detectPlatform, getActivePlatform, setActivePlatform, applyPlatformTokens, PLATFORM_PROFILES, type PlatformId, type PlatformProfile, } from './platform.js';
-export { exportMod, importMod, forkMod, applyMod, saveOrgMod, getOrgMod, BUILTIN_MODS, type ModTheme, } from './theme.js';
+export { detectPlatform, getActivePlatform, setActivePlatform, applyPlatformTokens, clearPlatformTokens, PLATFORM_PROFILES, type PlatformId, type PlatformProfile, } from './platform.js';
+export { exportMod, importMod, forkMod, applyMod, restoreActiveMod, clearActiveMod, saveOrgMod, getOrgMod, BUILTIN_MODS, type ModTheme, } from './theme.js';
 export { injectCustomFont, removeCustomFont, applyFontFamily, type CustomFontOptions, } from './font.js';

package/dist/index.js

@@ -1,3 +1,3 @@
-export { detectPlatform, getActivePlatform, setActivePlatform, applyPlatformTokens, PLATFORM_PROFILES, } from './platform.js';
-export { exportMod, importMod, forkMod, applyMod, saveOrgMod, getOrgMod, BUILTIN_MODS, } from './theme.js';
+export { detectPlatform, getActivePlatform, setActivePlatform, applyPlatformTokens, clearPlatformTokens, PLATFORM_PROFILES, } from './platform.js';
+export { exportMod, importMod, forkMod, applyMod, restoreActiveMod, clearActiveMod, saveOrgMod, getOrgMod, BUILTIN_MODS, } from './theme.js';
 export { injectCustomFont, removeCustomFont, applyFontFamily, } from './font.js';

package/dist/platform.d.ts

@@ -26,6 +26,8 @@ export declare const PLATFORM_PROFILES: Record<PlatformId, PlatformProfile>;
 export declare function detectPlatform(userAgent?: string): PlatformId;
 /** Reads the user's active platform preference (stored or detected) */
 export declare function getActivePlatform(): PlatformId;
+/** Clears inline platform token overrides from documentElement */
+export declare function clearPlatformTokens(): void;
 /** Sets the user's preferred platform customization */
 export declare function setActivePlatform(platform: PlatformId | 'auto'): void;
 /** Statically stamps the platform CSS custom properties onto documentElement */

package/dist/platform.js

@@ -101,6 +101,30 @@ export function getActivePlatform() {
     }
     return detectPlatform();
 }
+const PLATFORM_CSS_VARS = [
+    '--platform-font-sans',
+    '--platform-font-mono',
+    '--platform-radius-card',
+    '--platform-radius-pill',
+    '--glass-blur',
+    '--glass-saturate',
+    '--font-sans',
+    '--font-display',
+    '--font-mono',
+    '--pane-round',
+    '--radius-scale',
+    '--chrome-blur',
+    '--pane-blur',
+];
+/** Clears inline platform token overrides from documentElement */
+export function clearPlatformTokens() {
+    if (typeof document === 'undefined')
+        return;
+    const root = document.documentElement;
+    for (const prop of PLATFORM_CSS_VARS) {
+        root.style.removeProperty(prop);
+    }
+}
 /** Sets the user's preferred platform customization */
 export function setActivePlatform(platform) {
     if (typeof window === 'undefined')
@@ -116,7 +140,15 @@ export function setActivePlatform(platform) {
     catch {
         // ignore storage restrictions
     }
-    applyPlatformTokens(platform === 'auto' ? detectPlatform() : platform);
+    if (platform === 'auto') {
+        clearPlatformTokens();
+        if (typeof document !== 'undefined') {
+            document.documentElement.setAttribute('data-platform', detectPlatform());
+        }
+    }
+    else {
+        applyPlatformTokens(platform);
+    }
     window.dispatchEvent(new CustomEvent('hanzo:mod:change', { detail: { platform } }));
 }
 /** Statically stamps the platform CSS custom properties onto documentElement */
@@ -125,11 +157,23 @@ export function applyPlatformTokens(platform) {
         return;
     const profile = PLATFORM_PROFILES[platform] ?? PLATFORM_PROFILES.ios;
     const root = document.documentElement;
+    const radiusCardPx = typeof profile.radiusCard === 'number' ? `${profile.radiusCard}px` : profile.radiusCard;
+    const radiusPillPx = typeof profile.radiusPill === 'number' ? `${profile.radiusPill}px` : profile.radiusPill;
+    const radiusScale = typeof profile.radiusCard === 'number'
+        ? String(Math.round((profile.radiusCard / 12) * 100) / 100)
+        : '1';
     root.setAttribute('data-platform', profile.id);
     root.style.setProperty('--platform-font-sans', profile.fontFamily);
     root.style.setProperty('--platform-font-mono', profile.fontMono);
-    root.style.setProperty('--platform-radius-card', typeof profile.radiusCard === 'number' ? `${profile.radiusCard}px` : profile.radiusCard);
-    root.style.setProperty('--platform-radius-pill', typeof profile.radiusPill === 'number' ? `${profile.radiusPill}px` : profile.radiusPill);
+    root.style.setProperty('--platform-radius-card', radiusCardPx);
+    root.style.setProperty('--platform-radius-pill', radiusPillPx);
     root.style.setProperty('--glass-blur', `${profile.glassBlur}px`);
     root.style.setProperty('--glass-saturate', `${profile.glassSaturate}%`);
+    root.style.setProperty('--font-sans', `var(--font-arabic), ${profile.fontFamily}`);
+    root.style.setProperty('--font-display', `var(--font-arabic), ${profile.fontFamily}`);
+    root.style.setProperty('--font-mono', `var(--font-arabic), ${profile.fontMono}`);
+    root.style.setProperty('--pane-round', radiusCardPx);
+    root.style.setProperty('--radius-scale', radiusScale);
+    root.style.setProperty('--chrome-blur', `${profile.glassBlur}px`);
+    root.style.setProperty('--pane-blur', `${Math.round(profile.glassBlur * 1.5)}px`);
 }

package/dist/theme.d.ts

@@ -6,6 +6,10 @@ export interface ModTheme {
     author?: string;
     org?: string;
     platform?: PlatformId;
+    theme?: 'light' | 'dark' | 'system';
+    background?: string;
+    surface?: string;
+    foreground?: string;
     fontHeading?: string;
     fontBody?: string;
     fontMono?: string;
@@ -27,6 +31,10 @@ export declare function importMod(json: string): ModTheme;
 export declare function forkMod(base: ModTheme, overrides: Partial<ModTheme>): ModTheme;
 /** Applies a theme mod dynamically to the page */
 export declare function applyMod(mod: ModTheme): void;
+/** Restores and applies the persisted active mod (or org mod) if present */
+export declare function restoreActiveMod(orgId?: string): ModTheme | null;
+/** Clears the active mod from localStorage and removes inline mod overrides */
+export declare function clearActiveMod(): void;
 /** Saves an organization-scoped mod configuration */
 export declare function saveOrgMod(orgId: string, mod: ModTheme): void;
 /** Gets the active mod for an organization */

package/dist/theme.js

@@ -1,4 +1,4 @@
-import { PLATFORM_PROFILES, applyPlatformTokens } from './platform.js';
+import { PLATFORM_PROFILES, applyPlatformTokens, clearPlatformTokens } from './platform.js';
 export const BUILTIN_MODS = [
     {
         id: 'ios-liquid',
@@ -6,6 +6,8 @@ export const BUILTIN_MODS = [
         description: 'Continuous squircles, high-specular liquid glass, and Apple SF Pro typography.',
         author: 'Hanzo Design',
         platform: 'ios',
+        theme: 'dark',
+        background: '#000000',
         glassBlur: 24,
         radius: 22,
         density: 'comfortable',
@@ -16,6 +18,8 @@ export const BUILTIN_MODS = [
         description: 'Google Material 3 tonal elevations, Roboto Sans, and smooth dynamic rounded cards.',
         author: 'Hanzo Design',
         platform: 'android',
+        theme: 'dark',
+        background: '#0b0e14',
         glassBlur: 16,
         radius: 16,
         density: 'default',
@@ -26,6 +30,8 @@ export const BUILTIN_MODS = [
         description: 'Translucent sidebars, vibrant visual effect filters, and clean desktop density.',
         author: 'Hanzo Design',
         platform: 'macos',
+        theme: 'dark',
+        background: '#09090b',
         glassBlur: 20,
         radius: 12,
         density: 'compact',
@@ -36,6 +42,8 @@ export const BUILTIN_MODS = [
         description: 'Microsoft Fluent Design Mica acrylic and Segoe UI Variable geometry.',
         author: 'Hanzo Design',
         platform: 'windows',
+        theme: 'dark',
+        background: '#0a0d12',
         glassBlur: 18,
         radius: 8,
         density: 'default',
@@ -46,6 +54,8 @@ export const BUILTIN_MODS = [
         description: 'High contrast deep OLED black with electric cyan and magenta accents.',
         author: 'Hanzo Labs',
         platform: 'ios',
+        theme: 'dark',
+        background: '#000000',
         primary: '#00f0ff',
         accent: '#ff007f',
         glassBlur: 28,
@@ -58,12 +68,28 @@ export const BUILTIN_MODS = [
         description: 'Pure arctic monochrome glass, high clarity, and minimalist typography.',
         author: 'Hanzo Design',
         platform: 'macos',
+        theme: 'dark',
+        background: '#090d16',
         primary: '#e2e8f0',
         accent: '#38bdf8',
         glassBlur: 22,
         radius: 14,
         density: 'default',
     },
+    {
+        id: 'studio-light',
+        name: 'Studio Paper (Light)',
+        description: 'Warm editorial paper ground, crisp ink typography, and subtle daylight glass.',
+        author: 'Hanzo Design',
+        platform: 'macos',
+        theme: 'light',
+        background: '#faf8f5',
+        primary: '#18181b',
+        accent: '#2563eb',
+        glassBlur: 16,
+        radius: 12,
+        density: 'default',
+    },
 ];
 const ORG_MOD_KEY = (orgId) => `hanzo.mod.org.${orgId}`;
 const ACTIVE_MOD_KEY = 'hanzo.mod.active';
@@ -84,6 +110,10 @@ export function importMod(json) {
         author: parsed.author ? String(parsed.author).slice(0, 64) : undefined,
         org: parsed.org,
         platform: parsed.platform && parsed.platform in PLATFORM_PROFILES ? parsed.platform : undefined,
+        theme: parsed.theme === 'light' || parsed.theme === 'dark' || parsed.theme === 'system' ? parsed.theme : undefined,
+        background: parsed.background,
+        surface: parsed.surface,
+        foreground: parsed.foreground,
         fontHeading: parsed.fontHeading,
         fontBody: parsed.fontBody,
         fontMono: parsed.fontMono,
@@ -106,28 +136,137 @@ export function forkMod(base, overrides) {
         name: overrides.name || `${base.name} (Mod)`,
     };
 }
+function modGroundInk(c) {
+    const m = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.exec(c.trim());
+    if (!m)
+        return '#fafafa';
+    const h = m[1].length === 3 ? m[1].replace(/./g, '$&$&') : m[1].slice(0, 6);
+    const [r, g, b] = [0, 2, 4].map((i) => {
+        const v = parseInt(h.slice(i, i + 2), 16) / 255;
+        return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.179 ? '#09090b' : '#fafafa';
+}
+const MOD_CSS_VARS = [
+    '--background',
+    '--foreground',
+    '--text-primary',
+    '--card',
+    '--surface-card',
+    '--card-foreground',
+    '--popover',
+    '--popover-foreground',
+    '--muted',
+    '--secondary',
+    '--secondary-hover',
+    '--secondary-foreground',
+    '--pane-floor',
+    '--pane-fill',
+    '--composer-fill',
+    '--composer-ground',
+    '--primary',
+    '--primary-foreground',
+    '--primary-hover',
+    '--accent',
+    '--accent-foreground',
+    '--accent-hover',
+    '--ring',
+    '--liquid-glass-bg',
+    '--glass-blur',
+    '--chrome-blur',
+    '--pane-blur',
+    '--radius',
+    '--pane-round',
+    '--radius-scale',
+    '--density',
+    '--font-heading',
+    '--font-display',
+    '--font-body',
+    '--font-sans',
+    '--font-mono',
+];
 /** Applies a theme mod dynamically to the page */
 export function applyMod(mod) {
     if (typeof document === 'undefined')
         return;
     const root = document.documentElement;
+    for (const prop of MOD_CSS_VARS) {
+        root.style.removeProperty(prop);
+    }
     if (mod.platform) {
         applyPlatformTokens(mod.platform);
     }
-    if (mod.primary)
-        root.style.setProperty('--primary', mod.primary);
-    if (mod.accent)
-        root.style.setProperty('--accent', mod.accent);
+    const effectiveTheme = mod.theme ??
+        (mod.background ? (modGroundInk(mod.background) === '#09090b' ? 'light' : 'dark') : undefined);
+    if (effectiveTheme) {
+        const night = effectiveTheme === 'dark' ||
+            (effectiveTheme === 'system' && typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: dark)').matches);
+        root.classList.toggle('light', !night);
+        root.classList.toggle('dark', night);
+        root.classList.toggle('t_light', !night);
+        root.classList.toggle('t_dark', night);
+        root.style.colorScheme = night ? 'dark' : 'light';
+        root.setAttribute('data-scheme', effectiveTheme);
+    }
+    if (mod.background) {
+        const bg = mod.background.trim();
+        const fg = mod.foreground?.trim() || modGroundInk(bg);
+        const isLight = fg === '#09090b';
+        const mixTarget = isLight ? 'black' : 'white';
+        const surface = mod.surface?.trim() || `color-mix(in oklch, ${bg} 95%, ${mixTarget})`;
+        root.style.setProperty('--background', bg);
+        root.style.setProperty('--foreground', fg);
+        root.style.setProperty('--text-primary', fg);
+        root.style.setProperty('--card', surface);
+        root.style.setProperty('--surface-card', surface);
+        root.style.setProperty('--card-foreground', fg);
+        root.style.setProperty('--popover', `color-mix(in oklch, ${bg} 92%, ${mixTarget})`);
+        root.style.setProperty('--popover-foreground', fg);
+        root.style.setProperty('--muted', `color-mix(in oklch, ${bg} 92%, ${mixTarget})`);
+        root.style.setProperty('--secondary', `color-mix(in oklch, ${bg} 90%, ${mixTarget})`);
+        root.style.setProperty('--secondary-hover', `color-mix(in oklch, ${bg} 84%, ${mixTarget})`);
+        root.style.setProperty('--secondary-foreground', fg);
+        root.style.setProperty('--pane-floor', `color-mix(in oklch, ${bg} 95%, black)`);
+        root.style.setProperty('--pane-fill', `color-mix(in oklch, ${bg} 97%, ${mixTarget})`);
+        root.style.setProperty('--composer-fill', `color-mix(in oklch, ${bg} 90%, ${mixTarget})`);
+        root.style.setProperty('--composer-ground', `color-mix(in oklch, ${bg} 90%, ${mixTarget})`);
+    }
+    const accent = mod.accent || mod.primary;
+    if (accent) {
+        const fg = modGroundInk(accent);
+        const hover = `color-mix(in oklch, ${accent} 88%, white)`;
+        root.style.setProperty('--primary', mod.primary || accent);
+        root.style.setProperty('--primary-foreground', fg);
+        root.style.setProperty('--primary-hover', hover);
+        root.style.setProperty('--accent', accent);
+        root.style.setProperty('--accent-foreground', fg);
+        root.style.setProperty('--accent-hover', hover);
+        root.style.setProperty('--ring', accent);
+    }
     if (mod.glassTint)
         root.style.setProperty('--liquid-glass-bg', mod.glassTint);
-    if (typeof mod.glassBlur === 'number')
+    if (typeof mod.glassBlur === 'number') {
         root.style.setProperty('--glass-blur', `${mod.glassBlur}px`);
-    if (typeof mod.radius === 'number')
+        root.style.setProperty('--chrome-blur', `${mod.glassBlur}px`);
+        root.style.setProperty('--pane-blur', `${Math.round(mod.glassBlur * 1.5)}px`);
+    }
+    if (typeof mod.radius === 'number') {
         root.style.setProperty('--radius', `${mod.radius}px`);
-    if (mod.fontHeading)
+        root.style.setProperty('--pane-round', `${mod.radius}px`);
+        root.style.setProperty('--radius-scale', String(Math.round((mod.radius / 12) * 100) / 100));
+    }
+    if (mod.density) {
+        const d = mod.density === 'compact' ? '0.85' : mod.density === 'comfortable' ? '1.15' : '1';
+        root.style.setProperty('--density', d);
+    }
+    if (mod.fontHeading) {
         root.style.setProperty('--font-heading', mod.fontHeading);
-    if (mod.fontBody)
+        root.style.setProperty('--font-display', mod.fontHeading);
+    }
+    if (mod.fontBody) {
         root.style.setProperty('--font-body', mod.fontBody);
+        root.style.setProperty('--font-sans', mod.fontBody);
+    }
     if (mod.fontMono)
         root.style.setProperty('--font-mono', mod.fontMono);
     // Inject custom CSS if defined
@@ -151,6 +290,48 @@ export function applyMod(mod) {
         // ignore
     }
 }
+/** Restores and applies the persisted active mod (or org mod) if present */
+export function restoreActiveMod(orgId) {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        const raw = (orgId ? window.localStorage.getItem(ORG_MOD_KEY(orgId)) : null) ||
+            window.localStorage.getItem(ACTIVE_MOD_KEY);
+        if (!raw)
+            return null;
+        const mod = JSON.parse(raw);
+        if (mod && typeof mod === 'object' && mod.name) {
+            applyMod(mod);
+            return mod;
+        }
+        return null;
+    }
+    catch {
+        return null;
+    }
+}
+/** Clears the active mod from localStorage and removes inline mod overrides */
+export function clearActiveMod() {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        window.localStorage.removeItem(ACTIVE_MOD_KEY);
+        const styleEl = document.getElementById('hanzo-custom-mod-css');
+        if (styleEl)
+            styleEl.remove();
+        if (typeof document !== 'undefined') {
+            const root = document.documentElement;
+            for (const prop of MOD_CSS_VARS) {
+                root.style.removeProperty(prop);
+            }
+            clearPlatformTokens();
+        }
+        window.dispatchEvent(new CustomEvent('hanzo:mod:cleared'));
+    }
+    catch {
+        // ignore
+    }
+}
 /** Saves an organization-scoped mod configuration */
 export function saveOrgMod(orgId, mod) {
     if (typeof window === 'undefined')

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@hanzo/mod",
-  "version": "0.1.0",
+  "version": "0.1.2",
+  "files": [
+    "dist"
+  ],
   "description": "Native OS look/feel customization, custom fonts, and mod themes for Hanzo.",
   "type": "module",
   "main": "./dist/index.js",

package/src/font.ts

@@ -1,69 +0,0 @@
-/**
- * Dynamic custom font loader and manager for organizations and designers.
- */
-
-export interface CustomFontOptions {
-  family: string
-  url: string
-  format?: 'woff2' | 'woff' | 'truetype' | 'opentype'
-  weights?: (number | string)[]
-  isStylesheet?: boolean
-}
-
-const INJECTED_FONT_PREFIX = 'hanzo-font-'
-
-/**
- * Injects a designer/organization custom font into document head dynamically.
- * Supports direct webfont stylesheets (Google Fonts, Adobe Fonts, Typekit) or @font-face binaries.
- */
-export function injectCustomFont(options: CustomFontOptions): void {
-  if (typeof document === 'undefined') return
-
-  const elementId = `${INJECTED_FONT_PREFIX}${options.family.toLowerCase().replace(/[^a-z0-9]/g, '-')}`
-  const existing = document.getElementById(elementId)
-  if (existing) existing.remove()
-
-  if (options.isStylesheet || options.url.endsWith('.css') || options.url.includes('fonts.googleapis.com')) {
-    const link = document.createElement('link')
-    link.id = elementId
-    link.rel = 'stylesheet'
-    link.href = options.url
-    document.head.appendChild(link)
-  } else {
-    const format = options.format || (options.url.endsWith('.woff2') ? 'woff2' : options.url.endsWith('.woff') ? 'woff' : 'truetype')
-    const weights = options.weights || [400, 500, 600, 700]
-
-    let fontFaceRules = ''
-    for (const w of weights) {
-      fontFaceRules += `
-        @font-face {
-          font-family: "${options.family}";
-          src: url("${options.url}") format("${format}");
-          font-weight: ${w};
-          font-style: normal;
-          font-display: swap;
-        }
-      `
-    }
-
-    const style = document.createElement('style')
-    style.id = elementId
-    style.textContent = fontFaceRules
-    document.head.appendChild(style)
-  }
-}
-
-/** Removes an injected custom font stylesheet or style tag */
-export function removeCustomFont(family: string): void {
-  if (typeof document === 'undefined') return
-  const elementId = `${INJECTED_FONT_PREFIX}${family.toLowerCase().replace(/[^a-z0-9]/g, '-')}`
-  const el = document.getElementById(elementId)
-  if (el) el.remove()
-}
-
-/** Statically applies a font-family to CSS variables */
-export function applyFontFamily(target: 'heading' | 'sans' | 'mono', fontFamily: string): void {
-  if (typeof document === 'undefined') return
-  const cssVar = target === 'heading' ? '--font-heading' : target === 'mono' ? '--font-mono' : '--font-sans'
-  document.documentElement.style.setProperty(cssVar, fontFamily)
-}

package/src/index.ts

@@ -1,27 +0,0 @@
-export {
-  detectPlatform,
-  getActivePlatform,
-  setActivePlatform,
-  applyPlatformTokens,
-  PLATFORM_PROFILES,
-  type PlatformId,
-  type PlatformProfile,
-} from './platform'
-
-export {
-  exportMod,
-  importMod,
-  forkMod,
-  applyMod,
-  saveOrgMod,
-  getOrgMod,
-  BUILTIN_MODS,
-  type ModTheme,
-} from './theme'
-
-export {
-  injectCustomFont,
-  removeCustomFont,
-  applyFontFamily,
-  type CustomFontOptions,
-} from './font'

package/src/mod.test.ts

@@ -1,41 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { detectPlatform, PLATFORM_PROFILES } from './platform'
-import { BUILTIN_MODS, exportMod, forkMod, importMod } from './theme'
-
-describe('mod system', () => {
-  it('detects platforms accurately from user agents', () => {
-    expect(detectPlatform('Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15')).toBe('ios')
-    expect(detectPlatform('Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36')).toBe('android')
-    expect(detectPlatform('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36')).toBe('macos')
-    expect(detectPlatform('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36')).toBe('windows')
-    expect(detectPlatform('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36')).toBe('linux')
-  })
-
-  it('provides platform profiles with correct typography and radius', () => {
-    expect(PLATFORM_PROFILES.ios.radiusCard).toBe(22)
-    expect(PLATFORM_PROFILES.ios.glassBlur).toBe(24)
-    expect(PLATFORM_PROFILES.android.radiusCard).toBe(16)
-    expect(PLATFORM_PROFILES.windows.radiusCard).toBe(8)
-  })
-
-  it('serializes and deserializes mods cleanly', () => {
-    const base = BUILTIN_MODS[0]
-    const json = exportMod(base)
-    const imported = importMod(json)
-    expect(imported.name).toBe(base.name)
-    expect(imported.platform).toBe(base.platform)
-  })
-
-  it('forks mods with custom designer overrides', () => {
-    const base = BUILTIN_MODS[0]
-    const forked = forkMod(base, {
-      name: 'Acme Brand Theme',
-      primary: '#10b981',
-      fontHeading: 'Cabinet Grotesk',
-    })
-    expect(forked.name).toBe('Acme Brand Theme')
-    expect(forked.primary).toBe('#10b981')
-    expect(forked.fontHeading).toBe('Cabinet Grotesk')
-    expect(forked.platform).toBe('ios')
-  })
-})

package/src/platform.test.ts

@@ -1,13 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { PLATFORM_PROFILES, type PlatformId } from './platform'
-
-describe('@hanzo/mod platform profiles', () => {
-  test('defines profiles for all major platforms', () => {
-    const platforms: PlatformId[] = ['ios', 'android', 'macos', 'windows', 'linux']
-    for (const p of platforms) {
-      expect(PLATFORM_PROFILES[p]).toBeDefined()
-      expect(PLATFORM_PROFILES[p].id).toBe(p)
-      expect(PLATFORM_PROFILES[p].fontFamily).toBeDefined()
-    }
-  })
-})

package/src/platform.ts

@@ -1,146 +0,0 @@
-/**
- * Native OS platform detection and design system adaptors for Hanzo.
- *
- * Configures native look/feel tailored to the user's OS:
- * - iOS: Continuous squircles, Liquid Glass blurs, SF Pro fonts, safe area insets, specular highlights
- * - Android: Material 3 tokens, Roboto/Google Sans, tonal elevations, ripple curves
- * - macOS: Vibrant translucent glass, compact desktop paddings
- * - Windows: Fluent/Mica acrylic glass, sharp modern geometry
- * - Linux: Clean system lines, flat modern edges
- */
-
-export type PlatformId = 'ios' | 'android' | 'macos' | 'windows' | 'linux'
-
-export interface PlatformProfile {
-  id: PlatformId
-  name: string
-  fontFamily: string
-  fontMono: string
-  radiusCard: number | string
-  radiusPill: number | string
-  glassBlur: number
-  glassSaturate: number
-  specularBorder: boolean
-  touchFeedback: 'spring' | 'ripple' | 'subtle'
-}
-
-export const PLATFORM_PROFILES: Record<PlatformId, PlatformProfile> = {
-  ios: {
-    id: 'ios',
-    name: 'Apple iOS',
-    fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", sans-serif',
-    fontMono: '"SF Mono", ui-monospace, Menlo, monospace',
-    radiusCard: 22,
-    radiusPill: 9999,
-    glassBlur: 24,
-    glassSaturate: 190,
-    specularBorder: true,
-    touchFeedback: 'spring',
-  },
-  android: {
-    id: 'android',
-    name: 'Google Android',
-    fontFamily: 'Roboto, "Google Sans", system-ui, sans-serif',
-    fontMono: '"Roboto Mono", monospace',
-    radiusCard: 16,
-    radiusPill: 16,
-    glassBlur: 16,
-    glassSaturate: 130,
-    specularBorder: false,
-    touchFeedback: 'ripple',
-  },
-  macos: {
-    id: 'macos',
-    name: 'Apple macOS',
-    fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif',
-    fontMono: '"SF Mono", Menlo, monospace',
-    radiusCard: 12,
-    radiusPill: 9999,
-    glassBlur: 20,
-    glassSaturate: 160,
-    specularBorder: true,
-    touchFeedback: 'subtle',
-  },
-  windows: {
-    id: 'windows',
-    name: 'Microsoft Windows',
-    fontFamily: '"Segoe UI Variable", "Segoe UI", system-ui, sans-serif',
-    fontMono: '"Cascadia Code", Consolas, monospace',
-    radiusCard: 8,
-    radiusPill: 9999,
-    glassBlur: 18,
-    glassSaturate: 125,
-    specularBorder: false,
-    touchFeedback: 'subtle',
-  },
-  linux: {
-    id: 'linux',
-    name: 'Linux / Desktop',
-    fontFamily: 'system-ui, -apple-system, "Cantarell", sans-serif',
-    fontMono: '"Ubuntu Mono", monospace',
-    radiusCard: 10,
-    radiusPill: 9999,
-    glassBlur: 14,
-    glassSaturate: 110,
-    specularBorder: false,
-    touchFeedback: 'subtle',
-  },
-}
-
-const STORAGE_KEY = 'hanzo.mod.platform'
-
-/** Detects the current OS platform from user agent strings */
-export function detectPlatform(userAgent?: string): PlatformId {
-  const ua = (userAgent ?? (typeof navigator !== 'undefined' ? navigator.userAgent : '')).toLowerCase()
-  if (/iphone|ipad|ipod/.test(ua) || (typeof navigator !== 'undefined' && navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) {
-    return 'ios'
-  }
-  if (/android/.test(ua)) return 'android'
-  if (/macintosh|mac os x/.test(ua)) return 'macos'
-  if (/windows|win32|win64/.test(ua)) return 'windows'
-  if (/linux|x11/.test(ua)) return 'linux'
-  return 'ios'
-}
-
-/** Reads the user's active platform preference (stored or detected) */
-export function getActivePlatform(): PlatformId {
-  if (typeof window === 'undefined') return 'ios'
-  try {
-    const kept = window.localStorage.getItem(STORAGE_KEY) as PlatformId | null
-    if (kept && kept in PLATFORM_PROFILES) return kept
-  } catch {
-    // ignore storage restrictions
-  }
-  return detectPlatform()
-}
-
-/** Sets the user's preferred platform customization */
-export function setActivePlatform(platform: PlatformId | 'auto'): void {
-  if (typeof window === 'undefined') return
-  try {
-    if (platform === 'auto') {
-      window.localStorage.removeItem(STORAGE_KEY)
-    } else {
-      window.localStorage.setItem(STORAGE_KEY, platform)
-    }
-  } catch {
-    // ignore storage restrictions
-  }
-  applyPlatformTokens(platform === 'auto' ? detectPlatform() : platform)
-  window.dispatchEvent(new CustomEvent('hanzo:mod:change', { detail: { platform } }))
-}
-
-/** Statically stamps the platform CSS custom properties onto documentElement */
-export function applyPlatformTokens(platform: PlatformId): void {
-  if (typeof document === 'undefined') return
-  const profile = PLATFORM_PROFILES[platform] ?? PLATFORM_PROFILES.ios
-  const root = document.documentElement
-
-  root.setAttribute('data-platform', profile.id)
-  root.style.setProperty('--platform-font-sans', profile.fontFamily)
-  root.style.setProperty('--platform-font-mono', profile.fontMono)
-  root.style.setProperty('--platform-radius-card', typeof profile.radiusCard === 'number' ? `${profile.radiusCard}px` : profile.radiusCard)
-  root.style.setProperty('--platform-radius-pill', typeof profile.radiusPill === 'number' ? `${profile.radiusPill}px` : profile.radiusPill)
-  root.style.setProperty('--glass-blur', `${profile.glassBlur}px`)
-  root.style.setProperty('--glass-saturate', `${profile.glassSaturate}%`)
-}

package/src/theme.ts

@@ -1,193 +0,0 @@
-import { PLATFORM_PROFILES, type PlatformId, applyPlatformTokens } from './platform'
-
-export interface ModTheme {
-  id: string
-  name: string
-  description?: string
-  author?: string
-  org?: string
-  platform?: PlatformId
-  fontHeading?: string
-  fontBody?: string
-  fontMono?: string
-  customFontUrl?: string
-  primary?: string
-  accent?: string
-  glassTint?: string
-  glassBlur?: number
-  radius?: number
-  density?: 'compact' | 'comfortable' | 'default'
-  customCss?: string
-}
-
-export const BUILTIN_MODS: ModTheme[] = [
-  {
-    id: 'ios-liquid',
-    name: 'Apple iOS Liquid',
-    description: 'Continuous squircles, high-specular liquid glass, and Apple SF Pro typography.',
-    author: 'Hanzo Design',
-    platform: 'ios',
-    glassBlur: 24,
-    radius: 22,
-    density: 'comfortable',
-  },
-  {
-    id: 'android-material',
-    name: 'Android Material 3',
-    description: 'Google Material 3 tonal elevations, Roboto Sans, and smooth dynamic rounded cards.',
-    author: 'Hanzo Design',
-    platform: 'android',
-    glassBlur: 16,
-    radius: 16,
-    density: 'default',
-  },
-  {
-    id: 'macos-vibrant',
-    name: 'macOS Vibrant',
-    description: 'Translucent sidebars, vibrant visual effect filters, and clean desktop density.',
-    author: 'Hanzo Design',
-    platform: 'macos',
-    glassBlur: 20,
-    radius: 12,
-    density: 'compact',
-  },
-  {
-    id: 'windows-fluent',
-    name: 'Windows Mica Fluent',
-    description: 'Microsoft Fluent Design Mica acrylic and Segoe UI Variable geometry.',
-    author: 'Hanzo Design',
-    platform: 'windows',
-    glassBlur: 18,
-    radius: 8,
-    density: 'default',
-  },
-  {
-    id: 'cyber-zen',
-    name: 'Cyber Zen (OLED)',
-    description: 'High contrast deep OLED black with electric cyan and magenta accents.',
-    author: 'Hanzo Labs',
-    platform: 'ios',
-    primary: '#00f0ff',
-    accent: '#ff007f',
-    glassBlur: 28,
-    radius: 20,
-    density: 'comfortable',
-  },
-  {
-    id: 'nordic-frost',
-    name: 'Nordic Frost',
-    description: 'Pure arctic monochrome glass, high clarity, and minimalist typography.',
-    author: 'Hanzo Design',
-    platform: 'macos',
-    primary: '#e2e8f0',
-    accent: '#38bdf8',
-    glassBlur: 22,
-    radius: 14,
-    density: 'default',
-  },
-]
-
-const ORG_MOD_KEY = (orgId: string) => `hanzo.mod.org.${orgId}`
-const ACTIVE_MOD_KEY = 'hanzo.mod.active'
-
-/** Serializes a theme mod to JSON for exporting/sharing */
-export function exportMod(mod: ModTheme): string {
-  return JSON.stringify(mod, null, 2)
-}
-
-/** Parses and validates an imported mod JSON string */
-export function importMod(json: string): ModTheme {
-  const parsed = JSON.parse(json) as Partial<ModTheme>
-  if (!parsed || typeof parsed !== 'object' || !parsed.name) {
-    throw new Error('Invalid Hanzo mod: missing theme name')
-  }
-  return {
-    id: parsed.id || `mod-${Date.now()}`,
-    name: String(parsed.name).slice(0, 64),
-    description: parsed.description ? String(parsed.description).slice(0, 256) : undefined,
-    author: parsed.author ? String(parsed.author).slice(0, 64) : undefined,
-    org: parsed.org,
-    platform: parsed.platform && parsed.platform in PLATFORM_PROFILES ? parsed.platform : undefined,
-    fontHeading: parsed.fontHeading,
-    fontBody: parsed.fontBody,
-    fontMono: parsed.fontMono,
-    customFontUrl: parsed.customFontUrl,
-    primary: parsed.primary,
-    accent: parsed.accent,
-    glassTint: parsed.glassTint,
-    glassBlur: typeof parsed.glassBlur === 'number' ? parsed.glassBlur : undefined,
-    radius: typeof parsed.radius === 'number' ? parsed.radius : undefined,
-    density: parsed.density,
-    customCss: parsed.customCss,
-  }
-}
-
-/** Creates a new mod derived from an existing base theme */
-export function forkMod(base: ModTheme, overrides: Partial<ModTheme>): ModTheme {
-  return {
-    ...base,
-    ...overrides,
-    id: overrides.id || `${base.id}-fork-${Date.now().toString(36)}`,
-    name: overrides.name || `${base.name} (Mod)`,
-  }
-}
-
-/** Applies a theme mod dynamically to the page */
-export function applyMod(mod: ModTheme): void {
-  if (typeof document === 'undefined') return
-  const root = document.documentElement
-
-  if (mod.platform) {
-    applyPlatformTokens(mod.platform)
-  }
-
-  if (mod.primary) root.style.setProperty('--primary', mod.primary)
-  if (mod.accent) root.style.setProperty('--accent', mod.accent)
-  if (mod.glassTint) root.style.setProperty('--liquid-glass-bg', mod.glassTint)
-  if (typeof mod.glassBlur === 'number') root.style.setProperty('--glass-blur', `${mod.glassBlur}px`)
-  if (typeof mod.radius === 'number') root.style.setProperty('--radius', `${mod.radius}px`)
-  if (mod.fontHeading) root.style.setProperty('--font-heading', mod.fontHeading)
-  if (mod.fontBody) root.style.setProperty('--font-body', mod.fontBody)
-  if (mod.fontMono) root.style.setProperty('--font-mono', mod.fontMono)
-
-  // Inject custom CSS if defined
-  let styleEl = document.getElementById('hanzo-custom-mod-css')
-  if (mod.customCss) {
-    if (!styleEl) {
-      styleEl = document.createElement('style')
-      styleEl.id = 'hanzo-custom-mod-css'
-      document.head.appendChild(styleEl)
-    }
-    styleEl.textContent = mod.customCss
-  } else if (styleEl) {
-    styleEl.remove()
-  }
-
-  try {
-    window.localStorage.setItem(ACTIVE_MOD_KEY, JSON.stringify(mod))
-    window.dispatchEvent(new CustomEvent('hanzo:mod:applied', { detail: { mod } }))
-  } catch {
-    // ignore
-  }
-}
-
-/** Saves an organization-scoped mod configuration */
-export function saveOrgMod(orgId: string, mod: ModTheme): void {
-  if (typeof window === 'undefined') return
-  try {
-    window.localStorage.setItem(ORG_MOD_KEY(orgId), JSON.stringify({ ...mod, org: orgId }))
-  } catch {
-    // ignore
-  }
-}
-
-/** Gets the active mod for an organization */
-export function getOrgMod(orgId: string): ModTheme | null {
-  if (typeof window === 'undefined') return null
-  try {
-    const raw = window.localStorage.getItem(ORG_MOD_KEY(orgId))
-    return raw ? (JSON.parse(raw) as ModTheme) : null
-  } catch {
-    return null
-  }
-}

package/tsconfig.build.json

@@ -1,11 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "noEmit": false,
-    "declaration": true,
-    "outDir": "./dist",
-    "rootDir": "./src"
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
-}

package/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "strict": false,
-    "strictNullChecks": false,
-    "noImplicitAny": false,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "types": ["node", "react"]
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
-}