Render app builder in arrange mode (#9260)

## Summary

Adds app builder in arrange/preview mode with re-orderable widgets,
maintaining size (as much as possible) between the select + preview
steps

## Changes

- **What**: 
- Extract sidebar size constants for sharing between canvas splitter +
app mode
- Add widget list using DraggableList and render inert WidgetItems

## Screenshots (if applicable)

<img width="1391" height="923" alt="image"
src="https://github.com/user-attachments/assets/3e17eafe-db1e-40a3-83b5-15a7d0672909"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9260-Render-app-builder-in-arrange-mode-3136d73d365081ef875acab683d01d9e)
by [Unito](https://www.unito.io)

src/components/builder/AppBuilder.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { remove } from 'es-toolkit'
-import { computed, ref, toValue } from 'vue'
+import { computed, provide, ref, toValue, watchEffect } from 'vue'
 import type { MaybeRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import DraggableList from '@/components/common/DraggableList.vue'
 import IoItem from '@/components/builder/IoItem.vue'
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
+import WidgetItem from '@/components/rightSidePanel/parameters/WidgetItem.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
@@ -23,8 +24,10 @@ import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import { app } from '@/scripts/app'
 import { DOMWidgetImpl } from '@/scripts/domWidget'
 import { useDialogService } from '@/services/dialogService'
+import { useAppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { cn } from '@/utils/tailwindUtil'
+import { HideLayoutFieldKey } from '@/types/widgetTypes'
 
 type BoundStyle = { top: string; left: string; width: string; height: string }
 
@@ -36,10 +39,36 @@ const workflowStore = useWorkflowStore()
 const { t } = useI18n()
 const canvas: LGraphCanvas = canvasStore.getCanvas()
 
+const { mode, isArrangeMode } = useAppMode()
 const hoveringSelectable = ref(false)
 
+provide(HideLayoutFieldKey, true)
+
 workflowStore.activeWorkflow?.changeTracker?.reset()
 
+// Prune stale entries whose node/widget no longer exists, so the
+// DraggableList model always matches the rendered items.
+watchEffect(() => {
+  const valid = appModeStore.selectedInputs.filter(([nodeId, widgetName]) => {
+    const node = app.rootGraph.getNodeById(nodeId)
+    return node?.widgets?.some((w) => w.name === widgetName)
+  })
+  if (valid.length < appModeStore.selectedInputs.length) {
+    appModeStore.selectedInputs = valid
+  }
+})
+
+const arrangeInputs = computed(() =>
+  appModeStore.selectedInputs
+    .map(([nodeId, widgetName]) => {
+      const node = app.rootGraph.getNodeById(nodeId)
+      const widget = node?.widgets?.find((w) => w.name === widgetName)
+      if (!node || !widget) return null
+      return { nodeId, widgetName, node, widget }
+    })
+    .filter((item): item is NonNullable<typeof item> => item !== null)
+)
+
 const inputsWithState = computed(() =>
   appModeStore.selectedInputs.map(([nodeId, widgetName]) => {
     const node = app.rootGraph.getNodeById(nodeId)
@@ -179,12 +208,36 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
 </script>
 <template>
   <div class="flex font-bold p-2 border-border-subtle border-b items-center">
-    {{ t('linearMode.builder.title') }}
+    {{
+      isArrangeMode ? t('nodeHelpPage.inputs') : t('linearMode.builder.title')
+    }}
     <Button class="ml-auto" @click="appModeStore.exitBuilder">
       {{ t('linearMode.builder.exit') }}
     </Button>
   </div>
+  <DraggableList
+    v-if="isArrangeMode"
+    v-slot="{ dragClass }"
+    v-model="appModeStore.selectedInputs"
+  >
+    <div
+      v-for="{ nodeId, widgetName, node, widget } in arrangeInputs"
+      :key="`${nodeId}: ${widgetName}`"
+      :class="cn(dragClass, 'p-2 my-2 pointer-events-auto')"
+      :aria-label="`${widget.label ?? widgetName} — ${node.title}`"
+    >
+      <div class="pointer-events-none" inert>
+        <WidgetItem
+          :widget="widget"
+          :node="node"
+          show-node-name
+          hidden-widget-actions
+        />
+      </div>
+    </div>
+  </DraggableList>
   <PropertiesAccordionItem
+    v-else
     :label="t('nodeHelpPage.inputs')"
     enable-empty-state
     :disabled="!appModeStore.selectedInputs.length"
@@ -232,6 +285,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     </DraggableList>
   </PropertiesAccordionItem>
   <PropertiesAccordionItem
+    v-if="!isArrangeMode"
     :label="t('nodeHelpPage.outputs')"
     enable-empty-state
     :disabled="!appModeStore.selectedOutputs.length"
@@ -274,7 +328,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     </DraggableList>
   </PropertiesAccordionItem>
 
-  <Teleport to="body">
+  <Teleport v-if="mode === 'builder:select'" to="body">
     <div
       :class="
         cn(