@smwb/ui-solid 1.0.0 → 2.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"appLayout.js","sources":["../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: JSX.Element;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: JSX.Element;\n  /** Footer slot, below the content. */\n  footer?: JSX.Element;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: JSX.Element;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  /** Test id of the root `<div>`; `app-layout` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst len = (v: number | string): string => (typeof v === \"number\" ? `${v}px` : v);\n\nexport function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      sidebarWidth: 260 as number | string,\n      defaultSidebarCollapsed: false,\n      collapsible: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      sidebarCollapsedWidth: 72 as number | string,\n      stickyHeader: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"header\",\n    \"sidebar\",\n    \"footer\",\n    \"sidebarWidth\",\n    \"sidebarCollapsed\",\n    \"defaultSidebarCollapsed\",\n    \"onSidebarCollapsedChange\",\n    \"collapsible\",\n    \"collapseToggle\",\n    \"collapseToggleAriaLabel\",\n    \"sidebarCollapsedWidth\",\n    \"stickyHeader\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.sidebarCollapsed,\n    defaultValue: local.defaultSidebarCollapsed,\n    onChange: (next) => local.onSidebarCollapsedChange?.(next),\n  });\n\n  const sidebarId = createId();\n\n  // Resolve slot props through `children()` so each is created once, in THIS\n  // component's reactive context. A pre-created element passed straight into a\n  // <Show> gets its hydration key at the caller's position but renders at the\n  // Show's, so the hydration walk can't find it (\"Unable to find DOM nodes for\n  // key\"). Resolving here keeps the key sequence aligned on server and client.\n  const headerSlot = children(() => local.header);\n  const sidebarSlot = children(() => local.sidebar);\n  const footerSlot = children(() => local.footer);\n  // The toggle is drawn only on a collapsible layout, so it is read only then.\n  const collapseToggleSlot = children(() => (local.collapsible ? local.collapseToggle : undefined));\n\n  // The caller's style goes last: its own --smui-app-sidebar-w wins over the width props.\n  const style = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(\n      { \"--smui-app-sidebar-w\": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth) },\n      local.style\n    );\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"app-layout\"}\n      class={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": local.stickyHeader, \"smwb-app-layout_collapsed\": collapsed() },\n        local.class\n      )}\n      style={style()}\n    >\n      <Show when={headerSlot()}>\n        <div class=\"smwb-app-layout__header\">{headerSlot()}</div>\n      </Show>\n      <div class=\"smwb-app-layout__body\">\n        <Show when={sidebarSlot()}>\n          <aside id={sidebarId} class=\"smwb-app-layout__sidebar\">\n            <Show when={local.collapsible}>\n              <div class=\"smwb-app-layout__collapse\">\n                <Show\n                  when={collapseToggleSlot()}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"smwb-app-layout__collapse-btn\"\n                      aria-label={local.collapseToggleAriaLabel}\n                      aria-expanded={!collapsed()}\n                      aria-controls={sidebarId}\n                      onClick={() => setCollapsed(!collapsed())}\n                    >\n                      <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                    </button>\n                  }\n                >\n                  {collapseToggleSlot()}\n                </Show>\n              </div>\n            </Show>\n            {sidebarSlot()}\n          </aside>\n        </Show>\n        <div class=\"smwb-app-layout__content\">\n          {local.children}\n          <Show when={footerSlot()}>\n            <div class=\"smwb-app-layout__footer\">{footerSlot()}</div>\n          </Show>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default AppLayout;\n"],"names":["len","v","AppLayout","props","merged","mergeProps","sidebarWidth","defaultSidebarCollapsed","collapsible","collapseToggleAriaLabel","sidebarCollapsedWidth","stickyHeader","local","rest","splitProps","collapsed","setCollapsed","createControllableState","value","sidebarCollapsed","defaultValue","onChange","next","onSidebarCollapsedChange","sidebarId","createId","headerSlot","children","header","sidebarSlot","sidebar","footerSlot","footer","collapseToggleSlot","collapseToggle","undefined","style","mergeStyle","_el$","_tmpl$5","_el$3","firstChild","_el$6","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$","_el$4","_tmpl$3","_$setAttribute","_el$5","_tmpl$2","fallback","_el$8","_tmpl$6","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","t","_el$7","_tmpl$4","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"appLayout.js","sources":["../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\nimport { publishHeaderOffset } from \"../../../primitives/publishHeaderOffset\";\n\nexport interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: JSX.Element;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: JSX.Element;\n  /** Footer slot, below the content. */\n  footer?: JSX.Element;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: JSX.Element;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /**\n   * Keep the header pinned while content scrolls. A pinned header's height is published as `--smui-sheet-offset-top`\n   * on the document element, so a `Sheet` opens below it and leaves it visible and clickable (a `Sheet` with its own\n   * `offsetTop` ignores it). The height is taken from the top of the window, so the layout is assumed to start\n   * there; with several layouts the most recent one wins.\n   */\n  stickyHeader?: boolean;\n  /** Test id of the root `<div>`; `app-layout` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst len = (v: number | string): string => (typeof v === \"number\" ? `${v}px` : v);\n\nexport function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      sidebarWidth: 260 as number | string,\n      defaultSidebarCollapsed: false,\n      collapsible: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      sidebarCollapsedWidth: 72 as number | string,\n      stickyHeader: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"header\",\n    \"sidebar\",\n    \"footer\",\n    \"sidebarWidth\",\n    \"sidebarCollapsed\",\n    \"defaultSidebarCollapsed\",\n    \"onSidebarCollapsedChange\",\n    \"collapsible\",\n    \"collapseToggle\",\n    \"collapseToggleAriaLabel\",\n    \"sidebarCollapsedWidth\",\n    \"stickyHeader\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.sidebarCollapsed,\n    defaultValue: local.defaultSidebarCollapsed,\n    onChange: (next) => local.onSidebarCollapsedChange?.(next),\n  });\n\n  const sidebarId = createId();\n\n  // Resolve slot props through `children()` so each is created once, in THIS\n  // component's reactive context. A pre-created element passed straight into a\n  // <Show> gets its hydration key at the caller's position but renders at the\n  // Show's, so the hydration walk can't find it (\"Unable to find DOM nodes for\n  // key\"). Resolving here keeps the key sequence aligned on server and client.\n  const headerSlot = children(() => local.header);\n  const sidebarSlot = children(() => local.sidebar);\n  const footerSlot = children(() => local.footer);\n  // The toggle is drawn only on a collapsible layout, so it is read only then.\n  const collapseToggleSlot = children(() => (local.collapsible ? local.collapseToggle : undefined));\n\n  // The caller's style goes last: its own --smui-app-sidebar-w wins over the width props.\n  const style = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(\n      { \"--smui-app-sidebar-w\": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth) },\n      local.style\n    );\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"app-layout\"}\n      class={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": local.stickyHeader, \"smwb-app-layout_collapsed\": collapsed() },\n        local.class\n      )}\n      style={style()}\n    >\n      <Show when={headerSlot()}>\n        <div\n          class=\"smwb-app-layout__header\"\n          ref={(el) =>\n            // Created with the header, so it ends with it. A header that scrolls away leaves no fixed edge for a\n            // sheet to start under.\n            createEffect(() => {\n              if (local.stickyHeader) onCleanup(publishHeaderOffset(el));\n            })\n          }\n        >\n          {headerSlot()}\n        </div>\n      </Show>\n      <div class=\"smwb-app-layout__body\">\n        <Show when={sidebarSlot()}>\n          <aside id={sidebarId} class=\"smwb-app-layout__sidebar\">\n            <Show when={local.collapsible}>\n              <div class=\"smwb-app-layout__collapse\">\n                <Show\n                  when={collapseToggleSlot()}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"smwb-app-layout__collapse-btn\"\n                      aria-label={local.collapseToggleAriaLabel}\n                      aria-expanded={!collapsed()}\n                      aria-controls={sidebarId}\n                      onClick={() => setCollapsed(!collapsed())}\n                    >\n                      <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                    </button>\n                  }\n                >\n                  {collapseToggleSlot()}\n                </Show>\n              </div>\n            </Show>\n            {sidebarSlot()}\n          </aside>\n        </Show>\n        <div class=\"smwb-app-layout__content\">\n          {local.children}\n          <Show when={footerSlot()}>\n            <div class=\"smwb-app-layout__footer\">{footerSlot()}</div>\n          </Show>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default AppLayout;\n"],"names":["len","v","AppLayout","props","merged","mergeProps","sidebarWidth","defaultSidebarCollapsed","collapsible","collapseToggleAriaLabel","sidebarCollapsedWidth","stickyHeader","local","rest","splitProps","collapsed","setCollapsed","createControllableState","value","sidebarCollapsed","defaultValue","onChange","next","onSidebarCollapsedChange","sidebarId","createId","headerSlot","children","header","sidebarSlot","sidebar","footerSlot","footer","collapseToggleSlot","collapseToggle","undefined","style","mergeStyle","_el$","_tmpl$5","_el$3","firstChild","_el$6","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$","el","createEffect","onCleanup","publishHeaderOffset","_el$4","_tmpl$3","_$setAttribute","_el$5","_tmpl$2","fallback","_el$8","_tmpl$6","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","t","_el$7","_tmpl$4","_$delegateEvents"],"mappings":";;;;;;;;;;;;AA8CA,MAAMA,IAAMA,CAACC,MAAgC,OAAOA,KAAM,WAAW,GAAGA,CAAC,OAAOA;AAEzE,SAASC,GAAUC,GAAiD;AACzE,QAAMC,IAASC,EACb;AAAA,IACEC,cAAc;AAAA,IACdC,yBAAyB;AAAA,IACzBC,aAAa;AAAA,IACbC,yBAAyB;AAAA,IACzBC,uBAAuB;AAAA,IACvBC,cAAc;AAAA,EAAA,GAEhBR,CACF,GACM,CAACS,GAAOC,CAAI,IAAIC,EAAWV,GAAQ,CACvC,UACA,WACA,UACA,gBACA,oBACA,2BACA,4BACA,eACA,kBACA,2BACA,yBACA,gBACA,SACA,SACA,YACA,OACA,aAAa,CACd,GAEK,CAACW,GAAWC,CAAY,IAAIC,EAAiC;AAAA,IACjEC,OAAOA,MAAMN,EAAMO;AAAAA,IACnBC,cAAcR,EAAML;AAAAA,IACpBc,UAAWC,CAAAA,MAASV,EAAMW,2BAA2BD,CAAI;AAAA,EAAA,CAC1D,GAEKE,IAAYC,EAAAA,GAOZC,IAAaC,EAAS,MAAMf,EAAMgB,MAAM,GACxCC,IAAcF,EAAS,MAAMf,EAAMkB,OAAO,GAC1CC,IAAaJ,EAAS,MAAMf,EAAMoB,MAAM,GAExCC,IAAqBN,EAAS,MAAOf,EAAMJ,cAAcI,EAAMsB,iBAAiBC,MAAU,GAG1FC,IAAQA,MACZC,EACE;AAAA,IAAE,wBAAwBtB,MAAcf,EAAIY,EAAMF,qBAAqB,IAAIV,EAAIY,EAAMN,YAAY;AAAA,EAAA,GACjGM,EAAMwB,KACR;AAEF,UAAA,MAAA;AAAA,QAAAE,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC,YAAAE,IAGSC,EAAUhC,EAAMiC,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAL,CAAA,GAAAS,EAAAT,GAAAU,EADrBnC,GAAI;AAAA,MAAA,IAAA,gBAAA;AAAA,eAEKD,EAAM,aAAa,KAAK;AAAA,MAAY;AAAA,MAAA,IAAA,QAAA;AAAA,eAC1CqC,EACL,mBACA;AAAA,UAAE,iCAAiCrC,EAAMD;AAAAA,UAAc,6BAA6BI,EAAAA;AAAAA,QAAU,GAC9FH,EAAMsC,KACR;AAAA,MAAC;AAAA,MAAA,IACDd,QAAK;AAAA,eAAEA,EAAAA;AAAAA,MAAO;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAe,EAAAb,GAAAc,EAEbC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE5B,EAAAA;AAAAA,MAAY;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAA4B,IAAAC,EAAAA;AAAAV,eAAAA,EAGdW,CAAAA;AAAAA;AAAAA;AAAAA,UAGJC,EAAa,MAAM;AACjB,YAAI9C,EAAMD,gBAAcgD,EAAUC,EAAoBH,CAAE,CAAC;AAAA,UAC3D,CAAC;AAAA,WAACF,CAAA,GAAAJ,EAAAI,GAGH7B,CAAU,GAAA6B;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAf,CAAA,GAAAW,EAAAX,GAAAY,EAIZC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEzB,EAAAA;AAAAA,MAAa;AAAA,MAAA,IAAAF,WAAA;AAAA,YAAAkC,IAAAC,EAAAA;AAAAC,eAAAA,EAAAF,GAAA,MACZrC,CAAS,GAAA2B,EAAAU,GAAAT,EACjBC,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAE1C,EAAMJ;AAAAA,UAAW;AAAA,UAAA,IAAAmB,WAAA;AAAA,gBAAAqC,IAAAC,EAAAA;AAAAd,mBAAAA,EAAAa,GAAAZ,EAExBC,GAAI;AAAA,cAAA,IACHC,OAAI;AAAA,uBAAErB,EAAAA;AAAAA,cAAoB;AAAA,cAAA,IAC1BiC,WAAQ;AAAA,wBAAA,MAAA;AAAA,sBAAAC,IAAAC,EAAAA;AAAAD,yBAAAA,EAAAE,UAOK,MAAMrD,EAAa,CAACD,GAAW,GAACgD,EAAAI,GAAA,iBAD1B3C,CAAS,GAAA2B,EAAAgB,GAAAf,EAGvBkB,GAAI;AAAA,oBAAA,IAACC,OAAI;AAAA,6BAAExD,EAAAA,IAAc,kBAAkB;AAAA,oBAAc;AAAA,oBAAEyD,MAAM;AAAA,kBAAA,CAAE,CAAA,GAAAC,EAAAC,CAAAA,MAAA;AAAA,wBAAAC,IALxD/D,EAAMH,yBAAuBmE,IAC1B,CAAC7D,EAAAA;AAAW4D,2BAAAA,MAAAD,EAAAG,KAAAd,EAAAI,GAAA,cAAAO,EAAAG,IAAAF,CAAA,GAAAC,MAAAF,EAAAI,KAAAf,EAAAI,GAAA,iBAAAO,EAAAI,IAAAF,CAAA,GAAAF;AAAAA,kBAAA,GAAA;AAAA,oBAAAG,GAAA1C;AAAAA,oBAAA2C,GAAA3C;AAAAA,kBAAAA,CAAA,GAAAgC;AAAAA,gBAAA,GAAA;AAAA,cAAA;AAAA,cAAA,IAAAxC,WAAA;AAAA,uBAQ9BM,EAAAA;AAAAA,cAAoB;AAAA,YAAA,CAAA,CAAA,GAAA+B;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAb,EAAAU,GAI1BhC,GAAW,IAAA,GAAAgC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAnB,CAAA,GAAAS,EAAAT,GAAA,MAIb9B,EAAMe,UAAQ,IAAA,GAAAwB,EAAAT,GAAAU,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvB,EAAAA;AAAAA,MAAY;AAAA,MAAA,IAAAJ,WAAA;AAAA,YAAAoD,IAAAC,EAAAA;AAAA7B,eAAAA,EAAA4B,GACgBhD,CAAU,GAAAgD;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAzC;AAAAA,EAAA,GAAA;AAM5D;AAEyB2C,EAAA,CAAA,OAAA,CAAA;"}

package/dist/components/layout/screenDivider/screenDivider.d.ts

@@ -11,6 +11,18 @@ export interface ScreenDividerProps {
     keyboardStep?: number;
     /** Accessible label for the resizer handle. */
     resizerAriaLabel?: string;
+    /**
+     * Smallest size of the first pane that dragging and the keyboard (arrows, Home, End) leave it:
+     * a number is pixels, a string is `"120px"` or `"20%"`; any other unit is ignored. Unset means no minimum.
+     */
+    minSizeFirst?: number | string | undefined;
+    /** Smallest size of the second pane, same units as `minSizeFirst`. If both minimums do not fit, the first one wins. */
+    minSizeSecond?: number | string | undefined;
+    /**
+     * Folds one pane to zero and hides the resizer; the other pane takes the whole divider. Both panes stay mounted,
+     * and clearing it brings back the split the divider had. `onSizeChange` is not called for the fold.
+     */
+    collapsed?: "first" | "second" | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 export declare function ScreenDivider(props: ParentProps<ScreenDividerProps>): JSX.Element;

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

@@ -1,58 +1,96 @@
-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 { isServer as U, use as X, insert as Y, setAttribute as v, effect as ie, className as w, style as Z, template as re, delegateEvents as ne } from "solid-js/web";
 import '../../../assets/styles/less/components/screenDivider/screenDivider.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                     */
-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 ie(d) {
-  const l = X({
+import { mergeProps as oe, splitProps as se, createSignal as y, createEffect as p, children as ae, onCleanup as j } from "solid-js";
+import x from "clsx";
+import { throttle as de } from "../../../utils/throttle.js";
+import { mergeRefs as ce } from "../../../primitives/mergeRefs.js";
+var le = /* @__PURE__ */ re("<div data-testid=screen-divider><div></div><span class=smwb-screen-divider__resizer role=separator tabindex=0></span><div>");
+const ue = /^(\d*\.?\d+)(px|%)?$/i, S = (o) => {
+  if (o === void 0) return null;
+  if (typeof o == "number") return Number.isFinite(o) && o > 0 ? {
+    value: o,
+    unit: "px"
+  } : null;
+  const a = ue.exec(o.trim());
+  if (!a) return null;
+  const [, e = "", d] = a, c = parseFloat(e);
+  return c > 0 ? {
+    value: c,
+    unit: d === "%" ? "%" : "px"
+  } : null;
+}, b = (o, a) => {
+  const e = S(o);
+  return e ? e.unit === "%" ? e.value : a > 0 ? e.value / a * 100 : 0 : 0;
+}, M = (o, a, e) => {
+  const d = Math.min(100, b(o, e)), c = Math.max(d, 100 - b(a, e));
+  return [d, c];
+}, me = (o, a, e) => Math.min(100, b(o, e)) + b(a, e) > 100, f = (o, [a, e]) => Math.max(a, Math.min(e, o)), q = (o, a) => !o && a ? 100 - a : o || 50;
+function ge(o) {
+  const a = oe({
     orientation: "horizontal",
     keyboardStep: 5,
     resizerAriaLabel: "Resize panels"
-  }, d), [e] = Y(l, ["class", "orientation", "sizeFirst", "sizeSecond", "children", "onSizeChange", "keyboardStep", "resizerAriaLabel", "ref"]);
-  let h;
-  const [a, s] = x(C(e.sizeFirst, e.sizeSecond)), [p, g] = x(!1);
-  f(() => {
-    s(C(e.sizeFirst, e.sizeSecond));
-  }), f(() => {
-    e.onSizeChange?.(a());
+  }, o), [e] = se(a, ["class", "orientation", "sizeFirst", "sizeSecond", "children", "onSizeChange", "keyboardStep", "resizerAriaLabel", "minSizeFirst", "minSizeSecond", "collapsed", "ref"]);
+  let d, c, D = 0;
+  const [G, u] = y(q(e.sizeFirst, e.sizeSecond)), [k, A] = y(!1), [E, J] = y(0), l = () => e.orientation === "vertical", z = () => {
+    const t = (r) => {
+      const s = r?.getBoundingClientRect();
+      return s ? l() ? s.height : s.width : 0;
+    }, n = t(c);
+    return n > 0 && (D = n), Math.max(0, t(d) - (n > 0 ? n : D));
+  };
+  p(() => {
+    if (U || !S(e.minSizeFirst) && !S(e.minSizeSecond)) return;
+    e.orientation, e.collapsed;
+    const t = () => {
+      J(z());
+    };
+    if (t(), !d || typeof ResizeObserver > "u") return;
+    const n = new ResizeObserver(t);
+    n.observe(d), j(() => n.disconnect());
+  }), p(() => {
+    u(q(e.sizeFirst, e.sizeSecond));
+  });
+  const g = () => M(e.minSizeFirst, e.minSizeSecond, E()), m = () => f(G(), g());
+  p(() => {
+    e.onSizeChange?.(m());
   });
-  const _ = j(() => e.children), b = () => _.toArray(), y = G((t) => {
-    if (!p()) return;
-    const n = h;
+  const Q = ae(() => e.children), F = () => Q.toArray(), L = de((t) => {
+    if (!k() || e.collapsed) return;
+    const n = d;
     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 = () => {
-    g(!0);
-  }, w = () => {
-    g(!1);
+    const r = n.getBoundingClientRect(), s = l() ? r.height : r.width, h = l() ? t.clientY - r.top : t.clientX - r.left, i = Math.max(5, Math.min(s - 5, h));
+    u(f(i / s * 100, M(e.minSizeFirst, e.minSizeSecond, z())));
+  }, 1e3 / 60), V = () => {
+    A(!0);
+  }, R = () => {
+    A(!1);
   };
-  f(() => {
-    F || (p() ? (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);
+  p(() => {
+    U || (k() ? (document.body.addEventListener("pointerup", R), document.body.addEventListener("pointermove", L), document.body.style.cursor = e.orientation === "horizontal" ? "e-resize" : "n-resize") : document.body.style.cursor = "default", j(() => {
+      document.body.removeEventListener("pointerup", R), document.body.removeEventListener("pointermove", 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: `${a()}%`
-  }, I = () => e.orientation === "vertical" ? {
-    height: `${100 - a()}%`
-  } : {
-    width: `${100 - a()}%`
+  const W = (t) => {
+    const n = l() ? "ArrowUp" : "ArrowLeft", r = l() ? "ArrowDown" : "ArrowRight", s = M(e.minSizeFirst, e.minSizeSecond, z());
+    t.key === n ? (t.preventDefault(), u(f(Math.max(0, m() - e.keyboardStep), s))) : t.key === r ? (t.preventDefault(), u(f(Math.min(100, m() + e.keyboardStep), s))) : t.key === "Home" ? (t.preventDefault(), u(f(0, s))) : t.key === "End" && (t.preventDefault(), u(f(100, s)));
+  }, C = (t) => {
+    const n = t === "first" ? m() : 100 - m();
+    return e.collapsed ? e.collapsed === t ? 0 : 100 : n;
+  }, $ = (t) => {
+    const n = l() ? {
+      height: `${C(t)}%`
+    } : {
+      width: `${C(t)}%`
+    }, r = S(t === "first" ? e.minSizeFirst : e.minSizeSecond), s = t === "second" && me(e.minSizeFirst, e.minSizeSecond, E());
+    return !e.collapsed && !s && r?.unit === "px" && (n[l() ? "min-height" : "min-width"] = `${r.value}px`), n;
   };
   return (() => {
-    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;
+    var t = le(), n = t.firstChild, r = n.nextSibling, s = r.nextSibling, h = ce(e.ref, (i) => d = i);
+    return typeof h == "function" && X(h, t), Y(n, () => F()[0] ?? ""), r.$$keydown = W, r.$$pointerdown = V, X((i) => c = i, r), v(r, "draggable", !1), Y(s, () => F()[1] ?? ""), ie((i) => {
+      var B = x("smwb-screen-divider__wrapper", `smwb-${e.orientation}`, e.class), I = x("smwb-screen-divider__first", `smwb-${e.orientation}`, e.collapsed === "first" && "smwb-collapsed"), ee = $("first"), O = e.collapsed !== void 0, _ = e.orientation === "vertical" ? "horizontal" : "vertical", K = Math.round(m()), N = Math.round(g()[0]), P = Math.round(g()[1]), H = e.resizerAriaLabel, T = x("smwb-screen-divider__second", `smwb-${e.orientation}`, e.collapsed === "second" && "smwb-collapsed"), te = $("second");
+      return B !== i.e && w(t, i.e = B), I !== i.t && w(n, i.t = I), i.a = Z(n, ee, i.a), O !== i.o && (r.hidden = i.o = O), _ !== i.i && v(r, "aria-orientation", i.i = _), K !== i.n && v(r, "aria-valuenow", i.n = K), N !== i.s && v(r, "aria-valuemin", i.s = N), P !== i.h && v(r, "aria-valuemax", i.h = P), H !== i.r && v(r, "aria-label", i.r = H), T !== i.d && w(s, i.d = T), i.l = Z(s, te, i.l), i;
     }, {
       e: void 0,
       t: void 0,
@@ -61,12 +99,15 @@ function ie(d) {
       i: void 0,
       n: void 0,
       s: void 0,
-      h: void 0
+      h: void 0,
+      r: void 0,
+      d: void 0,
+      l: void 0
     }), t;
   })();
 }
-U(["pointerdown", "keydown"]);
+ne(["pointerdown", "keydown"]);
 export {
-  ie as ScreenDivider
+  ge as ScreenDivider
 };
 //# sourceMappingURL=screenDivider.js.map

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 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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"}
+{"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  /**\n   * Smallest size of the first pane that dragging and the keyboard (arrows, Home, End) leave it:\n   * a number is pixels, a string is `\"120px\"` or `\"20%\"`; any other unit is ignored. Unset means no minimum.\n   */\n  minSizeFirst?: number | string | undefined;\n  /** Smallest size of the second pane, same units as `minSizeFirst`. If both minimums do not fit, the first one wins. */\n  minSizeSecond?: number | string | undefined;\n  /**\n   * Folds one pane to zero and hides the resizer; the other pane takes the whole divider. Both panes stay mounted,\n   * and clearing it brings back the split the divider had. `onSizeChange` is not called for the fold.\n   */\n  collapsed?: \"first\" | \"second\" | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype ParsedMin = { value: number; unit: \"px\" | \"%\" } | null;\n\n// A bare number, or a number with `px` / `%`; any other unit (`rem`, `vh`, `calc(...)`) is no minimum.\nconst MIN_SIZE = /^(\\d*\\.?\\d+)(px|%)?$/i;\n\nconst parseMinSize = (min: number | string | undefined): ParsedMin => {\n  if (min === undefined) return null;\n  if (typeof min === \"number\") return Number.isFinite(min) && min > 0 ? { value: min, unit: \"px\" } : null;\n  const match = MIN_SIZE.exec(min.trim());\n  if (!match) return null;\n  const [, digits = \"\", unit] = match;\n  const value = parseFloat(digits);\n  return value > 0 ? { value, unit: unit === \"%\" ? \"%\" : \"px\" } : null;\n};\n\n/** A minimum as a share (percent) of `available` pixels, the space the two panes split. */\nconst minToPercent = (min: number | string | undefined, available: number): number => {\n  const parsed = parseMinSize(min);\n  if (!parsed) return 0;\n  if (parsed.unit === \"%\") return parsed.value;\n  return available > 0 ? (parsed.value / available) * 100 : 0;\n};\n\n/** The range of the first pane's share: the second pane's minimum caps it, the first pane's minimum wins a clash. */\nconst getBounds = (\n  minFirst: number | string | undefined,\n  minSecond: number | string | undefined,\n  available: number\n): [number, number] => {\n  const low = Math.min(100, minToPercent(minFirst, available));\n  const high = Math.max(low, 100 - minToPercent(minSecond, available));\n  return [low, high];\n};\n\n/** Whether the first pane's minimum leaves the second less than its own: then the first one wins. */\nconst minimumsClash = (\n  minFirst: number | string | undefined,\n  minSecond: number | string | undefined,\n  available: number\n): boolean => Math.min(100, minToPercent(minFirst, available)) + minToPercent(minSecond, available) > 100;\n\nconst clampDivider = (value: number, [low, high]: [number, number]) => Math.max(low, Math.min(high, value));\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    \"minSizeFirst\",\n    \"minSizeSecond\",\n    \"collapsed\",\n    \"ref\",\n  ]);\n\n  let wrapperEl: HTMLDivElement | undefined;\n  let resizerEl: HTMLSpanElement | undefined;\n  // The thickness the resizer had the last time it was shown.\n  let lastBar = 0;\n  const [divider, setDivider] = createSignal(getInitialDivider(local.sizeFirst, local.sizeSecond));\n  const [isDragging, setIsDragging] = createSignal(false);\n  const [available, setAvailable] = createSignal(0);\n  const vertical = (): boolean => local.orientation === \"vertical\";\n\n  // The pixels the two panes split: the wrapper along its main axis less the resizer. A hidden resizer measures 0, so\n  // the thickness it had while shown is subtracted instead, and folding a pane leaves the minimums where they were.\n  const measureAvailable = (): number => {\n    const main = (el: HTMLElement | undefined): number => {\n      const rect = el?.getBoundingClientRect();\n      return rect ? (vertical() ? rect.height : rect.width) : 0;\n    };\n    const bar = main(resizerEl);\n    if (bar > 0) lastBar = bar;\n    return Math.max(0, main(wrapperEl) - (bar > 0 ? bar : lastBar));\n  };\n\n  createEffect(() => {\n    if (isServer) return;\n    if (!parseMinSize(local.minSizeFirst) && !parseMinSize(local.minSizeSecond)) return;\n    // Measured again when the orientation or the folded pane changes, and when the wrapper resizes.\n    void local.orientation;\n    void local.collapsed;\n    const update = (): void => {\n      setAvailable(measureAvailable());\n    };\n    update();\n    if (!wrapperEl || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(update);\n    observer.observe(wrapperEl);\n    onCleanup(() => observer.disconnect());\n  });\n\n  // Sync with controlled size props.\n  createEffect(() => {\n    setDivider(getInitialDivider(local.sizeFirst, local.sizeSecond));\n  });\n\n  const bounds = (): [number, number] => getBounds(local.minSizeFirst, local.minSizeSecond, available());\n  // What the panes show: the split held within the minimums, whatever the props or the last resize said.\n  const shown = (): number => clampDivider(divider(), bounds());\n\n  // Report size changes.\n  createEffect(() => {\n    local.onSizeChange?.(shown());\n  });\n\n  const resolved = resolveChildren(() => local.children);\n  const child = (): unknown[] => resolved.toArray();\n\n  const dragOver = throttle((event: PointerEvent) => {\n    if (!isDragging() || local.collapsed) 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 = vertical() ? rect.height : rect.width;\n    const cursor = 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(\n      clampDivider((clamped / total) * 100, getBounds(local.minSizeFirst, local.minSizeSecond, measureAvailable()))\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 = vertical() ? \"ArrowUp\" : \"ArrowLeft\";\n    const increaseKey = vertical() ? \"ArrowDown\" : \"ArrowRight\";\n    // Measured now rather than read from the signal, so the minimums hold at the size the divider has this instant.\n    const keyBounds = getBounds(local.minSizeFirst, local.minSizeSecond, measureAvailable());\n    if (event.key === decreaseKey) {\n      event.preventDefault();\n      setDivider(clampDivider(Math.max(0, shown() - local.keyboardStep), keyBounds));\n    } else if (event.key === increaseKey) {\n      event.preventDefault();\n      setDivider(clampDivider(Math.min(100, shown() + local.keyboardStep), keyBounds));\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      setDivider(clampDivider(0, keyBounds));\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      setDivider(clampDivider(100, keyBounds));\n    }\n  };\n\n  // A folded pane is 0 and the other 100; both stay in the tree, so nothing inside either remounts.\n  const sizeOf = (pane: \"first\" | \"second\"): number => {\n    const share = pane === \"first\" ? shown() : 100 - shown();\n    return local.collapsed ? (local.collapsed === pane ? 0 : 100) : share;\n  };\n  const paneStyle = (pane: \"first\" | \"second\"): JSX.CSSProperties => {\n    const style: JSX.CSSProperties = vertical() ? { height: `${sizeOf(pane)}%` } : { width: `${sizeOf(pane)}%` };\n    // Pixel minimums also floor the pane in CSS, so it holds between a resize and the next measurement.\n    const min = parseMinSize(pane === \"first\" ? local.minSizeFirst : local.minSizeSecond);\n    // The second pane's floor would beat a first pane's minimum that wins the clash, so it gives way to it.\n    const gives = pane === \"second\" && minimumsClash(local.minSizeFirst, local.minSizeSecond, available());\n    if (!local.collapsed && !gives && min?.unit === \"px\")\n      style[vertical() ? \"min-height\" : \"min-width\"] = `${min.value}px`;\n    return style;\n  };\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\n        class={cn(\n          \"smwb-screen-divider__first\",\n          `smwb-${local.orientation}`,\n          local.collapsed === \"first\" && \"smwb-collapsed\"\n        )}\n        style={paneStyle(\"first\")}\n      >\n        {(child()[0] ?? \"\") as JSX.Element}\n      </div>\n      <span\n        ref={(el) => (resizerEl = el)}\n        class=\"smwb-screen-divider__resizer\"\n        hidden={local.collapsed !== undefined}\n        onPointerDown={handleDragStart}\n        draggable={false}\n        role=\"separator\"\n        aria-orientation={local.orientation === \"vertical\" ? \"horizontal\" : \"vertical\"}\n        aria-valuenow={Math.round(shown())}\n        aria-valuemin={Math.round(bounds()[0])}\n        aria-valuemax={Math.round(bounds()[1])}\n        aria-label={local.resizerAriaLabel}\n        tabindex={0}\n        onKeyDown={onResizerKeyDown}\n      />\n      <div\n        class={cn(\n          \"smwb-screen-divider__second\",\n          `smwb-${local.orientation}`,\n          local.collapsed === \"second\" && \"smwb-collapsed\"\n        )}\n        style={paneStyle(\"second\")}\n      >\n        {(child()[1] ?? \"\") as JSX.Element}\n      </div>\n    </div>\n  );\n}\n\nexport default ScreenDivider;\n"],"names":["MIN_SIZE","parseMinSize","min","undefined","Number","isFinite","value","unit","match","exec","trim","digits","parseFloat","minToPercent","available","parsed","getBounds","minFirst","minSecond","low","Math","high","max","minimumsClash","clampDivider","getInitialDivider","sizeFirst","sizeSecond","ScreenDivider","props","merged","mergeProps","orientation","keyboardStep","resizerAriaLabel","local","splitProps","wrapperEl","resizerEl","lastBar","divider","setDivider","createSignal","isDragging","setIsDragging","setAvailable","vertical","measureAvailable","main","el","rect","getBoundingClientRect","height","width","bar","createEffect","isServer","minSizeFirst","minSizeSecond","collapsed","update","ResizeObserver","observer","observe","onCleanup","disconnect","bounds","shown","onSizeChange","resolved","resolveChildren","children","child","toArray","dragOver","throttle","event","wrapper","total","cursor","clientY","top","clientX","left","clamped","handleDragStart","handleDragEnd","document","body","addEventListener","style","removeEventListener","onResizerKeyDown","decreaseKey","increaseKey","keyBounds","key","preventDefault","sizeOf","pane","share","paneStyle","gives","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_ref$","mergeRefs","ref","_$use","_$insert","$$keydown","$$pointerdown","_$setAttribute","_$effect","_p$","_v$","cn","class","_v$2","_v$3","_v$4","_v$5","_v$6","round","_v$7","_v$8","_v$9","_v$0","_v$1","e","_$className","t","a","_$style","o","hidden","i","n","s","h","r","d","l","_$delegateEvents"],"mappings":"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"}

package/dist/components/layout/sheet/sheet.d.ts

@@ -22,6 +22,17 @@ export interface SheetProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "on
     /** Accessible name of the size toggle while the sheet is collapsed to its header (default "Restore sheet size"). */
     restoreAriaLabel?: string;
     size?: string;
+    /**
+     * Gap between the top edge of the window and the top of the sheet and of its modal scrim (px, or any CSS length),
+     * so a panel can start below a fixed app bar and leave it visible and clickable. It applies to the `top`, `left`
+     * and `right` placements and to the scrim of every placement. Without it the sheet takes the page's
+     * `--smui-sheet-offset-top`, which `AppLayout` sets to the height of its sticky header and which is 0 elsewhere;
+     * `offsetTop={0}` covers the header anyway. A press in the strip above a modal scrim belongs to the page and does
+     * not close the sheet, so a header button can toggle it. The modal sheet keeps `aria-modal`, though that strip can
+     * still be reached by pointer and Tab; for a header that must stay available to assistive technology, use
+     * `variant="default"`.
+     */
+    offsetTop?: number | string;
     disableOutsideClick?: boolean;
     /** Close the sheet when Escape is pressed. */
     closeOnEsc?: boolean;