@tomorrowos/sdk 0.7.2 → 0.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomorrowos/sdk",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "TomorrowOS CMS server SDK - WebSocket transport, pairing, device commands, optional static CMS UI. Includes CLI (tomorrowos init / build) and starter templates.",
   "type": "module",
   "main": "./dist/index.js",

package/templates/cms-starter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-cms",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "CMS server on @tomorrowos/sdk. Add your UI (React, static files, etc.) alongside this server.",
   "private": true,
   "type": "module",
@@ -10,7 +10,7 @@
     "build-player": "tomorrowos build --platform tizen"
   },
   "dependencies": {
-    "@tomorrowos/sdk": "^0.7.2",
+    "@tomorrowos/sdk": "^0.7.4",
     "dotenv": "^17.2.3"
   },
   "devDependencies": {

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

@@ -103,6 +103,7 @@
           <h2>Assets</h2>
           <button type="button" class="primary" id="addAssetBtn" title="Add image or video">+</button>
         </div>
+        <p class="hint playlist-assets-hint">Drag ⋮⋮ to reorder assets. Save playlist to keep the new order.</p>
         <input
           type="file"
           id="fileInput"

package/templates/cms-starter/public/methods.js

@@ -15,6 +15,9 @@ let playlistDraftActive = false;
 /** @type {{ id: string, assetId?: string, url: string, name: string, type: string, durationMs: number }[]} */
 let editorItems = [];
 
+/** Item id currently being dragged in the asset list (reorder). */
+let draggingEditorItemId = null;
+
 /** @type {string|null} */
 let publishModalDeviceId = null;
 let publishInProgress = false;
@@ -670,9 +673,75 @@ function loadEditorFromSelection() {
   updatePlaylistEditorVisibility();
 }
 
+function clearPlaylistItemDropTargets() {
+  document
+    .querySelectorAll(".playlist-item--drop-target, .playlist-item--dragging")
+    .forEach((el) => {
+      el.classList.remove("playlist-item--drop-target", "playlist-item--dragging");
+    });
+}
+
+function reorderEditorItems(fromId, toId) {
+  const fromIdx = editorItems.findIndex((x) => x.id === fromId);
+  const toIdx = editorItems.findIndex((x) => x.id === toId);
+  if (fromIdx < 0 || toIdx < 0 || fromIdx === toIdx) return;
+  const [moved] = editorItems.splice(fromIdx, 1);
+  editorItems.splice(toIdx, 0, moved);
+  renderEditorAssets();
+}
+
+function attachPlaylistItemDragDrop(li, item) {
+  li.dataset.itemId = item.id;
+
+  const handle = document.createElement("button");
+  handle.type = "button";
+  handle.className = "playlist-item-drag-handle";
+  handle.setAttribute("aria-label", "Drag to reorder");
+  handle.title = "Drag to reorder";
+  handle.textContent = "⋮⋮";
+  handle.draggable = true;
+
+  handle.addEventListener("dragstart", (e) => {
+    e.dataTransfer.setData("text/plain", item.id);
+    e.dataTransfer.effectAllowed = "move";
+    draggingEditorItemId = item.id;
+    li.classList.add("playlist-item--dragging");
+  });
+
+  handle.addEventListener("dragend", () => {
+    draggingEditorItemId = null;
+    clearPlaylistItemDropTargets();
+  });
+
+  li.addEventListener("dragover", (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (draggingEditorItemId && draggingEditorItemId !== item.id) {
+      li.classList.add("playlist-item--drop-target");
+    }
+  });
+
+  li.addEventListener("dragleave", (e) => {
+    if (!li.contains(e.relatedTarget)) {
+      li.classList.remove("playlist-item--drop-target");
+    }
+  });
+
+  li.addEventListener("drop", (e) => {
+    e.preventDefault();
+    li.classList.remove("playlist-item--drop-target");
+    const fromId = e.dataTransfer.getData("text/plain") || draggingEditorItemId;
+    if (!fromId || fromId === item.id) return;
+    reorderEditorItems(fromId, item.id);
+  });
+
+  li.insertBefore(handle, li.firstChild);
+}
+
 function renderEditorAssets() {
   const list = document.getElementById("playlistList");
   const empty = document.getElementById("playlistEmpty");
+  draggingEditorItemId = null;
   list.querySelectorAll(".playlist-item").forEach((el) => el.remove());
 
   if (!isPlaylistEditorOpen()) {
@@ -696,6 +765,7 @@ function renderEditorAssets() {
     if (item.type === "image" || item.type === "video") {
       const thumb = document.createElement(item.type === "video" ? "video" : "img");
       thumb.className = "playlist-item-thumb";
+      thumb.draggable = false;
       try {
         thumb.src = absoluteMediaUrl(item.url);
       } catch {
@@ -752,6 +822,7 @@ function renderEditorAssets() {
     li.appendChild(name);
     li.appendChild(meta);
     li.appendChild(actions);
+    attachPlaylistItemDragDrop(li, item);
     list.appendChild(li);
   }
 }

package/templates/cms-starter/public/panel.css

@@ -120,7 +120,7 @@ body {
 
 .devices-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(308px, 1fr));
   gap: 0.85rem;
 }
 
@@ -214,14 +214,16 @@ body {
 
 .device-meta-top {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 92px;
-  gap: 0.65rem;
-  align-items: stretch;
+  grid-template-columns: minmax(0, 1fr) 6.5rem;
+  gap: 0.5rem;
+  align-items: start;
   margin-bottom: 0.35rem;
 }
 
 .device-meta--primary {
   min-width: 0;
+  font-size: 0.77rem;
+  gap: 0.32rem;
 }
 
 .device-meta--secondary {
@@ -229,11 +231,11 @@ body {
 }
 
 .device-screenshot-slot {
-  width: 92px;
-  min-height: 4.85rem;
+  width: 6.5rem;
+  aspect-ratio: 13 / 9;
   flex-shrink: 0;
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: 4px;
   background: #fafaf9;
   overflow: hidden;
 }
@@ -242,7 +244,6 @@ body {
   display: block;
   width: 100%;
   height: 100%;
-  min-height: 4.85rem;
   padding: 0;
   border: 0;
   background: transparent;
@@ -253,7 +254,6 @@ body {
   display: block;
   width: 100%;
   height: 100%;
-  min-height: 4.85rem;
   object-fit: cover;
   object-position: center;
 }
@@ -429,12 +429,52 @@ button.danger {
   font-size: 0.875rem;
 }
 
+.playlist-assets-hint {
+  margin: 0 0 0.75rem;
+  font-size: 0.78rem;
+}
+
 .playlist-item {
   border: 1px solid #e4e1dc;
   border-radius: 8px;
   padding: 0.65rem;
   margin-bottom: 0.5rem;
   background: #fafaf9;
+  position: relative;
+}
+
+.playlist-item--dragging {
+  opacity: 0.55;
+}
+
+.playlist-item--drop-target {
+  border-color: #ff8a3d;
+  box-shadow: 0 0 0 2px rgba(255, 138, 61, 0.25);
+}
+
+.playlist-item-drag-handle {
+  display: block;
+  width: 100%;
+  margin: 0 0 0.45rem;
+  padding: 0.2rem 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #888;
+  font-size: 0.95rem;
+  line-height: 1;
+  letter-spacing: 0.08em;
+  cursor: grab;
+  touch-action: none;
+}
+
+.playlist-item-drag-handle:active {
+  cursor: grabbing;
+}
+
+.playlist-item-drag-handle:hover {
+  color: #444;
+  background: #f0eeea;
 }
 
 .playlist-item-thumb {