chore: rename @nodes -> @nodarium for everything

app/src/lib/graph-interface/components/HelpView.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import type { NodeDefinition, NodeRegistry } from "@nodarium/types";
+  import { onMount } from "svelte";
+
+  let mx = $state(0);
+  let my = $state(0);
+
+  let node: NodeDefinition | undefined = $state(undefined);
+  let input: string | undefined = $state(undefined);
+
+  let wrapper: HTMLDivElement;
+  type Props = { registry: NodeRegistry };
+  const { registry }: Props = $props();
+
+  let width = $state(0);
+
+  function handleMouseOver(ev: MouseEvent) {
+    let target = ev.target as HTMLElement | null;
+    mx = ev.clientX;
+    my = ev.clientY;
+    if (!target) return;
+
+    const closest = target?.closest?.("[data-node-type]");
+
+    if (!closest) {
+      node = undefined;
+      return;
+    }
+
+    let nodeType = closest.getAttribute("data-node-type");
+    let nodeInput = closest.getAttribute("data-node-input");
+
+    if (!nodeType) {
+      node = undefined;
+      return;
+    }
+    node = registry.getNode(nodeType);
+    input = nodeInput || undefined;
+  }
+
+  onMount(() => {
+    const style = wrapper.parentElement?.style;
+    style?.setProperty("cursor", "help");
+    return () => {
+      style?.removeProperty("cursor");
+    };
+  });
+</script>
+
+<svelte:window onmousemove={handleMouseOver} />
+
+<div
+  class="help-wrapper p-4"
+  class:visible={node}
+  bind:clientWidth={width}
+  style="--my:{my}px; --mx:{Math.min(mx, window.innerWidth - width - 20)}px;"
+  bind:this={wrapper}
+>
+  <p class="m-0 text-light opacity-40 flex items-center gap-3 mb-4">
+    <span class="i-tabler-help block w-4 h-4"></span>
+    {node?.id.split("/").at(-1) || "Help"}
+    {#if input}
+      <span>> {input}</span>
+    {/if}
+  </p>
+  {#if node}
+    <div class="mb-4">
+      {#if input}
+        {node?.inputs?.[input]?.description || input}
+      {:else if node?.meta?.description}
+        {node?.meta?.description}
+      {:else}
+        <div class="text-xs opacity-30 mb-4">{node.id}</div>
+      {/if}
+    </div>
+
+    {#if !input}
+      <div>
+        <span class="i-tabler-arrow-right opacity-30">-></span>
+        {node?.outputs?.map((o) => o).join(", ") ?? "nothing"}
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .help-wrapper {
+    position: fixed;
+    pointer-events: none;
+    transform: translate(var(--mx), var(--my));
+    background: var(--layer-1);
+    border-radius: 5px;
+    top: 10px;
+    left: 10px;
+    max-width: 250px;
+    border: 1px solid var(--outline);
+    z-index: 10000;
+    display: none;
+  }
+
+  .visible {
+    display: block;
+  }
+</style>