npm - @tomorrowos/sdk - Versions diffs - 0.2.5 → 0.3.1 - Mend

@tomorrowos/sdk 0.2.5 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (339) hide show

package/templates/cms-starter/public/index.html CHANGED Viewed

@@ -9,14 +9,22 @@
   <body>
     <header class="app-header">
       <h1>TomorrowOS Control Panel</h1>
-      <p>Pair multiple screens, build a playlist, then publish per device.</p>
+      <p>Create playlists, save with confirm, then publish selected playlists per device.</p>
     </header>
     <div class="layout">
+      <aside class="panel-playlist-nav">
+        <div class="playlist-nav-header">
+          <h2>Playlists</h2>
+          <button type="button" class="primary" id="newPlaylistBtn" title="New playlist">+</button>
+        </div>
+        <ul id="playlistCatalog" class="playlist-catalog"></ul>
+      </aside>
       <main class="panel-main">
         <section class="card">
           <h2>Pair device</h2>
-          <p class="hint">Enter the 6-character code on the screen (A–Z or 0–9). Each device keeps the same code after unpair.</p>
+          <p class="hint">Enter the 6-character code on the screen (A–Z or 0–9).</p>
           <div class="row">
             <input id="code" maxlength="6" placeholder="e.g. A3K9Z1" autocapitalize="characters" />
             <button type="button" onclick="verify()">Verify</button>
@@ -26,17 +34,14 @@
         <section class="card" id="pairedDevicesSection">
           <h2>Paired devices</h2>
           <div id="devicesGrid" class="devices-grid">
-            <p class="devices-empty" id="devicesEmpty">No paired devices yet. Enter a code above.</p>
+            <p class="devices-empty" id="devicesEmpty">No paired devices yet.</p>
           </div>
         </section>
         <section class="card" id="cmsUrlSection">
           <h2>CMS URL for screens</h2>
           <p class="hint">
-            <strong>Local development only.</strong> Fill this in when you run the CMS on your PC and
-            TVs are on the same LAN (e.g. <code>http://192.168.1.105:3000</code> — same machine as your
-            <code>ws://</code> address, not <code>localhost</code>). On hosted CMS (Replit, etc.) you
-            normally do <strong>not</strong> need to change this.
+            <strong>Local development only.</strong> LAN URL for TVs (not localhost).
           </p>
           <div class="row">
             <input
@@ -49,11 +54,16 @@
           </div>
         </section>
-        <section class="card">
-          <h2>When this playlist plays</h2>
-          <p class="hint">
-            Leave blank for always on (device local time). All set fields must match.
-          </p>
+        <section class="card" id="playlistEditorSection">
+          <h2 id="editorTitle">Playlist editor</h2>
+          <p class="hint">Save confirms changes. Names must be unique. Schedule applies to this playlist only.</p>
+          <label class="field-label">
+            Name
+            <input type="text" id="playlistName" placeholder="e.g. Weekday promo" />
+          </label>
+          <h3 class="subheading">When this playlist plays</h3>
+          <p class="hint">Leave blank for always on (device local time).</p>
           <div class="schedule-grid">
             <label>
               Start date
@@ -82,6 +92,11 @@
               <label><input type="checkbox" class="day-checkbox" value="6" /> Sat</label>
             </div>
           </div>
+          <div class="editor-actions">
+            <button type="button" class="primary" id="savePlaylistBtn">Save playlist</button>
+            <button type="button" class="danger" id="deletePlaylistBtn">Delete playlist</button>
+          </div>
         </section>
         <pre id="result" aria-live="polite"></pre>
@@ -89,7 +104,7 @@
       <aside class="panel-playlist">
         <div class="playlist-header">
-          <h2>Playlist</h2>
+          <h2>Assets</h2>
           <button type="button" class="primary" id="addAssetBtn" title="Add image or video">+</button>
         </div>
         <input
@@ -99,11 +114,24 @@
           accept="image/*,video/*,.wgt,.zip"
         />
         <ul id="playlistList" class="playlist-list">
-          <li class="playlist-empty" id="playlistEmpty">No assets yet. Tap + to upload.</li>
+          <li class="playlist-empty" id="playlistEmpty">Select or create a playlist, then add assets.</li>
         </ul>
       </aside>
     </div>
+    <div id="publishModal" class="modal hidden" role="dialog" aria-modal="true">
+      <div class="modal-backdrop" data-close-modal="1"></div>
+      <div class="modal-card">
+        <h2>Publish to device</h2>
+        <p class="hint" id="publishModalHint">Select playlists to deploy. Updates apply on publish; reboot pulls latest saved versions.</p>
+        <div id="publishChecklist" class="publish-checklist"></div>
+        <div class="modal-actions">
+          <button type="button" id="publishConfirmBtn" class="primary">Publish selected</button>
+          <button type="button" data-close-modal="1">Cancel</button>
+        </div>
+      </div>
+    </div>
     <script src="./methods.js" defer></script>
   </body>
 </html>