sitero 0.2.0 → 0.4.0

package/dist/src/cms/client/interfaces/components/ui/buttons/{button.js → link-button.js}

@@ -1,18 +1,16 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useRouter } from 'next/navigation';
+import { jsxs } from 'react/jsx-runtime';
+import Link from 'next/link';
 import { createElement } from 'react';
-import '@radix-ui/react-avatar';
 import 'mime-types';
 import 'sitero-domain';
 import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
-import 'clsx';
-import 'tailwind-merge';
-import 'zod';
+import { cn } from '../../../../../../shared/utils/cn.js';
+import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
-import { Button as Button$1 } from '../../shadcn/button.js';
+import { buttonVariants } from '../../shadcn/button.js';
 import '@radix-ui/react-collapsible';
 import '@radix-ui/react-dialog';
 import 'lucide-react';
@@ -25,43 +23,42 @@ import '@radix-ui/react-separator';
 import '../../shadcn/sidebar/sidebar.js';
 import 'next-themes';
 import 'sonner';
-import { Spinner } from '../../shadcn/spinner.js';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
 
-function Button({
+function LinkButton({
   icon,
-  href,
-  openNewTab = false,
-  // ui states
   isDisabled = false,
-  isLoading = false,
-  // base
+  className,
+  onClick,
   children,
+  variant,
+  size,
   ...props
 }) {
-  const router = useRouter();
-  const handleClick = () => {
-    if (!href) return;
-    if (openNewTab) {
-      window.open(href, "_blank");
-    } else {
-      router.push(href);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    Button$1,
+  return /* @__PURE__ */ jsxs(
+    Link,
     {
-      type: props.type ?? "button",
-      disabled: isDisabled || isLoading,
-      onClick: props.onClick ?? handleClick,
       ...props,
-      children: isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      className: cn(
+        buttonVariants({ variant, size, className }),
+        "aria-disabled:pointer-events-none aria-disabled:opacity-50"
+      ),
+      "aria-disabled": isDisabled || void 0,
+      tabIndex: isDisabled ? -1 : props.tabIndex,
+      onClick: (event) => {
+        if (isDisabled) {
+          event.preventDefault();
+          return;
+        }
+        onClick?.(event);
+      },
+      children: [
         icon && createElement(icon),
         children
-      ] })
+      ]
     }
   );
 }
 
-export { Button };
+export { LinkButton };

package/dist/src/cms/client/interfaces/components/ui/buttons/return-button.js

@@ -10,11 +10,10 @@ import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
-import 'zod';
 import '../../../../../../constants/paths/redirect.js';
 import '../../../../../../constants/cms-locale.js';
 import { useParentPathname } from '../../../../applications/ui/use-parent-pathname.js';
-import { Button } from './button.js';
+import { ActionButton } from './action-button.js';
 
 function ReturnButton({
   icon,
@@ -29,12 +28,15 @@ function ReturnButton({
   // base
   className,
   children,
+  onClick,
   ...props
 }) {
   const { t } = useTranslator();
   const router = useRouter();
   const parentPath = useParentPathname();
-  const handelClick = () => {
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
     if (useConfirm) {
       if (!confirm(t("ui.dialog.confirm.text"))) return;
     }
@@ -50,15 +52,15 @@ function ReturnButton({
     router.back();
   };
   return /* @__PURE__ */ jsx(
-    Button,
+    ActionButton,
     {
       variant: "outline",
       size: "lg",
       icon: useIcon ? icon || Undo2 : void 0,
-      onClick: handelClick,
-      className: cn("max-lg:w-10", className),
+      onClick: handleClick,
+      className: cn(useIcon && "max-lg:w-10", className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsx("span", { className: "max-lg:hidden", children: t("ui.return.text") })
+      children: children ?? /* @__PURE__ */ jsx("span", { className: cn(useIcon && "max-lg:sr-only"), children: t("ui.return.text") })
     }
   );
 }

package/dist/src/cms/client/interfaces/components/ui/cards/action-buttons-card.js

@@ -10,7 +10,6 @@ import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
 import { Card } from '../../shadcn/card.js';
@@ -28,7 +27,8 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import { Button } from '../buttons/button.js';
+import { ActionButton } from '../buttons/action-button.js';
+import 'next/link';
 import { ReturnButton } from '../buttons/return-button.js';
 
 function ActionButtonsCard({
@@ -41,6 +41,7 @@ function ActionButtonsCard({
   isInitializing = false
 }) {
   const { t } = useTranslator();
+  const isBlocked = isInitializing || isProcessing;
   let type = "submit";
   let variant = "success";
   let children = t("ui.create.text");
@@ -60,28 +61,32 @@ function ActionButtonsCard({
     /* @__PURE__ */ jsx(
       ReturnButton,
       {
-        type: "button",
         size: "lg",
-        isDisabled: isInitializing,
         useConfirm: true,
         useIcon: false,
         replaceParent: true,
         className: "min-w-[128px]",
         ...cancelButtonProps,
-        children: t("ui.cancel.text")
+        type: "button",
+        isDisabled: isBlocked || cancelButtonProps?.isDisabled,
+        onClick: cancelButtonProps?.onClick ? (event) => {
+          cancelButtonProps.onClick?.(event);
+          event.preventDefault();
+        } : void 0,
+        children: cancelButtonProps?.children ?? t("ui.cancel.text")
       }
     ),
     /* @__PURE__ */ jsx(
-      Button,
+      ActionButton,
       {
         type,
         size: "lg",
         variant,
-        isLoading: isProcessing,
-        isDisabled: isInitializing,
         className: "min-w-[126px]",
         ...actionButtonProps,
-        children
+        isLoading: isProcessing || actionButtonProps?.isLoading,
+        isDisabled: isBlocked || actionButtonProps?.isDisabled,
+        children: actionButtonProps?.children ?? children
       }
     )
   ] }) });

package/dist/src/cms/client/interfaces/components/ui/cards/feature-card.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Link from 'next/link';
 import 'mime-types';
 import 'sitero-domain';
@@ -7,7 +7,6 @@ import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
-import 'zod';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -33,29 +32,33 @@ function FeatureCard({
   text,
   icon
 }) {
+  const surface = /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "max-lg:size-36 lg:size-48",
+        "bg-card/75",
+        href && "hover:bg-accent/50 transition-colors duration-100",
+        "overflow-hidden",
+        "flex flex-col items-center justify-center gap-0",
+        "py-12"
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "flex-center flex-1 [&_svg]:size-5", children: icon }),
+        /* @__PURE__ */ jsx("div", { className: cn("flex-1", "flex-center"), children: /* @__PURE__ */ jsx("p", { className: "text-center", children: text }) })
+      ]
+    }
+  );
+  if (!href) return /* @__PURE__ */ jsx("div", { className: cn("w-fit", className), children: surface });
   return /* @__PURE__ */ jsx(
     Link,
     {
       href,
-      className: cn(className, "w-fit", !href && "pointer-events-none"),
-      children: /* @__PURE__ */ jsxs(
-        Card,
-        {
-          className: cn(
-            "max-lg:size-36 lg:size-48",
-            "bg-card/75",
-            "hover:bg-accent/50 transition-colors duration-100",
-            // button-hover like
-            "overflow-hidden",
-            "flex flex-col items-center justify-center gap-0",
-            "py-12"
-          ),
-          children: [
-            icon && /* @__PURE__ */ jsx("div", { className: "flex-center flex-1 [&_svg]:size-5", children: icon }),
-            /* @__PURE__ */ jsx("div", { className: cn("flex-1", "flex-center"), children: /* @__PURE__ */ jsx("p", { className: "text-center", children: text }) })
-          ]
-        }
-      )
+      className: cn(
+        "focus-visible:outline-ring block w-fit rounded-xl focus-visible:outline-2",
+        className
+      ),
+      children: surface
     }
   );
 }

package/dist/src/cms/client/interfaces/components/ui/cards/resource-card.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Link from 'next/link';
+import '../../../../../../constants/paths/redirect.js';
+import { NEW_TAB_REL, NEW_TAB_TARGET } from '../../../../../../constants/anchor.js';
+import '../../../../../../constants/cms-locale.js';
+import 'mime-types';
+import 'sitero-domain';
+import 'react';
+import 'ua-parser-js';
+import '../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import { cn } from '../../../../../../shared/utils/cn.js';
+import '@radix-ui/react-avatar';
+import '../../shadcn/badge.js';
+import '../../shadcn/button.js';
+import { Card } from '../../shadcn/card.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import 'lucide-react';
+import '@radix-ui/react-dropdown-menu';
+import '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import { Badge } from '../display/badge.js';
+import { Tick } from '../features/tick.js';
+
+function ResourceCard({
+  interaction = { type: "static" },
+  identity,
+  state,
+  media,
+  title,
+  secondary,
+  className,
+  style
+}) {
+  const isInteractive = interaction.type !== "static";
+  const isSelected = interaction.type === "select" ? interaction.isSelected : false;
+  const surface = /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "relative flex size-full flex-col gap-0 overflow-hidden p-0 text-start",
+        isInteractive && "hover:bg-accent/50 transition-colors",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex h-8 items-center justify-between border-b px-4", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground [&_svg]:size-3.5", children: identity.icon }),
+          identity.badge && /* @__PURE__ */ jsx(Badge, { className: "absolute left-1/2 h-5.5 w-auto max-w-[calc(100%-5rem)] min-w-0 -translate-x-1/2 px-3", children: identity.badge }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-3.5" })
+        ] }),
+        state && /* @__PURE__ */ jsx("div", { className: "flex h-8 items-center border-b px-4 [&_svg]:size-3.5", children: state }),
+        media && /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: media }),
+        (title || secondary) && /* @__PURE__ */ jsxs("div", { className: "mt-auto", children: [
+          title && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex h-9 items-center px-4 text-sm",
+                media && "border-t",
+                secondary && "border-b"
+              ),
+              children: /* @__PURE__ */ jsx("span", { className: "w-full truncate", children: title })
+            }
+          ),
+          secondary && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex h-8 items-center px-4 text-xs", children: /* @__PURE__ */ jsx("div", { className: "w-full min-w-0 truncate", children: secondary }) })
+        ] }),
+        interaction.type === "select" && /* @__PURE__ */ jsx(
+          Tick,
+          {
+            isPicked: isSelected,
+            className: "absolute top-1 right-1 [&_svg]:size-5"
+          }
+        )
+      ]
+    }
+  );
+  if (interaction.type === "navigate") {
+    return /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: interaction.href,
+        target: interaction.openNewTab ? NEW_TAB_TARGET : void 0,
+        rel: interaction.openNewTab ? NEW_TAB_REL : void 0,
+        className: "focus-visible:outline-ring block rounded-xl focus-visible:outline-2",
+        children: surface
+      }
+    );
+  }
+  if (interaction.type === "select") {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "focus-visible:outline-ring block rounded-xl text-left focus-visible:outline-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-pressed": isSelected,
+        disabled: interaction.isDisabled,
+        onClick: interaction.onSelect,
+        children: surface
+      }
+    );
+  }
+  return surface;
+}
+
+export { ResourceCard };

package/dist/src/cms/client/interfaces/components/ui/display/array-list.js

@@ -1,7 +1,8 @@
 "use client";
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
 import Link from 'next/link';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import '../../../../../../constants/paths/redirect.js';
 import { NEW_TAB_REL, NEW_TAB_TARGET } from '../../../../../../constants/anchor.js';
 import '../../../../../../constants/cms-locale.js';
@@ -11,7 +12,6 @@ import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
-import 'zod';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -30,40 +30,63 @@ import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
 import { FieldBody } from '../form/field-body.js';
-import 'intor/react';
+import '../inputs/input.js';
+import '../inputs/textarea.js';
+import { NoData } from './no-data.js';
 
-function ArrayList({ values, isLink, isLoading }) {
+function ArrayList({
+  values,
+  isLink,
+  isLoading,
+  isDisabled
+}) {
+  const { t } = useTranslator();
+  const listId = useId();
   const [expandedIndex, setExpandedIndex] = useState(null);
   const toggle = (i) => setExpandedIndex((p) => p === i ? null : i);
   const items = values?.filter((v) => typeof v === "string") ?? [];
+  if (isLoading) return /* @__PURE__ */ jsx(FieldBody, { isLoading: true });
   if (items.length === 0) return /* @__PURE__ */ jsx(FieldBody, { isEmpty: true });
-  return /* @__PURE__ */ jsx(Fragment, { children: items.map((value, index) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: items.map((value, index) => {
     const expanded = expandedIndex === index;
     return /* @__PURE__ */ jsxs(
       FieldBody,
       {
         isLoading,
-        className: cn(expanded ? "cursor-zoom-out" : "cursor-zoom-in"),
-        onClick: () => toggle(index),
+        isDisabled,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex-center absolute top-0 left-0 z-10 h-full", children: [
-            /* @__PURE__ */ jsx("span", { className: "min-w-10 px-2 text-center text-sm opacity-50", children: index + 1 }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: isDisabled,
+                "aria-expanded": expanded,
+                "aria-controls": `${listId}-${index}`,
+                "aria-label": `${t(expanded ? "ui.list.collapse.text" : "ui.list.expand.text")} ${index + 1}`,
+                title: t(
+                  expanded ? "ui.list.collapse.text" : "ui.list.expand.text"
+                ),
+                onClick: () => toggle(index),
+                className: "focus-visible:outline-ring text-muted-foreground h-full min-w-10 px-2 text-center text-sm focus-visible:outline-2 disabled:cursor-not-allowed",
+                children: index + 1
+              }
+            ),
             /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "py-2" })
           ] }),
-          isLink ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { id: `${listId}-${index}`, className: "ml-11 min-w-0 flex-1", children: !value.trim() ? /* @__PURE__ */ jsx(NoData, {}) : isLink ? /* @__PURE__ */ jsx(
             Link,
             {
               href: value,
               target: NEW_TAB_TARGET,
               rel: NEW_TAB_REL,
               className: cn(
-                "ml-11 text-blue-500/80 underline underline-offset-2",
+                "w-fit text-blue-500/80 underline underline-offset-2",
                 !expanded && "line-clamp-1"
               ),
-              onClick: (e) => e.stopPropagation(),
               children: value
             }
-          ) : /* @__PURE__ */ jsx("p", { className: cn("ml-11", !expanded && "line-clamp-1"), children: value })
+          ) : /* @__PURE__ */ jsx("p", { className: cn(!expanded && "line-clamp-1"), children: value }) })
         ]
       },
       `${value}-${index}`

package/dist/src/cms/client/interfaces/components/ui/display/badge.js

@@ -1,4 +1,6 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
 import 'mime-types';
 import 'sitero-domain';
 import 'react';
@@ -6,7 +8,6 @@ import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
-import 'zod';
 import '@radix-ui/react-avatar';
 import { Badge as Badge$1 } from '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -35,13 +36,15 @@ function Badge({
   children,
   ...props
 }) {
+  const { t } = useTranslator();
   return /* @__PURE__ */ jsx(
     Badge$1,
     {
       variant,
       className: cn("h-6 w-20", className),
       ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "truncate", children: isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : children })
+      "aria-busy": isLoading || props["aria-busy"],
+      children: /* @__PURE__ */ jsx("span", { className: "truncate", children: isLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": t("ui.loading.text") }) : children })
     }
   );
 }

package/dist/src/cms/client/interfaces/components/ui/display/{html-display.js → html-display/helpers.js}

@@ -1,13 +1,3 @@
-import { jsx } from 'react/jsx-runtime';
-import 'mime-types';
-import 'sitero-domain';
-import 'react';
-import 'ua-parser-js';
-import '../../../../../../shared/client/react-query/client.js';
-import '@tanstack/react-query';
-import { cn } from '../../../../../../shared/utils/cn.js';
-import 'zod';
-
 const FIGURE_OEMBED_PATTERN = /<figure\b[^>]*\bclass=(["'])[^"']*\bmedia\b[^"']*\1[^>]*>\s*<oembed\b[^>]*\burl=(["'])(.*?)\2[^>]*>\s*<\/oembed>\s*<\/figure>/gi;
 const YOUTUBE_VIDEO_ID_PATTERN = /^[\w-]{11}$/;
 const HTML_ESCAPE_MAP = {
@@ -16,32 +6,43 @@ const HTML_ESCAPE_MAP = {
   "<": "&lt;",
   ">": "&gt;"
 };
-function HtmlDisplay({
-  html = "",
-  textOnly = false,
-  className = "",
-  ...props
-}) {
-  const content = textOnly ? toPlainText(html) : normalizeHtml(html ?? "");
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        className,
-        "w-full",
-        "ck ck-content"
-        // CKEditor styles prefix: .ck (ckeditor.css)
-      ),
-      dangerouslySetInnerHTML: { __html: content },
-      ...props
+function extractSummaryText(html) {
+  if (!html) return "";
+  const text = html.replace(/<!--[^]*?(?:-->|$)/g, "").replace(FIGURE_OEMBED_PATTERN, " ").replace(
+    /<(script|style|template|iframe|video|audio|picture|oembed)\b(?:"[^"]*"|'[^']*'|[^'">])*>[^]*?(?:<\/\1\s*>|$)/gi,
+    " "
+  ).replace(/<(img|source)\b(?:"[^"]*"|'[^']*'|[^'">])*>/gi, " ").replace(/\r?\n|\r/g, " ").replace(/<br\s*\/?>/gi, "\n").replace(
+    /<\/?(?:p|div|section|article|header|footer|blockquote|pre|li|ul|ol|h[1-6]|tr|td|th|figure|figcaption|hr)\b(?:"[^"]*"|'[^']*'|[^'">])*>/gi,
+    "\n"
+  ).replace(/<\/?[a-z][\w:-]*\b(?:"[^"]*"|'[^']*'|[^'">])*>/gi, "");
+  return decodeSummaryEntities(text).split("\n").map((line) => line.replace(/\s+/g, " ").trim()).filter(Boolean).join("\n");
+}
+const SUMMARY_ENTITIES = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  nbsp: " "
+};
+function decodeSummaryEntities(text) {
+  return text.replace(
+    /&(#x[\da-f]+|#\d+|[a-z][\da-z]*);/gi,
+    (entity, name) => {
+      if (!name.startsWith("#"))
+        return Object.hasOwn(SUMMARY_ENTITIES, name) ? SUMMARY_ENTITIES[name] : entity;
+      const isHex = name[1]?.toLowerCase() === "x";
+      const codePoint = Number.parseInt(
+        name.slice(isHex ? 2 : 1),
+        isHex ? 16 : 10
+      );
+      if (codePoint === 0 || codePoint > 1114111 || codePoint >= 55296 && codePoint <= 57343)
+        return "\uFFFD";
+      return String.fromCodePoint(codePoint);
     }
   );
 }
-function toPlainText(html) {
-  if (!html) return "";
-  return removeMediaContent(html).replace(/<\/(p|div|li|h[1-6]|tr|td)>/gi, " ").replace(/<br\s*\/?>/gi, " ").replace(/<[^>]+>/g, " ").replace(/\r?\n|\r/g, " ").replace(/\s{2,}/g, " ").replace(/\s+([，。！？；：、])/g, "$1").trim();
-}
-function normalizeHtml(html) {
+function transformMediaEmbeds(html) {
   if (!html) return "";
   return html.replace(
     FIGURE_OEMBED_PATTERN,
@@ -51,9 +52,6 @@ function normalizeHtml(html) {
     }
   );
 }
-function removeMediaContent(html) {
-  return html.replace(FIGURE_OEMBED_PATTERN, " ").replace(/<iframe\b[^>]*>[\s\S]*?<\/iframe>/gi, " ").replace(/<video\b[^>]*>[\s\S]*?<\/video>/gi, " ").replace(/<picture\b[^>]*>[\s\S]*?<\/picture>/gi, " ").replace(/<img\b[^>]*>/gi, " ").replace(/<source\b[^>]*>/gi, " ");
-}
 function createEmbedHtml(rawUrl) {
   const embedUrl = getYouTubeEmbedUrl(rawUrl);
   if (!embedUrl) return null;
@@ -127,4 +125,4 @@ function escapeHtmlText(value) {
   );
 }
 
-export { HtmlDisplay };
+export { extractSummaryText, transformMediaEmbeds };

package/dist/src/cms/client/interfaces/components/ui/display/html-display/html-display.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import 'mime-types';
+import 'sitero-domain';
+import 'react';
+import 'ua-parser-js';
+import '../../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import { cn } from '../../../../../../../shared/utils/cn.js';
+import { transformMediaEmbeds } from './helpers.js';
+
+function HtmlDisplay({
+  html = "",
+  className = "",
+  ...props
+}) {
+  const content = transformMediaEmbeds(html ?? "");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        className,
+        "w-full",
+        "ck ck-content"
+        // CKEditor styles prefix: .ck (ckeditor.css)
+      ),
+      dangerouslySetInnerHTML: { __html: content },
+      ...props
+    }
+  );
+}
+
+export { HtmlDisplay };

package/dist/src/cms/client/interfaces/components/ui/display/no-data.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import 'mime-types';
+import 'sitero-domain';
+import 'react';
+import 'ua-parser-js';
+import '../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import { cn } from '../../../../../../shared/utils/cn.js';
+
+function NoData({ className, ...props }) {
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("text-muted-foreground opacity-50", className),
+      ...props,
+      children: t("ui.no-data.text")
+    }
+  );
+}
+
+export { NoData };