glimpse-sdk 0.5.0 → 0.8.0

package/src/widgets.ts

@@ -1,920 +1,491 @@
-import { Icon } from "./protocol.js";
+export type InlineHandler = (event: unknown) => void | Promise<void>;
+export class InlineHandlerRegistry {
+  readonly handlers = new Map<string, InlineHandler>();
 
-export type Align = "fill" | "start" | "end" | "center" | "baseline";
-export type Orientation = "horizontal" | "vertical";
-export type Variant = "normal" | "muted" | "accent" | "success" | "warning" | "danger";
-export type ButtonVariant = "primary" | "secondary" | "compact" | "flat" | "danger";
-export type PagerAppearance = "dots" | "numbers";
-export type ContentFit = "fill" | "contain" | "cover" | "scale_down";
-export type LevelBarMode = "continuous" | "discrete";
-
-export interface WidgetNode {
-  toProtocol(): Record<string, unknown>;
-}
-
-export interface CommonProps {
-  id?: string;
-  visible?: boolean;
-  hexpand?: boolean;
-  vexpand?: boolean;
-  halign?: Align;
-  valign?: Align;
-  tooltip?: string;
-  variant?: Variant;
-}
-
-function applyCommonProps(
-  payload: Record<string, unknown>,
-  props: CommonProps,
-): Record<string, unknown> {
-  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;
-}
-
-abstract class WidgetBase implements WidgetNode {
-  protected constructor(protected readonly common: CommonProps = {}) {}
-
-  protected withCommon(payload: Record<string, unknown>): Record<string, unknown> {
-    return applyCommonProps(payload, this.common);
+  generatedId(event: "click" | "toggle" | "change", path: number[]): string {
+    const suffix = path.length === 0 ? "root" : path.join(".");
+    return `__glimpse:${event}:${suffix}`;
   }
 
-  abstract toProtocol(): Record<string, unknown>;
-}
-
-export class Label extends WidgetBase {
-  constructor(
-    public readonly text: string,
-    private readonly options: CommonProps & {
-      wrap?: boolean;
-      xalign?: number;
-      selectable?: boolean;
-    } = {},
-  ) {
-    super(options);
+  targetId(event: "click" | "toggle" | "change", id: string | undefined, path: number[]): string {
+    return id ?? this.generatedId(event, path);
   }
 
-  toProtocol(): Record<string, unknown> {
-    const payload = this.withCommon({ text: this.text });
-    if (this.options.wrap !== undefined) payload.wrap = this.options.wrap;
-    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 };
+  add(event: "click" | "toggle" | "change", id: string, handler: InlineHandler): void {
+    this.handlers.set(`${event}:${id}`, handler);
   }
 }
 
-export class Image extends WidgetBase {
-  constructor(
-    public readonly icon: Icon,
-    private readonly options: CommonProps & { pixel_size?: number } = {},
-  ) {
-    super(options);
-  }
+export type BadgeKind = "default" | "success" | "warning" | "error" | "accent";
+export type StatusDotStatus = "neutral" | "success" | "warning" | "error" | "accent";
+export type PagerAppearance = "dots" | "numbers";
+export type PopoverSize = "small" | "medium" | "large" | "wide";
 
-  toProtocol(): Record<string, unknown> {
-    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 };
-  }
+export interface ProtocolNode {
+  type: string;
+  data: Record<string, unknown>;
 }
 
-export class Progress extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      value: number;
-      max?: number;
-      show_text?: boolean;
-      text?: string;
-    },
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    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 };
-  }
+export interface CommonOptions {
+  visible?: boolean;
+  tooltip?: string;
+  css_classes?: string[];
+  styles?: Record<string, string>;
 }
 
-export class LevelBar extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      value: number;
-      min?: number;
-      max?: number;
-      mode?: LevelBarMode;
-    },
-  ) {
-    super(options);
-  }
+export abstract class WidgetBase {
+  protected constructor(protected readonly common: CommonOptions = {}) {}
+  abstract readonly type: string;
+  abstract data(): Record<string, unknown>;
+  bindHandlers(_registry: InlineHandlerRegistry, _path: number[]): void {}
 
-  toProtocol(): Record<string, unknown> {
-    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",
-      }),
-    };
+  toProtocol(): ProtocolNode {
+    return { type: this.type, data: this.data() };
   }
-}
 
-export class Picture extends WidgetBase {
-  constructor(
-    public readonly options: CommonProps & { path: string; content_fit?: ContentFit },
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    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 };
+  protected commonData(): Record<string, unknown> {
+    const out: Record<string, unknown> = {};
+    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;
   }
 }
 
-export class Button extends WidgetBase {
-  private readonly options: Omit<CommonProps, "variant"> & {
-      label?: string;
-      icon?: string;
-      enabled?: boolean;
-      variant?: ButtonVariant;
-    };
+const child = (node?: TreeNode): ProtocolNode | undefined => node?.toProtocol();
+const children = (nodes: TreeNode[]): ProtocolNode[] => nodes.map((node) => node.toProtocol());
 
-  constructor(options: Omit<CommonProps, "variant"> & {
-    label?: string;
-    icon?: string;
-    enabled?: boolean;
-    variant?: ButtonVariant;
-  } = {}) {
-    const { variant: _variant, ...common } = options;
-    super(common);
-    this.options = options;
+export class Label extends WidgetBase {
+  readonly type = "label";
+  private readonly options: CommonOptions & { label: string; xalign?: number; wrap?: boolean };
+  constructor(options: string | CommonOptions & { label: string; xalign?: number; wrap?: boolean }) {
+    const normalized = typeof options === "string" ? { label: options } : options;
+    super(normalized);
+    this.options = normalized;
   }
-
-  toProtocol(): Record<string, unknown> {
-    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 };
+  data(): Record<string, unknown> {
+    const out: Record<string, unknown> = { ...this.commonData(), label: this.options.label };
+    if (this.options.xalign !== undefined) out.xalign = this.options.xalign;
+    if (this.options.wrap !== undefined) out.wrap = this.options.wrap;
+    return out;
   }
 }
 
-export class LinkButton extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      uri: string;
-      label?: string;
-    },
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    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 Header extends WidgetBase {
+  readonly type = "header";
+  constructor(private readonly options: CommonOptions & { label: string }) { super(options); }
+  data(): Record<string, unknown> { return { ...this.commonData(), label: this.options.label }; }
 }
 
-export class Expander extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      label: string;
-      child: TreeNode;
-      expanded?: boolean;
-    },
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    return {
-      type: "expander",
-      data: this.withCommon({
-        label: this.options.label,
-        expanded: this.options.expanded ?? false,
-        child: this.options.child.toProtocol(),
-      }),
-    };
+export class Hero extends WidgetBase {
+  readonly type = "hero";
+  constructor(private readonly options: CommonOptions & { title: string; subtitle?: string; id?: string; icon?: string; icon_size?: number; toggle?: boolean; toggle_sensitive?: boolean; separator?: boolean; trailing?: TreeNode; on_toggle?: InlineHandler }) { super(options); }
+  data(): Record<string, unknown> {
+    const out: Record<string, unknown> = { ...this.commonData(), title: this.options.title, subtitle: this.options.subtitle ?? "" };
+    for (const key of ["id", "icon", "icon_size", "toggle", "toggle_sensitive", "separator"] as const) {
+      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: InlineHandlerRegistry, path: number[]): void {
+    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 TreeExpander extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      child: TreeNode;
-      hide_expander?: boolean;
-      indent_for_depth?: boolean;
-      indent_for_icon?: boolean;
-    },
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    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 Badge extends WidgetBase {
+  readonly type = "badge";
+  constructor(private readonly options: CommonOptions & { label: string; kind?: BadgeKind }) { super(options); }
+  data(): Record<string, unknown> { return { ...this.commonData(), label: this.options.label, kind: this.options.kind ?? "default" }; }
 }
 
-export class MenuButton extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      label?: string;
-      icon?: string;
-      popover: TreeNode;
-    },
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    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 StatusDot extends WidgetBase {
+  readonly type = "status_dot";
+  constructor(private readonly options: CommonOptions & { status?: StatusDotStatus } = {}) { super(options); }
+  data(): Record<string, unknown> { return { ...this.commonData(), status: this.options.status ?? "neutral" }; }
 }
 
-export class Switch extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      label?: string;
-      active?: boolean;
-    } = {},
-  ) {
-    super(options);
+export class PanelIndicator extends WidgetBase {
+  readonly type = "panel_indicator";
+  constructor(private readonly options: CommonOptions & { id?: string; icon?: string; label?: string; active?: boolean; checked?: boolean; needs_attention?: boolean; extra?: TreeNode; on_click?: InlineHandler }) { super(options); }
+  data(): Record<string, unknown> {
+    const out: Record<string, unknown> = { ...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"] as const) if (this.options[key] !== undefined) out[key] = this.options[key];
+    const extra = child(this.options.extra);
+    if (extra) out.extra = extra;
+    return out;
   }
-
-  toProtocol(): Record<string, unknown> {
-    const payload = this.withCommon({ active: this.options.active ?? false });
-    if (this.options.label !== undefined) payload.label = this.options.label;
-    return { type: "switch", data: payload };
+  bindHandlers(registry: InlineHandlerRegistry, path: number[]): void {
+    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 ToggleButton extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      label?: string;
-      active?: boolean;
-    } = {},
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    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 EmptyState extends WidgetBase {
+  readonly type = "empty_state";
+  constructor(private readonly options: CommonOptions & { title: string; subtitle?: string }) { super(options); }
+  data(): Record<string, unknown> {
+    const out: Record<string, unknown> = { ...this.commonData(), title: this.options.title };
+    if (this.options.subtitle !== undefined) out.subtitle = this.options.subtitle;
+    return out;
   }
 }
 
-export class Slider extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      min?: number;
-      max?: number;
-      step?: number;
-      value?: number;
-      orientation?: Orientation;
-      draw_value?: boolean;
-    } = {},
-  ) {
-    super(options);
-  }
+export class Spinner extends WidgetBase {
+  readonly type = "spinner";
+  constructor(private readonly options: CommonOptions & { spinning?: boolean } = {}) { super(options); }
+  data(): Record<string, unknown> { return { ...this.commonData(), spinning: this.options.spinning ?? true }; }
+}
 
-  toProtocol(): Record<string, unknown> {
-    const payload = this.withCommon({
+export class Meter extends WidgetBase {
+  readonly type = "meter";
+  constructor(private readonly options: CommonOptions & { id?: string; icon?: string; label?: string; value?: number; min?: number; max?: number; step?: number; text?: string; interactive?: boolean; on_change?: InlineHandler } = {}) { super(options); }
+  data(): Record<string, unknown> {
+    const out: Record<string, unknown> = {
+      ...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 };
-  }
-}
-
-export class Checkbox extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      label?: string;
-      active?: boolean;
-    } = {},
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    const payload = this.withCommon({ active: this.options.active ?? false });
-    if (this.options.label !== undefined) payload.label = this.options.label;
-    return { type: "checkbox", data: payload };
-  }
-}
-
-export class SelectOption {
-  constructor(
-    public readonly id: string,
-    public readonly label: string,
-  ) {}
-
-  toProtocol(): Record<string, unknown> {
-    return { id: this.id, label: this.label };
-  }
-}
-
-export class Select extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      items?: SelectOption[];
-      selected?: number;
-    } = {},
-  ) {
-    super(options);
+      step: this.options.step ?? 0.01,
+      interactive: this.options.interactive ?? this.options.on_change !== undefined,
+    };
+    for (const key of ["id", "icon", "text"] as const) if (this.options[key] !== undefined) out[key] = this.options[key];
+    return out;
   }
-
-  toProtocol(): Record<string, unknown> {
-    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 };
+  bindHandlers(registry: InlineHandlerRegistry, _path: number[]): void {
+    if (this.options.id && this.options.on_change) registry.add("change", this.options.id, this.options.on_change);
   }
 }
 
 export class Separator extends WidgetBase {
-  constructor(private readonly options: CommonProps & { orientation?: Orientation } = {}) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    const payload = this.withCommon({});
-    if (this.options.orientation !== undefined) payload.orientation = this.options.orientation;
-    return { type: "separator", data: payload };
-  }
+  readonly type = "separator";
+  constructor(common: CommonOptions = {}) { super(common); }
+  data(): Record<string, unknown> { return this.commonData(); }
 }
 
 export class Scroll extends WidgetBase {
-  constructor(
-    private readonly child: TreeNode,
-    options: CommonProps = {},
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    return { type: "scroll", data: this.withCommon({ child: this.child.toProtocol() }) };
+  readonly type = "scroll";
+  constructor(private readonly options: CommonOptions & { child: TreeNode }) { super(options); }
+  data(): Record<string, unknown> { return { ...this.commonData(), child: this.options.child.toProtocol() }; }
+  bindHandlers(registry: InlineHandlerRegistry, path: number[]): void {
+    this.options.child.bindHandlers(registry, [...path, 0]);
   }
 }
 
-export class Overlay extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      child: TreeNode;
-      overlays?: TreeNode[];
-    },
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    return {
-      type: "overlay",
-      data: this.withCommon({
-        child: this.options.child.toProtocol(),
-        overlays: (this.options.overlays ?? []).map((overlay) => overlay.toProtocol()),
-      }),
-    };
+abstract class ChildrenWidget extends WidgetBase {
+  constructor(common: CommonOptions & { children?: TreeNode[] } = {}) { super(common); this.kids = common.children ?? []; }
+  protected readonly kids: TreeNode[];
+  data(): Record<string, unknown> { return { ...this.commonData(), children: children(this.kids) }; }
+  bindHandlers(registry: InlineHandlerRegistry, path: number[]): void {
+    this.kids.forEach((kid, index) => kid.bindHandlers(registry, [...path, index]));
   }
 }
 
-export class ListBox extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      children?: TreeNode[];
-    } = {},
-  ) {
-    super(options);
-  }
+export class Row extends ChildrenWidget { readonly type = "row"; }
+export class Column extends ChildrenWidget { readonly type = "column"; }
+export class BoxedList extends ChildrenWidget { readonly type = "boxed_list"; }
+export class ButtonRow extends ChildrenWidget { readonly type = "button_row"; }
 
-  toProtocol(): Record<string, unknown> {
-    return {
-      type: "list_box",
-      data: this.withCommon({
-        children: (this.options.children ?? []).map((child) => child.toProtocol()),
-      }),
-    };
+export class CircleBox extends WidgetBase {
+  readonly type = "circle_box";
+  constructor(private readonly options: CommonOptions & { color: string }) { super(options); }
+  data(): Record<string, unknown> {
+    const out = this.commonData();
+    out.color = this.options.color;
+    return out;
   }
 }
 
-export class GridChild {
-  constructor(
-    public readonly row: number,
-    public readonly column: number,
-    public readonly child: TreeNode,
-    public readonly width: number = 1,
-    public readonly height: number = 1,
-  ) {}
-
-  toProtocol(): Record<string, unknown> {
-    return {
-      row: this.row,
-      column: this.column,
-      width: this.width,
-      height: this.height,
-      child: this.child.toProtocol(),
-    };
-  }
+export class Container extends ChildrenWidget {
+  readonly type = "container";
 }
 
-export class Grid extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      children?: GridChild[];
-      row_spacing?: number;
-      column_spacing?: number;
-    } = {},
-  ) {
-    super(options);
+export class PopoverShell extends ChildrenWidget {
+  readonly type = "popover_shell";
+  constructor(private readonly options: CommonOptions & { children?: TreeNode[]; size?: PopoverSize; footer?: TreeNode[]; footer_visible?: boolean } = {}) { super(options); }
+  data(): Record<string, unknown> {
+    const out: Record<string, unknown> = { ...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(): Record<string, unknown> {
-    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()),
-      }),
-    };
+  bindHandlers(registry: InlineHandlerRegistry, path: number[]): void {
+    super.bindHandlers(registry, path);
+    (this.options.footer ?? []).forEach((kid, index) => kid.bindHandlers(registry, [...path, this.kids.length + index]));
   }
 }
 
-export class Hero extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      title: string;
-      subtitle: string;
-      icon?: Icon;
-    },
-  ) {
-    super(options);
+export class Tile extends WidgetBase {
+  readonly type: string = "tile";
+  constructor(protected readonly options: CommonOptions & { primary: string; id?: string; secondary?: string; left_icon?: string; left?: TreeNode; right?: TreeNode; on_click?: InlineHandler }) { super(options); }
+  data(): Record<string, unknown> {
+    const out: Record<string, unknown> = { ...this.commonData(), primary: this.options.primary };
+    for (const key of ["id", "secondary", "left_icon"] as const) 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;
   }
-
-  toProtocol(): Record<string, unknown> {
-    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 };
+  bindHandlers(registry: InlineHandlerRegistry, path: number[]): void {
+    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 SegmentedTile extends Tile {
+  readonly type = "segmented_tile";
+  constructor(protected readonly options: ConstructorParameters<typeof Tile>[0] & { child?: TreeNode; expanded?: boolean; on_toggle?: InlineHandler }) { super(options); }
+  data(): Record<string, unknown> {
+    const out = super.data();
+    const nested = child(this.options.child);
+    if (nested) out.child = nested;
+    out.expanded = this.options.expanded ?? false;
+    return out;
+  }
+  bindHandlers(registry: InlineHandlerRegistry, path: number[]): void {
+    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 SwitchTile extends WidgetBase {
+  readonly type = "switch_tile";
+  constructor(private readonly options: CommonOptions & { id: string; primary: string; secondary?: string; left_icon?: string; left?: TreeNode; active?: boolean; on_toggle?: InlineHandler }) { super(options); }
+  data(): Record<string, unknown> {
+    const out: Record<string, unknown> = { ...this.commonData(), id: this.options.id, primary: this.options.primary, active: this.options.active ?? false };
+    for (const key of ["secondary", "left_icon"] as const) 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: InlineHandlerRegistry, path: number[]): void {
+    if (this.options.on_toggle) registry.add("toggle", this.options.id, this.options.on_toggle);
+    this.options.left?.bindHandlers(registry, [...path, 0]);
+  }
+}
+
+export class ExpanderTile extends WidgetBase {
+  readonly type = "expander_tile";
+  constructor(private readonly options: CommonOptions & { primary: string; id?: string; secondary?: string; left_icon?: string; left?: TreeNode; child?: TreeNode; expanded?: boolean; on_toggle?: InlineHandler }) { super(options); }
+  data(): Record<string, unknown> {
+    const out: Record<string, unknown> = { ...this.commonData(), primary: this.options.primary, expanded: this.options.expanded ?? false };
+    for (const key of ["id", "secondary", "left_icon"] as const) 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: InlineHandlerRegistry, path: number[]): void {
+    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 {
-  constructor(
-    private readonly options: CommonProps & {
-      children?: TreeNode[];
-    } = {},
-  ) {
-    super(options);
+export class SliderTile extends WidgetBase {
+  readonly type = "slider_tile";
+  constructor(private readonly options: CommonOptions & { id: string; label?: string; left_icon?: string; left?: TreeNode; value?: number; min?: number; max?: number; step?: number; page?: number; digits?: number; snap_step?: number; on_change?: InlineHandler }) { super(options); }
+  data(): Record<string, unknown> {
+    const out: Record<string, unknown> = { ...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"] as const) if (this.options[key] !== undefined) out[key] = this.options[key];
+    const left = child(this.options.left);
+    if (left) out.left = left;
+    return out;
   }
-
-  toProtocol(): Record<string, unknown> {
-    return {
-      type: "card",
-      data: this.withCommon({
-        children: (this.options.children ?? []).map((child) => child.toProtocol()),
-      }),
-    };
+  bindHandlers(registry: InlineHandlerRegistry, path: number[]): void {
+    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 {
-  constructor(
-    private readonly options: CommonProps & {
-      title?: string;
-      subtitle?: string;
-      children?: TreeNode[];
-    },
-  ) {
-    super(options);
+export class ChoiceTile extends WidgetBase {
+  readonly type = "choice_tile";
+  constructor(private readonly options: CommonOptions & { primary: string; id?: string; secondary?: string; left_icon?: string; left?: TreeNode; selected?: boolean; on_click?: InlineHandler }) { super(options); }
+  data(): Record<string, unknown> {
+    const out: Record<string, unknown> = { ...this.commonData(), primary: this.options.primary, selected: this.options.selected ?? false };
+    for (const key of ["id", "secondary", "left_icon"] as const) if (this.options[key] !== undefined) out[key] = this.options[key];
+    const left = child(this.options.left);
+    if (left) out.left = left;
+    return out;
   }
-
-  toProtocol(): Record<string, unknown> {
-    const payload: Record<string, unknown> = {
-      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;
+  bindHandlers(registry: InlineHandlerRegistry, path: number[]): void {
+    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 {
-  constructor(
-    private readonly options: CommonProps & {
-      icon?: Icon;
-      label?: string;
-      value: number;
-      min?: number;
-      max?: number;
-      step?: number;
-      text?: string;
-      interactive?: boolean;
-    },
-  ) {
-    super(options);
-  }
-
+export class Choice {
+  constructor(public readonly options: { id: string; primary: string; secondary?: string; icon?: string }) {}
   toProtocol(): Record<string, unknown> {
-    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,
-    });
-    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 };
+    const out: Record<string, unknown> = { id: this.options.id, primary: this.options.primary };
+    if (this.options.secondary !== undefined) out.secondary = this.options.secondary;
+    if (this.options.icon !== undefined) out.icon = this.options.icon;
+    return out;
   }
 }
 
-export class Copyable extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      label?: string;
-      value: string;
-    },
-  ) {
-    super(options);
+export class ChoiceList extends WidgetBase {
+  readonly type = "choice_list";
+  constructor(private readonly options: CommonOptions & { id: string; choices?: Choice[]; active?: string; on_change?: InlineHandler }) { super(options); }
+  data(): Record<string, unknown> {
+    const out: Record<string, unknown> = { ...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;
   }
-
-  toProtocol(): Record<string, unknown> {
-    return {
-      type: "copyable",
-      data: this.withCommon({
-        label: this.options.label ?? "",
-        value: this.options.value,
-      }),
-    };
+  bindHandlers(registry: InlineHandlerRegistry, _path: number[]): void {
+    if (this.options.on_change) registry.add("change", this.options.id, this.options.on_change);
   }
 }
 
-export class Row extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      spacing?: number;
-      children?: TreeNode[];
-    } = {},
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    return {
-      type: "row",
-      data: this.withCommon({
-        spacing: this.options.spacing ?? 0,
-        children: (this.options.children ?? []).map((child) => child.toProtocol()),
-      }),
-    };
-  }
+export class KeyValueGrid extends WidgetBase {
+  readonly type = "key_value_grid";
+  constructor(private readonly options: CommonOptions & { rows?: { key: string; value: string }[] } = {}) { super(options); }
+  data(): Record<string, unknown> { return { ...this.commonData(), rows: this.options.rows ?? [] }; }
 }
 
-export class Column extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      spacing?: number;
-      children?: TreeNode[];
-    } = {},
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    return {
-      type: "column",
-      data: this.withCommon({
-        spacing: this.options.spacing ?? 0,
-        children: (this.options.children ?? []).map((child) => child.toProtocol()),
-      }),
-    };
-  }
+export class PagerItem extends WidgetBase {
+  readonly type = "pager_item";
+  constructor(private readonly options: CommonOptions & { id: number; label?: string; appearance?: PagerAppearance; active?: boolean; inactive?: boolean; occupied?: boolean; urgent?: boolean; on_click?: InlineHandler }) { super(options); }
+  data(): Record<string, unknown> { 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: InlineHandlerRegistry, _path: number[]): void { if (this.options.on_click) registry.add("click", String(this.options.id), this.options.on_click); }
 }
 
-export class Spinner extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      spinning?: boolean;
-    } = {},
-  ) {
-    super(options);
+export class PagerStrip extends WidgetBase {
+  readonly type = "pager_strip";
+  constructor(private readonly options: CommonOptions & { id?: string; items?: PagerItem[]; placeholder?: boolean; on_change?: InlineHandler } = {}) { super(options); }
+  data(): Record<string, unknown> {
+    const out: Record<string, unknown> = { ...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;
   }
-
-  toProtocol(): Record<string, unknown> {
-    return {
-      type: "spinner",
-      data: this.withCommon({ spinning: this.options.spinning ?? true }),
-    };
+  bindHandlers(registry: InlineHandlerRegistry, path: number[]): void {
+    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 type Properties = Record<string, string>;
-
-export class PropertyList extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      title?: string;
-      rows?: Properties;
-    } = {},
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    const payload: Record<string, unknown> = {
-      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),
-    };
-  }
+abstract class ActiveIndicator extends WidgetBase {
+  constructor(protected readonly options: CommonOptions & { active?: boolean } = {}) { super(options); }
+  data(): Record<string, unknown> { return { ...this.commonData(), active: this.options.active ?? false }; }
 }
 
-export class Item extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      label: string;
-      sublabel?: string;
-      icon?: string;
-      right?: TreeNode;
-    },
-  ) {
-    super(options);
-  }
+export class CameraIndicator extends ActiveIndicator { readonly type = "camera_indicator"; }
+export class MicIndicator extends ActiveIndicator { readonly type = "mic_indicator"; }
+export class MutedIndicator extends ActiveIndicator { readonly type = "muted_indicator"; }
+export class LocationIndicator extends ActiveIndicator { readonly type = "location_indicator"; }
 
-  toProtocol(): Record<string, unknown> {
-    const payload: Record<string, unknown> = {
-      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),
-    };
+export class ScreenCastIndicator extends ActiveIndicator {
+  readonly type = "screencast_indicator";
+  constructor(protected readonly options: CommonOptions & { active?: boolean; timer_text?: string } = {}) { super(options); }
+  data(): Record<string, unknown> {
+    const out = super.data();
+    if (this.options.timer_text !== undefined) out.timer_text = this.options.timer_text;
+    return out;
   }
 }
 
-export class ActionItem extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      label: string;
-      sublabel?: string;
-      icon?: string;
-      right?: TreeNode;
-      enabled?: boolean;
-    },
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    const payload: Record<string, unknown> = {
-      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),
-    };
+export class Calendar extends WidgetBase {
+  readonly type = "calendar";
+  constructor(private readonly options: CommonOptions & { selected_date: string; id?: string; event_days?: string[]; on_change?: InlineHandler }) { super(options); }
+  data(): Record<string, unknown> {
+    const out: Record<string, unknown> = { ...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: InlineHandlerRegistry, _path: number[]): void { if (this.options.id && this.options.on_change) registry.add("change", this.options.id, this.options.on_change); }
 }
 
-export class EmptyState extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      title: string;
-      subtitle?: string;
-    },
-  ) {
-    super(options);
-  }
-
-  toProtocol(): Record<string, unknown> {
-    return {
-      type: "empty_state",
-      data: this.withCommon({
-        title: this.options.title,
-        subtitle: this.options.subtitle ?? "",
-      }),
-    };
-  }
+export class BatteryHero extends WidgetBase {
+  readonly type = "battery_hero";
+  constructor(private readonly options: CommonOptions & { icon: string; percentage: string; fraction: number; state: string }) { super(options); }
+  data(): Record<string, unknown> { return { ...this.commonData(), icon: this.options.icon, percentage: this.options.percentage, fraction: this.options.fraction, state: this.options.state }; }
 }
 
-export class Badge extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      label: string;
-    },
-  ) {
-    super(options);
-  }
+export class DateHero extends WidgetBase {
+  readonly type = "date_hero";
+  constructor(private readonly options: CommonOptions & { weekday: string; date: string }) { super(options); }
+  data(): Record<string, unknown> { return { ...this.commonData(), weekday: this.options.weekday, date: this.options.date }; }
+}
 
+export class EventItem {
+  constructor(public readonly options: { id: string; title: string; start: string; end?: string; location?: string; all_day?: boolean }) {}
   toProtocol(): Record<string, unknown> {
-    return {
-      type: "badge",
-      data: this.withCommon({
-        label: this.options.label,
-      }),
-    };
+    const out: Record<string, unknown> = { 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: CommonProps = {}) {
-    super(options);
-  }
+export class Events extends WidgetBase {
+  readonly type = "events";
+  constructor(private readonly options: CommonOptions & { date: string; events?: EventItem[]; loading?: boolean }) { super(options); }
+  data(): Record<string, unknown> { return { ...this.commonData(), date: this.options.date, loading: this.options.loading ?? false, events: (this.options.events ?? []).map((event) => event.toProtocol()) }; }
+}
 
-  toProtocol(): Record<string, unknown> {
-    return { type: "status", data: this.withCommon({}) };
-  }
+export class WeatherForecastItem {
+  constructor(public readonly options: { day_name: string; icon: string; condition: string; temperatures: string; is_today?: boolean }) {}
+  toProtocol(): Record<string, unknown> { 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 {
-  constructor(
-    private readonly options: CommonProps & {
-      appearance?: PagerAppearance;
-      label?: string;
-      active?: boolean;
-      inactive?: boolean;
-      occupied?: boolean;
-      urgent?: boolean;
-    } = {},
-  ) {
-    super(options);
-  }
-
-  toData(): Record<string, unknown> {
-    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,
-    });
-  }
+export class WeatherForecastList extends WidgetBase {
+  readonly type = "weather_forecast_list";
+  constructor(private readonly options: CommonOptions & { items?: WeatherForecastItem[] } = {}) { super(options); }
+  data(): Record<string, unknown> { return { ...this.commonData(), items: (this.options.items ?? []).map((item) => item.toProtocol()) }; }
+}
 
-  toProtocol(): Record<string, unknown> {
-    return {
-      type: "pager_item",
-      data: this.toData(),
-    };
-  }
+export class WeatherHourlyItem {
+  constructor(public readonly options: { time: string; icon: string; temperature: string }) {}
+  toProtocol(): Record<string, unknown> { return { time: this.options.time, icon: this.options.icon, temperature: this.options.temperature }; }
 }
 
-export class PagerStrip extends WidgetBase {
-  constructor(
-    private readonly options: CommonProps & {
-      items?: PagerItem[];
-    } = {},
-  ) {
-    super(options);
-  }
+export class WeatherHourlyStrip extends WidgetBase {
+  readonly type = "weather_hourly_strip";
+  constructor(private readonly options: CommonOptions & { items?: WeatherHourlyItem[] } = {}) { super(options); }
+  data(): Record<string, unknown> { return { ...this.commonData(), items: (this.options.items ?? []).map((item) => item.toProtocol()) }; }
+}
 
+export class WorldClockRow {
+  constructor(public readonly options: { name: string; timezone: string; time: string; offset: string; day_label?: string }) {}
   toProtocol(): Record<string, unknown> {
-    return {
-      type: "pager_strip",
-      data: this.withCommon({
-        items: (this.options.items ?? []).map((item) => item.toData()),
-      }),
-    };
+    const out: Record<string, unknown> = { 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 {
-  constructor(
-    private readonly options: CommonProps & {
-      orientation?: Orientation;
-      spacing?: number;
-      children?: TreeNode[];
-    } = {},
-  ) {
-    super(options);
-  }
-
-  static vertical(children: TreeNode[], spacing = 0, options: CommonProps = {}): Box {
-    return new Box({ ...options, orientation: "vertical", spacing, children });
-  }
-
-  static horizontal(children: TreeNode[], spacing = 0, options: CommonProps = {}): Box {
-    return new Box({ ...options, orientation: "horizontal", spacing, children });
-  }
-
-  toProtocol(): Record<string, unknown> {
-    return {
-      type: "box",
-      data: this.withCommon({
-        orientation: this.options.orientation ?? "vertical",
-        spacing: this.options.spacing ?? 0,
-        children: (this.options.children ?? []).map((child) => child.toProtocol()),
-      }),
-    };
-  }
+export class WorldClock extends WidgetBase {
+  readonly type = "world_clock";
+  constructor(private readonly options: CommonOptions & { rows?: WorldClockRow[] } = {}) { super(options); }
+  data(): Record<string, unknown> { return { ...this.commonData(), rows: (this.options.rows ?? []).map((row) => row.toProtocol()) }; }
 }
 
 export type TreeNode =
-  | Hero
-  | Card
-  | Section
-  | Meter
-  | Copyable
-  | PropertyList
-  | Item
-  | ActionItem
-  | EmptyState
-  | Badge
-  | StatusDot
-  | PagerItem
-  | PagerStrip
-  | Box
-  | Row
-  | Column
-  | Grid
-  | Scroll
-  | Overlay
-  | ListBox
-  | LevelBar
-  | TreeExpander
-  | MenuButton
-  | Progress
-  | Separator
-  | Spinner
-  | Label
-  | Image
-  | Picture
-  | Button
-  | LinkButton
-  | Expander
-  | Switch
-  | ToggleButton
-  | Slider
-  | Select
-  | Checkbox;
+  | Row | Column | Container | CircleBox | BoxedList | PopoverShell
+  | Label | Header | Hero | Badge | StatusDot | PanelIndicator | EmptyState | Spinner | Meter | Separator | Scroll
+  | Tile | SegmentedTile | ButtonRow | SwitchTile | ExpanderTile | SliderTile | ChoiceTile | ChoiceList | KeyValueGrid
+  | PagerItem | PagerStrip
+  | CameraIndicator | MicIndicator | MutedIndicator | ScreenCastIndicator | LocationIndicator
+  | Calendar | BatteryHero | DateHero | Events | WeatherForecastList | WeatherHourlyStrip | WorldClock;