@motor-cms/ui-admin 1.0.1-alpha.0

package/app/pages/motor-admin/theme-preview/themes/wild-card.md

@@ -0,0 +1,263 @@
+# Wild Card Theme: "Botanical Observatory"
+
+## Mood / Inspiration
+
+**Concept:** A dark, warm admin panel inspired by the aesthetic of Victorian-era natural history museums, botanical illustration studios, and scientific observatories. Think aged leather journals, brass instruments, pressed botanical specimens, and handwritten field notes -- translated into a modern digital interface.
+
+**Why it works as a wild card:** Nobody expects an admin panel to feel like stepping into a naturalist's study. Most admin themes oscillate between sterile corporate blue/gray and trendy neon-on-dark. This theme goes in a completely different direction: warm, textured, intimate, and scholarly. It uses a serif heading font (almost unheard of in admin UIs), earthy warm tones instead of cool neutrals, and amber accents instead of blue/purple.
+
+**The surprise factor:** Serif typography in a dashboard. Dark backgrounds that feel warm rather than cold. An accent color (amber/gold) that evokes candlelight and brass rather than tech-startup energy. The overall effect is an admin panel that feels like a place of thoughtful craft rather than a utilitarian tool.
+
+**Reference aesthetics:** Dark academia, botanical illustration, old-world cartography, observatory control rooms, apothecary shelving systems.
+
+---
+
+## Color Palette
+
+### Primary Colors
+
+| Role | Name | Hex | OKLCH (Tailwind 4) | Tailwind Family |
+|------|------|-----|---------------------|-----------------|
+| **Background (deep)** | Observatory Dark | `#1C1917` | `oklch(0.205 0.006 56.043)` | `stone-900` |
+| **Background (surface)** | Walnut Panel | `#292524` | `oklch(0.269 0.006 56.043)` | `stone-800` |
+| **Background (elevated)** | Aged Leather | `#44403C` | `oklch(0.371 0.006 56.043)` | `stone-700` |
+| **Border / Divider** | Specimen Frame | `#57534E` | `oklch(0.444 0.006 56.043)` | `stone-600` |
+| **Text (primary)** | Parchment | `#FAFAF9` | `oklch(0.985 0.002 106.424)` | `stone-50` |
+| **Text (secondary)** | Aged Paper | `#D6D3D1` | `oklch(0.87 0.005 56.366)` | `stone-300` |
+| **Text (muted)** | Faded Ink | `#A8A29E` | `oklch(0.709 0.01 56.259)` | `stone-400` |
+
+### Accent Colors
+
+| Role | Name | Hex | OKLCH (Tailwind 4) | Tailwind Family |
+|------|------|-----|---------------------|-----------------|
+| **Primary accent** | Brass | `#F59E0B` | `oklch(0.769 0.188 70.08)` | `amber-500` |
+| **Primary accent (hover)** | Polished Brass | `#FBBF24` | `oklch(0.828 0.175 74.011)` | `amber-400` |
+| **Primary accent (muted)** | Patina Gold | `#92400E` | `oklch(0.444 0.107 47.604)` | `amber-800` |
+| **Success** | Botanical Green | `#10B981` | `oklch(0.696 0.17 162.48)` | `emerald-500` |
+| **Success (surface)** | Pressed Leaf | `#064E3B` | `oklch(0.378 0.077 168.94)` | `emerald-900` |
+| **Danger** | Sealing Wax | `#EF4444` | `oklch(0.637 0.237 25.331)` | `red-500` |
+| **Warning** | Candlelight | `#EAB308` | `oklch(0.795 0.184 86.047)` | `yellow-500` |
+| **Info** | Compass Blue | `#0EA5E9` | `oklch(0.685 0.169 222.979)` | `sky-500` |
+
+### Functional Surface Colors
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| **Card background** | `#292524` (stone-800) | Cards, panels, dropdowns |
+| **Card background (hover)** | `#44403C` (stone-700) | Hovered cards, selected rows |
+| **Input background** | `#1C1917` (stone-900) | Text inputs, selects |
+| **Input border** | `#57534E` (stone-600) | Input borders at rest |
+| **Input border (focus)** | `#F59E0B` (amber-500) | Focused input ring |
+| **Sidebar background** | `#0C0A09` (stone-950) | Navigation sidebar |
+| **Header background** | `#1C1917` (stone-900) | Top header bar |
+
+---
+
+## Font Pairing
+
+### Heading Font: Fraunces
+
+**Google Fonts:** [Fraunces](https://fonts.google.com/specimen/Fraunces)
+
+A soft-serif "Old Style" variable typeface inspired by early 20th century display faces. It has four variable axes (weight, optical size, softness, and "wonk") that give it subtle personality -- slightly quirky letterforms that feel hand-drawn without sacrificing legibility. The "wonky" alternates (leaning n/m/h shapes) add the feel of a naturalist's handwriting.
+
+- **Use for:** Page titles, section headings, card headers, modal titles
+- **Weight range:** 400-700 (use 600 for headings, 700 for page titles)
+- **Optical size:** 24-48px for headings (uses display-optimized forms automatically)
+- **WONK axis:** Set to 1 for headings to activate playful alternates
+- **SOFT axis:** Set to 50 for a balanced warmth (not too sharp, not too bubbly)
+
+**Why it's unexpected:** Serif fonts in admin panels are almost taboo. Fraunces breaks that rule with character and warmth while remaining perfectly legible. Its variable "wonk" axis adds a naturalist's touch that reinforces the botanical theme.
+
+### Body Font: Instrument Sans
+
+**Google Fonts:** [Instrument Sans](https://fonts.google.com/specimen/Instrument+Sans)
+
+A precise, legible sans-serif with subtle playfulness. Clean enough for data-dense tables and forms, but with enough character to complement Fraunces. Features 12 stylistic sets for fine-tuning.
+
+- **Use for:** Body text, form labels, table data, navigation items, buttons
+- **Weight range:** 400-600 (400 for body, 500 for labels, 600 for buttons)
+- **Size:** 14-16px for body, 12-13px for captions and metadata
+
+### Monospace Font: JetBrains Mono
+
+**Google Fonts:** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)
+
+For code snippets, config values, and technical identifiers. Its ligatures and clear character differentiation fit the "precision instruments" sub-theme.
+
+- **Use for:** Code blocks, IDs, technical values
+- **Size:** 13-14px
+
+### Google Fonts Import URL
+
+```
+https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,400..700,50,1;1,9..144,400..700,50,1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@400;500&display=swap
+```
+
+### CSS Font Stack
+
+```css
+:root {
+  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
+  --font-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+}
+```
+
+---
+
+## Component Styling Notes
+
+### What Makes This Theme Feel Different
+
+1. **Serif headings in a sans-serif world.** Every page title and section header uses Fraunces, creating immediate visual distinction from every other admin panel. The slight "wonkiness" of the letterforms adds warmth and humanity.
+
+2. **Warm dark mode.** Most dark themes use cool blue-grays (slate, zinc). This theme uses stone -- warm brownish grays that feel like dark wood and leather rather than a server room. The difference is subtle but profoundly affects mood.
+
+3. **Amber instead of blue.** The primary accent is amber/gold instead of the ubiquitous blue. Buttons glow like brass fittings. Focus rings feel like candlelight. Links shimmer rather than screech.
+
+4. **Subtle texture hints.** Consider a very faint noise texture overlay (opacity 2-3%) on the sidebar background to evoke aged paper. This is optional but reinforces the tactile quality.
+
+5. **Generous spacing.** Slightly more padding than typical admin panels (think 6 instead of 4, 8 instead of 6 in Tailwind units). The theme should feel unhurried and considered, like a well-organized specimen cabinet.
+
+### Border Radius
+
+- **Small elements** (buttons, inputs, badges): `rounded-md` (6px) -- not fully sharp, not overly rounded
+- **Cards and panels**: `rounded-lg` (8px)
+- **Modals and overlays**: `rounded-xl` (12px)
+- **Avatars**: `rounded-full` (keep circular)
+- **No pill shapes** -- avoid `rounded-full` on buttons; it feels too playful for the scholarly tone
+
+### Shadows
+
+Use warm-tinted shadows rather than default neutral ones:
+
+```css
+--shadow-sm: 0 1px 2px 0 rgba(28, 25, 23, 0.3);
+--shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.4), 0 2px 4px -2px rgba(28, 25, 23, 0.3);
+--shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.5), 0 4px 6px -4px rgba(28, 25, 23, 0.4);
+```
+
+### Buttons
+
+| Variant | Background | Text | Border | Hover |
+|---------|-----------|------|--------|-------|
+| **Primary** | `amber-500` | `stone-900` | none | `amber-400` bg |
+| **Secondary** | `stone-700` | `stone-200` | `stone-600` 1px | `stone-600` bg |
+| **Ghost** | transparent | `stone-300` | none | `stone-800` bg |
+| **Danger** | `red-500/10` | `red-400` | `red-500/20` 1px | `red-500/20` bg |
+
+Primary buttons with dark text on amber background create an effect resembling engraved brass plates.
+
+### Tables
+
+- **Header row:** `stone-800` background, `stone-300` text, `font-medium` in Instrument Sans
+- **Body rows:** `stone-900` background, `stone-200` text
+- **Alternating rows:** Alternate between `stone-900` and `stone-900/50` (very subtle)
+- **Hover row:** `stone-800` background with left border accent in `amber-500` (2px)
+- **Selected row:** `amber-500/5` background with `amber-500` left border (2px)
+
+### Sidebar Navigation
+
+- **Background:** `stone-950` (deepest dark)
+- **Nav item (default):** `stone-400` text, no background
+- **Nav item (hover):** `stone-200` text, `stone-800` background
+- **Nav item (active):** `amber-500` text, `amber-500/10` background, `amber-500` left border (2px)
+- **Section headings:** Fraunces font at 11px, `stone-500` text, uppercase tracking-wider
+- **Dividers:** `stone-800` with 1px height
+
+### Form Inputs
+
+- **Background:** `stone-900`
+- **Border:** 1px `stone-600`
+- **Text:** `stone-100`
+- **Placeholder:** `stone-500`
+- **Focus:** `amber-500` ring (2px), `amber-500/10` background tint
+- **Label:** `stone-300`, Instrument Sans 500 weight, 13px
+
+### Cards
+
+- **Background:** `stone-800`
+- **Border:** 1px `stone-700`
+- **Header text:** Fraunces 600, `stone-100`
+- **Body text:** Instrument Sans 400, `stone-300`
+- **Footer:** `stone-800` with top border `stone-700`
+
+### Badges / Tags
+
+- **Default:** `stone-700` bg, `stone-300` text
+- **Success:** `emerald-900` bg, `emerald-400` text
+- **Warning:** `amber-900` bg, `amber-400` text
+- **Danger:** `red-900` bg, `red-400` text
+- **Info:** `sky-900` bg, `sky-400` text
+- **Style:** `rounded-md`, `text-xs`, `font-medium` (Instrument Sans)
+
+### Toasts / Notifications
+
+Follow badge color patterns but with a left border accent (3px) in the status color. Background uses the status color at 5% opacity over `stone-800`.
+
+---
+
+## Implementation Notes for Tailwind / NuxtUI 4
+
+### CSS Custom Properties
+
+```css
+:root {
+  /* Botanical Observatory Theme */
+  --ui-bg: oklch(0.205 0.006 56.043);           /* stone-900 */
+  --ui-bg-elevated: oklch(0.269 0.006 56.043);  /* stone-800 */
+  --ui-bg-muted: oklch(0.371 0.006 56.043);     /* stone-700 */
+  --ui-border: oklch(0.444 0.006 56.043);        /* stone-600 */
+  --ui-text: oklch(0.985 0.002 106.424);         /* stone-50 */
+  --ui-text-muted: oklch(0.709 0.01 56.259);     /* stone-400 */
+  --ui-primary: oklch(0.769 0.188 70.08);        /* amber-500 */
+  --ui-primary-hover: oklch(0.828 0.175 74.011); /* amber-400 */
+}
+```
+
+### NuxtUI 4 App Config Theme Mapping
+
+```typescript
+// app.config.ts
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'amber',
+      secondary: 'stone',
+      success: 'emerald',
+      info: 'sky',
+      warning: 'yellow',
+      error: 'red',
+      neutral: 'stone'  // warm neutrals throughout
+    }
+  }
+})
+```
+
+### Key Tailwind Utility Classes
+
+```
+/* Page background */        bg-stone-900
+/* Card surface */           bg-stone-800 border border-stone-700
+/* Primary button */         bg-amber-500 text-stone-900 hover:bg-amber-400
+/* Heading text */           font-[Fraunces] text-stone-50
+/* Body text */              font-[Instrument_Sans] text-stone-300
+/* Muted text */             text-stone-400
+/* Focus ring */             focus:ring-2 focus:ring-amber-500
+/* Active nav indicator */   border-l-2 border-amber-500 bg-amber-500/10
+```
+
+---
+
+## Summary
+
+The **Botanical Observatory** theme transforms the admin panel from a utilitarian tool into a place that feels curated and considered. By combining:
+
+- **Warm stone darks** instead of cold slate/zinc grays
+- **Amber/brass accents** instead of corporate blue
+- **Fraunces serif headings** for scholarly distinction
+- **Instrument Sans body** for clean readability
+- **Generous spacing** and warm shadows
+
+...the result is an admin interface that feels like it belongs in a naturalist's mahogany-paneled study, yet remains completely functional for daily CMS operations. It's the theme equivalent of choosing a leather-bound notebook over a spiral-bound one -- both work, but one makes the work feel more meaningful.

package/app/pages/motor-admin/users/CLAUDE.md

@@ -0,0 +1,17 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 12, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #24263 | 3:10 PM | 🟣 | Users Create Form with Cached Select Options | ~329 |
+
+### Feb 18, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #27270 | 5:27 PM | 🔵 | Users Grid Page - Bulk Actions Reference Implementation | ~244 |
+</claude-mem-context>

package/app/pages/motor-admin/users/[id]/CLAUDE.md

@@ -0,0 +1,11 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 12, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #24265 | 3:10 PM | 🟣 | Users Edit Form with Cached Select Options and Loading States | ~343 |
+</claude-mem-context>

package/app/pages/motor-admin/users/[id]/edit.vue

@@ -0,0 +1,83 @@
+<!-- app/pages/motor-admin/users/[id]/edit.vue -->
+<script setup lang="ts">
+import { userFormMeta } from '../../../../types/generated/form-meta'
+import { userEditFormConfig, userSelectOptionConfigs, userEditExtraFields } from '@motor-cms/ui-core/app/types/config/user'
+
+definePageMeta({ layout: 'default', permission: 'users.write' })
+
+const route = useRoute()
+const { t } = useI18n()
+
+const { fields: rawFields, schema, groups, state, loading, fetching, fetchError, formRef, selectOptions, selectOptionsLoading, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
+  apiEndpoint: '/api/v2/users',
+  routePrefix: '/motor-admin/users',
+  translationPrefix: 'motor-admin.users',
+  formMeta: userFormMeta,
+  formConfig: userEditFormConfig,
+  mode: 'edit',
+  id: route.params.id as string,
+  selectOptionConfigs: userSelectOptionConfigs,
+  extraFields: userEditExtraFields(t),
+  extraState: { change_password: false, password: '', password_confirmation: '' },
+  beforeSubmit: (data) => {
+    // Remove client-only fields from payload
+    delete data.change_password
+    delete data.password_confirmation
+
+    // Only send password if toggle is on and value is set
+    if (!state.change_password || !data.password) {
+      delete data.password
+    }
+  }
+})
+
+// Add password confirmation validation to schema
+const refinedSchema = schema.superRefine((data, ctx) => {
+  if (data.change_password && data.password && data.password !== data.password_confirmation) {
+    ctx.addIssue({
+      code: 'custom',
+      path: ['password_confirmation'],
+      message: t('motor-admin.users.password_mismatch')
+    })
+  }
+})
+
+// Make fields reactive for toggle visibility
+const fields = reactive(rawFields)
+
+const passwordField = fields.find(f => f.key === 'password')
+const confirmField = fields.find(f => f.key === 'password_confirmation')
+
+watchEffect(() => {
+  if (passwordField) passwordField.hidden = !state.change_password
+  if (confirmField) confirmField.hidden = !state.change_password
+})
+</script>
+
+<template>
+  <FormPage
+    :title="t('motor-admin.users.edit_title')"
+    back-route="/motor-admin/users"
+    :loading="fetching"
+    :error="fetchError"
+  >
+    <FormBase
+      ref="formRef"
+      v-model:state="state"
+      :fields="fields"
+      :schema="refinedSchema"
+      :groups="groups"
+      :select-options="selectOptions"
+      :select-options-loading="selectOptionsLoading"
+      :loading="loading"
+      :delete-record="deleteRecord"
+      :deleting="deleting"
+      cancel-route="/motor-admin/users"
+      show-save-and-continue
+      show-save-and-new
+      @submit="onSubmit"
+      @save-and-continue="onSaveAndContinue"
+      @save-and-new="onSaveAndNew"
+    />
+  </FormPage>
+</template>

package/app/pages/motor-admin/users/create.vue

@@ -0,0 +1,40 @@
+<!-- app/pages/motor-admin/users/create.vue -->
+<script setup lang="ts">
+import { userFormMeta } from '../../../types/generated/form-meta'
+import { userFormConfig, userSelectOptionConfigs } from '@motor-cms/ui-core/app/types/config/user'
+
+definePageMeta({ layout: 'default', permission: 'users.write' })
+
+const { t } = useI18n()
+const { fields, schema, groups, state, loading, selectOptions, selectOptionsLoading, formRef, onSubmit, onSaveAndNew } = await useEntityForm({
+  apiEndpoint: '/api/v2/users',
+  routePrefix: '/motor-admin/users',
+  translationPrefix: 'motor-admin.users',
+  formMeta: userFormMeta,
+  formConfig: userFormConfig,
+  mode: 'create',
+  selectOptionConfigs: userSelectOptionConfigs
+})
+</script>
+
+<template>
+  <FormPage
+    :title="t('motor-admin.users.create_title')"
+    back-route="/motor-admin/users"
+  >
+    <FormBase
+      ref="formRef"
+      v-model:state="state"
+      :fields="fields"
+      :schema="schema"
+      :groups="groups"
+      :select-options="selectOptions"
+      :select-options-loading="selectOptionsLoading"
+      :loading="loading"
+      cancel-route="/motor-admin/users"
+      show-save-and-new
+      @submit="onSubmit"
+      @save-and-new="onSaveAndNew"
+    />
+  </FormPage>
+</template>

package/app/pages/motor-admin/users/index.vue

@@ -0,0 +1,66 @@
+<!-- app/pages/motor-admin/users/index.vue -->
+<script setup lang="ts">
+import type { components } from '@motor-cms/ui-core/app/types/generated/api'
+import type { BulkActionDef } from '@motor-cms/ui-core/app/types/grid'
+import { userMeta } from '../../../types/generated/grid-meta'
+
+definePageMeta({ permission: 'users.read' })
+
+type User = components['schemas']['UserResource']
+
+const client = useSanctumClient()
+const { t } = useI18n()
+
+const columns = columnsFromMeta<User>(userMeta, t, {
+  pick: ['avatar', 'name', 'email', 'roles'],
+  overrides: {
+    avatar: { label: '', width: '60px', hideable: false },
+    email: { sortable: true }
+  }
+})
+
+columns.push(createdAtColumn(t))
+
+const filters = [useClientFilter()]
+
+const bulkActions: BulkActionDef[] = [
+  {
+    key: 'delete',
+    label: t('motor-core.grid.delete_selected'),
+    icon: 'i-lucide-trash-2',
+    color: 'error',
+    permission: 'users.delete',
+    confirm: count => t('motor-core.grid.confirm_delete', { count }),
+    handler: async (ids) => {
+      await client('/api/v2/users/bulk-delete', {
+        method: 'POST',
+        body: { ids }
+      })
+    }
+  }
+]
+
+const { fetch: fetchUsers } = useGridData<User>('/api/v2/users')
+</script>
+
+<template>
+  <GridPage
+    :title="t('motor-admin.users.title')"
+    :subtitle="t('motor-admin.users.subtitle')"
+    add-route="/motor-admin/users/create"
+    :add-label="t('motor-admin.users.add')"
+    write-permission="users.write"
+  >
+    <GridBase
+      id="users-grid"
+      :fetch="fetchUsers"
+      :columns="columns"
+      :filters="filters"
+      :bulk-actions="bulkActions"
+      base-path="/motor-admin/users"
+      :row-click-to="(row: any) => `/motor-admin/users/${row.id}/edit`"
+      write-permission="users.write"
+      delete-permission="users.delete"
+    />
+  </GridPage>
+</template>