@syware/jlib 0.5.1 → 0.6.0

package/dist/templates/jl-auth-layout.js

@@ -0,0 +1,139 @@
+import { BASE_STYLES, TOKEN_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { jsonOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { starredParts } from "../lib/text.js";
+import jl_auth_layout_default from "./jl-auth-layout.css_raw.js";
+import { css } from "@jadis/core";
+import { Check } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/templates/jl-auth-layout.tsx
+registerIcons({ check: Check });
+var DEFAULT_ORIGIN = "Made in Switzerland by SyWare";
+var POINT_ICON_SIZE = 12;
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+var MARK_VIEW_BOX = "429 1092 2155 2358";
+var MARK_TRANSFORM = "matrix(1.3333333 0 0 -1.3333333 0 4535.4267)";
+var MARK_PARTS = [{
+	colour: "var(--jl-text)",
+	d: "m 0,0 -786.134,459.252 c -29.13,18.997 -62.026,44.131 -85.701,73.026 V 335.352 c 0,-112.197 60.333,-216.758 157.489,-272.837 l 492.661,-284.389 c 47.878,-27.653 102.358,-42.252 157.563,-42.252 55.12,0 109.562,14.599 157.459,42.252 l 45.359,26.187 C 133.464,-116.391 99.209,-62.514 0,0",
+	transform: "translate(1193.8955 1078.5752)"
+}, {
+	colour: "var(--jl-brand)",
+	d: "m 0,0 c 0,112.186 -60.359,216.747 -157.526,272.845 l -492.639,284.407 c -47.822,27.634 -102.294,42.222 -157.544,42.222 -55.254,0 -109.715,-14.588 -157.489,-42.222 l -492.107,-284.098 c -12.716,-6.17 -157.459,-80.217 -157.459,-245.04 0,-164.205 138.525,-232.919 152.041,-239.219 l 937.433,-543.23 c -0.007,0 -0.063,-0.074 -0.063,-0.074 116.786,-68.629 155.718,-124.426 161.333,-209.494 153.313,93.103 206.494,122.148 206.494,122.148 65.696,37.908 228.603,135.168 -55.964,299.474 -284.567,164.309 -940.314,542.843 -940.314,542.843 -9.958,6.408 -15.905,17.159 -15.905,28.736 0,9.567 4.112,18.681 11.316,25.219 l 296.55,171.559 c 32.93,19.019 75.427,18.982 108.286,0.018 L -392.633,17.747 c 33.41,-19.303 54.16,-50.963 54.16,-118.386 0,-32.996 -5.679,-70.886 56.626,-107.08 47.577,-27.645 186.668,-107.832 249.792,-144.237 12.34,-9.065 22.934,-18.301 31.999,-27.597 L 0,-247.648 c 0,1.213 -0.093,2.397 -0.111,3.609 z",
+	transform: "translate(1937.4087 1982.8447)"
+}];
+/** The SyWare mark, drawn large and faint in the panel's corner: the company behind the app. JSX makes HTML only. */
+function backdrop() {
+	const svg = document.createElementNS(SVG_NAMESPACE, "svg");
+	svg.setAttribute("viewBox", MARK_VIEW_BOX);
+	svg.setAttribute("class", "backdrop");
+	svg.setAttribute("aria-hidden", "true");
+	const group = document.createElementNS(SVG_NAMESPACE, "g");
+	group.setAttribute("transform", MARK_TRANSFORM);
+	for (const part of MARK_PARTS) {
+		const path = document.createElementNS(SVG_NAMESPACE, "path");
+		path.setAttribute("transform", part.transform);
+		path.setAttribute("d", part.d);
+		path.style.fill = part.colour;
+		group.append(path);
+	}
+	svg.append(group);
+	return svg;
+}
+/**
+* The screen before an app, as every SyWare app shows it: on a dark panel, the app's brand (slot `brand`), a
+* headline whose words between asterisks take the brand's blue ("Workflows that *ask* before they act."), a
+* sentence, a few points, and where it comes from; beside it, the form (the default slot). On a phone, the panel
+* becomes a band with the brand, above the form.
+*/
+var JlAuthLayout = class extends JlElement {
+	static selector = "jl-auth-layout";
+	/** What the app does, in a few words; `*words*` take the brand's blue. */
+	pitch = this.useChange("", (value) => this.renderPitch(value), { attribute: "pitch" });
+	/** One or two sentences under the headline. */
+	text = this.useChange("", (value) => {
+		this._refs.text.textContent = value;
+		this._refs.text.hidden = value === "";
+	}, { attribute: "text" });
+	/** What the app is good at, three points at most; HTML writes them as JSON. */
+	points = this.useChange([], (value) => this.renderPoints(value), {
+		attribute: "points",
+		parse: jsonOf([])
+	});
+	/** Where the app comes from, at the foot of the panel. */
+	origin = this.useChange(DEFAULT_ORIGIN, (value) => {
+		this._refs.origin.textContent = value;
+		this._refs.origin.hidden = value === "";
+	}, { attribute: "origin" });
+	_refs = this.useRefs((ref) => ({
+		headline: ref(".headline"),
+		origin: ref(".origin"),
+		points: ref(".points"),
+		text: ref(".text")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "screen",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("section", {
+				class: "story",
+				"data-theme": "dark",
+				attrs: { part: "story" },
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						class: "brand",
+						children: /* @__PURE__ */ jsx("slot", { name: "brand" })
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						class: "pitch",
+						children: [/* @__PURE__ */ jsx("p", {
+							class: "headline",
+							hidden: true
+						}), /* @__PURE__ */ jsx("p", {
+							class: "text",
+							hidden: true
+						})]
+					}),
+					/* @__PURE__ */ jsx("ul", {
+						class: "points",
+						hidden: true
+					}),
+					/* @__PURE__ */ jsx("p", {
+						class: "origin",
+						children: DEFAULT_ORIGIN
+					}),
+					backdrop()
+				]
+			}), /* @__PURE__ */ jsx("main", {
+				class: "side",
+				attrs: { part: "side" },
+				children: /* @__PURE__ */ jsx("slot", {})
+			})]
+		});
+	}
+	templateCss() {
+		return css`${TOKEN_STYLES}${BASE_STYLES}${jl_auth_layout_default}`;
+	}
+	renderPitch(pitch) {
+		const parts = starredParts(pitch).map((part) => part.accent ? /* @__PURE__ */ jsx("span", {
+			class: "accent",
+			children: part.text
+		}) : part.text);
+		this._refs.headline.replaceChildren(...parts);
+		this._refs.headline.hidden = pitch === "";
+	}
+	renderPoints(points) {
+		this._refs.points.replaceChildren(...points.map((point) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", {
+			class: "tick",
+			children: /* @__PURE__ */ jsx(JlIcon, {
+				name: "check",
+				size: POINT_ICON_SIZE
+			})
+		}), /* @__PURE__ */ jsx("span", { children: point })] })));
+		this._refs.points.hidden = points.length === 0;
+	}
+};
+JlAuthLayout.register();
+export { JlAuthLayout };

package/dist/templates/jl-page.css_raw.js

@@ -1,3 +1,3 @@
 // src/templates/jl-page.css?raw
-var jl_page_default = ":host {\n  display: block;\n  container-type: inline-size;\n  --page-width: var(--jl-page-standard);\n}\n\n:host([width=\"form\"]) {\n  --page-width: var(--jl-page-form);\n}\n\n:host([width=\"wide\"]) {\n  --page-width: var(--jl-page-wide);\n}\n\n:host([width=\"full\"]) {\n  --page-width: none;\n}\n\n.page {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--jl-space-6);\n  max-width: var(--page-width);\n  margin: 0 auto;\n  padding: var(--jl-space-8) var(--jl-space-10) var(--jl-space-12);\n}\n\n/* A grid's items grow to their content otherwise: a row of chips would widen the page. */\n::slotted(*) {\n  min-width: 0;\n}\n\n.back {\n  margin-left: -8px;\n}\n\n@container (max-width: 720px) {\n  .page {\n    padding: var(--jl-space-6) var(--jl-space-4) var(--jl-space-12);\n  }\n}\n";
+var jl_page_default = ":host {\n  display: block;\n  --page-width: var(--jl-page-standard);\n}\n\n:host([width=\"form\"]) {\n  --page-width: var(--jl-page-form);\n}\n\n:host([width=\"wide\"]) {\n  --page-width: var(--jl-page-wide);\n}\n\n:host([width=\"full\"]) {\n  --page-width: none;\n}\n\n.page {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--jl-space-6);\n  max-width: var(--page-width);\n  margin: 0 auto;\n  padding: var(--jl-space-8) var(--jl-space-10) var(--jl-space-12);\n}\n\n/* A grid's items grow to their content otherwise: a row of chips would widen the page. */\n::slotted(*) {\n  min-width: 0;\n}\n\n.back {\n  margin-left: -8px;\n}\n\n/*\n * Narrow screens. A media query, not a container query: a size container is the containing block of what is\n * fixed inside it, and a page's floating bars and buttons must stay fixed to the screen.\n */\n@media (max-width: 720px) {\n  .page {\n    padding: var(--jl-space-6) var(--jl-space-4) var(--jl-space-12);\n  }\n}\n";
 export { jl_page_default as default };

package/dist/templates/jl-split-view.css_raw.js

@@ -1,3 +1,3 @@
 // src/templates/jl-split-view.css?raw
-var jl_split_view_default = ":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.split {\n  display: grid;\n  grid-template-columns: minmax(0, var(--position, 50%)) 1px minmax(0, 1fr);\n  height: 100%;\n}\n\n:host([orientation=\"vertical\"]) .split {\n  grid-template-columns: none;\n  grid-template-rows: minmax(0, var(--position, 50%)) 1px minmax(0, 1fr);\n}\n\n.pane {\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n}\n\n.divider {\n  position: relative;\n  z-index: 1;\n  background: var(--jl-line);\n  cursor: col-resize;\n  touch-action: none;\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n:host([orientation=\"vertical\"]) .divider {\n  cursor: row-resize;\n}\n\n/* The line is one pixel; the pointer gets a wider band to catch. */\n.divider::before {\n  content: \"\";\n  position: absolute;\n  inset: 0 -5px;\n}\n\n:host([orientation=\"vertical\"]) .divider::before {\n  inset: -5px 0;\n}\n\n.divider:hover,\n.divider:focus-visible,\n:host([dragging]) .divider {\n  background: var(--jl-accent);\n}\n\n.divider:focus-visible {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.grip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 6px;\n  height: 28px;\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface);\n  transform: translate(-50%, -50%);\n  transition: border-color var(--jl-fast) var(--jl-ease);\n}\n\n:host([orientation=\"vertical\"]) .grip {\n  width: 28px;\n  height: 6px;\n}\n\n.divider:hover .grip,\n.divider:focus-visible .grip,\n:host([dragging]) .grip {\n  border-color: var(--jl-accent);\n}\n\n:host([dragging]) {\n  cursor: col-resize;\n  user-select: none;\n}\n\n:host([dragging][orientation=\"vertical\"]) {\n  cursor: row-resize;\n}\n\n/* While dragging, the panes ignore the pointer: a frame inside one would otherwise swallow it. */\n:host([dragging]) .pane {\n  pointer-events: none;\n}\n";
+var jl_split_view_default = ":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.split {\n  display: grid;\n  grid-template-columns: minmax(0, var(--position, 50%)) 1px minmax(0, 1fr);\n  height: 100%;\n}\n\n:host([orientation=\"vertical\"]) .split {\n  grid-template-columns: none;\n  grid-template-rows: minmax(0, var(--position, 50%)) 1px minmax(0, 1fr);\n}\n\n.pane {\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n}\n\n.divider {\n  position: relative;\n  z-index: 1;\n  background: var(--jl-line);\n  cursor: col-resize;\n  touch-action: none;\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n:host([orientation=\"vertical\"]) .divider {\n  cursor: row-resize;\n}\n\n/* The line is one pixel; the pointer gets a wider band to catch. */\n.divider::before {\n  content: \"\";\n  position: absolute;\n  inset: 0 -5px;\n}\n\n:host([orientation=\"vertical\"]) .divider::before {\n  inset: -5px 0;\n}\n\n.divider:hover,\n.divider:focus-visible,\n:host([dragging]) .divider {\n  background: var(--jl-accent);\n}\n\n.divider:focus-visible {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.grip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 6px;\n  height: 28px;\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface);\n  transform: translate(-50%, -50%);\n  transition: border-color var(--jl-fast) var(--jl-ease);\n}\n\n:host([orientation=\"vertical\"]) .grip {\n  width: 28px;\n  height: 6px;\n}\n\n.divider:hover .grip,\n.divider:focus-visible .grip,\n:host([dragging]) .grip {\n  border-color: var(--jl-accent);\n}\n\n:host([dragging]) {\n  cursor: col-resize;\n  user-select: none;\n}\n\n:host([dragging][orientation=\"vertical\"]) {\n  cursor: row-resize;\n}\n\n/* While dragging, the panes ignore the pointer: a frame inside one would otherwise swallow it. */\n:host([dragging]) .pane {\n  pointer-events: none;\n}\n\n/* Stacked: one pane at a time, the whole room, no divider. */\n:host([stacked]) .split {\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr);\n}\n\n:host([stacked]) .divider,\n:host([stacked]:not([pane=\"end\"])) .end,\n:host([stacked][pane=\"end\"]) .start {\n  display: none;\n}\n";
 export { jl_split_view_default as default };

package/dist/templates/jl-split-view.d.ts

@@ -1,16 +1,21 @@
 import { JlElement } from '../base/jl-element';
-import type { SplitOrientation } from '../types/jl-split-view.types';
+import type { SplitOrientation, SplitPane } from '../types/jl-split-view.types';
 export declare const SPLIT_ORIENTATIONS: readonly SplitOrientation[];
+export declare const SPLIT_PANES: readonly SplitPane[];
 /**
  * Two panes, `start` and `end`, side by side or one above the other, with a divider to drag between them. The
  * divider also moves with the arrows (Shift for large steps), Home and End; a double click puts it back. `position`
  * is the start pane's share, in percent; each pane keeps at least `min` percent.
+ *
+ * Narrower than `stack-below` pixels, it shows one pane at a time, the one `pane` names: a list and the item opened
+ * from it become two pages, as a phone shows them. It then has the attribute `stacked`, and fires `stack`.
  */
 export declare class JlSplitView extends JlElement {
     static readonly selector = "jl-split-view";
     /** The new position, in percent, once a drag ends or a key moved the divider. */
     readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
         change: number;
+        stack: boolean;
     }>>;
     readonly orientation: Readonly<Readonly<{
         get(): SplitOrientation;
@@ -26,18 +31,33 @@ export declare class JlSplitView extends JlElement {
         get(): number;
         set(setter: number | ((prevState: number) => number)): void;
     }>>;
+    /** Under this width, in pixels, it shows one pane at a time; 0 never does. */
+    readonly stackBelow: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** The pane it shows while stacked: `start`, or `end` once an item is open. */
+    readonly pane: Readonly<Readonly<{
+        get(): SplitPane;
+        set(setter: ((prevState: SplitPane) => SplitPane) | SplitPane): void;
+    }>>;
     /** The divider's name for screen readers. */
     readonly label: Readonly<Readonly<{
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
     private readonly _drag;
+    private readonly _resize;
+    /** Whether it shows one pane at a time now. */
+    isStacked(): boolean;
     private readonly _refs;
     /** Puts the divider back where the page first placed it. */
     reset(): void;
     templateHtml(): Node;
     templateCss(): string;
     onConnect(): void;
+    onDisconnect(): void;
+    private renderStacked;
     private current;
     private startDrag;
     private drag;

package/dist/templates/jl-split-view.js

@@ -7,12 +7,15 @@ import { css } from "@jadis/core";
 import { jsx, jsxs } from "@jadis/core/jsx-runtime";
 // src/templates/jl-split-view.tsx
 var SPLIT_ORIENTATIONS = ["horizontal", "vertical"];
+var SPLIT_PANES = ["start", "end"];
 var DEFAULT_POSITION = 50;
 var DEFAULT_MIN = 15;
 var FULL = 100;
 var MAX_MIN = 50;
 var PRIMARY_BUTTON = 0;
 var DEFAULT_LABEL = "Resize the panes";
+var STACKED = "stacked";
+var MAX_STACK_WIDTH = 4e3;
 var SEPARATOR_ORIENTATION = {
 	horizontal: "vertical",
 	vertical: "horizontal"
@@ -22,6 +25,9 @@ var parsePosition = clampedNumber(DEFAULT_POSITION, 0, FULL);
 * Two panes, `start` and `end`, side by side or one above the other, with a divider to drag between them. The
 * divider also moves with the arrows (Shift for large steps), Home and End; a double click puts it back. `position`
 * is the start pane's share, in percent; each pane keeps at least `min` percent.
+*
+* Narrower than `stack-below` pixels, it shows one pane at a time, the one `pane` names: a list and the item opened
+* from it become two pages, as a phone shows them. It then has the attribute `stacked`, and fires `stack`.
 */
 var JlSplitView = class extends JlElement {
 	static selector = "jl-split-view";
@@ -44,11 +50,26 @@ var JlSplitView = class extends JlElement {
 		attribute: "min",
 		parse: clampedNumber(DEFAULT_MIN, 0, MAX_MIN)
 	});
+	/** Under this width, in pixels, it shows one pane at a time; 0 never does. */
+	stackBelow = this.useChange(0, () => this.renderStacked(), {
+		attribute: "stack-below",
+		parse: clampedNumber(0, 0, MAX_STACK_WIDTH)
+	});
+	/** The pane it shows while stacked: `start`, or `end` once an item is open. */
+	pane = this.useChange("start", (value) => this.reflect("pane", value), {
+		attribute: "pane",
+		parse: oneOf(SPLIT_PANES, "start")
+	});
 	/** The divider's name for screen readers. */
 	label = this.useChange(DEFAULT_LABEL, (value) => {
 		this._refs.divider.setAttribute("aria-label", value === "" ? DEFAULT_LABEL : value);
 	}, { attribute: "label" });
 	_drag = { from: DEFAULT_POSITION };
+	_resize = new ResizeObserver(() => this.renderStacked());
+	/** Whether it shows one pane at a time now. */
+	isStacked() {
+		return this.hasAttribute(STACKED);
+	}
 	_refs = this.useRefs((ref) => ({
 		divider: ref(".divider"),
 		split: ref(".split")
@@ -91,6 +112,7 @@ var JlSplitView = class extends JlElement {
 		return css`${BASE_STYLES}${jl_split_view_default}`;
 	}
 	onConnect() {
+		this._resize.observe(this);
 		const divider = this._refs.divider;
 		this.on(divider, "pointerdown", (event) => this.startDrag(event));
 		this.on(divider, "pointermove", (event) => this.drag(event));
@@ -99,6 +121,16 @@ var JlSplitView = class extends JlElement {
 		this.on(divider, "keydown", (event) => this.onKey(event));
 		this.on(divider, "dblclick", () => this.reset());
 	}
+	onDisconnect() {
+		this._resize.disconnect();
+	}
+	renderStacked() {
+		const below = this.stackBelow.get();
+		const stacked = below > 0 && this.getBoundingClientRect().width < below;
+		if (stacked === this.isStacked()) return;
+		this.reflect(STACKED, stacked);
+		this.events.emit("stack", stacked);
+	}
 	current() {
 		return clampSplit(this.position.get(), this.min.get());
 	}
@@ -146,4 +178,4 @@ var JlSplitView = class extends JlElement {
 	}
 };
 JlSplitView.register();
-export { JlSplitView, SPLIT_ORIENTATIONS };
+export { JlSplitView, SPLIT_ORIENTATIONS, SPLIT_PANES };

package/dist/tokens.css

@@ -41,6 +41,8 @@
     --jl-accent-soft: #e9f4fb;
     --jl-accent-line: #b7dbf2;
     --jl-on-accent: #ffffff;
+    /* What is drawn on the brand's blue, such as an app's icon: white in both themes, as a favicon is. */
+    --jl-on-brand: #ffffff;
 
     --jl-ok: #17784a;
     --jl-ok-soft: #ecf6f0;

package/dist/types/jl-split-view.types.d.ts

@@ -1,2 +1,4 @@
 /** `horizontal` puts the panes side by side, `vertical` one above the other. */
 export type SplitOrientation = 'horizontal' | 'vertical';
+/** The pane a stacked split view shows: the list (`start`), or the item opened from it (`end`). */
+export type SplitPane = 'start' | 'end';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syware/jlib",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "A tree-shakeable component library on Jadis and native Web Components, organised in atomic design",
   "keywords": [
     "web-components",