@feedmepos/mf-order-setting 0.0.90 → 0.0.91

package/src/views/display-system/DisplayLayoutCanvas.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useI18n } from '@feedmepos/mf-common'
+import CanvasArea from './CanvasArea.vue'
 
 import type {
   DisplayLayoutDraft,
@@ -8,7 +8,7 @@ import type {
   DisplayZoneDraft
 } from '@/modules/display-system/interface'
 import {
-  blockDefinition,
+  DISPLAY_CONTAINER_CHILD_LIMIT,
   crossDirection,
   walkZones,
   weightPercents
@@ -18,8 +18,7 @@ const props = defineProps<{
   root: DisplayLayoutDraft
   selectedZoneId: string
   selectedBlockId: string
-  /** Set while a palette card is being dragged, so areas can advertise
-   * themselves as drop targets. */
+  /** Set while an existing module is dragged between areas. */
   dragging: boolean
   /** Which scope the inspector is editing. Selecting a module also selects its
    * area, so without this both would light up the same way and there would be
@@ -30,23 +29,34 @@ const props = defineProps<{
 const emit = defineEmits<{
   (event: 'select-zone', zoneId: string): void
   (event: 'select-block', payload: { zoneId: string; blockId: string }): void
-  (event: 'drop-block', payload: { zoneId: string }): void
+  /** Clicking an empty area opens its module picker. */
+  (event: 'open-module-picker', zoneId: string): void
   (event: 'move-block', payload: { fromZoneId: string; toZoneId: string }): void
   /** `path` is empty for the top-level container and holds the slot index of
    * the group when the divider is inside one. */
   (event: 'resize', payload: { path: number[]; index: number; ratio: number }): void
+  (event: 'add-area', direction: DisplaySplitDraft['direction']): void
   (event: 'split-area', zoneId: string): void
-  (event: 'merge-group', zoneId: string): void
+  (event: 'extend-area', zoneId: string): void
+  (event: 'remove-area', zoneId: string): void
   (event: 'block-dragstart'): void
   (event: 'block-dragend'): void
+  /** A divider drag can carry the pointer outside the preview frame the
+   * overlay is pinned to, so it needs its own signal to stay visible --
+   * hover alone would drop it mid-drag. */
+  (event: 'resize-start'): void
+  (event: 'resize-end'): void
 }>()
 
-const { t } = useI18n()
-
 interface Slot {
   zone?: DisplayZoneDraft
   group?: DisplaySplitDraft
+  /** Rounded, for the "N%" label only. */
   percent: number
+  /** Raw, for `flex-grow`: the live renderer uses the weight itself rather
+   * than a rounded percentage, so rendering from the rounded number would let
+   * the overlay's boundaries drift a few pixels from the real ones underneath. */
+  weight: number
 }
 
 const topSplit = computed(() => (props.root.kind === 'SPLIT' ? props.root : undefined))
@@ -54,12 +64,14 @@ const topDirection = computed(() => topSplit.value?.direction ?? 'ROW')
 
 const slots = computed<Slot[]>(() => {
   if (!topSplit.value) {
-    return props.root.kind === 'ZONE' ? [{ zone: props.root, percent: 100 }] : []
+    return props.root.kind === 'ZONE' ? [{ zone: props.root, percent: 100, weight: 1 }] : []
   }
   const percents = weightPercents(topSplit.value.children)
-  return topSplit.value.children.map((child, index) => child.node.kind === 'ZONE'
-    ? { zone: child.node, percent: percents[index] ?? 100 }
-    : { group: child.node, percent: percents[index] ?? 100 })
+  return topSplit.value.children.map((child, index) =>
+    child.node.kind === 'ZONE'
+      ? { zone: child.node, percent: percents[index] ?? 100, weight: child.weight }
+      : { group: child.node, percent: percents[index] ?? 100, weight: child.weight }
+  )
 })
 
 /** "Area N" is the render order across the whole screen, so the number a
@@ -70,10 +82,68 @@ const areaNumbers = computed(() => {
   return map
 })
 
+/** Which border an area offers a "+" on, and what it does there. The border a
+ * direction sits on is always the same regardless of why it is offered, so
+ * placement and semantics never need to be chosen separately: ROW lives on
+ * the right edge, COLUMN on the bottom edge. */
+interface EdgeAction {
+  direction: DisplaySplitDraft['direction']
+  kind: 'bootstrap' | 'split' | 'extend'
+}
+
+/** A lone, not-yet-split area offers both directions as the template's first
+ * split. Once split, every top-level area can still nest a group across its
+ * parent's direction, and only the last one can also extend the top-level
+ * container -- that is the only place a new sibling can land. */
+function topEdgeActions(index: number): EdgeAction[] {
+  if (!topSplit.value)
+    return [
+      { direction: 'ROW', kind: 'bootstrap' },
+      { direction: 'COLUMN', kind: 'bootstrap' }
+    ]
+  const actions: EdgeAction[] = [{ direction: crossDirection(topDirection.value), kind: 'split' }]
+  if (
+    index === slots.value.length - 1 &&
+    topSplit.value.children.length < DISPLAY_CONTAINER_CHILD_LIMIT
+  ) {
+    actions.push({ direction: topDirection.value, kind: 'extend' })
+  }
+  return actions
+}
+
+/** A nested group has no further level to split into, so its own last area
+ * only ever offers to grow the group itself, same as the top level does. */
+function groupEdgeActions(group: DisplaySplitDraft, position: number): EdgeAction[] {
+  if (
+    position !== group.children.length - 1 ||
+    group.children.length >= DISPLAY_CONTAINER_CHILD_LIMIT
+  )
+    return []
+  return [{ direction: group.direction, kind: 'extend' }]
+}
+
+function onEdgeClick(action: EdgeAction, zoneId: string): void {
+  if (action.kind === 'bootstrap') emit('add-area', action.direction)
+  else if (action.kind === 'split') emit('split-area', zoneId)
+  else emit('extend-area', zoneId)
+}
+
 function groupPercents(group: DisplaySplitDraft): number[] {
   return weightPercents(group.children)
 }
 
+/** Where a divider sits, as a percent of the container -- from the raw
+ * weights rather than the rounded per-child percentages, so it lands on
+ * exactly the same boundary the areas' own flex-grow renders, not a
+ * fraction of a percent off it. */
+function dividerPercent(children: DisplaySplitDraft['children'], beforeIndex: number): number {
+  const total = children.reduce((sum, child) => sum + Math.max(1, child.weight), 0)
+  const before = children
+    .slice(0, beforeIndex)
+    .reduce((sum, child) => sum + Math.max(1, child.weight), 0)
+  return total > 0 ? (before / total) * 100 : 0
+}
+
 function groupZones(group: DisplaySplitDraft): DisplayZoneDraft[] {
   return group.children
     .map((child) => child.node)
@@ -86,15 +156,6 @@ const groupSurfaces = ref<Record<number, HTMLElement | undefined>>({})
 let dragged: { fromZoneId: string } | undefined
 let resizing: { path: number[]; index: number } | undefined
 
-function blockLabel(type: string): string {
-  const definition = blockDefinition(type)
-  return definition ? t(definition.editor.labelKey) : type
-}
-
-function blockIcon(type: string): string {
-  return blockDefinition(type)?.editor.icon ?? 'widgets'
-}
-
 function onBlockDragStart(event: DragEvent, zone: DisplayZoneDraft): void {
   dragged = { fromZoneId: zone.id }
   event.dataTransfer?.setData('application/x-display-block-id', zone.block?.id ?? '')
@@ -108,16 +169,8 @@ function onBlockDragEnd(): void {
   emit('block-dragend')
 }
 
-function onZoneDragOver(event: DragEvent, zone: DisplayZoneDraft): void {
-  event.preventDefault()
-  dropZoneId.value = zone.id
-}
-
-function onZoneDrop(event: DragEvent, zone: DisplayZoneDraft): void {
-  event.preventDefault()
-  const newType = event.dataTransfer?.getData('application/x-display-block-type')
-  if (newType) emit('drop-block', { zoneId: zone.id })
-  else if (dragged && dragged.fromZoneId !== zone.id) {
+function onZoneDrop(zone: DisplayZoneDraft): void {
+  if (dragged && dragged.fromZoneId !== zone.id) {
     emit('move-block', { fromZoneId: dragged.fromZoneId, toZoneId: zone.id })
   }
   dropZoneId.value = ''
@@ -131,25 +184,26 @@ function onZoneDragLeave(zone: DisplayZoneDraft): void {
 function startResize(event: PointerEvent, path: number[], index: number): void {
   resizing = { path, index }
   ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
+  emit('resize-start')
 }
 
 function onResizeMove(event: PointerEvent): void {
   if (!resizing) return
-  const group = resizing.path.length
-    ? slots.value[resizing.path[0]!]?.group
-    : undefined
+  const group = resizing.path.length ? slots.value[resizing.path[0]!]?.group : undefined
   const container = resizing.path.length ? group : topSplit.value
   const element = resizing.path.length ? groupSurfaces.value[resizing.path[0]!] : surface.value
   if (!container || !element) return
   const bounds = element.getBoundingClientRect()
-  const percents = weightPercents(container.children)
-  const before = percents.slice(0, resizing.index).reduce((sum, value) => sum + value, 0)
-  const pair = (percents[resizing.index] ?? 0) + (percents[resizing.index + 1] ?? 0)
+  const weights = container.children.map((child) => Math.max(1, child.weight))
+  const total = weights.reduce((sum, value) => sum + value, 0)
+  const before = weights.slice(0, resizing.index).reduce((sum, value) => sum + value, 0)
+  const pair = (weights[resizing.index] ?? 0) + (weights[resizing.index + 1] ?? 0)
   if (pair <= 0) return
-  const along = container.direction === 'ROW'
-    ? (event.clientX - bounds.left) / Math.max(1, bounds.width)
-    : (event.clientY - bounds.top) / Math.max(1, bounds.height)
-  const ratio = (along * 100 - before) / pair
+  const along =
+    container.direction === 'ROW'
+      ? (event.clientX - bounds.left) / Math.max(1, bounds.width)
+      : (event.clientY - bounds.top) / Math.max(1, bounds.height)
+  const ratio = (along * total - before) / pair
   if (container.children.length > resizing.index + 1) {
     emit('resize', { path: resizing.path, index: resizing.index, ratio })
   }
@@ -159,13 +213,12 @@ function endResize(event: PointerEvent): void {
   if (!resizing) return
   ;(event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId)
   resizing = undefined
+  emit('resize-end')
 }
 
 function setGroupSurface(index: number, element: unknown): void {
   groupSurfaces.value[index] = (element as HTMLElement | null) ?? undefined
 }
-
-const areaCount = computed(() => walkZones(props.root).length)
 </script>
 
 <template>
@@ -173,15 +226,21 @@ const areaCount = computed(() => walkZones(props.root).length)
     ref="surface"
     class="canvas"
     :class="topDirection === 'COLUMN' ? 'canvas-column' : 'canvas-row'"
-    :style="{ '--area-count': areaCount }"
   >
     <template v-for="(slot, index) in slots" :key="slot.zone?.id ?? `group-${index}`">
-      <!-- Dividers sit between slots and drive the weights directly, so the
-           proportion is adjusted where it is seen. -->
+      <!-- Floats on the boundary rather than sitting in the flex flow: the
+           real areas touch with zero gap between them, so a divider that
+           consumed its own layout space would sit off-center from that
+           boundary by half its own width. -->
       <div
         v-if="index > 0 && topSplit"
         class="canvas-divider"
         :class="topDirection === 'COLUMN' ? 'divider-horizontal' : 'divider-vertical'"
+        :style="
+          topDirection === 'COLUMN'
+            ? { top: `${dividerPercent(topSplit.children, index)}%` }
+            : { left: `${dividerPercent(topSplit.children, index)}%` }
+        "
         role="separator"
         @pointerdown="startResize($event, [], index - 1)"
         @pointermove="onResizeMove"
@@ -191,78 +250,54 @@ const areaCount = computed(() => walkZones(props.root).length)
         <span class="canvas-divider-grip" />
       </div>
 
-      <!-- A top-level area. -->
-      <section
+      <!-- A top-level area. The card that carries the border/padding is a
+           child of this, not this element itself: with border-box sizing,
+           flex-grow can't actually shrink a flex-basis: 0 item's border and
+           padding away, so a chrome-bearing item ends up a few pixels wider
+           than its weight says -- keeping this outer sizing box chrome-free
+           is what makes the divider land exactly on the true boundary. -->
+      <CanvasArea
         v-if="slot.zone"
-        class="canvas-area"
-        :class="{
-          'canvas-area-active': slot.zone.id === selectedZoneId && scope === 'area',
-          'canvas-area-context': slot.zone.id === selectedZoneId && scope === 'module',
-          'canvas-area-droppable': dragging,
-          'canvas-area-drop-over': dropZoneId === slot.zone.id
-        }"
-        :style="{ flexGrow: slot.percent, flexBasis: '0' }"
-        @click="emit('select-zone', slot.zone.id)"
-        @dragover="onZoneDragOver($event, slot.zone)"
+        :zone="slot.zone"
+        :area-number="areaNumbers.get(slot.zone.id) ?? index + 1"
+        :percent="slot.percent"
+        :weight="slot.weight"
+        :removable="Boolean(topSplit)"
+        :edge-actions="topEdgeActions(index)"
+        :selected-zone-id="selectedZoneId"
+        :selected-block-id="selectedBlockId"
+        :scope="scope"
+        :dragging="dragging"
+        :drop-zone-id="dropZoneId"
+        @select-zone="emit('select-zone', $event)"
+        @select-block="emit('select-block', $event)"
+        @open-module-picker="emit('open-module-picker', $event)"
+        @remove-area="emit('remove-area', $event)"
+        @edge-click="onEdgeClick($event, slot.zone.id)"
+        @block-dragstart="onBlockDragStart($event, slot.zone)"
+        @block-dragend="onBlockDragEnd"
+        @dragover="dropZoneId = slot.zone.id"
         @dragleave="onZoneDragLeave(slot.zone)"
-        @drop="onZoneDrop($event, slot.zone)"
-      >
-        <header class="canvas-area-head">
-          <span class="canvas-area-name">
-            {{ t('order.displaySystem.editor.ui.area', { index: areaNumbers.get(slot.zone.id) ?? index + 1 }) }}
-          </span>
-          <span class="canvas-area-share">{{ slot.percent }}%</span>
-          <!-- Splitting is offered on the area itself: the nested container runs
-               across the parent, so there is nothing to choose. -->
-          <button
-            type="button"
-            class="canvas-area-action"
-            :title="t('order.displaySystem.editor.ui.splitAreaHint', {
-              direction: t(`order.displaySystem.editor.values.${crossDirection(topDirection).toLowerCase()}`)
-            })"
-            @click.stop="emit('split-area', slot.zone!.id)"
-          >
-            <FmIcon :name="crossDirection(topDirection) === 'COLUMN' ? 'splitscreen' : 'splitscreen_vertical'" size="sm" />
-          </button>
-        </header>
-
-        <div class="canvas-chips">
-          <button
-            v-if="slot.zone.block"
-            type="button"
-            class="canvas-chip"
-            :class="{
-              'canvas-chip-active': slot.zone.block.id === selectedBlockId && scope === 'module',
-              'canvas-chip-context': slot.zone.block.id === selectedBlockId && scope === 'area'
-            }"
-            draggable="true"
-            @click.stop="emit('select-block', { zoneId: slot.zone!.id, blockId: slot.zone!.block!.id })"
-            @dragstart="onBlockDragStart($event, slot.zone!)"
-            @dragend="onBlockDragEnd"
-          >
-            <FmIcon name="drag_indicator" size="sm" class="canvas-chip-grip" />
-            <FmIcon :name="blockIcon(slot.zone.block.type)" size="sm" />
-            <span class="canvas-chip-label">{{ blockLabel(slot.zone.block.type) }}</span>
-          </button>
-          <p v-else class="canvas-area-empty">
-            {{ t('order.displaySystem.editor.ui.emptyArea') }}
-          </p>
-        </div>
-      </section>
-
+        @drop="onZoneDrop(slot.zone)"
+      />
       <!-- A nested container, drawn as areas running across the parent. -->
       <div
         v-else-if="slot.group"
         :ref="(element) => setGroupSurface(index, element)"
         class="canvas-group"
         :class="slot.group.direction === 'COLUMN' ? 'canvas-column' : 'canvas-row'"
-        :style="{ flexGrow: slot.percent, flexBasis: '0' }"
+        :style="{ flexGrow: slot.weight, flexBasis: '0' }"
       >
         <template v-for="(zone, position) in groupZones(slot.group)" :key="zone.id">
           <div
             v-if="position > 0"
             class="canvas-divider"
             :class="slot.group.direction === 'COLUMN' ? 'divider-horizontal' : 'divider-vertical'"
+            :style="
+              slot.group.direction === 'COLUMN'
+                ? { top: `${dividerPercent(slot.group.children, position)}%` }
+                : { left: `${dividerPercent(slot.group.children, position)}%` }
+            "
             role="separator"
             @pointerdown="startResize($event, [index], position - 1)"
             @pointermove="onResizeMove"
@@ -272,58 +307,29 @@ const areaCount = computed(() => walkZones(props.root).length)
             <span class="canvas-divider-grip" />
           </div>
 
-          <section
-            class="canvas-area canvas-area-nested"
-            :class="{
-              'canvas-area-active': zone.id === selectedZoneId && scope === 'area',
-              'canvas-area-context': zone.id === selectedZoneId && scope === 'module',
-              'canvas-area-droppable': dragging,
-              'canvas-area-drop-over': dropZoneId === zone.id
-            }"
-            :style="{ flexGrow: groupPercents(slot.group)[position] ?? 100, flexBasis: '0' }"
-            @click="emit('select-zone', zone.id)"
-            @dragover="onZoneDragOver($event, zone)"
+          <CanvasArea
+            :zone="zone"
+            :area-number="areaNumbers.get(zone.id) ?? position + 1"
+            :percent="groupPercents(slot.group)[position] ?? 100"
+            :weight="slot.group.children[position]?.weight ?? 1"
+            :removable="true"
+            :edge-actions="groupEdgeActions(slot.group, position)"
+            :selected-zone-id="selectedZoneId"
+            :selected-block-id="selectedBlockId"
+            :scope="scope"
+            :dragging="dragging"
+            :drop-zone-id="dropZoneId"
+            @select-zone="emit('select-zone', $event)"
+            @select-block="emit('select-block', $event)"
+            @open-module-picker="emit('open-module-picker', $event)"
+            @remove-area="emit('remove-area', $event)"
+            @edge-click="onEdgeClick($event, zone.id)"
+            @block-dragstart="onBlockDragStart($event, zone)"
+            @block-dragend="onBlockDragEnd"
+            @dragover="dropZoneId = zone.id"
             @dragleave="onZoneDragLeave(zone)"
-            @drop="onZoneDrop($event, zone)"
-          >
-            <header class="canvas-area-head">
-              <span class="canvas-area-name">
-                {{ t('order.displaySystem.editor.ui.area', { index: areaNumbers.get(zone.id) ?? position + 1 }) }}
-              </span>
-              <span class="canvas-area-share">{{ groupPercents(slot.group)[position] ?? 100 }}%</span>
-              <button
-                type="button"
-                class="canvas-area-action"
-                :title="t('order.displaySystem.editor.ui.mergeGroupHint')"
-                @click.stop="emit('merge-group', zone.id)"
-              >
-                <FmIcon name="close_fullscreen" size="sm" />
-              </button>
-            </header>
-
-            <div class="canvas-chips">
-              <button
-                v-if="zone.block"
-                type="button"
-                class="canvas-chip"
-                :class="{
-                  'canvas-chip-active': zone.block.id === selectedBlockId && scope === 'module',
-                  'canvas-chip-context': zone.block.id === selectedBlockId && scope === 'area'
-                }"
-                draggable="true"
-                @click.stop="emit('select-block', { zoneId: zone.id, blockId: zone.block!.id })"
-                @dragstart="onBlockDragStart($event, zone)"
-                @dragend="onBlockDragEnd"
-              >
-                <FmIcon name="drag_indicator" size="sm" class="canvas-chip-grip" />
-                <FmIcon :name="blockIcon(zone.block.type)" size="sm" />
-                <span class="canvas-chip-label">{{ blockLabel(zone.block.type) }}</span>
-              </button>
-              <p v-else class="canvas-area-empty">
-                {{ t('order.displaySystem.editor.ui.emptyArea') }}
-              </p>
-            </div>
-          </section>
+            @drop="onZoneDrop(zone)"
+          />
         </template>
       </div>
     </template>
@@ -332,12 +338,10 @@ const areaCount = computed(() => walkZones(props.root).length)
 
 <style scoped>
 .canvas {
+  position: absolute;
+  inset: 0;
   display: flex;
   min-height: 0;
-  flex: 1;
-  border-radius: 12px;
-  background: #f3f4f6;
-  padding: 8px;
 }
 .canvas-row {
   flex-direction: row;
@@ -345,160 +349,31 @@ const areaCount = computed(() => walkZones(props.root).length)
 .canvas-column {
   flex-direction: column;
 }
-/* A group is a container, not an area: it gets no border of its own so the
-   areas inside it read as siblings of the areas outside. */
 .canvas-group {
+  position: relative;
   display: flex;
   min-width: 0;
   min-height: 0;
-  gap: 0;
-}
-.canvas-area {
-  display: flex;
-  min-width: 0;
-  min-height: 78px;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  border: 1.5px dashed #d1d5db;
-  border-radius: 10px;
-  padding: 10px;
-  background: white;
-  text-align: left;
-}
-.canvas-area-nested {
-  min-height: 62px;
-}
-.canvas-area:hover {
-  border-color: #fdba74;
-}
-/* Editing the area itself: the area carries the emphasis. */
-.canvas-area-active {
-  border-style: solid;
-  border-color: #f97316;
-  background: #fffbf5;
-  box-shadow: 0 0 0 3px #f973161f;
-}
-/* Editing a module inside it: the area only says "you are in here". */
-.canvas-area-context {
-  border-style: solid;
-  border-color: #fed7aa;
-  background: #fffdfa;
-}
-.canvas-area-droppable {
-  border-color: #f97316;
-  background: #fff7ed;
-}
-.canvas-area-drop-over {
-  border-style: solid;
-  box-shadow: 0 0 0 3px #f9731633;
-}
-.canvas-area-head {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.canvas-area-name {
-  color: #6b7280;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-.canvas-area-share {
-  margin-left: auto;
-  color: #374151;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  font-weight: 700;
-}
-.canvas-area-action {
-  display: grid;
-  flex: 0 0 auto;
-  place-items: center;
-  border-radius: 6px;
-  padding: 2px;
-  color: #9ca3af;
-}
-.canvas-area-action:hover {
-  background: #fff7ed;
-  color: #f97316;
-}
-.canvas-chips {
-  display: flex;
-  min-height: 0;
-  flex: 1;
-  flex-direction: column;
-  gap: 4px;
-}
-.canvas-chip {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 6px 8px;
-  background: white;
-  color: #374151;
-  font-size: 12px;
-  text-align: left;
-  cursor: grab;
-}
-.canvas-chip:hover {
-  border-color: #fdba74;
-}
-/* Editing this module: it carries the emphasis, with a solid accent edge that
-   the area's own highlight never uses. */
-.canvas-chip-active {
-  border-color: #f97316;
-  background: #ffffff;
-  box-shadow: inset 4px 0 0 #f97316, 0 0 0 3px #f973161f;
-  font-weight: 600;
-}
-.canvas-chip-active .canvas-chip-grip {
-  color: #f97316;
-}
-/* Selected, but the panel is on the area — keep it findable, not shouting. */
-.canvas-chip-context {
-  border-color: #fed7aa;
-  background: #fffdfa;
-}
-.canvas-chip:active {
-  cursor: grabbing;
-}
-.canvas-chip-grip {
-  flex: 0 0 auto;
-  color: #9ca3af;
-}
-.canvas-chip-label {
-  min-width: 0;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* An empty area is a legitimate editing state, so it should look like an
-   invitation rather than a rendering failure. */
-.canvas-area-empty {
-  display: grid;
-  flex: 1;
-  place-items: center;
-  border: 1px dashed #d1d5db;
-  border-radius: 8px;
-  color: #9ca3af;
-  font-size: 11px;
 }
 .canvas-divider {
+  position: absolute;
+  z-index: 2;
   display: grid;
-  flex: 0 0 auto;
   place-items: center;
+  touch-action: none;
 }
 .divider-vertical {
+  top: 0;
+  bottom: 0;
   width: 10px;
+  transform: translateX(-50%);
   cursor: col-resize;
 }
 .divider-horizontal {
+  left: 0;
+  right: 0;
   height: 10px;
+  transform: translateY(-50%);
   cursor: row-resize;
 }
 .canvas-divider-grip {