@pihanga2/shadcn 0.2.22 → 0.2.23

package/README.md

@@ -62,7 +62,27 @@ import "@pihanga2/shadcn/cards/dataTable";
 
 ---
 
-## Included cards (53)
+## Card catalogue (for code generators)
+
+Every build also writes `dist-lib/cards.schema.json` (`@pihanga2/shadcn/cards.schema.json`):
+a machine-readable catalogue of every card type in this package — a JSON
+Schema for its props, and for each event payload plus the event's action
+type. It's generated straight from the compiled cards and their `.d.ts`
+files, so it can never drift from what's actually in `dist-lib/`.
+
+Backends/other languages can use it to generate typed proxies instead of
+hand-maintaining bindings. See `scripts/schema/extract-card-schemas.mjs` for
+how it's produced, and the `pihanga-remote` project's Python code generator
+(`pihanga_remote.codegen`) for a consumer.
+
+```ts
+import catalogue from "@pihanga2/shadcn/cards.schema.json";
+// catalogue.cards["shad/button"].props / .events...
+```
+
+---
+
+## Included cards (54)
 
 - `attachment`
 - `avatar`
@@ -110,6 +130,7 @@ import "@pihanga2/shadcn/cards/dataTable";
 - `stack`
 - `stepper`
 - `suspense`
+- `swimlane`
 - `switch`
 - `tabs`
 - `textArea`

package/cards/jsonViewer/jsonViewer.component.js

@@ -1,6 +1,5 @@
 import { getIconElement as e } from "../icons.js";
-import './jsonViewer.css';import '../../node_modules/react-json-view-lite/dist/index.css';/* empty css                                                 */
-/* empty css           */
+import './jsonViewer.css';/* empty css           */
 import { useCallback as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { Check as s, Copy as c } from "lucide-react";

package/cards/jsonViewer/jsonViewer.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsonViewer.component.js","names":[],"sources":["../../../src/cards/jsonViewer/jsonViewer.component.tsx"],"sourcesContent":["import React, {useLayoutEffect, useRef, useState, useCallback} from \"react\";\nimport type {PiCardProps} from \"@pihanga2/core\";\nimport {JsonView, allExpanded, defaultStyles} from \"react-json-view-lite\";\nimport {Copy, Check} from \"lucide-react\";\nimport \"react-json-view-lite/dist/index.css\";\nimport \"./jsonViewer.css\";\n\nimport {getIconElement} from \"@/cards/icons\";\nimport type {JsonViewerProps, JsonViewerEvents} from \"./jsonViewer.types\";\n\n/**\n * Converts the `collapsed` prop (from the react-json-view API) into a\n * `shouldExpandNode` predicate for react-json-view-lite.\n *\n * - `false`  → expand everything\n * - `true`   → collapse everything\n * - number N → expand nodes at depth < N (root is depth 0)\n */\nfunction toShouldExpandNode(\n  collapsed: boolean | number | undefined,\n): (level: number) => boolean {\n  if (collapsed === false) return allExpanded;\n  if (collapsed === true) return () => false;\n  // default: collapsed = 1 → only root level expanded\n  const depth = collapsed ?? 1;\n  return (level: number) => level < depth;\n}\n\n/**\n * Compact, code-editor style for react-json-view-lite.\n *\n * The expand/collapse icon is positioned absolutely inside a fixed left gutter\n * (via padding-left on `.jv-basic-child`), so the opening `{` and closing `}`\n * always start at the same column — fixing the original misalignment where the\n * icon pushed the open-brace further right than the close-brace.\n */\nconst compactStyles = {\n  // spread defaultStyles first to satisfy required fields (ariaLables, stringifyStringValues, …)\n  ...defaultStyles,\n  container: \"jv-container\",\n  basicChildStyle: \"jv-basic-child\",\n  label: \"jv-label\",\n  clickableLabel: \"jv-clickable-label\",\n  nullValue: \"jv-null\",\n  undefinedValue: \"jv-undefined\",\n  numberValue: \"jv-number\",\n  stringValue: \"jv-string\",\n  booleanValue: \"jv-boolean\",\n  otherValue: \"jv-other\",\n  punctuation: \"jv-punctuation\",\n  expandIcon: \"jv-expand-icon\",\n  collapseIcon: \"jv-collapse-icon\",\n  collapsedContent: \"jv-collapsed-content\",\n  childFieldsContainer: \"jv-child-fields-container\",\n};\n\n/**\n * Resolve the icon element to use for the copy button.\n *\n * Resolution order:\n *   1. `iconName` looked up in the global icon registry\n *   2. Lucide `Copy` as the built-in fallback\n */\nfunction resolveCopyIcon(iconName?: string): React.ElementType {\n  if (iconName) {\n    const registered = getIconElement(iconName);\n    if (registered) return registered;\n  }\n  return Copy;\n}\n\n/** Write `text` to the clipboard, preferring `ClipboardItem` for explicit MIME. */\nasync function writeToClipboard(text: string): Promise<void> {\n  if (typeof ClipboardItem !== \"undefined\") {\n    const blob = new Blob([text], {type: \"text/plain\"});\n    await navigator.clipboard.write([new ClipboardItem({\"text/plain\": blob})]);\n  } else {\n    // Fallback for browsers without ClipboardItem support\n    await navigator.clipboard.writeText(text);\n  }\n}\n\nexport const JsonViewerComponent = (\n  props: PiCardProps<JsonViewerProps, JsonViewerEvents>,\n): React.ReactNode => {\n  const {\n    source,\n    collapsed = 1,\n    modifyFn,\n    style,\n    className,\n    cardName,\n    _cls,\n    copyToClipboard,\n    copyIcon,\n    onCopied,\n  } = props;\n\n  const elRef = useRef<HTMLDivElement>(null);\n  const [copied, setCopied] = useState(false);\n\n  useLayoutEffect(() => {\n    if (modifyFn) {\n      modifyFn(source, elRef.current);\n    }\n  }, [modifyFn, source]);\n\n  const shouldExpandNode = toShouldExpandNode(collapsed);\n\n  const handleCopy = useCallback(async () => {\n    const text = JSON.stringify(source, null, 2);\n    let success = false;\n    try {\n      await writeToClipboard(text);\n      success = true;\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.warn(\"[JsonViewer] clipboard write failed:\", err);\n    }\n    onCopied?.({success});\n  }, [source, onCopied]);\n\n  const CopyIconEl = resolveCopyIcon(copyIcon);\n  const ConfirmIconEl = Check;\n\n  return (\n    <div\n      className={[_cls(\"root\", className), \"jv-wrapper\"].join(\" \")}\n      ref={elRef}\n      data-pihanga={cardName}\n      style={style as React.CSSProperties | undefined}\n    >\n      {copyToClipboard && (\n        <button\n          type=\"button\"\n          aria-label={copied ? \"Copied!\" : \"Copy JSON to clipboard\"}\n          title={copied ? \"Copied!\" : \"Copy JSON to clipboard\"}\n          className={`jv-copy-btn${copied ? \" jv-copy-btn--done\" : \"\"}`}\n          onClick={handleCopy}\n        >\n          {copied ? (\n            <ConfirmIconEl size={13} strokeWidth={2.5} />\n          ) : (\n            <CopyIconEl size={13} strokeWidth={2} />\n          )}\n        </button>\n      )}\n      <JsonView\n        data={source as object | unknown[]}\n        shouldExpandNode={shouldExpandNode}\n        style={compactStyles}\n        clickToExpandNode\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAkBA,SAAS,EACP,GAC4B;CAC5B,IAAI,MAAc,IAAO,OAAO;CAChC,IAAI,MAAc,IAAM,aAAa;CAErC,IAAM,IAAQ,KAAa;CAC3B,QAAQ,MAAkB,IAAQ;AACpC;AAUA,IAAM,IAAgB;CAEpB,GAAG;CACH,WAAW;CACX,iBAAiB;CACjB,OAAO;CACP,gBAAgB;CAChB,WAAW;CACX,gBAAgB;CAChB,aAAa;CACb,aAAa;CACb,cAAc;CACd,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,cAAc;CACd,kBAAkB;CAClB,sBAAsB;AACxB;AASA,SAAS,EAAgB,GAAsC;CAC7D,IAAI,GAAU;EACZ,IAAM,IAAa,EAAe,CAAQ;EAC1C,IAAI,GAAY,OAAO;CACzB;CACA,OAAO;AACT;AAGA,eAAe,EAAiB,GAA6B;CAC3D,IAAI,OAAO,gBAAkB,KAAa;EACxC,IAAM,IAAO,IAAI,KAAK,CAAC,CAAI,GAAG,EAAC,MAAM,aAAY,CAAC;EAClD,MAAM,UAAU,UAAU,MAAM,CAAC,IAAI,cAAc,EAAC,cAAc,EAAI,CAAC,CAAC,CAAC;CAC3E,OAEE,MAAM,UAAU,UAAU,UAAU,CAAI;AAE5C;AAEA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,WACA,eAAY,GACZ,aACA,UACA,cACA,aACA,SACA,oBACA,aACA,gBACE,GAEE,IAAQ,EAAuB,IAAI,GACnC,CAAC,GAAQ,KAAa,EAAS,EAAK;CAE1C,QAAsB;EACpB,AAAI,KACF,EAAS,GAAQ,EAAM,OAAO;CAElC,GAAG,CAAC,GAAU,CAAM,CAAC;CAErB,IAAM,IAAmB,EAAmB,CAAS,GAE/C,IAAa,EAAY,YAAY;EACzC,IAAM,IAAO,KAAK,UAAU,GAAQ,MAAM,CAAC,GACvC,IAAU;EACd,IAAI;GAIF,AAHA,MAAM,EAAiB,CAAI,GAC3B,IAAU,IACV,EAAU,EAAI,GACd,iBAAiB,EAAU,EAAK,GAAG,GAAI;EACzC,SAAS,GAAK;GACZ,QAAQ,KAAK,wCAAwC,CAAG;EAC1D;EACA,IAAW,EAAC,WAAO,CAAC;CACtB,GAAG,CAAC,GAAQ,CAAQ,CAAC,GAEf,IAAa,EAAgB,CAAQ,GACrC,IAAgB;CAEtB,OACE,kBAAC,OAAD;EACE,WAAW,CAAC,EAAK,QAAQ,CAAS,GAAG,YAAY,EAAE,KAAK,GAAG;EAC3D,KAAK;EACL,gBAAc;EACP;YAJT,CAMG,KACC,kBAAC,UAAD;GACE,MAAK;GACL,cAAY,IAAS,YAAY;GACjC,OAAO,IAAS,YAAY;GAC5B,WAAW,cAAc,IAAS,uBAAuB;GACzD,SAAS;aAER,IACC,kBAAC,GAAD;IAAe,MAAM;IAAI,aAAa;GAAM,CAAA,IAE5C,kBAAC,GAAD;IAAY,MAAM;IAAI,aAAa;GAAI,CAAA;EAEnC,CAAA,GAEV,kBAAC,GAAD;GACE,MAAM;GACY;GAClB,OAAO;GACP,mBAAA;EACD,CAAA,CACE;;AAET"}
+{"version":3,"file":"jsonViewer.component.js","names":[],"sources":["../../../src/cards/jsonViewer/jsonViewer.component.tsx"],"sourcesContent":["import React, {useLayoutEffect, useRef, useState, useCallback} from \"react\";\nimport type {PiCardProps} from \"@pihanga2/core\";\nimport {JsonView, allExpanded, defaultStyles} from \"react-json-view-lite\";\nimport {Copy, Check} from \"lucide-react\";\n// Note: react-json-view-lite's own CSS is intentionally NOT imported here.\n// Every style-name it defines is overridden below by `compactStyles` (the\n// `jv-*` classes), whose rules live entirely in \"./jsonViewer.css\". Importing\n// the library's own dist/index.css pulled in dead styles and, worse, caused\n// Vite to copy that CSS file into our build tree, which rollup then\n// referenced via a broken \"../../node_modules/react-json-view-lite/...\"\n// relative path once published to npm (external deps aren't republished with\n// the package). See jsonViewer.css for the real, already-overridden styles.\nimport \"./jsonViewer.css\";\n\nimport {getIconElement} from \"@/cards/icons\";\nimport type {JsonViewerProps, JsonViewerEvents} from \"./jsonViewer.types\";\n\n/**\n * Converts the `collapsed` prop (from the react-json-view API) into a\n * `shouldExpandNode` predicate for react-json-view-lite.\n *\n * - `false`  → expand everything\n * - `true`   → collapse everything\n * - number N → expand nodes at depth < N (root is depth 0)\n */\nfunction toShouldExpandNode(\n  collapsed: boolean | number | undefined,\n): (level: number) => boolean {\n  if (collapsed === false) return allExpanded;\n  if (collapsed === true) return () => false;\n  // default: collapsed = 1 → only root level expanded\n  const depth = collapsed ?? 1;\n  return (level: number) => level < depth;\n}\n\n/**\n * Compact, code-editor style for react-json-view-lite.\n *\n * The expand/collapse icon is positioned absolutely inside a fixed left gutter\n * (via padding-left on `.jv-basic-child`), so the opening `{` and closing `}`\n * always start at the same column — fixing the original misalignment where the\n * icon pushed the open-brace further right than the close-brace.\n */\nconst compactStyles = {\n  // spread defaultStyles first to satisfy required fields (ariaLables, stringifyStringValues, …)\n  ...defaultStyles,\n  container: \"jv-container\",\n  basicChildStyle: \"jv-basic-child\",\n  label: \"jv-label\",\n  clickableLabel: \"jv-clickable-label\",\n  nullValue: \"jv-null\",\n  undefinedValue: \"jv-undefined\",\n  numberValue: \"jv-number\",\n  stringValue: \"jv-string\",\n  booleanValue: \"jv-boolean\",\n  otherValue: \"jv-other\",\n  punctuation: \"jv-punctuation\",\n  expandIcon: \"jv-expand-icon\",\n  collapseIcon: \"jv-collapse-icon\",\n  collapsedContent: \"jv-collapsed-content\",\n  childFieldsContainer: \"jv-child-fields-container\",\n};\n\n/**\n * Resolve the icon element to use for the copy button.\n *\n * Resolution order:\n *   1. `iconName` looked up in the global icon registry\n *   2. Lucide `Copy` as the built-in fallback\n */\nfunction resolveCopyIcon(iconName?: string): React.ElementType {\n  if (iconName) {\n    const registered = getIconElement(iconName);\n    if (registered) return registered;\n  }\n  return Copy;\n}\n\n/** Write `text` to the clipboard, preferring `ClipboardItem` for explicit MIME. */\nasync function writeToClipboard(text: string): Promise<void> {\n  if (typeof ClipboardItem !== \"undefined\") {\n    const blob = new Blob([text], {type: \"text/plain\"});\n    await navigator.clipboard.write([new ClipboardItem({\"text/plain\": blob})]);\n  } else {\n    // Fallback for browsers without ClipboardItem support\n    await navigator.clipboard.writeText(text);\n  }\n}\n\nexport const JsonViewerComponent = (\n  props: PiCardProps<JsonViewerProps, JsonViewerEvents>,\n): React.ReactNode => {\n  const {\n    source,\n    collapsed = 1,\n    modifyFn,\n    style,\n    className,\n    cardName,\n    _cls,\n    copyToClipboard,\n    copyIcon,\n    onCopied,\n  } = props;\n\n  const elRef = useRef<HTMLDivElement>(null);\n  const [copied, setCopied] = useState(false);\n\n  useLayoutEffect(() => {\n    if (modifyFn) {\n      modifyFn(source, elRef.current);\n    }\n  }, [modifyFn, source]);\n\n  const shouldExpandNode = toShouldExpandNode(collapsed);\n\n  const handleCopy = useCallback(async () => {\n    const text = JSON.stringify(source, null, 2);\n    let success = false;\n    try {\n      await writeToClipboard(text);\n      success = true;\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.warn(\"[JsonViewer] clipboard write failed:\", err);\n    }\n    onCopied?.({success});\n  }, [source, onCopied]);\n\n  const CopyIconEl = resolveCopyIcon(copyIcon);\n  const ConfirmIconEl = Check;\n\n  return (\n    <div\n      className={[_cls(\"root\", className), \"jv-wrapper\"].join(\" \")}\n      ref={elRef}\n      data-pihanga={cardName}\n      style={style as React.CSSProperties | undefined}\n    >\n      {copyToClipboard && (\n        <button\n          type=\"button\"\n          aria-label={copied ? \"Copied!\" : \"Copy JSON to clipboard\"}\n          title={copied ? \"Copied!\" : \"Copy JSON to clipboard\"}\n          className={`jv-copy-btn${copied ? \" jv-copy-btn--done\" : \"\"}`}\n          onClick={handleCopy}\n        >\n          {copied ? (\n            <ConfirmIconEl size={13} strokeWidth={2.5} />\n          ) : (\n            <CopyIconEl size={13} strokeWidth={2} />\n          )}\n        </button>\n      )}\n      <JsonView\n        data={source as object | unknown[]}\n        shouldExpandNode={shouldExpandNode}\n        style={compactStyles}\n        clickToExpandNode\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAyBA,SAAS,EACP,GAC4B;CAC5B,IAAI,MAAc,IAAO,OAAO;CAChC,IAAI,MAAc,IAAM,aAAa;CAErC,IAAM,IAAQ,KAAa;CAC3B,QAAQ,MAAkB,IAAQ;AACpC;AAUA,IAAM,IAAgB;CAEpB,GAAG;CACH,WAAW;CACX,iBAAiB;CACjB,OAAO;CACP,gBAAgB;CAChB,WAAW;CACX,gBAAgB;CAChB,aAAa;CACb,aAAa;CACb,cAAc;CACd,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,cAAc;CACd,kBAAkB;CAClB,sBAAsB;AACxB;AASA,SAAS,EAAgB,GAAsC;CAC7D,IAAI,GAAU;EACZ,IAAM,IAAa,EAAe,CAAQ;EAC1C,IAAI,GAAY,OAAO;CACzB;CACA,OAAO;AACT;AAGA,eAAe,EAAiB,GAA6B;CAC3D,IAAI,OAAO,gBAAkB,KAAa;EACxC,IAAM,IAAO,IAAI,KAAK,CAAC,CAAI,GAAG,EAAC,MAAM,aAAY,CAAC;EAClD,MAAM,UAAU,UAAU,MAAM,CAAC,IAAI,cAAc,EAAC,cAAc,EAAI,CAAC,CAAC,CAAC;CAC3E,OAEE,MAAM,UAAU,UAAU,UAAU,CAAI;AAE5C;AAEA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,WACA,eAAY,GACZ,aACA,UACA,cACA,aACA,SACA,oBACA,aACA,gBACE,GAEE,IAAQ,EAAuB,IAAI,GACnC,CAAC,GAAQ,KAAa,EAAS,EAAK;CAE1C,QAAsB;EACpB,AAAI,KACF,EAAS,GAAQ,EAAM,OAAO;CAElC,GAAG,CAAC,GAAU,CAAM,CAAC;CAErB,IAAM,IAAmB,EAAmB,CAAS,GAE/C,IAAa,EAAY,YAAY;EACzC,IAAM,IAAO,KAAK,UAAU,GAAQ,MAAM,CAAC,GACvC,IAAU;EACd,IAAI;GAIF,AAHA,MAAM,EAAiB,CAAI,GAC3B,IAAU,IACV,EAAU,EAAI,GACd,iBAAiB,EAAU,EAAK,GAAG,GAAI;EACzC,SAAS,GAAK;GACZ,QAAQ,KAAK,wCAAwC,CAAG;EAC1D;EACA,IAAW,EAAC,WAAO,CAAC;CACtB,GAAG,CAAC,GAAQ,CAAQ,CAAC,GAEf,IAAa,EAAgB,CAAQ,GACrC,IAAgB;CAEtB,OACE,kBAAC,OAAD;EACE,WAAW,CAAC,EAAK,QAAQ,CAAS,GAAG,YAAY,EAAE,KAAK,GAAG;EAC3D,KAAK;EACL,gBAAc;EACP;YAJT,CAMG,KACC,kBAAC,UAAD;GACE,MAAK;GACL,cAAY,IAAS,YAAY;GACjC,OAAO,IAAS,YAAY;GAC5B,WAAW,cAAc,IAAS,uBAAuB;GACzD,SAAS;aAER,IACC,kBAAC,GAAD;IAAe,MAAM;IAAI,aAAa;GAAM,CAAA,IAE5C,kBAAC,GAAD;IAAY,MAAM;IAAI,aAAa;GAAI,CAAA;EAEnC,CAAA,GAEV,kBAAC,GAAD;GACE,MAAM;GACY;GAClB,OAAO;GACP,mBAAA;EACD,CAAA,CACE;;AAET"}

package/cards/swimlane/index.d.ts

@@ -0,0 +1,2 @@
+export * from './swimlane.types';
+export * from './swimlane.model';

package/cards/swimlane/index.js

@@ -0,0 +1,14 @@
+import { DEF_GUTTER_WIDTH as e, DEF_HEADER_HEIGHT as t, DEF_LANE_WIDTH as n, DEF_MAX_ROWS as r, DEF_ROW_HEIGHT as i, SWIMLANE_ACTION as a, SWIMLANE_CARD as o, SWIMLANE_DATA_ACTION as s, Swimlane as c, dispatchSwimlaneEvents as l, dispatchSwimlaneRowsCleared as u, onSwimlaneEventsReceived as d, onSwimlaneHoverChanged as f, onSwimlaneItemClicked as p, onSwimlaneRowsCleared as m } from "./swimlane.types.js";
+import { clearSwimlaneRows as h, createSwimlaneModel as g, describeSwimlaneTarget as _, formatTs as v, ingestSwimlaneEvents as y, projectPending as b, registerSwimlaneModel as x, relatedCallIds as S, rowTouches as C } from "./swimlane.model.js";
+import { SwimlaneComponent as w } from "./swimlane.component.js";
+import { actionTypesToEvents as T, registerCardComponent as E } from "@pihanga2/core";
+//#region src/cards/swimlane/index.ts
+E({
+	name: o,
+	component: w,
+	events: T(a)
+});
+//#endregion
+export { e as DEF_GUTTER_WIDTH, t as DEF_HEADER_HEIGHT, n as DEF_LANE_WIDTH, r as DEF_MAX_ROWS, i as DEF_ROW_HEIGHT, a as SWIMLANE_ACTION, o as SWIMLANE_CARD, s as SWIMLANE_DATA_ACTION, c as Swimlane, h as clearSwimlaneRows, g as createSwimlaneModel, _ as describeSwimlaneTarget, l as dispatchSwimlaneEvents, u as dispatchSwimlaneRowsCleared, v as formatTs, y as ingestSwimlaneEvents, d as onSwimlaneEventsReceived, f as onSwimlaneHoverChanged, p as onSwimlaneItemClicked, m as onSwimlaneRowsCleared, b as projectPending, x as registerSwimlaneModel, S as relatedCallIds, C as rowTouches };
+
+//# sourceMappingURL=index.js.map

package/cards/swimlane/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/swimlane/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {SwimlaneComponent} from \"./swimlane.component\";\nimport {SWIMLANE_ACTION, SWIMLANE_CARD} from \"./swimlane.types\";\n\nexport * from \"./swimlane.types\";\nexport * from \"./swimlane.model\";\n\nregisterCardComponent({\n  name: SWIMLANE_CARD,\n  component: SwimlaneComponent,\n  events: actionTypesToEvents(SWIMLANE_ACTION),\n});\n"],"mappings":";;;;;AAQA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAe;AAC7C,CAAC"}

package/cards/swimlane/swimlane.component.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { SwimlaneEvents, SwimlaneProps } from './swimlane.types';
+export declare const SwimlaneComponent: (props: PiCardProps<SwimlaneProps, SwimlaneEvents>) => React.ReactNode;

package/cards/swimlane/swimlane.component.js

@@ -0,0 +1,520 @@
+import "./swimlane.types.js";
+import { describeSwimlaneTarget as e, formatTs as t, projectPending as n, relatedCallIds as r, rowTouches as i } from "./swimlane.model.js";
+import './swimlane.css';/* empty css         */
+import { memo as a, useEffect as o, useId as s, useLayoutEffect as c, useMemo as l, useRef as u, useState as d } from "react";
+import f from "clsx";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/cards/swimlane/swimlane.component.tsx
+var g = (e, t) => e.gutter + t * e.laneW + e.laneW / 2;
+function _(e, t, n, r, i, a, o, s = null) {
+	n.forEach((n, c) => {
+		let l = g(t, c);
+		[[
+			r,
+			0,
+			t.mid
+		], [
+			i,
+			t.mid,
+			t.rowH
+		]].forEach(([t, o, c], u) => {
+			let d = t[n];
+			d && (e.visuals.push(/* @__PURE__ */ m("line", {
+				className: `swl-ll swl-ll-${d.state}`,
+				x1: l,
+				x2: l,
+				y1: o,
+				y2: c
+			}, `ll-${n}-${u}`)), d.acts.forEach((t, d) => {
+				let p = l - 5 + d * 5, g = u === 1 && !r[n]?.acts.includes(t), _ = u === 0 && !i[n]?.acts.includes(t), v = `M${p},${o} V${c} M${p + 10},${o} V${c}` + (g ? ` M${p},${o} H${p + 10}` : "") + (_ ? ` M${p},${c} H${p + 10}` : "");
+				e.visuals.push(/* @__PURE__ */ h("g", {
+					className: f("swl-act", a === t ? "swl-hl" : s === t && "swl-hl-proc"),
+					children: [/* @__PURE__ */ m("rect", {
+						x: p,
+						y: o,
+						width: 10,
+						height: c - o
+					}), /* @__PURE__ */ m("path", { d: v })]
+				}, `a-${t}-${u}`)), e.hits.push(/* @__PURE__ */ m("rect", {
+					className: "swl-hit",
+					x: p - 8,
+					y: o,
+					width: 26,
+					height: c - o,
+					"data-kind": "activity",
+					"data-id": t,
+					"data-lane": n
+				}, `ha-${t}-${u}`));
+			}));
+		}), !r[n] && i[n] && e.visuals.push(/* @__PURE__ */ m("rect", {
+			className: "swl-lane-head",
+			x: l - 16,
+			y: t.mid - 5,
+			width: 32,
+			height: 10,
+			rx: 2
+		}, `h-${n}`), /* @__PURE__ */ h("text", {
+			className: "swl-lbl-muted",
+			x: l + 20,
+			y: t.mid + 3,
+			children: [
+				"+ ",
+				o[n] ?? n,
+				" joined"
+			]
+		}, `ht-${n}`));
+	});
+}
+function v(e, t, n, r) {
+	let i = n(r.from), a = n(r.to);
+	if (i < 0 || a < 0) return;
+	let o = g(t, i), s = g(t, a), c = f("swl-ar", r.cls, r.hl ? "swl-hl" : r.rel && "swl-hl-rel"), l = `url(#${t.mk}-${r.marker})`, u = {
+		"data-kind": r.kind,
+		"data-id": r.hitId,
+		"data-row": r.rowId
+	};
+	if (r.from === r.to) {
+		let n = `M${o + 6},${t.mid - 9} h26 v16 h-20`;
+		e.visuals.push(/* @__PURE__ */ m("path", {
+			className: c,
+			d: n,
+			markerEnd: l
+		}, "ar"), /* @__PURE__ */ m("text", {
+			className: "swl-lbl",
+			x: o + 38,
+			y: t.mid + 3,
+			children: r.label
+		}, "lb")), e.hits.push(/* @__PURE__ */ m("path", {
+			className: "swl-hit",
+			d: n,
+			strokeWidth: 14,
+			pointerEvents: "stroke",
+			...u
+		}, "hit"));
+		return;
+	}
+	let d = Math.sign(s - o), p = o + d * 6, h = s - d * 6;
+	e.visuals.push(/* @__PURE__ */ m("line", {
+		className: c,
+		x1: p,
+		x2: h,
+		y1: t.mid,
+		y2: t.mid,
+		markerEnd: l
+	}, "ar"), /* @__PURE__ */ m("text", {
+		className: "swl-lbl",
+		x: Math.min(p, h) + 8,
+		y: t.mid - 5,
+		children: r.label
+	}, "lb")), e.hits.push(/* @__PURE__ */ m("line", {
+		className: "swl-hit",
+		x1: p,
+		x2: h,
+		y1: t.mid,
+		y2: t.mid,
+		strokeWidth: 16,
+		pointerEvents: "stroke",
+		...u
+	}, "hit"));
+}
+var y = {
+	sync: ["swl-ar-sync", "sync"],
+	async: ["swl-ar-async", "async"],
+	event: ["swl-ar-event", "event"]
+}, b = a(function({ row: e, g: n, laneOrder: r, laneLabels: i, width: a, hl: o, rel: s, proc: c }) {
+	let l = {
+		visuals: [],
+		hits: []
+	}, u = (e) => r.indexOf(e);
+	_(l, n, r, e.pre, e.post, o, i, c);
+	let d = e.event;
+	switch (d.type) {
+		case "call": {
+			let [t, r] = y[d.kind];
+			v(l, n, u, {
+				from: d.from,
+				to: d.to,
+				cls: t,
+				marker: r,
+				label: d.label,
+				hitId: d.id,
+				kind: "transition",
+				rowId: e.id,
+				hl: o === d.id,
+				rel: s
+			});
+			break;
+		}
+		case "reply":
+			e.route && v(l, n, u, {
+				from: e.route.to,
+				to: e.route.from,
+				cls: d.ok ? "swl-ar-reply" : "swl-ar-error",
+				marker: d.ok ? "reply" : "error",
+				label: d.label,
+				hitId: d.id,
+				kind: "transition",
+				rowId: e.id,
+				hl: o === d.id,
+				rel: s
+			});
+			break;
+		case "done":
+			e.route && l.visuals.push(/* @__PURE__ */ h("text", {
+				className: "swl-lbl-muted",
+				x: g(n, u(e.route.to)) + 14,
+				y: n.mid + 3,
+				children: ["✓ processed ", e.route.label]
+			}, "dn"));
+			break;
+		case "state": {
+			let t = g(n, u(d.lane));
+			l.visuals.push(/* @__PURE__ */ m("circle", {
+				cx: t,
+				cy: n.mid,
+				r: 5,
+				className: `swl-dot-${d.state}`
+			}, "st"), /* @__PURE__ */ h("text", {
+				className: "swl-lbl-muted",
+				x: t + 10,
+				y: n.mid + 3,
+				children: ["→ ", d.state]
+			}, "stl")), l.hits.push(/* @__PURE__ */ m("circle", {
+				className: "swl-hit",
+				cx: t,
+				cy: n.mid,
+				r: 12,
+				"data-kind": "state",
+				"data-id": `state-${e.id}`,
+				"data-lane": d.lane,
+				"data-row": e.id
+			}, "sth"));
+			break;
+		}
+	}
+	return /* @__PURE__ */ h("svg", {
+		className: f("swl-row", e.fulfilled && "swl-arrived"),
+		width: a,
+		height: n.rowH,
+		"data-row": e.id,
+		children: [
+			/* @__PURE__ */ m("text", {
+				className: "swl-ts",
+				x: 0,
+				y: n.mid + 3,
+				children: t(d.ts)
+			}),
+			e.fulfilled && /* @__PURE__ */ h("text", {
+				className: "swl-ok",
+				x: n.gutter - 16,
+				y: n.mid + 4,
+				children: [/* @__PURE__ */ m("title", { children: "replaced an outstanding message" }), "✓"]
+			}),
+			l.visuals,
+			l.hits
+		]
+	});
+}), x = a(function({ row: e, g: t, laneOrder: n, laneLabels: r, width: i, hl: a, rel: o, proc: s, now: c }) {
+	let l = {
+		visuals: [],
+		hits: []
+	}, u = e.pending, d = c - u.since, p = u.timeoutMs != null && d > u.timeoutMs;
+	return _(l, t, n, e.pre, e.post, a, r, s), v(l, t, (e) => n.indexOf(e), {
+		from: u.from,
+		to: u.to,
+		cls: f("swl-ar-ghost", p && "swl-overdue"),
+		marker: "ghost",
+		label: `⌛ ${u.label}`,
+		hitId: u.id,
+		kind: "pending",
+		hl: a === u.id,
+		rel: o
+	}), /* @__PURE__ */ h("svg", {
+		className: "swl-row swl-ghost",
+		width: i,
+		height: t.rowH,
+		children: [
+			/* @__PURE__ */ h("text", {
+				className: f("swl-ts", p && "swl-overdue"),
+				x: 0,
+				y: t.mid + 3,
+				children: [
+					"waiting ",
+					(d / 1e3).toFixed(1),
+					"s"
+				]
+			}),
+			l.visuals,
+			l.hits
+		]
+	});
+}), S = a(function({ snap: e, count: t, g: n, laneOrder: r, laneLabels: i, width: a, proc: o }) {
+	let s = {
+		visuals: [],
+		hits: []
+	};
+	return _(s, n, r, e, e, null, i, o), /* @__PURE__ */ h("svg", {
+		className: "swl-row swl-now",
+		width: a,
+		height: n.rowH,
+		children: [
+			/* @__PURE__ */ m("text", {
+				className: "swl-now-lbl",
+				x: 0,
+				y: n.mid + 3,
+				children: "now"
+			}),
+			s.visuals,
+			/* @__PURE__ */ m("line", {
+				className: "swl-now-line",
+				x1: n.gutter - 6,
+				x2: a - 10,
+				y1: n.mid,
+				y2: n.mid
+			}),
+			/* @__PURE__ */ h("text", {
+				className: "swl-now-lbl",
+				x: a - 136,
+				y: n.mid - 4,
+				children: [
+					"▼ ",
+					t,
+					" outstanding"
+				]
+			})
+		]
+	});
+});
+function C(e) {
+	let { model: t, hid: r, related: a, procId: s, clock: c, ...u } = e, [f, g] = d(() => Date.now()), _ = c ?? f, v = t.pending.length > 0;
+	o(() => {
+		if (!v || c != null) return;
+		let e = setInterval(() => g(Date.now()), 250);
+		return () => clearInterval(e);
+	}, [v, c]);
+	let { current: y, pending: b } = t, C = l(() => n(y, b), [y, b]);
+	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(S, {
+		snap: t.current,
+		count: t.pending.length,
+		proc: s && i({
+			pre: t.current,
+			post: t.current
+		}, void 0, s) ? s : null,
+		...u
+	}), C.map((e) => /* @__PURE__ */ m(x, {
+		row: e,
+		now: _,
+		hl: r && i(e, e.pending.id, r) ? r : null,
+		rel: a.has(e.pending.id),
+		proc: s && i(e, void 0, s) ? s : null,
+		...u
+	}, e.id))] });
+}
+function w({ model: e, g: t, headH: n, width: r }) {
+	return /* @__PURE__ */ m("svg", {
+		width: r,
+		height: n,
+		children: e.laneOrder.map((r, i) => {
+			let a = g(t, i), o = e.current[r], s = n - 24;
+			return /* @__PURE__ */ h("g", { children: [
+				/* @__PURE__ */ m("text", {
+					className: "swl-lane-name",
+					x: a + 4,
+					y: s,
+					transform: `rotate(-90 ${a + 4} ${s})`,
+					children: e.laneLabels[r] ?? r
+				}),
+				/* @__PURE__ */ m("circle", {
+					cx: a,
+					cy: n - 12,
+					r: 5,
+					className: `swl-dot-${o?.state}`,
+					children: /* @__PURE__ */ m("title", { children: o?.state })
+				}),
+				o && o.acts.length > 0 && /* @__PURE__ */ m("text", {
+					className: "swl-lbl-muted",
+					x: a + 9,
+					y: n - 8,
+					children: o.acts.length
+				})
+			] }, r);
+		})
+	});
+}
+function T({ mk: e }) {
+	let t = (t, n, r) => /* @__PURE__ */ m("marker", {
+		id: `${e}-${t}`,
+		viewBox: "0 0 10 10",
+		refX: 9,
+		refY: 5,
+		markerWidth: 9,
+		markerHeight: 9,
+		markerUnits: "userSpaceOnUse",
+		orient: "auto-start-reverse",
+		children: r ? /* @__PURE__ */ m("path", {
+			d: "M1,1 L9,5 L1,9",
+			className: n
+		}) : /* @__PURE__ */ m("path", {
+			d: "M0,0 L10,5 L0,10 z",
+			className: n
+		})
+	});
+	return /* @__PURE__ */ m("svg", {
+		width: 0,
+		height: 0,
+		style: { position: "absolute" },
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ h("defs", { children: [
+			t("sync", "swl-mk-sync", !1),
+			t("async", "swl-mk-async", !0),
+			t("event", "swl-mk-event", !0),
+			t("reply", "swl-mk-reply", !0),
+			t("error", "swl-mk-error", !1),
+			t("ghost", "swl-mk-ghost", !0)
+		] })
+	});
+}
+function E(e, t) {
+	return t.kind !== "transition" && t.kind !== "pending" ? null : e.spans[t.id]?.parent ?? null;
+}
+function D(e) {
+	for (let t = e?.parentElement; t; t = t.parentElement) {
+		let e = getComputedStyle(t).overflowY;
+		if (e === "auto" || e === "scroll") return t;
+	}
+	return null;
+}
+var O = (t) => {
+	let { cardName: n, model: a, showPending: p = !0, autoFollow: g = !0, showTooltip: _ = !0, highlightId: v, laneWidth: y = 104, rowHeight: x = 30, headerHeight: S = 130, gutterWidth: O = 92, stickyTop: k = 0, now: A, className: j, onHoverChanged: M, onItemClicked: ee } = t, N = "swl" + s().replace(/[^a-zA-Z0-9_-]/g, ""), P = l(() => ({
+		laneW: y,
+		rowH: x,
+		gutter: O,
+		mid: x / 2,
+		mk: N
+	}), [
+		y,
+		x,
+		O,
+		N
+	]), F = O + a.laneOrder.length * y + 140, I = {
+		g: P,
+		laneOrder: a.laneOrder,
+		laneLabels: a.laneLabels,
+		width: F
+	}, L = u(null), R = u(null), z = u(a);
+	z.current = a;
+	let [B, V] = d(null), H = u(null), U = (e) => {
+		let t = e?.closest?.(".swl-hit");
+		if (!t) return null;
+		let n = t.dataset;
+		return {
+			kind: n.kind,
+			id: n.id,
+			lane: n.lane,
+			rowId: n.row == null ? void 0 : Number(n.row)
+		};
+	}, W = (e, t) => e === t || !!e && !!t && e.kind === t.kind && e.id === t.id, G = (e) => {
+		let t = z.current, n = e.kind === "state" ? void 0 : r(t, e.id), i = E(t, e) ?? void 0;
+		return e.kind === "pending" ? {
+			pending: t.pending.find((t) => t.id === e.id),
+			span: t.spans[e.id],
+			related: n,
+			process: i
+		} : {
+			span: t.spans[e.id],
+			related: n,
+			process: i
+		};
+	}, K = (e, t) => {
+		let n = R.current;
+		n && (n.style.left = `${e + 14}px`, n.style.top = `${t + 14}px`);
+	}, q = (t, n) => {
+		let r = H.current;
+		if (W(r, t)) return;
+		H.current = t, V(t);
+		let i = R.current;
+		i && (t && _ ? (i.textContent = e(z.current, t, A ?? Date.now()), i.style.display = "block", K(n.clientX, n.clientY)) : i.style.display = "none"), M({
+			target: t,
+			previous: r,
+			...t ? G(t) : {},
+			clientX: n.clientX,
+			clientY: n.clientY
+		});
+	}, J = (e) => {
+		let t = U(e.target);
+		t && q(t, e);
+	}, te = (e) => {
+		let t = U(e.relatedTarget);
+		(!t || !W(t, H.current)) && q(t, e);
+	}, ne = (e) => {
+		H.current && _ && K(e.clientX, e.clientY);
+	}, re = (e) => {
+		let t = U(e.target);
+		t && ee({
+			target: t,
+			...G(t)
+		});
+	}, Y = B && B.kind !== "state" ? B.id : v ?? null, { spans: X } = a, Z = l(() => new Set(Y ? r({ spans: X }, Y) : []), [Y, X]), Q = B ? E(a, B) : null, $ = u(!0);
+	return o(() => {
+		if (!g) return;
+		let e = D(L.current), t = e ?? window, n = () => {
+			$.current = e ? e.scrollTop + e.clientHeight >= e.scrollHeight - 40 : window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 40;
+		};
+		return t.addEventListener("scroll", n, { passive: !0 }), () => t.removeEventListener("scroll", n);
+	}, [g]), c(() => {
+		if (!g || !$.current) return;
+		let e = D(L.current);
+		e ? e.scrollTop = e.scrollHeight : window.scrollTo(0, document.documentElement.scrollHeight);
+	}, [
+		g,
+		a.rows.length,
+		a.pending.length
+	]), /* @__PURE__ */ h("div", {
+		ref: L,
+		className: f("pihanga-swimlane", j),
+		"data-pihanga": n,
+		children: [
+			/* @__PURE__ */ m(T, { mk: N }),
+			/* @__PURE__ */ m("div", {
+				className: "swl-header",
+				style: { top: k },
+				children: /* @__PURE__ */ m(w, {
+					model: a,
+					g: P,
+					headH: S,
+					width: F
+				})
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "swl-rows",
+				onPointerOver: J,
+				onPointerOut: te,
+				onPointerMove: ne,
+				onClick: re,
+				children: [a.rows.map((e) => /* @__PURE__ */ m(b, {
+					row: e,
+					hl: Y && i(e, "id" in e.event ? e.event.id : void 0, Y) ? Y : null,
+					rel: "id" in e.event && e.event.type !== "done" && Z.has(e.event.id),
+					proc: Q && i(e, void 0, Q) ? Q : null,
+					...I
+				}, e.id)), p && /* @__PURE__ */ m(C, {
+					model: a,
+					hid: Y,
+					related: Z,
+					procId: Q,
+					clock: A,
+					...I
+				})]
+			}),
+			/* @__PURE__ */ m("div", {
+				ref: R,
+				className: "swl-tooltip",
+				role: "tooltip"
+			})
+		]
+	});
+};
+//#endregion
+export { O as SwimlaneComponent };
+
+//# sourceMappingURL=swimlane.component.js.map