@ctrl-ui/react 0.8.0

package/dist/hooks/use-user-ask.js

@@ -0,0 +1,167 @@
+import { useState } from "react";
+//#region src/hooks/use-user-ask.ts
+function upsert(entries, entry) {
+	const index = entries.findIndex((existing) => existing.key === entry.key);
+	if (index === -1) return [...entries, entry];
+	const next = [...entries];
+	next[index] = entry;
+	return next;
+}
+function useUserAsk({ onComplete, onDismiss }) {
+	const [questions, setQuestions] = useState([]);
+	const [optionsByQuestion, setOptionsByQuestion] = useState({});
+	const [selections, setSelections] = useState({});
+	const [freeformTexts, setFreeformTexts] = useState({});
+	const [requestedIndex, setRequestedIndex] = useState(0);
+	const [registerQuestion] = useState(() => (entry) => {
+		setQuestions((previous) => upsert(previous, entry));
+	});
+	const [unregisterQuestion] = useState(() => (key) => {
+		setQuestions((previous) => previous.filter((question) => question.key !== key));
+	});
+	const [registerOption] = useState(() => (questionId, entry) => {
+		setOptionsByQuestion((previous) => ({
+			...previous,
+			[questionId]: upsert(previous[questionId] ?? [], entry)
+		}));
+	});
+	const [unregisterOption] = useState(() => (questionId, key) => {
+		setOptionsByQuestion((previous) => ({
+			...previous,
+			[questionId]: (previous[questionId] ?? []).filter((option) => option.key !== key)
+		}));
+	});
+	const activeIndex = questions.length === 0 ? 0 : Math.min(requestedIndex, questions.length - 1);
+	const activeQuestion = questions[activeIndex];
+	function optionsFor(questionId) {
+		return optionsByQuestion[questionId] ?? [];
+	}
+	function selectionFor(questionId) {
+		const explicit = selections[questionId];
+		if (explicit) return explicit;
+		const defaultValue = questions.find((question) => question.id === questionId)?.defaultValue;
+		if (defaultValue === void 0) return void 0;
+		return optionsFor(questionId).find((option) => !option.freeform && option.value === defaultValue)?.key;
+	}
+	function isSelected(questionId, optionKey) {
+		return selectionFor(questionId) === optionKey;
+	}
+	function select(questionId, optionKey) {
+		setSelections((previous) => ({
+			...previous,
+			[questionId]: optionKey
+		}));
+	}
+	function freeformTextFor(questionId) {
+		return freeformTexts[questionId] ?? "";
+	}
+	function setFreeformText(questionId, text) {
+		setFreeformTexts((previous) => ({
+			...previous,
+			[questionId]: text
+		}));
+	}
+	function answerFor(questionId) {
+		const selectedKey = selectionFor(questionId);
+		const option = optionsFor(questionId).find((entry) => entry.key === selectedKey);
+		if (!option) return void 0;
+		if (!option.freeform) return option.value;
+		const text = freeformTextFor(questionId).trim();
+		return text.length > 0 ? text : void 0;
+	}
+	const canContinue = activeQuestion !== void 0 && answerFor(activeQuestion.id) !== void 0;
+	const isLastQuestion = activeIndex === questions.length - 1;
+	function goTo(index) {
+		setRequestedIndex(Math.max(0, Math.min(index, questions.length - 1)));
+	}
+	function resolveAnswers() {
+		const answers = {};
+		for (const question of questions) {
+			const answer = answerFor(question.id);
+			if (answer !== void 0) answers[question.id] = answer;
+		}
+		return answers;
+	}
+	function advance() {
+		if (!canContinue) return;
+		if (isLastQuestion) onComplete?.(resolveAnswers());
+		else goTo(activeIndex + 1);
+	}
+	function dismiss() {
+		onDismiss?.();
+	}
+	function moveSelection(delta) {
+		if (!activeQuestion) return;
+		const options = optionsFor(activeQuestion.id);
+		if (!options.some((option) => !option.disabled)) return;
+		const currentKey = selectionFor(activeQuestion.id);
+		const currentIndex = options.findIndex((option) => option.key === currentKey);
+		let start = currentIndex;
+		if (currentIndex === -1) start = delta > 0 ? -1 : 0;
+		for (let step = 1; step <= options.length; step += 1) {
+			const candidate = options[(start + delta * step + options.length * step) % options.length];
+			if (candidate && !candidate.disabled) {
+				select(activeQuestion.id, candidate.key);
+				return;
+			}
+		}
+	}
+	function selectDigit(digit) {
+		if (!activeQuestion) return;
+		const option = optionsFor(activeQuestion.id)[digit - 1];
+		if (option && !option.disabled) select(activeQuestion.id, option.key);
+	}
+	function handleKeyDown(event) {
+		if (event.defaultPrevented) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			dismiss();
+			return;
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			advance();
+			return;
+		}
+		if (event.target instanceof HTMLElement && event.target.closest("input, textarea, [contenteditable]")) return;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			moveSelection(1);
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			moveSelection(-1);
+			return;
+		}
+		if (/^[1-9]$/.test(event.key)) {
+			event.preventDefault();
+			selectDigit(Number(event.key));
+		}
+	}
+	return {
+		questions,
+		activeIndex,
+		activeQuestion,
+		canContinue,
+		isLastQuestion,
+		registerQuestion,
+		unregisterQuestion,
+		registerOption,
+		unregisterOption,
+		optionsFor,
+		selectionFor,
+		isSelected,
+		select,
+		freeformTextFor,
+		setFreeformText,
+		answerFor,
+		resolveAnswers,
+		goTo,
+		advance,
+		dismiss,
+		handleKeyDown
+	};
+}
+//#endregion
+export { useUserAsk };

package/dist/inline-attachment.d.ts

@@ -0,0 +1,37 @@
+import { InlineAttachmentKnobStyle } from "./knob-contracts/inline-attachment-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/inline-attachment.d.ts
+type InlineAttachmentState = "ready" | "pending" | "error";
+type InlineAttachmentStyleProps<Props, Style> = Omit<Props, "style"> & {
+  style?: CSSProperties & Style;
+};
+type InlineAttachmentProps = InlineAttachmentStyleProps<ComponentProps<"button">, InlineAttachmentKnobStyle> & {
+  name: string;
+  state?: InlineAttachmentState;
+  /** Width-to-height ratio of the reserved box — generated media knows its ratio before its pixels, so arrival never reflows the turn. */
+  aspect?: number;
+};
+declare function InlineAttachment({ name, state, aspect, disabled, className, children, style, "aria-label": ariaLabel, ...props }: InlineAttachmentProps): import("react").JSX.Element;
+type InlineAttachmentMediaProps = ComponentProps<"div"> & {
+  src?: string;
+  alt?: string;
+} & {
+  style?: CSSProperties & InlineAttachmentKnobStyle;
+};
+declare function InlineAttachmentMedia({ src, alt, className, children, ...props }: InlineAttachmentMediaProps): import("react").JSX.Element;
+type InlineAttachmentContentProps = InlineAttachmentStyleProps<ComponentProps<"div">, InlineAttachmentKnobStyle>;
+declare function InlineAttachmentContent({ className, ...props }: InlineAttachmentContentProps): import("react").JSX.Element;
+type InlineAttachmentTitleProps = ComponentProps<"div"> & {
+  style?: CSSProperties & InlineAttachmentKnobStyle;
+};
+declare function InlineAttachmentTitle({ children, className, ...props }: InlineAttachmentTitleProps): import("react").JSX.Element;
+type InlineAttachmentDescriptionProps = InlineAttachmentStyleProps<ComponentProps<"div">, InlineAttachmentKnobStyle>;
+declare function InlineAttachmentDescription({ className, ...props }: InlineAttachmentDescriptionProps): import("react").JSX.Element;
+type InlineAttachmentActionsProps = ComponentProps<"div"> & {
+  style?: CSSProperties & InlineAttachmentKnobStyle;
+};
+declare function InlineAttachmentActions({ className, ...props }: InlineAttachmentActionsProps): import("react").JSX.Element;
+type InlineAttachmentActionProps = InlineAttachmentStyleProps<ComponentProps<"span">, InlineAttachmentKnobStyle>;
+declare function InlineAttachmentAction({ className, ...props }: InlineAttachmentActionProps): import("react").JSX.Element;
+//#endregion
+export { InlineAttachment, InlineAttachmentAction, InlineAttachmentActionProps, InlineAttachmentActions, InlineAttachmentActionsProps, InlineAttachmentContent, InlineAttachmentContentProps, InlineAttachmentDescription, InlineAttachmentDescriptionProps, InlineAttachmentMedia, InlineAttachmentMediaProps, InlineAttachmentProps, InlineAttachmentState, InlineAttachmentTitle, InlineAttachmentTitleProps };

package/dist/inline-attachment.js

@@ -0,0 +1,192 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/inline-attachment.tsx
+const InlineAttachmentContext = createContext(null);
+function useInlineAttachmentContext() {
+	const context = useContext(InlineAttachmentContext);
+	if (!context) throw new Error("InlineAttachment compound components must be rendered inside <InlineAttachment>.");
+	return context;
+}
+function defaultLabel(name, state) {
+	if (state === "pending") return `Generating ${name}`;
+	if (state === "error") return `${name} is unavailable`;
+	return `Open attachment: ${name}`;
+}
+function InlineAttachment({ name, state = "ready", aspect = 1.26, disabled, className, children, style, "aria-label": ariaLabel, ...props }) {
+	const attachmentStyle = {
+		aspectRatio: aspect,
+		...style
+	};
+	return /* @__PURE__ */ jsx(InlineAttachmentContext.Provider, {
+		value: {
+			name,
+			state
+		},
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": ariaLabel ?? defaultLabel(name, state),
+			"aria-busy": state === "pending" || void 0,
+			disabled: disabled || state === "pending",
+			"data-control-ui": "inline-attachment",
+			"data-control-family": "inline-attachment",
+			"data-slot": "root",
+			"data-surface": "panel",
+			"data-state": state,
+			className: cn("group relative w-full max-w-72 cursor-pointer overflow-hidden disabled:cursor-default", className),
+			style: attachmentStyle,
+			...props,
+			children
+		})
+	});
+}
+function GeneratingPlaceholder() {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-control-ui": "inline-attachment",
+		"data-control-family": "inline-attachment",
+		"data-slot": "placeholder",
+		className: cn("size-full", "halftone")
+	});
+}
+function DocumentPlaceholder() {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "inline-attachment",
+		"data-control-family": "inline-attachment",
+		"data-slot": "document",
+		className: "size-full",
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-control-ui": "inline-attachment",
+			"data-control-family": "inline-attachment",
+			"data-slot": "document-sheet",
+			className: "h-full",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					"data-control-ui": "inline-attachment",
+					"data-control-family": "inline-attachment",
+					"data-slot": "document-heading",
+					className: ""
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							"data-control-ui": "inline-attachment",
+							"data-control-family": "inline-attachment",
+							"data-slot": "document-line",
+							"data-width": "long",
+							className: ""
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"data-control-ui": "inline-attachment",
+							"data-control-family": "inline-attachment",
+							"data-slot": "document-line",
+							"data-width": "medium",
+							className: ""
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"data-control-ui": "inline-attachment",
+							"data-control-family": "inline-attachment",
+							"data-slot": "document-line",
+							"data-width": "longest",
+							className: ""
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"data-control-ui": "inline-attachment",
+							"data-control-family": "inline-attachment",
+							"data-slot": "document-line",
+							"data-width": "short",
+							className: ""
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-control-ui": "inline-attachment",
+					"data-control-family": "inline-attachment",
+					"data-slot": "document-stamp",
+					className: ""
+				})
+			]
+		})
+	});
+}
+function mediaContent({ state, src, alt, children }) {
+	if (state === "pending") return /* @__PURE__ */ jsx(GeneratingPlaceholder, {});
+	if (src) return /* @__PURE__ */ jsx("img", {
+		src,
+		alt,
+		loading: "lazy",
+		decoding: "async",
+		"data-control-ui": "inline-attachment",
+		"data-control-family": "inline-attachment",
+		"data-slot": "media-image",
+		className: "size-full object-cover"
+	});
+	return children ?? /* @__PURE__ */ jsx(DocumentPlaceholder, {});
+}
+function InlineAttachmentMedia({ src, alt, className, children, ...props }) {
+	const { name, state } = useInlineAttachmentContext();
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "inline-attachment",
+		"data-control-family": "inline-attachment",
+		"data-slot": "image",
+		className: cn("size-full", className),
+		...props,
+		children: mediaContent({
+			state,
+			src,
+			alt: alt ?? name,
+			children
+		})
+	});
+}
+function InlineAttachmentContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "inline-attachment",
+		"data-control-family": "inline-attachment",
+		"data-slot": "content",
+		className: cn("absolute inset-x-3 bottom-3", className),
+		...props
+	});
+}
+function InlineAttachmentTitle({ children, className, ...props }) {
+	const { name } = useInlineAttachmentContext();
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "inline-attachment",
+		"data-control-family": "inline-attachment",
+		"data-slot": "title",
+		className: cn("truncate", className),
+		...props,
+		children: children ?? name
+	});
+}
+function InlineAttachmentDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "inline-attachment",
+		"data-control-family": "inline-attachment",
+		"data-slot": "description",
+		className: cn("truncate", className),
+		...props
+	});
+}
+function InlineAttachmentActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "inline-attachment",
+		"data-control-family": "inline-attachment",
+		"data-slot": "actions",
+		className: cn("flex items-center", className),
+		...props
+	});
+}
+function InlineAttachmentAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "inline-attachment",
+		"data-control-family": "inline-attachment",
+		"data-slot": "action",
+		className: cn(className),
+		...props
+	});
+}
+//#endregion
+export { InlineAttachment, InlineAttachmentAction, InlineAttachmentActions, InlineAttachmentContent, InlineAttachmentDescription, InlineAttachmentMedia, InlineAttachmentTitle };

package/dist/inline-citation.d.ts

@@ -0,0 +1,56 @@
+import { Button } from "./ui/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
+import { InlineCitationKnobStyle } from "./knob-contracts/inline-citation-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/inline-citation.d.ts
+type SourceReference = {
+  href: string;
+  title?: string;
+  description?: string;
+  quote?: string;
+  faviconSrc?: string | false;
+};
+type InlineCitationStyleProps<Props, Style> = Omit<Props, "style"> & {
+  style?: CSSProperties & Style;
+};
+type PopoverRootProps = ComponentProps<typeof Popover>;
+type InlineCitationProps = ComponentProps<"span"> & {
+  sources: readonly SourceReference[];
+  open?: PopoverRootProps["open"];
+  defaultOpen?: PopoverRootProps["defaultOpen"];
+  onOpenChange?: PopoverRootProps["onOpenChange"];
+} & {
+  style?: CSSProperties & InlineCitationKnobStyle;
+};
+declare function InlineCitation({ sources, open, defaultOpen, onOpenChange, className, children, ...props }: InlineCitationProps): import("react").JSX.Element;
+type InlineCitationTriggerProps = InlineCitationStyleProps<ComponentProps<typeof PopoverTrigger>, InlineCitationKnobStyle>;
+declare function InlineCitationTrigger({ "aria-label": ariaLabel, className, children, disabled, render, ...props }: InlineCitationTriggerProps): import("react").JSX.Element;
+type InlineCitationFaviconsProps = InlineCitationStyleProps<ComponentProps<"span">, InlineCitationKnobStyle> & {
+  limit?: number;
+};
+declare function InlineCitationFavicons({ limit, className, ...props }: InlineCitationFaviconsProps): import("react").JSX.Element;
+type InlineCitationLabelProps = ComponentProps<"span"> & {
+  style?: CSSProperties & InlineCitationKnobStyle;
+};
+declare function InlineCitationLabel({ className, children, ...props }: InlineCitationLabelProps): import("react").JSX.Element;
+type InlineCitationContentProps = ComponentProps<typeof PopoverContent>;
+declare function InlineCitationContent({ className, children, align, padding, ...props }: InlineCitationContentProps): import("react").JSX.Element;
+type InlineCitationNavigationProps = InlineCitationStyleProps<ComponentProps<"div">, InlineCitationKnobStyle>;
+declare function InlineCitationNavigation({ className, children, ...props }: InlineCitationNavigationProps): import("react").JSX.Element;
+type InlineCitationPreviousProps = Omit<ComponentProps<typeof Button>, "children"> & {
+  children?: ReactNode;
+};
+declare function InlineCitationPrevious({ className, children, disabled, onClick, ...props }: InlineCitationPreviousProps): import("react").JSX.Element;
+type InlineCitationNextProps = Omit<ComponentProps<typeof Button>, "children"> & {
+  children?: ReactNode;
+};
+declare function InlineCitationNext({ className, children, disabled, onClick, ...props }: InlineCitationNextProps): import("react").JSX.Element;
+type InlineCitationPositionProps = InlineCitationStyleProps<ComponentProps<"span">, InlineCitationKnobStyle>;
+declare function InlineCitationPosition({ className, children, ...props }: InlineCitationPositionProps): import("react").JSX.Element;
+type InlineCitationSourceProps = Omit<ComponentProps<"article">, "style"> & {
+  source?: SourceReference;
+  style?: CSSProperties & InlineCitationKnobStyle;
+};
+declare function InlineCitationSource({ source: sourceProp, className, children, style, ref, ...props }: InlineCitationSourceProps): import("react").JSX.Element | null;
+//#endregion
+export { InlineCitation, InlineCitationContent, InlineCitationContentProps, InlineCitationFavicons, InlineCitationFaviconsProps, InlineCitationLabel, InlineCitationLabelProps, InlineCitationNavigation, InlineCitationNavigationProps, InlineCitationNext, InlineCitationNextProps, InlineCitationPosition, InlineCitationPositionProps, InlineCitationPrevious, InlineCitationPreviousProps, InlineCitationProps, InlineCitationSource, InlineCitationSourceProps, InlineCitationTrigger, InlineCitationTriggerProps, SourceReference };