@neurocode-ai/ui 1.18.8

package/src/v2/components/line-comment-v2.css

@@ -0,0 +1,258 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="line-comment-v2"] {
+  box-sizing: border-box;
+  font-family: var(--v2-font-family-sans);
+  font-variant-numeric: tabular-nums;
+  min-width: 0;
+  width: 100%;
+  max-width: 400px;
+}
+
+[data-component="line-comment-v2"] *,
+[data-component="line-comment-v2"] *::before,
+[data-component="line-comment-v2"] *::after {
+  box-sizing: border-box;
+}
+
+[data-component="line-comment-v2"] [data-slot="line-comment-v2-shell"] {
+  background: var(--v2-background-bg-layer-01);
+  border-radius: 6px;
+  box-shadow: var(--v2-elevation-raised);
+}
+
+/* --- Display (read) --- */
+[data-component="line-comment-v2"][data-variant="display"] [data-slot="line-comment-v2-shell"] {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 12px;
+  gap: 8px;
+}
+
+[data-component="line-comment-v2"][data-variant="display"] [data-slot="line-comment-v2-column"] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+[data-component="line-comment-v2"][data-variant="display"] [data-slot="line-comment-v2-text"] {
+  margin: 0;
+  width: 100%;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 440;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+  font-variation-settings: "slnt" 0;
+}
+
+[data-component="line-comment-v2"][data-variant="display"] [data-slot="line-comment-v2-meta"] {
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 530;
+  line-height: 1;
+  letter-spacing: 0.05px;
+  color: var(--v2-text-text-faint);
+  font-variation-settings: "slnt" 0;
+}
+
+[data-component="line-comment-v2"][data-variant="display"] [data-slot="line-comment-v2-tools"] {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  flex-shrink: 0;
+}
+
+[data-slot="line-comment-v2-overflow"] {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  gap: 3px;
+  margin: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--v2-icon-icon-muted);
+  cursor: pointer;
+  outline: none;
+}
+
+[data-slot="line-comment-v2-overflow"]:focus {
+  outline: none;
+}
+
+[data-slot="line-comment-v2-overflow"]:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 2px;
+}
+
+[data-slot="line-comment-v2-overflow"]:is(:hover, [data-state="hover"]) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-slot="line-comment-v2-overflow"]:is(:active, [data-state="pressed"]) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-slot="line-comment-v2-overflow"] svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+/* --- Editor --- */
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-shell"] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 12px;
+  gap: 12px;
+}
+
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-field"] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-label"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 530;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+  user-select: none;
+}
+
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-textarea"] {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 80px;
+  padding: 8px;
+  margin: 0;
+  resize: vertical;
+  border: 1px solid var(--v2-border-border-base);
+  border-radius: 6px;
+  background:
+    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 440;
+  line-height: 1.35;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+  font-variation-settings: "slnt" 0;
+  outline: none;
+}
+
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-textarea"]::placeholder {
+  color: var(--v2-text-text-faint);
+  user-select: none;
+}
+
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-textarea"]:focus {
+  border-color: var(--v2-border-border-focus);
+}
+
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-footer"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+}
+
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-footer-meta"] {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 530;
+  line-height: 1;
+  letter-spacing: 0.05px;
+  color: var(--v2-text-text-faint);
+  font-variation-settings: "slnt" 0;
+}
+
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-footer-actions"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-mention-list"] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 180px;
+  overflow: auto;
+  margin-top: 8px;
+  padding: 4px;
+  border: 0.5px solid var(--v2-border-border-muted);
+  border-radius: 6px;
+  background: var(--v2-background-bg-layer-02);
+}
+
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-mention-item"] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--v2-text-text-base);
+  text-align: left;
+  cursor: pointer;
+}
+
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-mention-item"][data-active] {
+  background: var(--v2-background-bg-layer-03);
+}
+
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-mention-path"] {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-mention-dir"] {
+  min-width: 0;
+  color: var(--v2-text-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-mention-file"] {
+  color: var(--v2-text-text-base);
+  white-space: nowrap;
+}

package/src/v2/components/line-comment-v2.tsx

@@ -0,0 +1,304 @@
+import { For, Show, createSignal, onMount, splitProps, type ComponentProps, type JSX } from "solid-js"
+import { FileIcon } from "../../components/file-icon"
+import { useFilteredList } from "../../hooks"
+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 (
+    <svg
+      {...props}
+      width={props.width ?? 16}
+      height={props.height ?? 16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden={props["aria-hidden"] ?? "true"}
+    >
+      <path d="M2.5 7.5H3.5V8.5H2.5V7.5Z" stroke="currentColor" />
+      <path d="M7.5 7.5H8.5V8.5H7.5V7.5Z" stroke="currentColor" />
+      <path d="M12.5 7.5H13.5V8.5H12.5V7.5Z" stroke="currentColor" />
+    </svg>
+  )
+}
+
+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 (
+    <div
+      {...rest}
+      data-component="line-comment-v2"
+      data-variant="display"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <div data-slot="line-comment-v2-shell">
+        <div data-slot="line-comment-v2-column">
+          <div data-slot="line-comment-v2-text">{local.comment}</div>
+          <div data-slot="line-comment-v2-meta">{local.selection}</div>
+        </div>
+        <Show when={local.actions}>{(actions) => <div data-slot="line-comment-v2-tools">{actions()}</div>}</Show>
+      </div>
+    </div>
+  )
+}
+
+export type LineCommentEditorV2Mention = {
+  items: (query: string) => string[] | Promise<string[]>
+}
+
+export interface LineCommentEditorV2Props extends Omit<ComponentProps<"div">, "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
+  mention?: LineCommentEditorV2Mention
+}
+
+function pathFilename(path: string) {
+  const index = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"))
+  return index === -1 ? path : path.slice(index + 1)
+}
+
+function pathDirectory(path: string) {
+  const index = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"))
+  return index === -1 ? "" : path.slice(0, index + 1)
+}
+
+export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
+  let textareaRef: HTMLTextAreaElement | undefined
+  const [mentionOpen, setMentionOpen] = createSignal(false)
+
+  const [local, rest] = splitProps(props, [
+    "heading",
+    "value",
+    "onInput",
+    "onCancel",
+    "onSubmit",
+    "selection",
+    "placeholder",
+    "rows",
+    "cancelLabel",
+    "submitLabel",
+    "autofocus",
+    "mention",
+    "class",
+    "classList",
+  ])
+
+  const heading = () => local.heading ?? "Comment"
+  const canSubmit = () => local.value.trim().length > 0
+
+  const closeMention = () => {
+    setMentionOpen(false)
+    mention.clear()
+  }
+
+  const currentMention = () => {
+    const textarea = textareaRef
+    if (!textarea) return
+    if (!local.mention) return
+    if (textarea.selectionStart !== textarea.selectionEnd) return
+
+    const end = textarea.selectionStart
+    const match = textarea.value.slice(0, end).match(/@(\S*)$/)
+    if (!match) return
+
+    return {
+      query: match[1] ?? "",
+      start: end - match[0].length,
+      end,
+    }
+  }
+
+  function selectMention(item: { path: string } | undefined) {
+    if (!item) return
+
+    const textarea = textareaRef
+    const query = currentMention()
+    if (!textarea || !query) return
+
+    const value = `${textarea.value.slice(0, query.start)}@${item.path} ${textarea.value.slice(query.end)}`
+    const cursor = query.start + item.path.length + 2
+
+    local.onInput(value)
+    closeMention()
+
+    requestAnimationFrame(() => {
+      textarea.focus()
+      textarea.setSelectionRange(cursor, cursor)
+    })
+  }
+
+  const mention = useFilteredList<{ path: string }>({
+    items: async (query) => {
+      if (!local.mention) return []
+      if (!query.trim()) return []
+      const paths = await local.mention.items(query)
+      return paths.map((path) => ({ path }))
+    },
+    key: (item) => item.path,
+    filterKeys: ["path"],
+    skipFilter: () => true,
+    onSelect: selectMention,
+  })
+
+  const syncMention = () => {
+    const item = currentMention()
+    if (!item) {
+      closeMention()
+      return
+    }
+
+    setMentionOpen(true)
+    mention.onInput(item.query)
+  }
+
+  const selectActiveMention = () => {
+    const items = mention.flat()
+    if (items.length === 0) return
+    const active = mention.active()
+    selectMention(items.find((item) => item.path === active) ?? items[0])
+  }
+
+  const submit = () => {
+    const v = local.value.trim()
+    if (!v) return
+    local.onSubmit(v)
+  }
+
+  onMount(() => {
+    if (local.autofocus === false) return
+    requestAnimationFrame(() => textareaRef?.focus())
+  })
+
+  return (
+    <div
+      {...rest}
+      data-component="line-comment-v2"
+      data-variant="editor"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <div data-slot="line-comment-v2-shell">
+        <div data-slot="line-comment-v2-field">
+          <div data-slot="line-comment-v2-label">{heading()}</div>
+          <textarea
+            ref={(el) => {
+              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)
+              syncMention()
+            }}
+            onClick={() => syncMention()}
+            onSelect={() => syncMention()}
+            onKeyDown={(e) => {
+              e.stopPropagation()
+              if (e.isComposing || e.keyCode === 229) return
+
+              if (mentionOpen()) {
+                if (e.key === "Escape") {
+                  e.preventDefault()
+                  closeMention()
+                  return
+                }
+
+                if (e.key === "Tab") {
+                  if (mention.flat().length === 0) return
+                  e.preventDefault()
+                  selectActiveMention()
+                  return
+                }
+
+                const nav = e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Enter"
+                const ctrlNav = e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && (e.key === "n" || e.key === "p")
+                if ((nav || ctrlNav) && mention.flat().length > 0) {
+                  mention.onKeyDown(e)
+                  e.preventDefault()
+                  return
+                }
+              }
+
+              if (e.key === "Escape") {
+                e.preventDefault()
+                e.currentTarget.blur()
+                local.onCancel()
+                return
+              }
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault()
+                submit()
+              }
+            }}
+          />
+          <Show when={mentionOpen() && mention.flat().length > 0}>
+            <div data-slot="line-comment-v2-mention-list">
+              <For each={mention.flat().slice(0, 10)}>
+                {(item) => {
+                  const directory = item.path.endsWith("/") ? item.path : pathDirectory(item.path)
+                  const name = item.path.endsWith("/") ? "" : pathFilename(item.path)
+                  return (
+                    <button
+                      type="button"
+                      data-slot="line-comment-v2-mention-item"
+                      data-active={mention.active() === item.path ? "" : undefined}
+                      onMouseDown={(event) => event.preventDefault()}
+                      onMouseEnter={() => mention.setActive(item.path)}
+                      onClick={() => selectMention(item)}
+                    >
+                      <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-4" />
+                      <div data-slot="line-comment-v2-mention-path">
+                        <span data-slot="line-comment-v2-mention-dir">{directory}</span>
+                        <Show when={name}>
+                          <span data-slot="line-comment-v2-mention-file">{name}</span>
+                        </Show>
+                      </div>
+                    </button>
+                  )
+                }}
+              </For>
+            </div>
+          </Show>
+        </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>
+  )
+}

package/src/v2/components/loader-v2.css

@@ -0,0 +1,32 @@
+[data-component="loader-v2"] {
+  --_duration: 900ms;
+  display: block;
+  flex-shrink: 0;
+  color: var(--v2-icon-icon-muted, #808080);
+  animation: loader-v2-spin var(--_duration) linear infinite;
+  transform-origin: center;
+}
+
+[data-component="loader-v2"] [data-slot="loader-v2-background"] {
+  stroke: currentColor;
+  opacity: 0.2;
+}
+
+[data-component="loader-v2"] [data-slot="loader-v2-progress"] {
+  stroke: currentColor;
+  stroke-linecap: round;
+  transform: rotate(-90deg);
+  transform-origin: center;
+}
+
+@keyframes loader-v2-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="loader-v2"] {
+    animation: none;
+  }
+}

package/src/v2/components/loader-v2.tsx

@@ -0,0 +1,31 @@
+import { splitProps, type ComponentProps } from "solid-js"
+import "./loader-v2.css"
+
+export function LoaderV2(props: ComponentProps<"svg">) {
+  const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
+  return (
+    <svg
+      {...rest}
+      class={local.class}
+      classList={local.classList}
+      width={local.width ?? 16}
+      height={local.height ?? 16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      data-component="loader-v2"
+      aria-hidden={rest["aria-hidden"] ?? "true"}
+    >
+      <circle cx="8" cy="8" r="6" data-slot="loader-v2-background" stroke-width="2" />
+      <circle
+        cx="8"
+        cy="8"
+        r="6"
+        data-slot="loader-v2-progress"
+        pathLength="100"
+        stroke-width="2"
+        stroke-dasharray="33 67"
+      />
+    </svg>
+  )
+}