@questpie/admin 3.5.3 → 3.5.5

package/README.md

@@ -65,6 +65,14 @@ export default adminConfig({
 
 Collections, globals, routes, and jobs are auto-discovered via file convention. Codegen produces a `.generated/index.ts` with the fully-typed `App` and runtime `app` instance.
 
+### Admin Auth Contract
+
+`@questpie/admin` expects the app to use `adminModule`'s starter Better Auth model, or an equivalent auth setup that exposes `session.user.role` on the active session.
+
+Access to the admin panel and admin RPC routes is granted only when `session.user.role === "admin"`. This includes admin config, content locale callbacks, preview URL/token generation, actions, widgets, and reactive field handlers. Authenticated users with `role: "user"` or a missing role are not admin users. The built-in setup route uses the same contract when checking for and creating the first admin user with `role = "admin"`.
+
+If you extend the Better Auth `user` collection, merge the starter user collection instead of replacing it from scratch. Custom user collections must preserve the role field and session role propagation used by the admin guard.
+
 ### Collection Admin Config
 
 Admin metadata, list views, and form views are defined on the collection itself:

package/dist/client/blocks/block-renderer.d.mts

@@ -1,6 +1,6 @@
 import { BlockContent } from "./types.mjs";
 import * as React from "react";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime53 from "react/jsx-runtime";
 
 //#region src/client/blocks/block-renderer.d.ts
 
@@ -50,6 +50,6 @@ declare function BlockRenderer({
   onBlockClick,
   onBlockInsert,
   className
-}: BlockRendererProps): react_jsx_runtime19.JSX.Element | null;
+}: BlockRendererProps): react_jsx_runtime53.JSX.Element | null;
 //#endregion
 export { BlockRenderer, BlockRendererProps };

package/dist/client/builder/index.d.mts

@@ -4,7 +4,7 @@ import { AnyWidgetConfig, WidgetAction, WidgetCardVariant, WidgetComponentProps,
 import { DashboardAction, DashboardConfig, DashboardLayoutItem, DashboardSection, DashboardTabConfig, DashboardTabs } from "./types/ui-config.mjs";
 import { AdminState } from "./admin-types.mjs";
 import { Admin, AppAdmin, InferAdminCMS } from "./admin.mjs";
-import { ComponentRegistry, FieldComponentProps, FieldLayoutItem, FormSidebarConfig, FormViewConfig, SectionLayout, TabConfig, TabsLayout } from "./types/field-types.mjs";
+import { ComponentRegistry, DocumentViewConfig, FieldComponentProps, FieldLayoutItem, FormSidebarConfig, FormViewConfig, SectionLayout, TabConfig, TabsLayout } from "./types/field-types.mjs";
 import { QuestpieApp, QuestpieClient } from "questpie/client";
 import { CollectionInfer } from "questpie";
 

package/dist/client/builder/types/collection-types.d.mts

@@ -1,9 +1,10 @@
-import "../../i18n/types.mjs";
-import { MaybeLazyComponent } from "./common.mjs";
+import { I18nText } from "../../i18n/types.mjs";
+import { IconComponent, MaybeLazyComponent } from "./common.mjs";
+import { ComponentReference } from "../../../server/augmentation/common.mjs";
 import { FilterRule, QuickFilterConfig } from "../../../shared/types/saved-views.types.mjs";
 import "../../../server/augmentation.mjs";
-import "../field/field.mjs";
-import "../admin.mjs";
+import { FieldDefinition } from "../field/field.mjs";
+import { Admin } from "../admin.mjs";
 import { ActionsConfig } from "./action-types.mjs";
 
 //#region src/client/builder/types/collection-types.d.ts
@@ -202,5 +203,79 @@ interface ListViewConfig<TFieldNames extends string = string> {
    */
   actions?: ActionsConfig;
 }
+/**
+ * Preview configuration for live preview in form view
+ */
+interface PreviewConfig {
+  /**
+   * URL builder function that returns preview URL for current form values
+   * @param values - Current form values
+   * @param locale - Current content locale
+   * @returns Preview URL string
+   */
+  url: (values: Record<string, unknown>, locale: string) => string;
+  /**
+   * Whether preview is enabled (default: true)
+   */
+  enabled?: boolean;
+  /**
+   * Position of the preview panel (default: "right")
+   */
+  position?: "right" | "bottom";
+  /**
+   * Default width/height percentage of preview panel (default: 50)
+   */
+  defaultWidth?: number;
+  /**
+   * Minimum width/height percentage (default: 30)
+   */
+  minWidth?: number;
+  /**
+   * Maximum width/height percentage (default: 70)
+   */
+  maxWidth?: number;
+}
+/**
+ * Autosave configuration for form view
+ */
+interface AutoSaveConfig {
+  /**
+   * Whether autosave is enabled
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * Debounce delay in milliseconds before autosave triggers
+   * @default 500 (0.5s as specified)
+   */
+  debounce?: number;
+  /**
+   * Show autosave status indicator in form header
+   * @default true
+   */
+  indicator?: boolean;
+  /**
+   * Warn user before navigating away with unsaved changes
+   * @default true
+   */
+  preventNavigation?: boolean;
+}
+/**
+ * Collection builder state - internal state during building
+ */
+interface CollectionBuilderState<TAdminApp extends Admin<any> = Admin<any>> {
+  readonly name: string;
+  readonly "~adminApp": TAdminApp;
+  /** Display label - supports inline translations */
+  readonly label?: I18nText;
+  /** Description - supports inline translations */
+  readonly description?: I18nText;
+  readonly icon?: IconComponent | ComponentReference;
+  readonly fields?: Record<string, FieldDefinition>;
+  readonly list?: any;
+  readonly form?: any;
+  readonly preview?: PreviewConfig;
+  readonly autoSave?: AutoSaveConfig;
+}
 //#endregion
-export { ListViewConfig };
+export { CollectionBuilderState, ListViewConfig };

package/dist/client/builder/types/common.d.mts

@@ -39,6 +39,11 @@ type BaseFieldProps = {
   required?: boolean;
   localized?: boolean;
   locale?: string;
+  /**
+   * Render the control WITHOUT its own label/description. Used by compact
+   * layouts (e.g. Notion-style property rows) that supply the label themselves.
+   */
+  hideLabel?: boolean;
   control?: any;
   className?: string;
 };

package/dist/client/builder/types/field-types.d.mts

@@ -578,6 +578,46 @@ interface FormViewActionsConfig<TItem = any> {
   /** Actions shown in dropdown menu (...) */
   secondary?: ActionDefinition<TItem>[];
 }
+/**
+ * Document view configuration — a Notion-style page with a dominant rich-text
+ * body and inline-editable property rows.
+ *
+ * No hardcoded field names: the consumer declares which field is the body, the
+ * (optional) title field, and which fields appear as properties. Defaults are
+ * data-driven (`properties: "auto"` derives from the schema).
+ *
+ * @example
+ * ```ts
+ * .form(({ v, f }) => v.collectionDocument({
+ *   document: {
+ *     body: f.body,
+ *     title: f.name,
+ *     properties: [f.scopeType, f.path, f.createdAt],
+ *     save: "autosave",
+ *   },
+ * }))
+ * ```
+ */
+interface DocumentViewConfig {
+  document: {
+    /** The dominant long-form field, rendered with the rich-text editor. */
+    body: string;
+    /**
+     * Property fields shown as inline-editable rows.
+     * - `"auto"` (default): all schema fields except body/title, in schema order.
+     * - `string[]`: an explicit, ordered list.
+     */
+    properties?: "auto" | string[];
+    /**
+     * Save behavior.
+     * - `"autosave"` (default): debounced autosave with a "Saved"/"Saving" indicator.
+     * - `"manual"`: a Save affordance with dirty tracking.
+     */
+    save?: "autosave" | "manual";
+    /** Optional page-title field; falls back to the record id/path. */
+    title?: string;
+  };
+}
 /**
  * Registry for custom field and widget components
  */
@@ -596,4 +636,4 @@ interface ComponentRegistry {
   custom?: Record<string, MaybeLazyComponent<any>>;
 }
 //#endregion
-export { ComponentRegistry, FieldComponentProps, FieldLayoutItem, FormSidebarConfig, FormViewConfig, SectionLayout, TabConfig, TabsLayout };
+export { ComponentRegistry, DocumentViewConfig, FieldComponentProps, FieldLayoutItem, FormSidebarConfig, FormViewConfig, SectionLayout, TabConfig, TabsLayout };

package/dist/client/builder/view/view.d.mts

@@ -3,9 +3,10 @@ import { MaybeLazyComponent } from "../types/common.mjs";
 //#region src/client/builder/view/view.d.ts
 
 /**
- * View kind discriminant — "list" for collection list pages, "form" for edit/create pages.
+ * View kind discriminant — "list" for collection list pages, "form" for edit/create pages,
+ * "document" for Notion-style document pages (dominant rich-text body + property rows).
  */
-type ViewKind = "list" | "form";
+type ViewKind = "list" | "form" | "document";
 /**
  * View definition — a registry entry mapping a view name to its component.
  *

package/dist/client/components/admin-link.d.mts

@@ -1,6 +1,6 @@
 import { CollectionNames, GlobalNames } from "../builder/index.mjs";
 import * as React from "react";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime48 from "react/jsx-runtime";
 import { QuestpieApp } from "questpie/client";
 
 //#region src/client/components/admin-link.d.ts
@@ -61,6 +61,6 @@ declare function AdminLink<TApp extends QuestpieApp>({
   children,
   onClick,
   ...rest
-}: AdminLinkProps<TApp>): react_jsx_runtime14.JSX.Element;
+}: AdminLinkProps<TApp>): react_jsx_runtime48.JSX.Element;
 //#endregion
 export { AdminLink };

package/dist/client/components/fields/boolean-field.mjs

@@ -11,7 +11,7 @@ import { Controller } from "react-hook-form";
 * Unified boolean field component.
 * Renders as checkbox (default) or switch based on `displayAs` prop.
 */
-function BooleanField({ name, label, description, required, disabled, localized, locale, control, className, displayAs = "checkbox" }) {
+function BooleanField({ name, label, description, required, disabled, localized, locale, hideLabel, control, className, displayAs = "checkbox" }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
@@ -23,6 +23,7 @@ function BooleanField({ name, label, description, required, disabled, localized,
 			disabled,
 			localized,
 			locale,
+			hideLabel,
 			error: fieldState.error?.message,
 			children: displayAs === "switch" ? /* @__PURE__ */ jsx(ToggleInput, {
 				id: name,

package/dist/client/components/fields/date-field.mjs

@@ -11,7 +11,7 @@ function parseDateFieldValue(value) {
 	const date = value instanceof Date ? value : new Date(String(value));
 	return Number.isNaN(date.getTime()) ? null : date;
 }
-function DateField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, minDate, maxDate, format }) {
+function DateField({ name, label, description, placeholder, required, disabled, localized, locale, hideLabel, control, className, minDate, maxDate, format }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
@@ -25,6 +25,7 @@ function DateField({ name, label, description, placeholder, required, disabled,
 				disabled,
 				localized,
 				locale,
+				hideLabel,
 				error: fieldState.error?.message,
 				children: /* @__PURE__ */ jsx(DateInput, {
 					id: name,

package/dist/client/components/fields/datetime-field.mjs

@@ -11,7 +11,7 @@ function parseDateTimeFieldValue(value) {
 	const date = value instanceof Date ? value : new Date(String(value));
 	return Number.isNaN(date.getTime()) ? null : date;
 }
-function DatetimeField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, minDate, maxDate, format, precision }) {
+function DatetimeField({ name, label, description, placeholder, required, disabled, localized, locale, hideLabel, control, className, minDate, maxDate, format, precision }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
@@ -25,6 +25,7 @@ function DatetimeField({ name, label, description, placeholder, required, disabl
 				disabled,
 				localized,
 				locale,
+				hideLabel,
 				error: fieldState.error?.message,
 				children: /* @__PURE__ */ jsx(DateTimeInput, {
 					id: name,

package/dist/client/components/fields/email-field.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 
 //#region src/client/components/fields/email-field.tsx
-function EmailField({ name, label, description, placeholder, required, disabled, localized, locale, control, className }) {
+function EmailField({ name, label, description, placeholder, required, disabled, localized, locale, hideLabel, control, className }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
@@ -18,6 +18,7 @@ function EmailField({ name, label, description, placeholder, required, disabled,
 			disabled,
 			localized,
 			locale,
+			hideLabel,
 			error: fieldState.error?.message,
 			children: /* @__PURE__ */ jsx(TextInput, {
 				id: name,

package/dist/client/components/fields/field-utils.d.mts

@@ -0,0 +1,11 @@
+import "react-hook-form";
+
+//#region src/client/components/fields/field-utils.d.ts
+
+/**
+ * Sanitize filename for safe storage.
+ * Removes special characters, replaces spaces with hyphens.
+ */
+declare function sanitizeFilename(filename: string): string;
+//#endregion
+export { sanitizeFilename };

package/dist/client/components/fields/field-utils.mjs

@@ -12,7 +12,9 @@ function useResolvedControl(control) {
 function sanitizeFilename(filename) {
 	const lastDot = filename.lastIndexOf(".");
 	const ext = lastDot > 0 ? filename.slice(lastDot) : "";
-	return ((lastDot > 0 ? filename.slice(0, lastDot) : filename).normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-").replace(/[^a-zA-Z0-9._-]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "").toLowerCase() || "file") + ext.toLowerCase();
+	const sanitized = (lastDot > 0 ? filename.slice(0, lastDot) : filename).normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-").replace(/[^a-zA-Z0-9._-]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "").toLowerCase();
+	const safeExt = ext.toLowerCase().replace(/[^a-z0-9.]/g, "");
+	return (sanitized || "file") + safeExt;
 }
 /**
 * Extract columns from collection list config.

package/dist/client/components/fields/field-wrapper.mjs

@@ -36,10 +36,10 @@ function FieldLocaleIndicator({ localized, locale }) {
 		showFlag: false
 	});
 }
-function FieldWrapper({ name, label, description, labelAccessory, required, disabled, readOnly, error, localized, locale, children, fieldPath }) {
+function FieldWrapper({ name, label, description, labelAccessory, required, disabled, readOnly, error, localized, locale, hideLabel, children, fieldPath }) {
 	const resolveText = useResolveText();
-	const resolvedLabel = label ? resolveText(label) : void 0;
-	const resolvedDescription = description ? resolveText(description) : void 0;
+	const resolvedLabel = hideLabel || !label ? void 0 : resolveText(label);
+	const resolvedDescription = hideLabel || !description ? void 0 : resolveText(description);
 	return /* @__PURE__ */ jsx(Field, {
 		"data-disabled": disabled,
 		"data-readonly": !disabled && readOnly,

package/dist/client/components/fields/number-field.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 
 //#region src/client/components/fields/number-field.tsx
-function NumberField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, min, max, step, showButtons }) {
+function NumberField({ name, label, description, placeholder, required, disabled, localized, locale, hideLabel, control, className, min, max, step, showButtons }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
@@ -18,6 +18,7 @@ function NumberField({ name, label, description, placeholder, required, disabled
 			disabled,
 			localized,
 			locale,
+			hideLabel,
 			error: fieldState.error?.message,
 			children: /* @__PURE__ */ jsx(NumberInput, {
 				id: name,

package/dist/client/components/fields/object-field.mjs

@@ -26,7 +26,8 @@ function ObjectFieldPanel({ name, label, description, required, disabled, locali
 			type: "button",
 			variant: "ghost",
 			onClick: onToggle,
-			className: "h-auto min-h-10 w-full justify-between rounded-none px-3 py-2 text-left",
+			className: "hover:bg-surface-low aria-expanded:bg-surface-low h-auto min-h-12 w-full justify-between rounded-none px-4 py-3 text-left",
+			"aria-expanded": !isCollapsed,
 			disabled,
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "flex min-w-0 items-center gap-2",

package/dist/client/components/fields/relation/displays/types.mjs

@@ -1,4 +1,5 @@
 import { formatLabel } from "../../../../lib/utils.mjs";
+import { resolveAssetUrl } from "../../../../utils/asset-url.mjs";
 import { DefaultCell } from "../../../../views/collection/cells/primitive-cells.mjs";
 
 //#region src/client/components/fields/relation/displays/types.ts
@@ -31,9 +32,8 @@ function formatCellValue(value) {
 function getImageUrl(item, imageField) {
 	if (!imageField) return null;
 	const imageValue = item[imageField];
-	if (typeof imageValue === "string") return imageValue;
-	if (imageValue?.url) return imageValue.url;
-	if (imageValue?.key) return imageValue.key;
+	if (typeof imageValue === "string") return resolveAssetUrl(imageValue) ?? null;
+	if (imageValue?.url) return resolveAssetUrl(imageValue.url) ?? null;
 	return null;
 }
 /**

package/dist/client/components/fields/rich-text-editor/extensions.mjs

@@ -55,12 +55,13 @@ const defaultLabels = {
 * (i.e. codeBlock disabled, or lowlight already cached). Only returns a
 * `Promise` on the first build that includes codeBlock.
 */
-function buildExtensions({ features, labels, placeholder, maxCharacters, customExtensions }) {
+function buildExtensions({ features, labels, placeholder, maxCharacters, outputMode, customExtensions }) {
 	const base = buildBaseExtensions({
 		features,
 		labels,
 		placeholder,
 		maxCharacters,
+		outputMode,
 		customExtensions
 	});
 	if (!features.codeBlock) return base;

package/dist/client/components/fields/rich-text-editor/image-popover.mjs

@@ -1,6 +1,7 @@
 import { useTranslation } from "../../../i18n/hooks.mjs";
 import { Button } from "../../ui/button.mjs";
 import { Input } from "../../ui/input.mjs";
+import { resolveAssetUrl } from "../../../utils/asset-url.mjs";
 import { Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger } from "../../ui/popover.mjs";
 import { MediaPickerDialog } from "../../media/media-picker-dialog.mjs";
 import { useRichTextImageUpload } from "./image-upload.mjs";
@@ -76,7 +77,7 @@ function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, ima
 			return;
 		}
 		editor.chain().focus().setImage({
-			src: asset.url,
+			src: resolveAssetUrl(asset.url) ?? asset.url,
 			alt: imageAlt || asset.alt || void 0
 		}).run();
 		setImageUrl("");
@@ -95,7 +96,10 @@ function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, ima
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Popover, {
 		open,
 		onOpenChange,
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx("div", { className: "sr-only" }) }), /* @__PURE__ */ jsxs(PopoverContent, {
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			nativeButton: false,
+			render: /* @__PURE__ */ jsx("div", { className: "sr-only" })
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
 			className: "w-80",
 			children: [/* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { children: t("editor.image") }) }), /* @__PURE__ */ jsxs("div", {
 				className: "space-y-3",

package/dist/client/components/fields/rich-text-editor/image-upload.mjs

@@ -1,5 +1,6 @@
 import { useTranslation } from "../../../i18n/hooks.mjs";
 import { sanitizeFilename } from "../field-utils.mjs";
+import { resolveAssetUrl } from "../../../utils/asset-url.mjs";
 import { useUploadCollection } from "../../../hooks/use-upload-collection.mjs";
 import { useUpload } from "../../../hooks/use-upload.mjs";
 import * as React from "react";
@@ -35,7 +36,7 @@ function useRichTextImageUpload({ imageCollection, onImageUpload }) {
 			const sanitizedName = sanitizeFilename(file.name);
 			const uploadedAsset = await upload(sanitizedName === file.name ? file : new File([file], sanitizedName, { type: file.type }), { to: collection });
 			if (!uploadedAsset?.url) throw new Error(t("upload.error"));
-			return uploadedAsset.url;
+			return resolveAssetUrl(uploadedAsset.url) ?? uploadedAsset.url;
 		}, [
 			collection,
 			collections,

package/dist/client/components/fields/rich-text-editor/index.d.mts

@@ -1,5 +1,5 @@
 import { RichTextEditorProps } from "./types.mjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime33 from "react/jsx-runtime";
 
 //#region src/client/components/fields/rich-text-editor/index.d.ts
 
@@ -24,6 +24,7 @@ declare function RichTextEditor({
   error,
   localized,
   locale,
+  hideLabel,
   extensions,
   preset,
   features,
@@ -34,6 +35,6 @@ declare function RichTextEditor({
   imageCollection,
   enableMediaLibrary,
   outputMode
-}: RichTextEditorProps): react_jsx_runtime0.JSX.Element;
+}: RichTextEditorProps): react_jsx_runtime33.JSX.Element;
 //#endregion
 export { RichTextEditor };

package/dist/client/components/fields/rich-text-editor/index.mjs

@@ -66,7 +66,7 @@ function RichTextEditorLoadingSkeleton({ disabled, readOnly }) {
 * `useEditor` with an empty extension list which causes the ProseMirror
 * "Schema is missing its top node type" error.
 */
-function RichTextEditor({ name, value, onChange, disabled, readOnly, label, description, placeholder, required, error, localized, locale, extensions, preset, features, showCharacterCount, maxCharacters, enableImages, onImageUpload, imageCollection, enableMediaLibrary, outputMode }) {
+function RichTextEditor({ name, value, onChange, disabled, readOnly, label, description, placeholder, required, error, localized, locale, hideLabel, extensions, preset, features, showCharacterCount, maxCharacters, enableImages, onImageUpload, imageCollection, enableMediaLibrary, outputMode }) {
 	const { t } = useTranslation();
 	const resolveText = useResolveText();
 	const resolvedLabel = label ? resolveText(label) : void 0;
@@ -137,7 +137,7 @@ function RichTextEditor({ name, value, onChange, disabled, readOnly, label, desc
 		className: "space-y-2",
 		"data-disabled": disabled || readOnly,
 		children: [
-			resolvedLabel && /* @__PURE__ */ jsxs("div", {
+			!hideLabel && resolvedLabel && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ jsxs(Label, {
 					htmlFor: name,
@@ -193,7 +193,7 @@ function RichTextEditorCore({ name, ariaLabel, ariaDescribedBy, value, onChange,
 	const [linkOpen, setLinkOpen] = React.useState(false);
 	const [imageOpen, setImageOpen] = React.useState(false);
 	const [uploadingInlineImage, setUploadingInlineImage] = React.useState(false);
-	const lastEmittedValueRef = React.useRef(void 0);
+	const lastEmittedValueRef = React.useRef(value);
 	const editorRef = React.useRef(null);
 	const allowImages = features.image && (enableImages ?? true);
 	const allowLinks = features.link;
@@ -312,6 +312,7 @@ function RichTextEditorCore({ name, ariaLabel, ariaDescribedBy, value, onChange,
 		onUpdate: ({ editor: currentEditor }) => {
 			if (disabled || readOnly) return;
 			const nextValue = getOutput(currentEditor, outputMode);
+			if (isSameValue(nextValue, lastEmittedValueRef.current)) return;
 			lastEmittedValueRef.current = nextValue;
 			onChange?.(nextValue);
 		}

package/dist/client/components/fields/select-field.mjs

@@ -23,7 +23,7 @@ function resolveOptionIcons(options) {
 		icon: resolveIconElement(option.icon)
 	} : option);
 }
-function SelectField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, options, loadOptions, multiple, clearable, maxSelections, emptyMessage }) {
+function SelectField({ name, label, description, placeholder, required, disabled, localized, locale, hideLabel, control, className, options, loadOptions, multiple, clearable, maxSelections, emptyMessage }) {
 	const resolvedControl = useResolvedControl(control);
 	const resolvedOptions = useMemo(() => resolveOptionIcons(options), [options]);
 	const resolvedLoadOptions = useMemo(() => {
@@ -43,6 +43,7 @@ function SelectField({ name, label, description, placeholder, required, disabled
 			disabled,
 			localized,
 			locale,
+			hideLabel,
 			error: fieldState.error?.message,
 			children: multiple ? /* @__PURE__ */ jsx(SelectMulti, {
 				id: name,

package/dist/client/components/fields/text-field.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 
 //#region src/client/components/fields/text-field.tsx
-function TextField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, type = "text", maxLength, autoComplete }) {
+function TextField({ name, label, description, placeholder, required, disabled, localized, locale, hideLabel, control, className, type = "text", maxLength, autoComplete }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
@@ -18,6 +18,7 @@ function TextField({ name, label, description, placeholder, required, disabled,
 			disabled,
 			localized,
 			locale,
+			hideLabel,
 			error: fieldState.error?.message,
 			children: /* @__PURE__ */ jsx(TextInput, {
 				id: name,

package/dist/client/components/fields/textarea-field.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 
 //#region src/client/components/fields/textarea-field.tsx
-function TextareaField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, rows, maxLength, autoResize }) {
+function TextareaField({ name, label, description, placeholder, required, disabled, localized, locale, hideLabel, control, className, rows, maxLength, autoResize }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
@@ -18,6 +18,7 @@ function TextareaField({ name, label, description, placeholder, required, disabl
 			disabled,
 			localized,
 			locale,
+			hideLabel,
 			error: fieldState.error?.message,
 			children: /* @__PURE__ */ jsx(TextareaInput, {
 				id: name,

package/dist/client/components/fields/time-field.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 
 //#region src/client/components/fields/time-field.tsx
-function TimeField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, precision }) {
+function TimeField({ name, label, description, placeholder, required, disabled, localized, locale, hideLabel, control, className, precision }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
@@ -19,6 +19,7 @@ function TimeField({ name, label, description, placeholder, required, disabled,
 				disabled,
 				localized,
 				locale,
+				hideLabel,
 				error: fieldState.error?.message,
 				children: /* @__PURE__ */ jsx(TimeInput, {
 					id: name,

package/dist/client/components/layout/field-layout-renderer.mjs

@@ -96,18 +96,18 @@ function SectionRenderer({ section, index, ctx }) {
 		const value = `section-${index}`;
 		return /* @__PURE__ */ jsx(Accordion, {
 			defaultValue: section.defaultCollapsed !== true ? [value] : [],
-			className: "w-full",
+			className: "qa-field-layout__section qa-field-layout__section--collapsible panel-surface bg-card overflow-hidden",
 			children: /* @__PURE__ */ jsxs(AccordionItem, {
 				value,
-				className: "border-transparent px-4",
+				className: "border-none px-0 data-open:bg-transparent",
 				children: [/* @__PURE__ */ jsx(AccordionTrigger, {
-					className: "hover:no-underline",
+					className: "hover:bg-surface-low aria-expanded:bg-surface-low min-h-12 px-4 py-3 hover:no-underline",
 					children: /* @__PURE__ */ jsx("span", {
 						className: "font-semibold",
 						children: ctx.resolveText(section.label, "Section")
 					})
 				}), /* @__PURE__ */ jsxs(AccordionContent, {
-					className: "pt-2 pb-4",
+					className: "border-border-subtle border-t px-4 pt-3 pb-4",
 					children: [section.description && /* @__PURE__ */ jsx("p", {
 						className: "text-muted-foreground mb-4 text-sm text-pretty",
 						children: ctx.resolveText(section.description, "")

package/dist/client/components/media/media-grid.mjs

@@ -1,5 +1,6 @@
 import { useSafeI18n } from "../../i18n/hooks.mjs";
 import { cn } from "../../lib/utils.mjs";
+import { resolveAssetUrl } from "../../utils/asset-url.mjs";
 import { Skeleton } from "../ui/skeleton.mjs";
 import { Icon } from "@iconify/react";
 import * as React from "react";
@@ -62,7 +63,7 @@ function MediaGridSkeleton({ columns = 4 }) {
 }
 function AssetItem({ asset, selected, selectionMode, onToggle, onClick }) {
 	const [imageError, setImageError] = React.useState(false);
-	const thumbnailUrl = asset.url;
+	const thumbnailUrl = resolveAssetUrl(asset.url);
 	const isImageType = isImage(asset.mimeType);
 	const showCheckbox = selectionMode !== "none";
 	const handleClick = () => {