@ai-matrx/rich-content 0.2.4 → 0.2.6

package/dist/code-block/CodeBlockHeader.js

@@ -0,0 +1,472 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import {
+  Copy,
+  Check,
+  Download,
+  Expand,
+  Eye,
+  Minimize,
+  Edit2,
+  ChevronDown,
+  ChevronUp,
+  Loader2,
+  RotateCcw,
+  WrapText,
+  Maximize2,
+  ListOrdered,
+  Zap,
+  Paintbrush,
+  Code2,
+  Brain,
+  FileCode,
+  SquareArrowOutUpRight,
+  MoreHorizontal,
+  Globe
+} from "lucide-react";
+import { cn } from "@ai-matrx/design-system";
+import LanguageDisplay from "./LanguageDisplay.js";
+import IconButton from "../utils/lifted/IconButton.js";
+import { extensionForLanguage } from "../utils/lifted/languageOptions.js";
+import { useOpenOverlay, useSaveAndOpenInCodeEditor } from "../host/app-bindings.js";
+const CHAT_CAPTURES_FOLDER_NAME = "Chat Captures";
+import {
+  DYNAMIC_CONTEXT_CODE_EDITOR_AGENT,
+  GENERIC_CODE_EDITOR_AGENT,
+  PROMPT_APP_UI_EDITOR_AGENT,
+  agentForPromptKey
+} from "../utils/lifted/code-editor-agents.js";
+import { AdvancedMenu } from "../host/app-bindings.js";
+import { useAdvancedMenu } from "../host/app-bindings.js";
+const CodeBlockHeader = ({
+  language,
+  title,
+  linesCount,
+  isEditing,
+  isFullScreen,
+  isCollapsed,
+  code,
+  handleCopy,
+  handleDownload,
+  toggleEdit,
+  toggleFullScreen,
+  toggleCollapse,
+  toggleWrapLines,
+  isCopied,
+  isMobile,
+  isCompleteHTML = false,
+  handleViewHTML,
+  isCreatingPage = false,
+  showWrapLines = true,
+  handleFormat,
+  handleReset,
+  minimapEnabled = false,
+  toggleMinimap,
+  onAIEdit,
+  hideLanguageDisplay = false,
+  allowEdit = true,
+  customBuiltinKeys = [],
+  headerLeftSlot,
+  extraMenuItems
+}) => {
+  const canCollapse = linesCount > 5;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 items-center justify-between gap-2",
+        isMobile ? "pl-3" : "pl-5",
+        "py-0 rounded-t-xl",
+        "bg-zinc-300 dark:bg-zinc-700",
+        "text-xs text-gray-700 dark:text-gray-300",
+        "transition-all duration-200",
+        !isEditing && canCollapse && "cursor-pointer hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
+      ),
+      onClick: isEditing || !canCollapse ? void 0 : toggleCollapse,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center space-x-4 overflow-hidden", children: [
+          !language && /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-red-500" }),
+            /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-yellow-500" }),
+            /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-green-500" })
+          ] }),
+          !hideLanguageDisplay && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsx(LanguageDisplay, { language, isMobile }),
+            title && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "max-w-[40ch] truncate font-mono text-xs text-neutral-800 dark:text-neutral-100",
+                title,
+                children: title
+              }
+            ),
+            !isMobile && /* @__PURE__ */ jsxs("span", { className: "text-xs text-neutral-600 dark:text-neutral-400", children: [
+              linesCount,
+              " ",
+              linesCount === 1 ? "line" : "lines"
+            ] })
+          ] }),
+          headerLeftSlot && /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: (e) => e.stopPropagation(),
+              className: "flex items-center",
+              children: headerLeftSlot
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          CodeBlockButtons,
+          {
+            code,
+            language,
+            isEditing,
+            isFullScreen,
+            isCopied,
+            canCollapse,
+            isCollapsed,
+            handleCopy,
+            handleDownload,
+            toggleEdit,
+            toggleFullScreen,
+            toggleWrapLines,
+            toggleCollapse,
+            isMobile,
+            showWrapLines,
+            handleFormat,
+            handleReset,
+            minimapEnabled,
+            toggleMinimap,
+            onAIEdit,
+            allowEdit,
+            customBuiltinKeys,
+            isCompleteHTML,
+            handleViewHTML,
+            isCreatingPage,
+            extraMenuItems
+          }
+        )
+      ]
+    }
+  );
+};
+const AI_EDIT_ICONS = {
+  [GENERIC_CODE_EDITOR_AGENT.mandateKey]: Code2,
+  [DYNAMIC_CONTEXT_CODE_EDITOR_AGENT.mandateKey]: Brain,
+  [PROMPT_APP_UI_EDITOR_AGENT.mandateKey]: Paintbrush
+};
+const noopEvent = () => ({ stopPropagation() {
+} });
+const CodeBlockButtons = ({
+  code,
+  language,
+  isEditing,
+  isFullScreen,
+  isCopied,
+  canCollapse,
+  isCollapsed,
+  handleCopy,
+  handleDownload,
+  toggleWrapLines,
+  toggleEdit,
+  toggleFullScreen,
+  toggleCollapse,
+  isMobile,
+  showWrapLines = true,
+  handleFormat,
+  handleReset,
+  minimapEnabled = false,
+  toggleMinimap,
+  onAIEdit,
+  allowEdit = true,
+  customBuiltinKeys = [],
+  isCompleteHTML = false,
+  handleViewHTML,
+  isCreatingPage = false,
+  extraMenuItems
+}) => {
+  const menu = useAdvancedMenu();
+  const kebabRef = useRef(null);
+  const [isOpeningInEditor, setIsOpeningInEditor] = useState(false);
+  const openOverlay = useOpenOverlay();
+  const saveAndOpenInCodeEditor = useSaveAndOpenInCodeEditor();
+  const handleSaveToCode = () => {
+    if (!code?.trim()) return;
+    openOverlay(
+      {
+        overlayId: "saveToCode",
+        data: {
+          initialContent: code,
+          initialLanguage: language ?? "plaintext",
+          suggestedName: void 0,
+          defaultFolderId: null
+        }
+      }
+    );
+  };
+  const handleOpenInEditor = async () => {
+    if (!code?.trim() || isOpeningInEditor) return;
+    setIsOpeningInEditor(true);
+    try {
+      const ext = extensionForLanguage(language);
+      const stamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, 19);
+      const name = `snippet-${stamp}.${ext}`;
+      await saveAndOpenInCodeEditor({
+        name,
+        language,
+        content: code,
+        folderName: CHAT_CAPTURES_FOLDER_NAME,
+        tags: ["chat-capture"],
+        metadata: {
+          source: "chat-code-block",
+          savedAt: (/* @__PURE__ */ new Date()).toISOString()
+        }
+      });
+    } catch (err) {
+      console.error("[CodeBlockHeader] open-in-editor failed", err);
+    } finally {
+      setIsOpeningInEditor(false);
+    }
+  };
+  const aiEditJobs = [];
+  for (const cfg of [
+    GENERIC_CODE_EDITOR_AGENT,
+    DYNAMIC_CONTEXT_CODE_EDITOR_AGENT,
+    ...customBuiltinKeys.map((key) => agentForPromptKey(key))
+  ]) {
+    if (!aiEditJobs.some((j) => j.mandateKey === cfg.mandateKey))
+      aiEditJobs.push(cfg);
+  }
+  const menuItems = [];
+  if (isMobile && toggleFullScreen) {
+    menuItems.push({
+      key: "fullscreen",
+      icon: isFullScreen ? Minimize : Expand,
+      label: isFullScreen ? "Exit fullscreen" : "Fullscreen",
+      category: "View",
+      showToast: false,
+      action: () => toggleFullScreen(noopEvent())
+    });
+  }
+  if (isMobile && toggleCollapse && canCollapse && !isEditing) {
+    menuItems.push({
+      key: "collapse",
+      icon: isCollapsed ? ChevronDown : ChevronUp,
+      label: isCollapsed ? "Expand code" : "Collapse code",
+      category: "View",
+      showToast: false,
+      action: () => toggleCollapse(noopEvent())
+    });
+  }
+  if (toggleWrapLines) {
+    menuItems.push({
+      key: "wrap",
+      icon: WrapText,
+      iconColor: showWrapLines ? "text-blue-600 dark:text-blue-400" : void 0,
+      label: showWrapLines ? "Disable word wrap" : "Enable word wrap",
+      category: "View",
+      showToast: false,
+      action: () => toggleWrapLines(noopEvent())
+    });
+  }
+  if (toggleMinimap) {
+    menuItems.push({
+      key: "minimap",
+      icon: Maximize2,
+      iconColor: isEditing && minimapEnabled ? "text-blue-600 dark:text-blue-400" : void 0,
+      label: minimapEnabled ? "Hide minimap" : "Show minimap",
+      // Edit-mode only: absent outside it, never a greyed dead row (RC-B9 F7).
+      hidden: !isEditing,
+      category: "View",
+      showToast: false,
+      action: () => toggleMinimap(noopEvent())
+    });
+  }
+  if (handleFormat) {
+    menuItems.push({
+      key: "format",
+      icon: Zap,
+      label: "Format code",
+      description: "Shift+Alt+F",
+      hidden: !isEditing,
+      category: "Edit",
+      showToast: false,
+      action: () => handleFormat(noopEvent())
+    });
+  }
+  if (handleReset) {
+    menuItems.push({
+      key: "reset",
+      icon: RotateCcw,
+      label: "Reset to original",
+      // Edit-mode only: absent outside it, never a greyed dead row (RC-B9 F7).
+      hidden: !isEditing,
+      category: "Edit",
+      showToast: false,
+      action: () => handleReset(noopEvent())
+    });
+  }
+  menuItems.push({
+    key: "copy-numbered",
+    icon: ListOrdered,
+    label: "Copy with line numbers",
+    category: "Copy",
+    showToast: false,
+    action: () => handleCopy(noopEvent(), true)
+  });
+  menuItems.push({
+    key: "download",
+    icon: Download,
+    label: "Download as code",
+    description: `code.${extensionForLanguage(language) || "txt"}`,
+    category: "Download",
+    showToast: false,
+    action: () => handleDownload(noopEvent())
+  });
+  if (isCompleteHTML && handleViewHTML) {
+    menuItems.push({
+      key: "view-html",
+      icon: Globe,
+      iconColor: "text-purple-600 dark:text-purple-400",
+      label: "Open HTML preview",
+      description: "Render in Canvas",
+      disabled: isCreatingPage,
+      category: "Preview",
+      showToast: false,
+      action: handleViewHTML
+    });
+  }
+  menuItems.push({
+    key: "save-to-code",
+    icon: FileCode,
+    iconColor: "text-rose-600 dark:text-rose-400",
+    label: "Save to Code files",
+    description: "Add to your /code workspace",
+    category: "Save",
+    showToast: false,
+    action: handleSaveToCode
+  });
+  menuItems.push({
+    key: "save-and-open",
+    icon: isOpeningInEditor ? Loader2 : SquareArrowOutUpRight,
+    iconColor: "text-blue-600 dark:text-blue-400",
+    label: "Save and open in editor",
+    description: "Drops into Chat Captures",
+    disabled: isOpeningInEditor,
+    category: "Save",
+    showToast: false,
+    action: handleOpenInEditor
+  });
+  if (allowEdit && onAIEdit) {
+    for (const job of aiEditJobs) {
+      menuItems.push({
+        key: `ai-${job.mandateKey}`,
+        icon: AI_EDIT_ICONS[job.mandateKey] ?? Code2,
+        iconColor: "text-purple-600 dark:text-purple-400",
+        label: job.name,
+        category: "AI",
+        showToast: false,
+        action: () => onAIEdit({ mandateKey: job.mandateKey, title: job.name })
+      });
+    }
+  }
+  if (extraMenuItems && extraMenuItems.length > 0) {
+    menuItems.push(...extraMenuItems);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-0.5", isMobile ? "pr-2" : "pr-5"), children: [
+    toggleFullScreen && !isMobile && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        icon: isFullScreen ? Minimize : Expand,
+        tooltip: isFullScreen ? "Exit fullscreen" : "Fullscreen",
+        variant: "ghost",
+        onClick: toggleFullScreen,
+        tooltipSide: "bottom"
+      }
+    ),
+    toggleCollapse && !isMobile && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        icon: isCollapsed ? ChevronDown : ChevronUp,
+        tooltip: !canCollapse ? "Too few lines to collapse" : isEditing ? "Cannot collapse in edit mode" : isCollapsed ? "Expand code" : "Collapse code",
+        variant: "ghost",
+        onClick: toggleCollapse,
+        tooltipSide: "bottom",
+        disabled: isEditing || !canCollapse,
+        className: cn(
+          isEditing || !canCollapse ? "opacity-40 cursor-not-allowed" : ""
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        icon: isCopied ? Check : Copy,
+        tooltip: isCopied ? "Copied!" : "Copy code",
+        variant: "ghost",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleCopy(e);
+        },
+        tooltipSide: "bottom"
+      }
+    ),
+    toggleEdit && allowEdit && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        icon: isEditing ? Eye : Edit2,
+        tooltip: isEditing ? "Exit edit mode" : "Edit code",
+        variant: "ghost",
+        onClick: toggleEdit,
+        tooltipSide: "bottom"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { ref: kebabRef, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        icon: MoreHorizontal,
+        tooltip: "More actions",
+        variant: "ghost",
+        tooltipSide: "bottom",
+        onClick: () => {
+          if (kebabRef.current) menu.open(kebabRef.current);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      AdvancedMenu,
+      {
+        ...menu.menuProps,
+        anchorElement: menu.anchorElement,
+        items: menuItems,
+        title: "Code actions",
+        position: "bottom-right",
+        width: "260px",
+        maxWidth: "300px"
+      }
+    )
+  ] });
+};
+const EditButton = ({
+  isEditing,
+  toggleEdit
+}) => {
+  if (isEditing || !toggleEdit) return null;
+  return /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-2 z-10 backdrop-blur-sm rounded-md", children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      icon: Edit2,
+      tooltip: "Edit code",
+      variant: "ghost",
+      onClick: toggleEdit,
+      tooltipSide: "bottom"
+    }
+  ) });
+};
+var CodeBlockHeader_default = CodeBlockHeader;
+export {
+  CodeBlockHeader,
+  EditButton,
+  CodeBlockHeader_default as default
+};

package/dist/code-block/CodeEditorLoading.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CodeEditorLoading: () => React.JSX.Element;
+export default CodeEditorLoading;

package/dist/code-block/CodeEditorLoading.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileCode } from "lucide-react";
+const CodeEditorLoading = () => {
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-textured flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 animate-ping opacity-20", children: /* @__PURE__ */ jsx(FileCode, { className: "w-16 h-16 text-blue-500 dark:text-blue-400" }) }),
+      /* @__PURE__ */ jsx(FileCode, { className: "w-16 h-16 text-blue-500 dark:text-blue-400 animate-pulse" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 w-64", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-2 w-2 bg-purple-400 dark:bg-purple-500 rounded-full animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "h-2 flex-1 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse", style: { animationDelay: "100ms" } })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-2 w-2 bg-green-400 dark:bg-green-500 rounded-full animate-pulse", style: { animationDelay: "200ms" } }),
+        /* @__PURE__ */ jsx("div", { className: "h-2 w-40 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse", style: { animationDelay: "300ms" } })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-2 w-2 bg-blue-400 dark:bg-blue-500 rounded-full animate-pulse", style: { animationDelay: "400ms" } }),
+        /* @__PURE__ */ jsx("div", { className: "h-2 w-56 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse", style: { animationDelay: "500ms" } })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-2 w-2 bg-yellow-400 dark:bg-yellow-500 rounded-full animate-pulse", style: { animationDelay: "600ms" } }),
+        /* @__PURE__ */ jsx("div", { className: "h-2 w-32 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse", style: { animationDelay: "700ms" } })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "text-gray-600 dark:text-gray-400 text-sm mt-2 animate-pulse", children: "Initializing code editor..." })
+  ] }) });
+};
+var CodeEditorLoading_default = CodeEditorLoading;
+export {
+  CodeEditorLoading_default as default
+};

package/dist/code-block/LanguageDisplay.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+type IconProps = {
+    size?: number;
+    className?: string;
+};
+interface LanguageInfo {
+    name: string;
+    icon: React.FC<IconProps>;
+    color: string;
+    /** null → icon has its own fixed size (e.g. custom SVGs). */
+    size: number | null;
+}
+export declare const languageMap: Record<string, LanguageInfo>;
+/**
+ * The display entry for a fence language. A language we have no icon for
+ * shows its own name (`nginx`, `toml`) with the generic code icon — never a
+ * misleading "Code".
+ */
+export declare function resolveLanguageInfo(language: string): LanguageInfo;
+export declare function getLanguageIconNode(language: string, compact?: boolean, iconOverride?: React.ReactNode): React.ReactNode;
+interface LanguageDisplayProps {
+    language?: string;
+    className?: string;
+    iconSize?: number;
+    isMobile?: boolean;
+}
+declare const LanguageDisplay: React.FC<LanguageDisplayProps>;
+export default LanguageDisplay;