@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/motion/hold-button/hold-button.js

@@ -0,0 +1,192 @@
+import { capturePointer } from "../../lib/pointer.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { CheckIcon } from "lucide-react";
+import { useUnmount } from "ahooks";
+import { animate, motion, useMotionValue, useReducedMotionConfig, useTransform } from "motion/react";
+//#region src/motion/hold-button/hold-button.tsx
+const HEIGHTS = {
+	sm: "h-6",
+	default: "h-7",
+	lg: "h-8"
+};
+const INNER = {
+	sm: "gap-1 px-2 [&_svg:not([class*='size-'])]:size-3",
+	default: "gap-1.5 px-2.5 [&_svg:not([class*='size-'])]:size-3.5",
+	lg: "gap-1.5 px-3 [&_svg:not([class*='size-'])]:size-4"
+};
+function seconds(ms) {
+	const value = ms / 1e3;
+	return `${Number.isInteger(value) ? value : value.toFixed(1)} second${value === 1 ? "" : "s"}`;
+}
+/**
+* Press and hold to confirm. A fill sweeps across the button for
+* `holdDuration`; releasing early retracts it, and a short tap calls `onTap`
+* instead. Keyboard: hold Space or Enter, Escape cancels. Use it for
+* dangerous tool calls and irreversible actions.
+*
+* Behavior reference: reactbits hold-button.
+*/
+function HoldButton({ children, doneLabel = "Done", icon, holdDuration = 1500, releaseDuration = 300, tapThreshold = 200, resetAfter = 1200, variant = "default", size = "default", onHold, onTap, disabled, className, style, onBlur, onPointerUp, onPointerCancel, "aria-describedby": describedBy, ...props }) {
+	const reduced = useReducedMotionConfig() ?? false;
+	const hintId = React.useId();
+	const progress = useMotionValue(0);
+	const [phase, setPhase] = React.useState("idle");
+	const phaseRef = React.useRef("idle");
+	const buttonRef = React.useRef(null);
+	const [doneWidth, setDoneWidth] = React.useState();
+	const pressStart = React.useRef(0);
+	const animation = React.useRef(null);
+	const resetTimer = React.useRef(null);
+	const activeKey = React.useRef(null);
+	const pressed = React.useRef(false);
+	const clip = useTransform(progress, (p) => `inset(0 ${(1 - p) * 100}% 0 0)`);
+	const fillOpacity = useTransform(progress, (p) => reduced ? p : 1);
+	const setPhaseBoth = (next) => {
+		phaseRef.current = next;
+		setPhase(next);
+	};
+	useUnmount(() => {
+		animation.current?.stop();
+		if (resetTimer.current) clearTimeout(resetTimer.current);
+	});
+	const complete = () => {
+		setDoneWidth(buttonRef.current?.offsetWidth);
+		setPhaseBoth("done");
+		onHold();
+		resetTimer.current = setTimeout(() => {
+			resetTimer.current = null;
+			progress.set(0);
+			setPhaseBoth("idle");
+		}, resetAfter);
+	};
+	/** Confirms at once. For assistive-tech activation, which arrives as a bare click and cannot hold. */
+	const confirmNow = () => {
+		if (disabled || phaseRef.current !== "idle") return;
+		animation.current?.stop();
+		progress.set(1);
+		complete();
+	};
+	const start = () => {
+		if (disabled || phaseRef.current !== "idle") return;
+		pressStart.current = performance.now();
+		setPhaseBoth("holding");
+		animation.current?.stop();
+		animation.current = animate(progress, 1, {
+			duration: (1 - progress.get()) * holdDuration / 1e3,
+			ease: "linear",
+			onComplete: complete
+		});
+	};
+	/** Ends a press. `asTap` is false for a cancel (Escape, blur, pointer leaving). */
+	const release = (asTap) => {
+		if (phaseRef.current !== "holding") return;
+		animation.current?.stop();
+		setPhaseBoth("idle");
+		animation.current = animate(progress, 0, {
+			duration: releaseDuration / 1e3,
+			ease: "easeOut"
+		});
+		if (asTap && performance.now() - pressStart.current < tapThreshold) onTap?.();
+	};
+	const filled = variant === "destructive" ? "bg-destructive text-background" : "bg-primary text-primary-foreground";
+	const content = (state) => state === "done" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }), doneLabel] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [icon, children] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("button", {
+			ref: buttonRef,
+			type: "button",
+			"data-slot": "hold-button",
+			"data-phase": phase,
+			"data-variant": variant,
+			"data-motion": reduced ? "reduced" : "full",
+			disabled,
+			"aria-describedby": describedBy ? `${hintId} ${describedBy}` : hintId,
+			className: cn("relative isolate inline-flex shrink-0 touch-none items-center justify-center overflow-hidden rounded-md border text-xs/relaxed font-medium whitespace-nowrap outline-none select-none", "border-border bg-background text-foreground dark:bg-input/30", "transition-[color,box-shadow,border-color,scale] duration-150 hover:bg-input/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", !reduced && "data-[phase=holding]:scale-[0.97]", "disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", variant === "destructive" && "border-destructive/30 text-destructive focus-visible:border-destructive/50 focus-visible:ring-destructive/30", HEIGHTS[size], INNER[size], className),
+			onPointerDown: (event) => {
+				if (event.button !== 0) return;
+				pressed.current = true;
+				capturePointer(event.currentTarget, event.pointerId);
+				start();
+			},
+			onPointerUp: (event) => {
+				onPointerUp?.(event);
+				release(true);
+			},
+			onPointerCancel: (event) => {
+				onPointerCancel?.(event);
+				pressed.current = false;
+				release(false);
+			},
+			onClick: (event) => {
+				const fromPress = pressed.current && event.detail !== 0;
+				pressed.current = false;
+				if (!fromPress) confirmNow();
+			},
+			onKeyDown: (event) => {
+				if (event.key === "Escape") {
+					if (phaseRef.current === "holding") event.preventDefault();
+					release(false);
+					return;
+				}
+				if (event.key !== " " && event.key !== "Enter") return;
+				event.preventDefault();
+				if (event.repeat || activeKey.current !== null) return;
+				activeKey.current = event.key;
+				pressed.current = true;
+				start();
+			},
+			onKeyUp: (event) => {
+				if (event.key !== activeKey.current) return;
+				event.preventDefault();
+				activeKey.current = null;
+				pressed.current = false;
+				release(true);
+			},
+			onBlur: (event) => {
+				onBlur?.(event);
+				activeKey.current = null;
+				pressed.current = false;
+				release(false);
+			},
+			style: phase === "done" && doneWidth ? {
+				...style,
+				minWidth: doneWidth
+			} : style,
+			...props,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "contents",
+					children: content(phase)
+				}),
+				/* @__PURE__ */ jsx(motion.span, {
+					"aria-hidden": "true",
+					"data-slot": "hold-button-fill",
+					className: cn("pointer-events-none absolute inset-0 inline-flex items-center justify-center", INNER[size], filled),
+					style: {
+						clipPath: reduced ? void 0 : clip,
+						opacity: phase === "done" ? 1 : fillOpacity
+					},
+					children: content(phase)
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx("span", {
+			id: hintId,
+			hidden: true,
+			children: `Press and hold for ${seconds(holdDuration)} to confirm.`
+		}),
+		/* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: "sr-only",
+			children: phase === "done" ? doneLabel : ""
+		})
+	] });
+}
+//#endregion
+export { HoldButton };

package/dist/motion/masonry-grid/masonry-grid.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+//#region src/motion/masonry-grid/masonry-grid.d.ts
+export interface MasonryGridItem {
+  id: string;
+  src: string;
+  /** Required: describe the image, or pass "" for a purely decorative one. */
+  alt: string;
+  /** Intrinsic width, for the aspect ratio. */
+  width: number;
+  /** Intrinsic height, for the aspect ratio. */
+  height: number;
+  /** Renders the tile as a link. */
+  href?: string;
+  /** Accessible name of the tile's link or button. Defaults to `alt`. */
+  label?: string;
+}
+export interface MasonryGridProps {
+  items: readonly MasonryGridItem[];
+  /** Renders tiles without `href` as buttons that call this. */
+  onSelect?: (item: MasonryGridItem) => void;
+  /**
+   * Column count, or a function of the grid's width in pixels. Default: 2
+   * under 480px, 3 under 768px, 4 under 1100px, otherwise 5.
+   */
+  columns?: number | ((width: number) => number);
+  /** Gap between tiles, in pixels. Default 12. */
+  gap?: number;
+  /** Accessible name of the list. */
+  label?: string;
+  className?: string;
+}
+/**
+ * A responsive masonry of images: each tile drops into the shortest column.
+ * Tiles fade up into place, glide to their new spots when the column count
+ * changes, and scale up a little under the pointer or keyboard focus. Tiles
+ * are real images with alt text, inside links (`href`) or buttons
+ * (`onSelect`) when they do something; DOM order is item order.
+ *
+ * Behavior reference: reactbits masonry.
+ */
+export declare function MasonryGrid({ items, onSelect, columns, gap, label, className }: MasonryGridProps): React.JSX.Element;
+//#endregion

package/dist/motion/masonry-grid/masonry-grid.js

@@ -0,0 +1,145 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+import { useLatest, useSize } from "ahooks";
+import { motion, useReducedMotionConfig } from "motion/react";
+//#region src/motion/masonry-grid/masonry-grid.tsx
+const MOVE = {
+	type: "spring",
+	stiffness: 260,
+	damping: 32,
+	mass: .9
+};
+const HOVER = {
+	type: "spring",
+	stiffness: 400,
+	damping: 28
+};
+const LIFT = 1.02;
+const FADE_S = .2;
+const STAGGER_S = .03;
+const STAGGER_MAX = 8;
+function defaultColumns(width) {
+	if (width < 480) return 2;
+	if (width < 768) return 3;
+	if (width < 1100) return 4;
+	return 5;
+}
+/** Shortest-column placement: each item goes under the shortest column so far. */
+function place(items, width, columns, gap) {
+	const count = Math.max(1, Math.floor(columns));
+	const w = (width - gap * (count - 1)) / count;
+	const heights = Array(count).fill(0);
+	return {
+		placed: items.map((item) => {
+			let column = 0;
+			for (let c = 1; c < count; c++) if ((heights[c] ?? 0) < (heights[column] ?? 0)) column = c;
+			const h = item.width > 0 ? w * item.height / item.width : w;
+			const y = heights[column] ?? 0;
+			heights[column] = y + h + gap;
+			return {
+				item,
+				x: column * (w + gap),
+				y,
+				w,
+				h
+			};
+		}),
+		height: Math.max(0, Math.max(...heights) - gap)
+	};
+}
+/**
+* A responsive masonry of images: each tile drops into the shortest column.
+* Tiles fade up into place, glide to their new spots when the column count
+* changes, and scale up a little under the pointer or keyboard focus. Tiles
+* are real images with alt text, inside links (`href`) or buttons
+* (`onSelect`) when they do something; DOM order is item order.
+*
+* Behavior reference: reactbits masonry.
+*/
+function MasonryGrid({ items, onSelect, columns = defaultColumns, gap = 12, label, className }) {
+	const reduced = useReducedMotionConfig() ?? false;
+	const rootRef = React.useRef(null);
+	const width = useSize(rootRef)?.width ?? 0;
+	const count = typeof columns === "function" ? columns(width) : columns;
+	const { placed, height } = React.useMemo(() => place(items, width, count, gap), [
+		items,
+		width,
+		count,
+		gap
+	]);
+	const onSelectRef = useLatest(onSelect);
+	return /* @__PURE__ */ jsx("ul", {
+		ref: rootRef,
+		"aria-label": label,
+		"data-slot": "masonry-grid",
+		"data-columns": count,
+		"data-reduced-motion": reduced ? "" : void 0,
+		className: cn("relative w-full", className),
+		style: { height },
+		children: width > 0 ? placed.map(({ item, x, y, w, h }, index) => {
+			const tileClass = "block size-full overflow-hidden rounded-lg bg-muted outline-none ring-1 ring-foreground/10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+			const image = /* @__PURE__ */ jsx("img", {
+				src: item.src,
+				alt: item.alt,
+				width: item.width,
+				height: item.height,
+				loading: "lazy",
+				draggable: false,
+				className: "size-full object-cover"
+			});
+			const lift = reduced ? {} : {
+				whileHover: { scale: LIFT },
+				whileFocus: { scale: LIFT },
+				transition: HOVER
+			};
+			return /* @__PURE__ */ jsx(motion.li, {
+				"data-slot": "masonry-grid-item",
+				className: "absolute top-0 left-0 hover:z-10 focus-within:z-10",
+				initial: reduced ? false : {
+					opacity: 0,
+					x,
+					y: y + 24,
+					width: w,
+					height: h
+				},
+				animate: {
+					opacity: 1,
+					x,
+					y,
+					width: w,
+					height: h
+				},
+				transition: reduced ? { duration: 0 } : {
+					...MOVE,
+					opacity: {
+						duration: FADE_S,
+						delay: Math.min(index, STAGGER_MAX) * STAGGER_S
+					}
+				},
+				children: item.href ? /* @__PURE__ */ jsx(motion.a, {
+					href: item.href,
+					"aria-label": item.label,
+					"data-slot": "masonry-grid-tile",
+					className: tileClass,
+					...lift,
+					children: image
+				}) : onSelect ? /* @__PURE__ */ jsx(motion.button, {
+					type: "button",
+					"aria-label": item.label,
+					"data-slot": "masonry-grid-tile",
+					className: tileClass,
+					onClick: () => onSelectRef.current?.(item),
+					...lift,
+					children: image
+				}) : /* @__PURE__ */ jsx("div", {
+					"data-slot": "masonry-grid-tile",
+					className: tileClass,
+					children: image
+				})
+			}, item.id);
+		}) : null
+	});
+}
+//#endregion
+export { MasonryGrid };

package/dist/motion/prompt-composer/prompt-composer.d.ts

@@ -0,0 +1,90 @@
+import * as React from "react";
+//#region src/motion/prompt-composer/prompt-composer.d.ts
+/** Something the prompt can reference with `@`, such as a file, a thread or a tool. */
+export interface PromptComposerSource {
+  id: string;
+  /** Inserted after `@`, so keep it free of spaces to read as one token. */
+  label: string;
+  description?: string;
+  /** A lucide icon. */
+  icon?: React.ReactNode;
+}
+/** A `/` command, valid at the start of the prompt. */
+export interface PromptComposerCommand {
+  id: string;
+  /** Inserted after `/`. */
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+}
+export interface PromptComposerOption {
+  id: string;
+  label: string;
+  description?: string;
+}
+/** Everything besides the text that `onSend` reports. */
+export interface PromptComposerSendDetail {
+  /** Sources whose `@label` token is still in the text. */
+  sources: PromptComposerSource[];
+  /** The command the text starts with, if any. */
+  command: PromptComposerCommand | null;
+  model?: string;
+  effort?: string;
+}
+export interface PromptComposerProps {
+  /** The prompt text (controlled). */
+  value?: string;
+  /** The starting prompt text (uncontrolled). */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Sends the prompt. Enter sends; Shift+Enter adds a line. Uncontrolled text clears after. */
+  onSend: (text: string, detail: PromptComposerSendDetail) => void;
+  /** A run is in flight: the send button becomes Stop and Enter no longer sends. */
+  busy?: boolean;
+  /** Stops the run in flight. */
+  onStop?: () => void;
+  /** Shows an attach button that calls this. The app opens its own picker. */
+  onAttach?: () => void;
+  /** What `@` offers. */
+  sources?: readonly PromptComposerSource[];
+  /** What `/` offers at the start of the prompt. */
+  commands?: readonly PromptComposerCommand[];
+  /** Model choices. The picker shows when there are any. */
+  models?: readonly PromptComposerOption[];
+  /**
+   * A model picker of the app's own, such as a ScrubSelect, shown where the
+   * built-in one goes. It replaces the built-in picker; the app owns its value.
+   */
+  modelPicker?: React.ReactNode;
+  model?: string;
+  defaultModel?: string;
+  onModelChange?: (model: string) => void;
+  /** Reasoning-effort choices. The picker shows when there are any. */
+  efforts?: readonly PromptComposerOption[];
+  effort?: string;
+  defaultEffort?: string;
+  onEffortChange?: (effort: string) => void;
+  /** A slot before the send button, for a `DictationButton`. */
+  dictation?: React.ReactNode;
+  placeholder?: string;
+  /** Accessible name of the text box. Default "Prompt". */
+  label?: string;
+  disabled?: boolean;
+  className?: string;
+}
+/**
+ * A chat composer: `@` opens a source menu and `/` (at the start) a command
+ * menu, with model and effort pickers, an attach button, a dictation slot and
+ * a send button that becomes Stop while a run is in flight. Enter sends and
+ * Shift+Enter adds a line.
+ *
+ * The text box drives the menus as an autocomplete text box: it carries
+ * `aria-autocomplete`, `aria-controls` and `aria-activedescendant`, so the
+ * highlighted option is announced while focus stays in the text.
+ *
+ * It does no I/O: `onSend(text, detail)`, `onStop` and `onAttach` go to the app.
+ *
+ * Behavior reference: reactbits prompt-bar.
+ */
+export declare function PromptComposer(props: PromptComposerProps): React.JSX.Element;
+//#endregion