fastapi-admin-kit 0.1.0__py3-none-any.whl

fastapi_admin_kit/templates/pages/role_form.html

@@ -0,0 +1,75 @@
+{# pages/role_form.html — role edit with permission matrix #}
+{% extends "base.html" %}
+
+{% block title %}{% if role %}Edit Role{% else %}Create Role{% endif %} — {{ title | default("Admin") }}{% endblock %}
+
+{% block breadcrumb %}
+{{ super() }}
+<span class="text-[var(--color-gray-400)]">/</span>
+<a href="{{ admin_path | default('/admin') }}/roles/" class="hover:text-[var(--color-primary-600)] transition-colors">Roles</a>
+<span class="text-[var(--color-gray-400)]">/</span>
+<span class="text-[var(--color-gray-900)] font-medium">{% if role %}{{ role.name }}{% else %}Create{% endif %}</span>
+{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+  <div class="page-header">
+    <div class="page-header-left">
+      <a href="{{ admin_path | default('/admin') }}/roles/" class="page-header-back">
+        {{ icon("chevron-left") }}
+        Roles
+      </a>
+      <h1 class="page-header-title">
+        {% if role %}Edit Role{% else %}New Role{% endif %}
+      </h1>
+      {% if role %}
+      <p class="page-header-subtitle">
+        <span class="mono">#{{ role.id }}</span> — {{ role.name }}
+      </p>
+      {% endif %}
+    </div>
+  </div>
+
+  <form method="post" action="{{ admin_path | default('/admin') }}/roles{% if role %}/{{ role.id }}{% endif %}"
+        class="space-y-6">
+    <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
+    <div class="bg-white rounded-xl border border-[var(--color-gray-200)] p-6">
+      <h2 class="text-lg font-semibold text-[var(--color-gray-900)] mb-4">Role Details</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <label for="name" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">Name</label>
+          <input type="text" id="name" name="name" value="{{ role.name | default('') }}" required
+                 class="form-input w-full px-4 py-2.5 rounded-lg border border-[var(--color-gray-300)] bg-white text-[var(--color-gray-900)] focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] transition-colors">
+        </div>
+        <div>
+          <label for="description" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">Description</label>
+          <input type="text" id="description" name="description" value="{{ role.description | default('') }}"
+                 class="form-input w-full px-4 py-2.5 rounded-lg border border-[var(--color-gray-300)] bg-white text-[var(--color-gray-900)] focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] transition-colors">
+        </div>
+      </div>
+    </div>
+
+    <div class="bg-white rounded-xl border border-[var(--color-gray-200)]">
+      <div class="px-6 py-4 border-b border-[var(--color-gray-200)]">
+        <h2 class="text-lg font-semibold text-[var(--color-gray-900)]">Permissions</h2>
+        <p class="mt-1 text-sm text-[var(--color-gray-500)]">Select tables and configure actions for this role.</p>
+      </div>
+
+      <div class="p-6">
+        {% include "partials/permission_widget.html" with context %}
+      </div>
+    </div>
+
+    <div class="sticky bottom-0 bg-white border border-[var(--color-gray-200)] rounded-xl p-4 flex items-center justify-end gap-3">
+      <a href="{{ admin_path | default('/admin') }}/roles/"
+         class="px-4 py-2 rounded-lg border border-[var(--color-gray-300)] text-sm text-[var(--color-gray-700)] hover:bg-[var(--color-gray-50)] transition-colors">
+        Cancel
+      </a>
+      <button type="submit"
+              class="btn-primary px-4 py-2 rounded-lg bg-[var(--color-primary-600)] text-white text-sm font-medium hover:bg-[var(--color-primary-500)] transition-colors">
+        {% if role %}Save Changes{% else %}Create Role{% endif %}
+      </button>
+    </div>
+  </form>
+</div>
+{% endblock %}

fastapi_admin_kit/templates/pages/roles/form.html

@@ -0,0 +1,117 @@
+{% extends "base.html" %}
+
+{% block title %}{% if role %}Edit Role{% else %}Create Role{% endif %} — Admin{% endblock %}
+
+{% block content %}
+<a href="{{ request.app.state.admin_config.admin_path }}/roles" class="back-link">
+    {{ icon("chevron-left", size="20px") }}
+    Back to Roles
+</a>
+
+<div class="page-header">
+    <div class="page-header__left">
+        <h1 class="page-header__title">{% if role %}Edit Role{% else %}Create Role{% endif %}</h1>
+        {% if role %}
+        <p class="page-header__subtitle">Editing: <strong style="color: var(--text-primary);">{{ role.name }}</strong></p>
+        {% endif %}
+    </div>
+</div>
+
+<form method="post">
+    <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
+    <!-- Role details -->
+    <div class="fieldset" style="margin-bottom: var(--space-5); max-width: var(--form-max-width);">
+        <div class="fieldset__header">
+            <h3 class="fieldset__title">Role Details</h3>
+        </div>
+        <div class="fieldset__fields">
+            <div class="field-wrapper">
+                <label for="role_name" class="field-label">Role Name</label>
+                <input type="text" id="role_name" name="role_name" required
+                       value="{% if role %}{{ role.name }}{% endif %}"
+                       class="form-input">
+            </div>
+            <div class="field-wrapper field-wrapper--full">
+                <label for="description" class="field-label">Description</label>
+                <textarea id="description" name="description" rows="2"
+                          class="form-textarea">{% if role %}{{ role.description or '' }}{% endif %}</textarea>
+            </div>
+        </div>
+    </div>
+
+    <!-- Permissions matrix -->
+    <div class="fieldset" style="margin-bottom: var(--space-5); max-width: var(--form-max-width);">
+        <div class="fieldset__header">
+            <h3 class="fieldset__title">Model Permissions</h3>
+        </div>
+        <div class="permissions-matrix" style="border: none;">
+            <table>
+                <thead>
+                    <tr>
+                        <th style="text-align: left;">Model</th>
+                        <th>View</th>
+                        <th>Create</th>
+                        <th>Edit</th>
+                        <th>Delete</th>
+                        <th style="text-align: left;">Fields</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for model in models %}
+                    {% set table_name = model.table_name %}
+                    {% set perm = permissions.get(table_name) %}
+                    {% set f_perms = field_permissions.get(table_name, {}) %}
+                    <tr>
+                        <td style="font-weight: var(--font-medium);">{{ model.verbose_name_plural }}</td>
+                        <td><input type="checkbox" name="perm[{{ table_name }}][view]" class="matrix-checkbox" {% if perm and perm.can_view %}checked{% endif %}></td>
+                        <td><input type="checkbox" name="perm[{{ table_name }}][create]" class="matrix-checkbox" {% if perm and perm.can_create %}checked{% endif %}></td>
+                        <td><input type="checkbox" name="perm[{{ table_name }}][edit]" class="matrix-checkbox" {% if perm and perm.can_edit %}checked{% endif %}></td>
+                        <td><input type="checkbox" name="perm[{{ table_name }}][delete]" class="matrix-checkbox" {% if perm and perm.can_delete %}checked{% endif %}></td>
+                        <td>
+                            <details>
+                                <summary style="cursor: pointer; color: var(--primary-500); font-size: var(--text-xs);">Configure</summary>
+                                <div style="margin-top: 8px; display: flex; flex-direction: column; gap: 4px;">
+                                    {% for field in model.form_fields %}
+                                    {% set field_key = field.name %}
+                                    {% set fp = f_perms.get(field_key) %}
+                                    <div style="display: flex; align-items: center; gap: 8px;">
+                                        <span style="font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-secondary); min-width: 100px;">{{ field.label or field.name }}</span>
+                                        <label style="display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-2xs); color: var(--text-secondary);">
+                                            <input type="checkbox" name="field_perm[{{ table_name }}][{{ field_key }}][view]" class="matrix-checkbox" style="width: 14px; height: 14px;" {% if fp and fp.can_view %}checked{% endif %}>
+                                            View
+                                        </label>
+                                        <label style="display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-2xs); color: var(--text-secondary);">
+                                            <input type="checkbox" name="field_perm[{{ table_name }}][{{ field_key }}][edit]" class="matrix-checkbox" style="width: 14px; height: 14px;" {% if fp and fp.can_edit %}checked{% endif %}>
+                                            Edit
+                                        </label>
+                                    </div>
+                                    {% endfor %}
+                                </div>
+                            </details>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <!-- Save bar -->
+    <div class="form-save-bar" style="margin: var(--space-8) calc(-1 * var(--content-padding)) 0; width: calc(100% + var(--content-padding) * 2);">
+        <div class="form-save-bar__left">
+            {% if role %}
+            <button type="button" class="btn btn-danger btn-sm"
+                    onclick="confirmAction('Delete Role', 'Are you sure you want to delete this role?', () => { window.location='{{ request.app.state.admin_config.admin_path }}/roles/{{ role.id }}/delete'; })">
+                Delete Role
+            </button>
+            {% endif %}
+        </div>
+        <div class="form-save-bar__right">
+            <a href="{{ request.app.state.admin_config.admin_path }}/roles" class="btn btn-ghost">Cancel</a>
+            <button type="submit" class="btn btn-primary">
+                Save Role
+            </button>
+        </div>
+    </div>
+</form>
+{% endblock %}

fastapi_admin_kit/templates/pages/roles/list.html

@@ -0,0 +1,69 @@
+{% extends "base.html" %}
+
+{% block title %}Roles — Admin{% endblock %}
+
+{% block content %}
+<div class="page-header">
+    <div class="page-header__left">
+        <h1 class="page-header__title">Roles</h1>
+        <p class="page-header__subtitle">Manage user roles and permissions.</p>
+    </div>
+    <div class="page-header__actions">
+        <a href="{{ request.app.state.admin_config.admin_path }}/roles/create" class="btn btn-primary">
+            {{ icon("plus", size="15px") }}
+            New Role
+        </a>
+    </div>
+</div>
+
+<div class="table-container">
+    <table class="table-wrapper">
+        <thead>
+            <tr>
+                <th class="table__th">Name</th>
+                <th class="table__th">Description</th>
+                <th class="table__th">Users</th>
+                <th class="table__th table__th--actions"></th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for data in roles %}
+            <tr>
+                <td class="table__cell" style="font-weight: var(--font-medium);">{{ data.role.name }}</td>
+                <td class="table__cell" style="color: var(--text-secondary);">{{ data.role.description or '—' }}</td>
+                <td class="table__cell table__cell--mono">{{ data.user_count }}</td>
+                <td class="table__cell table__cell--actions">
+                    <div class="table-actions">
+                        <a href="{{ request.app.state.admin_config.admin_path }}/roles/{{ data.role.id }}"
+                           class="table-action">Edit</a>
+                        <span class="table-actions__separator"></span>
+                        <form method="post" action="{{ request.app.state.admin_config.admin_path }}/roles/{{ data.role.id }}/delete"
+                               class="inline">
+                            <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
+                            <button type="button"
+                                    class="table-action table-action--danger"
+                                    {% if data.user_count > 0 %}disabled{% endif %}
+                                    onclick="confirmAction('Delete Role', 'Are you sure you want to delete this role?', () => this.closest('form').submit())">
+                                Delete
+                            </button>
+                        </form>
+                    </div>
+                </td>
+            </tr>
+            {% endfor %}
+
+            {% if not roles %}
+            <tr>
+                <td colspan="4">
+                    <div class="empty-state">
+                        {{ icon("shield-check", css_class="empty-state__icon", size="48px") }}
+                        <h3 class="empty-state__title">No roles found</h3>
+                        <p class="empty-state__text">Create your first role to get started.</p>
+                    </div>
+                </td>
+            </tr>
+            {% endif %}
+        </tbody>
+    </table>
+</div>
+{% endblock %}

fastapi_admin_kit/templates/pages/roles.html

@@ -0,0 +1,77 @@
+{# pages/roles.html — role list page #}
+{% extends "base.html" %}
+
+{% block title %}Roles — {{ title | default("Admin") }}{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+  <div class="page-header">
+    <div class="page-header-left">
+      <h1 class="page-header-title">Roles</h1>
+      <p class="page-header-subtitle">Manage roles and permissions</p>
+    </div>
+    <div class="page-header-right">
+      <a href="{{ admin_path | default('/admin') }}/roles/create" class="btn btn-primary">
+        + New Role
+      </a>
+    </div>
+  </div>
+
+  <div class="bg-white rounded-xl border border-[var(--color-gray-200)]">
+    <div class="overflow-x-auto">
+      <table class="table-wrapper w-full">
+        <thead>
+          <tr class="border-b border-[var(--color-gray-200)]">
+            <th class="px-6 py-3 text-left text-xs font-semibold text-[var(--color-gray-500)] uppercase tracking-wider">Name</th>
+            <th class="px-6 py-3 text-left text-xs font-semibold text-[var(--color-gray-500)] uppercase tracking-wider">Description</th>
+            <th class="px-6 py-3 text-left text-xs font-semibold text-[var(--color-gray-500)] uppercase tracking-wider">Users</th>
+            <th class="px-6 py-3 text-right text-xs font-semibold text-[var(--color-gray-500)] uppercase tracking-wider">Actions</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-[var(--color-gray-100)]">
+          {% if roles %}
+          {% for role in roles %}
+          <tr class="hover:bg-[var(--color-gray-50)] transition-colors">
+            <td class="px-6 py-4">
+              <a href="{{ admin_path | default('/admin') }}/roles/{{ role.id }}" class="text-sm font-medium text-[var(--color-primary-600)] hover:underline">
+                {{ role.name }}
+              </a>
+            </td>
+            <td class="px-6 py-4 text-sm text-[var(--color-gray-600)]">{{ role.description | default("-") }}</td>
+            <td class="px-6 py-4 text-sm text-[var(--color-gray-600)]">{{ role.user_count }} user{{ "s" if role.user_count != 1 else "" }}</td>
+            <td class="px-6 py-4 text-right text-sm space-x-2">
+              <a href="{{ admin_path | default('/admin') }}/roles/{{ role.id }}"
+                 class="text-[var(--color-primary-600)] hover:text-[var(--color-primary-500)] font-medium transition-colors">
+                Edit
+              </a>
+              {% if role.user_count == 0 %}
+              <form method="post" action="{{ admin_path | default('/admin') }}/roles/{{ role.id }}/delete" class="inline">
+                <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
+                <button type="button"
+                        class="text-[var(--color-danger)] hover:text-red-700 font-medium transition-colors"
+                        onclick="confirmAction('Delete Role', 'Are you sure you want to delete this role?', () => this.closest('form').submit())">
+                  Delete
+                </button>
+              </form>
+              {% endif %}
+            </td>
+          </tr>
+          {% endfor %}
+          {% else %}
+          <tr>
+            <td colspan="4" class="px-6 py-12 text-center">
+              {{ icon("users", size="48px") }}
+              <p class="mt-4 text-sm text-[var(--color-gray-500)]">No roles defined</p>
+              <a href="{{ admin_path | default('/admin') }}/roles/create"
+                 class="mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--color-primary-600)] text-white text-sm font-medium hover:bg-[var(--color-primary-500)] transition-colors">
+                + Create your first role
+              </a>
+            </td>
+          </tr>
+          {% endif %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+{% endblock %}

fastapi_admin_kit/templates/pages/settings/theme.html

@@ -0,0 +1,255 @@
+{# pages/settings/theme.html — visual theme builder #}
+{% extends "base.html" %}
+
+{% block title %}Theme Settings — {{ title | default("Admin") }}{% endblock %}
+
+{% block content %}
+<div x-data="themeBuilder()" class="space-y-6">
+  <div class="page-header">
+    <div class="page-header-left">
+      <h1 class="page-header-title">Theme Settings</h1>
+      <p class="page-header-subtitle">Customize the look and feel of your admin panel</p>
+    </div>
+  </div>
+
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+    {# Controls Panel #}
+    <div class="lg:col-span-2 space-y-6">
+      {# Preset Selector #}
+      <div class="fieldset">
+        <div class="fieldset__header">
+          <h2 class="fieldset__title">Theme Preset</h2>
+        </div>
+        <div class="grid grid-cols-3 gap-3">
+          {% for p in ["editorial", "modern", "midnight", "paper", "forest", "minimal"] %}
+          <button @click="applyPreset('{{ p }}')"
+                  :class="preset === '{{ p }}' ? 'ring-2 ring-[var(--primary-500)]' : ''"
+                  class="p-4 rounded-lg border border-[var(--surface-border)] text-left transition-all hover:border-[var(--primary-400)]">
+            <div class="flex items-center gap-2 mb-2">
+              <span class="w-4 h-4 rounded-full border border-[var(--surface-border)]"
+                    :style="'background: ' + presets['{{ p }}'].primary_color"></span>
+              <span class="text-sm font-medium">{{ p | title }}</span>
+            </div>
+            <div class="flex gap-1">
+              <span class="w-4 h-3 rounded-sm" :style="'background: ' + presets['{{ p }}'].surface_base"></span>
+              <span class="w-4 h-3 rounded-sm" :style="'background: ' + presets['{{ p }}'].surface_raised"></span>
+              <span class="w-4 h-3 rounded-sm" :style="'background: ' + presets['{{ p }}'].text_primary"></span>
+            </div>
+          </button>
+          {% endfor %}
+        </div>
+      </div>
+
+      {# Color Customization #}
+      <div class="fieldset">
+        <div class="fieldset__header">
+          <h2 class="fieldset__title">Colors</h2>
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="field-label">Primary Color</label>
+            <div class="flex items-center gap-2">
+              <input type="color" x-model="customizations.primary_color" class="h-10 w-14 rounded border border-[var(--surface-border)] cursor-pointer">
+              <input type="text" x-model="customizations.primary_color" class="form-input flex-1">
+            </div>
+          </div>
+          <div>
+            <label class="field-label">Surface Background</label>
+            <div class="flex items-center gap-2">
+              <input type="color" x-model="customizations.surface_base" class="h-10 w-14 rounded border border-[var(--surface-border)] cursor-pointer">
+              <input type="text" x-model="customizations.surface_base" class="form-input flex-1">
+            </div>
+          </div>
+          <div>
+            <label class="field-label">Card Background</label>
+            <div class="flex items-center gap-2">
+              <input type="color" x-model="customizations.surface_raised" class="h-10 w-14 rounded border border-[var(--surface-border)] cursor-pointer">
+              <input type="text" x-model="customizations.surface_raised" class="form-input flex-1">
+            </div>
+          </div>
+          <div>
+            <label class="field-label">Text Color</label>
+            <div class="flex items-center gap-2">
+              <input type="color" x-model="customizations.text_primary" class="h-10 w-14 rounded border border-[var(--surface-border)] cursor-pointer">
+              <input type="text" x-model="customizations.text_primary" class="form-input flex-1">
+            </div>
+          </div>
+          <div>
+            <label class="field-label">Border Color</label>
+            <div class="flex items-center gap-2">
+              <input type="color" x-model="customizations.border_color" class="h-10 w-14 rounded border border-[var(--surface-border)] cursor-pointer">
+              <input type="text" x-model="customizations.border_color" class="form-input flex-1">
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {# Border Radius #}
+      <div class="fieldset">
+        <div class="fieldset__header">
+          <h2 class="fieldset__title">Border Radius</h2>
+        </div>
+        <div class="grid grid-cols-3 gap-4">
+          <div>
+            <label class="field-label">Small</label>
+            <input type="text" x-model="customizations.radius_sm" class="form-input">
+          </div>
+          <div>
+            <label class="field-label">Medium</label>
+            <input type="text" x-model="customizations.radius_md" class="form-input">
+          </div>
+          <div>
+            <label class="field-label">Large</label>
+            <input type="text" x-model="customizations.radius_lg" class="form-input">
+          </div>
+        </div>
+      </div>
+
+      {# Feature Toggles #}
+      <div class="fieldset">
+        <div class="fieldset__header">
+          <h2 class="fieldset__title">Features</h2>
+        </div>
+        <div class="space-y-3">
+          <label class="flex items-center gap-3 cursor-pointer">
+            <input type="checkbox" x-model="customizations.show_grain" class="table-checkbox">
+            <span class="text-sm">Show grain texture overlay</span>
+          </label>
+          <label class="flex items-center gap-3 cursor-pointer">
+            <input type="checkbox" x-model="customizations.show_accent_line" class="table-checkbox">
+            <span class="text-sm">Show topbar accent line</span>
+          </label>
+        </div>
+      </div>
+
+      {# Save Button #}
+      <div class="flex items-center gap-3">
+        <button @click="save()" class="btn btn-primary">
+          Save Theme
+        </button>
+        <button @click="reset()" class="btn btn-secondary">
+          Reset to Default
+        </button>
+        <span x-show="saved" x-transition class="text-sm text-[var(--success-500)]">Saved!</span>
+      </div>
+    </div>
+
+    {# Live Preview Panel #}
+    <div class="space-y-4">
+      <div class="fieldset">
+        <div class="fieldset__header">
+          <h2 class="fieldset__title">Preview</h2>
+        </div>
+        <div class="space-y-3 p-4 rounded-lg border border-[var(--surface-border)]"
+             :style="'background: ' + customizations.surface_base + '; color: ' + customizations.text_primary">
+          <div class="flex items-center gap-2">
+            <div class="w-8 h-8 rounded-full" :style="'background: ' + customizations.primary_color"></div>
+            <span class="font-medium">Sample Card</span>
+          </div>
+          <div class="p-3 rounded-lg" :style="'background: ' + customizations.surface_raised + '; border: 1px solid ' + customizations.border_color">
+            <div class="text-xs opacity-60 mb-1">Card Title</div>
+            <div class="text-2xl font-bold" :style="'color: ' + customizations.primary_color">1,234</div>
+          </div>
+          <div class="flex gap-2">
+            <button class="px-3 py-1.5 rounded text-xs text-white" :style="'background: ' + customizations.primary_color">Primary</button>
+            <button class="px-3 py-1.5 rounded text-xs border" :style="'border-color: ' + customizations.border_color + '; color: ' + customizations.text_primary">Secondary</button>
+          </div>
+        </div>
+      </div>
+
+      {# Export #}
+      <div class="fieldset">
+        <div class="fieldset__header">
+          <h2 class="fieldset__title">Python Config</h2>
+        </div>
+        <pre class="text-xs font-mono p-3 rounded-lg bg-[var(--surface-inset)] overflow-auto max-h-64"><code x-text="exportConfig()"></code></pre>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function themeBuilder() {
+  return {
+    preset: '{{ theme_preset | default("editorial") }}',
+    saved: false,
+    presets: {
+      editorial: { primary_color: '#059669', surface_base: '#FAF8F5', surface_raised: '#FFFFFF', text_primary: '#1C1917', border_color: '#E8E4DE', radius_sm: '3px', radius_md: '5px', radius_lg: '8px' },
+      modern: { primary_color: '#6366F1', surface_base: '#F8FAFC', surface_raised: '#FFFFFF', text_primary: '#0F172A', border_color: '#E2E8F0', radius_sm: '6px', radius_md: '8px', radius_lg: '12px' },
+      midnight: { primary_color: '#818CF8', surface_base: '#0B0F19', surface_raised: '#151B2B', text_primary: '#E2E8F0', border_color: '#2A3248', radius_sm: '4px', radius_md: '6px', radius_lg: '10px' },
+      paper: { primary_color: '#059669', surface_base: '#FAF8F5', surface_raised: '#FFFFFF', text_primary: '#1C1917', border_color: '#E8E4DE', radius_sm: '3px', radius_md: '5px', radius_lg: '8px' },
+      forest: { primary_color: '#22C55E', surface_base: '#F0FDF4', surface_raised: '#FFFFFF', text_primary: '#14532D', border_color: '#BBF7D0', radius_sm: '4px', radius_md: '6px', radius_lg: '10px' },
+      minimal: { primary_color: '#404040', surface_base: '#FFFFFF', surface_raised: '#FFFFFF', text_primary: '#171717', border_color: '#E5E5E5', radius_sm: '0px', radius_md: '0px', radius_lg: '0px' },
+    },
+    customizations: {
+      primary_color: '#059669',
+      surface_base: '#FAF8F5',
+      surface_raised: '#FFFFFF',
+      text_primary: '#1C1917',
+      border_color: '#E8E4DE',
+      radius_sm: '3px',
+      radius_md: '5px',
+      radius_lg: '8px',
+      show_grain: true,
+      show_accent_line: true,
+    },
+
+    init() {
+      const saved = JSON.parse(localStorage.getItem('admin_theme_custom') || 'null');
+      if (saved) {
+        Object.assign(this.customizations, saved);
+        this.preset = saved.preset || this.preset;
+      }
+    },
+
+    applyPreset(name) {
+      this.preset = name;
+      const p = this.presets[name];
+      if (p) {
+        this.customizations.primary_color = p.primary_color;
+        this.customizations.surface_base = p.surface_base;
+        this.customizations.surface_raised = p.surface_raised;
+        this.customizations.text_primary = p.text_primary;
+        this.customizations.border_color = p.border_color;
+        this.customizations.radius_sm = p.radius_sm;
+        this.customizations.radius_md = p.radius_md;
+        this.customizations.radius_lg = p.radius_lg;
+      }
+      this.applyLive();
+    },
+
+    applyLive() {
+      const root = document.documentElement;
+      root.style.setProperty('--primary-500', this.customizations.primary_color);
+      root.style.setProperty('--surface-base', this.customizations.surface_base);
+      root.style.setProperty('--surface-raised', this.customizations.surface_raised);
+      root.style.setProperty('--text-primary', this.customizations.text_primary);
+      root.style.setProperty('--surface-border', this.customizations.border_color);
+      root.style.setProperty('--radius-sm', this.customizations.radius_sm);
+      root.style.setProperty('--radius-md', this.customizations.radius_md);
+      root.style.setProperty('--radius-lg', this.customizations.radius_lg);
+    },
+
+    save() {
+      localStorage.setItem('admin_theme_preset', this.preset);
+      localStorage.setItem('admin_theme_custom', JSON.stringify({ ...this.customizations, preset: this.preset }));
+      document.documentElement.setAttribute('data-preset', this.preset);
+      this.applyLive();
+      this.saved = true;
+      setTimeout(() => this.saved = false, 2000);
+    },
+
+    reset() {
+      localStorage.removeItem('admin_theme_preset');
+      localStorage.removeItem('admin_theme_custom');
+      document.documentElement.setAttribute('data-preset', 'editorial');
+      location.reload();
+    },
+
+    exportConfig() {
+      return `from fastapi_admin_kit import Admin\nfrom fastapi_admin_kit.config import ThemeConfig\n\nadmin = Admin(\n    theme=ThemeConfig(\n        preset="${this.preset}",\n        primary_color="${this.customizations.primary_color}",\n        surface_base="${this.customizations.surface_base}",\n        surface_raised="${this.customizations.surface_raised}",\n        text_primary="${this.customizations.text_primary}",\n        border_color="${this.customizations.border_color}",\n        radius_sm="${this.customizations.radius_sm}",\n        radius_md="${this.customizations.radius_md}",\n        radius_lg="${this.customizations.radius_lg}",\n        show_grain_texture=${this.customizations.show_grain},\n        show_accent_line=${this.customizations.show_accent_line},\n    ),\n)`;
+    },
+  };
+}
+</script>
+{% endblock %}