admindb 1.0.1

package/dist/util.d.ts

@@ -0,0 +1,29 @@
+/** Small shared helpers used across the server. */
+export declare function errorMessage(err: unknown): string;
+/** Row filters keyed by column name. */
+export interface RowFilters {
+    [column: string]: string;
+}
+/** Parse the `f` query parameter (URL-encoded JSON object) into row filters. */
+export declare function parseFilters(raw: unknown): RowFilters;
+/** Encode filters back into a `f=…` query string (empty when no filters). */
+export declare function filtersToQS(filters: RowFilters | undefined): string;
+/** Internal tables (kept out of user-facing pickers) start with an underscore. */
+export declare function isInternalTable(name: string): boolean;
+/** Encode primary-key values into a single URL path segment (comma-joined, URL-encoded). */
+export declare function encodePk(values: unknown[]): string;
+/** Decode a primary-key path segment back into individual values. */
+export declare function decodePk(encoded: string): string[];
+/** Normalize a single cell for JSON / display (BLOB → 0x-hex string, undefined → null). */
+export declare function normalizeCell(value: unknown): unknown;
+/** Normalize every cell in a row. */
+export declare function normalizeRow(row: Record<string, unknown>): Record<string, unknown>;
+/**
+ * Coerce a raw form value into a value suitable for SQLite binding.
+ * - empty string / null / undefined  → null ("not set")
+ * - `0` stays valid
+ * - BOOLEAN → 1/0
+ * - INTEGER/REAL → number when numeric
+ * - BLOB → Buffer (0x-hex or raw text)
+ */
+export declare function coerceFormValue(raw: unknown, columnType: string): unknown;

package/dist/util.js

@@ -0,0 +1,127 @@
+"use strict";
+/** Small shared helpers used across the server. */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.errorMessage = errorMessage;
+exports.parseFilters = parseFilters;
+exports.filtersToQS = filtersToQS;
+exports.isInternalTable = isInternalTable;
+exports.encodePk = encodePk;
+exports.decodePk = decodePk;
+exports.normalizeCell = normalizeCell;
+exports.normalizeRow = normalizeRow;
+exports.coerceFormValue = coerceFormValue;
+function errorMessage(err) {
+    if (err instanceof Error)
+        return err.message;
+    return String(err);
+}
+/** Parse the `f` query parameter (URL-encoded JSON object) into row filters. */
+function parseFilters(raw) {
+    const out = {};
+    const add = (obj) => {
+        if (obj && typeof obj === 'object') {
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== undefined && v !== null && v !== '')
+                    out[k] = String(v);
+            }
+        }
+    };
+    if (typeof raw === 'string' && raw) {
+        try {
+            add(JSON.parse(raw));
+        }
+        catch {
+            return {};
+        }
+    }
+    else {
+        add(raw);
+    }
+    return out;
+}
+/** Encode filters back into a `f=…` query string (empty when no filters). */
+function filtersToQS(filters) {
+    const out = {};
+    for (const [k, v] of Object.entries(filters ?? {})) {
+        if (v !== undefined && v !== null && String(v).trim() !== '')
+            out[k] = String(v).trim();
+    }
+    const keys = Object.keys(out);
+    if (!keys.length)
+        return '';
+    return 'f=' + encodeURIComponent(JSON.stringify(out));
+}
+/** Internal tables (kept out of user-facing pickers) start with an underscore. */
+function isInternalTable(name) {
+    return name.startsWith('_');
+}
+/** Encode primary-key values into a single URL path segment (comma-joined, URL-encoded). */
+function encodePk(values) {
+    return values.map((v) => encodeURIComponent(v == null ? '' : String(v))).join(',');
+}
+/** Decode a primary-key path segment back into individual values. */
+function decodePk(encoded) {
+    return String(encoded)
+        .split(',')
+        .map((s) => {
+        try {
+            return decodeURIComponent(s);
+        }
+        catch {
+            return s;
+        }
+    });
+}
+/** Normalize a single cell for JSON / display (BLOB → 0x-hex string, undefined → null). */
+function normalizeCell(value) {
+    if (value instanceof Uint8Array) {
+        return `0x${Buffer.from(value).toString('hex')}`;
+    }
+    if (value === undefined)
+        return null;
+    return value;
+}
+/** Normalize every cell in a row. */
+function normalizeRow(row) {
+    const out = {};
+    for (const [k, v] of Object.entries(row ?? {}))
+        out[k] = normalizeCell(v);
+    return out;
+}
+/**
+ * Coerce a raw form value into a value suitable for SQLite binding.
+ * - empty string / null / undefined  → null ("not set")
+ * - `0` stays valid
+ * - BOOLEAN → 1/0
+ * - INTEGER/REAL → number when numeric
+ * - BLOB → Buffer (0x-hex or raw text)
+ */
+function coerceFormValue(raw, columnType) {
+    const type = (columnType || '').toUpperCase();
+    if (raw === undefined || raw === null)
+        return null;
+    if (type === 'BOOLEAN') {
+        const s = String(raw).trim().toLowerCase();
+        if (s === '')
+            return null;
+        return s === 'true' || s === '1' || s === 'on' || s === 'yes' || s === 'checked' ? 1 : 0;
+    }
+    if (type.startsWith('INTEGER') || type === 'REAL') {
+        const s = String(raw).trim();
+        if (s === '')
+            return null;
+        const n = Number(s);
+        return Number.isFinite(n) ? n : s;
+    }
+    if (type === 'BLOB') {
+        const s = String(raw);
+        if (/^0x[0-9a-f]*$/i.test(s))
+            return Buffer.from(s.slice(2), 'hex');
+        return Buffer.from(s, 'utf8');
+    }
+    const s = String(raw);
+    if (s === '')
+        return null;
+    return s;
+}
+//# sourceMappingURL=util.js.map

package/dist/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":";AAAA,mDAAmD;;AAEnD,oCAGC;AAQD,oCAmBC;AAGD,kCAQC;AAGD,0CAEC;AAGD,4BAEC;AAGD,4BAUC;AAGD,sCAMC;AAGD,oCAIC;AAUD,0CA0BC;AApHD,SAAgB,YAAY,CAAC,GAAY;IACvC,IAAI,GAAG,YAAY,KAAK;QAAE,OAAO,GAAG,CAAC,OAAO,CAAC;IAC7C,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC;AACrB,CAAC;AAOD,gFAAgF;AAChF,SAAgB,YAAY,CAAC,GAAY;IACvC,MAAM,GAAG,GAAe,EAAE,CAAC;IAC3B,MAAM,GAAG,GAAG,CAAC,GAAY,EAAQ,EAAE;QACjC,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YACnC,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,GAA8B,CAAC,EAAE,CAAC;gBACpE,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;oBAAE,GAAG,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACpE,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IACF,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,EAAE,CAAC;QACnC,IAAI,CAAC;YACH,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;QACvB,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC;SAAM,CAAC;QACN,GAAG,CAAC,GAAG,CAAC,CAAC;IACX,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAED,6EAA6E;AAC7E,SAAgB,WAAW,CAAC,OAA+B;IACzD,MAAM,GAAG,GAAe,EAAE,CAAC;IAC3B,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,CAAC;QACnD,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE;YAAE,GAAG,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC1F,CAAC;IACD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,IAAI,CAAC,IAAI,CAAC,MAAM;QAAE,OAAO,EAAE,CAAC;IAC5B,OAAO,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;AACxD,CAAC;AAED,kFAAkF;AAClF,SAAgB,eAAe,CAAC,IAAY;IAC1C,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;AAC9B,CAAC;AAED,4FAA4F;AAC5F,SAAgB,QAAQ,CAAC,MAAiB;IACxC,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACrF,CAAC;AAED,qEAAqE;AACrE,SAAgB,QAAQ,CAAC,OAAe;IACtC,OAAO,MAAM,CAAC,OAAO,CAAC;SACnB,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;QACT,IAAI,CAAC;YACH,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC;QAC/B,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,CAAC,CAAC;QACX,CAAC;IACH,CAAC,CAAC,CAAC;AACP,CAAC;AAED,2FAA2F;AAC3F,SAAgB,aAAa,CAAC,KAAc;IAC1C,IAAI,KAAK,YAAY,UAAU,EAAE,CAAC;QAChC,OAAO,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;IACnD,CAAC;IACD,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACrC,OAAO,KAAK,CAAC;AACf,CAAC;AAED,qCAAqC;AACrC,SAAgB,YAAY,CAAC,GAA4B;IACvD,MAAM,GAAG,GAA4B,EAAE,CAAC;IACxC,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,EAAE,CAAC;QAAE,GAAG,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;IAC1E,OAAO,GAAG,CAAC;AACb,CAAC;AAED;;;;;;;GAOG;AACH,SAAgB,eAAe,CAAC,GAAY,EAAE,UAAkB;IAC9D,MAAM,IAAI,GAAG,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;IAC9C,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAEnD,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;QAC3C,IAAI,CAAC,KAAK,EAAE;YAAE,OAAO,IAAI,CAAC;QAC1B,OAAO,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3F,CAAC;IAED,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QAClD,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;QAC7B,IAAI,CAAC,KAAK,EAAE;YAAE,OAAO,IAAI,CAAC;QAC1B,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QACpB,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC;IAED,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QACpB,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QACtB,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;YAAE,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QACpE,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IAChC,CAAC;IAED,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACtB,IAAI,CAAC,KAAK,EAAE;QAAE,OAAO,IAAI,CAAC;IAC1B,OAAO,CAAC,CAAC;AACX,CAAC"}

package/dist/views/layouts/main.hbs

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="admindb">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{{title}} · AdminDB</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="{{basePath}}/css/app.css" />
+  <script>
+    window.APP = { basePath: {{{json basePath}}}, readonly: {{{json readonly}}} };
+    // Apply the saved theme before first paint to avoid a flash.
+    (function () {
+      try {
+        var t = localStorage.getItem('admindb-theme');
+        if (t === 'dark') document.documentElement.setAttribute('data-theme', 'admindbDark');
+      } catch (e) {}
+    })();
+  </script>
+  <script src="{{basePath}}/js/api.js" defer></script>
+  <script src="{{basePath}}/js/app.js" defer></script>
+</head>
+<body class="min-h-screen bg-base-200 text-base-content">
+  {{#if readonly}}
+    <div class="flex items-center justify-center gap-2 bg-warning/15 px-4 py-2 text-center text-sm font-semibold text-warning">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+      Read-only mode — this database is open without write access. All writes are disabled.
+    </div>
+  {{/if}}
+  <div class="drawer lg:drawer-open">
+    <input id="sidebar-toggle" type="checkbox" class="drawer-toggle" />
+    <div class="drawer-content flex min-h-screen flex-col">
+      {{> navbar}}
+      <main class="mx-auto w-full max-w-[1500px] flex-1 px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
+        {{{body}}}
+      </main>
+      <footer class="border-t border-base-300 px-6 py-4 text-center text-xs text-base-content/40">
+        AdminDB · a browser tool for SQLite databases
+      </footer>
+    </div>
+    <div class="drawer-side z-40">
+      <label for="sidebar-toggle" aria-label="close sidebar" class="drawer-overlay"></label>
+      {{> sidebar}}
+    </div>
+  </div>
+  <div id="toast-container" class="pointer-events-none fixed inset-x-0 top-4 z-50 flex flex-col items-center gap-2 px-4"></div>
+</body>
+</html>

package/dist/views/pages/databases.hbs

@@ -0,0 +1,102 @@
+<div class="space-y-6">
+  <!-- Header -->
+  <div>
+    <p class="text-sm font-semibold uppercase tracking-wider text-primary">Manager</p>
+    <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Databases</h1>
+    <p class="mt-1.5 text-sm text-base-content/55">Open a database to browse and edit it, or create a new one.</p>
+  </div>
+
+  <!-- New database -->
+  <div class="app-card p-5">
+    <div class="flex flex-wrap items-end gap-3">
+      <div class="w-full max-w-sm">
+        <label class="field-label" for="new-db-name">New database name</label>
+        <input id="new-db-name" class="field-input font-mono" placeholder="e.g. analytics" autocomplete="off" spellcheck="false" />
+      </div>
+      {{#unless readonly}}
+        <button id="create-db" type="button" class="btn btn-primary btn-sm mb-0.5 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>
+          Create
+        </button>
+      {{else}}
+        <span class="mb-1 text-sm font-medium text-warning">Read-only — creating databases is disabled.</span>
+      {{/unless}}
+    </div>
+    <p class="mt-2 text-xs text-base-content/40">
+      New databases are created in <code class="font-mono">{{dbDir}}</code>. Files already there are picked up
+      automatically, and any explicitly configured database paths appear here too.
+    </p>
+  </div>
+
+  <!-- List -->
+  <div>
+    <div class="mb-3 flex items-center justify-between">
+      <h2 class="text-lg font-bold">Available databases</h2>
+      <span class="text-sm text-base-content/45">{{databases.length}} total</span>
+    </div>
+
+    {{#if databases.length}}
+      <div class="app-card overflow-hidden">
+        <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="text-right font-semibold">Tables</th>
+                <th class="text-right font-semibold">Size</th>
+                <th class="font-semibold">Modified</th>
+                <th class="text-right font-semibold">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{#each databases}}
+                <tr class="group hover:bg-primary/[0.04]">
+                  <td>
+                    <a href="{{../basePath}}/{{this.id}}" class="inline-flex items-center gap-2.5">
+                      <span class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary/20">
+                        <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="M4 7v10c0 1.1.9 2 2 2h12a2 2 0 002-2V7M4 7c0-1.1.9-2 2-2h12a2 2 0 012 2M4 7c0 1.1.9 2 2 2h12a2 2 0 002-2" /></svg>
+                      </span>
+                      <span class="min-w-0">
+                        <span class="block truncate font-mono text-[13.5px] font-semibold">{{this.name}}</span>
+                        <span class="block max-w-[220px] truncate text-[11px] text-base-content/40" title="{{this.path}}">{{this.path}}</span>
+                      </span>
+                    </a>
+                  </td>
+                  <td class="text-right tabular-nums text-base-content/60">{{this.tables}}</td>
+                  <td class="text-right tabular-nums text-base-content/60">{{this.sizeLabel}}</td>
+                  <td class="text-[13px] text-base-content/55">{{this.modifiedLabel}}</td>
+                  <td class="whitespace-nowrap text-right">
+                      <div class="row-actions">
+                        <a href="{{../basePath}}/{{this.id}}" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover: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 7l5 5m0 0l-5 5m5-5H6" /></svg>
+                          Open
+                        </a>
+                        {{#unless ../readonly}}
+                          <button type="button" class="btn btn-ghost btn-xs gap-1 text-error js-delete-db" data-id="{{this.id}}">
+                            <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>
+                            Delete
+                          </button>
+                        {{/unless}}
+                      </div>
+                  </td>
+                </tr>
+              {{/each}}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    {{else}}
+      <div class="empty-state">
+        <span class="empty-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 1.1.9 2 2 2h12a2 2 0 002-2V7M4 7c0-1.1.9-2 2-2h12a2 2 0 012 2M4 7c0 1.1.9 2 2 2h12a2 2 0 002-2" /></svg>
+        </span>
+        <p class="text-sm font-medium text-base-content/70">No databases yet</p>
+        <p class="max-w-sm text-sm text-base-content/45">
+          Create one above, or drop <code class="font-mono">.db</code> files into
+          <code class="font-mono">{{dbDir}}</code> and refresh.
+        </p>
+      </div>
+    {{/if}}
+  </div>
+</div>
+<script src="{{basePath}}/js/databases.js" defer></script>

package/dist/views/pages/designer.hbs

@@ -0,0 +1,81 @@
+<div class="space-y-6">
+  <!-- Header -->
+  <div>
+    <p class="text-sm font-semibold uppercase tracking-wider text-primary">Designer</p>
+    <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Create table</h1>
+    <p class="mt-1.5 text-sm text-base-content/55">Define columns visually — the SQL preview updates live as you type.</p>
+  </div>
+
+  <div class="grid gap-6 lg:grid-cols-[1fr_380px]">
+    <!-- Left: editor -->
+    <div class="space-y-5">
+      <div class="app-card p-5">
+        <label class="field-label">
+          Table name
+          <span class="chip chip-type">required</span>
+        </label>
+        <input id="table-name" type="text" class="field-input font-mono" placeholder="e.g. users" autocomplete="off" spellcheck="false" />
+      </div>
+
+      <div class="app-card">
+        <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">Columns</h2>
+          <button id="add-column" type="button" class="btn btn-outline 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>
+            Add column
+          </button>
+        </div>
+        <div id="columns" class="space-y-3 p-4"></div>
+        <div id="designer-error" class="hidden px-4 pb-4"></div>
+        <div class="flex flex-wrap gap-2 border-t border-base-200 px-5 py-4">
+          {{#unless readonly}}
+            <button id="create-table" type="button" class="btn btn-primary 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 table
+            </button>
+          {{else}}
+            <span class="text-sm font-medium text-warning">Read-only — table creation is disabled.</span>
+          {{/unless}}
+          <button id="copy-sql" type="button" class="btn btn-outline gap-1.5" title="Copy the preview SQL">
+            <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="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3" /></svg>
+            Copy SQL
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right: live preview + tips -->
+    <aside class="space-y-4 self-start lg:sticky lg:top-24">
+      <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>
+          <span id="preview-status" class="text-[11px] font-medium text-base-content/40">waiting…</span>
+        </div>
+        <div class="p-4">
+          <pre id="sql-preview" class="code-panel hidden"><code id="preview-code"></code></pre>
+          <div id="preview-placeholder" class="rounded-xl border border-dashed border-base-300 px-4 py-8 text-center text-sm text-base-content/35">
+            Your <code class="font-mono">CREATE TABLE</code> statement will appear here as you build it.
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-2xl border border-base-300/70 bg-base-100 p-4">
+        <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wider text-base-content/45">Type guide</h3>
+        <ul class="space-y-1.5 text-[13px] text-base-content/60">
+          <li class="flex items-center justify-between gap-2"><span class="font-mono">TEXT</span><span class="text-base-content/40">Free-form text</span></li>
+          <li class="flex items-center justify-between gap-2"><span class="font-mono">INTEGER</span><span class="text-base-content/40">Whole numbers</span></li>
+          <li class="flex items-center justify-between gap-2"><span class="font-mono">REAL</span><span class="text-base-content/40">Decimal numbers</span></li>
+          <li class="flex items-center justify-between gap-2"><span class="font-mono">BLOB</span><span class="text-base-content/40">Binary data</span></li>
+          <li class="flex items-center justify-between gap-2"><span class="font-mono">BOOLEAN</span><span class="text-base-content/40">Stored as 0/1</span></li>
+          <li class="flex items-center justify-between gap-2"><span class="font-mono">DATE</span><span class="text-base-content/40">Datetime + now default</span></li>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</div>
+<script src="{{basePath}}/js/designer.js" defer></script>

package/dist/views/pages/error.hbs

@@ -0,0 +1,12 @@
+<div class="mx-auto mt-16 max-w-md space-y-6 text-center">
+  <div class="mx-auto grid h-20 w-20 place-items-center rounded-3xl bg-error/10 text-error">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+    </svg>
+  </div>
+  <div>
+    <h1 class="text-5xl font-extrabold tracking-tight text-error">{{status}}</h1>
+    <p class="mt-2 text-base-content/60">{{error}}</p>
+  </div>
+  <a href="{{basePath}}/" class="btn btn-primary">Back to home</a>
+</div>

package/dist/views/pages/form.hbs

@@ -0,0 +1,62 @@
+<div class="mx-auto max-w-3xl space-y-5">
+  <!-- Header -->
+  <div class="flex items-center gap-3">
+    <a href="{{basePath}}/tables/{{table}}" class="btn btn-circle btn-ghost btn-sm" aria-label="Back to table">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
+    </a>
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight">
+        {{#if (eq mode 'edit')}}Edit row{{else}}New row{{/if}}
+        <span class="text-base-content/40">in</span> <span class="font-mono text-primary">{{table}}</span>
+      </h1>
+      <p class="text-sm text-base-content/55">{{infoSummary}}</p>
+    </div>
+  </div>
+
+  <div class="app-card">
+    <div class="border-b border-base-200 px-6 py-4">
+      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Row fields</h2>
+    </div>
+    <div class="p-6">
+      <div id="row-fields" class="grid grid-cols-1 gap-x-6 gap-y-5 md:grid-cols-2"></div>
+      <div id="form-error" class="hidden"></div>
+      <div class="mt-6 flex flex-wrap items-center gap-2 border-t border-base-200 pt-5">
+        {{#unless readonly}}
+          <button id="row-submit" type="button" class="btn btn-primary">
+            {{#if (eq mode 'edit')}}Update row{{else}}Insert row{{/if}}
+          </button>
+          <button id="row-generate" type="button" class="btn btn-outline 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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /></svg>
+            Get query
+          </button>
+        {{else}}
+          <span class="text-sm font-medium text-warning">This database is read-only — rows cannot be {{#if (eq mode 'edit')}}updated{{else}}inserted{{/if}}.</span>
+        {{/unless}}
+        <a href="{{basePath}}/tables/{{table}}" class="btn btn-ghost">Cancel</a>
+      </div>
+      <p class="mt-3 text-xs text-base-content/40">
+        Columns with defaults are pre-filled from the schema. Empty fields are treated as "not set" (DB defaults
+        apply). <code class="font-mono">0</code> is a valid value. "Get query" only previews the SQL — it never executes.
+      </p>
+    </div>
+  </div>
+
+  <div id="generated-sql" class="hidden">
+    <div class="app-card">
+      <div class="flex items-center justify-between border-b border-base-200 px-6 py-4">
+        <h2 class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-base-content/45">
+          <span class="grid h-6 w-6 place-items-center rounded-md bg-primary/10 text-primary">
+            <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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /></svg>
+          </span>
+          Generated SQL
+        </h2>
+        <button id="copy-sql" type="button" class="btn btn-ghost btn-xs gap-1">Copy</button>
+      </div>
+      <div class="p-4">
+        <pre class="code-panel"><code id="generated-sql-code"></code></pre>
+      </div>
+    </div>
+  </div>
+</div>
+<script id="form-config" type="application/json">{{{json config}}}</script>
+<script src="{{basePath}}/js/forms.js" defer></script>

package/dist/views/pages/home.hbs

@@ -0,0 +1,123 @@
+<div class="space-y-8">
+  <!-- Header -->
+  <div class="flex flex-wrap items-end justify-between gap-4">
+    <div>
+      <p class="text-sm font-semibold uppercase tracking-wider text-primary">Overview</p>
+      <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Database</h1>
+      <p class="mt-1.5 text-sm text-base-content/55">Browse, edit, and query the connected SQLite database from your browser.</p>
+    </div>
+    <div class="flex gap-2">
+      <a href="{{basePath}}/query" 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>
+        Query
+      </a>
+      {{#unless readonly}}
+        <a href="{{basePath}}/designer" 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 table
+        </a>
+      {{/unless}}
+    </div>
+  </div>
+
+  <!-- Stat cards -->
+  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+    <div class="stat-card">
+      <span class="stat-icon bg-primary/10 text-primary">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+      </span>
+      <div>
+        <div class="text-2xl font-extrabold tabular-nums">{{tables.length}}</div>
+        <div class="text-[13px] text-base-content/50">Tables</div>
+      </div>
+    </div>
+    <div class="stat-card">
+      <span class="stat-icon bg-secondary/10 text-secondary">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
+      </span>
+      <div>
+        <div class="text-2xl font-extrabold tabular-nums">{{totalRows}}</div>
+        <div class="text-[13px] text-base-content/50">Total rows</div>
+      </div>
+    </div>
+    <div class="stat-card">
+      <span class="stat-icon bg-accent/10 text-accent">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>
+      </span>
+      <div>
+        <div class="text-2xl font-extrabold tabular-nums">{{savedQueries}}</div>
+        <div class="text-[13px] text-base-content/50">Saved queries</div>
+      </div>
+    </div>
+    <div class="stat-card">
+      <span class="stat-icon bg-warning/10 text-warning">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 1.1.9 2 2 2h12a2 2 0 002-2V7M4 7c0-1.1.9-2 2-2h12a2 2 0 012 2M4 7c0 1.1.9 2 2 2h12a2 2 0 002-2" /></svg>
+      </span>
+      <div>
+        <div class="truncate font-mono text-lg font-bold" title="{{dbPath}}">{{dbPath}}</div>
+        <div class="text-[13px] text-base-content/50">Database file</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Tables -->
+  <div>
+    <div class="mb-3 flex items-center justify-between">
+      <h2 class="text-lg font-bold">Tables</h2>
+      <span class="text-sm text-base-content/45">{{tables.length}} total</span>
+    </div>
+
+    {{#if tables.length}}
+      <div class="app-card overflow-hidden">
+        <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">Table</th>
+                <th class="text-right font-semibold">Columns</th>
+                <th class="text-right font-semibold">Rows</th>
+                <th class="text-right font-semibold">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{#each tables}}
+                <tr class="group hover:bg-base-200/50">
+                  <td>
+                    <a href="{{../basePath}}/tables/{{this}}" class="inline-flex items-center gap-2.5 font-medium">
+                      <span class="grid h-8 w-8 place-items-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary/20">
+                        <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="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                      </span>
+                      <span class="font-mono text-[13.5px]">{{this}}</span>
+                    </a>
+                  </td>
+                  <td class="text-right tabular-nums text-base-content/60">{{lookup ../cols this}}</td>
+                  <td class="text-right tabular-nums text-base-content/60">{{lookup ../counts this}}</td>
+                  <td class="text-right">
+                    <a href="{{../basePath}}/tables/{{this}}" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
+                      Browse
+                      <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 7l5 5m0 0l-5 5m5-5H6" /></svg>
+                    </a>
+                  </td>
+                </tr>
+              {{/each}}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    {{else}}
+      <div class="empty-state">
+        <span class="empty-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+        </span>
+        <p class="text-sm font-medium text-base-content/70">No tables yet</p>
+        <p class="max-w-sm text-sm text-base-content/45">Create one with the table designer, or run a SQL statement in the query editor to get started.</p>
+        <div class="mt-2 flex gap-2">
+          {{#unless readonly}}
+            <a href="{{basePath}}/designer" class="btn btn-primary btn-sm">New table</a>
+          {{/unless}}
+          <a href="{{basePath}}/query" class="btn btn-outline btn-sm">Query editor</a>
+        </div>
+      </div>
+    {{/if}}
+  </div>
+</div>