@floegence/floe-webapp-core 0.36.7 → 0.36.9

package/dist/components/deck/deckGridMetrics.d.ts

@@ -0,0 +1,26 @@
+export declare const DECK_GRID_COLS = 24;
+export declare const DECK_DEFAULT_ROWS = 24;
+export declare const DECK_GAP = 4;
+export declare const DECK_MIN_ROW_HEIGHT = 20;
+export declare const DECK_PADDING = 4;
+export interface DeckGridConfig {
+    cols: number;
+    rowHeight: number;
+    gap: number;
+    defaultRows: number;
+}
+export interface DeckGridMeasurements extends DeckGridConfig {
+    cellWidth: number;
+    cellHeight: number;
+}
+export declare const DECK_GRID_CONFIG: {
+    readonly cols: 24;
+    readonly defaultRows: 24;
+    readonly gap: 4;
+    readonly rowHeight: 20;
+};
+export declare function getGridConfigFromElement(gridEl: HTMLElement): DeckGridConfig;
+export declare function measureDeckGrid(gridEl: HTMLElement, options?: {
+    paddingLeft?: number;
+    paddingRight?: number;
+}): DeckGridMeasurements | null;

package/dist/components/deck/deckGridMetrics.js

@@ -0,0 +1,32 @@
+const c = 24, r = 24, g = 4, C = 20, d = 4, E = {
+  cols: 24,
+  defaultRows: 24,
+  gap: 4,
+  rowHeight: 20
+};
+function D(t) {
+  return {
+    cols: parseInt(t.dataset.gridCols || String(24), 10),
+    rowHeight: parseFloat(t.dataset.rowHeight || String(20)),
+    gap: parseInt(t.dataset.gap || String(4), 10),
+    defaultRows: parseInt(t.dataset.defaultRows || String(24), 10)
+  };
+}
+function G(t, o) {
+  const n = D(t), s = o?.paddingLeft ?? 0, a = o?.paddingRight ?? 0, i = t.clientWidth - s - a, _ = n.gap * (n.cols - 1), e = (i - _) / n.cols;
+  return !Number.isFinite(e) || e <= 0 ? null : {
+    ...n,
+    cellWidth: e,
+    cellHeight: n.rowHeight + n.gap
+  };
+}
+export {
+  r as DECK_DEFAULT_ROWS,
+  g as DECK_GAP,
+  c as DECK_GRID_COLS,
+  E as DECK_GRID_CONFIG,
+  C as DECK_MIN_ROW_HEIGHT,
+  d as DECK_PADDING,
+  D as getGridConfigFromElement,
+  G as measureDeckGrid
+};

package/dist/components/deck/deckPointerSession.d.ts

@@ -0,0 +1,52 @@
+import { type HotInteractionKind } from '../../utils/hotInteraction';
+export interface DeckPointerSessionSnapshot {
+    pointerId: number;
+    kind: HotInteractionKind;
+    widgetId: string;
+    gridEl: HTMLElement;
+    gridRect: DOMRect;
+    gridPaddingLeft: number;
+    gridPaddingRight: number;
+    startClientX: number;
+    startClientY: number;
+    startScrollTop: number;
+    lastClientX: number;
+    lastClientY: number;
+    lastAppliedClientX: number;
+    lastAppliedClientY: number;
+    lastAppliedScrollTop: number;
+    rafId: number | null;
+    stopHotInteraction: (() => void) | null;
+}
+export interface DeckPointerSessionFrame {
+    snapshot: DeckPointerSessionSnapshot;
+    deltaX: number;
+    deltaY: number;
+    cols: number;
+    rowHeight: number;
+    gap: number;
+    cellWidth: number;
+    cellHeight: number;
+}
+export interface StartDeckPointerSessionOptions {
+    kind: HotInteractionKind;
+    widgetId: string;
+    gridEl: HTMLElement;
+    captureEl?: HTMLElement | null;
+    pointerEvent: PointerEvent;
+    cursor: string;
+    onMove: (frame: DeckPointerSessionFrame) => void;
+    onEnd: (options: {
+        commit: boolean;
+        snapshot: DeckPointerSessionSnapshot;
+    }) => void;
+}
+export interface DeckPointerSessionController {
+    snapshot: () => DeckPointerSessionSnapshot;
+    updatePointer: (event: Pick<PointerEvent, 'pointerId' | 'clientX' | 'clientY'>) => void;
+    stop: (options?: {
+        commit?: boolean;
+        event?: Pick<PointerEvent, 'pointerId' | 'clientX' | 'clientY'>;
+    }) => void;
+}
+export declare function startDeckPointerSession(options: StartDeckPointerSessionOptions): DeckPointerSessionController;

package/dist/components/deck/deckPointerSession.js

@@ -0,0 +1,113 @@
+import { startHotInteraction as X } from "../../utils/hotInteraction.js";
+import { measureDeckGrid as h } from "./deckGridMetrics.js";
+function C(e) {
+  const d = e.lastClientY - e.gridRect.top, t = e.gridRect.bottom - e.lastClientY;
+  let n = 0;
+  if (d < 48 ? n = -Math.ceil((48 - d) / 48 * 24) : t < 48 && (n = Math.ceil((48 - t) / 48 * 24)), n === 0) return !1;
+  const a = e.gridEl.scrollTop, o = Math.max(0, Math.min(a + n, e.gridEl.scrollHeight - e.gridEl.clientHeight));
+  return o === a ? !1 : (e.gridEl.scrollTop = o, !0);
+}
+function v(e) {
+  const i = e.gridEl.scrollTop;
+  if (e.lastClientX === e.lastAppliedClientX && e.lastClientY === e.lastAppliedClientY && i === e.lastAppliedScrollTop)
+    return null;
+  e.lastAppliedClientX = e.lastClientX, e.lastAppliedClientY = e.lastClientY, e.lastAppliedScrollTop = i;
+  const l = h(e.gridEl, {
+    paddingLeft: e.gridPaddingLeft,
+    paddingRight: e.gridPaddingRight
+  });
+  return l ? {
+    snapshot: e,
+    deltaX: e.lastClientX - e.startClientX,
+    deltaY: e.lastClientY - e.startClientY + (i - e.startScrollTop),
+    cols: l.cols,
+    rowHeight: l.rowHeight,
+    gap: l.gap,
+    cellWidth: l.cellWidth,
+    cellHeight: l.cellHeight
+  } : null;
+}
+function L(e) {
+  const i = e.gridEl.ownerDocument, l = i.defaultView ?? window, d = l.getComputedStyle(e.gridEl), t = {
+    pointerId: e.pointerEvent.pointerId,
+    kind: e.kind,
+    widgetId: e.widgetId,
+    gridEl: e.gridEl,
+    gridRect: e.gridEl.getBoundingClientRect(),
+    gridPaddingLeft: parseFloat(d.paddingLeft) || 0,
+    gridPaddingRight: parseFloat(d.paddingRight) || 0,
+    startClientX: e.pointerEvent.clientX,
+    startClientY: e.pointerEvent.clientY,
+    startScrollTop: e.gridEl.scrollTop,
+    lastClientX: e.pointerEvent.clientX,
+    lastClientY: e.pointerEvent.clientY,
+    lastAppliedClientX: e.pointerEvent.clientX,
+    lastAppliedClientY: e.pointerEvent.clientY,
+    lastAppliedScrollTop: e.gridEl.scrollTop,
+    rafId: null,
+    stopHotInteraction: X({
+      kind: e.kind,
+      cursor: e.cursor,
+      lockUserSelect: !0
+    })
+  };
+  let n = !0;
+  const a = () => {
+    if (t.rafId = null, !n) return;
+    const r = C(t), c = v(t);
+    c && e.onMove(c), n && r && o();
+  }, o = () => {
+    if (!(!n || t.rafId !== null)) {
+      if (typeof l.requestAnimationFrame != "function") {
+        a();
+        return;
+      }
+      t.rafId = l.requestAnimationFrame(a);
+    }
+  }, I = () => {
+    if (!(!e.captureEl || typeof e.captureEl.releasePointerCapture != "function"))
+      try {
+        e.captureEl.releasePointerCapture(t.pointerId);
+      } catch {
+      }
+  }, Y = () => {
+    i.removeEventListener("pointermove", g, !0), i.removeEventListener("pointerup", p, !0), i.removeEventListener("pointercancel", m, !0), e.captureEl?.removeEventListener("lostpointercapture", s);
+  }, u = (r) => {
+    if (!n) return;
+    const c = r?.event;
+    if (!(c && c.pointerId !== t.pointerId)) {
+      if (c && (t.lastClientX = c.clientX, t.lastClientY = c.clientY), n = !1, t.rafId !== null && typeof l.cancelAnimationFrame == "function" && (l.cancelAnimationFrame(t.rafId), t.rafId = null), r?.commit !== !1) {
+        C(t);
+        const E = v(t);
+        E && e.onMove(E);
+      }
+      Y(), I(), t.stopHotInteraction?.(), t.stopHotInteraction = null, e.onEnd({
+        commit: r?.commit !== !1,
+        snapshot: t
+      });
+    }
+  }, f = (r) => {
+    !n || r.pointerId !== t.pointerId || (t.lastClientX = r.clientX, t.lastClientY = r.clientY, o());
+  }, g = (r) => {
+    f(r);
+  }, p = (r) => {
+    u({ event: r });
+  }, m = (r) => {
+    u({ event: r, commit: !1 });
+  }, s = () => {
+    u();
+  };
+  if (i.addEventListener("pointermove", g, !0), i.addEventListener("pointerup", p, !0), i.addEventListener("pointercancel", m, !0), e.captureEl?.addEventListener("lostpointercapture", s), e.captureEl && typeof e.captureEl.setPointerCapture == "function")
+    try {
+      e.captureEl.setPointerCapture(t.pointerId);
+    } catch {
+    }
+  return {
+    snapshot: () => t,
+    updatePointer: f,
+    stop: u
+  };
+}
+export {
+  L as startDeckPointerSession
+};

package/dist/components/editor/CodeEditor.d.ts

@@ -1,11 +1,13 @@
 import { type JSX } from 'solid-js';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 import 'monaco-editor/min/vs/editor/editor.main.css';
+import { type CodeEditorRuntimeOptions } from './monacoStandaloneRuntime';
 export interface CodeEditorProps {
     path: string;
     language?: string;
     value: string;
     options?: monaco.editor.IStandaloneEditorConstructionOptions;
+    runtimeOptions?: CodeEditorRuntimeOptions;
     class?: string;
     style?: JSX.CSSProperties;
     onReady?: (api: CodeEditorApi) => void;

package/dist/components/editor/CodeEditor.js

@@ -1,11 +1,11 @@
-import { use as L, effect as D, className as F, style as O, template as V } from "solid-js/web";
-import { onMount as b, onCleanup as p, createEffect as g } from "solid-js";
-import { useTheme as q } from "../../context/ThemeContext.js";
-import { useResizeObserver as w } from "../../hooks/useResizeObserver.js";
+import { use as L, effect as O, className as D, style as F, template as V } from "solid-js/web";
+import { onMount as b, onCleanup as q, createEffect as g } from "solid-js";
+import { useTheme as w } from "../../context/ThemeContext.js";
+import { useResizeObserver as A } from "../../hooks/useResizeObserver.js";
 import * as f from "monaco-editor/esm/vs/editor/editor.api.js";
 import "monaco-editor/min/vs/editor/editor.main.css";
-import { resolveCodeEditorLanguageSpec as A } from "./languages.js";
-import { ensureMonacoEnvironment as U } from "./monacoEnvironment.js";
+import { resolveCodeEditorLanguageSpec as U } from "./languages.js";
+import { ensureMonacoEnvironment as p } from "./monacoEnvironment.js";
 import { ensureMonacoStandaloneRuntime as N } from "./monacoStandaloneRuntime.js";
 var _ = /* @__PURE__ */ V("<div>");
 const E = {
@@ -30,11 +30,11 @@ function B(t, c) {
   return !r || r.isEmpty() ? "" : c.getValueInRange(r);
 }
 function X(t) {
-  const c = q();
+  const c = w();
   let r;
   const R = ++$;
-  let n, o, s, S = null, v = 0;
-  const x = w(() => r), y = () => {
+  let n, o, d, S = null, v = 0;
+  const x = A(() => r), y = () => {
     f.editor.setTheme(c.resolvedTheme() === "dark" ? "vs-dark" : "vs");
   }, m = () => !n || !o ? null : {
     editor: n,
@@ -52,7 +52,7 @@ function X(t) {
     e && t.onSelectionChange?.(e.getSelectedText(), e);
   }, I = async () => {
     if (!n) return;
-    const e = ++v, a = A(t.language);
+    const e = ++v, a = U(t.language);
     let i = a.id;
     try {
       await a.load?.();
@@ -61,34 +61,34 @@ function X(t) {
       i = "plaintext";
     }
     if (!n || e !== v) return;
-    const d = k(R, t.path);
-    if (o && o.uri.toString() === d.toString()) {
+    const u = k(R, t.path);
+    if (o && o.uri.toString() === u.toString()) {
       o.getLanguageId() !== i && f.editor.setModelLanguage(o, i), o.getValue() !== t.value && o.setValue(t.value), C(), M();
       return;
     }
-    const l = f.editor.createModel(t.value, i, d);
+    const l = f.editor.createModel(t.value, i, u);
     o?.dispose(), o = l, n.setModel(o), C(), M();
   };
   return b(() => {
     let e = !1, a, i;
     (async () => {
-      if (!r || (U(), await N(), e || !r) || (n = f.editor.create(r, {
+      if (!r || (p(), await N(t.runtimeOptions), e || !r) || (n = f.editor.create(r, {
         model: null,
         ...E,
         ...t.options ?? {}
       }), y(), await I(), e || !n)) return;
       const l = t.onContentChange, T = t.onChange, z = t.onSelectionChange;
-      a = n.onDidChangeModelContent((u) => {
+      a = n.onDidChangeModelContent((s) => {
         const h = m();
-        h && (l?.(u, h), T && T(h.getValue()));
+        h && (l?.(s, h), T && T(h.getValue()));
       }), i = n.onDidChangeCursorSelection(() => {
-        const u = m();
-        u && z?.(u.getSelectedText(), u);
+        const s = m();
+        s && z?.(s.getSelectedText(), s);
       });
     })().catch((l) => {
       console.error("Failed to initialize Monaco editor runtime", l);
-    }), p(() => {
-      e = !0, a?.dispose(), i?.dispose(), s && cancelAnimationFrame(s), n?.dispose(), o?.dispose(), n = void 0, o = void 0;
+    }), q(() => {
+      e = !0, a?.dispose(), i?.dispose(), d && cancelAnimationFrame(d), n?.dispose(), o?.dispose(), n = void 0, o = void 0;
     });
   }), g(() => {
     y();
@@ -101,7 +101,7 @@ function X(t) {
     t.path, t.language, t.value, I();
   }), g(() => {
     const e = x();
-    !e || !n || (s && cancelAnimationFrame(s), s = requestAnimationFrame(() => {
+    !e || !n || (d && cancelAnimationFrame(d), d = requestAnimationFrame(() => {
       n?.layout({
         width: e.width,
         height: e.height
@@ -109,9 +109,9 @@ function X(t) {
     }));
   }), (() => {
     var e = _(), a = r;
-    return typeof a == "function" ? L(a, e) : r = e, D((i) => {
-      var d = t.class, l = t.style;
-      return d !== i.e && F(e, i.e = d), i.t = O(e, l, i.t), i;
+    return typeof a == "function" ? L(a, e) : r = e, O((i) => {
+      var u = t.class, l = t.style;
+      return u !== i.e && D(e, i.e = u), i.t = F(e, l, i.t), i;
     }, {
       e: void 0,
       t: void 0

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

@@ -1,2 +1,3 @@
 export { CodeEditor, type CodeEditorProps, type CodeEditorApi } from './CodeEditor';
 export { resolveCodeEditorLanguageSpec, isCodeEditorLanguageSupported, type CodeEditorLanguageSpec } from './languages';
+export { DEFAULT_MONACO_STANDALONE_FEATURES, normalizeMonacoRuntimeFeatureSet, type CodeEditorRuntimeOptions, type MonacoRuntimeFeatureSet, } from './monacoStandaloneRuntime';

package/dist/components/editor/monacoStandaloneRuntime.d.ts

@@ -1,4 +1,16 @@
-type MonacoStandaloneRuntimeLoader = () => Promise<unknown>;
-export declare function createMonacoStandaloneRuntime(loader: MonacoStandaloneRuntimeLoader): () => Promise<void>;
-export declare const ensureMonacoStandaloneRuntime: () => Promise<void>;
+export interface MonacoRuntimeFeatureSet {
+    suggestMemory: boolean;
+    codeLensCache: boolean;
+    inlayHintsCache: boolean;
+    treeViewsDnd: boolean;
+    actionWidget: boolean;
+}
+export interface CodeEditorRuntimeOptions {
+    standaloneFeatures?: Partial<MonacoRuntimeFeatureSet>;
+}
+export declare const DEFAULT_MONACO_STANDALONE_FEATURES: MonacoRuntimeFeatureSet;
+type MonacoStandaloneRuntimeLoader = (features: MonacoRuntimeFeatureSet) => Promise<unknown>;
+export declare function normalizeMonacoRuntimeFeatureSet(standaloneFeatures?: Partial<MonacoRuntimeFeatureSet>): MonacoRuntimeFeatureSet;
+export declare function createMonacoStandaloneRuntime(loader: MonacoStandaloneRuntimeLoader): (options?: CodeEditorRuntimeOptions) => Promise<void>;
+export declare const ensureMonacoStandaloneRuntime: (options?: CodeEditorRuntimeOptions) => Promise<void>;
 export {};

package/dist/components/editor/monacoStandaloneRuntime.js

@@ -1,21 +1,49 @@
-function e(t) {
-  let n = null;
-  return () => n || (n = t().then(() => {
-  }).catch((o) => {
-    throw n = null, o;
-  }), n);
+const s = {
+  suggestMemory: !0,
+  codeLensCache: !0,
+  inlayHintsCache: !0,
+  treeViewsDnd: !0,
+  actionWidget: !0
+};
+function u(e) {
+  return {
+    ...s,
+    ...e ?? {}
+  };
+}
+function d(e) {
+  return [
+    `suggestMemory:${e.suggestMemory ? "1" : "0"}`,
+    `codeLensCache:${e.codeLensCache ? "1" : "0"}`,
+    `inlayHintsCache:${e.inlayHintsCache ? "1" : "0"}`,
+    `treeViewsDnd:${e.treeViewsDnd ? "1" : "0"}`,
+    `actionWidget:${e.actionWidget ? "1" : "0"}`
+  ].join("|");
+}
+function m(e) {
+  const n = /* @__PURE__ */ new Map();
+  return (r) => {
+    const o = u(r?.standaloneFeatures), t = d(o), i = n.get(t);
+    if (i) return i;
+    const c = e(o).then(() => {
+    }).catch((a) => {
+      throw n.delete(t), a;
+    });
+    return n.set(t, c), c;
+  };
 }
-function r() {
-  return Promise.all([
-    import("monaco-editor/esm/vs/editor/edcore.main.js"),
-    import("monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestMemory.js"),
-    import("monaco-editor/esm/vs/editor/contrib/codelens/browser/codeLensCache.js"),
-    import("monaco-editor/esm/vs/editor/common/services/treeViewsDndService.js"),
-    import("monaco-editor/esm/vs/platform/actionWidget/browser/actionWidget.js")
-  ]);
+function h(e) {
+  const n = [
+    import("monaco-editor/esm/vs/editor/edcore.main.js")
+  ];
+  return e.suggestMemory && n.push(import("monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestMemory.js")), e.codeLensCache && n.push(import("monaco-editor/esm/vs/editor/contrib/codelens/browser/codeLensCache.js")), e.inlayHintsCache && n.push(import("monaco-editor/esm/vs/editor/contrib/inlayHints/browser/inlayHintsContribution.js")), e.treeViewsDnd && n.push(import("monaco-editor/esm/vs/editor/common/services/treeViewsDndService.js")), e.actionWidget && n.push(import("monaco-editor/esm/vs/platform/actionWidget/browser/actionWidget.js")), Promise.all(n);
 }
-const i = e(r);
+const g = m(
+  h
+);
 export {
-  e as createMonacoStandaloneRuntime,
-  i as ensureMonacoStandaloneRuntime
+  s as DEFAULT_MONACO_STANDALONE_FEATURES,
+  m as createMonacoStandaloneRuntime,
+  g as ensureMonacoStandaloneRuntime,
+  u as normalizeMonacoRuntimeFeatureSet
 };

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

@@ -14,6 +14,7 @@ export interface InfiniteCanvasContextMenuEvent {
 }
 export interface InfiniteCanvasProps {
     children: JSX.Element;
+    overlay?: (viewport: InfiniteCanvasPoint) => JSX.Element;
     viewport: InfiniteCanvasPoint;
     onViewportChange?: (viewport: InfiniteCanvasPoint) => void;
     onCanvasContextMenu?: (event: InfiniteCanvasContextMenuEvent) => void;
@@ -22,6 +23,7 @@ export interface InfiniteCanvasProps {
     contentClass?: string;
     interactiveSelector?: string;
     panSurfaceSelector?: string;
+    wheelInteractiveSelector?: string;
     minScale?: number;
     maxScale?: number;
     wheelZoomSpeed?: number;