@questpie/admin 3.0.4 → 3.0.6

package/README.md

@@ -46,7 +46,13 @@ Branding name, sidebar, dashboard, and admin locale are configured via `config/a
 import { adminConfig } from "#questpie/factories";
 
 export default adminConfig({
-	branding: { name: "My Admin" },
+	branding: {
+		name: "My Admin",
+		// Optional — see "Whitelabeling" below
+		logo: "/brand/logo.svg",
+		tagline: "Powered by My Co.",
+		favicon: "/brand/favicon.ico",
+	},
 	sidebar: {
 		sections: [
 			{
@@ -266,6 +272,98 @@ Import the admin base stylesheet and scan the admin package:
 
 `index.css` is an alias for `base.css`; import `base.css` directly when you want explicit control.
 
+## Whitelabeling
+
+There are two layers, deliberately separated:
+
+| Layer        | Configured in                                   | Covers                                       |
+| ------------ | ----------------------------------------------- | -------------------------------------------- |
+| **Content**  | `config/admin.ts` → `branding`                  | Name, logo, tagline, favicon                 |
+| **Theme**    | Your app's `admin.css`                          | Colors, fonts, radii, shadows, motion        |
+| **Chrome**   | Files in `questpie/admin/components/` (see below) | Sidebar brand, nav item, auth layout       |
+
+### Branding (config-driven)
+
+```ts
+// config/admin.ts
+export default adminConfig({
+	branding: {
+		name: "Acme Studio",
+		// String, or { src, srcDark } for separate light/dark images,
+		// or a server ComponentReference for an inline SVG.
+		logo: { src: "/brand/logo-light.svg", srcDark: "/brand/logo-dark.svg" },
+		// Replaces the "Built with QUESTPIE" footer on auth pages.
+		// Omit to render no footer text at all.
+		tagline: "Studio admin",
+		favicon: "/brand/favicon.ico",
+	},
+});
+```
+
+The logo also accepts an `I18nText` for `name`/`tagline` (`{ en: "...", sk: "..." }`)
+and the same locale-map / translation-key shape used elsewhere in the admin.
+
+### Theming (CSS override)
+
+The admin exposes every visual token as a CSS custom property in `base.css`. To
+rebrand colors, fonts, or shape, override them in your app's `admin.css`
+**after** the base import — source order ensures your overrides win:
+
+```css
+/* admin.css */
+@import "tailwindcss";
+@import "@questpie/admin/client/styles/base.css";
+
+/* Optional: load a brand font */
+@import url("https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap");
+
+:root,
+.light {
+	--primary: oklch(0.65 0.2 25);
+	--ring: oklch(0.65 0.2 25);
+	--font-heading: "Caveat Brush", system-ui, sans-serif;
+	--surface-radius: 0.5rem;
+}
+
+.dark {
+	--primary: oklch(0.78 0.18 25); /* lifted L for dark surfaces */
+	--ring: oklch(0.78 0.18 25);
+}
+```
+
+`OKLCH` is recommended because the admin's derived hover/focus states use
+`color-mix(in oklch, …)` — values stay perceptually consistent. HEX and `rgb()`
+work too; `hsl()` is discouraged (no P3 gamut). See the full token list in
+`@questpie/admin/client/styles/base.css`; common knobs:
+
+- Colors: `--primary`, `--background`, `--foreground`, `--surface`, `--border`,
+  `--ring`, `--accent`, `--destructive`, `--success`, …
+- Sidebar: `--sidebar`, `--sidebar-accent`, `--sidebar-active-background`, …
+- Typography: `--font-sans`, `--font-mono`, `--font-chrome`, `--font-heading`
+- Shape: `--control-radius`, `--surface-radius`, `--floating-radius`
+
+### Zero-FOUC favicon (optional, TanStack Start)
+
+By default the favicon is applied client-side after the admin config loads.
+For SSR-clean favicons, fetch your config in the route loader and add a link
+yourself:
+
+```tsx
+// routes/admin.tsx
+export const Route = createFileRoute("/admin")({
+	loader: async ({ context }) => ({ config: await context.client.routes.getAdminConfig() }),
+	head: ({ loaderData }) => ({
+		links: [
+			{ rel: "stylesheet", href: adminCss },
+			...(loaderData?.config?.branding?.favicon
+				? [{ rel: "icon", href: loaderData.config.branding.favicon }]
+				: []),
+		],
+	}),
+	component: AdminLayout,
+});
+```
+
 ## Chrome Overrides (File-First)
 
 Place component files in `questpie/admin/components/` to override specific UI chrome without changing your app shell:

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

@@ -506,6 +506,17 @@ interface FieldReactiveConfig<TData = any> {
 interface FieldLayoutItemWithReactive<TData = any> extends FieldReactiveConfig<TData> {
   field: string;
   className?: string;
+  /**
+   * Extra props forwarded to the field component. Use for component-specific
+   * configuration that doesn't have a dedicated layout key (e.g. relation
+   * field's `filter`, custom render functions).
+   *
+   * @example
+   * ```ts
+   * { field: f.counselorId, props: { filter: () => ({ role: "admin" }) } }
+   * ```
+   */
+  props?: Record<string, any>;
 }
 /**
  * Field layout item - can be a simple field name, field with config, section, or tabs

package/dist/client/components/blocks/block-editor-layout.mjs

@@ -138,7 +138,7 @@ function BlockEditorLayout(t0) {
 					}),
 					/* @__PURE__ */ jsx("p", {
 						className: "text-sm font-medium",
-						children: "No blocks yet"
+						children: t("blocks.emptyTitle")
 					}),
 					/* @__PURE__ */ jsx("p", {
 						className: "text-muted-foreground mt-1 text-xs",
@@ -153,7 +153,7 @@ function BlockEditorLayout(t0) {
 				children: [/* @__PURE__ */ jsx(Icon, {
 					icon: "ph:plus",
 					className: "mr-2 h-4 w-4"
-				}), "Add block"]
+				}), t("blocks.add")]
 			})]
 		});
 		$[19] = handleOpenSidebar;

package/dist/client/components/blocks/block-library-sidebar.mjs

@@ -19,7 +19,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Uses shadcn Sheet component for mobile-friendly sidebar.
 */
 function BlockLibrarySidebar(t0) {
-	const $ = c(32);
+	const $ = c(44);
 	const { open, onClose } = t0;
 	const { t } = useTranslation();
 	const actions = useBlockEditorActions();
@@ -113,54 +113,80 @@ function BlockLibrarySidebar(t0) {
 		$[12] = t4;
 	} else t4 = $[12];
 	let t5;
-	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsxs(SheetHeader, {
+	if ($[13] !== t) {
+		t5 = t("blocks.add");
+		$[13] = t;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== t5) {
+		t6 = /* @__PURE__ */ jsx(SheetTitle, { children: t5 });
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== t) {
+		t7 = t("blocks.libraryDescription");
+		$[17] = t;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== t7) {
+		t8 = /* @__PURE__ */ jsx(SheetDescription, { children: t7 });
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== t6 || $[22] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(SheetHeader, {
 			className: "space-y-2",
-			children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Add Block" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Select a block type to add to your content" })]
+			children: [t6, t8]
 		});
-		$[13] = t5;
-	} else t5 = $[13];
-	let t6;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(Icon, {
+		$[21] = t6;
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(Icon, {
 			icon: "ph:magnifying-glass",
 			className: "text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
 		});
-		$[14] = t6;
-	} else t6 = $[14];
-	let t7;
-	if ($[15] !== t) {
-		t7 = t("blocks.searchPlaceholder");
-		$[15] = t;
-		$[16] = t7;
-	} else t7 = $[16];
-	let t8;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = (e) => setSearch(e.target.value);
-		$[17] = t8;
-	} else t8 = $[17];
-	let t9;
-	if ($[18] !== search || $[19] !== t7) {
-		t9 = /* @__PURE__ */ jsx("div", {
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== t) {
+		t11 = t("blocks.searchPlaceholder");
+		$[25] = t;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = (e) => setSearch(e.target.value);
+		$[27] = t12;
+	} else t12 = $[27];
+	let t13;
+	if ($[28] !== search || $[29] !== t11) {
+		t13 = /* @__PURE__ */ jsx("div", {
 			className: "px-6 py-4",
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "relative",
-				children: [t6, /* @__PURE__ */ jsx(Input, {
+				children: [t10, /* @__PURE__ */ jsx(Input, {
 					ref: searchInputRef,
-					placeholder: t7,
+					placeholder: t11,
 					value: search,
-					onChange: t8,
+					onChange: t12,
 					className: "pl-9"
 				})]
 			})
 		});
-		$[18] = search;
-		$[19] = t7;
-		$[20] = t9;
-	} else t9 = $[20];
-	let t10;
-	if ($[21] !== categories || $[22] !== handleSelectBlock || $[23] !== search) {
-		t10 = /* @__PURE__ */ jsx("div", {
+		$[28] = search;
+		$[29] = t11;
+		$[30] = t13;
+	} else t13 = $[30];
+	let t14;
+	if ($[31] !== categories || $[32] !== handleSelectBlock || $[33] !== search || $[34] !== t) {
+		t14 = /* @__PURE__ */ jsx("div", {
 			className: "flex-1 overflow-y-auto px-6 pb-6",
 			children: categories.length === 0 ? /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col items-center justify-center py-12 text-center",
@@ -171,11 +197,11 @@ function BlockLibrarySidebar(t0) {
 					}),
 					/* @__PURE__ */ jsx("p", {
 						className: "text-muted-foreground text-sm",
-						children: "No blocks found"
+						children: t("blocks.noSearchResults")
 					}),
 					search && /* @__PURE__ */ jsx("p", {
 						className: "text-muted-foreground mt-1 text-xs",
-						children: "Try a different search term"
+						children: t("blocks.tryDifferentSearch")
 					})
 				]
 			}) : /* @__PURE__ */ jsx("div", {
@@ -213,39 +239,41 @@ function BlockLibrarySidebar(t0) {
 				})] }, category_0.key))
 			})
 		});
-		$[21] = categories;
-		$[22] = handleSelectBlock;
-		$[23] = search;
-		$[24] = t10;
-	} else t10 = $[24];
-	let t11;
-	if ($[25] !== t10 || $[26] !== t9) {
-		t11 = /* @__PURE__ */ jsxs(SheetContent, {
+		$[31] = categories;
+		$[32] = handleSelectBlock;
+		$[33] = search;
+		$[34] = t;
+		$[35] = t14;
+	} else t14 = $[35];
+	let t15;
+	if ($[36] !== t13 || $[37] !== t14 || $[38] !== t9) {
+		t15 = /* @__PURE__ */ jsxs(SheetContent, {
 			side: "left",
 			className: "qa-block-library flex w-full flex-col sm:max-w-md",
 			children: [
-				t5,
 				t9,
-				t10
+				t13,
+				t14
 			]
 		});
-		$[25] = t10;
-		$[26] = t9;
-		$[27] = t11;
-	} else t11 = $[27];
-	let t12;
-	if ($[28] !== open || $[29] !== t11 || $[30] !== t4) {
-		t12 = /* @__PURE__ */ jsx(Sheet, {
+		$[36] = t13;
+		$[37] = t14;
+		$[38] = t9;
+		$[39] = t15;
+	} else t15 = $[39];
+	let t16;
+	if ($[40] !== open || $[41] !== t15 || $[42] !== t4) {
+		t16 = /* @__PURE__ */ jsx(Sheet, {
 			open,
 			onOpenChange: t4,
-			children: t11
+			children: t15
 		});
-		$[28] = open;
-		$[29] = t11;
-		$[30] = t4;
-		$[31] = t12;
-	} else t12 = $[31];
-	return t12;
+		$[40] = open;
+		$[41] = t15;
+		$[42] = t4;
+		$[43] = t16;
+	} else t16 = $[43];
+	return t16;
 }
 function _temp2(a_0, b_0) {
 	return (a_0.admin?.order ?? 999) - (b_0.admin?.order ?? 999);

package/dist/client/components/brand-logo.d.mts

@@ -0,0 +1,25 @@
+import { BrandLogoConfig } from "../types/admin-config.mjs";
+import * as React from "react";
+
+//#region src/client/components/brand-logo.d.ts
+interface BrandLogoMarkProps {
+  logo: BrandLogoConfig | null | undefined;
+  className?: string;
+  fallback?: React.ReactNode;
+  alt?: string;
+}
+/**
+ * Default renderer for `branding.logo`. Accepts:
+ *   - a URL string (same image both modes)
+ *   - `{ src, srcDark }` (separate light/dark images, switched by .dark class)
+ *   - a `ComponentReference` (server-registered component, e.g. an SVG)
+ *
+ * When `logo` is null/undefined the `fallback` prop is rendered (typically
+ * the framework's built-in mark, e.g. `<QuestpieSymbol />`).
+ *
+ * Light/dark switching uses Tailwind's `dark:` variant against the
+ * `.dark` class the admin theme manager toggles on `<html>`.
+ */
+declare const BrandLogoMark: React.NamedExoticComponent<BrandLogoMarkProps>;
+//#endregion
+export { BrandLogoMark, BrandLogoMarkProps };

package/dist/client/components/brand-logo.mjs

@@ -0,0 +1,174 @@
+import { cn } from "../lib/utils.mjs";
+import { ComponentRenderer } from "./component-renderer.mjs";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/brand-logo.tsx
+/**
+* Default renderer for `branding.logo`. Accepts:
+*   - a URL string (same image both modes)
+*   - `{ src, srcDark }` (separate light/dark images, switched by .dark class)
+*   - a `ComponentReference` (server-registered component, e.g. an SVG)
+*
+* When `logo` is null/undefined the `fallback` prop is rendered (typically
+* the framework's built-in mark, e.g. `<QuestpieSymbol />`).
+*
+* Light/dark switching uses Tailwind's `dark:` variant against the
+* `.dark` class the admin theme manager toggles on `<html>`.
+*/
+const BrandLogoMark = React.memo(function BrandLogoMark$1(t0) {
+	const $ = c(46);
+	const { logo, className, fallback: t1, alt: t2 } = t0;
+	const fallback = t1 === void 0 ? null : t1;
+	const alt = t2 === void 0 ? "" : t2;
+	if (logo == null) {
+		let t3$1;
+		if ($[0] !== fallback) {
+			t3$1 = /* @__PURE__ */ jsx(Fragment, { children: fallback });
+			$[0] = fallback;
+			$[1] = t3$1;
+		} else t3$1 = $[1];
+		return t3$1;
+	}
+	if (typeof logo === "string") {
+		let t3$1;
+		if ($[2] !== className) {
+			t3$1 = cn("size-6 shrink-0 object-contain", className);
+			$[2] = className;
+			$[3] = t3$1;
+		} else t3$1 = $[3];
+		let t4$1;
+		if ($[4] !== alt || $[5] !== logo || $[6] !== t3$1) {
+			t4$1 = /* @__PURE__ */ jsx("img", {
+				src: logo,
+				alt,
+				className: t3$1
+			});
+			$[4] = alt;
+			$[5] = logo;
+			$[6] = t3$1;
+			$[7] = t4$1;
+		} else t4$1 = $[7];
+		return t4$1;
+	}
+	if ("src" in logo) {
+		const { src, srcDark, alt: t3$1, width, height } = logo;
+		const imgAlt = t3$1 === void 0 ? alt : t3$1;
+		if (!srcDark) {
+			let t4$2;
+			if ($[8] !== className) {
+				t4$2 = cn("size-6 shrink-0 object-contain", className);
+				$[8] = className;
+				$[9] = t4$2;
+			} else t4$2 = $[9];
+			let t5$2;
+			if ($[10] !== height || $[11] !== imgAlt || $[12] !== src || $[13] !== t4$2 || $[14] !== width) {
+				t5$2 = /* @__PURE__ */ jsx("img", {
+					src,
+					alt: imgAlt,
+					width,
+					height,
+					className: t4$2
+				});
+				$[10] = height;
+				$[11] = imgAlt;
+				$[12] = src;
+				$[13] = t4$2;
+				$[14] = width;
+				$[15] = t5$2;
+			} else t5$2 = $[15];
+			return t5$2;
+		}
+		let t4$1;
+		if ($[16] !== className) {
+			t4$1 = cn("size-6 shrink-0 object-contain dark:hidden", className);
+			$[16] = className;
+			$[17] = t4$1;
+		} else t4$1 = $[17];
+		let t5$1;
+		if ($[18] !== height || $[19] !== imgAlt || $[20] !== src || $[21] !== t4$1 || $[22] !== width) {
+			t5$1 = /* @__PURE__ */ jsx("img", {
+				src,
+				alt: imgAlt,
+				width,
+				height,
+				className: t4$1
+			});
+			$[18] = height;
+			$[19] = imgAlt;
+			$[20] = src;
+			$[21] = t4$1;
+			$[22] = width;
+			$[23] = t5$1;
+		} else t5$1 = $[23];
+		let t6$1;
+		if ($[24] !== className) {
+			t6$1 = cn("hidden size-6 shrink-0 object-contain dark:block", className);
+			$[24] = className;
+			$[25] = t6$1;
+		} else t6$1 = $[25];
+		let t7;
+		if ($[26] !== height || $[27] !== imgAlt || $[28] !== srcDark || $[29] !== t6$1 || $[30] !== width) {
+			t7 = /* @__PURE__ */ jsx("img", {
+				src: srcDark,
+				alt: imgAlt,
+				width,
+				height,
+				className: t6$1
+			});
+			$[26] = height;
+			$[27] = imgAlt;
+			$[28] = srcDark;
+			$[29] = t6$1;
+			$[30] = width;
+			$[31] = t7;
+		} else t7 = $[31];
+		let t8;
+		if ($[32] !== t5$1 || $[33] !== t7) {
+			t8 = /* @__PURE__ */ jsxs(Fragment, { children: [t5$1, t7] });
+			$[32] = t5$1;
+			$[33] = t7;
+			$[34] = t8;
+		} else t8 = $[34];
+		return t8;
+	}
+	let t3;
+	if ($[35] !== logo.props) {
+		t3 = logo.props ?? {};
+		$[35] = logo.props;
+		$[36] = t3;
+	} else t3 = $[36];
+	let t4;
+	if ($[37] !== logo.type || $[38] !== t3) {
+		t4 = {
+			type: logo.type,
+			props: t3
+		};
+		$[37] = logo.type;
+		$[38] = t3;
+		$[39] = t4;
+	} else t4 = $[39];
+	let t5;
+	if ($[40] !== className) {
+		t5 = className ? { className } : void 0;
+		$[40] = className;
+		$[41] = t5;
+	} else t5 = $[41];
+	let t6;
+	if ($[42] !== fallback || $[43] !== t4 || $[44] !== t5) {
+		t6 = /* @__PURE__ */ jsx(ComponentRenderer, {
+			reference: t4,
+			fallback,
+			additionalProps: t5
+		});
+		$[42] = fallback;
+		$[43] = t4;
+		$[44] = t5;
+		$[45] = t6;
+	} else t6 = $[45];
+	return t6;
+});
+
+//#endregion
+export { BrandLogoMark };