@keboola/design 11.2.0 → 11.4.0

package/dist/flint.js

@@ -0,0 +1,212 @@
+import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
+import { ZoomableSvg } from "./ZoomableSvg-BWnDkR61.js";
+import { useThemeAttributes } from "./themeTokens-D70HeNVF.js";
+import { SERIES_TOKENS, createVegaColorResolver, vegaRgb, vegaTheme } from "./vegaTheme-DfoEQhOy.js";
+import { DiagramSource, makeResponsive } from "./svgTransforms-C9njt92h.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/blocks/FlintChart/flintTheme.ts
+/**
+* How the second palette tier (series 6-10) is derived from the core hues.
+*
+* - Each core hue is pushed *away* from its own surface, so the tier stays
+*   in-family but reads as a distinct series: darkened on light, lightened on
+*   dark. A single "multiply the channels" rule would darken in both, which on
+*   a dark surface moves toward the backdrop — measured, that drops contrast
+*   from ~6.7:1 to ~3.7:1, while lightening raises it to ~9:1.
+* - `amount` is the fraction of the distance travelled toward black (light) or
+*   white (dark).
+*/
+const TIER_TWO_SHIFT = {
+	light: {
+		towards: 0,
+		amount: .38
+	},
+	dark: {
+		towards: 255,
+		amount: .35
+	}
+};
+/**
+* Move an `rgb()` string's channels a fraction of the way toward `towards`
+* (0 = black, 255 = white). Returns the input unchanged if it is not that shape.
+*/
+const shiftChannels = (colour, towards, amount) => {
+	const channels = colour.match(/\d+/g);
+	if (!channels || channels.length < 3) return colour;
+	const shifted = channels.slice(0, 3).map((c) => Math.round(Number(c) + (towards - Number(c)) * amount));
+	return vegaRgb(shifted.join(" "));
+};
+/**
+* Put the design system's categorical chart palette on a Flint input.
+*
+* Series colours are resolved by flint itself during assembly (they land in the
+* Vega-Lite `color` scale's `range`), so unlike the chrome in `vegaTheme` they
+* cannot be set through the compile `config` — they ride `theme_spec.ink.series`
+* on the input instead.
+*
+* `--chart-1..5` is the decorative palette the recharts wrappers in
+* `@keboola/design/charts` already use, so a Flint chart now matches the rest of
+* the platform's data-viz, follows the colour scheme, and re-skins with a brand
+* that overrides `colors.chart` / `colorsDark.chart`.
+*
+* An author-supplied `theme_spec` wins: a fence that names a Flint house (or its
+* own spec) asked for that look deliberately, so it is passed through untouched.
+*
+* `null` is not such a spec. The input is `JSON.parse`d model output, where
+* `"theme_spec": null` is valid JSON, and flint dereferences the value while
+* assembling (`reading 'extends'`) — so leaving it in place throws and the chart
+* falls back to raw source. It is replaced, exactly like a missing one.
+*/
+const withFlintSeriesPalette = (input, scheme) => {
+	if (input.theme_spec !== void 0 && input.theme_spec !== null) return input;
+	const token = createVegaColorResolver(scheme);
+	const categorical = SERIES_TOKENS.map((name) => token(name));
+	return {
+		...input,
+		theme_spec: { ink: {
+			surface: { canvas: token("card") },
+			series: {
+				categorical,
+				categoricalExtended: [...categorical, ...categorical.map((colour) => shiftChannels(colour, TIER_TWO_SHIFT[scheme].towards, TIER_TWO_SHIFT[scheme].amount))],
+				overflow: token("muted-foreground"),
+				sequential: {
+					stops: [token("accent"), token("chart-1")],
+					space: "lab",
+					endpointsAgainstSurface: true
+				}
+			}
+		} }
+	};
+};
+//#endregion
+//#region src/blocks/FlintChart/renderFlintSvg.ts
+/**
+* Compile a Flint `ChartAssemblyInput` to a static SVG string.
+*
+* - `assembleVegaLite` returns a Vega-Lite spec carrying `_`-prefixed internal
+*   hint keys (`_width`, `_options`, `_transform`, …) that are not part of the
+*   Vega-Lite schema — they are stripped before compiling.
+* - `config` (the scheme-following theme) rides the compile options; flint's
+*   spec-side config sets no colours, so the two cannot conflict on merge.
+* - The Vega view renders headless (`renderer: 'none'`); nothing mounts to the
+*   DOM, `toSVG()` is the only output.
+*/
+const renderFlintSvg = async (runtime, input, config) => {
+	const assembled = runtime.assembleVegaLite(input);
+	const vlSpec = Object.fromEntries(Object.entries(assembled).filter(([key]) => !key.startsWith("_")));
+	const { spec } = runtime.vegaLite.compile(vlSpec, { config });
+	const view = new runtime.vega.View(runtime.vega.parse(spec), { renderer: "none" });
+	try {
+		await view.runAsync();
+		return await view.toSVG();
+	} finally {
+		view.finalize();
+	}
+};
+//#endregion
+//#region src/blocks/FlintChart/FlintChart.tsx
+let runtimePromise = null;
+const getFlintRuntime = () => {
+	if (!runtimePromise) runtimePromise = Promise.all([
+		import("flint-chart/vegalite"),
+		import("vega"),
+		import("vega-lite")
+	]).then(([flint, vega, vegaLite]) => ({
+		assembleVegaLite: flint.assembleVegaLite,
+		vega,
+		vegaLite
+	})).catch((err) => {
+		runtimePromise = null;
+		throw err;
+	});
+	return runtimePromise;
+};
+const RENDER_DEBOUNCE_MS = 300;
+const MAX_SOURCE_CHARS = 2e5;
+const MAX_CACHED_CHARTS = 24;
+const svgCache = /* @__PURE__ */ new Map();
+const cacheSvg = (key, svg) => {
+	if (!svgCache.has(key) && svgCache.size >= MAX_CACHED_CHARTS) {
+		const oldest = svgCache.keys().next();
+		if (!oldest.done) svgCache.delete(oldest.value);
+	}
+	svgCache.set(key, svg);
+};
+const chartCacheKey = (code, themeKey) => `${themeKey}\n${code}`;
+const prevThemeKeyOf = (key) => key.slice(0, key.indexOf("\n"));
+const FlintChart = ({ code, renderActions }) => {
+	const { scheme, cacheKey: themeKey } = useThemeAttributes();
+	const cacheKey = chartCacheKey(code, themeKey);
+	const [svg, setSvg] = useState(() => svgCache.get(cacheKey) ?? null);
+	const [renderFailed, setRenderFailed] = useState(false);
+	const [prevKey, setPrevKey] = useState(cacheKey);
+	const [prevCode, setPrevCode] = useState(code);
+	if (cacheKey !== prevKey) {
+		const cached = svgCache.get(cacheKey);
+		const sameThemeStillStreaming = themeKey === prevThemeKeyOf(prevKey) && code.startsWith(prevCode);
+		setPrevKey(cacheKey);
+		setPrevCode(code);
+		if (cached) setSvg(cached);
+		else if (!sameThemeStillStreaming) setSvg(null);
+		setRenderFailed(false);
+	}
+	useEffect(() => {
+		if (svgCache.has(cacheKey)) return;
+		let cancelled = false;
+		let graceTimer;
+		const debounceTimer = setTimeout(() => {
+			if (code.length > MAX_SOURCE_CHARS) {
+				console.error(`[FlintChart] source exceeds ${MAX_SOURCE_CHARS} characters (${code.length}); not rendering`);
+				setSvg(null);
+				setRenderFailed(true);
+				return;
+			}
+			let input;
+			try {
+				input = JSON.parse(code);
+			} catch (err) {
+				graceTimer = setTimeout(() => {
+					console.debug("[FlintChart] source never became parseable JSON:", err);
+					setSvg(null);
+					setRenderFailed(true);
+				}, 1200);
+				return;
+			}
+			getFlintRuntime().then(async (runtime) => {
+				if (cancelled) return;
+				const svgOutput = makeResponsive(await renderFlintSvg(runtime, withFlintSeriesPalette(input, scheme), vegaTheme(scheme)));
+				if (cancelled) return;
+				cacheSvg(cacheKey, svgOutput);
+				setSvg(svgOutput);
+				setRenderFailed(false);
+			}).catch((err) => {
+				if (cancelled) return;
+				console.error("[FlintChart] render failed:", err);
+				setSvg(null);
+				setRenderFailed(true);
+			});
+		}, RENDER_DEBOUNCE_MS);
+		return () => {
+			cancelled = true;
+			clearTimeout(debounceTimer);
+			if (graceTimer) clearTimeout(graceTimer);
+		};
+	}, [
+		cacheKey,
+		code,
+		scheme
+	]);
+	if (renderFailed) return /* @__PURE__ */ jsx(DiagramSource, { code });
+	if (svg) return /* @__PURE__ */ jsx(ZoomableSvg, {
+		html: svg,
+		copyText: `\`\`\`flint\n${code}\n\`\`\``,
+		className: "tw:my-3",
+		renderActions
+	}, svg);
+	return /* @__PURE__ */ jsx(DiagramSkeleton, {});
+};
+//#endregion
+export { FlintChart };
+
+//# sourceMappingURL=flint.js.map

package/dist/flint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flint.js","names":[],"sources":["../src/blocks/FlintChart/flintTheme.ts","../src/blocks/FlintChart/renderFlintSvg.ts","../src/blocks/FlintChart/FlintChart.tsx"],"sourcesContent":["import type { ChartAssemblyInput } from 'flint-chart';\n\nimport type { ResolvedColorScheme } from '../../components/ThemeProvider/types';\nimport { createVegaColorResolver, SERIES_TOKENS, vegaRgb } from '../../vega/vegaTokens';\n\n/**\n * How the second palette tier (series 6-10) is derived from the core hues.\n *\n * - Each core hue is pushed *away* from its own surface, so the tier stays\n *   in-family but reads as a distinct series: darkened on light, lightened on\n *   dark. A single \"multiply the channels\" rule would darken in both, which on\n *   a dark surface moves toward the backdrop — measured, that drops contrast\n *   from ~6.7:1 to ~3.7:1, while lightening raises it to ~9:1.\n * - `amount` is the fraction of the distance travelled toward black (light) or\n *   white (dark).\n */\nconst TIER_TWO_SHIFT = {\n  light: { towards: 0, amount: 0.38 },\n  dark: { towards: 255, amount: 0.35 },\n} as const;\n\n/**\n * Move an `rgb()` string's channels a fraction of the way toward `towards`\n * (0 = black, 255 = white). Returns the input unchanged if it is not that shape.\n */\nconst shiftChannels = (colour: string, towards: number, amount: number): string => {\n  const channels = colour.match(/\\d+/g);\n  if (!channels || channels.length < 3) return colour;\n  const shifted = channels\n    .slice(0, 3)\n    .map((c) => Math.round(Number(c) + (towards - Number(c)) * amount));\n  return vegaRgb(shifted.join(' '));\n};\n\n/**\n * Put the design system's categorical chart palette on a Flint input.\n *\n * Series colours are resolved by flint itself during assembly (they land in the\n * Vega-Lite `color` scale's `range`), so unlike the chrome in `vegaTheme` they\n * cannot be set through the compile `config` — they ride `theme_spec.ink.series`\n * on the input instead.\n *\n * `--chart-1..5` is the decorative palette the recharts wrappers in\n * `@keboola/design/charts` already use, so a Flint chart now matches the rest of\n * the platform's data-viz, follows the colour scheme, and re-skins with a brand\n * that overrides `colors.chart` / `colorsDark.chart`.\n *\n * An author-supplied `theme_spec` wins: a fence that names a Flint house (or its\n * own spec) asked for that look deliberately, so it is passed through untouched.\n *\n * `null` is not such a spec. The input is `JSON.parse`d model output, where\n * `\"theme_spec\": null` is valid JSON, and flint dereferences the value while\n * assembling (`reading 'extends'`) — so leaving it in place throws and the chart\n * falls back to raw source. It is replaced, exactly like a missing one.\n */\nexport const withFlintSeriesPalette = (\n  input: ChartAssemblyInput,\n  scheme: ResolvedColorScheme,\n): ChartAssemblyInput => {\n  if (input.theme_spec !== undefined && input.theme_spec !== null) return input;\n\n  const token = createVegaColorResolver(scheme);\n  const categorical = SERIES_TOKENS.map((name) => token(name));\n\n  return {\n    ...input,\n    theme_spec: {\n      ink: {\n        // `endpointsAgainstSurface` below needs to know what the chart sits on.\n        surface: { canvas: token('card') },\n        series: {\n          categorical,\n          // Past five series flint drops `categorical` wholesale for its own\n          // `tableau10` — brand-blind and scheme-blind — so a six-region or\n          // seven-month split would silently stop following the theme. The\n          // extended set keeps those on our hues: a second tier shifted away\n          // from the surface (darker on light, lighter on dark, per\n          // `TIER_TWO_SHIFT`), distinct from the core five but the same family.\n          categoricalExtended: [\n            ...categorical,\n            ...categorical.map((colour) =>\n              shiftChannels(colour, TIER_TWO_SHIFT[scheme].towards, TIER_TWO_SHIFT[scheme].amount),\n            ),\n          ],\n          // The tail past even the extended set.\n          overflow: token('muted-foreground'),\n          // A quantitative `color` field takes this ramp instead of the\n          // categorical set. Without it flint synthesises `[black, series[0]]`,\n          // which puts pure black at the low end in *both* schemes — invisible\n          // cells on a dark surface.\n          sequential: {\n            stops: [token('accent'), token('chart-1')],\n            space: 'lab',\n            endpointsAgainstSurface: true,\n          },\n        },\n      },\n    },\n  };\n};\n","import type { ChartAssemblyInput } from 'flint-chart';\nimport type { assembleVegaLite } from 'flint-chart/vegalite';\nimport type * as vega from 'vega';\nimport type * as vegaLite from 'vega-lite';\nimport type { Config, TopLevelSpec } from 'vega-lite';\n\n// The subset of the lazily imported modules the render pipeline needs. Kept as\n// a parameter (not module state) so the pipeline is unit-testable with a fake\n// runtime, without mocking dynamic imports.\nexport type FlintRuntime = {\n  assembleVegaLite: typeof assembleVegaLite;\n  vega: Pick<typeof vega, 'View' | 'parse'>;\n  vegaLite: Pick<typeof vegaLite, 'compile'>;\n};\n\n/**\n * Compile a Flint `ChartAssemblyInput` to a static SVG string.\n *\n * - `assembleVegaLite` returns a Vega-Lite spec carrying `_`-prefixed internal\n *   hint keys (`_width`, `_options`, `_transform`, …) that are not part of the\n *   Vega-Lite schema — they are stripped before compiling.\n * - `config` (the scheme-following theme) rides the compile options; flint's\n *   spec-side config sets no colours, so the two cannot conflict on merge.\n * - The Vega view renders headless (`renderer: 'none'`); nothing mounts to the\n *   DOM, `toSVG()` is the only output.\n */\nexport const renderFlintSvg = async (\n  runtime: FlintRuntime,\n  input: ChartAssemblyInput,\n  config: Config,\n): Promise<string> => {\n  const assembled: Record<string, unknown> = runtime.assembleVegaLite(input);\n  // `assembleVegaLite` is typed loosely upstream; once the hint keys are gone\n  // the remainder is the Vega-Lite spec `compile` expects, which TypeScript\n  // cannot see through the untyped boundary — hence the assertion.\n  const vlSpec = Object.fromEntries(\n    Object.entries(assembled).filter(([key]) => !key.startsWith('_')),\n  ) as unknown as TopLevelSpec;\n  const { spec } = runtime.vegaLite.compile(vlSpec, { config });\n  const view = new runtime.vega.View(runtime.vega.parse(spec), { renderer: 'none' });\n  try {\n    await view.runAsync();\n    return await view.toSVG();\n  } finally {\n    view.finalize();\n  }\n};\n","import { useEffect, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { ChartAssemblyInput } from 'flint-chart';\n\nimport { useThemeAttributes } from '../../components/ThemeProvider/useThemeAttributes';\nimport { ZoomableSvg } from '../../components/ZoomableSvg';\nimport { vegaTheme } from '../../vega/vegaTheme';\nimport { DiagramSkeleton } from '../DiagramShared/DiagramSkeleton';\nimport { DiagramSource } from '../DiagramShared/DiagramSource';\nimport { makeResponsive } from '../DiagramShared/svgTransforms';\n\nimport { withFlintSeriesPalette } from './flintTheme';\nimport type { FlintRuntime } from './renderFlintSvg';\nimport { renderFlintSvg } from './renderFlintSvg';\n\nlet runtimePromise: Promise<FlintRuntime> | null = null;\n\n// One memoized promise for the heavy chart stack (flint-chart + vega +\n// vega-lite), reset on failure so a transient chunk-load error can retry on the\n// next render — mirrors `getMermaid()` in `MermaidDiagram`.\nconst getFlintRuntime = (): Promise<FlintRuntime> => {\n  if (!runtimePromise) {\n    runtimePromise = Promise.all([\n      import('flint-chart/vegalite'),\n      import('vega'),\n      import('vega-lite'),\n    ])\n      .then(([flint, vega, vegaLite]) => ({\n        assembleVegaLite: flint.assembleVegaLite,\n        vega,\n        vegaLite,\n      }))\n      .catch((err) => {\n        runtimePromise = null;\n        throw err;\n      });\n  }\n  return runtimePromise;\n};\n\nconst RENDER_DEBOUNCE_MS = 300;\n\n// No prefix of a JSON document parses, so while a ```flint fence streams in the\n// source is unparseable in exactly the same way a broken one is. Unparseable\n// source is treated as still-streaming (skeleton stays up) until it has been\n// unchanged this long — only then is it shown as raw source.\nconst PARSE_GRACE_MS = 1500;\n\n// Ceiling on the fence source, in characters. `JSON.parse` plus vega's compile\n// and layout are synchronous, so an oversized payload — a model dumping a raw\n// table into the block — would block the main thread and freeze the chat. The\n// prompt caps inline data at ~50 rows; this sits far above a legitimate spec of\n// that size while still refusing anything pathological.\nconst MAX_SOURCE_CHARS = 200_000;\n\n// Module-level SVG cache — persists across component remounts (e.g. tab switches\n// that cause React to remount the tree). The chart chrome colours are baked into\n// the markup, so the key is the code *plus* the theme key (scheme + brand): the\n// same spec is a different SVG under a different colour scheme or brand.\n// Values are stored already `makeResponsive`d, so the string identity is stable\n// and ZoomableSvg's sanitize memo never re-runs for an unchanged chart.\n//\n// Bounded, and evicted oldest-first: a vega SVG is mark-per-datum, so entries run\n// to hundreds of KB, and a long chat visits many distinct charts. `Map` iterates\n// in insertion order, so the first key is the oldest.\nconst MAX_CACHED_CHARTS = 24;\nconst svgCache = new Map<string, string>();\n\nconst cacheSvg = (key: string, svg: string): void => {\n  // Overwriting an existing key adds no entry, so it must not evict one — two\n  // instances of the same chart both missing the cache and both writing would\n  // otherwise cost an unrelated chart its slot.\n  if (!svgCache.has(key) && svgCache.size >= MAX_CACHED_CHARTS) {\n    const oldest = svgCache.keys().next();\n    if (!oldest.done) svgCache.delete(oldest.value);\n  }\n  svgCache.set(key, svg);\n};\n\nconst chartCacheKey = (code: string, themeKey: string): string => `${themeKey}\\n${code}`;\n\n// The theme half of a cache key — used to tell \"same theme, more source\" (a spec\n// still streaming) from a theme/brand switch, which must not keep a stale chart.\nconst prevThemeKeyOf = (key: string): string => key.slice(0, key.indexOf('\\n'));\n\ntype Props = {\n  /** Raw source of a ```flint fence — a flint-chart `ChartAssemblyInput` as pure JSON\n   *  (`data.values` rows, optional `semantic_types`, and a `chart_spec` naming the\n   *  chartType and encodings). Rendered through the Vega-Lite backend. */\n  code: string;\n  /** Extra toolbar controls (e.g. an `ExportMenu`), forwarded to `ZoomableSvg`.\n   *  Receives the sanitized SVG. Omit to keep the default toolbar. */\n  renderActions?: (safeSvg: string) => ReactNode;\n};\n\nexport const FlintChart = ({ code, renderActions }: Props) => {\n  // Re-renders whenever the active colour scheme or brand changes, so the chart\n  // chrome is re-rendered in the new palette instead of staying a light island\n  // on a dark page — same contract as MermaidDiagram.\n  const { scheme, cacheKey: themeKey } = useThemeAttributes();\n  const cacheKey = chartCacheKey(code, themeKey);\n\n  const [svg, setSvg] = useState<string | null>(() => svgCache.get(cacheKey) ?? null);\n  const [renderFailed, setRenderFailed] = useState(false);\n\n  // Synchronously reset stale state when the code or the theme changes, to avoid\n  // a one-frame flash.\n  //\n  // A cache hit is applied immediately. On a miss the previous SVG is dropped\n  // unless *only* the tail of the source grew — i.e. the same spec still\n  // streaming in, where holding the last good chart avoids a skeleton flicker\n  // between chunks. Anything else (a different spec, or a new theme/brand) must\n  // clear: the colours are baked into the markup, so keeping it would show a\n  // light chart on a dark page, and keeping a chart for a spec that is no longer\n  // on screen is simply wrong.\n  const [prevKey, setPrevKey] = useState(cacheKey);\n  const [prevCode, setPrevCode] = useState(code);\n  if (cacheKey !== prevKey) {\n    const cached = svgCache.get(cacheKey);\n    const sameThemeStillStreaming =\n      themeKey === prevThemeKeyOf(prevKey) && code.startsWith(prevCode);\n    setPrevKey(cacheKey);\n    setPrevCode(code);\n    if (cached) setSvg(cached);\n    else if (!sameThemeStillStreaming) setSvg(null);\n    setRenderFailed(false);\n  }\n\n  useEffect(() => {\n    if (svgCache.has(cacheKey)) return;\n\n    let cancelled = false;\n    let graceTimer: ReturnType<typeof setTimeout> | undefined;\n\n    const debounceTimer = setTimeout(() => {\n      if (code.length > MAX_SOURCE_CHARS) {\n        // Not a streaming artifact — a fence this size never becomes renderable,\n        // so fail straight to the source instead of waiting out the grace period.\n        console.error(\n          `[FlintChart] source exceeds ${MAX_SOURCE_CHARS} characters (${code.length}); not rendering`,\n        );\n        setSvg(null);\n        setRenderFailed(true);\n        return;\n      }\n\n      let input: ChartAssemblyInput;\n      try {\n        input = JSON.parse(code);\n      } catch (err) {\n        // Likely a fence still streaming — declare failure (and log the parse\n        // error) only if the code is still unchanged when the grace period ends.\n        graceTimer = setTimeout(() => {\n          console.debug('[FlintChart] source never became parseable JSON:', err);\n          setSvg(null);\n          setRenderFailed(true);\n        }, PARSE_GRACE_MS - RENDER_DEBOUNCE_MS);\n        return;\n      }\n\n      getFlintRuntime()\n        .then(async (runtime) => {\n          if (cancelled) return;\n          // Theme resolved at render time, off the live CSS variables — the\n          // scheme comes out of the same read as the cache key, so the palette\n          // can never be resolved under one scheme and cached under the other.\n          const svgOutput = makeResponsive(\n            await renderFlintSvg(runtime, withFlintSeriesPalette(input, scheme), vegaTheme(scheme)),\n          );\n          if (cancelled) return;\n          cacheSvg(cacheKey, svgOutput);\n          setSvg(svgOutput);\n          setRenderFailed(false);\n        })\n        .catch((err) => {\n          if (cancelled) return;\n          console.error('[FlintChart] render failed:', err);\n          setSvg(null);\n          setRenderFailed(true);\n        });\n    }, RENDER_DEBOUNCE_MS);\n\n    return () => {\n      cancelled = true;\n      clearTimeout(debounceTimer);\n      if (graceTimer) clearTimeout(graceTimer);\n    };\n  }, [cacheKey, code, scheme]);\n\n  if (renderFailed) {\n    return <DiagramSource code={code} />;\n  }\n\n  if (svg) {\n    return (\n      <ZoomableSvg\n        // Keyed by the rendered SVG, not the source: while the same fence is\n        // still streaming the chart is deliberately held (see above), and keying\n        // on `code` would remount it on every chunk — dropping the reader's\n        // zoom/pan and re-running the DOMPurify pass over an identical chart.\n        key={svg}\n        html={svg}\n        copyText={`\\`\\`\\`flint\\n${code}\\n\\`\\`\\``}\n        className=\"tw:my-3\"\n        renderActions={renderActions}\n      />\n    );\n  }\n\n  return <DiagramSkeleton />;\n};\n"],"mappings":"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"}