@smwb/ui-solid 0.12.1 → 0.13.0

package/dist/headless/source/primitives/createHelperText.js

@@ -0,0 +1,16 @@
+import { children } from "solid-js";
+import { createId } from "./createId";
+function hasHelperText(helperText, inline) {
+  return !inline && Boolean(helperText);
+}
+function createHelperText(helperText, options = {}) {
+  const id = createId(void 0, "smwb-helper-text");
+  const text = children(() => options.inline?.() ? void 0 : helperText());
+  const describedBy = () => [hasHelperText(text(), options.inline?.()) ? id : void 0, options.describedBy?.()].filter(Boolean).join(" ") || void 0;
+  return { text, id, describedBy };
+}
+export {
+  createHelperText,
+  hasHelperText
+};
+//# sourceMappingURL=createHelperText.js.map

package/dist/headless/source/primitives/createHelperText.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/primitives/createHelperText.ts"],
+  "sourcesContent": ["import { type Accessor, type JSX, type ResolvedChildren, children } from \"solid-js\";\nimport { createId } from \"./createId\";\n\n/**\n * Whether `helperText` is shown under its control, so that it describes the control. TextFieldWrapper shows none for\n * an inline field, and without helper text it draws a blank line in its place, which describes nothing.\n */\nexport function hasHelperText(helperText: JSX.Element, inline?: boolean): boolean {\n  return !inline && Boolean(helperText);\n}\n\nexport interface HelperTextOptions {\n  /** The field is inline: TextFieldWrapper draws no helper text for it. */\n  inline?: () => boolean | undefined;\n  /** The caller's own `aria-describedby`, kept after the helper text. */\n  describedBy?: () => string | undefined;\n}\n\nexport interface HelperText {\n  /** The helper text, read once: draw this one (TextFieldWrapper takes it as `helperText`). */\n  text: Accessor<ResolvedChildren>;\n  /** The helper text's id (TextFieldWrapper takes it as `helperTextId`). */\n  id: string;\n  /** The control's `aria-describedby`: the helper text's id while it is shown, then the caller's own ids. */\n  describedBy: () => string | undefined;\n}\n\n/**\n * Links a control to the helper text drawn under it, by TextFieldWrapper or by the component itself (Rating). The\n * helper text is read here, once, and not for an inline field, which does not draw it: markup passed as a prop is\n * created anew on every read, and during hydration a copy the server never rendered has no DOM node.\n */\nexport function createHelperText(helperText: () => JSX.Element, options: HelperTextOptions = {}): HelperText {\n  const id = createId(undefined, \"smwb-helper-text\");\n  const text = children(() => (options.inline?.() ? undefined : helperText()));\n  const describedBy = (): string | undefined =>\n    [hasHelperText(text(), options.inline?.()) ? id : undefined, options.describedBy?.()].filter(Boolean).join(\" \") ||\n    undefined;\n  return { text, id, describedBy };\n}\n"],
+  "mappings": "AAAA,SAAyD,gBAAgB;AACzE,SAAS,gBAAgB;AAMlB,SAAS,cAAc,YAAyB,QAA2B;AAChF,SAAO,CAAC,UAAU,QAAQ,UAAU;AACtC;AAuBO,SAAS,iBAAiB,YAA+B,UAA6B,CAAC,GAAe;AAC3G,QAAM,KAAK,SAAS,QAAW,kBAAkB;AACjD,QAAM,OAAO,SAAS,MAAO,QAAQ,SAAS,IAAI,SAAY,WAAW,CAAE;AAC3E,QAAM,cAAc,MAClB,CAAC,cAAc,KAAK,GAAG,QAAQ,SAAS,CAAC,IAAI,KAAK,QAAW,QAAQ,cAAc,CAAC,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAC9G;AACF,SAAO,EAAE,MAAM,IAAI,YAAY;AACjC;",
+  "names": []
+}

package/dist/headless/source/primitives/mergeStyle.js

@@ -0,0 +1,15 @@
+const declared = (style) => Object.entries(style).filter((entry) => entry[1] != null);
+const cssText = (style) => declared(style).map(([name, value]) => `${name}:${value}`).join(";");
+const isSet = (style) => typeof style === "string" ? style !== "" : style != null && declared(style).length > 0;
+function mergeStyle(...styles) {
+  const given = styles.filter(isSet);
+  if (given.length < 2) return given[0];
+  if (given.some((style) => typeof style === "string")) {
+    return given.map((style) => typeof style === "string" ? style : cssText(style)).join(";");
+  }
+  return Object.fromEntries(given.flatMap((style) => declared(style)));
+}
+export {
+  mergeStyle
+};
+//# sourceMappingURL=mergeStyle.js.map

package/dist/headless/source/primitives/mergeStyle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/primitives/mergeStyle.ts"],
+  "sourcesContent": ["import type { JSX } from \"solid-js\";\n\ntype Style = JSX.CSSProperties | string | undefined;\n\n// The properties of an object style that have a value.\nconst declared = (style: JSX.CSSProperties): Array<[string, string | number]> =>\n  Object.entries(style).filter((entry): entry is [string, string | number] => entry[1] != null);\n\n// An object style written out as CSS declarations.\nconst cssText = (style: JSX.CSSProperties): string =>\n  declared(style)\n    .map(([name, value]) => `${name}:${value}`)\n    .join(\";\");\n\nconst isSet = (style: Style): style is JSX.CSSProperties | string =>\n  typeof style === \"string\" ? style !== \"\" : style != null && declared(style).length > 0;\n\n/**\n * Inline styles merged in order, each winning over the ones before it: a\n * caller's `style` prop \u2014 an object or a CSS string \u2014 and the component's own\n * properties. Properties set to `undefined` are left out, so an unset prop does\n * not clobber a value the caller set. If one of the styles is a string, so is\n * the result, with the objects written out as declarations in their place (a\n * string style must stay a string: spreading it as an object drops it). A\n * style that is the only one with anything set comes back as it is.\n *\n * The component's properties over the caller's:\n * `<div style={mergeStyle(local.style, { \"--smwb-x\": local.x })} />`\n *\n * The caller's style over the component's defaults:\n * `<div style={mergeStyle({ display: \"flex\", gap: gap() }, local.style)} />`\n */\nexport function mergeStyle(...styles: Style[]): Style {\n  const given = styles.filter(isSet);\n  if (given.length < 2) return given[0];\n  if (given.some((style) => typeof style === \"string\")) {\n    return given.map((style) => (typeof style === \"string\" ? style : cssText(style))).join(\";\");\n  }\n  return Object.fromEntries(given.flatMap((style) => declared(style as JSX.CSSProperties))) as JSX.CSSProperties;\n}\n"],
+  "mappings": "AAKA,MAAM,WAAW,CAAC,UAChB,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,UAA8C,MAAM,CAAC,KAAK,IAAI;AAG9F,MAAM,UAAU,CAAC,UACf,SAAS,KAAK,EACX,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,GAAG,IAAI,IAAI,KAAK,EAAE,EACzC,KAAK,GAAG;AAEb,MAAM,QAAQ,CAAC,UACb,OAAO,UAAU,WAAW,UAAU,KAAK,SAAS,QAAQ,SAAS,KAAK,EAAE,SAAS;AAiBhF,SAAS,cAAc,QAAwB;AACpD,QAAM,QAAQ,OAAO,OAAO,KAAK;AACjC,MAAI,MAAM,SAAS,EAAG,QAAO,MAAM,CAAC;AACpC,MAAI,MAAM,KAAK,CAAC,UAAU,OAAO,UAAU,QAAQ,GAAG;AACpD,WAAO,MAAM,IAAI,CAAC,UAAW,OAAO,UAAU,WAAW,QAAQ,QAAQ,KAAK,CAAE,EAAE,KAAK,GAAG;AAAA,EAC5F;AACA,SAAO,OAAO,YAAY,MAAM,QAAQ,CAAC,UAAU,SAAS,KAA0B,CAAC,CAAC;AAC1F;",
+  "names": []
+}

package/dist/headless/source/primitives/overlayLayer.js

@@ -2,16 +2,24 @@ const OVERLAY_LAYER_ATTR = "data-smwb-overlay-layer";
 const overlayLayers = () => typeof document === "undefined" ? [] : Array.from(document.querySelectorAll(`[${OVERLAY_LAYER_ATTR}]`));
 const isEventInForeignOverlay = (event, node) => {
   if (typeof event.composedPath !== "function") return false;
-  return event.composedPath().some((el) => el instanceof Element && el.hasAttribute(OVERLAY_LAYER_ATTR) && !el.contains(node));
+  const above = Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_DISCONNECTED;
+  return event.composedPath().some(
+    (el) => el instanceof Element && el.hasAttribute(OVERLAY_LAYER_ATTR) && (node.compareDocumentPosition(el) & above) !== 0
+  );
 };
 const isTopOverlayLayer = (el) => {
   if (!el) return true;
   const all = overlayLayers();
   const top = all[all.length - 1];
-  return !top || top === el || top.contains(el) || el.contains(top);
+  return !top || top === el || top.contains(el);
+};
+const hasOverlayLayerAbove = (el) => {
+  if (!el || !el.isConnected) return false;
+  return overlayLayers().some((layer) => (el.compareDocumentPosition(layer) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0);
 };
 export {
   OVERLAY_LAYER_ATTR,
+  hasOverlayLayerAbove,
   isEventInForeignOverlay,
   isTopOverlayLayer
 };

package/dist/headless/source/primitives/overlayLayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/primitives/overlayLayer.ts"],
-  "sourcesContent": ["/** Attribute marking the root of a portaled overlay layer (modal, sheet wrapper, dropdown, \u2026). */\nexport const OVERLAY_LAYER_ATTR = \"data-smwb-overlay-layer\";\n\n/** All open overlay layers in document order (last = topmost). */\nconst overlayLayers = (): Element[] =>\n  typeof document === \"undefined\" ? [] : Array.from(document.querySelectorAll(`[${OVERLAY_LAYER_ATTR}]`));\n\n/**\n * True when `event` happened inside an overlay layer that does NOT contain\n * `node` \u2014 i.e. `node` sits underneath that layer, so the interaction is not\n * a \"click away\" from `node`.\n */\nexport const isEventInForeignOverlay = (event: Event, node: Element): boolean => {\n  if (typeof event.composedPath !== \"function\") return false;\n  return event\n    .composedPath()\n    .some((el) => el instanceof Element && el.hasAttribute(OVERLAY_LAYER_ATTR) && !el.contains(node));\n};\n\n/**\n * True when `el` belongs to the topmost open overlay layer (or no layers are\n * open). Used to make Escape close only the top layer instead of every layer.\n */\nexport const isTopOverlayLayer = (el: Element | undefined): boolean => {\n  if (!el) return true;\n  const all = overlayLayers();\n  const top = all[all.length - 1];\n  return !top || top === el || top.contains(el) || el.contains(top);\n};\n"],
-  "mappings": "AACO,MAAM,qBAAqB;AAGlC,MAAM,gBAAgB,MACpB,OAAO,aAAa,cAAc,CAAC,IAAI,MAAM,KAAK,SAAS,iBAAiB,IAAI,kBAAkB,GAAG,CAAC;AAOjG,MAAM,0BAA0B,CAAC,OAAc,SAA2B;AAC/E,MAAI,OAAO,MAAM,iBAAiB,WAAY,QAAO;AACrD,SAAO,MACJ,aAAa,EACb,KAAK,CAAC,OAAO,cAAc,WAAW,GAAG,aAAa,kBAAkB,KAAK,CAAC,GAAG,SAAS,IAAI,CAAC;AACpG;AAMO,MAAM,oBAAoB,CAAC,OAAqC;AACrE,MAAI,CAAC,GAAI,QAAO;AAChB,QAAM,MAAM,cAAc;AAC1B,QAAM,MAAM,IAAI,IAAI,SAAS,CAAC;AAC9B,SAAO,CAAC,OAAO,QAAQ,MAAM,IAAI,SAAS,EAAE,KAAK,GAAG,SAAS,GAAG;AAClE;",
+  "sourcesContent": ["/** Attribute marking the root of a portaled overlay layer (modal, sheet wrapper, dropdown, \u2026). */\nexport const OVERLAY_LAYER_ATTR = \"data-smwb-overlay-layer\";\n\n/** All open overlay layers in document order (last = topmost). */\nconst overlayLayers = (): Element[] =>\n  typeof document === \"undefined\" ? [] : Array.from(document.querySelectorAll(`[${OVERLAY_LAYER_ATTR}]`));\n\n/**\n * True when `event` happened inside an overlay layer above `node`, so the\n * interaction is not a \"click away\" from `node`. A layer is above `node` when it\n * comes later in document order (portaled after it, as everything opened from\n * inside `node` is) or sits inside it. A layer that holds `node` or comes before\n * it is below: a click in the Modal a select menu was opened from is a click away\n * from the menu.\n */\nexport const isEventInForeignOverlay = (event: Event, node: Element): boolean => {\n  if (typeof event.composedPath !== \"function\") return false;\n  // A layer detached during the dispatch can't be ranked; it counts as above.\n  const above = Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_DISCONNECTED;\n  return event\n    .composedPath()\n    .some(\n      (el) =>\n        el instanceof Element && el.hasAttribute(OVERLAY_LAYER_ATTR) && (node.compareDocumentPosition(el) & above) !== 0\n    );\n};\n\n/**\n * True when `el` belongs to the topmost open overlay layer (or no layers are\n * open). Used to make Escape close only the top layer instead of every layer.\n * A layer inside `el`, such as a select menu rendered into a Modal through\n * `menuContainer`, is above `el` rather than part of it.\n */\nexport const isTopOverlayLayer = (el: Element | undefined): boolean => {\n  if (!el) return true;\n  const all = overlayLayers();\n  const top = all[all.length - 1];\n  return !top || top === el || top.contains(el);\n};\n\n/**\n * True when an open overlay layer other than `el` sits above it: inside it, or\n * later in document order (portaled after it). FloatingWindow and the fullscreen\n * ExpansionPanel leave Escape to such a layer, e.g. a select menu opened from\n * inside them. Layers earlier in document order are below `el`.\n */\nexport const hasOverlayLayerAbove = (el: Element | undefined): boolean => {\n  if (!el || !el.isConnected) return false;\n  return overlayLayers().some((layer) => (el.compareDocumentPosition(layer) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0);\n};\n"],
+  "mappings": "AACO,MAAM,qBAAqB;AAGlC,MAAM,gBAAgB,MACpB,OAAO,aAAa,cAAc,CAAC,IAAI,MAAM,KAAK,SAAS,iBAAiB,IAAI,kBAAkB,GAAG,CAAC;AAUjG,MAAM,0BAA0B,CAAC,OAAc,SAA2B;AAC/E,MAAI,OAAO,MAAM,iBAAiB,WAAY,QAAO;AAErD,QAAM,QAAQ,KAAK,8BAA8B,KAAK;AACtD,SAAO,MACJ,aAAa,EACb;AAAA,IACC,CAAC,OACC,cAAc,WAAW,GAAG,aAAa,kBAAkB,MAAM,KAAK,wBAAwB,EAAE,IAAI,WAAW;AAAA,EACnH;AACJ;AAQO,MAAM,oBAAoB,CAAC,OAAqC;AACrE,MAAI,CAAC,GAAI,QAAO;AAChB,QAAM,MAAM,cAAc;AAC1B,QAAM,MAAM,IAAI,IAAI,SAAS,CAAC;AAC9B,SAAO,CAAC,OAAO,QAAQ,MAAM,IAAI,SAAS,EAAE;AAC9C;AAQO,MAAM,uBAAuB,CAAC,OAAqC;AACxE,MAAI,CAAC,MAAM,CAAC,GAAG,YAAa,QAAO;AACnC,SAAO,cAAc,EAAE,KAAK,CAAC,WAAW,GAAG,wBAAwB,KAAK,IAAI,KAAK,iCAAiC,CAAC;AACrH;",
   "names": []
 }

package/dist/headless/source/utils/controlProps.js

@@ -0,0 +1,22 @@
+import { mergeProps, splitProps } from "solid-js";
+function isControlProp(key) {
+  return key === "role" || key === "tabindex" || key === "onFocus" || key === "onBlur" || key.startsWith("aria-") && key !== "aria-hidden";
+}
+function propsWhile(props, when) {
+  const gated = {};
+  for (const key of Object.keys(props)) {
+    Object.defineProperty(gated, key, { enumerable: true, get: () => when() ? props[key] : void 0 });
+  }
+  return gated;
+}
+function splitControlProps(props, toControl) {
+  const keys = Object.keys(props).filter((key) => isControlProp(key));
+  const [control, box] = splitProps(props, keys);
+  if (!toControl) return [control, box];
+  const offControl = propsWhile(control, () => !toControl());
+  return [propsWhile(control, toControl), mergeProps(box, offControl)];
+}
+export {
+  splitControlProps
+};
+//# sourceMappingURL=controlProps.js.map

package/dist/headless/source/utils/controlProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/utils/controlProps.ts"],
+  "sourcesContent": ["import { type JSX, mergeProps, splitProps } from \"solid-js\";\n\n/** What an element is to the keyboard and to assistive tech. */\nexport type ControlProps = Pick<JSX.HTMLAttributes<HTMLElement>, \"tabindex\" | \"onFocus\" | \"onBlur\"> &\n  JSX.AriaAttributes;\n\nfunction isControlProp(key: string): boolean {\n  return (\n    key === \"role\" ||\n    key === \"tabindex\" ||\n    key === \"onFocus\" ||\n    key === \"onBlur\" ||\n    (key.startsWith(\"aria-\") && key !== \"aria-hidden\")\n  );\n}\n\n// The props while `when` holds, none of them while it does not.\nfunction propsWhile<T extends object>(props: T, when: () => boolean): T {\n  const gated = {} as T;\n  for (const key of Object.keys(props) as (keyof T)[]) {\n    Object.defineProperty(gated, key, { enumerable: true, get: () => (when() ? props[key] : undefined) });\n  }\n  return gated;\n}\n\n/**\n * Splits the caller's props of a component whose root is a box around its\n * control and other content beside it: a card's button and its footer or\n * corner slots, a chip's button and its delete button.\n *\n * What the component is to the keyboard and to assistive tech goes to the\n * control, the element that takes focus: `role`, `tabindex`, `onFocus`,\n * `onBlur` and the `aria-*` attributes. The rest stays on the box, and so does\n * `aria-hidden`, which hides the whole component. While `toControl` returns\n * false (the component is not a control, e.g. a card without `onClick`), all of\n * them stay on the box. Only keys the caller gave are picked, once, as\n * splitProps picks them; their values stay reactive.\n */\nexport function splitControlProps<T extends object>(props: T, toControl?: () => boolean): [ControlProps, T] {\n  const keys = (Object.keys(props) as (keyof T)[]).filter((key) => isControlProp(key as string));\n  const [control, box] = splitProps(props, keys);\n  if (!toControl) return [control as ControlProps, box as T];\n  const offControl = propsWhile(control, () => !toControl());\n  return [propsWhile(control, toControl) as ControlProps, mergeProps(box, offControl) as T];\n}\n"],
+  "mappings": "AAAA,SAAmB,YAAY,kBAAkB;AAMjD,SAAS,cAAc,KAAsB;AAC3C,SACE,QAAQ,UACR,QAAQ,cACR,QAAQ,aACR,QAAQ,YACP,IAAI,WAAW,OAAO,KAAK,QAAQ;AAExC;AAGA,SAAS,WAA6B,OAAU,MAAwB;AACtE,QAAM,QAAQ,CAAC;AACf,aAAW,OAAO,OAAO,KAAK,KAAK,GAAkB;AACnD,WAAO,eAAe,OAAO,KAAK,EAAE,YAAY,MAAM,KAAK,MAAO,KAAK,IAAI,MAAM,GAAG,IAAI,OAAW,CAAC;AAAA,EACtG;AACA,SAAO;AACT;AAeO,SAAS,kBAAoC,OAAU,WAA8C;AAC1G,QAAM,OAAQ,OAAO,KAAK,KAAK,EAAkB,OAAO,CAAC,QAAQ,cAAc,GAAa,CAAC;AAC7F,QAAM,CAAC,SAAS,GAAG,IAAI,WAAW,OAAO,IAAI;AAC7C,MAAI,CAAC,UAAW,QAAO,CAAC,SAAyB,GAAQ;AACzD,QAAM,aAAa,WAAW,SAAS,MAAM,CAAC,UAAU,CAAC;AACzD,SAAO,CAAC,WAAW,SAAS,SAAS,GAAmB,WAAW,KAAK,UAAU,CAAM;AAC1F;",
+  "names": []
+}

package/dist/headless/source/utils/ownClick.js

@@ -0,0 +1,41 @@
+const INTERACTIVE = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "summary",
+  "[tabindex]",
+  "[contenteditable]:not([contenteditable='false'])",
+  ...[
+    "button",
+    "link",
+    "checkbox",
+    "radio",
+    "switch",
+    "textbox",
+    "searchbox",
+    "combobox",
+    "spinbutton",
+    "slider",
+    "menuitem",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "option",
+    "tab"
+  ].map((role) => `[role='${role}']`)
+].join(",");
+function isOwnClick(event, control = event.currentTarget) {
+  if (event.defaultPrevented) return false;
+  const target = event.target;
+  const nearest = target?.closest(INTERACTIVE) ?? null;
+  if (nearest !== null && nearest === control) return true;
+  const box = event.currentTarget;
+  if (control === box || !target || !box?.contains(target)) return false;
+  return !(nearest && box.contains(nearest));
+}
+export {
+  isOwnClick
+};
+//# sourceMappingURL=ownClick.js.map

package/dist/headless/source/utils/ownClick.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/utils/ownClick.ts"],
+  "sourcesContent": ["/**\n * Whatever takes a click of its own: a native control or link, a label,\n * anything focusable, a widget role, editable content.\n */\nconst INTERACTIVE = [\n  \"a[href]\",\n  \"button\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  \"label\",\n  \"summary\",\n  \"[tabindex]\",\n  \"[contenteditable]:not([contenteditable='false'])\",\n  ...[\n    \"button\",\n    \"link\",\n    \"checkbox\",\n    \"radio\",\n    \"switch\",\n    \"textbox\",\n    \"searchbox\",\n    \"combobox\",\n    \"spinbutton\",\n    \"slider\",\n    \"menuitem\",\n    \"menuitemcheckbox\",\n    \"menuitemradio\",\n    \"option\",\n    \"tab\",\n  ].map((role) => `[role='${role}']`),\n].join(\",\");\n\n/**\n * Whether a click belongs to the control that listens for it on a wrapper (a\n * sortable header, a selectable card) rather than to something inside it.\n *\n * The control must match `INTERACTIVE` itself (`role=\"button\"`, `tabindex`), and\n * then a click is its own when it is the nearest match from the click's target\n * up, and no handler has prevented the click's default yet. So a click in a\n * nested control is that control's, and so is a click in a `Portal` rendered\n * inside: Solid delivers it to the wrapper, though it landed outside.\n *\n * The control is the element that listens (`currentTarget`), unless the caller\n * passes another: a box that holds a control and other content beside it (a\n * card's button and its corner slots) listens for both. A click on that content\n * is then the control's too, unless it lands in a control of its own there.\n */\nexport function isOwnClick(\n  event: Pick<Event, \"target\" | \"currentTarget\" | \"defaultPrevented\">,\n  control: Element | null = event.currentTarget as Element | null\n): boolean {\n  if (event.defaultPrevented) return false;\n  const target = event.target as Element | null;\n  const nearest = target?.closest(INTERACTIVE) ?? null;\n  if (nearest !== null && nearest === control) return true;\n  const box = event.currentTarget as Element | null;\n  if (control === box || !target || !box?.contains(target)) return false;\n  return !(nearest && box.contains(nearest));\n}\n"],
+  "mappings": "AAIA,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,IAAI,CAAC,SAAS,UAAU,IAAI,IAAI;AACpC,EAAE,KAAK,GAAG;AAiBH,SAAS,WACd,OACA,UAA0B,MAAM,eACvB;AACT,MAAI,MAAM,iBAAkB,QAAO;AACnC,QAAM,SAAS,MAAM;AACrB,QAAM,UAAU,QAAQ,QAAQ,WAAW,KAAK;AAChD,MAAI,YAAY,QAAQ,YAAY,QAAS,QAAO;AACpD,QAAM,MAAM,MAAM;AAClB,MAAI,YAAY,OAAO,CAAC,UAAU,CAAC,KAAK,SAAS,MAAM,EAAG,QAAO;AACjE,SAAO,EAAE,WAAW,IAAI,SAAS,OAAO;AAC1C;",
+  "names": []
+}

package/dist/headless/utils/controlProps.js

@@ -0,0 +1,20 @@
+import { splitProps as f, mergeProps as u } from "solid-js";
+function l(r) {
+  return r === "role" || r === "tabindex" || r === "onFocus" || r === "onBlur" || r.startsWith("aria-") && r !== "aria-hidden";
+}
+function i(r, o) {
+  const e = {};
+  for (const t of Object.keys(r))
+    Object.defineProperty(e, t, { enumerable: !0, get: () => o() ? r[t] : void 0 });
+  return e;
+}
+function p(r, o) {
+  const e = Object.keys(r).filter((c) => l(c)), [t, n] = f(r, e);
+  if (!o) return [t, n];
+  const s = i(t, () => !o());
+  return [i(t, o), u(n, s)];
+}
+export {
+  p as splitControlProps
+};
+//# sourceMappingURL=controlProps.js.map

package/dist/headless/utils/controlProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controlProps.js","sources":["../../../src/utils/controlProps.ts"],"sourcesContent":["import { type JSX, mergeProps, splitProps } from \"solid-js\";\n\n/** What an element is to the keyboard and to assistive tech. */\nexport type ControlProps = Pick<JSX.HTMLAttributes<HTMLElement>, \"tabindex\" | \"onFocus\" | \"onBlur\"> &\n  JSX.AriaAttributes;\n\nfunction isControlProp(key: string): boolean {\n  return (\n    key === \"role\" ||\n    key === \"tabindex\" ||\n    key === \"onFocus\" ||\n    key === \"onBlur\" ||\n    (key.startsWith(\"aria-\") && key !== \"aria-hidden\")\n  );\n}\n\n// The props while `when` holds, none of them while it does not.\nfunction propsWhile<T extends object>(props: T, when: () => boolean): T {\n  const gated = {} as T;\n  for (const key of Object.keys(props) as (keyof T)[]) {\n    Object.defineProperty(gated, key, { enumerable: true, get: () => (when() ? props[key] : undefined) });\n  }\n  return gated;\n}\n\n/**\n * Splits the caller's props of a component whose root is a box around its\n * control and other content beside it: a card's button and its footer or\n * corner slots, a chip's button and its delete button.\n *\n * What the component is to the keyboard and to assistive tech goes to the\n * control, the element that takes focus: `role`, `tabindex`, `onFocus`,\n * `onBlur` and the `aria-*` attributes. The rest stays on the box, and so does\n * `aria-hidden`, which hides the whole component. While `toControl` returns\n * false (the component is not a control, e.g. a card without `onClick`), all of\n * them stay on the box. Only keys the caller gave are picked, once, as\n * splitProps picks them; their values stay reactive.\n */\nexport function splitControlProps<T extends object>(props: T, toControl?: () => boolean): [ControlProps, T] {\n  const keys = (Object.keys(props) as (keyof T)[]).filter((key) => isControlProp(key as string));\n  const [control, box] = splitProps(props, keys);\n  if (!toControl) return [control as ControlProps, box as T];\n  const offControl = propsWhile(control, () => !toControl());\n  return [propsWhile(control, toControl) as ControlProps, mergeProps(box, offControl) as T];\n}\n"],"names":["isControlProp","key","propsWhile","props","when","gated","splitControlProps","toControl","keys","control","box","splitProps","offControl","mergeProps"],"mappings":";AAMA,SAASA,EAAcC,GAAsB;AAC3C,SACEA,MAAQ,UACRA,MAAQ,cACRA,MAAQ,aACRA,MAAQ,YACPA,EAAI,WAAW,OAAO,KAAKA,MAAQ;AAExC;AAGA,SAASC,EAA6BC,GAAUC,GAAwB;AACtE,QAAMC,IAAQ,CAAA;AACd,aAAWJ,KAAO,OAAO,KAAKE,CAAK;AACjC,WAAO,eAAeE,GAAOJ,GAAK,EAAE,YAAY,IAAM,KAAK,MAAOG,EAAA,IAASD,EAAMF,CAAG,IAAI,QAAY;AAEtG,SAAOI;AACT;AAeO,SAASC,EAAoCH,GAAUI,GAA8C;AAC1G,QAAMC,IAAQ,OAAO,KAAKL,CAAK,EAAkB,OAAO,CAACF,MAAQD,EAAcC,CAAa,CAAC,GACvF,CAACQ,GAASC,CAAG,IAAIC,EAAWR,GAAOK,CAAI;AAC7C,MAAI,CAACD,EAAW,QAAO,CAACE,GAAyBC,CAAQ;AACzD,QAAME,IAAaV,EAAWO,GAAS,MAAM,CAACF,GAAW;AACzD,SAAO,CAACL,EAAWO,GAASF,CAAS,GAAmBM,EAAWH,GAAKE,CAAU,CAAM;AAC1F;"}

package/dist/headless/utils/ownClick.js

@@ -0,0 +1,39 @@
+const a = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "summary",
+  "[tabindex]",
+  "[contenteditable]:not([contenteditable='false'])",
+  ...[
+    "button",
+    "link",
+    "checkbox",
+    "radio",
+    "switch",
+    "textbox",
+    "searchbox",
+    "combobox",
+    "spinbutton",
+    "slider",
+    "menuitem",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "option",
+    "tab"
+  ].map((t) => `[role='${t}']`)
+].join(",");
+function i(t, r = t.currentTarget) {
+  if (t.defaultPrevented) return !1;
+  const n = t.target, e = n?.closest(a) ?? null;
+  if (e !== null && e === r) return !0;
+  const o = t.currentTarget;
+  return r === o || !n || !o?.contains(n) ? !1 : !(e && o.contains(e));
+}
+export {
+  i as isOwnClick
+};
+//# sourceMappingURL=ownClick.js.map

package/dist/headless/utils/ownClick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ownClick.js","sources":["../../../src/utils/ownClick.ts"],"sourcesContent":["/**\n * Whatever takes a click of its own: a native control or link, a label,\n * anything focusable, a widget role, editable content.\n */\nconst INTERACTIVE = [\n  \"a[href]\",\n  \"button\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  \"label\",\n  \"summary\",\n  \"[tabindex]\",\n  \"[contenteditable]:not([contenteditable='false'])\",\n  ...[\n    \"button\",\n    \"link\",\n    \"checkbox\",\n    \"radio\",\n    \"switch\",\n    \"textbox\",\n    \"searchbox\",\n    \"combobox\",\n    \"spinbutton\",\n    \"slider\",\n    \"menuitem\",\n    \"menuitemcheckbox\",\n    \"menuitemradio\",\n    \"option\",\n    \"tab\",\n  ].map((role) => `[role='${role}']`),\n].join(\",\");\n\n/**\n * Whether a click belongs to the control that listens for it on a wrapper (a\n * sortable header, a selectable card) rather than to something inside it.\n *\n * The control must match `INTERACTIVE` itself (`role=\"button\"`, `tabindex`), and\n * then a click is its own when it is the nearest match from the click's target\n * up, and no handler has prevented the click's default yet. So a click in a\n * nested control is that control's, and so is a click in a `Portal` rendered\n * inside: Solid delivers it to the wrapper, though it landed outside.\n *\n * The control is the element that listens (`currentTarget`), unless the caller\n * passes another: a box that holds a control and other content beside it (a\n * card's button and its corner slots) listens for both. A click on that content\n * is then the control's too, unless it lands in a control of its own there.\n */\nexport function isOwnClick(\n  event: Pick<Event, \"target\" | \"currentTarget\" | \"defaultPrevented\">,\n  control: Element | null = event.currentTarget as Element | null\n): boolean {\n  if (event.defaultPrevented) return false;\n  const target = event.target as Element | null;\n  const nearest = target?.closest(INTERACTIVE) ?? null;\n  if (nearest !== null && nearest === control) return true;\n  const box = event.currentTarget as Element | null;\n  if (control === box || !target || !box?.contains(target)) return false;\n  return !(nearest && box.contains(nearest));\n}\n"],"names":["INTERACTIVE","role","isOwnClick","event","control","target","nearest","box"],"mappings":"AAIA,MAAMA,IAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACA,IAAI,CAACC,MAAS,UAAUA,CAAI,IAAI;AACpC,EAAE,KAAK,GAAG;AAiBH,SAASC,EACdC,GACAC,IAA0BD,EAAM,eACvB;AACT,MAAIA,EAAM,iBAAkB,QAAO;AACnC,QAAME,IAASF,EAAM,QACfG,IAAUD,GAAQ,QAAQL,CAAW,KAAK;AAChD,MAAIM,MAAY,QAAQA,MAAYF,EAAS,QAAO;AACpD,QAAMG,IAAMJ,EAAM;AAClB,SAAIC,MAAYG,KAAO,CAACF,KAAU,CAACE,GAAK,SAASF,CAAM,IAAU,KAC1D,EAAEC,KAAWC,EAAI,SAASD,CAAO;AAC1C;"}

package/dist/index.d.ts

@@ -81,6 +81,8 @@ export { ImagesList, ImagesListItem, ImagesListItemModal } from "./components/da
 export type { ImagesListProps, ImagesListItemProps, ImagesListItemModalProps, ImageItem, } from "./components/dataDisplay/imagesList";
 export { Kanban, KanbanColumn, KanbanCard } from "./components/dataDisplay/kanban";
 export type { KanbanProps, KanbanColumnProps, KanbanCardProps } from "./components/dataDisplay/kanban";
+export { DagView, dagLayout } from "./components/dataDisplay/dagView";
+export type { DagViewProps, DagViewNode, DagViewEdge, DagViewStatus, DagViewViewport, DagViewApi, DagViewNodeState, DagViewLabels, DagLayoutInput, DagLayoutResult, } from "./components/dataDisplay/dagView";
 export { Chat, ChatLayout, ChatOverlayLayout, ChatShell, ChatHeader, ChatMessages, ChatMessageItem, ChatMessageIncoming, ChatMessageOutgoing, ChatMessageSystem, ChatMessageBubble, ChatMessageSkeleton, ChatMessageStatus, ChatMessageAvatar, ChatAttachments, ChatAttachmentImage, ChatIconButton, ChatComposer, createChatInfiniteScroll, createChatFileUpload, resolveChatFileUploadMaxFiles, createChatStickToBottom, isScrolledToBottom, scrollChatToBottom, CHAT_EXPAND_LAYOUTS, CHAT_DEFAULT_FILE_UPLOAD_MAX_FILES, CHAT_MESSAGE_DELIVERY_STATUSES, CHAT_MESSAGE_STATUS_ICONS, CHAT_MESSAGE_STATUS_LABELS, isImageAttachment, formatChatTimestamp, resolveAllowedLayouts, isChatMessageDeliveryStatus, resolveChatMessageStatusIcon, resolveChatMessageStatusLabel, shouldComposerNewlineOnEnter, getChatLayoutActions, shouldShowChatCloseButton, } from "./components/dataDisplay/chat";
 export type { ChatProps, ChatLayoutProps, ChatLayoutChatProps, ChatOverlayLayoutProps, ChatOverlayLayoutChatProps, ChatShellProps, ChatHeaderProps, ChatMessagesProps, ChatMessageItemProps, ChatMessageIncomingProps, ChatMessageOutgoingProps, ChatMessageSystemProps, ChatMessageBubbleProps, ChatMessageSkeletonProps, ChatMessageStatusProps, ChatMessageAvatarProps, ChatAttachmentsProps, ChatAttachmentImageProps, ChatIconButtonProps, ChatComposerProps, CreateChatInfiniteScrollParams, CreateChatFileUploadOptions, ChatFileUploadState, CreateChatStickToBottomParams, ChatMessage, ChatAttachment, ChatAuthor, ChatMessageVariant, ChatLayoutMode, ChatAnchor, ChatThemeMode, ChatMessageRenderContext, ChatLayoutSide, ChatMessageDeliveryStatus, ChatMessageStatusValue, ChatMessageStatusIcons, ChatMessageStatusRenderContext, ChatComposerNewlineOptions, } from "./components/dataDisplay/chat";
 export { Skeleton } from "./components/feedBack/skeleton";