@quillmark/svelte 0.5.0 → 0.6.0

package/dist/visual/TipsCard.svelte

@@ -97,27 +97,34 @@
 	 paints over the rest. The two read as one block, which is what document-level
 	 guidance is: the main card's, not a card of its own. Still in-flow, no lift.
 
-	 It takes the card's hairline, and the tuck makes the two outlines one: the slip's top
-	 stroke and the tops of its sides run under `main`, so what shows starts at the card's
-	 bottom corners.
+	 No stroke of its own. A tint below the card reads as a slip; the same tint inside an
+	 outline reads as a second card, which is the one thing the tuck exists to deny. What
+	 shows below the seam is fill, and `main`'s hairline is the pair's only edge.
 
 	 The bottom corners take the inner rung where the card above takes the outer: a slip
 	 is cut crisper than the thing it is tucked under, at every setting of the dial.
 
-	 The insets are asymmetric so the ink is not: the top takes the tuck back, and the
-	 bottom gives up a rung to the foot's control, whose box stands on the tap floor
-	 rather than on its own one-line label. The horizontal is the card's inset plus the
-	 body's margin (ProseField), so the tip starts under the prose rather than under the
-	 fields. */
+	 Down, the insets are the document's own rhythm and they are measured to the ink, not
+	 to the boxes. The top is a block gap below the seam, what two of the body's paragraphs
+	 take, so the tip reads as the block after the prose; the bottom is the card's inset
+	 rung; and the foot sits at half of either, being the message's own foot rather than
+	 the next thing after it. The control gives its tap floor back as margin for that to
+	 hold: a box standing on the floor rather than on its one-line label carries a rung of
+	 slack at each edge, and spent inside the gap that is enough to make the tightest space
+	 in the card measure as the widest.
+
+	 Across, the inset is `main`'s stroke and the two nested insets under it, the card's
+	 own and the prose control's, so the tip starts on the prose's edge rather than short
+	 of it. */
 	.qm-tips {
 		margin-top: calc(var(--_qm-radius) * -1);
-		border: var(--_qm-border-width) solid var(--_qm-border);
 		border-radius: 0 0 var(--_qm-radius-inner) var(--_qm-radius-inner);
-		padding: calc(var(--_qm-space-3) + var(--_qm-radius)) var(--_qm-space-5) var(--_qm-space-2);
+		padding: calc(var(--_qm-space-3) + var(--_qm-radius))
+			calc(var(--_qm-border-width) + var(--_qm-space-3) * 2) var(--_qm-space-3);
 		background: var(--_qm-tips-surface);
 		display: flex;
 		flex-direction: column;
-		gap: var(--_qm-space-2);
+		gap: var(--_qm-space);
 		font-family: var(--_qm-tips-font);
 		font-size: var(--_qm-text-body);
 		line-height: var(--_qm-leading-body);
@@ -168,7 +175,11 @@
 	 the spacing one — the foot's button clears the floor and walks the whole set from
 	 the tip the card opens on, so no tip is reachable only by a dot. State is three
 	 steps of one ink on the recede ladder, never a second hue and never a size: a dot
-	 that grew would move the row it sits in. */
+	 that grew would move the row it sits in.
+
+	 `color` is restated because a button takes the UA's and not its parent's, so
+	 `currentColor` is the card's ink only once it is inherited; left to the UA it is
+	 `buttontext`, which is the one neutral on a card that carries no neutrals. */
 	.qm-tips-dot {
 		box-sizing: content-box;
 		width: 5px;
@@ -176,6 +187,7 @@
 		padding: var(--_qm-space-half);
 		border: none;
 		border-radius: var(--_qm-radius-pill);
+		color: inherit;
 		background: currentColor;
 		background-clip: content-box;
 		opacity: var(--_qm-opacity-idle);
@@ -192,8 +204,16 @@
 	   overrides is everything the family sets for a glyph among callers of its own
 	   colour, a labelled control on a warm card wanting none of it. The hover included:
 	   the family's neutral step would read as lent from the document above. Unlayered,
-	   so it beats the base rule without out-specifying it. */
+	   so it beats the base rule without out-specifying it.
+
+	   The box is the tap target and the label is what the rhythm measures, so both axes
+	   give the difference back as margin: the inline rung lands the label on the body's
+	   edge above, and the block rung takes the floor's slack out of the foot's height.
+	   The box, and the hover it paints, still reaches past the label the way a control
+	   does. */
 	.qm-tips-action {
+		margin-block: calc(var(--_qm-space) * -1);
+		margin-right: calc(var(--_qm-space-2) * -1);
 		padding: var(--_qm-space-half) var(--_qm-space-2);
 		font-family: inherit;
 		font-size: inherit;

package/dist/visual/VariantField.svelte

@@ -0,0 +1,98 @@
+<!--
+ An `enum` declaring `variants:` → the discriminant's select, and under it the cells
+ the chosen world brings into play (VISUAL_EDITOR §"Enum variants"). The field rests as
+ a container, `{value: <member>, …that member's fields}`, and commits whole: it is one
+ cell to `Addr`, so there is no per-cell write address.
+
+ The cells are {@link ObjectField}, which already draws a scalar field set keyed by
+ name over a container its parent commits by value. It takes the whole container as its
+ `value` and the world's declaration as its `properties`, so what it hands back is the
+ container with one cell written — and cells outside the drawn world ride through
+ untouched rather than needing to be merged back.
+-->
+<script lang="ts">
+	import type { QuillFieldSchema } from '@quillmark/wasm';
+	import EnumField from './EnumField.svelte';
+	import ObjectField from './ObjectField.svelte';
+	import {
+		VARIANT_DISCRIMINANT,
+		commitDiscriminant,
+		variantCells,
+		variantMember
+	} from './structure.js';
+
+	interface Props {
+		/** The stored container, or undefined while the field is unset. */
+		value: Record<string, unknown> | undefined;
+		schema: QuillFieldSchema;
+		/** The resolved `default:`'s member: what an unset field renders as. */
+		ghostMember: string | undefined;
+		/** Field label, the naming prefix the cells' controls compose with. */
+		label: string;
+		/** `<label for>` target: the discriminant trigger, this control's one labelable
+		 * element. The cells are named by their own composed labels. */
+		id?: string;
+		labelledBy?: string;
+		describedBy?: string;
+		onCommit: (v: Record<string, unknown> | undefined) => void;
+		optionAllowed?: (value: string) => boolean;
+		enumDisallowed?: 'hide' | 'disable';
+	}
+	let {
+		value,
+		schema,
+		ghostMember,
+		label,
+		id,
+		labelledBy,
+		describedBy,
+		onCommit,
+		optionAllowed,
+		enumDisallowed
+	}: Props = $props();
+
+	const member = $derived(variantMember(value, ghostMember));
+	const cells = $derived(variantCells(schema, member));
+	const discriminant = $derived(value?.[VARIANT_DISCRIMINANT] as string | undefined);
+</script>
+
+<div class="qm-variant">
+	<EnumField
+		value={discriminant}
+		values={schema.values ?? []}
+		fallback={ghostMember}
+		{id}
+		{describedBy}
+		onCommit={(v) => onCommit(commitDiscriminant(value, v))}
+		{optionAllowed}
+		{enumDisallowed}
+	/>
+	<!-- Keyed on the member so a flip remounts the cells rather than re-targeting
+	     them: two worlds' cells are different fields that happen to occupy one place,
+	     and a control carrying local state (an unreconciled pick, a caret) across the
+	     flip would carry it between them. -->
+	{#if cells}
+		{#key member}
+			<!-- `close`: the discriminant's box directly above IS the cells' top boundary,
+			     so the band's opening stroke would state it twice. -->
+			<ObjectField
+				value={value ?? {}}
+				properties={cells}
+				{label}
+				idBase={id}
+				{labelledBy}
+				{describedBy}
+				edges="close"
+				onCommit={(obj) => onCommit(obj)}
+			/>
+		{/key}
+	{/if}
+</div>
+
+<style>
+	.qm-variant {
+		display: flex;
+		flex-direction: column;
+		gap: var(--_qm-space-2);
+	}
+</style>

package/dist/visual/VariantField.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { QuillFieldSchema } from '@quillmark/wasm';
+interface Props {
+    /** The stored container, or undefined while the field is unset. */
+    value: Record<string, unknown> | undefined;
+    schema: QuillFieldSchema;
+    /** The resolved `default:`'s member: what an unset field renders as. */
+    ghostMember: string | undefined;
+    /** Field label, the naming prefix the cells' controls compose with. */
+    label: string;
+    /** `<label for>` target: the discriminant trigger, this control's one labelable
+     * element. The cells are named by their own composed labels. */
+    id?: string;
+    labelledBy?: string;
+    describedBy?: string;
+    onCommit: (v: Record<string, unknown> | undefined) => void;
+    optionAllowed?: (value: string) => boolean;
+    enumDisallowed?: 'hide' | 'disable';
+}
+declare const VariantField: import("svelte").Component<Props, {}, "">;
+type VariantField = ReturnType<typeof VariantField>;
+export default VariantField;

package/dist/visual/VisualEditorInner.svelte

@@ -58,7 +58,6 @@
 	} from './structure.js';
 	import {
 		fieldKeyToString,
-		inlineShown,
 		resolveCardKey,
 		routeAndResolve,
 		mergeDiagnostics,
@@ -487,11 +486,10 @@
 
 	// All three producers. The two positional ones resolve their `.path` to the live
 	// stable-id keying; commit errors are id-keyed already. Nothing is dropped for
-	// being unwelcome — diagnostics never gate — but the obligation warning is
-	// withheld from the boundary's lane, the label's `*` being where the surface
-	// states that (`inlineShown`).
+	// being unwelcome — diagnostics never gate — but warnings do not draw: only
+	// errors reach a control (`routeAndResolve`).
 	const diagByKey = $derived.by(() => {
-		const fromValidate = routeAndResolve(validation.filter(inlineShown), cardIds);
+		const fromValidate = routeAndResolve(validation, cardIds);
 		const fromExternal = routeAndResolve(diagnostics, cardIds);
 		return mergeDiagnostics(fromValidate, fromExternal, [...commitErrors.values()]);
 	});
@@ -670,14 +668,15 @@
 
 	/**
 	 * Put the caret in a revealed target, at the finest grain it can take: a USV offset
-	 * in a prose leaf, a bare focus everywhere else. An array element is no
-	 * `createField` leaf, and a form control has no coordinate to spend an offset in (an
-	 * `<input type="number">` refuses a selection outright), which is also the whole of
-	 * what a click on plate-placed ink can mean.
+	 * in a prose leaf or an array element, a bare focus everywhere else. A form control
+	 * has no coordinate to spend an offset in (an `<input type="number">` refuses a
+	 * selection outright), which is also the whole of what a click on plate-placed ink
+	 * can mean. An element is no `createField` leaf, so the offset goes down the element
+	 * lane instead, where what it means is the row control's (`leaves.ts`).
 	 */
 	function land(found: Landed, pos: number | undefined): void {
 		if (found.element != null && found.control.focusElement) {
-			return found.control.focusElement(found.element);
+			return found.control.focusElement(found.element, pos);
 		}
 		if (pos != null) {
 			const prose = leaves.prose(found.key);
@@ -900,9 +899,13 @@
 
 	   The column, not only the cards in it: the gutter the stack sits in and the tone
 	   behind it are the surface's own, so a bare `<div>` is a mounting site and nothing
-	   is owed before the editor looks right. Consumer CSS is unlayered and beats all of
-	   it, which is how a host that wants the column back takes it. `border-box`, so a
-	   height from the caller is the height this draws.
+	   is owed before the editor looks right. `border-box`, so a height from the caller is
+	   the height this draws.
+
+	   `:global(:where(…))` puts a promised class at zero rank, and both halves are
+	   load-bearing: `:global` drops the scoping class, `:where` drops the rest
+	   (ARCHITECTURE §Styling). The class is the surface's root wherever it mounts, so
+	   leaving the component's scope costs nothing.
 
 	   The sunken rung, which is what makes a card an island: the cards are the base
 	   plane and this is the one they float on, so the gutter reads as ground rather
@@ -910,7 +913,7 @@
 	   ramp, which is what gives the ground enough of itself to read as ground: at a
 	   narrower one the stack meets whatever frames the surface and the islands are
 	   back to being one block clipped at its edges. */
-	.qm-editor {
+	:global(:where(.qm-editor)) {
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
@@ -935,7 +938,7 @@
 	   site with no height of its own, which is the page form kept. The cards do not
 	   shrink to fit: a flex item's automatic minimum floors each at its own height, so
 	   the stack overflows and scrolls rather than squashing. */
-	.qm-editor.qm-pane {
+	:global(:where(.qm-editor.qm-pane)) {
 		height: 100%;
 		overflow: auto;
 		overscroll-behavior: contain;