@keboola/design 6.4.0 → 8.0.0

package/dist/mermaid.cjs

@@ -3,59 +3,25 @@
 var react = require('react');
 var beautifulMermaid = require('beautiful-mermaid');
 var colors = require('@keboola/tailwind-config/colors');
+var reactDom = require('react-dom');
+var DOMPurify = require('dompurify');
+var reactSlot = require('@radix-ui/react-slot');
+var lucideReact = require('lucide-react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactTooltip = require('@radix-ui/react-tooltip');
 var classVarianceAuthority = require('class-variance-authority');
 var brandRegistry = require('@keboola/brand-registry');
 var jsxRuntime = require('react/jsx-runtime');
-var DOMPurify = require('dompurify');
-var reactSlot = require('@radix-ui/react-slot');
-var lucide_react_star = require('lucide-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
 var colors__default = /*#__PURE__*/_interopDefault(colors);
 var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
-var lucide_react_star__namespace = /*#__PURE__*/_interopNamespace(lucide_react_star);
 
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget);
+// src/blocks/MermaidDiagram/MermaidDiagram.tsx
 var twMerge = tailwindMerge.extendTailwindMerge({
-  prefix: "tw-"
+  prefix: "tw"
 });
 var cn = (...classes) => twMerge(clsx.clsx(...classes));
 
@@ -105,39 +71,39 @@ var useArgoDesign = () => react.use(ArgoDesignContext);
 var tooltipVariants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
-    "tw-inline-block",
-    "tw-break-anywhere",
-    "tw-max-h-96",
-    "tw-overflow-y-auto",
-    "tw-z-[1060]",
+    "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",
+    "tw:rounded",
+    "tw:bg-neutral-800",
+    "tw:text-white",
     // argo chrome overrides — semantic floating-panel tokens
-    "data-[argo=true]:tw-rounded-2xl",
-    "data-[argo=true]:tw-border",
-    "data-[argo=true]:tw-border-solid",
-    "data-[argo=true]:tw-border-border",
-    "data-[argo=true]:tw-bg-popover",
-    "data-[argo=true]:tw-text-popover-foreground",
-    "data-[argo=true]:tw-shadow-md",
+    "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
-    "data-[argo=true]:data-[state=delayed-open]:tw-animate-in",
-    "data-[argo=true]:data-[state=instant-open]:tw-animate-in",
-    "data-[argo=true]:data-[state=delayed-open]:tw-fade-in-0",
-    "data-[argo=true]:data-[state=instant-open]:tw-fade-in-0",
-    "data-[argo=true]:data-[state=delayed-open]:tw-zoom-in-95",
-    "data-[argo=true]:data-[state=instant-open]:tw-zoom-in-95",
+    "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
-    "data-[argo=true]:data-[state=closed]:tw-animate-out",
-    "data-[argo=true]:data-[state=closed]:tw-fade-out-0",
-    "data-[argo=true]:data-[state=closed]:tw-zoom-out-95",
+    "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
-    "data-[argo=true]:data-[side=bottom]:tw-slide-in-from-top-2",
-    "data-[argo=true]:data-[side=left]:tw-slide-in-from-right-2",
-    "data-[argo=true]:data-[side=right]:tw-slide-in-from-left-2",
-    "data-[argo=true]:data-[side=top]:tw-slide-in-from-bottom-2"
+    "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: {
@@ -146,22 +112,26 @@ var tooltipVariants = classVarianceAuthority.cva(
     variants: {
       variant: {
         action: [
-          "tw-max-w-fit",
-          "tw-px-3",
-          "tw-py-2",
-          "tw-text-center",
-          "tw-text-xs",
-          "tw-font-medium",
-          "tw-uppercase",
-          "tw-tracking-wider"
+          "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"
+          "tw:max-w-80",
+          "tw:px-4",
+          "tw:py-3",
+          "tw:text-left",
+          "tw:text-sm",
+          "tw:font-normal"
         ]
       }
     }
@@ -235,8 +205,8 @@ var TooltipTrigger = ({
         // (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__ */ jsxRuntime.jsx("span", { className: "tw-inline-flex tw-items-center", children })
+        // line. `tw:inline-flex tw:items-center` keeps icon + text aligned.
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw:inline-flex tw:items-center", children })
       )
     }
   );
@@ -251,6 +221,7 @@ var Tooltip = ({
   placement = "right",
   forceHide = false,
   forceShow = false,
+  delayDuration,
   // trigger props
   triggerAsChild = false
 }) => {
@@ -270,6 +241,7 @@ var Tooltip = ({
     {
       open: !!tooltip && (open || forceShow) && !forceHide,
       onOpenChange: setOpen,
+      delayDuration,
       disableHoverableContent: isActionVariant,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -298,184 +270,49 @@ var Tooltip = ({
 Tooltip.Root = TooltipRoot;
 Tooltip.Content = TooltipContent;
 Tooltip.Trigger = TooltipTrigger;
-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
-  'before:tw-content-[""]',
-  "before:tw-opacity-100",
-  "before:tw-absolute",
-  "before:tw-inset-0",
-  "before:-tw-translate-x-full",
-  "before:tw-animate-[shimmer_2s_infinite]",
-  "before:tw-bg-gradient-to-r",
-  "before:tw-from-transparent",
-  "before:tw-to-transparent",
-  "before:tw-via-white/40"
-);
-var Skeleton = ({ height = "md", className, count = 1 }) => {
-  const prefixId = react.useId();
-  const keys = Array.from({ length: count }, (_, i) => `${prefixId}-${i}`);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: keys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-skeleton": "true",
-      className: cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className)
-    },
-    key
-  )) });
-};
-
-// src/icons/index.ts
-var icons_exports = {};
-__export(icons_exports, {
-  Google: () => Google,
-  Keboola: () => Keboola,
-  Microsoft: () => Microsoft
-});
-__reExport(icons_exports, lucide_react_star__namespace);
-var Google = react.forwardRef(
-  ({ size = 24, className, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      ref,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "12 10 20 20",
-      fill: "none",
-      className: cn("lucide", className),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M31.6 20.2273C31.6 19.5182 31.5364 18.8364 31.4182 18.1818H22V22.05H27.3818C27.15 23.3 26.4455 24.3591 25.3864 25.0682V27.5773H28.6182C30.5091 25.8364 31.6 23.2727 31.6 20.2273Z",
-            fill: "#4285F4"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M22 30C24.7 30 26.9636 29.1045 28.6181 27.5773L25.3863 25.0682C24.4909 25.6682 23.3454 26.0227 22 26.0227C19.3954 26.0227 17.1909 24.2636 16.4045 21.9H13.0636V24.4909C14.7091 27.7591 18.0909 30 22 30Z",
-            fill: "#34A853"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M16.4045 21.9C16.2045 21.3 16.0909 20.6591 16.0909 20C16.0909 19.3409 16.2045 18.7 16.4045 18.1V15.5091H13.0636C12.3864 16.8591 12 18.3864 12 20C12 21.6136 12.3864 23.1409 13.0636 24.4909L16.4045 21.9Z",
-            fill: "#FBBC04"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M22 13.9773C23.4681 13.9773 24.7863 14.4818 25.8227 15.4727L28.6909 12.6045C26.9591 10.9909 24.6954 10 22 10C18.0909 10 14.7091 12.2409 13.0636 15.5091L16.4045 18.1C17.1909 15.7364 19.3954 13.9773 22 13.9773Z",
-            fill: "#EA4335"
-          }
-        ),
-        children
-      ]
-    }
-  )
-);
-Google.displayName = "Google";
-var Keboola = react.forwardRef(
-  ({ size = 24, color = "currentColor", className, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      ref,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "0 0 300 512",
-      fill: color,
-      className: cn("lucide", className),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M152 320C79.7 320 24.5 233.9 24.5 124.7C24.5 15.6 70.5 0 152 0s123.6 15.6 123.6 124.7C275.5 233.9 217.7 320 152 320zm-8.7-50.5c0-11.2-9.5-20.3-21.2-20.3s-21.2 9.1-21.2 20.3c0 11.2 9.5 20.3 21.2 20.3s21.2-9.1 21.2-20.3zm55.7 0c0-11.2-9.5-20.3-21.2-20.3s-21.2 9.1-21.2 20.3c0 11.2 9.5 20.3 21.2 20.3s21.2-9.1 21.2-20.3zm68.9 115.1c10.2 9.3 20.2 20.5 29 35c5.9 9.7 2.6 22.1-7.5 27.8c-3.4 1.9-7.1 2.8-10.7 2.8c-7.2 0-14.3-3.6-18.3-10c-6.8-11.1-13.8-18.9-21.7-26.1c-7.3-6.7-15.6-12.7-24.9-19.5c-.7-.5-1.4-1-2.1-1.5c-5-3.6-10-6.8-14.9-9.4c.6 1 1.2 2.1 1.8 3.2c14.4 26.4 29.2 63.1 29.2 104.9c0 11.2-9.5 20.3-21.2 20.3c-11.7 0-21.2-9.1-21.2-20.3c.1-31.8-11.6-62.3-23.8-84.9c-4-7.4-8-13.9-11.6-19.3c-3.4 5.2-7.2 11.3-11 18.3c-12.5 22.7-24.5 53.8-24.4 86c0 11.2-9.5 20.3-21.2 20.3s-21.2-9.1-21.2-20.3c.1-41.8 14.9-78.4 29.2-104.9c.6-1.1 1.2-2.1 1.8-3.2c-5 2.7-9.9 5.8-14.9 9.4c-.6 .5-1.3 .9-1.9 1.4c-9.5 6.9-17.8 12.9-25.1 19.7c-7.9 7.2-14.9 15.1-21.7 26.1c-5.9 9.7-18.9 12.9-29 7.2C.5 441.8-2.9 429.3 3.1 419.7c8.9-14.4 18.8-25.7 29-35c9.2-8.4 18.5-15.1 27.6-21.7c1-.7 2-1.4 3-2.2c4.7-3.5 9.6-6.7 14.6-9.6c-5-2.9-9.8-6.1-14.6-9.6C39.8 325 19.9 302.5 3.1 275.1c-5.9-9.7-2.6-22.1 7.5-27.8c10.1-5.7 23.1-2.5 29 7.2c14.6 23.7 31.1 42 48.7 54.9c18.9 13.7 37.4 20.5 56.5 21.5c1.7-.1 3.5-.1 5.2-.1c1.8 0 3.5 .1 5.2 .1c0 0 0 0 0 0c19.1-1.1 37.6-7.9 56.5-21.5c17.6-12.8 34.2-31.2 48.7-54.9c6-9.7 18.9-12.9 29-7.2c10.1 5.7 13.4 18.1 7.5 27.8c-16.8 27.4-36.7 49.9-59.6 66.6c-4.7 3.5-9.6 6.7-14.5 9.6c4.9 2.9 9.8 6.1 14.5 9.6c.9 .7 1.8 1.3 2.7 2c9.2 6.7 18.5 13.5 27.9 22z" }),
-        children
-      ]
-    }
-  )
-);
-Keboola.displayName = "Keboola";
-var Microsoft = react.forwardRef(
-  ({ size = 24, className, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      ref,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "0 0 21 21",
-      fill: "none",
-      className: cn("lucide", className),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "10", height: "10", fill: "#F25022" }),
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "0", width: "10", height: "10", fill: "#7FBA00" }),
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "11", width: "10", height: "10", fill: "#00A4EF" }),
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "11", width: "10", height: "10", fill: "#FFB900" }),
-        children
-      ]
-    }
-  )
-);
-Microsoft.displayName = "Microsoft";
 var variants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
-    "tw-group/button",
-    "tw-border-box",
+    "tw:group/button",
+    "tw:border-box",
     // layout
-    "tw-relative",
-    "tw-flex",
-    "tw-items-center",
-    "tw-justify-center",
-    "tw-gap-2",
+    "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 stays `tw-uppercase`.
-    "tw-text-xs",
-    "tw-leading-5",
-    "tw-font-medium",
-    "tw-tracking-chrome",
-    "tw-uppercase",
+    // (`--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",
+    "tw:rounded",
+    "tw:border",
+    "tw:border-transparent",
     // styling
-    "tw-shadow-none",
-    "[a]:tw-cursor-pointer",
+    "tw:shadow-none",
+    "tw:[a]:cursor-pointer",
     // explicitly set for anchor
-    "focus-visible:tw-outline",
-    "focus-visible:tw-outline-1",
-    "focus-visible:-tw-outline-offset-1",
-    "focus-visible:tw-outline-ring",
-    "focus-visible:tw-ring-4",
-    "focus-visible:tw-ring-ring/30",
+    "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
-    "disabled:tw-opacity-40",
-    "disabled:tw-cursor-not-allowed",
+    "tw:disabled:opacity-40",
+    "tw:disabled:cursor-not-allowed",
     // anchor support
-    "!tw-no-underline",
-    "aria-disabled:tw-opacity-40",
-    "aria-disabled:tw-cursor-not-allowed",
-    "[&_svg]:tw-shrink-0"
+    "tw:!no-underline",
+    "tw:aria-disabled:opacity-40",
+    "tw:aria-disabled:cursor-not-allowed",
+    "tw:[&_svg]:shrink-0"
   ],
   {
     defaultVariants: {
@@ -485,113 +322,113 @@ var variants = classVarianceAuthority.cva(
     },
     variants: {
       block: {
-        true: ["tw-w-full"]
+        true: ["tw:w-full"]
       },
       variant: {
         primary: [
-          "tw-text-white",
-          "tw-bg-primary-500",
-          "focus:tw-text-white",
-          "hover:tw-text-white",
-          "hover:not-disabled:tw-bg-primary-600",
-          "active:not-disabled:tw-bg-primary-800",
+          "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
-          "aria-disabled:!tw-bg-primary-500"
+          "tw:aria-disabled:!bg-primary-500"
         ],
         secondary: [
-          "tw-text-white",
-          "tw-bg-secondary-500",
-          "focus:tw-text-white",
-          "hover:tw-text-white",
-          "hover:not-disabled:tw-bg-secondary-700",
-          "active:not-disabled:tw-bg-secondary-800",
+          "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
-          "aria-disabled:!tw-bg-secondary-500"
+          "tw:aria-disabled:!bg-secondary-500"
         ],
         danger: [
-          "tw-text-white",
-          "tw-bg-error-500",
-          "focus:tw-text-white",
-          "hover:tw-text-white",
-          "hover:not-disabled:tw-bg-error-600",
-          "active:not-disabled:tw-bg-error-700",
+          "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
-          "aria-disabled:!tw-bg-error-500"
+          "tw:aria-disabled:!bg-error-500"
         ],
         invisible: [
-          "tw-text-neutral-800",
-          "tw-bg-transparent",
-          "focus:tw-text-neutral-800",
-          "hover:not-disabled:tw-bg-neutral-100",
-          "hover:tw-text-neutral-800",
-          "active:not-disabled:tw-bg-neutral-150",
+          "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
-          "[&_svg]:tw-text-neutral-400",
-          "[&_svg]:hover:not-disabled:tw-text-secondary-600",
-          "[&_svg]:active:not-disabled:tw-text-secondary-600",
+          "tw:[&_svg]:text-neutral-400",
+          "tw:hover:not-disabled:[&_svg]:text-secondary-600",
+          "tw:active:not-disabled:[&_svg]:text-secondary-600",
           // anchor disabled override
-          "aria-disabled:!tw-bg-transparent"
+          "tw:aria-disabled:!bg-transparent"
         ],
         outline: [
-          "tw-text-neutral-800",
-          "tw-bg-white",
+          "tw:text-neutral-800",
+          "tw:bg-white",
           // border
-          "!tw-border-neutral-200",
-          "hover:tw-text-neutral-800",
-          "focus:tw-text-neutral-800",
-          "hover:not-disabled:!tw-border-neutral-300",
-          "hover:not-disabled:tw-bg-neutral-100",
-          "active:not-disabled:tw-bg-neutral-200",
+          "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
-          "[&_svg]:tw-text-neutral-400",
-          "[&_svg]:not-disabled:hover:tw-text-secondary-600",
-          "[&_svg]:active:not-disabled:tw-text-secondary-600",
+          "tw:[&_svg]:text-neutral-400",
+          "tw:not-disabled:hover:[&_svg]:text-secondary-600",
+          "tw:active:not-disabled:[&_svg]:text-secondary-600",
           // anchor disabled override
-          "aria-disabled:!tw-bg-white",
-          "aria-disabled:!tw-border-neutral-200"
+          "tw:aria-disabled:!bg-white",
+          "tw:aria-disabled:!border-neutral-200"
         ],
         inline: [
-          "tw-text-neutral-800",
-          "tw-bg-transparent",
-          "tw-rounded-full",
-          "[&_svg]:tw-text-neutral-400",
-          "[&_svg]:not-disabled:hover:tw-text-secondary-600",
-          "[&_svg]:not-disabled:focus:tw-text-secondary-600"
+          "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",
-          '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+          "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",
-          '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+          "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",
-          '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+          "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", '[&_svg:not([class*="tw-size-"])]:tw-size-6'],
-        icon: ["tw-size-10", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
-        "icon-sm": ["tw-size-8", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
-        "icon-xs": ["tw-size-6", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-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",
-          '[&_svg:not([class*="tw-size-"])]:tw-size-3'
+          "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", '[&_svg:not([class*="tw-size-"])]:tw-size-4']
+        "icon-3xs": ["tw:h-fit", "tw:w-fit", 'tw:[&_svg:not([class*="tw:size-"])]:size-4']
       }
     }
   }
@@ -600,37 +437,37 @@ var argoVariants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
     // layout
-    "tw-relative",
-    "tw-inline-flex",
-    "tw-items-center",
-    "tw-justify-center",
-    "tw-whitespace-nowrap",
-    "tw-gap-2",
+    "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)]",
+    "tw:border",
+    "tw:border-transparent",
+    "tw:rounded-[var(--radius-lg,0.25rem)]",
     // text
-    "tw-font-medium",
-    "tw-select-none",
+    "tw:font-medium",
+    "tw:select-none",
     // focus visible
-    "!tw-outline-none",
-    "focus-visible:tw-ring-2",
+    "tw:!outline-hidden",
+    "tw:focus-visible:ring-2",
     // disabled
-    "disabled:tw-cursor-not-allowed",
-    "disabled:tw-opacity-50",
-    "active:tw-opacity-60",
-    "tw-transition-all",
-    "tw-bg-clip-padding",
+    "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",
-    "aria-disabled:tw-cursor-not-allowed",
-    "aria-disabled:tw-opacity-50",
+    "tw:!no-underline",
+    "tw:aria-disabled:cursor-not-allowed",
+    "tw:aria-disabled:opacity-50",
     // icon
-    "tw-shrink-0",
-    "[&_svg]:tw-pointer-events-none",
-    "[&_svg]:tw-shrink-0",
-    "[&_svg:not([class*='tw-size-'])]:tw-size-4"
+    "tw:shrink-0",
+    "tw:[&_svg]:pointer-events-none",
+    "tw:[&_svg]:shrink-0",
+    "tw:[&_svg:not([class*='tw:size-'])]:size-4"
   ],
   {
     defaultVariants: {
@@ -639,77 +476,77 @@ var argoVariants = classVarianceAuthority.cva(
     },
     variants: {
       block: {
-        true: ["tw-w-full"]
+        true: ["tw:w-full"]
       },
       variant: {
         primary: [
-          "tw-bg-primary",
-          "tw-text-primary-foreground",
-          "[a]:hover:tw-bg-primary/80",
-          "hover:not-disabled:tw-bg-primary/90",
-          "hover:tw-text-primary-foreground",
-          "focus:tw-text-primary-foreground",
-          "focus-visible:tw-border-primary",
-          "focus-visible:tw-ring-ring/50"
+          "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",
-          "hover:not-disabled:tw-bg-primary/20",
-          "focus-visible:tw-border-primary",
-          "focus-visible:tw-ring-ring/50"
+          "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",
-          "hover:tw-text-destructive-foreground",
-          "focus:tw-text-destructive-foreground",
-          "focus-visible:tw-border-destructive",
-          "focus-visible:tw-ring-destructive/20"
+          "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",
+          "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",
+          "tw:text-foreground",
           // Hover follows the brand primary (translucent tint), matching the
           // `secondary` variant — not the fixed `accent` blue.
-          "hover:not-disabled:tw-bg-primary/10",
-          "hover:not-disabled:tw-text-primary",
-          "hover:active:tw-bg-background",
-          "focus-visible:!tw-border-primary",
-          "focus-visible:tw-ring-ring/50"
+          "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",
-          "hover:not-disabled:tw-bg-primary/10",
-          "hover:not-disabled:tw-text-primary",
-          "hover:not-disabled:tw-border-primary/10",
-          "focus-visible:tw-ring-ring/50"
+          "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",
-          "hover:tw-underline",
-          "hover:active:tw-bg-transparent",
-          "focus-visible:tw-ring-ring/50"
+          "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"],
+        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"],
+        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"],
+        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": [],
@@ -757,13 +594,13 @@ var Button = ({
       onClick: handleClick,
       className: cn(classNames),
       children: [
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw:size-4 tw:shrink-0 tw:animate-spin" }),
         /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children: isLoading && isIconOnly ? null : children })
       ]
     }
   );
 };
-var Clipboard = ({
+var Clipboard2 = ({
   ref,
   text: textProp,
   children,
@@ -788,6 +625,7 @@ var Clipboard = ({
     }
   };
   const handleOnClick = (event) => {
+    setIsTooltipOpen(true);
     if (text && state === "ready") void copy(text);
     onClick?.(event);
   };
@@ -802,6 +640,7 @@ var Clipboard = ({
     return tooltip;
   })();
   const tooltipVariant = state === "ready" && !!text ? tooltipVariantProp : "action";
+  const hasTooltipContent = tooltipContent !== null && tooltipContent !== void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Tooltip.Trigger,
@@ -810,12 +649,12 @@ var Clipboard = ({
         asChild,
         keepOpenOnClick: true,
         onClick: handleOnClick,
-        className: cn("tw-cursor-pointer", className),
+        className: cn("tw:cursor-pointer", className),
         ref,
         children: children ?? text
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    hasTooltipContent && /* @__PURE__ */ jsxRuntime.jsx(
       Tooltip.Content,
       {
         keepOpenOnPointerDownOutside: true,
@@ -826,7 +665,7 @@ var Clipboard = ({
     )
   ] });
 };
-var DEFAULT_ICON = /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Copy, {});
+var DEFAULT_ICON = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, {});
 var DEFAULT_ARIA_LABEL = "Copy";
 var ClipboardButton = ({
   // clipboard props
@@ -843,7 +682,7 @@ var ClipboardButton = ({
   const defaultAriaLabel = typeof tooltip === "string" && tooltip.trim() ? tooltip : DEFAULT_ARIA_LABEL;
   const ariaLabel = rest["aria-label"] ?? (children == null ? defaultAriaLabel : void 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Clipboard,
+    Clipboard2,
     {
       asChild: true,
       tooltip,
@@ -860,10 +699,19 @@ var ClipboardButton = ({
 var MIN_SCALE = 0.5;
 var MAX_SCALE = 3;
 var ZOOM_STEP = 0.1;
-var ZoomableSvg = ({ html, copyText, className }) => {
+var ZoomableSvg = ({
+  html,
+  copyText,
+  className,
+  allowForeignObject,
+  renderActions
+}) => {
   const safeHtml = react.useMemo(
-    () => DOMPurify__default.default.sanitize(html, { USE_PROFILES: { svg: true, svgFilters: true } }),
-    [html]
+    () => DOMPurify__default.default.sanitize(html, {
+      USE_PROFILES: { svg: true, svgFilters: true },
+      ...allowForeignObject ? { ADD_TAGS: ["foreignObject"] } : {}
+    }),
+    [html, allowForeignObject]
   );
   const containerRef = react.useRef(null);
   const [scale, setScale] = react.useState(1);
@@ -892,7 +740,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
     };
     el.addEventListener("wheel", onWheel, { passive: false });
     return () => el.removeEventListener("wheel", onWheel);
-  }, []);
+  }, [isFullscreen]);
   const didDragRef = react.useRef(false);
   const handleMouseDown = react.useCallback(
     (e) => {
@@ -936,7 +784,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
     "div",
     {
       role: "presentation",
-      className: cn("tw-group/zoom tw-relative", isFullscreen && "tw-h-full"),
+      className: cn("tw:group/zoom tw:relative", isFullscreen && "tw:h-full"),
       onClick: handleClick,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -945,8 +793,8 @@ var ZoomableSvg = ({ html, copyText, className }) => {
             role: "presentation",
             ref: containerRef,
             className: cn(
-              "tw-overflow-hidden tw-cursor-grab active:tw-cursor-grabbing tw-p-3",
-              isFullscreen && "tw-h-full"
+              "tw:overflow-hidden tw:cursor-grab tw:active:cursor-grabbing tw:p-3",
+              isFullscreen && "tw:h-full"
             ),
             onMouseDown: handleMouseDown,
             onMouseMove: handleMouseMove,
@@ -956,8 +804,8 @@ var ZoomableSvg = ({ html, copyText, className }) => {
               "div",
               {
                 className: cn(
-                  "tw-flex tw-justify-center tw-origin-center",
-                  isFullscreen && "tw-h-full [&>svg]:tw-h-full"
+                  "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 }
@@ -969,11 +817,12 @@ var ZoomableSvg = ({ html, copyText, className }) => {
           "div",
           {
             role: "presentation",
-            className: "tw-absolute tw-right-1 tw-top-1 tw-flex tw-gap-1 tw-opacity-0 tw-transition-opacity group-hover/zoom:tw-opacity-100",
+            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__ */ jsxRuntime.jsx(Tooltip, { tooltip: "Reset zoom", placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "small", variant: "outline", onClick: handleReset, children: "Reset" }) }),
               copyText && /* @__PURE__ */ jsxRuntime.jsx(ClipboardButton, { text: copyText, tooltip: "Copy code", size: "icon-sm", variant: "outline" }),
+              renderActions?.(safeHtml),
               /* @__PURE__ */ jsxRuntime.jsx(
                 Tooltip,
                 {
@@ -987,7 +836,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
                       variant: "outline",
                       "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
                       onClick: () => setIsFullscreen((f) => !f),
-                      children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Minimize2, { className: "tw-size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Maximize2, { className: "tw-size-4" })
+                      children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "tw:size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "tw:size-4" })
                     }
                   )
                 }
@@ -999,36 +848,112 @@ var ZoomableSvg = ({ html, copyText, className }) => {
     }
   );
   if (isFullscreen) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        role: "presentation",
-        className: "tw-fixed tw-inset-0 tw-z-[1060] tw-bg-muted tw-p-4",
-        onClick: stopPropagation,
-        children: diagramContent
-      }
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
-        "tw-overflow-hidden tw-rounded-md tw-border tw-border-border tw-bg-muted",
+        "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 = react.useId();
+  const keys = Array.from({ length: count }, (_, i) => `${prefixId}-${i}`);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: keys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-skeleton": "true",
+      className: cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className)
+    },
+    key
+  )) });
+};
+var DiagramSkeleton = () => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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("--color-primary").trim() || PRIMARY_FALLBACK_CHANNELS;
+  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",
@@ -1092,7 +1017,9 @@ var getMermaid = () => {
   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(
       beautifulMermaid.renderMermaidSVG(code, {
@@ -1102,27 +1029,11 @@ var tryFastRender = (code) => {
         font: "Inter, system-ui, sans-serif"
       })
     );
-  } catch {
+  } catch (err) {
+    console.debug("[MermaidDiagram] fast render unavailable, using async fallback:", err);
     return null;
   }
 };
-var makeResponsive = (svgString) => {
-  const viewBoxMatch = svgString.match(/viewBox="[^"]*\s([\d.]+)\s[\d.]+"/);
-  const vbWidth = viewBoxMatch ? Math.round(Number(viewBoxMatch[1])) : void 0;
-  let result = svgString.replace(/(<svg[^>]*?)\s+width="[^"]*"/i, '$1 width="100%"').replace(/(<svg[^>]*?)\s+height="[^"]*"/i, "$1");
-  if (!vbWidth) return result;
-  const hasStyle = /(<svg[^>]*?)\s+style="([^"]*)"/i.test(result);
-  if (hasStyle) {
-    result = result.replace(/(<svg[^>]*?)\s+style="([^"]*)"/i, (_m, pre, styles) => {
-      const cleaned = styles.replace(/max-width:\s*[^;"]*;?\s*/g, "").trim();
-      const combined = [cleaned, `max-width: ${vbWidth}px`].filter(Boolean).join("; ");
-      return `${pre} style="${combined}"`;
-    });
-  } else {
-    result = result.replace(/<svg/, `<svg style="max-width: ${vbWidth}px"`);
-  }
-  return result;
-};
 var RENDER_DEBOUNCE_MS = 300;
 var svgCache = /* @__PURE__ */ new Map();
 var resolveSyncSvg = (code) => {
@@ -1132,7 +1043,7 @@ var resolveSyncSvg = (code) => {
   if (fast) svgCache.set(code, fast);
   return fast;
 };
-var MermaidDiagram = ({ code }) => {
+var MermaidDiagram = ({ code, renderActions }) => {
   const id = react.useId();
   const [svg, setSvg] = react.useState(() => resolveSyncSvg(code));
   const [renderFailed, setRenderFailed] = react.useState(false);
@@ -1163,8 +1074,9 @@ var MermaidDiagram = ({ code }) => {
         try {
           const result = await mermaidModule.default.render(rendererId, code, container);
           if (renderIdRef.current === currentRenderId && result) {
-            svgCache.set(code, result.svg);
-            setSvg(result.svg);
+            const svgOutput = flattenForeignObjectLabels(result.svg);
+            svgCache.set(code, svgOutput);
+            setSvg(svgOutput);
             setRenderFailed(false);
           }
         } finally {
@@ -1193,11 +1105,11 @@ var MermaidDiagram = ({ code }) => {
       "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"
+          "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__ */ jsxRuntime.jsx("code", { children: code })
       }
@@ -1211,12 +1123,14 @@ var MermaidDiagram = ({ code }) => {
         copyText: `\`\`\`mermaid
 ${code}
 \`\`\``,
-        className: "tw-my-3"
+        className: "tw:my-3",
+        allowForeignObject: true,
+        renderActions
       },
       code
     );
   }
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Skeleton, { className: "tw-h-40" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(DiagramSkeleton, {});
 };
 
 exports.MermaidDiagram = MermaidDiagram;