@pihanga2/shadcn 0.2.23 → 0.2.25

package/cards/chart/chart.types.d.ts

@@ -1,3 +1,4 @@
+import { PiCardRef } from '@pihanga2/core';
 import { ChartConfig } from '../../components/ui/chart';
 export declare const PI_CHART_GRAPH_CARD = "shad/chart-graph";
 export declare const Chart: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiChartGraphProps, S, {}>) => import('@pihanga2/core').PiCardDef;
@@ -143,9 +144,9 @@ export type PiChartReferenceLine = {
 };
 export type PiChartGraphProps = {
     /**
-     * Whether to render an **area** chart (filled) or a **line** chart (stroke only).
+     * Whether to render an area, line, or bar chart.
      */
-    chartType: "area" | "line";
+    chartType: "area" | "line" | "bar";
     /**
      * Array of data points.  Each entry must contain:
      * - a value for `xDataKey` (used for the x-axis labels), and
@@ -161,7 +162,7 @@ export type PiChartGraphProps = {
      */
     data: Array<Record<string, unknown>>;
     /**
-     * Series definitions.  Each entry describes one plotted line or area.
+     * Series definitions. Each entry describes one plotted line, area, or bar.
      * At least one series is required.
      */
     series: PiChartSeries[];
@@ -248,6 +249,16 @@ export type PiChartGraphProps = {
      * Range 0–1.  Defaults to `0.4`.
      */
     fillOpacity?: number;
+    /**
+     * Gap between bar categories as a percentage string or pixel value.
+     * Only applies to bar charts. Defaults to `"10%"` (the Recharts default).
+     */
+    barGap?: number | string;
+    /**
+     * Radius in pixels applied to the top corners of each bar.
+     * Only applies to bar charts. Defaults to `0`.
+     */
+    barRadius?: number;
     /**
      * Suppress the recharts entry animation so the chart renders immediately
      * without the "draw-in" / "unfold" effect.
@@ -281,6 +292,13 @@ export type PiChartGraphProps = {
      * ```
      */
     referenceAreas?: PiChartReferenceArea[];
+    /**
+     * Optional Pihanga card rendered directly below the chart. Useful for
+     * controls that operate on the plotted data, such as a range slider.
+     */
+    footerCard?: PiCardRef;
+    /** Extra Tailwind / CSS classes applied to the footer card wrapper. */
+    footerClassName?: string;
     /** Extra Tailwind / CSS classes forwarded to the outermost element. */
     className?: string;
 };

package/cards/slider/slider.component.js

@@ -5,66 +5,76 @@ import { useEffect as r, useRef as i, useState as a } from "react";
 import "@pihanga2/core";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/cards/slider/slider.component.tsx
-var c = (c) => {
-	let { name: l, value: u, defaultValue: d, selfManaged: f = !1, min: p = 0, max: m = 100, step: h = 1, disabled: g, debounceMs: _ = 0, suppressChangedEvents: v = !1, label: y, showTicks: b = !1, tickStep: x, majorTickStep: S, suppressTickLabels: C = !1, tickLabels: w, className: T, cardName: E, onChanged: D, onCommitted: O } = c, k = t(), A = k.isInForm && !!l, [j, M] = a(d ?? u ?? p), N = A ? k.formData[l] ?? p : f ? j : u ?? p, P = i(N);
-	P.current = N;
-	let F = i(!1), [I, L] = a(N), R = F.current ? I : N, z = i(null), B = i(N);
+function c(e) {
+	return Array.isArray(e) ? e : [e];
+}
+function l(e, t) {
+	return e.length > 1 ? [e[0] ?? t, e[1] ?? t] : e[0] ?? t;
+}
+function ee(e) {
+	return Array.isArray(e) ? `${e[0]} – ${e[1]}` : String(e);
+}
+var u = (u) => {
+	let { name: d, value: f, defaultValue: te, selfManaged: p = !1, min: m = 0, max: h = 100, step: g = 1, minStepsBetweenThumbs: _, disabled: v, debounceMs: y = 0, suppressChangedEvents: b = !1, label: x, showTicks: S = !1, tickStep: C, majorTickStep: w, suppressTickLabels: ne = !1, tickLabels: T, className: E, cardName: D, onChanged: O, onCommitted: k } = u, A = t(), j = A.isInForm && !!d, [M, N] = a(te ?? f ?? m), P = j ? A.formData[d] ?? m : p ? M : f ?? m, F = i(P);
+	F.current = P;
+	let I = i(!1), [L, R] = a(P), z = I.current ? L : P, B = i(null), V = i(P);
 	r(() => () => {
-		z.current != null && clearTimeout(z.current);
+		B.current != null && clearTimeout(B.current);
 	}, []);
-	function V(e) {
-		v || (A ? k.handleChange(l, e) : D({
-			name: l,
+	function H(e) {
+		b || (j ? A.handleChange(d, e) : O({
+			name: d,
 			value: e
 		}));
 	}
-	function H() {
-		F.current = !0, L(P.current);
-	}
-	function U(e) {
-		let t = e[0] ?? p;
-		F.current && (L(t), f && !A && M(t), _ > 0 ? (B.current = t, z.current != null && clearTimeout(z.current), z.current = setTimeout(() => {
-			z.current = null, V(B.current);
-		}, _)) : V(t));
+	function U() {
+		I.current = !0, R(F.current);
 	}
 	function W(e) {
-		let t = e[0] ?? p;
-		F.current = !1, L(P.current), z.current != null && (clearTimeout(z.current), z.current = null), _ > 0 && !v && V(t), O({
-			name: l,
+		let t = l(e, m);
+		I.current && (R(t), p && !j && N(t), y > 0 ? (V.current = t, B.current != null && clearTimeout(B.current), B.current = setTimeout(() => {
+			B.current = null, H(V.current);
+		}, y)) : H(t));
+	}
+	function re(e) {
+		let t = l(e, m);
+		I.current = !1, R(F.current), B.current != null && (clearTimeout(B.current), B.current = null), y > 0 && !b && H(t), k({
+			name: d,
 			value: t
 		});
 	}
-	let G = x === void 0 ? h : x, K = G > 0, q = K ? G : h, J = q > 0 ? Math.max(q, Math.round((m - p) / 5 / q) * q) : 0, Y = S === void 0 ? J : S, X = Y > 0, Z = b && (K || X), Q = K ? G : Y, $ = Z ? Array.from({ length: Math.round((m - p) / Q) + 1 }, (e, t) => p + t * Q) : [];
+	let G = C === void 0 ? g : C, K = G > 0, q = K ? G : g, ie = q > 0 ? Math.max(q, Math.round((h - m) / 5 / q) * q) : 0, J = w === void 0 ? ie : w, Y = J > 0, X = S && (K || Y), Z = K ? G : J, ae = X ? Array.from({ length: Math.round((h - m) / Z) + 1 }, (e, t) => m + t * Z) : [], Q = c(z), $ = Q[0] ?? m, oe = Q[1] ?? $;
 	return /* @__PURE__ */ s("div", {
-		"data-pihanga": E,
-		className: e("flex flex-col gap-2", T),
+		"data-pihanga": D,
+		className: e("flex flex-col gap-2", E),
 		children: [
-			y && /* @__PURE__ */ s("div", {
+			x && /* @__PURE__ */ s("div", {
 				className: "flex items-center justify-between",
 				children: [/* @__PURE__ */ o("span", {
 					className: "text-sm font-medium leading-none",
-					children: y
+					children: x
 				}), /* @__PURE__ */ o("span", {
 					className: "text-sm text-muted-foreground tabular-nums",
-					children: R
+					children: ee(z)
 				})]
 			}),
 			/* @__PURE__ */ o(n, {
-				value: [R],
-				min: p,
-				max: m,
-				step: h,
-				disabled: g,
-				onPointerDown: H,
-				onValueChange: U,
-				onValueCommit: W,
+				value: Q,
+				min: m,
+				max: h,
+				step: g,
+				minStepsBetweenThumbs: _,
+				disabled: v,
+				onPointerDown: U,
+				onValueChange: W,
+				onValueCommit: re,
 				className: "w-full"
 			}),
-			Z && /* @__PURE__ */ o("div", {
+			X && /* @__PURE__ */ o("div", {
 				"aria-hidden": "true",
 				className: "flex w-full items-baseline justify-between px-0.5",
-				children: $.map((t) => {
-					let n = X && (t - p) % Y === 0, r = t <= R, i = !C && (n || !X), a = i ? w && t in w ? w[t] : String(t) : "";
+				children: ae.map((t) => {
+					let n = Y && (t - m) % J === 0, r = Q.length > 1 ? t >= $ && t <= oe : t <= $, i = !ne && (n || !Y), a = i ? T && t in T ? T[t] : String(t) : "";
 					return /* @__PURE__ */ s("div", {
 						className: "flex flex-col items-center gap-1",
 						children: [/* @__PURE__ */ o("div", { className: e("w-0.5 rounded-full transition-all duration-300", r ? "bg-primary" : "bg-primary/20", n ? "h-3" : "h-1.5") }), /* @__PURE__ */ o("span", {
@@ -78,6 +88,6 @@ var c = (c) => {
 	});
 };
 //#endregion
-export { c as SliderComponent };
+export { u as SliderComponent };
 
 //# sourceMappingURL=slider.component.js.map

package/cards/slider/slider.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.component.js","names":[],"sources":["../../../src/cards/slider/slider.component.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Slider as SliderUI} from \"@/components/ui/slider\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport {cn} from \"@/lib/utils\";\nimport type {PiSliderEvents, PiSliderProps} from \"./slider.types\";\n\nexport const SliderComponent = (\n  props: PiCardProps<PiSliderProps, PiSliderEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue,\n    defaultValue,\n    selfManaged = false,\n    min = 0,\n    max = 100,\n    step = 1,\n    disabled,\n    debounceMs = 0,\n    suppressChangedEvents = false,\n    label,\n    showTicks = false,\n    tickStep,\n    majorTickStep,\n    suppressTickLabels = false,\n    tickLabels,\n    className,\n    cardName,\n    onChanged,\n    onCommitted,\n  } = props;\n\n  // Detect if we are inside a pi/form card via React context.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  // Internal state used only when selfManaged=true and not bound to a form.\n  const [managedValue, setManagedValue] = useState<number>(\n    defaultValue ?? propValue ?? min,\n  );\n\n  // The \"canonical\" value from props / form / self-managed state.\n  const canonicalValue = useFormData\n    ? ((form.formData[name!] as number | undefined) ?? min)\n    : selfManaged\n      ? managedValue\n      : (propValue ?? min);\n\n  // Keep a ref to the latest canonical value so event handlers always see\n  // the most up-to-date external value even if it changed during a drag.\n  const canonicalValueRef = useRef(canonicalValue);\n  canonicalValueRef.current = canonicalValue;\n\n  // \"Interactive\" drag state — tracks knob position independently while the\n  // user is actively dragging so we don't need an external value round-trip.\n  const isDragging = useRef(false);\n  const [interactiveValue, setInteractiveValue] =\n    useState<number>(canonicalValue);\n\n  // While dragging the knob follows pointer; otherwise it reflects the canonical value.\n  const displayValue = isDragging.current ? interactiveValue : canonicalValue;\n\n  // Refs for debounce: timer handle + latest pending value.\n  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const pendingValue = useRef<number>(canonicalValue);\n\n  // Clean up any pending debounce timer on unmount.\n  useEffect(() => {\n    return () => {\n      if (debounceTimer.current != null) clearTimeout(debounceTimer.current);\n    };\n  }, []);\n\n  function dispatchChanged(newValue: number) {\n    // Silently skip if the caller has opted out of continuous change events.\n    if (suppressChangedEvents) return;\n\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      onChanged({name, value: newValue});\n    }\n  }\n\n  // Called on pointer/touch down — enter interactive mode so the knob can\n  // move freely without waiting for an external state update.\n  function handlePointerDown() {\n    isDragging.current = true;\n    setInteractiveValue(canonicalValueRef.current);\n  }\n\n  function handleValueChange(newValues: number[]) {\n    const newValue = newValues[0] ?? min;\n\n    // Guard: only update interactive display when actively dragging.\n    if (!isDragging.current) return;\n\n    setInteractiveValue(newValue);\n\n    // Update internal state immediately so the thumb moves without lag.\n    if (selfManaged && !useFormData) {\n      setManagedValue(newValue);\n    }\n\n    if (debounceMs > 0) {\n      // Record the latest value and (re)start the quiet-window timer.\n      pendingValue.current = newValue;\n      if (debounceTimer.current != null) clearTimeout(debounceTimer.current);\n      debounceTimer.current = setTimeout(() => {\n        debounceTimer.current = null;\n        dispatchChanged(pendingValue.current);\n      }, debounceMs);\n    } else {\n      dispatchChanged(newValue);\n    }\n  }\n\n  function handleValueCommit(newValues: number[]) {\n    const newValue = newValues[0] ?? min;\n\n    // Leave interactive mode — on next render displayValue reverts to canonicalValue,\n    // snapping the knob back to whatever the external state currently says.\n    isDragging.current = false;\n    setInteractiveValue(canonicalValueRef.current);\n\n    // Cancel any pending debounced onChanged — the committed event supersedes it.\n    if (debounceTimer.current != null) {\n      clearTimeout(debounceTimer.current);\n      debounceTimer.current = null;\n    }\n\n    // When debounce is active (and not suppressed), flush the final value via\n    // onChanged before the committed event so listeners always see both.\n    if (debounceMs > 0 && !suppressChangedEvents) {\n      dispatchChanged(newValue);\n    }\n\n    onCommitted({name, value: newValue});\n  }\n\n  // --- Tick calculations ---\n  // tickStep=0  → hide minor ticks only  (major still shown if majorTickStep > 0)\n  // majorTickStep=0 → hide major ticks only (minor still shown if tickStep > 0)\n  // Both 0 → nothing shown\n  const effectiveMinorStep = tickStep !== undefined ? tickStep : step;\n  const showMinorTicks = effectiveMinorStep > 0;\n\n  // Auto major step: use minor step as base when minor ticks are on;\n  // fall back to `step` when minor ticks are off (tickStep=0) so that\n  // major ticks can still be auto-calculated from the slider's step.\n  const autoMajorBase = showMinorTicks ? effectiveMinorStep : step;\n  const autoMajorStep =\n    autoMajorBase > 0\n      ? Math.max(\n          autoMajorBase,\n          Math.round((max - min) / 5 / autoMajorBase) * autoMajorBase,\n        )\n      : 0;\n  // majorTickStep undefined → auto; 0 → no major ticks; >0 → explicit value\n  const resolvedMajorStep =\n    majorTickStep !== undefined ? majorTickStep : autoMajorStep;\n  const showMajorTicks = resolvedMajorStep > 0;\n\n  const renderTicks = showTicks && (showMinorTicks || showMajorTicks);\n\n  // Use minor spacing as base when available; fall back to major spacing.\n  const baseStep = showMinorTicks ? effectiveMinorStep : resolvedMajorStep;\n  const ticks = renderTicks\n    ? Array.from(\n        {length: Math.round((max - min) / baseStep) + 1},\n        (_, i) => min + i * baseStep,\n      )\n    : [];\n\n  return (\n    <div\n      data-pihanga={cardName}\n      className={cn(\"flex flex-col gap-2\", className)}\n    >\n      {label && (\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-sm font-medium leading-none\">{label}</span>\n          <span className=\"text-sm text-muted-foreground tabular-nums\">\n            {displayValue}\n          </span>\n        </div>\n      )}\n      <SliderUI\n        value={[displayValue]}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        onPointerDown={handlePointerDown}\n        onValueChange={handleValueChange}\n        onValueCommit={handleValueCommit}\n        className=\"w-full\"\n      />\n      {renderTicks && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex w-full items-baseline justify-between px-0.5\"\n        >\n          {ticks.map((tick) => {\n            const isMajor =\n              showMajorTicks && (tick - min) % resolvedMajorStep === 0;\n            const isActive = tick <= displayValue;\n            // Show label when:\n            //  • suppressTickLabels is false, AND\n            //  • tick is major  OR  there are no major ticks (label every minor tick)\n            const showLabel =\n              !suppressTickLabels && (isMajor || !showMajorTicks);\n            const labelText = showLabel\n              ? tickLabels && tick in tickLabels\n                ? tickLabels[tick]\n                : String(tick)\n              : \"\";\n\n            return (\n              <div key={tick} className=\"flex flex-col items-center gap-1\">\n                <div\n                  className={cn(\n                    \"w-0.5 rounded-full transition-all duration-300\",\n                    isActive ? \"bg-primary\" : \"bg-primary/20\",\n                    isMajor ? \"h-3\" : \"h-1.5\",\n                  )}\n                />\n                <span\n                  className={cn(\n                    \"text-xs font-medium transition-colors\",\n                    showLabel\n                      ? \"text-muted-foreground opacity-100\"\n                      : \"opacity-0\",\n                  )}\n                >\n                  {labelText}\n                </span>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"slider.component.js","names":[],"sources":["../../../src/cards/slider/slider.component.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Slider as SliderUI} from \"@/components/ui/slider\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport {cn} from \"@/lib/utils\";\nimport type {\n  PiSliderEvents,\n  PiSliderProps,\n  PiSliderValue,\n} from \"./slider.types\";\n\nfunction toValues(value: PiSliderValue): number[] {\n  return Array.isArray(value) ? value : [value];\n}\n\nfunction fromValues(values: number[], fallback: number): PiSliderValue {\n  return values.length > 1\n    ? [values[0] ?? fallback, values[1] ?? fallback]\n    : (values[0] ?? fallback);\n}\n\nfunction formatValue(value: PiSliderValue): string {\n  return Array.isArray(value) ? `${value[0]} – ${value[1]}` : String(value);\n}\n\nexport const SliderComponent = (\n  props: PiCardProps<PiSliderProps, PiSliderEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue,\n    defaultValue,\n    selfManaged = false,\n    min = 0,\n    max = 100,\n    step = 1,\n    minStepsBetweenThumbs,\n    disabled,\n    debounceMs = 0,\n    suppressChangedEvents = false,\n    label,\n    showTicks = false,\n    tickStep,\n    majorTickStep,\n    suppressTickLabels = false,\n    tickLabels,\n    className,\n    cardName,\n    onChanged,\n    onCommitted,\n  } = props;\n\n  // Detect if we are inside a pi/form card via React context.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  // Internal state used only when selfManaged=true and not bound to a form.\n  const [managedValue, setManagedValue] = useState<PiSliderValue>(\n    defaultValue ?? propValue ?? min,\n  );\n\n  // The \"canonical\" value from props / form / self-managed state.\n  const canonicalValue = useFormData\n    ? ((form.formData[name!] as PiSliderValue | undefined) ?? min)\n    : selfManaged\n      ? managedValue\n      : (propValue ?? min);\n\n  // Keep a ref to the latest canonical value so event handlers always see\n  // the most up-to-date external value even if it changed during a drag.\n  const canonicalValueRef = useRef(canonicalValue);\n  canonicalValueRef.current = canonicalValue;\n\n  // \"Interactive\" drag state — tracks knob position independently while the\n  // user is actively dragging so we don't need an external value round-trip.\n  const isDragging = useRef(false);\n  const [interactiveValue, setInteractiveValue] =\n    useState<PiSliderValue>(canonicalValue);\n\n  // While dragging the knob follows pointer; otherwise it reflects the canonical value.\n  const displayValue = isDragging.current ? interactiveValue : canonicalValue;\n\n  // Refs for debounce: timer handle + latest pending value.\n  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const pendingValue = useRef<PiSliderValue>(canonicalValue);\n\n  // Clean up any pending debounce timer on unmount.\n  useEffect(() => {\n    return () => {\n      if (debounceTimer.current != null) clearTimeout(debounceTimer.current);\n    };\n  }, []);\n\n  function dispatchChanged(newValue: PiSliderValue) {\n    // Silently skip if the caller has opted out of continuous change events.\n    if (suppressChangedEvents) return;\n\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      onChanged({name, value: newValue});\n    }\n  }\n\n  // Called on pointer/touch down — enter interactive mode so the knob can\n  // move freely without waiting for an external state update.\n  function handlePointerDown() {\n    isDragging.current = true;\n    setInteractiveValue(canonicalValueRef.current);\n  }\n\n  function handleValueChange(newValues: number[]) {\n    const newValue = fromValues(newValues, min);\n\n    // Guard: only update interactive display when actively dragging.\n    if (!isDragging.current) return;\n\n    setInteractiveValue(newValue);\n\n    // Update internal state immediately so the thumb moves without lag.\n    if (selfManaged && !useFormData) {\n      setManagedValue(newValue);\n    }\n\n    if (debounceMs > 0) {\n      // Record the latest value and (re)start the quiet-window timer.\n      pendingValue.current = newValue;\n      if (debounceTimer.current != null) clearTimeout(debounceTimer.current);\n      debounceTimer.current = setTimeout(() => {\n        debounceTimer.current = null;\n        dispatchChanged(pendingValue.current);\n      }, debounceMs);\n    } else {\n      dispatchChanged(newValue);\n    }\n  }\n\n  function handleValueCommit(newValues: number[]) {\n    const newValue = fromValues(newValues, min);\n\n    // Leave interactive mode — on next render displayValue reverts to canonicalValue,\n    // snapping the knob back to whatever the external state currently says.\n    isDragging.current = false;\n    setInteractiveValue(canonicalValueRef.current);\n\n    // Cancel any pending debounced onChanged — the committed event supersedes it.\n    if (debounceTimer.current != null) {\n      clearTimeout(debounceTimer.current);\n      debounceTimer.current = null;\n    }\n\n    // When debounce is active (and not suppressed), flush the final value via\n    // onChanged before the committed event so listeners always see both.\n    if (debounceMs > 0 && !suppressChangedEvents) {\n      dispatchChanged(newValue);\n    }\n\n    onCommitted({name, value: newValue});\n  }\n\n  // --- Tick calculations ---\n  // tickStep=0  → hide minor ticks only  (major still shown if majorTickStep > 0)\n  // majorTickStep=0 → hide major ticks only (minor still shown if tickStep > 0)\n  // Both 0 → nothing shown\n  const effectiveMinorStep = tickStep !== undefined ? tickStep : step;\n  const showMinorTicks = effectiveMinorStep > 0;\n\n  // Auto major step: use minor step as base when minor ticks are on;\n  // fall back to `step` when minor ticks are off (tickStep=0) so that\n  // major ticks can still be auto-calculated from the slider's step.\n  const autoMajorBase = showMinorTicks ? effectiveMinorStep : step;\n  const autoMajorStep =\n    autoMajorBase > 0\n      ? Math.max(\n          autoMajorBase,\n          Math.round((max - min) / 5 / autoMajorBase) * autoMajorBase,\n        )\n      : 0;\n  // majorTickStep undefined → auto; 0 → no major ticks; >0 → explicit value\n  const resolvedMajorStep =\n    majorTickStep !== undefined ? majorTickStep : autoMajorStep;\n  const showMajorTicks = resolvedMajorStep > 0;\n\n  const renderTicks = showTicks && (showMinorTicks || showMajorTicks);\n\n  // Use minor spacing as base when available; fall back to major spacing.\n  const baseStep = showMinorTicks ? effectiveMinorStep : resolvedMajorStep;\n  const ticks = renderTicks\n    ? Array.from(\n        {length: Math.round((max - min) / baseStep) + 1},\n        (_, i) => min + i * baseStep,\n      )\n    : [];\n\n  const displayValues = toValues(displayValue);\n  const selectedMin = displayValues[0] ?? min;\n  const selectedMax = displayValues[1] ?? selectedMin;\n\n  return (\n    <div\n      data-pihanga={cardName}\n      className={cn(\"flex flex-col gap-2\", className)}\n    >\n      {label && (\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-sm font-medium leading-none\">{label}</span>\n          <span className=\"text-sm text-muted-foreground tabular-nums\">\n            {formatValue(displayValue)}\n          </span>\n        </div>\n      )}\n      <SliderUI\n        value={displayValues}\n        min={min}\n        max={max}\n        step={step}\n        minStepsBetweenThumbs={minStepsBetweenThumbs}\n        disabled={disabled}\n        onPointerDown={handlePointerDown}\n        onValueChange={handleValueChange}\n        onValueCommit={handleValueCommit}\n        className=\"w-full\"\n      />\n      {renderTicks && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex w-full items-baseline justify-between px-0.5\"\n        >\n          {ticks.map((tick) => {\n            const isMajor =\n              showMajorTicks && (tick - min) % resolvedMajorStep === 0;\n            const isActive =\n              displayValues.length > 1\n                ? tick >= selectedMin && tick <= selectedMax\n                : tick <= selectedMin;\n            // Show label when:\n            //  • suppressTickLabels is false, AND\n            //  • tick is major  OR  there are no major ticks (label every minor tick)\n            const showLabel =\n              !suppressTickLabels && (isMajor || !showMajorTicks);\n            const labelText = showLabel\n              ? tickLabels && tick in tickLabels\n                ? tickLabels[tick]\n                : String(tick)\n              : \"\";\n\n            return (\n              <div key={tick} className=\"flex flex-col items-center gap-1\">\n                <div\n                  className={cn(\n                    \"w-0.5 rounded-full transition-all duration-300\",\n                    isActive ? \"bg-primary\" : \"bg-primary/20\",\n                    isMajor ? \"h-3\" : \"h-1.5\",\n                  )}\n                />\n                <span\n                  className={cn(\n                    \"text-xs font-medium transition-colors\",\n                    showLabel\n                      ? \"text-muted-foreground opacity-100\"\n                      : \"opacity-0\",\n                  )}\n                >\n                  {labelText}\n                </span>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAWA,SAAS,EAAS,GAAgC;CAChD,OAAO,MAAM,QAAQ,CAAK,IAAI,IAAQ,CAAC,CAAK;AAC9C;AAEA,SAAS,EAAW,GAAkB,GAAiC;CACrE,OAAO,EAAO,SAAS,IACnB,CAAC,EAAO,MAAM,GAAU,EAAO,MAAM,CAAQ,IAC5C,EAAO,MAAM;AACpB;AAEA,SAAS,GAAY,GAA8B;CACjD,OAAO,MAAM,QAAQ,CAAK,IAAI,GAAG,EAAM,GAAG,KAAK,EAAM,OAAO,OAAO,CAAK;AAC1E;AAEA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,GACP,kBACA,iBAAc,IACd,SAAM,GACN,SAAM,KACN,UAAO,GACP,0BACA,aACA,gBAAa,GACb,2BAAwB,IACxB,UACA,eAAY,IACZ,aACA,kBACA,yBAAqB,IACrB,eACA,cACA,aACA,cACA,mBACE,GAGE,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAGvC,CAAC,GAAc,KAAmB,EACtC,MAAgB,KAAa,CAC/B,GAGM,IAAiB,IACjB,EAAK,SAAS,MAAwC,IACxD,IACE,IACC,KAAa,GAId,IAAoB,EAAO,CAAc;CAC/C,EAAkB,UAAU;CAI5B,IAAM,IAAa,EAAO,EAAK,GACzB,CAAC,GAAkB,KACvB,EAAwB,CAAc,GAGlC,IAAe,EAAW,UAAU,IAAmB,GAGvD,IAAgB,EAA6C,IAAI,GACjE,IAAe,EAAsB,CAAc;CAGzD,cACe;EACX,AAAI,EAAc,WAAW,QAAM,aAAa,EAAc,OAAO;CACvE,GACC,CAAC,CAAC;CAEL,SAAS,EAAgB,GAAyB;EAE5C,MAEA,IACF,EAAK,aAAa,GAAO,CAAQ,IAEjC,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAIA,SAAS,IAAoB;EAE3B,AADA,EAAW,UAAU,IACrB,EAAoB,EAAkB,OAAO;CAC/C;CAEA,SAAS,EAAkB,GAAqB;EAC9C,IAAM,IAAW,EAAW,GAAW,CAAG;EAGrC,EAAW,YAEhB,EAAoB,CAAQ,GAGxB,KAAe,CAAC,KAClB,EAAgB,CAAQ,GAGtB,IAAa,KAEf,EAAa,UAAU,GACnB,EAAc,WAAW,QAAM,aAAa,EAAc,OAAO,GACrE,EAAc,UAAU,iBAAiB;GAEvC,AADA,EAAc,UAAU,MACxB,EAAgB,EAAa,OAAO;EACtC,GAAG,CAAU,KAEb,EAAgB,CAAQ;CAE5B;CAEA,SAAS,GAAkB,GAAqB;EAC9C,IAAM,IAAW,EAAW,GAAW,CAAG;EAmB1C,AAfA,EAAW,UAAU,IACrB,EAAoB,EAAkB,OAAO,GAGzC,EAAc,WAAW,SAC3B,aAAa,EAAc,OAAO,GAClC,EAAc,UAAU,OAKtB,IAAa,KAAK,CAAC,KACrB,EAAgB,CAAQ,GAG1B,EAAY;GAAC;GAAM,OAAO;EAAQ,CAAC;CACrC;CAMA,IAAM,IAAqB,MAAa,KAAA,IAAuB,IAAX,GAC9C,IAAiB,IAAqB,GAKtC,IAAgB,IAAiB,IAAqB,GACtD,KACJ,IAAgB,IACZ,KAAK,IACH,GACA,KAAK,OAAO,IAAM,KAAO,IAAI,CAAa,IAAI,CAChD,IACA,GAEA,IACJ,MAAkB,KAAA,IAA4B,KAAhB,GAC1B,IAAiB,IAAoB,GAErC,IAAc,MAAc,KAAkB,IAG9C,IAAW,IAAiB,IAAqB,GACjD,KAAQ,IACV,MAAM,KACJ,EAAC,QAAQ,KAAK,OAAO,IAAM,KAAO,CAAQ,IAAI,EAAC,IAC9C,GAAG,MAAM,IAAM,IAAI,CACtB,IACA,CAAC,GAEC,IAAgB,EAAS,CAAY,GACrC,IAAc,EAAc,MAAM,GAClC,KAAc,EAAc,MAAM;CAExC,OACE,kBAAC,OAAD;EACE,gBAAc;EACd,WAAW,EAAG,uBAAuB,CAAS;YAFhD;GAIG,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAoC;IAAY,CAAA,GAChE,kBAAC,QAAD;KAAM,WAAU;eACb,GAAY,CAAY;IACrB,CAAA,CACH;;GAEP,kBAAC,GAAD;IACE,OAAO;IACF;IACA;IACC;IACiB;IACb;IACV,eAAe;IACf,eAAe;IACf,eAAe;IACf,WAAU;GACX,CAAA;GACA,KACC,kBAAC,OAAD;IACE,eAAY;IACZ,WAAU;cAET,GAAM,KAAK,MAAS;KACnB,IAAM,IACJ,MAAmB,IAAO,KAAO,MAAsB,GACnD,IACJ,EAAc,SAAS,IACnB,KAAQ,KAAe,KAAQ,KAC/B,KAAQ,GAIR,IACJ,CAAC,OAAuB,KAAW,CAAC,IAChC,IAAY,IACd,KAAc,KAAQ,IACpB,EAAW,KACX,OAAO,CAAI,IACb;KAEJ,OACE,kBAAC,OAAD;MAAgB,WAAU;gBAA1B,CACE,kBAAC,OAAD,EACE,WAAW,EACT,kDACA,IAAW,eAAe,iBAC1B,IAAU,QAAQ,OACpB,EACD,CAAA,GACD,kBAAC,QAAD;OACE,WAAW,EACT,yCACA,IACI,sCACA,WACN;iBAEC;MACG,CAAA,CACH;QAlBK,CAkBL;IAET,CAAC;GACE,CAAA;EAEJ;;AAET"}

package/cards/slider/slider.types.d.ts

@@ -24,6 +24,8 @@ export declare const onSliderCommitted: <S extends import('@pihanga2/core').Redu
 export declare const onPiSliderCommitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiSliderCommittedEvent>) => void;
+/** A single selected value or an inclusive two-thumb range. */
+export type PiSliderValue = number | [number, number];
 export type PiSliderProps = {
     /**
      * Field name used to bind to FormContext when inside a pi/form card.
@@ -32,16 +34,17 @@ export type PiSliderProps = {
      */
     name?: string;
     /**
-     * Controlled numeric value (single thumb).
+     * Controlled value. A number renders one thumb; a tuple renders two thumbs
+     * with the selected range highlighted between them.
      * Ignored when `name` is set and the component is inside a pi/form,
      * and also ignored when `selfManaged` is true (use `defaultValue` instead).
      */
-    value?: number;
+    value?: PiSliderValue;
     /**
      * Initial value used when `selfManaged` is true.
      * Falls back to `value` → `min` → 0 if not provided.
      */
-    defaultValue?: number;
+    defaultValue?: PiSliderValue;
     /**
      * When true the slider keeps its own internal value state.
      * Dragging updates the displayed value immediately without needing an
@@ -58,6 +61,11 @@ export type PiSliderProps = {
     max?: number;
     /** Stepping interval between selectable values. Defaults to 1. */
     step?: number;
+    /**
+     * Minimum permitted distance between two thumbs, measured in `step`
+     * increments. Only applies when `value` is a range.
+     */
+    minStepsBetweenThumbs?: number;
     /** When true, the slider is disabled and non-interactive. */
     disabled?: boolean;
     /**
@@ -126,14 +134,14 @@ export type PiSliderProps = {
 export type PiSliderChangedEvent = {
     /** Field name, mirrors the `name` prop if provided. */
     name?: string;
-    /** New numeric value after the change. */
-    value: number;
+    /** New scalar or range value after the change. */
+    value: PiSliderValue;
 };
 export type PiSliderCommittedEvent = {
     /** Field name, mirrors the `name` prop if provided. */
     name?: string;
-    /** Final settled value when the user released the thumb. */
-    value: number;
+    /** Final settled scalar or range value when the user released a thumb. */
+    value: PiSliderValue;
 };
 export type PiSliderEvents = {
     onChanged: PiSliderChangedEvent;

package/cards/slider/slider.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.types.js","names":[],"sources":["../../../src/cards/slider/slider.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_SLIDER_CARD = \"shad/slider\";\n\nexport const Slider = createCardDeclaration<PiSliderProps, PiSliderEvents>(\n  PI_SLIDER_CARD,\n);\n\nexport const PI_SLIDER_ACTION = registerActions(PI_SLIDER_CARD, [\n  \"changed\",\n  \"committed\",\n]);\n\nexport const onSliderChanged = createOnAction<PiSliderChangedEvent>(\n  PI_SLIDER_ACTION.CHANGED,\n);\n\n/** @deprecated Use `onSliderChanged` instead. */\nexport const onPiSliderChanged = onSliderChanged;\n\n/**\n * Fired once when the user **finishes** dragging (mouse-up / touch-end).\n *\n * Use this instead of `onSliderChanged` when you only care about the final\n * settled value and do not want to process every intermediate drag position.\n */\nexport const onSliderCommitted = createOnAction<PiSliderCommittedEvent>(\n  PI_SLIDER_ACTION.COMMITTED,\n);\n\n/** @deprecated Use `onSliderCommitted` instead. */\nexport const onPiSliderCommitted = onSliderCommitted;\n\n// ---------------------------------------------------------------------------\n// Props & Events\n// ---------------------------------------------------------------------------\n\nexport type PiSliderProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its value from form data and writes\n   * back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled numeric value (single thumb).\n   * Ignored when `name` is set and the component is inside a pi/form,\n   * and also ignored when `selfManaged` is true (use `defaultValue` instead).\n   */\n  value?: number;\n\n  /**\n   * Initial value used when `selfManaged` is true.\n   * Falls back to `value` → `min` → 0 if not provided.\n   */\n  defaultValue?: number;\n\n  /**\n   * When true the slider keeps its own internal value state.\n   * Dragging updates the displayed value immediately without needing an\n   * external state update.  `onChanged` is still fired on every change so\n   * the app can react (or log) without being responsible for feeding the\n   * value back as a prop.\n   *\n   * Ignored when inside a pi/form (form state takes precedence).\n   */\n  selfManaged?: boolean;\n\n  /** Minimum value of the slider range. Defaults to 0. */\n  min?: number;\n\n  /** Maximum value of the slider range. Defaults to 100. */\n  max?: number;\n\n  /** Stepping interval between selectable values. Defaults to 1. */\n  step?: number;\n\n  /** When true, the slider is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /**\n   * Debounce delay in milliseconds applied to `onChanged` during continuous\n   * drag.  Only the last value within each quiet window is dispatched.\n   *\n   * Useful when the `onChanged` handler is expensive (e.g. triggers an API\n   * call) — set e.g. `debounceMs: 200` to cap the event rate.\n   *\n   * Has no effect on `onCommitted`, which always fires exactly once at\n   * drag-end regardless of this setting.\n   *\n   * Omit (or set to 0) to dispatch on every drag position (default behaviour).\n   */\n  debounceMs?: number;\n\n  /**\n   * When true, `onSliderChanged` is **never** dispatched during drag.\n   *\n   * Use this together with `onSliderCommitted` when you only care about\n   * the final settled value and want to eliminate all intermediate Redux\n   * actions entirely (stricter than `debounceMs`).\n   *\n   * `onSliderCommitted` is unaffected and always fires on release.\n   * `selfManaged` visual updates are also unaffected.\n   */\n  suppressChangedEvents?: boolean;\n\n  /**\n   * Optional label text rendered above the slider.\n   * When provided, the current numeric value is shown to the right of the label.\n   */\n  label?: string;\n\n  /**\n   * When true, tick marks are rendered below the slider track.\n   */\n  showTicks?: boolean;\n\n  /**\n   * Spacing between consecutive **minor** tick marks in value units.\n   * Defaults to `step`.\n   * Set to `0` to hide minor ticks only — major ticks are still shown\n   * if `majorTickStep` is non-zero.\n   */\n  tickStep?: number;\n\n  /**\n   * Interval (in value units) between **major** (tall, labelled) ticks.\n   * Defaults to `(max - min) / 5` rounded to the nearest `tickStep`.\n   * Set to `0` to hide major ticks only — minor ticks are still shown\n   * if `tickStep` is non-zero.\n   */\n  majorTickStep?: number;\n\n  /**\n   * When true, no tick labels are rendered at all (only the tick marks).\n   * Overrides `tickLabels` and the default numeric labels.\n   */\n  suppressTickLabels?: boolean;\n\n  /**\n   * Custom labels keyed by value.  When provided for a value, the custom\n   * string is shown instead of the numeric value.  Pass `\"\"` to suppress the\n   * label for a specific tick.\n   *\n   * @example { 0: \"Min\", 50: \"Mid\", 100: \"Max\" }\n   */\n  tickLabels?: Record<number, string>;\n\n  /** Extra Tailwind / CSS classes forwarded to the root wrapper element. */\n  className?: string;\n};\n\nexport type PiSliderChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New numeric value after the change. */\n  value: number;\n};\n\nexport type PiSliderCommittedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** Final settled value when the user released the thumb. */\n  value: number;\n};\n\nexport type PiSliderEvents = {\n  onChanged: PiSliderChangedEvent;\n  onCommitted: PiSliderCommittedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAiB,eAEjB,IAAS,EACpB,CACF,GAEa,IAAmB,EAAgB,GAAgB,CAC9D,WACA,WACF,CAAC,GAEY,IAAkB,EAC7B,EAAiB,OACnB,GAGa,IAAoB,GAQpB,IAAoB,EAC/B,EAAiB,SACnB,GAGa,IAAsB"}
+{"version":3,"file":"slider.types.js","names":[],"sources":["../../../src/cards/slider/slider.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_SLIDER_CARD = \"shad/slider\";\n\nexport const Slider = createCardDeclaration<PiSliderProps, PiSliderEvents>(\n  PI_SLIDER_CARD,\n);\n\nexport const PI_SLIDER_ACTION = registerActions(PI_SLIDER_CARD, [\n  \"changed\",\n  \"committed\",\n]);\n\nexport const onSliderChanged = createOnAction<PiSliderChangedEvent>(\n  PI_SLIDER_ACTION.CHANGED,\n);\n\n/** @deprecated Use `onSliderChanged` instead. */\nexport const onPiSliderChanged = onSliderChanged;\n\n/**\n * Fired once when the user **finishes** dragging (mouse-up / touch-end).\n *\n * Use this instead of `onSliderChanged` when you only care about the final\n * settled value and do not want to process every intermediate drag position.\n */\nexport const onSliderCommitted = createOnAction<PiSliderCommittedEvent>(\n  PI_SLIDER_ACTION.COMMITTED,\n);\n\n/** @deprecated Use `onSliderCommitted` instead. */\nexport const onPiSliderCommitted = onSliderCommitted;\n\n// ---------------------------------------------------------------------------\n// Props & Events\n// ---------------------------------------------------------------------------\n\n/** A single selected value or an inclusive two-thumb range. */\nexport type PiSliderValue = number | [number, number];\n\nexport type PiSliderProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its value from form data and writes\n   * back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled value. A number renders one thumb; a tuple renders two thumbs\n   * with the selected range highlighted between them.\n   * Ignored when `name` is set and the component is inside a pi/form,\n   * and also ignored when `selfManaged` is true (use `defaultValue` instead).\n   */\n  value?: PiSliderValue;\n\n  /**\n   * Initial value used when `selfManaged` is true.\n   * Falls back to `value` → `min` → 0 if not provided.\n   */\n  defaultValue?: PiSliderValue;\n\n  /**\n   * When true the slider keeps its own internal value state.\n   * Dragging updates the displayed value immediately without needing an\n   * external state update.  `onChanged` is still fired on every change so\n   * the app can react (or log) without being responsible for feeding the\n   * value back as a prop.\n   *\n   * Ignored when inside a pi/form (form state takes precedence).\n   */\n  selfManaged?: boolean;\n\n  /** Minimum value of the slider range. Defaults to 0. */\n  min?: number;\n\n  /** Maximum value of the slider range. Defaults to 100. */\n  max?: number;\n\n  /** Stepping interval between selectable values. Defaults to 1. */\n  step?: number;\n\n  /**\n   * Minimum permitted distance between two thumbs, measured in `step`\n   * increments. Only applies when `value` is a range.\n   */\n  minStepsBetweenThumbs?: number;\n\n  /** When true, the slider is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /**\n   * Debounce delay in milliseconds applied to `onChanged` during continuous\n   * drag.  Only the last value within each quiet window is dispatched.\n   *\n   * Useful when the `onChanged` handler is expensive (e.g. triggers an API\n   * call) — set e.g. `debounceMs: 200` to cap the event rate.\n   *\n   * Has no effect on `onCommitted`, which always fires exactly once at\n   * drag-end regardless of this setting.\n   *\n   * Omit (or set to 0) to dispatch on every drag position (default behaviour).\n   */\n  debounceMs?: number;\n\n  /**\n   * When true, `onSliderChanged` is **never** dispatched during drag.\n   *\n   * Use this together with `onSliderCommitted` when you only care about\n   * the final settled value and want to eliminate all intermediate Redux\n   * actions entirely (stricter than `debounceMs`).\n   *\n   * `onSliderCommitted` is unaffected and always fires on release.\n   * `selfManaged` visual updates are also unaffected.\n   */\n  suppressChangedEvents?: boolean;\n\n  /**\n   * Optional label text rendered above the slider.\n   * When provided, the current numeric value is shown to the right of the label.\n   */\n  label?: string;\n\n  /**\n   * When true, tick marks are rendered below the slider track.\n   */\n  showTicks?: boolean;\n\n  /**\n   * Spacing between consecutive **minor** tick marks in value units.\n   * Defaults to `step`.\n   * Set to `0` to hide minor ticks only — major ticks are still shown\n   * if `majorTickStep` is non-zero.\n   */\n  tickStep?: number;\n\n  /**\n   * Interval (in value units) between **major** (tall, labelled) ticks.\n   * Defaults to `(max - min) / 5` rounded to the nearest `tickStep`.\n   * Set to `0` to hide major ticks only — minor ticks are still shown\n   * if `tickStep` is non-zero.\n   */\n  majorTickStep?: number;\n\n  /**\n   * When true, no tick labels are rendered at all (only the tick marks).\n   * Overrides `tickLabels` and the default numeric labels.\n   */\n  suppressTickLabels?: boolean;\n\n  /**\n   * Custom labels keyed by value.  When provided for a value, the custom\n   * string is shown instead of the numeric value.  Pass `\"\"` to suppress the\n   * label for a specific tick.\n   *\n   * @example { 0: \"Min\", 50: \"Mid\", 100: \"Max\" }\n   */\n  tickLabels?: Record<number, string>;\n\n  /** Extra Tailwind / CSS classes forwarded to the root wrapper element. */\n  className?: string;\n};\n\nexport type PiSliderChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New scalar or range value after the change. */\n  value: PiSliderValue;\n};\n\nexport type PiSliderCommittedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** Final settled scalar or range value when the user released a thumb. */\n  value: PiSliderValue;\n};\n\nexport type PiSliderEvents = {\n  onChanged: PiSliderChangedEvent;\n  onCommitted: PiSliderCommittedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAiB,eAEjB,IAAS,EACpB,CACF,GAEa,IAAmB,EAAgB,GAAgB,CAC9D,WACA,WACF,CAAC,GAEY,IAAkB,EAC7B,EAAiB,OACnB,GAGa,IAAoB,GAQpB,IAAoB,EAC/B,EAAiB,SACnB,GAGa,IAAsB"}

package/cards/swimlane/index.js

@@ -1,14 +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";
+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, stepKeyOf as w, stepRows as T } from "./swimlane.model.js";
+import { SwimlaneComponent as E } from "./swimlane.component.js";
+import { actionTypesToEvents as D, registerCardComponent as O } from "@pihanga2/core";
 //#region src/cards/swimlane/index.ts
-E({
+O({
 	name: o,
-	component: w,
-	events: T(a)
+	component: E,
+	events: D(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 };
+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, w as stepKeyOf, T as stepRows };
 
 //# sourceMappingURL=index.js.map