glimpse-sdk 0.2.0 → 0.3.0

package/dist/src/widgets.js

@@ -60,21 +60,6 @@ export class Image extends WidgetBase {
         return { type: "image", data: payload };
     }
 }
-export class IconWidget extends WidgetBase {
-    icon;
-    options;
-    constructor(icon, options = {}) {
-        super(options);
-        this.icon = icon;
-        this.options = options;
-    }
-    toProtocol() {
-        const payload = this.withCommon({ icon: this.icon.toProtocol() });
-        if (this.options.pixel_size !== undefined)
-            payload.pixel_size = this.options.pixel_size;
-        return { type: "icon", data: payload };
-    }
-}
 export class Progress extends WidgetBase {
     options;
     constructor(options) {
@@ -93,23 +78,121 @@ export class Progress extends WidgetBase {
         return { type: "progress", data: payload };
     }
 }
+export class LevelBar extends WidgetBase {
+    options;
+    constructor(options) {
+        super(options);
+        this.options = options;
+    }
+    toProtocol() {
+        return {
+            type: "level_bar",
+            data: this.withCommon({
+                value: this.options.value,
+                min: this.options.min ?? 0,
+                max: this.options.max ?? 1,
+                mode: this.options.mode ?? "continuous",
+            }),
+        };
+    }
+}
+export class Picture extends WidgetBase {
+    options;
+    constructor(options) {
+        super(options);
+        this.options = options;
+    }
+    toProtocol() {
+        const payload = this.withCommon({ path: this.options.path });
+        if (this.options.content_fit !== undefined)
+            payload.content_fit = this.options.content_fit;
+        return { type: "picture", data: payload };
+    }
+}
 export class Button extends WidgetBase {
     options;
     constructor(options = {}) {
-        super(options);
+        const { variant: _variant, ...common } = options;
+        super(common);
         this.options = options;
     }
     toProtocol() {
-        const payload = this.withCommon({});
+        const { variant, ...common } = this.options;
+        const payload = applyCommonProps({}, common);
         if (this.options.label !== undefined)
             payload.label = this.options.label;
         if (this.options.icon !== undefined)
-            payload.icon = this.options.icon.toProtocol();
-        if (this.options.child !== undefined)
-            payload.child = this.options.child.toProtocol();
+            payload.icon = this.options.icon;
+        if (this.options.enabled !== undefined)
+            payload.enabled = this.options.enabled;
+        if (variant !== undefined)
+            payload.variant = variant;
         return { type: "button", data: payload };
     }
 }
+export class LinkButton extends WidgetBase {
+    options;
+    constructor(options) {
+        super(options);
+        this.options = options;
+    }
+    toProtocol() {
+        const payload = this.withCommon({ uri: this.options.uri });
+        if (this.options.label !== undefined)
+            payload.label = this.options.label;
+        return { type: "link_button", data: payload };
+    }
+}
+export class Expander extends WidgetBase {
+    options;
+    constructor(options) {
+        super(options);
+        this.options = options;
+    }
+    toProtocol() {
+        return {
+            type: "expander",
+            data: this.withCommon({
+                label: this.options.label,
+                expanded: this.options.expanded ?? false,
+                child: this.options.child.toProtocol(),
+            }),
+        };
+    }
+}
+export class TreeExpander extends WidgetBase {
+    options;
+    constructor(options) {
+        super(options);
+        this.options = options;
+    }
+    toProtocol() {
+        return {
+            type: "tree_expander",
+            data: this.withCommon({
+                child: this.options.child.toProtocol(),
+                hide_expander: this.options.hide_expander ?? false,
+                indent_for_depth: this.options.indent_for_depth ?? false,
+                indent_for_icon: this.options.indent_for_icon ?? false,
+            }),
+        };
+    }
+}
+export class MenuButton extends WidgetBase {
+    options;
+    constructor(options) {
+        super(options);
+        this.options = options;
+    }
+    toProtocol() {
+        const payload = this.withCommon({ popover: this.options.popover.toProtocol() });
+        if (this.options.label !== undefined)
+            payload.label = this.options.label;
+        if (this.options.icon !== undefined)
+            payload.icon = this.options.icon;
+        return { type: "menu_button", data: payload };
+    }
+}
 export class Switch extends WidgetBase {
     options;
     constructor(options = {}) {
@@ -123,7 +206,20 @@ export class Switch extends WidgetBase {
         return { type: "switch", data: payload };
     }
 }
-export class Scale extends WidgetBase {
+export class ToggleButton extends WidgetBase {
+    options;
+    constructor(options = {}) {
+        super(options);
+        this.options = options;
+    }
+    toProtocol() {
+        const payload = this.withCommon({ active: this.options.active ?? false });
+        if (this.options.label !== undefined)
+            payload.label = this.options.label;
+        return { type: "toggle_button", data: payload };
+    }
+}
+export class Slider extends WidgetBase {
     options;
     constructor(options = {}) {
         super(options);
@@ -140,7 +236,7 @@ export class Scale extends WidgetBase {
             payload.orientation = this.options.orientation;
         if (this.options.draw_value !== undefined)
             payload.draw_value = this.options.draw_value;
-        return { type: "scale", data: payload };
+        return { type: "slider", data: payload };
     }
 }
 export class Checkbox extends WidgetBase {
@@ -156,7 +252,7 @@ export class Checkbox extends WidgetBase {
         return { type: "checkbox", data: payload };
     }
 }
-export class DropdownItem {
+export class SelectOption {
     id;
     label;
     constructor(id, label) {
@@ -167,7 +263,7 @@ export class DropdownItem {
         return { id: this.id, label: this.label };
     }
 }
-export class Dropdown extends WidgetBase {
+export class Select extends WidgetBase {
     options;
     constructor(options = {}) {
         super(options);
@@ -179,7 +275,7 @@ export class Dropdown extends WidgetBase {
         });
         if (this.options.selected !== undefined)
             payload.selected = this.options.selected;
-        return { type: "dropdown", data: payload };
+        return { type: "select", data: payload };
     }
 }
 export class Separator extends WidgetBase {
@@ -205,6 +301,37 @@ export class Scroll extends WidgetBase {
         return { type: "scroll", data: this.withCommon({ child: this.child.toProtocol() }) };
     }
 }
+export class Overlay extends WidgetBase {
+    options;
+    constructor(options) {
+        super(options);
+        this.options = options;
+    }
+    toProtocol() {
+        return {
+            type: "overlay",
+            data: this.withCommon({
+                child: this.options.child.toProtocol(),
+                overlays: (this.options.overlays ?? []).map((overlay) => overlay.toProtocol()),
+            }),
+        };
+    }
+}
+export class ListBox extends WidgetBase {
+    options;
+    constructor(options = {}) {
+        super(options);
+        this.options = options;
+    }
+    toProtocol() {
+        return {
+            type: "list_box",
+            data: this.withCommon({
+                children: (this.options.children ?? []).map((child) => child.toProtocol()),
+            }),
+        };
+    }
+}
 export class GridChild {
     row;
     column;
@@ -276,20 +403,6 @@ export class Card extends WidgetBase {
         };
     }
 }
-export class Header {
-    title;
-    subtitle;
-    constructor(title, subtitle = "") {
-        this.title = title;
-        this.subtitle = subtitle;
-    }
-    toProtocol() {
-        const payload = { title: this.title };
-        if (this.subtitle !== "")
-            payload.subtitle = this.subtitle;
-        return payload;
-    }
-}
 export class Section extends WidgetBase {
     options;
     constructor(options) {
@@ -297,80 +410,19 @@ export class Section extends WidgetBase {
         this.options = options;
     }
     toProtocol() {
-        const header = this.options.header ??
-            (this.options.title === undefined
-                ? undefined
-                : new Header(this.options.title, this.options.subtitle ?? ""));
-        const body = this.options.body ?? this.options.children ?? [];
-        return {
-            type: "section",
-            data: this.withCommon({
-                ...(header === undefined ? {} : { header: header.toProtocol() }),
-                body: body.map((child) => child.toProtocol()),
-            }),
+        const payload = {
+            title: this.options.title ?? "",
+            children: (this.options.children ?? []).map((child) => child.toProtocol()),
         };
-    }
-}
-export class Collapsible extends WidgetBase {
-    options;
-    constructor(options) {
-        super(options);
-        this.options = options;
-    }
-    toProtocol() {
-        const header = this.options.header ??
-            (this.options.title === undefined
-                ? undefined
-                : new Header(this.options.title, this.options.subtitle ?? ""));
-        const body = this.options.body ?? this.options.children ?? [];
+        if (this.options.subtitle !== undefined && this.options.subtitle !== "") {
+            payload.subtitle = this.options.subtitle;
+        }
         return {
-            type: "collapsible",
-            data: this.withCommon({
-                ...(header === undefined ? {} : { header: header.toProtocol() }),
-                expanded: this.options.expanded ?? false,
-                body: body.map((child) => child.toProtocol()),
-            }),
+            type: "section",
+            data: this.withCommon(payload),
         };
     }
 }
-export class Item extends WidgetBase {
-    options;
-    constructor(options = {}) {
-        super(options);
-        this.options = options;
-    }
-    toProtocol() {
-        const payload = this.withCommon({
-            label: this.options.label ?? "",
-            clickable: this.options.clickable ?? false,
-            menu: (this.options.menu ?? []).map((item) => item.toProtocol()),
-        });
-        if (this.options.left !== undefined)
-            payload.left = this.options.left.toProtocol();
-        if (this.options.right !== undefined)
-            payload.right = this.options.right.toProtocol();
-        return { type: "item", data: payload };
-    }
-}
-export class CollapsibleItem extends WidgetBase {
-    options;
-    constructor(options = {}) {
-        super(options);
-        this.options = options;
-    }
-    toProtocol() {
-        const payload = this.withCommon({
-            label: this.options.label ?? "",
-            expanded: this.options.expanded ?? false,
-            body: (this.options.body ?? this.options.children ?? []).map((child) => child.toProtocol()),
-        });
-        if (this.options.left !== undefined)
-            payload.left = this.options.left.toProtocol();
-        if (this.options.right !== undefined)
-            payload.right = this.options.right.toProtocol();
-        return { type: "collapsible_item", data: payload };
-    }
-}
 export class Meter extends WidgetBase {
     options;
     constructor(options) {
@@ -409,52 +461,6 @@ export class Copyable extends WidgetBase {
         };
     }
 }
-export class ToastAction {
-    id;
-    label;
-    constructor(id, label) {
-        this.id = id;
-        this.label = label;
-    }
-    toProtocol() {
-        return { id: this.id, label: this.label };
-    }
-}
-export class Toast extends WidgetBase {
-    options;
-    constructor(options) {
-        super(options);
-        this.options = options;
-    }
-    toProtocol() {
-        const payload = this.withCommon({
-            title: this.options.title,
-            message: this.options.message ?? "",
-        });
-        if (this.options.icon !== undefined)
-            payload.icon = this.options.icon.toProtocol();
-        if (this.options.action !== undefined)
-            payload.action = this.options.action.toProtocol();
-        return { type: "toast", data: payload };
-    }
-}
-export class ActionRow extends WidgetBase {
-    options;
-    constructor(options) {
-        super(options);
-        this.options = options;
-    }
-    toProtocol() {
-        const payload = this.withCommon({
-            title: this.options.title,
-            subtitle: this.options.subtitle ?? "",
-            meta: this.options.meta ?? "",
-        });
-        if (this.options.icon !== undefined)
-            payload.icon = this.options.icon.toProtocol();
-        return { type: "action_row", data: payload };
-    }
-}
 export class Row extends WidgetBase {
     options;
     constructor(options = {}) {
@@ -487,78 +493,88 @@ export class Column extends WidgetBase {
         };
     }
 }
-export class ActionMenuItem {
+export class Spinner extends WidgetBase {
     options;
-    constructor(options) {
+    constructor(options = {}) {
+        super(options);
         this.options = options;
     }
     toProtocol() {
-        const payload = {
-            id: this.options.id,
-            label: this.options.label,
+        return {
+            type: "spinner",
+            data: this.withCommon({ spinning: this.options.spinning ?? true }),
         };
-        if (this.options.icon !== undefined)
-            payload.icon = this.options.icon.toProtocol();
-        if (this.options.visible !== undefined)
-            payload.visible = this.options.visible;
-        if (this.options.checked !== undefined)
-            payload.checked = this.options.checked;
-        if (this.options.selectable !== undefined)
-            payload.selectable = this.options.selectable;
-        return payload;
     }
 }
-export class ActionMenu extends WidgetBase {
+export class PropertyList extends WidgetBase {
     options;
     constructor(options = {}) {
         super(options);
         this.options = options;
     }
     toProtocol() {
-        const payload = this.withCommon({
-            items: (this.options.items ?? []).map((item) => item.toProtocol()),
-        });
-        if (this.options.header !== undefined)
-            payload.header = this.options.header;
-        return { type: "action_menu", data: payload };
+        const payload = {
+            rows: Object.entries(this.options.rows ?? {}).map(([key, value]) => ({ key, value })),
+        };
+        if (this.options.title !== undefined && this.options.title !== "") {
+            payload.title = this.options.title;
+        }
+        return {
+            type: "property_list",
+            data: this.withCommon(payload),
+        };
     }
 }
-export class Spinner extends WidgetBase {
+export class Item extends WidgetBase {
     options;
-    constructor(options = {}) {
+    constructor(options) {
         super(options);
         this.options = options;
     }
     toProtocol() {
+        const payload = {
+            label: this.options.label,
+        };
+        if (this.options.icon !== undefined && this.options.icon !== "") {
+            payload.icon = this.options.icon;
+        }
+        if (this.options.sublabel !== undefined && this.options.sublabel !== "") {
+            payload.sublabel = this.options.sublabel;
+        }
+        if (this.options.right !== undefined) {
+            payload.right = this.options.right.toProtocol();
+        }
         return {
-            type: "spinner",
-            data: this.withCommon({ spinning: this.options.spinning ?? true }),
+            type: "item",
+            data: this.withCommon(payload),
         };
     }
 }
-export class DetailGridItem {
-    key;
-    value;
-    constructor(key, value) {
-        this.key = key;
-        this.value = value;
-    }
-    toProtocol() {
-        return { key: this.key, value: this.value };
-    }
-}
-export class DetailGrid extends WidgetBase {
+export class ActionItem extends WidgetBase {
     options;
-    constructor(options = {}) {
+    constructor(options) {
         super(options);
         this.options = options;
     }
     toProtocol() {
+        const payload = {
+            label: this.options.label,
+        };
+        if (this.options.icon !== undefined && this.options.icon !== "") {
+            payload.icon = this.options.icon;
+        }
+        if (this.options.sublabel !== undefined && this.options.sublabel !== "") {
+            payload.sublabel = this.options.sublabel;
+        }
+        if (this.options.right !== undefined) {
+            payload.right = this.options.right.toProtocol();
+        }
+        if (this.options.enabled !== undefined) {
+            payload.enabled = this.options.enabled;
+        }
         return {
-            type: "detail_grid",
-            data: this.withCommon({
-                rows: (this.options.rows ?? []).map((row) => row.toProtocol()),
-            }),
+            type: "action_item",
+            data: this.withCommon(payload),
         };
     }
 }
@@ -601,6 +617,44 @@ export class StatusDot extends WidgetBase {
         return { type: "status", data: this.withCommon({}) };
     }
 }
+export class PagerItem extends WidgetBase {
+    options;
+    constructor(options = {}) {
+        super(options);
+        this.options = options;
+    }
+    toData() {
+        return this.withCommon({
+            appearance: this.options.appearance ?? "dots",
+            label: this.options.label ?? "",
+            active: this.options.active ?? false,
+            inactive: this.options.inactive ?? false,
+            occupied: this.options.occupied ?? false,
+            urgent: this.options.urgent ?? false,
+        });
+    }
+    toProtocol() {
+        return {
+            type: "pager_item",
+            data: this.toData(),
+        };
+    }
+}
+export class PagerStrip extends WidgetBase {
+    options;
+    constructor(options = {}) {
+        super(options);
+        this.options = options;
+    }
+    toProtocol() {
+        return {
+            type: "pager_strip",
+            data: this.withCommon({
+                items: (this.options.items ?? []).map((item) => item.toData()),
+            }),
+        };
+    }
+}
 export class Box extends WidgetBase {
     options;
     constructor(options = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glimpse-sdk",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Typed async framework for building Glimpse exec applets",
   "type": "module",
   "main": "dist/src/index.js",

package/src/app.ts

@@ -23,23 +23,6 @@ interface OutgoingMessage {
   line: string;
 }
 
-export class RenderResult {
-  constructor(
-    public readonly options: {
-      status?: StatusItem[];
-      tree?: TreeNode | null;
-    } = {},
-  ) {}
-
-  get status(): StatusItem[] {
-    return this.options.status ?? [];
-  }
-
-  get tree(): TreeNode | null {
-    return this.options.tree ?? null;
-  }
-}
-
 export abstract class Applet<State extends object> {
   state: State;
 
@@ -63,8 +46,12 @@ export abstract class Applet<State extends object> {
 
   protected async onCallback(_event: CallbackEvent): Promise<void> {}
 
-  protected async render(): Promise<RenderResult> {
-    return new RenderResult();
+  protected async status(_state: State): Promise<StatusItem[]> {
+    return [];
+  }
+
+  protected async popover(_state: State): Promise<TreeNode | null> {
+    return null;
   }
 
   async setState(patch: Partial<State>): Promise<void> {
@@ -188,16 +175,18 @@ export abstract class Applet<State extends object> {
   }
 
   private async flushRender(): Promise<void> {
-    const rendered = await this.render();
-    const status = rendered.status.map((item) => item.toProtocol());
-    const tree = { root: rendered.tree?.toProtocol() ?? null };
-
+    const statusItems = await this.status(this.state);
+    const status = statusItems.map((item) => item.toProtocol());
     if (!deepEqual(status, this.lastStatus)) {
       this.lastStatus = status;
       this.emit("status", { items: status });
     }
-    const publishPopover = this.popoverOpen || this.lastTree === null || tree.root === null;
-    if (publishPopover && !deepEqual(tree, this.lastTree)) {
+
+    const widget = await this.popover(this.state);
+    const tree = { root: widget?.toProtocol() ?? null };
+    // Emit only when popover open, or first render, or clearing.
+    const shouldEmit = this.popoverOpen || this.lastTree === null || tree.root === null;
+    if (shouldEmit && !deepEqual(tree, this.lastTree)) {
       this.lastTree = tree;
       this.emit("popover", tree);
     }