@floegence/floe-webapp-core 0.50.5 → 0.51.0

package/dist/context/ThemeContext.js

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

package/dist/floe.css

@@ -1,3 +1,5 @@
+@import './input-focus.css';
+@import './surface.css';
 /*
  * Floe design tokens + base styles + custom utilities.
  *
@@ -431,43 +433,6 @@
   }
 }
 
-/* A field has one visible border. Compound controls mark the element that owns it.
- * Keep the contract unlayered so host base borders cannot silently hide focus.
- * It changes color only and never replaces an existing decorative shadow.
- */
-:is(
-  input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='button'], [type='submit'], [type='reset'], [type='image']),
-  textarea, select, [data-floe-input-surface]
-) {
-  outline: none;
-}
-
-:is(
-  input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='button'], [type='submit'], [type='reset'], [type='image']),
-  textarea, select, [data-floe-input-surface]
-):focus:not(:disabled):not([aria-disabled='true']):not([data-floe-input-surface] :is(input, textarea, select)),
-[data-floe-input-surface]:focus-within:not(:disabled):not([aria-disabled='true']) {
-  border-color: var(--floe-input-focus-color, var(--ring));
-}
-
-:is(input, textarea, select, [data-floe-input-surface])[aria-invalid='true'] {
-  --floe-input-focus-color: var(--error);
-}
-
-/* Internal buttons use a local fill to identify keyboard focus without a second frame. */
-[data-floe-input-surface] button:focus-visible {
-  outline: none;
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}
-
-@media (forced-colors: active) {
-  :is(input, textarea, select, [data-floe-input-surface]),
-  :is(input, textarea, select, [data-floe-input-surface])[aria-invalid='true'] {
-    --floe-input-focus-color: Highlight;
-  }
-}
-
 /* Animation utilities */
 @layer utilities {
   .floe-floating-presence {