@symbo.ls/scratch 3.8.8 → 3.14.0

package/index.js

@@ -0,0 +1 @@
+export * from './src/index.js'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "3.8.8",
+  "version": "3.14.0",
   "files": [
     "dist",
     "*.js",
@@ -10,15 +10,13 @@
   ],
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
-  "module": "./dist/esm/index.js",
+  "module": "./index.js",
   "unpkg": "./dist/iife/index.js",
   "jsdelivr": "./dist/iife/index.js",
-  "main": "./dist/cjs/index.js",
+  "main": "./index.js",
   "exports": {
-    ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    }
+    ".": "./index.js",
+    "./package.json": "./package.json"
   },
   "source": "src/index.js",
   "publishConfig": {
@@ -26,18 +24,17 @@
   },
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild $(find src -name '*.js') --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
-    "build:cjs": "cross-env NODE_ENV=$NODE_ENV esbuild $(find src -name '*.js') --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
-    "build:iife": "cross-env NODE_ENV=$NODE_ENV esbuild src/index.js --bundle --target=es2020 --format=iife --global-name=SmblsScratch --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:esm": "NODE_ENV=$NODE_ENV esbuild $(find src -name '*.js') --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:cjs": "NODE_ENV=$NODE_ENV esbuild $(find src -name '*.js') --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:iife": "NODE_ENV=$NODE_ENV esbuild src/index.js --bundle --target=es2020 --format=iife --global-name=SmblsScratch --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV",
     "build": "node ../../build/build.js",
     "prepublish": "npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/utils": "^3.8.8",
-    "@symbo.ls/smbls-utils": "^3.8.8",
+    "@symbo.ls/utils": "^3.14.0",
     "color-contrast-checker": "^1.5.0"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
-  "browser": "./dist/esm/index.js",
-  "sideEffects": false
+  "browser": "./index.js",
+  "sideEffects": true
 }

package/src/defaultConfig/class.js

@@ -2,4 +2,5 @@
 
 const defaultProps = {}
 
-export const CLASS = defaultProps
+// 'class' is a reserved word — export as named alias
+export { defaultProps as class }

package/src/defaultConfig/font-family.js

@@ -6,10 +6,10 @@ var defaultFont = { // eslint-disable-line
   type: ''
 }
 
-export const font_family = {}
-export const font_family_types = {
+export const fontFamily = {}
+export const fontFamilyTypes = {
   'sans-serif': 'Helvetica, Arial, sans-serif, --system-default',
   serif: 'Times New Roman, Georgia, serif, --system-default',
   monospace: 'Courier New, monospace, --system-default'
 }
-export const font_face = {}
+export const fontFace = {}

package/src/defaultConfig/icons.js

@@ -1,4 +1,4 @@
 'use strict'
 
 export const icons = {}
-export const semantic_icons = {}
+export const semanticIcons = {}

package/src/defaultConfig/svg.js

@@ -1,4 +1,4 @@
 'use strict'
 
 export const svg = {}
-export const svg_data = {}
+export const svgData = {}

package/src/defaultConfig/timing.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { sequence } from './sequence'
+import { sequence } from './sequence.js'
 
 const defaultProps = {
   default: 150,

package/src/factory.js

@@ -5,28 +5,24 @@ import {
   deepMerge,
   isDefined,
   isObject
-} from '@domql/utils'
-import * as CONF from './defaultConfig'
+} from '@symbo.ls/utils'
+import * as CONF from './defaultConfig/index.js'
 
-export const CSS_VARS = {}
-export const CSS_MEDIA_VARS = {}
+export const cssVars = {}
+export const cssMediaVars = {}
 
-// Build CONFIG with lowercase/camelCase keys as canonical + UPPERCASE backward compat aliases
+// Build CONFIG with lowercase/camelCase keys as canonical
 const _CONF = CONF
 const _confLower = {}
-const toCamel = (s) => s.replace(/_([a-z])/g, (_, c) => c.toUpperCase())
-const toUpper = (s) => s.replace(/([A-Z])/g, '_$1').toUpperCase()
+export const toCamel = (s) => s.replace(/_([a-z])/g, (_, c) => c.toUpperCase())
 for (const key in _CONF) {
   const lower = key.toLowerCase()
   _confLower[lower] = _CONF[key]
-  // camelCase alias (e.g. font_family -> fontFamily, semantic_icons -> semanticIcons)
+  // camelCase alias (e.g. font_family -> fontFamily, semanticIcons -> semanticIcons)
   const camel = toCamel(lower)
   if (camel !== lower) _confLower[camel] = _CONF[key]
   // keep original key if different from lower
   if (lower !== key) _confLower[key] = _CONF[key]
-  // backward compat: add UPPERCASE alias (e.g. typography -> TYPOGRAPHY, fontFamily -> FONT_FAMILY)
-  const upper = toUpper(key)
-  if (upper !== key) _confLower[upper] = _CONF[key]
 }
 
 export const CONFIG = {
@@ -34,8 +30,11 @@ export const CONFIG = {
   useVariable: true,
   useReset: true,
   globalTheme: 'auto',
-  CSS_VARS,
-  CSS_MEDIA_VARS,
+  cssVars,
+  cssMediaVars,
+  CSS_VARS: cssVars,
+  CSS_MEDIA_VARS: cssMediaVars,
+  _scratchConfig: true,
   ..._confLower
 }
 
@@ -51,7 +50,21 @@ export const activateConfig = (def) => {
   return FACTORY[def || FACTORY.active]
 }
 
+// Config stack for context-local resolution
+// When processing an element, its context.designSystem is pushed
+// so all getActiveConfig() calls resolve to the right config
+const configStack = []
+
+export const pushConfig = (config) => {
+  if (config && config._scratchConfig) configStack.push(config)
+}
+
+export const popConfig = () => {
+  configStack.pop()
+}
+
 export const getActiveConfig = (def) => {
+  if (configStack.length) return configStack[configStack.length - 1]
   return FACTORY[def || FACTORY.active] || CONFIG
 }
 
@@ -61,3 +74,62 @@ export const setActiveConfig = (newConfig) => {
   FACTORY['1'] = deepMerge(newConfig, deepClone(cachedConfig))
   return newConfig
 }
+
+// App-level flags that should NOT be inherited by isolated configs
+const APP_FLAGS = [
+  'useReset', 'useVariable', 'useFontImport', 'useIconSprite',
+  'useSvgSprite', 'useDocumentTheme', 'useDefaultIcons', 'useDefaultConfig',
+  'verbose', 'globalTheme'
+]
+
+// Keep case-variant aliases pointing to the same object. `factory.js`
+// bootstrap wires these as shared refs, but `deepClone` in `createConfig`
+// breaks the sharing and a later `deepMerge` only writes into one spelling
+// — downstream code that destructures a different spelling then reads
+// stale data (e.g. `applyDocument` reads `fontFamily` while `setValue`
+// writes to `fontfamily`, leaving `DOCUMENT.fontFamily` unset).
+const ALIAS_GROUPS = [
+  ['fontfamily', 'fontFamily', 'font_family'],
+  ['fontfamilytypes', 'fontFamilyTypes'],
+  ['semanticicons', 'semanticIcons'],
+  ['svgdata', 'svgData']
+]
+const aliasCaseVariants = (cfg) => {
+  for (const vs of ALIAS_GROUPS) {
+    let merged
+    for (const v of vs) {
+      const val = cfg[v]
+      if (!isObject(val)) continue
+      merged = merged ? deepMerge(val, merged) : val
+    }
+    if (!merged) continue
+    for (const v of vs) if (isObject(cfg[v])) cfg[v] = merged
+  }
+}
+
+export const createConfig = (name, overrides, { cleanBase = false } = {}) => {
+  // Secondary apps inheriting the primary app's processed config used to
+  // drag primary-specific tokens (e.g. an editor's brand themes like
+  // `sepia`, `canvas-card`) into the secondary's design system — breaking
+  // iframe isolation. When `cleanBase: true` is passed, clone the initial
+  // framework cache instead so the secondary starts from the same blank
+  // slate as the primary did. Legacy callers (no option) keep the old
+  // active-inherit behavior for backward compatibility.
+  const activeBase = cleanBase ? null : getActiveConfig()
+  const base = deepClone(
+    !cleanBase && activeBase && activeBase._scratchConfig ? activeBase : cachedConfig
+  )
+  // Remove app-level flags — they must come from overrides explicitly
+  for (const flag of APP_FLAGS) {
+    delete base[flag]
+  }
+  const cfg = deepMerge(overrides || {}, base)
+  cfg.cssVars = {}
+  cfg.cssMediaVars = {}
+  cfg.CSS_VARS = cfg.cssVars
+  cfg.CSS_MEDIA_VARS = cfg.cssMediaVars
+  cfg._scratchConfig = true
+  aliasCaseVariants(cfg)
+  if (name) FACTORY[name] = cfg
+  return cfg
+}

package/src/index.js

@@ -1,13 +1,24 @@
 'use strict'
 
+// Note on the dual-form imports below: each `./X/index.js` is referenced
+// twice in this file — once as a namespace import, once as a barrel
+// re-export. That dual reference is load-bearing for parcel's optimizer:
+// if a directory is only seen via barrel `export *` here AND via
+// `import * as` in a different file (as factory.js does for
+// ./defaultConfig), parcel collapses the dep-map entry to the bare
+// directory form and marks it `false`, breaking runtime `require` for
+// the explicit `/index.js` path. Keeping the namespace import in this
+// file alongside the barrel forces parcel to track both forms.
+
 import * as scratchUtils from './utils/index.js'
 import * as scratchSystem from './system/index.js'
+import * as scratchDefaultConfig from './defaultConfig/index.js'
 
 export * from './factory.js'
-export * from './defaultConfig'
-export * from './system'
-export * from './utils'
-export * from './transforms'
+export * from './defaultConfig/index.js'
+export * from './system/index.js'
+export * from './utils/index.js'
+export * from './transforms/index.js'
 export * from './set.js'
 
-export { scratchUtils, scratchSystem }
+export { scratchUtils, scratchSystem, scratchDefaultConfig }

package/src/set.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { FACTORY, getActiveConfig, setActiveConfig } from './factory.js' // eslint-disable-line no-unused-vars
+import { FACTORY, getActiveConfig, setActiveConfig, toCamel } from './factory.js' // eslint-disable-line no-unused-vars
 import {
   setColor,
   setGradient,
@@ -15,32 +15,36 @@ import {
   applyTimingSequence,
   applyDocument,
   setShadow
-} from './system'
+} from './system/index.js'
 
-import { deepMerge } from '@domql/utils'
+import { deepMerge, isObject, isArray } from '@symbo.ls/utils'
 
 const setVars = (val, key) => {
   const CONFIG = getActiveConfig()
-  const { CSS_VARS } = CONFIG
+  const { cssVars } = CONFIG
   const varName = key.startsWith('--') ? key : `--${key}`
-  CSS_VARS[varName] = val
+  cssVars[varName] = val
   return val
 }
 
 const asIs = (val) => val
 
+// `toCamel` (imported above) normalises snake_case designSystem keys
+// (e.g. `font_family` → `fontFamily`) before transformer dispatch — callers
+// can use either casing without needing to register both variants here.
+
 export const VALUE_TRANSFORMERS = {
   color: setColor,
   gradient: setGradient,
   font: setFont,
-  font_family: setFontFamily,
+  fontFamily: setFontFamily,
   fontfamily: setFontFamily,
   theme: setTheme,
   icons: setSvgIcon,
-  semantic_icons: asIs,
+  semanticIcons: asIs,
   semanticicons: asIs,
   svg: setSVG,
-  svg_data: asIs,
+  svgData: asIs,
   typography: asIs,
   shadow: setShadow,
   spacing: asIs,
@@ -63,13 +67,15 @@ export const VALUE_TRANSFORMERS = {
  */
 export const setValue = (factoryName, value, key) => {
   const CONFIG = getActiveConfig()
-  const lowerName = factoryName.toLowerCase()
-  const FACTORY = CONFIG[lowerName] || CONFIG[factoryName]
+  const camelName = toCamel(factoryName)
+  const lowerName = camelName.toLowerCase()
+  const FACTORY = CONFIG[camelName] || CONFIG[lowerName] || CONFIG[factoryName]
 
-  if (VALUE_TRANSFORMERS[lowerName]) {
+  const transformer = VALUE_TRANSFORMERS[camelName] || VALUE_TRANSFORMERS[lowerName]
+  if (transformer) {
     try {
-      const result = VALUE_TRANSFORMERS[lowerName](value, key)
-      FACTORY[key] = result
+      const result = transformer(value, key)
+      if (FACTORY) FACTORY[key] = result
       return FACTORY
     } catch (error) {
       if (CONFIG.verbose)
@@ -84,7 +90,16 @@ export const setValue = (factoryName, value, key) => {
 export const setEach = (factoryName, props) => {
   const CONFIG = getActiveConfig()
   const lowerName = factoryName.toLowerCase()
-  const keys = Object.keys(props)
+  // Process primitive (string/number) values before composite (array/object)
+  // ones so composite values can dereference primitives by name. Without this
+  // ordering, a color like `selectedDay: ['--blue .12', '--blue .18']` could
+  // be processed before `blue` itself was registered in CONFIG.color, leaving
+  // refColor undefined and falling back to CSS keyword resolution.
+  const keys = Object.keys(props).sort((a, b) => {
+    const aComposite = isObject(props[a]) || isArray(props[a]) ? 1 : 0
+    const bComposite = isObject(props[b]) || isArray(props[b]) ? 1 : 0
+    return aComposite - bComposite
+  })
 
   keys.forEach((key) => {
     try {
@@ -105,49 +120,90 @@ export const setEach = (factoryName, props) => {
   return CONFIG[lowerName] || CONFIG[factoryName]
 }
 
-export const changeGlobalTheme = (newTheme) => {
-  const CONFIG = getActiveConfig()
+export const changeGlobalTheme = (newTheme, targetConfig) => {
+  // Accept an explicit config so scoped code (inside pushConfig) can
+  // target the right app's theme without relying on the stack timing.
+  const CONFIG = targetConfig || getActiveConfig()
   CONFIG.globalTheme = newTheme
 
-  // Set data-theme attribute on document element for CSS selector-based theming
-  if (typeof document !== 'undefined' && newTheme && newTheme !== 'auto') {
-    document.documentElement.setAttribute('data-theme', newTheme)
-  }
-
-  // Clear theme-related CSS vars
-  for (const key in CONFIG.CSS_VARS) {
-    if (key.startsWith('--theme-')) delete CONFIG.CSS_VARS[key]
+  // Apply the theme on the scope root. For a single-design-system page we
+  // write to `<html>`; multiple design systems on the same page each carry
+  // their own root element (set by the caller on CONFIG.themeRoot), so the
+  // attribute is applied there and leaves the rest of the document alone.
+  //
+  // `'auto'` switches to OS-driven mode: we resolve the current
+  // `prefers-color-scheme` and register (once) a listener so later OS
+  // changes flip the attribute live.
+  // Resolve the target document from the config, not the global `document`.
+  // In a multi-app setup the CONFIG belongs to an iframe — its themeRoot is
+  // inside iframe doc, and its stylesheets live in iframe doc. Reading
+  // global `document` here flips the parent's data-theme attribute instead.
+  // `CONFIG.document` is also a factory bucket (font/theme defaults consumed
+  // by `applyDocument`); only treat it as a DOM document override if it
+  // actually looks like one.
+  const configDoc = CONFIG.document && CONFIG.document.documentElement ? CONFIG.document : null
+  const targetDoc = configDoc || (typeof document !== 'undefined' ? document : null)
+  const targetWin = (targetDoc && targetDoc.defaultView) || (typeof window !== 'undefined' ? window : null)
+  if (targetDoc) {
+    const root = CONFIG.themeRoot || targetDoc.documentElement
+    const forced = newTheme && newTheme !== 'auto'
+    if (forced) {
+      root.setAttribute('data-theme', newTheme)
+      // Mirror `data-theme` into CSS `color-scheme` so Chrome stops
+      // forcibly re-rendering form controls (buttons, inputs, selects) in
+      // the opposite scheme of the design system. Only the standard
+      // `dark`/`light` schemes map to a UA color-scheme; custom schemes
+      // (sepia etc.) fall back to `light dark` so the browser picks by OS.
+      if (newTheme === 'dark' || newTheme === 'light') {
+        root.style.colorScheme = newTheme
+      } else {
+        root.style.colorScheme = 'light dark'
+      }
+    } else if (targetWin && targetWin.matchMedia) {
+      const apply = (mq) => { root.setAttribute('data-theme', mq.matches ? 'dark' : 'light') }
+      const mq = targetWin.matchMedia('(prefers-color-scheme: dark)')
+      apply(mq)
+      root.style.colorScheme = 'light dark'
+      if (!CONFIG.__prefersListener) {
+        CONFIG.__prefersListener = apply
+        try { mq.addEventListener('change', apply) } catch (e) { mq.addListener(apply) }
+      }
+    } else {
+      root.setAttribute('data-theme', 'light')
+      root.style.colorScheme = 'light'
+    }
   }
 
-  // Clear all CSS_MEDIA_VARS (media queries + data-theme selectors)
-  for (const key in CONFIG.CSS_MEDIA_VARS) {
-    delete CONFIG.CSS_MEDIA_VARS[key]
+  // Clear theme-related CSS vars (with or without varPrefix)
+  const themeVarPrefix = CONFIG.varPrefix ? `--${CONFIG.varPrefix}-theme-` : '--theme-'
+  for (const key in CONFIG.cssVars) {
+    if (key.startsWith(themeVarPrefix)) delete CONFIG.cssVars[key]
   }
 
-  // Re-process themes from original definitions (not mutated processed ones)
-  const source = CONFIG._originalTheme || CONFIG.theme
-  if (source) {
-    // Deep clone to avoid re-mutating the originals
-    const fresh = JSON.parse(JSON.stringify(source))
-    CONFIG.theme = fresh
-    setEach('theme', fresh)
+  // Clear all cssMediaVars (media queries + data-theme selectors)
+  for (const key in CONFIG.cssMediaVars) {
+    delete CONFIG.cssMediaVars[key]
   }
 
-  // Apply updated CSS vars to the existing :root stylesheet rule
-  if (typeof document !== 'undefined' && CONFIG.CSS_VARS) {
-    const sheets = document.styleSheets
+  // Apply updated CSS vars to the config's scoped stylesheet rule
+  // (`:root` for the primary app, `[data-smbls-app="<key>"]` for secondary apps).
+  if (targetDoc && CONFIG.cssVars) {
+    const targetSelector = CONFIG.scopeSelector || ':root'
+    const sheets = targetDoc.styleSheets
     for (let i = 0; i < sheets.length; i++) {
       try {
         const rules = sheets[i].cssRules
         for (let j = 0; j < rules.length; j++) {
-          if (rules[j].selectorText === ':root') {
-            for (const key in CONFIG.CSS_VARS) {
-              rules[j].style.setProperty(key, CONFIG.CSS_VARS[key])
+          if (rules[j].selectorText === targetSelector) {
+            for (const key in CONFIG.cssVars) {
+              rules[j].style.setProperty(key, CONFIG.cssVars[key])
             }
             return CONFIG
           }
         }
-      } catch (e) { /* cross-origin stylesheet */ }
+      } catch (e) {
+        /* cross-origin stylesheet */
+      }
     }
   }
 
@@ -157,7 +213,10 @@ export const changeGlobalTheme = (newTheme) => {
 const SET_OPTIONS = {}
 
 export const set = (recivedConfig, options = SET_OPTIONS) => {
-  let CONFIG = getActiveConfig()
+  // Accept an explicit config instance via options.config so callers
+  // (e.g. renderProject for an embedded app) can operate on an isolated
+  // config without touching the global singleton.
+  let CONFIG = options.config || getActiveConfig()
 
   const {
     version,
@@ -168,12 +227,12 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
     useFontImport,
     useIconSprite,
     globalTheme,
+    themeRoot,
     useDocumentTheme,
     useDefaultConfig,
     semanticIcons,
-    SEMANTIC_ICONS, // deprecated
-    semantic_icons,
     files,
+    assets,
     ...config
   } = recivedConfig
 
@@ -182,6 +241,7 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   }
 
   if (files !== undefined) CONFIG.files = files
+  if (assets !== undefined) CONFIG.assets = assets
   if (verbose !== undefined) CONFIG.verbose = verbose
   if (useVariable !== undefined) CONFIG.useVariable = useVariable
   if (useReset !== undefined) CONFIG.useReset = useReset
@@ -190,23 +250,51 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   if (useIconSprite !== undefined) CONFIG.useIconSprite = useIconSprite
   if (useDocumentTheme !== undefined) CONFIG.useDocumentTheme = useDocumentTheme
   if (globalTheme !== undefined) CONFIG.globalTheme = globalTheme
+  if (themeRoot !== undefined) CONFIG.themeRoot = themeRoot
   if (recivedConfig.useThemeSuffixedVars !== undefined)
     CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars
   if (useDefaultConfig !== undefined) CONFIG.useDefaultConfig = useDefaultConfig
-  const _semanticIcons = semanticIcons || SEMANTIC_ICONS || semantic_icons
-  if (_semanticIcons !== undefined) {
-    CONFIG.semantic_icons = _semanticIcons
-    CONFIG.semanticIcons = CONFIG.semantic_icons
-    CONFIG.SEMANTIC_ICONS = CONFIG.semantic_icons // backward compat alias
-  }
+  if (semanticIcons !== undefined) CONFIG.semanticIcons = semanticIcons
   if (CONFIG.verbose) console.log(CONFIG)
 
-  // Set data-theme attribute on document for CSS selector-based theming
-  if (typeof document !== 'undefined' && CONFIG.globalTheme && CONFIG.globalTheme !== 'auto') {
-    document.documentElement.setAttribute('data-theme', CONFIG.globalTheme)
+  // Apply `data-theme` to the scope root so CSS selectors resolve correctly.
+  // `auto` means "follow the OS": we read `prefers-color-scheme` and install
+  // a one-time listener so a later OS toggle flips `data-theme` live without
+  // reloading the page. Forced themes (`'dark'`, `'light'`, or any custom
+  // scheme name like `'ocean'`) stick until the user calls
+  // `changeGlobalTheme(...)` again.
+  // `CONFIG.document` is also a factory bucket (font/theme defaults consumed
+  // by `applyDocument`); only treat it as a DOM document override if it
+  // actually looks like one.
+  const setConfigDoc = CONFIG.document && CONFIG.document.documentElement ? CONFIG.document : null
+  const setTargetDoc = setConfigDoc || (typeof document !== 'undefined' ? document : null)
+  const setTargetWin = (setTargetDoc && setTargetDoc.defaultView) || (typeof window !== 'undefined' ? window : null)
+  const setRoot = setTargetDoc && (CONFIG.themeRoot || setTargetDoc.documentElement)
+  if (setRoot && typeof setRoot.setAttribute === 'function') {
+    const forced = CONFIG.globalTheme && CONFIG.globalTheme !== 'auto'
+    if (forced) {
+      setRoot.setAttribute('data-theme', CONFIG.globalTheme)
+      if (CONFIG.globalTheme === 'dark' || CONFIG.globalTheme === 'light') {
+        setRoot.style.colorScheme = CONFIG.globalTheme
+      } else {
+        setRoot.style.colorScheme = 'light dark'
+      }
+    } else if (setTargetWin && setTargetWin.matchMedia) {
+      const apply = (mq) => { setRoot.setAttribute('data-theme', mq.matches ? 'dark' : 'light') }
+      const mq = setTargetWin.matchMedia('(prefers-color-scheme: dark)')
+      apply(mq)
+      setRoot.style.colorScheme = 'light dark'
+      if (!CONFIG.__prefersListener) {
+        CONFIG.__prefersListener = apply
+        try { mq.addEventListener('change', apply) } catch (e) { mq.addListener(apply) }
+      }
+    } else {
+      setRoot.setAttribute('data-theme', 'light')
+      setRoot.style.colorScheme = 'light'
+    }
   }
 
-  if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {}
+  if (!CONFIG.__svgCache) CONFIG.__svgCache = {}
 
   const keys = Object.keys(config)
   const keySet = new Set(keys)
@@ -219,11 +307,6 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
     }
   })
 
-  // Store original theme definitions before processing mutates them
-  if (config.theme && !CONFIG._originalTheme) {
-    CONFIG._originalTheme = JSON.parse(JSON.stringify(config.theme))
-  }
-
   // Process only lowercase keys (skip UPPERCASE when lowercase equivalent exists)
   keys.map((key) => {
     const lower = key.toLowerCase()
@@ -231,22 +314,29 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
     return setEach(key, config[key])
   })
 
+  // Propagate varPrefix to sequence sub-configs for CSS variable name isolation
+  if (CONFIG.varPrefix) {
+    if (CONFIG.typography) CONFIG.typography.varPrefix = CONFIG.varPrefix
+    if (CONFIG.spacing) CONFIG.spacing.varPrefix = CONFIG.varPrefix
+    if (CONFIG.timing) CONFIG.timing.varPrefix = CONFIG.varPrefix
+  }
+
   // apply generic configs
-  if (config.typography || config.TYPOGRAPHY) { // UPPERCASE deprecated
+  if (config.typography) {
     try {
       applyTypographySequence()
     } catch (e) {
       if (CONFIG.verbose) console.warn('Error applying typography sequence', e)
     }
   }
-  if (config.spacing || config.SPACING) { // UPPERCASE deprecated
+  if (config.spacing) {
     try {
       applySpacingSequence()
     } catch (e) {
       if (CONFIG.verbose) console.warn('Error applying spacing sequence', e)
     }
   }
-  if (config.timing || config.TIMING) { // UPPERCASE deprecated
+  if (config.timing) {
     try {
       applyTimingSequence()
     } catch (e) {
@@ -254,7 +344,10 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
     }
   }
   applyDocument()
-  applyReset()
+  // Capture so init.js injects the full html/body reset (with default
+  // font-family); dropping the return leaves CONFIG.reset as the bare seed.
+  const computedReset = applyReset()
+  if (computedReset) CONFIG.reset = computedReset
 
   return CONFIG
 }