octocms 0.4.13 → 0.4.16

package/dist/components/{richtext → ui/FormField/richtext}/ImageEmbedEditor.js

@@ -1,19 +1,19 @@
 "use client";
-import "../../chunk-B5LE2OEC.js";
+import "../../../../chunk-B5LE2OEC.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState, useTransition } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { ImageIcon, Upload, X } from "lucide-react";
+import { Button } from "../../Button/Button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../Dialog/Dialog";
+import { Icon } from "../../Icon/Icon";
+import { Label } from "../../Label/Label";
 import { useMdastNodeUpdater } from "@mdxeditor/editor";
-import { uploadMedia } from "../../admin/actions";
-import { queryKeys } from "../../admin/query/keys";
-import { useMediaList } from "../../admin/query/hooks/useMediaList";
-import { useConfig } from "../../hooks/useConfig";
-import { toast } from "../../hooks/useToast";
-import { suggestedTitleFromFileName } from "../../lib/suggestedMediaTitle";
-import { Button } from "../ui/button";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui";
-import { Label } from "../ui/label";
+import { uploadMedia } from "../../../../admin/actions";
+import { queryKeys } from "../../../../admin/query/keys";
+import { useMediaList } from "../../../../admin/query/hooks/useMediaList";
+import { useConfig } from "../../../../hooks/useConfig";
+import { toast } from "../../../../hooks/useToast";
+import { suggestedTitleFromFileName } from "../../../../lib/suggestedMediaTitle";
 const ImageEmbedEditor = ({ mdastNode }) => {
   var _a;
   const config = useConfig();
@@ -92,37 +92,29 @@ const ImageEmbedEditor = ({ mdastNode }) => {
   }, [stagedFile, uploadTitle, selectedFolder, updateMediaId, queryClient]);
   const folders = [...new Set(mediaEntries.map((f) => f.folder))];
   const filteredEntries = selectedFolder ? mediaEntries.filter((f) => f.folder === selectedFolder) : mediaEntries;
-  return /* @__PURE__ */ jsxs("div", { className: "my-2 rounded-lg border border-border bg-muted/30 p-3", contentEditable: false, children: [
-    currentMediaId && selectedEntry ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative w-48 h-32 rounded-lg border border-border overflow-hidden bg-muted flex-none", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "octo-image-embed", contentEditable: false, children: [
+    currentMediaId && selectedEntry ? /* @__PURE__ */ jsxs("div", { className: "octo-image-embed__selected", children: [
+      /* @__PURE__ */ jsxs("div", { className: "octo-image-embed__thumb-wrap", children: [
         /* @__PURE__ */ jsx(
           "img",
           {
             src: selectedEntry.publicUrl,
             alt: selectedEntry.title || selectedEntry.originalName || "",
-            className: "w-full h-full object-cover"
+            className: "octo-image-embed__thumb"
           }
         ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => updateMediaId(""),
-            className: "absolute top-1 right-1 rounded-full bg-black/60 text-white p-0.5 hover:bg-black/80",
-            children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
-          }
-        )
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => updateMediaId(""), className: "octo-image-embed__clear", children: /* @__PURE__ */ jsx(Icon.X, { className: "octo-icon-sm" }) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 pt-1", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Image embed" }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm break-all", children: selectedEntry.title || selectedEntry.originalName }),
-        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsOpen(true), children: "Change image" })
+      /* @__PURE__ */ jsxs("div", { className: "octo-image-embed__info", children: [
+        /* @__PURE__ */ jsx("span", { className: "octo-image-embed__info-label", children: "Image embed" }),
+        /* @__PURE__ */ jsx("span", { className: "octo-image-embed__info-name", children: selectedEntry.title || selectedEntry.originalName }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setIsOpen(true), children: "Change image" })
       ] })
-    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-lg border-2 border-dashed border-border flex items-center justify-center bg-muted/50 flex-none", children: /* @__PURE__ */ jsx(ImageIcon, { className: "w-6 h-6 text-muted-foreground" }) }),
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "octo-image-embed__empty-state", children: [
+      /* @__PURE__ */ jsx("div", { className: "octo-image-embed__placeholder", children: /* @__PURE__ */ jsx(Icon.Image, { className: "octo-image-embed__placeholder-icon octo-icon-24" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground block mb-1", children: "No image selected" }),
-        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsOpen(true), children: "Select image" })
+        /* @__PURE__ */ jsx("span", { className: "octo-image-embed__no-label", children: "No image selected" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setIsOpen(true), children: "Select image" })
       ] })
     ] }),
     /* @__PURE__ */ jsx(
@@ -136,44 +128,43 @@ const ImageEmbedEditor = ({ mdastNode }) => {
             setUploadTitle("");
           }
         },
-        children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-3xl max-h-[80vh] flex flex-col", children: [
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "octo-dialog-content octo-dialog-content--5xl octo-dialog-content--vh-80 octo-dialog-content--flex-col", children: [
           /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Select or upload image" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "border-2 border-dashed border-border rounded-lg p-4 flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "octo-image-embed__dropzone", children: [
             /* @__PURE__ */ jsx(
               "input",
               {
                 ref: uploadInputRef,
                 type: "file",
                 accept: config.mediaAllowedFormats.map((f) => `.${f}`).join(","),
-                className: "hidden",
+                className: "octo-u-hidden",
                 onChange: (e) => {
                   if (e.target.files) stageFileFromList(e.target.files);
                   e.target.value = "";
                 }
               }
             ),
-            !stagedFile ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-3", children: /* @__PURE__ */ jsxs(
+            !stagedFile ? /* @__PURE__ */ jsx("div", { className: "octo-image-embed__upload-placeholder", children: /* @__PURE__ */ jsxs(
               Button,
               {
                 type: "button",
                 variant: "outline",
-                size: "sm",
                 onClick: () => {
                   var _a2;
                   return (_a2 = uploadInputRef.current) == null ? void 0 : _a2.click();
                 },
                 disabled: isPending,
                 children: [
-                  /* @__PURE__ */ jsx(Upload, { className: "w-4 h-4" }),
+                  /* @__PURE__ */ jsx(Icon.Upload, { className: "octo-icon-md" }),
                   "Choose file to upload"
                 ]
               }
-            ) }) : /* @__PURE__ */ jsxs("div", { className: "space-y-3 max-w-md", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground break-all", children: stagedFile.name }),
+            ) }) : /* @__PURE__ */ jsxs("div", { className: "octo-image-embed__upload-form", children: [
+              /* @__PURE__ */ jsx("p", { className: "octo-u-text-base octo-u-text-muted octo-u-word-break-all", children: stagedFile.name }),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs(Label, { htmlFor: "richtext-image-upload-title", className: "text-sm", children: [
+                /* @__PURE__ */ jsxs(Label, { htmlFor: "richtext-image-upload-title", className: "octo-field-label", children: [
                   "Title ",
-                  /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+                  /* @__PURE__ */ jsx("span", { className: "octo-u-text-danger", children: "*" })
                 ] }),
                 /* @__PURE__ */ jsx(
                   "input",
@@ -182,20 +173,19 @@ const ImageEmbedEditor = ({ mdastNode }) => {
                     type: "text",
                     value: uploadTitle,
                     onChange: (e) => setUploadTitle(e.target.value),
-                    className: "mt-1 w-full text-sm px-2 py-1.5 rounded border border-border bg-layout-bg",
+                    className: "octo-media-asset__input octo-u-mt-1",
                     placeholder: "Shown as default alt text when this image is used",
                     disabled: isPending
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: confirmStagedUpload, disabled: isPending, children: "Upload" }),
+              /* @__PURE__ */ jsxs("div", { className: "octo-u-flex octo-u-gap-2", children: [
+                /* @__PURE__ */ jsx(Button, { type: "button", onClick: confirmStagedUpload, disabled: isPending, children: "Upload" }),
                 /* @__PURE__ */ jsx(
                   Button,
                   {
                     type: "button",
                     variant: "outline",
-                    size: "sm",
                     onClick: () => {
                       setStagedFile(null);
                       setUploadTitle("");
@@ -206,16 +196,27 @@ const ImageEmbedEditor = ({ mdastNode }) => {
                 )
               ] })
             ] }),
-            isPending && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Uploading..." })
+            isPending && /* @__PURE__ */ jsx("span", { className: "octo-u-text-xs octo-u-text-muted", children: "Uploading..." })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-4 flex-1 min-h-0 overflow-hidden", children: [
-            folders.length > 1 && /* @__PURE__ */ jsxs("div", { className: "w-36 flex-none overflow-y-auto border-r border-border pr-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "octo-image-embed__body", children: [
+            folders.length > 1 && /* @__PURE__ */ jsxs("div", { className: "octo-image-embed__folders", children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
                   onClick: () => setSelectedFolder(null),
-                  className: `block w-full text-left px-2 py-1.5 rounded text-sm ${selectedFolder === null ? "bg-primary text-primary-foreground" : "hover:bg-muted"}`,
+                  style: {
+                    display: "block",
+                    width: "100%",
+                    textAlign: "left",
+                    padding: "6px 8px",
+                    borderRadius: 6,
+                    fontSize: 14,
+                    border: 0,
+                    cursor: "pointer",
+                    background: selectedFolder === null ? "var(--brand)" : "transparent",
+                    color: selectedFolder === null ? "var(--bg)" : "var(--text)"
+                  },
                   children: "All"
                 }
               ),
@@ -224,13 +225,24 @@ const ImageEmbedEditor = ({ mdastNode }) => {
                 {
                   type: "button",
                   onClick: () => setSelectedFolder(folder),
-                  className: `block w-full text-left px-2 py-1.5 rounded text-sm ${selectedFolder === folder ? "bg-primary text-primary-foreground" : "hover:bg-muted"}`,
+                  style: {
+                    display: "block",
+                    width: "100%",
+                    textAlign: "left",
+                    padding: "6px 8px",
+                    borderRadius: 6,
+                    fontSize: 14,
+                    border: 0,
+                    cursor: "pointer",
+                    background: selectedFolder === folder ? "var(--brand)" : "transparent",
+                    color: selectedFolder === folder ? "var(--bg)" : "var(--text)"
+                  },
                   children: folder === "/" ? "Root" : folder
                 },
                 folder
               ))
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "octo-image-embed__scroller", children: /* @__PURE__ */ jsxs("div", { className: "octo-image-embed__grid", children: [
               filteredEntries.map((entry) => {
                 const isSelected = currentMediaId === entry.id;
                 return /* @__PURE__ */ jsxs(
@@ -238,23 +250,32 @@ const ImageEmbedEditor = ({ mdastNode }) => {
                   {
                     type: "button",
                     onClick: () => handleSelect(entry),
-                    className: `group relative aspect-square rounded-lg overflow-hidden border-2 transition-colors ${isSelected ? "border-primary ring-2 ring-primary/30" : "border-border hover:border-primary/50"}`,
+                    style: {
+                      position: "relative",
+                      aspectRatio: "1",
+                      borderRadius: 8,
+                      overflow: "hidden",
+                      border: isSelected ? "2px solid var(--brand)" : "2px solid var(--border)",
+                      cursor: "pointer",
+                      padding: 0,
+                      background: "transparent"
+                    },
                     children: [
                       /* @__PURE__ */ jsx(
                         "img",
                         {
                           src: entry.publicUrl,
                           alt: entry.title || entry.originalName,
-                          className: "w-full h-full object-cover"
+                          className: "octo-image-embed__thumb-img"
                         }
                       ),
-                      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 bg-black/60 px-2 py-1", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-white truncate block", children: entry.title || entry.originalName }) })
+                      /* @__PURE__ */ jsx("div", { className: "octo-image-embed__thumb-overlay", children: /* @__PURE__ */ jsx("span", { className: "octo-image-embed__thumb-caption", children: entry.title || entry.originalName }) })
                     ]
                   },
                   entry.id
                 );
               }),
-              filteredEntries.length === 0 && /* @__PURE__ */ jsx("div", { className: "col-span-3 text-center py-12 text-muted-foreground", children: "No images found" })
+              filteredEntries.length === 0 && /* @__PURE__ */ jsx("div", { className: "octo-image-embed__empty", children: "No images found" })
             ] }) })
           ] })
         ] })

package/dist/components/ui/FormField/richtext/ImageEmbedEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../components/ui/FormField/richtext/ImageEmbedEditor.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback, useEffect, useRef, useState, useTransition } from 'react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { Button } from '../../Button/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../Dialog/Dialog';\nimport { Icon } from '../../Icon/Icon';\nimport { Label } from '../../Label/Label';\nimport type { JsxEditorProps } from '@mdxeditor/editor';\nimport { useMdastNodeUpdater } from '@mdxeditor/editor';\n\nimport { uploadMedia } from '../../../../admin/actions';\nimport { queryKeys } from '../../../../admin/query/keys';\nimport { useMediaList } from '../../../../admin/query/hooks/useMediaList';\nimport { useConfig } from '../../../../hooks/useConfig';\nimport { toast } from '../../../../hooks/useToast';\nimport type { MediaFile } from '../../../../types';\nimport { suggestedTitleFromFileName } from '../../../../lib/suggestedMediaTitle';\n\nconst ImageEmbedEditor: React.FC<JsxEditorProps> = ({ mdastNode }) => {\n  const config = useConfig();\n  const queryClient = useQueryClient();\n  const updateNode = useMdastNodeUpdater();\n  const mediaIdAttr = mdastNode.attributes?.find((a: any) => a.type === 'mdxJsxAttribute' && a.name === 'mediaId');\n  const currentMediaId = typeof mediaIdAttr?.value === 'string' ? mediaIdAttr.value : '';\n\n  const [isOpen, setIsOpen] = useState(false);\n  const { data: mediaEntries = [], refetch: refetchMedia } = useMediaList({ enabled: isOpen });\n  const [selectedFolder, setSelectedFolder] = useState<string | null>(null);\n  const [isPending, startTransition] = useTransition();\n  const uploadInputRef = useRef<HTMLInputElement>(null);\n  const [stagedFile, setStagedFile] = useState<File | null>(null);\n  const [uploadTitle, setUploadTitle] = useState('');\n\n  const selectedEntry = mediaEntries.find((e) => e.id === currentMediaId);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    void refetchMedia();\n  }, [isOpen, refetchMedia]);\n\n  const updateMediaId = useCallback(\n    (newId: string) => {\n      updateNode({\n        attributes: [{ type: 'mdxJsxAttribute', name: 'mediaId', value: newId }],\n      } as any);\n    },\n    [updateNode],\n  );\n\n  const handleSelect = useCallback(\n    (entry: MediaFile) => {\n      updateMediaId(entry.id);\n      setIsOpen(false);\n    },\n    [updateMediaId],\n  );\n\n  const stageFileFromList = useCallback(\n    (fileList: FileList) => {\n      const file = fileList[0];\n      if (!file) return;\n      const ext = file.name.split('.').pop()?.toLowerCase() || '';\n      if (!config.mediaAllowedFormats.includes(ext)) {\n        toast({ title: `Format .${ext} not allowed`, variant: 'destructive' });\n        return;\n      }\n      setStagedFile(file);\n      setUploadTitle(suggestedTitleFromFileName(file.name));\n    },\n    [config.mediaAllowedFormats],\n  );\n\n  const confirmStagedUpload = useCallback(() => {\n    if (!stagedFile) return;\n    const title = uploadTitle.trim();\n    if (!title) {\n      toast({ title: 'Title is required', variant: 'destructive' });\n      return;\n    }\n    const file = stagedFile;\n    const formData = new FormData();\n    formData.set('file', file);\n    formData.set('folder', selectedFolder || '/');\n    formData.set('title', title);\n\n    startTransition(async () => {\n      const uploadResult = await uploadMedia(formData);\n      if (!uploadResult.success) {\n        toast({ title: uploadResult.error, variant: 'destructive' });\n        return;\n      }\n      const mediaId = uploadResult.id;\n      await queryClient.invalidateQueries({ queryKey: queryKeys.media.list() });\n      updateMediaId(mediaId);\n      setStagedFile(null);\n      setUploadTitle('');\n      setIsOpen(false);\n      toast({ title: `Uploaded \"${file.name}\"`, variant: 'success' });\n    });\n  }, [stagedFile, uploadTitle, selectedFolder, updateMediaId, queryClient]);\n\n  const folders = [...new Set(mediaEntries.map((f) => f.folder))];\n  const filteredEntries = selectedFolder ? mediaEntries.filter((f) => f.folder === selectedFolder) : mediaEntries;\n\n  return (\n    <div className=\"octo-image-embed\" contentEditable={false}>\n      {currentMediaId && selectedEntry ? (\n        <div className=\"octo-image-embed__selected\">\n          <div className=\"octo-image-embed__thumb-wrap\">\n            <img\n              src={selectedEntry.publicUrl}\n              alt={selectedEntry.title || selectedEntry.originalName || ''}\n              className=\"octo-image-embed__thumb\"\n            />\n            <button type=\"button\" onClick={() => updateMediaId('')} className=\"octo-image-embed__clear\">\n              <Icon.X className=\"octo-icon-sm\" />\n            </button>\n          </div>\n          <div className=\"octo-image-embed__info\">\n            <span className=\"octo-image-embed__info-label\">Image embed</span>\n            <span className=\"octo-image-embed__info-name\">{selectedEntry.title || selectedEntry.originalName}</span>\n            <Button type=\"button\" variant=\"outline\" onClick={() => setIsOpen(true)}>\n              Change image\n            </Button>\n          </div>\n        </div>\n      ) : (\n        <div className=\"octo-image-embed__empty-state\">\n          <div className=\"octo-image-embed__placeholder\">\n            <Icon.Image className=\"octo-image-embed__placeholder-icon octo-icon-24\" />\n          </div>\n          <div>\n            <span className=\"octo-image-embed__no-label\">No image selected</span>\n            <Button type=\"button\" variant=\"outline\" onClick={() => setIsOpen(true)}>\n              Select image\n            </Button>\n          </div>\n        </div>\n      )}\n\n      <Dialog\n        open={isOpen}\n        onOpenChange={(open) => {\n          setIsOpen(open);\n          if (!open) {\n            setStagedFile(null);\n            setUploadTitle('');\n          }\n        }}\n      >\n        <DialogContent className=\"octo-dialog-content octo-dialog-content--5xl octo-dialog-content--vh-80 octo-dialog-content--flex-col\">\n          <DialogHeader>\n            <DialogTitle>Select or upload image</DialogTitle>\n          </DialogHeader>\n          <div className=\"octo-image-embed__dropzone\">\n            <input\n              ref={uploadInputRef}\n              type=\"file\"\n              accept={config.mediaAllowedFormats.map((f) => `.${f}`).join(',')}\n              className=\"octo-u-hidden\"\n              onChange={(e) => {\n                if (e.target.files) stageFileFromList(e.target.files);\n                e.target.value = '';\n              }}\n            />\n            {!stagedFile ? (\n              <div className=\"octo-image-embed__upload-placeholder\">\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  onClick={() => uploadInputRef.current?.click()}\n                  disabled={isPending}\n                >\n                  <Icon.Upload className=\"octo-icon-md\" />\n                  Choose file to upload\n                </Button>\n              </div>\n            ) : (\n              <div className=\"octo-image-embed__upload-form\">\n                <p className=\"octo-u-text-base octo-u-text-muted octo-u-word-break-all\">{stagedFile.name}</p>\n                <div>\n                  <Label htmlFor=\"richtext-image-upload-title\" className=\"octo-field-label\">\n                    Title <span className=\"octo-u-text-danger\">*</span>\n                  </Label>\n                  <input\n                    id=\"richtext-image-upload-title\"\n                    type=\"text\"\n                    value={uploadTitle}\n                    onChange={(e) => setUploadTitle(e.target.value)}\n                    className=\"octo-media-asset__input octo-u-mt-1\"\n                    placeholder=\"Shown as default alt text when this image is used\"\n                    disabled={isPending}\n                  />\n                </div>\n                <div className=\"octo-u-flex octo-u-gap-2\">\n                  <Button type=\"button\" onClick={confirmStagedUpload} disabled={isPending}>\n                    Upload\n                  </Button>\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    onClick={() => {\n                      setStagedFile(null);\n                      setUploadTitle('');\n                    }}\n                    disabled={isPending}\n                  >\n                    Cancel\n                  </Button>\n                </div>\n              </div>\n            )}\n            {isPending && <span className=\"octo-u-text-xs octo-u-text-muted\">Uploading...</span>}\n          </div>\n          <div className=\"octo-image-embed__body\">\n            {folders.length > 1 && (\n              <div className=\"octo-image-embed__folders\">\n                <button\n                  type=\"button\"\n                  onClick={() => setSelectedFolder(null)}\n                  style={{\n                    display: 'block',\n                    width: '100%',\n                    textAlign: 'left',\n                    padding: '6px 8px',\n                    borderRadius: 6,\n                    fontSize: 14,\n                    border: 0,\n                    cursor: 'pointer',\n                    background: selectedFolder === null ? 'var(--brand)' : 'transparent',\n                    color: selectedFolder === null ? 'var(--bg)' : 'var(--text)',\n                  }}\n                >\n                  All\n                </button>\n                {folders.map((folder) => (\n                  <button\n                    key={folder}\n                    type=\"button\"\n                    onClick={() => setSelectedFolder(folder)}\n                    style={{\n                      display: 'block',\n                      width: '100%',\n                      textAlign: 'left',\n                      padding: '6px 8px',\n                      borderRadius: 6,\n                      fontSize: 14,\n                      border: 0,\n                      cursor: 'pointer',\n                      background: selectedFolder === folder ? 'var(--brand)' : 'transparent',\n                      color: selectedFolder === folder ? 'var(--bg)' : 'var(--text)',\n                    }}\n                  >\n                    {folder === '/' ? 'Root' : folder}\n                  </button>\n                ))}\n              </div>\n            )}\n            <div className=\"octo-image-embed__scroller\">\n              <div className=\"octo-image-embed__grid\">\n                {filteredEntries.map((entry) => {\n                  const isSelected = currentMediaId === entry.id;\n                  return (\n                    <button\n                      key={entry.id}\n                      type=\"button\"\n                      onClick={() => handleSelect(entry)}\n                      style={{\n                        position: 'relative',\n                        aspectRatio: '1',\n                        borderRadius: 8,\n                        overflow: 'hidden',\n                        border: isSelected ? '2px solid var(--brand)' : '2px solid var(--border)',\n                        cursor: 'pointer',\n                        padding: 0,\n                        background: 'transparent',\n                      }}\n                    >\n                      <img\n                        src={entry.publicUrl}\n                        alt={entry.title || entry.originalName}\n                        className=\"octo-image-embed__thumb-img\"\n                      />\n                      <div className=\"octo-image-embed__thumb-overlay\">\n                        <span className=\"octo-image-embed__thumb-caption\">{entry.title || entry.originalName}</span>\n                      </div>\n                    </button>\n                  );\n                })}\n                {filteredEntries.length === 0 && <div className=\"octo-image-embed__empty\">No images found</div>}\n              </div>\n            </div>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </div>\n  );\n};\n\nexport default ImageEmbedEditor;\n"],"mappings":"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","names":["_a"]}

package/dist/components/ui/FormField/richtext/ReferenceEmbedEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferenceEmbedEditor.d.ts","sourceRoot":"","sources":["../../../../../components/ui/FormField/richtext/ReferenceEmbedEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAIzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AASxD;;;;;GAKG;AACH,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwOlD,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/{richtext → ui/FormField/richtext}/ReferenceEmbedEditor.js

@@ -1,14 +1,14 @@
 "use client";
-import "../../chunk-B5LE2OEC.js";
+import "../../../../chunk-B5LE2OEC.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { FileText, Link2, Search, X } from "lucide-react";
+import { Button } from "../../Button/Button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../Dialog/Dialog";
+import { Icon } from "../../Icon/Icon";
 import { useMdastNodeUpdater } from "@mdxeditor/editor";
-import { useConfig } from "../../hooks/useConfig";
-import { useEntryList } from "../../admin/query/hooks/useEntryList";
-import { toReferenceKey } from "../../lib/referenceKeys";
-import { Button } from "../ui/button";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui";
+import { useConfig } from "../../../../hooks/useConfig";
+import { useEntryList } from "../../../../admin/query/hooks/useEntryList";
+import { toReferenceKey } from "../../../../lib/referenceKeys";
 const ReferenceEmbedEditor = ({ mdastNode }) => {
   var _a, _b;
   const config = useConfig();
@@ -79,52 +79,52 @@ const ReferenceEmbedEditor = ({ mdastNode }) => {
     var _a2;
     return ((_a2 = config.collections[type]) == null ? void 0 : _a2.label) || type;
   };
-  return /* @__PURE__ */ jsxs("div", { className: "my-2 rounded-lg border border-border bg-muted/30 p-3", contentEditable: false, children: [
-    currentId && selectedEntry ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-lg border border-border bg-primary/10 flex items-center justify-center flex-none", children: /* @__PURE__ */ jsx(FileText, { className: "w-5 h-5 text-primary" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 flex-1 min-w-0 pt-0.5", children: [
-        /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "octo-ref-embed", contentEditable: false, children: [
+    currentId && selectedEntry ? /* @__PURE__ */ jsxs("div", { className: "octo-ref-embed__selected", children: [
+      /* @__PURE__ */ jsx("div", { className: "octo-ref-embed__icon-wrap", children: /* @__PURE__ */ jsx(Icon.FileText, { className: "octo-icon-lg octo-u-text-brand" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "octo-ref-embed__info", children: [
+        /* @__PURE__ */ jsxs("span", { className: "octo-ref-embed__info-label", children: [
           "Reference embed \xB7 ",
           currentDisplay
         ] }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: selectedEntry.title }),
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: getCollectionLabel(selectedEntry.type) })
+        /* @__PURE__ */ jsx("span", { className: "octo-ref-embed__info-title", children: selectedEntry.title }),
+        /* @__PURE__ */ jsx("span", { className: "octo-ref-embed__info-type", children: getCollectionLabel(selectedEntry.type) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-1 flex-none", children: [
+      /* @__PURE__ */ jsxs("div", { className: "octo-ref-embed__actions", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             onClick: toggleDisplay,
-            className: "p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors",
+            className: "octo-ref-embed__action-btn",
             title: `Switch to ${currentDisplay === "inline" ? "block" : "inline"} display`,
-            children: /* @__PURE__ */ jsx(Link2, { className: "w-3.5 h-3.5" })
+            children: /* @__PURE__ */ jsx(Icon.Link2, { className: "octo-icon-sm" })
           }
         ),
-        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsOpen(true), children: "Change" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setIsOpen(true), children: "Change" }),
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             onClick: handleClear,
-            className: "p-1.5 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors",
+            className: "octo-ref-embed__action-btn octo-ref-embed__action-btn--danger",
             title: "Remove reference",
-            children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+            children: /* @__PURE__ */ jsx(Icon.X, { className: "octo-icon-sm" })
           }
         )
       ] })
-    ] }) : currentId && !selectedEntry ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-lg border-2 border-dashed border-border flex items-center justify-center bg-muted/50 flex-none", children: /* @__PURE__ */ jsx(FileText, { className: "w-5 h-5 text-muted-foreground" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground block mb-0.5", children: isFetched && !listPending ? "Referenced entry not found" : "Loading\u2026" }),
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: currentId })
+    ] }) : currentId && !selectedEntry ? /* @__PURE__ */ jsxs("div", { className: "octo-ref-embed__loading", children: [
+      /* @__PURE__ */ jsx("div", { className: "octo-ref-embed__loading-icon", children: /* @__PURE__ */ jsx(Icon.FileText, { className: "octo-icon-lg octo-u-text-muted" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "octo-u-flex-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "octo-ref-embed__loading-text", children: isFetched && !listPending ? "Referenced entry not found" : "Loading\u2026" }),
+        /* @__PURE__ */ jsx("span", { className: "octo-ref-embed__loading-id", children: currentId })
       ] }),
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsOpen(true), children: "Select entry" })
-    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-lg border-2 border-dashed border-border flex items-center justify-center bg-muted/50 flex-none", children: /* @__PURE__ */ jsx(FileText, { className: "w-5 h-5 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setIsOpen(true), children: "Select entry" })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "octo-ref-embed__empty-state", children: [
+      /* @__PURE__ */ jsx("div", { className: "octo-ref-embed__loading-icon", children: /* @__PURE__ */ jsx(Icon.FileText, { className: "octo-icon-lg octo-u-text-muted" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground block mb-1", children: "No entry selected" }),
-        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsOpen(true), children: "Select entry" })
+        /* @__PURE__ */ jsx("span", { className: "octo-ref-embed__loading-text octo-u-mb-1", children: "No entry selected" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setIsOpen(true), children: "Select entry" })
       ] })
     ] }),
     /* @__PURE__ */ jsx(
@@ -138,11 +138,11 @@ const ReferenceEmbedEditor = ({ mdastNode }) => {
             setCollectionFilter(null);
           }
         },
-        children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl max-h-[80vh] flex flex-col", children: [
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "octo-dialog-content octo-dialog-content--3xl octo-dialog-content--vh-80 octo-dialog-content--flex-col", children: [
           /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Select entry to embed" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
-              /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs("div", { className: "octo-ref-embed__search-row", children: [
+            /* @__PURE__ */ jsxs("div", { className: "octo-ref-embed__search-wrap", children: [
+              /* @__PURE__ */ jsx(Icon.Search, { className: "octo-icon-md octo-u-text-muted octo-ref-embed__search-icon" }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -150,7 +150,7 @@ const ReferenceEmbedEditor = ({ mdastNode }) => {
                   value: searchQuery,
                   onChange: (e) => setSearchQuery(e.target.value),
                   placeholder: "Filter entries\u2026",
-                  className: "w-full text-sm pl-8 pr-3 py-2 rounded-md border border-border bg-layout-bg"
+                  className: "octo-ff-reference__search-input"
                 }
               )
             ] }),
@@ -159,7 +159,7 @@ const ReferenceEmbedEditor = ({ mdastNode }) => {
               {
                 value: collectionFilter != null ? collectionFilter : "",
                 onChange: (e) => setCollectionFilter(e.target.value || null),
-                className: "text-sm rounded-md border border-border bg-layout-bg px-2 py-2",
+                className: "octo-media-asset__input",
                 children: [
                   /* @__PURE__ */ jsx("option", { value: "", children: "All collections" }),
                   availableCollections.map((type) => /* @__PURE__ */ jsx("option", { value: type, children: getCollectionLabel(type) }, type))
@@ -167,7 +167,7 @@ const ReferenceEmbedEditor = ({ mdastNode }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto min-h-0 border border-border rounded-md", children: listPending && entries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-12 text-muted-foreground text-sm", children: "Loading entries\u2026" }) : filteredEntries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-12 text-muted-foreground text-sm", children: searchQuery ? "No matching entries" : "No entries found" }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-border", children: filteredEntries.map((entry) => {
+          /* @__PURE__ */ jsx("div", { className: "octo-ref-embed__list", children: listPending && entries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "octo-ref-embed__empty", children: "Loading entries\u2026" }) : filteredEntries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "octo-ref-embed__empty", children: searchQuery ? "No matching entries" : "No entries found" }) : /* @__PURE__ */ jsx("div", { className: "octo-ref-embed__divider", children: filteredEntries.map((entry) => {
             const refKey = toReferenceKey(entry.path);
             const isSelected = refKey === toReferenceKey(currentId);
             return /* @__PURE__ */ jsxs(
@@ -175,14 +175,26 @@ const ReferenceEmbedEditor = ({ mdastNode }) => {
               {
                 type: "button",
                 onClick: () => handleSelect(entry),
-                className: `w-full text-left px-3 py-2.5 flex items-center gap-3 transition-colors ${isSelected ? "bg-primary/10 text-primary" : "hover:bg-muted"}`,
+                style: {
+                  width: "100%",
+                  textAlign: "left",
+                  padding: "8px 12px",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                  background: isSelected ? "color-mix(in oklab, var(--brand) 10%, transparent)" : "transparent",
+                  color: isSelected ? "var(--brand)" : "var(--text)",
+                  border: 0,
+                  cursor: "pointer",
+                  borderBottom: "1px solid var(--border)"
+                },
                 children: [
-                  /* @__PURE__ */ jsx(FileText, { className: "w-4 h-4 flex-none text-muted-foreground" }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium truncate", children: entry.title }),
-                    /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: getCollectionLabel(entry.type) })
+                  /* @__PURE__ */ jsx(Icon.FileText, { className: "octo-icon-md octo-u-shrink-0 octo-u-text-muted" }),
+                  /* @__PURE__ */ jsxs("div", { className: "octo-ref-embed__entry-info", children: [
+                    /* @__PURE__ */ jsx("div", { className: "octo-ref-embed__entry-title", children: entry.title }),
+                    /* @__PURE__ */ jsx("div", { className: "octo-ref-embed__entry-meta", children: getCollectionLabel(entry.type) })
                   ] }),
-                  isSelected && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-primary flex-none", children: "Selected" })
+                  isSelected && /* @__PURE__ */ jsx("span", { className: "octo-ref-embed__selected-badge", children: "Selected" })
                 ]
               },
               `${entry.type}-${entry.id}`

package/dist/components/ui/FormField/richtext/ReferenceEmbedEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../components/ui/FormField/richtext/ReferenceEmbedEditor.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { Button } from '../../Button/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../Dialog/Dialog';\nimport { Icon } from '../../Icon/Icon';\nimport type { JsxEditorProps } from '@mdxeditor/editor';\nimport { useMdastNodeUpdater } from '@mdxeditor/editor';\n\nimport type { Config } from '../../../../admin/types';\nimport { useConfig } from '../../../../hooks/useConfig';\nimport { useEntryList } from '../../../../admin/query/hooks/useEntryList';\nimport type { EntryListItem } from '../../../../types';\nimport { toReferenceKey } from '../../../../lib/referenceKeys';\n\n/**\n * WYSIWYG editor component for `<CmsRef>` JSX embeds inside richtext fields.\n *\n * Shows a preview of the selected entry (title + collection type) and provides a\n * dialog to search and select an entry from configured collections.\n */\nconst ReferenceEmbedEditor: React.FC<JsxEditorProps> = ({ mdastNode }) => {\n  const config = useConfig();\n  const updateNode = useMdastNodeUpdater();\n\n  // Read current attributes\n  const idAttr = mdastNode.attributes?.find((a: any) => a.type === 'mdxJsxAttribute' && a.name === 'id');\n  const displayAttr = mdastNode.attributes?.find((a: any) => a.type === 'mdxJsxAttribute' && a.name === 'display');\n  const currentId = typeof idAttr?.value === 'string' ? idAttr.value : '';\n  const currentDisplay = typeof displayAttr?.value === 'string' ? displayAttr.value : 'block';\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [collectionFilter, setCollectionFilter] = useState<string | null>(null);\n\n  const {\n    data: entries = [],\n    isPending: listPending,\n    isFetched,\n    refetch,\n  } = useEntryList(undefined, { enabled: Boolean(isOpen || currentId) });\n\n  useEffect(() => {\n    if (!isOpen) return;\n    void refetch();\n  }, [isOpen, refetch]);\n\n  // Find selected entry from the list once loaded (use content path — `id` is already `post-123`-style stem)\n  const selectedEntry = useMemo(() => {\n    if (!currentId) return null;\n    const refKey = toReferenceKey(currentId);\n    return entries.find((e) => toReferenceKey(e.path) === refKey) ?? null;\n  }, [currentId, entries]);\n\n  const updateAttributes = useCallback(\n    (id: string, display: string) => {\n      updateNode({\n        attributes: [\n          { type: 'mdxJsxAttribute', name: 'id', value: id },\n          { type: 'mdxJsxAttribute', name: 'display', value: display },\n        ],\n      } as any);\n    },\n    [updateNode],\n  );\n\n  const handleSelect = useCallback(\n    (entry: EntryListItem) => {\n      const refKey = toReferenceKey(entry.path);\n      updateAttributes(refKey, currentDisplay);\n      setIsOpen(false);\n      setSearchQuery('');\n    },\n    [updateAttributes, currentDisplay],\n  );\n\n  const handleClear = useCallback(() => {\n    updateAttributes('', currentDisplay);\n  }, [updateAttributes, currentDisplay]);\n\n  const toggleDisplay = useCallback(() => {\n    const newDisplay = currentDisplay === 'inline' ? 'block' : 'inline';\n    updateAttributes(currentId, newDisplay);\n  }, [updateAttributes, currentId, currentDisplay]);\n\n  // Filter entries by search + collection\n  const filteredEntries = useMemo(() => {\n    let filtered = entries;\n    if (collectionFilter) {\n      filtered = filtered.filter((e) => e.type === collectionFilter);\n    }\n    if (searchQuery.trim()) {\n      const q = searchQuery.toLowerCase();\n      filtered = filtered.filter((e) => e.title.toLowerCase().includes(q) || e.type.toLowerCase().includes(q));\n    }\n    return filtered;\n  }, [entries, collectionFilter, searchQuery]);\n\n  // Unique collection types in the entry list\n  const availableCollections = useMemo(() => [...new Set(entries.map((e) => e.type))], [entries]);\n\n  const getCollectionLabel = (type: string) => config.collections[type as keyof Config['collections']]?.label || type;\n\n  return (\n    <div className=\"octo-ref-embed\" contentEditable={false}>\n      {currentId && selectedEntry ? (\n        <div className=\"octo-ref-embed__selected\">\n          <div className=\"octo-ref-embed__icon-wrap\">\n            <Icon.FileText className=\"octo-icon-lg octo-u-text-brand\" />\n          </div>\n          <div className=\"octo-ref-embed__info\">\n            <span className=\"octo-ref-embed__info-label\">Reference embed · {currentDisplay}</span>\n            <span className=\"octo-ref-embed__info-title\">{selectedEntry.title}</span>\n            <span className=\"octo-ref-embed__info-type\">{getCollectionLabel(selectedEntry.type)}</span>\n          </div>\n          <div className=\"octo-ref-embed__actions\">\n            <button\n              type=\"button\"\n              onClick={toggleDisplay}\n              className=\"octo-ref-embed__action-btn\"\n              title={`Switch to ${currentDisplay === 'inline' ? 'block' : 'inline'} display`}\n            >\n              <Icon.Link2 className=\"octo-icon-sm\" />\n            </button>\n            <Button type=\"button\" variant=\"outline\" onClick={() => setIsOpen(true)}>\n              Change\n            </Button>\n            <button\n              type=\"button\"\n              onClick={handleClear}\n              className=\"octo-ref-embed__action-btn octo-ref-embed__action-btn--danger\"\n              title=\"Remove reference\"\n            >\n              <Icon.X className=\"octo-icon-sm\" />\n            </button>\n          </div>\n        </div>\n      ) : currentId && !selectedEntry ? (\n        <div className=\"octo-ref-embed__loading\">\n          <div className=\"octo-ref-embed__loading-icon\">\n            <Icon.FileText className=\"octo-icon-lg octo-u-text-muted\" />\n          </div>\n          <div className=\"octo-u-flex-1\">\n            <span className=\"octo-ref-embed__loading-text\">\n              {isFetched && !listPending ? 'Referenced entry not found' : 'Loading…'}\n            </span>\n            <span className=\"octo-ref-embed__loading-id\">{currentId}</span>\n          </div>\n          <Button type=\"button\" variant=\"outline\" onClick={() => setIsOpen(true)}>\n            Select entry\n          </Button>\n        </div>\n      ) : (\n        <div className=\"octo-ref-embed__empty-state\">\n          <div className=\"octo-ref-embed__loading-icon\">\n            <Icon.FileText className=\"octo-icon-lg octo-u-text-muted\" />\n          </div>\n          <div>\n            <span className=\"octo-ref-embed__loading-text octo-u-mb-1\">No entry selected</span>\n            <Button type=\"button\" variant=\"outline\" onClick={() => setIsOpen(true)}>\n              Select entry\n            </Button>\n          </div>\n        </div>\n      )}\n\n      <Dialog\n        open={isOpen}\n        onOpenChange={(open) => {\n          setIsOpen(open);\n          if (!open) {\n            setSearchQuery('');\n            setCollectionFilter(null);\n          }\n        }}\n      >\n        <DialogContent className=\"octo-dialog-content octo-dialog-content--3xl octo-dialog-content--vh-80 octo-dialog-content--flex-col\">\n          <DialogHeader>\n            <DialogTitle>Select entry to embed</DialogTitle>\n          </DialogHeader>\n\n          {/* Search + filter bar */}\n          <div className=\"octo-ref-embed__search-row\">\n            <div className=\"octo-ref-embed__search-wrap\">\n              <Icon.Search className=\"octo-icon-md octo-u-text-muted octo-ref-embed__search-icon\" />\n              <input\n                type=\"text\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                placeholder=\"Filter entries…\"\n                className=\"octo-ff-reference__search-input\"\n              />\n            </div>\n            <select\n              value={collectionFilter ?? ''}\n              onChange={(e) => setCollectionFilter(e.target.value || null)}\n              className=\"octo-media-asset__input\"\n            >\n              <option value=\"\">All collections</option>\n              {availableCollections.map((type) => (\n                <option key={type} value={type}>\n                  {getCollectionLabel(type)}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          {/* Entry list */}\n          <div className=\"octo-ref-embed__list\">\n            {listPending && entries.length === 0 ? (\n              <div className=\"octo-ref-embed__empty\">Loading entries…</div>\n            ) : filteredEntries.length === 0 ? (\n              <div className=\"octo-ref-embed__empty\">{searchQuery ? 'No matching entries' : 'No entries found'}</div>\n            ) : (\n              <div className=\"octo-ref-embed__divider\">\n                {filteredEntries.map((entry) => {\n                  const refKey = toReferenceKey(entry.path);\n                  const isSelected = refKey === toReferenceKey(currentId);\n                  return (\n                    <button\n                      key={`${entry.type}-${entry.id}`}\n                      type=\"button\"\n                      onClick={() => handleSelect(entry)}\n                      style={{\n                        width: '100%',\n                        textAlign: 'left',\n                        padding: '8px 12px',\n                        display: 'flex',\n                        alignItems: 'center',\n                        gap: 12,\n                        background: isSelected ? 'color-mix(in oklab, var(--brand) 10%, transparent)' : 'transparent',\n                        color: isSelected ? 'var(--brand)' : 'var(--text)',\n                        border: 0,\n                        cursor: 'pointer',\n                        borderBottom: '1px solid var(--border)',\n                      }}\n                    >\n                      <Icon.FileText className=\"octo-icon-md octo-u-shrink-0 octo-u-text-muted\" />\n                      <div className=\"octo-ref-embed__entry-info\">\n                        <div className=\"octo-ref-embed__entry-title\">{entry.title}</div>\n                        <div className=\"octo-ref-embed__entry-meta\">{getCollectionLabel(entry.type)}</div>\n                      </div>\n                      {isSelected && <span className=\"octo-ref-embed__selected-badge\">Selected</span>}\n                    </button>\n                  );\n                })}\n              </div>\n            )}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </div>\n  );\n};\n\nexport default ReferenceEmbedEditor;\n"],"mappings":";;AA4GY,cAGA,YAHA;AA1GZ,SAAgB,aAAa,WAAW,SAAS,gBAAgB;AACjE,SAAS,cAAc;AACvB,SAAS,QAAQ,eAAe,cAAc,mBAAmB;AACjE,SAAS,YAAY;AAErB,SAAS,2BAA2B;AAGpC,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAE7B,SAAS,sBAAsB;AAQ/B,MAAM,uBAAiD,CAAC,EAAE,UAAU,MAAM;AArB1E;AAsBE,QAAM,SAAS,UAAU;AACzB,QAAM,aAAa,oBAAoB;AAGvC,QAAM,UAAS,eAAU,eAAV,mBAAsB,KAAK,CAAC,MAAW,EAAE,SAAS,qBAAqB,EAAE,SAAS;AACjG,QAAM,eAAc,eAAU,eAAV,mBAAsB,KAAK,CAAC,MAAW,EAAE,SAAS,qBAAqB,EAAE,SAAS;AACtG,QAAM,YAAY,QAAO,iCAAQ,WAAU,WAAW,OAAO,QAAQ;AACrE,QAAM,iBAAiB,QAAO,2CAAa,WAAU,WAAW,YAAY,QAAQ;AAEpF,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AACjD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAwB,IAAI;AAE5E,QAAM;AAAA,IACJ,MAAM,UAAU,CAAC;AAAA,IACjB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,IAAI,aAAa,QAAW,EAAE,SAAS,QAAQ,UAAU,SAAS,EAAE,CAAC;AAErE,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,SAAK,QAAQ;AAAA,EACf,GAAG,CAAC,QAAQ,OAAO,CAAC;AAGpB,QAAM,gBAAgB,QAAQ,MAAM;AAhDtC,QAAAA;AAiDI,QAAI,CAAC,UAAW,QAAO;AACvB,UAAM,SAAS,eAAe,SAAS;AACvC,YAAOA,MAAA,QAAQ,KAAK,CAAC,MAAM,eAAe,EAAE,IAAI,MAAM,MAAM,MAArD,OAAAA,MAA0D;AAAA,EACnE,GAAG,CAAC,WAAW,OAAO,CAAC;AAEvB,QAAM,mBAAmB;AAAA,IACvB,CAAC,IAAY,YAAoB;AAC/B,iBAAW;AAAA,QACT,YAAY;AAAA,UACV,EAAE,MAAM,mBAAmB,MAAM,MAAM,OAAO,GAAG;AAAA,UACjD,EAAE,MAAM,mBAAmB,MAAM,WAAW,OAAO,QAAQ;AAAA,QAC7D;AAAA,MACF,CAAQ;AAAA,IACV;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,UAAyB;AACxB,YAAM,SAAS,eAAe,MAAM,IAAI;AACxC,uBAAiB,QAAQ,cAAc;AACvC,gBAAU,KAAK;AACf,qBAAe,EAAE;AAAA,IACnB;AAAA,IACA,CAAC,kBAAkB,cAAc;AAAA,EACnC;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,qBAAiB,IAAI,cAAc;AAAA,EACrC,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,gBAAgB,YAAY,MAAM;AACtC,UAAM,aAAa,mBAAmB,WAAW,UAAU;AAC3D,qBAAiB,WAAW,UAAU;AAAA,EACxC,GAAG,CAAC,kBAAkB,WAAW,cAAc,CAAC;AAGhD,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,WAAW;AACf,QAAI,kBAAkB;AACpB,iBAAW,SAAS,OAAO,CAAC,MAAM,EAAE,SAAS,gBAAgB;AAAA,IAC/D;AACA,QAAI,YAAY,KAAK,GAAG;AACtB,YAAM,IAAI,YAAY,YAAY;AAClC,iBAAW,SAAS,OAAO,CAAC,MAAM,EAAE,MAAM,YAAY,EAAE,SAAS,CAAC,KAAK,EAAE,KAAK,YAAY,EAAE,SAAS,CAAC,CAAC;AAAA,IACzG;AACA,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,kBAAkB,WAAW,CAAC;AAG3C,QAAM,uBAAuB,QAAQ,MAAM,CAAC,GAAG,IAAI,IAAI,QAAQ,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC;AAE9F,QAAM,qBAAqB,CAAC,SAAc;AArG5C,QAAAA;AAqG+C,aAAAA,MAAA,OAAO,YAAY,IAAmC,MAAtD,gBAAAA,IAAyD,UAAS;AAAA;AAE/G,SACE,qBAAC,SAAI,WAAU,kBAAiB,iBAAiB,OAC9C;AAAA,iBAAa,gBACZ,qBAAC,SAAI,WAAU,4BACb;AAAA,0BAAC,SAAI,WAAU,6BACb,8BAAC,KAAK,UAAL,EAAc,WAAU,kCAAiC,GAC5D;AAAA,MACA,qBAAC,SAAI,WAAU,wBACb;AAAA,6BAAC,UAAK,WAAU,8BAA6B;AAAA;AAAA,UAAmB;AAAA,WAAe;AAAA,QAC/E,oBAAC,UAAK,WAAU,8BAA8B,wBAAc,OAAM;AAAA,QAClE,oBAAC,UAAK,WAAU,6BAA6B,6BAAmB,cAAc,IAAI,GAAE;AAAA,SACtF;AAAA,MACA,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACV,OAAO,aAAa,mBAAmB,WAAW,UAAU,QAAQ;AAAA,YAEpE,8BAAC,KAAK,OAAL,EAAW,WAAU,gBAAe;AAAA;AAAA,QACvC;AAAA,QACA,oBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,SAAS,MAAM,UAAU,IAAI,GAAG,oBAExE;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACV,OAAM;AAAA,YAEN,8BAAC,KAAK,GAAL,EAAO,WAAU,gBAAe;AAAA;AAAA,QACnC;AAAA,SACF;AAAA,OACF,IACE,aAAa,CAAC,gBAChB,qBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,SAAI,WAAU,gCACb,8BAAC,KAAK,UAAL,EAAc,WAAU,kCAAiC,GAC5D;AAAA,MACA,qBAAC,SAAI,WAAU,iBACb;AAAA,4BAAC,UAAK,WAAU,gCACb,uBAAa,CAAC,cAAc,+BAA+B,iBAC9D;AAAA,QACA,oBAAC,UAAK,WAAU,8BAA8B,qBAAU;AAAA,SAC1D;AAAA,MACA,oBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,SAAS,MAAM,UAAU,IAAI,GAAG,0BAExE;AAAA,OACF,IAEA,qBAAC,SAAI,WAAU,+BACb;AAAA,0BAAC,SAAI,WAAU,gCACb,8BAAC,KAAK,UAAL,EAAc,WAAU,kCAAiC,GAC5D;AAAA,MACA,qBAAC,SACC;AAAA,4BAAC,UAAK,WAAU,4CAA2C,+BAAiB;AAAA,QAC5E,oBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,SAAS,MAAM,UAAU,IAAI,GAAG,0BAExE;AAAA,SACF;AAAA,OACF;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAc,CAAC,SAAS;AACtB,oBAAU,IAAI;AACd,cAAI,CAAC,MAAM;AACT,2BAAe,EAAE;AACjB,gCAAoB,IAAI;AAAA,UAC1B;AAAA,QACF;AAAA,QAEA,+BAAC,iBAAc,WAAU,yGACvB;AAAA,8BAAC,gBACC,8BAAC,eAAY,mCAAqB,GACpC;AAAA,UAGA,qBAAC,SAAI,WAAU,8BACb;AAAA,iCAAC,SAAI,WAAU,+BACb;AAAA,kCAAC,KAAK,QAAL,EAAY,WAAU,8DAA6D;AAAA,cACpF;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,OAAO;AAAA,kBACP,UAAU,CAAC,MAAM,eAAe,EAAE,OAAO,KAAK;AAAA,kBAC9C,aAAY;AAAA,kBACZ,WAAU;AAAA;AAAA,cACZ;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,8CAAoB;AAAA,gBAC3B,UAAU,CAAC,MAAM,oBAAoB,EAAE,OAAO,SAAS,IAAI;AAAA,gBAC3D,WAAU;AAAA,gBAEV;AAAA,sCAAC,YAAO,OAAM,IAAG,6BAAe;AAAA,kBAC/B,qBAAqB,IAAI,CAAC,SACzB,oBAAC,YAAkB,OAAO,MACvB,6BAAmB,IAAI,KADb,IAEb,CACD;AAAA;AAAA;AAAA,YACH;AAAA,aACF;AAAA,UAGA,oBAAC,SAAI,WAAU,wBACZ,yBAAe,QAAQ,WAAW,IACjC,oBAAC,SAAI,WAAU,yBAAwB,mCAAgB,IACrD,gBAAgB,WAAW,IAC7B,oBAAC,SAAI,WAAU,yBAAyB,wBAAc,wBAAwB,oBAAmB,IAEjG,oBAAC,SAAI,WAAU,2BACZ,0BAAgB,IAAI,CAAC,UAAU;AAC9B,kBAAM,SAAS,eAAe,MAAM,IAAI;AACxC,kBAAM,aAAa,WAAW,eAAe,SAAS;AACtD,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,MAAK;AAAA,gBACL,SAAS,MAAM,aAAa,KAAK;AAAA,gBACjC,OAAO;AAAA,kBACL,OAAO;AAAA,kBACP,WAAW;AAAA,kBACX,SAAS;AAAA,kBACT,SAAS;AAAA,kBACT,YAAY;AAAA,kBACZ,KAAK;AAAA,kBACL,YAAY,aAAa,uDAAuD;AAAA,kBAChF,OAAO,aAAa,iBAAiB;AAAA,kBACrC,QAAQ;AAAA,kBACR,QAAQ;AAAA,kBACR,cAAc;AAAA,gBAChB;AAAA,gBAEA;AAAA,sCAAC,KAAK,UAAL,EAAc,WAAU,kDAAiD;AAAA,kBAC1E,qBAAC,SAAI,WAAU,8BACb;AAAA,wCAAC,SAAI,WAAU,+BAA+B,gBAAM,OAAM;AAAA,oBAC1D,oBAAC,SAAI,WAAU,8BAA8B,6BAAmB,MAAM,IAAI,GAAE;AAAA,qBAC9E;AAAA,kBACC,cAAc,oBAAC,UAAK,WAAU,kCAAiC,sBAAQ;AAAA;AAAA;AAAA,cAtBnE,GAAG,MAAM,IAAI,IAAI,MAAM,EAAE;AAAA,YAuBhC;AAAA,UAEJ,CAAC,GACH,GAEJ;AAAA,WACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,IAAO,+BAAQ;","names":["_a"]}

package/dist/components/ui/FormField/richtext/SlashCommandMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlashCommandMenu.d.ts","sourceRoot":"","sources":["../../../../../components/ui/FormField/richtext/SlashCommandMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC/C,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,qBAAqB,kDAgG3G"}