@opencode/ui 2.0.22 → 2.0.24

package/dist/data-display/accordion/accordion.d.ts

@@ -1,6 +1,8 @@
 import { Content, Header, Item, Root, Trigger } from "@kobalte/core/accordion";
 import type { ComponentProps, ParentProps } from "solid-js";
-export interface AccordionProps extends ComponentProps<typeof Root> {
+export interface AccordionProps extends Omit<ComponentProps<typeof Root>, "value"> {
+    /** Controlled expanded items. Kobalte reads this iterable into its own selection; it never mutates this array. */
+    value?: readonly string[];
 }
 export interface AccordionItemProps extends ComponentProps<typeof Item> {
 }

package/dist/feedback/toast/toast.d.ts

@@ -32,7 +32,7 @@ export declare const toaster: {
         duration?: number;
         persistent?: boolean;
         /** Reactive value the toast's height depends on; sonner re-measures when it changes. */
-        resize?: () => unknown;
+        resize?: () => void;
     }): number;
     dismiss(toastId?: number): string | number | undefined;
 };
@@ -44,7 +44,8 @@ export interface ToastAction {
 export interface ToastOptions {
     title?: string;
     description?: string;
-    icon?: JSX.Element;
+    /** An element, or a render function the toast calls under its own owner, for icons created from imperative code. */
+    icon?: JSX.Element | (() => JSX.Element);
     variant?: "default" | "success" | "error" | "loading";
     duration?: number;
     persistent?: boolean;

package/dist/i18n/en.d.ts

@@ -98,6 +98,7 @@ declare const source: {
     "ui.messagePart.questions.dismissed": string;
     "ui.messagePart.compaction": string;
     "ui.messagePart.compaction.started": string;
+    "ui.messagePart.compaction.queued": string;
     "ui.messagePart.compaction.running": string;
     "ui.messagePart.compaction.failed": string;
     "ui.messagePart.compaction.cancelled": string;
@@ -219,12 +220,16 @@ declare const source: {
     "ui.message.copyMessage": string;
     "ui.message.forkMessage": string;
     "ui.message.revertMessage": string;
+    "ui.message.moveToQueue": string;
+    "ui.message.pending": string;
+    "ui.message.deletePending": string;
     "ui.message.copyResponse": string;
     "ui.message.copied": string;
     "ui.message.thought": string;
     "ui.message.duration.seconds": string;
     "ui.message.duration.minutesSeconds": string;
     "ui.message.interrupted": string;
+    "ui.message.modelVariant": string;
     "ui.sessionTimeline.notice.model": string;
     "ui.sessionTimeline.notice.modelSwitched": string;
     "ui.sessionTimeline.notice.agentChanged": string;

package/dist/icons/catalog.d.ts

@@ -0,0 +1,257 @@
+import { additionalIcons } from "./icon/additional-icons";
+declare const icons: {
+    lock: {
+        viewBox: string;
+        body: string;
+    };
+    globe: {
+        viewBox: string;
+        body: string;
+    };
+    "select-element": {
+        viewBox: string;
+        body: string;
+    };
+    flask: {
+        viewBox: string;
+        body: string;
+    };
+    edit: {
+        viewBox: string;
+        body: string;
+    };
+    "folder-add-left": {
+        viewBox: string;
+        body: string;
+    };
+    folder: {
+        viewBox: string;
+        body: string;
+    };
+    branch: {
+        viewBox: string;
+        body: string;
+    };
+    "branch-out": {
+        viewBox: string;
+        body: string;
+    };
+    "grid-plus": {
+        viewBox: string;
+        body: string;
+    };
+    help: {
+        viewBox: string;
+        body: string;
+    };
+    info: {
+        viewBox: string;
+        body: string;
+    };
+    "circle-exclamation": {
+        viewBox: string;
+        body: string;
+    };
+    "circle-xmark": {
+        viewBox: string;
+        body: string;
+    };
+    "sidebar-right": {
+        viewBox: string;
+        body: string;
+    };
+    status: {
+        viewBox: string;
+        body: string;
+    };
+    "status-active": {
+        viewBox: string;
+        body: string;
+    };
+    "magnifying-glass": {
+        viewBox: string;
+        body: string;
+    };
+    menu: {
+        viewBox: string;
+        body: string;
+    };
+    plus: {
+        viewBox: string;
+        body: string;
+    };
+    "settings-gear": {
+        viewBox: string;
+        body: string;
+    };
+    "chevron-down": {
+        viewBox: string;
+        body: string;
+    };
+    collapse: {
+        viewBox: string;
+        body: string;
+    };
+    check: {
+        viewBox: string;
+        body: string;
+    };
+    monitor: {
+        viewBox: string;
+        body: string;
+    };
+    "workspace-new": {
+        viewBox: string;
+        body: string;
+    };
+    "workspace-isolated": {
+        viewBox: string;
+        body: string;
+    };
+    workspace: {
+        viewBox: string;
+        body: string;
+    };
+    "outline-worktree": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-trash": {
+        viewBox: string;
+        body: string;
+    };
+    close: {
+        viewBox: string;
+        body: string;
+    };
+    "xmark-small": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-xmark": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-chevron-down": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-dots": {
+        viewBox: string;
+        body: string;
+    };
+    expand: {
+        viewBox: string;
+        body: string;
+    };
+    filetree: {
+        viewBox: string;
+        body: string;
+    };
+    split: {
+        viewBox: string;
+        body: string;
+    };
+    unified: {
+        viewBox: string;
+        body: string;
+    };
+    review: {
+        viewBox: string;
+        body: string;
+    };
+    "window-analytics": {
+        viewBox: string;
+        body: string;
+    };
+    "graduation-cap": {
+        viewBox: string;
+        body: string;
+    };
+    "code-slash": {
+        viewBox: string;
+        body: string;
+    };
+    trash: {
+        viewBox: string;
+        body: string;
+    };
+    "outline-sliders": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-copy": {
+        viewBox: string;
+        body: string;
+    };
+    "arrow-up-right": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-square-arrow": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-arrow-to-corner-top-right": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-hexagonal-warning": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-share": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-eye": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-eye-slash": {
+        viewBox: string;
+        body: string;
+    };
+    refresh: {
+        viewBox: string;
+        body: string;
+    };
+    reset: {
+        viewBox: string;
+        body: string;
+    };
+    "outline-undo": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-reset": {
+        viewBox: string;
+        body: string;
+    };
+    "fill-triangle-down": {
+        viewBox: string;
+        body: string;
+    };
+    archive: {
+        viewBox: string;
+        body: string;
+    };
+};
+/** Icon names derived from the shared artwork, with no UI or runtime dependencies. */
+export type IconName = keyof typeof icons | keyof typeof additionalIcons;
+/** The artwork catalog's names, in sprite order. */
+export declare function iconNames(): IconName[];
+/**
+ * Narrows a name against the shared artwork catalog.
+ * @param name - A name supplied by a caller, including names unknown to this build.
+ */
+export declare function isIconName(name: string): name is IconName;
+/**
+ * The SVG body and viewport for a known catalog name, with primary artwork taking precedence.
+ * @param name - A name validated by the type or by `isIconName`.
+ */
+export declare function getIcon(name: IconName): {
+    viewBox: string;
+    body: string;
+};
+export {};

package/dist/icons/icon/additional-icons.d.ts

@@ -1,3 +1,4 @@
+/** Additional UI artwork, independent of a renderer. */
 export declare const additionalIcons: {
     "align-right": string;
     "arrow-up": string;

package/dist/icons/icon/icon.d.ts

@@ -1,244 +1,8 @@
 import { type ComponentProps } from "solid-js";
-import { additionalIcons } from "./additional-icons";
+import { type IconName } from "../catalog";
 import "./icon.css";
-declare const icons: {
-    lock: {
-        viewBox: string;
-        body: string;
-    };
-    globe: {
-        viewBox: string;
-        body: string;
-    };
-    "select-element": {
-        viewBox: string;
-        body: string;
-    };
-    flask: {
-        viewBox: string;
-        body: string;
-    };
-    edit: {
-        viewBox: string;
-        body: string;
-    };
-    "folder-add-left": {
-        viewBox: string;
-        body: string;
-    };
-    folder: {
-        viewBox: string;
-        body: string;
-    };
-    branch: {
-        viewBox: string;
-        body: string;
-    };
-    "branch-out": {
-        viewBox: string;
-        body: string;
-    };
-    "grid-plus": {
-        viewBox: string;
-        body: string;
-    };
-    help: {
-        viewBox: string;
-        body: string;
-    };
-    info: {
-        viewBox: string;
-        body: string;
-    };
-    "circle-exclamation": {
-        viewBox: string;
-        body: string;
-    };
-    "circle-xmark": {
-        viewBox: string;
-        body: string;
-    };
-    "sidebar-right": {
-        viewBox: string;
-        body: string;
-    };
-    status: {
-        viewBox: string;
-        body: string;
-    };
-    "status-active": {
-        viewBox: string;
-        body: string;
-    };
-    "magnifying-glass": {
-        viewBox: string;
-        body: string;
-    };
-    menu: {
-        viewBox: string;
-        body: string;
-    };
-    plus: {
-        viewBox: string;
-        body: string;
-    };
-    "settings-gear": {
-        viewBox: string;
-        body: string;
-    };
-    "chevron-down": {
-        viewBox: string;
-        body: string;
-    };
-    collapse: {
-        viewBox: string;
-        body: string;
-    };
-    check: {
-        viewBox: string;
-        body: string;
-    };
-    monitor: {
-        viewBox: string;
-        body: string;
-    };
-    "workspace-new": {
-        viewBox: string;
-        body: string;
-    };
-    "workspace-isolated": {
-        viewBox: string;
-        body: string;
-    };
-    workspace: {
-        viewBox: string;
-        body: string;
-    };
-    "outline-worktree": {
-        viewBox: string;
-        body: string;
-    };
-    "outline-trash": {
-        viewBox: string;
-        body: string;
-    };
-    close: {
-        viewBox: string;
-        body: string;
-    };
-    "xmark-small": {
-        viewBox: string;
-        body: string;
-    };
-    "outline-xmark": {
-        viewBox: string;
-        body: string;
-    };
-    "outline-chevron-down": {
-        viewBox: string;
-        body: string;
-    };
-    "outline-dots": {
-        viewBox: string;
-        body: string;
-    };
-    expand: {
-        viewBox: string;
-        body: string;
-    };
-    filetree: {
-        viewBox: string;
-        body: string;
-    };
-    split: {
-        viewBox: string;
-        body: string;
-    };
-    unified: {
-        viewBox: string;
-        body: string;
-    };
-    review: {
-        viewBox: string;
-        body: string;
-    };
-    "window-analytics": {
-        viewBox: string;
-        body: string;
-    };
-    "graduation-cap": {
-        viewBox: string;
-        body: string;
-    };
-    "code-slash": {
-        viewBox: string;
-        body: string;
-    };
-    trash: {
-        viewBox: string;
-        body: string;
-    };
-    "outline-sliders": {
-        viewBox: string;
-        body: string;
-    };
-    "outline-copy": {
-        viewBox: string;
-        body: string;
-    };
-    "arrow-up-right": {
-        viewBox: string;
-        body: string;
-    };
-    "outline-square-arrow": {
-        viewBox: string;
-        body: string;
-    };
-    "outline-arrow-to-corner-top-right": {
-        viewBox: string;
-        body: string;
-    };
-    "outline-hexagonal-warning": {
-        viewBox: string;
-        body: string;
-    };
-    "outline-share": {
-        viewBox: string;
-        body: string;
-    };
-    "outline-eye": {
-        viewBox: string;
-        body: string;
-    };
-    "outline-eye-slash": {
-        viewBox: string;
-        body: string;
-    };
-    refresh: {
-        viewBox: string;
-        body: string;
-    };
-    reset: {
-        viewBox: string;
-        body: string;
-    };
-    "outline-reset": {
-        viewBox: string;
-        body: string;
-    };
-    "fill-triangle-down": {
-        viewBox: string;
-        body: string;
-    };
-    archive: {
-        viewBox: string;
-        body: string;
-    };
-};
-type IconName = keyof typeof icons | keyof typeof additionalIcons;
 export interface IconProps extends ComponentProps<"svg"> {
     name: IconName | (string & {});
     size?: "small" | "normal" | "large";
 }
 export declare function Icon(props: IconProps): import("solid-js").JSX.Element;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/ui",
-  "version": "2.0.22",
+  "version": "2.0.24",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -76,6 +76,10 @@
       "types": "./dist/icons/icon/icon.d.ts",
       "import": "./src/icons/icon/icon.tsx"
     },
+    "./icons/catalog": {
+      "types": "./dist/icons/catalog.d.ts",
+      "import": "./src/icons/catalog.ts"
+    },
     "./icon-button": {
       "types": "./dist/actions/icon-button/icon-button.d.ts",
       "import": "./src/actions/icon-button/icon-button.tsx"

package/src/actions/button/button.tsx

@@ -23,6 +23,7 @@ export interface ButtonProps
 
 export function Button(props: ButtonProps) {
   const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
+
   return (
     <Root
       {...rest}

package/src/actions/icon-button/icon-button.tsx

@@ -14,6 +14,7 @@ export interface IconButtonProps
 
 export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {
   const [local, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList", "state"])
+
   return (
     <Root
       {...rest}

package/src/actions/split-button/split-button.tsx

@@ -3,6 +3,7 @@ import "./split-button.css"
 
 export function SplitButton(props: ParentProps<ComponentProps<"div">>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <div
       data-component="split-button-v2"
@@ -19,6 +20,7 @@ export function SplitButton(props: ParentProps<ComponentProps<"div">>) {
 
 export function SplitButtonAction(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <button
       type="button"
@@ -34,6 +36,7 @@ export function SplitButtonAction(props: ComponentProps<"button">) {
 
 export function SplitButtonMenuTrigger(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <button
       type="button"

package/src/components/animated-number.tsx

@@ -2,6 +2,7 @@ import { For, Index, createEffect, createMemo, on } from "solid-js"
 import { createStore } from "solid-js/store"
 
 const TRACK = Array.from({ length: 30 }, (_, index) => index % 10)
+
 const DURATION = 600
 
 function normalize(value: number) {
@@ -10,7 +11,9 @@ function normalize(value: number) {
 
 function spin(from: number, to: number, direction: 1 | -1) {
   if (from === to) return 0
+
   if (direction > 0) return (to - from + 10) % 10
+
   return -((from - to + 10) % 10)
 }
 
@@ -19,6 +22,7 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
     step: props.value + 10,
     animating: false,
   })
+
   const step = () => state.step
   const animating = () => state.animating
   let last = props.value
@@ -29,9 +33,11 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
       (next) => {
         const delta = spin(last, next, props.direction)
         last = next
+
         if (!delta) {
           setState("animating", false)
           setState("step", next + 10)
+
           return
         }
 
@@ -65,6 +71,7 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
 export function AnimatedNumber(props: { value: number; class?: string }) {
   const target = createMemo(() => {
     if (!Number.isFinite(props.value)) return 0
+
     return Math.max(0, Math.round(props.value))
   })
 
@@ -72,6 +79,7 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
     value: target(),
     direction: 1 as 1 | -1,
   })
+
   const value = () => state.value
   const direction = () => state.direction
 
@@ -80,6 +88,7 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
       target,
       (next) => {
         const current = value()
+
         if (next === current) return
 
         setState("direction", next > current ? 1 : -1)
@@ -90,13 +99,17 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
   )
 
   const label = createMemo(() => value().toString())
+
   const digits = createMemo(() =>
     Array.from(label(), (char) => {
       const code = char.charCodeAt(0) - 48
+
       if (code < 0 || code > 9) return 0
+
       return code
     }).reverse(),
   )
+
   const width = createMemo(() => `${digits().length}ch`)
 
   return (

package/src/components/app-icon.tsx

@@ -46,7 +46,9 @@ const themed: Partial<Record<IconName, { light: string; dark: string }>> = {
 
 const scheme = () => {
   if (typeof document !== "object") return "light" as const
+
   if (document.documentElement.dataset.colorScheme === "dark") return "dark" as const
+
   return "light" as const
 }