@dnzn/dxkit-theme 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Denizen. // dnzn.wei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,204 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  createCSSTheme: () => createCSSTheme
+});
+module.exports = __toCommonJS(index_exports);
+var import_dxkit_settings = require("@dnzn/dxkit-settings");
+function createCSSTheme(options = {}) {
+  const { themes = ["default"], defaultMode = "system", storageKey = "dxkit:theme" } = options;
+  let currentTheme = themes[0];
+  let currentMode = defaultMode;
+  let dx = null;
+  let settingsListener = null;
+  let syncing = false;
+  const modeHandlers = /* @__PURE__ */ new Set();
+  const themeHandlers = /* @__PURE__ */ new Set();
+  const mql = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+  function resolveMode() {
+    if (currentMode !== "system") return currentMode;
+    return mql?.matches ? "dark" : "light";
+  }
+  function applyToDOM() {
+    if (typeof document === "undefined") return;
+    const el = document.documentElement;
+    el.setAttribute("data-theme", currentTheme);
+    el.setAttribute("data-mode", resolveMode());
+  }
+  function canUseStorage() {
+    try {
+      return typeof localStorage !== "undefined" && typeof localStorage.setItem === "function";
+    } catch {
+      return false;
+    }
+  }
+  function persist() {
+    if (!canUseStorage()) return;
+    try {
+      localStorage.setItem(
+        storageKey,
+        JSON.stringify({
+          theme: currentTheme,
+          mode: currentMode
+        })
+      );
+    } catch {
+    }
+  }
+  function restore() {
+    if (!canUseStorage()) return;
+    try {
+      const raw = localStorage.getItem(storageKey);
+      if (!raw) return;
+      const saved = JSON.parse(raw);
+      if (saved.theme && themes.includes(saved.theme)) currentTheme = saved.theme;
+      if (saved.mode && ["light", "dark", "system"].includes(saved.mode)) currentMode = saved.mode;
+    } catch {
+    }
+  }
+  function syncToSettings() {
+    if (!dx?.settings || syncing) return;
+    syncing = true;
+    dx.settings.set("theme", "theme", currentTheme);
+    dx.settings.set("theme", "mode", currentMode);
+    syncing = false;
+  }
+  function notifyModeChange() {
+    const resolved = resolveMode();
+    for (const handler of modeHandlers) handler(currentMode, resolved);
+    dx?.events.emit("dx:plugin:theme:changed", { theme: currentTheme, mode: currentMode, resolved });
+    syncToSettings();
+  }
+  function notifyThemeChange() {
+    for (const handler of themeHandlers) handler(currentTheme);
+    dx?.events.emit("dx:plugin:theme:changed", { theme: currentTheme, mode: currentMode, resolved: resolveMode() });
+    syncToSettings();
+  }
+  function onSystemChange() {
+    if (currentMode !== "system") return;
+    applyToDOM();
+    notifyModeChange();
+  }
+  function onSettingsChanged(event) {
+    if (event.dappId !== "theme" || syncing) return;
+    if (event.key === "theme" && typeof event.value === "string") {
+      plugin.setTheme(event.value);
+    } else if (event.key === "mode" && typeof event.value === "string") {
+      plugin.setMode(event.value);
+    }
+  }
+  function buildSettings() {
+    const defs = [];
+    if (themes.length > 1) {
+      defs.push({
+        key: "theme",
+        label: "Theme",
+        type: "select",
+        default: themes[0],
+        description: "Color palette.",
+        options: themes.map((t) => ({ label: t.charAt(0).toUpperCase() + t.slice(1), value: t }))
+      });
+    }
+    defs.push({
+      key: "mode",
+      label: "Mode",
+      type: "select",
+      default: defaultMode,
+      description: "Light, dark, or match your system.",
+      options: [
+        { label: "System", value: "system" },
+        { label: "Light", value: "light" },
+        { label: "Dark", value: "dark" }
+      ]
+    });
+    return defs;
+  }
+  const plugin = {
+    name: "theme",
+    settings: buildSettings(),
+    async init(context) {
+      dx = context;
+      context.eventRegistry.registerEvent("theme", [{ name: "dx:plugin:theme:changed" }]);
+      restore();
+      applyToDOM();
+      mql?.addEventListener("change", onSystemChange);
+      syncToSettings();
+      settingsListener = dx.events.on("dx:plugin:settings:changed", onSettingsChanged);
+    },
+    async destroy() {
+      mql?.removeEventListener("change", onSystemChange);
+      if (settingsListener) {
+        settingsListener.off();
+        settingsListener = null;
+      }
+      modeHandlers.clear();
+      themeHandlers.clear();
+      dx = null;
+    },
+    getMode() {
+      return currentMode;
+    },
+    setMode(mode) {
+      if (currentMode === mode) return;
+      currentMode = mode;
+      applyToDOM();
+      persist();
+      notifyModeChange();
+    },
+    toggleMode() {
+      const cycle = ["system", "light", "dark"];
+      const idx = cycle.indexOf(currentMode);
+      plugin.setMode(cycle[(idx + 1) % cycle.length]);
+    },
+    getResolvedMode() {
+      return resolveMode();
+    },
+    onModeChange(handler) {
+      modeHandlers.add(handler);
+      return () => modeHandlers.delete(handler);
+    },
+    getTheme() {
+      return currentTheme;
+    },
+    setTheme(theme) {
+      if (currentTheme === theme) return;
+      if (!themes.includes(theme)) return;
+      currentTheme = theme;
+      applyToDOM();
+      persist();
+      notifyThemeChange();
+    },
+    getAvailableThemes() {
+      return [...themes];
+    },
+    onThemeChange(handler) {
+      themeHandlers.add(handler);
+      return () => themeHandlers.delete(handler);
+    }
+  };
+  return plugin;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createCSSTheme
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { Context, SettingDefinition, Theme, ThemeMode } from '@dnzn/dxkit';\nimport '@dnzn/dxkit-settings';\n\ndeclare module '@dnzn/dxkit' {\n  interface EventMap {\n    'dx:plugin:theme:changed': { theme: string; mode: ThemeMode; resolved: 'light' | 'dark' };\n  }\n}\n\nexport interface CSSThemeOptions {\n  /** Available theme names. First is the default. */\n  themes?: string[];\n  /** Initial mode. Default: 'system'. */\n  defaultMode?: ThemeMode;\n  /** localStorage key prefix. Default: 'dxkit:theme'. */\n  storageKey?: string;\n}\n\n/**\n * Creates a CSS theme plugin.\n *\n * Sets `data-theme` and `data-mode` attributes on `<html>`.\n * Persists selection to localStorage. Respects `prefers-color-scheme`\n * when mode is 'system'.\n *\n * Declares settings so the settings plugin can render theme/mode controls.\n */\nexport function createCSSTheme(options: CSSThemeOptions = {}): Theme {\n  const { themes = ['default'], defaultMode = 'system', storageKey = 'dxkit:theme' } = options;\n\n  let currentTheme = themes[0];\n  let currentMode: ThemeMode = defaultMode;\n  let dx: Context | null = null;\n  let settingsListener: { off(): void } | null = null;\n  // Prevents re-entrant loop: theme change → settings write → settings event → theme change\n  let syncing = false;\n\n  const modeHandlers = new Set<(mode: ThemeMode, resolved: 'light' | 'dark') => void>();\n  const themeHandlers = new Set<(theme: string) => void>();\n\n  // Media query for system preference\n  const mql = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : null;\n\n  function resolveMode(): 'light' | 'dark' {\n    if (currentMode !== 'system') return currentMode;\n    return mql?.matches ? 'dark' : 'light';\n  }\n\n  function applyToDOM(): void {\n    if (typeof document === 'undefined') return;\n    const el = document.documentElement;\n    el.setAttribute('data-theme', currentTheme);\n    el.setAttribute('data-mode', resolveMode());\n  }\n\n  function canUseStorage(): boolean {\n    try {\n      return typeof localStorage !== 'undefined' && typeof localStorage.setItem === 'function';\n    } catch {\n      return false;\n    }\n  }\n\n  function persist(): void {\n    if (!canUseStorage()) return;\n    try {\n      localStorage.setItem(\n        storageKey,\n        JSON.stringify({\n          theme: currentTheme,\n          mode: currentMode,\n        }),\n      );\n    } catch {\n      /* storage full or blocked */\n    }\n  }\n\n  function restore(): void {\n    if (!canUseStorage()) return;\n    try {\n      const raw = localStorage.getItem(storageKey);\n      if (!raw) return;\n      const saved = JSON.parse(raw);\n      if (saved.theme && themes.includes(saved.theme)) currentTheme = saved.theme;\n      if (saved.mode && ['light', 'dark', 'system'].includes(saved.mode)) currentMode = saved.mode;\n    } catch {\n      /* corrupted — use defaults */\n    }\n  }\n\n  /** Push current theme/mode into the settings store (if available). */\n  function syncToSettings(): void {\n    if (!dx?.settings || syncing) return;\n    syncing = true;\n    dx.settings.set('theme', 'theme', currentTheme);\n    dx.settings.set('theme', 'mode', currentMode);\n    syncing = false;\n  }\n\n  function notifyModeChange(): void {\n    const resolved = resolveMode();\n    for (const handler of modeHandlers) handler(currentMode, resolved);\n    dx?.events.emit('dx:plugin:theme:changed', { theme: currentTheme, mode: currentMode, resolved });\n    syncToSettings();\n  }\n\n  function notifyThemeChange(): void {\n    for (const handler of themeHandlers) handler(currentTheme);\n    dx?.events.emit('dx:plugin:theme:changed', { theme: currentTheme, mode: currentMode, resolved: resolveMode() });\n    syncToSettings();\n  }\n\n  // System preference change listener\n  function onSystemChange(): void {\n    if (currentMode !== 'system') return;\n    applyToDOM();\n    notifyModeChange();\n  }\n\n  /** React to settings changes (from settings dapp UI). */\n  function onSettingsChanged(event: { dappId: string; key: string; value: unknown }): void {\n    if (event.dappId !== 'theme' || syncing) return;\n    if (event.key === 'theme' && typeof event.value === 'string') {\n      plugin.setTheme(event.value);\n    } else if (event.key === 'mode' && typeof event.value === 'string') {\n      plugin.setMode(event.value as ThemeMode);\n    }\n  }\n\n  // Build settings definitions from the options\n  function buildSettings(): SettingDefinition[] {\n    const defs: SettingDefinition[] = [];\n\n    if (themes.length > 1) {\n      defs.push({\n        key: 'theme',\n        label: 'Theme',\n        type: 'select',\n        default: themes[0],\n        description: 'Color palette.',\n        options: themes.map((t) => ({ label: t.charAt(0).toUpperCase() + t.slice(1), value: t })),\n      });\n    }\n\n    defs.push({\n      key: 'mode',\n      label: 'Mode',\n      type: 'select',\n      default: defaultMode,\n      description: 'Light, dark, or match your system.',\n      options: [\n        { label: 'System', value: 'system' },\n        { label: 'Light', value: 'light' },\n        { label: 'Dark', value: 'dark' },\n      ],\n    });\n\n    return defs;\n  }\n\n  const plugin: Theme = {\n    name: 'theme',\n    settings: buildSettings(),\n\n    async init(context: Context): Promise<void> {\n      dx = context;\n\n      context.eventRegistry.registerEvent('theme', [{ name: 'dx:plugin:theme:changed' }]);\n\n      restore();\n      applyToDOM();\n      mql?.addEventListener('change', onSystemChange);\n\n      // Seed current values into settings store\n      syncToSettings();\n\n      // Listen for settings changes (from settings dapp)\n      settingsListener = dx.events.on('dx:plugin:settings:changed', onSettingsChanged);\n    },\n\n    async destroy(): Promise<void> {\n      mql?.removeEventListener('change', onSystemChange);\n      if (settingsListener) {\n        settingsListener.off();\n        settingsListener = null;\n      }\n      modeHandlers.clear();\n      themeHandlers.clear();\n      dx = null;\n    },\n\n    getMode(): ThemeMode {\n      return currentMode;\n    },\n\n    setMode(mode: ThemeMode): void {\n      if (currentMode === mode) return;\n      currentMode = mode;\n      applyToDOM();\n      persist();\n      notifyModeChange();\n    },\n\n    toggleMode(): void {\n      // Cycle order: system → light → dark → system\n      const cycle: ThemeMode[] = ['system', 'light', 'dark'];\n      const idx = cycle.indexOf(currentMode);\n      plugin.setMode(cycle[(idx + 1) % cycle.length]);\n    },\n\n    getResolvedMode(): 'light' | 'dark' {\n      return resolveMode();\n    },\n\n    onModeChange(handler: (mode: ThemeMode, resolved: 'light' | 'dark') => void): () => void {\n      modeHandlers.add(handler);\n      return () => modeHandlers.delete(handler);\n    },\n\n    getTheme(): string {\n      return currentTheme;\n    },\n\n    setTheme(theme: string): void {\n      if (currentTheme === theme) return;\n      if (!themes.includes(theme)) return;\n      currentTheme = theme;\n      applyToDOM();\n      persist();\n      notifyThemeChange();\n    },\n\n    getAvailableThemes(): string[] {\n      return [...themes];\n    },\n\n    onThemeChange(handler: (theme: string) => void): () => void {\n      themeHandlers.add(handler);\n      return () => themeHandlers.delete(handler);\n    },\n  };\n\n  return plugin;\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,31 @@
+import { ThemeMode, Theme } from '@dnzn/dxkit';
+
+declare module '@dnzn/dxkit' {
+    interface EventMap {
+        'dx:plugin:theme:changed': {
+            theme: string;
+            mode: ThemeMode;
+            resolved: 'light' | 'dark';
+        };
+    }
+}
+interface CSSThemeOptions {
+    /** Available theme names. First is the default. */
+    themes?: string[];
+    /** Initial mode. Default: 'system'. */
+    defaultMode?: ThemeMode;
+    /** localStorage key prefix. Default: 'dxkit:theme'. */
+    storageKey?: string;
+}
+/**
+ * Creates a CSS theme plugin.
+ *
+ * Sets `data-theme` and `data-mode` attributes on `<html>`.
+ * Persists selection to localStorage. Respects `prefers-color-scheme`
+ * when mode is 'system'.
+ *
+ * Declares settings so the settings plugin can render theme/mode controls.
+ */
+declare function createCSSTheme(options?: CSSThemeOptions): Theme;
+
+export { type CSSThemeOptions, createCSSTheme };

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import { ThemeMode, Theme } from '@dnzn/dxkit';
+
+declare module '@dnzn/dxkit' {
+    interface EventMap {
+        'dx:plugin:theme:changed': {
+            theme: string;
+            mode: ThemeMode;
+            resolved: 'light' | 'dark';
+        };
+    }
+}
+interface CSSThemeOptions {
+    /** Available theme names. First is the default. */
+    themes?: string[];
+    /** Initial mode. Default: 'system'. */
+    defaultMode?: ThemeMode;
+    /** localStorage key prefix. Default: 'dxkit:theme'. */
+    storageKey?: string;
+}
+/**
+ * Creates a CSS theme plugin.
+ *
+ * Sets `data-theme` and `data-mode` attributes on `<html>`.
+ * Persists selection to localStorage. Respects `prefers-color-scheme`
+ * when mode is 'system'.
+ *
+ * Declares settings so the settings plugin can render theme/mode controls.
+ */
+declare function createCSSTheme(options?: CSSThemeOptions): Theme;
+
+export { type CSSThemeOptions, createCSSTheme };

package/dist/index.global.js

@@ -0,0 +1,201 @@
+"use strict";
+var DxTheme = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/index.ts
+  var index_exports = {};
+  __export(index_exports, {
+    createCSSTheme: () => createCSSTheme
+  });
+  function createCSSTheme(options = {}) {
+    const { themes = ["default"], defaultMode = "system", storageKey = "dxkit:theme" } = options;
+    let currentTheme = themes[0];
+    let currentMode = defaultMode;
+    let dx = null;
+    let settingsListener = null;
+    let syncing = false;
+    const modeHandlers = /* @__PURE__ */ new Set();
+    const themeHandlers = /* @__PURE__ */ new Set();
+    const mql = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+    function resolveMode() {
+      if (currentMode !== "system") return currentMode;
+      return mql?.matches ? "dark" : "light";
+    }
+    function applyToDOM() {
+      if (typeof document === "undefined") return;
+      const el = document.documentElement;
+      el.setAttribute("data-theme", currentTheme);
+      el.setAttribute("data-mode", resolveMode());
+    }
+    function canUseStorage() {
+      try {
+        return typeof localStorage !== "undefined" && typeof localStorage.setItem === "function";
+      } catch {
+        return false;
+      }
+    }
+    function persist() {
+      if (!canUseStorage()) return;
+      try {
+        localStorage.setItem(
+          storageKey,
+          JSON.stringify({
+            theme: currentTheme,
+            mode: currentMode
+          })
+        );
+      } catch {
+      }
+    }
+    function restore() {
+      if (!canUseStorage()) return;
+      try {
+        const raw = localStorage.getItem(storageKey);
+        if (!raw) return;
+        const saved = JSON.parse(raw);
+        if (saved.theme && themes.includes(saved.theme)) currentTheme = saved.theme;
+        if (saved.mode && ["light", "dark", "system"].includes(saved.mode)) currentMode = saved.mode;
+      } catch {
+      }
+    }
+    function syncToSettings() {
+      if (!dx?.settings || syncing) return;
+      syncing = true;
+      dx.settings.set("theme", "theme", currentTheme);
+      dx.settings.set("theme", "mode", currentMode);
+      syncing = false;
+    }
+    function notifyModeChange() {
+      const resolved = resolveMode();
+      for (const handler of modeHandlers) handler(currentMode, resolved);
+      dx?.events.emit("dx:plugin:theme:changed", { theme: currentTheme, mode: currentMode, resolved });
+      syncToSettings();
+    }
+    function notifyThemeChange() {
+      for (const handler of themeHandlers) handler(currentTheme);
+      dx?.events.emit("dx:plugin:theme:changed", { theme: currentTheme, mode: currentMode, resolved: resolveMode() });
+      syncToSettings();
+    }
+    function onSystemChange() {
+      if (currentMode !== "system") return;
+      applyToDOM();
+      notifyModeChange();
+    }
+    function onSettingsChanged(event) {
+      if (event.dappId !== "theme" || syncing) return;
+      if (event.key === "theme" && typeof event.value === "string") {
+        plugin.setTheme(event.value);
+      } else if (event.key === "mode" && typeof event.value === "string") {
+        plugin.setMode(event.value);
+      }
+    }
+    function buildSettings() {
+      const defs = [];
+      if (themes.length > 1) {
+        defs.push({
+          key: "theme",
+          label: "Theme",
+          type: "select",
+          default: themes[0],
+          description: "Color palette.",
+          options: themes.map((t) => ({ label: t.charAt(0).toUpperCase() + t.slice(1), value: t }))
+        });
+      }
+      defs.push({
+        key: "mode",
+        label: "Mode",
+        type: "select",
+        default: defaultMode,
+        description: "Light, dark, or match your system.",
+        options: [
+          { label: "System", value: "system" },
+          { label: "Light", value: "light" },
+          { label: "Dark", value: "dark" }
+        ]
+      });
+      return defs;
+    }
+    const plugin = {
+      name: "theme",
+      settings: buildSettings(),
+      async init(context) {
+        dx = context;
+        context.eventRegistry.registerEvent("theme", [{ name: "dx:plugin:theme:changed" }]);
+        restore();
+        applyToDOM();
+        mql?.addEventListener("change", onSystemChange);
+        syncToSettings();
+        settingsListener = dx.events.on("dx:plugin:settings:changed", onSettingsChanged);
+      },
+      async destroy() {
+        mql?.removeEventListener("change", onSystemChange);
+        if (settingsListener) {
+          settingsListener.off();
+          settingsListener = null;
+        }
+        modeHandlers.clear();
+        themeHandlers.clear();
+        dx = null;
+      },
+      getMode() {
+        return currentMode;
+      },
+      setMode(mode) {
+        if (currentMode === mode) return;
+        currentMode = mode;
+        applyToDOM();
+        persist();
+        notifyModeChange();
+      },
+      toggleMode() {
+        const cycle = ["system", "light", "dark"];
+        const idx = cycle.indexOf(currentMode);
+        plugin.setMode(cycle[(idx + 1) % cycle.length]);
+      },
+      getResolvedMode() {
+        return resolveMode();
+      },
+      onModeChange(handler) {
+        modeHandlers.add(handler);
+        return () => modeHandlers.delete(handler);
+      },
+      getTheme() {
+        return currentTheme;
+      },
+      setTheme(theme) {
+        if (currentTheme === theme) return;
+        if (!themes.includes(theme)) return;
+        currentTheme = theme;
+        applyToDOM();
+        persist();
+        notifyThemeChange();
+      },
+      getAvailableThemes() {
+        return [...themes];
+      },
+      onThemeChange(handler) {
+        themeHandlers.add(handler);
+        return () => themeHandlers.delete(handler);
+      }
+    };
+    return plugin;
+  }
+  return __toCommonJS(index_exports);
+})();
+//# sourceMappingURL=index.global.js.map

package/dist/index.global.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { Context, SettingDefinition, Theme, ThemeMode } from '@dnzn/dxkit';\nimport '@dnzn/dxkit-settings';\n\ndeclare module '@dnzn/dxkit' {\n  interface EventMap {\n    'dx:plugin:theme:changed': { theme: string; mode: ThemeMode; resolved: 'light' | 'dark' };\n  }\n}\n\nexport interface CSSThemeOptions {\n  /** Available theme names. First is the default. */\n  themes?: string[];\n  /** Initial mode. Default: 'system'. */\n  defaultMode?: ThemeMode;\n  /** localStorage key prefix. Default: 'dxkit:theme'. */\n  storageKey?: string;\n}\n\n/**\n * Creates a CSS theme plugin.\n *\n * Sets `data-theme` and `data-mode` attributes on `<html>`.\n * Persists selection to localStorage. Respects `prefers-color-scheme`\n * when mode is 'system'.\n *\n * Declares settings so the settings plugin can render theme/mode controls.\n */\nexport function createCSSTheme(options: CSSThemeOptions = {}): Theme {\n  const { themes = ['default'], defaultMode = 'system', storageKey = 'dxkit:theme' } = options;\n\n  let currentTheme = themes[0];\n  let currentMode: ThemeMode = defaultMode;\n  let dx: Context | null = null;\n  let settingsListener: { off(): void } | null = null;\n  // Prevents re-entrant loop: theme change → settings write → settings event → theme change\n  let syncing = false;\n\n  const modeHandlers = new Set<(mode: ThemeMode, resolved: 'light' | 'dark') => void>();\n  const themeHandlers = new Set<(theme: string) => void>();\n\n  // Media query for system preference\n  const mql = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : null;\n\n  function resolveMode(): 'light' | 'dark' {\n    if (currentMode !== 'system') return currentMode;\n    return mql?.matches ? 'dark' : 'light';\n  }\n\n  function applyToDOM(): void {\n    if (typeof document === 'undefined') return;\n    const el = document.documentElement;\n    el.setAttribute('data-theme', currentTheme);\n    el.setAttribute('data-mode', resolveMode());\n  }\n\n  function canUseStorage(): boolean {\n    try {\n      return typeof localStorage !== 'undefined' && typeof localStorage.setItem === 'function';\n    } catch {\n      return false;\n    }\n  }\n\n  function persist(): void {\n    if (!canUseStorage()) return;\n    try {\n      localStorage.setItem(\n        storageKey,\n        JSON.stringify({\n          theme: currentTheme,\n          mode: currentMode,\n        }),\n      );\n    } catch {\n      /* storage full or blocked */\n    }\n  }\n\n  function restore(): void {\n    if (!canUseStorage()) return;\n    try {\n      const raw = localStorage.getItem(storageKey);\n      if (!raw) return;\n      const saved = JSON.parse(raw);\n      if (saved.theme && themes.includes(saved.theme)) currentTheme = saved.theme;\n      if (saved.mode && ['light', 'dark', 'system'].includes(saved.mode)) currentMode = saved.mode;\n    } catch {\n      /* corrupted — use defaults */\n    }\n  }\n\n  /** Push current theme/mode into the settings store (if available). */\n  function syncToSettings(): void {\n    if (!dx?.settings || syncing) return;\n    syncing = true;\n    dx.settings.set('theme', 'theme', currentTheme);\n    dx.settings.set('theme', 'mode', currentMode);\n    syncing = false;\n  }\n\n  function notifyModeChange(): void {\n    const resolved = resolveMode();\n    for (const handler of modeHandlers) handler(currentMode, resolved);\n    dx?.events.emit('dx:plugin:theme:changed', { theme: currentTheme, mode: currentMode, resolved });\n    syncToSettings();\n  }\n\n  function notifyThemeChange(): void {\n    for (const handler of themeHandlers) handler(currentTheme);\n    dx?.events.emit('dx:plugin:theme:changed', { theme: currentTheme, mode: currentMode, resolved: resolveMode() });\n    syncToSettings();\n  }\n\n  // System preference change listener\n  function onSystemChange(): void {\n    if (currentMode !== 'system') return;\n    applyToDOM();\n    notifyModeChange();\n  }\n\n  /** React to settings changes (from settings dapp UI). */\n  function onSettingsChanged(event: { dappId: string; key: string; value: unknown }): void {\n    if (event.dappId !== 'theme' || syncing) return;\n    if (event.key === 'theme' && typeof event.value === 'string') {\n      plugin.setTheme(event.value);\n    } else if (event.key === 'mode' && typeof event.value === 'string') {\n      plugin.setMode(event.value as ThemeMode);\n    }\n  }\n\n  // Build settings definitions from the options\n  function buildSettings(): SettingDefinition[] {\n    const defs: SettingDefinition[] = [];\n\n    if (themes.length > 1) {\n      defs.push({\n        key: 'theme',\n        label: 'Theme',\n        type: 'select',\n        default: themes[0],\n        description: 'Color palette.',\n        options: themes.map((t) => ({ label: t.charAt(0).toUpperCase() + t.slice(1), value: t })),\n      });\n    }\n\n    defs.push({\n      key: 'mode',\n      label: 'Mode',\n      type: 'select',\n      default: defaultMode,\n      description: 'Light, dark, or match your system.',\n      options: [\n        { label: 'System', value: 'system' },\n        { label: 'Light', value: 'light' },\n        { label: 'Dark', value: 'dark' },\n      ],\n    });\n\n    return defs;\n  }\n\n  const plugin: Theme = {\n    name: 'theme',\n    settings: buildSettings(),\n\n    async init(context: Context): Promise<void> {\n      dx = context;\n\n      context.eventRegistry.registerEvent('theme', [{ name: 'dx:plugin:theme:changed' }]);\n\n      restore();\n      applyToDOM();\n      mql?.addEventListener('change', onSystemChange);\n\n      // Seed current values into settings store\n      syncToSettings();\n\n      // Listen for settings changes (from settings dapp)\n      settingsListener = dx.events.on('dx:plugin:settings:changed', onSettingsChanged);\n    },\n\n    async destroy(): Promise<void> {\n      mql?.removeEventListener('change', onSystemChange);\n      if (settingsListener) {\n        settingsListener.off();\n        settingsListener = null;\n      }\n      modeHandlers.clear();\n      themeHandlers.clear();\n      dx = null;\n    },\n\n    getMode(): ThemeMode {\n      return currentMode;\n    },\n\n    setMode(mode: ThemeMode): void {\n      if (currentMode === mode) return;\n      currentMode = mode;\n      applyToDOM();\n      persist();\n      notifyModeChange();\n    },\n\n    toggleMode(): void {\n      // Cycle order: system → light → dark → system\n      const cycle: ThemeMode[] = ['system', 'light', 'dark'];\n      const idx = cycle.indexOf(currentMode);\n      plugin.setMode(cycle[(idx + 1) % cycle.length]);\n    },\n\n    getResolvedMode(): 'light' | 'dark' {\n      return resolveMode();\n    },\n\n    onModeChange(handler: (mode: ThemeMode, resolved: 'light' | 'dark') => void): () => void {\n      modeHandlers.add(handler);\n      return () => modeHandlers.delete(handler);\n    },\n\n    getTheme(): string {\n      return currentTheme;\n    },\n\n    setTheme(theme: string): void {\n      if (currentTheme === theme) return;\n      if (!themes.includes(theme)) return;\n      currentTheme = theme;\n      applyToDOM();\n      persist();\n      notifyThemeChange();\n    },\n\n    getAvailableThemes(): string[] {\n      return [...themes];\n    },\n\n    onThemeChange(handler: (theme: string) => void): () => void {\n      themeHandlers.add(handler);\n      return () => themeHandlers.delete(handler);\n    },\n  };\n\n  return plugin;\n}\n"],"mappings":"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","names":[]}

package/dist/index.js

@@ -0,0 +1,179 @@
+// src/index.ts
+import "@dnzn/dxkit-settings";
+function createCSSTheme(options = {}) {
+  const { themes = ["default"], defaultMode = "system", storageKey = "dxkit:theme" } = options;
+  let currentTheme = themes[0];
+  let currentMode = defaultMode;
+  let dx = null;
+  let settingsListener = null;
+  let syncing = false;
+  const modeHandlers = /* @__PURE__ */ new Set();
+  const themeHandlers = /* @__PURE__ */ new Set();
+  const mql = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+  function resolveMode() {
+    if (currentMode !== "system") return currentMode;
+    return mql?.matches ? "dark" : "light";
+  }
+  function applyToDOM() {
+    if (typeof document === "undefined") return;
+    const el = document.documentElement;
+    el.setAttribute("data-theme", currentTheme);
+    el.setAttribute("data-mode", resolveMode());
+  }
+  function canUseStorage() {
+    try {
+      return typeof localStorage !== "undefined" && typeof localStorage.setItem === "function";
+    } catch {
+      return false;
+    }
+  }
+  function persist() {
+    if (!canUseStorage()) return;
+    try {
+      localStorage.setItem(
+        storageKey,
+        JSON.stringify({
+          theme: currentTheme,
+          mode: currentMode
+        })
+      );
+    } catch {
+    }
+  }
+  function restore() {
+    if (!canUseStorage()) return;
+    try {
+      const raw = localStorage.getItem(storageKey);
+      if (!raw) return;
+      const saved = JSON.parse(raw);
+      if (saved.theme && themes.includes(saved.theme)) currentTheme = saved.theme;
+      if (saved.mode && ["light", "dark", "system"].includes(saved.mode)) currentMode = saved.mode;
+    } catch {
+    }
+  }
+  function syncToSettings() {
+    if (!dx?.settings || syncing) return;
+    syncing = true;
+    dx.settings.set("theme", "theme", currentTheme);
+    dx.settings.set("theme", "mode", currentMode);
+    syncing = false;
+  }
+  function notifyModeChange() {
+    const resolved = resolveMode();
+    for (const handler of modeHandlers) handler(currentMode, resolved);
+    dx?.events.emit("dx:plugin:theme:changed", { theme: currentTheme, mode: currentMode, resolved });
+    syncToSettings();
+  }
+  function notifyThemeChange() {
+    for (const handler of themeHandlers) handler(currentTheme);
+    dx?.events.emit("dx:plugin:theme:changed", { theme: currentTheme, mode: currentMode, resolved: resolveMode() });
+    syncToSettings();
+  }
+  function onSystemChange() {
+    if (currentMode !== "system") return;
+    applyToDOM();
+    notifyModeChange();
+  }
+  function onSettingsChanged(event) {
+    if (event.dappId !== "theme" || syncing) return;
+    if (event.key === "theme" && typeof event.value === "string") {
+      plugin.setTheme(event.value);
+    } else if (event.key === "mode" && typeof event.value === "string") {
+      plugin.setMode(event.value);
+    }
+  }
+  function buildSettings() {
+    const defs = [];
+    if (themes.length > 1) {
+      defs.push({
+        key: "theme",
+        label: "Theme",
+        type: "select",
+        default: themes[0],
+        description: "Color palette.",
+        options: themes.map((t) => ({ label: t.charAt(0).toUpperCase() + t.slice(1), value: t }))
+      });
+    }
+    defs.push({
+      key: "mode",
+      label: "Mode",
+      type: "select",
+      default: defaultMode,
+      description: "Light, dark, or match your system.",
+      options: [
+        { label: "System", value: "system" },
+        { label: "Light", value: "light" },
+        { label: "Dark", value: "dark" }
+      ]
+    });
+    return defs;
+  }
+  const plugin = {
+    name: "theme",
+    settings: buildSettings(),
+    async init(context) {
+      dx = context;
+      context.eventRegistry.registerEvent("theme", [{ name: "dx:plugin:theme:changed" }]);
+      restore();
+      applyToDOM();
+      mql?.addEventListener("change", onSystemChange);
+      syncToSettings();
+      settingsListener = dx.events.on("dx:plugin:settings:changed", onSettingsChanged);
+    },
+    async destroy() {
+      mql?.removeEventListener("change", onSystemChange);
+      if (settingsListener) {
+        settingsListener.off();
+        settingsListener = null;
+      }
+      modeHandlers.clear();
+      themeHandlers.clear();
+      dx = null;
+    },
+    getMode() {
+      return currentMode;
+    },
+    setMode(mode) {
+      if (currentMode === mode) return;
+      currentMode = mode;
+      applyToDOM();
+      persist();
+      notifyModeChange();
+    },
+    toggleMode() {
+      const cycle = ["system", "light", "dark"];
+      const idx = cycle.indexOf(currentMode);
+      plugin.setMode(cycle[(idx + 1) % cycle.length]);
+    },
+    getResolvedMode() {
+      return resolveMode();
+    },
+    onModeChange(handler) {
+      modeHandlers.add(handler);
+      return () => modeHandlers.delete(handler);
+    },
+    getTheme() {
+      return currentTheme;
+    },
+    setTheme(theme) {
+      if (currentTheme === theme) return;
+      if (!themes.includes(theme)) return;
+      currentTheme = theme;
+      applyToDOM();
+      persist();
+      notifyThemeChange();
+    },
+    getAvailableThemes() {
+      return [...themes];
+    },
+    onThemeChange(handler) {
+      themeHandlers.add(handler);
+      return () => themeHandlers.delete(handler);
+    }
+  };
+  return plugin;
+}
+export {
+  createCSSTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { Context, SettingDefinition, Theme, ThemeMode } from '@dnzn/dxkit';\nimport '@dnzn/dxkit-settings';\n\ndeclare module '@dnzn/dxkit' {\n  interface EventMap {\n    'dx:plugin:theme:changed': { theme: string; mode: ThemeMode; resolved: 'light' | 'dark' };\n  }\n}\n\nexport interface CSSThemeOptions {\n  /** Available theme names. First is the default. */\n  themes?: string[];\n  /** Initial mode. Default: 'system'. */\n  defaultMode?: ThemeMode;\n  /** localStorage key prefix. Default: 'dxkit:theme'. */\n  storageKey?: string;\n}\n\n/**\n * Creates a CSS theme plugin.\n *\n * Sets `data-theme` and `data-mode` attributes on `<html>`.\n * Persists selection to localStorage. Respects `prefers-color-scheme`\n * when mode is 'system'.\n *\n * Declares settings so the settings plugin can render theme/mode controls.\n */\nexport function createCSSTheme(options: CSSThemeOptions = {}): Theme {\n  const { themes = ['default'], defaultMode = 'system', storageKey = 'dxkit:theme' } = options;\n\n  let currentTheme = themes[0];\n  let currentMode: ThemeMode = defaultMode;\n  let dx: Context | null = null;\n  let settingsListener: { off(): void } | null = null;\n  // Prevents re-entrant loop: theme change → settings write → settings event → theme change\n  let syncing = false;\n\n  const modeHandlers = new Set<(mode: ThemeMode, resolved: 'light' | 'dark') => void>();\n  const themeHandlers = new Set<(theme: string) => void>();\n\n  // Media query for system preference\n  const mql = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : null;\n\n  function resolveMode(): 'light' | 'dark' {\n    if (currentMode !== 'system') return currentMode;\n    return mql?.matches ? 'dark' : 'light';\n  }\n\n  function applyToDOM(): void {\n    if (typeof document === 'undefined') return;\n    const el = document.documentElement;\n    el.setAttribute('data-theme', currentTheme);\n    el.setAttribute('data-mode', resolveMode());\n  }\n\n  function canUseStorage(): boolean {\n    try {\n      return typeof localStorage !== 'undefined' && typeof localStorage.setItem === 'function';\n    } catch {\n      return false;\n    }\n  }\n\n  function persist(): void {\n    if (!canUseStorage()) return;\n    try {\n      localStorage.setItem(\n        storageKey,\n        JSON.stringify({\n          theme: currentTheme,\n          mode: currentMode,\n        }),\n      );\n    } catch {\n      /* storage full or blocked */\n    }\n  }\n\n  function restore(): void {\n    if (!canUseStorage()) return;\n    try {\n      const raw = localStorage.getItem(storageKey);\n      if (!raw) return;\n      const saved = JSON.parse(raw);\n      if (saved.theme && themes.includes(saved.theme)) currentTheme = saved.theme;\n      if (saved.mode && ['light', 'dark', 'system'].includes(saved.mode)) currentMode = saved.mode;\n    } catch {\n      /* corrupted — use defaults */\n    }\n  }\n\n  /** Push current theme/mode into the settings store (if available). */\n  function syncToSettings(): void {\n    if (!dx?.settings || syncing) return;\n    syncing = true;\n    dx.settings.set('theme', 'theme', currentTheme);\n    dx.settings.set('theme', 'mode', currentMode);\n    syncing = false;\n  }\n\n  function notifyModeChange(): void {\n    const resolved = resolveMode();\n    for (const handler of modeHandlers) handler(currentMode, resolved);\n    dx?.events.emit('dx:plugin:theme:changed', { theme: currentTheme, mode: currentMode, resolved });\n    syncToSettings();\n  }\n\n  function notifyThemeChange(): void {\n    for (const handler of themeHandlers) handler(currentTheme);\n    dx?.events.emit('dx:plugin:theme:changed', { theme: currentTheme, mode: currentMode, resolved: resolveMode() });\n    syncToSettings();\n  }\n\n  // System preference change listener\n  function onSystemChange(): void {\n    if (currentMode !== 'system') return;\n    applyToDOM();\n    notifyModeChange();\n  }\n\n  /** React to settings changes (from settings dapp UI). */\n  function onSettingsChanged(event: { dappId: string; key: string; value: unknown }): void {\n    if (event.dappId !== 'theme' || syncing) return;\n    if (event.key === 'theme' && typeof event.value === 'string') {\n      plugin.setTheme(event.value);\n    } else if (event.key === 'mode' && typeof event.value === 'string') {\n      plugin.setMode(event.value as ThemeMode);\n    }\n  }\n\n  // Build settings definitions from the options\n  function buildSettings(): SettingDefinition[] {\n    const defs: SettingDefinition[] = [];\n\n    if (themes.length > 1) {\n      defs.push({\n        key: 'theme',\n        label: 'Theme',\n        type: 'select',\n        default: themes[0],\n        description: 'Color palette.',\n        options: themes.map((t) => ({ label: t.charAt(0).toUpperCase() + t.slice(1), value: t })),\n      });\n    }\n\n    defs.push({\n      key: 'mode',\n      label: 'Mode',\n      type: 'select',\n      default: defaultMode,\n      description: 'Light, dark, or match your system.',\n      options: [\n        { label: 'System', value: 'system' },\n        { label: 'Light', value: 'light' },\n        { label: 'Dark', value: 'dark' },\n      ],\n    });\n\n    return defs;\n  }\n\n  const plugin: Theme = {\n    name: 'theme',\n    settings: buildSettings(),\n\n    async init(context: Context): Promise<void> {\n      dx = context;\n\n      context.eventRegistry.registerEvent('theme', [{ name: 'dx:plugin:theme:changed' }]);\n\n      restore();\n      applyToDOM();\n      mql?.addEventListener('change', onSystemChange);\n\n      // Seed current values into settings store\n      syncToSettings();\n\n      // Listen for settings changes (from settings dapp)\n      settingsListener = dx.events.on('dx:plugin:settings:changed', onSettingsChanged);\n    },\n\n    async destroy(): Promise<void> {\n      mql?.removeEventListener('change', onSystemChange);\n      if (settingsListener) {\n        settingsListener.off();\n        settingsListener = null;\n      }\n      modeHandlers.clear();\n      themeHandlers.clear();\n      dx = null;\n    },\n\n    getMode(): ThemeMode {\n      return currentMode;\n    },\n\n    setMode(mode: ThemeMode): void {\n      if (currentMode === mode) return;\n      currentMode = mode;\n      applyToDOM();\n      persist();\n      notifyModeChange();\n    },\n\n    toggleMode(): void {\n      // Cycle order: system → light → dark → system\n      const cycle: ThemeMode[] = ['system', 'light', 'dark'];\n      const idx = cycle.indexOf(currentMode);\n      plugin.setMode(cycle[(idx + 1) % cycle.length]);\n    },\n\n    getResolvedMode(): 'light' | 'dark' {\n      return resolveMode();\n    },\n\n    onModeChange(handler: (mode: ThemeMode, resolved: 'light' | 'dark') => void): () => void {\n      modeHandlers.add(handler);\n      return () => modeHandlers.delete(handler);\n    },\n\n    getTheme(): string {\n      return currentTheme;\n    },\n\n    setTheme(theme: string): void {\n      if (currentTheme === theme) return;\n      if (!themes.includes(theme)) return;\n      currentTheme = theme;\n      applyToDOM();\n      persist();\n      notifyThemeChange();\n    },\n\n    getAvailableThemes(): string[] {\n      return [...themes];\n    },\n\n    onThemeChange(handler: (theme: string) => void): () => void {\n      themeHandlers.add(handler);\n      return () => themeHandlers.delete(handler);\n    },\n  };\n\n  return plugin;\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@dnzn/dxkit-theme",
+  "version": "0.1.0",
+  "description": "DxKit theme plugin — CSS theme + light/dark/system mode",
+  "author": "Denizen. <null@dnzn.dev>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DxNZN/DxKit",
+    "directory": "plugins/theme"
+  },
+  "homepage": "https://dnzn.dev",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@dnzn/dxkit-settings": "0.1.0",
+    "@dnzn/dxkit": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist"
+  }
+}