feat: right side panel (#6952)

<img width="1183" height="809" alt="CleanShot 2025-11-26 at 16 01 15"
src="https://github.com/user-attachments/assets/c14dc5c3-a672-4dcd-917d-14f16310188e"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6952-feat-right-side-panel-2b76d73d36508112b121c283a479f42a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { provide } from 'vue'
+
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
+import { getComponent } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+
+import RightPanelSection from '../layout/RightPanelSection.vue'
+
+defineProps<{
+  label?: string
+  widgets: { widget: IBaseWidget; node: LGraphNode }[]
+}>()
+
+provide('hideLayoutField', true)
+
+const canvasStore = useCanvasStore()
+
+function getWidgetComponent(widget: IBaseWidget) {
+  const component = getComponent(widget.type, widget.name)
+  return component || WidgetLegacy
+}
+
+function onWidgetValueChange(
+  widget: IBaseWidget,
+  value: string | number | boolean | object
+) {
+  widget.value = value
+  widget.callback?.(value)
+  canvasStore.canvas?.setDirty(true, true)
+}
+</script>
+
+<template>
+  <RightPanelSection>
+    <template #label>
+      <slot name="label">
+        {{ label ?? $t('rightSidePanel.inputs') }}
+      </slot>
+    </template>
+
+    <div class="space-y-4 rounded-lg bg-interface-surface px-4">
+      <div
+        v-for="({ widget, node }, index) in widgets"
+        :key="`widget-${index}-${widget.name}`"
+        class="widget-item gap-1.5 col-span-full grid grid-cols-subgrid"
+      >
+        <div class="min-h-8">
+          <p v-if="widget.name" class="text-sm leading-8 p-0 m-0 line-clamp-1">
+            {{ widget.label || widget.name }}
+          </p>
+        </div>
+        <component
+          :is="getWidgetComponent(widget)"
+          :widget="widget"
+          :model-value="widget.value"
+          :node-id="String(node.id)"
+          :node-type="node.type"
+          class="col-span-1"
+          @update:model-value="
+            (value: string | number | boolean | object) =>
+              onWidgetValueChange(widget, value)
+          "
+        />
+      </div>
+    </div>
+  </RightPanelSection>
+</template>