@k2b/ui 0.51.0 → 0.52.0

package/dist/ssr/inputs/markdown/MarkdownSelectionToolbar.js

@@ -0,0 +1,293 @@
+import { ssr as _$ssr } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = ["<div style=\"", "\">", "", "", "", "", "", "", "", "</div>"];
+import { i18n } from "@k2b/stdlib";
+import { batch, createEffect, createMemo, createSignal, onCleanup, onMount, Show } from "solid-js";
+import { SelectionToolbar } from "../../actions/SelectionToolbar";
+import { Toolbar } from "../../actions/Toolbar";
+import { useLocale } from "../../intl/locale";
+import { insertLink, toggleBold, toggleBulletList, toggleCode, toggleItalic, toggleNumberedList, toggleQuote } from "./actions";
+import { computeActiveFormats } from "./active-formats";
+const selectionMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      bold: "Bold",
+      italic: "Italic",
+      inlineCode: "Inline code",
+      link: "Link",
+      bulletList: "Bullet list",
+      numberedList: "Numbered list",
+      quote: "Quote",
+      selectionFormatting: "Format selection"
+    },
+    de: {
+      bold: "Fett",
+      italic: "Kursiv",
+      inlineCode: "Inline-Code",
+      link: "Link",
+      bulletList: "Aufzählung",
+      numberedList: "Nummerierte Liste",
+      quote: "Zitat",
+      selectionFormatting: "Auswahl formatieren"
+    }
+  }
+});
+export const checkSelectionMessages = () => selectionMessages.check();
+
+/**
+ * The box of a text range's first line in the editor's mirrored presentation layer, or nothing when that line is
+ * scrolled out of the surface. The layer holds the same text as the textarea, so its text nodes map offsets to places.
+ */
+export const textRangeBox = (layer, surface, start, end) => {
+  const walker = document.createTreeWalker(layer, 4 /* NodeFilter.SHOW_TEXT */);
+  let offset = 0;
+  let from;
+  let to;
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const length = node.textContent?.length ?? 0;
+    if (!from && start <= offset + length) from = [node, start - offset];
+    if (end <= offset + length) {
+      to = [node, end - offset];
+      break;
+    }
+    offset += length;
+  }
+  if (!from || !to) return null;
+  const range = document.createRange();
+  range.setStart(...from);
+  range.setEnd(...to);
+  const rects = Array.from(range.getClientRects()).filter(rect => rect.width > 0 || rect.height > 0);
+  const first = rects[0];
+  if (!first) return null;
+  const line = rects.filter(rect => Math.abs(rect.top - first.top) < 4);
+  const multiline = line.length < rects.length;
+  const right = multiline ? layer.getBoundingClientRect().right : Math.max(...line.map(rect => rect.right));
+  const visible = surface.getBoundingClientRect();
+  if (first.bottom <= visible.top || first.top >= visible.bottom) return null;
+  return new DOMRect(first.left, first.top, Math.max(1, right - first.left), first.height);
+};
+/**
+ * A small formatting toolbar that floats above selected text in a `MarkdownEditor`: bold, italic, code, link, lists, and
+ * quote. Place it beside an editor with `noToolbar` and pass the editor's textarea. It appears once the pointer lets go
+ * of a selection and closes on Escape, a collapsed selection, or when the focus leaves both text and toolbar. Touch
+ * devices keep their own selection menu, so nothing of it renders there; the keyboard shortcuts work everywhere. It
+ * listens to the textarea itself, so editors without it carry none of its code.
+ */
+export function MarkdownSelectionToolbar(props) {
+  return _$createComponent(Show, {
+    get when() {
+      return props.textarea;
+    },
+    children: textarea => _$createComponent(SelectionFormatting, {
+      get textarea() {
+        return textarea();
+      }
+    })
+  });
+}
+function SelectionFormatting(props) {
+  const locale = useLocale();
+  const messages = () => selectionMessages.resolve([locale()]).t;
+  const textarea = props.textarea;
+  // The editor's surface and its presentation layer: the same text as the textarea, laid out the same way.
+  const surface = textarea.parentElement ?? textarea;
+  const layer = surface.querySelector(".k2b-markdown-editor__preview") ?? surface;
+  const [revision, setRevision] = createSignal(0);
+  const bump = () => setRevision(value => value + 1);
+  const [finePointer, setFinePointer] = createSignal(false);
+  const [dragging, setDragging] = createSignal(false);
+  const [textFocused, setTextFocused] = createSignal(document.activeElement === textarea);
+  const [toolbarFocused, setToolbarFocused] = createSignal(false);
+  const [dismissed, setDismissed] = createSignal();
+  let root;
+  const selectionKey = () => `${textarea.selectionStart}:${textarea.selectionEnd}`;
+  const anchor = () => {
+    revision();
+    if (textarea.disabled || !finePointer() || dragging() || !(textFocused() || toolbarFocused())) return null;
+    if (textarea.selectionStart === textarea.selectionEnd || dismissed() === selectionKey()) return null;
+    return textRangeBox(layer, surface, textarea.selectionStart, textarea.selectionEnd);
+  };
+
+  // Escape closes the toolbar for that one selection: a collapsed selection forgets it, so selecting the same words
+  // again shows it again.
+  createEffect(() => {
+    revision();
+    if (textarea.selectionStart === textarea.selectionEnd) setDismissed(undefined);
+  });
+  onMount(() => {
+    const query = window.matchMedia("(pointer: coarse)");
+    const update = () => setFinePointer(!query.matches);
+    update();
+    const press = () => {
+      setDismissed(undefined);
+      setDragging(true);
+      const release = () => {
+        setDragging(false);
+        document.removeEventListener("pointerup", release, true);
+        document.removeEventListener("pointercancel", release, true);
+      };
+      document.addEventListener("pointerup", release, true);
+      document.addEventListener("pointercancel", release, true);
+    };
+    const key = event => {
+      if (event.key === "Escape") {
+        if (event.defaultPrevented || !anchor()) return;
+        event.preventDefault();
+        setDismissed(selectionKey());
+        return;
+      }
+      // Selection changes can arrive as one event, so the next key that may select again forgets Escape too.
+      if (!["Shift", "Control", "Meta", "Alt"].includes(event.key)) setDismissed(undefined);
+    };
+    const focus = () => setTextFocused(true);
+    const blur = event => batch(() => {
+      // Tab into the toolbar keeps it open: the toolbar takes the focus in the same move.
+      if (event.relatedTarget instanceof Node && root?.contains(event.relatedTarget)) setToolbarFocused(true);
+      setTextFocused(false);
+    });
+    const selection = () => {
+      if (document.activeElement === textarea) bump();
+    };
+    // The presentation layer renders a frame after an edit; the toolbar measures again once it did.
+    const layerElement = layer;
+    const layerObserver = new MutationObserver(bump);
+    layerObserver.observe(layerElement, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    query.addEventListener("change", update);
+    textarea.addEventListener("pointerdown", press);
+    textarea.addEventListener("keydown", key);
+    textarea.addEventListener("focus", focus);
+    textarea.addEventListener("blur", blur);
+    textarea.addEventListener("input", bump);
+    // The toolbar hides while its line is scrolled away and shows again when it returns.
+    textarea.addEventListener("scroll", bump);
+    document.addEventListener("selectionchange", selection);
+    onCleanup(() => {
+      layerObserver.disconnect();
+      query.removeEventListener("change", update);
+      textarea.removeEventListener("pointerdown", press);
+      textarea.removeEventListener("keydown", key);
+      textarea.removeEventListener("focus", focus);
+      textarea.removeEventListener("blur", blur);
+      textarea.removeEventListener("input", bump);
+      textarea.removeEventListener("scroll", bump);
+      document.removeEventListener("selectionchange", selection);
+    });
+  });
+  const run = format => () => format(textarea);
+  const formats = createMemo(() => {
+    revision();
+    return computeActiveFormats(textarea);
+  });
+  const pressed = format => formats().has(format);
+
+  // Touch devices keep their own selection menu: the toolbar is not rendered there at all, so nothing of it mounts
+  // or animates.
+  return _$createComponent(Show, {
+    get when() {
+      return finePointer();
+    },
+    get children() {
+      return _$createComponent(SelectionToolbar, {
+        get label() {
+          return messages().selectionFormatting;
+        },
+        anchor: anchor,
+        onEscape: () => {
+          setDismissed(selectionKey());
+          textarea.focus();
+        },
+        get children() {
+          return _$ssr(_tmpl$, _$ssrStyleProperty("display:", "contents"), _$escape(_$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().bold;
+            },
+            icon: "ti ti-bold",
+            get pressed() {
+              return pressed("bold");
+            },
+            keys: "mod+b",
+            get onClick() {
+              return run(toggleBold);
+            }
+          })), _$escape(_$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().italic;
+            },
+            icon: "ti ti-italic",
+            get pressed() {
+              return pressed("italic");
+            },
+            keys: "mod+i",
+            get onClick() {
+              return run(toggleItalic);
+            }
+          })), _$escape(_$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().inlineCode;
+            },
+            icon: "ti ti-code",
+            get pressed() {
+              return pressed("code");
+            },
+            keys: "mod+e",
+            get onClick() {
+              return run(toggleCode);
+            }
+          })), _$escape(_$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().link;
+            },
+            icon: "ti ti-link",
+            keys: "mod+k",
+            get onClick() {
+              return run(insertLink);
+            }
+          })), _$escape(_$createComponent(Toolbar.Separator, {})), _$escape(_$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().bulletList;
+            },
+            icon: "ti ti-list",
+            get pressed() {
+              return pressed("bullet");
+            },
+            keys: "mod+shift+8",
+            get onClick() {
+              return run(toggleBulletList);
+            }
+          })), _$escape(_$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().numberedList;
+            },
+            icon: "ti ti-list-numbers",
+            get pressed() {
+              return pressed("ordered");
+            },
+            keys: "mod+shift+7",
+            get onClick() {
+              return run(toggleNumberedList);
+            }
+          })), _$escape(_$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().quote;
+            },
+            icon: "ti ti-quote",
+            get pressed() {
+              return pressed("quote");
+            },
+            get onClick() {
+              return run(toggleQuote);
+            }
+          })));
+        }
+      });
+    }
+  });
+}
+//# sourceMappingURL=MarkdownSelectionToolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["inputs/markdown/MarkdownSelectionToolbar.tsx"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { batch, createEffect, createMemo, createSignal, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { SelectionToolbar } from \"../../actions/SelectionToolbar\";\nimport { Toolbar } from \"../../actions/Toolbar\";\nimport { useLocale } from \"../../intl/locale\";\nimport { insertLink, toggleBold, toggleBulletList, toggleCode, toggleItalic, toggleNumberedList, toggleQuote } from \"./actions\";\nimport { computeActiveFormats } from \"./active-formats\";\n\nconst selectionMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      bold: \"Bold\",\n      italic: \"Italic\",\n      inlineCode: \"Inline code\",\n      link: \"Link\",\n      bulletList: \"Bullet list\",\n      numberedList: \"Numbered list\",\n      quote: \"Quote\",\n      selectionFormatting: \"Format selection\",\n    },\n    de: {\n      bold: \"Fett\",\n      italic: \"Kursiv\",\n      inlineCode: \"Inline-Code\",\n      link: \"Link\",\n      bulletList: \"Aufzählung\",\n      numberedList: \"Nummerierte Liste\",\n      quote: \"Zitat\",\n      selectionFormatting: \"Auswahl formatieren\",\n    },\n  },\n});\n\nexport const checkSelectionMessages = () => selectionMessages.check();\n\n/**\n * The box of a text range's first line in the editor's mirrored presentation layer, or nothing when that line is\n * scrolled out of the surface. The layer holds the same text as the textarea, so its text nodes map offsets to places.\n */\nexport const textRangeBox = (layer: HTMLElement, surface: HTMLElement, start: number, end: number): DOMRect | null => {\n  const walker = document.createTreeWalker(layer, 4 /* NodeFilter.SHOW_TEXT */);\n  let offset = 0;\n  let from: [Node, number] | undefined;\n  let to: [Node, number] | undefined;\n  for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n    const length = node.textContent?.length ?? 0;\n    if (!from && start <= offset + length) from = [node, start - offset];\n    if (end <= offset + length) {\n      to = [node, end - offset];\n      break;\n    }\n    offset += length;\n  }\n  if (!from || !to) return null;\n  const range = document.createRange();\n  range.setStart(...from);\n  range.setEnd(...to);\n  const rects = Array.from(range.getClientRects()).filter((rect) => rect.width > 0 || rect.height > 0);\n  const first = rects[0];\n  if (!first) return null;\n  const line = rects.filter((rect) => Math.abs(rect.top - first.top) < 4);\n  const multiline = line.length < rects.length;\n  const right = multiline ? layer.getBoundingClientRect().right : Math.max(...line.map((rect) => rect.right));\n  const visible = surface.getBoundingClientRect();\n  if (first.bottom <= visible.top || first.top >= visible.bottom) return null;\n  return new DOMRect(first.left, first.top, Math.max(1, right - first.left), first.height);\n};\n\nexport type MarkdownSelectionToolbarProps = {\n  /** The editor's textarea, from `MarkdownEditor`'s `textareaRef`. The toolbar attaches once it is there. */\n  textarea: HTMLTextAreaElement | undefined;\n};\n\n/**\n * A small formatting toolbar that floats above selected text in a `MarkdownEditor`: bold, italic, code, link, lists, and\n * quote. Place it beside an editor with `noToolbar` and pass the editor's textarea. It appears once the pointer lets go\n * of a selection and closes on Escape, a collapsed selection, or when the focus leaves both text and toolbar. Touch\n * devices keep their own selection menu, so nothing of it renders there; the keyboard shortcuts work everywhere. It\n * listens to the textarea itself, so editors without it carry none of its code.\n */\nexport function MarkdownSelectionToolbar(props: MarkdownSelectionToolbarProps): JSX.Element {\n  return <Show when={props.textarea}>{(textarea) => <SelectionFormatting textarea={textarea()} />}</Show>;\n}\n\nfunction SelectionFormatting(props: { textarea: HTMLTextAreaElement }): JSX.Element {\n  const locale = useLocale();\n  const messages = () => selectionMessages.resolve([locale()]).t;\n  const textarea = props.textarea;\n  // The editor's surface and its presentation layer: the same text as the textarea, laid out the same way.\n  const surface = textarea.parentElement ?? textarea;\n  const layer = surface.querySelector<HTMLElement>(\".k2b-markdown-editor__preview\") ?? surface;\n  const [revision, setRevision] = createSignal(0);\n  const bump = () => setRevision((value) => value + 1);\n  const [finePointer, setFinePointer] = createSignal(false);\n  const [dragging, setDragging] = createSignal(false);\n  const [textFocused, setTextFocused] = createSignal(document.activeElement === textarea);\n  const [toolbarFocused, setToolbarFocused] = createSignal(false);\n  const [dismissed, setDismissed] = createSignal<string>();\n  let root: HTMLDivElement | undefined;\n\n  const selectionKey = () => `${textarea.selectionStart}:${textarea.selectionEnd}`;\n  const anchor = () => {\n    revision();\n    if (textarea.disabled || !finePointer() || dragging() || !(textFocused() || toolbarFocused())) return null;\n    if (textarea.selectionStart === textarea.selectionEnd || dismissed() === selectionKey()) return null;\n    return textRangeBox(layer, surface, textarea.selectionStart, textarea.selectionEnd);\n  };\n\n  // Escape closes the toolbar for that one selection: a collapsed selection forgets it, so selecting the same words\n  // again shows it again.\n  createEffect(() => {\n    revision();\n    if (textarea.selectionStart === textarea.selectionEnd) setDismissed(undefined);\n  });\n\n  onMount(() => {\n    const query = window.matchMedia(\"(pointer: coarse)\");\n    const update = () => setFinePointer(!query.matches);\n    update();\n    const press = () => {\n      setDismissed(undefined);\n      setDragging(true);\n      const release = () => {\n        setDragging(false);\n        document.removeEventListener(\"pointerup\", release, true);\n        document.removeEventListener(\"pointercancel\", release, true);\n      };\n      document.addEventListener(\"pointerup\", release, true);\n      document.addEventListener(\"pointercancel\", release, true);\n    };\n    const key = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        if (event.defaultPrevented || !anchor()) return;\n        event.preventDefault();\n        setDismissed(selectionKey());\n        return;\n      }\n      // Selection changes can arrive as one event, so the next key that may select again forgets Escape too.\n      if (![\"Shift\", \"Control\", \"Meta\", \"Alt\"].includes(event.key)) setDismissed(undefined);\n    };\n    const focus = () => setTextFocused(true);\n    const blur = (event: FocusEvent) =>\n      batch(() => {\n        // Tab into the toolbar keeps it open: the toolbar takes the focus in the same move.\n        if (event.relatedTarget instanceof Node && root?.contains(event.relatedTarget)) setToolbarFocused(true);\n        setTextFocused(false);\n      });\n    const selection = () => {\n      if (document.activeElement === textarea) bump();\n    };\n    // The presentation layer renders a frame after an edit; the toolbar measures again once it did.\n    const layerElement = layer;\n    const layerObserver = new MutationObserver(bump);\n    layerObserver.observe(layerElement, { childList: true, subtree: true, characterData: true });\n    query.addEventListener(\"change\", update);\n    textarea.addEventListener(\"pointerdown\", press);\n    textarea.addEventListener(\"keydown\", key);\n    textarea.addEventListener(\"focus\", focus);\n    textarea.addEventListener(\"blur\", blur);\n    textarea.addEventListener(\"input\", bump);\n    // The toolbar hides while its line is scrolled away and shows again when it returns.\n    textarea.addEventListener(\"scroll\", bump);\n    document.addEventListener(\"selectionchange\", selection);\n    onCleanup(() => {\n      layerObserver.disconnect();\n      query.removeEventListener(\"change\", update);\n      textarea.removeEventListener(\"pointerdown\", press);\n      textarea.removeEventListener(\"keydown\", key);\n      textarea.removeEventListener(\"focus\", focus);\n      textarea.removeEventListener(\"blur\", blur);\n      textarea.removeEventListener(\"input\", bump);\n      textarea.removeEventListener(\"scroll\", bump);\n      document.removeEventListener(\"selectionchange\", selection);\n    });\n  });\n\n  const run = (format: (textarea: HTMLTextAreaElement) => void) => () => format(textarea);\n  const formats = createMemo(() => {\n    revision();\n    return computeActiveFormats(textarea);\n  });\n  const pressed = (format: string) => formats().has(format);\n\n  // Touch devices keep their own selection menu: the toolbar is not rendered there at all, so nothing of it mounts\n  // or animates.\n  return (\n    <Show when={finePointer()}>\n      <SelectionToolbar\n        label={messages().selectionFormatting}\n        anchor={anchor}\n        onEscape={() => {\n          setDismissed(selectionKey());\n          textarea.focus();\n        }}\n      >\n        <div\n          ref={root}\n          style={{ display: \"contents\" }}\n          onFocusIn={() => setToolbarFocused(true)}\n          onFocusOut={(event) => {\n            if (!(event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))) setToolbarFocused(false);\n          }}\n        >\n          <Toolbar.Action label={messages().bold} icon=\"ti ti-bold\" pressed={pressed(\"bold\")} keys=\"mod+b\" onClick={run(toggleBold)} />\n          <Toolbar.Action\n            label={messages().italic}\n            icon=\"ti ti-italic\"\n            pressed={pressed(\"italic\")}\n            keys=\"mod+i\"\n            onClick={run(toggleItalic)}\n          />\n          <Toolbar.Action\n            label={messages().inlineCode}\n            icon=\"ti ti-code\"\n            pressed={pressed(\"code\")}\n            keys=\"mod+e\"\n            onClick={run(toggleCode)}\n          />\n          <Toolbar.Action label={messages().link} icon=\"ti ti-link\" keys=\"mod+k\" onClick={run(insertLink)} />\n          <Toolbar.Separator />\n          <Toolbar.Action\n            label={messages().bulletList}\n            icon=\"ti ti-list\"\n            pressed={pressed(\"bullet\")}\n            keys=\"mod+shift+8\"\n            onClick={run(toggleBulletList)}\n          />\n          <Toolbar.Action\n            label={messages().numberedList}\n            icon=\"ti ti-list-numbers\"\n            pressed={pressed(\"ordered\")}\n            keys=\"mod+shift+7\"\n            onClick={run(toggleNumberedList)}\n          />\n          <Toolbar.Action label={messages().quote} icon=\"ti ti-quote\" pressed={pressed(\"quote\")} onClick={run(toggleQuote)} />\n        </div>\n      </SelectionToolbar>\n    </Show>\n  );\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()));
         }
       });
     }