@floegence/floe-webapp-core 0.38.0 → 0.39.0

package/dist/components/editor/CodeEditor.js

@@ -1,13 +1,14 @@
-import { use as L, effect as O, className as A, style as D, template as F } from "solid-js/web";
-import { onMount as V, onCleanup as b, createEffect as g } from "solid-js";
-import { useTheme as q } from "../../context/ThemeContext.js";
-import { useResizeObserver as w } from "../../hooks/useResizeObserver.js";
+import { use as z, effect as F, className as L, style as O, template as A } from "solid-js/web";
+import { onMount as D, onCleanup as V, createEffect as g } from "solid-js";
+import { useTheme as b } from "../../context/ThemeContext.js";
+import { useResizeObserver as q } from "../../hooks/useResizeObserver.js";
 import "monaco-editor/min/vs/editor/editor.main.css";
-import { resolveCodeEditorLanguageSpec as U } from "./languages.js";
-import { ensureMonacoEnvironment as p } from "./monacoEnvironment.js";
-import { loadMonacoEditorApi as N } from "./monacoStandaloneRuntime.js";
-var _ = /* @__PURE__ */ F("<div>");
-const T = {
+import { resolveCodeEditorLanguageSpec as w } from "./languages.js";
+import { applyFloeMonacoTheme as U } from "./monacoTheme.js";
+import { ensureMonacoEnvironment as N } from "./monacoEnvironment.js";
+import { loadMonacoEditorApi as P } from "./monacoStandaloneRuntime.js";
+var _ = /* @__PURE__ */ A("<div>");
+const I = {
   readOnly: !0,
   automaticLayout: !1,
   minimap: {
@@ -20,97 +21,98 @@ const T = {
   fontFamily: "var(--font-mono)"
 };
 let $ = 0;
-function k(t, d, a) {
-  return t.Uri.parse(`inmemory://model/${d}/${encodeURIComponent(a)}`);
+function B(t, c, r) {
+  return t.Uri.parse(`inmemory://model/${c}/${encodeURIComponent(r)}`);
 }
-function B(t, d) {
-  if (!t || !d) return "";
-  const a = t.getSelection();
-  return !a || a.isEmpty() ? "" : d.getValueInRange(a);
+function H(t, c) {
+  if (!t || !c) return "";
+  const r = t.getSelection();
+  return !r || r.isEmpty() ? "" : c.getValueInRange(r);
 }
-function X(t) {
-  const d = q();
-  let a;
+function Z(t) {
+  const c = b();
+  let r;
   const x = ++$;
-  let l, n, o, s, y = null, v = 0;
-  const R = w(() => a), S = () => {
-    l && l.editor.setTheme(d.resolvedTheme() === "dark" ? "vs-dark" : "vs");
+  let l, n, o, u, y = null, h = 0;
+  const R = q(() => r), S = () => {
+    const e = c.resolvedTheme(), i = c.shellPreset();
+    l && U(l.editor, e, i);
   }, m = () => !n || !o ? null : {
     editor: n,
     model: o,
     getValue: () => n.getValue(),
-    getSelectedText: () => B(n, o),
+    getSelectedText: () => H(n, o),
     focus: () => n.focus()
   }, C = () => {
     const e = m();
     if (!e) return;
-    const r = e.model.uri.toString();
-    r !== y && (y = r, t.onReady?.(e));
+    const i = e.model.uri.toString();
+    i !== y && (y = i, t.onReady?.(e));
   }, M = () => {
     const e = m();
     e && t.onSelectionChange?.(e.getSelectedText(), e);
-  }, E = async () => {
+  }, T = async () => {
     if (!n || !l) return;
-    const e = ++v, r = U(t.language);
-    let i = r.id;
+    const e = ++h, i = w(t.language);
+    let a = i.id;
     try {
-      await r.load?.();
+      await i.load?.();
     } catch {
-      if (e !== v) return;
-      i = "plaintext";
+      if (e !== h) return;
+      a = "plaintext";
     }
-    if (!n || e !== v) return;
-    const u = k(l, x, t.path);
-    if (o && o.uri.toString() === u.toString()) {
-      o.getLanguageId() !== i && l.editor.setModelLanguage(o, i), o.getValue() !== t.value && o.setValue(t.value), C(), M();
+    if (!n || e !== h) return;
+    const d = B(l, x, t.path);
+    if (o && o.uri.toString() === d.toString()) {
+      o.getLanguageId() !== a && l.editor.setModelLanguage(o, a), o.getValue() !== t.value && o.setValue(t.value), C(), M();
       return;
     }
-    const c = l.editor.createModel(t.value, i, u);
-    o?.dispose(), o = c, n.setModel(o), C(), M();
+    const s = l.editor.createModel(t.value, a, d);
+    o?.dispose(), o = s, n.setModel(o), C(), M();
   };
-  return V(() => {
-    let e = !1, r, i;
+  return D(() => {
+    let e = !1, i, a;
     (async () => {
-      if (!a || (p(), l = await N(t.runtimeOptions), e || !a) || (n = l.editor.create(a, {
+      if (!r || (N(), l = await P(t.runtimeOptions), e || !r) || (n = l.editor.create(r, {
         model: null,
-        ...T,
+        ...I,
         ...t.options ?? {}
-      }), S(), await E(), e || !n)) return;
-      const c = t.onContentChange, I = t.onChange, z = t.onSelectionChange;
-      r = n.onDidChangeModelContent((f) => {
-        const h = m();
-        h && (c?.(f, h), I && I(h.getValue()));
-      }), i = n.onDidChangeCursorSelection(() => {
+      }), S(), await T(), e || !n)) return;
+      const s = t.onContentChange, E = t.onChange, p = t.onSelectionChange;
+      i = n.onDidChangeModelContent((f) => {
+        const v = m();
+        v && (s?.(f, v), E && E(v.getValue()));
+      }), a = n.onDidChangeCursorSelection(() => {
         const f = m();
-        f && z?.(f.getSelectedText(), f);
+        f && p?.(f.getSelectedText(), f);
       });
-    })().catch((c) => {
-      console.error("Failed to initialize Monaco editor runtime", c);
-    }), b(() => {
-      e = !0, r?.dispose(), i?.dispose(), s && cancelAnimationFrame(s), n?.dispose(), o?.dispose(), l = void 0, n = void 0, o = void 0;
+    })().catch((s) => {
+      console.error("Failed to initialize Monaco editor runtime", s);
+    }), V(() => {
+      e = !0, i?.dispose(), a?.dispose(), u && cancelAnimationFrame(u), n?.dispose(), o?.dispose(), l = void 0, n = void 0, o = void 0;
     });
   }), g(() => {
     S();
   }), g(() => {
     n && n.updateOptions({
-      ...T,
+      ...I,
       ...t.options ?? {}
     });
   }), g(() => {
-    t.path, t.language, t.value, E();
+    t.path, t.language, t.value, T();
   }), g(() => {
     const e = R();
-    !e || !n || (s && cancelAnimationFrame(s), s = requestAnimationFrame(() => {
+    !e || !n || (u && cancelAnimationFrame(u), u = requestAnimationFrame(() => {
       n?.layout({
         width: e.width,
         height: e.height
       });
     }));
   }), (() => {
-    var e = _(), r = a;
-    return typeof r == "function" ? L(r, e) : a = e, O((i) => {
-      var u = t.class, c = t.style;
-      return u !== i.e && A(e, i.e = u), i.t = D(e, c, i.t), i;
+    var e = _(), i = r;
+    return typeof i == "function" ? z(i, e) : r = e, F((a) => {
+      var d = t.class, s = t.style;
+      return d !== a.e && L(e, a.e = d), a.t = O(e, s, a.t), a;
     }, {
       e: void 0,
       t: void 0
@@ -118,5 +120,5 @@ function X(t) {
   })();
 }
 export {
-  X as CodeEditor
+  Z as CodeEditor
 };

package/dist/components/editor/index.d.ts

@@ -1,3 +1,4 @@
 export { CodeEditor, type CodeEditorProps, type CodeEditorApi } from './CodeEditor';
-export { resolveCodeEditorLanguageSpec, isCodeEditorLanguageSupported, type CodeEditorLanguageSpec } from './languages';
+export { resolveCodeEditorLanguageSpec, isCodeEditorLanguageSupported, type CodeEditorLanguageSpec, } from './languages';
+export { applyFloeMonacoTheme, resolveFloeMonacoTheme, type MonacoThemeData, type MonacoThemeRegistry, type ResolvedFloeMonacoTheme, } from './monacoTheme';
 export { DEFAULT_MONACO_RUNTIME_PROFILE, DEFAULT_MONACO_STANDALONE_FEATURES, MONACO_RUNTIME_BLUEPRINTS, normalizeMonacoRuntimeFeatureSet, resolveMonacoRuntimeProfile, resolveMonacoRuntimeRequest, type CodeEditorRuntimeOptions, type MonacoRuntimeProfileName, type MonacoStandaloneRuntimeBlueprint, type MonacoStandaloneRuntimeModuleDescriptor, type MonacoRuntimeFeatureSet, type ResolvedMonacoRuntimeRequest, } from './monacoStandaloneRuntime';

package/dist/components/editor/monacoTheme.d.ts

@@ -0,0 +1,17 @@
+import type { FloeMonacoThemeDefinition, FloeMonacoTokenRule, FloeThemePreset } from '../../styles/themes';
+export interface MonacoThemeData {
+    base: 'vs' | 'vs-dark';
+    inherit: boolean;
+    rules: FloeMonacoTokenRule[];
+    colors: Record<string, string>;
+}
+export interface MonacoThemeRegistry {
+    defineTheme: (themeName: string, themeData: MonacoThemeData) => void;
+    setTheme: (themeName: string) => void;
+}
+export interface ResolvedFloeMonacoTheme {
+    name: string;
+    definition?: FloeMonacoThemeDefinition;
+}
+export declare function resolveFloeMonacoTheme(mode: 'light' | 'dark', preset?: FloeThemePreset): ResolvedFloeMonacoTheme;
+export declare function applyFloeMonacoTheme(registry: MonacoThemeRegistry, mode: 'light' | 'dark', preset?: FloeThemePreset): string;

package/dist/components/editor/monacoTheme.js

@@ -0,0 +1,23 @@
+function l(n, o) {
+  const i = o?.monaco?.[n];
+  return i ? {
+    name: `floe-shell-${n}-${o.name}`,
+    definition: i
+  } : { name: n === "dark" ? "vs-dark" : "vs" };
+}
+function r(n, o, i) {
+  const e = l(o, i);
+  if (e.definition) {
+    const a = {
+      ...e.definition,
+      rules: e.definition.rules.map((t) => ({ ...t })),
+      colors: { ...e.definition.colors }
+    };
+    n.defineTheme(e.name, a);
+  }
+  return n.setTheme(e.name), e.name;
+}
+export {
+  r as applyFloeMonacoTheme,
+  l as resolveFloeMonacoTheme
+};

package/dist/context/FloeConfigContext.d.ts

@@ -79,6 +79,12 @@ export interface FloeThemeConfig {
     defaultPreset?: string;
     /** Optional named token presets for switching visual palettes without changing light/dark mode. */
     presets?: readonly FloeThemePreset[];
+    /** Optional shell-wide presets. Kept separate from product-scoped presets such as chart palettes. */
+    shellPresets?: readonly FloeThemePreset[];
+    /** Optional per-mode defaults for shell presets. Falls back to the first compatible preset. */
+    defaultShellPreset?: Partial<Record<'light' | 'dark', string>>;
+    /** Storage key for the versioned per-mode shell preset selection map. */
+    shellPresetStorageKey?: string;
     /**
      * Optional CSS variable overrides applied at the document root.
      * `shared` applies to both themes, while `light` / `dark` only apply

package/dist/context/ThemeContext.d.ts

@@ -1,5 +1,5 @@
 import { type Accessor } from 'solid-js';
-import { type FloeThemePreset, type ThemeType } from '../styles/themes';
+import { type FloeShellThemeMode, type FloeThemePreset, type ThemeType } from '../styles/themes';
 export interface ThemeContextValue {
     theme: Accessor<ThemeType>;
     resolvedTheme: Accessor<'light' | 'dark'>;
@@ -8,6 +8,11 @@ export interface ThemeContextValue {
     themePresets: Accessor<readonly FloeThemePreset[]>;
     themePreset: Accessor<FloeThemePreset | undefined>;
     setThemePreset: (presetName: string | undefined) => void;
+    shellPresets: Accessor<readonly FloeThemePreset[]>;
+    shellPreset: Accessor<FloeThemePreset | undefined>;
+    shellPresetForMode: (mode: FloeShellThemeMode) => FloeThemePreset | undefined;
+    setShellPreset: (presetName: string) => void;
+    selectShellTheme: (mode: FloeShellThemeMode, presetName: string) => void;
 }
 export declare function createThemeService(): ThemeContextValue;
 export declare const ThemeProvider: (props: {

package/dist/context/ThemeContext.js

@@ -1,69 +1,100 @@
-import { createSignal as g, createMemo as E, createEffect as p, onCleanup as P } from "solid-js";
-import { createSimpleContext as N } from "./createSimpleContext.js";
-import { useResolvedFloeConfig as L } from "./FloeConfigContext.js";
-import { getSystemTheme as M, applyTheme as F, syncThemeTokenOverrides as y, resolveThemeTokens as O } from "../styles/themes/index.js";
-function i(t, n, r) {
-  if (n.length !== 0)
-    return t && n.some((m) => m.name === t) ? t : r && n.some((m) => m.name === r) ? r : n[0]?.name;
+import { createSignal as u, createMemo as L, createEffect as P, onCleanup as $ } from "solid-js";
+import { createSimpleContext as I } from "./createSimpleContext.js";
+import { useResolvedFloeConfig as J } from "./FloeConfigContext.js";
+import { isThemeType as U, getSystemTheme as W, applyTheme as X, applyShellThemeAttribute as z, syncThemeTokenOverrides as A, resolveThemeTokens as Y } from "../styles/themes/index.js";
+import { normalizeShellThemeSelection as O, presetSupportsMode as Q } from "../styles/themes/presets.js";
+function a(s, r, c) {
+  if (r.length !== 0)
+    return s && r.some((i) => i.name === s) ? s : c && r.some((i) => i.name === c) ? c : r[0]?.name;
 }
-function Q() {
-  const t = L(), n = () => t.config.theme.storageKey, r = () => t.config.theme.defaultTheme, m = () => t.config.theme.tokens, s = () => t.config.theme.presets ?? [], a = () => t.config.theme.presetStorageKey ?? `${n()}-preset`, c = () => i(t.config.theme.defaultPreset, s()), S = t.persist.load(n(), r()), [d, k] = g(S), x = t.persist.load(a(), c()), [f, l] = g(i(x, s(), c())), [C, K] = g(M());
-  let h = [];
-  const T = E(() => {
-    const e = i(f(), s(), c());
+function Z() {
+  const s = J(), r = () => s.config.theme.storageKey, c = () => s.config.theme.defaultTheme, i = () => s.config.theme.tokens, o = () => s.config.theme.presets ?? [], g = () => s.config.theme.presetStorageKey ?? `${r()}-preset`, m = () => a(s.config.theme.defaultPreset, o()), l = () => s.config.theme.shellPresets ?? [], y = () => s.config.theme.shellPresetStorageKey ?? `${r()}-shell-preset`, k = () => s.config.theme.defaultShellPreset ?? {}, x = s.persist.load(r(), c()), R = U(x) ? x : c(), [T, V] = u(R), j = s.persist.load(g(), m()), [S, K] = u(a(j, o(), m())), q = s.persist.load(y(), void 0), [p, C] = u(O(q, l(), k())), [B, D] = u(W());
+  let d = [];
+  const M = L(() => {
+    const e = a(S(), o(), m());
     if (e)
-      return s().find((o) => o.name === e);
-  }), u = () => {
-    const e = d();
-    return e === "system" ? C() : e;
-  };
-  if (p(() => {
-    const e = i(f(), s(), c());
-    f() !== e && l(e);
+      return o().find((t) => t.name === e);
+  }), h = () => {
+    const e = T();
+    return e === "system" ? B() : e;
+  }, w = (e) => {
+    const t = p()[e];
+    if (t)
+      return l().find((n) => n.name === t && Q(n, e));
+  }, E = L(() => w(h()));
+  if (P(() => {
+    const e = a(S(), o(), m());
+    S() !== e && K(e);
+  }), P(() => {
+    const e = p(), t = O(e, l(), k());
+    (e.light !== t.light || e.dark !== t.dark) && C(t);
   }), typeof window < "u") {
-    const e = window.matchMedia("(prefers-color-scheme: dark)"), o = (w) => {
-      K(w.matches ? "dark" : "light");
+    const e = window.matchMedia("(prefers-color-scheme: dark)"), t = (n) => {
+      D(n.matches ? "dark" : "light");
     };
-    e.addEventListener("change", o), P(() => e.removeEventListener("change", o));
+    e.addEventListener("change", t), $(() => e.removeEventListener("change", t));
   }
-  p(() => {
-    const e = d(), o = u();
-    F(e), h = y(O(o, m(), T()?.tokens), h);
-  }), P(() => {
-    h = y(void 0, h);
+  P(() => {
+    const e = T(), t = h(), n = E();
+    X(e), z(n?.name), d = A(Y(t, i(), n?.tokens, M()?.tokens), d);
+  }), $(() => {
+    z(void 0), d = A(void 0, d);
   });
   const v = (e) => {
-    k(e), t.persist.debouncedSave(n(), e);
+    V(e), s.persist.debouncedSave(r(), e);
+  }, G = () => {
+    const e = h();
+    v(e === "light" ? "dark" : "light");
+  }, H = (e) => {
+    const t = a(e, o(), m());
+    if (K(t), !t) {
+      s.persist.remove(g());
+      return;
+    }
+    s.persist.debouncedSave(g(), t);
+  }, N = (e, t) => {
+    const n = l().find((F) => F.name === t && Q(F, e));
+    if (!n) return !1;
+    const f = p();
+    if (f[e] === n.name) return !0;
+    const b = {
+      ...f,
+      version: 1,
+      [e]: n.name
+    };
+    return C(b), s.persist.debouncedSave(y(), b), !0;
   };
   return {
-    theme: d,
-    resolvedTheme: u,
+    theme: T,
+    resolvedTheme: h,
     setTheme: v,
-    toggleTheme: () => {
-      const e = u();
-      v(e === "light" ? "dark" : "light");
+    toggleTheme: G,
+    themePresets: o,
+    themePreset: M,
+    setThemePreset: H,
+    shellPresets: l,
+    shellPreset: E,
+    shellPresetForMode: w,
+    setShellPreset: (e) => {
+      const t = l().find((f) => f.name === e);
+      if (!t) return;
+      const n = t.mode === "light" || t.mode === "dark" ? t.mode : h();
+      N(n, e);
     },
-    themePresets: s,
-    themePreset: T,
-    setThemePreset: (e) => {
-      const o = i(e, s(), c());
-      if (l(o), !o) {
-        t.persist.remove(a());
-        return;
-      }
-      t.persist.debouncedSave(a(), o);
+    selectShellTheme: (e, t) => {
+      N(e, t) && v(e);
     }
   };
 }
 const {
-  Provider: A,
-  use: B
-} = N({
+  Provider: ce,
+  use: le
+} = I({
   name: "Theme",
-  init: Q
+  init: Z
 });
 export {
-  A as ThemeProvider,
-  Q as createThemeService,
-  B as useTheme
+  ce as ThemeProvider,
+  Z as createThemeService,
+  le as useTheme
 };

package/dist/editor.js

@@ -1,14 +1,17 @@
 import { CodeEditor as r } from "./components/editor/CodeEditor.js";
-import { DEFAULT_MONACO_RUNTIME_PROFILE as E, DEFAULT_MONACO_STANDALONE_FEATURES as a, MONACO_RUNTIME_BLUEPRINTS as i, normalizeMonacoRuntimeFeatureSet as n, resolveMonacoRuntimeProfile as R, resolveMonacoRuntimeRequest as u } from "./components/editor/monacoStandaloneRuntime.js";
-import { isCodeEditorLanguageSupported as M, resolveCodeEditorLanguageSpec as N } from "./components/editor/languages.js";
+import { DEFAULT_MONACO_RUNTIME_PROFILE as a, DEFAULT_MONACO_STANDALONE_FEATURES as E, MONACO_RUNTIME_BLUEPRINTS as n, normalizeMonacoRuntimeFeatureSet as m, resolveMonacoRuntimeProfile as M, resolveMonacoRuntimeRequest as i } from "./components/editor/monacoStandaloneRuntime.js";
+import { applyFloeMonacoTheme as p, resolveFloeMonacoTheme as R } from "./components/editor/monacoTheme.js";
+import { isCodeEditorLanguageSupported as u, resolveCodeEditorLanguageSpec as A } from "./components/editor/languages.js";
 export {
   r as CodeEditor,
-  E as DEFAULT_MONACO_RUNTIME_PROFILE,
-  a as DEFAULT_MONACO_STANDALONE_FEATURES,
-  i as MONACO_RUNTIME_BLUEPRINTS,
-  M as isCodeEditorLanguageSupported,
-  n as normalizeMonacoRuntimeFeatureSet,
-  N as resolveCodeEditorLanguageSpec,
-  R as resolveMonacoRuntimeProfile,
-  u as resolveMonacoRuntimeRequest
+  a as DEFAULT_MONACO_RUNTIME_PROFILE,
+  E as DEFAULT_MONACO_STANDALONE_FEATURES,
+  n as MONACO_RUNTIME_BLUEPRINTS,
+  p as applyFloeMonacoTheme,
+  u as isCodeEditorLanguageSupported,
+  m as normalizeMonacoRuntimeFeatureSet,
+  A as resolveCodeEditorLanguageSpec,
+  R as resolveFloeMonacoTheme,
+  M as resolveMonacoRuntimeProfile,
+  i as resolveMonacoRuntimeRequest
 };

package/dist/floe.css

@@ -15,6 +15,7 @@
 /* Import theme definitions - they define the CSS variables */
 @import './themes/light.css';
 @import './themes/dark.css';
+@import './themes/shell-presets.generated.css';
 
 :root {
   --radius: 0.375rem;