@lapismd/design-core 0.1.2 → 0.3.0

package/dist/shared/workspace/drag/workspace-drag.svelte.js

@@ -0,0 +1,271 @@
+import { shouldUseWorkspacePointerDrag, } from "./workspace-pointer-drag-policy.js";
+export class WorkspaceDragState {
+    active = $state(null);
+    target = $state(null);
+    dragging = $state(false);
+    dndStrategy = $state("auto");
+    tabMoveIndicator = $state({
+        active: false,
+        scope: null,
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    #controller;
+    #pointerCleanup = null;
+    #pointerTargets = new Map();
+    #activePointerTarget = null;
+    constructor(controller) {
+        this.#controller = controller;
+    }
+    startPointer(event, tabId) {
+        if (event.button !== 0 || this.active)
+            return;
+        const source = event.currentTarget;
+        const ownerWindow = source.ownerDocument.defaultView ?? window;
+        if (!shouldUseWorkspacePointerDrag(this.dndStrategy, event.pointerType, Boolean(ownerWindow.matchMedia?.("(pointer: coarse)")?.matches))) {
+            return;
+        }
+        // Keep pointerdown's default behavior so an unactivated gesture remains an
+        // ordinary tab or close click. Fine-pointer mouse input stays on Lapis's
+        // native HTML5 path and therefore never reaches pointer capture here.
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const pointerId = event.pointerId;
+        let activated = false;
+        source.setPointerCapture?.(pointerId);
+        const move = (moveEvent) => {
+            if (!activated) {
+                const distance = Math.hypot(moveEvent.clientX - startX, moveEvent.clientY - startY);
+                if (distance < 5)
+                    return;
+                activated = true;
+                this.active = { tabId, source: "pointer" };
+                this.dragging = true;
+                this.#controller.beginDrag(tabId, "pointer");
+            }
+            moveEvent.preventDefault();
+            this.#movePointerTarget(moveEvent.clientX, moveEvent.clientY, source.ownerDocument);
+        };
+        const finish = (finishEvent) => {
+            cleanup();
+            source.releasePointerCapture?.(pointerId);
+            if (!activated)
+                return;
+            const pointerTarget = this.#activePointerTarget;
+            if (pointerTarget) {
+                pointerTarget.onDrop();
+            }
+            else if (this.target) {
+                this.commitCurrentDrop("pointer");
+            }
+            else {
+                this.#controller.floatTab(tabId, {
+                    x: Math.max(0, finishEvent.clientX - 180),
+                    y: Math.max(0, finishEvent.clientY - 24),
+                });
+            }
+            if (this.active) {
+                this.#controller.endDrag(tabId, "pointer");
+                this.clear();
+            }
+        };
+        const cleanup = () => {
+            ownerWindow.removeEventListener("pointermove", move);
+            ownerWindow.removeEventListener("pointerup", finish);
+            ownerWindow.removeEventListener("pointercancel", finish);
+            this.#pointerCleanup = null;
+        };
+        this.#pointerCleanup = cleanup;
+        ownerWindow.addEventListener("pointermove", move, { passive: false });
+        ownerWindow.addEventListener("pointerup", finish);
+        ownerWindow.addEventListener("pointercancel", finish);
+    }
+    startHtml5(event, tabId) {
+        if (!event.dataTransfer)
+            return;
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/workspace-shell-tab", tabId);
+        this.active = { tabId, source: "html5" };
+        this.dragging = true;
+        this.#controller.beginDrag(tabId, "html5");
+    }
+    moveHtml5(event) {
+        if (!this.active || this.active.source !== "html5")
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = "move";
+        this.updateTargetFromPoint(event.clientX, event.clientY, event.currentTarget.ownerDocument, "html5");
+    }
+    dropHtml5(event) {
+        if (!this.active || this.active.source !== "html5")
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.target)
+            this.commitCurrentDrop("html5");
+    }
+    endHtml5(event) {
+        if (!this.active || this.active.source !== "html5")
+            return;
+        const { tabId } = this.active;
+        if (!this.target && event.dataTransfer?.dropEffect === "none") {
+            this.#controller.floatTab(tabId, {
+                x: Math.max(0, event.clientX - 180),
+                y: Math.max(0, event.clientY - 24),
+            });
+        }
+        this.#controller.endDrag(tabId, "html5");
+        this.clear();
+    }
+    setInsertionTarget(paneId, insertionIndex, source) {
+        if (!this.active)
+            return false;
+        const event = this.#controller.willShowDropOverlay({
+            tabId: this.active.tabId,
+            targetPaneId: paneId,
+            position: "center",
+            source,
+            operation: "tab-drop",
+        });
+        this.target = event.defaultPrevented
+            ? null
+            : { paneId, position: "center", insertionIndex };
+        return !event.defaultPrevented;
+    }
+    setTabMoveIndicator(scope, geometry) {
+        this.tabMoveIndicator = { active: true, scope, ...geometry };
+    }
+    clearTabMoveIndicator(scope) {
+        if (scope && this.tabMoveIndicator.scope !== scope)
+            return;
+        this.tabMoveIndicator = {
+            active: false,
+            scope: null,
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+        };
+    }
+    setBodyTarget(paneId, position) {
+        if (!this.active)
+            return;
+        this.target = { paneId, position };
+    }
+    setSidebarGroupTarget(paneId, sidebarGroupId, insertionIndex, position, source) {
+        if (!this.active)
+            return false;
+        const event = this.#controller.willShowDropOverlay({
+            tabId: this.active.tabId,
+            targetPaneId: paneId,
+            position,
+            source,
+            operation: "tab-drop",
+        });
+        this.target = event.defaultPrevented
+            ? null
+            : { paneId, position, insertionIndex, sidebarGroupId };
+        return !event.defaultPrevented;
+    }
+    registerPointerDropTarget(node, target) {
+        this.#pointerTargets.set(node, target);
+        return () => {
+            this.#pointerTargets.delete(node);
+            if (this.#activePointerTarget === target) {
+                target.onLeave();
+                this.#activePointerTarget = null;
+            }
+        };
+    }
+    commitCurrentDrop(source) {
+        const active = this.active;
+        const target = this.target;
+        if (!active || !target)
+            return false;
+        this.active = null;
+        this.target = null;
+        this.#activePointerTarget = null;
+        this.clearTabMoveIndicator();
+        const committed = target.sidebarGroupId
+            ? this.#controller.dropTabIntoSidebarGroup(active.tabId, target.sidebarGroupId, target.insertionIndex ?? 0, target.position === "left" ||
+                target.position === "right" ||
+                target.position === "bottom"
+                ? target.position
+                : "top", source)
+            : this.#controller.dropTab(active.tabId, target.paneId, target.position, source, target.insertionIndex);
+        this.#controller.endDrag(active.tabId, active.source);
+        this.dragging = false;
+        return committed;
+    }
+    updateTargetFromPoint(clientX, clientY, ownerDocument, source) {
+        if (!this.active)
+            return;
+        const element = ownerDocument
+            .elementsFromPoint(clientX, clientY)
+            .map((candidate) => candidate.closest("[data-workspace-pane-id]"))
+            .find((candidate) => Boolean(candidate));
+        const paneId = element?.dataset.workspacePaneId;
+        if (!element || !paneId) {
+            this.target = null;
+            return;
+        }
+        const rect = element.getBoundingClientRect();
+        const horizontal = (clientX - rect.left) / rect.width;
+        const vertical = (clientY - rect.top) / rect.height;
+        const candidates = [
+            { position: "left", distance: horizontal },
+            { position: "right", distance: 1 - horizontal },
+            { position: "top", distance: vertical },
+            { position: "bottom", distance: 1 - vertical },
+        ].sort((a, b) => a.distance - b.distance);
+        const position = candidates[0].distance < 0.25 ? candidates[0].position : "center";
+        const event = this.#controller.willShowDropOverlay({
+            tabId: this.active.tabId,
+            targetPaneId: paneId,
+            position,
+            source,
+            operation: position === "center" ? "tab-drop" : "split-drop",
+        });
+        this.target = event.defaultPrevented ? null : { paneId, position };
+    }
+    clearTarget(paneId) {
+        if (!paneId || this.target?.paneId === paneId)
+            this.target = null;
+    }
+    clear() {
+        this.#pointerCleanup?.();
+        this.#activePointerTarget?.onLeave();
+        this.#activePointerTarget = null;
+        this.active = null;
+        this.target = null;
+        this.dragging = false;
+        this.clearTabMoveIndicator();
+    }
+    #movePointerTarget(clientX, clientY, ownerDocument) {
+        const candidates = ownerDocument.elementsFromPoint(clientX, clientY);
+        let next = null;
+        for (const element of candidates) {
+            for (const [node, target] of this.#pointerTargets) {
+                if (element === node || node.contains(element)) {
+                    next = target;
+                    break;
+                }
+            }
+            if (next)
+                break;
+        }
+        if (next !== this.#activePointerTarget) {
+            this.#activePointerTarget?.onLeave();
+            this.#activePointerTarget = next;
+        }
+        if (next) {
+            next.onMove({ clientX, clientY });
+        }
+        else {
+            this.target = null;
+        }
+    }
+}

package/dist/shared/workspace/drag/workspace-pointer-drag-policy.d.ts

@@ -0,0 +1,2 @@
+export type WorkspaceDndStrategy = "auto" | "html5" | "pointer";
+export declare function shouldUseWorkspacePointerDrag(strategy: WorkspaceDndStrategy, pointerType: string, coarsePointer: boolean): boolean;

package/dist/shared/workspace/drag/workspace-pointer-drag-policy.js

@@ -0,0 +1,12 @@
+export function shouldUseWorkspacePointerDrag(strategy, pointerType, coarsePointer) {
+    if (strategy === "html5") {
+        return false;
+    }
+    if (strategy === "pointer") {
+        return true;
+    }
+    if (pointerType === "touch" || pointerType === "pen") {
+        return true;
+    }
+    return pointerType === "mouse" && coarsePointer;
+}

package/dist/shared/workspace/drop-overlay/WorkspaceDropOverlay.css

@@ -0,0 +1,24 @@
+.ui-workspace-drop-preview,
+.ui-workspace-tabs-drop {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--ui-workspace-background);
+}
+
+.ui-workspace-drop-preview {
+  max-width: 100%;
+  border: 1px solid var(--ui-workspace-border);
+}
+
+.workspace-drop-overlay {
+  position: absolute;
+  z-index: var(--ui-workspace-overlay-z-index);
+  border-radius: var(--ui-workspace-radius-medium);
+  background-color: var(--ui-workspace-accent);
+  opacity: 0.5;
+  pointer-events: none;
+  transition: all 100ms ease-in-out;
+  will-change: transform, width, height;
+}

package/dist/shared/workspace/drop-overlay/WorkspaceDropOverlay.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { WorkspaceDropPosition } from "../core/types.js";
+  import { resolveWorkspaceDropOverlay } from "./workspace-tabs-drop.js";
+  import "./WorkspaceDropOverlay.css";
+
+  let {
+    position = "center",
+    width = 640,
+    height = 360,
+  }: {
+    position?: WorkspaceDropPosition;
+    width?: number;
+    height?: number;
+  } = $props();
+
+  let point = $derived(
+    position === "left"
+      ? { x: 1, y: height / 2 }
+      : position === "right"
+        ? { x: width - 1, y: height / 2 }
+        : position === "top"
+          ? { x: width / 2, y: 1 }
+          : position === "bottom"
+            ? { x: width / 2, y: height - 1 }
+            : { x: width / 2, y: height / 2 },
+  );
+  let geometry = $derived(
+    resolveWorkspaceDropOverlay(point.x, point.y, {
+      x: 0,
+      y: 0,
+      width,
+      height,
+    }),
+  );
+</script>
+
+<div
+  class="ui-workspace-drop-preview"
+  data-ui-component="workspace-drop-overlay"
+  data-drop-position={geometry.position}
+  style={`width: ${width}px; height: ${height}px;`}
+>
+  <div
+    class="workspace-drop-overlay ui-workspace-drop-overlay"
+    data-ui-part="overlay"
+    style={geometry.style}
+  ></div>
+</div>

package/dist/shared/workspace/drop-overlay/WorkspaceDropOverlay.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { WorkspaceDropPosition } from "../core/types.js";
+import "./WorkspaceDropOverlay.css";
+type $$ComponentProps = {
+    position?: WorkspaceDropPosition;
+    width?: number;
+    height?: number;
+};
+declare const WorkspaceDropOverlay: import("svelte").Component<$$ComponentProps, {}, "">;
+type WorkspaceDropOverlay = ReturnType<typeof WorkspaceDropOverlay>;
+export default WorkspaceDropOverlay;

package/dist/shared/workspace/drop-overlay/WorkspaceTabsDrop.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type {
+    WorkspaceLayoutDropEvent,
+    WorkspaceTabsNode,
+  } from "../core/types.js";
+  import type { WorkspaceShellController } from "../core/workspace-controller.svelte.js";
+  import type { WorkspaceDragState } from "../drag/workspace-drag.svelte.js";
+  import {
+    resolveWorkspaceDropOverlay,
+    type WorkspaceDropZone,
+  } from "./workspace-tabs-drop.js";
+  import "./WorkspaceDropOverlay.css";
+
+  let {
+    class: className,
+    controller,
+    drag,
+    parent,
+    children,
+    dropZones = ["left", "right", "top", "bottom"],
+  }: {
+    class?: string;
+    controller: WorkspaceShellController;
+    drag: WorkspaceDragState;
+    parent: WorkspaceTabsNode;
+    children?: Snippet;
+    dropZones?: WorkspaceDropZone[];
+  } = $props();
+
+  let container = $state<HTMLElement>();
+  let position = $state({ style: "", active: false });
+
+  function containsOnlyDraggedTab(): boolean {
+    if (!drag.active || parent.items.length !== 1) return false;
+    const only = parent.items[0];
+    if (!only) return false;
+    if (only.kind === "tab") return only.id === drag.active.tabId;
+    return only.tabs.length === 1 && only.tabs[0]?.id === drag.active.tabId;
+  }
+
+  function clearDropOverlay() {
+    if (drag.target?.paneId === parent.id) drag.clearTarget(parent.id);
+    position.active = false;
+  }
+
+  function updateDropOverlay(
+    clientX: number,
+    clientY: number,
+    source: WorkspaceLayoutDropEvent["source"],
+  ) {
+    if (!drag.active || !container || containsOnlyDraggedTab()) {
+      clearDropOverlay();
+      return;
+    }
+
+    const next = resolveWorkspaceDropOverlay(
+      clientX,
+      clientY,
+      container.getBoundingClientRect(),
+      dropZones,
+    );
+    const overlayEvent = controller.willShowDropOverlay({
+      tabId: drag.active.tabId,
+      targetPaneId: parent.id,
+      position: next.position,
+      source,
+      operation: next.position === "center" ? "tab-drop" : "split-drop",
+    });
+    if (overlayEvent.defaultPrevented) {
+      clearDropOverlay();
+      return;
+    }
+
+    position = { style: next.style, active: true };
+    drag.setBodyTarget(parent.id, next.position);
+  }
+
+  function registerDropTarget(node: HTMLElement) {
+    return {
+      destroy: drag.registerPointerDropTarget(node, {
+        onMove: (event) =>
+          updateDropOverlay(event.clientX, event.clientY, "pointer"),
+        onDrop: () => performDrop("pointer"),
+        onLeave: clearDropOverlay,
+      }),
+    };
+  }
+
+  function handleDragOver(event: DragEvent) {
+    event.preventDefault();
+    if (!event.dataTransfer || !drag.active) return;
+    event.dataTransfer.dropEffect = "move";
+    updateDropOverlay(event.clientX, event.clientY, "html5");
+  }
+
+  function handleDragEnter(event: DragEvent) {
+    event.preventDefault();
+  }
+
+  function handleDragLeave(event: DragEvent) {
+    if (
+      container &&
+      event.relatedTarget instanceof Node &&
+      container.contains(event.relatedTarget)
+    ) {
+      return;
+    }
+    clearDropOverlay();
+  }
+
+  function performDrop(source: "html5" | "pointer") {
+    position.active = false;
+    drag.commitCurrentDrop(source);
+  }
+
+  function handleDrop(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    performDrop("html5");
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  bind:this={container}
+  class={["ui-workspace-tabs-drop", className].filter(Boolean).join(" ")}
+  data-ui-component="workspace-tabs-drop"
+  data-workspace-pane-id={parent.id}
+  use:registerDropTarget
+  ondragenter={handleDragEnter}
+  ondragover={handleDragOver}
+  ondragleave={handleDragLeave}
+  ondrop={handleDrop}
+>
+  {@render children?.()}
+  {#if position.active && drag.active}
+    <div
+      class="workspace-drop-overlay ui-workspace-drop-overlay"
+      data-ui-part="overlay"
+      data-drop-position={drag.target?.position}
+      style={position.style}
+    ></div>
+  {/if}
+</div>

package/dist/shared/workspace/drop-overlay/WorkspaceTabsDrop.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { WorkspaceTabsNode } from "../core/types.js";
+import type { WorkspaceShellController } from "../core/workspace-controller.svelte.js";
+import type { WorkspaceDragState } from "../drag/workspace-drag.svelte.js";
+import { type WorkspaceDropZone } from "./workspace-tabs-drop.js";
+import "./WorkspaceDropOverlay.css";
+type $$ComponentProps = {
+    class?: string;
+    controller: WorkspaceShellController;
+    drag: WorkspaceDragState;
+    parent: WorkspaceTabsNode;
+    children?: Snippet;
+    dropZones?: WorkspaceDropZone[];
+};
+declare const WorkspaceTabsDrop: import("svelte").Component<$$ComponentProps, {}, "">;
+type WorkspaceTabsDrop = ReturnType<typeof WorkspaceTabsDrop>;
+export default WorkspaceTabsDrop;

package/dist/shared/workspace/drop-overlay/index.d.ts

@@ -0,0 +1,3 @@
+export { default as WorkspaceDropOverlay } from "./WorkspaceDropOverlay.svelte";
+export { default as WorkspaceTabsDrop } from "./WorkspaceTabsDrop.svelte";
+export { resolveWorkspaceDropOverlay, type WorkspaceDropOverlayGeometry, type WorkspaceDropZone, } from "./workspace-tabs-drop.js";

package/dist/shared/workspace/drop-overlay/index.js

@@ -0,0 +1,3 @@
+export { default as WorkspaceDropOverlay } from "./WorkspaceDropOverlay.svelte";
+export { default as WorkspaceTabsDrop } from "./WorkspaceTabsDrop.svelte";
+export { resolveWorkspaceDropOverlay, } from "./workspace-tabs-drop.js";

package/dist/shared/workspace/drop-overlay/workspace-tabs-drop.d.ts

@@ -0,0 +1,7 @@
+import type { WorkspaceDropPosition } from "../core/types.js";
+export type WorkspaceDropZone = Exclude<WorkspaceDropPosition, "center">;
+export interface WorkspaceDropOverlayGeometry {
+    position: WorkspaceDropPosition;
+    style: string;
+}
+export declare function resolveWorkspaceDropOverlay(clientX: number, clientY: number, rect: Pick<DOMRect, "x" | "y" | "width" | "height">, dropZones?: WorkspaceDropZone[]): WorkspaceDropOverlayGeometry;

package/dist/shared/workspace/drop-overlay/workspace-tabs-drop.js

@@ -0,0 +1,43 @@
+export function resolveWorkspaceDropOverlay(clientX, clientY, rect, dropZones = ["left", "right", "top", "bottom"]) {
+    const mouseX = clientX - rect.x;
+    const mouseY = clientY - rect.y;
+    const fromLeft = mouseX / rect.width;
+    const fromTop = mouseY / rect.height;
+    const positions = [
+        { position: "left", distance: fromLeft },
+        { position: "right", distance: 1 - fromLeft },
+        { position: "top", distance: fromTop },
+        { position: "bottom", distance: 1 - fromTop },
+    ]
+        .filter((candidate) => dropZones.includes(candidate.position))
+        .sort((a, b) => a.distance - b.distance);
+    if (positions.length && positions[0].distance < 0.25) {
+        const position = positions[0].position;
+        switch (position) {
+            case "left":
+                return {
+                    position,
+                    style: `width: ${rect.width * 0.25}px; height: ${rect.height}px; left: 0px; top: 0px;`,
+                };
+            case "right":
+                return {
+                    position,
+                    style: `width: ${rect.width * 0.25}px; height: ${rect.height}px; right: 0px; top: 0px; margin-left: auto;`,
+                };
+            case "top":
+                return {
+                    position,
+                    style: `width: ${rect.width}px; height: ${rect.height * 0.25}px; top: 0px; left: 0px;`,
+                };
+            case "bottom":
+                return {
+                    position,
+                    style: `width: ${rect.width}px; height: ${rect.height * 0.35}px; bottom: 0px; left: 0px`,
+                };
+        }
+    }
+    return {
+        position: "center",
+        style: `width: ${rect.width}px; height: ${rect.height}px; top: 0px; left: 0px`,
+    };
+}

package/dist/shared/workspace/empty/WorkspaceEmpty.css

@@ -0,0 +1,42 @@
+.ui-workspace-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  background: var(--ui-workspace-panel);
+  color: var(--ui-workspace-panel-foreground);
+}
+
+.ui-workspace-empty[data-workspace-surface="page"] {
+  background: var(--ui-workspace-background);
+  color: var(--ui-workspace-foreground);
+}
+
+.ui-workspace-empty > .ui-workspace-empty__body {
+  flex: 0 1 auto;
+  width: min(42rem, calc(100% - 2.5rem));
+  min-height: min(28rem, calc(100% - 2.5rem));
+  padding: clamp(1.5rem, 7vh, 4rem) clamp(1rem, 5vw, 3rem);
+}
+
+.ui-workspace-empty [data-ui-part="empty-media"] {
+  --ui-workspace-icon-size: 1.5rem;
+}
+
+.ui-workspace-empty__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.ui-workspace-empty__links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.125rem;
+}