@lapismd/design-core 0.1.0

package/src/shared/workspace/drag/workspace-drag.svelte.ts

@@ -0,0 +1,354 @@
+import type {
+  WorkspaceDropPosition,
+  WorkspaceLayoutDropEvent,
+} from "../core/types.js";
+import type { WorkspaceShellController } from "../core/workspace-controller.svelte.js";
+import {
+  shouldUseWorkspacePointerDrag,
+  type WorkspaceDndStrategy,
+} from "./workspace-pointer-drag-policy.js";
+
+export interface WorkspaceDropTargetState {
+  paneId: string;
+  position: WorkspaceDropPosition;
+  insertionIndex?: number;
+  sidebarGroupId?: string;
+}
+
+export interface WorkspacePointerDropTarget {
+  onMove(event: { clientX: number; clientY: number }): void;
+  onDrop(): void;
+  onLeave(): void;
+}
+
+export class WorkspaceDragState {
+  active = $state<{ tabId: string; source: "html5" | "pointer" } | null>(null);
+  target = $state<WorkspaceDropTargetState | null>(null);
+  dragging = $state(false);
+  dndStrategy = $state<WorkspaceDndStrategy>("auto");
+  tabMoveIndicator = $state({
+    active: false,
+    scope: null as string | null,
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
+
+  readonly #controller: WorkspaceShellController;
+  #pointerCleanup: (() => void) | null = null;
+  readonly #pointerTargets = new Map<HTMLElement, WorkspacePointerDropTarget>();
+  #activePointerTarget: WorkspacePointerDropTarget | null = null;
+
+  constructor(controller: WorkspaceShellController) {
+    this.#controller = controller;
+  }
+
+  startPointer(event: PointerEvent, tabId: string): void {
+    if (event.button !== 0 || this.active) return;
+    const source = event.currentTarget as HTMLElement;
+    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: PointerEvent) => {
+      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: PointerEvent) => {
+      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: DragEvent, tabId: string): void {
+    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: DragEvent): void {
+    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 as HTMLElement).ownerDocument,
+      "html5",
+    );
+  }
+
+  dropHtml5(event: DragEvent): void {
+    if (!this.active || this.active.source !== "html5") return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.target) this.commitCurrentDrop("html5");
+  }
+
+  endHtml5(event: DragEvent): void {
+    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: string,
+    insertionIndex: number,
+    source: WorkspaceLayoutDropEvent["source"],
+  ): boolean {
+    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: string,
+    geometry: { x: number; y: number; width: number; height: number },
+  ): void {
+    this.tabMoveIndicator = { active: true, scope, ...geometry };
+  }
+
+  clearTabMoveIndicator(scope?: string): void {
+    if (scope && this.tabMoveIndicator.scope !== scope) return;
+    this.tabMoveIndicator = {
+      active: false,
+      scope: null,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    };
+  }
+
+  setBodyTarget(paneId: string, position: WorkspaceDropPosition): void {
+    if (!this.active) return;
+    this.target = { paneId, position };
+  }
+
+  setSidebarGroupTarget(
+    paneId: string,
+    sidebarGroupId: string,
+    insertionIndex: number,
+    position: Exclude<WorkspaceDropPosition, "center">,
+    source: WorkspaceLayoutDropEvent["source"],
+  ): boolean {
+    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: HTMLElement,
+    target: WorkspacePointerDropTarget,
+  ): () => void {
+    this.#pointerTargets.set(node, target);
+    return () => {
+      this.#pointerTargets.delete(node);
+      if (this.#activePointerTarget === target) {
+        target.onLeave();
+        this.#activePointerTarget = null;
+      }
+    };
+  }
+
+  commitCurrentDrop(source: WorkspaceLayoutDropEvent["source"]): boolean {
+    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: number,
+    clientY: number,
+    ownerDocument: Document,
+    source: WorkspaceLayoutDropEvent["source"],
+  ): void {
+    if (!this.active) return;
+    const element = ownerDocument
+      .elementsFromPoint(clientX, clientY)
+      .map((candidate) =>
+        candidate.closest<HTMLElement>("[data-workspace-pane-id]"),
+      )
+      .find((candidate): candidate is HTMLElement => 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" as const, distance: horizontal },
+      { position: "right" as const, distance: 1 - horizontal },
+      { position: "top" as const, distance: vertical },
+      { position: "bottom" as const, distance: 1 - vertical },
+    ].sort((a, b) => a.distance - b.distance);
+    const position: WorkspaceDropPosition =
+      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?: string): void {
+    if (!paneId || this.target?.paneId === paneId) this.target = null;
+  }
+
+  clear(): void {
+    this.#pointerCleanup?.();
+    this.#activePointerTarget?.onLeave();
+    this.#activePointerTarget = null;
+    this.active = null;
+    this.target = null;
+    this.dragging = false;
+    this.clearTabMoveIndicator();
+  }
+
+  #movePointerTarget(
+    clientX: number,
+    clientY: number,
+    ownerDocument: Document,
+  ): void {
+    const candidates = ownerDocument.elementsFromPoint(clientX, clientY);
+    let next: WorkspacePointerDropTarget | null = 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/src/shared/workspace/drag/workspace-pointer-drag-policy.ts

@@ -0,0 +1,18 @@
+export type WorkspaceDndStrategy = "auto" | "html5" | "pointer";
+
+export function shouldUseWorkspacePointerDrag(
+  strategy: WorkspaceDndStrategy,
+  pointerType: string,
+  coarsePointer: boolean,
+): boolean {
+  if (strategy === "html5") {
+    return false;
+  }
+  if (strategy === "pointer") {
+    return true;
+  }
+  if (pointerType === "touch" || pointerType === "pen") {
+    return true;
+  }
+  return pointerType === "mouse" && coarsePointer;
+}

package/src/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/src/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/src/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/src/shared/workspace/drop-overlay/index.ts

@@ -0,0 +1,7 @@
+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/src/shared/workspace/drop-overlay/workspace-tabs-drop.ts

@@ -0,0 +1,59 @@
+import type { WorkspaceDropPosition } from "../core/types.js";
+
+export type WorkspaceDropZone = Exclude<WorkspaceDropPosition, "center">;
+
+export interface WorkspaceDropOverlayGeometry {
+  position: WorkspaceDropPosition;
+  style: string;
+}
+
+export function resolveWorkspaceDropOverlay(
+  clientX: number,
+  clientY: number,
+  rect: Pick<DOMRect, "x" | "y" | "width" | "height">,
+  dropZones: WorkspaceDropZone[] = ["left", "right", "top", "bottom"],
+): WorkspaceDropOverlayGeometry {
+  const mouseX = clientX - rect.x;
+  const mouseY = clientY - rect.y;
+  const fromLeft = mouseX / rect.width;
+  const fromTop = mouseY / rect.height;
+  const positions = [
+    { position: "left" as const, distance: fromLeft },
+    { position: "right" as const, distance: 1 - fromLeft },
+    { position: "top" as const, distance: fromTop },
+    { position: "bottom" as const, 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/src/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;
+}