@haklex/rich-renderer-image 0.0.3 → 0.0.5

package/dist/ImageEditRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEditRenderer.d.ts","sourceRoot":"","sources":["../src/ImageEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAErB,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,qBAAqB,CAAA;AAqB5B,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,2CAQ1D"}
+{"version":3,"file":"ImageEditRenderer.d.ts","sourceRoot":"","sources":["../src/ImageEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,qBAAqB,CAAA;AA4B5B,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,2CAQ1D"}

package/dist/ImageRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageRenderer.d.ts","sourceRoot":"","sources":["../src/ImageRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,4CAA4C,CAAA;AACnD,OAAO,cAAc,CAAA;AAErB,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,OAAO,CAAA;AAezD,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC,kBAAkB,CA4E3D,CAAA"}
+{"version":3,"file":"ImageRenderer.d.ts","sourceRoot":"","sources":["../src/ImageRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,4CAA4C,CAAA;AAEnD,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,OAAO,CAAA;AAuBzD,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC,kBAAkB,CAwF3D,CAAA"}

package/dist/index.mjs

@@ -7,8 +7,31 @@ import { ImageIcon, Type, ExternalLink, Trash2 } from "lucide-react";
 import { useState, useMemo, useRef, useEffect, useCallback } from "react";
 import "react-photo-view/dist/react-photo-view.css";
 import { PhotoProvider, PhotoView } from "react-photo-view";
-function getCaptionText$1(altText, caption) {
-  if (caption) return caption;
+var semanticClassNames = { root: "rr-image-root", frame: "rr-image-frame", frameLoading: "rr-image-loading", frameLoaded: "rr-image-loaded", frameError: "rr-image-error", image: "rr-image-img", loader: "rr-image-loader", errorBadge: "rr-image-error", caption: "rr-image-caption", editTrigger: "rr-image-edit-trigger", editPlaceholder: "rr-image-edit-placeholder", editPanel: "rr-image-edit-panel", editField: "rr-image-edit-field", editFieldIcon: "rr-image-edit-field-icon", editInput: "rr-image-edit-input", editActions: "rr-image-edit-actions", editActionButton: "rr-image-edit-action-btn", editActionButtonEnd: "rr-image-edit-action-btn--end" };
+var root = "_1n94osf0";
+var image = "_1n94osf2";
+var imageState = { loading: "_1n94osf3", loaded: "_1n94osf4", error: "_1n94osf5" };
+var frame = "_1n94osf6";
+var frameEditMode = "_1n94osf7";
+var loader = "_1n94osf9";
+var errorBadge = "_1n94osfa";
+var caption = "_1n94osfb";
+var editTrigger = "_1n94osfj";
+var editPlaceholder = "_1n94osfk";
+var editPanel = "_1n94osfl";
+var editField = "_1n94osfm";
+var editFieldIcon = "_1n94osfn";
+var editInput = "_1n94osfo";
+var editActions = "_1n94osfp";
+var editActionButton = "_1n94osfq";
+var editActionButtonEnd = "_1n94osfr";
+const frameStateSemanticClass$1 = {
+  loading: semanticClassNames.frameLoading,
+  loaded: semanticClassNames.frameLoaded,
+  error: semanticClassNames.frameError
+};
+function getCaptionText$1(altText, caption2) {
+  if (caption2) return caption2;
   if (!altText) return void 0;
   if (altText.startsWith("!") || altText.startsWith("¡")) {
     return altText.slice(1);
@@ -20,14 +43,14 @@ const ImageRenderer = ({
   altText,
   width,
   height,
-  caption,
+  caption: caption$1,
   thumbhash,
   accent
 }) => {
   const [state, setState] = useState("loading");
   const captionText = useMemo(
-    () => getCaptionText$1(altText, caption),
-    [altText, caption]
+    () => getCaptionText$1(altText, caption$1),
+    [altText, caption$1]
   );
   const placeholderUrl = useMemo(
     () => thumbhash ? decodeThumbHash(thumbhash) : void 0,
@@ -42,11 +65,11 @@ const ImageRenderer = ({
     maxWidth: "100%",
     ...width && height ? { aspectRatio: `${width} / ${height}` } : {}
   };
-  return /* @__PURE__ */ jsxs("figure", { className: "rr-image-root", children: [
+  return /* @__PURE__ */ jsxs("figure", { className: `${root} ${semanticClassNames.root}`, children: [
     /* @__PURE__ */ jsx(PhotoProvider, { photoClosable: true, children: /* @__PURE__ */ jsx(PhotoView, { src, children: /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `rr-image-frame rr-image-${state}`,
+        className: `${frame} ${semanticClassNames.frame} ${imageState[state]} ${frameStateSemanticClass$1[state]}`.trim(),
         style: frameStyle,
         role: "button",
         tabIndex: 0,
@@ -65,21 +88,43 @@ const ImageRenderer = ({
               width,
               height,
               loading: "lazy",
-              className: "rr-image-img",
+              className: `${image} ${semanticClassNames.image}`,
               onLoad: () => setState("loaded"),
               onError: () => setState("error")
             }
           ),
-          state === "loading" && /* @__PURE__ */ jsx("span", { className: "rr-image-loader" }),
-          state === "error" && /* @__PURE__ */ jsx("span", { className: "rr-image-error", children: "Image failed to load" })
+          state === "loading" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${loader} ${semanticClassNames.loader}`
+            }
+          ),
+          state === "error" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${errorBadge} ${semanticClassNames.errorBadge}`,
+              children: "Image failed to load"
+            }
+          )
         ]
       }
     ) }) }),
-    captionText && /* @__PURE__ */ jsx("figcaption", { className: "rr-image-caption", children: captionText })
+    captionText && /* @__PURE__ */ jsx(
+      "figcaption",
+      {
+        className: `${caption} ${semanticClassNames.caption}`,
+        children: captionText
+      }
+    )
   ] });
 };
-function getCaptionText(altText, caption) {
-  if (caption) return caption;
+const frameStateSemanticClass = {
+  loading: semanticClassNames.frameLoading,
+  loaded: semanticClassNames.frameLoaded,
+  error: semanticClassNames.frameError
+};
+function getCaptionText(altText, caption2) {
+  if (caption2) return caption2;
   if (!altText) return void 0;
   if (altText.startsWith("!") || altText.startsWith("¡")) {
     return altText.slice(1);
@@ -98,7 +143,7 @@ function ImageEditRendererInner({
   altText,
   width,
   height,
-  caption,
+  caption: caption$1,
   thumbhash,
   accent
 }) {
@@ -109,13 +154,13 @@ function ImageEditRendererInner({
   const [open, setOpen] = useState(!src);
   const [editSrc, setEditSrc] = useState(src);
   const [editAltText, setEditAltText] = useState(altText);
-  const [editCaption, setEditCaption] = useState(caption || "");
+  const [editCaption, setEditCaption] = useState(caption$1 || "");
   const [state, setState] = useState("loading");
   useEffect(() => {
     setEditSrc(src);
     setEditAltText(altText);
-    setEditCaption(caption || "");
-  }, [src, altText, caption]);
+    setEditCaption(caption$1 || "");
+  }, [src, altText, caption$1]);
   useEffect(() => {
     if (!src) setOpen(true);
   }, [src]);
@@ -129,8 +174,8 @@ function ImageEditRendererInner({
     [thumbhash]
   );
   const captionText = useMemo(
-    () => getCaptionText(altText, caption),
-    [altText, caption]
+    () => getCaptionText(altText, caption$1),
+    [altText, caption$1]
   );
   const commitChanges = useCallback(() => {
     const trimmedSrc = editSrc.trim();
@@ -168,11 +213,11 @@ function ImageEditRendererInner({
         e.preventDefault();
         setEditSrc(src);
         setEditAltText(altText);
-        setEditCaption(caption || "");
+        setEditCaption(caption$1 || "");
         setOpen(false);
       }
     },
-    [commitChanges, src, altText, caption]
+    [commitChanges, src, altText, caption$1]
   );
   if (!editable) {
     return /* @__PURE__ */ jsx(
@@ -182,7 +227,7 @@ function ImageEditRendererInner({
         altText,
         width,
         height,
-        caption,
+        caption: caption$1,
         thumbhash,
         accent
       }
@@ -205,123 +250,200 @@ function ImageEditRendererInner({
         if (!nextOpen) {
           setEditSrc(src);
           setEditAltText(altText);
-          setEditCaption(caption || "");
+          setEditCaption(caption$1 || "");
         }
       },
       children: [
         /* @__PURE__ */ jsx(
           PopoverTrigger,
           {
-            render: /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: "rr-image-edit-trigger" }),
-            children: src ? /* @__PURE__ */ jsxs("figure", { className: "rr-image-root", children: [
+            render: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: wrapperRef,
+                className: `${editTrigger} ${semanticClassNames.editTrigger}`
+              }
+            ),
+            children: src ? /* @__PURE__ */ jsxs(
+              "figure",
+              {
+                className: `${root} ${semanticClassNames.root}`,
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: `${frame} ${semanticClassNames.frame} ${frameEditMode} ${imageState[state]} ${frameStateSemanticClass[state]}`.trim(),
+                      style: frameStyle,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src,
+                            alt: altText,
+                            width,
+                            height,
+                            loading: "lazy",
+                            className: `${image} ${semanticClassNames.image}`,
+                            onLoad: () => setState("loaded"),
+                            onError: () => setState("error")
+                          }
+                        ),
+                        state === "loading" && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: `${loader} ${semanticClassNames.loader}`
+                          }
+                        ),
+                        state === "error" && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: `${errorBadge} ${semanticClassNames.errorBadge}`,
+                            children: "Image failed to load"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  captionText && /* @__PURE__ */ jsx(
+                    "figcaption",
+                    {
+                      className: `${caption} ${semanticClassNames.caption}`,
+                      children: captionText
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `${editPlaceholder} ${semanticClassNames.editPlaceholder}`,
+                children: [
+                  /* @__PURE__ */ jsx(ImageIcon, { size: 24 }),
+                  /* @__PURE__ */ jsx("span", { children: "Click to add image" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          PopoverPanel,
+          {
+            side: "bottom",
+            sideOffset: 8,
+            className: `${editPanel} ${semanticClassNames.editPanel}`,
+            children: [
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: `rr-image-frame rr-image-${state}`,
-                  style: frameStyle,
+                  className: `${editField} ${semanticClassNames.editField}`,
                   children: [
                     /* @__PURE__ */ jsx(
-                      "img",
+                      ImageIcon,
                       {
-                        src,
-                        alt: altText,
-                        width,
-                        height,
-                        loading: "lazy",
-                        className: "rr-image-img",
-                        onLoad: () => setState("loaded"),
-                        onError: () => setState("error")
+                        className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
+                        size: 14
                       }
                     ),
-                    state === "loading" && /* @__PURE__ */ jsx("span", { className: "rr-image-loader" }),
-                    state === "error" && /* @__PURE__ */ jsx("span", { className: "rr-image-error", children: "Image failed to load" })
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: srcInputRef,
+                        className: `${editInput} ${semanticClassNames.editInput}`,
+                        type: "url",
+                        value: editSrc,
+                        onChange: (e) => setEditSrc(e.target.value),
+                        onKeyDown: handleKeyDown,
+                        placeholder: "Image URL"
+                      }
+                    )
                   ]
                 }
               ),
-              captionText && /* @__PURE__ */ jsx("figcaption", { className: "rr-image-caption", children: captionText })
-            ] }) : /* @__PURE__ */ jsxs("div", { className: "rr-image-edit-placeholder", children: [
-              /* @__PURE__ */ jsx(ImageIcon, { size: 24 }),
-              /* @__PURE__ */ jsx("span", { children: "Click to add image" })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          PopoverPanel,
-          {
-            side: "bottom",
-            sideOffset: 8,
-            className: "rr-image-edit-panel",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "rr-image-edit-field", children: [
-                /* @__PURE__ */ jsx(ImageIcon, { className: "rr-image-edit-field-icon", size: 14 }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ref: srcInputRef,
-                    className: "rr-image-edit-input",
-                    type: "url",
-                    value: editSrc,
-                    onChange: (e) => setEditSrc(e.target.value),
-                    onKeyDown: handleKeyDown,
-                    placeholder: "Image URL"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "rr-image-edit-field", children: [
-                /* @__PURE__ */ jsx(Type, { className: "rr-image-edit-field-icon", size: 14 }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    className: "rr-image-edit-input",
-                    type: "text",
-                    value: editAltText,
-                    onChange: (e) => setEditAltText(e.target.value),
-                    onKeyDown: handleKeyDown,
-                    placeholder: "Alt text"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "rr-image-edit-field", children: [
-                /* @__PURE__ */ jsx(Type, { className: "rr-image-edit-field-icon", size: 14 }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    className: "rr-image-edit-input",
-                    type: "text",
-                    value: editCaption,
-                    onChange: (e) => setEditCaption(e.target.value),
-                    onBlur: commitChanges,
-                    onKeyDown: handleKeyDown,
-                    placeholder: "Caption (optional)"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "rr-image-edit-actions", children: [
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    className: "rr-image-edit-action-btn",
-                    type: "button",
-                    onClick: handleOpen,
-                    children: [
-                      /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
-                      "Open"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    className: "rr-image-edit-action-btn rr-image-edit-action-btn--end",
-                    type: "button",
-                    onClick: handleDelete,
-                    children: [
-                      /* @__PURE__ */ jsx(Trash2, { size: 14 }),
-                      "Remove"
-                    ]
-                  }
-                )
-              ] })
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `${editField} ${semanticClassNames.editField}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Type,
+                      {
+                        className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
+                        size: 14
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        className: `${editInput} ${semanticClassNames.editInput}`,
+                        type: "text",
+                        value: editAltText,
+                        onChange: (e) => setEditAltText(e.target.value),
+                        onKeyDown: handleKeyDown,
+                        placeholder: "Alt text"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `${editField} ${semanticClassNames.editField}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Type,
+                      {
+                        className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
+                        size: 14
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        className: `${editInput} ${semanticClassNames.editInput}`,
+                        type: "text",
+                        value: editCaption,
+                        onChange: (e) => setEditCaption(e.target.value),
+                        onBlur: commitChanges,
+                        onKeyDown: handleKeyDown,
+                        placeholder: "Caption (optional)"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `${editActions} ${semanticClassNames.editActions}`,
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        className: `${editActionButton} ${semanticClassNames.editActionButton}`,
+                        type: "button",
+                        onClick: handleOpen,
+                        children: [
+                          /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
+                          "Open"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        className: `${editActionButton} ${semanticClassNames.editActionButton} ${editActionButtonEnd} ${semanticClassNames.editActionButtonEnd}`,
+                        type: "button",
+                        onClick: handleDelete,
+                        children: [
+                          /* @__PURE__ */ jsx(Trash2, { size: 14 }),
+                          "Remove"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
             ]
           }
         )

package/dist/rich-renderer-image.css

@@ -1,4 +1,4 @@
-@keyframes _1n94osf0 {
+@keyframes _1n94osf1 {
   0% {
     mask: linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 150% 0 / 400% no-repeat;
     opacity: 0.16;
@@ -8,12 +8,12 @@
     opacity: 1;
   }
 }
-@keyframes _1n94osf1 {
+@keyframes _1n94osf8 {
   to {
     transform: rotate(360deg);
   }
 }
-@keyframes _1n94osf2 {
+@keyframes _1n94osfg {
   from {
     opacity: 0;
   }
@@ -21,11 +21,27 @@
     opacity: 1;
   }
 }
-.rr-image-root {
+._1n94osf0 {
   margin: 1.25rem 0;
   text-align: center;
 }
-.rr-image-frame {
+._1n94osf2 {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  opacity: 0;
+  transition: opacity 280ms ease;
+  border-radius: 0px !important;
+}
+._1n94osf4 {
+  opacity: 1;
+  animation: _1n94osf1 420ms ease;
+}
+._1n94osf5 {
+  display: none;
+}
+._1n94osf6 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -36,47 +52,73 @@
   min-height: 3rem;
   transition: transform 0.25s ease;
 }
-.rr-image-frame:hover {
+._1n94osf6:hover {
   transform: translateY(-1px);
 }
-.rr-image-img {
-  display: block;
-  width: 100%;
-  height: auto;
-  max-width: 100%;
-  opacity: 0;
-  transition: opacity 280ms ease;
-  border-radius: 0px !important;
-}
-.rr-image-loaded .rr-image-img {
-  opacity: 1;
-  animation: _1n94osf0 420ms ease;
+._1n94osf7 {
+  cursor: pointer;
 }
-.rr-image-error .rr-image-img {
-  display: none;
+._1n94osf7:hover {
+  transform: none;
 }
-.rr-image-loader {
+._1n94osf9 {
   position: absolute;
   width: 1.65rem;
   height: 1.65rem;
   border: 2px solid color-mix(in srgb, var(--rc-text-secondary) 45%, transparent);
   border-top-color: color-mix(in srgb, var(--rc-text) 65%, transparent);
   border-radius: 50%;
-  animation: _1n94osf1 0.75s linear infinite;
+  animation: _1n94osf8 0.75s linear infinite;
 }
-.rr-image-error {
+._1n94osfa {
   font-size: 0.8rem;
   color: var(--rc-alert-caution);
   background: color-mix(in srgb, var(--rc-bg) 86%, transparent);
   border-radius: 999px;
   padding: 0.15rem 0.6rem;
 }
-.rr-image-caption {
+._1n94osfb {
   margin-top: 0.5rem;
   color: var(--rc-text-secondary);
   font-size: 0.86rem;
   line-height: 1.5;
 }
+._1n94osfc {
+  margin: var(--rc-space-md) 0;
+  text-align: center;
+}
+._1n94osfd {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  border-radius: var(--rc-radius-md);
+  transition: background-color 0.3s ease;
+}
+._1n94osfe {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+._1n94osff {
+  opacity: 1;
+  transition: opacity 0.3s ease;
+}
+._1n94osfh {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.85);
+  cursor: zoom-out;
+  animation: _1n94osfg 0.2s ease;
+}
+._1n94osfi {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 0;
+}
 .rich-image {
   margin: var(--rc-space-md) 0;
   text-align: center;
@@ -111,7 +153,7 @@
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.85);
   cursor: zoom-out;
-  animation: _1n94osf2 0.2s ease;
+  animation: _1n94osfg 0.2s ease;
 }
 .rich-image-zoom-img {
   max-width: 90vw;
@@ -119,17 +161,11 @@
   object-fit: contain;
   border-radius: 0;
 }
-.rr-image-edit-trigger {
+._1n94osfj {
   display: block;
   cursor: pointer;
 }
-.rr-image-edit-trigger .rr-image-frame {
-  cursor: pointer;
-}
-.rr-image-edit-trigger .rr-image-frame:hover {
-  transform: none;
-}
-.rr-image-edit-placeholder {
+._1n94osfk {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -142,11 +178,11 @@
   cursor: pointer;
   transition: border-color 0.2s, color 0.2s;
 }
-.rr-image-edit-placeholder:hover {
+._1n94osfk:hover {
   border-color: var(--rc-accent);
   color: var(--rc-text);
 }
-.rr-image-edit-panel {
+._1n94osfl {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -155,7 +191,7 @@
   font-size: 13px;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
-.rr-image-edit-field {
+._1n94osfm {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -164,11 +200,11 @@
   border-radius: 6px;
   min-width: 0;
 }
-.rr-image-edit-field-icon {
+._1n94osfn {
   flex-shrink: 0;
   color: var(--rc-text-secondary);
 }
-.rr-image-edit-input {
+._1n94osfo {
   flex: 1;
   appearance: none;
   border: none;
@@ -179,15 +215,15 @@
   outline: none;
   min-width: 0;
 }
-.rr-image-edit-input::placeholder {
+._1n94osfo::placeholder {
   color: var(--rc-text-secondary);
 }
-.rr-image-edit-actions {
+._1n94osfp {
   display: flex;
   align-items: center;
   gap: 4px;
 }
-.rr-image-edit-action-btn {
+._1n94osfq {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -203,9 +239,9 @@
   transition: color 0.15s ease, background-color 0.15s ease;
   white-space: nowrap;
 }
-.rr-image-edit-action-btn:hover {
+._1n94osfq:hover {
   background-color: var(--rc-bg-secondary);
 }
-.rr-image-edit-action-btn--end {
+._1n94osfr {
   margin-left: auto;
 }

package/dist/styles.css.d.ts

@@ -1,2 +1,52 @@
-export {};
+export declare const semanticClassNames: {
+    readonly root: "rr-image-root";
+    readonly frame: "rr-image-frame";
+    readonly frameLoading: "rr-image-loading";
+    readonly frameLoaded: "rr-image-loaded";
+    readonly frameError: "rr-image-error";
+    readonly image: "rr-image-img";
+    readonly loader: "rr-image-loader";
+    readonly errorBadge: "rr-image-error";
+    readonly caption: "rr-image-caption";
+    readonly editTrigger: "rr-image-edit-trigger";
+    readonly editPlaceholder: "rr-image-edit-placeholder";
+    readonly editPanel: "rr-image-edit-panel";
+    readonly editField: "rr-image-edit-field";
+    readonly editFieldIcon: "rr-image-edit-field-icon";
+    readonly editInput: "rr-image-edit-input";
+    readonly editActions: "rr-image-edit-actions";
+    readonly editActionButton: "rr-image-edit-action-btn";
+    readonly editActionButtonEnd: "rr-image-edit-action-btn--end";
+};
+export declare const root: string;
+export declare const image: string;
+export declare const imageState: Record<"error" | "loaded" | "loading", string>;
+export declare const frame: string;
+export declare const frameEditMode: string;
+export declare const loader: string;
+export declare const errorBadge: string;
+export declare const caption: string;
+export declare const contentSemanticClassNames: {
+    readonly root: "rich-image";
+    readonly container: "rich-image-container";
+    readonly hidden: "rich-image-hidden";
+    readonly visible: "rich-image-visible";
+    readonly zoomOverlay: "rich-image-zoom-overlay";
+    readonly zoomImage: "rich-image-zoom-img";
+};
+export declare const contentRoot: string;
+export declare const contentContainer: string;
+export declare const contentHidden: string;
+export declare const contentVisible: string;
+export declare const contentZoomOverlay: string;
+export declare const contentZoomImage: string;
+export declare const editTrigger: string;
+export declare const editPlaceholder: string;
+export declare const editPanel: string;
+export declare const editField: string;
+export declare const editFieldIcon: string;
+export declare const editInput: string;
+export declare const editActions: string;
+export declare const editActionButton: string;
+export declare const editActionButtonEnd: string;
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":""}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;CAmBrB,CAAA;AAEV,eAAO,MAAM,IAAI,QAGf,CAAA;AAaF,eAAO,MAAM,KAAK,QAQhB,CAAA;AAEF,eAAO,MAAM,UAAU,gDASrB,CAAA;AAEF,eAAO,MAAM,KAAK,QAehB,CAAA;AAEF,eAAO,MAAM,aAAa,QAOxB,CAAA;AAIF,eAAO,MAAM,MAAM,QAQjB,CAAA;AAEF,eAAO,MAAM,UAAU,QAMrB,CAAA;AAEF,eAAO,MAAM,OAAO,QAKlB,CAAA;AAEF,eAAO,MAAM,yBAAyB;;;;;;;CAO5B,CAAA;AAgCV,eAAO,MAAM,WAAW,QAA2B,CAAA;AACnD,eAAO,MAAM,gBAAgB,QAAgC,CAAA;AAC7D,eAAO,MAAM,aAAa,QAA6B,CAAA;AACvD,eAAO,MAAM,cAAc,QAA8B,CAAA;AA0BzD,eAAO,MAAM,kBAAkB,QAAkC,CAAA;AACjE,eAAO,MAAM,gBAAgB,QAAgC,CAAA;AAiB7D,eAAO,MAAM,WAAW,QAGtB,CAAA;AAEF,eAAO,MAAM,eAAe,QAkB1B,CAAA;AAEF,eAAO,MAAM,SAAS,QASpB,CAAA;AAEF,eAAO,MAAM,SAAS,QAQpB,CAAA;AAEF,eAAO,MAAM,aAAa,QAGxB,CAAA;AAEF,eAAO,MAAM,SAAS,QAepB,CAAA;AAEF,eAAO,MAAM,WAAW,QAItB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAoB3B,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAE9B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-renderer-image",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Image renderer with blurhash and lightbox",
   "license": "MIT",
   "type": "module",
@@ -19,9 +19,9 @@
     "lucide-react": "^0.574.0",
     "react-photo-view": "^1.2.6",
     "thumbhash": "^0.1.1",
-    "@haklex/rich-editor-ui": "0.0.3",
-    "@haklex/rich-style-token": "0.0.3",
-    "@haklex/rich-editor": "0.0.3"
+    "@haklex/rich-editor": "0.0.5",
+    "@haklex/rich-editor-ui": "0.0.5",
+    "@haklex/rich-style-token": "0.0.5"
   },
   "devDependencies": {
     "@lexical/react": "^0.39.0",