npm - @kestack/web-platform - Versions diffs - 0.0.0 → 0.0.2 - Mend

@kestack/web-platform 0.0.0 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/dist/recipes/kabuki-devtools/timeline/timeline.js CHANGED Viewed

@@ -1,22 +1,109 @@
 import { cn } from "../../../components/lib/utils.js";
+import { Select, SelectContent, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from "../../../components/ui/select.js";
 import { ink } from "../ink/ink.js";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { ChevronLeft, ChevronRight, GitBranch } from "lucide-react";
 //#region src/recipes/kabuki-devtools/timeline/timeline.tsx
-function Timeline({ steps, shown, live, onShow, onLive, branches = [], branch, onBranch }) {
+const PRESETS = [
+	1,
+	2,
+	5,
+	10,
+	25,
+	50,
+	100,
+	500
+];
+const HINTS = {
+	1: "Snapshot only",
+	2: "last change"
+};
+function Timeline({ steps, shown, live, onShow: showStep, onLive, head = false, branches = [], branch, onBranch, window, onWindow }) {
 	const track = useRef(null);
-	useEffect(() => {
-		track.current?.querySelector("[aria-current=\"step\"]")?.scrollIntoView({
-			block: "nearest",
-			inline: "nearest"
-		});
-	}, [shown]);
 	const step = steps[shown];
 	const last = steps.length - 1;
+	const onShow = (index) => head && index === last ? onLive() : showStep(index);
+	const nameOf = (index) => index === 0 ? "init" : head && index === last && !live ? `${steps[index].label} · go live` : steps[index].label;
+	const bar = useRef(null);
+	const still = useReducedMotion();
+	const [near, setNear] = useState();
+	/** 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) => {
+		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(void 0);
+	const point = () => {
+		if (pointer.current === void 0) 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
+		});
+	};
+	useEffect(() => {
+		const at = track.current;
+		const tick = at?.children[shown];
+		if (!at || !tick) return;
+		at.scrollTo({
+			left: tick.offsetLeft + tick.offsetWidth / 2 - at.clientWidth / 2,
+			behavior: still ? "instant" : "smooth"
+		});
+	}, [
+		shown,
+		steps.length,
+		still
+	]);
 	return /* @__PURE__ */ jsxs("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",
+		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",
+		style: { paddingRight: "calc(var(--dock-reserve, 0px) + 0.75rem)" },
 		children: [
+			/* @__PURE__ */ jsx(AnimatePresence, { children: near && steps[near.index] && /* @__PURE__ */ jsx(motion.div, {
+				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: .12,
+						ease: "easeOut"
+					}
+				},
+				children: nameOf(near.index)
+			}, "tip") }),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex",
 				children: [/* @__PURE__ */ jsx(Press, {
@@ -26,7 +113,7 @@ function Timeline({ steps, shown, live, onShow, onLive, branches = [], branch, o
 					children: /* @__PURE__ */ jsx(ChevronLeft, {})
 				}), /* @__PURE__ */ jsx(Press, {
 					label: "Step on",
-					disabled: shown >= last,
+					disabled: shown >= last && (live || !head),
 					onClick: () => onShow(shown + 1),
 					children: /* @__PURE__ */ jsx(ChevronRight, {})
 				})]
@@ -35,7 +122,20 @@ function Timeline({ steps, shown, live, onShow, onLive, branches = [], branch, o
 				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 = void 0;
+					setNear(void 0);
+				},
+				onScroll: point,
+				onClick: (event) => {
+					if (event.target === event.currentTarget) onShow(nearestTo(event.clientX));
+				},
 				children: steps.map((each, index) => /* @__PURE__ */ jsx("button", {
 					type: "button",
 					role: "listitem",
@@ -45,8 +145,8 @@ function Timeline({ steps, shown, live, onShow, onLive, branches = [], branch, o
 					onClick: () => onShow(index),
 					className: "group grid h-8 w-2.5 shrink-0 place-items-center outline-none",
 					children: /* @__PURE__ */ jsx("span", {
-						className: cn("w-[3px] rounded-full transition-[height,background-color] duration-150", index === shown ? "h-6" : "group-hover:bg-foreground/50 h-3 group-focus-visible:h-5"),
-						style: { backgroundColor: index === shown ? ink("message") : index < shown ? ink("line-lit") : ink("line") }
+						className: cn("w-[3px] rounded-full transition-[height,background-color] duration-150 ease-out", index === shown ? "h-6" : index === near?.index ? "h-5" : "h-3 group-focus-visible:h-5"),
+						style: { backgroundColor: index === shown ? ink("message") : index === near?.index ? "var(--foreground)" : index < shown ? ink("line-lit") : ink("line") }
 					})
 				}, each.id))
 			}),
@@ -56,7 +156,7 @@ function Timeline({ steps, shown, live, onShow, onLive, branches = [], branch, o
 					className: "truncate text-xs font-medium",
 					children: shown === 0 ? "init" : step.label
 				}), /* @__PURE__ */ jsxs("span", {
-					className: "text-muted-foreground text-[10.5px] tabular-nums",
+					className: "text-muted-foreground text-[10.5px] whitespace-nowrap tabular-nums",
 					children: [
 						shown,
 						" of ",
@@ -87,7 +187,7 @@ function Timeline({ steps, shown, live, onShow, onLive, branches = [], branch, o
 				type: "button",
 				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]", live ? "text-foreground cursor-default" : "text-muted-foreground hover:bg-muted hover:text-foreground"),
+				className: cn("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"),
 				children: [/* @__PURE__ */ jsxs("span", {
 					className: "relative grid size-2 place-items-center",
 					children: [live && /* @__PURE__ */ jsx("span", {
@@ -100,11 +200,97 @@ function Timeline({ steps, shown, live, onShow, onLive, branches = [], branch, o
 							borderColor: ink("active")
 						} : { borderColor: "currentColor" }
 					})]
-				}), live ? "Live" : "Go live"]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "grid whitespace-nowrap",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "invisible col-start-1 row-start-1",
+						children: "Go live"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "col-start-1 row-start-1",
+						children: live ? "Live" : "Go live"
+					})]
+				})]
+			}),
+			onWindow && /* @__PURE__ */ jsx(WindowPicker, {
+				window: window ?? null,
+				onWindow
 			})
 		]
 	});
 }
+function WindowPicker({ window, onWindow }) {
+	const [typing, setTyping] = useState(false);
+	if (typing) return /* @__PURE__ */ jsxs("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",
+		children: [/* @__PURE__ */ jsx("span", { children: "Keep" }), /* @__PURE__ */ jsx("input", {
+			autoFocus: true,
+			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"
+		})]
+	});
+	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 /* @__PURE__ */ jsxs(Select, {
+		items,
+		value: window === null ? "all" : `${window}`,
+		onValueChange: (value) => {
+			if (value === "custom") setTyping(true);
+			else if (value) onWindow(value === "all" ? null : Number(value));
+		},
+		children: [/* @__PURE__ */ jsxs(SelectTrigger, {
+			size: "sm",
+			"aria-label": "Entries the History keeps",
+			className: "hidden text-xs @md:flex",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: "Keep"
+			}), /* @__PURE__ */ jsx(SelectValue, { className: "tabular-nums" })]
+		}), /* @__PURE__ */ jsxs(SelectContent, {
+			className: "min-w-44",
+			children: [
+				/* @__PURE__ */ jsxs(SelectItem, {
+					value: "all",
+					children: ["all ", /* @__PURE__ */ jsx(Hint, { children: "unbounded" })]
+				}),
+				sizes.map((each) => /* @__PURE__ */ jsxs(SelectItem, {
+					value: `${each}`,
+					className: "tabular-nums",
+					children: [each, HINTS[each] && /* @__PURE__ */ jsx(Hint, { children: HINTS[each] })]
+				}, each)),
+				/* @__PURE__ */ jsx(SelectSeparator, {}),
+				/* @__PURE__ */ jsx(SelectItem, {
+					value: "custom",
+					children: "Custom…"
+				})
+			]
+		})]
+	});
+}
+function Hint({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground ml-auto text-xs",
+		children
+	});
+}
 function Press({ label, disabled, onClick, children }) {
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",

package/dist/recipes/kabuki-devtools/timeline/timeline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timeline.js","names":[],"sources":["../../../../src/recipes/kabuki-devtools/timeline/timeline.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { ChevronLeft, ChevronRight, GitBranch } from 'lucide-react';\nimport { cn } from '../../../components/lib/utils.ts';\nimport { ink } from '../ink/index.ts';\n\n/\n The Timeline: the bar under the Map for picking the Step shown.\n \n 1. Step one step back or on.\n * 2. Track one tick per Step on the Branch in view, init first; the one\n * shown stands taller, and stays scrolled into view.\n * 3. Read the Step shown: its place and its Message, once there is room.\n * 4. Branch bring another Branch into view, when there is more than one.\n * 5. Live back to the Head, or the sign that it is there.\n /\n\nexport interface TimelineStep {\n readonly id: string;\n readonly label: string;\n}\n\nexport interface TimelineBranch {\n readonly id: string;\n readonly label: string;\n}\n\nexport function Timeline({\n steps,\n shown,\n live,\n onShow,\n onLive,\n branches = [],\n branch,\n onBranch,\n}: {\n /* Every Step on the Branch in view, init first. /\n readonly steps: ReadonlyArray<TimelineStep>;\n /* The place of the Step shown. /\n readonly shown: number;\n /* Showing the Head of the running app. /\n readonly live: boolean;\n readonly onShow: (index: number) => void;\n readonly onLive: () => void;\n readonly branches?: ReadonlyArray<TimelineBranch>;\n /* The Branch in view. /\n readonly branch?: string;\n readonly onBranch?: (id: string) => void;\n}) {\n const track = useRef<HTMLDivElement>(null);\n useEffect(() => {\n track.current\n ?.querySelector<HTMLElement>('[aria-current=\"step\"]')\n ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n }, [shown]);\n\n const step = steps[shown];\n const last = steps.length - 1;\n\n return (\n <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\">\n {/ 1. Step /}\n <div className=\"flex\">\n <Press\n label=\"Step back\"\n disabled={shown <= 0}\n onClick={() => onShow(shown - 1)}\n >\n <ChevronLeft />\n </Press>\n <Press\n label=\"Step on\"\n disabled={shown >= last}\n onClick={() => onShow(shown + 1)}\n >\n <ChevronRight />\n </Press>\n </div>\n\n {/ 2. Track /}\n <div\n ref={track}\n role=\"list\"\n aria-label=\"Steps\"\n className=\"flex h-full min-w-0 flex-1 items-center gap-[3px] overflow-x-auto px-1 [scrollbar-width:none]\"\n >\n {steps.map((each, index) => (\n <button\n key={each.id}\n type=\"button\"\n role=\"listitem\"\n title={`${index === 0 ? 'init' : `${index}. ${each.label}`}`}\n aria-label={index === 0 ? 'init' : `Step ${index}, ${each.label}`}\n aria-current={index === shown ? 'step' : undefined}\n onClick={() => onShow(index)}\n className=\"group grid h-8 w-2.5 shrink-0 place-items-center outline-none\"\n >\n <span\n className={cn(\n 'w-[3px] rounded-full transition-[height,background-color] duration-150',\n index === shown\n ? 'h-6'\n : 'group-hover:bg-foreground/50 h-3 group-focus-visible:h-5',\n )}\n style={{\n backgroundColor:\n index === shown\n ? ink('message')\n : index < shown\n ? ink('line-lit')\n : ink('line'),\n }}\n />\n </button>\n ))}\n </div>\n\n {/ 3. Read /}\n {step && (\n <div className=\"hidden min-w-0 flex-col items-end leading-tight @md:flex\">\n <span className=\"truncate text-xs font-medium\">\n {shown === 0 ? 'init' : step.label}\n </span>\n <span className=\"text-muted-foreground text-[10.5px] tabular-nums\">\n {shown} of {last}\n </span>\n </div>\n )}\n\n {/ 4. Branch /}\n {branches.length > 1 && onBranch && (\n <label className=\"text-muted-foreground hover:text-foreground relative flex h-9 items-center gap-1.5 rounded-md border px-2 text-xs transition-colors duration-150 focus-within:ring-2\">\n <GitBranch className=\"size-3.5\" />\n <span className=\"sr-only\">Branch in view</span>\n <select\n value={branch}\n onChange={(event) => onBranch(event.target.value)}\n className=\"bg-transparent outline-none\"\n >\n {branches.map((each) => (\n <option key={each.id} value={each.id}>\n {each.label}\n </option>\n ))}\n </select>\n </label>\n )}\n\n {/ 5. Live */}\n <button\n type=\"button\"\n onClick={onLive}\n disabled={live}\n className={cn(\n '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]',\n live\n ? 'text-foreground cursor-default'\n : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n )}\n >\n <span className=\"relative grid size-2 place-items-center\">\n {live && (\n <span\n className=\"absolute inset-0 animate-ping rounded-full opacity-60 motion-reduce:hidden\"\n style={{ backgroundColor: ink('active') }}\n />\n )}\n <span\n className=\"size-2 rounded-full border\"\n style={\n live\n ? { backgroundColor: ink('active'), borderColor: ink('active') }\n : { borderColor: 'currentColor' }\n }\n />\n </span>\n {live ? 'Live' : 'Go live'}\n </button>\n </div>\n );\n}\n\nfunction Press({\n label,\n disabled,\n onClick,\n children,\n}: {\n readonly label: string;\n readonly disabled: boolean;\n readonly onClick: () => void;\n readonly children: React.ReactNode;\n}) {\n return (\n <button\n type=\"button\"\n aria-label={label}\n title={label}\n disabled={disabled}\n onClick={onClick}\n className=\"text-muted-foreground hover:text-foreground hover:bg-muted grid size-9 place-items-center rounded-md transition-colors duration-150 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4\"\n >\n {children}\n </button>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"timeline.js","names":[],"sources":["../../../../src/recipes/kabuki-devtools/timeline/timeline.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { ChevronLeft, ChevronRight, GitBranch } from 'lucide-react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { cn } from '../../../components/lib/utils.ts';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n} from '#components/ui/select';\nimport { ink } from '../ink/index.ts';\n\n/\n The Timeline: the bar under the Map for picking the Step shown.\n \n 1. Step one step back or on.\n * 2. Track one tick per Step on the Branch in view, init first; the one\n * shown stands taller. When they do not all fit, the row glides\n * to keep the one shown in the middle, stopping at either end,\n * and live it rests at its right end; a finger or a trackpad\n * can still swipe it. The tick nearest the pointer rises with\n * its Message's name over it, and a click or tap anywhere on the\n * track picks the nearest. The last tick, when it is the Head,\n * goes live.\n * 3. Read the Step shown: its place and its Message, once there is room.\n * 4. Branch bring another Branch into view, when there is more than one.\n * 5. Live back to the Head, or the sign that it is there.\n * 6. Window how many entries the History keeps: a preset, or any number\n * typed in, set on Enter or blur. A smaller one Compacts at once,\n * and cannot be undone. 1 keeps only the Snapshot; 2 is the least\n * that still shows a change.\n /\n\nconst PRESETS = [1, 2, 5, 10, 25, 50, 100, 500];\nconst HINTS: Partial<Record<number, string>> = {\n 1: 'Snapshot only',\n 2: 'last change',\n};\n\nexport interface TimelineStep {\n readonly id: string;\n readonly label: string;\n}\n\nexport interface TimelineBranch {\n readonly id: string;\n readonly label: string;\n}\n\nexport function Timeline({\n steps,\n shown,\n live,\n onShow: showStep,\n onLive,\n head = false,\n branches = [],\n branch,\n onBranch,\n window,\n onWindow,\n}: {\n /* Every Step on the Branch in view, init first. /\n readonly steps: ReadonlyArray<TimelineStep>;\n /* The place of the Step shown. /\n readonly shown: number;\n /* Showing the Head of the running app. /\n readonly live: boolean;\n readonly onShow: (index: number) => void;\n readonly onLive: () => void;\n /* The last Step is the Head: picking it goes live. /\n readonly head?: boolean;\n readonly branches?: ReadonlyArray<TimelineBranch>;\n /* The Branch in view. /\n readonly branch?: string;\n readonly onBranch?: (id: string) => void;\n /* How many entries the History keeps on the Head's Branch, `null` for every one. /\n readonly window?: number \| null;\n readonly onWindow?: (window: number \| null) => void;\n}) {\n const track = useRef<HTMLDivElement>(null);\n\n const step = steps[shown];\n const last = steps.length - 1;\n const onShow = (index: number) =>\n head && index === last ? onLive() : showStep(index);\n const nameOf = (index: number) =>\n index === 0\n ? 'init'\n : head && index === last && !live\n ? `${steps[index]!.label} · go live`\n : steps[index]!.label;\n\n const bar = useRef<HTMLDivElement>(null);\n const still = useReducedMotion();\n const [near, setNear] = useState<{ index: number; x: number }>();\n /* The tick nearest the pointer, gaps included, and its middle in the bar. /\n /* The tick nearest a point across the track, gaps included. /\n const nearestTo = (clientX: number) => {\n const ticks = [...track.current!.children];\n let index = 0;\n let best = Infinity;\n ticks.forEach((tick, at) => {\n const { left, width } = tick.getBoundingClientRect();\n const off = Math.abs(left + width / 2 - clientX);\n if (off < best) [index, best] = [at, off];\n });\n return index;\n };\n /* Where the mouse is over the track, to follow it as the row glides. /\n const pointer = useRef<number \| undefined>(undefined);\n const point = () => {\n if (pointer.current === undefined) return;\n const index = nearestTo(pointer.current);\n const { left, width } =\n track.current!.children[index]!.getBoundingClientRect();\n const x = left + width / 2 - bar.current!.getBoundingClientRect().left;\n setNear((was) =>\n was?.index === index && was.x === x ? was : { index, x },\n );\n };\n\n // The Step shown in the middle of the track, or as near as its ends allow.\n useEffect(() => {\n const at = track.current;\n const tick = at?.children[shown] as HTMLElement \| undefined;\n if (!at \|\| !tick) return;\n at.scrollTo({\n left: tick.offsetLeft + tick.offsetWidth / 2 - at.clientWidth / 2,\n behavior: still ? 'instant' : 'smooth',\n });\n }, [shown, steps.length, still]);\n\n return (\n <div\n ref={bar}\n 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\"\n // Clear of a button laid over its right end, such as the Devtools Dock's.\n style={{ paddingRight: 'calc(var(--dock-reserve, 0px) + 0.75rem)' }}\n >\n <AnimatePresence>\n {near && steps[near.index] && (\n <motion.div\n key=\"tip\"\n role=\"tooltip\"\n 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)]\"\n initial={{ opacity: 0, y: 4, x: near.x, translateX: '-50%' }}\n animate={{ opacity: 1, y: 0, x: near.x, translateX: '-50%' }}\n exit={{ opacity: 0, y: 4 }}\n transition={\n still\n ? { duration: 0 }\n : {\n x: { type: 'spring', stiffness: 700, damping: 45 },\n default: { duration: 0.12, ease: 'easeOut' },\n }\n }\n >\n {nameOf(near.index)}\n </motion.div>\n )}\n </AnimatePresence>\n\n {/ 1. Step /}\n <div className=\"flex\">\n <Press\n label=\"Step back\"\n disabled={shown <= 0}\n onClick={() => onShow(shown - 1)}\n >\n <ChevronLeft />\n </Press>\n <Press\n label=\"Step on\"\n disabled={shown >= last && (live \|\| !head)}\n onClick={() => onShow(shown + 1)}\n >\n <ChevronRight />\n </Press>\n </div>\n\n {/ 2. Track /}\n <div\n ref={track}\n role=\"list\"\n aria-label=\"Steps\"\n 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]\"\n onPointerMove={(event) => {\n if (event.pointerType !== 'mouse') return;\n pointer.current = event.clientX;\n point();\n }}\n onPointerLeave={() => {\n pointer.current = undefined;\n setNear(undefined);\n }}\n onScroll={point}\n onClick={(event) => {\n if (event.target === event.currentTarget)\n onShow(nearestTo(event.clientX));\n }}\n >\n {steps.map((each, index) => (\n <button\n key={each.id}\n type=\"button\"\n role=\"listitem\"\n title={`${index === 0 ? 'init' : `${index}. ${each.label}`}`}\n aria-label={index === 0 ? 'init' : `Step ${index}, ${each.label}`}\n aria-current={index === shown ? 'step' : undefined}\n onClick={() => onShow(index)}\n className=\"group grid h-8 w-2.5 shrink-0 place-items-center outline-none\"\n >\n <span\n className={cn(\n 'w-[3px] rounded-full transition-[height,background-color] duration-150 ease-out',\n index === shown\n ? 'h-6'\n : index === near?.index\n ? 'h-5'\n : 'h-3 group-focus-visible:h-5',\n )}\n style={{\n backgroundColor:\n index === shown\n ? ink('message')\n : index === near?.index\n ? 'var(--foreground)'\n : index < shown\n ? ink('line-lit')\n : ink('line'),\n }}\n />\n </button>\n ))}\n </div>\n\n {/ 3. Read /}\n {step && (\n <div className=\"hidden min-w-0 flex-col items-end leading-tight @md:flex\">\n <span className=\"truncate text-xs font-medium\">\n {shown === 0 ? 'init' : step.label}\n </span>\n <span className=\"text-muted-foreground text-[10.5px] whitespace-nowrap tabular-nums\">\n {shown} of {last}\n </span>\n </div>\n )}\n\n {/ 4. Branch /}\n {branches.length > 1 && onBranch && (\n <label className=\"text-muted-foreground hover:text-foreground relative flex h-9 items-center gap-1.5 rounded-md border px-2 text-xs transition-colors duration-150 focus-within:ring-2\">\n <GitBranch className=\"size-3.5\" />\n <span className=\"sr-only\">Branch in view</span>\n <select\n value={branch}\n onChange={(event) => onBranch(event.target.value)}\n className=\"bg-transparent outline-none\"\n >\n {branches.map((each) => (\n <option key={each.id} value={each.id}>\n {each.label}\n </option>\n ))}\n </select>\n </label>\n )}\n\n {/ 5. Live /}\n <button\n type=\"button\"\n onClick={onLive}\n disabled={live}\n className={cn(\n '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]',\n live\n ? 'text-foreground cursor-default'\n : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n )}\n >\n <span className=\"relative grid size-2 place-items-center\">\n {live && (\n <span\n className=\"absolute inset-0 animate-ping rounded-full opacity-60 motion-reduce:hidden\"\n style={{ backgroundColor: ink('active') }}\n />\n )}\n <span\n className=\"size-2 rounded-full border\"\n style={\n live\n ? { backgroundColor: ink('active'), borderColor: ink('active') }\n : { borderColor: 'currentColor' }\n }\n />\n </span>\n {/ As wide as its longer word either way, so nothing beside it moves. /}\n <span className=\"grid whitespace-nowrap\">\n <span aria-hidden className=\"invisible col-start-1 row-start-1\">\n Go live\n </span>\n <span className=\"col-start-1 row-start-1\">\n {live ? 'Live' : 'Go live'}\n </span>\n </span>\n </button>\n\n {/ 6. Window */}\n {onWindow && <WindowPicker window={window ?? null} onWindow={onWindow} />}\n </div>\n );\n}\n\nfunction WindowPicker({\n window,\n onWindow,\n}: {\n readonly window: number \| null;\n readonly onWindow: (window: number \| null) => void;\n}) {\n const [typing, setTyping] = useState(false);\n\n if (typing)\n return (\n <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\">\n <span>Keep</span>\n <input\n autoFocus\n type=\"number\"\n min={1}\n step={1}\n inputMode=\"numeric\"\n defaultValue={window ?? ''}\n aria-label=\"Entries the History keeps\"\n onKeyDown={(event) => {\n if (event.key === 'Enter') event.currentTarget.blur();\n if (event.key === 'Escape') setTyping(false);\n }}\n onBlur={(event) => {\n const typed = event.currentTarget.valueAsNumber;\n if (Number.isInteger(typed) && typed >= 1 && typed !== window)\n onWindow(typed);\n setTyping(false);\n }}\n className=\"text-foreground w-14 bg-transparent text-base tabular-nums outline-none @md:text-xs\"\n />\n </label>\n );\n\n const sizes =\n window === null \|\| PRESETS.includes(window)\n ? PRESETS\n : [...PRESETS, window].sort((a, b) => a - b);\n const items = {\n all: 'all',\n ...Object.fromEntries(sizes.map((each) => [`${each}`, `${each}`])),\n custom: 'Custom…',\n };\n return (\n <Select\n items={items}\n value={window === null ? 'all' : `${window}`}\n onValueChange={(value) => {\n if (value === 'custom') setTyping(true);\n else if (value) onWindow(value === 'all' ? null : Number(value));\n }}\n >\n <SelectTrigger\n size=\"sm\"\n aria-label=\"Entries the History keeps\"\n className=\"hidden text-xs @md:flex\"\n >\n <span className=\"text-muted-foreground\">Keep</span>\n <SelectValue className=\"tabular-nums\" />\n </SelectTrigger>\n <SelectContent className=\"min-w-44\">\n <SelectItem value=\"all\">\n all <Hint>unbounded</Hint>\n </SelectItem>\n {sizes.map((each) => (\n <SelectItem key={each} value={`${each}`} className=\"tabular-nums\">\n {each}\n {HINTS[each] && <Hint>{HINTS[each]}</Hint>}\n </SelectItem>\n ))}\n <SelectSeparator />\n <SelectItem value=\"custom\">Custom…</SelectItem>\n </SelectContent>\n </Select>\n );\n}\n\nfunction Hint({ children }: { readonly children: ReactNode }) {\n return (\n <span className=\"text-muted-foreground ml-auto text-xs\">{children}</span>\n );\n}\n\nfunction Press({\n label,\n disabled,\n onClick,\n children,\n}: {\n readonly label: string;\n readonly disabled: boolean;\n readonly onClick: () => void;\n readonly children: React.ReactNode;\n}) {\n return (\n <button\n type=\"button\"\n aria-label={label}\n title={label}\n disabled={disabled}\n onClick={onClick}\n className=\"text-muted-foreground hover:text-foreground hover:bg-muted grid size-9 place-items-center rounded-md transition-colors duration-150 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4\"\n >\n {children}\n </button>\n );\n}\n"],"mappings":";;;;;;;;AAoCA,MAAM,UAAU;CAAC;CAAG;CAAG;CAAG;CAAI;CAAI;CAAI;CAAK;AAAG;AAC9C,MAAM,QAAyC;CAC7C,GAAG;CACH,GAAG;AACL;AAYA,SAAgB,SAAS,EACvB,OACA,OACA,MACA,QAAQ,UACR,QACA,OAAO,OACP,WAAW,CAAC,GACZ,QACA,UACA,QACA,YAmBC;CACD,MAAM,QAAQ,OAAuB,IAAI;CAEzC,MAAM,OAAO,MAAM;CACnB,MAAM,OAAO,MAAM,SAAS;CAC5B,MAAM,UAAU,UACd,QAAQ,UAAU,OAAO,OAAO,IAAI,SAAS,KAAK;CACpD,MAAM,UAAU,UACd,UAAU,IACN,SACA,QAAQ,UAAU,QAAQ,CAAC,OACzB,GAAG,MAAM,MAAM,CAAE,MAAM,cACvB,MAAM,MAAM,CAAE;CAEtB,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,CAAC,MAAM,WAAW,SAAuC;;;CAG/D,MAAM,aAAa,YAAoB;EACrC,MAAM,QAAQ,CAAC,GAAG,MAAM,QAAS,QAAQ;EACzC,IAAI,QAAQ;EACZ,IAAI,OAAO;EACX,MAAM,SAAS,MAAM,OAAO;GAC1B,MAAM,EAAE,MAAM,UAAU,KAAK,sBAAsB;GACnD,MAAM,MAAM,KAAK,IAAI,OAAO,QAAQ,IAAI,OAAO;GAC/C,IAAI,MAAM,MAAM,CAAC,OAAO,QAAQ,CAAC,IAAI,GAAG;EAC1C,CAAC;EACD,OAAO;CACT;;CAEA,MAAM,UAAU,OAA2B,KAAA,CAAS;CACpD,MAAM,cAAc;EAClB,IAAI,QAAQ,YAAY,KAAA,GAAW;EACnC,MAAM,QAAQ,UAAU,QAAQ,OAAO;EACvC,MAAM,EAAE,MAAM,UACZ,MAAM,QAAS,SAAS,MAAM,CAAE,sBAAsB;EACxD,MAAM,IAAI,OAAO,QAAQ,IAAI,IAAI,QAAS,sBAAsB,CAAC,CAAC;EAClE,SAAS,QACP,KAAK,UAAU,SAAS,IAAI,MAAM,IAAI,MAAM;GAAE;GAAO;EAAE,CACzD;CACF;CAGA,gBAAgB;EACd,MAAM,KAAK,MAAM;EACjB,MAAM,OAAO,IAAI,SAAS;EAC1B,IAAI,CAAC,MAAM,CAAC,MAAM;EAClB,GAAG,SAAS;GACV,MAAM,KAAK,aAAa,KAAK,cAAc,IAAI,GAAG,cAAc;GAChE,UAAU,QAAQ,YAAY;EAChC,CAAC;CACH,GAAG;EAAC;EAAO,MAAM;EAAQ;CAAK,CAAC;CAE/B,OACE,qBAAC,OAAD;EACE,KAAK;EACL,WAAU;EAEV,OAAO,EAAE,cAAc,2CAA2C;EAJpE,UAAA;GAME,oBAAC,iBAAD,EAAA,UACG,QAAQ,MAAM,KAAK,UAClB,oBAAC,OAAO,KAAR;IAEE,MAAK;IACL,WAAU;IACV,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG,GAAG,KAAK;KAAG,YAAY;IAAO;IAC3D,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG,GAAG,KAAK;KAAG,YAAY;IAAO;IAC3D,MAAM;KAAE,SAAS;KAAG,GAAG;IAAE;IACzB,YACE,QACI,EAAE,UAAU,EAAE,IACd;KACE,GAAG;MAAE,MAAM;MAAU,WAAW;MAAK,SAAS;KAAG;KACjD,SAAS;MAAE,UAAU;MAAM,MAAM;KAAU;IAC7C;IAGL,UAAA,OAAO,KAAK,KAAK;GACR,GAhBN,KAgBM,EAEC,CAAA;GAGjB,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,OAAD;KACE,OAAM;KACN,UAAU,SAAS;KACnB,eAAe,OAAO,QAAQ,CAAC;KAE/B,UAAA,oBAAC,aAAD,CAAc,CAAA;IACT,CAAA,GACP,oBAAC,OAAD;KACE,OAAM;KACN,UAAU,SAAS,SAAS,QAAQ,CAAC;KACrC,eAAe,OAAO,QAAQ,CAAC;KAE/B,UAAA,oBAAC,cAAD,CAAe,CAAA;IACV,CAAA,CACJ;;GAGL,oBAAC,OAAD;IACE,KAAK;IACL,MAAK;IACL,cAAW;IACX,WAAU;IACV,gBAAgB,UAAU;KACxB,IAAI,MAAM,gBAAgB,SAAS;KACnC,QAAQ,UAAU,MAAM;KACxB,MAAM;IACR;IACA,sBAAsB;KACpB,QAAQ,UAAU,KAAA;KAClB,QAAQ,KAAA,CAAS;IACnB;IACA,UAAU;IACV,UAAU,UAAU;KAClB,IAAI,MAAM,WAAW,MAAM,eACzB,OAAO,UAAU,MAAM,OAAO,CAAC;IACnC;IAEC,UAAA,MAAM,KAAK,MAAM,UAChB,oBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,OAAO,GAAG,UAAU,IAAI,SAAS,GAAG,MAAM,IAAI,KAAK;KACnD,cAAY,UAAU,IAAI,SAAS,QAAQ,MAAM,IAAI,KAAK;KAC1D,gBAAc,UAAU,QAAQ,SAAS,KAAA;KACzC,eAAe,OAAO,KAAK;KAC3B,WAAU;KAEV,UAAA,oBAAC,QAAD;MACE,WAAW,GACT,mFACA,UAAU,QACN,QACA,UAAU,MAAM,QACd,QACA,6BACR;MACA,OAAO,EACL,iBACE,UAAU,QACN,IAAI,SAAS,IACb,UAAU,MAAM,QACd,sBACA,QAAQ,QACN,IAAI,UAAU,IACd,IAAI,MAAM,EACtB;KACD,CAAA;IACK,GA7BD,KAAK,EA6BJ,CACT;GACE,CAAA;GAGJ,QACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA,UAAU,IAAI,SAAS,KAAK;IACzB,CAAA,GACN,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MACG;MAAM;MAAK;KACR;IACH,CAAA,CAAA;;GAIN,SAAS,SAAS,KAAK,YACtB,qBAAC,SAAD;IAAO,WAAU;IAAjB,UAAA;KACE,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;KACjC,oBAAC,QAAD;MAAM,WAAU;MAAU,UAAA;KAAoB,CAAA;KAC9C,oBAAC,UAAD;MACE,OAAO;MACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;MAChD,WAAU;MAET,UAAA,SAAS,KAAK,SACb,oBAAC,UAAD;OAAsB,OAAO,KAAK;OAC/B,UAAA,KAAK;MACA,GAFK,KAAK,EAEV,CACT;KACK,CAAA;IACH;;GAIT,qBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,UAAU;IACV,WAAW,GACT,gMACA,OACI,mCACA,4DACN;IATF,UAAA,CAWE,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACG,QACC,oBAAC,QAAD;MACE,WAAU;MACV,OAAO,EAAE,iBAAiB,IAAI,QAAQ,EAAE;KACzC,CAAA,GAEH,oBAAC,QAAD;MACE,WAAU;MACV,OACE,OACI;OAAE,iBAAiB,IAAI,QAAQ;OAAG,aAAa,IAAI,QAAQ;MAAE,IAC7D,EAAE,aAAa,eAAe;KAErC,CAAA,CACG;IAEN,CAAA,GAAA,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACE,oBAAC,QAAD;MAAM,eAAA;MAAY,WAAU;MAAoC,UAAA;KAE1D,CAAA,GACN,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,OAAO,SAAS;KACb,CAAA,CACF;IACA,CAAA,CAAA;;GAGP,YAAY,oBAAC,cAAD;IAAc,QAAQ,UAAU;IAAgB;GAAW,CAAA;EACrE;;AAET;AAEA,SAAS,aAAa,EACpB,QACA,YAIC;CACD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,IAAI,QACF,OACE,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA,CACE,oBAAC,QAAD,EAAA,UAAM,OAAU,CAAA,GAChB,oBAAC,SAAD;GACE,WAAA;GACA,MAAK;GACL,KAAK;GACL,MAAM;GACN,WAAU;GACV,cAAc,UAAU;GACxB,cAAW;GACX,YAAY,UAAU;IACpB,IAAI,MAAM,QAAQ,SAAS,MAAM,cAAc,KAAK;IACpD,IAAI,MAAM,QAAQ,UAAU,UAAU,KAAK;GAC7C;GACA,SAAS,UAAU;IACjB,MAAM,QAAQ,MAAM,cAAc;IAClC,IAAI,OAAO,UAAU,KAAK,KAAK,SAAS,KAAK,UAAU,QACrD,SAAS,KAAK;IAChB,UAAU,KAAK;GACjB;GACA,WAAU;EACX,CAAA,CACI;;CAGX,MAAM,QACJ,WAAW,QAAQ,QAAQ,SAAS,MAAM,IACtC,UACA,CAAC,GAAG,SAAS,MAAM,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;CAC/C,MAAM,QAAQ;EACZ,KAAK;EACL,GAAG,OAAO,YAAY,MAAM,KAAK,SAAS,CAAC,GAAG,QAAQ,GAAG,MAAM,CAAC,CAAC;EACjE,QAAQ;CACV;CACA,OACE,qBAAC,QAAD;EACS;EACP,OAAO,WAAW,OAAO,QAAQ,GAAG;EACpC,gBAAgB,UAAU;GACxB,IAAI,UAAU,UAAU,UAAU,IAAI;QACjC,IAAI,OAAO,SAAS,UAAU,QAAQ,OAAO,OAAO,KAAK,CAAC;EACjE;EANF,UAAA,CAQE,qBAAC,eAAD;GACE,MAAK;GACL,cAAW;GACX,WAAU;GAHZ,UAAA,CAKE,oBAAC,QAAD;IAAM,WAAU;IAAwB,UAAA;GAAU,CAAA,GAClD,oBAAC,aAAD,EAAa,WAAU,eAAgB,CAAA,CAC1B;EACf,CAAA,GAAA,qBAAC,eAAD;GAAe,WAAU;GAAzB,UAAA;IACE,qBAAC,YAAD;KAAY,OAAM;KAAlB,UAAA,CAAwB,QAClB,oBAAC,MAAD,EAAA,UAAM,YAAe,CAAA,CACf;;IACX,MAAM,KAAK,SACV,qBAAC,YAAD;KAAuB,OAAO,GAAG;KAAQ,WAAU;KAAnD,UAAA,CACG,MACA,MAAM,SAAS,oBAAC,MAAD,EAAA,UAAO,MAAM,MAAY,CAAA,CAC/B;IAHK,GAAA,IAGL,CACb;IACD,oBAAC,iBAAD,CAAkB,CAAA;IAClB,oBAAC,YAAD;KAAY,OAAM;KAAS,UAAA;IAAmB,CAAA;GACjC;EACT,CAAA,CAAA;;AAEZ;AAEA,SAAS,KAAK,EAAE,YAA8C;CAC5D,OACE,oBAAC,QAAD;EAAM,WAAU;EAAyC;CAAe,CAAA;AAE5E;AAEA,SAAS,MAAM,EACb,OACA,UACA,SACA,YAMC;CACD,OACE,oBAAC,UAAD;EACE,MAAK;EACL,cAAY;EACZ,OAAO;EACG;EACD;EACT,WAAU;EAET;CACK,CAAA;AAEZ"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@kestack/web-platform",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "private": false,
   "description": "The way to build a kstack app: one config made into a PWA on TanStack Start with its Theme, its APIs on a cloud or a device Backend, several Accounts with one Session each, the screens before sign-in, and the server; plus the components, input, forms and Recipes to build screens with.",
   "license": "MIT",
@@ -190,14 +190,14 @@
     "typescript": "npm:@typescript/typescript6@6.0.2",
     "vite": "npm:@voidzero-dev/vite-plus-core@1.0.0",
     "vitest": "5.0.1",
-    "@kestack/rpc-toolkit": "0.0.0",
-    "@kestack/std-toolkit": "0.0.0",
-    "@kestack/auth-toolkit": "0.0.0",
-    "@kestack/use-gesture": "0.0.0",
-    "use-effect-ts": "0.0.11",
-    "@kestack/kabuki": "0.0.0",
-    "laymos": "0.0.11",
-    "@kestack/use-keys": "0.0.0"
+    "@kestack/auth-toolkit": "0.0.2",
+    "@kestack/rpc-toolkit": "0.0.2",
+    "@kestack/use-gesture": "0.0.1",
+    "@kestack/std-toolkit": "0.0.2",
+    "@kestack/use-keys": "0.0.1",
+    "@kestack/kabuki": "0.0.2",
+    "laymos": "0.0.13",
+    "use-effect-ts": "0.0.12"
   },
   "peerDependencies": {
     "@cloudflare/workers-types": "5.20260904.1",
@@ -207,14 +207,14 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "vite": "^8.0.0",
-    "@kestack/auth-toolkit": "0.0.0",
-    "@kestack/std-toolkit": "0.0.0",
-    "@kestack/use-keys": "0.0.0",
-    "@kestack/use-gesture": "0.0.0",
-    "@kestack/kabuki": "0.0.0",
-    "laymos": "0.0.11",
-    "use-effect-ts": "0.0.11",
-    "@kestack/rpc-toolkit": "0.0.0"
+    "@kestack/auth-toolkit": "0.0.2",
+    "@kestack/use-keys": "0.0.1",
+    "use-effect-ts": "0.0.12",
+    "laymos": "0.0.13",
+    "@kestack/rpc-toolkit": "0.0.2",
+    "@kestack/kabuki": "0.0.2",
+    "@kestack/use-gesture": "0.0.1",
+    "@kestack/std-toolkit": "0.0.2"
   },
   "peerDependenciesMeta": {
     "@cloudflare/workers-types": {