@acta-dev/web 1.0.0

package/src/components/graph/layout.ts

@@ -0,0 +1,48 @@
+import type { DocumentGraph } from "@acta-dev/core";
+import dagre from "@dagrejs/dagre";
+import type { Edge, Node } from "@xyflow/react";
+
+const NODE_WIDTH = 220;
+const NODE_HEIGHT = 80;
+
+export function computeLayout(graph: DocumentGraph): { nodes: Node[]; edges: Edge[] } {
+  const g = new dagre.graphlib.Graph();
+  g.setDefaultEdgeLabel(() => ({}));
+  g.setGraph({ rankdir: "LR", nodesep: 40, ranksep: 100, marginx: 36, marginy: 36 });
+
+  for (const node of graph.nodes) {
+    g.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
+  }
+
+  for (const edge of graph.edges) {
+    g.setEdge(edge.source, edge.target);
+  }
+
+  dagre.layout(g);
+
+  const nodes: Node[] = graph.nodes.map((node) => {
+    const pos = g.node(node.id);
+    return {
+      id: node.id,
+      type: node.kind,
+      position: { x: pos.x - NODE_WIDTH / 2, y: pos.y - NODE_HEIGHT / 2 },
+      data: {
+        label: node.title,
+        status: node.status,
+        kind: node.kind,
+        tags: node.tags,
+      },
+    };
+  });
+
+  const edges: Edge[] = graph.edges.map((edge, i) => ({
+    id: `e-${i}-${edge.source}-${edge.target}`,
+    source: edge.source,
+    target: edge.target,
+    type: "smoothstep",
+    data: { linkType: edge.type },
+    className: `edge-${edge.type}`,
+  }));
+
+  return { nodes, edges };
+}

package/src/components/graph/nodes.tsx

@@ -0,0 +1,80 @@
+import type { NodeProps } from "@xyflow/react";
+import { Handle, Position } from "@xyflow/react";
+import React from "react";
+import { useGraphContext } from "./GraphContext.js";
+
+type GraphNodeData = {
+  label: string;
+  status: string;
+  kind: "adr" | "spec";
+  tags: string[];
+  href?: string;
+};
+
+function truncate(value: string, max: number): string {
+  return value.length > max ? `${value.slice(0, max - 1)}…` : value;
+}
+
+function GraphNodeCard({
+  id,
+  data,
+  kind,
+}: {
+  id: string;
+  data: GraphNodeData;
+  kind: "adr" | "spec";
+}) {
+  const { selectedId, connectedIds } = useGraphContext();
+
+  const dimmed = selectedId !== null && !connectedIds.has(id);
+  const highlighted = selectedId !== null && connectedIds.has(id);
+
+  const href = data.href;
+
+  const statusKey = data.status.toLowerCase().replace(/\s+/g, "-");
+  const inner = (
+    <div
+      data-status={statusKey}
+      className={[
+        "graph-rf-node",
+        `graph-rf-node--${kind}`,
+        dimmed ? "graph-rf-node--dimmed" : "",
+        highlighted ? "graph-rf-node--highlighted" : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <Handle type="target" position={Position.Left} />
+      <Handle type="source" position={Position.Right} />
+      <div className="graph-rf-node__head">
+        <span className="graph-rf-node__id">{id}</span>
+        <span className={`graph-rf-node__kind graph-rf-node__kind--${kind}`}>
+          {kind.toUpperCase()}
+        </span>
+      </div>
+      <span className="graph-rf-node__title">{truncate(data.label, 30)}</span>
+      <span className="graph-rf-node__status">{data.status}</span>
+    </div>
+  );
+
+  return href ? (
+    <a href={href} className="graph-rf-node-link" title={data.label}>
+      {inner}
+    </a>
+  ) : (
+    inner
+  );
+}
+
+export function AdrNode(props: NodeProps) {
+  return <GraphNodeCard id={props.id} kind="adr" data={props.data as GraphNodeData} />;
+}
+
+export function SpecNode(props: NodeProps) {
+  return <GraphNodeCard id={props.id} kind="spec" data={props.data as GraphNodeData} />;
+}
+
+export const nodeTypes = {
+  adr: AdrNode,
+  spec: SpecNode,
+};

package/src/components/ui/Button.astro

@@ -0,0 +1,105 @@
+---
+type ButtonVariant = "primary" | "secondary" | "ghost";
+type ButtonSize = "sm" | "md";
+
+interface Props {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  as?: "a" | "button";
+  href?: string;
+  type?: "button" | "submit" | "reset";
+  hidden?: boolean;
+  class?: string;
+  [key: `data-${string}`]: string | number | boolean | undefined;
+}
+
+const {
+  variant = "secondary",
+  size = "md",
+  as = "button",
+  href,
+  type = "button",
+  class: className,
+  ...rest
+} = Astro.props as Props & Record<string, unknown>;
+
+const classes = ["ui-button", `ui-button--${variant}`, `ui-button--${size}`, className]
+  .filter(Boolean)
+  .join(" ");
+---
+
+{
+  as === "a" ? (
+    <a class={classes} href={href} {...rest}>
+      <slot />
+    </a>
+  ) : (
+    <button class={classes} type={type} {...rest}>
+      <slot />
+    </button>
+  )
+}
+
+<style>
+  .ui-button[hidden] {
+    display: none;
+  }
+
+  .ui-button {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3-5);
+    border: 1px solid var(--color-text);
+    border-radius: 0;
+    background: transparent;
+    color: var(--color-text);
+    font-family: var(--font-sans);
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      background var(--duration-hover) var(--ease-out),
+      color var(--duration-hover) var(--ease-out),
+      transform var(--duration-press) var(--ease-out);
+  }
+
+  .ui-button:hover {
+    background: var(--color-text);
+    color: var(--color-bg);
+  }
+
+  .ui-button:active {
+    transform: scale(0.97);
+  }
+
+  .ui-button--sm {
+    padding: var(--space-1-5) var(--space-3);
+    font-size: 10px;
+  }
+
+  .ui-button--primary {
+    background: var(--color-accent);
+    border-color: var(--color-accent);
+    color: var(--color-accent-ink);
+  }
+
+  .ui-button--primary:hover {
+    background: color-mix(in srgb, var(--color-accent) 85%, var(--color-text));
+    color: var(--color-accent-ink);
+  }
+
+  .ui-button--ghost {
+    border-color: transparent;
+  }
+
+  .ui-button--ghost:hover {
+    background: transparent;
+    color: var(--color-accent);
+  }
+</style>

package/src/components/ui/Chip.astro

@@ -0,0 +1,147 @@
+---
+interface Props {
+  as?: "a" | "span";
+  href?: string;
+  status?: string;
+  kind?: string;
+  interactive?: boolean;
+  class?: string;
+  [key: `data-${string}`]: string | number | boolean | undefined;
+}
+
+const {
+  as = "span",
+  href,
+  status,
+  kind,
+  interactive,
+  class: className,
+  ...rest
+} = Astro.props as Props & Record<string, unknown>;
+
+const isInteractive = interactive ?? as === "a";
+const classes = [
+  "ui-chip",
+  isInteractive ? "ui-chip--interactive" : "",
+  status ? `ui-chip--status` : "",
+  kind ? `ui-chip--kind` : "",
+  className,
+]
+  .filter(Boolean)
+  .join(" ");
+
+const dataProps: Record<string, string> = {};
+if (status) dataProps["data-status"] = status;
+if (kind) dataProps["data-kind"] = kind;
+---
+
+{
+  as === "a" ? (
+    <a class={classes} href={href} {...dataProps} {...rest}>
+      <slot />
+    </a>
+  ) : (
+    <span class={classes} {...dataProps} {...rest}>
+      <slot />
+    </span>
+  )
+}
+
+<style>
+  /* Base / interactive chip — used for external references */
+  .ui-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--space-1) var(--space-2);
+    border: 1px solid var(--color-border);
+    background: transparent;
+    color: var(--color-text-muted);
+    font-family: var(--font-sans);
+    font-size: 12px;
+    text-decoration: none;
+    overflow-wrap: anywhere;
+  }
+
+  .ui-chip--interactive {
+    transition:
+      border-color var(--duration-hover) var(--ease-out),
+      color var(--duration-hover) var(--ease-out);
+  }
+
+  .ui-chip--interactive:hover {
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+  }
+
+  /* Kind badge — ADR = solid ink, SPEC = outlined ink (read as siblings) */
+  .ui-chip--kind {
+    padding: 2px 5px;
+    border: 0;
+    background: var(--color-text);
+    color: var(--color-bg);
+    font-family: var(--font-sans);
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+
+  .ui-chip--kind[data-kind="spec"] {
+    padding: 1px var(--space-1);
+    background: transparent;
+    color: var(--color-text);
+    box-shadow: inset 0 0 0 1px var(--color-text);
+  }
+
+  /* Status — colored ink + leading dot, no chrome */
+  .ui-chip--status {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    gap: var(--space-1-5);
+    font-family: var(--font-sans);
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+
+  .ui-chip--status::before {
+    content: "";
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  .ui-chip--status[data-status="proposed"] {
+    color: var(--status-proposed-fg);
+  }
+  .ui-chip--status[data-status="accepted"] {
+    color: var(--status-accepted-fg);
+  }
+  .ui-chip--status[data-status="rejected"] {
+    color: var(--status-rejected-fg);
+  }
+  .ui-chip--status[data-status="deprecated"] {
+    color: var(--status-deprecated-fg);
+  }
+  .ui-chip--status[data-status="superseded"] {
+    color: var(--status-superseded-fg);
+  }
+  .ui-chip--status[data-status="draft"] {
+    color: var(--status-draft-fg);
+  }
+  .ui-chip--status[data-status="active"] {
+    color: var(--status-active-fg);
+  }
+  .ui-chip--status[data-status="paused"] {
+    color: var(--status-paused-fg);
+  }
+  .ui-chip--status[data-status="implemented"] {
+    color: var(--status-implemented-fg);
+  }
+  .ui-chip--status[data-status="obsolete"] {
+    color: var(--status-obsolete-fg);
+  }
+</style>

package/src/components/ui/Field.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+  label: string;
+  class?: string;
+}
+
+const { label, class: className } = Astro.props;
+const classes = ["ui-field", className].filter(Boolean).join(" ");
+---
+
+<label class={classes}>
+  <span class="ui-field__label">{label}</span>
+  <slot />
+</label>
+
+<style>
+  .ui-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+    font-family: var(--font-sans);
+    font-size: 10px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--color-text-muted);
+    font-weight: 500;
+  }
+</style>

package/src/components/ui/Input.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"input">;
+
+const { class: className, type = "text", ...rest } = Astro.props;
+const classes = ["ui-input", className].filter(Boolean).join(" ");
+---
+
+<input class={classes} type={type} {...rest} />
+
+<style>
+  .ui-input {
+    width: 100%;
+    padding: var(--space-1-5) 0;
+    box-sizing: border-box;
+    border: 0;
+    border-bottom: 1px solid var(--color-border);
+    background: transparent;
+    color: var(--color-text);
+    font-family: var(--font-serif);
+    font-size: 16px;
+    outline: none;
+  }
+
+  .ui-input::placeholder {
+    color: var(--color-text-muted);
+    font-style: italic;
+  }
+
+  .ui-input:focus-visible {
+    border-bottom-color: var(--color-accent);
+  }
+</style>

package/src/components/ui/Pill.astro

@@ -0,0 +1,71 @@
+---
+type PillTone = "neutral" | "success" | "danger" | "warning";
+
+interface Props {
+  as?: "a" | "span";
+  href?: string;
+  tone?: PillTone;
+  class?: string;
+  [key: `data-${string}`]: string | number | boolean | undefined;
+}
+
+const {
+  as = "span",
+  href,
+  tone = "neutral",
+  class: className,
+  ...rest
+} = Astro.props as Props & Record<string, unknown>;
+
+const classes = ["ui-pill", `ui-pill--${tone}`, className].filter(Boolean).join(" ");
+---
+
+{
+  as === "a" ? (
+    <a class={classes} href={href} {...rest}>
+      <slot />
+    </a>
+  ) : (
+    <span class={classes} {...rest}>
+      <slot />
+    </span>
+  )
+}
+
+<style>
+  .ui-pill {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: var(--space-2);
+    padding: 0;
+    background: transparent;
+    color: var(--color-text-muted);
+    font-family: var(--font-sans);
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    text-decoration: none;
+  }
+
+  .ui-pill::before {
+    content: "";
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  .ui-pill--success {
+    color: var(--status-active-fg);
+  }
+
+  .ui-pill--danger {
+    color: var(--color-danger);
+  }
+
+  .ui-pill--warning {
+    color: var(--color-warning);
+  }
+</style>

package/src/components/ui/SegmentedControl.astro

@@ -0,0 +1,105 @@
+---
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface Props {
+  name: string;
+  legend: string;
+  options: Option[];
+  value?: string;
+  dataAttr?: string;
+  class?: string;
+}
+
+const { name, legend, options, value, dataAttr, class: className } = Astro.props;
+const classes = ["ui-segmented", className].filter(Boolean).join(" ");
+const dataProps: Record<string, string> = dataAttr ? { [dataAttr]: "" } : {};
+---
+
+<fieldset class={classes} aria-label={legend}>
+  <legend>{legend}</legend>
+  {
+    options.map((option) => (
+      <label>
+        <input
+          type="radio"
+          name={name}
+          value={option.value}
+          checked={value ? value === option.value : undefined}
+          {...dataProps}
+        />
+        <span>{option.label}</span>
+      </label>
+    ))
+  }
+</fieldset>
+
+<style>
+  .ui-segmented {
+    display: flex;
+    align-self: end;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+    border: 1px solid var(--color-text);
+  }
+
+  .ui-segmented legend {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .ui-segmented label {
+    display: inline-flex;
+  }
+
+  .ui-segmented input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+  }
+
+  .ui-segmented span {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-2) var(--space-3);
+    background: transparent;
+    color: var(--color-text);
+    font-family: var(--font-sans);
+    font-size: 11px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    font-weight: 500;
+    line-height: 1;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition:
+      background var(--duration-hover) var(--ease-out),
+      color var(--duration-hover) var(--ease-out);
+  }
+
+  .ui-segmented label:active span {
+    transform: scale(0.97);
+  }
+
+  .ui-segmented input:checked + span {
+    background: var(--color-text);
+    color: var(--color-bg);
+  }
+
+  .ui-segmented input:focus-visible + span {
+    outline: 2px solid var(--color-accent);
+    outline-offset: -2px;
+  }
+</style>

package/src/components/ui/Select.astro

@@ -0,0 +1,41 @@
+---
+interface Props {
+  name?: string;
+  value?: string;
+  class?: string;
+  [key: `data-${string}`]: string | number | boolean | undefined;
+}
+
+const { class: className, ...rest } = Astro.props as Props & Record<string, unknown>;
+const classes = ["ui-select", className].filter(Boolean).join(" ");
+---
+
+<select class={classes} {...rest}>
+  <slot />
+</select>
+
+<style>
+  .ui-select {
+    width: 100%;
+    padding: var(--space-1-5) var(--space-4) var(--space-1-5) 0;
+    box-sizing: border-box;
+    border: 0;
+    border-bottom: 1px solid var(--color-border);
+    background: transparent;
+    color: var(--color-text);
+    font-family: var(--font-sans);
+    font-size: 13px;
+    outline: none;
+    appearance: none;
+    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
+      linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
+    background-position: calc(100% - 6px) 12px, calc(100% - 2px) 12px;
+    background-size: 4px 4px;
+    background-repeat: no-repeat;
+    cursor: pointer;
+  }
+
+  .ui-select:focus-visible {
+    border-bottom-color: var(--color-accent);
+  }
+</style>