@keboola/design 9.0.0 → 10.1.0

package/dist/mermaid.js

@@ -1,1131 +1,10 @@
-import { createContext, useId, useState, useRef, useEffect, useMemo, useCallback, use } from 'react';
-import { renderMermaidSVG } from 'beautiful-mermaid';
-import colors from '@keboola/tailwind-config/colors';
-import { createPortal } from 'react-dom';
-import DOMPurify from 'dompurify';
-import { Root, Slottable } from '@radix-ui/react-slot';
-import { Minimize2, Maximize2, Loader2, Copy } from 'lucide-react';
-import { clsx } from 'clsx';
-import { extendTailwindMerge } from 'tailwind-merge';
-import { Root as Root$1, Trigger, Portal, Content } from '@radix-ui/react-tooltip';
-import { cva } from 'class-variance-authority';
-import { keboolaLegacySidebar, keboolaLegacyTopnav } from '@keboola/brand-registry';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-// src/blocks/MermaidDiagram/MermaidDiagram.tsx
-var twMerge = extendTailwindMerge({
-  prefix: "tw"
-});
-var cn = (...classes) => twMerge(clsx(...classes));
-
-// src/utils/copyToClipboard.ts
-var copyToClipboard = (text) => {
-  return navigator.clipboard.writeText(text);
-};
-
-// src/constants/keyCodes.ts
-var keyCodes = {
-  ENTER: "Enter",
-  SPACE: " "
-};
-
-// src/components/ThemeProvider/utils.ts
-var createTheme = (brand) => ({
-  id: brand.id,
-  name: brand.name,
-  shell: brand.shell,
-  logo: brand.logo
-});
-
-// src/components/ThemeProvider/defaults.ts
-[keboolaLegacySidebar.id, keboolaLegacyTopnav.id];
-var DEFAULT_COLOR_SCHEME = "light";
-var DEFAULT_BRAND_ID = "design-system";
-var defaultBrand = {
-  id: DEFAULT_BRAND_ID,
-  name: "Design System",
-  shell: "sidebar"};
-var defaultTheme = createTheme(defaultBrand);
-
-// src/components/ThemeProvider/context.tsx
-var noop = () => void 0;
-var defaultContext = {
-  scheme: DEFAULT_COLOR_SCHEME,
-  resolvedScheme: DEFAULT_COLOR_SCHEME,
-  setScheme: noop,
-  brandId: defaultTheme.id,
-  setBrand: noop,
-  themes: [defaultTheme],
-  currentTheme: defaultTheme
-};
-createContext(defaultContext);
-var ArgoDesignContext = createContext(true);
-var useArgoDesign = () => use(ArgoDesignContext);
-var tooltipVariants = cva(
-  [
-    "tailwindcss-preflight",
-    "tw:inline-block",
-    "tw:break-anywhere",
-    "tw:max-h-96",
-    "tw:overflow-y-auto",
-    "tw:z-[1060]",
-    // legacy (dark) chrome — default
-    "tw:rounded",
-    "tw:bg-neutral-800",
-    "tw:text-white",
-    // argo chrome overrides — semantic floating-panel tokens
-    "tw:data-[argo=true]:rounded-2xl",
-    "tw:data-[argo=true]:border",
-    "tw:data-[argo=true]:border-solid",
-    "tw:data-[argo=true]:border-border",
-    "tw:data-[argo=true]:bg-popover",
-    "tw:data-[argo=true]:text-popover-foreground",
-    "tw:data-[argo=true]:shadow-md",
-    // argo open animation
-    "tw:data-[argo=true]:data-[state=delayed-open]:animate-in",
-    "tw:data-[argo=true]:data-[state=instant-open]:animate-in",
-    "tw:data-[argo=true]:data-[state=delayed-open]:fade-in-0",
-    "tw:data-[argo=true]:data-[state=instant-open]:fade-in-0",
-    "tw:data-[argo=true]:data-[state=delayed-open]:zoom-in-95",
-    "tw:data-[argo=true]:data-[state=instant-open]:zoom-in-95",
-    // argo closed animation
-    "tw:data-[argo=true]:data-[state=closed]:animate-out",
-    "tw:data-[argo=true]:data-[state=closed]:fade-out-0",
-    "tw:data-[argo=true]:data-[state=closed]:zoom-out-95",
-    // argo position animation
-    "tw:data-[argo=true]:data-[side=bottom]:slide-in-from-top-2",
-    "tw:data-[argo=true]:data-[side=left]:slide-in-from-right-2",
-    "tw:data-[argo=true]:data-[side=right]:slide-in-from-left-2",
-    "tw:data-[argo=true]:data-[side=top]:slide-in-from-bottom-2"
-  ],
-  {
-    defaultVariants: {
-      variant: "action"
-    },
-    variants: {
-      variant: {
-        action: [
-          "tw:max-w-fit",
-          "tw:px-3",
-          "tw:py-2",
-          "tw:text-center",
-          "tw:text-xs",
-          "tw:font-medium",
-          // Legacy chrome uppercases the action tooltip; the Keboola V2 brand
-          // (`data-brand="keboola"`) renders it in standard case instead.
-          "tw:uppercase",
-          "tw:tracking-wider",
-          "tw:[[data-brand=keboola]_&]:normal-case",
-          "tw:[[data-brand=keboola]_&]:tracking-normal"
-        ],
-        explanatory: [
-          "tw:max-w-80",
-          "tw:px-4",
-          "tw:py-3",
-          "tw:text-left",
-          "tw:text-sm",
-          "tw:font-normal"
-        ]
-      }
-    }
-  }
-);
-var TooltipContent = ({
-  className,
-  variant,
-  keepOpenOnPointerDownOutside = false,
-  children,
-  onPointerDownOutside,
-  sideOffset = 8,
-  collisionPadding = 8,
-  hideWhenDetached = true,
-  placement = "right",
-  ...rest
-}) => {
-  const renderArgo = useArgoDesign();
-  const handlePointerDownOutside = (event) => {
-    if (keepOpenOnPointerDownOutside) event.preventDefault();
-    onPointerDownOutside?.(event);
-  };
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
-    Content,
-    {
-      ...rest,
-      "data-tooltip-content": renderArgo ? void 0 : true,
-      "data-argo": renderArgo,
-      sideOffset,
-      collisionPadding,
-      onPointerDownOutside: handlePointerDownOutside,
-      className: tooltipVariants({ className, variant }),
-      hideWhenDetached,
-      side: placement,
-      children
-    }
-  ) });
-};
-var DELAY_SHOW_TOOLTIP = 300;
-var TooltipRoot = ({ children, delayDuration = DELAY_SHOW_TOOLTIP, ...rest }) => /* @__PURE__ */ jsx(Root$1, { ...rest, delayDuration, children });
-var TooltipTrigger = ({
-  ref,
-  children,
-  className,
-  keepOpenOnClick = false,
-  onClick,
-  onPointerDown,
-  asChild,
-  ...rest
-}) => {
-  const handleClick = (event) => {
-    if (keepOpenOnClick) event.preventDefault();
-    onClick?.(event);
-  };
-  const handlePointerDown = (event) => {
-    if (keepOpenOnClick) event.preventDefault();
-    onPointerDown?.(event);
-  };
-  return /* @__PURE__ */ jsx(
-    Trigger,
-    {
-      ...rest,
-      asChild: true,
-      ref,
-      className: cn("tailwindcss-preflight", className),
-      onClick: handleClick,
-      onPointerDown: handlePointerDown,
-      children: asChild ? children : (
-        // Default-mode trigger wraps children in a span so Radix has a
-        // single DOM element to attach handlers to. `tailwindcss-preflight`
-        // (merged in via Slot) activates Tailwind's preflight inside the
-        // span, which sets `svg { display: block }` — without an inline-flex
-        // container that would stack any bare Lucide icon onto its own
-        // line. `tw:inline-flex tw:items-center` keeps icon + text aligned.
-        /* @__PURE__ */ jsx("span", { className: "tw:inline-flex tw:items-center", children })
-      )
-    }
-  );
-};
-var ACTION_TOOLTIP_LIMIT = 30;
-var Tooltip = ({
-  tooltip,
-  children,
-  className,
-  keepOpenOnTriggerClick = false,
-  variant,
-  placement = "right",
-  forceHide = false,
-  forceShow = false,
-  delayDuration,
-  // trigger props
-  triggerAsChild = false
-}) => {
-  const [open, setOpen] = useState(false);
-  const resolvedVariant = (() => {
-    if (!!variant) return variant;
-    if (typeof tooltip === "string" && tooltip.length > ACTION_TOOLTIP_LIMIT) return "explanatory";
-    return "action";
-  })();
-  const isActionVariant = resolvedVariant === "action";
-  const handleKeyUp = (event) => {
-    if (![keyCodes.ENTER, keyCodes.SPACE].includes(event.key)) return;
-    event.stopPropagation();
-  };
-  return /* @__PURE__ */ jsxs(
-    TooltipRoot,
-    {
-      open: !!tooltip && (open || forceShow) && !forceHide,
-      onOpenChange: setOpen,
-      delayDuration,
-      disableHoverableContent: isActionVariant,
-      children: [
-        /* @__PURE__ */ jsx(
-          TooltipTrigger,
-          {
-            asChild: triggerAsChild,
-            keepOpenOnClick: keepOpenOnTriggerClick,
-            onKeyUp: handleKeyUp,
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TooltipContent,
-          {
-            className,
-            variant: resolvedVariant,
-            placement,
-            keepOpenOnPointerDownOutside: keepOpenOnTriggerClick,
-            children: tooltip
-          }
-        )
-      ]
-    }
-  );
-};
-Tooltip.Root = TooltipRoot;
-Tooltip.Content = TooltipContent;
-Tooltip.Trigger = TooltipTrigger;
-var variants = cva(
-  [
-    "tailwindcss-preflight",
-    "tw:group/button",
-    "tw:border-box",
-    // layout
-    "tw:relative",
-    "tw:flex",
-    "tw:items-center",
-    "tw:justify-center",
-    "tw:gap-2",
-    // text — chrome weight/tracking are brand-overridable tokens
-    // (`--font-weight-medium` / `--letter-spacing-chrome`). Casing: standard case is
-    // the default; only legacy brands (`keboola-legacy-*`) uppercase the chrome, so
-    // modern brands (incl. Keboola V2) read naturally. Mirrors the V2 standard-case
-    // treatment shipped for Tooltip/Badge (PR 7629).
-    "tw:text-xs",
-    "tw:leading-5",
-    "tw:font-medium",
-    "tw:[[data-brand^=keboola-legacy]_&]:tracking-chrome",
-    "tw:[[data-brand^=keboola-legacy]_&]:uppercase",
-    // border — legacy (non-argo) chrome uses a fixed radius, not the brand token.
-    "tw:rounded",
-    "tw:border",
-    "tw:border-transparent",
-    // styling
-    "tw:shadow-none",
-    "tw:[a]:cursor-pointer",
-    // explicitly set for anchor
-    "tw:focus-visible:outline",
-    "tw:focus-visible:outline-1",
-    "tw:focus-visible:-outline-offset-1",
-    "tw:focus-visible:outline-ring",
-    "tw:focus-visible:ring-4",
-    "tw:focus-visible:ring-ring/30",
-    // disabled
-    "tw:disabled:opacity-40",
-    "tw:disabled:cursor-not-allowed",
-    // anchor support
-    "tw:!no-underline",
-    "tw:aria-disabled:opacity-40",
-    "tw:aria-disabled:cursor-not-allowed",
-    "tw:[&_svg]:shrink-0"
-  ],
-  {
-    defaultVariants: {
-      size: "medium",
-      variant: "primary",
-      block: false
-    },
-    variants: {
-      block: {
-        true: ["tw:w-full"]
-      },
-      variant: {
-        primary: [
-          "tw:text-white",
-          "tw:bg-primary-500",
-          "tw:focus:text-white",
-          "tw:hover:text-white",
-          "tw:hover:not-disabled:bg-primary-600",
-          "tw:active:not-disabled:bg-primary-800",
-          // anchor disabled override
-          "tw:aria-disabled:!bg-primary-500"
-        ],
-        secondary: [
-          "tw:text-white",
-          "tw:bg-secondary-500",
-          "tw:focus:text-white",
-          "tw:hover:text-white",
-          "tw:hover:not-disabled:bg-secondary-700",
-          "tw:active:not-disabled:bg-secondary-800",
-          // anchor disabled override
-          "tw:aria-disabled:!bg-secondary-500"
-        ],
-        danger: [
-          "tw:text-white",
-          "tw:bg-error-500",
-          "tw:focus:text-white",
-          "tw:hover:text-white",
-          "tw:hover:not-disabled:bg-error-600",
-          "tw:active:not-disabled:bg-error-700",
-          // anchor disabled override
-          "tw:aria-disabled:!bg-error-500"
-        ],
-        invisible: [
-          "tw:text-neutral-800",
-          "tw:bg-transparent",
-          "tw:focus:text-neutral-800",
-          "tw:hover:not-disabled:bg-neutral-100",
-          "tw:hover:text-neutral-800",
-          "tw:active:not-disabled:bg-neutral-150",
-          // contrasting icon on hover/active
-          "tw:[&_svg]:text-neutral-400",
-          "tw:hover:not-disabled:[&_svg]:text-secondary-600",
-          "tw:active:not-disabled:[&_svg]:text-secondary-600",
-          // anchor disabled override
-          "tw:aria-disabled:!bg-transparent"
-        ],
-        outline: [
-          "tw:text-neutral-800",
-          "tw:bg-white",
-          // border
-          "tw:!border-neutral-200",
-          "tw:hover:text-neutral-800",
-          "tw:focus:text-neutral-800",
-          "tw:hover:not-disabled:!border-neutral-300",
-          "tw:hover:not-disabled:bg-neutral-100",
-          "tw:active:not-disabled:bg-neutral-200",
-          // contrasting icon hover, same as invisible
-          "tw:[&_svg]:text-neutral-400",
-          "tw:not-disabled:hover:[&_svg]:text-secondary-600",
-          "tw:active:not-disabled:[&_svg]:text-secondary-600",
-          // anchor disabled override
-          "tw:aria-disabled:!bg-white",
-          "tw:aria-disabled:!border-neutral-200"
-        ],
-        inline: [
-          "tw:text-neutral-800",
-          "tw:bg-transparent",
-          "tw:rounded-full",
-          "tw:[&_svg]:text-neutral-400",
-          "tw:not-disabled:hover:[&_svg]:text-secondary-600",
-          "tw:not-disabled:focus:[&_svg]:text-secondary-600"
-        ]
-      },
-      size: {
-        medium: [
-          "tw:max-h-10",
-          "tw:min-h-10",
-          "tw:px-4",
-          "tw:py-2.5",
-          'tw:[&_svg:not([class*="tw:size-"])]:size-4'
-        ],
-        small: [
-          "tw:max-h-8",
-          "tw:min-h-8",
-          "tw:px-4",
-          "tw:py-1.5",
-          'tw:[&_svg:not([class*="tw:size-"])]:size-4'
-        ],
-        large: [
-          "tw:max-h-12",
-          "tw:min-h-12",
-          "tw:px-4",
-          "tw:py-3.5",
-          'tw:[&_svg:not([class*="tw:size-"])]:size-4'
-        ],
-        "icon-lg": ["tw:size-12", "tw:p-0", 'tw:[&_svg:not([class*="tw:size-"])]:size-6'],
-        icon: ["tw:size-10", "tw:p-0", 'tw:[&_svg:not([class*="tw:size-"])]:size-4'],
-        "icon-sm": ["tw:size-8", "tw:p-0", 'tw:[&_svg:not([class*="tw:size-"])]:size-4'],
-        "icon-xs": ["tw:size-6", "tw:p-0", 'tw:[&_svg:not([class*="tw:size-"])]:size-4'],
-        "icon-2xs": [
-          "tw:!inline-flex",
-          "tw:size-5",
-          "tw:max-h-5",
-          'tw:[&_svg:not([class*="tw:size-"])]:size-3'
-        ],
-        "icon-3xs": ["tw:h-fit", "tw:w-fit", 'tw:[&_svg:not([class*="tw:size-"])]:size-4']
-      }
-    }
-  }
-);
-var argoVariants = cva(
-  [
-    "tailwindcss-preflight",
-    // layout
-    "tw:relative",
-    "tw:inline-flex",
-    "tw:items-center",
-    "tw:justify-center",
-    "tw:whitespace-nowrap",
-    "tw:gap-2",
-    // border
-    "tw:border",
-    "tw:border-transparent",
-    "tw:rounded-[var(--radius-lg,0.25rem)]",
-    // text
-    "tw:font-medium",
-    "tw:select-none",
-    // focus visible
-    "tw:!outline-hidden",
-    "tw:focus-visible:ring-2",
-    // disabled
-    "tw:disabled:cursor-not-allowed",
-    "tw:disabled:opacity-50",
-    "tw:active:opacity-60",
-    "tw:transition-all",
-    "tw:bg-clip-padding",
-    // anchor support
-    "tw:!no-underline",
-    "tw:aria-disabled:cursor-not-allowed",
-    "tw:aria-disabled:opacity-50",
-    // icon
-    "tw:shrink-0",
-    "tw:[&_svg]:pointer-events-none",
-    "tw:[&_svg]:shrink-0",
-    "tw:[&_svg:not([class*='tw:size-'])]:size-4"
-  ],
-  {
-    defaultVariants: {
-      variant: "primary",
-      size: "medium"
-    },
-    variants: {
-      block: {
-        true: ["tw:w-full"]
-      },
-      variant: {
-        primary: [
-          "tw:bg-primary",
-          "tw:text-primary-foreground",
-          "tw:[a]:hover:bg-primary/80",
-          "tw:hover:not-disabled:bg-primary/90",
-          "tw:hover:text-primary-foreground",
-          "tw:focus:text-primary-foreground",
-          "tw:focus-visible:border-primary",
-          "tw:focus-visible:ring-ring/50"
-        ],
-        secondary: [
-          "tw:bg-primary/10",
-          "tw:text-primary",
-          "tw:hover:not-disabled:bg-primary/20",
-          "tw:focus-visible:border-primary",
-          "tw:focus-visible:ring-ring/50"
-        ],
-        // should be called "destructive" by Figma
-        danger: [
-          "tw:bg-destructive",
-          "tw:text-destructive-foreground",
-          "tw:hover:text-destructive-foreground",
-          "tw:focus:text-destructive-foreground",
-          "tw:focus-visible:border-destructive",
-          "tw:focus-visible:ring-destructive/20"
-        ],
-        outline: [
-          "tw:!border-input",
-          "tw:bg-background",
-          // Semantic base text color so the label/icon flips in dark mode
-          // (matches `invisible`); previously unset → inherited a fixed dark color.
-          "tw:text-foreground",
-          // Hover follows the brand primary (translucent tint), matching the
-          // `secondary` variant — not the fixed `accent` blue.
-          "tw:hover:not-disabled:bg-primary/10",
-          "tw:hover:not-disabled:text-primary",
-          "tw:hover:active:bg-background",
-          "tw:focus-visible:!border-primary",
-          "tw:focus-visible:ring-ring/50"
-        ],
-        // should be called "ghost" by Figma
-        invisible: [
-          "tw:bg-transparent",
-          "tw:text-foreground",
-          "tw:hover:not-disabled:bg-primary/10",
-          "tw:hover:not-disabled:text-primary",
-          "tw:hover:not-disabled:border-primary/10",
-          "tw:focus-visible:ring-ring/50"
-        ],
-        // should be called "link" by Figma
-        inline: [
-          "tw:bg-transparent",
-          "tw:text-primary",
-          "tw:hover:underline",
-          "tw:hover:active:bg-transparent",
-          "tw:focus-visible:ring-ring/50"
-        ]
-      },
-      size: {
-        // should be called "default" by Figma
-        medium: ["tw:max-h-9", "tw:py-2", "tw:px-4", "tw:text-sm"],
-        // should be called "small" by Figma
-        small: ["tw:max-h-8", "tw:py-2", "tw:px-3", "tw:text-xs"],
-        // should be called "large" by Figma
-        large: ["tw:max-h-10", "tw:py-2.5", "tw:px-6", "tw:text-sm"],
-        "icon-lg": ["tw:size-10"],
-        icon: ["tw:size-9"],
-        "icon-sm": ["tw:size-8"],
-        // unsupported in ARGO, remove when old design is gone
-        "icon-xs": [],
-        "icon-2xs": [],
-        "icon-3xs": []
-      }
-    }
-  }
-);
-var Button = ({
-  ref,
-  children,
-  disabled = false,
-  className,
-  type = "button",
-  isLoading = false,
-  asChild = false,
-  onClick,
-  variant = "primary",
-  size = "medium",
-  block = false,
-  ...buttonProps
-}) => {
-  const renderArgo = useArgoDesign();
-  const Comp = asChild ? Root : "button";
-  const isIconOnly = String(size).startsWith("icon");
-  const classNames = renderArgo ? argoVariants({ variant, size, block, className }) : variants({ size, variant, block, className });
-  const handleClick = (event) => {
-    const isAnchor = event.currentTarget.tagName === "A";
-    if (isAnchor && disabled) {
-      event.preventDefault();
-      return;
-    }
-    onClick?.(event);
-  };
-  return /* @__PURE__ */ jsxs(
-    Comp,
-    {
-      ...buttonProps,
-      ref,
-      disabled,
-      "aria-disabled": disabled,
-      "data-variant": variant,
-      "data-icon-only": isIconOnly,
-      type,
-      onClick: handleClick,
-      className: cn(classNames),
-      children: [
-        isLoading && /* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:shrink-0 tw:animate-spin" }),
-        /* @__PURE__ */ jsx(Slottable, { children: isLoading && isIconOnly ? null : children })
-      ]
-    }
-  );
-};
-var Clipboard2 = ({
-  ref,
-  text: textProp,
-  children,
-  tooltip = "Copy to Clipboard",
-  tooltipPlacement = "top",
-  tooltipVariant: tooltipVariantProp = "action",
-  asChild = false,
-  onClick,
-  className,
-  ...restButtonProps
-}) => {
-  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-  const [state, setState] = useState("ready");
-  const text = typeof textProp === "function" ? textProp() : textProp;
-  const copy = async (text2) => {
-    try {
-      if (!document.hasFocus()) window.focus();
-      await copyToClipboard(text2);
-      setState("copied");
-    } catch {
-      setState("error");
-    }
-  };
-  const handleOnClick = (event) => {
-    setIsTooltipOpen(true);
-    if (text && state === "ready") void copy(text);
-    onClick?.(event);
-  };
-  const handleOnOpenChange = (open) => {
-    if (!open && state !== "ready") setState("ready");
-    setIsTooltipOpen(open);
-  };
-  const tooltipContent = (() => {
-    if (!text) return "Nothing to copy";
-    if (state === "error") return "Failed to copy";
-    if (state === "copied") return "Copied to Clipboard";
-    return tooltip;
-  })();
-  const tooltipVariant = state === "ready" && !!text ? tooltipVariantProp : "action";
-  const hasTooltipContent = tooltipContent !== null && tooltipContent !== void 0;
-  return /* @__PURE__ */ jsxs(Tooltip.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ jsx(
-      Tooltip.Trigger,
-      {
-        ...restButtonProps,
-        asChild,
-        keepOpenOnClick: true,
-        onClick: handleOnClick,
-        className: cn("tw:cursor-pointer", className),
-        ref,
-        children: children ?? text
-      }
-    ),
-    hasTooltipContent && /* @__PURE__ */ jsx(
-      Tooltip.Content,
-      {
-        keepOpenOnPointerDownOutside: true,
-        placement: tooltipPlacement,
-        variant: tooltipVariant,
-        children: tooltipContent
-      }
-    )
-  ] });
-};
-var DEFAULT_ICON = /* @__PURE__ */ jsx(Copy, {});
-var DEFAULT_ARIA_LABEL = "Copy";
-var ClipboardButton = ({
-  // clipboard props
-  text,
-  tooltip,
-  tooltipPlacement,
-  tooltipVariant,
-  // button props
-  icon = DEFAULT_ICON,
-  variant = "outline",
-  children,
-  ...rest
-}) => {
-  const defaultAriaLabel = typeof tooltip === "string" && tooltip.trim() ? tooltip : DEFAULT_ARIA_LABEL;
-  const ariaLabel = rest["aria-label"] ?? (children == null ? defaultAriaLabel : void 0);
-  return /* @__PURE__ */ jsx(
-    Clipboard2,
-    {
-      asChild: true,
-      tooltip,
-      tooltipPlacement,
-      tooltipVariant,
-      text,
-      children: /* @__PURE__ */ jsxs(Button, { ...rest, "aria-label": ariaLabel, variant, disabled: !text, children: [
-        icon,
-        children
-      ] })
-    }
-  );
-};
-var MIN_SCALE = 0.5;
-var MAX_SCALE = 3;
-var ZOOM_STEP = 0.1;
-var ZoomableSvg = ({
-  html,
-  copyText,
-  className,
-  allowForeignObject,
-  renderActions
-}) => {
-  const safeHtml = useMemo(
-    () => DOMPurify.sanitize(html, {
-      USE_PROFILES: { svg: true, svgFilters: true },
-      ...allowForeignObject ? { ADD_TAGS: ["foreignObject"] } : {}
-    }),
-    [html, allowForeignObject]
-  );
-  const containerRef = useRef(null);
-  const [scale, setScale] = useState(1);
-  const [translate, setTranslate] = useState({ x: 0, y: 0 });
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  useEffect(() => {
-    if (!isFullscreen) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") {
-        e.stopPropagation();
-        setIsFullscreen(false);
-      }
-    };
-    document.addEventListener("keydown", onKeyDown, { capture: true });
-    return () => document.removeEventListener("keydown", onKeyDown, { capture: true });
-  }, [isFullscreen]);
-  const dragRef = useRef(null);
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const onWheel = (e) => {
-      if (!e.ctrlKey && !e.metaKey) return;
-      e.preventDefault();
-      const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
-      setScale((s) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, s + delta)));
-    };
-    el.addEventListener("wheel", onWheel, { passive: false });
-    return () => el.removeEventListener("wheel", onWheel);
-  }, [isFullscreen]);
-  const didDragRef = useRef(false);
-  const handleMouseDown = useCallback(
-    (e) => {
-      if (e.button !== 0) return;
-      e.preventDefault();
-      didDragRef.current = false;
-      dragRef.current = {
-        startX: e.clientX,
-        startY: e.clientY,
-        startTx: translate.x,
-        startTy: translate.y
-      };
-    },
-    [translate]
-  );
-  const handleMouseMove = useCallback((e) => {
-    if (!dragRef.current) return;
-    didDragRef.current = true;
-    setTranslate({
-      x: dragRef.current.startTx + e.clientX - dragRef.current.startX,
-      y: dragRef.current.startTy + e.clientY - dragRef.current.startY
-    });
-  }, []);
-  const handleMouseUp = useCallback(() => {
-    dragRef.current = null;
-  }, []);
-  const handleReset = useCallback(() => {
-    setScale(1);
-    setTranslate({ x: 0, y: 0 });
-  }, []);
-  const isZoomed = Math.abs(scale - 1) > 1e-3 || translate.x !== 0 || translate.y !== 0;
-  const handleClick = useCallback((e) => {
-    if (didDragRef.current) {
-      e.stopPropagation();
-    }
-  }, []);
-  const stopPropagation = useCallback((e) => {
-    e.stopPropagation();
-  }, []);
-  const diagramContent = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "presentation",
-      className: cn("tw:group/zoom tw:relative", isFullscreen && "tw:h-full"),
-      onClick: handleClick,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            role: "presentation",
-            ref: containerRef,
-            className: cn(
-              "tw:overflow-hidden tw:cursor-grab tw:active:cursor-grabbing tw:p-3",
-              isFullscreen && "tw:h-full"
-            ),
-            onMouseDown: handleMouseDown,
-            onMouseMove: handleMouseMove,
-            onMouseUp: handleMouseUp,
-            onMouseLeave: handleMouseUp,
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "tw:flex tw:justify-center tw:origin-center",
-                  isFullscreen && "tw:h-full tw:[&>svg]:h-full"
-                ),
-                style: { transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})` },
-                dangerouslySetInnerHTML: { __html: safeHtml }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            role: "presentation",
-            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",
-            onClick: stopPropagation,
-            children: [
-              isZoomed && /* @__PURE__ */ jsx(Tooltip, { tooltip: "Reset zoom", placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "outline", onClick: handleReset, children: "Reset" }) }),
-              copyText && /* @__PURE__ */ jsx(ClipboardButton, { text: copyText, tooltip: "Copy code", size: "icon-sm", variant: "outline" }),
-              renderActions?.(safeHtml),
-              /* @__PURE__ */ jsx(
-                Tooltip,
-                {
-                  tooltip: isFullscreen ? "Exit fullscreen" : "Fullscreen",
-                  placement: "top",
-                  triggerAsChild: true,
-                  children: /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      size: "icon-sm",
-                      variant: "outline",
-                      "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
-                      onClick: () => setIsFullscreen((f) => !f),
-                      children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, { className: "tw:size-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "tw:size-4" })
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-  if (isFullscreen) {
-    return createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          role: "presentation",
-          "data-testid": "zoomable-svg-fullscreen",
-          className: "tw:fixed tw:inset-0 tw:z-[1060] tw:bg-muted tw:p-4 tailwindcss-preflight",
-          onClick: stopPropagation,
-          children: diagramContent
-        }
-      ),
-      document.body
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "tw:overflow-hidden tw:rounded-md tw:border tw:border-border tw:bg-muted",
-        className
-      ),
-      children: diagramContent
-    }
-  );
-};
-var HEIGHT_CLASS_NAME = {
-  xxs: "tw:h-3 tw:rounded",
-  xs: "tw:h-4 tw:rounded",
-  sm: "tw:h-5 tw:rounded",
-  md: "tw:h-6 tw:rounded-md",
-  lg: "tw:h-8 tw:rounded-lg",
-  xl: "tw:h-10 tw:rounded-lg",
-  "2xl": "tw:h-12 tw:rounded-lg"
-};
-var ANIMATION_CLASS_NAME = cn(
-  // base styles
-  "tw:relative",
-  "tw:overflow-hidden",
-  "tw:pointer-events-none",
-  "tw:bg-skeleton",
-  // before
-  'tw:before:content-[""]',
-  "tw:before:opacity-100",
-  "tw:before:absolute",
-  "tw:before:inset-0",
-  "tw:before:-translate-x-full",
-  "tw:before:animate-[shimmer_2s_infinite]",
-  "tw:before:bg-gradient-to-r",
-  "tw:before:from-transparent",
-  "tw:before:to-transparent",
-  "tw:before:via-white/40"
-);
-var Skeleton = ({ height = "md", className, count = 1 }) => {
-  const prefixId = useId();
-  const keys = Array.from({ length: count }, (_, i) => `${prefixId}-${i}`);
-  return /* @__PURE__ */ jsx(Fragment, { children: keys.map((key) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-skeleton": "true",
-      className: cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className)
-    },
-    key
-  )) });
-};
-var DiagramSkeleton = () => /* @__PURE__ */ jsx("div", { className: "tw:my-3 tw:overflow-hidden tw:rounded-md tw:border tw:border-neutral-150 tw:bg-neutral-50 tw:p-6", children: /* @__PURE__ */ jsx(Skeleton, { className: "tw:h-40" }) });
-
-// src/blocks/MermaidDiagram/svgTransforms.ts
-var HTML_TAG = /<[^>]+>/g;
-var FOREIGN_OBJECT = /(<foreignObject\b[^>]*>)([\s\S]*?)(<\/foreignObject>)/g;
-var ROOT_SVG_TAG = /^(\s*<svg\b)([^>]*)(>)/i;
-var flattenForeignObjectLabels = (svg) => svg.replace(FOREIGN_OBJECT, (_match, open, inner, close) => {
-  const text = inner.replace(HTML_TAG, " ").replace(/\s+/g, " ").trim();
-  return `${open}${text}${close}`;
-});
-var STYLE_ATTR = /\s+style="([^"]*)"/i;
-var makeResponsive = (svgString) => {
-  const viewBoxMatch = svgString.match(/viewBox="[^"]*\s([\d.]+)\s[\d.]+"/);
-  const vbWidth = viewBoxMatch ? Math.round(Number(viewBoxMatch[1])) : void 0;
-  return svgString.replace(ROOT_SVG_TAG, (_match, open, attrs, close) => {
-    const existingStyle = attrs.match(STYLE_ATTR)?.[1] ?? "";
-    const styleDecls = existingStyle.replace(/max-width:\s*[^;"]*;?\s*/gi, "").replace(/\s+/g, " ").trim().replace(/;$/, "");
-    let nextAttrs = attrs.replace(/\s+width="[^"]*"/i, "").replace(/\s+height="[^"]*"/i, "").replace(STYLE_ATTR, "");
-    nextAttrs += ' width="100%"';
-    const styleParts = [styleDecls, vbWidth ? `max-width: ${vbWidth}px` : ""].filter(Boolean).join("; ");
-    if (styleParts) nextAttrs += ` style="${styleParts}"`;
-    return `${open}${nextAttrs}${close}`;
-  });
-};
-var PRIMARY_FALLBACK_CHANNELS = "31 143 255";
-var resolvePrimary = () => {
-  const channels = typeof document === "undefined" ? PRIMARY_FALLBACK_CHANNELS : getComputedStyle(document.documentElement).getPropertyValue("--primary").trim() || PRIMARY_FALLBACK_CHANNELS;
-  return `rgb(${channels})`;
-};
-var mermaidPromise = null;
-var registerLucideIconPack = (m) => {
-  m.registerIconPacks([
-    {
-      name: "lucide",
-      loader: () => import('@iconify-json/lucide/icons.json').then((mod) => mod.default)
-    }
-  ]);
-};
-var getMermaid = () => {
-  if (!mermaidPromise) {
-    mermaidPromise = import('mermaid').then((m) => {
-      registerLucideIconPack(m.default);
-      m.default.initialize({
-        startOnLoad: false,
-        securityLevel: "strict",
-        theme: "base",
-        themeVariables: {
-          primaryColor: colors.blue[100],
-          primaryTextColor: colors.neutral[800],
-          primaryBorderColor: colors.blue[700],
-          secondaryColor: colors.white,
-          secondaryTextColor: colors.neutral[800],
-          secondaryBorderColor: colors.neutral[150],
-          tertiaryColor: colors.warning[100],
-          tertiaryTextColor: colors.neutral[800],
-          tertiaryBorderColor: colors.warning[500],
-          lineColor: colors.neutral[300],
-          textColor: colors.neutral[800],
-          mainBkg: colors.blue[100],
-          nodeBorder: colors.blue[700],
-          clusterBkg: colors.white,
-          clusterBorder: colors.neutral[150],
-          titleColor: colors.neutral[800],
-          edgeLabelBackground: colors.white,
-          nodeTextColor: colors.neutral[800],
-          actorBorder: colors.blue[700],
-          actorBkg: colors.blue[100],
-          actorTextColor: colors.neutral[800],
-          actorLineColor: colors.neutral[300],
-          signalColor: colors.neutral[800],
-          signalTextColor: colors.neutral[800],
-          labelBoxBkgColor: colors.blue[100],
-          labelBoxBorderColor: colors.blue[700],
-          labelTextColor: colors.neutral[800],
-          loopTextColor: colors.neutral[800],
-          noteBorderColor: colors.warning[500],
-          noteBkgColor: colors.warning[100],
-          noteTextColor: colors.neutral[800],
-          sectionBkgColor: colors.blue[100],
-          altSectionBkgColor: colors.white,
-          sectionBkgColor2: colors.neutral[100],
-          taskBorderColor: colors.blue[700],
-          taskBkgColor: colors.blue[100],
-          taskTextColor: colors.neutral[800],
-          taskTextDarkColor: colors.neutral[800],
-          taskTextLightColor: colors.neutral[800],
-          activeTaskBorderColor: resolvePrimary(),
-          activeTaskBkgColor: colors.blue[200],
-          doneTaskBorderColor: colors.green[600],
-          doneTaskBkgColor: colors.green[100],
-          critBorderColor: colors.error[500],
-          critBkgColor: colors.error[100],
-          fontFamily: "Inter, system-ui, sans-serif",
-          fontSize: "14px"
-        }
-      });
-      return m;
-    }).catch((err) => {
-      mermaidPromise = null;
-      throw err;
-    });
-  }
-  return mermaidPromise;
-};
-var stripFontImports = (svg) => svg.replace(/@import\s+url\([^)]*fonts\.googleapis\.com[^)]*\);?\s*/g, "");
-var hasIconSyntax = (code) => /@\{[^}]*\bicon\s*:/.test(code) || /\b(?:icon|service|group)\b[^\n(]*\(\s*[\w-]+:/.test(code) || /\bfa[bslr]?:fa-/.test(code);
-var tryFastRender = (code) => {
-  if (hasIconSyntax(code)) return null;
-  try {
-    return stripFontImports(
-      renderMermaidSVG(code, {
-        bg: colors.white,
-        fg: colors.neutral[800],
-        transparent: true,
-        font: "Inter, system-ui, sans-serif"
-      })
-    );
-  } catch (err) {
-    console.debug("[MermaidDiagram] fast render unavailable, using async fallback:", err);
-    return null;
-  }
-};
-var RENDER_DEBOUNCE_MS = 300;
-var svgCache = /* @__PURE__ */ new Map();
-var resolveSyncSvg = (code) => {
-  const cached = svgCache.get(code);
-  if (cached) return cached;
-  const fast = tryFastRender(code);
-  if (fast) svgCache.set(code, fast);
-  return fast;
-};
-var MermaidDiagram = ({ code, renderActions }) => {
-  const id = useId();
-  const [svg, setSvg] = useState(() => resolveSyncSvg(code));
-  const [renderFailed, setRenderFailed] = useState(false);
-  const debounceRef = useRef(null);
-  const renderIdRef = useRef(0);
-  const [prevCode, setPrevCode] = useState(code);
-  if (code !== prevCode) {
-    setPrevCode(code);
-    setSvg(resolveSyncSvg(code));
-    setRenderFailed(false);
-  }
-  useEffect(() => {
-    if (svgCache.has(code)) return;
-    const currentRenderId = ++renderIdRef.current;
-    if (debounceRef.current) {
-      clearTimeout(debounceRef.current);
-    }
-    debounceRef.current = setTimeout(() => {
-      getMermaid().then(async (mermaidModule) => {
-        if (renderIdRef.current !== currentRenderId) return;
-        const rendererId = `mermaid-${id.replaceAll(":", "")}`;
-        const container = document.createElement("div");
-        container.style.visibility = "hidden";
-        container.style.position = "absolute";
-        container.style.top = "-9999px";
-        container.style.width = "900px";
-        document.body.appendChild(container);
-        try {
-          const result = await mermaidModule.default.render(rendererId, code, container);
-          if (renderIdRef.current === currentRenderId && result) {
-            const svgOutput = flattenForeignObjectLabels(result.svg);
-            svgCache.set(code, svgOutput);
-            setSvg(svgOutput);
-            setRenderFailed(false);
-          }
-        } finally {
-          container.remove();
-        }
-      }).catch((err) => {
-        if (renderIdRef.current === currentRenderId) {
-          console.error("[MermaidDiagram] fallback failed:", err);
-          setSvg(null);
-          setRenderFailed(true);
-        }
-      });
-    }, RENDER_DEBOUNCE_MS);
-    const timer = debounceRef.current;
-    const renderId = renderIdRef;
-    return () => {
-      renderId.current++;
-      if (timer) {
-        clearTimeout(timer);
-      }
-    };
-  }, [code, id]);
-  const processedSvg = svg ? makeResponsive(svg) : null;
-  if (renderFailed) {
-    return /* @__PURE__ */ jsx(
-      "pre",
-      {
-        className: cn(
-          "tw:my-3 tw:overflow-auto tw:whitespace-pre-wrap tw:break-all",
-          "tw:py-3 tw:px-4",
-          "tw:bg-neutral-50",
-          "tw:rounded-md tw:text-neutral-400",
-          "tw:text-sm tw:font-mono"
-        ),
-        children: /* @__PURE__ */ jsx("code", { children: code })
-      }
-    );
-  }
-  if (processedSvg) {
-    return /* @__PURE__ */ jsx(
-      ZoomableSvg,
-      {
-        html: processedSvg,
-        copyText: `\`\`\`mermaid
-${code}
-\`\`\``,
-        className: "tw:my-3",
-        allowForeignObject: true,
-        renderActions
-      },
-      code
-    );
-  }
-  return /* @__PURE__ */ jsx(DiagramSkeleton, {});
-};
-
-export { MermaidDiagram };
+export { MermaidDiagram } from './chunk-KPNAW5MU.js';
+import './chunk-IJTHFNNJ.js';
+import './chunk-VPPM7UUQ.js';
+import './chunk-L37JJ6MR.js';
+import './chunk-CTCFYWJC.js';
+import './chunk-BOHNXTMM.js';
+import './chunk-63NSN2VL.js';
+import './chunk-JP7PNHLH.js';
 //# sourceMappingURL=mermaid.js.map
 //# sourceMappingURL=mermaid.js.map