@smwb/ui-solid 0.1.0 → 0.1.1

package/README.md

@@ -11,14 +11,16 @@ and `@smwb/ui-styles` source.
 
 | Package | What it is |
 | --- | --- |
-| **`@smwb/ui-solid`** | This package — SolidJS components. |
-| `@smwb/ui-react` | React version, same design system. |
-| `@smwb/ui-styles` | Framework-agnostic LESS source + design tokens. |
-| `@smwb/ui-css` | Prebuilt aggregate stylesheet (`import "@smwb/ui-css"`). |
-| `@smwb/ui-mcp-solid` | MCP server exposing this catalog to AI tools. |
+| [**`@smwb/ui-solid`**](https://www.npmjs.com/package/@smwb/ui-solid) | This package — SolidJS components. |
+| [`@smwb/ui-react`](https://www.npmjs.com/package/@smwb/ui-react) | React version, same design system. |
+| [`@smwb/ui-styles`](https://www.npmjs.com/package/@smwb/ui-styles) | Framework-agnostic LESS source + design tokens. |
+| [`@smwb/ui-css`](https://www.npmjs.com/package/@smwb/ui-css) | Prebuilt aggregate stylesheet (`import "@smwb/ui-css"`). |
+| [`@smwb/ui-mcp-solid`](https://www.npmjs.com/package/@smwb/ui-mcp-solid) | MCP server exposing this catalog to AI tools. |
 
 ## Component catalog
 
+- **Storybook (production):** https://summerweb.ru/ui-solid/
+- **Storybook (dev):** https://summerweb.ru/ui-dev-solid/
 - **Local Storybook:** `npm run storybook` → http://localhost:6006
 
 ## Installation

package/dist/components/layout/screenDivider/screenDivider.js

@@ -1,66 +1,57 @@
-import { isServer as X, use as Y, insert as L, setAttribute as c, effect as F, className as v, style as $, template as N, delegateEvents as O } from "solid-js/web";
+import { isServer as F, use as H, insert as $, setAttribute as v, effect as N, className as m, style as L, template as O, delegateEvents as U } from "solid-js/web";
 import '../../../assets/styles/less/components/screenDivider/screenDivider.entry.css';/* empty css                                                                     */
-import { mergeProps as T, splitProps as U, createSignal as x, createEffect as f, children as j, onCleanup as q } from "solid-js";
-import m from "clsx";
-import { throttle as B } from "../../../utils/throttle.js";
-import { mergeRefs as G } from "../../../primitives/mergeRefs.js";
-var J = /* @__PURE__ */ N("<div data-testid=screen-divider><div></div><span class=smwb-screen-divider__resizer role=separator aria-valuemin=0 aria-valuemax=100 tabindex=0></span><div>");
-const C = (a, d) => d * (a / 100), _ = (a, d) => !a && d ? 100 - d : a || 50;
-function te(a) {
-  const d = T({
+import { mergeProps as X, splitProps as Y, createSignal as x, createEffect as f, children as j, onCleanup as q } from "solid-js";
+import u from "clsx";
+import { throttle as G } from "../../../utils/throttle.js";
+import { mergeRefs as J } from "../../../primitives/mergeRefs.js";
+var Q = /* @__PURE__ */ O("<div data-testid=screen-divider><div></div><span class=smwb-screen-divider__resizer role=separator aria-valuemin=0 aria-valuemax=100 tabindex=0></span><div>");
+const C = (d, l) => !d && l ? 100 - l : d || 50;
+function te(d) {
+  const l = X({
     orientation: "horizontal",
     keyboardStep: 5,
     resizerAriaLabel: "Resize panels"
-  }, a), [e] = U(d, ["class", "orientation", "sizeFirst", "sizeSecond", "children", "onSizeChange", "keyboardStep", "resizerAriaLabel", "ref"]);
-  let u;
-  const [l, s] = x(_(e.sizeFirst, e.sizeSecond)), [h, b] = x(!1);
+  }, d), [e] = Y(l, ["class", "orientation", "sizeFirst", "sizeSecond", "children", "onSizeChange", "keyboardStep", "resizerAriaLabel", "ref"]);
+  let h;
+  const [a, s] = x(C(e.sizeFirst, e.sizeSecond)), [g, p] = x(!1);
   f(() => {
-    s(_(e.sizeFirst, e.sizeSecond));
+    s(C(e.sizeFirst, e.sizeSecond));
   }), f(() => {
-    e.onSizeChange?.(l());
+    e.onSizeChange?.(a());
   });
-  const M = j(() => e.children), p = () => M.toArray(), y = B((t) => {
-    if (!h()) return;
-    const n = u;
-    if (n)
-      if (e.orientation === "vertical") {
-        let r = t.clientY - n.offsetTop;
-        r < 0 && (r = 0);
-        const o = r / n.clientHeight * 100;
-        C(o, n.clientWidth) > 5 && o < 101 && s(o - 7);
-      } else {
-        let r = t.clientX - n.offsetLeft;
-        r < 0 && (r = 0);
-        const o = r / n.clientWidth * 100;
-        C(o, n.clientWidth) > 5 && o < 101 && s(o);
-      }
-  }, 1e3 / 60), R = () => {
-    b(!0);
-  }, g = () => {
-    b(!1);
+  const _ = j(() => e.children), b = () => _.toArray(), y = G((t) => {
+    if (!g()) return;
+    const n = h;
+    if (!n) return;
+    const i = n.getBoundingClientRect(), o = e.orientation === "vertical" ? i.height : i.width, c = e.orientation === "vertical" ? t.clientY - i.top : t.clientX - i.left, r = Math.max(5, Math.min(o - 5, c));
+    s(r / o * 100);
+  }, 1e3 / 60), M = () => {
+    p(!0);
+  }, w = () => {
+    p(!1);
   };
   f(() => {
-    X || (h() ? (document.body.addEventListener("pointerup", g), document.body.addEventListener("pointermove", y), document.body.style.cursor = e.orientation === "horizontal" ? "e-resize" : "n-resize") : document.body.style.cursor = "default", q(() => {
-      document.body.removeEventListener("pointerup", g), document.body.removeEventListener("pointermove", y);
+    F || (g() ? (document.body.addEventListener("pointerup", w), document.body.addEventListener("pointermove", y), document.body.style.cursor = e.orientation === "horizontal" ? "e-resize" : "n-resize") : document.body.style.cursor = "default", q(() => {
+      document.body.removeEventListener("pointerup", w), document.body.removeEventListener("pointermove", y);
     }));
   });
-  const K = (t) => {
-    const n = e.orientation === "vertical" ? "ArrowUp" : "ArrowLeft", r = e.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
-    t.key === n ? (t.preventDefault(), s((o) => Math.max(0, o - e.keyboardStep))) : t.key === r ? (t.preventDefault(), s((o) => Math.min(100, o + e.keyboardStep))) : t.key === "Home" ? (t.preventDefault(), s(0)) : t.key === "End" && (t.preventDefault(), s(100));
-  }, P = () => e.orientation === "vertical" ? {
-    height: `${l()}%`
+  const R = (t) => {
+    const n = e.orientation === "vertical" ? "ArrowUp" : "ArrowLeft", i = e.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+    t.key === n ? (t.preventDefault(), s((o) => Math.max(0, o - e.keyboardStep))) : t.key === i ? (t.preventDefault(), s((o) => Math.min(100, o + e.keyboardStep))) : t.key === "Home" ? (t.preventDefault(), s(0)) : t.key === "End" && (t.preventDefault(), s(100));
+  }, K = () => e.orientation === "vertical" ? {
+    height: `${a()}%`
   } : {
-    width: `${l()}%`
-  }, W = () => e.orientation === "vertical" ? {
-    height: `${100 - l()}%`
+    width: `${a()}%`
+  }, I = () => e.orientation === "vertical" ? {
+    height: `${100 - a()}%`
   } : {
-    width: `${100 - l()}%`
+    width: `${100 - a()}%`
   };
   return (() => {
-    var t = J(), n = t.firstChild, r = n.nextSibling, o = r.nextSibling, w = G(e.ref, (i) => u = i);
-    return typeof w == "function" && Y(w, t), L(n, () => p()[0] ?? ""), r.$$keydown = K, r.$$pointerdown = R, c(r, "draggable", !1), L(o, () => p()[1] ?? ""), F((i) => {
-      var z = m("smwb-screen-divider__wrapper", `smwb-${e.orientation}`, e.class), S = m("smwb-screen-divider__first", `smwb-${e.orientation}`), H = P(), D = e.orientation === "vertical" ? "horizontal" : "vertical", k = Math.round(l()), A = e.resizerAriaLabel, E = m("smwb-screen-divider__second", `smwb-${e.orientation}`), I = W();
-      return z !== i.e && v(t, i.e = z), S !== i.t && v(n, i.t = S), i.a = $(n, H, i.a), D !== i.o && c(r, "aria-orientation", i.o = D), k !== i.i && c(r, "aria-valuenow", i.i = k), A !== i.n && c(r, "aria-label", i.n = A), E !== i.s && v(o, i.s = E), i.h = $(o, I, i.h), i;
+    var t = Q(), n = t.firstChild, i = n.nextSibling, o = i.nextSibling, c = J(e.ref, (r) => h = r);
+    return typeof c == "function" && H(c, t), $(n, () => b()[0] ?? ""), i.$$keydown = R, i.$$pointerdown = M, v(i, "draggable", !1), $(o, () => b()[1] ?? ""), N((r) => {
+      var z = u("smwb-screen-divider__wrapper", `smwb-${e.orientation}`, e.class), S = u("smwb-screen-divider__first", `smwb-${e.orientation}`), P = K(), D = e.orientation === "vertical" ? "horizontal" : "vertical", k = Math.round(a()), A = e.resizerAriaLabel, E = u("smwb-screen-divider__second", `smwb-${e.orientation}`), B = I();
+      return z !== r.e && m(t, r.e = z), S !== r.t && m(n, r.t = S), r.a = L(n, P, r.a), D !== r.o && v(i, "aria-orientation", r.o = D), k !== r.i && v(i, "aria-valuenow", r.i = k), A !== r.n && v(i, "aria-label", r.n = A), E !== r.s && m(o, r.s = E), r.h = L(o, B, r.h), r;
     }, {
       e: void 0,
       t: void 0,
@@ -73,7 +64,7 @@ function te(a) {
     }), t;
   })();
 }
-O(["pointerdown", "keydown"]);
+U(["pointerdown", "keydown"]);
 export {
   te as ScreenDivider
 };

package/dist/components/layout/screenDivider/screenDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"screenDivider.js","sources":["../../../../src/components/layout/screenDivider/screenDivider.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  children as resolveChildren,\n  createEffect,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { throttle } from \"../../../utils/throttle\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ScreenDividerProps {\n  sizeFirst?: number;\n  sizeSecond?: number;\n  class?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Called with the first pane size (percent) whenever it changes. */\n  onSizeChange?: (sizeFirst: number) => void;\n  /** Step (in percent) applied on arrow-key resize. */\n  keyboardStep?: number;\n  /** Accessible label for the resizer handle. */\n  resizerAriaLabel?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst toPixels = (percent: number, parentSize: number): number => parentSize * (percent / 100);\n\nconst getInitialDivider = (sizeFirst?: number | null, sizeSecond?: number | null): number => {\n  if (!sizeFirst && sizeSecond) {\n    return 100 - sizeSecond;\n  }\n  if (sizeFirst) {\n    return sizeFirst;\n  }\n  return 50;\n};\n\nexport function ScreenDivider(props: ParentProps<ScreenDividerProps>): JSX.Element {\n  const merged = mergeProps(\n    { orientation: \"horizontal\" as const, keyboardStep: 5, resizerAriaLabel: \"Resize panels\" },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"orientation\",\n    \"sizeFirst\",\n    \"sizeSecond\",\n    \"children\",\n    \"onSizeChange\",\n    \"keyboardStep\",\n    \"resizerAriaLabel\",\n    \"ref\",\n  ]);\n\n  let wrapperEl: HTMLDivElement | undefined;\n  const [divider, setDivider] = createSignal(getInitialDivider(local.sizeFirst, local.sizeSecond));\n  const [isDragging, setIsDragging] = createSignal(false);\n\n  // Sync with controlled size props.\n  createEffect(() => {\n    setDivider(getInitialDivider(local.sizeFirst, local.sizeSecond));\n  });\n\n  // Report size changes.\n  createEffect(() => {\n    local.onSizeChange?.(divider());\n  });\n\n  const resolved = resolveChildren(() => local.children);\n  const child = (): unknown[] => resolved.toArray();\n\n  const dragOver = throttle((event: PointerEvent) => {\n    if (!isDragging()) return;\n    const wrapper = wrapperEl;\n    if (!wrapper) return;\n    if (local.orientation === \"vertical\") {\n      let relativeMouseY = event.clientY - wrapper.offsetTop;\n      if (relativeMouseY < 0) relativeMouseY = 0;\n      const newDivider = (relativeMouseY / wrapper.clientHeight) * 100;\n      if (toPixels(newDivider, wrapper.clientWidth) > 5 && newDivider < 101) {\n        setDivider(newDivider - 7);\n      }\n    } else {\n      let relativeMouseX = event.clientX - wrapper.offsetLeft;\n      if (relativeMouseX < 0) relativeMouseX = 0;\n      const newDivider = (relativeMouseX / wrapper.clientWidth) * 100;\n      if (toPixels(newDivider, wrapper.clientWidth) > 5 && newDivider < 101) {\n        setDivider(newDivider);\n      }\n    }\n  }, 1000 / 60);\n\n  const handleDragStart = (): void => {\n    setIsDragging(true);\n  };\n  const handleDragEnd = (): void => {\n    setIsDragging(false);\n  };\n\n  createEffect(() => {\n    if (isServer) return;\n    if (isDragging()) {\n      document.body.addEventListener(\"pointerup\", handleDragEnd);\n      document.body.addEventListener(\"pointermove\", dragOver);\n      document.body.style.cursor = local.orientation === \"horizontal\" ? \"e-resize\" : \"n-resize\";\n    } else {\n      document.body.style.cursor = \"default\";\n    }\n    onCleanup(() => {\n      document.body.removeEventListener(\"pointerup\", handleDragEnd);\n      document.body.removeEventListener(\"pointermove\", dragOver);\n    });\n  });\n\n  const onResizerKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    const decreaseKey = local.orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n    const increaseKey = local.orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n    if (event.key === decreaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.max(0, prev - local.keyboardStep));\n    } else if (event.key === increaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.min(100, prev + local.keyboardStep));\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      setDivider(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      setDivider(100);\n    }\n  };\n\n  const firstChildStyle = (): JSX.CSSProperties =>\n    local.orientation === \"vertical\" ? { height: `${divider()}%` } : { width: `${divider()}%` };\n  const secondChildStyle = (): JSX.CSSProperties =>\n    local.orientation === \"vertical\" ? { height: `${100 - divider()}%` } : { width: `${100 - divider()}%` };\n\n  return (\n    <div\n      class={cn(\"smwb-screen-divider__wrapper\", `smwb-${local.orientation}`, local.class)}\n      ref={mergeRefs(local.ref, (el) => (wrapperEl = el))}\n      data-testid=\"screen-divider\"\n    >\n      <div class={cn(\"smwb-screen-divider__first\", `smwb-${local.orientation}`)} style={firstChildStyle()}>\n        {(child()[0] ?? \"\") as JSX.Element}\n      </div>\n      <span\n        class=\"smwb-screen-divider__resizer\"\n        onPointerDown={handleDragStart}\n        draggable={false}\n        role=\"separator\"\n        aria-orientation={local.orientation === \"vertical\" ? \"horizontal\" : \"vertical\"}\n        aria-valuenow={Math.round(divider())}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={local.resizerAriaLabel}\n        tabindex={0}\n        onKeyDown={onResizerKeyDown}\n      />\n      <div class={cn(\"smwb-screen-divider__second\", `smwb-${local.orientation}`)} style={secondChildStyle()}>\n        {(child()[1] ?? \"\") as JSX.Element}\n      </div>\n    </div>\n  );\n}\n\nexport default ScreenDivider;\n"],"names":["toPixels","percent","parentSize","getInitialDivider","sizeFirst","sizeSecond","ScreenDivider","props","merged","mergeProps","orientation","keyboardStep","resizerAriaLabel","local","splitProps","wrapperEl","divider","setDivider","createSignal","isDragging","setIsDragging","createEffect","onSizeChange","resolved","resolveChildren","children","child","toArray","dragOver","throttle","event","wrapper","relativeMouseY","clientY","offsetTop","newDivider","clientHeight","clientWidth","relativeMouseX","clientX","offsetLeft","handleDragStart","handleDragEnd","isServer","document","body","addEventListener","style","cursor","onCleanup","removeEventListener","onResizerKeyDown","decreaseKey","increaseKey","key","preventDefault","prev","Math","max","min","firstChildStyle","height","width","secondChildStyle","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_ref$","mergeRefs","ref","el","_$use","_$insert","$$keydown","$$pointerdown","_$setAttribute","_$effect","_p$","_v$","cn","class","_v$2","_v$3","_v$4","_v$5","round","_v$6","_v$7","_v$8","e","_$className","t","a","_$style","o","i","n","s","h","undefined","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"screenDivider.js","sources":["../../../../src/components/layout/screenDivider/screenDivider.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  children as resolveChildren,\n  createEffect,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { throttle } from \"../../../utils/throttle\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ScreenDividerProps {\n  sizeFirst?: number;\n  sizeSecond?: number;\n  class?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Called with the first pane size (percent) whenever it changes. */\n  onSizeChange?: (sizeFirst: number) => void;\n  /** Step (in percent) applied on arrow-key resize. */\n  keyboardStep?: number;\n  /** Accessible label for the resizer handle. */\n  resizerAriaLabel?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst getInitialDivider = (sizeFirst?: number | null, sizeSecond?: number | null): number => {\n  if (!sizeFirst && sizeSecond) {\n    return 100 - sizeSecond;\n  }\n  if (sizeFirst) {\n    return sizeFirst;\n  }\n  return 50;\n};\n\nexport function ScreenDivider(props: ParentProps<ScreenDividerProps>): JSX.Element {\n  const merged = mergeProps(\n    { orientation: \"horizontal\" as const, keyboardStep: 5, resizerAriaLabel: \"Resize panels\" },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"orientation\",\n    \"sizeFirst\",\n    \"sizeSecond\",\n    \"children\",\n    \"onSizeChange\",\n    \"keyboardStep\",\n    \"resizerAriaLabel\",\n    \"ref\",\n  ]);\n\n  let wrapperEl: HTMLDivElement | undefined;\n  const [divider, setDivider] = createSignal(getInitialDivider(local.sizeFirst, local.sizeSecond));\n  const [isDragging, setIsDragging] = createSignal(false);\n\n  // Sync with controlled size props.\n  createEffect(() => {\n    setDivider(getInitialDivider(local.sizeFirst, local.sizeSecond));\n  });\n\n  // Report size changes.\n  createEffect(() => {\n    local.onSizeChange?.(divider());\n  });\n\n  const resolved = resolveChildren(() => local.children);\n  const child = (): unknown[] => resolved.toArray();\n\n  const dragOver = throttle((event: PointerEvent) => {\n    if (!isDragging()) return;\n    const wrapper = wrapperEl;\n    if (!wrapper) return;\n    // Viewport-relative rect — using offsetLeft/offsetTop here is wrong\n    // because they are relative to the nearest positioned ancestor, not\n    // the viewport that clientX/clientY live in (this is what made the\n    // divider drift away from the cursor when the wrapper was nested).\n    const rect = wrapper.getBoundingClientRect();\n    const total = local.orientation === \"vertical\" ? rect.height : rect.width;\n    const cursor = local.orientation === \"vertical\" ? event.clientY - rect.top : event.clientX - rect.left;\n    // 5px margin on each side so neither pane fully collapses.\n    const clamped = Math.max(5, Math.min(total - 5, cursor));\n    setDivider((clamped / total) * 100);\n  }, 1000 / 60);\n\n  const handleDragStart = (): void => {\n    setIsDragging(true);\n  };\n  const handleDragEnd = (): void => {\n    setIsDragging(false);\n  };\n\n  createEffect(() => {\n    if (isServer) return;\n    if (isDragging()) {\n      document.body.addEventListener(\"pointerup\", handleDragEnd);\n      document.body.addEventListener(\"pointermove\", dragOver);\n      document.body.style.cursor = local.orientation === \"horizontal\" ? \"e-resize\" : \"n-resize\";\n    } else {\n      document.body.style.cursor = \"default\";\n    }\n    onCleanup(() => {\n      document.body.removeEventListener(\"pointerup\", handleDragEnd);\n      document.body.removeEventListener(\"pointermove\", dragOver);\n    });\n  });\n\n  const onResizerKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    const decreaseKey = local.orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n    const increaseKey = local.orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n    if (event.key === decreaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.max(0, prev - local.keyboardStep));\n    } else if (event.key === increaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.min(100, prev + local.keyboardStep));\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      setDivider(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      setDivider(100);\n    }\n  };\n\n  const firstChildStyle = (): JSX.CSSProperties =>\n    local.orientation === \"vertical\" ? { height: `${divider()}%` } : { width: `${divider()}%` };\n  const secondChildStyle = (): JSX.CSSProperties =>\n    local.orientation === \"vertical\" ? { height: `${100 - divider()}%` } : { width: `${100 - divider()}%` };\n\n  return (\n    <div\n      class={cn(\"smwb-screen-divider__wrapper\", `smwb-${local.orientation}`, local.class)}\n      ref={mergeRefs(local.ref, (el) => (wrapperEl = el))}\n      data-testid=\"screen-divider\"\n    >\n      <div class={cn(\"smwb-screen-divider__first\", `smwb-${local.orientation}`)} style={firstChildStyle()}>\n        {(child()[0] ?? \"\") as JSX.Element}\n      </div>\n      <span\n        class=\"smwb-screen-divider__resizer\"\n        onPointerDown={handleDragStart}\n        draggable={false}\n        role=\"separator\"\n        aria-orientation={local.orientation === \"vertical\" ? \"horizontal\" : \"vertical\"}\n        aria-valuenow={Math.round(divider())}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={local.resizerAriaLabel}\n        tabindex={0}\n        onKeyDown={onResizerKeyDown}\n      />\n      <div class={cn(\"smwb-screen-divider__second\", `smwb-${local.orientation}`)} style={secondChildStyle()}>\n        {(child()[1] ?? \"\") as JSX.Element}\n      </div>\n    </div>\n  );\n}\n\nexport default ScreenDivider;\n"],"names":["getInitialDivider","sizeFirst","sizeSecond","ScreenDivider","props","merged","mergeProps","orientation","keyboardStep","resizerAriaLabel","local","splitProps","wrapperEl","divider","setDivider","createSignal","isDragging","setIsDragging","createEffect","onSizeChange","resolved","resolveChildren","children","child","toArray","dragOver","throttle","event","wrapper","rect","getBoundingClientRect","total","height","width","cursor","clientY","top","clientX","left","clamped","Math","max","min","handleDragStart","handleDragEnd","isServer","document","body","addEventListener","style","onCleanup","removeEventListener","onResizerKeyDown","decreaseKey","increaseKey","key","preventDefault","prev","firstChildStyle","secondChildStyle","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_ref$","mergeRefs","ref","el","_$use","_$insert","$$keydown","$$pointerdown","_$setAttribute","_$effect","_p$","_v$","cn","class","_v$2","_v$3","_v$4","_v$5","round","_v$6","_v$7","_v$8","e","_$className","t","a","_$style","o","i","n","s","h","undefined","_$delegateEvents"],"mappings":"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"}

package/dist/headless/components/layout/screenDivider/screenDivider.js

@@ -1,65 +1,56 @@
-import { isServer as X, use as Y, insert as L, setAttribute as c, effect as F, className as v, style as $, template as N, delegateEvents as O } from "solid-js/web";
-import { mergeProps as T, splitProps as U, createSignal as x, createEffect as f, children as j, onCleanup as q } from "solid-js";
-import m from "clsx";
-import { throttle as B } from "../../../utils/throttle.js";
-import { mergeRefs as G } from "../../../primitives/mergeRefs.js";
-var J = /* @__PURE__ */ N("<div data-testid=screen-divider><div></div><span class=smwb-screen-divider__resizer role=separator aria-valuemin=0 aria-valuemax=100 tabindex=0></span><div>");
-const C = (a, d) => d * (a / 100), _ = (a, d) => !a && d ? 100 - d : a || 50;
-function re(a) {
-  const d = T({
+import { isServer as F, use as H, insert as $, setAttribute as v, effect as N, className as m, style as L, template as O, delegateEvents as U } from "solid-js/web";
+import { mergeProps as X, splitProps as Y, createSignal as x, createEffect as f, children as j, onCleanup as q } from "solid-js";
+import u from "clsx";
+import { throttle as G } from "../../../utils/throttle.js";
+import { mergeRefs as J } from "../../../primitives/mergeRefs.js";
+var Q = /* @__PURE__ */ O("<div data-testid=screen-divider><div></div><span class=smwb-screen-divider__resizer role=separator aria-valuemin=0 aria-valuemax=100 tabindex=0></span><div>");
+const C = (d, l) => !d && l ? 100 - l : d || 50;
+function re(d) {
+  const l = X({
     orientation: "horizontal",
     keyboardStep: 5,
     resizerAriaLabel: "Resize panels"
-  }, a), [e] = U(d, ["class", "orientation", "sizeFirst", "sizeSecond", "children", "onSizeChange", "keyboardStep", "resizerAriaLabel", "ref"]);
-  let u;
-  const [l, s] = x(_(e.sizeFirst, e.sizeSecond)), [h, b] = x(!1);
+  }, d), [e] = Y(l, ["class", "orientation", "sizeFirst", "sizeSecond", "children", "onSizeChange", "keyboardStep", "resizerAriaLabel", "ref"]);
+  let h;
+  const [a, s] = x(C(e.sizeFirst, e.sizeSecond)), [g, b] = x(!1);
   f(() => {
-    s(_(e.sizeFirst, e.sizeSecond));
+    s(C(e.sizeFirst, e.sizeSecond));
   }), f(() => {
-    e.onSizeChange?.(l());
+    e.onSizeChange?.(a());
   });
-  const M = j(() => e.children), y = () => M.toArray(), g = B((t) => {
-    if (!h()) return;
-    const o = u;
-    if (o)
-      if (e.orientation === "vertical") {
-        let r = t.clientY - o.offsetTop;
-        r < 0 && (r = 0);
-        const n = r / o.clientHeight * 100;
-        C(n, o.clientWidth) > 5 && n < 101 && s(n - 7);
-      } else {
-        let r = t.clientX - o.offsetLeft;
-        r < 0 && (r = 0);
-        const n = r / o.clientWidth * 100;
-        C(n, o.clientWidth) > 5 && n < 101 && s(n);
-      }
-  }, 1e3 / 60), R = () => {
+  const _ = j(() => e.children), p = () => _.toArray(), y = G((t) => {
+    if (!g()) return;
+    const o = h;
+    if (!o) return;
+    const i = o.getBoundingClientRect(), n = e.orientation === "vertical" ? i.height : i.width, c = e.orientation === "vertical" ? t.clientY - i.top : t.clientX - i.left, r = Math.max(5, Math.min(n - 5, c));
+    s(r / n * 100);
+  }, 1e3 / 60), M = () => {
     b(!0);
-  }, p = () => {
+  }, w = () => {
     b(!1);
   };
   f(() => {
-    X || (h() ? (document.body.addEventListener("pointerup", p), document.body.addEventListener("pointermove", g), document.body.style.cursor = e.orientation === "horizontal" ? "e-resize" : "n-resize") : document.body.style.cursor = "default", q(() => {
-      document.body.removeEventListener("pointerup", p), document.body.removeEventListener("pointermove", g);
+    F || (g() ? (document.body.addEventListener("pointerup", w), document.body.addEventListener("pointermove", y), document.body.style.cursor = e.orientation === "horizontal" ? "e-resize" : "n-resize") : document.body.style.cursor = "default", q(() => {
+      document.body.removeEventListener("pointerup", w), document.body.removeEventListener("pointermove", y);
     }));
   });
-  const K = (t) => {
-    const o = e.orientation === "vertical" ? "ArrowUp" : "ArrowLeft", r = e.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
-    t.key === o ? (t.preventDefault(), s((n) => Math.max(0, n - e.keyboardStep))) : t.key === r ? (t.preventDefault(), s((n) => Math.min(100, n + e.keyboardStep))) : t.key === "Home" ? (t.preventDefault(), s(0)) : t.key === "End" && (t.preventDefault(), s(100));
-  }, P = () => e.orientation === "vertical" ? {
-    height: `${l()}%`
+  const R = (t) => {
+    const o = e.orientation === "vertical" ? "ArrowUp" : "ArrowLeft", i = e.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+    t.key === o ? (t.preventDefault(), s((n) => Math.max(0, n - e.keyboardStep))) : t.key === i ? (t.preventDefault(), s((n) => Math.min(100, n + e.keyboardStep))) : t.key === "Home" ? (t.preventDefault(), s(0)) : t.key === "End" && (t.preventDefault(), s(100));
+  }, K = () => e.orientation === "vertical" ? {
+    height: `${a()}%`
   } : {
-    width: `${l()}%`
-  }, W = () => e.orientation === "vertical" ? {
-    height: `${100 - l()}%`
+    width: `${a()}%`
+  }, I = () => e.orientation === "vertical" ? {
+    height: `${100 - a()}%`
   } : {
-    width: `${100 - l()}%`
+    width: `${100 - a()}%`
   };
   return (() => {
-    var t = J(), o = t.firstChild, r = o.nextSibling, n = r.nextSibling, w = G(e.ref, (i) => u = i);
-    return typeof w == "function" && Y(w, t), L(o, () => y()[0] ?? ""), r.$$keydown = K, r.$$pointerdown = R, c(r, "draggable", !1), L(n, () => y()[1] ?? ""), F((i) => {
-      var z = m("smwb-screen-divider__wrapper", `smwb-${e.orientation}`, e.class), S = m("smwb-screen-divider__first", `smwb-${e.orientation}`), H = P(), D = e.orientation === "vertical" ? "horizontal" : "vertical", k = Math.round(l()), A = e.resizerAriaLabel, E = m("smwb-screen-divider__second", `smwb-${e.orientation}`), I = W();
-      return z !== i.e && v(t, i.e = z), S !== i.t && v(o, i.t = S), i.a = $(o, H, i.a), D !== i.o && c(r, "aria-orientation", i.o = D), k !== i.i && c(r, "aria-valuenow", i.i = k), A !== i.n && c(r, "aria-label", i.n = A), E !== i.s && v(n, i.s = E), i.h = $(n, I, i.h), i;
+    var t = Q(), o = t.firstChild, i = o.nextSibling, n = i.nextSibling, c = J(e.ref, (r) => h = r);
+    return typeof c == "function" && H(c, t), $(o, () => p()[0] ?? ""), i.$$keydown = R, i.$$pointerdown = M, v(i, "draggable", !1), $(n, () => p()[1] ?? ""), N((r) => {
+      var z = u("smwb-screen-divider__wrapper", `smwb-${e.orientation}`, e.class), S = u("smwb-screen-divider__first", `smwb-${e.orientation}`), P = K(), D = e.orientation === "vertical" ? "horizontal" : "vertical", k = Math.round(a()), A = e.resizerAriaLabel, E = u("smwb-screen-divider__second", `smwb-${e.orientation}`), B = I();
+      return z !== r.e && m(t, r.e = z), S !== r.t && m(o, r.t = S), r.a = L(o, P, r.a), D !== r.o && v(i, "aria-orientation", r.o = D), k !== r.i && v(i, "aria-valuenow", r.i = k), A !== r.n && v(i, "aria-label", r.n = A), E !== r.s && m(n, r.s = E), r.h = L(n, B, r.h), r;
     }, {
       e: void 0,
       t: void 0,
@@ -72,7 +63,7 @@ function re(a) {
     }), t;
   })();
 }
-O(["pointerdown", "keydown"]);
+U(["pointerdown", "keydown"]);
 export {
   re as ScreenDivider
 };

package/dist/headless/components/layout/screenDivider/screenDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"screenDivider.js","sources":["../../../../../src/components/layout/screenDivider/screenDivider.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  children as resolveChildren,\n  createEffect,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { throttle } from \"../../../utils/throttle\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ScreenDividerProps {\n  sizeFirst?: number;\n  sizeSecond?: number;\n  class?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Called with the first pane size (percent) whenever it changes. */\n  onSizeChange?: (sizeFirst: number) => void;\n  /** Step (in percent) applied on arrow-key resize. */\n  keyboardStep?: number;\n  /** Accessible label for the resizer handle. */\n  resizerAriaLabel?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst toPixels = (percent: number, parentSize: number): number => parentSize * (percent / 100);\n\nconst getInitialDivider = (sizeFirst?: number | null, sizeSecond?: number | null): number => {\n  if (!sizeFirst && sizeSecond) {\n    return 100 - sizeSecond;\n  }\n  if (sizeFirst) {\n    return sizeFirst;\n  }\n  return 50;\n};\n\nexport function ScreenDivider(props: ParentProps<ScreenDividerProps>): JSX.Element {\n  const merged = mergeProps(\n    { orientation: \"horizontal\" as const, keyboardStep: 5, resizerAriaLabel: \"Resize panels\" },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"orientation\",\n    \"sizeFirst\",\n    \"sizeSecond\",\n    \"children\",\n    \"onSizeChange\",\n    \"keyboardStep\",\n    \"resizerAriaLabel\",\n    \"ref\",\n  ]);\n\n  let wrapperEl: HTMLDivElement | undefined;\n  const [divider, setDivider] = createSignal(getInitialDivider(local.sizeFirst, local.sizeSecond));\n  const [isDragging, setIsDragging] = createSignal(false);\n\n  // Sync with controlled size props.\n  createEffect(() => {\n    setDivider(getInitialDivider(local.sizeFirst, local.sizeSecond));\n  });\n\n  // Report size changes.\n  createEffect(() => {\n    local.onSizeChange?.(divider());\n  });\n\n  const resolved = resolveChildren(() => local.children);\n  const child = (): unknown[] => resolved.toArray();\n\n  const dragOver = throttle((event: PointerEvent) => {\n    if (!isDragging()) return;\n    const wrapper = wrapperEl;\n    if (!wrapper) return;\n    if (local.orientation === \"vertical\") {\n      let relativeMouseY = event.clientY - wrapper.offsetTop;\n      if (relativeMouseY < 0) relativeMouseY = 0;\n      const newDivider = (relativeMouseY / wrapper.clientHeight) * 100;\n      if (toPixels(newDivider, wrapper.clientWidth) > 5 && newDivider < 101) {\n        setDivider(newDivider - 7);\n      }\n    } else {\n      let relativeMouseX = event.clientX - wrapper.offsetLeft;\n      if (relativeMouseX < 0) relativeMouseX = 0;\n      const newDivider = (relativeMouseX / wrapper.clientWidth) * 100;\n      if (toPixels(newDivider, wrapper.clientWidth) > 5 && newDivider < 101) {\n        setDivider(newDivider);\n      }\n    }\n  }, 1000 / 60);\n\n  const handleDragStart = (): void => {\n    setIsDragging(true);\n  };\n  const handleDragEnd = (): void => {\n    setIsDragging(false);\n  };\n\n  createEffect(() => {\n    if (isServer) return;\n    if (isDragging()) {\n      document.body.addEventListener(\"pointerup\", handleDragEnd);\n      document.body.addEventListener(\"pointermove\", dragOver);\n      document.body.style.cursor = local.orientation === \"horizontal\" ? \"e-resize\" : \"n-resize\";\n    } else {\n      document.body.style.cursor = \"default\";\n    }\n    onCleanup(() => {\n      document.body.removeEventListener(\"pointerup\", handleDragEnd);\n      document.body.removeEventListener(\"pointermove\", dragOver);\n    });\n  });\n\n  const onResizerKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    const decreaseKey = local.orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n    const increaseKey = local.orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n    if (event.key === decreaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.max(0, prev - local.keyboardStep));\n    } else if (event.key === increaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.min(100, prev + local.keyboardStep));\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      setDivider(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      setDivider(100);\n    }\n  };\n\n  const firstChildStyle = (): JSX.CSSProperties =>\n    local.orientation === \"vertical\" ? { height: `${divider()}%` } : { width: `${divider()}%` };\n  const secondChildStyle = (): JSX.CSSProperties =>\n    local.orientation === \"vertical\" ? { height: `${100 - divider()}%` } : { width: `${100 - divider()}%` };\n\n  return (\n    <div\n      class={cn(\"smwb-screen-divider__wrapper\", `smwb-${local.orientation}`, local.class)}\n      ref={mergeRefs(local.ref, (el) => (wrapperEl = el))}\n      data-testid=\"screen-divider\"\n    >\n      <div class={cn(\"smwb-screen-divider__first\", `smwb-${local.orientation}`)} style={firstChildStyle()}>\n        {(child()[0] ?? \"\") as JSX.Element}\n      </div>\n      <span\n        class=\"smwb-screen-divider__resizer\"\n        onPointerDown={handleDragStart}\n        draggable={false}\n        role=\"separator\"\n        aria-orientation={local.orientation === \"vertical\" ? \"horizontal\" : \"vertical\"}\n        aria-valuenow={Math.round(divider())}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={local.resizerAriaLabel}\n        tabindex={0}\n        onKeyDown={onResizerKeyDown}\n      />\n      <div class={cn(\"smwb-screen-divider__second\", `smwb-${local.orientation}`)} style={secondChildStyle()}>\n        {(child()[1] ?? \"\") as JSX.Element}\n      </div>\n    </div>\n  );\n}\n\nexport default ScreenDivider;\n"],"names":["toPixels","percent","parentSize","getInitialDivider","sizeFirst","sizeSecond","ScreenDivider","props","merged","mergeProps","orientation","keyboardStep","resizerAriaLabel","local","splitProps","wrapperEl","divider","setDivider","createSignal","isDragging","setIsDragging","createEffect","onSizeChange","resolved","resolveChildren","children","child","toArray","dragOver","throttle","event","wrapper","relativeMouseY","clientY","offsetTop","newDivider","clientHeight","clientWidth","relativeMouseX","clientX","offsetLeft","handleDragStart","handleDragEnd","isServer","document","body","addEventListener","style","cursor","onCleanup","removeEventListener","onResizerKeyDown","decreaseKey","increaseKey","key","preventDefault","prev","Math","max","min","firstChildStyle","height","width","secondChildStyle","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_ref$","mergeRefs","ref","el","_$use","_$insert","$$keydown","$$pointerdown","_$setAttribute","_$effect","_p$","_v$","cn","class","_v$2","_v$3","_v$4","_v$5","round","_v$6","_v$7","_v$8","e","_$className","t","a","_$style","o","i","n","s","h","undefined","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"screenDivider.js","sources":["../../../../../src/components/layout/screenDivider/screenDivider.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  children as resolveChildren,\n  createEffect,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { throttle } from \"../../../utils/throttle\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ScreenDividerProps {\n  sizeFirst?: number;\n  sizeSecond?: number;\n  class?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Called with the first pane size (percent) whenever it changes. */\n  onSizeChange?: (sizeFirst: number) => void;\n  /** Step (in percent) applied on arrow-key resize. */\n  keyboardStep?: number;\n  /** Accessible label for the resizer handle. */\n  resizerAriaLabel?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst getInitialDivider = (sizeFirst?: number | null, sizeSecond?: number | null): number => {\n  if (!sizeFirst && sizeSecond) {\n    return 100 - sizeSecond;\n  }\n  if (sizeFirst) {\n    return sizeFirst;\n  }\n  return 50;\n};\n\nexport function ScreenDivider(props: ParentProps<ScreenDividerProps>): JSX.Element {\n  const merged = mergeProps(\n    { orientation: \"horizontal\" as const, keyboardStep: 5, resizerAriaLabel: \"Resize panels\" },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"orientation\",\n    \"sizeFirst\",\n    \"sizeSecond\",\n    \"children\",\n    \"onSizeChange\",\n    \"keyboardStep\",\n    \"resizerAriaLabel\",\n    \"ref\",\n  ]);\n\n  let wrapperEl: HTMLDivElement | undefined;\n  const [divider, setDivider] = createSignal(getInitialDivider(local.sizeFirst, local.sizeSecond));\n  const [isDragging, setIsDragging] = createSignal(false);\n\n  // Sync with controlled size props.\n  createEffect(() => {\n    setDivider(getInitialDivider(local.sizeFirst, local.sizeSecond));\n  });\n\n  // Report size changes.\n  createEffect(() => {\n    local.onSizeChange?.(divider());\n  });\n\n  const resolved = resolveChildren(() => local.children);\n  const child = (): unknown[] => resolved.toArray();\n\n  const dragOver = throttle((event: PointerEvent) => {\n    if (!isDragging()) return;\n    const wrapper = wrapperEl;\n    if (!wrapper) return;\n    // Viewport-relative rect — using offsetLeft/offsetTop here is wrong\n    // because they are relative to the nearest positioned ancestor, not\n    // the viewport that clientX/clientY live in (this is what made the\n    // divider drift away from the cursor when the wrapper was nested).\n    const rect = wrapper.getBoundingClientRect();\n    const total = local.orientation === \"vertical\" ? rect.height : rect.width;\n    const cursor = local.orientation === \"vertical\" ? event.clientY - rect.top : event.clientX - rect.left;\n    // 5px margin on each side so neither pane fully collapses.\n    const clamped = Math.max(5, Math.min(total - 5, cursor));\n    setDivider((clamped / total) * 100);\n  }, 1000 / 60);\n\n  const handleDragStart = (): void => {\n    setIsDragging(true);\n  };\n  const handleDragEnd = (): void => {\n    setIsDragging(false);\n  };\n\n  createEffect(() => {\n    if (isServer) return;\n    if (isDragging()) {\n      document.body.addEventListener(\"pointerup\", handleDragEnd);\n      document.body.addEventListener(\"pointermove\", dragOver);\n      document.body.style.cursor = local.orientation === \"horizontal\" ? \"e-resize\" : \"n-resize\";\n    } else {\n      document.body.style.cursor = \"default\";\n    }\n    onCleanup(() => {\n      document.body.removeEventListener(\"pointerup\", handleDragEnd);\n      document.body.removeEventListener(\"pointermove\", dragOver);\n    });\n  });\n\n  const onResizerKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    const decreaseKey = local.orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n    const increaseKey = local.orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n    if (event.key === decreaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.max(0, prev - local.keyboardStep));\n    } else if (event.key === increaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.min(100, prev + local.keyboardStep));\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      setDivider(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      setDivider(100);\n    }\n  };\n\n  const firstChildStyle = (): JSX.CSSProperties =>\n    local.orientation === \"vertical\" ? { height: `${divider()}%` } : { width: `${divider()}%` };\n  const secondChildStyle = (): JSX.CSSProperties =>\n    local.orientation === \"vertical\" ? { height: `${100 - divider()}%` } : { width: `${100 - divider()}%` };\n\n  return (\n    <div\n      class={cn(\"smwb-screen-divider__wrapper\", `smwb-${local.orientation}`, local.class)}\n      ref={mergeRefs(local.ref, (el) => (wrapperEl = el))}\n      data-testid=\"screen-divider\"\n    >\n      <div class={cn(\"smwb-screen-divider__first\", `smwb-${local.orientation}`)} style={firstChildStyle()}>\n        {(child()[0] ?? \"\") as JSX.Element}\n      </div>\n      <span\n        class=\"smwb-screen-divider__resizer\"\n        onPointerDown={handleDragStart}\n        draggable={false}\n        role=\"separator\"\n        aria-orientation={local.orientation === \"vertical\" ? \"horizontal\" : \"vertical\"}\n        aria-valuenow={Math.round(divider())}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={local.resizerAriaLabel}\n        tabindex={0}\n        onKeyDown={onResizerKeyDown}\n      />\n      <div class={cn(\"smwb-screen-divider__second\", `smwb-${local.orientation}`)} style={secondChildStyle()}>\n        {(child()[1] ?? \"\") as JSX.Element}\n      </div>\n    </div>\n  );\n}\n\nexport default ScreenDivider;\n"],"names":["getInitialDivider","sizeFirst","sizeSecond","ScreenDivider","props","merged","mergeProps","orientation","keyboardStep","resizerAriaLabel","local","splitProps","wrapperEl","divider","setDivider","createSignal","isDragging","setIsDragging","createEffect","onSizeChange","resolved","resolveChildren","children","child","toArray","dragOver","throttle","event","wrapper","rect","getBoundingClientRect","total","height","width","cursor","clientY","top","clientX","left","clamped","Math","max","min","handleDragStart","handleDragEnd","isServer","document","body","addEventListener","style","onCleanup","removeEventListener","onResizerKeyDown","decreaseKey","increaseKey","key","preventDefault","prev","firstChildStyle","secondChildStyle","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_ref$","mergeRefs","ref","el","_$use","_$insert","$$keydown","$$pointerdown","_$setAttribute","_$effect","_p$","_v$","cn","class","_v$2","_v$3","_v$4","_v$5","round","_v$6","_v$7","_v$8","e","_$className","t","a","_$style","o","i","n","s","h","undefined","_$delegateEvents"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-solid",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "SolidJS port of summer-ui: strict, tree-shakeable Material-style component library sharing the @smwb/ui-styles design system.",
   "license": "MIT",
   "type": "module",