@floegence/floe-webapp-core 0.86.60 → 0.86.63

package/dist/context/ComponentRegistry.js

@@ -2,8 +2,8 @@ import { createSignal as C } from "solid-js";
 import { createSimpleContext as h } from "./createSimpleContext.js";
 import { useResolvedFloeConfig as w } from "./FloeConfigContext.js";
 import { useTheme as x } from "./ThemeContext.js";
-import { useLayout as v } from "./LayoutContext.js";
-import { useCommand as b } from "./CommandContext.js";
+import { useLayout as b } from "./LayoutContext.js";
+import { useCommand as v } from "./CommandContext.js";
 import { useNotification as R } from "./NotificationContext.js";
 import { deferNonBlocking as M } from "../utils/defer.js";
 function S(r) {
@@ -23,8 +23,8 @@ function A(r, i) {
     remove: (a) => M(() => r.remove(n + a))
   };
 }
-function D() {
-  const r = x(), i = v(), n = b(), a = R(), m = w();
+function z() {
+  const r = x(), i = b(), n = v(), a = R(), m = w();
   return (l, p) => ({
     protocol: p?.protocol,
     theme: r,
@@ -37,37 +37,37 @@ function D() {
 }
 const f = h({
   name: "ComponentRegistry",
-  init: B
-}), G = f.Provider;
-function H() {
+  init: k
+}), D = f.Provider;
+function G() {
   return f.use();
 }
-function J() {
+function H() {
   return f.useOptional();
 }
-function K() {
+function J() {
   return f.has();
 }
-function B() {
-  const [r, i] = C(/* @__PURE__ */ new Map()), [n, a] = C(/* @__PURE__ */ new Set()), m = /* @__PURE__ */ new Map(), l = (t) => {
-    i((e) => new Map(e).set(t.id, t));
-  }, p = (t) => {
-    const e = t.map((o) => o.id).filter((o) => !!o);
-    return i((o) => {
-      const c = new Map(o);
-      return t.forEach((u) => c.set(u.id, u)), c;
+function k() {
+  const [r, i] = C(/* @__PURE__ */ new Map()), [n, a] = C(/* @__PURE__ */ new Set()), m = /* @__PURE__ */ new Map(), l = (e) => {
+    i((o) => new Map(o).set(e.id, e));
+  }, p = (e) => {
+    const o = e.map((t) => t.id).filter((t) => !!t);
+    return i((t) => {
+      const c = new Map(t);
+      return e.forEach((u) => c.set(u.id, u)), c;
     }), () => {
-      e.forEach((o) => {
-        y(o);
+      o.forEach((t) => {
+        y(t);
       });
     };
-  }, d = async (t, e) => {
-    const o = r().get(t);
-    if (!o || n().has(t)) return;
+  }, d = async (e, o) => {
+    const t = r().get(e);
+    if (!t || n().has(e)) return;
     const c = [];
     try {
-      if (o.commands?.length) {
-        const u = o.commands.map((s) => ({
+      if (t.commands?.length) {
+        const u = t.commands.map((s) => ({
           id: s.id,
           title: s.title,
           description: s.description,
@@ -75,32 +75,32 @@ function B() {
           keybind: s.keybind,
           allowWhileTyping: s.allowWhileTyping,
           category: s.category,
-          execute: () => s.execute(e)
+          execute: () => s.execute(o)
         }));
-        c.push(e.commands.registerAll(u));
+        c.push(o.commands.registerAll(u));
       }
-      await o.onMount?.(e), c.length && m.set(t, () => c.forEach((u) => u())), a((u) => {
+      await t.onMount?.(o), c.length && m.set(e, () => c.forEach((u) => u())), a((u) => {
         const s = new Set(u);
-        return s.add(t), s;
+        return s.add(e), s;
       });
     } catch (u) {
       throw c.forEach((s) => s()), u;
     }
-  }, g = async (t) => {
-    const e = r().get(t);
-    if (e && n().has(t))
+  }, g = async (e) => {
+    const o = r().get(e);
+    if (o && n().has(e))
       try {
-        await e.onUnmount?.();
+        await o.onUnmount?.();
       } finally {
-        m.get(t)?.(), m.delete(t), a((o) => {
-          const c = new Set(o);
-          return c.delete(t), c;
+        m.get(e)?.(), m.delete(e), a((t) => {
+          const c = new Set(t);
+          return c.delete(e), c;
         });
       }
-  }, y = async (t) => {
-    await g(t), i((e) => {
-      const o = new Map(e);
-      return o.delete(t), o;
+  }, y = async (e) => {
+    await g(e), i((o) => {
+      const t = new Map(o);
+      return t.delete(e), t;
     });
   };
   return {
@@ -109,45 +109,39 @@ function B() {
     unregister: y,
     mount: d,
     unmount: g,
-    mountAll: async (t) => {
-      for (const e of r().keys())
-        await d(e, t(e));
+    mountAll: async (e) => {
+      for (const o of r().keys())
+        await d(o, e(o));
     },
     unmountAll: async () => {
-      for (const t of n())
-        await g(t);
+      for (const e of n())
+        await g(e);
     },
     components: r,
     mountedComponents: n,
     sidebarItems: () => {
-      const t = [];
-      for (const e of r().values())
-        e.sidebar && t.push({
-          ...e,
-          order: e.sidebar.order ?? 100
+      const e = [];
+      for (const o of r().values())
+        o.sidebar && e.push({
+          ...o,
+          order: o.sidebar.order ?? 100
         });
-      return t.sort((e, o) => e.order - o.order);
+      return e.sort((o, t) => o.order - t.order);
     },
     allCommands: () => {
-      const t = [];
-      for (const e of r().values())
-        e.commands && t.push(...e.commands);
-      return t;
-    },
-    statusBarItems: () => {
-      const t = [];
-      for (const e of r().values())
-        e.statusBar && t.push(...e.statusBar);
-      return t;
+      const e = [];
+      for (const o of r().values())
+        o.commands && e.push(...o.commands);
+      return e;
     },
-    getComponent: (t) => r().get(t)
+    getComponent: (e) => r().get(e)
   };
 }
 export {
-  G as ComponentRegistryProvider,
-  B as createComponentRegistry,
-  K as hasComponentRegistryContext,
-  D as useComponentContextFactory,
-  H as useComponentRegistry,
-  J as useOptionalComponentRegistry
+  D as ComponentRegistryProvider,
+  k as createComponentRegistry,
+  J as hasComponentRegistryContext,
+  z as useComponentContextFactory,
+  G as useComponentRegistry,
+  H as useOptionalComponentRegistry
 };

package/dist/context/FloeConfigContext.d.ts

@@ -168,12 +168,6 @@ export interface FloeStrings {
         cancel: string;
         confirm: string;
     };
-    statusIndicator: {
-        connected: string;
-        disconnected: string;
-        connecting: string;
-        error: string;
-    };
 }
 export interface FloeConfig {
     storage: FloeStorageConfig;

package/dist/context/FloeConfigContext.js

@@ -1,5 +1,5 @@
-import { createComponent as C } from "solid-js/web";
-import { createContext as L, createMemo as u, createEffect as S, onCleanup as F, useContext as v } from "solid-js";
+import { createComponent as L } from "solid-js/web";
+import { createContext as C, createMemo as u, createEffect as S, onCleanup as F, useContext as v } from "solid-js";
 const m = {
   storage: {
     namespace: "floe",
@@ -71,16 +71,10 @@ const m = {
     confirmDialog: {
       cancel: "Cancel",
       confirm: "Confirm"
-    },
-    statusIndicator: {
-      connected: "Connected",
-      disconnected: "Disconnected",
-      connecting: "Connecting",
-      error: "Error"
     }
   }
 };
-function I() {
+function k() {
   if (!(typeof window > "u"))
     return {
       getItem: (e) => localStorage.getItem(e),
@@ -90,7 +84,7 @@ function I() {
     };
 }
 function h(e) {
-  const t = e.adapter ?? I(), c = e.namespace ? `${e.namespace}-` : "", r = (o) => `${c}${o}`, n = () => e.enabled && !!t, i = /* @__PURE__ */ new Map(), d = () => {
+  const t = e.adapter ?? k(), c = e.namespace ? `${e.namespace}-` : "", r = (o) => `${c}${o}`, n = () => e.enabled && !!t, i = /* @__PURE__ */ new Map(), d = () => {
     if (n()) {
       for (const [o, a] of i.entries()) {
         clearTimeout(a.timer);
@@ -167,7 +161,7 @@ function h(e) {
     }
   };
 }
-function k(e) {
+function I(e) {
   if (typeof window > "u") return () => {
   };
   const t = () => {
@@ -207,11 +201,11 @@ function b(e, t) {
   }
   return c;
 }
-const y = L();
+const y = C();
 function N(e) {
   const t = u(() => b(m, e.config)), c = u(() => h(t().storage));
   S(() => {
-    const n = c(), d = t().storage.enabled ? k(n) : () => {
+    const n = c(), d = t().storage.enabled ? I(n) : () => {
     };
     F(() => {
       d(), n.dispose?.();
@@ -221,7 +215,7 @@ function N(e) {
     config: t(),
     persist: c()
   }));
-  return C(y.Provider, {
+  return L(y.Provider, {
     get value() {
       return r();
     },
@@ -246,7 +240,7 @@ function D() {
 export {
   m as DEFAULT_FLOE_CONFIG,
   N as FloeConfigProvider,
-  k as installPersistFlushListeners,
+  I as installPersistFlushListeners,
   O as useFloeConfig,
   D as useResolvedFloeConfig
 };

package/dist/context/NotificationContext.js

@@ -97,8 +97,8 @@ function R(i) {
     error: () => A()
   }, s = () => i.notification.type === "error" || i.notification.type === "warning" ? "alert" : "status", f = () => s() === "alert" ? "assertive" : "polite";
   return (() => {
-    var t = z(), e = t.firstChild, l = e.firstChild, r = l.nextSibling, p = r.firstChild, b = r.nextSibling;
-    return u(l, () => n[i.notification.type]()), u(p, () => i.notification.title), u(r, d(x, {
+    var t = z(), e = t.firstChild, l = e.firstChild, r = l.nextSibling, b = r.firstChild, p = r.nextSibling;
+    return u(l, () => n[i.notification.type]()), u(b, () => i.notification.title), u(r, d(x, {
       get when() {
         return i.notification.message;
       },
@@ -114,8 +114,8 @@ function R(i) {
         var o = j();
         return o.$$click = () => i.notification.action?.onClick(), u(o, () => i.notification.action.label), o;
       }
-    }), null), b.$$click = () => i.onDismiss(), k((o) => {
-      var m = N("animate-in slide-in-from-right fade-in duration-200", "rounded-lg border border-border border-l-[3px] p-3.5", "shadow-md", "bg-card text-card-foreground", a[i.notification.type]), v = s(), g = f();
+    }), null), p.$$click = () => i.onDismiss(), k((o) => {
+      var m = N("animate-in slide-in-from-right fade-in duration-[var(--floe-duration-base)]", "rounded-control border border-border border-l-[3px] p-3.5", "shadow-md", "bg-card text-card-foreground", a[i.notification.type]), v = s(), g = f();
       return m !== o.e && $(t, o.e = m), v !== o.t && h(t, "role", o.t = v), g !== o.a && h(t, "aria-live", o.a = g), o;
     }, {
       e: void 0,

package/dist/context/ThemeContext.js

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

package/dist/context/index.d.ts

@@ -4,7 +4,7 @@ export { ThemeProvider, useTheme, createThemeService, type ThemeContextValue } f
 export { LayoutProvider, useLayout, useMobileLayout, createLayoutService, type LayoutContextValue } from './LayoutContext';
 export { CommandProvider, useCommand, createCommandService, type Command, type CommandContextValue } from './CommandContext';
 export { NotificationProvider, useNotification, createNotificationService, NotificationContainer, type Notification, type NotificationType, type NotificationContextValue, } from './NotificationContext';
-export { ComponentRegistryProvider, useComponentRegistry, useOptionalComponentRegistry, hasComponentRegistryContext, useComponentContextFactory, createComponentRegistry, type FloeComponent, type ComponentContext, type CommandContribution, type StatusBarContribution, type ComponentRegistryValue, } from './ComponentRegistry';
+export { ComponentRegistryProvider, useComponentRegistry, useOptionalComponentRegistry, hasComponentRegistryContext, useComponentContextFactory, createComponentRegistry, type FloeComponent, type ComponentContext, type CommandContribution, type ComponentRegistryValue, } from './ComponentRegistry';
 export { WidgetRegistryProvider, useWidgetRegistry, createWidgetRegistry, type WidgetDefinition, type WidgetProps, type WidgetRegistryValue, } from './WidgetRegistry';
 export { DeckProvider, useDeck, createDeckService, type DeckWidget, type DeckLayout, type DragState, type ResizeState, type DeckContextValue, } from './DeckContext';
 export { WidgetStateProvider, useWidgetStateContext, useWidgetState, useCurrentWidgetId, type WidgetStateContextValue, type WidgetStateProviderProps, } from './WidgetStateContext';

package/dist/display-mode.css

@@ -14,51 +14,8 @@
     overflow: hidden;
   }
 
-  .display-mode-switcher {
-    display: inline-flex;
-    align-items: center;
-    gap: 1px;
-    padding: 2px;
-    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 60%, transparent);
-    border-radius: 8px;
-    background: color-mix(in srgb, var(--muted, #f1f1f1) 70%, transparent);
-  }
-
-  .display-mode-switcher__pill {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    padding: 4px 9px;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-    color: var(--muted-foreground, #888);
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: -0.005em;
-    cursor: pointer;
-    isolation: isolate;
-    transition: color 140ms ease;
-  }
-
-  .display-mode-switcher__pill:hover,
-  .display-mode-switcher__pill.is-active {
-    color: var(--foreground, #111);
-  }
-
-  .display-mode-switcher__pill-bg {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 70%, transparent);
-    border-radius: 6px;
-    background: var(--card, #fff);
-    box-shadow:
-      0 1px 2px color-mix(in srgb, var(--foreground, #000) 6%, transparent),
-      0 1px 0 color-mix(in srgb, white 60%, transparent) inset;
-  }
-
+  /* The switcher's geometry, fill and radius come from the shared rail and
+   * raised surfaces; this file only keeps what is specific to the mode set. */
   .display-mode-switcher__icon {
     width: 12px;
     height: 12px;