331 files

custom_components/taskmate/www/taskmate-chore-board-card.js

@@ -0,0 +1,807 @@
+/**
+ * TaskMate Chore Board Card (#1017)
+ *
+ * The admin panel's Today-page chore board as a dashboard card: rows are the
+ * family's time periods, columns are the children, and each cell lists that
+ * child's chores for the period with where they stand (done, awaiting
+ * approval, to do, missed). A This week toggle swaps in done/total per child
+ * for the last seven days.
+ *
+ * Tapping a chore that is still to do completes it for that child — the same
+ * button press / complete_chore call the child card makes — and offers Undo
+ * on a short toast. Chores that need the child card's own flow (a photo, a
+ * timer, a note or a team join) say so instead of completing.
+ *
+ * Reads `chore_board` from sensor.taskmate_chore_board, and `children`,
+ * `chores`, `time_periods` and `todays_completions` from the overview entity
+ * and its companions, all through the attribute resolver.
+ *
+ * Single layout, so it consumes the design tokens directly (like the bounty
+ * card): every --tmd-* reference carries the classic value as its fallback.
+ * Layout classes carry a cb- prefix — the shared design kit defines its own
+ * .btn / .bar / .av / .chip.
+ */
+
+const LitElement = customElements.get("hui-masonry-view")
+  ? Object.getPrototypeOf(customElements.get("hui-masonry-view"))
+  : Object.getPrototypeOf(customElements.get("hui-view"));
+
+const html = LitElement.prototype.html;
+const css = LitElement.prototype.css;
+
+const _safeColor = (c, d) => (typeof c === "string" && /^#[0-9a-fA-F]{3,8}$/.test(c) ? c : d);
+const _ltrNums = (s) => (window.__taskmate_design && window.__taskmate_design.ltrNums ? window.__taskmate_design.ltrNums(s) : s);
+const DEFAULT_ACCENT = "#3f51b5";
+// Child colours by position; a design's own palette wins when it has one.
+const CHILD_COLOURS = ["#ff6b9d", "#3498db", "#1abc9c", "#e67e22", "#9b59b6", "#2ecc71"];
+const BUILTIN_PERIODS = ["morning", "afternoon", "evening", "night"];
+const STATUSES = ["done", "pending", "todo", "missed"];
+const TOAST_MS = 5000;
+
+class TaskMateChoreBoardCard extends LitElement {
+  static get properties() {
+    return {
+      hass: { type: Object },
+      config: { type: Object },
+      _view: { type: String },
+      _toast: { type: Object },
+      _busy: { type: Object },
+    };
+  }
+
+  constructor() {
+    super();
+    this._view = null;
+    this._toast = null;
+    this._busy = {};
+    // `${chore}|${child}` -> { status, count, board } — a tap's result shown
+    // until the board the tap was made on is replaced by a newer one.
+    this._optimistic = {};
+    this._toastTimer = null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) throw new Error("You need to define an entity");
+    this.config = config;
+  }
+
+  static getStubConfig() {
+    return { entity: "sensor.taskmate_overview" };
+  }
+
+  static getConfigElement() {
+    return document.createElement("taskmate-chore-board-card-editor");
+  }
+
+  getCardSize() {
+    return 6;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this._toastTimer);
+  }
+
+  shouldUpdate(changedProps) {
+    if (changedProps.has("hass") && changedProps.size === 1) {
+      return window.__taskmate_hasChanged
+        ? window.__taskmate_hasChanged(changedProps.get("hass"), this.hass, this.config?.entity)
+        : true;
+    }
+    return true;
+  }
+
+  _t(key, params) {
+    const fn = window.__taskmate_localize;
+    return fn ? fn(this.hass, key, params) : key;
+  }
+
+  _attrs() {
+    return (window.__taskmate_attrs && window.__taskmate_attrs(this.hass, this.config.entity))
+      || this.hass?.states?.[this.config.entity]?.attributes || {};
+  }
+
+  /** The children to show, in the family's order; none picked means everyone. */
+  _kids(attrs) {
+    const all = attrs.children || [];
+    const picked = Array.isArray(this.config.children) ? this.config.children.map(String) : [];
+    return picked.length ? all.filter(c => picked.includes(String(c.id))) : all;
+  }
+
+  _kidIndex(attrs, id) {
+    return Math.max(0, (attrs.children || []).findIndex(c => String(c.id) === String(id)));
+  }
+
+  _kidColour(attrs, id) {
+    const i = this._kidIndex(attrs, id);
+    return `var(--tmd-c${(i % 6) + 1}, ${CHILD_COLOURS[i % CHILD_COLOURS.length]})`;
+  }
+
+  /** Time periods in the order of the day, then Anytime for everything else. */
+  _periods(attrs) {
+    const hhmm = (s) => {
+      const [h, m] = String(s || "").split(":").map(Number);
+      return Number.isFinite(h) ? h + (m || 0) / 60 : 0;
+    };
+    let periods;
+    if (Array.isArray(attrs.time_periods) && attrs.time_periods.length) {
+      periods = attrs.time_periods
+        .filter(p => p && p.id)
+        .map(p => ({ id: p.id, label: p.label || "", icon: p.icon || "mdi:clock-outline", start: hhmm(p.start) }))
+        .sort((a, b) => a.start - b.start);
+    } else {
+      periods = [
+        { id: "morning", icon: "mdi:weather-sunset-up" },
+        { id: "afternoon", icon: "mdi:weather-sunny" },
+        { id: "evening", icon: "mdi:weather-sunset-down" },
+        { id: "night", icon: "mdi:weather-night" },
+      ];
+    }
+    const label = p => p.label || (BUILTIN_PERIODS.includes(p.id) ? this._t(`common.${p.id}`) : p.id);
+    return [
+      ...periods.filter(p => p.id !== "anytime").map(p => ({ id: p.id, icon: p.icon, label: label(p) })),
+      { id: "anytime", icon: "mdi:clock-outline", label: this._t("common.anytime") },
+    ];
+  }
+
+  /** The board, with any tap still waiting for the server laid over it. */
+  _boardEntries(board) {
+    const entries = (board && board.board && board.board.children) || [];
+    return entries.map(e => ({
+      ...e,
+      chores: (e.chores || []).map(item => {
+        const key = `${item.chore_id}|${e.child_id}`;
+        const opt = this._optimistic[key];
+        if (!opt) return item;
+        if (opt.board !== board) {
+          delete this._optimistic[key];
+          return item;
+        }
+        return { ...item, status: opt.status, count: opt.count };
+      }),
+    }));
+  }
+
+  /** A chore whose completion needs the child card: a photo, timer, note or team. */
+  _needsChildCard(chore) {
+    return !!(chore.require_photo || chore.task_type === "timed" || chore.open_ended || chore.team);
+  }
+
+  _applyDesign() {
+    const design = window.__taskmate_design
+      ? window.__taskmate_design.apply(this, this.hass, this.config, this.config.entity)
+      : "classic";
+    // Inline on the host: a <style> in the template is ordered before
+    // adoptedStyleSheets and would lose to the :host default.
+    const configured = this.config.header_color;
+    if (typeof configured === "string" && /^#[0-9a-fA-F]{3,8}$/.test(configured)) {
+      this.style.setProperty("--cb-accent", _safeColor(configured, DEFAULT_ACCENT));
+    } else {
+      this.style.removeProperty("--cb-accent");
+    }
+    return design;
+  }
+
+  // ── actions ─────────────────────────────────────────────────────────────
+
+  _playSound(name) {
+    const engine = window.__taskmate_sounds;
+    if (engine) engine.play(name, this._attrs().custom_sounds || []);
+  }
+
+  _showToast(message, undo = null) {
+    clearTimeout(this._toastTimer);
+    this._toast = { message, undo };
+    this._toastTimer = setTimeout(() => { this._toast = null; }, TOAST_MS);
+  }
+
+  async _tap(item, chore, kid, board) {
+    if (this.config.tap_to_complete === false) return;
+    if (item.status !== "todo" && item.status !== "missed") return;
+    if (this._needsChildCard(chore)) {
+      this._showToast(this._t("chore_board.finish_on_card", { chore: chore.name, name: kid.name }));
+      return;
+    }
+    const key = `${chore.id}|${kid.id}`;
+    if (this._busy[key]) return;
+    this._busy = { ...this._busy, [key]: true };
+    const count = (Number(item.count) || 0) + 1;
+    const limit = Math.max(1, Number(item.limit) || 1);
+    const finished = count >= limit;
+    const status = !finished ? "todo" : chore.requires_approval === false ? "done" : "pending";
+    this._optimistic = { ...this._optimistic, [key]: { status, count, board } };
+    try {
+      // The button entity first, so automations triggered by it fire — the
+      // same order the child card uses.
+      const button = window.__taskmate_find_button && window.__taskmate_find_button(this.hass, kid.id, "complete", chore.id);
+      if (button) {
+        await this.hass.callService("button", "press", { entity_id: button });
+      } else {
+        await this.hass.callService("taskmate", "complete_chore", { chore_id: chore.id, child_id: kid.id });
+      }
+      this._playSound(chore.completion_sound || "coin");
+      const msg = status === "pending" ? "chore_board.sent_for_approval" : "chore_board.marked_done";
+      this._showToast(this._t(msg, { chore: chore.name, name: kid.name }), { chore_id: chore.id, child_id: kid.id });
+    } catch (err) {
+      const next = { ...this._optimistic };
+      delete next[key];
+      this._optimistic = next;
+      this._showToast(this._t("chore_board.error", { message: String(err?.message || err) }));
+    } finally {
+      this._busy = { ...this._busy, [key]: false };
+    }
+  }
+
+  /** Take back the completion the last tap made. */
+  async _undo(target) {
+    clearTimeout(this._toastTimer);
+    this._toast = null;
+    const latest = (this._attrs().todays_completions || [])
+      .filter(c => c.chore_id === target.chore_id && c.child_id === target.child_id && !c.bonus_subtask_id)
+      .sort((a, b) => new Date(b.completed_at || 0) - new Date(a.completed_at || 0))[0];
+    const completionId = latest && (latest.completion_id || latest.id);
+    if (!completionId) {
+      this._showToast(this._t("chore_board.undo_failed"));
+      return;
+    }
+    let service;
+    if (window.__taskmate_is_parent && window.__taskmate_is_parent(this.hass)) {
+      service = "reject_chore";
+    } else {
+      // A child's own tick, inside the undo window the server publishes (#918).
+      const until = Date.parse(latest.child_undo_until || "");
+      if (latest.child_undo_pending === true || (Number.isFinite(until) && until > Date.now())) {
+        service = "undo_chore";
+      } else {
+        this._showToast(this._t("child.undo_not_allowed"));
+        return;
+      }
+    }
+    try {
+      await this.hass.callService("taskmate", service, { completion_id: completionId });
+      const next = { ...this._optimistic };
+      delete next[`${target.chore_id}|${target.child_id}`];
+      this._optimistic = next;
+      this._playSound("undo");
+    } catch (err) {
+      this._showToast(this._t("chore_board.error", { message: String(err?.message || err) }));
+    }
+  }
+
+  // ── render ──────────────────────────────────────────────────────────────
+
+  render() {
+    if (!this.hass || !this.config) return html``;
+    this._applyDesign();
+    const attrs = this._attrs();
+    const title = this.config.title || this._t("chore_board.title");
+    const showWeek = this.config.show_week !== false;
+    const view = showWeek ? (this._view || (this.config.default_view === "week" ? "week" : "today")) : "today";
+    const kids = this._kids(attrs);
+    const board = attrs.chore_board;
+
+    let body;
+    if (!this.hass.states[this.config.entity]) {
+      body = html`<div class="cb-empty">${this._t("common.entity_not_found", { entity: this.config.entity })}</div>`;
+    } else if (!board) {
+      body = html`<div class="cb-empty">${this._t("chore_board.unavailable")}</div>`;
+    } else if (!kids.length) {
+      body = html`<div class="cb-empty">${this._t("chore_board.no_children")}</div>`;
+    } else if (view === "week") {
+      body = this._renderWeek(attrs, kids, board);
+    } else {
+      body = this._renderToday(attrs, kids, board);
+    }
+
+    return html`
+      <ha-card>
+        <div class="cb-hd">
+          <ha-icon class="cb-hd-icon" icon="mdi:view-grid-outline"></ha-icon>
+          <div class="cb-hd-title">${title}</div>
+          ${showWeek ? html`
+            <div class="cb-seg" role="tablist">
+              ${["today", "week"].map(v => html`
+                <button type="button" role="tab" class="${view === v ? "on" : ""}" aria-selected="${view === v ? "true" : "false"}"
+                        @click=${() => { this._view = v; }}>${this._t(v === "week" ? "chore_board.this_week" : "chore_board.today")}</button>`)}
+            </div>` : ""}
+        </div>
+        <div class="cb-body ${this._toast ? "cb-has-toast" : ""}">${body}</div>
+        ${this._toast ? html`
+          <div class="cb-toast" role="status">
+            <span>${this._toast.message}</span>
+            ${this._toast.undo ? html`<button type="button" @click=${() => this._undo(this._toast.undo)}>${this._t("chore_board.undo")}</button>` : ""}
+          </div>` : ""}
+      </ha-card>
+    `;
+  }
+
+  _avatar(attrs, kid) {
+    const a = kid.avatar || "";
+    const inner = a.startsWith("mdi:")
+      ? html`<ha-icon icon="${a}"></ha-icon>`
+      : a ? html`<img src="${a}" alt="">` : (kid.name || "?").charAt(0).toUpperCase();
+    return html`<span class="cb-av" style="--cb-kc:${this._kidColour(attrs, kid.id)}">${inner}</span>`;
+  }
+
+  /** Each shown child's chores, grouped by time period. */
+  _cells(attrs, kids, board, periods) {
+    const choreById = Object.fromEntries((attrs.chores || []).map(c => [c.id, c]));
+    const known = new Set(periods.map(p => p.id));
+    const entries = this._boardEntries(board);
+    const cells = {};
+    const totals = {};
+    for (const kid of kids) {
+      const entry = entries.find(e => String(e.child_id) === String(kid.id));
+      let done = 0;
+      let due = 0;
+      for (const item of (entry && entry.chores) || []) {
+        const chore = choreById[item.chore_id];
+        if (!chore) continue;
+        due += 1;
+        if (item.status === "done" || item.status === "pending") done += 1;
+        const slot = known.has(chore.time_category) ? chore.time_category : "anytime";
+        (cells[`${slot}|${kid.id}`] = cells[`${slot}|${kid.id}`] || []).push({ item, chore });
+      }
+      totals[kid.id] = { done, due };
+    }
+    return { cells, totals };
+  }
+
+  _visibleRows(kids, periods, cells) {
+    const finished = list => list.every(({ item }) => item.status === "done" || item.status === "pending");
+    return periods.filter(p => {
+      const lists = kids.map(k => cells[`${p.id}|${k.id}`] || []);
+      if (!lists.some(l => l.length)) return false;
+      return !(this.config.hide_done_periods && lists.every(finished));
+    });
+  }
+
+  _chip(item, chore, kid, board) {
+    const statusLabel = this._t(`chore_board.status_${item.status}`);
+    const limit = Math.max(1, Number(item.limit) || 1);
+    const count = limit > 1 ? html` <small>${_ltrNums(`${item.count || 0}/${limit}`)}</small>` : "";
+    const extra = this._needsChildCard(chore)
+      ? html`<ha-icon class="cb-x" icon="${chore.require_photo ? "mdi:camera-outline" : chore.task_type === "timed" ? "mdi:timer-sand" : chore.team ? "mdi:account-group-outline" : "mdi:pencil-outline"}"></ha-icon>`
+      : "";
+    const inner = html`<i class="cb-dot" aria-hidden="true"></i><span class="cb-n">${chore.name}${count}</span>${extra}<span class="cb-sr">${statusLabel}</span>`;
+    const tappable = this.config.tap_to_complete !== false && (item.status === "todo" || item.status === "missed");
+    const key = `${chore.id}|${kid.id}`;
+    return tappable
+      ? html`<button type="button" class="cb-chip ${item.status}" title="${chore.name} · ${statusLabel}"
+                ?disabled=${!!this._busy[key]} @click=${() => this._tap(item, chore, kid, board)}>${inner}</button>`
+      : html`<span class="cb-chip ${item.status}" title="${chore.name} · ${statusLabel}">${inner}</span>`;
+  }
+
+  _legend() {
+    if (this.config.show_legend === false) return "";
+    return html`<div class="cb-legend">${STATUSES.map(s => html`
+      <span class="cb-chip ${s}"><i class="cb-dot" aria-hidden="true"></i><span class="cb-n">${this._t(`chore_board.status_${s}`)}</span></span>`)}</div>`;
+  }
+
+  _renderToday(attrs, kids, board) {
+    const periods = this._periods(attrs);
+    const { cells, totals } = this._cells(attrs, kids, board, periods);
+    const rows = this._visibleRows(kids, periods, cells);
+    const anything = kids.some(k => totals[k.id].due);
+    if (!anything) return html`<div class="cb-empty">${this._t("chore_board.empty")}</div>`;
+    if (!rows.length) return html`<div class="cb-empty">${this._t("chore_board.all_done")}</div>${this._legend()}`;
+
+    if (kids.length === 1) {
+      const kid = kids[0];
+      const { done, due } = totals[kid.id];
+      return html`
+        <div class="cb-list">
+          <div class="cb-prog-row">
+            ${this._avatar(attrs, kid)}<span class="cb-prog-name">${kid.name}</span>
+            <span class="cb-prog-n">${_ltrNums(`${done}/${due}`)}</span>
+          </div>
+          <div class="cb-prog"><i style="width:${due ? Math.round((done / due) * 100) : 100}%;background:${this._kidColour(attrs, kid.id)}"></i></div>
+          ${rows.map(p => html`
+            <div class="cb-grp"><ha-icon icon="${p.icon}"></ha-icon>${p.label}</div>
+            ${(cells[`${p.id}|${kid.id}`] || []).map(({ item, chore }) => this._chip(item, chore, kid, board))}`)}
+        </div>
+        ${this._legend()}`;
+    }
+
+    return html`
+      <div class="cb-wrap">
+        <div class="cb-board" style="--cb-cols:${kids.length}">
+          <div class="cb-sticky"></div>
+          ${kids.map(k => html`
+            <div class="cb-kid">${this._avatar(attrs, k)}<span>${k.name}</span>
+              <small>${_ltrNums(`${totals[k.id].done}/${totals[k.id].due}`)}</small></div>`)}
+          ${rows.map(p => html`
+            <div class="cb-slot cb-sticky"><ha-icon icon="${p.icon}"></ha-icon><span>${p.label}</span></div>
+            ${kids.map(k => {
+              const items = cells[`${p.id}|${k.id}`] || [];
+              return html`<div class="cb-cell">${items.length
+                ? items.map(({ item, chore }) => this._chip(item, chore, k, board))
+                : html`<span class="cb-none">–</span>`}</div>`;
+            })}`)}
+        </div>
+      </div>
+      ${this._legend()}`;
+  }
+
+  _renderWeek(attrs, kids, board) {
+    const history = board.history || {};
+    const today = board.board && board.board.date;
+    const first = kids.map(k => history[k.id]).find(Boolean) || [];
+    const lang = this.hass?.locale?.language || this.hass?.language || undefined;
+    const dayName = iso => {
+      if (iso === today) return this._t("chore_board.today");
+      try {
+        return new Date(`${iso}T12:00:00`).toLocaleDateString(lang, { weekday: "short" });
+      } catch (_e) {
+        return iso;
+      }
+    };
+    const gaps = kids.some(k => (history[k.id] || []).some(d => d.due == null));
+    return html`
+      <div class="cb-wrap">
+        <div class="cb-week" style="--cb-days:${first.length || 7}">
+          <div></div>
+          ${first.map(d => html`<div class="cb-wh ${d.date === today ? "today" : ""}">${dayName(d.date)}</div>`)}
+          ${kids.map(k => html`
+            <div class="cb-wk">${this._avatar(attrs, k)}<span>${k.name}</span></div>
+            ${(history[k.id] || []).map(d => {
+              if (d.due == null) return html`<div class="cb-wc none" title="${this._t("chore_board.not_recorded")}">–</div>`;
+              const pct = d.due ? Math.round((d.done / d.due) * 100) : 100;
+              return html`<div class="cb-wc" style="--cb-kc:${this._kidColour(attrs, k.id)};--cb-p:${pct}"
+                               title="${dayName(d.date)} · ${d.done}/${d.due}">${d.due ? _ltrNums(`${d.done}/${d.due}`) : "–"}</div>`;
+            })}`)}
+        </div>
+      </div>
+      ${gaps ? html`<p class="cb-hint">${this._t("chore_board.week_hint")}</p>` : ""}`;
+  }
+
+  static get styles() {
+    const base = css`
+      :host { display: block; --cb-accent: var(--tmd-accent, #3f51b5); }
+      ha-card {
+        position: relative;
+        overflow: hidden;
+        background: var(--tmd-surface, var(--ha-card-background, var(--card-background-color, #fff)));
+        color: var(--tmd-text, var(--primary-text-color));
+        border-radius: var(--tmd-radius, var(--ha-card-border-radius, 12px));
+        font-family: var(--tmd-font-body, inherit);
+      }
+      .cb-hd {
+        display: flex; align-items: center; gap: 10px;
+        padding: 12px 16px;
+        background: var(--cb-accent);
+        color: var(--tmd-hd-text, #fff);
+      }
+      :host([data-tm-design="playroom"]) .cb-hd {
+        background: linear-gradient(135deg, var(--cb-accent), color-mix(in srgb, var(--cb-accent) 72%, #fff));
+      }
+      .cb-hd-icon { --mdc-icon-size: 26px; flex: none; opacity: .95; }
+      .cb-hd-title {
+        flex: 1; min-width: 0;
+        font-family: var(--tmd-font-display, inherit);
+        font-size: 1.2rem; font-weight: 600;
+        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+      }
+      .cb-seg { display: inline-flex; flex: none; background: rgba(255, 255, 255, .18); border-radius: 9px; padding: 2px; gap: 2px; }
+      .cb-seg button {
+        background: none; border: 0; cursor: pointer;
+        color: inherit; opacity: .85;
+        font: inherit; font-size: .8rem; font-weight: 500;
+        padding: 5px 11px; border-radius: 7px; min-height: 30px;
+      }
+      .cb-seg button.on { background: #fff; color: var(--cb-accent); opacity: 1; }
+      :host([data-tm-design="accessible"]) .cb-seg button.on { color: #111; outline: 2px solid #111; }
+      .cb-body { padding: 10px 16px 14px; }
+      /* Room for the toast, so it never sits over the last row. */
+      .cb-body.cb-has-toast { padding-bottom: 66px; }
+      .cb-empty { text-align: center; padding: 28px 12px; color: var(--tmd-dim, var(--secondary-text-color)); }
+
+      .cb-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
+      .cb-board {
+        display: grid; grid-template-columns: 110px repeat(var(--cb-cols), minmax(140px, 1fr));
+        font-size: 13px;
+      }
+      .cb-board > div {
+        padding: 8px 10px; min-width: 0;
+        border-bottom: 1px solid var(--tmd-border, var(--divider-color, rgba(127, 127, 127, .2)));
+      }
+      .cb-sticky {
+        position: sticky; inset-inline-start: 0; z-index: 1;
+        background: var(--tmd-surface, var(--ha-card-background, var(--card-background-color, #fff)));
+      }
+      .cb-kid { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.5px; }
+      .cb-kid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .cb-kid small {
+        margin-inline-start: auto; font-weight: 500; font-variant-numeric: tabular-nums;
+        color: var(--tmd-dim, var(--secondary-text-color));
+      }
+      .cb-slot { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tmd-dim, var(--secondary-text-color)); }
+      .cb-slot ha-icon { --mdc-icon-size: 16px; flex: none; }
+      .cb-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
+      .cb-none { color: var(--tmd-dim, var(--secondary-text-color)); opacity: .5; }
+
+      .cb-av {
+        width: 24px; height: 24px; flex: none; border-radius: 50%; overflow: hidden;
+        display: inline-grid; place-items: center;
+        background: var(--cb-kc, #9b59b6); color: #fff;
+        font-size: 11px; font-weight: 700;
+      }
+      .cb-av ha-icon { --mdc-icon-size: 16px; }
+      .cb-av img { width: 100%; height: 100%; object-fit: cover; }
+
+      .cb-chip {
+        display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
+        background: none; border: 0; padding: 4px 5px; margin-inline-start: -5px;
+        border-radius: 6px; min-height: 28px;
+        font: inherit; font-size: 12.5px; color: inherit; text-align: start;
+      }
+      button.cb-chip { cursor: pointer; }
+      button.cb-chip:hover { background: var(--tmd-surface-2, rgba(127, 127, 127, .12)); }
+      button.cb-chip[disabled] { opacity: .6; cursor: default; }
+      .cb-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .cb-n small { color: var(--tmd-dim, var(--secondary-text-color)); }
+      .cb-x { --mdc-icon-size: 14px; flex: none; color: var(--tmd-dim, var(--secondary-text-color)); }
+      .cb-dot {
+        width: 14px; height: 14px; flex: none; border-radius: 50%; box-sizing: border-box;
+        border: 2px solid var(--tmd-dim, var(--secondary-text-color));
+      }
+      .cb-chip.done .cb-dot { background: var(--tmd-good, #2ecc71); border-color: var(--tmd-good, #2ecc71); }
+      .cb-chip.done .cb-n { color: var(--tmd-dim, var(--secondary-text-color)); text-decoration: line-through; }
+      .cb-chip.pending .cb-dot {
+        border-color: var(--tmd-warn, #f39c12);
+        background: color-mix(in srgb, var(--tmd-warn, #f39c12) 30%, transparent);
+      }
+      .cb-chip.missed .cb-dot { border-color: var(--tmd-bad, #e74c3c); }
+      .cb-chip.missed .cb-n { color: var(--tmd-bad, #e74c3c); }
+      .cb-sr {
+        position: absolute; width: 1px; height: 1px; overflow: hidden;
+        clip: rect(0 0 0 0); white-space: nowrap;
+      }
+      .cb-legend {
+        display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px;
+        font-size: 12px; color: var(--tmd-dim, var(--secondary-text-color));
+      }
+      .cb-legend .cb-chip { padding: 0; margin: 0; min-height: 0; font-size: 12px; }
+      .cb-legend .cb-chip .cb-n { color: inherit; text-decoration: none; }
+
+      .cb-list { display: flex; flex-direction: column; align-items: stretch; }
+      .cb-list .cb-chip { font-size: 14px; min-height: 36px; margin-inline-start: 0; }
+      .cb-prog-row { display: flex; align-items: center; gap: 8px; font-weight: 600; }
+      .cb-prog-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .cb-prog-n { font-variant-numeric: tabular-nums; color: var(--tmd-dim, var(--secondary-text-color)); }
+      .cb-prog {
+        height: 6px; border-radius: 3px; overflow: hidden; margin: 8px 0 4px;
+        background: var(--tmd-surface-2, var(--divider-color, rgba(127, 127, 127, .2)));
+      }
+      .cb-prog > i { display: block; height: 100%; }
+      .cb-grp {
+        display: flex; align-items: center; gap: 6px; margin: 10px 0 2px;
+        font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
+        color: var(--tmd-dim, var(--secondary-text-color));
+      }
+      .cb-grp ha-icon { --mdc-icon-size: 15px; }
+
+      .cb-week {
+        display: grid; grid-template-columns: 100px repeat(var(--cb-days), minmax(38px, 1fr));
+        gap: 6px; align-items: center; font-size: 12px;
+      }
+      .cb-wh { text-align: center; font-weight: 500; color: var(--tmd-dim, var(--secondary-text-color)); }
+      .cb-wh.today { color: var(--tmd-text, var(--primary-text-color)); font-weight: 600; }
+      .cb-wk { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
+      .cb-wk span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .cb-wc {
+        height: 32px; border-radius: 7px;
+        display: grid; place-items: center;
+        font-weight: 600; font-variant-numeric: tabular-nums;
+        background: color-mix(in srgb, var(--cb-kc) calc(15% + var(--cb-p) * .7%), var(--tmd-surface-2, rgba(127, 127, 127, .12)));
+      }
+      .cb-wc.none {
+        background: var(--tmd-surface-2, rgba(127, 127, 127, .12));
+        color: var(--tmd-dim, var(--secondary-text-color)); font-weight: 400;
+      }
+      .cb-hint { margin: 10px 0 0; font-size: 12px; color: var(--tmd-dim, var(--secondary-text-color)); }
+
+      .cb-toast {
+        position: absolute; inset-inline: 12px; bottom: 12px; z-index: 3;
+        display: flex; align-items: center; gap: 12px;
+        padding-block: 8px; padding-inline: 14px 8px; border-radius: 8px;
+        background: #323232; color: #fff; font-size: 13px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
+      }
+      .cb-toast span { flex: 1; min-width: 0; }
+      .cb-toast button {
+        flex: none; background: none; border: 0; cursor: pointer;
+        color: var(--primary-color, #03a9f4); font: inherit; font-weight: 600;
+        padding: 6px 10px; min-height: 32px;
+      }
+      :host([data-tm-design="accessible"]) .cb-toast button { color: #ffd54f; text-decoration: underline; }
+    `;
+    // The token block is :host-scoped, so it only takes effect when included
+    // in THIS card's styles — a document-level rule cannot cross into the
+    // shadow root.
+    const tokens = window.__taskmate_design && window.__taskmate_design.styles
+      ? window.__taskmate_design.styles() : null;
+    return tokens ? [tokens, base] : base;
+  }
+}
+
+class TaskMateChoreBoardCardEditor extends LitElement {
+  static get properties() {
+    return { hass: { type: Object }, config: { type: Object } };
+  }
+
+  setConfig(config) { this.config = config; }
+
+  _t(key, params) {
+    const fn = window.__taskmate_localize;
+    return fn ? fn(this.hass, key, params) : key;
+  }
+
+  _buildSchema() {
+    const attrs = (window.__taskmate_attrs && window.__taskmate_attrs(this.hass, this.config?.entity))
+      || this.hass?.states?.[this.config?.entity]?.attributes || {};
+    const children = attrs.children || [];
+    return [
+      { name: "entity", selector: { entity: { domain: "sensor" } } },
+      { name: "title", selector: { text: {} } },
+      {
+        name: "children",
+        selector: { select: { multiple: true, mode: "list", options: children.map(c => ({ value: c.id, label: c.name })) } },
+      },
+      {
+        name: "default_view",
+        selector: {
+          select: {
+            mode: "dropdown",
+            options: [
+              { value: "today", label: this._t("chore_board.today") },
+              { value: "week", label: this._t("chore_board.this_week") },
+            ],
+          },
+        },
+      },
+      { name: "show_week", selector: { boolean: {} } },
+      { name: "tap_to_complete", selector: { boolean: {} } },
+      { name: "show_legend", selector: { boolean: {} } },
+      { name: "hide_done_periods", selector: { boolean: {} } },
+      {
+        name: "card_design",
+        selector: {
+          select: {
+            options: window.__taskmate_design
+              ? window.__taskmate_design.editorOptions(this._t.bind(this))
+              : [{ value: "global", label: "Use global default" }],
+            mode: "dropdown",
+          },
+        },
+      },
+    ];
+  }
+
+  _computeLabel = (entry) => ({
+    entity: this._t("common.editor.overview_entity"),
+    title: this._t("common.editor.card_title"),
+    children: this._t("chore_board.editor.children"),
+    default_view: this._t("chore_board.editor.default_view"),
+    show_week: this._t("chore_board.editor.show_week"),
+    tap_to_complete: this._t("chore_board.editor.tap_to_complete"),
+    show_legend: this._t("chore_board.editor.show_legend"),
+    hide_done_periods: this._t("chore_board.editor.hide_done_periods"),
+    card_design: this._t("common.design.field_label"),
+  }[entry.name] ?? entry.name);
+
+  _computeHelper = (entry) => ({
+    entity: this._t("common.editor.overview_entity_helper"),
+    children: this._t("chore_board.editor.children_helper"),
+    tap_to_complete: this._t("chore_board.editor.tap_to_complete_helper"),
+    hide_done_periods: this._t("chore_board.editor.hide_done_periods_helper"),
+  }[entry.name] ?? "");
+
+  render() {
+    if (!this.hass || !this.config) return html``;
+    const data = {
+      entity: this.config.entity || "",
+      title: this.config.title || "",
+      children: Array.isArray(this.config.children) ? this.config.children : [],
+      default_view: this.config.default_view || "today",
+      show_week: this.config.show_week !== false,
+      tap_to_complete: this.config.tap_to_complete !== false,
+      show_legend: this.config.show_legend !== false,
+      hide_done_periods: this.config.hide_done_periods === true,
+      card_design: this.config.card_design || "global",
+    };
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${data}
+        .schema=${this._buildSchema()}
+        .computeLabel=${this._computeLabel}
+        .computeHelper=${this._computeHelper}
+        @value-changed=${this._formChanged}
+      ></ha-form>
+      ${this._renderColourPicker("header_color", DEFAULT_ACCENT)}
+    `;
+  }
+
+  _renderColourPicker(key, defaultValue) {
+    const d = window.__taskmate_design;
+    const current = this.config[key] || defaultValue;
+    if (!d || !d.colourPicker) return html``;
+    return d.colourPicker({
+      defaultValue, current,
+      label: this._t("common.editor.header_colour"),
+      helper: this._t("common.editor.header_colour_helper"),
+      resetLabel: this._t("common.reset"),
+      onInput: (v) => this._updateConfig(key, v),
+      onPreset: (v) => this._updateConfig(key, v),
+      onReset: () => this._updateConfig(key, defaultValue),
+    });
+  }
+
+  // Defaults are the absence of a key, so a saved card only carries what was
+  // changed from them.
+  static _isDefault(key, value) {
+    if (value === "" || value === null || value === undefined) return true;
+    if (key === "card_design") return value === "global";
+    if (key === "default_view") return value === "today";
+    if (key === "children") return Array.isArray(value) && value.length === 0;
+    if (["show_week", "tap_to_complete", "show_legend"].includes(key)) return value === true;
+    if (key === "hide_done_periods") return value === false;
+    return false;
+  }
+
+  _formChanged(e) {
+    const newValues = e.detail.value || {};
+    const newConfig = { ...this.config };
+    for (const [key, value] of Object.entries(newValues)) {
+      if (TaskMateChoreBoardCardEditor._isDefault(key, value)) delete newConfig[key];
+      else newConfig[key] = value;
+    }
+    this._fire(newConfig);
+  }
+
+  _updateConfig(key, value) {
+    const newConfig = { ...this.config, [key]: value };
+    if (value === null || value === "" || value === undefined) delete newConfig[key];
+    this._fire(newConfig);
+  }
+
+  _fire(config) {
+    this.dispatchEvent(new CustomEvent("config-changed", {
+      detail: { config }, bubbles: true, composed: true,
+    }));
+  }
+
+  static get styles() {
+    return css`
+      :host { display: block; }
+      ha-form { display: block; margin-bottom: 16px; }
+      .colour-field { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border: 1px solid var(--outline-color, var(--divider-color, #e0e0e0)); border-radius: 4px; background: var(--mdc-text-field-fill-color, var(--card-background-color)); }
+      .colour-field-label { font-size: 0.82rem; color: var(--primary-color); font-weight: 500; }
+      .colour-field-body { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+      .colour-swatch-wrapper { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 2px solid var(--divider-color, #e0e0e0); flex-shrink: 0; }
+      .colour-swatch-wrapper input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; border: 0; padding: 0; }
+      .colour-swatch-preview { position: absolute; inset: 0; pointer-events: none; }
+      .colour-hex { font-family: var(--code-font-family, monospace); font-size: 0.85rem; color: var(--secondary-text-color); min-width: 70px; }
+      .colour-presets { display: flex; gap: 6px; flex-wrap: wrap; }
+      .preset-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid var(--divider-color, #e0e0e0); transition: transform 0.1s; padding: 0; }
+      .preset-swatch:hover { transform: scale(1.15); }
+      .preset-swatch.active { border-color: var(--primary-text-color); box-shadow: 0 0 0 2px var(--primary-color); }
+      .colour-reset { font-size: 0.78rem; color: var(--secondary-text-color); background: none; border: 1px solid var(--divider-color, #e0e0e0); border-radius: 4px; padding: 4px 10px; cursor: pointer; margin-inline-start: auto; }
+      .colour-helper { color: var(--secondary-text-color); font-size: 0.82rem; line-height: 1.3; }
+    `;
+  }
+}
+
+customElements.define("taskmate-chore-board-card", TaskMateChoreBoardCard);
+customElements.define("taskmate-chore-board-card-editor", TaskMateChoreBoardCardEditor);
+
+window.customCards = window.customCards || [];
+window.customCards.push({
+  type: "taskmate-chore-board-card",
+  name: "TaskMate Chore Board",
+  description: "Every child's chores for today by time of day — tap one to complete it",
+  preview: true,
+  getEntitySuggestion: (hass, entityId) =>
+    window.__taskmate_suggest(hass, entityId, "taskmate-chore-board-card", "overview"),
+});