s (filename-main + filename-secondary)
+ so the row reads top-to-bottom as title + metadata — same shape the archive
+ tool uses for its transmittal-folder list. For non-ZDDC entries it just
+ contains a single line. flex column makes the two-line case work; min-width:0
+ lets each line truncate independently. */
+.tree-row__name {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+ flex: 1;
+ line-height: 1.25;
+}
+
/* ── New-file modal ─────────────────────────────────────────────────────────── */
.modal-overlay {
position: fixed;
diff --git a/mdedit/css/editor.css b/mdedit/css/editor.css
index 1168c4a..d303a95 100644
--- a/mdedit/css/editor.css
+++ b/mdedit/css/editor.css
@@ -23,3 +23,97 @@
.toastui-editor-main .toastui-editor-md-preview {
height: 100% !important;
}
+
+/* ── Toast UI Editor — dark-theme overrides ───────────────────────────────
+ Toast UI ships with light-mode chrome and edit surfaces by default. In
+ mdedit's dark mode the editor's text (#222) falls onto the transparent
+ md-container, which inherits var(--bg) dark = #1e1e1e → effectively
+ black-on-black. Override the load-bearing surfaces with mdedit's tokens
+ so the editor harmonises with the rest of the chrome.
+ The selectors target both manual override (data-theme="dark") and the
+ OS-pref auto fallback (prefers-color-scheme + no data-theme="light"). */
+
+/* Manual dark override */
+[data-theme="dark"] .toastui-editor-defaultUI,
+[data-theme="dark"] .toastui-editor-md-container,
+[data-theme="dark"] .toastui-editor-md-preview,
+[data-theme="dark"] .toastui-editor-ww-container,
+[data-theme="dark"] .toastui-editor-mode-switch,
+[data-theme="dark"] .toastui-editor-main,
+[data-theme="dark"] .ProseMirror {
+ background-color: var(--bg);
+ color: var(--text);
+}
+[data-theme="dark"] .toastui-editor-defaultUI-toolbar {
+ background-color: var(--bg-secondary);
+ border-bottom-color: var(--border);
+}
+[data-theme="dark"] .toastui-editor-md-splitter {
+ background-color: var(--border);
+}
+[data-theme="dark"] .toastui-editor-toolbar-icons {
+ /* Toast UI's icons are sprite-baked dark; invert flips them to light. */
+ filter: invert(0.85) hue-rotate(180deg);
+}
+[data-theme="dark"] .toastui-editor-toolbar-divider {
+ background-color: var(--border);
+}
+[data-theme="dark"] .toastui-editor-mode-switch {
+ border-top-color: var(--border);
+}
+[data-theme="dark"] .toastui-editor-mode-switch .tab-item {
+ color: var(--text-muted);
+}
+[data-theme="dark"] .toastui-editor-mode-switch .tab-item.active {
+ color: var(--text);
+ background-color: var(--bg);
+}
+[data-theme="dark"] .toastui-editor-popup,
+[data-theme="dark"] .toastui-editor-context-menu {
+ background-color: var(--bg-secondary);
+ color: var(--text);
+ border-color: var(--border);
+}
+
+/* OS-pref auto fallback (matches every selector above) */
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) .toastui-editor-defaultUI,
+ :root:not([data-theme="light"]) .toastui-editor-md-container,
+ :root:not([data-theme="light"]) .toastui-editor-md-preview,
+ :root:not([data-theme="light"]) .toastui-editor-ww-container,
+ :root:not([data-theme="light"]) .toastui-editor-mode-switch,
+ :root:not([data-theme="light"]) .toastui-editor-main,
+ :root:not([data-theme="light"]) .ProseMirror {
+ background-color: var(--bg);
+ color: var(--text);
+ }
+ :root:not([data-theme="light"]) .toastui-editor-defaultUI-toolbar {
+ background-color: var(--bg-secondary);
+ border-bottom-color: var(--border);
+ }
+ :root:not([data-theme="light"]) .toastui-editor-md-splitter {
+ background-color: var(--border);
+ }
+ :root:not([data-theme="light"]) .toastui-editor-toolbar-icons {
+ filter: invert(0.85) hue-rotate(180deg);
+ }
+ :root:not([data-theme="light"]) .toastui-editor-toolbar-divider {
+ background-color: var(--border);
+ }
+ :root:not([data-theme="light"]) .toastui-editor-mode-switch {
+ border-top-color: var(--border);
+ }
+ :root:not([data-theme="light"]) .toastui-editor-mode-switch .tab-item {
+ color: var(--text-muted);
+ }
+ :root:not([data-theme="light"]) .toastui-editor-mode-switch .tab-item.active {
+ color: var(--text);
+ background-color: var(--bg);
+ }
+ :root:not([data-theme="light"]) .toastui-editor-popup,
+ :root:not([data-theme="light"]) .toastui-editor-context-menu {
+ background-color: var(--bg-secondary);
+ color: var(--text);
+ border-color: var(--border);
+ }
+}
diff --git a/mdedit/dist/mdedit.html b/mdedit/dist/mdedit.html
new file mode 100644
index 0000000..03432a0
--- /dev/null
+++ b/mdedit/dist/mdedit.html
@@ -0,0 +1,6205 @@
+
+
+
+
+
+
ZDDC Markdown
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Click Scratchpad in the file list to start editing,Select Directory to work with files.
+
Your browser doesn't support the File System API.Scratchpad to edit markdown and download as a file.
+
+
+
+
+
+
+
+
+
+
+
+
+ Save All
+
+
0 folders
+
0 files
+
0 unsaved
+
+
+
+
+
+
+
What is ZDDC Markdown?
+
ZDDC Markdown is a browser-based Markdown editor that reads and writes files directly on your local file system. Everything runs locally — no data is sent to any server.
+
+
Getting Started
+
+ Click Select Directory to open a folder. The file tree on the left will populate with all files in that folder.
+ Click any Markdown file (.md) in the tree to open it in the editor.
+ Use the Scratchpad entry (always visible at the top of the tree) for temporary notes without saving to disk.
+
+
+
Editor Modes
+
+ WYSIWYG
+ A rich-text view where formatting is rendered live. Good for composing content.
+ Markdown
+ A plain-text view showing raw Markdown syntax. Good for precise control.
+
+
Switch between modes using the toolbar buttons at the top-right of the editor.
+
+
Saving Files
+
+ Auto-save indicator
+ A bullet (•) next to the filename in the tree indicates unsaved changes.
+ Save (Ctrl+S)
+ Saves the currently active file.
+ Save All
+ Saves all files that have unsaved changes in one operation.
+
+
+
Table of Contents
+
When a Markdown file is open, a table of contents is generated from its headings and shown on the right side. Use the depth selector to control how many heading levels appear.
+
+
Browser Compatibility
+
File system access requires a Chromium-based browser (Chrome, Edge, Brave). In Firefox and other browsers, the Scratchpad is available for editing, and files can be saved via download.
+
+
Keyboard Shortcuts
+
+ Ctrl+S Save the current file.
+ Escape Close this help panel.
+
+
+
+
+
+
+
New file name
+
+
+ Cancel
+ Create
+
+
+
+
+
+
+
+
diff --git a/mdedit/js/file-tree.js b/mdedit/js/file-tree.js
index b6097a0..916fe91 100644
--- a/mdedit/js/file-tree.js
+++ b/mdedit/js/file-tree.js
@@ -101,7 +101,7 @@ function renderFileTree() {
const scratchLabel = document.createElement('span');
scratchLabel.className = 'tree-row__label';
- scratchLabel.innerHTML = '
📝 Scratchpad
Quick notes — no directory needed
';
+ scratchLabel.innerHTML = '
📝 Scratchpad
Quick notes — no directory needed
';
scratchpadElement.appendChild(scratchLabel);
const scratchActions = document.createElement('div');
@@ -169,7 +169,10 @@ function renderFileTree() {
const meta = `${parsedFolder.trackingNumber} (${parsedFolder.status}) — ${parsedFolder.date}`;
dirName.innerHTML = `
📁 ${escapeHtml(parsedFolder.title)}
${escapeHtml(meta)}
`;
} else {
- dirName.textContent = `📁 ${name}`;
+ // Non-ZDDC folder: still wrap in filename-main so
+ // typography matches the two-line entries (same font
+ // size + weight; just no secondary line).
+ dirName.innerHTML = `
📁 ${escapeHtml(name)}
`;
}
const dirLabel = document.createElement('span');
@@ -209,24 +212,30 @@ function renderFileTree() {
const fileIcon = getFileTypeIcon(name);
- let fileNameDisplay;
+ // Build the inner two-line text inside a tree-row__name
+ // wrapper (column-flex). ZDDC-conforming filenames split
+ // into title + meta; "Title - filename.ext" pattern uses
+ // the dash as the same split. Plain names get a single
+ // line via filename-main only — same wrapper, just no
+ // secondary div, so the layout stays consistent.
+ let fileNameInner;
const parsed = zddc.parseFilename(name);
if (parsed && parsed.valid) {
const titleDisplay = escapeHtml(parsed.title);
const metaDisplay = escapeHtml(`${parsed.trackingNumber}_${parsed.revision} (${parsed.status})`);
- fileNameDisplay = `
${fileIcon} ${titleDisplay}
${metaDisplay}
`;
+ fileNameInner = `
${fileIcon} ${titleDisplay}
${metaDisplay}
`;
} else if (name.includes(' - ')) {
const dashIdx = name.lastIndexOf(' - ');
const secondary = escapeHtml(name.substring(0, dashIdx));
const primary = escapeHtml(name.substring(dashIdx + 3).replace(/\.[^.]+$/, ''));
- fileNameDisplay = `
${fileIcon} ${primary}
${secondary}
`;
+ fileNameInner = `
${fileIcon} ${primary}
${secondary}
`;
} else {
- fileNameDisplay = `
${fileIcon} ${escapeHtml(name)} `;
+ fileNameInner = `
${fileIcon} ${escapeHtml(name)}
`;
}
const fileLabel = document.createElement('span');
fileLabel.className = 'tree-row__label';
- fileLabel.innerHTML = fileNameDisplay;
+ fileLabel.innerHTML = `
${fileNameInner} `;
const fileActions = createActionButtons(filePath, 'file');
diff --git a/zddc/internal/apps/embedded/archive.html b/zddc/internal/apps/embedded/archive.html
index 43b0b5a..5bfaf91 100644
--- a/zddc/internal/apps/embedded/archive.html
+++ b/zddc/internal/apps/embedded/archive.html
@@ -2113,7 +2113,7 @@ td[data-field="trackingNumber"] {
Add Local Directory
diff --git a/zddc/internal/apps/embedded/classifier.html b/zddc/internal/apps/embedded/classifier.html
index 410b25d..6b56ff4 100644
--- a/zddc/internal/apps/embedded/classifier.html
+++ b/zddc/internal/apps/embedded/classifier.html
@@ -1376,7 +1376,7 @@ body.help-open .app-header {
Select Directory
Refresh
diff --git a/zddc/internal/apps/embedded/index.html b/zddc/internal/apps/embedded/index.html
index 035ac0e..7009814 100644
--- a/zddc/internal/apps/embedded/index.html
+++ b/zddc/internal/apps/embedded/index.html
@@ -866,7 +866,7 @@ body {
-
v0.0.8
+
v0.0.9-alpha · 2026-05-02 02:07:03 · 17b0a4d-dirty