A LITTLE SPACE TO MAKE SOMETHING
Go with your own flow.

What this showsAn editable graph, thoughtful guardrails, and a local assistant. Nothing leaves this tab unless you ask or share.
Field notes
Untitled possibility6 nodes · 4 edges
inputA spark of an idea
Good things start small
transformFind the shape
Turn a thought into something tangible
branchDoes it feel right?
Leave room for a second look
yesno
sinkLet it into the world
A little more considered
sinkKeep exploring
Not a dead end. A new beginning.
noteMade to be understood
Color has meaning. Space gives ideas room to breathe.
Svelte Flow
Drag a node. Connect a handle. Follow an idea.
A little space to explore. Your changes stay in this tab until you share a link.
Click source then target handles to connect · Shift to multiselect · Ctrl/Cmd+Z to undoLocal by default. Portable by design.
Under the hood SVELTE 5View source
src/routes/craft/+page.svelte
<script lang="ts">
  import { onMount } from 'svelte';
  import { SvelteFlow, Background, Controls, MiniMap, Panel, type Connection, type NodeTypes } from '@xyflow/svelte';
  import { createDemoGraph, createNode, createEdge, NODE_KINDS, EDGE_KINDS, type NodeKind, type EdgeKind, type FlowGraph, type FlowNode, type FlowEdge, type JsonValue } from '$lib/flow/graph';
  import { layout } from '$lib/flow/layout';
  import { validateGraph, validateConnection } from '$lib/flow/validate';
  import { encodeShare, decodeShare, SHARE_MAX_BYTES } from '$lib/flow/share';
  import ShowcaseHeader from '$lib/components/ShowcaseHeader.svelte';
  import StudioNode from '$lib/components/StudioNode.svelte';
  import FlowViewport from '$lib/components/FlowViewport.svelte';
  import SourcePanel from '$lib/components/SourcePanel.svelte';
  import Icon from '$lib/components/Icon.svelte';
  import AssistantBubble from '$lib/components/assistant/AssistantBubble.svelte';
  import source from './+page.svelte?raw';

  const nodeTypes: NodeTypes = { input: StudioNode, transform: StudioNode, branch: StudioNode, sink: StudioNode, note: StudioNode };
  const initial = createDemoGraph('craft');
  let nodes = $state.raw<FlowNode[]>(initial.nodes);
  let edges = $state.raw<FlowEdge[]>(initial.edges);
  let past = $state.raw<FlowGraph[]>([]);
  let future = $state.raw<FlowGraph[]>([]);
  let nodeKind = $state<NodeKind>('transform');
  let edgeKind = $state<EdgeKind>('data');
  let direction = $state<'LR' | 'TB'>('LR');
  let message = $state('A little space to explore. Your changes stay in this tab until you share a link.');
  let messageIsError = $state(false);
  let fitRevision = $state(0);
  let nextId = 1;
  let draftTitle = $state('');
  let draftSubtitle = $state('');
  let draftParams = $state('{}');
  let inspectorError = $state('');
  let shareDialog: HTMLDialogElement;
  let shareUrl = $state('');
  let shareError = $state('');
  let shareCopied = $state(false);
  const selectedNode = $derived(nodes.find((node) => node.selected));
  const selectedCount = $derived(nodes.filter((node) => node.selected).length + edges.filter((edge) => edge.selected).length);

  $effect(() => {
    draftTitle = selectedNode?.data.title ?? '';
    draftSubtitle = selectedNode?.data.subtitle ?? '';
    draftParams = JSON.stringify(selectedNode?.data.params ?? {}, null, 2);
    inspectorError = '';
  });

  function snapshot(): FlowGraph { return structuredClone({ nodes, edges }); }
  function checkpoint() {
    past = [...past.slice(-79), snapshot()];
    future = [];
  }
  function announce(text: string, error = false) { message = text; messageIsError = error; }
  function commit(graph: FlowGraph, text: string, fit = false) {
    checkpoint();
    nodes = graph.nodes;
    edges = graph.edges;
    announce(text);
    if (fit) fitRevision += 1;
  }
  function undo() {
    const previous = past.at(-1);
    if (!previous) return;
    future = [snapshot(), ...future].slice(0, 80);
    past = past.slice(0, -1);
    nodes = previous.nodes;
    edges = previous.edges;
    announce('Last change undone.');
  }
  function redo() {
    const next = future[0];
    if (!next) return;
    past = [...past.slice(-79), snapshot()];
    future = future.slice(1);
    nodes = next.nodes;
    edges = next.edges;
    announce('Change restored.');
  }
  function addNode() {
    let id: string;
    do { id = `craft-${nodeKind}-${nextId++}`; } while (nodes.some((node) => node.id === id));
    const node = createNode(id, nodeKind, nodeKind === 'note' ? 'A thought worth keeping' : `New ${nodeKind}`, {
      x: (nodes.length % 4) * 270,
      y: 120 + Math.floor(nodes.length / 4) * 190
    }, { subtitle: nodeKind === 'note' ? 'Add a little context.' : 'Make this step your own.' });
    commit({ nodes: [...nodes.map((item) => ({ ...item, selected: false })), { ...node, selected: true }], edges }, `Added a ${nodeKind} node. Edit its details in the inspector.`, true);
  }
  function removeSelected() {
    if (!selectedCount) return;
    const ids = new Set(nodes.filter((node) => node.selected).map((node) => node.id));
    commit({ nodes: nodes.filter((node) => !ids.has(node.id)), edges: edges.filter((edge) => !edge.selected && !ids.has(edge.source) && !ids.has(edge.target)) }, 'Selection removed. Undo is always a click away.');
  }
  function applyDetails(event: SubmitEvent) {
    event.preventDefault();
    if (!selectedNode) return;
    const title = draftTitle.trim();
    if (!title) { inspectorError = 'Give this node a title first.'; return; }
    let params: Record<string, JsonValue>;
    try {
      const parsed: unknown = JSON.parse(draftParams);
      if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) throw new Error('Expected an object');
      params = parsed as Record<string, JsonValue>;
    } catch { inspectorError = 'Parameters must be a valid JSON object, for example {"retries": 2}.'; return; }
    const id = selectedNode.id;
    const candidate = { nodes: nodes.map((node) => node.id === id ? { ...node, data: { ...node.data, title, subtitle: draftSubtitle.trim(), params } } : node), edges };
    const validation = validateGraph(candidate.nodes, candidate.edges);
    if (!validation.ok) { inspectorError = validation.message; return; }
    commit(candidate, 'Node details saved.');
  }
  function checkConnection(connection: FlowEdge | Connection) {
    const result = validateConnection({ ...connection, kind: edgeKind }, nodes, edges);
    if (!result.ok) announce(`${result.code}: ${result.message}`, true);
    return result.ok;
  }
  function beforeConnect(connection: Connection) {
    const result = validateConnection({ ...connection, kind: edgeKind }, nodes, edges);
    if (!result.ok) { announce(`${result.code}: ${result.message}`, true); return false; }
    checkpoint();
    let id: string;
    do { id = `craft-edge-${nextId++}`; } while (edges.some((edge) => edge.id === id));
    return createEdge(id, connection.source, connection.target, edgeKind, { sourceHandle: connection.sourceHandle, targetHandle: connection.targetHandle });
  }
  function autoLayout() {
    commit({ nodes: layout(nodes, edges, { direction, layerGap: 110, nodeGap: 70, nodeWidth: 208, nodeHeight: 108 }), edges }, `Arranged ${nodes.length} nodes ${direction === 'LR' ? 'left to right' : 'top to bottom'}.`, true);
  }
  function inspectGraph() {
    const result = validateGraph(nodes, edges);
    announce(result.ok ? `Graph checks passed: ${nodes.length} nodes, ${edges.length} edges.` : `${result.code}: ${result.message}`, !result.ok);
  }
  function reset() { commit(createDemoGraph('craft'), 'Starting canvas restored. You can undo this too.', true); }
  function applyAssistant(graph: FlowGraph) { commit(graph, 'Assistant changes applied. Your previous canvas is in undo history.', true); }
  function share() {
    const result = encodeShare({ nodes, edges });
    shareCopied = false;
    shareUrl = 'error' in result ? '' : `${location.origin}/craft#${result.value}`;
    shareError = 'error' in result ? `share_invalid: this graph cannot fit in a safe share link. Check the graph or reduce it below the ${SHARE_MAX_BYTES / 1024} KiB limit.` : '';
    shareDialog.showModal();
  }
  async function copyShare() {
    try { await navigator.clipboard.writeText(shareUrl); shareCopied = true; }
    catch { shareError = 'Clipboard access is unavailable. Select the link above and copy it manually.'; }
  }

  onMount(() => {
    function loadHash() {
      if (!location.hash) return;
      const decoded = decodeShare(location.hash);
      if ('error' in decoded) { announce('share_invalid: this link is malformed, too large, or contains an invalid graph. Your current canvas was kept.', true); return; }
      commit(decoded, 'Shared canvas loaded. You are working on your own local copy.', true);
    }
    function shortcuts(event: KeyboardEvent) {
      const target = event.target as HTMLElement;
      if (target.closest('input, textarea, select, [contenteditable="true"], dialog, [role="dialog"]')) return;
      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z') {
        event.preventDefault();
        if (event.shiftKey) redo(); else undo();
      } else if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'y') {
        event.preventDefault(); redo();
      } else if (target.closest('.svelte-flow__node') && ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
        if (!event.repeat) checkpoint();
      }
    }
    loadHash();
    window.addEventListener('hashchange', loadHash);
    window.addEventListener('keydown', shortcuts, true);
    return () => { window.removeEventListener('hashchange', loadHash); window.removeEventListener('keydown', shortcuts, true); };
  });
</script>

<svelte:head><title>Craft · Your ideas, connected · sflw</title><meta name="description" content="A real Svelte Flow playground with editable nodes, guarded connections, undo and redo, a deterministic local assistant, and portable share links." /></svelte:head>
<ShowcaseHeader active="craft" />
<main id="main-content" class="craft-main">
  <header class="craft-heading"><div><div class="eyebrow">A LITTLE SPACE TO MAKE SOMETHING</div><h1>Go with your own flow.</h1><p><span>What this shows</span>An editable graph, thoughtful guardrails, and a local assistant. Nothing leaves this tab unless you ask or share.</p></div><a href="https://wiki.sflw.loca.zone/demos#craft" target="_blank" rel="noreferrer" class="field-notes"><Icon name="book" size={16} />Field notes<Icon name="external" size={12} /></a></header>
  <div class="craft-workspace">
    <div class="craft-toolbar">
      <div class="add-controls"><label class="sr-only" for="node-kind">Node kind</label><select id="node-kind" class="select select-sm" bind:value={nodeKind}>{#each NODE_KINDS as kind}<option value={kind}>{kind}</option>{/each}</select><button class="btn btn-primary btn-sm" onclick={addNode}><Icon name="plus" size={15} />Add node</button></div>
      <span class="toolbar-divider"></span>
      <div class="history-controls"><button class="btn btn-ghost btn-sm btn-square" onclick={undo} disabled={!past.length} aria-label="Undo" title="Undo · Ctrl/Cmd+Z"><Icon name="undo" size={17} /></button><button class="btn btn-ghost btn-sm btn-square" onclick={redo} disabled={!future.length} aria-label="Redo" title="Redo · Ctrl/Cmd+Shift+Z"><Icon name="redo" size={17} /></button></div>
      <button class="btn btn-ghost btn-sm delete-button" onclick={removeSelected} disabled={!selectedCount} aria-label="Delete selection" title="Delete selection"><Icon name="trash" size={16} /></button>
      <div class="layout-controls"><label class="sr-only" for="direction">Layout direction</label><select id="direction" class="select select-sm" bind:value={direction}><option value="LR">Horizontal</option><option value="TB">Vertical</option></select><button class="btn btn-ghost btn-sm" onclick={autoLayout}><Icon name="layout" size={16} /><span>Auto layout</span></button></div>
      <button class="btn btn-outline btn-sm share-button" onclick={share}><Icon name="share" size={15} />Share</button>
    </div>
    <div class="craft-body">
      <section class="canvas-section" aria-label="Editable craft canvas">
        <div class="canvas-title"><span><span class="live-dot"></span>Untitled possibility</span><span>{nodes.length} nodes <i>·</i> {edges.length} edges</span></div>
        <div class="craft-canvas">
          <SvelteFlow bind:nodes bind:edges {nodeTypes} fitView minZoom={0.15} maxZoom={2} fitViewOptions={{ padding: 0.2, maxZoom: 0.9 }} isValidConnection={checkConnection} onbeforeconnect={beforeConnect} onconnect={() => announce(`${edgeKind} connection added.`)} onnodedragstart={checkpoint} onnodedragstop={() => announce('Node moved.')} onselectiondragstart={checkpoint} onbeforedelete={async () => { checkpoint(); return true; }} ondelete={() => announce('Selection deleted.')} deleteKey={['Backspace', 'Delete']} colorMode="system" clickConnect>
            <Background gap={20} size={1} />
            <Controls showLock={false} />
            <MiniMap pannable zoomable nodeColor={(node) => node.type === 'branch' ? '#c8a45e' : node.type === 'input' ? '#69a795' : node.type === 'sink' ? '#7497bb' : '#a491d6'} />
            <Panel position="top-left"><div class="canvas-hint">Drag a node. Connect a handle. Follow an idea.</div></Panel>
            <FlowViewport revision={fitRevision} />
          </SvelteFlow>
        </div>
        <div class="canvas-status" class:error={messageIsError} role="status"><span class="status-dot"></span><span>{message}</span></div>
      </section>
      <aside class="craft-inspector" aria-label="Graph inspector">
        <div class="inspector-header"><Icon name={selectedNode?.type ?? 'interaction'} size={16} /><h2>{selectedNode ? 'Node details' : 'Make it yours'}</h2>{#if selectedNode}<span class="badge badge-sm badge-ghost">{selectedNode.type}</span>{/if}</div>
        {#if selectedNode}
          <form onsubmit={applyDetails} class="inspector-form">
            <label class="field"><span>Title</span><input class="input input-sm" bind:value={draftTitle} maxlength="200" required /></label>
            <label class="field"><span>A little context</span><textarea class="textarea textarea-sm" bind:value={draftSubtitle} rows="2" maxlength="1000"></textarea></label>
            <label class="field"><span>Parameters <small>JSON</small></span><textarea class="textarea textarea-sm params-editor" bind:value={draftParams} rows="6" spellcheck="false"></textarea></label>
            {#if inspectorError}<p class="inspector-error" role="alert">{inspectorError}</p>{/if}
            <button class="btn btn-sm btn-outline save-button" type="submit">Save details<Icon name="check" size={14} /></button>
            <span class="node-id">{selectedNode.id}</span>
          </form>
        {:else}
          <div class="inspector-empty"><span class="empty-icon"><Icon name="nodes" size={28} /></span><h3>Every node has a story.</h3><p>Select one on the canvas to edit its title, context, and parameters. Or add a new one above.</p></div>
        {/if}
        <div class="connection-settings"><label class="field"><span>New connections</span><select class="select select-sm" bind:value={edgeKind}>{#each EDGE_KINDS as kind}<option value={kind}>{kind}</option>{/each}</select></label><p>Data carries information. Control sets the sequence. Error marks the other path.</p></div>
        <div class="inspector-actions"><button class="btn btn-ghost btn-sm" onclick={inspectGraph}><Icon name="check" size={14} />Check graph</button><button class="btn btn-ghost btn-sm" onclick={reset}>Reset canvas</button></div>
        <p class="assistant-tip"><span class="tip-dot"></span>Need a nudge? Open the assistant in the corner. It proposes changes; you decide what lands.</p>
      </aside>
    </div>
  </div>
  <div class="craft-footnotes"><span>Click source then target handles to connect · Shift to multiselect · Ctrl/Cmd+Z to undo</span><span>Local by default. Portable by design.</span></div>
  <SourcePanel {source} filename="src/routes/craft/+page.svelte" />
</main>
<AssistantBubble graph={{ nodes, edges }} onApply={applyAssistant} onUndo={undo} onShare={share} />

<dialog bind:this={shareDialog} class="modal share-modal">
  <div class="modal-box">
    <form method="dialog"><button class="btn btn-sm btn-circle btn-ghost modal-close" aria-label="Close share dialog"><Icon name="close" size={18} /></button></form>
    <span class="share-icon"><Icon name="share" size={24} /></span><h2>A link to your thinking.</h2><p>Your graph lives in the URL fragment, not a server database. Anyone with this link can open their own copy.</p>
    {#if shareUrl}<label class="field"><span>Share link</span><textarea class="textarea share-link" value={shareUrl} readonly rows="3" onclick={(event) => event.currentTarget.select()}></textarea></label><button class="btn btn-primary copy-share" onclick={copyShare}><Icon name={shareCopied ? 'check' : 'copy'} size={16} />{shareCopied ? 'Link copied' : 'Copy share link'}</button>{/if}
    {#if shareError}<p class="share-error" role="alert">{shareError}</p>{/if}
    <p class="share-caution">Keep secrets out of node data. A shared link is a copy, not a private workspace.</p>
  </div>
  <form method="dialog" class="modal-backdrop"><button>Close</button></form>
</dialog>

<style>
  .craft-main { width: min(1280px, calc(100% - 64px)); margin: 0 auto; padding: 37px 0 95px; }
  .craft-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
  .eyebrow { color: var(--accent); font-size: 8px; font-weight: 680; letter-spacing: .12em; }
  h1 { margin: 12px 0 13px; font-size: clamp(29px, 3.2vw, 40px); font-weight: 640; letter-spacing: -1.4px; line-height: 1.15; color: var(--ink); }
  .craft-heading p { margin: 0; max-width: 800px; line-height: 1.8; font-size: 12px; color: var(--muted); }
  .craft-heading p > span { font-size: 9px; text-transform: uppercase; font-weight: 650; letter-spacing: .05em; color: var(--ink); margin-right: 9px; }
  .field-notes { display: flex; align-items: center; gap: 7px; flex-shrink: 0; font-size: 11px; color: var(--muted); text-decoration: none; }
  .craft-workspace { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; box-shadow: 0 6px 30px color-mix(in srgb, var(--ink) 3%, transparent); }
  .craft-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .add-controls, .history-controls, .layout-controls { display: flex; align-items: center; gap: 6px; }
  .craft-toolbar :global(.btn) { font-size: 10px; font-weight: 560; border-radius: 7px; gap: 7px; }
  .craft-toolbar :global(.select) { font-size: 10px; border-color: var(--line); border-radius: 7px; min-width: 106px; background-color: var(--surface); }
  .toolbar-divider { width: 1px; height: 22px; background: var(--line); margin: 0 5px; }
  .layout-controls { margin-left: 4px; }
  .share-button { margin-left: auto; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
  .craft-body { display: grid; grid-template-columns: minmax(0, 1fr) 246px; }
  .canvas-section { min-width: 0; }
  .canvas-title { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; color: var(--muted); font-size: 9px; border-bottom: 1px solid var(--line); }
  .canvas-title > span:first-child { display: flex; gap: 7px; align-items: center; font-weight: 600; color: var(--ink); }
  .canvas-title i { font-style: normal; margin: 0 5px; }
  .live-dot { height: 5px; width: 5px; border-radius: 50%; background: #59a78b; }
  .craft-canvas { height: 585px; background: var(--surface-2); }
  .craft-canvas :global(.svelte-flow) { --xy-background-color: var(--surface-2); --xy-background-pattern-dots-color: color-mix(in srgb, var(--muted) 28%, transparent); --xy-controls-button-background-color: var(--surface); --xy-controls-button-background-color-hover: var(--accent-soft); --xy-controls-button-color: var(--muted); --xy-controls-button-border-color: var(--line); --xy-minimap-background-color: var(--surface); --xy-minimap-mask-background-color: color-mix(in srgb, var(--surface-2) 75%, transparent); }
  .craft-canvas :global(.svelte-flow__controls), .craft-canvas :global(.svelte-flow__minimap) { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: 0 3px 12px #00000005; }
  .craft-canvas :global(.svelte-flow__attribution) { font-size: 8px; background: var(--surface); color: var(--muted); }
  .canvas-hint { color: var(--muted); font-size: 9px; padding: 3px; }
  .canvas-status { min-height: 43px; display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--muted); font-size: 10px; line-height: 1.6; border-top: 1px solid var(--line); }
  .status-dot { width: 4px; height: 4px; border-radius: 50%; background: #59a78b; flex-shrink: 0; }
  .canvas-status.error { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 4%, var(--surface)); }
  .canvas-status.error .status-dot { background: var(--color-error); }
  .craft-inspector { border-left: 1px solid var(--line); min-width: 0; }
  .inspector-header { display: flex; align-items: center; gap: 7px; padding: 14px 16px; color: var(--muted); border-bottom: 1px solid var(--line); }
  .inspector-header h2 { font-size: 11px; font-weight: 650; color: var(--ink); margin: 0; }
  .inspector-header .badge { margin-left: auto; font-size: 8px; }
  .inspector-form { padding: 17px; display: grid; gap: 14px; }
  .field { display: grid; gap: 7px; min-width: 0; }
  .field > span { color: var(--muted); font-size: 10px; font-weight: 560; display: flex; justify-content: space-between; }
  .field small { font-size: 8px; opacity: .7; letter-spacing: .07em; }
  .field :global(.input), .field :global(.textarea), .field :global(.select) { width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px; font-size: 11px; }
  .field :global(.textarea) { resize: vertical; line-height: 1.7; }
  .params-editor { font-family: ui-monospace, monospace; font-size: 10px !important; }
  .save-button { font-size: 10px; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 6px; }
  .node-id { color: var(--muted); opacity: .55; font-size: 8px; overflow-wrap: anywhere; }
  .inspector-error { font-size: 10px; line-height: 1.6; color: var(--color-error); margin: 0; }
  .inspector-empty { padding: 31px 20px; text-align: center; }
  .empty-icon { display: grid; place-items: center; width: 53px; height: 53px; margin: 0 auto 17px; background: var(--accent-soft); border-radius: 14px; color: var(--accent); }
  .inspector-empty h3 { margin: 0 0 9px; color: var(--ink); font-size: 12px; font-weight: 600; }
  .inspector-empty p { font-size: 10px; line-height: 1.9; color: var(--muted); margin: 0; }
  .connection-settings { border-top: 1px solid var(--line); padding: 17px; }
  .connection-settings p { color: var(--muted); font-size: 9px; line-height: 1.8; margin: 11px 0 0; }
  .inspector-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 15px; }
  .inspector-actions .btn { font-size: 9px; color: var(--muted); padding: 0 6px; }
  .assistant-tip { display: flex; gap: 8px; color: var(--muted); font-size: 9px; line-height: 1.9; background: var(--surface-2); border-top: 1px solid var(--line); padding: 17px; margin: 0; }
  .tip-dot { height: 5px; width: 5px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; }
  .craft-footnotes { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 9px; line-height: 1.7; margin: 15px 2px 23px; }
  .share-modal .modal-box { position: relative; border: 1px solid var(--line); background: var(--surface); border-radius: 17px; padding: 28px; width: calc(100% - 32px); max-width: 480px; }
  .modal-close { position: absolute; top: 12px; right: 12px; color: var(--muted); }
  .share-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--accent); border-radius: 13px; background: var(--accent-soft); margin-bottom: 20px; }
  .share-modal h2 { color: var(--ink); font-size: 25px; letter-spacing: -.8px; font-weight: 630; margin: 0 0 11px; }
  .share-modal p { color: var(--muted); font-size: 12px; line-height: 1.8; }
  .share-modal .field { margin: 21px 0 16px; }
  .share-link { font-family: ui-monospace, monospace; font-size: 10px !important; word-break: break-all; }
  .copy-share { width: 100%; font-size: 12px; border-radius: 8px; }
  .share-modal .share-caution { font-size: 10px; margin: 20px 0 0; }
  .share-modal .share-error { color: var(--color-error); font-size: 11px; overflow-wrap: anywhere; }
  @media (max-width: 1000px) { .craft-body { grid-template-columns: minmax(0, 1fr) 220px; } .craft-toolbar { padding: 10px; } .layout-controls { margin-left: 0; } .layout-controls .select { min-width: 95px; } .craft-canvas { height: 565px; } }
  @media (max-width: 760px) { .craft-main { width: calc(100% - 32px); padding-top: 27px; } .craft-heading { gap: 10px; align-items: flex-start; } .field-notes { font-size: 0; margin-top: 5px; gap: 5px; } .craft-heading p { font-size: 11px; } .craft-toolbar { gap: 6px; } .toolbar-divider { display: none; } .layout-controls { flex: 1; } .share-button { margin-left: 0; } .craft-body { grid-template-columns: minmax(0, 1fr); } .craft-canvas { height: 475px; } .craft-inspector { border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; } .inspector-header { grid-column: 1/-1; } .inspector-form { grid-column: 1/-1; grid-template-columns: 1fr 1fr; } .inspector-form > .field:nth-child(3) { grid-column: 1/-1; } .inspector-empty { grid-column: 1/-1; padding: 24px; } .connection-settings { border-top: 0; } .inspector-actions { align-items: center; padding-top: 16px; } .assistant-tip { grid-column: 1/-1; } .craft-canvas :global(.svelte-flow__minimap) { width: 110px; height: 80px; } }
  @media (max-width: 430px) { h1 { font-size: 31px; max-width: 310px; } .craft-toolbar :global(.select) { min-width: 96px; } .layout-controls { flex-basis: calc(100% - 76px); } .share-button { margin-left: auto; } .canvas-title { padding: 12px; font-size: 8px; } .canvas-hint { font-size: 8px; } .canvas-status { font-size: 9px; padding: 11px 12px; } .craft-canvas { height: 460px; } .craft-inspector { grid-template-columns: 1fr; } .inspector-form { grid-template-columns: 1fr; } .inspector-form > .field:nth-child(3) { grid-column: auto; } .connection-settings { border-top: 1px solid var(--line); } .inspector-actions { padding-top: 0; } .craft-footnotes { font-size: 8px; } }
</style>
The actual route source, imported with ?raw. Shared components and graph utilities live in src/lib.