@floegence/floe-webapp-core 0.35.21 → 0.35.22

package/dist/context/FloeConfigContext.js

@@ -1,5 +1,5 @@
 import { createComponent as C } from "solid-js/web";
-import { createContext as F, createMemo as u, createEffect as I, onCleanup as E, useContext as h } from "solid-js";
+import { createContext as L, createMemo as u, createEffect as F, onCleanup as I, useContext as v } from "solid-js";
 const m = {
   storage: {
     namespace: "floe",
@@ -46,6 +46,15 @@ const m = {
     storageKey: "theme",
     defaultTheme: "system"
   },
+  accessibility: {
+    mainContentId: "floe-main-content",
+    skipLinkLabel: "Skip to main content",
+    topBarLabel: "Application toolbar",
+    primaryNavigationLabel: "Primary navigation",
+    mobileNavigationLabel: "Primary navigation",
+    sidebarLabel: "Sidebar",
+    mainLabel: "Main content"
+  },
   deck: {
     storageKey: "deck"
   },
@@ -70,7 +79,7 @@ const m = {
     }
   }
 };
-function S() {
+function k() {
   if (!(typeof window > "u"))
     return {
       getItem: (e) => localStorage.getItem(e),
@@ -79,8 +88,8 @@ function S() {
       keys: () => Object.keys(localStorage)
     };
 }
-function v(e) {
-  const t = e.adapter ?? S(), c = e.namespace ? `${e.namespace}-` : "", r = (o) => `${c}${o}`, n = () => e.enabled && !!t, i = /* @__PURE__ */ new Map(), d = () => {
+function h(e) {
+  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);
@@ -122,8 +131,8 @@ function v(e) {
           i.delete(l);
           try {
             t.setItem(l, JSON.stringify(f.value));
-          } catch (b) {
-            console.warn(`Failed to save ${l}:`, b);
+          } catch (w) {
+            console.warn(`Failed to save ${l}:`, w);
           }
         }
       }, s);
@@ -157,7 +166,7 @@ function v(e) {
     }
   };
 }
-function k(e) {
+function S(e) {
   if (typeof window > "u") return () => {
   };
   const t = () => {
@@ -184,7 +193,7 @@ function k(e) {
     }
   };
 }
-function w(e, t) {
+function b(e, t) {
   if (!t) return e;
   if (typeof e != "object" || e === null || Array.isArray(e)) return t ?? e;
   const c = {
@@ -193,17 +202,17 @@ function w(e, t) {
   for (const [r, n] of Object.entries(t)) {
     if (n === void 0) continue;
     const i = e[r];
-    typeof i == "object" && i !== null && typeof n == "object" && n !== null && !Array.isArray(n) ? c[r] = w(i, n) : c[r] = n;
+    typeof i == "object" && i !== null && typeof n == "object" && n !== null && !Array.isArray(n) ? c[r] = b(i, n) : c[r] = n;
   }
   return c;
 }
-const y = F();
-function O(e) {
-  const t = u(() => w(m, e.config)), c = u(() => v(t().storage));
-  I(() => {
-    const n = c(), d = t().storage.enabled ? k(n) : () => {
+const y = L();
+function N(e) {
+  const t = u(() => b(m, e.config)), c = u(() => h(t().storage));
+  F(() => {
+    const n = c(), d = t().storage.enabled ? S(n) : () => {
     };
-    E(() => {
+    I(() => {
       d(), n.dispose?.();
     });
   });
@@ -220,23 +229,23 @@ function O(e) {
     }
   });
 }
-function D() {
-  const e = h(y);
+function O() {
+  const e = v(y);
   if (!e)
     throw new Error("FloeConfigContext not found. Make sure to wrap your app with FloeConfigProvider (or FloeProvider).");
   return e;
 }
-const L = v(m.storage), T = {
+const E = h(m.storage), T = {
   config: m,
-  persist: L
+  persist: E
 };
-function N() {
-  return h(y) ?? T;
+function D() {
+  return v(y) ?? T;
 }
 export {
   m as DEFAULT_FLOE_CONFIG,
-  O as FloeConfigProvider,
-  k as installPersistFlushListeners,
-  D as useFloeConfig,
-  N as useResolvedFloeConfig
+  N as FloeConfigProvider,
+  S as installPersistFlushListeners,
+  O as useFloeConfig,
+  D as useResolvedFloeConfig
 };

package/dist/context/NotificationContext.js

@@ -1,58 +1,58 @@
-import { insert as d, createComponent as u, template as r, effect as g, className as p, delegateEvents as x } from "solid-js/web";
-import { For as w, onCleanup as v, Show as m } from "solid-js";
-import { createStore as k, produce as h } from "solid-js/store";
-import { createSimpleContext as $ } from "./createSimpleContext.js";
-import { cn as b } from "../utils/cn.js";
-var _ = /* @__PURE__ */ r('<div class="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm">'), y = /* @__PURE__ */ r('<svg class="w-4 h-4 text-info"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><circle cx=12 cy=12 r=10></circle><path d="M12 16v-4M12 8h.01">'), C = /* @__PURE__ */ r('<svg class="w-4 h-4 text-success"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M5 13l4 4L19 7">'), M = /* @__PURE__ */ r('<svg class="w-4 h-4 text-warning"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">'), S = /* @__PURE__ */ r('<svg class="w-4 h-4 text-error"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><circle cx=12 cy=12 r=10></circle><path stroke-linecap=round d="M15 9l-6 6M9 9l6 6">'), N = /* @__PURE__ */ r('<p class="mt-1 text-sm text-muted-foreground">'), T = /* @__PURE__ */ r('<button type=button class="mt-2 text-sm font-medium text-foreground hover:underline">'), D = /* @__PURE__ */ r('<div role=alert><div class="flex items-start gap-3"><span class="flex-shrink-0 mt-0.5"></span><div class="flex-1 min-w-0"><p class="font-medium text-sm"></p></div><button type=button class="flex-shrink-0 text-muted-foreground hover:text-foreground transition-colors"aria-label=Dismiss><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M6 18L18 6M6 6l12 12">');
-const B = 5e3;
-function L() {
-  const [o, s] = k({
+import { insert as u, createComponent as d, template as l, effect as k, className as $, setAttribute as h, delegateEvents as y } from "solid-js/web";
+import { For as _, onCleanup as C, Show as x } from "solid-js";
+import { createStore as M, produce as w } from "solid-js/store";
+import { createSimpleContext as S } from "./createSimpleContext.js";
+import { cn as N } from "../utils/cn.js";
+var T = /* @__PURE__ */ l('<div class="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm">'), D = /* @__PURE__ */ l('<svg class="w-4 h-4 text-info"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><circle cx=12 cy=12 r=10></circle><path d="M12 16v-4M12 8h.01">'), B = /* @__PURE__ */ l('<svg class="w-4 h-4 text-success"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M5 13l4 4L19 7">'), L = /* @__PURE__ */ l('<svg class="w-4 h-4 text-warning"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">'), A = /* @__PURE__ */ l('<svg class="w-4 h-4 text-error"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><circle cx=12 cy=12 r=10></circle><path stroke-linecap=round d="M15 9l-6 6M9 9l6 6">'), E = /* @__PURE__ */ l('<p class="mt-1 text-sm text-muted-foreground">'), j = /* @__PURE__ */ l('<button type=button class="mt-2 text-sm font-medium text-foreground hover:underline focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2">'), z = /* @__PURE__ */ l('<div><div class="flex items-start gap-3"><span class="flex-shrink-0 mt-0.5"></span><div class="flex-1 min-w-0"><p class="font-medium text-sm"></p></div><button type=button class="flex-shrink-0 text-muted-foreground hover:text-foreground transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2"aria-label=Dismiss><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M6 18L18 6M6 6l12 12">');
+const F = 5e3;
+function I() {
+  const [i, a] = M({
     notifications: []
-  }), i = /* @__PURE__ */ new Map();
-  v(() => {
-    i.forEach((t) => clearTimeout(t)), i.clear();
+  }), n = /* @__PURE__ */ new Map();
+  C(() => {
+    n.forEach((t) => clearTimeout(t)), n.clear();
   });
-  const n = (t) => {
-    const e = i.get(t);
-    e && (clearTimeout(e), i.delete(t)), s(h((l) => {
-      l.notifications = l.notifications.filter((a) => a.id !== t);
+  const s = (t) => {
+    const e = n.get(t);
+    e && (clearTimeout(e), n.delete(t)), a(w((c) => {
+      c.notifications = c.notifications.filter((r) => r.id !== t);
     }));
-  }, c = (t) => {
-    const e = `notification-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, l = t.duration ?? B;
-    if (s(h((a) => {
-      a.notifications.push({
+  }, f = (t) => {
+    const e = `notification-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, c = t.duration ?? F;
+    if (a(w((r) => {
+      r.notifications.push({
         ...t,
         id: e
       });
-    })), l > 0) {
-      const a = setTimeout(() => n(e), l);
-      i.set(e, a);
+    })), c > 0) {
+      const r = setTimeout(() => s(e), c);
+      n.set(e, r);
     }
     return e;
   };
   return {
-    notifications: () => o.notifications,
-    show: c,
-    dismiss: n,
+    notifications: () => i.notifications,
+    show: f,
+    dismiss: s,
     dismissAll: () => {
-      i.forEach((t) => clearTimeout(t)), i.clear(), s("notifications", []);
+      n.forEach((t) => clearTimeout(t)), n.clear(), a("notifications", []);
     },
-    info: (t, e) => c({
+    info: (t, e) => f({
       type: "info",
       title: t,
       message: e
     }),
-    success: (t, e) => c({
+    success: (t, e) => f({
       type: "success",
       title: t,
       message: e
     }),
-    warning: (t, e) => c({
+    warning: (t, e) => f({
       type: "warning",
       title: t,
       message: e
     }),
-    error: (t, e) => c({
+    error: (t, e) => f({
       type: "error",
       title: t,
       message: e
@@ -60,67 +60,74 @@ function L() {
   };
 }
 const {
-  Provider: U,
-  use: E
-} = $({
+  Provider: J,
+  use: P
+} = S({
   name: "Notification",
-  init: L
+  init: I
 });
-function O() {
+function K() {
   const {
-    notifications: o,
-    dismiss: s
-  } = E();
+    notifications: i,
+    dismiss: a
+  } = P();
   return (() => {
-    var i = _();
-    return d(i, u(w, {
+    var n = T();
+    return u(n, d(_, {
       get each() {
-        return o();
+        return i();
       },
-      children: (n) => u(j, {
-        notification: n,
-        onDismiss: () => s(n.id)
+      children: (s) => d(R, {
+        notification: s,
+        onDismiss: () => a(s.id)
       })
-    })), i;
+    })), n;
   })();
 }
-function j(o) {
-  const s = {
+function R(i) {
+  const a = {
     info: "border-l-info",
     success: "border-l-success",
     warning: "border-l-warning",
     error: "border-l-error"
-  }, i = {
-    info: () => y(),
-    success: () => C(),
-    warning: () => M(),
-    error: () => S()
-  };
+  }, n = {
+    info: () => D(),
+    success: () => B(),
+    warning: () => L(),
+    error: () => A()
+  }, s = () => i.notification.type === "error" || i.notification.type === "warning" ? "alert" : "status", f = () => s() === "alert" ? "assertive" : "polite";
   return (() => {
-    var n = D(), c = n.firstChild, t = c.firstChild, e = t.nextSibling, l = e.firstChild, a = e.nextSibling;
-    return d(t, () => i[o.notification.type]()), d(l, () => o.notification.title), d(e, u(m, {
+    var t = z(), e = t.firstChild, c = e.firstChild, r = c.nextSibling, p = r.firstChild, b = r.nextSibling;
+    return u(c, () => n[i.notification.type]()), u(p, () => i.notification.title), u(r, d(x, {
       get when() {
-        return o.notification.message;
+        return i.notification.message;
       },
       get children() {
-        var f = N();
-        return d(f, () => o.notification.message), f;
+        var o = E();
+        return u(o, () => i.notification.message), o;
       }
-    }), null), d(e, u(m, {
+    }), null), u(r, d(x, {
       get when() {
-        return o.notification.action;
+        return i.notification.action;
       },
       get children() {
-        var f = T();
-        return f.$$click = () => o.notification.action?.onClick(), d(f, () => o.notification.action.label), f;
+        var o = j();
+        return o.$$click = () => i.notification.action?.onClick(), u(o, () => i.notification.action.label), o;
       }
-    }), null), a.$$click = () => o.onDismiss(), g(() => p(n, b("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", s[o.notification.type]))), n;
+    }), 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();
+      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,
+      t: void 0,
+      a: void 0
+    }), t;
   })();
 }
-x(["click"]);
+y(["click"]);
 export {
-  O as NotificationContainer,
-  U as NotificationProvider,
-  L as createNotificationService,
-  E as useNotification
+  K as NotificationContainer,
+  J as NotificationProvider,
+  I as createNotificationService,
+  P as useNotification
 };

package/dist/styles/tokens.d.ts

@@ -96,7 +96,7 @@ export declare const floeColorTokenCategories: readonly [{
     }, {
         readonly name: "Muted Foreground";
         readonly variable: "--muted-foreground";
-        readonly lightValue: "hsl(215 20% 46%)";
+        readonly lightValue: "hsl(215 20% 42%)";
         readonly darkValue: "hsl(215 20% 60%)";
         readonly description: "Secondary text color for supporting copy.";
     }, {
@@ -308,7 +308,7 @@ export declare const floeColorTokenCategories: readonly [{
     }, {
         readonly name: "Activity Bar Foreground";
         readonly variable: "--activity-bar-foreground";
-        readonly lightValue: "hsl(215 20% 46%)";
+        readonly lightValue: "hsl(215 20% 42%)";
         readonly darkValue: "hsl(215 20% 55%)";
         readonly description: "Default activity bar icon color.";
     }, {
@@ -646,7 +646,7 @@ export declare const floeDesignTokens: {
         }, {
             readonly name: "Muted Foreground";
             readonly variable: "--muted-foreground";
-            readonly lightValue: "hsl(215 20% 46%)";
+            readonly lightValue: "hsl(215 20% 42%)";
             readonly darkValue: "hsl(215 20% 60%)";
             readonly description: "Secondary text color for supporting copy.";
         }, {
@@ -858,7 +858,7 @@ export declare const floeDesignTokens: {
         }, {
             readonly name: "Activity Bar Foreground";
             readonly variable: "--activity-bar-foreground";
-            readonly lightValue: "hsl(215 20% 46%)";
+            readonly lightValue: "hsl(215 20% 42%)";
             readonly darkValue: "hsl(215 20% 55%)";
             readonly description: "Default activity bar icon color.";
         }, {

package/dist/styles/tokens.js

@@ -59,7 +59,7 @@ const r = {
       {
         name: "Muted Foreground",
         variable: "--muted-foreground",
-        lightValue: "hsl(215 20% 46%)",
+        lightValue: "hsl(215 20% 42%)",
         darkValue: "hsl(215 20% 60%)",
         description: "Secondary text color for supporting copy."
       },
@@ -313,7 +313,7 @@ const r = {
       {
         name: "Activity Bar Foreground",
         variable: "--activity-bar-foreground",
-        lightValue: "hsl(215 20% 46%)",
+        lightValue: "hsl(215 20% 42%)",
         darkValue: "hsl(215 20% 55%)",
         description: "Default activity bar icon color."
       },
@@ -450,12 +450,48 @@ const r = {
     ]
   }
 ], l = [
-  { name: "Text XS", size: "11px", lineHeight: "1.5", className: "text-[11px]", description: "Smallest text, captions and labels." },
-  { name: "Text SM", size: "12px", lineHeight: "1.5", className: "text-xs", description: "Small text, secondary content." },
-  { name: "Text Base", size: "14px", lineHeight: "1.5", className: "text-sm", description: "Default body text." },
-  { name: "Text LG", size: "16px", lineHeight: "1.5", className: "text-base", description: "Larger body text and card titles." },
-  { name: "Text XL", size: "18px", lineHeight: "1.4", className: "text-lg", description: "Section titles." },
-  { name: "Text 2XL", size: "20px", lineHeight: "1.3", className: "text-xl", description: "Page titles." }
+  {
+    name: "Text XS",
+    size: "11px",
+    lineHeight: "1.5",
+    className: "text-[11px]",
+    description: "Smallest text, captions and labels."
+  },
+  {
+    name: "Text SM",
+    size: "12px",
+    lineHeight: "1.5",
+    className: "text-xs",
+    description: "Small text, secondary content."
+  },
+  {
+    name: "Text Base",
+    size: "14px",
+    lineHeight: "1.5",
+    className: "text-sm",
+    description: "Default body text."
+  },
+  {
+    name: "Text LG",
+    size: "16px",
+    lineHeight: "1.5",
+    className: "text-base",
+    description: "Larger body text and card titles."
+  },
+  {
+    name: "Text XL",
+    size: "18px",
+    lineHeight: "1.4",
+    className: "text-lg",
+    description: "Section titles."
+  },
+  {
+    name: "Text 2XL",
+    size: "20px",
+    lineHeight: "1.3",
+    className: "text-xl",
+    description: "Page titles."
+  }
 ], n = [
   {
     name: "Sans",
@@ -483,7 +519,12 @@ const r = {
 ], t = [
   { name: "None", value: "0", variable: "-", className: "rounded-none" },
   { name: "SM", value: "0.125rem", variable: "-", className: "rounded-sm" },
-  { name: "Default", value: r["--radius"], variable: "--radius", className: "rounded" },
+  {
+    name: "Default",
+    value: r["--radius"],
+    variable: "--radius",
+    className: "rounded"
+  },
   { name: "MD", value: "0.5rem", variable: "-", className: "rounded-md" },
   { name: "LG", value: "0.75rem", variable: "-", className: "rounded-lg" },
   { name: "XL", value: "1rem", variable: "-", className: "rounded-xl" },
@@ -526,13 +567,13 @@ const r = {
     usage: "Neon and emphasis effects",
     description: "Pulsing glow animation for elevated emphasis."
   }
-], c = i.reduce(
-  (a, e) => (a.push(...e.tokens), a),
-  []
-);
+], c = i.reduce((a, e) => (a.push(...e.tokens), a), []);
 function o(a) {
   return Object.fromEntries(
-    c.map((e) => [e.variable, a === "light" ? e.lightValue : e.darkValue])
+    c.map((e) => [
+      e.variable,
+      a === "light" ? e.lightValue : e.darkValue
+    ])
   );
 }
 const u = {