@k2b/ui 0.50.0 → 0.52.0

package/dist/browser/inputs/period.js

@@ -0,0 +1,263 @@
+import { dates } from "@k2b/stdlib";
+
+/**
+ * A period as an app stores it: a preset key that stays relative ("this month" is next month's month too), or two
+ * explicit days. Days are date keys such as `2026-11-01`; `end` is inclusive.
+ */
+
+/** Inclusive days of a period. `null` is an open edge, for example "All time" without a known first day. */
+
+/** What a preset resolves against: today in the period's time zone and the first day of the week. */
+
+/** The clock a period is resolved with. Server and browser pass the same values so the first render agrees. */
+
+const keyDate = key => new Date(`${key}T00:00:00Z`);
+const dateKeyOf = date => date.toISOString().slice(0, 10);
+const day = (year, month, date) => dateKeyOf(new Date(Date.UTC(year, month, date)));
+const parts = key => ({
+  year: Number(key.slice(0, 4)),
+  month: Number(key.slice(5, 7)) - 1,
+  date: Number(key.slice(8, 10))
+});
+
+/** Adds whole days to a date key; calendar days, so a DST change never moves it. */
+export const addPeriodDays = (key, count) => {
+  const date = keyDate(key);
+  date.setUTCDate(date.getUTCDate() + count);
+  return dateKeyOf(date);
+};
+
+/** Number of days in an inclusive range of date keys. */
+export const periodDayCount = range => Math.round((keyDate(range.end).getTime() - keyDate(range.start).getTime()) / 86_400_000) + 1;
+const month = (key, offset) => {
+  const {
+    year,
+    month
+  } = parts(key);
+  return {
+    start: day(year, month + offset, 1),
+    end: day(year, month + offset + 1, 0)
+  };
+};
+const quarter = (key, offset) => {
+  const {
+    year,
+    month
+  } = parts(key);
+  const first = Math.floor(month / 3) * 3 + offset * 3;
+  return {
+    start: day(year, first, 1),
+    end: day(year, first + 3, 0)
+  };
+};
+const year = (key, offset) => {
+  const value = parts(key).year + offset;
+  return {
+    start: `${value}-01-01`,
+    end: `${value}-12-31`
+  };
+};
+const week = (context, offset) => {
+  const weekday = keyDate(context.today).getUTCDay();
+  const start = addPeriodDays(context.today, -((weekday - context.weekStartsOn + 7) % 7) + offset * 7);
+  return {
+    start,
+    end: addPeriodDays(start, 6)
+  };
+};
+
+/**
+ * Built-in presets. Each covers its whole calendar period ("This month" is the 1st to the last day, not up to
+ * today) in the period's time zone; weeks start on the context's first day of the week.
+ */
+export const periodPresets = {
+  today: {
+    key: "today",
+    resolve: ({
+      today
+    }) => ({
+      start: today,
+      end: today
+    })
+  },
+  yesterday: {
+    key: "yesterday",
+    resolve: ({
+      today
+    }) => ({
+      start: addPeriodDays(today, -1),
+      end: addPeriodDays(today, -1)
+    })
+  },
+  thisWeek: {
+    key: "this-week",
+    resolve: context => week(context, 0)
+  },
+  lastWeek: {
+    key: "last-week",
+    resolve: context => week(context, -1)
+  },
+  thisMonth: {
+    key: "this-month",
+    resolve: ({
+      today
+    }) => month(today, 0)
+  },
+  lastMonth: {
+    key: "last-month",
+    resolve: ({
+      today
+    }) => month(today, -1)
+  },
+  thisQuarter: {
+    key: "this-quarter",
+    resolve: ({
+      today
+    }) => quarter(today, 0)
+  },
+  lastQuarter: {
+    key: "last-quarter",
+    resolve: ({
+      today
+    }) => quarter(today, -1)
+  },
+  thisYear: {
+    key: "this-year",
+    resolve: ({
+      today
+    }) => year(today, 0)
+  },
+  lastYear: {
+    key: "last-year",
+    resolve: ({
+      today
+    }) => year(today, -1)
+  },
+  /** Everything up to today; `since` is the first day with data when the app knows it, else the start stays open. */
+  all: (options = {}) => ({
+    key: "all",
+    resolve: ({
+      today
+    }) => ({
+      start: options.since ?? null,
+      end: today
+    })
+  })
+};
+const dateKeyPattern = /^\d{4}-\d{2}-\d{2}$/;
+/** A real calendar day key, not only the shape (`2026-02-30` is refused). */
+export const isPeriodDay = value => {
+  if (typeof value !== "string" || !dateKeyPattern.test(value)) return false;
+  const date = keyDate(value);
+  return !Number.isNaN(date.getTime()) && dateKeyOf(date) === value;
+};
+
+/** Accepts a stored or URL value only when it is a known preset key or two real days in order. */
+export const parsePeriodValue = (value, presets) => {
+  if (!value || typeof value !== "object") return undefined;
+  const candidate = value;
+  if (typeof candidate.preset === "string") return presets.some(preset => preset.key === candidate.preset) ? {
+    preset: candidate.preset
+  } : undefined;
+  if (isPeriodDay(candidate.start) && isPeriodDay(candidate.end) && candidate.start <= candidate.end) return {
+    start: candidate.start,
+    end: candidate.end
+  };
+  return undefined;
+};
+
+/** The context presets resolve against: today in the clock's time zone. */
+export const periodContext = (clock = {}) => ({
+  today: dates.formatDateKey(clock.now ?? new Date(), {
+    timeZone: clock.timeZone
+  }),
+  weekStartsOn: clock.weekStartsOn ?? clock.firstDayOfWeek ?? 1
+});
+
+/**
+ * Resolves a value to inclusive days. Returns `undefined` for a preset key the list does not contain, so a stored
+ * period that no longer exists is never silently replaced.
+ */
+export const resolvePeriod = (value, presets, clock = {}) => {
+  if (!("preset" in value)) return {
+    start: value.start,
+    end: value.end
+  };
+  return presets.find(preset => preset.key === value.preset)?.resolve(periodContext(clock));
+};
+
+/**
+ * The instants a query uses for a resolved period: `from` is the start of the first day and `to` the start of the
+ * day after the last one (exclusive), both in the time zone. Days are never assumed to last 24 hours.
+ */
+export const periodInstants = (range, timeZone) => {
+  const midnight = key => dates.zonedDateTimeToInstant(`${key}T00:00`, timeZone, {
+    disambiguation: "compatible"
+  });
+  return {
+    from: range.start ? midnight(range.start) : null,
+    to: range.end ? midnight(addPeriodDays(range.end, 1)) : null
+  };
+};
+const utcFormat = (locale, options) => new Intl.DateTimeFormat(locale, {
+  ...options,
+  timeZone: "UTC"
+});
+
+/**
+ * Short days of a preset, for the list and the trigger: "Sat, Nov 7", "Nov 1 – 30", "2025", "since 3/14/2019".
+ * The year is added only when the period is not in today's year.
+ */
+export const formatPeriodDays = (range, today, locale, since) => {
+  if (!range.start) return "";
+  if (!range.end) return since(utcFormat(locale, {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric"
+  }).format(keyDate(range.start)));
+  const start = keyDate(range.start);
+  const end = keyDate(range.end);
+  const sameYear = range.start.slice(0, 4) === range.end.slice(0, 4);
+  if (sameYear && range.start.endsWith("-01-01") && range.end.endsWith("-12-31")) return range.start.slice(0, 4);
+  if (range.end === today && range.start.slice(0, 4) !== today.slice(0, 4)) return since(utcFormat(locale, {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric"
+  }).format(start));
+  const withYear = !sameYear || range.start.slice(0, 4) !== today.slice(0, 4);
+  if (range.start === range.end) return utcFormat(locale, {
+    weekday: "short",
+    day: "numeric",
+    month: "short",
+    ...(withYear ? {
+      year: "numeric"
+    } : {})
+  }).format(start);
+  return utcFormat(locale, {
+    day: "numeric",
+    month: "short",
+    ...(withYear ? {
+      year: "numeric"
+    } : {})
+  }).formatRange(start, end);
+};
+
+/** Explicit days as numbers with the year: "01.–07.11.2026" in German, "11/1/2026 – 11/7/2026" in English. */
+export const formatPeriodRange = (range, locale) => {
+  const format = utcFormat(locale, {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric"
+  });
+  return range.start === range.end ? format.format(keyDate(range.start)) : format.formatRange(keyDate(range.start), keyDate(range.end));
+};
+
+/** The widest explicit range within today's year, all of it (two-digit days, a three-digit count), so a trigger can reserve its width. */
+export const widePeriodRangeSample = today => {
+  const year = today.slice(0, 4);
+  return {
+    start: `${year}-01-01`,
+    end: `${year}-12-31`
+  };
+};
+//# sourceMappingURL=period.js.map

package/dist/browser/inputs/period.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["inputs/period.ts"],"sourcesContent":["import { dates } from \"@k2b/stdlib\";\n\n/**\n * A period as an app stores it: a preset key that stays relative (\"this month\" is next month's month too), or two\n * explicit days. Days are date keys such as `2026-11-01`; `end` is inclusive.\n */\nexport type PeriodValue = { preset: string } | { start: string; end: string };\n\n/** Inclusive days of a period. `null` is an open edge, for example \"All time\" without a known first day. */\nexport type PeriodRange = { start: string | null; end: string | null };\n\n/** What a preset resolves against: today in the period's time zone and the first day of the week. */\nexport type PeriodContext = { today: string; weekStartsOn: 0 | 1 };\n\nexport type PeriodPreset = {\n  key: string;\n  /** Shown in the list and the trigger. Built-in presets bring a translated label; app presets name their own. */\n  label?: string;\n  resolve: (context: PeriodContext) => PeriodRange;\n};\n\n/** The clock a period is resolved with. Server and browser pass the same values so the first render agrees. */\nexport type PeriodClock = {\n  /** The instant \"today\" is read from; defaults to now. */\n  now?: Date;\n  /** IANA time zone the days belong to, for example a base's zone; defaults to the runtime zone. */\n  timeZone?: string;\n  /** First day of the week, as in the calendar's date config; Monday by default. */\n  weekStartsOn?: 0 | 1;\n  /** Alias of `weekStartsOn`, accepted from a shared date config. */\n  firstDayOfWeek?: 0 | 1;\n};\n\nconst keyDate = (key: string): Date => new Date(`${key}T00:00:00Z`);\nconst dateKeyOf = (date: Date): string => date.toISOString().slice(0, 10);\nconst day = (year: number, month: number, date: number): string => dateKeyOf(new Date(Date.UTC(year, month, date)));\nconst parts = (key: string) => ({ year: Number(key.slice(0, 4)), month: Number(key.slice(5, 7)) - 1, date: Number(key.slice(8, 10)) });\n\n/** Adds whole days to a date key; calendar days, so a DST change never moves it. */\nexport const addPeriodDays = (key: string, count: number): string => {\n  const date = keyDate(key);\n  date.setUTCDate(date.getUTCDate() + count);\n  return dateKeyOf(date);\n};\n\n/** Number of days in an inclusive range of date keys. */\nexport const periodDayCount = (range: { start: string; end: string }): number =>\n  Math.round((keyDate(range.end).getTime() - keyDate(range.start).getTime()) / 86_400_000) + 1;\n\nconst month = (key: string, offset: number): PeriodRange => {\n  const { year, month } = parts(key);\n  return { start: day(year, month + offset, 1), end: day(year, month + offset + 1, 0) };\n};\nconst quarter = (key: string, offset: number): PeriodRange => {\n  const { year, month } = parts(key);\n  const first = Math.floor(month / 3) * 3 + offset * 3;\n  return { start: day(year, first, 1), end: day(year, first + 3, 0) };\n};\nconst year = (key: string, offset: number): PeriodRange => {\n  const value = parts(key).year + offset;\n  return { start: `${value}-01-01`, end: `${value}-12-31` };\n};\nconst week = (context: PeriodContext, offset: number): PeriodRange => {\n  const weekday = keyDate(context.today).getUTCDay();\n  const start = addPeriodDays(context.today, -((weekday - context.weekStartsOn + 7) % 7) + offset * 7);\n  return { start, end: addPeriodDays(start, 6) };\n};\n\n/**\n * Built-in presets. Each covers its whole calendar period (\"This month\" is the 1st to the last day, not up to\n * today) in the period's time zone; weeks start on the context's first day of the week.\n */\nexport const periodPresets = {\n  today: { key: \"today\", resolve: ({ today }) => ({ start: today, end: today }) },\n  yesterday: { key: \"yesterday\", resolve: ({ today }) => ({ start: addPeriodDays(today, -1), end: addPeriodDays(today, -1) }) },\n  thisWeek: { key: \"this-week\", resolve: (context) => week(context, 0) },\n  lastWeek: { key: \"last-week\", resolve: (context) => week(context, -1) },\n  thisMonth: { key: \"this-month\", resolve: ({ today }) => month(today, 0) },\n  lastMonth: { key: \"last-month\", resolve: ({ today }) => month(today, -1) },\n  thisQuarter: { key: \"this-quarter\", resolve: ({ today }) => quarter(today, 0) },\n  lastQuarter: { key: \"last-quarter\", resolve: ({ today }) => quarter(today, -1) },\n  thisYear: { key: \"this-year\", resolve: ({ today }) => year(today, 0) },\n  lastYear: { key: \"last-year\", resolve: ({ today }) => year(today, -1) },\n  /** Everything up to today; `since` is the first day with data when the app knows it, else the start stays open. */\n  all: (options: { since?: string | null } = {}): PeriodPreset => ({\n    key: \"all\",\n    resolve: ({ today }) => ({ start: options.since ?? null, end: today }),\n  }),\n} satisfies Record<string, PeriodPreset | ((options?: { since?: string | null }) => PeriodPreset)>;\n\nconst dateKeyPattern = /^\\d{4}-\\d{2}-\\d{2}$/;\n/** A real calendar day key, not only the shape (`2026-02-30` is refused). */\nexport const isPeriodDay = (value: unknown): value is string => {\n  if (typeof value !== \"string\" || !dateKeyPattern.test(value)) return false;\n  const date = keyDate(value);\n  return !Number.isNaN(date.getTime()) && dateKeyOf(date) === value;\n};\n\n/** Accepts a stored or URL value only when it is a known preset key or two real days in order. */\nexport const parsePeriodValue = (value: unknown, presets: readonly PeriodPreset[]): PeriodValue | undefined => {\n  if (!value || typeof value !== \"object\") return undefined;\n  const candidate = value as Record<string, unknown>;\n  if (typeof candidate.preset === \"string\")\n    return presets.some((preset) => preset.key === candidate.preset) ? { preset: candidate.preset } : undefined;\n  if (isPeriodDay(candidate.start) && isPeriodDay(candidate.end) && candidate.start <= candidate.end)\n    return { start: candidate.start, end: candidate.end };\n  return undefined;\n};\n\n/** The context presets resolve against: today in the clock's time zone. */\nexport const periodContext = (clock: PeriodClock = {}): PeriodContext => ({\n  today: dates.formatDateKey(clock.now ?? new Date(), { timeZone: clock.timeZone }),\n  weekStartsOn: clock.weekStartsOn ?? clock.firstDayOfWeek ?? 1,\n});\n\n/**\n * Resolves a value to inclusive days. Returns `undefined` for a preset key the list does not contain, so a stored\n * period that no longer exists is never silently replaced.\n */\nexport const resolvePeriod = (value: PeriodValue, presets: readonly PeriodPreset[], clock: PeriodClock = {}): PeriodRange | undefined => {\n  if (!(\"preset\" in value)) return { start: value.start, end: value.end };\n  return presets.find((preset) => preset.key === value.preset)?.resolve(periodContext(clock));\n};\n\n/**\n * The instants a query uses for a resolved period: `from` is the start of the first day and `to` the start of the\n * day after the last one (exclusive), both in the time zone. Days are never assumed to last 24 hours.\n */\nexport const periodInstants = (range: PeriodRange, timeZone: string): { from: string | null; to: string | null } => {\n  const midnight = (key: string) => dates.zonedDateTimeToInstant(`${key}T00:00`, timeZone, { disambiguation: \"compatible\" });\n  return { from: range.start ? midnight(range.start) : null, to: range.end ? midnight(addPeriodDays(range.end, 1)) : null };\n};\n\nconst utcFormat = (locale: string, options: Intl.DateTimeFormatOptions) => new Intl.DateTimeFormat(locale, { ...options, timeZone: \"UTC\" });\n\n/**\n * Short days of a preset, for the list and the trigger: \"Sat, Nov 7\", \"Nov 1 – 30\", \"2025\", \"since 3/14/2019\".\n * The year is added only when the period is not in today's year.\n */\nexport const formatPeriodDays = (range: PeriodRange, today: string, locale: string, since: (date: string) => string): string => {\n  if (!range.start) return \"\";\n  if (!range.end) return since(utcFormat(locale, { day: \"2-digit\", month: \"2-digit\", year: \"numeric\" }).format(keyDate(range.start)));\n  const start = keyDate(range.start);\n  const end = keyDate(range.end);\n  const sameYear = range.start.slice(0, 4) === range.end.slice(0, 4);\n  if (sameYear && range.start.endsWith(\"-01-01\") && range.end.endsWith(\"-12-31\")) return range.start.slice(0, 4);\n  if (range.end === today && range.start.slice(0, 4) !== today.slice(0, 4))\n    return since(utcFormat(locale, { day: \"2-digit\", month: \"2-digit\", year: \"numeric\" }).format(start));\n  const withYear = !sameYear || range.start.slice(0, 4) !== today.slice(0, 4);\n  if (range.start === range.end)\n    return utcFormat(locale, { weekday: \"short\", day: \"numeric\", month: \"short\", ...(withYear ? { year: \"numeric\" } : {}) }).format(start);\n  return utcFormat(locale, { day: \"numeric\", month: \"short\", ...(withYear ? { year: \"numeric\" } : {}) }).formatRange(start, end);\n};\n\n/** Explicit days as numbers with the year: \"01.–07.11.2026\" in German, \"11/1/2026 – 11/7/2026\" in English. */\nexport const formatPeriodRange = (range: { start: string; end: string }, locale: string): string => {\n  const format = utcFormat(locale, { day: \"2-digit\", month: \"2-digit\", year: \"numeric\" });\n  return range.start === range.end ? format.format(keyDate(range.start)) : format.formatRange(keyDate(range.start), keyDate(range.end));\n};\n\n/** The widest explicit range within today's year, all of it (two-digit days, a three-digit count), so a trigger can reserve its width. */\nexport const widePeriodRangeSample = (today: string): { start: string; end: string } => {\n  const year = today.slice(0, 4);\n  return { start: `${year}-01-01`, end: `${year}-12-31` };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/internal/field.js

@@ -8,10 +8,11 @@ import { createComponent as _$createComponent } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-field__required aria-hidden=true>*`),
   _tmpl$2 = /*#__PURE__*/_$template(`<label class=k2b-field__label><!$><!/><!$><!/>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<p class=k2b-field__description>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<p class=k2b-field__error role=alert aria-live=polite>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-field__label><!$><!/><!$><!/>`);
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-field__label><!$><!/><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-field__label-row><!$><!/><!$><!/>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<p class=k2b-field__description>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<p class=k2b-field__error role=alert aria-live=polite>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/><!$><!/><!$><!/>`);
 import { createUniqueId, Show } from "solid-js";
 import { resolveMaybeAccessor } from "../inputs/field-contract";
 export const createFieldMeta = id => {
@@ -26,107 +27,125 @@ export const createFieldMeta = id => {
 };
 export function Field(props) {
   const error = () => resolveMaybeAccessor(props.error);
+  const label = () => _$createComponent(Show, {
+    get when() {
+      return props.labelFor !== false;
+    },
+    get fallback() {
+      return (() => {
+        var _el$7 = _$getNextElement(_tmpl$3),
+          _el$9 = _el$7.firstChild,
+          [_el$0, _co$3] = _$getNextMarker(_el$9.nextSibling),
+          _el$1 = _el$0.nextSibling,
+          [_el$10, _co$4] = _$getNextMarker(_el$1.nextSibling);
+        _$insert(_el$7, () => props.label, _el$0, _co$3);
+        _$insert(_el$7, _$createComponent(Show, {
+          get when() {
+            return props.required;
+          },
+          get children() {
+            return _$getNextElement(_tmpl$);
+          }
+        }), _el$10, _co$4);
+        _$effect(() => _$setAttribute(_el$7, "id", props.meta.labelId));
+        return _el$7;
+      })();
+    },
+    get children() {
+      var _el$ = _$getNextElement(_tmpl$2),
+        _el$3 = _el$.firstChild,
+        [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling),
+        _el$5 = _el$4.nextSibling,
+        [_el$6, _co$2] = _$getNextMarker(_el$5.nextSibling);
+      _$insert(_el$, () => props.label, _el$4, _co$);
+      _$insert(_el$, _$createComponent(Show, {
+        get when() {
+          return props.required;
+        },
+        get children() {
+          return _$getNextElement(_tmpl$);
+        }
+      }), _el$6, _co$2);
+      _$effect(_p$ => {
+        var _v$ = props.meta.labelId,
+          _v$2 = props.labelFor || props.meta.controlId;
+        _v$ !== _p$.e && _$setAttribute(_el$, "id", _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$, "for", _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$;
+    }
+  });
   return (() => {
-    var _el$ = _$getNextElement(_tmpl$5),
-      _el$0 = _el$.firstChild,
-      [_el$1, _co$3] = _$getNextMarker(_el$0.nextSibling),
-      _el$10 = _el$1.nextSibling,
-      [_el$11, _co$4] = _$getNextMarker(_el$10.nextSibling),
-      _el$12 = _el$11.nextSibling,
-      [_el$13, _co$5] = _$getNextMarker(_el$12.nextSibling),
-      _el$14 = _el$13.nextSibling,
-      [_el$15, _co$6] = _$getNextMarker(_el$14.nextSibling);
-    _$insert(_el$, _$createComponent(Show, {
+    var _el$11 = _$getNextElement(_tmpl$7),
+      _el$19 = _el$11.firstChild,
+      [_el$20, _co$7] = _$getNextMarker(_el$19.nextSibling),
+      _el$21 = _el$20.nextSibling,
+      [_el$22, _co$8] = _$getNextMarker(_el$21.nextSibling),
+      _el$23 = _el$22.nextSibling,
+      [_el$24, _co$9] = _$getNextMarker(_el$23.nextSibling),
+      _el$25 = _el$24.nextSibling,
+      [_el$26, _co$0] = _$getNextMarker(_el$25.nextSibling);
+    _$insert(_el$11, _$createComponent(Show, {
       get when() {
         return props.label;
       },
       get children() {
         return _$createComponent(Show, {
           get when() {
-            return props.labelFor !== false;
+            return props.labelEnd;
           },
           get fallback() {
-            return (() => {
-              var _el$16 = _$getNextElement(_tmpl$6),
-                _el$18 = _el$16.firstChild,
-                [_el$19, _co$7] = _$getNextMarker(_el$18.nextSibling),
-                _el$20 = _el$19.nextSibling,
-                [_el$21, _co$8] = _$getNextMarker(_el$20.nextSibling);
-              _$insert(_el$16, () => props.label, _el$19, _co$7);
-              _$insert(_el$16, _$createComponent(Show, {
-                get when() {
-                  return props.required;
-                },
-                get children() {
-                  return _$getNextElement(_tmpl$);
-                }
-              }), _el$21, _co$8);
-              _$effect(() => _$setAttribute(_el$16, "id", props.meta.labelId));
-              return _el$16;
-            })();
+            return label();
           },
           get children() {
-            var _el$2 = _$getNextElement(_tmpl$2),
-              _el$4 = _el$2.firstChild,
-              [_el$5, _co$] = _$getNextMarker(_el$4.nextSibling),
-              _el$6 = _el$5.nextSibling,
-              [_el$7, _co$2] = _$getNextMarker(_el$6.nextSibling);
-            _$insert(_el$2, () => props.label, _el$5, _co$);
-            _$insert(_el$2, _$createComponent(Show, {
-              get when() {
-                return props.required;
-              },
-              get children() {
-                return _$getNextElement(_tmpl$);
-              }
-            }), _el$7, _co$2);
-            _$effect(_p$ => {
-              var _v$ = props.meta.labelId,
-                _v$2 = props.labelFor || props.meta.controlId;
-              _v$ !== _p$.e && _$setAttribute(_el$2, "id", _p$.e = _v$);
-              _v$2 !== _p$.t && _$setAttribute(_el$2, "for", _p$.t = _v$2);
-              return _p$;
-            }, {
-              e: undefined,
-              t: undefined
-            });
-            return _el$2;
+            var _el$12 = _$getNextElement(_tmpl$4),
+              _el$13 = _el$12.firstChild,
+              [_el$14, _co$5] = _$getNextMarker(_el$13.nextSibling),
+              _el$15 = _el$14.nextSibling,
+              [_el$16, _co$6] = _$getNextMarker(_el$15.nextSibling);
+            _$insert(_el$12, label, _el$14, _co$5);
+            _$insert(_el$12, () => props.labelEnd, _el$16, _co$6);
+            return _el$12;
           }
         });
       }
-    }), _el$1, _co$3);
-    _$insert(_el$, _$createComponent(Show, {
+    }), _el$20, _co$7);
+    _$insert(_el$11, _$createComponent(Show, {
       get when() {
         return props.description;
       },
       get children() {
-        var _el$8 = _$getNextElement(_tmpl$3);
-        _$insert(_el$8, () => props.description);
-        _$effect(() => _$setAttribute(_el$8, "id", props.meta.descriptionId));
-        return _el$8;
+        var _el$17 = _$getNextElement(_tmpl$5);
+        _$insert(_el$17, () => props.description);
+        _$effect(() => _$setAttribute(_el$17, "id", props.meta.descriptionId));
+        return _el$17;
       }
-    }), _el$11, _co$4);
-    _$insert(_el$, () => props.children, _el$13, _co$5);
-    _$insert(_el$, _$createComponent(Show, {
+    }), _el$22, _co$8);
+    _$insert(_el$11, () => props.children, _el$24, _co$9);
+    _$insert(_el$11, _$createComponent(Show, {
       get when() {
         return error();
       },
       get children() {
-        var _el$9 = _$getNextElement(_tmpl$4);
-        _$insert(_el$9, error);
-        _$effect(() => _$setAttribute(_el$9, "id", props.meta.errorId));
-        return _el$9;
+        var _el$18 = _$getNextElement(_tmpl$6);
+        _$insert(_el$18, error);
+        _$effect(() => _$setAttribute(_el$18, "id", props.meta.errorId));
+        return _el$18;
       }
-    }), _el$15, _co$6);
+    }), _el$26, _co$0);
     _$effect(_p$ => {
       var _v$3 = `k2b-field ${props.class ?? ""}`,
         _v$4 = props.disabled ? "true" : undefined,
         _v$5 = props.fill ? "true" : undefined,
         _v$6 = error() ? "true" : undefined;
-      _v$3 !== _p$.e && _$className(_el$, _p$.e = _v$3);
-      _v$4 !== _p$.t && _$setAttribute(_el$, "data-disabled", _p$.t = _v$4);
-      _v$5 !== _p$.a && _$setAttribute(_el$, "data-fill", _p$.a = _v$5);
-      _v$6 !== _p$.o && _$setAttribute(_el$, "data-invalid", _p$.o = _v$6);
+      _v$3 !== _p$.e && _$className(_el$11, _p$.e = _v$3);
+      _v$4 !== _p$.t && _$setAttribute(_el$11, "data-disabled", _p$.t = _v$4);
+      _v$5 !== _p$.a && _$setAttribute(_el$11, "data-fill", _p$.a = _v$5);
+      _v$6 !== _p$.o && _$setAttribute(_el$11, "data-invalid", _p$.o = _v$6);
       return _p$;
     }, {
       e: undefined,
@@ -134,7 +153,7 @@ export function Field(props) {
       a: undefined,
       o: undefined
     });
-    return _el$;
+    return _el$11;
   })();
 }
 export const fieldDescribedBy = (meta, owner) => [owner["aria-describedby"], owner.description ? meta.descriptionId : undefined, resolveMaybeAccessor(owner.error) ? meta.errorId : undefined].filter(Boolean).join(" ") || undefined;

package/dist/browser/internal/field.js.map

@@ -1 +1 @@
-{"version":3,"names":["aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-required"],"sources":["internal/field.tsx"],"sourcesContent":["import { createUniqueId, type JSX, Show } from \"solid-js\";\nimport type { FieldProps } from \"../inputs/field-contract\";\nimport { resolveMaybeAccessor } from \"../inputs/field-contract\";\n\nexport type FieldMeta = {\n  controlId: string;\n  labelId: string;\n  descriptionId: string;\n  errorId: string;\n};\n\nexport const createFieldMeta = (id?: string): FieldMeta => {\n  const generatedId = createUniqueId();\n  const controlId = id ?? `k2b-field-${generatedId}`;\n\n  return {\n    controlId,\n    labelId: `${controlId}-label`,\n    descriptionId: `${controlId}-description`,\n    errorId: `${controlId}-error`,\n  };\n};\n\ntype FieldLayoutProps = {\n  children: JSX.Element;\n  meta: FieldMeta;\n  fill?: boolean;\n  /** Composite controls use aria-labelledby instead of an HTML label target. */\n  labelFor?: string | false;\n} & Pick<FieldProps, \"class\" | \"description\" | \"error\" | \"label\" | \"required\" | \"disabled\">;\n\nexport function Field(props: FieldLayoutProps): JSX.Element {\n  const error = () => resolveMaybeAccessor(props.error);\n\n  return (\n    <div\n      class={`k2b-field ${props.class ?? \"\"}`}\n      data-disabled={props.disabled ? \"true\" : undefined}\n      data-fill={props.fill ? \"true\" : undefined}\n      data-invalid={error() ? \"true\" : undefined}\n    >\n      <Show when={props.label}>\n        <Show\n          when={props.labelFor !== false}\n          fallback={\n            <span id={props.meta.labelId} class=\"k2b-field__label\">\n              {props.label}\n              <Show when={props.required}>\n                <span class=\"k2b-field__required\" aria-hidden=\"true\">\n                  *\n                </span>\n              </Show>\n            </span>\n          }\n        >\n          <label id={props.meta.labelId} class=\"k2b-field__label\" for={props.labelFor || props.meta.controlId}>\n            {props.label}\n            <Show when={props.required}>\n              <span class=\"k2b-field__required\" aria-hidden=\"true\">\n                *\n              </span>\n            </Show>\n          </label>\n        </Show>\n      </Show>\n      <Show when={props.description}>\n        <p class=\"k2b-field__description\" id={props.meta.descriptionId}>\n          {props.description}\n        </p>\n      </Show>\n      {props.children}\n      <Show when={error()}>\n        <p class=\"k2b-field__error\" id={props.meta.errorId} role=\"alert\" aria-live=\"polite\">\n          {error()}\n        </p>\n      </Show>\n    </div>\n  );\n}\n\ntype FieldAriaOwner = Pick<FieldProps, \"aria-describedby\" | \"aria-label\" | \"description\" | \"error\" | \"label\" | \"required\">;\n\nexport const fieldDescribedBy = (meta: FieldMeta, owner: FieldAriaOwner): string | undefined =>\n  [\n    owner[\"aria-describedby\"],\n    owner.description ? meta.descriptionId : undefined,\n    resolveMaybeAccessor(owner.error) ? meta.errorId : undefined,\n  ]\n    .filter(Boolean)\n    .join(\" \") || undefined;\n\nexport const fieldControlAria = (meta: FieldMeta, owner: FieldAriaOwner) => ({\n  get \"aria-label\"() {\n    return owner.label ? undefined : owner[\"aria-label\"];\n  },\n  get \"aria-labelledby\"() {\n    return owner.label ? meta.labelId : undefined;\n  },\n  get \"aria-describedby\"() {\n    return fieldDescribedBy(meta, owner);\n  },\n  get \"aria-invalid\"() {\n    return resolveMaybeAccessor(owner.error) ? (\"true\" as const) : undefined;\n  },\n  get \"aria-required\"() {\n    return owner.required || undefined;\n  },\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-required"],"sources":["internal/field.tsx"],"sourcesContent":["import { createUniqueId, type JSX, Show } from \"solid-js\";\nimport type { FieldProps } from \"../inputs/field-contract\";\nimport { resolveMaybeAccessor } from \"../inputs/field-contract\";\n\nexport type FieldMeta = {\n  controlId: string;\n  labelId: string;\n  descriptionId: string;\n  errorId: string;\n};\n\nexport const createFieldMeta = (id?: string): FieldMeta => {\n  const generatedId = createUniqueId();\n  const controlId = id ?? `k2b-field-${generatedId}`;\n\n  return {\n    controlId,\n    labelId: `${controlId}-label`,\n    descriptionId: `${controlId}-description`,\n    errorId: `${controlId}-error`,\n  };\n};\n\ntype FieldLayoutProps = {\n  children: JSX.Element;\n  meta: FieldMeta;\n  fill?: boolean;\n  /** Composite controls use aria-labelledby instead of an HTML label target. */\n  labelFor?: string | false;\n  /** Optional controls beside the label, outside its clickable target. */\n  labelEnd?: JSX.Element;\n} & Pick<FieldProps, \"class\" | \"description\" | \"error\" | \"label\" | \"required\" | \"disabled\">;\n\nexport function Field(props: FieldLayoutProps): JSX.Element {\n  const error = () => resolveMaybeAccessor(props.error);\n  const label = () => (\n    <Show\n      when={props.labelFor !== false}\n      fallback={\n        <span id={props.meta.labelId} class=\"k2b-field__label\">\n          {props.label}\n          <Show when={props.required}>\n            <span class=\"k2b-field__required\" aria-hidden=\"true\">\n              *\n            </span>\n          </Show>\n        </span>\n      }\n    >\n      <label id={props.meta.labelId} class=\"k2b-field__label\" for={props.labelFor || props.meta.controlId}>\n        {props.label}\n        <Show when={props.required}>\n          <span class=\"k2b-field__required\" aria-hidden=\"true\">\n            *\n          </span>\n        </Show>\n      </label>\n    </Show>\n  );\n\n  return (\n    <div\n      class={`k2b-field ${props.class ?? \"\"}`}\n      data-disabled={props.disabled ? \"true\" : undefined}\n      data-fill={props.fill ? \"true\" : undefined}\n      data-invalid={error() ? \"true\" : undefined}\n    >\n      <Show when={props.label}>\n        <Show when={props.labelEnd} fallback={label()}>\n          <div class=\"k2b-field__label-row\">\n            {label()}\n            {props.labelEnd}\n          </div>\n        </Show>\n      </Show>\n      <Show when={props.description}>\n        <p class=\"k2b-field__description\" id={props.meta.descriptionId}>\n          {props.description}\n        </p>\n      </Show>\n      {props.children}\n      <Show when={error()}>\n        <p class=\"k2b-field__error\" id={props.meta.errorId} role=\"alert\" aria-live=\"polite\">\n          {error()}\n        </p>\n      </Show>\n    </div>\n  );\n}\n\ntype FieldAriaOwner = Pick<FieldProps, \"aria-describedby\" | \"aria-label\" | \"description\" | \"error\" | \"label\" | \"required\">;\n\nexport const fieldDescribedBy = (meta: FieldMeta, owner: FieldAriaOwner): string | undefined =>\n  [\n    owner[\"aria-describedby\"],\n    owner.description ? meta.descriptionId : undefined,\n    resolveMaybeAccessor(owner.error) ? meta.errorId : undefined,\n  ]\n    .filter(Boolean)\n    .join(\" \") || undefined;\n\nexport const fieldControlAria = (meta: FieldMeta, owner: FieldAriaOwner) => ({\n  get \"aria-label\"() {\n    return owner.label ? undefined : owner[\"aria-label\"];\n  },\n  get \"aria-labelledby\"() {\n    return owner.label ? meta.labelId : undefined;\n  },\n  get \"aria-describedby\"() {\n    return fieldDescribedBy(meta, owner);\n  },\n  get \"aria-invalid\"() {\n    return resolveMaybeAccessor(owner.error) ? (\"true\" as const) : undefined;\n  },\n  get \"aria-required\"() {\n    return owner.required || undefined;\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/layout/AppWorkspace.js

@@ -2833,6 +2833,10 @@ const AppWorkspace = props => {
     setSidebarId,
     initialLayoutState
   };
+  // Read once in the untracked component body and written once: the controller owns the sizes after the first
+  // frame. In the root's effect, every rerun (a class that follows the view) rewrote the inline style and showed
+  // the restored widths for a frame.
+  const restoredStyle = appWorkspaceLayoutStyle(initialLayoutState());
 
   // The resize handles are inert markup until the controller is attached, so
   // the workspace attaches it itself and scopes it to this root. `onMount`
@@ -2877,28 +2881,26 @@ const AppWorkspace = props => {
           var _el$154 = _$getNextElement(_tmpl$59);
           var _ref$9 = root;
           typeof _ref$9 === "function" ? _$use(_ref$9, _el$154) : root = _el$154;
+          _$style(_el$154, restoredStyle);
           _$insert(_el$154, contents);
           _$effect(_p$ => {
             var _v$88 = `k2b-app-workspace ${props.class ?? ""}`,
               _v$89 = props.mobileSurface,
               _v$90 = props.flat ? "true" : undefined,
               _v$91 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
-              _v$92 = props.resizable === false ? "false" : "true",
-              _v$93 = appWorkspaceLayoutStyle(initialLayoutState());
+              _v$92 = props.resizable === false ? "false" : "true";
             _v$88 !== _p$.e && _$className(_el$154, _p$.e = _v$88);
             _v$89 !== _p$.t && _$setAttribute(_el$154, "data-mobile-surface", _p$.t = _v$89);
             _v$90 !== _p$.a && _$setAttribute(_el$154, "data-flat", _p$.a = _v$90);
             _v$91 !== _p$.o && _$setAttribute(_el$154, "data-sidebar-collapsed", _p$.o = _v$91);
             _v$92 !== _p$.i && _$setAttribute(_el$154, "data-workspace-resizable", _p$.i = _v$92);
-            _p$.n = _$style(_el$154, _v$93, _p$.n);
             return _p$;
           }, {
             e: undefined,
             t: undefined,
             a: undefined,
             o: undefined,
-            i: undefined,
-            n: undefined
+            i: undefined
           });
           return _el$154;
         }