@floegence/floe-webapp-core 0.35.37 → 0.35.39

package/dist/components/ui/InfiniteCanvas.js

@@ -0,0 +1,153 @@
+import { insert as q, effect as G, className as I, setAttribute as J, setStyleProperty as K, template as Q, use as ee, delegateEvents as te } from "solid-js/web";
+import { createSignal as T, untrack as D, createEffect as L, onCleanup as y } from "solid-js";
+import { cn as Y } from "../../utils/cn.js";
+import { isTypingElement as _ } from "../../utils/dom.js";
+import { startHotInteraction as b } from "../../utils/hotInteraction.js";
+var ne = /* @__PURE__ */ Q('<div><div style="transform-origin:0 0">');
+const re = 1, ie = 0.45, oe = 2.2, ae = 14e-4, ce = '[data-floe-canvas-pan-surface="true"]', A = 3;
+function le(n, a, d) {
+  return Math.max(a, Math.min(d, n));
+}
+function M(n) {
+  return {
+    x: Number.isFinite(n.x) ? n.x : 0,
+    y: Number.isFinite(n.y) ? n.y : 0,
+    scale: Number.isFinite(n.scale) && n.scale > 0 ? n.scale : re
+  };
+}
+function se(n, a) {
+  return n.deltaMode === 1 ? n.deltaY * 16 : n.deltaMode === 2 ? n.deltaY * (a?.clientHeight ?? window.innerHeight) : n.deltaY;
+}
+function we(n) {
+  const [a, d] = T(D(() => M(n.viewport))), [p, S] = T(null);
+  let o, f, m = !1, l;
+  const X = () => n.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', F = () => n.panSurfaceSelector ?? ce, $ = () => n.minScale ?? ie, k = () => n.maxScale ?? oe, V = () => n.wheelZoomSpeed ?? ae, R = () => {
+    const e = p();
+    return e ? e.startedFromPanSurface ? e.moved : !0 : !1;
+  }, C = () => {
+    f !== void 0 && (window.clearTimeout(f), f = void 0);
+  }, v = () => {
+    m = !1, l !== void 0 && (window.clearTimeout(l), l = void 0);
+  }, N = () => {
+    if (typeof window > "u") {
+      m = !1;
+      return;
+    }
+    l !== void 0 && window.clearTimeout(l), l = window.setTimeout(() => {
+      l = void 0, m = !1;
+    }, 0);
+  }, h = (e) => {
+    D(() => n.onViewportChange?.(e));
+  }, U = (e) => {
+    if (typeof window > "u") {
+      h(e);
+      return;
+    }
+    C(), f = window.setTimeout(() => {
+      f = void 0, h(e);
+    }, 90);
+  }, E = (e) => e instanceof Element ? e.closest(X()) ? !0 : _(e) : !1, x = (e) => e instanceof Element ? e.closest(F()) !== null : !1, g = (e) => {
+    const t = p();
+    if (!t || e !== void 0 && t.pointerId !== e) return;
+    t.stopInteraction?.();
+    const r = a();
+    S(null), o && o.hasPointerCapture(t.pointerId) && o.releasePointerCapture(t.pointerId), t.startedFromPanSurface && t.moved && (m = !0, N()), h(r);
+  };
+  L(() => {
+    p() || d(M(n.viewport));
+  }), L(() => {
+    const e = o;
+    if (!e) return;
+    const t = (r) => {
+      !m || !x(r.target) || (v(), r.preventDefault(), r.stopPropagation());
+    };
+    e.addEventListener("click", t, !0), y(() => {
+      e.removeEventListener("click", t, !0);
+    });
+  }), y(() => {
+    C(), g(), v();
+  });
+  const H = (e) => {
+    if (e.button !== 0 || _(e.target)) return;
+    const t = x(e.target);
+    E(e.target) && !t || (C(), v(), t || (e.preventDefault(), o?.setPointerCapture(e.pointerId)), S({
+      pointerId: e.pointerId,
+      startClientX: e.clientX,
+      startClientY: e.clientY,
+      startViewport: a(),
+      moved: !1,
+      startedFromPanSurface: t,
+      stopInteraction: t ? void 0 : b({
+        kind: "drag",
+        cursor: "grabbing"
+      })
+    }));
+  }, O = (e) => {
+    const t = p();
+    if (!t || t.pointerId !== e.pointerId) return;
+    const r = e.clientX - t.startClientX, i = e.clientY - t.startClientY;
+    if (!(t.moved || Math.abs(r) > A || Math.abs(i) > A)) return;
+    t.moved || (e.preventDefault(), o?.hasPointerCapture(e.pointerId) || o?.setPointerCapture(e.pointerId));
+    const u = {
+      ...t.startViewport,
+      x: t.startViewport.x + r,
+      y: t.startViewport.y + i
+    };
+    t.moved || S({
+      ...t,
+      moved: !0,
+      stopInteraction: t.stopInteraction ?? b({
+        kind: "drag",
+        cursor: "grabbing"
+      })
+    }), d(u);
+  }, W = (e) => {
+    g(e.pointerId);
+  }, Z = (e) => {
+    g(e.pointerId);
+  }, B = (e) => {
+    const t = o?.getBoundingClientRect();
+    if (!t) return;
+    e.preventDefault();
+    const r = a(), i = e.clientX - t.left, c = e.clientY - t.top, u = se(e, o), s = le(r.scale * Math.exp(-u * V()), $(), k());
+    if (Math.abs(s - r.scale) < 1e-4) return;
+    const w = (i - r.x) / r.scale, j = (c - r.y) / r.scale, P = {
+      x: i - w * s,
+      y: c - j * s,
+      scale: s
+    };
+    d(P), U(P);
+  }, z = (e) => {
+    if (E(e.target)) return;
+    const t = o?.getBoundingClientRect();
+    if (!t) return;
+    e.preventDefault();
+    const r = e.clientX - t.left, i = e.clientY - t.top, c = a();
+    n.onCanvasContextMenu?.({
+      clientX: e.clientX,
+      clientY: e.clientY,
+      localX: r,
+      localY: i,
+      worldX: (r - c.x) / c.scale,
+      worldY: (i - c.y) / c.scale
+    });
+  };
+  return (() => {
+    var e = ne(), t = e.firstChild;
+    e.$$contextmenu = z, e.addEventListener("wheel", B), e.addEventListener("pointercancel", Z), e.$$pointerup = W, e.$$pointermove = O, e.$$pointerdown = H;
+    var r = o;
+    return typeof r == "function" ? ee(r, e) : o = e, q(t, () => n.children), G((i) => {
+      var c = Y("floe-infinite-canvas", R() && "is-panning", n.class), u = n.ariaLabel ?? "Infinite canvas", s = Y("floe-infinite-canvas__viewport", n.contentClass), w = `translate(${a().x}px, ${a().y}px) scale(${a().scale})`;
+      return c !== i.e && I(e, i.e = c), u !== i.t && J(e, "aria-label", i.t = u), s !== i.a && I(t, i.a = s), w !== i.o && K(t, "transform", i.o = w), i;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), e;
+  })();
+}
+te(["pointerdown", "pointermove", "pointerup", "contextmenu"]);
+export {
+  we as InfiniteCanvas
+};

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

@@ -6,12 +6,13 @@ export { FloatingWindow, type FloatingWindowProps } from './FloatingWindow';
 export { Dropdown, Select, type DropdownProps, type DropdownItem, type SelectProps, } from './Dropdown';
 export { Tooltip, type TooltipProps } from './Tooltip';
 export { CommandPalette } from './CommandPalette';
+export { InfiniteCanvas, type InfiniteCanvasProps, type InfiniteCanvasPoint, type InfiniteCanvasContextMenuEvent, } from './InfiniteCanvas';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Interactive3DCard, AnimatedBorderCard, NeonCard, MorphCard, type CardProps, type CardVariant, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardContentProps, type CardFooterProps, type Interactive3DCardProps, type AnimatedBorderCardProps, type NeonCardProps, type MorphCardProps, } from './Card';
 export { Tabs, TabPanel, type TabsProps, type TabPanelProps, type TabItem, type TabsFeatures, type TabsSlotClassNames, type TabsIndicatorMode, type TabsIndicatorColorToken, } from './Tabs';
 export { DirectoryPicker, type DirectoryPickerProps } from './DirectoryPicker';
 export { DirectoryInput, type DirectoryInputProps, type DirectoryInputSize, } from './DirectoryInput';
 export { FileSavePicker, type FileSavePickerProps } from './FileSavePicker';
-export { type BasePickerProps } from './picker/PickerBase';
+export { type BasePickerProps, type PickerEnsurePath, type PickerEnsurePathOptions, type PickerPathResolveResult, type PickerPathResolveStatus, type PickerPathNavigateReason, } from './picker/PickerBase';
 export { QuoteBlock, type QuoteBlockProps } from './QuoteBlock';
 export { HighlightBlock, InfoBlock, WarningBlock, SuccessBlock, ErrorBlock, NoteBlock, TipBlock, type HighlightBlockProps, type HighlightVariant, } from './HighlightBlock';
 export { ProcessingIndicator, type ProcessingIndicatorProps, type ProcessingIndicatorVariant, type ProcessingIndicatorStatus, } from './ProcessingIndicator';

package/dist/components/ui/picker/PickerBase.d.ts

@@ -33,7 +33,13 @@ export interface BasePickerProps {
      * Use this to dynamically load children for the expanded directory.
      * The path parameter is the internal tree path (not the display path).
      */
-    onExpand?: (path: string) => void;
+    onExpand?: (path: string) => void | Promise<void>;
+    /**
+     * Async resolver used when a navigation target may exist outside the current
+     * in-memory tree snapshot. A ready result guarantees the target path and its
+     * ancestor chain are now represented in `files`.
+     */
+    ensurePath?: PickerEnsurePath;
     /** Filter which directories are selectable (return false to grey-out) */
     filter?: (item: FileItem) => boolean;
     /** Label for the home/root directory (default: 'Root') */
@@ -67,7 +73,9 @@ export interface UsePickerTreeOptions {
      * Callback when user expands a directory.
      * Use this to dynamically load children for the expanded directory.
      */
-    onExpand?: (path: string) => void;
+    onExpand?: (path: string) => void | Promise<void>;
+    /** Async resolver that ensures a target path exists in the current tree snapshot. */
+    ensurePath?: PickerEnsurePath;
     /** Label for the home/root directory in tree and breadcrumb (default: 'Root'). Supports accessor for reactivity. */
     homeLabel?: string | Accessor<string | undefined>;
     /**
@@ -84,6 +92,7 @@ export interface PickerTreeState {
     toggleExpand: (path: string) => void;
     pathInput: Accessor<string>;
     setPathInput: (value: string) => void;
+    pathPending: Accessor<boolean>;
     pathInputError: Accessor<string>;
     setPathInputError: (value: string) => void;
     folderIndex: Accessor<Map<string, FileItem>>;
@@ -95,6 +104,7 @@ export interface PickerTreeState {
     handlePathInputGo: () => void;
     handlePathInputKeyDown: (e: KeyboardEvent) => void;
     expandToPath: (path: string) => void;
+    navigateToPath: (path: string, options: PickerEnsurePathOptions) => Promise<PickerPathResolveResult>;
     breadcrumbSegments: Accessor<{
         name: string;
         path: string;
@@ -104,7 +114,20 @@ export interface PickerTreeState {
     homeLabel: Accessor<string>;
     /** Convert internal tree path to display (real filesystem) path */
     toDisplayPath: (internalPath: string) => string;
+    /** Monotonic counter used to reveal the selected row after async navigation. */
+    revealNonce: Accessor<number>;
+}
+export type PickerPathResolveStatus = 'ready' | 'missing' | 'error';
+export type PickerPathNavigateReason = 'open' | 'path-input' | 'tree-expand' | 'tree-select' | 'breadcrumb';
+export interface PickerEnsurePathOptions {
+    reason: PickerPathNavigateReason;
+}
+export interface PickerPathResolveResult {
+    status: PickerPathResolveStatus;
+    resolvedPath: string;
+    message?: string;
 }
+export type PickerEnsurePath = (path: string, options: PickerEnsurePathOptions) => PickerPathResolveResult | Promise<PickerPathResolveResult>;
 export declare function resolvePickerInitialPath(initialPath: string | undefined, homePath: string | undefined): string;
 export declare function usePickerTree(opts: UsePickerTreeOptions): PickerTreeState;
 export interface NewFolderSectionProps {
@@ -117,6 +140,7 @@ export declare function NewFolderSection(props: NewFolderSectionProps): JSX.Elem
 export interface PathInputBarProps {
     value: Accessor<string>;
     onInput: (value: string) => void;
+    pending?: Accessor<boolean>;
     error: Accessor<string>;
     onGo: () => void;
     onKeyDown: (e: KeyboardEvent) => void;
@@ -135,6 +159,7 @@ export interface PickerFolderTreeProps {
     rootFolders: Accessor<FileItem[]>;
     selectedPath: Accessor<string>;
     expandedPaths: Accessor<Set<string>>;
+    revealNonce?: Accessor<number>;
     onToggle: (path: string) => void;
     onSelect: (item: FileItem) => void;
     onSelectRoot: () => void;
@@ -151,8 +176,10 @@ export interface PickerTreeNodeProps {
     depth: number;
     selectedPath: Accessor<string>;
     expandedPaths: Accessor<Set<string>>;
+    revealNonce?: Accessor<number>;
     onToggle: (path: string) => void;
     onSelect: (item: FileItem) => void;
     isSelectable: (item: FileItem) => boolean;
+    registerRow: (path: string, el: HTMLButtonElement | null) => void;
 }
 export declare function PickerTreeNode(props: PickerTreeNodeProps): JSX.Element;