@syware/jlib 0.1.0 → 0.2.0

package/README.md

@@ -97,14 +97,16 @@ component. Conventions for contributors are in [CLAUDE.md](CLAUDE.md).
 
 ## Releasing
 
-A GitHub release publishes the package to npm: the `Publish to npm` workflow checks, builds and publishes it through
-npm's trusted publishing (no token; the package gets a provenance statement).
+```bash
+npm version patch
+```
 
-1. `npm version patch` (or `minor`, `major`): bumps package.json and the lockfile, commits, tags `vX.Y.Z`.
-2. `git push --follow-tags`.
-3. On GitHub, draft a release from that tag and publish it.
+```bash
+git push --follow-tags
+```
 
-The workflow refuses a release whose tag is not the version in package.json.
+The tag stages the version on npm and creates the GitHub release; a maintainer then approves it with
+`npm stage approve`. Every step, pre-releases and what to do when something fails: [RELEASING.md](RELEASING.md).
 
 ## Made by SyWare
 

package/dist/all.js

@@ -7,7 +7,7 @@ import { define } from "./lib/define.js";
 import { PLACEMENTS, computePosition, followAnchor, placeFloating } from "./lib/floating.js";
 import { COMMON_ICONS } from "./lib/icon-set.js";
 import { hasIcon, iconElement, iconNames, registerIcons } from "./lib/icons.js";
-import { CONTROL_SIZES, TONES, TONE_ICONS } from "./lib/options.js";
+import { CONTROL_SIZES, TONES, TONE_ICONS, TONE_ICON_FILLED } from "./lib/options.js";
 import { JlIcon } from "./atoms/jl-icon.js";
 import { AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, JlAvatar } from "./atoms/jl-avatar.js";
 import { JlBadge } from "./atoms/jl-badge.js";
@@ -61,6 +61,7 @@ import { JlCommandPalette } from "./organisms/jl-command-palette.js";
 import { DIALOG_SIZES, JlDialog } from "./organisms/jl-dialog.js";
 import { CONFIRM_TONES, JlConfirm, confirmDialog } from "./organisms/jl-confirm.js";
 import { DRAWER_PLACEMENTS, DRAWER_SIZES, JlDrawer } from "./organisms/jl-drawer.js";
+import { JlFlow } from "./organisms/jl-flow.js";
 import { JlNavbar } from "./organisms/jl-navbar.js";
 import { JlPageHeader } from "./organisms/jl-page-header.js";
 import { JlSideNav } from "./organisms/jl-side-nav.js";
@@ -71,5 +72,5 @@ import { JlAppShell } from "./templates/jl-app-shell.js";
 import { JlSplitView, SPLIT_ORIENTATIONS } from "./templates/jl-split-view.js";
 // src/all.ts
 registerIcons(COMMON_ICONS);
-define(JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlEmpty, JlField, JlFileDrop, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTable, JlTabPanel, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree);
-export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };
+define(JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlEmpty, JlField, JlFileDrop, JlFlow, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTable, JlTabPanel, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree);
+export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };

package/dist/atoms/jl-icon.css_raw.js

@@ -1,3 +1,3 @@
 // src/atoms/jl-icon.css?raw
-var jl_icon_default = ":host {\n  display: inline-flex;\n  flex: none;\n  line-height: 0;\n  vertical-align: middle;\n}\n\n.icon {\n  display: inline-flex;\n}\n";
+var jl_icon_default = ":host {\n  --cutout: var(--jl-surface);\n  display: inline-flex;\n  flex: none;\n  line-height: 0;\n  vertical-align: middle;\n}\n\n.icon {\n  display: inline-flex;\n}\n\n/* Filled: lucide draws the shape around a sign first (the circle of circle-check, the triangle of triangle-alert).\n   It takes the colour, and the sign takes the background's, as if cut out of it. */\n:host([filled]) svg > :first-child {\n  fill: currentColor;\n}\n\n:host([filled]) svg > :not(:first-child) {\n  stroke: var(--cutout);\n}\n";
 export { jl_icon_default as default };

package/dist/atoms/jl-icon.d.ts

@@ -1,7 +1,8 @@
 import { JlElement } from '../base/jl-element';
 /**
  * A lucide icon by name: `<jl-icon name="search">`. Decorative unless it has a `label`, which screen readers
- * read instead. More icons: `registerIcons({ rocket: Rocket })`.
+ * read instead. More icons: `registerIcons({ rocket: Rocket })`. `filled` draws a sign in a shape (`circle-check`,
+ * `triangle-alert`) as a solid badge.
  */
 export declare class JlIcon extends JlElement {
     static readonly selector = "jl-icon";
@@ -17,6 +18,11 @@ export declare class JlIcon extends JlElement {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** The icon's first shape (the circle or triangle around a sign) in solid colour, the sign cut out of it. */
+    readonly filled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
     private readonly _refs;
     templateHtml(): Node;
     templateCss(): string;

package/dist/atoms/jl-icon.js

@@ -8,13 +8,16 @@ import { jsx } from "@jadis/core/jsx-runtime";
 var DEFAULT_SIZE = 16;
 /**
 * A lucide icon by name: `<jl-icon name="search">`. Decorative unless it has a `label`, which screen readers
-* read instead. More icons: `registerIcons({ rocket: Rocket })`.
+* read instead. More icons: `registerIcons({ rocket: Rocket })`. `filled` draws a sign in a shape (`circle-check`,
+* `triangle-alert`) as a solid badge.
 */
 var JlIcon = class extends JlElement {
 	static selector = "jl-icon";
 	name = this.useChange("", () => this.draw(), { attribute: "name" });
 	size = this.useChange(DEFAULT_SIZE, () => this.draw(), { attribute: "size" });
 	label = this.useChange("", (value) => this.setAccessibleName(value), { attribute: "label" });
+	/** The icon's first shape (the circle or triangle around a sign) in solid colour, the sign cut out of it. */
+	filled = this.useChange(false, (value) => this.reflect("filled", value), { attribute: "filled" });
 	_refs = this.useRefs((ref) => ({ icon: ref(".icon") }));
 	templateHtml() {
 		return /* @__PURE__ */ jsx("span", { class: "icon" });

package/dist/atoms/jl-progress-ring.js

@@ -1,23 +1,18 @@
 import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
+import { svgElement } from "../lib/dom.js";
 import { optionalNumber, percentLabel, percentOf, progressRatio, ringGeometry } from "../lib/progress.js";
 import { PROGRESS_TONES } from "./jl-progress.js";
 import jl_progress_ring_default from "./jl-progress-ring.css_raw.js";
 import { css } from "@jadis/core";
 import { jsx } from "@jadis/core/jsx-runtime";
 // src/atoms/jl-progress-ring.tsx
-var SVG_NS = "http://www.w3.org/2000/svg";
 var DEFAULT_MAX = 100;
 var DEFAULT_SIZE = 40;
 var DEFAULT_THICKNESS = 4;
 var PATH_LENGTH = 100;
 var DEFAULT_NAME = "Progress";
-function svgElement(tag, attributes) {
-	const element = document.createElementNS(SVG_NS, tag);
-	for (const [name, value] of Object.entries(attributes)) element.setAttribute(name, value);
-	return element;
-}
 /**
 * How far a task has gone, as a ring: `value` out of `max`, the percentage in its centre with `show-value`.
 * Without a value, the ring turns: the work has no known end. Fits in buttons, cards and table cells.

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { define } from './lib/define';
 export { computePosition, followAnchor, PLACEMENTS, placeFloating } from './lib/floating';
 export { COMMON_ICONS } from './lib/icon-set';
 export { hasIcon, iconElement, iconNames, registerIcons } from './lib/icons';
-export { CONTROL_SIZES, TONE_ICONS, TONES } from './lib/options';
+export { CONTROL_SIZES, TONE_ICON_FILLED, TONE_ICONS, TONES } from './lib/options';
 export { adoptTokens } from './lib/tokens';
 export { TOKEN_STYLES } from './styles/shared';
 export type * from './types/calendar.types';
@@ -28,6 +28,7 @@ export type * from './types/jl-divider.types';
 export type * from './types/jl-drawer.types';
 export type * from './types/jl-empty.types';
 export type * from './types/jl-field.types';
+export type * from './types/jl-flow.types';
 export type * from './types/jl-input.types';
 export type * from './types/jl-link.types';
 export type * from './types/jl-menu.types';
@@ -109,6 +110,7 @@ export * from './organisms/jl-command-palette';
 export * from './organisms/jl-confirm';
 export * from './organisms/jl-dialog';
 export * from './organisms/jl-drawer';
+export * from './organisms/jl-flow';
 export * from './organisms/jl-navbar';
 export * from './organisms/jl-page-header';
 export * from './organisms/jl-side-nav';

package/dist/index.js

@@ -7,7 +7,7 @@ import { define } from "./lib/define.js";
 import { PLACEMENTS, computePosition, followAnchor, placeFloating } from "./lib/floating.js";
 import { COMMON_ICONS } from "./lib/icon-set.js";
 import { hasIcon, iconElement, iconNames, registerIcons } from "./lib/icons.js";
-import { CONTROL_SIZES, TONES, TONE_ICONS } from "./lib/options.js";
+import { CONTROL_SIZES, TONES, TONE_ICONS, TONE_ICON_FILLED } from "./lib/options.js";
 import { JlIcon } from "./atoms/jl-icon.js";
 import { AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, JlAvatar } from "./atoms/jl-avatar.js";
 import { JlBadge } from "./atoms/jl-badge.js";
@@ -61,6 +61,7 @@ import { JlCommandPalette } from "./organisms/jl-command-palette.js";
 import { DIALOG_SIZES, JlDialog } from "./organisms/jl-dialog.js";
 import { CONFIRM_TONES, JlConfirm, confirmDialog } from "./organisms/jl-confirm.js";
 import { DRAWER_PLACEMENTS, DRAWER_SIZES, JlDrawer } from "./organisms/jl-drawer.js";
+import { JlFlow } from "./organisms/jl-flow.js";
 import { JlNavbar } from "./organisms/jl-navbar.js";
 import { JlPageHeader } from "./organisms/jl-page-header.js";
 import { JlSideNav } from "./organisms/jl-side-nav.js";
@@ -69,4 +70,4 @@ import { JlToaster, TOASTER_PLACEMENTS, toast } from "./organisms/jl-toaster.js"
 import { JlTree } from "./organisms/jl-tree.js";
 import { JlAppShell } from "./templates/jl-app-shell.js";
 import { JlSplitView, SPLIT_ORIENTATIONS } from "./templates/jl-split-view.js";
-export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };
+export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAlert, JlAppShell, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlMenu, JlNavbar, JlNumberInput, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };

package/dist/lib/calendar.d.ts

@@ -1,4 +1,4 @@
-import type { CalendarDate, Weekday, WeekdayWidth } from '../types/calendar.types';
+import type { CalendarDate, DatePart, Weekday, WeekdayWidth } from '../types/calendar.types';
 /** A month grid always has six weeks, so the calendar keeps its height from one month to the next. */
 export declare const WEEKS_PER_GRID = 6;
 export declare const isLeapYear: (year: number) => boolean;
@@ -46,3 +46,17 @@ export declare const formatDate: (date: CalendarDate, locale: string | undefined
 export declare const formatMonthTitle: (year: number, month: number, locale: string | undefined) => string;
 /** The names of the weekdays, in the order a week shows them from its first day. */
 export declare const weekdayNames: (locale: string | undefined, firstDay: Weekday, width: WeekdayWidth) => string[];
+/** How a date field writes a date: in digits, in the locale's order, the year in full (`25.10.2026`, `10/25/2026`). */
+export declare const NUMERIC_DATE: Intl.DateTimeFormatOptions;
+/** The order a locale writes the day, the month and the year in: `['day', 'month', 'year']` in French. */
+export declare const dateOrder: (locale: string | undefined) => DatePart[];
+/** How a date is typed in a locale, for a placeholder: `dd.mm.yyyy`, `mm/dd/yyyy`. */
+export declare const datePattern: (locale: string | undefined) => string;
+/** Whether text could be part of a typed date: digits and separators, no letters. */
+export declare const isDateText: (text: string) => boolean;
+/**
+ * A date as people type it in a field: in the locale's order with any separators (`25.10.2026`, `25/10/2026`), its
+ * digits alone (`25102026`), or year first (`2026-10-25`, `2026/10/25`). Null for anything else, including days that
+ * do not exist.
+ */
+export declare function parseTypedDate(text: string, order: readonly DatePart[]): CalendarDate | null;

package/dist/lib/calendar.js

@@ -163,4 +163,75 @@ var formatMonthTitle = (year, month, locale) => formatDate({
 });
 /** The names of the weekdays, in the order a week shows them from its first day. */
 var weekdayNames = (locale, firstDay, width) => weekdayOrder(firstDay).map((weekday) => formatDate(addDays(A_SUNDAY, weekday), locale, { weekday: width }));
-export { addDays, addMonths, addYears, calendarDateOf, clampDate, compareDates, dateAfterKey, dateFormatter, dayOfWeek, daysInMonth, endOfWeek, formatDate, formatMonthTitle, isLeapYear, isSameDate, isSameMonth, isWithin, monthGrid, monthHasDaysWithin, parseIsoDate, startOfWeek, toIsoDate, weekdayNames, weekdayOrder };
+/** How a date field writes a date: in digits, in the locale's order, the year in full (`25.10.2026`, `10/25/2026`). */
+var NUMERIC_DATE = {
+	day: "2-digit",
+	month: "2-digit",
+	numberingSystem: "latn",
+	year: "numeric"
+};
+var DATE_PARTS = [
+	"day",
+	"month",
+	"year"
+];
+var ISO_ORDER = [
+	"year",
+	"month",
+	"day"
+];
+var PATTERN_LETTERS = {
+	day: "dd",
+	month: "mm",
+	year: "yyyy"
+};
+var PART_DIGITS = {
+	day: 2,
+	month: 2,
+	year: 4
+};
+var DATE_TEXT = /^[\d\s./,-]*$/;
+var NOT_DIGITS = /\D+/;
+var isDatePart = (type) => DATE_PARTS.some((part) => part === type);
+/** A date written in digits in a locale, cut in its parts: `25`, `.`, `10`, `.`, `2026`. */
+var numericParts = (locale) => new Intl.DateTimeFormat(locale, {
+	...NUMERIC_DATE,
+	timeZone: UTC
+}).formatToParts(new Date(utcTime(A_SUNDAY)));
+/** The order a locale writes the day, the month and the year in: `['day', 'month', 'year']` in French. */
+var dateOrder = (locale) => numericParts(locale).flatMap((part) => isDatePart(part.type) ? [part.type] : []);
+/** How a date is typed in a locale, for a placeholder: `dd.mm.yyyy`, `mm/dd/yyyy`. */
+var datePattern = (locale) => numericParts(locale).map((part) => isDatePart(part.type) ? PATTERN_LETTERS[part.type] : part.value).join("");
+/** Whether text could be part of a typed date: digits and separators, no letters. */
+var isDateText = (text) => DATE_TEXT.test(text);
+/** Digits typed without separators, cut in the locale's parts; null when there are not as many as a date has. */
+function splitDigits(digits, order) {
+	const lengths = order.map((part) => PART_DIGITS[part]);
+	if (digits.length !== lengths.reduce((sum, length) => sum + length, 0)) return null;
+	return lengths.map((length, index) => {
+		const start = lengths.slice(0, index).reduce((sum, before) => sum + before, 0);
+		return digits.slice(start, start + length);
+	});
+}
+/** The typed groups of digits, as many as the date has parts; null otherwise. */
+function typedGroups(text, order) {
+	const groups = text.split(NOT_DIGITS).filter((group) => group !== "");
+	const parts = groups.length === 1 ? splitDigits(groups[0] ?? "", order) : groups;
+	return parts !== null && parts.length === order.length ? parts : null;
+}
+/**
+* A date as people type it in a field: in the locale's order with any separators (`25.10.2026`, `25/10/2026`), its
+* digits alone (`25102026`), or year first (`2026-10-25`, `2026/10/25`). Null for anything else, including days that
+* do not exist.
+*/
+function parseTypedDate(text, order) {
+	const trimmed = text.trim();
+	const groups = isDateText(trimmed) ? typedGroups(trimmed, order) : null;
+	if (groups === null) return null;
+	const used = groups[0]?.length === YEAR_DIGITS ? ISO_ORDER : order;
+	const part = (name) => groups[used.indexOf(name)] ?? "";
+	if (!DATE_PARTS.every((name) => name === "year" ? part(name).length === PART_DIGITS.year : part(name).length <= PART_DIGITS[name])) return null;
+	const digits = (name) => pad(Number(part(name)), PART_DIGITS[name]);
+	return parseIsoDate(`${digits("year")}-${digits("month")}-${digits("day")}`);
+}
+export { NUMERIC_DATE, addDays, addMonths, addYears, calendarDateOf, clampDate, compareDates, dateAfterKey, dateFormatter, dateOrder, datePattern, dayOfWeek, daysInMonth, endOfWeek, formatDate, formatMonthTitle, isDateText, isLeapYear, isSameDate, isSameMonth, isWithin, monthGrid, monthHasDaysWithin, parseIsoDate, parseTypedDate, startOfWeek, toIsoDate, weekdayNames, weekdayOrder };

package/dist/lib/dom.d.ts

@@ -2,3 +2,5 @@
 export declare function setOrRemove(element: Element, name: string, value: string): void;
 /** A unique id within the page, for wiring `aria-controls`, `aria-labelledby` and the like inside a shadow root. */
 export declare function uniqueId(prefix: string): string;
+/** An SVG element with its attributes: JSX makes HTML elements only. */
+export declare function svgElement<Tag extends keyof SVGElementTagNameMap>(tag: Tag, attributes: Record<string, string>): SVGElementTagNameMap[Tag];

package/dist/lib/dom.js

@@ -13,4 +13,11 @@ function uniqueId(prefix) {
 	sequence.next += 1;
 	return `${prefix}-${sequence.next}`;
 }
-export { setOrRemove, uniqueId };
+var SVG_NS = "http://www.w3.org/2000/svg";
+/** An SVG element with its attributes: JSX makes HTML elements only. */
+function svgElement(tag, attributes) {
+	const element = document.createElementNS(SVG_NS, tag);
+	for (const [name, value] of Object.entries(attributes)) element.setAttribute(name, value);
+	return element;
+}
+export { setOrRemove, svgElement, uniqueId };

package/dist/lib/flow.d.ts

@@ -0,0 +1,61 @@
+import type { FlowEdge, FlowEdgeEnds, FlowGraph, FlowNode, FlowPoint, FlowPort, FlowViewport } from '../types/jl-flow.types';
+/** A node's box: fixed, so that every anchor and edge is computed without measuring the page. */
+export declare const FLOW_NODE: {
+    readonly height: 64;
+    readonly width: 240;
+};
+export declare const FLOW_ZOOM: {
+    readonly max: 2;
+    readonly min: 0.25;
+    readonly step: 1.2;
+};
+/** The exit of a node that names none. */
+export declare const DEFAULT_PORT: FlowPort;
+export declare const portsOf: (node: FlowNode) => FlowPort[];
+/** The exit an edge leaves by: its own, or its node's first. */
+export declare const portOfEdge: (node: FlowNode, edge: FlowEdge) => string;
+export declare const snap: (point: FlowPoint) => FlowPoint;
+/** Where a node's n-th exit sits along its bottom edge: the edge cut in equal parts, each exit in the middle of one. */
+export declare const portX: (index: number, count: number) => number;
+export declare function outputAnchor(node: FlowNode, portId: string): FlowPoint | undefined;
+export declare const inputAnchor: (node: FlowNode) => FlowPoint;
+/**
+ * The corners an edge goes through, in straight runs: down from the exit, across halfway, down into the node. An
+ * edge that goes back up turns around the side, clear of the nodes.
+ */
+export declare function edgeRoute(from: FlowPoint, to: FlowPoint): FlowPoint[];
+/** An SVG path through the points, its corners rounded. */
+export declare function roundedPath(points: readonly FlowPoint[], radius?: number): string;
+export declare const edgePath: (from: FlowPoint, to: FlowPoint) => string;
+/** The point halfway along `edgePath(from, to)`. */
+export declare const edgeMidpoint: (from: FlowPoint, to: FlowPoint) => FlowPoint;
+/** Where an edge starts and ends, or nothing when one of its ends is gone. */
+export declare function edgeEnds(graph: FlowGraph, edge: FlowEdge): FlowEdgeEnds | undefined;
+/** The node under a point, other than `except`. */
+export declare const nodeAt: (graph: FlowGraph, point: FlowPoint, except?: string) => FlowNode | undefined;
+export declare const isPortFree: (graph: FlowGraph, node: FlowNode, portId: string) => boolean;
+/**
+ * The graph with one more edge, or nothing when the edge cannot be: a node does not connect to itself, a start takes
+ * no incoming edge, and an exit joins a node once.
+ */
+export declare function connect(graph: FlowGraph, edge: FlowEdge): FlowGraph | undefined;
+export declare const moveNode: (graph: FlowGraph, id: string, position: FlowPoint) => FlowGraph;
+/** The graph without the node, and without its edges. */
+export declare const removeNode: (graph: FlowGraph, id: string) => FlowGraph;
+export declare const removeEdge: (graph: FlowGraph, id: string) => FlowGraph;
+/** Where a node added after an exit goes: a row below, under its exit, clear of the nodes after the other exits. */
+export declare function positionAfter(graph: FlowGraph, from: string, portId: string): FlowPoint;
+/**
+ * The nodes laid out again, top to bottom in the order they run: the starts and the nodes nothing leads to on the
+ * first row, each other node a row below the lowest node leading to it, under the exits it hangs from. Edges that
+ * loop back up do not count. Only the positions change.
+ */
+export declare function layoutFlow(graph: FlowGraph): FlowGraph;
+/** Where a point of the canvas (relative to its top left corner) is in the flow's own pixels. */
+export declare const toWorld: (viewport: FlowViewport, screen: FlowPoint) => FlowPoint;
+/** Zooms by `factor`, keeping the point under `screen` where it is: zooming follows the pointer. */
+export declare function zoomAt(viewport: FlowViewport, screen: FlowPoint, factor: number): FlowViewport;
+/** The view that shows every node, centred in a canvas of this size, never larger than life. */
+export declare function fitView(nodes: readonly FlowNode[], width: number, height: number): FlowViewport;
+/** The view moved just enough for a node to be seen whole, its exits included; unchanged when it already is. */
+export declare function revealIn(viewport: FlowViewport, node: FlowNode, width: number, height: number): FlowViewport;