@acta-dev/web 1.0.0

package/src/components/ThemeToggle.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useRef, useState } from "react";
+
+type Pref = "system" | "light" | "dark";
+
+const STORAGE_KEY = "acta-theme";
+
+function resolveTheme(pref: Pref): "light" | "dark" {
+  if (pref !== "system") return pref;
+  return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+function readPref(): Pref {
+  if (typeof window === "undefined") return "system";
+  const raw = window.localStorage.getItem(STORAGE_KEY);
+  return raw === "light" || raw === "dark" || raw === "system" ? raw : "system";
+}
+
+function applyPref(pref: Pref): void {
+  const resolved = resolveTheme(pref);
+  document.documentElement.dataset.theme = resolved;
+  document.documentElement.dataset.themePref = pref;
+}
+
+const SYMBOLS: Record<Pref, string> = { system: "◐", light: "☀", dark: "☾" };
+const OPTIONS: Pref[] = ["system", "light", "dark"];
+
+type Props = {
+  labels: { legend: string; system: string; light: string; dark: string };
+};
+
+export default function ThemeToggle({ labels }: Props) {
+  const [pref, setPref] = useState<Pref>("system");
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setPref(readPref());
+  }, []);
+
+  useEffect(() => {
+    if (pref !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => applyPref("system");
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [pref]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (event: MouseEvent) => {
+      if (!dropdownRef.current?.contains(event.target as Node)) setOpen(false);
+    };
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const update = (next: Pref) => {
+    setPref(next);
+    setOpen(false);
+    window.localStorage.setItem(STORAGE_KEY, next);
+    applyPref(next);
+  };
+
+  return (
+    <div className="theme-control">
+      {/* Expanded sidebar: inline circular toggle */}
+      <fieldset className="ui-theme-toggle" aria-label={labels.legend}>
+        <legend>{labels.legend}</legend>
+        {OPTIONS.map((value) => (
+          <label key={value}>
+            <input
+              type="radio"
+              name="acta-theme"
+              value={value}
+              checked={pref === value}
+              onChange={() => update(value)}
+            />
+            <span title={labels[value]}>
+              <span className="sr-only">{labels[value]}</span>
+              <span aria-hidden="true">{SYMBOLS[value]}</span>
+            </span>
+          </label>
+        ))}
+      </fieldset>
+
+      {/* Collapsed sidebar: dropdown (mirrors the language switcher) */}
+      <div className="theme-dropdown" ref={dropdownRef}>
+        <button
+          type="button"
+          className="theme-trigger"
+          aria-label={labels.legend}
+          aria-haspopup="listbox"
+          aria-expanded={open}
+          onClick={() => setOpen((value) => !value)}
+        >
+          <span aria-hidden="true">{SYMBOLS[pref]}</span>
+        </button>
+        {open && (
+          <div className="theme-menu" role="listbox" aria-label={labels.legend}>
+            {OPTIONS.map((value) => (
+              <button
+                key={value}
+                type="button"
+                role="option"
+                aria-selected={pref === value}
+                className={pref === value ? "is-active" : ""}
+                onClick={() => update(value)}
+              >
+                <span className="sym" aria-hidden="true">
+                  {SYMBOLS[value]}
+                </span>
+                <span className="name">{labels[value]}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/graph/DocumentGraphIsland.tsx

@@ -0,0 +1,226 @@
+import {
+  Background,
+  BackgroundVariant,
+  Controls,
+  type Edge,
+  type EdgeChange,
+  MiniMap,
+  type Node,
+  type NodeChange,
+  ReactFlow,
+  ReactFlowProvider,
+} from "@xyflow/react";
+import type React from "react";
+import { useCallback, useMemo, useState } from "react";
+import "@xyflow/react/dist/style.css";
+import "./graph.css";
+
+import type { DocumentGraph } from "@acta-dev/core";
+import type { FilterOptions } from "@lib/documents.js";
+import { GraphContext } from "./GraphContext.js";
+import { computeLayout } from "./layout.js";
+import { nodeTypes } from "./nodes.js";
+
+type GraphLabels = {
+  filtersLegend: string;
+  filterKind: string;
+  filterStatus: string;
+  all: string;
+  areaLabel: string;
+  legendLabel: string;
+  legendDependency: string;
+  legendRelated: string;
+  legendSupersession: string;
+};
+
+type Props = {
+  graph: DocumentGraph;
+  filterOptions: FilterOptions;
+  hrefForId: Record<string, string>;
+  labels: GraphLabels;
+};
+
+export default function DocumentGraphIsland({ graph, filterOptions, hrefForId, labels }: Props) {
+  const [kindFilter, setKindFilter] = useState("");
+  const [statusFilter, setStatusFilter] = useState("");
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  const { nodes: layoutNodes, edges: layoutEdges } = useMemo(() => computeLayout(graph), [graph]);
+
+  const visibleNodeIds = useMemo(() => {
+    const ids = new Set<string>();
+    for (const node of graph.nodes) {
+      const kindMatch = !kindFilter || node.kind === kindFilter;
+      const statusMatch = !statusFilter || node.status === statusFilter;
+      if (kindMatch && statusMatch) ids.add(node.id);
+    }
+    return ids;
+  }, [graph.nodes, kindFilter, statusFilter]);
+
+  // Stable nodes — does NOT depend on selectedId, so hover never rebuilds this
+  const nodes: Node[] = useMemo(() => {
+    return layoutNodes.map((node) => ({
+      ...node,
+      hidden: !visibleNodeIds.has(node.id),
+      data: {
+        ...node.data,
+        href: hrefForId[node.id],
+      },
+    }));
+  }, [layoutNodes, visibleNodeIds, hrefForId]);
+
+  const connectedIds = useMemo((): Set<string> => {
+    if (!selectedId) return new Set();
+    const ids = new Set<string>([selectedId]);
+    for (const edge of graph.edges) {
+      if (edge.source === selectedId) ids.add(edge.target);
+      if (edge.target === selectedId) ids.add(edge.source);
+    }
+    return ids;
+  }, [selectedId, graph.edges]);
+
+  // Edges update on selectedId change — acceptable since edges are cheap SVG paths
+  const edges: Edge[] = useMemo(() => {
+    return layoutEdges.map((edge) => {
+      const sourceHidden = !visibleNodeIds.has(edge.source);
+      const targetHidden = !visibleNodeIds.has(edge.target);
+      const isActive =
+        selectedId !== null && (edge.source === selectedId || edge.target === selectedId);
+      const isDimmed = selectedId !== null && !isActive;
+      const linkType = (edge.data as { linkType?: string })?.linkType ?? "";
+      return {
+        ...edge,
+        hidden: sourceHidden || targetHidden,
+        className: [
+          `edge-${linkType}`,
+          isActive ? "edge-highlighted" : "",
+          isDimmed ? "edge-dimmed" : "",
+        ]
+          .filter(Boolean)
+          .join(" "),
+      };
+    });
+  }, [layoutEdges, visibleNodeIds, selectedId]);
+
+  const onNodeMouseEnter = useCallback((_: React.MouseEvent, node: Node) => {
+    setSelectedId(node.id);
+  }, []);
+
+  const onNodeMouseLeave = useCallback(() => {
+    setSelectedId(null);
+  }, []);
+
+  const onPaneClick = useCallback(() => {
+    setSelectedId(null);
+  }, []);
+
+  const onNodesChange = useCallback((_: NodeChange[]) => {}, []);
+  const onEdgesChange = useCallback((_: EdgeChange[]) => {}, []);
+
+  const contextValue = useMemo(() => ({ selectedId, connectedIds }), [selectedId, connectedIds]);
+
+  return (
+    <GraphContext.Provider value={contextValue}>
+      <div>
+        <section className="graph-toolbar section-grid" aria-label={labels.filtersLegend}>
+          <label className="ui-field">
+            <span>{labels.filterKind}</span>
+            <select
+              className="ui-select"
+              value={kindFilter}
+              onChange={(e) => setKindFilter(e.target.value)}
+            >
+              <option value="">{labels.all}</option>
+              {filterOptions.kinds.map((kind) => (
+                <option key={kind} value={kind}>
+                  {kind.toUpperCase()}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="ui-field">
+            <span>{labels.filterStatus}</span>
+            <select
+              className="ui-select"
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+            >
+              <option value="">{labels.all}</option>
+              {filterOptions.statuses.map((status) => (
+                <option key={status} value={status}>
+                  {status}
+                </option>
+              ))}
+            </select>
+          </label>
+        </section>
+
+        <section className="graph-shell" aria-label={labels.areaLabel}>
+          <div className="graph-rf-wrapper">
+            <ReactFlowProvider>
+              <ReactFlow
+                nodes={nodes}
+                edges={edges}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                nodeTypes={nodeTypes}
+                onNodeMouseEnter={onNodeMouseEnter}
+                onNodeMouseLeave={onNodeMouseLeave}
+                onPaneClick={onPaneClick}
+                fitView
+                fitViewOptions={{ padding: 0.15 }}
+                minZoom={0.2}
+                maxZoom={2.5}
+                nodesDraggable={false}
+                proOptions={{ hideAttribution: false }}
+              >
+                <Background
+                  variant={BackgroundVariant.Dots}
+                  gap={20}
+                  size={1}
+                  color="var(--border)"
+                />
+                <Controls />
+                <MiniMap
+                  nodeColor={(node) =>
+                    (node.data as { kind?: string }).kind === "adr"
+                      ? "var(--accent)"
+                      : "var(--muted)"
+                  }
+                  maskColor="color-mix(in srgb, var(--panel) 80%, transparent)"
+                />
+              </ReactFlow>
+            </ReactFlowProvider>
+          </div>
+        </section>
+
+        <section className="graph-legend" aria-label={labels.legendLabel}>
+          <span>
+            <i className="legend-line solid"></i>
+            {labels.legendDependency}
+          </span>
+          <span>
+            <i className="legend-line related"></i>
+            {labels.legendRelated}
+          </span>
+          <span>
+            <i className="legend-line supersession"></i>
+            {labels.legendSupersession}
+          </span>
+          {filterOptions.kinds.map((kind) => (
+            <span key={`kind-${kind}`}>
+              <i className="legend-kind-bar" data-kind={kind}></i>
+              {kind.toUpperCase()}
+            </span>
+          ))}
+          {filterOptions.statuses.map((status) => (
+            <span key={status}>
+              <i className="legend-swatch" data-status={status}></i>
+              {status}
+            </span>
+          ))}
+        </section>
+      </div>
+    </GraphContext.Provider>
+  );
+}

package/src/components/graph/GraphContext.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+
+type GraphContextValue = {
+  selectedId: string | null;
+  connectedIds: Set<string>;
+};
+
+export const GraphContext = createContext<GraphContextValue>({
+  selectedId: null,
+  connectedIds: new Set(),
+});
+
+export function useGraphContext() {
+  return useContext(GraphContext);
+}

package/src/components/graph/graph.css

@@ -0,0 +1,330 @@
+.graph-rf-wrapper {
+  width: 100%;
+  min-height: 620px;
+  height: 620px;
+}
+
+.react-flow__background {
+  background: var(--color-panel);
+}
+
+.react-flow__panel {
+  color: var(--color-text);
+}
+
+.react-flow__controls button {
+  background: var(--color-panel);
+  border-color: var(--color-border);
+  color: var(--color-text);
+  fill: var(--color-text);
+}
+
+.react-flow__controls button:hover {
+  background: var(--color-panel-muted);
+}
+
+.react-flow__minimap {
+  background: var(--color-panel-muted) !important;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+
+/* Node card */
+.graph-rf-node-link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+}
+
+.graph-rf-node {
+  width: 220px;
+  height: 80px;
+  padding: var(--space-3) var(--space-3-5) var(--space-3) var(--space-3);
+  border: 1.5px solid var(--color-border);
+  border-left-width: 4px;
+  border-radius: var(--radius-lg);
+  background: var(--color-panel-muted);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s,
+    opacity 0.15s;
+  box-sizing: border-box;
+}
+
+.graph-rf-node--adr {
+  border-left-color: var(--kind-adr-color);
+}
+
+.graph-rf-node--spec {
+  border-left-color: var(--kind-spec-color);
+}
+
+.graph-rf-node__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.graph-rf-node__kind {
+  display: inline-flex;
+  align-items: center;
+  height: 14px;
+  padding: 0 5px;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: var(--weight-bold);
+  letter-spacing: 0.06em;
+  line-height: 1;
+}
+
+.graph-rf-node__kind--adr {
+  background: color-mix(in srgb, var(--kind-adr-color) 18%, transparent);
+  color: var(--kind-adr-color);
+}
+
+.graph-rf-node__kind--spec {
+  background: color-mix(in srgb, var(--kind-spec-color) 18%, transparent);
+  color: var(--kind-spec-color);
+}
+
+/* Status-driven node coloring (per-status semantic tokens) */
+.graph-rf-node[data-status="proposed"] {
+  border-top-color: var(--status-proposed-border);
+  border-right-color: var(--status-proposed-border);
+  border-bottom-color: var(--status-proposed-border);
+  background: var(--status-proposed-bg);
+}
+.graph-rf-node[data-status="accepted"] {
+  border-top-color: var(--status-accepted-border);
+  border-right-color: var(--status-accepted-border);
+  border-bottom-color: var(--status-accepted-border);
+  background: var(--status-accepted-bg);
+}
+.graph-rf-node[data-status="rejected"] {
+  border-top-color: var(--status-rejected-border);
+  border-right-color: var(--status-rejected-border);
+  border-bottom-color: var(--status-rejected-border);
+  background: var(--status-rejected-bg);
+}
+.graph-rf-node[data-status="deprecated"] {
+  border-top-color: var(--status-deprecated-border);
+  border-right-color: var(--status-deprecated-border);
+  border-bottom-color: var(--status-deprecated-border);
+  background: var(--status-deprecated-bg);
+}
+.graph-rf-node[data-status="superseded"] {
+  border-top-color: var(--status-superseded-border);
+  border-right-color: var(--status-superseded-border);
+  border-bottom-color: var(--status-superseded-border);
+  background: var(--status-superseded-bg);
+}
+.graph-rf-node[data-status="draft"] {
+  border-top-color: var(--status-draft-border);
+  border-right-color: var(--status-draft-border);
+  border-bottom-color: var(--status-draft-border);
+  background: var(--status-draft-bg);
+}
+.graph-rf-node[data-status="active"] {
+  border-top-color: var(--status-active-border);
+  border-right-color: var(--status-active-border);
+  border-bottom-color: var(--status-active-border);
+  background: var(--status-active-bg);
+}
+.graph-rf-node[data-status="paused"] {
+  border-top-color: var(--status-paused-border);
+  border-right-color: var(--status-paused-border);
+  border-bottom-color: var(--status-paused-border);
+  background: var(--status-paused-bg);
+}
+.graph-rf-node[data-status="implemented"] {
+  border-top-color: var(--status-implemented-border);
+  border-right-color: var(--status-implemented-border);
+  border-bottom-color: var(--status-implemented-border);
+  background: var(--status-implemented-bg);
+}
+.graph-rf-node[data-status="obsolete"] {
+  border-top-color: var(--status-obsolete-border);
+  border-right-color: var(--status-obsolete-border);
+  border-bottom-color: var(--status-obsolete-border);
+  background: var(--status-obsolete-bg);
+}
+
+.graph-rf-node:hover {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
+}
+
+.graph-rf-node--highlighted {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
+}
+
+.graph-rf-node--dimmed {
+  opacity: 0.2;
+}
+
+.graph-rf-node__id {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 650;
+  color: var(--color-text-muted);
+  line-height: 1;
+}
+
+.graph-rf-node__title {
+  font-size: var(--text-base);
+  font-weight: 650;
+  color: var(--color-text);
+  line-height: var(--leading-tight);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.graph-rf-node__status {
+  font-size: 10px;
+  font-weight: var(--weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  margin-top: auto;
+}
+
+/* Status text color follows per-status fg */
+.graph-rf-node[data-status="proposed"] .graph-rf-node__status {
+  color: var(--status-proposed-fg);
+}
+.graph-rf-node[data-status="accepted"] .graph-rf-node__status {
+  color: var(--status-accepted-fg);
+}
+.graph-rf-node[data-status="rejected"] .graph-rf-node__status {
+  color: var(--status-rejected-fg);
+}
+.graph-rf-node[data-status="deprecated"] .graph-rf-node__status {
+  color: var(--status-deprecated-fg);
+}
+.graph-rf-node[data-status="superseded"] .graph-rf-node__status {
+  color: var(--status-superseded-fg);
+}
+.graph-rf-node[data-status="draft"] .graph-rf-node__status {
+  color: var(--status-draft-fg);
+}
+.graph-rf-node[data-status="active"] .graph-rf-node__status {
+  color: var(--status-active-fg);
+}
+.graph-rf-node[data-status="paused"] .graph-rf-node__status {
+  color: var(--status-paused-fg);
+}
+.graph-rf-node[data-status="implemented"] .graph-rf-node__status {
+  color: var(--status-implemented-fg);
+}
+.graph-rf-node[data-status="obsolete"] .graph-rf-node__status {
+  color: var(--status-obsolete-fg);
+}
+
+/* Edges */
+.react-flow__edge-path {
+  stroke: var(--color-text-muted);
+  stroke-width: 1.6;
+  opacity: 0.72;
+}
+
+.edge-related .react-flow__edge-path {
+  stroke-dasharray: 5 5;
+  opacity: 0.45;
+}
+
+.edge-supersedes .react-flow__edge-path,
+.edge-replacedBy .react-flow__edge-path {
+  stroke: var(--color-warning);
+  stroke-width: 2;
+  opacity: 0.85;
+}
+
+.edge-highlighted .react-flow__edge-path {
+  stroke: var(--color-accent);
+  stroke-width: 2.4;
+  opacity: 1;
+}
+
+.edge-dimmed .react-flow__edge-path {
+  opacity: 0.12;
+}
+
+.react-flow__handle {
+  width: 8px;
+  height: 8px;
+  background: var(--color-border);
+  border-color: var(--color-border);
+}
+
+.react-flow__handle:hover {
+  background: var(--color-accent);
+}
+
+.graph-toolbar {
+  grid-template-columns: repeat(2, minmax(140px, 180px));
+}
+
+.legend-kind-bar {
+  display: inline-block;
+  width: 14px;
+  height: 4px;
+  border-radius: 2px;
+}
+
+.legend-kind-bar[data-kind="adr"] {
+  background: var(--kind-adr-color);
+}
+
+.legend-kind-bar[data-kind="spec"] {
+  background: var(--kind-spec-color);
+}
+
+/* Graph status swatches in legend */
+.legend-swatch[data-status="proposed"] {
+  background: var(--status-proposed-bg);
+  border-color: var(--status-proposed-border);
+}
+.legend-swatch[data-status="accepted"] {
+  background: var(--status-accepted-bg);
+  border-color: var(--status-accepted-border);
+}
+.legend-swatch[data-status="rejected"] {
+  background: var(--status-rejected-bg);
+  border-color: var(--status-rejected-border);
+}
+.legend-swatch[data-status="deprecated"] {
+  background: var(--status-deprecated-bg);
+  border-color: var(--status-deprecated-border);
+}
+.legend-swatch[data-status="superseded"] {
+  background: var(--status-superseded-bg);
+  border-color: var(--status-superseded-border);
+}
+.legend-swatch[data-status="draft"] {
+  background: var(--status-draft-bg);
+  border-color: var(--status-draft-border);
+}
+.legend-swatch[data-status="active"] {
+  background: var(--status-active-bg);
+  border-color: var(--status-active-border);
+}
+.legend-swatch[data-status="paused"] {
+  background: var(--status-paused-bg);
+  border-color: var(--status-paused-border);
+}
+.legend-swatch[data-status="implemented"] {
+  background: var(--status-implemented-bg);
+  border-color: var(--status-implemented-border);
+}
+.legend-swatch[data-status="obsolete"] {
+  background: var(--status-obsolete-bg);
+  border-color: var(--status-obsolete-border);
+}