@opencode/ui 2.0.21 → 2.0.23

package/dist/context/dialog.d.ts

@@ -14,8 +14,12 @@ export declare function useDialogLayer(): {
 export declare function DialogProvider(props: ParentProps): JSX.Element;
 export declare function useDialog(): {
     readonly active: Active | undefined;
-    show(element: DialogElement, onClose?: () => void): Promise<void>;
-    push(element: DialogElement, onClose?: () => void): Promise<void>;
-    close(): void;
+    /**
+     * id lets the caller close this dialog later rather than whichever is on top. Opening is deferred; once
+     * signal aborts, the open neither mounts nor replaces anything and onClose runs as for a replaced dialog.
+     */
+    show(element: DialogElement, onClose?: () => void, id?: string, signal?: AbortSignal): Promise<void>;
+    push(element: DialogElement, onClose?: () => void, id?: string, signal?: AbortSignal): Promise<void>;
+    close(id?: string): void;
 };
 export {};

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/data-display/project-avatar/project-avatar.d.ts

@@ -3,6 +3,16 @@ import "./project-avatar.css";
 export declare const PROJECT_AVATAR_VARIANTS: readonly ["orange", "yellow", "cyan", "green", "red", "pink", "blue", "purple", "gray"];
 export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number];
 export type ProjectAvatarStyle = ProjectAvatarVariant | "outline";
+export declare function getProjectAvatarSource(id?: string, icon?: {
+    color?: string;
+    url?: string;
+    override?: string;
+}): string | undefined;
+export declare function getProjectAvatarVariant(key?: string): ProjectAvatarVariant;
+export declare const displayName: (project: {
+    name?: string;
+    worktree: string;
+}) => string;
 export interface ProjectAvatarProps extends ComponentProps<"div"> {
     fallback: string;
     src?: string;

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.21",
+  "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"