@ankhorage/surface 0.2.4 → 1.0.0

package/dist/primitives/icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,SAAS,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,SAAS,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,QAAqB,EACrB,IAAU,EACV,KAAc,EACd,KAAK,EACL,MAAM,GACP,EAAE,SAAS;;;;;;8CAaX"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,YAAY,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAC9C,KAAK,CAAC,EAAE,MAAM,YAAY,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,QAAqB,EACrB,IAAU,EACV,KAAc,EACd,KAAK,EACL,MAAM,GACP,EAAE,SAAS;;;;;;8CAaX"}

package/dist/primitives/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/primitives/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkC,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAatE,MAAM,UAAU,IAAI,CAAC,EACnB,IAAI,EACJ,QAAQ,GAAG,UAAU,EACrB,IAAI,GAAG,GAAG,EACV,KAAK,GAAG,MAAM,EACd,KAAK,EACL,MAAM,GACI;IACV,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,aAAa,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACzF,MAAM,aAAa,GAAG,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAExD,OAAO,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE;QACxC,KAAK,EAAE,aAAa;QACpB,IAAI;QACJ,IAAI,EAAE,YAAY;QAClB,KAAK;QACL,MAAM;KACP,CAAC,CAAC;AACL,CAAC","sourcesContent":["import React from 'react';\nimport { type StyleProp, type TextStyle } from 'react-native';\n\nimport { resolveToken } from '../../theme/resolveToken';\nimport { useTheme } from '../../theme/ThemeContext';\nimport type { AnkhTheme } from '../../theme/types';\nimport { resolveExpoIconComponent } from './resolveExpoIconComponent';\n\nexport type IconProvider = string;\n\nexport interface IconProps {\n  name: string;\n  provider?: IconProvider;\n  size?: keyof AnkhTheme['spacing'] | number;\n  color?: keyof AnkhTheme['colors'] | string;\n  style?: StyleProp<TextStyle>;\n  testID?: string;\n}\n\nexport function Icon({\n  name,\n  provider = 'Ionicons',\n  size = 'm',\n  color = 'text',\n  style,\n  testID,\n}: IconProps) {\n  const { theme } = useTheme();\n  const IconComponent = resolveExpoIconComponent(provider);\n  const resolvedSize = typeof size === 'number' ? size : resolveToken(theme.spacing, size);\n  const resolvedColor = resolveToken(theme.colors, color);\n\n  return React.createElement(IconComponent, {\n    color: resolvedColor,\n    name,\n    size: resolvedSize,\n    style,\n    testID,\n  });\n}\n"]}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/primitives/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkC,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAatE,MAAM,UAAU,IAAI,CAAC,EACnB,IAAI,EACJ,QAAQ,GAAG,UAAU,EACrB,IAAI,GAAG,GAAG,EACV,KAAK,GAAG,MAAM,EACd,KAAK,EACL,MAAM,GACI;IACV,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,aAAa,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACzF,MAAM,aAAa,GAAG,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAExD,OAAO,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE;QACxC,KAAK,EAAE,aAAa;QACpB,IAAI;QACJ,IAAI,EAAE,YAAY;QAClB,KAAK;QACL,MAAM;KACP,CAAC,CAAC;AACL,CAAC","sourcesContent":["import React from 'react';\nimport { type StyleProp, type TextStyle } from 'react-native';\n\nimport { resolveToken } from '../../theme/resolveToken';\nimport { useTheme } from '../../theme/ThemeContext';\nimport type { SurfaceTheme } from '../../theme/types';\nimport { resolveExpoIconComponent } from './resolveExpoIconComponent';\n\nexport type IconProvider = string;\n\nexport interface IconProps {\n  name: string;\n  provider?: IconProvider;\n  size?: keyof SurfaceTheme['spacing'] | number;\n  color?: keyof SurfaceTheme['colors'] | string;\n  style?: StyleProp<TextStyle>;\n  testID?: string;\n}\n\nexport function Icon({\n  name,\n  provider = 'Ionicons',\n  size = 'm',\n  color = 'text',\n  style,\n  testID,\n}: IconProps) {\n  const { theme } = useTheme();\n  const IconComponent = resolveExpoIconComponent(provider);\n  const resolvedSize = typeof size === 'number' ? size : resolveToken(theme.spacing, size);\n  const resolvedColor = resolveToken(theme.colors, color);\n\n  return React.createElement(IconComponent, {\n    color: resolvedColor,\n    name,\n    size: resolvedSize,\n    style,\n    testID,\n  });\n}\n"]}

package/dist/theme/ThemeContext.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { AnkhTheme, ThemeConfig } from './types';
+import type { SurfaceTheme, ThemeConfig } from './types';
 export declare const ThemeContext: React.Context<{
-    theme: AnkhTheme;
+    theme: SurfaceTheme;
     mode: "light" | "dark";
     setThemeConfig: (config: Partial<ThemeConfig>) => void;
     setMode: (mode: "light" | "dark") => void;
@@ -13,7 +13,7 @@ export declare const ThemeProvider: ({ children, initialConfig, initialMode, }:
     initialMode?: "light" | "dark";
 }) => React.JSX.Element;
 export declare const useTheme: () => {
-    theme: AnkhTheme;
+    theme: SurfaceTheme;
     mode: "light" | "dark";
     setThemeConfig: (config: Partial<ThemeConfig>) => void;
     setMode: (mode: "light" | "dark") => void;

package/dist/theme/ThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAQlE,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAItD,eAAO,MAAM,YAAY;WAChB,SAAS;UACV,OAAO,GAAG,MAAM;oBACN,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI;aAC7C,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI;mBAC1B,OAAO;EAWtB,CAAC;AAEH,eAAO,MAAM,aAAa,GAAI,2CAI3B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC,sBA0CA,CAAC;AAEF,eAAO,MAAM,QAAQ;WArEZ,SAAS;UACV,OAAO,GAAG,MAAM;oBACN,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI;aAC7C,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI;mBAC1B,OAAO;CAmEvB,CAAC;AAEF,eAAO,MAAM,cAAc,iBAvEA,OAAO,CAAC,WAAW,CAAC,KAAK,IA0EnD,CAAC;AAEF,eAAO,MAAM,YAAY;;oBA3EP,OAAO,GAAG,MAAM,KAAK,IAAI;CA8E1C,CAAC"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAQlE,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAIzD,eAAO,MAAM,YAAY;WAChB,YAAY;UACb,OAAO,GAAG,MAAM;oBACN,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI;aAC7C,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI;mBAC1B,OAAO;EAWtB,CAAC;AAEH,eAAO,MAAM,aAAa,GAAI,2CAI3B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC,sBA0CA,CAAC;AAEF,eAAO,MAAM,QAAQ;WArEZ,YAAY;UACb,OAAO,GAAG,MAAM;oBACN,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI;aAC7C,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI;mBAC1B,OAAO;CAmEvB,CAAC;AAEF,eAAO,MAAM,cAAc,iBAvEA,OAAO,CAAC,WAAW,CAAC,KAAK,IA0EnD,CAAC;AAEF,eAAO,MAAM,YAAY;;oBA3EP,OAAO,GAAG,MAAM,KAAK,IAAI;CA8E1C,CAAC"}

package/dist/theme/ThemeContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.js","sourceRoot":"","sources":["../../src/theme/ThemeContext.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, useContext, useMemo } from 'react';\n\nimport { useFontContext } from '../context/FontContext';\nimport { ResponsiveProvider } from '../core/responsive/ResponsiveProvider';\nimport { OverlayProvider } from '../internal/overlay/OverlayProvider';\nimport { isDeepEqual } from '../utils/deepEqual';\nimport { deepMerge } from '../utils/deepMerge';\nimport { createTheme } from './createTheme';\nimport type { AnkhTheme, ThemeConfig } from './types';\n\nconst defaultTheme = createTheme();\n\nexport const ThemeContext = createContext<{\n  theme: AnkhTheme;\n  mode: 'light' | 'dark';\n  setThemeConfig: (config: Partial<ThemeConfig>) => void;\n  setMode: (mode: 'light' | 'dark') => void;\n  _hasProvider?: boolean;\n}>({\n  theme: defaultTheme,\n  mode: 'light',\n  setThemeConfig: () => {\n    /* fallback */\n  },\n  setMode: () => {\n    /* fallback */\n  },\n  _hasProvider: false,\n});\n\nexport const ThemeProvider = ({\n  children,\n  initialConfig,\n  initialMode = 'light',\n}: {\n  children: React.ReactNode;\n  initialConfig?: Partial<ThemeConfig>;\n  initialMode?: 'light' | 'dark';\n}) => {\n  const [config, setConfig] = React.useState<ThemeConfig>(() =>\n    initialConfig ? deepMerge(defaultTheme.config, initialConfig) : defaultTheme.config,\n  );\n  const [mode, setMode] = React.useState<'light' | 'dark'>(initialMode);\n  const { activeFontId } = useFontContext();\n\n  // Keep state in sync with prop for real-time Studio updates\n  React.useEffect(() => {\n    if (initialConfig) {\n      setConfig((prev) => {\n        const merged = deepMerge(prev, initialConfig);\n        if (isDeepEqual(prev, merged)) return prev;\n        return merged;\n      });\n    }\n  }, [initialConfig]);\n\n  const theme = useMemo(\n    () => createTheme(config, mode, activeFontId),\n    [config, mode, activeFontId],\n  );\n\n  const value = useMemo(\n    () => ({\n      theme,\n      mode,\n      setThemeConfig: (newConfig: Partial<ThemeConfig>) =>\n        setConfig((prev) => deepMerge(prev, newConfig)),\n      setMode,\n      _hasProvider: true,\n    }),\n    [theme, mode],\n  );\n\n  return (\n    <ResponsiveProvider>\n      <ThemeContext.Provider value={value}>\n        <OverlayProvider>{children}</OverlayProvider>\n      </ThemeContext.Provider>\n    </ResponsiveProvider>\n  );\n};\n\nexport const useTheme = () => {\n  return useContext(ThemeContext);\n};\n\nexport const useThemeConfig = () => {\n  const { setThemeConfig } = useTheme();\n  return setThemeConfig;\n};\n\nexport const useThemeMode = () => {\n  const { mode, setMode } = useTheme();\n  return { mode, setMode };\n};\n"]}
+{"version":3,"file":"ThemeContext.js","sourceRoot":"","sources":["../../src/theme/ThemeContext.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, useContext, useMemo } from 'react';\n\nimport { useFontContext } from '../context/FontContext';\nimport { ResponsiveProvider } from '../core/responsive/ResponsiveProvider';\nimport { OverlayProvider } from '../internal/overlay/OverlayProvider';\nimport { isDeepEqual } from '../utils/deepEqual';\nimport { deepMerge } from '../utils/deepMerge';\nimport { createTheme } from './createTheme';\nimport type { SurfaceTheme, ThemeConfig } from './types';\n\nconst defaultTheme = createTheme();\n\nexport const ThemeContext = createContext<{\n  theme: SurfaceTheme;\n  mode: 'light' | 'dark';\n  setThemeConfig: (config: Partial<ThemeConfig>) => void;\n  setMode: (mode: 'light' | 'dark') => void;\n  _hasProvider?: boolean;\n}>({\n  theme: defaultTheme,\n  mode: 'light',\n  setThemeConfig: () => {\n    /* fallback */\n  },\n  setMode: () => {\n    /* fallback */\n  },\n  _hasProvider: false,\n});\n\nexport const ThemeProvider = ({\n  children,\n  initialConfig,\n  initialMode = 'light',\n}: {\n  children: React.ReactNode;\n  initialConfig?: Partial<ThemeConfig>;\n  initialMode?: 'light' | 'dark';\n}) => {\n  const [config, setConfig] = React.useState<ThemeConfig>(() =>\n    initialConfig ? deepMerge(defaultTheme.config, initialConfig) : defaultTheme.config,\n  );\n  const [mode, setMode] = React.useState<'light' | 'dark'>(initialMode);\n  const { activeFontId } = useFontContext();\n\n  // Keep state in sync with prop for real-time Studio updates\n  React.useEffect(() => {\n    if (initialConfig) {\n      setConfig((prev) => {\n        const merged = deepMerge(prev, initialConfig);\n        if (isDeepEqual(prev, merged)) return prev;\n        return merged;\n      });\n    }\n  }, [initialConfig]);\n\n  const theme = useMemo(\n    () => createTheme(config, mode, activeFontId),\n    [config, mode, activeFontId],\n  );\n\n  const value = useMemo(\n    () => ({\n      theme,\n      mode,\n      setThemeConfig: (newConfig: Partial<ThemeConfig>) =>\n        setConfig((prev) => deepMerge(prev, newConfig)),\n      setMode,\n      _hasProvider: true,\n    }),\n    [theme, mode],\n  );\n\n  return (\n    <ResponsiveProvider>\n      <ThemeContext.Provider value={value}>\n        <OverlayProvider>{children}</OverlayProvider>\n      </ThemeContext.Provider>\n    </ResponsiveProvider>\n  );\n};\n\nexport const useTheme = () => {\n  return useContext(ThemeContext);\n};\n\nexport const useThemeConfig = () => {\n  const { setThemeConfig } = useTheme();\n  return setThemeConfig;\n};\n\nexport const useThemeMode = () => {\n  const { mode, setMode } = useTheme();\n  return { mode, setMode };\n};\n"]}

package/dist/theme/colorEngine.d.ts

@@ -1,16 +1,15 @@
-import type { ColorScale, ThemeConfig, ThemeSemantics } from './types';
-interface OklchColor {
-    mode: 'oklch';
-    l: number;
-    c: number;
-    h?: number;
-}
-export declare const SCALE_STEPS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-export declare function generateColorScale(baseColor: OklchColor, isDark: boolean): ColorScale;
+import type { GeneratedThemeModeColors, GeneratedThemeSwatches, HexColor, SemanticColorReferenceMap, SemanticColorToken } from '@ankhorage/color-theory';
+import type { ThemeConfig } from '@ankhorage/contracts';
+import type { ThemeSemantics } from './types';
+/**
+ * Surface semantic resolver: maps color-theory SemanticColorToken references
+ * to hex values from the generated swatches.
+ */
+export type SurfaceSemanticColors = Record<SemanticColorToken, HexColor>;
+export declare function resolveSemanticColors(generated: GeneratedThemeModeColors, references: SemanticColorReferenceMap): SurfaceSemanticColors;
 export declare function generatePalette(config: ThemeConfig, mode?: 'light' | 'dark'): {
     colors: Record<string, string>;
-    scales: Record<string, ColorScale>;
+    swatches: GeneratedThemeSwatches;
     semantics: ThemeSemantics;
 };
-export {};
 //# sourceMappingURL=colorEngine.d.ts.map

package/dist/theme/colorEngine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colorEngine.d.ts","sourceRoot":"","sources":["../../src/theme/colorEngine.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAIV,UAAU,EAMV,WAAW,EACX,cAAc,EACf,MAAM,SAAS,CAAC;AAIjB,UAAU,UAAU;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,WAAW,iEAAkE,CAAC;AAmH3F,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,GAAG,UAAU,CAqBrF;AAwJD,wBAAgB,eAAe,CAC7B,MAAM,EAAE,WAAW,EACnB,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B;IACD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACnC,SAAS,EAAE,cAAc,CAAC;CAC3B,CA0OA"}
+{"version":3,"file":"colorEngine.d.ts","sourceRoot":"","sources":["../../src/theme/colorEngine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,wBAAwB,EACxB,sBAAsB,EACtB,QAAQ,EACR,yBAAyB,EACzB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAOjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,KAAK,EAOV,cAAc,EACf,MAAM,SAAS,CAAC;AAOjB;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;AAEzE,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,wBAAwB,EACnC,UAAU,EAAE,yBAAyB,GACpC,qBAAqB,CAUvB;AA8DD,wBAAgB,eAAe,CAC7B,MAAM,EAAE,WAAW,EACnB,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B;IACD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,SAAS,EAAE,cAAc,CAAC;CAC3B,CAsFA"}

package/dist/theme/colorEngine.js

@@ -1,418 +1,94 @@
-import { formatHex, modeOklch, oklch, useMode } from 'culori';
-useMode(modeOklch);
-export const SCALE_STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-/**
- * Deterministic Lightness Curves (OKLCH L)
- */
-const LIGHTNESS_CURVES = {
-    light: [0.98, 0.95, 0.9, 0.82, 0.72, 0.62, 0.52, 0.42, 0.32, 0.22, 0.15],
-    dark: [0.12, 0.16, 0.2, 0.26, 0.34, 0.62, 0.7, 0.78, 0.86, 0.92, 0.96],
-};
-/**
- * Lightness anchors per internal palette kind
- */
-const ROLE_PALETTE_LIGHTNESS_ANCHORS = {
-    grayscale: 0.62,
-    neutral: 0.62,
-    pastel: 0.7,
-    earth: 0.55,
-    mineral: 0.58,
-    muted: 0.6,
-    jewel: 0.62,
-    fluorescent: 0.65,
-    obsidian: 0.12,
-    vaporwave: 0.7,
-    monochromeAccent: 0.62,
-};
-/**
- * Chroma curve per step to prevent "tinted whites" and "glow"
- * Peak energy at 500, falloff at extremes.
- */
-const CHROMA_BY_STEP = [0.1, 0.18, 0.3, 0.45, 0.7, 1.0, 0.92, 0.8, 0.6, 0.4, 0.25];
-/**
- * Deterministic Chroma Anchors (OKLCH C)
- */
-const ROLE_PALETTE_CHROMA_ANCHORS = {
-    grayscale: 0,
-    neutral: 0.02,
-    pastel: 0.08,
-    earth: 0.05,
-    mineral: 0.07,
-    muted: 0.04,
-    jewel: 0.16,
-    fluorescent: 0.26,
-    obsidian: 0.01,
-    vaporwave: 0.2,
-    monochromeAccent: 0.02,
-};
-/**
- * Chroma Hierarchy Rule
- */
-const CHROMA_HIERARCHY = {
-    primary: 1.0,
-    secondary: 0.7,
-    accent: 0.4,
-    surface: 0.1,
-};
-/**
- * Semantic Step Mapping
- */
-const SEMANTIC_STEPS = {
-    light: {
-        bg: 0, // 50
-        bgSubtle: 1, // 100
-        surface: 1, // 100
-        surfaceHover: 2, // 200
-        surfaceActive: 3, // 300
-        border: 3, // 300
-        borderStrong: 4, // 400
-        divider: 2, // 200
-        text: 9, // 900
-        textMuted: 7, // 700
-        textSubtle: 6, // 600
-        solid: 5, // 500
-        softBg: 1, // 100
-        softHover: 2, // 200
-        softActive: 3, // 300
-        outline: 4, // 400
-    },
-    dark: {
-        bg: 0, // 50
-        bgSubtle: 1, // 100
-        surface: 1, // 100
-        surfaceHover: 2, // 200
-        surfaceActive: 3, // 300
-        border: 3, // 300
-        borderStrong: 4, // 400
-        divider: 2, // 200
-        text: 10, // 950
-        textMuted: 8, // 800
-        textSubtle: 7, // 700
-        solid: 5, // 500
-        softBg: 1, // 100
-        softHover: 2, // 200
-        softActive: 3, // 300
-        outline: 4, // 400
-    },
-};
-export function generateColorScale(baseColor, isDark) {
-    const scale = {};
-    const curve = isDark ? LIGHTNESS_CURVES.dark : LIGHTNESS_CURVES.light;
-    // Dark-mode chroma rule: reduce chroma by 25%
-    const chromaMultiplier = isDark ? 0.75 : 1.0;
-    const targetChroma = baseColor.c * chromaMultiplier;
-    SCALE_STEPS.forEach((step, index) => {
-        const lightness = curve[index];
-        const chromaByStep = CHROMA_BY_STEP[index];
-        if (lightness === undefined || chromaByStep === undefined) {
-            return;
+import { generateColorSwatch, generateThemeModeColors, getReadableForeground, parseHexColorOrThrow, } from '@ankhorage/color-theory';
+// Fixed hex values for semantic status colors (not theme-generated)
+const DANGER_HEX = parseHexColorOrThrow('#ef4444');
+const SUCCESS_HEX = parseHexColorOrThrow('#22c55e');
+const WARNING_HEX = parseHexColorOrThrow('#f59e0b');
+export function resolveSemanticColors(generated, references) {
+    return Object.fromEntries(Object.entries(references).map(([token, ref]) => {
+        const swatch = generated.swatches[ref.role];
+        if (!swatch) {
+            throw new Error(`Missing swatch for role '${ref.role}' (token: '${token}')`);
         }
-        // Apply chroma falloff curve per step
-        const stepChroma = targetChroma * chromaByStep;
-        const stepColor = { ...baseColor, l: lightness, c: stepChroma };
-        scale[step] = formatHex(stepColor);
-    });
-    return scale;
+        return [token, swatch[ref.step]];
+    }));
 }
-/**
- * Deterministic Harmony Hues
- */
-function getHarmonyHues(baseHue, mode) {
-    const h = (baseHue + 360) % 360;
-    switch (mode) {
-        case 'monochromatic':
-            return [h];
-        case 'analogous':
-            return [h, (h - 30 + 360) % 360, (h + 30) % 360];
-        case 'complementary':
-            return [h, (h + 180) % 360];
-        case 'splitComplementary':
-            return [h, (h + 150) % 360, (h + 210) % 360];
-        case 'triadic':
-            return [h, (h + 120) % 360, (h + 240) % 360];
-        case 'tetradic':
-            return [h, (h + 90) % 360, (h + 180) % 360, (h + 270) % 360];
-        default:
-            return [h];
+function buildNeutralSemantics(neutralSwatch, isDark) {
+    if (isDark) {
+        return {
+            bg: neutralSwatch[950],
+            bgSubtle: neutralSwatch[900],
+            surface: neutralSwatch[900],
+            surfaceHover: neutralSwatch[800],
+            surfaceActive: neutralSwatch[700],
+            border: neutralSwatch[800],
+            borderStrong: neutralSwatch[600],
+            divider: neutralSwatch[800],
+            text: neutralSwatch[50],
+            textMuted: neutralSwatch[200],
+            textSubtle: neutralSwatch[300],
+        };
     }
+    return {
+        bg: neutralSwatch[50],
+        bgSubtle: neutralSwatch[100],
+        surface: neutralSwatch[100],
+        surfaceHover: neutralSwatch[200],
+        surfaceActive: neutralSwatch[300],
+        border: neutralSwatch[200],
+        borderStrong: neutralSwatch[300],
+        divider: neutralSwatch[200],
+        text: neutralSwatch[900],
+        textMuted: neutralSwatch[700],
+        textSubtle: neutralSwatch[600],
+    };
 }
-function getColorToneRolePalette(colorTone) {
-    switch (colorTone) {
-        case 'pastel':
-            return {
-                bg: 'pastel',
-                surface: 'pastel',
-                primary: 'jewel',
-                secondary: 'jewel',
-                accent: 'jewel',
-                highlight: 'fluorescent',
-            };
-        case 'earth':
-            return {
-                bg: 'earth',
-                surface: 'earth',
-                primary: 'mineral',
-                secondary: 'mineral',
-                accent: 'jewel',
-                highlight: 'jewel',
-            };
-        case 'mineral':
-            return {
-                bg: 'mineral',
-                surface: 'mineral',
-                primary: 'jewel',
-                secondary: 'mineral',
-                accent: 'jewel',
-                highlight: 'fluorescent',
-            };
-        case 'muted':
-            return {
-                bg: 'muted',
-                surface: 'muted',
-                primary: 'jewel',
-                secondary: 'muted',
-                accent: 'jewel',
-                highlight: 'fluorescent',
-            };
-        case 'jewel':
-            return {
-                bg: 'grayscale',
-                surface: 'grayscale',
-                primary: 'jewel',
-                secondary: 'jewel',
-                accent: 'jewel',
-                highlight: 'fluorescent',
-            };
-        case 'fluorescent':
-            return {
-                bg: 'obsidian',
-                surface: 'obsidian',
-                primary: 'fluorescent',
-                secondary: 'jewel',
-                accent: 'fluorescent',
-                highlight: 'fluorescent',
-            };
-        case 'obsidian':
-            return {
-                bg: 'obsidian',
-                surface: 'obsidian',
-                primary: 'fluorescent',
-                secondary: 'jewel',
-                accent: 'fluorescent',
-                highlight: 'fluorescent',
-            };
-        case 'vaporwave':
-            return {
-                bg: 'pastel',
-                surface: 'pastel',
-                primary: 'fluorescent',
-                secondary: 'jewel',
-                accent: 'fluorescent',
-                highlight: 'fluorescent',
-            };
-        case 'monochromeAccent':
-            return {
-                bg: 'grayscale',
-                surface: 'grayscale',
-                primary: 'jewel',
-                secondary: 'grayscale',
-                accent: 'jewel',
-                highlight: 'fluorescent',
-            };
-        default: // neutral
-            return {
-                bg: 'grayscale',
-                surface: 'grayscale',
-                primary: 'jewel',
-                secondary: 'pastel',
-                accent: 'jewel',
-                highlight: 'fluorescent',
-            };
+function buildRoleSemantics(swatch, isDark) {
+    const base = swatch[500];
+    const { foreground: onSolidText } = getReadableForeground(base);
+    if (isDark) {
+        return {
+            base,
+            hover: swatch[400],
+            strong: swatch[300],
+            softBg: swatch[900],
+            softHover: swatch[800],
+            softActive: swatch[700],
+            outline: swatch[500],
+            onSolidText,
+        };
     }
-}
-/**
- * Simple OKLCH L-based contrast check
- */
-function getBestContrast(solidHex, neutral50, neutral950) {
-    const solid = oklch(solidHex);
-    const n50 = oklch(neutral50);
-    const n950 = oklch(neutral950);
-    if (!solid || !n50 || !n950)
-        return neutral50;
-    const diff50 = Math.abs(solid.l - n50.l);
-    const diff950 = Math.abs(solid.l - n950.l);
-    return diff50 >= diff950 ? neutral50 : neutral950;
+    return {
+        base,
+        hover: swatch[600],
+        strong: swatch[700],
+        softBg: swatch[100],
+        softHover: swatch[200],
+        softActive: swatch[300],
+        outline: swatch[400],
+        onSolidText,
+    };
 }
 export function generatePalette(config, mode = 'light') {
     const modeConfig = mode === 'dark' ? config.dark : config.light;
-    const { primaryColor, harmony, colorTone } = modeConfig;
-    let base = oklch(primaryColor);
-    if (!base) {
-        console.warn(`[colorEngine] Invalid primary color: "${primaryColor}". Falling back to default blue.`);
-        base = oklch('#3B82F6');
-    }
-    const baseHue = base?.h ?? 0;
-    const hues = getHarmonyHues(baseHue, harmony);
-    const rolePalette = getColorToneRolePalette(colorTone);
-    // 1. Resolve Chromas
-    const getC = (t) => ROLE_PALETTE_CHROMA_ANCHORS[t];
-    const getHue = (index, fallback) => hues[index] ?? fallback;
-    const primaryChroma = getC(rolePalette.primary);
-    const secondaryChroma = getC(rolePalette.secondary) * CHROMA_HIERARCHY.secondary;
-    const tertiaryChroma = getC(rolePalette.accent) * CHROMA_HIERARCHY.accent;
-    const highlightChroma = getC(rolePalette.highlight);
-    const surfaceChroma = Math.min(0.02, getC(rolePalette.bg) * CHROMA_HIERARCHY.surface);
-    // 2. Stable Role Assignment
-    let pHue = getHue(0, baseHue);
-    let sHue = getHue(0, baseHue);
-    let aHue = getHue(0, baseHue);
-    let hHue = harmony === 'tetradic' ? getHue(3, getHue(0, baseHue)) : (getHue(0, baseHue) + 60) % 360; // Yellow-ish offset if no tetradic
-    switch (harmony) {
-        case 'complementary':
-            pHue = getHue(0, pHue);
-            aHue = getHue(1, pHue);
-            sHue = (getHue(0, pHue) + 30) % 360;
-            break;
-        case 'splitComplementary':
-        case 'triadic':
-            pHue = getHue(0, pHue);
-            sHue = getHue(1, pHue);
-            aHue = getHue(2, sHue);
-            break;
-        case 'tetradic':
-            pHue = getHue(0, pHue);
-            sHue = getHue(1, pHue);
-            aHue = getHue(2, sHue);
-            hHue = getHue(3, aHue);
-            break;
-        case 'analogous':
-            pHue = getHue(1, pHue);
-            sHue = getHue(0, pHue);
-            aHue = getHue(2, sHue);
-            break;
-    }
-    // 3. Build Bases with tuned lightness
-    const getL = (t) => ROLE_PALETTE_LIGHTNESS_ANCHORS[t];
-    const primaryBase = {
-        mode: 'oklch',
-        l: getL(rolePalette.primary),
-        c: primaryChroma,
-        h: pHue,
-    };
-    const secondaryBase = {
-        mode: 'oklch',
-        l: getL(rolePalette.secondary),
-        c: secondaryChroma,
-        h: sHue,
-    };
-    const accentBase = {
-        mode: 'oklch',
-        l: getL(rolePalette.accent),
-        c: tertiaryChroma,
-        h: aHue,
-    };
-    const highlightBase = {
-        mode: 'oklch',
-        l: getL(rolePalette.highlight),
-        c: highlightChroma,
-        h: hHue,
-    };
-    const dangerBase = {
-        mode: 'oklch',
-        l: 0.6,
-        c: 0.2,
-        h: 25,
-    };
-    const successBase = {
-        mode: 'oklch',
-        l: 0.6,
-        c: 0.2,
-        h: 145,
-    };
-    const warningBase = {
-        mode: 'oklch',
-        l: 0.75,
-        c: 0.15,
-        h: 85,
-    };
-    const neutralBase = surfaceChroma === 0
-        ? { mode: 'oklch', l: 0.62, c: 0 }
-        : { mode: 'oklch', l: 0.62, c: surfaceChroma, h: 260 };
-    // 4. Generate Scales
     const isDark = mode === 'dark';
-    const scales = {
-        primary: generateColorScale(primaryBase, isDark),
-        secondary: generateColorScale(secondaryBase, isDark),
-        accent: generateColorScale(accentBase, isDark),
-        highlight: generateColorScale(highlightBase, isDark),
-        neutral: generateColorScale(neutralBase, isDark),
-        danger: generateColorScale(dangerBase, isDark),
-        success: generateColorScale(successBase, isDark),
-        warning: generateColorScale(warningBase, isDark),
-    };
-    // 5. Mappings
-    const steps = isDark ? SEMANTIC_STEPS.dark : SEMANTIC_STEPS.light;
-    const getStep = (s, idx) => {
-        const key = SCALE_STEPS[idx] ?? SCALE_STEPS[SCALE_STEPS.length - 1] ?? 950;
-        return s[key];
-    };
-    const getNeutralMapping = (scale) => ({
-        bg: getStep(scale, steps.bg),
-        bgSubtle: getStep(scale, steps.bgSubtle),
-        surface: getStep(scale, steps.surface),
-        surfaceHover: getStep(scale, steps.surfaceHover),
-        surfaceActive: getStep(scale, steps.surfaceActive),
-        border: getStep(scale, steps.border),
-        borderStrong: getStep(scale, steps.borderStrong),
-        divider: getStep(scale, steps.divider),
-        text: getStep(scale, steps.text),
-        textMuted: getStep(scale, steps.textMuted),
-        textSubtle: getStep(scale, steps.textSubtle),
-    });
-    const getColorMapping = (scale, neutralScale) => {
-        const solid = getStep(scale, steps.solid);
-        const softChromaLimit = 0.08;
-        // Chroma capping for soft tokens
-        const getSoftStep = (idx) => {
-            const hex = getStep(scale, idx);
-            const color = oklch(hex);
-            if (color && color.c > softChromaLimit) {
-                return formatHex({ ...color, c: softChromaLimit });
-            }
-            return hex;
-        };
-        return {
-            base: solid,
-            hover: getStep(scale, 6), // 600
-            strong: getStep(scale, 7), // 700
-            softBg: getSoftStep(steps.softBg),
-            softHover: getSoftStep(steps.softHover),
-            softActive: getSoftStep(steps.softActive),
-            outline: getStep(scale, steps.outline),
-            onSolidText: getBestContrast(solid, getStep(neutralScale, 0), getStep(neutralScale, 10)),
-        };
-    };
-    const neutral = getNeutralMapping(scales.neutral);
-    const brand = getColorMapping(scales.primary, scales.neutral);
-    const neutralAction = getColorMapping(scales.neutral, scales.neutral);
-    const danger = getColorMapping(scales.danger, scales.neutral);
-    const success = getColorMapping(scales.success, scales.neutral);
-    const warning = getColorMapping(scales.warning, scales.neutral);
-    const colors = {
-        primary: getStep(scales.primary, steps.solid),
-        secondary: getStep(scales.secondary, steps.solid),
-        accent: getStep(scales.accent, steps.solid),
-        highlight: getStep(scales.highlight, steps.solid),
-        background: neutral.bg,
-        surface: neutral.surface,
-        text: neutral.text,
-        textSecondary: neutral.textMuted,
-        border: neutral.border,
-        error: getStep(scales.danger, steps.solid),
-        success: getStep(scales.success, steps.solid),
-        warning: getStep(scales.warning, steps.solid),
-    };
-    const surface = {
+    // Throws deterministically on invalid primary color
+    parseHexColorOrThrow(modeConfig.primaryColor);
+    const generated = generateThemeModeColors(modeConfig);
+    const { swatches } = generated;
+    const neutralSwatch = swatches.neutral;
+    const neutral = buildNeutralSemantics(neutralSwatch, isDark);
+    const brand = buildRoleSemantics(swatches.primary, isDark);
+    // Fallback to primary swatch for missing ordinal roles
+    const secondarySwatch = swatches.secondary ?? swatches.primary;
+    const tertiarySwatch = swatches.tertiary ?? swatches.primary;
+    const quaternarySwatch = swatches.quaternary ?? swatches.primary;
+    const dangerSwatch = generateColorSwatch(DANGER_HEX).swatch;
+    const successSwatch = generateColorSwatch(SUCCESS_HEX).swatch;
+    const warningSwatch = generateColorSwatch(WARNING_HEX).swatch;
+    const danger = buildRoleSemantics(dangerSwatch, isDark);
+    const success = buildRoleSemantics(successSwatch, isDark);
+    const warning = buildRoleSemantics(warningSwatch, isDark);
+    const surfaceSemantics = {
         default: neutral.surface,
         subtle: neutral.bgSubtle,
         raised: neutral.surface,
@@ -430,22 +106,36 @@ export function generatePalette(config, mode = 'light') {
     };
     const action = {
         primary: brand,
-        neutral: neutralAction,
+        neutral: buildRoleSemantics(neutralSwatch, isDark),
         danger,
     };
+    const colors = {
+        primary: brand.base,
+        secondary: secondarySwatch[500],
+        accent: tertiarySwatch[500],
+        highlight: quaternarySwatch[500],
+        background: neutral.bg,
+        surface: neutral.surface,
+        text: neutral.text,
+        textSecondary: neutral.textMuted,
+        border: neutral.border,
+        error: danger.base,
+        success: success.base,
+        warning: warning.base,
+    };
     return {
         colors,
-        scales,
+        swatches,
         semantics: {
             neutral,
             brand,
-            secondary: getColorMapping(scales.secondary, scales.neutral),
-            accent: getColorMapping(scales.accent, scales.neutral),
-            highlight: getColorMapping(scales.highlight, scales.neutral),
+            secondary: buildRoleSemantics(secondarySwatch, isDark),
+            accent: buildRoleSemantics(tertiarySwatch, isDark),
+            highlight: buildRoleSemantics(quaternarySwatch, isDark),
             danger,
             success,
             warning,
-            surface,
+            surface: surfaceSemantics,
             content,
             border,
             action,