@questpie/admin 1.1.1 → 3.0.0

package/skills/questpie-admin/views/SKILL.md

@@ -0,0 +1,442 @@
+---
+name: questpie-admin/views
+description: QUESTPIE admin views list-view table form-view sections sidebar dashboard widgets filters bulk-actions visibility history versioning sorting search
+type: skill
+---
+
+# QUESTPIE Admin Views
+
+This skill builds on questpie-admin.
+
+Views control how data appears in the QUESTPIE admin panel. They are configured **server-side** on collections and globals, then rendered by the admin client via registries.
+
+```text
+Server Config                     Admin UI
+.list(({ v }) => v.collectionTable({}))   ->  Table with columns, sort, search
+.form(({ v, f }) => v.collectionForm({})) ->  Form with sections, sidebar, tabs
+sidebar({...})                 ->  Navigation sidebar
+dashboard({...})               ->  Dashboard with widgets
+```
+
+## List Views
+
+Configure table views with `.list()` on a collection.
+
+### Basic Table
+
+```ts
+.list(({ v }) => v.collectionTable({}))
+```
+
+Shows all fields as columns with default rendering.
+
+### Custom Columns and Search
+
+```ts
+.list(({ v, f }) =>
+  v.collectionTable({
+    columns: [f.name, f.email, f.isActive, f.createdAt],
+    searchableFields: [f.name, f.email],
+    defaultSort: { field: f.createdAt, direction: "desc" },
+  }),
+)
+```
+
+| Option             | Type                   | Description                    |
+| ------------------ | ---------------------- | ------------------------------ |
+| `columns`          | `Field[]`              | Fields to show as columns      |
+| `searchableFields` | `Field[]`              | Fields included in text search |
+| `defaultSort`      | `{ field, direction }` | Default sort order             |
+
+## Form Views
+
+Configure edit forms with `.form()`.
+
+### Basic Form
+
+```ts
+.form(({ v, f }) => v.collectionForm({}))
+```
+
+Renders all fields in a single column.
+
+### Sections
+
+Group fields into labeled sections with optional grid layout:
+
+```ts
+.form(({ v, f }) =>
+  v.collectionForm({
+    fields: [
+      {
+        type: "section",
+        label: { en: "Contact Information" },
+        layout: "grid",
+        columns: 2,
+        fields: [f.name, f.email, f.phone],
+      },
+      {
+        type: "section",
+        label: { en: "Profile" },
+        fields: [f.bio],
+      },
+    ],
+  }),
+)
+```
+
+| Option        | Type                | Description                          |
+| ------------- | ------------------- | ------------------------------------ |
+| `type`        | `"section"`         | Required                             |
+| `label`       | `string \| i18n`    | Section heading                      |
+| `description` | `string \| i18n`    | Section description                  |
+| `layout`      | `"grid" \| "stack"` | Field layout                         |
+| `columns`     | `number`            | Grid columns (with `layout: "grid"`) |
+| `fields`      | `Field[]`           | Fields in this section               |
+
+### Form Sidebar
+
+Place fields in a right sidebar panel:
+
+```ts
+.form(({ v, f }) =>
+  v.collectionForm({
+    sidebar: {
+      position: "right",
+      fields: [f.isActive, f.avatar, f.status],
+    },
+    fields: [ /* main content sections */ ],
+  }),
+)
+```
+
+### Computed Fields
+
+Auto-compute values from other fields:
+
+```ts
+{
+  field: f.slug,
+  compute: {
+    handler: ({ data }) => {
+      if (data.name && !data.slug?.trim()) {
+        return slugify(data.name);
+      }
+      return undefined;
+    },
+    deps: ({ data }) => [data.name, data.slug],
+    debounce: 300,
+  },
+}
+```
+
+| Option     | Type             | Description              |
+| ---------- | ---------------- | ------------------------ |
+| `handler`  | `(ctx) => value` | Compute function         |
+| `deps`     | `(ctx) => any[]` | Reactive dependencies    |
+| `debounce` | `number`         | Debounce in milliseconds |
+
+### Conditional Visibility
+
+Show or hide fields based on other field values:
+
+```ts
+{
+  field: f.cancellationReason,
+  hidden: ({ data }) => data.status !== "cancelled",
+}
+```
+
+Read-only fields:
+
+```ts
+{
+  field: f.customerName,
+  readOnly: ({ data }) => !!data.customer,
+}
+```
+
+Section-level visibility:
+
+```ts
+{
+  type: "section",
+  label: { en: "SEO" },
+  hidden: ({ data }) => !data.isPublished,
+  fields: [f.metaTitle, f.metaDescription],
+}
+```
+
+## Dashboard
+
+Configure with `dashboard.ts`:
+
+```ts title="dashboard.ts"
+import { dashboard } from "#questpie";
+
+export default dashboard({
+	title: { en: "Dashboard" },
+	description: { en: "Overview of your app" },
+	columns: 4,
+	actions: [
+		{
+			id: "new-post",
+			href: "/admin/collections/posts?create=true",
+			label: { en: "New Post" },
+			icon: { type: "icon", props: { name: "ph:plus" } },
+			variant: "primary",
+		},
+	],
+	sections: [
+		{ id: "today", label: { en: "Today" }, layout: "grid", columns: 4 },
+		{ id: "business", label: { en: "Business" }, layout: "grid", columns: 4 },
+	],
+	items: [
+		/* widget items — see widget types below */
+	],
+});
+```
+
+### Widget Types
+
+**Stats** — count records with optional filter:
+
+```ts
+{
+  sectionId: "today",
+  id: "pending",
+  type: "stats",
+  collection: "appointments",
+  label: { en: "Pending" },
+  filter: { status: "pending" },
+  span: 1,
+}
+```
+
+**Value** — custom-loaded value with trend:
+
+```ts
+{
+  sectionId: "business",
+  id: "revenue",
+  type: "value",
+  span: 2,
+  refreshInterval: 1000 * 60 * 5,
+  loader: async ({ app }) => ({
+    value: 42000,
+    formatted: "42,000 EUR",
+    label: { en: "Monthly Revenue" },
+    trend: { value: "+12%" },
+  }),
+}
+```
+
+**Progress** — progress bar toward a goal:
+
+```ts
+{
+  sectionId: "business",
+  id: "goal",
+  type: "progress",
+  span: 1,
+  showPercentage: true,
+  label: { en: "Monthly Goal" },
+  loader: async ({ app }) => ({ current: 350, target: 500 }),
+}
+```
+
+**Chart** — chart from field values:
+
+```ts
+{
+  sectionId: "business",
+  id: "by-status",
+  type: "chart",
+  collection: "appointments",
+  field: "status",
+  chartType: "pie",
+  label: { en: "By Status" },
+  span: 1,
+}
+```
+
+**Recent Items** — list recent records:
+
+```ts
+{
+  sectionId: "ops",
+  id: "recent",
+  type: "recentItems",
+  collection: "appointments",
+  label: { en: "Recent" },
+  limit: 6,
+  dateField: "scheduledAt",
+  span: 2,
+}
+```
+
+**Timeline** — activity stream:
+
+```ts
+{
+  sectionId: "ops",
+  id: "activity",
+  type: "timeline",
+  label: { en: "Activity" },
+  maxItems: 8,
+  showTimestamps: true,
+  timestampFormat: "relative",
+  loader: async ({ app }) => {
+    const res = await app.collections.appointments.find({
+      limit: 8,
+      orderBy: { updatedAt: "desc" },
+    });
+    return res.docs.map((apt) => ({
+      id: apt.id,
+      title: apt.displayTitle,
+      description: `Status: ${apt.status}`,
+      timestamp: apt.updatedAt,
+      variant: apt.status === "completed" ? "success" : "warning",
+      href: `/admin/collections/appointments/${apt.id}`,
+    }));
+  },
+  span: 2,
+}
+```
+
+## Sidebar
+
+Configure with `sidebar.ts`:
+
+```ts title="sidebar.ts"
+import { sidebar } from "#questpie";
+
+export default sidebar({
+	sections: [
+		{ id: "overview", title: { en: "Overview" } },
+		{ id: "content", title: { en: "Content" } },
+		{ id: "external", title: { en: "External" } },
+	],
+	items: [
+		// Dashboard link
+		{
+			sectionId: "overview",
+			type: "link",
+			label: { en: "Dashboard" },
+			href: "/admin",
+			icon: { type: "icon", props: { name: "ph:house" } },
+		},
+		// Global settings
+		{ sectionId: "overview", type: "global", global: "siteSettings" },
+		// Collection — label and icon from .admin() config
+		{ sectionId: "content", type: "collection", collection: "posts" },
+		// External link
+		{
+			sectionId: "external",
+			type: "link",
+			label: { en: "Open Website" },
+			href: "/",
+			external: true,
+			icon: { type: "icon", props: { name: "ph:arrow-square-out" } },
+		},
+	],
+});
+```
+
+Items appear in definition order within their section.
+
+Modules contribute sidebar items automatically. `adminModule` adds "Administration" with user management. `auditModule` adds an audit log item.
+
+## Filters & Saved Views
+
+Filters are auto-generated from field definitions:
+
+| Field Type          | Filter Operators                         |
+| ------------------- | ---------------------------------------- |
+| `text`              | Contains, equals, starts with, ends with |
+| `number`            | Equals, greater than, less than, between |
+| `boolean`           | Is true, is false                        |
+| `select`            | Is, is not, in                           |
+| `date` / `datetime` | Before, after, between                   |
+| `relation`          | Is (picker)                              |
+
+Users can save filter + sort + column combinations as named views.
+
+## Bulk Actions
+
+List views support multi-select. Check rows, then use the floating toolbar. Built-in: **Delete** (with confirmation). Soft-delete collections soft-delete instead of permanent removal.
+
+## History & Versions
+
+Click the clock icon in the form toolbar. Two tabs:
+
+| Tab          | Shows                                          | Requires                      |
+| ------------ | ---------------------------------------------- | ----------------------------- |
+| **Activity** | Audit log (create, update, delete, transition) | `auditModule`                 |
+| **Versions** | Full document snapshots with restore           | `.versioning()` on collection |
+
+Enable versioning:
+
+```ts
+export const pages = collection("pages")
+  .versioning({ drafts: true, maxVersions: 20 })
+  .fields(({ f }) => ({ ... }));
+```
+
+Disable audit for a specific collection:
+
+```ts
+export const logs = collection("logs")
+  .admin(() => ({ audit: false }))
+  .fields(({ f }) => ({ ... }));
+```
+
+## Common Mistakes
+
+1. **HIGH: Defining columns that don't match field names** — `columns: [f.name]` requires a `name` field in the collection's `.fields()`. Mismatches cause empty columns.
+
+2. **MEDIUM: Not specifying `searchableFields`** — table search bar won't work unless you explicitly list which fields to search.
+
+3. **MEDIUM: Forgetting sidebar section ordering** — items appear in definition order. If you want "Dashboard" at the top, define it first in the `items` array.
+
+4. **MEDIUM: Missing `sectionId` on sidebar items** — every item must reference an existing section ID.
+
+5. **LOW: Not setting `defaultSort`** — records appear in database insertion order which is usually not what users expect.
+
+## Form Views and Live Preview
+
+Form views connect to the Live Preview V2 system when the collection has `.preview()` configured. The form editor becomes the source of `postMessage` patches — every field change emits a patch through the bus, giving the preview iframe instant updates.
+
+### Enabling Preview on a Collection
+
+Add `.preview()` to the collection definition:
+
+```ts
+export const pages = collection("pages")
+	.fields(({ f }) => ({
+		title: f.text({ required: true, localized: true }),
+		slug: f.text({ required: true }),
+		content: f.blocks({ localized: true }),
+	}))
+	.preview({
+		url: ({ record }) => `/${record.slug}?preview=true`,
+		watch: ["title", "slug", "content"],
+		strategy: "hybrid",
+	});
+```
+
+### Preview Strategy Options
+
+| Strategy    | Use case                                                              |
+| ----------- | --------------------------------------------------------------------- |
+| `"instant"` | Simple pages with no derived fields — fastest, pure client patches    |
+| `"server"`  | Complex forms where every change needs server validation/computation  |
+| `"hybrid"`  | Default recommendation — instant local patches + server reconcile for slugs, relations, computed fields |
+
+### How It Works
+
+1. The form view detects `.preview()` config and opens a split-screen layout
+2. Field edits emit patches via `postMessage` to the preview iframe
+3. The preview page receives patches through `useQuestpiePreview` and updates in place
+4. Save/autosave persists to the database but is NOT the live transport
+5. In `"hybrid"` mode, derived data (slugs, expanded relations) reconciles via server round-trip

package/dist/auth-layout-M8K8_q5R.mjs

@@ -1,181 +0,0 @@
-import { g as cn } from "./content-locales-provider-BXvuIgfg.mjs";
-import { i as CardDescription, o as CardHeader, r as CardContent, s as CardTitle, t as Card } from "./card-BKHjBQfw.mjs";
-import { useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import { Input } from "@base-ui/react/input";
-import { Separator } from "@base-ui/react/separator";
-
-//#region src/client/components/ui/input.tsx
-function Input$1({ className, type, ...props }) {
-	return /* @__PURE__ */ jsx(Input, {
-		type,
-		"data-slot": "input",
-		className: cn("bg-input/20 backdrop-blur-sm border-input/80 focus-visible:border-ring focus-visible:ring-ring/30 focus:border-ring focus:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 border px-3 py-1.5 text-sm transition-all file:h-7 file:text-sm file:font-medium focus-visible:ring-[2px] focus:ring-[2px] aria-invalid:ring-[2px] file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", className),
-		...props
-	});
-}
-
-//#endregion
-//#region src/client/components/ui/label.tsx
-function Label({ className, ...props }) {
-	return /* @__PURE__ */ jsx("label", {
-		"data-slot": "label",
-		className: cn("gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed", className),
-		...props
-	});
-}
-
-//#endregion
-//#region src/client/components/ui/separator.tsx
-function Separator$1({ className, orientation = "horizontal", ...props }) {
-	return /* @__PURE__ */ jsx(Separator, {
-		"data-slot": "separator",
-		orientation,
-		className: cn("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch", className),
-		...props
-	});
-}
-
-//#endregion
-//#region src/client/components/ui/field.tsx
-function FieldGroup({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "field-group",
-		className: cn("gap-4 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col", className),
-		...props
-	});
-}
-const fieldVariants = cva("data-[invalid=true]:text-destructive gap-2 group/field flex w-full", {
-	variants: { orientation: {
-		vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
-		horizontal: "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-		responsive: "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
-	} },
-	defaultVariants: { orientation: "vertical" }
-});
-function Field({ className, orientation = "vertical", ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		role: "group",
-		"data-slot": "field",
-		"data-orientation": orientation,
-		className: cn(fieldVariants({ orientation }), className),
-		...props
-	});
-}
-function FieldContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "field-content",
-		className: cn("gap-0.5 group/field-content flex flex-1 flex-col leading-snug", className),
-		...props
-	});
-}
-function FieldLabel({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Label, {
-		"data-slot": "field-label",
-		className: cn("has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className),
-		...props
-	});
-}
-function FieldDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx("p", {
-		"data-slot": "field-description",
-		className: cn("text-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance", "last:mt-0 nth-last-2:-mt-1", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
-		...props
-	});
-}
-function FieldError({ className, children, errors, ...props }) {
-	const content = useMemo(() => {
-		if (children) return children;
-		if (!errors?.length) return null;
-		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
-		if (uniqueErrors?.length == 1) return uniqueErrors[0]?.message;
-		return /* @__PURE__ */ jsx("ul", {
-			className: "ml-4 flex list-disc flex-col gap-1",
-			children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index))
-		});
-	}, [children, errors]);
-	if (!content) return null;
-	return /* @__PURE__ */ jsx("div", {
-		role: "alert",
-		"data-slot": "field-error",
-		className: cn("text-destructive text-xs/relaxed font-normal", className),
-		...props,
-		children: content
-	});
-}
-
-//#endregion
-//#region src/client/components/ui/alert.tsx
-const alertVariants = cva("grid gap-0.5 border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5 w-full relative group/alert", {
-	variants: { variant: {
-		default: "bg-card text-card-foreground",
-		destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
-	} },
-	defaultVariants: { variant: "default" }
-});
-function Alert({ className, variant, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "alert",
-		role: "alert",
-		className: cn(alertVariants({ variant }), className),
-		...props
-	});
-}
-function AlertDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "alert-description",
-		className: cn("text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3", className),
-		...props
-	});
-}
-
-//#endregion
-//#region src/client/views/auth/auth-layout.tsx
-/**
-* Centered layout for authentication pages (login, register, forgot password, etc.)
-*
-* @example
-* ```tsx
-* <AuthLayout
-*   title="Sign in"
-*   description="Enter your credentials to access the admin panel"
-*   logo={<Logo />}
-*   footer={<Link to="/forgot-password">Forgot password?</Link>}
-* >
-*   <LoginForm />
-* </AuthLayout>
-* ```
-*/
-function AuthLayout({ title, description, logo, footer, children, className }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "bg-background flex min-h-screen flex-col items-center justify-center p-4",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "w-full max-w-sm space-y-6",
-			children: [
-				logo && /* @__PURE__ */ jsx("div", {
-					className: "flex justify-center",
-					children: logo
-				}),
-				/* @__PURE__ */ jsxs(Card, {
-					className: cn("w-full", className),
-					children: [/* @__PURE__ */ jsxs(CardHeader, {
-						className: "text-center",
-						children: [/* @__PURE__ */ jsx(CardTitle, {
-							className: "text-lg",
-							children: title
-						}), description && /* @__PURE__ */ jsx(CardDescription, { children: description })]
-					}), /* @__PURE__ */ jsx(CardContent, { children })]
-				}),
-				footer && /* @__PURE__ */ jsx("div", {
-					className: "text-muted-foreground text-center text-xs",
-					children: footer
-				})
-			]
-		})
-	});
-}
-
-//#endregion
-export { FieldContent as a, FieldGroup as c, Label as d, Input$1 as f, Field as i, FieldLabel as l, Alert as n, FieldDescription as o, AlertDescription as r, FieldError as s, AuthLayout as t, Separator$1 as u };
-//# sourceMappingURL=auth-layout-M8K8_q5R.mjs.map

package/dist/auth-layout-M8K8_q5R.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"auth-layout-M8K8_q5R.mjs","names":["Input","InputPrimitive","Separator","SeparatorPrimitive"],"sources":["../src/client/components/ui/input.tsx","../src/client/components/ui/label.tsx","../src/client/components/ui/separator.tsx","../src/client/components/ui/field.tsx","../src/client/components/ui/alert.tsx","../src/client/views/auth/auth-layout.tsx"],"sourcesContent":["import { Input as InputPrimitive } from \"@base-ui/react/input\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n\treturn (\n\t\t<InputPrimitive\n\t\t\ttype={type}\n\t\t\tdata-slot=\"input\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-input/20 backdrop-blur-sm border-input/80 focus-visible:border-ring focus-visible:ring-ring/30 focus:border-ring focus:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 border px-3 py-1.5 text-sm transition-all file:h-7 file:text-sm file:font-medium focus-visible:ring-[2px] focus:ring-[2px] aria-invalid:ring-[2px] file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Input };\n","import type * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Label({ className, ...props }: React.ComponentProps<\"label\">) {\n  return (\n    <label\n      data-slot=\"label\"\n      className={cn(\n        \"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n","import { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n","\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Label } from \"./label\";\nimport { Separator } from \"./separator\";\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"gap-4 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\n  \"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  },\n);\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"gap-0.5 group/field-content flex flex-1 flex-col leading-snug\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"-my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2 relative\",\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ];\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>,\n        )}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-xs/relaxed font-normal\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"#questpie/admin/client/lib/utils\";\n\nconst alertVariants = cva(\n  \"grid gap-0.5 border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-1.5 right-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction };\n","/**\n * Auth Layout - centered card layout for authentication pages\n */\n\nimport * as React from \"react\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"../../components/ui/card\";\nimport { cn } from \"../../lib/utils\";\n\nexport type AuthLayoutProps = {\n  /** Page title */\n  title: string;\n  /** Page description */\n  description?: string;\n  /** Logo component or element */\n  logo?: React.ReactNode;\n  /** Footer content (e.g., links to other auth pages) */\n  footer?: React.ReactNode;\n  /** Form content */\n  children: React.ReactNode;\n  /** Additional class name for the card */\n  className?: string;\n};\n\n/**\n * Centered layout for authentication pages (login, register, forgot password, etc.)\n *\n * @example\n * ```tsx\n * <AuthLayout\n *   title=\"Sign in\"\n *   description=\"Enter your credentials to access the admin panel\"\n *   logo={<Logo />}\n *   footer={<Link to=\"/forgot-password\">Forgot password?</Link>}\n * >\n *   <LoginForm />\n * </AuthLayout>\n * ```\n */\nexport function AuthLayout({\n  title,\n  description,\n  logo,\n  footer,\n  children,\n  className,\n}: AuthLayoutProps) {\n  return (\n    <div className=\"bg-background flex min-h-screen flex-col items-center justify-center p-4\">\n      <div className=\"w-full max-w-sm space-y-6\">\n        {/* Logo */}\n        {logo && <div className=\"flex justify-center\">{logo}</div>}\n\n        {/* Main Card */}\n        <Card className={cn(\"w-full\", className)}>\n          <CardHeader className=\"text-center\">\n            <CardTitle className=\"text-lg\">{title}</CardTitle>\n            {description && <CardDescription>{description}</CardDescription>}\n          </CardHeader>\n          <CardContent>{children}</CardContent>\n        </Card>\n\n        {/* Footer */}\n        {footer && (\n          <div className=\"text-muted-foreground text-center text-xs\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}