@questpie/admin 3.5.1 → 3.5.3

package/dist/client/styles/base.css

@@ -4,6 +4,8 @@
 @import "@fontsource-variable/geist";
 @import "@fontsource-variable/jetbrains-mono";
 
+@source "../**/*.{js,jsx,ts,tsx}";
+
 /* ================================================================
    QUESTPIE ADMIN THEME — Base
    ================================================================
@@ -361,46 +363,19 @@
 }
 
 /* =============================================================================
-   Rich Text Editor Styles
+   Rich Text Editor Styles — Notion-like document editor
    ============================================================================= */
 
 .qp-rich-text-editor {
 	position: relative;
-	border-color: var(--border-subtle);
-	background: var(--surface-low);
-	transition-property: background-color, border-color, box-shadow;
-	transition-duration: var(--motion-duration-base);
-	transition-timing-function: var(--motion-ease-standard);
-}
-
-.qp-rich-text-editor:focus-within {
-	border-color: var(--border-strong);
-	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent);
-}
-
-.qp-rich-text-editor [data-rich-text-toolbar-button] {
-	flex: 0 0 auto;
-}
-
-.qp-rich-text-editor__toolbar {
-	scrollbar-width: none;
-	-webkit-overflow-scrolling: touch;
-}
-
-.qp-rich-text-editor__toolbar::-webkit-scrollbar {
-	display: none;
-}
-
-.qp-rich-text-editor__toolbar > [role="group"] {
-	flex: 0 0 auto;
 }
 
 .qp-rich-text-editor__bubble {
 	display: flex;
 	align-items: center;
-	gap: 0.25rem;
-	padding: 0.25rem;
-	border-radius: calc(var(--control-radius-inner) + 0.25rem);
+	gap: 0.375rem;
+	padding: 0.375rem;
+	border-radius: var(--floating-radius);
 }
 
 .qp-rich-text-editor__bubble-block {
@@ -411,7 +386,8 @@
 
 .qp-rich-text-editor__bubble-separator {
 	width: 1px;
-	height: 1.5rem;
+	height: 1.25rem;
+	margin: 0 0.125rem;
 	background: var(--border-subtle);
 }
 
@@ -419,8 +395,8 @@
 	display: grid;
 	grid-template-columns: auto minmax(12rem, 18rem) auto auto;
 	align-items: center;
-	gap: 0.375rem;
-	padding: 0.125rem;
+	gap: 0.5rem;
+	padding: 0.25rem;
 }
 
 .qp-rich-text-editor__link-input {
@@ -446,13 +422,14 @@
 	font-size: 0.75rem;
 }
 
+/* Content area — document editor feel */
 .qp-rich-text-editor__content {
 	min-height: 240px;
-	padding: 1rem 1.25rem 1.25rem;
+	padding: 1.25rem 1.5rem 1.5rem;
 	outline: none;
 	color: var(--foreground);
-	font-size: 0.9375rem;
-	line-height: 1.65;
+	font-size: 1rem;
+	line-height: 1.7;
 	text-wrap: pretty;
 	caret-color: var(--foreground);
 }
@@ -478,30 +455,30 @@
 }
 
 .qp-rich-text-editor__content p {
-	margin: 0 0 0.8rem;
+	margin: 0 0 0.5em;
 }
 
 .qp-rich-text-editor__content h1 {
-	margin: 1.5rem 0 0.85rem;
-	font-size: 1.625rem;
-	font-weight: 650;
-	letter-spacing: 0;
+	margin: 1.75em 0 0.4em;
+	font-size: 1.875rem;
+	font-weight: 700;
+	letter-spacing: -0.02em;
 	line-height: 1.2;
 	text-wrap: balance;
 }
 
 .qp-rich-text-editor__content h2 {
-	margin: 1.35rem 0 0.75rem;
-	font-size: 1.375rem;
+	margin: 1.5em 0 0.35em;
+	font-size: 1.5rem;
 	font-weight: 650;
-	letter-spacing: 0;
+	letter-spacing: -0.01em;
 	line-height: 1.25;
 	text-wrap: balance;
 }
 
 .qp-rich-text-editor__content h3 {
-	margin: 1.15rem 0 0.65rem;
-	font-size: 1.125rem;
+	margin: 1.25em 0 0.3em;
+	font-size: 1.25rem;
 	font-weight: 650;
 	letter-spacing: 0;
 	line-height: 1.3;
@@ -511,36 +488,40 @@
 .qp-rich-text-editor__content h4,
 .qp-rich-text-editor__content h5,
 .qp-rich-text-editor__content h6 {
-	margin: 1rem 0 0.5rem;
+	margin: 1.15em 0 0.25em;
 	font-size: 1rem;
 	font-weight: 650;
 	letter-spacing: 0;
-	line-height: 1.35;
+	line-height: 1.4;
 	text-wrap: balance;
 }
 
 .qp-rich-text-editor__content ul,
 .qp-rich-text-editor__content ol {
-	margin: 0.75rem 0;
-	padding-left: 1.35rem;
+	margin: 0.75em 0;
+	padding-left: 1.5rem;
 }
 
 .qp-rich-text-editor__content li {
-	margin: 0.25rem 0;
-	padding-left: 0.15rem;
+	margin: 0.35em 0;
+	padding-left: 0.25rem;
+}
+
+.qp-rich-text-editor__content li p {
+	margin: 0;
 }
 
 .qp-rich-text-editor__content blockquote {
-	margin: 1rem 0;
+	margin: 1.25em 0;
 	border-left: 3px solid var(--border-strong);
-	padding: 0.15rem 0 0.15rem 0.85rem;
+	padding: 0.25em 0 0.25em 1rem;
 	color: var(--muted-foreground);
 }
 
 .qp-rich-text-editor__content code {
 	background: var(--muted);
 	border-radius: var(--radius-xs);
-	padding: 0.1rem 0.3rem;
+	padding: 0.15em 0.35em;
 	font-size: 0.875em;
 	font-family: var(--font-mono);
 }
@@ -548,11 +529,11 @@
 .qp-rich-text-editor__content pre {
 	background: var(--muted);
 	border-radius: var(--control-radius-inner);
-	margin: 1rem 0;
-	padding: 0.875rem 1rem;
+	margin: 1.25em 0;
+	padding: 1rem 1.25rem;
 	font-family: var(--font-mono);
 	font-size: 0.8125rem;
-	line-height: 1.6;
+	line-height: 1.65;
 	overflow-x: auto;
 }
 
@@ -565,14 +546,14 @@
 .qp-rich-text-editor__content hr {
 	border: none;
 	border-top: 1px solid var(--border-subtle);
-	margin: 1.25rem 0;
+	margin: 1.75em 0;
 }
 
 .qp-rich-text-editor__content img {
 	display: block;
 	max-width: 100%;
 	height: auto;
-	margin: 1rem 0;
+	margin: 1.25em 0;
 	border-radius: var(--control-radius-inner);
 	outline: 1px solid rgba(255, 255, 255, 0.1);
 	outline-offset: -1px;
@@ -585,7 +566,7 @@
 
 .qp-rich-text-editor__content table {
 	border-collapse: collapse;
-	margin: 1rem 0;
+	margin: 1.25em 0;
 	width: 100%;
 	font-size: 0.875rem;
 }
@@ -593,7 +574,7 @@
 .qp-rich-text-editor__content th,
 .qp-rich-text-editor__content td {
 	border: 1px solid var(--border-subtle);
-	padding: 0.5rem 0.625rem;
+	padding: 0.5rem 0.75rem;
 	text-align: left;
 	vertical-align: top;
 }
@@ -615,13 +596,14 @@
 	padding: 0;
 }
 
+/* Slash command menu — generous spacing */
 .qp-rich-text-editor__slash {
 	display: flex;
 	flex-direction: column;
 	gap: 0.25rem;
-	min-width: 280px;
-	max-width: min(360px, calc(100vw - 2rem));
-	padding: 0.35rem;
+	min-width: 300px;
+	max-width: min(380px, calc(100vw - 2rem));
+	padding: 0.5rem;
 }
 
 .qp-rich-text-editor__slash-item {
@@ -629,14 +611,14 @@
 	width: 100%;
 	min-height: 3rem;
 	align-items: center;
-	gap: 0.625rem;
+	gap: 0.75rem;
 	border: 1px solid transparent;
 	border-radius: var(--control-radius-inner);
 	background: transparent;
-	padding: 0.45rem 0.55rem;
+	padding: 0.5rem 0.625rem;
 	color: var(--foreground);
 	font-size: 0.8125rem;
-	line-height: 1.2;
+	line-height: 1.3;
 	text-align: left;
 	transition:
 		background-color 150ms ease,
@@ -653,14 +635,15 @@
 
 .qp-rich-text-editor__slash-icon {
 	display: inline-flex;
-	width: 2rem;
-	height: 2rem;
+	width: 2.25rem;
+	height: 2.25rem;
 	flex: 0 0 auto;
 	align-items: center;
 	justify-content: center;
-	border-radius: var(--radius-xs);
+	border-radius: var(--radius-sm);
 	background: var(--surface-mid);
 	color: var(--muted-foreground);
+	font-size: 1.125rem;
 }
 
 .qp-rich-text-editor__slash-copy {
@@ -683,14 +666,23 @@
 	white-space: nowrap;
 }
 
+.qp-rich-text-editor__slash-group {
+	padding: 0.375rem 0.625rem 0.125rem;
+	font-family: var(--font-chrome);
+	font-size: 0.6875rem;
+	font-weight: 600;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--muted-foreground);
+}
+
 .qp-rich-text-editor__slash-empty {
-	padding: 0.5rem;
-	font-size: 0.75rem;
+	padding: 0.75rem;
+	font-size: 0.8125rem;
 	color: var(--muted-foreground);
 }
 
 @media (prefers-reduced-motion: reduce) {
-	.qp-rich-text-editor,
 	.qp-rich-text-editor__bubble,
 	.qp-rich-text-editor__slash-item {
 		transition: none;
@@ -700,7 +692,7 @@
 @media (max-width: 640px) {
 	.qp-rich-text-editor__content {
 		min-height: 200px;
-		padding: 0.875rem 1rem 1rem;
+		padding: 1rem 1rem 1.25rem;
 	}
 
 	.qp-rich-text-editor__bubble {
@@ -714,7 +706,7 @@
 	}
 
 	.qp-rich-text-editor__slash {
-		min-width: min(280px, calc(100vw - 2rem));
+		min-width: min(300px, calc(100vw - 2rem));
 	}
 }
 

package/dist/client/utils/build-field-definitions-from-schema.mjs

@@ -205,6 +205,7 @@ function applyRichTextConfig(config, metadata) {
 	if (metadata.placeholder !== void 0) config.placeholder = metadata.placeholder;
 	if (metadata.allowImages !== void 0) config.enableImages = metadata.allowImages;
 	if (metadata.imageCollection !== void 0) config.imageCollection = metadata.imageCollection;
+	if (metadata.outputMode !== void 0) config.outputMode = metadata.outputMode;
 }
 function buildNestedFieldDefinitions(nestedFields, relations, registry) {
 	const result = {};

package/dist/client/views/collection/auto-form-fields.mjs

@@ -5,6 +5,7 @@ import { getGridColumnsClass } from "../../components/fields/field-utils.mjs";
 import { getFieldName, isFieldReference } from "../../builder/types/field-types.mjs";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../components/ui/accordion.mjs";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/ui/tabs.mjs";
+import { adminCollectionKey } from "../../hooks/query-access.mjs";
 import { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
 import { useCollectionMeta } from "../../hooks/use-collection-meta.mjs";
 import { useGlobalFields } from "../../hooks/use-global-fields.mjs";
@@ -393,8 +394,8 @@ function AutoFormFields({ app: _cms, collection, mode = "collection", config, re
 		schemaQueryOptions: { enabled: mode === "collection" && !isActionForm && shouldFetchSchema }
 	});
 	const globalResult = useGlobalFields(mode === "global" ? collection : "", { schemaQueryOptions: { enabled: mode === "global" && shouldFetchSchema } });
-	const { data: collectionMeta } = useCollectionMeta(collection, { enabled: mode === "collection" && !isActionForm });
-	const { data: globalMeta } = useGlobalMeta(collection, { enabled: mode === "global" });
+	const { data: collectionMeta } = useCollectionMeta(adminCollectionKey(collection), { enabled: mode === "collection" && !isActionForm });
+	const { data: globalMeta } = useGlobalMeta(adminCollectionKey(collection), { enabled: mode === "global" });
 	const resolvedFields = mode === "global" ? {
 		...providedFields ?? globalResult.fields,
 		...config?.fields

package/dist/client/views/collection/cells/primitive-cells.mjs

@@ -104,6 +104,13 @@ function DateCell({ value }) {
 		children: date.toLocaleDateString()
 	});
 }
+function formatShortDate(date) {
+	const now = /* @__PURE__ */ new Date();
+	const sameYear = date.getFullYear() === now.getFullYear();
+	const month = date.toLocaleDateString(void 0, { month: "short" });
+	const day = date.getDate();
+	return sameYear ? `${month} ${day}` : `${month} ${day}, ${date.getFullYear()}`;
+}
 /**
 * DateTime cell - formatted date and time display
 */
@@ -117,13 +124,9 @@ function DateTimeCell({ value }) {
 		className: "text-muted-foreground",
 		children: String(value)
 	});
-	return /* @__PURE__ */ jsxs("span", {
+	return /* @__PURE__ */ jsx("span", {
 		className: "tabular-nums",
-		children: [
-			date.toLocaleDateString(),
-			" ",
-			date.toLocaleTimeString()
-		]
+		children: formatShortDate(date)
 	});
 }
 /**

package/dist/client/views/collection/columns/build-columns.mjs

@@ -2,7 +2,7 @@ import { useResolveText } from "../../../i18n/hooks.mjs";
 import { useSafeContentLocales } from "../../../runtime/content-locales-provider.mjs";
 import { useScopedLocale } from "../../../runtime/locale-scope.mjs";
 import { LocaleSwitcher } from "../../../components/locale-switcher.mjs";
-import { DefaultCell, TextCell } from "../cells/primitive-cells.mjs";
+import { DateCell, DateTimeCell, DefaultCell, TextCell } from "../cells/primitive-cells.mjs";
 import { normalizeColumnConfig } from "../../../builder/types/collection-types.mjs";
 import { computeDefaultColumns, formatHeader } from "./column-defaults.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -133,6 +133,8 @@ function buildColumns(options) {
 		let CellComponent;
 		if (normalized.cell) CellComponent = normalized.cell;
 		else if (fieldDef?.cell) CellComponent = fieldDef.cell;
+		else if (fieldType === "datetime") CellComponent = DateTimeCell;
+		else if (fieldType === "date") CellComponent = DateCell;
 		else CellComponent = DefaultCell;
 		const needsFieldDef = FIELD_TYPES_NEEDING_FIELD_DEF.has(fieldType);
 		const accessorKey = (fieldType === "relation" || fieldType === "upload" || fieldType === "uploadMany") && fieldOptions.relationName ? fieldOptions.relationName : fieldName;

package/dist/client/views/collection/field-renderer.mjs

@@ -6,6 +6,7 @@ import { Skeleton } from "../../components/ui/skeleton.mjs";
 import { scopeDependencies, trackDependencies } from "../../utils/dependency-tracker.mjs";
 import { buildComponentProps, getFieldContext, getFieldOptions, getFullFieldName } from "./field-context.mjs";
 import { useFieldHooks } from "../../hooks/use-field-hooks.mjs";
+import { mergeReactiveFieldState, useReactiveFieldState } from "../../hooks/use-reactive-fields.mjs";
 import { useReactiveProps } from "../../hooks/use-reactive-prop.mjs";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -178,6 +179,12 @@ function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", r
 		entityMeta: entityMetaProp,
 		formValues
 	});
+	const reactiveFieldState = useReactiveFieldState(fullFieldName);
+	const effectiveFieldState = mergeReactiveFieldState({
+		hidden: context.isHidden,
+		readOnly: context.isReadOnly,
+		disabled: context.isDisabled
+	}, reactiveFieldState);
 	const { Component: resolvedComponent, loading: componentLoading } = useLazyComponent(context.component);
 	const clientSideCompute = typeof fieldOptions.compute === "function" ? fieldOptions.compute : void 0;
 	const { handleChange, computedValue, isComputed, options: hookOptions, optionsLoading } = useFieldHooks({
@@ -200,9 +207,9 @@ function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", r
 			...stripFieldUiOptions(getFieldOptions(fieldDef)),
 			...extraProps ?? {}
 		}), [fieldDef, extraProps]),
-		enabled: !context.isHidden && !!fieldDef
+		enabled: !effectiveFieldState.hidden && !!fieldDef
 	});
-	if (context.isHidden) return null;
+	if (effectiveFieldState.hidden) return null;
 	if (!fieldDef) return renderConfigError(`Field "${fieldName}" not found in ${mode === "global" ? "global" : "collection"} "${collection}" config.`);
 	const fieldValue = isComputed ? computedValue : watchedFieldValue === void 0 ? rawComponentProps.value : watchedFieldValue;
 	const componentProps = {
@@ -212,7 +219,8 @@ function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", r
 		onChange: handleChange,
 		options: resolvedOptions,
 		optionsLoading,
-		readOnly: rawComponentProps.readOnly || isComputed,
+		readOnly: effectiveFieldState.readOnly || isComputed,
+		disabled: effectiveFieldState.disabled === true,
 		label: resolveText(rawComponentProps.label, "", formValues),
 		description: resolveText(rawComponentProps.description, "", formValues),
 		placeholder: resolveText(rawComponentProps.placeholder, "", formValues)