sqlite-hub 0.1.3

package/js/components/dataGrid.js

@@ -0,0 +1,47 @@
+export function renderDataGrid({
+  columns,
+  rows,
+  tableClass = "",
+  theadClass = "",
+  headerRowClass = "",
+  tbodyClass = "",
+  getRowClass = () => "",
+  getRowAttrs = () => "",
+}) {
+  return `
+    <table class="${tableClass}">
+      <thead class="${theadClass}">
+        <tr class="${headerRowClass}">
+          ${columns
+            .map(
+              (column) => `
+                <th class="${column.headerClassName ?? ""}">
+                  ${column.label}
+                </th>
+              `
+            )
+            .join("")}
+        </tr>
+      </thead>
+      <tbody class="${tbodyClass}">
+        ${rows
+          .map(
+            (row, index) => `
+              <tr class="${getRowClass(row, index)}" ${getRowAttrs(row, index)}>
+                ${columns
+                  .map(
+                    (column) => `
+                      <td class="${column.cellClassName ?? ""}">
+                        ${column.render ? column.render(row, index) : row[column.key]}
+                      </td>
+                    `
+                  )
+                  .join("")}
+              </tr>
+            `
+          )
+          .join("")}
+      </tbody>
+    </table>
+  `;
+}

package/js/components/emptyState.js

@@ -0,0 +1,159 @@
+import {
+  escapeHtml,
+  formatBytes,
+  formatDateTime,
+  truncateMiddle,
+} from "../utils/format.js";
+
+function renderRecentConnections(recentConnections = []) {
+  if (!recentConnections.length) {
+    return `
+      <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/40">
+        No recent SQLite databases recorded yet.
+      </div>
+    `;
+  }
+
+  return `
+    <div class="flex flex-wrap justify-center gap-4">
+      ${recentConnections
+        .slice(0, 4)
+        .map(
+          (connection) => `
+            <button
+              class="flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 py-3 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high"
+              data-action="select-connection"
+              data-connection-id="${escapeHtml(connection.id)}"
+              type="button"
+            >
+              <span class="material-symbols-outlined text-sm text-primary-container">database</span>
+              <span class="min-w-0">
+                <span class="block truncate font-mono text-xs">${escapeHtml(connection.label)}</span>
+                <span class="block truncate text-[10px] text-on-surface-variant/45">${escapeHtml(
+                  truncateMiddle(connection.path, 34)
+                )}</span>
+              </span>
+            </button>
+          `
+        )
+        .join("")}
+    </div>
+  `;
+}
+
+function renderActiveConnection(activeConnection) {
+  if (!activeConnection) {
+    return `
+      <p class="font-light text-lg uppercase tracking-wide text-on-surface-variant">
+        No database connected
+      </p>
+    `;
+  }
+
+  return `
+    <div class="mx-auto max-w-2xl border border-outline-variant/15 bg-surface-container-low px-6 py-5 text-left">
+      <div class="flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <p class="text-[10px] font-mono uppercase tracking-[0.24em] text-primary-container/70">
+            ACTIVE_DATABASE
+          </p>
+          <h2 class="mt-2 font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
+            ${escapeHtml(activeConnection.label)}
+          </h2>
+          <p class="mt-2 font-mono text-[10px] text-on-surface-variant/55">${escapeHtml(
+            truncateMiddle(activeConnection.path, 72)
+          )}</p>
+        </div>
+        <div class="text-right text-xs text-on-surface-variant/65">
+          <div>${escapeHtml(formatBytes(activeConnection.sizeBytes))}</div>
+          <div class="mt-1">${escapeHtml(formatDateTime(activeConnection.lastModifiedAt))}</div>
+          <div class="mt-1">${activeConnection.readOnly ? "READ_ONLY" : "READ_WRITE"}</div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+export function renderEmptyState({ activeConnection, recentConnections = [] }) {
+  const hasActive = Boolean(activeConnection);
+
+  return `
+    <section class="landing-view machined-grid px-6">
+      <div class="landing-accent landing-accent--a"></div>
+      <div class="landing-accent landing-accent--b"></div>
+      <div class="landing-accent--c absolute"></div>
+      <div class="empty-state-shell z-10 text-center">
+        <div class="mb-2">
+          <span class="font-mono text-[10px] tracking-[0.3em] text-primary-container/40">
+            SYSTEM_READY // ${hasActive ? "ACTIVE_CONTEXT" : "IDLE_STATE"}
+          </span>
+        </div>
+        <h1 class="mb-4 font-headline text-7xl font-black tracking-tighter text-primary-container opacity-90 md:text-9xl">
+          SQLite Hub
+        </h1>
+        <div class="mx-auto mb-12 max-w-3xl space-y-4">
+          ${renderActiveConnection(activeConnection)}
+          <div class="h-[2px] w-12 bg-primary-container mx-auto"></div>
+        </div>
+        <div class="mx-auto grid w-full max-w-3xl grid-cols-1 gap-4 px-6 md:grid-cols-2">
+          <button
+            class="clipped-btn group flex items-center justify-between bg-primary-container px-8 py-6 font-headline text-lg font-bold text-on-primary transition-all duration-300 hover:shadow-[0_0_20px_rgba(252,227,0,0.3)]"
+            data-action="open-modal"
+            data-modal="open-connection"
+            style="--clip-path: polygon(0 0, 90% 0, 100% 25%, 100% 100%, 0 100%);"
+            type="button"
+          >
+            <span>CONNECT DATABASE</span>
+            <span class="material-symbols-outlined transition-transform group-hover:translate-x-1">add_circle</span>
+          </button>
+          <button
+            class="flex items-center justify-between border-l-2 border-primary-container bg-surface-container-highest px-8 py-6 font-headline text-lg font-bold text-primary-container transition-colors duration-150 hover:bg-surface-bright"
+            data-action="open-modal"
+            data-modal="create-connection"
+            type="button"
+          >
+            <span>CREATE DATABASE</span>
+            <span class="material-symbols-outlined">note_add</span>
+          </button>
+        </div>
+        ${
+          hasActive
+            ? `
+              <div class="mx-auto mt-8 grid w-full max-w-3xl grid-cols-1 gap-4 px-6 md:grid-cols-3">
+                <button
+                  class="border border-outline-variant/20 bg-surface-container-low px-5 py-4 font-headline text-sm font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container/30 hover:text-primary-container"
+                  data-action="navigate"
+                  data-to="/overview"
+                  type="button"
+                >
+                  Overview
+                </button>
+                <button
+                  class="border border-outline-variant/20 bg-surface-container-low px-5 py-4 font-headline text-sm font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container/30 hover:text-primary-container"
+                  data-action="navigate"
+                  data-to="/structure"
+                  type="button"
+                >
+                  Structure
+                </button>
+                <button
+                  class="border border-outline-variant/20 bg-surface-container-low px-5 py-4 font-headline text-sm font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container/30 hover:text-primary-container"
+                  data-action="navigate"
+                  data-to="/editor"
+                  type="button"
+                >
+                  SQL Editor
+                </button>
+              </div>
+            `
+            : ""
+        }
+        <div class="mt-16 flex flex-col items-center gap-4 opacity-70 transition-opacity hover:opacity-100">
+          <p class="font-mono text-[10px] tracking-widest text-on-surface-variant">RECENT_TARGETS</p>
+          ${renderRecentConnections(recentConnections)}
+        </div>
+      </div>
+      <div class="pointer-events-none absolute bottom-0 left-0 h-1/3 w-full bg-gradient-to-t from-surface-container-lowest to-transparent"></div>
+    </section>
+  `;
+}

package/js/components/metricCard.js

@@ -0,0 +1,32 @@
+import { escapeHtml } from "../utils/format.js";
+
+export function renderMetricCard({
+  label,
+  value,
+  subtext = "",
+  accent = false,
+  progress = "",
+}) {
+  return `
+    <div class="metric-card ${accent ? "metric-card--accent" : ""}">
+      <span class="text-[10px] font-mono text-on-surface/40 uppercase">${escapeHtml(label)}</span>
+      <span class="text-3xl font-headline font-bold text-on-surface">${escapeHtml(value)}</span>
+      ${
+        progress
+          ? `
+            <div class="w-full bg-surface-container-highest h-1 mt-2">
+              <div class="bg-primary-container h-full" style="width: ${escapeHtml(progress)}"></div>
+            </div>
+          `
+          : ""
+      }
+      ${
+        subtext
+          ? `<span class="text-[10px] ${accent ? "text-primary-container" : "text-on-surface/40"}">${escapeHtml(
+              subtext
+            )}</span>`
+          : ""
+      }
+    </div>
+  `;
+}

package/js/components/modal.js

@@ -0,0 +1,317 @@
+import { escapeHtml, truncateMiddle } from "../utils/format.js";
+
+function renderField({ label, name, type = "text", placeholder = "", value = "" }) {
+  return `
+    <label class="block space-y-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        ${escapeHtml(label)}
+      </span>
+      <input
+        class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+        name="${escapeHtml(name)}"
+        placeholder="${escapeHtml(placeholder)}"
+        type="${escapeHtml(type)}"
+        value="${escapeHtml(value)}"
+      />
+    </label>
+  `;
+}
+
+function renderCheckboxField({ label, name, checked = false, text }) {
+  return `
+    <label class="flex items-center gap-3 border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface">
+      <input
+        class="rounded-none border-outline bg-surface-container-lowest text-primary-container focus:ring-primary-container"
+        ${checked ? "checked" : ""}
+        name="${escapeHtml(name)}"
+        type="checkbox"
+      />
+      ${escapeHtml(text || label)}
+    </label>
+  `;
+}
+
+function renderError(error) {
+  if (!error) {
+    return "";
+  }
+
+  return `
+    <div class="border border-error/20 bg-error-container/20 px-4 py-3 text-sm text-error">
+      <div class="font-headline text-xs font-bold uppercase tracking-[0.18em]">${escapeHtml(
+        error.code || "Request failed"
+      )}</div>
+      <div class="mt-1 text-on-surface">${escapeHtml(error.message)}</div>
+    </div>
+  `;
+}
+
+function renderOpenConnectionForm(modal) {
+  return `
+    <form class="space-y-5" data-form="open-connection">
+      ${renderField({
+        label: "SQLite File Path",
+        name: "path",
+        placeholder: "/absolute/path/to/database.sqlite",
+      })}
+      ${renderField({
+        label: "Label",
+        name: "label",
+        placeholder: "Optional display name",
+      })}
+      ${renderCheckboxField({
+        label: "Open read-only",
+        name: "readOnly",
+        text: "Open read-only",
+      })}
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          data-action="close-modal"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          type="submit"
+        >
+          ${modal.submitting ? "Opening..." : "Open Database"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
+function renderEditConnectionForm(modal) {
+  const connection = modal.connection ?? {};
+
+  return `
+    <form class="space-y-5" data-form="edit-connection">
+      <input name="connectionId" type="hidden" value="${escapeHtml(connection.id ?? "")}" />
+      ${renderField({
+        label: "SQLite File Path",
+        name: "path",
+        placeholder: "/absolute/path/to/database.sqlite",
+        value: connection.path ?? "",
+      })}
+      ${renderField({
+        label: "Label",
+        name: "label",
+        placeholder: "Optional display name",
+        value: connection.label ?? "",
+      })}
+      ${renderCheckboxField({
+        label: "Open read-only",
+        name: "readOnly",
+        checked: Boolean(connection.readOnly),
+        text: "Open read-only",
+      })}
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          data-action="close-modal"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          type="submit"
+        >
+          ${modal.submitting ? "Saving..." : "Save Changes"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
+function renderCreateDatabaseForm(modal) {
+  return `
+    <form class="space-y-5" data-form="create-connection">
+      ${renderField({
+        label: "New SQLite File Path",
+        name: "path",
+        placeholder: "/absolute/path/to/new-database.sqlite",
+      })}
+      ${renderField({
+        label: "Label",
+        name: "label",
+        placeholder: "Optional display name",
+      })}
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          data-action="close-modal"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          type="submit"
+        >
+          ${modal.submitting ? "Creating..." : "Create Database"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
+function renderImportTargetOptions(state) {
+  const recentOptions = state.connections.recent
+    .map(
+      (connection) => `
+        <option value="${escapeHtml(connection.id)}">
+          ${escapeHtml(connection.label)} • ${escapeHtml(truncateMiddle(connection.path, 42))}
+        </option>
+      `
+    )
+    .join("");
+
+  return `
+    <label class="block space-y-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        Import Target
+      </span>
+      <select
+        class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+        name="targetMode"
+      >
+        ${
+          state.connections.active
+            ? '<option value="active">Use active database</option>'
+            : ""
+        }
+        ${state.connections.recent.length ? '<option value="recent">Use recent connection</option>' : ""}
+        <option value="create">Create new database from dump</option>
+        <option value="path">Open explicit target path</option>
+      </select>
+    </label>
+    ${
+      state.connections.recent.length
+        ? `
+          <label class="block space-y-2">
+            <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+              Recent Connection
+            </span>
+            <select
+              class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+              name="targetConnectionId"
+            >
+              ${recentOptions}
+            </select>
+          </label>
+        `
+        : ""
+    }
+    ${renderField({
+      label: "Target Path",
+      name: "targetPath",
+      placeholder: "/absolute/path/to/target.sqlite",
+    })}
+    ${renderField({
+      label: "Target Label",
+      name: "label",
+      placeholder: "Optional display name",
+    })}
+  `;
+}
+
+function renderImportSqlForm(modal, state) {
+  return `
+    <form class="space-y-5" data-form="import-sql">
+      ${renderField({
+        label: "SQL Dump Path",
+        name: "sqlFilePath",
+        placeholder: "/absolute/path/to/dump.sql",
+      })}
+      ${renderImportTargetOptions(state)}
+      <p class="text-[11px] leading-6 text-on-surface-variant/60">
+        Use an absolute filesystem path. Browsers do not expose local file paths, so SQLite Hub imports by
+        explicit path instead of file upload.
+      </p>
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          data-action="close-modal"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          type="submit"
+        >
+          ${modal.submitting ? "Importing..." : "Import SQL Dump"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
+export function renderModal(state) {
+  const modal = state.modal;
+
+  if (!modal) {
+    return "";
+  }
+
+  const contentByKind = {
+    "open-connection": {
+      eyebrow: "Filesystem // Open existing SQLite database",
+      title: "Connect Database",
+      body: renderOpenConnectionForm(modal),
+    },
+    "create-connection": {
+      eyebrow: "Filesystem // Create a new SQLite database",
+      title: "Create Database",
+      body: renderCreateDatabaseForm(modal),
+    },
+    "import-sql": {
+      eyebrow: "Import // Execute SQL dump into SQLite",
+      title: "Import SQL Dump",
+      body: renderImportSqlForm(modal, state),
+    },
+    "edit-connection": {
+      eyebrow: "Registry // Update saved SQLite target",
+      title: "Edit Connection",
+      body: renderEditConnectionForm(modal),
+    },
+  };
+
+  const config = contentByKind[modal.kind];
+
+  if (!config) {
+    return "";
+  }
+
+  return `
+    <div class="fixed inset-0 z-50 flex items-center justify-center bg-background/85 px-4 backdrop-blur-sm">
+      <div class="w-full max-w-xl border border-outline-variant/20 bg-surface-container shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
+        <div class="flex items-start justify-between gap-4 border-b border-outline-variant/10 bg-surface-container-low px-6 py-5">
+          <div>
+            <div class="text-[10px] font-mono uppercase tracking-[0.26em] text-primary-container/70">
+              ${escapeHtml(config.eyebrow)}
+            </div>
+            <h2 class="mt-2 font-headline text-3xl font-black uppercase tracking-tight text-primary-container">
+              ${escapeHtml(config.title)}
+            </h2>
+          </div>
+          <button
+            class="flex h-10 w-10 items-center justify-center border border-outline-variant/20 text-on-surface-variant hover:bg-surface-container-highest hover:text-primary-container"
+            data-action="close-modal"
+            type="button"
+          >
+            <span class="material-symbols-outlined">close</span>
+          </button>
+        </div>
+        <div class="space-y-5 px-6 py-6">${config.body}</div>
+      </div>
+    </div>
+  `;
+}

package/js/components/pageHeader.js

@@ -0,0 +1,33 @@
+import { escapeHtml } from "../utils/format.js";
+
+export function renderPageHeader({ eyebrow = "", title, subtitle = "", actions = "" }) {
+  return `
+    <div class="mb-10 flex flex-wrap items-end justify-between gap-6">
+      <div>
+        ${
+          eyebrow
+            ? `
+              <div class="page-eyebrow">
+                <span class="text-[#FCE300] text-xs font-mono font-bold tracking-widest uppercase">${escapeHtml(
+                  eyebrow
+                )}</span>
+                <div class="page-eyebrow-line"></div>
+              </div>
+            `
+            : ""
+        }
+        <h1 class="text-5xl font-['Space_Grotesk'] font-bold text-[#FCE300] tracking-tighter uppercase">${escapeHtml(
+          title
+        )}</h1>
+        ${
+          subtitle
+            ? `<p class="text-xs font-mono text-on-surface/40 mt-1 uppercase tracking-widest">${escapeHtml(
+                subtitle
+              )}</p>`
+            : ""
+        }
+      </div>
+      ${actions ? `<div class="flex gap-3">${actions}</div>` : ""}
+    </div>
+  `;
+}