@carto/ps-react-ui 5.0.0 → 6.0.0

package/dist/formula-CdHWtepq.js

@@ -0,0 +1,282 @@
+import { t as e } from "./styles-BCEBm7xh.js";
+import { C as t, T as n } from "./stores-B8CHbgw-.js";
+import { n as r, t as i } from "./download-Vlzn2jzb.js";
+import { t as a } from "./utils-BStJWhZN.js";
+import { c as o } from "react/compiler-runtime";
+import { Avatar as s, Box as c, Chip as l, Skeleton as u, Typography as d } from "@mui/material";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/widgets/formula/delta.tsx
+var m = new Intl.NumberFormat(void 0, {
+	style: "percent",
+	signDisplay: "always",
+	maximumFractionDigits: 1
+}), h = {
+	positive: "success",
+	negative: "error",
+	neutral: "default"
+};
+function g(e) {
+	let t = o(9), { value: n, label: r, severity: i, format: a, ChipProps: s } = e, c = i ?? _(n), u;
+	t[0] !== a || t[1] !== r || t[2] !== n ? (u = r ?? (a ? a(n) : m.format(n)), t[0] = a, t[1] = r, t[2] = n, t[3] = u) : u = t[3];
+	let d = u, p = h[c], g;
+	t[4] === Symbol.for("react.memo_cache_sentinel") ? (g = { fontWeight: 600 }, t[4] = g) : g = t[4];
+	let v;
+	return t[5] !== s || t[6] !== p || t[7] !== d ? (v = /* @__PURE__ */ f(l, {
+		size: "small",
+		color: p,
+		label: d,
+		sx: g,
+		...s
+	}), t[5] = s, t[6] = p, t[7] = d, t[8] = v) : v = t[8], v;
+}
+function _(e) {
+	return e > 0 ? "positive" : e < 0 ? "negative" : "neutral";
+}
+//#endregion
+//#region src/widgets/formula/note.tsx
+function v(t) {
+	let n = o(6), { children: r, TypographyProps: i } = t, a;
+	n[0] === i?.sx ? a = n[1] : (a = e({
+		color: "text.secondary",
+		m: 0
+	}, i?.sx), n[0] = i?.sx, n[1] = a);
+	let s;
+	return n[2] !== i || n[3] !== r || n[4] !== a ? (s = /* @__PURE__ */ f(d, {
+		variant: "caption",
+		component: "p",
+		...i,
+		sx: a,
+		children: r
+	}), n[2] = i, n[3] = r, n[4] = a, n[5] = s) : s = n[5], s;
+}
+//#endregion
+//#region src/widgets/formula/prefix.tsx
+function y(e) {
+	let t = o(4), { children: n, TypographyProps: r } = e, i;
+	t[0] === Symbol.for("react.memo_cache_sentinel") ? (i = {
+		fontWeight: 600,
+		color: "text.secondary",
+		lineHeight: 1
+	}, t[0] = i) : i = t[0];
+	let a;
+	return t[1] !== r || t[2] !== n ? (a = /* @__PURE__ */ f(d, {
+		variant: "h5",
+		component: "span",
+		sx: i,
+		...r,
+		children: n
+	}), t[1] = r, t[2] = n, t[3] = a) : a = t[3], a;
+}
+//#endregion
+//#region src/widgets/formula/series.tsx
+function b(e) {
+	let t = o(14), { name: n, color: r, size: i, AvatarProps: c } = e, l = i === void 0 ? 24 : i, u;
+	t[0] === n ? u = t[1] : (u = n.charAt(0).toUpperCase(), t[0] = n, t[1] = u);
+	let d = u, p = l * .5, m = r ?? "action.disabledBackground", h;
+	t[2] === r ? h = t[3] : (h = r ? (e) => e.palette.getContrastText(a(e, r) ?? r) : "text.primary", t[2] = r, t[3] = h);
+	let g;
+	t[4] !== l || t[5] !== p || t[6] !== m || t[7] !== h ? (g = {
+		width: l,
+		height: l,
+		fontSize: p,
+		fontWeight: 600,
+		bgcolor: m,
+		color: h
+	}, t[4] = l, t[5] = p, t[6] = m, t[7] = h, t[8] = g) : g = t[8];
+	let _;
+	return t[9] !== c || t[10] !== d || t[11] !== n || t[12] !== g ? (_ = /* @__PURE__ */ f(s, {
+		"aria-label": n,
+		sx: g,
+		...c,
+		children: d
+	}), t[9] = c, t[10] = d, t[11] = n, t[12] = g, t[13] = _) : _ = t[13], _;
+}
+//#endregion
+//#region src/widgets/formula/suffix.tsx
+function x(e) {
+	let t = o(4), { children: n, TypographyProps: r } = e, i;
+	t[0] === Symbol.for("react.memo_cache_sentinel") ? (i = {
+		fontWeight: 600,
+		color: "text.secondary",
+		lineHeight: 1
+	}, t[0] = i) : i = t[0];
+	let a;
+	return t[1] !== r || t[2] !== n ? (a = /* @__PURE__ */ f(d, {
+		variant: "h5",
+		component: "span",
+		sx: i,
+		...r,
+		children: n
+	}), t[1] = r, t[2] = n, t[3] = a) : a = t[3], a;
+}
+//#endregion
+//#region src/widgets/formula/value.tsx
+function S(e) {
+	let t = o(6), { children: n, color: r, TypographyProps: i } = e, a = r ?? "text.primary", s;
+	t[0] === a ? s = t[1] : (s = {
+		fontWeight: 600,
+		color: a,
+		lineHeight: 1
+	}, t[0] = a, t[1] = s);
+	let c;
+	return t[2] !== i || t[3] !== n || t[4] !== s ? (c = /* @__PURE__ */ f(d, {
+		variant: "h5",
+		component: "span",
+		sx: s,
+		...i,
+		children: n
+	}), t[2] = i, t[3] = n, t[4] = s, t[5] = c) : c = t[5], c;
+}
+//#endregion
+//#region src/widgets/formula/style.ts
+var C = {
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2,
+		alignItems: "stretch"
+	},
+	row: {
+		display: "flex",
+		alignItems: "flex-start",
+		gap: 1.5
+	},
+	body: {
+		flex: 1,
+		minWidth: 0,
+		display: "flex",
+		flexDirection: "column",
+		gap: .25
+	},
+	valueRow: {
+		display: "inline-flex",
+		alignItems: "baseline",
+		gap: .25
+	},
+	delta: {
+		alignSelf: "center",
+		flexShrink: 0
+	}
+};
+//#endregion
+//#region src/widgets/formula/formula-ui.tsx
+function w(e) {
+	let t = o(8), { items: n, formatter: r, ref: i } = e, a;
+	if (t[0] !== r || t[1] !== n) {
+		let e;
+		t[3] === r ? e = t[4] : (e = (e, t) => /* @__PURE__ */ p(c, {
+			sx: C.row,
+			children: [
+				e.series ? /* @__PURE__ */ f(b, {
+					name: e.series.name,
+					color: e.series.color
+				}) : null,
+				/* @__PURE__ */ p(c, {
+					sx: C.body,
+					children: [/* @__PURE__ */ p(c, {
+						sx: C.valueRow,
+						children: [
+							e.prefix ? /* @__PURE__ */ f(y, { children: e.prefix }) : null,
+							/* @__PURE__ */ f(S, {
+								color: e.color,
+								children: r ? r(e.value) : String(e.value)
+							}),
+							e.suffix ? /* @__PURE__ */ f(x, { children: e.suffix }) : null
+						]
+					}), e.note ? /* @__PURE__ */ f(v, { children: e.note }) : null]
+				}),
+				e.delta ? /* @__PURE__ */ f(c, {
+					sx: C.delta,
+					children: /* @__PURE__ */ f(g, {
+						value: e.delta.value,
+						label: e.delta.label,
+						severity: e.delta.severity
+					})
+				}) : null
+			]
+		}, `formula-${e.series?.name ?? `${e.prefix ?? ""}${e.value}${e.suffix ?? ""}`}-${t}`), t[3] = r, t[4] = e), a = n.map(e), t[0] = r, t[1] = n, t[2] = a;
+	} else a = t[2];
+	let s;
+	return t[5] !== i || t[6] !== a ? (s = /* @__PURE__ */ f(c, {
+		ref: i,
+		sx: C.root,
+		children: a
+	}), t[5] = i, t[6] = a, t[7] = s) : s = t[7], s;
+}
+//#endregion
+//#region src/widgets/formula/formula.tsx
+var T = Object.freeze([]), E = (e) => ({
+	data: e.data ?? T,
+	formatter: e.formatter
+});
+function D() {
+	let e = o(3), r = n(), i = t(r, E), a;
+	return e[0] !== i.data || e[1] !== i.formatter ? (a = /* @__PURE__ */ f(w, {
+		items: i.data,
+		formatter: i.formatter
+	}), e[0] = i.data, e[1] = i.formatter, e[2] = a) : a = e[2], a;
+}
+//#endregion
+//#region src/widgets/formula/skeleton.tsx
+var O = {
+	root: {
+		display: "flex",
+		gap: 3,
+		alignItems: "baseline",
+		minHeight: 64,
+		py: 1
+	},
+	block: {
+		width: 120,
+		height: 36
+	}
+};
+function k(e) {
+	let t = o(2), { count: n } = e, r = n === void 0 ? 1 : n, i;
+	return t[0] === r ? i = t[1] : (i = /* @__PURE__ */ f(c, {
+		sx: O.root,
+		children: Array.from({ length: r }).map(A)
+	}), t[0] = r, t[1] = i), i;
+}
+function A(e, t) {
+	return /* @__PURE__ */ f(u, {
+		variant: "rectangular",
+		sx: O.block
+	}, `row-${t}`);
+}
+//#endregion
+//#region src/widgets/formula/download.tsx
+function j(e) {
+	let t = [];
+	return e.getCaptureEl && t.push(r({
+		filename: e.filename,
+		getCaptureEl: e.getCaptureEl,
+		pixelRatio: e.pngPixelRatio,
+		backgroundColor: e.pngBackgroundColor
+	})), t.push(i({
+		filename: e.filename,
+		getRows: () => {
+			let t = e.getData(), n = [[
+				"series",
+				"prefix",
+				"value",
+				"suffix",
+				"note",
+				"delta"
+			]];
+			for (let e of t) n.push([
+				e.series?.name ?? "",
+				e.prefix ?? "",
+				e.value,
+				e.suffix ?? "",
+				e.note ?? "",
+				e.delta?.value ?? ""
+			]);
+			return n;
+		}
+	})), t;
+}
+//#endregion
+export { C as a, b as c, g as d, w as i, y as l, k as n, S as o, D as r, x as s, j as t, v as u };
+
+//# sourceMappingURL=formula-CdHWtepq.js.map

package/dist/formula-CdHWtepq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formula-CdHWtepq.js","names":["{\n  value,\n  label,\n  severity,\n  format,\n  ChipProps: chipProps,\n}: DeltaProps","label ?? (format ? format(value) : defaultPercentFormatter.format(value))","{ fontWeight: 600 }","<Chip\n      size='small'\n      color={SEVERITY_TO_COLOR[resolvedSeverity]}\n      label={text}\n      sx={{ fontWeight: 600 }}\n      {...chipProps}\n    />","SEVERITY_TO_COLOR[resolvedSeverity]","{ children, TypographyProps }: NoteProps","mergeSx(\n        {\n          color: 'text.secondary',\n          m: 0,\n        },\n        TypographyProps?.sx,\n      )","sx","<Typography\n      variant='caption'\n      component='p'\n      {...TypographyProps}\n      sx={mergeSx(\n        {\n          color: 'text.secondary',\n          m: 0,\n        },\n        TypographyProps?.sx,\n      )}\n    >\n      {children}\n    </Typography>","{ children, TypographyProps }: PrefixProps","{ fontWeight: 600, color: 'text.secondary', lineHeight: 1 }","<Typography\n      variant='h5'\n      component='span'\n      sx={{ fontWeight: 600, color: 'text.secondary', lineHeight: 1 }}\n      {...TypographyProps}\n    >\n      {children}\n    </Typography>","{\n  name,\n  color,\n  size = 24,\n  AvatarProps: avatarProps,\n}: SeriesProps","size = 24","name.charAt(0).toUpperCase()","color\n          ? (theme: Theme) =>\n              theme.palette.getContrastText(\n                resolveThemeColor(theme, color) ?? color,\n              )\n          : 'text.primary'","{\n        width: size,\n        height: size,\n        fontSize: size * 0.5,\n        fontWeight: 600,\n        bgcolor: color ?? 'action.disabledBackground',\n        // `getContrastText` needs a concrete colour, so the palette path is\n        // resolved here even though `bgcolor` above takes it as it comes.\n        color: color\n          ? (theme: Theme) =>\n              theme.palette.getContrastText(\n                resolveThemeColor(theme, color) ?? color,\n              )\n          : 'text.primary',\n      }","size * 0.5","color ?? 'action.disabledBackground'","<Avatar\n      aria-label={name}\n      sx={{\n        width: size,\n        height: size,\n        fontSize: size * 0.5,\n        fontWeight: 600,\n        bgcolor: color ?? 'action.disabledBackground',\n        // `getContrastText` needs a concrete colour, so the palette path is\n        // resolved here even though `bgcolor` above takes it as it comes.\n        color: color\n          ? (theme: Theme) =>\n              theme.palette.getContrastText(\n                resolveThemeColor(theme, color) ?? color,\n              )\n          : 'text.primary',\n      }}\n      {...avatarProps}\n    >\n      {letter}\n    </Avatar>","{ children, TypographyProps }: SuffixProps","{ fontWeight: 600, color: 'text.secondary', lineHeight: 1 }","<Typography\n      variant='h5'\n      component='span'\n      sx={{ fontWeight: 600, color: 'text.secondary', lineHeight: 1 }}\n      {...TypographyProps}\n    >\n      {children}\n    </Typography>","{ children, color, TypographyProps }: ValueProps","{\n        fontWeight: 600,\n        color: color ?? 'text.primary',\n        lineHeight: 1,\n      }","color ?? 'text.primary'","<Typography\n      variant='h5'\n      component='span'\n      sx={{\n        fontWeight: 600,\n        color: color ?? 'text.primary',\n        lineHeight: 1,\n      }}\n      {...TypographyProps}\n    >\n      {children}\n    </Typography>","{ items, formatter, ref }: FormulaUIProps","items.map((item, i) => (\n        // Series name is the closest stable id; fall back to the literal\n        // value (numeric KPIs rarely repeat with the same prefix/suffix).\n        <Box\n          key={`formula-${item.series?.name ?? `${item.prefix ?? ''}${item.value}${item.suffix ?? ''}`}-${i}`}\n          sx={styles.row}\n        >\n          {item.series ? (\n            <Series name={item.series.name} color={item.series.color} />\n          ) : null}\n          <Box sx={styles.body}>\n            <Box sx={styles.valueRow}>\n              {item.prefix ? <Prefix>{item.prefix}</Prefix> : null}\n              <Value color={item.color}>\n                {formatter ? formatter(item.value) : String(item.value)}\n              </Value>\n              {item.suffix ? <Suffix>{item.suffix}</Suffix> : null}\n            </Box>\n            {item.note ? <Note>{item.note}</Note> : null}\n          </Box>\n          {item.delta ? (\n            <Box sx={styles.delta}>\n              <Delta\n                value={item.delta.value}\n                label={item.delta.label}\n                severity={item.delta.severity}\n              />\n            </Box>\n          ) : null}\n        </Box>\n      ))","(item, i) => (\n        // Series name is the closest stable id; fall back to the literal\n        // value (numeric KPIs rarely repeat with the same prefix/suffix).\n        <Box\n          key={`formula-${item.series?.name ?? `${item.prefix ?? ''}${item.value}${item.suffix ?? ''}`}-${i}`}\n          sx={styles.row}\n        >\n          {item.series ? (\n            <Series name={item.series.name} color={item.series.color} />\n          ) : null}\n          <Box sx={styles.body}>\n            <Box sx={styles.valueRow}>\n              {item.prefix ? <Prefix>{item.prefix}</Prefix> : null}\n              <Value color={item.color}>\n                {formatter ? formatter(item.value) : String(item.value)}\n              </Value>\n              {item.suffix ? <Suffix>{item.suffix}</Suffix> : null}\n            </Box>\n            {item.note ? <Note>{item.note}</Note> : null}\n          </Box>\n          {item.delta ? (\n            <Box sx={styles.delta}>\n              <Delta\n                value={item.delta.value}\n                label={item.delta.label}\n                severity={item.delta.severity}\n              />\n            </Box>\n          ) : null}\n        </Box>\n      )","<Box ref={ref} sx={styles.root}>\n      {items.map((item, i) => (\n        // Series name is the closest stable id; fall back to the literal\n        // value (numeric KPIs rarely repeat with the same prefix/suffix).\n        <Box\n          key={`formula-${item.series?.name ?? `${item.prefix ?? ''}${item.value}${item.suffix ?? ''}`}-${i}`}\n          sx={styles.row}\n        >\n          {item.series ? (\n            <Series name={item.series.name} color={item.series.color} />\n          ) : null}\n          <Box sx={styles.body}>\n            <Box sx={styles.valueRow}>\n              {item.prefix ? <Prefix>{item.prefix}</Prefix> : null}\n              <Value color={item.color}>\n                {formatter ? formatter(item.value) : String(item.value)}\n              </Value>\n              {item.suffix ? <Suffix>{item.suffix}</Suffix> : null}\n            </Box>\n            {item.note ? <Note>{item.note}</Note> : null}\n          </Box>\n          {item.delta ? (\n            <Box sx={styles.delta}>\n              <Delta\n                value={item.delta.value}\n                label={item.delta.label}\n                severity={item.delta.severity}\n              />\n            </Box>\n          ) : null}\n        </Box>\n      ))}\n    </Box>","<FormulaUI items={slice.data} formatter={slice.formatter} />","data","formatter","{ count = 1 }: FormulaSkeletonProps","count = 1","<Box sx={styles.root}>\n      {Array.from({ length: count }).map((_, i) => (\n        <Skeleton key={`row-${i}`} variant='rectangular' sx={styles.block} />\n      ))}\n    </Box>","(_, i) => (\n        <Skeleton key={`row-${i}`} variant='rectangular' sx={styles.block} />\n      )"],"sources":["../src/widgets/formula/delta.tsx","../src/widgets/formula/note.tsx","../src/widgets/formula/prefix.tsx","../src/widgets/formula/series.tsx","../src/widgets/formula/suffix.tsx","../src/widgets/formula/value.tsx","../src/widgets/formula/style.ts","../src/widgets/formula/formula-ui.tsx","../src/widgets/formula/formula.tsx","../src/widgets/formula/skeleton.tsx","../src/widgets/formula/download.tsx"],"sourcesContent":["import { Chip, type ChipProps } from '@mui/material'\nimport type { DeltaSeverity } from './types'\n\nexport interface DeltaProps {\n  /** Numeric magnitude. Used for the default percent label and severity inference. */\n  value: number\n  /** Pre-formatted label override; skips the default percent formatter. */\n  label?: string\n  /**\n   * Visual treatment. When omitted it's derived from the sign of `value`:\n   * `>0 → 'positive'`, `<0 → 'negative'`, `=0 → 'neutral'`.\n   */\n  severity?: DeltaSeverity\n  /** Override the default `Intl.NumberFormat({style:'percent'})` formatter. */\n  format?: (value: number) => string\n  ChipProps?: ChipProps\n}\n\nconst defaultPercentFormatter = new Intl.NumberFormat(undefined, {\n  style: 'percent',\n  signDisplay: 'always',\n  maximumFractionDigits: 1,\n})\n\nconst SEVERITY_TO_COLOR: Record<DeltaSeverity, ChipProps['color']> = {\n  positive: 'success',\n  negative: 'error',\n  neutral: 'default',\n}\n\n/**\n * Comparative delta rendered as a small filled chip. Colour is driven by\n * `severity` (or the sign of `value`); content is `label`, the result of\n * `format(value)`, or the default percent format.\n */\nexport function Delta({\n  value,\n  label,\n  severity,\n  format,\n  ChipProps: chipProps,\n}: DeltaProps) {\n  const resolvedSeverity = severity ?? inferSeverity(value)\n  const text =\n    label ?? (format ? format(value) : defaultPercentFormatter.format(value))\n  return (\n    <Chip\n      size='small'\n      color={SEVERITY_TO_COLOR[resolvedSeverity]}\n      label={text}\n      sx={{ fontWeight: 600 }}\n      {...chipProps}\n    />\n  )\n}\n\nfunction inferSeverity(value: number): DeltaSeverity {\n  if (value > 0) return 'positive'\n  if (value < 0) return 'negative'\n  return 'neutral'\n}\n","import { Typography, type TypographyProps } from '@mui/material'\nimport type { ReactNode } from 'react'\nimport { mergeSx } from '../../components/lasso-tool/styles'\n\nexport interface NoteProps {\n  children: ReactNode\n  TypographyProps?: TypographyProps\n}\n\n/**\n * Small subdued caption rendered below a Formula value. Use for short\n * descriptive text (e.g. \"Last 7 days\", \"Excludes refunds\").\n */\nexport function Note({ children, TypographyProps }: NoteProps) {\n  return (\n    <Typography\n      variant='caption'\n      component='p'\n      {...TypographyProps}\n      sx={mergeSx(\n        {\n          color: 'text.secondary',\n          m: 0,\n        },\n        TypographyProps?.sx,\n      )}\n    >\n      {children}\n    </Typography>\n  )\n}\n","import { Typography, type TypographyProps } from '@mui/material'\nimport type { ReactNode } from 'react'\n\nexport interface PrefixProps {\n  children: ReactNode\n  TypographyProps?: TypographyProps\n}\n\n/**\n * Prefix slot for a Formula KPI — large, bold, muted (`text.secondary`).\n * Composable building block for custom formula layouts; the canonical\n * {@link FormulaUI} renders one of these per item when `prefix` is set.\n */\nexport function Prefix({ children, TypographyProps }: PrefixProps) {\n  return (\n    <Typography\n      variant='h5'\n      component='span'\n      sx={{ fontWeight: 600, color: 'text.secondary', lineHeight: 1 }}\n      {...TypographyProps}\n    >\n      {children}\n    </Typography>\n  )\n}\n","import { Avatar, type AvatarProps, type Theme } from '@mui/material'\nimport type { PaletteColor } from '../../components/types'\nimport { resolveThemeColor } from '../utils'\n\nexport interface SeriesProps {\n  /** Used for the avatar's first-letter glyph and as accessible label. */\n  name: string\n  /** Avatar background colour (any MUI palette path or CSS colour). */\n  color?: PaletteColor\n  /** Diameter in px. Default `24`. */\n  size?: number\n  AvatarProps?: AvatarProps\n}\n\n/**\n * Series indicator — circular avatar showing the first letter of `name`.\n * Background colour is `color` (consumer-supplied) or a neutral disabled\n * colour, with text colour computed for contrast against it.\n */\nexport function Series({\n  name,\n  color,\n  size = 24,\n  AvatarProps: avatarProps,\n}: SeriesProps) {\n  const letter = name.charAt(0).toUpperCase()\n  return (\n    <Avatar\n      aria-label={name}\n      sx={{\n        width: size,\n        height: size,\n        fontSize: size * 0.5,\n        fontWeight: 600,\n        bgcolor: color ?? 'action.disabledBackground',\n        // `getContrastText` needs a concrete colour, so the palette path is\n        // resolved here even though `bgcolor` above takes it as it comes.\n        color: color\n          ? (theme: Theme) =>\n              theme.palette.getContrastText(\n                resolveThemeColor(theme, color) ?? color,\n              )\n          : 'text.primary',\n      }}\n      {...avatarProps}\n    >\n      {letter}\n    </Avatar>\n  )\n}\n","import { Typography, type TypographyProps } from '@mui/material'\nimport type { ReactNode } from 'react'\n\nexport interface SuffixProps {\n  children: ReactNode\n  TypographyProps?: TypographyProps\n}\n\n/**\n * Suffix slot for a Formula KPI — large, bold, muted (`text.secondary`).\n * Composable building block for custom formula layouts; the canonical\n * {@link FormulaUI} renders one of these per item when `suffix` is set.\n */\nexport function Suffix({ children, TypographyProps }: SuffixProps) {\n  return (\n    <Typography\n      variant='h5'\n      component='span'\n      sx={{ fontWeight: 600, color: 'text.secondary', lineHeight: 1 }}\n      {...TypographyProps}\n    >\n      {children}\n    </Typography>\n  )\n}\n","import { Typography, type TypographyProps } from '@mui/material'\nimport type { ReactNode } from 'react'\nimport type { PaletteColor } from '../../components/types'\n\nexport interface ValueProps {\n  children: ReactNode\n  /** Override the default `text.primary` color — useful for sparkline tints. */\n  color?: PaletteColor\n  TypographyProps?: TypographyProps\n}\n\n/**\n * Value slot for a Formula KPI — large, bold, primary text color. Composable\n * building block for custom formula layouts; the canonical {@link FormulaUI}\n * renders one of these per item.\n */\nexport function Value({ children, color, TypographyProps }: ValueProps) {\n  return (\n    <Typography\n      variant='h5'\n      component='span'\n      sx={{\n        fontWeight: 600,\n        color: color ?? 'text.primary',\n        lineHeight: 1,\n      }}\n      {...TypographyProps}\n    >\n      {children}\n    </Typography>\n  )\n}\n","import type { SxProps, Theme } from '@mui/material'\n\nexport const styles = {\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    alignItems: 'stretch',\n  },\n  row: {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: 1.5,\n  },\n  body: {\n    flex: 1,\n    minWidth: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 0.25,\n  },\n  valueRow: {\n    display: 'inline-flex',\n    alignItems: 'baseline',\n    gap: 0.25,\n  },\n  delta: {\n    alignSelf: 'center',\n    flexShrink: 0,\n  },\n} satisfies Record<string, SxProps<Theme>>\n","import { Box } from '@mui/material'\nimport type { Ref } from 'react'\nimport type { FormulaDataItem } from './types'\nimport { Delta } from './delta'\nimport { Note } from './note'\nimport { Prefix } from './prefix'\nimport { Series } from './series'\nimport { Suffix } from './suffix'\nimport { Value } from './value'\nimport { styles } from './style'\n\nexport interface FormulaUIProps {\n  items: readonly FormulaDataItem[]\n  /** Number formatter — applied to each item's `value`. */\n  formatter?: (value: number) => string\n  /** Forwarded to the root `<Box>` so consumers can capture the DOM (PNG export). */\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * Pure presentational component for the Formula widget. Each item renders as\n * a row containing (in order): optional `Series` avatar, a body with\n * `[prefix] value [suffix]` plus optional `Note`, and an optional `Delta`\n * chip pushed to the right edge.\n *\n * For fully custom layouts, compose {@link Series}, {@link Prefix},\n * {@link Value}, {@link Suffix}, {@link Note}, and {@link Delta} directly\n * instead of passing `items`.\n */\nexport function FormulaUI({ items, formatter, ref }: FormulaUIProps) {\n  return (\n    <Box ref={ref} sx={styles.root}>\n      {items.map((item, i) => (\n        // Series name is the closest stable id; fall back to the literal\n        // value (numeric KPIs rarely repeat with the same prefix/suffix).\n        <Box\n          key={`formula-${item.series?.name ?? `${item.prefix ?? ''}${item.value}${item.suffix ?? ''}`}-${i}`}\n          sx={styles.row}\n        >\n          {item.series ? (\n            <Series name={item.series.name} color={item.series.color} />\n          ) : null}\n          <Box sx={styles.body}>\n            <Box sx={styles.valueRow}>\n              {item.prefix ? <Prefix>{item.prefix}</Prefix> : null}\n              <Value color={item.color}>\n                {formatter ? formatter(item.value) : String(item.value)}\n              </Value>\n              {item.suffix ? <Suffix>{item.suffix}</Suffix> : null}\n            </Box>\n            {item.note ? <Note>{item.note}</Note> : null}\n          </Box>\n          {item.delta ? (\n            <Box sx={styles.delta}>\n              <Delta\n                value={item.delta.value}\n                label={item.delta.label}\n                severity={item.delta.severity}\n              />\n            </Box>\n          ) : null}\n        </Box>\n      ))}\n    </Box>\n  )\n}\n","import { useWidgetId, useWidgetShallow } from '../stores'\nimport { FormulaUI } from './formula-ui'\nimport type { FormulaWidgetData } from './types'\n\ninterface FormulaSlice {\n  data: FormulaWidgetData\n  formatter?: (value: number) => string\n}\n\n// Stable empty-data sentinel — keeps the slice's `data` reference stable\n// when the underlying store value is null/undefined so the shallow-equality\n// gate in `useWidgetShallow` doesn't re-render every commit.\nconst EMPTY_DATA: FormulaWidgetData = Object.freeze([]) as FormulaWidgetData\n\nconst formulaSelector = (s: {\n  data: unknown\n  formatter?: (value: number) => string\n}): FormulaSlice => ({\n  data: (s.data ?? EMPTY_DATA) as FormulaWidgetData,\n  formatter: s.formatter,\n})\n\n/**\n * Stateful Formula bridge — reads `data` (post-pipeline) and `formatter` from\n * the per-widget store and forwards them to the pure {@link FormulaUI}. Sits\n * inside `<Widget.Provider>`. Demonstrates that the composition shell\n * (Provider, Wrapper, State) doesn't care whether the rendered child is\n * ECharts (Bar) or a custom DOM tree (Formula).\n */\nexport function Formula() {\n  const id = useWidgetId()\n  const slice = useWidgetShallow(id, formulaSelector)\n  return <FormulaUI items={slice.data} formatter={slice.formatter} />\n}\n","import { Box, Skeleton } from '@mui/material'\nimport type { SxProps, Theme } from '@mui/material'\n\nconst styles = {\n  root: {\n    display: 'flex',\n    gap: 3,\n    alignItems: 'baseline',\n    minHeight: 64,\n    py: 1,\n  },\n  block: { width: 120, height: 36 },\n} satisfies Record<string, SxProps<Theme>>\n\nexport interface FormulaSkeletonProps {\n  count?: number\n}\n\nexport function FormulaSkeleton({ count = 1 }: FormulaSkeletonProps) {\n  return (\n    <Box sx={styles.root}>\n      {Array.from({ length: count }).map((_, i) => (\n        <Skeleton key={`row-${i}`} variant='rectangular' sx={styles.block} />\n      ))}\n    </Box>\n  )\n}\n","import {\n  buildCsvDownloadItem,\n  buildPngDownloadItem,\n  type DownloadItem,\n} from '../actions/download'\nimport type { FormulaWidgetData } from './types'\n\nexport interface FormulaDownloadConfigArgs {\n  filename: string\n  getData: () => FormulaWidgetData\n  /**\n   * Optional getter for the widget's capture element (registered by\n   * `Widget.State`). When provided, a PNG item is prepended.\n   */\n  getCaptureEl?: () => HTMLElement | null\n  pngPixelRatio?: number\n  pngBackgroundColor?: string | null\n}\n\n/**\n * Builds download items for the Formula widget. Always includes a CSV item\n * with one row per KPI (`prefix`, `value`, `suffix`, `note`, `delta`).\n * When `getCaptureEl` is supplied, prepends a PNG item that rasterises the\n * captured element via `html2canvas`.\n */\nexport function createFormulaDownloadConfig(\n  args: FormulaDownloadConfigArgs,\n): DownloadItem[] {\n  const items: DownloadItem[] = []\n  if (args.getCaptureEl) {\n    items.push(\n      buildPngDownloadItem({\n        filename: args.filename,\n        getCaptureEl: args.getCaptureEl,\n        pixelRatio: args.pngPixelRatio,\n        backgroundColor: args.pngBackgroundColor,\n      }),\n    )\n  }\n  items.push(\n    buildCsvDownloadItem({\n      filename: args.filename,\n      getRows: () => {\n        const data = args.getData()\n        const rows: unknown[][] = [\n          ['series', 'prefix', 'value', 'suffix', 'note', 'delta'],\n        ]\n        for (const d of data) {\n          rows.push([\n            d.series?.name ?? '',\n            d.prefix ?? '',\n            d.value,\n            d.suffix ?? '',\n            d.note ?? '',\n            d.delta?.value ?? '',\n          ])\n        }\n        return rows\n      },\n    }),\n  )\n  return items\n}\n"],"mappings":"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"}