@dfosco/storyboard-core 1.21.0 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard-core",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/bodyClasses.js

@@ -11,9 +11,11 @@ import { getAllParams } from './session.js'
 import { isHideMode, getAllShadows } from './hideMode.js'
 import { subscribeToHash } from './hashSubscribe.js'
 import { subscribeToStorage } from './localStorage.js'
+import { syncFlagBodyClasses } from './featureFlags.js'
 
 const PREFIX = 'sb-'
 const SCENE_PREFIX = 'sb-scene--'
+const FF_PREFIX = 'sb-ff-'
 
 /**
  * Sanitize a string for use in a CSS class name.
@@ -41,13 +43,13 @@ function overrideClass(key, value) {
 }
 
 /**
- * Get all current sb- classes on body (excluding scene classes).
+ * Get all current sb- classes on body (excluding scene and feature-flag classes).
  * @returns {Set<string>}
  */
 function getCurrentOverrideClasses() {
   const classes = new Set()
   for (const cls of document.body.classList) {
-    if (cls.startsWith(PREFIX) && !cls.startsWith(SCENE_PREFIX)) {
+    if (cls.startsWith(PREFIX) && !cls.startsWith(SCENE_PREFIX) && !cls.startsWith(FF_PREFIX)) {
       classes.add(cls)
     }
   }
@@ -108,8 +110,10 @@ export function setSceneClass(name) {
  */
 export function installBodyClassSync() {
   syncOverrideClasses()
-  const unsubHash = subscribeToHash(syncOverrideClasses)
-  const unsubStorage = subscribeToStorage(syncOverrideClasses)
+  syncFlagBodyClasses()
+  const sync = () => { syncOverrideClasses(); syncFlagBodyClasses() }
+  const unsubHash = subscribeToHash(sync)
+  const unsubStorage = subscribeToStorage(sync)
   return () => {
     unsubHash()
     unsubStorage()

package/src/featureFlags.js

@@ -15,23 +15,42 @@ import { getParam, setParam, removeParam, getAllParams } from './session.js'
 import { getLocal, setLocal, removeLocal, getAllLocal } from './localStorage.js'
 
 const FLAG_PREFIX = 'flag.'
+const BODY_CLASS_PREFIX = 'sb-ff-'
 
 /** Module-level storage for config defaults */
 let _defaults = {}
 
+/**
+ * Sync body classes for active feature flags.
+ * Adds `sb-ff-{name}` for every flag that resolves to true,
+ * removes it for every flag that resolves to false.
+ */
+export function syncFlagBodyClasses() {
+  if (typeof document === 'undefined') return
+  for (const key of Object.keys(_defaults)) {
+    const cls = BODY_CLASS_PREFIX + key
+    if (getFlag(key)) {
+      document.body.classList.add(cls)
+    } else {
+      document.body.classList.remove(cls)
+    }
+  }
+}
+
 /**
  * Initialize the feature flag system with config defaults.
- * Seeds localStorage with defaults (doesn't overwrite existing values).
+ * Syncs localStorage with config defaults on every call.
  * @param {Record<string, boolean>} defaults - Flag key → default value
  */
 export function initFeatureFlags(defaults = {}) {
   _defaults = { ...defaults }
-  // Seed localStorage with defaults (don't overwrite existing)
+  // Sync localStorage with config defaults — always overwrite so config
+  // changes take effect. User overrides live in the URL hash, which is
+  // checked first by getFlag(), so this is safe.
   for (const [key, value] of Object.entries(_defaults)) {
-    if (getLocal(FLAG_PREFIX + key) === null) {
-      setLocal(FLAG_PREFIX + key, String(value))
-    }
+    setLocal(FLAG_PREFIX + key, String(value))
   }
+  syncFlagBodyClasses()
 }
 
 /**
@@ -59,6 +78,7 @@ export function getFlag(key) {
  */
 export function setFlag(key, value) {
   setParam(FLAG_PREFIX + key, String(value))
+  syncFlagBodyClasses()
 }
 
 /**
@@ -101,6 +121,7 @@ export function resetFlags() {
       removeLocal(localKey)
     }
   }
+  syncFlagBodyClasses()
 }
 
 /**

package/src/index.js

@@ -38,7 +38,7 @@ export { mountSceneDebug } from './sceneDebug.js'
 export { hash, resolveSceneRoute, getSceneMeta } from './viewfinder.js'
 
 // Feature flags
-export { initFeatureFlags, getFlag, setFlag, toggleFlag, getAllFlags, resetFlags, getFlagKeys } from './featureFlags.js'
+export { initFeatureFlags, getFlag, setFlag, toggleFlag, getAllFlags, resetFlags, getFlagKeys, syncFlagBodyClasses } from './featureFlags.js'
 
 // Plugin configuration
 export { initPlugins, isPluginEnabled, getPluginsConfig } from './plugins.js'