@plures/design-dojo 0.5.2 → 0.7.1

package/dist/app/SubCanvas.svelte

@@ -0,0 +1,457 @@
+<!--
+  SubCanvas — Resizable, draggable labeled container for grouped controls.
+
+  Designed to be placed inside a canvas surface (e.g. ProcedureCanvas) as a
+  sub-canvas region. Supports:
+  - Labeled header with drag handle
+  - 8-direction resize handles
+  - Arbitrary children via Svelte snippet
+  - Depth-aware accent colours (Obsidian-like palette)
+  - Linked mode: double-clicking the header fires `onopen` (navigate to sub-canvas)
+  - Optional `zoom` prop so resize/drag math is correct when inside a scaled canvas
+  - Keyboard accessible (focus ring, arrow-key nudge on header)
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { untrack } from "svelte";
+  import type { SubCanvasBounds } from "./SubCanvas.types.js";
+
+  // ── Depth accent palette (calm, Obsidian-inspired) ───────────────────────
+  const DEPTH_ACCENTS = [
+    "#6366f1", // indigo  — root / department
+    "#0ea5e9", // sky     — team
+    "#22c55e", // green   — primitive group
+    "#f59e0b", // amber   — leaf / detail
+    "#888888", // muted   — depth 4+
+  ];
+
+  type ResizeDir = "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
+
+  interface ResizeHandle {
+    dir: ResizeDir;
+    cursor: string;
+    /** Inline style fragment controlling position/size of the hit target. */
+    pos: string;
+  }
+
+  const HANDLES: ResizeHandle[] = [
+    { dir: "n",  cursor: "n-resize",  pos: "top:-5px;left:50%;transform:translateX(-50%);width:32px;height:10px;" },
+    { dir: "ne", cursor: "ne-resize", pos: "top:-5px;right:-5px;width:10px;height:10px;" },
+    { dir: "e",  cursor: "e-resize",  pos: "top:50%;right:-5px;transform:translateY(-50%);width:10px;height:32px;" },
+    { dir: "se", cursor: "se-resize", pos: "bottom:-5px;right:-5px;width:10px;height:10px;" },
+    { dir: "s",  cursor: "s-resize",  pos: "bottom:-5px;left:50%;transform:translateX(-50%);width:32px;height:10px;" },
+    { dir: "sw", cursor: "sw-resize", pos: "bottom:-5px;left:-5px;width:10px;height:10px;" },
+    { dir: "w",  cursor: "w-resize",  pos: "top:50%;left:-5px;transform:translateY(-50%);width:10px;height:32px;" },
+    { dir: "nw", cursor: "nw-resize", pos: "top:-5px;left:-5px;width:10px;height:10px;" },
+  ];
+
+  // ── Props ─────────────────────────────────────────────────────────────────
+  interface Props {
+    /** Initial X position in canvas coordinates. */
+    x?: number;
+    /** Initial Y position in canvas coordinates. */
+    y?: number;
+    /** Initial width in canvas units. */
+    width?: number;
+    /** Initial height in canvas units. */
+    height?: number;
+    /** Display label shown in the header. */
+    label?: string;
+    /**
+     * Nesting depth. Controls accent colour:
+     * 0 = indigo (department), 1 = sky (team), 2 = green (group), …
+     */
+    depth?: number;
+    /**
+     * When true, a link icon is shown and double-clicking the header fires `onopen`.
+     * Use this for sub-canvases that reference another canvas by ID.
+     */
+    linked?: boolean;
+    /** Whether this sub-canvas is currently selected. */
+    selected?: boolean;
+    /** Minimum width during resize (canvas units). */
+    minWidth?: number;
+    /** Minimum height during resize (canvas units). */
+    minHeight?: number;
+    /**
+     * Current canvas zoom level. Used to scale mouse deltas correctly when
+     * the sub-canvas is embedded inside a transformed canvas surface.
+     */
+    zoom?: number;
+    /** Slot content rendered inside the body area. */
+    children?: Snippet;
+    /** Custom CSS class applied to the root element. */
+    class?: string;
+    /** Fired when position or size changes after a drag/resize gesture ends. */
+    onchange?: (bounds: SubCanvasBounds) => void;
+    /** Fired on click (selection). */
+    onclick?: (e: MouseEvent) => void;
+    /** Fired on header double-click when `linked` is true. */
+    onopen?: () => void;
+  }
+
+  let {
+    x: initX = 40,
+    y: initY = 40,
+    width: initW = 320,
+    height: initH = 240,
+    label = "Sub-canvas",
+    depth = 0,
+    linked = false,
+    selected = false,
+    minWidth = 120,
+    minHeight = 80,
+    zoom = 1,
+    children,
+    class: className = "",
+    onchange,
+    onclick,
+    onopen,
+  }: Props = $props();
+
+  // ── Internal state (owned) ────────────────────────────────────────────────
+  // untrack(): one-time capture of initial prop values (owned state pattern)
+  let x = $state(untrack(() => initX));
+  let y = $state(untrack(() => initY));
+  let w = $state(untrack(() => initW));
+  let h = $state(untrack(() => initH));
+
+  const accent = $derived(
+    DEPTH_ACCENTS[Math.max(0, Math.min(depth, DEPTH_ACCENTS.length - 1))]
+  );
+
+  // ── Drag state ────────────────────────────────────────────────────────────
+  let drag: { startCX: number; startCY: number; startX: number; startY: number } | null = $state(null);
+
+  // ── Resize state ──────────────────────────────────────────────────────────
+  let resize: {
+    dir: ResizeDir;
+    startCX: number;
+    startCY: number;
+    startX: number;
+    startY: number;
+    startW: number;
+    startH: number;
+  } | null = $state(null);
+
+  // ── Drag handlers (pointer capture on header) ─────────────────────────────
+  function onHeaderPointerDown(e: PointerEvent) {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    drag = { startCX: e.clientX, startCY: e.clientY, startX: x, startY: y };
+  }
+
+  function onHeaderPointerMove(e: PointerEvent) {
+    if (!drag) return;
+    const scale = zoom > 0 ? zoom : 1;
+    x = drag.startX + (e.clientX - drag.startCX) / scale;
+    y = drag.startY + (e.clientY - drag.startCY) / scale;
+  }
+
+  function onHeaderPointerUp() {
+    if (!drag) return;
+    drag = null;
+    onchange?.({ x, y, width: w, height: h });
+  }
+
+  function onHeaderPointerCancel() {
+    if (!drag) return;
+    drag = null;
+    onchange?.({ x, y, width: w, height: h });
+  }
+
+  function onHeaderKeyDown(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (linked) { onopen?.(); } else { (e.currentTarget as HTMLElement).click(); }
+      return;
+    }
+    if (e.key === " ") {
+      e.preventDefault();
+      (e.currentTarget as HTMLElement).click();
+      return;
+    }
+    const step = e.shiftKey ? 20 : 4;
+    if      (e.key === "ArrowLeft")  { e.preventDefault(); x -= step; }
+    else if (e.key === "ArrowRight") { e.preventDefault(); x += step; }
+    else if (e.key === "ArrowUp")    { e.preventDefault(); y -= step; }
+    else if (e.key === "ArrowDown")  { e.preventDefault(); y += step; }
+    else return;
+    onchange?.({ x, y, width: w, height: h });
+  }
+
+  // ── Resize handlers (pointer capture on each handle) ─────────────────────
+  function onResizePointerDown(dir: ResizeDir, e: PointerEvent) {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    resize = { dir, startCX: e.clientX, startCY: e.clientY, startX: x, startY: y, startW: w, startH: h };
+  }
+
+  function onResizePointerMove(e: PointerEvent) {
+    if (!resize) return;
+    const scale = zoom > 0 ? zoom : 1;
+    const dx = (e.clientX - resize.startCX) / scale;
+    const dy = (e.clientY - resize.startCY) / scale;
+    const dir = resize.dir;
+
+    let nx = resize.startX;
+    let ny = resize.startY;
+    let nw = resize.startW;
+    let nh = resize.startH;
+
+    if (dir.includes("e")) {
+      nw = Math.max(minWidth, resize.startW + dx);
+    }
+    if (dir.includes("s")) {
+      nh = Math.max(minHeight, resize.startH + dy);
+    }
+    if (dir.includes("w")) {
+      const dw = Math.min(dx, resize.startW - minWidth);
+      nx = resize.startX + dw;
+      nw = resize.startW - dw;
+    }
+    if (dir.includes("n")) {
+      const dh = Math.min(dy, resize.startH - minHeight);
+      ny = resize.startY + dh;
+      nh = resize.startH - dh;
+    }
+
+    x = nx; y = ny; w = nw; h = nh;
+  }
+
+  function onResizePointerUp() {
+    if (!resize) return;
+    resize = null;
+    onchange?.({ x, y, width: w, height: h });
+  }
+
+  function onResizePointerCancel() {
+    if (!resize) return;
+    resize = null;
+    onchange?.({ x, y, width: w, height: h });
+  }
+
+  function onResizeHandleKeyDown(dir: ResizeDir, e: KeyboardEvent) {
+    const step = e.shiftKey ? 20 : 8;
+    let changed = false;
+    if (dir.includes("e") && e.key === "ArrowRight") { w = Math.max(minWidth,  w + step); changed = true; }
+    if (dir.includes("e") && e.key === "ArrowLeft")  { w = Math.max(minWidth,  w - step); changed = true; }
+    if (dir.includes("w") && e.key === "ArrowLeft")  { const d = Math.min(step, w - minWidth); x -= d; w += d; changed = true; }
+    if (dir.includes("w") && e.key === "ArrowRight") { const d = Math.min(step, w - minWidth); x += d; w -= d; changed = true; }
+    if (dir.includes("s") && e.key === "ArrowDown")  { h = Math.max(minHeight, h + step); changed = true; }
+    if (dir.includes("s") && e.key === "ArrowUp")    { h = Math.max(minHeight, h - step); changed = true; }
+    if (dir.includes("n") && e.key === "ArrowUp")    { const d = Math.min(step, h - minHeight); y -= d; h += d; changed = true; }
+    if (dir.includes("n") && e.key === "ArrowDown")  { const d = Math.min(step, h - minHeight); y += d; h -= d; changed = true; }
+    if (changed) { e.preventDefault(); onchange?.({ x, y, width: w, height: h }); }
+  }
+
+  // ── Root keyboard handler (Enter/Space → selection when body is focused) ──
+  function onRootKeyDown(e: KeyboardEvent) {
+    if (e.target !== e.currentTarget) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      (e.currentTarget as HTMLElement).click();
+    }
+  }
+
+  // ── Header double-click (open linked canvas) ──────────────────────────────
+  function onHeaderDblClick(e: MouseEvent) {
+    if (!linked) return;
+    e.stopPropagation();
+    onopen?.();
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class="sub-canvas {className}"
+  class:sub-canvas--selected={selected}
+  style:left="{x}px"
+  style:top="{y}px"
+  style:width="{w}px"
+  style:height="{h}px"
+  style:--sc-accent={accent}
+  role="region"
+  aria-label={label}
+  tabindex="0"
+  onclick={onclick}
+  onkeydown={onRootKeyDown}
+>
+  <!-- ── Header ── -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="sub-canvas__header"
+    class:sub-canvas__header--dragging={!!drag}
+    onpointerdown={onHeaderPointerDown}
+    onpointermove={onHeaderPointerMove}
+    onpointerup={onHeaderPointerUp}
+    onpointercancel={onHeaderPointerCancel}
+    onlostpointercapture={onHeaderPointerCancel}
+    ondblclick={onHeaderDblClick}
+    onkeydown={onHeaderKeyDown}
+    role="button"
+    tabindex="0"
+    aria-label="{linked ? `Drag or double-click to open ${label}` : `Drag ${label}`}"
+  >
+    <span class="sub-canvas__drag-grip" aria-hidden="true">⠿</span>
+    <span class="sub-canvas__label">{label}</span>
+    {#if linked}
+      <span class="sub-canvas__linked-icon" title="Double-click to open linked canvas">↗</span>
+    {/if}
+    <span class="sub-canvas__depth-badge" aria-label="Depth {depth}">L{depth}</span>
+  </div>
+
+  <!-- ── Body (children) ── -->
+  <div class="sub-canvas__body">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+
+  <!-- ── Resize handles ── -->
+  {#each HANDLES as handle}
+    <button
+      type="button"
+      class="sub-canvas__resize-handle"
+      style="{handle.pos}cursor:{handle.cursor};"
+      aria-label="Resize {handle.dir}"
+      onpointerdown={(e) => onResizePointerDown(handle.dir, e)}
+      onpointermove={onResizePointerMove}
+      onpointerup={onResizePointerUp}
+      onpointercancel={onResizePointerCancel}
+      onlostpointercapture={onResizePointerCancel}
+      onkeydown={(e) => onResizeHandleKeyDown(handle.dir, e)}
+    ></button>
+  {/each}
+</div>
+
+<style>
+  /* ── Root ── */
+  .sub-canvas {
+    position: absolute;
+    box-sizing: border-box;
+    background: color-mix(in srgb, var(--surface-1, #141414) 80%, transparent);
+    border: 1px solid color-mix(in srgb, var(--sc-accent, #6366f1) 55%, transparent);
+    border-radius: var(--radius-md, 10px);
+    outline: none;
+    display: flex;
+    flex-direction: column;
+    overflow: visible;
+    /* Subtle glow to distinguish from the background canvas */
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--sc-accent, #6366f1) 12%, transparent),
+      0 4px 20px rgba(0, 0, 0, 0.35);
+  }
+
+  .sub-canvas:focus-within {
+    outline: none;
+  }
+
+  .sub-canvas--selected {
+    border-color: var(--sc-accent, #6366f1);
+    box-shadow:
+      0 0 0 2px color-mix(in srgb, var(--sc-accent, #6366f1) 40%, transparent),
+      0 4px 20px rgba(0, 0, 0, 0.35);
+  }
+
+  /* ── Header ── */
+  .sub-canvas__header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0 var(--space-2, 8px);
+    height: 30px;
+    flex-shrink: 0;
+    user-select: none;
+    background: color-mix(in srgb, var(--sc-accent, #6366f1) 15%, var(--surface-2, #1e1e1e));
+    border-bottom: 1px solid color-mix(in srgb, var(--sc-accent, #6366f1) 25%, transparent);
+    border-radius: calc(var(--radius-md, 10px) - 1px) calc(var(--radius-md, 10px) - 1px) 0 0;
+    cursor: grab;
+  }
+
+  .sub-canvas__header:focus {
+    outline: 2px solid var(--sc-accent, #6366f1);
+    outline-offset: -2px;
+  }
+
+  .sub-canvas__header--dragging,
+  .sub-canvas__header--dragging:active {
+    cursor: grabbing;
+  }
+
+  .sub-canvas__drag-grip {
+    font-size: 12px;
+    color: color-mix(in srgb, var(--sc-accent, #6366f1) 60%, transparent);
+    flex-shrink: 0;
+    line-height: 1;
+  }
+
+  .sub-canvas__label {
+    flex: 1;
+    font-size: var(--text-xs, 12px);
+    font-weight: 700;
+    font-family: var(--font-mono, monospace);
+    letter-spacing: 0.04em;
+    color: color-mix(in srgb, var(--sc-accent, #6366f1) 80%, var(--color-text, #e8e8e8));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .sub-canvas__linked-icon {
+    font-size: 11px;
+    color: var(--sc-accent, #6366f1);
+    flex-shrink: 0;
+    opacity: 0.8;
+    cursor: pointer;
+  }
+
+  .sub-canvas__linked-icon:hover {
+    opacity: 1;
+  }
+
+  .sub-canvas__depth-badge {
+    font-size: 10px;
+    font-weight: 700;
+    font-family: var(--font-mono, monospace);
+    color: color-mix(in srgb, var(--sc-accent, #6366f1) 55%, transparent);
+    flex-shrink: 0;
+    letter-spacing: 0.02em;
+    padding: 1px 4px;
+    border-radius: var(--radius-sm, 6px);
+    background: color-mix(in srgb, var(--sc-accent, #6366f1) 10%, transparent);
+  }
+
+  /* ── Body ── */
+  .sub-canvas__body {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+    user-select: text;
+    /* Faint dot-grid identical to ProcedureCanvas surface */
+    background:
+      radial-gradient(circle, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+      transparent;
+    background-size: 20px 20px;
+  }
+
+  /* ── Resize handles ── */
+  .sub-canvas__resize-handle {
+    position: absolute;
+    background: transparent;
+    border: none;
+    padding: 0;
+    z-index: 10;
+    user-select: none;
+    /* Reveal faint accent dot on hover */
+    border-radius: 2px;
+    transition: background 0.1s;
+  }
+
+  .sub-canvas__resize-handle:hover {
+    background: color-mix(in srgb, var(--sc-accent, #6366f1) 45%, transparent);
+  }
+</style>

package/dist/app/SubCanvas.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { Snippet } from "svelte";
+import type { SubCanvasBounds } from "./SubCanvas.types.js";
+interface Props {
+    /** Initial X position in canvas coordinates. */
+    x?: number;
+    /** Initial Y position in canvas coordinates. */
+    y?: number;
+    /** Initial width in canvas units. */
+    width?: number;
+    /** Initial height in canvas units. */
+    height?: number;
+    /** Display label shown in the header. */
+    label?: string;
+    /**
+     * Nesting depth. Controls accent colour:
+     * 0 = indigo (department), 1 = sky (team), 2 = green (group), …
+     */
+    depth?: number;
+    /**
+     * When true, a link icon is shown and double-clicking the header fires `onopen`.
+     * Use this for sub-canvases that reference another canvas by ID.
+     */
+    linked?: boolean;
+    /** Whether this sub-canvas is currently selected. */
+    selected?: boolean;
+    /** Minimum width during resize (canvas units). */
+    minWidth?: number;
+    /** Minimum height during resize (canvas units). */
+    minHeight?: number;
+    /**
+     * Current canvas zoom level. Used to scale mouse deltas correctly when
+     * the sub-canvas is embedded inside a transformed canvas surface.
+     */
+    zoom?: number;
+    /** Slot content rendered inside the body area. */
+    children?: Snippet;
+    /** Custom CSS class applied to the root element. */
+    class?: string;
+    /** Fired when position or size changes after a drag/resize gesture ends. */
+    onchange?: (bounds: SubCanvasBounds) => void;
+    /** Fired on click (selection). */
+    onclick?: (e: MouseEvent) => void;
+    /** Fired on header double-click when `linked` is true. */
+    onopen?: () => void;
+}
+declare const SubCanvas: import("svelte").Component<Props, {}, "">;
+type SubCanvas = ReturnType<typeof SubCanvas>;
+export default SubCanvas;

package/dist/app/SubCanvas.types.js

@@ -0,0 +1 @@
+export {};

package/dist/app/Sync.types.js

@@ -0,0 +1 @@
+export {};