@keboola/design 6.4.0 → 8.0.0

package/dist/markdown-editor.cjs

@@ -7,8 +7,9 @@ var react = require('react');
 var reactTooltip = require('@radix-ui/react-tooltip');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var lucide_react_star = require('lucide-react');
+var lucideReact = require('lucide-react');
 var reactSlot = require('@radix-ui/react-slot');
+var reactDom = require('react-dom');
 var DOMPurify = require('dompurify');
 var beautifulMermaid = require('beautiful-mermaid');
 var colors = require('@keboola/tailwind-config/colors');
@@ -34,7 +35,6 @@ var richText = require('@lexical/rich-text');
 var lexical = require('lexical');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var sonner = require('sonner');
-var reactDom = require('react-dom');
 var utils = require('@lexical/utils');
 var DropdownMenuPrimitive3 = require('@radix-ui/react-dropdown-menu');
 var ScrollAreaPrimitive2 = require('@radix-ui/react-scroll-area');
@@ -61,7 +61,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var lucide_react_star__namespace = /*#__PURE__*/_interopNamespace(lucide_react_star);
 var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
 var colors__default = /*#__PURE__*/_interopDefault(colors);
 var DropdownMenuPrimitive3__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive3);
@@ -70,9 +69,7 @@ var TextareaAutosize__default = /*#__PURE__*/_interopDefault(TextareaAutosize);
 var RLabel__namespace = /*#__PURE__*/_interopNamespace(RLabel);
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
@@ -80,20 +77,11 @@ 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);
 var twMerge, cn;
 var init_classNames = __esm({
   "src/utils/classNames.ts"() {
     twMerge = tailwindMerge.extendTailwindMerge({
-      prefix: "tw-"
+      prefix: "tw"
     });
     cn = (...classes) => twMerge(clsx.clsx(...classes));
   }
@@ -212,39 +200,39 @@ var init_TooltipContent = __esm({
     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: {
@@ -253,22 +241,26 @@ var init_TooltipContent = __esm({
         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"
             ]
           }
         }
@@ -353,8 +345,8 @@ var init_TooltipTrigger = __esm({
             // (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 })
           )
         }
       );
@@ -378,6 +370,7 @@ var init_Tooltip = __esm({
       placement = "right",
       forceHide = false,
       forceShow = false,
+      delayDuration,
       // trigger props
       triggerAsChild = false
     }) => {
@@ -397,6 +390,7 @@ var init_Tooltip = __esm({
         {
           open: !!tooltip && (open || forceShow) && !forceHide,
           onOpenChange: setOpen,
+          delayDuration,
           disableHoverableContent: isActionVariant,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -527,31 +521,31 @@ var init_Skeleton = __esm({
   "src/components/Skeleton/Skeleton.tsx"() {
     init_utils2();
     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"
+      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"
     };
     ANIMATION_CLASS_NAME = cn(
       // base styles
-      "tw-relative",
-      "tw-overflow-hidden",
-      "tw-pointer-events-none",
-      "tw-bg-skeleton",
+      "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"
+      '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"
     );
     Skeleton = ({ height = "md", className, count = 1 }) => {
       const prefixId = react.useId();
@@ -567,128 +561,8 @@ var init_Skeleton = __esm({
     };
   }
 });
-var Google;
-var init_Google = __esm({
-  "src/icons/Google.tsx"() {
-    init_utils2();
-    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;
-var init_Keboola = __esm({
-  "src/icons/Keboola.tsx"() {
-    init_utils2();
-    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;
-var init_Microsoft = __esm({
-  "src/icons/Microsoft.tsx"() {
-    init_utils2();
-    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";
-  }
-});
-
-// src/icons/index.ts
-var icons_exports = {};
-__export(icons_exports, {
-  Google: () => Google,
-  Keboola: () => Keboola,
-  Microsoft: () => Microsoft
-});
 var init_icons = __esm({
   "src/icons/index.ts"() {
-    __reExport(icons_exports, lucide_react_star__namespace);
-    init_Google();
-    init_Keboola();
-    init_Microsoft();
   }
 });
 var variants, argoVariants;
@@ -697,43 +571,46 @@ var init_styles = __esm({
     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: {
@@ -743,113 +620,113 @@ var init_styles = __esm({
         },
         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']
           }
         }
       }
@@ -858,37 +735,37 @@ var init_styles = __esm({
       [
         "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: {
@@ -897,77 +774,77 @@ var init_styles = __esm({
         },
         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": [],
@@ -1024,7 +901,7 @@ var init_Button = __esm({
           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 })
           ]
         }
@@ -1037,18 +914,18 @@ var init_ButtonInline = __esm({
     classVarianceAuthority.cva(
       [
         "tailwindcss-preflight",
-        "tw-inline-flex",
-        "tw-items-center",
-        "tw-gap-2",
-        "tw-underline-offset-2",
-        "disabled:tw-opacity-40",
-        "disabled:tw-cursor-not-allowed",
-        "disabled:tw-text-neutral-500",
-        "disabled:tw-no-underline",
-        "[&_svg]:disabled:tw-text-neutral-400",
+        "tw:inline-flex",
+        "tw:items-center",
+        "tw:gap-2",
+        "tw:underline-offset-2",
+        "tw:disabled:opacity-40",
+        "tw:disabled:cursor-not-allowed",
+        "tw:disabled:text-neutral-500",
+        "tw:disabled:no-underline",
+        "tw:disabled:[&_svg]:text-neutral-400",
         // Default size for nested Lucide icons; callers can override on the icon.
-        "[&_svg.lucide:not([class*='tw-size-'])]:tw-size-4",
-        "[&_svg]:tw-shrink-0"
+        "tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4",
+        "tw:[&_svg]:shrink-0"
       ],
       {
         defaultVariants: {
@@ -1057,15 +934,15 @@ var init_ButtonInline = __esm({
         },
         variants: {
           color: {
-            link: ["tw-text-primary", "hover:tw-text-primary/90", "[&_svg]:tw-text-primary"],
-            dark: ["tw-text-neutral-800 [&_svg]:tw-text-neutral-400"],
-            danger: ["tw-text-error-500 [&_svg]:tw-text-error-500"],
-            muted: ["tw-text-muted-foreground [&_svg]:tw-text-muted-foreground"],
+            link: ["tw:text-primary", "tw:hover:text-primary/90", "tw:[&_svg]:text-primary"],
+            dark: ["tw:text-neutral-800 tw:[&_svg]:text-neutral-400"],
+            danger: ["tw:text-error-500 tw:[&_svg]:text-error-500"],
+            muted: ["tw:text-muted-foreground tw:[&_svg]:text-muted-foreground"],
             custom: []
           },
           variant: {
-            link: ["tw-underline", "hover:tw-no-underline"],
-            "link-reverse": ["tw-no-underline", "", "hover:tw-underline"],
+            link: ["tw:underline", "tw:hover:no-underline"],
+            "link-reverse": ["tw:no-underline", "", "tw:hover:underline"],
             custom: []
           }
         }
@@ -1081,12 +958,12 @@ var init_Button2 = __esm({
     init_ButtonInline();
   }
 });
-var Clipboard;
+var Clipboard2;
 var init_Clipboard = __esm({
   "src/components/Clipboard/Clipboard.tsx"() {
     init_utils2();
     init_Tooltip2();
-    Clipboard = ({
+    Clipboard2 = ({
       ref,
       text: textProp,
       children,
@@ -1111,6 +988,7 @@ var init_Clipboard = __esm({
         }
       };
       const handleOnClick = (event) => {
+        setIsTooltipOpen(true);
         if (text && state === "ready") void copy(text);
         onClick?.(event);
       };
@@ -1125,6 +1003,7 @@ var init_Clipboard = __esm({
         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,
@@ -1133,12 +1012,12 @@ var init_Clipboard = __esm({
             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,
@@ -1164,7 +1043,7 @@ var init_ClipboardButton = __esm({
     init_Button2();
     init_Clipboard2();
     init_icons();
-    DEFAULT_ICON = /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Copy, {});
+    DEFAULT_ICON = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, {});
     DEFAULT_ARIA_LABEL = "Copy";
     ClipboardButton = ({
       // clipboard props
@@ -1181,7 +1060,7 @@ var init_ClipboardButton = __esm({
       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,
@@ -1215,10 +1094,19 @@ var init_ZoomableSvg = __esm({
     MIN_SCALE = 0.5;
     MAX_SCALE = 3;
     ZOOM_STEP = 0.1;
-    ZoomableSvg = ({ html, copyText, className }) => {
+    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);
@@ -1247,7 +1135,7 @@ var init_ZoomableSvg = __esm({
         };
         el.addEventListener("wheel", onWheel, { passive: false });
         return () => el.removeEventListener("wheel", onWheel);
-      }, []);
+      }, [isFullscreen]);
       const didDragRef = react.useRef(false);
       const handleMouseDown = react.useCallback(
         (e) => {
@@ -1291,7 +1179,7 @@ var init_ZoomableSvg = __esm({
         "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(
@@ -1300,8 +1188,8 @@ var init_ZoomableSvg = __esm({
                 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,
@@ -1311,8 +1199,8 @@ var init_ZoomableSvg = __esm({
                   "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 }
@@ -1324,11 +1212,12 @@ var init_ZoomableSvg = __esm({
               "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,
                     {
@@ -1342,7 +1231,7 @@ var init_ZoomableSvg = __esm({
                           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" })
                         }
                       )
                     }
@@ -1354,21 +1243,25 @@ var init_ZoomableSvg = __esm({
         }
       );
       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
@@ -1384,27 +1277,72 @@ var init_ZoomableSvg2 = __esm({
     init_ZoomableSvg();
   }
 });
+var DiagramSkeleton;
+var init_DiagramSkeleton = __esm({
+  "src/blocks/MermaidDiagram/DiagramSkeleton.tsx"() {
+    init_Skeleton();
+    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, FOREIGN_OBJECT, ROOT_SVG_TAG, flattenForeignObjectLabels, STYLE_ATTR, makeResponsive;
+var init_svgTransforms = __esm({
+  "src/blocks/MermaidDiagram/svgTransforms.ts"() {
+    HTML_TAG = /<[^>]+>/g;
+    FOREIGN_OBJECT = /(<foreignObject\b[^>]*>)([\s\S]*?)(<\/foreignObject>)/g;
+    ROOT_SVG_TAG = /^(\s*<svg\b)([^>]*)(>)/i;
+    flattenForeignObjectLabels = (svg) => svg.replace(FOREIGN_OBJECT, (_match, open, inner, close) => {
+      const text = inner.replace(HTML_TAG, " ").replace(/\s+/g, " ").trim();
+      return `${open}${text}${close}`;
+    });
+    STYLE_ATTR = /\s+style="([^"]*)"/i;
+    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}`;
+      });
+    };
+  }
+});
 
 // src/blocks/MermaidDiagram/MermaidDiagram.tsx
 var MermaidDiagram_exports = {};
 __export(MermaidDiagram_exports, {
   MermaidDiagram: () => MermaidDiagram
 });
-var PRIMARY_FALLBACK_CHANNELS, resolvePrimary, mermaidPromise, getMermaid, stripFontImports, tryFastRender, makeResponsive, RENDER_DEBOUNCE_MS, svgCache, resolveSyncSvg, MermaidDiagram;
+var PRIMARY_FALLBACK_CHANNELS, resolvePrimary, mermaidPromise, registerLucideIconPack, getMermaid, stripFontImports, hasIconSyntax, tryFastRender, RENDER_DEBOUNCE_MS, svgCache, resolveSyncSvg, MermaidDiagram;
 var init_MermaidDiagram = __esm({
   "src/blocks/MermaidDiagram/MermaidDiagram.tsx"() {
-    init_Skeleton();
     init_ZoomableSvg2();
     init_utils2();
+    init_DiagramSkeleton();
+    init_svgTransforms();
     PRIMARY_FALLBACK_CHANNELS = "31 143 255";
     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})`;
     };
     mermaidPromise = null;
+    registerLucideIconPack = (m) => {
+      m.registerIconPacks([
+        {
+          name: "lucide",
+          loader: () => import('@iconify-json/lucide/icons.json').then((mod) => mod.default)
+        }
+      ]);
+    };
     getMermaid = () => {
       if (!mermaidPromise) {
         mermaidPromise = import('mermaid').then((m) => {
+          registerLucideIconPack(m.default);
           m.default.initialize({
             startOnLoad: false,
             securityLevel: "strict",
@@ -1468,7 +1406,9 @@ var init_MermaidDiagram = __esm({
       return mermaidPromise;
     };
     stripFontImports = (svg) => svg.replace(/@import\s+url\([^)]*fonts\.googleapis\.com[^)]*\);?\s*/g, "");
+    hasIconSyntax = (code) => /@\{[^}]*\bicon\s*:/.test(code) || /\b(?:icon|service|group)\b[^\n(]*\(\s*[\w-]+:/.test(code) || /\bfa[bslr]?:fa-/.test(code);
     tryFastRender = (code) => {
+      if (hasIconSyntax(code)) return null;
       try {
         return stripFontImports(
           beautifulMermaid.renderMermaidSVG(code, {
@@ -1478,27 +1418,11 @@ var init_MermaidDiagram = __esm({
             font: "Inter, system-ui, sans-serif"
           })
         );
-      } catch {
+      } catch (err) {
+        console.debug("[MermaidDiagram] fast render unavailable, using async fallback:", err);
         return null;
       }
     };
-    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;
-    };
     RENDER_DEBOUNCE_MS = 300;
     svgCache = /* @__PURE__ */ new Map();
     resolveSyncSvg = (code) => {
@@ -1508,7 +1432,7 @@ var init_MermaidDiagram = __esm({
       if (fast) svgCache.set(code, fast);
       return fast;
     };
-    MermaidDiagram = ({ code }) => {
+    MermaidDiagram = ({ code, renderActions }) => {
       const id = react.useId();
       const [svg, setSvg] = react.useState(() => resolveSyncSvg(code));
       const [renderFailed, setRenderFailed] = react.useState(false);
@@ -1539,8 +1463,9 @@ var init_MermaidDiagram = __esm({
             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 {
@@ -1569,11 +1494,11 @@ var init_MermaidDiagram = __esm({
           "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 })
           }
@@ -1587,17 +1512,19 @@ var init_MermaidDiagram = __esm({
             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, {});
     };
   }
 });
 
-// src/components/MarkdownEditor/MarkdownEditor.tsx
+// src/blocks/MarkdownEditor/MarkdownEditor.tsx
 init_utils2();
 var ImageRendererContext = react.createContext(null);
 var ImageRendererProvider = ImageRendererContext;
@@ -1606,7 +1533,7 @@ var isPlaceholder = (src) => src.startsWith("upload-placeholder-");
 var ImageNodeComponent = ({ src, alt }) => {
   const renderer = useImageRenderer();
   if (isPlaceholder(src)) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-inline-flex tw-items-center tw-gap-1 tw-rounded tw-bg-neutral-100 tw-px-2 tw-py-1 tw-text-xs tw-text-neutral-400", children: "Uploading image\u2026" });
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw:inline-flex tw:items-center tw:gap-1 tw:rounded tw:bg-neutral-100 tw:px-2 tw:py-1 tw:text-xs tw:text-neutral-400", children: "Uploading image\u2026" });
   }
   if (renderer) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderer({ src, alt }) });
   return /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt });
@@ -1693,7 +1620,7 @@ var $isImageNode = (node) => {
   return node instanceof ImageNode;
 };
 
-// src/components/MarkdownEditor/nodes/MermaidNodeComponent.tsx
+// src/blocks/MarkdownEditor/nodes/MermaidNodeComponent.tsx
 init_Skeleton();
 var MermaidDiagram2 = react.lazy(
   () => Promise.resolve().then(() => (init_MermaidDiagram(), MermaidDiagram_exports)).then(
@@ -1710,7 +1637,7 @@ var MermaidNodeComponent = ({ code }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Suspense,
     {
-      fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-my-3 tw-overflow-hidden tw-rounded-card tw-border tw-border-neutral-150 tw-bg-neutral-50 tw-p-6", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "tw-h-40" }) }),
+      fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw:my-3 tw:overflow-hidden tw:rounded-card tw:border tw:border-neutral-150 tw:bg-neutral-50 tw:p-6", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "tw:h-40" }) }),
       children: /* @__PURE__ */ jsxRuntime.jsx(MermaidDiagram2, { code })
     }
   );
@@ -1776,11 +1703,7 @@ init_context();
 
 // src/components/Toast/ToastAction.tsx
 init_utils2();
-var ToastAction = ({
-  ref,
-  className,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastAction = ({ ref, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
   "button",
   {
     ...rest,
@@ -1789,21 +1712,21 @@ var ToastAction = ({
     type: "button",
     className: cn(
       // layout
-      "tw-col-start-3",
-      "tw-row-start-1",
-      "tw-flex",
-      "tw-items-center",
-      "tw-justify-center",
+      "tw:col-start-3",
+      "tw:row-start-1",
+      "tw:flex",
+      "tw:items-center",
+      "tw:justify-center",
       // font
-      "tw-text-xs",
-      "tw-font-medium",
-      "tw-text-primary",
+      "tw:text-xs",
+      "tw:font-medium",
+      "tw:text-primary",
       // sizing
-      "tw-px-2",
-      "tw-h-6",
+      "tw:px-2",
+      "tw:h-6",
       // styles
-      "tw-bg-primary-foreground",
-      "tw-rounded",
+      "tw:bg-primary-foreground",
+      "tw:rounded",
       className
     )
   }
@@ -1811,22 +1734,17 @@ var ToastAction = ({
 
 // src/components/Toast/ToastDescription.tsx
 init_utils2();
-var ToastDescription = ({
-  ref,
-  className,
-  children,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastDescription = ({ ref, className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
     "data-slot": "toast-description",
     className: cn(
-      "tw-col-start-2",
-      "tw-font-normal",
-      "tw-break-words",
-      "tw-text-white",
-      "group-data-[variant=default]/toast:tw-text-muted-foreground",
+      "tw:col-start-2",
+      "tw:font-normal",
+      "tw:break-words",
+      "tw:text-white",
+      "tw:group-data-[variant=default]/toast:text-muted-foreground",
       className
     ),
     ...rest,
@@ -1837,66 +1755,56 @@ var ToastDescription = ({
 // src/components/Toast/ToastDismiss.tsx
 init_icons();
 init_utils2();
-var ToastDismiss = ({
-  ref,
-  className,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsxs(
+var ToastDismiss = ({ ref, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "button",
   {
     ref,
     "data-slot": "toast-dismiss",
     className: cn(
-      "tw-flex",
-      "tw-justify-center",
-      "tw-col-start-4",
-      "tw-row-start-1",
+      "tw:flex",
+      "tw:justify-center",
+      "tw:col-start-4",
+      "tw:row-start-1",
       "tailwindcss-preflight",
-      "[&_svg]:tw-aspect-square",
-      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
-      "[&_svg]:tw-m-1",
-      "tw-text-white",
-      "group-data-[variant=default]/toast:[&_svg]:tw-text-popover-foreground",
-      "group-data-[variant=default]/toast:group-data-[argo=true]/toast:[&_svg]:tw-text-foreground",
+      "tw:[&_svg]:aspect-square",
+      'tw:[&_svg:not([class*="tw:size-"])]:size-4',
+      "tw:[&_svg]:m-1",
+      "tw:text-white",
+      "tw:group-data-[variant=default]/toast:[&_svg]:text-popover-foreground",
+      "tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:[&_svg]:text-foreground",
       className
     ),
     type: "button",
     ...rest,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(icons_exports.X, {}),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-sr-only", children: "Dismiss" })
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw:sr-only", children: "Dismiss" })
     ]
   }
 );
 
 // src/components/Toast/ToastDuration.tsx
 init_utils2();
-var ToastDuration = ({
-  ref,
-  duration,
-  className,
-  style,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastDuration = ({ ref, duration, className, style, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
   "span",
   {
     ...rest,
     ref,
     className: cn(
-      "tw-bg-white/30",
-      "group-data-[variant=default]/toast:tw-bg-popover-foreground/20",
-      "group-data-[variant=default]/toast:group-data-[argo=true]/toast:tw-bg-foreground/20",
-      "tw-rounded-bl-lg",
-      "tw-mx-px",
+      "tw:bg-white/30",
+      "tw:group-data-[variant=default]/toast:bg-popover-foreground/20",
+      "tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:bg-foreground/20",
+      "tw:rounded-bl-lg",
+      "tw:mx-px",
       // positioning
-      "tw-absolute",
-      "tw-bottom-0",
-      "tw-left-0",
+      "tw:absolute",
+      "tw:bottom-0",
+      "tw:left-0",
       // sizing
-      "tw-h-1",
+      "tw:h-1",
       // animation
-      "tw-animate-toast-progress",
-      "group-hover/toast:[animation-play-state:paused]",
+      "tw:animate-toast-progress",
+      "tw:group-hover/toast:[animation-play-state:paused]",
       className
     ),
     style: {
@@ -1908,27 +1816,22 @@ var ToastDuration = ({
 
 // src/components/Toast/ToastTitle.tsx
 init_utils2();
-var ToastTitle = ({
-  ref,
-  className,
-  children,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastTitle = ({ ref, className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
     "data-slot": "toast-title",
     className: cn(
-      "tw-col-start-2",
-      "tw-text-sm",
-      "tw-leading-6",
-      "tw-min-h-6",
-      "tw-self-center",
-      "tw-text-white",
-      "group-data-[variant=default]/toast:tw-text-popover-foreground",
-      "group-data-[variant=default]/toast:group-data-[argo=true]/toast:tw-text-foreground",
-      "tw-break-words",
-      "tw-font-medium",
+      "tw:col-start-2",
+      "tw:text-sm",
+      "tw:leading-6",
+      "tw:min-h-6",
+      "tw:self-center",
+      "tw:text-white",
+      "tw:group-data-[variant=default]/toast:text-popover-foreground",
+      "tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:text-foreground",
+      "tw:break-words",
+      "tw:font-medium",
       className
     ),
     ...rest,
@@ -1938,24 +1841,24 @@ var ToastTitle = ({
 var variants2 = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
-    "tw-group/toast",
-    "tw-relative",
+    "tw:group/toast",
+    "tw:relative",
     // layout
-    "tw-grid",
-    "tw-grid-cols-[0_1fr_auto_auto]",
-    "tw-items-start",
-    "has-[[data-slot=toast-description]]:tw-grid-rows-[auto_auto]",
-    "has-[[data-slot=toast-icon]]:tw-grid-cols-[auto_1fr_auto_auto]",
-    "[&_[data-slot=toast-icon]]:tw-mr-2",
-    "[&_[data-slot=toast-title]]:tw-mr-2.5",
-    "[&_[data-slot=toast-description]]:tw-mr-2.5",
-    "[&_[data-slot=toast-action]]:tw-mr-2",
-    "[&_[data-slot=toast-description]]:tw-col-end-3",
-    "tw-gap-y-0",
+    "tw:grid",
+    "tw:grid-cols-[0_1fr_auto_auto]",
+    "tw:items-start",
+    "tw:has-[[data-slot=toast-description]]:grid-rows-[auto_auto]",
+    "tw:has-[[data-slot=toast-icon]]:grid-cols-[auto_1fr_auto_auto]",
+    "tw:[&_[data-slot=toast-icon]]:mr-2",
+    "tw:[&_[data-slot=toast-title]]:mr-2.5",
+    "tw:[&_[data-slot=toast-description]]:mr-2.5",
+    "tw:[&_[data-slot=toast-action]]:mr-2",
+    "tw:[&_[data-slot=toast-description]]:col-end-3",
+    "tw:gap-y-0",
     // styles
-    "tw-p-4",
-    "tw-rounded-lg",
-    "tw-shadow-md"
+    "tw:p-4",
+    "tw:rounded-lg",
+    "tw:shadow-md"
   ],
   {
     defaultVariants: {
@@ -1963,20 +1866,20 @@ var variants2 = classVarianceAuthority.cva(
     },
     variants: {
       variant: {
-        default: "tw-border tw-border-border tw-bg-popover",
-        error: "tw-bg-error-550",
-        info: "tw-bg-blue-600",
-        success: "tw-bg-green-700",
-        warning: "tw-bg-warning-550"
+        default: "tw:border tw:border-border tw:bg-popover",
+        error: "tw:bg-error-550",
+        info: "tw:bg-blue-600",
+        success: "tw:bg-green-700",
+        warning: "tw:bg-warning-550"
       }
     }
   }
 );
 var DEFAULT_VARIANT_ICON = {
-  error: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.AlertTriangle, {}),
-  info: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Info, {}),
-  success: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.CircleCheck, {}),
-  warning: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.AlertCircle, {})
+  error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, {}),
+  info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}),
+  success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, {})
 };
 var ToastRoot = ({
   id,
@@ -1990,7 +1893,7 @@ var ToastRoot = ({
 }) => {
   const renderArgo = useArgoDesign();
   const icon = (() => {
-    if (loading) return /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-animate-spin" });
+    if (loading) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw:animate-spin" });
     if (iconProp) return iconProp;
     if (variant === "default" || variant === null) return null;
     return DEFAULT_VARIANT_ICON[variant];
@@ -2006,7 +1909,7 @@ var ToastRoot = ({
       "data-argo": renderArgo,
       className: cn(
         variants2({ variant }),
-        "data-[variant=default]:data-[argo=true]:tw-bg-background"
+        "tw:data-[variant=default]:data-[argo=true]:bg-background"
       ),
       children: [
         icon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2014,17 +1917,17 @@ var ToastRoot = ({
           {
             "data-slot": "toast-icon",
             className: cn(
-              "tw-inline-flex",
-              "tw-items-center",
-              "tw-justify-center",
-              "tw-self-center",
-              "tw-aspect-square",
-              "tw-size-5",
-              "tw-shrink-0",
-              '[&_svg:not([class*="tw-size-"])]:tw-size-5',
-              "tw-text-white",
-              "group-data-[variant=default]/toast:tw-text-popover-foreground",
-              "group-data-[variant=default]/toast:group-data-[argo=true]/toast:tw-text-foreground"
+              "tw:inline-flex",
+              "tw:items-center",
+              "tw:justify-center",
+              "tw:self-center",
+              "tw:aspect-square",
+              "tw:size-5",
+              "tw:shrink-0",
+              'tw:[&_svg:not([class*="tw:size-"])]:size-5',
+              "tw:text-white",
+              "tw:group-data-[variant=default]/toast:text-popover-foreground",
+              "tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:text-foreground"
             ),
             children: icon
           }
@@ -2070,7 +1973,7 @@ var toast = ({
     dismissible,
     duration,
     // override default focus-visible styles to match our design
-    className: cn("tw-rounded-lg", "focus-visible:!tw-ring-4", "focus-visible:!tw-ring-ring/50")
+    className: cn("tw:rounded-lg", "tw:focus-visible:!ring-4", "tw:focus-visible:!ring-ring/50")
   });
 };
 toast.success = (title, options) => toast({
@@ -2098,7 +2001,7 @@ toast.info = (title, options) => toast({
 toast.dismiss = (toastId) => sonner.toast.dismiss(toastId);
 toast.dismissAll = () => sonner.toast.dismiss();
 
-// src/components/MarkdownEditor/plugins/ImagePastePlugin.tsx
+// src/blocks/MarkdownEditor/plugins/ImagePastePlugin.tsx
 var ACCEPTED_IMAGE_TYPES = [
   "image/png",
   "image/jpeg",
@@ -2376,7 +2279,7 @@ var postprocessMarkdown = (markdown) => {
 };
 var unescapeMarkdownText = (markdown) => markdown.replace(/\\([*_`~\\])/g, "$1");
 
-// src/components/MarkdownEditor/plugins/MarkdownSyncPlugin.tsx
+// src/blocks/MarkdownEditor/plugins/MarkdownSyncPlugin.tsx
 var IMPORT_TAG = "markdown-import";
 var MarkdownSyncPlugin = ({
   value,
@@ -2422,13 +2325,9 @@ var MarkdownSyncPlugin = ({
   return null;
 };
 
-// src/components/MarkdownEditor/plugins/ToolbarPlugin.tsx
+// src/blocks/MarkdownEditor/plugins/ToolbarPlugin.tsx
 init_icons();
 
-// src/components/MarkdownEditor/plugins/toolbar/AlignmentDropdown.tsx
-init_icons();
-init_utils2();
-
 // src/components/DropdownMenu/DropdownMenu.tsx
 init_context();
 
@@ -2441,59 +2340,59 @@ init_icons();
 var variants3 = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
-    "tw-pointer-events-none",
+    "tw:pointer-events-none",
     // sizing
-    "tw-size-4",
-    "tw-aspect-square",
-    "tw-shrink-0",
+    "tw:size-4",
+    "tw:aspect-square",
+    "tw:shrink-0",
     // layout
-    "tw-flex",
-    "tw-items-center",
-    "tw-justify-center"
+    "tw:flex",
+    "tw:items-center",
+    "tw:justify-center"
   ],
   {
     variants: {
       variant: {
         none: [],
         radio: [
-          "tw-border",
-          "tw-border-solid",
-          "tw-border-border",
-          "tw-rounded-full",
-          "group-data-[variant=default]/dropdown-menu-content:tw-bg-white",
-          "group-data-[variant=argo]/dropdown-menu-content:tw-bg-background",
-          '[&_svg:not([class*="tw-size-"])]:tw-size-2',
-          "[&_svg]:data-[state=unchecked]:tw-hidden",
+          "tw:border",
+          "tw:border-solid",
+          "tw:border-border",
+          "tw:rounded-full",
+          "tw:group-data-[variant=default]/dropdown-menu-content:bg-white",
+          "tw:group-data-[variant=argo]/dropdown-menu-content:bg-background",
+          'tw:[&_svg:not([class*="tw:size-"])]:size-2',
+          "tw:data-[state=unchecked]:[&_svg]:hidden",
           // Lucide Circle is stroke-only — force fill to match the stroke
           // (currentColor) so the indicator reads as a solid dot.
-          "[&_svg]:tw-fill-current",
-          "group-data-[variant=argo]/dropdown-menu-content:[&_svg]:tw-text-primary",
-          "group-data-[variant=default]/dropdown-menu-content:[&_svg]:tw-text-primary"
+          "tw:[&_svg]:fill-current",
+          "tw:group-data-[variant=argo]/dropdown-menu-content:[&_svg]:text-primary",
+          "tw:group-data-[variant=default]/dropdown-menu-content:[&_svg]:text-primary"
         ],
-        check: ['[&_svg:not([class*="tw-size-"])]:tw-size-3.5', "[&_svg]:tw-text-primary"],
+        check: ['tw:[&_svg:not([class*="tw:size-"])]:size-3.5', "tw:[&_svg]:text-primary"],
         checkbox: [
-          "[&_svg]:tw-text-primary-foreground",
-          "tw-border",
-          "tw-border-solid",
-          "tw-rounded",
-          "group-data-[variant=default]/dropdown-menu-content:tw-border-neutral-200",
-          "group-data-[variant=argo]/dropdown-menu-content:tw-border-input",
-          '[&_svg:not([class*="tw-size-"])]:tw-size-3',
-          "[&_svg]:data-[state=unchecked]:tw-hidden",
-          "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-border-primary",
-          "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-primary",
-          "group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-border-primary",
-          "group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-bg-primary"
+          "tw:[&_svg]:text-primary-foreground",
+          "tw:border",
+          "tw:border-solid",
+          "tw:rounded",
+          "tw:group-data-[variant=default]/dropdown-menu-content:border-neutral-200",
+          "tw:group-data-[variant=argo]/dropdown-menu-content:border-input",
+          'tw:[&_svg:not([class*="tw:size-"])]:size-3',
+          "tw:data-[state=unchecked]:[&_svg]:hidden",
+          "tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:border-primary",
+          "tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:bg-primary",
+          "tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:border-primary",
+          "tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:bg-primary"
         ],
         switch: [
-          "tw-size-5",
+          "tw:size-5",
           // Lucide SVGs default to 24×24 — constrain the rendered ToggleRight
           // to the indicator slot so it doesn't overflow.
-          '[&_svg:not([class*="tw-size-"])]:tw-size-5',
-          "tw-text-neutral-400",
-          "data-[state=unchecked]:tw-rotate-180",
-          "group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-text-primary",
-          "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-text-primary"
+          'tw:[&_svg:not([class*="tw:size-"])]:size-5',
+          "tw:text-neutral-400",
+          "tw:data-[state=unchecked]:rotate-180",
+          "tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:text-primary",
+          "tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:text-primary"
         ]
       }
     }
@@ -2506,9 +2405,9 @@ var DropdownMenuItemIndicator = ({
   ...rest
 }) => {
   const IconComp = (() => {
-    if (variant === "switch") return icons_exports.ToggleRight;
-    if (variant === "radio") return icons_exports.Circle;
-    return icons_exports.Check;
+    if (variant === "switch") return lucideReact.ToggleRight;
+    if (variant === "radio") return lucideReact.Circle;
+    return lucideReact.Check;
   })();
   const forceMount = (() => {
     if (forceMountProp) return true;
@@ -2533,18 +2432,18 @@ var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime
   {
     ...props,
     className: cn(
-      "tw-inline-flex",
-      "tw-items-center",
-      "tw-justify-center",
-      "tw-aspect-square",
+      "tw:inline-flex",
+      "tw:items-center",
+      "tw:justify-center",
+      "tw:aspect-square",
       // 20px container fits the 16px Lucide glyph plus 2px breathing room
-      // each side — the previous tw-size-4 + tw-p-0.5 clipped the 16px child.
-      "tw-size-5",
-      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
-      "group-data-[variant=default]/dropdown-menu-content:tw-text-neutral-400",
-      "group-data-[variant=argo]/dropdown-menu-content:tw-text-primary",
-      "group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:tw-text-muted-foreground",
-      "group-data-[variant=default]/dropdown-menu-content:group-hover:tw-text-primary",
+      // each side — the previous tw:size-4 + tw:p-0.5 clipped the 16px child.
+      "tw:size-5",
+      'tw:[&_svg:not([class*="tw:size-"])]:size-4',
+      "tw:group-data-[variant=default]/dropdown-menu-content:text-neutral-400",
+      "tw:group-data-[variant=argo]/dropdown-menu-content:text-primary",
+      "tw:group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:text-muted-foreground",
+      "tw:group-data-[variant=default]/dropdown-menu-content:group-hover:text-primary",
       className
     ),
     children
@@ -2556,74 +2455,74 @@ init_utils2();
 var itemVariants = cn(
   // reset
   "tailwindcss-preflight",
-  "tw-outline-none",
-  "tw-group",
-  "tw-peer",
-  "tw-relative",
+  "tw:outline-hidden",
+  "tw:group",
+  "tw:peer",
+  "tw:relative",
   // positioning
-  "tw-flex",
-  "tw-flex-1",
-  "tw-items-center",
-  "tw-gap-2",
-  "tw-cursor-pointer",
-  "tw-select-none",
-  "tw-transition-colors",
+  "tw:flex",
+  "tw:flex-1",
+  "tw:items-center",
+  "tw:gap-2",
+  "tw:cursor-pointer",
+  "tw:select-none",
+  "tw:transition-colors",
   // spacing
-  "tw-p-2",
+  "tw:p-2",
   // typography
-  "tw-font-sans",
-  "tw-text-sm",
-  "aria-disabled:tw-pointer-events-none",
-  "aria-disabled:tw-opacity-50",
-  "focus-visible:tw-outline-none",
-  "group-data-[variant=default]/dropdown-menu-content:tw-rounded",
-  "group-data-[variant=default]/dropdown-menu-content:focus:tw-bg-neutral-100",
-  "group-data-[variant=default]/dropdown-menu-content:focus:tw-text-neutral-900",
-  "group-data-[variant=default]/dropdown-menu-content:hover:tw-bg-neutral-100",
-  "group-data-[variant=default]/dropdown-menu-content:hover:tw-text-neutral-900",
-  "group-data-[variant=argo]/dropdown-menu-content:tw-rounded-md",
-  "group-data-[variant=argo]/dropdown-menu-content:tw-text-popover-foreground",
-  "group-data-[variant=argo]/dropdown-menu-content:focus:tw-text-primary",
-  "group-data-[variant=argo]/dropdown-menu-content:focus:tw-bg-primary/10",
-  "group-data-[variant=argo]/dropdown-menu-content:hover:tw-text-primary",
-  "group-data-[variant=argo]/dropdown-menu-content:hover:tw-bg-primary/10"
+  "tw:font-sans",
+  "tw:text-sm",
+  "tw:aria-disabled:pointer-events-none",
+  "tw:aria-disabled:opacity-50",
+  "tw:focus-visible:outline-hidden",
+  "tw:group-data-[variant=default]/dropdown-menu-content:rounded",
+  "tw:group-data-[variant=default]/dropdown-menu-content:focus:bg-neutral-100",
+  "tw:group-data-[variant=default]/dropdown-menu-content:focus:text-neutral-900",
+  "tw:group-data-[variant=default]/dropdown-menu-content:hover:bg-neutral-100",
+  "tw:group-data-[variant=default]/dropdown-menu-content:hover:text-neutral-900",
+  "tw:group-data-[variant=argo]/dropdown-menu-content:rounded-md",
+  "tw:group-data-[variant=argo]/dropdown-menu-content:text-popover-foreground",
+  "tw:group-data-[variant=argo]/dropdown-menu-content:focus:text-primary",
+  "tw:group-data-[variant=argo]/dropdown-menu-content:focus:bg-primary/10",
+  "tw:group-data-[variant=argo]/dropdown-menu-content:hover:text-primary",
+  "tw:group-data-[variant=argo]/dropdown-menu-content:hover:bg-primary/10"
 );
 var contentVariants = cn(
   "tailwindcss-preflight",
-  "tw-group/dropdown-menu-content",
+  "tw:group/dropdown-menu-content",
   // Sit above Modal/Sheet (z-1051), matching the other floating overlays (Popover/Select z-1055)
-  "tw-z-[1055]",
+  "tw:z-[1055]",
   // positioning
-  "tw-flex",
-  "tw-flex-col",
-  "tw-origin-[--radix-dropdown-menu-content-transform-origin]",
+  "tw:flex",
+  "tw:flex-col",
+  "tw:origin-(--radix-dropdown-menu-content-transform-origin)",
   // sizing
-  "tw-max-h-[var(--radix-dropdown-menu-content-available-height)]",
-  "tw-min-w-32",
+  "tw:max-h-[var(--radix-dropdown-menu-content-available-height)]",
+  "tw:min-w-32",
   // border
-  "tw-border",
-  "tw-shadow-md",
+  "tw:border",
+  "tw:shadow-md",
   // Legacy surface — fixed white panel.
-  "data-[variant=default]:tw-rounded-md",
-  "data-[variant=default]:tw-bg-white",
-  "data-[variant=default]:tw-border-neutral-100",
-  "data-[variant=default]:tw-text-neutral-800",
+  "tw:data-[variant=default]:rounded-md",
+  "tw:data-[variant=default]:bg-white",
+  "tw:data-[variant=default]:border-neutral-100",
+  "tw:data-[variant=default]:text-neutral-800",
   // Argo surface — semantic popover tokens (brand + dark aware).
-  "data-[variant=argo]:tw-rounded-2xl",
-  "data-[variant=argo]:tw-bg-popover",
-  "data-[variant=argo]:tw-text-popover-foreground",
-  "data-[variant=argo]:tw-border-border",
+  "tw:data-[variant=argo]:rounded-2xl",
+  "tw:data-[variant=argo]:bg-popover",
+  "tw:data-[variant=argo]:text-popover-foreground",
+  "tw:data-[variant=argo]:border-border",
   // animations
-  "data-[state=open]:tw-animate-in",
-  "data-[state=open]:tw-fade-in-0",
-  "data-[state=open]:tw-zoom-in-95",
-  "data-[state=closed]:tw-animate-out",
-  "data-[state=closed]:tw-fade-out-0",
-  "data-[state=closed]:tw-zoom-out-95",
-  "data-[side=bottom]:tw-slide-in-from-top-2",
-  "data-[side=left]:tw-slide-in-from-right-2",
-  "data-[side=right]:tw-slide-in-from-left-2",
-  "data-[side=top]:tw-slide-in-from-bottom-2"
+  "tw:data-[state=open]:animate-in",
+  "tw:data-[state=open]:fade-in-0",
+  "tw:data-[state=open]:zoom-in-95",
+  "tw:data-[state=closed]:animate-out",
+  "tw:data-[state=closed]:fade-out-0",
+  "tw:data-[state=closed]:zoom-out-95",
+  "tw:data-[side=bottom]:slide-in-from-top-2",
+  "tw:data-[side=left]:slide-in-from-right-2",
+  "tw:data-[side=right]:slide-in-from-left-2",
+  "tw:data-[side=top]:slide-in-from-bottom-2"
 );
 var DropdownMenuCheckboxItem = ({
   className,
@@ -2637,7 +2536,7 @@ var DropdownMenuCheckboxItem = ({
   ...props
 }) => {
   const isAtStart = indicatorAlign === "start";
-  const indicatorEle = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: isAtStart ? "" : "tw-ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItemIndicator, { variant: indicator, className: isAtStart ? "" : "tw-ml-auto" });
+  const indicatorEle = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: isAtStart ? "" : "tw:ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw:animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItemIndicator, { variant: indicator, className: isAtStart ? "" : "tw:ml-auto" });
   const handleSelect = (event) => {
     if (!closeOnSelect) event.preventDefault();
     onSelect?.(event);
@@ -2671,10 +2570,10 @@ var ScrollBar = ({ className, orientation = "vertical", ...props }) => /* @__PUR
   {
     orientation,
     className: cn(
-      "tw-flex tw-touch-none tw-select-none tw-transition-color",
+      "tw:flex tw:touch-none tw:select-none tw:transition-color",
       {
-        "tw-h-full tw-w-2.5 tw-p-px": orientation === "vertical",
-        "tw-h-2.5 tw-flex-col tw-p-px": orientation === "horizontal"
+        "tw:h-full tw:w-2.5 tw:p-px": orientation === "vertical",
+        "tw:h-2.5 tw:flex-col tw:p-px": orientation === "horizontal"
       },
       className
     ),
@@ -2683,11 +2582,11 @@ var ScrollBar = ({ className, orientation = "vertical", ...props }) => /* @__PUR
       ScrollAreaPrimitive2__namespace.ScrollAreaThumb,
       {
         className: cn(
-          "tw-relative",
-          "tw-flex-1",
-          "tw-rounded-full",
-          "tw-bg-border",
-          "hover:tw-bg-muted-foreground"
+          "tw:relative",
+          "tw:flex-1",
+          "tw:rounded-full",
+          "tw:bg-border",
+          "tw:hover:bg-muted-foreground"
         )
       }
     )
@@ -2706,7 +2605,7 @@ var ScrollArea = ({
   {
     "data-slot": "scroll-area",
     className: cn(
-      "tw-peer/scroll-area tw-relative tw-overflow-hidden focus-visible:tw-outline-none",
+      "tw:peer/scroll-area tw:relative tw:overflow-hidden tw:focus-visible:outline-hidden",
       className
     ),
     ...props,
@@ -2716,7 +2615,7 @@ var ScrollArea = ({
         {
           ref,
           className: cn(
-            "tw-h-full tw-w-full tw-rounded-[inherit] focus-visible:tw-outline-none",
+            "tw:h-full tw:w-full tw:rounded-[inherit] tw:focus-visible:outline-hidden",
             viewPortClassName
           ),
           children
@@ -2756,11 +2655,11 @@ var DropdownMenuContent = ({
         {
           className,
           viewPortClassName: cn(
-            "tw-p-2",
-            "tw-max-h-[var(--radix-dropdown-menu-content-available-height)]",
+            "tw:p-2",
+            "tw:max-h-[var(--radix-dropdown-menu-content-available-height)]",
             viewPortClassName
           ),
-          scrollBarClassName: "tw-w-1.5",
+          scrollBarClassName: "tw:w-1.5",
           children
         }
       )
@@ -2786,7 +2685,7 @@ var DropdownMenuItem = ({
   ...props
 }) => {
   const Comp = asChild ? reactSlot.Root : "div";
-  const adornment = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-animate-spin" }) : icon;
+  const adornment = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw:animate-spin" }) : icon;
   const handleOnSelect = (event) => {
     if (asModalTrigger) event.preventDefault();
     onSelect?.(event);
@@ -2807,7 +2706,7 @@ var DropdownMenuItem = ({
       onSelect: handleOnSelect,
       onPointerLeave: handlePointerLeave,
       onPointerMove: handlePointerMove,
-      className: cn(itemVariants, className),
+      className: cn(itemVariants, asChild && "tw:text-inherit", className),
       asChild: true,
       children: /* @__PURE__ */ jsxRuntime.jsxs(Comp, { children: [
         adornment && /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: adornment }),
@@ -2821,18 +2720,18 @@ var DropdownMenuItem = ({
 init_utils2();
 var descriptionVariants = classVarianceAuthority.cva(
   [
-    "tw-box-border",
-    "tw-ml-auto",
-    "tw-font-sans",
-    "tw-tracking-normal",
-    "tw-font-normal",
-    "tw-text-xs",
-    "tw-text-muted-foreground"
+    "tw:box-border",
+    "tw:ml-auto",
+    "tw:font-sans",
+    "tw:tracking-normal",
+    "tw:font-normal",
+    "tw:text-xs",
+    "tw:text-muted-foreground"
   ],
   {
     variants: {
       hideOnHover: {
-        true: ["group-focus-within:tw-hidden", "group-hover:tw-hidden"],
+        true: ["tw:group-focus-within:hidden", "tw:group-hover:hidden"],
         false: []
       }
     },
@@ -2855,10 +2754,10 @@ var DropdownMenuLabel = ({ className, ...props }) => {
     DropdownMenuPrimitive3__namespace.Label,
     {
       className: cn(
-        "tw-p-2",
-        "tw-font-medium",
-        "tw-text-xs",
-        "tw-text-muted-foreground",
+        "tw:p-2",
+        "tw:font-medium",
+        "tw:text-xs",
+        "tw:text-muted-foreground",
         className
       ),
       ...props
@@ -2901,7 +2800,7 @@ var DropdownMenuRadioItem = ({
   ...props
 }) => {
   const isAtStart = indicatorAlign === "start";
-  const indicatorEle = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItemIndicator, { variant: indicator });
+  const indicatorEle = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw:animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItemIndicator, { variant: indicator });
   const handleSelect = (event) => {
     if (!closeOnSelect) event.preventDefault();
     onSelect?.(event);
@@ -2911,13 +2810,13 @@ var DropdownMenuRadioItem = ({
     {
       className: cn(
         itemVariants,
-        "data-[state=checked]:tw-cursor-default",
+        "tw:data-[state=checked]:cursor-default",
         {
-          "data-[state=checked]:tw-bg-neutral-100": indicator === "none",
+          "tw:data-[state=checked]:bg-neutral-100": indicator === "none",
           // Semantic brand tint (flips under `[data-theme='dark']`) instead of a
-          // hardcoded `tw-bg-sky-100`, which stayed light in dark mode and left the
+          // hardcoded `tw:bg-sky-100`, which stayed light in dark mode and left the
           // checked item's text near-invisible.
-          "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-primary/10": indicator === "check"
+          "tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:bg-primary/10": indicator === "check"
         },
         className
       ),
@@ -2926,7 +2825,7 @@ var DropdownMenuRadioItem = ({
       children: [
         isAtStart && indicatorEle,
         icon && /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-gap-2", children }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw:flex tw:min-w-0 tw:flex-1 tw:items-center tw:gap-2", children }),
         !isAtStart && indicatorEle
       ]
     }
@@ -2939,21 +2838,21 @@ var DropdownMenuSeparator = ({ className, ...props }) => /* @__PURE__ */ jsxRunt
   DropdownMenuPrimitive3__namespace.Separator,
   {
     className: cn(
-      "tw-relative",
-      "tw-z-10",
+      "tw:relative",
+      "tw:z-10",
       // layout
-      "tw-flex",
-      "tw-items-center",
-      "tw-justify-center",
-      "tw-w-full",
+      "tw:flex",
+      "tw:items-center",
+      "tw:justify-center",
+      "tw:w-full",
       // separator line
-      'before:tw-content-[""]',
-      "before:tw-w-full",
-      "before:tw-h-px",
-      "group-data-[variant=default]/dropdown-menu-content:tw-py-2",
-      "group-data-[variant=default]/dropdown-menu-content:before:tw-bg-neutral-150",
-      "group-data-[variant=argo]/dropdown-menu-content:tw-py-1",
-      "group-data-[variant=argo]/dropdown-menu-content:before:tw-bg-border",
+      'tw:before:content-[""]',
+      "tw:before:w-full",
+      "tw:before:h-px",
+      "tw:group-data-[variant=default]/dropdown-menu-content:py-2",
+      "tw:group-data-[variant=default]/dropdown-menu-content:before:bg-neutral-150",
+      "tw:group-data-[variant=argo]/dropdown-menu-content:py-1",
+      "tw:group-data-[variant=argo]/dropdown-menu-content:before:bg-border",
       className
     ),
     ...props
@@ -2969,7 +2868,7 @@ var DropdownMenuSubContent = ({ className, ...props }) => {
     DropdownMenuPrimitive3__namespace.SubContent,
     {
       "data-variant": variant,
-      className: cn(contentVariants, "tw-z-[1041]", "tw-p-2", className),
+      className: cn(contentVariants, "tw:z-[1041]", "tw:p-2", className),
       ...props
     }
   ) });
@@ -2981,23 +2880,19 @@ init_utils2();
 var DropdownMenuSubTrigger = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive3__namespace.SubTrigger, { className: cn(itemVariants, className), ...props, children: [
     children,
-    /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronRight, { className: "tw-ml-auto tw-size-5" })
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "tw:ml-auto tw:size-5" })
   ] });
 };
 
 // src/components/DropdownMenu/DropdownMenuTrigger.tsx
 init_utils2();
-var DropdownMenuTrigger = ({
-  ref,
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuTrigger = ({ ref, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive3.Trigger,
   {
     ...props,
     ref,
     "data-slot": "dropdown-menu-trigger",
-    className: cn("tw-group/dropdown-menu-trigger", className)
+    className: cn("tw:group/dropdown-menu-trigger", className)
   }
 );
 var DropdownMenu = ({
@@ -3023,13 +2918,15 @@ DropdownMenu.RadioGroup = DropdownMenuRadioGroup;
 DropdownMenu.RadioItem = DropdownMenuRadioItem;
 DropdownMenu.ItemDescription = DropdownMenuItemDescription;
 
-// src/components/MarkdownEditor/plugins/toolbar/AlignmentDropdown.tsx
+// src/blocks/MarkdownEditor/plugins/toolbar/AlignmentDropdown.tsx
 init_Tooltip2();
+init_icons();
+init_utils2();
 var ALIGNMENT_OPTIONS = [
-  { value: "left", label: "Left", icon: icons_exports.AlignLeft },
-  { value: "center", label: "Center", icon: icons_exports.AlignCenter },
-  { value: "right", label: "Right", icon: icons_exports.AlignRight },
-  { value: "justify", label: "Justify", icon: icons_exports.AlignJustify }
+  { value: "left", label: "Left", icon: lucideReact.AlignLeft },
+  { value: "center", label: "Center", icon: lucideReact.AlignCenter },
+  { value: "right", label: "Right", icon: lucideReact.AlignRight },
+  { value: "justify", label: "Justify", icon: lucideReact.AlignJustify }
 ];
 var ALIGNMENT_ICONS = Object.fromEntries(
   ALIGNMENT_OPTIONS.map(({ value, icon }) => [value, icon])
@@ -3055,32 +2952,32 @@ var AlignmentDropdown = ({
       editor.dispatchCommand(lexical.FORMAT_ELEMENT_COMMAND, align);
     });
   };
-  const CurrentAlignmentIcon = ALIGNMENT_ICONS[alignment] ?? icons_exports.AlignLeft;
+  const CurrentAlignmentIcon = ALIGNMENT_ICONS[alignment] ?? lucideReact.AlignLeft;
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { tooltip: "Text alignment", placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
         className: cn(
-          "tw-flex tw-h-7 tw-cursor-pointer tw-items-center tw-gap-1 tw-rounded tw-border-0 tw-bg-transparent tw-px-1.5 tw-text-xs tw-text-muted-foreground",
-          "hover:tw-bg-accent"
+          "tw:flex tw:h-7 tw:cursor-pointer tw:items-center tw:gap-1 tw:rounded tw:border-0 tw:bg-transparent tw:px-1.5 tw:text-xs tw:text-muted-foreground",
+          "tw:hover:bg-accent"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CurrentAlignmentIcon, { className: "tw-size-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronDown, { className: "tw-size-3" })
+          /* @__PURE__ */ jsxRuntime.jsx(CurrentAlignmentIcon, { className: "tw:size-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "tw:size-3" })
         ]
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "start", className: "tw-min-w-32", children: ALIGNMENT_OPTIONS.map(({ value, label, icon: IconComp }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "start", className: "tw:min-w-32", children: ALIGNMENT_OPTIONS.map(({ value, label, icon: IconComp }) => /* @__PURE__ */ jsxRuntime.jsxs(
       DropdownMenu.Item,
       {
         onSelect: () => handleSelect(value),
         className: cn(
-          "tw-flex tw-items-center tw-gap-2",
-          alignment === value && "tw-bg-secondary-50 tw-text-secondary-500"
+          "tw:flex tw:items-center tw:gap-2",
+          alignment === value && "tw:bg-secondary-50 tw:text-secondary-500"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: "tw-size-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: "tw:size-4" }),
           label
         ]
       },
@@ -3088,20 +2985,18 @@ var AlignmentDropdown = ({
     )) })
   ] });
 };
-
-// src/components/MarkdownEditor/plugins/toolbar/BlockTypeDropdown.tsx
+init_Tooltip2();
 init_icons();
 init_utils2();
-init_Tooltip2();
 var BLOCK_TYPE_META = {
-  paragraph: { label: "Normal", icon: icons_exports.Type, selectable: true },
-  h1: { label: "Heading 1", icon: icons_exports.Heading1, selectable: true },
-  h2: { label: "Heading 2", icon: icons_exports.Heading2, selectable: true },
-  h3: { label: "Heading 3", icon: icons_exports.Heading3, selectable: true },
-  bullet: { label: "Bullet List", icon: icons_exports.List, selectable: false },
-  number: { label: "Numbered List", icon: icons_exports.ListOrdered, selectable: false },
-  quote: { label: "Quote", icon: icons_exports.Quote, selectable: false },
-  code: { label: "Code Block", icon: icons_exports.SquareCode, selectable: false }
+  paragraph: { label: "Normal", icon: lucideReact.Type, selectable: true },
+  h1: { label: "Heading 1", icon: lucideReact.Heading1, selectable: true },
+  h2: { label: "Heading 2", icon: lucideReact.Heading2, selectable: true },
+  h3: { label: "Heading 3", icon: lucideReact.Heading3, selectable: true },
+  bullet: { label: "Bullet List", icon: lucideReact.List, selectable: false },
+  number: { label: "Numbered List", icon: lucideReact.ListOrdered, selectable: false },
+  quote: { label: "Quote", icon: lucideReact.Quote, selectable: false },
+  code: { label: "Code Block", icon: lucideReact.SquareCode, selectable: false }
 };
 var BLOCK_TYPE_OPTIONS = Object.entries(BLOCK_TYPE_META).filter(([, meta]) => meta.selectable).map(([value, { label, icon }]) => ({ value, label, icon }));
 var isBlockType = (value) => Object.prototype.hasOwnProperty.call(BLOCK_TYPE_META, value);
@@ -3111,7 +3006,7 @@ var BlockTypeDropdown = ({
 }) => {
   const savedSelectionRef = react.useRef(null);
   const currentMeta = isBlockType(blockType) ? BLOCK_TYPE_META[blockType] : null;
-  const CurrentBlockIcon = currentMeta?.icon ?? icons_exports.Type;
+  const CurrentBlockIcon = currentMeta?.icon ?? lucideReact.Type;
   const handleOpenChange = (open) => {
     if (open) {
       editor.getEditorState().read(() => {
@@ -3148,26 +3043,26 @@ var BlockTypeDropdown = ({
       {
         type: "button",
         className: cn(
-          "tw-flex tw-h-7 tw-cursor-pointer tw-items-center tw-gap-1.5 tw-rounded tw-border-0 tw-bg-transparent tw-px-1.5 tw-text-xs tw-text-muted-foreground",
-          "hover:tw-bg-accent"
+          "tw:flex tw:h-7 tw:cursor-pointer tw:items-center tw:gap-1.5 tw:rounded tw:border-0 tw:bg-transparent tw:px-1.5 tw:text-xs tw:text-muted-foreground",
+          "tw:hover:bg-accent"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CurrentBlockIcon, { className: "tw-size-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(CurrentBlockIcon, { className: "tw:size-4" }),
           currentMeta?.label ?? "Normal",
-          /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronDown, { className: "tw-size-3" })
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "tw:size-3" })
         ]
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "start", className: "tw-min-w-40", children: BLOCK_TYPE_OPTIONS.map(({ value, label, icon: IconComp }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "start", className: "tw:min-w-40", children: BLOCK_TYPE_OPTIONS.map(({ value, label, icon: IconComp }) => /* @__PURE__ */ jsxRuntime.jsxs(
       DropdownMenu.Item,
       {
         onSelect: () => handleSelect(value),
         className: cn(
-          "tw-flex tw-items-center tw-gap-2",
-          blockType === value && "tw-bg-secondary-50 tw-text-secondary-500"
+          "tw:flex tw:items-center tw:gap-2",
+          blockType === value && "tw:bg-secondary-50 tw:text-secondary-500"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: "tw-size-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: "tw:size-4" }),
           label
         ]
       },
@@ -3176,76 +3071,7 @@ var BlockTypeDropdown = ({
   ] });
 };
 
-// src/components/MarkdownEditor/plugins/toolbar/LinkPanel.tsx
-init_icons();
-init_Button2();
-var buttonGroupVariant = classVarianceAuthority.cva(
-  ["tailwindcss-preflight", "tw-inline-flex", "tw-items-center", "tw-group/button-group"],
-  {
-    defaultVariants: {
-      variant: "inline",
-      space: "small"
-    },
-    variants: {
-      variant: {
-        inline: [],
-        block: [
-          "tw-w-full",
-          "tw-flex-col",
-          "sm:tw-flex-row",
-          "[&_a]:tw-flex-1",
-          "[&>button:not([data-icon-only=true])]:tw-flex-1"
-        ]
-      },
-      space: {
-        "extra-small": "tw-gap-1",
-        "little-small": "tw-gap-2",
-        small: "tw-gap-3",
-        medium: "tw-gap-4",
-        large: "tw-gap-6",
-        compact: [
-          "tw-border-collapse",
-          "!tw-gap-0",
-          // ensure that focus visible outline is at the top
-          "[&>*:focus-visible]:!tw-z-10",
-          "[&>*:not(:first-child)]:tw-rounded-l-none",
-          "[&>*:not(:last-child)]:tw-rounded-r-none",
-          "[&>*:not(:last-child)]:tw-border-r-0",
-          "[&>*:not(:first-child)]:tw-border-l-0",
-          // separator
-          "[&>*:not(:first-child)]:before:tw-content",
-          "[&>*:not(:first-child)]:before:tw-absolute",
-          "[&>*:not(:first-child)]:before:tw-left-0",
-          "[&>*:not(:first-child)]:before:tw-h-full",
-          "[&>*:not(:first-child)]:before:tw-w-px",
-          "[&>*:not(:first-child)]:before:tw-bg-black/10"
-        ]
-      }
-    }
-  }
-);
-var ButtonGroup = ({
-  ref,
-  children,
-  space = "small",
-  className,
-  variant,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      ...rest,
-      role: "group",
-      "data-variant": variant,
-      className: buttonGroupVariant({ variant, className, space }),
-      children
-    }
-  );
-};
-
-// src/components/FormGroup/FormGroup.tsx
+// src/blocks/FormGroup/FormGroup.tsx
 init_utils2();
 var FormGroupContext = react.createContext({
   state: "default"
@@ -3261,12 +3087,12 @@ init_context();
 init_utils2();
 var addonVariants = classVarianceAuthority.cva(
   [
-    "tw-flex",
-    "tw-items-center",
-    "tw-gap-1",
+    "tw:flex",
+    "tw:items-center",
+    "tw:gap-1",
     // Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.
-    "[&_svg.lucide:not([class*='tw-size-'])]:tw-size-4",
-    "[&_svg]:tw-shrink-0"
+    "tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4",
+    "tw:[&_svg]:shrink-0"
   ],
   {
     defaultVariants: {
@@ -3274,22 +3100,22 @@ var addonVariants = classVarianceAuthority.cva(
     },
     variants: {
       align: {
-        "inline-start": ["tw-order-first", "[&:not(:empty)]:tw-pl-4"],
-        "inline-end": ["tw-order-last", "[&:not(:empty)]:tw-pr-4"],
+        "inline-start": ["tw:order-first", "tw:[&:not(:empty)]:pl-4"],
+        "inline-end": ["tw:order-last", "tw:[&:not(:empty)]:pr-4"],
         "block-start": [
-          "tw-order-first",
-          // `tw-w-full` needs to be empty-conditional too — when the addon
+          "tw:order-first",
+          // `tw:w-full` needs to be empty-conditional too — when the addon
           // has no content the root stays in flex-row, and a 100%-wide
           // empty addon would claim half of the input row beside the input.
-          "[&:not(:empty)]:tw-w-full",
-          "[&:not(:empty)]:tw-px-4",
-          "[&:not(:empty)]:tw-py-1.5"
+          "tw:[&:not(:empty)]:w-full",
+          "tw:[&:not(:empty)]:px-4",
+          "tw:[&:not(:empty)]:py-1.5"
         ],
         "block-end": [
-          "tw-order-last",
-          "[&:not(:empty)]:tw-w-full",
-          "[&:not(:empty)]:tw-px-4",
-          "[&:not(:empty)]:tw-py-1.5"
+          "tw:order-last",
+          "tw:[&:not(:empty)]:w-full",
+          "tw:[&:not(:empty)]:px-4",
+          "tw:[&:not(:empty)]:py-1.5"
         ]
       }
     }
@@ -3305,12 +3131,7 @@ var InputGroupAddon = ({
 // src/components/InputGroup/InputGroupButton.tsx
 init_utils2();
 init_Button2();
-var InputGroupButton = ({
-  ref,
-  className,
-  tabIndex = -1,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+var InputGroupButton = ({ ref, className, tabIndex = -1, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   Button,
   {
     ...props,
@@ -3318,33 +3139,29 @@ var InputGroupButton = ({
     ref,
     variant: "invisible",
     size: "icon-sm",
-    className: cn("tw-size-5", "[&_svg]:tw-text-muted-foreground", className)
+    className: cn("tw:size-5", "tw:[&_svg]:text-muted-foreground", className)
   }
 );
 
 // src/components/InputGroup/InputGroupInput.tsx
 init_utils2();
-var InputGroupInput = ({
-  ref,
-  className,
-  ...inputProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+var InputGroupInput = ({ ref, className, ...inputProps }) => /* @__PURE__ */ jsxRuntime.jsx(
   "input",
   {
     ...inputProps,
     ref,
     className: cn(
-      "tw-w-full",
-      "tw-bg-transparent",
-      "tw-outline-none",
+      "tw:w-full",
+      "tw:bg-transparent",
+      "tw:outline-hidden",
       // font
-      "tw-font-sans",
-      "tw-text-sm",
+      "tw:font-sans",
+      "tw:text-sm",
       // placeholder
-      "placeholder:tw-text-neutral-400",
-      "placeholder:tw-font-normal",
+      "tw:placeholder:text-neutral-400",
+      "tw:placeholder:font-normal",
       // disabled
-      "disabled:tw-cursor-not-allowed",
+      "tw:disabled:cursor-not-allowed",
       className
     )
   }
@@ -3356,13 +3173,13 @@ var InputGroupText = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx
   "span",
   {
     className: cn(
-      "tw-flex",
-      "tw-items-center",
-      "tw-gap-2",
-      "tw-text-sm",
-      "tw-text-muted-foreground",
-      "[&_svg]:tw-pointer-events-none",
-      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
+      "tw:flex",
+      "tw:items-center",
+      "tw:gap-2",
+      "tw:text-sm",
+      "tw:text-muted-foreground",
+      "tw:[&_svg]:pointer-events-none",
+      'tw:[&_svg:not([class*="tw:size-"])]:size-4',
       className
     ),
     ...props
@@ -3405,20 +3222,20 @@ var InputGroupTextArea = ({
       minRows,
       maxRows: maxRows === "unlimited" ? void 0 : maxRows,
       className: cn(
-        "tw-w-full",
-        "tw-bg-transparent",
-        "tw-outline-none",
-        "tw-px-4",
+        "tw:w-full",
+        "tw:bg-transparent",
+        "tw:outline-hidden",
+        "tw:px-4",
         // font
-        "tw-font-sans",
-        "tw-text-sm",
+        "tw:font-sans",
+        "tw:text-sm",
         // placeholder
-        "placeholder:tw-text-neutral-400",
-        "placeholder:tw-font-normal",
+        "tw:placeholder:text-neutral-400",
+        "tw:placeholder:font-normal",
         // disabled
-        "disabled:tw-cursor-not-allowed",
+        "tw:disabled:cursor-not-allowed",
         {
-          "tw-resize-none": disableResize
+          "tw:resize-none": disableResize
         },
         className
       )
@@ -3428,39 +3245,39 @@ var InputGroupTextArea = ({
 var inputGroupVariants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
-    "tw-group",
-    "tw-overflow-hidden",
-    "tw-box-border",
+    "tw:group",
+    "tw:overflow-hidden",
+    "tw:box-border",
     // positioning
-    "tw-flex",
-    "tw-items-center",
+    "tw:flex",
+    "tw:items-center",
     // base — legacy (non-argo) chrome uses a fixed radius; argo overrides it with
     // the brand radius token in the `argo` variant below.
-    "tw-rounded",
-    "tw-border",
-    "tw-border-solid",
-    "tw-border-neutral-200",
-    "tw-text-neutral-800",
-    "tw-transition",
+    "tw:rounded",
+    "tw:border",
+    "tw:border-solid",
+    "tw:border-neutral-200",
+    "tw:text-neutral-800",
+    "tw:transition",
     // focus
-    "has-[:is(input,textarea):focus]:tw-ring-4",
+    "tw:has-[:is(input,textarea):focus]:ring-4",
     // readonly
-    "has-[:is(input,textarea)[readonly]]:tw-bg-neutral-150",
-    "has-[:is(input,textarea)[readonly]]:focus-within:tw-ring-0",
-    "has-[:is(input,textarea)[readonly]]:tw-border-neutral-150",
+    "tw:has-[:is(input,textarea)[readonly]]:bg-neutral-150",
+    "tw:has-[:is(input,textarea)[readonly]]:focus-within:ring-0",
+    "tw:has-[:is(input,textarea)[readonly]]:border-neutral-150",
     // disabled cursor (opacity owned by variant)
-    "has-[:is(input,textarea):disabled]:tw-cursor-not-allowed",
+    "tw:has-[:is(input,textarea):disabled]:cursor-not-allowed",
     // textarea: top-align addons, allow vertical expansion, own its y-padding
-    "has-[textarea]:tw-items-start",
-    "has-[[data-align=block-start]:not(:empty)]:tw-flex-wrap",
-    "has-[[data-align=block-end]:not(:empty)]:tw-flex-wrap",
-    "[&>input]:has-[[data-align=block-start]:not(:empty)]:tw-w-auto",
-    "[&>input]:has-[[data-align=block-start]:not(:empty)]:tw-flex-1",
-    "[&>input]:has-[[data-align=block-end]:not(:empty)]:tw-w-auto",
-    "[&>input]:has-[[data-align=block-end]:not(:empty)]:tw-flex-1",
-    "[&>input]:tw-px-4",
-    "[&>input]:has-[[data-align=inline-start]:not(:empty)]:tw-pl-2",
-    "[&>input]:has-[[data-align=inline-end]:not(:empty)]:tw-pr-2"
+    "tw:has-[textarea]:items-start",
+    "tw:has-[[data-align=block-start]:not(:empty)]:flex-wrap",
+    "tw:has-[[data-align=block-end]:not(:empty)]:flex-wrap",
+    "tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:w-auto",
+    "tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:flex-1",
+    "tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:w-auto",
+    "tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:flex-1",
+    "tw:[&>input]:px-4",
+    "tw:[&>input]:has-[[data-align=inline-start]:not(:empty)]:pl-2",
+    "tw:[&>input]:has-[[data-align=inline-end]:not(:empty)]:pr-2"
   ],
   {
     defaultVariants: {
@@ -3473,153 +3290,153 @@ var inputGroupVariants = classVarianceAuthority.cva(
       {
         variant: "secondary",
         state: "error",
-        className: ["tw-bg-error-100"]
+        className: ["tw:bg-error-100"]
       },
       {
         variant: "secondary",
         state: "warning",
-        className: ["tw-bg-warning-100"]
+        className: ["tw:bg-warning-100"]
       },
       {
         variant: "primary",
         state: "default",
         focusVariant: "off",
-        className: ["has-[:is(input,textarea):focus]:tw-border-neutral-200"]
+        className: ["tw:has-[:is(input,textarea):focus]:border-neutral-200"]
       },
       {
         variant: "secondary",
         state: "default",
         focusVariant: "off",
-        className: ["has-[:is(input,textarea):focus]:tw-border-neutral-100"]
+        className: ["tw:has-[:is(input,textarea):focus]:border-neutral-100"]
       },
       {
         variant: ["primary", "secondary"],
         state: "error",
         focusVariant: "on",
-        className: ["!tw-border-error-500", "!tw-ring-error-200"]
+        className: ["tw:!border-error-500", "tw:!ring-error-200"]
       },
       {
         variant: ["primary", "secondary"],
         state: "warning",
         focusVariant: "on",
-        className: ["!tw-border-warning-500", "!tw-ring-warning-200"]
+        className: ["tw:!border-warning-500", "tw:!ring-warning-200"]
       },
       // --- argo ---
       {
         variant: "argo",
         state: "default",
         className: [
-          "has-[:is(input,textarea):focus]:tw-border-primary",
-          "has-[:is(input,textarea):focus]:tw-ring-ring/50"
+          "tw:has-[:is(input,textarea):focus]:border-primary",
+          "tw:has-[:is(input,textarea):focus]:ring-ring/50"
         ]
       },
       {
         variant: "argo",
         state: "error",
         className: [
-          "tw-border-destructive",
-          "has-[:is(input,textarea):focus]:tw-border-destructive",
-          "has-[:is(input,textarea):focus]:tw-ring-destructive/20"
+          "tw:border-destructive",
+          "tw:has-[:is(input,textarea):focus]:border-destructive",
+          "tw:has-[:is(input,textarea):focus]:ring-destructive/20"
         ]
       },
       {
         variant: "argo",
         focusVariant: "on",
-        className: ["!tw-border-primary", "!tw-ring-ring/50"]
+        className: ["tw:!border-primary", "tw:!ring-ring/50"]
       },
       {
         variant: "argo",
         state: "error",
         focusVariant: "on",
-        className: ["!tw-border-destructive", "!tw-ring-destructive/20"]
+        className: ["tw:!border-destructive", "tw:!ring-destructive/20"]
       },
       {
         variant: "argo",
         state: "default",
         focusVariant: "off",
-        className: ["has-[:is(input,textarea):focus]:tw-border-input"]
+        className: ["tw:has-[:is(input,textarea):focus]:border-input"]
       }
     ],
     variants: {
       focusVariant: {
         default: [],
-        on: ["!tw-border-ring", "!tw-ring-ring/30", "!tw-ring-4"],
-        off: ["has-[:is(input,textarea):focus]:!tw-ring-0"]
+        on: ["tw:!border-ring", "tw:!ring-ring/30", "tw:!ring-4"],
+        off: ["tw:has-[:is(input,textarea):focus]:!ring-0"]
       },
       variant: {
         primary: [
-          "tw-bg-white",
-          "has-[:is(input,textarea):disabled]:tw-opacity-40",
+          "tw:bg-white",
+          "tw:has-[:is(input,textarea):disabled]:opacity-40",
           // aria-invalid on the control surfaces the error chrome without a `state` prop — the
           // accessible path (mirrors the `state="error"` legacy tokens). Higher specificity than
           // the default focus selector, so it wins without `!important`.
-          "has-[:is(input,textarea)[aria-invalid=true]]:tw-border-error-500",
-          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-border-error-500",
-          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-ring-error-200"
+          "tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500",
+          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500",
+          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200"
         ],
         secondary: [
-          "tw-bg-neutral-100",
-          "tw-border-neutral-100",
-          "has-[:is(input,textarea):disabled]:tw-opacity-40",
-          "has-[:is(input,textarea)[aria-invalid=true]]:tw-border-error-500",
-          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-border-error-500",
-          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-ring-error-200"
+          "tw:bg-neutral-100",
+          "tw:border-neutral-100",
+          "tw:has-[:is(input,textarea):disabled]:opacity-40",
+          "tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500",
+          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500",
+          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200"
         ],
         argo: [
           // argo follows the brand radius token (overrides the static base)
-          "tw-rounded-[var(--radius-lg,0.25rem)]",
+          "tw:rounded-[var(--radius-lg,0.25rem)]",
           // muted filled input surface — gray, distinct from white containers; not the app-background token
-          "tw-bg-muted",
-          "tw-border-input",
-          "tw-text-foreground",
-          "has-[:is(input,textarea):disabled]:tw-opacity-50",
+          "tw:bg-muted",
+          "tw:border-input",
+          "tw:text-foreground",
+          "tw:has-[:is(input,textarea):disabled]:opacity-50",
           // readonly: keep the themed input surface/border. The base layer's fixed
           // `neutral-150` (a light grey) is correct for the legacy light chrome but
           // collides with argo's themed `foreground` text — light-on-light, invisible
           // in dark mode. Re-pin to the same `muted`/`input` tokens the editable argo
           // input uses (validated AA), so readonly stays legible in every scheme.
-          "has-[:is(input,textarea)[readonly]]:tw-bg-muted",
-          "has-[:is(input,textarea)[readonly]]:tw-border-input",
+          "tw:has-[:is(input,textarea)[readonly]]:bg-muted",
+          "tw:has-[:is(input,textarea)[readonly]]:border-input",
           // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly
-          "has-[:is(input,textarea)[readonly]:focus]:tw-border-input",
+          "tw:has-[:is(input,textarea)[readonly]:focus]:border-input",
           // aria-invalid on the control surfaces the error chrome without a `state` prop — the
           // accessible path (uses the themeable `destructive` status token).
-          "has-[:is(input,textarea)[aria-invalid=true]]:tw-border-destructive",
-          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-border-destructive",
-          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-ring-destructive/20"
+          "tw:has-[:is(input,textarea)[aria-invalid=true]]:border-destructive",
+          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-destructive",
+          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-destructive/20"
         ]
       },
       sizing: {
         default: [
-          "[&>:is(input,textarea)]:tw-py-2.5",
-          "[&>:is(input,textarea)]:tw-leading-[18px]",
-          "[&>textarea]:!tw-min-h-[calc(2.5rem-2px)]"
+          "tw:[&>:is(input,textarea)]:py-2.5",
+          "tw:[&>:is(input,textarea)]:leading-[18px]",
+          "tw:[&>textarea]:!min-h-[calc(2.5rem-2px)]"
         ],
         small: [
-          "[&>:is(input,textarea)]:tw-py-2",
-          "[&>:is(input,textarea)]:tw-leading-[16px]",
-          "[&>textarea]:!tw-min-h-[calc(2rem-2px)]"
+          "tw:[&>:is(input,textarea)]:py-2",
+          "tw:[&>:is(input,textarea)]:leading-[16px]",
+          "tw:[&>textarea]:!min-h-[calc(2rem-2px)]"
         ],
         medium: [
-          "[&>:is(input,textarea)]:tw-py-2",
-          "[&>:is(input,textarea)]:tw-leading-[18px]",
-          "[&>textarea]:!tw-min-h-[calc(2.25rem-2px)]"
+          "tw:[&>:is(input,textarea)]:py-2",
+          "tw:[&>:is(input,textarea)]:leading-[18px]",
+          "tw:[&>textarea]:!min-h-[calc(2.25rem-2px)]"
         ]
       },
       state: {
         default: [
-          "has-[:is(input,textarea):focus]:tw-border-ring",
-          "has-[:is(input,textarea):focus]:tw-ring-ring/30"
+          "tw:has-[:is(input,textarea):focus]:border-ring",
+          "tw:has-[:is(input,textarea):focus]:ring-ring/30"
         ],
         error: [
-          "tw-border-error-500",
-          "has-[:is(input,textarea):focus]:tw-border-error-500",
-          "has-[:is(input,textarea):focus]:tw-ring-error-200"
+          "tw:border-error-500",
+          "tw:has-[:is(input,textarea):focus]:border-error-500",
+          "tw:has-[:is(input,textarea):focus]:ring-error-200"
         ],
         warning: [
-          "tw-border-warning-500",
-          "has-[:is(input,textarea):focus]:tw-border-warning-500",
-          "has-[:is(input,textarea):focus]:tw-ring-warning-200"
+          "tw:border-warning-500",
+          "tw:has-[:is(input,textarea):focus]:border-warning-500",
+          "tw:has-[:is(input,textarea):focus]:ring-warning-200"
         ]
       }
     }
@@ -3662,6 +3479,29 @@ InputGroup.Addon = InputGroupAddon;
 InputGroup.Button = InputGroupButton;
 InputGroup.TextArea = InputGroupTextArea;
 InputGroup.Text = InputGroupText;
+var useControllableState = ({
+  prop,
+  defaultProp,
+  onChange
+}) => {
+  const [uncontrolled, setUncontrolled] = react.useState(defaultProp);
+  const isControlled = prop !== void 0;
+  const value = prop !== void 0 ? prop : uncontrolled;
+  const valueRef = react.useRef(value);
+  valueRef.current = value;
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = react.useCallback(
+    (next) => {
+      const nextValue = typeof next === "function" ? next(valueRef.current) : next;
+      valueRef.current = nextValue;
+      if (!isControlled) setUncontrolled(nextValue);
+      onChangeRef.current?.(nextValue);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+};
 
 // src/blocks/ColorInput/ColorInput.tsx
 init_icons();
@@ -3709,7 +3549,7 @@ var ColorPicker = ({ value, disabled, readOnly, ...props }) => {
     if (!pickerRef.current) return;
     showPicker(pickerRef.current);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-relative", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw:relative", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -3719,7 +3559,7 @@ var ColorPicker = ({ value, disabled, readOnly, ...props }) => {
         value: coerceColorPickerValue(value),
         tabIndex: -1,
         "aria-hidden": true,
-        className: "tw-pointer-events-none tw-absolute tw-left-0 tw-top-full tw-size-0 tw-opacity-0",
+        className: "tw:pointer-events-none tw:absolute tw:left-0 tw:top-full tw:size-0 tw:opacity-0",
         disabled,
         readOnly
       }
@@ -3731,7 +3571,7 @@ var ColorPicker = ({ value, disabled, readOnly, ...props }) => {
         disabled: disabled || readOnly,
         onClick: handleOpenPicker,
         "aria-label": "Pick color",
-        children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Pipette, { className: "tw-size-4" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pipette, { className: "tw:size-4" })
       }
     )
   ] });
@@ -3758,13 +3598,13 @@ var ColorInput = ({
   ...restInputProps
 }) => {
   const inputRef = react.useRef(null);
-  const [internalValue, setInternalValue] = react.useState(defaultValue ?? "");
+  const [value, setValue] = useControllableState({
+    // A `null` controlled value stays controlled (coerced to ''); `undefined` is uncontrolled.
+    prop: valueProp === null ? "" : valueProp,
+    defaultProp: defaultValue ?? "",
+    onChange: onValueChange
+  });
   const isControlled = valueProp !== void 0;
-  const value = isControlled ? valueProp ?? "" : internalValue;
-  const setValue = (nextValue) => {
-    if (!isControlled) setInternalValue(nextValue);
-    onValueChange?.(nextValue);
-  };
   const canClear = allowClear && !!value && !disabled && !readOnly;
   const swatchColor = coerceHexInputValue(value);
   const isValidSwatch = isCompleteHexColor(swatchColor);
@@ -3806,24 +3646,24 @@ var ColorInput = ({
           {
             align: "inline-start",
             className: cn(
-              { "-tw-ml-7 tw-opacity-0": !value },
-              "tw-transition-[opacity,margin]",
-              "tw-ease-linear",
-              "tw-duration-200"
+              { "tw:-ml-7 tw:opacity-0": !value },
+              "tw:transition-[opacity,margin]",
+              "tw:ease-linear",
+              "tw:duration-200"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 style: isValidSwatch ? { background: swatchColor } : void 0,
                 className: cn(
-                  "tw-size-5",
-                  "tw-shrink-0",
-                  "tw-rounded-sm",
-                  "tw-border",
-                  "tw-border-solid",
-                  "tw-border-neutral-300",
+                  "tw:size-5",
+                  "tw:shrink-0",
+                  "tw:rounded-sm",
+                  "tw:border",
+                  "tw:border-solid",
+                  "tw:border-neutral-300",
                   {
-                    "tw-bg-[linear-gradient(to_top_right,transparent_calc(50%_-_1px),theme(colors.red.300)_calc(50%_-_1px),theme(colors.red.300)_calc(50%_+_1px),transparent_calc(50%_+_1px))]": !isValidSwatch
+                    "tw:bg-[linear-gradient(to_top_right,transparent_calc(50%_-_1px),theme(colors.red.300)_calc(50%_-_1px),theme(colors.red.300)_calc(50%_+_1px),transparent_calc(50%_+_1px))]": !isValidSwatch
                   }
                 )
               }
@@ -3850,7 +3690,7 @@ var ColorInput = ({
               onMouseDown: (event) => event.preventDefault(),
               onClick: handleClear,
               "aria-label": "Clear color",
-              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.X, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw:size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3867,15 +3707,12 @@ var ColorInput = ({
     }
   );
 };
-var FormGroupColorInput = ({
-  ref,
-  ...props
-}) => {
+var FormGroupColorInput = ({ ref, ...props }) => {
   const { state } = useFormGroupContext();
   return /* @__PURE__ */ jsxRuntime.jsx(ColorInput, { state, ...props, ref });
 };
 
-// src/components/FormGroup/FormGroupError.tsx
+// src/blocks/FormGroup/FormGroupError.tsx
 init_utils2();
 var toMessage = (entry) => typeof entry === "string" ? entry : entry?.message;
 var FormGroupError = ({ children, className, errors, ...rest }) => {
@@ -3884,19 +3721,19 @@ var FormGroupError = ({ children, className, errors, ...rest }) => {
     const messages = (errors ?? []).map(toMessage).filter((message) => !!message);
     if (messages.length === 0) return null;
     if (messages.length === 1) return messages[0];
-    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "tw-m-0 tw-flex tw-list-disc tw-flex-col tw-gap-0 tw-pl-4", children: messages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: message }, index)) });
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "tw:m-0 tw:flex tw:list-disc tw:flex-col tw:gap-0 tw:pl-4", children: messages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: message }, index)) });
   }, [children, errors]);
   if (!content) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, role: "alert", className: cn("tw-m-0 tw-text-xs tw-text-destructive", className), children: content });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, role: "alert", className: cn("tw:m-0 tw:text-xs tw:text-destructive", className), children: content });
 };
-var helpVariants = classVarianceAuthority.cva(["tw-m-0", "tw-text-xs"], {
+var helpVariants = classVarianceAuthority.cva(["tw:m-0", "tw:text-xs"], {
   defaultVariants: {
     state: "default"
   },
   variants: {
     state: {
-      default: ["tw-text-muted-foreground"],
-      warning: ["tw-text-warning"]
+      default: ["tw:text-muted-foreground"],
+      warning: ["tw:text-warning"]
     }
   }
 });
@@ -3962,10 +3799,7 @@ var NumberInput = ({
     }
   );
 };
-var FormGroupNumberInput = ({
-  ref,
-  ...props
-}) => {
+var FormGroupNumberInput = ({ ref, ...props }) => {
   const { state } = useFormGroupContext();
   return /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...props, ref, state });
 };
@@ -3977,8 +3811,18 @@ var Textarea = ({
   variant,
   sizing,
   focusVariant,
+  // value handling
+  value: valueProp,
+  defaultValue,
+  onValueChange,
   ...rest
 }) => {
+  const [value, setValue] = useControllableState({
+    // `undefined` stays uncontrolled; any provided value (incl. `null`) is controlled, coerced to ''.
+    prop: valueProp === void 0 ? void 0 : valueProp ?? "",
+    defaultProp: defaultValue ?? "",
+    onChange: onValueChange
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     InputGroup,
     {
@@ -3987,7 +3831,7 @@ var Textarea = ({
       focusVariant,
       variant,
       className: containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx(InputGroup.TextArea, { ...rest, ref })
+      children: /* @__PURE__ */ jsxRuntime.jsx(InputGroup.TextArea, { ...rest, ref, value, onValueChange: setValue })
     }
   );
 };
@@ -3995,12 +3839,10 @@ var FormGroupTextarea = (props) => {
   const { state } = useFormGroupContext();
   return /* @__PURE__ */ jsxRuntime.jsx(Textarea, { state, ...props });
 };
-
-// src/components/Input/Input.tsx
 init_icons();
 init_utils2();
 
-// src/components/Input/utils.ts
+// src/blocks/TextInput/utils.ts
 init_utils2();
 var genInputTestId = (prefix = "") => {
   const ps = createPrefixedString(prefix);
@@ -4011,7 +3853,11 @@ var genInputTestId = (prefix = "") => {
     clearButton: ps`clear-button`
   };
 };
-var Input = ({
+var sanitizeTextInputValue = (value) => {
+  if (typeof value === "string" && value.trim() === "") return "";
+  return value;
+};
+var TextInput = ({
   ref: forwardedRef,
   state = "default",
   sizing = "default",
@@ -4033,23 +3879,28 @@ var Input = ({
   focusVariant = "default",
   onChange,
   onBlur,
-  value,
+  onValueChange,
+  onValueBlur,
+  value: valueProp,
   defaultValue,
   ...inputProps
 }) => {
-  const [hasUncontrolledValue, setHasUncontrolledValue] = react.useState(() => !!defaultValue);
-  const hasValue = !!value || hasUncontrolledValue;
   const inputRef = react.useRef(null);
+  const [value, setValue] = useControllableState({
+    // `undefined` stays uncontrolled; any provided value (incl. `null`) is controlled and coerced
+    // to a string. Whitespace-only input collapses to '' via `sanitizeTextInputValue`.
+    prop: valueProp === void 0 ? void 0 : sanitizeTextInputValue(valueProp) ?? "",
+    defaultProp: sanitizeTextInputValue(defaultValue) ?? "",
+    onChange: onValueChange
+  });
   const testId = genInputTestId(prefixTestId);
-  const isClearButtonVisible = hasValue && !disabled && !readOnly || !!onClear;
+  const isClearButtonVisible = !!value && !disabled && !readOnly || !!onClear;
   const handleChange = (event) => {
-    const val = event.target.value;
-    setHasUncontrolledValue(val !== "");
+    setValue(event.target.value);
     onChange?.(event);
   };
   const handleBlur = (event) => {
-    const val = event.target.value;
-    setHasUncontrolledValue(val !== "");
+    onValueBlur?.(event.target.value);
     onBlur?.(event);
   };
   const handleClear = () => {
@@ -4057,11 +3908,8 @@ var Input = ({
     inputRef.current.value = "";
     inputRef.current.focus();
     onClear?.();
-    setHasUncontrolledValue(false);
-    onChange?.(createChangeInputEvent(inputRef.current));
+    handleChange(createChangeInputEvent(inputRef.current));
   };
-  const isControlled = value !== void 0;
-  const valueProp = isControlled ? { value: value ?? "" } : { defaultValue: defaultValue ?? "" };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     InputGroup,
     {
@@ -4077,7 +3925,7 @@ var Input = ({
           InputGroup.Input,
           {
             ...inputProps,
-            ...valueProp,
+            value,
             autoFocus,
             type,
             onChange: handleChange,
@@ -4099,14 +3947,14 @@ var Input = ({
               onMouseDown: (e) => e.preventDefault(),
               onClick: handleClear,
               "data-testid": testId.clearButton,
-              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.X, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw:size-4" })
             }
           ),
           rightSuffix && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn({
-                "tw-whitespace-nowrap tw-bg-muted tw-px-4 -tw-mr-4 tw-py-2.5": rightSuffixVariant === "addon"
+                "tw:whitespace-nowrap tw:bg-muted tw:px-4 tw:-mr-4 tw:py-2.5": rightSuffixVariant === "addon"
               }),
               children: rightSuffix
             }
@@ -4116,53 +3964,12 @@ var Input = ({
     }
   );
 };
-var sanitizeTextInputValue = (value) => {
-  if (typeof value === "string" && value.trim() === "") return "";
-  return value;
-};
-var TextInput = ({
-  ref,
-  value,
-  defaultValue,
-  type = "text",
-  variant,
-  onValueChange,
-  onChange,
-  onValueBlur,
-  onBlur,
-  ...props
-}) => {
-  const handleChange = (event) => {
-    onValueChange?.(event.target.value);
-    onChange?.(event);
-  };
-  const handleBlur = (event) => {
-    onValueBlur?.(event.target.value);
-    onBlur?.(event);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Input,
-    {
-      ...props,
-      ref,
-      onChange: handleChange,
-      onBlur: handleBlur,
-      type,
-      variant,
-      value: sanitizeTextInputValue(value),
-      defaultValue: sanitizeTextInputValue(defaultValue)
-    }
-  );
-};
-var FormGroupTextInput = ({
-  ref,
-  ...props
-}) => {
+var FormGroupTextInput = ({ ref, ...props }) => {
   const { state } = useFormGroupContext();
   return /* @__PURE__ */ jsxRuntime.jsx(TextInput, { state, ...props, ref });
 };
 var FormGroup = ({ className, children, state, ...rest }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(FormGroupProvider, { value: { state }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: cn("tw-flex tw-flex-col tw-gap-1", className), children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(FormGroupProvider, { value: { state }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: cn("tw:flex tw:flex-col tw:gap-1", className), children }) });
 };
 FormGroup.Help = FormGroupHelp;
 FormGroup.Error = FormGroupError;
@@ -4171,10 +3978,81 @@ FormGroup.NumberInput = FormGroupNumberInput;
 FormGroup.ColorInput = FormGroupColorInput;
 FormGroup.Textarea = FormGroupTextarea;
 
+// src/blocks/MarkdownEditor/plugins/toolbar/LinkPanel.tsx
+init_Button2();
+
+// src/components/ButtonGroup/ButtonGroup.tsx
+init_utils2();
+var buttonGroupVariant = classVarianceAuthority.cva(
+  ["tailwindcss-preflight", "tw:inline-flex", "tw:items-center", "tw:group/button-group"],
+  {
+    defaultVariants: {
+      variant: "inline",
+      space: "small"
+    },
+    variants: {
+      variant: {
+        inline: [],
+        block: [
+          "tw:w-full",
+          "tw:flex-col",
+          "tw:sm:flex-row",
+          "tw:[&_a]:flex-1",
+          "tw:[&>button:not([data-icon-only=true])]:flex-1"
+        ]
+      },
+      space: {
+        "extra-small": "tw:gap-1",
+        "little-small": "tw:gap-2",
+        small: "tw:gap-3",
+        medium: "tw:gap-4",
+        large: "tw:gap-6",
+        compact: [
+          "tw:border-collapse",
+          "tw:!gap-0",
+          // ensure that focus visible outline is at the top
+          "tw:[&>*:focus-visible]:!z-10",
+          "tw:[&>*:not(:first-child)]:rounded-l-none",
+          "tw:[&>*:not(:last-child)]:rounded-r-none",
+          "tw:[&>*:not(:last-child)]:border-r-0",
+          "tw:[&>*:not(:first-child)]:border-l-0",
+          // separator
+          "tw:[&>*:not(:first-child)]:before:content",
+          "tw:[&>*:not(:first-child)]:before:absolute",
+          "tw:[&>*:not(:first-child)]:before:left-0",
+          "tw:[&>*:not(:first-child)]:before:h-full",
+          "tw:[&>*:not(:first-child)]:before:w-px",
+          "tw:[&>*:not(:first-child)]:before:bg-black/10"
+        ]
+      }
+    }
+  }
+);
+var ButtonGroup = ({
+  ref,
+  children,
+  space = "small",
+  className,
+  variant,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      ...rest,
+      role: "group",
+      "data-variant": variant,
+      className: cn(buttonGroupVariant({ variant, space }), className),
+      children
+    }
+  );
+};
+
 // src/components/Label/Label.tsx
 init_utils2();
-var Optional = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-muted-foreground", className), children: "(optional)" });
-var Required = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-primary", className), children: "*" });
+var Optional = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, "aria-hidden": true, className: cn("tw:ml-0.5", "tw:text-muted-foreground", className), children: "(optional)" });
+var Required = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, "aria-hidden": true, className: cn("tw:ml-0.5", "tw:text-primary", className), children: "*" });
 var Label2 = ({ className, children, id, htmlFor, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
   RLabel__namespace.Root,
   {
@@ -4182,7 +4060,7 @@ var Label2 = ({ className, children, id, htmlFor, ...rest }) => /* @__PURE__ */
     id: id?.toString(),
     htmlFor: htmlFor?.toString(),
     className: cn(
-      "tw-m-0 tw-text-foreground tw-font-normal peer-disabled:tw-opacity-50",
+      "tw:m-0 tw:text-foreground tw:font-normal tw:peer-disabled:opacity-50",
       className
     ),
     children
@@ -4191,9 +4069,12 @@ var Label2 = ({ className, children, id, htmlFor, ...rest }) => /* @__PURE__ */
 Label2.Optional = Optional;
 Label2.Required = Required;
 
-// src/components/MarkdownEditor/plugins/toolbar/ToolbarButton.tsx
-init_utils2();
+// src/blocks/MarkdownEditor/plugins/toolbar/LinkPanel.tsx
+init_icons();
+
+// src/blocks/MarkdownEditor/plugins/toolbar/ToolbarButton.tsx
 init_Tooltip2();
+init_utils2();
 var ToolbarButton = ({
   active,
   disabled,
@@ -4208,9 +4089,9 @@ var ToolbarButton = ({
     disabled,
     onClick,
     className: cn(
-      "tw-flex tw-h-7 tw-min-w-7 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded tw-border-0 tw-bg-transparent tw-px-1 tw-text-xs tw-text-muted-foreground",
-      "hover:tw-bg-accent disabled:tw-cursor-not-allowed disabled:tw-opacity-30",
-      active && "tw-bg-secondary-100 tw-text-secondary-500",
+      "tw:flex tw:h-7 tw:min-w-7 tw:cursor-pointer tw:items-center tw:justify-center tw:rounded tw:border-0 tw:bg-transparent tw:px-1 tw:text-xs tw:text-muted-foreground",
+      "tw:hover:bg-accent tw:disabled:cursor-not-allowed tw:disabled:opacity-30",
+      active && "tw:bg-secondary-100 tw:text-secondary-500",
       extraClassName
     ),
     children
@@ -4282,20 +4163,20 @@ var LinkPanel = ({ editor, isLink }) => {
         active: true,
         onClick: () => editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, null),
         tooltip: "Remove Link",
-        children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Link, { className: "tw-size-4" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "tw:size-4" })
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-relative", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { active: open, onClick: handleOpen, tooltip: "Insert Link", children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Link, { className: "tw-size-4" }) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw:relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { active: open, onClick: handleOpen, tooltip: "Insert Link", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "tw:size-4" }) }),
     open && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref: panelRef,
-        className: "tw-absolute tw-left-0 tw-top-full tw-z-50 tw-mt-1 tw-w-80 tw-rounded-md tw-border tw-border-border tw-bg-popover tw-p-3 tw-text-popover-foreground tw-shadow-lg",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-2", children: [
+        className: "tw:absolute tw:left-0 tw:top-full tw:z-50 tw:mt-1 tw:w-80 tw:rounded-md tw:border tw:border-border tw:bg-popover tw:p-3 tw:text-popover-foreground tw:shadow-lg",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw:flex tw:flex-col tw:gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "link-label", className: "tw-mb-1 tw-text-xs", children: "Label" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "link-label", className: "tw:mb-1 tw:text-xs", children: "Label" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               TextInput,
               {
@@ -4310,7 +4191,7 @@ var LinkPanel = ({ editor, isLink }) => {
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "link-url", className: "tw-mb-1 tw-text-xs", children: "URL" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "link-url", className: "tw:mb-1 tw:text-xs", children: "URL" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               TextInput,
               {
@@ -4332,7 +4213,7 @@ var LinkPanel = ({ editor, isLink }) => {
     )
   ] });
 };
-var ToolbarDivider = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-mx-0.5 tw-h-5 tw-w-px tw-bg-border" });
+var ToolbarDivider = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw:mx-0.5 tw:h-5 tw:w-px tw:bg-border" });
 var ELEMENT_FORMAT_TYPES = ["left", "center", "right", "justify", "start", "end", ""];
 var isElementFormatType = (value) => ELEMENT_FORMAT_TYPES.includes(value);
 var toElementFormatType = (value) => isElementFormatType(value) ? value : "left";
@@ -4441,7 +4322,7 @@ var ToolbarPlugin = () => {
         "aria-label": "Formatting options",
         onMouseDown: (e) => e.preventDefault(),
         style: { top: position.top, left: position.left },
-        className: "tw-absolute tw-z-[1060] tw-flex tw--translate-y-full tw-items-center tw-gap-0.5 tw-rounded-lg tw-border tw-border-border tw-bg-popover tw-px-1.5 tw-py-1 tw-text-popover-foreground tw-shadow-lg",
+        className: "tw:absolute tw:z-[1060] tw:flex tw:-translate-y-full tw:items-center tw:gap-0.5 tw:rounded-lg tw:border tw:border-border tw:bg-popover tw:px-1.5 tw:py-1 tw:text-popover-foreground tw:shadow-lg",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(BlockTypeDropdown, { editor, blockType }),
           /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
@@ -4451,7 +4332,7 @@ var ToolbarPlugin = () => {
               active: isBold,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "bold"),
               tooltip: "Bold (Ctrl+B)",
-              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Bold, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bold, { className: "tw:size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4460,7 +4341,7 @@ var ToolbarPlugin = () => {
               active: isItalic,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "italic"),
               tooltip: "Italic (Ctrl+I)",
-              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Italic, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Italic, { className: "tw:size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4469,7 +4350,7 @@ var ToolbarPlugin = () => {
               active: isUnderline,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "underline"),
               tooltip: "Underline (Ctrl+U)",
-              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Underline, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Underline, { className: "tw:size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4478,7 +4359,7 @@ var ToolbarPlugin = () => {
               active: isStrikethrough,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "strikethrough"),
               tooltip: "Strikethrough",
-              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Strikethrough, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Strikethrough, { className: "tw:size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4487,7 +4368,7 @@ var ToolbarPlugin = () => {
               active: isCode,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "code"),
               tooltip: "Inline Code",
-              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Code, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: "tw:size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
@@ -4505,7 +4386,7 @@ var ToolbarPlugin = () => {
                 }
               },
               tooltip: "Bullet List",
-              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.List, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { className: "tw:size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4520,7 +4401,7 @@ var ToolbarPlugin = () => {
                 }
               },
               tooltip: "Numbered List",
-              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ListOrdered, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListOrdered, { className: "tw:size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
@@ -4542,7 +4423,7 @@ var ToolbarPlugin = () => {
                 });
               },
               tooltip: "Quote",
-              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Quote, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Quote, { className: "tw:size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4561,7 +4442,7 @@ var ToolbarPlugin = () => {
                 });
               },
               tooltip: "Code Block",
-              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.SquareCode, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquareCode, { className: "tw:size-4" })
             }
           )
         ]
@@ -4571,35 +4452,35 @@ var ToolbarPlugin = () => {
   );
 };
 
-// src/components/MarkdownEditor/theme.ts
+// src/blocks/MarkdownEditor/theme.ts
 var editorTheme = {
-  link: "tw-cursor-pointer !tw-text-primary tw-underline",
+  link: "tw:cursor-pointer tw:!text-primary tw:underline",
   text: {
-    bold: "tw-font-bold",
-    italic: "tw-italic",
-    strikethrough: "tw-line-through",
-    underline: "tw-underline",
-    code: "tw-rounded tw-bg-muted tw-px-1 tw-py-0.5 tw-font-mono tw-text-[0.85em]"
+    bold: "tw:font-bold",
+    italic: "tw:italic",
+    strikethrough: "tw:line-through",
+    underline: "tw:underline",
+    code: "tw:rounded tw:bg-muted tw:px-1 tw:py-0.5 tw:font-mono tw:text-[0.85em]"
   },
   list: {
-    ol: "!tw-list-decimal",
-    ul: "!tw-list-disc",
-    checklist: "!tw-list-none !tw-pl-0",
+    ol: "tw:!list-decimal",
+    ul: "tw:!list-disc",
+    checklist: "tw:!list-none tw:!pl-0",
     listitemChecked: [
-      "tw-relative !tw-pl-6 tw-list-none tw-outline-none tw-line-through tw-text-muted-foreground",
-      'before:tw-content-[""] before:tw-absolute before:tw-left-0 before:tw-top-[3px]',
-      "before:tw-size-4 before:tw-rounded before:tw-border before:tw-border-solid",
-      "before:tw-bg-primary before:tw-border-primary before:tw-cursor-pointer",
-      'after:tw-content-[""] after:tw-absolute after:tw-left-[5.5px] after:tw-top-[5.5px]',
-      "after:tw-w-1 after:tw-h-2 after:tw-border-primary-foreground after:tw-border-solid",
-      "after:tw-border-r-[1.5px] after:tw-border-b-[1.5px] after:tw-border-t-0 after:tw-border-l-0",
-      "after:tw-rotate-45"
+      "tw:relative tw:!pl-6 tw:list-none tw:outline-hidden tw:line-through tw:text-muted-foreground",
+      'tw:before:content-[""] tw:before:absolute tw:before:left-0 tw:before:top-[3px]',
+      "tw:before:size-4 tw:before:rounded tw:before:border tw:before:border-solid",
+      "tw:before:bg-primary tw:before:border-primary tw:before:cursor-pointer",
+      'tw:after:content-[""] tw:after:absolute tw:after:left-[5.5px] tw:after:top-[5.5px]',
+      "tw:after:w-1 tw:after:h-2 tw:after:border-primary-foreground tw:after:border-solid",
+      "tw:after:border-r-[1.5px] tw:after:border-b-[1.5px] tw:after:border-t-0 tw:after:border-l-0",
+      "tw:after:rotate-45"
     ].join(" "),
     listitemUnchecked: [
-      "tw-relative !tw-pl-6 tw-list-none tw-outline-none",
-      'before:tw-content-[""] before:tw-absolute before:tw-left-0 before:tw-top-[3px]',
-      "before:tw-size-4 before:tw-rounded before:tw-border before:tw-border-solid",
-      "before:tw-border-input before:tw-bg-background before:tw-cursor-pointer"
+      "tw:relative tw:!pl-6 tw:list-none tw:outline-hidden",
+      'tw:before:content-[""] tw:before:absolute tw:before:left-0 tw:before:top-[3px]',
+      "tw:before:size-4 tw:before:rounded tw:before:border tw:before:border-solid",
+      "tw:before:border-input tw:before:bg-background tw:before:cursor-pointer"
     ].join(" ")
   }
 };
@@ -4663,16 +4544,16 @@ var MarkdownEditor = ({
     "div",
     {
       className: cn(
-        !compact && "tw-prose",
-        // Compact mode drops `tw-prose`, so Lexical's <p> wrappers fall back to the browser
+        !compact && "tw:prose",
+        // Compact mode drops `tw:prose`, so Lexical's <p> wrappers fall back to the browser
         // default `margin: 1em 0` — visually huge at heading sizes. Zero them, and use the
         // adjacent-sibling selector for paragraph spacing so single-paragraph blocks (titles,
         // short descriptions) stay tight while multi-paragraph blocks still breathe.
-        compact && "[&_p]:tw-m-0 [&_p+p]:tw-mt-2",
+        compact && "tw:[&_p]:m-0 tw:[&_p+p]:mt-2",
         // Display-state clamp: 2 lines, dropped in focus-within so editing expands to full
         // height. line-clamp is self-gating (no effect below 3 lines), so short/empty content
         // renders clean; a CSS fade can't gate on overflow without JS, so it's omitted.
-        clampDisplay && "[&:not(:focus-within)]:tw-line-clamp-2",
+        clampDisplay && "tw:[&:not(:focus-within)]:line-clamp-2",
         className
       ),
       onBlur: handleBlur,
@@ -4682,12 +4563,12 @@ var MarkdownEditor = ({
           "div",
           {
             className: cn(
-              "tw-relative tw-rounded-md tw-transition-colors",
+              "tw:relative tw:rounded-md tw:transition-colors",
               // In compact mode the padding lets the hover bg / focus ring extend past the text,
               // but a matching negative margin shifts the wrapper outward so the text itself stays
               // aligned with the parent's content edge (i.e. with where static text would render).
-              compact ? "tw-px-1.5 tw-py-0.5 -tw-mx-1.5 -tw-my-0.5" : "tw-p-2",
-              editable && "tw-cursor-text hover:tw-bg-muted focus-within:tw-ring-2 focus-within:tw-ring-ring/40"
+              compact ? "tw:px-1.5 tw:py-0.5 tw:-mx-1.5 tw:-my-0.5" : "tw:p-2",
+              editable && "tw:cursor-text tw:hover:bg-muted tw:focus-within:ring-2 tw:focus-within:ring-ring/40"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               LexicalRichTextPlugin.RichTextPlugin,
@@ -4695,15 +4576,15 @@ var MarkdownEditor = ({
                 contentEditable: /* @__PURE__ */ jsxRuntime.jsx(
                   LexicalContentEditable.ContentEditable,
                   {
-                    className: cn("tw-outline-none", useDefaultMinHeight && "tw-min-h-[100px]"),
+                    className: cn("tw:outline-hidden", useDefaultMinHeight && "tw:min-h-[100px]"),
                     style: customMinHeight,
                     "aria-placeholder": placeholder ?? "",
                     placeholder: placeholder ? /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
                         className: cn(
-                          "tw-pointer-events-none tw-absolute tw-select-none tw-text-muted-foreground",
-                          compact ? "tw-left-1.5 tw-top-0.5" : "tw-left-2 tw-top-[calc(0.5rem+0.35em)]"
+                          "tw:pointer-events-none tw:absolute tw:select-none tw:text-muted-foreground",
+                          compact ? "tw:left-1.5 tw:top-0.5" : "tw:left-2 tw:top-[calc(0.5rem+0.35em)]"
                         ),
                         children: placeholder
                       }