@reopt-ai/opt-ui 1.4.1 → 1.5.0

package/dist/theme/server.js

@@ -0,0 +1,242 @@
+// src/lib/theme/presets/index.ts
+var DEFAULT_DESCRIPTOR = {
+  id: "default",
+  label: "Default",
+  description: "Blue accent, balanced radius & shadow",
+  palette: {
+    seed: "#2563eb",
+    harmony: "split-complementary",
+    radiusScale: "medium",
+    shadowIntensity: "subtle",
+    neutralTemperature: "cool"
+  },
+  switcherSwatches: ["hsl(221 83% 53%)", "hsl(142 71% 45%)", "hsl(38 92% 50%)"]
+};
+var MINIMAL_DESCRIPTOR = {
+  id: "minimal",
+  label: "Minimal",
+  description: "Monochrome, no shadow, sharp edges",
+  palette: {
+    seed: "#333333",
+    harmony: "analogous",
+    radiusScale: "sharp",
+    shadowIntensity: "none",
+    neutralTemperature: "cool"
+  },
+  switcherSwatches: ["hsl(0 0% 20%)", "hsl(0 0% 45%)", "hsl(0 0% 70%)"]
+};
+var NATURAL_DESCRIPTOR = {
+  id: "natural",
+  label: "Natural",
+  description: "Always light \u2014 sage accent, warm cream",
+  forceLightOnly: true,
+  palette: {
+    seed: "#5a9376",
+    harmony: "complementary",
+    radiusScale: "medium",
+    shadowIntensity: "subtle",
+    neutralTemperature: "warm"
+  },
+  switcherSwatches: ["hsl(155 38% 45%)", "hsl(25 65% 55%)", "hsl(45 75% 50%)"]
+};
+var PRO_DESCRIPTOR = {
+  id: "pro",
+  label: "Pro",
+  description: "Neon blue accent, mono headings, ultra-dense",
+  palette: {
+    seed: "#0080ff",
+    harmony: "tetradic",
+    radiusScale: "sharp",
+    shadowIntensity: "subtle",
+    neutralTemperature: "cool"
+  },
+  switcherSwatches: [
+    "hsl(210 100% 55%)",
+    "hsl(170 90% 48%)",
+    "hsl(290 85% 60%)"
+  ]
+};
+var MONO_DARK_DESCRIPTOR = {
+  id: "mono-dark",
+  label: "Mono Dark",
+  description: "OLED-friendly black, neon cyan accent, mono headings",
+  palette: {
+    seed: "#00d4ff",
+    harmony: "tetradic",
+    radiusScale: "sharp",
+    shadowIntensity: "subtle",
+    neutralTemperature: "cool"
+  },
+  switcherSwatches: ["hsl(190 100% 50%)", "hsl(0 0% 8%)", "hsl(280 90% 65%)"]
+};
+var THEME_REGISTRY = {
+  default: DEFAULT_DESCRIPTOR,
+  minimal: MINIMAL_DESCRIPTOR,
+  natural: NATURAL_DESCRIPTOR,
+  pro: PRO_DESCRIPTOR,
+  "mono-dark": MONO_DARK_DESCRIPTOR
+};
+var THEME_PRESET_IDS = Object.keys(THEME_REGISTRY);
+function isThemePresetId(id) {
+  return id in THEME_REGISTRY;
+}
+var FORCE_LIGHT_PRESET_IDS = new Set(
+  THEME_PRESET_IDS.filter((id) => THEME_REGISTRY[id].forceLightOnly)
+);
+var DEPRECATED_PRESET_MIGRATIONS = Object.freeze({
+  corporate: "default",
+  playful: "default"
+});
+function migrateDeprecatedPresetId(id) {
+  if (!id) return null;
+  if (isThemePresetId(id)) return id;
+  if (id in DEPRECATED_PRESET_MIGRATIONS) {
+    return DEPRECATED_PRESET_MIGRATIONS[id];
+  }
+  return null;
+}
+
+// src/lib/theme/theme-serialize.ts
+import {
+  generatePalette
+} from "@reopt-ai/opt-palette";
+var GLOBAL_THEME_STYLE_ID = "opt-global-theme";
+var THEME_SPEC_STORAGE_KEY = "opt-theme-spec";
+var THEME_TOKENS_STORAGE_KEY = "opt-theme-tokens";
+
+// src/lib/theme/theme-resolution.ts
+var THEME_PRESET_VALUES = THEME_PRESET_IDS;
+var THEME_MODE_VALUES = ["light", "dark", "system"];
+var LEGACY_THEME_STORAGE_KEY = "opt-theme";
+var THEME_PRESET_STORAGE_KEY = "opt-preset";
+var THEME_MODE_STORAGE_KEY = "opt-mode";
+var DARK_MQ = "(prefers-color-scheme: dark)";
+var FORCE_LIGHT_PRESETS = FORCE_LIGHT_PRESET_IDS;
+var ALL_COMPOUND_THEMES = THEME_PRESET_IDS.flatMap(
+  (id) => FORCE_LIGHT_PRESET_IDS.has(id) ? [id] : [id, `${id}-dark`]
+);
+function hasStorageMutation(storage) {
+  return typeof storage.setItem === "function" && typeof storage.removeItem === "function";
+}
+function isThemePreset(value) {
+  return typeof value === "string" && THEME_PRESET_VALUES.includes(value);
+}
+function isThemeMode(value) {
+  return typeof value === "string" && THEME_MODE_VALUES.includes(value);
+}
+function getCompoundTheme(preset, resolvedMode) {
+  if (FORCE_LIGHT_PRESETS.has(preset)) return preset;
+  return resolvedMode === "dark" ? `${preset}-dark` : preset;
+}
+function resolveThemeMode(preset, mode, systemDark) {
+  if (FORCE_LIGHT_PRESETS.has(preset)) return "light";
+  if (mode === "system") return systemDark ? "dark" : "light";
+  return mode;
+}
+function readStoredTheme(storage, defaultPreset, defaultMode, options = {}) {
+  const legacy = storage.getItem(LEGACY_THEME_STORAGE_KEY);
+  const storedPreset = storage.getItem(THEME_PRESET_STORAGE_KEY);
+  const storedMode = storage.getItem(THEME_MODE_STORAGE_KEY);
+  let preset = defaultPreset;
+  if (typeof legacy === "string") {
+    const migratedLegacy = migrateDeprecatedPresetId(legacy);
+    if (migratedLegacy) {
+      if (options.migrateLegacy && hasStorageMutation(storage)) {
+        storage.setItem(THEME_PRESET_STORAGE_KEY, migratedLegacy);
+        storage.removeItem(LEGACY_THEME_STORAGE_KEY);
+      }
+      preset = migratedLegacy;
+    }
+  } else if (typeof storedPreset === "string") {
+    const migrated = migrateDeprecatedPresetId(storedPreset);
+    if (migrated) {
+      preset = migrated;
+      if (hasStorageMutation(storage) && migrated !== storedPreset && storedPreset in DEPRECATED_PRESET_MIGRATIONS) {
+        storage.setItem(THEME_PRESET_STORAGE_KEY, migrated);
+      }
+    }
+  }
+  const mode = isThemeMode(storedMode) ? storedMode : defaultMode;
+  return { preset, mode };
+}
+function coerceThemeMode(mode, allowedModes, fallback = "system") {
+  var _a;
+  if (!allowedModes || allowedModes.length === 0) return mode;
+  if (allowedModes.includes(mode)) return mode;
+  if (allowedModes.includes(fallback)) return fallback;
+  return (_a = allowedModes[0]) != null ? _a : fallback;
+}
+function createThemeBootScript(defaultPreset = "default", defaultMode = "system", options = {}) {
+  var _a, _b;
+  const presetValues = JSON.stringify(THEME_PRESET_VALUES);
+  const modeValues = JSON.stringify(THEME_MODE_VALUES);
+  const allowedModes = ((_a = options.allowedModes) == null ? void 0 : _a.length) ? options.allowedModes : THEME_MODE_VALUES;
+  const allowedModeValues = JSON.stringify(allowedModes);
+  const forceLightPresets = JSON.stringify(Array.from(FORCE_LIGHT_PRESETS));
+  const deprecatedMap = JSON.stringify(DEPRECATED_PRESET_MIGRATIONS);
+  const lockedPreset = options.lockedPreset;
+  const resolvedDefaultPreset = lockedPreset != null ? lockedPreset : defaultPreset;
+  const defaultPresetLiteral = JSON.stringify(resolvedDefaultPreset);
+  const defaultModeLiteral = JSON.stringify(
+    coerceThemeMode(defaultMode, allowedModes, (_b = allowedModes[0]) != null ? _b : "system")
+  );
+  const lockedPresetLiteral = JSON.stringify(lockedPreset != null ? lockedPreset : null);
+  const styleId = JSON.stringify(GLOBAL_THEME_STYLE_ID);
+  const specKey = JSON.stringify(THEME_SPEC_STORAGE_KEY);
+  const tokensKey = JSON.stringify(THEME_TOKENS_STORAGE_KEY);
+  const presetKey = JSON.stringify(THEME_PRESET_STORAGE_KEY);
+  const modeKey = JSON.stringify(THEME_MODE_STORAGE_KEY);
+  const legacyKey = JSON.stringify(LEGACY_THEME_STORAGE_KEY);
+  const darkMq = JSON.stringify(DARK_MQ);
+  const source = `
+try {
+  var pv=${presetValues},mv=${modeValues},am=${allowedModeValues},fp=${forceLightPresets},dm=${deprecatedMap},lk=${lockedPresetLiteral};
+  function mp(v){if(typeof v!=="string")return null;if(pv.indexOf(v)>=0)return v;return Object.prototype.hasOwnProperty.call(dm,v)?dm[v]:null;}
+  var p=${defaultPresetLiteral};
+  if(!lk){
+    var lp=localStorage.getItem(${legacyKey}),sp=localStorage.getItem(${presetKey});
+    var lpm=mp(lp),spm=mp(sp);
+    p=lpm||spm||${defaultPresetLiteral};
+    if(lpm){localStorage.setItem(${presetKey},lpm);localStorage.removeItem(${legacyKey});}
+    else if(sp&&spm&&sp!==spm){localStorage.setItem(${presetKey},spm);}
+  }
+  var sm=localStorage.getItem(${modeKey});
+  var m=(typeof sm==="string"&&mv.indexOf(sm)>=0&&am.indexOf(sm)>=0)?sm:${defaultModeLiteral};
+  var spec=null,tk=null;
+  if(!lk){try{var sj=localStorage.getItem(${specKey});if(sj)spec=JSON.parse(sj);}catch(e){}}
+  if(!lk){try{var tj=localStorage.getItem(${tokensKey});if(tj)tk=JSON.parse(tj);}catch(e){}}
+  if(!lk&&spec&&spec.kind==="generated"&&tk&&typeof tk.id==="string"&&tk.light&&typeof tk.light==="object"){
+    var fld=spec.forceLightOnly===true;
+    var dk=!fld&&(m==="dark"||(m==="system"&&matchMedia(${darkMq}).matches));
+    var tt=(dk&&tk.dark)?tk.dark:tk.light;
+    var cid=(dk&&tk.dark)?(tk.id+"-dark"):tk.id;
+    var css="";
+    for(var k in tt){if(Object.prototype.hasOwnProperty.call(tt,k))css+=k+":"+tt[k]+";"}
+    var st=document.getElementById(${styleId});
+    if(!st){st=document.createElement("style");st.id=${styleId};document.head.appendChild(st);}
+    st.textContent='[data-theme="'+cid+'"]{'+css+'}';
+    document.documentElement.setAttribute("data-theme",cid);
+  } else {
+    var d=fp.indexOf(p)<0&&(m==="dark"||(m==="system"&&matchMedia(${darkMq}).matches));
+    document.documentElement.setAttribute("data-theme",d?p+"-dark":p);
+  }
+} catch(e){}`;
+  return source.replace(/\n\s*/g, "");
+}
+export {
+  ALL_COMPOUND_THEMES,
+  DARK_MQ,
+  FORCE_LIGHT_PRESETS,
+  LEGACY_THEME_STORAGE_KEY,
+  THEME_MODE_STORAGE_KEY,
+  THEME_MODE_VALUES,
+  THEME_PRESET_STORAGE_KEY,
+  THEME_PRESET_VALUES,
+  coerceThemeMode,
+  createThemeBootScript,
+  getCompoundTheme,
+  isThemeMode,
+  isThemePreset,
+  readStoredTheme,
+  resolveThemeMode
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reopt-ai/opt-ui",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "접근성 우선 UI 컴포넌트 라이브러리. opt-ui-primitives Core, 비즈니스 Shells, 페이지 Surfaces.",
   "type": "module",
   "license": "MIT",
@@ -105,6 +105,17 @@
       },
       "default": "./dist/id-registry.js"
     },
+    "./theme/server": {
+      "import": {
+        "types": "./dist/theme/server.d.ts",
+        "default": "./dist/theme/server.js"
+      },
+      "require": {
+        "types": "./dist/theme/server.d.cts",
+        "default": "./dist/theme/server.cjs"
+      },
+      "default": "./dist/theme/server.js"
+    },
     "./id-registry.json": "./dist/id-registry.json",
     "./tailwind.css": "./dist/tailwind.css",
     "./theme/presets/default.css": "./dist/theme/presets/default.css",
@@ -125,9 +136,9 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@reopt-ai/opt-charts": "^1.0.0",
+    "@reopt-ai/opt-charts": "^1.1.0",
     "@reopt-ai/opt-palette": "^1.0.0",
-    "@reopt-ai/opt-ui-primitives": "^1.4.2",
+    "@reopt-ai/opt-ui-primitives": "^1.5.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.577.0",
     "match-sorter": "^8.2.0",