admindb 1.0.1 → 1.0.3

package/dist/views/pages/triggers.hbs

@@ -1,162 +1,162 @@
-<div class="space-y-6">
-  <!-- Header -->
-  <div class="flex flex-wrap items-center justify-between gap-3">
-    <div>
-      <p class="text-sm font-semibold uppercase tracking-wider text-primary">Schema</p>
-      <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Triggers</h1>
-      <p class="mt-1.5 text-sm text-base-content/55">Automated actions that run when rows in a table are inserted, updated, or deleted.</p>
-    </div>
-    <div class="flex gap-2">
-      <a href="{{basePath}}/views" class="btn btn-ghost btn-sm gap-1.5">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
-        Views
-      </a>
-      {{#unless readonly}}
-        <button id="new-trigger" type="button" class="btn btn-primary btn-sm gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
-          New trigger
-        </button>
-      {{/unless}}
-    </div>
-  </div>
-
-  <!-- New trigger form -->
-  <div id="new-trigger-panel" class="app-card hidden p-5">
-    <div class="grid gap-4 lg:grid-cols-[1fr_360px]">
-      <div class="space-y-4">
-        <div class="grid gap-4 sm:grid-cols-3">
-          <div>
-            <label class="field-label" for="trigger-name">Trigger name</label>
-            <input id="trigger-name" class="field-input font-mono" placeholder="e.g. audit_user_updates" spellcheck="false" autocomplete="off" />
-          </div>
-          <div>
-            <label class="field-label" for="trigger-table">Table</label>
-            <select id="trigger-table" class="field-select font-mono">
-              <option value="">— select a table —</option>
-              {{#each tables}}
-                <option value="{{this}}">{{this}}</option>
-              {{/each}}
-            </select>
-          </div>
-          <div>
-            <label class="field-label" for="trigger-timing">Timing</label>
-            <select id="trigger-timing" class="field-select">
-              <option value="BEFORE">BEFORE</option>
-              <option value="AFTER" selected>AFTER</option>
-              <option value="INSTEAD OF">INSTEAD OF</option>
-            </select>
-          </div>
-        </div>
-
-        <div>
-          <label class="field-label" for="trigger-event">Event</label>
-          <select id="trigger-event" class="field-select">
-            <option value="INSERT" selected>INSERT</option>
-            <option value="UPDATE">UPDATE</option>
-            <option value="DELETE">DELETE</option>
-          </select>
-          <p class="mt-1 text-xs text-base-content/45">SQLite allows one event per trigger. To react to several, create one trigger per event.</p>
-        </div>
-
-        <div>
-          <label class="field-label" for="trigger-when">WHEN clause <span class="text-base-content/40">(optional)</span></label>
-          <input id="trigger-when" class="field-input font-mono" placeholder="NEW.age >= 18" spellcheck="false" autocomplete="off" />
-          <p class="mt-1 text-xs text-base-content/45">Use <code class="font-mono">NEW.</code> / <code class="font-mono">OLD.</code> to reference row values. Leave empty for “always”.</p>
-        </div>
-
-        <div>
-          <label class="field-label" for="trigger-body">
-            Body
-            <span class="chip chip-type">required</span>
-          </label>
-          <div class="sql-editor-wrap">
-            <div id="trigger-gutter" class="sql-gutter"></div>
-            <textarea id="trigger-body" class="sql-input font-mono" rows="6" spellcheck="false" placeholder="INSERT INTO audit_log (table_name, action, changed_at) VALUES ('users', 'UPDATE', datetime('now'));"></textarea>
-          </div>
-          <p class="mt-1.5 text-xs text-base-content/45">One or more statements, each ended with <code class="font-mono">;</code>. Use <code class="font-mono">NEW.col</code> / <code class="font-mono">OLD.col</code>.</p>
-        </div>
-
-        <div id="trigger-error" class="hidden"></div>
-        <div class="flex gap-2">
-          <button id="create-trigger" type="button" class="btn btn-primary btn-sm gap-1.5">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
-            Create trigger
-          </button>
-          <button id="cancel-trigger" type="button" class="btn btn-ghost btn-sm">Cancel</button>
-        </div>
-      </div>
-      <aside>
-        <div class="app-card overflow-hidden">
-          <div class="flex items-center justify-between border-b border-base-200 bg-base-200/40 px-4 py-3">
-            <h2 class="flex items-center gap-2 text-sm font-semibold text-base-content/60">
-              <span class="grid h-5 w-5 place-items-center rounded-md bg-primary/10 text-primary">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
-              </span>
-              SQL preview
-            </h2>
-          </div>
-          <div class="p-4">
-            <pre id="trigger-preview" class="code-panel hidden"><code id="trigger-preview-code"></code></pre>
-            <p id="trigger-preview-hint" class="text-xs text-base-content/45">The generated <code class="font-mono">CREATE TRIGGER</code> statement appears here as you type.</p>
-          </div>
-        </div>
-      </aside>
-    </div>
-  </div>
-
-  <!-- List -->
-  <div class="app-card overflow-hidden">
-    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 px-5 py-4">
-      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">
-        Triggers
-        <span class="ml-1 rounded-md bg-base-200 px-1.5 py-0.5 text-[10px] text-base-content/50">{{triggers.length}}</span>
-      </h2>
-    </div>
-
-    {{#if triggers.length}}
-      <div class="overflow-x-auto">
-        <table class="table table-sm">
-          <thead>
-            <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
-              <th class="font-semibold">Name</th>
-              <th class="font-semibold">On</th>
-              <th class="font-semibold">Definition</th>
-              <th class="text-right font-semibold">Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            {{#each triggers}}
-              <tr class="hover:bg-primary/[0.04] align-top">
-                <td class="whitespace-nowrap align-middle font-mono text-[13px] font-semibold">{{this.name}}</td>
-                <td class="whitespace-nowrap align-middle font-mono text-[13px] text-primary">{{this.table}}</td>
-                <td class="align-middle">
-                  {{#if this.sql}}
-                    <details class="group">
-                      <summary class="cursor-pointer text-xs font-medium text-primary/80 hover:text-primary">Trigger SQL</summary>
-                      <pre class="mt-1 max-w-[42rem] overflow-x-auto rounded-lg bg-base-200/70 p-2.5 font-mono text-[11px] leading-relaxed text-base-content/70">{{this.sql}}</pre>
-                    </details>
-                  {{else}}
-                    <span class="text-base-content/30">—</span>
-                  {{/if}}
-                </td>
-                <td class="whitespace-nowrap text-right align-middle">
-                  <button type="button" class="btn btn-ghost btn-xs gap-1 text-error trigger-drop" data-trigger="{{this.name}}" {{#if ../readonly}}disabled{{/if}}>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
-                    Drop
-                  </button>
-                </td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
-      </div>
-    {{else}}
-      <div class="px-5 py-10 text-center text-sm text-base-content/45">
-        No triggers yet. {{#unless readonly}}Create one with “New trigger”.{{/unless}}
-      </div>
-    {{/if}}
-  </div>
-</div>
-
-<script id="triggers-config" type="application/json">{{{json config}}}</script>
-<script src="{{basePath}}/js/triggers.js" defer></script>
+<div class="space-y-6">
+  <!-- Header -->
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <div>
+      <p class="text-sm font-semibold uppercase tracking-wider text-primary">Schema</p>
+      <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Triggers</h1>
+      <p class="mt-1.5 text-sm text-base-content/55">Automated actions that run when rows in a table are inserted, updated, or deleted.</p>
+    </div>
+    <div class="flex gap-2">
+      <a href="{{basePath}}/views" class="btn btn-ghost btn-sm gap-1.5">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
+        Views
+      </a>
+      {{#unless readonly}}
+        <button id="new-trigger" type="button" class="btn btn-primary btn-sm gap-1.5">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
+          New trigger
+        </button>
+      {{/unless}}
+    </div>
+  </div>
+
+  <!-- New trigger form -->
+  <div id="new-trigger-panel" class="app-card hidden p-5">
+    <div class="grid gap-4 lg:grid-cols-[1fr_360px]">
+      <div class="space-y-4">
+        <div class="grid gap-4 sm:grid-cols-3">
+          <div>
+            <label class="field-label" for="trigger-name">Trigger name</label>
+            <input id="trigger-name" class="field-input font-mono" placeholder="e.g. audit_user_updates" spellcheck="false" autocomplete="off" />
+          </div>
+          <div>
+            <label class="field-label" for="trigger-table">Table</label>
+            <select id="trigger-table" class="field-select font-mono">
+              <option value="">— select a table —</option>
+              {{#each tables}}
+                <option value="{{this}}">{{this}}</option>
+              {{/each}}
+            </select>
+          </div>
+          <div>
+            <label class="field-label" for="trigger-timing">Timing</label>
+            <select id="trigger-timing" class="field-select">
+              <option value="BEFORE">BEFORE</option>
+              <option value="AFTER" selected>AFTER</option>
+              <option value="INSTEAD OF">INSTEAD OF</option>
+            </select>
+          </div>
+        </div>
+
+        <div>
+          <label class="field-label" for="trigger-event">Event</label>
+          <select id="trigger-event" class="field-select">
+            <option value="INSERT" selected>INSERT</option>
+            <option value="UPDATE">UPDATE</option>
+            <option value="DELETE">DELETE</option>
+          </select>
+          <p class="mt-1 text-xs text-base-content/45">SQLite allows one event per trigger. To react to several, create one trigger per event.</p>
+        </div>
+
+        <div>
+          <label class="field-label" for="trigger-when">WHEN clause <span class="text-base-content/40">(optional)</span></label>
+          <input id="trigger-when" class="field-input font-mono" placeholder="NEW.age >= 18" spellcheck="false" autocomplete="off" />
+          <p class="mt-1 text-xs text-base-content/45">Use <code class="font-mono">NEW.</code> / <code class="font-mono">OLD.</code> to reference row values. Leave empty for “always”.</p>
+        </div>
+
+        <div>
+          <label class="field-label" for="trigger-body">
+            Body
+            <span class="chip chip-type">required</span>
+          </label>
+          <div class="sql-editor-wrap">
+            <div id="trigger-gutter" class="sql-gutter"></div>
+            <textarea id="trigger-body" class="sql-input font-mono" rows="6" spellcheck="false" placeholder="INSERT INTO audit_log (table_name, action, changed_at) VALUES ('users', 'UPDATE', datetime('now'));"></textarea>
+          </div>
+          <p class="mt-1.5 text-xs text-base-content/45">One or more statements, each ended with <code class="font-mono">;</code>. Use <code class="font-mono">NEW.col</code> / <code class="font-mono">OLD.col</code>.</p>
+        </div>
+
+        <div id="trigger-error" class="hidden"></div>
+        <div class="flex gap-2">
+          <button id="create-trigger" type="button" class="btn btn-primary btn-sm gap-1.5">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
+            Create trigger
+          </button>
+          <button id="cancel-trigger" type="button" class="btn btn-ghost btn-sm">Cancel</button>
+        </div>
+      </div>
+      <aside>
+        <div class="app-card overflow-hidden">
+          <div class="flex items-center justify-between border-b border-base-200 bg-base-200/40 px-4 py-3">
+            <h2 class="flex items-center gap-2 text-sm font-semibold text-base-content/60">
+              <span class="grid h-5 w-5 place-items-center rounded-md bg-primary/10 text-primary">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+              </span>
+              SQL preview
+            </h2>
+          </div>
+          <div class="p-4">
+            <pre id="trigger-preview" class="code-panel hidden"><code id="trigger-preview-code"></code></pre>
+            <p id="trigger-preview-hint" class="text-xs text-base-content/45">The generated <code class="font-mono">CREATE TRIGGER</code> statement appears here as you type.</p>
+          </div>
+        </div>
+      </aside>
+    </div>
+  </div>
+
+  <!-- List -->
+  <div class="app-card overflow-hidden">
+    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 px-5 py-4">
+      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">
+        Triggers
+        <span class="ml-1 rounded-md bg-base-200 px-1.5 py-0.5 text-[10px] text-base-content/50">{{triggers.length}}</span>
+      </h2>
+    </div>
+
+    {{#if triggers.length}}
+      <div class="overflow-x-auto">
+        <table class="table table-sm">
+          <thead>
+            <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
+              <th class="font-semibold">Name</th>
+              <th class="font-semibold">On</th>
+              <th class="font-semibold">Definition</th>
+              <th class="text-right font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {{#each triggers}}
+              <tr class="hover:bg-primary/[0.04] align-top">
+                <td class="whitespace-nowrap align-middle font-mono text-[13px] font-semibold">{{this.name}}</td>
+                <td class="whitespace-nowrap align-middle font-mono text-[13px] text-primary">{{this.table}}</td>
+                <td class="align-middle">
+                  {{#if this.sql}}
+                    <details class="group">
+                      <summary class="cursor-pointer text-xs font-medium text-primary/80 hover:text-primary">Trigger SQL</summary>
+                      <pre class="mt-1 max-w-[42rem] overflow-x-auto rounded-lg bg-base-200/70 p-2.5 font-mono text-[11px] leading-relaxed text-base-content/70">{{this.sql}}</pre>
+                    </details>
+                  {{else}}
+                    <span class="text-base-content/30">—</span>
+                  {{/if}}
+                </td>
+                <td class="whitespace-nowrap text-right align-middle">
+                  <button type="button" class="btn btn-ghost btn-xs gap-1 text-error trigger-drop" data-trigger="{{this.name}}" {{#if ../readonly}}disabled{{/if}}>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+                    Drop
+                  </button>
+                </td>
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
+      </div>
+    {{else}}
+      <div class="px-5 py-10 text-center text-sm text-base-content/45">
+        No triggers yet. {{#unless readonly}}Create one with “New trigger”.{{/unless}}
+      </div>
+    {{/if}}
+  </div>
+</div>
+
+<script id="triggers-config" type="application/json">{{{json config}}}</script>
+<script src="{{basePath}}/js/triggers.js" defer></script>

package/dist/views/pages/views.hbs

@@ -1,134 +1,134 @@
-<div class="space-y-6">
-  <!-- Header -->
-  <div class="flex flex-wrap items-center justify-between gap-3">
-    <div>
-      <p class="text-sm font-semibold uppercase tracking-wider text-primary">Schema</p>
-      <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Views</h1>
-      <p class="mt-1.5 text-sm text-base-content/55">Saved SELECT statements you can query like a table. Views are read-only.</p>
-    </div>
-    <div class="flex gap-2">
-      <a href="{{basePath}}/triggers" class="btn btn-ghost btn-sm gap-1.5">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
-        Triggers
-      </a>
-      {{#unless readonly}}
-        <button id="new-view" type="button" class="btn btn-primary btn-sm gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
-          New view
-        </button>
-      {{/unless}}
-    </div>
-  </div>
-
-  <!-- New view form -->
-  <div id="new-view-panel" class="app-card hidden p-5">
-    <div class="grid gap-4 lg:grid-cols-[1fr_360px]">
-      <div class="space-y-4">
-        <div>
-          <label class="field-label" for="view-name">View name</label>
-          <input id="view-name" class="field-input font-mono" placeholder="e.g. active_users" spellcheck="false" autocomplete="off" />
-        </div>
-        <div>
-          <label class="field-label" for="view-sql">
-            SELECT statement
-            <span class="chip chip-type">required</span>
-          </label>
-          <div class="sql-editor-wrap">
-            <div id="view-gutter" class="sql-gutter"></div>
-            <textarea id="view-sql" class="sql-input font-mono" rows="8" spellcheck="false" placeholder="SELECT id, email, name FROM users WHERE active = 1"></textarea>
-          </div>
-          <p class="mt-1.5 text-xs text-base-content/45">A single SELECT statement. Sub-queries and CTEs are allowed.</p>
-        </div>
-        <div id="view-error" class="hidden"></div>
-        <div class="flex gap-2">
-          <button id="create-view" type="button" class="btn btn-primary btn-sm gap-1.5">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
-            Create view
-          </button>
-          <button id="cancel-view" type="button" class="btn btn-ghost btn-sm">Cancel</button>
-        </div>
-      </div>
-      <aside>
-        <div class="app-card overflow-hidden">
-          <div class="flex items-center justify-between border-b border-base-200 bg-base-200/40 px-4 py-3">
-            <h2 class="flex items-center gap-2 text-sm font-semibold text-base-content/60">
-              <span class="grid h-5 w-5 place-items-center rounded-md bg-primary/10 text-primary">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
-              </span>
-              SQL preview
-            </h2>
-          </div>
-          <div class="p-4">
-            <pre id="view-preview" class="code-panel hidden"><code id="view-preview-code"></code></pre>
-            <p id="view-preview-hint" class="text-xs text-base-content/45">The generated <code class="font-mono">CREATE VIEW</code> statement appears here as you type.</p>
-          </div>
-        </div>
-      </aside>
-    </div>
-  </div>
-
-  <!-- List -->
-  <div class="app-card overflow-hidden">
-    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 px-5 py-4">
-      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">
-        Views
-        <span class="ml-1 rounded-md bg-base-200 px-1.5 py-0.5 text-[10px] text-base-content/50">{{views.length}}</span>
-      </h2>
-    </div>
-
-    {{#if views.length}}
-      <div class="overflow-x-auto">
-        <table class="table table-sm">
-          <thead>
-            <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
-              <th class="font-semibold">Name</th>
-              <th class="font-semibold">Definition</th>
-              <th class="text-right font-semibold">Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            {{#each views}}
-              <tr class="hover:bg-primary/[0.04] align-top">
-                <td class="whitespace-nowrap align-middle font-mono text-[13px] font-semibold">{{this.name}}</td>
-                <td class="align-middle">
-                  {{#if this.sql}}
-                    <details class="group">
-                      <summary class="cursor-pointer text-xs font-medium text-primary/80 hover:text-primary">View SQL</summary>
-                      <pre class="mt-1 max-w-[42rem] overflow-x-auto rounded-lg bg-base-200/70 p-2.5 font-mono text-[11px] leading-relaxed text-base-content/70">{{this.sql}}</pre>
-                    </details>
-                  {{else}}
-                    <span class="text-base-content/30">—</span>
-                  {{/if}}
-                </td>
-                <td class="whitespace-nowrap text-right align-middle">
-                  <div class="flex items-center justify-end gap-1">
-                    <button type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary view-browse" data-view="{{this.name}}">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
-                      Preview rows
-                    </button>
-                    <button type="button" class="btn btn-ghost btn-xs gap-1 text-error view-drop" data-view="{{this.name}}" {{#if ../readonly}}disabled{{/if}}>
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
-                      Drop
-                    </button>
-                  </div>
-                </td>
-              </tr>
-              <tr class="view-preview-row hidden">
-                <td colspan="3" class="border-t-0 p-0">
-                  <div class="px-5 py-4"></div>
-                </td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
-      </div>
-    {{else}}
-      <div class="px-5 py-10 text-center text-sm text-base-content/45">
-        No views yet. {{#unless readonly}}Create one with “New view”.{{/unless}}
-      </div>
-    {{/if}}
-  </div>
-</div>
-
-<script id="views-config" type="application/json">{{{json config}}}</script>
-<script src="{{basePath}}/js/views.js" defer></script>
+<div class="space-y-6">
+  <!-- Header -->
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <div>
+      <p class="text-sm font-semibold uppercase tracking-wider text-primary">Schema</p>
+      <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Views</h1>
+      <p class="mt-1.5 text-sm text-base-content/55">Saved SELECT statements you can query like a table. Views are read-only.</p>
+    </div>
+    <div class="flex gap-2">
+      <a href="{{basePath}}/triggers" class="btn btn-ghost btn-sm gap-1.5">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+        Triggers
+      </a>
+      {{#unless readonly}}
+        <button id="new-view" type="button" class="btn btn-primary btn-sm gap-1.5">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
+          New view
+        </button>
+      {{/unless}}
+    </div>
+  </div>
+
+  <!-- New view form -->
+  <div id="new-view-panel" class="app-card hidden p-5">
+    <div class="grid gap-4 lg:grid-cols-[1fr_360px]">
+      <div class="space-y-4">
+        <div>
+          <label class="field-label" for="view-name">View name</label>
+          <input id="view-name" class="field-input font-mono" placeholder="e.g. active_users" spellcheck="false" autocomplete="off" />
+        </div>
+        <div>
+          <label class="field-label" for="view-sql">
+            SELECT statement
+            <span class="chip chip-type">required</span>
+          </label>
+          <div class="sql-editor-wrap">
+            <div id="view-gutter" class="sql-gutter"></div>
+            <textarea id="view-sql" class="sql-input font-mono" rows="8" spellcheck="false" placeholder="SELECT id, email, name FROM users WHERE active = 1"></textarea>
+          </div>
+          <p class="mt-1.5 text-xs text-base-content/45">A single SELECT statement. Sub-queries and CTEs are allowed.</p>
+        </div>
+        <div id="view-error" class="hidden"></div>
+        <div class="flex gap-2">
+          <button id="create-view" type="button" class="btn btn-primary btn-sm gap-1.5">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
+            Create view
+          </button>
+          <button id="cancel-view" type="button" class="btn btn-ghost btn-sm">Cancel</button>
+        </div>
+      </div>
+      <aside>
+        <div class="app-card overflow-hidden">
+          <div class="flex items-center justify-between border-b border-base-200 bg-base-200/40 px-4 py-3">
+            <h2 class="flex items-center gap-2 text-sm font-semibold text-base-content/60">
+              <span class="grid h-5 w-5 place-items-center rounded-md bg-primary/10 text-primary">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+              </span>
+              SQL preview
+            </h2>
+          </div>
+          <div class="p-4">
+            <pre id="view-preview" class="code-panel hidden"><code id="view-preview-code"></code></pre>
+            <p id="view-preview-hint" class="text-xs text-base-content/45">The generated <code class="font-mono">CREATE VIEW</code> statement appears here as you type.</p>
+          </div>
+        </div>
+      </aside>
+    </div>
+  </div>
+
+  <!-- List -->
+  <div class="app-card overflow-hidden">
+    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 px-5 py-4">
+      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">
+        Views
+        <span class="ml-1 rounded-md bg-base-200 px-1.5 py-0.5 text-[10px] text-base-content/50">{{views.length}}</span>
+      </h2>
+    </div>
+
+    {{#if views.length}}
+      <div class="overflow-x-auto">
+        <table class="table table-sm">
+          <thead>
+            <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
+              <th class="font-semibold">Name</th>
+              <th class="font-semibold">Definition</th>
+              <th class="text-right font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {{#each views}}
+              <tr class="hover:bg-primary/[0.04] align-top">
+                <td class="whitespace-nowrap align-middle font-mono text-[13px] font-semibold">{{this.name}}</td>
+                <td class="align-middle">
+                  {{#if this.sql}}
+                    <details class="group">
+                      <summary class="cursor-pointer text-xs font-medium text-primary/80 hover:text-primary">View SQL</summary>
+                      <pre class="mt-1 max-w-[42rem] overflow-x-auto rounded-lg bg-base-200/70 p-2.5 font-mono text-[11px] leading-relaxed text-base-content/70">{{this.sql}}</pre>
+                    </details>
+                  {{else}}
+                    <span class="text-base-content/30">—</span>
+                  {{/if}}
+                </td>
+                <td class="whitespace-nowrap text-right align-middle">
+                  <div class="flex items-center justify-end gap-1">
+                    <button type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary view-browse" data-view="{{this.name}}">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
+                      Preview rows
+                    </button>
+                    <button type="button" class="btn btn-ghost btn-xs gap-1 text-error view-drop" data-view="{{this.name}}" {{#if ../readonly}}disabled{{/if}}>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+                      Drop
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              <tr class="view-preview-row hidden">
+                <td colspan="3" class="border-t-0 p-0">
+                  <div class="px-5 py-4"></div>
+                </td>
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
+      </div>
+    {{else}}
+      <div class="px-5 py-10 text-center text-sm text-base-content/45">
+        No views yet. {{#unless readonly}}Create one with “New view”.{{/unless}}
+      </div>
+    {{/if}}
+  </div>
+</div>
+
+<script id="views-config" type="application/json">{{{json config}}}</script>
+<script src="{{basePath}}/js/views.js" defer></script>