@monkey-mini-app/panel 0.1.1 → 0.1.5

package/dist/themes.cjs

@@ -1,6 +1,16 @@
 'use strict';
 
 // src/themes.ts
+var LOCAL_PALETTE_ID = "__local__";
+var GLOBAL_PALETTE_ID = "__global__";
+function effectivePalette(stored, hasLocalTheme, hostPalette) {
+  if (stored && stored !== GLOBAL_PALETTE_ID) return stored;
+  if (!stored && hasLocalTheme) return LOCAL_PALETTE_ID;
+  return hostPalette;
+}
+function selectedPalette(stored, hasLocalTheme) {
+  return stored ?? (hasLocalTheme ? LOCAL_PALETTE_ID : GLOBAL_PALETTE_ID);
+}
 var PALETTES = [
   { id: "default", label: "\u9ED8\u8BA4", swatch: "#2563eb" },
   { id: "tokyo", label: "\u4E1C\u4EAC\u591C", swatch: "#7aa2f7" },
@@ -430,6 +440,18 @@ function clampPalette(value) {
 function clampMode(value) {
   return value === "dark" ? "dark" : "light";
 }
+function resolveMode(value) {
+  if (value === "system") {
+    try {
+      if (typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        return "dark";
+      }
+    } catch {
+    }
+    return "light";
+  }
+  return clampMode(value);
+}
 function tokensOf(palette, mode) {
   return TOKENS[clampPalette(palette)][clampMode(mode)];
 }
@@ -480,14 +502,12 @@ function runnerThemeCss() {
   blocks.push(`html[data-theme="light"] input[type="date"],html[data-theme="light"] input[type="time"],html[data-theme="light"] input[type="datetime-local"],html[data-theme="light"] input[type="month"],html[data-theme="light"] input[type="week"]{color-scheme:light}`);
   return blocks.join("\n  ");
 }
-function applyThemeTo(el, theme, palette, custom) {
+function themeCssVars(theme, palette, custom) {
   const mode = clampMode(theme);
   const c = custom && palette ? custom[String(palette)] : void 0;
   const pal = c ? String(palette) : clampPalette(palette);
   const t = c && c.tokens && c.tokens[mode] || tokensOf(pal, mode);
-  el.setAttribute("data-theme", mode);
-  el.setAttribute("data-palette", pal);
-  const map = {
+  return {
     "--dsw-alias-bg": t.bg,
     "--dsw-alias-fg": t.fg,
     "--dsw-alias-surface": t.surface,
@@ -517,18 +537,35 @@ function applyThemeTo(el, theme, palette, custom) {
     "--radius": t.radius,
     "--shadow": t.shadow
   };
+}
+function applyThemeTo(el, theme, palette, custom) {
+  const mode = resolveMode(theme);
+  const c = custom && palette ? custom[String(palette)] : void 0;
+  const pal = c ? String(palette) : clampPalette(palette);
+  const t = c && c.tokens && c.tokens[mode] || tokensOf(pal, mode);
+  el.setAttribute("data-theme", mode);
+  if (theme === "system") el.setAttribute("data-theme-pref", "system");
+  else el.removeAttribute("data-theme-pref");
+  el.setAttribute("data-palette", pal);
+  const map = themeCssVars(mode, palette, custom);
   for (const k of Object.keys(map)) el.style.setProperty(k, map[k]);
   el.style.background = t.bg;
   el.style.color = t.fg;
   return { theme: mode, palette: pal };
 }
 
+exports.GLOBAL_PALETTE_ID = GLOBAL_PALETTE_ID;
+exports.LOCAL_PALETTE_ID = LOCAL_PALETTE_ID;
 exports.PALETTES = PALETTES;
 exports.applyThemeTo = applyThemeTo;
 exports.clampMode = clampMode;
 exports.clampPalette = clampPalette;
 exports.cssVars = cssVars;
+exports.effectivePalette = effectivePalette;
 exports.parseThemeCss = parseThemeCss;
+exports.resolveMode = resolveMode;
 exports.runnerThemeCss = runnerThemeCss;
+exports.selectedPalette = selectedPalette;
+exports.themeCssVars = themeCssVars;
 exports.themeLabelFromCss = themeLabelFromCss;
 exports.tokensOf = tokensOf;

package/dist/themes.d.cts

@@ -1,3 +1,21 @@
+/** Reserved palette id for an app's own `theme.css` (shown only in app scope). */
+declare const LOCAL_PALETTE_ID = "__local__";
+/** Reserved palette id meaning "ignore any `theme.css`, use the host palette". */
+declare const GLOBAL_PALETTE_ID = "__global__";
+/**
+ * Which palette an app actually renders with.
+ *
+ * An explicit user pick wins. With no pick, a shipped `theme.css` wins — that is what lets a
+ * facade carry its own look. `__global__` is the pick for "ignore the file": deleting
+ * `theme.json` would land back on the file, so "follow global" has to be stored, not cleared.
+ */
+declare function effectivePalette(stored: string | null | undefined, hasLocalTheme: boolean, hostPalette: string): string;
+/**
+ * What ThemePop ticks. Not the same as `effectivePalette`: following the host is one row, not a
+ * tick on whichever host palette happens to be selected — otherwise "inherit" and "pinned to
+ * 东京夜" would look identical.
+ */
+declare function selectedPalette(stored: string | null | undefined, hasLocalTheme: boolean): string;
 type PaletteId = "default" | "tokyo" | "forest" | "matcha" | "yellow" | "zoro" | "hokage" | "slate";
 type ModeId = "light" | "dark";
 /** Full token bag for Host chrome + iframe apps (shadcn-compatible). */
@@ -42,6 +60,8 @@ declare function themeLabelFromCss(css: string, fallback: string): string;
 /** Accept current ids and migrate removed palettes (ocean/violet → new families). */
 declare function clampPalette(value: unknown): PaletteId;
 declare function clampMode(value: unknown): ModeId;
+/** Resolve `system` via prefers-color-scheme; otherwise clamp to light/dark. */
+declare function resolveMode(value: unknown): ModeId;
 declare function tokensOf(palette: PaletteId, mode: ModeId): TokenSet;
 declare function cssVars(t: TokenSet): string;
 /** CSS for the iframe runner: default + 5 palettes, each light/dark. */
@@ -55,9 +75,10 @@ type CustomPaletteMap = Record<string, {
         dark: TokenSet;
     };
 }>;
+declare function themeCssVars(theme: unknown, palette: unknown, custom?: CustomPaletteMap): Record<string, string>;
 declare function applyThemeTo(el: HTMLElement, theme: unknown, palette: unknown, custom?: CustomPaletteMap): {
     theme: ModeId;
     palette: PaletteId;
 };
 
-export { type CustomPaletteMap, type ModeId, PALETTES, type PaletteId, type TokenSet, applyThemeTo, clampMode, clampPalette, cssVars, parseThemeCss, runnerThemeCss, themeLabelFromCss, tokensOf };
+export { type CustomPaletteMap, GLOBAL_PALETTE_ID, LOCAL_PALETTE_ID, type ModeId, PALETTES, type PaletteId, type TokenSet, applyThemeTo, clampMode, clampPalette, cssVars, effectivePalette, parseThemeCss, resolveMode, runnerThemeCss, selectedPalette, themeCssVars, themeLabelFromCss, tokensOf };

package/dist/themes.d.ts

@@ -1,3 +1,21 @@
+/** Reserved palette id for an app's own `theme.css` (shown only in app scope). */
+declare const LOCAL_PALETTE_ID = "__local__";
+/** Reserved palette id meaning "ignore any `theme.css`, use the host palette". */
+declare const GLOBAL_PALETTE_ID = "__global__";
+/**
+ * Which palette an app actually renders with.
+ *
+ * An explicit user pick wins. With no pick, a shipped `theme.css` wins — that is what lets a
+ * facade carry its own look. `__global__` is the pick for "ignore the file": deleting
+ * `theme.json` would land back on the file, so "follow global" has to be stored, not cleared.
+ */
+declare function effectivePalette(stored: string | null | undefined, hasLocalTheme: boolean, hostPalette: string): string;
+/**
+ * What ThemePop ticks. Not the same as `effectivePalette`: following the host is one row, not a
+ * tick on whichever host palette happens to be selected — otherwise "inherit" and "pinned to
+ * 东京夜" would look identical.
+ */
+declare function selectedPalette(stored: string | null | undefined, hasLocalTheme: boolean): string;
 type PaletteId = "default" | "tokyo" | "forest" | "matcha" | "yellow" | "zoro" | "hokage" | "slate";
 type ModeId = "light" | "dark";
 /** Full token bag for Host chrome + iframe apps (shadcn-compatible). */
@@ -42,6 +60,8 @@ declare function themeLabelFromCss(css: string, fallback: string): string;
 /** Accept current ids and migrate removed palettes (ocean/violet → new families). */
 declare function clampPalette(value: unknown): PaletteId;
 declare function clampMode(value: unknown): ModeId;
+/** Resolve `system` via prefers-color-scheme; otherwise clamp to light/dark. */
+declare function resolveMode(value: unknown): ModeId;
 declare function tokensOf(palette: PaletteId, mode: ModeId): TokenSet;
 declare function cssVars(t: TokenSet): string;
 /** CSS for the iframe runner: default + 5 palettes, each light/dark. */
@@ -55,9 +75,10 @@ type CustomPaletteMap = Record<string, {
         dark: TokenSet;
     };
 }>;
+declare function themeCssVars(theme: unknown, palette: unknown, custom?: CustomPaletteMap): Record<string, string>;
 declare function applyThemeTo(el: HTMLElement, theme: unknown, palette: unknown, custom?: CustomPaletteMap): {
     theme: ModeId;
     palette: PaletteId;
 };
 
-export { type CustomPaletteMap, type ModeId, PALETTES, type PaletteId, type TokenSet, applyThemeTo, clampMode, clampPalette, cssVars, parseThemeCss, runnerThemeCss, themeLabelFromCss, tokensOf };
+export { type CustomPaletteMap, GLOBAL_PALETTE_ID, LOCAL_PALETTE_ID, type ModeId, PALETTES, type PaletteId, type TokenSet, applyThemeTo, clampMode, clampPalette, cssVars, effectivePalette, parseThemeCss, resolveMode, runnerThemeCss, selectedPalette, themeCssVars, themeLabelFromCss, tokensOf };

package/dist/themes.js

@@ -1 +1 @@
-export { PALETTES, applyThemeTo, clampMode, clampPalette, cssVars, parseThemeCss, runnerThemeCss, themeLabelFromCss, tokensOf } from './chunk-X3QW77RD.js';
+export { GLOBAL_PALETTE_ID, LOCAL_PALETTE_ID, PALETTES, applyThemeTo, clampMode, clampPalette, cssVars, effectivePalette, parseThemeCss, resolveMode, runnerThemeCss, selectedPalette, themeCssVars, themeLabelFromCss, tokensOf } from './chunk-JAWSEXOV.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monkey-mini-app/panel",
-  "version": "0.1.1",
+  "version": "0.1.5",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -42,6 +42,7 @@
   "files": [
     "dist"
   ],
+  "license": "MIT",
   "publishConfig": {
     "access": "public"
   }