@plures/design-dojo 0.5.3 → 0.7.1

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

@@ -0,0 +1,12 @@
+import type { ProcedureCanvasState } from "./ProcedureCanvas.types.js";
+interface Props {
+    /** Initial canvas state. */
+    state?: ProcedureCanvasState;
+    /** Custom CSS class. */
+    class?: string;
+    /** Fired whenever the canvas state changes. */
+    onchange?: (canvasState: ProcedureCanvasState) => void;
+}
+declare const ProcedureCanvas: import("svelte").Component<Props, {}, "">;
+type ProcedureCanvas = ReturnType<typeof ProcedureCanvas>;
+export default ProcedureCanvas;

package/dist/app/ProcedureCanvas.types.js

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

package/dist/app/ProcedureEditor.svelte

@@ -0,0 +1,494 @@
+<!--
+  ProcedureEditor — Agent procedures with list and canvas views.
+
+  Features:
+  - Toggle enable/disable per procedure (spring-physics Toggle)
+  - Inline edit: event type and priority
+  - Delete procedure
+  - Add new procedure
+  - onchange callback emits full updated list
+  - Toggle between list view and visual canvas editor
+-->
+<script lang="ts">
+  import Toggle from "../primitives/Toggle.svelte";
+  import ProcedureCanvas from "./ProcedureCanvas.svelte";
+  import type { Procedure } from "./ProcedureEditor.types.js";
+  import type { CanvasNode, ProcedureCanvasState } from "./ProcedureCanvas.types.js";
+
+  interface Props {
+    procedures?: Procedure[];
+    /** Custom CSS class. */
+    class?: string;
+    /** Fired on any change with the full updated list. */
+    onchange?: (procedures: Procedure[]) => void;
+  }
+
+  let { procedures = $bindable([]), class: className = "", onchange }: Props = $props();
+
+  let view: "list" | "canvas" = $state("list");
+
+  // Local deep copy so we control mutations
+  let items: Procedure[] = $state(procedures.map((p) => ({ ...p })));
+
+  /** Convert procedure list to a basic canvas state. */
+  function toCanvasState(procs: Procedure[]): ProcedureCanvasState {
+    const nodes: CanvasNode[] = procs.map((p, i) => ({
+      id: p.id,
+      type: "procedure" as const,
+      label: p.name,
+      position: { x: 60 + (i % 3) * 240, y: 60 + Math.floor(i / 3) * 160 },
+      config: { eventType: p.eventType, priority: p.priority, enabled: p.enabled },
+      ports: {
+        inputs:  [{ id: `${p.id}-in`,  label: p.eventType }],
+        outputs: [{ id: `${p.id}-out`, label: "out" }],
+      },
+      status: p.enabled ? "active" : "inactive",
+    }));
+    return { nodes, edges: [], viewport: { x: 40, y: 40, zoom: 1 } };
+  }
+
+  const canvasState = $derived(toCanvasState(items));
+
+  // Track which item is being edited inline
+  let editingId: string | null = $state(null);
+
+  function notify() {
+    onchange?.(items.map((p) => ({ ...p })));
+  }
+
+  function toggleEnabled(id: string, checked: boolean) {
+    items = items.map((p) => (p.id === id ? { ...p, enabled: checked } : p));
+    notify();
+  }
+
+  function setEventType(id: string, value: string) {
+    items = items.map((p) => (p.id === id ? { ...p, eventType: value } : p));
+  }
+
+  function setPriority(id: string, value: string) {
+    const n = parseInt(value, 10);
+    if (!isNaN(n)) items = items.map((p) => (p.id === id ? { ...p, priority: n } : p));
+  }
+
+  function commitEdit(id: string) {
+    editingId = null;
+    notify();
+  }
+
+  function deleteProcedure(id: string) {
+    items = items.filter((p) => p.id !== id);
+    if (editingId === id) editingId = null;
+    notify();
+  }
+
+  function addProcedure() {
+    const id =
+      typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+        ? `proc-${crypto.randomUUID()}`
+        : `proc-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const newProc: Procedure = {
+      id,
+      name: "New Procedure",
+      enabled: true,
+      eventType: "message",
+      priority: 0,
+    };
+    items = [...items, newProc];
+    editingId = id;
+    notify();
+  }
+</script>
+
+<div class="proc-editor {className}" aria-label="Procedure editor">
+  <div class="proc-editor__header">
+    <h3 class="proc-editor__title">Procedures</h3>
+    <div class="proc-editor__header-actions">
+      <!-- View toggle -->
+      <div class="proc-editor__view-toggle" role="group" aria-label="View mode">
+        <button
+          class="proc-editor__view-btn"
+          class:proc-editor__view-btn--active={view === "list"}
+          type="button"
+          onclick={() => (view = "list")}
+          aria-pressed={view === "list"}
+          title="List view"
+        >≡</button>
+        <button
+          class="proc-editor__view-btn"
+          class:proc-editor__view-btn--active={view === "canvas"}
+          type="button"
+          onclick={() => (view = "canvas")}
+          aria-pressed={view === "canvas"}
+          title="Canvas view"
+        >⬡</button>
+      </div>
+      {#if view === "list"}
+        <button
+          class="proc-editor__add-btn"
+          type="button"
+          onclick={addProcedure}
+          aria-label="Add procedure"
+        >+ Add</button>
+      {/if}
+    </div>
+  </div>
+
+  {#if view === "canvas"}
+    <div class="proc-editor__canvas-wrap">
+      <ProcedureCanvas state={canvasState} />
+    </div>
+  {:else}
+  <div class="proc-editor__list" role="list">
+    {#if items.length === 0}
+      <p class="proc-editor__empty">No procedures yet. Click "+ Add" to create one.</p>
+    {:else}
+      {#each items as proc (proc.id)}
+        <div
+          class="proc-editor__item"
+          class:proc-editor__item--disabled={!proc.enabled}
+          role="listitem"
+        >
+          <div class="proc-editor__item-main">
+            <Toggle
+              checked={proc.enabled}
+              onchange={(checked) => toggleEnabled(proc.id, checked)}
+            />
+            <div class="proc-editor__item-info">
+              {#if editingId === proc.id}
+                <input
+                  class="proc-editor__name-input"
+                  type="text"
+                  value={proc.name}
+                  oninput={(e) => {
+                    const v = (e.target as HTMLInputElement).value;
+                    items = items.map((p) => (p.id === proc.id ? { ...p, name: v } : p));
+                  }}
+                  aria-label="Procedure name"
+                  onblur={() => commitEdit(proc.id)}
+                  onkeydown={(e) => e.key === "Enter" && commitEdit(proc.id)}
+                />
+              {:else}
+                <span class="proc-editor__name">{proc.name}</span>
+              {/if}
+              {#if proc.description}
+                <span class="proc-editor__desc">{proc.description}</span>
+              {/if}
+            </div>
+            <div class="proc-editor__item-actions">
+              <button
+                class="proc-editor__icon-btn"
+                type="button"
+                onclick={() => (editingId = editingId === proc.id ? null : proc.id)}
+                aria-label="Edit procedure"
+                title="Edit"
+              >✏️</button>
+              <button
+                class="proc-editor__icon-btn proc-editor__icon-btn--danger"
+                type="button"
+                onclick={() => deleteProcedure(proc.id)}
+                aria-label="Delete procedure"
+                title="Delete"
+              >🗑</button>
+            </div>
+          </div>
+
+          {#if editingId === proc.id}
+            <div class="proc-editor__item-fields">
+              <label class="proc-editor__field">
+                <span class="proc-editor__field-label">Event Type</span>
+                <input
+                  class="proc-editor__field-input"
+                  type="text"
+                  value={proc.eventType}
+                  placeholder="message"
+                  oninput={(e) => setEventType(proc.id, (e.target as HTMLInputElement).value)}
+                  aria-label="Event type"
+                />
+              </label>
+              <label class="proc-editor__field">
+                <span class="proc-editor__field-label">Priority</span>
+                <input
+                  class="proc-editor__field-input proc-editor__field-input--narrow"
+                  type="number"
+                  value={proc.priority}
+                  min="0"
+                  max="999"
+                  oninput={(e) => setPriority(proc.id, (e.target as HTMLInputElement).value)}
+                  aria-label="Priority"
+                />
+              </label>
+            </div>
+          {:else}
+            <div class="proc-editor__item-meta">
+              <span class="proc-editor__chip">⚡ {proc.eventType}</span>
+              <span class="proc-editor__chip">↑ {proc.priority}</span>
+            </div>
+          {/if}
+        </div>
+      {/each}
+    {/if}
+  </div>
+  {/if}
+</div>
+
+<style>
+  .proc-editor {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--surface-1, #141414);
+    color: var(--color-text, #e8e8e8);
+  }
+
+  /* ── Header ── */
+  .proc-editor__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-4, 16px);
+    border-bottom: 1px solid var(--color-border, #2a2a2a);
+    flex-shrink: 0;
+  }
+
+  .proc-editor__title {
+    margin: 0;
+    font-size: var(--text-sm, 14px);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-muted, #888);
+  }
+
+  .proc-editor__add-btn {
+    background: var(--color-accent, #6366f1);
+    color: white;
+    border: none;
+    border-radius: var(--radius-md, 10px);
+    padding: 6px 14px;
+    font-size: var(--text-sm, 14px);
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .proc-editor__add-btn:hover { background: var(--color-accent-hover, #818cf8); }
+
+  /* ── Header actions ── */
+  .proc-editor__header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+  }
+
+  /* ── View toggle ── */
+  .proc-editor__view-toggle {
+    display: flex;
+    border: 1px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-sm, 6px);
+    overflow: hidden;
+  }
+
+  .proc-editor__view-btn {
+    background: none;
+    border: none;
+    color: var(--color-text-muted, #888);
+    font-size: 16px;
+    width: 30px;
+    height: 26px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.1s, color 0.1s;
+    padding: 0;
+  }
+
+  .proc-editor__view-btn:hover {
+    background: var(--alpha-10, rgba(255,255,255,0.08));
+    color: var(--color-text, #e8e8e8);
+  }
+
+  .proc-editor__view-btn--active {
+    background: var(--color-accent, #6366f1);
+    color: white;
+  }
+
+  /* ── Canvas wrapper ── */
+  .proc-editor__canvas-wrap {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+  }
+
+  /* ── List ── */
+  .proc-editor__list {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: var(--space-3, 12px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2, 8px);
+  }
+
+  .proc-editor__empty {
+    margin: var(--space-4, 16px) 0;
+    text-align: center;
+    font-size: var(--text-sm, 14px);
+    color: var(--color-text-subtle, #555);
+  }
+
+  /* ── Item ── */
+  .proc-editor__item {
+    background: var(--surface-2, #1e1e1e);
+    border: 1px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    padding: var(--space-3, 12px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2, 8px);
+    transition: border-color 0.15s;
+  }
+
+  .proc-editor__item:hover { border-color: color-mix(in srgb, var(--color-accent, #6366f1) 30%, var(--color-border, #2a2a2a)); }
+
+  .proc-editor__item--disabled {
+    opacity: 0.5;
+  }
+
+  .proc-editor__item-main {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3, 12px);
+  }
+
+  /* ── Info ── */
+  .proc-editor__item-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .proc-editor__name {
+    font-size: var(--text-sm, 14px);
+    font-weight: 600;
+    color: var(--color-text, #e8e8e8);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .proc-editor__desc {
+    font-size: var(--text-xs, 12px);
+    color: var(--color-text-muted, #888);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .proc-editor__name-input {
+    width: 100%;
+    background: transparent;
+    border: none;
+    border-bottom: 1.5px solid var(--color-accent, #6366f1);
+    outline: none;
+    color: var(--color-text, #e8e8e8);
+    font-family: inherit;
+    font-size: var(--text-sm, 14px);
+    font-weight: 600;
+    padding: 2px 0;
+  }
+
+  /* ── Icon buttons ── */
+  .proc-editor__item-actions {
+    display: flex;
+    gap: var(--space-1, 4px);
+    flex-shrink: 0;
+  }
+
+  .proc-editor__icon-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 15px;
+    padding: 4px;
+    border-radius: var(--radius-sm, 6px);
+    line-height: 1;
+    opacity: 0.6;
+    transition: opacity 0.1s, background 0.1s;
+  }
+
+  .proc-editor__icon-btn:hover {
+    opacity: 1;
+    background: var(--alpha-10, rgba(255,255,255,0.1));
+  }
+
+  .proc-editor__icon-btn--danger:hover {
+    background: color-mix(in srgb, var(--color-danger, #ef4444) 15%, transparent);
+  }
+
+  /* ── Meta chips ── */
+  .proc-editor__item-meta {
+    display: flex;
+    gap: var(--space-2, 8px);
+    padding-left: 60px; /* align with text after toggle */
+  }
+
+  .proc-editor__chip {
+    font-size: 11px;
+    color: var(--color-text-muted, #888);
+    background: var(--surface-1, #141414);
+    border: 1px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-full, 9999px);
+    padding: 2px 8px;
+    font-family: var(--font-mono, monospace);
+  }
+
+  /* ── Inline edit fields ── */
+  .proc-editor__item-fields {
+    display: flex;
+    gap: var(--space-3, 12px);
+    padding-left: 60px;
+    flex-wrap: wrap;
+  }
+
+  .proc-editor__field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1, 4px);
+    flex: 1;
+    min-width: 100px;
+  }
+
+  .proc-editor__field-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-subtle, #555);
+  }
+
+  .proc-editor__field-input {
+    background: var(--surface-1, #141414);
+    border: 1.5px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-sm, 6px);
+    padding: 4px var(--space-2, 8px);
+    color: var(--color-text, #e8e8e8);
+    font-family: inherit;
+    font-size: var(--text-sm, 14px);
+    outline: none;
+    transition: border-color 0.15s;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .proc-editor__field-input:focus {
+    border-color: var(--color-accent, #6366f1);
+  }
+
+  .proc-editor__field-input--narrow {
+    max-width: 80px;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { Procedure } from "./ProcedureEditor.types.js";
+interface Props {
+    procedures?: Procedure[];
+    /** Custom CSS class. */
+    class?: string;
+    /** Fired on any change with the full updated list. */
+    onchange?: (procedures: Procedure[]) => void;
+}
+declare const ProcedureEditor: import("svelte").Component<Props, {}, "procedures">;
+type ProcedureEditor = ReturnType<typeof ProcedureEditor>;
+export default ProcedureEditor;

package/dist/app/ProcedureEditor.types.js

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