@tomorrowos/sdk 0.6.3 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomorrowos/sdk",
-  "version": "0.6.3",
+  "version": "0.6.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.6.3",
+  "version": "0.6.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.6.3",
+    "@tomorrowos/sdk": "^0.6.4",
     "dotenv": "^17.2.3"
   },
   "devDependencies": {

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

@@ -664,6 +664,8 @@ function renderDeviceCards() {
 
     const header = document.createElement("div");
     header.className = "device-card-header";
+    const headerMain = document.createElement("div");
+    headerMain.className = "device-card-header-main";
     const led = document.createElement("span");
     led.className = `status-led ${device.connected ? "status-led--online" : "status-led--offline"}`;
     const title = document.createElement("h3");
@@ -672,9 +674,9 @@ function renderDeviceCards() {
     if (isEditingName) {
       const input = document.createElement("input");
       input.type = "text";
+      input.className = "device-card-title-input";
       input.value = editingDeviceNameValue || device.deviceName || "Screen";
       input.placeholder = "Device name";
-      input.style.minWidth = "12rem";
       input.addEventListener("input", (ev) => {
         editingDeviceNameValue = String(ev.target.value || "");
       });
@@ -691,8 +693,36 @@ function renderDeviceCards() {
     } else {
       title.textContent = device.deviceName || "Screen";
     }
-    header.appendChild(led);
-    header.appendChild(title);
+    headerMain.appendChild(led);
+    headerMain.appendChild(title);
+
+    const headerActions = document.createElement("div");
+    headerActions.className = "device-card-header-actions";
+    if (isEditingName) {
+      const saveBtn = document.createElement("button");
+      saveBtn.type = "button";
+      saveBtn.className = "primary";
+      saveBtn.textContent = "Save";
+      saveBtn.addEventListener("click", () =>
+        void submitInlineDeviceRename(device.deviceId)
+      );
+      const cancelBtn = document.createElement("button");
+      cancelBtn.type = "button";
+      cancelBtn.textContent = "Cancel";
+      cancelBtn.addEventListener("click", cancelInlineDeviceRename);
+      headerActions.appendChild(saveBtn);
+      headerActions.appendChild(cancelBtn);
+    } else {
+      const renameBtn = document.createElement("button");
+      renameBtn.type = "button";
+      renameBtn.textContent = "Rename";
+      renameBtn.addEventListener("click", () =>
+        startInlineDeviceRename(device.deviceId, device.deviceName)
+      );
+      headerActions.appendChild(renameBtn);
+    }
+    header.appendChild(headerMain);
+    header.appendChild(headerActions);
 
     const published = document.createElement("ul");
     published.className = "device-published-list";
@@ -786,26 +816,6 @@ function renderDeviceCards() {
     latestScreenshotBtn.textContent = "Last screen";
     latestScreenshotBtn.addEventListener("click", () => viewLatestScreenshot(device.deviceId));
 
-    const renameBtn = document.createElement("button");
-    renameBtn.type = "button";
-    if (isEditingName) {
-      renameBtn.className = "primary";
-      renameBtn.textContent = "Save";
-      renameBtn.addEventListener("click", () =>
-        void submitInlineDeviceRename(device.deviceId)
-      );
-    } else {
-      renameBtn.textContent = "Rename";
-      renameBtn.addEventListener("click", () =>
-        startInlineDeviceRename(device.deviceId, device.deviceName)
-      );
-    }
-
-    const cancelRenameBtn = document.createElement("button");
-    cancelRenameBtn.type = "button";
-    cancelRenameBtn.textContent = "Cancel";
-    cancelRenameBtn.addEventListener("click", cancelInlineDeviceRename);
-
     const unpairBtn = document.createElement("button");
     unpairBtn.type = "button";
     unpairBtn.className = "danger";
@@ -820,8 +830,6 @@ function renderDeviceCards() {
     actions.appendChild(logsBtn);
     actions.appendChild(screenshotBtn);
     actions.appendChild(latestScreenshotBtn);
-    actions.appendChild(renameBtn);
-    if (isEditingName) actions.appendChild(cancelRenameBtn);
     actions.appendChild(unpairBtn);
 
     card.appendChild(header);

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

@@ -141,15 +141,45 @@ body {
 .device-card-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  justify-content: space-between;
+  gap: 0.35rem;
   margin-bottom: 0.65rem;
 }
 
+.device-card-header-main {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.device-card-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex-shrink: 0;
+}
+
+.device-card-header-actions button {
+  font-size: 0.78rem;
+  padding: 0.35rem 0.6rem;
+}
+
 .device-card-title {
   margin: 0;
   font-size: 0.95rem;
   font-weight: 600;
   line-height: 1.2;
+  min-width: 0;
+  flex: 1;
+}
+
+.device-card-title-input {
+  width: 100%;
+  min-width: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
 }
 
 .status-led {