@haklex/rich-renderer-linkcard 0.0.4 → 0.0.5

package/dist/LinkCardEditDecorator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkCardEditDecorator.d.ts","sourceRoot":"","sources":["../src/LinkCardEditDecorator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAK/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAGzC,UAAU,0BAA0B;IAClC,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,mBAAmB,CAAA;IAC5B,QAAQ,EAAE,YAAY,CAAA;CACvB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,0BAA0B,2CAoH5B"}
+{"version":3,"file":"LinkCardEditDecorator.d.ts","sourceRoot":"","sources":["../src/LinkCardEditDecorator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAK/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAKzC,UAAU,0BAA0B;IAClC,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,mBAAmB,CAAA;IAC5B,QAAQ,EAAE,YAAY,CAAA;CACvB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,0BAA0B,2CA+H5B"}

package/dist/LinkCardRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkCardRenderer.d.ts","sourceRoot":"","sources":["../src/LinkCardRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAErB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAEhE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAO1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAEnE,MAAM,WAAW,qBAAsB,SAAQ,qBAAqB;IAClE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,YAAY,CAAC,EAAE,oBAAoB,CAAA;CACpC;AAgBD,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC,qBAAqB,CAqJjE,CAAA"}
+{"version":3,"file":"LinkCardRenderer.d.ts","sourceRoot":"","sources":["../src/LinkCardRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAEhE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAQ1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAEnE,MAAM,WAAW,qBAAsB,SAAQ,qBAAqB;IAClE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,YAAY,CAAC,EAAE,oBAAoB,CAAA;CACpC;AA6BD,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC,qBAAqB,CA6KjE,CAAA"}

package/dist/LinkCardSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkCardSkeleton.d.ts","sourceRoot":"","sources":["../src/LinkCardSkeleton.tsx"],"names":[],"mappings":"AAEA,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,2CAsBA"}
+{"version":3,"file":"LinkCardSkeleton.d.ts","sourceRoot":"","sources":["../src/LinkCardSkeleton.tsx"],"names":[],"mappings":"AAGA,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,2CAwCA"}

package/dist/index.mjs

@@ -28,14 +28,14 @@ const arxivPlugin = {
     const parser = new DOMParser();
     const xmlDoc = parser.parseFromString(text, "application/xml");
     const entry = xmlDoc.getElementsByTagName("entry")[0];
-    const title = entry.getElementsByTagName("title")[0].textContent;
+    const title2 = entry.getElementsByTagName("title")[0].textContent;
     const authors = entry.getElementsByTagName("author");
     const authorNames = Array.from(authors).map(
       (author) => author.getElementsByTagName("name")[0].textContent
     );
     return {
       title: /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-        /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: title }),
+        /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: title2 }),
         /* @__PURE__ */ jsx("span", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
           "span",
           {
@@ -627,14 +627,14 @@ const bangumiPlugin = {
     const json = await fetch(`/api/bangumi/${type}/${realId}`).then(
       (r) => r.json()
     );
-    let title = "";
+    let title2 = "";
     let originalTitle = "";
     if (type === "subject") {
       if (json.name_cn && json.name_cn !== json.name && json.name_cn !== "") {
-        title = json.name_cn;
+        title2 = json.name_cn;
         originalTitle = json.name;
       } else {
-        title = json.name;
+        title2 = json.name;
         originalTitle = json.name;
       }
     } else if (type === "character" || type === "person") {
@@ -642,7 +642,7 @@ const bangumiPlugin = {
       infobox.forEach(
         (item) => {
           if (item.key === "简体中文名") {
-            title = typeof item.value === "string" ? item.value : item.value[0].v;
+            title2 = typeof item.value === "string" ? item.value : item.value[0].v;
           } else if (item.key === "别名") {
             const aliases = item.value;
             aliases.forEach((alias) => {
@@ -673,8 +673,8 @@ const bangumiPlugin = {
             gap: "8px"
           },
           children: [
-            /* @__PURE__ */ jsx("span", { children: title }),
-            title !== originalTitle && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.875rem", opacity: 0.7 }, children: [
+            /* @__PURE__ */ jsx("span", { children: title2 }),
+            title2 !== originalTitle && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.875rem", opacity: 0.7 }, children: [
               "(",
               originalTitle,
               ")"
@@ -710,7 +710,7 @@ const bangumiPlugin = {
       ),
       desc: /* @__PURE__ */ jsx("span", { style: { overflow: "visible", whiteSpace: "pre-wrap" }, children: json.summary }),
       image: json.images.grid,
-      color: generateColor(title),
+      color: generateColor(title2),
       classNames: {
         image: type === "subject" ? "link-card__image--poster-md" : "link-card__image--poster-sm",
         cardRoot: "link-card--reversed"
@@ -877,7 +877,7 @@ const tmdbPlugin = {
     const json = await fetch(
       `/api/tmdb/${type}/${realId}?language=${userLanguage}`
     ).then((r) => r.json());
-    const title = type === "tv" ? json.name : json.title;
+    const title2 = type === "tv" ? json.name : json.title;
     const originalTitle = type === "tv" ? json.original_name : json.original_title;
     return {
       title: /* @__PURE__ */ jsxs(
@@ -890,8 +890,8 @@ const tmdbPlugin = {
             gap: "8px"
           },
           children: [
-            /* @__PURE__ */ jsx("span", { children: title }),
-            title !== originalTitle && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.875rem", opacity: 0.7 }, children: [
+            /* @__PURE__ */ jsx("span", { children: title2 }),
+            title2 !== originalTitle && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.875rem", opacity: 0.7 }, children: [
               "(",
               originalTitle,
               ")"
@@ -919,7 +919,7 @@ const tmdbPlugin = {
       ),
       desc: /* @__PURE__ */ jsx("span", { style: { overflow: "visible", whiteSpace: "pre-wrap" }, children: json.overview }),
       image: `https://image.tmdb.org/t/p/w500${json.poster_path}`,
-      color: generateColor(title || originalTitle || id),
+      color: generateColor(title2 || originalTitle || id),
       classNames: {
         image: "link-card__image--poster",
         cardRoot: "link-card--reversed"
@@ -1027,6 +1027,31 @@ function useUrlMatcher(url, pluginRegistry = plugins) {
     return null;
   }, [url, pluginRegistry]);
 }
+var semanticClassNames = { card: "link-card", cardShortDesc: "link-card--short-desc", cardSkeleton: "link-card--skeleton", cardError: "link-card--error", bg: "link-card__bg", image: "link-card__image", icon: "link-card__icon", content: "link-card__content", title: "link-card__title", titleText: "link-card__title-text", external: "link-card__external", desc: "link-card__desc", desc2: "link-card__desc-2", editWrapper: "rich-link-card-edit-wrapper", editPanel: "rich-link-card-edit-panel", editUrlRow: "rich-link-card-edit-url-row", editLinkIcon: "rich-link-card-edit-link-icon", editInput: "rich-link-card-edit-input", editActions: "rich-link-card-edit-actions", editActionButton: "rich-link-card-edit-action-btn", editActionButtonEnd: "rich-link-card-edit-action-btn--end" };
+var card = "_13weebv0";
+var cardShortDesc = "_13weebv1";
+var bg = "_13weebv2";
+var image = "_13weebv3";
+var icon = "_13weebv7";
+var content = "_13weebv8";
+var title = "_13weebv9";
+var titleText = "_13weebva";
+var external = "_13weebvb";
+var desc = "_13weebvc";
+var desc2 = "_13weebvd";
+var cardSkeleton = "_13weebvl";
+var cardError = "_13weebvn";
+var editWrapper = "_13weebvo";
+var editPanel = "_13weebvp";
+var editUrlRow = "_13weebvq";
+var editLinkIcon = "_13weebvr";
+var editInput = "_13weebvt";
+var editActions = "_13weebvu";
+var editActionButton = "_13weebvv";
+var editActionButtonEnd = "_13weebvw";
+var typeCardModifier = { media: "_13weebvi", github: "_13weebvj", academic: "_13weebvk", wide: "_13weebvg", full: "_13weebvh" };
+var semanticTypeClassNames = { media: "link-card--media", github: "link-card--github", academic: "link-card--academic", wide: "link-card--wide", full: "link-card--full" };
+var semanticClassToStyle = { "link-card--short-desc": "_13weebv1", "link-card--skeleton": "_13weebvl", "link-card--error": "_13weebvn", "link-card--reversed": "_13weebvf", "link-card--wide": "_13weebvg", "link-card--full": "_13weebvh", "link-card--media": "_13weebvi", "link-card--github": "_13weebvj", "link-card--academic": "_13weebvk", "link-card__image--poster": "_13weebv4", "link-card__image--poster-md": "_13weebv5", "link-card__image--poster-sm": "_13weebv6" };
 function LinkCardEditDecorator({
   nodeKey,
   payload,
@@ -1096,7 +1121,12 @@ function LinkCardEditDecorator({
             delay: 200,
             closeDelay: 300,
             openOnHover: true,
-            render: /* @__PURE__ */ jsx("span", { className: "rich-link-card-edit-wrapper" }),
+            render: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${editWrapper} ${semanticClassNames.editWrapper}`
+              }
+            ),
             children
           }
         ),
@@ -1105,50 +1135,68 @@ function LinkCardEditDecorator({
           {
             side: "bottom",
             sideOffset: 8,
-            className: "rich-link-card-edit-panel",
+            className: `${editPanel} ${semanticClassNames.editPanel}`,
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "rich-link-card-edit-url-row", children: [
-                /* @__PURE__ */ jsx(Link, { className: "rich-link-card-edit-link-icon", size: 16 }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ref: inputRef,
-                    className: "rich-link-card-edit-input",
-                    type: "url",
-                    value: url,
-                    onChange: (e) => setUrl(e.target.value),
-                    onBlur: commitUrl,
-                    onKeyDown: handleKeyDown,
-                    placeholder: "https://..."
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "rich-link-card-edit-actions", children: [
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    className: "rich-link-card-edit-action-btn",
-                    type: "button",
-                    onClick: handleOpen,
-                    children: [
-                      /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
-                      "Open"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    className: "rich-link-card-edit-action-btn rich-link-card-edit-action-btn--end",
-                    type: "button",
-                    onClick: handleDelete,
-                    children: [
-                      /* @__PURE__ */ jsx(Unlink, { size: 14 }),
-                      "Remove"
-                    ]
-                  }
-                )
-              ] })
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `${editUrlRow} ${semanticClassNames.editUrlRow}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Link,
+                      {
+                        className: `${editLinkIcon} ${semanticClassNames.editLinkIcon}`,
+                        size: 16
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: inputRef,
+                        className: `${editInput} ${semanticClassNames.editInput}`,
+                        type: "url",
+                        value: url,
+                        onChange: (e) => setUrl(e.target.value),
+                        onBlur: commitUrl,
+                        onKeyDown: handleKeyDown,
+                        placeholder: "https://..."
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__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(Unlink, { size: 14 }),
+                          "Remove"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
             ]
           }
         )
@@ -1247,35 +1295,67 @@ function LinkCardSkeleton({
   className
 }) {
   const plugin = source ? pluginMap.get(source) : void 0;
-  const typeClass = plugin?.typeClass ? `link-card--${plugin.typeClass}` : "";
+  const typeClass = plugin?.typeClass;
+  const typeStyleClass = typeClass ? typeCardModifier[typeClass] : "";
+  const typeSemanticClass = typeClass ? semanticTypeClassNames[typeClass] : "";
   return /* @__PURE__ */ jsxs(
     "span",
     {
       "data-hide-print": true,
       "data-source": source || void 0,
-      className: ["link-card", "link-card--skeleton", typeClass, className].filter(Boolean).join(" "),
+      className: [
+        card,
+        semanticClassNames.card,
+        cardSkeleton,
+        semanticClassNames.cardSkeleton,
+        typeStyleClass,
+        typeSemanticClass,
+        className
+      ].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "link-card__image" }),
-        /* @__PURE__ */ jsxs("span", { className: "link-card__content", children: [
-          /* @__PURE__ */ jsx("span", { className: "link-card__title", children: /* @__PURE__ */ jsx("span", { className: "link-card__title-text" }) }),
-          /* @__PURE__ */ jsx("span", { className: "link-card__desc" }),
-          /* @__PURE__ */ jsx("span", { className: "link-card__desc link-card__desc-2" })
-        ] })
+        /* @__PURE__ */ jsx("span", { className: `${image} ${semanticClassNames.image}` }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: `${content} ${semanticClassNames.content}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: `${title} ${semanticClassNames.title}`, children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `${titleText} ${semanticClassNames.titleText}`
+                }
+              ) }),
+              /* @__PURE__ */ jsx("span", { className: `${desc} ${semanticClassNames.desc}` }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `${desc} ${semanticClassNames.desc} ${desc2} ${semanticClassNames.desc2}`
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
 }
 function FallbackIcon({ favicon }) {
   const [faviconFailed, setFaviconFailed] = useState(false);
-  return /* @__PURE__ */ jsx("span", { className: "link-card__icon", children: favicon && !faviconFailed ? /* @__PURE__ */ jsx("img", { src: favicon, alt: "", onError: () => setFaviconFailed(true) }) : /* @__PURE__ */ jsx(Globe, { "aria-hidden": "true" }) });
+  return /* @__PURE__ */ jsx("span", { className: `${icon} ${semanticClassNames.icon}`, children: favicon && !faviconFailed ? /* @__PURE__ */ jsx("img", { src: favicon, alt: "", onError: () => setFaviconFailed(true) }) : /* @__PURE__ */ jsx(Globe, { "aria-hidden": "true" }) });
+}
+function mapSemanticClasses(classNames) {
+  if (!classNames) return "";
+  return classNames.split(/\s+/).filter(Boolean).map(
+    (cls) => semanticClassToStyle[cls] ? `${semanticClassToStyle[cls]} ${cls}` : cls
+  ).join(" ");
 }
 const LinkCardRenderer = (props) => {
   const {
     url,
-    title,
+    title: title$1,
     description,
     favicon,
-    image,
+    image: image$1,
     source: explicitSource,
     id: explicitId,
     className,
@@ -1303,12 +1383,16 @@ const LinkCardRenderer = (props) => {
     enabled: useDynamicFetch,
     context: fetchContext
   });
-  const typeClass = selectedPlugin?.typeClass ? `link-card--${selectedPlugin.typeClass}` : "";
-  const finalTitle = cardInfo?.title || title || url;
+  const typeClass = selectedPlugin?.typeClass;
+  const typeStyleClass = typeClass ? typeCardModifier[typeClass] : "";
+  const typeSemanticClass = typeClass ? semanticTypeClassNames[typeClass] : "";
+  const finalTitle = cardInfo?.title || title$1 || url;
   const finalDesc = cardInfo?.desc || description;
-  const finalImage = cardInfo?.image || image;
+  const finalImage = cardInfo?.image || image$1;
   const finalColor = cardInfo?.color;
   const classNames = cardInfo?.classNames || {};
+  const mappedCardRootClass = mapSemanticClasses(classNames.cardRoot);
+  const mappedImageClass = mapSemanticClasses(classNames.image);
   const [shortDesc, setShortDesc] = useState(false);
   const descRef = useRef(null);
   useLayoutEffect(() => {
@@ -1346,14 +1430,19 @@ const LinkCardRenderer = (props) => {
       "data-hide-print": true,
       ref: useDynamicFetch ? ref : void 0,
       className: [
-        "link-card",
-        typeClass,
-        shortDesc && "link-card--short-desc",
-        useDynamicFetch && (loading || isError) && "link-card--skeleton",
-        useDynamicFetch && isError && "link-card--error",
+        card,
+        semanticClassNames.card,
+        typeStyleClass,
+        typeSemanticClass,
+        shortDesc && cardShortDesc,
+        shortDesc && semanticClassNames.cardShortDesc,
+        useDynamicFetch && (loading || isError) && cardSkeleton,
+        useDynamicFetch && (loading || isError) && semanticClassNames.cardSkeleton,
+        useDynamicFetch && isError && cardError,
+        useDynamicFetch && isError && semanticClassNames.cardError,
         "not-prose",
         className,
-        classNames.cardRoot
+        mappedCardRootClass
       ].filter(Boolean).join(" "),
       "data-source": source || void 0,
       href: useDynamicFetch ? fullUrl : url,
@@ -1366,7 +1455,7 @@ const LinkCardRenderer = (props) => {
         finalColor && /* @__PURE__ */ jsx(
           "div",
           {
-            className: "link-card__bg",
+            className: `${bg} ${semanticClassNames.bg}`,
             style: {
               backgroundColor: finalColor,
               opacity: 0.04
@@ -1376,27 +1465,50 @@ const LinkCardRenderer = (props) => {
         hasImage || showImagePlaceholder ? /* @__PURE__ */ jsx(
           "span",
           {
-            className: ["link-card__image", classNames.image].filter(Boolean).join(" "),
+            className: [
+              image,
+              semanticClassNames.image,
+              mappedImageClass
+            ].filter(Boolean).join(" "),
             "data-image": finalImage || "",
             style: {
               backgroundImage: finalImage ? `url(${finalImage})` : void 0
             }
           }
         ) : /* @__PURE__ */ jsx(FallbackIcon, { favicon }),
-        /* @__PURE__ */ jsxs("span", { className: "link-card__content", children: [
-          /* @__PURE__ */ jsxs("span", { className: "link-card__title", children: [
-            /* @__PURE__ */ jsx("span", { className: "link-card__title-text", children: finalTitle }),
-            /* @__PURE__ */ jsx(
-              ExternalLink,
-              {
-                className: "link-card__external",
-                "aria-hidden": "true",
-                focusable: false
-              }
-            )
-          ] }),
-          finalDesc && /* @__PURE__ */ jsx("span", { ref: descRef, className: "link-card__desc", children: finalDesc })
-        ] })
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: `${content} ${semanticClassNames.content}`,
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: `${title} ${semanticClassNames.title}`, children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${titleText} ${semanticClassNames.titleText}`,
+                    children: finalTitle
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ExternalLink,
+                  {
+                    className: `${external} ${semanticClassNames.external}`,
+                    "aria-hidden": "true",
+                    focusable: false
+                  }
+                )
+              ] }),
+              finalDesc && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ref: descRef,
+                  className: `${desc} ${semanticClassNames.desc}`,
+                  children: finalDesc
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );

package/dist/rich-renderer-linkcard.css

@@ -1,4 +1,4 @@
-@keyframes _13weebv0 {
+@keyframes _13weebvm {
   0%, 100% {
     opacity: 1;
   }
@@ -6,7 +6,7 @@
     opacity: 0.5;
   }
 }
-.link-card {
+._13weebv0 {
   position: relative;
   display: flex;
   box-sizing: border-box;
@@ -28,26 +28,26 @@
   backdrop-filter: blur(12px) saturate(150%);
   transition: border-color 0.2s, background-color 0.2s;
 }
-.link-card:hover {
+._13weebv0:hover {
   border-color: var(--rc-border);
   background-color: var(--rc-bg-secondary);
 }
-.link-card--short-desc {
+._13weebv1 {
   align-items: center;
 }
-.link-card * {
+._13weebv0 * {
   font-style: normal !important;
 }
-.link-card span {
+._13weebv0 span {
   border-bottom: 0 !important;
 }
-.link-card__bg {
+._13weebv2 {
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
 }
-.link-card__image {
+._13weebv3 {
   position: relative;
   flex-shrink: 0;
   width: 2.5rem;
@@ -59,7 +59,26 @@
   background-color: var(--rc-bg-secondary);
   z-index: 1;
 }
-.link-card__icon {
+._13weebv4 {
+  width: 6.25rem !important;
+  height: auto !important;
+  min-height: 8.75rem;
+  aspect-ratio: 2 / 3;
+  align-self: stretch;
+}
+._13weebv5 {
+  width: 3.5rem !important;
+  height: 5rem !important;
+  aspect-ratio: auto;
+  align-self: flex-start;
+}
+._13weebv6 {
+  width: 3.5rem !important;
+  height: 3.5rem !important;
+  aspect-ratio: auto;
+  align-self: flex-start;
+}
+._13weebv7 {
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -70,29 +89,29 @@
   background-color: var(--rc-bg-secondary);
   z-index: 1;
 }
-.link-card__icon img {
+._13weebv7 img {
   width: 1.25rem;
   height: 1.25rem;
   border-radius: 0.25rem;
 }
-.link-card__icon svg {
+._13weebv7 svg {
   width: 1.25rem;
   height: 1.25rem;
   color: var(--rc-text-secondary);
 }
-.link-card__content {
+._13weebv8 {
   flex: 1;
   min-width: 0;
   position: relative;
   z-index: 1;
 }
-.link-card__title {
+._13weebv9 {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   line-height: 1.25rem;
 }
-.link-card__title-text {
+._13weebva {
   flex: 1;
   min-width: 0;
   display: -webkit-box;
@@ -104,7 +123,7 @@
   font-weight: 600;
   line-height: 1.25rem;
 }
-.link-card__external {
+._13weebvb {
   flex-shrink: 0;
   margin-left: auto;
   width: 0.875rem;
@@ -113,10 +132,10 @@
   opacity: 0;
   transition: opacity 0.2s;
 }
-.link-card:hover .link-card__external {
+._13weebv0:hover ._13weebvb {
   opacity: 1;
 }
-.link-card__desc {
+._13weebvc {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -128,7 +147,7 @@
   color: var(--rc-text-secondary);
   min-width: 0;
 }
-.link-card__favicon {
+._13weebve {
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;
@@ -136,122 +155,103 @@
   vertical-align: middle;
   margin-right: 0.375rem;
 }
-.link-card__image--poster {
-  width: 6.25rem !important;
-  height: auto !important;
-  min-height: 8.75rem;
-  aspect-ratio: 2 / 3;
-  align-self: stretch;
-}
-.link-card__image--poster-md {
-  width: 3.5rem !important;
-  height: 5rem !important;
-  aspect-ratio: auto;
-  align-self: flex-start;
-}
-.link-card__image--poster-sm {
-  width: 3.5rem !important;
-  height: 3.5rem !important;
-  aspect-ratio: auto;
-  align-self: flex-start;
-}
-.link-card--reversed {
+._13weebvf {
   width: 100% !important;
   height: auto !important;
   padding: 0;
 }
-.link-card--reversed .link-card__image {
+._13weebvf ._13weebv3 {
   border-radius: 0;
 }
-.link-card--reversed .link-card__image::after {
+._13weebvf ._13weebv3::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to right, transparent 60%, var(--rc-bg-secondary));
   pointer-events: none;
 }
-.link-card--reversed .link-card__content {
+._13weebvf ._13weebv8 {
   padding: 1rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-.link-card--wide {
+._13weebvg {
   width: 100%;
   max-width: 40rem;
 }
-.link-card--full {
+._13weebvh {
   width: 100%;
 }
-.link-card--media {
+._13weebvi {
   width: 100%;
 }
-.link-card--media .link-card__desc {
+._13weebvi ._13weebvc {
   -webkit-line-clamp: 4;
 }
-.link-card--github {
+._13weebvj {
   width: 36rem;
 }
-.link-card--academic {
+._13weebvk {
   width: 38rem;
 }
-.link-card--academic .link-card__desc {
+._13weebvk ._13weebvc {
   -webkit-line-clamp: 3;
 }
-.link-card[data-source='gh-repo'] {
+._13weebv0[data-source='gh-repo'] {
   height: 6.25rem;
 }
-.link-card[data-source='gh-commit'], .link-card[data-source='gh-pr'], .link-card[data-source='gh-issue'], .link-card[data-source='gh-discussion'] {
+._13weebv0[data-source='gh-commit'], ._13weebv0[data-source='gh-pr'], ._13weebv0[data-source='gh-issue'], ._13weebv0[data-source='gh-discussion'] {
   height: 5rem;
 }
-.link-card[data-source='leetcode'] {
+._13weebv0[data-source='leetcode'] {
   height: 5.25rem;
 }
-.link-card[data-source='arxiv'] {
+._13weebv0[data-source='arxiv'] {
   height: 6rem;
 }
-.link-card[data-source='netease-music-song'], .link-card[data-source='qq-music-song'] {
+._13weebv0[data-source='netease-music-song'], ._13weebv0[data-source='qq-music-song'] {
   height: 5.75rem;
 }
-.link-card--skeleton {
+._13weebvl {
   animation-play-state: paused;
 }
-.link-card--skeleton .link-card__title-text {
+._13weebvl ._13weebva {
   width: 8rem;
   height: 1.25rem;
   border-radius: 0.375rem;
   background-color: var(--rc-border);
 }
-.link-card--skeleton .link-card__desc {
+._13weebvl ._13weebvc {
   width: 100%;
   margin-top: 0.5rem;
   height: 0.875rem;
   border-radius: 0.375rem;
   background-color: var(--rc-border);
 }
-.link-card--skeleton .link-card__desc-2 {
+._13weebvl ._13weebvd {
   width: 80%;
 }
-.link-card--skeleton .link-card__image {
+._13weebvl ._13weebv3 {
   background-color: var(--rc-border);
 }
-.link-card--skeleton .link-card__title-text, .link-card--skeleton .link-card__desc, .link-card--skeleton .link-card__image {
-  animation: _13weebv0 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+._13weebvl ._13weebva, ._13weebvl ._13weebvc, ._13weebvl ._13weebv3 {
+  animation: _13weebvm 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
-.link-card--skeleton.link-card--error {
+._13weebvl._13weebvn {
   background-color: color-mix(in srgb, var(--rc-alert-caution) 12%, transparent) !important;
 }
-.link-card--skeleton.link-card--error .link-card__title-text, .link-card--skeleton.link-card--error .link-card__desc, .link-card--skeleton.link-card--error .link-card__image {
+._13weebvl._13weebvn ._13weebva, ._13weebvl._13weebvn ._13weebvc, ._13weebvl._13weebvn ._13weebv3 {
   background-color: color-mix(in srgb, var(--rc-alert-caution) 47%, transparent);
   color: transparent;
 }
-.link-card--skeleton.link-card--error .link-card__image {
+._13weebvl._13weebvn ._13weebv3 {
   background-image: none !important;
 }
-.rich-link-card-edit-wrapper {
+._13weebvo {
   display: inline;
 }
-.rich-link-card-edit-panel {
+._13weebvp {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -262,7 +262,7 @@
   border-color: var(--rc-border);
   color: var(--rc-text);
 }
-.rich-link-card-edit-url-row {
+._13weebvq {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -271,11 +271,11 @@
   border-radius: var(--rc-radius-md);
   min-width: 0;
 }
-.rich-link-card-edit-link-icon {
+._13weebvr {
   flex-shrink: 0;
   color: var(--rc-text-secondary);
 }
-.rich-link-card-edit-url-text {
+._13weebvs {
   flex: 1;
   color: var(--rc-text);
   font-family: var(--rc-font-mono);
@@ -285,7 +285,7 @@
   white-space: nowrap;
   min-width: 0;
 }
-.rich-link-card-edit-input {
+._13weebvt {
   flex: 1;
   appearance: none;
   border: none;
@@ -297,12 +297,12 @@
   outline: none;
   min-width: 0;
 }
-.rich-link-card-edit-actions {
+._13weebvu {
   display: flex;
   align-items: center;
   gap: 4px;
 }
-.rich-link-card-edit-action-btn {
+._13weebvv {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -318,14 +318,14 @@
   transition: color 0.15s ease, background-color 0.15s ease;
   white-space: nowrap;
 }
-.rich-link-card-edit-action-btn:hover {
+._13weebvv:hover {
   background-color: var(--rc-bg-secondary);
 }
-.rich-link-card-edit-action-btn--end {
+._13weebvw {
   margin-left: auto;
 }
 @media (max-width: 640px) {
-  .link-card--github {
+  ._13weebvj {
     width: 100%;
   }
 }

package/dist/styles.css.d.ts

@@ -1,2 +1,82 @@
-export {};
+export declare const semanticClassNames: {
+    readonly card: "link-card";
+    readonly cardShortDesc: "link-card--short-desc";
+    readonly cardSkeleton: "link-card--skeleton";
+    readonly cardError: "link-card--error";
+    readonly cardReversed: "link-card--reversed";
+    readonly cardWide: "link-card--wide";
+    readonly cardFull: "link-card--full";
+    readonly cardMedia: "link-card--media";
+    readonly cardGithub: "link-card--github";
+    readonly cardAcademic: "link-card--academic";
+    readonly bg: "link-card__bg";
+    readonly image: "link-card__image";
+    readonly imagePoster: "link-card__image--poster";
+    readonly imagePosterMd: "link-card__image--poster-md";
+    readonly imagePosterSm: "link-card__image--poster-sm";
+    readonly icon: "link-card__icon";
+    readonly content: "link-card__content";
+    readonly title: "link-card__title";
+    readonly titleText: "link-card__title-text";
+    readonly external: "link-card__external";
+    readonly desc: "link-card__desc";
+    readonly desc2: "link-card__desc-2";
+    readonly favicon: "link-card__favicon";
+    readonly editWrapper: "rich-link-card-edit-wrapper";
+    readonly editPanel: "rich-link-card-edit-panel";
+    readonly editUrlRow: "rich-link-card-edit-url-row";
+    readonly editLinkIcon: "rich-link-card-edit-link-icon";
+    readonly editUrlText: "rich-link-card-edit-url-text";
+    readonly editInput: "rich-link-card-edit-input";
+    readonly editActions: "rich-link-card-edit-actions";
+    readonly editActionButton: "rich-link-card-edit-action-btn";
+    readonly editActionButtonEnd: "rich-link-card-edit-action-btn--end";
+};
+export declare const card: string;
+export declare const cardShortDesc: string;
+export declare const bg: string;
+export declare const image: string;
+export declare const imagePoster: string;
+export declare const imagePosterMd: string;
+export declare const imagePosterSm: string;
+export declare const icon: string;
+export declare const content: string;
+export declare const title: string;
+export declare const titleText: string;
+export declare const external: string;
+export declare const desc: string;
+export declare const desc2: string;
+export declare const favicon: string;
+export declare const cardReversed: string;
+export declare const cardWide: string;
+export declare const cardFull: string;
+export declare const cardMedia: string;
+export declare const cardGithub: string;
+export declare const cardAcademic: string;
+export declare const cardSkeleton: string;
+export declare const cardError: string;
+export declare const editWrapper: string;
+export declare const editPanel: string;
+export declare const editUrlRow: string;
+export declare const editLinkIcon: string;
+export declare const editUrlText: string;
+export declare const editInput: string;
+export declare const editActions: string;
+export declare const editActionButton: string;
+export declare const editActionButtonEnd: string;
+export declare const typeCardModifier: {
+    readonly media: string;
+    readonly github: string;
+    readonly academic: string;
+    readonly wide: string;
+    readonly full: string;
+};
+export declare const semanticTypeClassNames: {
+    readonly media: "link-card--media";
+    readonly github: "link-card--github";
+    readonly academic: "link-card--academic";
+    readonly wide: "link-card--wide";
+    readonly full: "link-card--full";
+};
+export declare const semanticClassToStyle: Record<string, 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":"AAGA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCrB,CAAA;AAEV,eAAO,MAAM,IAAI,QA2Bf,CAAA;AAEF,eAAO,MAAM,aAAa,QAExB,CAAA;AAKF,eAAO,MAAM,EAAE,QAKb,CAAA;AAEF,eAAO,MAAM,KAAK,QAWhB,CAAA;AAEF,eAAO,MAAM,WAAW,QAMtB,CAAA;AAEF,eAAO,MAAM,aAAa,QAKxB,CAAA;AAEF,eAAO,MAAM,aAAa,QAKxB,CAAA;AAEF,eAAO,MAAM,IAAI,QAUf,CAAA;AAcF,eAAO,MAAM,OAAO,QAKlB,CAAA;AAEF,eAAO,MAAM,KAAK,QAKhB,CAAA;AAEF,eAAO,MAAM,SAAS,QAWpB,CAAA;AAEF,eAAO,MAAM,QAAQ,QAanB,CAAA;AAEF,eAAO,MAAM,IAAI,QAWf,CAAA;AAEF,eAAO,MAAM,KAAK,QAAY,CAAA;AAE9B,eAAO,MAAM,OAAO,QAOlB,CAAA;AAEF,eAAO,MAAM,YAAY,QAIvB,CAAA;AAmBF,eAAO,MAAM,QAAQ,QAA8C,CAAA;AACnE,eAAO,MAAM,QAAQ,QAA2B,CAAA;AAChD,eAAO,MAAM,SAAS,QAA2B,CAAA;AAGjD,eAAO,MAAM,UAAU,QAGrB,CAAA;AAEF,eAAO,MAAM,YAAY,QAA4B,CAAA;AAerD,eAAO,MAAM,YAAY,QAA0C,CAAA;AAmCnE,eAAO,MAAM,SAAS,QAAY,CAAA;AAmBlC,eAAO,MAAM,WAAW,QAEtB,CAAA;AAEF,eAAO,MAAM,SAAS,QAUpB,CAAA;AAEF,eAAO,MAAM,UAAU,QAQrB,CAAA;AAEF,eAAO,MAAM,YAAY,QAGvB,CAAA;AAEF,eAAO,MAAM,WAAW,QAStB,CAAA;AAEF,eAAO,MAAM,SAAS,QAWpB,CAAA;AAEF,eAAO,MAAM,WAAW,QAItB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAoB3B,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAE9B,CAAA;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAA;AAEV,eAAO,MAAM,sBAAsB;;;;;;CAMzB,CAAA;AAEV,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAavD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-renderer-linkcard",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -17,9 +17,9 @@
   "dependencies": {
     "lucide-react": "^0.574.0",
     "react-intersection-observer": "^9.15.1",
-    "@haklex/rich-editor-ui": "0.0.4",
-    "@haklex/rich-style-token": "0.0.4",
-    "@haklex/rich-editor": "0.0.4"
+    "@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",