sdocs-dev 1.2.0 → 1.3.0

package/README.md

@@ -0,0 +1,149 @@
+# 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 ~60 lines of Node.js that serves static files. No database, no logging, no analytics.
+
+## 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/JoshInLisbon/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 (~60 lines)
+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)

package/bin/sdocs-dev.js

@@ -75,6 +75,7 @@ USAGE
   sdoc share <file>                Copy shareable link to clipboard
   sdoc share <file> --section "X"  Link with section anchor
   sdoc schema                      Print the full styles schema
+  sdoc charts                      Chart types, options, and styling guide
   sdoc defaults                    Show ~/.sdocs/styles.yaml
   sdoc defaults --reset            Remove default styles
   sdoc help                        Show this help
@@ -97,6 +98,20 @@ OPTIONS
 ENVIRONMENT
   SDOCS_URL   Fallback base URL if --url is not passed.
 
+FILE INFO CARD
+  When you \`sdoc <file>\`, the browser shows a small info card
+  above the document with:
+    file       The filename — included in the share URL.
+    path       Relative path from the cwd — local only.
+    fullPath   Absolute path on your machine — local only.
+
+  Local fields (path, fullPath) are passed to the browser via a
+  separate URL parameter that JS reads into memory and then strips
+  from the address bar on load. They never appear in any URL the
+  user can copy, and \`sdoc share <file>\` never includes them in
+  the generated link. If someone opens your shared URL, only
+  \`file\` is visible.
+
 STYLED MARKDOWN FORMAT
   SDocs extends standard .md files with an optional YAML
   front matter block (the same standard used by Jekyll, Hugo, Obsidian).
@@ -114,7 +129,11 @@ STYLED MARKDOWN FORMAT
   # My Document
   Content here...
 
+  Colors work in both themes automatically — dark mode versions
+  are generated by inverting lightness. Use \`dark:\` to override.
+
 Run \`sdoc schema\` for the complete list of style properties.
+Run \`sdoc charts\` for chart types, options, and styling.
 `;
 
 const SCHEMA = `
@@ -183,35 +202,66 @@ BLOCKQUOTE
     background   string  Quote background color. Default: "#f7f5f2"
     color        string  Quote text color. Default: "#6b6560"
 
+BLOCKS (shared styling for code, blockquote, and chart blocks)
+  blocks:
+    background  string  Background for all block types. Cascades to code,
+                        blockquote, and chart backgrounds unless overridden.
+    color       string  Text color for all block types. Cascades to code,
+                        blockquote, and chart text unless overridden.
+
+CHARTS (see also: \`sdoc charts\` for the full chart reference)
+  chart:
+    accent      string  Palette base color (hex). Default: "#3b82f6"
+    palette     string  Palette mode. Default: "monochrome"
+                        Options: monochrome, complementary, analogous, triadic,
+                        pastel, warm, cool, earth
+    background  string  Chart background. Default: inherits blocks.background
+    textColor   string  Chart labels/axes. Default: inherits blocks.color
+
 COLOR CASCADE
   Colors cascade from general → specific:
     color  →  headers.color  →  h1.color, h2.color, h3.color, h4.color
     color  →  p.color        →  list.color
+    blocks.background  →  code.background, blockquote.background, chart.background
+    blocks.color       →  code.color, blockquote.color, chart.textColor
   Set a child color only when you want it to differ from its parent.
 
 THEME COLORS
-  Colors can be set per-theme using \`light:\` and \`dark:\` sub-blocks under \`styles:\`.
-  Non-color properties (fonts, sizes, spacing, weights) remain at the top level
-  and are shared across both themes.
+  Top-level colors are light-mode colors. Dark mode is auto-generated
+  by inverting lightness (same hue, flipped brightness). Light backgrounds
+  become dark, dark text becomes light. Colors already very dark (like a
+  dark code block background) are kept as-is.
+
+  This means you only need to specify colors ONCE:
 
   ---
   styles:
-    fontFamily: Lora
-    baseFontSize: 17
-    light:
-      background: "#ffffff"
-      color: "#1a1a2e"
-      h1: { color: "#c0392b" }
-      link: { color: "#2563eb" }
+    color: "#2d1810"
+    background: "#fdf6f0"
+    headers: { color: "#8b2500" }
+    blocks:
+      background: "#f5e6d8"
+      color: "#5a3e2e"
+  ---
+
+  Dark mode will automatically get inverted versions of all colors above.
+
+  To override specific dark-mode colors, add a \`dark:\` block:
+
+  ---
+  styles:
+    color: "#2d1810"
+    background: "#fdf6f0"
+    blocks:
+      background: "#f5e6d8"
     dark:
-      background: "#2c2a26"
-      color: "#e7e5e2"
-      h1: { color: "#ef6f5e" }
-      link: { color: "#60a5fa" }
+      background: "#1a1210"
+      blocks:
+        background: "#2a1a1a"
   ---
 
-  Top-level colors (old format) are treated as light-theme colors for
-  backwards compatibility.
+  Non-color properties (fonts, sizes, spacing, weights) remain at the
+  top level and are shared across both themes.
 
 FONTS (24 supported, loaded lazily from Google Fonts)
   Inter · Roboto · Open Sans · Lato · Montserrat · Source Sans 3
@@ -224,29 +274,190 @@ EXAMPLE — editorial article with colored heading tiers
   styles:
     fontFamily: Lora
     baseFontSize: 17
-    h1: { fontSize: 2.3, fontWeight: 700 }
-    h2: { fontSize: 1.55, fontWeight: 600 }
-    h3: { fontSize: 1.2, fontWeight: 600 }
+    background: "#fffaf5"
+    color: "#1a1a2e"
+    h1: { fontSize: 2.3, fontWeight: 700, color: "#c0392b" }
+    h2: { fontSize: 1.55, fontWeight: 600, color: "#8e44ad" }
+    h3: { fontSize: 1.2, fontWeight: 600, color: "#16a085" }
     p: { lineHeight: 1.9, marginBottom: 1.2 }
-    light:
-      background: "#fffaf5"
-      color: "#1a1a2e"
-      headers: { color: "#2c3e50" }
-      h1: { color: "#c0392b" }
-      h2: { color: "#8e44ad" }
-      h3: { color: "#16a085" }
-      link: { color: "#e67e22", decoration: "underline" }
-      blockquote: { borderColor: "#c0392b", background: "#faf0eb", color: "#7f8c8d" }
+    link: { color: "#e67e22" }
+    blocks:
+      background: "#faf0eb"
+    blockquote: { borderColor: "#c0392b", color: "#7f8c8d" }
     dark:
       background: "#1a1520"
-      color: "#e7e5e2"
-      headers: { color: "#b0aaa5" }
       h1: { color: "#ef6f5e" }
       h2: { color: "#c490e4" }
-      h3: { color: "#5ed4b8" }
-      link: { color: "#f0a860", decoration: "underline" }
-      blockquote: { borderColor: "#ef6f5e", background: "#221a28", color: "#9e9590" }
+      blockquote: { borderColor: "#ef6f5e" }
+  ---
+`;
+
+const CHARTS_HELP = `
+SDocs — Charts
+==============
+Render beautiful charts in markdown using \`\`\`chart code blocks.
+Charts are powered by Chart.js, loaded lazily from CDN only when needed.
+
+BASIC SYNTAX
+  Wrap a JSON object in a \`\`\`chart fenced code block:
+
+  \`\`\`chart
+  {
+    "type": "bar",
+    "title": "Monthly Revenue",
+    "labels": ["Jan", "Feb", "Mar"],
+    "values": [100, 150, 130]
+  }
+  \`\`\`
+
+CHART TYPES
+  pie              Circular segments (use "color" for monochrome shading)
+  doughnut         Hollow-center pie (alias: donut)
+  bar              Vertical bars
+  horizontal_bar   Horizontal bars (alias: hbar)
+  stacked_bar      Stacked vertical bars
+  line             Line graph with data points
+  area             Line with filled area beneath
+  stacked_area     Multiple filled areas stacked (alias: stacked_line)
+  radar            Spider/web chart for multi-axis comparison
+  polarArea        Like pie but equal angles, varying radius
+  scatter          X/Y point plots
+  bubble           Like scatter with size dimension
+  mixed            Combo chart — bar + line on same plot (alias: combo)
+
+DATA FORMATS
+  Simple (single dataset):
+    "labels": ["A", "B", "C"],
+    "values": [10, 20, 15]
+
+  Multi-dataset:
+    "labels": ["Q1", "Q2"],
+    "datasets": [
+      { "label": "2024", "values": [10, 20] },
+      { "label": "2025", "values": [12, 25] }
+    ]
+
+  Scatter/Bubble:
+    "datasets": [
+      { "label": "Group", "data": [{"x": 1, "y": 2}, {"x": 3, "y": 5}] }
+    ]
+
+CHART OPTIONS
+  title           string     Chart heading
+  subtitle        string     Smaller text below title
+  labels          string[]   Category labels
+  values          number[]   Data for a single dataset
+  datasets        array      Multiple datasets (see above)
+  color           string     Single accent color (hex)
+  colors          string[]   Per-segment/bar custom colors
+
+AXIS OPTIONS
+  xAxis / xLabel  string     X-axis label
+  yAxis / yLabel  string     Y-axis label
+  y2Axis          string     Right y-axis label (enables dual axis)
+  min             number     Minimum value on value axis
+  max             number     Maximum value on value axis
+  stepSize        number     Tick interval
+  beginAtZero     boolean    Default true. Set false for auto-range.
+
+NUMBER FORMATTING
+  format          string     "currency" ($), "euro" (€), "pound" (£),
+                             "percent" (%), "comma" (1,000)
+  prefix          string     Custom value prefix (e.g. "£")
+  suffix          string     Custom value suffix (e.g. " kg", "°C")
+  y2Format        string     Format for right y-axis
+  y2Prefix        string     Prefix for right y-axis
+  y2Suffix        string     Suffix for right y-axis
+
+DISPLAY OPTIONS
+  legend          boolean    Show/hide legend (auto by default)
+  legendPosition  string     "top", "bottom" (default), "left", "right"
+  dataLabels      boolean    Show values on chart (default true). Set false for clean look.
+  aspectRatio     number     Width/height ratio (e.g. 2 for wide, 0.8 for tall)
+  stacked         boolean    Force stacking on bar/line charts
+
+DATASET OPTIONS (inside each dataset object)
+  label           string     Name shown in legend
+  values          number[]   Data points
+  data            object[]   For scatter: [{x, y}], for bubble: [{x, y, r}]
+  color           string     Dataset color (hex)
+  colors          string[]   Per-bar colors within dataset
+  type            string     Override type in mixed charts ("bar" or "line")
+  yAxisID         string     "y" (left) or "y2" (right) for dual-axis charts
+  fill            boolean    Fill area under line
+  tension         number     Line smoothing (0 = straight, 0.4 = smooth)
+  order           number     Draw order (lower = rendered on top)
+
+ANNOTATIONS (reference lines)
+  "annotations": [
+    { "y": 60, "label": "Target", "color": "#ef4444" },
+    { "x": "Mar", "label": "Launch", "dashed": true }
+  ]
+
+  y / x           number/string   Position of the reference line
+  label           string          Text label on the line
+  color           string          Line color
+  width           number          Line thickness (default 2)
+  dashed          boolean         Dashed style (default true)
+  position        string          Label position: "start", "center", "end"
+
+CHART STYLING (via front matter or style panel)
+  Charts inherit background and text colors from the block cascade:
+
+  ---
+  styles:
+    blocks:
+      background: "#1a1a2e"     # all blocks: code, blockquote, charts
+      color: "#c8c3bc"          # text in all blocks
+    chart:
+      accent: "#6366f1"         # palette base color
+      palette: monochrome       # palette generation mode
+      background: "#0e4a1a"     # override blocks.background for charts only
+      textColor: "#c8f0d8"      # override blocks.color for charts only
   ---
+
+  COLOR CASCADE FOR BLOCKS
+    blocks.background  →  code.background, blockquote.background, chart.background
+    blocks.color       →  code.color, blockquote.color, chart.textColor
+    Set a child value only when you want it to differ from the parent.
+
+  DARK MODE
+    All colors auto-generate dark-mode counterparts (lightness inverted).
+    Add a \`dark:\` block to override specific values:
+      dark:
+        blocks:
+          background: "#2a1a1a"
+
+  PALETTE MODES
+    monochrome      Same hue, varying lightness (default)
+    complementary   Hues spread evenly around the color wheel
+    analogous       Neighboring hues for a harmonious feel
+    triadic         Three base hues 120° apart
+    pastel          Soft, light colors
+    warm            Reds, oranges, yellows
+    cool            Blues, teals, purples
+    earth           Browns, olives, muted greens
+
+  Per-chart override: set "accent" and/or "palette" directly in the chart JSON.
+  Per-chart colors: set "colors": ["#hex", ...] to override the palette entirely.
+  Single-color pie: set "color": "#hex" on a pie/doughnut for monochrome shading.
+
+MIXED CHART EXAMPLE (dual y-axis)
+  \`\`\`chart
+  {
+    "type": "mixed",
+    "title": "Revenue vs Growth",
+    "labels": ["Q1", "Q2", "Q3", "Q4"],
+    "datasets": [
+      { "label": "Revenue", "type": "bar", "values": [50, 65, 80, 95], "yAxisID": "y" },
+      { "label": "Growth", "type": "line", "values": [12, 30, 23, 19], "yAxisID": "y2" }
+    ],
+    "yAxis": "Revenue ($M)",
+    "y2Axis": "Growth %",
+    "format": "currency",
+    "y2Format": "percent"
+  }
+  \`\`\`
 `;
 
 // ── Compression (brotli + base64url) ─────────────────
@@ -282,15 +493,13 @@ function decompressFromBase64Url(b64url) {
   }
 }
 
-// ── Slugify ───────────────────────────────────────────────
+// ── Slugify (shared module) ───────────────────────────────
 
-function slugify(text) {
-  return text.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '').replace(/-+/g, '-').replace(/^-|-$/g, '');
-}
+var slugify = require('../public/sdocs-slugify').slugify;
 
 // ── Parse args ────────────────────────────────────────────
 
-const SUBCOMMANDS = new Set(['new', 'share', 'schema', 'defaults', 'help']);
+const SUBCOMMANDS = new Set(['new', 'share', 'schema', 'defaults', 'help', 'charts']);
 
 function parseArgs(argv) {
   const args = argv || process.argv.slice(2);
@@ -354,6 +563,15 @@ function buildUrl(content, opts) {
   const baseUrl = opts.url || process.env.SDOCS_URL || DEFAULT_URL;
   const params = new URLSearchParams();
 
+  // Runtime-only metadata (paths). Stripped from the URL by the browser on load,
+  // so anything the user copies from the address bar won't contain them.
+  if (opts.local && Object.keys(opts.local).length > 0) {
+    const json = JSON.stringify(opts.local);
+    const b64 = Buffer.from(json, 'utf-8').toString('base64')
+      .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+    params.set('local', b64);
+  }
+
   if (content) {
     // Strip default style values to produce shorter URLs
     const parsed = SDocYaml.parseFrontMatter(content);
@@ -510,6 +728,7 @@ if (require.main === module) {
     // Subcommand dispatch
     if (opts.subcommand === 'help')   { console.log(HELP);   process.exit(0); }
     if (opts.subcommand === 'schema') { console.log(SCHEMA); process.exit(0); }
+    if (opts.subcommand === 'charts') { console.log(CHARTS_HELP); process.exit(0); }
     if (opts.subcommand === 'defaults') {
       if (opts.resetFlag) resetDefaults();
       else showDefaults();
@@ -532,12 +751,37 @@ if (require.main === module) {
       content = applyDefaultStyles(content);
     }
 
+    // Inject `file:` into front matter (basename only — safe to share).
+    // Respects user-set file: if already present.
+    if (content && opts.file) {
+      const parsed = parseFrontMatter(content);
+      if (!parsed.meta.file) {
+        parsed.meta.file = path.basename(opts.file);
+        content = serializeFrontMatter(parsed.meta) + '\n' + parsed.body;
+      }
+    }
+
+    // Runtime-only local metadata for the opener's view.
+    // `share` omits it so shared URLs never carry paths.
+    let local = null;
+    if (opts.file && opts.subcommand !== 'share') {
+      const abs = path.resolve(opts.file);
+      const rel = path.relative(process.cwd(), abs);
+      local = { fullPath: abs };
+      // Only include a relative path if the file is inside cwd, otherwise
+      // `path` would just duplicate `fullPath`.
+      if (!rel.startsWith('..') && !path.isAbsolute(rel)) {
+        local.path = './' + rel;
+      }
+    }
+
     const url = buildUrl(content, {
       url: opts.url,
       mode: opts.mode,
       theme: opts.theme,
       defaultStyles: !content ? defaults : null,
       section: opts.section,
+      local: local,
     });
 
     // Share: copy to clipboard

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdocs-dev",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Open, share, and style markdown files from the terminal",
   "main": "server.js",
   "bin": {
@@ -20,9 +20,11 @@
     "markdown",
     "editor",
     "styling",
+    "charts",
     "pdf",
     "docx",
-    "cli"
+    "cli",
+    "agents"
   ],
   "author": "Josh Summers",
   "license": "MIT",
@@ -32,12 +34,13 @@
   },
   "homepage": "https://sdocs.dev",
   "dependencies": {
+    "better-sqlite3": "^12.8.0",
     "brotli": "^1.3.3",
     "brotli-dec-wasm": "^2.3.2",
     "brotli-wasm": "^3.0.1",
     "marked": "^11.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.58.2"
+    "@playwright/test": "^1.59.1"
   }
 }

package/public/{brotli-wasm.js → brotli-wasm-v1.js}

@@ -195,11 +195,11 @@ function isLikeNone(x) {
 * `ResultFailure` is removed
 * because we will convert the failure to an actual negative error code (if available) and pass it elsewhere.
 */
-export const BrotliStreamResultCode = Object.freeze({ ResultSuccess:1,"1":"ResultSuccess",NeedsMoreInput:2,"2":"NeedsMoreInput",NeedsMoreOutput:3,"3":"NeedsMoreOutput", });
+const BrotliStreamResultCode = Object.freeze({ ResultSuccess:1,"1":"ResultSuccess",NeedsMoreInput:2,"2":"NeedsMoreInput",NeedsMoreOutput:3,"3":"NeedsMoreOutput", });
 /**
 * Returned by every successful (de)compression.
 */
-export class BrotliStreamResult {
+class BrotliStreamResult {
 
     static __wrap(ptr) {
         const obj = Object.create(BrotliStreamResult.prototype);
@@ -283,7 +283,7 @@ export class BrotliStreamResult {
 }
 /**
 */
-export class CompressStream {
+class CompressStream {
 
     static __wrap(ptr) {
         const obj = Object.create(CompressStream.prototype);
@@ -342,7 +342,7 @@ export class CompressStream {
 }
 /**
 */
-export class DecompressStream {
+class DecompressStream {
 
     static __wrap(ptr) {
         const obj = Object.create(DecompressStream.prototype);
@@ -432,7 +432,7 @@ async function load(module, imports) {
 
 async function init(input) {
     if (typeof input === 'undefined') {
-        input = new URL('brotli_wasm_bg.wasm', import.meta.url);
+        input = '/public/brotli_wasm_bg.wasm';
     }
     const imports = {};
     imports.wbg = {};
@@ -503,7 +503,6 @@ async function init(input) {
 
 
 
-
 // Auto-init: fetch WASM from same directory
 var wasmUrl = '/public/brotli_wasm_bg.wasm';
 window.BrotliWasm = {

package/public/css/layout.css

@@ -119,8 +119,8 @@ body {
 
 .toggle-group {
   display: flex;
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
+  background: none;
+  border: none;
   border-radius: var(--radius);
   overflow: hidden;
   padding: 2px;
@@ -157,7 +157,6 @@ body {
   gap: 4px;
 }
 
-#btn-theme,
 .toolbar-icon-btn {
   display: inline-flex;
   align-items: center;
@@ -174,7 +173,6 @@ body {
   flex-shrink: 0;
 }
 @media (hover: hover) {
-  #btn-theme:hover,
   .toolbar-icon-btn:hover {
     color: var(--text-2);
     background: var(--bg-hover);
@@ -186,6 +184,7 @@ body {
   overflow: auto;
   position: relative;
   background-color: #FFFFFF;
+  outline: none;
 }
 html[data-theme="dark"] #content-area {
   background-color: #2c2a26;