signature: add systems map, command palette and motion primitives

Ship the Signature UX as standalone, SSR-safe pieces: bilingual copy, a dual SVG/list systems map, a Map-backed command palette in the shell, opt-in reveal and metric primitives, and a leak-free decorative canvas. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-25 17:37:25 +02:00
parent 9ea2885c7b
commit 7813499ee3
25 changed files with 2902 additions and 73 deletions
--- a/src/app/shared/systems-map/systems-map.scss
+++ b/src/app/shared/systems-map/systems-map.scss
@@ -0,0 +1,177 @@
+@use 'breakpoints' as bp;
+
+:host {
+  display: block;
+}
+
+.systems-map {
+  display: grid;
+  gap: var(--space-4);
+}
+
+.systems-map-heading,
+.systems-map-intro,
+.systems-map-kicker,
+.systems-map-readout {
+  margin: 0;
+}
+
+.systems-map-heading {
+  font-size: var(--text-xl);
+  line-height: var(--leading-tight);
+}
+
+.systems-map-intro,
+.systems-map-card-summary,
+.systems-map-card-relation,
+.systems-map-readout {
+  color: var(--color-text-muted);
+}
+
+.systems-map-kicker {
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--color-text-subtle);
+}
+
+.systems-map-figure {
+  display: none;
+}
+
+.systems-map-figure svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 1px solid var(--surface-glass-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-surface-raised);
+  background-image:
+    linear-gradient(var(--color-surface-muted) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-surface-muted) 1px, transparent 1px);
+  background-size: 1.5rem 1.5rem;
+}
+
+.systems-map-edge {
+  fill: none;
+  stroke: var(--color-accent-cool);
+  stroke-width: 1.25;
+  opacity: 0.7;
+  transition: opacity var(--duration-base) var(--ease-standard);
+}
+
+.systems-map-node {
+  color: var(--color-text);
+  outline: none;
+}
+
+.systems-map-node circle,
+.systems-map-node rect {
+  fill: var(--color-surface-overlay);
+  stroke: var(--color-accent);
+  stroke-width: 1.25;
+  transition:
+    opacity var(--duration-base) var(--ease-standard),
+    stroke var(--duration-fast) var(--ease-standard);
+}
+
+.systems-map-node[data-kind='project'] rect,
+.systems-map-legend [data-kind='project'] {
+  stroke: var(--color-accent-soft);
+}
+
+.systems-map-node[data-kind='ai'] circle,
+.systems-map-legend [data-kind='ai'] {
+  stroke: var(--color-accent-strong);
+}
+
+.systems-map-node text {
+  fill: currentColor;
+  font-size: 0.75rem;
+  text-anchor: middle;
+}
+
+.systems-map-node.is-connected circle,
+.systems-map-node.is-connected rect,
+.systems-map-edge.is-connected {
+  stroke: var(--color-accent-strong);
+  opacity: 1;
+}
+
+.systems-map-node.is-dimmed,
+.systems-map-edge.is-dimmed {
+  opacity: 0.55;
+}
+
+.systems-map-cards,
+.systems-map-legend {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.systems-map-cards {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.systems-map-cards a {
+  display: grid;
+  gap: var(--space-1);
+  padding: var(--space-4);
+  border: 1px solid var(--surface-glass-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-raised);
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.systems-map-card-label {
+  font-weight: 600;
+}
+
+.systems-map-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  font-size: var(--text-sm);
+}
+
+.systems-map-legend li {
+  padding-inline-start: var(--space-3);
+  border-inline-start: 2px solid var(--color-accent);
+}
+
+.systems-map-readout {
+  min-height: var(--text-md);
+  font-size: var(--text-sm);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .systems-map-node:hover circle,
+  .systems-map-node:hover rect {
+    stroke: var(--color-accent-strong);
+  }
+
+  .systems-map-cards a:hover {
+    border-color: var(--surface-glass-border-strong);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .systems-map-edge,
+  .systems-map-node circle,
+  .systems-map-node rect {
+    transition: none;
+  }
+}
+
+@include bp.respond-to(lg) {
+  .systems-map-figure {
+    display: block;
+  }
+
+  .systems-map-list {
+    display: none;
+  }
+}