From d6448159fa8f62eeb2819602ed3ff5398e489664 Mon Sep 17 00:00:00 2001
From: ZDDC <caseywitt@proton.me>
Date: Sun, 3 May 2026 19:59:38 -0500
Subject: [PATCH] release: v0.0.12 lockstep

---
 mdedit/dist/mdedit.html                      |    2 +-
 zddc/internal/apps/embedded/archive.html     |    2 +-
 zddc/internal/apps/embedded/browse.html      | 1905 ++++++++++++++++++
 zddc/internal/apps/embedded/classifier.html  |    2 +-
 zddc/internal/apps/embedded/index.html       |    2 +-
 zddc/internal/apps/embedded/mdedit.html      |    2 +-
 zddc/internal/apps/embedded/transmittal.html |    2 +-
 zddc/internal/apps/embedded/versions.txt     |   13 +-
 zddc/internal/handler/form.html              |    2 +-
 9 files changed, 1919 insertions(+), 13 deletions(-)
diff --git a/mdedit/dist/mdedit.html b/mdedit/dist/mdedit.html
index c66669f..fc4b5c5 100644
--- a/mdedit/dist/mdedit.html
+++ b/mdedit/dist/mdedit.html
@@ -1774,7 +1774,7 @@ body.help-open .app-header {
                 </svg>
                 <div class="header-title-group">
                     <span class="app-header__title">ZDDC Markdown</span>
-                    <span class="build-timestamp">v0.0.11</span>
+                    <span class="build-timestamp">v0.0.12</span>
                 </div>
                 <button id="select-directory" class="btn btn-primary" title="Select a Directory">Select Directory</button>
             </div>
diff --git a/zddc/internal/apps/embedded/archive.html b/zddc/internal/apps/embedded/archive.html
index 3562716..4b03800 100644
--- a/zddc/internal/apps/embedded/archive.html
+++ b/zddc/internal/apps/embedded/archive.html
@@ -2113,7 +2113,7 @@ td[data-field="trackingNumber"] {
                 </svg>
                 <div class="header-title-group">
                     <span class="app-header__title">ZDDC Archive</span>
-                    <span class="build-timestamp">v0.0.11</span>
+                    <span class="build-timestamp">v0.0.12</span>
                 </div>
                 <button id="addDirectoryBtn" class="btn btn-primary">Add Local Directory</button>
                 <button id="refreshHeaderBtn" class="btn btn-secondary hidden" title="Refresh Data" style="font-size:1.1rem;">⟳</button>
diff --git a/zddc/internal/apps/embedded/browse.html b/zddc/internal/apps/embedded/browse.html
index e69de29..bbc0f5f 100644
--- a/zddc/internal/apps/embedded/browse.html
+++ b/zddc/internal/apps/embedded/browse.html
@@ -0,0 +1,1905 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ZDDC Browse</title>
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iMTIiIGZpbGw9IiMxZTNhNWYiLz4KICA8ZyBmaWxsPSIjZmZmIj4KICAgIDxyZWN0IHg9IjE0IiB5PSIxOCIgd2lkdGg9IjM2IiBoZWlnaHQ9IjciLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iNDMsMjUgNTAsMjUgMjEsNDMgMTQsNDMiLz4KICAgIDxyZWN0IHg9IjE0IiB5PSI0MyIgd2lkdGg9IjM2IiBoZWlnaHQ9IjciLz4KICA8L2c+Cjwvc3ZnPgo=">
+    <style>
+/* ==========================================================================
+   ZDDC Shared Base — single source of truth for tokens and primitives
+   Included first by every tool's build.sh via ../shared/base.css
+   ========================================================================== */
+
+/* ── CSS custom properties ────────────────────────────────────────────────── */
+:root {
+    /* Brand / accent (matches zddc.varasys.io website --accent) */
+    --primary:        #2a5a8a;
+    --primary-hover:  #1d4060;
+    --primary-active: #163352;
+    --primary-light:  #e8f0f7;
+
+    /* Semantic colours */
+    --success: #28a745;
+    --warning: #d97706;
+    --danger:  #dc3545;
+    --info:    #17a2b8;
+
+    /* Backgrounds */
+    --bg:           #ffffff;
+    --bg-secondary: #f8f9fa;
+    --bg-hover:     #f0f4f8;
+    --bg-selected:  var(--primary-light);
+
+    /* Text */
+    --text:       #212529;
+    --text-muted: #6c757d;
+    --text-light: #ffffff;
+
+    /* Borders */
+    --border:      #dee2e6;
+    --border-dark: #adb5bd;
+
+    /* Shape */
+    --radius: 4px;
+
+    /* Typography */
+    --font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
+}
+
+/* ── Dark mode tokens ─────────────────────────────────────────────────────── */
+/* Applied via: OS preference (auto) or [data-theme="dark"] on <html>          */
+/* The [data-theme="light"] selector locks light mode regardless of OS pref.   */
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+        --primary:        #4a90c4;
+        --primary-hover:  #5ba3d9;
+        --primary-active: #6ab5e8;
+        --primary-light:  #1a3550;
+
+        --bg:           #1e1e1e;
+        --bg-secondary: #252526;
+        --bg-hover:     #2d2d30;
+        --bg-selected:  #1a3550;
+
+        --text:       #d4d4d4;
+        --text-muted: #9d9d9d;
+        --text-light: #ffffff;
+
+        --border:      #3e3e42;
+        --border-dark: #6e6e72;
+    }
+}
+
+/* Manual dark override — wins over media query */
+[data-theme="dark"] {
+    --primary:        #4a90c4;
+    --primary-hover:  #5ba3d9;
+    --primary-active: #6ab5e8;
+    --primary-light:  #1a3550;
+
+    --bg:           #1e1e1e;
+    --bg-secondary: #252526;
+    --bg-hover:     #2d2d30;
+    --bg-selected:  #1a3550;
+
+    --text:       #d4d4d4;
+    --text-muted: #9d9d9d;
+    --text-light: #ffffff;
+
+    --border:      #3e3e42;
+    --border-dark: #6e6e72;
+}
+
+/* ── Reset ────────────────────────────────────────────────────────────────── */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+/* ── Base document ────────────────────────────────────────────────────────── */
+html, body {
+    height: 100%;
+    font-family: var(--font);
+    font-size: 16px;
+    line-height: 1.5;
+    color: var(--text);
+    background-color: var(--bg-secondary);
+}
+
+/* ── Typography ───────────────────────────────────────────────────────────── */
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+a {
+    color: var(--primary);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+/* ── Utility ──────────────────────────────────────────────────────────────── */
+.hidden {
+    display: none !important;
+}
+
+.truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* ── Scrollbars (webkit) ──────────────────────────────────────────────────── */
+::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #a0a0a0;
+}
+
+/* ── Button primitive ─────────────────────────────────────────────────────── */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.4rem 0.85rem;
+    font-family: var(--font);
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.4;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s;
+    background: var(--bg-secondary);
+    color: var(--text);
+}
+
+.btn:disabled,
+.btn[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn:not(:disabled):hover {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+}
+
+.btn:not(:disabled):active {
+    box-shadow: none;
+}
+
+/* Variants */
+.btn-primary {
+    background: var(--primary);
+    color: var(--text-light);
+    border-color: var(--primary);
+}
+
+.btn-primary:not(:disabled):hover {
+    background: var(--primary-hover);
+    border-color: var(--primary-hover);
+    color: var(--text-light);
+}
+
+.btn-primary:not(:disabled):active {
+    background: var(--primary-active);
+    border-color: var(--primary-active);
+}
+
+.btn-secondary {
+    background: var(--bg);
+    color: var(--text);
+    border-color: var(--border);
+}
+
+.btn-secondary:not(:disabled):hover {
+    background: var(--bg-secondary);
+}
+
+.btn-success {
+    background: var(--success);
+    color: var(--text-light);
+    border-color: var(--success);
+}
+
+.btn-danger {
+    background: var(--danger);
+    color: var(--text-light);
+    border-color: var(--danger);
+}
+
+/* Sizes */
+.btn-sm {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+}
+
+.btn-lg {
+    padding: 0.6rem 1.4rem;
+    font-size: 1rem;
+}
+
+.btn-link {
+    background: transparent;
+    border-color: transparent;
+    color: var(--primary);
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.btn-link:not(:disabled):hover {
+    text-decoration: underline;
+    box-shadow: none;
+}
+
+/* ── App header chrome ────────────────────────────────────────────────────── */
+.app-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.35rem 1rem;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
+/* Tool name inside the header */
+.app-header__title {
+    font-size: 17px;
+    font-weight: 600;
+    color: var(--text);
+    letter-spacing: 0.01em;
+    white-space: nowrap;
+}
+
+/* Brand logo — sits left of the title in every tool's app-header.
+   Self-contained: the SVG provides its own dark blue rounded background,
+   so no extra wrapper styling is needed. */
+.app-header__logo {
+    width: 26px;
+    height: 26px;
+    flex-shrink: 0;
+    display: block;
+}
+
+/* ── Build timestamp ──────────────────────────────────────────────────────── */
+.build-timestamp {
+    font-size: 0.55rem;
+    color: var(--text-muted);
+    opacity: 0.7;
+    font-weight: 300;
+    white-space: nowrap;
+    padding-top: 0.15rem;
+}
+
+/* Title + timestamp stacked vertically on the left side of the header */
+.header-title-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    line-height: 1;
+}
+
+/* ── Icon buttons (help, theme, refresh) ─────────────────────────────────── */
+/* Square, centered — overrides the asymmetric text-button padding/line-height */
+#help-btn,
+#theme-btn,
+#refreshHeaderBtn {
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+}
+
+/* Toast CSS lives in classifier/css/base.css — only that tool uses toasts. */
+
+/* ── Theme and help icon buttons ─────────────────────────────────────────── */
+#theme-btn,
+#help-btn {
+    font-size: 1rem;
+}
+
+/* ── Help panel (shared slide-out drawer) ─────────────────────────────────── */
+/* Used by all four tools. Toggle open/close via shared/help.js.               */
+
+.help-panel {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: min(420px, 85vw);
+    height: 100vh;
+    z-index: 1000;
+    background: var(--bg);
+    border-left: 1px solid var(--border);
+    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08);
+    display: flex;
+    flex-direction: column;
+    transform: translateX(100%);
+    transition: transform 0.25s ease;
+}
+
+.help-panel:not([hidden]) {
+    transform: translateX(0);
+}
+
+.help-panel[hidden] {
+    display: flex;
+    transform: translateX(100%);
+    pointer-events: none;
+}
+
+.help-panel__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+    background: var(--bg);
+}
+
+.help-panel__title {
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--text);
+    margin: 0;
+}
+
+.help-panel__close {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 1.35rem;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius);
+    line-height: 1;
+    transition: background 0.15s, color 0.15s;
+}
+
+.help-panel__close:hover {
+    color: var(--text);
+    background: var(--bg-secondary);
+}
+
+.help-panel__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem 1rem 2rem;
+    font-size: 0.85rem;
+    line-height: 1.6;
+    color: var(--text);
+}
+
+.help-panel__body h3 {
+    font-size: 0.95rem;
+    font-weight: 700;
+    margin: 1.25rem 0 0.35rem;
+    color: var(--text);
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 0.15rem;
+}
+
+.help-panel__body h3:first-child {
+    margin-top: 0;
+}
+
+.help-panel__body h4 {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    margin: 1.25rem 0 0.3rem;
+    padding-left: 0.5rem;
+    border-left: 3px solid var(--border-dark);
+    color: var(--text-muted);
+}
+
+.help-panel__body p {
+    margin: 0 0 0.5rem;
+}
+
+.help-panel__body ol,
+.help-panel__body ul {
+    padding-left: 1.5rem;
+    margin: 0.3rem 0 0.5rem;
+}
+
+.help-panel__body li {
+    margin-bottom: 0.3rem;
+}
+
+.help-panel__body dl {
+    margin: 0.3rem 0;
+}
+
+.help-panel__body dt {
+    font-weight: 600;
+    color: var(--text);
+}
+
+.help-panel__body dd {
+    margin: 0 0 0.5rem 1rem;
+    color: var(--text-muted);
+}
+
+.help-panel__body code {
+    font-family: var(--font-mono);
+    font-size: 0.8em;
+    background: var(--bg-secondary);
+    padding: 0.1em 0.3em;
+    border-radius: 3px;
+}
+
+.help-badge {
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 0.1rem 0.35rem;
+    border-radius: var(--radius);
+    vertical-align: middle;
+    letter-spacing: 0.02em;
+}
+
+.help-badge--draft {
+    color: #2563eb;
+    background: #eff6ff;
+}
+
+.help-badge--published {
+    color: #7c3aed;
+    background: #f5f3ff;
+}
+
+/* Shrink main content when help panel is open */
+body.help-open .app-header {
+    margin-right: min(420px, 85vw);
+}
+
+/* ── Column filter inputs (shared across archive, classifier, transmittal) ─── */
+.column-filter {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: 0.25rem;
+    padding: 0.2rem 0.4rem;
+    font-size: 0.8rem;
+    font-family: var(--font);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--bg);
+    color: var(--text);
+    transition: border-color 0.15s;
+}
+
+.column-filter:focus {
+    border-color: var(--primary);
+    outline: none;
+    box-shadow: 0 0 0 1px rgba(42, 90, 138, 0.35);
+}
+
+.column-filter::placeholder {
+    color: var(--text-muted);
+}
+
+/* browse-specific layout on top of shared/base.css */
+
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font);
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+#appMain {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+/* Empty / first-paint state */
+.empty-state {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.empty-state__inner {
+    max-width: 640px;
+    color: var(--text-muted);
+    line-height: 1.5;
+}
+
+.empty-state__inner h2 {
+    color: var(--text);
+    margin: 0 0 1rem 0;
+    font-size: 1.5rem;
+}
+
+.empty-state__inner ul {
+    margin: 1rem 0;
+    padding-left: 1.5rem;
+}
+
+.empty-state__inner li {
+    margin: 0.4rem 0;
+}
+
+.hidden { display: none !important; }
+
+/* Status bar — shows transient errors/info */
+.status-bar {
+    padding: 0.4rem 1rem;
+    background: var(--bg-secondary);
+    border-top: 1px solid var(--border);
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    min-height: 1.6rem;
+    line-height: 1.6rem;
+    flex-shrink: 0;
+}
+
+.status-bar--error { color: #b00020; }
+.status-bar--info  { color: var(--primary); }
+
+/* Toolbar above the listing */
+
+.browse-root {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.toolbar {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.6rem 1rem;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+    flex-wrap: wrap;
+}
+
+.toolbar__path {
+    font-family: Consolas, Monaco, monospace;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.toolbar__filter {
+    width: 22rem;
+    max-width: 100%;
+    padding: 0.3rem 0.6rem;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    background: var(--bg);
+    color: var(--text);
+    font-size: 0.9rem;
+}
+
+.toolbar__count {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    white-space: nowrap;
+}
+
+/* Table — folders + files in a tree */
+
+.browse-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9rem;
+    background: var(--bg);
+    flex: 1;
+}
+
+.browse-table thead th {
+    position: sticky;
+    top: 0;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border);
+    text-align: left;
+    padding: 0.5rem 0.75rem;
+    font-weight: 600;
+    color: var(--text);
+    user-select: none;
+    z-index: 1;
+}
+
+.browse-table th.sortable {
+    cursor: pointer;
+}
+
+.browse-table th.sortable:hover {
+    background: var(--bg-hover, #e8e8e8);
+}
+
+.sort-arrow {
+    display: inline-block;
+    width: 0.7rem;
+    color: var(--text-muted);
+    font-size: 0.7rem;
+    margin-left: 0.2rem;
+}
+
+.browse-table th.sort-asc .sort-arrow::after  { content: "▲"; color: var(--text); }
+.browse-table th.sort-desc .sort-arrow::after { content: "▼"; color: var(--text); }
+
+.browse-table tbody td {
+    padding: 0.3rem 0.75rem;
+    border-bottom: 1px solid var(--border);
+    vertical-align: middle;
+}
+
+.browse-table tbody tr:hover {
+    background: var(--bg-hover, #f6faff);
+}
+
+/* Tree-row — name cell with indent + chevron */
+
+.tree-name {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-width: 0;
+}
+
+.tree-name__indent {
+    flex: 0 0 auto;
+}
+
+.tree-name__chevron {
+    width: 1rem;
+    text-align: center;
+    color: var(--text-muted);
+    cursor: pointer;
+    user-select: none;
+    flex: 0 0 1rem;
+    line-height: 1;
+}
+
+.tree-name__chevron--leaf { visibility: hidden; }
+.tree-name__chevron::before { content: "▶"; font-size: 0.65rem; }
+.tree-row.expanded > td .tree-name__chevron::before { content: "▼"; }
+
+.tree-name__icon {
+    flex: 0 0 1.1rem;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 1rem;
+    line-height: 1;
+}
+
+.tree-name__label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text);
+}
+
+.tree-name__label.is-folder {
+    font-weight: 500;
+}
+
+.tree-name__label.is-file {
+    cursor: pointer;
+    color: var(--primary);
+    text-decoration: none;
+}
+
+.tree-name__label.is-file:hover {
+    text-decoration: underline;
+}
+
+/* Numeric columns right-aligned */
+.col-size, .col-date {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    color: var(--text-muted);
+}
+
+.col-ext {
+    color: var(--text-muted);
+    font-family: Consolas, Monaco, monospace;
+    font-size: 0.85rem;
+}
+
+/* Loading row */
+.tree-row--loading td {
+    color: var(--text-muted);
+    font-style: italic;
+    padding: 0.5rem 1rem 0.5rem calc(0.75rem + 2.4rem);
+}
+
+/* When filter hides a row */
+.tree-row--filtered { display: none; }
+
+    </style>
+</head>
+<body>
+    <header class="app-header">
+        <div class="header-left">
+            <svg class="app-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true">
+                <rect width="64" height="64" rx="12" fill="#1e3a5f"/>
+                <g fill="#fff">
+                    <rect x="14" y="18" width="36" height="7"/>
+                    <polygon points="43,25 50,25 21,43 14,43"/>
+                    <rect x="14" y="43" width="36" height="7"/>
+                </g>
+            </svg>
+            <div class="header-title-group">
+                <span class="app-header__title">ZDDC Browse</span>
+                <span class="build-timestamp">v0.0.12</span>
+            </div>
+            <button id="addDirectoryBtn" class="btn btn-primary">Select Directory</button>
+        </div>
+        <div class="header-right">
+            <button id="theme-btn" class="btn btn-secondary" title="Theme: auto (follows OS)" aria-label="Theme: auto (follows OS)">◐</button>
+        </div>
+    </header>
+
+    <main id="appMain">
+        <div id="emptyState" class="empty-state">
+            <div class="empty-state__inner">
+                <h2>ZDDC Browse</h2>
+                <p>A simple directory listing for ZDDC archives — and any directory.
+                Pick how you want to browse:</p>
+                <ul>
+                    <li><b>Online</b> — when this page is served by zddc-server, the
+                    listing for the current directory loads automatically.</li>
+                    <li><b>Local</b> — click <i>Select Directory</i> to pick any folder
+                    on your computer (Chromium-based browsers).</li>
+                </ul>
+                <p>Once loaded: click folders to expand, click headers to sort, type
+                in the filter to narrow by name. Click any file to open it.</p>
+            </div>
+        </div>
+
+        <div id="browseRoot" class="browse-root hidden">
+            <div class="toolbar">
+                <span class="toolbar__path" id="currentPath"></span>
+                <input type="search" id="filterInput" class="toolbar__filter"
+                       placeholder="Filter by name (substring)..." />
+                <span class="toolbar__count" id="entryCount"></span>
+            </div>
+            <table class="browse-table" id="browseTable">
+                <thead>
+                    <tr>
+                        <th data-sort="name" class="col-name sortable">Name <span class="sort-arrow"></span></th>
+                        <th data-sort="size" class="col-size sortable">Size <span class="sort-arrow"></span></th>
+                        <th data-sort="ext"  class="col-ext  sortable">Type <span class="sort-arrow"></span></th>
+                        <th data-sort="date" class="col-date sortable">Modified <span class="sort-arrow"></span></th>
+                    </tr>
+                </thead>
+                <tbody id="browseTbody"></tbody>
+            </table>
+        </div>
+    </main>
+
+    <div id="statusBar" class="status-bar"></div>
+
+    <script>
+/**
+ * ZDDC — shared naming convention library
+ *
+ * Canonical implementation of all ZDDC filename, folder name, tracking number,
+ * revision, and status logic.  Included in every tool's build via shared/zddc.js.
+ *
+ * Exposed as window.zddc (plain global) so it works with every tool's module
+ * pattern (archive globals, classifier IIFE, transmittal IIFE, mdedit globals).
+ *
+ * Public API
+ * ----------
+ *   zddc.parseFilename(str)        → ParsedFile | null
+ *   zddc.parseFolder(str)          → ParsedFolder | null
+ *   zddc.parseRevision(str)        → ParsedRevision
+ *   zddc.formatFilename(parts)     → string
+ *   zddc.formatFolder(parts)       → string
+ *   zddc.compareRevisions(a, b)    → number  (-1 | 0 | 1)
+ *   zddc.isValidStatus(str)        → boolean
+ *   zddc.STATUSES                  → string[]
+ *
+ * ParsedFile   { trackingNumber, revision, status, title, extension }
+ * ParsedFolder { date, trackingNumber, status, title }
+ * ParsedRevision { base, modifier, modifierType, modifierNumber, isDraft, full }
+ */
+
+(function (root) {
+    'use strict';
+
+    // ── Valid status codes ───────────────────────────────────────────────────
+
+    /**
+     * Complete list of valid ZDDC document status codes.
+     * '---' denotes an unknown or not-yet-assigned status.
+     */
+    var STATUSES = [
+        '---',
+        'IFA', 'IFB', 'IFC', 'IFD', 'IFI', 'IFP', 'IFR', 'IFU',
+        'REC',
+        'RSA', 'RSB', 'RSC', 'RSD', 'RSI',
+    ];
+
+    var STATUS_SET = {};
+    for (var _i = 0; _i < STATUSES.length; _i++) {
+        STATUS_SET[STATUSES[_i]] = true;
+    }
+
+    function isValidStatus(str) {
+        return !!STATUS_SET[str];
+    }
+
+    // ── Filename parsing ─────────────────────────────────────────────────────
+
+    /**
+     * Canonical file regex.
+     * Matches: TRACKING_REVISION (STATUS) - TITLE.EXT
+     *
+     * Tracking number: no underscores, no whitespace.
+     * Revision:        no whitespace, no parentheses.
+     * Status:          anything inside parentheses (validated separately).
+     * Title:           everything up to the last dot.
+     * Extension:       after the last dot (lowercased by parseFilename).
+     */
+    var FILE_RE = /^([^_\s]+)_([^\s()_]+)\s*\(([^)]+)\)\s*-\s*(\S.*\S|\S)\.\s*([^\s.]+)$/;
+
+    /**
+     * Parse a ZDDC filename.
+     *
+     * @param {string} filename
+     * @returns {{ trackingNumber: string, revision: string, status: string,
+     *             title: string, extension: string, valid: boolean } | null}
+     *   null only if filename is falsy.
+     *   `valid` is true when all fields matched the ZDDC pattern.
+     */
+    function parseFilename(filename) {
+        if (!filename) { return null; }
+
+        var match = filename.match(FILE_RE);
+
+        if (!match) {
+            var lastDot = filename.lastIndexOf('.');
+            return {
+                trackingNumber: '',
+                revision:       '',
+                status:         '',
+                title:          lastDot > 0 ? filename.substring(0, lastDot) : filename,
+                extension:      lastDot > 0 ? filename.substring(lastDot + 1).toLowerCase() : '',
+                valid:          false,
+            };
+        }
+
+        return {
+            trackingNumber: match[1].trim(),
+            revision:       match[2].trim(),
+            status:         match[3].trim(),
+            title:          match[4].trim(),
+            extension:      match[5].toLowerCase(),
+            valid:          true,
+        };
+    }
+
+    // ── Folder name parsing ──────────────────────────────────────────────────
+
+    /**
+     * Transmittal folder regex.
+     * Matches: YYYY-MM-DD_TRACKING (STATUS) - TITLE
+     */
+    var FOLDER_RE = /^(\d{4}-\d{2}-\d{2})_([^_\s(]+)\s*\(([^)]+)\)\s*-\s*(.+)$/;
+
+    /**
+     * Parse a ZDDC transmittal folder name.
+     *
+     * @param {string} foldername
+     * @returns {{ date: string, trackingNumber: string, status: string,
+     *             title: string, valid: boolean } | null}
+     *   null only if foldername is falsy.
+     */
+    function parseFolder(foldername) {
+        if (!foldername) { return null; }
+
+        var match = foldername.match(FOLDER_RE);
+
+        if (!match) {
+            return {
+                date:            '',
+                trackingNumber:  '',
+                status:          '',
+                title:           foldername,
+                valid:           false,
+            };
+        }
+
+        return {
+            date:           match[1],
+            trackingNumber: match[2].trim(),
+            status:         match[3].trim(),
+            title:          match[4].trim(),
+            valid:          true,
+        };
+    }
+
+    // ── Revision parsing ─────────────────────────────────────────────────────
+
+    /**
+     * Modifier sub-regex: +LETTER DIGITS  e.g. +C1, +B2, +N1, +Q1
+     * The draft prefix (~) may appear inside the modifier: A+~C1
+     */
+    var MODIFIER_RE = /^\+(~?)([A-Za-z])(\d+)$/;
+
+    /**
+     * Parse a ZDDC revision string.
+     *
+     * Revision grammar:
+     *   revision     = ['~'] base ['+' ['~'] modifier_letter modifier_number]
+     *   base         = letter(s) | digit(s) | date(YYYY-MM-DD)
+     *   modifier     = letter + digits   e.g. C1, B2, N1, Q1
+     *
+     * @param {string} revision
+     * @returns {{
+     *   base: string,
+     *   modifier: string,       full modifier string e.g. '+C1', '' if none
+     *   modifierType: string,   modifier letter e.g. 'C', '' if none
+     *   modifierNumber: number, modifier number e.g. 1, 0 if none
+     *   modifierIsDraft: boolean,
+     *   isDraft: boolean,       true if base revision starts with ~
+     *   full: string,           original input
+     * }}
+     */
+    function parseRevision(revision) {
+        var raw = (revision || '').toString();
+
+        // Split on '+' to separate base from optional modifier
+        var plusIdx = raw.indexOf('+');
+        var basePart     = plusIdx === -1 ? raw : raw.substring(0, plusIdx);
+        var modifierPart = plusIdx === -1 ? ''  : raw.substring(plusIdx);
+
+        // Draft flag on the base part
+        var isDraft = basePart.startsWith('~');
+        var base    = isDraft ? basePart.substring(1) : basePart;
+
+        // Parse modifier
+        var modifier        = '';
+        var modifierType    = '';
+        var modifierNumber  = 0;
+        var modifierIsDraft = false;
+
+        if (modifierPart) {
+            var mMatch = modifierPart.match(MODIFIER_RE);
+            if (mMatch) {
+                modifierIsDraft = mMatch[1] === '~';
+                modifierType    = mMatch[2].toUpperCase();
+                modifierNumber  = parseInt(mMatch[3], 10);
+                modifier        = modifierPart;
+            } else {
+                // Unrecognised modifier — preserve as-is
+                modifier = modifierPart;
+            }
+        }
+
+        return {
+            base:           base,
+            modifier:       modifier,
+            modifierType:   modifierType,
+            modifierNumber: modifierNumber,
+            modifierIsDraft: modifierIsDraft,
+            isDraft:        isDraft,
+            full:           raw,
+        };
+    }
+
+    // ── Revision comparison ──────────────────────────────────────────────────
+
+    /**
+     * Classify a base revision string into a sort tier:
+     *   0 = date (YYYY-MM-DD)
+     *   1 = letter(s)   A, B, AA …
+     *   2 = number(s)   0, 1, 2, 1.5 …
+     *   3 = other
+     */
+    function _baseTier(base) {
+        if (/^\d{4}-\d{2}-\d{2}$/.test(base)) { return 0; }
+        if (/^[A-Za-z]+$/.test(base))          { return 1; }
+        if (/^\d+(\.\d+)?$/.test(base))         { return 2; }
+        return 3;
+    }
+
+    /**
+     * Compare two base revision strings.
+     * Sort order: dates < letters < numbers < other.
+     */
+    function _compareBase(a, b) {
+        var ta = _baseTier(a);
+        var tb = _baseTier(b);
+        if (ta !== tb) { return ta - tb; }
+
+        if (ta === 0) { return a < b ? -1 : a > b ? 1 : 0; }       // date lexicographic = chronological
+        if (ta === 1) { return a.toUpperCase() < b.toUpperCase() ? -1 : a.toUpperCase() > b.toUpperCase() ? 1 : 0; }
+        if (ta === 2) { return parseFloat(a) - parseFloat(b); }
+        return a.localeCompare(b);
+    }
+
+    /**
+     * Compare two ZDDC revision strings for sort ordering.
+     *
+     * Canonical order (ascending = older → newer):
+     *   ~A  <  A  <  A+B1  <  A+C1  <  A+~C2  <  A+C2  <  A+N1  <  A+Q1
+     *   <  ~B  <  B  < … < 0 < 1 < 2
+     *
+     * Rules:
+     *   1. Compare base revisions first (dates < letters < numbers).
+     *   2. For equal bases, draft (isDraft=true) comes before final.
+     *   3. For equal base+draft, no-modifier < has-modifier.
+     *   4. For equal base+draft+modifier presence:
+     *      a. modifier draft comes before modifier final (modifierIsDraft).
+     *      b. Sort modifier by type letter then by number.
+     *
+     * @param {string} a
+     * @param {string} b
+     * @returns {number}  negative if a < b, 0 if equal, positive if a > b
+     */
+    function compareRevisions(a, b) {
+        var pa = parseRevision(a);
+        var pb = parseRevision(b);
+
+        // 1. Base revision
+        var baseCmp = _compareBase(pa.base, pb.base);
+        if (baseCmp !== 0) { return baseCmp; }
+
+        // 2. Draft before final (for same base)
+        if (pa.isDraft !== pb.isDraft) { return pa.isDraft ? -1 : 1; }
+
+        // 3. No modifier before any modifier
+        var aHasMod = pa.modifier !== '';
+        var bHasMod = pb.modifier !== '';
+        if (aHasMod !== bHasMod) { return aHasMod ? 1 : -1; }
+
+        if (!aHasMod) { return 0; } // both have no modifier
+
+        // 4. Compare modifiers: type → number → draft (draft is a tie-breaker only)
+        // 4a. Modifier type letter (B < C < N < Q …)
+        if (pa.modifierType !== pb.modifierType) {
+            return pa.modifierType < pb.modifierType ? -1 : 1;
+        }
+
+        // 4b. Modifier number (1 < 2 …)
+        if (pa.modifierNumber !== pb.modifierNumber) {
+            return pa.modifierNumber - pb.modifierNumber;
+        }
+
+        // 4c. Draft of a modifier comes before the final modifier (same type+number)
+        if (pa.modifierIsDraft !== pb.modifierIsDraft) {
+            return pa.modifierIsDraft ? -1 : 1;
+        }
+
+        return 0;
+    }
+
+    // ── Filename / folder formatting ─────────────────────────────────────────
+
+    /**
+     * Build a ZDDC filename from its components.
+     *
+     * @param {{ trackingNumber: string, revision: string, status: string,
+     *           title: string, extension: string }} parts
+     * @returns {string}  e.g. "123456-EL-SPC-2623_A (IFR) - Specification.pdf"
+     */
+    function formatFilename(parts) {
+        var tn  = (parts.trackingNumber || '').trim();
+        var rev = (parts.revision       || '').trim();
+        var st  = (parts.status         || '').trim();
+        var ttl = (parts.title          || '').trim();
+        var ext = (parts.extension      || '').replace(/^\./, '');
+
+        if (!tn || !rev || !st || !ttl) { return ''; }
+
+        var name = tn + '_' + rev + ' (' + st + ') - ' + ttl;
+        return ext ? name + '.' + ext : name;
+    }
+
+    /**
+     * Build a ZDDC transmittal folder name from its components.
+     *
+     * @param {{ date: string, trackingNumber: string, status: string,
+     *           title: string }} parts
+     * @returns {string}  e.g. "2025-10-31_123456-EM-SUB-0001 (IFR) - Title"
+     */
+    function formatFolder(parts) {
+        var dt  = (parts.date           || '').trim();
+        var tn  = (parts.trackingNumber || '').trim();
+        var st  = (parts.status         || '').trim();
+        var ttl = (parts.title          || '').trim();
+
+        if (!dt || !tn || !st || !ttl) { return ''; }
+
+        return dt + '_' + tn + ' (' + st + ') - ' + ttl;
+    }
+
+    // ── Filename / extension splitting ───────────────────────────────────────
+
+    /**
+     * Split a filename into its base name and extension (no leading dot).
+     * Treats leading dot ('.gitignore') as no extension.
+     *
+     * @param {string} filename
+     * @returns {{ name: string, extension: string }}
+     */
+    function splitExtension(filename) {
+        if (!filename) { return { name: '', extension: '' }; }
+        var lastDot = filename.lastIndexOf('.');
+        if (lastDot <= 0) { return { name: filename, extension: '' }; }
+        return {
+            name:      filename.substring(0, lastDot),
+            extension: filename.substring(lastDot + 1).toLowerCase(),
+        };
+    }
+
+    /**
+     * Join a base name and extension. Tolerant of either form ('pdf' or '.pdf').
+     * Returns just the name when extension is empty.
+     */
+    function joinExtension(name, extension) {
+        var ext = (extension || '').replace(/^\./, '');
+        return ext ? name + '.' + ext : name;
+    }
+
+    // ── Public API ───────────────────────────────────────────────────────────
+
+    root.zddc = {
+        STATUSES:         STATUSES,
+        isValidStatus:    isValidStatus,
+        parseFilename:    parseFilename,
+        parseFolder:      parseFolder,
+        parseRevision:    parseRevision,
+        formatFilename:   formatFilename,
+        formatFolder:     formatFolder,
+        compareRevisions: compareRevisions,
+        splitExtension:   splitExtension,
+        joinExtension:    joinExtension,
+    };
+
+}(typeof window !== 'undefined' ? window : this));
+
+/**
+ * ZDDC shared theme toggle — light / dark / auto.
+ * Persists choice to localStorage under 'zddc-theme'.
+ * Works with all four tools regardless of their module pattern.
+ * Expects: #theme-btn in the DOM (optional — skips gracefully if absent).
+ *
+ * Theme cycle: auto → light → dark → auto …
+ * 'auto' honours the OS prefers-color-scheme media query (CSS handles it).
+ * 'light' sets data-theme="light" on <html> (overrides dark media query).
+ * 'dark'  sets data-theme="dark"  on <html>.
+ */
+(function () {
+    'use strict';
+
+    var STORAGE_KEY = 'zddc-theme';
+    var THEMES = ['auto', 'light', 'dark'];
+
+    var LABELS = {
+        auto:  '◐',
+        light: '☀',
+        dark:  '☾'
+    };
+
+    var TITLES = {
+        auto:  'Theme: auto (follows OS)',
+        light: 'Theme: light',
+        dark:  'Theme: dark'
+    };
+
+    function load() {
+        var stored = localStorage.getItem(STORAGE_KEY);
+        return THEMES.indexOf(stored) !== -1 ? stored : 'auto';
+    }
+
+    function apply(theme) {
+        if (theme === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+        } else if (theme === 'light') {
+            document.documentElement.setAttribute('data-theme', 'light');
+        } else {
+            document.documentElement.removeAttribute('data-theme');
+        }
+    }
+
+    function save(theme) {
+        try { localStorage.setItem(STORAGE_KEY, theme); } catch (e) {}
+    }
+
+    function updateButton(btn, theme) {
+        btn.textContent = LABELS[theme];
+        btn.title = TITLES[theme];
+        btn.setAttribute('aria-label', TITLES[theme]);
+    }
+
+    function next(theme) {
+        return THEMES[(THEMES.indexOf(theme) + 1) % THEMES.length];
+    }
+
+    function init() {
+        var current = load();
+        apply(current);
+
+        var btn = document.getElementById('theme-btn');
+        if (!btn) { return; }
+
+        updateButton(btn, current);
+
+        btn.addEventListener('click', function () {
+            current = next(current);
+            apply(current);
+            save(current);
+            updateButton(btn, current);
+        });
+    }
+
+    /* Apply theme immediately (before DOM ready) to avoid flash */
+    apply(load());
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+}());
+
+// Bootstrap window.app for the browse tool. Mirrors the convention
+// used by every other ZDDC tool — ./build's CSS/JS concat order means
+// this file runs FIRST inside the IIFE-of-IIFEs.
+(function () {
+    'use strict';
+
+    if (!window.app) {
+        window.app = { modules: {}, state: {} };
+    }
+
+    window.app.state = {
+        // Source: 'server' | 'fs' | null. Determines how the loader
+        // resolves entries.
+        source: null,
+
+        // For server-source: the URL path of the directory currently
+        // being viewed. Always starts with '/' and ends with '/'.
+        // For fs-source: the displayed path string (no semantic
+        // meaning — just for the toolbar).
+        currentPath: '/',
+
+        // FileSystemAccessAPI root handle (null in server mode).
+        rootHandle: null,
+
+        // Sort state. key: 'name' | 'size' | 'ext' | 'date'. dir: 1 or -1.
+        sort: { key: 'name', dir: 1 },
+
+        // Current filter substring (lowercase).
+        filterText: '',
+
+        // The tree's in-memory representation. Each node:
+        //   { id, name, isDir, size, modTime, ext, url, depth,
+        //     parentId, expanded, loaded, childIds }
+        // Stored flat in a Map keyed by id; render order derived
+        // from a depth-first walk.
+        nodes: new Map(),
+        rootIds: [],
+        nextId: 1
+    };
+})();
+
+// loader.js — fetches directory entries for either source mode.
+//
+// Server mode: GET <urlPath> with Accept: application/json. zddc-server
+// (and Caddy's built-in browse, which we mirror) returns an array of
+// FileInfo {name, size, url, mod_time, mode, is_dir, is_symlink}.
+//
+// FS-API mode: enumerate a FileSystemDirectoryHandle's children. No
+// network involved; works on local folders the user picked.
+(function () {
+    'use strict';
+
+    var state = window.app.state;
+
+    function splitExt(name) {
+        var i = name.lastIndexOf('.');
+        if (i <= 0 || i === name.length - 1) return '';
+        return name.substring(i + 1).toLowerCase();
+    }
+
+    // Build a raw entry from the server's FileInfo shape.
+    function fromServerEntry(e) {
+        // Server returns directory names with a trailing "/". Strip
+        // it for display; the is_dir flag is the canonical signal.
+        var displayName = e.is_dir ? e.name.replace(/\/$/, '') : e.name;
+        return {
+            name: displayName,
+            isDir: e.is_dir,
+            size: e.size || 0,
+            modTime: e.mod_time ? new Date(e.mod_time) : null,
+            ext: e.is_dir ? '' : splitExt(displayName),
+            url: e.url || null,
+            // FS-API specific (null in server mode):
+            handle: null
+        };
+    }
+
+    // Build a raw entry from a FileSystemHandle.
+    async function fromHandle(handle) {
+        var name = handle.name;
+        var isDir = handle.kind === 'directory';
+        var size = 0;
+        var modTime = null;
+        if (!isDir) {
+            try {
+                var f = await handle.getFile();
+                size = f.size;
+                modTime = new Date(f.lastModified);
+            } catch (_e) {
+                // permission lost; leave size/modTime defaults
+            }
+        }
+        return {
+            name: name,
+            isDir: isDir,
+            size: size,
+            modTime: modTime,
+            ext: isDir ? '' : splitExt(name),
+            url: null,
+            handle: handle
+        };
+    }
+
+    // Fetch children of a directory in server mode.
+    // path must end with '/' so the request hits the directory route.
+    async function fetchServerChildren(path) {
+        if (!path.endsWith('/')) path += '/';
+        var resp = await fetch(path, {
+            headers: { 'Accept': 'application/json' },
+            credentials: 'same-origin'
+        });
+        if (!resp.ok) {
+            throw new Error('HTTP ' + resp.status + ' fetching ' + path);
+        }
+        var data = await resp.json();
+        if (!Array.isArray(data)) {
+            throw new Error('Unexpected response shape from ' + path);
+        }
+        return data.map(fromServerEntry);
+    }
+
+    // Enumerate a FileSystemDirectoryHandle's immediate children.
+    async function fetchFsChildren(dirHandle) {
+        var entries = [];
+        for await (var [_name, handle] of dirHandle.entries()) {
+            entries.push(await fromHandle(handle));
+        }
+        return entries;
+    }
+
+    // Probe whether THIS page is being served by zddc-server (or any
+    // server that responds to JSON listing requests). If so, switch to
+    // server mode automatically and load the current directory.
+    async function autoDetectServerMode() {
+        // Only attempt when running over http(s) and the location's
+        // path looks like a directory. Probing on file:// is pointless.
+        if (location.protocol !== 'http:' && location.protocol !== 'https:') {
+            return false;
+        }
+        // Strip any /<tool>.html from the path to get the directory.
+        var path = location.pathname;
+        // If the URL points at the browse.html itself, the directory
+        // is the parent. If it's a directory ending in '/', use it.
+        var dirPath;
+        if (path.endsWith('/')) {
+            dirPath = path;
+        } else {
+            // e.g. '/some/dir/browse.html' → '/some/dir/'
+            var slash = path.lastIndexOf('/');
+            dirPath = slash >= 0 ? path.substring(0, slash + 1) : '/';
+        }
+
+        try {
+            var entries = await fetchServerChildren(dirPath);
+            state.source = 'server';
+            state.currentPath = dirPath;
+            return { entries: entries, path: dirPath };
+        } catch (_e) {
+            // Not a server-backed page (e.g. opened via file://).
+            return null;
+        }
+    }
+
+    // Public API
+    window.app.modules.loader = {
+        fetchServerChildren: fetchServerChildren,
+        fetchFsChildren: fetchFsChildren,
+        autoDetectServerMode: autoDetectServerMode,
+        splitExt: splitExt
+    };
+})();
+
+// tree.js — in-memory tree model + DOM rendering.
+//
+// Nodes are stored flat in state.nodes (Map by id). The visible
+// render is a depth-first walk starting from state.rootIds, skipping
+// children of unexpanded folders. This decouples model from DOM and
+// keeps re-renders linear in the visible-row count.
+(function () {
+    'use strict';
+
+    var state = window.app.state;
+    var loader = window.app.modules.loader;
+
+    // ── Model helpers ────────────────────────────────────────────────────
+
+    function newNode(raw, parentId, depth) {
+        var id = state.nextId++;
+        var node = {
+            id: id,
+            name: raw.name,
+            isDir: raw.isDir,
+            size: raw.size,
+            modTime: raw.modTime,
+            ext: raw.ext,
+            url: raw.url,
+            handle: raw.handle,
+            depth: depth,
+            parentId: parentId,
+            expanded: false,
+            loaded: false,
+            childIds: []
+        };
+        state.nodes.set(id, node);
+        return node;
+    }
+
+    function clearTree() {
+        state.nodes.clear();
+        state.rootIds = [];
+        state.nextId = 1;
+    }
+
+    // Sort an array of nodes by current sort key. Folders always come
+    // first within a level (mimics common file managers).
+    function sortNodes(ids) {
+        var key = state.sort.key;
+        var dir = state.sort.dir;
+        ids.sort(function (a, b) {
+            var na = state.nodes.get(a);
+            var nb = state.nodes.get(b);
+            // Folders before files
+            if (na.isDir !== nb.isDir) return na.isDir ? -1 : 1;
+            var av, bv;
+            switch (key) {
+                case 'size':
+                    av = na.size; bv = nb.size; break;
+                case 'ext':
+                    av = na.ext; bv = nb.ext; break;
+                case 'date':
+                    av = na.modTime ? na.modTime.getTime() : 0;
+                    bv = nb.modTime ? nb.modTime.getTime() : 0;
+                    break;
+                default:
+                    av = na.name.toLowerCase();
+                    bv = nb.name.toLowerCase();
+            }
+            if (av < bv) return -1 * dir;
+            if (av > bv) return  1 * dir;
+            return na.name.toLowerCase().localeCompare(nb.name.toLowerCase());
+        });
+    }
+
+    // Populate state with the root listing.
+    function setRoot(rawEntries) {
+        clearTree();
+        rawEntries.forEach(function (raw) {
+            var n = newNode(raw, null, 0);
+            state.rootIds.push(n.id);
+        });
+        sortNodes(state.rootIds);
+    }
+
+    // Populate a folder's children. Caller passes raw entries in any order.
+    function setChildren(parentId, rawEntries) {
+        var parent = state.nodes.get(parentId);
+        if (!parent) return;
+        // Drop any existing children first (re-load case).
+        parent.childIds.forEach(function (id) { state.nodes.delete(id); });
+        parent.childIds = [];
+        rawEntries.forEach(function (raw) {
+            var n = newNode(raw, parentId, parent.depth + 1);
+            parent.childIds.push(n.id);
+        });
+        sortNodes(parent.childIds);
+        parent.loaded = true;
+    }
+
+    // Walk visible nodes in render order.
+    function visibleIds() {
+        var out = [];
+        function walk(ids) {
+            for (var i = 0; i < ids.length; i++) {
+                out.push(ids[i]);
+                var n = state.nodes.get(ids[i]);
+                if (n.isDir && n.expanded) walk(n.childIds);
+            }
+        }
+        // Re-sort everything at all levels so a sort change reorders
+        // already-loaded children consistently.
+        sortNodes(state.rootIds);
+        state.nodes.forEach(function (n) {
+            if (n.isDir && n.loaded) sortNodes(n.childIds);
+        });
+        walk(state.rootIds);
+        return out;
+    }
+
+    // ── Rendering ────────────────────────────────────────────────────────
+
+    function fmtSize(bytes) {
+        if (bytes == null) return '';
+        if (bytes < 1024) return bytes + ' B';
+        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+        if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+        return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
+    }
+
+    function fmtDate(d) {
+        if (!d) return '';
+        var pad = function (n) { return n < 10 ? '0' + n : '' + n; };
+        return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate())
+            + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
+    }
+
+    function escapeHtml(s) {
+        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    }
+
+    function rowHtml(node) {
+        var indent = node.depth * 1.2;
+        var iconChar = node.isDir ? '📁' : '📄';
+        var labelClass = node.isDir ? 'is-folder' : 'is-file';
+        var chevronClass = 'tree-name__chevron' + (node.isDir ? '' : ' tree-name__chevron--leaf');
+        var nameInner;
+        if (node.isDir) {
+            nameInner = '<span class="tree-name__label is-folder">'
+                + escapeHtml(node.name) + '</span>';
+        } else {
+            // File: clickable link. In server mode, href is a real URL
+            // that opens the file. In FS mode, click handler reads the
+            // file via the handle and triggers a download (Phase 2).
+            var href = node.url || '#';
+            nameInner = '<a class="tree-name__label is-file"'
+                + ' href="' + escapeHtml(href) + '"'
+                + ' target="_blank" rel="noopener">' + escapeHtml(node.name) + '</a>';
+        }
+        return ''
+            + '<tr class="tree-row ' + (node.expanded ? 'expanded' : '')
+                + '" data-id="' + node.id + '" data-isdir="' + node.isDir + '">'
+            + '<td class="col-name">'
+                + '<span class="tree-name">'
+                    + '<span class="tree-name__indent" style="width:' + indent + 'rem;"></span>'
+                    + '<span class="' + chevronClass + '"></span>'
+                    + '<span class="tree-name__icon">' + iconChar + '</span>'
+                    + nameInner
+                + '</span>'
+            + '</td>'
+            + '<td class="col-size">' + (node.isDir ? '' : fmtSize(node.size)) + '</td>'
+            + '<td class="col-ext">'  + (node.isDir ? '' : escapeHtml(node.ext)) + '</td>'
+            + '<td class="col-date">' + fmtDate(node.modTime) + '</td>'
+            + '</tr>';
+    }
+
+    function render() {
+        var tbody = document.getElementById('browseTbody');
+        if (!tbody) return;
+        var ids = visibleIds();
+        var html = '';
+        for (var i = 0; i < ids.length; i++) {
+            html += rowHtml(state.nodes.get(ids[i]));
+        }
+        tbody.innerHTML = html;
+        applyFilter();
+        updateCount();
+        updateSortHeaders();
+    }
+
+    // Filter is purely DOM-level: hide rows whose name doesn't match.
+    // Cheap, immediate, no model rebuild.
+    function applyFilter() {
+        var f = state.filterText;
+        var rows = document.querySelectorAll('#browseTbody tr.tree-row');
+        for (var i = 0; i < rows.length; i++) {
+            var row = rows[i];
+            var n = state.nodes.get(parseInt(row.dataset.id, 10));
+            if (!n) continue;
+            var match = !f || n.name.toLowerCase().indexOf(f) !== -1;
+            row.classList.toggle('tree-row--filtered', !match);
+        }
+    }
+
+    function updateCount() {
+        var el = document.getElementById('entryCount');
+        if (!el) return;
+        var rows = document.querySelectorAll('#browseTbody tr.tree-row:not(.tree-row--filtered)');
+        var total = document.querySelectorAll('#browseTbody tr.tree-row').length;
+        el.textContent = state.filterText
+            ? rows.length + ' of ' + total + ' shown'
+            : total + ' item' + (total === 1 ? '' : 's');
+    }
+
+    function updateSortHeaders() {
+        var ths = document.querySelectorAll('#browseTable thead th.sortable');
+        for (var i = 0; i < ths.length; i++) {
+            ths[i].classList.remove('sort-asc', 'sort-desc');
+            if (ths[i].dataset.sort === state.sort.key) {
+                ths[i].classList.add(state.sort.dir > 0 ? 'sort-asc' : 'sort-desc');
+            }
+        }
+    }
+
+    // Toggle a folder's expanded state. Loads children on first expand.
+    async function toggleFolder(nodeId) {
+        var n = state.nodes.get(nodeId);
+        if (!n || !n.isDir) return;
+        if (!n.expanded && !n.loaded) {
+            try {
+                var raw;
+                if (state.source === 'server') {
+                    var childPath = state.currentPath
+                        + n.name + '/'; // server URLs are relative paths
+                    // Walk up the parent chain to build the full path.
+                    childPath = pathFor(n) + '/';
+                    raw = await loader.fetchServerChildren(childPath);
+                } else if (state.source === 'fs') {
+                    raw = await loader.fetchFsChildren(n.handle);
+                } else {
+                    return;
+                }
+                window.app.modules.tree.setChildren(nodeId, raw);
+            } catch (e) {
+                window.app.modules.events.statusError('Failed to load folder: ' + e.message);
+                return;
+            }
+        }
+        n.expanded = !n.expanded;
+        render();
+    }
+
+    // Compute the URL/path for a node by walking parents.
+    function pathFor(node) {
+        var parts = [];
+        var cur = node;
+        while (cur) {
+            parts.unshift(cur.name);
+            cur = cur.parentId == null ? null : state.nodes.get(cur.parentId);
+        }
+        if (state.source === 'server') {
+            // currentPath is the dir containing rootIds — root nodes
+            // sit DIRECTLY under it.
+            return state.currentPath.replace(/\/$/, '') + '/' + parts.join('/');
+        }
+        return parts.join('/');
+    }
+
+    // Public API
+    window.app.modules.tree = {
+        setRoot: setRoot,
+        setChildren: setChildren,
+        render: render,
+        toggleFolder: toggleFolder,
+        setSort: function (key) {
+            if (state.sort.key === key) {
+                state.sort.dir = -state.sort.dir;
+            } else {
+                state.sort.key = key;
+                state.sort.dir = 1;
+            }
+            render();
+        },
+        setFilter: function (s) {
+            state.filterText = (s || '').toLowerCase();
+            applyFilter();
+            updateCount();
+        },
+        pathFor: pathFor
+    };
+})();
+
+// events.js — wires up DOM listeners. Idempotent so app.js can call
+// init() once on load.
+(function () {
+    'use strict';
+
+    var state = window.app.state;
+    var tree = window.app.modules.tree;
+    var loader = window.app.modules.loader;
+
+    function status(msg, kind) {
+        var el = document.getElementById('statusBar');
+        if (!el) return;
+        el.textContent = msg || '';
+        el.classList.remove('status-bar--error', 'status-bar--info');
+        if (kind === 'error') el.classList.add('status-bar--error');
+        if (kind === 'info')  el.classList.add('status-bar--info');
+    }
+
+    function statusError(msg) { status(msg, 'error'); }
+    function statusInfo(msg)  { status(msg, 'info'); }
+    function statusClear()    { status('', null); }
+
+    async function pickLocalDir() {
+        if (typeof window.showDirectoryPicker !== 'function') {
+            statusError('Your browser does not support local folder selection. Use a recent Chromium-based browser, or open this page via zddc-server.');
+            return;
+        }
+        var handle;
+        try {
+            handle = await window.showDirectoryPicker({ mode: 'read' });
+        } catch (e) {
+            // User cancelled — silent
+            return;
+        }
+        state.source = 'fs';
+        state.rootHandle = handle;
+        state.currentPath = handle.name + '/';
+        var raw;
+        try {
+            raw = await loader.fetchFsChildren(handle);
+        } catch (e) {
+            statusError('Failed to read directory: ' + e.message);
+            return;
+        }
+        tree.setRoot(raw);
+        showBrowseRoot();
+        document.getElementById('currentPath').textContent = state.currentPath;
+        tree.render();
+        statusInfo('Loaded ' + raw.length + ' item' + (raw.length === 1 ? '' : 's'));
+    }
+
+    function showBrowseRoot() {
+        var empty = document.getElementById('emptyState');
+        var root = document.getElementById('browseRoot');
+        if (empty) empty.classList.add('hidden');
+        if (root) root.classList.remove('hidden');
+    }
+
+    function init() {
+        // Header buttons
+        var btn = document.getElementById('addDirectoryBtn');
+        if (btn) btn.addEventListener('click', pickLocalDir);
+
+        // Filter input
+        var filter = document.getElementById('filterInput');
+        if (filter) {
+            filter.addEventListener('input', function () {
+                tree.setFilter(filter.value);
+            });
+        }
+
+        // Sort headers
+        var ths = document.querySelectorAll('#browseTable thead th.sortable');
+        for (var i = 0; i < ths.length; i++) {
+            (function (th) {
+                th.addEventListener('click', function () {
+                    tree.setSort(th.dataset.sort);
+                });
+            })(ths[i]);
+        }
+
+        // Tree-row clicks (event delegation on tbody).
+        var tbody = document.getElementById('browseTbody');
+        if (tbody) {
+            tbody.addEventListener('click', function (e) {
+                var row = e.target.closest('tr.tree-row');
+                if (!row) return;
+                var isDir = row.dataset.isdir === 'true';
+                if (!isDir) {
+                    // Let the <a> tag's natural target=_blank handle file
+                    // clicks. Don't intercept.
+                    return;
+                }
+                // Folder: toggle on chevron OR anywhere on the row except
+                // the file link (no link in folder rows).
+                e.preventDefault();
+                tree.toggleFolder(parseInt(row.dataset.id, 10));
+            });
+        }
+    }
+
+    // Public API
+    window.app.modules.events = {
+        init: init,
+        statusError: statusError,
+        statusInfo: statusInfo,
+        statusClear: statusClear,
+        showBrowseRoot: showBrowseRoot
+    };
+})();
+
+// app.js — bootstrap. Runs after every other module's IIFE has
+// registered its functions on window.app.modules.
+(function () {
+    'use strict';
+
+    var state = window.app.state;
+    var loader = window.app.modules.loader;
+    var tree = window.app.modules.tree;
+    var events = window.app.modules.events;
+
+    async function bootstrap() {
+        events.init();
+
+        // Try server auto-detect. If this page is served by zddc-server
+        // (or any server with a Caddy-shaped JSON listing), load the
+        // current directory automatically. Otherwise show the empty
+        // state with the "Select Directory" button.
+        var detected = await loader.autoDetectServerMode();
+        if (detected) {
+            tree.setRoot(detected.entries);
+            events.showBrowseRoot();
+            document.getElementById('currentPath').textContent = detected.path;
+            tree.render();
+            events.statusInfo('Loaded ' + detected.entries.length + ' item'
+                + (detected.entries.length === 1 ? '' : 's')
+                + ' from ' + detected.path);
+        }
+        // Else: empty state stays visible; user can click Select Directory.
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', bootstrap);
+    } else {
+        bootstrap();
+    }
+})();
+
+    </script>
+</body>
+</html>
diff --git a/zddc/internal/apps/embedded/classifier.html b/zddc/internal/apps/embedded/classifier.html
index a097553..8779000 100644
--- a/zddc/internal/apps/embedded/classifier.html
+++ b/zddc/internal/apps/embedded/classifier.html
@@ -1376,7 +1376,7 @@ body.help-open .app-header {
                     </svg>
                     <div class="header-title-group">
                         <span class="app-header__title">ZDDC Classifier</span>
-                        <span class="build-timestamp">v0.0.11</span>
+                        <span class="build-timestamp">v0.0.12</span>
                     </div>
                     <button id="selectDirectoryBtn" class="btn btn-primary">Select Directory</button>
                     <button id="refreshBtn" class="btn btn-secondary hidden" title="Refresh and rescan directory">Refresh</button>
diff --git a/zddc/internal/apps/embedded/index.html b/zddc/internal/apps/embedded/index.html
index 04f0958..5ffcf8a 100644
--- a/zddc/internal/apps/embedded/index.html
+++ b/zddc/internal/apps/embedded/index.html
@@ -866,7 +866,7 @@ body {
                 </g>
             </svg>
             <span class="app-header__title">ZDDC Archive</span>
-            <span class="build-timestamp">v0.0.11</span>
+            <span class="build-timestamp">v0.0.12</span>
         </div>
         <div class="header-right">
             <button id="theme-btn" class="btn btn-secondary" title="Theme: auto (follows OS)" aria-label="Theme: auto (follows OS)">◐</button>
diff --git a/zddc/internal/apps/embedded/mdedit.html b/zddc/internal/apps/embedded/mdedit.html
index c66669f..fc4b5c5 100644
--- a/zddc/internal/apps/embedded/mdedit.html
+++ b/zddc/internal/apps/embedded/mdedit.html
@@ -1774,7 +1774,7 @@ body.help-open .app-header {
                 </svg>
                 <div class="header-title-group">
                     <span class="app-header__title">ZDDC Markdown</span>
-                    <span class="build-timestamp">v0.0.11</span>
+                    <span class="build-timestamp">v0.0.12</span>
                 </div>
                 <button id="select-directory" class="btn btn-primary" title="Select a Directory">Select Directory</button>
             </div>
diff --git a/zddc/internal/apps/embedded/transmittal.html b/zddc/internal/apps/embedded/transmittal.html
index cefc66f..e3f9362 100644
--- a/zddc/internal/apps/embedded/transmittal.html
+++ b/zddc/internal/apps/embedded/transmittal.html
@@ -2210,7 +2210,7 @@ dialog.modal--narrow {
         </svg>
         <div class="header-title-group">
             <span class="app-header__title">ZDDC Transmittal</span>
-            <span class="build-timestamp">v0.0.11</span>
+            <span class="build-timestamp">v0.0.12</span>
         </div>
         <div class="app-header__spacer"></div>
         <div class="app-header__icons">
diff --git a/zddc/internal/apps/embedded/versions.txt b/zddc/internal/apps/embedded/versions.txt
index 8331d4d..6824268 100644
--- a/zddc/internal/apps/embedded/versions.txt
+++ b/zddc/internal/apps/embedded/versions.txt
@@ -1,7 +1,8 @@
 # Generated by build.sh — do not edit. One <app>=<build label> per line.
-archive=v0.0.11
-transmittal=v0.0.11
-classifier=v0.0.11
-mdedit=v0.0.11
-landing=v0.0.11
-form=v0.0.11
+archive=v0.0.12
+transmittal=v0.0.12
+classifier=v0.0.12
+mdedit=v0.0.12
+landing=v0.0.12
+form=v0.0.12
+browse=v0.0.12
diff --git a/zddc/internal/handler/form.html b/zddc/internal/handler/form.html
index c590ec0..a7f66a1 100644
--- a/zddc/internal/handler/form.html
+++ b/zddc/internal/handler/form.html
@@ -722,7 +722,7 @@ body.help-open .app-header {
                 </g>
             </svg>
             <span class="app-header__title" id="form-title">ZDDC Form</span>
-            <span class="build-timestamp">v0.0.11</span>
+            <span class="build-timestamp">v0.0.12</span>
         </div>
         <div class="header-right">
             <button id="theme-btn" class="btn btn-secondary" title="Theme: auto (follows OS)" aria-label="Theme: auto (follows OS)">◐</button>
