@opencode-ai/ui 0.0.0-dev-17746 → 0.0.0-dev-202608201733

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

@@ -0,0 +1,184 @@
+[data-slot="checkbox-v2"] {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  cursor: default;
+
+  &:where([data-disabled]) {
+    cursor: not-allowed;
+  }
+
+  [data-slot="checkbox-v2-error"] {
+    color: var(--v2-state-fg-danger);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="checkbox-v2-error"]:empty {
+    display: none;
+  }
+}
+
+[data-slot="checkbox-v2-row"] {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 8px;
+
+  [data-slot="checkbox-v2-input"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  [data-slot="checkbox-v2-control-stack"] {
+    position: relative;
+    width: 16px;
+    height: 20px;
+    flex: none;
+  }
+
+  [data-slot="checkbox-v2-control"] {
+    box-sizing: border-box;
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    flex: none;
+    flex-shrink: 0;
+    left: 0;
+    top: calc(50% - 16px / 2);
+    border-radius: 4px;
+    border: none;
+    box-shadow: inset 0 0 0 0.5px var(--v2-border-border-strong);
+
+    background:
+      linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+    transition:
+      background 170ms ease-out,
+      opacity 170ms ease-out,
+      outline-color 170ms ease-out;
+  }
+
+  [data-slot="checkbox-v2-indicator"] {
+    position: absolute;
+    inset: 0;
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+  }
+
+  [data-slot="checkbox-v2-text"] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0px;
+    gap: 6px;
+  }
+
+  [data-slot="checkbox-v2-label"] {
+    display: inline-flex;
+    user-select: none;
+    color: inherit;
+    font-style: normal;
+    font-weight: 440;
+    font-variant-numeric: tabular-nums;
+    font-variation-settings: "slnt" 0;
+  }
+
+  [data-slot="checkbox-v2-label-text"] {
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    color: var(--v2-text-text-base);
+    font-size: 13px;
+    line-height: 20px;
+    letter-spacing: -0.04px;
+  }
+
+  [data-slot="checkbox-v2-description"] {
+    color: var(--v2-text-text-muted);
+    font-size: 11px;
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: 0.05px;
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+  }
+}
+
+[data-slot="checkbox-v2"]:where(:not([data-readonly]))
+  [data-slot="checkbox-v2-input"]:focus-visible
+  ~ [data-slot="checkbox-v2-control-stack"]
+  [data-slot="checkbox-v2-control"] {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 1px;
+}
+
+[data-slot="checkbox-v2"]:where(:hover):where(:not([data-disabled], [data-readonly], [data-invalid])):where(
+    :not([data-checked], [data-indeterminate])
+  )
+  [data-slot="checkbox-v2-control"] {
+  background:
+    linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
+    linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+}
+
+[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-control"] {
+  opacity: 0.5;
+}
+
+[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]) [data-slot="checkbox-v2-control"] {
+  background:
+    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
+}
+
+[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]):where(:hover):where(
+    :not([data-disabled], [data-readonly])
+  )
+  [data-slot="checkbox-v2-control"] {
+  background:
+    linear-gradient(
+      0deg,
+      var(--v2-overlay-simple-overlay-contrast-hover),
+      var(--v2-overlay-simple-overlay-contrast-hover)
+    ),
+    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
+}
+
+[data-slot="checkbox-v2"]:where([data-invalid]):where(:not([data-checked], [data-indeterminate]))
+  [data-slot="checkbox-v2-control"] {
+  background: var(--v2-state-bg-danger);
+  box-shadow: inset 0 0 0 0.5px var(--v2-state-border-danger);
+}
+
+[data-slot="checkbox-v2"] .checkbox-v2-icon {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: none;
+}
+
+[data-slot="checkbox-v2"]:where([data-checked]):where(:not([data-indeterminate])) .checkbox-v2-icon--check {
+  display: block;
+}
+
+[data-slot="checkbox-v2"]:where([data-indeterminate]) .checkbox-v2-icon--minus {
+  display: block;
+}
+
+[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-label"],
+[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-description"] {
+  opacity: 0.5;
+}

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

@@ -0,0 +1,65 @@
+import { Checkbox as Kobalte } from "@kobalte/core/checkbox"
+import { Show, splitProps, type JSX } from "solid-js"
+import type { ComponentProps } from "solid-js"
+import "./checkbox-v2.css"
+
+export interface CheckboxV2Props extends ComponentProps<typeof Kobalte> {
+  label: JSX.Element
+  description?: JSX.Element
+  hideLabel?: boolean
+}
+
+export function CheckboxV2(props: CheckboxV2Props) {
+  const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
+  return (
+    <Kobalte
+      {...others}
+      data-slot="checkbox-v2"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <div data-slot="checkbox-v2-row">
+        <Kobalte.Input data-slot="checkbox-v2-input" />
+        <div data-slot="checkbox-v2-control-stack">
+          <Kobalte.Control data-slot="checkbox-v2-control">
+            <Kobalte.Indicator data-slot="checkbox-v2-indicator">
+              <svg
+                class="checkbox-v2-icon checkbox-v2-icon--check"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path d="M3.53564 8.17857L6.39279 11.75L12.4642 4.25" stroke="#FAFAFA" stroke-width="1" />
+              </svg>
+              <svg
+                class="checkbox-v2-icon checkbox-v2-icon--minus"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path d="M12.75 8H3.25" stroke="#FAFAFA" stroke-linejoin="round" stroke-width="1" />
+              </svg>
+            </Kobalte.Indicator>
+          </Kobalte.Control>
+        </div>
+        <Kobalte.Label data-slot="checkbox-v2-label" classList={{ "sr-only": local.hideLabel }}>
+          <div data-slot="checkbox-v2-text">
+            <span data-slot="checkbox-v2-label-text">{local.label}</span>
+            <Show when={local.description}>
+              {(description) => <span data-slot="checkbox-v2-description">{description()}</span>}
+            </Show>
+          </div>
+        </Kobalte.Label>
+      </div>
+      <Kobalte.ErrorMessage data-slot="checkbox-v2-error" />
+    </Kobalte>
+  )
+}

package/src/{overlays/dialog/dialog.css → v2/components/dialog-v2.css}

@@ -93,9 +93,6 @@
         [data-slot="dialog-description"] {
           flex: none;
           flex-grow: 0;
-          min-width: 0;
-          max-width: 100%;
-          overflow-wrap: anywhere;
           user-select: none;
           font-weight: 440;
           font-size: 13px;

package/src/{overlays/dialog/dialog.tsx → v2/components/dialog-v2.tsx}

@@ -1,7 +1,7 @@
-import { CloseButton, Content, Description, Title } from "@kobalte/core/dialog"
+import { Dialog as Kobalte } from "@kobalte/core/dialog"
 import { type ComponentProps, type JSXElement, type ParentProps, Show, children, splitProps } from "solid-js"
 import { useI18n } from "../../context/i18n"
-import "./dialog.css"
+import "./dialog-v2.css"
 
 export interface DialogProps extends ParentProps {
   size?: "normal" | "large" | "x-large"
@@ -36,7 +36,7 @@ export function DialogBody(props: ParentProps & { class?: ComponentProps<"div">[
 }
 
 export function DialogTitle(props: ParentProps) {
-  return <Title data-slot="dialog-header-title">{props.children}</Title>
+  return <Kobalte.Title data-slot="dialog-header-title">{props.children}</Kobalte.Title>
 }
 
 export function DialogTitleGroup(props: DialogTitleGroupProps) {
@@ -45,8 +45,8 @@ export function DialogTitleGroup(props: DialogTitleGroupProps) {
 
   return (
     <div data-slot="dialog-title-group">
-      <Show when={title()}>{(t) => <Title data-slot="dialog-title">{t()}</Title>}</Show>
-      <Description data-slot="dialog-description">{description()}</Description>
+      <Show when={title()}>{(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}</Show>
+      <Kobalte.Description data-slot="dialog-description">{description()}</Kobalte.Description>
     </div>
   )
 }
@@ -59,8 +59,8 @@ export function DialogHeader(props: DialogHeaderProps) {
   return (
     <div data-slot="dialog-header" data-hide-close={hideClose() ? "" : undefined}>
       {local.children}
-      <Show when={!hideClose()}>
-        <CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
+      {!hideClose() && (
+        <Kobalte.CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
           <svg
             width="16"
             height="16"
@@ -75,8 +75,8 @@ export function DialogHeader(props: DialogHeaderProps) {
               stroke-linejoin="round"
             />
           </svg>
-        </CloseButton>
-      </Show>
+        </Kobalte.CloseButton>
+      )}
     </div>
   )
 }
@@ -92,7 +92,7 @@ export function Dialog(props: DialogProps) {
       data-size={local.size || "normal"}
     >
       <div data-slot="dialog-container" class={local.containerClass}>
-        <Content
+        <Kobalte.Content
           data-slot="dialog-content"
           classList={{
             ...local.classList,
@@ -108,8 +108,10 @@ export function Dialog(props: DialogProps) {
           }}
         >
           {local.children}
-        </Content>
+        </Kobalte.Content>
       </div>
     </div>
   )
 }
+
+export const DialogV2 = Dialog

package/src/v2/components/diff-changes-v2.css

@@ -0,0 +1,26 @@
+[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);
+  }
+}

package/src/{data-display/diff-changes/diff-changes.tsx → v2/components/diff-changes-v2.tsx}

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

package/src/{layout/divider/divider.tsx → v2/components/divider-v2.tsx}

@@ -1,9 +1,9 @@
 import { type ComponentProps, splitProps } from "solid-js"
-import "./divider.css"
+import "./divider-v2.css"
 
-export interface DividerProps extends ComponentProps<"div"> {}
+export interface DividerV2Props extends ComponentProps<"div"> {}
 
-export function Divider(props: DividerProps) {
+export function DividerV2(props: DividerV2Props) {
   const [local, rest] = splitProps(props, ["class", "classList"])
   return (
     <div

package/src/{forms/field/field.tsx → v2/components/field-v2.tsx}

@@ -11,8 +11,8 @@ import {
   type ComponentProps,
   type ParentProps,
 } from "solid-js"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import "./field.css"
+import { TooltipV2 } from "./tooltip-v2"
+import "./field-v2.css"
 
 type FieldContextValue = {
   controlId: string
@@ -40,14 +40,14 @@ function useField() {
 const CONTROL_SELECTOR = [
   "[data-slot='text-input-v2-input']",
   "[data-slot='textarea-v2-textarea']",
-  "[data-component='inline-input']",
+  "[data-slot='inline-input-v2-input']",
 ].join(", ")
 
-export interface FieldProps extends ComponentProps<"div"> {
+export interface FieldV2Props extends ComponentProps<"div"> {
   invalid?: boolean
 }
 
-function FieldRoot(props: ParentProps<FieldProps>) {
+function FieldV2Root(props: ParentProps<FieldV2Props>) {
   const [local, rest] = splitProps(props, ["invalid", "class", "classList", "children"])
 
   const controlId = `field-control-${createUniqueId()}`
@@ -86,7 +86,7 @@ function FieldRoot(props: ParentProps<FieldProps>) {
     if (!control) return
 
     const shell = control.closest(
-      "[data-component='text-input-v2'], [data-component='textarea-v2'], [data-component='inline-input']",
+      "[data-component='text-input-v2'], [data-component='textarea-v2'], [data-component='inline-input-v2']",
     ) as HTMLElement | null
 
     control.id = controlId
@@ -173,7 +173,7 @@ function FieldLabel(props: ParentProps<FieldLabelProps>) {
       <span data-slot="field-v2-label-text">{local.children}</span>
       <Show when={local.tooltip}>
         {(tooltip) => (
-          <Tooltip value={tooltip()}>
+          <TooltipV2 value={tooltip()}>
             <button
               type="button"
               data-slot="field-v2-label-info"
@@ -182,7 +182,7 @@ function FieldLabel(props: ParentProps<FieldLabelProps>) {
             >
               <FieldLabelInfoIcon />
             </button>
-          </Tooltip>
+          </TooltipV2>
         )}
       </Show>
     </label>
@@ -255,9 +255,11 @@ function FieldControl(props: ParentProps<ComponentProps<"div">>) {
   )
 }
 
-export const Field = Object.assign(FieldRoot, {
+export const FieldV2 = Object.assign(FieldV2Root, {
   Label: FieldLabel,
   Prefix: FieldPrefix,
   Suffix: FieldSuffix,
   Control: FieldControl,
 })
+
+export const Field = FieldV2

package/src/v2/components/icon-button-v2.tsx

@@ -0,0 +1,37 @@
+import { Button as Kobalte } from "@kobalte/core/button"
+import { type ComponentProps, splitProps } from "solid-js"
+import { JSX } from "solid-js"
+import "./icon-button-v2.css"
+
+export interface IconButtonV2Props
+  extends ComponentProps<typeof Kobalte>,
+    Pick<ComponentProps<"button">, "class" | "classList"> {
+  // temporary
+  icon?: JSX.Element
+  // icon: IconProps["name"]
+  size?: "small" | "normal" | "large"
+  // iconSize?: IconProps["size"]
+  variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
+  state?: "rest" | "hover" | "pressed"
+}
+
+export function IconButtonV2(props: ComponentProps<"button"> & IconButtonV2Props) {
+  const [split, rest] = splitProps(props, ["variant", "size", "iconSize", "class", "classList", "state"])
+  return (
+    <Kobalte
+      {...rest}
+      data-component="icon-button-v2"
+      // data-icon={props.icon}
+      data-size={split.size || "normal"}
+      data-variant={split.variant || "neutral"}
+      data-state={split.state}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {props.icon}
+      {/*<Icon name={props.icon} size={split.iconSize ?? (split.size === "large" ? "normal" : "small")} />*/}
+    </Kobalte>
+  )
+}

package/src/{icons/icon → v2/components}/icon.tsx

@@ -1,8 +1,5 @@
 import { onMount, type ComponentProps, splitProps } from "solid-js"
-import { additionalIcons, additionalIconViewBox } from "./additional-icons"
-import "./icon.css"
 
-// Consumers center the SVG viewport, so each icon must center its artwork within its viewBox.
 const icons = {
   edit: {
     viewBox: "0 0 16 16",
@@ -20,10 +17,6 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M5.118 5.686V10.314M5.118 5.686C5.97 5.686 6.661 4.995 6.661 4.143C6.661 3.291 5.97 2.6 5.118 2.6C4.266 2.6 3.575 3.291 3.575 4.143C3.575 4.995 4.266 5.686 5.118 5.686ZM5.118 10.314C4.266 10.314 3.575 11.005 3.575 11.857C3.575 12.709 4.266 13.4 5.118 13.4C5.97 13.4 6.661 12.709 6.661 11.857M5.118 10.314C5.97 10.314 6.661 11.005 6.661 11.857M10.882 5.686C11.734 5.686 12.425 4.995 12.425 4.143C12.425 3.291 11.734 2.6 10.882 2.6C10.03 2.6 9.339 3.291 9.339 4.143C9.339 4.995 10.03 5.686 10.882 5.686ZM10.882 5.686V9.457C10.882 10.783 9.807 11.857 8.482 11.857H6.661" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>`,
   },
-  "branch-out": {
-    viewBox: "0 0 16 16",
-    body: `<path d="M10.4225 3.35355L12.9024 5.83344L10.4225 8.31333" stroke="currentColor"/><path d="M1 12.2852H4.23042C4.89912 12.2852 5.52359 11.951 5.89452 11.3946L9.00783 6.72462C8.37877 6.16823 10.0032 5.83402 10.6719 5.83402H12.9024" stroke="currentColor"/><path d="M8.5 12.2852H14" stroke="currentColor" stroke-linejoin="round"/>`,
-  },
   "grid-plus": {
     viewBox: "0 0 16 16",
     body: `<path d="M13.9948 11.668H9.32812M11.6641 9.33203V13.9987M6.66667 9.33203V13.9987H2V9.33203H6.66667ZM6.66667 2V6.66667H2V2H6.66667ZM13.9948 2V6.66667H9.32812V2H13.9948Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>`,
@@ -128,14 +121,6 @@ const icons = {
     viewBox: "0 0 20 20",
     body: `<path d="M7 14.5H13M7 7.99512H10.0049M10.0049 7.99512H13M10.0049 7.99512V5M10.0049 7.99512V11M18 18V2L2 2L2 18H18Z" stroke="currentColor"/>`,
   },
-  "window-analytics": {
-    viewBox: "0 0 16 16",
-    body: `<g transform="translate(1 2)"><path d="M7 4H11M7 8H11M0.5 0.5V11.5H13.5V0.5H0.5ZM3.5 3.5H4.5V4.5H3.5V3.5ZM3.5 7.5H4.5V8.5H3.5V7.5Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/></g>`,
-  },
-  trash: {
-    viewBox: "0 0 20 20",
-    body: `<path d="M4.58342 17.9134L4.58369 17.4134L4.22787 17.5384L4.22766 18.0384H4.58342V17.9134ZM15.4167 17.9134V18.0384H15.7725L15.7723 17.5384L15.4167 17.9134ZM2.08342 3.95508V3.45508H1.58342V3.95508H2.08342V4.45508V3.95508ZM17.9167 4.45508V4.95508H18.4167V4.45508H17.9167V3.95508V4.45508ZM4.16677 4.58008L3.66701 4.5996L4.22816 17.5379L4.72792 17.4934L5.22767 17.4489L4.66652 4.54055L4.16677 4.58008ZM4.58342 18.0384V17.9134H15.4167V18.0384V18.5384H4.58342V18.0384ZM15.4167 17.9134L15.8332 17.5379L16.2498 4.5996L15.7501 4.58008L15.2503 4.56055L14.8337 17.4989L15.4167 17.9134ZM15.8334 4.58008V4.08008H4.16677V4.58008V5.08008H15.8334V4.58008ZM2.08342 4.45508V4.95508H4.16677V4.58008V4.08008H2.08342V4.45508ZM15.8334 4.58008V5.08008H17.9167V4.45508V3.95508H15.8334V4.58008ZM6.83951 4.35149L7.432 4.55047C7.79251 3.47701 8.80699 2.70508 10.0001 2.70508V2.20508V1.70508C8.25392 1.70508 6.77335 2.83539 6.24702 4.15251L6.83951 4.35149ZM10.0001 2.20508V2.70508C11.1932 2.70508 12.2077 3.47701 12.5682 4.55047L13.1607 4.35149L13.7532 4.15251C13.2269 2.83539 11.7463 1.70508 10.0001 1.70508V2.20508Z" fill="currentColor"/>`,
-  },
   "outline-sliders": {
     viewBox: "0 0 16 16",
     body: `<path d="M11.7779 4.66675H14.4446M11.7779 4.66675C11.7779 5.77132 10.8825 6.66675 9.77789 6.66675C8.67332 6.66675 7.77789 5.77132 7.77789 4.66675M11.7779 4.66675C11.7779 3.56218 10.8825 2.66675 9.77789 2.66675C8.67332 2.66675 7.77789 3.56218 7.77789 4.66675M1.55566 4.66675H7.77789M4.22233 11.3334H1.55566M4.22233 11.3334C4.22233 12.438 5.11776 13.3334 6.22233 13.3334C7.3269 13.3334 8.22233 12.438 8.22233 11.3334M4.22233 11.3334C4.22233 10.2288 5.11776 9.33341 6.22233 9.33341C7.3269 9.33341 8.22233 10.2288 8.22233 11.3334M14.4446 11.3334H8.22233" stroke="currentColor"/>`,
@@ -166,19 +151,10 @@ const icons = {
   },
 }
 
-type IconName = keyof typeof icons | keyof typeof additionalIcons
-
 const spriteID = "opencode-v2-icon-sprite"
-const symbol = (name: IconName) => `opencode-v2-icon-${name}`
+const symbol = (name: keyof typeof icons) => `opencode-v2-icon-${name}`
 let spriteInserted = false
 
-function getIcon(name: IconName) {
-  const icon = icons[name as keyof typeof icons]
-  if (icon) return icon
-  const body = additionalIcons[name as keyof typeof additionalIcons]
-  return { body, viewBox: additionalIconViewBox(name as keyof typeof additionalIcons) }
-}
-
 function ensureSprite() {
   if (spriteInserted) return
   if (typeof document === "undefined") return
@@ -194,26 +170,25 @@ function ensureSprite() {
   svg.setAttribute("height", "0")
   svg.style.position = "absolute"
   svg.style.overflow = "hidden"
-  svg.innerHTML = Array.from(new Set<IconName>([...Object.keys(additionalIcons), ...Object.keys(icons)] as IconName[]))
-    .map((name) => `<symbol id="${symbol(name)}" viewBox="${getIcon(name).viewBox}">${getIcon(name).body}</symbol>`)
+  svg.innerHTML = Object.entries(icons)
+    .map(
+      ([name, icon]) =>
+        `<symbol id="${symbol(name as keyof typeof icons)}" viewBox="${icon.viewBox}">${icon.body}</symbol>`,
+    )
     .join("")
   document.body.insertBefore(svg, document.body.firstChild)
   spriteInserted = true
 }
 
 export interface IconProps extends ComponentProps<"svg"> {
-  name: IconName | (string & {})
+  name: keyof typeof icons | (string & {})
   size?: "small" | "normal" | "large"
 }
 
 export function Icon(props: IconProps) {
   const [split, rest] = splitProps(props, ["name", "size"])
-  const iconName = (): IconName => {
-    if (icons[split.name as keyof typeof icons]) return split.name as keyof typeof icons
-    if (additionalIcons[split.name as keyof typeof additionalIcons]) return split.name as keyof typeof additionalIcons
-    return "plus"
-  }
-  const icon = () => getIcon(iconName())
+  const iconName = () => (icons[split.name as keyof typeof icons] ? (split.name as keyof typeof icons) : "plus")
+  const icon = () => icons[iconName()]
   const pixelSize = split.size === "small" ? 14 : split.size === "large" ? 20 : 16
   onMount(ensureSprite)
 
@@ -221,14 +196,6 @@ export function Icon(props: IconProps) {
     <svg
       {...rest}
       data-slot="icon-svg"
-      data-directional={
-        iconName() === "arrow-left" ||
-        iconName() === "arrow-right" ||
-        iconName() === "chevron-left" ||
-        iconName() === "chevron-right"
-          ? ""
-          : undefined
-      }
       width={pixelSize}
       height={pixelSize}
       viewBox={icon().viewBox}