@floegence/floe-webapp-core 0.87.3 → 0.88.0

package/dist/chat.css

@@ -371,8 +371,8 @@
   background-color: var(--inline-code-background);
   color: var(--inline-code-foreground);
   font-family: var(--font-mono);
-  font-size: 0.91em;
-  font-weight: 400;
+  font-size: 0.96em;
+  font-weight: 500;
   line-height: inherit;
   white-space: break-spaces;
   overflow-wrap: anywhere;

package/dist/components/icons/ActivityRailGlyph.d.ts

@@ -0,0 +1,18 @@
+import { type JSX } from 'solid-js';
+export interface ActivityRailIconProps extends JSX.SvgSVGAttributes<SVGSVGElement> {
+    size?: number | string;
+    /** Navigation selection or an open disclosure; hover never fills the glyph. */
+    active?: boolean;
+}
+export interface ActivityRailGlyphProps extends ActivityRailIconProps {
+    shape: () => JSX.Element;
+    detail?: () => JSX.Element;
+    outline?: () => JSX.Element;
+    lines?: () => JSX.Element;
+    activeLines?: () => JSX.Element;
+    activeFillOpacity?: number;
+    identity?: string;
+}
+/** Shared light-face/solid-selection recipe. Factories give each SVG layer its
+ * own nodes; alpha cutouts reveal the actual surface in every shell theme. */
+export declare function ActivityRailGlyph(props: ActivityRailGlyphProps): JSX.Element;

package/dist/components/icons/ActivityRailGlyph.js

@@ -0,0 +1,76 @@
+import { spread as p, mergeProps as h, insert as l, createComponent as d, setAttribute as o, effect as m, memo as k, template as i } from "solid-js/web";
+import { splitProps as _, createUniqueId as $, Show as f } from "solid-js";
+var w = /* @__PURE__ */ i("<svg><defs><mask maskUnits=userSpaceOnUse x=0 y=0 width=24 height=24 style=mask-type:luminance><rect width=24 height=24 fill=white stroke=none></rect><g fill=black stroke=black color=black stroke-width=1.5></svg>", !1, !0, !1), y = /* @__PURE__ */ i("<svg><g data-floe-rail-part=solid fill=currentColor stroke=none></svg>", !1, !0, !1), C = /* @__PURE__ */ i("<svg><g data-floe-rail-part=active-lines></svg>", !1, !0, !1), b = /* @__PURE__ */ i("<svg><g data-floe-rail-part=lines>"), x = /* @__PURE__ */ i("<svg><g data-floe-rail-part=face fill=currentColor fill-opacity=.13 stroke=none></svg>", !1, !0, !1), z = /* @__PURE__ */ i("<svg><g data-floe-rail-part=outline></svg>", !1, !0, !1);
+function U(v) {
+  const [e, g] = _(v, ["size", "active", "shape", "detail", "outline", "lines", "activeLines", "activeFillOpacity", "identity", "class", "children"]), u = "floe-rail-cut-" + $();
+  return (() => {
+    var a = b(), c = a.firstChild;
+    return p(a, h(g, {
+      xmlns: "http://www.w3.org/2000/svg",
+      get width() {
+        return e.size ?? 24;
+      },
+      get height() {
+        return e.size ?? 24;
+      },
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      get class() {
+        return e.class;
+      },
+      "aria-hidden": "true",
+      get "data-floe-rail-icon"() {
+        return e.identity;
+      },
+      get "data-floe-rail-active"() {
+        return e.active ? "true" : "false";
+      }
+    }), !0, !0), l(a, d(f, {
+      get when() {
+        return e.detail;
+      },
+      get children() {
+        var t = w(), r = t.firstChild, s = r.firstChild, n = s.nextSibling;
+        return o(r, "id", u), l(n, () => e.detail?.()), t;
+      }
+    }), c), l(c, () => e.lines?.()), l(a, d(f, {
+      get when() {
+        return e.active;
+      },
+      get fallback() {
+        return [(() => {
+          var t = x();
+          return l(t, () => e.shape()), t;
+        })(), (() => {
+          var t = z();
+          return l(t, (() => {
+            var r = k(() => !!e.outline);
+            return () => r() ? e.outline() : e.shape();
+          })(), null), l(t, () => e.detail?.(), null), t;
+        })()];
+      },
+      get children() {
+        return [(() => {
+          var t = y();
+          return l(t, () => e.shape()), m((r) => {
+            var s = e.activeFillOpacity ?? 1, n = e.detail ? "url(#" + u + ")" : void 0;
+            return s !== r.e && o(t, "fill-opacity", r.e = s), n !== r.t && o(t, "mask", r.t = n), r;
+          }, {
+            e: void 0,
+            t: void 0
+          }), t;
+        })(), (() => {
+          var t = C();
+          return l(t, () => e.activeLines?.()), t;
+        })()];
+      }
+    }), null), a;
+  })();
+}
+export {
+  U as ActivityRailGlyph
+};

package/dist/components/icons/ActivityRailIcons.d.ts

@@ -1,22 +1,21 @@
-import type { Component, JSX } from 'solid-js';
-export interface ActivityRailIconProps extends JSX.SvgSVGAttributes<SVGSVGElement> {
-    size?: number | string;
-}
-/** Launchpad — four rounded tiles in a 2x2 field. */
+import type { Component } from 'solid-js';
+import { type ActivityRailIconProps } from './ActivityRailGlyph';
+export { ActivityRailGlyph, type ActivityRailGlyphProps, type ActivityRailIconProps, } from './ActivityRailGlyph';
 export declare const RailLaunchpad: Component<ActivityRailIconProps>;
-/** Notes — a page with a folded corner and writing rules. */
+export declare const RailFiles: Component<ActivityRailIconProps>;
+export declare const RailTerminal: Component<ActivityRailIconProps>;
+export declare const RailMonitor: Component<ActivityRailIconProps>;
+export declare const RailCode: Component<ActivityRailIconProps>;
+export declare const RailGlobe: Component<ActivityRailIconProps>;
+export declare const RailApplications: Component<ActivityRailIconProps>;
+export declare const RailContainers: Component<ActivityRailIconProps>;
+export declare const RailConnections: Component<ActivityRailIconProps>;
+export declare const RailSwitch: Component<ActivityRailIconProps>;
+export declare const RailSettings: Component<ActivityRailIconProps>;
 export declare const RailNotes: Component<ActivityRailIconProps>;
-/** Showcase — a workspace frame with chrome and a side rail. */
 export declare const RailShowcase: Component<ActivityRailIconProps>;
-/** Files — a tabbed folder. */
-export declare const RailFiles: Component<ActivityRailIconProps>;
-/** Search — lens. */
 export declare const RailSearch: Component<ActivityRailIconProps>;
-/** Settings — two rails with a knob each. Legible where a gear is not. */
-export declare const RailSettings: Component<ActivityRailIconProps>;
-/** Chat — speech bubble with a tail. */
 export declare const RailChat: Component<ActivityRailIconProps>;
-/** Design tokens — sheets stacked behind a front card. */
 export declare const RailDesignTokens: Component<ActivityRailIconProps>;
 export declare const ActivityRailIcons: {
     readonly launchpad: Component<ActivityRailIconProps>;
@@ -27,4 +26,12 @@ export declare const ActivityRailIcons: {
     readonly settings: Component<ActivityRailIconProps>;
     readonly chat: Component<ActivityRailIconProps>;
     readonly designTokens: Component<ActivityRailIconProps>;
+    readonly terminal: Component<ActivityRailIconProps>;
+    readonly monitor: Component<ActivityRailIconProps>;
+    readonly code: Component<ActivityRailIconProps>;
+    readonly globe: Component<ActivityRailIconProps>;
+    readonly applications: Component<ActivityRailIconProps>;
+    readonly containers: Component<ActivityRailIconProps>;
+    readonly connections: Component<ActivityRailIconProps>;
+    readonly switch: Component<ActivityRailIconProps>;
 };

package/dist/components/icons/ActivityRailIcons.js

@@ -1,68 +1,107 @@
-import { createComponent as s, mergeProps as a, insert as c, effect as f, setAttribute as h, template as e } from "solid-js/web";
-var u = /* @__PURE__ */ e('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true>'), d = /* @__PURE__ */ e("<svg><rect x=3.5 y=3.5 width=7.5 height=7.5 rx=2.2></svg>", !1, !0, !1), o = /* @__PURE__ */ e("<svg><rect x=13 y=3.5 width=7.5 height=7.5 rx=2.2></svg>", !1, !0, !1), p = /* @__PURE__ */ e("<svg><rect x=3.5 y=13 width=7.5 height=7.5 rx=2.2></svg>", !1, !0, !1), m = /* @__PURE__ */ e("<svg><rect x=13 y=13 width=7.5 height=7.5 rx=2.2></svg>", !1, !0, !1), _ = /* @__PURE__ */ e('<svg><path d="M7 3.5h6.75a1.5 1.5 0 0 1 1.06.44l5.25 5.25a1.5 1.5 0 0 1 .44 1.06V18.5a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2Z"></svg>', !1, !0, !1), $ = /* @__PURE__ */ e('<svg><path d="M13.75 3.5v5.25a1.5 1.5 0 0 0 1.5 1.5H20.5"></svg>', !1, !0, !1), x = /* @__PURE__ */ e('<svg><path d="M8.5 13h9"></svg>', !1, !0, !1), w = /* @__PURE__ */ e('<svg><path d="M8.5 16.75h5.5"></svg>', !1, !0, !1), M = /* @__PURE__ */ e("<svg><rect x=3.5 y=4.5 width=17 height=15 rx=2.5></svg>", !1, !0, !1), y = /* @__PURE__ */ e('<svg><path d="M3.5 8.75h17"></svg>', !1, !0, !1), R = /* @__PURE__ */ e('<svg><path d="M9.5 8.75v10.75"></svg>', !1, !0, !1), k = /* @__PURE__ */ e('<svg><path d="M3.5 17.5V6.5a2 2 0 0 1 2-2h3.35a2 2 0 0 1 1.6.8l1 1.35a2 2 0 0 0 1.6.8h3.45a2 2 0 0 1 2 2v8.05a2 2 0 0 1-2 2H5.5a2 2 0 0 1-2-2Z"></svg>', !1, !0, !1), H = /* @__PURE__ */ e("<svg><circle cx=10.75 cy=10.75 r=6.25></svg>", !1, !0, !1), C = /* @__PURE__ */ e('<svg><path d="m15.25 15.25 5.25 5.25"></svg>', !1, !0, !1), S = /* @__PURE__ */ e('<svg><path d="M3.5 6.5h3.25"></svg>', !1, !0, !1), Z = /* @__PURE__ */ e('<svg><path d="M12.75 6.5h7.75"></svg>', !1, !0, !1), z = /* @__PURE__ */ e("<svg><circle cx=9.75 cy=6.5 r=2.75></svg>", !1, !0, !1), A = /* @__PURE__ */ e('<svg><path d="M3.5 17.5h8.75"></svg>', !1, !0, !1), B = /* @__PURE__ */ e('<svg><path d="M18.25 17.5h2.25"></svg>', !1, !0, !1), L = /* @__PURE__ */ e("<svg><circle cx=15.25 cy=17.5 r=2.75></svg>", !1, !0, !1), T = /* @__PURE__ */ e('<svg><path d="M20.5 7.5a3 3 0 0 0-3-3h-11a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h1.5v3.5L11.5 16.5H17.5a3 3 0 0 0 3-3Z"></svg>', !1, !0, !1), V = /* @__PURE__ */ e("<svg><rect x=6.5 y=3.5 width=14 height=14 rx=3.5></svg>", !1, !0, !1), b = /* @__PURE__ */ e('<svg><path d="M3.5 8.5v8a4 4 0 0 0 4 4h6"></svg>', !1, !0, !1);
-function l(t) {
-  return (() => {
-    var g = u();
-    return c(g, () => t.children), f((r) => {
-      var v = t.size ?? 24, i = t.size ?? 24, n = t.class;
-      return v !== r.e && h(g, "width", r.e = v), i !== r.t && h(g, "height", r.t = i), n !== r.a && h(g, "class", r.a = n), r;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    }), g;
-  })();
-}
-const j = (t) => s(l, a(t, {
-  get children() {
-    return [d(), o(), p(), m()];
-  }
-})), D = (t) => s(l, a(t, {
-  get children() {
-    return [_(), $(), x(), w()];
-  }
-})), F = (t) => s(l, a(t, {
-  get children() {
-    return [M(), y(), R()];
-  }
-})), I = (t) => s(l, a(t, {
-  get children() {
-    return k();
-  }
-})), N = (t) => s(l, a(t, {
-  get children() {
-    return [H(), C()];
-  }
-})), P = (t) => s(l, a(t, {
-  get children() {
-    return [S(), Z(), z(), A(), B(), L()];
-  }
-})), q = (t) => s(l, a(t, {
-  get children() {
-    return T();
-  }
-})), E = (t) => s(l, a(t, {
-  get children() {
-    return [V(), b()];
-  }
-})), J = {
-  launchpad: j,
-  notes: D,
-  showcase: F,
-  files: I,
-  search: N,
-  settings: P,
-  chat: q,
-  designTokens: E
+import { createComponent as s, mergeProps as a, insert as g, template as t } from "solid-js/web";
+import { ActivityRailGlyph as l } from "./ActivityRailGlyph.js";
+var o = /* @__PURE__ */ t("<svg><rect x=3.5 y=5 width=17 height=14 rx=2.5></svg>", !1, !0, !1), c = /* @__PURE__ */ t("<svg><rect x=3.75 y=6.75 width=13.5 height=1.5 rx=.75></svg>", !1, !0, !1), f = /* @__PURE__ */ t('<svg><path d="M16 5.25q-.5-.3-.5.3v3.9q0 .6.5.3l3.2-1.85q.65-.4 0-.8Z"></svg>', !1, !0, !1), p = /* @__PURE__ */ t("<svg><rect x=3.5 y=3.5 width=7.5 height=7.5 rx=2.2></svg>", !1, !0, !1), d = /* @__PURE__ */ t("<svg><rect x=13 y=3.5 width=7.5 height=7.5 rx=2.2></svg>", !1, !0, !1), m = /* @__PURE__ */ t("<svg><rect x=3.5 y=13 width=7.5 height=7.5 rx=2.2></svg>", !1, !0, !1), v = /* @__PURE__ */ t("<svg><rect x=13 y=13 width=7.5 height=7.5 rx=2.2></svg>", !1, !0, !1), u = /* @__PURE__ */ t('<svg><path d="M3.5 8a2 2 0 0 1 2-2h3.15a2 2 0 0 1 1.6.8l.95 1.3a2 2 0 0 0 1.6.8h5.7a2 2 0 0 1 2 2v6.6a2 2 0 0 1-2 2H5.5a2 2 0 0 1-2-2Z"></svg>', !1, !0, !1), _ = /* @__PURE__ */ t('<svg><path fill=none d="m7 9 2.5 2.2q.8.8 0 1.6L7 15M13 15h3.5"></svg>', !1, !0, !1), $ = /* @__PURE__ */ t('<svg><path d="M3.5 15.5h1.6q.5 0 .65-.55L7.9 7.3q.25-.9.45 0l2.35 10.8q.2.9.45 0l2.1-6.9q.25-.8.6 0l1.4 3.75q.2.55.75.55h4.5V19.5H3.5Z"></svg>', !1, !0, !1), n = /* @__PURE__ */ t('<svg><path d="M3.5 15.5h1.6q.5 0 .65-.55L7.9 7.3q.25-.9.45 0l2.35 10.8q.2.9.45 0l2.1-6.9q.25-.8.6 0l1.4 3.75q.2.55.75.55h4.5"></svg>', !1, !0, !1), y = /* @__PURE__ */ t('<svg><path fill=none stroke-width=1.35 d="m8.5 9-2.2 2.2q-.8.8 0 1.6L8.5 15m7-6 2.2 2.2q.8.8 0 1.6L15.5 15M13 8.5l-2 7"></svg>', !1, !0, !1), M = /* @__PURE__ */ t("<svg><circle cx=12 cy=12 r=8.25></svg>", !1, !0, !1), w = /* @__PURE__ */ t('<svg><path fill=none stroke-width=1.4 d="M3.75 12h16.5M12 3.75c-4.6 4.8-4.6 11.7 0 16.5M12 3.75c4.6 4.8 4.6 11.7 0 16.5"></svg>', !1, !0, !1), x = /* @__PURE__ */ t('<svg><path fill=none stroke-width=1.3 d="M3.5 9h17"></svg>', !1, !0, !1), q = /* @__PURE__ */ t('<svg><path stroke-width=0 fill=currentColor d="M10 11.1q-.5-.3-.5.3v4.7q0 .6.5.3l4-2.35q.5-.3 0-.6Z"></svg>', !1, !0, !1), R = /* @__PURE__ */ t('<svg><path d="m10.6 4.25-5.1 2.8a3 3 0 0 0-1.75 2.7v4.9a3 3 0 0 0 1.75 2.7l5.1 2.8a3 3 0 0 0 2.8 0l5.1-2.8a3 3 0 0 0 1.75-2.7v-4.9a3 3 0 0 0-1.75-2.7l-5.1-2.8a3 3 0 0 0-2.8 0Z"></svg>', !1, !0, !1), L = /* @__PURE__ */ t('<svg><path fill=none stroke-width=1.4 d="m4 8.2 6.5 3.4q1.5.8 3 0L20 8.2M12 12v8.3"></svg>', !1, !0, !1), k = /* @__PURE__ */ t('<svg><path d="M7.25 11v3.75a2 2 0 0 0 2 2H13M16.75 13V9.25a2 2 0 0 0-2-2H11"></svg>', !1, !0, !1), H = /* @__PURE__ */ t('<svg><g transform="rotate(180 12 12)"></svg>', !1, !0, !1), Z = /* @__PURE__ */ t('<svg><path d="M4.5 7.5h14.75m-3.25-2.25 3.25 2.25L16 9.75M19.5 16.5H4.75M8 14.25 4.75 16.5 8 18.75"></svg>', !1, !0, !1), C = /* @__PURE__ */ t("<svg><circle cx=9.75 cy=6.5 r=2.75></svg>", !1, !0, !1), S = /* @__PURE__ */ t("<svg><circle cx=15.25 cy=17.5 r=2.75></svg>", !1, !0, !1), A = /* @__PURE__ */ t('<svg><path d="M3.5 6.5h3.5M12.5 6.5h8M3.5 17.5h9M18 17.5h2.5"></svg>', !1, !0, !1), b = /* @__PURE__ */ t('<svg><path d="M7 3.5h6.75a1.5 1.5 0 0 1 1.06.44l5.25 5.25a1.5 1.5 0 0 1 .44 1.06V18.5a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2Z"></svg>', !1, !0, !1), T = /* @__PURE__ */ t('<svg><path fill=none d="M13.75 3.5v5.25a1.5 1.5 0 0 0 1.5 1.5H20.5M8.5 13h9M8.5 16.75h5.5"></svg>', !1, !0, !1), V = /* @__PURE__ */ t("<svg><rect x=3.5 y=4.5 width=17 height=15 rx=2.5></svg>", !1, !0, !1), F = /* @__PURE__ */ t('<svg><path fill=none d="M3.5 8.75h17M9.5 8.75v10.75"></svg>', !1, !0, !1), G = /* @__PURE__ */ t("<svg><circle cx=10.75 cy=10.75 r=6.25></svg>", !1, !0, !1), D = /* @__PURE__ */ t('<svg><path d="m15.25 15.25 5.25 5.25"></svg>', !1, !0, !1), I = /* @__PURE__ */ t('<svg><path d="M20.5 7.5a3 3 0 0 0-3-3h-11a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h1.5v3.5L11.5 16.5H17.5a3 3 0 0 0 3-3Z"></svg>', !1, !0, !1), N = /* @__PURE__ */ t("<svg><rect x=6.5 y=3.5 width=14 height=14 rx=3.5></svg>", !1, !0, !1), O = /* @__PURE__ */ t('<svg><path d="M3.5 8.5v8a4 4 0 0 0 4 4h6"></svg>', !1, !0, !1);
+const i = () => o(), r = () => [c(), f()], P = (e) => s(l, a(e, {
+  identity: "launchpad",
+  shape: () => [p(), d(), m(), v()]
+})), W = (e) => s(l, a(e, {
+  identity: "files",
+  shape: () => u()
+})), j = (e) => s(l, a(e, {
+  identity: "terminal",
+  shape: i,
+  detail: () => _()
+})), z = (e) => s(l, a(e, {
+  identity: "monitor",
+  shape: () => $(),
+  outline: () => n(),
+  activeFillOpacity: 0.2,
+  activeLines: () => n()
+})), B = (e) => s(l, a(e, {
+  identity: "code",
+  shape: i,
+  detail: () => y()
+})), E = (e) => s(l, a(e, {
+  identity: "globe",
+  shape: () => M(),
+  detail: () => w()
+})), J = (e) => s(l, a(e, {
+  identity: "applications",
+  shape: i,
+  detail: () => [x(), q()]
+})), K = (e) => s(l, a(e, {
+  identity: "containers",
+  shape: () => R(),
+  detail: () => L()
+})), Q = (e) => s(l, a(e, {
+  identity: "connections",
+  shape: () => [p(), v()],
+  lines: () => k()
+})), U = (e) => s(l, a(e, {
+  identity: "switch",
+  shape: () => [s(r, {}), (() => {
+    var h = H();
+    return g(h, s(r, {})), h;
+  })()],
+  outline: () => Z()
+})), X = (e) => s(l, a(e, {
+  identity: "settings",
+  shape: () => [C(), S()],
+  lines: () => A()
+})), Y = (e) => s(l, a(e, {
+  identity: "notes",
+  shape: () => b(),
+  detail: () => T()
+})), tt = (e) => s(l, a(e, {
+  identity: "showcase",
+  shape: () => V(),
+  detail: () => F()
+})), et = (e) => s(l, a(e, {
+  identity: "search",
+  shape: () => G(),
+  lines: () => D()
+})), st = (e) => s(l, a(e, {
+  identity: "chat",
+  shape: () => I()
+})), at = (e) => s(l, a(e, {
+  identity: "design-tokens",
+  shape: () => N(),
+  lines: () => O()
+})), ht = {
+  launchpad: P,
+  notes: Y,
+  showcase: tt,
+  files: W,
+  search: et,
+  settings: X,
+  chat: st,
+  designTokens: at,
+  terminal: j,
+  monitor: z,
+  code: B,
+  globe: E,
+  applications: J,
+  containers: K,
+  connections: Q,
+  switch: U
 };
 export {
-  J as ActivityRailIcons,
-  q as RailChat,
-  E as RailDesignTokens,
-  I as RailFiles,
-  j as RailLaunchpad,
-  D as RailNotes,
-  N as RailSearch,
-  P as RailSettings,
-  F as RailShowcase
+  l as ActivityRailGlyph,
+  ht as ActivityRailIcons,
+  J as RailApplications,
+  st as RailChat,
+  B as RailCode,
+  Q as RailConnections,
+  K as RailContainers,
+  at as RailDesignTokens,
+  W as RailFiles,
+  E as RailGlobe,
+  P as RailLaunchpad,
+  z as RailMonitor,
+  Y as RailNotes,
+  et as RailSearch,
+  X as RailSettings,
+  tt as RailShowcase,
+  U as RailSwitch,
+  j as RailTerminal
 };

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

@@ -3,7 +3,7 @@ import type { JSX } from 'solid-js';
 export interface IconProps extends JSX.SvgSVGAttributes<SVGSVGElement> {
     size?: number | string;
 }
-export { ActivityRailIcons, RailLaunchpad, RailNotes, RailShowcase, RailFiles, RailSearch, RailSettings, RailChat, RailDesignTokens, } from './ActivityRailIcons';
+export * from './ActivityRailIcons';
 export { DockTerminal, DockFolder, DockCpu, DockActivity, DockFileCode, DockSearch, DockGlobe, DockSparkles, DockBot, DockCode, DockMessageSquare, DockRegion, DockText, DockLayoutDashboard, DockLayers, } from './DockIcons';
 export declare const Region: (props?: IconProps) => JSX.Element;
 export declare const TextTool: (props?: IconProps) => JSX.Element;

package/dist/components/layout/ActivityBar.d.ts

@@ -5,6 +5,7 @@ export interface ActivityBarItem {
     id: string;
     icon: Component<{
         class?: string;
+        active?: boolean;
     }>;
     label: string;
     badge?: number | string | (() => number | string | undefined);

package/dist/components/layout/ActivityBar.js

@@ -1,113 +1,116 @@
-import { insert as d, createComponent as o, effect as x, className as g, setAttribute as u, template as b, use as D, Dynamic as E, memo as R, delegateEvents as S } from "solid-js/web";
-import { createMemo as m, For as M, Show as B, onMount as j, onCleanup as q } from "solid-js";
-import { cn as v } from "../../utils/cn.js";
-import { deferNonBlocking as P } from "../../utils/defer.js";
-import { Tooltip as T } from "../ui/Tooltip.js";
-import { resolveActivityBarClick as _ } from "./activityBarBehavior.js";
-import { isBarItemContextMenuKey as K, keyboardBarItemContextMenuRequest as N } from "./barItemContextMenu.js";
-var X = /* @__PURE__ */ b('<div class="flex flex-col">'), Y = /* @__PURE__ */ b('<nav data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), F = /* @__PURE__ */ b("<span>"), H = /* @__PURE__ */ b("<button type=button data-floe-interactive=press><span aria-hidden=true>");
-function U(t) {
-  const r = m(() => t.activeId), c = m(() => t.collapsed ?? !1), s = m(() => t.onActiveChange), h = m(() => t.onCollapsedChange), f = (e) => {
-    if (e.onClick) {
-      P(() => e.onClick());
+import { insert as v, createComponent as l, effect as y, className as h, setAttribute as d, template as x, use as E, Dynamic as R, memo as S, delegateEvents as j } from "solid-js/web";
+import { createMemo as b, For as $, Show as D, onMount as q, onCleanup as P } from "solid-js";
+import { cn as f } from "../../utils/cn.js";
+import { deferNonBlocking as T } from "../../utils/defer.js";
+import { Tooltip as _ } from "../ui/Tooltip.js";
+import { resolveActivityBarClick as K } from "./activityBarBehavior.js";
+import { isBarItemContextMenuKey as N, keyboardBarItemContextMenuRequest as X } from "./barItemContextMenu.js";
+var Y = /* @__PURE__ */ x('<div class="flex flex-col">'), F = /* @__PURE__ */ x('<nav data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), H = /* @__PURE__ */ x("<span>"), L = /* @__PURE__ */ x("<button type=button data-floe-interactive=press><span aria-hidden=true>");
+function W(t) {
+  const o = b(() => t.activeId), c = b(() => t.collapsed ?? !1), s = b(() => t.onActiveChange), u = b(() => t.onCollapsedChange), m = (a) => {
+    if (a.onClick) {
+      T(() => a.onClick());
       return;
     }
-    const a = _({
-      clickedId: e.id,
-      activeId: r(),
+    const e = K({
+      clickedId: a.id,
+      activeId: o(),
       collapsed: c(),
-      behavior: e.collapseBehavior
+      behavior: a.collapseBehavior
     });
-    a.nextActiveId !== r() && (typeof a.openSidebar == "boolean" ? s()(a.nextActiveId, {
-      openSidebar: a.openSidebar
-    }) : s()(a.nextActiveId)), typeof a.nextCollapsed == "boolean" && h()?.(a.nextCollapsed);
+    e.nextActiveId !== o() && (typeof e.openSidebar == "boolean" ? s()(e.nextActiveId, {
+      openSidebar: e.openSidebar
+    }) : s()(e.nextActiveId)), typeof e.nextCollapsed == "boolean" && u()?.(e.nextCollapsed);
   };
   return (() => {
-    var e = Y(), a = e.firstChild;
-    return d(a, o(M, {
+    var a = F(), e = a.firstChild;
+    return v(e, l($, {
       get each() {
         return t.items;
       },
-      children: (n) => o($, {
+      children: (n) => l(B, {
         item: n,
         get isActive() {
-          return r() === n.id;
+          return o() === n.id;
         },
-        onClick: () => f(n)
+        onClick: () => m(n)
       })
-    })), d(e, o(B, {
+    })), v(a, l(D, {
       get when() {
         return t.bottomItems?.length;
       },
       get children() {
-        var n = X();
-        return d(n, o(M, {
+        var n = Y();
+        return v(n, l($, {
           get each() {
             return t.bottomItems;
           },
-          children: (i) => o($, {
-            item: i,
+          children: (r) => l(B, {
+            item: r,
             get isActive() {
-              return r() === i.id;
+              return o() === r.id;
             },
-            onClick: () => f(i)
+            onClick: () => m(r)
           })
         })), n;
       }
-    }), null), x((n) => {
-      var i = v("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-[var(--floe-line-quiet)]", t.class), l = t.ariaLabel;
-      return i !== n.e && g(e, n.e = i), l !== n.t && u(e, "aria-label", n.t = l), n;
+    }), null), y((n) => {
+      var r = f("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-[var(--floe-line-quiet)]", t.class), i = t.ariaLabel;
+      return r !== n.e && h(a, n.e = r), i !== n.t && d(a, "aria-label", n.t = i), n;
     }, {
       e: void 0,
       t: void 0
-    }), e;
+    }), a;
   })();
 }
-function $(t) {
-  let r;
-  const c = () => typeof t.item.badge == "function" ? t.item.badge() : t.item.badge, s = () => typeof t.item.ariaExpanded == "function" ? t.item.ariaExpanded() : t.item.ariaExpanded;
-  j(() => t.item.buttonRef?.(r ?? null)), q(() => t.item.buttonRef?.(null));
-  const h = (e) => {
+function B(t) {
+  let o;
+  const c = () => typeof t.item.badge == "function" ? t.item.badge() : t.item.badge, s = () => typeof t.item.ariaExpanded == "function" ? t.item.ariaExpanded() : t.item.ariaExpanded, u = () => t.isActive || s() === !0;
+  q(() => t.item.buttonRef?.(o ?? null)), P(() => t.item.buttonRef?.(null));
+  const m = (e) => {
     t.item.onContextMenu && (e.preventDefault(), e.stopPropagation(), t.item.onContextMenu({
       trigger: e.currentTarget,
       clientX: e.clientX,
       clientY: e.clientY,
       source: "pointer"
     }));
-  }, f = (e) => {
-    !t.item.onContextMenu || !K(e) || (e.preventDefault(), e.stopPropagation(), t.item.onContextMenu(N(e.currentTarget)));
+  }, a = (e) => {
+    !t.item.onContextMenu || !N(e) || (e.preventDefault(), e.stopPropagation(), t.item.onContextMenu(X(e.currentTarget)));
   };
-  return o(T, {
+  return l(_, {
     get content() {
       return t.item.label;
     },
     placement: "right",
     delay: 0,
     get children() {
-      var e = H(), a = e.firstChild;
-      e.$$keydown = f, e.$$contextmenu = h, e.$$click = () => t.onClick();
-      var n = r;
-      return typeof n == "function" ? D(n, e) : r = e, d(e, o(E, {
+      var e = L(), n = e.firstChild;
+      e.$$keydown = a, e.$$contextmenu = m, e.$$click = () => t.onClick();
+      var r = o;
+      return typeof r == "function" ? E(r, e) : o = e, v(e, l(R, {
         get component() {
           return t.item.icon;
         },
+        get active() {
+          return u();
+        },
         get class() {
-          return v("relative w-5 h-5 transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", t.isActive ? "text-activity-bar-foreground-active" : "group-hover/activity-item:text-activity-bar-foreground-active");
+          return f("relative w-5 h-5 transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", u() ? "text-activity-bar-foreground-active" : "group-hover/activity-item:text-activity-bar-foreground-active");
         }
-      }), null), d(e, o(B, {
+      }), null), v(e, l(D, {
         get when() {
           return c();
         },
         get children() {
-          var i = F();
-          return d(i, (() => {
-            var l = R(() => typeof c() == "number" && c() > 99);
-            return () => l() ? "99+" : c();
-          })()), x(() => g(i, v("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[length:var(--floe-type-caption)] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), i;
+          var i = H();
+          return v(i, (() => {
+            var g = S(() => typeof c() == "number" && c() > 99);
+            return () => g() ? "99+" : c();
+          })()), y(() => h(i, f("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[length:var(--floe-type-caption)] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), i;
         }
-      }), null), x((i) => {
-        var l = v("group/activity-item relative w-full aspect-square flex items-center justify-center cursor-pointer", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", "text-activity-bar-foreground", t.isActive && "text-activity-bar-foreground-active"), y = t.item.label, C = t.isActive, k = s(), A = t.item.ariaControls, w = t.item.ariaHasPopup ?? (t.item.onContextMenu ? "menu" : void 0), I = v("absolute inset-1 rounded-md", "transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", t.isActive ? "bg-[var(--floe-state-selected)]" : "bg-transparent group-hover/activity-item:bg-[var(--floe-state-hover)]");
-        return l !== i.e && g(e, i.e = l), y !== i.t && u(e, "aria-label", i.t = y), C !== i.a && u(e, "aria-pressed", i.a = C), k !== i.o && u(e, "aria-expanded", i.o = k), A !== i.i && u(e, "aria-controls", i.i = A), w !== i.n && u(e, "aria-haspopup", i.n = w), I !== i.s && g(a, i.s = I), i;
+      }), null), y((i) => {
+        var g = f("group/activity-item relative w-full aspect-square flex items-center justify-center cursor-pointer", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", "text-activity-bar-foreground", u() && "text-activity-bar-foreground-active"), C = t.item.label, k = t.isActive, A = s(), w = t.item.ariaControls, I = t.item.ariaHasPopup ?? (t.item.onContextMenu ? "menu" : void 0), M = f("absolute inset-1 rounded-md", "transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", u() ? "bg-[var(--floe-state-selected)]" : "bg-transparent group-hover/activity-item:bg-[var(--floe-state-hover)]");
+        return g !== i.e && h(e, i.e = g), C !== i.t && d(e, "aria-label", i.t = C), k !== i.a && d(e, "aria-pressed", i.a = k), A !== i.o && d(e, "aria-expanded", i.o = A), w !== i.i && d(e, "aria-controls", i.i = w), I !== i.n && d(e, "aria-haspopup", i.n = I), M !== i.s && h(n, i.s = M), i;
       }, {
         e: void 0,
         t: void 0,
@@ -120,7 +123,7 @@ function $(t) {
     }
   });
 }
-S(["click", "contextmenu", "keydown"]);
+j(["click", "contextmenu", "keydown"]);
 export {
-  U as ActivityBar
+  W as ActivityBar
 };

package/dist/components/layout/MobileTabBar.d.ts

@@ -4,6 +4,7 @@ export interface MobileTabBarItem extends Pick<ActivityBarItem, 'buttonRef' | 'a
     id: string;
     icon: Component<{
         class?: string;
+        active?: boolean;
     }>;
     label: string;
     badge?: number | string | (() => number | string | undefined);