@quillmark/svelte 0.0.0 → 0.1.1

package/THEMING.md

@@ -129,6 +129,31 @@ It carries a `--qmh-*` scale for the page, derived from the same ten dials and c
 | `.qm-control` | A boxed button or select, which is what a host's controls are and the package's are not.                                             |
 | `.qm-measure` | A reading column at the width a passage wants.                                                                                       |
 
+### The shell, if you are building a tool
+
+An app that mounts an editor beside a preview over one session needs a screen to put them in, and the SHAPE of that screen is the same every time. Four more classes are that shape, so what you write is the wiring rather than the grid:
+
+```html
+<div class="qm-workspace">
+	<header class="qm-bar site-head">
+		<span class="site-mark">acme<span class="site-slash">/</span>studio</span>
+	</header>
+	<div class="qm-split">
+		<section class="qm-frame"><!-- <VisualEditor class="qm-pane" /> --></section>
+		<section class="qm-frame"><!-- <Preview /> --></section>
+	</div>
+</div>
+```
+
+| Class           | What it is                                                                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `.qm-workspace` | The screen: pinned to the viewport, three bands (a head, the body, an optional foot), the body taking what is left and the document scrolling nowhere. |
+| `.qm-bar`       | The row a band puts its parts on, wrapping and centred. The rule under it, the gutter beside it and its depth stay yours: that is your page shell.     |
+| `.qm-split`     | Two even tracks for two surfaces, the page gap between them. Below `60rem` they stack, each at `--qmh-pane`; which element scrolls then is yours.      |
+| `.qm-frame`     | The mounting site: an edge, a corner, and the clip that holds a surface to them. What is inside it is the surface's own.                               |
+
+The shape is shared; the LOOK of a band is not. Your wordmark, your nav and the depth of your head are the most app-specific things on the screen, and a preset that drew them would hand every tool built on this the same face, so they read `--qmh-*` like everything else and you write the rules. `.qm-split`'s gap is a default rather than a fact about splitting: close it to `0` and carry a hairline on one pane if you want the two mounts to meet instead of stand apart.
+
 It is **unlayered**, so your own rules beat it by ordinary precedence, exactly as they beat the surfaces. It is also opt-in and side-effect free until imported: nothing that styles your document arrives with a component.
 
 One rule in it earns its place regardless of whether you take the rest, and you want it if you draw a focus ring of your own:

package/dist/core/theme.css

@@ -12,6 +12,13 @@
    on the root rule (`font-family`) that every root then inherits, and a free
    `style` attribute for the consumer.
 
+   That import carries no binding, so it survives a consumer's bundler only because
+   the package claims `sideEffects: true`. Pruned, every rung below is undefined,
+   every `var()` reading one is invalid at computed-value time, and the declaration
+   holding it drops: a control with no border, no background and no padding, under
+   chrome that still reads as intact. `check:bundle` holds both ends, the claim and
+   the built bytes.
+
    Every value stays a `var()` reference, so the dials resolve against the CASCADE
    at each root: a consumer's `[data-theme="dark"]` ancestor rule flows in
    unchanged, the light/dark default follows the `color-scheme` the host declares

package/dist/preset/recipes.css

@@ -1,8 +1,8 @@
-/* THE ENDORSED LOOK: the rules a host draws around a mounted surface, as classes it
-   puts on its own elements. The rungs beside this in `scale.css` are the invisible
-   half (a scale alone still leaves a consumer writing every declaration before
-   anything on the page looks like anything), so the recipes are what the preset is
-   for. This file mints nothing; `check:style` runs its axes here.
+/* THE ENDORSED LOOK: the rules a host draws around a mounted surface AND the shell it
+   mounts one in, as classes it puts on its own elements. The rungs beside this in
+   `scale.css` are the invisible half (a scale alone still leaves a consumer writing
+   every declaration before anything on the page looks like anything), so the recipes
+   are what the preset is for. This file mints nothing; `check:style` runs its axes here.
 
    These are HOST classes. They land on the consumer's DOM, never on a mounted root, so
    they freeze nothing about the surfaces' interior: the reason the package withholds
@@ -41,6 +41,98 @@
 	max-width: var(--qmh-measure);
 }
 
+/* ── The workspace ─────────────────────────────────────────────────────────── */
+
+/* The rules above dress the page a surface sits ON; these four are the SHELL it is
+   mounted in, a tool where `.qm-page` is a document: the screen an app that mounts two
+   surfaces over one session is, drawn once (ARCHITECTURE §Styling).
+
+   PINNED to the viewport rather than sized to it: a page-height box still leaves the
+   root scroller counting the overflow its panes clip, and a wheel over the chrome drags
+   the whole app off the top. Three bands (a head, the body, an optional foot), and the
+   body takes what is left and may shrink below its content, so the panes in it own
+   their overflow and hold still while their contents move. */
+.qm-workspace {
+	position: fixed;
+	inset: 0;
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr) auto;
+	overflow: hidden;
+}
+
+/* A gesture past the end of a pane chains out to the viewport and bounces the empty
+   document, which is the last way a pinned shell moves. Conditioned on the workspace, so
+   a host's other routes keep a page's own feel. */
+html:has(.qm-workspace) {
+	overscroll-behavior: none;
+}
+
+/* A band's LINE: the row a head or a foot puts its parts on, wrapping, centred. That is
+   the whole of it. What a band is made OF is the host's: the rule under it, the gutter
+   beside it, and the depth of it, because where a band ends and how tall it stands are
+   page-shell decisions: a site holding its content to a maximum runs the rule past it at
+   its own rhythm, and a one-screen tool has no maximum to hold to. */
+.qm-bar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--qmh-space-2) var(--qmh-space-4);
+}
+
+/* TWO EVEN TRACKS for two surfaces, and no resizer, since a divider that can be dragged
+   is a control competing with what it divides. Each track may shrink below its content,
+   which is what lets the frame in it clip rather than grow.
+
+   The GAP is the endorsed default and not a fact about splitting: two surfaces standing
+   apart on a page read as two things, which is what a host showing its instruments wants.
+   A host that spends the whole screen on the mounts closes it to nothing and carries a
+   hairline on one pane instead: one property, and the tracks are untouched.
+
+   Below the width that fits two mounts abreast the split stops being one: the tracks
+   stack and each takes a pane's height. WHICH element scrolls then is the host's, since
+   it is the host that knows where the room comes from. */
+.qm-split {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+	grid-template-rows: minmax(0, 1fr);
+	gap: var(--qmh-space-4);
+	min-height: 0;
+}
+
+@media (width < 60rem) {
+	.qm-split {
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-rows: none;
+		grid-auto-rows: var(--qmh-pane);
+	}
+}
+
+/* THE MOUNTING SITE: an edge, a corner, and the clip that holds a surface to them, which
+   is all a surface painting its own column needs. No tone and no gutter: those are the
+   surface's own (THEMING §"Drop it in"). `border-box`, so a stated height is the height
+   it draws.
+
+   POSITIONED, because a clip reaches only what it is the containing block for: a
+   surface's out-of-flow parts (a parked description, an overlay) resolve against the
+   nearest positioned ancestor, and with none between them and the document they land at
+   their static position UNCLIPPED, leaving the page to scroll past its own foot by
+   however far the frame's contents run over.
+
+   The two minimums are what let a frame in a track CLIP rather than push: a grid or flex
+   item floors at its content, so a mount that paints wider than its column widens the
+   column instead. They ride the frame rather than the split's children, which keeps every
+   rule in this file landing where the host put a class. Outside a track they are the
+   initial value and do nothing. */
+.qm-frame {
+	box-sizing: border-box;
+	position: relative;
+	min-width: 0;
+	min-height: 0;
+	border: var(--qmh-border-width) solid var(--qmh-border);
+	border-radius: var(--qmh-radius);
+	overflow: hidden;
+}
+
 /* ── Type ──────────────────────────────────────────────────────────────────── */
 
 /* A run of chrome type: a section's label, a panel's caption, the name over a readout.

package/dist/preset/scale.css

@@ -58,6 +58,11 @@
 	   so it does not derive from the spacing dial. */
 	--qmh-measure: 34rem;
 
+	/* What one mount takes once a split has stacked. Reading geometry too, and about
+	   the surface rather than the text: how much of a document is worth showing when it
+	   cannot stand beside the thing it answers to. */
+	--qmh-pane: 34rem;
+
 	/* ── Type ────────────────────────────────────────────────────────────────── */
 	/* Two faces with a job each: prose is sans, chrome is mono. Both are system stacks,
 	   so the preset costs no network request. The sans face reads the same dial the

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quillmark/svelte",
-	"version": "0.0.0",
+	"version": "0.1.1",
 	"description": "Editor, live-preview and source surfaces over a Quillmark WASM session.",
 	"repository": {
 		"type": "git",
@@ -55,9 +55,7 @@
 		"THEMING.md",
 		"NOTICE"
 	],
-	"sideEffects": [
-		"**/*.css"
-	],
+	"sideEffects": true,
 	"scripts": {
 		"build": "svelte-package",
 		"prepare": "npm run build",