@opencode/ui 0.0.0-reserved → 2.0.1

package/src/data-display/line-comment/line-comment.tsx

@@ -0,0 +1,308 @@
+import { For, Show, createSignal, onMount, splitProps, type ComponentProps, type JSX } from "solid-js"
+import { FileIcon } from "@opencode/ui/file-icon"
+import { useI18n } from "../../context/i18n"
+import { useFilteredList } from "../../hooks"
+import { Button } from "@opencode/ui/button"
+import "./line-comment.css"
+
+/** Horizontal “more” glyph for the display-card overflow control (Figma outline-dots). */
+export function LineCommentOverflowIcon(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 LineCommentProps 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 `LineCommentOverflowIcon` inside `line-comment-v2-overflow`. */
+  actions?: JSX.Element
+}
+
+export function LineComment(props: LineCommentProps) {
+  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 LineCommentEditorMention = {
+  items: (query: string) => string[] | Promise<string[]>
+}
+
+export interface LineCommentEditorProps 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?: LineCommentEditorMention
+}
+
+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 LineCommentEditor(props: LineCommentEditorProps) {
+  const i18n = useI18n()
+  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 ?? i18n.t("ui.lineComment.submit")
+  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"
+            dir="auto"
+            rows={local.rows ?? 3}
+            placeholder={local.placeholder ?? i18n.t("ui.lineComment.contextPlaceholder")}
+            value={local.value}
+            style={{ "unicode-bidi": "plaintext", "text-align": "start" }}
+            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">
+            <Button type="button" size="normal" variant="ghost" onClick={() => local.onCancel()}>
+              {local.cancelLabel ?? i18n.t("ui.lineComment.cancel")}
+            </Button>
+            <Button type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>
+              {local.submitLabel ?? i18n.t("ui.lineComment.submit")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/data-display/project-avatar/project-avatar.css

@@ -0,0 +1,132 @@
+[data-component="project-avatar-v2"] {
+  position: relative;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+[data-component="project-avatar-v2"][data-unread] {
+  overflow: visible;
+}
+
+[data-slot="project-avatar-surface"] {
+  --project-avatar-bg: var(--v2-avatar-bg-gray);
+  --project-avatar-border: var(--v2-avatar-border-gray);
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 4px;
+  background:
+    linear-gradient(180deg, var(--v2-alpha-light-16) 0%, var(--v2-alpha-light-0) 100%), var(--project-avatar-bg);
+  box-shadow: inset 0 0 0 0.5px var(--project-avatar-border);
+  font-weight: 530;
+  font-size: 11px;
+  line-height: 1;
+  letter-spacing: 0.05px;
+  font-variant-numeric: tabular-nums;
+  text-transform: uppercase;
+  color: var(--v2-avatar-fg);
+  text-shadow: 0 0 4px var(--v2-alpha-dark-20);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+[data-slot="project-avatar-surface"][data-variant="orange"] {
+  --project-avatar-bg: var(--v2-avatar-bg-orange);
+  --project-avatar-border: var(--v2-avatar-border-orange);
+}
+
+[data-slot="project-avatar-surface"][data-variant="yellow"] {
+  --project-avatar-bg: var(--v2-avatar-bg-yellow);
+  --project-avatar-border: var(--v2-avatar-border-yellow);
+}
+
+[data-slot="project-avatar-surface"][data-variant="cyan"] {
+  --project-avatar-bg: var(--v2-avatar-bg-cyan);
+  --project-avatar-border: var(--v2-avatar-border-cyan);
+}
+
+[data-slot="project-avatar-surface"][data-variant="green"] {
+  --project-avatar-bg: var(--v2-avatar-bg-green);
+  --project-avatar-border: var(--v2-avatar-border-green);
+}
+
+[data-slot="project-avatar-surface"][data-variant="red"] {
+  --project-avatar-bg: var(--v2-avatar-bg-red);
+  --project-avatar-border: var(--v2-avatar-border-red);
+}
+
+[data-slot="project-avatar-surface"][data-variant="pink"] {
+  --project-avatar-bg: var(--v2-avatar-bg-pink);
+  --project-avatar-border: var(--v2-avatar-border-pink);
+}
+
+[data-slot="project-avatar-surface"][data-variant="blue"] {
+  --project-avatar-bg: var(--v2-avatar-bg-blue);
+  --project-avatar-border: var(--v2-avatar-border-blue);
+}
+
+[data-slot="project-avatar-surface"][data-variant="purple"] {
+  --project-avatar-bg: var(--v2-avatar-bg-purple);
+  --project-avatar-border: var(--v2-avatar-border-purple);
+}
+
+[data-slot="project-avatar-surface"][data-variant="gray"] {
+  --project-avatar-bg: var(--v2-avatar-bg-gray);
+  --project-avatar-border: var(--v2-avatar-border-gray);
+}
+
+[data-slot="project-avatar-surface"][data-variant="outline"] {
+  --project-avatar-bg: var(--v2-background-bg-base);
+  --project-avatar-border: var(--v2-border-border-strong);
+  color: var(--v2-text-text-muted);
+  text-shadow: none;
+}
+
+[data-slot="project-avatar-surface"][data-has-image] {
+  background: var(--project-avatar-bg);
+}
+
+[data-slot="project-avatar-surface"] [data-slot="project-avatar-image"] {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+}
+
+[data-component="project-avatar-v2"][data-unread] [data-slot="project-avatar-surface"] {
+  -webkit-mask-image: radial-gradient(circle 4.5px at 100% 0, transparent 4px, black 5px);
+  mask-image: radial-gradient(circle 4.5px at 100% 0, transparent 4px, black 5px);
+}
+
+[data-slot="project-avatar-unread-dot"] {
+  position: absolute;
+  z-index: 3;
+  width: 6px;
+  height: 6px;
+  right: -3px;
+  top: -3px;
+  border-radius: 9999px;
+  background: var(--v2-background-bg-accent);
+  pointer-events: none;
+}
+
+[data-slot="project-avatar-slot"] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  overflow: visible;
+}

package/src/data-display/project-avatar/project-avatar.tsx

@@ -0,0 +1,66 @@
+import { type ComponentProps, splitProps, Show } from "solid-js"
+import "./project-avatar.css"
+
+const segmenter =
+  typeof Intl !== "undefined" && "Segmenter" in Intl
+    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
+    : undefined
+
+function first(value: string) {
+  if (!value) return ""
+  if (!segmenter) return Array.from(value)[0] ?? ""
+  return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
+}
+
+export const PROJECT_AVATAR_VARIANTS = [
+  "orange",
+  "yellow",
+  "cyan",
+  "green",
+  "red",
+  "pink",
+  "blue",
+  "purple",
+  "gray",
+] as const
+
+export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number]
+
+// "outline" is a neutral, muted style (e.g. recently closed projects) and is not part of the color rotation.
+export type ProjectAvatarStyle = ProjectAvatarVariant | "outline"
+
+export interface ProjectAvatarProps extends ComponentProps<"div"> {
+  fallback: string
+  src?: string
+  variant?: ProjectAvatarStyle
+  unread?: boolean
+}
+
+export function ProjectAvatar(props: ProjectAvatarProps) {
+  const [split, rest] = splitProps(props, ["fallback", "src", "variant", "unread", "class", "classList", "style"])
+  return (
+    <div
+      {...rest}
+      data-component="project-avatar-v2"
+      data-unread={split.unread ? "" : undefined}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      style={typeof split.style === "object" ? split.style : undefined}
+    >
+      <div
+        data-slot="project-avatar-surface"
+        data-variant={split.variant ?? "gray"}
+        data-has-image={split.src ? "" : undefined}
+      >
+        <Show when={split.src} fallback={first(split.fallback)}>
+          {(value) => <img src={value()} draggable={false} data-slot="project-avatar-image" />}
+        </Show>
+      </div>
+      <Show when={split.unread}>
+        <span data-slot="project-avatar-unread-dot" aria-hidden="true" />
+      </Show>
+    </div>
+  )
+}

package/src/feedback/loader/loader.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/feedback/loader/loader.tsx

@@ -0,0 +1,31 @@
+import { splitProps, type ComponentProps } from "solid-js"
+import "./loader.css"
+
+export function Loader(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>
+  )
+}

package/src/feedback/progress-circle/progress-circle.css

@@ -0,0 +1,28 @@
+[data-component="progress-circle"] {
+  display: block;
+  transform: rotate(-90deg);
+}
+
+[data-component="progress-circle"][data-appearance="compact"] [data-slot="progress-circle-background"] {
+  stroke: var(--v2-background-bg-layer-04);
+}
+
+[data-component="progress-circle"][data-appearance="compact"] [data-slot="progress-circle-progress"] {
+  stroke: var(--v2-icon-icon-base);
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-background"] {
+  stroke: var(--progress-circle-background, var(--border-weak-base));
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-background-overlay"] {
+  stroke: var(--progress-circle-background-overlay, transparent);
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-progress"] {
+  stroke: var(--progress-circle-progress, var(--border-active));
+}
+
+[data-component="progress-circle"] [data-slot="progress-circle-progress"] {
+  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
+}

package/src/feedback/progress-circle/progress-circle.tsx

@@ -0,0 +1,64 @@
+import { type ComponentProps, createMemo, Show, splitProps } from "solid-js"
+import "./progress-circle.css"
+
+export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList" | "style"> {
+  percentage: number
+  appearance?: "compact" | "indicator"
+  size?: number
+  strokeWidth?: number
+}
+
+export function ProgressCircle(props: ProgressCircleProps) {
+  const [local, rest] = splitProps(props, ["percentage", "appearance", "size", "strokeWidth", "class", "classList"])
+
+  const appearance = () => local.appearance ?? "compact"
+  const viewBoxSize = () => (appearance() === "indicator" ? 16 : 14)
+  const size = () => local.size ?? viewBoxSize()
+  const strokeWidth = () => local.strokeWidth ?? (appearance() === "indicator" ? 3 : 1.5)
+  const center = () => viewBoxSize() / 2
+  const radius = () => center() - strokeWidth() / 2
+  const circumference = createMemo(() => 2 * Math.PI * radius())
+  const offset = createMemo(() => circumference() * (1 - Math.max(0, Math.min(100, local.percentage || 0)) / 100))
+
+  return (
+    <svg
+      {...rest}
+      width={size()}
+      height={size()}
+      viewBox={`0 0 ${viewBoxSize()} ${viewBoxSize()}`}
+      fill="none"
+      data-component="progress-circle"
+      data-appearance={appearance()}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <circle
+        cx={center()}
+        cy={center()}
+        r={radius()}
+        data-slot="progress-circle-background"
+        stroke-width={strokeWidth()}
+      />
+      <Show when={appearance() === "indicator"}>
+        <circle
+          cx={center()}
+          cy={center()}
+          r={radius()}
+          data-slot="progress-circle-background-overlay"
+          stroke-width={strokeWidth()}
+        />
+      </Show>
+      <circle
+        cx={center()}
+        cy={center()}
+        r={radius()}
+        data-slot="progress-circle-progress"
+        stroke-width={strokeWidth()}
+        stroke-dasharray={circumference().toString()}
+        stroke-dashoffset={offset()}
+      />
+    </svg>
+  )
+}