Drill Down Spines

"use client";

import { useRef } from "react";
import { SpineStack, type SpineStackHandle, type SpineStackLevel } from "./component";

// A support/engineering workspace drilled four levels deep: teams -> projects
// -> tickets -> ticket detail. Each row is a real button (`data-drill-row`,
// picked up by autoplay's `press` mode and the gate's `openBy`) that pushes
// the next level via the imperative handle — realistic master-detail depth,
// not a two-level toy.

type Node = {
  id: string;
  title: string;
  meta?: string;
  children?: Node[];
  detail?: { status: string; assignee: string; body: string };
};

const TREE: Node[] = [
  {
    id: "eng",
    title: "Engineering",
    meta: "3 projects",
    children: [
      {
        id: "eng-gateway",
        title: "API Gateway",
        meta: "3 open",
        children: [
          {
            id: "tk-1",
            title: "Rate limiting bug",
            meta: "P1",
            detail: {
              status: "In progress",
              assignee: "Priya N.",
              body: "Burst traffic over 200 req/s bypasses the token-bucket limiter on the /v2 route group — likely a stale counter reset on pod restart.",
            },
          },
          {
            id: "tk-2",
            title: "Auth token refresh",
            meta: "P2",
            detail: {
              status: "Triage",
              assignee: "Unassigned",
              body: "Refresh tokens issued before the v4.2 rollout are rejected with a signature mismatch instead of a clean re-auth prompt.",
            },
          },
          {
            id: "tk-3",
            title: "CORS misconfig on staging",
            meta: "P3",
            detail: {
              status: "Open",
              assignee: "Marcus T.",
              body: "Preflight requests from the staging dashboard origin are missing Access-Control-Allow-Credentials on the new billing endpoints.",
            },
          },
        ],
      },
      {
        id: "eng-web",
        title: "Web App",
        meta: "2 open",
        children: [
          {
            id: "tk-4",
            title: "Checkout regression",
            meta: "P1",
            detail: {
              status: "In progress",
              assignee: "Priya N.",
              body: "Applying a discount code twice in one session double-counts the line-item total shown before payment, though the charge itself is correct.",
            },
          },
          {
            id: "tk-5",
            title: "Onboarding redesign",
            meta: "Draft",
            detail: {
              status: "Draft",
              assignee: "Sana K.",
              body: "Three-step signup flow replacing the current single long form; first Figma pass is in for review.",
            },
          },
        ],
      },
    ],
  },
  {
    id: "design",
    title: "Design",
    meta: "1 project",
    children: [
      {
        id: "design-brand",
        title: "Brand Refresh",
        meta: "2 open",
        children: [
          {
            id: "tk-6",
            title: "Logo exploration",
            meta: "Review",
            detail: {
              status: "In review",
              assignee: "Sana K.",
              body: "Second round of wordmark variants, narrowed to two directions after the founder walkthrough.",
            },
          },
          {
            id: "tk-7",
            title: "Typography audit",
            meta: "Open",
            detail: {
              status: "Open",
              assignee: "Unassigned",
              body: "Geist Sans is live in-product; this audit checks every marketing surface still on the old typeface stack.",
            },
          },
        ],
      },
    ],
  },
  {
    id: "support",
    title: "Support",
    meta: "1 project",
    children: [
      {
        id: "support-escalations",
        title: "Escalations",
        meta: "2 open",
        children: [
          {
            id: "tk-8",
            title: "Ticket #4821 — billing",
            meta: "P1",
            detail: {
              status: "In progress",
              assignee: "Marcus T.",
              body: "Customer charged twice for the annual plan after a failed card retry; refund queued, root cause still open.",
            },
          },
          {
            id: "tk-9",
            title: "Ticket #4790 — export",
            meta: "P2",
            detail: {
              status: "Open",
              assignee: "Unassigned",
              body: "CSV export truncates at 10k rows with no error surfaced to the user — likely a silent timeout, not a real row limit.",
            },
          },
        ],
      },
    ],
  },
];

function ChevronIcon() {
  return (
    <svg
      viewBox="0 0 16 16"
      className="h-3.5 w-3.5 shrink-0 text-ns-muted"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      <path d="m6 3 5 5-5 5" />
    </svg>
  );
}

function RowList({ nodes, onOpen }: { nodes: Node[]; onOpen: (n: Node) => void }) {
  return (
    <ul className="flex flex-col gap-1">
      {nodes.map((n) => (
        <li key={n.id}>
          <button
            type="button"
            data-drill-row
            onClick={() => onOpen(n)}
            className="flex w-full items-center justify-between gap-3 rounded-sm px-3 py-2 text-left text-sm text-foreground transition-colors hover:bg-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ns-accent"
          >
            <span className="truncate">{n.title}</span>
            <span className="flex shrink-0 items-center gap-2">
              {n.meta && (
                <span className="font-mono text-[10px] uppercase tracking-wide text-ns-muted">{n.meta}</span>
              )}
              <ChevronIcon />
            </span>
          </button>
        </li>
      ))}
    </ul>
  );
}

function DetailView({ node }: { node: Node }) {
  if (!node.detail) return null;
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-2">
        <span className="rounded-full border border-border px-2 py-0.5 font-mono text-[10px] uppercase tracking-wide text-ns-muted">
          {node.detail.status}
        </span>
        <span className="font-mono text-[10px] uppercase tracking-wide text-ns-muted">
          {node.detail.assignee}
        </span>
      </div>
      <p className="text-sm leading-relaxed text-foreground">{node.detail.body}</p>
    </div>
  );
}

function LevelBody({ node, onOpen }: { node: Node; onOpen: (n: Node) => void }) {
  if (node.children) return <RowList nodes={node.children} onOpen={onOpen} />;
  return <DetailView node={node} />;
}

export default function SpineStackDemo() {
  const handleRef = useRef<SpineStackHandle>(null);

  const openNode = (n: Node) => {
    handleRef.current?.push({
      id: n.id,
      title: n.title,
      content: <LevelBody node={n} onOpen={openNode} />,
    });
  };

  const rootLevel: SpineStackLevel = {
    id: "root",
    title: "Workspaces",
    content: <RowList nodes={TREE} onOpen={openNode} />,
  };

  return (
    <div className="flex min-h-screen items-center justify-center px-6 py-16">
      <div className="w-full max-w-3xl">
        <p className="mb-2 font-mono text-[11px] uppercase tracking-[0.16em] text-ns-muted">
          Support workspace
        </p>
        <div className="h-[440px] overflow-hidden rounded-md border border-border bg-background p-2">
          <SpineStack ref={handleRef} initial={rootLevel} className="h-full" />
        </div>
      </div>
    </div>
  );
}

"use client";

import {
  forwardRef,
  useCallback,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
  type ReactNode,
} from "react";

// ---------------------------------------------------------------------------
// SpineStack — drill-down navigation where a pushed level never vanishes
// behind a back button: it compresses against the left edge into a slim
// clickable book spine, so the whole navigation stack stands on a shelf
// beside the current page, labeled and directly tappable at any depth.
//
// Each level's width is an explicit, always-computed pixel value (never
// flex:auto), tracked against the container's measured width via
// ResizeObserver. That is what lets a level's width transition smoothly in
// EITHER direction on a single CSS `transition: width` — full page shrinking
// to a 14px spine on push, or a 14/22px spine growing back to full width on
// pop — both are just px-to-px interpolation, no measure-then-override FLIP
// hack required. The transition runs on a spring-approximating overshoot
// cubic-bezier (not a hand-rolled rAF integrator): honest about the
// mechanism, still reads as a little bounce settling into place.
//
// A spine's content crossfades between a vertical Geist Mono title (the
// resting 14px look) and a horizontal truncated one, widened to 22px, either
// once the shelf is wide enough (a container breakpoint) or transiently on
// hover/focus of that one spine — rotated text is genuinely harder to read,
// so wide-enough shelves and any focused/hovered spine get the easier
// horizontal form. A 1px inset "lit" edge (color-mix over --foreground, a
// decoration, never --ns-accent) reads as the spine's physical edge catching
// light, so the row reads as stacked thickness even at rest.
//
// Clicking any spine pops every level above it in one motion: the levels
// above cascade off in reverse-push order (the most recently pushed leaves
// first, each subsequent one staggered ~90ms behind) while the clicked
// spine's width transitions back up to full — "re-inflating" in parallel
// with, not after, the cascade above it. `prefers-reduced-motion` drops the
// stagger and the transition entirely: pops commit their new stack
// synchronously, entrances render at final width immediately.
//
// A11y: every spine is a real <button> whose accessible name is the level's
// full title (`aria-label`; the rotated/truncated visual text is
// `aria-hidden`, decorative only) — full horizontal names regardless of how
// little of the title is legible on screen. All spines sit inside a `<nav>`
// landmark labeled "Navigation history, N levels". Focus moves to the new
// active page's heading (a `tabIndex={-1}` <h2>) on every push and on every
// pop's commit, so the SPA-style navigation announces itself to assistive
// tech the same way a full route change would. Zero dependencies, DOM+CSS
// only — no canvas.
// ---------------------------------------------------------------------------

export interface SpineStackLevel {
  /** stable id — also used as the React key and as the pop target */
  id: string;
  /** shown as the vertical/horizontal spine label and the active page heading */
  title: string;
  content: ReactNode;
}

export interface SpineStackHandle {
  /** push a new level onto the stack; ignored if `id` already exists in the stack or a pop is mid-animation */
  push: (level: SpineStackLevel) => void;
  /** pop every level above `id`; no-op if `id` isn't in the stack or is already the active (top) level */
  popTo: (id: string) => void;
  /** pop exactly one level (convenience for a "back" affordance); no-op at the root */
  pop: () => void;
  /** replace the whole stack with a single level, instantly, no animation */
  reset: (level: SpineStackLevel) => void;
}

export interface SpineStackProps {
  /** seed level for the stack; only read on mount — the stack is uncontrolled thereafter, drive it via the ref */
  initial: SpineStackLevel;
  /** fires after the top (active) level settles — on mount, on push, and once a pop's cascade commits */
  onNavigate?: (id: string) => void;
  /** extra classes merged onto the rendered root element */
  className?: string;
}

const SPINE_NARROW = 14;
const SPINE_WIDE = 22;
const WIDE_BREAKPOINT = 640;
const TRANSITION_MS = 420;
const STAGGER_MS = 90;
const ENTER_MS = 380;
const SPRING_EASE = "cubic-bezier(0.34, 1.56, 0.64, 1)";
const MIN_ACTIVE_WIDTH = 200;

function clamp(n: number, min: number, max: number) {
  return Math.min(max, Math.max(min, n));
}

export const SpineStack = forwardRef<SpineStackHandle, SpineStackProps>(function SpineStack(
  { initial, onNavigate, className = "" },
  ref
) {
  const [stack, setStack] = useState<SpineStackLevel[]>(() => [initial]);
  const [collapsingIds, setCollapsingIds] = useState<string[]>([]); // newest-first
  const [poppingTarget, setPoppingTarget] = useState<string | null>(null);
  const [hoveredId, setHoveredId] = useState<string | null>(null);
  const [focusedId, setFocusedId] = useState<string | null>(null);
  const [containerWidth, setContainerWidth] = useState(0);
  const [reducedMotion, setReducedMotion] = useState(false);
  const [enteringId, setEnteringId] = useState<string | null>(null);

  const containerRef = useRef<HTMLDivElement>(null);
  const headingRef = useRef<HTMLHeadingElement>(null);
  const isAnimatingRef = useRef(false);
  const commitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const enterTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const isFirstRenderRef = useRef(true);

  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    setReducedMotion(mq.matches);
    const onChange = () => setReducedMotion(mq.matches);
    mq.addEventListener("change", onChange);
    return () => mq.removeEventListener("change", onChange);
  }, []);

  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    setContainerWidth(el.getBoundingClientRect().width);
    const ro = new ResizeObserver((entries) => {
      const w = entries[0]?.contentRect.width;
      if (w) setContainerWidth(w);
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  useEffect(
    () => () => {
      if (commitTimeoutRef.current) clearTimeout(commitTimeoutRef.current);
      if (enterTimeoutRef.current) clearTimeout(enterTimeoutRef.current);
    },
    []
  );

  const activeId = poppingTarget ?? stack[stack.length - 1].id;

  useEffect(() => {
    if (hoveredId === activeId || (hoveredId && !stack.some((level) => level.id === hoveredId))) {
      setHoveredId(null);
    }
  }, [activeId, hoveredId, stack]);

  // focus + onNavigate fire once the *committed* top settles (immediately on
  // push, or once a pop's cascade actually truncates the stack) — never
  // mid-cascade, and never on first mount.
  const committedActiveId = stack[stack.length - 1].id;
  useEffect(() => {
    if (isFirstRenderRef.current) {
      isFirstRenderRef.current = false;
      return;
    }
    if (poppingTarget) return; // still mid-cascade; effect re-fires once it clears
    headingRef.current?.focus({ preventScroll: true });
    onNavigate?.(committedActiveId);
    // eslint-disable-next-line react-hooks/exhaustive-deps -- onNavigate intentionally excluded, fires on id change only
  }, [committedActiveId, poppingTarget]);

  const push = useCallback(
    (level: SpineStackLevel) => {
      if (isAnimatingRef.current) return;
      setStack((prev) => {
        if (prev.some((l) => l.id === level.id)) return prev;
        return [...prev, level];
      });
      if (enterTimeoutRef.current) clearTimeout(enterTimeoutRef.current);
      if (!reducedMotion) {
        setEnteringId(level.id);
        enterTimeoutRef.current = setTimeout(() => setEnteringId(null), ENTER_MS);
      }
    },
    [reducedMotion]
  );

  const popTo = useCallback(
    (id: string) => {
      if (isAnimatingRef.current) return;
      const idx = stack.findIndex((l) => l.id === id);
      if (idx === -1 || idx === stack.length - 1) return;
      const above = stack
        .slice(idx + 1)
        .map((l) => l.id)
        .reverse(); // newest (most recently pushed) first

      if (reducedMotion) {
        setStack((prev) => prev.slice(0, idx + 1));
        return;
      }

      isAnimatingRef.current = true;
      setPoppingTarget(id);
      setCollapsingIds(above);
      const total = (above.length - 1) * STAGGER_MS + TRANSITION_MS + 40;
      commitTimeoutRef.current = setTimeout(() => {
        setStack((prev) => prev.slice(0, idx + 1));
        setCollapsingIds([]);
        setPoppingTarget(null);
        isAnimatingRef.current = false;
      }, total);
    },
    [stack, reducedMotion]
  );

  const pop = useCallback(() => {
    if (stack.length < 2) return;
    popTo(stack[stack.length - 2].id);
  }, [stack, popTo]);

  const reset = useCallback((level: SpineStackLevel) => {
    if (commitTimeoutRef.current) clearTimeout(commitTimeoutRef.current);
    if (enterTimeoutRef.current) clearTimeout(enterTimeoutRef.current);
    isAnimatingRef.current = false;
    setCollapsingIds([]);
    setPoppingTarget(null);
    setEnteringId(null);
    setStack([level]);
  }, []);

  useImperativeHandle(ref, () => ({ push, popTo, pop, reset }), [push, popTo, pop, reset]);

  const wide = containerWidth >= WIDE_BREAKPOINT;
  const spineWidthFor = (id: string) => {
    if (collapsingIds.includes(id)) return 0;
    return wide || hoveredId === id || focusedId === id ? SPINE_WIDE : SPINE_NARROW;
  };
  const spinesTotal = stack.reduce((sum, l) => sum + (l.id === activeId ? 0 : spineWidthFor(l.id)), 0);
  const GAP = 3;
  const gapCount = Math.max(0, stack.length - 1);
  const activeWidth = containerWidth
    ? clamp(containerWidth - spinesTotal - gapCount * GAP, MIN_ACTIVE_WIDTH, containerWidth)
    : undefined;

  const navLabel = `Navigation history, ${stack.length} level${stack.length === 1 ? "" : "s"}`;

  return (
    <div
      ref={containerRef}
      className={["ns-drill-down-spines relative flex h-full w-full overflow-hidden", className]
        .filter(Boolean)
        .join(" ")}
    >
      <style>{`
.ns-drill-down-spines .ns-level{transition:width ${TRANSITION_MS}ms ${SPRING_EASE},opacity ${TRANSITION_MS}ms ease-out;}
.ns-drill-down-spines .ns-spine-face,
.ns-drill-down-spines .ns-active-face{transition:opacity ${TRANSITION_MS}ms ease-out;}
.ns-drill-down-spines .ns-spine-label{transition:opacity 200ms ease-out;}
.ns-drill-down-spines .ns-spine-enter{animation:ns-spine-enter ${ENTER_MS}ms ${SPRING_EASE};}
@keyframes ns-spine-enter{
  from{opacity:0.35;transform:translateX(18px);}
  to{opacity:1;transform:translateX(0);}
}
@media (prefers-reduced-motion: reduce){
  .ns-drill-down-spines .ns-level,
  .ns-drill-down-spines .ns-spine-face,
  .ns-drill-down-spines .ns-active-face,
  .ns-drill-down-spines .ns-spine-label{transition:none !important;}
  .ns-drill-down-spines .ns-spine-enter{animation:none !important;}
}
`}</style>

      <nav aria-label={navLabel} className="flex h-full w-full" style={{ gap: GAP }}>
        {stack.map((level) => {
          const isActive = level.id === activeId;
          const collapsing = !isActive && collapsingIds.includes(level.id);
          const collapseIndex = collapsingIds.indexOf(level.id);
          const width = isActive ? activeWidth : spineWidthFor(level.id);
          const isWideSpine = !isActive && width === SPINE_WIDE;
          return (
            <div
              key={level.id}
              style={{
                width,
                minWidth: isActive ? MIN_ACTIVE_WIDTH : width,
                opacity: collapsing ? 0 : 1,
                transitionDelay: collapsing ? `${collapseIndex * STAGGER_MS}ms` : "0ms",
              }}
              className={[
                "ns-level relative h-full shrink-0 overflow-hidden rounded-md border border-border bg-surface",
                enteringId === level.id ? "ns-spine-enter" : "",
              ]
                .filter(Boolean)
                .join(" ")}
            >
              {/* spine face — the level's resting/collapsed representation. Stays mounted
                  even while the active face is showing, so the width transition (on the
                  shared wrapper above) and this opacity crossfade run on ONE persistent
                  element, not a remount between two different DOM nodes. */}
              <button
                type="button"
                data-slot="spine"
                aria-label={level.title}
                title={level.title}
                inert={isActive || undefined}
                onClick={() => popTo(level.id)}
                onMouseEnter={() => setHoveredId(level.id)}
                onMouseLeave={() => setHoveredId((h) => (h === level.id ? null : h))}
                onFocus={() => setFocusedId(level.id)}
                onBlur={() => setFocusedId((f) => (f === level.id ? null : f))}
                style={{
                  opacity: isActive ? 0 : 1,
                  visibility: isActive ? "hidden" : "visible",
                  pointerEvents: isActive ? "none" : undefined,
                  boxShadow: "inset -1px 0 0 0 color-mix(in srgb, var(--foreground) 22%, transparent)",
                }}
                className="ns-spine-face absolute inset-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ns-accent"
              >
                <span
                  aria-hidden
                  className="ns-spine-label pointer-events-none absolute inset-0 flex items-center justify-center overflow-hidden whitespace-nowrap px-1 font-mono text-[10px] tracking-wide text-ns-muted"
                  style={{
                    writingMode: "vertical-rl",
                    textOverflow: "ellipsis",
                    opacity: isWideSpine ? 0 : 1,
                  }}
                >
                  {level.title}
                </span>
                <span
                  aria-hidden
                  className="ns-spine-label pointer-events-none absolute inset-0 flex items-center overflow-hidden whitespace-nowrap px-1.5 font-mono text-[10px] tracking-wide text-ellipsis text-ns-muted"
                  style={{ opacity: isWideSpine ? 1 : 0 }}
                >
                  {level.title}
                </span>
              </button>

              {/* active face — the level's full page. Mounted for every level, always,
                  so a spine popping back to active re-inflates in place instead of
                  swapping to a freshly-mounted pane. */}
              <div
                inert={isActive ? undefined : true}
                style={{
                  opacity: isActive ? 1 : 0,
                  visibility: isActive ? "visible" : "hidden",
                  pointerEvents: isActive ? undefined : "none",
                }}
                className="ns-active-face absolute inset-0 overflow-auto bg-background"
              >
                <div className="flex h-full flex-col p-4">
                  <h2
                    ref={isActive ? headingRef : undefined}
                    tabIndex={-1}
                    className="mb-3 text-base font-semibold tracking-tight text-foreground outline-none"
                  >
                    {level.title}
                  </h2>
                  <div className="min-h-0 flex-1">{level.content}</div>
                </div>
              </div>
            </div>
          );
        })}
      </nav>
    </div>
  );
});