@flanksource/clicky-ui 0.3.54 → 0.3.56

package/dist/lib/breakpoints.js

@@ -0,0 +1,99 @@
+// src/lib/breakpoints.ts
+/**
+* The one breakpoint scale for the library: Tailwind's default screens plus the
+* preset's `3xl`. Components that branch in JS (`useMediaQuery`) must phrase
+* their query through `belowBreakpoint` so the JS switch lands on the same pixel
+* as the `sm:`/`md:` classes that style the other side of it.
+*/
+var BREAKPOINTS = {
+	sm: 640,
+	md: 768,
+	lg: 1024,
+	xl: 1280,
+	"2xl": 1536,
+	"3xl": 1920
+};
+/** Matches viewports narrower than `bp` — the complement of Tailwind's `bp:` prefix. */
+function belowBreakpoint(bp) {
+	return `(max-width: ${BREAKPOINTS[bp] - 1}px)`;
+}
+/**
+* Viewports worth checking a layout at, smallest first. Each sits on a side of a
+* breakpoint that real devices land on, so sweeping the list exercises every
+* branch: 320 (smallest supported phone), 390 (current iPhone), 768 (tablet
+* portrait, exactly `md`), 844×390 (phone landscape: `md` width, phone height),
+* 1024 (tablet landscape / small laptop, exactly `lg`), then desktop widths.
+* Storybook's viewport toolbar, the kitchen-sink sweep and the e2e overflow
+* check all read this list.
+*/
+var VIEWPORT_PRESETS = [
+	{
+		id: "phone-sm",
+		label: "Phone S",
+		width: 320,
+		height: 568,
+		kind: "phone"
+	},
+	{
+		id: "phone",
+		label: "Phone",
+		width: 390,
+		height: 844,
+		kind: "phone"
+	},
+	{
+		id: "phone-lg",
+		label: "Phone L",
+		width: 430,
+		height: 932,
+		kind: "phone"
+	},
+	{
+		id: "tablet",
+		label: "Tablet",
+		width: 768,
+		height: 1024,
+		kind: "tablet"
+	},
+	{
+		id: "phone-landscape",
+		label: "Phone landscape",
+		width: 844,
+		height: 390,
+		kind: "phone"
+	},
+	{
+		id: "tablet-landscape",
+		label: "Tablet landscape",
+		width: 1024,
+		height: 768,
+		kind: "tablet"
+	},
+	{
+		id: "laptop",
+		label: "Laptop",
+		width: 1280,
+		height: 800,
+		kind: "desktop"
+	},
+	{
+		id: "desktop",
+		label: "Desktop",
+		width: 1440,
+		height: 900,
+		kind: "desktop"
+	},
+	{
+		id: "wide",
+		label: "Wide",
+		width: 1920,
+		height: 1080,
+		kind: "desktop"
+	}
+];
+function findViewportPreset(id) {
+	return VIEWPORT_PRESETS.find((preset) => preset.id === id);
+}
+export { BREAKPOINTS, VIEWPORT_PRESETS, belowBreakpoint, findViewportPreset };
+
+//# sourceMappingURL=breakpoints.js.map

package/dist/lib/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","names":[],"sources":["../../src/lib/breakpoints.ts"],"sourcesContent":["/**\n * The one breakpoint scale for the library: Tailwind's default screens plus the\n * preset's `3xl`. Components that branch in JS (`useMediaQuery`) must phrase\n * their query through `belowBreakpoint` so the JS switch lands on the same pixel\n * as the `sm:`/`md:` classes that style the other side of it.\n */\nexport const BREAKPOINTS = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  \"2xl\": 1536,\n  \"3xl\": 1920,\n} as const;\n\nexport type Breakpoint = keyof typeof BREAKPOINTS;\n\n/** Matches viewports narrower than `bp` — the complement of Tailwind's `bp:` prefix. */\nexport function belowBreakpoint(bp: Breakpoint): string {\n  return `(max-width: ${BREAKPOINTS[bp] - 1}px)`;\n}\n\nexport type ViewportPreset = {\n  id: string;\n  label: string;\n  width: number;\n  height: number;\n  kind: \"phone\" | \"tablet\" | \"desktop\";\n};\n\n/**\n * Viewports worth checking a layout at, smallest first. Each sits on a side of a\n * breakpoint that real devices land on, so sweeping the list exercises every\n * branch: 320 (smallest supported phone), 390 (current iPhone), 768 (tablet\n * portrait, exactly `md`), 844×390 (phone landscape: `md` width, phone height),\n * 1024 (tablet landscape / small laptop, exactly `lg`), then desktop widths.\n * Storybook's viewport toolbar, the kitchen-sink sweep and the e2e overflow\n * check all read this list.\n */\nexport const VIEWPORT_PRESETS: readonly ViewportPreset[] = [\n  { id: \"phone-sm\", label: \"Phone S\", width: 320, height: 568, kind: \"phone\" },\n  { id: \"phone\", label: \"Phone\", width: 390, height: 844, kind: \"phone\" },\n  { id: \"phone-lg\", label: \"Phone L\", width: 430, height: 932, kind: \"phone\" },\n  { id: \"tablet\", label: \"Tablet\", width: 768, height: 1024, kind: \"tablet\" },\n  { id: \"phone-landscape\", label: \"Phone landscape\", width: 844, height: 390, kind: \"phone\" },\n  { id: \"tablet-landscape\", label: \"Tablet landscape\", width: 1024, height: 768, kind: \"tablet\" },\n  { id: \"laptop\", label: \"Laptop\", width: 1280, height: 800, kind: \"desktop\" },\n  { id: \"desktop\", label: \"Desktop\", width: 1440, height: 900, kind: \"desktop\" },\n  { id: \"wide\", label: \"Wide\", width: 1920, height: 1080, kind: \"desktop\" },\n];\n\nexport function findViewportPreset(id: string | null | undefined): ViewportPreset | undefined {\n  return VIEWPORT_PRESETS.find((preset) => preset.id === id);\n}\n"],"mappings":";;;;;;;AAMA,IAAa,cAAc;CACzB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;AACT;;AAKA,SAAgB,gBAAgB,IAAwB;CACtD,OAAO,eAAe,YAAY,MAAM,EAAE;AAC5C;;;;;;;;;;AAmBA,IAAa,mBAA8C;CACzD;EAAE,IAAI;EAAY,OAAO;EAAW,OAAO;EAAK,QAAQ;EAAK,MAAM;CAAQ;CAC3E;EAAE,IAAI;EAAS,OAAO;EAAS,OAAO;EAAK,QAAQ;EAAK,MAAM;CAAQ;CACtE;EAAE,IAAI;EAAY,OAAO;EAAW,OAAO;EAAK,QAAQ;EAAK,MAAM;CAAQ;CAC3E;EAAE,IAAI;EAAU,OAAO;EAAU,OAAO;EAAK,QAAQ;EAAM,MAAM;CAAS;CAC1E;EAAE,IAAI;EAAmB,OAAO;EAAmB,OAAO;EAAK,QAAQ;EAAK,MAAM;CAAQ;CAC1F;EAAE,IAAI;EAAoB,OAAO;EAAoB,OAAO;EAAM,QAAQ;EAAK,MAAM;CAAS;CAC9F;EAAE,IAAI;EAAU,OAAO;EAAU,OAAO;EAAM,QAAQ;EAAK,MAAM;CAAU;CAC3E;EAAE,IAAI;EAAW,OAAO;EAAW,OAAO;EAAM,QAAQ;EAAK,MAAM;CAAU;CAC7E;EAAE,IAAI;EAAQ,OAAO;EAAQ,OAAO;EAAM,QAAQ;EAAM,MAAM;CAAU;AAC1E;AAEA,SAAgB,mBAAmB,IAA2D;CAC5F,OAAO,iBAAiB,MAAM,WAAW,OAAO,OAAO,EAAE;AAC3D"}

package/dist/lib/combobox.cjs

@@ -1,6 +1,7 @@
+const require_breakpoints = require("./breakpoints.cjs");
 // src/lib/combobox.ts
 var COMBOBOX_MENU_MAX_WIDTH_PX = 400;
-var COMBOBOX_MOBILE_QUERY = "(max-width: 639px)";
+var COMBOBOX_MOBILE_QUERY = require_breakpoints.belowBreakpoint("sm");
 var COMBOBOX_MENU_EDGE_INSET_PX = 8;
 var COMBOBOX_MENU_ANCHOR_GAP_PX = 4;
 var COMBOBOX_MOBILE_HORIZONTAL_INSET_PX = 16;

package/dist/lib/combobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.cjs","names":[],"sources":["../../src/lib/combobox.ts"],"sourcesContent":["export const COMBOBOX_MENU_MAX_WIDTH_PX = 400;\nexport const COMBOBOX_MOBILE_QUERY = \"(max-width: 639px)\";\n\nconst COMBOBOX_MENU_EDGE_INSET_PX = 8;\nconst COMBOBOX_MENU_ANCHOR_GAP_PX = 4;\nconst COMBOBOX_MOBILE_HORIZONTAL_INSET_PX = 16;\n\nexport type ComboboxMenuPosition = {\n  strategy: \"desktop\" | \"mobile\";\n  top?: number;\n  bottom?: number;\n  left: number;\n  width: number;\n  maxWidth: number;\n  maxHeight: number;\n};\n\nexport function calculateComboboxMenuPosition({\n  anchor,\n  viewportWidth,\n  viewportHeight,\n  mobile,\n  naturalHeight,\n  preferredWidth,\n}: {\n  anchor: Pick<DOMRect, \"top\" | \"bottom\" | \"left\" | \"width\">;\n  viewportWidth: number;\n  viewportHeight: number;\n  mobile: boolean;\n  naturalHeight?: number;\n  preferredWidth?: number;\n}): ComboboxMenuPosition {\n  if (preferredWidth !== undefined && (!Number.isFinite(preferredWidth) || preferredWidth <= 0)) throw new Error(\"Combobox menu width must be a positive finite number.\");\n  if (mobile) {\n    const spaceBelow = Math.max(\n      0,\n      viewportHeight -\n        anchor.bottom -\n        COMBOBOX_MENU_ANCHOR_GAP_PX -\n        COMBOBOX_MENU_EDGE_INSET_PX,\n    );\n    const spaceAbove = Math.max(\n      0,\n      anchor.top - COMBOBOX_MENU_ANCHOR_GAP_PX - COMBOBOX_MENU_EDGE_INSET_PX,\n    );\n    const openUp =\n      naturalHeight != null &&\n      naturalHeight > spaceBelow &&\n      spaceAbove > spaceBelow;\n    const width = Math.max(\n      0,\n      viewportWidth - COMBOBOX_MOBILE_HORIZONTAL_INSET_PX * 2,\n    );\n    return menuPosition({\n      strategy: \"mobile\",\n      anchor,\n      viewportHeight,\n      openUp,\n      left: COMBOBOX_MOBILE_HORIZONTAL_INSET_PX,\n      width,\n      maxWidth: width,\n      maxHeight: openUp ? spaceAbove : spaceBelow,\n    });\n  }\n\n  const spaceBelow = Math.max(\n    0,\n    viewportHeight -\n      anchor.bottom -\n      COMBOBOX_MENU_ANCHOR_GAP_PX -\n      COMBOBOX_MENU_EDGE_INSET_PX,\n  );\n  const spaceAbove = Math.max(\n    0,\n    anchor.top - COMBOBOX_MENU_ANCHOR_GAP_PX - COMBOBOX_MENU_EDGE_INSET_PX,\n  );\n  const openUp =\n    naturalHeight != null &&\n    naturalHeight > spaceBelow &&\n    spaceAbove > spaceBelow;\n  const preferred = preferredWidth === undefined ? undefined : Math.min(Math.max(anchor.width, preferredWidth), Math.max(0, viewportWidth - COMBOBOX_MENU_EDGE_INSET_PX * 2));\n  return menuPosition({\n    strategy: \"desktop\",\n    anchor,\n    viewportHeight,\n    openUp,\n    left: preferred === undefined ? anchor.left : Math.max(COMBOBOX_MENU_EDGE_INSET_PX, Math.min(anchor.left, viewportWidth - preferred - COMBOBOX_MENU_EDGE_INSET_PX)),\n    width: preferred ?? anchor.width,\n    maxWidth: preferred ?? Math.max(\n      anchor.width,\n      Math.min(\n        COMBOBOX_MENU_MAX_WIDTH_PX,\n        viewportWidth - anchor.left - COMBOBOX_MENU_EDGE_INSET_PX,\n      ),\n    ),\n    maxHeight: openUp ? spaceAbove : spaceBelow,\n  });\n}\n\nfunction menuPosition({\n  strategy,\n  anchor,\n  viewportHeight,\n  openUp,\n  left,\n  width,\n  maxWidth,\n  maxHeight,\n}: Omit<ComboboxMenuPosition, \"top\" | \"bottom\"> & {\n  anchor: Pick<DOMRect, \"top\" | \"bottom\">;\n  viewportHeight: number;\n  openUp: boolean;\n}): ComboboxMenuPosition {\n  return {\n    strategy,\n    ...(openUp\n      ? { bottom: viewportHeight - anchor.top + COMBOBOX_MENU_ANCHOR_GAP_PX }\n      : { top: anchor.bottom + COMBOBOX_MENU_ANCHOR_GAP_PX }),\n    left,\n    width,\n    maxWidth,\n    maxHeight,\n  };\n}\n"],"mappings":";AAAA,IAAa,6BAA6B;AAC1C,IAAa,wBAAwB;AAErC,IAAM,8BAA8B;AACpC,IAAM,8BAA8B;AACpC,IAAM,sCAAsC;AAY5C,SAAgB,8BAA8B,EAC5C,QACA,eACA,gBACA,QACA,eACA,kBAQuB;CACvB,IAAI,mBAAmB,KAAA,MAAc,CAAC,OAAO,SAAS,cAAc,KAAK,kBAAkB,IAAI,MAAM,IAAI,MAAM,uDAAuD;CACtK,IAAI,QAAQ;EACV,MAAM,aAAa,KAAK,IACtB,GACA,iBACE,OAAO,SACP,8BACA,2BACJ;EACA,MAAM,aAAa,KAAK,IACtB,GACA,OAAO,MAAM,8BAA8B,2BAC7C;EACA,MAAM,SACJ,iBAAiB,QACjB,gBAAgB,cAChB,aAAa;EACf,MAAM,QAAQ,KAAK,IACjB,GACA,gBAAgB,EAClB;EACA,OAAO,aAAa;GAClB,UAAU;GACV;GACA;GACA;GACA,MAAM;GACN;GACA,UAAU;GACV,WAAW,SAAS,aAAa;EACnC,CAAC;CACH;CAEA,MAAM,aAAa,KAAK,IACtB,GACA,iBACE,OAAO,SACP,8BACA,2BACJ;CACA,MAAM,aAAa,KAAK,IACtB,GACA,OAAO,MAAM,8BAA8B,2BAC7C;CACA,MAAM,SACJ,iBAAiB,QACjB,gBAAgB,cAChB,aAAa;CACf,MAAM,YAAY,mBAAmB,KAAA,IAAY,KAAA,IAAY,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,cAAc,GAAG,KAAK,IAAI,GAAG,gBAAgB,EAA+B,CAAC;CAC1K,OAAO,aAAa;EAClB,UAAU;EACV;EACA;EACA;EACA,MAAM,cAAc,KAAA,IAAY,OAAO,OAAO,KAAK,IAAI,6BAA6B,KAAK,IAAI,OAAO,MAAM,gBAAgB,YAAY,2BAA2B,CAAC;EAClK,OAAO,aAAa,OAAO;EAC3B,UAAU,aAAa,KAAK,IAC1B,OAAO,OACP,KAAK,IAAA,KAEH,gBAAgB,OAAO,OAAO,2BAChC,CACF;EACA,WAAW,SAAS,aAAa;CACnC,CAAC;AACH;AAEA,SAAS,aAAa,EACpB,UACA,QACA,gBACA,QACA,MACA,OACA,UACA,aAKuB;CACvB,OAAO;EACL;EACA,GAAI,SACA,EAAE,QAAQ,iBAAiB,OAAO,MAAM,4BAA4B,IACpE,EAAE,KAAK,OAAO,SAAS,4BAA4B;EACvD;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"combobox.cjs","names":["belowBreakpoint"],"sources":["../../src/lib/combobox.ts"],"sourcesContent":["import { belowBreakpoint } from \"./breakpoints\";\n\nexport const COMBOBOX_MENU_MAX_WIDTH_PX = 400;\nexport const COMBOBOX_MOBILE_QUERY = belowBreakpoint(\"sm\");\n\nconst COMBOBOX_MENU_EDGE_INSET_PX = 8;\nconst COMBOBOX_MENU_ANCHOR_GAP_PX = 4;\nconst COMBOBOX_MOBILE_HORIZONTAL_INSET_PX = 16;\n\nexport type ComboboxMenuPosition = {\n  strategy: \"desktop\" | \"mobile\";\n  top?: number;\n  bottom?: number;\n  left: number;\n  width: number;\n  maxWidth: number;\n  maxHeight: number;\n};\n\nexport function calculateComboboxMenuPosition({\n  anchor,\n  viewportWidth,\n  viewportHeight,\n  mobile,\n  naturalHeight,\n  preferredWidth,\n}: {\n  anchor: Pick<DOMRect, \"top\" | \"bottom\" | \"left\" | \"width\">;\n  viewportWidth: number;\n  viewportHeight: number;\n  mobile: boolean;\n  naturalHeight?: number;\n  preferredWidth?: number;\n}): ComboboxMenuPosition {\n  if (preferredWidth !== undefined && (!Number.isFinite(preferredWidth) || preferredWidth <= 0)) throw new Error(\"Combobox menu width must be a positive finite number.\");\n  if (mobile) {\n    const spaceBelow = Math.max(\n      0,\n      viewportHeight -\n        anchor.bottom -\n        COMBOBOX_MENU_ANCHOR_GAP_PX -\n        COMBOBOX_MENU_EDGE_INSET_PX,\n    );\n    const spaceAbove = Math.max(\n      0,\n      anchor.top - COMBOBOX_MENU_ANCHOR_GAP_PX - COMBOBOX_MENU_EDGE_INSET_PX,\n    );\n    const openUp =\n      naturalHeight != null &&\n      naturalHeight > spaceBelow &&\n      spaceAbove > spaceBelow;\n    const width = Math.max(\n      0,\n      viewportWidth - COMBOBOX_MOBILE_HORIZONTAL_INSET_PX * 2,\n    );\n    return menuPosition({\n      strategy: \"mobile\",\n      anchor,\n      viewportHeight,\n      openUp,\n      left: COMBOBOX_MOBILE_HORIZONTAL_INSET_PX,\n      width,\n      maxWidth: width,\n      maxHeight: openUp ? spaceAbove : spaceBelow,\n    });\n  }\n\n  const spaceBelow = Math.max(\n    0,\n    viewportHeight -\n      anchor.bottom -\n      COMBOBOX_MENU_ANCHOR_GAP_PX -\n      COMBOBOX_MENU_EDGE_INSET_PX,\n  );\n  const spaceAbove = Math.max(\n    0,\n    anchor.top - COMBOBOX_MENU_ANCHOR_GAP_PX - COMBOBOX_MENU_EDGE_INSET_PX,\n  );\n  const openUp =\n    naturalHeight != null &&\n    naturalHeight > spaceBelow &&\n    spaceAbove > spaceBelow;\n  const preferred = preferredWidth === undefined ? undefined : Math.min(Math.max(anchor.width, preferredWidth), Math.max(0, viewportWidth - COMBOBOX_MENU_EDGE_INSET_PX * 2));\n  return menuPosition({\n    strategy: \"desktop\",\n    anchor,\n    viewportHeight,\n    openUp,\n    left: preferred === undefined ? anchor.left : Math.max(COMBOBOX_MENU_EDGE_INSET_PX, Math.min(anchor.left, viewportWidth - preferred - COMBOBOX_MENU_EDGE_INSET_PX)),\n    width: preferred ?? anchor.width,\n    maxWidth: preferred ?? Math.max(\n      anchor.width,\n      Math.min(\n        COMBOBOX_MENU_MAX_WIDTH_PX,\n        viewportWidth - anchor.left - COMBOBOX_MENU_EDGE_INSET_PX,\n      ),\n    ),\n    maxHeight: openUp ? spaceAbove : spaceBelow,\n  });\n}\n\nfunction menuPosition({\n  strategy,\n  anchor,\n  viewportHeight,\n  openUp,\n  left,\n  width,\n  maxWidth,\n  maxHeight,\n}: Omit<ComboboxMenuPosition, \"top\" | \"bottom\"> & {\n  anchor: Pick<DOMRect, \"top\" | \"bottom\">;\n  viewportHeight: number;\n  openUp: boolean;\n}): ComboboxMenuPosition {\n  return {\n    strategy,\n    ...(openUp\n      ? { bottom: viewportHeight - anchor.top + COMBOBOX_MENU_ANCHOR_GAP_PX }\n      : { top: anchor.bottom + COMBOBOX_MENU_ANCHOR_GAP_PX }),\n    left,\n    width,\n    maxWidth,\n    maxHeight,\n  };\n}\n"],"mappings":";;AAEA,IAAa,6BAA6B;AAC1C,IAAa,wBAAwBA,oBAAAA,gBAAgB,IAAI;AAEzD,IAAM,8BAA8B;AACpC,IAAM,8BAA8B;AACpC,IAAM,sCAAsC;AAY5C,SAAgB,8BAA8B,EAC5C,QACA,eACA,gBACA,QACA,eACA,kBAQuB;CACvB,IAAI,mBAAmB,KAAA,MAAc,CAAC,OAAO,SAAS,cAAc,KAAK,kBAAkB,IAAI,MAAM,IAAI,MAAM,uDAAuD;CACtK,IAAI,QAAQ;EACV,MAAM,aAAa,KAAK,IACtB,GACA,iBACE,OAAO,SACP,8BACA,2BACJ;EACA,MAAM,aAAa,KAAK,IACtB,GACA,OAAO,MAAM,8BAA8B,2BAC7C;EACA,MAAM,SACJ,iBAAiB,QACjB,gBAAgB,cAChB,aAAa;EACf,MAAM,QAAQ,KAAK,IACjB,GACA,gBAAgB,EAClB;EACA,OAAO,aAAa;GAClB,UAAU;GACV;GACA;GACA;GACA,MAAM;GACN;GACA,UAAU;GACV,WAAW,SAAS,aAAa;EACnC,CAAC;CACH;CAEA,MAAM,aAAa,KAAK,IACtB,GACA,iBACE,OAAO,SACP,8BACA,2BACJ;CACA,MAAM,aAAa,KAAK,IACtB,GACA,OAAO,MAAM,8BAA8B,2BAC7C;CACA,MAAM,SACJ,iBAAiB,QACjB,gBAAgB,cAChB,aAAa;CACf,MAAM,YAAY,mBAAmB,KAAA,IAAY,KAAA,IAAY,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,cAAc,GAAG,KAAK,IAAI,GAAG,gBAAgB,EAA+B,CAAC;CAC1K,OAAO,aAAa;EAClB,UAAU;EACV;EACA;EACA;EACA,MAAM,cAAc,KAAA,IAAY,OAAO,OAAO,KAAK,IAAI,6BAA6B,KAAK,IAAI,OAAO,MAAM,gBAAgB,YAAY,2BAA2B,CAAC;EAClK,OAAO,aAAa,OAAO;EAC3B,UAAU,aAAa,KAAK,IAC1B,OAAO,OACP,KAAK,IAAA,KAEH,gBAAgB,OAAO,OAAO,2BAChC,CACF;EACA,WAAW,SAAS,aAAa;CACnC,CAAC;AACH;AAEA,SAAS,aAAa,EACpB,UACA,QACA,gBACA,QACA,MACA,OACA,UACA,aAKuB;CACvB,OAAO;EACL;EACA,GAAI,SACA,EAAE,QAAQ,iBAAiB,OAAO,MAAM,4BAA4B,IACpE,EAAE,KAAK,OAAO,SAAS,4BAA4B;EACvD;EACA;EACA;EACA;CACF;AACF"}

package/dist/lib/combobox.d.ts

@@ -1,5 +1,5 @@
 export declare const COMBOBOX_MENU_MAX_WIDTH_PX = 400;
-export declare const COMBOBOX_MOBILE_QUERY = "(max-width: 639px)";
+export declare const COMBOBOX_MOBILE_QUERY: string;
 export type ComboboxMenuPosition = {
     strategy: "desktop" | "mobile";
     top?: number;

package/dist/lib/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/lib/combobox.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,eAAO,MAAM,qBAAqB,uBAAuB,CAAC;AAM1D,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,6BAA6B,CAAC,EAC5C,MAAM,EACN,aAAa,EACb,cAAc,EACd,MAAM,EACN,aAAa,EACb,cAAc,GACf,EAAE;IACD,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAC3D,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,oBAAoB,CAkEvB"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/lib/combobox.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,eAAO,MAAM,qBAAqB,QAAwB,CAAC;AAM3D,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,6BAA6B,CAAC,EAC5C,MAAM,EACN,aAAa,EACb,cAAc,EACd,MAAM,EACN,aAAa,EACb,cAAc,GACf,EAAE;IACD,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAC3D,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,oBAAoB,CAkEvB"}

package/dist/lib/combobox.js

@@ -1,6 +1,7 @@
+import { belowBreakpoint } from "./breakpoints.js";
 // src/lib/combobox.ts
 var COMBOBOX_MENU_MAX_WIDTH_PX = 400;
-var COMBOBOX_MOBILE_QUERY = "(max-width: 639px)";
+var COMBOBOX_MOBILE_QUERY = belowBreakpoint("sm");
 var COMBOBOX_MENU_EDGE_INSET_PX = 8;
 var COMBOBOX_MENU_ANCHOR_GAP_PX = 4;
 var COMBOBOX_MOBILE_HORIZONTAL_INSET_PX = 16;

package/dist/lib/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../../src/lib/combobox.ts"],"sourcesContent":["export const COMBOBOX_MENU_MAX_WIDTH_PX = 400;\nexport const COMBOBOX_MOBILE_QUERY = \"(max-width: 639px)\";\n\nconst COMBOBOX_MENU_EDGE_INSET_PX = 8;\nconst COMBOBOX_MENU_ANCHOR_GAP_PX = 4;\nconst COMBOBOX_MOBILE_HORIZONTAL_INSET_PX = 16;\n\nexport type ComboboxMenuPosition = {\n  strategy: \"desktop\" | \"mobile\";\n  top?: number;\n  bottom?: number;\n  left: number;\n  width: number;\n  maxWidth: number;\n  maxHeight: number;\n};\n\nexport function calculateComboboxMenuPosition({\n  anchor,\n  viewportWidth,\n  viewportHeight,\n  mobile,\n  naturalHeight,\n  preferredWidth,\n}: {\n  anchor: Pick<DOMRect, \"top\" | \"bottom\" | \"left\" | \"width\">;\n  viewportWidth: number;\n  viewportHeight: number;\n  mobile: boolean;\n  naturalHeight?: number;\n  preferredWidth?: number;\n}): ComboboxMenuPosition {\n  if (preferredWidth !== undefined && (!Number.isFinite(preferredWidth) || preferredWidth <= 0)) throw new Error(\"Combobox menu width must be a positive finite number.\");\n  if (mobile) {\n    const spaceBelow = Math.max(\n      0,\n      viewportHeight -\n        anchor.bottom -\n        COMBOBOX_MENU_ANCHOR_GAP_PX -\n        COMBOBOX_MENU_EDGE_INSET_PX,\n    );\n    const spaceAbove = Math.max(\n      0,\n      anchor.top - COMBOBOX_MENU_ANCHOR_GAP_PX - COMBOBOX_MENU_EDGE_INSET_PX,\n    );\n    const openUp =\n      naturalHeight != null &&\n      naturalHeight > spaceBelow &&\n      spaceAbove > spaceBelow;\n    const width = Math.max(\n      0,\n      viewportWidth - COMBOBOX_MOBILE_HORIZONTAL_INSET_PX * 2,\n    );\n    return menuPosition({\n      strategy: \"mobile\",\n      anchor,\n      viewportHeight,\n      openUp,\n      left: COMBOBOX_MOBILE_HORIZONTAL_INSET_PX,\n      width,\n      maxWidth: width,\n      maxHeight: openUp ? spaceAbove : spaceBelow,\n    });\n  }\n\n  const spaceBelow = Math.max(\n    0,\n    viewportHeight -\n      anchor.bottom -\n      COMBOBOX_MENU_ANCHOR_GAP_PX -\n      COMBOBOX_MENU_EDGE_INSET_PX,\n  );\n  const spaceAbove = Math.max(\n    0,\n    anchor.top - COMBOBOX_MENU_ANCHOR_GAP_PX - COMBOBOX_MENU_EDGE_INSET_PX,\n  );\n  const openUp =\n    naturalHeight != null &&\n    naturalHeight > spaceBelow &&\n    spaceAbove > spaceBelow;\n  const preferred = preferredWidth === undefined ? undefined : Math.min(Math.max(anchor.width, preferredWidth), Math.max(0, viewportWidth - COMBOBOX_MENU_EDGE_INSET_PX * 2));\n  return menuPosition({\n    strategy: \"desktop\",\n    anchor,\n    viewportHeight,\n    openUp,\n    left: preferred === undefined ? anchor.left : Math.max(COMBOBOX_MENU_EDGE_INSET_PX, Math.min(anchor.left, viewportWidth - preferred - COMBOBOX_MENU_EDGE_INSET_PX)),\n    width: preferred ?? anchor.width,\n    maxWidth: preferred ?? Math.max(\n      anchor.width,\n      Math.min(\n        COMBOBOX_MENU_MAX_WIDTH_PX,\n        viewportWidth - anchor.left - COMBOBOX_MENU_EDGE_INSET_PX,\n      ),\n    ),\n    maxHeight: openUp ? spaceAbove : spaceBelow,\n  });\n}\n\nfunction menuPosition({\n  strategy,\n  anchor,\n  viewportHeight,\n  openUp,\n  left,\n  width,\n  maxWidth,\n  maxHeight,\n}: Omit<ComboboxMenuPosition, \"top\" | \"bottom\"> & {\n  anchor: Pick<DOMRect, \"top\" | \"bottom\">;\n  viewportHeight: number;\n  openUp: boolean;\n}): ComboboxMenuPosition {\n  return {\n    strategy,\n    ...(openUp\n      ? { bottom: viewportHeight - anchor.top + COMBOBOX_MENU_ANCHOR_GAP_PX }\n      : { top: anchor.bottom + COMBOBOX_MENU_ANCHOR_GAP_PX }),\n    left,\n    width,\n    maxWidth,\n    maxHeight,\n  };\n}\n"],"mappings":";AAAA,IAAa,6BAA6B;AAC1C,IAAa,wBAAwB;AAErC,IAAM,8BAA8B;AACpC,IAAM,8BAA8B;AACpC,IAAM,sCAAsC;AAY5C,SAAgB,8BAA8B,EAC5C,QACA,eACA,gBACA,QACA,eACA,kBAQuB;CACvB,IAAI,mBAAmB,KAAA,MAAc,CAAC,OAAO,SAAS,cAAc,KAAK,kBAAkB,IAAI,MAAM,IAAI,MAAM,uDAAuD;CACtK,IAAI,QAAQ;EACV,MAAM,aAAa,KAAK,IACtB,GACA,iBACE,OAAO,SACP,8BACA,2BACJ;EACA,MAAM,aAAa,KAAK,IACtB,GACA,OAAO,MAAM,8BAA8B,2BAC7C;EACA,MAAM,SACJ,iBAAiB,QACjB,gBAAgB,cAChB,aAAa;EACf,MAAM,QAAQ,KAAK,IACjB,GACA,gBAAgB,EAClB;EACA,OAAO,aAAa;GAClB,UAAU;GACV;GACA;GACA;GACA,MAAM;GACN;GACA,UAAU;GACV,WAAW,SAAS,aAAa;EACnC,CAAC;CACH;CAEA,MAAM,aAAa,KAAK,IACtB,GACA,iBACE,OAAO,SACP,8BACA,2BACJ;CACA,MAAM,aAAa,KAAK,IACtB,GACA,OAAO,MAAM,8BAA8B,2BAC7C;CACA,MAAM,SACJ,iBAAiB,QACjB,gBAAgB,cAChB,aAAa;CACf,MAAM,YAAY,mBAAmB,KAAA,IAAY,KAAA,IAAY,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,cAAc,GAAG,KAAK,IAAI,GAAG,gBAAgB,EAA+B,CAAC;CAC1K,OAAO,aAAa;EAClB,UAAU;EACV;EACA;EACA;EACA,MAAM,cAAc,KAAA,IAAY,OAAO,OAAO,KAAK,IAAI,6BAA6B,KAAK,IAAI,OAAO,MAAM,gBAAgB,YAAY,2BAA2B,CAAC;EAClK,OAAO,aAAa,OAAO;EAC3B,UAAU,aAAa,KAAK,IAC1B,OAAO,OACP,KAAK,IAAA,KAEH,gBAAgB,OAAO,OAAO,2BAChC,CACF;EACA,WAAW,SAAS,aAAa;CACnC,CAAC;AACH;AAEA,SAAS,aAAa,EACpB,UACA,QACA,gBACA,QACA,MACA,OACA,UACA,aAKuB;CACvB,OAAO;EACL;EACA,GAAI,SACA,EAAE,QAAQ,iBAAiB,OAAO,MAAM,4BAA4B,IACpE,EAAE,KAAK,OAAO,SAAS,4BAA4B;EACvD;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../../src/lib/combobox.ts"],"sourcesContent":["import { belowBreakpoint } from \"./breakpoints\";\n\nexport const COMBOBOX_MENU_MAX_WIDTH_PX = 400;\nexport const COMBOBOX_MOBILE_QUERY = belowBreakpoint(\"sm\");\n\nconst COMBOBOX_MENU_EDGE_INSET_PX = 8;\nconst COMBOBOX_MENU_ANCHOR_GAP_PX = 4;\nconst COMBOBOX_MOBILE_HORIZONTAL_INSET_PX = 16;\n\nexport type ComboboxMenuPosition = {\n  strategy: \"desktop\" | \"mobile\";\n  top?: number;\n  bottom?: number;\n  left: number;\n  width: number;\n  maxWidth: number;\n  maxHeight: number;\n};\n\nexport function calculateComboboxMenuPosition({\n  anchor,\n  viewportWidth,\n  viewportHeight,\n  mobile,\n  naturalHeight,\n  preferredWidth,\n}: {\n  anchor: Pick<DOMRect, \"top\" | \"bottom\" | \"left\" | \"width\">;\n  viewportWidth: number;\n  viewportHeight: number;\n  mobile: boolean;\n  naturalHeight?: number;\n  preferredWidth?: number;\n}): ComboboxMenuPosition {\n  if (preferredWidth !== undefined && (!Number.isFinite(preferredWidth) || preferredWidth <= 0)) throw new Error(\"Combobox menu width must be a positive finite number.\");\n  if (mobile) {\n    const spaceBelow = Math.max(\n      0,\n      viewportHeight -\n        anchor.bottom -\n        COMBOBOX_MENU_ANCHOR_GAP_PX -\n        COMBOBOX_MENU_EDGE_INSET_PX,\n    );\n    const spaceAbove = Math.max(\n      0,\n      anchor.top - COMBOBOX_MENU_ANCHOR_GAP_PX - COMBOBOX_MENU_EDGE_INSET_PX,\n    );\n    const openUp =\n      naturalHeight != null &&\n      naturalHeight > spaceBelow &&\n      spaceAbove > spaceBelow;\n    const width = Math.max(\n      0,\n      viewportWidth - COMBOBOX_MOBILE_HORIZONTAL_INSET_PX * 2,\n    );\n    return menuPosition({\n      strategy: \"mobile\",\n      anchor,\n      viewportHeight,\n      openUp,\n      left: COMBOBOX_MOBILE_HORIZONTAL_INSET_PX,\n      width,\n      maxWidth: width,\n      maxHeight: openUp ? spaceAbove : spaceBelow,\n    });\n  }\n\n  const spaceBelow = Math.max(\n    0,\n    viewportHeight -\n      anchor.bottom -\n      COMBOBOX_MENU_ANCHOR_GAP_PX -\n      COMBOBOX_MENU_EDGE_INSET_PX,\n  );\n  const spaceAbove = Math.max(\n    0,\n    anchor.top - COMBOBOX_MENU_ANCHOR_GAP_PX - COMBOBOX_MENU_EDGE_INSET_PX,\n  );\n  const openUp =\n    naturalHeight != null &&\n    naturalHeight > spaceBelow &&\n    spaceAbove > spaceBelow;\n  const preferred = preferredWidth === undefined ? undefined : Math.min(Math.max(anchor.width, preferredWidth), Math.max(0, viewportWidth - COMBOBOX_MENU_EDGE_INSET_PX * 2));\n  return menuPosition({\n    strategy: \"desktop\",\n    anchor,\n    viewportHeight,\n    openUp,\n    left: preferred === undefined ? anchor.left : Math.max(COMBOBOX_MENU_EDGE_INSET_PX, Math.min(anchor.left, viewportWidth - preferred - COMBOBOX_MENU_EDGE_INSET_PX)),\n    width: preferred ?? anchor.width,\n    maxWidth: preferred ?? Math.max(\n      anchor.width,\n      Math.min(\n        COMBOBOX_MENU_MAX_WIDTH_PX,\n        viewportWidth - anchor.left - COMBOBOX_MENU_EDGE_INSET_PX,\n      ),\n    ),\n    maxHeight: openUp ? spaceAbove : spaceBelow,\n  });\n}\n\nfunction menuPosition({\n  strategy,\n  anchor,\n  viewportHeight,\n  openUp,\n  left,\n  width,\n  maxWidth,\n  maxHeight,\n}: Omit<ComboboxMenuPosition, \"top\" | \"bottom\"> & {\n  anchor: Pick<DOMRect, \"top\" | \"bottom\">;\n  viewportHeight: number;\n  openUp: boolean;\n}): ComboboxMenuPosition {\n  return {\n    strategy,\n    ...(openUp\n      ? { bottom: viewportHeight - anchor.top + COMBOBOX_MENU_ANCHOR_GAP_PX }\n      : { top: anchor.bottom + COMBOBOX_MENU_ANCHOR_GAP_PX }),\n    left,\n    width,\n    maxWidth,\n    maxHeight,\n  };\n}\n"],"mappings":";;AAEA,IAAa,6BAA6B;AAC1C,IAAa,wBAAwB,gBAAgB,IAAI;AAEzD,IAAM,8BAA8B;AACpC,IAAM,8BAA8B;AACpC,IAAM,sCAAsC;AAY5C,SAAgB,8BAA8B,EAC5C,QACA,eACA,gBACA,QACA,eACA,kBAQuB;CACvB,IAAI,mBAAmB,KAAA,MAAc,CAAC,OAAO,SAAS,cAAc,KAAK,kBAAkB,IAAI,MAAM,IAAI,MAAM,uDAAuD;CACtK,IAAI,QAAQ;EACV,MAAM,aAAa,KAAK,IACtB,GACA,iBACE,OAAO,SACP,8BACA,2BACJ;EACA,MAAM,aAAa,KAAK,IACtB,GACA,OAAO,MAAM,8BAA8B,2BAC7C;EACA,MAAM,SACJ,iBAAiB,QACjB,gBAAgB,cAChB,aAAa;EACf,MAAM,QAAQ,KAAK,IACjB,GACA,gBAAgB,EAClB;EACA,OAAO,aAAa;GAClB,UAAU;GACV;GACA;GACA;GACA,MAAM;GACN;GACA,UAAU;GACV,WAAW,SAAS,aAAa;EACnC,CAAC;CACH;CAEA,MAAM,aAAa,KAAK,IACtB,GACA,iBACE,OAAO,SACP,8BACA,2BACJ;CACA,MAAM,aAAa,KAAK,IACtB,GACA,OAAO,MAAM,8BAA8B,2BAC7C;CACA,MAAM,SACJ,iBAAiB,QACjB,gBAAgB,cAChB,aAAa;CACf,MAAM,YAAY,mBAAmB,KAAA,IAAY,KAAA,IAAY,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,cAAc,GAAG,KAAK,IAAI,GAAG,gBAAgB,EAA+B,CAAC;CAC1K,OAAO,aAAa;EAClB,UAAU;EACV;EACA;EACA;EACA,MAAM,cAAc,KAAA,IAAY,OAAO,OAAO,KAAK,IAAI,6BAA6B,KAAK,IAAI,OAAO,MAAM,gBAAgB,YAAY,2BAA2B,CAAC;EAClK,OAAO,aAAa,OAAO;EAC3B,UAAU,aAAa,KAAK,IAC1B,OAAO,OACP,KAAK,IAAA,KAEH,gBAAgB,OAAO,OAAO,2BAChC,CACF;EACA,WAAW,SAAS,aAAa;CACnC,CAAC;AACH;AAEA,SAAS,aAAa,EACpB,UACA,QACA,gBACA,QACA,MACA,OACA,UACA,aAKuB;CACvB,OAAO;EACL;EACA,GAAI,SACA,EAAE,QAAQ,iBAAiB,OAAO,MAAM,4BAA4B,IACpE,EAAE,KAAK,OAAO,SAAS,4BAA4B;EACvD;EACA;EACA;EACA;CACF;AACF"}

package/dist/lib/path-tree.cjs

@@ -80,10 +80,31 @@ function foldersFirst(left, right) {
 	if (leftIsParent !== right.children.length > 0) return leftIsParent ? -1 : 1;
 	return left.label.localeCompare(right.label);
 }
+/**
+* Decides whether `path` passes a tree include/exclude selection, where a
+* selection key stands for that path *and everything beneath it*.
+*
+* The deepest selected ancestor-or-self decides, so excluding `a/b` under an
+* included `a` carves `a/b` back out, and including `a/b/c` under an excluded
+* `a/b` restores it. When no ancestor-or-self is selected the path matches only
+* if the selection has no includes at all: with no includes everything matches
+* except excluded subtrees, with any include only included subtrees match.
+*
+* Keys match on whole segments — `acme/bill` does not select `acme/billing`.
+*/
+function matchesTreeSelection(path, selection, separator = "/") {
+	const segments = splitPath(path, separator);
+	for (let depth = segments.length; depth > 0; depth--) {
+		const mode = selection[segments.slice(0, depth).join(separator)];
+		if (mode !== void 0) return mode === "include";
+	}
+	return !Object.values(selection).includes("include");
+}
 exports.PATH_SEPARATOR = PATH_SEPARATOR;
 exports.buildPathTree = buildPathTree;
 exports.foldersFirst = foldersFirst;
 exports.isPathTreeFolder = isPathTreeFolder;
+exports.matchesTreeSelection = matchesTreeSelection;
 exports.splitPath = splitPath;
 
 //# sourceMappingURL=path-tree.cjs.map

package/dist/lib/path-tree.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"path-tree.cjs","names":[],"sources":["../../src/lib/path-tree.ts"],"sourcesContent":["// Turns a flat list of items that each carry a path into a tree, without\n// knowing anything about what the items are. Two independent surfaces need\n// exactly this shape — a session's changed-file list and a backend's\n// hierarchical nav surfaces — so the walker lives here rather than a third\n// time inside a component.\n\n/** The wire separator for a joined path. Matches clicky's entity.PathSeparator. */\nexport const PATH_SEPARATOR = \"/\";\n\nexport interface PathTreeNode<T> {\n  /** The joined path — stable across rebuilds, so it works as a React/Tree key. */\n  key: string;\n  /** The node's own last segment. */\n  label: string;\n  /** Every segment from the root down to and including this node. */\n  path: string[];\n  /**\n   * The items whose *full* path lands on this node. Empty means a pure folder\n   * — a node that exists only because something below it does. More than one\n   * means several items share a path (e.g. a file that was both read and\n   * written), which is why this is a list rather than a single value.\n   */\n  items: T[];\n  children: PathTreeNode<T>[];\n}\n\nexport interface BuildPathTreeOptions<T> {\n  /**\n   * Orders siblings at every level. Defaults to the order items were first\n   * seen, which preserves a already-sorted backend list as-is.\n   */\n  compare?: (left: PathTreeNode<T>, right: PathTreeNode<T>) => number;\n}\n\n/**\n * Splits `value` into path segments on any character in `delimiters`, dropping\n * empty segments so leading, trailing and repeated separators are harmless.\n *\n * Characters outside `delimiters` are never separators: with `delimiters=\".\"`,\n * `\"remote-debugger.sql-xevent\"` yields two segments, not four — a hyphen is an\n * ordinary name character.\n */\nexport function splitPath(value: string, delimiters: string): string[] {\n  if (!value) return [];\n  if (!delimiters) return [value];\n  const segments: string[] = [];\n  let current = \"\";\n  for (const character of value) {\n    if (delimiters.includes(character)) {\n      if (current) segments.push(current);\n      current = \"\";\n    } else {\n      current += character;\n    }\n  }\n  if (current) segments.push(current);\n  return segments;\n}\n\n/**\n * Builds a forest from items keyed by path.\n *\n * A node is created for every path prefix, and an item's full path *binds* to\n * whichever node it lands on — creating it if needed, reusing it if a\n * descendant already forced it into existence. That is what lets a node be both\n * a folder and a leaf: `[\"jms\"]` and `[\"jms\", \"incoming\"]` produce one `jms`\n * node that is simultaneously selectable and expandable.\n *\n * Items whose path is empty are skipped — they have no position in the tree.\n */\nexport function buildPathTree<T>(\n  items: readonly T[],\n  getPath: (item: T) => readonly string[],\n  options: BuildPathTreeOptions<T> = {},\n): PathTreeNode<T>[] {\n  const roots: PathTreeNode<T>[] = [];\n  const byKey = new Map<string, PathTreeNode<T>>();\n\n  for (const item of items) {\n    const path = getPath(item);\n    if (path.length === 0) continue;\n\n    let siblings = roots;\n    let key = \"\";\n    let node: PathTreeNode<T> | undefined;\n    path.forEach((segment, index) => {\n      key = key ? `${key}${PATH_SEPARATOR}${segment}` : segment;\n      let existing = byKey.get(key);\n      if (!existing) {\n        existing = {\n          key,\n          label: segment,\n          path: path.slice(0, index + 1),\n          items: [],\n          children: [],\n        };\n        byKey.set(key, existing);\n        siblings.push(existing);\n      }\n      siblings = existing.children;\n      node = existing;\n    });\n    node?.items.push(item);\n  }\n\n  if (options.compare) sortTree(roots, options.compare);\n  return roots;\n}\n\nfunction sortTree<T>(\n  nodes: PathTreeNode<T>[],\n  compare: (left: PathTreeNode<T>, right: PathTreeNode<T>) => number,\n): void {\n  nodes.sort(compare);\n  for (const node of nodes) sortTree(node.children, compare);\n}\n\n/** True when the node exists only to hold descendants — nothing binds to it. */\nexport function isPathTreeFolder<T>(node: PathTreeNode<T>): boolean {\n  return node.items.length === 0;\n}\n\n/**\n * A `compare` that puts nodes with children before plain leaves, then orders\n * each run alphabetically — the conventional file-explorer ordering.\n */\nexport function foldersFirst<T>(\n  left: PathTreeNode<T>,\n  right: PathTreeNode<T>,\n): number {\n  const leftIsParent = left.children.length > 0;\n  const rightIsParent = right.children.length > 0;\n  if (leftIsParent !== rightIsParent) return leftIsParent ? -1 : 1;\n  return left.label.localeCompare(right.label);\n}\n"],"mappings":";;AAOA,IAAa,iBAAiB;;;;;;;;;AAmC9B,SAAgB,UAAU,OAAe,YAA8B;CACrE,IAAI,CAAC,OAAO,OAAO,CAAC;CACpB,IAAI,CAAC,YAAY,OAAO,CAAC,KAAK;CAC9B,MAAM,WAAqB,CAAC;CAC5B,IAAI,UAAU;CACd,KAAK,MAAM,aAAa,OACtB,IAAI,WAAW,SAAS,SAAS,GAAG;EAClC,IAAI,SAAS,SAAS,KAAK,OAAO;EAClC,UAAU;CACZ,OACE,WAAW;CAGf,IAAI,SAAS,SAAS,KAAK,OAAO;CAClC,OAAO;AACT;;;;;;;;;;;;AAaA,SAAgB,cACd,OACA,SACA,UAAmC,CAAC,GACjB;CACnB,MAAM,QAA2B,CAAC;CAClC,MAAM,wBAAQ,IAAI,IAA6B;CAE/C,KAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,OAAO,QAAQ,IAAI;EACzB,IAAI,KAAK,WAAW,GAAG;EAEvB,IAAI,WAAW;EACf,IAAI,MAAM;EACV,IAAI;EACJ,KAAK,SAAS,SAAS,UAAU;GAC/B,MAAM,MAAM,GAAG,OAAuB,YAAY;GAClD,IAAI,WAAW,MAAM,IAAI,GAAG;GAC5B,IAAI,CAAC,UAAU;IACb,WAAW;KACT;KACA,OAAO;KACP,MAAM,KAAK,MAAM,GAAG,QAAQ,CAAC;KAC7B,OAAO,CAAC;KACR,UAAU,CAAC;IACb;IACA,MAAM,IAAI,KAAK,QAAQ;IACvB,SAAS,KAAK,QAAQ;GACxB;GACA,WAAW,SAAS;GACpB,OAAO;EACT,CAAC;EACD,MAAM,MAAM,KAAK,IAAI;CACvB;CAEA,IAAI,QAAQ,SAAS,SAAS,OAAO,QAAQ,OAAO;CACpD,OAAO;AACT;AAEA,SAAS,SACP,OACA,SACM;CACN,MAAM,KAAK,OAAO;CAClB,KAAK,MAAM,QAAQ,OAAO,SAAS,KAAK,UAAU,OAAO;AAC3D;;AAGA,SAAgB,iBAAoB,MAAgC;CAClE,OAAO,KAAK,MAAM,WAAW;AAC/B;;;;;AAMA,SAAgB,aACd,MACA,OACQ;CACR,MAAM,eAAe,KAAK,SAAS,SAAS;CAE5C,IAAI,iBADkB,MAAM,SAAS,SAAS,GACV,OAAO,eAAe,KAAK;CAC/D,OAAO,KAAK,MAAM,cAAc,MAAM,KAAK;AAC7C"}
+{"version":3,"file":"path-tree.cjs","names":[],"sources":["../../src/lib/path-tree.ts"],"sourcesContent":["// Turns a flat list of items that each carry a path into a tree, without\n// knowing anything about what the items are. Two independent surfaces need\n// exactly this shape — a session's changed-file list and a backend's\n// hierarchical nav surfaces — so the walker lives here rather than a third\n// time inside a component.\n\n/** The wire separator for a joined path. Matches clicky's entity.PathSeparator. */\nexport const PATH_SEPARATOR = \"/\";\n\nexport interface PathTreeNode<T> {\n  /** The joined path — stable across rebuilds, so it works as a React/Tree key. */\n  key: string;\n  /** The node's own last segment. */\n  label: string;\n  /** Every segment from the root down to and including this node. */\n  path: string[];\n  /**\n   * The items whose *full* path lands on this node. Empty means a pure folder\n   * — a node that exists only because something below it does. More than one\n   * means several items share a path (e.g. a file that was both read and\n   * written), which is why this is a list rather than a single value.\n   */\n  items: T[];\n  children: PathTreeNode<T>[];\n}\n\nexport interface BuildPathTreeOptions<T> {\n  /**\n   * Orders siblings at every level. Defaults to the order items were first\n   * seen, which preserves a already-sorted backend list as-is.\n   */\n  compare?: (left: PathTreeNode<T>, right: PathTreeNode<T>) => number;\n}\n\n/**\n * Splits `value` into path segments on any character in `delimiters`, dropping\n * empty segments so leading, trailing and repeated separators are harmless.\n *\n * Characters outside `delimiters` are never separators: with `delimiters=\".\"`,\n * `\"remote-debugger.sql-xevent\"` yields two segments, not four — a hyphen is an\n * ordinary name character.\n */\nexport function splitPath(value: string, delimiters: string): string[] {\n  if (!value) return [];\n  if (!delimiters) return [value];\n  const segments: string[] = [];\n  let current = \"\";\n  for (const character of value) {\n    if (delimiters.includes(character)) {\n      if (current) segments.push(current);\n      current = \"\";\n    } else {\n      current += character;\n    }\n  }\n  if (current) segments.push(current);\n  return segments;\n}\n\n/**\n * Builds a forest from items keyed by path.\n *\n * A node is created for every path prefix, and an item's full path *binds* to\n * whichever node it lands on — creating it if needed, reusing it if a\n * descendant already forced it into existence. That is what lets a node be both\n * a folder and a leaf: `[\"jms\"]` and `[\"jms\", \"incoming\"]` produce one `jms`\n * node that is simultaneously selectable and expandable.\n *\n * Items whose path is empty are skipped — they have no position in the tree.\n */\nexport function buildPathTree<T>(\n  items: readonly T[],\n  getPath: (item: T) => readonly string[],\n  options: BuildPathTreeOptions<T> = {},\n): PathTreeNode<T>[] {\n  const roots: PathTreeNode<T>[] = [];\n  const byKey = new Map<string, PathTreeNode<T>>();\n\n  for (const item of items) {\n    const path = getPath(item);\n    if (path.length === 0) continue;\n\n    let siblings = roots;\n    let key = \"\";\n    let node: PathTreeNode<T> | undefined;\n    path.forEach((segment, index) => {\n      key = key ? `${key}${PATH_SEPARATOR}${segment}` : segment;\n      let existing = byKey.get(key);\n      if (!existing) {\n        existing = {\n          key,\n          label: segment,\n          path: path.slice(0, index + 1),\n          items: [],\n          children: [],\n        };\n        byKey.set(key, existing);\n        siblings.push(existing);\n      }\n      siblings = existing.children;\n      node = existing;\n    });\n    node?.items.push(item);\n  }\n\n  if (options.compare) sortTree(roots, options.compare);\n  return roots;\n}\n\nfunction sortTree<T>(\n  nodes: PathTreeNode<T>[],\n  compare: (left: PathTreeNode<T>, right: PathTreeNode<T>) => number,\n): void {\n  nodes.sort(compare);\n  for (const node of nodes) sortTree(node.children, compare);\n}\n\n/** True when the node exists only to hold descendants — nothing binds to it. */\nexport function isPathTreeFolder<T>(node: PathTreeNode<T>): boolean {\n  return node.items.length === 0;\n}\n\n/**\n * A `compare` that puts nodes with children before plain leaves, then orders\n * each run alphabetically — the conventional file-explorer ordering.\n */\nexport function foldersFirst<T>(\n  left: PathTreeNode<T>,\n  right: PathTreeNode<T>,\n): number {\n  const leftIsParent = left.children.length > 0;\n  const rightIsParent = right.children.length > 0;\n  if (leftIsParent !== rightIsParent) return leftIsParent ? -1 : 1;\n  return left.label.localeCompare(right.label);\n}\n\n/** Include/exclude state keyed by a node's joined path; neutral nodes are absent. */\nexport type TreeSelection = Record<string, \"include\" | \"exclude\">;\n\n/**\n * Decides whether `path` passes a tree include/exclude selection, where a\n * selection key stands for that path *and everything beneath it*.\n *\n * The deepest selected ancestor-or-self decides, so excluding `a/b` under an\n * included `a` carves `a/b` back out, and including `a/b/c` under an excluded\n * `a/b` restores it. When no ancestor-or-self is selected the path matches only\n * if the selection has no includes at all: with no includes everything matches\n * except excluded subtrees, with any include only included subtrees match.\n *\n * Keys match on whole segments — `acme/bill` does not select `acme/billing`.\n */\nexport function matchesTreeSelection(\n  path: string,\n  selection: TreeSelection,\n  separator: string = PATH_SEPARATOR,\n): boolean {\n  const segments = splitPath(path, separator);\n  for (let depth = segments.length; depth > 0; depth--) {\n    const mode = selection[segments.slice(0, depth).join(separator)];\n    if (mode !== undefined) return mode === \"include\";\n  }\n  return !Object.values(selection).includes(\"include\");\n}\n"],"mappings":";;AAOA,IAAa,iBAAiB;;;;;;;;;AAmC9B,SAAgB,UAAU,OAAe,YAA8B;CACrE,IAAI,CAAC,OAAO,OAAO,CAAC;CACpB,IAAI,CAAC,YAAY,OAAO,CAAC,KAAK;CAC9B,MAAM,WAAqB,CAAC;CAC5B,IAAI,UAAU;CACd,KAAK,MAAM,aAAa,OACtB,IAAI,WAAW,SAAS,SAAS,GAAG;EAClC,IAAI,SAAS,SAAS,KAAK,OAAO;EAClC,UAAU;CACZ,OACE,WAAW;CAGf,IAAI,SAAS,SAAS,KAAK,OAAO;CAClC,OAAO;AACT;;;;;;;;;;;;AAaA,SAAgB,cACd,OACA,SACA,UAAmC,CAAC,GACjB;CACnB,MAAM,QAA2B,CAAC;CAClC,MAAM,wBAAQ,IAAI,IAA6B;CAE/C,KAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,OAAO,QAAQ,IAAI;EACzB,IAAI,KAAK,WAAW,GAAG;EAEvB,IAAI,WAAW;EACf,IAAI,MAAM;EACV,IAAI;EACJ,KAAK,SAAS,SAAS,UAAU;GAC/B,MAAM,MAAM,GAAG,OAAuB,YAAY;GAClD,IAAI,WAAW,MAAM,IAAI,GAAG;GAC5B,IAAI,CAAC,UAAU;IACb,WAAW;KACT;KACA,OAAO;KACP,MAAM,KAAK,MAAM,GAAG,QAAQ,CAAC;KAC7B,OAAO,CAAC;KACR,UAAU,CAAC;IACb;IACA,MAAM,IAAI,KAAK,QAAQ;IACvB,SAAS,KAAK,QAAQ;GACxB;GACA,WAAW,SAAS;GACpB,OAAO;EACT,CAAC;EACD,MAAM,MAAM,KAAK,IAAI;CACvB;CAEA,IAAI,QAAQ,SAAS,SAAS,OAAO,QAAQ,OAAO;CACpD,OAAO;AACT;AAEA,SAAS,SACP,OACA,SACM;CACN,MAAM,KAAK,OAAO;CAClB,KAAK,MAAM,QAAQ,OAAO,SAAS,KAAK,UAAU,OAAO;AAC3D;;AAGA,SAAgB,iBAAoB,MAAgC;CAClE,OAAO,KAAK,MAAM,WAAW;AAC/B;;;;;AAMA,SAAgB,aACd,MACA,OACQ;CACR,MAAM,eAAe,KAAK,SAAS,SAAS;CAE5C,IAAI,iBADkB,MAAM,SAAS,SAAS,GACV,OAAO,eAAe,KAAK;CAC/D,OAAO,KAAK,MAAM,cAAc,MAAM,KAAK;AAC7C;;;;;;;;;;;;;AAiBA,SAAgB,qBACd,MACA,WACA,YAAA,KACS;CACT,MAAM,WAAW,UAAU,MAAM,SAAS;CAC1C,KAAK,IAAI,QAAQ,SAAS,QAAQ,QAAQ,GAAG,SAAS;EACpD,MAAM,OAAO,UAAU,SAAS,MAAM,GAAG,KAAK,CAAC,CAAC,KAAK,SAAS;EAC9D,IAAI,SAAS,KAAA,GAAW,OAAO,SAAS;CAC1C;CACA,OAAO,CAAC,OAAO,OAAO,SAAS,CAAC,CAAC,SAAS,SAAS;AACrD"}

package/dist/lib/path-tree.d.ts

@@ -51,4 +51,19 @@ export declare function isPathTreeFolder<T>(node: PathTreeNode<T>): boolean;
  * each run alphabetically — the conventional file-explorer ordering.
  */
 export declare function foldersFirst<T>(left: PathTreeNode<T>, right: PathTreeNode<T>): number;
+/** Include/exclude state keyed by a node's joined path; neutral nodes are absent. */
+export type TreeSelection = Record<string, "include" | "exclude">;
+/**
+ * Decides whether `path` passes a tree include/exclude selection, where a
+ * selection key stands for that path *and everything beneath it*.
+ *
+ * The deepest selected ancestor-or-self decides, so excluding `a/b` under an
+ * included `a` carves `a/b` back out, and including `a/b/c` under an excluded
+ * `a/b` restores it. When no ancestor-or-self is selected the path matches only
+ * if the selection has no includes at all: with no includes everything matches
+ * except excluded subtrees, with any include only included subtrees match.
+ *
+ * Keys match on whole segments — `acme/bill` does not select `acme/billing`.
+ */
+export declare function matchesTreeSelection(path: string, selection: TreeSelection, separator?: string): boolean;
 //# sourceMappingURL=path-tree.d.ts.map

package/dist/lib/path-tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"path-tree.d.ts","sourceRoot":"","sources":["../../src/lib/path-tree.ts"],"names":[],"mappings":"AAMA,mFAAmF;AACnF,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,iFAAiF;IACjF,GAAG,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf;;;;;OAKG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC;CACrE;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAerE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAC7B,KAAK,EAAE,SAAS,CAAC,EAAE,EACnB,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,MAAM,EAAE,EACvC,OAAO,GAAE,oBAAoB,CAAC,CAAC,CAAM,GACpC,YAAY,CAAC,CAAC,CAAC,EAAE,CAiCnB;AAUD,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,CAElE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAC5B,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EACrB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,GACrB,MAAM,CAKR"}
+{"version":3,"file":"path-tree.d.ts","sourceRoot":"","sources":["../../src/lib/path-tree.ts"],"names":[],"mappings":"AAMA,mFAAmF;AACnF,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,iFAAiF;IACjF,GAAG,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf;;;;;OAKG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC;CACrE;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAerE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAC7B,KAAK,EAAE,SAAS,CAAC,EAAE,EACnB,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,MAAM,EAAE,EACvC,OAAO,GAAE,oBAAoB,CAAC,CAAC,CAAM,GACpC,YAAY,CAAC,CAAC,CAAC,EAAE,CAiCnB;AAUD,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,CAElE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAC5B,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EACrB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,GACrB,MAAM,CAKR;AAED,qFAAqF;AACrF,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;AAElE;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,aAAa,EACxB,SAAS,GAAE,MAAuB,GACjC,OAAO,CAOT"}

package/dist/lib/path-tree.js

@@ -80,6 +80,26 @@ function foldersFirst(left, right) {
 	if (leftIsParent !== right.children.length > 0) return leftIsParent ? -1 : 1;
 	return left.label.localeCompare(right.label);
 }
-export { PATH_SEPARATOR, buildPathTree, foldersFirst, isPathTreeFolder, splitPath };
+/**
+* Decides whether `path` passes a tree include/exclude selection, where a
+* selection key stands for that path *and everything beneath it*.
+*
+* The deepest selected ancestor-or-self decides, so excluding `a/b` under an
+* included `a` carves `a/b` back out, and including `a/b/c` under an excluded
+* `a/b` restores it. When no ancestor-or-self is selected the path matches only
+* if the selection has no includes at all: with no includes everything matches
+* except excluded subtrees, with any include only included subtrees match.
+*
+* Keys match on whole segments — `acme/bill` does not select `acme/billing`.
+*/
+function matchesTreeSelection(path, selection, separator = "/") {
+	const segments = splitPath(path, separator);
+	for (let depth = segments.length; depth > 0; depth--) {
+		const mode = selection[segments.slice(0, depth).join(separator)];
+		if (mode !== void 0) return mode === "include";
+	}
+	return !Object.values(selection).includes("include");
+}
+export { PATH_SEPARATOR, buildPathTree, foldersFirst, isPathTreeFolder, matchesTreeSelection, splitPath };
 
 //# sourceMappingURL=path-tree.js.map

package/dist/lib/path-tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"path-tree.js","names":[],"sources":["../../src/lib/path-tree.ts"],"sourcesContent":["// Turns a flat list of items that each carry a path into a tree, without\n// knowing anything about what the items are. Two independent surfaces need\n// exactly this shape — a session's changed-file list and a backend's\n// hierarchical nav surfaces — so the walker lives here rather than a third\n// time inside a component.\n\n/** The wire separator for a joined path. Matches clicky's entity.PathSeparator. */\nexport const PATH_SEPARATOR = \"/\";\n\nexport interface PathTreeNode<T> {\n  /** The joined path — stable across rebuilds, so it works as a React/Tree key. */\n  key: string;\n  /** The node's own last segment. */\n  label: string;\n  /** Every segment from the root down to and including this node. */\n  path: string[];\n  /**\n   * The items whose *full* path lands on this node. Empty means a pure folder\n   * — a node that exists only because something below it does. More than one\n   * means several items share a path (e.g. a file that was both read and\n   * written), which is why this is a list rather than a single value.\n   */\n  items: T[];\n  children: PathTreeNode<T>[];\n}\n\nexport interface BuildPathTreeOptions<T> {\n  /**\n   * Orders siblings at every level. Defaults to the order items were first\n   * seen, which preserves a already-sorted backend list as-is.\n   */\n  compare?: (left: PathTreeNode<T>, right: PathTreeNode<T>) => number;\n}\n\n/**\n * Splits `value` into path segments on any character in `delimiters`, dropping\n * empty segments so leading, trailing and repeated separators are harmless.\n *\n * Characters outside `delimiters` are never separators: with `delimiters=\".\"`,\n * `\"remote-debugger.sql-xevent\"` yields two segments, not four — a hyphen is an\n * ordinary name character.\n */\nexport function splitPath(value: string, delimiters: string): string[] {\n  if (!value) return [];\n  if (!delimiters) return [value];\n  const segments: string[] = [];\n  let current = \"\";\n  for (const character of value) {\n    if (delimiters.includes(character)) {\n      if (current) segments.push(current);\n      current = \"\";\n    } else {\n      current += character;\n    }\n  }\n  if (current) segments.push(current);\n  return segments;\n}\n\n/**\n * Builds a forest from items keyed by path.\n *\n * A node is created for every path prefix, and an item's full path *binds* to\n * whichever node it lands on — creating it if needed, reusing it if a\n * descendant already forced it into existence. That is what lets a node be both\n * a folder and a leaf: `[\"jms\"]` and `[\"jms\", \"incoming\"]` produce one `jms`\n * node that is simultaneously selectable and expandable.\n *\n * Items whose path is empty are skipped — they have no position in the tree.\n */\nexport function buildPathTree<T>(\n  items: readonly T[],\n  getPath: (item: T) => readonly string[],\n  options: BuildPathTreeOptions<T> = {},\n): PathTreeNode<T>[] {\n  const roots: PathTreeNode<T>[] = [];\n  const byKey = new Map<string, PathTreeNode<T>>();\n\n  for (const item of items) {\n    const path = getPath(item);\n    if (path.length === 0) continue;\n\n    let siblings = roots;\n    let key = \"\";\n    let node: PathTreeNode<T> | undefined;\n    path.forEach((segment, index) => {\n      key = key ? `${key}${PATH_SEPARATOR}${segment}` : segment;\n      let existing = byKey.get(key);\n      if (!existing) {\n        existing = {\n          key,\n          label: segment,\n          path: path.slice(0, index + 1),\n          items: [],\n          children: [],\n        };\n        byKey.set(key, existing);\n        siblings.push(existing);\n      }\n      siblings = existing.children;\n      node = existing;\n    });\n    node?.items.push(item);\n  }\n\n  if (options.compare) sortTree(roots, options.compare);\n  return roots;\n}\n\nfunction sortTree<T>(\n  nodes: PathTreeNode<T>[],\n  compare: (left: PathTreeNode<T>, right: PathTreeNode<T>) => number,\n): void {\n  nodes.sort(compare);\n  for (const node of nodes) sortTree(node.children, compare);\n}\n\n/** True when the node exists only to hold descendants — nothing binds to it. */\nexport function isPathTreeFolder<T>(node: PathTreeNode<T>): boolean {\n  return node.items.length === 0;\n}\n\n/**\n * A `compare` that puts nodes with children before plain leaves, then orders\n * each run alphabetically — the conventional file-explorer ordering.\n */\nexport function foldersFirst<T>(\n  left: PathTreeNode<T>,\n  right: PathTreeNode<T>,\n): number {\n  const leftIsParent = left.children.length > 0;\n  const rightIsParent = right.children.length > 0;\n  if (leftIsParent !== rightIsParent) return leftIsParent ? -1 : 1;\n  return left.label.localeCompare(right.label);\n}\n"],"mappings":";;AAOA,IAAa,iBAAiB;;;;;;;;;AAmC9B,SAAgB,UAAU,OAAe,YAA8B;CACrE,IAAI,CAAC,OAAO,OAAO,CAAC;CACpB,IAAI,CAAC,YAAY,OAAO,CAAC,KAAK;CAC9B,MAAM,WAAqB,CAAC;CAC5B,IAAI,UAAU;CACd,KAAK,MAAM,aAAa,OACtB,IAAI,WAAW,SAAS,SAAS,GAAG;EAClC,IAAI,SAAS,SAAS,KAAK,OAAO;EAClC,UAAU;CACZ,OACE,WAAW;CAGf,IAAI,SAAS,SAAS,KAAK,OAAO;CAClC,OAAO;AACT;;;;;;;;;;;;AAaA,SAAgB,cACd,OACA,SACA,UAAmC,CAAC,GACjB;CACnB,MAAM,QAA2B,CAAC;CAClC,MAAM,wBAAQ,IAAI,IAA6B;CAE/C,KAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,OAAO,QAAQ,IAAI;EACzB,IAAI,KAAK,WAAW,GAAG;EAEvB,IAAI,WAAW;EACf,IAAI,MAAM;EACV,IAAI;EACJ,KAAK,SAAS,SAAS,UAAU;GAC/B,MAAM,MAAM,GAAG,OAAuB,YAAY;GAClD,IAAI,WAAW,MAAM,IAAI,GAAG;GAC5B,IAAI,CAAC,UAAU;IACb,WAAW;KACT;KACA,OAAO;KACP,MAAM,KAAK,MAAM,GAAG,QAAQ,CAAC;KAC7B,OAAO,CAAC;KACR,UAAU,CAAC;IACb;IACA,MAAM,IAAI,KAAK,QAAQ;IACvB,SAAS,KAAK,QAAQ;GACxB;GACA,WAAW,SAAS;GACpB,OAAO;EACT,CAAC;EACD,MAAM,MAAM,KAAK,IAAI;CACvB;CAEA,IAAI,QAAQ,SAAS,SAAS,OAAO,QAAQ,OAAO;CACpD,OAAO;AACT;AAEA,SAAS,SACP,OACA,SACM;CACN,MAAM,KAAK,OAAO;CAClB,KAAK,MAAM,QAAQ,OAAO,SAAS,KAAK,UAAU,OAAO;AAC3D;;AAGA,SAAgB,iBAAoB,MAAgC;CAClE,OAAO,KAAK,MAAM,WAAW;AAC/B;;;;;AAMA,SAAgB,aACd,MACA,OACQ;CACR,MAAM,eAAe,KAAK,SAAS,SAAS;CAE5C,IAAI,iBADkB,MAAM,SAAS,SAAS,GACV,OAAO,eAAe,KAAK;CAC/D,OAAO,KAAK,MAAM,cAAc,MAAM,KAAK;AAC7C"}
+{"version":3,"file":"path-tree.js","names":[],"sources":["../../src/lib/path-tree.ts"],"sourcesContent":["// Turns a flat list of items that each carry a path into a tree, without\n// knowing anything about what the items are. Two independent surfaces need\n// exactly this shape — a session's changed-file list and a backend's\n// hierarchical nav surfaces — so the walker lives here rather than a third\n// time inside a component.\n\n/** The wire separator for a joined path. Matches clicky's entity.PathSeparator. */\nexport const PATH_SEPARATOR = \"/\";\n\nexport interface PathTreeNode<T> {\n  /** The joined path — stable across rebuilds, so it works as a React/Tree key. */\n  key: string;\n  /** The node's own last segment. */\n  label: string;\n  /** Every segment from the root down to and including this node. */\n  path: string[];\n  /**\n   * The items whose *full* path lands on this node. Empty means a pure folder\n   * — a node that exists only because something below it does. More than one\n   * means several items share a path (e.g. a file that was both read and\n   * written), which is why this is a list rather than a single value.\n   */\n  items: T[];\n  children: PathTreeNode<T>[];\n}\n\nexport interface BuildPathTreeOptions<T> {\n  /**\n   * Orders siblings at every level. Defaults to the order items were first\n   * seen, which preserves a already-sorted backend list as-is.\n   */\n  compare?: (left: PathTreeNode<T>, right: PathTreeNode<T>) => number;\n}\n\n/**\n * Splits `value` into path segments on any character in `delimiters`, dropping\n * empty segments so leading, trailing and repeated separators are harmless.\n *\n * Characters outside `delimiters` are never separators: with `delimiters=\".\"`,\n * `\"remote-debugger.sql-xevent\"` yields two segments, not four — a hyphen is an\n * ordinary name character.\n */\nexport function splitPath(value: string, delimiters: string): string[] {\n  if (!value) return [];\n  if (!delimiters) return [value];\n  const segments: string[] = [];\n  let current = \"\";\n  for (const character of value) {\n    if (delimiters.includes(character)) {\n      if (current) segments.push(current);\n      current = \"\";\n    } else {\n      current += character;\n    }\n  }\n  if (current) segments.push(current);\n  return segments;\n}\n\n/**\n * Builds a forest from items keyed by path.\n *\n * A node is created for every path prefix, and an item's full path *binds* to\n * whichever node it lands on — creating it if needed, reusing it if a\n * descendant already forced it into existence. That is what lets a node be both\n * a folder and a leaf: `[\"jms\"]` and `[\"jms\", \"incoming\"]` produce one `jms`\n * node that is simultaneously selectable and expandable.\n *\n * Items whose path is empty are skipped — they have no position in the tree.\n */\nexport function buildPathTree<T>(\n  items: readonly T[],\n  getPath: (item: T) => readonly string[],\n  options: BuildPathTreeOptions<T> = {},\n): PathTreeNode<T>[] {\n  const roots: PathTreeNode<T>[] = [];\n  const byKey = new Map<string, PathTreeNode<T>>();\n\n  for (const item of items) {\n    const path = getPath(item);\n    if (path.length === 0) continue;\n\n    let siblings = roots;\n    let key = \"\";\n    let node: PathTreeNode<T> | undefined;\n    path.forEach((segment, index) => {\n      key = key ? `${key}${PATH_SEPARATOR}${segment}` : segment;\n      let existing = byKey.get(key);\n      if (!existing) {\n        existing = {\n          key,\n          label: segment,\n          path: path.slice(0, index + 1),\n          items: [],\n          children: [],\n        };\n        byKey.set(key, existing);\n        siblings.push(existing);\n      }\n      siblings = existing.children;\n      node = existing;\n    });\n    node?.items.push(item);\n  }\n\n  if (options.compare) sortTree(roots, options.compare);\n  return roots;\n}\n\nfunction sortTree<T>(\n  nodes: PathTreeNode<T>[],\n  compare: (left: PathTreeNode<T>, right: PathTreeNode<T>) => number,\n): void {\n  nodes.sort(compare);\n  for (const node of nodes) sortTree(node.children, compare);\n}\n\n/** True when the node exists only to hold descendants — nothing binds to it. */\nexport function isPathTreeFolder<T>(node: PathTreeNode<T>): boolean {\n  return node.items.length === 0;\n}\n\n/**\n * A `compare` that puts nodes with children before plain leaves, then orders\n * each run alphabetically — the conventional file-explorer ordering.\n */\nexport function foldersFirst<T>(\n  left: PathTreeNode<T>,\n  right: PathTreeNode<T>,\n): number {\n  const leftIsParent = left.children.length > 0;\n  const rightIsParent = right.children.length > 0;\n  if (leftIsParent !== rightIsParent) return leftIsParent ? -1 : 1;\n  return left.label.localeCompare(right.label);\n}\n\n/** Include/exclude state keyed by a node's joined path; neutral nodes are absent. */\nexport type TreeSelection = Record<string, \"include\" | \"exclude\">;\n\n/**\n * Decides whether `path` passes a tree include/exclude selection, where a\n * selection key stands for that path *and everything beneath it*.\n *\n * The deepest selected ancestor-or-self decides, so excluding `a/b` under an\n * included `a` carves `a/b` back out, and including `a/b/c` under an excluded\n * `a/b` restores it. When no ancestor-or-self is selected the path matches only\n * if the selection has no includes at all: with no includes everything matches\n * except excluded subtrees, with any include only included subtrees match.\n *\n * Keys match on whole segments — `acme/bill` does not select `acme/billing`.\n */\nexport function matchesTreeSelection(\n  path: string,\n  selection: TreeSelection,\n  separator: string = PATH_SEPARATOR,\n): boolean {\n  const segments = splitPath(path, separator);\n  for (let depth = segments.length; depth > 0; depth--) {\n    const mode = selection[segments.slice(0, depth).join(separator)];\n    if (mode !== undefined) return mode === \"include\";\n  }\n  return !Object.values(selection).includes(\"include\");\n}\n"],"mappings":";;AAOA,IAAa,iBAAiB;;;;;;;;;AAmC9B,SAAgB,UAAU,OAAe,YAA8B;CACrE,IAAI,CAAC,OAAO,OAAO,CAAC;CACpB,IAAI,CAAC,YAAY,OAAO,CAAC,KAAK;CAC9B,MAAM,WAAqB,CAAC;CAC5B,IAAI,UAAU;CACd,KAAK,MAAM,aAAa,OACtB,IAAI,WAAW,SAAS,SAAS,GAAG;EAClC,IAAI,SAAS,SAAS,KAAK,OAAO;EAClC,UAAU;CACZ,OACE,WAAW;CAGf,IAAI,SAAS,SAAS,KAAK,OAAO;CAClC,OAAO;AACT;;;;;;;;;;;;AAaA,SAAgB,cACd,OACA,SACA,UAAmC,CAAC,GACjB;CACnB,MAAM,QAA2B,CAAC;CAClC,MAAM,wBAAQ,IAAI,IAA6B;CAE/C,KAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,OAAO,QAAQ,IAAI;EACzB,IAAI,KAAK,WAAW,GAAG;EAEvB,IAAI,WAAW;EACf,IAAI,MAAM;EACV,IAAI;EACJ,KAAK,SAAS,SAAS,UAAU;GAC/B,MAAM,MAAM,GAAG,OAAuB,YAAY;GAClD,IAAI,WAAW,MAAM,IAAI,GAAG;GAC5B,IAAI,CAAC,UAAU;IACb,WAAW;KACT;KACA,OAAO;KACP,MAAM,KAAK,MAAM,GAAG,QAAQ,CAAC;KAC7B,OAAO,CAAC;KACR,UAAU,CAAC;IACb;IACA,MAAM,IAAI,KAAK,QAAQ;IACvB,SAAS,KAAK,QAAQ;GACxB;GACA,WAAW,SAAS;GACpB,OAAO;EACT,CAAC;EACD,MAAM,MAAM,KAAK,IAAI;CACvB;CAEA,IAAI,QAAQ,SAAS,SAAS,OAAO,QAAQ,OAAO;CACpD,OAAO;AACT;AAEA,SAAS,SACP,OACA,SACM;CACN,MAAM,KAAK,OAAO;CAClB,KAAK,MAAM,QAAQ,OAAO,SAAS,KAAK,UAAU,OAAO;AAC3D;;AAGA,SAAgB,iBAAoB,MAAgC;CAClE,OAAO,KAAK,MAAM,WAAW;AAC/B;;;;;AAMA,SAAgB,aACd,MACA,OACQ;CACR,MAAM,eAAe,KAAK,SAAS,SAAS;CAE5C,IAAI,iBADkB,MAAM,SAAS,SAAS,GACV,OAAO,eAAe,KAAK;CAC/D,OAAO,KAAK,MAAM,cAAc,MAAM,KAAK;AAC7C;;;;;;;;;;;;;AAiBA,SAAgB,qBACd,MACA,WACA,YAAA,KACS;CACT,MAAM,WAAW,UAAU,MAAM,SAAS;CAC1C,KAAK,IAAI,QAAQ,SAAS,QAAQ,QAAQ,GAAG,SAAS;EACpD,MAAM,OAAO,UAAU,SAAS,MAAM,GAAG,KAAK,CAAC,CAAC,KAAK,SAAS;EAC9D,IAAI,SAAS,KAAA,GAAW,OAAO,SAAS;CAC1C;CACA,OAAO,CAAC,OAAO,OAAO,SAAS,CAAC,CAAC,SAAS,SAAS;AACrD"}

package/dist/overlay/Modal.cjs

@@ -1,4 +1,5 @@
 const require_utils = require("../lib/utils.cjs");
+const require_breakpoints = require("../lib/breakpoints.cjs");
 const require_UiClose = require("../icons/components/UiClose.cjs");
 const require_UiFullscreen = require("../icons/components/UiFullscreen.cjs");
 const require_UiArrowLeft = require("../icons/components/UiArrowLeft.cjs");
@@ -25,7 +26,7 @@ var DEFAULT_CONFIRM = {
 	confirmLabel: "Discard",
 	cancelLabel: "Keep editing"
 };
-var MOBILE_QUERY = "(max-width: 639px)";
+var MOBILE_QUERY = require_breakpoints.belowBreakpoint("sm");
 var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 var MOBILE_TRANSITION_MS = 200;
 var FOCUSABLE_SELECTOR = [

package/dist/overlay/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","names":["useRef","useState","useModalStack","mediaMatches","cn","zIndex","Button","Icon","UiArrowLeft","UiFullscreenFilled","UiFullscreen","UiClose","createPortal"],"sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport {\n  UiArrowLeft,\n  UiClose,\n  UiFullscreen,\n  UiFullscreenFilled,\n} from \"../icons\";\nimport { mediaMatches } from \"../hooks/use-media-query\";\nimport { useEscapeLayer, useModalStack } from \"./modalStack\";\nimport { zIndex } from \"./zIndex\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"full\";\n\n/** Copy for the discard-confirmation prompt shown before a guarded close. */\nexport type ConfirmCloseOptions = {\n  /** Heading of the confirmation prompt. */\n  title?: ReactNode;\n  /** Body explaining what is lost on close. */\n  message?: ReactNode;\n  /** Label of the button that proceeds with closing. */\n  confirmLabel?: string;\n  /** Label of the button that dismisses the prompt and keeps the modal open. */\n  cancelLabel?: string;\n};\n\nexport type ModalProps = {\n  /** Controls whether the modal is mounted. */\n  open: boolean;\n  /** Called when the modal requests to close. */\n  onClose: () => void;\n  /**\n   * Guard every close path (close button, Escape, backdrop) behind a discard\n   * confirmation. `true` uses the default copy; pass options to customise it.\n   * `onClose` only fires once the user confirms. Set this while the modal holds\n   * unsaved edits and clear it (or pass `false`) once there is nothing to lose.\n   */\n  confirmClose?: boolean | ConfirmCloseOptions;\n  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /**\n   * Secondary header content rendered on its own row directly beneath the title.\n   * The title stays a single row alongside the expand/close buttons, so a tall\n   * subtitle (e.g. a tab switcher) never pushes those buttons down.\n   */\n  subtitle?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. Off by default; close via Escape or the close button. */\n  closeOnBackdrop?: boolean;\n  /** Close when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Hide the close button. */\n  hideClose?: boolean;\n  /** Show an expand/restore button. */\n  expandable?: boolean;\n  /** Classes applied to the dialog panel. */\n  className?: string;\n  /** Extra header content rendered before the expand/close buttons. */\n  headerSlot?: ReactNode;\n  /** Footer content pinned below the scrollable body. */\n  footer?: ReactNode;\n  /**\n   * Whether the body scrolls its overflow. Default `true`. Set `false` when the\n   * body owns a single fill-height child that scrolls internally (e.g. a\n   * DataTable with a sticky header): the body becomes a non-scrolling flex\n   * column, so only that child's own scroll region moves.\n   */\n  scrollBody?: boolean;\n  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-2xl\",\n  xl: \"max-w-4xl\",\n  \"2xl\": \"max-w-6xl\",\n  full: \"max-w-[95vw]\",\n};\n\nconst DEFAULT_CONFIRM: Required<ConfirmCloseOptions> = {\n  title: \"Discard changes?\",\n  message: \"You have unsaved changes. Closing now will discard them.\",\n  confirmLabel: \"Discard\",\n  cancelLabel: \"Keep editing\",\n};\n\nconst MOBILE_QUERY = \"(max-width: 639px)\";\nconst REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\nconst MOBILE_TRANSITION_MS = 200;\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"[tabindex]:not([tabindex='-1'])\",\n].join(\",\");\n\nfunction visibleFocusableElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter((element) => {\n    const style = window.getComputedStyle(element);\n    return (\n      !element.hidden &&\n      style.display !== \"none\" &&\n      style.visibility !== \"hidden\"\n    );\n  });\n}\n\nexport function Modal({\n  open,\n  onClose,\n  confirmClose = false,\n  title,\n  subtitle,\n  size = \"md\",\n  closeOnBackdrop = false,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  scrollBody = true,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const closeTimerRef = useRef<number | undefined>(undefined);\n  const openFrameRef = useRef<number | undefined>(undefined);\n  const [present, setPresent] = useState(open);\n  const [mobileVisible, setMobileVisible] = useState(false);\n  const { depth } = useModalStack(present);\n  const [expanded, setExpanded] = useState(false);\n  // When confirmClose is active, a close request opens this prompt instead of\n  // closing outright; onClose only fires once the user confirms the discard.\n  const [confirming, setConfirming] = useState(false);\n\n  // requestClose is the single entry point for every close affordance. With the\n  // guard on, it surfaces the confirmation; otherwise it closes immediately.\n  const requestClose = () => {\n    if (confirmClose) setConfirming(true);\n    else onClose();\n  };\n\n  useEffect(() => {\n    window.clearTimeout(closeTimerRef.current);\n    window.cancelAnimationFrame(openFrameRef.current ?? 0);\n    // Both false where the environment cannot be asked, which lands on the\n    // desktop path: mount and unmount immediately, no deferred unmount to wait\n    // on. That is the right answer under SSR and in a consumer's jsdom suite.\n    const animateMobile =\n      mediaMatches(MOBILE_QUERY) && !mediaMatches(REDUCED_MOTION_QUERY);\n\n    if (open) {\n      setPresent(true);\n      if (animateMobile) {\n        setMobileVisible(false);\n        openFrameRef.current = window.requestAnimationFrame(() => {\n          setMobileVisible(true);\n        });\n      } else {\n        setMobileVisible(true);\n      }\n    } else if (animateMobile) {\n      setMobileVisible(false);\n      closeTimerRef.current = window.setTimeout(\n        () => setPresent(false),\n        MOBILE_TRANSITION_MS,\n      );\n    } else {\n      setMobileVisible(false);\n      setPresent(false);\n    }\n\n    return () => {\n      window.clearTimeout(closeTimerRef.current);\n      window.cancelAnimationFrame(openFrameRef.current ?? 0);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) {\n      setExpanded(false);\n      setConfirming(false);\n    }\n  }, [open]);\n\n  // A close guard that disappears mid-prompt (changes saved/reverted) should\n  // not leave a stale confirmation dialog up.\n  useEffect(() => {\n    if (!confirmClose) setConfirming(false);\n  }, [confirmClose]);\n\n  useEscapeLayer(present, () => {\n    if (!open || !closeOnEsc) return;\n    // While the prompt is up, Escape dismisses the prompt rather than the modal.\n    if (confirming) setConfirming(false);\n    else requestClose();\n  });\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.activeElement as HTMLElement | null;\n    dialogRef.current?.focus();\n    return () => prev?.focus?.();\n  }, [open]);\n\n  if (!present) return null;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex items-center justify-center p-density-2 sm:p-density-4 max-sm:items-stretch max-sm:justify-end max-sm:p-0 max-sm:!bg-transparent\",\n        // Nested modals dim less so the dialog they opened over stays visible.\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      // Sits in the modal band of the centralized z-index scale; +depth keeps\n      // nested modals above their parent. Floating content (dropdowns, tooltips)\n      // computes its z relative to this via useFloatingZIndex so it clears the\n      // modal instead of rendering behind it.\n      style={{ zIndex: zIndex.modal + depth * zIndex.modalStep }}\n      onClick={closeOnBackdrop ? requestClose : undefined}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        data-state={mobileVisible ? \"open\" : \"closed\"}\n        className={cn(\n          \"relative flex w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl\",\n          \"max-sm:!h-dvh max-sm:!max-h-dvh max-sm:!max-w-none max-sm:!rounded-none max-sm:!border-0 max-sm:shadow-none\",\n          \"max-sm:transition-transform max-sm:duration-200 max-sm:ease-out max-sm:motion-reduce:transition-none\",\n          \"max-sm:data-[state=closed]:translate-x-full max-sm:data-[state=open]:translate-x-0\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        // Inline maxHeight (not an arbitrary Tailwind class) so the panel stays\n        // viewport-bounded even when a consumer's Tailwind build can't generate\n        // the dvh utility — e.g. www aliases clicky-ui to source but scans the\n        // published dist. When expanded, fill the viewport.\n        style={{\n          maxHeight: \"calc(100dvh - 2rem)\",\n          ...(expanded ? { height: \"calc(100dvh - 2rem)\" } : {}),\n        }}\n        onClick={(e) => e.stopPropagation()}\n        onKeyDown={(event) => {\n          if (event.key !== \"Tab\") return;\n          const scope = confirming\n            ? dialogRef.current?.querySelector<HTMLElement>(\n                \"[role='alertdialog']\",\n              )\n            : dialogRef.current;\n          if (!scope) return;\n          const focusable = visibleFocusableElements(scope);\n          const first = focusable[0];\n          const last = focusable[focusable.length - 1];\n          if (!first || !last) {\n            event.preventDefault();\n            scope.focus();\n          } else if (event.shiftKey && document.activeElement === first) {\n            event.preventDefault();\n            last.focus();\n          } else if (!event.shiftKey && document.activeElement === last) {\n            event.preventDefault();\n            first.focus();\n          }\n        }}\n      >\n        {(title || subtitle || headerSlot || expandable || !hideClose) && (\n          <div className=\"shrink-0 px-density-4 py-density-3 border-b border-border max-sm:min-h-14 max-sm:bg-background\">\n            <div className=\"flex items-center gap-density-2\">\n              {!hideClose && (\n                <Button\n                  type=\"button\"\n                  onClick={requestClose}\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  aria-label=\"Back\"\n                  className=\"-ml-2 text-foreground sm:hidden\"\n                >\n                  <Icon icon={UiArrowLeft} />\n                </Button>\n              )}\n              {title ? (\n                <h2 className=\"text-sm font-semibold flex-1 max-sm:text-base max-sm:leading-6\">\n                  {title}\n                </h2>\n              ) : (\n                <span className=\"flex-1\" />\n              )}\n              {headerSlot}\n              {expandable && (\n                <button\n                  type=\"button\"\n                  onClick={() => setExpanded((v) => !v)}\n                  aria-label={\n                    expanded ? \"Restore size\" : \"Expand to fullscreen\"\n                  }\n                  className=\"text-muted-foreground hover:text-foreground max-sm:hidden\"\n                >\n                  <Icon icon={expanded ? UiFullscreenFilled : UiFullscreen} />\n                </button>\n              )}\n              {!hideClose && (\n                <button\n                  type=\"button\"\n                  onClick={requestClose}\n                  aria-label=\"Close\"\n                  className=\"text-muted-foreground hover:text-foreground max-sm:hidden\"\n                >\n                  <Icon icon={UiClose} />\n                </button>\n              )}\n            </div>\n            {subtitle ? <div className=\"mt-density-2\">{subtitle}</div> : null}\n          </div>\n        )}\n        <div\n          data-slot=\"modal-body\"\n          className={cn(\n            \"min-h-0 flex-1 px-density-4 py-density-3 max-sm:py-density-4\",\n            scrollBody ? \"overflow-auto\" : \"flex flex-col overflow-hidden\",\n          )}\n        >\n          {children}\n        </div>\n        {footer && (\n          <div\n            data-slot=\"modal-footer\"\n            className=\"shrink-0 px-density-4 py-density-3 border-t border-border max-sm:py-density-4\"\n          >\n            {footer}\n          </div>\n        )}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={\n              confirmClose === true\n                ? DEFAULT_CONFIRM\n                : { ...DEFAULT_CONFIRM, ...confirmClose }\n            }\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  // Render into document.body so the fixed-position overlay escapes any ancestor\n  // transform/overflow (e.g. a dropdown menu positioned via a CSS transform),\n  // which would otherwise trap position:fixed inside that ancestor's box and clip\n  // the modal to it.\n  return typeof document !== \"undefined\"\n    ? createPortal(overlay, document.body)\n    : null;\n}\n\nfunction ConfirmClosePrompt({\n  options,\n  onConfirm,\n  onCancel,\n}: {\n  options: Required<ConfirmCloseOptions>;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4 max-sm:rounded-none\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-label={\n        typeof options.title === \"string\" ? options.title : \"Confirm close\"\n      }\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl\">\n        <h3 className=\"text-sm font-semibold\">{options.title}</h3>\n        <p className=\"mt-density-2 text-sm text-muted-foreground\">\n          {options.message}\n        </p>\n        <div className=\"mt-density-4 flex justify-end gap-density-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel}\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\" onClick={onConfirm}>\n            {options.confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs","names":["belowBreakpoint","useRef","useState","useModalStack","mediaMatches","cn","zIndex","Button","Icon","UiArrowLeft","UiFullscreenFilled","UiFullscreen","UiClose","createPortal"],"sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport {\n  UiArrowLeft,\n  UiClose,\n  UiFullscreen,\n  UiFullscreenFilled,\n} from \"../icons\";\nimport { mediaMatches } from \"../hooks/use-media-query\";\nimport { belowBreakpoint } from \"../lib/breakpoints\";\nimport { useEscapeLayer, useModalStack } from \"./modalStack\";\nimport { zIndex } from \"./zIndex\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"full\";\n\n/** Copy for the discard-confirmation prompt shown before a guarded close. */\nexport type ConfirmCloseOptions = {\n  /** Heading of the confirmation prompt. */\n  title?: ReactNode;\n  /** Body explaining what is lost on close. */\n  message?: ReactNode;\n  /** Label of the button that proceeds with closing. */\n  confirmLabel?: string;\n  /** Label of the button that dismisses the prompt and keeps the modal open. */\n  cancelLabel?: string;\n};\n\nexport type ModalProps = {\n  /** Controls whether the modal is mounted. */\n  open: boolean;\n  /** Called when the modal requests to close. */\n  onClose: () => void;\n  /**\n   * Guard every close path (close button, Escape, backdrop) behind a discard\n   * confirmation. `true` uses the default copy; pass options to customise it.\n   * `onClose` only fires once the user confirms. Set this while the modal holds\n   * unsaved edits and clear it (or pass `false`) once there is nothing to lose.\n   */\n  confirmClose?: boolean | ConfirmCloseOptions;\n  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /**\n   * Secondary header content rendered on its own row directly beneath the title.\n   * The title stays a single row alongside the expand/close buttons, so a tall\n   * subtitle (e.g. a tab switcher) never pushes those buttons down.\n   */\n  subtitle?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. Off by default; close via Escape or the close button. */\n  closeOnBackdrop?: boolean;\n  /** Close when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Hide the close button. */\n  hideClose?: boolean;\n  /** Show an expand/restore button. */\n  expandable?: boolean;\n  /** Classes applied to the dialog panel. */\n  className?: string;\n  /** Extra header content rendered before the expand/close buttons. */\n  headerSlot?: ReactNode;\n  /** Footer content pinned below the scrollable body. */\n  footer?: ReactNode;\n  /**\n   * Whether the body scrolls its overflow. Default `true`. Set `false` when the\n   * body owns a single fill-height child that scrolls internally (e.g. a\n   * DataTable with a sticky header): the body becomes a non-scrolling flex\n   * column, so only that child's own scroll region moves.\n   */\n  scrollBody?: boolean;\n  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-2xl\",\n  xl: \"max-w-4xl\",\n  \"2xl\": \"max-w-6xl\",\n  full: \"max-w-[95vw]\",\n};\n\nconst DEFAULT_CONFIRM: Required<ConfirmCloseOptions> = {\n  title: \"Discard changes?\",\n  message: \"You have unsaved changes. Closing now will discard them.\",\n  confirmLabel: \"Discard\",\n  cancelLabel: \"Keep editing\",\n};\n\nconst MOBILE_QUERY = belowBreakpoint(\"sm\");\nconst REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\nconst MOBILE_TRANSITION_MS = 200;\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"[tabindex]:not([tabindex='-1'])\",\n].join(\",\");\n\nfunction visibleFocusableElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter((element) => {\n    const style = window.getComputedStyle(element);\n    return (\n      !element.hidden &&\n      style.display !== \"none\" &&\n      style.visibility !== \"hidden\"\n    );\n  });\n}\n\nexport function Modal({\n  open,\n  onClose,\n  confirmClose = false,\n  title,\n  subtitle,\n  size = \"md\",\n  closeOnBackdrop = false,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  scrollBody = true,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const closeTimerRef = useRef<number | undefined>(undefined);\n  const openFrameRef = useRef<number | undefined>(undefined);\n  const [present, setPresent] = useState(open);\n  const [mobileVisible, setMobileVisible] = useState(false);\n  const { depth } = useModalStack(present);\n  const [expanded, setExpanded] = useState(false);\n  // When confirmClose is active, a close request opens this prompt instead of\n  // closing outright; onClose only fires once the user confirms the discard.\n  const [confirming, setConfirming] = useState(false);\n\n  // requestClose is the single entry point for every close affordance. With the\n  // guard on, it surfaces the confirmation; otherwise it closes immediately.\n  const requestClose = () => {\n    if (confirmClose) setConfirming(true);\n    else onClose();\n  };\n\n  useEffect(() => {\n    window.clearTimeout(closeTimerRef.current);\n    window.cancelAnimationFrame(openFrameRef.current ?? 0);\n    // Both false where the environment cannot be asked, which lands on the\n    // desktop path: mount and unmount immediately, no deferred unmount to wait\n    // on. That is the right answer under SSR and in a consumer's jsdom suite.\n    const animateMobile =\n      mediaMatches(MOBILE_QUERY) && !mediaMatches(REDUCED_MOTION_QUERY);\n\n    if (open) {\n      setPresent(true);\n      if (animateMobile) {\n        setMobileVisible(false);\n        openFrameRef.current = window.requestAnimationFrame(() => {\n          setMobileVisible(true);\n        });\n      } else {\n        setMobileVisible(true);\n      }\n    } else if (animateMobile) {\n      setMobileVisible(false);\n      closeTimerRef.current = window.setTimeout(\n        () => setPresent(false),\n        MOBILE_TRANSITION_MS,\n      );\n    } else {\n      setMobileVisible(false);\n      setPresent(false);\n    }\n\n    return () => {\n      window.clearTimeout(closeTimerRef.current);\n      window.cancelAnimationFrame(openFrameRef.current ?? 0);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) {\n      setExpanded(false);\n      setConfirming(false);\n    }\n  }, [open]);\n\n  // A close guard that disappears mid-prompt (changes saved/reverted) should\n  // not leave a stale confirmation dialog up.\n  useEffect(() => {\n    if (!confirmClose) setConfirming(false);\n  }, [confirmClose]);\n\n  useEscapeLayer(present, () => {\n    if (!open || !closeOnEsc) return;\n    // While the prompt is up, Escape dismisses the prompt rather than the modal.\n    if (confirming) setConfirming(false);\n    else requestClose();\n  });\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.activeElement as HTMLElement | null;\n    dialogRef.current?.focus();\n    return () => prev?.focus?.();\n  }, [open]);\n\n  if (!present) return null;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex items-center justify-center p-density-2 sm:p-density-4 max-sm:items-stretch max-sm:justify-end max-sm:p-0 max-sm:!bg-transparent\",\n        // Nested modals dim less so the dialog they opened over stays visible.\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      // Sits in the modal band of the centralized z-index scale; +depth keeps\n      // nested modals above their parent. Floating content (dropdowns, tooltips)\n      // computes its z relative to this via useFloatingZIndex so it clears the\n      // modal instead of rendering behind it.\n      style={{ zIndex: zIndex.modal + depth * zIndex.modalStep }}\n      onClick={closeOnBackdrop ? requestClose : undefined}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        data-state={mobileVisible ? \"open\" : \"closed\"}\n        className={cn(\n          \"relative flex w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl\",\n          \"max-sm:!h-dvh max-sm:!max-h-dvh max-sm:!max-w-none max-sm:!rounded-none max-sm:!border-0 max-sm:shadow-none\",\n          \"max-sm:transition-transform max-sm:duration-200 max-sm:ease-out max-sm:motion-reduce:transition-none\",\n          \"max-sm:data-[state=closed]:translate-x-full max-sm:data-[state=open]:translate-x-0\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        // Inline maxHeight (not an arbitrary Tailwind class) so the panel stays\n        // viewport-bounded even when a consumer's Tailwind build can't generate\n        // the dvh utility — e.g. www aliases clicky-ui to source but scans the\n        // published dist. When expanded, fill the viewport.\n        style={{\n          maxHeight: \"calc(100dvh - 2rem)\",\n          ...(expanded ? { height: \"calc(100dvh - 2rem)\" } : {}),\n        }}\n        onClick={(e) => e.stopPropagation()}\n        onKeyDown={(event) => {\n          if (event.key !== \"Tab\") return;\n          const scope = confirming\n            ? dialogRef.current?.querySelector<HTMLElement>(\n                \"[role='alertdialog']\",\n              )\n            : dialogRef.current;\n          if (!scope) return;\n          const focusable = visibleFocusableElements(scope);\n          const first = focusable[0];\n          const last = focusable[focusable.length - 1];\n          if (!first || !last) {\n            event.preventDefault();\n            scope.focus();\n          } else if (event.shiftKey && document.activeElement === first) {\n            event.preventDefault();\n            last.focus();\n          } else if (!event.shiftKey && document.activeElement === last) {\n            event.preventDefault();\n            first.focus();\n          }\n        }}\n      >\n        {(title || subtitle || headerSlot || expandable || !hideClose) && (\n          <div className=\"shrink-0 px-density-4 py-density-3 border-b border-border max-sm:min-h-14 max-sm:bg-background\">\n            <div className=\"flex items-center gap-density-2\">\n              {!hideClose && (\n                <Button\n                  type=\"button\"\n                  onClick={requestClose}\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  aria-label=\"Back\"\n                  className=\"-ml-2 text-foreground sm:hidden\"\n                >\n                  <Icon icon={UiArrowLeft} />\n                </Button>\n              )}\n              {title ? (\n                <h2 className=\"text-sm font-semibold flex-1 max-sm:text-base max-sm:leading-6\">\n                  {title}\n                </h2>\n              ) : (\n                <span className=\"flex-1\" />\n              )}\n              {headerSlot}\n              {expandable && (\n                <button\n                  type=\"button\"\n                  onClick={() => setExpanded((v) => !v)}\n                  aria-label={\n                    expanded ? \"Restore size\" : \"Expand to fullscreen\"\n                  }\n                  className=\"text-muted-foreground hover:text-foreground max-sm:hidden\"\n                >\n                  <Icon icon={expanded ? UiFullscreenFilled : UiFullscreen} />\n                </button>\n              )}\n              {!hideClose && (\n                <button\n                  type=\"button\"\n                  onClick={requestClose}\n                  aria-label=\"Close\"\n                  className=\"text-muted-foreground hover:text-foreground max-sm:hidden\"\n                >\n                  <Icon icon={UiClose} />\n                </button>\n              )}\n            </div>\n            {subtitle ? <div className=\"mt-density-2\">{subtitle}</div> : null}\n          </div>\n        )}\n        <div\n          data-slot=\"modal-body\"\n          className={cn(\n            \"min-h-0 flex-1 px-density-4 py-density-3 max-sm:py-density-4\",\n            scrollBody ? \"overflow-auto\" : \"flex flex-col overflow-hidden\",\n          )}\n        >\n          {children}\n        </div>\n        {footer && (\n          <div\n            data-slot=\"modal-footer\"\n            className=\"shrink-0 px-density-4 py-density-3 border-t border-border max-sm:py-density-4\"\n          >\n            {footer}\n          </div>\n        )}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={\n              confirmClose === true\n                ? DEFAULT_CONFIRM\n                : { ...DEFAULT_CONFIRM, ...confirmClose }\n            }\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  // Render into document.body so the fixed-position overlay escapes any ancestor\n  // transform/overflow (e.g. a dropdown menu positioned via a CSS transform),\n  // which would otherwise trap position:fixed inside that ancestor's box and clip\n  // the modal to it.\n  return typeof document !== \"undefined\"\n    ? createPortal(overlay, document.body)\n    : null;\n}\n\nfunction ConfirmClosePrompt({\n  options,\n  onConfirm,\n  onCancel,\n}: {\n  options: Required<ConfirmCloseOptions>;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4 max-sm:rounded-none\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-label={\n        typeof options.title === \"string\" ? options.title : \"Confirm close\"\n      }\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl\">\n        <h3 className=\"text-sm font-semibold\">{options.title}</h3>\n        <p className=\"mt-density-2 text-sm text-muted-foreground\">\n          {options.message}\n        </p>\n        <div className=\"mt-density-4 flex justify-end gap-density-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel}\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\" onClick={onConfirm}>\n            {options.confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/overlay/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/overlay/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAepE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AAEnE,6EAA6E;AAC7E,MAAM,MAAM,mBAAmB,GAAG;IAChC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,+CAA+C;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gGAAgG;IAChG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AA2CF,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,YAAoB,EACpB,KAAK,EACL,QAAQ,EACR,IAAW,EACX,eAAuB,EACvB,UAAiB,EACjB,SAAiB,EACjB,UAAiB,EACjB,SAAS,EACT,UAAU,EACV,MAAM,EACN,UAAiB,EACjB,QAAQ,GACT,EAAE,UAAU,sCA6OZ"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/overlay/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBpE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AAEnE,6EAA6E;AAC7E,MAAM,MAAM,mBAAmB,GAAG;IAChC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,+CAA+C;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gGAAgG;IAChG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AA2CF,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,YAAoB,EACpB,KAAK,EACL,QAAQ,EACR,IAAW,EACX,eAAuB,EACvB,UAAiB,EACjB,SAAiB,EACjB,UAAiB,EACjB,SAAS,EACT,UAAU,EACV,MAAM,EACN,UAAiB,EACjB,QAAQ,GACT,EAAE,UAAU,sCA6OZ"}

package/dist/overlay/Modal.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/utils.js";
+import { belowBreakpoint } from "../lib/breakpoints.js";
 import { UiClose } from "../icons/components/UiClose.js";
 import { UiFullscreen, UiFullscreenFilled } from "../icons/components/UiFullscreen.js";
 import { UiArrowLeft } from "../icons/components/UiArrowLeft.js";
@@ -25,7 +26,7 @@ var DEFAULT_CONFIRM = {
 	confirmLabel: "Discard",
 	cancelLabel: "Keep editing"
 };
-var MOBILE_QUERY = "(max-width: 639px)";
+var MOBILE_QUERY = belowBreakpoint("sm");
 var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 var MOBILE_TRANSITION_MS = 200;
 var FOCUSABLE_SELECTOR = [