@questpie/admin 0.0.1 → 1.0.1

package/README.md

@@ -2,554 +2,569 @@
 
 **Config-driven, batteries-included admin UI for QUESTPIE CMS**
 
-A fully-featured admin interface that auto-generates from your CMS schema with extensive customization options.
+A fully-featured admin interface using the `qa()` builder pattern for type-safe configuration.
 
 ## Features
 
-- **Zero Config** - Works out of the box with just a CMS client
-- **Config-Driven** - Customize everything via `defineAdminConfig`
-- **Type-Safe** - Full TypeScript inference from your CMS schema
+- **Builder Pattern** - Type-safe `qa()` builder with autocomplete
+- **Config-Driven** - UI auto-generated from builder configuration
+- **Type-Safe** - Full TypeScript inference with module augmentation
 - **Tailwind v4** - Built with Tailwind CSS v4 + shadcn/ui components
-- **Rich Text** - Tiptap editor with slash commands, tables, images
-- **Relations** - Inline, picker, and create modes for related content
+- **Rich Text** - Tiptap editor with toolbar controls
+- **Relations** - Single select, multi-picker with drag-and-drop
 - **Layouts** - Sections, tabs, columns, grids, sidebars
 - **Realtime** - SSE-powered live updates
-- **Versioning** - Built-in version history and audit logging
+- **Versioning** - Built-in version history
 - **i18n Ready** - Localization support for content
 
 ## Installation
 
 ```bash
-bun add @questpie/admin @questpie/cms @questpie/tanstack-query
-bun add @tanstack/react-query @tanstack/react-table
+bun add @questpie/admin questpie @questpie/tanstack-query
+bun add @tanstack/react-query
 ```
 
 ## Quick Start
 
-### Minimal Setup (One Component!)
+### 1. Create Admin Builder
 
-```tsx
-import { AdminApp } from "@questpie/admin";
-import { cmsClient } from "./lib/cms-client";
-import {
-  Link,
-  useLocation,
-  useNavigate,
-  useParams,
-} from "@tanstack/react-router";
+```typescript
+// src/admin/builder.ts
+import { qa, adminModule } from "@questpie/admin/client";
+import type { AppCMS } from "./server/cms";
 
-function App() {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const params = useParams();
-  const segments = params._.split("/").filter(Boolean);
+// Create typed builder with admin fields/views
+export const qab = qa<AppCMS>().use(adminModule).toNamespace();
+```
 
-  return (
-    <AdminApp
-      client={cmsClient} // That's it! Everything else is auto-generated
-      router={{
-        LinkComponent: Link,
-        currentPath: location.pathname,
-        segments,
-        navigate,
-      }}
-    />
+### 2. Define Collection Configs
+
+```typescript
+// src/admin/collections/posts.ts
+import { qab } from "../builder";
+
+export const postsAdmin = qab
+  .collection("posts")
+  .meta({
+    label: "Blog Posts",
+    icon: FileTextIcon, // React component
+  })
+  // Fields with registry callback - ({ r }) gives autocomplete!
+  .fields(({ r }) => ({
+    title: r.text({
+      label: "Title",
+      placeholder: "Post title...",
+      maxLength: 200,
+    }),
+    slug: r.text({
+      label: "Slug",
+    }),
+    content: r.textarea({
+      label: "Content",
+    }),
+    status: r.select({
+      label: "Status",
+      options: [
+        { label: "Draft", value: "draft" },
+        { label: "Published", value: "published" },
+      ],
+    }),
+    publishedAt: r.datetime({
+      label: "Publish Date",
+    }),
+    authorId: r.relation({
+      label: "Author",
+      targetCollection: "users",
+    }),
+  }))
+  // List view with field proxy - ({ v, f }) gives autocomplete!
+  .list(({ v, f }) =>
+    v.table({
+      columns: [f.title, f.status, f.authorId, f.publishedAt],
+    }),
+  )
+  // Form view
+  .form(({ v, f }) =>
+    v.form({
+      sections: [
+        {
+          title: "Content",
+          fields: [f.title, f.slug, f.content],
+        },
+        {
+          title: "Publishing",
+          fields: [f.status, f.publishedAt, f.authorId],
+        },
+      ],
+    }),
   );
+```
+
+### 3. Build Admin Configuration
+
+```typescript
+// src/admin/admin.ts
+import { qa, adminModule } from "@questpie/admin/client";
+import { postsAdmin } from "./collections/posts";
+import { sidebarConfig } from "./sidebar";
+
+export const admin = qa()
+  .use(adminModule)
+  .branding({
+    name: "My Admin",
+  })
+  .collections({
+    posts: postsAdmin,
+  })
+  .sidebar(sidebarConfig);
+
+// Module augmentation for global type inference
+declare module "@questpie/admin/client" {
+  interface AdminTypeRegistry {
+    cms: AppCMS;
+    admin: typeof admin;
+  }
 }
 ```
 
-### With Custom Config
+### 4. Configure Sidebar
+
+```typescript
+// src/admin/sidebar.ts
+import { qa } from "@questpie/admin/client";
+import { HouseIcon, FileTextIcon } from "@phosphor-icons/react";
+
+export const sidebarConfig = qa
+  .sidebar()
+  .section("main", (s) =>
+    s.items([
+      { type: "link", label: "Dashboard", href: "/admin", icon: HouseIcon },
+    ]),
+  )
+  .section("content", (s) =>
+    s
+      .title("Content")
+      .icon(FileTextIcon)
+      .items([{ type: "collection", collection: "posts", icon: FileTextIcon }]),
+  );
+```
+
+### 5. Setup Tailwind CSS
+
+In your main CSS file, import admin styles and configure Tailwind to scan the admin package:
+
+```css
+/* src/styles.css */
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@questpie/admin/styles/index.css";
+
+/* IMPORTANT: Tell Tailwind to scan admin package for utility classes */
+@source "../node_modules/@questpie/admin/dist";
+
+/* Your app's theme variables... */
+```
+
+### 6. Mount in React
 
 ```tsx
-import { AdminApp } from '@questpie/admin'
-import { cmsClient } from './lib/cms-client'
-import { adminConfig } from './configs/admin'
+// routes/admin.tsx (TanStack Router example)
+import { Admin, AdminLayoutProvider } from "@questpie/admin/client";
+import { Link, Outlet, useLocation } from "@tanstack/react-router";
+import { admin } from "~/admin/admin";
+import { cmsClient } from "~/lib/cms-client";
+import { queryClient } from "~/lib/query-client";
+
+// Create runtime instance
+const adminInstance = Admin.from(admin);
+
+function AdminLayout() {
+  const location = useLocation();
 
-function App() {
   return (
-    <AdminApp
+    <AdminLayoutProvider
+      admin={adminInstance}
       client={cmsClient}
-      config={adminConfig}  // Optional customization
-      router={{ ... }}
-    />
-  )
+      queryClient={queryClient}
+      LinkComponent={Link}
+      activeRoute={location.pathname}
+      basePath="/admin"
+    >
+      <Outlet />
+    </AdminLayoutProvider>
+  );
 }
 ```
 
-## 🎨 Configuration
+## Builder API
 
-Most UI is auto-generated from CMS collections. Field types and relation targets must be explicit in admin config.
+### Main Entry Point
 
 ```typescript
-import { defineAdminConfig } from "@questpie/admin/config";
-import type { AppCMS } from "./server/cms";
-
-export const adminConfig = defineAdminConfig<AppCMS>()({
-  app: {
-    brand: { name: "My Admin" },
-  },
-  collections: {
-    posts: {
-      label: "Blog Posts", // Override label
-
-      // List view
-      list: {
-        defaultColumns: ["title", "author", "publishedAt"],
-        defaultSort: { field: "publishedAt", direction: "desc" },
-        with: ["author"], // Auto-load relations
-      },
-
-      // Edit form
-      edit: {
-        // Optional: explicit order (recommended)
-        fields: ["title", "content", "status", "publishedAt"],
-
-        // Organize into sections
-        sections: [
-          {
-            title: "Content",
-            fields: ["title", "content"],
-          },
-          {
-            title: "Publishing",
-            fields: ["status", "publishedAt"],
-          },
-        ],
-      },
-
-      // Field-level overrides
-      fields: {
-        title: {
-          label: "Post Title",
-          required: true,
-        },
-        content: {
-          type: "richText", // Custom field type
-          placeholder: "Write your post...",
-        },
-        status: {
-          type: "select",
-          options: [
-            { label: "Draft", value: "draft" },
-            { label: "Published", value: "published" },
-          ],
-        },
-        publishedAt: {
-          label: "Publish Date",
-          type: "datetime",
-          // Conditional: readonly unless draft
-          readOnly: (values) => values.status !== "draft",
-        },
-      },
-    },
-  },
-});
+import { qa, adminModule } from "@questpie/admin/client";
+
+// Start from admin module (includes built-in fields/views + user management)
+const admin = qa()
+  .use(adminModule)
+  .branding({ name: "My Admin" })
+  .collections({ posts: postsAdmin })
+  .globals({ settings: settingsAdmin })
+  .sidebar(sidebarConfig)
+  .dashboard(dashboardConfig);
 ```
 
-## ✨ What's Automatic
+### Collection Builder
 
-### From CMS Schema
+```typescript
+const postsAdmin = qa
+  .collection("posts")
+  .meta({ label: "Posts", icon: PostIcon })
+  .fields(({ r }) => ({
+    // r = FieldRegistryProxy with autocomplete for registered fields
+    title: r.text({ maxLength: 200 }),
+    content: r.richText(),
+    status: r.select({ options: [...] }),
+  }))
+  .list(({ v, f }) => v.table({
+    // v = ViewRegistryProxy, f = FieldProxy
+    columns: [f.title, f.status],
+  }))
+  .form(({ v, f }) => v.form({
+    fields: [f.title, f.content, f.status],
+  }));
+```
 
-- 🚫 Schema introspection (field types, required, defaults, relations) - not planned (explicit config)
+### Global Builder
 
-### From Admin Config
+```typescript
+const settingsAdmin = qa
+  .global("settings")
+  .meta({ label: "Site Settings", icon: SettingsIcon })
+  .fields(({ r }) => ({
+    siteName: r.text({ maxLength: 100 }),
+    logo: r.text(), // TODO: image field
+  }))
+  .form(({ v, f }) =>
+    v.form({
+      fields: [f.siteName, f.logo],
+    }),
+  );
+```
 
-- ✅ **Sidebar navigation** - auto-generated from collections
-- ✅ **Routing** - `/admin/:collection/:id` patterns
-- ✅ **List views** - columns, sorting, filtering
-- ✅ **Form views** - create/edit with validation
-- ✅ **Realtime sync** - SSE enabled by default
-- ✅ **Relations loading** - auto-load with `with` config
+### Sidebar Builder
 
-## 🎯 Features
+```typescript
+const sidebarConfig = qa
+  .sidebar()
+  .section("main", (s) =>
+    s.items([
+      { type: "link", label: "Dashboard", href: "/admin", icon: HomeIcon },
+    ]),
+  )
+  .section("content", (s) =>
+    s
+      .title("Content")
+      .items([
+        { type: "collection", collection: "posts" },
+        { type: "collection", collection: "pages" },
+        { type: "divider" },
+        { type: "global", global: "settings" },
+      ]),
+  );
+```
 
-### Conditional Fields
+**Typed Sidebar (Recommended)**
 
 ```typescript
-fields: {
-  status: {
-    type: "select",
-    options: [...]
-  },
+import type { AppCMS } from "./server/cms";
+import type { SidebarItemForApp } from "@questpie/admin/client";
+
+const sidebarConfig = qa.sidebar<AppCMS>().section("content", (s) =>
+  s.title("Content").items([
+    { type: "collection", collection: "posts" },
+    { type: "global", global: "settings" },
+  ]),
+);
+
+// Standalone typed items
+const items: SidebarItemForApp<AppCMS>[] = [
+  { type: "collection", collection: "posts" },
+  { type: "global", global: "settings" },
+];
+```
 
-  // Show only when status is "cancelled"
-  cancellationReason: {
-    type: "textarea",
-    visible: (values) => values.status === "cancelled",
-    required: (values) => values.status === "cancelled"
-  },
+## Built-in Field Types
 
-  // Readonly unless draft
-  publishedAt: {
-    readOnly: (values) => values.status !== "draft"
-  },
+The `adminModule` provides these field types:
 
-  // Dynamic options based on other fields
-  category: {
-    type: "select",
-    options: (values) => {
-      if (values.type === "tech") {
-        return [{ label: "Frontend", value: "frontend" }, ...]
-      }
-      return [{ label: "Design", value: "design" }, ...]
-    }
-  }
-}
-```
+| Field      | Usage                              | Description                 |
+| ---------- | ---------------------------------- | --------------------------- |
+| `text`     | `r.text({ maxLength })`            | Single-line text input      |
+| `email`    | `r.email()`                        | Email input with validation |
+| `password` | `r.password()`                     | Password input              |
+| `textarea` | `r.textarea({ rows })`             | Multi-line text             |
+| `number`   | `r.number({ min, max })`           | Numeric input               |
+| `checkbox` | `r.checkbox()`                     | Boolean checkbox            |
+| `switch`   | `r.switch()`                       | Toggle switch               |
+| `select`   | `r.select({ options })`            | Dropdown select             |
+| `date`     | `r.date()`                         | Date picker                 |
+| `datetime` | `r.datetime()`                     | Date + time picker          |
+| `relation` | `r.relation({ targetCollection })` | Relation field              |
+| `json`     | `r.json()`                         | JSON editor                 |
+| `richText` | `r.richText()`                     | Rich text editor (Tiptap)   |
+
+## Form Layouts
 
-### Sections & Organization
+### Sections
 
 ```typescript
-edit: {
+.form(({ v, f }) => v.form({
   sections: [
     {
       title: "Basic Info",
-      description: "Main appointment details",
-      fields: ["customer", "barber", "service", "scheduledAt"],
+      description: "Main details",
+      fields: [f.title, f.slug],
       collapsible: true,
       defaultOpen: true,
     },
     {
-      title: "Status",
-      fields: ["status", "notes"],
+      title: "Content",
+      fields: [f.content],
     },
-  ];
-}
+  ],
+}))
 ```
 
-### Advanced Layouts
-
-Columns, grids, and inline layouts are supported:
+### Columns Layout
 
 ```typescript
-edit: {
-  sections: [
-    {
-      title: "Basic",
-      layout: "columns",
-      columns: 2,
-      fields: ["title", "slug", "author", "category"],
-    },
-    {
-      title: "Pricing",
-      layout: "grid",
-      grid: { columns: 4, gap: 4 },
-      fields: [
-        { field: "price", span: 1 },
-        { field: "currency", span: 1 },
-        { field: "stock", span: 2 },
-      ],
-    },
-    {
-      title: "Dates",
-      layout: "inline",
-      fields: ["startDate", "endDate"],
-    },
-  ];
-}
+sections: [
+  {
+    title: "Contact",
+    layout: "columns",
+    columns: 2,
+    fields: [f.firstName, f.lastName, f.email, f.phone],
+  },
+];
 ```
 
-Sidebar layouts:
+### Grid Layout
 
 ```typescript
-edit: {
-  layout: "with-sidebar",
-  sections: [
-    { title: "Content", fields: ["title", "content"] }
-  ],
-  sidebar: {
-    position: "right",
-    width: "320px",
-    fields: ["status", "publishedAt"]
-  }
-}
+sections: [
+  {
+    layout: "grid",
+    grid: { columns: 4, gap: 4 },
+    fields: [
+      { field: f.title, span: 4 }, // full width
+      { field: f.price, span: 1 }, // 1/4
+      { field: f.currency, span: 1 }, // 1/4
+      { field: f.stock, span: 2 }, // 2/4
+    ],
+  },
+];
 ```
 
 ### Tabs
 
 ```typescript
-edit: {
+.form(({ v, f }) => v.form({
   tabs: [
     {
       id: "content",
       label: "Content",
-      fields: ["title", "content"],
+      fields: [f.title, f.content],
     },
     {
       id: "meta",
       label: "Metadata",
-      fields: ["seo", "tags", "category"],
+      fields: [f.seo, f.tags],
     },
-  ];
-}
-```
-
-### Localization (i18n)
-
-```typescript
-app: {
-  locales: {
-    default: "en",
-    available: ["en", "sk", "de"]
-  }
-},
-collections: {
-  posts: {
-    fields: {
-      title: { type: "text", localized: true },
-      content: { type: "richText", localized: true }
-    }
-  }
-}
+  ],
+}))
 ```
 
-### Relation Fields
-
-Automatic relation field support with create/edit capabilities:
-
-Display label uses the target record’s `_title`.
+### Sidebar Layout
 
 ```typescript
-fields: {
-  // Single relation (one-to-one) - explicit config
-  barberId: {
-    label: "Barber",
-    relation: {
-      targetCollection: "barbers",  // Required target collection
-      mode: "inline"                // or "picker" or "create"
-    }
+.form(({ v, f }) => v.form({
+  layout: "with-sidebar",
+  sections: [
+    { title: "Content", fields: [f.title, f.content] },
+  ],
+  sidebar: {
+    position: "right",
+    width: "300px",
+    fields: [f.status, f.publishedAt],
   },
-
-  // Multiple relations (one-to-many, many-to-many)
-  tags: {
-    relation: {
-      targetCollection: "tags",
-      mode: "picker",              // Enables multi-select
-      orderable: true,             // Enable drag-and-drop reordering
-
-      // Filter options based on current form values
-      filter: (values) => ({
-        where: { type: { eq: values.postType } }
-      })
-    }
-  }
-}
+}))
 ```
 
-**Features:**
-
-- ✅ **Plus button** - Create new related item (opens side sheet)
-- ✅ **Edit button** - Modify selected item (opens side sheet)
-- ✅ **Auto-complete** - Search and filter options
-- ✅ **Drag-and-drop** - Reorder multiple relations (when `orderable: true`)
-- ✅ **Conditional filtering** - Filter options based on form state
-
-### Rich Text Editor (Tiptap)
-
-Built-in rich text editing with toolbar controls:
-
-```typescript
-fields: {
-  content: {
-    type: "richText",
-    placeholder: "Start writing...",
-    richText: {
-      outputFormat: "html", // "json" (default) or "markdown"
-      enableImages: true,
-      showCharacterCount: true,
-      maxCharacters: 10000,
-      features: {
-        slashCommands: true,
-        tableControls: true,
-        bubbleMenu: true
-      },
-      onImageUpload: async (file) => {
-        // Return a public URL after upload
-        return await uploadImage(file)
-      }
-    }
-  }
-}
-```
-
-Note: Markdown output requires a Markdown extension in the `extensions` array.
-Slash commands, table tools, and the bubble menu can be toggled via `features`.
-
-### Embedded Collections
+## Conditional Fields
 
 ```typescript
-fields: {
-  gallery: {
-    embedded: {
-      collection: "post_images",
-      orderable: true,  // Drag-and-drop reordering
-      mode: "inline",   // or "modal" or "drawer"
-      rowLabel: (item) => item.caption || item.id
-    }
-  }
-}
+.fields(({ r }) => ({
+  status: r.select({
+    options: [
+      { label: "Active", value: "active" },
+      { label: "Cancelled", value: "cancelled" },
+    ],
+  }),
+  // Show only when status is "cancelled"
+  cancellationReason: r.textarea({
+    visible: (values) => values.status === "cancelled",
+    required: (values) => values.status === "cancelled",
+  }),
+  // Readonly unless draft
+  publishedAt: r.datetime({
+    readOnly: (values) => values.status !== "draft",
+  }),
+}))
 ```
 
-### Array Fields
+## Relation Fields
 
 ```typescript
-fields: {
-  tags: {
-    type: "array",
+.fields(({ r }) => ({
+  // Single relation
+  authorId: r.relation({
+    label: "Author",
+    targetCollection: "users",
+  }),
+  // Multiple relations with ordering
+  tags: r.relation({
     label: "Tags",
-    array: {
-      itemType: "text",
-      orderable: true,
-      maxItems: 10
-    }
-  },
-
-  ratings: {
-    type: "array",
-    label: "Ratings",
-    array: {
-      itemType: "number",
-      minItems: 1
-    }
-  }
-}
+    targetCollection: "tags",
+    type: "multiple",
+    orderable: true,
+  }),
+}))
 ```
 
-### Version History & Audit Logging
-
-Track all changes to collection items with built-in versioning:
+## Hooks
 
 ```typescript
-collections: {
-  posts: {
-    // Enable versioning for this collection
-    versioned: true,
-
-    // Configure audit logging
-    auditLog: {
-      fields: ["title", "content", "status"],  // Fields to track
-      trackUser: true,                         // Track who made changes
-      retentionDays: 365                       // Keep logs for 1 year
-    },
+import {
+  useAdminStore,
+  useAdminContext,
+  useCollectionList,
+  useCollectionItem,
+  useCollectionCreate,
+  useCollectionUpdate,
+  useCollectionDelete,
+  useGlobal,
+  useGlobalUpdate,
+  useAuthClient,
+  useAdminRoutes,
+} from "@questpie/admin/client";
+
+// Collection list with pagination
+const { data, isLoading } = useCollectionList("posts", {
+  limit: 10,
+  offset: 0,
+});
 
-    edit: {
-      // Show version history in edit form
-      showVersionHistory: true
-    }
-  }
-}
-```
+// Single item
+const { data: post } = useCollectionItem("posts", id);
 
-**Features:**
+// CRUD mutations
+const createPost = useCollectionCreate("posts");
+const updatePost = useCollectionUpdate("posts");
+const deletePost = useCollectionDelete("posts");
 
-- ✅ **Version tracking** - Every change creates a new version
-- ✅ **Change history** - See what changed, when, and by whom
-- ✅ **Diff view** - Compare old vs new values
-- ✅ **Restore versions** - Roll back to previous versions
-- ✅ **User tracking** - Know who made each change
-- ✅ **Configurable retention** - Control how long to keep history
+// Global data
+const { data: settings } = useGlobal("settings");
+const updateSettings = useGlobalUpdate("settings");
 
-### Tree Views (Coming Soon)
+// Admin store
+const { admin, client, basePath } = useAdminStore((s) => ({
+  admin: s.admin,
+  client: s.client,
+  basePath: s.basePath,
+}));
 
-```typescript
-list: {
-  view: "tree",  // Enable tree view
-  tree: {
-    parentField: "parentId",
-    labelField: "name",
-    collapsible: true
-  }
-}
-```
+// Auth
+const authClient = useAuthClient();
+const session = authClient.useSession();
 
-## 🧩 Component Registry
+// Routes
+const { routes, navigate } = useAdminRoutes();
+navigate({ collection: "posts", action: "create" });
+```
 
-Override default field components:
+## Components
 
 ```typescript
-import { RichTextEditor } from './components/RichTextEditor'
-import { ImagePicker } from './components/ImagePicker'
-
-<AdminApp
-  client={cmsClient}
-  config={adminConfig}
-  registry={{
-    fields: {
-      richText: RichTextEditor,
-      image: ImagePicker
-    }
-  }}
-  router={{ ... }}
-/>
+import {
+  // Navigation
+  AdminLink,
+  CollectionLink,
+  CollectionCreateLink,
+  CollectionEditLink,
+  GlobalLink,
+  DashboardLink,
+
+  // Fields
+  TextField,
+  EmailField,
+  NumberField,
+  SelectField,
+  CheckboxField,
+  SwitchField,
+  DateField,
+  RelationField,
+  JsonField,
+
+  // UI (shadcn)
+  Button,
+  Card,
+  Dialog,
+  Sheet,
+  Tabs,
+  Table,
+  // ... 27+ shadcn components
+} from "@questpie/admin/client";
 ```
 
-## 📦 Package Exports
+## Package Exports
 
 ```typescript
-// Main component
-import { AdminApp } from "@questpie/admin";
-
-// Config helper
-import { defineAdminConfig } from "@questpie/admin/config";
-
-// Hooks
-import { AdminProvider, useCollection } from "@questpie/admin/hooks";
-
-// Components
+// Main client exports (recommended)
 import {
+  qa,
+  Admin,
+  AdminBuilder,
+  adminModule,
+  AdminProvider,
+  useAdminStore,
+  useCollectionList,
+  useAdminRoutes,
+  AdminLayoutProvider,
   CollectionList,
   CollectionForm,
-  RelationSelect,
-  RelationPicker,
-  VersionHistory,
-} from "@questpie/admin/components";
+} from "@questpie/admin/client";
 
-// Utilities
-import { cn } from "@questpie/admin/utils";
+// Server exports (for backend CMS setup)
+import { adminModule } from "@questpie/admin/server";
 
 // Styles
-import "@questpie/admin/styles";
+import "@questpie/admin/client/styles/index.css";
 ```
 
-## 🎨 Styling
+## Styling
 
-Complete shadcn/ui setup with Tailwind CSS v4:
+Built with Tailwind CSS v4 + shadcn/ui:
 
-- 53+ pre-built components (base-lyra style)
+- 27+ pre-built components
 - Light/dark theme support
 - oklch color space
 - Customizable via Tailwind tokens
+- Styles scoped under `.questpie-admin`
+
+## Examples
 
-## 📚 Examples
-
-See [tanstack-barbershop](../../examples/tanstack-barbershop) for complete example.
-
-## 🚀 Roadmap
-
-- [ ] Schema introspection (auto field type inference) - not planned
-- [x] Conditional visibility/readonly/disabled
-- [x] Sections organization
-- [x] Advanced layouts (columns, grid, inline, sidebar)
-- [x] Component registry
-- [x] Relation fields (RelationSelect, RelationPicker)
-- [x] Version history & audit logging
-- [x] Embedded collections (inline, modal, drawer)
-- [x] Array fields
-- [x] Tabs layout
-- [ ] Tree views (hierarchical data)
-- [ ] Bulk actions
-- [ ] Saved views/filters
-- [ ] Custom dashboard
-- [ ] Permissions UI
-
-## Related Packages
-
-- [`@questpie/cms`](../cms) - Core CMS engine
-- [`@questpie/tanstack-query`](../tanstack-query) - TanStack Query integration
-- [`@questpie/hono`](../hono) - Hono adapter
-- [`@questpie/elysia`](../elysia) - Elysia adapter
-- [`@questpie/next`](../next) - Next.js adapter
-- [`@questpie/tanstack-start`](../tanstack-start) - TanStack Start adapter
+See [tanstack-barbershop](../../examples/tanstack-barbershop) for a complete working example.
 
 ## License