@vicinae/api 0.16.1 → 0.16.3

package/dist/api/bus.d.ts

@@ -38,6 +38,7 @@ type EndpointMapping = {
     "app.list": "app.list";
     "app.open": "app.open";
     "app.getDefault": "app.getDefault";
+    "app.runInTerminal": "app.runInTerminal";
     "ui.render": "ui.render";
     "ui.showToast": "ui.showToast";
     "ui.hideToast": "ui.hideToast";
@@ -53,6 +54,7 @@ type EndpointMapping = {
     "wm.getActiveWindow": "wm.getActiveWindow";
     "wm.getActiveWorkspace": "wm.getActiveWorkspace";
     "wm.getWindows": "wm.getWindows";
+    "wm.getScreens": "wm.getScreens";
     "wm.getWorkspaces": "wm.getWorkspaces";
     "wm.setWindowBounds": "wm.setWindowBounds";
     "fileSearch.search": "fileSearch.search";
@@ -64,6 +66,9 @@ type EndpointMapping = {
     "storage.clear": "storage.clear";
     "storage.list": "storage.list";
     "oauth.authorize": "oauth.authorize";
+    "oauth.getTokens": "oauth.getTokens";
+    "oauth.setTokens": "oauth.setTokens";
+    "oauth.removeTokens": "oauth.removeTokens";
     "clipboard.copy": "clipboard.copy";
     "clipboard.paste": "clipboard.paste";
     "clipboard.readContent": "clipboard.readContent";

package/dist/api/cache.js

@@ -77,19 +77,20 @@ class Cache {
             throw new Error(`A single cache entry cannot be bigger than the total capacity of the cache. The data for key ${key} is ${data.length} bytes long while the capacity is set to ${this.capacity}. You should either reduce the amount of data stored or increase the cache's capacity.`);
         }
         const info = this.index.keys[key];
-        let newTotalSize = this.index.size + data.length - (info?.size ?? 0);
+        const newTotalSize = this.index.size + data.length - (info?.size ?? 0);
         if (newTotalSize > this.capacity) {
             this.popLRU();
-            return this.set(key, data); // FIXME: get rid of recursion
+            this.set(key, data); // FIXME: get rid of recursion
+            return;
         }
         this.index.size = newTotalSize;
         this.index.keys[key] = { size: data.length };
         this.updateLRU(key);
+        this.writeKeyData(key, data);
+        this.syncIndex();
         for (const sub of this.subscribers) {
             sub(key, data);
         }
-        this.writeKeyData(key, data);
-        this.syncIndex();
     };
     /**
      * Removes the data for the given key.

package/dist/api/color.d.ts

@@ -1,3 +1,4 @@
+import * as ui from "./proto/ui";
 type DynamicColor = {
     dark: string;
     light: string;
@@ -19,6 +20,6 @@ export declare enum Color {
     SecondaryText = "secondary-text"
 }
 export type ColorLike = Color.Dynamic | Color.Raw | Color;
-export type SerializedColorLike = Color.Dynamic | string;
+export type SerializedColorLike = ui.ColorLike;
 export declare const serializeColorLike: (color: ColorLike) => SerializedColorLike;
 export {};

package/dist/api/color.js

@@ -1,6 +1,40 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.serializeColorLike = exports.Color = void 0;
+const ui = __importStar(require("./proto/ui"));
 var Color;
 (function (Color) {
     Color["Blue"] = "blue";
@@ -14,9 +48,20 @@ var Color;
     Color["SecondaryText"] = "secondary-text";
 })(Color || (exports.Color = Color = {}));
 const serializeColorLike = (color) => {
-    if (typeof color == "string") {
-        return color;
+    const colorLike = ui.ColorLike.create();
+    if (typeof color === "string") {
+        colorLike.raw = color;
+    }
+    else {
+        // It's a DynamicColor
+        const dynamicColor = ui.DynamicColor.create();
+        dynamicColor.light = color.light;
+        dynamicColor.dark = color.dark;
+        if (color.adjustContrast !== undefined) {
+            dynamicColor.adjustContrast = color.adjustContrast;
+        }
+        colorLike.dynamic = dynamicColor;
     }
-    return color;
+    return colorLike;
 };
 exports.serializeColorLike = serializeColorLike;

package/dist/api/components/action-pannel.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from "react";
-import { Image } from "../image";
-import { Keyboard } from "../keyboard";
+import type { ReactNode } from "react";
+import { type Image } from "../image";
+import type { Keyboard } from "../keyboard";
 export type ActionPanelProps = {
     title?: string;
     children?: ReactNode;

package/dist/api/components/action-pannel.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionPanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const image_1 = require("../image");
 const ActionPanelRoot = (props) => {
     const nativeProps = props;
     return (0, jsx_runtime_1.jsx)("action-panel", { ...nativeProps });
@@ -12,8 +13,9 @@ const ActionPanelSection = (props) => {
     };
     return ((0, jsx_runtime_1.jsx)("action-panel-section", { ...nativeProps, children: props.children }));
 };
-const ActionPannelSubmenu = ({ children, ...props }) => {
-    return (0, jsx_runtime_1.jsx)("action-panel-submenu", { ...props, children: children });
+const ActionPannelSubmenu = ({ children, icon, ...props }) => {
+    const serializedIcon = icon ? (0, image_1.serializeProtoImage)(icon) : icon;
+    return ((0, jsx_runtime_1.jsx)("action-panel-submenu", { ...props, icon: serializedIcon, children: children }));
 };
 exports.ActionPanel = Object.assign(ActionPanelRoot, {
     Section: ActionPanelSection,

package/dist/api/components/actions.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
+import type { PathLike } from "node:fs";
 import { Clipboard } from "../clipboard";
-import { ImageLike } from "../image";
+import { type ImageLike } from "../image";
 import { Keyboard } from "../keyboard";
 import { Application } from "../utils";
 import { Form } from "./form";
@@ -40,6 +41,13 @@ export type ActionPasteProps = BaseActionProps & {
 export type ActionOpenInBrowserProps = BaseActionProps & {
     url: string;
 };
+export type ActionShowInFinderProps = {
+    path: PathLike;
+    icon?: ImageLike;
+    onShow?: (path: PathLike) => void;
+    shortcut?: Keyboard.Shortcut;
+    title?: string;
+};
 export type ActionSubmitFormProps = Omit<BaseActionProps, "title"> & {
     onSubmit: (input: Form.Values) => boolean | void | Promise<boolean | void>;
     title?: string;
@@ -61,6 +69,7 @@ export declare const Action: React.FC<ActionProps> & {
     Paste: React.FC<ActionPasteProps>;
     SubmitForm: React.FC<ActionSubmitFormProps>;
     OpenInBrowser: React.FC<ActionOpenInBrowserProps>;
+    ShowInFinder: React.FC<ActionShowInFinderProps>;
     CreateQuicklink: React.FC<ActionCreateQuicklinkProps>;
     Style: {
         Regular: "regular";

package/dist/api/components/actions.js

@@ -4,11 +4,15 @@ exports.Action = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const index_1 = require("../hooks/index");
 const clipboard_1 = require("../clipboard");
+const image_1 = require("../image");
 const utils_1 = require("../utils");
 const icon_1 = require("../icon");
 const controls_1 = require("../controls");
 const ActionRoot = (props) => {
-    return (0, jsx_runtime_1.jsx)("action", { ...props });
+    const serializedIcon = props.icon
+        ? (0, image_1.serializeProtoImage)(props.icon)
+        : props.icon;
+    return (0, jsx_runtime_1.jsx)("action", { ...props, icon: serializedIcon });
 };
 const CopyToClipboard = ({ title = "Copy to clipboard", icon = icon_1.Icon.CopyClipboard, content, concealed = false, onCopy, ...props }) => {
     return ((0, jsx_runtime_1.jsx)(ActionRoot, { title: title, ...props, icon: icon_1.Icon.CopyClipboard, onAction: async () => {
@@ -34,6 +38,11 @@ const OpenInBrowser = ({ url, ...props }) => {
             (0, utils_1.open)(url);
         } }));
 };
+const ShowInFinder = ({ path, title = "Show in Finder", ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(ActionRoot, { ...props, title: title, onAction: () => {
+            (0, utils_1.showInFileBrowser)(path);
+        } }));
+};
 const Push = ({ target, ...props }) => {
     const { push } = (0, index_1.useNavigation)();
     return ((0, jsx_runtime_1.jsx)(ActionRoot, { ...props, onAction: () => {
@@ -45,6 +54,7 @@ const SubmitForm = ({ title = "Submit", ...props }) => {
     const nativeProps = {
         ...props,
         title,
+        icon: props.icon ? (0, image_1.serializeProtoImage)(props.icon) : props.icon,
         onAction: () => { },
     };
     return (0, jsx_runtime_1.jsx)("action", { ...nativeProps });
@@ -62,6 +72,7 @@ const CreateQuicklink = ({ title = "Create Quicklink", quicklink, ...props }) =>
                 : quicklink.application?.name,
             icon: quicklink.icon,
         },
+        icon: props.icon ? (0, image_1.serializeProtoImage)(props.icon) : props.icon,
         onAction: () => { },
     };
     return (0, jsx_runtime_1.jsx)("action", { ...nativeProps });
@@ -73,6 +84,7 @@ exports.Action = Object.assign(ActionRoot, {
     Paste,
     SubmitForm,
     OpenInBrowser,
+    ShowInFinder,
     CreateQuicklink,
     Style: {
         Regular: "regular",

package/dist/api/components/dropdown.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { Image } from "../image";
+import { type Image } from "../image";
 export declare namespace Dropdown {
     type Props = DropdownProps;
     type Item = DropdownItemProps;

package/dist/api/components/dropdown.js

@@ -2,11 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const image_1 = require("../image");
 const DropdownRoot = ({ children, ...props }) => {
     return (0, jsx_runtime_1.jsx)("dropdown", { ...props, children: children });
 };
 const Item = ({ title, value, icon }) => {
-    return (0, jsx_runtime_1.jsx)("dropdown-item", { title: title, value: value, icon: icon });
+    const serializedIcon = icon ? (0, image_1.serializeProtoImage)(icon) : icon;
+    return (0, jsx_runtime_1.jsx)("dropdown-item", { title: title, value: value, icon: serializedIcon });
 };
 const Section = ({ title, children }) => {
     return (0, jsx_runtime_1.jsx)("dropdown-section", { title: title, children: children });

package/dist/api/components/empty-view.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyView = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const EmptyView = ({ actions, ...props }) => {
-    return (0, jsx_runtime_1.jsx)("empty-view", { ...props, children: actions });
+const image_1 = require("../image");
+const EmptyView = ({ actions, icon, ...props }) => {
+    const serializedIcon = icon ? (0, image_1.serializeProtoImage)(icon) : icon;
+    return ((0, jsx_runtime_1.jsx)("empty-view", { ...props, icon: serializedIcon, children: actions }));
 };
 exports.EmptyView = EmptyView;

package/dist/api/components/form.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, Ref } from "react";
-import { ImageLike } from "../image";
+import { type ImageLike } from "../image";
 type FormProps = {
     actions?: React.ReactNode;
     children?: React.ReactNode;
@@ -57,7 +57,14 @@ interface TextFieldProps extends FormItemProps<string>, WithFormRef<Form.TextFie
 }
 interface PasswordFieldProps extends FormItemProps<string>, WithFormRef<Form.PasswordField> {
 }
+export declare enum DatePickerType {
+    DateTime = "dateTime",
+    Date = "date"
+}
 interface DatePickerProps extends FormItemProps<Date | null>, WithFormRef<Form.DatePicker> {
+    min?: Date;
+    max?: Date;
+    type?: DatePickerType;
 }
 interface CheckboxProps extends FormItemProps<boolean>, WithFormRef<Form.Checkbox> {
     label?: string;
@@ -77,6 +84,10 @@ interface TagPickerProps extends FormItemProps<string[]>, WithFormRef<Form.TagPi
 interface TextAreaProps extends FormItemProps<string>, WithFormRef<Form.TextArea> {
 }
 interface FilePickerProps extends FormItemProps<string[]>, WithFormRef<Form.FilePicker> {
+    allowMultipleSelection?: boolean;
+    canChooseDirectories?: boolean;
+    canChooseFiles?: boolean;
+    showHiddenFiles?: boolean;
 }
 type DescriptionProps = {
     text: string;
@@ -85,7 +96,10 @@ type DescriptionProps = {
 export declare const Form: import("react").FC<FormProps> & {
     TextField: import("react").FC<TextFieldProps>;
     PasswordField: import("react").FC<PasswordFieldProps>;
-    DatePicker: import("react").FC<DatePickerProps>;
+    DatePicker: import("react").FC<DatePickerProps> & {
+        Type: typeof DatePickerType;
+        isFullDay: (value: Date | null | undefined) => boolean;
+    };
     Checkbox: import("react").FC<CheckboxProps>;
     TextArea: import("react").FC<TextAreaProps>;
     Dropdown: import("react").FC<DropdownProps> & {

package/dist/api/components/form.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Form = void 0;
+exports.Form = exports.DatePickerType = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const use_imperative_form_handle_1 = require("../hooks/use-imperative-form-handle");
+const image_1 = require("../image");
 const dropdown_1 = require("./dropdown");
 const wrapFormItemProps = (props) => {
     return {
@@ -36,10 +37,32 @@ const PasswordField = ({ ref, ...props }) => {
     (0, use_imperative_form_handle_1.useImperativeFormHandle)(ref);
     return (0, jsx_runtime_1.jsx)("password-field", { ...props });
 };
-const DatePicker = ({ ref, ...props }) => {
+var DatePickerType;
+(function (DatePickerType) {
+    DatePickerType["DateTime"] = "dateTime";
+    DatePickerType["Date"] = "date";
+})(DatePickerType || (exports.DatePickerType = DatePickerType = {}));
+const DatePickerRoot = ({ ref, onChange, ...props }) => {
     (0, use_imperative_form_handle_1.useImperativeFormHandle)(ref);
-    return (0, jsx_runtime_1.jsx)("date-picker-field", { ...props });
+    const _onChange = onChange
+        ? (newValue) => {
+            const dateObj = newValue ? new Date(newValue) : null;
+            onChange(dateObj);
+        }
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)("date-picker-field", { ...wrapFormItemProps(props), onChange: _onChange }));
 };
+const DatePicker = Object.assign(DatePickerRoot, {
+    Type: DatePickerType,
+    isFullDay: (value) => {
+        if (!value)
+            return false;
+        return (value.getHours() === 0 &&
+            value.getMinutes() === 0 &&
+            value.getSeconds() === 0 &&
+            value.getMilliseconds() === 0);
+    },
+});
 const Checkbox = ({ ref, ...props }) => {
     (0, use_imperative_form_handle_1.useImperativeFormHandle)(ref);
     return (0, jsx_runtime_1.jsx)("checkbox-field", { ...wrapFormItemProps(props) });
@@ -59,7 +82,8 @@ const TagPickerRoot = ({ children, ...props }) => {
     return ((0, jsx_runtime_1.jsx)("tag-picker-field", { ...wrapFormItemProps(props), children: children }));
 };
 const TagPickerItem = ({ icon, ...props }) => {
-    return (0, jsx_runtime_1.jsx)("tag-picker-item", { ...props, icon: icon });
+    const serializedIcon = icon ? (0, image_1.serializeProtoImage)(icon) : icon;
+    return (0, jsx_runtime_1.jsx)("tag-picker-item", { ...props, icon: serializedIcon });
 };
 const TagPicker = Object.assign(TagPickerRoot, {
     Item: TagPickerItem,

package/dist/api/components/grid.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
-import { Image, ImageLike } from "../image";
-import { Color, ColorLike } from "../color";
+import { type Image, type ImageLike } from "../image";
+import { type ColorLike } from "../color";
 declare enum GridInset {
     Zero = "zero",
     Small = "small",
@@ -56,7 +56,7 @@ export declare namespace Grid {
     export type ItemSize = GridItemSize;
     export type AspectRatio = "1" | "3/2" | "2/3" | "4/3" | "3/4" | "16/9" | "9/16" | "21/9" | "9/21" | "32/9" | "9/32";
     export namespace Item {
-        export type Props = {
+        type Props = {
             title?: string;
             detail?: React.ReactNode;
             keywords?: string[];
@@ -64,31 +64,20 @@ export declare namespace Grid {
             content: Image.ImageLike | {
                 color: ColorLike;
             } | {
-                value: Image.ImageLike;
+                value: Image.ImageLike | {
+                    color: ColorLike;
+                };
                 tooltip?: string;
             };
             id?: string;
             subtitle?: string;
             actions?: ReactNode;
-            accessories?: Grid.Item.Accessory[];
+            accessory?: Grid.Item.Accessory;
         };
-        type Tag = string | Date | undefined | null | {
-            color: ColorLike;
-            value: string | Date | undefined | null;
-        };
-        type Text = string | Date | undefined | null | {
-            color: Color;
-            value: string | Date | undefined | null;
-        };
-        export type Accessory = ({
-            tag?: Tag;
-        } | {
-            text?: Text;
-        }) & {
+        type Accessory = {
             icon?: Image.ImageLike;
             tooltip?: string | null;
         };
-        export {};
     }
     export {};
 }

package/dist/api/components/grid.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Grid = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const image_1 = require("../image");
 const crypto_1 = require("crypto");
 const empty_view_1 = require("./empty-view");
+const color_1 = require("../color");
 const dropdown_1 = require("./dropdown");
 var GridInset;
 (function (GridInset) {
@@ -55,9 +57,37 @@ const GridRoot = ({ searchBarAccessory, children, actions, inset, itemSize, fit
     }
     return ((0, jsx_runtime_1.jsxs)("grid", { fit: fit, inset: inset, aspectRatio: aspectRatioMap[aspectRatio], ...props, children: [searchBarAccessory, children, actions] }));
 };
-const GridItem = ({ detail, actions, ...props }) => {
+const GridItem = ({ detail, actions, content, accessory, ...props }) => {
     const id = (0, react_1.useRef)(props.id ?? (0, crypto_1.randomUUID)());
-    return ((0, jsx_runtime_1.jsxs)("grid-item", { ...props, id: id.current, children: [detail, actions] }));
+    // Remove value wrapper
+    const innerContent = typeof content === "object" && "value" in content ? content.value : content;
+    const tooltip = typeof content === "object" && "tooltip" in content
+        ? content.tooltip
+        : undefined;
+    // Content
+    let serializedContent;
+    if (innerContent &&
+        typeof innerContent === "object" &&
+        "color" in innerContent) {
+        serializedContent = {
+            color: (0, color_1.serializeColorLike)(innerContent.color),
+        };
+    }
+    else {
+        serializedContent = innerContent
+            ? (0, image_1.serializeProtoImage)(innerContent)
+            : undefined;
+    }
+    // Accessory
+    const serializedAccessory = accessory
+        ? {
+            icon: accessory.icon
+                ? (0, image_1.serializeProtoImage)(accessory.icon)
+                : accessory.icon,
+            tooltip: accessory.tooltip,
+        }
+        : undefined;
+    return ((0, jsx_runtime_1.jsxs)("grid-item", { ...props, content: serializedContent, tooltip: tooltip, accessory: serializedAccessory, id: id.current, children: [detail, actions] }));
 };
 const GridSection = ({ fit, aspectRatio, inset, ...props }) => {
     const nativeProps = {

package/dist/api/components/list.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
-import { Image, ImageLike } from "../image";
-import { Color, ColorLike } from "../color";
+import { type Image, type ImageLike, type SerializedImageLike } from "../image";
+import { type Color, type ColorLike, type SerializedColorLike } from "../color";
 export declare namespace List {
     type Props = {
         actions?: React.ReactNode;
@@ -31,7 +31,10 @@ export declare namespace List {
             title: string;
             keywords?: string[];
             detail?: React.ReactNode;
-            icon?: ImageLike;
+            icon?: ImageLike | {
+                value: ImageLike | undefined | null;
+                tooltip: string;
+            };
             id?: string;
             subtitle?: string;
             actions?: ReactNode;
@@ -63,6 +66,22 @@ export declare namespace List {
         };
     }
 }
+export type SerializedTag = List.Item.AccessoryBase | {
+    color: SerializedColorLike;
+    value: string | Date | undefined | null;
+};
+export type SerializedText = List.Item.AccessoryBase | {
+    color: SerializedColorLike;
+    value: string | Date | undefined | null;
+};
+export type SerializedAccessory = ({
+    tag?: SerializedTag;
+} | {
+    text?: SerializedText;
+}) & {
+    icon?: SerializedImageLike;
+    tooltip?: string | null;
+};
 export declare const List: React.FC<List.Props> & {
     Section: React.FC<List.Section.Props>;
     EmptyView: React.FC<import("./empty-view").EmptyViewProps>;

package/dist/api/components/list.js

@@ -3,10 +3,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const image_1 = require("../image");
 const crypto_1 = require("crypto");
 const metadata_1 = require("./metadata");
 const empty_view_1 = require("./empty-view");
+const color_1 = require("../color");
 const dropdown_1 = require("./dropdown");
+function serializeAccessory(accessory) {
+    const icon = accessory.icon ? (0, image_1.serializeProtoImage)(accessory.icon) : undefined;
+    const tag = typeof accessory === "object" && "tag" in accessory
+        ? serializeTag(accessory.tag)
+        : undefined;
+    const text = typeof accessory === "object" && "text" in accessory
+        ? serializeText(accessory.text)
+        : undefined;
+    return { icon, tooltip: accessory.tooltip, tag, text };
+}
+function serializeTag(tag) {
+    if (tag == null)
+        return tag; // null or undefined
+    if (typeof tag !== "object")
+        return tag;
+    if ("color" in tag) {
+        const color = (0, color_1.serializeColorLike)(tag.color);
+        const value = "value" in tag ? tag.value : undefined;
+        return { color, value };
+    }
+}
+function serializeText(text) {
+    if (text == null)
+        return text; // null or undefined
+    if (typeof text !== "object")
+        return text;
+    if ("color" in text) {
+        const color = (0, color_1.serializeColorLike)(text.color);
+        const value = "value" in text ? text.value : undefined;
+        return { color, value };
+    }
+}
 const ListRoot = ({ searchBarAccessory, children, actions, ...props }) => {
     if (typeof props.enableFiltering === "boolean" &&
         typeof props.filtering === "undefined") {
@@ -14,9 +48,22 @@ const ListRoot = ({ searchBarAccessory, children, actions, ...props }) => {
     }
     return ((0, jsx_runtime_1.jsxs)("list", { ...props, children: [searchBarAccessory, children, actions] }));
 };
-const ListItem = ({ detail, actions, ...props }) => {
+const ListItem = ({ detail, actions, icon, accessories, ...props }) => {
     const id = (0, react_1.useRef)(props.id ?? (0, crypto_1.randomUUID)());
-    return ((0, jsx_runtime_1.jsxs)("list-item", { ...props, id: id.current, children: [detail, actions] }));
+    // Icon
+    let serializedIcon;
+    if (icon && typeof icon === "object" && "value" in icon) {
+        serializedIcon = {
+            value: icon.value ? (0, image_1.serializeProtoImage)(icon.value) : undefined,
+            tooltip: icon.tooltip,
+        };
+    }
+    else {
+        serializedIcon = icon ? (0, image_1.serializeProtoImage)(icon) : undefined;
+    }
+    // Accessories
+    const serializedAccessories = accessories?.map(serializeAccessory) ?? undefined;
+    return ((0, jsx_runtime_1.jsxs)("list-item", { ...props, icon: serializedIcon, accessories: serializedAccessories, id: id.current, children: [detail, actions] }));
 };
 const ListItemDetail = ({ metadata, ...props }) => {
     return (0, jsx_runtime_1.jsx)("list-item-detail", { ...props, children: metadata });

package/dist/api/components/metadata.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ImageLike } from "../image";
+import { type ImageLike } from "../image";
 export type MetadataProps = {
     children?: React.ReactNode;
 };

package/dist/api/components/metadata.js

@@ -2,12 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Metadata = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const image_1 = require("../image");
 const tag_1 = require("./tag");
 const MetadataRoot = (props) => {
     return (0, jsx_runtime_1.jsx)("metadata", { ...props });
 };
 const MetadataLabel = (props) => {
-    return (0, jsx_runtime_1.jsx)("metadata-label", { ...props });
+    const serializedIcon = props.icon
+        ? (0, image_1.serializeProtoImage)(props.icon)
+        : props.icon;
+    return (0, jsx_runtime_1.jsx)("metadata-label", { ...props, icon: serializedIcon });
 };
 const MetadataSeparator = () => {
     return (0, jsx_runtime_1.jsx)("metadata-separator", {});

package/dist/api/components/tag.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
-import { ImageLike } from "../image";
-import { ColorLike } from "../color";
+import { type ColorLike } from "../color";
+import { type ImageLike } from "../image";
 export type TagListProps = {
     title: string;
     children: ReactNode;