WidgetPreviewableTemplate

Source: client/lib/theme/vueda-tailwind/widgets/index.js

The root adds no chrome so the surrounding form section owns spacing.

Vue component: WidgetPreviewableTemplate

Slot	Default classes	Description
root		The root adds no chrome so the surrounding form section owns spacing.
title	text-neutral-900 dark:text-white	The title uses foreground text for the previewable template heading.
inner	grid lg:grid-cols-2 gap-2	The inner grid places editor and preview side by side on wide screens.
editorWrapper	flex flex-col gap-2	The editor wrapper stacks editing controls with a small gap.
preview	prose max-w-full flex flex-col row-start-2 row-end-3 col-start-1 col-end-3	The preview pane uses prose defaults while spanning below the label row.
label	2 classes	The preview label matches widget label color and line height for alignment.
previewWrapper	ml-2 mb-1 gap-1 grid grid-cols-[auto_1fr] justify-between	The preview wrapper mirrors WidgetLabel.root for label and preview alignment.

root

The root adds no chrome so the surrounding form section owns spacing.

Source: client/lib/theme/vueda-tailwind/widgets/WidgetPreviewableTemplate.theme.js:17

title

The title uses foreground text for the previewable template heading.

Default classes:

text-neutral-900 dark:text-white

Source: client/lib/theme/vueda-tailwind/widgets/WidgetPreviewableTemplate.theme.js:21

inner

The inner grid places editor and preview side by side on wide screens.

Default classes:

grid lg:grid-cols-2 gap-2

Source: client/lib/theme/vueda-tailwind/widgets/WidgetPreviewableTemplate.theme.js:25

editorWrapper

The editor wrapper stacks editing controls with a small gap.

Default classes:

flex flex-col gap-2

Source: client/lib/theme/vueda-tailwind/widgets/WidgetPreviewableTemplate.theme.js:29

preview

The preview pane uses prose defaults while spanning below the label row.

Default classes:

prose max-w-full flex flex-col row-start-2 row-end-3 col-start-1 col-end-3

Source: client/lib/theme/vueda-tailwind/widgets/WidgetPreviewableTemplate.theme.js:33

label

The preview label matches widget label color and line height for alignment.

Default classes:

row-start-1 row-end-2 col-start-1 leading-[2.3958125rem]
text-neutral-900/60 dark:text-white/60

Source: client/lib/theme/vueda-tailwind/widgets/WidgetPreviewableTemplate.theme.js:37

previewWrapper

The preview wrapper mirrors WidgetLabel.root for label and preview alignment.

Default classes:

ml-2 mb-1 gap-1 grid grid-cols-[auto_1fr] justify-between

Source: client/lib/theme/vueda-tailwind/widgets/WidgetPreviewableTemplate.theme.js:44