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

package/dist/kernel/components/mdx/components/copy-code-button.js

@@ -0,0 +1,60 @@
+"use client";
+
+// src/components/mdx/code-block/copy-code-button.tsx
+import { AnimatedIconSwap } from "@publish.os/nextjs/kernel/components/blocks/animated-icon-swap";
+import { Button } from "@publish.os/nextjs/kernel/components/ui/button";
+import { CheckIcon, CopyIcon } from "@phosphor-icons/react/ssr";
+import { cn } from "@publish.os/nextjs/utils/cn";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CopyCodeButton({
+  className,
+  code
+}) {
+  let [copied, setCopied] = useState(!1), resetTimer = useRef(null);
+  useEffect(
+    () => () => {
+      resetTimer.current !== null && window.clearTimeout(resetTimer.current);
+    },
+    []
+  );
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(code), setCopied(!0), resetTimer.current !== null && window.clearTimeout(resetTimer.current), resetTimer.current = window.setTimeout(() => setCopied(!1), 2e3);
+    } catch {
+      setCopied(!1);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "aria-label": copied ? "Copied code" : "Copy code",
+      className: cn(
+        "relative z-content touch-manipulation after:absolute after:-inset-2 after:content-[''] motion-reduce:transition-none",
+        className
+      ),
+      "data-slot": "copy-code-button",
+      iconOnly: !0,
+      onClick: copy,
+      size: "sm",
+      type: "button",
+      variant: "ghost",
+      children: [
+        /* @__PURE__ */ jsx(
+          AnimatedIconSwap,
+          {
+            active: copied,
+            activeIcon: /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true", size: 16 }),
+            "aria-hidden": "true",
+            defaultIcon: /* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": "true", size: 16 }),
+            size: 16
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? "Copied" : "" })
+      ]
+    }
+  );
+}
+export {
+  CopyCodeButton
+};

package/dist/kernel/components/mdx/components/figure-caption.js

@@ -1,4 +1,4 @@
-// src/components/mdx/figure-caption.tsx
+// src/components/mdx/figure/figure-caption.tsx
 import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function FigureCaption({ className, ...props }) {

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

@@ -1,4 +1,4 @@
-// src/components/mdx/figure.tsx
+// src/components/mdx/figure/figure.tsx
 import { FigureCaption } from "@publish.os/nextjs/kernel/components/mdx/components/figure-caption";
 import { cn } from "@publish.os/nextjs/utils/cn";
 import { Children, isValidElement } from "react";

package/dist/kernel/components/mdx/components/heading-copy-link.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/mdx/heading-copy-link.tsx
-import { FrameworkLinkIcon as Link } from "@publish.os/nextjs/kernel/framework-icons";
+import { LinkIcon } from "@phosphor-icons/react/ssr";
 import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx, jsxs } from "react/jsx-runtime";
 function headingCopyUrl({ href, id }) {
@@ -35,7 +35,7 @@ function HeadingCopyLink({
         className
       ),
       children: [
-        children ? /* @__PURE__ */ jsx("span", { className: "relative inline no-underline after:pointer-events-none after:absolute after:bottom-[var(--link-underline-offset)] after:left-0 after:h-[var(--link-underline-thickness)] after:w-full after:rounded-inline-code after:bg-transparent after:transition-colors after:duration-100 after:ease-out after:content-[''] group-hover/heading-link:after:bg-[color-mix(in_oklch,currentColor_38%,transparent)] group-focus-visible/heading-link:after:bg-[color-mix(in_oklch,currentColor_38%,transparent)]", children }) : null,
+        children ? /* @__PURE__ */ jsx("span", { className: "relative inline no-underline after:pointer-events-none after:absolute after:bottom-(--link-underline-offset) after:left-0 after:h-(--link-underline-thickness) after:w-full after:rounded-inline-code after:bg-transparent after:transition-colors after:duration-100 after:ease-out after:content-[''] group-hover/heading-link:after:bg-[color-mix(in_oklch,currentColor_38%,transparent)] group-focus-visible/heading-link:after:bg-[color-mix(in_oklch,currentColor_38%,transparent)]", children }) : null,
         /* @__PURE__ */ jsx(
           "span",
           {
@@ -44,7 +44,7 @@ function HeadingCopyLink({
               "inline-flex h-[1em] items-center align-[-0.06em] text-typography-caption-foreground transition-[color,opacity] duration-150 group-hover/heading-link:text-typography-body-foreground group-focus-visible/heading-link:text-typography-body-foreground",
               iconOnly ? "opacity-100" : "ml-1.5 opacity-0 group-hover/heading-link:opacity-100 group-focus-visible/heading-link:opacity-100"
             ),
-            children: /* @__PURE__ */ jsx(Link, { "aria-hidden": "true", className: "block size-[0.8em] shrink-0" })
+            children: /* @__PURE__ */ jsx(LinkIcon, { "aria-hidden": "true", className: "block size-[0.8em] shrink-0" })
           }
         )
       ]

package/dist/kernel/components/mdx/components/image-zoom.d.ts

@@ -1,10 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function ImageZoom({ children, enabled, }: {
     children: ReactNode;
     enabled: boolean;
-}): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 
 export { ImageZoom };

package/dist/kernel/components/mdx/components/image-zoom.js

@@ -1,6 +1,6 @@
 "use client";
 
-// src/components/mdx/image-zoom.tsx
+// src/components/mdx/image/image-zoom.tsx
 import Zoom from "react-medium-image-zoom";
 import { jsx } from "react/jsx-runtime";
 function ImageZoom({

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

@@ -1,4 +1,4 @@
-// src/components/mdx/image.tsx
+// src/components/mdx/image/image.tsx
 import { FigureCaption } from "@publish.os/nextjs/kernel/components/mdx/components/figure-caption";
 import { ImageZoom } from "@publish.os/nextjs/kernel/components/mdx/components/image-zoom";
 import { cn } from "@publish.os/nextjs/utils/cn";
@@ -12,6 +12,63 @@ function parseAspect(value) {
   if (!(!width || !height || !Number.isFinite(width) || !Number.isFinite(height)))
     return width / height;
 }
+function resolveImageLayout({
+  aspect,
+  fill,
+  height,
+  intrinsicHeight,
+  intrinsicWidth,
+  width
+}) {
+  let resolvedWidth = width ?? intrinsicWidth, resolvedHeight = height ?? intrinsicHeight, resolvedAspect = parseAspect(aspect) ?? (resolvedWidth && resolvedHeight ? resolvedWidth / resolvedHeight : void 0), style = {
+    ...resolvedAspect ? { aspectRatio: String(resolvedAspect) } : {},
+    width: fill ? "100%" : resolvedWidth ? `min(100%, ${resolvedWidth}px)` : "100%"
+  };
+  return {
+    width: resolvedWidth,
+    height: resolvedHeight,
+    canOptimizeWithFill: !!(fill && resolvedAspect),
+    style
+  };
+}
+function renderImage({
+  imageProps,
+  fill,
+  height,
+  optimized,
+  priority,
+  quality,
+  sizes,
+  width
+}) {
+  if (optimized && (fill || width && height)) {
+    let maxWidth = fill ? "var(--publish-content-width, 72rem)" : `${width}px`;
+    return /* @__PURE__ */ jsx(
+      NextImage,
+      {
+        ...fill ? { fill } : { width, height },
+        priority,
+        quality,
+        sizes: sizes ?? `(max-width: 768px) 100vw, min(${maxWidth}, 100vw)`,
+        ...imageProps
+      }
+    );
+  }
+  let { alt, ...nativeProps } = imageProps;
+  return (
+    // biome-ignore lint/performance/noImgElement: remote and dimensionless MDX images do not require Next image optimizer configuration.
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt,
+        height: optimized ? void 0 : height,
+        loading: priority ? "eager" : "lazy",
+        width: optimized ? void 0 : width,
+        ...nativeProps
+      }
+    )
+  );
+}
 function Image({
   alt,
   aspect,
@@ -33,77 +90,41 @@ function Image({
   ...props
 }) {
   if (!src) return null;
-  let resolvedWidth = width ?? intrinsicWidth, resolvedHeight = height ?? intrinsicHeight, resolvedAspect = parseAspect(aspect) ?? (resolvedWidth && resolvedHeight ? resolvedWidth / resolvedHeight : void 0), imageAlt = decorative ? "" : alt ?? "", framed = frame !== !1 && frame !== "none", stringSrc = String(src), useNextImage = optimized && stringSrc.startsWith("/"), shouldFill = fill && resolvedAspect, frameStyle = {
-    ...resolvedAspect ? { aspectRatio: String(resolvedAspect) } : {},
-    width: fill ? "100%" : resolvedWidth ? `min(100%, ${resolvedWidth}px)` : "100%"
-  }, imageClassName = cn(
+  let layout = resolveImageLayout({
+    aspect,
+    fill,
+    height,
+    intrinsicHeight,
+    intrinsicWidth,
+    width
+  }), imageAlt = decorative ? "" : alt ?? "", framed = frame !== !1 && frame !== "none", stringSrc = String(src), useNextImage = optimized && stringSrc.startsWith("/"), imageClassName = cn(
     "block h-full w-full transition-opacity duration-200",
     fill ? "object-cover" : "object-contain",
     zoom && "cursor-zoom-in hover:opacity-90",
     className
-  ), image = useNextImage ? shouldFill ? /* @__PURE__ */ jsx(
-    NextImage,
-    {
+  ), image = renderImage({
+    fill: layout.canOptimizeWithFill,
+    height: layout.height,
+    optimized: useNextImage,
+    priority,
+    quality,
+    sizes,
+    width: layout.width,
+    imageProps: {
       alt: imageAlt,
       "aria-hidden": decorative || void 0,
       className: imageClassName,
-      fill: !0,
-      priority,
-      quality,
-      sizes: sizes ?? "(max-width: 768px) 100vw, min(var(--publish-content-width, 72rem), 100vw)",
       src: stringSrc,
       ...props
     }
-  ) : resolvedWidth && resolvedHeight ? /* @__PURE__ */ jsx(
-    NextImage,
-    {
-      alt: imageAlt,
-      "aria-hidden": decorative || void 0,
-      className: imageClassName,
-      height: resolvedHeight,
-      priority,
-      quality,
-      sizes: sizes ?? `(max-width: 768px) 100vw, min(${resolvedWidth}px, 100vw)`,
-      src: stringSrc,
-      width: resolvedWidth,
-      ...props
-    }
-  ) : (
-    // biome-ignore lint/performance/noImgElement: remote and non-manifest images may not have dimensions available at runtime.
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        alt: imageAlt,
-        "aria-hidden": decorative || void 0,
-        className: imageClassName,
-        loading: priority ? "eager" : "lazy",
-        src: stringSrc,
-        ...props
-      }
-    )
-  ) : (
-    // biome-ignore lint/performance/noImgElement: MDX media supports generated project assets, SVGs, and remote CDN images without requiring Next image optimizer configuration.
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        alt: imageAlt,
-        "aria-hidden": decorative || void 0,
-        className: imageClassName,
-        height: resolvedHeight,
-        loading: priority ? "eager" : "lazy",
-        src: stringSrc,
-        width: resolvedWidth,
-        ...props
-      }
-    )
-  ), content = /* @__PURE__ */ jsx(
+  }), content = /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
         "relative mx-auto max-w-full overflow-hidden",
         framed && "rounded-media border border-stroke-2 bg-surface-2"
       ),
-      style: frameStyle,
+      style: layout.style,
       children: /* @__PURE__ */ jsx(ImageZoom, { enabled: zoom, children: image })
     }
   );

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

@@ -6,7 +6,7 @@ function InlineCode({ className, ...props }) {
     "code",
     {
       className: cn(
-        "not-markdown-prose h-fit rounded-inline-code border border-typography-code-stroke bg-typography-code-surface px-[0.35em] py-[0.15em] font-mono text-[0.95em] font-normal leading-[1.25] text-typography-code-foreground [a_&]:text-typography-link-foreground [pre_&]:border-0 [pre_&]:bg-transparent [pre_&]:p-0 [pre_&]:text-inherit",
+        "not-markdown-prose mx-[0.08em] inline-block rounded-inline-code bg-typography-code-surface px-[0.2em] py-[0.05em] font-mono text-[0.875em] font-normal leading-[1.4] text-typography-code-foreground in-[pre]:m-0 in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:text-[1em] in-[pre]:leading-[inherit] in-[pre]:text-inherit",
         className
       ),
       ...props

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

@@ -9,7 +9,7 @@ declare const kbdVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type KbdProps$1 = HTMLAttributes<HTMLElement> & VariantProps<typeof kbdVariants>;
 
-type KbdProps = KbdProps$1;
-declare function Kbd(props: KbdProps): react_jsx_runtime.JSX.Element;
+type KbdProps = Omit<KbdProps$1, "size">;
+declare function Kbd({ className, ...props }: KbdProps): react_jsx_runtime.JSX.Element;
 
 export { Kbd, type KbdProps };

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

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

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

@@ -1,8 +1,39 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LinkProps } from '../../../../link-CYaCRDb6.js';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
-import 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+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;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+
+declare const linkVariants: (props?: ({
+    color?: "accent" | "default" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    variant?: "inline" | "standalone" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type LinkVariantProps = VariantProps<typeof linkVariants>;
+type LinkStyleVariant = NonNullable<LinkVariantProps["variant"]>;
+type LinkButtonVariant = `button.${NonNullable<ButtonVariantProps["variant"]>}`;
+type LinkVariant = `link.${LinkStyleVariant}` | LinkButtonVariant;
+type NamedLinkColor = "accent" | "default";
+type LinkColor = NamedLinkColor | (string & {});
+type LinkProps = {
+    active?: boolean;
+    children?: ReactNode;
+    color?: LinkColor;
+    disabled?: boolean;
+    href?: string;
+    iconOnly?: ButtonVariantProps["iconOnly"];
+    leftIcon?: ReactNode;
+    prefetch?: LinkProps$1["prefetch"];
+    rightIcon?: ReactNode;
+    variant?: LinkVariant;
+} & Omit<LinkVariantProps, "color" | "variant"> & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color" | "href">;
 
 type MdxLinkProps = LinkProps;
 declare function Link({ color, href, size, variant, ...props }: MdxLinkProps): react_jsx_runtime.JSX.Element;

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

@@ -15,7 +15,7 @@ function Link({
     {
       color,
       href,
-      size,
+      size: size ?? null,
       variant,
       ...props
     }

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

@@ -18,10 +18,7 @@ function Paragraph({
   return childArray.length === 1 && isBlockMediaChild(childArray[0]) ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(
     "p",
     {
-      className: cn(
-        "my-5 text-base leading-7 text-typography-body-foreground",
-        className
-      ),
+      className: cn("my-5 text-typography-body-foreground", className),
       ...props,
       children
     }

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

@@ -6,7 +6,7 @@ function TaskList({ className, ...props }) {
     "ul",
     {
       className: cn(
-        "my-5 space-y-2 pl-6 text-base leading-7 text-typography-body-foreground [&>li]:pl-1",
+        "my-5 space-y-2 pl-6 text-typography-body-foreground [&>li]:pl-1",
         className
       ),
       ...props

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

@@ -1,6 +1,6 @@
 "use client";
 
-// src/components/mdx/video-player.tsx
+// src/components/mdx/video/video-player.tsx
 import { cn } from "@publish.os/nextjs/utils/cn";
 import { usePathname } from "next/navigation";
 import { useCallback, useEffect, useId, useState } from "react";
@@ -102,7 +102,7 @@ function VideoPlayer({
             )
           }
         ),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": !0, className: "absolute inset-0 grid place-items-center", children: /* @__PURE__ */ jsx("span", { className: "border-shadow-3 flex size-14 items-center justify-center rounded-full border border-media-control-stroke bg-media-control-surface text-media-control-foreground transition-transform duration-200 group-hover:scale-105", children: /* @__PURE__ */ jsx("span", { className: "ml-1 block h-0 w-0 border-y-[9px] border-y-transparent border-l-[14px] border-l-current" }) }) })
+        /* @__PURE__ */ jsx("span", { "aria-hidden": !0, className: "absolute inset-0 grid place-items-center", children: /* @__PURE__ */ jsx("span", { className: "border-shadow-3 flex size-14 items-center justify-center rounded-full border border-media-control-stroke bg-media-control-surface text-media-control-foreground transition-transform duration-200 group-hover:scale-105", children: /* @__PURE__ */ jsx("span", { className: "ml-1 block h-0 w-0 border-y-[9px] border-y-transparent border-l-14 border-l-current" }) }) })
       ]
     }
   );

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

@@ -1,4 +1,4 @@
-// src/components/mdx/video.tsx
+// src/components/mdx/video/video.tsx
 import { FigureCaption } from "@publish.os/nextjs/kernel/components/mdx/components/figure-caption";
 import {
   VideoPlayer

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

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

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

@@ -1,9 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as MDXComponents } from '../../../types-sM2g9nW0.js';
+import { MDXComponents } from './types.js';
+import { P as PageData } from '../../../types-CJWRG05y.js';
 import { ReactNode, AnchorHTMLAttributes } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
-import { B as ButtonVariantProps } from '../../../button-CFdx-ohV.js';
+import { a as ButtonVariantProps } from '../../../button-c3WGnxIj.js';
 import { VariantProps } from 'class-variance-authority';
+import { LinkProps as LinkProps$1 } from 'next/link';
 import 'mdx/types.js';
 
 type FigureProps = React.ComponentPropsWithoutRef<"figure"> & {
@@ -31,7 +33,7 @@ type ImageProps = Omit<React.ComponentPropsWithoutRef<"img">, "height" | "sizes"
 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 const linkVariants: (props?: ({
-    color?: "accent" | "default" | null | undefined;
+    color?: "default" | "accent" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
     variant?: "inline" | "standalone" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -49,6 +51,7 @@ type LinkProps = {
     href?: string;
     iconOnly?: ButtonVariantProps["iconOnly"];
     leftIcon?: ReactNode;
+    prefetch?: LinkProps$1["prefetch"];
     rightIcon?: ReactNode;
     variant?: LinkVariant;
 } & Omit<LinkVariantProps, "color" | "variant"> & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color" | "href">;
@@ -70,10 +73,11 @@ declare function Video({ caption, className, frame, height, poster, src, title,
 
 type MDXProps = {
     components?: MDXComponents;
-    content: string;
-    pageId?: string;
-    slug?: string;
+    page: PageData;
 };
-declare function MDX({ components, content, pageId, slug }: MDXProps): Promise<react_jsx_runtime.JSX.Element>;
+declare function renderMdx({ components, page, siteComponents, }: MDXProps & {
+    siteComponents?: MDXComponents;
+}): Promise<react_jsx_runtime.JSX.Element>;
+declare function MDX(props: MDXProps): Promise<react_jsx_runtime.JSX.Element>;
 
-export { Figure, Image, Link, MDX, MDXComponents, type MDXProps, Video };
+export { Figure, Image, Link, MDX, MDXComponents, type MDXProps, Video, renderMdx };