sdocs-dev 1.6.2 → 1.12.0

package/{public → shared}/sdocs-styles.js

@@ -69,6 +69,11 @@ const CTRL_CSS_MAP = {
   '_sd_ctrl-list-indent-num':  { cssVar: '--md-list-indent', suffix: 'em' },
   '_sd_ctrl-chart-accent':     { cssVar: '--md-chart-accent' },
   '_sd_ctrl-chart-palette':    { cssVar: '--md-chart-palette' },
+  '_sd_ctrl-table-border':     { cssVar: '--md-table-border' },
+  '_sd_ctrl-table-header-bg':  { cssVar: '--md-table-header-bg' },
+  '_sd_ctrl-table-even-bg':    { cssVar: '--md-table-even-bg' },
+  '_sd_ctrl-table-odd-bg':     { cssVar: '--md-table-odd-bg' },
+  '_sd_ctrl-table-text':       { cssVar: '--md-table-text' },
 };
 
 // Range ↔ Number input pairs
@@ -136,17 +141,42 @@ function hslToHex(h, s, l) {
  * Keeps hue and saturation, mirrors lightness around 50%.
  * Slightly biased: dark bgs get very dark (L≈10-20), light text gets bright (L≈80-90).
  */
+// Color controls whose value is painted as TEXT rather than a fill. Their
+// dark-mode counterpart must stay readable, so a very dark text color is
+// lightened instead of preserved as an "intentional dark background".
+var TEXT_COLOR_CONTROLS = {
+  '_sd_ctrl-color': 1, '_sd_ctrl-h-color': 1,
+  '_sd_ctrl-h1-color': 1, '_sd_ctrl-h2-color': 1,
+  '_sd_ctrl-h3-color': 1, '_sd_ctrl-h4-color': 1,
+  '_sd_ctrl-p-color': 1, '_sd_ctrl-list-color': 1,
+  '_sd_ctrl-link-color': 1, '_sd_ctrl-block-text': 1,
+  '_sd_ctrl-code-color': 1, '_sd_ctrl-bq-color': 1,
+  '_sd_ctrl-chart-text': 1, '_sd_ctrl-table-text': 1
+};
+
 /**
- * invertLightness(hex)
+ * colorControlRole(ctrlId) -> 'text' | 'background'
+ * Tells invertLightness whether a control's color is rendered as text.
+ */
+function colorControlRole(ctrlId) {
+  return TEXT_COLOR_CONTROLS[ctrlId] ? 'text' : 'background';
+}
+
+/**
+ * invertLightness(hex, role)
  * Generates a dark-theme counterpart for a light-theme color.
  *
  * Strategy: colors that look "right" in light mode get adapted for dark mode.
  *   - Very light colors (L>65): page/block backgrounds → make very dark
  *   - Very dark colors (L<20): already dark, likely intentional → keep as-is
+ *     UNLESS role is 'text', in which case lighten it so it stays readable.
  *   - Dark-ish colors (20<L<45): body text, headings → make light
  *   - Mid-range (45-65): accent colors → moderate shift
+ *
+ * role: 'text' for colors painted as text (body, headings, links, code text),
+ *       'background' (default) for fills. Text colors are never kept dark.
  */
-function invertLightness(hex) {
+function invertLightness(hex, role) {
   var hsl = hexToHsl(hex);
   if (!hsl) return hex;
   var h = hsl[0], s = hsl[1], l = hsl[2];
@@ -160,7 +190,7 @@ function invertLightness(hex) {
     // Light background/accent → dark
     invL = 12 + (100 - l) * 0.4;  // L70→24, L65→26
     invS = s * 0.75;
-  } else if (l < 20) {
+  } else if (l < 20 && role !== 'text') {
     // Already very dark → keep as-is (intentional dark bg like code blocks)
     return hex;
   } else if (l < 40) {
@@ -308,6 +338,15 @@ function collectStyles(values, overriddenColors) {
   if (overriddenColors.has('_sd_ctrl-chart-text'))  chartObj.textColor = gv('_sd_ctrl-chart-text');
   if (Object.keys(chartObj).length) styles.chart = chartObj;
 
+  // Table styles
+  var tableObj = {};
+  if (overriddenColors.has('_sd_ctrl-table-border'))    tableObj.border = gv('_sd_ctrl-table-border');
+  if (overriddenColors.has('_sd_ctrl-table-header-bg')) tableObj.headerBackground = gv('_sd_ctrl-table-header-bg');
+  if (overriddenColors.has('_sd_ctrl-table-even-bg'))   tableObj.evenBackground = gv('_sd_ctrl-table-even-bg');
+  if (overriddenColors.has('_sd_ctrl-table-odd-bg'))    tableObj.oddBackground = gv('_sd_ctrl-table-odd-bg');
+  if (overriddenColors.has('_sd_ctrl-table-text'))      tableObj.color = gv('_sd_ctrl-table-text');
+  if (Object.keys(tableObj).length) styles.table = tableObj;
+
   return styles;
 }
 
@@ -397,6 +436,13 @@ function stylesToControls(styles) {
   if (ch.background) { controls['_sd_ctrl-chart-bg'] = ch.background; overridden.add('_sd_ctrl-chart-bg'); }
   if (ch.textColor)  { controls['_sd_ctrl-chart-text'] = ch.textColor; overridden.add('_sd_ctrl-chart-text'); }
 
+  const tb = styles.table || {};
+  if (tb.border)           { controls['_sd_ctrl-table-border'] = tb.border; overridden.add('_sd_ctrl-table-border'); }
+  if (tb.headerBackground) { controls['_sd_ctrl-table-header-bg'] = tb.headerBackground; overridden.add('_sd_ctrl-table-header-bg'); }
+  if (tb.evenBackground)   { controls['_sd_ctrl-table-even-bg'] = tb.evenBackground; overridden.add('_sd_ctrl-table-even-bg'); }
+  if (tb.oddBackground)    { controls['_sd_ctrl-table-odd-bg'] = tb.oddBackground; overridden.add('_sd_ctrl-table-odd-bg'); }
+  if (tb.color)            { controls['_sd_ctrl-table-text'] = tb.color; overridden.add('_sd_ctrl-table-text'); }
+
   return { controls, overriddenColors: overridden };
 }
 
@@ -408,6 +454,7 @@ var STANDALONE_COLOR_IDS = [
   '_sd_ctrl-bg-color','_sd_ctrl-link-color',
   '_sd_ctrl-bq-border-color',
   '_sd_ctrl-chart-accent',
+  '_sd_ctrl-table-border','_sd_ctrl-table-header-bg','_sd_ctrl-table-even-bg','_sd_ctrl-table-odd-bg','_sd_ctrl-table-text',
 ];
 
 var CASCADE_COLOR_IDS = Object.keys(COLOR_VAR_MAP);
@@ -455,6 +502,13 @@ function parseDarkBlock(block) {
     if (block.chart.background) colors['_sd_ctrl-chart-bg'] = block.chart.background;
     if (block.chart.textColor) colors['_sd_ctrl-chart-text'] = block.chart.textColor;
   }
+  if (block.table) {
+    if (block.table.border)           colors['_sd_ctrl-table-border'] = block.table.border;
+    if (block.table.headerBackground) colors['_sd_ctrl-table-header-bg'] = block.table.headerBackground;
+    if (block.table.evenBackground)   colors['_sd_ctrl-table-even-bg'] = block.table.evenBackground;
+    if (block.table.oddBackground)    colors['_sd_ctrl-table-odd-bg'] = block.table.oddBackground;
+    if (block.table.color)            colors['_sd_ctrl-table-text'] = block.table.color;
+  }
 
   return colors;
 }
@@ -480,9 +534,9 @@ var STYLE_DEFAULTS = {
   h3: { fontSize: 1.2, fontWeight: 600 },
   h4: { fontSize: 1.0, fontWeight: 600 },
   p: { lineHeight: 1.75, marginBottom: 1.1 },
-  link: { decoration: 'underline' },
+  link: { color: '#2563eb', decoration: 'underline' },
   code: { font: 'JetBrains Mono' },
-  blockquote: { borderWidth: 3, fontSize: 1.0 },
+  blockquote: { borderColor: '#2563eb', borderWidth: 3, fontSize: 1.0 },
   list: { spacing: 0.3, indent: 1.6 },
 };
 
@@ -532,6 +586,78 @@ function stripStyleDefaults(styles) {
   return result;
 }
 
+// ═══════════════════════════════════════════════════════
+//  STYLE REFERENCE RESOLVER ($path.to.prop → var(--md-*))
+// ═══════════════════════════════════════════════════════
+
+// Maps YAML-schema paths to the CSS custom property that carries their
+// live value. Used by the slide shape DSL so an agent can write
+// `fill=$h1.color` and have the slide pick up whatever the doc's h1
+// color currently is, including dark-mode inversion. The value is
+// resolved at CSS-paint time, not parse time — theme changes Just Work.
+//
+// Keep this list aligned with COLOR_VAR_MAP + CTRL_CSS_MAP above, plus
+// a few convenience aliases (e.g. `headers.color` as well as `h.color`).
+var STYLE_PATH_TO_VAR = {
+  // General
+  'background':            '--md-bg',
+  'color':                 '--md-color',
+  'fontFamily':            '--md-font-family',
+
+  // Headings
+  'h.color':               '--md-h-color',
+  'headers.color':         '--md-h-color',
+  'headers.fontFamily':    '--md-h-font-family',
+  'h1.color':              '--md-h1-color',
+  'h2.color':              '--md-h2-color',
+  'h3.color':              '--md-h3-color',
+  'h4.color':              '--md-h4-color',
+
+  // Paragraph / list
+  'p.color':               '--md-p-color',
+  'list.color':            '--md-list-color',
+
+  // Link
+  'link.color':            '--md-link-color',
+
+  // Blocks cascade (code / blockquote / chart parent)
+  'blocks.background':     '--md-block-bg',
+  'blocks.color':          '--md-block-text',
+
+  // Code
+  'code.background':       '--md-code-bg',
+  'code.color':            '--md-code-color',
+  'code.font':             '--md-code-font',
+
+  // Blockquote
+  'blockquote.background': '--md-bq-bg',
+  'blockquote.color':      '--md-bq-color',
+  'blockquote.borderColor':'--md-bq-border-color',
+
+  // Chart
+  'chart.accent':          '--md-chart-accent',
+  'chart.background':      '--md-chart-bg',
+  'chart.textColor':       '--md-chart-text',
+
+  // Table
+  'table.border':           '--md-table-border',
+  'table.headerBackground': '--md-table-header-bg',
+  'table.evenBackground':   '--md-table-even-bg',
+  'table.oddBackground':    '--md-table-odd-bg',
+  'table.color':            '--md-table-text',
+};
+
+// Given a raw token (typically a shape attribute value), return the
+// CSS var() expression to use in its place, or null if not a ref.
+// Returns { value, error } so callers can surface unknown refs.
+function resolveStyleRef(token) {
+  if (typeof token !== 'string' || token.charAt(0) !== '$') return null;
+  var key = token.slice(1);
+  var cssVar = STYLE_PATH_TO_VAR[key];
+  if (cssVar) return { value: 'var(' + cssVar + ')' };
+  return { error: 'unknown style reference "$' + key + '"' };
+}
+
 // ═══════════════════════════════════════════════════════
 //  EXPORTS
 // ═══════════════════════════════════════════════════════
@@ -549,11 +675,14 @@ exports.hslToHex              = hslToHex;
 exports.controlToCssVars      = controlToCssVars;
 exports.cascadeColor          = cascadeColor;
 exports.invertLightness       = invertLightness;
+exports.colorControlRole      = colorControlRole;
 exports.collectStyles         = collectStyles;
 exports.parseDarkBlock        = parseDarkBlock;
 exports.stylesToControls      = stylesToControls;
 exports.STYLE_DEFAULTS        = STYLE_DEFAULTS;
 exports.stripStyleDefaults    = stripStyleDefaults;
+exports.STYLE_PATH_TO_VAR     = STYLE_PATH_TO_VAR;
+exports.resolveStyleRef       = resolveStyleRef;
 
 // UMD tail: in Node (tests) this writes to module.exports; in the browser
 // it creates window.SDocStyles.  We use this pattern instead of ES modules

package/README.md

@@ -1,149 +0,0 @@
-# SDocs
-
-**Read, style, and share markdown files — privately.**
-
-SDocs is a lightweight, stateless markdown editor with live styling. Your entire document lives in the URL hash — nothing is ever sent to a server.
-
-**[sdocs.dev](https://sdocs.dev)**  |  **[npm](https://www.npmjs.com/package/sdocs-dev)**  |  **[MIT License](LICENSE)**
-
----
-
-## What it does
-
-- **Read** — open any `.md` file with clean, styled formatting
-- **Style** — customize fonts, colors, sizes, and spacing via a visual panel or YAML front matter
-- **Share** — compress a document into a URL and share it with anyone (no server, no account)
-- **Export** — PDF, Word (.docx), raw `.md`, or styled `.md` with front matter
-
-Everything runs client-side. The server is a small Node.js script that serves static files. The hosted instance at sdocs.dev counts anonymous visits (no IPs, no tracking IDs) which you can see at [sdocs.dev/analytics](https://sdocs.dev/analytics); self-hosted and CLI use never phone home.
-
-## CLI
-
-```bash
-npm i -g sdocs-dev
-```
-
-```bash
-sdoc README.md                          # open styled in browser
-sdoc share report.md                    # copy shareable link to clipboard
-sdoc share report.md --dark             # link opens in dark theme
-sdoc share report.md --section "Results"  # deep-link to a heading
-sdoc new                                # blank document in write mode
-sdoc schema                             # print all style properties
-cat notes.md | sdoc                     # pipe markdown to browser
-```
-
-## How it works
-
-Documents are compressed with [Brotli](https://en.wikipedia.org/wiki/Brotli) and encoded as [base64url](https://en.wikipedia.org/wiki/Base64#URL_applications) in the URL hash fragment. The hash fragment is never sent to the server by the browser — it stays entirely client-side.
-
-```
-https://sdocs.dev/#md={brotli compressed + base64url encoded .md}
-```
-
-Styles are stored as [YAML front matter](https://jekyllrb.com/docs/front-matter/) in the `.md` file using a `styles:` key. Default style values are omitted from URLs to keep them short. Run `sdoc schema` to see all available properties.
-
-## Stack
-
-- **Server**: `server.js` — pure Node.js `http` module
-- **Frontend**: plain HTML, CSS, and JS in `public/` — no build step, no framework
-- **Markdown parsing**: [marked](https://github.com/markedjs/marked) (the only runtime dependency)
-- **Compression**: [brotli-wasm](https://github.com/nicolo-ribaudo/brotli-wasm) (WebAssembly, loaded in browser)
-- **Tests**: `node test/run.js` — custom red/green harness using Node `assert`
-- **Browser tests**: [Playwright](https://playwright.dev/) (Chromium)
-
-## Contributing
-
-### Setup
-
-```bash
-git clone https://github.com/espressoplease/SDocs.git
-cd SDocs
-npm install
-```
-
-### Run locally
-
-```bash
-node server.js                    # http://localhost:3000
-PORT=8080 node server.js          # custom port
-SDOCS_DEV=1 node server.js        # dev mode: no-cache headers, service worker disabled
-```
-
-`SDOCS_DEV=1` (or `NODE_ENV=development`) disables browser caching for CSS/JS and tells the app to unregister the service worker and clear its caches on load, so edits to frontend code are picked up instantly without hard-refreshing. Leave it unset in production.
-
-### Run tests
-
-```bash
-node test/run.js                              # unit + integration tests
-npx playwright test test/write-mode.spec.js   # browser tests (needs Chromium)
-```
-
-### Point the CLI at your local server
-
-By default the CLI opens URLs on `https://sdocs.dev`. When developing, point it at your local instance:
-
-```bash
-# Per-command
-sdoc README.md --url http://localhost:3000
-sdoc share README.md --url http://localhost:3000
-
-# Or set once for your session
-export SDOCS_URL=http://localhost:3000
-sdoc README.md
-sdoc share README.md
-```
-
-### Project structure
-
-```
-server.js                   # Node.js static file server
-bin/sdocs-dev.js            # CLI entry point
-public/
-  index.html                # Single HTML file (markup only)
-  css/                      # Modular CSS (tokens, layout, rendered, panel, mobile)
-  sdocs-yaml.js             # YAML front matter parser (UMD, shared with Node)
-  sdocs-styles.js           # Style data tables + logic (UMD, shared with tests)
-  sdocs-state.js            # Shared mutable state namespace (window.SDocs)
-  sdocs-theme.js            # Fonts, dark mode, theme toggle
-  sdocs-controls.js         # CSS variable management, color cascade
-  sdocs-export.js           # PDF/Word/MD export
-  sdocs-write.js            # Write mode (contentEditable)
-  sdocs-app.js              # Core app: render, sync, modes, compression, init
-  brotli-wasm-v1.js         # Brotli WASM wrapper (IIFE)
-  brotli_wasm_bg.wasm       # Brotli WebAssembly binary
-  vendor/marked.min.js      # Markdown parser
-  sw.js                     # Service worker (stale-while-revalidate + version check)
-  sdoc.md                   # Landing page content
-test/
-  run.js                    # Test runner entry point
-  runner.js                 # Shared test harness
-  test-yaml.js              # YAML parser tests
-  test-styles.js            # Style system tests (including stripStyleDefaults)
-  test-cli.js               # CLI argument parsing + URL building tests
-  test-slugify.js           # Slugify + heading dedup tests
-  test-base64.js            # Base64 UTF-8 roundtrip tests
-  test-files.js             # File existence + content assertions
-  test-http.js              # HTTP server tests
-  write-mode.spec.js        # Playwright write mode tests
-  sample.smd                # Test fixture (styled markdown)
-  bench-compression.js      # Compression benchmark (deflate vs brotli)
-```
-
-### Architecture notes
-
-The app is entirely stateless. All state lives in `window.SDocs` in the browser. There is no build step — all JS loads as plain `<script>` tags. Modules that need to run in both the browser and Node (for tests) use a UMD IIFE pattern.
-
-Styles are driven by CSS custom properties on `#rendered`. Every control in the style panel maps to a `--md-*` CSS variable. When exporting, `collectStyles()` reads the current control values from the DOM.
-
-### Guidelines
-
-- No build step. All browser JS must work as plain `<script>` tags.
-- One runtime dependency (`marked`). Add dependencies only when there's no reasonable alternative.
-- Keep the server simple. It serves static files — no API routes, no database.
-- Test everything that's testable without a browser in `test/run.js`. Use Playwright for browser-specific behavior.
-- Style properties that match defaults should be omitted (see `stripStyleDefaults` in `sdocs-styles.js`).
-
-## License
-
-[MIT](LICENSE)