55:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 56:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4e:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx@^2.1.1"}] 4f:["$","li","react-markdown@^10.1.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-markdown","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-markdown@^10.1.0"}]]}]}] 50:["$","li","remark-gfm@^4.0.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remark-gfm","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remark-gfm@^4.0.1"}]]}]}] 51:["$","li","tailwind-merge@^3.6.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge@^3.6.0"}]]}]}] 52:["$","li","@tiptap/markdown",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tiptap%2Fmarkdown","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tiptap/markdown"}]]}]}] 53:["$","$L55",null,{"namespace":"@emend","registryDependencies":["badge","button","checkbox","label","select","textarea","tooltip","bubble","marker"]}] 57:T88d5,"use client" import { DEFAULT_REQUEST_LIMITS, type EmendContextScope, type EmendMutationOperation, type EmendTargetScope, } from "@emend/ai" import { setEmendSelectionDecoration } from "@emend/ai/tiptap" import { Add01Icon, ArrowUp01Icon, BookAIcon, BookOpenTextIcon, Cancel01Icon, CursorTextIcon, Edit02Icon, File01Icon, FileEditIcon, MagicWand01Icon, TextAlignLeftIcon, TextIndent01Icon, TextSelectionIcon, TypeCursorIcon, UnfoldLessIcon, } from "@hugeicons/core-free-icons" import { HugeiconsIcon } from "@hugeicons/react" import { useEditorState } from "@tiptap/react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { cn } from "@/lib/utils" import { useEffect, useId, useLayoutEffect, useRef, useState } from "react" import { type UseEditorAiOptions, type UseEditorAiResult, useEditorAi, } from "@emend/ai/react" import { AiComposerReview } from "./ai-composer-review" const actions = [ { actionId: "improve", command: "improve", label: "Improve", icon: MagicWand01Icon, description: "Make the selected writing clearer.", targetScope: "selection", contextScope: "selection", mutationOperation: "replace-selection", }, { actionId: "shorten", command: "shorten", label: "Shorten", icon: UnfoldLessIcon, description: "Make the selected writing more concise.", targetScope: "selection", contextScope: "selection", mutationOperation: "replace-selection", }, { actionId: "expand", command: "longer", label: "Longer", icon: TextIndent01Icon, description: "Add useful detail to the selected writing.", targetScope: "selection", contextScope: "selection", mutationOperation: "replace-selection", }, { actionId: "fix-grammar", command: "fix-grammar", label: "Fix grammar", icon: BookAIcon, description: "Correct grammar and spelling.", targetScope: "selection", contextScope: "selection", mutationOperation: "replace-selection", }, { actionId: "custom", command: "custom", label: "Custom instruction", icon: TypeCursorIcon, description: "Tell emend what to do.", targetScope: null, contextScope: null, mutationOperation: null, }, ] as const const changes = [ { operation: "replace-selection", targetScope: "selection", label: "Replace Selection", }, { operation: "replace-current-block", targetScope: "current-block", label: "Replace Current block", }, { operation: "replace-document", targetScope: "document", label: "Replace Document", }, { operation: "insert-at-cursor", targetScope: "selection", label: "Insert at cursor", }, ] as const satisfies readonly { readonly operation: EmendMutationOperation readonly targetScope: EmendTargetScope readonly label: string }[] type ComposerActionId = (typeof actions)[number]["actionId"] type ComposerChange = (typeof changes)[number] const defaultContextScopes: readonly EmendContextScope[] = [ "selection", "current-block", "document", ] const defaultMutationOperations: readonly EmendMutationOperation[] = changes.map(({ operation }) => operation) export interface AiComposerPolicy { readonly allowedContextScopes?: readonly EmendContextScope[] readonly defaultContextScope?: "adaptive" | EmendContextScope readonly allowContextOverride?: boolean readonly allowedMutationOperations?: readonly EmendMutationOperation[] readonly defaultMutationOperation?: "adaptive" | EmendMutationOperation readonly allowMutationOverride?: boolean } export interface AiComposerProps { readonly editor: UseEditorAiOptions["editor"] readonly transport: UseEditorAiOptions["transport"] readonly policy?: AiComposerPolicy readonly showReview?: boolean readonly className?: string } export interface AiComposerViewProps { readonly editor: UseEditorAiOptions["editor"] readonly session: UseEditorAiResult readonly policy?: AiComposerPolicy readonly showReview?: boolean readonly className?: string } export function AiComposer({ editor, transport, policy, showReview = true, className, }: AiComposerProps) { const session = useEditorAi({ editor, transport, previewMode: "inline" }) return ( ) } export function AiComposerView({ editor, session, policy, showReview = true, className, }: AiComposerViewProps) { const menuId = useId() const rootRef = useRef(null) const controlsRef = useRef(null) const scopeControlsRef = useRef(null) const inputRef = useRef(null) const measureRef = useRef(null) const [draft, setDraft] = useState("") const [selectedActionId, setSelectedActionId] = useState(null) const [plusOpen, setPlusOpen] = useState(false) const [dismissed, setDismissed] = useState(false) const [selectionDecorationActive, setSelectionDecorationActive] = useState(false) const [active, setActive] = useState(0) const [expanded, setExpanded] = useState(false) const [chosenContext, setChosenContext] = useState("document") const [contextTouched, setContextTouched] = useState(false) const [chosenChange, setChosenChange] = useState(null) const [changeTouched, setChangeTouched] = useState(false) const selection = useEditorState({ editor, selector: ({ editor: currentEditor }) => { if (!currentEditor) { return { collapsed: true, from: 0, hasText: false, to: 0 } } const { empty, from, to } = currentEditor.state.selection return { collapsed: empty, from, hasText: !empty && currentEditor.state.doc.textBetween(from, to).length > 0, to, } }, }) ?? { collapsed: true, from: 0, hasText: false, to: 0 } const selectedAction = actions.find( (action) => action.actionId === selectedActionId ) const builtInSelected = selectedAction !== undefined && selectedAction.actionId !== "custom" const token = dismissed || selectedActionId !== null ? null : parseSlashToken(draft) const menuOpen = plusOpen || token !== null const query = plusOpen ? "" : (token?.query ?? "") const rows = actions.filter( (action) => action.command.includes(query) || action.label.toLowerCase().includes(query) ) const activeOptionId = menuOpen && rows[active] ? `${menuId}-option-${rows[active].actionId}` : undefined const isCustom = selectedActionId === "custom" const isAsk = selectedActionId === null && draft.trim().length > 0 const inputValue = builtInSelected ? selectedAction.label : draft const allowedContextScopes = policy?.allowedContextScopes ?? defaultContextScopes const allowedMutationOperations = policy?.allowedMutationOperations ?? defaultMutationOperations const configuredContext = policy?.defaultContextScope ?? "adaptive" const adaptiveContext = selection.hasText && selectedActionId !== null ? allowedContextScopes.includes("selection") ? "selection" : allowedContextScopes.includes("document") ? "document" : (allowedContextScopes[0] ?? null) : allowedContextScopes.includes("document") ? "document" : (allowedContextScopes[0] ?? null) const policyContext = configuredContext === "adaptive" ? adaptiveContext : allowedContextScopes.includes(configuredContext) ? configuredContext : null const contextOverride = policy?.allowContextOverride !== false && contextTouched && allowedContextScopes.includes(chosenContext) ? chosenContext : null const contextScope = builtInSelected ? selectedAction.contextScope : (contextOverride ?? policyContext) const configuredMutation = policy?.defaultMutationOperation ?? "adaptive" const adaptiveMutation = selection.hasText && allowedMutationOperations.includes("replace-selection") ? "replace-selection" : null const policyMutation = configuredMutation === "adaptive" ? adaptiveMutation : allowedMutationOperations.includes(configuredMutation) ? configuredMutation : null const mutationOverride = policy?.allowMutationOverride !== false && changeTouched && chosenChange !== null && allowedMutationOperations.includes(chosenChange) ? chosenChange : null const mutationOperation = builtInSelected ? selectedAction.mutationOperation : (mutationOverride ?? policyMutation) const replayAllowed = session.activeRequest !== null && allowedContextScopes.includes(session.activeRequest.contextScope) && (session.activeRequest.mutationOperation === null || allowedMutationOperations.includes( session.activeRequest.mutationOperation )) const change = changes.find( (candidate) => candidate.operation === mutationOperation ) const showContextControl = (isAsk || isCustom) && policy?.allowContextOverride !== false && allowedContextScopes.length > 1 const showChangeControl = isCustom && policy?.allowMutationOverride !== false && allowedMutationOperations.length > 1 const builtInAllowed = !builtInSelected || (selectedAction !== undefined && selectedAction.contextScope !== null && selectedAction.mutationOperation !== null && allowedContextScopes.includes(selectedAction.contextScope) && allowedMutationOperations.includes(selectedAction.mutationOperation)) const requestInProgress = session.state === "submitting" || session.state === "streaming" const instruction = isCustom || isAsk ? draft.trim() : "" const instructionTooLong = instruction.length > DEFAULT_REQUEST_LIMITS.maxInstructionLength const askBlockReason = getAskBlockReason({ contextScope, editorReady: Boolean(editor && !editor.isDestroyed), hasSelection: selection.hasText, instruction, instructionTooLong, pendingProposal: false, requestInProgress, }) const editBlockReason = getEditBlockReason({ change, contextScope, editorReady: Boolean(editor && !editor.isDestroyed), hasSelection: selection.hasText, instruction, instructionTooLong, pendingProposal: session.pendingProposal !== null, policyAllowsAction: builtInAllowed, requestInProgress, selectedActionId, selectionCollapsed: selection.collapsed, }) const wide = !builtInSelected && expanded useEffect(() => { // eslint-disable-next-line react-hooks/set-state-in-effect setActive(0) }, [menuOpen, query]) useLayoutEffect(() => { setEmendSelectionDecoration( editor, selectionDecorationActive && selection.hasText ? { from: selection.from, to: selection.to } : null ) }, [ editor, selection.from, selection.hasText, selection.to, selectionDecorationActive, session.editorState?.activeProposalId, session.editorState?.revisionCounter, ]) useEffect( () => () => { setEmendSelectionDecoration(editor, null) }, [editor] ) useLayoutEffect(() => { const input = inputRef.current const controls = controlsRef.current const scopeControls = scopeControlsRef.current const measure = measureRef.current if (!input || !controls || !scopeControls || !measure) return const fixedControlsWidth = 28 * 2 + scopeControls.scrollWidth const inlineGaps = 4 * 3 const inlineInputWidth = controls.clientWidth - fixedControlsWidth - inlineGaps const needsFullWidth = inputValue.includes("\n") || measure.offsetWidth + 8 > inlineInputWidth if (needsFullWidth !== expanded) setExpanded(needsFullWidth) const minHeight = 28 const maxHeight = 82 input.style.height = "0px" const contentHeight = inputValue ? input.scrollHeight : minHeight input.style.height = `${Math.min(Math.max(contentHeight, minHeight), maxHeight)}px` input.style.overflowY = contentHeight > maxHeight ? "auto" : "hidden" }, [ builtInSelected, contextOverride, expanded, inputValue, isCustom, mutationOverride, ]) useEffect(() => { const close = (event: PointerEvent) => { if (isInsideComposer(rootRef.current, event.target)) return setSelectionDecorationActive(false) if (!menuOpen) return setPlusOpen(false) setDismissed(true) } document.addEventListener("pointerdown", close) return () => document.removeEventListener("pointerdown", close) }, [menuOpen]) function closeMenu() { setPlusOpen(false) } function clearAction() { setSelectedActionId(null) setDraft("") setDismissed(false) requestAnimationFrame(() => inputRef.current?.focus()) } function resetRequest() { setDraft("") setSelectedActionId(null) setChosenContext("document") setContextTouched(false) setChosenChange(null) setChangeTouched(false) setDismissed(false) closeMenu() } function pick(action: (typeof actions)[number]) { if (action.actionId === "custom") { if (token) setDraft(draft.slice(0, token.start).trimEnd()) } else { setDraft("") } setSelectedActionId(action.actionId) setPlusOpen(false) setDismissed(false) requestAnimationFrame(() => inputRef.current?.focus()) } function runRequest() { if (selectedActionId === null) { if (askBlockReason || !contextScope) return void session.run("custom", { interactionMode: "ask", targetScope: contextScope, contextScope, mutationOperation: null, instruction, }) resetRequest() return } if (editBlockReason || !selectedAction || !contextScope) return const actionChange = selectedAction.actionId === "custom" && change ? { targetScope: change.targetScope, mutationOperation: change.operation, } : selectedAction if (!actionChange?.targetScope || !actionChange.mutationOperation) return void session.run(selectedAction.actionId, { interactionMode: "edit", targetScope: actionChange.targetScope, contextScope, mutationOperation: actionChange.mutationOperation, ...(selectedAction.actionId === "custom" ? { instruction } : {}), }) resetRequest() } return (

setSelectionDecorationActive(true)} onBlurCapture={(event) => { if (!isInsideComposer(event.currentTarget, event.relatedTarget)) { setSelectionDecorationActive(false) } }} className={cn("w-full space-y-2", className)} > {showReview && ( )}

{menuOpen && ( )}

{builtInSelected ? (

{selectedAction.label} {selectedAction.description}

) : (

{
                  setDraft(event.target.value)
                  setDismissed(false)
                  setPlusOpen(false)
                }}
                onKeyDown={(event) => {
                  if (menuOpen && rows.length > 0) {
                    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
                      event.preventDefault()
                      setActive(
                        (current) =>
                          (current +
                            (event.key === "ArrowDown" ? 1 : rows.length - 1)) %
                          rows.length
                      )
                      return
                    }
                    if (
                      (event.key === "Enter" && !event.shiftKey) ||
                      event.key === "Tab"
                    ) {
                      event.preventDefault()
                      pick(rows[active]!)
                      return
                    }
                  }
                  if (event.key === "Escape") {
                    setDismissed(true)
                    closeMenu()
                    return
                  }
                  if (
                    event.key === "Enter" &&
                    !event.shiftKey &&
                    !event.nativeEvent.isComposing
                  ) {
                    event.preventDefault()
                    runRequest()
                  }
                }}
                placeholder={
                  isCustom
                    ? "Tell emend what to change…"
                    : "Ask emend or choose an action…"
                }
                aria-label="AI instruction"
                role="combobox"
                aria-autocomplete="list"
                aria-controls={menuId}
                aria-expanded={menuOpen}
                aria-activedescendant={activeOptionId}
                className={cn(
                  "min-h-7 min-w-0 resize-none border-0 bg-transparent px-1 py-1.25 text-[13px] leading-4.5 wrap-anywhere shadow-none focus-visible:ring-0 disabled:bg-transparent md:text-[13px] dark:bg-transparent dark:disabled:bg-transparent",
                  wide
                    ? "col-span-full col-start-1 row-start-1"
                    : "col-start-2 row-start-1"
                )}
              />
            )}

<div
              ref={scopeControlsRef}
              className={cn(
                "col-start-3 flex min-w-0 flex-wrap items-center justify-end gap-1",
                wide ? "row-start-2" : "row-start-1"
              )}
            >
              {showContextControl && (
                <Select
                  value={contextOverride}
                  disabled={!editor || requestInProgress}
                  onValueChange={(value) => {
                    if (!value) return
                    setChosenContext(value as EmendContextScope)
                    setContextTouched(true)
                  }}
                >
                  <SelectTrigger
                    aria-label="AI read context"
                    title={
                      contextScope
                        ? `Read context: ${scopeLabel(contextScope)}`
                        : "Choose AI read context"
                    }
                    size="sm"
                    className={cn(
                      "border-0 bg-transparent text-[11px] shadow-none hover:bg-accent data-[size=sm]:rounded-full dark:bg-transparent dark:hover:bg-accent",
                      contextOverride !== null
                        ? "max-w-32 px-2"
                        : "size-7 justify-center gap-0 p-0 [&>svg:last-child]:hidden"
                    )}
                  >
                    {contextOverride !== null ? (
                      <SelectValue>{scopeLabel(chosenContext)}</SelectValue>
                    ) : (
                      <HugeiconsIcon icon={BookOpenTextIcon} size={14} />
                    )}
                  </SelectTrigger>
                  <SelectContent
                    data-ai-composer-portal
                    align="end"
                    className="min-w-48"
                  >
                    <SelectGroup>
                      {allowedContextScopes.includes("selection") && (
                        <SelectItem
                          value="selection"
                          disabled={!selection.hasText}
                        >
                          <HugeiconsIcon icon={TextSelectionIcon} size={15} />
                          {selection.hasText
                            ? "Selection"
                            : "Selection (select text)"}
                        </SelectItem>
                      )}
                      {allowedContextScopes.includes("current-block") && (
                        <SelectItem value="current-block">
                          <HugeiconsIcon icon={TextAlignLeftIcon} size={15} />
                          Current block
                        </SelectItem>
                      )}
                      {allowedContextScopes.includes("document") && (
                        <SelectItem value="document">
                          <HugeiconsIcon icon={File01Icon} size={15} />
                          Document
                        </SelectItem>
                      )}
                    </SelectGroup>
                  </SelectContent>
                </Select>
              )}

{showChangeControl && (
                <Select
                  value={mutationOverride}
                  disabled={!editor || requestInProgress}
                  onValueChange={(value) => {
                    if (!value) return
                    setChosenChange(value as EmendMutationOperation)
                    setChangeTouched(true)
                  }}
                >
                  <SelectTrigger
                    aria-label="AI change target"
                    title={
                      change
                        ? `Change target: ${change.label}`
                        : "Choose AI change target"
                    }
                    size="sm"
                    className={cn(
                      "border-0 bg-transparent text-[11px] shadow-none hover:bg-accent data-[size=sm]:rounded-full dark:bg-transparent dark:hover:bg-accent",
                      mutationOverride !== null && change
                        ? "max-w-40 px-2"
                        : "size-7 justify-center gap-0 p-0 [&>svg:last-child]:hidden"
                    )}
                  >
                    {mutationOverride !== null && change ? (
                      <SelectValue>{change.label}</SelectValue>
                    ) : (
                      <HugeiconsIcon icon={Edit02Icon} size={14} />
                    )}
                  </SelectTrigger>
                  <SelectContent
                    data-ai-composer-portal
                    align="end"
                    className="min-w-52"
                  >
                    <SelectGroup>
                      {changes
                        .filter((candidate) =>
                          allowedMutationOperations.includes(
                            candidate.operation
                          )
                        )
                        .map((candidate) => (
                          <SelectItem
                            key={candidate.operation}
                            value={candidate.operation}
                            disabled={
                              (candidate.operation === "replace-selection" &&
                                !selection.hasText) ||
                              (candidate.operation === "insert-at-cursor" &&
                                !selection.collapsed)
                            }
                          >
                            <ChangeTargetIcon operation={candidate.operation} />
                            {candidate.label}
                          </SelectItem>
                        ))}
                    </SelectGroup>
                  </SelectContent>
                </Select>
              )}
            </div>

{session.pendingProposal === null && (
        <ComposerHelp
          contextScope={contextScope}
          blockReason={
            selectedActionId === null ? askBlockReason : editBlockReason
          }
          hasRequest={isAsk || selectedActionId !== null}
          instructionLength={instruction.length}
          isCustom={isCustom}
        />
      )}
    </div>
  )
}

function parseSlashToken(
  draft: string
): { readonly query: string; readonly start: number } | null {
  const match = /(^|\s)\/([\w-]*)$/.exec(draft)
  if (!match) return null
  return {
    query: match[2]!.toLowerCase(),
    start: match.index + match[1]!.length,
  }
}

function isInsideComposer(
  root: HTMLElement | null,
  target: EventTarget | null
) {
  if (!(target instanceof Node)) return false
  if (root?.contains(target)) return true
  return (
    target instanceof Element &&
    target.closest("[data-ai-composer-portal]") !== null
  )
}

function getAskBlockReason(input: {
  readonly contextScope: EmendContextScope | null
  readonly editorReady: boolean
  readonly hasSelection: boolean
  readonly instruction: string
  readonly instructionTooLong: boolean
  readonly pendingProposal: boolean
  readonly requestInProgress: boolean
}): string | null {
  if (!input.editorReady) return "The editor is still mounting."
  if (input.requestInProgress) return "Wait for the current request to finish."
  if (input.pendingProposal) return "Review the current proposal first."
  if (!input.instruction) return "Enter a prompt."
  if (input.instructionTooLong) return "The instruction is too long."
  if (!input.contextScope) return "Choose what emend may read."
  if (input.contextScope === "selection" && !input.hasSelection) {
    return "Select text before using Selection context."
  }
  return null
}

function getEditBlockReason(input: {
  readonly change: ComposerChange | undefined
  readonly contextScope: EmendContextScope | null
  readonly editorReady: boolean
  readonly hasSelection: boolean
  readonly instruction: string
  readonly instructionTooLong: boolean
  readonly pendingProposal: boolean
  readonly policyAllowsAction: boolean
  readonly requestInProgress: boolean
  readonly selectedActionId: ComposerActionId | null
  readonly selectionCollapsed: boolean
}): string | null {
  if (!input.editorReady) return "The editor is still mounting."
  if (input.requestInProgress) return "Wait for the current request to finish."
  if (input.pendingProposal) return "Review the current proposal first."
  if (!input.selectedActionId) return "Choose an action."
  if (!input.policyAllowsAction) {
    return "This action is unavailable under the Composer policy."
  }
  if (!input.contextScope) return "Choose what emend may read."
  if (input.contextScope === "selection" && !input.hasSelection) {
    return "Select text before using Selection context."
  }
  if (input.selectedActionId === "custom") {
    if (!input.instruction) return "Enter a custom instruction."
    if (input.instructionTooLong) return "The instruction is too long."
  }
  if (!input.change) return "Choose how emend should change the document."
  if (input.change.operation === "replace-selection" && !input.hasSelection) {
    return "Select text before replacing the Selection."
  }
  if (
    input.change.operation === "insert-at-cursor" &&
    !input.selectionCollapsed
  ) {
    return "Collapse the selection before inserting at the cursor."
  }
  return null
}

function ComposerHelp({
  contextScope,
  blockReason,
  hasRequest,
  instructionLength,
  isCustom,
}: {
  readonly contextScope: EmendContextScope | null
  readonly blockReason: string | null
  readonly hasRequest: boolean
  readonly instructionLength: number
  readonly isCustom: boolean
}) {
  if (!hasRequest) return null

if (
    isCustom &&
    instructionLength > DEFAULT_REQUEST_LIMITS.maxInstructionLength
  ) {
    return (
      <p className="px-2 text-xs text-destructive" role="alert">
        Keep the instruction within{" "}
        {DEFAULT_REQUEST_LIMITS.maxInstructionLength} characters.
      </p>
    )
  }
  if (blockReason) {
    return <p className="px-2 text-xs text-muted-foreground">{blockReason}</p>
  }
  if (contextScope === "document") {
    return (
      <p className="px-2 text-xs text-muted-foreground">
        The configured AI provider receives Document Source Markdown; request
        limits still apply.
      </p>
    )
  }
  return null
}

function scopeLabel(scope: EmendContextScope): string {
  if (scope === "current-block") return "Current block"
  return scope === "selection" ? "Selection" : "Document"
}

function ChangeTargetIcon({
  operation,
}: {
  readonly operation: EmendMutationOperation
}) {
  const icon =
    operation === "replace-selection"
      ? TextSelectionIcon
      : operation === "replace-current-block"
        ? TextAlignLeftIcon
        : operation === "replace-document"
          ? FileEditIcon
          : CursorTextIcon

return <HugeiconsIcon icon={icon} size={15} />
}
58:T3880,"use client"

import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Marker, MarkerContent } from "@/components/ui/marker"
import { Textarea } from "@/components/ui/textarea"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { AiMarkdown } from "@/components/emend/_shared/ai-markdown"
import { cn } from "@/lib/utils"
import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon"
import CancelCircleIcon from "@hugeicons/core-free-icons/CancelCircleIcon"
import CheckmarkCircle01Icon from "@hugeicons/core-free-icons/CheckmarkCircle01Icon"
import Copy01Icon from "@hugeicons/core-free-icons/Copy01Icon"
import InformationCircleIcon from "@hugeicons/core-free-icons/InformationCircleIcon"
import Refresh01Icon from "@hugeicons/core-free-icons/Refresh01Icon"
import ReloadIcon from "@hugeicons/core-free-icons/ReloadIcon"
import StopIcon from "@hugeicons/core-free-icons/StopIcon"
import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react"
import type { UseEditorAiResult } from "@emend/ai/react"
import { useState } from "react"

const answerClassName = "max-h-72 overflow-y-auto px-1 text-sm"

export interface AiComposerReviewProps {
  readonly session: UseEditorAiResult
  readonly replayAllowed: boolean
}

export function AiComposerReview({
  session,
  replayAllowed,
}: AiComposerReviewProps) {
  const [confirmation, setConfirmation] = useState<{
    readonly key: string
    readonly checked: boolean
  }>({ key: "", checked: false })
  const pendingProposal = session.pendingProposal
  const proposalMarkdown =
    session.proposalMarkdown ?? pendingProposal?.content.value ?? ""
  const confirmationKey = `${pendingProposal?.id ?? ""}:${proposalMarkdown}`
  const confirmDocumentReplacement =
    confirmation.key === confirmationKey && confirmation.checked
  const preparation = session.preparation
  const isRunning =
    session.state === "submitting" || session.state === "streaming"
  const isAsk = session.activeRequest?.interactionMode === "ask"
  const isEditReview =
    !isAsk &&
    pendingProposal !== null &&
    pendingProposal.request.interactionMode === "edit"
  const isInlineEditRun =
    isRunning &&
    session.previewMode === "inline" &&
    session.activeRequest?.interactionMode === "edit"
  const isStale = session.stale
  const isBlocked = isEditReview && preparation?.kind === "blocked"
  const isPlainTextFallback =
    isEditReview && preparation?.kind === "plain-text-fallback"
  const fallbackText =
    preparation?.kind === "plain-text-fallback" ? preparation.text : null
  const warnings = preparation?.warnings ?? []
  const proposalRenderedInline =
    isEditReview && Boolean(session.editorState?.previewKind)
  const showEditDetails =
    isEditReview &&
    (!proposalRenderedInline ||
      isBlocked ||
      Boolean(
        preparation &&
        preparation.kind !== "blocked" &&
        preparation.requiresDocumentConfirmation &&
        !isStale
      ))
  const canRetry =
    replayAllowed &&
    !isStale &&
    !isRunning &&
    (session.state === "error" || session.state === "aborted") &&
    session.error?.retryable === true
  const canRegenerate = replayAllowed && !isRunning
  const canApply =
    replayAllowed &&
    isEditReview &&
    !isStale &&
    session.streamCompleted &&
    preparation?.kind !== "blocked" &&
    (preparation?.kind === "supported-markdown" ||
      preparation?.kind === "plain-text-fallback") &&
    (!preparation.requiresDocumentConfirmation || confirmDocumentReplacement)
  const statusMessage = getStatusMessage({
    isAsk,
    isBlocked,
    isPlainTextFallback,
    isRunning,
    isStale,
    state: session.state,
  })
  const visibleError = session.error ?? session.reviewError

if (session.state === "idle" && !isEditReview && !isAsk && !visibleError) {
    return null
  }

return (
    <section
      className={
        proposalRenderedInline || isInlineEditRun
          ? "max-w-lg space-y-2 rounded-3xl border border-border/60 bg-card p-1.5 text-card-foreground shadow-md"
          : "max-w-lg space-y-3 rounded-2xl border border-border bg-card p-3 text-card-foreground shadow-md"
      }
      data-emend-review
      aria-label="AI review"
    >
      <p className="sr-only" aria-live="polite">
        {statusMessage}
      </p>

{visibleError && (
        <Bubble variant="destructive" className="max-w-full">
          <BubbleContent role="alert">{visibleError.message}</BubbleContent>
        </Bubble>
      )}

{isInlineEditRun && (
        <div className="flex items-center justify-between gap-3 pl-2.5">
          <Marker className="text-[12.5px]">
            <MarkerContent className="shimmer motion-reduce:shimmer-none">
              {session.state === "streaming"
                ? "Writing in the document…"
                : "Thinking…"}
            </MarkerContent>
          </Marker>
          <ReviewAction
            label="Stop"
            icon={StopIcon}
            variant="outline"
            size="icon-sm"
            onClick={session.stop}
          />
        </div>
      )}

{isRunning && !isInlineEditRun && (
        <div className="flex items-center justify-between gap-3">
          <Marker role="status">
            <MarkerContent className="shimmer motion-reduce:shimmer-none">
              {isAsk ? "Thinking…" : "Writing a suggestion…"}
            </MarkerContent>
          </Marker>
          <ReviewAction
            label="Stop"
            icon={StopIcon}
            variant="outline"
            size="icon-sm"
            onClick={session.stop}
          />
        </div>
      )}

{isRunning && !isInlineEditRun && session.streamedMarkdown && (
        <AiMarkdown className={answerClassName}>
          {session.streamedMarkdown}
        </AiMarkdown>
      )}

{isAsk && !isRunning && (
        <AiMarkdown className={answerClassName}>
          {session.informationalMarkdown || session.streamedMarkdown}
        </AiMarkdown>
      )}

{!isRunning && !isAsk && !isEditReview && visibleError && (
        <AiMarkdown className={answerClassName}>
          {session.streamedMarkdown || "No partial output was received."}
        </AiMarkdown>
      )}

{showEditDetails && (
        <div className="space-y-3">
          {!proposalRenderedInline && (
            <div className="relative">
              <Textarea
                className={cn(
                  "block min-h-40 resize-y rounded-[16px] bg-background px-3 py-2 font-mono text-sm leading-relaxed md:text-sm dark:bg-background",
                  warnings.length > 0 && "pb-9"
                )}
                aria-label={
                  fallbackText === null
                    ? "Editable Proposal Markdown"
                    : "Plain-text fallback"
                }
                readOnly={fallbackText !== null}
                value={fallbackText ?? proposalMarkdown}
                onChange={(event) => {
                  if (fallbackText === null) {
                    session.setProposalMarkdown(event.target.value)
                  }
                }}
              />
              <WarningButton
                warnings={warnings}
                className="absolute right-2 bottom-2"
              />
            </div>
          )}

{isBlocked && preparation.kind === "blocked" && (
            <Bubble variant="destructive" className="max-w-full">
              <BubbleContent role="alert">
                {preparation.error.message}
              </BubbleContent>
            </Bubble>
          )}

{preparation &&
            preparation.kind !== "blocked" &&
            preparation.requiresDocumentConfirmation &&
            !isStale && (
              <Label
                htmlFor="confirm-document-replacement"
                className="items-start rounded-xl border border-destructive/30 bg-destructive/10 p-3 leading-normal font-normal"
              >
                <Checkbox
                  id="confirm-document-replacement"
                  className="mt-1"
                  checked={confirmDocumentReplacement}
                  onCheckedChange={(checked) =>
                    setConfirmation({
                      key: confirmationKey,
                      checked,
                    })
                  }
                />
                <span>Confirm replacing the whole document.</span>
              </Label>
            )}
        </div>
      )}

{!isRunning && (isAsk || (!isEditReview && visibleError)) && (
        <div className="flex w-full items-center justify-between gap-3">
          <div className="flex items-center gap-1">
            <ReviewAction
              label="Copy"
              icon={Copy01Icon}
              disabled={!copyValue(session)}
              onClick={() => void copySession(session)}
            />
            {canRetry && (
              <ReviewAction
                label="Retry"
                icon={ReloadIcon}
                variant="outline"
                onClick={() => void session.retry()}
              />
            )}
            {canRegenerate && (
              <ReviewAction
                label="Regenerate"
                icon={Refresh01Icon}
                onClick={() => void session.regenerate()}
              />
            )}
          </div>
          <ReviewAction
            label="Close"
            icon={Cancel01Icon}
            onClick={session.dismissInformationalResult}
          />
        </div>
      )}

{!isRunning && isEditReview && (
        <div className="flex w-full items-center justify-between gap-3">
          <div className="flex items-center gap-1">
            <ReviewAction
              label="Copy"
              icon={Copy01Icon}
              disabled={!copyValue(session)}
              onClick={() => void copySession(session)}
            />
            {!isStale && canRegenerate && (
              <ReviewAction
                label="Regenerate"
                icon={Refresh01Icon}
                onClick={() => void session.regenerate()}
              />
            )}
            {proposalRenderedInline && <WarningButton warnings={warnings} />}
          </div>
          <div className="flex items-center gap-1.5">
            <Button
              type="button"
              size="sm"
              variant="outline"
              className="rounded-full"
              onClick={() => session.reject()}
            >
              <HugeiconsIcon icon={CancelCircleIcon} size={14} />
              Reject
            </Button>
            {isStale && canRegenerate ? (
              <Button
                type="button"
                size="sm"
                className="rounded-full"
                onClick={() => void session.regenerate()}
              >
                <HugeiconsIcon icon={Refresh01Icon} size={14} />
                Run again
              </Button>
            ) : !isStale && !isBlocked ? (
              <Button
                type="button"
                size="sm"
                className="rounded-full"
                disabled={!canApply}
                onClick={() => session.accept(confirmDocumentReplacement)}
              >
                <HugeiconsIcon icon={CheckmarkCircle01Icon} size={14} />
                {isPlainTextFallback ? "Apply as plain text" : "Accept"}
              </Button>
            ) : null}
          </div>
        </div>
      )}
    </section>
  )
}

function ReviewAction({
  label,
  icon,
  variant = "ghost",
  size = "icon-xs",
  disabled,
  onClick,
}: {
  readonly label: string
  readonly icon: IconSvgElement
  readonly variant?: "default" | "destructive" | "ghost" | "outline"
  readonly size?: "icon-sm" | "icon-xs"
  readonly disabled?: boolean
  readonly onClick: () => void
}) {
  return (
    <Tooltip>
      <TooltipTrigger
        render={
          <Button
            variant={variant}
            size={size}
            type="button"
            className="rounded-full"
            aria-label={label}
            disabled={disabled}
            onClick={onClick}
          >
            <HugeiconsIcon icon={icon} size={14} />
          </Button>
        }
      />
      <TooltipContent>{label}</TooltipContent>
    </Tooltip>
  )
}

function WarningButton({
  warnings,
  className,
}: {
  readonly warnings: readonly {
    readonly code: string
    readonly message: string
  }[]
  readonly className?: string
}) {
  if (warnings.length === 0) return null

return (
    <Tooltip>
      <TooltipTrigger
        render={
          <Button
            variant="ghost"
            size="icon-xs"
            type="button"
            className={cn(
              "rounded-full text-amber-700 hover:bg-amber-500/10 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-400",
              className
            )}
            aria-label="View proposal warnings"
          >
            <HugeiconsIcon icon={InformationCircleIcon} size={14} />
          </Button>
        }
      />
      <TooltipContent>
        <div className="space-y-1">
          {warnings.map((warning) => (
            <p key={warning.code}>{warning.message}</p>
          ))}
        </div>
      </TooltipContent>
    </Tooltip>
  )
}

function copyValue(session: UseEditorAiResult): string | null {
  return session.copy()
}

async function copySession(session: UseEditorAiResult): Promise<void> {
  const value = copyValue(session)
  if (!value || typeof navigator === "undefined" || !navigator.clipboard) return

await navigator.clipboard.writeText(value).catch(() => undefined)
}

function getStatusMessage(input: {
  readonly isAsk: boolean
  readonly isBlocked: boolean
  readonly isPlainTextFallback: boolean
  readonly isRunning: boolean
  readonly isStale: boolean
  readonly state: UseEditorAiResult["state"]
}): string {
  if (input.isRunning) return "Generating…"
  if (input.isStale) return "Proposal is stale"
  if (input.isBlocked) return "Proposal needs an edit"
  if (input.isPlainTextFallback) return "Review plain-text fallback"
  if (input.isAsk) return "Review response"
  if (input.state === "aborted") return "Request stopped"
  if (input.state === "error") return "Request needs attention"
  return "Review proposal"
}
59:T351b,/*
 * Copyright (c) 2023 shadcn.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

/*
 * shadcn/typeset
 * https://ui.shadcn.com/docs/typeset.
 */

@layer components {
  .typeset {
    --typeset-font-body: inherit;
    --typeset-font-heading: var(--font-heading);
    --typeset-font-mono: var(--font-mono);
    --typeset-size: 1em;
    --typeset-leading: 1.75;
    --typeset-flow: 1.25em;
  }
}

@layer components {
  .typeset {
    font-family: var(--typeset-font-body);
    font-size: calc(var(--typeset-size) * 1.125);
    line-height: var(--typeset-leading);
    color: var(--color-foreground, currentColor);
    overflow-wrap: break-word;
    margin-trim: block-start;

@media (min-width: 48rem), print {
      font-size: var(--typeset-size);
    }

--typeset-muted: var(
      --color-muted-foreground,
      color-mix(in oklab, currentColor 60%, transparent)
    );
    --typeset-rule: var(
      --color-border,
      color-mix(in oklab, currentColor 20%, transparent)
    );
  }

.typeset
    *:not(
      :where(
        .not-typeset,
        [data-not-typeset],
        .not-typeset *,
        [data-not-typeset] *
      )
    ) {
    /* Paragraphs. */
    &:where(p) {
      margin-block-start: var(--typeset-flow);
      margin-block-end: 0;
    }

/* Headings. */
    &:where(h1, h2, h3, h4, h5, h6) {
      color: var(--color-foreground, currentColor);
      font-family: var(--typeset-font-heading);
      font-weight: 600;
      margin-block-end: 0;
    }
    &:where(h1) {
      font-size: 1.75em;
      line-height: 1.3;
      margin-block-start: var(--typeset-flow);
    }
    &:where(h2) {
      font-size: 1.25em;
      line-height: 1.4;
      margin-block-start: calc(var(--typeset-flow) * 1.4);
    }
    &:where(h3) {
      font-size: 1.125em;
      line-height: 1.45;
      margin-block-start: var(--typeset-flow);
    }
    &:where(h4) {
      font-size: 1em;
      line-height: 1.5;
      margin-block-start: var(--typeset-flow);
    }
    &:where(h5) {
      font-size: 0.875em;
      line-height: 1.5;
      font-weight: 500;
      color: var(--typeset-muted);
      margin-block-start: calc(var(--typeset-flow) / 0.875);
    }
    &:where(h6) {
      font-size: 0.8125em;
      line-height: 1.5;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--typeset-muted);
      margin-block-start: calc(var(--typeset-flow) / 0.8125);
    }
    /* Anchors. */
    &:where([id]) {
      scroll-margin-block-start: var(--typeset-flow);
    }

/* Headings own the space below them. */
    &:where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
      margin-block-start: 1em;
    }
    &:where(:is(h1, h2, h3, h4) :is(code)) {
      font-size: 0.9em;
    }

/* Links. */
    &:where(a) {
      color: inherit;
      font-weight: 500;
      text-decoration-line: underline;
      text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
    }
    &:where(a:hover) {
      text-decoration-color: currentColor;
    }
    &:where(a:focus-visible) {
      outline: 2px solid var(--color-ring, currentColor);
      outline-offset: 2px;
      border-radius: 0.125em;
    }
    &:where(:is(h1, h2, h3, h4, h5, h6) :is(a)) {
      font-weight: inherit;
    }

/* Inline semantics. */
    &:where(strong, b) {
      font-weight: 600;
    }
    &:where(:is(h1, h2, h3, h4) :is(strong, b)) {
      font-weight: 600;
    }
    &:where(mark) {
      background-color: color-mix(
        in oklab,
        oklch(0.86 0.17 95) 40%,
        transparent
      );
      color: inherit;
      padding: 0.05em 0.15em;
      border-radius: 0.2em;
    }
    &:where(abbr[title]) {
      text-decoration-line: underline;
      text-decoration-style: dotted;
      text-underline-offset: 0.2em;
      cursor: help;
    }
    &:where(del, s) {
      color: var(--typeset-muted);
      text-decoration-line: line-through;
    }
    &:where(sup, sub) {
      font-size: 0.75em;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
    &:where(sup) {
      top: -0.5em;
    }
    &:where(sub) {
      bottom: -0.25em;
    }
    &:where(sup a) {
      text-decoration-line: none;
      font-weight: 500;
    }

/* Lists. */
    &:where(ul) {
      list-style-type: disc;
    }
    &:where(ol) {
      list-style-type: decimal;
    }
    &:where(ul ul) {
      list-style-type: circle;
    }
    &:where(ul ul ul) {
      list-style-type: square;
    }
    &:where(ol[type="a" i]) {
      list-style-type: lower-alpha;
    }
    &:where(ol[type="i" i]) {
      list-style-type: lower-roman;
    }
    &:where(ol[type="A" s]) {
      list-style-type: upper-alpha;
    }
    &:where(ol[type="I" s]) {
      list-style-type: upper-roman;
    }
    &:where(ul, ol) {
      margin-block-start: var(--typeset-flow);
      margin-block-end: 0;
      padding-inline-start: 1.5em;
    }
    &:where(li) {
      margin-block-start: 0.5em;
      padding-inline-start: 0.4em;
    }
    &:where(li > p, li > ul, li > ol) {
      margin-block-start: 0.5em;
    }
    &:where(ul > li)::marker {
      color: var(--typeset-muted);
    }
    &:where(ol > li)::marker {
      color: var(--typeset-muted);
    }

/* GFM task lists. */
    &:where(ul.contains-task-list) {
      list-style-type: none;
      padding-inline-start: 0.25em;
    }
    &:where(li.task-list-item > input[type="checkbox"]) {
      margin-inline-end: 0.5em;
      vertical-align: -0.1em;
      accent-color: var(--color-primary, currentColor);
    }

/* Disclosures. */
    &:where(details) {
      margin-block-start: var(--typeset-flow);
      margin-block-end: 0;
    }
    &:where(summary) {
      cursor: pointer;
      font-weight: 500;
    }
    &:where(summary)::marker {
      color: var(--typeset-muted);
    }

/* Keyboard keys. */
    &:where(kbd) {
      font-family: inherit;
      font-size: 0.85em;
      font-weight: 500;
      border: 1px solid var(--typeset-rule);
      border-block-end-width: 2px;
      border-radius: min(calc(var(--radius, 0.5em) * 0.6), 0.35em);
      padding: 0.0625em 0.35em;
    }

/* Definition lists. */
    &:where(dl) {
      margin-block-start: var(--typeset-flow);
      margin-block-end: 0;
    }
    &:where(dt) {
      font-weight: 500;
      margin-block-start: 1em;
    }
    &:where(dt + dt) {
      margin-block-start: 0.25em;
    }
    &:where(dd) {
      margin-block-start: 0.25em;
      margin-inline-start: 0;
      padding-inline-start: 1em;
      color: var(--typeset-muted);
    }

/* Inline code. */
    &:where(:not(pre) > code) {
      background-color: var(
        --color-muted,
        color-mix(in oklab, currentColor 8%, transparent)
      );
      font-family: var(--typeset-font-mono);
      font-size: 0.85em;
      border-radius: min(calc(var(--radius, 0.5em) * 0.6), 0.35em);
      padding: 0.125em 0.3em;
    }

/* Code blocks. */
    &:where(pre) {
      background-color: var(
        --color-muted,
        color-mix(in oklab, currentColor 8%, transparent)
      );
      font-family: var(--typeset-font-mono);
      font-size: 0.875em;
      line-height: 1.5;
      tab-size: 2;
      direction: ltr;
      border-radius: var(--radius, 0.5em);
      padding: 0.75em 1em;
      overflow-x: auto;
      margin-block-start: calc(var(--typeset-flow) / 0.875);
      margin-block-end: 0;
    }
    &:where(pre code) {
      background-color: transparent;
      font-family: inherit;
      font-size: inherit;
      padding: 0;
      border-radius: 0;
    }

/* Blockquote. */
    &:where(blockquote) {
      border-inline-start: 2px solid var(--typeset-rule);
      padding-inline-start: 1em;
      margin-block-start: var(--typeset-flow);
      margin-block-end: 0;
      margin-inline: 0;
    }

/* Dividers. */
    &:where(hr) {
      border: 0;
      border-block-start: 1px solid var(--typeset-rule);
      margin-block-start: calc(var(--typeset-flow) * 2.4);
      margin-block-end: 0;
    }
    &:where(hr + h1, hr + h2, hr + h3, hr + h4) {
      margin-block-start: var(--typeset-flow);
    }

/* GFM footnotes. */
    &:where(.footnotes, [data-footnotes]) {
      margin-block-start: calc(var(--typeset-flow) * 2);
      border-block-start: 1px solid var(--typeset-rule);
      padding-block-start: var(--typeset-flow);
      font-size: 0.875em;
      color: var(--typeset-muted);
    }

/* Math. */
    &:where(math[display="block"]) {
      margin-block-start: var(--typeset-flow);
      margin-block-end: 0;
      overflow-x: auto;
      overflow-y: hidden;
      padding-block: 0.25em;
    }

/* Media. */
    &:where(img, video) {
      border-radius: var(--radius, 0.5em);
      max-width: 100%;
      height: auto;
      margin-block-start: var(--typeset-flow);
      margin-block-end: 0;
    }
    &:where(p img) {
      margin-block-start: 0;
    }
    &:where(figure) {
      margin-block-start: var(--typeset-flow);
      margin-block-end: 0;
      margin-inline: 0;
    }
    &:where(figcaption, caption) {
      color: var(--typeset-muted);
      font-size: 0.875em;
      text-align: center;
      margin-block-start: calc(0.75em / 0.875);
    }
    &:where(caption) {
      caption-side: bottom;
    }

/* Tables. Separators sit on cells, not tr:last-child: append-safe.
       Bare tables stay real tables (keep their semantics) and wrap to fit. */
    &:where(table) {
      max-width: 100%;
      font-size: 1em;
      line-height: 1.5;
      font-variant-numeric: tabular-nums;
      border-collapse: separate;
      border-spacing: 0;
      border-block-end: 1px solid var(--typeset-rule);
      margin-block-start: var(--typeset-flow);
      margin-block-end: 0;
    }

/* Horizontal scroll for any wide block. Wrap it and the wrapper owns the
       flow margin. Tables shrink to fit, so widen the table to make it scroll
       instead of compress. */
    &:where(.typeset-scroll) {
      overflow-x: auto;
      margin-block-start: var(--typeset-flow);
    }
    &:where(.typeset-scroll > *) {
      margin-block-start: 0;
    }
    &:where(.typeset-scroll table) {
      width: max-content;
      max-width: none;
    }
    &:where(thead th) {
      font-weight: 500;
      text-align: start;
      white-space: nowrap;
      padding: 0.65em 1em;
    }
    &:where(:is(tbody, tfoot) :is(td, th)) {
      padding: 0.75em 1em;
      text-align: start;
      vertical-align: top;
      border-block-start: 1px solid var(--typeset-rule);
    }
    &:where(tbody th, tfoot th) {
      font-weight: 500;
    }
    &:where(th:first-child, td:first-child) {
      padding-inline-start: 0;
    }
    &:where(th[align="center"], td[align="center"]) {
      text-align: center;
    }
    &:where(th[align="right"], td[align="right"]) {
      text-align: end;
    }

/* Blocks inside list items keep the list's tighter rhythm. */
    &:where(li > blockquote, li > table, li > figure) {
      margin-block-start: 0.5em;
    }
    &:where(li > pre) {
      margin-block-start: calc(0.5em / 0.875);
    }

@media print {
      &:where(pre, table, blockquote, figure) {
        break-inside: avoid;
      }
      &:where(h1, h2, h3, h4) {
        break-after: avoid;
      }
    }

/* Forced colors strips the code background, so give it a border. */
    @media (forced-colors: active) {
      &:where(:not(pre) > code) {
        border: 1px solid;
      }
    }
  }

/* First child adds no space above. Last so it wins ties. */
  .typeset
    > :where(:first-child):not(
      :where(
        .not-typeset,
        [data-not-typeset],
        .not-typeset *,
        [data-not-typeset] *
      )
    ),
  .typeset
    > :where(:first-child)
    > :where(:first-child):not(
      :where(
        .not-typeset,
        [data-not-typeset],
        .not-typeset *,
        [data-not-typeset] *
      )
    ),
  .typeset
    :where(
      li > :first-child,
      blockquote > :first-child,
      td > :first-child,
      th > :first-child,
      dd > :first-child,
      figure > :first-child,
      figure > picture > img
    ):not(
      :where(
        .not-typeset,
        [data-not-typeset],
        .not-typeset *,
        [data-not-typeset] *
      )
    ) {
    margin-block-start: 0;
  }
}

/* Chat preset: follows the panel's text size and keeps headings compact. */
@layer components {
  .typeset-chat {
    --typeset-size: 1em;
    --typeset-leading: 1.6;
    --typeset-flow: 0.75em;
    font-size: var(--typeset-size);
  }

.typeset-chat :where(h1, h2) {
    font-size: 1.125em;
    line-height: 1.45;
  }
}
5a:T4ff,/*
 * Copyright (c) 2023 shadcn.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
54:["$","$L56",null,{"files":[{"path":"registry/components/ai-composer/ai-composer.tsx","content":"$57","type":"registry:component","target":"components/emend/ai-composer/ai-composer.tsx"},{"path":"registry/components/ai-composer/ai-composer-review.tsx","content":"$58","type":"registry:component","target":"components/emend/ai-composer/ai-composer-review.tsx"},{"path":"registry/components/ai-composer/index.tsx","content":"export {\n  AiComposer,\n  AiComposerView,\n  type AiComposerPolicy,\n  type AiComposerProps,\n  type AiComposerViewProps,\n} from \"./ai-composer\"\n","type":"registry:component","target":"components/emend/ai-composer/index.tsx"},{"path":"registry/components/_shared/ai-markdown.tsx","content":"\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport ReactMarkdown, { type Components } from \"react-markdown\"\nimport remarkGfm from \"remark-gfm\"\nimport \"./typeset.css\"\n\nconst components: Components = {\n  a: ({ href, children }) => (\n    <a href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n      {children}\n    </a>\n  ),\n  table: ({ children }) => (\n    <div className=\"typeset-scroll\">\n      <table>{children}</table>\n    </div>\n  ),\n}\n\nexport function AiMarkdown({\n  children,\n  className,\n}: {\n  readonly children: string\n  readonly className?: string\n}) {\n  return (\n    <div className={cn(\"typeset typeset-chat\", className)}>\n      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>\n        {children}\n      </ReactMarkdown>\n    </div>\n  )\n}\n","type":"registry:component","target":"components/emend/_shared/ai-markdown.tsx"},{"path":"registry/components/_shared/typeset.css","content":"$59","type":"registry:file","target":"components/emend/_shared/typeset.css"},{"path":"packages/ui/src/lib/utils.ts","content":"$5a","type":"registry:lib","target":"lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]
</article></body></html>