import { type ComponentProps, type JSX, Show, onMount, splitProps } from "solid-js" import { ButtonV2 } from "./button-v2" import "./line-comment-v2.css" /** Horizontal “more” glyph for the display-card overflow control (Figma outline-dots). */ export function LineCommentV2OverflowIcon(props: ComponentProps<"svg">) { return ( ) } export interface LineCommentV2Props extends ComponentProps<"div"> { /** Main comment body (text or rich content). */ comment: JSX.Element /** Line / selection context (e.g. “Comment on line 40”). */ selection: JSX.Element /** Typically an overflow menu trigger; use `LineCommentV2OverflowIcon` inside `line-comment-v2-overflow`. */ actions?: JSX.Element } export function LineCommentV2(props: LineCommentV2Props) { const [local, rest] = splitProps(props, ["comment", "selection", "actions", "class", "classList"]) return (

{local.comment}

{local.selection}

{(actions) =>

{actions()}

}

) } export interface LineCommentEditorV2Props extends Omit, "children" | "onInput" | "onSubmit"> { /** Visible field label above the textarea (default: “Comment”). */ heading?: JSX.Element | string value: string onInput: (value: string) => void onCancel: () => void onSubmit: (value: string) => void selection: JSX.Element placeholder?: string rows?: number cancelLabel?: string submitLabel?: string autofocus?: boolean } export function LineCommentEditorV2(props: LineCommentEditorV2Props) { let textareaRef: HTMLTextAreaElement | undefined const [local, rest] = splitProps(props, [ "heading", "value", "onInput", "onCancel", "onSubmit", "selection", "placeholder", "rows", "cancelLabel", "submitLabel", "autofocus", "class", "classList", ]) const heading = () => local.heading ?? "Comment" const canSubmit = () => local.value.trim().length > 0 const submit = () => { const v = local.value.trim() if (!v) return local.onSubmit(v) } onMount(() => { if (local.autofocus === false) return requestAnimationFrame(() => textareaRef?.focus()) }) return (

{heading()}

{
              textareaRef = el
            }}
            data-slot="line-comment-v2-textarea"
            rows={local.rows ?? 3}
            placeholder={local.placeholder ?? "Add context for this change"}
            value={local.value}
            onInput={(e) => local.onInput(e.currentTarget.value)}
            onKeyDown={(e) => {
              e.stopPropagation()
              if (e.key === "Escape") {
                e.preventDefault()
                e.currentTarget.blur()
                local.onCancel()
                return
              }
              if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault()
                submit()
              }
            }}
          />
        </div>
        <div data-slot="line-comment-v2-footer">
          <div data-slot="line-comment-v2-footer-meta">{local.selection}</div>
          <div data-slot="line-comment-v2-footer-actions">
            <ButtonV2 type="button" size="normal" variant="neutral" onClick={() => local.onCancel()}>
              {local.cancelLabel ?? "Cancel"}
            </ButtonV2>
            <ButtonV2 type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>
              {local.submitLabel ?? "Comment"}
            </ButtonV2>
          </div>
        </div>
      </div>
    </div>
  )
}
</article></body></html>