@smwb/ui-solid 0.12.1 → 0.13.0

package/dist/source/components/dataDisplay/personChip/personChip.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/personChip/personChip.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/personChip/personChip.entry.less\";\nimport { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Avatar, type AvatarSize } from \"../avatar\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\n/** Up to two initials from a name: \"Anna Petrova\" → \"AP\", \"anna\" → \"A\". */\nexport function initialsOf(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  const first = (word: string | undefined): string => (word ? (Array.from(word)[0] ?? \"\") : \"\");\n  return (first(words[0]) + (words.length > 1 ? first(words[words.length - 1]) : \"\")).toUpperCase();\n}\n\n/**\n * A steady background colour for a person's avatar, derived from a seed (an id\n * or the name): the same person always gets the same colour, on the server too.\n */\nexport function avatarColor(seed: string): string {\n  let hash = 0;\n  for (const char of seed) hash = (hash * 31 + (char.codePointAt(0) ?? 0)) >>> 0;\n  return `hsl(${hash % 360} 42% 42%)`;\n}\n\nexport interface PersonChipProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  /** The person's name: shown beside the avatar, and the source of its initials. */\n  name: string;\n  /** Avatar image; initials on a colour without it or when it fails. */\n  src?: string;\n  /** Link to the person's card. */\n  href?: string;\n  /** The avatar only; the name becomes its tooltip and accessible name. */\n  compact?: boolean;\n  /** Avatar size: a preset or pixels. 24px by default. */\n  size?: AvatarSize | number;\n  /** Seed for the avatar colour (an id); the name by default. */\n  colorSeed?: string;\n  /** A fixed avatar colour instead of the derived one. */\n  color?: string;\n  /** A second line under the name: a role, a date. */\n  meta?: JSX.Element;\n  ref?: Ref<HTMLElement>;\n}\n\n/** The name and the meta line. Meta is read here, where it renders: markup\n *  created and not rendered (a compact chip) would have no server node. */\nfunction PersonText(props: { name: string; meta: JSX.Element }): JSX.Element {\n  const meta = children(() => props.meta);\n  return (\n    <span class=\"smwb-person-chip__text\">\n      <span class=\"smwb-person-chip__name\">{props.name}</span>\n      <Show when={meta()}>\n        <span class=\"smwb-person-chip__meta\">{meta()}</span>\n      </Show>\n    </span>\n  );\n}\n\n/** A person: avatar and name, a link to their card when `href` is set. */\nexport function PersonChip(props: PersonChipProps): JSX.Element {\n  const merged = mergeProps({ size: 24 as AvatarSize | number }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"name\",\n    \"src\",\n    \"href\",\n    \"compact\",\n    \"size\",\n    \"colorSeed\",\n    \"color\",\n    \"meta\",\n    \"ref\",\n  ]);\n\n  return (\n    <Dynamic\n      component={local.href ? \"a\" : \"span\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      title={local.compact ? local.name : undefined}\n      role={local.compact && !local.href ? \"img\" : undefined}\n      aria-label={local.compact ? local.name : undefined}\n      data-testid=\"person-chip\"\n      class={cn(\"smwb-person-chip\", { \"smwb-person-chip_link\": !!local.href, \"smwb-person-chip_compact\": local.compact }, local.class)}\n    >\n      <Avatar\n        class=\"smwb-person-chip__avatar\"\n        size={local.size}\n        src={local.src}\n        color={local.color ?? avatarColor(local.colorSeed ?? local.name)}\n        aria-hidden=\"true\"\n      >\n        {initialsOf(local.name)}\n      </Avatar>\n      <Show when={!local.compact}>\n        <PersonText name={local.name} meta={local.meta} />\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport default PersonChip;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,YAAY,kBAAkB;AACjE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,cAA+B;AACxC,SAAS,iBAA2B;AAG7B,SAAS,WAAW,MAAsB;AAC/C,QAAM,QAAQ,KAAK,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO;AACrD,QAAM,QAAQ,CAAC,SAAsC,OAAQ,MAAM,KAAK,IAAI,EAAE,CAAC,KAAK,KAAM;AAC1F,UAAQ,MAAM,MAAM,CAAC,CAAC,KAAK,MAAM,SAAS,IAAI,MAAM,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,KAAK,YAAY;AAClG;AAMO,SAAS,YAAY,MAAsB;AAChD,MAAI,OAAO;AACX,aAAW,QAAQ,KAAM,QAAQ,OAAO,MAAM,KAAK,YAAY,CAAC,KAAK,OAAQ;AAC7E,SAAO,OAAO,OAAO,GAAG;AAC1B;AAwBA,SAAS,WAAW,OAAyD;AAC3E,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,SACE,CAAC,KAAK,MAAM,yBAAyB;AAAA,MACnC,CAAC,KAAK,MAAM,0BAA0B,MAAM,KAAK,EAAhD,KAAuD;AAAA,MACxD,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,QAClB,CAAC,KAAK,MAAM,0BAA0B,KAAK,EAAE,EAA5C,KAAmD;AAAA,MACtD,EAFC,KAEM;AAAA,IACT,EALC;AAOL;AAGO,SAAS,WAAW,OAAqC;AAC9D,QAAM,SAAS,WAAW,EAAE,MAAM,GAA0B,GAAG,KAAK;AACpE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,CAAC;AAAA,IACC,WAAW,MAAM,OAAO,MAAM;AAAA,QAC1B;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,MAAM,MAAM;AAAA,IACZ,OAAO,MAAM,UAAU,MAAM,OAAO;AAAA,IACpC,MAAM,MAAM,WAAW,CAAC,MAAM,OAAO,QAAQ;AAAA,IAC7C,YAAY,MAAM,UAAU,MAAM,OAAO;AAAA,IACzC,YAAY;AAAA,IACZ,OAAO,GAAG,oBAAoB,EAAE,yBAAyB,CAAC,CAAC,MAAM,MAAM,4BAA4B,MAAM,QAAQ,GAAG,MAAM,KAAK;AAAA,GAChI;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,MAAM,MAAM;AAAA,IACZ,KAAK,MAAM;AAAA,IACX,OAAO,MAAM,SAAS,YAAY,MAAM,aAAa,MAAM,IAAI;AAAA,IAC/D,YAAY;AAAA,GACb;AAAA,SACE,WAAW,MAAM,IAAI,EAAE;AAAA,MAC1B,EARC,OAQQ;AAAA,MACT,CAAC,KAAK,MAAM,CAAC,MAAM,SAAS;AAAA,QAC1B,CAAC,WAAW,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,MACpD,EAFC,KAEM;AAAA,IACT,EAvBC;AAyBL;AAEA,IAAO,qBAAQ;","names":[],"file":"personChip.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/personChip/personChip.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/personChip/personChip.entry.less\";\nimport { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Avatar, type AvatarSize } from \"../avatar\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\n/** Up to two initials from a name: \"Anna Petrova\" → \"AP\", \"anna\" → \"A\". */\nexport function initialsOf(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  const first = (word: string | undefined): string => (word ? (Array.from(word)[0] ?? \"\") : \"\");\n  return (first(words[0]) + (words.length > 1 ? first(words[words.length - 1]) : \"\")).toUpperCase();\n}\n\n/**\n * A steady background colour for a person's avatar, derived from a seed (an id\n * or the name): the same person always gets the same colour, on the server too.\n */\nexport function avatarColor(seed: string): string {\n  let hash = 0;\n  for (const char of seed) hash = (hash * 31 + (char.codePointAt(0) ?? 0)) >>> 0;\n  return `hsl(${hash % 360} 42% 42%)`;\n}\n\nexport interface PersonChipProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  /** The person's name: shown beside the avatar, and the source of its initials. */\n  name: string;\n  /** Avatar image; initials on a colour without it or when it fails. */\n  src?: string;\n  /** Link to the person's card. */\n  href?: string;\n  /** The avatar only; the name becomes its tooltip and accessible name. */\n  compact?: boolean;\n  /** Avatar size: a preset or pixels. 24px by default. */\n  size?: AvatarSize | number;\n  /** Seed for the avatar colour (an id); the name by default. */\n  colorSeed?: string;\n  /** A fixed avatar colour instead of the derived one. */\n  color?: string;\n  /** A second line under the name: a role, a date. */\n  meta?: JSX.Element;\n  /** Test id of the root; `person-chip` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\n/** The name and the meta line. Meta is read here, where it renders: markup\n *  created and not rendered (a compact chip) would have no server node. */\nfunction PersonText(props: { name: string; meta: JSX.Element }): JSX.Element {\n  const meta = children(() => props.meta);\n  return (\n    <span class=\"smwb-person-chip__text\">\n      <span class=\"smwb-person-chip__name\">{props.name}</span>\n      <Show when={meta()}>\n        <span class=\"smwb-person-chip__meta\">{meta()}</span>\n      </Show>\n    </span>\n  );\n}\n\n/** A person: avatar and name, a link to their card when `href` is set. */\nexport function PersonChip(props: PersonChipProps): JSX.Element {\n  const merged = mergeProps({ size: 24 as AvatarSize | number }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"name\",\n    \"src\",\n    \"href\",\n    \"compact\",\n    \"size\",\n    \"colorSeed\",\n    \"color\",\n    \"meta\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  return (\n    <Dynamic\n      component={local.href ? \"a\" : \"span\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      title={local.compact ? local.name : undefined}\n      role={local.compact && !local.href ? \"img\" : undefined}\n      aria-label={local.compact ? local.name : undefined}\n      data-testid={local[\"data-testid\"] ?? \"person-chip\"}\n      class={cn(\"smwb-person-chip\", { \"smwb-person-chip_link\": !!local.href, \"smwb-person-chip_compact\": local.compact }, local.class)}\n    >\n      <Avatar\n        class=\"smwb-person-chip__avatar\"\n        size={local.size}\n        src={local.src}\n        color={local.color ?? avatarColor(local.colorSeed ?? local.name)}\n        aria-hidden=\"true\"\n      >\n        {initialsOf(local.name)}\n      </Avatar>\n      <Show when={!local.compact}>\n        <PersonText name={local.name} meta={local.meta} />\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport default PersonChip;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,YAAY,kBAAkB;AACjE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,cAA+B;AACxC,SAAS,iBAA2B;AAG7B,SAAS,WAAW,MAAsB;AAC/C,QAAM,QAAQ,KAAK,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO;AACrD,QAAM,QAAQ,CAAC,SAAsC,OAAQ,MAAM,KAAK,IAAI,EAAE,CAAC,KAAK,KAAM;AAC1F,UAAQ,MAAM,MAAM,CAAC,CAAC,KAAK,MAAM,SAAS,IAAI,MAAM,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,KAAK,YAAY;AAClG;AAMO,SAAS,YAAY,MAAsB;AAChD,MAAI,OAAO;AACX,aAAW,QAAQ,KAAM,QAAQ,OAAO,MAAM,KAAK,YAAY,CAAC,KAAK,OAAQ;AAC7E,SAAO,OAAO,OAAO,GAAG;AAC1B;AA0BA,SAAS,WAAW,OAAyD;AAC3E,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,SACE,CAAC,KAAK,MAAM,yBAAyB;AAAA,MACnC,CAAC,KAAK,MAAM,0BAA0B,MAAM,KAAK,EAAhD,KAAuD;AAAA,MACxD,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,QAClB,CAAC,KAAK,MAAM,0BAA0B,KAAK,EAAE,EAA5C,KAAmD;AAAA,MACtD,EAFC,KAEM;AAAA,IACT,EALC;AAOL;AAGO,SAAS,WAAW,OAAqC;AAC9D,QAAM,SAAS,WAAW,EAAE,MAAM,GAA0B,GAAG,KAAK;AACpE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,CAAC;AAAA,IACC,WAAW,MAAM,OAAO,MAAM;AAAA,QAC1B;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,MAAM,MAAM;AAAA,IACZ,OAAO,MAAM,UAAU,MAAM,OAAO;AAAA,IACpC,MAAM,MAAM,WAAW,CAAC,MAAM,OAAO,QAAQ;AAAA,IAC7C,YAAY,MAAM,UAAU,MAAM,OAAO;AAAA,IACzC,aAAa,MAAM,aAAa,KAAK;AAAA,IACrC,OAAO,GAAG,oBAAoB,EAAE,yBAAyB,CAAC,CAAC,MAAM,MAAM,4BAA4B,MAAM,QAAQ,GAAG,MAAM,KAAK;AAAA,GAChI;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,MAAM,MAAM;AAAA,IACZ,KAAK,MAAM;AAAA,IACX,OAAO,MAAM,SAAS,YAAY,MAAM,aAAa,MAAM,IAAI;AAAA,IAC/D,YAAY;AAAA,GACb;AAAA,SACE,WAAW,MAAM,IAAI,EAAE;AAAA,MAC1B,EARC,OAQQ;AAAA,MACT,CAAC,KAAK,MAAM,CAAC,MAAM,SAAS;AAAA,QAC1B,CAAC,WAAW,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,MACpD,EAFC,KAEM;AAAA,IACT,EAvBC;AAyBL;AAEA,IAAO,qBAAQ;","names":[],"file":"personChip.jsx"}

package/dist/source/components/dataDisplay/stat/stat.jsx

@@ -5,6 +5,7 @@ import { Dynamic } from "solid-js/web";
 import cn from "clsx";
 import { Icon } from "../../base/icon";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 function Stat(props) {
   const merged = mergeProps({ tone: "neutral", variant: "tile" }, props);
   const [local, rest] = splitProps(merged, [
@@ -17,7 +18,8 @@ function Stat(props) {
     "variant",
     "href",
     "children",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const label = children(() => local.label);
   const value = children(() => local.value);
@@ -29,7 +31,7 @@ function Stat(props) {
     {...rest}
     ref={mergeRefs(local.ref)}
     href={local.href}
-    data-testid="stat"
+    data-testid={local["data-testid"] ?? "stat"}
     class={cn(
       "smwb-stat",
       `smwb-stat_${local.variant}`,
@@ -55,12 +57,9 @@ function Stat(props) {
 }
 function StatGroup(props) {
   const [local, rest] = splitProps(props, ["class", "style", "minItemWidth", "children", "ref"]);
-  const style = () => {
-    if (local.minItemWidth === void 0) return local.style;
-    const width = typeof local.minItemWidth === "number" ? `${local.minItemWidth}px` : local.minItemWidth;
-    if (typeof local.style === "string") return `${local.style};--smwb-stat-min:${width}`;
-    return { ...local.style, "--smwb-stat-min": width };
-  };
+  const style = () => mergeStyle(local.style, {
+    "--smwb-stat-min": typeof local.minItemWidth === "number" ? `${local.minItemWidth}px` : local.minItemWidth
+  });
   return <div {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-stat-group", local.class)} style={style()}>
       {local.children}
     </div>;

package/dist/source/components/dataDisplay/stat/stat.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/stat/stat.entry.less\";\nimport { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type StatTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface StatProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** What the figure counts. */\n  label: JSX.Element;\n  /** The figure — a number, or a short value such as \"3 / 14\". */\n  value: JSX.Element;\n  /** A line under the value: a comparison, a period, a caveat. */\n  hint?: JSX.Element;\n  /** An icon beside the figure: a Material Symbols name or an element. */\n  icon?: string | JSX.Element;\n  /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */\n  tone?: StatTone;\n  /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */\n  variant?: \"tile\" | \"plain\";\n  /** Make the whole stat a link to what the figure is made of. */\n  href?: string;\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.\n * Children go under it — a meter, a sparkline, a note.\n */\nexport function Stat(props: ParentProps<StatProps>): JSX.Element {\n  const merged = mergeProps({ tone: \"neutral\" as StatTone, variant: \"tile\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"value\",\n    \"hint\",\n    \"icon\",\n    \"tone\",\n    \"variant\",\n    \"href\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const label = children(() => local.label);\n  const value = children(() => local.value);\n  const hint = children(() => local.hint);\n  const icon = children(() => local.icon);\n  const extra = children(() => local.children);\n\n  return (\n    <Dynamic\n      component={local.href ? \"a\" : \"div\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      data-testid=\"stat\"\n      class={cn(\n        \"smwb-stat\",\n        `smwb-stat_${local.variant}`,\n        `smwb-stat_tone-${local.tone}`,\n        { \"smwb-stat_link\": !!local.href, \"smwb-stat_with-icon\": !!icon() },\n        local.class\n      )}\n    >\n      <Show when={icon()}>\n        {(resolved) => (\n          <span class=\"smwb-stat__icon\" aria-hidden=\"true\">\n            {typeof resolved() === \"string\" ? <Icon name={resolved() as string} size={20} /> : resolved()}\n          </span>\n        )}\n      </Show>\n      <span class=\"smwb-stat__label\">{label()}</span>\n      <span class=\"smwb-stat__value\">{value()}</span>\n      <Show when={hint()}>\n        <span class=\"smwb-stat__hint\">{hint()}</span>\n      </Show>\n      <Show when={extra()}>\n        <div class=\"smwb-stat__extra\">{extra()}</div>\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport interface StatGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */\n  minItemWidth?: number | string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */\nexport function StatGroup(props: ParentProps<StatGroupProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"style\", \"minItemWidth\", \"children\", \"ref\"]);\n  const style = (): JSX.CSSProperties | string | undefined => {\n    if (local.minItemWidth === undefined) return local.style;\n    const width = typeof local.minItemWidth === \"number\" ? `${local.minItemWidth}px` : local.minItemWidth;\n    if (typeof local.style === \"string\") return `${local.style};--smwb-stat-min:${width}`;\n    return { ...local.style, \"--smwb-stat-min\": width };\n  };\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-stat-group\", local.class)} style={style()}>\n      {local.children}\n    </div>\n  );\n}\n\nexport default Stat;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AA0B7B,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,MAAM,WAAuB,SAAS,OAAgB,GAAG,KAAK;AAC1F,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AACxC,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AACxC,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,QAAQ,SAAS,MAAM,MAAM,QAAQ;AAE3C,SACE,CAAC;AAAA,IACC,WAAW,MAAM,OAAO,MAAM;AAAA,QAC1B;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,MAAM,MAAM;AAAA,IACZ,YAAY;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA,aAAa,MAAM,OAAO;AAAA,MAC1B,kBAAkB,MAAM,IAAI;AAAA,MAC5B,EAAE,kBAAkB,CAAC,CAAC,MAAM,MAAM,uBAAuB,CAAC,CAAC,KAAK,EAAE;AAAA,MAClE,MAAM;AAAA,IACR;AAAA,GACD;AAAA,MACC,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,SACjB,CAAC,aACA,CAAC,KAAK,MAAM,kBAAkB,YAAY,OAAO;AAAA,aAC9C,OAAO,SAAS,MAAM,WAAW,CAAC,KAAK,MAAM,SAAS,GAAa,MAAM,IAAI,KAAK,SAAS,EAAE;AAAA,UAChG,EAFC,MAGD;AAAA,MACJ,EANC,KAMM;AAAA,MACP,CAAC,KAAK,MAAM,oBAAoB,MAAM,EAAE,EAAvC,KAA8C;AAAA,MAC/C,CAAC,KAAK,MAAM,oBAAoB,MAAM,EAAE,EAAvC,KAA8C;AAAA,MAC/C,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,QAClB,CAAC,KAAK,MAAM,mBAAmB,KAAK,EAAE,EAArC,KAA4C;AAAA,MAC/C,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,MAAM,GAAG;AAAA,QACnB,CAAC,IAAI,MAAM,oBAAoB,MAAM,EAAE,EAAtC,IAA4C;AAAA,MAC/C,EAFC,KAEM;AAAA,IACT,EA7BC;AA+BL;AASO,SAAS,UAAU,OAAiD;AACzE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,gBAAgB,YAAY,KAAK,CAAC;AAC7F,QAAM,QAAQ,MAA8C;AAC1D,QAAI,MAAM,iBAAiB,OAAW,QAAO,MAAM;AACnD,UAAM,QAAQ,OAAO,MAAM,iBAAiB,WAAW,GAAG,MAAM,YAAY,OAAO,MAAM;AACzF,QAAI,OAAO,MAAM,UAAU,SAAU,QAAO,GAAG,MAAM,KAAK,oBAAoB,KAAK;AACnF,WAAO,EAAE,GAAG,MAAM,OAAO,mBAAmB,MAAM;AAAA,EACpD;AACA,SACE,CAAC,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,mBAAmB,MAAM,KAAK,GAAG,OAAO,MAAM,GAAG;AAAA,OAClG,MAAM,SAAS;AAAA,IAClB,EAFC;AAIL;AAEA,IAAO,eAAQ;","names":[],"file":"stat.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/stat/stat.entry.less\";\nimport { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport type StatTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface StatProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** What the figure counts. */\n  label: JSX.Element;\n  /** The figure — a number, or a short value such as \"3 / 14\". */\n  value: JSX.Element;\n  /** A line under the value: a comparison, a period, a caveat. */\n  hint?: JSX.Element;\n  /** An icon beside the figure: a Material Symbols name or an element. */\n  icon?: string | JSX.Element;\n  /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */\n  tone?: StatTone;\n  /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */\n  variant?: \"tile\" | \"plain\";\n  /** Make the whole stat a link to what the figure is made of. */\n  href?: string;\n  /** Test id of the root; `stat` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.\n * Children go under it — a meter, a sparkline, a note.\n */\nexport function Stat(props: ParentProps<StatProps>): JSX.Element {\n  const merged = mergeProps({ tone: \"neutral\" as StatTone, variant: \"tile\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"value\",\n    \"hint\",\n    \"icon\",\n    \"tone\",\n    \"variant\",\n    \"href\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const label = children(() => local.label);\n  const value = children(() => local.value);\n  const hint = children(() => local.hint);\n  const icon = children(() => local.icon);\n  const extra = children(() => local.children);\n\n  return (\n    <Dynamic\n      component={local.href ? \"a\" : \"div\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      data-testid={local[\"data-testid\"] ?? \"stat\"}\n      class={cn(\n        \"smwb-stat\",\n        `smwb-stat_${local.variant}`,\n        `smwb-stat_tone-${local.tone}`,\n        { \"smwb-stat_link\": !!local.href, \"smwb-stat_with-icon\": !!icon() },\n        local.class\n      )}\n    >\n      <Show when={icon()}>\n        {(resolved) => (\n          <span class=\"smwb-stat__icon\" aria-hidden=\"true\">\n            {typeof resolved() === \"string\" ? <Icon name={resolved() as string} size={20} /> : resolved()}\n          </span>\n        )}\n      </Show>\n      <span class=\"smwb-stat__label\">{label()}</span>\n      <span class=\"smwb-stat__value\">{value()}</span>\n      <Show when={hint()}>\n        <span class=\"smwb-stat__hint\">{hint()}</span>\n      </Show>\n      <Show when={extra()}>\n        <div class=\"smwb-stat__extra\">{extra()}</div>\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport interface StatGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */\n  minItemWidth?: number | string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */\nexport function StatGroup(props: ParentProps<StatGroupProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"style\", \"minItemWidth\", \"children\", \"ref\"]);\n  const style = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(local.style, {\n      \"--smwb-stat-min\": typeof local.minItemWidth === \"number\" ? `${local.minItemWidth}px` : local.minItemWidth,\n    });\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-stat-group\", local.class)} style={style()}>\n      {local.children}\n    </div>\n  );\n}\n\nexport default Stat;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AACpC,SAAS,kBAAkB;AA4BpB,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,MAAM,WAAuB,SAAS,OAAgB,GAAG,KAAK;AAC1F,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AACxC,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AACxC,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,QAAQ,SAAS,MAAM,MAAM,QAAQ;AAE3C,SACE,CAAC;AAAA,IACC,WAAW,MAAM,OAAO,MAAM;AAAA,QAC1B;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,MAAM,MAAM;AAAA,IACZ,aAAa,MAAM,aAAa,KAAK;AAAA,IACrC,OAAO;AAAA,MACL;AAAA,MACA,aAAa,MAAM,OAAO;AAAA,MAC1B,kBAAkB,MAAM,IAAI;AAAA,MAC5B,EAAE,kBAAkB,CAAC,CAAC,MAAM,MAAM,uBAAuB,CAAC,CAAC,KAAK,EAAE;AAAA,MAClE,MAAM;AAAA,IACR;AAAA,GACD;AAAA,MACC,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,SACjB,CAAC,aACA,CAAC,KAAK,MAAM,kBAAkB,YAAY,OAAO;AAAA,aAC9C,OAAO,SAAS,MAAM,WAAW,CAAC,KAAK,MAAM,SAAS,GAAa,MAAM,IAAI,KAAK,SAAS,EAAE;AAAA,UAChG,EAFC,MAGD;AAAA,MACJ,EANC,KAMM;AAAA,MACP,CAAC,KAAK,MAAM,oBAAoB,MAAM,EAAE,EAAvC,KAA8C;AAAA,MAC/C,CAAC,KAAK,MAAM,oBAAoB,MAAM,EAAE,EAAvC,KAA8C;AAAA,MAC/C,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,QAClB,CAAC,KAAK,MAAM,mBAAmB,KAAK,EAAE,EAArC,KAA4C;AAAA,MAC/C,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,MAAM,GAAG;AAAA,QACnB,CAAC,IAAI,MAAM,oBAAoB,MAAM,EAAE,EAAtC,IAA4C;AAAA,MAC/C,EAFC,KAEM;AAAA,IACT,EA7BC;AA+BL;AASO,SAAS,UAAU,OAAiD;AACzE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,gBAAgB,YAAY,KAAK,CAAC;AAC7F,QAAM,QAAQ,MACZ,WAAW,MAAM,OAAO;AAAA,IACtB,mBAAmB,OAAO,MAAM,iBAAiB,WAAW,GAAG,MAAM,YAAY,OAAO,MAAM;AAAA,EAChG,CAAC;AACH,SACE,CAAC,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,mBAAmB,MAAM,KAAK,GAAG,OAAO,MAAM,GAAG;AAAA,OAClG,MAAM,SAAS;AAAA,IAClB,EAFC;AAIL;AAEA,IAAO,eAAQ;","names":[],"file":"stat.jsx"}

package/dist/source/components/dataDisplay/table/table.jsx

@@ -4,6 +4,13 @@ import { Show, children, splitProps } from "solid-js";
 import cn from "clsx";
 import { TablePagination } from "./tablePagination/tablePagination";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import {
+  TableHeadContext,
+  TableLabelsContext,
+  TableRowContext,
+  TableSectionContext,
+  createColumnLabels
+} from "./tableColumns";
 function Table(props) {
   const [local, rest] = splitProps(props, [
     "class",
@@ -18,6 +25,7 @@ function Table(props) {
     "ref"
   ]);
   const caption = children(() => local.caption);
+  const labels = { stacked: () => !!local.stackBelow, labels: createColumnLabels() };
   return <div
     {...rest}
     ref={mergeRefs(local.ref)}
@@ -39,7 +47,16 @@ function Table(props) {
           <Show when={caption() != null}>
             <caption class="smwb-table__caption">{caption()}</caption>
           </Show>
-          {local.children}
+          {
+    /* A table inside a cell of another counts its own rows and cells. */
+  }
+          <TableLabelsContext.Provider value={labels}>
+            <TableHeadContext.Provider value={false}>
+              <TableSectionContext.Provider value={void 0}>
+                <TableRowContext.Provider value={void 0}>{local.children}</TableRowContext.Provider>
+              </TableSectionContext.Provider>
+            </TableHeadContext.Provider>
+          </TableLabelsContext.Provider>
         </table>
       </div>
       <Show when={local.paginationSettings}>

package/dist/source/components/dataDisplay/table/table.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/table/table.entry.less\";\nimport { type JSX, type ParentProps, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TablePagination, type TablePaginationProps } from \"./tablePagination/tablePagination\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  dense?: boolean;\n  isLoading?: boolean;\n  hovered?: boolean;\n  /** Pins the table header while the body scrolls. */\n  stickyHeader?: boolean;\n  /** Optional accessible caption rendered for screen readers. */\n  caption?: JSX.Element;\n  /**\n   * Show each row as a card — cells one under another, each with its column's\n   * label — while the table's container is narrower than this breakpoint:\n   * `sm` (420px), `md` (768px) or `lg` (1024px). A container query: the space\n   * the table has decides, not the window. Labels come from `TableCell label`.\n   */\n  stackBelow?: \"sm\" | \"md\" | \"lg\";\n  paginationSettings?: TablePaginationProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Table(props: ParentProps<TableProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"dense\",\n    \"hovered\",\n    \"children\",\n    \"paginationSettings\",\n    \"isLoading\",\n    \"stickyHeader\",\n    \"caption\",\n    \"stackBelow\",\n    \"ref\",\n  ]);\n\n  // Read the caption once: markup is created anew on every read, and during\n  // hydration the copy made for the <Show> test has no server DOM node.\n  const caption = children(() => local.caption);\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-table__wrapper\",\n        local.class,\n        { \"smwb-table__wrapper_loading\": local.isLoading },\n        local.stackBelow && `smwb-table__wrapper_stack-${local.stackBelow}`\n      )}\n    >\n      <div class={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!local.paginationSettings })}>\n        <table\n          class={cn(\"smwb-table\", {\n            \"smwb-dense\": local.dense,\n            \"smwb-hovered\": local.hovered,\n            \"smwb-table_sticky-header\": local.stickyHeader,\n          })}\n        >\n          <Show when={caption() != null}>\n            <caption class=\"smwb-table__caption\">{caption()}</caption>\n          </Show>\n          {local.children}\n        </table>\n      </div>\n      <Show when={local.paginationSettings}>\n        {(settings) => <TablePagination {...settings()} />}\n      </Show>\n    </div>\n  );\n}\n\nexport default Table;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,kBAAkB;AACvE,OAAO,QAAQ;AACf,SAAS,uBAAkD;AAC3D,SAAS,iBAA2B;AAqB7B,SAAS,MAAM,OAA6C;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,UAAU,SAAS,MAAM,MAAM,OAAO;AAE5C,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,EAAE,+BAA+B,MAAM,UAAU;AAAA,MACjD,MAAM,cAAc,6BAA6B,MAAM,UAAU;AAAA,IACnE;AAAA,GACD;AAAA,MACC,CAAC,IAAI,OAAO,GAAG,yBAAyB,EAAE,uBAAuB,CAAC,CAAC,MAAM,mBAAmB,CAAC,GAAG;AAAA,QAC9F,CAAC;AAAA,IACC,OAAO,GAAG,cAAc;AAAA,MACtB,cAAc,MAAM;AAAA,MACpB,gBAAgB,MAAM;AAAA,MACtB,4BAA4B,MAAM;AAAA,IACpC,CAAC;AAAA,GACF;AAAA,UACC,CAAC,KAAK,MAAM,QAAQ,KAAK,MAAM;AAAA,YAC7B,CAAC,QAAQ,MAAM,uBAAuB,QAAQ,EAAE,EAA/C,QAAyD;AAAA,UAC5D,EAFC,KAEM;AAAA,WACN,MAAM,SAAS;AAAA,QAClB,EAXC,MAWO;AAAA,MACV,EAbC,IAaK;AAAA,MACN,CAAC,KAAK,MAAM,MAAM,oBAAoB;AAAA,SACnC,CAAC,aAAa,CAAC,oBAAoB,SAAS,GAAG,GAAG;AAAA,MACrD,EAFC,KAEM;AAAA,IACT,EA3BC;AA6BL;AAEA,IAAO,gBAAQ;","names":[],"file":"table.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/table/table.entry.less\";\nimport { type JSX, type ParentProps, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TablePagination, type TablePaginationProps } from \"./tablePagination/tablePagination\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport {\n  TableHeadContext,\n  TableLabelsContext,\n  TableRowContext,\n  TableSectionContext,\n  createColumnLabels,\n} from \"./tableColumns\";\n\nexport interface TableProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  dense?: boolean;\n  isLoading?: boolean;\n  hovered?: boolean;\n  /** Pins the table header while the body scrolls. */\n  stickyHeader?: boolean;\n  /** Optional accessible caption rendered for screen readers. */\n  caption?: JSX.Element;\n  /**\n   * Show each row as a card — cells one under another, each with its column's\n   * label — while the table's container is narrower than this breakpoint:\n   * `sm` (420px), `md` (768px) or `lg` (1024px). A container query: the space\n   * the table has decides, not the window.\n   *\n   * A cell's label is its `TableCell label`, or else the label of the head cell\n   * of its column: the head cell's `label`, or the text of its content. Columns\n   * count as in HTML: by position in the row, with `colSpan`, after the columns\n   * that `rowSpan` cells of the rows above take in the same head or body. A cell\n   * spanning several columns takes no label from the head and fills the card's\n   * width, and a head cell spanning several columns labels none of them. With\n   * several head rows, the lowest head cell over a column names it. The cells\n   * and rows count as they are drawn, the ones a component renders included.\n   */\n  stackBelow?: \"sm\" | \"md\" | \"lg\";\n  paginationSettings?: TablePaginationProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Table(props: ParentProps<TableProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"dense\",\n    \"hovered\",\n    \"children\",\n    \"paginationSettings\",\n    \"isLoading\",\n    \"stickyHeader\",\n    \"caption\",\n    \"stackBelow\",\n    \"ref\",\n  ]);\n\n  // Read the caption once: markup is created anew on every read, and during\n  // hydration the copy made for the <Show> test has no server DOM node.\n  const caption = children(() => local.caption);\n\n  // The head cells' labels, for the body cells of their columns.\n  const labels = { stacked: () => !!local.stackBelow, labels: createColumnLabels() };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-table__wrapper\",\n        local.class,\n        { \"smwb-table__wrapper_loading\": local.isLoading },\n        local.stackBelow && `smwb-table__wrapper_stack-${local.stackBelow}`\n      )}\n    >\n      <div class={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!local.paginationSettings })}>\n        <table\n          class={cn(\"smwb-table\", {\n            \"smwb-dense\": local.dense,\n            \"smwb-hovered\": local.hovered,\n            \"smwb-table_sticky-header\": local.stickyHeader,\n          })}\n        >\n          <Show when={caption() != null}>\n            <caption class=\"smwb-table__caption\">{caption()}</caption>\n          </Show>\n          {/* A table inside a cell of another counts its own rows and cells. */}\n          <TableLabelsContext.Provider value={labels}>\n            <TableHeadContext.Provider value={false}>\n              <TableSectionContext.Provider value={undefined}>\n                <TableRowContext.Provider value={undefined}>{local.children}</TableRowContext.Provider>\n              </TableSectionContext.Provider>\n            </TableHeadContext.Provider>\n          </TableLabelsContext.Provider>\n        </table>\n      </div>\n      <Show when={local.paginationSettings}>\n        {(settings) => <TablePagination {...settings()} />}\n      </Show>\n    </div>\n  );\n}\n\nexport default Table;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,kBAAkB;AACvE,OAAO,QAAQ;AACf,SAAS,uBAAkD;AAC3D,SAAS,iBAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA8BA,SAAS,MAAM,OAA6C;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,UAAU,SAAS,MAAM,MAAM,OAAO;AAG5C,QAAM,SAAS,EAAE,SAAS,MAAM,CAAC,CAAC,MAAM,YAAY,QAAQ,mBAAmB,EAAE;AAEjF,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,EAAE,+BAA+B,MAAM,UAAU;AAAA,MACjD,MAAM,cAAc,6BAA6B,MAAM,UAAU;AAAA,IACnE;AAAA,GACD;AAAA,MACC,CAAC,IAAI,OAAO,GAAG,yBAAyB,EAAE,uBAAuB,CAAC,CAAC,MAAM,mBAAmB,CAAC,GAAG;AAAA,QAC9F,CAAC;AAAA,IACC,OAAO,GAAG,cAAc;AAAA,MACtB,cAAc,MAAM;AAAA,MACpB,gBAAgB,MAAM;AAAA,MACtB,4BAA4B,MAAM;AAAA,IACpC,CAAC;AAAA,GACF;AAAA,UACC,CAAC,KAAK,MAAM,QAAQ,KAAK,MAAM;AAAA,YAC7B,CAAC,QAAQ,MAAM,uBAAuB,QAAQ,EAAE,EAA/C,QAAyD;AAAA,UAC5D,EAFC,KAEM;AAAA;AAAA;AAAA,GACgE;AAAA,UACvE,CAAC,mBAAmB,SAAS,OAAO,QAAQ;AAAA,YAC1C,CAAC,iBAAiB,SAAS,OAAO,OAAO;AAAA,cACvC,CAAC,oBAAoB,SAAS,OAAO,QAAW;AAAA,gBAC9C,CAAC,gBAAgB,SAAS,OAAO,SAAY,MAAM,SAAS,EAA3D,gBAAgB,SAAsE;AAAA,cACzF,EAFC,oBAAoB,SAEU;AAAA,YACjC,EAJC,iBAAiB,SAIU;AAAA,UAC9B,EANC,mBAAmB,SAMU;AAAA,QAChC,EAlBC,MAkBO;AAAA,MACV,EApBC,IAoBK;AAAA,MACN,CAAC,KAAK,MAAM,MAAM,oBAAoB;AAAA,SACnC,CAAC,aAAa,CAAC,oBAAoB,SAAS,GAAG,GAAG;AAAA,MACrD,EAFC,KAEM;AAAA,IACT,EAlCC;AAoCL;AAEA,IAAO,gBAAQ;","names":[],"file":"table.jsx"}

package/dist/source/components/dataDisplay/table/tableBody.jsx

@@ -1,10 +1,15 @@
 import { splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { ChildElements, TableSectionContext, createSectionRows, useTableLabels } from "./tableColumns";
 function TableBody(props) {
   const [local, rest] = splitProps(props, ["children", "class", "ref"]);
+  const table = useTableLabels();
+  const rows = createSectionRows(() => !!table?.stacked());
   return <tbody {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-table__body", local.class)}>
-      {local.children}
+      <TableSectionContext.Provider value={rows}>
+        <ChildElements onItems={rows.setItems}>{local.children}</ChildElements>
+      </TableSectionContext.Provider>
     </tbody>;
 }
 var tableBody_default = TableBody;

package/dist/source/components/dataDisplay/table/tableBody.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/table/tableBody.tsx"],"sourcesContent":["import { type JSX, type ParentProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableBodyProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {\n  ref?: Ref<HTMLTableSectionElement>;\n}\n\nexport function TableBody(props: ParentProps<TableBodyProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"ref\"]);\n  return (\n    <tbody {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-table__body\", local.class)}>\n      {local.children}\n    </tbody>\n  );\n}\n\nexport default TableBody;\n"],"mappings":"AAAA,SAAqC,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAM7B,SAAS,UAAU,OAAiD;AACzE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,KAAK,CAAC;AACpE,SACE,CAAC,UAAU,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,oBAAoB,MAAM,KAAK,GAAG;AAAA,OACrF,MAAM,SAAS;AAAA,IAClB,EAFC;AAIL;AAEA,IAAO,oBAAQ;","names":[],"file":"tableBody.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/table/tableBody.tsx"],"sourcesContent":["import { type JSX, type ParentProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { ChildElements, TableSectionContext, createSectionRows, useTableLabels } from \"./tableColumns\";\n\nexport interface TableBodyProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {\n  ref?: Ref<HTMLTableSectionElement>;\n}\n\nexport function TableBody(props: ParentProps<TableBodyProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"ref\"]);\n  // The body's rows, so that each cell finds its column after the columns that\n  // `rowSpan` cells above it take.\n  const table = useTableLabels();\n  const rows = createSectionRows(() => !!table?.stacked());\n  return (\n    <tbody {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-table__body\", local.class)}>\n      <TableSectionContext.Provider value={rows}>\n        <ChildElements onItems={rows.setItems}>{local.children}</ChildElements>\n      </TableSectionContext.Provider>\n    </tbody>\n  );\n}\n\nexport default TableBody;\n"],"mappings":"AAAA,SAAqC,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,eAAe,qBAAqB,mBAAmB,sBAAsB;AAM/E,SAAS,UAAU,OAAiD;AACzE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,KAAK,CAAC;AAGpE,QAAM,QAAQ,eAAe;AAC7B,QAAM,OAAO,kBAAkB,MAAM,CAAC,CAAC,OAAO,QAAQ,CAAC;AACvD,SACE,CAAC,UAAU,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,oBAAoB,MAAM,KAAK,GAAG;AAAA,MACtF,CAAC,oBAAoB,SAAS,OAAO,MAAM;AAAA,QACzC,CAAC,cAAc,SAAS,KAAK,WAAW,MAAM,SAAS,EAAtD,cAAsE;AAAA,MACzE,EAFC,oBAAoB,SAEU;AAAA,IACjC,EAJC;AAML;AAEA,IAAO,oBAAQ;","names":[],"file":"tableBody.jsx"}

package/dist/source/components/dataDisplay/table/tableCell.jsx

@@ -1,15 +1,24 @@
-import { mergeProps, splitProps } from "solid-js";
+import { createSignal, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { NO_PLACE, cellRowSpan, cellSpan, useInTableHead, useTableLabels, useTableRow } from "./tableColumns";
 function TableCell(props) {
   const merged = mergeProps({ cellAlign: "left" }, props);
-  const [local, rest] = splitProps(merged, ["children", "cellAlign", "class", "label", "ref"]);
+  const [local, rest] = splitProps(merged, ["children", "cellAlign", "class", "label", "data-label", "ref"]);
+  const table = useTableLabels();
+  const inHead = useInTableHead();
+  const [element, setElement] = createSignal();
+  const span = () => cellSpan(rest.colSpan ?? rest.colspan);
+  const row = useTableRow();
+  const place = row ? row.registerCell(element, span, () => cellRowSpan(rest.rowSpan ?? rest.rowspan)) : NO_PLACE;
+  const headLabel = () => table?.stacked() && !inHead && local.label === void 0 && local["data-label"] === void 0 && span() === 1 ? table.labels.get(place.column()) : void 0;
+  const dataLabel = () => local.label === false ? local["data-label"] : local.label ?? local["data-label"] ?? headLabel();
   return <td
     {...rest}
-    ref={mergeRefs(local.ref)}
+    ref={mergeRefs(local.ref, setElement)}
     class={cn("smwb-table__cell", local.class)}
     align={local.cellAlign || "left"}
-    data-label={local.label}
+    data-label={dataLabel()}
   >
       {local.children}
     </td>;

package/dist/source/components/dataDisplay/table/tableCell.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** The column's name, shown next to the value when the table stacks rows as cards (`Table stackBelow`). */\n  label?: string;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableCell(props: ParentProps<TableCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"children\", \"cellAlign\", \"class\", \"label\", \"ref\"]);\n  return (\n    <td\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-table__cell\", local.class)}\n      align={local.cellAlign || \"left\"}\n      data-label={local.label}\n    >\n      {local.children}\n    </td>\n  );\n}\n\nexport default TableCell;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAS7B,SAAS,UAAU,OAAiD;AACzE,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,YAAY,aAAa,SAAS,SAAS,KAAK,CAAC;AAC3F,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,oBAAoB,MAAM,KAAK;AAAA,IACzC,OAAO,MAAM,aAAa;AAAA,IAC1B,YAAY,MAAM;AAAA,GACnB;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EARC;AAUL;AAEA,IAAO,oBAAQ;","names":[],"file":"tableCell.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { NO_PLACE, cellRowSpan, cellSpan, useInTableHead, useTableLabels, useTableRow } from \"./tableColumns\";\n\nexport interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /**\n   * The column's name, shown next to the value when the table stacks rows as\n   * cards (`Table stackBelow`). Without it, the cell takes the label of its\n   * column's head cell; `false` keeps the cell unlabelled, so it fills the\n   * card's width (an action, a sub-row). A caller's own `data-label` counts as a\n   * given label too.\n   */\n  label?: string | false;\n  /** The cell's label written by hand, as the attribute the stacked layout shows; `label` replaces it. */\n  \"data-label\"?: string | undefined;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableCell(props: ParentProps<TableCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"children\", \"cellAlign\", \"class\", \"label\", \"data-label\", \"ref\"]);\n\n  const table = useTableLabels();\n  const inHead = useInTableHead();\n  const [element, setElement] = createSignal<HTMLTableCellElement>();\n  const span = (): number => cellSpan(rest.colSpan ?? rest.colspan);\n  const row = useTableRow();\n  const place = row ? row.registerCell(element, span, () => cellRowSpan(rest.rowSpan ?? rest.rowspan)) : NO_PLACE;\n\n  // Only a body cell of a stacked table, with no label of its own and one column\n  // wide, looks its label up in the head.\n  const headLabel = (): string | undefined =>\n    table?.stacked() && !inHead && local.label === undefined && local[\"data-label\"] === undefined && span() === 1\n      ? table.labels.get(place.column())\n      : undefined;\n  const dataLabel = (): string | undefined =>\n    local.label === false ? local[\"data-label\"] : (local.label ?? local[\"data-label\"] ?? headLabel());\n\n  return (\n    <td\n      {...rest}\n      ref={mergeRefs(local.ref, setElement)}\n      class={cn(\"smwb-table__cell\", local.class)}\n      align={local.cellAlign || \"left\"}\n      data-label={dataLabel()}\n    >\n      {local.children}\n    </td>\n  );\n}\n\nexport default TableCell;\n"],"mappings":"AAAA,SAAqC,cAAc,YAAY,kBAAkB;AACjF,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,UAAU,aAAa,UAAU,gBAAgB,gBAAgB,mBAAmB;AAiBtF,SAAS,UAAU,OAAiD;AACzE,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,YAAY,aAAa,SAAS,SAAS,cAAc,KAAK,CAAC;AAEzG,QAAM,QAAQ,eAAe;AAC7B,QAAM,SAAS,eAAe;AAC9B,QAAM,CAAC,SAAS,UAAU,IAAI,aAAmC;AACjE,QAAM,OAAO,MAAc,SAAS,KAAK,WAAW,KAAK,OAAO;AAChE,QAAM,MAAM,YAAY;AACxB,QAAM,QAAQ,MAAM,IAAI,aAAa,SAAS,MAAM,MAAM,YAAY,KAAK,WAAW,KAAK,OAAO,CAAC,IAAI;AAIvG,QAAM,YAAY,MAChB,OAAO,QAAQ,KAAK,CAAC,UAAU,MAAM,UAAU,UAAa,MAAM,YAAY,MAAM,UAAa,KAAK,MAAM,IACxG,MAAM,OAAO,IAAI,MAAM,OAAO,CAAC,IAC/B;AACN,QAAM,YAAY,MAChB,MAAM,UAAU,QAAQ,MAAM,YAAY,IAAK,MAAM,SAAS,MAAM,YAAY,KAAK,UAAU;AAEjG,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,KAAK,UAAU;AAAA,IACpC,OAAO,GAAG,oBAAoB,MAAM,KAAK;AAAA,IACzC,OAAO,MAAM,aAAa;AAAA,IAC1B,YAAY,UAAU;AAAA,GACvB;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EARC;AAUL;AAEA,IAAO,oBAAQ;","names":[],"file":"tableCell.jsx"}

package/dist/source/components/dataDisplay/table/tableColumns.jsx

@@ -0,0 +1,311 @@
+import {
+  children,
+  createComputed,
+  createContext,
+  createMemo,
+  createSignal,
+  onCleanup,
+  untrack,
+  useContext
+} from "solid-js";
+import { isServer } from "solid-js/web";
+import { htmlText } from "./tableHtmlText";
+function createColumnLabels() {
+  const columns = /* @__PURE__ */ new Map();
+  const slot = (column) => {
+    let signal = columns.get(column);
+    if (!signal) {
+      signal = createSignal([]);
+      columns.set(column, signal);
+    }
+    return signal;
+  };
+  return {
+    get: (column) => {
+      let lowest;
+      for (const entry of slot(column)[0]()) if (!lowest || entry.row > lowest.row) lowest = entry;
+      return lowest?.label;
+    },
+    set: (column, row, owner, label) => {
+      const [read, write] = slot(column);
+      const list = untrack(read);
+      const prev = list.find((entry) => entry.row === row);
+      if (prev?.owner === owner && prev.label === label) return;
+      write([...list.filter((entry) => entry.row !== row), { row, owner, label }]);
+    },
+    remove: (column, row, owner) => {
+      const [read, write] = slot(column);
+      const list = untrack(read);
+      if (list.find((entry) => entry.row === row)?.owner !== owner) return;
+      write(list.filter((entry) => entry.row !== row));
+    }
+  };
+}
+const TableLabelsContext = createContext();
+const TableHeadContext = createContext(false);
+const NOWHERE = { column: -1, row: -1 };
+const NO_PLACE = { column: () => -1, row: () => -1 };
+const TableSectionContext = createContext();
+const TableRowContext = createContext();
+const cellSpan = (colSpan) => Math.max(1, Math.floor(Number(colSpan)) || 1);
+const cellRowSpan = (rowSpan) => {
+  if (rowSpan === void 0 || rowSpan === "") return 1;
+  const rows = Math.floor(Number(rowSpan));
+  return rows === 0 ? Infinity : Math.max(1, rows) || 1;
+};
+const isRow = (element) => element.tagName === "TR";
+const NO_CARRY = [];
+function sameCarry(a, b) {
+  const length = Math.max(a.length, b.length);
+  for (let i = 0; i < length; i++) if ((a[i] ?? 0) !== (b[i] ?? 0)) return false;
+  return true;
+}
+function layOutRow(tr, record, carry) {
+  const cells = /* @__PURE__ */ new Map();
+  for (const cell of record?.cells ?? []) {
+    const at = cell.element();
+    if (at && !cells.has(at)) cells.set(at, cell);
+  }
+  const taken = carry.slice();
+  const columns = record ? /* @__PURE__ */ new Map() : void 0;
+  let column = 0;
+  for (const item of record?.items() ?? Array.from(tr.children)) {
+    while ((taken[column] ?? 0) > 0) column++;
+    const cell = cells.get(item);
+    const td = item;
+    const span = cell ? cell.span() : cellSpan(td.colSpan);
+    const rows = cell ? cell.rowSpan() : cellRowSpan(td.rowSpan);
+    for (let i = 0; i < span; i++) taken[column + i] = rows;
+    columns?.set(item, column);
+    column += span;
+  }
+  if (record && columns) {
+    for (const cell of record.cells) {
+      let at;
+      for (let element = cell.element(); element && at === void 0; element = element.parentElement ?? void 0) {
+        at = columns.get(element);
+      }
+      cell.moveTo(at ?? -1);
+    }
+  }
+  const next = taken.map((rows) => Math.max(0, rows - 1));
+  while (next.length && !next[next.length - 1]) next.pop();
+  return { carry, next };
+}
+function createLayout() {
+  let last = [];
+  let changed = false;
+  const done = /* @__PURE__ */ new WeakMap();
+  const owners = /* @__PURE__ */ new WeakMap();
+  return {
+    /** The row's cells or their spans changed: it is laid out again in the next pass. */
+    invalidate: (record) => {
+      const tr = record.element();
+      if (!tr) return;
+      owners.set(tr, record);
+      if (done.delete(tr)) changed = true;
+    },
+    reset: () => {
+      last = [];
+    },
+    run: (trs) => {
+      let start = 0;
+      while (start < trs.length && trs[start] === last[start] && (!changed || done.has(trs[start]))) start++;
+      changed = false;
+      if (start === trs.length && start === last.length) return;
+      let carry = start ? done.get(trs[start - 1])?.next ?? NO_CARRY : NO_CARRY;
+      for (let row = start; row < trs.length; row++) {
+        const tr = trs[row];
+        let laid = done.get(tr);
+        if (!laid || !sameCarry(laid.carry, carry)) {
+          laid = layOutRow(tr, owners.get(tr), carry);
+          done.set(tr, laid);
+        }
+        carry = laid.next;
+      }
+      if (start < last.length) {
+        const drawn = new Set(trs);
+        for (let row = start; row < last.length; row++) {
+          const tr = last[row];
+          if (drawn.has(tr)) continue;
+          done.delete(tr);
+          owners.get(tr)?.cells.forEach((cell) => cell.moveTo(-1));
+        }
+      }
+      last = trs;
+    }
+  };
+}
+function advance(state, cell, changes) {
+  const { index, taken } = state;
+  let column = state.column;
+  while ((taken[column] ?? 0) > index) column++;
+  const span = cell.span();
+  const until = index + cell.rowSpan();
+  for (let i = 0; i < span; i++) taken[column + i] = until;
+  state.column = column + span;
+  state.placed++;
+  state.changes = changes;
+  return { column, row: index };
+}
+function placeCreated(rows, placer, record, cell) {
+  const { state, changes } = placer;
+  if (state && record.cells[record.cells.length - 1] === cell) {
+    if (state.row === record && changes === state.changes + 1 && record.cells.length === state.placed + 1) {
+      return advance(state, cell, changes);
+    }
+    const index2 = rows.length - 1;
+    if (rows[index2] === record && record.cells.length === 1 && rows[state.index] === state.row && changes === state.changes + (index2 - state.index) + 1) {
+      state.row = record;
+      state.index = index2;
+      state.placed = 0;
+      state.column = 0;
+      return advance(state, cell, changes);
+    }
+  }
+  const index = rows.indexOf(record);
+  if (index < 0) return NOWHERE;
+  const next = { row: record, index, placed: 0, taken: [], column: 0, changes };
+  let place = NOWHERE;
+  for (let row = 0; row <= index; row++) {
+    next.index = row;
+    next.placed = 0;
+    next.column = 0;
+    for (const each of rows[row].cells) {
+      const at = advance(next, each, changes);
+      if (each === cell && row === index) place = at;
+    }
+  }
+  next.row = record;
+  placer.state = next;
+  return place;
+}
+function createSectionRows(stacked) {
+  const [items, setItems] = createSignal();
+  const [changed, setChanged] = createSignal(0);
+  const rows = [];
+  const trs = createMemo(() => stacked() ? items()?.filter(isRow) : void 0);
+  const laidOut = createMemo(() => !!trs());
+  const layout = createLayout();
+  if (!isServer) {
+    createComputed(() => {
+      changed();
+      const list = trs();
+      if (list) untrack(() => layout.run(list));
+      else layout.reset();
+    });
+  }
+  return {
+    rows,
+    placer: { changes: 0, state: void 0 },
+    setItems,
+    laidOut,
+    rowOf: (tr) => tr ? trs()?.indexOf(tr) ?? -1 : -1,
+    invalidate: (record) => {
+      layout.invalidate(record);
+      setChanged((count) => count + 1);
+    }
+  };
+}
+function createRowColumns(stacked, section, element) {
+  const [items, setItems] = createSignal();
+  const record = { element, cells: [], items };
+  const placer = section ? section.placer : { changes: 0, state: void 0 };
+  const ownRows = [record];
+  if (section) {
+    section.rows.push(record);
+    placer.changes++;
+    onCleanup(() => {
+      section.rows.splice(section.rows.indexOf(record) >>> 0, 1);
+      placer.changes++;
+    });
+  }
+  const laidOut = section ? section.laidOut : createMemo(() => stacked() && items() !== void 0 && !!element());
+  const rowOf = section ? section.rowOf : (tr) => tr && tr === element() ? 0 : -1;
+  if (!isServer) {
+    createComputed(() => {
+      items();
+      for (const cell of record.cells) {
+        cell.element();
+        cell.span();
+        cell.rowSpan();
+      }
+      if (section) section.invalidate(record);
+      else {
+        const tr = laidOut() && element();
+        if (tr) untrack(() => layOutRow(tr, record, NO_CARRY));
+      }
+    });
+  }
+  return {
+    setItems,
+    registerCell: (cellElement, span, rowSpan) => {
+      const [column, setColumn] = createSignal(-1);
+      const cell = { element: cellElement, span, rowSpan, moveTo: setColumn };
+      record.cells.push(cell);
+      placer.changes++;
+      onCleanup(() => {
+        record.cells.splice(record.cells.indexOf(cell) >>> 0, 1);
+        placer.changes++;
+      });
+      let created = NOWHERE;
+      untrack(() => {
+        if (stacked() && !laidOut()) {
+          created = placeCreated(section ? section.rows : ownRows, placer, record, cell);
+          setColumn(created.column);
+        }
+      });
+      const placed = () => stacked() ? column() : -1;
+      return {
+        column: placed,
+        row: () => {
+          if (placed() < 0) return -1;
+          return laidOut() ? rowOf(element()) : created.row;
+        }
+      };
+    }
+  };
+}
+function ChildElements(props) {
+  const resolved = children(() => props.children);
+  if (!isServer) {
+    createComputed(() => props.onItems(resolved.toArray().filter((node) => node instanceof Element)));
+  }
+  return <>{resolved()}</>;
+}
+function textOf(content) {
+  const collect = (value) => {
+    if (typeof value === "string" || typeof value === "number") return String(value);
+    if (Array.isArray(value)) return value.map(collect).join("");
+    if (value && typeof value === "object") {
+      if ("textContent" in value) return value.textContent ?? "";
+      if (isServer && "t" in value && typeof value.t === "string") return htmlText(value.t);
+    }
+    return "";
+  };
+  return collect(content).replace(/\s+/g, " ").trim();
+}
+const useTableLabels = () => useContext(TableLabelsContext);
+const useTableSection = () => useContext(TableSectionContext);
+const useTableRow = () => useContext(TableRowContext);
+const useInTableHead = () => useContext(TableHeadContext);
+export {
+  ChildElements,
+  NOWHERE,
+  NO_PLACE,
+  TableHeadContext,
+  TableLabelsContext,
+  TableRowContext,
+  TableSectionContext,
+  cellRowSpan,
+  cellSpan,
+  createColumnLabels,
+  createRowColumns,
+  createSectionRows,
+  textOf,
+  useInTableHead,
+  useTableLabels,
+  useTableRow,
+  useTableSection
+};
+//# sourceMappingURL=tableColumns.jsx.map

package/dist/source/components/dataDisplay/table/tableColumns.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/table/tableColumns.tsx"],"sourcesContent":["import {\n  type Accessor,\n  type JSX,\n  type Signal,\n  children,\n  createComputed,\n  createContext,\n  createMemo,\n  createSignal,\n  onCleanup,\n  untrack,\n  useContext,\n} from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport { htmlText } from \"./tableHtmlText\";\n\ninterface ColumnLabel {\n  /** The head row of the cell that gives the label. */\n  row: number;\n  owner: symbol;\n  label: string | undefined;\n}\n\n/**\n * The column labels of a stacked table (`Table stackBelow`): its head cells\n * publish them by column position, and the body cells of each column read them.\n * A column may have a head cell in several head rows; the lowest row's wins,\n * whatever order the cells wrote in, so each label is kept by its head row.\n * Head cells write as they are created, so the body cells created after them —\n * the body follows the head in the markup — find the labels at once: on the\n * server too, so the server markup has them, and the client makes the same.\n */\nexport interface ColumnLabels {\n  get: (column: number) => string | undefined;\n  set: (column: number, row: number, owner: symbol, label: string | undefined) => void;\n  /** Drops the label of the column's head cell in `row`, unless another head cell has taken that place since. */\n  remove: (column: number, row: number, owner: symbol) => void;\n}\n\nexport function createColumnLabels(): ColumnLabels {\n  const columns = new Map<number, Signal<ColumnLabel[]>>();\n  const slot = (column: number): Signal<ColumnLabel[]> => {\n    let signal = columns.get(column);\n    if (!signal) {\n      signal = createSignal<ColumnLabel[]>([]);\n      columns.set(column, signal);\n    }\n    return signal;\n  };\n  return {\n    get: (column) => {\n      let lowest: ColumnLabel | undefined;\n      for (const entry of slot(column)[0]()) if (!lowest || entry.row > lowest.row) lowest = entry;\n      return lowest?.label;\n    },\n    set: (column, row, owner, label) => {\n      const [read, write] = slot(column);\n      const list = untrack(read);\n      const prev = list.find((entry) => entry.row === row);\n      if (prev?.owner === owner && prev.label === label) return;\n      write([...list.filter((entry) => entry.row !== row), { row, owner, label }]);\n    },\n    remove: (column, row, owner) => {\n      const [read, write] = slot(column);\n      const list = untrack(read);\n      if (list.find((entry) => entry.row === row)?.owner !== owner) return;\n      write(list.filter((entry) => entry.row !== row));\n    },\n  };\n}\n\nexport interface TableLabelsContextValue {\n  /** Whether the table stacks rows (`stackBelow`). */\n  stacked: Accessor<boolean>;\n  labels: ColumnLabels;\n}\n\nexport const TableLabelsContext = createContext<TableLabelsContextValue>();\n\n/** Whether the cells around are in the table's head. */\nexport const TableHeadContext = createContext(false);\n\n/** Where a cell sits: the column it starts at and its row within the head or body, both from 0. */\nexport interface CellPlace {\n  column: number;\n  row: number;\n}\n\n/** The place of a cell that has none (yet): outside a stacked table, or not drawn. */\nexport const NOWHERE: CellPlace = { column: -1, row: -1 };\n\n/**\n * A cell's place, read by part: a body cell reads only its column, so a row\n * added or removed above it, which moves it down or up, doesn't run its label\n * again.\n */\nexport interface CellPlaceAccessor {\n  column: Accessor<number>;\n  row: Accessor<number>;\n}\n\n/** The place of a cell outside a row. */\nexport const NO_PLACE: CellPlaceAccessor = { column: () => -1, row: () => -1 };\n\ninterface CellRecord {\n  element: Accessor<Element | undefined>;\n  span: Accessor<number>;\n  rowSpan: Accessor<number>;\n  /** Moves the cell to a column; staying in the same one notifies no one. */\n  moveTo: (column: number) => void;\n}\n\ninterface RowRecord {\n  element: Accessor<Element | undefined>;\n  /** The row's cells, in the order they were created. */\n  cells: CellRecord[];\n  /** The row's elements, once its children have resolved (browser only). */\n  items: Accessor<Element[] | undefined>;\n}\n\n/**\n * Where creation-order placement stands: after the last cell placed, all the\n * rows up to and including that cell's row, with the columns their cells take.\n * Rows and cells are created in markup order, so each new cell continues from\n * there in O(its row) instead of placing every row above again.\n */\ninterface CreationState {\n  row: RowRecord;\n  /** The row's index among the section's rows. */\n  index: number;\n  /** How many of the row's cells are placed. */\n  placed: number;\n  /** The row each column is taken until (exclusive). */\n  taken: number[];\n  /** The first column after the row's cells placed so far. */\n  column: number;\n  /** `changes` when it was last updated. */\n  changes: number;\n}\n\ninterface CreationPlacer {\n  /** Counts every row and cell added or removed. */\n  changes: number;\n  state: CreationState | undefined;\n}\n\nexport interface TableSectionContextValue {\n  /** The section's rows, in the order they were created. */\n  rows: RowRecord[];\n  placer: CreationPlacer;\n  setItems: (items: Element[]) => void;\n  /** Whether the cells' places come from the section's elements, known once its children have resolved (browser only). */\n  laidOut: Accessor<boolean>;\n  /** The index of a row element among the section's rows; -1 if it isn't one. */\n  rowOf: (tr: Element | undefined) => number;\n  /** Lays the row out again, from the section's next pass on: its cells or their spans changed. */\n  invalidate: (record: RowRecord) => void;\n}\n\n/** The head or body around the rows. */\nexport const TableSectionContext = createContext<TableSectionContextValue>();\n\nexport interface TableRowContextValue {\n  /**\n   * Each cell registers on setup with its element (set once it renders), its\n   * `colSpan` and its `rowSpan`, and gets back its place: the column it starts\n   * at, counted as in HTML, and its row in the head or body. The place follows\n   * the cell when cells or rows are added, removed or reordered.\n   */\n  registerCell: (\n    element: Accessor<Element | undefined>,\n    span: Accessor<number>,\n    rowSpan: Accessor<number>\n  ) => CellPlaceAccessor;\n}\n\nexport const TableRowContext = createContext<TableRowContextValue>();\n\n/** How many columns a cell spans, from its `colSpan`. */\nexport const cellSpan = (colSpan: number | string | undefined): number => Math.max(1, Math.floor(Number(colSpan)) || 1);\n\n/** How many rows a cell spans, from its `rowSpan`: `0` spans the rest of its head or body, as in HTML. */\nexport const cellRowSpan = (rowSpan: number | string | undefined): number => {\n  if (rowSpan === undefined || rowSpan === \"\") return 1;\n  const rows = Math.floor(Number(rowSpan));\n  return rows === 0 ? Infinity : Math.max(1, rows) || 1;\n};\n\nconst isRow = (element: Element): boolean => element.tagName === \"TR\";\n\n/**\n * The columns that cells of the rows above still take at a row: for each\n * column, in how many rows from this one on it is free again (0 or missing:\n * free here). It doesn't depend on the row's index, so a row keeps its\n * columns when rows are added or removed above it and what reaches it from\n * above stays the same.\n */\ntype Carry = readonly number[];\n\nconst NO_CARRY: Carry = [];\n\nfunction sameCarry(a: Carry, b: Carry): boolean {\n  const length = Math.max(a.length, b.length);\n  for (let i = 0; i < length; i++) if ((a[i] ?? 0) !== (b[i] ?? 0)) return false;\n  return true;\n}\n\n/** A row as last laid out: what reached it from above, and what it passes down. */\ninterface RowLayout {\n  carry: Carry;\n  next: Carry;\n}\n\n/**\n * Places a row's cells as HTML does: each starts at the first column from the\n * left not taken by an earlier cell of the row or by a cell of a row above\n * that spans down into it. A registered row gives its resolved cells, with a\n * registered cell's own spans, and moves its cells there; any other row gives\n * its elements and their attributes. A registered cell not drawn in the row\n * goes nowhere.\n */\nfunction layOutRow(tr: Element, record: RowRecord | undefined, carry: Carry): RowLayout {\n  const cells = new Map<Element, CellRecord>();\n  for (const cell of record?.cells ?? []) {\n    const at = cell.element();\n    if (at && !cells.has(at)) cells.set(at, cell);\n  }\n  // The rows each column stays taken from this one on: 1 for this row only.\n  const taken = carry.slice();\n  const columns = record ? new Map<Element, number>() : undefined;\n  let column = 0;\n  for (const item of record?.items() ?? Array.from(tr.children)) {\n    while ((taken[column] ?? 0) > 0) column++;\n    const cell = cells.get(item);\n    const td = item as HTMLTableCellElement;\n    const span = cell ? cell.span() : cellSpan(td.colSpan);\n    const rows = cell ? cell.rowSpan() : cellRowSpan(td.rowSpan);\n    for (let i = 0; i < span; i++) taken[column + i] = rows;\n    columns?.set(item, column);\n    column += span;\n  }\n  if (record && columns) {\n    for (const cell of record.cells) {\n      // The cell's element, or the drawn element around it.\n      let at: number | undefined;\n      for (let element = cell.element(); element && at === undefined; element = element.parentElement ?? undefined) {\n        at = columns.get(element);\n      }\n      cell.moveTo(at ?? -1);\n    }\n  }\n  const next = taken.map((rows) => Math.max(0, rows - 1));\n  while (next.length && !next[next.length - 1]) next.pop();\n  return { carry, next };\n}\n\n/**\n * Lays out a head's or body's rows (its `<tr>` elements, in order) after a\n * change, from the first row that differs from the last pass, or that changed\n * itself. A row whose carry from above is the one it had keeps its columns, so\n * a row added, removed or moved costs its own cells plus a check of the rows\n * after it, not a pass over every cell. A registered row no longer drawn has\n * its cells moved nowhere.\n */\nfunction createLayout() {\n  let last: Element[] = [];\n  // Whether a row drawn in the last pass changed since.\n  let changed = false;\n  const done = new WeakMap<Element, RowLayout>();\n  const owners = new WeakMap<Element, RowRecord>();\n  return {\n    /** The row's cells or their spans changed: it is laid out again in the next pass. */\n    invalidate: (record: RowRecord) => {\n      const tr = record.element();\n      if (!tr) return;\n      owners.set(tr, record);\n      if (done.delete(tr)) changed = true;\n    },\n    reset: () => {\n      last = [];\n    },\n    run: (trs: Element[]) => {\n      let start = 0;\n      while (start < trs.length && trs[start] === last[start] && (!changed || done.has(trs[start]!))) start++;\n      changed = false;\n      if (start === trs.length && start === last.length) return;\n      let carry = start ? (done.get(trs[start - 1]!)?.next ?? NO_CARRY) : NO_CARRY;\n      for (let row = start; row < trs.length; row++) {\n        const tr = trs[row]!;\n        let laid = done.get(tr);\n        if (!laid || !sameCarry(laid.carry, carry)) {\n          laid = layOutRow(tr, owners.get(tr), carry);\n          done.set(tr, laid);\n        }\n        carry = laid.next;\n      }\n      if (start < last.length) {\n        const drawn = new Set(trs);\n        for (let row = start; row < last.length; row++) {\n          const tr = last[row]!;\n          if (drawn.has(tr)) continue;\n          done.delete(tr);\n          owners.get(tr)?.cells.forEach((cell) => cell.moveTo(-1));\n        }\n      }\n      last = trs;\n    },\n  };\n}\n\n/** Takes the next column free in the state's row for the cell, and returns its place. */\nfunction advance(state: CreationState, cell: CellRecord, changes: number): CellPlace {\n  const { index, taken } = state;\n  let column = state.column;\n  while ((taken[column] ?? 0) > index) column++;\n  const span = cell.span();\n  const until = index + cell.rowSpan();\n  for (let i = 0; i < span; i++) taken[column + i] = until;\n  state.column = column + span;\n  state.placed++;\n  state.changes = changes;\n  return { column, row: index };\n}\n\n/**\n * A cell's place from the order rows and cells were created in. The cell just\n * created continues from where the last one was placed: in its row, or in a\n * row created after it. Anything else (a cell added to an earlier row, a row or\n * cell removed) places the rows up to the cell's again.\n */\nfunction placeCreated(rows: RowRecord[], placer: CreationPlacer, record: RowRecord, cell: CellRecord): CellPlace {\n  const { state, changes } = placer;\n  if (state && record.cells[record.cells.length - 1] === cell) {\n    // Only this cell was added since, to the row last placed in.\n    if (state.row === record && changes === state.changes + 1 && record.cells.length === state.placed + 1) {\n      return advance(state, cell, changes);\n    }\n    // Only rows were added since, the last of them this cell's, and then this cell.\n    const index = rows.length - 1;\n    if (\n      rows[index] === record &&\n      record.cells.length === 1 &&\n      rows[state.index] === state.row &&\n      changes === state.changes + (index - state.index) + 1\n    ) {\n      state.row = record;\n      state.index = index;\n      state.placed = 0;\n      state.column = 0;\n      return advance(state, cell, changes);\n    }\n  }\n  const index = rows.indexOf(record);\n  if (index < 0) return NOWHERE;\n  const next: CreationState = { row: record, index, placed: 0, taken: [], column: 0, changes };\n  let place = NOWHERE;\n  for (let row = 0; row <= index; row++) {\n    next.index = row;\n    next.placed = 0;\n    next.column = 0;\n    for (const each of rows[row]!.cells) {\n      const at = advance(next, each, changes);\n      if (each === cell && row === index) place = at;\n    }\n  }\n  next.row = record;\n  placer.state = next;\n  return place;\n}\n\n/**\n * A head's or body's row registry. In the browser the cells' places come from\n * its elements, known once its children have resolved. Before that, and on the\n * server, they come from the order rows and cells were created in, which is the\n * markup order, so the first client pass gives the server's places.\n */\nexport function createSectionRows(stacked: Accessor<boolean>): TableSectionContextValue {\n  const [items, setItems] = createSignal<Element[]>();\n  const [changed, setChanged] = createSignal(0);\n  const rows: RowRecord[] = [];\n  const trs = createMemo(() => (stacked() ? items()?.filter(isRow) : undefined));\n  const laidOut = createMemo(() => !!trs());\n  const layout = createLayout();\n  if (!isServer) {\n    createComputed(() => {\n      changed();\n      const list = trs();\n      if (list) untrack(() => layout.run(list));\n      else layout.reset();\n    });\n  }\n  return {\n    rows,\n    placer: { changes: 0, state: undefined },\n    setItems,\n    laidOut,\n    rowOf: (tr) => (tr ? (trs()?.indexOf(tr) ?? -1) : -1),\n    invalidate: (record) => {\n      layout.invalidate(record);\n      setChanged((count) => count + 1);\n    },\n  };\n}\n\n/**\n * A row's cell registry, inside a head or body or on its own. See\n * `createSectionRows` for how the places are found.\n */\nexport function createRowColumns(\n  stacked: Accessor<boolean>,\n  section: TableSectionContextValue | undefined,\n  element: Accessor<Element | undefined>\n): TableRowContextValue & { setItems: (items: Element[]) => void } {\n  const [items, setItems] = createSignal<Element[]>();\n  const record: RowRecord = { element, cells: [], items };\n  const placer: CreationPlacer = section ? section.placer : { changes: 0, state: undefined };\n  const ownRows = [record];\n  if (section) {\n    section.rows.push(record);\n    placer.changes++;\n    onCleanup(() => {\n      section.rows.splice(section.rows.indexOf(record) >>> 0, 1);\n      placer.changes++;\n    });\n  }\n  // A row on its own, outside a head or body, is laid out alone.\n  const laidOut = section ? section.laidOut : createMemo(() => stacked() && items() !== undefined && !!element());\n  const rowOf = section ? section.rowOf : (tr: Element | undefined) => (tr && tr === element() ? 0 : -1);\n  if (!isServer) {\n    // The row's cells, their elements and spans: when they change, the row is\n    // laid out again.\n    createComputed(() => {\n      items();\n      for (const cell of record.cells) {\n        cell.element();\n        cell.span();\n        cell.rowSpan();\n      }\n      if (section) section.invalidate(record);\n      else {\n        const tr = laidOut() && element();\n        if (tr) untrack(() => layOutRow(tr, record, NO_CARRY));\n      }\n    });\n  }\n\n  return {\n    setItems,\n    registerCell: (cellElement, span, rowSpan) => {\n      const [column, setColumn] = createSignal(-1);\n      const cell: CellRecord = { element: cellElement, span, rowSpan, moveTo: setColumn };\n      record.cells.push(cell);\n      placer.changes++;\n      onCleanup(() => {\n        record.cells.splice(record.cells.indexOf(cell) >>> 0, 1);\n        placer.changes++;\n      });\n      // Before the elements are known (the first client pass, and the server):\n      // the order of creation, which later cells do not change. After that the\n      // section's layout moves the cell, and its row is its row's index.\n      let created = NOWHERE;\n      untrack(() => {\n        if (stacked() && !laidOut()) {\n          created = placeCreated(section ? section.rows : ownRows, placer, record, cell);\n          setColumn(created.column);\n        }\n      });\n      const placed = (): number => (stacked() ? column() : -1);\n      return {\n        column: placed,\n        row: () => {\n          if (placed() < 0) return -1;\n          return laidOut() ? rowOf(element()) : created.row;\n        },\n      };\n    },\n  };\n}\n\n/**\n * Children resolved once, with their elements reported in order whenever they\n * change: a row's cells, or a head's or body's rows. It renders inside the\n * context provider of its row or section, so the children it creates find it.\n */\nexport function ChildElements(props: { children?: JSX.Element; onItems: (items: Element[]) => void }): JSX.Element {\n  const resolved = children(() => props.children);\n  if (!isServer) {\n    createComputed(() => props.onItems(resolved.toArray().filter((node) => node instanceof Element)));\n  }\n  return <>{resolved()}</>;\n}\n\n/**\n * The text of a header's resolved content, with white space collapsed: strings\n * and numbers, and the text of elements. On the server elements are markup\n * strings, read as the browser reads the same markup: tags and comments dropped,\n * character references decoded. A component that makes its text itself gives\n * the text it renders; name a column by `TableHeadCell label` where that is not\n * its name.\n */\nexport function textOf(content: unknown): string {\n  const collect = (value: unknown): string => {\n    if (typeof value === \"string\" || typeof value === \"number\") return String(value);\n    if (Array.isArray(value)) return value.map(collect).join(\"\");\n    if (value && typeof value === \"object\") {\n      if (\"textContent\" in value) return (value as Node).textContent ?? \"\";\n      // An SSR node: `{ t: \"<b>Name</b>\" }`.\n      if (isServer && \"t\" in value && typeof value.t === \"string\") return htmlText(value.t);\n    }\n    return \"\";\n  };\n  return collect(content).replace(/\\s+/g, \" \").trim();\n}\n\nexport const useTableLabels = (): TableLabelsContextValue | undefined => useContext(TableLabelsContext);\nexport const useTableSection = (): TableSectionContextValue | undefined => useContext(TableSectionContext);\nexport const useTableRow = (): TableRowContextValue | undefined => useContext(TableRowContext);\nexport const useInTableHead = (): boolean => useContext(TableHeadContext);\n"],"mappings":"AAAA;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAyBlB,SAAS,qBAAmC;AACjD,QAAM,UAAU,oBAAI,IAAmC;AACvD,QAAM,OAAO,CAAC,WAA0C;AACtD,QAAI,SAAS,QAAQ,IAAI,MAAM;AAC/B,QAAI,CAAC,QAAQ;AACX,eAAS,aAA4B,CAAC,CAAC;AACvC,cAAQ,IAAI,QAAQ,MAAM;AAAA,IAC5B;AACA,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,KAAK,CAAC,WAAW;AACf,UAAI;AACJ,iBAAW,SAAS,KAAK,MAAM,EAAE,CAAC,EAAE,EAAG,KAAI,CAAC,UAAU,MAAM,MAAM,OAAO,IAAK,UAAS;AACvF,aAAO,QAAQ;AAAA,IACjB;AAAA,IACA,KAAK,CAAC,QAAQ,KAAK,OAAO,UAAU;AAClC,YAAM,CAAC,MAAM,KAAK,IAAI,KAAK,MAAM;AACjC,YAAM,OAAO,QAAQ,IAAI;AACzB,YAAM,OAAO,KAAK,KAAK,CAAC,UAAU,MAAM,QAAQ,GAAG;AACnD,UAAI,MAAM,UAAU,SAAS,KAAK,UAAU,MAAO;AACnD,YAAM,CAAC,GAAG,KAAK,OAAO,CAAC,UAAU,MAAM,QAAQ,GAAG,GAAG,EAAE,KAAK,OAAO,MAAM,CAAC,CAAC;AAAA,IAC7E;AAAA,IACA,QAAQ,CAAC,QAAQ,KAAK,UAAU;AAC9B,YAAM,CAAC,MAAM,KAAK,IAAI,KAAK,MAAM;AACjC,YAAM,OAAO,QAAQ,IAAI;AACzB,UAAI,KAAK,KAAK,CAAC,UAAU,MAAM,QAAQ,GAAG,GAAG,UAAU,MAAO;AAC9D,YAAM,KAAK,OAAO,CAAC,UAAU,MAAM,QAAQ,GAAG,CAAC;AAAA,IACjD;AAAA,EACF;AACF;AAQO,MAAM,qBAAqB,cAAuC;AAGlE,MAAM,mBAAmB,cAAc,KAAK;AAS5C,MAAM,UAAqB,EAAE,QAAQ,IAAI,KAAK,GAAG;AAajD,MAAM,WAA8B,EAAE,QAAQ,MAAM,IAAI,KAAK,MAAM,GAAG;AA0DtE,MAAM,sBAAsB,cAAwC;AAgBpE,MAAM,kBAAkB,cAAoC;AAG5D,MAAM,WAAW,CAAC,YAAiD,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,OAAO,CAAC,KAAK,CAAC;AAG/G,MAAM,cAAc,CAAC,YAAiD;AAC3E,MAAI,YAAY,UAAa,YAAY,GAAI,QAAO;AACpD,QAAM,OAAO,KAAK,MAAM,OAAO,OAAO,CAAC;AACvC,SAAO,SAAS,IAAI,WAAW,KAAK,IAAI,GAAG,IAAI,KAAK;AACtD;AAEA,MAAM,QAAQ,CAAC,YAA8B,QAAQ,YAAY;AAWjE,MAAM,WAAkB,CAAC;AAEzB,SAAS,UAAU,GAAU,GAAmB;AAC9C,QAAM,SAAS,KAAK,IAAI,EAAE,QAAQ,EAAE,MAAM;AAC1C,WAAS,IAAI,GAAG,IAAI,QAAQ,IAAK,MAAK,EAAE,CAAC,KAAK,QAAQ,EAAE,CAAC,KAAK,GAAI,QAAO;AACzE,SAAO;AACT;AAgBA,SAAS,UAAU,IAAa,QAA+B,OAAyB;AACtF,QAAM,QAAQ,oBAAI,IAAyB;AAC3C,aAAW,QAAQ,QAAQ,SAAS,CAAC,GAAG;AACtC,UAAM,KAAK,KAAK,QAAQ;AACxB,QAAI,MAAM,CAAC,MAAM,IAAI,EAAE,EAAG,OAAM,IAAI,IAAI,IAAI;AAAA,EAC9C;AAEA,QAAM,QAAQ,MAAM,MAAM;AAC1B,QAAM,UAAU,SAAS,oBAAI,IAAqB,IAAI;AACtD,MAAI,SAAS;AACb,aAAW,QAAQ,QAAQ,MAAM,KAAK,MAAM,KAAK,GAAG,QAAQ,GAAG;AAC7D,YAAQ,MAAM,MAAM,KAAK,KAAK,EAAG;AACjC,UAAM,OAAO,MAAM,IAAI,IAAI;AAC3B,UAAM,KAAK;AACX,UAAM,OAAO,OAAO,KAAK,KAAK,IAAI,SAAS,GAAG,OAAO;AACrD,UAAM,OAAO,OAAO,KAAK,QAAQ,IAAI,YAAY,GAAG,OAAO;AAC3D,aAAS,IAAI,GAAG,IAAI,MAAM,IAAK,OAAM,SAAS,CAAC,IAAI;AACnD,aAAS,IAAI,MAAM,MAAM;AACzB,cAAU;AAAA,EACZ;AACA,MAAI,UAAU,SAAS;AACrB,eAAW,QAAQ,OAAO,OAAO;AAE/B,UAAI;AACJ,eAAS,UAAU,KAAK,QAAQ,GAAG,WAAW,OAAO,QAAW,UAAU,QAAQ,iBAAiB,QAAW;AAC5G,aAAK,QAAQ,IAAI,OAAO;AAAA,MAC1B;AACA,WAAK,OAAO,MAAM,EAAE;AAAA,IACtB;AAAA,EACF;AACA,QAAM,OAAO,MAAM,IAAI,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AACtD,SAAO,KAAK,UAAU,CAAC,KAAK,KAAK,SAAS,CAAC,EAAG,MAAK,IAAI;AACvD,SAAO,EAAE,OAAO,KAAK;AACvB;AAUA,SAAS,eAAe;AACtB,MAAI,OAAkB,CAAC;AAEvB,MAAI,UAAU;AACd,QAAM,OAAO,oBAAI,QAA4B;AAC7C,QAAM,SAAS,oBAAI,QAA4B;AAC/C,SAAO;AAAA;AAAA,IAEL,YAAY,CAAC,WAAsB;AACjC,YAAM,KAAK,OAAO,QAAQ;AAC1B,UAAI,CAAC,GAAI;AACT,aAAO,IAAI,IAAI,MAAM;AACrB,UAAI,KAAK,OAAO,EAAE,EAAG,WAAU;AAAA,IACjC;AAAA,IACA,OAAO,MAAM;AACX,aAAO,CAAC;AAAA,IACV;AAAA,IACA,KAAK,CAAC,QAAmB;AACvB,UAAI,QAAQ;AACZ,aAAO,QAAQ,IAAI,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,MAAM,CAAC,WAAW,KAAK,IAAI,IAAI,KAAK,CAAE,GAAI;AAChG,gBAAU;AACV,UAAI,UAAU,IAAI,UAAU,UAAU,KAAK,OAAQ;AACnD,UAAI,QAAQ,QAAS,KAAK,IAAI,IAAI,QAAQ,CAAC,CAAE,GAAG,QAAQ,WAAY;AACpE,eAAS,MAAM,OAAO,MAAM,IAAI,QAAQ,OAAO;AAC7C,cAAM,KAAK,IAAI,GAAG;AAClB,YAAI,OAAO,KAAK,IAAI,EAAE;AACtB,YAAI,CAAC,QAAQ,CAAC,UAAU,KAAK,OAAO,KAAK,GAAG;AAC1C,iBAAO,UAAU,IAAI,OAAO,IAAI,EAAE,GAAG,KAAK;AAC1C,eAAK,IAAI,IAAI,IAAI;AAAA,QACnB;AACA,gBAAQ,KAAK;AAAA,MACf;AACA,UAAI,QAAQ,KAAK,QAAQ;AACvB,cAAM,QAAQ,IAAI,IAAI,GAAG;AACzB,iBAAS,MAAM,OAAO,MAAM,KAAK,QAAQ,OAAO;AAC9C,gBAAM,KAAK,KAAK,GAAG;AACnB,cAAI,MAAM,IAAI,EAAE,EAAG;AACnB,eAAK,OAAO,EAAE;AACd,iBAAO,IAAI,EAAE,GAAG,MAAM,QAAQ,CAAC,SAAS,KAAK,OAAO,EAAE,CAAC;AAAA,QACzD;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAGA,SAAS,QAAQ,OAAsB,MAAkB,SAA4B;AACnF,QAAM,EAAE,OAAO,MAAM,IAAI;AACzB,MAAI,SAAS,MAAM;AACnB,UAAQ,MAAM,MAAM,KAAK,KAAK,MAAO;AACrC,QAAM,OAAO,KAAK,KAAK;AACvB,QAAM,QAAQ,QAAQ,KAAK,QAAQ;AACnC,WAAS,IAAI,GAAG,IAAI,MAAM,IAAK,OAAM,SAAS,CAAC,IAAI;AACnD,QAAM,SAAS,SAAS;AACxB,QAAM;AACN,QAAM,UAAU;AAChB,SAAO,EAAE,QAAQ,KAAK,MAAM;AAC9B;AAQA,SAAS,aAAa,MAAmB,QAAwB,QAAmB,MAA6B;AAC/G,QAAM,EAAE,OAAO,QAAQ,IAAI;AAC3B,MAAI,SAAS,OAAO,MAAM,OAAO,MAAM,SAAS,CAAC,MAAM,MAAM;AAE3D,QAAI,MAAM,QAAQ,UAAU,YAAY,MAAM,UAAU,KAAK,OAAO,MAAM,WAAW,MAAM,SAAS,GAAG;AACrG,aAAO,QAAQ,OAAO,MAAM,OAAO;AAAA,IACrC;AAEA,UAAMA,SAAQ,KAAK,SAAS;AAC5B,QACE,KAAKA,MAAK,MAAM,UAChB,OAAO,MAAM,WAAW,KACxB,KAAK,MAAM,KAAK,MAAM,MAAM,OAC5B,YAAY,MAAM,WAAWA,SAAQ,MAAM,SAAS,GACpD;AACA,YAAM,MAAM;AACZ,YAAM,QAAQA;AACd,YAAM,SAAS;AACf,YAAM,SAAS;AACf,aAAO,QAAQ,OAAO,MAAM,OAAO;AAAA,IACrC;AAAA,EACF;AACA,QAAM,QAAQ,KAAK,QAAQ,MAAM;AACjC,MAAI,QAAQ,EAAG,QAAO;AACtB,QAAM,OAAsB,EAAE,KAAK,QAAQ,OAAO,QAAQ,GAAG,OAAO,CAAC,GAAG,QAAQ,GAAG,QAAQ;AAC3F,MAAI,QAAQ;AACZ,WAAS,MAAM,GAAG,OAAO,OAAO,OAAO;AACrC,SAAK,QAAQ;AACb,SAAK,SAAS;AACd,SAAK,SAAS;AACd,eAAW,QAAQ,KAAK,GAAG,EAAG,OAAO;AACnC,YAAM,KAAK,QAAQ,MAAM,MAAM,OAAO;AACtC,UAAI,SAAS,QAAQ,QAAQ,MAAO,SAAQ;AAAA,IAC9C;AAAA,EACF;AACA,OAAK,MAAM;AACX,SAAO,QAAQ;AACf,SAAO;AACT;AAQO,SAAS,kBAAkB,SAAsD;AACtF,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAwB;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,CAAC;AAC5C,QAAM,OAAoB,CAAC;AAC3B,QAAM,MAAM,WAAW,MAAO,QAAQ,IAAI,MAAM,GAAG,OAAO,KAAK,IAAI,MAAU;AAC7E,QAAM,UAAU,WAAW,MAAM,CAAC,CAAC,IAAI,CAAC;AACxC,QAAM,SAAS,aAAa;AAC5B,MAAI,CAAC,UAAU;AACb,mBAAe,MAAM;AACnB,cAAQ;AACR,YAAM,OAAO,IAAI;AACjB,UAAI,KAAM,SAAQ,MAAM,OAAO,IAAI,IAAI,CAAC;AAAA,UACnC,QAAO,MAAM;AAAA,IACpB,CAAC;AAAA,EACH;AACA,SAAO;AAAA,IACL;AAAA,IACA,QAAQ,EAAE,SAAS,GAAG,OAAO,OAAU;AAAA,IACvC;AAAA,IACA;AAAA,IACA,OAAO,CAAC,OAAQ,KAAM,IAAI,GAAG,QAAQ,EAAE,KAAK,KAAM;AAAA,IAClD,YAAY,CAAC,WAAW;AACtB,aAAO,WAAW,MAAM;AACxB,iBAAW,CAAC,UAAU,QAAQ,CAAC;AAAA,IACjC;AAAA,EACF;AACF;AAMO,SAAS,iBACd,SACA,SACA,SACiE;AACjE,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAwB;AAClD,QAAM,SAAoB,EAAE,SAAS,OAAO,CAAC,GAAG,MAAM;AACtD,QAAM,SAAyB,UAAU,QAAQ,SAAS,EAAE,SAAS,GAAG,OAAO,OAAU;AACzF,QAAM,UAAU,CAAC,MAAM;AACvB,MAAI,SAAS;AACX,YAAQ,KAAK,KAAK,MAAM;AACxB,WAAO;AACP,cAAU,MAAM;AACd,cAAQ,KAAK,OAAO,QAAQ,KAAK,QAAQ,MAAM,MAAM,GAAG,CAAC;AACzD,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,QAAM,UAAU,UAAU,QAAQ,UAAU,WAAW,MAAM,QAAQ,KAAK,MAAM,MAAM,UAAa,CAAC,CAAC,QAAQ,CAAC;AAC9G,QAAM,QAAQ,UAAU,QAAQ,QAAQ,CAAC,OAA6B,MAAM,OAAO,QAAQ,IAAI,IAAI;AACnG,MAAI,CAAC,UAAU;AAGb,mBAAe,MAAM;AACnB,YAAM;AACN,iBAAW,QAAQ,OAAO,OAAO;AAC/B,aAAK,QAAQ;AACb,aAAK,KAAK;AACV,aAAK,QAAQ;AAAA,MACf;AACA,UAAI,QAAS,SAAQ,WAAW,MAAM;AAAA,WACjC;AACH,cAAM,KAAK,QAAQ,KAAK,QAAQ;AAChC,YAAI,GAAI,SAAQ,MAAM,UAAU,IAAI,QAAQ,QAAQ,CAAC;AAAA,MACvD;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA,cAAc,CAAC,aAAa,MAAM,YAAY;AAC5C,YAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,EAAE;AAC3C,YAAM,OAAmB,EAAE,SAAS,aAAa,MAAM,SAAS,QAAQ,UAAU;AAClF,aAAO,MAAM,KAAK,IAAI;AACtB,aAAO;AACP,gBAAU,MAAM;AACd,eAAO,MAAM,OAAO,OAAO,MAAM,QAAQ,IAAI,MAAM,GAAG,CAAC;AACvD,eAAO;AAAA,MACT,CAAC;AAID,UAAI,UAAU;AACd,cAAQ,MAAM;AACZ,YAAI,QAAQ,KAAK,CAAC,QAAQ,GAAG;AAC3B,oBAAU,aAAa,UAAU,QAAQ,OAAO,SAAS,QAAQ,QAAQ,IAAI;AAC7E,oBAAU,QAAQ,MAAM;AAAA,QAC1B;AAAA,MACF,CAAC;AACD,YAAM,SAAS,MAAe,QAAQ,IAAI,OAAO,IAAI;AACrD,aAAO;AAAA,QACL,QAAQ;AAAA,QACR,KAAK,MAAM;AACT,cAAI,OAAO,IAAI,EAAG,QAAO;AACzB,iBAAO,QAAQ,IAAI,MAAM,QAAQ,CAAC,IAAI,QAAQ;AAAA,QAChD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAOO,SAAS,cAAc,OAAqF;AACjH,QAAM,WAAW,SAAS,MAAM,MAAM,QAAQ;AAC9C,MAAI,CAAC,UAAU;AACb,mBAAe,MAAM,MAAM,QAAQ,SAAS,QAAQ,EAAE,OAAO,CAAC,SAAS,gBAAgB,OAAO,CAAC,CAAC;AAAA,EAClG;AACA,SAAO,GAAG,SAAS,EAAE;AACvB;AAUO,SAAS,OAAO,SAA0B;AAC/C,QAAM,UAAU,CAAC,UAA2B;AAC1C,QAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAAU,QAAO,OAAO,KAAK;AAC/E,QAAI,MAAM,QAAQ,KAAK,EAAG,QAAO,MAAM,IAAI,OAAO,EAAE,KAAK,EAAE;AAC3D,QAAI,SAAS,OAAO,UAAU,UAAU;AACtC,UAAI,iBAAiB,MAAO,QAAQ,MAAe,eAAe;AAElE,UAAI,YAAY,OAAO,SAAS,OAAO,MAAM,MAAM,SAAU,QAAO,SAAS,MAAM,CAAC;AAAA,IACtF;AACA,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,OAAO,EAAE,QAAQ,QAAQ,GAAG,EAAE,KAAK;AACpD;AAEO,MAAM,iBAAiB,MAA2C,WAAW,kBAAkB;AAC/F,MAAM,kBAAkB,MAA4C,WAAW,mBAAmB;AAClG,MAAM,cAAc,MAAwC,WAAW,eAAe;AACtF,MAAM,iBAAiB,MAAe,WAAW,gBAAgB;","names":["index"],"file":"tableColumns.jsx"}