nextworks 0.2.0-alpha.2 → 0.2.0-alpha.21

package/dist/kits/blocks/components/sections/product-demo/DemoWindow.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import type { ProductDemoStatusTone, ProductDemoWindowMeta } from "./types";
+
+export interface DemoWindowProps {
+  window: ProductDemoWindowMeta;
+  className?: string;
+  contentClassName?: string;
+  chromeClassName?: string;
+  bodyClassName?: string;
+  active?: boolean;
+  dimmed?: boolean;
+  enableMotion?: boolean;
+  showControls?: boolean;
+  showResizeHandle?: boolean;
+  showHeader?: boolean;
+  children?: React.ReactNode;
+}
+
+const STATUS_TONE_CLASSES: Record<ProductDemoStatusTone, string> = {
+  neutral:
+    "border-[var(--demo-border)] bg-[var(--demo-panel-bg)] text-[var(--demo-muted-fg)]",
+  info: "border-[var(--demo-info-border)] bg-[var(--demo-info-soft-bg)] text-[var(--demo-info)]",
+  success:
+    "border-[var(--demo-success-border)] bg-[var(--demo-success-soft-bg)] text-[var(--demo-success)]",
+  warning:
+    "border-[var(--demo-warning-border)] bg-[var(--demo-warning-soft-bg)] text-[var(--demo-warning)]",
+  danger:
+    "border-[var(--demo-danger-border)] bg-[var(--demo-danger-soft-bg)] text-[var(--demo-danger)]",
+};
+
+export function DemoWindow({
+  window,
+  className,
+  contentClassName,
+  chromeClassName,
+  bodyClassName,
+  active = false,
+  dimmed = false,
+  enableMotion = true,
+  showControls = true,
+  showResizeHandle = true,
+  showHeader = true,
+  children,
+}: DemoWindowProps) {
+  const statusTone = window.status?.tone ?? "neutral";
+
+  return (
+    <section
+      className={cn(
+        "group relative flex h-full min-h-[14rem] flex-col overflow-hidden border border-[var(--demo-border)] bg-[var(--demo-shell-bg)] text-[var(--demo-fg)] shadow-none [font-synthesis:none] antialiased",
+
+        "before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.68),transparent)] before:opacity-70 dark:before:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.16),transparent)] dark:before:opacity-100",
+        "after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-8 after:bg-[linear-gradient(180deg,transparent,rgba(15,23,42,0.03))] dark:after:bg-[linear-gradient(180deg,transparent,rgba(255,255,255,0.02))]",
+        enableMotion &&
+          "transition-[opacity,border-color,background-color] duration-500 ease-out motion-reduce:transition-none",
+        active && "border-[var(--demo-border-strong)]",
+
+        dimmed && "opacity-90",
+        className,
+      )}
+      data-product-demo-window={window.key}
+      data-active={active ? "true" : "false"}
+      aria-label={window.title}
+    >
+      {showHeader ? (
+        <header
+          className={cn(
+            "relative flex min-h-[3.25rem] items-center justify-between gap-3 border-b border-[var(--demo-border)] bg-[var(--demo-shell-muted-bg)] px-4 py-2.5 [font-synthesis:none] antialiased sm:px-5",
+
+            chromeClassName,
+          )}
+        >
+          <div className="flex min-w-0 items-center gap-3">
+            {showControls && (
+              <div className="flex items-center gap-1.5 opacity-75 transition-opacity duration-200 group-hover:opacity-100">
+                <span className="h-2.5 w-2.5 rounded-full bg-rose-400/90" />
+                <span className="h-2.5 w-2.5 rounded-full bg-amber-400/90" />
+                <span className="h-2.5 w-2.5 rounded-full bg-emerald-400/90" />
+              </div>
+            )}
+
+            <div className="min-w-0 flex items-center gap-2 overflow-hidden">
+              <div className="flex min-w-0 items-center gap-2 whitespace-nowrap">
+                <h3 className="shrink-0 text-sm font-semibold tracking-[-0.02em] text-[var(--demo-fg)] sm:text-[0.95rem]">
+                  {window.title}
+                </h3>
+                {window.badge && (
+                  <span className="rounded-full border border-[var(--demo-border)] bg-[var(--demo-panel-bg)] px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.16em] text-[var(--demo-muted-fg)]">
+                    {window.badge}
+                  </span>
+                )}
+                {window.subtitle && (
+                  <p className="min-w-0 truncate text-[11px] leading-5 tracking-[0.005em] text-[var(--demo-muted-fg)] sm:text-[0.8rem]">
+                    {window.subtitle}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {window.status?.label && (
+            <span
+              className={cn(
+                "shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.16em]",
+                STATUS_TONE_CLASSES[statusTone],
+                "hidden sm:inline-flex",
+              )}
+            >
+              {window.status.label}
+            </span>
+          )}
+        </header>
+      ) : null}
+
+      <div
+        className={cn(
+          "relative flex-1 min-h-0 px-4 py-4 sm:px-5 sm:py-5",
+
+          bodyClassName,
+        )}
+      >
+        <div className={cn("h-full", contentClassName)}>{children}</div>
+
+        {showResizeHandle && (
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute bottom-3 right-3 h-4 w-4 opacity-0 transition-opacity duration-200 group-hover:opacity-70"
+          >
+            <span className="absolute bottom-0 right-0 h-px w-3 rotate-45 bg-[var(--demo-border-strong)]" />
+            <span className="absolute bottom-1 right-0 h-px w-2 rotate-45 bg-[var(--demo-border)]" />
+            <span className="absolute bottom-0 right-1 h-px w-2 rotate-45 bg-[var(--demo-border)]" />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

package/dist/kits/blocks/components/sections/product-demo/KnowledgePanel.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import type {
+  ProductDemoKnowledgePanelState,
+  ProductDemoStatusTone,
+} from "./types";
+
+export interface KnowledgePanelProps {
+  state: ProductDemoKnowledgePanelState;
+}
+
+const STATUS_TONE_CLASSES: Record<ProductDemoStatusTone, string> = {
+  neutral:
+    "border-[var(--demo-border)] bg-[var(--demo-panel-bg)] text-[var(--demo-muted-fg)]",
+  info: "border-[var(--demo-info-border)] bg-[var(--demo-info-soft-bg)] text-[var(--demo-info)]",
+  success:
+    "border-[var(--demo-success-border)] bg-[var(--demo-success-soft-bg)] text-[var(--demo-success)]",
+  warning:
+    "border-[var(--demo-warning-border)] bg-[var(--demo-warning-soft-bg)] text-[var(--demo-warning)]",
+  danger:
+    "border-[var(--demo-danger-border)] bg-[var(--demo-danger-soft-bg)] text-[var(--demo-danger)]",
+};
+
+function getStatusClass(tone: ProductDemoStatusTone = "neutral") {
+  return STATUS_TONE_CLASSES[tone];
+}
+
+export function KnowledgePanel({ state }: KnowledgePanelProps) {
+  return (
+    <div className="flex h-full flex-col gap-4 text-[var(--demo-fg)]">
+      <div className="space-y-1.5">
+        {state.title && (
+          <h4 className="text-sm font-semibold text-[var(--demo-fg)]">
+            {state.title}
+          </h4>
+        )}
+        {state.subtitle && (
+          <p className="text-xs leading-relaxed text-[var(--demo-muted-fg)]">
+            {state.subtitle}
+          </p>
+        )}
+      </div>
+
+      {state.query && (
+        <div className="rounded-xl border border-[var(--demo-info-border)] bg-[var(--demo-info-soft-bg)] px-3 py-2 text-xs text-[var(--demo-info)]">
+          {state.query}
+        </div>
+      )}
+
+      {state.summary && (
+        <p className="text-xs leading-relaxed text-[var(--demo-muted-fg)]">
+          {state.summary}
+        </p>
+      )}
+
+      {state.sources?.length ? (
+        <div className="flex flex-wrap gap-2">
+          {state.sources.map((source) => (
+            <span
+              key={source.id}
+              className={cn(
+                "rounded-full border px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.14em]",
+                getStatusClass(source.status),
+              )}
+            >
+              {source.label}
+              {source.kind ? ` • ${source.kind}` : ""}
+            </span>
+          ))}
+        </div>
+      ) : null}
+
+      <div className="space-y-3">
+        {state.snippets.map((snippet) => {
+          const isActive =
+            snippet.id === state.activeSnippetId || snippet.highlighted;
+          const source = state.sources?.find(
+            (item) => item.id === snippet.sourceId,
+          );
+
+          return (
+            <div
+              key={snippet.id}
+              className={cn(
+                "rounded-2xl border border-[var(--demo-border)] bg-[var(--demo-panel-bg)] p-3",
+                isActive &&
+                  "border-[var(--demo-info-border)] bg-[var(--demo-info-soft-bg)] shadow-sm",
+              )}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <div className="text-sm font-semibold text-[var(--demo-fg)]">
+                    {snippet.title}
+                  </div>
+                  {(snippet.excerptLabel || source?.label) && (
+                    <div className="mt-1 text-[11px] text-[var(--demo-muted-fg)]">
+                      {[snippet.excerptLabel, source?.label]
+                        .filter(Boolean)
+                        .join(" • ")}
+                    </div>
+                  )}
+                </div>
+                {snippet.confidence && (
+                  <span className="rounded-full border border-[var(--demo-border)] bg-[var(--demo-panel-muted-bg)] px-2 py-1 text-[10px] font-medium uppercase tracking-[0.14em] text-[var(--demo-muted-fg)]">
+                    {snippet.confidence}
+                  </span>
+                )}
+              </div>
+              <p className="mt-2 text-xs leading-relaxed text-[var(--demo-muted-fg)]">
+                {snippet.content}
+              </p>
+              {snippet.tags?.length ? (
+                <div className="mt-3 flex flex-wrap gap-2">
+                  {snippet.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="rounded-full border border-[var(--demo-border)] bg-[var(--demo-panel-bg)] px-2 py-0.5 text-[10px] text-[var(--demo-muted-fg)]"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/dist/kits/blocks/components/sections/product-demo/RunConsolePanel.tsx

@@ -0,0 +1,430 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import type { ProductDemoRunConsoleState } from "./types";
+
+export interface RunConsolePanelProps {
+  state: ProductDemoRunConsoleState;
+}
+
+export function RunConsolePanel({ state }: RunConsolePanelProps) {
+  const scrollViewportRef = React.useRef<HTMLDivElement | null>(null);
+  const scrollbarTrackRef = React.useRef<HTMLDivElement | null>(null);
+  const dragStateRef = React.useRef<{
+    pointerId: number;
+    startY: number;
+    startScrollTop: number;
+    scrollRatio: number;
+    pointerOffsetY: number;
+  } | null>(null);
+  const playbackMs = state.playbackMs ?? 1800;
+  const playbackStepEntryIndices = state.playbackStepEntryIndices ?? [];
+  const playbackStepVisibleLineCounts =
+    state.playbackStepVisibleLineCounts ?? [];
+  const [activeIndex, setActiveIndex] = React.useState(
+    Math.max(
+      0,
+      state.entries.findIndex(
+        (entry) => entry.id === state.activeEntryId || entry.highlighted,
+      ),
+    ),
+  );
+
+  React.useEffect(() => {
+    const preferredIndex = state.entries.findIndex(
+      (entry) => entry.id === state.activeEntryId || entry.highlighted,
+    );
+
+    if (typeof state.playbackStep === "number") {
+      const mappedIndex = playbackStepEntryIndices[state.playbackStep - 1];
+      const syncedIndex = Math.min(
+        Math.max(
+          typeof mappedIndex === "number"
+            ? mappedIndex
+            : state.playbackStep - 2,
+          0,
+        ),
+        Math.max(state.entries.length - 1, 0),
+      );
+      setActiveIndex(syncedIndex);
+      return;
+    }
+
+    setActiveIndex(Math.max(0, preferredIndex));
+
+    if (state.entries.length <= 1) {
+      return;
+    }
+
+    const interval = window.setInterval(() => {
+      setActiveIndex((current) => (current + 1) % state.entries.length);
+    }, playbackMs);
+
+    return () => window.clearInterval(interval);
+  }, [
+    playbackMs,
+    playbackStepEntryIndices,
+    state.activeEntryId,
+    state.entries,
+    state.title,
+    state.playbackStep,
+  ]);
+
+  const fallbackCodeEntry =
+    state.entries.find((entry) => (entry.code?.length ?? 0) > 0) ??
+    state.entries[0];
+  const activeEntry = state.entries[activeIndex] ?? state.entries[0];
+  const displayEntry =
+    (activeEntry?.code?.length ?? 0) > 0 ? activeEntry : fallbackCodeEntry;
+  const activeCode = displayEntry?.code ?? [];
+  const startLine = Number(
+    displayEntry?.lineNumber ?? activeEntry?.lineNumber ?? 24,
+  );
+  const activeLineCount = Math.max(1, activeCode.length || 1);
+  const [visibleLineCount, setVisibleLineCount] = React.useState(
+    Math.max(1, Math.min(2, activeCode.length || 1)),
+  );
+  const [scrollMetrics, setScrollMetrics] = React.useState({
+    scrollTop: 0,
+    scrollHeight: 1,
+    clientHeight: 1,
+  });
+
+  React.useEffect(() => {
+    if (typeof state.playbackStep === "number") {
+      const mappedVisibleCount =
+        playbackStepVisibleLineCounts[state.playbackStep - 1];
+      const revealFromStep = Math.max(state.playbackStep - 1, 1);
+      const syncedVisibleCount = Math.min(
+        activeCode.length || 1,
+        Math.max(
+          1,
+          typeof mappedVisibleCount === "number"
+            ? mappedVisibleCount
+            : revealFromStep * 2,
+        ),
+      );
+      setVisibleLineCount(syncedVisibleCount);
+      return;
+    }
+
+    setVisibleLineCount(Math.max(1, Math.min(2, activeCode.length || 1)));
+
+    if (activeCode.length <= 2) {
+      return;
+    }
+
+    const interval = window.setInterval(
+      () => {
+        setVisibleLineCount((current) => {
+          if (current >= activeCode.length) {
+            return Math.max(1, Math.min(2, activeCode.length));
+          }
+
+          return current + 1;
+        });
+      },
+      Math.max(
+        520,
+        Math.round(playbackMs / Math.max(activeCode.length - 1, 1)),
+      ),
+    );
+
+    return () => window.clearInterval(interval);
+  }, [
+    activeCode,
+    playbackMs,
+    playbackStepVisibleLineCounts,
+    activeEntry?.id,
+    state.playbackStep,
+  ]);
+
+  React.useEffect(() => {
+    const viewport = scrollViewportRef.current;
+
+    if (!viewport) {
+      return;
+    }
+
+    const updateScrollMetrics = () => {
+      setScrollMetrics({
+        scrollTop: viewport.scrollTop,
+        scrollHeight: viewport.scrollHeight,
+        clientHeight: viewport.clientHeight,
+      });
+    };
+
+    updateScrollMetrics();
+
+    viewport.addEventListener("scroll", updateScrollMetrics, {
+      passive: true,
+    });
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateScrollMetrics();
+    });
+
+    resizeObserver.observe(viewport);
+
+    if (viewport.firstElementChild instanceof HTMLElement) {
+      resizeObserver.observe(viewport.firstElementChild);
+    }
+
+    window.addEventListener("resize", updateScrollMetrics);
+
+    return () => {
+      viewport.removeEventListener("scroll", updateScrollMetrics);
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updateScrollMetrics);
+    };
+  }, [visibleLineCount, activeEntry?.id, activeCode.length]);
+
+  const visibleCode = activeCode.slice(0, visibleLineCount);
+  const hasOverflow =
+    scrollMetrics.scrollHeight > scrollMetrics.clientHeight + 1;
+  const thumbHeight = hasOverflow
+    ? Math.max(
+        36,
+        (scrollMetrics.clientHeight / scrollMetrics.scrollHeight) *
+          scrollMetrics.clientHeight,
+      )
+    : 0;
+  const maxThumbOffset = Math.max(scrollMetrics.clientHeight - thumbHeight, 0);
+  const maxScrollTop = Math.max(
+    scrollMetrics.scrollHeight - scrollMetrics.clientHeight,
+    1,
+  );
+  const thumbOffset = hasOverflow
+    ? (scrollMetrics.scrollTop / maxScrollTop) * maxThumbOffset
+    : 0;
+
+  const updateScrollTopFromPointer = React.useCallback(
+    (clientY: number) => {
+      const viewport = scrollViewportRef.current;
+      const track = scrollbarTrackRef.current;
+
+      if (!viewport || !track || !hasOverflow) {
+        return;
+      }
+
+      const trackRect = track.getBoundingClientRect();
+      const nextThumbTop = Math.min(
+        Math.max(
+          clientY - trackRect.top - dragStateRef.current!.pointerOffsetY,
+          0,
+        ),
+        maxThumbOffset,
+      );
+      const nextScrollTop =
+        maxThumbOffset > 0 ? (nextThumbTop / maxThumbOffset) * maxScrollTop : 0;
+
+      viewport.scrollTop = nextScrollTop;
+    },
+    [hasOverflow, maxScrollTop, maxThumbOffset],
+  );
+
+  const handleScrollbarPointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const viewport = scrollViewportRef.current;
+      const track = scrollbarTrackRef.current;
+
+      if (!viewport || !track || !hasOverflow) {
+        return;
+      }
+
+      const trackRect = track.getBoundingClientRect();
+      const targetElement = event.target as HTMLElement | null;
+      const clickedThumb = targetElement?.dataset.scrollbarThumb === "true";
+      const pointerOffsetY = clickedThumb
+        ? event.clientY - trackRect.top - thumbOffset
+        : thumbHeight / 2;
+
+      dragStateRef.current = {
+        pointerId: event.pointerId,
+        startY: event.clientY,
+        startScrollTop: viewport.scrollTop,
+        scrollRatio: maxThumbOffset > 0 ? maxScrollTop / maxThumbOffset : 0,
+        pointerOffsetY,
+      };
+
+      if (!clickedThumb) {
+        updateScrollTopFromPointer(event.clientY);
+      }
+
+      (event.currentTarget as HTMLDivElement).setPointerCapture(
+        event.pointerId,
+      );
+      event.preventDefault();
+    },
+    [
+      hasOverflow,
+      maxScrollTop,
+      maxThumbOffset,
+      thumbHeight,
+      thumbOffset,
+      updateScrollTopFromPointer,
+    ],
+  );
+
+  const handleScrollbarPointerMove = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const dragState = dragStateRef.current;
+
+      if (!dragState || dragState.pointerId !== event.pointerId) {
+        return;
+      }
+
+      const viewport = scrollViewportRef.current;
+      const track = scrollbarTrackRef.current;
+
+      if (!viewport || !track || !hasOverflow) {
+        return;
+      }
+
+      const deltaY = event.clientY - dragState.startY;
+      const nextScrollTop = Math.min(
+        Math.max(dragState.startScrollTop + deltaY * dragState.scrollRatio, 0),
+        maxScrollTop,
+      );
+
+      viewport.scrollTop = nextScrollTop;
+      event.preventDefault();
+    },
+    [hasOverflow, maxScrollTop],
+  );
+
+  const handleScrollbarPointerUp = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const dragState = dragStateRef.current;
+
+      if (dragState?.pointerId === event.pointerId) {
+        dragStateRef.current = null;
+      }
+    },
+    [],
+  );
+
+  return (
+    <div className="flex h-full min-h-0 flex-col text-[var(--demo-fg)] [font-synthesis:none] antialiased">
+      <div className="flex min-h-0 flex-1 overflow-hidden rounded-none border border-[var(--demo-border)] bg-[var(--demo-code-bg)] shadow-none">
+        <div className="relative flex min-h-0 min-w-0 flex-1 flex-col">
+          <div
+            ref={scrollViewportRef}
+            className="grid min-h-0 flex-1 grid-cols-[3.5rem_minmax(0,1fr)] overflow-y-auto bg-[var(--demo-code-bg)] pr-5 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:overflow-hidden lg:pr-0"
+          >
+            <div className="border-r border-[var(--demo-border)] bg-[var(--demo-code-gutter-bg)] px-2 py-3 font-mono text-[11px] leading-7 text-[var(--demo-subtle-fg)]">
+              {visibleCode.map((line, index) => {
+                const isAdded = line.trimStart().startsWith("+");
+                const isRemoved = line.trimStart().startsWith("-");
+
+                return (
+                  <div
+                    key={`${startLine + index}`}
+                    className={cn(
+                      "text-right",
+                      isAdded && "text-[var(--demo-info)]",
+                      isRemoved && "text-[var(--demo-danger)]",
+                    )}
+                  >
+                    {startLine + index}
+                  </div>
+                );
+              })}
+            </div>
+
+            <div className="relative min-h-full bg-[var(--demo-code-bg)] px-3 py-3 font-mono text-[12px] leading-7 text-[var(--demo-fg)]">
+              <div>
+                {visibleCode.map((line, index) => {
+                  const isAdded = line.trimStart().startsWith("+");
+                  const isRemoved = line.trimStart().startsWith("-");
+
+                  return (
+                    <div
+                      key={`${line}-${index}`}
+                      className={cn(
+                        "flex border-l border-transparent pl-3 transition-colors duration-300",
+                        isAdded &&
+                          "border-[var(--demo-info-border)] bg-[var(--demo-info-soft-bg)] text-[var(--demo-fg)]",
+                        isRemoved &&
+                          "border-[var(--demo-danger-border)] bg-[var(--demo-danger-soft-bg)] text-[var(--demo-fg)]",
+                        !isAdded && !isRemoved && "text-[var(--demo-muted-fg)]",
+
+                        displayEntry?.highlighted &&
+                          index === Math.min(1, visibleCode.length - 1) &&
+                          "animate-pulse",
+                      )}
+                    >
+                      <span
+                        className={cn(
+                          "mr-3 w-3 shrink-0 text-center text-[11px]",
+                          isAdded
+                            ? "text-[var(--demo-info)]"
+                            : isRemoved
+                              ? "text-[var(--demo-danger)]"
+                              : "text-[var(--demo-subtle-fg)]",
+                        )}
+                      >
+                        {isAdded ? "+" : isRemoved ? "-" : " "}
+                      </span>
+                      <span className="min-w-0 flex-1 whitespace-pre-wrap break-words">
+                        {isAdded || isRemoved
+                          ? line.slice(1).trimStart()
+                          : line}
+                      </span>
+                    </div>
+                  );
+                })}
+
+                {displayEntry?.highlighted &&
+                visibleLineCount < activeLineCount ? (
+                  <div className="mt-2 flex items-center gap-2 pl-3 text-[11px] text-[var(--demo-subtle-fg)]">
+                    <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--demo-accent)]" />
+                    Applying change...
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+
+          {hasOverflow ? (
+            <div
+              ref={scrollbarTrackRef}
+              aria-hidden="true"
+              onPointerDown={handleScrollbarPointerDown}
+              onPointerMove={handleScrollbarPointerMove}
+              onPointerUp={handleScrollbarPointerUp}
+              onPointerCancel={handleScrollbarPointerUp}
+              className="absolute inset-y-3 right-1.5 w-[10px] cursor-pointer overflow-hidden rounded-full bg-[var(--demo-scroll-track)] lg:hidden"
+            >
+              <div
+                data-scrollbar-thumb="true"
+                className="absolute inset-x-1 rounded-full bg-[var(--demo-scroll-thumb)] shadow-[inset_0_1px_0_rgba(255,255,255,0.35)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] will-change-transform"
+                style={{
+                  height: `${thumbHeight}px`,
+                  transform: `translateY(${thumbOffset}px)`,
+                }}
+              />
+            </div>
+          ) : null}
+        </div>
+
+        {state.metrics?.length ? (
+          <div className="hidden w-[6.75rem] shrink-0 border-l border-[var(--demo-border)] bg-[var(--demo-panel-muted-bg)] p-2 lg:flex lg:flex-col lg:gap-2">
+            {state.metrics.map((metric) => (
+              <div
+                key={metric.id}
+                className="rounded-md border border-[var(--demo-border)] bg-[var(--demo-panel-bg)] px-2 py-2 text-center"
+              >
+                <div className="text-[10px] uppercase tracking-[0.16em] text-[var(--demo-subtle-fg)]">
+                  {metric.label}
+                </div>
+                <div className="mt-1 font-mono text-[12px] text-[var(--demo-fg)]">
+                  {metric.value}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}