@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/SocialRow.tsx

@@ -0,0 +1,87 @@
+/**
+ * SocialRow — a quiet utility row of company-profile icon buttons.
+ * Same borderless `.btn-icon` grammar as the NavShell GitHub slot: radius 0,
+ * no fill, ink-mute → ink, phosphor (`--accent`) only on :focus-visible.
+ * Not a marketing share bar. The primitive carries no Discord (that network
+ * does not exist for the company); default `DIGITHINGS_SOCIALS` is the live
+ * GitHub / X / LinkedIn set. Pass `profiles` to retarget; the row never
+ * invents networks.
+ *
+ * Dress lives in styles/nav-shell.css (already imported wherever NavShell
+ * is), so a contact band or footer can reuse the buttons without a second
+ * sheet.
+ */
+import type { ReactNode } from "react";
+
+import { GitHubGlyph, LinkedInGlyph, XGlyph } from "./icons";
+
+export type SocialNetwork = "github" | "x" | "linkedin";
+
+export type SocialProfile = {
+  network: SocialNetwork;
+  href: string;
+  label: string;
+};
+
+/** Live company profiles only. Do not add networks we do not run. */
+export const DIGITHINGS_SOCIALS: readonly SocialProfile[] = [
+  {
+    network: "github",
+    href: "https://github.com/digithings-ai/digithings",
+    label: "digithings on GitHub",
+  },
+  {
+    network: "x",
+    href: "https://x.com/digithingsai",
+    label: "digithings on X",
+  },
+  {
+    network: "linkedin",
+    href: "https://www.linkedin.com/company/digithingsai/",
+    label: "digithings on LinkedIn",
+  },
+];
+
+export type SocialRowProps = {
+  profiles?: readonly SocialProfile[];
+  "aria-label"?: string;
+  className?: string;
+};
+
+function SocialGlyph({ network }: { network: SocialNetwork }): ReactNode {
+  switch (network) {
+    case "github":
+      return <GitHubGlyph />;
+    case "x":
+      return <XGlyph />;
+    case "linkedin":
+      return <LinkedInGlyph />;
+    default: {
+      const _exhaustive: never = network;
+      return _exhaustive;
+    }
+  }
+}
+
+export function SocialRow({
+  profiles = DIGITHINGS_SOCIALS,
+  "aria-label": ariaLabel = "Company profiles",
+  className,
+}: SocialRowProps) {
+  return (
+    <nav className={className ? `social-row ${className}` : "social-row"} aria-label={ariaLabel}>
+      {profiles.map((profile) => (
+        <a
+          key={profile.network}
+          className="btn-icon"
+          href={profile.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={profile.label}
+        >
+          <SocialGlyph network={profile.network} />
+        </a>
+      ))}
+    </nav>
+  );
+}

package/src/components/Spinner.tsx

@@ -0,0 +1,27 @@
+import { cn } from "../lib/utils";
+
+export type SpinnerProps = {
+  /** Extra utilities (size overrides, margins, colours) merged after the base. */
+  className?: string;
+};
+
+/**
+ * Spinner — the canonical inline loading glyph. The wave-3 shared replacement
+ * for the hand-rolled `<span className="size-[11px] … animate-spin
+ * rounded-full border-2 border-current/30 border-t-current" />` idiom that had
+ * been copied into three reference specimens (task-1b review, Minor 3).
+ *
+ * `currentColor`-based, so it inherits the button/label tone; motion-reduce
+ * disables the rotation. Import from `@digithings-ai/ui`.
+ */
+export function Spinner({ className }: SpinnerProps) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "size-[11px] shrink-0 animate-spin rounded-full border-2 border-current/30 border-t-current motion-reduce:animate-none",
+        className
+      )}
+    />
+  );
+}

package/src/components/StackLogo.tsx

@@ -0,0 +1,40 @@
+/**
+ * StackLogo — renders a real vendor mark (Simple Icons, MIT data) tinted to
+ * --ink-soft, brand colour on hover; or a monogram chip when no mark exists.
+ * Icons resolved by slug via a namespace lookup so an unknown/typo'd slug
+ * degrades to a monogram rather than breaking the build.
+ *
+ * Brand marks are trademarks of their owners; Simple Icons provides the icon
+ * data under MIT. We render monochrome by default out of respect for brand use.
+ */
+"use client";
+import { ICONS } from "./logos";
+import { type StackItem } from "../data/modules";
+
+export function StackLogo({ item }: { item: StackItem }) {
+  const icon = item.icon ? ICONS[item.icon] ?? null : null;
+  if (icon) {
+    return (
+      <span className="stack-chip" title={item.name}>
+        <svg viewBox="0 0 24 24" width="15" height="15" className="stack-ico" style={{ ["--brand" as string]: `#${icon.hex}` }} aria-hidden="true">
+          <path d={icon.path} fill="currentColor" />
+        </svg>
+        <span className="stack-name">{item.name}</span>
+      </span>
+    );
+  }
+  return (
+    <span className="stack-chip" title={item.name}>
+      <span className="stack-mono" aria-hidden="true">{item.mono ?? item.name.slice(0, 2)}</span>
+      <span className="stack-name">{item.name}</span>
+    </span>
+  );
+}
+
+export function StackRow({ items, className }: { items: StackItem[]; className?: string }) {
+  return (
+    <div className={className ?? "stack-row"}>
+      {items.map((it) => <StackLogo key={it.name} item={it} />)}
+    </div>
+  );
+}

package/src/components/Terminal.tsx

@@ -0,0 +1,110 @@
+"use client";
+/** Typed terminal playback — the hero signature. Renders line-by-line with a
+ *  blinking cursor; instant under reduced-motion. Content is component-authored. */
+import { useEffect, useState } from "react";
+import { useMotionSafe } from "../motion/primitives";
+
+export type TermLine =
+  | { kind: "cmd" | "out" | "install" | "arrow"; text: string }
+  | { kind: "ok" | "mod"; name: string; text: string }
+  | { kind: "gap" };
+
+/**
+ * The column the `ok`/`mod` text starts at — one past the longest name in the
+ * list.
+ *
+ * This used to be a hard-coded `padEnd(15)`, which looks like it guarantees a
+ * gap and does not: once a name reaches 15 characters `padEnd` returns it
+ * unchanged and the text runs straight into it. `otel-collector` (v13) and
+ * `digi-digisearch` (v15) were both glued to the word after them, and both were
+ * worked around by renaming the service rather than by fixing the padding.
+ *
+ * Deriving the column from the lines in hand is what actually holds it: every
+ * list aligns to its own longest name, and no name can outgrow it.
+ */
+function nameColumn(lines: TermLine[]): number {
+  let longest = 0;
+  for (const l of lines) if ("name" in l) longest = Math.max(longest, l.name.length);
+  return longest + 1;
+}
+
+function Line({ l, col }: { l: TermLine; col: number }) {
+  switch (l.kind) {
+    case "gap": return <br />;
+    case "cmd": return <span className="tl-cmd">{l.text}</span>;
+    case "out": return <span className="tl-out">{l.text}</span>;
+    case "install": return <span className="tl-install">{l.text}</span>;
+    case "arrow": return <span className="tl-arrow">{l.text}</span>;
+    case "ok": return <span className="tl-ok"><b>{l.name.padEnd(col)}</b>{l.text}</span>;
+    case "mod": return <span className="tl-mod"><b>{l.name.padEnd(col)}</b>{l.text}  →</span>;
+  }
+}
+
+export function Terminal({
+  title,
+  lines,
+  size = "default",
+  fill = false,
+  className,
+}: {
+  title: string;
+  lines: TermLine[];
+  /** `compact` is the smaller register — tighter body type and window bar. */
+  size?: "default" | "compact";
+  /**
+   * Stretch `.term` to its wrapper's height instead of sizing to the text, so
+   * a scripted playback never grows the box as lines type in. Pair with a
+   * fixed-height wrapper; the body clips rather than expanding.
+   */
+  fill?: boolean;
+  className?: string;
+}) {
+  const safe = useMotionSafe();
+  const [n, setN] = useState(safe ? 0 : lines.length);
+
+  useEffect(() => {
+    // useMotionSafe resolves after mount (hydration-safe): reduced-motion
+    // users reach here with safe=false on the second pass — show everything
+    // instantly.
+    if (!safe) {
+      setN(lines.length);
+      return;
+    }
+    // The lead-in and the inter-line waits are chained timeouts, so the whole
+    // chain is tracked and cleared together on cleanup. A first-render effect
+    // pass is guaranteed (useMotionSafe flips `mounted` one tick after mount),
+    // which re-runs this effect; every pending timer must be cancelled and the
+    // chain restarted from zero, or the re-run would leave the body empty.
+    let i = 0;
+    let timer: ReturnType<typeof setTimeout>;
+    const tick = () => {
+      i += 1;
+      setN(i);
+      if (i < lines.length) {
+        const prev = lines[i - 1];
+        timer = setTimeout(tick, prev.kind === "gap" ? 90 : prev.kind === "cmd" ? 420 : 200);
+      }
+    };
+    timer = setTimeout(tick, 420);
+    return () => clearTimeout(timer);
+  }, [safe, lines]);
+
+  const root = ["term", size === "compact" ? "term--compact" : "", fill ? "term--fill" : "", className]
+    .filter(Boolean)
+    .join(" ");
+  const col = nameColumn(lines);
+
+  return (
+    <div className={root}>
+      <div className="term-bar"><i /><i /><i /><span className="term-title">{title}</span></div>
+      <pre className="term-body">
+        {lines.slice(0, n).map((l, k) => (
+          <span key={k}>
+            <Line l={l} col={col} />{l.kind !== "gap" ? "\n" : ""}
+          </span>
+        ))}
+        {n >= lines.length && <span className="term-cursor" />}
+      </pre>
+    </div>
+  );
+}

package/src/components/TerminalManifest.tsx

@@ -0,0 +1,212 @@
+"use client";
+/**
+ * Terminal manifest — the `cli ps` process pane behind digithings-web's
+ * ModuleManifest (#1415): a prompt head line, selectable rows (status dot,
+ * two-tone mono name, optional port, blurb), and an output panel where the
+ * selected row's detail types out at a blinking cursor. Rows arrive as props;
+ * selection is uncontrolled by default or controlled via `selectedId`.
+ * Row-appear stagger and the type-out both degrade under reduced motion.
+ * Pane surface, row states, keyframes, and the container-query column
+ * collapse live in styles/terminal-manifest.css (import it once app-wide).
+ * The pane deliberately wears the manifest chrome (prompt head line), not
+ * the <Terminal> window bar — its frame is page CSS and its body is a
+ * scripted playback; compose the two side by side when both are wanted.
+ */
+import { useEffect, useState, type ReactNode } from "react";
+import { useMotionSafe } from "../motion/primitives";
+
+export type TerminalManifestStatus = "online" | "roadmap";
+
+export type TerminalManifestRow = {
+  id: string;
+  /** Lowercase process name; `namePrefix` splits it into ink + accent. */
+  name: string;
+  /** Optional port column — rendered only when at least one row carries one. */
+  port?: string | number;
+  status: TerminalManifestStatus;
+  /** Row summary column; also the typed output when `detail` is absent. */
+  blurb: string;
+  /** Output typed at the cursor when the row is selected. */
+  detail?: string;
+};
+
+export type TerminalManifestProps = {
+  /** Head line, e.g. `modules`. Pair a non-shell `prompt` with a non-shell
+   *  label: with the default `$` mark this reads as a command the visitor can
+   *  type, so it must name one that exists. */
+  command: string;
+  rows: TerminalManifestRow[];
+  /** Head-line prompt mark. */
+  prompt?: string;
+  /** Trailing head-line annotation, e.g. `· 7 online · 3 on the roadmap`. */
+  meta?: string;
+  /** Idle output line shown before any row is selected. */
+  hint?: string;
+  /** Two-tone name split: this leading fragment renders ink, the rest accent. */
+  namePrefix?: string;
+  /** Staggered row-appear animation (CSS keyframe; off under reduced motion). */
+  animateRows?: boolean;
+  /** Controlled selection; omit to let the pane own it. */
+  selectedId?: string | null;
+  defaultSelectedId?: string | null;
+  onSelect?: (id: string | null) => void;
+  /** Rendered under the output panel — e.g. a hand-off button. */
+  footer?: ReactNode;
+  className?: string;
+  "aria-label"?: string;
+};
+
+function RowName({ name, prefix }: { name: string; prefix?: string }) {
+  if (prefix && name.startsWith(prefix) && name.length > prefix.length) {
+    return (
+      <>
+        <span className="text-ink">{prefix}</span>
+        <span className="text-accent">{name.slice(prefix.length)}</span>
+      </>
+    );
+  }
+  return <span className="text-ink">{name}</span>;
+}
+
+export function TerminalManifest({
+  command,
+  rows,
+  prompt = "$",
+  meta,
+  hint = "select a module",
+  namePrefix,
+  animateRows = true,
+  selectedId,
+  defaultSelectedId = null,
+  onSelect,
+  footer,
+  className,
+  "aria-label": ariaLabel,
+}: TerminalManifestProps) {
+  const safe = useMotionSafe();
+  const [ownSel, setOwnSel] = useState<string | null>(defaultSelectedId);
+  const sel = selectedId !== undefined ? selectedId : ownSel;
+  const selRow = sel ? (rows.find((r) => r.id === sel) ?? null) : null;
+  const out = selRow ? (selRow.detail ?? selRow.blurb) : "";
+  const open = selRow !== null;
+
+  const [shown, setShown] = useState(0);
+
+  // The detail types out in ~1.5s regardless of length: this effect resets and
+  // then drives `shown` as an animation, so synchronous setState in the effect
+  // body is intentional (same pattern as digithings-web's ModuleManifest).
+  /* eslint-disable react-hooks/set-state-in-effect */
+  useEffect(() => {
+    if (!open) {
+      setShown(0);
+      return;
+    }
+    if (!safe) {
+      setShown(out.length);
+      return;
+    }
+    setShown(0);
+    let i = 0;
+    const step = Math.max(2, Math.ceil(out.length / 90));
+    const id = window.setInterval(() => {
+      i += step;
+      if (i >= out.length) {
+        i = out.length;
+        window.clearInterval(id);
+      }
+      setShown(i);
+    }, 16);
+    return () => window.clearInterval(id);
+  }, [open, out, safe]);
+  /* eslint-enable react-hooks/set-state-in-effect */
+
+  const select = (id: string) => {
+    const next = sel === id ? null : id;
+    if (selectedId === undefined) setOwnSel(next);
+    onSelect?.(next);
+  };
+
+  const hasPorts = rows.some((r) => r.port !== undefined);
+  const anim = animateRows && safe;
+  const shell = ["tm", hasPorts ? "has-ports" : "", anim ? "" : "no-anim", className ?? ""]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={shell} aria-label={ariaLabel}>
+      <div className="tm-pane flex flex-col rounded-none border border-hair px-[clamp(1rem,2.4vw,1.6rem)] py-[clamp(1rem,2.4vw,1.5rem)] font-mono">
+        <div className="mb-[0.7rem] flex-none text-[0.8rem] tracking-[0.02em] text-ink-mute">
+          <span className="text-accent">{prompt}</span> {command}
+          {meta ? <span> {meta}</span> : null}
+        </div>
+        <div className="tm-body">
+          <ol className="tm-rows">
+            {rows.map((r, i) => {
+              const off = r.status === "roadmap";
+              const isSel = sel === r.id;
+              return (
+                <li
+                  key={r.id}
+                  className={`tm-row${off ? " is-off" : ""}${isSel ? " is-sel" : ""}`}
+                  style={anim ? { animationDelay: `${i * 55}ms` } : undefined}
+                >
+                  <button
+                    type="button"
+                    className="tm-row-link"
+                    // Toggle buttons feeding one shared output pane: clicking a
+                    // row selects it (re-clicking deselects), so aria-pressed —
+                    // the selected state — is the accurate model. (aria-selected
+                    // is invalid on role=button; a listbox would need arrow-key
+                    // nav these rows don't implement.) The output pane always
+                    // renders (hint vs detail — content swaps, nothing
+                    // collapses), so this is selection, not disclosure. (#1434)
+                    aria-pressed={isSel}
+                    onClick={() => select(r.id)}
+                  >
+                    <span className={`tm-dot${off ? " off" : ""}`} aria-hidden="true" />
+                    {/* The dot is the only running/roadmap signal (color +
+                        glow), aria-hidden with no text equivalent elsewhere
+                        in the row — a screen-reader user got zero indication
+                        of which services are live. .tm-sr (terminal-manifest.css),
+                        not Tailwind's .sr-only: this is a shared component and
+                        that utility only exists in an app whose own source
+                        happens to use the class (see .tl-sr's comment,
+                        terminal-loaders.css, for the bug that already caused
+                        once). */}
+                    <span className="tm-sr">{off ? "On the roadmap" : "Online"}</span>
+                    <span className="tm-name text-[0.92rem] font-medium">
+                      <RowName name={r.name} prefix={namePrefix} />
+                    </span>
+                    {hasPorts ? (
+                      <span className="tm-port text-[0.78rem] text-ink-mute">{r.port ?? ""}</span>
+                    ) : null}
+                    <span className="tm-blurb truncate text-[0.84rem] text-ink-soft">{r.blurb}</span>
+                  </button>
+                </li>
+              );
+            })}
+          </ol>
+          <div className="tm-out">
+            <div className="tm-out-show pb-[0.2rem]" aria-live="polite">
+              {selRow ? (
+                <pre className="tm-out-body m-0 whitespace-pre-wrap break-words font-mono text-[0.84rem] leading-[1.6] text-ink-soft">
+                  {out.slice(0, shown)}
+                  <span className="tm-cursor" aria-hidden="true" />
+                </pre>
+              ) : (
+                <p className="m-0 text-[0.84rem] text-ink-mute">
+                  {hint}
+                  <span className="tm-cursor" aria-hidden="true" />
+                </p>
+              )}
+            </div>
+            {/* Fragment keeps the slot element out of this children array: an
+                element prop arriving across an RSC boundary trips React 19's
+                missing-key check when reconciled as a direct array member. */}
+            <>{footer}</>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}