@elabs-ai/components-ai 4.2.0 → 5.0.0

package/dist/chunk-ELGCZLZF.js

@@ -0,0 +1,305 @@
+"use client";
+
+// src/confirmation.tsx
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  APPROVAL_SCOPE_DESCRIPTION_KEYS,
+  Kbd,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  StatusBadge,
+  Textarea,
+  useLocale
+} from "@elabs-ai/components-ui";
+import { Button } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { createContext, forwardRef, useContext, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ConfirmationContext = createContext(null);
+var useConfirmation = () => {
+  const context = useContext(ConfirmationContext);
+  if (!context) {
+    throw new Error("Confirmation components must be used within Confirmation");
+  }
+  return context;
+};
+var Confirmation = ({
+  className,
+  approval,
+  state,
+  variant,
+  role,
+  children,
+  ...props
+}) => {
+  const titleId = useId();
+  const [reason, setReason] = useState("");
+  const contextValue = useMemo(
+    () => ({ approval, state, titleId, reason, setReason }),
+    [approval, state, titleId, reason]
+  );
+  if (!approval || state === "input-streaming" || state === "input-available") {
+    return null;
+  }
+  const isResolved = state === "approval-responded" || state === "output-denied" || state === "output-available";
+  const isPending = state === "approval-requested";
+  const approved = isResolved ? approval.approved : void 0;
+  const railClass = approved === true ? "border-s-success" : approved === false ? "border-s-destructive" : isPending ? "border-s-border-strong" : "border-s-border";
+  return /* @__PURE__ */ jsx(ConfirmationContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    Alert,
+    {
+      variant: variant ?? "default",
+      role: role ?? (isPending ? "group" : "alert"),
+      "aria-labelledby": isPending ? titleId : void 0,
+      className: cn(
+        "flex flex-col gap-2 border-s-4 transition-colors duration-fast",
+        railClass,
+        isPending && "shadow-sm",
+        className
+      ),
+      ...props,
+      children: [
+        approved === true ? /* @__PURE__ */ jsx(
+          StatusBadge,
+          {
+            className: "animate-in fade-in-0 self-start duration-base ease-entrance",
+            status: "complete",
+            children: "Approved"
+          }
+        ) : null,
+        approved === false ? /* @__PURE__ */ jsx(
+          StatusBadge,
+          {
+            className: "animate-in fade-in-0 self-start duration-base ease-entrance",
+            status: "denied",
+            children: "Denied"
+          }
+        ) : null,
+        children
+      ]
+    }
+  ) });
+};
+var ConfirmationTitle = ({ className, id, ...props }) => {
+  const { titleId } = useConfirmation();
+  return /* @__PURE__ */ jsx(AlertTitle, { id: id ?? titleId, className: cn("text-subtitle", className), ...props });
+};
+var ConfirmationDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(AlertDescription, { className: cn("text-body text-muted-foreground", className), ...props });
+var ConfirmationRequest = ({ children }) => {
+  const { state } = useConfirmation();
+  if (state !== "approval-requested") {
+    return null;
+  }
+  return children;
+};
+var ConfirmationAccepted = ({ children }) => {
+  const { approval, state } = useConfirmation();
+  if (!approval?.approved || state !== "approval-responded" && state !== "output-denied" && state !== "output-available") {
+    return null;
+  }
+  return children;
+};
+var ConfirmationRejected = ({ children }) => {
+  const { approval, state } = useConfirmation();
+  if (approval?.approved !== false || state !== "approval-responded" && state !== "output-denied" && state !== "output-available") {
+    return null;
+  }
+  return children;
+};
+var ConfirmationActions = ({ className, ...props }) => {
+  const { state } = useConfirmation();
+  if (state !== "approval-requested") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        // The action band (research 11 §B.3 APPROVE-3): the divider is the SOLE
+        // cue between consequence and buttons, so `border-strong` is correct.
+        "flex w-full items-center justify-end gap-2 border-t border-border-strong pt-3",
+        className
+      ),
+      ...props
+    }
+  );
+};
+var ConfirmationAction = ({ className, ...props }) => /* @__PURE__ */ jsx(Button, { className: cn("h-8 px-3 text-body", className), type: "button", ...props });
+var ConfirmationApprove = (props) => /* @__PURE__ */ jsx(ConfirmationAction, { variant: "default", ...props });
+var ConfirmationDeny = (props) => /* @__PURE__ */ jsx(ConfirmationAction, { variant: "ghost", ...props });
+var ApprovalCard = Confirmation;
+var ApprovalCardTitle = ConfirmationTitle;
+var ApprovalCardDescription = ConfirmationDescription;
+var ApprovalCardRequest = ConfirmationRequest;
+var ApprovalCardAccepted = ConfirmationAccepted;
+var ApprovalCardRejected = ConfirmationRejected;
+var ApprovalCardActions = ConfirmationActions;
+var ApprovalCardAction = ConfirmationAction;
+var ApprovalCardApprove = ConfirmationApprove;
+var ApprovalCardDeny = ConfirmationDeny;
+var ApprovalCardOptions = forwardRef(
+  function ApprovalCardOptions2({
+    options,
+    value,
+    defaultValue,
+    onValueChange,
+    onConfirm,
+    className,
+    dir,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  }, ref) {
+    const { t } = useLocale();
+    const { titleId, reason } = useConfirmation();
+    const baseId = useId();
+    const handleValueChange = (id) => {
+      onValueChange?.(id);
+      const option = options.find((candidate) => candidate.id === id);
+      if (option) onConfirm?.(option, reason.trim() ? reason : void 0);
+    };
+    return /* @__PURE__ */ jsx(
+      RadioGroup,
+      {
+        ref,
+        dir,
+        defaultValue,
+        value,
+        onValueChange: handleValueChange,
+        "aria-labelledby": ariaLabelledBy ?? titleId,
+        "data-slot": "approval-card-options",
+        className: cn("grid gap-2", className),
+        ...props,
+        children: options.map((option) => {
+          const itemId = `${baseId}-${option.id}`;
+          const descriptionId = `${itemId}-description`;
+          const description = option.description ?? t(APPROVAL_SCOPE_DESCRIPTION_KEYS[option.scope]);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "approval-card-option",
+              "data-scope": option.scope,
+              className: cn(
+                "flex items-start gap-3 rounded-lg border border-border bg-card p-3",
+                "has-[[data-state=checked]]:border-primary"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  RadioGroupItem,
+                  {
+                    "aria-describedby": descriptionId,
+                    className: "mt-1",
+                    "data-slot": "approval-card-option-input",
+                    id: itemId,
+                    value: option.id
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "grid flex-1 gap-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      Label,
+                      {
+                        className: "text-body flex items-center gap-2 font-medium",
+                        "data-slot": "approval-card-option-label",
+                        htmlFor: itemId,
+                        children: option.label
+                      }
+                    ),
+                    option.keyHint ? /* @__PURE__ */ jsx(Kbd, { "data-slot": "approval-card-option-key-hint", children: option.keyHint }) : null
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: "text-meta text-muted-foreground",
+                      "data-slot": "approval-card-option-description",
+                      id: descriptionId,
+                      children: description
+                    }
+                  )
+                ] })
+              ]
+            },
+            option.id
+          );
+        })
+      }
+    );
+  }
+);
+ApprovalCardOptions.displayName = "ApprovalCardOptions";
+var ApprovalCardTarget = forwardRef(
+  function ApprovalCardTarget2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "approval-card-target",
+        className: cn("text-body rounded-md bg-muted/50 p-3", className),
+        ...props
+      }
+    );
+  }
+);
+ApprovalCardTarget.displayName = "ApprovalCardTarget";
+var ApprovalCardReason = forwardRef(
+  function ApprovalCardReason2({ className, id, placeholder, ...props }, ref) {
+    const { t } = useLocale();
+    const { reason, setReason } = useConfirmation();
+    const generatedId = useId();
+    const textareaId = id ?? generatedId;
+    return /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", "data-slot": "approval-card-reason", children: [
+      /* @__PURE__ */ jsx(
+        Label,
+        {
+          className: "text-meta text-muted-foreground",
+          "data-slot": "approval-card-reason-label",
+          htmlFor: textareaId,
+          children: t("ai.approvalCard.reasonLabel")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          ref,
+          id: textareaId,
+          placeholder: placeholder ?? t("ai.approvalCard.reasonPlaceholder"),
+          value: reason,
+          onChange: (event) => setReason(event.target.value),
+          "data-slot": "approval-card-reason-input",
+          className: cn("min-h-16 text-body", className),
+          ...props
+        }
+      )
+    ] });
+  }
+);
+ApprovalCardReason.displayName = "ApprovalCardReason";
+
+export {
+  Confirmation,
+  ConfirmationTitle,
+  ConfirmationDescription,
+  ConfirmationRequest,
+  ConfirmationAccepted,
+  ConfirmationRejected,
+  ConfirmationActions,
+  ConfirmationAction,
+  ConfirmationApprove,
+  ConfirmationDeny,
+  ApprovalCard,
+  ApprovalCardTitle,
+  ApprovalCardDescription,
+  ApprovalCardRequest,
+  ApprovalCardAccepted,
+  ApprovalCardRejected,
+  ApprovalCardActions,
+  ApprovalCardAction,
+  ApprovalCardApprove,
+  ApprovalCardDeny,
+  ApprovalCardOptions,
+  ApprovalCardTarget,
+  ApprovalCardReason
+};
+//# sourceMappingURL=chunk-ELGCZLZF.js.map

package/dist/chunk-ELGCZLZF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/confirmation.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n  APPROVAL_SCOPE_DESCRIPTION_KEYS,\n  Kbd,\n  Label,\n  RadioGroup,\n  RadioGroupItem,\n  StatusBadge,\n  Textarea,\n  useLocale,\n  type ApprovalOption,\n} from \"@elabs-ai/components-ui\";\nimport { Button } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport type { ToolUIPart } from \"ai\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { createContext, forwardRef, useContext, useId, useMemo, useState } from \"react\";\n\ntype ToolUIPartApproval =\n  | {\n      id: string;\n      approved?: never;\n      reason?: never;\n    }\n  | {\n      id: string;\n      approved: boolean;\n      reason?: string;\n    }\n  | {\n      id: string;\n      approved: true;\n      reason?: string;\n    }\n  | {\n      id: string;\n      approved: false;\n      reason?: string;\n    }\n  | undefined;\n\ninterface ConfirmationContextValue {\n  approval: ToolUIPartApproval;\n  state: ToolUIPart[\"state\"];\n  /** Default id wired from the card's `aria-labelledby` to `ConfirmationTitle`. */\n  titleId: string;\n  /**\n   * Shared draft reason text (#103) — written by `ApprovalCardReason`, read by\n   * `ApprovalCardOptions` at the moment a decision commits, so a typed\n   * explanation reaches `onConfirm`'s second argument without threading a\n   * prop between two sibling compound parts. Unused by the pre-existing\n   * binary `Confirmation*` parts, so their rendered output is unaffected.\n   */\n  reason: string;\n  setReason: (reason: string) => void;\n}\n\nconst ConfirmationContext = createContext<ConfirmationContextValue | null>(null);\n\nconst useConfirmation = () => {\n  const context = useContext(ConfirmationContext);\n\n  if (!context) {\n    throw new Error(\"Confirmation components must be used within Confirmation\");\n  }\n\n  return context;\n};\n\nexport type ConfirmationProps = ComponentProps<typeof Alert> & {\n  approval?: ToolUIPartApproval;\n  state: ToolUIPart[\"state\"];\n};\n\nexport const Confirmation = ({\n  className,\n  approval,\n  state,\n  variant,\n  role,\n  children,\n  ...props\n}: ConfirmationProps) => {\n  const titleId = useId();\n  const [reason, setReason] = useState(\"\");\n  const contextValue = useMemo(\n    () => ({ approval, state, titleId, reason, setReason }),\n    [approval, state, titleId, reason],\n  );\n\n  if (!approval || state === \"input-streaming\" || state === \"input-available\") {\n    return null;\n  }\n\n  const isResolved =\n    state === \"approval-responded\" || state === \"output-denied\" || state === \"output-available\";\n  const isPending = state === \"approval-requested\";\n  const approved = isResolved ? approval.approved : undefined;\n\n  // QUIET-RAIL treatment (supersedes research-11's warning/status WASH — a\n  // deliberate design-authority decision to drop the filled \"AI card\" look):\n  // a neutral card ground (Alert variant=\"default\") + ONE accent rail encoding\n  // the outcome, plus the StatusBadge (icon + label, never color alone). The\n  // rails are hue-independent enough to stay legible at high decoration / high-contrast.\n  // A caller-supplied `variant` still wins (escape hatch).\n  const railClass =\n    approved === true\n      ? \"border-s-success\"\n      : approved === false\n        ? \"border-s-destructive\"\n        : isPending\n          ? \"border-s-border-strong\"\n          : \"border-s-border\";\n\n  return (\n    <ConfirmationContext.Provider value={contextValue}>\n      <Alert\n        variant={variant ?? \"default\"}\n        // A pending decision containing focusable controls is a labelled\n        // region, NOT an assertive live region (research 11 §B.3): pending =\n        // role=\"group\" + aria-labelledby; resolved keeps role=\"alert\".\n        role={role ?? (isPending ? \"group\" : \"alert\")}\n        aria-labelledby={isPending ? titleId : undefined}\n        className={cn(\n          \"flex flex-col gap-2 border-s-4 transition-colors duration-fast\",\n          railClass,\n          isPending && \"shadow-sm\",\n          className,\n        )}\n        {...props}\n      >\n        {/* The status line is the canonical StatusBadge (#189, research 10 §B.1). */}\n        {approved === true ? (\n          <StatusBadge\n            className=\"animate-in fade-in-0 self-start duration-base ease-entrance\"\n            status=\"complete\"\n          >\n            Approved\n          </StatusBadge>\n        ) : null}\n        {approved === false ? (\n          <StatusBadge\n            className=\"animate-in fade-in-0 self-start duration-base ease-entrance\"\n            status=\"denied\"\n          >\n            Denied\n          </StatusBadge>\n        ) : null}\n        {children}\n      </Alert>\n    </ConfirmationContext.Provider>\n  );\n};\n\nexport type ConfirmationTitleProps = ComponentProps<typeof AlertTitle>;\n\n/**\n * The question zone (research 11 §B.3 APPROVE-3) — out-ranks the surrounding\n * `text-body` and names the pending region via the card's `aria-labelledby`.\n */\nexport const ConfirmationTitle = ({ className, id, ...props }: ConfirmationTitleProps) => {\n  const { titleId } = useConfirmation();\n  return <AlertTitle id={id ?? titleId} className={cn(\"text-subtitle\", className)} {...props} />;\n};\n\nexport type ConfirmationDescriptionProps = ComponentProps<typeof AlertDescription>;\n\n/** The consequence zone — what approving will actually do (research 11 §B.3). */\nexport const ConfirmationDescription = ({ className, ...props }: ConfirmationDescriptionProps) => (\n  <AlertDescription className={cn(\"text-body text-muted-foreground\", className)} {...props} />\n);\n\nexport interface ConfirmationRequestProps {\n  children?: ReactNode;\n}\n\nexport const ConfirmationRequest = ({ children }: ConfirmationRequestProps) => {\n  const { state } = useConfirmation();\n\n  // Only show when approval is requested\n  if (state !== \"approval-requested\") {\n    return null;\n  }\n\n  return children;\n};\n\nexport interface ConfirmationAcceptedProps {\n  children?: ReactNode;\n}\n\nexport const ConfirmationAccepted = ({ children }: ConfirmationAcceptedProps) => {\n  const { approval, state } = useConfirmation();\n\n  // Only show when approved and in response states\n  if (\n    !approval?.approved ||\n    (state !== \"approval-responded\" && state !== \"output-denied\" && state !== \"output-available\")\n  ) {\n    return null;\n  }\n\n  return children;\n};\n\nexport interface ConfirmationRejectedProps {\n  children?: ReactNode;\n}\n\nexport const ConfirmationRejected = ({ children }: ConfirmationRejectedProps) => {\n  const { approval, state } = useConfirmation();\n\n  // Only show when rejected and in response states\n  if (\n    approval?.approved !== false ||\n    (state !== \"approval-responded\" && state !== \"output-denied\" && state !== \"output-available\")\n  ) {\n    return null;\n  }\n\n  return children;\n};\n\nexport type ConfirmationActionsProps = ComponentProps<\"div\">;\n\nexport const ConfirmationActions = ({ className, ...props }: ConfirmationActionsProps) => {\n  const { state } = useConfirmation();\n\n  // Only show when approval is requested\n  if (state !== \"approval-requested\") {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        // The action band (research 11 §B.3 APPROVE-3): the divider is the SOLE\n        // cue between consequence and buttons, so `border-strong` is correct.\n        \"flex w-full items-center justify-end gap-2 border-t border-border-strong pt-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport type ConfirmationActionProps = ComponentProps<typeof Button>;\n\nexport const ConfirmationAction = ({ className, ...props }: ConfirmationActionProps) => (\n  <Button className={cn(\"h-8 px-3 text-body\", className)} type=\"button\" {...props} />\n);\n\nexport type ConfirmationApproveProps = ConfirmationActionProps;\n\n/**\n * The proceed action — presets the filled primary variant (research 11 §B.3\n * APPROVE-2). Role-named so the primary path cannot drift to `outline`.\n */\nexport const ConfirmationApprove = (props: ConfirmationApproveProps) => (\n  <ConfirmationAction variant=\"default\" {...props} />\n);\n\nexport type ConfirmationDenyProps = ConfirmationActionProps;\n\n/** The decline action — presets the quiet `ghost` variant, never `outline`. */\nexport const ConfirmationDeny = (props: ConfirmationDenyProps) => (\n  <ConfirmationAction variant=\"ghost\" {...props} />\n);\n\n/*\n * ApprovalCard — the promoted, semantically-named front door for the approval\n * interaction (research 11 §B.3). Same components, clearer name; the\n * `Confirmation*` exports stay for the AI-Elements-shaped API (non-breaking).\n * New code reaches for `ApprovalCard`.\n *\n * The `Confirmation*` family below is CLOSED — frozen at exactly the ten\n * names aliased here. New parts (#103 and beyond) are declared as real\n * `ApprovalCard*` implementations, never added to this alias block. See\n * `docs/decisions/2026-09-01-brainless-adoption-architecture.md` § 4 and the\n * `FROZEN_CONFIRMATION_EXPORTS` lock in `confirmation.test.tsx`.\n */\nexport const ApprovalCard = Confirmation;\nexport type ApprovalCardProps = ConfirmationProps;\nexport const ApprovalCardTitle = ConfirmationTitle;\nexport type ApprovalCardTitleProps = ConfirmationTitleProps;\nexport const ApprovalCardDescription = ConfirmationDescription;\nexport type ApprovalCardDescriptionProps = ConfirmationDescriptionProps;\nexport const ApprovalCardRequest = ConfirmationRequest;\nexport type ApprovalCardRequestProps = ConfirmationRequestProps;\nexport const ApprovalCardAccepted = ConfirmationAccepted;\nexport type ApprovalCardAcceptedProps = ConfirmationAcceptedProps;\nexport const ApprovalCardRejected = ConfirmationRejected;\nexport type ApprovalCardRejectedProps = ConfirmationRejectedProps;\nexport const ApprovalCardActions = ConfirmationActions;\nexport type ApprovalCardActionsProps = ConfirmationActionsProps;\nexport const ApprovalCardAction = ConfirmationAction;\nexport type ApprovalCardActionProps = ConfirmationActionProps;\nexport const ApprovalCardApprove = ConfirmationApprove;\nexport type ApprovalCardApproveProps = ConfirmationApproveProps;\nexport const ApprovalCardDeny = ConfirmationDeny;\nexport type ApprovalCardDenyProps = ConfirmationDenyProps;\n\n/*\n * ---------------------------------------------------------------------------\n * N-option, scoped approval (#103)\n * ---------------------------------------------------------------------------\n * Real coding-agent permission prompts are rarely a plain yes/no — they ask\n * an N-option question whose options encode SCOPE: \"Yes\", \"Yes, and don't ask\n * again this session\", \"No, and tell the agent what to do instead\". The\n * binary `Confirmation`/`ApprovalCard` pair above cannot express the middle\n * option; these three parts extend it additively, composed as CHILDREN of the\n * existing card (`ApprovalCard` / `ApprovalCardRequest`), never as a\n * replacement for it. Every new export here is a real `ApprovalCard*`\n * implementation — see the closed-family note above the alias block.\n *\n * Vocabulary note: this is the PER-CALL decision surface (\"may I run this\n * command?\"). `PermissionModeSelect` (#104) is the separate, standing POLICY\n * surface (\"how much may you do without asking?\") — the two compose rather\n * than merge into one boolean-flagged component, per\n * `.claude/rules/component-api.md` (\"Avoid boolean-prop proliferation\").\n */\n\n/**\n * `ApprovalScope`, `ApprovalOption` and `APPROVAL_SCOPE_DESCRIPTION_KEYS`\n * moved to `@elabs-ai/components-ui` (`lib/approval-option.ts`) — the\n * terminal CLI look-alike family's own permission row (issue #117) reuses\n * the same model, and `@elabs-ai/components-ai`/`@elabs-ai/components-terminal`\n * are layer-2 DAG siblings that may not import each other (T0; see\n * docs/decisions/2026-09-01-brainless-adoption-architecture.md § 4). Imported\n * above.\n */\n\nexport interface ApprovalCardOptionsProps extends ComponentProps<\"div\"> {\n  options: ApprovalOption[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (id: string) => void;\n  /**\n   * Fires when an option is selected — by click, or by ANY keyboard move\n   * within the radio group (Home/End/arrow keys select immediately, per the\n   * native/ARIA radiogroup pattern Radix implements; there is no separate\n   * \"highlight vs commit\" step). Reports the full resolved `ApprovalOption`\n   * plus whatever reason text is currently held by a sibling\n   * `ApprovalCardReason` — type a reason BEFORE choosing an option to have it\n   * included in this call.\n   */\n  onConfirm?: (option: ApprovalOption, reason?: string) => void;\n}\n\n/**\n * ApprovalCardOptions — the N-option, scoped decision (#103). Renders through\n * `@elabs-ai/components-ui`'s `RadioGroup` (Radix) for roving focus, arrow-key\n * wrap, Home/End and announcement — never a hand-rolled\n * `parentElement.children[i]` focus walk. Composed inside `ApprovalCardRequest`,\n * alongside the existing `ApprovalCardTitle`/`ApprovalCardDescription`.\n */\nexport const ApprovalCardOptions = forwardRef<HTMLDivElement, ApprovalCardOptionsProps>(\n  function ApprovalCardOptions(\n    {\n      options,\n      value,\n      defaultValue,\n      onValueChange,\n      onConfirm,\n      className,\n      dir,\n      \"aria-labelledby\": ariaLabelledBy,\n      ...props\n    },\n    ref,\n  ) {\n    const { t } = useLocale();\n    const { titleId, reason } = useConfirmation();\n    const baseId = useId();\n\n    // Controlled/uncontrolled mirrors the platform (and `PermissionModeSelect`,\n    // #104): `value`/`onValueChange` for a controlled caller, `defaultValue`\n    // for an uncontrolled starting point — Radix's own `RadioGroup` already\n    // implements both correctly. Hand-rolling a parallel `internalValue`\n    // state here and always passing a (possibly `undefined`) `value` down\n    // makes Radix's controllable-state hook see a spurious\n    // uncontrolled-to-controlled transition the first time a selection is\n    // made, which is exactly the warning this avoids.\n    const handleValueChange = (id: string) => {\n      onValueChange?.(id);\n      const option = options.find((candidate) => candidate.id === id);\n      if (option) onConfirm?.(option, reason.trim() ? reason : undefined);\n    };\n\n    return (\n      <RadioGroup\n        ref={ref}\n        // `dir` on a plain <div> is a free-form HTML string; Radix's\n        // RadioGroup narrows it to \"ltr\" | \"rtl\". Cast at this single call\n        // site, matching `PermissionModeSelect` (#104), rather than widening\n        // (and so weakening) the public prop type.\n        dir={dir as \"ltr\" | \"rtl\" | undefined}\n        defaultValue={defaultValue}\n        value={value}\n        onValueChange={handleValueChange}\n        aria-labelledby={ariaLabelledBy ?? titleId}\n        data-slot=\"approval-card-options\"\n        className={cn(\"grid gap-2\", className)}\n        {...props}\n      >\n        {options.map((option) => {\n          const itemId = `${baseId}-${option.id}`;\n          const descriptionId = `${itemId}-description`;\n          const description =\n            option.description ?? t(APPROVAL_SCOPE_DESCRIPTION_KEYS[option.scope]);\n\n          return (\n            <div\n              key={option.id}\n              data-slot=\"approval-card-option\"\n              data-scope={option.scope}\n              className={cn(\n                \"flex items-start gap-3 rounded-lg border border-border bg-card p-3\",\n                \"has-[[data-state=checked]]:border-primary\",\n              )}\n            >\n              <RadioGroupItem\n                aria-describedby={descriptionId}\n                className=\"mt-1\"\n                data-slot=\"approval-card-option-input\"\n                id={itemId}\n                value={option.id}\n              />\n              <div className=\"grid flex-1 gap-1\">\n                <div className=\"flex items-center justify-between gap-2\">\n                  <Label\n                    className=\"text-body flex items-center gap-2 font-medium\"\n                    data-slot=\"approval-card-option-label\"\n                    htmlFor={itemId}\n                  >\n                    {option.label}\n                  </Label>\n                  {option.keyHint ? (\n                    <Kbd data-slot=\"approval-card-option-key-hint\">{option.keyHint}</Kbd>\n                  ) : null}\n                </div>\n                <p\n                  className=\"text-meta text-muted-foreground\"\n                  data-slot=\"approval-card-option-description\"\n                  id={descriptionId}\n                >\n                  {description}\n                </p>\n              </div>\n            </div>\n          );\n        })}\n      </RadioGroup>\n    );\n  },\n);\n\nApprovalCardOptions.displayName = \"ApprovalCardOptions\";\n\nexport type ApprovalCardTargetProps = ComponentProps<\"div\">;\n\n/**\n * ApprovalCardTarget — the preview slot for WHAT is being approved: a\n * command, a path, or a richer node such as a `DiffView` (#102). Accepts\n * arbitrary children — this file never imports `DiffView`, the composition\n * happens entirely in the consumer's tree. Ungated by state (unlike\n * `ApprovalCardRequest`/`Accepted`/`Rejected`): the subject of a decision\n * stays visible after it resolves, not only while pending.\n */\nexport const ApprovalCardTarget = forwardRef<HTMLDivElement, ApprovalCardTargetProps>(\n  function ApprovalCardTarget({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"approval-card-target\"\n        className={cn(\"text-body rounded-md bg-muted/50 p-3\", className)}\n        {...props}\n      />\n    );\n  },\n);\n\nApprovalCardTarget.displayName = \"ApprovalCardTarget\";\n\nexport type ApprovalCardReasonProps = Omit<\n  ComponentProps<typeof Textarea>,\n  \"value\" | \"defaultValue\" | \"onChange\"\n>;\n\n/**\n * ApprovalCardReason — the deny-with-reason input, wired to the `reason`\n * field that already exists on `ToolUIPartApproval` and was previously\n * unreachable from the UI. Shares its value with `ApprovalCardOptions`\n * through `Confirmation`'s own context (not a prop threaded between the two\n * sibling parts) — type here BEFORE choosing an option to have the text\n * included in that option's `onConfirm` call.\n */\nexport const ApprovalCardReason = forwardRef<HTMLTextAreaElement, ApprovalCardReasonProps>(\n  function ApprovalCardReason({ className, id, placeholder, ...props }, ref) {\n    const { t } = useLocale();\n    const { reason, setReason } = useConfirmation();\n    const generatedId = useId();\n    const textareaId = id ?? generatedId;\n\n    return (\n      <div className=\"grid gap-1.5\" data-slot=\"approval-card-reason\">\n        <Label\n          className=\"text-meta text-muted-foreground\"\n          data-slot=\"approval-card-reason-label\"\n          htmlFor={textareaId}\n        >\n          {t(\"ai.approvalCard.reasonLabel\")}\n        </Label>\n        <Textarea\n          ref={ref}\n          id={textareaId}\n          placeholder={placeholder ?? t(\"ai.approvalCard.reasonPlaceholder\")}\n          value={reason}\n          onChange={(event) => setReason(event.target.value)}\n          data-slot=\"approval-card-reason-input\"\n          className={cn(\"min-h-16 text-body\", className)}\n          {...props}\n        />\n      </div>\n    );\n  },\n);\n\nApprovalCardReason.displayName = \"ApprovalCardReason\";\n"],"mappings":"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","names":["ApprovalCardOptions","ApprovalCardTarget","ApprovalCardReason"]}

package/dist/chunk-EV3U6ZZB.js

@@ -0,0 +1,209 @@
+"use client";
+
+// src/message-edit.tsx
+import {
+  createContext,
+  forwardRef,
+  use,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Check, Pencil, X } from "lucide-react";
+import { Button, Textarea } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { useLocale } from "@elabs-ai/components-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MessageEditContext = createContext(null);
+function useMessageEditContext() {
+  const ctx = use(MessageEditContext);
+  if (!ctx) {
+    throw new Error("MessageEdit sub-components must be rendered inside <MessageEditProvider>.");
+  }
+  return ctx;
+}
+function useMessageEdit() {
+  const { editing, draft, beginEdit, cancel, submit } = useMessageEditContext();
+  return { editing, draft, beginEdit, cancel, submit };
+}
+function MessageEditProvider({
+  value,
+  onEditSubmit,
+  editing: editingProp,
+  defaultEditing = false,
+  onEditingChange,
+  children
+}) {
+  const editorId = useId();
+  const isControlled = editingProp !== void 0;
+  const [internalEditing, setInternalEditing] = useState(defaultEditing);
+  const editing = isControlled ? editingProp : internalEditing;
+  const [draft, setDraft] = useState(value);
+  const triggerRef = useRef(null);
+  const restoreFocus = useRef(false);
+  const setEditing = useCallback(
+    (next) => {
+      if (!isControlled) setInternalEditing(next);
+      onEditingChange?.(next);
+    },
+    [isControlled, onEditingChange]
+  );
+  const beginEdit = useCallback(() => {
+    setDraft(value);
+    setEditing(true);
+  }, [value, setEditing]);
+  const cancel = useCallback(() => {
+    setDraft(value);
+    restoreFocus.current = true;
+    setEditing(false);
+  }, [value, setEditing]);
+  const submit = useCallback(() => {
+    onEditSubmit?.(draft);
+    restoreFocus.current = true;
+    setEditing(false);
+  }, [draft, onEditSubmit, setEditing]);
+  useEffect(() => {
+    if (!editing && restoreFocus.current) {
+      restoreFocus.current = false;
+      triggerRef.current?.focus();
+    }
+  }, [editing]);
+  const contextValue = useMemo(
+    () => ({ editing, draft, setDraft, beginEdit, cancel, submit, triggerRef, editorId }),
+    [editing, draft, beginEdit, cancel, submit, editorId]
+  );
+  return /* @__PURE__ */ jsx(MessageEditContext.Provider, { value: contextValue, children });
+}
+var MessageEditForm = forwardRef(
+  function MessageEditForm2({ className, saveLabel = "Save", cancelLabel = "Cancel", ...props }, ref) {
+    const { t } = useLocale();
+    const { draft, setDraft, cancel, submit, editorId } = useMessageEditContext();
+    const textareaRef = useRef(null);
+    useEffect(() => {
+      const el = textareaRef.current;
+      if (el) {
+        el.focus();
+        el.setSelectionRange(el.value.length, el.value.length);
+      }
+    }, []);
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      submit();
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cancel();
+        return;
+      }
+      if (e.key === "Enter" && !e.shiftKey && e.target === textareaRef.current) {
+        e.preventDefault();
+        submit();
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "form",
+      {
+        ref,
+        onSubmit: handleSubmit,
+        onKeyDown: handleKeyDown,
+        className: cn("flex w-full flex-col gap-2", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              ref: textareaRef,
+              id: editorId,
+              value: draft,
+              "aria-label": t("ai.message.editMessage"),
+              onChange: (e) => setDraft(e.target.value),
+              className: "min-h-16"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+            /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: cancel, children: [
+              /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" }),
+              cancelLabel
+            ] }),
+            /* @__PURE__ */ jsxs(Button, { type: "submit", size: "sm", disabled: draft.trim().length === 0, children: [
+              /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-4" }),
+              saveLabel
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var MessageEditContent = forwardRef(
+  function MessageEditContent2({ className, children, ...props }, ref) {
+    const { editing } = useMessageEditContext();
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), ...props, children: editing ? /* @__PURE__ */ jsx(MessageEditForm, {}) : children });
+  }
+);
+var MessageEditTrigger = forwardRef(
+  function MessageEditTrigger2({ className, children, variant = "ghost", size = "sm", onClick, ...props }, ref) {
+    const { editing, beginEdit, triggerRef } = useMessageEditContext();
+    if (editing) return null;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        variant,
+        size,
+        className,
+        onClick: (e) => {
+          onClick?.(e);
+          beginEdit();
+        },
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Pencil, { "aria-hidden": "true", className: "size-4" }),
+          "Edit"
+        ] })
+      }
+    );
+  }
+);
+var MessageEdit = forwardRef(function MessageEdit2({ value, onEditSubmit, editing, defaultEditing, onEditingChange, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    MessageEditProvider,
+    {
+      value,
+      onEditSubmit,
+      editing,
+      defaultEditing,
+      onEditingChange,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cn("group/message-edit flex w-full flex-col gap-1", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(MessageEditContent, { children }),
+            /* @__PURE__ */ jsx("div", { className: "flex justify-end opacity-0 transition-opacity duration-fast focus-within:opacity-100 group-hover/message-edit:opacity-100 motion-reduce:transition-none", children: /* @__PURE__ */ jsx(MessageEditTrigger, {}) })
+          ]
+        }
+      )
+    }
+  );
+});
+
+export {
+  useMessageEdit,
+  MessageEditProvider,
+  MessageEditForm,
+  MessageEditContent,
+  MessageEditTrigger,
+  MessageEdit
+};
+//# sourceMappingURL=chunk-EV3U6ZZB.js.map

package/dist/chunk-EV3U6ZZB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/message-edit.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * MessageEdit — edit-in-place for a user message.\n *\n * Swaps a message bubble between its display content and an inline editor\n * (the composer's `Textarea` primitive) seeded with the original text.\n * `onEditSubmit(newText)` fires on save — the consumer then creates a branch\n * (compose with `MessageBranch*`). Presentational only: it never mutates the\n * message; the original is simply restored on cancel because the source text is\n * untouched until `onEditSubmit`.\n *\n * Behavior: Enter submits, Shift+Enter inserts a newline, Esc cancels. Focus\n * moves into the editor on begin, is trapped within it while editing, and is\n * restored to the trigger on cancel/submit.\n *\n * Compound structure (the ChangeReview convention — named parts, lifted state):\n *   <MessageEditProvider>   — lifted edit state (editing + draft + actions)\n *     <MessageEditContent>  — display children, or the inline editor\n *     <MessageEditTrigger>  — begins editing (focus is restored here on exit)\n */\n\nimport {\n  createContext,\n  forwardRef,\n  use,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type FormEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { Check, Pencil, X } from \"lucide-react\";\nimport { Button, Textarea } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { useLocale } from \"@elabs-ai/components-ui\";\n\n// ─── Context ────────────────────────────────────────────────────────────────\n\ninterface MessageEditContextValue {\n  editing: boolean;\n  draft: string;\n  setDraft: (value: string) => void;\n  beginEdit: () => void;\n  cancel: () => void;\n  submit: () => void;\n  /** Ref for the trigger element so focus can be restored to it on exit. */\n  triggerRef: React.MutableRefObject<HTMLElement | null>;\n  editorId: string;\n}\n\nconst MessageEditContext = createContext<MessageEditContextValue | null>(null);\n\nfunction useMessageEditContext(): MessageEditContextValue {\n  const ctx = use(MessageEditContext);\n  if (!ctx) {\n    throw new Error(\"MessageEdit sub-components must be rendered inside <MessageEditProvider>.\");\n  }\n  return ctx;\n}\n\n/** Read-only access to the edit state (for a custom trigger/toolbar). */\nexport function useMessageEdit(): Pick<\n  MessageEditContextValue,\n  \"editing\" | \"draft\" | \"beginEdit\" | \"cancel\" | \"submit\"\n> {\n  const { editing, draft, beginEdit, cancel, submit } = useMessageEditContext();\n  return { editing, draft, beginEdit, cancel, submit };\n}\n\n// ─── Provider ───────────────────────────────────────────────────────────────\n\nexport interface MessageEditProviderProps {\n  /** The editable source text (seeds the editor on begin). */\n  value: string;\n  /** Called with the new text on save. The consumer creates the branch. */\n  onEditSubmit?: (newText: string) => void;\n  /** Controlled editing state. When set, `onEditingChange` drives transitions. */\n  editing?: boolean;\n  /** Uncontrolled initial editing state. @default false */\n  defaultEditing?: boolean;\n  /** Called when editing begins/ends. */\n  onEditingChange?: (editing: boolean) => void;\n  children: ReactNode;\n}\n\n/** Lifts the edit state (editing + draft). Controlled or uncontrolled. */\nexport function MessageEditProvider({\n  value,\n  onEditSubmit,\n  editing: editingProp,\n  defaultEditing = false,\n  onEditingChange,\n  children,\n}: MessageEditProviderProps) {\n  const editorId = useId();\n  const isControlled = editingProp !== undefined;\n  const [internalEditing, setInternalEditing] = useState(defaultEditing);\n  const editing = isControlled ? (editingProp as boolean) : internalEditing;\n\n  const [draft, setDraft] = useState(value);\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const restoreFocus = useRef(false);\n\n  const setEditing = useCallback(\n    (next: boolean) => {\n      if (!isControlled) setInternalEditing(next);\n      onEditingChange?.(next);\n    },\n    [isControlled, onEditingChange],\n  );\n\n  const beginEdit = useCallback(() => {\n    setDraft(value); // seed from the current source text\n    setEditing(true);\n  }, [value, setEditing]);\n\n  const cancel = useCallback(() => {\n    setDraft(value); // discard edits (original is restored)\n    restoreFocus.current = true;\n    setEditing(false);\n  }, [value, setEditing]);\n\n  const submit = useCallback(() => {\n    onEditSubmit?.(draft);\n    restoreFocus.current = true;\n    setEditing(false);\n  }, [draft, onEditSubmit, setEditing]);\n\n  // Restore focus to the trigger once the editor has unmounted.\n  useEffect(() => {\n    if (!editing && restoreFocus.current) {\n      restoreFocus.current = false;\n      triggerRef.current?.focus();\n    }\n  }, [editing]);\n\n  const contextValue = useMemo<MessageEditContextValue>(\n    () => ({ editing, draft, setDraft, beginEdit, cancel, submit, triggerRef, editorId }),\n    [editing, draft, beginEdit, cancel, submit, editorId],\n  );\n\n  return <MessageEditContext.Provider value={contextValue}>{children}</MessageEditContext.Provider>;\n}\n\n// ─── Inline editor ─────────────────────────────────────────────────────────────\n\nexport type MessageEditFormProps = Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\"> & {\n  /** Save button label. @default \"Save\" */\n  saveLabel?: string;\n  /** Cancel button label. @default \"Cancel\" */\n  cancelLabel?: string;\n};\n\n/** The inline editor: an autofocused textarea + Save/Cancel, Enter/Esc wired. */\nexport const MessageEditForm = forwardRef<HTMLFormElement, MessageEditFormProps>(\n  function MessageEditForm(\n    { className, saveLabel = \"Save\", cancelLabel = \"Cancel\", ...props },\n    ref,\n  ) {\n    const { t } = useLocale();\n    const { draft, setDraft, cancel, submit, editorId } = useMessageEditContext();\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n    // Autofocus the textarea and place the caret at the end.\n    useEffect(() => {\n      const el = textareaRef.current;\n      if (el) {\n        el.focus();\n        el.setSelectionRange(el.value.length, el.value.length);\n      }\n    }, []);\n\n    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n      e.preventDefault();\n      submit();\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        cancel();\n        return;\n      }\n      // Enter submits from the textarea; Shift+Enter inserts a newline.\n      if (e.key === \"Enter\" && !e.shiftKey && e.target === textareaRef.current) {\n        e.preventDefault();\n        submit();\n      }\n      // NOTE: Tab is deliberately NOT trapped — this is an inline, non-modal\n      // editor, and the repo a11y rule forbids trapping focus outside modals.\n      // Tab flows naturally out of the editor; focus is restored to the trigger\n      // only on cancel/submit.\n    };\n\n    return (\n      <form\n        ref={ref}\n        onSubmit={handleSubmit}\n        onKeyDown={handleKeyDown}\n        className={cn(\"flex w-full flex-col gap-2\", className)}\n        {...props}\n      >\n        <Textarea\n          ref={textareaRef}\n          id={editorId}\n          value={draft}\n          aria-label={t(\"ai.message.editMessage\")}\n          onChange={(e) => setDraft(e.target.value)}\n          className=\"min-h-16\"\n        />\n        <div className=\"flex items-center justify-end gap-2\">\n          <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={cancel}>\n            <X aria-hidden=\"true\" className=\"size-4\" />\n            {cancelLabel}\n          </Button>\n          <Button type=\"submit\" size=\"sm\" disabled={draft.trim().length === 0}>\n            <Check aria-hidden=\"true\" className=\"size-4\" />\n            {saveLabel}\n          </Button>\n        </div>\n      </form>\n    );\n  },\n);\n\n// ─── Content ──────────────────────────────────────────────────────────────────\n\nexport type MessageEditContentProps = HTMLAttributes<HTMLDivElement>;\n\n/** Renders `children` in display mode, or the inline editor while editing. */\nexport const MessageEditContent = forwardRef<HTMLDivElement, MessageEditContentProps>(\n  function MessageEditContent({ className, children, ...props }, ref) {\n    const { editing } = useMessageEditContext();\n    return (\n      <div ref={ref} className={cn(\"w-full\", className)} {...props}>\n        {editing ? <MessageEditForm /> : children}\n      </div>\n    );\n  },\n);\n\n// ─── Trigger ──────────────────────────────────────────────────────────────────\n\nexport type MessageEditTriggerProps = React.ComponentProps<typeof Button>;\n\n/** Begins editing. Focus is restored here on cancel/submit. Hidden while editing. */\nexport const MessageEditTrigger = forwardRef<HTMLButtonElement, MessageEditTriggerProps>(\n  function MessageEditTrigger(\n    { className, children, variant = \"ghost\", size = \"sm\", onClick, ...props },\n    ref,\n  ) {\n    const { editing, beginEdit, triggerRef } = useMessageEditContext();\n    if (editing) return null;\n    return (\n      <Button\n        ref={(node) => {\n          triggerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        variant={variant}\n        size={size}\n        className={className}\n        onClick={(e) => {\n          onClick?.(e);\n          beginEdit();\n        }}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <Pencil aria-hidden=\"true\" className=\"size-4\" />\n            Edit\n          </>\n        )}\n      </Button>\n    );\n  },\n);\n\n// ─── Root convenience ──────────────────────────────────────────────────────────\n\nexport interface MessageEditProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onSubmit\" | \"children\"\n> {\n  /** The editable source text. */\n  value: string;\n  /** Called with the new text on save (consumer creates the branch). */\n  onEditSubmit?: (newText: string) => void;\n  /** Controlled editing state. */\n  editing?: boolean;\n  /** Uncontrolled initial editing state. */\n  defaultEditing?: boolean;\n  /** Called when editing begins/ends. */\n  onEditingChange?: (editing: boolean) => void;\n  /** The display content (usually the rendered message text). */\n  children: ReactNode;\n}\n\n/**\n * Convenience composition: display `children` + an \"Edit\" trigger, swapping to\n * the inline editor while editing. For toolbar-placed triggers, compose the\n * parts (`MessageEditProvider` + `MessageEditTrigger` in your toolbar).\n */\nexport const MessageEdit = forwardRef<HTMLDivElement, MessageEditProps>(function MessageEdit(\n  { value, onEditSubmit, editing, defaultEditing, onEditingChange, className, children, ...props },\n  ref,\n) {\n  return (\n    <MessageEditProvider\n      value={value}\n      onEditSubmit={onEditSubmit}\n      editing={editing}\n      defaultEditing={defaultEditing}\n      onEditingChange={onEditingChange}\n    >\n      <div\n        ref={ref}\n        className={cn(\"group/message-edit flex w-full flex-col gap-1\", className)}\n        {...props}\n      >\n        <MessageEditContent>{children}</MessageEditContent>\n        <div className=\"flex justify-end opacity-0 transition-opacity duration-fast focus-within:opacity-100 group-hover/message-edit:opacity-100 motion-reduce:transition-none\">\n          <MessageEditTrigger />\n        </div>\n      </div>\n    </MessageEditProvider>\n  );\n});\n"],"mappings":";;;AAsBA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AACP,SAAS,OAAO,QAAQ,SAAS;AACjC,SAAS,QAAQ,gBAAgB;AACjC,SAAS,UAAU;AACnB,SAAS,iBAAiB;AA2GjB,SAiIC,UAjID,KAsEC,YAtED;AA3FT,IAAM,qBAAqB,cAA8C,IAAI;AAE7E,SAAS,wBAAiD;AACxD,QAAM,MAAM,IAAI,kBAAkB;AAClC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,2EAA2E;AAAA,EAC7F;AACA,SAAO;AACT;AAGO,SAAS,iBAGd;AACA,QAAM,EAAE,SAAS,OAAO,WAAW,QAAQ,OAAO,IAAI,sBAAsB;AAC5E,SAAO,EAAE,SAAS,OAAO,WAAW,QAAQ,OAAO;AACrD;AAmBO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,WAAW,MAAM;AACvB,QAAM,eAAe,gBAAgB;AACrC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,cAAc;AACrE,QAAM,UAAU,eAAgB,cAA0B;AAE1D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,aAAa,OAA2B,IAAI;AAClD,QAAM,eAAe,OAAO,KAAK;AAEjC,QAAM,aAAa;AAAA,IACjB,CAAC,SAAkB;AACjB,UAAI,CAAC,aAAc,oBAAmB,IAAI;AAC1C,wBAAkB,IAAI;AAAA,IACxB;AAAA,IACA,CAAC,cAAc,eAAe;AAAA,EAChC;AAEA,QAAM,YAAY,YAAY,MAAM;AAClC,aAAS,KAAK;AACd,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,OAAO,UAAU,CAAC;AAEtB,QAAM,SAAS,YAAY,MAAM;AAC/B,aAAS,KAAK;AACd,iBAAa,UAAU;AACvB,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,OAAO,UAAU,CAAC;AAEtB,QAAM,SAAS,YAAY,MAAM;AAC/B,mBAAe,KAAK;AACpB,iBAAa,UAAU;AACvB,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,OAAO,cAAc,UAAU,CAAC;AAGpC,YAAU,MAAM;AACd,QAAI,CAAC,WAAW,aAAa,SAAS;AACpC,mBAAa,UAAU;AACvB,iBAAW,SAAS,MAAM;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,SAAS,OAAO,UAAU,WAAW,QAAQ,QAAQ,YAAY,SAAS;AAAA,IACnF,CAAC,SAAS,OAAO,WAAW,QAAQ,QAAQ,QAAQ;AAAA,EACtD;AAEA,SAAO,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,cAAe,UAAS;AACrE;AAYO,IAAM,kBAAkB;AAAA,EAC7B,SAASA,iBACP,EAAE,WAAW,YAAY,QAAQ,cAAc,UAAU,GAAG,MAAM,GAClE,KACA;AACA,UAAM,EAAE,EAAE,IAAI,UAAU;AACxB,UAAM,EAAE,OAAO,UAAU,QAAQ,QAAQ,SAAS,IAAI,sBAAsB;AAC5E,UAAM,cAAc,OAA4B,IAAI;AAGpD,cAAU,MAAM;AACd,YAAM,KAAK,YAAY;AACvB,UAAI,IAAI;AACN,WAAG,MAAM;AACT,WAAG,kBAAkB,GAAG,MAAM,QAAQ,GAAG,MAAM,MAAM;AAAA,MACvD;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,UAAM,eAAe,CAAC,MAAkC;AACtD,QAAE,eAAe;AACjB,aAAO;AAAA,IACT;AAEA,UAAM,gBAAgB,CAAC,MAAkC;AACvD,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,eAAe;AACjB,eAAO;AACP;AAAA,MACF;AAEA,UAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,YAAY,EAAE,WAAW,YAAY,SAAS;AACxE,UAAE,eAAe;AACjB,eAAO;AAAA,MACT;AAAA,IAKF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX,WAAW,GAAG,8BAA8B,SAAS;AAAA,QACpD,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,IAAI;AAAA,cACJ,OAAO;AAAA,cACP,cAAY,EAAE,wBAAwB;AAAA,cACtC,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,cACxC,WAAU;AAAA;AAAA,UACZ;AAAA,UACA,qBAAC,SAAI,WAAU,uCACb;AAAA,iCAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,MAAK,MAAK,SAAS,QACvD;AAAA,kCAAC,KAAE,eAAY,QAAO,WAAU,UAAS;AAAA,cACxC;AAAA,eACH;AAAA,YACA,qBAAC,UAAO,MAAK,UAAS,MAAK,MAAK,UAAU,MAAM,KAAK,EAAE,WAAW,GAChE;AAAA,kCAAC,SAAM,eAAY,QAAO,WAAU,UAAS;AAAA,cAC5C;AAAA,eACH;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAOO,IAAM,qBAAqB;AAAA,EAChC,SAASC,oBAAmB,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,KAAK;AAClE,UAAM,EAAE,QAAQ,IAAI,sBAAsB;AAC1C,WACE,oBAAC,SAAI,KAAU,WAAW,GAAG,UAAU,SAAS,GAAI,GAAG,OACpD,oBAAU,oBAAC,mBAAgB,IAAK,UACnC;AAAA,EAEJ;AACF;AAOO,IAAM,qBAAqB;AAAA,EAChC,SAASC,oBACP,EAAE,WAAW,UAAU,UAAU,SAAS,OAAO,MAAM,SAAS,GAAG,MAAM,GACzE,KACA;AACA,UAAM,EAAE,SAAS,WAAW,WAAW,IAAI,sBAAsB;AACjE,QAAI,QAAS,QAAO;AACpB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,CAAC,SAAS;AACb,qBAAW,UAAU;AACrB,cAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,mBAC9B,IAAK,KAAI,UAAU;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,CAAC,MAAM;AACd,oBAAU,CAAC;AACX,oBAAU;AAAA,QACZ;AAAA,QACC,GAAG;AAAA,QAEH,sBACC,iCACE;AAAA,8BAAC,UAAO,eAAY,QAAO,WAAU,UAAS;AAAA,UAAE;AAAA,WAElD;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AA2BO,IAAM,cAAc,WAA6C,SAASC,aAC/E,EAAE,OAAO,cAAc,SAAS,gBAAgB,iBAAiB,WAAW,UAAU,GAAG,MAAM,GAC/F,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,iDAAiD,SAAS;AAAA,UACvE,GAAG;AAAA,UAEJ;AAAA,gCAAC,sBAAoB,UAAS;AAAA,YAC9B,oBAAC,SAAI,WAAU,2JACb,8BAAC,sBAAmB,GACtB;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["MessageEditForm","MessageEditContent","MessageEditTrigger","MessageEdit"]}