@plures/design-dojo 0.5.2 → 0.7.1

package/dist/app/ProcedureNode.svelte

@@ -0,0 +1,283 @@
+<!--
+  ProcedureNode — A single visual node in the procedure canvas.
+
+  Renders as an absolutely-positioned card with:
+  - Color-coded header (by node type) with drag handle
+  - Typed port circles on left (inputs) and right (outputs)
+  - Port labels
+  - Status indicator dot
+  - Keyboard-accessible selection
+-->
+<script lang="ts">
+  import type { CanvasNode } from "./ProcedureCanvas.types.js";
+
+  interface Props {
+    node: CanvasNode;
+    selected?: boolean;
+    /** Canvas pixel constants — must match ProcedureCanvas. */
+    nodeW?: number;
+    headerH?: number;
+    portRow?: number;
+    pad?: number;
+    /** Called when the header is pressed (starts drag). */
+    onheaderdown?: (e: MouseEvent) => void;
+    /** Called on a port mousedown (start connection drag). */
+    onportdown?: (side: "input" | "output", portId: string, e: MouseEvent) => void;
+    /** Called on a port mouseup (complete connection). */
+    onportup?: (side: "input" | "output", portId: string, e: MouseEvent) => void;
+    /** Called on node click (selection). */
+    onclick?: (e: MouseEvent) => void;
+    /** Called on node double-click (enter sub-canvas). */
+    ondblclick?: (e: MouseEvent) => void;
+    /** Called on node right-click (context menu). */
+    oncontextmenu?: (e: MouseEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+  }
+
+  let {
+    node,
+    selected = false,
+    nodeW = 180,
+    headerH = 36,
+    portRow = 22,
+    pad = 8,
+    onheaderdown,
+    onportdown,
+    onportup,
+    onclick,
+    ondblclick,
+    oncontextmenu,
+    onkeydown,
+  }: Props = $props();
+
+  const TYPE_COLORS: Record<
+    string,
+    { bg: string; header: string; accent: string; text: string }
+  > = {
+    event:     { bg: "#0c1e33", header: "#163250", accent: "#3b82f6", text: "#93c5fd" },
+    procedure: { bg: "#0a1c0f", header: "#12301a", accent: "#22c55e", text: "#86efac" },
+    action:    { bg: "#1c0e00", header: "#3a1200", accent: "#f97316", text: "#fdba74" },
+    condition: { bg: "#1a1400", header: "#3a2900", accent: "#eab308", text: "#fde047" },
+    gate:      { bg: "#1a0606", header: "#380e0e", accent: "#ef4444", text: "#fca5a5" },
+  };
+
+  const TYPE_ICONS: Record<string, string> = {
+    event:     "⚡",
+    procedure: "⚙",
+    action:    "▶",
+    condition: "◆",
+    gate:      "🛡",
+  };
+
+  const STATUS_COLORS: Record<string, string> = {
+    active:   "#22c55e",
+    inactive: "#888",
+    error:    "#ef4444",
+  };
+
+  const colors = $derived(TYPE_COLORS[node.type] ?? TYPE_COLORS.procedure);
+  const icon   = $derived(TYPE_ICONS[node.type] ?? "⚙");
+
+  const portRows = $derived(
+    Math.max(node.ports.inputs.length, node.ports.outputs.length, 1),
+  );
+  const nodeH = $derived(headerH + pad + portRows * portRow + pad);
+
+  function portTopPx(idx: number) {
+    return headerH + pad + idx * portRow + portRow / 2;
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class="proc-node"
+  class:proc-node--selected={selected}
+  class:proc-node--has-subcanvas={!!node.subCanvas}
+  style:width="{nodeW}px"
+  style:height="{nodeH}px"
+  style:background={colors.bg}
+  style:border-color={selected ? colors.accent : `color-mix(in srgb, ${colors.accent} 35%, #2a2a2a)`}
+  role="listitem"
+  tabindex="0"
+  aria-label="{node.type} node: {node.label}{node.subCanvas ? ' (has sub-canvas)' : ''}"
+  onclick={onclick}
+  ondblclick={ondblclick}
+  oncontextmenu={oncontextmenu}
+  onkeydown={onkeydown}
+>
+  <!-- ── Header ── -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="proc-node__header"
+    style:background={colors.header}
+    style:border-bottom-color="color-mix(in srgb, {colors.accent} 35%, transparent)"
+    onmousedown={onheaderdown}
+  >
+    <span class="proc-node__icon" aria-hidden="true">{icon}</span>
+    <span class="proc-node__label" style:color={colors.text}>{node.label}</span>
+    {#if node.subCanvas}
+      <span class="proc-node__subcanvas-badge" title="Has sub-canvas — double-click to enter" aria-hidden="true">⤵</span>
+    {/if}
+    {#if node.status}
+      <span
+        class="proc-node__status-dot"
+        style:background={STATUS_COLORS[node.status] ?? "#888"}
+        title="Status: {node.status}"
+        aria-label="Status: {node.status}"
+      ></span>
+    {/if}
+  </div>
+
+  <!-- ── Input ports ── -->
+  {#each node.ports.inputs as port, i}
+    <button
+      class="proc-node__port proc-node__port--in"
+      style:top="{portTopPx(i)}px"
+      style:background={colors.accent}
+      style:box-shadow="0 0 0 2px {colors.bg}, 0 0 0 3.5px {colors.accent}"
+      aria-label="Input: {port.label}"
+      onmousedown={(e) => { e.stopPropagation(); onportdown?.("input", port.id, e); }}
+      onmouseup={(e) => { e.stopPropagation(); onportup?.("input", port.id, e); }}
+    ></button>
+    <span
+      class="proc-node__port-label proc-node__port-label--in"
+      style:top="{portTopPx(i)}px"
+    >{port.label}</span>
+  {/each}
+
+  <!-- ── Output ports ── -->
+  {#each node.ports.outputs as port, i}
+    <button
+      class="proc-node__port proc-node__port--out"
+      style:top="{portTopPx(i)}px"
+      style:background={colors.accent}
+      style:box-shadow="0 0 0 2px {colors.bg}, 0 0 0 3.5px {colors.accent}"
+      aria-label="Output: {port.label}"
+      onmousedown={(e) => { e.stopPropagation(); onportdown?.("output", port.id, e); }}
+      onmouseup={(e) => { e.stopPropagation(); onportup?.("output", port.id, e); }}
+    ></button>
+    <span
+      class="proc-node__port-label proc-node__port-label--out"
+      style:top="{portTopPx(i)}px"
+    >{port.label}</span>
+  {/each}
+</div>
+
+<style>
+  .proc-node {
+    position: absolute;
+    border-radius: var(--radius-md, 10px);
+    border: 1.5px solid;
+    box-sizing: border-box;
+    overflow: visible;
+    cursor: default;
+    user-select: none;
+    transition: box-shadow 0.12s;
+  }
+
+  .proc-node:focus {
+    outline: none;
+  }
+
+  .proc-node--selected {
+    box-shadow: 0 0 0 2px var(--color-accent, #6366f1);
+  }
+
+  /* ── Header ── */
+  .proc-node__header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0 8px;
+    height: 36px;
+    border-radius: 8px 8px 0 0;
+    border-bottom: 1px solid;
+    cursor: grab;
+    flex-shrink: 0;
+  }
+
+  .proc-node__header:active {
+    cursor: grabbing;
+  }
+
+  .proc-node__icon {
+    font-size: 13px;
+    flex-shrink: 0;
+  }
+
+  .proc-node__label {
+    flex: 1;
+    font-size: 11px;
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: var(--font-mono, monospace);
+    letter-spacing: 0.02em;
+  }
+
+  .proc-node__status-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .proc-node__subcanvas-badge {
+    font-size: 12px;
+    opacity: 0.7;
+    flex-shrink: 0;
+    line-height: 1;
+  }
+
+  .proc-node--has-subcanvas:hover .proc-node__subcanvas-badge {
+    opacity: 1;
+  }
+
+  /* ── Ports ── */
+  .proc-node__port {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: none;
+    padding: 0;
+    cursor: crosshair;
+    transform: translateY(-50%);
+    transition: transform 0.1s;
+    z-index: 1;
+  }
+
+  .proc-node__port:hover {
+    transform: translateY(-50%) scale(1.5);
+  }
+
+  .proc-node__port--in {
+    left: -6px;
+  }
+
+  .proc-node__port--out {
+    right: -6px;
+  }
+
+  /* ── Port labels ── */
+  .proc-node__port-label {
+    position: absolute;
+    font-size: 10px;
+    color: var(--color-text-muted, #888);
+    transform: translateY(-50%);
+    white-space: nowrap;
+    pointer-events: none;
+    line-height: 1;
+  }
+
+  .proc-node__port-label--in {
+    left: 12px;
+  }
+
+  .proc-node__port-label--out {
+    right: 12px;
+    text-align: right;
+  }
+</style>

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

@@ -0,0 +1,26 @@
+import type { CanvasNode } from "./ProcedureCanvas.types.js";
+interface Props {
+    node: CanvasNode;
+    selected?: boolean;
+    /** Canvas pixel constants — must match ProcedureCanvas. */
+    nodeW?: number;
+    headerH?: number;
+    portRow?: number;
+    pad?: number;
+    /** Called when the header is pressed (starts drag). */
+    onheaderdown?: (e: MouseEvent) => void;
+    /** Called on a port mousedown (start connection drag). */
+    onportdown?: (side: "input" | "output", portId: string, e: MouseEvent) => void;
+    /** Called on a port mouseup (complete connection). */
+    onportup?: (side: "input" | "output", portId: string, e: MouseEvent) => void;
+    /** Called on node click (selection). */
+    onclick?: (e: MouseEvent) => void;
+    /** Called on node double-click (enter sub-canvas). */
+    ondblclick?: (e: MouseEvent) => void;
+    /** Called on node right-click (context menu). */
+    oncontextmenu?: (e: MouseEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+}
+declare const ProcedureNode: import("svelte").Component<Props, {}, "">;
+type ProcedureNode = ReturnType<typeof ProcedureNode>;
+export default ProcedureNode;

package/dist/app/Realm.types.js

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

package/dist/app/RealmIndicator.svelte

@@ -0,0 +1,81 @@
+<!--
+  RealmIndicator — Persistent banner in the message pane showing the active realm.
+
+  Features:
+  - Colored left-border accent matching active realm color
+  - Shows realm type icon, name, and type label
+  - Subtle background tint derived from realm color
+  - Screen-reader announced via aria-live
+-->
+<script lang="ts">
+  import type { Realm } from "./Realm.types.js";
+
+  interface Props {
+    /** The currently active realm. */
+    realm: Realm;
+    /** Custom CSS class. */
+    class?: string;
+  }
+
+  let { realm, class: className = "" }: Props = $props();
+
+  const REALM_TYPE_LABEL: Record<string, string> = {
+    personal: "Personal",
+    org: "Org",
+    "sub-realm": "Sub-realm",
+  };
+
+  const REALM_TYPE_ICON: Record<string, string> = {
+    personal: "⬡",
+    org: "⬢",
+    "sub-realm": "⬡",
+  };
+</script>
+
+<div
+  class="realm-indicator {className}"
+  style:--realm-color={realm.color}
+  role="status"
+  aria-live="polite"
+  aria-label="Active realm: {realm.name}"
+>
+  <span class="realm-indicator__icon" aria-hidden="true">
+    {realm.icon ?? REALM_TYPE_ICON[realm.type] ?? "⬡"}
+  </span>
+  <span class="realm-indicator__name">{realm.name}</span>
+  <span class="realm-indicator__type">{REALM_TYPE_LABEL[realm.type] ?? realm.type}</span>
+</div>
+
+<style>
+  .realm-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+    padding: var(--space-1, 4px) var(--space-3, 12px);
+    background: color-mix(in srgb, var(--realm-color) 10%, transparent);
+    border-left: 3px solid var(--realm-color);
+    border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
+    font-family: var(--font-sans);
+    font-size: var(--text-xs, 12px);
+    user-select: none;
+  }
+
+  .realm-indicator__icon {
+    font-size: 14px;
+    line-height: 1;
+    flex-shrink: 0;
+  }
+
+  .realm-indicator__name {
+    font-weight: 600;
+    color: var(--realm-color);
+    letter-spacing: 0.01em;
+  }
+
+  .realm-indicator__type {
+    color: var(--color-text-subtle, #555);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    font-size: 10px;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { Realm } from "./Realm.types.js";
+interface Props {
+    /** The currently active realm. */
+    realm: Realm;
+    /** Custom CSS class. */
+    class?: string;
+}
+declare const RealmIndicator: import("svelte").Component<Props, {}, "">;
+type RealmIndicator = ReturnType<typeof RealmIndicator>;
+export default RealmIndicator;