@ctrl-ui/react 0.9.5 → 0.9.6

package/dist/tool-approval.js

@@ -0,0 +1,260 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { Button } from "./ui/button.js";
+import { LiveStatus } from "./ui/live-status.js";
+import { Badge } from "./ui/badge.js";
+import { Kbd } from "./ui/kbd.js";
+import { createContext, useContext, useEffect, useId, useRef } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ShieldAlert, X } from "lucide-react";
+//#region src/tool-approval.tsx
+const ToolApprovalContext = createContext(null);
+function useToolApprovalContext() {
+	const context = useContext(ToolApprovalContext);
+	if (!context) throw new Error("ToolApproval compound components must be rendered inside <ToolApproval>.");
+	return context;
+}
+const decisionAnnouncements = {
+	pending: "",
+	approved: "Action approved",
+	denied: "Action denied"
+};
+function ToolApproval({ state = "pending", risk = "medium", onApprove, onDeny, autoFocus = false, className, children, onKeyDown, ...props }) {
+	const titleId = useId();
+	const rootRef = useRef(null);
+	const isPending = state === "pending";
+	const approve = () => {
+		if (isPending) onApprove?.();
+	};
+	const deny = () => {
+		if (isPending) onDeny?.();
+	};
+	useEffect(() => {
+		if (autoFocus) rootRef.current?.focus();
+	}, [autoFocus]);
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || !isPending || event.nativeEvent.isComposing) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			deny();
+			return;
+		}
+		if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			approve();
+		}
+	}
+	return /* @__PURE__ */ jsx(ToolApprovalContext.Provider, {
+		value: {
+			state,
+			risk,
+			titleId,
+			approve,
+			deny
+		},
+		children: /* @__PURE__ */ jsxs("section", {
+			ref: rootRef,
+			"data-control-ui": "tool-approval",
+			"data-control-family": "tool-approval",
+			"data-slot": "root",
+			"data-state": state,
+			"data-risk": risk,
+			"aria-labelledby": titleId,
+			tabIndex: -1,
+			onKeyDown: handleKeyDown,
+			className: cn("relative w-full min-w-0", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(LiveStatus, { message: decisionAnnouncements[state] })]
+		})
+	});
+}
+function ToolApprovalBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "body",
+		className: cn("min-w-0", className),
+		...props
+	});
+}
+function ToolApprovalHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "header",
+		className: cn("flex items-start gap-2", className),
+		...props
+	});
+}
+function ToolApprovalIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "icon",
+		"aria-hidden": "true",
+		className: cn("inline-flex size-5 shrink-0 items-center justify-center [&_svg]:size-4", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ShieldAlert, {})
+	});
+}
+function ToolApprovalTitle({ render, className, ...props }) {
+	const { titleId } = useToolApprovalContext();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			id: titleId,
+			"data-control-ui": "tool-approval",
+			"data-control-family": "tool-approval",
+			"data-slot": "title",
+			className: cn("min-w-0 flex-1 font-medium", className)
+		}
+	});
+}
+const riskColors = {
+	low: "neutral",
+	medium: "yellow",
+	high: "red"
+};
+const riskLabels = {
+	low: "Low risk",
+	medium: "Medium risk",
+	high: "High risk"
+};
+function ToolApprovalRisk({ children, ...props }) {
+	const { state, risk } = useToolApprovalContext();
+	if (state !== "pending") return null;
+	return /* @__PURE__ */ jsx(Badge, {
+		"data-control-ui": "tool-approval",
+		"data-slot": "risk",
+		size: "sm",
+		color: riskColors[risk],
+		...props,
+		children: children ?? riskLabels[risk]
+	});
+}
+const decisionLabels = {
+	approved: "Approved",
+	denied: "Denied"
+};
+function ToolApprovalStatus({ className, children, ...props }) {
+	const { state } = useToolApprovalContext();
+	if (state === "pending") return null;
+	const StatusIcon = state === "approved" ? Check : X;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "status",
+		className: cn("shrink-0", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-control-ui": "tool-approval",
+			"data-control-family": "tool-approval",
+			"data-slot": "status-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(StatusIcon, { className: "size-3.5" })
+		}), children ?? decisionLabels[state]]
+	});
+}
+function ToolApprovalDescription({ className, ...props }) {
+	const { state } = useToolApprovalContext();
+	if (state !== "pending") return null;
+	return /* @__PURE__ */ jsx("p", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "description",
+		className,
+		...props
+	});
+}
+function ToolApprovalPreview({ className, ...props }) {
+	const { state } = useToolApprovalContext();
+	if (state !== "pending") return null;
+	return /* @__PURE__ */ jsx("dl", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "preview",
+		className: cn("min-w-0", className),
+		...props
+	});
+}
+function ToolApprovalField({ label, children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "field",
+		className,
+		...props,
+		children: [/* @__PURE__ */ jsx("dt", {
+			"data-control-ui": "tool-approval",
+			"data-control-family": "tool-approval",
+			"data-slot": "field-label",
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			"data-control-ui": "tool-approval",
+			"data-control-family": "tool-approval",
+			"data-slot": "field-value",
+			className: "min-w-0 break-words",
+			children
+		})]
+	});
+}
+function ToolApprovalFooter({ className, ...props }) {
+	const { state } = useToolApprovalContext();
+	if (state !== "pending") return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "footer",
+		className,
+		...props
+	});
+}
+function ToolApprovalDeny({ children, onClick, ...props }) {
+	const { deny } = useToolApprovalContext();
+	function handleClick(event) {
+		onClick?.(event);
+		if (!event.defaultPrevented) deny();
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		"data-control-ui": "tool-approval",
+		"data-slot": "deny",
+		type: "button",
+		variant: "quiet",
+		size: "xs",
+		"aria-keyshortcuts": "Escape",
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: ["Deny", /* @__PURE__ */ jsx(Kbd, {
+			"aria-hidden": "true",
+			children: "Esc"
+		})] })
+	});
+}
+function ToolApprovalApprove({ children, onClick, ...props }) {
+	const { approve } = useToolApprovalContext();
+	function handleClick(event) {
+		onClick?.(event);
+		if (!event.defaultPrevented) approve();
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		"data-control-ui": "tool-approval",
+		"data-slot": "approve",
+		type: "button",
+		variant: "solid",
+		tone: "primary",
+		size: "xs",
+		"aria-keyshortcuts": "Meta+Enter Control+Enter",
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: ["Approve", /* @__PURE__ */ jsx(Kbd, {
+			"aria-hidden": "true",
+			children: "⌘⏎"
+		})] })
+	});
+}
+//#endregion
+export { ToolApproval, ToolApprovalApprove, ToolApprovalBody, ToolApprovalDeny, ToolApprovalDescription, ToolApprovalField, ToolApprovalFooter, ToolApprovalHeader, ToolApprovalIcon, ToolApprovalPreview, ToolApprovalRisk, ToolApprovalStatus, ToolApprovalTitle };

package/dist/ui/code.js

@@ -3,6 +3,7 @@ import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
 import { LiveStatus } from "./live-status.js";
+import { Swap, SwapItem } from "./swap.js";
 import { ScrollArea } from "./scroll-area.js";
 import { highlightToTokens } from "../lib/code-tokens.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
@@ -99,9 +100,18 @@ function CodeCopy({ value, copiedLabel, copiedAriaLabel = "Copied to clipboard",
 		className,
 		...props,
 		onClick: handleCopy,
-		children: status === "copied" ? copied : children ?? /* @__PURE__ */ jsx(CopyIcon, {
-			"aria-hidden": "true",
-			className: "size-3.5"
+		children: /* @__PURE__ */ jsxs(Swap, {
+			value: status === "copied" ? "copied" : "idle",
+			children: [/* @__PURE__ */ jsx(SwapItem, {
+				value: "idle",
+				children: children ?? /* @__PURE__ */ jsx(CopyIcon, {
+					"aria-hidden": "true",
+					className: "size-3.5"
+				})
+			}), /* @__PURE__ */ jsx(SwapItem, {
+				value: "copied",
+				children: copied
+			})]
 		})
 	});
 	if (!isIconOnly) return /* @__PURE__ */ jsxs(Fragment$1, { children: [button, liveStatus] });

package/dist/ui/command.js

@@ -61,6 +61,7 @@ function CommandInput({ className, ...props }) {
 		"data-slot": "input-wrapper",
 		"data-control-family": "popup",
 		"data-control": "true",
+		"data-focus-ring": "none",
 		"data-size": "lg",
 		className: "flex items-center",
 		children: [/* @__PURE__ */ jsxs("svg", {

package/dist/ui/infinite-canvas.d.ts

@@ -1,31 +1,24 @@
+import { Button } from "./button.js";
 import { InfiniteCanvasKnobStyle } from "../knob-contracts/infinite-canvas-knobs.js";
+import { InfiniteCanvasBounds, InfiniteCanvasPoint, InfiniteCanvasTransform } from "../lib/infinite-canvas-camera.js";
+import { InfiniteCanvasCamera, InfiniteCanvasFitOptions, InfiniteCanvasMoveDetails, InfiniteCanvasMoveOptions, InfiniteCanvasMoveReason, InfiniteCanvasRevealOptions, InfiniteCanvasTransformUpdate, InfiniteCanvasZoomOptions } from "../lib/infinite-canvas-camera-store.js";
+import { InfiniteCanvasPanOnDrag } from "../lib/infinite-canvas-navigation.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/infinite-canvas.d.ts
-export type InfiniteCanvasTransform = {
-  x: number;
-  y: number;
-  scale: number;
-};
-export type InfiniteCanvasMoveReason = "pointer" | "wheel" | "keyboard" | "control";
-export type InfiniteCanvasMoveDetails = {
-  reason: InfiniteCanvasMoveReason;
-};
-export type InfiniteCanvasProps = Omit<ComponentProps<"section">, "onChange" | "onWheel" | "ref" | "style"> & {
+export type InfiniteCanvasProps = Omit<ComponentProps<"section">, "onChange" | "onWheel" | "style"> & {
   transform?: InfiniteCanvasTransform;
   defaultTransform?: InfiniteCanvasTransform;
   onTransformChange?: (transform: InfiniteCanvasTransform, details: InfiniteCanvasMoveDetails) => void;
   minScale?: number;
   maxScale?: number;
+  panOnDrag?: InfiniteCanvasPanOnDrag;
+  keyboardNavigation?: boolean;
   onWheel?: (event: WheelEvent) => void;
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
-export type InfiniteCanvasContentProps = ComponentProps<"div"> & {
+export type InfiniteCanvasContentProps = Omit<ComponentProps<"div">, "ref" | "style"> & {
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
-export type InfiniteCanvasPoint = {
-  x: number;
-  y: number;
-};
 export type InfiniteCanvasItemProps = Omit<ComponentProps<"div">, "style"> & {
   x: number;
   y: number;
@@ -33,19 +26,23 @@ export type InfiniteCanvasItemProps = Omit<ComponentProps<"div">, "style"> & {
   movableItemLabel?: string;
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
+export type InfiniteCanvasItemHandleProps = ComponentProps<typeof Button> & {
+  onPositionChange: (position: InfiniteCanvasPoint) => void;
+};
 export type InfiniteCanvasControlsProps = Omit<ComponentProps<"div">, "children" | "style"> & {
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
-type InfiniteCanvasContextValue = {
-  transform: InfiniteCanvasTransform;
+export type InfiniteCanvasContextValue = InfiniteCanvasCamera & {
   minScale: number;
   maxScale: number;
-  reset: (reason: InfiniteCanvasMoveReason) => void;
-  zoomBy: (factor: number, reason: InfiniteCanvasMoveReason) => void;
 };
 export declare function useInfiniteCanvas(): InfiniteCanvasContextValue;
-export declare function InfiniteCanvas({ transform: controlledTransform, defaultTransform, onTransformChange, minScale: minScaleProp, maxScale: maxScaleProp, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel, "aria-keyshortcuts": ariaKeyShortcuts, ...props }: InfiniteCanvasProps): import("react").JSX.Element;
+export declare function useInfiniteCanvasTransform(): InfiniteCanvasTransform;
+export declare function useInfiniteCanvasTransform<Selected>(select: (transform: InfiniteCanvasTransform) => Selected): Selected;
+export declare function InfiniteCanvas({ transform, defaultTransform, onTransformChange, minScale: minScaleProp, maxScale: maxScaleProp, panOnDrag, keyboardNavigation, ref, className, children, style, onPointerDown, onWheel, onKeyDown, "aria-label": ariaLabel, "aria-keyshortcuts": ariaKeyShortcuts, ...props }: InfiniteCanvasProps): import("react").JSX.Element;
 export declare function InfiniteCanvasContent({ className, style, ...props }: InfiniteCanvasContentProps): import("react").JSX.Element;
-export declare function InfiniteCanvasItem({ x, y, onPositionChange, movableItemLabel, className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onKeyDown, ...props }: InfiniteCanvasItemProps): import("react").JSX.Element;
+export declare function InfiniteCanvasItem({ x, y, onPositionChange, movableItemLabel, className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, ...props }: InfiniteCanvasItemProps): import("react").JSX.Element;
+export declare function InfiniteCanvasItemHandle({ onPositionChange, className, children, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, "aria-label": ariaLabel, ...props }: InfiniteCanvasItemHandleProps): import("react").JSX.Element;
 export declare function InfiniteCanvasControls({ className, ...props }: InfiniteCanvasControlsProps): import("react").JSX.Element;
-//#endregion
+//#endregion
+export type { InfiniteCanvasBounds, InfiniteCanvasCamera, InfiniteCanvasFitOptions, InfiniteCanvasMoveDetails, InfiniteCanvasMoveOptions, InfiniteCanvasMoveReason, InfiniteCanvasPanOnDrag, InfiniteCanvasPoint, InfiniteCanvasRevealOptions, InfiniteCanvasTransform, InfiniteCanvasTransformUpdate, InfiniteCanvasZoomOptions };