@xelqun/forms 0.1.1 → 0.2.0

package/README.md

@@ -1,8 +1,18 @@
-# Xelqun Forms
+<p align="center">
+    <img src="https://raw.githubusercontent.com/199ocero/xelqun-forms/main/.github/art/banner.png" alt="Xelqun Forms: PHP-defined forms for Laravel, Inertia and Vue" width="100%">
+</p>
 
-PHP-defined, schema-driven forms for **Laravel + Inertia + Vue**. You describe a form in PHP, the package turns it into a versioned JSON schema, and generic Vue components render it. No Vue to write for normal forms.
+<p align="center">
+    <a href="https://packagist.org/packages/xelqun/forms"><img src="https://img.shields.io/packagist/v/xelqun/forms?label=packagist&color=414fd2" alt="Packagist version"></a>
+    <a href="https://www.npmjs.com/package/@xelqun/forms"><img src="https://img.shields.io/npm/v/@xelqun/forms?label=npm&color=414fd2" alt="npm version"></a>
+    <a href="https://packagist.org/packages/xelqun/forms/stats"><img src="https://img.shields.io/packagist/dt/xelqun/forms?color=414fd2" alt="Total downloads"></a>
+</p>
 
-> **Status: pre-alpha.** The API will change. Built and tested against Laravel 13, Inertia 3, Vue 3.5 and Tailwind 4.
+Describe a form in PHP and generic Vue components render it. Normal forms need no Vue at all.
+
+> **Pre-alpha:** the API will change. Requires Laravel 13, Inertia 3, Vue 3.5 and Tailwind 4.
+
+## Example
 
 ```php
 class OrderForm extends Form
@@ -11,13 +21,7 @@ class OrderForm extends Form
     {
         return [
             TextInput::make('customer')->required(),
-            Select::make('country_id')->relationship('country', 'name')
-                ->afterStateUpdated(fn (Set $set) => $set('state_id', null)),
-            Select::make('state_id')
-                ->options(fn (Get $get) => State::where('country_id', $get('country_id'))->pluck('name', 'id')),
-            Section::make('Business')->visibleWhen(When::eq('type', 'business'))->schema([
-                TextInput::make('company')->requiredWhen(When::eq('type', 'business')),
-            ]),
+            Select::make('country_id')->relationship('country', 'name'),
             Repeater::make('items')->relationship()->schema([
                 TextInput::make('qty')->numeric(),
                 TextInput::make('price')->numeric(),
@@ -29,13 +33,15 @@ class OrderForm extends Form
 }
 ```
 
-## How it works
+## Features
 
-- **Three tiers of rules.** Declarative conditions (`visibleWhen`, `requiredWhen`, `disabledWhen`) and calculations (`computed('qty * price')`) run in the browser with no server call. The server re-checks every condition, drops hidden values and recomputes every total on submit. Server closures (`options(fn (Get $get) => ...)`, `afterStateUpdated`) run only on the server.
-- **Automatic dependency tracking.** Closures read state through `Get`, which records what they read. The browser calls the server only when one of those paths changes, and the response is a small patch that is merged in place, so focus and cursor position are kept.
-- **Secure by default.** Forms are rebuilt on the server from an encrypted token (never a class name from the client). Every endpoint re-runs `authorize()` and validation.
-- **Stable row keys.** Repeater rows are keyed by UUIDs (or `record-{id}`), so Laravel validation errors map straight onto nested fields.
-- **Uploads stay out of the form state.** Files upload as soon as they are picked, and the state only holds a short token until the form is saved.
+- **Write PHP, not Vue.** Normal forms need no frontend code.
+- **Instant browser rules.** Conditions and calculations run without a server call, and the server re-checks them on submit.
+- **Small server updates.** Dependent fields update through small patches that keep focus and cursor position.
+- **Secure by default.** Forms rebuild from an encrypted token, and every endpoint re-runs `authorize()` and validation.
+- **Repeaters and uploads included.** Nested rows map to validation errors, and files upload as soon as they're picked.
+- **Every field you'd expect.** Select with relationships, date and time pickers, tags, sliders, colors, a block `Builder`, and rich text, Markdown and code editors.
+- **Wizards and actions.** Multi-step forms check each step on the server, and buttons can run PHP through a modal with its own fields.
 
 ## Installation
 
@@ -43,36 +49,29 @@ class OrderForm extends Form
 composer require xelqun/forms && php artisan xelqun-forms:install
 ```
 
-The installer adds the matching version of the `@xelqun/forms` npm package with your package manager (npm, pnpm, Yarn or Bun, detected from the lockfile). It then adds the plugin to `resources/js/app.ts` and the stylesheet to `resources/css/app.css`. It's safe to run again, so run it after `composer update` to bring the npm package up to the same version.
-
-Use `--config` to publish the config file, or `--without-node` to skip the npm step. If the installer can't edit a file safely, it leaves the file alone and prints the step to do by hand:
-
-```ts
-// resources/js/app.ts
-import { createXelqunForms } from '@xelqun/forms';
-
-createInertiaApp({
-    withApp: (app) => app.use(createXelqunForms()),
-});
-```
-
-```css
-/* resources/css/app.css */
-@import 'tailwindcss';
-@import '@xelqun/forms/style.css';
-```
+The installer adds the matching `@xelqun/forms` npm package and sets up `resources/js/app.ts` and `resources/css/app.css`.
 
-Then render a form:
+## Usage
 
 ```php
-// controller
-return Inertia::render('Orders/Edit', ['form' => OrderForm::make($order)->toSchema()]);
-
-public function update(Request $request, Order $order)
+class OrderController
 {
-    OrderForm::make($order)->save($request);
+    // Show the form: GET /orders/{order}/edit
+    public function edit(Order $order)
+    {
+        return Inertia::render('Orders/Edit', [
+            'form' => OrderForm::make($order)->toSchema(),
+            'orderId' => $order->id,
+        ]);
+    }
 
-    return back();
+    // Save the form: PUT /orders/{order}
+    public function update(Request $request, Order $order)
+    {
+        OrderForm::make($order)->save($request);
+
+        return back();
+    }
 }
 ```
 
@@ -88,29 +87,15 @@ defineProps<{ form: FormSchema; orderId: number }>();
 </template>
 ```
 
-Section titles start at `h2`. If the form sits lower in your page's heading order, set it with `<XqForm :heading-level="3" />`.
+## Plugins
 
-Components use their own `--xq-*` design tokens and `Xq*` names, so they work next to an app's own shadcn-vue components. Dark mode follows a `.dark` class or `[data-xq-theme=dark]`.
+Other packages can add fields, with the same search, uploads, rows and saving as built-in ones. Install one with `php artisan xelqun-forms:plugin acme/rating`, or build one with the [plugin guide](docs/plugins.md).
 
-## Security
-
-- **Schedule the cleanup.** Temporary uploads stay on disk until `php artisan xelqun-forms:prune-uploads` removes them, so run it from your scheduler.
-- **Authorize in `authorize()`.** `validate()`, `save()` and every internal endpoint call it, and it allows everything by default.
-- **Use `hidden()` to protect a field, not `visibleWhen()`.** `visibleWhen()` runs against state the browser controls. `hidden()` also blocks the field's search, upload and hooks.
-- **`Hidden` fields are not secret or read-only.** Their value comes back from the browser, so use `disabled()` for values users must not change.
-- **A disabled field submits what it was filled with**, even with `dehydrated()`, because the browser can't be trusted to send it back unchanged. To save a value the server derives, set it in `mutateBeforeSave()`.
-- **Limit uploads.** Without `acceptedFileTypes()` or `image()`, a field accepts any file except types a web server may run or a browser may treat as a page.
-
-## Development
-
-```bash
-composer install && vendor/bin/pest          # PHP tests
-npm install && npx vp test                   # Vitest
-vendor/bin/pint && vendor/bin/phpstan analyse
-npx vp check && npx vue-tsc --noEmit
-```
+## Before going to production
 
-The conformance fixtures in `tests/Fixtures/conformance` run in both Pest and Vitest, so the PHP and browser evaluators always agree. See [`docs/forms-plan.md`](docs/forms-plan.md) for the design.
+- **Add your rules to `authorize()`.** It allows everything by default.
+- **Give each action its own `authorize()`.** An action does nothing without one, and the form's `authorize()` doesn't count.
+- **Schedule `php artisan xelqun-forms:prune-uploads`.** Temporary uploads stay on disk until it runs.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xelqun/forms",
-    "version": "0.1.1",
+    "version": "0.2.0",
     "description": "Vue renderer for Xelqun Forms: PHP-defined, schema-driven forms for Laravel + Inertia.",
     "license": "MIT",
     "repository": {
@@ -18,7 +18,8 @@
     ],
     "exports": {
         ".": "./resources/js/index.ts",
-        "./style.css": "./resources/css/xelqun.css"
+        "./style.css": "./resources/css/xelqun.css",
+        "./testing": "./resources/js/testing.ts"
     },
     "scripts": {
         "test": "vp test",
@@ -27,11 +28,40 @@
         "types:check": "vue-tsc --noEmit"
     },
     "dependencies": {
+        "@codemirror/lang-cpp": "^6.0.3",
+        "@codemirror/lang-css": "^6.3.1",
+        "@codemirror/lang-go": "^6.0.1",
+        "@codemirror/lang-html": "^6.4.12",
+        "@codemirror/lang-java": "^6.0.2",
+        "@codemirror/lang-javascript": "^6.2.5",
+        "@codemirror/lang-json": "^6.0.2",
+        "@codemirror/lang-markdown": "^6.5.2",
+        "@codemirror/lang-php": "^6.0.2",
+        "@codemirror/lang-python": "^6.2.1",
+        "@codemirror/lang-sql": "^6.10.0",
+        "@codemirror/lang-xml": "^6.1.0",
+        "@codemirror/lang-yaml": "^6.1.3",
+        "@codemirror/language": "^6.13.1",
+        "@codemirror/state": "^6.7.6",
+        "@codemirror/view": "^6.43.15",
         "@internationalized/date": "^3.12.4",
+        "@tiptap/core": "^3.33.0",
+        "@tiptap/extension-image": "^3.33.0",
+        "@tiptap/extension-subscript": "^3.33.0",
+        "@tiptap/extension-superscript": "^3.33.0",
+        "@tiptap/extension-table": "^3.33.0",
+        "@tiptap/extension-text-align": "^3.33.0",
+        "@tiptap/pm": "^3.33.0",
+        "@tiptap/starter-kit": "^3.33.0",
+        "@tiptap/vue-3": "^3.33.0",
+        "@types/sortablejs": "^1.15.9",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "codemirror": "^6.0.2",
+        "cropperjs": "^1.7.0",
         "lucide-vue-next": "^1.0.0",
         "reka-ui": "^2.11.0",
+        "sortablejs": "^1.15.7",
         "tailwind-merge": "^3.2.0"
     },
     "devDependencies": {

package/resources/css/xelqun.css

@@ -23,6 +23,8 @@
     --color-xq-destructive: var(--xq-destructive);
     --color-xq-destructive-foreground: var(--xq-destructive-foreground);
     --color-xq-success: var(--xq-success);
+    --color-xq-warning: var(--xq-warning);
+    --color-xq-info: var(--xq-info);
     --color-xq-border: var(--xq-border);
     --color-xq-input: var(--xq-input);
     --color-xq-ring: var(--xq-ring);
@@ -51,6 +53,8 @@
     --xq-destructive: oklch(0.54 0.22 27);
     --xq-destructive-foreground: oklch(0.99 0 0);
     --xq-success: oklch(0.47 0.12 155);
+    --xq-warning: oklch(0.55 0.13 75);
+    --xq-info: oklch(0.5 0.13 240);
     --xq-border: oklch(0.915 0.006 270);
     --xq-input: oklch(0.885 0.008 270);
     --xq-ring: oklch(0.55 0.19 272);
@@ -75,6 +79,8 @@
     --xq-destructive: oklch(0.68 0.19 25);
     --xq-destructive-foreground: oklch(0.17 0.02 25);
     --xq-success: oklch(0.72 0.15 155);
+    --xq-warning: oklch(0.8 0.14 85);
+    --xq-info: oklch(0.74 0.12 240);
     --xq-border: oklch(1 0 0 / 10%);
     --xq-input: oklch(1 0 0 / 14%);
     --xq-ring: oklch(0.68 0.16 272);
@@ -160,3 +166,118 @@
         );
     }
 }
+
+/* Flex: children share the row. A child's span means nothing here. */
+.xq-flex > .xq-cell {
+    flex: 1 1 0%;
+}
+
+.xq-flex > .xq-cell[data-xq-grow='false'] {
+    flex: none;
+}
+
+/* FusedGroup: one border around the group, and the 1px gaps show the same color as dividers. */
+.xq-fused {
+    gap: 1px;
+    overflow: hidden;
+    border: 1px solid var(--xq-input);
+    border-radius: var(--radius-xq-md);
+    background: var(--xq-input);
+}
+
+.xq-fused > .xq-cell {
+    background: var(--xq-background);
+}
+
+.xq-fused [class*='rounded-xq'] {
+    border-radius: 0;
+}
+
+.xq-fused [class*='border-xq-input']:not(:focus-visible, [aria-invalid='true']) {
+    border-color: transparent;
+}
+
+/* Rich text: an app's reset takes away what these elements mean. */
+.xq-rich-content {
+    outline: none;
+}
+
+.xq-rich-content > * + * {
+    margin-top: 0.75em;
+}
+
+.xq-rich-content h1 {
+    font-size: 1.5em;
+    font-weight: 600;
+}
+
+.xq-rich-content h2 {
+    font-size: 1.25em;
+    font-weight: 600;
+}
+
+.xq-rich-content h3 {
+    font-size: 1.1em;
+    font-weight: 600;
+}
+
+.xq-rich-content h4,
+.xq-rich-content h5,
+.xq-rich-content h6 {
+    font-weight: 600;
+}
+
+.xq-rich-content ul {
+    padding-inline-start: 1.25em;
+    list-style: disc;
+}
+
+.xq-rich-content ol {
+    padding-inline-start: 1.25em;
+    list-style: decimal;
+}
+
+.xq-rich-content a {
+    color: var(--xq-primary);
+    text-decoration: underline;
+}
+
+.xq-rich-content blockquote {
+    padding-inline-start: 0.75em;
+    border-inline-start: 2px solid var(--xq-border);
+    color: var(--xq-muted-foreground);
+}
+
+.xq-rich-content pre,
+.xq-rich-content :not(pre) > code {
+    border-radius: var(--radius-xq-sm);
+    background: var(--xq-muted);
+    font-family: ui-monospace, monospace;
+    font-size: 0.9em;
+}
+
+.xq-rich-content pre {
+    overflow-x: auto;
+    padding: 0.75em;
+}
+
+.xq-rich-content :not(pre) > code {
+    padding: 0.1em 0.3em;
+}
+
+.xq-rich-content table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.xq-rich-content td,
+.xq-rich-content th {
+    padding: 0.25em 0.5em;
+    border: 1px solid var(--xq-border);
+    text-align: start;
+}
+
+.xq-rich-content img {
+    max-width: 100%;
+    height: auto;
+}

package/resources/js/components/XqAction.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { LoaderCircle } from 'lucide-vue-next';
+import { computed, onScopeDispose, ref, shallowRef, watch } from 'vue';
+import { useFormStore } from '../composables/context';
+import { createFormStore } from '../core/store';
+import type { FormStore } from '../core/store';
+import type { SchemaNode } from '../schema/types';
+import XqButton from '../ui/XqButton.vue';
+import XqConfirmDialog from '../ui/XqConfirmDialog.vue';
+import XqDialog from '../ui/XqDialog.vue';
+import XqIcon from '../ui/XqIcon.vue';
+import XqForm from './XqForm.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+const store = useFormStore();
+const options = computed(() => props.node.props ?? {});
+const running = ref(false);
+const confirming = ref(false);
+const modalOpen = ref(false);
+const modal = shallowRef<FormStore | null>(null);
+
+const variants: Record<string, 'default' | 'destructive' | 'outline'> = {
+    primary: 'default',
+    danger: 'destructive',
+    gray: 'outline',
+};
+const variant = computed(() =>
+    options.value.style === 'link'
+        ? 'link'
+        : options.value.style === 'icon'
+          ? 'ghost'
+          : (variants[options.value.color] ?? 'outline'),
+);
+
+async function run(): Promise<void> {
+    // Enter in a modal field reaches this without the button.
+    if (running.value) {
+        return;
+    }
+
+    running.value = true;
+
+    if (await store.runAction(props.node, modal.value ?? undefined)) {
+        modalOpen.value = false;
+    }
+
+    running.value = false;
+}
+
+async function open(): Promise<void> {
+    if (!options.value.hasForm) {
+        if (options.value.confirmation) {
+            confirming.value = true;
+        } else {
+            await run();
+        }
+
+        return;
+    }
+
+    running.value = true;
+
+    const form = await store.mountAction(props.node);
+
+    if (form) {
+        modal.value = createFormStore(form);
+        modalOpen.value = true;
+    }
+
+    running.value = false;
+}
+
+function closeModal(): void {
+    modal.value?.dispose();
+    modal.value = null;
+}
+
+watch(modalOpen, (isOpen) => {
+    if (!isOpen) {
+        closeModal();
+    }
+});
+
+onScopeDispose(closeModal);
+</script>
+
+<template>
+    <div class="inline-flex" data-xq-action>
+        <XqButton
+            type="button"
+            :variant="variant"
+            :size="options.style === 'icon' ? 'icon-sm' : 'sm'"
+            :disabled="!!options.disabled || running || store.processing.value"
+            :title="options.tooltip"
+            :aria-label="options.style === 'icon' ? options.label : undefined"
+            @click="open"
+        >
+            <LoaderCircle v-if="running" class="motion-safe:animate-spin" aria-hidden="true" />
+            <XqIcon v-else-if="options.icon" :name="options.icon" />
+            <template v-if="options.style !== 'icon'">{{ options.label }}</template>
+        </XqButton>
+        <XqConfirmDialog
+            v-if="options.confirmation && !options.hasForm"
+            v-model:open="confirming"
+            :title="options.heading"
+            :message="options.description ?? store.t('Are you sure?')"
+            :confirm-label="options.submitLabel ?? store.t('Confirm')"
+            :cancel-label="options.cancelLabel"
+            :confirm-variant="variants[options.color] === 'destructive' ? 'destructive' : 'default'"
+            @confirm="run"
+        />
+        <XqDialog
+            v-if="modal"
+            v-model:open="modalOpen"
+            :title="options.heading"
+            :description="options.description"
+            :width="options.width"
+        >
+            <XqForm :form="modal" @submit="run">
+                <template #actions>
+                    <div class="gap-2 flex justify-end">
+                        <XqButton
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            @click="modalOpen = false"
+                        >
+                            {{ options.cancelLabel ?? store.t('Cancel') }}
+                        </XqButton>
+                        <XqButton type="submit" size="sm" :disabled="running">
+                            <LoaderCircle
+                                v-if="running"
+                                class="motion-safe:animate-spin"
+                                aria-hidden="true"
+                            />
+                            {{ options.submitLabel ?? store.t('Save') }}
+                        </XqButton>
+                    </div>
+                </template>
+            </XqForm>
+        </XqDialog>
+    </div>
+</template>

package/resources/js/components/XqFieldSlot.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useFormStore } from '../composables/context';
+import type { FieldSlot, SchemaNode } from '../schema/types';
+import XqNode from './XqNode.vue';
+
+const props = defineProps<{ node: SchemaNode; name: FieldSlot }>();
+const store = useFormStore();
+const nodes = computed(() =>
+    (props.node.children ?? []).filter(
+        (child) => child.slot === props.name && store.isVisible(child),
+    ),
+);
+</script>
+
+<template>
+    <div v-if="nodes.length" class="gap-2 flex flex-wrap items-center">
+        <XqNode v-for="child in nodes" :key="child.key" :node="child" />
+    </div>
+</template>

package/resources/js/components/XqFieldWrapper.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { LoaderCircle } from 'lucide-vue-next';
-import { computed } from 'vue';
-import { useFormStore } from '../composables/context';
+import { computed, inject } from 'vue';
+import { FUSED_GROUP, useFormStore } from '../composables/context';
+import { cn } from '../lib/utils';
 import type { SchemaNode } from '../schema/types';
 import XqLabel from '../ui/XqLabel.vue';
+import XqFieldSlot from './XqFieldSlot.vue';
 
 const props = defineProps<{
     node: SchemaNode;
@@ -15,45 +17,87 @@ const props = defineProps<{
     error?: string | null;
     required?: boolean;
     hideLabel?: boolean;
+    /** The control shows its own spinner, so the label doesn't need one. */
+    controlShowsLoading?: boolean;
 }>();
 
 const store = useFormStore();
 const loading = computed(() => store.isLoading(props.node));
+const label = computed(() => store.text(props.node, 'label'));
+const hint = computed(() => store.text(props.node, 'hint'));
+// A hidden label takes no grid space, so two columns would squeeze the control.
+const inlineLabel = computed(() => props.node.inlineLabel && !props.node.hiddenLabel);
+const showLabelSpinner = computed(
+    () => !props.controlShowsLoading && store.showsLoadingIndicator(props.node),
+);
+const fused = inject(FUSED_GROUP, false);
+const hasSlot = (name: string) => props.node.children?.some((child) => child.slot === name);
+const hasLabelSlots = computed(() => hasSlot('beforeLabel') || hasSlot('afterLabel'));
+// A wrapper around a screen-reader label would be an empty row with a gap.
+const hasStackedLabel = computed(
+    () => hasLabelSlots.value || hasSlot('aboveLabel') || hasSlot('belowLabel'),
+);
+const hasContentSlots = computed(() =>
+    ['beforeContent', 'afterContent', 'prefixAction', 'suffixAction', 'optionAction'].some(hasSlot),
+);
 </script>
 
 <template>
     <div
-        class="gap-2 grid"
+        :class="cn('gap-2 grid', inlineLabel && 'sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]')"
         :data-xq-path="node.path"
         :data-invalid="error ? '' : undefined"
         :aria-busy="loading || undefined"
     >
-        <XqLabel
-            v-if="node.label && !hideLabel"
-            :id="`${id}-label`"
-            :for="labelFor === null ? undefined : (labelFor ?? id)"
-            class="gap-0.5"
-        >
-            {{ node.label }}
-            <span v-if="required" class="text-xq-destructive" aria-hidden="true">*</span>
-            <span v-if="required" class="sr-only">(required)</span>
-            <LoaderCircle
-                v-if="loading"
-                class="ml-1 size-3 motion-safe:animate-spin text-xq-muted-foreground"
-                aria-hidden="true"
-            />
-        </XqLabel>
-        <slot />
-        <p v-if="node.hint && !error" :id="`${id}-hint`" class="text-xs text-xq-muted-foreground">
-            {{ node.hint }}
-        </p>
-        <p
-            v-if="error"
-            :id="`${id}-error`"
-            :role="announceError ? 'alert' : undefined"
-            class="text-xs font-medium text-xq-destructive"
-        >
-            {{ error }}
-        </p>
+        <div :class="hasStackedLabel ? 'gap-2 grid content-start' : 'contents'">
+            <XqFieldSlot :node="node" name="aboveLabel" />
+            <div :class="hasLabelSlots ? 'gap-2 flex items-center' : 'contents'">
+                <XqFieldSlot :node="node" name="beforeLabel" />
+                <XqLabel
+                    v-if="label && !hideLabel"
+                    :id="`${id}-label`"
+                    :for="labelFor === null ? undefined : (labelFor ?? id)"
+                    :class="cn('gap-0.5', node.hiddenLabel && 'sr-only', inlineLabel && 'sm:mt-2')"
+                >
+                    {{ label }}
+                    <span v-if="required" class="text-xq-destructive" aria-hidden="true">*</span>
+                    <span v-if="required" class="sr-only">{{ store.t('(required)') }}</span>
+                    <LoaderCircle
+                        v-if="showLabelSpinner"
+                        class="ml-1 size-3 motion-safe:animate-spin text-xq-muted-foreground"
+                        aria-hidden="true"
+                    />
+                </XqLabel>
+                <XqFieldSlot class="ms-auto" :node="node" name="afterLabel" />
+            </div>
+            <XqFieldSlot :node="node" name="belowLabel" />
+        </div>
+        <div :class="inlineLabel ? 'gap-2 min-w-0 grid' : 'contents'">
+            <XqFieldSlot :node="node" name="aboveContent" />
+            <div :class="hasContentSlots ? 'gap-2 flex items-center' : 'contents'">
+                <XqFieldSlot :node="node" name="beforeContent" />
+                <XqFieldSlot :node="node" name="prefixAction" />
+                <div :class="hasContentSlots ? 'min-w-0 flex-1' : 'contents'">
+                    <slot />
+                </div>
+                <XqFieldSlot :node="node" name="optionAction" />
+                <XqFieldSlot :node="node" name="suffixAction" />
+                <XqFieldSlot :node="node" name="afterContent" />
+            </div>
+            <XqFieldSlot :node="node" name="belowContent" />
+            <p v-if="hint && !error" :id="`${id}-hint`" class="text-xs text-xq-muted-foreground">
+                {{ hint }}
+            </p>
+            <XqFieldSlot :node="node" name="aboveErrorMessage" />
+            <p
+                v-if="error && !fused"
+                :id="`${id}-error`"
+                :role="announceError ? 'alert' : undefined"
+                class="text-xs font-medium text-xq-destructive"
+            >
+                {{ error }}
+            </p>
+            <XqFieldSlot :node="node" name="belowErrorMessage" />
+        </div>
     </div>
 </template>