Implement Widget Frontend

Implement Widget Frontend: $widget-type

Add TypeScript types and editor schema for $widget-type. The card fetches SVGs from the Python backend via WebSocket — no canvas renderer is needed here.

Before you start

1. Read existing type definitions in frontend/src/types/ha.d.ts.
2. Read existing schemas in frontend/src/eink-dashboard-editor.ts.
3. Use the widget config specifications below as the source of truth for which fields to expose.

Existing TS widget type definitions

!grep -n "interface\|^export type" custom_components/eink_dashboard/frontend/src/types/ha.d.ts

Widget config specifications

These are the canonical field lists for each widget type. Use them to determine which fields to add to the TypeScript interface and which controls to add to the editor schema.

Project-specific fields (all widgets)

Every widget config extends HA's card config with these project-specific fields:

• card_style — "border" | "left_bar" | "none" (default: "none"). Controls decorative frame around the widget.
• icon_style — "filled" | "outlined" | "none" (default: "filled"). Controls icon circle rendering.

Tile

Single-entity widget modelled after HA's Tile card.

Config fields (add to interface, expose in schema):

• entity (required) — any HA entity
• name — override display name
• icon — override icon (default: entity's domain icon)
• hide_state — boolean, suppress state text
• state_content — which state attribute(s) to display
• show_entity_picture — show entity picture instead of icon
• card_style — project-specific (see above)
• icon_style — project-specific (see above)

Fields intentionally omitted: vertical, color, features, features_position, all tap_action / hold_action / double_tap_action variants.

Heading

Section heading with optional icon and entity badges, modelled after HA's Heading card.

Config fields:

• heading — heading text
• heading_style — "title" | "subtitle"
• icon — MDI icon name (e.g. "mdi:fridge")
• badges — list of entity badge configs
• icon_style — project-specific (default: "none")
• card_style — project-specific (see above)

Fields intentionally omitted: tap_action.

Sensor

Single-entity sensor with optional history graph, modelled after HA's Sensor card.

Config fields:

• entity (required) — sensor, counter, input_number, number
• name — override display name
• icon — override icon
• graph — "line" | none (default: none)
• hours_to_show — history window (default: 24)
• detail — graph detail level (1 or 2)
• unit — unit override
• limits — { min?: number, max?: number } for graph Y-axis
• card_style — project-specific (see above)
• icon_style — project-specific (see above)

Fields intentionally omitted: theme.

Entity

Single-entity display with large value, modelled after HA's Entity card.

Config fields:

• entity (required) — any HA entity
• name — override display name
• icon — override icon
• attribute — show a specific attribute instead of state
• unit — unit override
• card_style — project-specific (see above)
• icon_style — project-specific (see above)

Fields intentionally omitted: state_color, theme, all tap_action / hold_action / double_tap_action variants.

Entities

Multi-entity list card, modelled after HA's Entities card.

Config fields:

• title — optional card header text
• icon — optional header icon
• entities (required) — list of row configs:
  • Entity row: string entity ID, or { entity, name?, icon? } object
  • Divider row: { type: "divider" }
  • Section row: { type: "section", label? }
• card_style — project-specific (see above)
• icon_style — project-specific (see above)

Fields intentionally omitted: show_header_toggle, header, footer, state_color, theme.

Clock

Digital time display, modelled after HA's Clock card.

Config fields:

• title — optional label above the time
• clock_size — "small" | "medium" | "large"
• time_format — 12h or 24h override
• time_zone — timezone override
• show_seconds — boolean (default: false)
• card_style — project-specific (see above)

Fields intentionally omitted: clock_style (digital only), no_background, seconds_motion, border, ticks, face_style.

Weather, Separator, Device Battery, Waste Schedule

Keep existing frontend definitions unchanged.

Implementation steps

1. Update TypeScript type definitions

In frontend/src/types/ha.d.ts:

Add supporting interfaces (if the widget has structured sub-items):

/** One badge entry displayed beside the heading. */
export interface {WidgetName}Badge {
  /** HA entity ID. */
  entity: string;
  /** Override label; unused in current renderer but reserved. */
  name?: string;
  /** MDI icon name override (e.g. "mdi:thermometer"). */
  icon?: string;
  /** Show the entity state value next to the icon. Default: true. */
  show_state?: boolean;
  /** Render an icon alongside the badge text. Default: false. */
  show_icon?: boolean;
}

Add the widget interface:

/** One-line summary of what this widget does. */
export interface {WidgetName}Widget extends WidgetBase {
  type: "$widget-type";
  /** Description of primary content field. */
  $main_field?: string;
  /** Ordered list of entity IDs or structured badge configs. */
  badges?: (string | {WidgetName}Badge)[];
  /** Decorative frame style. */
  card_style?: CardStyle;
  /** Icon circle rendering mode. */
  icon_style?: IconStyle;
}

Fields prefixed with $ are placeholders — substitute the real field name from the widget spec (e.g. heading for Heading, entity for Tile).

Include only the fields the Python renderer actually reads. Omit fields that belong to WidgetBase (x, y, w, font_size, color) since those are inherited. Document every member with a JSDoc comment.

Add to the Widget union type:

export type Widget =
  | TextWidget      // @deprecated — kept for existing configs
  | SeparatorWidget
  | ...
  | {WidgetName}Widget;