Dashboard Studio 1.10.0: phone dashboards, room card, changelog

- Phone dashboards: a 4-column layout designed at phone width, with
  conversion both ways; on phones the top bar is hidden and comes back
  with a touch-and-hold on an empty spot
- Room card built from Home Assistant areas (area, device and entity
  registries): climate, lights on with an all-lights toggle, thermostat,
  open doors and windows, motion, media, and device buttons
- CHANGELOG.md for Home Assistant's Changelog tab, served at
  /api/changelog and shown under About > What's new

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

dashboard_studio/web/style.css

@@ -218,6 +218,10 @@ textarea.input { resize: vertical; min-height: 76px; font-family: ui-monospace,
 .assign-kiosk { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
 .assign-kiosk input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
 @media (max-width: 560px) { .assign-row[data-dev] { flex-wrap: wrap; } .assign-row[data-dev] .input { flex-basis: 100%; } }
+.changelog { margin-top: 8px; }
+.changelog h4 { margin: 16px 0 4px; font-size: 15px; }
+.changelog ul { margin: 0; padding-left: 20px; color: var(--text); }
+.changelog li { margin: 4px 0; line-height: 1.45; }
 .attr-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 14px; }
 .attr-table td { border-top: 1px solid var(--separator); padding: 7px 4px; vertical-align: top; word-break: break-word; }
 .attr-table td:first-child { color: var(--text-2); width: 40%; }
@@ -584,6 +588,29 @@ body.kiosk #tabnav { top: 6px; max-height: calc(100vh - 20px); }
 .light-members { flex: 1; min-height: 0; margin: 0 -6px; }
 .light:has(.light-members) { justify-content: flex-start; }
 
+/* room */
+.room { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }
+.room.on-image { margin: -16px; padding: 16px; border-radius: inherit; color: #fff; --d-text-2: rgba(255, 255, 255, 0.86); --d-fill: rgba(255, 255, 255, 0.18);
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.6)), var(--room-img) center / cover; }
+.room-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.room-name { font-size: 17px; }
+.room-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.room-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 99px; background: var(--d-fill); font-size: 13px; font-weight: 600; max-width: 100%; }
+.room-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.room-chip .i { font-size: 16px; flex: none; }
+.room-chip.on { background: var(--d-text); color: var(--d-tile); }
+.room-chip.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
+.room-devices { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); align-content: start; gap: 8px; }
+.room-dev { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 48px; border-radius: 12px; background: var(--d-fill); min-width: 0; }
+.room-dev.on { background: var(--d-text); color: var(--d-tile); --d-text-2: color-mix(in srgb, var(--d-tile) 70%, transparent); }
+.room-dev-ico { font-size: 18px; display: flex; flex: none; }
+.room-dev-text { display: flex; flex-direction: column; min-width: 0; }
+.room-dev-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.room-dev-state { font-size: 12px; color: var(--d-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.w.lit-lamp .room-dev.on { background: rgba(255, 255, 255, 0.7); color: var(--lit-text); --d-text-2: var(--lit-text-2); }
+.w.lit-lamp .room-chip.on { background: rgba(61, 44, 10, 0.85); color: #fff6e6; }
+@container (max-height: 200px) { .room-devices { display: none; } }
+
 /* vacuum: compact on small cards, a robot with stats on bigger ones */
 .vac { display: flex; flex-direction: column; height: 100%; gap: 12px; }
 .vac-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
@@ -676,6 +703,13 @@ body.kiosk #tabnav { top: 6px; max-height: calc(100vh - 20px); }
 @container (max-width: 340px) { .car-img { display: none; } .car.has-img .car-head, .car.has-img .car-main { max-width: none; } .car-odo { display: none; } }
 @container (max-height: 200px) { .car-actions { display: none; } }
 
+/* ============================================================ phone dashboards */
+body.phone-ui:not(.peek) #topbar { display: none; }
+body.phone-ui #stage { padding-top: calc(env(safe-area-inset-top) + 6px); }
+body.phone-ui.peek #stage { padding-top: 72px; }
+body.phone-ui.peek #topbar { animation: peek-in .2s ease-out; }
+@keyframes peek-in { from { opacity: 0; transform: translateY(-8px); } }
+
 /* ============================================================ kiosk */
 body.kiosk #topbar, body.kiosk #palette, body.kiosk #inspector { display: none !important; }
 body.kiosk #stage { padding-top: 6px; }