feat: add shared Toolbox header and themes

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.3.0 - 2026-07-23
+
+- Adopt the Toolbox SDK 0.2.0 shared header with standard Help and app-specific
+  Gitea source controls, centered app identity, Personalize, and Apps menus.
+- Apply the shared system, light, and dark appearance choice to the OneNote
+  reader while retaining authored page fonts, colors, highlights, and ink.
+- Scope reader controls so application button styling cannot override the
+  shared Toolbox header.
+
 ## 0.2.1 - 2026-07-22
 
 - Preserve the intrinsic aspect ratio of embedded images when their recorded

README.md

@@ -9,7 +9,7 @@ It is also an independent application in the add·ideas Toolbox contract. The
 source uses the Toolbox SDK shell and manifest, builds with Vite `base: './'`,
 and is delivered to Toolbox Portal as a checksummed static ZIP.
 
-## What version 0.2.1 supports
+## What version 0.3.0 supports
 
 - Desktop revision-store and unfragmented FSSHTTPB package-store `.one`
   sections from the tested producer families.
@@ -80,7 +80,7 @@ supplied through the SDK's `?toolbox=` context mechanism. The app uses the SDK
 
 ```sh
 npm run release:artifact
-(cd release && sha256sum -c onenote-tools-0.2.1.sha256)
+(cd release && sha256sum -c onenote-tools-0.3.0.sha256)
 ```
 
 The ZIP root contains the built static app and manifest plus the changelog,

SOURCE.md

@@ -1,8 +1,8 @@
 # Corresponding source
 
-The corresponding source for OneNote Tools 0.2.1 is the `v0.2.1` tag:
+The corresponding source for OneNote Tools 0.3.0 is the `v0.3.0` tag:
 
-https://git.add-ideas.de/zemion/onenote-tools/src/tag/v0.2.1
+https://git.add-ideas.de/zemion/onenote-tools/src/tag/v0.3.0
 
 Build the release from that tag with Node.js 22 or newer:
 

THIRD_PARTY_NOTICES.md

@@ -2,8 +2,8 @@
 
 The production application uses:
 
-- `@add-ideas/toolbox-contract` 0.1.1, Apache-2.0;
+- `@add-ideas/toolbox-contract` 0.2.0, Apache-2.0;
-- `@add-ideas/toolbox-shell-react` 0.1.1, Apache-2.0;
+- `@add-ideas/toolbox-shell-react` 0.2.0, Apache-2.0;
 - fflate 0.8.3, MIT;
 - React, React DOM, and Scheduler, MIT.
 

docs/FORMAT_SUPPORT.md

@@ -1,6 +1,6 @@
 # Format support
 
-## Version 0.2.1 support matrix
+## Version 0.3.0 support matrix
 
 | Input or feature                 | Status               | Tested evidence and boundary                                                                         |
 | -------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------- |

docs/REFERENCE_IMPLEMENTATIONS.md

@@ -1,6 +1,6 @@
 # Specifications and pinned references
 
-Version 0.2.1 records these immutable implementation revisions:
+Version 0.3.0 records these immutable implementation revisions:
 
 | Repository                                                                                                             | Exact revision                             | Use                                                                                           |
 | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------- |

package-lock.json

@@ -1,22 +1,22 @@
 {
   "name": "onenote-tools",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "onenote-tools",
-      "version": "0.2.1",
+      "version": "0.3.0",
       "license": "MPL-2.0 AND LGPL-2.1-only",
       "dependencies": {
-        "@add-ideas/toolbox-contract": "0.1.1",
+        "@add-ideas/toolbox-contract": "0.2.0",
-        "@add-ideas/toolbox-shell-react": "0.1.1",
+        "@add-ideas/toolbox-shell-react": "0.2.0",
         "fflate": "^0.8.3",
         "react": "^19.2.6",
         "react-dom": "^19.2.6"
       },
       "devDependencies": {
-        "@add-ideas/toolbox-testkit": "0.1.1",
+        "@add-ideas/toolbox-testkit": "0.2.0",
         "@eslint/js": "^10.0.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
@@ -42,18 +42,18 @@
       }
     },
     "node_modules/@add-ideas/toolbox-contract": {
-      "version": "0.1.1",
+      "version": "0.2.0",
-      "resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-contract/-/0.1.1/toolbox-contract-0.1.1.tgz",
+      "resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-contract/-/0.2.0/toolbox-contract-0.2.0.tgz",
-      "integrity": "sha512-0q2whA5Y4SqG4PNNleXYR8nGbT3UYsZ1x+6ZWVmxuc/WjMxmujhD7ilIISmFzmnNdbyEyv/Zpr+U0fnHqGODqw==",
+      "integrity": "sha512-up+wY+ft1L7TbXrflcTeTOwEdcFwHBWFlGFj8skQvcLy5z2mDBpd6/7PVQKDvDTkiODu2npviHm6AFglFw+17Q==",
       "license": "Apache-2.0"
     },
     "node_modules/@add-ideas/toolbox-shell-react": {
-      "version": "0.1.1",
+      "version": "0.2.0",
-      "resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-shell-react/-/0.1.1/toolbox-shell-react-0.1.1.tgz",
+      "resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-shell-react/-/0.2.0/toolbox-shell-react-0.2.0.tgz",
-      "integrity": "sha512-Di2mu1BoJrWJg4/v5jDExROXDpvLXorlUgqcsBQV8ea/LklKoBFTAfgTkk/23HZ2BzixyMIjrhl9kD507s+iPQ==",
+      "integrity": "sha512-qYR+OBXX8rfB+BYCsUbpiCzo2xK12SIPWVNXHre158Da5uT6usr8rRvp5qa5u2oQJ50PNzlXyXMyTeRp0Vz5wg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@add-ideas/toolbox-contract": "0.1.1"
+        "@add-ideas/toolbox-contract": "0.2.0"
       },
       "peerDependencies": {
         "react": ">=18 <20",
@@ -61,13 +61,13 @@
       }
     },
     "node_modules/@add-ideas/toolbox-testkit": {
-      "version": "0.1.1",
+      "version": "0.2.0",
-      "resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-testkit/-/0.1.1/toolbox-testkit-0.1.1.tgz",
+      "resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-testkit/-/0.2.0/toolbox-testkit-0.2.0.tgz",
-      "integrity": "sha512-o+H7LfM7ipdgmYz18S0lLuN6JsXUR+8ubAbcjTWTk8rSqNfp1JyeoRHOPbJVEHXrQwIFe/OB86UzRpex2gnKUQ==",
+      "integrity": "sha512-+BSiWgS0F3vpjPgty9B4UtfdZTRbo97ZElb2BSb0ry57fS3cE7w7pfJW1Mzk/gV1/JChspw3JBY+4ZJDBhkiFw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@add-ideas/toolbox-contract": "0.1.1"
+        "@add-ideas/toolbox-contract": "0.2.0"
       },
       "bin": {
         "toolbox-check": "dist/cli.js"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "onenote-tools",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A local-first browser reader and exporter for OneNote files.",
   "license": "MPL-2.0 AND LGPL-2.1-only",
   "private": true,
@@ -27,14 +27,14 @@
     "check": "npm run manifest:check && npm run typecheck && npm run lint && npm run format:check && npm run test && npm run build && npm run toolbox:check"
   },
   "dependencies": {
-    "@add-ideas/toolbox-contract": "0.1.1",
+    "@add-ideas/toolbox-contract": "0.2.0",
-    "@add-ideas/toolbox-shell-react": "0.1.1",
+    "@add-ideas/toolbox-shell-react": "0.2.0",
     "fflate": "^0.8.3",
     "react": "^19.2.6",
     "react-dom": "^19.2.6"
   },
   "devDependencies": {
-    "@add-ideas/toolbox-testkit": "0.1.1",
+    "@add-ideas/toolbox-testkit": "0.2.0",
     "@eslint/js": "^10.0.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",

public/toolbox-app.json

@@ -40,5 +40,5 @@
     "repository": "https://git.add-ideas.de/zemion/onenote-tools",
     "license": "MPL-2.0 AND LGPL-2.1-only"
   },
-  "version": "0.2.1"
+  "version": "0.3.0"
 }

src/App.tsx

@@ -551,11 +551,7 @@ export function App() {
     <AppShell
       app={toolboxApp}
       manifestUrl="./toolbox-app.json"
-      appActions={
+      helpAction={{ onClick: () => setHelpOpen(true) }}
-        <button type="button" onClick={() => setHelpOpen(true)}>
-          Help
-        </button>
-      }
     >
       <OneNoteApplication />
       {helpOpen ? <HelpDialog onClose={() => setHelpOpen(false)} /> : null}

src/AppShell.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { App } from './App.js';
+
+describe('Toolbox application shell', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('uses the standard app-specific help and source controls', async () => {
+    const user = userEvent.setup();
+    render(<App />);
+
+    expect(
+      screen.getByRole('heading', { name: 'OneNote Tools' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('link', {
+        name: 'Source for OneNote Tools on Gitea',
+      })
+    ).toHaveAttribute('href', 'https://git.add-ideas.de/zemion/onenote-tools');
+
+    await user.click(screen.getByRole('button', { name: 'Help' }));
+    expect(
+      screen.getByRole('dialog', { name: 'About OneNote Tools' })
+    ).toBeVisible();
+  });
+
+  it('applies an explicit appearance choice to the complete app', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<App />);
+
+    await user.click(screen.getByText('Personalize'));
+    await user.click(screen.getByRole('button', { name: 'Dark' }));
+
+    expect(container.querySelector('.toolbox-shell')).toHaveAttribute(
+      'data-toolbox-theme',
+      'dark'
+    );
+  });
+});

src/styles.css

@@ -1,6 +1,4 @@
 :root {
-  color: #241b2b;
-  background: #f6f3f8;
   font-family:
     Inter,
     ui-sans-serif,
@@ -22,45 +20,86 @@ body {
   min-height: 100vh;
 }
 
-button,
+.toolbox-shell__main {
-input {
+  --onenote-page-surface: #fff;
+  --onenote-page-text: #241b2b;
+  --onenote-content-surface: #faf7fc;
+  --onenote-control-surface: #fff;
+  --onenote-control-hover: #f1e8f8;
+  --onenote-control-text: #4c1f6b;
+  --onenote-control-border: #704294;
+  --onenote-selection-surface: #eee3f5;
+  --onenote-selection-text: #3e145c;
+  --onenote-code-surface: #eee7f3;
+  --onenote-warning-surface: #fbf4e6;
+  --onenote-warning-text: #66552f;
+  --onenote-error-surface: #faeaea;
+  --onenote-error-text: #9b3131;
+  color: var(--onenote-page-text);
+  background: var(--toolbox-background);
+}
+
+.toolbox-shell[data-toolbox-theme='dark'] .toolbox-shell__main {
+  --onenote-page-surface: #2b2231;
+  --onenote-page-text: #f6effa;
+  --onenote-content-surface: #302638;
+  --onenote-control-surface: #35283d;
+  --onenote-control-hover: #3c2b48;
+  --onenote-control-text: #f4e7fc;
+  --onenote-control-border: #755e82;
+  --onenote-selection-surface: #3c2b48;
+  --onenote-selection-text: #f6effa;
+  --onenote-code-surface: #3a3040;
+  --onenote-warning-surface: #493b23;
+  --onenote-warning-text: #f5e8cd;
+  --onenote-error-surface: #4d2929;
+  --onenote-error-text: #ffb3b3;
+  color-scheme: dark;
+}
+
+.toolbox-shell[data-toolbox-theme='light'] .toolbox-shell__main {
+  color-scheme: light;
+}
+
+:where(.toolbox-shell__main) button,
+:where(.toolbox-shell__main) input {
   font: inherit;
 }
 
-button {
+:where(.toolbox-shell__main) button {
-  border: 1px solid #704294;
+  border: 1px solid var(--onenote-control-border);
   border-radius: 0.55rem;
   padding: 0.55rem 0.9rem;
-  color: #4c1f6b;
+  color: var(--onenote-control-text);
-  background: #fff;
+  background: var(--onenote-control-surface);
   cursor: pointer;
 }
 
-button:hover:not(:disabled) {
+:where(.toolbox-shell__main) button:hover:not(:disabled) {
-  background: #f1e8f8;
+  background: var(--onenote-control-hover);
 }
 
-button:focus-visible,
+:where(.toolbox-shell__main) button:focus-visible,
-summary:focus-visible {
+:where(.toolbox-shell__main) summary:focus-visible {
-  outline: 3px solid #b788d4;
+  outline: 3px solid var(--toolbox-focus);
   outline-offset: 2px;
 }
 
-button:disabled {
+:where(.toolbox-shell__main) button:disabled {
   cursor: not-allowed;
   opacity: 0.55;
 }
 
-code {
+:where(.toolbox-shell__main) code {
   border-radius: 0.25rem;
   padding: 0.08rem 0.25rem;
   overflow-wrap: anywhere;
-  background: #eee7f3;
+  background: var(--onenote-code-surface);
 }
 
-h1,
+:where(.toolbox-shell__main) h1,
-h2,
+:where(.toolbox-shell__main) h2,
-p {
+:where(.toolbox-shell__main) p {
   overflow-wrap: anywhere;
 }
 
@@ -77,10 +116,10 @@ p {
 .package-inspector,
 .export-controls,
 .diagnostics {
-  border: 1px solid #c9b9d5;
+  border: 1px solid var(--toolbox-border);
   border-radius: 1rem;
-  background: #fff;
+  background: var(--toolbox-surface);
-  box-shadow: 0 0.75rem 2.5rem rgb(62 31 85 / 8%);
+  box-shadow: var(--toolbox-shadow);
 }
 
 .export-controls {
@@ -98,7 +137,7 @@ p {
 
 .export-controls > div > p:last-child {
   margin: 0.35rem 0 0;
-  color: #716675;
+  color: var(--toolbox-muted);
   font-size: 0.86rem;
 }
 
@@ -110,18 +149,18 @@ p {
 
 .export-controls__actions label {
   grid-column: 1 / -1;
-  color: #574b5b;
+  color: var(--toolbox-muted);
   font-size: 0.78rem;
   font-weight: 700;
 }
 
 .export-controls__actions select {
   min-width: 0;
-  border: 1px solid #a98ab9;
+  border: 1px solid var(--onenote-control-border);
   border-radius: 0.55rem;
   padding: 0.55rem 2rem 0.55rem 0.7rem;
   color: inherit;
-  background: #fff;
+  background: var(--onenote-control-surface);
   font: inherit;
 }
 
@@ -129,12 +168,12 @@ p {
   grid-column: 1 / -1;
   min-height: 1.2em;
   margin: 0;
-  color: #716675;
+  color: var(--toolbox-muted);
   font-size: 0.78rem;
 }
 
 .export-controls__status--error {
-  color: #9b3131;
+  color: var(--onenote-error-text);
 }
 
 .drop-zone,
@@ -148,8 +187,8 @@ p {
 }
 
 .drop-zone--active {
-  border-color: #6b368f;
+  border-color: var(--toolbox-accent);
-  background: #f7effd;
+  background: var(--toolbox-accent-soft);
 }
 
 .drop-zone h2,
@@ -161,7 +200,7 @@ p {
 .status-card__label,
 .eyebrow {
   margin: 0;
-  color: #6b368f;
+  color: var(--toolbox-accent);
   font-size: 0.76rem;
   font-weight: 750;
   letter-spacing: 0.08em;
@@ -170,18 +209,18 @@ p {
 
 .primary-button {
   margin-top: 0.75rem;
-  color: #fff;
+  color: var(--toolbox-accent-contrast);
-  background: #5b2c83;
+  background: var(--toolbox-accent);
 }
 
 .primary-button:hover:not(:disabled) {
-  background: #472164;
+  background: var(--toolbox-accent-hover);
 }
 
 .drop-zone__hint {
   display: block;
   margin-top: 0.75rem;
-  color: #6f6476;
+  color: var(--toolbox-muted);
   font-size: 0.9rem;
 }
 
@@ -211,16 +250,16 @@ p {
   grid-template-columns: minmax(16rem, 0.78fr) minmax(0, 2fr);
   min-height: 30rem;
   overflow: hidden;
-  border: 1px solid #c9b9d5;
+  border: 1px solid var(--toolbox-border);
   border-radius: 1rem;
-  background: #fff;
+  background: var(--toolbox-surface);
-  box-shadow: 0 0.75rem 2.5rem rgb(62 31 85 / 8%);
+  box-shadow: var(--toolbox-shadow);
 }
 
 .source-navigation {
   overflow: auto;
-  border-right: 1px solid #d9cedf;
+  border-right: 1px solid var(--toolbox-border);
-  background: #faf7fc;
+  background: var(--toolbox-surface-soft);
 }
 
 .navigation-heading {
@@ -228,8 +267,8 @@ p {
   z-index: 1;
   top: 0;
   padding: 1.2rem;
-  border-bottom: 1px solid #ded5e3;
+  border-bottom: 1px solid var(--toolbox-border);
-  background: #faf7fc;
+  background: var(--toolbox-surface-soft);
 }
 
 .navigation-heading h2 {
@@ -239,7 +278,7 @@ p {
 
 .navigation-heading > p:last-child {
   margin: 0.35rem 0 0;
-  color: #716675;
+  color: var(--toolbox-muted);
   font-size: 0.8rem;
 }
 
@@ -271,7 +310,7 @@ p {
 .page-list button span {
   display: -webkit-box;
   overflow: hidden;
-  color: #716675;
+  color: var(--toolbox-muted);
   font-size: 0.78rem;
   font-weight: 400;
   -webkit-box-orient: vertical;
@@ -280,9 +319,9 @@ p {
 
 .page-list button.is-selected,
 .notebook-section > button.is-selected {
-  border-color: #af8bc6;
+  border-color: var(--toolbox-accent);
-  color: #3e145c;
+  color: var(--onenote-selection-text);
-  background: #eee3f5;
+  background: var(--onenote-selection-surface);
 }
 
 .section-list {
@@ -296,21 +335,21 @@ p {
 
 .notebook-tree ul {
   margin-inline-start: 0.7rem;
-  border-inline-start: 1px solid #ded5e3;
+  border-inline-start: 1px solid var(--toolbox-border);
   padding-inline-start: 0.45rem;
 }
 
 .section-group summary {
   cursor: pointer;
   padding: 0.62rem 0.45rem;
-  color: #574b5b;
+  color: var(--toolbox-muted);
   font-size: 0.86rem;
   font-weight: 700;
 }
 
 .notebook-section > .page-list {
   margin: 0 0 0.4rem 0.7rem;
-  border-inline-start: 1px solid #ded5e3;
+  border-inline-start: 1px solid var(--toolbox-border);
   padding: 0.25rem 0 0.2rem 0.45rem;
 }
 
@@ -328,7 +367,7 @@ p {
 .empty-message {
   margin: 0;
   padding: 1rem 1.2rem;
-  color: #716675;
+  color: var(--toolbox-muted);
 }
 
 .page-reader {
@@ -336,14 +375,14 @@ p {
   min-height: 0;
   overflow: auto;
   padding: clamp(1.4rem, 4vw, 3rem);
-  background: #fff;
+  background: var(--onenote-page-surface);
 }
 
 .page-reader--empty {
   display: grid;
   place-items: center;
   min-height: 20rem;
-  color: #716675;
+  color: var(--toolbox-muted);
   text-align: center;
 }
 
@@ -354,7 +393,7 @@ p {
 .page-reader__header {
   margin-bottom: 2rem;
   padding-bottom: 1.25rem;
-  border-bottom: 1px solid #e1d9e5;
+  border-bottom: 1px solid var(--toolbox-border);
 }
 
 .page-reader__header h2 {
@@ -368,7 +407,7 @@ p {
   flex-wrap: wrap;
   gap: 0.3rem 1rem;
   margin: 1rem 0 0;
-  color: #716675;
+  color: var(--toolbox-muted);
   font-size: 0.82rem;
 }
 
@@ -409,7 +448,7 @@ p {
 }
 
 .onenote-link {
-  color: #5b2c83;
+  color: var(--toolbox-accent);
   text-decoration-thickness: 0.08em;
   text-underline-offset: 0.12em;
 }
@@ -425,12 +464,12 @@ p {
   min-width: min(100%, 28rem);
   border-spacing: 0;
   border-collapse: collapse;
-  background: #fff;
+  background: var(--onenote-page-surface);
 }
 
 .onenote-table td {
   min-width: 5rem;
-  border: 1px solid #cfc5d4;
+  border: 1px solid var(--toolbox-border);
   padding: 0.55rem 0.65rem;
   vertical-align: top;
 }
@@ -466,7 +505,7 @@ p {
 
 .onenote-image figcaption {
   max-width: 40rem;
-  color: #716675;
+  color: var(--toolbox-muted);
   font-size: 0.82rem;
 }
 
@@ -476,11 +515,11 @@ p {
   min-height: 7rem;
   max-width: 32rem;
   place-items: center;
-  border: 1px dashed #a58caf;
+  border: 1px dashed var(--toolbox-border);
   border-radius: 0.55rem;
   padding: 1rem;
-  color: #716675;
+  color: var(--toolbox-muted);
-  background: #faf7fc;
+  background: var(--onenote-content-surface);
   text-align: center;
 }
 
@@ -490,10 +529,10 @@ p {
   align-items: center;
   gap: 0.75rem 1rem;
   margin-block: 0.8rem;
-  border: 1px solid #d4c8db;
+  border: 1px solid var(--toolbox-border);
   border-radius: 0.65rem;
   padding: 0.8rem;
-  background: #faf7fc;
+  background: var(--onenote-content-surface);
 }
 
 .attachment-card > div {
@@ -504,7 +543,7 @@ p {
 
 .attachment-card span,
 .attachment-card small {
-  color: #716675;
+  color: var(--toolbox-muted);
   font-size: 0.8rem;
 }
 
@@ -517,7 +556,7 @@ p {
   max-width: 100%;
   margin-block: 0.75rem;
   overflow: visible;
-  color: #241b2b;
+  color: var(--onenote-page-text);
 }
 
 .onenote-ink svg {
@@ -533,16 +572,16 @@ p {
   margin: 0.8rem 0;
   border-left: 0.2rem solid #9872ae;
   padding: 0.65rem 0.85rem;
-  color: #5e5362;
+  color: var(--toolbox-muted);
-  background: #f5eff8;
+  background: var(--toolbox-surface-soft);
 }
 
 .render-limit-notice {
   margin: 1rem 0 0;
   border-left: 0.2rem solid #b18124;
   padding: 0.7rem 0.85rem;
-  color: #66552f;
+  color: var(--onenote-warning-text);
-  background: #fbf4e6;
+  background: var(--onenote-warning-surface);
   font-size: 0.85rem;
 }
 
@@ -569,8 +608,8 @@ p {
   min-height: 2rem;
   place-items: center;
   border-radius: 999px;
-  color: #552477;
+  color: var(--toolbox-accent);
-  background: #eee3f5;
+  background: var(--toolbox-accent-soft);
   font-weight: 700;
 }
 
@@ -584,11 +623,11 @@ p {
 .package-summary > div {
   border-radius: 0.65rem;
   padding: 0.75rem;
-  background: #f6f1f8;
+  background: var(--toolbox-surface-soft);
 }
 
 .package-summary dt {
-  color: #716675;
+  color: var(--toolbox-muted);
   font-size: 0.75rem;
 }
 
@@ -599,13 +638,13 @@ p {
 }
 
 .entry-inspector {
-  border-top: 1px solid #ded5e3;
+  border-top: 1px solid var(--toolbox-border);
   padding-top: 0.9rem;
 }
 
 .entry-inspector summary {
   width: fit-content;
-  color: #5b2c83;
+  color: var(--toolbox-accent);
   cursor: pointer;
   font-weight: 700;
 }
@@ -626,20 +665,20 @@ p {
 .entry-table th,
 .entry-table td {
   padding: 0.62rem;
-  border-bottom: 1px solid #e5dee9;
+  border-bottom: 1px solid var(--toolbox-border);
   vertical-align: top;
 }
 
 .entry-table th {
   position: sticky;
   top: 0;
-  background: #fff;
+  background: var(--toolbox-surface);
 }
 
 .entry-table small {
   display: block;
   margin-top: 0.3rem;
-  color: #716675;
+  color: var(--toolbox-muted);
 }
 
 .status {
@@ -677,12 +716,14 @@ p {
 .diagnostic {
   border-left: 0.22rem solid #b18124;
   padding: 0.7rem 0.85rem;
-  background: #fbf4e6;
+  color: var(--onenote-warning-text);
+  background: var(--onenote-warning-surface);
 }
 
 .diagnostic--error {
   border-left-color: #b65252;
-  background: #faeaea;
+  color: var(--onenote-error-text);
+  background: var(--onenote-error-surface);
 }
 
 .diagnostic__summary {
@@ -719,13 +760,13 @@ p {
 .privacy-note {
   border-left: 0.25rem solid #7d4aa0;
   padding: 0.85rem 1rem;
-  color: #4c4054;
+  color: var(--toolbox-muted);
-  background: #eee7f3;
+  background: var(--onenote-code-surface);
 }
 
 .dialog-backdrop {
   position: fixed;
-  z-index: 10;
+  z-index: 70;
   inset: 0;
   display: grid;
   place-items: center;
@@ -737,8 +778,8 @@ p {
   width: min(32rem, 100%);
   border-radius: 0.8rem;
   padding: 1.5rem;
-  color: #241b2b;
+  color: var(--onenote-page-text);
-  background: #fff;
+  background: var(--onenote-page-surface);
   box-shadow: 0 1rem 3rem rgb(0 0 0 / 25%);
 }
 
@@ -771,7 +812,7 @@ p {
   .source-navigation {
     max-height: 20rem;
     border-right: 0;
-    border-bottom: 1px solid #d9cedf;
+    border-bottom: 1px solid var(--toolbox-border);
   }
 
   .package-summary {
@@ -788,114 +829,21 @@ p {
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  .toolbox-shell[data-toolbox-theme='system'] .toolbox-shell__main {
-    color: #f6effa;
+    --onenote-page-surface: #2b2231;
-    background: #1f1923;
+    --onenote-page-text: #f6effa;
-  }
+    --onenote-content-surface: #302638;
-
+    --onenote-control-surface: #35283d;
-  .drop-zone,
+    --onenote-control-hover: #3c2b48;
-  .status-card,
+    --onenote-control-text: #f4e7fc;
-  .source-toolbar,
+    --onenote-control-border: #755e82;
-  .package-inspector,
+    --onenote-selection-surface: #3c2b48;
-  .diagnostics,
+    --onenote-selection-text: #f6effa;
-  .export-controls,
+    --onenote-code-surface: #3a3040;
-  .reader-workspace,
+    --onenote-warning-surface: #493b23;
-  .page-reader,
+    --onenote-warning-text: #f5e8cd;
-  .help-dialog,
+    --onenote-error-surface: #4d2929;
-  .entry-table th {
+    --onenote-error-text: #ffb3b3;
-    color: #f6effa;
+    color-scheme: dark;
-    background: #2b2231;
-  }
-
-  .source-navigation,
-  .navigation-heading {
-    background: #251d2a;
-  }
-
-  .drop-zone--active,
-  button:hover:not(:disabled),
-  .page-list button.is-selected,
-  .notebook-section > button.is-selected {
-    color: #f6effa;
-    background: #3c2b48;
-  }
-
-  button {
-    color: #f4e7fc;
-    background: #35283d;
-  }
-
-  .export-controls__actions select {
-    border-color: #755e82;
-    background: #35283d;
-  }
-
-  .export-controls > div > p:last-child,
-  .export-controls__actions label,
-  .export-controls__status {
-    color: #cfc2d6;
-  }
-
-  .export-controls__status--error {
-    color: #ffb3b3;
-  }
-
-  code,
-  .privacy-note,
-  .package-summary > div {
-    color: #eadff0;
-    background: #3a3040;
-  }
-
-  .drop-zone__hint,
-  .navigation-heading > p:last-child,
-  .navigation-empty,
-  .empty-message,
-  .page-metadata,
-  .page-list button span,
-  .package-summary dt,
-  .entry-table small {
-    color: #cfc2d6;
-  }
-
-  .unsupported-block {
-    color: #e4dbe9;
-    background: #3a3040;
-  }
-
-  .onenote-link {
-    color: #d7acef;
-  }
-
-  .onenote-table,
-  .attachment-card,
-  .image-placeholder {
-    color: #f6effa;
-    background: #302638;
-  }
-
-  .onenote-table td {
-    border-color: #62536b;
-  }
-
-  .onenote-image figcaption,
-  .attachment-card span,
-  .attachment-card small,
-  .image-placeholder {
-    color: #cfc2d6;
-  }
-
-  .onenote-ink {
-    color: #f6effa;
-  }
-
-  .diagnostic {
-    color: #f5e8cd;
-    background: #493b23;
-  }
-
-  .diagnostic--error {
-    color: #f8dfdf;
-    background: #4d2929;
   }
 }

src/version.ts

@@ -1 +1 @@
-export const APP_VERSION = '0.2.1';
+export const APP_VERSION = '0.3.0';

tests/release-archive.test.ts

@@ -53,8 +53,8 @@ describe('release archive', () => {
       'react',
     ]);
     const text = bundle.toString('utf8');
-    expect(text).toContain('@add-ideas/toolbox-contract@0.1.1');
+    expect(text).toContain('@add-ideas/toolbox-contract@0.2.0');
-    expect(text).toContain('@add-ideas/toolbox-shell-react@0.1.1');
+    expect(text).toContain('@add-ideas/toolbox-shell-react@0.2.0');
     expect(text).toContain('react@');
     expect(createHash('sha256').update(bundle).digest('hex')).toMatch(
       /^[a-f0-9]{64}$/