@kupcad/ui 0.1.1 → 0.1.3

package/README.md

@@ -154,7 +154,10 @@ webview and the desktop app to the language server.
   Edges, Axes, Grid and Plate toggles; Fit, Persp, and the Iso, Top, Front and Right views, the
   one looked from pressed, a turn by hand pressing none), the model's parts in its bottom half,
   each with its colour and copies (a click on one selects its copies, as a click in the viewer
-  does: `bind:selected`). A bar above: a section through the model along an axis (a solid's: a drawing, which isn't cut, or no model offers none), screenshot, an
+  does: `bind:selected`). In a pane narrower than 36em (a phone's) the panel is under the model,
+  at most half the pane. The model fills what the rest leave, no less than
+  `--kc-model-min-height` (none by default), which a host whose pane is as tall as its content
+  sets: the model has no height of its own. A bar above: a section through the model along an axis (a solid's: a drawing, which isn't cut, or no model offers none), screenshot, an
   `actions` snippet (a host's own buttons, the Export menu), the Panel button, and a `toggles`
   snippet after it (a host's toggles of its own panes beside the pane, the Parameters button;
   `.kc-control` with `aria-expanded` gives one the Panel button's look). Below, a status
@@ -256,6 +259,10 @@ webview and the desktop app to the language server.
   `--kc-focus` its focus ring, `--kc-accent-subtle` what is chosen in a list. `tokens.test.js`
   holds every pair to WCAG's 4.5:1 for text and 3:1 for a control's edge, in both schemes, and
   every colour token to a mapping in `vscode.css`.
+  Each colour is `light-dark()` of its two values, so the scheme decides: the system's
+  (`color-scheme: light dark`), until the page chooses one with `data-theme="light"` or
+  `"dark"` on its root (Starlight's convention, so a site's switch and the docs' agree) or a
+  `color-scheme` of its own. The viewer's own colours and the editor's follow the same scheme.
   A host sets its own, as `vscode.css` maps VS Code's theme over them: the webview follows the
   editor's theme, never the brand.
   `--kc-viewer-*` theme the viewer (`themeFromTokens`, which reads each as the page draws it,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupcad/ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "KupCAD's UI: a three.js viewer of a model the core made, for any host (@kupcad/ui/viewer), and the Svelte panels around it (the viewer's pane, parameters, console, a language server's preview), styled by --kc-* tokens.",
   "license": "AGPL-3.0-only",
   "repository": {
@@ -36,11 +36,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@kupcad/protocol": "0.1.1",
+    "@kupcad/protocol": "0.1.3",
     "three": "^0.186.1"
   },
   "devDependencies": {
-    "@kupcad/wasm": "0.1.1",
+    "@kupcad/wasm": "0.1.3",
     "@playwright/test": "^1.64.1",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@testing-library/svelte": "^5.4.2",

package/src/ShortcutsDialog.svelte

@@ -78,9 +78,12 @@
 </dialog>
 
 <style>
+  /* In the middle of the window by its own margin, not the browser's default one, which a page's
+     reset (Tailwind's) takes away */
   .kc-shortcuts {
     width: min(32em, calc(100vw - 32px));
     max-height: calc(100vh - 64px);
+    margin: auto;
     padding: 16px 20px;
     font-family: var(--kc-font);
     font-size: var(--kc-font-size);

package/src/ViewerPane.svelte

@@ -4,8 +4,11 @@
   copies, volume and size, the face and its area). Beside it a panel, which the toolbar's Panel
   button hides: the view's controls (the render mode; edges, axes, the floor; fit, perspective,
   the views) over the model's parts (a click on one selecting its copies, as a click in the
-  viewer does), half of it each. A bar above: a section through the model, a screenshot and a
-  host's own actions (which take the controls' look by .kc-control), the Panel button, and a
+  viewer does), half of it each; in a pane narrower than 36em (a phone's), under the model, at
+  most half the pane. The model fills what the rest leave, and no less than
+  `--kc-model-min-height` (none by default): a host whose pane is as tall as its content sets it,
+  the model having no height of its own. A bar above: a section through the model, a screenshot
+  and a host's own actions (which take the controls' look by .kc-control), the Panel button, and a
   host's toggles of its own panes beside this one. Below: how its run went, and what it said
   went wrong, one with a line clicked given to the host (`onproblem`), and a button that lists
   the keyboard shortcuts (the host's own, then the viewer's). How the view looks (the render mode,
@@ -496,6 +499,7 @@
 
 <style>
   .kc-viewer-pane {
+    container-type: inline-size;
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -530,6 +534,7 @@
     position: relative;
     flex: 1;
     min-width: 0;
+    min-height: var(--kc-model-min-height, 0);
   }
   .tooltip {
     position: absolute;
@@ -573,6 +578,26 @@
   .parts {
     border-top: 1px solid var(--kc-border);
   }
+  /* A narrow pane: the panel under the model, as wide, the controls then the parts at their own
+     heights; scrolled past half the pane */
+  @container (max-width: 36em) {
+    .body {
+      flex-direction: column;
+    }
+    .panel {
+      flex: none;
+      width: auto;
+      max-height: 50%;
+      overflow: auto;
+      border-left: none;
+      border-top: 1px solid var(--kc-border);
+    }
+    .controls,
+    .parts {
+      flex: none;
+      overflow: visible;
+    }
+  }
   .caption {
     margin: 0 0 2px;
     color: var(--kc-muted);

package/src/theme.js

@@ -1,7 +1,8 @@
 // The viewer's theme from the --kc-viewer-* tokens of the page around it: a host themes the
 // viewer as it themes the panels, and changes it while it shows (VS Code's theme switch). A
 // token left unset, or set to no colour the page reads, takes the viewer's own colour, LIGHT or
-// DARK as the page's colour scheme is.
+// DARK as the page's colour scheme is: the one it chose (tokens.css's data-theme, a color-scheme
+// of its own), else the system's.
 
 import { DARK, LIGHT } from './viewer/index.js';
 
@@ -25,8 +26,9 @@ const HEX_WITH_ALPHA = /^(#[\da-f]{3})[\da-f]$|^(#[\da-f]{6})[\da-f]{2}$/i;
 const RGBA = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)$/;
 /** Two fills a colour the browser can't read leaves as they were: it reads as neither. */
 const UNREAD = /** @type {const} */ (['#000000', '#ffffff']);
-/** The attributes of the page's root and body a host themes it by (VS Code: a class, a style). */
-const THEMED_BY = ['class', 'style'];
+/** The attributes of the page's root and body a host themes it by (VS Code: a class, a style; a
+ * site's switch: data-theme). */
+const THEMED_BY = ['class', 'style', 'data-theme'];
 
 /** colorReader's, once made (null where the page has no 2D context). @type {ColorReader | null | undefined} */
 let reader;
@@ -43,8 +45,7 @@ let reader;
  */
 export function themeFromTokens(element) {
   const style = getComputedStyle(element);
-  const dark = globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
-  const fallback = dark ? DARK : LIGHT;
+  const fallback = isDark(style) ? DARK : LIGHT;
   /** @type {Theme} */
   const theme = { ...fallback };
   const context = colorReader();
@@ -54,6 +55,18 @@ export function themeFromTokens(element) {
   return theme;
 }
 
+/**
+ * Whether an element is drawn dark: its colour scheme where the page chose one alone (`dark`,
+ * `only light`), else the system's (`light dark`, or none said).
+ * @param {CSSStyleDeclaration} style its computed style
+ */
+export function isDark(style) {
+  const scheme = (style.colorScheme ?? '').split(/\s+/);
+  const light = scheme.includes('light');
+  if (scheme.includes('dark') !== light) return !light;
+  return globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+}
+
 /**
  * `color` as the viewer can draw it: #rrggbb, the sRGB of a pixel `context` draws in it, so any
  * CSS colour the browser reads (three.js reads hex, rgb() and a name alone: a color-mix() or an
@@ -92,7 +105,7 @@ function colorReader() {
 
 /**
  * Gives `changed` the theme of `element`'s tokens now, and again whenever it changes: with the
- * page's colour scheme, or a class or style of its root or body.
+ * system's colour scheme, or a class, style or data-theme of the page's root or body.
  * @param {Element} element
  * @param {(theme: Theme) => void} changed
  * @returns {() => void} stops watching

package/src/tokens.css

@@ -6,6 +6,11 @@
   brand's too. A control of a host's own takes the panels' look by the class .kc-control
   (controls.css); a range input by .kc-range, a checkbox by .kc-check.
 
+  Each colour is light-dark() of its light and its dark value, picked by the colour scheme, which
+  is the system's (`color-scheme: light dark`) until the page chooses: data-theme="light" or
+  "dark" on its root (the docs' convention, Starlight's), or a color-scheme of its own. The
+  viewer and the editor follow the same scheme.
+
   The accent is a fill where there is one of a kind (the primary button, a slider, a checked
   box); a toggle while on, or what is chosen in a list, is --kc-accent-subtle edged in it, as
   several are on at once. The text on the fill is --kc-accent-fg, the brand black: white on the
@@ -16,55 +21,41 @@
 @import './controls.css';
 
 :root {
+  color-scheme: light dark;
   --kc-font: system-ui, -apple-system, 'Segoe UI', sans-serif;
   --kc-font-size: 13px;
-  --kc-bg: #ffffff;
-  --kc-fg: #1a1b1c;
-  --kc-muted: #5a5d65;
+  --kc-bg: light-dark(#ffffff, #1a1b1c);
+  --kc-fg: light-dark(#1a1b1c, #e3e7eb);
+  --kc-muted: light-dark(#5a5d65, #9a9da3);
   /* A divider between panes and rows */
-  --kc-border: #d5dae0;
+  --kc-border: light-dark(#d5dae0, #333436);
   /* The edge of a field, a select or a checkbox, which tells it from the background */
-  --kc-control-border: #8a9099;
-  --kc-input-bg: #ffffff;
+  --kc-control-border: light-dark(#8a9099, #73767c);
+  --kc-input-bg: light-dark(#ffffff, #282829);
   /* A row or a button under the pointer */
-  --kc-hover: rgba(26, 27, 28, 0.06);
+  --kc-hover: light-dark(rgba(26, 27, 28, 0.06), rgba(227, 231, 235, 0.07));
   --kc-accent: #ff5f14;
   --kc-accent-fg: #1a1b1c;
-  --kc-accent-hover: #f0540c;
-  --kc-accent-text: #c5480d;
+  --kc-accent-hover: light-dark(#f0540c, #ff7a3d);
+  --kc-accent-text: light-dark(#c5480d, #ff6a24);
   /* What is chosen in a list (the tree's open script), its text --kc-fg */
-  --kc-accent-subtle: #ffe9de;
-  --kc-focus: #c5480d;
+  --kc-accent-subtle: light-dark(#ffe9de, #43271b);
+  --kc-focus: light-dark(#c5480d, #ff6a24);
   /* A slider's track beyond its thumb */
-  --kc-track: #d5dae0;
-  --kc-error: #c8102e;
-  --kc-warning: #8a5a00;
+  --kc-track: light-dark(#d5dae0, #3a3b3e);
+  --kc-error: light-dark(#c8102e, #ff6b81);
+  --kc-warning: light-dark(#8a5a00, #e3b341);
   /* A section's header: a group of parameters' */
-  --kc-section-bg: #e3e7eb;
-  --kc-section-fg: #1a1b1c;
+  --kc-section-bg: light-dark(#e3e7eb, #282829);
+  --kc-section-fg: light-dark(#1a1b1c, #e3e7eb);
   --kc-radius: 4px;
   --kc-gap: 8px;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --kc-bg: #1a1b1c;
-    --kc-fg: #e3e7eb;
-    --kc-muted: #9a9da3;
-    --kc-border: #333436;
-    --kc-control-border: #73767c;
-    --kc-input-bg: #282829;
-    --kc-hover: rgba(227, 231, 235, 0.07);
-    --kc-accent: #ff5f14;
-    --kc-accent-fg: #1a1b1c;
-    --kc-accent-hover: #ff7a3d;
-    --kc-accent-text: #ff6a24;
-    --kc-accent-subtle: #43271b;
-    --kc-focus: #ff6a24;
-    --kc-track: #3a3b3e;
-    --kc-error: #ff6b81;
-    --kc-warning: #e3b341;
-    --kc-section-bg: #282829;
-    --kc-section-fg: #e3e7eb;
-  }
+/* The scheme the page chose: the system's no longer decides */
+:root[data-theme='light'] {
+  color-scheme: light;
+}
+:root[data-theme='dark'] {
+  color-scheme: dark;
 }