feat(ui): add decorative style primitives

src/lib/ui/components/SignalTrace.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  let {
+    density = "regular",
+    orientation = "horizontal",
+    tone = "accent",
+  }: {
+    density?: "regular" | "tight";
+    orientation?: "horizontal" | "vertical";
+    tone?: "neutral" | "accent" | "warning";
+  } = $props();
+</script>
+
+<div
+  class="signal-trace"
+  data-density={density}
+  data-orientation={orientation}
+  data-tone={tone}
+  aria-hidden="true"
+>
+  <span class="signal-trace__rail"></span>
+  <span class="signal-trace__node" data-node="start"></span>
+  <span class="signal-trace__node" data-node="middle"></span>
+  <span class="signal-trace__node" data-node="end"></span>
+</div>
+
+<style>
+  .signal-trace {
+    --trace-color: var(--ui-color-accent);
+    --trace-track: min(100%, 20rem);
+    position: relative;
+    display: block;
+    width: 100%;
+    min-height: 1.5rem;
+  }
+
+  .signal-trace__rail {
+    position: absolute;
+    inset: 50% 0 auto;
+    height: 1px;
+    background:
+      linear-gradient(90deg, transparent, var(--trace-color) 18%, var(--trace-color) 82%, transparent),
+      linear-gradient(90deg, transparent 0 35%, rgba(255, 255, 255, 0.42) 35% 38%, transparent 38%);
+  }
+
+  .signal-trace__node {
+    position: absolute;
+    top: 50%;
+    width: 0.55rem;
+    height: 0.55rem;
+    border: 1px solid var(--trace-color);
+    background: var(--ui-color-canvas);
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  .signal-trace__node[data-node="start"] {
+    left: 18%;
+  }
+
+  .signal-trace__node[data-node="middle"] {
+    left: 50%;
+  }
+
+  .signal-trace__node[data-node="end"] {
+    left: 82%;
+  }
+
+  .signal-trace[data-density="tight"] {
+    min-height: 0.95rem;
+  }
+
+  .signal-trace[data-density="tight"] .signal-trace__node {
+    width: 0.38rem;
+    height: 0.38rem;
+  }
+
+  .signal-trace[data-orientation="vertical"] {
+    width: 1.5rem;
+    min-height: 12rem;
+  }
+
+  .signal-trace[data-orientation="vertical"] .signal-trace__rail {
+    inset: 0 auto 0 50%;
+    width: 1px;
+    height: auto;
+    background:
+      linear-gradient(180deg, transparent, var(--trace-color) 18%, var(--trace-color) 82%, transparent),
+      linear-gradient(180deg, transparent 0 35%, rgba(255, 255, 255, 0.42) 35% 38%, transparent 38%);
+  }
+
+  .signal-trace[data-orientation="vertical"] .signal-trace__node[data-node="start"] {
+    top: 18%;
+    left: 50%;
+  }
+
+  .signal-trace[data-orientation="vertical"] .signal-trace__node[data-node="middle"] {
+    top: 50%;
+    left: 50%;
+  }
+
+  .signal-trace[data-orientation="vertical"] .signal-trace__node[data-node="end"] {
+    top: 82%;
+    left: 50%;
+  }
+
+  .signal-trace[data-tone="neutral"] {
+    --trace-color: var(--ui-color-line-strong);
+  }
+
+  .signal-trace[data-tone="warning"] {
+    --trace-color: var(--ui-color-warning);
+  }
+</style>