@od-oneapp/uni-ui 2026.1.1301

package/dist/components-ai-elements/tool-approval/index.mjs

@@ -0,0 +1,252 @@
+'use client';
+import { t as cn } from "../../utils-D2bGp2p_.mjs";
+import { a as SPRING_TACTILE, r as SPRING_FLUID } from "../../motion-zelaDelJ.mjs";
+import { AI_FOCUS, AI_ICON, AI_NESTED_RADIUS, AI_SPACING, AI_STACK, AI_TEXT, AI_TRANSITION } from "../../components-ai-elements-constants.mjs";
+import { t as Button } from "../../button-DVOrrZLw.mjs";
+import { a as Card, c as CardDescription, d as CardTitle, s as CardContent, u as CardHeader } from "../../integrations-lBG309ZD.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useDocumentVisibility, useFocusTrap, useHotkeys, useMediaQuery, useReducedMotion, useTimeout } from "@mantine/hooks";
+import { CheckCircle2, XCircle } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+
+//#region src/components/ai-elements/tool-approval/tool-approval.tsx
+/**
+* @fileoverview ToolApproval Component - Premium Harmony V2
+*
+* A component for displaying and handling tool execution approval requests from AI agents.
+* Supports auto-timeout, user interaction, optimistic UI, and toast notifications.
+*
+* Features:
+* - Premium Harmony V2 motion (SPRING_TACTILE, SPRING_FLUID, SPRING_GENTLE)
+* - Touch-optimized 44px minimum targets
+* - Reduced motion support via prefers-reduced-motion
+* - Desktop vs touch device adaptation
+* - Semantic color tokens (no hardcoded colors)
+* - Data attributes for state management (data-state, data-pending)
+* - Focus-visible ring styles using AI_FOCUS
+* - AnimatePresence for smooth enter/exit animations
+* - ES2023 syntax with useCallback, useMemo optimization
+* - Tailwind v4 CSS-first theming
+* - Integration with Vercel AI SDK ToolUIPart
+* - Mantine hooks (useDocumentVisibility, useFocusTrap, useHotkeys, useTimeout, useMediaQuery, useReducedMotion)
+* - Auto-deny timeout (default 20s, pauses when tab hidden)
+* - Optimistic UI state for instant visual feedback
+* - Focus trap for accessibility
+* - Keyboard shortcuts (Enter=approve, Escape=deny)
+* - Toast notifications via Sonner
+* - Parameter details collapsible section
+* - AI design system constants integration
+*
+* @module @od-oneapp/uni-ui/components/ai-elements/tool-approval
+* @component ToolApproval
+*
+* @useCases
+* - Agent tool execution approval in AI chat interfaces
+* - User confirmation for destructive or sensitive operations
+* - Database query approval before execution
+* - File system operation permission requests
+* - API call confirmation dialogs
+* - Batch operation approval workflows
+*
+* @example
+* <ToolApproval
+*   toolPart={toolUIPart}
+*   onApprove={(approved) => console.log('Approved:', approved)}
+*   autoDenyMs={15000}
+*   onDecision={(approved, reason) => console.log(reason)}
+* />
+*/
+/**
+* Render a tool approval card that prompts the user to approve or deny an agent-invoked tool action.
+*
+* Displays a human-friendly tool name, an operation/description summary, optional parameter details, and approve/deny controls.
+*
+* **Keyboard shortcuts:**
+* - `Enter` - Approves the tool request
+* - `Escape` - Denies the tool request
+*
+* **Behavior:**
+* - User-triggered decisions (button clicks or keyboard shortcuts) emit success/warning toast notifications.
+* - Auto-timeout denies the request without showing a toast, only calling `onDecision(false, 'timeout')` and `onApprove(false)`.
+*
+* @param toolPart - Tool UI payload describing the requested tool action (type, input, toolCallId).
+* @param onApprove - Required callback invoked with `true` for approve or `false` for deny when the user or timeout makes a decision.
+* @param autoDenyMs - Time in milliseconds to automatically deny the request when no user action occurs. Defaults to 20000.
+* @param onDecision - Optional callback invoked with the decision and a reason: `'user'` when triggered by user action or `'timeout'` when auto-denied.
+*/
+function ToolApproval({ toolPart, onApprove, autoDenyMs = 2e4, onDecision }) {
+	const isTouchDevice = useMediaQuery("(pointer: coarse)");
+	const prefersReducedMotion = useReducedMotion();
+	const focusTrapRef = useFocusTrap();
+	const [optimisticState, setOptimisticState] = useState("idle");
+	const toolName = useMemo(() => toolPart.type.replace("tool-", ""), [toolPart.type]);
+	const displayName = useMemo(() => toolName.split(/(?=[A-Z])/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" "), [toolName]);
+	const input = toolPart.input;
+	const operation = input?.operation;
+	const description = input?.description;
+	const csv = input?.csv;
+	const filterCriteria = input?.filterCriteria;
+	const editColumn = input?.editColumn;
+	const editInstruction = input?.editInstruction;
+	const operationDescription = useMemo(() => {
+		if (operation) {
+			let desc = `Operation: ${operation}`;
+			if (filterCriteria) desc += ` - Filter: ${filterCriteria}`;
+			if (editColumn && editInstruction) desc += ` - Edit ${editColumn}: ${editInstruction}`;
+			return desc;
+		}
+		if (description) return description;
+		if (csv) return `Adding ${csv.split("\n").length - 1} row(s) of data`;
+		return "";
+	}, [
+		operation,
+		filterCriteria,
+		editColumn,
+		editInstruction,
+		description,
+		csv
+	]);
+	const documentVisibility = useDocumentVisibility();
+	const decisionMadeRef = useRef(false);
+	const { start: startTimer, clear: clearTimer } = useTimeout(useCallback(() => {
+		if (decisionMadeRef.current) return;
+		decisionMadeRef.current = true;
+		onDecision?.(false, "timeout");
+		onApprove(false);
+	}, [onApprove, onDecision]), autoDenyMs);
+	useEffect(() => {
+		if (decisionMadeRef.current) return;
+		if (documentVisibility === "visible") startTimer();
+		else clearTimer();
+	}, [
+		documentVisibility,
+		startTimer,
+		clearTimer
+	]);
+	const handleDecision = useCallback((approved) => {
+		if (decisionMadeRef.current) return;
+		decisionMadeRef.current = true;
+		setOptimisticState(approved ? "approving" : "denying");
+		clearTimer();
+		if (approved) toast.success("Tool approved", { description: displayName });
+		else toast.warning("Tool denied", { description: displayName });
+		onDecision?.(approved, "user");
+		onApprove(approved);
+	}, [
+		clearTimer,
+		displayName,
+		onApprove,
+		onDecision
+	]);
+	const handleApprove = useCallback(() => {
+		handleDecision(true);
+	}, [handleDecision]);
+	const handleDeny = useCallback(() => {
+		handleDecision(false);
+	}, [handleDecision]);
+	useHotkeys([[
+		"Enter",
+		() => handleDecision(true),
+		{ preventDefault: true }
+	], [
+		"Escape",
+		() => handleDecision(false),
+		{ preventDefault: true }
+	]], []);
+	const cardVariants = useMemo(() => ({
+		initial: prefersReducedMotion ? { opacity: 0 } : {
+			opacity: 0,
+			scale: .98,
+			y: isTouchDevice ? 20 : 10
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		},
+		exit: prefersReducedMotion ? { opacity: 0 } : {
+			opacity: 0,
+			scale: .98,
+			y: isTouchDevice ? 20 : 10
+		}
+	}), [prefersReducedMotion, isTouchDevice]);
+	const cardTransition = useMemo(() => prefersReducedMotion ? { duration: .001 } : isTouchDevice ? SPRING_TACTILE : SPRING_FLUID, [prefersReducedMotion, isTouchDevice]);
+	useEffect(() => {
+		toast.info("Tool approval requested", {
+			description: `${displayName} is waiting for your response.`,
+			id: `tool-approval-${toolPart.toolCallId}`,
+			duration: 6e3
+		});
+	}, [displayName, toolPart.toolCallId]);
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "wait",
+		children: /* @__PURE__ */ jsx(motion.div, {
+			initial: "initial",
+			animate: "animate",
+			exit: "exit",
+			variants: cardVariants,
+			transition: cardTransition,
+			children: /* @__PURE__ */ jsxs(Card, {
+				ref: focusTrapRef,
+				"data-state": optimisticState,
+				"data-pending": optimisticState !== "idle",
+				className: cn("border-border border", "bg-surface", "my-4", AI_FOCUS.ring, "border-l-warning border-l-4", optimisticState === "approving" && ["border-l-success opacity-75", AI_TRANSITION.all].join(" "), optimisticState === "denying" && ["border-l-destructive opacity-75", AI_TRANSITION.all].join(" ")),
+				children: [/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsxs(CardTitle, {
+					className: cn("text-foreground font-medium", AI_TEXT.sm, "flex items-center", AI_SPACING.xs),
+					children: [/* @__PURE__ */ jsx(CheckCircle2, { className: cn(AI_ICON.lg, "text-warning") }), "Tool Approval Required"]
+				}), /* @__PURE__ */ jsxs(CardDescription, {
+					className: cn("text-foreground-subtle", AI_TEXT.xs),
+					children: [displayName, " requires your approval before proceeding"]
+				})] }), /* @__PURE__ */ jsxs(CardContent, {
+					className: AI_STACK.standard,
+					children: [
+						operationDescription ? /* @__PURE__ */ jsx("div", {
+							className: cn("bg-surface-subtle p-3", AI_NESTED_RADIUS),
+							children: /* @__PURE__ */ jsx("p", {
+								className: cn("text-foreground font-medium", AI_TEXT.sm),
+								children: operationDescription
+							})
+						}) : null,
+						input && Object.keys(input).length > 0 ? /* @__PURE__ */ jsxs("details", {
+							className: cn("border-border border", "bg-surface p-2", AI_NESTED_RADIUS, AI_FOCUS.ring),
+							children: [/* @__PURE__ */ jsx("summary", {
+								className: cn("text-foreground-subtle cursor-pointer font-medium", AI_TEXT.xs, isTouchDevice && "flex min-h-[44px] items-center"),
+								children: "View Parameters"
+							}), /* @__PURE__ */ jsx("pre", {
+								className: cn("text-foreground-subtle opacity-80", "mt-2 overflow-auto", AI_TEXT.xs),
+								children: JSON.stringify(input, null, 2)
+							})]
+						}) : null,
+						/* @__PURE__ */ jsxs("div", {
+							className: cn("flex", AI_SPACING.xs),
+							children: [/* @__PURE__ */ jsxs(Button, {
+								variant: "default",
+								color: "green",
+								onClick: handleApprove,
+								size: isTouchDevice ? "default" : "sm",
+								className: cn("flex-1", isTouchDevice && "min-h-[44px]", AI_FOCUS.ring),
+								disabled: optimisticState !== "idle",
+								"data-state": optimisticState === "approving" ? "loading" : "idle",
+								children: [/* @__PURE__ */ jsx(CheckCircle2, { className: cn("mr-2", AI_ICON.md, optimisticState === "approving" && "animate-pulse") }), optimisticState === "approving" ? "Approving..." : "Approve"]
+							}), /* @__PURE__ */ jsxs(Button, {
+								variant: "destructive",
+								onClick: handleDeny,
+								size: isTouchDevice ? "default" : "sm",
+								className: cn("flex-1", isTouchDevice && "min-h-[44px]", AI_FOCUS.ring),
+								disabled: optimisticState !== "idle",
+								"data-state": optimisticState === "denying" ? "loading" : "idle",
+								children: [/* @__PURE__ */ jsx(XCircle, { className: cn("mr-2", AI_ICON.md, optimisticState === "denying" && "animate-pulse") }), optimisticState === "denying" ? "Denying..." : "Deny"]
+							})]
+						})
+					]
+				})]
+			})
+		})
+	});
+}
+
+//#endregion
+export { ToolApproval };
+//# sourceMappingURL=index.mjs.map

package/dist/components-ai-elements/tool-approval/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ai-elements/tool-approval/tool-approval.tsx"],"sourcesContent":["/**\n * @fileoverview ToolApproval Component - Premium Harmony V2\n *\n * A component for displaying and handling tool execution approval requests from AI agents.\n * Supports auto-timeout, user interaction, optimistic UI, and toast notifications.\n *\n * Features:\n * - Premium Harmony V2 motion (SPRING_TACTILE, SPRING_FLUID, SPRING_GENTLE)\n * - Touch-optimized 44px minimum targets\n * - Reduced motion support via prefers-reduced-motion\n * - Desktop vs touch device adaptation\n * - Semantic color tokens (no hardcoded colors)\n * - Data attributes for state management (data-state, data-pending)\n * - Focus-visible ring styles using AI_FOCUS\n * - AnimatePresence for smooth enter/exit animations\n * - ES2023 syntax with useCallback, useMemo optimization\n * - Tailwind v4 CSS-first theming\n * - Integration with Vercel AI SDK ToolUIPart\n * - Mantine hooks (useDocumentVisibility, useFocusTrap, useHotkeys, useTimeout, useMediaQuery, useReducedMotion)\n * - Auto-deny timeout (default 20s, pauses when tab hidden)\n * - Optimistic UI state for instant visual feedback\n * - Focus trap for accessibility\n * - Keyboard shortcuts (Enter=approve, Escape=deny)\n * - Toast notifications via Sonner\n * - Parameter details collapsible section\n * - AI design system constants integration\n *\n * @module @od-oneapp/uni-ui/components/ai-elements/tool-approval\n * @component ToolApproval\n *\n * @useCases\n * - Agent tool execution approval in AI chat interfaces\n * - User confirmation for destructive or sensitive operations\n * - Database query approval before execution\n * - File system operation permission requests\n * - API call confirmation dialogs\n * - Batch operation approval workflows\n *\n * @example\n * <ToolApproval\n *   toolPart={toolUIPart}\n *   onApprove={(approved) => console.log('Approved:', approved)}\n *   autoDenyMs={15000}\n *   onDecision={(approved, reason) => console.log(reason)}\n * />\n */\n\n'use client';\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n  useDocumentVisibility,\n  useFocusTrap,\n  useHotkeys,\n  useMediaQuery,\n  useReducedMotion,\n  useTimeout,\n} from '@mantine/hooks';\nimport { CheckCircle2, XCircle } from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { toast } from 'sonner';\n\nimport { cn } from '../../../lib/utils';\nimport { Button } from '../../elements/atoms/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '../../elements/organisms/card';\nimport {\n  AI_FOCUS,\n  AI_ICON,\n  AI_NESTED_RADIUS,\n  AI_SPACING,\n  AI_STACK,\n  AI_TEXT,\n  AI_TRANSITION,\n  SPRING_FLUID,\n  SPRING_TACTILE,\n} from '../ai-elements.constants';\n\nimport type { ToolUIPart } from 'ai';\n\ntype ToolApprovalProps = {\n  toolPart: ToolUIPart;\n  onApprove: (approved: boolean) => void;\n  autoDenyMs?: number;\n  onDecision?: (approved: boolean, reason: 'user' | 'timeout') => void;\n};\n\n/**\n * Render a tool approval card that prompts the user to approve or deny an agent-invoked tool action.\n *\n * Displays a human-friendly tool name, an operation/description summary, optional parameter details, and approve/deny controls.\n *\n * **Keyboard shortcuts:**\n * - `Enter` - Approves the tool request\n * - `Escape` - Denies the tool request\n *\n * **Behavior:**\n * - User-triggered decisions (button clicks or keyboard shortcuts) emit success/warning toast notifications.\n * - Auto-timeout denies the request without showing a toast, only calling `onDecision(false, 'timeout')` and `onApprove(false)`.\n *\n * @param toolPart - Tool UI payload describing the requested tool action (type, input, toolCallId).\n * @param onApprove - Required callback invoked with `true` for approve or `false` for deny when the user or timeout makes a decision.\n * @param autoDenyMs - Time in milliseconds to automatically deny the request when no user action occurs. Defaults to 20000.\n * @param onDecision - Optional callback invoked with the decision and a reason: `'user'` when triggered by user action or `'timeout'` when auto-denied.\n */\nexport function ToolApproval({\n  toolPart,\n  onApprove,\n  autoDenyMs = 20000,\n  onDecision,\n}: ToolApprovalProps) {\n  // Premium Harmony V2: Device and motion detection\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n  const prefersReducedMotion = useReducedMotion();\n\n  // Focus trap to keep keyboard focus within the approval card for accessibility\n  // Auto-focuses the first focusable element (Approve button) on mount\n  const focusTrapRef = useFocusTrap();\n\n  // Optimistic UI state - shows immediate feedback before callbacks complete\n  const [optimisticState, setOptimisticState] = useState<'idle' | 'approving' | 'denying'>('idle');\n\n  // Memoize tool name extraction and formatting to prevent unnecessary re-computation\n  const toolName = useMemo(() => toolPart.type.replace('tool-', ''), [toolPart.type]);\n\n  const displayName = useMemo(\n    () =>\n      toolName\n        .split(/(?=[A-Z])/)\n        .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n        .join(' '),\n    [toolName],\n  );\n\n  // Extract input parameters\n  const input = toolPart.input as Record<string, unknown> | undefined;\n  const operation = input?.operation as string | undefined;\n  const description = input?.description as string | undefined;\n  const csv = input?.csv as string | undefined;\n  const filterCriteria = input?.filterCriteria as string | undefined;\n  const editColumn = input?.editColumn as string | undefined;\n  const editInstruction = input?.editInstruction as string | undefined;\n\n  // Memoize operation description to prevent unnecessary re-computation\n  const operationDescription = useMemo(() => {\n    if (operation) {\n      let desc = `Operation: ${operation}`;\n      if (filterCriteria) {\n        desc += ` - Filter: ${filterCriteria}`;\n      }\n      if (editColumn && editInstruction) {\n        desc += ` - Edit ${editColumn}: ${editInstruction}`;\n      }\n      return desc;\n    }\n    if (description) {\n      return description;\n    }\n    if (csv) {\n      const rowCount = csv.split('\\n').length - 1;\n      return `Adding ${rowCount} row(s) of data`;\n    }\n    return '';\n  }, [operation, filterCriteria, editColumn, editInstruction, description, csv]);\n\n  // Track document visibility to pause auto-deny timer when tab is hidden\n  const documentVisibility = useDocumentVisibility();\n\n  // Track if decision has been made to prevent double-firing\n  const decisionMadeRef = useRef(false);\n\n  // Auto-deny callback (no toast - silent timeout)\n  const handleAutoDeny = useCallback(() => {\n    if (decisionMadeRef.current) return;\n    decisionMadeRef.current = true;\n    onDecision?.(false, 'timeout');\n    onApprove(false);\n  }, [onApprove, onDecision]);\n\n  // Mantine's useTimeout for auto-deny timer\n  const { start: startTimer, clear: clearTimer } = useTimeout(handleAutoDeny, autoDenyMs);\n\n  // Pause/resume timer based on document visibility\n  useEffect(() => {\n    if (decisionMadeRef.current) return;\n    if (documentVisibility === 'visible') {\n      startTimer();\n    } else {\n      clearTimer();\n    }\n  }, [documentVisibility, startTimer, clearTimer]);\n\n  const handleDecision = useCallback(\n    (approved: boolean) => {\n      if (decisionMadeRef.current) return;\n      decisionMadeRef.current = true;\n\n      // Set optimistic state immediately for instant visual feedback\n      setOptimisticState(approved ? 'approving' : 'denying');\n\n      // Clear the auto-deny timer\n      clearTimer();\n\n      if (approved) {\n        toast.success('Tool approved', {\n          description: displayName,\n        });\n      } else {\n        toast.warning('Tool denied', {\n          description: displayName,\n        });\n      }\n\n      onDecision?.(approved, 'user');\n      onApprove(approved);\n    },\n    [clearTimer, displayName, onApprove, onDecision],\n  );\n\n  // Memoize button click handlers to prevent unnecessary re-renders\n  const handleApprove = useCallback(() => {\n    handleDecision(true);\n  }, [handleDecision]);\n\n  const handleDeny = useCallback(() => {\n    handleDecision(false);\n  }, [handleDecision]);\n\n  // Keyboard shortcuts: Enter to approve, Escape to deny\n  useHotkeys(\n    [\n      ['Enter', () => handleDecision(true), { preventDefault: true }],\n      ['Escape', () => handleDecision(false), { preventDefault: true }],\n    ],\n    [], // Empty array = don't ignore any element types\n  );\n\n  // Premium Harmony V2: Memoized animation variants\n  const cardVariants = useMemo(\n    () => ({\n      initial: prefersReducedMotion\n        ? { opacity: 0 }\n        : { opacity: 0, scale: 0.98, y: isTouchDevice ? 20 : 10 },\n      animate: { opacity: 1, scale: 1, y: 0 },\n      exit: prefersReducedMotion\n        ? { opacity: 0 }\n        : { opacity: 0, scale: 0.98, y: isTouchDevice ? 20 : 10 },\n    }),\n    [prefersReducedMotion, isTouchDevice],\n  );\n\n  const cardTransition = useMemo(\n    () =>\n      prefersReducedMotion ? { duration: 0.001 } : (isTouchDevice ? SPRING_TACTILE : SPRING_FLUID),\n    [prefersReducedMotion, isTouchDevice],\n  );\n\n  // Show toast notification on mount\n  useEffect(() => {\n    toast.info('Tool approval requested', {\n      description: `${displayName} is waiting for your response.`,\n      id: `tool-approval-${toolPart.toolCallId}`,\n      duration: 6000,\n    });\n  }, [displayName, toolPart.toolCallId]);\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      <motion.div\n        initial=\"initial\"\n        animate=\"animate\"\n        exit=\"exit\"\n        variants={cardVariants}\n        transition={cardTransition}\n      >\n        <Card\n          ref={focusTrapRef}\n          data-state={optimisticState}\n          data-pending={optimisticState !== 'idle'}\n          className={cn(\n            // Figma: border and background using design tokens\n            'border-border border',\n            'bg-surface',\n            'my-4',\n            // Premium Harmony V2: Focus-visible ring\n            AI_FOCUS.ring,\n            // Warning accent border (semantic token)\n            'border-l-warning border-l-4',\n            // Optimistic state visual feedback\n            optimisticState === 'approving' &&\n              ['border-l-success opacity-75', AI_TRANSITION.all].join(' '),\n            optimisticState === 'denying' &&\n              ['border-l-destructive opacity-75', AI_TRANSITION.all].join(' '),\n          )}\n        >\n          <CardHeader>\n            <CardTitle\n              className={cn(\n                // Figma: text styling\n                'text-foreground font-medium',\n                AI_TEXT.sm,\n                'flex items-center',\n                AI_SPACING.xs,\n              )}\n            >\n              <CheckCircle2 className={cn(AI_ICON.lg, 'text-warning')} />\n              Tool Approval Required\n            </CardTitle>\n            <CardDescription\n              className={cn(\n                // Figma: muted text color\n                'text-foreground-subtle',\n                AI_TEXT.xs,\n              )}\n            >\n              {displayName} requires your approval before proceeding\n            </CardDescription>\n          </CardHeader>\n          <CardContent className={AI_STACK.standard}>\n            {operationDescription ? (\n              <div\n                className={cn(\n                  // Figma: subtle background\n                  'bg-surface-subtle p-3',\n                  AI_NESTED_RADIUS,\n                )}\n              >\n                <p\n                  className={cn(\n                    // Figma: text styling\n                    'text-foreground font-medium',\n                    AI_TEXT.sm,\n                  )}\n                >\n                  {operationDescription}\n                </p>\n              </div>\n            ) : null}\n\n            {input && Object.keys(input).length > 0 ? (\n              <details\n                className={cn(\n                  // Figma: border and background\n                  'border-border border',\n                  'bg-surface p-2',\n                  AI_NESTED_RADIUS,\n                  // Premium Harmony V2: Focus-visible ring\n                  AI_FOCUS.ring,\n                )}\n              >\n                <summary\n                  className={cn(\n                    // Figma: text styling\n                    'text-foreground-subtle cursor-pointer font-medium',\n                    AI_TEXT.xs,\n                    // Premium Harmony V2: Touch target (44px min)\n                    isTouchDevice && 'flex min-h-[44px] items-center',\n                  )}\n                >\n                  View Parameters\n                </summary>\n                <pre\n                  className={cn(\n                    // Figma: muted text color\n                    'text-foreground-subtle opacity-80',\n                    'mt-2 overflow-auto',\n                    AI_TEXT.xs,\n                  )}\n                >\n                  {JSON.stringify(input, null, 2)}\n                </pre>\n              </details>\n            ) : null}\n\n            <div className={cn('flex', AI_SPACING.xs)}>\n              <Button\n                variant=\"default\"\n                color=\"green\"\n                onClick={handleApprove}\n                size={isTouchDevice ? 'default' : 'sm'}\n                className={cn('flex-1', isTouchDevice && 'min-h-[44px]', AI_FOCUS.ring)}\n                disabled={optimisticState !== 'idle'}\n                data-state={optimisticState === 'approving' ? 'loading' : 'idle'}\n              >\n                <CheckCircle2\n                  className={cn(\n                    'mr-2',\n                    AI_ICON.md,\n                    optimisticState === 'approving' && 'animate-pulse',\n                  )}\n                />\n                {optimisticState === 'approving' ? 'Approving...' : 'Approve'}\n              </Button>\n              <Button\n                variant=\"destructive\"\n                onClick={handleDeny}\n                size={isTouchDevice ? 'default' : 'sm'}\n                className={cn('flex-1', isTouchDevice && 'min-h-[44px]', AI_FOCUS.ring)}\n                disabled={optimisticState !== 'idle'}\n                data-state={optimisticState === 'denying' ? 'loading' : 'idle'}\n              >\n                <XCircle\n                  className={cn(\n                    'mr-2',\n                    AI_ICON.md,\n                    optimisticState === 'denying' && 'animate-pulse',\n                  )}\n                />\n                {optimisticState === 'denying' ? 'Denying...' : 'Deny'}\n              </Button>\n            </div>\n          </CardContent>\n        </Card>\n      </motion.div>\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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"}

package/dist/components-ai-elements/web-preview/index.d.mts

@@ -0,0 +1,136 @@
+
+import "../../skeleton-ByXUFNDF.mjs";
+import { t as Button } from "../../button-BAdq0gBE.mjs";
+import "../../components-elements-button.mjs";
+import { t as Input } from "../../input-D0T5jbR6.mjs";
+import "../../components-forms/input/index.mjs";
+import { ComponentProps, ReactNode, RefObject } from "react";
+import { VariantProps } from "class-variance-authority";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/ai-elements/web-preview/web-preview.d.ts
+declare const consoleLogVariants: (props?: ({
+  level?: "error" | "log" | "warn" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+type ConsoleLogVariants = VariantProps<typeof consoleLogVariants>;
+type WebPreviewContextValue = {
+  url: string;
+  setUrl: (url: string) => void;
+  consoleOpen: boolean;
+  setConsoleOpen: (open: boolean) => void;
+  goBack: () => void;
+  goForward: () => void;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  viewport: 'desktop' | 'tablet' | 'mobile';
+  setViewport: (viewport: 'desktop' | 'tablet' | 'mobile') => void;
+  isFullscreen: boolean;
+  setIsFullscreen: (fullscreen: boolean) => void;
+  toggle: () => void;
+  containerRef: RefObject<HTMLDivElement | null>;
+  network: {
+    online: boolean;
+    effectiveType?: 'slow-2g' | '2g' | '3g' | '4g';
+    downlink?: number;
+    rtt?: number;
+  };
+  isTouchDevice: boolean;
+  prefersReducedMotion: boolean;
+  isLoading: boolean;
+  setIsLoading: (loading: boolean) => void;
+};
+type WebPreviewProps = ComponentProps<'div'> & {
+  defaultUrl?: string;
+  onUrlChange?: (url: string) => void;
+};
+declare const WebPreview: ({
+  className,
+  children,
+  defaultUrl,
+  onUrlChange,
+  ...props
+}: WebPreviewProps) => react_jsx_runtime0.JSX.Element;
+type WebPreviewNavigationProps = ComponentProps<'div'>;
+declare const WebPreviewNavigation: ({
+  className,
+  children,
+  ...props
+}: WebPreviewNavigationProps) => react_jsx_runtime0.JSX.Element;
+type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+};
+declare const WebPreviewNavigationButton: ({
+  onClick,
+  disabled,
+  tooltip,
+  children,
+  className,
+  ...props
+}: WebPreviewNavigationButtonProps) => react_jsx_runtime0.JSX.Element;
+declare const WebPreviewBackButton: ({
+  tooltip,
+  ...props
+}: Omit<WebPreviewNavigationButtonProps, "onClick">) => react_jsx_runtime0.JSX.Element;
+declare const WebPreviewForwardButton: ({
+  tooltip,
+  ...props
+}: Omit<WebPreviewNavigationButtonProps, "onClick">) => react_jsx_runtime0.JSX.Element;
+declare const WebPreviewFullscreenToggle: ({
+  tooltip,
+  ...props
+}: Omit<WebPreviewNavigationButtonProps, "onClick">) => react_jsx_runtime0.JSX.Element;
+type WebPreviewUrlProps = ComponentProps<typeof Input>;
+declare const WebPreviewUrl: ({
+  value,
+  onChange,
+  onKeyDown,
+  className,
+  ...props
+}: WebPreviewUrlProps) => react_jsx_runtime0.JSX.Element;
+type WebPreviewBodyProps = ComponentProps<'iframe'> & {
+  loading?: ReactNode;
+};
+declare const WebPreviewBody: ({
+  className,
+  loading,
+  src,
+  ...props
+}: WebPreviewBodyProps) => react_jsx_runtime0.JSX.Element;
+type WebPreviewConsoleProps = ComponentProps<'div'> & {
+  logs?: Array<{
+    level: 'log' | 'warn' | 'error';
+    message: string;
+    timestamp: Date;
+  }>;
+};
+declare const WebPreviewConsole: ({
+  className,
+  logs,
+  children,
+  ...props
+}: WebPreviewConsoleProps) => react_jsx_runtime0.JSX.Element;
+type WebPreviewDeviceToggleProps = ComponentProps<'div'>;
+declare const WebPreviewDeviceToggle: ({
+  className,
+  ...props
+}: WebPreviewDeviceToggleProps) => react_jsx_runtime0.JSX.Element;
+type WebPreviewExampleSelectProps = {
+  examples: Array<{
+    label: string;
+    url: string;
+  }>;
+  placeholder?: string;
+};
+declare const WebPreviewExampleSelect: ({
+  examples,
+  placeholder
+}: WebPreviewExampleSelectProps) => react_jsx_runtime0.JSX.Element;
+type WebPreviewNetworkStatusProps = ComponentProps<'div'>;
+declare const WebPreviewNetworkStatus: ({
+  className,
+  ...props
+}: WebPreviewNetworkStatusProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ConsoleLogVariants, WebPreview, WebPreviewBackButton, WebPreviewBody, WebPreviewBodyProps, WebPreviewConsole, WebPreviewConsoleProps, WebPreviewContextValue, WebPreviewDeviceToggle, WebPreviewDeviceToggleProps, WebPreviewExampleSelect, WebPreviewExampleSelectProps, WebPreviewForwardButton, WebPreviewFullscreenToggle, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewNavigationButtonProps, WebPreviewNavigationProps, WebPreviewNetworkStatus, WebPreviewNetworkStatusProps, WebPreviewProps, WebPreviewUrl, WebPreviewUrlProps, consoleLogVariants };
+//# sourceMappingURL=index.d.mts.map