@keboola/design 10.1.0 → 11.0.1

package/dist/ZoomableSvg-DG9PnAm8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZoomableSvg-DG9PnAm8.js","names":[],"sources":["../src/components/ZoomableSvg/ZoomableSvg.tsx","../src/components/ZoomableSvg/exportSvg.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport DOMPurify from 'dompurify';\n\nimport { ClipboardButton } from '../../blocks/ClipboardButton';\nimport { Maximize2, Minimize2 } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Tooltip } from '../Tooltip';\n\nconst MIN_SCALE = 0.5;\nconst MAX_SCALE = 3;\nconst ZOOM_STEP = 0.1;\n\ntype Props = {\n  /** Raw SVG markup. Sanitized internally with DOMPurify (SVG profile) before rendering, so it is\n   *  safe even when it originates from user/LLM-controlled content. Non-SVG HTML is stripped. */\n  html: string;\n  copyText?: string;\n  className?: string;\n  /**\n   * Opt in to keeping `<foreignObject>` elements through sanitization. Off by\n   * default — the SVG profile drops `<foreignObject>` so no HTML subtree can\n   * survive. Only enable when the caller pre-flattens each `<foreignObject>` to\n   * bare text (the SVG profile still strips any HTML children even when the\n   * element itself is allowed). `MermaidDiagram` sets this for node/icon labels.\n   */\n  allowForeignObject?: boolean;\n  /**\n   * Extra toolbar controls, rendered between the copy and fullscreen buttons.\n   *\n   * Injected rather than built in, so export behaviour — filenames,\n   * rasterization, error reporting — stays with the consumer and this component\n   * keeps shipping in the lazy `@keboola/design/mermaid` chunk with no download\n   * dependencies of its own. Pass `ExportMenu` here. Receives the sanitized\n   * SVG so an exporter writes exactly what is on screen.\n   */\n  renderActions?: (safeSvg: string) => ReactNode;\n};\n\nexport const ZoomableSvg = ({\n  html,\n  copyText,\n  className,\n  allowForeignObject,\n  renderActions,\n}: Props) => {\n  const safeHtml = useMemo(\n    () =>\n      DOMPurify.sanitize(html, {\n        USE_PROFILES: { svg: true, svgFilters: true },\n        ...(allowForeignObject ? { ADD_TAGS: ['foreignObject'] } : {}),\n      }),\n    [html, allowForeignObject],\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [scale, setScale] = useState(1);\n  const [translate, setTranslate] = useState({ x: 0, y: 0 });\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  useEffect(() => {\n    if (!isFullscreen) return;\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.stopPropagation();\n        setIsFullscreen(false);\n      }\n    };\n    document.addEventListener('keydown', onKeyDown, { capture: true });\n    return () => document.removeEventListener('keydown', onKeyDown, { capture: true });\n  }, [isFullscreen]);\n\n  const dragRef = useRef<{\n    startX: number;\n    startY: number;\n    startTx: number;\n    startTy: number;\n  } | null>(null);\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n\n    const onWheel = (e: WheelEvent) => {\n      if (!e.ctrlKey && !e.metaKey) return;\n      e.preventDefault();\n      const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;\n      setScale((s) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, s + delta)));\n    };\n\n    el.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.removeEventListener('wheel', onWheel);\n    // Re-bind when toggling fullscreen: the portal/inline switch remounts the\n    // container element, so the listener must attach to the new node.\n  }, [isFullscreen]);\n\n  const didDragRef = useRef(false);\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.button !== 0) return;\n      e.preventDefault();\n      didDragRef.current = false;\n      dragRef.current = {\n        startX: e.clientX,\n        startY: e.clientY,\n        startTx: translate.x,\n        startTy: translate.y,\n      };\n    },\n    [translate],\n  );\n\n  const handleMouseMove = useCallback((e: React.MouseEvent) => {\n    if (!dragRef.current) return;\n    didDragRef.current = true;\n    setTranslate({\n      x: dragRef.current.startTx + e.clientX - dragRef.current.startX,\n      y: dragRef.current.startTy + e.clientY - dragRef.current.startY,\n    });\n  }, []);\n\n  const handleMouseUp = useCallback(() => {\n    dragRef.current = null;\n  }, []);\n\n  const handleReset = useCallback(() => {\n    setScale(1);\n    setTranslate({ x: 0, y: 0 });\n  }, []);\n\n  const isZoomed = Math.abs(scale - 1) > 0.001 || translate.x !== 0 || translate.y !== 0;\n\n  const handleClick = useCallback((e: React.MouseEvent) => {\n    if (didDragRef.current) {\n      e.stopPropagation();\n    }\n  }, []);\n\n  const stopPropagation = useCallback((e: React.SyntheticEvent) => {\n    e.stopPropagation();\n  }, []);\n\n  const diagramContent = (\n    <div\n      role=\"presentation\"\n      className={cn('tw:group/zoom tw:relative', isFullscreen && 'tw:h-full')}\n      onClick={handleClick}\n    >\n      <div\n        role=\"presentation\"\n        ref={containerRef}\n        className={cn(\n          'tw:overflow-hidden tw:cursor-grab tw:active:cursor-grabbing tw:p-3',\n          isFullscreen && 'tw:h-full',\n        )}\n        onMouseDown={handleMouseDown}\n        onMouseMove={handleMouseMove}\n        onMouseUp={handleMouseUp}\n        onMouseLeave={handleMouseUp}\n      >\n        <div\n          className={cn(\n            'tw:flex tw:justify-center tw:origin-center',\n            isFullscreen && 'tw:h-full tw:[&>svg]:h-full',\n          )}\n          style={{ transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})` }}\n          dangerouslySetInnerHTML={{ __html: safeHtml }}\n        />\n      </div>\n      <div\n        role=\"presentation\"\n        // `focus-within` as well as hover: the toolbar is opacity-0 but still in\n        // the tab order, so without this a keyboard user tabs through invisible\n        // controls with no visible focus ring.\n        className=\"tw:absolute tw:right-1 tw:top-1 tw:flex tw:gap-1 tw:opacity-0 tw:transition-opacity tw:focus-within:opacity-100 tw:group-hover/zoom:opacity-100\"\n        onClick={stopPropagation}\n      >\n        {isZoomed && (\n          <Tooltip tooltip=\"Reset zoom\" placement=\"top\" triggerAsChild>\n            <Button size=\"small\" variant=\"outline\" onClick={handleReset}>\n              Reset\n            </Button>\n          </Tooltip>\n        )}\n        {copyText && (\n          <ClipboardButton text={copyText} tooltip=\"Copy code\" size=\"icon-sm\" variant=\"outline\" />\n        )}\n        {renderActions?.(safeHtml)}\n        <Tooltip\n          tooltip={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n          placement=\"top\"\n          triggerAsChild\n        >\n          <Button\n            size=\"icon-sm\"\n            variant=\"outline\"\n            aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n            onClick={() => setIsFullscreen((f) => !f)}\n          >\n            {isFullscreen ? (\n              <Minimize2 className=\"tw:size-4\" />\n            ) : (\n              <Maximize2 className=\"tw:size-4\" />\n            )}\n          </Button>\n        </Tooltip>\n      </div>\n    </div>\n  );\n\n  if (isFullscreen) {\n    return createPortal(\n      <div\n        role=\"presentation\"\n        data-testid=\"zoomable-svg-fullscreen\"\n        /**\n         * Stacking contract for this overlay, which portals to `document.body`.\n         *\n         * - Sits at z-1051, the Modal/Sheet band: above page chrome.\n         * - Stays *below* the floating-panel layer (z-1055: DropdownMenu,\n         *   Popover, Select, Combobox), which portals to `document.body` too —\n         *   an overlay above it hides any menu opened from the toolbar.\n         * - `Tooltip` (z-1060) renders above, as it does over a Modal.\n         * - `SpotlightBackdrop` (z-1056) dims this overlay rather than sitting\n         *   under it — by design, since it deliberately covers the portalled\n         *   surface tier so a tour's dim can't be punched through.\n         * - An app may clamp poppers into this same band, making it a tie that\n         *   DOM order settles; Radix mounts its portal after this one.\n         */\n        className=\"tw:fixed tw:inset-0 tw:z-[1051] tw:bg-muted tw:p-4 tailwindcss-preflight\"\n        onClick={stopPropagation}\n      >\n        {diagramContent}\n      </div>,\n      document.body,\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        'tw:overflow-hidden tw:rounded-md tw:border tw:border-border tw:bg-muted',\n        className,\n      )}\n    >\n      {diagramContent}\n    </div>\n  );\n};\n","const PNG_SCALE = 2;\n\n// The root `<svg …>` tag, so the namespace check looks only at its attributes.\n// A plain `includes('xmlns=')` would also match a nested element or body text,\n// and would miss `xmlns = \"…\"` — adding a second declaration, which parsers\n// reject outright with \"Attribute xmlns redefined\".\nconst ROOT_SVG_TAG = /^<svg\\b[^>]*>/i;\nconst HAS_DEFAULT_NAMESPACE = /\\bxmlns\\s*=/i;\n\n// A standalone SVG file needs the namespace declaration; mermaid's inline output\n// omits it because an inline <svg> inherits it from the host document.\n// Trim before matching: the anchored `^<svg` misses markup that arrives with a\n// leading newline or indentation, which would emit a standalone file with no\n// namespace — unopenable in an image viewer.\nconst withSvgNamespace = (svg: string) => {\n  const trimmed = svg.trim();\n  const rootTag = trimmed.match(ROOT_SVG_TAG)?.[0];\n\n  if (!rootTag || HAS_DEFAULT_NAMESPACE.test(rootTag)) return trimmed;\n\n  return trimmed.replace(/^<svg\\b/i, '<svg xmlns=\"http://www.w3.org/2000/svg\"');\n};\n\nexport const toSvgFileContent = (svg: string) =>\n  `<?xml version=\"1.0\" encoding=\"UTF-8\"?>\\n${withSvgNamespace(svg).trim()}\\n`;\n\n// A single decimal number: `12`, `12.5`, `.5`. Deliberately stricter than\n// `[\\d.]+`, which also matches `1.2.3` — and `parseFloat` truncates that to\n// `1.2` rather than rejecting it, so a malformed value would pass as a plausible\n// one.\nconst NUMBER = String.raw`\\d+(?:\\.\\d+)?|\\.\\d+`;\n\n// `parseFloat` happily reads a relative length as a number — `\"100%\"` becomes\n// `100`, `\"2em\"` becomes `2` — and `makeResponsive` sets `width=\"100%\"` on every\n// mermaid root, so an SVG with no usable viewBox would rasterize 100px wide with\n// no error. Accept only a unitless number or an explicit `px`.\nconst PIXEL_LENGTH = new RegExp(String.raw`^\\s*(?:${NUMBER})(?:px)?\\s*$`, 'i');\n\nconst parsePixelLength = (value: string | null): number | null => {\n  if (!PIXEL_LENGTH.test(value ?? '')) return null;\n\n  const parsed = Number.parseFloat(value ?? '');\n\n  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;\n};\n\nexport const parseSvgSize = (svg: string) => {\n  const doc = new DOMParser().parseFromString(withSvgNamespace(svg), 'image/svg+xml');\n  const element = doc.documentElement;\n\n  const viewBox = element\n    .getAttribute('viewBox')\n    ?.split(/[\\s,]+/)\n    .map(Number);\n  // `> 0`, not truthiness: a negative extent is accepted by a truthy check, and\n  // negative canvas dimensions silently fall back to the 300x150 default — an\n  // export at the wrong size with no error. Falling through to width/height is\n  // the better answer, since those are usually still valid.\n  if (viewBox?.length === 4 && viewBox.every((value) => Number.isFinite(value))) {\n    const [, , width, height] = viewBox;\n    if (width !== undefined && height !== undefined && width > 0 && height > 0) {\n      return { width, height };\n    }\n  }\n\n  const width = parsePixelLength(element.getAttribute('width'));\n  const height = parsePixelLength(element.getAttribute('height'));\n\n  return width !== null && height !== null ? { width, height } : null;\n};\n\n// Resolve the themed page background so the exported PNG follows the active\n// brand and color scheme instead of a frozen literal. Falls back to `white`\n// (a CSS keyword, not a brand-locked hex) when the token is unset.\n//\n// The token holds Tailwind's bare channel triplet (\"249 250 251\") so utilities\n// can add an alpha. Canvas `fillStyle` rejects that form *silently* and keeps\n// its previous value (black), so wrap it back into rgb() before use.\nconst CHANNEL_TRIPLET = new RegExp(String.raw`^(?:${NUMBER})\\s+(?:${NUMBER})\\s+(?:${NUMBER})$`);\n\nexport const toCanvasColor = (token: string) => {\n  const trimmed = token.trim();\n  if (!trimmed) return 'white';\n\n  // Only wrap a well-formed triplet. A malformed one (`1.2.3 4 5`) would produce\n  // an invalid `rgb()` that `fillStyle` rejects silently, painting the PNG on\n  // whatever colour was set before — passing it through unwrapped at least lets\n  // a genuine CSS color value work.\n  return CHANNEL_TRIPLET.test(trimmed) ? `rgb(${trimmed})` : trimmed;\n};\n\nconst resolveBackground = () =>\n  toCanvasColor(getComputedStyle(document.documentElement).getPropertyValue('--color-background'));\n\n/**\n * Rasterize SVG markup to a PNG blob at 2x for legible text.\n *\n * The SVG is loaded as a data URL rather than a blob URL: an <img> loading SVG\n * is treated as a foreign resource, so a blob URL would taint the canvas and\n * make toBlob throw a SecurityError. A background is painted first because a\n * transparent PNG reads as unusable when pasted into a slide deck.\n */\nexport const svgToPngBlob = async (svg: string, background?: string): Promise<Blob> => {\n  const size = parseSvgSize(svg);\n  if (!size) throw new Error('Cannot determine diagram dimensions.');\n\n  const encoded = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(toSvgFileContent(svg))}`;\n\n  const image = new Image();\n  image.decoding = 'sync';\n  await new Promise<void>((resolve, reject) => {\n    image.onload = () => resolve();\n    image.onerror = () => reject(new Error('Failed to load the diagram for export.'));\n    image.src = encoded;\n  });\n\n  const canvas = document.createElement('canvas');\n  canvas.width = Math.round(size.width * PNG_SCALE);\n  canvas.height = Math.round(size.height * PNG_SCALE);\n\n  const context = canvas.getContext('2d');\n  if (!context) throw new Error('Canvas is unavailable in this browser.');\n\n  context.fillStyle = background ?? resolveBackground();\n  context.fillRect(0, 0, canvas.width, canvas.height);\n  context.drawImage(image, 0, 0, canvas.width, canvas.height);\n\n  return new Promise<Blob>((resolve, reject) => {\n    canvas.toBlob(\n      (blob) => (blob ? resolve(blob) : reject(new Error('Failed to encode the PNG.'))),\n      'image/png',\n    );\n  });\n};\n"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,YAAY;AA4BlB,MAAa,eAAe,EAC1B,MACA,UACA,WACA,oBACA,oBACW;CACX,MAAM,WAAW,cAEb,UAAU,SAAS,MAAM;EACvB,cAAc;GAAE,KAAK;GAAM,YAAY;EAAK;EAC5C,GAAI,qBAAqB,EAAE,UAAU,CAAC,eAAe,EAAE,IAAI,CAAC;CAC9D,CAAC,GACH,CAAC,MAAM,kBAAkB,CAC3B;CAEA,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CACpC,MAAM,CAAC,WAAW,gBAAgB,SAAS;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CACzD,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CAEtD,gBAAgB;EACd,IAAI,CAAC,cAAc;EACnB,MAAM,aAAa,MAAqB;GACtC,IAAI,EAAE,QAAQ,UAAU;IACtB,EAAE,gBAAgB;IAClB,gBAAgB,KAAK;GACvB;EACF;EACA,SAAS,iBAAiB,WAAW,WAAW,EAAE,SAAS,KAAK,CAAC;EACjE,aAAa,SAAS,oBAAoB,WAAW,WAAW,EAAE,SAAS,KAAK,CAAC;CACnF,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,UAAU,OAKN,IAAI;CAEd,gBAAgB;EACd,MAAM,KAAK,aAAa;EACxB,IAAI,CAAC,IAAI;EAET,MAAM,WAAW,MAAkB;GACjC,IAAI,CAAC,EAAE,WAAW,CAAC,EAAE,SAAS;GAC9B,EAAE,eAAe;GACjB,MAAM,QAAQ,EAAE,SAAS,IAAI,MAAa;GAC1C,UAAU,MAAM,KAAK,IAAI,WAAW,KAAK,IAAI,WAAW,IAAI,KAAK,CAAC,CAAC;EACrE;EAEA,GAAG,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;EACxD,aAAa,GAAG,oBAAoB,SAAS,OAAO;CAGtD,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,aAAa,OAAO,KAAK;CAE/B,MAAM,kBAAkB,aACrB,MAAwB;EACvB,IAAI,EAAE,WAAW,GAAG;EACpB,EAAE,eAAe;EACjB,WAAW,UAAU;EACrB,QAAQ,UAAU;GAChB,QAAQ,EAAE;GACV,QAAQ,EAAE;GACV,SAAS,UAAU;GACnB,SAAS,UAAU;EACrB;CACF,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,kBAAkB,aAAa,MAAwB;EAC3D,IAAI,CAAC,QAAQ,SAAS;EACtB,WAAW,UAAU;EACrB,aAAa;GACX,GAAG,QAAQ,QAAQ,UAAU,EAAE,UAAU,QAAQ,QAAQ;GACzD,GAAG,QAAQ,QAAQ,UAAU,EAAE,UAAU,QAAQ,QAAQ;EAC3D,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,kBAAkB;EACtC,QAAQ,UAAU;CACpB,GAAG,CAAC,CAAC;CAEL,MAAM,cAAc,kBAAkB;EACpC,SAAS,CAAC;EACV,aAAa;GAAE,GAAG;GAAG,GAAG;EAAE,CAAC;CAC7B,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW,KAAK,IAAI,QAAQ,CAAC,IAAI,QAAS,UAAU,MAAM,KAAK,UAAU,MAAM;CAErF,MAAM,cAAc,aAAa,MAAwB;EACvD,IAAI,WAAW,SACb,EAAE,gBAAgB;CAEtB,GAAG,CAAC,CAAC;CAEL,MAAM,kBAAkB,aAAa,MAA4B;EAC/D,EAAE,gBAAgB;CACpB,GAAG,CAAC,CAAC;CAEL,MAAM,iBACJ,qBAAC,OAAD;EACE,MAAK;EACL,WAAW,GAAG,6BAA6B,gBAAgB,WAAW;EACtE,SAAS;EAHX,UAAA,CAKE,oBAAC,OAAD;GACE,MAAK;GACL,KAAK;GACL,WAAW,GACT,sEACA,gBAAgB,WAClB;GACA,aAAa;GACb,aAAa;GACb,WAAW;GACX,cAAc;GAEd,UAAA,oBAAC,OAAD;IACE,WAAW,GACT,8CACA,gBAAgB,6BAClB;IACA,OAAO,EAAE,WAAW,aAAa,UAAU,EAAE,MAAM,UAAU,EAAE,YAAY,MAAM,GAAG;IACpF,yBAAyB,EAAE,QAAQ,SAAS;GAC7C,CAAA;EACE,CAAA,GACL,qBAAC,OAAD;GACE,MAAK;GAIL,WAAU;GACV,SAAS;GANX,UAAA;IAQG,YACC,oBAAC,SAAD;KAAS,SAAQ;KAAa,WAAU;KAAM,gBAAA;KAC5C,UAAA,oBAAC,QAAD;MAAQ,MAAK;MAAQ,SAAQ;MAAU,SAAS;MAAa,UAAA;KAErD,CAAA;IACD,CAAA;IAEV,YACC,oBAAC,iBAAD;KAAiB,MAAM;KAAU,SAAQ;KAAY,MAAK;KAAU,SAAQ;IAAW,CAAA;IAExF,gBAAgB,QAAQ;IACzB,oBAAC,SAAD;KACE,SAAS,eAAe,oBAAoB;KAC5C,WAAU;KACV,gBAAA;KAEA,UAAA,oBAAC,QAAD;MACE,MAAK;MACL,SAAQ;MACR,cAAY,eAAe,oBAAoB;MAC/C,eAAe,iBAAiB,MAAM,CAAC,CAAC;MAEvC,UAAA,eACC,oBAAC,WAAD,EAAW,WAAU,YAAa,CAAA,IAElC,oBAAC,WAAD,EAAW,WAAU,YAAa,CAAA;KAE9B,CAAA;IACD,CAAA;GACN;EACF,CAAA,CAAA;;CAGP,IAAI,cACF,OAAO,aACL,oBAAC,OAAD;EACE,MAAK;EACL,eAAY;;;;;;;;;;;;;;;EAeZ,WAAU;EACV,SAAS;EAER,UAAA;CACE,CAAA,GACL,SAAS,IACX;CAGF,OACE,oBAAC,OAAD;EACE,WAAW,GACT,2EACA,SACF;EAEC,UAAA;CACE,CAAA;AAET;;;AC3PA,MAAM,YAAY;AAMlB,MAAM,eAAe;AACrB,MAAM,wBAAwB;AAO9B,MAAM,oBAAoB,QAAgB;CACxC,MAAM,UAAU,IAAI,KAAK;CACzB,MAAM,UAAU,QAAQ,MAAM,YAAY,CAAC,GAAG;CAE9C,IAAI,CAAC,WAAW,sBAAsB,KAAK,OAAO,GAAG,OAAO;CAE5D,OAAO,QAAQ,QAAQ,YAAY,2CAAyC;AAC9E;AAEA,MAAa,oBAAoB,QAC/B,2CAA2C,iBAAiB,GAAG,CAAC,CAAC,KAAK,EAAE;AAM1E,MAAM,SAAS,OAAO,GAAG;AAMzB,MAAM,eAAe,IAAI,OAAO,OAAO,GAAG,UAAU,OAAO,eAAe,GAAG;AAE7E,MAAM,oBAAoB,UAAwC;CAChE,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE,GAAG,OAAO;CAE5C,MAAM,SAAS,OAAO,WAAW,SAAS,EAAE;CAE5C,OAAO,OAAO,SAAS,MAAM,KAAK,SAAS,IAAI,SAAS;AAC1D;AAEA,MAAa,gBAAgB,QAAgB;CAE3C,MAAM,UADM,IAAI,UAAU,CAAC,CAAC,gBAAgB,iBAAiB,GAAG,GAAG,eACjD,CAAC,CAAC;CAEpB,MAAM,UAAU,QACb,aAAa,SAAS,CAAC,EACtB,MAAM,QAAQ,CAAC,CAChB,IAAI,MAAM;CAKb,IAAI,SAAS,WAAW,KAAK,QAAQ,OAAO,UAAU,OAAO,SAAS,KAAK,CAAC,GAAG;EAC7E,MAAM,KAAK,OAAO,UAAU;EAC5B,IAAI,UAAU,KAAA,KAAa,WAAW,KAAA,KAAa,QAAQ,KAAK,SAAS,GACvE,OAAO;GAAE;GAAO;EAAO;CAE3B;CAEA,MAAM,QAAQ,iBAAiB,QAAQ,aAAa,OAAO,CAAC;CAC5D,MAAM,SAAS,iBAAiB,QAAQ,aAAa,QAAQ,CAAC;CAE9D,OAAO,UAAU,QAAQ,WAAW,OAAO;EAAE;EAAO;CAAO,IAAI;AACjE;AASA,MAAM,kBAAkB,IAAI,OAAO,OAAO,GAAG,OAAO,OAAO,SAAS,OAAO,SAAS,OAAO,GAAG;AAE9F,MAAa,iBAAiB,UAAkB;CAC9C,MAAM,UAAU,MAAM,KAAK;CAC3B,IAAI,CAAC,SAAS,OAAO;CAMrB,OAAO,gBAAgB,KAAK,OAAO,IAAI,OAAO,QAAQ,KAAK;AAC7D;AAEA,MAAM,0BACJ,cAAc,iBAAiB,SAAS,eAAe,CAAC,CAAC,iBAAiB,oBAAoB,CAAC;;;;;;;;;AAUjG,MAAa,eAAe,OAAO,KAAa,eAAuC;CACrF,MAAM,OAAO,aAAa,GAAG;CAC7B,IAAI,CAAC,MAAM,MAAM,IAAI,MAAM,sCAAsC;CAEjE,MAAM,UAAU,oCAAoC,mBAAmB,iBAAiB,GAAG,CAAC;CAE5F,MAAM,QAAQ,IAAI,MAAM;CACxB,MAAM,WAAW;CACjB,MAAM,IAAI,SAAe,SAAS,WAAW;EAC3C,MAAM,eAAe,QAAQ;EAC7B,MAAM,gBAAgB,uBAAO,IAAI,MAAM,wCAAwC,CAAC;EAChF,MAAM,MAAM;CACd,CAAC;CAED,MAAM,SAAS,SAAS,cAAc,QAAQ;CAC9C,OAAO,QAAQ,KAAK,MAAM,KAAK,QAAQ,SAAS;CAChD,OAAO,SAAS,KAAK,MAAM,KAAK,SAAS,SAAS;CAElD,MAAM,UAAU,OAAO,WAAW,IAAI;CACtC,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,wCAAwC;CAEtE,QAAQ,YAAY,cAAc,kBAAkB;CACpD,QAAQ,SAAS,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;CAClD,QAAQ,UAAU,OAAO,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;CAE1D,OAAO,IAAI,SAAe,SAAS,WAAW;EAC5C,OAAO,QACJ,SAAU,OAAO,QAAQ,IAAI,IAAI,uBAAO,IAAI,MAAM,2BAA2B,CAAC,GAC/E,WACF;CACF,CAAC;AACH"}

package/dist/charts.d.ts

@@ -1,20 +1,19 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentProps, ReactElement } from 'react';
-import { Tooltip } from 'recharts';
-
+import { ComponentProps, ReactElement } from "react";
+import { Tooltip } from "recharts";
+//#region src/blocks/Charts/ChartContainer.d.ts
 /** A length that recharts' `<ResponsiveContainer>` accepts: px number or `"NN%"`. */
 type ChartDimension = number | `${number}%`;
 type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {
-    /**
-     * Height as a px number or percentage string. Charts have no intrinsic
-     * height, so a container needs one either here or from a sized ancestor.
-     * Defaults to 300.
-     */
-    height?: ChartDimension;
-    /** Width as a px number or percentage. Defaults to `"100%"` (fills parent). */
-    width?: ChartDimension;
-    /** A single recharts chart element (`<LineChart>`, `<BarChart>`, …). */
-    children: ReactElement;
+  /**
+   * Height as a px number or percentage string. Charts have no intrinsic
+   * height, so a container needs one either here or from a sized ancestor.
+   * Defaults to 300.
+   */
+  height?: ChartDimension;
+  /** Width as a px number or percentage. Defaults to `"100%"` (fills parent). */
+  width?: ChartDimension;
+  /** A single recharts chart element (`<LineChart>`, `<BarChart>`, …). */
+  children: ReactElement;
 };
 /**
  * Responsive, brand-themed frame for a chart. Wraps the chart in recharts'
@@ -22,37 +21,39 @@ type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {
  * grid, cursor) through CSS so every chart inside inherits it. Sizing is
  * intrinsic: give it a `height` (default 300) and it fills the parent width.
  */
-declare const ChartContainer: ({ height, width, className, children, ...props }: ChartContainerProps) => react_jsx_runtime.JSX.Element;
-
+declare const ChartContainer: ({ height, width, className, children, ...props }: ChartContainerProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/blocks/Charts/ChartTooltip.d.ts
 type TooltipPayloadEntry = {
-    name?: string | number;
-    value?: string | number;
-    color?: string;
-    dataKey?: string | number;
+  name?: string | number;
+  value?: string | number;
+  color?: string;
+  dataKey?: string | number;
 };
 type ChartTooltipContentProps = {
-    active?: boolean;
-    label?: string | number;
-    payload?: TooltipPayloadEntry[];
-    /** Format a value for display (e.g. currency, percentage). */
-    valueFormatter?: (value: string | number, name: string) => string;
-    className?: string;
+  active?: boolean;
+  label?: string | number;
+  payload?: TooltipPayloadEntry[];
+  /** Format a value for display (e.g. currency, percentage). */
+  valueFormatter?: (value: string | number, name: string) => string;
+  className?: string;
 };
 /**
  * Brand-themed tooltip body. Surfaces (background, border, text) resolve from
  * semantic tokens, and each series swatch reuses the recharts-provided series
  * `color` (already a `--chart-*` token from this package's charts).
  */
-declare const ChartTooltipContent: ({ active, label, payload, valueFormatter, className, }: ChartTooltipContentProps) => react_jsx_runtime.JSX.Element | null;
+declare const ChartTooltipContent: ({ active, label, payload, valueFormatter, className }: ChartTooltipContentProps) => import("react/jsx-runtime").JSX.Element | null;
 type ChartTooltipProps = ComponentProps<typeof Tooltip> & {
-    valueFormatter?: (value: string | number, name: string) => string;
+  valueFormatter?: (value: string | number, name: string) => string;
 };
 /**
  * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.
  * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.
  */
-declare const ChartTooltip: ({ valueFormatter, ...props }: ChartTooltipProps) => react_jsx_runtime.JSX.Element;
-
+declare const ChartTooltip: ({ valueFormatter, ...props }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/blocks/Charts/theme.d.ts
 /** Number of the semantic chart token (`1`–`5`) a series maps to. */
 type ChartColorToken = 1 | 2 | 3 | 4 | 5;
 /**
@@ -60,7 +61,8 @@ type ChartColorToken = 1 | 2 | 3 | 4 | 5;
  * wraps around the five-slot palette so any number of series stays on-brand.
  */
 declare const chartTokenColor: (index: number) => string;
-
+//#endregion
+//#region src/blocks/Charts/types.d.ts
 /** A single row of chart data — an object keyed by the axis + series keys. */
 type ChartDatum = Record<string, string | number | null | undefined>;
 /**
@@ -68,63 +70,70 @@ type ChartDatum = Record<string, string | number | null | undefined>;
  * chart palette: by series order, or pinned to a specific token via `color`.
  */
 type ChartSeries = {
-    /** Key into each datum for this series' value. */
-    dataKey: string;
-    /** Human label for legend/tooltip. Defaults to `dataKey`. */
-    name?: string;
-    /** Pin to a specific palette token (1–5). Defaults to the series position. */
-    color?: ChartColorToken;
+  /** Key into each datum for this series' value. */
+  dataKey: string;
+  /** Human label for legend/tooltip. Defaults to `dataKey`. */
+  name?: string;
+  /** Pin to a specific palette token (1–5). Defaults to the series position. */
+  color?: ChartColorToken;
 };
 /**
- * One end of a value-axis domain: an explicit number, `'auto'` (let the axis
- * pick), or a data extreme with an optional padding offset.
+ * The lower end of a value-axis domain: an explicit number, `'auto'` (let the
+ * axis pick), or the data minimum with optional padding below it.
  *
- * The offset forms mirror what recharts actually parses — it pads the low end
- * DOWN (`'dataMin - 500'`) and the high end UP (`'dataMax + 500'`); the mirrored
- * spellings are silently ignored there, so they are not typed here either.
+ * Split from the upper bound rather than sharing one union, so a tuple can't be
+ * written back to front. The offset forms mirror what recharts actually parses —
+ * it pads the low end DOWN only (`'dataMin - 500'`), and `'dataMax'` as a lower
+ * bound is nonsense, so neither is typed here.
  */
-type ChartAxisBound = number | 'auto' | 'dataMin' | 'dataMax' | `dataMin - ${number}` | `dataMax + ${number}`;
+type ChartAxisLowerBound = number | 'auto' | 'dataMin' | `dataMin - ${number}`;
+/**
+ * The upper end of a value-axis domain. Mirror of {@link ChartAxisLowerBound}:
+ * recharts pads the high end UP only (`'dataMax + 500'`).
+ */
+type ChartAxisUpperBound = number | 'auto' | 'dataMax' | `dataMax + ${number}`;
 /** `[min, max]` bounds for a value axis. */
-type ChartAxisDomain = readonly [ChartAxisBound, ChartAxisBound];
+type ChartAxisDomain = readonly [ChartAxisLowerBound, ChartAxisUpperBound];
 /** Props shared by the cartesian charts (line / bar / area). */
 type CartesianChartProps = {
-    /** The rows to plot. */
-    data: ChartDatum[];
-    /** Key into each datum for the category (x) axis. */
-    xKey: string;
-    /** Series to plot. */
-    series: ChartSeries[];
-    /** Height as a px number or percentage. Defaults to 300. */
-    height?: ChartDimension;
-    /** Width as a px number or percentage. Defaults to `"100%"`. */
-    width?: ChartDimension;
-    /** Show the cartesian background grid. Defaults to `true`. */
-    showGrid?: boolean;
-    /** Show the value (y) axis. Defaults to `true`. */
-    showYAxis?: boolean;
-    /** Show a legend below the chart. Defaults to `false`. */
-    showLegend?: boolean;
-    /** Show the hover tooltip. Defaults to `true`. */
-    showTooltip?: boolean;
-    /** Format a series value for the axis and tooltip. */
-    valueFormatter?: (value: number) => string;
-    className?: string;
+  /** The rows to plot. */
+  data: ChartDatum[];
+  /** Key into each datum for the category (x) axis. */
+  xKey: string;
+  /** Series to plot. */
+  series: ChartSeries[];
+  /** Height as a px number or percentage. Defaults to 300. */
+  height?: ChartDimension;
+  /** Width as a px number or percentage. Defaults to `"100%"`. */
+  width?: ChartDimension;
+  /** Show the cartesian background grid. Defaults to `true`. */
+  showGrid?: boolean;
+  /** Show the value (y) axis. Defaults to `true`. */
+  showYAxis?: boolean;
+  /** Show a legend below the chart. Defaults to `false`. */
+  showLegend?: boolean;
+  /** Show the hover tooltip. Defaults to `true`. */
+  showTooltip?: boolean;
+  /** Format a series value for the axis and tooltip. */
+  valueFormatter?: (value: number) => string;
+  className?: string;
 };
-
+//#endregion
+//#region src/blocks/Charts/LineChart.d.ts
 type LineChartProps = CartesianChartProps & {
-    /**
-     * `[min, max]` bounds for the value (y) axis — numbers, `'auto'`, or padded
-     * data extremes (`['dataMin - 500', 'dataMax + 500']`). Defaults to a zero
-     * baseline.
-     *
-     * Only the line chart takes this. A line encodes value by POSITION, so moving
-     * the baseline rescales it without misstating it; bars and areas encode by
-     * length and filled area from the baseline, and truncating those makes the
-     * geometry lie about the ratios. Use it to compare two series of similar
-     * magnitude far from zero — not for a single series whose magnitude the
-     * reader is meant to judge.
-     */
-    yDomain?: ChartAxisDomain;
+  /**
+   * `[min, max]` bounds for the value (y) axis — numbers, `'auto'`, or padded
+   * data extremes (`['dataMin - 500', 'dataMax + 500']`). Defaults to a zero
+   * baseline.
+   *
+   * Only the line chart takes this. A line encodes value by POSITION, so moving
+   * the baseline rescales it without misstating it; bars and areas encode by
+   * length and filled area from the baseline, and truncating those makes the
+   * geometry lie about the ratios. Use it to compare two series of similar
+   * magnitude far from zero — not for a single series whose magnitude the
+   * reader is meant to judge.
+   */
+  yDomain?: ChartAxisDomain;
 };
 /**
  * A themed multi-series line chart. Each series' color comes from the semantic
@@ -142,11 +151,12 @@ type LineChartProps = CartesianChartProps & {
  * @example Two close-but-high series, on a baseline that shows the gap
  * <LineChart data={data} xKey="month" series={series} yDomain={[7000, 9000]} />
  */
-declare const LineChart: ({ data, xKey, series, height, width, className, ...chrome }: LineChartProps) => react_jsx_runtime.JSX.Element;
-
+declare const LineChart: ({ data, xKey, series, height, width, className, ...chrome }: LineChartProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/blocks/Charts/BarChart.d.ts
 type BarChartProps = CartesianChartProps & {
-    /** Stack the series into a single bar per category. Defaults to grouped. */
-    stacked?: boolean;
+  /** Stack the series into a single bar per category. Defaults to grouped. */
+  stacked?: boolean;
 };
 /**
  * A themed multi-series bar chart. Series colors come from the semantic
@@ -157,11 +167,12 @@ type BarChartProps = CartesianChartProps & {
  * @example
  * <BarChart data={data} xKey="month" series={[{ dataKey: 'revenue' }]} />
  */
-declare const BarChart: ({ data, xKey, series, height, width, className, stacked, ...chrome }: BarChartProps) => react_jsx_runtime.JSX.Element;
-
+declare const BarChart: ({ data, xKey, series, height, width, className, stacked, ...chrome }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/blocks/Charts/AreaChart.d.ts
 type AreaChartProps = CartesianChartProps & {
-    /** Stack the series into a cumulative area. Defaults to overlaid. */
-    stacked?: boolean;
+  /** Stack the series into a cumulative area. Defaults to overlaid. */
+  stacked?: boolean;
 };
 /**
  * A themed multi-series area chart. Each series is stroked and softly filled
@@ -173,28 +184,29 @@ type AreaChartProps = CartesianChartProps & {
  * @example
  * <AreaChart data={data} xKey="month" series={[{ dataKey: 'revenue' }]} />
  */
-declare const AreaChart: ({ data, xKey, series, height, width, className, stacked, ...chrome }: AreaChartProps) => react_jsx_runtime.JSX.Element;
-
+declare const AreaChart: ({ data, xKey, series, height, width, className, stacked, ...chrome }: AreaChartProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/blocks/Charts/PieChart.d.ts
 type PieChartProps = {
-    /** The rows to plot — one sector per row. */
-    data: ChartDatum[];
-    /** Key into each datum for the sector label. */
-    nameKey: string;
-    /** Key into each datum for the sector value. */
-    dataKey: string;
-    /** Render as a donut with a hole of this inner radius (px or %). */
-    innerRadius?: ChartDimension;
-    /** Height as a px number or percentage. Defaults to 300. */
-    height?: ChartDimension;
-    /** Width as a px number or percentage. Defaults to `"100%"`. */
-    width?: ChartDimension;
-    /** Show a legend below the chart. Defaults to `true`. */
-    showLegend?: boolean;
-    /** Show the hover tooltip. Defaults to `true`. */
-    showTooltip?: boolean;
-    /** Format a sector value for the tooltip. */
-    valueFormatter?: (value: number) => string;
-    className?: string;
+  /** The rows to plot — one sector per row. */
+  data: ChartDatum[];
+  /** Key into each datum for the sector label. */
+  nameKey: string;
+  /** Key into each datum for the sector value. */
+  dataKey: string;
+  /** Render as a donut with a hole of this inner radius (px or %). */
+  innerRadius?: ChartDimension;
+  /** Height as a px number or percentage. Defaults to 300. */
+  height?: ChartDimension;
+  /** Width as a px number or percentage. Defaults to `"100%"`. */
+  width?: ChartDimension;
+  /** Show a legend below the chart. Defaults to `true`. */
+  showLegend?: boolean;
+  /** Show the hover tooltip. Defaults to `true`. */
+  showTooltip?: boolean;
+  /** Format a sector value for the tooltip. */
+  valueFormatter?: (value: number) => string;
+  className?: string;
 };
 /**
  * A themed pie / donut chart. Each sector cycles through the semantic
@@ -205,6 +217,7 @@ type PieChartProps = {
  * @example
  * <PieChart data={data} nameKey="engine" dataKey="rows" innerRadius="60%" />
  */
-declare const PieChart: ({ data, nameKey, dataKey, innerRadius, height, width, className, showLegend, showTooltip, valueFormatter, }: PieChartProps) => react_jsx_runtime.JSX.Element;
-
-export { AreaChart, type AreaChartProps, BarChart, type BarChartProps, type CartesianChartProps, type ChartAxisBound, type ChartAxisDomain, type ChartColorToken, ChartContainer, type ChartContainerProps, type ChartDatum, type ChartDimension, type ChartSeries, ChartTooltip, ChartTooltipContent, type ChartTooltipProps, LineChart, type LineChartProps, PieChart, type PieChartProps, chartTokenColor };
+declare const PieChart: ({ data, nameKey, dataKey, innerRadius, height, width, className, showLegend, showTooltip, valueFormatter }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { AreaChart, type AreaChartProps, BarChart, type BarChartProps, type CartesianChartProps, type ChartAxisDomain, type ChartAxisLowerBound, type ChartAxisUpperBound, type ChartColorToken, ChartContainer, type ChartContainerProps, type ChartDatum, type ChartDimension, type ChartSeries, ChartTooltip, ChartTooltipContent, type ChartTooltipProps, LineChart, type LineChartProps, PieChart, type PieChartProps, chartTokenColor };
+//# sourceMappingURL=charts.d.ts.map