@k2b/ui 0.50.0 → 0.52.0

package/dist/ssr/inputs/markdown/SlashCommands.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["inputs/markdown/SlashCommands.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { CommandList, commandListKey, commandOptionId, createCommandNavigator } from \"../../actions/CommandList\";\nimport { dockCommandList, followComposer } from \"../../actions/command-dock\";\nimport { type CommandSource, commandPlace } from \"../../actions/command-items\";\nimport { useCommandMessages } from \"../../actions/command-messages\";\nimport { type Completion, detectQuery, type QueryContext } from \"../completion\";\nimport { isInCodeZone } from \"./code-zone\";\n\nexport type SlashCommandsProps = {\n  /** The editor's textarea, from `MarkdownEditor`'s `textareaRef`. The commands attach once it is there. */\n  textarea: HTMLTextAreaElement | undefined;\n  /** The same entries as `CommandMenu`'s `items`. */\n  items: CommandSource;\n  /**\n   * The composer box the list docks to, such as the frame around the editor and its \"+\" row. Defaults to the editor\n   * itself.\n   */\n  composer?: HTMLElement;\n};\n\n/** Replaces a range of the text the way typing would, so undo keeps working; an empty text deletes. */\nconst replace = (textarea: HTMLTextAreaElement, start: number, end: number, text: string) => {\n  textarea.focus();\n  textarea.setSelectionRange(start, end);\n  if (start === end && text === \"\") return;\n  try {\n    if (document.execCommand?.(text === \"\" ? \"delete\" : \"insertText\", false, text)) return;\n  } catch {\n    // Fall through to the standards-based replacement.\n  }\n  textarea.setRangeText(text, start, end, \"end\");\n  textarea.dispatchEvent(new Event(\"input\", { bubbles: true }));\n};\n\nconst trigger: Completion = { trigger: \"/\", suggest: () => [] };\n\n/**\n * Slash commands for a `MarkdownEditor`: `/` at the start of a line or after a space opens the entries docked above the\n * composer, as wide as it is. Place it beside the editor and pass the editor's textarea. It listens to the textarea itself, so editors without\n * commands carry none of it: native listeners run before the editor's own, and a key it uses is marked handled with\n * `preventDefault`, which the editor respects.\n */\nexport function SlashCommands(props: SlashCommandsProps): JSX.Element {\n  return (\n    <Show when={props.textarea}>\n      {(textarea) => <AttachedCommands textarea={textarea()} items={props.items} composer={props.composer} />}\n    </Show>\n  );\n}\n\nfunction AttachedCommands(props: { textarea: HTMLTextAreaElement; items: CommandSource; composer?: HTMLElement }): JSX.Element {\n  const messages = useCommandMessages();\n  const textarea = props.textarea;\n  const id = `${textarea.id || \"k2b-markdown\"}-commands`;\n  const composer = (): Element => props.composer ?? textarea.closest(\".k2b-markdown-editor\") ?? textarea;\n  const [context, setContext] = createSignal<QueryContext | null>(null);\n  /**\n   * The list as a command left it: the `/query` is gone from the text, but the list stays at its slash while the\n   * command runs or after it failed, until the person types, leaves, or presses Escape.\n   */\n  const [held, setHeld] = createSignal<{ start: number; query: string }>();\n  /** Where Escape closed the commands; they stay closed while the caret stays in that `/query`. */\n  let dismissedAt: number | null = null;\n  /**\n   * How deep the list is. A further list has its own search field: the `/query` leaves the text, the focus moves into\n   * the field, and the composer's text stays as it is while the person searches.\n   */\n  const [depth, setDepth] = createSignal(0);\n  const [search, setSearch] = createSignal(\"\");\n  let searchField: HTMLInputElement | undefined;\n  /** Set while this part moves the focus between the text and the search field itself. */\n  let moving = false;\n  /** Puts the focus back in the text at `at`, where the slash stood. */\n  const focusText = (at: number) => {\n    moving = true;\n    try {\n      textarea.focus();\n      textarea.setSelectionRange(at, at);\n    } finally {\n      moving = false;\n    }\n  };\n  /** Set while this part edits the text itself, so its own edit does not count as the person typing. */\n  let editing = false;\n  let popover: HTMLDivElement | undefined;\n  const edit = (start: number, end: number, text: string) => {\n    editing = true;\n    try {\n      replace(textarea, start, end, text);\n    } finally {\n      editing = false;\n    }\n  };\n  const nav = createCommandNavigator({\n    items: () => props.items,\n    query: () => (depth() > 0 ? search() : (context()?.query ?? held()?.query ?? \"\")),\n    onText: (item) => {\n      // After a command failed, the held list has no `/query` left; a snippet goes where it stood.\n      const current = context();\n      const start = current?.start ?? held()?.start;\n      if (start === undefined) return;\n      close();\n      edit(start, current?.end ?? start, item.text ?? \"\");\n    },\n    beforeRun: () => {\n      const current = context();\n      if (!current) return;\n      // The list stays where it was while the `/query` leaves the text.\n      setHeld({ start: current.start, query: current.query });\n      setContext(null);\n      edit(current.start, current.end, \"\");\n    },\n    // While the `/query` is in the text, the context leaves it out; once a command removed it, the text is as it is.\n    context: () => {\n      const current = context();\n      const start = current?.start ?? held()?.start ?? textarea.selectionStart;\n      const place = commandPlace(textarea.value, start, current?.end ?? start);\n      return {\n        ...place,\n        selection: current ? { start, end: start } : { start: textarea.selectionStart, end: textarea.selectionEnd },\n        insert: (text: string) => edit(textarea.selectionStart, textarea.selectionEnd, text),\n      };\n    },\n    // A finished command leaves the focus in the text where the slash stood; its outcome, if any, shows in the list's place.\n    afterRun: () => {\n      const at = held()?.start;\n      close();\n      if (at !== undefined && document.activeElement !== textarea) focusText(at);\n    },\n    active: () => context() !== null || held() !== undefined,\n    onStep: (next) => {\n      const previous = depth();\n      if (next === 0) {\n        // Back to the first list: the typed `/query` comes back, and the text has the focus again. The list keeps its\n        // place throughout: the context returns before the held state goes, and the focus is in the text before the\n        // search field leaves, since a browser blurs a focused field that is removed, which would close the list.\n        const at = held();\n        if (at) {\n          const text = `/${at.query}`;\n          setContext({ start: at.start, end: at.start + text.length, text, query: at.query, completion: trigger });\n          setHeld(undefined);\n          moving = true;\n          try {\n            edit(at.start, at.start, text);\n          } finally {\n            moving = false;\n          }\n        }\n        setDepth(0);\n        setSearch(\"\");\n        return;\n      }\n      setDepth(next);\n      setSearch(\"\");\n      if (previous === 0) {\n        // Into a further list: the `/query` leaves the text, and the list stays where it was.\n        const current = context();\n        if (current) {\n          setHeld({ start: current.start, query: current.query });\n          setContext(null);\n          edit(current.start, current.end, \"\");\n        }\n      }\n      queueMicrotask(() => {\n        moving = true;\n        try {\n          searchField?.focus({ preventScroll: true });\n        } finally {\n          moving = false;\n        }\n      });\n    },\n  });\n  // Entries on their way, or a list that could not load, show too, so the person sees what happens.\n  const open = createMemo(\n    () =>\n      nav.outcome() !== undefined ||\n      held() !== undefined ||\n      (context() !== null && (nav.step() !== undefined || nav.entries().length > 0 || nav.load().state !== \"ready\")),\n  );\n  const close = () => {\n    setContext(null);\n    setHeld(undefined);\n    setDepth(0);\n    setSearch(\"\");\n    nav.reset();\n  };\n\n  const detect = () => {\n    if (editing) return;\n    // Typing after a command ran or failed moves on: the held list closes, the command keeps running.\n    if (held()) close();\n    const found = document.activeElement === textarea ? detectQuery(textarea, [trigger], { isExcluded: isInCodeZone }) : null;\n    // Commands start at the line start or after a space, never inside `https://` or after a bracket.\n    const usable = found && (found.start === 0 || /\\s/.test(textarea.value[found.start - 1] ?? \"\")) ? found : null;\n    if (usable?.start !== context()?.start) {\n      if (usable?.start !== dismissedAt) dismissedAt = null;\n      close();\n    }\n    if (usable && usable.start !== dismissedAt) {\n      // A new `/` takes the place at once, even from an outcome still in its least time.\n      if (usable.start !== context()?.start) nav.clearOutcome();\n      setContext(usable);\n    }\n  };\n  /** The person typed: an outcome clears once it showed long enough, and a new `/` opens the list. */\n  const typed = () => {\n    if (!editing) nav.typedOn();\n    detect();\n  };\n  /** An outcome's button leaves the focus in the text, where the person goes on writing. */\n  const backToText = () => {\n    if (document.activeElement === textarea) return;\n    moving = true;\n    try {\n      textarea.focus({ preventScroll: true });\n    } finally {\n      moving = false;\n    }\n  };\n\n  const position = () => {\n    if (!popover?.isConnected) return;\n    if (!popover.matches(\":popover-open\")) popover.showPopover?.();\n    dockCommandList(popover, composer());\n  };\n\n  // The textarea points at the list while it shows, as a combobox does.\n  createEffect(() => {\n    const marked = nav.entries()[nav.active()];\n    // In a further list the search field points at it instead.\n    const pointing = open() && depth() === 0 && !nav.outcome();\n    const active = pointing && marked && !marked.disabled ? commandOptionId(id, nav.active()) : undefined;\n    if (pointing) textarea.setAttribute(\"aria-controls\", id);\n    else if (textarea.getAttribute(\"aria-controls\") === id) textarea.removeAttribute(\"aria-controls\");\n    if (active) textarea.setAttribute(\"aria-activedescendant\", active);\n    else if (textarea.getAttribute(\"aria-activedescendant\")?.startsWith(`${id}-`)) textarea.removeAttribute(\"aria-activedescendant\");\n  });\n  // Opening, and entries that arrive while the `/` waits, such as from a reactive source, show the list.\n  createEffect(() => {\n    if (!open()) return;\n    queueMicrotask(position);\n    // The composer grows with its text, and a phone's keyboard moves the visible viewport.\n    onCleanup(followComposer(composer(), position));\n  });\n\n  onMount(() => {\n    const key = (event: KeyboardEvent) => {\n      if (!open() || event.defaultPrevented) return;\n      const current = context();\n      if (event.key === \"Escape\" && !current) {\n        // Escape stops a running command and closes the list it held, or clears an outcome at once.\n        event.preventDefault();\n        nav.abort();\n        nav.clearOutcome();\n        close();\n        return;\n      }\n      // An outcome is no list: other keys are the person writing on.\n      if (!current && nav.outcome()) return;\n      if (commandListKey(nav, event, current?.query ?? \"\")) event.preventDefault();\n      else if (event.key === \"Escape\" && current) {\n        event.preventDefault();\n        dismissedAt = current.start;\n        close();\n      }\n    };\n    const selection = () => {\n      if (document.activeElement === textarea && !held()) detect();\n    };\n    const blur = (event: FocusEvent) => {\n      if (moving || (event.relatedTarget instanceof Node && popover?.contains(event.relatedTarget))) return;\n      close();\n      dismissedAt = null;\n    };\n    textarea.addEventListener(\"keydown\", key);\n    textarea.addEventListener(\"input\", typed);\n    textarea.addEventListener(\"blur\", blur);\n    document.addEventListener(\"selectionchange\", selection);\n    // A `/` typed while this module loaded opens the list now.\n    detect();\n    onCleanup(() => {\n      textarea.removeEventListener(\"keydown\", key);\n      textarea.removeEventListener(\"input\", typed);\n      textarea.removeEventListener(\"blur\", blur);\n      document.removeEventListener(\"selectionchange\", selection);\n      popover?.hidePopover?.();\n    });\n  });\n\n  return (\n    <Show when={open()}>\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: Escape from an outcome's own buttons; the text owns every other key. */}\n      <div\n        ref={popover}\n        popover=\"manual\"\n        class=\"k2b-autocomplete__options\"\n        data-commands=\"\"\n        data-outcome={nav.outcome()?.state}\n        role=\"presentation\"\n        // Escape on an outcome's button clears it, as it does in the text.\n        onKeyDown={(event) => {\n          if (event.key !== \"Escape\" || !nav.outcome() || event.target === searchField) return;\n          event.preventDefault();\n          nav.clearOutcome();\n          backToText();\n        }}\n      >\n        <CommandList\n          onOutcomeAction={backToText}\n          navigator={nav}\n          id={id}\n          label={messages().commands}\n          query={nav.query}\n          header={\n            <Show when={depth() > 0}>\n              <label class=\"k2b-dropdown__search\">\n                <i class=\"ti ti-search\" aria-hidden=\"true\" />\n                <input\n                  ref={searchField}\n                  type=\"search\"\n                  role=\"combobox\"\n                  aria-label={nav.step()?.next?.label}\n                  aria-expanded=\"true\"\n                  aria-controls={id}\n                  aria-autocomplete=\"list\"\n                  aria-activedescendant={\n                    nav.entries()[nav.active()] && !nav.entries()[nav.active()]!.disabled ? commandOptionId(id, nav.active()) : undefined\n                  }\n                  autocomplete=\"off\"\n                  spellcheck={false}\n                  enterkeyhint=\"go\"\n                  placeholder={nav.step()?.next?.label}\n                  value={search()}\n                  // While a command runs, the list waits for it.\n                  readOnly={nav.busy()}\n                  onInput={(event) => setSearch(event.currentTarget.value)}\n                  onKeyDown={(event) => {\n                    if (event.key === \"Escape\" && nav.busy()) {\n                      // Escape stops a running command and closes the list.\n                      event.preventDefault();\n                      const at = held()?.start;\n                      nav.abort();\n                      close();\n                      if (at !== undefined) focusText(at);\n                      return;\n                    }\n                    if (commandListKey(nav, event, search())) event.preventDefault();\n                  }}\n                  onBlur={(event) => {\n                    // Leaving the list, other than to the text by this part itself, closes it. An outcome that took the\n                    // list's place removed this field; the finished command puts the focus back in the text.\n                    if (moving || nav.outcome() || (event.relatedTarget instanceof Node && popover?.contains(event.relatedTarget))) return;\n                    close();\n                  }}\n                />\n              </label>\n            </Show>\n          }\n        />\n      </div>\n    </Show>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/inputs/period-picker-messages.js

@@ -0,0 +1,71 @@
+import { i18n } from "@k2b/stdlib";
+import { useLocale } from "../intl/locale";
+
+/** Labels of the built-in period presets and the picker's own words. */
+const periodPickerMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      period: "Period",
+      choosePeriod: "Choose a period",
+      custom: "Custom range",
+      from: "From",
+      to: "To",
+      backToPresets: "Back to presets",
+      since: ({
+        date
+      }) => `since ${date}`,
+      days: ({
+        count
+      }) => count === 1 ? "1 day" : `${count} days`,
+      today: "Today",
+      yesterday: "Yesterday",
+      "this-week": "This week",
+      "last-week": "Last week",
+      "this-month": "This month",
+      "last-month": "Last month",
+      "this-quarter": "This quarter",
+      "last-quarter": "Last quarter",
+      "this-year": "This year",
+      "last-year": "Last year",
+      all: "All time"
+    },
+    de: {
+      period: "Zeitraum",
+      choosePeriod: "Zeitraum wählen",
+      custom: "Frei wählen",
+      from: "Von",
+      to: "Bis",
+      backToPresets: "Zurück zu den Vorgaben",
+      since: ({
+        date
+      }) => `seit ${date}`,
+      days: ({
+        count
+      }) => count === 1 ? "1 Tag" : `${count} Tage`,
+      today: "Heute",
+      yesterday: "Gestern",
+      "this-week": "Diese Woche",
+      "last-week": "Letzte Woche",
+      "this-month": "Dieser Monat",
+      "last-month": "Letzter Monat",
+      "this-quarter": "Dieses Quartal",
+      "last-quarter": "Letztes Quartal",
+      "this-year": "Dieses Jahr",
+      "last-year": "Letztes Jahr",
+      all: "Gesamt"
+    }
+  }
+});
+const builtInKeys = new Set(["today", "yesterday", "this-week", "last-week", "this-month", "last-month", "this-quarter", "last-quarter", "this-year", "last-year", "all"]);
+/** The translated label of a built-in preset key, if it is one. */
+export const builtInPresetLabel = (t, key) => builtInKeys.has(key) ? t[key] : undefined;
+
+/** Resolved from the inherited render locale. */
+export const usePeriodPickerMessages = () => {
+  const locale = useLocale();
+  return () => periodPickerMessages.resolve([locale()]).t;
+};
+export const resolvePeriodPickerMessages = locale => periodPickerMessages.resolve([locale ?? "en"]).t;
+export const checkPeriodPickerMessages = () => periodPickerMessages.check();
+//# sourceMappingURL=period-picker-messages.js.map

package/dist/ssr/inputs/period-picker-messages.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["inputs/period-picker-messages.ts"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { useLocale } from \"../intl/locale\";\n\n/** Labels of the built-in period presets and the picker's own words. */\nconst periodPickerMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      period: \"Period\",\n      choosePeriod: \"Choose a period\",\n      custom: \"Custom range\",\n      from: \"From\",\n      to: \"To\",\n      backToPresets: \"Back to presets\",\n      since: ({ date }: { date: string }) => `since ${date}`,\n      days: ({ count }: { count: number }) => (count === 1 ? \"1 day\" : `${count} days`),\n      today: \"Today\",\n      yesterday: \"Yesterday\",\n      \"this-week\": \"This week\",\n      \"last-week\": \"Last week\",\n      \"this-month\": \"This month\",\n      \"last-month\": \"Last month\",\n      \"this-quarter\": \"This quarter\",\n      \"last-quarter\": \"Last quarter\",\n      \"this-year\": \"This year\",\n      \"last-year\": \"Last year\",\n      all: \"All time\",\n    },\n    de: {\n      period: \"Zeitraum\",\n      choosePeriod: \"Zeitraum wählen\",\n      custom: \"Frei wählen\",\n      from: \"Von\",\n      to: \"Bis\",\n      backToPresets: \"Zurück zu den Vorgaben\",\n      since: ({ date }) => `seit ${date}`,\n      days: ({ count }) => (count === 1 ? \"1 Tag\" : `${count} Tage`),\n      today: \"Heute\",\n      yesterday: \"Gestern\",\n      \"this-week\": \"Diese Woche\",\n      \"last-week\": \"Letzte Woche\",\n      \"this-month\": \"Dieser Monat\",\n      \"last-month\": \"Letzter Monat\",\n      \"this-quarter\": \"Dieses Quartal\",\n      \"last-quarter\": \"Letztes Quartal\",\n      \"this-year\": \"Dieses Jahr\",\n      \"last-year\": \"Letztes Jahr\",\n      all: \"Gesamt\",\n    },\n  },\n});\n\nexport type PeriodPickerMessages = ReturnType<(typeof periodPickerMessages)[\"resolve\"]>[\"t\"];\n\nconst builtInKeys = new Set([\n  \"today\",\n  \"yesterday\",\n  \"this-week\",\n  \"last-week\",\n  \"this-month\",\n  \"last-month\",\n  \"this-quarter\",\n  \"last-quarter\",\n  \"this-year\",\n  \"last-year\",\n  \"all\",\n] as const);\ntype BuiltInKey = typeof builtInKeys extends Set<infer K> ? K : never;\n\n/** The translated label of a built-in preset key, if it is one. */\nexport const builtInPresetLabel = (t: PeriodPickerMessages, key: string): string | undefined =>\n  builtInKeys.has(key as BuiltInKey) ? t[key as BuiltInKey] : undefined;\n\n/** Resolved from the inherited render locale. */\nexport const usePeriodPickerMessages = (): (() => PeriodPickerMessages) => {\n  const locale = useLocale();\n  return () => periodPickerMessages.resolve([locale()]).t;\n};\n\nexport const resolvePeriodPickerMessages = (locale?: string): PeriodPickerMessages => periodPickerMessages.resolve([locale ?? \"en\"]).t;\n\nexport const checkPeriodPickerMessages = () => periodPickerMessages.check();\n"],"mappings":"AAAA,SAAS,IAAI,QAAQ,aAAa;AAClC,SAAS,SAAS,QAAQ,gBAAgB;;AAE1C;AACA,MAAM,oBAAoB,GAAG,IAAI,CAAC,MAAM,CAAC;EACvC,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE;IACR,EAAE,EAAE;MACF,MAAM,EAAE,QAAQ;MAChB,YAAY,EAAE,iBAAiB;MAC/B,MAAM,EAAE,cAAc;MACtB,IAAI,EAAE,MAAM;MACZ,EAAE,EAAE,IAAI;MACR,aAAa,EAAE,iBAAiB;MAChC,KAAK,EAAE,CAAC;QAAE;MAAuB,CAAC,KAAK,SAAS,IAAI,EAAE;MACtD,IAAI,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAM,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,GAAG,KAAK,OAAQ;MACjF,KAAK,EAAE,OAAO;MACd,SAAS,EAAE,WAAW;MACtB,WAAW,EAAE,WAAW;MACxB,WAAW,EAAE,WAAW;MACxB,YAAY,EAAE,YAAY;MAC1B,YAAY,EAAE,YAAY;MAC1B,cAAc,EAAE,cAAc;MAC9B,cAAc,EAAE,cAAc;MAC9B,WAAW,EAAE,WAAW;MACxB,WAAW,EAAE,WAAW;MACxB,GAAG,EAAE;IACP,CAAC;IACD,EAAE,EAAE;MACF,MAAM,EAAE,UAAU;MAClB,YAAY,EAAE,iBAAiB;MAC/B,MAAM,EAAE,aAAa;MACrB,IAAI,EAAE,KAAK;MACX,EAAE,EAAE,KAAK;MACT,aAAa,EAAE,wBAAwB;MACvC,KAAK,EAAE,CAAC;QAAE;MAAK,CAAC,KAAK,QAAQ,IAAI,EAAE;MACnC,IAAI,EAAE,CAAC;QAAE;MAAM,CAAC,KAAM,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,GAAG,KAAK,OAAQ;MAC9D,KAAK,EAAE,OAAO;MACd,SAAS,EAAE,SAAS;MACpB,WAAW,EAAE,aAAa;MAC1B,WAAW,EAAE,cAAc;MAC3B,YAAY,EAAE,cAAc;MAC5B,YAAY,EAAE,eAAe;MAC7B,cAAc,EAAE,gBAAgB;MAChC,cAAc,EAAE,iBAAiB;MACjC,WAAW,EAAE,aAAa;MAC1B,WAAW,EAAE,cAAc;MAC3B,GAAG,EAAE;IACP;EACF;AACF,CAAC,CAAC;AAIF,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,CAC1B,OAAO,EACP,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,cAAc,EACd,WAAW,EACX,WAAW,EACX,KAAK,CACG,CAAC;AAGX;AACA,OAAO,MAAM,kBAAkB,GAAG,CAAC,CAAuB,EAAE,GAAW,KACrE,WAAW,CAAC,GAAG,CAAC,GAAiB,CAAC,GAAG,CAAC,CAAC,GAAG,CAAe,GAAG,SAAS;;AAEvE;AACA,OAAO,MAAM,uBAAuB,GAAG,MAAoC;EACzE,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,OAAO,MAAM,oBAAoB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzD,CAAC;AAED,OAAO,MAAM,2BAA2B,GAAI,MAAe,IAA2B,oBAAoB,CAAC,OAAO,CAAC,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC;AAEtI,OAAO,MAAM,yBAAyB,GAAG,MAAM,oBAAoB,CAAC,KAAK,CAAC,CAAC","ignoreList":[]}

package/dist/ssr/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/ssr/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/ssr/internal/field.js

@@ -4,10 +4,11 @@ import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = "<span class=\"k2b-field__required\" aria-hidden=\"true\">*</span>",
   _tmpl$2 = ["<label", " class=\"k2b-field__label\"", ">", "", "</label>"],
-  _tmpl$3 = ["<p class=\"k2b-field__description\"", ">", "</p>"],
-  _tmpl$4 = ["<p class=\"k2b-field__error\"", " role=\"alert\" aria-live=\"polite\">", "</p>"],
-  _tmpl$5 = ["<div class=\"", "\"", ">", "", "", "", "</div>"],
-  _tmpl$6 = ["<span", " class=\"k2b-field__label\">", "", "</span>"];
+  _tmpl$3 = ["<span", " class=\"k2b-field__label\">", "", "</span>"],
+  _tmpl$4 = ["<div class=\"k2b-field__label-row\">", "", "</div>"],
+  _tmpl$5 = ["<p class=\"k2b-field__description\"", ">", "</p>"],
+  _tmpl$6 = ["<p class=\"k2b-field__error\"", " role=\"alert\" aria-live=\"polite\">", "</p>"],
+  _tmpl$7 = ["<div class=\"", "\"", ">", "", "", "", "</div>"];
 import { createUniqueId, Show } from "solid-js";
 import { resolveMaybeAccessor } from "../inputs/field-contract";
 export const createFieldMeta = id => {
@@ -22,34 +23,45 @@ export const createFieldMeta = id => {
 };
 export function Field(props) {
   const error = () => resolveMaybeAccessor(props.error);
-  return _$ssr(_tmpl$5, `k2b-field ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-disabled", props.disabled ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-invalid", error() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+  const label = () => _$createComponent(Show, {
+    get when() {
+      return props.labelFor !== false;
+    },
+    get fallback() {
+      return _$ssr(_tmpl$3, _$ssrAttribute("id", _$escape(props.meta.labelId, true), false), _$escape(props.label), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.required;
+        },
+        get children() {
+          return _$ssr(_tmpl$);
+        }
+      })));
+    },
+    get children() {
+      return _$ssr(_tmpl$2, _$ssrAttribute("id", _$escape(props.meta.labelId, true), false), _$ssrAttribute("for", _$escape(props.labelFor || props.meta.controlId, true), false), _$escape(props.label), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.required;
+        },
+        get children() {
+          return _$ssr(_tmpl$);
+        }
+      })));
+    }
+  });
+  return _$ssr(_tmpl$7, `k2b-field ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-disabled", props.disabled ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-invalid", error() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return props.label;
     },
     get children() {
       return _$createComponent(Show, {
         get when() {
-          return props.labelFor !== false;
+          return props.labelEnd;
         },
         get fallback() {
-          return _$ssr(_tmpl$6, _$ssrAttribute("id", _$escape(props.meta.labelId, true), false), _$escape(props.label), _$escape(_$createComponent(Show, {
-            get when() {
-              return props.required;
-            },
-            get children() {
-              return _$ssr(_tmpl$);
-            }
-          })));
+          return label();
         },
         get children() {
-          return _$ssr(_tmpl$2, _$ssrAttribute("id", _$escape(props.meta.labelId, true), false), _$ssrAttribute("for", _$escape(props.labelFor || props.meta.controlId, true), false), _$escape(props.label), _$escape(_$createComponent(Show, {
-            get when() {
-              return props.required;
-            },
-            get children() {
-              return _$ssr(_tmpl$);
-            }
-          })));
+          return _$ssr(_tmpl$4, _$escape(label()), _$escape(props.labelEnd));
         }
       });
     }
@@ -58,14 +70,14 @@ export function Field(props) {
       return props.description;
     },
     get children() {
-      return _$ssr(_tmpl$3, _$ssrAttribute("id", _$escape(props.meta.descriptionId, true), false), _$escape(props.description));
+      return _$ssr(_tmpl$5, _$ssrAttribute("id", _$escape(props.meta.descriptionId, true), false), _$escape(props.description));
     }
   })), _$escape(props.children), _$escape(_$createComponent(Show, {
     get when() {
       return error();
     },
     get children() {
-      return _$ssr(_tmpl$4, _$ssrAttribute("id", _$escape(props.meta.errorId, true), false), _$escape(error()));
+      return _$ssr(_tmpl$6, _$ssrAttribute("id", _$escape(props.meta.errorId, true), false), _$escape(error()));
     }
   })));
 }

package/dist/ssr/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/ssr/layout/AppWorkspace.js

@@ -2064,6 +2064,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`
@@ -2105,7 +2109,7 @@ const AppWorkspace = props => {
       return _$createComponent(WorkspaceContext.Provider, {
         value: workspace,
         get children() {
-          return _$ssr(_tmpl$53, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-flat", props.flat ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(appWorkspaceLayoutStyle(initialLayoutState())), _$escape(contents()));
+          return _$ssr(_tmpl$53, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-flat", props.flat ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(restoredStyle), _$escape(contents()));
         }
       });
     }