@opencode-ai/ui 0.0.0 → 1.17.13

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

@@ -0,0 +1,76 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="keybind-v2"] {
+  box-sizing: border-box;
+  font-variant-numeric: tabular-nums;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+[data-component="keybind-v2"] *,
+[data-component="keybind-v2"] *::before,
+[data-component="keybind-v2"] *::after {
+  box-sizing: border-box;
+}
+
+[data-component="keybind-v2"] [data-slot="keybind-v2-key"] {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  gap: 4px;
+  min-width: 14px;
+  height: 14px;
+  border-radius: 2px;
+  flex: none;
+  flex-grow: 0;
+}
+
+[data-component="keybind-v2"][data-variant="neutral"] [data-slot="keybind-v2-key"] {
+  background: var(--v2-background-bg-layer-03);
+}
+
+[data-component="keybind-v2"][data-variant="ghost"] [data-slot="keybind-v2-key"] {
+  background: transparent;
+}
+
+[data-component="keybind-v2"] [data-slot="keybind-v2-label"] {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  min-width: 14px;
+  height: 11px;
+  padding: 0;
+  flex: none;
+  font-style: normal;
+  font-weight: 530;
+  font-size: 11px;
+  line-height: 1;
+  text-align: center;
+  letter-spacing: 0.05px;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings:
+    "tnum" on,
+    "lnum" on;
+  font-variation-settings: "slnt" 0;
+  user-select: none;
+}
+
+[data-component="keybind-v2"][data-variant="neutral"] [data-slot="keybind-v2-label"] {
+  color: var(--v2-text-text-muted);
+}
+
+[data-component="keybind-v2"][data-variant="ghost"] [data-slot="keybind-v2-label"] {
+  color: var(--v2-text-text-faint);
+}

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

@@ -0,0 +1,30 @@
+import { type ComponentProps, For, splitProps } from "solid-js"
+import "./keybind-v2.css"
+
+export interface KeybindV2Props extends ComponentProps<"div"> {
+  keys: string[]
+  variant?: "neutral" | "ghost"
+}
+
+export function KeybindV2(props: KeybindV2Props) {
+  const [local, rest] = splitProps(props, ["keys", "variant", "class", "classList"])
+  return (
+    <div
+      {...rest}
+      data-component="keybind-v2"
+      data-variant={local.variant || "neutral"}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <For each={local.keys}>
+        {(key) => (
+          <div data-slot="keybind-v2-key">
+            <span data-slot="keybind-v2-label">{key}</span>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}

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

@@ -0,0 +1,204 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="line-comment-v2"] {
+  box-sizing: border-box;
+  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;
+}

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

@@ -0,0 +1,155 @@
+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 (
+    <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 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
+}
+
+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 (
+    <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)}
+            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>
+  )
+}

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>
+  )
+}