refactor: app mode — customizable layout

src/assets/css/style.css

@@ -1,4 +1,39 @@
 @import '@comfyorg/design-system/css/style.css';
+@import '../../components/appMode/layout/design-tokens.css';
+
+/* Panel chrome — surface treatment shared by FloatingPanel and the App
+   Builder toolbars so both read as the same floating surface. Matches
+   FloatingPanel's scoped values; intentional duplication kept in sync
+   via `--layout-color-cell-fill` + motion tokens above. */
+.panel-chrome {
+  background-color: var(--layout-color-cell-fill);
+  border: 1px solid rgb(255 255 255 / 0.08);
+  border-radius: 10px;
+  box-shadow:
+    0 2px 4px rgb(0 0 0 / 0.4),
+    0 16px 48px rgb(0 0 0 / 0.45);
+  backdrop-filter: blur(8px);
+}
+
+/* Widget inputs inside floating panels read as recessed into the panel
+   surface, not popping out of it. Uses --layout-color-canvas (the same
+   dark the output-canvas background uses) so widgets + canvas share a
+   visual "depth layer" distinct from the panel chrome. Applies to both
+   App Mode (LayoutView → PanelBlockList → InputCell) and App Builder
+   (BuilderPanel → AppModeWidgetList) without either component opting
+   in — keeps the two surfaces WYSIWYG-coherent by default. */
+.floating-panel textarea,
+.floating-panel input {
+  background-color: var(--layout-color-canvas);
+}
+/* ScrubableNumberInput and other widget containers use the
+   component-node-widget-background token for their shell. Override
+   inside a panel so the ± buttons, center value, and container share
+   one continuous canvas-dark pill instead of a darker center bounded
+   by a lighter button strip. */
+.floating-panel .bg-component-node-widget-background {
+  background-color: var(--layout-color-canvas);
+}
 
 /* Use 0.001ms instead of 0s so transitionend/animationend events still fire
    and JS listeners aren't broken. */

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -162,9 +162,10 @@ const { isSelectMode, isBuilderMode } = useAppMode()
 const { activeSidebarTabId, activeSidebarTab } = storeToRefs(sidebarTabStore)
 const { bottomPanelVisible } = storeToRefs(useBottomPanelStore())
 const { isOpen: rightSidePanelVisible } = storeToRefs(rightSidePanelStore)
-const showOffsideSplitter = computed(
-  () => rightSidePanelVisible.value || isSelectMode.value
-)
+/* Builder panel is now a FloatingPanel overlay (BuilderPanel.vue); it does
+ * not live in the splitter's offside slot anymore, so the splitter only
+ * force-opens when the graph-mode node-properties panel is visible. */
+const showOffsideSplitter = computed(() => rightSidePanelVisible.value)
 
 const sidebarPanelVisible = computed(
   () => activeSidebarTab.value !== null && !isBuilderMode.value

src/components/appMode/layout/LayoutGrid.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+/**
+ * LayoutGrid — grid layout primitive for App Mode.
+ *
+ * Renders cells on a 12-column responsive grid where 1×1 cells are square
+ * (row height = column width). Empty cells are invisible at runtime; only
+ * cells with content render as visible containers.
+ *
+ * Cells snap to integer column/row positions and integer span values.
+ */
+import { computed, useTemplateRef } from 'vue'
+import { useElementSize } from '@vueuse/core'
+
+export interface LayoutCellPlacement {
+  /** Stable identifier for the cell. */
+  id: string
+  /** 1-indexed grid column. */
+  col: number
+  /** 1-indexed grid row. */
+  row: number
+  /** Number of columns the cell spans. Default 1. */
+  colSpan?: number
+  /** Number of rows the cell spans. Default 1. */
+  rowSpan?: number
+  /** Optional semantic kind, surfaced as a data attribute for testing. */
+  kind?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** 1×1 cell side length (px). Fixed — cells never resize. */
+    cellSize?: number
+    /** Cell placements. Each cell's <slot> name is its id.
+     *  col/row accept negative values as CSS Grid end-anchored indices
+     *  (-1 = last track, -2 = second-to-last, etc.). */
+    cells: LayoutCellPlacement[]
+    /** Outer margin around the grid (px). Fixed — stays consistent at every viewport. */
+    outerPadding?: number
+    /** Minimum gap between cells (px). Actual gap grows from this floor
+     *  to absorb whatever slack the viewport has — so cells stay aligned
+     *  to the outer margin on all sides. */
+    minGap?: number
+    /** Prototype-only: render a ghost cell at every unoccupied grid
+     *  position so the whole grid is visible. Remove when real
+     *  content populates the canvas. */
+    fillEmpty?: boolean
+  }>(),
+  {
+    cellSize: 48,
+    outerPadding: 16,
+    minGap: 8,
+    fillEmpty: false
+  }
+)
+
+const gridEl = useTemplateRef<HTMLElement>('gridEl')
+const { width, height } = useElementSize(gridEl)
+
+// useElementSize defaults to 'content-box' measurement — the reported
+// width/height already exclude the element's padding. So `available`
+// IS the usable track area; no further subtraction.
+
+// Max track count that fits given min gap (tightest packing).
+const trackCount = (available: number) => {
+  if (available < props.cellSize) return 1
+  // N * cellSize + (N - 1) * minGap <= available
+  return Math.max(
+    1,
+    Math.floor((available + props.minGap) / (props.cellSize + props.minGap))
+  )
+}
+
+// Actual gap distributes remaining slack evenly between tracks so the
+// grid snaps to the outer margin on all sides — no slack piles up at
+// the bottom or right edge.
+const axisGap = (available: number, trackN: number) => {
+  if (trackN <= 1) return props.minGap
+  const cellsTotal = trackN * props.cellSize
+  return (available - cellsTotal) / (trackN - 1)
+}
+
+const cols = computed(() => trackCount(width.value))
+const rows = computed(() => trackCount(height.value))
+const columnGap = computed(() => axisGap(width.value, cols.value))
+const rowGap = computed(() => axisGap(height.value, rows.value))
+
+const gridStyle = computed(() => ({
+  padding: `${props.outerPadding}px`,
+  columnGap: `${columnGap.value}px`,
+  rowGap: `${rowGap.value}px`,
+  gridTemplateColumns: `repeat(${cols.value}, ${props.cellSize}px)`,
+  gridTemplateRows: `repeat(${rows.value}, ${props.cellSize}px)`
+}))
+
+// Resolve negative CSS Grid indices (-1, -2, ...) to 1-indexed positions
+// based on the current track count. CSS line -k = line (N + 2 - k) for
+// N tracks, so the track starting at that line has number (N + 2 - k).
+function resolvePos(v: number, total: number): number {
+  if (v > 0) return v
+  return total + 2 + v
+}
+
+// Ghost cells fill every unoccupied grid position — prototype visual
+// so the full grid structure is visible before real content lands.
+const ghostCells = computed<LayoutCellPlacement[]>(() => {
+  if (!props.fillEmpty || cols.value < 1 || rows.value < 1) return []
+
+  const occupied = new Set<string>()
+  for (const cell of props.cells) {
+    const c0 = resolvePos(cell.col, cols.value)
+    const r0 = resolvePos(cell.row, rows.value)
+    const cSpan = cell.colSpan ?? 1
+    const rSpan = cell.rowSpan ?? 1
+    for (let r = r0; r < r0 + rSpan; r++) {
+      for (let c = c0; c < c0 + cSpan; c++) {
+        occupied.add(`${c},${r}`)
+      }
+    }
+  }
+
+  const ghosts: LayoutCellPlacement[] = []
+  for (let r = 1; r <= rows.value; r++) {
+    for (let c = 1; c <= cols.value; c++) {
+      if (!occupied.has(`${c},${r}`)) {
+        ghosts.push({ id: `__ghost-${c}-${r}`, col: c, row: r, kind: 'ghost' })
+      }
+    }
+  }
+  return ghosts
+})
+
+function cellStyle(cell: LayoutCellPlacement) {
+  const colSpan = cell.colSpan ?? 1
+  const rowSpan = cell.rowSpan ?? 1
+  return {
+    gridColumn: `${cell.col} / span ${colSpan}`,
+    gridRow: `${cell.row} / span ${rowSpan}`
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="gridEl"
+    class="layout-grid"
+    :style="gridStyle"
+    data-testid="layout-grid"
+  >
+    <!-- Ghost cells (fillEmpty=true) render beneath real cells, showing
+         the grid structure. aria-hidden so they don't pollute the a11y tree. -->
+    <div
+      v-for="ghost in ghostCells"
+      :key="ghost.id"
+      class="layout-cell layout-cell--ghost"
+      :style="cellStyle(ghost)"
+      aria-hidden="true"
+      :data-cell-id="ghost.id"
+    />
+    <div
+      v-for="cell in cells"
+      :key="cell.id"
+      class="layout-cell"
+      :style="cellStyle(cell)"
+      :data-cell-id="cell.id"
+      :data-cell-kind="cell.kind"
+    >
+      <slot :name="cell.id" :cell="cell" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.layout-grid {
+  /* Absolute fill eliminates width/height-inheritance ambiguity through
+     nested Vue components. Parent must be position: relative (or absolute). */
+  position: absolute;
+  inset: 0;
+  display: grid;
+  box-sizing: border-box;
+  background-color: var(--layout-color-canvas);
+  overflow: hidden;
+}
+
+.layout-cell {
+  /* Subtle dark-on-darker fill matches mockup. Cells with no slot content
+     stay empty (no background) so the canvas reads as composed, not gridded. */
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Real cells with rendered slot content get the subtle fill.
+   Truly empty cells (no slot content) have no children → no background,
+   keeping the runtime canvas composed rather than gridded. */
+.layout-cell:has(> *) {
+  background-color: var(--layout-color-cell-fill);
+  border-radius: var(--layout-cell-radius);
+}
+
+/* Ghost cells (fillEmpty prototype) always show the fill so the
+   grid structure is visible regardless of slot content. */
+.layout-cell--ghost {
+  background-color: var(--layout-color-cell-fill);
+  border-radius: var(--layout-cell-radius);
+  opacity: 0.6;
+}
+</style>