@kestack/web-platform 0.0.1 → 0.0.2

package/src/recipes/kabuki-devtools/sheet/sheet.tsx

@@ -7,15 +7,16 @@ import { ink } from '../ink/index.ts';
 import type { Tone } from '../ink/index.ts';
 
 /*
- * The Sheet: the data of what is picked, along the bottom of the Inspector.
+ * The Sheet: the data of what is picked, over the Map.
  *
- * 1. Open   it grows up from the bottom, quickly, and shrinks away when
- *           closed. Picking something else changes what it says in place:
- *           it never closes and opens again.
- * 2. Fit    on a wide Inspector it is a section of its own under the Map,
- *           what is picked on its left and each value in a column beside
- *           it; on a narrow one it is a drawer over the Map, the full width,
- *           everything stacked.
+ * 1. Open   it slides in quickly, and away when closed. Picking something
+ *           else changes what it says in place: it never closes and opens
+ *           again.
+ * 2. Fit    on a wide Inspector it is a panel floating on the Map's right,
+ *           as tall as it needs and no taller than the Map; on a narrow one
+ *           it is a drawer from the bottom, the full width. Either way
+ *           everything is stacked, since every value is a tree that grows
+ *           down.
  * 3. Read   what it is and its name, a few facts, a list such as its
  *           Workers, then each value as a tree.
  */
@@ -66,108 +67,97 @@ export function Sheet({
     <motion.section
       aria-label={`${kind} ${title}`}
       className={cn(
-        // 2. Fit: a drawer over the Map when narrow, a section under it when wide.
-        'bg-background absolute inset-x-0 bottom-0 z-30 flex max-h-[65%] flex-col overflow-hidden border-t @3xl:max-h-72',
-        'rounded-t-xl shadow-[0_-1px_2px_rgb(0_0_0/0.04),0_-8px_24px_rgb(0_0_0/0.08)]',
-        '@3xl:relative @3xl:z-auto @3xl:shrink-0 @3xl:rounded-none @3xl:shadow-none',
+        'bg-popover text-popover-foreground absolute z-30 flex flex-col overflow-hidden border',
+        'shadow-[0_1px_2px_rgb(0_0_0/0.06),0_12px_32px_rgb(0_0_0/0.16)]',
+        // 2. Fit: a drawer from the bottom when narrow, a panel on the right when wide.
+        'inset-x-0 bottom-0 max-h-[70%] rounded-t-xl border-b-0',
+        '@3xl:inset-x-auto @3xl:top-3 @3xl:right-3 @3xl:bottom-auto @3xl:max-h-[calc(100%-1.5rem)] @3xl:w-88 @3xl:rounded-xl @3xl:border-b',
       )}
-      initial={still ? false : { height: 0 }}
-      animate={{ height: 'auto' }}
+      initial={still ? false : { opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
       exit={
         still
-          ? { height: 0, transition: { duration: 0 } }
-          : { height: 0, transition: { duration: 0.12, ease: 'easeIn' } }
+          ? { opacity: 0, transition: { duration: 0 } }
+          : { opacity: 0, y: 8, transition: { duration: 0.12, ease: 'easeIn' } }
       }
-      transition={{ duration: 0.18, ease: OUT }}
+      transition={{ duration: 0.2, ease: OUT }}
     >
-      <div className="flex min-h-0 flex-1 flex-col">
-        {/* 3. Read: what it is */}
-        <header className="flex shrink-0 items-center gap-3 px-4 pt-3 pb-2">
-          <div className="min-w-0 flex-1">
-            <p
-              className="text-[10.5px] font-medium tracking-wider uppercase"
-              style={{ color: ink(tone) }}
-            >
-              {kind}
-            </p>
-            <h2 className="truncate text-sm font-semibold">{title}</h2>
-          </div>
-          <button
-            type="button"
-            aria-label="Close"
-            onClick={onClose}
-            className="text-muted-foreground hover:text-foreground hover:bg-muted grid size-8 shrink-0 place-items-center rounded-md transition-colors duration-150 outline-none focus-visible:ring-2 [&_svg]:size-4"
-          >
-            <X />
-          </button>
-        </header>
+      {/* 3. Read: what it is */}
+      <header className="flex shrink-0 items-start gap-3 border-b px-4 py-3">
+        <div className="min-w-0 flex-1">
+          <p className="text-muted-foreground flex items-center gap-1.5 text-[11px] font-medium">
+            <span
+              className="size-1.5 rounded-full"
+              style={{ backgroundColor: ink(tone) }}
+            />
+            {kind}
+          </p>
+          <h2 className="mt-0.5 truncate text-[15px] font-semibold">{title}</h2>
+        </div>
+        <button
+          type="button"
+          aria-label="Close"
+          onClick={onClose}
+          className="text-muted-foreground hover:text-foreground hover:bg-muted -mr-1.5 grid size-8 shrink-0 place-items-center rounded-md transition-colors duration-150 outline-none focus-visible:ring-2 [&_svg]:size-4"
+        >
+          <X />
+        </button>
+      </header>
 
-        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain px-4 pb-4 @3xl:flex-row @3xl:gap-6 @3xl:overflow-x-auto @3xl:overflow-y-hidden">
-          {(facts.length > 0 || rows) && (
-            <div className="flex shrink-0 flex-col gap-4 @3xl:w-64 @3xl:overflow-y-auto">
-              {facts.length > 0 && (
-                <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-xs">
-                  {facts.map((fact) => (
-                    <div key={fact.label} className="contents">
-                      <dt className="text-muted-foreground">{fact.label}</dt>
-                      <dd className="min-w-0 truncate font-mono text-[11.5px]">
-                        {fact.value}
-                      </dd>
-                    </div>
-                  ))}
-                </dl>
-              )}
-              {rows && (
-                <Part title={rows.title}>
-                  {rows.items.length === 0 ? (
-                    <p className="text-muted-foreground text-xs">
-                      None running.
-                    </p>
-                  ) : (
-                    <ul className="flex flex-col gap-1">
-                      {rows.items.map((row) => (
-                        <li
-                          key={row.label}
-                          className="flex items-center gap-2 text-xs"
-                        >
-                          <span
-                            className="size-1.5 shrink-0 rounded-full"
-                            style={{ backgroundColor: ink(row.tone) }}
-                          />
-                          <span className="min-w-0 flex-1 truncate font-mono text-[11.5px]">
-                            {row.label}
-                          </span>
-                          <span className="text-muted-foreground">
-                            {row.detail}
-                          </span>
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </Part>
-              )}
-            </div>
-          )}
+      <div className="flex min-h-0 flex-col gap-5 overflow-y-auto overscroll-contain px-4 py-3.5">
+        {facts.length > 0 && (
+          <dl className="grid grid-cols-[minmax(4.5rem,auto)_1fr] gap-x-4 gap-y-2 text-xs">
+            {facts.map((fact) => (
+              <div key={fact.label} className="contents">
+                <dt className="text-muted-foreground">{fact.label}</dt>
+                <dd className="min-w-0 truncate font-mono text-[11.5px]">
+                  {fact.value}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        )}
 
-          {/* 3. Read: each value */}
-          {sections.map((section) => (
-            <Part
-              key={section.title}
-              title={section.title}
-              className="@3xl:w-80 @3xl:shrink-0 @3xl:overflow-y-auto"
-            >
-              {section.value !== null && typeof section.value === 'object' ? (
-                <div className="bg-muted/40 rounded-lg border p-2">
-                  <JsonTree value={section.value} collapsed={2} tone="syntax" />
-                </div>
-              ) : (
-                <p className="font-mono text-xs">
-                  {JSON.stringify(section.value) ?? 'nothing'}
-                </p>
-              )}
-            </Part>
-          ))}
-        </div>
+        {rows && (
+          <Part title={rows.title}>
+            {rows.items.length === 0 ? (
+              <p className="text-muted-foreground text-xs">None running.</p>
+            ) : (
+              <ul className="flex flex-col gap-1.5">
+                {rows.items.map((row) => (
+                  <li
+                    key={row.label}
+                    className="flex items-center gap-2 text-xs"
+                  >
+                    <span
+                      className="size-1.5 shrink-0 rounded-full"
+                      style={{ backgroundColor: ink(row.tone) }}
+                    />
+                    <span className="min-w-0 flex-1 truncate font-mono text-[11.5px]">
+                      {row.label}
+                    </span>
+                    <span className="text-muted-foreground">{row.detail}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </Part>
+        )}
+
+        {/* 3. Read: each value */}
+        {sections.map((section) => (
+          <Part key={section.title} title={section.title}>
+            {section.value !== null && typeof section.value === 'object' ? (
+              <div className="bg-muted/40 -mx-1 rounded-lg px-2.5 py-2">
+                <JsonTree value={section.value} collapsed={3} tone="syntax" />
+              </div>
+            ) : (
+              <p className="font-mono text-xs">
+                {JSON.stringify(section.value) ?? 'nothing'}
+              </p>
+            )}
+          </Part>
+        ))}
       </div>
     </motion.section>
   );
@@ -183,10 +173,8 @@ function Part({
   readonly children: ReactNode;
 }) {
   return (
-    <section className={cn('flex flex-col gap-1.5', className)}>
-      <h3 className="text-muted-foreground text-[10.5px] font-medium tracking-wider uppercase">
-        {title}
-      </h3>
+    <section className={cn('flex flex-col gap-2', className)}>
+      <h3 className="text-muted-foreground text-[11px] font-medium">{title}</h3>
       {children}
     </section>
   );

package/src/recipes/kabuki-devtools/timeline/timeline.tsx

@@ -1,6 +1,16 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
 import { ChevronLeft, ChevronRight, GitBranch } from 'lucide-react';
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
 import { cn } from '../../../components/lib/utils.ts';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from '#components/ui/select';
 import { ink } from '../ink/index.ts';
 
 /*
@@ -8,12 +18,28 @@ import { ink } from '../ink/index.ts';
  *
  * 1. Step    one step back or on.
  * 2. Track   one tick per Step on the Branch in view, init first; the one
- *            shown stands taller, and stays scrolled into view.
+ *            shown stands taller. When they do not all fit, the row glides
+ *            to keep the one shown in the middle, stopping at either end,
+ *            and live it rests at its right end; a finger or a trackpad
+ *            can still swipe it. The tick nearest the pointer rises with
+ *            its Message's name over it, and a click or tap anywhere on the
+ *            track picks the nearest. The last tick, when it is the Head,
+ *            goes live.
  * 3. Read    the Step shown: its place and its Message, once there is room.
  * 4. Branch  bring another Branch into view, when there is more than one.
  * 5. Live    back to the Head, or the sign that it is there.
+ * 6. Window  how many entries the History keeps: a preset, or any number
+ *            typed in, set on Enter or blur. A smaller one Compacts at once,
+ *            and cannot be undone. 1 keeps only the Snapshot; 2 is the least
+ *            that still shows a change.
  */
 
+const PRESETS = [1, 2, 5, 10, 25, 50, 100, 500];
+const HINTS: Partial<Record<number, string>> = {
+  1: 'Snapshot only',
+  2: 'last change',
+};
+
 export interface TimelineStep {
   readonly id: string;
   readonly label: string;
@@ -28,11 +54,14 @@ export function Timeline({
   steps,
   shown,
   live,
-  onShow,
+  onShow: showStep,
   onLive,
+  head = false,
   branches = [],
   branch,
   onBranch,
+  window,
+  onWindow,
 }: {
   /** Every Step on the Branch in view, init first. */
   readonly steps: ReadonlyArray<TimelineStep>;
@@ -42,23 +71,99 @@ export function Timeline({
   readonly live: boolean;
   readonly onShow: (index: number) => void;
   readonly onLive: () => void;
+  /** The last Step is the Head: picking it goes live. */
+  readonly head?: boolean;
   readonly branches?: ReadonlyArray<TimelineBranch>;
   /** The Branch in view. */
   readonly branch?: string;
   readonly onBranch?: (id: string) => void;
+  /** How many entries the History keeps on the Head's Branch, `null` for every one. */
+  readonly window?: number | null;
+  readonly onWindow?: (window: number | null) => void;
 }) {
   const track = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    track.current
-      ?.querySelector<HTMLElement>('[aria-current="step"]')
-      ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-  }, [shown]);
 
   const step = steps[shown];
   const last = steps.length - 1;
+  const onShow = (index: number) =>
+    head && index === last ? onLive() : showStep(index);
+  const nameOf = (index: number) =>
+    index === 0
+      ? 'init'
+      : head && index === last && !live
+        ? `${steps[index]!.label} · go live`
+        : steps[index]!.label;
+
+  const bar = useRef<HTMLDivElement>(null);
+  const still = useReducedMotion();
+  const [near, setNear] = useState<{ index: number; x: number }>();
+  /** The tick nearest the pointer, gaps included, and its middle in the bar. */
+  /** The tick nearest a point across the track, gaps included. */
+  const nearestTo = (clientX: number) => {
+    const ticks = [...track.current!.children];
+    let index = 0;
+    let best = Infinity;
+    ticks.forEach((tick, at) => {
+      const { left, width } = tick.getBoundingClientRect();
+      const off = Math.abs(left + width / 2 - clientX);
+      if (off < best) [index, best] = [at, off];
+    });
+    return index;
+  };
+  /** Where the mouse is over the track, to follow it as the row glides. */
+  const pointer = useRef<number | undefined>(undefined);
+  const point = () => {
+    if (pointer.current === undefined) return;
+    const index = nearestTo(pointer.current);
+    const { left, width } =
+      track.current!.children[index]!.getBoundingClientRect();
+    const x = left + width / 2 - bar.current!.getBoundingClientRect().left;
+    setNear((was) =>
+      was?.index === index && was.x === x ? was : { index, x },
+    );
+  };
+
+  // The Step shown in the middle of the track, or as near as its ends allow.
+  useEffect(() => {
+    const at = track.current;
+    const tick = at?.children[shown] as HTMLElement | undefined;
+    if (!at || !tick) return;
+    at.scrollTo({
+      left: tick.offsetLeft + tick.offsetWidth / 2 - at.clientWidth / 2,
+      behavior: still ? 'instant' : 'smooth',
+    });
+  }, [shown, steps.length, still]);
 
   return (
-    <div className="bg-background/90 flex h-14 shrink-0 items-center gap-2 border-t px-2 backdrop-blur-sm @md:gap-3 @md:px-3">
+    <div
+      ref={bar}
+      className="bg-background/90 relative flex h-14 shrink-0 items-center gap-2 border-t px-2 backdrop-blur-sm @md:gap-3 @md:px-3"
+      // Clear of a button laid over its right end, such as the Devtools Dock's.
+      style={{ paddingRight: 'calc(var(--dock-reserve, 0px) + 0.75rem)' }}
+    >
+      <AnimatePresence>
+        {near && steps[near.index] && (
+          <motion.div
+            key="tip"
+            role="tooltip"
+            className="bg-popover text-popover-foreground pointer-events-none absolute bottom-full left-0 mb-1.5 rounded-md border px-2 py-1 text-xs font-medium whitespace-nowrap shadow-[0_1px_2px_rgb(0_0_0/0.06),0_4px_12px_rgb(0_0_0/0.1)]"
+            initial={{ opacity: 0, y: 4, x: near.x, translateX: '-50%' }}
+            animate={{ opacity: 1, y: 0, x: near.x, translateX: '-50%' }}
+            exit={{ opacity: 0, y: 4 }}
+            transition={
+              still
+                ? { duration: 0 }
+                : {
+                    x: { type: 'spring', stiffness: 700, damping: 45 },
+                    default: { duration: 0.12, ease: 'easeOut' },
+                  }
+            }
+          >
+            {nameOf(near.index)}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
       {/* 1. Step */}
       <div className="flex">
         <Press
@@ -70,7 +175,7 @@ export function Timeline({
         </Press>
         <Press
           label="Step on"
-          disabled={shown >= last}
+          disabled={shown >= last && (live || !head)}
           onClick={() => onShow(shown + 1)}
         >
           <ChevronRight />
@@ -82,7 +187,21 @@ export function Timeline({
         ref={track}
         role="list"
         aria-label="Steps"
-        className="flex h-full min-w-0 flex-1 items-center gap-[3px] overflow-x-auto px-1 [scrollbar-width:none]"
+        className="relative flex h-full min-w-0 flex-1 touch-pan-x items-center gap-[3px] overflow-x-auto overscroll-x-contain px-1 [scrollbar-width:none]"
+        onPointerMove={(event) => {
+          if (event.pointerType !== 'mouse') return;
+          pointer.current = event.clientX;
+          point();
+        }}
+        onPointerLeave={() => {
+          pointer.current = undefined;
+          setNear(undefined);
+        }}
+        onScroll={point}
+        onClick={(event) => {
+          if (event.target === event.currentTarget)
+            onShow(nearestTo(event.clientX));
+        }}
       >
         {steps.map((each, index) => (
           <button
@@ -97,18 +216,22 @@ export function Timeline({
           >
             <span
               className={cn(
-                'w-[3px] rounded-full transition-[height,background-color] duration-150',
+                'w-[3px] rounded-full transition-[height,background-color] duration-150 ease-out',
                 index === shown
                   ? 'h-6'
-                  : 'group-hover:bg-foreground/50 h-3 group-focus-visible:h-5',
+                  : index === near?.index
+                    ? 'h-5'
+                    : 'h-3 group-focus-visible:h-5',
               )}
               style={{
                 backgroundColor:
                   index === shown
                     ? ink('message')
-                    : index < shown
-                      ? ink('line-lit')
-                      : ink('line'),
+                    : index === near?.index
+                      ? 'var(--foreground)'
+                      : index < shown
+                        ? ink('line-lit')
+                        : ink('line'),
               }}
             />
           </button>
@@ -121,7 +244,7 @@ export function Timeline({
           <span className="truncate text-xs font-medium">
             {shown === 0 ? 'init' : step.label}
           </span>
-          <span className="text-muted-foreground text-[10.5px] tabular-nums">
+          <span className="text-muted-foreground text-[10.5px] whitespace-nowrap tabular-nums">
             {shown} of {last}
           </span>
         </div>
@@ -152,7 +275,7 @@ export function Timeline({
         onClick={onLive}
         disabled={live}
         className={cn(
-          'flex h-9 items-center gap-2 rounded-md border px-3 text-xs font-medium transition-[background-color,color,scale] duration-150 outline-none focus-visible:ring-2 active:scale-[0.97]',
+          'flex h-9 shrink-0 items-center gap-2 rounded-md border px-3 text-xs font-medium transition-[background-color,color,scale] duration-150 outline-none focus-visible:ring-2 active:scale-[0.97]',
           live
             ? 'text-foreground cursor-default'
             : 'text-muted-foreground hover:bg-muted hover:text-foreground',
@@ -174,12 +297,108 @@ export function Timeline({
             }
           />
         </span>
-        {live ? 'Live' : 'Go live'}
+        {/* As wide as its longer word either way, so nothing beside it moves. */}
+        <span className="grid whitespace-nowrap">
+          <span aria-hidden className="invisible col-start-1 row-start-1">
+            Go live
+          </span>
+          <span className="col-start-1 row-start-1">
+            {live ? 'Live' : 'Go live'}
+          </span>
+        </span>
       </button>
+
+      {/* 6. Window */}
+      {onWindow && <WindowPicker window={window ?? null} onWindow={onWindow} />}
     </div>
   );
 }
 
+function WindowPicker({
+  window,
+  onWindow,
+}: {
+  readonly window: number | null;
+  readonly onWindow: (window: number | null) => void;
+}) {
+  const [typing, setTyping] = useState(false);
+
+  if (typing)
+    return (
+      <label className="text-muted-foreground focus-within:text-foreground hidden h-9 items-center gap-1.5 rounded-md border px-2.5 text-xs focus-within:ring-2 @md:flex">
+        <span>Keep</span>
+        <input
+          autoFocus
+          type="number"
+          min={1}
+          step={1}
+          inputMode="numeric"
+          defaultValue={window ?? ''}
+          aria-label="Entries the History keeps"
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') event.currentTarget.blur();
+            if (event.key === 'Escape') setTyping(false);
+          }}
+          onBlur={(event) => {
+            const typed = event.currentTarget.valueAsNumber;
+            if (Number.isInteger(typed) && typed >= 1 && typed !== window)
+              onWindow(typed);
+            setTyping(false);
+          }}
+          className="text-foreground w-14 bg-transparent text-base tabular-nums outline-none @md:text-xs"
+        />
+      </label>
+    );
+
+  const sizes =
+    window === null || PRESETS.includes(window)
+      ? PRESETS
+      : [...PRESETS, window].sort((a, b) => a - b);
+  const items = {
+    all: 'all',
+    ...Object.fromEntries(sizes.map((each) => [`${each}`, `${each}`])),
+    custom: 'Custom…',
+  };
+  return (
+    <Select
+      items={items}
+      value={window === null ? 'all' : `${window}`}
+      onValueChange={(value) => {
+        if (value === 'custom') setTyping(true);
+        else if (value) onWindow(value === 'all' ? null : Number(value));
+      }}
+    >
+      <SelectTrigger
+        size="sm"
+        aria-label="Entries the History keeps"
+        className="hidden text-xs @md:flex"
+      >
+        <span className="text-muted-foreground">Keep</span>
+        <SelectValue className="tabular-nums" />
+      </SelectTrigger>
+      <SelectContent className="min-w-44">
+        <SelectItem value="all">
+          all <Hint>unbounded</Hint>
+        </SelectItem>
+        {sizes.map((each) => (
+          <SelectItem key={each} value={`${each}`} className="tabular-nums">
+            {each}
+            {HINTS[each] && <Hint>{HINTS[each]}</Hint>}
+          </SelectItem>
+        ))}
+        <SelectSeparator />
+        <SelectItem value="custom">Custom…</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}
+
+function Hint({ children }: { readonly children: ReactNode }) {
+  return (
+    <span className="text-muted-foreground ml-auto text-xs">{children}</span>
+  );
+}
+
 function Press({
   label,
   disabled,