@floegence/floe-webapp-core 0.86.69 → 0.86.71

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

@@ -0,0 +1,21 @@
+import { type Accessor, type JSX } from 'solid-js';
+import { type SplitWorkspaceLayout } from './splitWorkspaceModel';
+export interface SplitWorkspaceProps {
+    layout: SplitWorkspaceLayout | null;
+    /** Stable item keys, including retained items currently absent from the layout. */
+    itemIds: readonly string[];
+    activeId: string | null;
+    compact?: boolean;
+    maximizedId?: string | null;
+    showHeaders?: boolean;
+    class?: string;
+    resizeLabel: string;
+    onLayoutChange: (layout: SplitWorkspaceLayout | null) => void;
+    onActivate: (id: string) => void;
+    renderItem: (id: string, visible: Accessor<boolean>) => JSX.Element;
+    renderHeader?: (id: string) => JSX.Element;
+    externalDragType?: string;
+    resolveExternalDrag?: (event: DragEvent) => string | null;
+}
+/** A flat keyed surface keeps expensive content mounted across tree edits. */
+export declare function SplitWorkspace(props: SplitWorkspaceProps): JSX.Element;

package/dist/components/layout/SplitWorkspace.js

@@ -0,0 +1,182 @@
+import { use as B, insert as b, createComponent as E, setAttribute as v, effect as D, memo as $, setStyleProperty as d, className as p, template as L, delegateEvents as _ } from "solid-js/web";
+import { createUniqueId as ee, createSignal as F, createMemo as te, onCleanup as U, For as N, Show as Y } from "solid-js";
+import { startPointerSession as ae } from "../ui/pointerSession.js";
+import { startHotInteraction as V } from "../../utils/hotInteraction.js";
+import { measureSplitWorkspace as re, resizeSplitWorkspace as S, dockSplitWorkspaceItem as oe } from "./splitWorkspaceModel.js";
+var ie = /* @__PURE__ */ L("<div data-floe-split-workspace style=position:relative;height:100%;min-height:0;overflow:hidden>"), ne = /* @__PURE__ */ L('<div class="flex h-8 shrink-0 items-center gap-1 border-b border-border bg-muted/30 px-2">'), le = /* @__PURE__ */ L('<div class="pointer-events-none absolute z-30 rounded border-2 border-primary bg-primary/15">'), se = /* @__PURE__ */ L("<section style=position:absolute;flex-direction:column;overflow:hidden><div style=flex:1;min-height:0;position:relative;overflow:hidden>"), de = /* @__PURE__ */ L('<div role=separator tabindex=0 aria-valuemin=15 aria-valuemax=85 class="absolute z-20 bg-border hover:bg-primary/50 focus-visible:bg-primary focus-visible:outline-none"style=touch-action:none>');
+function he(i) {
+  let I, H, x, w, T = null;
+  const j = ee();
+  let G = 0;
+  const [J, W] = F(null), [f, P] = F(null), z = te(() => re(J() ?? i.layout)), A = () => i.compact ? i.activeId : i.maximizedId, K = (a) => A() ? A() === a : z().panes.has(a), M = "application/x-floe-split-workspace", C = () => {
+    T = null, P(null), x?.(), x = void 0;
+  }, R = () => {
+    H?.stop({
+      commit: !1
+    }), H = void 0;
+  }, X = (a) => {
+    a.key === "Escape" && (R(), C());
+  }, O = (a, s) => {
+    if (a.button !== 0 || !i.layout) return;
+    a.preventDefault(), a.stopPropagation(), R();
+    const r = i.layout, n = I.getBoundingClientRect(), l = s.axis === "x" ? n.width * s.width / 100 : n.height * s.height / 100;
+    if (l <= 0) return;
+    const e = s.axis === "x" ? a.clientX : a.clientY;
+    let c = s.ratio;
+    x = V({
+      kind: "resize",
+      cursor: s.axis === "x" ? "col-resize" : "row-resize"
+    });
+    const t = (o, u) => {
+      c = Math.max(0.15, Math.min(0.85, s.ratio + ((s.axis === "x" ? o : u) - e) / l));
+    };
+    document.addEventListener("keydown", X, !0), H = ae({
+      pointerEvent: a,
+      captureEl: a.currentTarget,
+      onMove: (o) => {
+        t(o.clientX, o.clientY), w === void 0 && (w = requestAnimationFrame(() => {
+          w = void 0, W(S(r, s.id, c));
+        }));
+      },
+      onEnd: (o) => {
+        w !== void 0 && cancelAnimationFrame(w), w = void 0, o.event && t(o.event.clientX, o.event.clientY), W(null), x?.(), x = void 0, document.removeEventListener("keydown", X, !0), o.commit && i.layout === r && i.onLayoutChange(S(r, s.id, c));
+      }
+    });
+  };
+  U(() => {
+    R(), C(), document.removeEventListener("keydown", X, !0);
+  });
+  const q = (a) => !!(T || a.dataTransfer?.types.includes(M) || i.externalDragType && a.dataTransfer?.types.includes(i.externalDragType)), Q = (a, s) => {
+    if (i.compact || !q(a)) return;
+    a.preventDefault(), a.stopPropagation(), a.dataTransfer && (a.dataTransfer.dropEffect = "move");
+    const r = a.currentTarget.getBoundingClientRect(), n = (a.clientX - r.left) / r.width, l = (a.clientY - r.top) / r.height, e = [["left", n], ["right", 1 - n], ["top", l], ["bottom", 1 - l]];
+    e.sort((c, t) => c[1] - t[1]), P({
+      id: s,
+      edge: e[0][1] < 0.25 ? e[0][0] : "center"
+    });
+  }, Z = (a, s) => {
+    if (!q(a) || !f()) return;
+    a.preventDefault(), a.stopPropagation();
+    const r = T || a.dataTransfer?.getData(M) || i.resolveExternalDrag?.(a);
+    r && i.itemIds.includes(r) && (i.onLayoutChange(oe(i.layout, r, s, f().edge, "split-" + j + "-" + ++G)), i.onActivate(r)), C();
+  };
+  return (() => {
+    var a = ie();
+    a.addEventListener("dragend", C), a.addEventListener("dragleave", (r) => {
+      I.contains(r.relatedTarget) || P(null);
+    });
+    var s = I;
+    return typeof s == "function" ? B(s, a) : I = a, b(a, E(N, {
+      get each() {
+        return i.itemIds;
+      },
+      children: (r) => {
+        const n = () => K(r), l = () => A() ? {
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100
+        } : z().panes.get(r);
+        return (() => {
+          var e = se(), c = e.firstChild;
+          return e.addEventListener("drop", (t) => Z(t, r)), e.addEventListener("dragover", (t) => Q(t, r)), e.$$focusin = () => {
+            n() && i.activeId !== r && i.onActivate(r);
+          }, B((t) => {
+            const o = () => {
+              n() && i.activeId !== r && i.onActivate(r);
+            };
+            t.addEventListener("pointerdown", o, !0), U(() => t.removeEventListener("pointerdown", o, !0));
+          }, e), v(e, "data-floe-split-pane", r), b(e, E(Y, {
+            get when() {
+              return $(() => !!i.showHeaders)() && i.renderHeader;
+            },
+            get children() {
+              var t = ne();
+              return t.addEventListener("dragstart", (o) => {
+                if (o.target.closest("button, input, select")) {
+                  o.preventDefault();
+                  return;
+                }
+                T = r, o.dataTransfer?.setData(M, r), o.dataTransfer && (o.dataTransfer.effectAllowed = "move"), x = V({
+                  kind: "drag",
+                  cursor: "grabbing"
+                });
+              }), v(t, "data-floe-split-header", r), b(t, () => i.renderHeader?.(r)), D(() => v(t, "draggable", !i.compact)), t;
+            }
+          }), c), b(c, () => i.renderItem(r, n)), b(e, E(Y, {
+            get when() {
+              return f()?.id === r;
+            },
+            get children() {
+              var t = le();
+              return D((o) => {
+                var u = f().edge, g = f().edge === "right" ? "50%" : "0", h = f().edge === "left" ? "50%" : "0", m = f().edge === "bottom" ? "50%" : "0", y = f().edge === "top" ? "50%" : "0";
+                return u !== o.e && v(t, "data-floe-split-drop", o.e = u), g !== o.t && d(t, "left", o.t = g), h !== o.a && d(t, "right", o.a = h), m !== o.o && d(t, "top", o.o = m), y !== o.i && d(t, "bottom", o.i = y), o;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0,
+                o: void 0,
+                i: void 0
+              }), t;
+            }
+          }), null), D((t) => {
+            var o = i.activeId === r ? "true" : "false", u = !n(), g = n() ? "flex" : "none", h = (l()?.x ?? 0) + "%", m = (l()?.y ?? 0) + "%", y = (l()?.width ?? 100) + "%", k = (l()?.height ?? 100) + "%";
+            return o !== t.e && v(e, "data-active", t.e = o), u !== t.t && (e.hidden = t.t = u), g !== t.a && d(e, "display", t.a = g), h !== t.o && d(e, "left", t.o = h), m !== t.i && d(e, "top", t.i = m), y !== t.n && d(e, "width", t.n = y), k !== t.s && d(e, "height", t.s = k), t;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0,
+            s: void 0
+          }), e;
+        })();
+      }
+    }), null), b(a, E(Y, {
+      get when() {
+        return !A();
+      },
+      get children() {
+        return E(N, {
+          get each() {
+            return z().dividers.map((r) => r.id);
+          },
+          children: (r) => {
+            const n = () => z().dividers.find((l) => l.id === r);
+            return (() => {
+              var l = de();
+              return l.$$keydown = (e) => {
+                const c = n().axis === "x" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+                if (!i.layout || ![...c, "Home", "End", "Enter"].includes(e.key)) return;
+                e.preventDefault(), e.stopPropagation();
+                const t = e.key === "Home" ? 0.15 : e.key === "End" ? 0.85 : e.key === "Enter" ? 0.5 : n().ratio + (e.key === c[0] ? -0.05 : 0.05);
+                i.onLayoutChange(S(i.layout, r, t));
+              }, l.$$dblclick = () => {
+                i.layout && i.onLayoutChange(S(i.layout, r, 0.5));
+              }, l.$$pointerdown = (e) => O(e, n()), v(l, "data-floe-split-divider", r), D((e) => {
+                var c = i.resizeLabel, t = n().axis === "x" ? "vertical" : "horizontal", o = Math.round(n().ratio * 100), u = n().axis === "x" ? "col-resize" : "row-resize", g = n().x + (n().axis === "x" ? n().width * n().ratio : 0) + "%", h = n().y + (n().axis === "y" ? n().height * n().ratio : 0) + "%", m = n().axis === "x" ? "4px" : n().width + "%", y = n().axis === "y" ? "4px" : n().height + "%", k = n().axis === "x" ? "translateX(-2px)" : "translateY(-2px)";
+                return c !== e.e && v(l, "aria-label", e.e = c), t !== e.t && v(l, "aria-orientation", e.t = t), o !== e.a && v(l, "aria-valuenow", e.a = o), u !== e.o && d(l, "cursor", e.o = u), g !== e.i && d(l, "left", e.i = g), h !== e.n && d(l, "top", e.n = h), m !== e.s && d(l, "width", e.s = m), y !== e.h && d(l, "height", e.h = y), k !== e.r && d(l, "transform", e.r = k), e;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0,
+                o: void 0,
+                i: void 0,
+                n: void 0,
+                s: void 0,
+                h: void 0,
+                r: void 0
+              }), l;
+            })();
+          }
+        });
+      }
+    }), null), D(() => p(a, i.class)), a;
+  })();
+}
+_(["focusin", "pointerdown", "dblclick", "keydown"]);
+export {
+  he as SplitWorkspace
+};

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

@@ -15,3 +15,5 @@ export { DisplayModeSwitcher, sanitizeDisplayMode, type DisplayMode, type Displa
 export { DisplayModePageShell, type DisplayModePageShellProps } from './DisplayModePageShell';
 export { ThemeToggle, type ThemeToggleProps } from './ThemeToggle';
 export { AppViewport, type AppViewportProps } from './AppViewport';
+export * from './splitWorkspaceModel';
+export * from './SplitWorkspace';

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

@@ -0,0 +1,38 @@
+/** Serializable placement. Hosts retain item lifetime, authorization and persistence. */
+export type SplitWorkspaceLayout = Readonly<{
+    type: 'pane';
+    id: string;
+}> | Readonly<{
+    type: 'split';
+    id: string;
+    axis: 'x' | 'y';
+    ratio: number;
+    first: SplitWorkspaceLayout;
+    second: SplitWorkspaceLayout;
+}>;
+export type SplitWorkspaceEdge = 'left' | 'right' | 'top' | 'bottom';
+export type SplitWorkspacePreset = 'single' | 'columns' | 'rows' | 'three-columns' | 'main-left' | 'grid';
+export interface SplitWorkspaceRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface SplitWorkspaceDivider extends SplitWorkspaceRect {
+    id: string;
+    axis: 'x' | 'y';
+    ratio: number;
+}
+export declare const splitWorkspacePane: (id: string) => SplitWorkspaceLayout;
+export declare function splitWorkspaceItems(layout: SplitWorkspaceLayout | null): string[];
+export declare function isSplitWorkspaceLayout(value: unknown): value is SplitWorkspaceLayout;
+export declare function mapSplitWorkspace(layout: SplitWorkspaceLayout, id: string, update: (node: SplitWorkspaceLayout) => SplitWorkspaceLayout): SplitWorkspaceLayout;
+export declare function removeSplitWorkspaceItem(layout: SplitWorkspaceLayout | null, id: string): SplitWorkspaceLayout | null;
+export declare function reconcileSplitWorkspace(layout: SplitWorkspaceLayout | null, availableIds: readonly string[]): SplitWorkspaceLayout | null;
+export declare function resizeSplitWorkspace(layout: SplitWorkspaceLayout, id: string, ratio: number): SplitWorkspaceLayout;
+export declare function dockSplitWorkspaceItem(layout: SplitWorkspaceLayout | null, sourceId: string, targetId: string, edge: SplitWorkspaceEdge | 'center', splitId: string): SplitWorkspaceLayout | null;
+export declare function presetSplitWorkspace(preset: SplitWorkspacePreset, itemIds: readonly string[], id: () => string): SplitWorkspaceLayout | null;
+export declare function measureSplitWorkspace(layout: SplitWorkspaceLayout | null): {
+    panes: Map<string, SplitWorkspaceRect>;
+    dividers: SplitWorkspaceDivider[];
+};

package/dist/components/layout/splitWorkspaceModel.js

@@ -0,0 +1,96 @@
+const o = (i) => ({ type: "pane", id: i });
+function x(i) {
+  return i ? i.type === "pane" ? [i.id] : [...x(i.first), ...x(i.second)] : [];
+}
+function u(i) {
+  const s = /* @__PURE__ */ new Set();
+  let n = 0;
+  const r = (t, c) => {
+    if (!t || typeof t != "object" || c > 32 || ++n > 127) return !1;
+    const e = t;
+    return typeof e.id != "string" || !e.id.trim() || s.has(e.id) ? !1 : (s.add(e.id), e.type === "pane" ? !0 : e.type === "split" && (e.axis === "x" || e.axis === "y") && typeof e.ratio == "number" && Number.isFinite(e.ratio) && e.ratio >= 0.15 && e.ratio <= 0.85 && r(e.first, c + 1) && r(e.second, c + 1));
+  };
+  return r(i, 0);
+}
+function a(i, s, n) {
+  if (i.id === s) return n(i);
+  if (i.type === "pane") return i;
+  const r = a(i.first, s, n), t = a(i.second, s, n);
+  return r === i.first && t === i.second ? i : { ...i, first: r, second: t };
+}
+function m(i, s) {
+  if (!i || i.id === s) return null;
+  if (i.type === "pane") return i;
+  const n = m(i.first, s), r = m(i.second, s);
+  return n ? r ? n === i.first && r === i.second ? i : { ...i, first: n, second: r } : n : r;
+}
+function k(i, s) {
+  const n = new Set(s);
+  return x(i).reduce(
+    (r, t) => n.has(t) ? r : m(r, t),
+    i
+  );
+}
+function w(i, s, n) {
+  return Number.isFinite(n) ? a(
+    i,
+    s,
+    (r) => r.type === "split" ? { ...r, ratio: Math.max(0.15, Math.min(0.85, n)) } : r
+  ) : i;
+}
+function S(i, s, n, r, t) {
+  if (!i || s === n || !x(i).includes(n))
+    return i;
+  const c = x(i).includes(s);
+  if (r === "center") {
+    const p = (f) => f.type === "pane" ? f.id === n ? o(s) : c && f.id === s ? o(n) : f : { ...f, first: p(f.first), second: p(f.second) };
+    return p(i);
+  }
+  const e = m(i, s);
+  return e ? a(e, n, (p) => ({
+    type: "split",
+    id: t,
+    axis: r === "left" || r === "right" ? "x" : "y",
+    ratio: 0.5,
+    first: r === "left" || r === "top" ? o(s) : p,
+    second: r === "left" || r === "top" ? p : o(s)
+  })) : i;
+}
+function W(i, s, n) {
+  const r = i === "single" ? 1 : i === "grid" ? 4 : i === "columns" || i === "rows" ? 2 : 3, t = [...new Set(s)].slice(0, r).map(o), c = (e, p, f, h = 0.5) => ({ type: "split", id: n(), axis: e, ratio: h, first: p, second: f });
+  return t.length ? t.length === 1 ? t[0] : t.length === 2 ? c(i === "rows" ? "y" : "x", t[0], t[1]) : i === "grid" && t.length === 4 ? c("x", c("y", t[0], t[2]), c("y", t[1], t[3])) : c(
+    "x",
+    t[0],
+    c(i === "three-columns" ? "x" : "y", t[1], t[2]),
+    i === "three-columns" ? 1 / 3 : 0.5
+  ) : null;
+}
+function l(i) {
+  const s = /* @__PURE__ */ new Map(), n = [], r = (t, c) => {
+    if (t.type === "pane") {
+      s.set(t.id, c);
+      return;
+    }
+    n.push({ ...c, id: t.id, axis: t.axis, ratio: t.ratio });
+    const { x: e, y: p, width: f, height: h } = c;
+    t.axis === "x" ? (r(t.first, { x: e, y: p, width: f * t.ratio, height: h }), r(t.second, { x: e + f * t.ratio, y: p, width: f * (1 - t.ratio), height: h })) : (r(t.first, { x: e, y: p, width: f, height: h * t.ratio }), r(t.second, {
+      x: e,
+      y: p + h * t.ratio,
+      width: f,
+      height: h * (1 - t.ratio)
+    }));
+  };
+  return i && r(i, { x: 0, y: 0, width: 100, height: 100 }), { panes: s, dividers: n };
+}
+export {
+  S as dockSplitWorkspaceItem,
+  u as isSplitWorkspaceLayout,
+  a as mapSplitWorkspace,
+  l as measureSplitWorkspace,
+  W as presetSplitWorkspace,
+  k as reconcileSplitWorkspace,
+  m as removeSplitWorkspaceItem,
+  w as resizeSplitWorkspace,
+  x as splitWorkspaceItems,
+  o as splitWorkspacePane
+};

package/dist/components/ui/Dropdown.d.ts

@@ -18,6 +18,8 @@ export interface DropdownProps {
     trigger: JSX.Element;
     triggerClass?: string;
     triggerAriaLabel?: string;
+    triggerAriaLabelledBy?: string;
+    triggerAriaDescribedBy?: string;
     /** Treat the existing trigger boundary as a field (used by Select). */
     triggerInputSurface?: boolean;
     items: DropdownItem[] | Accessor<DropdownItem[]>;
@@ -44,6 +46,11 @@ export declare function Dropdown(props: DropdownProps): JSX.Element;
  * Simple select dropdown
  */
 export interface SelectProps {
+    /** Localized field name, independent of the currently selected value. */
+    ariaLabel?: string;
+    /** Prefer a visible field label when one is available. */
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
     value: string;
     onChange: (value: string) => void;
     options: {