glimpse-sdk 0.5.0 → 0.8.0

package/dist/src/widgets.js

@@ -1,680 +1,619 @@
-function applyCommonProps(payload, props) {
-    if (props.id !== undefined)
-        payload.id = props.id;
-    if (props.visible !== undefined)
-        payload.visible = props.visible;
-    if (props.hexpand !== undefined)
-        payload.hexpand = props.hexpand;
-    if (props.vexpand !== undefined)
-        payload.vexpand = props.vexpand;
-    if (props.halign !== undefined)
-        payload.halign = props.halign;
-    if (props.valign !== undefined)
-        payload.valign = props.valign;
-    if (props.tooltip !== undefined)
-        payload.tooltip = props.tooltip;
-    if (props.variant !== undefined)
-        payload.variant = props.variant;
-    return payload;
-}
-class WidgetBase {
+export class InlineHandlerRegistry {
+    handlers = new Map();
+    generatedId(event, path) {
+        const suffix = path.length === 0 ? "root" : path.join(".");
+        return `__glimpse:${event}:${suffix}`;
+    }
+    targetId(event, id, path) {
+        return id ?? this.generatedId(event, path);
+    }
+    add(event, id, handler) {
+        this.handlers.set(`${event}:${id}`, handler);
+    }
+}
+export class WidgetBase {
     common;
     constructor(common = {}) {
         this.common = common;
     }
-    withCommon(payload) {
-        return applyCommonProps(payload, this.common);
+    bindHandlers(_registry, _path) { }
+    toProtocol() {
+        return { type: this.type, data: this.data() };
+    }
+    commonData() {
+        const out = {};
+        if (this.common.visible !== undefined)
+            out.visible = this.common.visible;
+        if (this.common.tooltip !== undefined)
+            out.tooltip = this.common.tooltip;
+        if (this.common.css_classes?.length)
+            out.css_classes = this.common.css_classes;
+        if (this.common.styles && Object.keys(this.common.styles).length > 0)
+            out.styles = this.common.styles;
+        return out;
     }
 }
+const child = (node) => node?.toProtocol();
+const children = (nodes) => nodes.map((node) => node.toProtocol());
 export class Label extends WidgetBase {
-    text;
+    type = "label";
     options;
-    constructor(text, options = {}) {
-        super(options);
-        this.text = text;
-        this.options = options;
+    constructor(options) {
+        const normalized = typeof options === "string" ? { label: options } : options;
+        super(normalized);
+        this.options = normalized;
     }
-    toProtocol() {
-        const payload = this.withCommon({ text: this.text });
-        if (this.options.wrap !== undefined)
-            payload.wrap = this.options.wrap;
+    data() {
+        const out = { ...this.commonData(), label: this.options.label };
         if (this.options.xalign !== undefined)
-            payload.xalign = this.options.xalign;
-        if (this.options.selectable !== undefined)
-            payload.selectable = this.options.selectable;
-        return { type: "label", data: payload };
-    }
-}
-export class Image 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: "image", data: payload };
+            out.xalign = this.options.xalign;
+        if (this.options.wrap !== undefined)
+            out.wrap = this.options.wrap;
+        return out;
     }
 }
-export class Progress extends WidgetBase {
+export class Header extends WidgetBase {
     options;
+    type = "header";
     constructor(options) {
         super(options);
         this.options = options;
     }
-    toProtocol() {
-        const payload = this.withCommon({
-            value: this.options.value,
-            max: this.options.max ?? 1,
-        });
-        if (this.options.show_text !== undefined)
-            payload.show_text = this.options.show_text;
-        if (this.options.text !== undefined)
-            payload.text = this.options.text;
-        return { type: "progress", data: payload };
-    }
+    data() { return { ...this.commonData(), label: this.options.label }; }
 }
-export class LevelBar extends WidgetBase {
+export class Hero extends WidgetBase {
     options;
+    type = "hero";
     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",
-            }),
-        };
+    data() {
+        const out = { ...this.commonData(), title: this.options.title, subtitle: this.options.subtitle ?? "" };
+        for (const key of ["id", "icon", "icon_size", "toggle", "toggle_sensitive", "separator"]) {
+            if (this.options[key] !== undefined)
+                out[key] = this.options[key];
+        }
+        const trailing = child(this.options.trailing);
+        if (trailing)
+            out.trailing = trailing;
+        return out;
+    }
+    bindHandlers(registry, path) {
+        if (this.options.on_toggle) {
+            this.options.id = registry.targetId("toggle", this.options.id, path);
+            registry.add("toggle", this.options.id, this.options.on_toggle);
+        }
+        this.options.trailing?.bindHandlers(registry, [...path, 0]);
     }
 }
-export class Picture extends WidgetBase {
+export class Badge extends WidgetBase {
     options;
+    type = "badge";
     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 };
-    }
+    data() { return { ...this.commonData(), label: this.options.label, kind: this.options.kind ?? "default" }; }
 }
-export class Button extends WidgetBase {
+export class StatusDot extends WidgetBase {
     options;
+    type = "status_dot";
     constructor(options = {}) {
-        const { variant: _variant, ...common } = options;
-        super(common);
-        this.options = options;
-    }
-    toProtocol() {
-        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;
-        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 };
-    }
+    data() { return { ...this.commonData(), status: this.options.status ?? "neutral" }; }
 }
-export class Expander extends WidgetBase {
+export class PanelIndicator extends WidgetBase {
     options;
+    type = "panel_indicator";
     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(),
-            }),
-        };
+    data() {
+        const out = { ...this.commonData(), active: this.options.active ?? false, checked: this.options.checked ?? false, needs_attention: this.options.needs_attention ?? false };
+        for (const key of ["id", "icon", "label"])
+            if (this.options[key] !== undefined)
+                out[key] = this.options[key];
+        const extra = child(this.options.extra);
+        if (extra)
+            out.extra = extra;
+        return out;
     }
-}
-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,
-            }),
-        };
+    bindHandlers(registry, path) {
+        if (this.options.id && this.options.on_click)
+            registry.add("click", this.options.id, this.options.on_click);
+        this.options.extra?.bindHandlers(registry, [...path, 0]);
     }
 }
-export class MenuButton extends WidgetBase {
+export class EmptyState extends WidgetBase {
     options;
+    type = "empty_state";
     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 = {}) {
-        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: "switch", data: payload };
+    data() {
+        const out = { ...this.commonData(), title: this.options.title };
+        if (this.options.subtitle !== undefined)
+            out.subtitle = this.options.subtitle;
+        return out;
     }
 }
-export class ToggleButton extends WidgetBase {
+export class Spinner extends WidgetBase {
     options;
+    type = "spinner";
     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 };
-    }
+    data() { return { ...this.commonData(), spinning: this.options.spinning ?? true }; }
 }
-export class Slider extends WidgetBase {
+export class Meter extends WidgetBase {
     options;
+    type = "meter";
     constructor(options = {}) {
         super(options);
         this.options = options;
     }
-    toProtocol() {
-        const payload = this.withCommon({
+    data() {
+        const out = {
+            ...this.commonData(),
+            label: this.options.label ?? "",
+            value: this.options.value ?? 0,
             min: this.options.min ?? 0,
             max: this.options.max ?? 1,
-            step: this.options.step ?? 0.1,
-            value: this.options.value ?? 0,
-        });
-        if (this.options.orientation !== undefined)
-            payload.orientation = this.options.orientation;
-        if (this.options.draw_value !== undefined)
-            payload.draw_value = this.options.draw_value;
-        return { type: "slider", data: payload };
+            step: this.options.step ?? 0.01,
+            interactive: this.options.interactive ?? this.options.on_change !== undefined,
+        };
+        for (const key of ["id", "icon", "text"])
+            if (this.options[key] !== undefined)
+                out[key] = this.options[key];
+        return out;
+    }
+    bindHandlers(registry, _path) {
+        if (this.options.id && this.options.on_change)
+            registry.add("change", this.options.id, this.options.on_change);
     }
 }
-export class Checkbox extends WidgetBase {
+export class Separator extends WidgetBase {
+    type = "separator";
+    constructor(common = {}) { super(common); }
+    data() { return this.commonData(); }
+}
+export class Scroll extends WidgetBase {
     options;
-    constructor(options = {}) {
+    type = "scroll";
+    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: "checkbox", data: payload };
+    data() { return { ...this.commonData(), child: this.options.child.toProtocol() }; }
+    bindHandlers(registry, path) {
+        this.options.child.bindHandlers(registry, [...path, 0]);
     }
 }
-export class SelectOption {
-    id;
-    label;
-    constructor(id, label) {
-        this.id = id;
-        this.label = label;
-    }
-    toProtocol() {
-        return { id: this.id, label: this.label };
+class ChildrenWidget extends WidgetBase {
+    constructor(common = {}) { super(common); this.kids = common.children ?? []; }
+    kids;
+    data() { return { ...this.commonData(), children: children(this.kids) }; }
+    bindHandlers(registry, path) {
+        this.kids.forEach((kid, index) => kid.bindHandlers(registry, [...path, index]));
     }
 }
-export class Select extends WidgetBase {
+export class Row extends ChildrenWidget {
+    type = "row";
+}
+export class Column extends ChildrenWidget {
+    type = "column";
+}
+export class BoxedList extends ChildrenWidget {
+    type = "boxed_list";
+}
+export class ButtonRow extends ChildrenWidget {
+    type = "button_row";
+}
+export class CircleBox extends WidgetBase {
     options;
-    constructor(options = {}) {
+    type = "circle_box";
+    constructor(options) {
         super(options);
         this.options = options;
     }
-    toProtocol() {
-        const payload = this.withCommon({
-            items: (this.options.items ?? []).map((item) => item.toProtocol()),
-        });
-        if (this.options.selected !== undefined)
-            payload.selected = this.options.selected;
-        return { type: "select", data: payload };
+    data() {
+        const out = this.commonData();
+        out.color = this.options.color;
+        return out;
     }
 }
-export class Separator extends WidgetBase {
+export class Container extends ChildrenWidget {
+    type = "container";
+}
+export class PopoverShell extends ChildrenWidget {
     options;
+    type = "popover_shell";
     constructor(options = {}) {
         super(options);
         this.options = options;
     }
-    toProtocol() {
-        const payload = this.withCommon({});
-        if (this.options.orientation !== undefined)
-            payload.orientation = this.options.orientation;
-        return { type: "separator", data: payload };
-    }
-}
-export class Scroll extends WidgetBase {
-    child;
-    constructor(child, options = {}) {
-        super(options);
-        this.child = child;
+    data() {
+        const out = { ...super.data(), size: this.options.size ?? "medium" };
+        if ((this.options.footer ?? []).length > 0)
+            out.footer = children(this.options.footer ?? []);
+        if (this.options.footer_visible)
+            out.footer_visible = this.options.footer_visible;
+        return out;
     }
-    toProtocol() {
-        return { type: "scroll", data: this.withCommon({ child: this.child.toProtocol() }) };
+    bindHandlers(registry, path) {
+        super.bindHandlers(registry, path);
+        (this.options.footer ?? []).forEach((kid, index) => kid.bindHandlers(registry, [...path, this.kids.length + index]));
     }
 }
-export class Overlay extends WidgetBase {
+export class Tile extends WidgetBase {
     options;
+    type = "tile";
     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()),
-            }),
-        };
+    data() {
+        const out = { ...this.commonData(), primary: this.options.primary };
+        for (const key of ["id", "secondary", "left_icon"])
+            if (this.options[key] !== undefined)
+                out[key] = this.options[key];
+        const left = child(this.options.left);
+        const right = child(this.options.right);
+        if (left)
+            out.left = left;
+        if (right)
+            out.right = right;
+        return out;
+    }
+    bindHandlers(registry, path) {
+        if (this.options.on_click) {
+            this.options.id = registry.targetId("click", this.options.id, path);
+            registry.add("click", this.options.id, this.options.on_click);
+        }
+        this.options.left?.bindHandlers(registry, [...path, 0]);
+        this.options.right?.bindHandlers(registry, [...path, 1]);
     }
 }
-export class ListBox extends WidgetBase {
+export class SegmentedTile extends Tile {
     options;
-    constructor(options = {}) {
+    type = "segmented_tile";
+    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;
-    child;
-    width;
-    height;
-    constructor(row, column, child, width = 1, height = 1) {
-        this.row = row;
-        this.column = column;
-        this.child = child;
-        this.width = width;
-        this.height = height;
+    data() {
+        const out = super.data();
+        const nested = child(this.options.child);
+        if (nested)
+            out.child = nested;
+        out.expanded = this.options.expanded ?? false;
+        return out;
     }
-    toProtocol() {
-        return {
-            row: this.row,
-            column: this.column,
-            width: this.width,
-            height: this.height,
-            child: this.child.toProtocol(),
-        };
+    bindHandlers(registry, path) {
+        super.bindHandlers(registry, path);
+        if (this.options.on_toggle) {
+            this.options.id = registry.targetId("toggle", this.options.id, path);
+            registry.add("toggle", this.options.id, this.options.on_toggle);
+        }
+        this.options.child?.bindHandlers(registry, [...path, 2]);
     }
 }
-export class Grid extends WidgetBase {
+export class SwitchTile extends WidgetBase {
     options;
-    constructor(options = {}) {
+    type = "switch_tile";
+    constructor(options) {
         super(options);
         this.options = options;
     }
-    toProtocol() {
-        return {
-            type: "grid",
-            data: this.withCommon({
-                row_spacing: this.options.row_spacing ?? 0,
-                column_spacing: this.options.column_spacing ?? 0,
-                children: (this.options.children ?? []).map((child) => child.toProtocol()),
-            }),
-        };
+    data() {
+        const out = { ...this.commonData(), id: this.options.id, primary: this.options.primary, active: this.options.active ?? false };
+        for (const key of ["secondary", "left_icon"])
+            if (this.options[key] !== undefined)
+                out[key] = this.options[key];
+        const left = child(this.options.left);
+        if (left)
+            out.left = left;
+        return out;
+    }
+    bindHandlers(registry, path) {
+        if (this.options.on_toggle)
+            registry.add("toggle", this.options.id, this.options.on_toggle);
+        this.options.left?.bindHandlers(registry, [...path, 0]);
     }
 }
-export class Hero extends WidgetBase {
+export class ExpanderTile extends WidgetBase {
     options;
+    type = "expander_tile";
     constructor(options) {
         super(options);
         this.options = options;
     }
-    toProtocol() {
-        const payload = this.withCommon({
-            title: this.options.title,
-            subtitle: this.options.subtitle,
-        });
-        if (this.options.icon !== undefined)
-            payload.icon = this.options.icon.toProtocol();
-        return { type: "hero", data: payload };
+    data() {
+        const out = { ...this.commonData(), primary: this.options.primary, expanded: this.options.expanded ?? false };
+        for (const key of ["id", "secondary", "left_icon"])
+            if (this.options[key] !== undefined)
+                out[key] = this.options[key];
+        const left = child(this.options.left);
+        const nested = child(this.options.child);
+        if (left)
+            out.left = left;
+        if (nested)
+            out.child = nested;
+        return out;
+    }
+    bindHandlers(registry, path) {
+        if (this.options.on_toggle) {
+            this.options.id = registry.targetId("toggle", this.options.id, path);
+            registry.add("toggle", this.options.id, this.options.on_toggle);
+        }
+        this.options.left?.bindHandlers(registry, [...path, 0]);
+        this.options.child?.bindHandlers(registry, [...path, 1]);
     }
 }
-export class Card extends WidgetBase {
+export class SliderTile extends WidgetBase {
     options;
-    constructor(options = {}) {
+    type = "slider_tile";
+    constructor(options) {
         super(options);
         this.options = options;
     }
-    toProtocol() {
-        return {
-            type: "card",
-            data: this.withCommon({
-                children: (this.options.children ?? []).map((child) => child.toProtocol()),
-            }),
-        };
+    data() {
+        const out = { ...this.commonData(), id: this.options.id, value: this.options.value ?? 0, min: this.options.min ?? 0, max: this.options.max ?? 1, step: this.options.step ?? 0.01, page: this.options.page ?? 0.1, digits: this.options.digits ?? 0 };
+        for (const key of ["label", "left_icon", "snap_step"])
+            if (this.options[key] !== undefined)
+                out[key] = this.options[key];
+        const left = child(this.options.left);
+        if (left)
+            out.left = left;
+        return out;
+    }
+    bindHandlers(registry, path) {
+        if (this.options.on_change)
+            registry.add("change", this.options.id, this.options.on_change);
+        this.options.left?.bindHandlers(registry, [...path, 0]);
     }
 }
-export class Section extends WidgetBase {
+export class ChoiceTile extends WidgetBase {
     options;
+    type = "choice_tile";
     constructor(options) {
         super(options);
         this.options = options;
     }
-    toProtocol() {
-        const payload = {
-            title: this.options.title ?? "",
-            children: (this.options.children ?? []).map((child) => child.toProtocol()),
-        };
-        if (this.options.subtitle !== undefined && this.options.subtitle !== "") {
-            payload.subtitle = this.options.subtitle;
+    data() {
+        const out = { ...this.commonData(), primary: this.options.primary, selected: this.options.selected ?? false };
+        for (const key of ["id", "secondary", "left_icon"])
+            if (this.options[key] !== undefined)
+                out[key] = this.options[key];
+        const left = child(this.options.left);
+        if (left)
+            out.left = left;
+        return out;
+    }
+    bindHandlers(registry, path) {
+        if (this.options.on_click) {
+            this.options.id = registry.targetId("click", this.options.id, path);
+            registry.add("click", this.options.id, this.options.on_click);
         }
-        return {
-            type: "section",
-            data: this.withCommon(payload),
-        };
+        this.options.left?.bindHandlers(registry, [...path, 0]);
     }
 }
-export class Meter extends WidgetBase {
+export class Choice {
     options;
     constructor(options) {
-        super(options);
         this.options = options;
     }
     toProtocol() {
-        const payload = this.withCommon({
-            label: this.options.label ?? "",
-            value: this.options.value,
-            min: this.options.min ?? 0,
-            max: this.options.max ?? 1,
-            step: this.options.step ?? 0.01,
-            interactive: this.options.interactive ?? false,
-        });
+        const out = { id: this.options.id, primary: this.options.primary };
+        if (this.options.secondary !== undefined)
+            out.secondary = this.options.secondary;
         if (this.options.icon !== undefined)
-            payload.icon = this.options.icon.toProtocol();
-        if (this.options.text !== undefined)
-            payload.text = this.options.text;
-        return { type: "meter", data: payload };
+            out.icon = this.options.icon;
+        return out;
     }
 }
-export class Copyable extends WidgetBase {
+export class ChoiceList extends WidgetBase {
     options;
+    type = "choice_list";
     constructor(options) {
         super(options);
         this.options = options;
     }
-    toProtocol() {
-        return {
-            type: "copyable",
-            data: this.withCommon({
-                label: this.options.label ?? "",
-                value: this.options.value,
-            }),
-        };
+    data() {
+        const out = { ...this.commonData(), id: this.options.id, choices: (this.options.choices ?? []).map((choice) => choice.toProtocol()) };
+        if (this.options.active !== undefined)
+            out.active = this.options.active;
+        return out;
+    }
+    bindHandlers(registry, _path) {
+        if (this.options.on_change)
+            registry.add("change", this.options.id, this.options.on_change);
     }
 }
-export class Row extends WidgetBase {
+export class KeyValueGrid extends WidgetBase {
     options;
+    type = "key_value_grid";
     constructor(options = {}) {
         super(options);
         this.options = options;
     }
-    toProtocol() {
-        return {
-            type: "row",
-            data: this.withCommon({
-                spacing: this.options.spacing ?? 0,
-                children: (this.options.children ?? []).map((child) => child.toProtocol()),
-            }),
-        };
+    data() { return { ...this.commonData(), rows: this.options.rows ?? [] }; }
+}
+export class PagerItem extends WidgetBase {
+    options;
+    type = "pager_item";
+    constructor(options) {
+        super(options);
+        this.options = options;
     }
+    data() { return { ...this.commonData(), id: this.options.id, label: this.options.label ?? "", appearance: this.options.appearance ?? "dots", active: this.options.active ?? false, inactive: this.options.inactive ?? false, occupied: this.options.occupied ?? false, urgent: this.options.urgent ?? false }; }
+    bindHandlers(registry, _path) { if (this.options.on_click)
+        registry.add("click", String(this.options.id), this.options.on_click); }
 }
-export class Column extends WidgetBase {
+export class PagerStrip extends WidgetBase {
     options;
+    type = "pager_strip";
     constructor(options = {}) {
         super(options);
         this.options = options;
     }
-    toProtocol() {
-        return {
-            type: "column",
-            data: this.withCommon({
-                spacing: this.options.spacing ?? 0,
-                children: (this.options.children ?? []).map((child) => child.toProtocol()),
-            }),
-        };
+    data() {
+        const out = { ...this.commonData(), placeholder: this.options.placeholder ?? false, items: (this.options.items ?? []).map((item) => item.data()) };
+        if (this.options.id !== undefined)
+            out.id = this.options.id;
+        return out;
+    }
+    bindHandlers(registry, path) {
+        if (this.options.id && this.options.on_change)
+            registry.add("change", this.options.id, this.options.on_change);
+        (this.options.items ?? []).forEach((item, index) => item.bindHandlers(registry, [...path, index]));
     }
 }
-export class Spinner extends WidgetBase {
+class ActiveIndicator extends WidgetBase {
     options;
     constructor(options = {}) {
         super(options);
         this.options = options;
     }
-    toProtocol() {
-        return {
-            type: "spinner",
-            data: this.withCommon({ spinning: this.options.spinning ?? true }),
-        };
-    }
+    data() { return { ...this.commonData(), active: this.options.active ?? false }; }
+}
+export class CameraIndicator extends ActiveIndicator {
+    type = "camera_indicator";
+}
+export class MicIndicator extends ActiveIndicator {
+    type = "mic_indicator";
 }
-export class PropertyList extends WidgetBase {
+export class MutedIndicator extends ActiveIndicator {
+    type = "muted_indicator";
+}
+export class LocationIndicator extends ActiveIndicator {
+    type = "location_indicator";
+}
+export class ScreenCastIndicator extends ActiveIndicator {
     options;
+    type = "screencast_indicator";
     constructor(options = {}) {
         super(options);
         this.options = options;
     }
-    toProtocol() {
-        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),
-        };
+    data() {
+        const out = super.data();
+        if (this.options.timer_text !== undefined)
+            out.timer_text = this.options.timer_text;
+        return out;
     }
 }
-export class Item extends WidgetBase {
+export class Calendar extends WidgetBase {
     options;
+    type = "calendar";
     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: "item",
-            data: this.withCommon(payload),
-        };
+    data() {
+        const out = { ...this.commonData(), selected_date: this.options.selected_date, event_days: this.options.event_days ?? [] };
+        if (this.options.id !== undefined)
+            out.id = this.options.id;
+        return out;
     }
+    bindHandlers(registry, _path) { if (this.options.id && this.options.on_change)
+        registry.add("change", this.options.id, this.options.on_change); }
 }
-export class ActionItem extends WidgetBase {
+export class BatteryHero extends WidgetBase {
     options;
+    type = "battery_hero";
     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: "action_item",
-            data: this.withCommon(payload),
-        };
-    }
+    data() { return { ...this.commonData(), icon: this.options.icon, percentage: this.options.percentage, fraction: this.options.fraction, state: this.options.state }; }
 }
-export class EmptyState extends WidgetBase {
+export class DateHero extends WidgetBase {
     options;
+    type = "date_hero";
     constructor(options) {
         super(options);
         this.options = options;
     }
-    toProtocol() {
-        return {
-            type: "empty_state",
-            data: this.withCommon({
-                title: this.options.title,
-                subtitle: this.options.subtitle ?? "",
-            }),
-        };
-    }
+    data() { return { ...this.commonData(), weekday: this.options.weekday, date: this.options.date }; }
 }
-export class Badge extends WidgetBase {
+export class EventItem {
     options;
     constructor(options) {
-        super(options);
         this.options = options;
     }
     toProtocol() {
-        return {
-            type: "badge",
-            data: this.withCommon({
-                label: this.options.label,
-            }),
-        };
+        const out = { id: this.options.id, title: this.options.title, start: this.options.start, end: this.options.end ?? "", all_day: this.options.all_day ?? false };
+        if (this.options.location !== undefined)
+            out.location = this.options.location;
+        return out;
     }
 }
-export class StatusDot extends WidgetBase {
-    constructor(options = {}) {
+export class Events extends WidgetBase {
+    options;
+    type = "events";
+    constructor(options) {
         super(options);
+        this.options = options;
     }
-    toProtocol() {
-        return { type: "status", data: this.withCommon({}) };
+    data() { return { ...this.commonData(), date: this.options.date, loading: this.options.loading ?? false, events: (this.options.events ?? []).map((event) => event.toProtocol()) }; }
+}
+export class WeatherForecastItem {
+    options;
+    constructor(options) {
+        this.options = options;
     }
+    toProtocol() { return { day_name: this.options.day_name, icon: this.options.icon, condition: this.options.condition, temperatures: this.options.temperatures, is_today: this.options.is_today ?? false }; }
 }
-export class PagerItem extends WidgetBase {
+export class WeatherForecastList extends WidgetBase {
     options;
+    type = "weather_forecast_list";
     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(),
-        };
+    data() { return { ...this.commonData(), items: (this.options.items ?? []).map((item) => item.toProtocol()) }; }
+}
+export class WeatherHourlyItem {
+    options;
+    constructor(options) {
+        this.options = options;
     }
+    toProtocol() { return { time: this.options.time, icon: this.options.icon, temperature: this.options.temperature }; }
 }
-export class PagerStrip extends WidgetBase {
+export class WeatherHourlyStrip extends WidgetBase {
     options;
+    type = "weather_hourly_strip";
     constructor(options = {}) {
         super(options);
         this.options = options;
     }
+    data() { return { ...this.commonData(), items: (this.options.items ?? []).map((item) => item.toProtocol()) }; }
+}
+export class WorldClockRow {
+    options;
+    constructor(options) {
+        this.options = options;
+    }
     toProtocol() {
-        return {
-            type: "pager_strip",
-            data: this.withCommon({
-                items: (this.options.items ?? []).map((item) => item.toData()),
-            }),
-        };
+        const out = { name: this.options.name, timezone: this.options.timezone, time: this.options.time, offset: this.options.offset };
+        if (this.options.day_label !== undefined)
+            out.day_label = this.options.day_label;
+        return out;
     }
 }
-export class Box extends WidgetBase {
+export class WorldClock extends WidgetBase {
     options;
+    type = "world_clock";
     constructor(options = {}) {
         super(options);
         this.options = options;
     }
-    static vertical(children, spacing = 0, options = {}) {
-        return new Box({ ...options, orientation: "vertical", spacing, children });
-    }
-    static horizontal(children, spacing = 0, options = {}) {
-        return new Box({ ...options, orientation: "horizontal", spacing, children });
-    }
-    toProtocol() {
-        return {
-            type: "box",
-            data: this.withCommon({
-                orientation: this.options.orientation ?? "vertical",
-                spacing: this.options.spacing ?? 0,
-                children: (this.options.children ?? []).map((child) => child.toProtocol()),
-            }),
-        };
-    }
+    data() { return { ...this.commonData(), rows: (this.options.rows ?? []).map((row) => row.toProtocol()) }; }
 }