@publish.os/nextjs 0.0.1-alpha.90 → 0.0.1-alpha.91

package/dist/kernel/components/mdx/components/inline-code.js

@@ -1,6 +1,6 @@
 // src/components/mdx/inline-code.tsx
 import { cn } from "@publish.os/nextjs/utils/cn";
-import { jsx } from "react/jsx-runtime";
+import { jsx } from "@publish.os/nextjs/jsx-runtime";
 function InlineCode({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "code",

package/dist/kernel/components/mdx/components/kbd.js

@@ -1,7 +1,7 @@
 // src/components/mdx/kbd.tsx
-import { Kbd as UiKbd } from "@publish.os/nextjs/kernel/components/ui/kbd";
+import { Kbd as UiKbd } from "@components/ui/kbd";
 import { cn } from "@publish.os/nextjs/utils/cn";
-import { jsx } from "react/jsx-runtime";
+import { jsx } from "@publish.os/nextjs/jsx-runtime";
 function Kbd({ className, ...props }) {
   return /* @__PURE__ */ jsx(UiKbd, { ...props, size: null, className: cn("text-[0.75em]", className) });
 }

package/dist/kernel/components/mdx/components/link.d.ts

@@ -5,9 +5,9 @@ import { LinkProps as LinkProps$1 } from 'next/link';
 import { ReactNode, AnchorHTMLAttributes } from 'react';
 
 declare const buttonVariants: (props?: ({
-    variant?: "solid" | "soft" | "outline" | "ghost" | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
-    iconOnly?: boolean | null | undefined;
+    readonly variant?: "solid" | "soft" | "outline" | "ghost" | null | undefined;
+    readonly size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    readonly iconOnly?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariantProps = VariantProps<typeof buttonVariants>;
 

package/dist/kernel/components/mdx/components/link.js

@@ -1,8 +1,8 @@
 // src/components/mdx/link.tsx
 import {
   Link as UiLink
-} from "@publish.os/nextjs/kernel/components/ui/link";
-import { jsx } from "react/jsx-runtime";
+} from "@components/ui/link";
+import { jsx } from "@publish.os/nextjs/jsx-runtime";
 function Link({
   color = "accent",
   href = "#",

package/dist/kernel/components/mdx/components/paragraph.js

@@ -1,7 +1,7 @@
 // src/components/mdx/paragraph.tsx
 import { cn } from "@publish.os/nextjs/utils/cn";
 import { Children, isValidElement } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "@publish.os/nextjs/jsx-runtime";
 function isBlockMediaChild(child) {
   if (!isValidElement(child)) return !1;
   let props = child.props;

package/dist/kernel/components/mdx/components/strikethrough.js

@@ -1,6 +1,6 @@
 // src/components/mdx/strikethrough.tsx
 import { cn } from "@publish.os/nextjs/utils/cn";
-import { jsx } from "react/jsx-runtime";
+import { jsx } from "@publish.os/nextjs/jsx-runtime";
 function Strikethrough({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "del",

package/dist/kernel/components/mdx/components/table.js

@@ -6,8 +6,8 @@ import {
   TableHeader,
   TableRow,
   Table as UiTable
-} from "@publish.os/nextjs/kernel/components/ui/table";
-import { jsx } from "react/jsx-runtime";
+} from "@components/ui/table";
+import { jsx } from "@publish.os/nextjs/jsx-runtime";
 function Table(props) {
   return /* @__PURE__ */ jsx(UiTable, { ...props });
 }

package/dist/kernel/components/mdx/components/task-list.js

@@ -1,6 +1,6 @@
 // src/components/mdx/task-list.tsx
 import { cn } from "@publish.os/nextjs/utils/cn";
-import { jsx } from "react/jsx-runtime";
+import { jsx } from "@publish.os/nextjs/jsx-runtime";
 function TaskList({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "ul",

package/dist/kernel/components/mdx/components/video-player.d.ts

@@ -1,18 +1,22 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithoutRef } from 'react';
 
 type VideoEmbed = {
     allow: string;
     src: string;
     title: string;
 };
-declare function VideoPlayer({ className, embed, height, poster, src, title, width, }: {
+/** Native playback options and media events applied after the Play button. */
+type NativeVideoProps = Pick<ComponentPropsWithoutRef<"video">, "autoPlay" | "controls" | "controlsList" | "crossOrigin" | "disablePictureInPicture" | "disableRemotePlayback" | "loop" | "muted" | "playsInline" | "preload" | "onAbort" | "onCanPlay" | "onCanPlayThrough" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onError" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onPause" | "onPlay" | "onPlaying" | "onProgress" | "onRateChange" | "onResize" | "onSeeked" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onVolumeChange" | "onWaiting">;
+declare function VideoPlayer({ className, embed, height, nativeProps, poster, src, title, width, }: {
     className?: string;
     embed?: VideoEmbed;
     height?: number;
+    nativeProps?: NativeVideoProps;
     poster?: string;
     src: string;
     title: string;
     width?: number;
 }): react_jsx_runtime.JSX.Element;
 
-export { type VideoEmbed, VideoPlayer };
+export { type NativeVideoProps, type VideoEmbed, VideoPlayer };

package/dist/kernel/components/mdx/components/video-player.js

@@ -4,12 +4,13 @@
 import { cn } from "@publish.os/nextjs/utils/cn";
 import { usePathname } from "next/navigation";
 import { useCallback, useEffect, useId, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
 var VIDEO_PLAY_EVENT = "publishos:video-play";
 function VideoPlayer({
   className,
   embed,
   height,
+  nativeProps,
   poster,
   src,
   title,
@@ -65,10 +66,13 @@ function VideoPlayer({
       ),
       controls: !0,
       playsInline: !0,
-      poster,
       preload: "metadata",
+      ...nativeProps,
+      height,
+      poster,
       src,
       title,
+      width,
       children: /* @__PURE__ */ jsx("track", { kind: "captions" })
     },
     src

package/dist/kernel/components/mdx/components/video.d.ts

@@ -1,15 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NativeVideoProps } from './video-player.js';
+import 'react';
 
-type VideoProps = Omit<React.ComponentPropsWithoutRef<"video">, "height" | "poster" | "src" | "title" | "width"> & {
+type VideoProps = NativeVideoProps & {
     caption?: React.ReactNode;
+    className?: string;
     frame?: boolean | "default" | "none";
     height?: number | string;
     poster?: string;
-    provider?: "self-hosted" | "youtube" | "vimeo" | "loom" | "wistia" | "cloudflare-stream";
     src?: string;
     title?: string;
     width?: number | string;
 };
-declare function Video({ caption, className, frame, height, poster, src, title, width, }: VideoProps): react_jsx_runtime.JSX.Element | null;
+declare function Video({ caption, className, frame, height, poster, src, title, width, ...nativeProps }: VideoProps): react_jsx_runtime.JSX.Element | null;
 
 export { Video, type VideoProps };

package/dist/kernel/components/mdx/components/video.js

@@ -1,10 +1,10 @@
 // src/components/mdx/video/video.tsx
-import { FigureCaption } from "@publish.os/nextjs/kernel/components/mdx/components/figure-caption";
+import { FigureCaption } from "@components/mdx/components/figure-caption";
 import {
   VideoPlayer
-} from "@publish.os/nextjs/kernel/components/mdx/components/video-player";
+} from "@components/mdx/components/video-player";
 import { cn } from "@publish.os/nextjs/utils/cn";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
 function toNumber(value) {
   if (typeof value == "number" && Number.isFinite(value)) return value;
   if (typeof value == "string" && value.trim() !== "") {
@@ -76,7 +76,8 @@ function Video({
   poster,
   src,
   title,
-  width
+  width,
+  ...nativeProps
 }) {
   if (!src) return null;
   let videoTitle = title?.trim() || "Video", numericWidth = toNumber(width), numericHeight = toNumber(height), framed = frame !== !1 && frame !== "none", embed = resolveEmbed(src, videoTitle), frameStyle = {
@@ -96,6 +97,7 @@ function Video({
         {
           embed,
           height: numericHeight,
+          nativeProps,
           poster,
           src,
           title: videoTitle,
@@ -106,7 +108,7 @@ function Video({
   );
   return caption ? /* @__PURE__ */ jsxs("figure", { className: "not-markdown-prose my-8", children: [
     player,
-    /* @__PURE__ */ jsx(FigureCaption, { className: "mx-auto max-w-prose text-center", children: caption })
+    /* @__PURE__ */ jsx(FigureCaption, { children: caption })
   ] }) : /* @__PURE__ */ jsx("div", { className: "not-markdown-prose my-6", children: player });
 }
 export {

package/dist/kernel/components/mdx/error-boundary.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MdxErrorBoundaryProps } from './types.js';
+import { M as MdxErrorBoundaryProps } from '../../../types-sM2g9nW0.js';
 import 'mdx/types.js';
 import 'react';
 

package/dist/kernel/components/mdx/error-boundary.js

@@ -1,9 +1,9 @@
 "use client";
 
 // src/components/mdx/error-boundary.tsx
-import { MDXErrorFallback } from "@publish.os/nextjs/kernel/components/mdx/error-fallback";
+import { MDXErrorFallback } from "@components/mdx/error-fallback";
 import { catchError } from "next/error";
-import { jsx } from "react/jsx-runtime";
+import { jsx } from "@publish.os/nextjs/jsx-runtime";
 function MDXRenderErrorFallback(props, { error }) {
   return /* @__PURE__ */ jsx(
     MDXErrorFallback,

package/dist/kernel/components/mdx/error-fallback.js

@@ -1,5 +1,5 @@
 // src/components/mdx/error-fallback.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
 function MDXErrorFallback({
   errorMessage = "An error occurred while rendering the content",
   pageId,

package/dist/kernel/components/mdx/mdx.d.ts

@@ -1,18 +1,24 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MDXComponents } from './types.js';
+import { a as MDXComponents } from '../../../types-sM2g9nW0.js';
 import { P as PageData } from '../../../types-CJWRG05y.js';
-import { ReactNode, AnchorHTMLAttributes } from 'react';
+import { ReactNode, AnchorHTMLAttributes, ComponentPropsWithoutRef } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
-import { a as ButtonVariantProps } from '../../../button-c3WGnxIj.js';
+import { a as ButtonVariantProps } from '../../../button-BdCScEKi.js';
 import { VariantProps } from 'class-variance-authority';
 import { LinkProps as LinkProps$1 } from 'next/link';
 import 'mdx/types.js';
 
-type FigureProps = React.ComponentPropsWithoutRef<"figure"> & {
+type FigureCaptionProps = React.ComponentProps<"figcaption">;
+declare function FigureCaption({ className, ...props }: FigureCaptionProps): react_jsx_runtime.JSX.Element;
+
+type FigureProps = React.ComponentProps<"figure"> & {
+    /** A fallback caption after the children. An authored caption takes precedence. */
     caption?: ReactNode;
-    frame?: boolean | "default" | "none";
 };
 declare function Figure({ caption, children, className, ...props }: FigureProps): react_jsx_runtime.JSX.Element;
+declare namespace Figure {
+    var Caption: typeof FigureCaption;
+}
 
 type ImageProps = Omit<React.ComponentPropsWithoutRef<"img">, "height" | "sizes" | "width"> & {
     aspect?: number | `${number}/${number}`;
@@ -30,7 +36,7 @@ type ImageProps = Omit<React.ComponentPropsWithoutRef<"img">, "height" | "sizes"
     width?: number;
     zoom?: boolean;
 };
-declare function Image({ alt, aspect, caption, className, decorative, fill, frame, height, intrinsicHeight, intrinsicWidth, optimized, priority, quality, sizes, src, width, zoom, ...props }: ImageProps): react_jsx_runtime.JSX.Element | null;
+declare function Image({ alt, aspect, caption, className, decorative: authoredDecorative, fill: authoredFill, frame, height, intrinsicHeight, intrinsicWidth, optimized: authoredOptimized, priority: authoredPriority, quality, sizes, src, width, zoom: authoredZoom, ...props }: ImageProps): react_jsx_runtime.JSX.Element | null;
 
 declare const linkVariants: (props?: ({
     color?: "default" | "accent" | null | undefined;
@@ -59,24 +65,28 @@ type LinkProps = {
 type MdxLinkProps = LinkProps;
 declare function Link({ color, href, size, variant, ...props }: MdxLinkProps): react_jsx_runtime.JSX.Element;
 
-type VideoProps = Omit<React.ComponentPropsWithoutRef<"video">, "height" | "poster" | "src" | "title" | "width"> & {
+/** Native playback options and media events applied after the Play button. */
+type NativeVideoProps = Pick<ComponentPropsWithoutRef<"video">, "autoPlay" | "controls" | "controlsList" | "crossOrigin" | "disablePictureInPicture" | "disableRemotePlayback" | "loop" | "muted" | "playsInline" | "preload" | "onAbort" | "onCanPlay" | "onCanPlayThrough" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onError" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onPause" | "onPlay" | "onPlaying" | "onProgress" | "onRateChange" | "onResize" | "onSeeked" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onVolumeChange" | "onWaiting">;
+
+type VideoProps = NativeVideoProps & {
     caption?: React.ReactNode;
+    className?: string;
     frame?: boolean | "default" | "none";
     height?: number | string;
     poster?: string;
-    provider?: "self-hosted" | "youtube" | "vimeo" | "loom" | "wistia" | "cloudflare-stream";
     src?: string;
     title?: string;
     width?: number | string;
 };
-declare function Video({ caption, className, frame, height, poster, src, title, width, }: VideoProps): react_jsx_runtime.JSX.Element | null;
+declare function Video({ caption, className, frame, height, poster, src, title, width, ...nativeProps }: VideoProps): react_jsx_runtime.JSX.Element | null;
 
 type MDXProps = {
     components?: MDXComponents;
     page: PageData;
 };
-declare function renderMdx({ components, page, siteComponents, }: MDXProps & {
+declare function renderMdx({ components, page, siteComponents, importedComponents, }: MDXProps & {
     siteComponents?: MDXComponents;
+    importedComponents?: MDXComponents;
 }): Promise<react_jsx_runtime.JSX.Element>;
 declare function MDX(props: MDXProps): Promise<react_jsx_runtime.JSX.Element>;
 

package/dist/kernel/components/mdx/mdx.js

@@ -1,18 +1,18 @@
 // src/components/mdx/mdx.tsx
-import { Blockquote } from "@publish.os/nextjs/kernel/components/mdx/components/blockquote";
-import { Callout } from "@publish.os/nextjs/kernel/components/mdx/components/callout";
-import { CodeBlock } from "@publish.os/nextjs/kernel/components/mdx/components/code-block";
-import { Figure } from "@publish.os/nextjs/kernel/components/mdx/components/figure";
-import { FigureCaption } from "@publish.os/nextjs/kernel/components/mdx/components/figure-caption";
-import { Footnotes } from "@publish.os/nextjs/kernel/components/mdx/components/footnotes";
-import { Heading } from "@publish.os/nextjs/kernel/components/mdx/components/heading";
-import { Hr } from "@publish.os/nextjs/kernel/components/mdx/components/hr";
-import { Image } from "@publish.os/nextjs/kernel/components/mdx/components/image";
-import { InlineCode } from "@publish.os/nextjs/kernel/components/mdx/components/inline-code";
-import { Kbd } from "@publish.os/nextjs/kernel/components/mdx/components/kbd";
-import { Link } from "@publish.os/nextjs/kernel/components/mdx/components/link";
-import { Paragraph } from "@publish.os/nextjs/kernel/components/mdx/components/paragraph";
-import { Strikethrough } from "@publish.os/nextjs/kernel/components/mdx/components/strikethrough";
+import { Blockquote } from "@components/mdx/components/blockquote";
+import { Callout } from "@components/mdx/components/callout";
+import { CodeBlock } from "@components/mdx/components/code-block";
+import { Figure } from "@components/mdx/components/figure";
+import { FigureCaption } from "@components/mdx/components/figure-caption";
+import { Footnotes } from "@components/mdx/components/footnotes";
+import { Heading } from "@components/mdx/components/heading";
+import { Hr } from "@components/mdx/components/hr";
+import { Image } from "@components/mdx/components/image";
+import { InlineCode } from "@components/mdx/components/inline-code";
+import { Kbd } from "@components/mdx/components/kbd";
+import { Link } from "@components/mdx/components/link";
+import { Paragraph } from "@components/mdx/components/paragraph";
+import { Strikethrough } from "@components/mdx/components/strikethrough";
 import {
   Table,
   TableBodyGroup,
@@ -20,20 +20,20 @@ import {
   TableHeaderCell,
   TableHeadGroup,
   TableRowGroup
-} from "@publish.os/nextjs/kernel/components/mdx/components/table";
-import { TaskList, TaskListInput } from "@publish.os/nextjs/kernel/components/mdx/components/task-list";
-import { Video } from "@publish.os/nextjs/kernel/components/mdx/components/video";
-import { MDXErrorBoundary } from "@publish.os/nextjs/kernel/components/mdx/error-boundary";
-import { rehypeHeadingIds } from "@publish.os/nextjs/kernel/components/mdx/rehype-heading-ids";
+} from "@components/mdx/components/table";
+import { TaskList, TaskListInput } from "@components/mdx/components/task-list";
+import { Video } from "@components/mdx/components/video";
+import { MDXErrorBoundary } from "@components/mdx/error-boundary";
+import { rehypeHeadingIds } from "@components/mdx/rehype-heading-ids";
 import { compileMDX } from "next-mdx-remote/rsc";
 import remarkGfm from "remark-gfm";
 
 // src/components/mdx/mod-key.tsx
 import {
   ModKey as UiModKey
-} from "@publish.os/nextjs/kernel/components/ui/mod-key";
+} from "@components/ui/mod-key";
 import { cn } from "@publish.os/nextjs/utils/cn";
-import { jsx } from "react/jsx-runtime";
+import { jsx } from "@publish.os/nextjs/jsx-runtime";
 function ModKey({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     UiModKey,
@@ -45,6 +45,19 @@ function ModKey({ className, ...props }) {
   );
 }
 
+// src/components/mdx/plugins/remark-code-elements.ts
+function remarkCodeElements() {
+  return (tree) => {
+    function visit(node, insidePre = !1) {
+      if ((node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement") && node.name === "code" && !insidePre && node.data && Reflect.deleteProperty(node.data, "_mdxExplicitJsx"), "children" in node) {
+        let childInsidePre = insidePre || (node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement") && node.name === "pre";
+        for (let child of node.children) visit(child, childInsidePre);
+      }
+    }
+    visit(tree);
+  };
+}
+
 // src/components/mdx/plugins/remark-code-title.ts
 function remarkCodeTitle() {
   return (tree) => {
@@ -63,6 +76,29 @@ function remarkCodeTitle() {
   };
 }
 
+// src/components/mdx/plugins/remark-component-references.ts
+function remarkComponentReferences({
+  components,
+  pagePath
+}) {
+  return () => (tree) => {
+    function visit(node) {
+      if ((node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement") && node.name && /^[A-Z]/.test(node.name)) {
+        let rootName = node.name.split(".")[0];
+        if (rootName && !components[rootName]) {
+          let file = rootName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), position = node.position?.start;
+          throw new Error(
+            `Undefined MDX component "${rootName}" on page "${pagePath}"` + (position ? ` (body line ${position.line}, column ${position.column})` : "") + (rootName.endsWith("Icon") ? `. For a Phosphor icon, use import { ${rootName} } from "@phosphor-icons/react/ssr".` : `. Add publish.os/components/mdx/${file}.tsx with a named ${rootName} export, or supply it through the MDX components prop.`)
+          );
+        }
+      }
+      if ("children" in node)
+        for (let child of node.children) visit(child);
+    }
+    visit(tree);
+  };
+}
+
 // src/components/mdx/plugins/remark-keyboard-input.ts
 function remarkKeyboardInput() {
   return (tree) => {
@@ -74,12 +110,160 @@ function remarkKeyboardInput() {
   };
 }
 
+// src/components/mdx/plugins/remark-media-elements.ts
+var mediaElements = /* @__PURE__ */ new Set(["img", "figure", "figcaption"]);
+function remarkMediaElements() {
+  return (tree) => {
+    function visit(node) {
+      if ((node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement") && node.name && mediaElements.has(node.name) && node.data && Reflect.deleteProperty(node.data, "_mdxExplicitJsx"), "children" in node)
+        for (let child of node.children) visit(child);
+    }
+    visit(tree);
+  };
+}
+
+// src/lib/hosting/framework-paths.ts
+var FRAMEWORK_PREFIX = "/publishos", SOURCE_ASSET_PREFIX = `${FRAMEWORK_PREFIX}/assets`, INTERNAL_PREFIX = `${FRAMEWORK_PREFIX}/internal`, SITE_API_PREFIX = `${FRAMEWORK_PREFIX}/api`, SEARCH_PREFIX = `${INTERNAL_PREFIX}/search`, PAGEFIND_MODULE_URL = `${SEARCH_PREFIX}/pagefind.js`, PAGEFIND_ENTRY_URL = `${SEARCH_PREFIX}/pagefind-entry.json`, IMAGE_OPTIMIZER_PATH = `${SITE_API_PREFIX}/image`;
+var OG_SERVICE_PREFIX = `${SITE_API_PREFIX}/og`, PUBLIC_INTERNAL_DIRECTORY = INTERNAL_PREFIX.slice(1), PUBLIC_FONT_DIRECTORY = `${PUBLIC_INTERNAL_DIRECTORY}/fonts`, PUBLIC_SEARCH_DIRECTORY = `public/${PUBLIC_INTERNAL_DIRECTORY}/search`, FRAMEWORK_PROXY_MATCHER = `/((?!${FRAMEWORK_PREFIX.slice(1)}(?:/|$)|_next/static|_next/image|_next/webpack-hmr).*)`;
+
+// src/lib/assets/map-source-asset-url.ts
+var SOURCE_ASSET_PATH = "/assets/", URL_PROPS = [
+  "action",
+  "cite",
+  "data",
+  "formAction",
+  "href",
+  "poster",
+  "src",
+  "xlinkHref"
+];
+function hasUnsafeControlCharacters(value) {
+  for (let character of value) {
+    let code = character.codePointAt(0) ?? 0;
+    if (code <= 31 || code >= 127 && code <= 159) return !0;
+  }
+  return !1;
+}
+function assertSafeAssetPath(path) {
+  if (path.includes("\\") || hasUnsafeControlCharacters(path))
+    throw new TypeError("Local asset URLs must use safe path segments.");
+  for (let segment of path.split("/")) {
+    if (!segment)
+      throw new TypeError("Local asset URLs must use safe path segments.");
+    let decoded;
+    try {
+      decoded = decodeURIComponent(segment);
+    } catch {
+      throw new TypeError("Local asset URLs must use valid URL encoding.");
+    }
+    if (decoded === "." || decoded === ".." || decoded.includes("/") || decoded.includes("\\") || hasUnsafeControlCharacters(decoded))
+      throw new TypeError("Local asset URLs must use safe path segments.");
+  }
+}
+function mapSourceAssetUrl(value) {
+  if (typeof value != "string" || !value.startsWith(SOURCE_ASSET_PATH))
+    return value;
+  let suffixIndex = value.search(/[?#]/u), pathname = suffixIndex < 0 ? value : value.slice(0, suffixIndex), suffix = suffixIndex < 0 ? "" : value.slice(suffixIndex), path = pathname.slice(SOURCE_ASSET_PATH.length);
+  return assertSafeAssetPath(path), `${SOURCE_ASSET_PREFIX}/${path}${suffix}`;
+}
+function mapSourceSet(value) {
+  let candidates = [], cursor = 0;
+  for (; cursor < value.length; ) {
+    for (; cursor < value.length && /[\s,]/u.test(value[cursor] ?? ""); )
+      cursor += 1;
+    if (cursor >= value.length) break;
+    let start = cursor;
+    for (; cursor < value.length && !/\s/u.test(value[cursor] ?? ""); )
+      cursor += 1;
+    let url = value.slice(start, cursor), endsCandidate = url.endsWith(",");
+    endsCandidate && (url = url.replace(/,+$/u, ""));
+    let mapped = String(mapSourceAssetUrl(url));
+    if (endsCandidate) {
+      candidates.push(mapped);
+      continue;
+    }
+    for (; cursor < value.length && /\s/u.test(value[cursor] ?? ""); )
+      cursor += 1;
+    let descriptorStart = cursor;
+    for (; cursor < value.length && value[cursor] !== ","; ) cursor += 1;
+    let descriptor = value.slice(descriptorStart, cursor).trim();
+    candidates.push(descriptor ? `${mapped} ${descriptor}` : mapped), value[cursor] === "," && (cursor += 1);
+  }
+  return candidates.join(", ");
+}
+function mapSourceAssetProps(props) {
+  if (!props || typeof props != "object") return props;
+  let source = props, mapped;
+  for (let name of URL_PROPS) {
+    let value = source[name], next = mapSourceAssetUrl(value);
+    next !== value && (mapped ??= { ...source }, mapped[name] = next);
+  }
+  if (typeof source.srcSet == "string") {
+    let next = mapSourceSet(source.srcSet);
+    next !== source.srcSet && (mapped ??= { ...source }, mapped.srcSet = next);
+  }
+  return mapped ?? props;
+}
+
+// src/lib/assets/remark-map-source-assets.ts
+var imageBooleanAttributes = /* @__PURE__ */ new Set([
+  "decorative",
+  "fill",
+  "frame",
+  "optimized",
+  "priority",
+  "zoom"
+]);
+function preserveImageControlLiteral(node) {
+  if (!(node.name !== "Image" && node.name !== "img" || !node.attributes))
+    for (let attribute of node.attributes) {
+      if (attribute.type !== "mdxJsxAttribute" || !attribute.value || typeof attribute.value != "object")
+        continue;
+      let expression = attribute.value.value;
+      if (typeof expression != "string") continue;
+      let value = expression.trim();
+      if (imageBooleanAttributes.has(attribute.name ?? "") && (value === "true" || value === "false")) {
+        attribute.value = value;
+        continue;
+      }
+      let isPositiveNumber = (candidate) => {
+        let number = Number(candidate);
+        return candidate !== "" && Number.isFinite(number) && number > 0;
+      }, unquotedValue = value.replace(/^(?:"(.*)"|'(.*)')$/u, "$1$2"), ratio = unquotedValue.match(
+        /^(\d+(?:\.\d+)?)\s*\/\s*(\d+(?:\.\d+)?)$/u
+      ), isPositiveAspect = isPositiveNumber(unquotedValue) || ratio !== null && Number(ratio[1]) > 0 && Number(ratio[2]) > 0;
+      (attribute.name === "width" || attribute.name === "height") && /^\d+$/u.test(value) && isPositiveNumber(value) && Number.isSafeInteger(Number(value)) ? attribute.value = value : attribute.name === "aspect" && isPositiveAspect && (attribute.value = unquotedValue);
+    }
+}
+function mapAttribute(node) {
+  if (preserveImageControlLiteral(node), (node.type === "image" || node.type === "link" || node.type === "definition") && typeof node.url == "string") {
+    let prop = node.type === "image" ? "src" : "href", props = mapSourceAssetProps({ [prop]: node.url });
+    typeof props[prop] == "string" && (node.url = props[prop]);
+  }
+  for (let attribute of node.attributes ?? []) {
+    if (attribute.type !== "mdxJsxAttribute" || typeof attribute.value != "string")
+      continue;
+    let mapped = mapSourceAssetProps({
+      [attribute.name ?? ""]: attribute.value
+    });
+    attribute.name && typeof mapped[attribute.name] == "string" && (attribute.value = mapped[attribute.name]);
+  }
+}
+function remarkMapSourceAssets() {
+  return (tree) => {
+    let visit = (node) => {
+      mapAttribute(node), node.children?.forEach(visit);
+    };
+    visit(tree);
+  };
+}
+
 // src/components/mdx/mdx.tsx
-import { Figure as Figure2 } from "@publish.os/nextjs/kernel/components/mdx/components/figure";
-import { Image as Image2 } from "@publish.os/nextjs/kernel/components/mdx/components/image";
-import { Link as Link2 } from "@publish.os/nextjs/kernel/components/mdx/components/link";
-import { Video as Video2 } from "@publish.os/nextjs/kernel/components/mdx/components/video";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { Figure as Figure2 } from "@components/mdx/components/figure";
+import { Image as Image2 } from "@components/mdx/components/image";
+import { Link as Link2 } from "@components/mdx/components/link";
+import { Video as Video2 } from "@components/mdx/components/video";
+import { jsx as jsx2 } from "@publish.os/nextjs/jsx-runtime";
 var defaultMdxComponents = {
   h1: (props) => /* @__PURE__ */ jsx2(Heading, { as: "h1", ...props }),
   h2: (props) => /* @__PURE__ */ jsx2(Heading, { as: "h2", ...props }),
@@ -138,20 +322,33 @@ function getErrorMessage(error) {
 async function renderMdx({
   components,
   page,
-  siteComponents
+  siteComponents,
+  importedComponents
 }) {
-  let mdx = await compileMDX({
+  let selectedComponents = {
+    ...defaultMdxComponents,
+    ...siteComponents ?? {},
+    ...components ?? {},
+    ...importedComponents ?? {}
+  }, mdx = await compileMDX({
     source: page.body,
-    components: {
-      ...defaultMdxComponents,
-      ...siteComponents ?? {},
-      ...components ?? {}
-    },
+    components: selectedComponents,
     options: {
       parseFrontmatter: !1,
       mdxOptions: {
         rehypePlugins: [rehypeHeadingIds],
-        remarkPlugins: [remarkGfm, remarkCodeTitle, remarkKeyboardInput]
+        remarkPlugins: [
+          remarkGfm,
+          remarkCodeTitle,
+          remarkKeyboardInput,
+          remarkCodeElements,
+          remarkMediaElements,
+          remarkMapSourceAssets,
+          remarkComponentReferences({
+            components: selectedComponents,
+            pagePath: page.path
+          })
+        ]
       }
     }
   }).then(({ content: compiledContent }) => ({

package/dist/kernel/components/mdx/rehype-heading-ids.d.ts

@@ -1,5 +1,6 @@
 type RehypeNode = {
     children?: RehypeNode[];
+    name?: string;
     properties?: Record<string, unknown>;
     tagName?: string;
     type?: string;