@monkey-mini-app/panel 0.1.0 → 0.1.4

package/README.md

@@ -0,0 +1,46 @@
+# @monkey-mini-app/panel
+
+Pure React panel UI (the `PanelHost` seam). It renders the shell you see around a mini-app
+—— the app list, settings, theme pop, tab bar. It talks to a host **over HTTP/frame**, so
+it bundles no server and must not depend on `host` or `dsh`.
+
+## Mount
+
+```tsx
+import { createMiniAppPanel, createRestPanelHost } from "@monkey-mini-app/panel";
+
+const panel = createMiniAppPanel(createRestPanelHost({ baseUrl, ... }), { ... });
+// panel.mount(el) / panel.unmount()
+```
+
+`createMiniAppPanel(host: PanelHost, options?)` returns a `PanelInstance`. `PanelProvider`
+supplies `usePanelActions` / `usePanelI18n` for the state + i18n context. For a REST
+backend, build the host with `createRestPanelHost` (`RestOptions`) which drives the host's
+`HttpGateway`.
+
+## Seams
+
+| Export | Role |
+|--------|------|
+| `PanelHost` / `capabilitiesOf` | The panel adapter seam (fetchApps / persistTheme / frame …) |
+| `createRestPanelHost` / `RestOptions` | REST client that drives `HttpGateway` |
+| `createFrameController` / `FrameController` | iframe ↔ host frame bridge |
+| `createHostShell` / `HostShellInstance` | host wiring for the panel |
+| `createMiniAppPanel` / `MiniAppPanel` | The top-level panel component / mount |
+
+## State & theme
+
+- `usePanelState` / `getPanelState` / `setPanelState` / `subscribePanel` — shared store.
+- `themes.ts` — `cssVars`, `PALETTES`, `tokensOf`, `applyThemeTo`, `runnerThemeCss`,
+  `parseThemeCss`, `*Theme*` helpers.
+- `styles.ts` — `injectPanelCss` / `PANEL_CSS_TAG` (inject the panel CSS without a file).
+
+## Errors
+
+`HostUnreachableError` — thrown by the REST host when the host socket is unreachable; the
+panel renders a browser-actionable message instead of a blank screen.
+
+## Constraints
+
+- Pure React: no `/api`, no `host`/`dsh` dependency (import direction enforced by eslint).
+- Theme/CSS helpers are self-contained so the panel can be dropped into any host.

package/dist/{chunk-X3QW77RD.js → chunk-JAWSEXOV.js}

@@ -3,6 +3,16 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // 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" },
@@ -432,6 +442,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)];
 }
@@ -482,14 +504,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,
@@ -519,10 +539,21 @@ 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 };
 }
 
-export { PALETTES, __publicField, applyThemeTo, clampMode, clampPalette, cssVars, parseThemeCss, runnerThemeCss, themeLabelFromCss, tokensOf };
+export { GLOBAL_PALETTE_ID, LOCAL_PALETTE_ID, PALETTES, __publicField, applyThemeTo, clampMode, clampPalette, cssVars, effectivePalette, parseThemeCss, resolveMode, runnerThemeCss, selectedPalette, themeCssVars, themeLabelFromCss, tokensOf };