@pollinations/ui 0.1.0-alpha.1 → 0.1.0-alpha.11

package/dist/markdown.js

@@ -0,0 +1,807 @@
+// src/compositions/Markdown.tsx
+import { isValidElement } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  prefix: "polli",
+  extend: { theme: { text: ["micro"] } }
+});
+function cn(...inputs) {
+  return twMerge(clsx(...inputs));
+}
+
+// src/lib/link.ts
+function isExternalHref(href, origin = globalThis.location?.origin) {
+  if (typeof href !== "string" || !/^(https?:)?\/\//i.test(href))
+    return false;
+  if (!origin) return true;
+  try {
+    return new URL(href, origin).origin !== origin;
+  } catch {
+    return false;
+  }
+}
+
+// src/primitives/icons/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var strokeProps = {
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function CheckIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      ...strokeProps,
+      strokeWidth: 2.5,
+      ...props,
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function ClipboardIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+  ] });
+}
+function ExternalLinkIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx("path", { d: "M7 17 17 7M9 7h8v8" }) });
+}
+
+// src/primitives/InlineLink.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function InlineLink({
+  as,
+  external,
+  showIcon = true,
+  size = "inherit",
+  tone = "accent",
+  className,
+  children,
+  ...linkProps
+}) {
+  const Component = as || "a";
+  const isExternal = external ?? isExternalHref(linkProps.href);
+  return /* @__PURE__ */ jsxs2(
+    Component,
+    {
+      target: isExternal && as !== "button" ? "_blank" : void 0,
+      rel: isExternal && as !== "button" ? "noopener noreferrer" : void 0,
+      className: ["polli-link", className].filter(Boolean).join(" "),
+      "data-size": size,
+      "data-tone": tone,
+      ...linkProps,
+      children: [
+        children,
+        showIcon && isExternal && /* @__PURE__ */ jsx2(
+          ExternalLinkIcon,
+          {
+            "aria-hidden": "true",
+            className: "polli-link-external-icon"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/compositions/CopyButton.tsx
+import {
+  useEffect as useEffect2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+
+// src/primitives/Button.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var pillSizes = {
+  icon: "polli:h-12 polli:w-12 polli:p-0",
+  xs: "polli:h-5 polli:px-1.5 polli:py-0 polli:text-[11px] polli:leading-none",
+  sm: "polli:min-h-7 polli:px-2 polli:pt-0.5 polli:pb-1",
+  md: "polli:min-h-9 polli:px-4 polli:pt-1.5 polli:pb-2",
+  lg: "polli:min-h-12 polli:px-6 polli:py-3 polli:text-base"
+};
+var raisedSizes = {
+  icon: "polli:h-12 polli:w-12 polli:p-0",
+  xs: "polli:px-2 polli:py-1 polli:text-xs",
+  sm: "polli:px-4 polli:py-2 polli:text-sm",
+  md: "polli:px-7 polli:py-3.5 polli:text-base",
+  lg: "polli:px-8 polli:py-4 polli:text-lg"
+};
+var appearanceClasses = {
+  pill: "polli:rounded-full",
+  raised: "polli:rounded-xl polli:border-r-[3px] polli:border-b-[3px] polli:border-solid polli:border-theme-text-strong/20 polli:hover:border-theme-text-strong/45"
+};
+var themeClasses = "polli:bg-theme-bg-active polli:text-theme-text-strong polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover polli:transition-colors";
+var outlined = "polli:border polli:border-theme-text-soft polli:bg-theme-bg-active/30 polli:text-theme-text-strong polli:transition-colors polli:[.dark_&]:bg-transparent";
+var intentClasses = {
+  brand: `${outlined} polli:hover:bg-theme-bg-active/50 polli:[.dark_&]:hover:bg-theme-text-soft/10`,
+  commit: `${outlined} polli:hover:border-theme-bg-active polli:hover:bg-theme-bg-active polli:focus-visible:border-theme-bg-active polli:focus-visible:bg-theme-bg-active polli:[.dark_&]:hover:bg-theme-bg-active polli:[.dark_&]:focus-visible:bg-theme-bg-active`,
+  danger: "polli:border polli:border-intent-danger-text polli:bg-intent-danger-bg-light polli:text-intent-danger-text polli:hover:bg-intent-danger-bg-hover polli:focus-visible:bg-intent-danger-bg-hover polli:transition-colors polli:[.dark_&]:bg-transparent polli:[.dark_&]:hover:bg-intent-danger-bg-hover polli:[.dark_&]:focus-visible:bg-intent-danger-bg-hover",
+  info: "polli:bg-intent-info-bg-light polli:text-intent-info-text polli:hover:bg-intent-info-bg-hover polli:transition-colors",
+  // A quiet white pill on the desk, like the colour toggle; hover previews
+  // the accent as the ambient button does.
+  surface: "polli:bg-surface-opaque polli:text-theme-text-strong polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover polli:transition-colors",
+  // Secondary actions never take the accent: one step stronger grey on hover.
+  neutral: "polli:bg-theme-bg-subtle polli:text-theme-text-base polli:hover:bg-theme-text-muted/25 polli:hover:text-theme-text-strong polli:transition-colors"
+};
+var buttonClasses = ({
+  intent,
+  appearance = "pill",
+  size,
+  className,
+  disabled,
+  busy
+}) => {
+  const colorClasses = intent ? intentClasses[intent] : themeClasses;
+  const sizeClasses = appearance === "raised" ? raisedSizes : pillSizes;
+  return cn(
+    "polli-control polli:inline-flex polli:items-center polli:justify-center polli:self-center polli:font-body polli:text-sm polli:font-medium polli:leading-normal polli:box-border polli:border polli:border-transparent",
+    // A busy button is working, not unavailable: it keeps its strength.
+    busy ? "polli:cursor-progress" : disabled ? "polli:opacity-50 polli:cursor-not-allowed" : "polli:hover:filter polli:hover:brightness-105 polli:cursor-pointer",
+    colorClasses,
+    appearanceClasses[appearance],
+    sizeClasses[size || "md"],
+    className
+  );
+};
+function Button({
+  as,
+  children,
+  icon,
+  intent,
+  appearance,
+  size,
+  className,
+  disabled,
+  ...buttonProps
+}) {
+  const Component = as || "button";
+  const isButton = Component === "button";
+  const isAnchor = Component === "a";
+  const buttonType = buttonProps.type;
+  const onClick = buttonProps.onClick;
+  const ariaBusy = buttonProps["aria-busy"];
+  const busy = ariaBusy === true || ariaBusy === "true";
+  const handleClick = disabled ? (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  } : onClick;
+  return /* @__PURE__ */ jsxs3(
+    Component,
+    {
+      ...buttonProps,
+      "data-intent": intent,
+      ...isButton ? { type: buttonType ?? "button", disabled } : {},
+      ...!isButton && disabled ? { "aria-disabled": true, tabIndex: -1 } : {},
+      ...isAnchor && disabled ? { href: void 0 } : {},
+      onClick: handleClick,
+      className: buttonClasses({
+        intent,
+        appearance,
+        size,
+        className,
+        disabled,
+        busy
+      }),
+      children: [
+        icon && /* @__PURE__ */ jsx3(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "polli:mr-2 polli:flex polli:size-4 polli:shrink-0 polli:[&>svg]:size-full",
+            children: busy ? /* @__PURE__ */ jsx3("span", { className: "polli:block polli:size-full polli:animate-spin polli:rounded-full polli:border-2 polli:border-current polli:border-r-transparent polli:motion-reduce:animate-none" }) : icon
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/primitives/Tooltip.tsx
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var TOOLTIP_MAX_WIDTH = 288;
+var TOOLTIP_VIEWPORT_MARGIN = 12;
+var Tooltip = ({
+  children,
+  content,
+  align = "start",
+  ariaLabel,
+  clampToViewport = true,
+  className,
+  maxWidth = TOOLTIP_MAX_WIDTH,
+  onClick,
+  stopClickPropagation = true,
+  style,
+  tapEnabled = false,
+  triggerAs = "button",
+  displayContents = false
+}) => {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({
+    top: 0,
+    left: 0,
+    maxWidth
+  });
+  const triggerRef = useRef(null);
+  const tapPinnedRef = useRef(false);
+  const tooltipId = useId();
+  const closeTooltip = () => {
+    tapPinnedRef.current = false;
+    setShowTooltip(false);
+  };
+  useEffect(() => {
+    if (!showTooltip) return;
+    const dismissOnOutsideTap = (event) => {
+      if (triggerRef.current?.contains(event.target)) return;
+      tapPinnedRef.current = false;
+      setShowTooltip(false);
+    };
+    const dismissOnEscape = (event) => {
+      if (event.key !== "Escape") return;
+      tapPinnedRef.current = false;
+      setShowTooltip(false);
+    };
+    const dismissOnViewportChange = () => {
+      tapPinnedRef.current = false;
+      setShowTooltip(false);
+    };
+    document.addEventListener("pointerdown", dismissOnOutsideTap);
+    document.addEventListener("keydown", dismissOnEscape);
+    window.addEventListener("scroll", dismissOnViewportChange, {
+      capture: true,
+      passive: true
+    });
+    window.addEventListener("resize", dismissOnViewportChange);
+    return () => {
+      document.removeEventListener("pointerdown", dismissOnOutsideTap);
+      document.removeEventListener("keydown", dismissOnEscape);
+      window.removeEventListener("scroll", dismissOnViewportChange, true);
+      window.removeEventListener("resize", dismissOnViewportChange);
+    };
+  }, [showTooltip]);
+  const updateTooltipPosition = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      const availableMaxWidth = Math.min(
+        maxWidth,
+        window.innerWidth - TOOLTIP_VIEWPORT_MARGIN * 2
+      );
+      let left = align === "center" ? rect.left + rect.width / 2 : rect.left;
+      let transform = align === "center" ? "translateX(-50%)" : void 0;
+      if (clampToViewport) {
+        left = Math.min(
+          Math.max(rect.left, TOOLTIP_VIEWPORT_MARGIN),
+          Math.max(
+            TOOLTIP_VIEWPORT_MARGIN,
+            window.innerWidth - availableMaxWidth - TOOLTIP_VIEWPORT_MARGIN
+          )
+        );
+        transform = void 0;
+      }
+      setTooltipPosition({
+        top: rect.bottom + 4,
+        left,
+        maxWidth: availableMaxWidth,
+        transform
+      });
+    }
+  };
+  const triggerClassName = cn(
+    "polli-control polli:relative polli:cursor-help polli:text-left polli:inline-flex polli:items-center",
+    className
+  );
+  const cursorClass = displayContents ? "polli:contents" : "polli:cursor-inherit";
+  const popupClasses = "polli:fixed polli:w-max polli:px-2 polli:py-1 polli:bg-surface-menu polli:text-theme-text-base polli:font-normal polli:leading-snug polli:tracking-normal polli:normal-case polli:not-italic polli:text-xs polli:rounded-md polli:shadow-md polli:z-[130] polli:pointer-events-none polli:transition-opacity polli:whitespace-pre-line polli:break-words";
+  const popupNode = content ? /* @__PURE__ */ jsx4(
+    "span",
+    {
+      id: tooltipId,
+      role: "tooltip",
+      "aria-hidden": !showTooltip,
+      style: {
+        top: tooltipPosition.top,
+        left: tooltipPosition.left,
+        maxWidth: tooltipPosition.maxWidth,
+        transform: tooltipPosition.transform
+      },
+      className: `${showTooltip ? "polli:visible polli:opacity-100" : "polli:invisible polli:opacity-0"} ${popupClasses}`,
+      children: content
+    }
+  ) : null;
+  const tooltipPopup = popupNode && typeof document !== "undefined" ? createPortal(
+    popupNode,
+    triggerRef.current?.closest('[role="dialog"]') ?? document.body
+  ) : popupNode;
+  const contentNode = /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx4("span", { className: cursorClass, children }),
+    tooltipPopup
+  ] });
+  const sharedProps = {
+    "aria-label": ariaLabel,
+    "aria-describedby": content && showTooltip ? tooltipId : void 0,
+    className: triggerClassName,
+    onMouseEnter: () => {
+      updateTooltipPosition();
+      setShowTooltip(true);
+    },
+    onMouseLeave: () => {
+      if (!tapPinnedRef.current) setShowTooltip(false);
+    },
+    onClick: (e) => {
+      if (stopClickPropagation) e.stopPropagation();
+      if (onClick) {
+        onClick();
+      }
+      if (!tapEnabled || !content) return;
+      updateTooltipPosition();
+      if (tapPinnedRef.current) {
+        closeTooltip();
+        return;
+      }
+      tapPinnedRef.current = true;
+      setShowTooltip(true);
+    },
+    onFocus: () => {
+      updateTooltipPosition();
+      setShowTooltip(true);
+    },
+    onBlur: closeTooltip,
+    style
+  };
+  if (triggerAs === "span") {
+    const handleKeyDown = (event) => {
+      if (!tapEnabled || !content) return;
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      updateTooltipPosition();
+      if (tapPinnedRef.current) {
+        closeTooltip();
+        return;
+      }
+      tapPinnedRef.current = true;
+      setShowTooltip(true);
+    };
+    const spanInteractionProps = {
+      ...sharedProps,
+      role: tapEnabled && content ? "button" : void 0,
+      tabIndex: tapEnabled && content ? 0 : void 0,
+      onKeyDown: tapEnabled && content ? handleKeyDown : void 0
+    };
+    return /* @__PURE__ */ jsx4(
+      "span",
+      {
+        ref: (node) => {
+          triggerRef.current = node;
+        },
+        ...spanInteractionProps,
+        children: contentNode
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      ref: (node) => {
+        triggerRef.current = node;
+      },
+      type: "button",
+      "aria-label": ariaLabel,
+      "aria-describedby": content && showTooltip ? tooltipId : void 0,
+      className: triggerClassName,
+      onMouseEnter: sharedProps.onMouseEnter,
+      onMouseLeave: sharedProps.onMouseLeave,
+      onClick: sharedProps.onClick,
+      onFocus: sharedProps.onFocus,
+      onBlur: sharedProps.onBlur,
+      style,
+      children: contentNode
+    }
+  );
+};
+
+// src/compositions/CopyButton.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function CopyButton({
+  value,
+  children,
+  copiedTimeoutMs = 2e3,
+  tooltip = "\u{1F4CB} Click to copy",
+  tooltipAlign,
+  tooltipClampToViewport,
+  tooltipMaxWidth,
+  copiedTooltip = "\u2705 Copied!",
+  tooltipClassName,
+  className,
+  variant = "plain",
+  intent,
+  onCopied,
+  onCopyError,
+  ...buttonProps
+}) {
+  const [copied, setCopied] = useState2(false);
+  const timeoutRef = useRef2(null);
+  useEffect2(
+    () => () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    },
+    []
+  );
+  async function handleCopy(event) {
+    event.stopPropagation();
+    try {
+      const text = typeof value === "function" ? await value() : value;
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      onCopied?.();
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(
+        () => setCopied(false),
+        copiedTimeoutMs
+      );
+    } catch (error) {
+      onCopyError?.(error);
+    }
+  }
+  const Control = variant === "button" ? Button : "button";
+  const button = /* @__PURE__ */ jsx5(
+    Control,
+    {
+      ...buttonProps,
+      ...variant === "button" && intent ? { intent } : {},
+      type: "button",
+      onClick: handleCopy,
+      className: cn(
+        "polli-control",
+        buttonProps.disabled ? "polli:cursor-not-allowed" : "polli:cursor-pointer",
+        typeof className === "function" ? className(copied) : className
+      ),
+      children: typeof children === "function" ? children(copied) : children
+    }
+  );
+  if (tooltip === null) {
+    return button;
+  }
+  return /* @__PURE__ */ jsx5(
+    Tooltip,
+    {
+      triggerAs: "span",
+      content: copied ? copiedTooltip : tooltip,
+      align: tooltipAlign,
+      clampToViewport: tooltipClampToViewport,
+      maxWidth: tooltipMaxWidth,
+      displayContents: true,
+      tapEnabled: false,
+      className: cn(
+        buttonProps.disabled ? "polli:cursor-not-allowed" : "polli:cursor-pointer",
+        tooltipClassName
+      ),
+      children: button
+    }
+  );
+}
+
+// src/compositions/CodeBlock.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var CodeBlock = ({
+  code,
+  codeClassName,
+  language,
+  className,
+  ...rest
+}) => {
+  const label = language || "Code";
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        "polli:min-w-0 polli:max-w-full polli:overflow-hidden polli:rounded-lg polli:border polli:border-theme-border polli:bg-theme-bg-pale",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "polli:flex polli:min-h-9 polli:items-center polli:justify-between polli:gap-3 polli:bg-theme-bg-subtle polli:px-3 polli:py-1.5", children: [
+          /* @__PURE__ */ jsx6("span", { className: "polli:truncate polli:font-mono polli:text-[11px] polli:font-medium polli:uppercase polli:tracking-wide polli:text-theme-text-muted", children: label }),
+          /* @__PURE__ */ jsx6(
+            CopyButton,
+            {
+              value: code,
+              tooltip: null,
+              "aria-label": "Copy code",
+              className: "polli:flex polli:items-center polli:gap-1.5 polli:rounded-md polli:px-2 polli:py-1 polli:text-xs polli:font-medium polli:text-theme-text-base polli:transition-colors polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover",
+              children: (copied) => /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                copied ? /* @__PURE__ */ jsx6(CheckIcon, { className: "polli:size-3.5" }) : /* @__PURE__ */ jsx6(ClipboardIcon, { className: "polli:size-3.5" }),
+                /* @__PURE__ */ jsx6("span", { children: copied ? "Copied" : "Copy" })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx6(
+          "pre",
+          {
+            className: cn(
+              "polli:m-0 polli:min-w-0 polli:whitespace-pre-wrap polli:break-words polli:[overflow-wrap:anywhere] polli:[tab-size:4] polli:p-3 polli:font-mono polli:text-xs polli:leading-6 polli:text-theme-text-strong",
+              codeClassName
+            ),
+            children: /* @__PURE__ */ jsx6("code", { children: code })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/compositions/Markdown.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function textContent(value) {
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+  if (Array.isArray(value)) return value.map(textContent).join("");
+  if (isValidElement(value)) {
+    return textContent(value.props.children);
+  }
+  return "";
+}
+var VIDEO_EXTENSIONS = /* @__PURE__ */ new Set(["m4v", "mov", "mp4", "webm"]);
+var AUDIO_EXTENSIONS = /* @__PURE__ */ new Set([
+  "aac",
+  "flac",
+  "m4a",
+  "mp3",
+  "ogg",
+  "opus",
+  "wav"
+]);
+function urlExtension(src) {
+  try {
+    const { pathname } = new URL(src, "http://localhost");
+    return pathname.split(".").pop()?.toLowerCase() ?? "";
+  } catch {
+    return "";
+  }
+}
+function inlineMedia(src, label) {
+  if (!src) return null;
+  const extension = urlExtension(src);
+  const video = VIDEO_EXTENSIONS.has(extension) || label === "Generated video";
+  const audio = AUDIO_EXTENSIONS.has(extension) || label === "Generated audio";
+  if (!video && !audio) return null;
+  const Element = video ? "video" : "audio";
+  return /* @__PURE__ */ jsx7(
+    Element,
+    {
+      src,
+      "aria-label": label,
+      controls: true,
+      playsInline: video || void 0,
+      preload: "metadata",
+      className: "polli:max-w-full polli:rounded-lg"
+    }
+  );
+}
+function MarkdownCodeBlock({ children }) {
+  const child = isValidElement(children) ? children : null;
+  const language = child?.props.className?.match(/language-([^\s]+)/)?.[1];
+  const code = textContent(child?.props.children ?? children).replace(
+    /\n$/,
+    ""
+  );
+  return /* @__PURE__ */ jsx7(CodeBlock, { code, language, className: "polli:my-3" });
+}
+var components = {
+  ul: ({ node, ...props }) => /* @__PURE__ */ jsx7(
+    "ul",
+    {
+      className: "polli:flex polli:min-w-0 polli:list-disc polli:flex-col polli:gap-1 polli:pl-5 polli:marker:text-theme-text-muted",
+      ...props
+    }
+  ),
+  ol: ({ node, ...props }) => /* @__PURE__ */ jsx7(
+    "ol",
+    {
+      className: "polli:flex polli:min-w-0 polli:list-decimal polli:flex-col polli:gap-1 polli:pl-5 polli:marker:text-theme-text-muted",
+      ...props
+    }
+  ),
+  p: ({ node, ...props }) => /* @__PURE__ */ jsx7("p", { className: "polli:mb-2 polli:last:mb-0", ...props }),
+  strong: ({ node, ...props }) => /* @__PURE__ */ jsx7(
+    "strong",
+    {
+      className: "polli:font-semibold polli:text-theme-text-strong",
+      ...props
+    }
+  ),
+  code: ({ node, ...props }) => /* @__PURE__ */ jsx7(
+    "code",
+    {
+      className: "polli:break-words polli:rounded polli:bg-theme-bg-subtle polli:px-1 polli:py-0.5 polli:font-mono polli:text-xs",
+      ...props
+    }
+  ),
+  pre: ({ children }) => /* @__PURE__ */ jsx7(MarkdownCodeBlock, { children }),
+  img: ({ node, src, alt, ...props }) => {
+    const media = inlineMedia(
+      typeof src === "string" ? src : void 0,
+      alt
+    );
+    if (media) return media;
+    return /* @__PURE__ */ jsx7(
+      "img",
+      {
+        src,
+        alt,
+        loading: "lazy",
+        className: "polli:max-w-full polli:rounded-lg",
+        ...props
+      }
+    );
+  },
+  a: ({ node, href, ...props }) => {
+    const media = inlineMedia(href, textContent(props.children));
+    if (media) return media;
+    return /* @__PURE__ */ jsx7(InlineLink, { href, ...props });
+  }
+};
+function Markdown({ children, className }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: cn(
+        "polli:min-w-0 polli:font-body polli:leading-relaxed",
+        className
+      ),
+      children: /* @__PURE__ */ jsx7(ReactMarkdown, { remarkPlugins: [remarkGfm], components, children })
+    }
+  );
+}
+
+// src/compositions/Prose.tsx
+import Markdown2 from "react-markdown";
+import rehypeSlug from "rehype-slug";
+import remarkGfm2 from "remark-gfm";
+
+// src/primitives/Typography.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var headingSizeClasses = {
+  display: "polli:font-heading polli:text-5xl polli:leading-none",
+  title: "polli:font-heading polli:text-4xl polli:leading-none",
+  section: "polli:font-subheading polli:text-2xl polli:leading-tight",
+  subsection: "polli:font-subheading polli:text-xl polli:leading-tight",
+  card: "polli:font-subheading polli:text-lg polli:leading-tight"
+};
+function headingClassName(size, className) {
+  return cn(
+    "polli:break-words polli:text-theme-text-strong",
+    headingSizeClasses[size],
+    className
+  );
+}
+
+// src/compositions/Prose.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var components2 = {
+  h1: ({ node, ...props }) => /* @__PURE__ */ jsx9(
+    "h1",
+    {
+      className: headingClassName("title", "polli:mt-0 polli:mb-5"),
+      ...props
+    }
+  ),
+  h2: ({ node, ...props }) => /* @__PURE__ */ jsx9(
+    "h2",
+    {
+      className: headingClassName("section", "polli:mt-8 polli:mb-3"),
+      ...props
+    }
+  ),
+  h3: ({ node, ...props }) => /* @__PURE__ */ jsx9(
+    "h3",
+    {
+      className: headingClassName("subsection", "polli:mt-6 polli:mb-2"),
+      ...props
+    }
+  ),
+  p: ({ node, ...props }) => /* @__PURE__ */ jsx9("p", { className: "polli:my-4 polli:leading-relaxed", ...props }),
+  a: ({ node, ...props }) => /* @__PURE__ */ jsx9(InlineLink, { ...props }),
+  ul: ({ node, ...props }) => /* @__PURE__ */ jsx9(
+    "ul",
+    {
+      className: "polli:my-4 polli:list-disc polli:pl-6 polli:leading-relaxed",
+      ...props
+    }
+  ),
+  ol: ({ node, ...props }) => /* @__PURE__ */ jsx9(
+    "ol",
+    {
+      className: "polli:my-4 polli:list-decimal polli:pl-6 polli:leading-relaxed",
+      ...props
+    }
+  ),
+  blockquote: ({ node, ...props }) => /* @__PURE__ */ jsx9(
+    "blockquote",
+    {
+      className: "polli:my-4 polli:border-l-4 polli:border-theme-border polli:pl-4 polli:text-theme-text-soft",
+      ...props
+    }
+  ),
+  code: ({ node, ...props }) => /* @__PURE__ */ jsx9(
+    "code",
+    {
+      className: "polli:rounded polli:bg-theme-bg-active polli:px-1 polli:py-0.5 polli:font-pixel polli:text-sm",
+      ...props
+    }
+  ),
+  pre: ({ node, ...props }) => /* @__PURE__ */ jsx9(
+    "pre",
+    {
+      className: "polli:my-4 polli:overflow-x-auto polli:rounded-lg polli:bg-theme-bg-active polli:p-4",
+      ...props
+    }
+  ),
+  table: ({ node, ...props }) => /* @__PURE__ */ jsx9(
+    "table",
+    {
+      className: "polli:my-4 polli:w-full polli:border-collapse polli:text-sm",
+      ...props
+    }
+  ),
+  th: ({ node, ...props }) => /* @__PURE__ */ jsx9(
+    "th",
+    {
+      className: "polli:border polli:border-theme-border polli:px-3 polli:py-2 polli:text-left polli:font-semibold",
+      ...props
+    }
+  ),
+  td: ({ node, ...props }) => /* @__PURE__ */ jsx9(
+    "td",
+    {
+      className: "polli:border polli:border-theme-border polli:px-3 polli:py-2",
+      ...props
+    }
+  ),
+  hr: ({ node, ...props }) => /* @__PURE__ */ jsx9("hr", { className: "polli:my-6 polli:border-theme-border", ...props })
+};
+function Prose({ children, className }) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: cn(
+        "polli:font-body polli:text-theme-text-base polli:leading-relaxed",
+        className
+      ),
+      children: /* @__PURE__ */ jsx9(
+        Markdown2,
+        {
+          remarkPlugins: [remarkGfm2],
+          rehypePlugins: [rehypeSlug],
+          components: components2,
+          children
+        }
+      )
+    }
+  );
+}
+export {
+  Markdown,
+  Prose
+};
+//# sourceMappingURL=markdown.js.map