Dashboard Studio 1.4.0: drag-and-drop dashboards for Home Assistant

A Home Assistant app with its own sidebar tab: free-form grid editor,
live entity widgets (lights, climate, car, calendar, Immich photos,
Afvalwijzer waste collection and more), themes, tabs with a side menu,
kiosk mode and English/Dutch translations.

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

dashboard_studio/web/index.html

@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#f2f2f7" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#0f0f11" media="(prefers-color-scheme: dark)">
+  <title>Dashboard Studio</title>
+  <link rel="stylesheet" href="static/style.css">
+</head>
+<body>
+  <div id="app">
+    <header id="topbar" role="toolbar" aria-label="Dashboard">
+      <div class="tb-group">
+        <label class="picker">
+          <span class="sr-only" data-i18n>Dashboard</span>
+          <select id="dash-select"></select>
+          <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
+        </label>
+        <button id="btn-new" class="btn icon" aria-label="New dashboard" title="New dashboard"></button>
+      </div>
+      <div class="tb-group">
+        <span id="conn" class="conn" role="status" data-i18n>Offline</span>
+        <span id="save-status" class="save-status edit-only" role="status"></span>
+        <span class="edit-only tb-group">
+          <button id="btn-undo" class="btn icon" aria-label="Undo" title="Undo (⌘Z)"></button>
+          <button id="btn-redo" class="btn icon" aria-label="Redo" title="Redo (⇧⌘Z)"></button>
+          <button id="btn-menu" class="btn icon" aria-label="More actions" aria-haspopup="menu" aria-expanded="false" title="More actions"></button>
+        </span>
+        <button id="btn-kiosk" class="btn view-only label-wide" aria-label="Kiosk" title="Kiosk mode"><span data-i18n>Kiosk</span></button>
+        <button id="btn-edit" class="btn primary" data-i18n>Edit</button>
+      </div>
+      <div id="menu" class="menu" role="menu" hidden>
+        <button role="menuitem" data-menu="rename" data-icon="edit" data-i18n>Rename…</button>
+        <button role="menuitem" data-menu="duplicate" data-icon="copy" data-i18n>Duplicate</button>
+        <button role="menuitem" data-menu="starter" data-icon="sparkles" data-i18n>New dashboard from my devices</button>
+        <hr>
+        <button role="menuitem" data-menu="export" data-icon="exit" data-i18n>Export as JSON</button>
+        <button role="menuitem" data-menu="import" data-icon="plus" data-i18n>Import JSON…</button>
+        <hr>
+        <button role="menuitem" data-menu="delete" data-icon="trash" class="danger" data-i18n>Delete dashboard…</button>
+      </div>
+    </header>
+
+    <div id="workspace">
+      <aside id="palette" class="edit-only" aria-label="Widgets">
+        <div class="panel-title" data-i18n>Add widget</div>
+        <div id="palette-list"></div>
+        <p class="hint" data-i18n>Click to add. Drag to move, drag the corner to resize. Arrow keys move the selected widget, Shift+arrows resize, ⌘D duplicates, Delete removes.</p>
+      </aside>
+
+      <main id="stage">
+        <nav id="tabnav" aria-label="Tabs" hidden></nav>
+        <div id="canvas"><div id="grid"></div></div>
+      </main>
+
+      <aside id="inspector" class="edit-only" aria-label="Inspector"></aside>
+    </div>
+  </div>
+
+  <div id="saver" hidden aria-hidden="true"><div class="time num"></div><div class="date"></div></div>
+
+  <div id="modal" class="modal" hidden><div class="modal-card" role="dialog" aria-modal="true"></div></div>
+  <div id="toasts" aria-live="polite"></div>
+  <input type="file" id="import-file" accept="application/json,.json" hidden>
+
+  <script src="static/i18n.js"></script>
+  <script src="static/icons.js"></script>
+  <script src="static/widgets.js"></script>
+  <script src="static/app.js"></script>
+</body>
+</html>