@floegence/floe-webapp-core 0.35.58 → 0.36.0

package/dist/components/workbench/WorkbenchCanvas.js

@@ -0,0 +1,79 @@
+import { use as l, insert as a, createComponent as i, effect as u, template as c } from "solid-js/web";
+import { For as d } from "solid-js";
+import { WorkbenchWidget as m } from "./WorkbenchWidget.js";
+import { InfiniteCanvas as g } from "../ui/InfiniteCanvas.js";
+var v = /* @__PURE__ */ c("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>"), s = /* @__PURE__ */ c("<div class=workbench-canvas>");
+function w(e) {
+  return (() => {
+    var t = s(), o = e.setCanvasFrameRef;
+    return typeof o == "function" ? l(o, t) : e.setCanvasFrameRef = t, a(t, i(g, {
+      ariaLabel: "Workbench canvas",
+      class: "workbench-canvas__infinite",
+      get viewport() {
+        return e.viewport;
+      },
+      get onViewportChange() {
+        return e.onViewportCommit;
+      },
+      get onCanvasContextMenu() {
+        return e.onCanvasContextMenu;
+      },
+      get disablePanZoom() {
+        return e.locked;
+      },
+      get children() {
+        var r = v();
+        return r.firstChild, a(r, i(d, {
+          get each() {
+            return e.widgets;
+          },
+          children: (n) => i(m, {
+            item: n,
+            get selected() {
+              return e.selectedWidgetId === n.id;
+            },
+            get optimisticFront() {
+              return e.optimisticFrontWidgetId === n.id;
+            },
+            get topZIndex() {
+              return e.topZIndex;
+            },
+            get viewportScale() {
+              return e.viewport.scale;
+            },
+            get locked() {
+              return e.locked;
+            },
+            get filtered() {
+              return !e.filters[n.type];
+            },
+            get onSelect() {
+              return e.onSelectWidget;
+            },
+            get onContextMenu() {
+              return e.onWidgetContextMenu;
+            },
+            get onStartOptimisticFront() {
+              return e.onStartOptimisticFront;
+            },
+            get onCommitFront() {
+              return e.onCommitFront;
+            },
+            get onCommitMove() {
+              return e.onCommitMove;
+            },
+            get onCommitResize() {
+              return e.onCommitResize;
+            },
+            get onRequestDelete() {
+              return e.onRequestDelete;
+            }
+          })
+        }), null), r;
+      }
+    })), u(() => t.classList.toggle("is-locked", !!e.locked)), t;
+  })();
+}
+export {
+  w as WorkbenchCanvas
+};

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

@@ -0,0 +1,24 @@
+import { type Component } from 'solid-js';
+type WorkbenchContextMenuActionItem = Readonly<{
+    id: string;
+    kind: 'action';
+    label: string;
+    icon: Component<{
+        class?: string;
+    }>;
+    onSelect: () => void;
+    disabled?: boolean;
+    destructive?: boolean;
+}>;
+type WorkbenchContextMenuSeparatorItem = Readonly<{
+    id: string;
+    kind: 'separator';
+}>;
+export type WorkbenchContextMenuItem = WorkbenchContextMenuActionItem | WorkbenchContextMenuSeparatorItem;
+export interface WorkbenchContextMenuProps {
+    x: number;
+    y: number;
+    items: readonly WorkbenchContextMenuItem[];
+}
+export declare function WorkbenchContextMenu(props: WorkbenchContextMenuProps): import("solid-js").JSX.Element;
+export {};

package/dist/components/workbench/WorkbenchContextMenu.js

@@ -0,0 +1,44 @@
+import { insert as a, createComponent as d, addEventListener as b, effect as v, className as f, setStyleProperty as m, template as l, delegateEvents as h } from "solid-js/web";
+import { For as x } from "solid-js";
+import { cn as k } from "../../utils/cn.js";
+var _ = /* @__PURE__ */ l("<div role=menu class=workbench-context-menu data-floe-workbench-boundary=true>"), p = /* @__PURE__ */ l("<div role=separator aria-orientation=horizontal class=workbench-context-menu__separator>"), w = /* @__PURE__ */ l("<button type=button role=menuitem><span class=workbench-context-menu__label>");
+function $(n) {
+  return n.kind === "action";
+}
+function E(n) {
+  return (() => {
+    var r = _();
+    return r.$$contextmenu = (e) => e.preventDefault(), a(r, d(x, {
+      get each() {
+        return n.items;
+      },
+      children: (e) => {
+        if (!$(e))
+          return p();
+        const c = e.icon;
+        return (() => {
+          var t = w(), i = t.firstChild;
+          return b(t, "click", e.onSelect, !0), a(t, d(c, {
+            class: "h-3.5 w-3.5"
+          }), i), a(i, () => e.label), v((o) => {
+            var u = k("workbench-context-menu__item", e.destructive && "is-destructive"), s = e.disabled;
+            return u !== o.e && f(t, o.e = u), s !== o.t && (t.disabled = o.t = s), o;
+          }, {
+            e: void 0,
+            t: void 0
+          }), t;
+        })();
+      }
+    })), v((e) => {
+      var c = `${n.x}px`, t = `${n.y}px`;
+      return c !== e.e && m(r, "left", e.e = c), t !== e.t && m(r, "top", e.t = t), e;
+    }, {
+      e: void 0,
+      t: void 0
+    }), r;
+  })();
+}
+h(["contextmenu", "click"]);
+export {
+  E as WorkbenchContextMenu
+};

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

@@ -0,0 +1,16 @@
+import { type JSX } from 'solid-js';
+import type { WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
+export interface WorkbenchFilterBarProps {
+    widgets: readonly WorkbenchWidgetItem[];
+    filters: Record<WorkbenchWidgetType, boolean>;
+    /** Solo a single widget type — only this type remains visible. */
+    onSoloFilter: (type: WorkbenchWidgetType) => void;
+    /** Reset filters so every widget type is visible again. */
+    onShowAll: () => void;
+    /**
+     * Called when the user drags a widget pill onto the canvas to create a
+     * new widget of that type. Coordinates are in client space (clientX/Y).
+     */
+    onCreateAt?: (type: WorkbenchWidgetType, clientX: number, clientY: number) => void;
+}
+export declare function WorkbenchFilterBar(props: WorkbenchFilterBarProps): JSX.Element;

package/dist/components/workbench/WorkbenchFilterBar.js

@@ -0,0 +1,266 @@
+import { insert as g, createComponent as d, effect as I, setAttribute as S, template as E, Portal as F, setStyleProperty as H, delegateEvents as T } from "solid-js/web";
+import { createSignal as O, onCleanup as p, createMemo as G, For as P, Show as Y } from "solid-js";
+import { Motion as C } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
+import { easing as y, duration as L } from "../../utils/animations.js";
+import { Layers as B, Plus as W } from "../icons/index.js";
+import { startHotInteraction as q } from "../../utils/hotInteraction.js";
+import { WIDGET_REGISTRY as x } from "./widgets/widgetRegistry.js";
+var z = /* @__PURE__ */ E("<button type=button class=workbench-dock__item>"), N = /* @__PURE__ */ E('<div class=workbench-dock data-floe-canvas-interactive=true><button type=button class=workbench-dock__item aria-label="Show all widgets"></button><span class=workbench-dock__divider aria-hidden=true>'), U = /* @__PURE__ */ E("<div class=workbench-dock-ghost aria-hidden=true><div class=workbench-dock-ghost__halo></div><div class=workbench-dock-ghost__card><div class=workbench-dock-ghost__icon></div><div class=workbench-dock-ghost__copy><div class=workbench-dock-ghost__title></div><div class=workbench-dock-ghost__hint><span>");
+const X = 5, V = '[data-floe-workbench-canvas-frame="true"]';
+function j(e, l) {
+  const a = document.querySelector(V);
+  if (!(a instanceof HTMLElement)) return !1;
+  const s = a.getBoundingClientRect();
+  return e >= s.left && e <= s.right && l >= s.top && l <= s.bottom;
+}
+function J(e) {
+  const l = () => e.hoverOffset === -1 ? {
+    scale: 1.26,
+    y: -6,
+    x: 0
+  } : e.hoverOffset === 1 ? {
+    scale: 1.08,
+    y: -2,
+    x: 5
+  } : e.hoverOffset === -2 ? {
+    scale: 1.08,
+    y: -2,
+    x: -5
+  } : {
+    scale: 1,
+    y: 0,
+    x: 0
+  }, a = () => e.hoverOffset === -1, s = (i) => {
+    i.button === 0 && e.onDragBegin(i, e.type, e.label, e.icon);
+  };
+  return (() => {
+    var i = z();
+    return i.$$pointerdown = s, i.addEventListener("pointerleave", () => e.onLeave()), i.addEventListener("pointerenter", () => e.onEnter()), g(i, d(C.span, {
+      class: "workbench-dock__tile",
+      get animate() {
+        return l();
+      },
+      get transition() {
+        return {
+          duration: L.fast,
+          easing: y.easeOut
+        };
+      },
+      get children() {
+        return (() => {
+          const t = e.icon;
+          return d(t, {
+            class: "workbench-dock__icon"
+          });
+        })();
+      }
+    }), null), g(i, d(C.span, {
+      class: "workbench-dock__tooltip",
+      get animate() {
+        return {
+          opacity: a() ? 1 : 0,
+          y: a() ? -6 : 0
+        };
+      },
+      get transition() {
+        return {
+          duration: L.fast,
+          easing: y.easeOut
+        };
+      },
+      get children() {
+        return e.label;
+      }
+    }), null), I((t) => {
+      var f = !!e.active, _ = !!a(), h = !!e.isDragging, w = `${e.label} — click to solo, drag to canvas to create`, b = e.active;
+      return f !== t.e && i.classList.toggle("is-active", t.e = f), _ !== t.t && i.classList.toggle("is-hovered", t.t = _), h !== t.a && i.classList.toggle("is-source-dragging", t.a = h), w !== t.o && S(i, "aria-label", t.o = w), b !== t.i && S(i, "aria-pressed", t.i = b), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    }), i;
+  })();
+}
+function ie(e) {
+  const [l, a] = O(null), [s, i] = O(null);
+  let t;
+  p(() => {
+    t?.abort(), t = void 0, s()?.stopInteraction();
+  });
+  const f = G(() => x.every((o) => e.filters[o.type])), _ = (o) => {
+    const r = l();
+    return r === null ? 0 : r === o ? -1 : r === o + 1 ? -2 : r === o - 1 ? 1 : 0;
+  }, h = (o) => {
+    const r = s();
+    if (!r) return;
+    const n = !r.moved;
+    if (r.stopInteraction(), i(null), t?.abort(), t = void 0, n) {
+      e.onSoloFilter(r.type);
+      return;
+    }
+    o && r.overCanvas && e.onCreateAt?.(r.type, r.clientX, r.clientY);
+  }, w = (o, r, n, u) => {
+    o.preventDefault(), t?.abort(), i({
+      type: r,
+      label: n,
+      icon: u,
+      pointerId: o.pointerId,
+      startClientX: o.clientX,
+      startClientY: o.clientY,
+      clientX: o.clientX,
+      clientY: o.clientY,
+      moved: !1,
+      overCanvas: !1,
+      stopInteraction: q({
+        kind: "drag",
+        cursor: "grabbing"
+      })
+    });
+    const c = new AbortController();
+    t = c;
+    const k = (v) => {
+      i((m) => {
+        if (!m || m.pointerId !== v.pointerId) return m;
+        const M = v.clientX - m.startClientX, R = v.clientY - m.startClientY, D = m.moved || Math.abs(M) > X || Math.abs(R) > X;
+        return {
+          ...m,
+          clientX: v.clientX,
+          clientY: v.clientY,
+          moved: D,
+          overCanvas: D && j(v.clientX, v.clientY)
+        };
+      });
+    }, $ = (v) => {
+      v.pointerId === o.pointerId && h(!0);
+    }, A = (v) => {
+      v.pointerId === o.pointerId && h(!1);
+    };
+    window.addEventListener("pointermove", k, {
+      signal: c.signal
+    }), window.addEventListener("pointerup", $, {
+      signal: c.signal
+    }), window.addEventListener("pointercancel", A, {
+      signal: c.signal
+    });
+  }, b = () => s()?.type ?? null;
+  return [(() => {
+    var o = N(), r = o.firstChild;
+    return r.nextSibling, o.addEventListener("pointerleave", () => a(null)), r.$$click = () => e.onShowAll(), r.addEventListener("pointerleave", () => a((n) => n === 0 ? null : n)), r.addEventListener("pointerenter", () => a(0)), g(r, d(C.span, {
+      class: "workbench-dock__tile",
+      get animate() {
+        return {
+          scale: l() === 0 ? 1.26 : 1,
+          y: l() === 0 ? -6 : 0,
+          x: l() === 1 ? -5 : 0
+        };
+      },
+      get transition() {
+        return {
+          duration: L.fast,
+          easing: y.easeOut
+        };
+      },
+      get children() {
+        return d(B, {
+          class: "workbench-dock__icon"
+        });
+      }
+    }), null), g(r, d(C.span, {
+      class: "workbench-dock__tooltip",
+      get animate() {
+        return {
+          opacity: l() === 0 ? 1 : 0,
+          y: l() === 0 ? -6 : 0
+        };
+      },
+      get transition() {
+        return {
+          duration: L.fast,
+          easing: y.easeOut
+        };
+      },
+      children: "Show all widgets"
+    }), null), g(o, d(P, {
+      each: x,
+      children: (n, u) => {
+        const c = () => u() + 1;
+        return d(J, {
+          get type() {
+            return n.type;
+          },
+          get label() {
+            return n.label;
+          },
+          get icon() {
+            return n.icon;
+          },
+          get active() {
+            return e.filters[n.type];
+          },
+          get hoverOffset() {
+            return _(c());
+          },
+          get isDragging() {
+            return b() === n.type;
+          },
+          onEnter: () => a(c()),
+          onLeave: () => a((k) => k === c() ? null : k),
+          onSolo: () => e.onSoloFilter(n.type),
+          onDragBegin: w
+        });
+      }
+    }), null), I((n) => {
+      var u = !!f(), c = l() === 0, k = f();
+      return u !== n.e && r.classList.toggle("is-active", n.e = u), c !== n.t && r.classList.toggle("is-hovered", n.t = c), k !== n.a && S(r, "aria-pressed", n.a = k), n;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), o;
+  })(), d(Y, {
+    get when() {
+      return s()?.moved ?? !1;
+    },
+    get children() {
+      return d(K, {
+        state: s
+      });
+    }
+  })];
+}
+function K(e) {
+  const l = () => {
+    const t = e.state();
+    return t ? `translate3d(${t.clientX + 14}px, ${t.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
+  }, a = () => e.state()?.overCanvas ?? !1, s = () => e.state()?.label ?? "", i = () => e.state()?.icon;
+  return d(F, {
+    get children() {
+      var t = U(), f = t.firstChild, _ = f.nextSibling, h = _.firstChild, w = h.nextSibling, b = w.firstChild, o = b.nextSibling, r = o.firstChild;
+      return g(h, d(Y, {
+        get when() {
+          return i();
+        },
+        children: (n) => {
+          const u = n();
+          return d(u, {
+            class: "w-4 h-4"
+          });
+        }
+      })), g(b, s), g(o, d(W, {
+        class: "w-3 h-3"
+      }), r), g(r, () => a() ? "Drop to create" : "Drag onto canvas"), I((n) => {
+        var u = !!a(), c = l();
+        return u !== n.e && t.classList.toggle("is-over-canvas", n.e = u), c !== n.t && H(t, "transform", n.t = c), n;
+      }, {
+        e: void 0,
+        t: void 0
+      }), t;
+    }
+  });
+}
+T(["pointerdown", "click"]);
+export {
+  ie as WorkbenchFilterBar
+};

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

@@ -0,0 +1,6 @@
+export interface WorkbenchHudProps {
+    scaleLabel: string;
+    onZoomOut: () => void;
+    onZoomIn: () => void;
+}
+export declare function WorkbenchHud(props: WorkbenchHudProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchHud.js

@@ -0,0 +1,17 @@
+import { insert as n, createComponent as c, template as i, delegateEvents as r } from "solid-js/web";
+import { Minus as u, Plus as s } from "../icons/index.js";
+var b = /* @__PURE__ */ i('<div class=workbench-hud data-floe-canvas-interactive=true><button type=button class=workbench-hud__button aria-label="Zoom out"></button><div class=workbench-hud__scale></div><button type=button class=workbench-hud__button aria-label="Zoom in">');
+function m(t) {
+  return (() => {
+    var o = b(), e = o.firstChild, l = e.nextSibling, a = l.nextSibling;
+    return e.$$click = () => t.onZoomOut(), n(e, c(u, {
+      class: "w-3.5 h-3.5"
+    })), n(l, () => t.scaleLabel), a.$$click = () => t.onZoomIn(), n(a, c(s, {
+      class: "w-3.5 h-3.5"
+    })), o;
+  })();
+}
+r(["click"]);
+export {
+  m as WorkbenchHud
+};

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

@@ -0,0 +1,6 @@
+export interface WorkbenchLockButtonProps {
+    locked: boolean;
+    onToggle: () => void;
+    shortcutLabel?: string;
+}
+export declare function WorkbenchLockButton(props: WorkbenchLockButtonProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchLockButton.js

@@ -0,0 +1,49 @@
+import { insert as n, createComponent as c, memo as s, effect as d, setAttribute as u, template as k, delegateEvents as v } from "solid-js/web";
+import { Motion as m } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
+import { easing as h, duration as f } from "../../utils/animations.js";
+import { Lock as g, Unlock as _ } from "../icons/index.js";
+var L = /* @__PURE__ */ k("<button type=button class=workbench-lock-button data-floe-canvas-interactive=true><span class=workbench-lock-button__icon>"), w = /* @__PURE__ */ k("<span class=workbench-lock-button__kbd>");
+function y(t) {
+  const l = () => t.locked ? "Unlock canvas" : "Lock canvas";
+  return (() => {
+    var a = L(), b = a.firstChild;
+    return a.$$click = () => t.onToggle(), n(b, c(m.span, {
+      class: "workbench-lock-button__icon-swap",
+      get animate() {
+        return {
+          rotate: t.locked ? 0 : -14
+        };
+      },
+      get transition() {
+        return {
+          duration: f.fast,
+          easing: h.easeOut
+        };
+      },
+      get children() {
+        return s(() => !!t.locked)() ? c(g, {
+          class: "w-4 h-4"
+        }) : c(_, {
+          class: "w-4 h-4"
+        });
+      }
+    })), n(a, (() => {
+      var e = s(() => !!t.shortcutLabel);
+      return () => e() ? (() => {
+        var o = w();
+        return n(o, () => t.shortcutLabel), o;
+      })() : null;
+    })(), null), d((e) => {
+      var o = !!t.locked, r = t.shortcutLabel ? `${l()} (${t.shortcutLabel})` : l(), i = t.locked;
+      return o !== e.e && a.classList.toggle("is-locked", e.e = o), r !== e.t && u(a, "aria-label", e.t = r), i !== e.a && u(a, "aria-pressed", e.a = i), e;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), a;
+  })();
+}
+v(["click"]);
+export {
+  y as WorkbenchLockButton
+};

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

@@ -0,0 +1,18 @@
+import type { WorkbenchState } from './types';
+export interface WorkbenchOverlayProps {
+    open: boolean;
+    onClose: () => void;
+    state: () => WorkbenchState;
+    setState: (updater: (prev: WorkbenchState) => WorkbenchState) => void;
+    /**
+     * Keyboard shortcut key for toggling lock mode.
+     * Matches `KeyboardEvent.key`. Defaults to "F1".
+     */
+    lockShortcut?: string;
+}
+/**
+ * Modal-mode wrapper around WorkbenchSurface. Use this for transient pop-in
+ * usage (a workbench launched as a tool overlay). For permanent display-mode
+ * usage, mount WorkbenchSurface directly inside your layout.
+ */
+export declare function WorkbenchOverlay(props: WorkbenchOverlayProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchOverlay.js

@@ -0,0 +1,107 @@
+import { createComponent as t, insert as l, template as u, delegateEvents as h } from "solid-js/web";
+import { Show as f } from "solid-js";
+import { Motion as c } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
+import { easing as y, duration as i } from "../../utils/animations.js";
+import { useOverlayMask as b } from "../../hooks/useOverlayMask.js";
+import { X as v } from "../icons/index.js";
+import { WorkbenchSurface as k } from "./WorkbenchSurface.js";
+var m = /* @__PURE__ */ u('<header class=workbench-overlay__header data-floe-canvas-interactive=true><div class=workbench-overlay__header-brand><div class=workbench-overlay__header-title>Workbench</div></div><div class=workbench-overlay__header-actions><button type=button class=workbench-overlay__close aria-label="Close workbench overlay"data-floe-overlay-close=true>'), _ = /* @__PURE__ */ u("<div class=workbench-overlay__body>");
+const s = '[data-floe-workbench-boundary="true"]';
+function w(e) {
+  return typeof Element < "u" && e instanceof Element ? !!e.closest(s) : typeof Node < "u" && e instanceof Node ? !!e.parentElement?.closest(s) : !1;
+}
+function O(e) {
+  let a;
+  return b({
+    open: () => e.open,
+    root: () => a,
+    onClose: () => e.onClose(),
+    containsTarget: w,
+    lockBodyScroll: !0,
+    trapFocus: !0,
+    closeOnEscape: !0,
+    blockHotkeys: !0,
+    blockWheel: "outside",
+    blockTouchMove: "outside",
+    autoFocus: {
+      selector: '[data-floe-overlay-close="true"]'
+    },
+    restoreFocus: !0
+  }), t(f, {
+    get when() {
+      return e.open;
+    },
+    get children() {
+      return t(c.section, {
+        ref(o) {
+          var r = a;
+          typeof r == "function" ? r(o) : a = o;
+        },
+        class: "workbench-overlay",
+        role: "dialog",
+        "aria-modal": !0,
+        "aria-label": "Workbench overlay",
+        tabIndex: -1,
+        initial: {
+          opacity: 0
+        },
+        animate: {
+          opacity: 1
+        },
+        get transition() {
+          return {
+            duration: i.fast
+          };
+        },
+        get children() {
+          return t(c.div, {
+            class: "workbench-overlay__frame",
+            "data-floe-workbench-boundary": "true",
+            initial: {
+              opacity: 0,
+              y: 18,
+              scale: 0.986
+            },
+            animate: {
+              opacity: 1,
+              y: 0,
+              scale: 1
+            },
+            get transition() {
+              return {
+                duration: i.normal,
+                easing: y.easeOut
+              };
+            },
+            get children() {
+              return [(() => {
+                var o = m(), r = o.firstChild, d = r.nextSibling, n = d.firstChild;
+                return n.$$click = () => e.onClose(), l(n, t(v, {
+                  class: "w-4 h-4"
+                })), o;
+              })(), (() => {
+                var o = _();
+                return l(o, t(k, {
+                  class: "workbench-surface--in-overlay",
+                  get state() {
+                    return e.state;
+                  },
+                  get setState() {
+                    return e.setState;
+                  },
+                  get lockShortcut() {
+                    return e.lockShortcut;
+                  }
+                })), o;
+              })()];
+            }
+          });
+        }
+      });
+    }
+  });
+}
+h(["click"]);
+export {
+  O as WorkbenchOverlay
+};

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

@@ -0,0 +1,21 @@
+import type { WorkbenchState } from './types';
+export interface WorkbenchSurfaceProps {
+    state: () => WorkbenchState;
+    setState: (updater: (prev: WorkbenchState) => WorkbenchState) => void;
+    /**
+     * Keyboard shortcut key for toggling lock mode. Matches `KeyboardEvent.key`.
+     * Defaults to "F1". Pass `null` to disable the shortcut entirely.
+     */
+    lockShortcut?: string | null;
+    /**
+     * If true, owns global keyboard handlers (arrows, lock, delete). Set to
+     * false when the surface is embedded in a parent that drives those keys
+     * itself. Defaults to true.
+     */
+    enableKeyboard?: boolean;
+    /**
+     * Optional class added to the surface root for layout integration.
+     */
+    class?: string;
+}
+export declare function WorkbenchSurface(props: WorkbenchSurfaceProps): import("solid-js").JSX.Element;