@ai-matrx/rich-content 0.2.3 → 0.2.6

package/dist/mermaid/sanitize.js

@@ -0,0 +1,234 @@
+import {
+  detectDiagramType,
+  splitFrontmatter
+} from "./diagram-type.js";
+import { soleFence } from "@ai-matrx/content-ir/source";
+function humanizeMermaidError(raw) {
+  if (!raw) return raw;
+  const lower = raw.toLowerCase();
+  const isInternalNoise = lower.includes("circular structure") || lower.includes("__reactfiber") || lower.includes("htmlhtmlelement") || lower.includes("statenode") || lower.includes("converting circular");
+  if (isInternalNoise) {
+    return "The diagram could not be parsed \u2014 the syntax is invalid.";
+  }
+  const firstLine = raw.split("\n")[0]?.trim();
+  return firstLine && firstLine.length > 0 ? firstLine : raw;
+}
+const NORMALIZERS = [
+  {
+    rule: "strip-wrapping-fence",
+    detail: "Removed a stray ```mermaid fence wrapped around the diagram body",
+    apply: (s) => {
+      const fenced = soleFence(s);
+      return fenced && ["", "mermaid", "mmd"].includes(fenced.lang.toLowerCase()) ? fenced.body : s;
+    }
+  },
+  {
+    rule: "normalize-whitespace",
+    detail: "Normalized line endings and removed BOM/zero-width characters",
+    apply: (s) => s.replace(/\r\n?/g, "\n").replace(/[​‌‍]/g, "").replace(/^\n+/, "")
+  },
+  {
+    rule: "replace-smart-quotes",
+    detail: "Replaced smart quotes with straight quotes",
+    apply: (s) => s.replace(/[“”]/g, '"').replace(/[‘’]/g, "'")
+  },
+  {
+    rule: "convert-newline-escapes",
+    detail: "Converted literal \\n line-break escapes to <br/> (mermaid uses <br/>, not \\n)",
+    // The #1 LLM mistake: emitting a literal backslash-n (two chars) for a
+    // line break inside a label. Mermaid's parser rejects it; the line break
+    // token is <br/>. Real source newlines are 0x0A bytes and are untouched —
+    // this only rewrites the two-char escape sequences `\n` and `\r\n`.
+    apply: (s) => s.replace(/\\(?:r\\)?n/g, "<br/>")
+  },
+  {
+    rule: "decode-arrow-entities",
+    detail: "Decoded HTML-escaped arrows (--&gt; \u2192 -->)",
+    apply: (s) => s.replace(/--&gt;/g, "-->").replace(/-&gt;&gt;/g, "->>").replace(/&gt;/g, ">")
+  },
+  {
+    rule: "normalize-arrow-dashes",
+    detail: "Replaced en/em dashes inside arrows with ASCII hyphens (\u2014> \u2192 -->)",
+    // Only touches a dash-run that ENDS in `>` or BEGINS after `<`, so the
+    // arrow's shape is preserved across every diagram type — an em-dash in a
+    // label (no adjacent `>`/`<`) is never touched. Fixes editor/keyboard
+    // autocorrect turning `-->` into `—>`.
+    apply: (s) => s.replace(/[-–—=.]*[–—][-–—=.]*>/g, (run) => run.replace(/[–—]/g, "-")).replace(/<[-–—=.]*[–—][-–—=.]*/g, (run) => run.replace(/[–—]/g, "-"))
+  }
+];
+const FLOWCHART_ONLY = (t) => t === "flowchart";
+const ANY = () => true;
+function mapBodyLines(source, fn) {
+  const { bodyStartIndex, lines } = splitFrontmatter(source);
+  const out = lines.map((line, i) => i < bodyStartIndex ? line : fn(line));
+  return out.join("\n");
+}
+const FIXERS = [
+  {
+    rule: "header-own-line",
+    detail: "Moved the diagram header onto its own line",
+    appliesTo: FLOWCHART_ONLY,
+    apply: (s) => mapBodyLines(s, (line) => {
+      const m = /^(\s*)(flowchart|graph)\s+(TB|TD|LR|RL|BT)\s+(\S.*)$/.exec(
+        line
+      );
+      return m ? `${m[1]}${m[2]} ${m[3]}
+${m[1]}  ${m[4]}` : line;
+    })
+  },
+  {
+    rule: "fix-comment-syntax",
+    detail: "Converted // and # comment lines to %% comments",
+    appliesTo: ANY,
+    apply: (s) => mapBodyLines(
+      s,
+      (line) => line.replace(/^(\s*)(\/\/|#)(?!#)\s?/, "$1%% ")
+    )
+  },
+  {
+    rule: "strip-list-bullets",
+    detail: "Removed markdown list bullets the model added before statements",
+    appliesTo: ANY,
+    apply: (s) => mapBodyLines(s, (line) => line.replace(/^(\s*)[-*]\s+(?=\w)/, "$1"))
+  },
+  {
+    rule: "fix-arrow-typos",
+    detail: "Repaired arrow syntax (-> and => become -->)",
+    appliesTo: FLOWCHART_ONLY,
+    apply: (s) => mapBodyLines(
+      s,
+      (line) => line.replace(/(\s)=>(\s)/g, "$1-->$2").replace(/([^-<>])->([^>])/g, "$1-->$2")
+    )
+  },
+  {
+    rule: "quote-unsafe-labels",
+    detail: "Quoted node labels containing special characters",
+    appliesTo: FLOWCHART_ONLY,
+    apply: (s) => mapBodyLines(s, (line) => {
+      const UNSAFE = /[(){}\[\]:;#&|]/;
+      const wrap = (label) => `"${label.trim().replace(/"/g, "#quot;")}"`;
+      let out = line.replace(
+        /([A-Za-z0-9_]+)\(\[(?!")([^\]]*)\]\)/g,
+        (m, id, label) => UNSAFE.test(label) ? `${id}([${wrap(label)}])` : m
+      ).replace(
+        /([A-Za-z0-9_]+)\[\((?!")([^)]*)\)\]/g,
+        (m, id, label) => UNSAFE.test(label) ? `${id}[(${wrap(label)})]` : m
+      ).replace(
+        /([A-Za-z0-9_]+)\[\[(?!")([^\]]*)\]\]/g,
+        (m, id, label) => UNSAFE.test(label) ? `${id}[[${wrap(label)}]]` : m
+      ).replace(
+        /([A-Za-z0-9_]+)\{\{(?!")([^}]*)\}\}/g,
+        (m, id, label) => UNSAFE.test(label) ? `${id}{{${wrap(label)}}}` : m
+      );
+      out = out.replace(
+        /([A-Za-z0-9_]+)\[(?!\[)(?!\()(?!")([^\]]*[(){}:;#&][^\]]*)\]/g,
+        (_m, id, label) => `${id}[${wrap(label)}]`
+      ).replace(
+        /([A-Za-z0-9_]+)\{(?!\{)(?!")([^}]*[()[\]:;#&][^}]*)\}/g,
+        (_m, id, label) => `${id}{${wrap(label)}}`
+      );
+      return out;
+    })
+  },
+  {
+    rule: "fix-reserved-end",
+    detail: 'Renamed reserved node id "end" (lowercase "end" breaks flowcharts)',
+    appliesTo: FLOWCHART_ONLY,
+    apply: (s) => mapBodyLines(s, (line) => {
+      if (/^\s*end\s*$/.test(line)) return line;
+      return line.replace(/(^|\s|>)end(\[|\(|\{)/g, "$1end_node$2").replace(/(^|\s|>)end($|\s)/g, "$1end_node$2");
+    })
+  },
+  {
+    rule: "strip-markdown-emphasis",
+    detail: "Removed **bold** / __underline__ markers inside labels",
+    appliesTo: ANY,
+    apply: (s) => mapBodyLines(
+      s,
+      (line) => line.replace(/\*\*([^*]+)\*\*/g, "$1").replace(/__([^_]+)__/g, "$1")
+    )
+  },
+  {
+    rule: "remove-trailing-commas",
+    detail: "Removed trailing commas after data values",
+    appliesTo: (t) => t === "pie" || t === "xychart",
+    apply: (s) => mapBodyLines(s, (line) => line.replace(/,\s*$/, ""))
+  },
+  {
+    rule: "balance-subgraph-end",
+    detail: "Appended missing `end` for an unclosed subgraph",
+    appliesTo: FLOWCHART_ONLY,
+    apply: (s) => {
+      const opens = (s.match(/^\s*subgraph\b/gm) || []).length;
+      const ends = (s.match(/^\s*end\s*$/gm) || []).length;
+      if (opens > ends) return s + "\nend".repeat(opens - ends);
+      return s;
+    }
+  },
+  {
+    rule: "escape-inner-quotes",
+    detail: "Escaped quote characters inside quoted labels",
+    appliesTo: FLOWCHART_ONLY,
+    apply: (s) => mapBodyLines(
+      s,
+      (line) => line.replace(
+        /([[({])"(.*)"([\])}])/g,
+        (full, open, inner, close) => inner.includes('"') ? `${open}"${inner.replace(/"/g, "#quot;")}"${close}` : full
+      )
+    )
+  }
+];
+function scream(fixes, originalLength) {
+  console.warn(
+    `[MermaidSanitize] RECOVERED an invalid diagram (${originalLength} chars) via ${fixes.length} fix(es): ` + fixes.map((f) => f.rule).join(" \u2192 "),
+    fixes
+  );
+}
+async function parseWithLadder(raw, validate, opts) {
+  const first = await validate(raw);
+  if (first.ok) return { source: raw, valid: true, fixes: [] };
+  const fixes = [];
+  let current = raw;
+  for (const n of NORMALIZERS) {
+    const next = n.apply(current);
+    if (next !== current) {
+      fixes.push({ rule: n.rule, detail: n.detail });
+      current = next;
+    }
+  }
+  if (fixes.length > 0) {
+    const check = await validate(current);
+    if (check.ok) {
+      if (!opts.streaming) scream(fixes, raw.length);
+      return { source: current, valid: true, fixes };
+    }
+  }
+  if (opts.streaming) {
+    return { source: current, valid: false, fixes };
+  }
+  const diagramType = detectDiagramType(current);
+  let lastError = first.error;
+  for (const fixer of FIXERS) {
+    if (!fixer.appliesTo(diagramType)) continue;
+    const next = fixer.apply(current);
+    if (next === current) continue;
+    fixes.push({ rule: fixer.rule, detail: fixer.detail });
+    current = next;
+    const check = await validate(current);
+    if (check.ok) {
+      scream(fixes, raw.length);
+      return { source: current, valid: true, fixes };
+    }
+    lastError = check.error ?? lastError;
+  }
+  return {
+    source: current,
+    valid: false,
+    fixes,
+    error: lastError ?? "Mermaid could not parse this diagram"
+  };
+}
+export {
+  humanizeMermaidError,
+  parseWithLadder
+};

package/dist/mermaid/types.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Shared types for the Mermaid system.
+ *
+ * The mermaid library itself is ONLY imported (dynamically) by runtime.ts.
+ * Everything else in components/mermaid/ stays mermaid-free so it can load
+ * in the initial bundle without dragging the ~2MB engine along.
+ */
+export type MermaidTheme = "default" | "dark" | "forest" | "neutral" | "base";
+export type MermaidThemePreference = "auto" | MermaidTheme;
+export type MermaidLook = "classic" | "handDrawn";
+export type MermaidLayout = "dagre" | "elk";
+/** Resolved options handed to the render engine (no "auto" — already resolved). */
+export interface MermaidRenderOptions {
+    theme: MermaidTheme;
+    look: MermaidLook;
+    layout: MermaidLayout;
+    /**
+     * Where a pie chart draws its legend. "bottom" stacks it under the pie so a
+     * narrow pane or a phone shows every label; the renderer picks it from the
+     * frame's width. Omitted = mermaid's default (right of the pie).
+     */
+    pieLegend?: MermaidPieLegend;
+}
+export type MermaidPieLegend = "right" | "bottom";
+/** User-facing option set; theme may be "auto" (follows app dark/light mode). */
+export interface MermaidOptionPreferences {
+    theme: MermaidThemePreference;
+    look: MermaidLook;
+    layout: MermaidLayout;
+}
+export declare const DEFAULT_MERMAID_PREFERENCES: MermaidOptionPreferences;
+/** Per-artifact metadata persisted in canvas_items.content.metadata. */
+export interface MermaidArtifactMetadata {
+    diagramType?: string;
+    title?: string;
+    theme?: MermaidThemePreference;
+    look?: MermaidLook;
+    layout?: MermaidLayout;
+    [key: string]: unknown;
+}
+export declare function resolveMermaidTheme(pref: MermaidThemePreference, appMode: "light" | "dark"): MermaidTheme;
+/** Stable string key for a render-options combination (config re-init gate). */
+export declare function renderOptionsKey(opts: MermaidRenderOptions): string;

package/dist/mermaid/types.js

@@ -0,0 +1,21 @@
+console.log(
+  "%c[MERMAID IMPORT TEST] components/mermaid/types.ts",
+  "color: #fff; background: #7c3aed; font-weight: bold; padding: 2px 6px; border-radius: 3px;"
+);
+const DEFAULT_MERMAID_PREFERENCES = {
+  theme: "auto",
+  look: "classic",
+  layout: "dagre"
+};
+function resolveMermaidTheme(pref, appMode) {
+  if (pref !== "auto") return pref;
+  return appMode === "dark" ? "dark" : "default";
+}
+function renderOptionsKey(opts) {
+  return `${opts.theme}|${opts.look}|${opts.layout}|${opts.pieLegend ?? "right"}`;
+}
+export {
+  DEFAULT_MERMAID_PREFERENCES,
+  renderOptionsKey,
+  resolveMermaidTheme
+};

package/dist/mermaid/view/ViewModePane.d.ts

@@ -0,0 +1,24 @@
+/**
+ * VIEW mode — the diagram, and nothing else.
+ *
+ * The workbench's other three modes are all EDITORS: `visual` is tap-to-edit,
+ * `outline` is structured rows, `code` is a CodeMirror/preview split. Before
+ * this pane there was no way to simply LOOK at a diagram in the canvas, and
+ * because `visual`/`outline` are gated on the structural-fidelity check, any
+ * diagram with advanced syntax (subgraphs, `style` lines — i.e. most real ones)
+ * fell back to `code` and greeted the user with source beside their diagram.
+ *
+ * So this is the default mode: full-pane, chrome-free, pan/zoom, no source. It
+ * renders through `MermaidRenderer` — the same renderer behind the inline chat
+ * block, the fullscreen view and the public share page — with the workbench's
+ * LIVE render options, so theme/look/layout changes from the toolbar apply here
+ * exactly as they do in the other modes.
+ */
+import React from "react";
+import type { MermaidRenderOptions } from "../types.js";
+interface ViewModePaneProps {
+    source: string;
+    options: MermaidRenderOptions;
+}
+export declare function ViewModePane({ source, options }: ViewModePaneProps): React.JSX.Element;
+export {};

package/dist/mermaid/view/ViewModePane.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { MermaidRenderer } from "../MermaidRenderer.js";
+function ViewModePane({ source, options }) {
+  return /* @__PURE__ */ jsx("div", { className: "h-full min-h-0 p-2", children: /* @__PURE__ */ jsx(MermaidRenderer, { source, options, fillHeight: true }) });
+}
+export {
+  ViewModePane
+};

package/dist/utils/client-lazy.d.ts

@@ -8,6 +8,6 @@ import { type ComponentType } from "react";
 export declare function useIsClient(): boolean;
 export declare function clientLazy<P extends object>(load: () => Promise<{
     default: ComponentType<P>;
-}>, options?: {
+} | ComponentType<P>>, options?: {
     loading?: ComponentType;
 }): ComponentType<P>;

package/dist/utils/client-lazy.js

@@ -8,7 +8,10 @@ function useIsClient() {
   return useSyncExternalStore(subscribe, onClient, onServer);
 }
 function clientLazy(load, options = {}) {
-  const Lazy = lazy(load);
+  const Lazy = lazy(async () => {
+    const m = await load();
+    return typeof m === "function" || !("default" in m) ? { default: m } : m;
+  });
   const Loading = options.loading;
   function ClientLazy(props) {
     const client = useIsClient();

package/dist/utils/lifted/DiffView.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface DiffViewProps {
+    originalCode: string;
+    modifiedCode: string;
+    language: string;
+    showLineNumbers?: boolean;
+    className?: string;
+}
+export declare function DiffView({ originalCode, modifiedCode, language, showLineNumbers, className, }: DiffViewProps): React.JSX.Element;
+export {};

package/dist/utils/lifted/DiffView.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { DiffViewer } from "@ai-matrx/diff/react";
+function DiffView({
+  originalCode,
+  modifiedCode,
+  language,
+  showLineNumbers = true,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    DiffViewer,
+    {
+      original: originalCode,
+      modified: modifiedCode,
+      language,
+      engine: "auto",
+      defaultView: "inline",
+      showLineNumbers,
+      className
+    }
+  );
+}
+export {
+  DiffView
+};

package/dist/utils/lifted/IconButton.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { type GlyphTone } from "@ai-matrx/design-system/controls";
+import { LucideIcon } from "lucide-react";
+/**
+ * A door onto THE control: an icon-only controls `Button` (the 28px circle) with an optional
+ * tooltip. It has no size and no colour of its own — a glyph whose colour carries meaning says
+ * so with `glyphTone`; `className` places it (margin, position, flex), never restyles it.
+ */
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    icon: LucideIcon | React.ComponentType;
+    tooltip?: string;
+    /** Legacy tone words map onto the control's variants: ghost → quiet, default → primary,
+     *  destructive → danger. */
+    variant?: "ghost" | "outline" | "default" | "secondary" | "destructive" | "link";
+    /** The glyph's own status ink when its colour carries meaning. */
+    glyphTone?: GlyphTone;
+    /** Work in flight: the glyph turns (a refresh, a duplicate, an export). */
+    spinning?: boolean;
+    tooltipSide?: "top" | "right" | "bottom" | "left";
+    tooltipAlign?: "start" | "center" | "end";
+    tooltipOffset?: number;
+}
+declare const IconButton: React.FC<IconButtonProps>;
+export default IconButton;

package/dist/utils/lifted/IconButton.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@ai-matrx/design-system";
+import { Button } from "@ai-matrx/design-system/controls";
+const VARIANT = {
+  ghost: "quiet",
+  outline: "outline",
+  secondary: "outline",
+  default: "primary",
+  destructive: "danger",
+  link: "link"
+};
+const IconButton = ({
+  icon: Icon,
+  tooltip,
+  variant = "ghost",
+  glyphTone,
+  spinning = false,
+  tooltipSide = "bottom",
+  tooltipAlign = "center",
+  tooltipOffset = 5,
+  "aria-label": ariaLabel,
+  ...props
+}) => {
+  const control = /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: VARIANT[variant],
+      icon: spinning ? /* @__PURE__ */ jsx(Icon, { className: "animate-spin" }) : /* @__PURE__ */ jsx(Icon, {}),
+      glyphTone,
+      "aria-label": ariaLabel ?? tooltip ?? "Action",
+      ...props
+    }
+  );
+  if (!tooltip) return control;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: control }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: tooltipSide, align: tooltipAlign, className: "z-[9999]", sideOffset: tooltipOffset, children: tooltip })
+  ] });
+};
+var IconButton_default = IconButton;
+export {
+  IconButton_default as default
+};

package/dist/utils/lifted/MatrxMiniLoader.d.ts

@@ -0,0 +1 @@
+export default function MatrxMiniLoader(): import("react").JSX.Element;

package/dist/utils/lifted/MatrxMiniLoader.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import LoadingSpinner from "./loading-spinner.js";
+function MatrxMiniLoader() {
+  return /* @__PURE__ */ jsx(LoadingSpinner, { variant: "dots", message: "Initializing Matrx...", size: "md" });
+}
+export {
+  MatrxMiniLoader as default
+};

package/dist/utils/lifted/ShimmerText.d.ts

@@ -0,0 +1,5 @@
+export interface ShimmerTextProps {
+    text: string;
+    className?: string;
+}
+export declare function ShimmerText({ text, className }: ShimmerTextProps): import("react").JSX.Element;

package/dist/utils/lifted/ShimmerText.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@ai-matrx/design-system";
+function ShimmerText({ text, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-block bg-clip-text text-transparent bg-[length:200%_100%] animate-shimmer",
+        className
+      ),
+      style: {
+        backgroundImage: "linear-gradient(90deg, hsl(var(--muted-foreground) / 0.3) 0%, hsl(var(--foreground)) 50%, hsl(var(--muted-foreground) / 0.3) 100%)"
+      },
+      children: text
+    }
+  );
+}
+export {
+  ShimmerText
+};

package/dist/utils/lifted/SuspenseLoader.d.ts

@@ -0,0 +1,16 @@
+interface SuspenseLoaderProps {
+    /** Size of the spinner */
+    size?: "xs" | "sm" | "md" | "lg";
+    /** Whether to center in container */
+    centered?: boolean;
+    /** Context shown beside the spinner and announced as a live status. */
+    message?: string;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * Minimal loading component for Suspense boundaries
+ * Adaptable to any context with simple spinner animation
+ */
+export default function SuspenseLoader({ size, centered, message, className, }: SuspenseLoaderProps): import("react").JSX.Element;
+export {};

package/dist/utils/lifted/SuspenseLoader.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+const sizeClasses = {
+  xs: "h-3 w-3",
+  sm: "h-4 w-4",
+  md: "h-6 w-6",
+  lg: "h-8 w-8"
+};
+function SuspenseLoader({
+  size = "sm",
+  centered = true,
+  message,
+  className = ""
+}) {
+  const spinner = /* @__PURE__ */ jsx(
+    Loader2,
+    {
+      className: `${sizeClasses[size]} animate-spin text-muted-foreground opacity-50 ${className}`,
+      "aria-hidden": message ? true : void 0,
+      "aria-label": message ? void 0 : "Loading"
+    }
+  );
+  const content = message ? /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "inline-flex items-center gap-2",
+      role: "status",
+      "aria-live": "polite",
+      children: [
+        spinner,
+        /* @__PURE__ */ jsx("span", { children: message })
+      ]
+    }
+  ) : spinner;
+  if (centered) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-full h-full min-h-[2rem]", children: content });
+  }
+  return content;
+}
+export {
+  SuspenseLoader as default
+};

package/dist/utils/lifted/Tooltip.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+type SimpleTooltipProps = {
+    children: React.ReactNode;
+    text?: string;
+};
+type AdvancedTooltipProps = {
+    children: React.ReactNode;
+    text?: string;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "center" | "start" | "end";
+    delayDuration?: number;
+    className?: string;
+    sideOffset?: number;
+    contentClassName?: string;
+    disabled?: boolean;
+    variant?: "default" | "error" | "warning" | "success";
+};
+export declare const SimpleTooltip: ({ children, text }: SimpleTooltipProps) => string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | null | undefined;
+export declare const AdvancedTooltip: ({ children, text, side, align, delayDuration, className, sideOffset, contentClassName, disabled, variant, }: AdvancedTooltipProps) => string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | null | undefined;
+export {};

package/dist/utils/lifted/Tooltip.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "@ai-matrx/design-system";
+const SimpleTooltip = ({ children, text }) => {
+  if (!text) return children;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: text }) })
+  ] });
+};
+const AdvancedTooltip = ({
+  children,
+  text,
+  side = "top",
+  align = "center",
+  delayDuration = 200,
+  className = "",
+  sideOffset = 4,
+  contentClassName = "",
+  disabled = false,
+  variant = "default"
+}) => {
+  if (!text || disabled) return children;
+  const variantStyles = {
+    default: "bg-popover text-popover-foreground",
+    error: "bg-destructive text-destructive-foreground",
+    warning: "bg-warning text-black",
+    success: "bg-success text-black"
+  };
+  const baseContentClasses = "rounded-md px-3 py-1.5 text-sm shadow-md animate-in fade-in-0 zoom-in-95";
+  return /* @__PURE__ */ jsxs(Tooltip, { delayDuration, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, className, children }),
+    /* @__PURE__ */ jsx(
+      TooltipContent,
+      {
+        side,
+        align,
+        sideOffset,
+        className: `${baseContentClasses} ${variantStyles[variant]} ${contentClassName}`,
+        children: /* @__PURE__ */ jsx("p", { className: "leading-none whitespace-pre-wrap", children: text })
+      }
+    )
+  ] });
+};
+export {
+  AdvancedTooltip,
+  SimpleTooltip
+};