@floegence/floe-webapp-core 0.42.4 → 0.43.0

package/dist/app/FloeRegistryContributions.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentContext, type FloeComponent } from '../context/ComponentRegistry';
+export interface FloeRegistryContributionsProps<TProtocol = unknown> {
+    /** Reactive contribution inventory. Membership is reconciled by stable component id. */
+    components?: readonly FloeComponent<TProtocol>[];
+    /** Optional protocol resolver to inject into ComponentContext.protocol. */
+    getProtocol?: () => TProtocol;
+    /** Optional hook to customize the per-component context. */
+    createComponentContext?: (id: string, base: ComponentContext<TProtocol>) => ComponentContext<TProtocol>;
+    /** Receives validation or lifecycle failures without poisoning later reconciliation. */
+    onError?: (error: unknown) => void;
+}
+/**
+ * Dynamically projects host-neutral Floe components into the shared registry.
+ *
+ * Reconciliation is serialized so an id is fully unmounted and unregistered
+ * before a later operation for that id begins. Updating a retained id refreshes
+ * its registry projection without restarting its lifecycle, preserving existing
+ * KeepAlive views and component-local state.
+ */
+export declare function FloeRegistryContributions<TProtocol = unknown>(props: FloeRegistryContributionsProps<TProtocol>): null;

package/dist/app/FloeRegistryContributions.js

@@ -0,0 +1,97 @@
+import { createEffect as y, onCleanup as C } from "solid-js";
+import { useComponentRegistry as w, useComponentContextFactory as b } from "../context/ComponentRegistry.js";
+function h(r) {
+  const t = {};
+  return t.current = r, t.wrapper = {
+    get id() {
+      return t.current.id;
+    },
+    get name() {
+      return t.current.name;
+    },
+    get icon() {
+      return t.current.icon;
+    },
+    get description() {
+      return t.current.description;
+    },
+    get component() {
+      return t.current.component;
+    },
+    get sidebar() {
+      return t.current.sidebar;
+    },
+    get commands() {
+      return t.current.commands;
+    },
+    get statusBar() {
+      return t.current.statusBar;
+    },
+    async onMount(o) {
+      const e = t.current;
+      t.mountedDefinition = e, await e.onMount?.(o);
+    },
+    async onUnmount() {
+      const o = t.mountedDefinition;
+      try {
+        await o?.onUnmount?.();
+      } finally {
+        t.mountedDefinition = void 0;
+      }
+    }
+  }, t;
+}
+function F(r) {
+  const t = /* @__PURE__ */ new Map();
+  for (const o of r) {
+    const e = o.id.trim();
+    if (!e) throw new Error("FloeRegistryContributions requires a non-empty component id.");
+    if (e !== o.id)
+      throw new Error(`FloeRegistryContributions component id must be canonical: ${o.id}`);
+    if (t.has(e))
+      throw new Error(`FloeRegistryContributions received duplicate component id: ${e}`);
+    t.set(e, o);
+  }
+  return t;
+}
+function E(r) {
+  const t = w(), o = b(), e = /* @__PURE__ */ new Map();
+  let a = !1, d = Promise.resolve(), m = (i) => console.error("[FloeRegistryContributions]", i);
+  const l = (i) => {
+    d = d.then(i).catch((u) => {
+      m(u);
+    });
+  };
+  return y(() => {
+    const i = [...r.components ?? []], u = r.getProtocol, f = r.createComponentContext;
+    m = r.onError ?? ((s) => console.error("[FloeRegistryContributions]", s)), l(async () => {
+      if (a) return;
+      const s = F(i);
+      for (const n of [...e.keys()])
+        s.has(n) || (await t.unregister(n), e.delete(n));
+      for (const [n, p] of s) {
+        let c = e.get(n);
+        if (c)
+          c.current = p;
+        else {
+          if (t.getComponent(n))
+            throw new Error(`FloeRegistryContributions cannot replace an existing registry component: ${n}`);
+          c = h(p), e.set(n, c);
+        }
+        if (t.register(c.wrapper), t.mountedComponents().has(n)) continue;
+        const g = o(n, {
+          protocol: u?.()
+        });
+        await t.mount(n, f ? f(n, g) : g);
+      }
+    });
+  }), C(() => {
+    a = !0, l(async () => {
+      for (const i of [...e.keys()])
+        await t.unregister(i), e.delete(i);
+    });
+  }), null;
+}
+export {
+  E as FloeRegistryContributions
+};

package/dist/app/index.d.ts

@@ -2,3 +2,4 @@ export { FloeProvider, type FloeProviderProps } from './FloeProvider';
 export { FloeApp, type FloeAppProps } from './FloeApp';
 export { ActivityAppsMain, type ActivityAppsMainProps } from './ActivityAppsMain';
 export { FloeRegistryRuntime, type FloeRegistryRuntimeProps } from './FloeRegistryRuntime';
+export { FloeRegistryContributions, type FloeRegistryContributionsProps, } from './FloeRegistryContributions';

package/dist/app.js

@@ -1,10 +1,12 @@
 import { ActivityAppsMain as e } from "./app/ActivityAppsMain.js";
-import { FloeApp as t } from "./app/FloeApp.js";
+import { FloeApp as i } from "./app/FloeApp.js";
 import { FloeProvider as m } from "./app/FloeProvider.js";
-import { FloeRegistryRuntime as x } from "./app/FloeRegistryRuntime.js";
+import { FloeRegistryContributions as x } from "./app/FloeRegistryContributions.js";
+import { FloeRegistryRuntime as n } from "./app/FloeRegistryRuntime.js";
 export {
   e as ActivityAppsMain,
-  t as FloeApp,
+  i as FloeApp,
   m as FloeProvider,
-  x as FloeRegistryRuntime
+  x as FloeRegistryContributions,
+  n as FloeRegistryRuntime
 };

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

@@ -1,5 +1,6 @@
-import { type Component } from 'solid-js';
+import { type Component, type JSX } from 'solid-js';
 import { type ActivityBarCollapseBehavior } from './activityBarBehavior';
+import { type BarItemContextMenuHandler } from './barItemContextMenu';
 export interface ActivityBarItem {
     id: string;
     icon: Component<{
@@ -8,6 +9,8 @@ export interface ActivityBarItem {
     label: string;
     badge?: number | string | (() => number | string | undefined);
     onClick?: () => void;
+    /** Requests a product-owned context menu for this concrete Activity Bar button. */
+    onContextMenu?: BarItemContextMenuHandler;
     /** Receives the concrete trigger button for anchored product surfaces. */
     buttonRef?: (button: HTMLButtonElement | null) => void;
     /** ARIA disclosure state for a surface controlled by this item. */
@@ -40,4 +43,4 @@ export interface ActivityBarProps {
  * VSCode-style Activity Bar
  * Vertical icon strip on the left side
  */
-export declare function ActivityBar(props: ActivityBarProps): import("solid-js").JSX.Element;
+export declare function ActivityBar(props: ActivityBarProps): JSX.Element;

package/dist/components/layout/ActivityBar.js

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

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

@@ -0,0 +1,12 @@
+export type BarItemContextMenuSource = 'pointer' | 'keyboard';
+export type BarItemContextMenuRequest = Readonly<{
+    /** Concrete bar button that owns the requested menu. */
+    trigger: HTMLButtonElement;
+    /** Viewport-space menu anchor. Pointer requests preserve the exact pointer position. */
+    clientX: number;
+    clientY: number;
+    source: BarItemContextMenuSource;
+}>;
+export type BarItemContextMenuHandler = (request: BarItemContextMenuRequest) => void;
+export declare function isBarItemContextMenuKey(event: KeyboardEvent): boolean;
+export declare function keyboardBarItemContextMenuRequest(trigger: HTMLButtonElement): BarItemContextMenuRequest;

package/dist/components/layout/barItemContextMenu.js

@@ -0,0 +1,16 @@
+function n(e) {
+  return e.key === "ContextMenu" || e.shiftKey && e.key === "F10";
+}
+function o(e) {
+  const t = e.getBoundingClientRect();
+  return {
+    trigger: e,
+    clientX: t.left + t.width / 2,
+    clientY: t.top + t.height / 2,
+    source: "keyboard"
+  };
+}
+export {
+  n as isBarItemContextMenuKey,
+  o as keyboardBarItemContextMenuRequest
+};

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

@@ -1,14 +1,15 @@
 export { Shell, type ShellProps, type ShellSlotClassNames } from './Shell';
 export { ActivityBar, type ActivityBarItem, type ActivityBarProps } from './ActivityBar';
+export type { BarItemContextMenuHandler, BarItemContextMenuRequest, BarItemContextMenuSource, } from './barItemContextMenu';
 export { Sidebar, SidebarContent, SidebarItemList, SidebarSection, SidebarItem, type SidebarProps, type SidebarContentProps, type SidebarItemListProps, type SidebarSectionProps, type SidebarItemProps, } from './Sidebar';
 export { TopBar, type TopBarProps } from './TopBar';
 export { TopBarIconButton, type TopBarIconButtonProps } from './TopBarIconButton';
-export { BottomBar, BottomBarItem, StatusIndicator, type BottomBarProps, type BottomBarItemProps, type StatusIndicatorProps } from './BottomBar';
+export { BottomBar, BottomBarItem, StatusIndicator, type BottomBarProps, type BottomBarItemProps, type StatusIndicatorProps, } from './BottomBar';
 export { BottomBarCompanion, type BottomBarCompanionDismissReason, type BottomBarCompanionPhase, type BottomBarCompanionProps, } from './BottomBarCompanion';
 export { MobileTabBar, type MobileTabBarItem, type MobileTabBarProps } from './MobileTabBar';
 export { ResizeHandle, type ResizeHandleProps } from './ResizeHandle';
 export { SidebarPane, type SidebarPaneProps } from './SidebarPane';
-export { Panel, PanelHeader, PanelContent, type PanelProps, type PanelHeaderProps, type PanelContentProps } from './Panel';
+export { Panel, PanelHeader, PanelContent, type PanelProps, type PanelHeaderProps, type PanelContentProps, } from './Panel';
 export { KeepAliveStack, type KeepAliveStackProps, type KeepAliveView } from './KeepAliveStack';
 export { DisplayModeSwitcher, sanitizeDisplayMode, type DisplayMode, type DisplayModeSwitcherProps, } from './DisplayModeSwitcher';
 export { DisplayModePageShell, type DisplayModePageShellProps } from './DisplayModePageShell';

package/dist/components/workbench/WorkbenchFilterBar.d.ts

@@ -1,4 +1,5 @@
 import { type Component, type JSX } from 'solid-js';
+import { type BarItemContextMenuHandler } from '../layout/barItemContextMenu';
 import { type WorkbenchWidgetFrame } from './workbenchHelpers';
 import { type WorkbenchEdgeAutoPanFrame } from './workbenchEdgeAutoPan';
 import type { WorkbenchDockToolId, WorkbenchInteractionMode, WorkbenchViewport, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
@@ -46,6 +47,8 @@ export type WorkbenchHostDockItem = Readonly<{
     }>;
     active?: boolean;
     onActivate?: (trigger: HTMLButtonElement) => void;
+    /** Requests a product-owned context menu for this concrete Dock button. */
+    onContextMenu?: BarItemContextMenuHandler;
     canvasPlacement?: WorkbenchDockCanvasPlacement;
 }>;
 export type WorkbenchDockItemActivation = Readonly<{