@opencode-ai/ui 0.0.0-dev-202608201855 → 0.0.0-dev-17751

package/src/components/avatar.tsx

@@ -1,55 +0,0 @@
-import { type ComponentProps, splitProps, Show } from "solid-js"
-
-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"
-}
-
-export function Avatar(props: AvatarProps) {
-  const [split, rest] = splitProps(props, [
-    "fallback",
-    "src",
-    "background",
-    "foreground",
-    "size",
-    "class",
-    "classList",
-    "style",
-  ])
-  const src = split.src // did this so i can zero it out to test fallback
-  return (
-    <div
-      {...rest}
-      data-component="avatar"
-      data-size={split.size || "normal"}
-      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/components/button.css

@@ -1,194 +0,0 @@
-[data-component="button"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: var(--radius-md);
-  text-decoration: none;
-  user-select: none;
-  cursor: default;
-  outline: none;
-  white-space: nowrap;
-
-  &[data-variant="primary"] {
-    background-color: var(--button-primary-base);
-    border-color: var(--border-weak-base);
-    color: var(--icon-invert-base);
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-invert-base);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--icon-strong-hover);
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--icon-strong-focus);
-    }
-    &:active:not(:disabled) {
-      background-color: var(--icon-strong-active);
-    }
-    &:disabled {
-      background-color: var(--icon-strong-disabled);
-
-      [data-slot="icon-svg"] {
-        color: var(--icon-invert-base);
-      }
-    }
-  }
-
-  &[data-variant="ghost"] {
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--text-strong);
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-base);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--surface-base-hover);
-    }
-    &:focus-visible:not(:disabled) {
-      background-color: var(--surface-base-hover);
-    }
-    &:active:not(:disabled) {
-      background-color: var(--surface-base-active);
-    }
-    &:disabled {
-      color: var(--text-weak);
-      cursor: not-allowed;
-
-      [data-slot="icon-svg"] {
-        color: var(--icon-disabled);
-      }
-    }
-    &[data-selected="true"]:not(:disabled) {
-      background-color: var(--surface-base-hover);
-    }
-    &[data-active="true"] {
-      background-color: var(--surface-base-active);
-    }
-  }
-
-  &[data-variant="secondary"] {
-    border: transparent;
-    background-color: var(--button-secondary-base);
-    color: var(--text-strong);
-    box-shadow: var(--shadow-xs-border-base);
-
-    &:hover:not(:disabled) {
-      background-color: var(--button-secondary-hover);
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--button-secondary-base);
-    }
-    &:focus-visible:not(:active) {
-      background-color: var(--button-secondary-base);
-      box-shadow: var(--shadow-xs-border-focus);
-    }
-    &:focus-visible:active {
-      box-shadow: none;
-    }
-    &:active:not(:disabled) {
-      background-color: var(--button-secondary-base);
-    }
-    &:disabled {
-      border-color: var(--border-disabled);
-      background-color: var(--surface-disabled);
-      color: var(--text-weak);
-      cursor: not-allowed;
-    }
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-base);
-    }
-  }
-
-  &[data-size="small"] {
-    height: 24px;
-    padding: 0 8px;
-    &[data-icon] {
-      padding: 0 12px 0 4px;
-    }
-
-    font-size: var(--font-size-small);
-    line-height: var(--line-height-large);
-    gap: 8px;
-
-    /* text-12-medium */
-    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); /* 166.667% */
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &[data-size="normal"] {
-    height: 28px;
-    line-height: 28px;
-    padding: 0 6px;
-    &[data-icon] {
-      padding: 0 12px 0 4px;
-    }
-
-    font-size: var(--font-size-small);
-    gap: 8px;
-
-    /* text-12-medium */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &[data-size="large"] {
-    height: 32px;
-    padding: 6px 12px;
-
-    &[data-icon] {
-      padding: 0 12px 0 8px;
-    }
-
-    gap: 8px;
-
-    /* text-14-medium */
-    font-family: var(--font-family-sans);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 142.857% */
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] {
-  background-color: var(--surface-base-active);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] [data-slot="icon-svg"] {
-  color: var(--icon-strong-base);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"]:hover:not(:disabled) {
-  background-color: var(--surface-base-active);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"] {
-  background-color: var(--surface-base-active);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"] [data-slot="icon-svg"] {
-  color: var(--icon-strong-base);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"]:hover:not(:disabled) {
-  background-color: var(--surface-base-active);
-}

package/src/components/button.tsx

@@ -1,33 +0,0 @@
-import { Button as Kobalte } from "@kobalte/core/button"
-import { type ComponentProps, Show, splitProps } from "solid-js"
-import { Icon, IconProps } from "./icon"
-
-export interface ButtonProps
-  extends ComponentProps<typeof Kobalte>,
-    Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
-  size?: "small" | "normal" | "large"
-  variant?: "primary" | "secondary" | "ghost"
-  icon?: IconProps["name"]
-}
-
-export function Button(props: ButtonProps) {
-  const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
-  return (
-    <Kobalte
-      {...rest}
-      data-component="button"
-      data-size={split.size || "normal"}
-      data-variant={split.variant || "secondary"}
-      data-icon={split.icon}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      <Show when={split.icon}>
-        <Icon name={split.icon!} size="small" />
-      </Show>
-      {props.children}
-    </Kobalte>
-  )
-}

package/src/components/dialog.css

@@ -1,181 +0,0 @@
-/* [data-component="dialog-trigger"] { } */
-
-[data-component="dialog-overlay"] {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background-color: hsl(from var(--background-base) h s l / 0.2);
-}
-
-[data-component="dialog"] {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-
-  [data-slot="dialog-container"] {
-    position: relative;
-    z-index: 50;
-    width: min(calc(100vw - 16px), 640px);
-    height: min(calc(100vh - 16px), 512px);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-items: start;
-    overflow: visible;
-
-    [data-slot="dialog-content"] {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      align-self: stretch;
-      width: 100%;
-      max-height: 100%;
-      min-height: 280px;
-      overflow: auto;
-      pointer-events: auto;
-
-      /* Hide scrollbar */
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      /* padding: 8px; */
-      /* padding: 8px 8px 0 8px; */
-      border-radius: var(--radius-xl);
-      background: var(--surface-raised-stronger-non-alpha);
-      background-clip: padding-box;
-      box-shadow: var(--shadow-lg-border-base);
-
-      [data-slot="dialog-header"] {
-        display: flex;
-        padding: 16px 20px;
-        justify-content: space-between;
-        align-items: center;
-        flex-shrink: 0;
-        align-self: stretch;
-
-        [data-slot="dialog-title"] {
-          color: var(--text-strong);
-
-          /* text-16-medium */
-          font-family: var(--font-family-sans);
-          font-size: var(--font-size-large);
-          font-style: normal;
-          font-weight: var(--font-weight-medium);
-          line-height: var(--line-height-x-large); /* 150% */
-          letter-spacing: var(--letter-spacing-tight);
-        }
-        /* [data-slot="dialog-close-button"] {} */
-      }
-
-      [data-slot="dialog-description"] {
-        display: flex;
-        padding: 16px;
-        padding-left: 24px;
-        padding-top: 0;
-        margin-top: -8px;
-        justify-content: space-between;
-        align-items: center;
-        flex-shrink: 0;
-        align-self: stretch;
-
-        color: var(--text-base);
-
-        /* text-14-regular */
-        font-family: var(--font-family-sans);
-        font-size: 14px;
-        font-style: normal;
-        font-weight: var(--font-weight-regular);
-        line-height: var(--line-height-large); /* 142.857% */
-        letter-spacing: var(--letter-spacing-normal);
-      }
-
-      [data-slot="dialog-body"] {
-        width: 100%;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        overflow: hidden;
-
-        &:focus-visible {
-          outline: none;
-        }
-      }
-      &:focus-visible {
-        outline: none;
-      }
-    }
-  }
-
-  &[data-fit] {
-    [data-slot="dialog-container"] {
-      height: auto;
-
-      [data-slot="dialog-content"] {
-        min-height: 0;
-      }
-    }
-  }
-
-  &[data-size="large"] [data-slot="dialog-container"] {
-    width: min(calc(100vw - 32px), 800px);
-    height: min(calc(100vh - 32px), 600px);
-  }
-
-  &[data-size="x-large"] [data-slot="dialog-container"] {
-    width: min(calc(100vw - 32px), 980px);
-    height: min(calc(100vh - 92px), 600px);
-  }
-}
-
-[data-component="dialog"][data-transition] [data-slot="dialog-content"] {
-  animation: contentHide 100ms ease-in forwards;
-
-  &[data-expanded] {
-    animation: contentShow 150ms ease-out;
-  }
-}
-
-@keyframes overlayShow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes overlayHide {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes contentShow {
-  from {
-    opacity: 0;
-    transform: scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes contentHide {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.98);
-  }
-}

package/src/components/dialog.tsx

@@ -1,72 +0,0 @@
-import { Dialog as Kobalte } from "@kobalte/core/dialog"
-import { ComponentProps, JSXElement, Match, ParentProps, Show, Switch } from "solid-js"
-import { useI18n } from "../context/i18n"
-import { IconButton } from "./icon-button"
-
-export interface DialogProps extends ParentProps {
-  title?: JSXElement
-  description?: JSXElement
-  action?: JSXElement
-  size?: "normal" | "large" | "x-large"
-  class?: ComponentProps<"div">["class"]
-  classList?: ComponentProps<"div">["classList"]
-  fit?: boolean
-  transition?: boolean
-}
-
-export function Dialog(props: DialogProps) {
-  const i18n = useI18n()
-  return (
-    <div
-      data-component="dialog"
-      data-fit={props.fit ? true : undefined}
-      data-size={props.size || "normal"}
-      data-transition={props.transition ? true : undefined}
-    >
-      <div data-slot="dialog-container">
-        <Kobalte.Content
-          data-slot="dialog-content"
-          data-no-header={!props.title && !props.action ? "" : undefined}
-          classList={{
-            ...props.classList,
-            [props.class ?? ""]: !!props.class,
-          }}
-          onOpenAutoFocus={(e) => {
-            const target = e.currentTarget as HTMLElement | null
-            const autofocusEl = target?.querySelector("[autofocus]") as HTMLElement | null
-            if (autofocusEl) {
-              e.preventDefault()
-              autofocusEl.focus()
-            }
-          }}
-        >
-          <Show when={props.title || props.action}>
-            <div data-slot="dialog-header">
-              <Show when={props.title}>
-                <Kobalte.Title data-slot="dialog-title">{props.title}</Kobalte.Title>
-              </Show>
-              <Switch>
-                <Match when={props.action}>{props.action}</Match>
-                <Match when={true}>
-                  <Kobalte.CloseButton
-                    data-slot="dialog-close-button"
-                    as={IconButton}
-                    icon="close"
-                    variant="ghost"
-                    aria-label={i18n.t("ui.common.close")}
-                  />
-                </Match>
-              </Switch>
-            </div>
-          </Show>
-          <Show when={props.description}>
-            <Kobalte.Description data-slot="dialog-description" style={{ "margin-left": "-4px" }}>
-              {props.description}
-            </Kobalte.Description>
-          </Show>
-          <div data-slot="dialog-body">{props.children}</div>
-        </Kobalte.Content>
-      </div>
-    </div>
-  )
-}

package/src/components/diff-changes.tsx

@@ -1,115 +0,0 @@
-import { createMemo, For, Match, Show, Switch } from "solid-js"
-
-export function DiffChanges(props: {
-  class?: string
-  changes: { additions: number; deletions: number } | { additions: number; deletions: number }[]
-  variant?: "default" | "bars"
-}) {
-  const variant = () => props.variant ?? "default"
-
-  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))
-
-  const blockCounts = createMemo(() => {
-    const TOTAL_BLOCKS = 5
-
-    const adds = additions() ?? 0
-    const dels = deletions() ?? 0
-
-    if (adds === 0 && dels === 0) {
-      return { added: 0, deleted: 0, neutral: TOTAL_BLOCKS }
-    }
-
-    const total = adds + dels
-
-    if (total < 5) {
-      const added = adds > 0 ? 1 : 0
-      const deleted = dels > 0 ? 1 : 0
-      const neutral = TOTAL_BLOCKS - added - deleted
-      return { added, deleted, neutral }
-    }
-
-    const ratio = adds > dels ? adds / dels : dels / adds
-    let BLOCKS_FOR_COLORS = TOTAL_BLOCKS
-
-    if (total < 20) {
-      BLOCKS_FOR_COLORS = TOTAL_BLOCKS - 1
-    } else if (ratio < 4) {
-      BLOCKS_FOR_COLORS = TOTAL_BLOCKS - 1
-    }
-
-    const percentAdded = adds / total
-    const percentDeleted = dels / total
-
-    const added_raw = percentAdded * BLOCKS_FOR_COLORS
-    const deleted_raw = percentDeleted * BLOCKS_FOR_COLORS
-
-    let added = adds > 0 ? Math.max(1, Math.round(added_raw)) : 0
-    let deleted = dels > 0 ? Math.max(1, Math.round(deleted_raw)) : 0
-
-    // Cap bars based on actual change magnitude
-    if (adds > 0 && adds <= 5) added = Math.min(added, 1)
-    if (adds > 5 && adds <= 10) added = Math.min(added, 2)
-    if (dels > 0 && dels <= 5) deleted = Math.min(deleted, 1)
-    if (dels > 5 && dels <= 10) deleted = Math.min(deleted, 2)
-
-    let total_allocated = added + deleted
-    if (total_allocated > BLOCKS_FOR_COLORS) {
-      if (added_raw > deleted_raw) {
-        added = BLOCKS_FOR_COLORS - deleted
-      } else {
-        deleted = BLOCKS_FOR_COLORS - added
-      }
-      total_allocated = added + deleted
-    }
-
-    const neutral = Math.max(0, TOTAL_BLOCKS - total_allocated)
-
-    return { added, deleted, neutral }
-  })
-
-  const ADD_COLOR = "var(--icon-diff-add-base)"
-  const DELETE_COLOR = "var(--icon-diff-delete-base)"
-  const NEUTRAL_COLOR = "var(--icon-weak-base)"
-
-  const visibleBlocks = createMemo(() => {
-    const counts = blockCounts()
-    const blocks = [
-      ...Array(counts.added).fill(ADD_COLOR),
-      ...Array(counts.deleted).fill(DELETE_COLOR),
-      ...Array(counts.neutral).fill(NEUTRAL_COLOR),
-    ]
-    return blocks.slice(0, 5)
-  })
-
-  return (
-    <Show when={variant() === "default" ? total() > 0 : true}>
-      <div data-component="diff-changes" data-variant={variant()} classList={{ [props.class ?? ""]: true }}>
-        <Switch>
-          <Match when={variant() === "bars"}>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 14" fill="none">
-              <g>
-                <For each={visibleBlocks()}>
-                  {(color, i) => <rect x={i() * 4} width="2" height="14" rx="1" fill={color} />}
-                </For>
-              </g>
-            </svg>
-          </Match>
-          <Match when={variant() === "default"}>
-            <span data-slot="diff-changes-additions">{`+${additions()}`}</span>
-            <span data-slot="diff-changes-deletions">{`-${deletions()}`}</span>
-          </Match>
-        </Switch>
-      </div>
-    </Show>
-  )
-}