@telepath-computer/television 0.1.8 → 0.1.9

package/dist/browser/assets/index-CmOTsDN-.css

@@ -0,0 +1 @@
+artifact-view{background:var(--color-bg-muted);border:1px solid var(--color-border);border-radius:10px;box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.artifact-title-bar{display:flex;align-items:center;height:34px;padding:0 12px;flex-shrink:0;border-bottom:1px solid var(--color-border);-webkit-user-select:none;user-select:none}.artifact-title{flex:1;font-size:13px;font-weight:500;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.artifact-close-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:6px;background:transparent;color:var(--color-text-muted);cursor:pointer;flex-shrink:0}.artifact-close-btn:hover{background:var(--color-interactive);color:var(--color-text)}.artifact-content{flex:1;min-height:0;overflow:hidden;padding:0}.artifact-html-frame{pointer-events:none}layout-view{width:100%;flex:1;min-width:0;min-height:0;display:flex;align-items:flex-start;overflow:hidden;outline:none;position:relative;--layout-unit-x: 120px;--layout-unit-y: 120px;--layout-gap: 16px;--layout-drag-transition-ms: 0ms;--color-drag-target: color-mix( in srgb, var(--color-border, var(--neutral-300, #cbd5e1)) 55%, transparent );--shadow-drag-card: 0 24px 48px color-mix(in srgb, var(--neutral-900, #0f172a) 28%, transparent)}layout-view .track{display:flex;align-items:start;gap:var(--layout-gap);flex-shrink:0;width:max-content;will-change:transform;transition:transform .2s ease}layout-view .node{display:grid;grid-template-columns:repeat(4,var(--layout-unit-x));grid-template-rows:repeat(6,var(--layout-unit-y));gap:var(--layout-gap);align-self:start;width:calc(var(--layout-unit-x) * 4 + var(--layout-gap) * 3);will-change:transform}layout-view .card-slot{border-radius:12px;box-sizing:border-box;cursor:default;min-width:0;min-height:0;position:relative;z-index:1}layout-view .card-slot artifact-view{width:100%;height:100%}layout-view .card-slot[data-layout-draggable=true]{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}layout-view .card-placeholder{border-radius:12px;background:var(--color-drag-target);position:relative;z-index:0}layout-view .card-placeholder[data-layout-placeholder-ghost=true]{background:transparent;border:0;opacity:0;pointer-events:none}layout-view .drag-preview{position:fixed;z-index:10;pointer-events:none;filter:drop-shadow(var(--shadow-drag-card))}layout-view .drag-preview>*{width:100%;height:100%}workspace-view{width:100%;flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}workspace-view [data-testid=empty-workspace]{margin:0;padding:1rem}television-app{width:100%;height:100%;display:grid;grid-template-rows:auto 1fr;grid-template-areas:"header" "main"}television-app>header{grid-area:header;position:relative;z-index:10}television-app>main{grid-area:main;grid-row:1 / -1}body.electron television-app>header{-webkit-app-region:drag;padding-left:80px;border-bottom:1px solid var(--color-border)}header{display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 12px;flex-shrink:0;-webkit-user-select:none;user-select:none}television-app>header>nav{display:flex;align-items:center;gap:8px;min-width:0}workspace-picker,workspace-picker [trigger],button[variant=toolbar],.settings-server-remove-button,.settings-submit-button,.settings-cancel-button,.settings-connect-button,.settings-field input{-webkit-app-region:no-drag}workspace-picker dropdown-menu::part(panel){min-width:18rem}workspace-picker [trigger],workspace-picker [trigger][data-dropdown-trigger]{min-width:0;padding:0;border:none;background:transparent;font-size:13px;font-weight:600}workspace-picker [trigger] .trigger-label{white-space:nowrap}dropdown-group{display:block;padding:4px 0}dropdown-label{display:block;padding:0 10px 4px;font-size:12px;color:color-mix(in srgb,currentColor 60%,transparent)}dropdown-item{display:block;padding:6px 10px;border-radius:4px;cursor:pointer}dropdown-item[selected]{background:color-mix(in srgb,var(--color-border) 70%,white)}dropdown-item[action]{color:color-mix(in srgb,currentColor 50%,transparent)}dropdown-item[danger]{color:#c74343}television-app>main{min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column}television-app>main.auth-gate{display:flex;align-items:center;justify-content:center}.settings-panel{width:min(32rem,100%);display:flex;flex-direction:column;padding:20px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-bg)}.workspace-modal,.auth-modal{width:min(24rem,100%);display:flex;flex-direction:column;padding:20px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-bg)}.auth-form{display:flex;flex-direction:column;gap:12px}.auth-modal-title,.auth-modal-copy{margin:0}.auth-token-input-invalid{border-color:#c74343}.workspace-form{display:flex;flex-direction:column;gap:12px}.workspace-form-actions{display:flex;gap:8px}.workspace-modal-title,.workspace-delete-copy,.workspace-delete-warning,.workspace-delete-error{margin:0}.workspace-delete-warning,.workspace-delete-error{font-size:13px}.workspace-delete-error{color:#c74343}.settings-section-title{margin:0}.settings-section,.settings-server-list,.settings-add-server-form{display:flex;flex-direction:column;gap:12px}.settings-form-actions{display:flex;gap:8px}.settings-card{padding:12px;border:1px solid var(--color-border);border-radius:8px}.settings-server{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-server-details{min-width:0}.settings-server-name{font-weight:600}.settings-server-url{font-size:13px;word-break:break-word;color:color-mix(in srgb,currentColor 70%,transparent)}.settings-server-remove-button,.settings-submit-button,.settings-cancel-button,.settings-connect-button{padding:8px 12px;border-radius:8px}.settings-field{display:flex;flex-direction:column;gap:6px}.settings-field input{width:100%;padding:8px 10px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-bg);color:inherit;font:inherit;box-sizing:border-box}.settings-submit-button,.settings-cancel-button,.settings-connect-button{align-self:flex-start}dropdown-menu{position:relative;display:inline-block;color:inherit}dropdown-group{display:grid;gap:var(--space-4)}dropdown-label{display:block;padding:var(--space-4) var(--space-8);color:var(--color-text-muted);font:inherit;font-size:var(--text-sm);font-weight:600;letter-spacing:.04em;text-transform:uppercase}dropdown-divider{display:block;height:1px;margin:var(--space-4) 0;background:var(--color-border)}[data-dropdown-trigger],dropdown-item{color:inherit;font:inherit;line-height:1.2}[data-dropdown-trigger],dropdown-menu::part(trigger){display:inline-flex;align-items:center;gap:var(--space-8);margin:0;padding:.375rem .5rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);box-shadow:none;cursor:pointer}[data-dropdown-trigger]:hover,dropdown-menu::part(trigger):hover{background:var(--color-interactive-hover)}dropdown-menu[open] [data-dropdown-trigger],dropdown-menu[open]::part(trigger){background:var(--color-interactive)}[data-dropdown-trigger-label],dropdown-menu::part(trigger-label){min-width:0}[data-dropdown-trigger-icon],dropdown-menu::part(trigger-icon){display:inline-flex;align-items:center;justify-content:center;flex:none}[data-dropdown-trigger]:focus-visible,dropdown-menu::part(trigger):focus-visible,dropdown-item:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}dropdown-menu::part(panel){position:absolute;top:calc(100% + var(--space-4));left:0;z-index:var(--layer-popover);min-width:12rem;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-popover)}dropdown-item{display:block;margin:0;padding:.375rem .5rem;border-radius:var(--radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}dropdown-item:hover{background:var(--color-interactive-hover)}dropdown-item[selected]{background:var(--color-interactive)}panel-view{display:block}panel-view::part(panel){display:flex;flex-direction:column;gap:var(--space-16);color:var(--color-text)}panel-view::part(header){display:flex;align-items:center;justify-content:space-between;gap:var(--space-12)}panel-view::part(title-group){display:flex;align-items:center;gap:var(--space-8);min-width:0}panel-view::part(title){margin:0;font:inherit;font-size:var(--text-lg);font-weight:600;color:var(--color-text)}panel-view::part(button){display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;margin:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);box-shadow:none;cursor:pointer}panel-view::part(button):hover{background:var(--color-interactive-hover)}panel-view::part(button):focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}panel-view::part(icon){display:inline-flex;align-items:center;justify-content:center;flex:none}panel-view::part(back-icon){transform:rotate(90deg)}modal-overlay{color:inherit}modal-overlay::part(backdrop){position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--layer-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-16);background:var(--color-overlay-backdrop)}*,*:before,*:after{box-sizing:border-box}:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--font-brand: var(--font-sans);--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;--text-base: 14px;--text-scale: 1.125;--text-sm: round(calc(var(--text-base) / var(--text-scale)), 1px);--text-lg: round(calc(var(--text-base) * var(--text-scale)), 1px);--text-xl: round(calc(var(--text-lg) * var(--text-scale)), 1px);--leading-base: 1.5;--space-2: 2px;--space-4: 4px;--space-6: 6px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-24: 24px;--space-32: 32px;--space-48: 48px;--space-64: 64px;--radius-sm: .375rem;--radius-md: .5rem;--layer-popover: 10;--layer-modal: 1000;--shadow-popover: 0 12px 32px rgb(0 0 0 / .14);--shadow-modal: 0 24px 64px rgb(0 0 0 / .2)}html,body{margin:0;padding:0;width:100%;height:100%}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);color:var(--color-text);background:var(--color-bg)}a{text-underline-offset:.15em;text-decoration-thickness:.08em}button,input,textarea,select{font:inherit;color:inherit}a{color:var(--color-link)}h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote,pre,hr{margin:0}h1,h2,h3,h4,h5,h6{font-weight:600;color:var(--color-text)}code{font-family:var(--font-mono);font-size:.9em;background:var(--color-bg-muted);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm)}pre{font-family:var(--font-mono);background:var(--color-bg-muted);padding:var(--space-12);border-radius:var(--radius-md);overflow-x:auto}pre code{background:none;padding:0}blockquote{padding-left:var(--space-16);border-left:3px solid var(--color-border);color:var(--color-text-muted)}hr{border:none;border-top:1px solid var(--color-border)}table{border-collapse:collapse}th,td{padding:var(--space-8) var(--space-12);border:1px solid var(--color-border);text-align:left}th{background:var(--color-bg-muted);font-weight:600}.prose{line-height:var(--leading-base)}.prose h1{font-size:var(--text-xl);margin-bottom:var(--space-8)}.prose h2{font-size:var(--text-lg);margin-top:var(--space-24);margin-bottom:var(--space-8)}.prose h3,.prose h4,.prose h5,.prose h6{font-size:var(--text-base);margin-top:var(--space-24);margin-bottom:var(--space-8)}.prose p{margin:var(--space-12) 0}.prose ul,.prose ol{padding-left:var(--space-24);margin:var(--space-12) 0}.prose blockquote,.prose pre{margin:var(--space-12) 0}.prose hr{margin:var(--space-24) 0}.prose table{width:100%;margin:var(--space-12) 0}.prose img{max-width:100%;height:auto}.prose>:first-child{margin-top:0}.prose>:last-child{margin-bottom:0}[data-ui-icon]{display:inline-block;vertical-align:middle}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:inherit;cursor:pointer}button:hover{background:var(--color-interactive)}button[variant=toolbar]{border:none;background:transparent;color:var(--color-text-muted)}button[size=sm]{min-height:26px;padding:var(--space-2) var(--space-6)}button[size=md]{min-height:32px;padding:var(--space-6) var(--space-12)}:root{--black: #000000;--white: #ffffff;--neutral-50: oklch(.985 .001 106.423);--neutral-100: oklch(.97 .001 106.424);--neutral-200: oklch(.923 .003 48.717);--neutral-300: oklch(.869 .005 56.366);--neutral-400: oklch(.709 .01 56.259);--neutral-500: oklch(.553 .013 58.071);--neutral-600: oklch(.444 .011 73.639);--neutral-700: oklch(.374 .01 67.558);--neutral-800: oklch(.268 .007 34.298);--neutral-900: oklch(.216 .006 56.043);--neutral-950: oklch(.147 .004 49.25)}:root{--color-bg: var(--neutral-50);--color-bg-muted: var(--neutral-100);--color-surface: var(--white);--color-surface-muted: var(--neutral-100);--color-interactive: var(--neutral-200);--color-interactive-hover: var(--neutral-300);--color-border: var(--neutral-300);--color-border-muted: var(--neutral-200);--color-text: var(--neutral-900);--color-text-muted: var(--neutral-500);--color-link: inherit;--color-focus-ring: var(--neutral-500);--color-overlay-backdrop: rgb(0 0 0 / .5);color-scheme:light}:root{--color-bg: var(--neutral-200);--color-border: var(--neutral-300)}

package/dist/browser/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Television</title>
-    <script type="module" crossorigin src="./assets/index-C3ygXWMh.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-nGpvLl78.css">
+    <script type="module" crossorigin src="./assets/index-BEMTFjJ-.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CmOTsDN-.css">
   </head>
   <body></body>
 </html>

package/dist/cli.cjs

@@ -77196,13 +77196,21 @@ var Server2 = class {
     });
   }
   start() {
-    return new Promise((resolve) => {
-      this.httpServer.listen(this.port, this.host, () => {
+    return new Promise((resolve, reject) => {
+      const handleError = (error2) => {
+        this.httpServer.off("listening", handleListening);
+        reject(error2);
+      };
+      const handleListening = () => {
+        this.httpServer.off("error", handleError);
         const address = this.httpServer.address();
         const resolvedPort = typeof address === "object" && address ? address.port : this.port;
         this.baseURL = buildServerURL(this.host ?? DEFAULT_SERVER_HOST, resolvedPort);
         resolve(this.httpServer);
-      });
+      };
+      this.httpServer.once("error", handleError);
+      this.httpServer.once("listening", handleListening);
+      this.httpServer.listen(this.port, this.host);
     });
   }
   getBaseURL() {
@@ -77353,15 +77361,29 @@ function isClientMessage(value) {
     case "create-workspace":
       return typeof message.id === "string" && typeof message.name === "string";
     case "update-workspace":
-      return typeof message.workspaceID === "string" && typeof message.fields === "object" && message.fields !== null && (!("name" in message.fields) || typeof message.fields.name === "string") && (!("layout" in message.fields) || Array.isArray(message.fields.layout) && message.fields.layout.every(
-        (card) => typeof card === "object" && card !== null && "type" in card && card.type === "artifact" && "artifactID" in card && typeof card.artifactID === "string" && "cols" in card && typeof card.cols === "number" && "rows" in card && typeof card.rows === "number"
-      ));
+      return typeof message.workspaceID === "string" && typeof message.fields === "object" && message.fields !== null && (!("name" in message.fields) || typeof message.fields.name === "string") && (!("layout" in message.fields) || Array.isArray(message.fields.layout) && message.fields.layout.every(isLayoutNode));
     case "delete-workspace":
       return typeof message.workspaceID === "string";
     default:
       return false;
   }
 }
+function isLayoutNode(value) {
+  if (typeof value !== "object" || value === null || !("type" in value)) {
+    return false;
+  }
+  const node = value;
+  switch (node.type) {
+    case "card":
+      return typeof node.id === "string" && typeof node.artifactID === "string" && (typeof node.width === "number" || node.width === "auto") && (typeof node.height === "number" || node.height === "auto");
+    case "row":
+      return typeof node.id === "string" && (typeof node.height === "number" || node.height === "auto") && Array.isArray(node.children) && node.children.every(isLayoutNode);
+    case "stack":
+      return typeof node.id === "string" && Array.isArray(node.children) && node.children.every(isLayoutNode);
+    default:
+      return false;
+  }
+}
 
 // node_modules/mitt/dist/mitt.mjs
 function mitt_default(n) {
@@ -77413,54 +77435,324 @@ var import_node_crypto2 = require("node:crypto");
 var import_node_fs3 = require("node:fs");
 var import_node_path4 = __toESM(require("node:path"), 1);
 
+// src/constants.ts
+var LAYOUT_FULL_WIDTH_UNITS = 4;
+var LAYOUT_FULL_HEIGHT_UNITS = 6;
+var MIN_LAYOUT_CARD_WIDTH_UNITS = 2;
+var MAX_LAYOUT_CARD_WIDTH_UNITS = LAYOUT_FULL_WIDTH_UNITS;
+var DEFAULT_LAYOUT_CARD_WIDTH = "auto";
+var DEFAULT_LAYOUT_CARD_HEIGHT = "auto";
+var DEFAULT_LAYOUT_UNIT = 120;
+var CARD_GAP = 16;
+var CARD_WIDTH = DEFAULT_LAYOUT_UNIT * LAYOUT_FULL_WIDTH_UNITS + CARD_GAP * (LAYOUT_FULL_WIDTH_UNITS - 1);
+var CARD_HEIGHT = DEFAULT_LAYOUT_UNIT * LAYOUT_FULL_HEIGHT_UNITS + CARD_GAP * (LAYOUT_FULL_HEIGHT_UNITS - 1);
+
 // src/types.ts
-var DEFAULT_LAYOUT_CARD_COLS = 2;
-var DEFAULT_LAYOUT_CARD_ROWS = 6;
-var LAYOUT_COLS_NARROW = 1;
-var LAYOUT_ROW_SHORT = 2;
-var LAYOUT_ROW_MID = 3;
-var LAYOUT_ROW_TALL = 4;
-var ALLOWED_COLS = [LAYOUT_COLS_NARROW, DEFAULT_LAYOUT_CARD_COLS];
-var ALLOWED_ROWS = [
-  LAYOUT_ROW_SHORT,
-  LAYOUT_ROW_MID,
-  LAYOUT_ROW_TALL,
-  DEFAULT_LAYOUT_CARD_ROWS
-];
-function clampLayoutCols(cols) {
-  const n = Math.round(cols);
-  return ALLOWED_COLS.includes(n) ? n : DEFAULT_LAYOUT_CARD_COLS;
-}
-function clampLayoutRows(rows) {
-  const n = Math.round(rows);
-  return ALLOWED_ROWS.includes(n) ? n : DEFAULT_LAYOUT_CARD_ROWS;
-}
-function createLayoutCardRecord(artifactID) {
+function createCardNode(artifactID, overrides = {}) {
   return {
-    type: "artifact",
+    id: overrides.id ?? ulid3(),
+    type: "card",
     artifactID,
-    cols: DEFAULT_LAYOUT_CARD_COLS,
-    rows: DEFAULT_LAYOUT_CARD_ROWS
+    width: overrides.width ?? DEFAULT_LAYOUT_CARD_WIDTH,
+    height: overrides.height ?? DEFAULT_LAYOUT_CARD_HEIGHT
   };
 }
-function sanitizeLayoutCard(card) {
+function layoutContainsArtifactID(layout, artifactID) {
+  return layout.some((node) => nodeContainsArtifactID(node, artifactID));
+}
+function nodeContainsArtifactID(node, artifactID) {
+  switch (node.type) {
+    case "card":
+      return node.artifactID === artifactID;
+    case "row":
+      return node.children.some((child) => child.artifactID === artifactID);
+    case "stack":
+      return node.children.some((child) => nodeContainsArtifactID(child, artifactID));
+  }
+}
+function getWorkspaceArtifactIDs(workspace) {
+  return workspace.layout.flatMap(collectArtifactIDs);
+}
+function collectArtifactIDs(node) {
+  switch (node.type) {
+    case "card":
+      return [node.artifactID];
+    case "row":
+      return node.children.map((child) => child.artifactID);
+    case "stack":
+      return node.children.flatMap(collectArtifactIDs);
+  }
+}
+
+// src/browser/ui/layout.ts
+var LEGACY_BAND_HEIGHT_ROWS = 6;
+var LEGACY_NARROW_COLS = 1;
+var LEGACY_FULL_COLS = 2;
+var LEGACY_ROW_SHORT = 2;
+var LEGACY_ROW_MID = 3;
+var LEGACY_ROW_TALL = 4;
+var LEGACY_ROW_FULL = 6;
+var LEGACY_ALLOWED_ROWS = [LEGACY_ROW_SHORT, LEGACY_ROW_MID, LEGACY_ROW_TALL, LEGACY_ROW_FULL];
+var LEGACY_LEFT_X = 0;
+var LEGACY_RIGHT_X = 1;
+function removeArtifactFromLayout(layout, artifactID) {
+  return normalizeRootNodes(layout.flatMap((node) => removeArtifactFromNode(node, artifactID)));
+}
+function migrateLegacyLayout(cards) {
+  const normalized = cards.map((card) => ({
+    artifactID: card.artifactID,
+    width: normalizeLegacyCols(card.width),
+    height: normalizeLegacyRows(card.height)
+  }));
+  const bands = deriveLegacyBands(normalized);
+  return normalizeRootNodes(bands.flatMap(buildNodesForLegacyBand));
+}
+function normalizeRootNodes(layout) {
+  const normalized = [];
+  for (const node of layout) {
+    const entries = normalizeNode(node);
+    for (const entry of entries) {
+      if (entry.type === "row") {
+        normalized.push(...entry.children.map(cloneCard));
+        continue;
+      }
+      normalized.push(entry);
+    }
+  }
+  return normalized;
+}
+function normalizeNode(node) {
+  switch (node.type) {
+    case "card":
+      return [cloneCard(node)];
+    case "row": {
+      const children = node.children.map(cloneCard);
+      if (children.length === 0) {
+        return [];
+      }
+      if (children.length === 1) {
+        return [children[0]];
+      }
+      return [{ ...node, children }];
+    }
+    case "stack": {
+      const children = [];
+      for (const child of node.children) {
+        const normalizedChildren = normalizeNode(child);
+        for (const normalizedChild of normalizedChildren) {
+          if (normalizedChild.type === "stack") {
+            children.push(...normalizedChild.children.map(cloneStackChild));
+            continue;
+          }
+          if (normalizedChild.type === "row") {
+            children.push({
+              ...normalizedChild,
+              children: normalizedChild.children.map(cloneCard)
+            });
+            continue;
+          }
+          children.push(cloneCard(normalizedChild));
+        }
+      }
+      if (children.length === 0) {
+        return [];
+      }
+      if (children.length === 1) {
+        return [cloneStackChild(children[0])];
+      }
+      return [{ ...node, children }];
+    }
+  }
+}
+function removeArtifactFromNode(node, artifactID) {
+  switch (node.type) {
+    case "card":
+      return node.artifactID === artifactID ? [] : [cloneCard(node)];
+    case "row": {
+      const children = node.children.filter((child) => child.artifactID !== artifactID).map(cloneCard);
+      if (children.length === 0) {
+        return [];
+      }
+      if (children.length === 1) {
+        return [children[0]];
+      }
+      return [{ ...node, children }];
+    }
+    case "stack": {
+      const children = node.children.flatMap((child) => {
+        const removed = removeArtifactFromNode(child, artifactID);
+        return removed.filter((entry) => entry.type !== "stack");
+      });
+      if (children.length === 0) {
+        return [];
+      }
+      if (children.length === 1) {
+        return [cloneStackChild(children[0])];
+      }
+      return [{ ...node, children }];
+    }
+  }
+}
+function normalizeLegacyCols(width) {
+  return Math.round(width) === LEGACY_NARROW_COLS ? LEGACY_NARROW_COLS : LEGACY_FULL_COLS;
+}
+function normalizeLegacyRows(height) {
+  const rounded = Math.round(height);
+  return LEGACY_ALLOWED_ROWS.includes(rounded) ? rounded : LEGACY_BAND_HEIGHT_ROWS;
+}
+function deriveLegacyBands(cards) {
+  const bands = [];
+  let current = null;
+  for (const card of cards) {
+    if (!current) {
+      const placements = packLegacyBand([card], card.width);
+      if (!placements) {
+        continue;
+      }
+      current = {
+        width: card.width,
+        placements
+      };
+      continue;
+    }
+    const nextCards = current.placements.map((placement) => ({
+      artifactID: placement.artifactID,
+      width: placement.width,
+      height: placement.height
+    })).concat(card);
+    let nextWidth = current.width;
+    let packed = packLegacyBand(nextCards, nextWidth);
+    if (!packed && current.width < LEGACY_FULL_COLS && card.width > current.width) {
+      nextWidth = LEGACY_FULL_COLS;
+      packed = packLegacyBand(nextCards, nextWidth);
+    }
+    if (packed) {
+      current = {
+        width: nextWidth,
+        placements: packed
+      };
+      continue;
+    }
+    bands.push(current);
+    const newPlacements = packLegacyBand([card], card.width);
+    if (!newPlacements) {
+      current = null;
+      continue;
+    }
+    current = {
+      width: card.width,
+      placements: newPlacements
+    };
+  }
+  if (current) {
+    bands.push(current);
+  }
+  return bands;
+}
+function packLegacyBand(cards, width) {
+  const occupied = Array.from(
+    { length: LEGACY_BAND_HEIGHT_ROWS },
+    () => Array.from({ length: width }, () => false)
+  );
+  const placements = [];
+  for (const card of cards) {
+    const position = firstLegacyFit(occupied, width, card);
+    if (!position) {
+      return null;
+    }
+    const placement = {
+      artifactID: card.artifactID,
+      width: card.width,
+      height: card.height,
+      x: position.x,
+      y: position.y
+    };
+    placeLegacyCard(occupied, placement);
+    placements.push(placement);
+  }
+  return placements;
+}
+function firstLegacyFit(occupied, width, card) {
+  if (card.width > width || card.height > LEGACY_BAND_HEIGHT_ROWS) {
+    return null;
+  }
+  for (let y2 = 0; y2 <= LEGACY_BAND_HEIGHT_ROWS - card.height; y2 += 1) {
+    for (let x2 = 0; x2 <= width - card.width; x2 += 1) {
+      let fits = true;
+      for (let yy = y2; yy < y2 + card.height && fits; yy += 1) {
+        for (let xx = x2; xx < x2 + card.width; xx += 1) {
+          if (occupied[yy]?.[xx]) {
+            fits = false;
+            break;
+          }
+        }
+      }
+      if (fits) {
+        return { x: x2, y: y2 };
+      }
+    }
+  }
+  return null;
+}
+function placeLegacyCard(occupied, placement) {
+  for (let yy = placement.y; yy < placement.y + placement.height; yy += 1) {
+    for (let xx = placement.x; xx < placement.x + placement.width; xx += 1) {
+      occupied[yy][xx] = true;
+    }
+  }
+}
+function buildNodesForLegacyBand(band) {
+  const placements = [...band.placements].sort((a, b2) => a.y - b2.y || a.x - b2.x);
+  const children = [];
+  for (let index = 0; index < placements.length; index += 1) {
+    const current = placements[index];
+    const next = placements[index + 1];
+    if (current.width === LEGACY_NARROW_COLS && next && next.width === LEGACY_NARROW_COLS && next.y === current.y && next.height === current.height && current.x === LEGACY_LEFT_X && next.x === LEGACY_RIGHT_X) {
+      children.push({
+        id: ulid3(),
+        type: "row",
+        height: current.height,
+        children: [migrateLegacyCard(current), migrateLegacyCard(next)]
+      });
+      index += 1;
+      continue;
+    }
+    children.push(migrateLegacyCard(current));
+  }
+  if (children.length === 0) {
+    return [];
+  }
+  if (children.length === 1) {
+    const child = children[0];
+    return child.type === "row" ? child.children.map(cloneCard) : [cloneCard(child)];
+  }
+  return [
+    {
+      id: ulid3(),
+      type: "stack",
+      children
+    }
+  ];
+}
+function migrateLegacyCard(card) {
   return {
-    type: "artifact",
+    id: ulid3(),
+    type: "card",
     artifactID: card.artifactID,
-    cols: clampLayoutCols(card.cols ?? DEFAULT_LAYOUT_CARD_COLS),
-    rows: clampLayoutRows(card.rows ?? DEFAULT_LAYOUT_CARD_ROWS)
+    width: card.width === LEGACY_NARROW_COLS ? MIN_LAYOUT_CARD_WIDTH_UNITS : MAX_LAYOUT_CARD_WIDTH_UNITS,
+    height: card.height
   };
 }
-function migrateWorkspaceData(workspace) {
-  const layout = Array.isArray(workspace.layout) ? workspace.layout.map((card) => sanitizeLayoutCard(card)) : [];
+function cloneCard(node) {
   return {
-    id: workspace.id,
-    name: workspace.name,
-    layout
+    ...node
   };
 }
-function getWorkspaceArtifactIDs(workspace) {
-  return workspace.layout.map((card) => card.artifactID);
+function cloneStackChild(node) {
+  return node.type === "card" ? cloneCard(node) : {
+    ...node,
+    children: node.children.map(cloneCard)
+  };
 }
 
 // src/server/server-store.ts
@@ -77480,26 +77772,51 @@ function validateHTMLFragment(content) {
   }
 }
 function migrateWorkspaceJson(raw) {
-  if ("layout" in raw && Array.isArray(raw.layout) && raw.layout.length > 0) {
-    return false;
-  }
   if ("artifacts" in raw && Array.isArray(raw.artifacts)) {
     raw.layout = raw.artifacts;
     delete raw.artifacts;
     return true;
   }
   if ("artifactIDs" in raw && Array.isArray(raw.artifactIDs)) {
-    raw.layout = raw.artifactIDs.map((id) => ({
-      type: "artifact",
-      artifactID: id,
-      cols: DEFAULT_COLS,
-      rows: DEFAULT_ROWS
-    }));
+    raw.layout = raw.artifactIDs.map((id) => ({ artifactID: id, width: DEFAULT_COLS, height: DEFAULT_ROWS }));
     delete raw.artifactIDs;
     return true;
   }
   return false;
 }
+function deserializeWorkspaceData(workspace) {
+  const rawLayout = workspace.layout;
+  if (!Array.isArray(rawLayout)) {
+    return {
+      migrated: false,
+      workspace: {
+        id: workspace.id,
+        name: workspace.name,
+        layout: []
+      }
+    };
+  }
+  if (rawLayout.every(
+    (node) => typeof node === "object" && node !== null && "type" in node && (node.type === "card" || node.type === "stack")
+  )) {
+    return {
+      migrated: false,
+      workspace: {
+        id: workspace.id,
+        name: workspace.name,
+        layout: rawLayout
+      }
+    };
+  }
+  return {
+    migrated: true,
+    workspace: {
+      id: workspace.id,
+      name: workspace.name,
+      layout: migrateLegacyLayout(rawLayout)
+    }
+  };
+}
 var ServerStore = class extends Emitter {
   dataDir;
   workspaces = /* @__PURE__ */ new Map();
@@ -77533,7 +77850,7 @@ var ServerStore = class extends Emitter {
   }
   findArtifactWorkspaces(artifactID) {
     return [...this.workspaces.values()].filter(
-      (workspace) => workspace.layout.some((card) => card.artifactID === artifactID)
+      (workspace) => layoutContainsArtifactID(workspace.layout, artifactID)
     );
   }
   createArtifact(input) {
@@ -77551,7 +77868,7 @@ var ServerStore = class extends Emitter {
       content: input.content
     });
     this.artifacts.set(artifact.id, artifact);
-    workspace.layout.push(createLayoutCardRecord(artifact.id));
+    workspace.layout = [...workspace.layout, createCardNode(artifact.id)];
     this.persistArtifact(artifact);
     this.persistWorkspace(workspace);
     this.emit("mutation", {
@@ -77584,11 +77901,11 @@ var ServerStore = class extends Emitter {
       throw new Error(`Artifact not found: ${input.artifactID}`);
     }
     const workspace = this.requireWorkspace(input.workspaceID);
-    if (!workspace.layout.some((card) => card.artifactID === input.artifactID)) {
+    if (!layoutContainsArtifactID(workspace.layout, input.artifactID)) {
       throw new Error(`Artifact not linked to workspace: ${input.artifactID}`);
     }
     this.artifacts.delete(input.artifactID);
-    workspace.layout = workspace.layout.filter((card) => card.artifactID !== input.artifactID);
+    workspace.layout = removeArtifactFromLayout(workspace.layout, input.artifactID);
     this.persistWorkspace(workspace);
     this.deleteArtifactFile(input.artifactID);
     this.emit("mutation", {
@@ -77619,7 +77936,7 @@ var ServerStore = class extends Emitter {
       nextFields.name = input.fields.name;
     }
     if (Array.isArray(input.fields.layout)) {
-      workspace.layout = input.fields.layout.map((card) => sanitizeLayoutCard(card));
+      workspace.layout = input.fields.layout.map((node) => structuredClone(node));
       nextFields.layout = workspace.layout;
     }
     this.persistWorkspace(workspace);
@@ -77657,10 +77974,10 @@ var ServerStore = class extends Emitter {
       const filePath = import_node_path4.default.join(this.workspacesDir, file2);
       const raw = this.readJsonFile(filePath);
       if (!raw || typeof raw !== "object") continue;
-      const migrated = migrateWorkspaceJson(raw);
-      const workspace = migrateWorkspaceData(raw);
+      const renamedLegacyFields = migrateWorkspaceJson(raw);
+      const { workspace, migrated } = deserializeWorkspaceData(raw);
       this.workspaces.set(workspace.id, workspace);
-      if (migrated) {
+      if (renamedLegacyFields || migrated) {
         this.persistWorkspace(workspace);
       }
     }