@mistriwork/ui 0.0.0 → 1.0.0-rc.9

package/dist/internal/datePickerModel.d.ts

@@ -0,0 +1,53 @@
+/**
+ * A calendar's arithmetic on ISO dates (`YYYY-MM-DD`) and wall-clock date-times: no value is ever an instant, so no
+ * timezone moves a day. The errors it throws are a caller's mistake (a date it should have checked first), said to a
+ * developer, so they are plain English rather than a catalog's words.
+ */
+export declare const FIRST_DATE = "0001-01-01";
+export declare const LAST_DATE = "9999-12-31";
+interface DateParts {
+    year: number;
+    month: number;
+    day: number;
+}
+interface DateBounds {
+    min: string;
+    max: string;
+}
+interface CalendarDay {
+    date: string | null;
+    inMonth: boolean;
+    disabled: boolean;
+}
+export declare function dateFormat(locale: string | undefined, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
+/** Reuse command validation, narrowing its year-zero support to the form domain. */
+export declare function isPickerDate(value: unknown): value is string;
+export declare function dateParts(value: string): DateParts;
+export declare function daysInMonth(year: number, month: number): number;
+export declare function addDateDays(value: string, step: number): string;
+export declare function addDateMonths(value: string, step: number): string;
+/** Empty ends mean unbounded. Refusing a malformed bound prevents accidental widening. */
+export declare function dateBounds(min?: string, max?: string): DateBounds;
+export declare function dateWithinBounds(value: string, bounds: DateBounds): boolean;
+export declare function clampDate(value: string, bounds: DateBounds): string;
+/** Six stable weeks; out-of-domain cells are blanks rather than repeated edge days. */
+export declare function monthGrid(value: string, firstDay?: number, bounds?: DateBounds): CalendarDay[];
+export declare function monthLabel(value: string, locale?: string): string;
+export declare function weekdayLabels(locale?: string, firstDay?: number): Array<{
+    short: string;
+    long: string;
+}>;
+export declare function isPickerTime(value: unknown): value is string;
+/** A date and a wall-clock time, split at the T a datetime-local control writes or the space a person types. */
+export declare function splitDateTime(value: string): {
+    date: string;
+    time: string;
+} | null;
+export declare function isPickerDateTime(value: unknown): value is string;
+/** The date a calendar picked, keeping the time already typed; a value with none starts at midnight. Said as the box says it, `YYYY-MM-DD HH:MM`. */
+export declare function withDate(value: string, date: string): string;
+/** Inclusive bounds on a wall time; an end that is not a complete date and time bounds nothing. */
+export declare function dateTimeWithinBounds(value: string, min?: string, max?: string): boolean;
+/** Only 'today' depends on a timezone; values and calendar movement never do. */
+export declare function todayInZone(now: Date, timeZone?: string): string;
+export {};

package/dist/internal/datePickerModel.js

@@ -0,0 +1,175 @@
+/**
+ * A calendar's arithmetic on ISO dates (`YYYY-MM-DD`) and wall-clock date-times: no value is ever an instant, so no
+ * timezone moves a day. The errors it throws are a caller's mistake (a date it should have checked first), said to a
+ * developer, so they are plain English rather than a catalog's words.
+ */
+/** A real calendar date written as ISO: the shape, and a day the month has. */
+function isIsoDate(value) {
+    if (typeof value !== 'string' || !/^\d{4}-\d{2}-\d{2}$/.test(value))
+        return false;
+    const date = new Date(`${value}T00:00:00Z`);
+    return !Number.isNaN(date.getTime()) && date.toISOString().slice(0, 10) === value;
+}
+export const FIRST_DATE = '0001-01-01';
+export const LAST_DATE = '9999-12-31';
+/* One formatter per locale and options, made once: a date field drew its
+   weekday names, its month and "today" on every render, and each
+   Intl.DateTimeFormat costs about a millisecond to build on a phone — a
+   filter sheet with two date ranges spent most of its opening building them
+   (test/built-client-vitals.mjs). An option the platform refuses still
+   throws, every time, since only a built formatter is kept. */
+const formatters = new Map();
+export function dateFormat(locale, options) {
+    const key = JSON.stringify([locale ?? null, options]);
+    let format = formatters.get(key);
+    if (!format) {
+        format = new Intl.DateTimeFormat(locale, options);
+        formatters.set(key, format);
+    }
+    return format;
+}
+/** Reuse command validation, narrowing its year-zero support to the form domain. */
+export function isPickerDate(value) {
+    return isIsoDate(value) && value >= FIRST_DATE && value <= LAST_DATE;
+}
+export function dateParts(value) {
+    if (!isPickerDate(value))
+        throw new RangeError('Expected an existing ISO date from 0001-01-01 through 9999-12-31.');
+    return { year: Number(value.slice(0, 4)), month: Number(value.slice(5, 7)), day: Number(value.slice(8, 10)) };
+}
+/** UTC is only a ruler for calendar arithmetic, never a conversion of user input.
+    setUTCFullYear avoids the Date constructor's special treatment of years 0–99. */
+function calendarDate({ year, month, day }) {
+    const date = new Date(0);
+    date.setUTCFullYear(year, month - 1, day);
+    return date;
+}
+function iso(date) {
+    return `${String(date.getUTCFullYear()).padStart(4, '0')}-${String(date.getUTCMonth() + 1).padStart(2, '0')}-${String(date.getUTCDate()).padStart(2, '0')}`;
+}
+function integer(value) {
+    if (!Number.isSafeInteger(value))
+        throw new RangeError('Calendar steps must be safe integers.');
+}
+export function daysInMonth(year, month) {
+    integer(year);
+    integer(month);
+    if (year < 1 || year > 9999 || month < 1 || month > 12)
+        throw new RangeError('Invalid calendar month.');
+    return [31, year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month - 1];
+}
+export function addDateDays(value, step) {
+    const date = calendarDate(dateParts(value));
+    integer(step);
+    const min = calendarDate(dateParts(FIRST_DATE)).getTime();
+    const max = calendarDate(dateParts(LAST_DATE)).getTime();
+    return iso(new Date(Math.min(max, Math.max(min, date.getTime() + step * 86_400_000))));
+}
+export function addDateMonths(value, step) {
+    const current = dateParts(value);
+    integer(step);
+    const index = Math.min(9999 * 12 - 1, Math.max(0, (current.year - 1) * 12 + current.month - 1 + step));
+    const year = Math.floor(index / 12) + 1, month = (index % 12) + 1;
+    return iso(calendarDate({ year, month, day: Math.min(current.day, daysInMonth(year, month)) }));
+}
+/** Empty ends mean unbounded. Refusing a malformed bound prevents accidental widening. */
+export function dateBounds(min, max) {
+    // Command declarations historically accept year zero; as with native date
+    // controls, that lower bound must not disable all supported modern dates.
+    const lower = min && isIsoDate(min) && min < FIRST_DATE ? FIRST_DATE : min || FIRST_DATE;
+    const upper = max || LAST_DATE;
+    dateParts(lower);
+    dateParts(upper);
+    if (lower > upper)
+        throw new RangeError('Minimum date must not exceed maximum date.');
+    return { min: lower, max: upper };
+}
+export function dateWithinBounds(value, bounds) {
+    return isPickerDate(value) && value >= bounds.min && value <= bounds.max;
+}
+export function clampDate(value, bounds) {
+    dateParts(value);
+    return value < bounds.min ? bounds.min : value > bounds.max ? bounds.max : value;
+}
+/** Six stable weeks; out-of-domain cells are blanks rather than repeated edge days. */
+export function monthGrid(value, firstDay = 1, bounds = dateBounds()) {
+    integer(firstDay);
+    if (firstDay < 0 || firstDay > 6)
+        throw new RangeError('First weekday must be between 0 (Sunday) and 6.');
+    const parts = dateParts(value), start = calendarDate({ ...parts, day: 1 });
+    const offset = (start.getUTCDay() - firstDay + 7) % 7;
+    return Array.from({ length: 42 }, (_, index) => {
+        const day = new Date(start.getTime() + (index - offset) * 86_400_000);
+        if (day.getUTCFullYear() < 1 || day.getUTCFullYear() > 9999)
+            return { date: null, inMonth: false, disabled: true };
+        const date = iso(day);
+        return { date, inMonth: day.getUTCMonth() + 1 === parts.month, disabled: !dateWithinBounds(date, bounds) };
+    });
+}
+export function monthLabel(value, locale) {
+    return dateFormat(locale, { calendar: 'gregory', timeZone: 'UTC', month: 'long', year: 'numeric' }).format(calendarDate(dateParts(value)));
+}
+export function weekdayLabels(locale, firstDay = 1) {
+    integer(firstDay);
+    if (firstDay < 0 || firstDay > 6)
+        throw new RangeError('First weekday must be between 0 (Sunday) and 6.');
+    const short = dateFormat(locale, { calendar: 'gregory', timeZone: 'UTC', weekday: 'short' });
+    const long = dateFormat(locale, { calendar: 'gregory', timeZone: 'UTC', weekday: 'long' });
+    return Array.from({ length: 7 }, (_, index) => {
+        const day = calendarDate({ year: 2023, month: 1, day: 1 + ((firstDay + index) % 7) });
+        return { short: short.format(day), long: long.format(day) };
+    });
+}
+/* A wall-clock time as a datetime-local control writes one: HH:MM, then
+   optional seconds and milliseconds. No zone, ever: a value with an offset or
+   a Z is an instant, and an instant is not a picker's to edit as a date. */
+const WALL_TIME = /^([01]\d|2[0-3]):[0-5]\d(:[0-5]\d(\.\d{1,3})?)?$/;
+export function isPickerTime(value) {
+    return typeof value === 'string' && WALL_TIME.test(value);
+}
+/** A date and a wall-clock time, split at the T a datetime-local control writes or the space a person types. */
+export function splitDateTime(value) {
+    const at = value.search(/[T ]/);
+    return at === 10 ? { date: value.slice(0, 10), time: value.slice(11) } : null;
+}
+export function isPickerDateTime(value) {
+    const parts = typeof value === 'string' ? splitDateTime(value) : null;
+    return Boolean(parts && isPickerDate(parts.date) && isPickerTime(parts.time));
+}
+/** The date a calendar picked, keeping the time already typed; a value with none starts at midnight. Said as the box says it, `YYYY-MM-DD HH:MM`. */
+export function withDate(value, date) {
+    const time = splitDateTime(value)?.time;
+    return `${date} ${time && isPickerTime(time) ? time : '00:00'}`;
+}
+/** Seconds and milliseconds filled in, so two wall times compare as text. Null for anything that is not one. */
+function comparable(value) {
+    if (!isPickerDateTime(value))
+        return null;
+    const { date, time } = splitDateTime(value);
+    const [hm, rest = '00'] = [time.slice(0, 5), time.slice(6)];
+    const [seconds = '00', fraction = ''] = rest.split('.');
+    return `${date}T${hm}:${seconds.padEnd(2, '0')}.${fraction.padEnd(3, '0')}`;
+}
+/** Inclusive bounds on a wall time; an end that is not a complete date and time bounds nothing. */
+export function dateTimeWithinBounds(value, min, max) {
+    const at = comparable(value);
+    if (at === null)
+        return false;
+    const lower = min ? comparable(min) : null, upper = max ? comparable(max) : null;
+    return (lower === null || at >= lower) && (upper === null || at <= upper);
+}
+/** Only 'today' depends on a timezone; values and calendar movement never do. */
+export function todayInZone(now, timeZone) {
+    const parts = dateFormat('en-US', {
+        calendar: 'gregory',
+        numberingSystem: 'latn',
+        timeZone,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+    }).formatToParts(now);
+    const get = (type) => parts.find((part) => part.type === type).value;
+    const result = `${get('year').padStart(4, '0')}-${get('month')}-${get('day')}`;
+    dateParts(result);
+    return result;
+}

package/dist/internal/popups.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Where the primitives' popups — a dialog, a menu, a listbox — are drawn.
+ *
+ * Undefined lets Base UI choose, which is the body, or the enclosing portal
+ * for a popup inside a popup, which an explicit body would not keep. That is
+ * right for a page of its own; a shell drawn inside another page (an embed)
+ * names its own container with `drawPopupsIn`
+ * (packages/mistri/src/embed/seams/shellHost.ts).
+ */
+/** The container handed to Base UI's portals. */
+export declare const popupContainer: () => HTMLElement | undefined;
+/** Draw every popup in this container from now on. */
+export declare function drawPopupsIn(where: () => HTMLElement | undefined): void;

package/dist/internal/popups.js

@@ -0,0 +1,16 @@
+/**
+ * Where the primitives' popups — a dialog, a menu, a listbox — are drawn.
+ *
+ * Undefined lets Base UI choose, which is the body, or the enclosing portal
+ * for a popup inside a popup, which an explicit body would not keep. That is
+ * right for a page of its own; a shell drawn inside another page (an embed)
+ * names its own container with `drawPopupsIn`
+ * (packages/mistri/src/embed/seams/shellHost.ts).
+ */
+let container = () => undefined;
+/** The container handed to Base UI's portals. */
+export const popupContainer = () => container();
+/** Draw every popup in this container from now on. */
+export function drawPopupsIn(where) {
+    container = where;
+}

package/dist/internal/ruler.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The zoom-aware ruler (docs/design.md, Density): every box a popup or an
+ * overlay is placed by is measured with it.
+ *
+ * The density preference puts a CSS `zoom` on the root, for anything that
+ * positions a fixed overlay. getBoundingClientRect answers in real screen
+ * pixels, but a `top` set on a fixed element inside the zoomed root is
+ * scaled on its way back — measured with one ruler, placed with the
+ * other, a peek card landed a room away from its chip. Divide every
+ * measured coordinate (and window.inner*) by this before assigning it;
+ * offsetWidth/offsetHeight are already layout pixels and stay as read.
+ *
+ * The root is the page's own element unless a shell says otherwise: an
+ * embedded shell wears its zoom on its own `.tw-root` and names it with
+ * `measureFrom` (packages/mistri/src/embed/seams/shellHost.ts). The kit
+ * reads these through core.js, under the names it always had.
+ */
+/** The element whose zoom the ruler divides by, for a shell that draws inside a page that is not its own. */
+export declare function measureFrom(element: () => Element): void;
+/** The zoom on the root. */
+export declare function viewportScale(): number;
+/** Called by the density preference after it moves the root zoom. */
+export declare function refreshViewportScale(): void;
+/** An element's box in layout pixels — getBoundingClientRect, un-zoomed. */
+export declare function viewportBox(node: Element): {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    width: number;
+    height: number;
+};
+/** The viewport in the same layout pixels the boxes above use. */
+export declare function viewportSize(): {
+    width: number;
+    height: number;
+};

package/dist/internal/ruler.js

@@ -0,0 +1,55 @@
+/**
+ * The zoom-aware ruler (docs/design.md, Density): every box a popup or an
+ * overlay is placed by is measured with it.
+ *
+ * The density preference puts a CSS `zoom` on the root, for anything that
+ * positions a fixed overlay. getBoundingClientRect answers in real screen
+ * pixels, but a `top` set on a fixed element inside the zoomed root is
+ * scaled on its way back — measured with one ruler, placed with the
+ * other, a peek card landed a room away from its chip. Divide every
+ * measured coordinate (and window.inner*) by this before assigning it;
+ * offsetWidth/offsetHeight are already layout pixels and stay as read.
+ *
+ * The root is the page's own element unless a shell says otherwise: an
+ * embedded shell wears its zoom on its own `.tw-root` and names it with
+ * `measureFrom` (packages/mistri/src/embed/seams/shellHost.ts). The kit
+ * reads these through core.js, under the names it always had.
+ */
+let root = () => document.documentElement;
+let zoomScale = null;
+/** The element whose zoom the ruler divides by, for a shell that draws inside a page that is not its own. */
+export function measureFrom(element) {
+    root = element;
+    zoomScale = null;
+}
+/** The zoom on the root. */
+export function viewportScale() {
+    /* Cached: the zoom is written in exactly one place (the density
+       preference), but this is read per keystroke by the completion's caret
+       math and per repaint by the pinned-column offsets — a fresh
+       getComputedStyle on each read bought nothing. */
+    zoomScale ??= Number(getComputedStyle(root()).zoom) || 1;
+    return zoomScale;
+}
+/** Called by the density preference after it moves the root zoom. */
+export function refreshViewportScale() {
+    zoomScale = null;
+}
+/** An element's box in layout pixels — getBoundingClientRect, un-zoomed. */
+export function viewportBox(node) {
+    const z = viewportScale();
+    const r = node.getBoundingClientRect();
+    return {
+        top: r.top / z,
+        bottom: r.bottom / z,
+        left: r.left / z,
+        right: r.right / z,
+        width: r.width / z,
+        height: r.height / z,
+    };
+}
+/** The viewport in the same layout pixels the boxes above use. */
+export function viewportSize() {
+    const z = viewportScale();
+    return { width: window.innerWidth / z, height: window.innerHeight / z };
+}

package/dist/masks.d.ts

@@ -0,0 +1,32 @@
+export interface Mask {
+    format: (raw: string) => string;
+    parse: (typed: string) => string;
+    /** How many raw characters make a whole value, when there is one (a phone is 10 digits). */
+    length?: number;
+    placeholder?: string;
+    inputMode?: 'text' | 'numeric' | 'tel' | 'email';
+}
+export declare const digits: (s: string) => string;
+/** A whole number with thousands separators (the locale is the caller's: en-US here, as the presets are). */
+export declare const grouped: (n: number) => string;
+export declare const masks: {
+    phone: Mask;
+    date: Mask;
+    month: Mask;
+    ssn: Mask;
+    zip: Mask;
+    digits: {
+        format: (raw: string) => string;
+        parse: (typed: string) => string;
+        placeholder?: string;
+        inputMode?: 'text' | 'numeric' | 'tel' | 'email';
+        length: undefined;
+    };
+    /** Whole money: `$2,500` for `symbol: '$'`, `25,000` for ''. */
+    money: (symbol?: string, max?: number) => Mask;
+};
+export type MaskName = 'phone' | 'date' | 'month' | 'ssn' | 'zip' | 'digits' | 'money' | 'grouped';
+/** A mask by its name, for a spec that is data. */
+export declare function maskNamed(name: MaskName | Mask): Mask;
+/** A typed MM/DD/YYYY as YYYY-MM-DD, or '' when it is not a real day. */
+export declare function isoDay(typed: string): string;

package/dist/masks.js

@@ -0,0 +1,62 @@
+/* Input masks as a pair of functions. A field keeps the raw value (digits, usually); `format` draws it in the box and
+   `parse` reads what was typed back to raw, so a mask never has to know where the cursor is. A page may pass its own.
+   Preview: @mistriwork/ui is Preview at 1.0. */
+export const digits = (s) => s.replace(/\D/g, '');
+/** A whole number with thousands separators (the locale is the caller's: en-US here, as the presets are). */
+export const grouped = (n) => n.toLocaleString('en-US');
+/** Digits cut into groups: sizes [3,3,4] with '-' gives 678-678-6781. A partial value ends where its digits do. */
+function grouping(sizes, sep, placeholder, inputMode = 'numeric') {
+    const max = sizes.reduce((a, b) => a + b, 0);
+    return {
+        parse: (typed) => digits(typed).slice(0, max),
+        format: (raw) => {
+            const parts = [];
+            let at = 0;
+            for (const size of sizes) {
+                if (at >= raw.length)
+                    break;
+                parts.push(raw.slice(at, at + size));
+                at += size;
+            }
+            return parts.join(sep);
+        },
+        length: max,
+        placeholder,
+        inputMode,
+    };
+}
+export const masks = {
+    phone: grouping([3, 3, 4], '-', undefined, 'tel'),
+    date: grouping([2, 2, 4], '/', 'MM/DD/YYYY'),
+    month: grouping([2, 4], '/', 'MM/YYYY'),
+    ssn: grouping([3, 2, 4], '-'),
+    zip: grouping([5], '-'),
+    digits: { ...grouping([30], ''), length: undefined },
+    /** Whole money: `$2,500` for `symbol: '$'`, `25,000` for ''. */
+    money: (symbol = '$', max = 7) => ({
+        parse: (typed) => digits(typed).slice(0, max),
+        format: (raw) => (raw === '' ? '' : `${symbol}${grouped(Number(raw))}`),
+        inputMode: 'numeric',
+    }),
+};
+/** A mask by its name, for a spec that is data. */
+export function maskNamed(name) {
+    if (typeof name !== 'string')
+        return name;
+    if (name === 'money')
+        return masks.money('$');
+    if (name === 'grouped')
+        return masks.money('');
+    return masks[name];
+}
+/** A typed MM/DD/YYYY as YYYY-MM-DD, or '' when it is not a real day. */
+export function isoDay(typed) {
+    const m = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(typed);
+    if (!m)
+        return '';
+    const [, mm, dd, yyyy] = m;
+    const d = new Date(Date.UTC(Number(yyyy), Number(mm) - 1, Number(dd)));
+    if (d.getUTCFullYear() !== Number(yyyy) || d.getUTCMonth() !== Number(mm) - 1 || d.getUTCDate() !== Number(dd))
+        return '';
+    return `${yyyy}-${mm}-${dd}`;
+}

package/dist/preferences.css

@@ -0,0 +1,26 @@
+/* @mistriwork/ui's answers to the reader's own settings: more contrast, and less transparency. Apart from forms.css, whose
+   sheet holds that nothing in it is !important: this one is, on purpose. A worn theme writes its colours on the root as
+   inline custom properties, which nothing but !important beats, and the reader's setting must beat the theme's. Loaded
+   beside the form controls (formControls.css) because the first stylesheet has no bytes to spare for it; a page that
+   draws no control keeps its themed ink and scrims. Moving it to tokens.css costs about 0.5 KB raw there. */
+@media (prefers-contrast: more) {
+  :root {
+    /* Quiet ink and the hairlines toward the ink, the control's edge and the focus ring in it. */
+    --ink-muted: color-mix(in srgb, var(--ink) 85%, var(--surface)) !important;
+    --ink-subtle: var(--ink-muted) !important;
+    --line: color-mix(in srgb, var(--ink) 45%, var(--surface)) !important;
+    --line-strong: var(--ink-muted) !important;
+    --line-control: var(--ink) !important;
+    --field-edge: var(--ink) !important;
+    --focus: var(--ink) !important;
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  /* The scrims behind a dialog and a drawer solid (the page is hidden, not dimmed), and the photo viewer's ground. */
+  :root {
+    --scrim: color-mix(in srgb, black 80%, var(--ground)) !important;
+    --scrim-light: color-mix(in srgb, black 45%, var(--ground)) !important;
+    --lightbox-ground: rgb(10 12 16) !important;
+  }
+  .modal-backdrop { background: var(--scrim-light); }
+}