@kupcad/ui 0.1.2 → 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupcad/ui",
-  "version": "0.1.2",
+  "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.2",
+    "@kupcad/protocol": "0.1.3",
     "three": "^0.186.1"
   },
   "devDependencies": {
-    "@kupcad/wasm": "0.1.2",
+    "@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);