@opencode-ai/ui 0.0.0-next-17078 → 0.0.0-next-17080

package/dist/i18n/zht.d.ts

@@ -48,6 +48,7 @@ export declare const dict: {
     "ui.lineComment.editorLabel.prefix": string;
     "ui.lineComment.editorLabel.suffix": string;
     "ui.lineComment.placeholder": string;
+    "ui.lineComment.contextPlaceholder": string;
     "ui.lineComment.submit": string;
     "ui.lineComment.cancel": string;
     "ui.sessionTurn.steps.show": string;
@@ -103,6 +104,23 @@ export declare const dict: {
     "ui.list.emptyWithFilter.prefix": string;
     "ui.list.emptyWithFilter.suffix": string;
     "ui.messageNav.newMessage": string;
+    "ui.promptInput.noMatchingItems": string;
+    "ui.promptInput.commands": string;
+    "ui.promptInput.dropFiles": string;
+    "ui.promptInput.removeAttachment": string;
+    "ui.promptInput.label": string;
+    "ui.promptInput.placeholder.shell": string;
+    "ui.promptInput.placeholder.normal": string;
+    "ui.promptInput.add": string;
+    "ui.promptInput.attachments": string;
+    "ui.promptInput.context": string;
+    "ui.promptInput.shell": string;
+    "ui.promptInput.chooseAgent": string;
+    "ui.promptInput.chooseModel": string;
+    "ui.promptInput.chooseVariant": string;
+    "ui.promptInput.send": string;
+    "ui.promptInput.stop": string;
+    "ui.tabs.close": string;
     "ui.textField.copyToClipboard": string;
     "ui.textField.copyLink": string;
     "ui.textField.copied": string;
@@ -115,9 +133,11 @@ export declare const dict: {
     "ui.tool.grep": string;
     "ui.tool.webfetch": string;
     "ui.tool.websearch": string;
+    "ui.tool.websearch.provider": string;
     "ui.tool.shell": string;
     "ui.tool.patch": string;
     "ui.tool.questions": string;
+    "ui.tool.questions.numbered": string;
     "ui.tool.agent": string;
     "ui.tool.agent.default": string;
     "ui.common.file.one": string;
@@ -125,6 +145,8 @@ export declare const dict: {
     "ui.common.question.one": string;
     "ui.common.question.other": string;
     "ui.common.add": string;
+    "ui.common.clear": string;
+    "ui.common.file": string;
     "ui.common.back": string;
     "ui.common.cancel": string;
     "ui.common.confirm": string;

package/dist/v2/components/toast-v2.d.ts

@@ -1,22 +1,21 @@
-import { Toast as Kobalte, toaster } from "@kobalte/core/toast";
-import type { ToastRootProps, ToastCloseButtonProps, ToastTitleProps, ToastDescriptionProps } from "@kobalte/core/toast";
+import { type ToasterProps } from "solid-sonner";
 import type { ComponentProps, JSX } from "solid-js";
+import "./button-v2.css";
 import "./toast-v2.css";
-export interface ToastV2RegionProps extends ComponentProps<typeof Kobalte.Region> {
+export interface ToastV2RegionProps extends ToasterProps {
 }
 declare function ToastV2Region(props: ToastV2RegionProps): JSX.Element;
-export interface ToastV2RootComponentProps extends ToastRootProps {
-    class?: string;
-    classList?: ComponentProps<"li">["classList"];
+export interface ToastV2RootComponentProps {
+    toastId: number;
     children?: JSX.Element;
 }
 declare function ToastV2Root(props: ToastV2RootComponentProps): JSX.Element;
 declare function ToastV2Icon(props: ComponentProps<"div">): JSX.Element;
 declare function ToastV2Content(props: ComponentProps<"div">): JSX.Element;
-declare function ToastV2Title(props: ToastTitleProps & ComponentProps<"div">): JSX.Element;
-declare function ToastV2Description(props: ToastDescriptionProps & ComponentProps<"div">): JSX.Element;
+declare function ToastV2Title(props: ComponentProps<"div">): JSX.Element;
+declare function ToastV2Description(props: ComponentProps<"div">): JSX.Element;
 declare function ToastV2Actions(props: ComponentProps<"div">): JSX.Element;
-declare function ToastV2CloseButton(props: ToastCloseButtonProps & ComponentProps<"button">): JSX.Element;
+declare function ToastV2CloseButton(props: ComponentProps<"button">): JSX.Element;
 export declare const ToastV2: typeof ToastV2Root & {
     Region: typeof ToastV2Region;
     Icon: typeof ToastV2Icon;
@@ -26,7 +25,15 @@ export declare const ToastV2: typeof ToastV2Root & {
     Actions: typeof ToastV2Actions;
     CloseButton: typeof ToastV2CloseButton;
 };
-export { toaster as toasterV2 };
+export declare const toasterV2: {
+    show(render: (props: {
+        toastId: number;
+    }) => JSX.Element, options?: {
+        duration?: number;
+        persistent?: boolean;
+    }): number;
+    dismiss(toastId?: number): string | number | undefined;
+};
 export interface ToastV2Action {
     label: string;
     variant?: "primary" | "secondary";
@@ -36,6 +43,7 @@ export interface ToastV2Options {
     title?: string;
     description?: string;
     icon?: JSX.Element;
+    variant?: "default" | "success" | "error" | "loading";
     duration?: number;
     persistent?: boolean;
     actions?: ToastV2Action[];
@@ -46,3 +54,4 @@ export interface ToastV2PromiseOptions<T, U = unknown> {
     success?: (data: T) => JSX.Element;
     error?: (error: U) => JSX.Element;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "0.0.0-next-17078",
+  "version": "0.0.0-next-17080",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -135,8 +135,7 @@
     "fuzzysort": "3.1.0",
     "katex": "0.16.27",
     "luxon": "3.6.1",
-    "marked": "17.0.6",
-    "marked-katex-extension": "5.1.6",
+    "marked": "18.0.7",
     "marked-shiki": "1.2.1",
     "morphdom": "2.7.8",
     "motion": "12.34.5",
@@ -146,6 +145,7 @@
     "remend": "1.3.0",
     "shiki": "4.2.0",
     "solid-list": "0.3.0",
+    "solid-sonner": "0.3.1",
     "strip-ansi": "7.1.2"
   },
   "peerDependencies": {

package/src/components/diff-changes.css

@@ -1,5 +1,7 @@
 [data-component="diff-changes"] {
   display: flex;
+  direction: ltr;
+  unicode-bidi: isolate;
   gap: 8px;
   justify-content: flex-end;
   align-items: center;

package/src/components/dropdown-menu.css

@@ -60,7 +60,7 @@
 
   [data-slot="dropdown-menu-checkbox-item"],
   [data-slot="dropdown-menu-radio-item"] {
-    padding-right: 28px;
+    padding-inline-end: 28px;
   }
 
   [data-slot="dropdown-menu-sub-trigger"] {
@@ -76,7 +76,7 @@
     width: 16px;
     height: 16px;
     position: absolute;
-    right: 8px;
+    inset-inline-end: 8px;
     top: 50%;
     transform: translateY(-50%);
   }

package/src/components/icon.css

@@ -32,3 +32,8 @@
     height: auto;
   }
 }
+
+:dir(rtl) [data-component="icon"][data-directional] [data-slot="icon-svg"],
+:dir(rtl) [data-slot="menu-v2-item-chevron"] {
+  transform: scaleX(-1);
+}

package/src/components/icon.tsx

@@ -151,7 +151,18 @@ export function Icon(props: IconProps) {
   onMount(ensureSprite)
 
   return (
-    <div data-component="icon" data-size={local.size || "normal"}>
+    <div
+      data-component="icon"
+      data-size={local.size || "normal"}
+      data-directional={
+        local.name === "arrow-left" ||
+        local.name === "arrow-right" ||
+        local.name === "chevron-left" ||
+        local.name === "chevron-right"
+          ? true
+          : undefined
+      }
+    >
       <svg
         data-slot="icon-svg"
         classList={{

package/src/components/provider-icons/sprite.svg

@@ -366,34 +366,9 @@
     </symbol>
     <symbol viewBox="0 0 24 24" fill="none" id="openrouter">
       <path
-        d="M3.10913 12.07C3.65512 12.07 5.76627 11.5988 6.85825 10.98C7.95023 10.3612 7.95023 10.3612 10.207 8.75965C13.0642 6.73196 15.0845 7.41088 18.3968 7.41088"
+        d="M728.039 234C819.325 234 893.323 308.62 893.323 400.668C893.323 492.716 819.325 567.336 728.039 567.336L891.984 732.656C912.81 753.655 898.061 789.56 868.613 789.56H397.472C245.333 789.56 122 665.193 122 511.78C122 358.367 245.333 234 397.472 234H728.039ZM397.472 345.112C306.189 345.112 232.189 419.732 232.189 511.78C232.189 603.828 306.189 678.448 397.472 678.448C488.756 678.448 562.756 603.828 562.756 511.78C562.756 419.732 488.756 345.112 397.472 345.112Z"
         fill="currentColor"
-      ></path>
-      <path
-        d="M3.10913 12.07C3.65512 12.07 5.76627 11.5988 6.85825 10.98C7.95023 10.3612 7.95023 10.3612 10.207 8.75965C13.0642 6.73196 15.0845 7.41088 18.3968 7.41088"
-        stroke="currentColor"
-        stroke-width="3.27593"
-      ></path>
-      <path
-        d="M21.6 7.43108L16.0037 10.6622V4.20001L21.6 7.43108Z"
-        fill="currentColor"
-        stroke="currentColor"
-        stroke-width="0.0363992"
-      ></path>
-      <path
-        d="M3 12.072C3.54599 12.072 5.65714 12.5432 6.74912 13.162C7.8411 13.7808 7.8411 13.7808 10.0978 15.3823C12.9551 17.41 14.9753 16.7311 18.2877 16.7311"
-        fill="currentColor"
-      ></path>
-      <path
-        d="M3 12.072C3.54599 12.072 5.65714 12.5432 6.74912 13.162C7.8411 13.7808 7.8411 13.7808 10.0978 15.3823C12.9551 17.41 14.9753 16.7311 18.2877 16.7311"
-        stroke="currentColor"
-        stroke-width="3.27593"
-      ></path>
-      <path
-        d="M21.4909 16.7109L15.8945 13.4798V19.942L21.4909 16.7109Z"
-        fill="currentColor"
-        stroke="currentColor"
-        stroke-width="0.0363992"
+        transform="scale(0.0234375)"
       ></path>
     </symbol>
     <symbol viewBox="0 0 24 24" fill="none" id="opencode">

package/src/components/resize-handle.css

@@ -14,7 +14,7 @@
     opacity: 1;
   }
 
-  &[data-direction="horizontal"] {
+  &:where([data-direction="horizontal"]) {
     inset-block: 0;
     inset-inline-end: 0;
     width: 8px;
@@ -33,9 +33,21 @@
       inset-inline-start: 50%;
       transform: translateX(-50%);
     }
+
+    &:dir(rtl) {
+      transform: translateX(-50%);
+
+      &[data-edge="start"] {
+        transform: translateX(50%);
+      }
+
+      &::after {
+        transform: translateX(50%);
+      }
+    }
   }
 
-  &[data-direction="vertical"] {
+  &:where([data-direction="vertical"]) {
     inset-inline: 0;
     inset-block-start: 0;
     height: 8px;

package/src/components/resize-handle.tsx

@@ -33,6 +33,10 @@ export function ResizeHandle(props: ResizeHandleProps) {
     e.preventDefault()
     const edge = local.edge ?? (local.direction === "vertical" ? "start" : "end")
     const start = local.direction === "horizontal" ? e.clientX : e.clientY
+    const rtl =
+      local.direction === "horizontal" &&
+      e.currentTarget instanceof Element &&
+      getComputedStyle(e.currentTarget).direction === "rtl"
     const startSize = local.size
     const min = local.min
     const max = local.max
@@ -53,7 +57,7 @@ export function ResizeHandle(props: ResizeHandleProps) {
           ? edge === "end"
             ? pos - start
             : start - pos
-          : edge === "start"
+          : (edge === "start") !== rtl
             ? start - pos
             : pos - start
       current = startSize + delta

package/src/components/scroll-view.css

@@ -21,7 +21,7 @@
 
 .scroll-view__thumb {
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   top: 0;
   width: 12px;
   transition: opacity 200ms ease;

package/src/components/select.css

@@ -1,6 +1,7 @@
 [data-component="select"] {
   [data-slot="select-select-trigger"] {
-    padding: 0 4px 0 8px;
+    padding-block: 0;
+    padding-inline: 8px 4px;
     box-shadow: none;
 
     [data-slot="select-select-trigger-value"] {
@@ -46,7 +47,8 @@
 
   &[data-trigger-style="settings"] {
     [data-slot="select-select-trigger"] {
-      padding: 6px 6px 6px 12px;
+      padding-block: 6px;
+      padding-inline: 12px 6px;
       box-shadow: none;
       border-radius: 6px;
       min-width: 160px;
@@ -154,7 +156,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-left: auto;
+      margin-inline-start: auto;
       width: 16px;
       height: 16px;
     }

package/src/components/switch.css

@@ -103,6 +103,10 @@
     background-color: var(--icon-invert-base);
   }
 
+  &:dir(rtl)[data-checked] [data-slot="switch-thumb"] {
+    transform: translateX(-12px);
+  }
+
   &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
     border-color: var(--border-hover);
     background-color: var(--surface-hover);

package/src/components/tabs.css

@@ -61,7 +61,7 @@
     flex-shrink: 0;
     max-width: 280px;
     border-bottom: 1px solid var(--border-weak-base);
-    border-right: 1px solid var(--border-weak-base);
+    border-inline-end: 1px solid var(--border-weak-base);
     background-color: var(--background-base);
 
     [data-slot="tabs-trigger"] {
@@ -111,10 +111,10 @@
       color: var(--text-strong);
     }
     &:has([data-slot="tabs-trigger-close-button"]) {
-      padding-right: 12px;
+      padding-inline-end: 12px;
 
       [data-slot="tabs-trigger"] {
-        padding-right: 0;
+        padding-inline-end: 0;
       }
     }
   }
@@ -141,8 +141,8 @@
 
     [data-slot="tabs-list"] {
       height: var(--tabs-bar-height);
-      padding-left: 12px;
-      padding-right: 0;
+      padding-inline-start: 12px;
+      padding-inline-end: 0;
       --tabs-review-gap: 16px;
       --tabs-review-fade: 16px;
       gap: var(--tabs-review-gap);
@@ -162,11 +162,15 @@
           position: absolute;
           top: 0;
           bottom: 0;
-          left: calc(var(--tabs-review-fade) * -1);
+          inset-inline-end: 100%;
           width: var(--tabs-review-fade);
           pointer-events: none;
           background: linear-gradient(90deg, transparent, var(--background-stronger));
         }
+
+        &:dir(rtl)::before {
+          background: linear-gradient(270deg, transparent, var(--background-stronger));
+        }
       }
     }
 
@@ -213,9 +217,9 @@
       }
 
       &:has([data-slot="tabs-trigger-close-button"]) {
-        padding-right: 5px;
+        padding-inline-end: 5px;
         [data-slot="tabs-trigger"] {
-          padding-right: 0 !important;
+          padding-inline-end: 0 !important;
         }
       }
 
@@ -271,7 +275,7 @@
   #terminal-panel &[data-variant="normal"][data-orientation="horizontal"] {
     [data-slot="tabs-list"] {
       height: 52px;
-      padding-right: 12px;
+      padding-inline-end: 12px;
       gap: 8px;
     }
 
@@ -291,7 +295,7 @@
       }
 
       &:has([data-slot="tabs-trigger-close-button"]) {
-        padding-right: 8px;
+        padding-inline-end: 8px;
       }
 
       &:has([data-selected]) {
@@ -378,9 +382,9 @@
       }
 
       &:has([data-slot="tabs-trigger-close-button"]) {
-        padding-right: 0;
+        padding-inline-end: 0;
         [data-slot="tabs-trigger"] {
-          padding-right: 0;
+          padding-inline-end: 0;
         }
       }
     }
@@ -490,7 +494,7 @@
       padding: 8px;
       gap: 4px;
       background-color: var(--background-base);
-      border-right: 1px solid var(--border-weak-base);
+      border-inline-end: 1px solid var(--border-weak-base);
 
       &::after {
         display: none;
@@ -572,7 +576,7 @@
         padding: 12px;
         gap: 0;
         background-color: var(--background-base);
-        border-right: 1px solid var(--border-weak-base);
+        border-inline-end: 1px solid var(--border-weak-base);
 
         &::after {
           display: none;
@@ -581,7 +585,8 @@
 
       [data-slot="tabs-section-title"] {
         width: 100%;
-        padding: 0 0 0 4px;
+        padding: 0;
+        padding-inline-start: 4px;
         font-family: var(--font-family-sans);
         font-size: var(--font-size-small);
         font-weight: var(--font-weight-medium);
@@ -695,6 +700,10 @@ body[data-new-layout] #terminal-panel [data-component="tabs"][data-variant="norm
       &::before {
         background: linear-gradient(90deg, transparent, var(--v2-background-bg-base));
       }
+
+      &:dir(rtl)::before {
+        background: linear-gradient(270deg, transparent, var(--v2-background-bg-base));
+      }
     }
   }
 }
@@ -702,7 +711,7 @@ body[data-new-layout] #terminal-panel [data-component="tabs"][data-variant="norm
 body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
   [data-slot="tabs-list"] {
     height: 52px;
-    padding-right: 12px;
+    padding-inline-end: 12px;
     gap: 8px;
     --tabs-review-fade: 8px;
   }
@@ -723,10 +732,10 @@ body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal
     }
 
     &:has([data-slot="tabs-trigger-close-button"]) {
-      padding-right: 8px;
+      padding-inline-end: 8px;
 
       [data-slot="tabs-trigger-close-button"] {
-        margin-left: 2px;
+        margin-inline-start: 2px;
       }
     }
 
@@ -754,7 +763,7 @@ body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal
     .tab-fileicon-color,
     .tab-fileicon-mono,
     [data-slot="icon-svg"] {
-      margin-left: -2px;
+      margin-inline-start: -2px;
     }
   }
 
@@ -792,7 +801,7 @@ body[data-new-layout]
   .session-review-v2-tabs-bar
   [data-slot="tabs-list"]
   > .sticky {
-  padding-right: 0;
+  padding-inline-end: 0;
 
   [data-component="icon-button-v2"] {
     position: relative;
@@ -800,7 +809,7 @@ body[data-new-layout]
     &::after {
       content: "";
       position: absolute;
-      left: 100%;
+      inset-inline-start: 100%;
       top: 50%;
       transform: translateY(-50%);
       width: 20px;
@@ -811,21 +820,35 @@ body[data-new-layout]
   }
 }
 
+body[data-new-layout]
+  #review-panel
+  [data-component="tabs"]
+  .session-review-v2-tabs-bar
+  [data-slot="tabs-list"]
+  > .sticky:not(.session-review-v2-sidebar-toggle-slot) {
+  left: auto;
+  right: auto;
+  inset-inline-end: 0;
+}
+
 body[data-new-layout]
   #review-panel
   [data-component="tabs"]
   .session-review-v2-tabs-bar
   [data-slot="tabs-list"]
   > .session-review-v2-sidebar-toggle-slot.sticky {
-  padding-right: 0;
+  left: auto;
+  right: auto;
+  inset-inline-start: 0;
+  padding-inline-end: 0;
 
   &::before {
     content: "";
     position: absolute;
     top: 50%;
     bottom: auto;
-    left: auto;
-    right: 100%;
+    inset-inline-start: auto;
+    inset-inline-end: 100%;
     transform: translateY(-50%);
     width: 12px;
     height: 28px;
@@ -838,7 +861,8 @@ body[data-new-layout]
     content: "";
     position: absolute;
     top: 50%;
-    left: 100%;
+    inset-inline-start: 100%;
+    inset-inline-end: auto;
     transform: translateY(-50%);
     width: 8px;
     height: 28px;
@@ -846,6 +870,10 @@ body[data-new-layout]
     background: linear-gradient(90deg, var(--v2-background-bg-base), transparent);
   }
 
+  &:dir(rtl)::after {
+    background: linear-gradient(270deg, var(--v2-background-bg-base), transparent);
+  }
+
   [data-component="icon-button-v2"]::after {
     display: none;
   }
@@ -853,7 +881,7 @@ body[data-new-layout]
 
 body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app-slot {
   flex-shrink: 0;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app {

package/src/components/tabs.tsx

@@ -80,6 +80,7 @@ function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
     >
       <Kobalte.Trigger
         {...rest}
+        dir={rest.dir ?? "auto"}
         data-slot="tabs-trigger"
         data-value={props.value}
         classList={{ [split.classes?.button ?? ""]: split.classes?.button }}

package/src/components/text-field.css

@@ -45,7 +45,7 @@
       align-items: start;
       justify-content: space-between;
       width: 100%;
-      padding-right: 4px;
+      padding-inline-end: 4px;
 
       border-radius: var(--radius-md);
       border: 1px solid var(--border-weak-base);
@@ -68,7 +68,7 @@
       }
 
       &:not(:has([data-slot="input-copy-button"])) {
-        padding-right: 0;
+        padding-inline-end: 0;
       }
     }
 

package/src/components/toast.css

@@ -1,7 +1,7 @@
 [data-component="toast-region"] {
   position: fixed;
   bottom: 48px;
-  right: 32px;
+  inset-inline-end: 32px;
   z-index: 1000;
   display: flex;
   flex-direction: column;