sdocs-dev 1.1.1 → 1.2.0

package/public/default.md

@@ -1,36 +1,85 @@
 ---
 styles:
-  fontFamily: "Inter"
+  fontFamily: Inter
   baseFontSize: 16
   lineHeight: 1.75
-  headers: { fontFamily: "inherit", scale: 1, marginBottom: 0.4 }
   h1: { fontSize: 2.1, fontWeight: 700 }
   h2: { fontSize: 1.55, fontWeight: 600 }
   h3: { fontSize: 1.2, fontWeight: 600 }
-  h4: { fontSize: 1, fontWeight: 600 }
-  p: { lineHeight: 1.75, marginBottom: 1.1 }
-  link: { color: "#2563eb", decoration: "underline" }
-  code: { font: "JetBrains Mono", background: "#f4f1ed", color: "#6b21a8" }
-  blockquote: { borderColor: "#2563eb", borderWidth: 3, fontSize: 1, color: "#6b6560" }
-  list: { spacing: 0.3, indent: 1.6 }
+  p: { lineHeight: 1.75, marginBottom: 1 }
+  light:
+    background: "#ffffff"
+    color: "#1c1917"
+  dark:
+    background: "#2c2a26"
+    color: "#e7e5e2"
 ---
+
 # Say hello to SmallDocs: A markdown-first replacement for Word & GDocs
 
 If you're working with agents, a document written in markdown is <ins>officially</ins>* 407 times more useful than a document locked inside a `.docx` or `.gdoc` file format. Because of this, I believe Word and GDocs' days are numbered. (*I am the official.)
 
 But while markdown is great for agents, it's a bit annoying for humans. Quickly and elegantly reading a `.md` file requires you to open your code editor and enter "preview" mode. Sharing a markdown file requires you to actually send the file to someone. They then have to download it and find the least annoying way to read it.
 
-SmallDocs is an [open source](https://github.com/JoshInLisbon/SDocs) attempt at something different. It lets you (or your agent) easily, elegantly and privately **read**, **share**, **format** and **export** `.md` files.
+SmallDocs is an [open source](https://github.com/JoshInLisbon/SDocs) attempt at something different. It lets you (or your agent) easily, elegantly and <ins>100% privately</ins> **read**, **format**, **share** and **export** `.md` files.
+
+Reading a `.md` file in SmallDocs feels just like this (you're reading markdown right now). And by playing with the styles, it can feel like [this](https://sdocs.dev/#md=jZTdbuNGDIXv9RQHykWBrS1Ijp04LlAgSRF021wEmwC5piRKM_BoqJ0ZxdAWBfoQfcI-STFSfnc3Re8MknN4-JHycrlMgg6Gd0jvFOPcBUiDWyMHfGKqtW3TxIfRsN8lQCM2XFGnzbhDei2O0gQoyfOV2HCrv_AOxTYBjLb8K-tWhR2K7CwBFFPNzu_wx1uRG0NjQ9rhF-17Q2O6gK8o-imyYoGOXKvthYQg3Q55tsGfUax40pl7rrL1HF-9jRfZ6RTvY_itVJEdTymj7T5ma67EUdBid0itWE6ndGmk2n8eJHAsKsXV7O51HdQO68WrTnl2tnnUi0MnQORS7Vsng613SI8aak6aPJ0ylRhxMbiqVutiOwdfEXrOb8v1pjierbx4fU5Tvlmt6qf097xePpXWazo9oXTxtasNN3ySLl40T8oNrflJs5J6Vnv7KudtXb1-dUrrZlXNr2py--8RKLigYv0VAc7rTbV-n8Cj7_cI8LZab-l_EdiWJ2fF-hsCK1qtiu3rWcotbc_y_ybw7asXo8vlMkmO8M7nlCQfLQgHcaaG9EF3-gvXaMTB73XXadsuEBQ7hvYgfB40Bzgu2ZjpOt2sA2_kYMYsSY6OcK9G3PbMNX7XxnhcStc7Vmy9FpskPyN97I5mcFZ7xT72QKdtDbFmxEEHhY4CO03GR9N7KwfDdcs_QYfoJSht91EjKAroaM8eh_jzwJMpyOB8luKfv_7Gb6IsrqXac5JEEPTAjlpGz86Lnco9Vps8cqh9DEcvQ-BsnmP5NGUVRdmjd9JpzygWeZ7_mOFiiFA8k6sUKrFe-8A2mBFeycHPHksexdY4yXMc-i4u6xUW1E56jyCwTA5f2MkM8045Ztw4qoKu2MfYEYoMn3hyNYHryVHrqFdJcsGNOEYnD9Gv2MUMQwdQS9pm0yF4rqKTnryH4weOjCd2UazRzgeIjfvwnutsbrnKcO7agefdxEIaghKXJB8bjDKA2mh0yvIDuzEuqF3E1A-OYSU830pcyWOYSi-u1LbNcDN4Nd11hnO_x4eDGj889j7OcGnE89S2FNnPayzZv4gq6nu2HtQEdpMhH6TPcM3zWLpm8vAcguEM906HyZSazlAcyELJ4Gbo57jSlgzulAytCnO7hnyIHQ80xj0NNv49BLI1vHQ8K-lpha1-4Ig86I6z5F8&theme=light), [this](https://sdocs.dev/#md=jVTtbtpIFP0_T3Fl1D8RNh4DDvaPlfJBdiO1aupktdKqUhg81zDFnqEzYxJaKu1D7BP2Saqx8YbQZlsLieGce-85Plzb931ihS0xBe_s5hoyLFCjzBE2kUeM3ZZoUgJQKGmvWCXKbQrerap1jnDLpIGhRwDmzOCVkvZWfMIU6JgAlELiHygWS5sCDWIHLZFx1CaFz8_HZWqurPL6UDG9EPJcWauqFMJgCF9cG-062vFRi0bPURqMWnx4jNNxQ6wdfqyQNFSuOHZdKXhXQjN4o6TyGnZeqnz1sVa2qZkrzVH_JbhdphD1D5S6aaUw1lWaNcuFXDiCjvsgJEfZhBHty1w2BMDFl68WWtWSp-D1iubyGiZXpdIOjEZREu3Bgxz_4ymjGI1aw034q2d0mMQJZx3d3e-RblxMCub1n7qS8XAShl3Xj3K4OBLo_3RmPI75adzO5EyvfpRAyCmlp0cJ5AmnPHk5gSIs4iJ_MYHxhMVF8f8J0JjOo-jQbVGweHz6SwnsBY4T-H7mZJ6MEnQzfd8npAfHzx0h58wg_Jm9TmG2tHZt0sGArUWAj6xalxjkqhpsohkhvR6c1XaJ0oqcWaEkIWdlCRo_1misaQ5CIzA4R6ZRg1UrlCAk2CXCzPUqLT41rbN9qikhs9mMPOPSrt-s7kuxwfsgCJoq52Aq-VoJaY371YObt7d3MOAqrytswAuNzDoPEh-gw4NG5YNRknwmAF7zDvJS8N7VTFvU5RYyXCttvb6jC6UrZh1fMb3i6kG2eK6kRdkQPXhHIUNTl9a8l-9lhhuUNcJC4wNEw1dBEHjkS-v65CRDs1bS4MkJfP3nX5hFIYXWKJ8dWRPcjecqv588Rquk2Cu3xfetqyiMYj8c-jS5o2Eaus_fbV2tS1fw8t_4FNXgQKNz6hL9fXoY6CAVnJAMrRa4cbF2DMy3cH0ZEPIbZC7wUlTCvW_C8Gkh1qihErK22Bzd5q1wG7Q6l9PX07vpd1I3qCsmUdpyCxxLtGgOVAO4WwoDLHd7AjmTUlmYI9SSK4lBuyFaKw0XiqMhZNccYAdvkEkhF7AjO7-59l_uRHYwCkPYwbXcsFLw7g5grvgWWpq6GcIYN0NpEPvKdsXbkhHs4LKLxxkr3GPZklECu4OgAB9zRI6O_QY&theme=dark) or even [this](https://sdocs.dev/#md=jVRLbtxGEN3zFA-jhQFBQ8yM9Z1FANmAEBt2spAAxcsiu0h2ptlFdxc1mQQBcohcwuscwTfJSYJuzsSSP0GWrGpW1ftUzefzQq06XmN2z7xhb2A93thYiZ8VUXeO47oAGvF6Q711uzVmP4zeqswKoKLIN-L11v7KaywvCsBZz9-zbTtdY1lenhVAx2Q4xDV-e1rntURurMct-Tg7QawpDbIsF2cn6Cm01r8QVenXWJSnZ_g9lVoeqkwtV-X5FF89jS_38SGFn9ZalqucqpzUm_ejKKc3lQTD4d4a7dY4O3lUalFeTb1dBlUACXe9aYOM3qwxO2qapmrOZjlTi5OQgiuzulqdT8FHBPybrxfPr1bVLFfOrG2epFdXl4vq6pD-2qwvD0_54rR-Xs9OPp_KNKtmMTv5VPOiOa_OF4eatZip2tO_LpsFXz7-6_GghsLmawwsaXm-PP2MAb7khbn8NgP7ub_FwJkhw6v_xcB-xM8ZWNFqtXrCQLWgxdXlfzPw5V-fBp3P50VxhC9WpSjuusAMQ7tY4geBVes5UNiVeD1GBaG2uoN2pAi8pWAituQNB-vbsiiOjnATrKEd_v7jT1y7hnoqinsGhWAfOLfSjuFIGdQoBy_iQd5gS27DBlEDJYPCepX8VpzhqPBpGSsJnYgpcddxesqsERQYFQV2O2ytYbCXse3QSIBuBQPL4LjEGxq9CTt05NuIinXL7FGN1hnr21jihoygH6OtYYJtNEJGhTSQgT2MSIhlUXyHdzLCiH-meLDR6h5mmeMtK5zEND6snmRkia1nMWMZxHotJ0aU0QbrXAJNwVjPEZQoHhzVjK3VhGEMUKpcynkDL-jZjxN-2XoOqEJCq9h2pPzAAVuKaALHbtLjlnQMB0VesPv4oU8yM3oJ3voWUSkom6nh8fFAUT9-sBGG4Unp-DhNlYZvqJcxoqINJ0O843iS4-9HHjm3deLbfcJqjmwlaAebMKeerzl8_MvbXiLeiqeoHHawEVTFMRi3Q8U0qm1Gl8dNeHaIY2gSIzWFvYXekh85XWgYVrKuxD0jDuw1K97JGDLfgTNrtYzOoKOH5Bnascm8ZnqOJieNPrJmWfY2pAQlo0u-Ddh78U5CSE33RCZm2uRPn3tOsuT7Ch2DZzMh0C7xvKXQ53GiNFriFVRkg9MLDJ2oxBI_-onFNjl80m70B-Xe_IQbqlXCriiuUYt_4Kya9WaMGiw51NIPjn9BMzoHadZFMccLkU3sZIiTvFX6TCTUCWTjRDK0mq2zvi3muEYQaVSGtFGQBw5OZGP3XFTBmpaLOW7z6oGCQvxeJnog65JVD4IVc7yUpmGe7gXVOpJzO2jS3cDZDaPODzLYxN1dZuq6Sot3OEmv0vJ4UWjY5UEEth8Cx4idjCVy_ud0nY4rtr49frJ1aS3Q04ZjsmRPrWe19aRUHca-crmmdcnfNZmDqW0_SIw2wemsc_vopC0pzoc-y-LFczoRVpON6zGQsnk80-OL2dEwsI8JQcWfrF4WxatnzuUY1Zuy-Ac&theme=light):
+
+![Examples](https://sdocs.dev/public/images/examples.png)
 
-Reading a `.md` file in SmallDocs feels just like this (you're reading markdown right now). And creating a SmallDoc for a `.md` file (+ automatically opening your browser to read it) is as simple as:
+Use SmallDoc's CLI for speed. Creating a SmallDoc for a `.md` file (+ automatically opening your browser to read it) is as simple as:
 
 ```
-# npm i sdocs-dev
+# npm i -g sdocs-dev
 sdoc README.md
 ```
 
 ## How SmallDocs work
 
+### URLs
+
+The URL format for SmallDocs is:
+
+```
+https://sdocs.dev/#md={compressed & encoded .md}
+```
+
+Your entire document (content and styles) lives in the URL hash.
+
+To keep URLs as short as possible, SmallDocs compresses your markdown using [deflate](https://en.wikipedia.org/wiki/Deflate) (a standard compression algorithm built into every browser) and then encodes the result with [base64url](https://en.wikipedia.org/wiki/Base64#URL_applications) (a URL-safe variant of base64 that avoids characters like `+`, `/`, and `=` which would otherwise need percent-encoding). Style properties that match built-in defaults (e.g. `fontFamily: Inter`, `baseFontSize: 16`) are omitted from the URL — only values that differ from defaults are included, which keeps URLs shorter.
+
+The `mode` parameter controls which view opens. Valid values are `read` (clean reading view, style panel hidden), `style` (style panel visible), and `raw` (raw markdown editor). When sharing a link for someone to read, use `mode=read`:
+
+```
+https://sdocs.dev/#md=...&mode=read
+```
+
+You can also link directly to a section using the `sec` parameter. Click any heading's link icon to copy its section URL:
+
+```
+https://sdocs.dev/#md=...&sec=url-formatting
+```
+
+The `sec` value is the heading text slugified (lowercased, spaces become hyphens, special characters stripped). The page will scroll to that section on load.
+
+The `theme` parameter forces a specific theme: `theme=light` or `theme=dark`. This is useful when sharing a link where the document looks best in a particular theme. The override is view-only — it applies for that view but won't change the reader's saved theme preference.
+
+### Privacy
+
+Because the SmallDocs url format is:
+
+```
+https://sdocs.dev/#md={compressed & encoded .md}
+```
+
+Your document never hits the SDocs server.
+
+This layer of privacy is built into how HTTP works. The hash fragment (everything after the `#` in a URL) is never sent to the server by the browser. It always stays entirely client-side:
+
+> "The fragment is not sent to the server when the URI is requested; it is processed by the client" - [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Fragment)
+
+The [sdocs.dev](https://sdocs.dev) site is purely a rendering space. JavaScript reads `window.location.hash`, decompresses and decodes the content, and renders your `.md` locally. The server is about 60 lines of Node.js that serves static files — no database, no logging, no analytics.
+
 ### Formatting
 
 SDocs adds basic styling to markdown files. You write your content in regular markdown and the styles live in a metadata block at the top of the file.
@@ -53,78 +102,70 @@ styles:
   baseFontSize: 17
   h1: { fontSize: 2.3, fontWeight: 700 }
   p: { lineHeight: 1.9, marginBottom: 1.2 }
-  light:
-    background: "#fffaf5"
-    color: "#1a1a2e"
-    h1: { color: "#c0392b" }
-  dark:
-    background: "#1a1520"
-    color: "#e7e5e2"
-    h1: { color: "#ef6f5e" }
+  ...
 ---
 ```
 
-Non-color properties (fonts, sizes, spacing) are shared across themes and live at the top level. Colors live inside `light:` and `dark:` blocks so both themes render correctly.
-
-All color controls are in the **Colors** section of the style panel. The light/dark toggle at the top of that section lets you customize each theme independently. Colors cascade from general to specific — set `color` once and it flows to headings, paragraphs, and lists unless you override them individually.
-
 (Click "**Raw**" — top left — to see the front matter for this file. See all available properties [here](https://sdocs.dev) or by running `npm i sdocs-dev; sdoc schema`.)
 
 When a `Styled .md` file is rendered in the SmallDocs interface the specified styles are applied. If a plain `.md` file is rendered the default styles are applied.
 
-### URLs
+#### Light & dark modes
 
-The URL format for SmallDocs is:
+You can nest styles in `light` and `dark` keys:
 
 ```
-https://sdocs.dev/#md={compressed & encoded .md}
+  light:
+    background: "#fffaf5"
+    color: "#1a1a2e"
+    h1: { color: "#c0392b" }
+  dark:
+    background: "#1a1520"
+    color: "#e7e5e2"
+    h1: { color: "#ef6f5e" }
 ```
 
-Your entire document (content and styles) lives in the URL hash.
-
-To keep URLs as short as possible, SmallDocs compresses your markdown using [deflate](https://en.wikipedia.org/wiki/Deflate) (a standard compression algorithm built into every browser) and then encodes the result with [base64url](https://en.wikipedia.org/wiki/Base64#URL_applications) (a URL-safe variant of base64 that avoids characters like `+`, `/`, and `=` which would otherwise need percent-encoding).
+These will be used when you view the site in each mode.
 
-The `mode` parameter controls which view opens. Valid values are `read` (clean reading view, style panel hidden), `style` (style panel visible), and `raw` (raw markdown editor). When sharing a link for someone to read, use `mode=read`:
+Non-color properties (fonts, sizes, spacing) are shared across themes and live at the top level.
 
-```
-https://sdocs.dev/#md=...&mode=read
-```
+All color controls are in the **Colors** section of the style panel. The light/dark toggle at the top of that section lets you customize each theme independently. Colors cascade from general to specific — set `color` once and it flows to headings, paragraphs, and lists unless you override them individually.
 
-You can also link directly to a section using the `sec` parameter. Click any heading's link icon to copy its section URL:
+### Drag & drop
 
-```
-https://sdocs.dev/#md=...&sec=url-formatting
-```
+Drag any `.md` file onto the editor to SmallDoc it instantly.
 
-The `sec` value is the heading text slugified (lowercased, spaces become hyphens, special characters stripped). The page will scroll to that section on load.
+### Exports
 
-### Privacy
+SmallDocs can export your document in four formats:
 
-Your document never hits the SDocs server. This layer of privacy is built into how HTTP works. The hash fragment (everything after the `#` in a URL) is never sent to the server by the browser. It always stays entirely client-side:
+- **Raw .md** — your markdown content with all front matter stripped. Plain markdown, compatible with anything.
+- **PDF** — a styled PDF generated from the rendered view via the browser's print engine.
+- **Word (.docx)** — a styled Word document generated from the rendered HTML.
+- **Styled .md** — your markdown with the `styles:` front matter block included. This is the format SmallDocs reads back in, so your formatting is preserved.
 
-> "The fragment is not sent to the server when the URI is requested; it is processed by the client" - [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Fragment)
+### Collapsed headers
 
-The [sdocs.dev](https://sdocs.dev) site is purely a rendering space. JavaScript reads `window.location.hash`, decompresses and decodes the content, and renders your `.md` locally. The server is about 60 lines of Node.js that serves static files — no database, no logging, no analytics.
+SmallDocs loads with all headers collapsed. This is done because it makes it easy to get an overview of the whole document.
 
-### Auto-save
+If you expand a parent, all of its children expand too.
 
-Because the URL includes your full document and dynamically updates via JavaScript, every change you make is instantly preserved in the URL. This works when you're offline.
+### Copy & paste
 
-### Drag & drop
+Every header has its own copy and paste button. This copies its content and all of its children's content. At the moment this is the fastest way to get SmallDoc content into your agent's context, but we're looking for novel ideas to make this better.
 
-Drag any `.md` file onto the editor to SmallDoc it instantly.
+### Works offline
 
-### Exports
+`https://sdocs.dev` uses extensive client side caching. If you've loaded the site once, you can visit it even when you're offline. If something has changed server side, we invalidate the cache and the next time you visit the site you'll get the latest version.
 
-SmallDocs can export your document in four formats:
+### Auto-save
 
-- **Raw .md** — your markdown content with all front matter stripped. Plain markdown, compatible with anything.
-- **PDF** — a styled PDF generated from the rendered view via the browser's print engine.
-- **Word (.docx)** — a styled Word document generated from the rendered HTML.
-- **Styled .md** — your markdown with the `styles:` front matter block included. This is the format SmallDocs reads back in, so your formatting is preserved.
+Because the URL includes your full document and dynamically updates via JavaScript, every change you make is instantly preserved in the URL. This works when you're offline.
 
 ## The CLI
 
+### Installation
+
 SmallDocs has a command-line tool that lets you open, share, and style markdown files from the terminal. Install it once:
 
 ```
@@ -141,28 +182,47 @@ sdoc README.md
 
 Your browser opens with the document styled and readable. That's it — one command to go from `.md` file to formatted document.
 
-### Modes
+### Share a link
 
-By default, files open in read mode. You can open in any mode:
+```
+sdoc share README.md
+```
+
+This copies a shareable link to your clipboard.
+
+You can also combine it with options:
 
 ```
-sdoc README.md              # read mode (default)
-sdoc README.md --write      # write mode (contentEditable editor)
-sdoc README.md --style      # style mode (styling panel visible)
-sdoc README.md --raw        # raw mode (plain markdown source)
+sdoc share report.md --section "Results" # deep-link to a heading
+sdoc share notes.md --write             # link opens in write mode
+sdoc share notes.md --dark              # link opens in dark theme
 ```
 
-### Share a link
+### Start a new document
 
 ```
-sdoc share README.md
+sdoc new
+```
+
+Opens a blank document in write mode, ready to type a `h1`.
+
+### Style schema
+
+```
+sdoc schema
 ```
 
-This copies a shareable link to your clipboard — no browser opens, no URL printed. The entire document is compressed into the URL hash, so there's nothing to host or upload. You can also combine it with options:
+Prints every available style property with its type, default value, and description. This is designed to be readable by both humans and LLMs — so your agent can write YAML front matter for you.
+
+### Modes
+
+By default, files open in read mode. You can open in any mode:
 
 ```
-sdoc share report.md --section "Results" # deep-link to a heading
-sdoc share notes.md --write             # link opens in write mode
+sdoc README.md              # read mode (default)
+sdoc README.md --write      # write mode (contentEditable editor)
+sdoc README.md --style      # style mode (styling panel visible)
+sdoc README.md --raw        # raw mode (plain markdown source)
 ```
 
 ### Pipe from stdin
@@ -175,14 +235,6 @@ cat notes.md | sdoc share               # pipe to clipboard link
 your-agent --output md | sdoc           # pipe agent output to browser
 ```
 
-### Start a new document
-
-```
-sdoc new
-```
-
-Opens a blank document in write mode, ready to type.
-
 ### Default styles
 
 If you find a style you like, use the "Save as Default" panel in the Style view to generate a command that saves your preferences to `~/.sdocs/styles.yaml`. The CLI automatically applies these defaults to every file you open — unless the file has its own styles, which always take priority.
@@ -192,14 +244,6 @@ sdoc defaults               # view your current defaults
 sdoc defaults --reset       # remove them
 ```
 
-### Style schema
-
-```
-sdoc schema
-```
-
-Prints every available style property with its type, default value, and description. This is designed to be readable by both humans and LLMs — so your agent can write YAML front matter for you.
-
 ### For agents
 
 The CLI is designed to work well in automated workflows. A few patterns:
@@ -209,18 +253,3 @@ The CLI is designed to work well in automated workflows. A few patterns:
 - **Deep-link to context**: `sdoc share file.md --section "Heading"` creates a URL that scrolls straight to the relevant section
 - **No auth, no API keys**: everything is client-side — the URL *is* the document
 
-### Small opinionated things
-
-SmallDocs has opinions. We do some things which might not work for everyone but hopefully make the general `.md` experience better for most.
-
-We welcome your opinions. Raise an issue on GitHub or make a pull request if you want something to change.
-
-#### Collapsed headers
-
-SmallDocs loads with all headers collapsed. This is done because it makes it easy to get an overview of the whole document.
-
-If you expand a parent, all of its children expand too.
-
-#### Copy & paste
-
-Every header has its own copy and paste button. This copies its content and all of its children's content. At the moment this is the fastest way to get SmallDoc content into your agent's context, but we're looking for novel ideas to make this better.

package/public/index.html

@@ -4,9 +4,6 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SDocs</title>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Crect x='2' y='2' width='28' height='28' rx='7' fill='%232563EB' fill-opacity='.15'/%3E%3Crect x='2' y='2' width='28' height='28' rx='7' stroke='%232563EB' stroke-width='2'/%3E%3Cpath d='M9 11h14M9 16h11M9 21h8' stroke='%232563EB' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E">
 <link rel="stylesheet" href="/public/css/tokens.css">
 <link rel="stylesheet" href="/public/css/layout.css">
@@ -37,12 +34,12 @@
         <button class="btn active" id="btn-read" title="Read">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"/><path d="M16 12h2"/><path d="M16 8h2"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M6 12h2"/><path d="M6 8h2"/></svg>
         </button>
-        <button class="btn" id="btn-write" title="Write">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
-        </button>
         <button class="btn" id="btn-style" title="Style">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m14.622 17.897-10.68-2.913"/><path d="M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z"/><path d="M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15"/></svg>
         </button>
+        <button class="btn" id="btn-write" title="Write">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+        </button>
         <button class="btn" id="btn-raw" title="Raw">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
         </button>
@@ -245,6 +242,10 @@
               <label>Border</label>
               <div class="color-pair"><input type="color" id="ctrl-bq-border-color" value="#2563eb"><button class="reset-btn" id="reset-bq-border-color" title="Reset to default">↺</button></div>
             </div>
+            <div class="control-row">
+              <label>Background</label>
+              <div class="color-pair"><input type="color" id="ctrl-bq-bg" value="#f7f5f2"><button class="reset-btn" id="reset-bq-bg" title="Reset to default">↺</button></div>
+            </div>
             <div class="control-row">
               <label>Text</label>
               <div class="color-pair"><input type="color" id="ctrl-bq-color" value="#6b6560"><button class="reset-btn" id="reset-bq-color" title="Reset to default">↺</button></div>
@@ -573,7 +574,8 @@
   </span>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/marked@11/marked.min.js"></script>
+<script src="/public/brotli-wasm.js"></script>
+<script src="/public/vendor/marked.min.js"></script>
 <script src="/public/sdocs-yaml.js"></script>
 <script src="/public/sdocs-styles.js"></script>
 <script src="/public/sdocs-state.js"></script>
@@ -582,5 +584,17 @@
 <script src="/public/sdocs-export.js"></script>
 <script src="/public/sdocs-write.js"></script>
 <script src="/public/sdocs-app.js"></script>
+<script>
+var APP_VERSION = '__APP_VERSION__';
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js').then(function (reg) {
+    var msg = { type: 'check-update', version: APP_VERSION };
+    if (reg.active) reg.active.postMessage(msg);
+    navigator.serviceWorker.addEventListener('controllerchange', function () {
+      if (navigator.serviceWorker.controller) navigator.serviceWorker.controller.postMessage(msg);
+    });
+  });
+}
+</script>
 </body>
 </html>

package/public/sdocs-app.js

@@ -197,7 +197,7 @@ function loadText(text, filename) {
   syncAll('load');
 }
 
-// ── Compression helpers (deflate-raw + base64url) ──
+// ── Compression helpers (brotli + base64url) ──
 
 function toBase64Url(bytes) {
   var bin = Array.from(new Uint8Array(bytes), function(b) { return String.fromCharCode(b); }).join('');
@@ -213,27 +213,13 @@ function fromBase64Url(str) {
 }
 
 async function compressText(text) {
+  await BrotliWasm.ready;
   var encoded = new TextEncoder().encode(text);
-  var cs = new CompressionStream('deflate-raw');
-  var writer = cs.writable.getWriter();
-  writer.write(encoded);
-  writer.close();
-  var chunks = [];
-  var reader = cs.readable.getReader();
-  while (true) {
-    var result = await reader.read();
-    if (result.done) break;
-    chunks.push(result.value);
-  }
-  var total = chunks.reduce(function(n, c) { return n + c.length; }, 0);
-  var buf = new Uint8Array(total);
-  var offset = 0;
-  for (var i = 0; i < chunks.length; i++) { buf.set(chunks[i], offset); offset += chunks[i].length; }
-  return toBase64Url(buf);
+  var compressed = BrotliWasm.compress(encoded, { quality: 11 });
+  return toBase64Url(compressed);
 }
 
-async function decompressText(b64url) {
-  var bytes = fromBase64Url(b64url);
+async function decompressDeflate(bytes) {
   var ds = new DecompressionStream('deflate-raw');
   var writer = ds.writable.getWriter();
   writer.write(bytes);
@@ -252,6 +238,18 @@ async function decompressText(b64url) {
   return new TextDecoder().decode(buf);
 }
 
+async function decompressText(b64url) {
+  await BrotliWasm.ready;
+  var bytes = fromBase64Url(b64url);
+  // Try brotli first, fall back to deflate for old URLs
+  try {
+    var decompressed = BrotliWasm.decompress(bytes);
+    return new TextDecoder().decode(decompressed);
+  } catch (_) {
+    return decompressDeflate(bytes);
+  }
+}
+
 // ── Auto-save to URL hash ──────────────────────────
 
 function updateHash() {
@@ -263,7 +261,10 @@ function updateHash() {
     }
     var params = new URLSearchParams();
     if (!S._isDefaultState) {
-      var meta = Object.assign({}, S.currentMeta, { styles: S.collectStyles() });
+      var styles = SDocStyles.stripStyleDefaults(S.collectStyles());
+      var meta = Object.assign({}, S.currentMeta);
+      if (Object.keys(styles).length > 0) meta.styles = styles;
+      else delete meta.styles;
       var full = SDocYaml.serializeFrontMatter(meta) + '\n' + S.currentBody;
       var compressed = await compressText(full);
       params.set('md', compressed);
@@ -415,6 +416,10 @@ document.getElementById('factory-reset-styles').addEventListener('click', functi
 
 document.getElementById('toolbar-brand').addEventListener('click', function(e) {
   e.preventDefault();
+  if (window.location.hash && window.location.hash.indexOf('md=') !== -1) {
+    window.open(window.location.origin + window.location.pathname, '_blank');
+    return;
+  }
   S.resetAllStyles();
   loadText(DEFAULT_MD);
   S._isDefaultState = true;
@@ -476,19 +481,26 @@ S.loadText = loadText;
 // Sync theme tabs to initial theme
 S.updateThemeTabs(S.activeTheme);
 
-// ── Init ──────────────────────────────────
+// ── Load document from URL hash ──────────────────────────────────
 
-(async function () {
-  await _defaultReady;
-  if (window.location.pathname === '/new') {
-    startNewDocument();
-    return;
-  }
+var _lastLoadedHash = null;
+
+async function loadFromHash() {
   var hash = window.location.hash.slice(1);
+  if (hash === _lastLoadedHash) return;
+  _lastLoadedHash = hash;
+
+  clearTimeout(S._hashTimer);
+
   var params = hash ? new URLSearchParams(hash) : new URLSearchParams();
   var mdParam = params.get('md');
   var modeParam = params.get('mode');
   var stylesParam = params.get('styles');
+  var themeParam = params.get('theme');
+  var secParam = params.get('sec');
+
+  S.resetAllStyles();
+
   if (mdParam) {
     try {
       S._isDefaultState = false;
@@ -498,12 +510,29 @@ S.updateThemeTabs(S.activeTheme);
       console.warn('sdocs-dev: could not decode hash', e);
     }
   }
+
+  if (themeParam === 'light' || themeParam === 'dark') {
+    var savedPref = localStorage.getItem('sdocs-theme');
+    S.switchThemeAndUpdate(themeParam);
+    // Restore localStorage — URL theme is view-only, not persistent
+    if (savedPref) localStorage.setItem('sdocs-theme', savedPref);
+    else localStorage.removeItem('sdocs-theme');
+  } else {
+    // Restore user's actual preferred theme (previous hash may have overridden it)
+    var preferred = S.getPreferredTheme();
+    if (preferred !== S.activeTheme) {
+      S.switchThemeAndUpdate(preferred);
+    }
+  }
+
   if (modeParam && ['read', 'style', 'write', 'raw', 'export'].includes(modeParam)) {
     setMode(modeParam, true);
   } else {
     setMode('read', true);
   }
+
   if (!mdParam) {
+    S._isDefaultState = true;
     loadText(DEFAULT_MD);
     if (stylesParam) {
       try {
@@ -515,13 +544,11 @@ S.updateThemeTabs(S.activeTheme);
     }
   }
 
-  var secParam = params.get('sec');
   if (secParam) {
     setTimeout(function() {
       var target = document.getElementById(secParam);
       if (!target) return;
 
-      // Expand the target's own section body (its content)
       var ownSection = target.closest('.md-section');
       if (ownSection) {
         var ownBody = ownSection.querySelector(':scope > .md-section-body');
@@ -530,7 +557,6 @@ S.updateThemeTabs(S.activeTheme);
         if (ownToggle) { ownToggle.classList.add('open'); }
       }
 
-      // Expand all ancestor section bodies
       var el = target.closest('.md-section-body');
       while (el) {
         el.classList.add('open');
@@ -542,7 +568,6 @@ S.updateThemeTabs(S.activeTheme);
         el = el.parentElement ? el.parentElement.closest('.md-section-body') : null;
       }
 
-      // Add scroll spacer so the target can reach the top
       var spacerNeeded = contentArea.clientHeight - (contentArea.scrollHeight - target.offsetTop);
       if (spacerNeeded > 0) {
         var spacer = document.createElement('div');
@@ -554,8 +579,31 @@ S.updateThemeTabs(S.activeTheme);
       target.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }, 200);
   }
+
+  if (!secParam) {
+    contentArea.scrollTop = 0;
+  }
+}
+
+// ── Init ──────────────────────────────────
+
+(async function () {
+  await _defaultReady;
+  if (window.location.pathname === '/new') {
+    startNewDocument();
+    return;
+  }
+  await loadFromHash();
 }());
 
+window.addEventListener('hashchange', function () {
+  loadFromHash();
+});
+
+window.addEventListener('popstate', function () {
+  loadFromHash();
+});
+
 // ── Toolbar scroll hints (fade + bounce-peek) ──────
 
 function initScrollHint(el) {