@smwb/ui-solid 0.13.0 → 0.14.0

package/dist/source/components/dataDisplay/list/listItem.jsx

@@ -1,7 +1,8 @@
-import { splitProps } from "solid-js";
+import { Show, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 import { callHandler } from "../../../primitives/callHandler";
+import { resolveLinkRel, resolveLinkTarget } from "../../../utils/linkAttrs";
 function ListItem(props) {
   const [local] = splitProps(props, [
     "class",
@@ -12,12 +13,23 @@ function ListItem(props) {
     "divider",
     "startAdornment",
     "endAdornment",
+    "href",
+    "target",
+    "rel",
     "onClick",
     "ref"
   ]);
-  const interactive = () => !!local.onClick && !local.disabled;
+  const interactive = () => !!local.onClick && !local.disabled && !local.href;
+  const linkTarget = () => resolveLinkTarget(local.target);
+  let linkEl;
+  const content = () => <>
+      <span class="smwb-list__item__start">{local.startAdornment}</span>
+      <span class="smwb-list__item__main">{local.children}</span>
+    </>;
   const onClick = (event) => {
-    if (!local.disabled) callHandler(local.onClick, event);
+    if (local.disabled) return;
+    if (local.href && !linkEl?.contains(event.target)) return;
+    callHandler(local.onClick, event);
   };
   const onKeyDown = (event) => {
     if (interactive() && (event.key === "Enter" || event.key === " ")) {
@@ -30,20 +42,38 @@ function ListItem(props) {
     role="listitem"
     tabindex={interactive() ? 0 : void 0}
     aria-disabled={local.disabled || void 0}
-    aria-selected={local.selected || void 0}
+    aria-selected={!local.href && local.selected || void 0}
     onClick={onClick}
     onKeyDown={onKeyDown}
     class={cn("smwb-list__item", local.class, {
       "smwb-disabled": local.disabled,
       "smwb-selected": local.selected,
+      "smwb-list__item_link": !!local.href,
       "smwb-list__item_dense": local.dense,
       "smwb-list__item_divider": local.divider
     })}
     data-testid="list-item"
   >
-      <span class="smwb-list__item__start">{local.startAdornment}</span>
-      <span class="smwb-list__item__main">{local.children}</span>
-      <span class="smwb-list__item__end">{local.endAdornment}</span>
+      <Show
+    when={local.href}
+    fallback={<>
+            {content()}
+            <span class="smwb-list__item__end">{local.endAdornment}</span>
+          </>}
+  >
+        <a
+    ref={linkEl}
+    class="smwb-list__item__link"
+    data-testid="list-item-link"
+    aria-current={local.selected ? "page" : void 0}
+    href={local.disabled ? void 0 : local.href}
+    target={linkTarget()}
+    rel={resolveLinkRel(local.rel, linkTarget())}
+  >
+          {content()}
+        </a>
+        <span class="smwb-list__item__end">{local.endAdornment}</span>
+      </Show>
     </li>;
 }
 var listItem_default = ListItem;

package/dist/source/components/dataDisplay/list/listItem.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import { type JSX, type ParentProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  class?: string;\n  selected?: boolean;\n  /** Compact row. */\n  dense?: boolean;\n  /** Render a bottom divider. */\n  divider?: boolean;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  onClick?: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent>;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport function ListItem(props: ParentProps<ListItemProps>): JSX.Element {\n  const [local] = splitProps(props, [\n    \"class\",\n    \"children\",\n    \"disabled\",\n    \"selected\",\n    \"dense\",\n    \"divider\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"onClick\",\n    \"ref\",\n  ]);\n\n  const interactive = (): boolean => !!local.onClick && !local.disabled;\n\n  // Solid binds event handlers once, so both are always attached and read the\n  // props themselves: an item can be disabled, or get another onClick, after it\n  // renders.\n  const onClick: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (!local.disabled) callHandler(local.onClick, event);\n  };\n  const onKeyDown: JSX.EventHandler<HTMLLIElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLLIElement; target: Element });\n    }\n  };\n\n  return (\n    <li\n      ref={mergeRefs(local.ref)}\n      role=\"listitem\"\n      tabindex={interactive() ? 0 : undefined}\n      aria-disabled={local.disabled || undefined}\n      aria-selected={local.selected || undefined}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      class={cn(\"smwb-list__item\", local.class, {\n        \"smwb-disabled\": local.disabled,\n        \"smwb-selected\": local.selected,\n        \"smwb-list__item_dense\": local.dense,\n        \"smwb-list__item_divider\": local.divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      <span class=\"smwb-list__item__start\">{local.startAdornment}</span>\n      <span class=\"smwb-list__item__main\">{local.children}</span>\n      <span class=\"smwb-list__item__end\">{local.endAdornment}</span>\n    </li>\n  );\n}\n\nexport default ListItem;\n"],"mappings":"AAAA,SAAqC,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAgBrB,SAAS,SAAS,OAAgD;AACvE,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc,MAAe,CAAC,CAAC,MAAM,WAAW,CAAC,MAAM;AAK7D,QAAM,UAAuD,CAAC,UAAU;AACtE,QAAI,CAAC,MAAM,SAAU,aAAY,MAAM,SAAS,KAAK;AAAA,EACvD;AACA,QAAM,YAA4D,CAAC,UAAU;AAC3E,QAAI,YAAY,MAAM,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AACjE,YAAM,eAAe;AACrB,kBAAY,MAAM,SAAS,KAAkF;AAAA,IAC/G;AAAA,EACF;AAEA,SACE,CAAC;AAAA,IACC,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,KAAK;AAAA,IACL,UAAU,YAAY,IAAI,IAAI;AAAA,IAC9B,eAAe,MAAM,YAAY;AAAA,IACjC,eAAe,MAAM,YAAY;AAAA,IACjC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO,GAAG,mBAAmB,MAAM,OAAO;AAAA,MACxC,iBAAiB,MAAM;AAAA,MACvB,iBAAiB,MAAM;AAAA,MACvB,yBAAyB,MAAM;AAAA,MAC/B,2BAA2B,MAAM;AAAA,IACnC,CAAC;AAAA,IACD,YAAY;AAAA,GACb;AAAA,MACC,CAAC,KAAK,MAAM,0BAA0B,MAAM,eAAe,EAA1D,KAAiE;AAAA,MAClE,CAAC,KAAK,MAAM,yBAAyB,MAAM,SAAS,EAAnD,KAA0D;AAAA,MAC3D,CAAC,KAAK,MAAM,wBAAwB,MAAM,aAAa,EAAtD,KAA6D;AAAA,IAChE,EAnBC;AAqBL;AAEA,IAAO,mBAAQ;","names":[],"file":"listItem.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { resolveLinkRel, resolveLinkTarget } from \"../../../utils/linkAttrs\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  class?: string;\n  /**\n   * Paints the row as the current one. On a link row (with `href`) it also marks the link as the current page\n   * with `aria-current=\"page\"`, because `aria-selected` is not a state a list item can have; on another row it\n   * stays `aria-selected`.\n   */\n  selected?: boolean;\n  /** Compact row. */\n  dense?: boolean;\n  /** Render a bottom divider. */\n  divider?: boolean;\n  startAdornment?: JSX.Element;\n  /**\n   * Trailing content. On a link row (with `href`) it sits beside the link, not inside it, so it can hold a control\n   * (a pin button, a toggle) without nesting it in the `<a>`; a click on it does not reach `onClick`.\n   */\n  endAdornment?: JSX.Element;\n  /**\n   * Makes the row a link: the `startAdornment` and the children sit in an `<a href>` that fills the row, so it can be\n   * focused with Tab, opened with middle click or copied. Keep the `startAdornment` non-interactive; a control\n   * belongs in the `endAdornment`. A disabled row has no `href`. A router takes the\n   * plain click in `onClick` with `event.preventDefault()`, and leaves a modified one (Ctrl, Meta, Shift,\n   * Alt, or a button other than the main one) to the browser, as a router's `Link` does.\n   */\n  href?: string;\n  /**\n   * Where the link (with `href`) opens. By default `\"_blank\"`: a new tab, as for `Button`. Pass `null` for an\n   * internal link: the `target` attribute is left out and the link opens in place. An empty string does the same; any other\n   * string is used as is.\n   */\n  target?: string | null | undefined;\n  /**\n   * The `rel` of the link (with `href`). By default `\"noreferrer\"` for a link that opens another tab or window,\n   * and none for one that opens in place. Your own value replaces the default, so add `noreferrer` yourself\n   * if you still want it; an empty string drops the attribute.\n   */\n  rel?: string | undefined;\n  /**\n   * Click handler of the row. With an `href` it runs for a click on the link (not on the `endAdornment`), before the\n   * browser follows it, so `event.preventDefault()` cancels the navigation; the row then is not a Tab stop of its\n   * own, the link is.\n   */\n  onClick?: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent>;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport function ListItem(props: ParentProps<ListItemProps>): JSX.Element {\n  const [local] = splitProps(props, [\n    \"class\",\n    \"children\",\n    \"disabled\",\n    \"selected\",\n    \"dense\",\n    \"divider\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"href\",\n    \"target\",\n    \"rel\",\n    \"onClick\",\n    \"ref\",\n  ]);\n\n  // A link row is focused through its anchor, which Enter follows by itself.\n  const interactive = (): boolean => !!local.onClick && !local.disabled && !local.href;\n  const linkTarget = (): string | undefined => resolveLinkTarget(local.target);\n\n  let linkEl: HTMLAnchorElement | undefined;\n\n  // The start and the main part, which a link row puts in the anchor.\n  const content = (): JSX.Element => (\n    <>\n      <span class=\"smwb-list__item__start\">{local.startAdornment}</span>\n      <span class=\"smwb-list__item__main\">{local.children}</span>\n    </>\n  );\n\n  // Solid binds event handlers once, so both are always attached and read the\n  // props themselves: an item can be disabled, or get another onClick, after it\n  // renders.\n  const onClick: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (local.disabled) return;\n    // The end adornment of a link row is beside the link, and its own clicks are not the row's.\n    if (local.href && !linkEl?.contains(event.target as Node)) return;\n    callHandler(local.onClick, event);\n  };\n  const onKeyDown: JSX.EventHandler<HTMLLIElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLLIElement; target: Element });\n    }\n  };\n\n  return (\n    <li\n      ref={mergeRefs(local.ref)}\n      role=\"listitem\"\n      tabindex={interactive() ? 0 : undefined}\n      aria-disabled={local.disabled || undefined}\n      aria-selected={(!local.href && local.selected) || undefined}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      class={cn(\"smwb-list__item\", local.class, {\n        \"smwb-disabled\": local.disabled,\n        \"smwb-selected\": local.selected,\n        \"smwb-list__item_link\": !!local.href,\n        \"smwb-list__item_dense\": local.dense,\n        \"smwb-list__item_divider\": local.divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      <Show\n        when={local.href}\n        fallback={\n          <>\n            {content()}\n            <span class=\"smwb-list__item__end\">{local.endAdornment}</span>\n          </>\n        }\n      >\n        <a\n          ref={linkEl}\n          class=\"smwb-list__item__link\"\n          data-testid=\"list-item-link\"\n          aria-current={local.selected ? \"page\" : undefined}\n          // A disabled link has no href, so it is no link to follow or to focus.\n          href={local.disabled ? undefined : local.href}\n          target={linkTarget()}\n          rel={resolveLinkRel(local.rel, linkTarget())}\n        >\n          {content()}\n        </a>\n        <span class=\"smwb-list__item__end\">{local.endAdornment}</span>\n      </Show>\n    </li>\n  );\n}\n\nexport default ListItem;\n"],"mappings":"AAAA,SAAqC,MAAM,kBAAkB;AAC7D,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB,yBAAyB;AAkD3C,SAAS,SAAS,OAAgD;AACvE,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;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,CAAC;AAGD,QAAM,cAAc,MAAe,CAAC,CAAC,MAAM,WAAW,CAAC,MAAM,YAAY,CAAC,MAAM;AAChF,QAAM,aAAa,MAA0B,kBAAkB,MAAM,MAAM;AAE3E,MAAI;AAGJ,QAAM,UAAU,MACd,EAAE;AAAA,MACA,CAAC,KAAK,MAAM,0BAA0B,MAAM,eAAe,EAA1D,KAAiE;AAAA,MAClE,CAAC,KAAK,MAAM,yBAAyB,MAAM,SAAS,EAAnD,KAA0D;AAAA,IAC7D;AAMF,QAAM,UAAuD,CAAC,UAAU;AACtE,QAAI,MAAM,SAAU;AAEpB,QAAI,MAAM,QAAQ,CAAC,QAAQ,SAAS,MAAM,MAAc,EAAG;AAC3D,gBAAY,MAAM,SAAS,KAAK;AAAA,EAClC;AACA,QAAM,YAA4D,CAAC,UAAU;AAC3E,QAAI,YAAY,MAAM,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AACjE,YAAM,eAAe;AACrB,kBAAY,MAAM,SAAS,KAAkF;AAAA,IAC/G;AAAA,EACF;AAEA,SACE,CAAC;AAAA,IACC,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,KAAK;AAAA,IACL,UAAU,YAAY,IAAI,IAAI;AAAA,IAC9B,eAAe,MAAM,YAAY;AAAA,IACjC,eAAgB,CAAC,MAAM,QAAQ,MAAM,YAAa;AAAA,IAClD,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO,GAAG,mBAAmB,MAAM,OAAO;AAAA,MACxC,iBAAiB,MAAM;AAAA,MACvB,iBAAiB,MAAM;AAAA,MACvB,wBAAwB,CAAC,CAAC,MAAM;AAAA,MAChC,yBAAyB,MAAM;AAAA,MAC/B,2BAA2B,MAAM;AAAA,IACnC,CAAC;AAAA,IACD,YAAY;AAAA,GACb;AAAA,MACC,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,UACE,EAAE;AAAA,aACC,QAAQ,EAAE;AAAA,YACX,CAAC,KAAK,MAAM,wBAAwB,MAAM,aAAa,EAAtD,KAA6D;AAAA,UAChE;AAAA,GAEH;AAAA,QACC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,cAAc,MAAM,WAAW,SAAS;AAAA,IAExC,MAAM,MAAM,WAAW,SAAY,MAAM;AAAA,IACzC,QAAQ,WAAW;AAAA,IACnB,KAAK,eAAe,MAAM,KAAK,WAAW,CAAC;AAAA,GAC5C;AAAA,WACE,QAAQ,EAAE;AAAA,QACb,EAXC,EAWG;AAAA,QACJ,CAAC,KAAK,MAAM,wBAAwB,MAAM,aAAa,EAAtD,KAA6D;AAAA,MAChE,EAtBC,KAsBM;AAAA,IACT,EAxCC;AA0CL;AAEA,IAAO,mBAAQ;","names":[],"file":"listItem.jsx"}

package/dist/source/components/dataDisplay/qrCode/index.js

@@ -0,0 +1,6 @@
+import { QrCode, default as default2 } from "./qrCode";
+export {
+  QrCode,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/dataDisplay/qrCode/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataDisplay/qrCode/index.ts"],
+  "sourcesContent": ["export { QrCode, default } from \"./qrCode\";\nexport type { QrCodeProps, QrCodeErrorCorrection } from \"./qrCode\";\n"],
+  "mappings": "AAAA,SAAS,QAAQ,WAAAA,gBAAe;",
+  "names": ["default"]
+}

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

@@ -0,0 +1,96 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
+import "@smwb/ui-styles/less/components/qrCode/qrCode.entry.less";
+import { Show, children, createMemo, splitProps } from "solid-js";
+import cn from "clsx";
+import { encode } from "uqr";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+import { qrCodePath } from "./qrCodePath";
+const FAILURE_LABEL = {
+  "too-long": "QR code: value too long",
+  "encode-failed": "QR code: value could not be encoded"
+};
+const MAX_WARNED_CAUSES = 32;
+const CAPACITY_BAND = 256;
+const warnedCauses = globalThis.__smwbQrCodeWarnings ?? (globalThis.__smwbQrCodeWarnings = /* @__PURE__ */ new Set());
+const warnOnce = (cause, message) => {
+  if (warnedCauses.has(cause) || warnedCauses.size >= MAX_WARNED_CAUSES) {
+    return;
+  }
+  warnedCauses.add(cause);
+  console.error(`[smwb] QrCode: ${message}`);
+};
+const noteEncodeFailure = (error, value) => {
+  if (error instanceof RangeError && /too long/i.test(error.message)) {
+    const band = Math.ceil(value.length / CAPACITY_BAND);
+    warnOnce(
+      `too-long:${band}`,
+      `value is too long to encode as a QR code (${value.length} characters; this notice is once per ${CAPACITY_BAND}-character band)`
+    );
+    return "too-long";
+  }
+  const reason = error instanceof Error ? `${error.name}: ${error.message}` : String(error);
+  warnOnce(`failed:${reason}`, `value could not be encoded as a QR code (${reason})`);
+  return "encode-failed";
+};
+function QrCode(props) {
+  const [local, rest] = splitProps(props, [
+    "class",
+    "value",
+    "size",
+    "caption",
+    "label",
+    "errorCorrection",
+    "quietZone",
+    "ref",
+    "data-testid"
+  ]);
+  const caption = children(() => local.caption);
+  const encoded = createMemo(() => {
+    try {
+      return { modules: encode(local.value, { ecc: local.errorCorrection ?? "M", border: 0 }).data, failure: null };
+    } catch (error) {
+      return { modules: null, failure: noteEncodeFailure(error, local.value) };
+    }
+  });
+  const moduleCount = () => encoded().modules?.length ?? 0;
+  const canvas = () => moduleCount() + 2 * (local.quietZone ?? 4);
+  const path = () => {
+    const modules = encoded().modules;
+    return modules ? qrCodePath(modules, local.quietZone ?? 4) : "";
+  };
+  const failure = createMemo(() => encoded().failure);
+  const imageLabel = createMemo(() => {
+    const failed = failure();
+    return failed === null ? local.label ?? "QR code" : FAILURE_LABEL[failed];
+  });
+  return <figure
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    data-testid={local["data-testid"] ?? "qr-code"}
+    data-error={failure() ?? void 0}
+    class={cn("smwb-qr-code", local.class)}
+  >
+      <svg
+    class="smwb-qr-code__image"
+    role="img"
+    aria-label={imageLabel()}
+    viewBox={`0 0 ${canvas()} ${canvas()}`}
+    width={local.size ?? 192}
+    height={local.size ?? 192}
+    shape-rendering="crispEdges"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <rect class="smwb-qr-code__light" width={canvas()} height={canvas()} fill="rgb(255,255,255)" />
+        {path() && <path class="smwb-qr-code__dark" d={path()} fill="rgb(0,0,0)" />}
+      </svg>
+      <Show when={caption()}>
+        <figcaption class="smwb-qr-code__caption">{caption()}</figcaption>
+      </Show>
+    </figure>;
+}
+var qrCode_default = QrCode;
+export {
+  QrCode,
+  qrCode_default as default
+};
+//# sourceMappingURL=qrCode.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/qrCode/qrCode.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/qrCode/qrCode.entry.less\";\nimport type { JSX } from \"solid-js\";\nimport { Show, children, createMemo, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { encode } from \"uqr\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { qrCodePath } from \"./qrCodePath\";\n\n/** Error-correction level: L 7%, M 15%, Q 25%, H 30% of the code may be damaged or covered. */\nexport type QrCodeErrorCorrection = \"L\" | \"M\" | \"Q\" | \"H\";\n\nexport interface QrCodeProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"children\" | \"role\"> {\n  /** Text encoded in the code (a URL, a pairing token). Encoded as UTF-8 bytes. */\n  value: string;\n  /** Side of the code, quiet zone included, in pixels. Default 192. */\n  size?: number | undefined;\n  /** Shown under the code (a `<figcaption>`), e.g. \"Scan with the phone app\". */\n  caption?: JSX.Element;\n  /** Accessible name of the image. Default \"QR code\". */\n  label?: string | undefined;\n  /** Error-correction level: L 7%, M 15% (default), Q 25%, H 30% of the code may be damaged or covered. */\n  errorCorrection?: QrCodeErrorCorrection | undefined;\n  /** Light margin around the code in modules. Default 4, the minimum the QR spec asks for; smaller values hurt scanning. */\n  quietZone?: number | undefined;\n  /** Test id of the root; `qr-code` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\n// Why the encoding failed, as the root's `data-error`, and the name the image takes then.\ntype QrCodeFailure = \"too-long\" | \"encode-failed\";\nconst FAILURE_LABEL: Record<QrCodeFailure, string> = {\n  \"too-long\": \"QR code: value too long\",\n  \"encode-failed\": \"QR code: value could not be encoded\",\n};\n\n// Warns once per distinct cause, never per value: the registry keys on the cause the\n// message reports — a capacity band, or the error text — not on the value, so a\n// `QrCode` bound to a text field neither keeps a multi-KB string alive per keystroke nor\n// logs a new line for every character typed. The cap bounds the registry itself: past it\n// the warning stays quiet instead of growing. It lives on globalThis so the server bundle\n// and the client module of one SSR runtime share it: the cause logs once per runtime, not\n// once per bundle. A process.env guard is deliberately not used — like dagView.tsx it\n// would silence only dev SSR.\nconst MAX_WARNED_CAUSES = 32;\nconst CAPACITY_BAND = 256; // characters: one notice per band, not per length\nconst warnedCauses = ((globalThis as { __smwbQrCodeWarnings?: Set<string> }).__smwbQrCodeWarnings ??= new Set());\nconst warnOnce = (cause: string, message: string): void => {\n  if (warnedCauses.has(cause) || warnedCauses.size >= MAX_WARNED_CAUSES) {\n    return;\n  }\n  warnedCauses.add(cause);\n  console.error(`[smwb] QrCode: ${message}`);\n};\n\n// `uqr` reports a value past the QR capacity as a RangeError(\"Data too long\"); it throws\n// other errors for other inputs (a lone surrogate fails in `encodeURI`, an untyped\n// `errorCorrection` fails in its own lookup). Only the first of those is \"too long\", so\n// the failure is read off the error instead of assumed, and the rest are named as what\n// they are.\nconst noteEncodeFailure = (error: unknown, value: string): QrCodeFailure => {\n  if (error instanceof RangeError && /too long/i.test(error.message)) {\n    const band = Math.ceil(value.length / CAPACITY_BAND);\n    warnOnce(\n      `too-long:${band}`,\n      `value is too long to encode as a QR code (${value.length} characters; this notice is once per ` +\n        `${CAPACITY_BAND}-character band)`\n    );\n    return \"too-long\";\n  }\n  const reason = error instanceof Error ? `${error.name}: ${error.message}` : String(error);\n  warnOnce(`failed:${reason}`, `value could not be encoded as a QR code (${reason})`);\n  return \"encode-failed\";\n};\n\n/**\n * A QR code of `value` as an SVG image (role=img): dark modules on a white square —\n * including the quiet zone — in every theme, so a phone camera reads it in dark mode\n * too. With `caption` the code sits in a `<figure>` named by the caption. A `value`\n * past the QR capacity renders an empty white square with `data-error=\"too-long\"`,\n * any other encode failure with `data-error=\"encode-failed\"`, instead of throwing.\n */\nexport function QrCode(props: QrCodeProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"value\",\n    \"size\",\n    \"caption\",\n    \"label\",\n    \"errorCorrection\",\n    \"quietZone\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read the caption once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const caption = children(() => local.caption);\n\n  // Encoding is pure and synchronous: the server and the client memoize the same\n  // matrix, so the path string hydrates byte-identically.\n  const encoded = createMemo((): { modules: boolean[][] | null; failure: QrCodeFailure | null } => {\n    try {\n      return { modules: encode(local.value, { ecc: local.errorCorrection ?? \"M\", border: 0 }).data, failure: null };\n    } catch (error) {\n      return { modules: null, failure: noteEncodeFailure(error, local.value) };\n    }\n  });\n\n  // N: the whole canvas in modules — matrix plus the quiet zone on every side.\n  const moduleCount = (): number => encoded().modules?.length ?? 0;\n  const canvas = (): number => moduleCount() + 2 * (local.quietZone ?? 4);\n  const path = (): string => {\n    const modules = encoded().modules;\n    return modules ? qrCodePath(modules, local.quietZone ?? 4) : \"\";\n  };\n  const failure = createMemo((): QrCodeFailure | null => encoded().failure);\n  // The image is named after the failure, so an empty white square says why it is empty.\n  const imageLabel = createMemo((): string => {\n    const failed = failure();\n    return failed === null ? (local.label ?? \"QR code\") : FAILURE_LABEL[failed];\n  });\n\n  return (\n    <figure\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"qr-code\"}\n      data-error={failure() ?? undefined}\n      class={cn(\"smwb-qr-code\", local.class)}\n    >\n      <svg\n        class=\"smwb-qr-code__image\"\n        role=\"img\"\n        aria-label={imageLabel()}\n        viewBox={`0 0 ${canvas()} ${canvas()}`}\n        width={local.size ?? 192}\n        height={local.size ?? 192}\n        shape-rendering=\"crispEdges\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect class=\"smwb-qr-code__light\" width={canvas()} height={canvas()} fill=\"rgb(255,255,255)\" />\n        {path() && <path class=\"smwb-qr-code__dark\" d={path()} fill=\"rgb(0,0,0)\" />}\n      </svg>\n      <Show when={caption()}>\n        <figcaption class=\"smwb-qr-code__caption\">{caption()}</figcaption>\n      </Show>\n    </figure>\n  );\n}\n\nexport default QrCode;\n"],"mappings":"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","names":[],"file":"qrCode.jsx"}

package/dist/source/components/dataDisplay/qrCode/qrCodePath.js

@@ -0,0 +1,24 @@
+function qrCodePath(data, quietZone) {
+  const parts = [];
+  for (let y = 0; y < data.length; y += 1) {
+    const row = data[y];
+    let x = 0;
+    while (row !== void 0 && x < row.length) {
+      if (row[x]) {
+        let run = 1;
+        while (x + run < row.length && row[x + run]) {
+          run += 1;
+        }
+        parts.push(`M${x + quietZone} ${y + quietZone}h${run}v1h-${run}z`);
+        x += run;
+      } else {
+        x += 1;
+      }
+    }
+  }
+  return parts.join("");
+}
+export {
+  qrCodePath
+};
+//# sourceMappingURL=qrCodePath.js.map

package/dist/source/components/dataDisplay/qrCode/qrCodePath.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataDisplay/qrCode/qrCodePath.ts"],
+  "sourcesContent": ["/**\n * The `d` string of the QR code's dark modules: one run-length subpath per horizontal\n * run of dark modules (`M{x} {y}h{n}v1h-{n}z`), in row order and offset by the quiet\n * zone. Pure and deterministic \u2014 the same matrix always yields the same string, on the\n * server and in the browser, in ui-react and ui-solid.\n */\nexport function qrCodePath(data: readonly (readonly boolean[])[], quietZone: number): string {\n  const parts: string[] = [];\n  for (let y = 0; y < data.length; y += 1) {\n    const row = data[y];\n    let x = 0;\n    while (row !== undefined && x < row.length) {\n      if (row[x]) {\n        let run = 1;\n        while (x + run < row.length && row[x + run]) {\n          run += 1;\n        }\n        parts.push(`M${x + quietZone} ${y + quietZone}h${run}v1h-${run}z`);\n        x += run;\n      } else {\n        x += 1;\n      }\n    }\n  }\n  return parts.join(\"\");\n}\n"],
+  "mappings": "AAMO,SAAS,WAAW,MAAuC,WAA2B;AAC3F,QAAM,QAAkB,CAAC;AACzB,WAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK,GAAG;AACvC,UAAM,MAAM,KAAK,CAAC;AAClB,QAAI,IAAI;AACR,WAAO,QAAQ,UAAa,IAAI,IAAI,QAAQ;AAC1C,UAAI,IAAI,CAAC,GAAG;AACV,YAAI,MAAM;AACV,eAAO,IAAI,MAAM,IAAI,UAAU,IAAI,IAAI,GAAG,GAAG;AAC3C,iBAAO;AAAA,QACT;AACA,cAAM,KAAK,IAAI,IAAI,SAAS,IAAI,IAAI,SAAS,IAAI,GAAG,OAAO,GAAG,GAAG;AACjE,aAAK;AAAA,MACP,OAAO;AACL,aAAK;AAAA,MACP;AAAA,IACF;AAAA,EACF;AACA,SAAO,MAAM,KAAK,EAAE;AACtB;",
+  "names": []
+}

package/dist/source/components/dataDisplay/statusDot/index.js

@@ -0,0 +1,6 @@
+import { StatusDot, default as default2 } from "./statusDot";
+export {
+  StatusDot,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/dataDisplay/statusDot/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataDisplay/statusDot/index.ts"],
+  "sourcesContent": ["export { StatusDot, default } from \"./statusDot\";\nexport type { StatusDotProps, StatusDotStatus, StatusDotColor, StatusDotSize } from \"./statusDot\";\n"],
+  "mappings": "AAAA,SAAS,WAAW,WAAAA,gBAAe;",
+  "names": ["default"]
+}

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

@@ -0,0 +1,30 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
+import "@smwb/ui-styles/less/components/statusDot/statusDot.entry.less";
+import { splitProps } from "solid-js";
+import cn from "clsx";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function StatusDot(props) {
+  const [local, rest] = splitProps(props, ["class", "status", "color", "size", "pulse", "label", "ref", "data-testid"]);
+  const shown = () => local.status ?? (local.color === void 0 ? "unknown" : void 0);
+  return <span
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    role="img"
+    aria-label={local.label}
+    data-testid={local["data-testid"] ?? "status-dot"}
+    class={cn(
+      "smwb-status-dot",
+      `smwb-status-dot_size-${local.size ?? "md"}`,
+      shown() && `smwb-status-dot_status-${shown()}`,
+      local.color && `smwb-status-dot_color-${local.color}`,
+      { "smwb-status-dot_pulse": local.pulse ?? local.status === "active" },
+      local.class
+    )}
+  />;
+}
+var statusDot_default = StatusDot;
+export {
+  StatusDot,
+  statusDot_default as default
+};
+//# sourceMappingURL=statusDot.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/statusDot/statusDot.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/statusDot/statusDot.entry.less\";\nimport type { JSX } from \"solid-js\";\nimport { splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\n/** What the marker says: `active` is under way, `attention` waits for someone, `idle` rests, `done` is finished. */\nexport type StatusDotStatus = \"active\" | \"attention\" | \"idle\" | \"done\" | \"error\" | \"unknown\";\n\n/** The theme colour names `Chip` takes; `default` is the neutral on-surface colour. */\nexport type StatusDotColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport type StatusDotSize = \"sm\" | \"md\";\n\nexport interface StatusDotProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, \"role\" | \"children\" | \"aria-label\"> {\n  /**\n   * What the dot says, and so its colour: `active` info, `attention` warning, `idle` neutral, `done` success,\n   * `error` error. `unknown` is a ring in the outline colour. Without `status` (and without `color`) the dot is\n   * `unknown`.\n   */\n  status?: StatusDotStatus | undefined;\n  /**\n   * A theme colour instead of the status's own, or on its own with no `status` (a plain disc). Given with a\n   * `status`, the status still sets the shape.\n   */\n  color?: StatusDotColor | undefined;\n  /** `md` (12px) unless given; `sm` is 8px. */\n  size?: StatusDotSize | undefined;\n  /**\n   * A ring spreads from the dot. On unless given for `active`, off for every other status. Never drawn while the\n   * user prefers reduced motion.\n   */\n  pulse?: boolean | undefined;\n  /** What the dot means in words, e.g. \"Working\": the accessible name, read by assistive technology. */\n  label: string;\n  /** Test id of the root; `status-dot` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLSpanElement>;\n}\n\n/** A small status marker: a dot coloured and shaped by `status`, named by `label`. */\nexport function StatusDot(props: StatusDotProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"status\", \"color\", \"size\", \"pulse\", \"label\", \"ref\", \"data-testid\"]);\n\n  // A bare colour is a plain disc; with neither, the dot is \"unknown\".\n  const shown = (): StatusDotStatus | undefined => local.status ?? (local.color === undefined ? \"unknown\" : undefined);\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      role=\"img\"\n      aria-label={local.label}\n      data-testid={local[\"data-testid\"] ?? \"status-dot\"}\n      class={cn(\n        \"smwb-status-dot\",\n        `smwb-status-dot_size-${local.size ?? \"md\"}`,\n        shown() && `smwb-status-dot_status-${shown()}`,\n        local.color && `smwb-status-dot_color-${local.color}`,\n        { \"smwb-status-dot_pulse\": local.pulse ?? local.status === \"active\" },\n        local.class\n      )}\n    />\n  );\n}\n\nexport default StatusDot;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AAEP,SAAS,kBAAkB;AAC3B,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAqC7B,SAAS,UAAU,OAAoC;AAC5D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,UAAU,SAAS,QAAQ,SAAS,SAAS,OAAO,aAAa,CAAC;AAGpH,QAAM,QAAQ,MAAmC,MAAM,WAAW,MAAM,UAAU,SAAY,YAAY;AAE1G,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,KAAK;AAAA,IACL,YAAY,MAAM;AAAA,IAClB,aAAa,MAAM,aAAa,KAAK;AAAA,IACrC,OAAO;AAAA,MACL;AAAA,MACA,wBAAwB,MAAM,QAAQ,IAAI;AAAA,MAC1C,MAAM,KAAK,0BAA0B,MAAM,CAAC;AAAA,MAC5C,MAAM,SAAS,yBAAyB,MAAM,KAAK;AAAA,MACnD,EAAE,yBAAyB,MAAM,SAAS,MAAM,WAAW,SAAS;AAAA,MACpE,MAAM;AAAA,IACR;AAAA,EACF;AAEJ;AAEA,IAAO,oBAAQ;","names":[],"file":"statusDot.jsx"}

package/dist/source/components/dataDisplay/swimlanes/index.js

@@ -0,0 +1,15 @@
+import {
+  Swimlanes,
+  default as default2,
+  SWIMLANES_DEFAULT_ROW_HEIGHT,
+  SWIMLANES_DEFAULT_HEIGHT,
+  SWIMLANES_DEFAULT_OVERSCAN
+} from "./swimlanes";
+export {
+  SWIMLANES_DEFAULT_HEIGHT,
+  SWIMLANES_DEFAULT_OVERSCAN,
+  SWIMLANES_DEFAULT_ROW_HEIGHT,
+  Swimlanes,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/dataDisplay/swimlanes/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataDisplay/swimlanes/index.ts"],
+  "sourcesContent": ["export {\n  Swimlanes,\n  default,\n  SWIMLANES_DEFAULT_ROW_HEIGHT,\n  SWIMLANES_DEFAULT_HEIGHT,\n  SWIMLANES_DEFAULT_OVERSCAN,\n} from \"./swimlanes\";\nexport type { SwimlanesProps, SwimlanesLane } from \"./swimlanes\";\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA,WAAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "names": ["default"]
+}