@opencode/ui 2.0.22 → 2.0.23

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,15 @@ declare const source: {
     "ui.message.copyMessage": string;
     "ui.message.forkMessage": string;
     "ui.message.revertMessage": string;
+    "ui.message.moveToQueue": 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,253 @@
+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-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.23",
   "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/data-display/accordion/accordion.tsx

@@ -2,17 +2,27 @@ import { Content, Header, Item, Root, Trigger } from "@kobalte/core/accordion"
 import { splitProps } from "solid-js"
 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> {}
+
 export interface AccordionHeaderProps extends ComponentProps<typeof Header> {}
+
 export interface AccordionTriggerProps extends ComponentProps<typeof Trigger> {}
+
 export interface AccordionContentProps extends ComponentProps<typeof Content> {}
 
 function AccordionRoot(props: AccordionProps) {
-  const [split, rest] = splitProps(props, ["class", "classList"])
+  const [split, rest] = splitProps(props, ["class", "classList", "value"])
+
+  // SAFETY: Kobalte's createMultipleSelectionState copies selectedKeys into a Selection before changing it.
   return (
     <Root
       {...rest}
+      value={split.value as string[] | undefined}
       data-component="accordion"
       classList={{
         ...split.classList,
@@ -24,6 +34,7 @@ function AccordionRoot(props: AccordionProps) {
 
 function AccordionItem(props: AccordionItemProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <Item
       {...rest}
@@ -38,6 +49,7 @@ function AccordionItem(props: AccordionItemProps) {
 
 function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Header
       {...rest}
@@ -54,6 +66,7 @@ function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
 
 function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Trigger
       {...rest}
@@ -70,6 +83,7 @@ function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
 
 function AccordionContent(props: ParentProps<AccordionContentProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Content
       {...rest}