@opencode/ui 0.0.0-reserved → 2.0.1

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

@@ -0,0 +1,70 @@
+[data-component="avatar-v2"] {
+  --avatar-bg: var(--v2-background-bg-layer-02);
+  --avatar-fg: var(--v2-text-text-muted);
+  --avatar-radius: 9999px;
+  --avatar-font-size: 11px;
+  --avatar-tracking: 0.05px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--avatar-radius);
+  border: 0.5px solid var(--v2-border-border-base);
+  font-weight: 530;
+  font-size: var(--avatar-font-size);
+  line-height: 1;
+  letter-spacing: var(--avatar-tracking);
+  text-transform: uppercase;
+  background-color: var(--avatar-bg);
+  color: var(--avatar-fg);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+[data-component="avatar-v2"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, var(--v2-alpha-light-16) 0%, var(--v2-alpha-light-0) 100%);
+  pointer-events: none;
+}
+
+[data-component="avatar-v2"][data-has-image]::before {
+  display: none;
+}
+
+[data-component="avatar-v2"][data-kind="org"] {
+  --avatar-radius: 6px;
+}
+
+[data-component="avatar-v2"][data-kind="org"][data-size="normal"],
+[data-component="avatar-v2"][data-kind="org"][data-size="small"] {
+  --avatar-radius: 4px;
+}
+
+[data-component="avatar-v2"][data-size="normal"] {
+  width: 20px;
+  height: 20px;
+}
+
+[data-component="avatar-v2"][data-size="small"] {
+  width: 16px;
+  height: 16px;
+}
+
+[data-component="avatar-v2"] [data-slot="avatar-image"] {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  border-radius: inherit;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+}

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

@@ -0,0 +1,59 @@
+import { type ComponentProps, splitProps, Show } from "solid-js"
+import "./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 interface AvatarProps extends ComponentProps<"div"> {
+  fallback: string
+  src?: string
+  background?: string
+  foreground?: string
+  size?: "small" | "normal" | "large"
+  kind?: "user" | "org"
+}
+
+export function Avatar(props: AvatarProps) {
+  const [split, rest] = splitProps(props, [
+    "fallback",
+    "src",
+    "background",
+    "foreground",
+    "size",
+    "kind",
+    "class",
+    "classList",
+    "style",
+  ])
+  const src = split.src // did this so i can zero it out to test fallback
+  return (
+    <div
+      {...rest}
+      data-component="avatar-v2"
+      data-size={split.size || "large"}
+      data-kind={split.kind || "user"}
+      data-has-image={src ? "" : undefined}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      style={{
+        ...(typeof split.style === "object" ? split.style : {}),
+        ...(!src && split.background ? { "--avatar-bg": split.background } : {}),
+        ...(!src && split.foreground ? { "--avatar-fg": split.foreground } : {}),
+      }}
+    >
+      <Show when={src} fallback={first(split.fallback)}>
+        {(src) => <img src={src()} draggable={false} data-slot="avatar-image" />}
+      </Show>
+    </div>
+  )
+}

package/src/data-display/badge/badge.css

@@ -0,0 +1,52 @@
+[data-component="tag"] {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 16px;
+  padding: 0 4px;
+  user-select: none;
+
+  border-radius: 2px;
+  border: 0.5px solid var(--v2-border-border-base);
+  background: var(--v2-background-bg-layer-02);
+
+  font-style: normal;
+  font-weight: 530;
+  font-size: 11px;
+  line-height: 1;
+  letter-spacing: 0.05px;
+  color: var(--v2-text-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+[data-component="tag"][data-high-contrast] {
+  border-color: var(--v2-border-border-strong);
+}
+
+[data-component="tag"][data-variant="accent"] {
+  border: 0;
+  background: var(--v2-background-bg-accent);
+  color: var(--v2-text-text-contrast);
+}
+
+[data-component="tag"][data-appearance="standard"] {
+  height: 18px;
+  padding: 0 6px;
+  border-radius: var(--radius-xs);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large);
+  letter-spacing: var(--letter-spacing-normal);
+  font-variant-numeric: normal;
+}
+
+[data-component="tag"][data-appearance="standard"][data-variant="neutral"] {
+  border: 0.5px solid var(--border-weak-base);
+  background: var(--surface-raised-base);
+  color: var(--text-base);
+}

package/src/data-display/badge/badge.tsx

@@ -0,0 +1,25 @@
+import { type ComponentProps, splitProps } from "solid-js"
+import "./badge.css"
+
+export interface BadgeProps extends ComponentProps<"span"> {
+  appearance?: "standard" | "compact"
+  variant?: "neutral" | "accent"
+}
+
+export function Badge(props: BadgeProps) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children", "appearance", "variant"])
+  return (
+    <span
+      {...rest}
+      data-component="tag"
+      data-appearance={split.appearance ?? "compact"}
+      data-variant={split.variant ?? "neutral"}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </span>
+  )
+}

package/src/data-display/diff-changes/diff-changes.css

@@ -0,0 +1,47 @@
+[data-component="diff-changes"] {
+  display: flex;
+  direction: ltr;
+  unicode-bidi: isolate;
+  gap: 8px;
+  justify-content: flex-end;
+  align-items: center;
+
+  [data-slot="diff-changes-additions"],
+  [data-slot="diff-changes-deletions"] {
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: 0.05px;
+    text-align: right;
+  }
+
+  [data-slot="diff-changes-additions"] {
+    color: var(--v2-state-fg-success);
+  }
+
+  [data-slot="diff-changes-deletions"] {
+    color: var(--v2-state-fg-danger);
+  }
+}
+
+[data-component="diff-changes"][data-appearance="standard"] {
+  [data-slot="diff-changes-additions"],
+  [data-slot="diff-changes-deletions"] {
+    font-family: var(--font-family-mono);
+    font-feature-settings: var(--font-family-mono--font-feature-settings);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="diff-changes-additions"] {
+    color: var(--text-diff-add-base);
+  }
+
+  [data-slot="diff-changes-deletions"] {
+    color: var(--text-diff-delete-base);
+  }
+}

package/src/data-display/diff-changes/diff-changes.tsx

@@ -0,0 +1,33 @@
+import { createMemo, Show } from "solid-js"
+import "./diff-changes.css"
+
+export function DiffChanges(props: {
+  class?: string
+  appearance?: "standard" | "compact"
+  changes: { additions: number; deletions: number } | { additions: number; deletions: number }[]
+}) {
+  const additions = createMemo(() =>
+    Array.isArray(props.changes)
+      ? props.changes.reduce((acc, diff) => acc + (diff.additions ?? 0), 0)
+      : props.changes.additions,
+  )
+  const deletions = createMemo(() =>
+    Array.isArray(props.changes)
+      ? props.changes.reduce((acc, diff) => acc + (diff.deletions ?? 0), 0)
+      : props.changes.deletions,
+  )
+  const total = createMemo(() => (additions() ?? 0) + (deletions() ?? 0))
+
+  return (
+    <Show when={total() > 0}>
+      <div
+        data-component="diff-changes"
+        data-appearance={props.appearance ?? "compact"}
+        classList={{ [props.class ?? ""]: true }}
+      >
+        <span data-slot="diff-changes-additions">{`+${additions()}`}</span>
+        <span data-slot="diff-changes-deletions">{`-${deletions()}`}</span>
+      </div>
+    </Show>
+  )
+}

package/src/data-display/keybind/keybind.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;
+  padding-inline: 4px;
+  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;
+  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/data-display/keybind/keybind.tsx

@@ -0,0 +1,30 @@
+import { type ComponentProps, For, splitProps } from "solid-js"
+import "./keybind.css"
+
+export interface KeybindProps extends ComponentProps<"div"> {
+  keys: string[]
+  variant?: "neutral" | "ghost"
+}
+
+export function Keybind(props: KeybindProps) {
+  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/data-display/line-comment/line-comment.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: var(--line-height-compact);
+  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: var(--line-height-tight);
+  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"], [data-expanded]) {
+  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: var(--line-height-compact);
+  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: start;
+  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;
+}