@ctrl-ui/react 0.8.0

package/dist/code-block-editor.d.ts

@@ -0,0 +1,59 @@
+import { ButtonKnobStyle } from "./knob-contracts/button-knobs.js";
+import { Button } from "./ui/button.js";
+import { CodeBlockEditorKnobStyle } from "./knob-contracts/code-block-editor-knobs.js";
+import { CodeKnobStyle } from "./knob-contracts/code-knobs.js";
+import { CodeBlockEditorTokenLines } from "./lib/code-block-shiki.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/code-block-editor.d.ts
+type CodeBlockEditorStyleProps<Props, Style> = Omit<Props, "style"> & {
+  style?: CSSProperties & Style;
+};
+type CodeBlockEditorOverflow = "wrap" | "scroll";
+type CodeBlockEditorHighlight = "auto" | "none";
+type CodeBlockEditorChrome = "standalone" | "embedded";
+type CodeBlockEditorDensity = "default" | "compact";
+type CodeBlockEditorVariant = "default" | "command";
+type CodeBlockEditorProps = CodeBlockEditorStyleProps<ComponentProps<"figure">, CodeBlockEditorKnobStyle> & {
+  overflow?: CodeBlockEditorOverflow;
+  chrome?: CodeBlockEditorChrome;
+  density?: CodeBlockEditorDensity;
+  variant?: CodeBlockEditorVariant;
+};
+type CodeBlockEditorHeaderProps = CodeBlockEditorStyleProps<ComponentProps<"figcaption">, CodeBlockEditorKnobStyle>;
+type CodeBlockEditorTitleProps = CodeBlockEditorStyleProps<ComponentProps<"span">, CodeBlockEditorKnobStyle>;
+type CodeBlockEditorActionsProps = ComponentProps<"div"> & {
+  style?: CSSProperties & CodeBlockEditorKnobStyle;
+};
+type CodeBlockEditorCopyProps = Omit<ComponentProps<typeof Button>, "children" | "onClick"> & {
+  value: string;
+  children?: ReactNode;
+  copiedLabel?: ReactNode;
+  copiedAriaLabel?: string;
+};
+type CodeBlockEditorContentProps = CodeBlockEditorStyleProps<Omit<ComponentProps<"pre">, "children">, CodeBlockEditorKnobStyle> & {
+  code: string;
+  lang?: string;
+  tokens?: CodeBlockEditorTokenLines | null;
+  highlight?: CodeBlockEditorHighlight;
+  maxHeight?: string;
+  scrollAreaClassName?: string;
+};
+type CodeBlockEditorTextareaProps = CodeBlockEditorStyleProps<Omit<ComponentProps<"textarea">, "defaultValue" | "value">, CodeBlockEditorKnobStyle> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  fileName?: string;
+};
+declare function CodeBlockEditor({ overflow, chrome, density, variant, className, children, ...props }: CodeBlockEditorProps): import("react").JSX.Element;
+declare function CodeBlockEditorHeader({ className, ...props }: CodeBlockEditorHeaderProps): import("react").JSX.Element;
+declare function CodeBlockEditorTitle({ className, ...props }: CodeBlockEditorTitleProps): import("react").JSX.Element;
+declare function CodeBlockEditorActions({ className, ...props }: CodeBlockEditorActionsProps): import("react").JSX.Element;
+declare function CodeBlockEditorCopy({ value, copiedLabel, copiedAriaLabel, children, className, "aria-label": ariaLabel, ...props }: CodeBlockEditorCopyProps): import("react").JSX.Element;
+type CodeBlockEditorFloatingCopyProps = Omit<CodeBlockEditorCopyProps, "children" | "copiedLabel" | "style"> & {
+  style?: CSSProperties & ButtonKnobStyle & CodeKnobStyle;
+};
+declare function CodeBlockEditorFloatingCopy({ className, ...props }: CodeBlockEditorFloatingCopyProps): import("react").JSX.Element;
+declare function CodeBlockEditorContent({ code, lang, tokens, highlight, maxHeight, scrollAreaClassName, className, ...props }: CodeBlockEditorContentProps): import("react").JSX.Element;
+declare function CodeBlockEditorTextarea({ value, defaultValue, onValueChange, onChange, fileName, className, "aria-label": ariaLabel, ...props }: CodeBlockEditorTextareaProps): import("react").JSX.Element;
+//#endregion
+export { CodeBlockEditor, CodeBlockEditorActions, CodeBlockEditorActionsProps, CodeBlockEditorChrome, CodeBlockEditorContent, CodeBlockEditorContentProps, CodeBlockEditorCopy, CodeBlockEditorCopyProps, CodeBlockEditorDensity, CodeBlockEditorFloatingCopy, CodeBlockEditorFloatingCopyProps, CodeBlockEditorHeader, CodeBlockEditorHeaderProps, CodeBlockEditorHighlight, CodeBlockEditorOverflow, CodeBlockEditorProps, CodeBlockEditorTextarea, CodeBlockEditorTextareaProps, CodeBlockEditorTitle, CodeBlockEditorTitleProps, CodeBlockEditorVariant };

package/dist/code-block-editor.js

@@ -0,0 +1,250 @@
+"use client";
+import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.js";
+import { cn } from "./lib/cn.js";
+import { Button } from "./ui/button.js";
+import { ScrollArea } from "./ui/scroll-area.js";
+import { highlightCodeToTokens } from "./lib/code-block-shiki.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip.js";
+import { Children, Fragment, createContext, isValidElement, use, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+//#region src/code-block-editor.tsx
+const CodeBlockEditorContext = createContext(null);
+function useCodeBlockEditorContext() {
+	const context = use(CodeBlockEditorContext);
+	if (!context) throw new Error("CodeBlockEditor compound parts must be rendered inside <CodeBlockEditor>.");
+	return context;
+}
+function resolveCodeBlockEditorClasses({ overflow, density, variant }) {
+	const isCommand = variant === "command";
+	const isCompact = density === "compact" || isCommand;
+	return {
+		codeClassName: cn(overflow === "scroll" ? isCommand ? "w-full max-w-full overflow-x-auto whitespace-pre" : "w-max min-w-full whitespace-pre" : "w-full whitespace-pre-wrap break-words"),
+		editorClassName: cn("w-full max-w-full overflow-auto", overflow === "scroll" ? "whitespace-pre" : "whitespace-pre-wrap break-words"),
+		scrollable: !isCommand,
+		maxHeight: isCompact ? "320px" : "520px"
+	};
+}
+function hasCodeBlockEditorHeader(children) {
+	return Children.toArray(children).some((child) => isValidElement(child) && child.type === CodeBlockEditorHeader);
+}
+function createKeyedTokenLines(lines) {
+	return lines.reduce((state, line) => {
+		const tokenState = line.reduce((tokenAccumulator, token) => ({
+			offset: tokenAccumulator.offset + token.content.length,
+			tokens: [...tokenAccumulator.tokens, {
+				key: tokenAccumulator.offset,
+				content: token.content,
+				style: token.style
+			}]
+		}), {
+			offset: state.offset,
+			tokens: []
+		});
+		return {
+			offset: tokenState.offset + 1,
+			lines: [...state.lines, {
+				key: state.offset,
+				tokens: tokenState.tokens
+			}]
+		};
+	}, {
+		offset: 0,
+		lines: []
+	}).lines;
+}
+function useHighlightedTokens({ code, lang, tokens, highlight }) {
+	const tokenKey = `${lang ?? ""}\n${code}`;
+	const [clientTokens, setClientTokens] = useState(null);
+	useEffect(() => {
+		if (highlight === "none" || tokens !== void 0 || !lang) return;
+		let cancelled = false;
+		const requestKey = `${lang}\n${code}`;
+		highlightCodeToTokens(code, lang).then((result) => {
+			if (!cancelled) setClientTokens({
+				key: requestKey,
+				tokens: result
+			});
+		}).catch(() => {
+			if (!cancelled) setClientTokens({
+				key: requestKey,
+				tokens: null
+			});
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		code,
+		lang,
+		tokens,
+		highlight
+	]);
+	if (highlight === "none") return null;
+	return tokens ?? (clientTokens?.key === tokenKey ? clientTokens.tokens : null);
+}
+function CodeBlockEditorCode({ code, lang, tokens, highlight, maxHeight, scrollAreaClassName, scrollable, className, ...props }) {
+	const highlightedTokens = useHighlightedTokens({
+		code,
+		lang,
+		tokens,
+		highlight
+	});
+	const codeNode = highlightedTokens === null || highlightedTokens.length === 0 ? /* @__PURE__ */ jsx("code", { children: code }) : /* @__PURE__ */ jsx("code", { children: createKeyedTokenLines(highlightedTokens).map((line, lineIndex, keyedLines) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: line.tokens.map((token) => /* @__PURE__ */ jsx("span", {
+		style: token.style,
+		children: token.content
+	}, token.key)) }), lineIndex !== keyedLines.length - 1 ? "\n" : null] }, line.key)) });
+	const block = /* @__PURE__ */ jsx("pre", {
+		"data-control-ui": "code-block-editor",
+		"data-control-family": "code-block-editor",
+		"data-slot": "content",
+		className,
+		...props,
+		children: codeNode
+	});
+	if (!scrollable) return block;
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		className: scrollAreaClassName,
+		maxHeight,
+		children: block
+	});
+}
+function CodeBlockEditor({ overflow, chrome = "standalone", density = "default", variant = "default", className, children, ...props }) {
+	const resolvedOverflow = overflow ?? (variant === "command" ? "wrap" : "scroll");
+	const hasHeader = hasCodeBlockEditorHeader(children);
+	return /* @__PURE__ */ jsx(CodeBlockEditorContext.Provider, {
+		value: {
+			overflow: resolvedOverflow,
+			chrome,
+			density,
+			variant,
+			hasHeader
+		},
+		children: /* @__PURE__ */ jsx("figure", {
+			"data-control-ui": "code-block-editor",
+			"data-control-family": "code-block-editor",
+			"data-slot": "root",
+			"data-surface": "panel",
+			"data-variant": variant,
+			"data-chrome": chrome,
+			"data-density": density,
+			"data-header": hasHeader ? "true" : void 0,
+			className: cn("min-w-0 overflow-hidden", !hasHeader && "relative", className),
+			...props,
+			children
+		})
+	});
+}
+function CodeBlockEditorHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("figcaption", {
+		"data-control-ui": "code-block-editor",
+		"data-control-family": "code-block-editor",
+		"data-slot": "header",
+		className: cn("flex items-center justify-between", className),
+		...props
+	});
+}
+function CodeBlockEditorTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "code-block-editor",
+		"data-control-family": "code-block-editor",
+		"data-slot": "title",
+		className: cn("block min-w-0 truncate", className),
+		...props
+	});
+}
+function CodeBlockEditorActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "code-block-editor",
+		"data-control-family": "code-block-editor",
+		"data-slot": "actions",
+		className: cn("flex shrink-0 items-center", className),
+		...props
+	});
+}
+function CodeBlockEditorCopy({ value, copiedLabel, copiedAriaLabel = "Copied", children, className, "aria-label": ariaLabel, ...props }) {
+	const { isCopied, handleCopy } = useCopyToClipboard({ text: value });
+	const isIconOnly = children === void 0;
+	const label = ariaLabel ?? (isIconOnly ? "Copy code" : void 0);
+	const copied = copiedLabel ?? (isIconOnly ? /* @__PURE__ */ jsx(CheckIcon, {
+		"aria-hidden": "true",
+		className: "size-3.5"
+	}) : "Copied");
+	const button = /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "quiet",
+		size: "xs",
+		"aria-live": "polite",
+		"aria-label": label && isCopied ? copiedAriaLabel : label,
+		"data-code-block-editor-copy": isIconOnly ? "true" : void 0,
+		className,
+		...props,
+		onClick: handleCopy,
+		children: isCopied ? copied : children ?? /* @__PURE__ */ jsx(CopyIcon, {
+			"aria-hidden": "true",
+			className: "size-3.5"
+		})
+	});
+	if (!isIconOnly) return button;
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		delay: 0,
+		children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
+			side: "left",
+			children: label
+		})] })
+	});
+}
+function CodeBlockEditorFloatingCopy({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CodeBlockEditorCopy, {
+		"data-code-block-editor-floating-copy": "true",
+		className: cn("absolute top-2 right-2 z-10", className),
+		...props
+	});
+}
+function CodeBlockEditorContent({ code, lang, tokens, highlight = "auto", maxHeight, scrollAreaClassName, className, ...props }) {
+	const context = useCodeBlockEditorContext();
+	const classes = resolveCodeBlockEditorClasses(context);
+	const content = /* @__PURE__ */ jsx(CodeBlockEditorCode, {
+		code,
+		lang,
+		tokens,
+		highlight,
+		maxHeight: maxHeight ?? classes.maxHeight,
+		scrollAreaClassName,
+		scrollable: classes.scrollable,
+		className: cn(classes.codeClassName, className),
+		...props
+	});
+	if (context.hasHeader) return content;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "code-block-editor",
+		"data-control-family": "code-block-editor",
+		"data-slot": "floating-frame",
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(CodeBlockEditorFloatingCopy, { value: code }), content]
+	});
+}
+function CodeBlockEditorTextarea({ value, defaultValue = "", onValueChange, onChange, fileName, className, "aria-label": ariaLabel, ...props }) {
+	const { editorClassName } = resolveCodeBlockEditorClasses(useCodeBlockEditorContext());
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const currentValue = value ?? internalValue;
+	function handleChange(event) {
+		const nextValue = event.target.value;
+		if (value === void 0) setInternalValue(nextValue);
+		onValueChange?.(nextValue);
+		onChange?.(event);
+	}
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-control-ui": "code-block-editor",
+		"data-control-family": "code-block-editor",
+		"data-slot": "editor",
+		value: currentValue,
+		onChange: handleChange,
+		"aria-label": ariaLabel ?? (fileName ? `${fileName} code` : "Code editor"),
+		spellCheck: false,
+		className: cn(editorClassName, "block resize-y", className),
+		...props
+	});
+}
+//#endregion
+export { CodeBlockEditor, CodeBlockEditorActions, CodeBlockEditorContent, CodeBlockEditorCopy, CodeBlockEditorFloatingCopy, CodeBlockEditorHeader, CodeBlockEditorTextarea, CodeBlockEditorTitle };

package/dist/context-model.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+//#region src/context-model.d.ts
+type ContextSegmentKind = "system" | "tool" | "message" | "source" | "reasoning" | "cache" | "other";
+type ContextStatus = "normal" | "over-limit" | "unavailable";
+type ContextSegment = {
+  id: string;
+  label: string;
+  tokens: number;
+  kind?: ContextSegmentKind;
+  description?: ReactNode;
+};
+type ContextModelSegment = {
+  segment: ContextSegment;
+  kind: ContextSegmentKind;
+  tokens: number;
+  start: number;
+  width: number;
+  ratio: number | null;
+};
+type ContextModel = {
+  segments: readonly ContextModelSegment[];
+  usedTokens: number;
+  maxTokens: number | null;
+  remainingTokens: number | null;
+  overageTokens: number;
+  ratio: number | null;
+  domain: number;
+  limitPosition: number | null;
+  status: ContextStatus;
+};
+declare function deriveContextModel(segments: readonly ContextSegment[], maxTokens?: number | null): ContextModel;
+//#endregion
+export { ContextModel, ContextModelSegment, ContextSegment, ContextSegmentKind, ContextStatus, deriveContextModel };

package/dist/context-model.js

@@ -0,0 +1,52 @@
+//#region src/context-model.ts
+function deriveContextModelSegments(segments, domain, validLimit) {
+	let consumedTokens = 0;
+	return segments.map((segment) => {
+		const tokens = Number.isFinite(segment.tokens) && segment.tokens > 0 ? segment.tokens : 0;
+		const modelSegment = {
+			segment,
+			kind: segment.kind ?? "other",
+			tokens,
+			start: consumedTokens / domain * 100,
+			width: tokens / domain * 100,
+			ratio: validLimit === null ? null : tokens / validLimit
+		};
+		consumedTokens += tokens;
+		return modelSegment;
+	});
+}
+function deriveValidatedUsedTokens(segments) {
+	const ids = /* @__PURE__ */ new Set();
+	let usedTokens = 0;
+	for (const segment of segments) {
+		if (ids.has(segment.id)) throw new Error(`Context segment ids must be unique: "${segment.id}".`);
+		ids.add(segment.id);
+		usedTokens += Number.isFinite(segment.tokens) && segment.tokens > 0 ? segment.tokens : 0;
+	}
+	return usedTokens;
+}
+function deriveContextModel(segments, maxTokens) {
+	const usedTokens = deriveValidatedUsedTokens(segments);
+	const validLimit = Number.isFinite(maxTokens) && (maxTokens ?? 0) > 0 ? maxTokens ?? null : null;
+	const domain = Math.max(validLimit ?? 0, usedTokens, 1);
+	const remainingTokens = validLimit === null ? null : Math.max(0, validLimit - usedTokens);
+	const overageTokens = validLimit === null ? 0 : Math.max(0, usedTokens - validLimit);
+	const ratio = validLimit === null ? null : usedTokens / validLimit;
+	const limitPosition = validLimit === null ? null : validLimit / domain * 100;
+	let status = "normal";
+	if (validLimit === null) status = "unavailable";
+	else if (overageTokens > 0) status = "over-limit";
+	return {
+		segments: deriveContextModelSegments(segments, domain, validLimit),
+		usedTokens,
+		maxTokens: validLimit,
+		remainingTokens,
+		overageTokens,
+		ratio,
+		domain,
+		limitPosition,
+		status
+	};
+}
+//#endregion
+export { deriveContextModel };

package/dist/context.d.ts

@@ -0,0 +1,47 @@
+import { OpenChangeEventDetails } from "./control-props.js";
+import { ButtonKnobStyle } from "./knob-contracts/button-knobs.js";
+import { Button } from "./ui/button.js";
+import { PopupKnobStyle } from "./knob-contracts/popup-knobs.js";
+import { ContextSegment } from "./context-model.js";
+import { ContextKnobStyle } from "./knob-contracts/context-knobs.js";
+import { PopoverContent, PopoverDescription, PopoverTitle } from "./ui/popover.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/context.d.ts
+type ContextProps = Omit<ComponentProps<"div">, "children"> & {
+  segments: readonly ContextSegment[];
+  maxTokens?: number | null;
+  model?: string;
+  locale?: Intl.LocalesArgument;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+  children?: ReactNode;
+} & {
+  style?: CSSProperties & ContextKnobStyle;
+};
+type ContextStyleProps<Props, Style> = Omit<Props, "style"> & {
+  style?: CSSProperties & Style;
+};
+declare function Context({ segments, maxTokens, model: modelName, locale, open, defaultOpen, onOpenChange, className, children, ...props }: ContextProps): import("react").JSX.Element;
+type ContextTriggerProps = ContextStyleProps<ComponentProps<typeof Button>, ButtonKnobStyle & ContextKnobStyle>;
+declare function ContextTrigger({ "aria-label": ariaLabel, variant, size, className, children, ...props }: ContextTriggerProps): import("react").JSX.Element;
+type ContextContentProps = ContextStyleProps<ComponentProps<typeof PopoverContent>, PopupKnobStyle & ContextKnobStyle>;
+declare function ContextContent({ "aria-label": ariaLabel, side, align, sideOffset, collisionPadding, padding, className, children, ...props }: ContextContentProps): import("react").JSX.Element;
+type ContextHeaderProps = ComponentProps<"div"> & {
+  style?: CSSProperties & ContextKnobStyle;
+};
+declare function ContextHeader({ className, children, ...props }: ContextHeaderProps): import("react").JSX.Element;
+type ContextTitleProps = ContextStyleProps<ComponentProps<typeof PopoverTitle>, ContextKnobStyle>;
+declare function ContextTitle({ className, children, ...props }: ContextTitleProps): import("react").JSX.Element;
+type ContextDescriptionProps = ContextStyleProps<ComponentProps<typeof PopoverDescription>, ContextKnobStyle>;
+declare function ContextDescription({ className, children, ...props }: ContextDescriptionProps): import("react").JSX.Element;
+type ContextSummaryProps = ContextStyleProps<ComponentProps<"div">, ContextKnobStyle>;
+declare function ContextSummary({ className, children, ...props }: ContextSummaryProps): import("react").JSX.Element;
+type ContextGraphProps = ContextStyleProps<Omit<ComponentProps<"svg">, "children">, ContextKnobStyle>;
+declare function ContextGraph({ className, ...props }: ContextGraphProps): import("react").JSX.Element;
+type ContextLegendProps = ContextStyleProps<ComponentProps<"ul">, ContextKnobStyle>;
+declare function ContextLegend({ className, children, ...props }: ContextLegendProps): import("react").JSX.Element;
+type ContextCloseProps = ComponentProps<typeof Button>;
+declare function ContextClose({ variant, size, iconOnly, "aria-label": ariaLabel, className, children, ...props }: ContextCloseProps): import("react").JSX.Element;
+//#endregion
+export { Context, ContextClose, ContextCloseProps, ContextContent, ContextContentProps, ContextDescription, ContextDescriptionProps, ContextGraph, ContextGraphProps, ContextHeader, ContextHeaderProps, ContextLegend, ContextLegendProps, ContextProps, ContextSummary, ContextSummaryProps, ContextTitle, ContextTitleProps, ContextTrigger, ContextTriggerProps };