@ai-matrx/rich-content 0.2.48 → 0.2.50

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+
+## 0.2.50
+
+- `utils/client-lazy` re-exports `@ai-matrx/kit/client-lazy` (`clientLazy`, `useIsClient`) — one home
+  for the host-neutral lazy loader; chat's identical copy points there too (architecture step 3).
+
+Consumer action: none. Needs `@ai-matrx/kit` ≥ 0.38.0.
+
+## 0.2.49
+
+- The code block's HTML "Preview" button opens the `html` canvas kind with the source
+  (`{ type: "html", data, metadata: { title } }`) — the same frame every other "open HTML in
+  canvas" path uses — instead of publishing a page and opening the generic `iframe` web view.
+  It no longer needs a signed-in user or a page-service call.
+
+Consumer action: none.
+
 ## 0.2.48
 
 - The copy commands and the document menu strip thinking with THE rule

package/dist/code-block/CodeBlock.js

@@ -8,17 +8,15 @@ import {
   isKindJsonText,
   valueCarriesKind
 } from "@ai-matrx/content-ir/surfaces";
-import { extractErrorMessage } from "../utils/lifted/errors.js";
 import { cn } from "@ai-matrx/design-system";
 import SmallCodeEditor from "./SmallCodeEditor.js";
 import CodeBlockHeader from "./CodeBlockHeader.js";
 import { useThemeMode } from "../host/app-bindings.js";
 import StickyButtons from "./StickyButtons.js";
 import { useIsMobile } from "@ai-matrx/kit/media-query";
-import { hostHtmlPageService, useHostUser } from "../host/app-bindings.js";
 import { isCompleteHtmlDocument } from "../utils/lifted/html-document.js";
 import { codeLanguageToExtension } from "../utils/lifted/code-language-extension.js";
-import { Globe, Loader2 } from "lucide-react";
+import { Globe } from "lucide-react";
 import { useCanvas } from "../host/app-bindings.js";
 import { toast } from "../host/toast.js";
 import { ShikiCodeView } from "./highlight/ShikiCodeView.js";
@@ -91,7 +89,6 @@ const CodeBlockBody = ({
   const [minimapEnabled, setMinimapEnabled] = useState(false);
   const [isTopInView, setIsTopInView] = useState(false);
   const [isBottomInView, setIsBottomInView] = useState(false);
-  const [isCreatingPage, setIsCreatingPage] = useState(false);
   const [formatTrigger, setFormatTrigger] = useState(0);
   const openSmartCodeEditorWindow = useOpenSmartCodeEditorWindow();
   const bottomRef = useRef(null);
@@ -101,37 +98,15 @@ const CodeBlockBody = ({
   const showStickyButtons = isBottomInView && !isTopInView && !isEditing;
   const mode = useThemeMode();
   const isMobile = useIsMobile();
-  const user = useHostUser();
   const { open: openCanvas } = useCanvas();
   const code = editedCode ?? initialCode;
   const isCompleteHTMLDocument = (htmlCode) => viewLanguage === "html" && isCompleteHtmlDocument(htmlCode);
-  const handleViewHTML = async () => {
-    if (!user?.id) {
-      toast.error("You must be logged in to view HTML pages");
-      return;
-    }
-    setIsCreatingPage(true);
-    try {
-      const result = await hostHtmlPageService().createPage(
-        code,
-        "HTML Preview",
-        "Generated from code block",
-        user.id
-      );
-      openCanvas({
-        type: "iframe",
-        data: result.url,
-        metadata: {
-          title: "HTML Preview",
-          htmlPageId: result.pageId
-        }
-      });
-    } catch (error) {
-      console.error("Failed to create HTML page:", error);
-      toast.error(`Failed to create HTML page: ${extractErrorMessage(error)}`);
-    } finally {
-      setIsCreatingPage(false);
-    }
+  const handleViewHTML = () => {
+    openCanvas({
+      type: "html",
+      data: code,
+      metadata: { title: "HTML Preview" }
+    });
   };
   useEffect(() => {
     const observerOptions = {
@@ -315,7 +290,6 @@ const CodeBlockBody = ({
               isMobile,
               isCompleteHTML: isCompleteHTMLDocument(code),
               handleViewHTML,
-              isCreatingPage,
               showWrapLines,
               handleFormat,
               handleReset,
@@ -389,11 +363,10 @@ const CodeBlockBody = ({
                             highlightLines: fence.highlightLines
                           }
                         ),
-                        isCompleteHTMLDocument(code) && !isCollapsed && /* @__PURE__ */ jsx(
+                        isCompleteHTMLDocument(code) && !isCollapsed && /* @__PURE__ */ jsxs(
                           "button",
                           {
                             onClick: handleViewHTML,
-                            disabled: isCreatingPage,
                             className: cn(
                               "absolute bottom-4 right-4 z-20",
                               "flex items-center gap-2 px-4 py-2 rounded-full",
@@ -401,17 +374,13 @@ const CodeBlockBody = ({
                               "text-white text-sm font-medium",
                               "shadow-lg hover:shadow-xl",
                               "transition-all duration-200 ease-in-out",
-                              "transform hover:scale-105",
-                              isCreatingPage && "opacity-50 cursor-not-allowed"
+                              "transform hover:scale-105"
                             ),
                             title: "Open HTML Preview in Canvas",
-                            children: isCreatingPage ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                              /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
-                              /* @__PURE__ */ jsx("span", { children: "Creating..." })
-                            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                            children: [
                               /* @__PURE__ */ jsx(Globe, { className: "w-4 h-4" }),
                               /* @__PURE__ */ jsx("span", { children: "Preview" })
-                            ] })
+                            ]
                           }
                         )
                       ]

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

@@ -1,13 +1 @@
-/**
- * `clientLazy` — the package's replacement for `next/dynamic(..., { ssr: false })`: a lazily
- * loaded component that renders only on the client. On the server and during hydration it
- * renders `loading` (hydration-safe through `useSyncExternalStore`); on the client it renders
- * the loaded component inside a Suspense boundary with the same `loading` as the fallback.
- */
-import { type ComponentType } from "react";
-export declare function useIsClient(): boolean;
-export declare function clientLazy<P extends object>(load: () => Promise<{
-    default: ComponentType<P>;
-} | ComponentType<P>>, options?: {
-    loading?: ComponentType;
-}): ComponentType<P>;
+export { clientLazy, useIsClient } from "@ai-matrx/kit/client-lazy";

package/dist/utils/client-lazy.js

@@ -1,26 +1,5 @@
 "use client";
-import { createElement, lazy, Suspense, useSyncExternalStore } from "react";
-const subscribe = () => () => {
-};
-const onClient = () => true;
-const onServer = () => false;
-function useIsClient() {
-  return useSyncExternalStore(subscribe, onClient, onServer);
-}
-function clientLazy(load, options = {}) {
-  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();
-    const fallback = Loading ? createElement(Loading) : null;
-    if (!client) return fallback;
-    return createElement(Suspense, { fallback }, createElement(Lazy, props));
-  }
-  return ClientLazy;
-}
+import { clientLazy, useIsClient } from "@ai-matrx/kit/client-lazy";
 export {
   clientLazy,
   useIsClient

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-content",
-  "version": "0.2.48",
+  "version": "0.2.50",
   "description": "The AI Matrx formatted-text engine: the one markdown renderer, streaming markdown, the block splitter and renderer, the generic blocks, <RichContent> levels, the rich-document action registry and menus, copy, and the selection toolbar — as portable React.",
   "type": "module",
   "license": "MIT",
@@ -130,21 +130,21 @@
     "unist-util-visit": "^5.1.0",
     "unist-util-visit-parents": "^6.0.2",
     "yaml": "^2.9.1",
-    "@ai-matrx/content-ir": "latest",
+    "@ai-matrx/agents": "latest",
     "@ai-matrx/alchemy": "latest",
+    "@ai-matrx/content-ir": "latest",
     "@ai-matrx/content-ir-react": "latest",
-    "@ai-matrx/agents": "latest",
     "@ai-matrx/data": "latest",
+    "@ai-matrx/design-system": "latest",
     "@ai-matrx/canvas": "latest",
-    "@ai-matrx/diff": "latest",
     "@ai-matrx/icons": "latest",
     "@ai-matrx/kit": "latest",
-    "@ai-matrx/records": "latest",
     "@ai-matrx/print": "latest",
-    "@ai-matrx/records-ui": "latest",
+    "@ai-matrx/records": "latest",
     "@ai-matrx/media": "latest",
-    "@ai-matrx/tap-target": "latest",
-    "@ai-matrx/design-system": "latest"
+    "@ai-matrx/records-ui": "latest",
+    "@ai-matrx/diff": "latest",
+    "@ai-matrx/tap-target": "latest"
   },
   "peerDependencies": {
     "react": ">=19.0.0",