@frontlit/page-builder 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/server/islands/header-mobile-menu.js

@@ -0,0 +1,422 @@
+"use client";
+"use client";
+
+// src/blocks/header/mobile-menu.tsx
+import { useState as useState2 } from "react";
+import { MenuIcon } from "lucide-react";
+
+// src/components/nav-link.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var LINK_CONTEXT_KEY = /* @__PURE__ */ Symbol.for("@frontlit/page-builder/link-context");
+var globalRegistry = globalThis;
+var PageBuilderLinkContext = globalRegistry[LINK_CONTEXT_KEY] ?? (globalRegistry[LINK_CONTEXT_KEY] = React.createContext(null));
+function usePageBuilderLinkComponent() {
+  return React.useContext(PageBuilderLinkContext);
+}
+function NavLink({
+  href,
+  children,
+  openInSameTab = true,
+  style,
+  className = "",
+  onClick
+}) {
+  const LinkComponent = usePageBuilderLinkComponent();
+  const isInternal = Boolean(href && href.startsWith("/"));
+  const isInPageNavigation = Boolean(href && href.startsWith("#"));
+  const target = openInSameTab ? void 0 : "_blank";
+  const rel = target === "_blank" ? "noopener noreferrer" : void 0;
+  const handleClick = () => {
+    onClick?.();
+  };
+  if (!isInPageNavigation && isInternal && LinkComponent) {
+    return /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        href,
+        style,
+        className,
+        onClick: handleClick,
+        target,
+        rel,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      style,
+      className,
+      target,
+      rel,
+      onClick: handleClick,
+      children
+    }
+  );
+}
+
+// src/primitives/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/primitives/components/ui/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React2.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx2(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/primitives/button.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Button2 = ({
+  variant = "default",
+  size = "default",
+  disabled = false,
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const buttonStyles = theme?.interactives?.button;
+  const typographyStyles = theme?.typography?.button;
+  const isIcon = size === "icon";
+  const classes = cn(
+    // Base styles
+    "",
+    // Theme typography
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    // Theme interactivity. Icon buttons stay square — CTA padding
+    // would stretch them off the size="icon" box.
+    !isIcon && buttonStyles?.padding?.x,
+    !isIcon && buttonStyles?.padding?.y,
+    buttonStyles?.border?.width,
+    buttonStyles?.border?.radius,
+    buttonStyles?.border?.style,
+    // buttonStyles?.border?.color,
+    buttonStyles?.shadow,
+    // Theme disabled states
+    disabled && buttonStyles?.disabled?.opacity,
+    disabled && buttonStyles?.disabled?.cursor,
+    disabled && buttonStyles?.disabled?.color,
+    disabled && buttonStyles?.disabled?.background,
+    disabled && buttonStyles?.disabled?.border,
+    // User overrides
+    buttonStyles?.custom,
+    className
+  );
+  return /* @__PURE__ */ jsx3(
+    Button,
+    {
+      variant,
+      size,
+      disabled,
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+
+// src/primitives/drawer.tsx
+import { useLayoutEffect, useRef, useState } from "react";
+
+// src/primitives/components/ui/sheet.tsx
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva as cva2 } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React3 from "react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var Sheet = SheetPrimitive.Root;
+var SheetTrigger = SheetPrimitive.Trigger;
+var SheetPortal = SheetPrimitive.Portal;
+var SheetOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  SheetPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+var sheetVariants = cva2(
+  "fixed z-50 gap-4 bg-background p-6 text-foreground shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetContent = React3.forwardRef(({ side = "right", className, children, container, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { container: container ?? void 0, children: [
+  /* @__PURE__ */ jsx4(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    SheetPrimitive.Content,
+    {
+      ref,
+      className: cn(sheetVariants({ side }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ jsx4(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx4(
+  "div",
+  {
+    className: cn("flex flex-col space-y-2 text-center sm:text-left", className),
+    ...props
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx4(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  SheetPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+var SheetDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  SheetPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+// src/primitives/drawer.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function Drawer({
+  trigger,
+  children,
+  side = "left",
+  open,
+  setOpen,
+  style,
+  className = "",
+  theme: _theme
+}) {
+  const triggerWrapRef = useRef(null);
+  const [container, setContainer] = useState(null);
+  useLayoutEffect(() => {
+    const root = triggerWrapRef.current?.closest(
+      "[data-pb-theme], .pb-theme"
+    );
+    setContainer(root ?? null);
+  }, []);
+  return /* @__PURE__ */ jsxs2(Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx5(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx5("span", { ref: triggerWrapRef, children: trigger }) }),
+    /* @__PURE__ */ jsx5(
+      SheetContent,
+      {
+        side,
+        style,
+        container,
+        className: cn(
+          "bg-background text-foreground",
+          !container && "pb-theme",
+          className
+        ),
+        children
+      }
+    )
+  ] });
+}
+
+// src/primitives/link.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Link = ({
+  children,
+  className = "",
+  theme,
+  disabled = false,
+  style,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.link;
+  const linkStyles = theme?.interactives?.link;
+  const classes = cn(
+    // Base styles
+    "font-medium cursor-pointer",
+    // Theme typography
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    // Theme interactivity
+    linkStyles?.padding?.x,
+    linkStyles?.padding?.y,
+    linkStyles?.border?.width,
+    linkStyles?.border?.radius,
+    linkStyles?.border?.style,
+    // Theme disabled states
+    disabled && linkStyles?.disabled?.color,
+    disabled && linkStyles?.disabled?.background,
+    disabled && linkStyles?.disabled?.border,
+    disabled && linkStyles?.disabled?.opacity,
+    disabled && linkStyles?.disabled?.cursor,
+    // User overrides
+    linkStyles?.custom,
+    className
+  );
+  return /* @__PURE__ */ jsx6(
+    "span",
+    {
+      className: classes,
+      style: {
+        ...style,
+        textShadow: linkStyles?.textShadow || void 0
+      },
+      ...props,
+      children
+    }
+  );
+};
+
+// src/blocks/header/header-link.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function HeaderLink({
+  link,
+  theme,
+  onClick,
+  fullWidth = false
+}) {
+  if (link.isButton) {
+    return /* @__PURE__ */ jsx7(NavLink, { href: link.href, onClick, children: /* @__PURE__ */ jsx7(
+      Button2,
+      {
+        size: fullWidth ? void 0 : "sm",
+        theme,
+        className: fullWidth ? "w-full" : void 0,
+        children: link.label
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx7(NavLink, { href: link.href, onClick, className: "no-underline", children: /* @__PURE__ */ jsx7(Link, { theme, className: "no-underline", children: link.label }) });
+}
+
+// src/blocks/header/mobile-menu.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+function HeaderMobileMenu({
+  links,
+  ctaLabel,
+  ctaHref,
+  theme
+}) {
+  const [open, setOpen] = useState2(false);
+  return /* @__PURE__ */ jsx8(
+    Drawer,
+    {
+      open,
+      setOpen,
+      side: "right",
+      theme,
+      trigger: /* @__PURE__ */ jsxs3(Button2, { variant: "outline", size: "sm", theme, children: [
+        /* @__PURE__ */ jsx8(MenuIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx8("span", { className: "sr-only", children: "Toggle menu" })
+      ] }),
+      children: /* @__PURE__ */ jsxs3("div", { className: "mt-6 flex flex-col gap-4", children: [
+        links.map((link) => /* @__PURE__ */ jsx8(
+          HeaderLink,
+          {
+            link,
+            theme,
+            onClick: () => setOpen(false),
+            fullWidth: true
+          },
+          link.id
+        )),
+        ctaLabel && ctaHref && /* @__PURE__ */ jsx8(NavLink, { href: ctaHref, onClick: () => setOpen(false), children: /* @__PURE__ */ jsx8(Button2, { theme, className: "w-full", children: ctaLabel }) })
+      ] })
+    }
+  );
+}
+export {
+  HeaderMobileMenu
+};
+//# sourceMappingURL=header-mobile-menu.js.map

package/dist/server/islands/header-mobile-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/header/mobile-menu.tsx","../../../src/components/nav-link.tsx","../../../src/primitives/lib/utils.ts","../../../src/primitives/components/ui/button.tsx","../../../src/primitives/button.tsx","../../../src/primitives/drawer.tsx","../../../src/primitives/components/ui/sheet.tsx","../../../src/primitives/link.tsx","../../../src/blocks/header/header-link.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { MenuIcon } from \"lucide-react\";\nimport type { ThemeStyle } from \"../../models\";\nimport type { HeaderNavLink } from \"./settings\";\nimport { NavLink } from \"../../components/nav-link\";\nimport { Button, Drawer } from \"../../primitives\";\nimport { HeaderLink } from \"./header-link\";\n\n/**\n * The header's mobile drawer. It is the only interactive part of the header,\n * so it is the only part sent to the browser on server-rendered pages.\n */\nexport function HeaderMobileMenu({\n  links,\n  ctaLabel,\n  ctaHref,\n  theme,\n}: {\n  links: HeaderNavLink[];\n  ctaLabel?: string;\n  ctaHref?: string;\n  theme: ThemeStyle;\n}) {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Drawer\n      open={open}\n      setOpen={setOpen}\n      side=\"right\"\n      theme={theme}\n      trigger={\n        <Button variant=\"outline\" size=\"sm\" theme={theme}>\n          <MenuIcon className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Toggle menu</span>\n        </Button>\n      }\n    >\n      <div className=\"mt-6 flex flex-col gap-4\">\n        {links.map((link) => (\n          <HeaderLink\n            key={link.id}\n            link={link}\n            theme={theme}\n            onClick={() => setOpen(false)}\n            fullWidth\n          />\n        ))}\n        {ctaLabel && ctaHref && (\n          <NavLink href={ctaHref} onClick={() => setOpen(false)}>\n            <Button theme={theme} className=\"w-full\">\n              {ctaLabel}\n            </Button>\n          </NavLink>\n        )}\n      </div>\n    </Drawer>\n  );\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\nexport interface PageBuilderLinkProps {\n  href: string;\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n  target?: string;\n  rel?: string;\n}\n\n/**\n * Optional host-supplied link. Next.js apps can pass `next/link`; Vite / Remix\n * / plain React hosts can omit it and NavLink will render a native `<a>`.\n */\nexport type PageBuilderLinkComponent = React.ComponentType<PageBuilderLinkProps>;\n\n// Server-rendered pages load this module more than once (each client island is\n// bundled on its own), so the context is shared through the global registry\n// rather than created per copy. Otherwise a provider from one copy would be\n// invisible to a NavLink from another.\nconst LINK_CONTEXT_KEY = Symbol.for(\"@frontlit/page-builder/link-context\");\nconst globalRegistry = globalThis as typeof globalThis & {\n  [LINK_CONTEXT_KEY]?: React.Context<PageBuilderLinkComponent | null>;\n};\nconst PageBuilderLinkContext = (globalRegistry[LINK_CONTEXT_KEY] ??=\n  React.createContext<PageBuilderLinkComponent | null>(null));\n\nexport function PageBuilderLinkProvider({\n  component,\n  children,\n}: {\n  component?: PageBuilderLinkComponent | null;\n  children: React.ReactNode;\n}) {\n  return (\n    <PageBuilderLinkContext.Provider value={component ?? null}>\n      {children}\n    </PageBuilderLinkContext.Provider>\n  );\n}\n\nexport function usePageBuilderLinkComponent() {\n  return React.useContext(PageBuilderLinkContext);\n}\n\ninterface NavLinkProps {\n  href: string;\n  children?: React.ReactNode;\n  openInSameTab?: boolean;\n  style?: React.CSSProperties;\n  className?: string;\n  onClick?: () => void;\n}\n\n/**\n * A navigation-aware link used inside block widgets. In-page anchors scroll\n * to the target. Internal paths (`/...`) use the host `linkComponent` when\n * one is provided (e.g. Next.js `Link`); everything else is a native `<a>`.\n */\nexport function NavLink({\n  href,\n  children,\n  openInSameTab = true,\n  style,\n  className = \"\",\n  onClick,\n}: NavLinkProps) {\n  const LinkComponent = usePageBuilderLinkComponent();\n  const isInternal = Boolean(href && href.startsWith(\"/\"));\n  const isInPageNavigation = Boolean(href && href.startsWith(\"#\"));\n  const target = openInSameTab ? undefined : \"_blank\";\n  const rel = target === \"_blank\" ? \"noopener noreferrer\" : undefined;\n  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = () => {\n    onClick?.();\n  };\n\n  if (!isInPageNavigation && isInternal && LinkComponent) {\n    return (\n      <LinkComponent\n        href={href}\n        style={style}\n        className={className}\n        onClick={handleClick}\n        target={target}\n        rel={rel}\n      >\n        {children}\n      </LinkComponent>\n    );\n  }\n\n  return (\n    <a\n      href={href}\n      style={style}\n      className={className}\n      target={target}\n      rel={rel}\n      onClick={handleClick}\n    >\n      {children}\n    </a>\n  );\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import type React from \"react\";\nimport type { ThemeStyle } from \"../models\";\nimport {\n  Button as ShadcnButton,\n  type ButtonProps as ShadcnButtonProps,\n} from \"./components/ui/button\";\nimport { cn } from \"./lib/utils\";\n\nexport interface ButtonProps extends ShadcnButtonProps {\n  theme?: ThemeStyle;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  variant = \"default\",\n  size = \"default\",\n  disabled = false,\n  children,\n  className = \"\",\n  theme,\n  ...props\n}) => {\n  const buttonStyles = theme?.interactives?.button;\n  const typographyStyles = theme?.typography?.button;\n  const isIcon = size === \"icon\";\n\n  const classes = cn(\n    // Base styles\n    \"\",\n    // Theme typography\n    typographyStyles?.fontFamily,\n    typographyStyles?.fontSize,\n    typographyStyles?.fontWeight,\n    typographyStyles?.lineHeight,\n    typographyStyles?.letterSpacing,\n    typographyStyles?.textTransform,\n    typographyStyles?.textDecoration,\n    typographyStyles?.textOverflow,\n    // Theme interactivity. Icon buttons stay square — CTA padding\n    // would stretch them off the size=\"icon\" box.\n    !isIcon && buttonStyles?.padding?.x,\n    !isIcon && buttonStyles?.padding?.y,\n    buttonStyles?.border?.width,\n    buttonStyles?.border?.radius,\n    buttonStyles?.border?.style,\n    // buttonStyles?.border?.color,\n    buttonStyles?.shadow,\n    // Theme disabled states\n    disabled && buttonStyles?.disabled?.opacity,\n    disabled && buttonStyles?.disabled?.cursor,\n    disabled && buttonStyles?.disabled?.color,\n    disabled && buttonStyles?.disabled?.background,\n    disabled && buttonStyles?.disabled?.border,\n    // User overrides\n    buttonStyles?.custom,\n    className,\n  );\n\n  return (\n    <ShadcnButton\n      variant={variant}\n      size={size}\n      disabled={disabled}\n      className={classes}\n      {...props}\n    >\n      {children}\n    </ShadcnButton>\n  );\n};\n","\"use client\";\n\nimport { type ReactNode, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ThemeStyle } from \"../models\";\nimport { Sheet, SheetContent, SheetTrigger } from \"./components/ui/sheet\";\nimport { cn } from \"./lib/utils\";\n\ninterface DrawerProps {\n  trigger: ReactNode;\n  children: ReactNode;\n  side?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  style?: React.CSSProperties;\n  className?: string;\n  theme?: ThemeStyle;\n}\n\nexport function Drawer({\n  trigger,\n  children,\n  side = \"left\",\n  open,\n  setOpen,\n  style,\n  className = \"\",\n  theme: _theme,\n}: DrawerProps) {\n  const triggerWrapRef = useRef<HTMLSpanElement>(null);\n  const [container, setContainer] = useState<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    const root = triggerWrapRef.current?.closest<HTMLElement>(\n      \"[data-pb-theme], .pb-theme\",\n    );\n    // Not `instanceof HTMLElement`: inside the builder's preview iframe the\n    // root belongs to the iframe's realm, so that check always fails and the\n    // sheet would open over the whole editor instead of the preview.\n    setContainer(root ?? null);\n  }, []);\n\n  return (\n    <Sheet open={open} onOpenChange={setOpen}>\n      <SheetTrigger asChild>\n        <span ref={triggerWrapRef}>{trigger}</span>\n      </SheetTrigger>\n      <SheetContent\n        side={side}\n        style={style}\n        container={container}\n        className={cn(\n          \"bg-background text-foreground\",\n          !container && \"pb-theme\",\n          className,\n        )}\n      >\n        {children}\n      </SheetContent>\n    </Sheet>\n  );\n}\n","import * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst Sheet = SheetPrimitive.Root;\n\nconst SheetTrigger = SheetPrimitive.Trigger;\n\nconst SheetClose = SheetPrimitive.Close;\n\nconst SheetPortal = SheetPrimitive.Portal;\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n    ref={ref}\n  />\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst sheetVariants = cva(\n  \"fixed z-50 gap-4 bg-background p-6 text-foreground shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  },\n);\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {\n  /** Mount the overlay and panel here so scoped theme tokens still apply. */\n  container?: HTMLElement | null;\n}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, container, ...props }, ref) => (\n  <SheetPortal container={container ?? undefined}>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      {children}\n      <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </SheetPrimitive.Close>\n    </SheetPrimitive.Content>\n  </SheetPortal>\n));\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\nconst SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"flex flex-col space-y-2 text-center sm:text-left\", className)}\n    {...props}\n  />\n);\nSheetHeader.displayName = \"SheetHeader\";\n\nconst SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className,\n    )}\n    {...props}\n  />\n);\nSheetFooter.displayName = \"SheetFooter\";\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\n    {...props}\n  />\n));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n};\n","import type React from \"react\";\nimport type { ThemeStyle } from \"../models\";\nimport { cn } from \"./lib/utils\";\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  children: React.ReactNode;\n  className?: string;\n  theme?: ThemeStyle;\n  disabled?: boolean;\n  style?: React.CSSProperties;\n}\n\nexport const Link: React.FC<LinkProps> = ({\n  children,\n  className = \"\",\n  theme,\n  disabled = false,\n  style,\n  ...props\n}) => {\n  const typographyStyles = theme?.typography?.link;\n  const linkStyles = theme?.interactives?.link;\n  const classes = cn(\n    // Base styles\n    \"font-medium cursor-pointer\",\n    // Theme typography\n    typographyStyles?.fontFamily,\n    typographyStyles?.fontSize,\n    typographyStyles?.fontWeight,\n    typographyStyles?.lineHeight,\n    typographyStyles?.letterSpacing,\n    typographyStyles?.textTransform,\n    typographyStyles?.textDecoration,\n    typographyStyles?.textOverflow,\n    // Theme interactivity\n    linkStyles?.padding?.x,\n    linkStyles?.padding?.y,\n    linkStyles?.border?.width,\n    linkStyles?.border?.radius,\n    linkStyles?.border?.style,\n    // Theme disabled states\n    disabled && linkStyles?.disabled?.color,\n    disabled && linkStyles?.disabled?.background,\n    disabled && linkStyles?.disabled?.border,\n    disabled && linkStyles?.disabled?.opacity,\n    disabled && linkStyles?.disabled?.cursor,\n    // User overrides\n    linkStyles?.custom,\n    className,\n  );\n\n  return (\n    <span\n      className={classes}\n      style={{\n        ...style,\n        textShadow: linkStyles?.textShadow || undefined,\n      }}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n","import type { ThemeStyle } from \"../../models\";\nimport type { HeaderNavLink } from \"./settings\";\nimport { NavLink } from \"../../components/nav-link\";\nimport { Button, Link as PrimitiveLink } from \"../../primitives\";\n\nexport function HeaderLink({\n  link,\n  theme,\n  onClick,\n  fullWidth = false,\n}: {\n  link: HeaderNavLink;\n  theme?: ThemeStyle;\n  onClick?: () => void;\n  /** Mobile menu: button links span the sheet, like the CTA. */\n  fullWidth?: boolean;\n}) {\n  if (link.isButton) {\n    return (\n      <NavLink href={link.href} onClick={onClick}>\n        <Button\n          size={fullWidth ? undefined : \"sm\"}\n          theme={theme}\n          className={fullWidth ? \"w-full\" : undefined}\n        >\n          {link.label}\n        </Button>\n      </NavLink>\n    );\n  }\n\n  return (\n    <NavLink href={link.href} onClick={onClick} className=\"no-underline\">\n      <PrimitiveLink theme={theme} className=\"no-underline\">\n        {link.label}\n      </PrimitiveLink>\n    </NavLink>\n  );\n}\n"],"mappings":"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","names":["useState","React","jsx","jsx","Button","cva","React","jsx","jsx","cva","jsx","jsxs","jsx","jsx","Button","jsx","jsxs","useState","Button"]}

package/dist/server/islands/inline-embed.d.ts

@@ -0,0 +1,28 @@
+import React__default from 'react';
+
+interface InlineEmbedProps {
+    content: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+/**
+ * Snippets are usually written as a standalone document (they used to live in
+ * an iframe). Recreate that inside the shadow root: the host plays `html` and
+ * is a size container, a wrapper plays `body`, and viewport units and width
+ * media queries are rewritten to measure the embed (as they measured the
+ * iframe) instead of the browser window. "Fill the frame" heights are dropped,
+ * as are scripts that only synced state with `window.parent`, which the shadow
+ * host handles itself.
+ */
+declare function prepareEmbed(content: string): {
+    links: string;
+    body: string;
+};
+/**
+ * Renders a raw HTML snippet inline, inside a declarative shadow root. The
+ * markup is part of the server-rendered page (so crawlers index it) while its
+ * styles stay isolated from the site's in both directions.
+ */
+declare const InlineEmbed: ({ content, className, style }: InlineEmbedProps) => React__default.JSX.Element;
+
+export { InlineEmbed, prepareEmbed };

package/dist/server/islands/inline-embed.js

@@ -0,0 +1,84 @@
+"use client";
+"use client";
+
+// src/components/inline-embed.tsx
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var HOISTED_LINK = /<link\b[^>]*(?:rel=["']?(?:preconnect|dns-prefetch|preload)|href=["'][^"']*fonts?\.)[^>]*>/gi;
+function prepareEmbed(content) {
+  const links = content.match(HOISTED_LINK)?.join("") ?? "";
+  const markup = content.replace(HOISTED_LINK, "").replace(/<!doctype[^>]*>|<\/?(?:html|head|body)\b[^>]*>/gi, "").replace(
+    /<script\b[^>]*>(?:(?!<\/script>)[\s\S])*window\.parent[\s\S]*?<\/script>/gi,
+    ""
+  ).replace(
+    /<style\b([^>]*)>([\s\S]*?)<\/style>/gi,
+    (_, attrs, css) => {
+      const scoped = css.replace(/:root\b/g, ":host").replace(/(^|[\s,{}])html\.dark\b/g, "$1:host(.dark)").replace(/(^|[\s,{}])html(?=[\s,{:.[>~+])/g, "$1:host").replace(/(^|[\s,{}])body(?=[\s,{:.[>~+])/g, "$1[data-embed-body]").replace(/min-height\s*:\s*100d?vh/gi, "min-height:0").replace(/(\d*\.?\d+)vw\b/gi, "$1cqw").replace(
+        /@media\s+(?:only\s+)?(?:screen\s+and\s+)?(\([^{]*\bwidth\b[^{]*)\{/gi,
+        "@container $1{"
+      );
+      return `<style${attrs}>${scoped}</style>`;
+    }
+  );
+  const body = `<style>:host{display:block;container-type:inline-size;overflow-x:clip}</style><div data-embed-body>${markup}</div>`;
+  return { links, body };
+}
+function runScripts(root) {
+  for (const old of root.querySelectorAll("script")) {
+    const script = document.createElement("script");
+    for (const { name, value } of old.attributes) script.setAttribute(name, value);
+    script.textContent = old.textContent;
+    old.replaceWith(script);
+  }
+}
+var InlineEmbed = ({ content, className, style }) => {
+  const hostRef = useRef(null);
+  const appliedRef = useRef(null);
+  const { links, body } = prepareEmbed(content);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const root = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+    if (appliedRef.current === body) return;
+    if (appliedRef.current !== null || !root.hasChildNodes()) {
+      root.innerHTML = body;
+      runScripts(root);
+    }
+    appliedRef.current = body;
+  }, [body]);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const sync = () => host.classList.toggle(
+      "dark",
+      !!host.parentElement?.closest(".dark") || document.documentElement.classList.contains("dark")
+    );
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: hostRef,
+      className,
+      style,
+      suppressHydrationWarning: true,
+      dangerouslySetInnerHTML: {
+        // Only the HTML parser turns the template into a shadow root; on the
+        // client the effect attaches it instead.
+        __html: typeof window === "undefined" ? `${links}<template shadowrootmode="open">${body}</template>` : links
+      }
+    }
+  );
+};
+export {
+  InlineEmbed,
+  prepareEmbed
+};
+//# sourceMappingURL=inline-embed.js.map

package/dist/server/islands/inline-embed.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/inline-embed.tsx"],"sourcesContent":["\"use client\";\n\nimport type React from \"react\";\nimport { useEffect, useRef } from \"react\";\n\ninterface InlineEmbedProps {\n  content: string;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n// Font stylesheets and connection hints only work at document level (a\n// shadow root ignores @font-face), so these links are hoisted out of it.\nconst HOISTED_LINK =\n  /<link\\b[^>]*(?:rel=[\"']?(?:preconnect|dns-prefetch|preload)|href=[\"'][^\"']*fonts?\\.)[^>]*>/gi;\n\n/**\n * Snippets are usually written as a standalone document (they used to live in\n * an iframe). Recreate that inside the shadow root: the host plays `html` and\n * is a size container, a wrapper plays `body`, and viewport units and width\n * media queries are rewritten to measure the embed (as they measured the\n * iframe) instead of the browser window. \"Fill the frame\" heights are dropped,\n * as are scripts that only synced state with `window.parent`, which the shadow\n * host handles itself.\n */\nexport function prepareEmbed(content: string) {\n  const links = content.match(HOISTED_LINK)?.join(\"\") ?? \"\";\n  const markup = content\n    .replace(HOISTED_LINK, \"\")\n    .replace(/<!doctype[^>]*>|<\\/?(?:html|head|body)\\b[^>]*>/gi, \"\")\n    .replace(\n      /<script\\b[^>]*>(?:(?!<\\/script>)[\\s\\S])*window\\.parent[\\s\\S]*?<\\/script>/gi,\n      \"\",\n    )\n    .replace(\n      /<style\\b([^>]*)>([\\s\\S]*?)<\\/style>/gi,\n      (_, attrs: string, css: string) => {\n        const scoped = css\n          .replace(/:root\\b/g, \":host\")\n          .replace(/(^|[\\s,{}])html\\.dark\\b/g, \"$1:host(.dark)\")\n          .replace(/(^|[\\s,{}])html(?=[\\s,{:.[>~+])/g, \"$1:host\")\n          .replace(/(^|[\\s,{}])body(?=[\\s,{:.[>~+])/g, \"$1[data-embed-body]\")\n          .replace(/min-height\\s*:\\s*100d?vh/gi, \"min-height:0\")\n          .replace(/(\\d*\\.?\\d+)vw\\b/gi, \"$1cqw\")\n          .replace(\n            /@media\\s+(?:only\\s+)?(?:screen\\s+and\\s+)?(\\([^{]*\\bwidth\\b[^{]*)\\{/gi,\n            \"@container $1{\",\n          );\n        return `<style${attrs}>${scoped}</style>`;\n      },\n    );\n\n  const body = `<style>:host{display:block;container-type:inline-size;overflow-x:clip}</style><div data-embed-body>${markup}</div>`;\n  return { links, body };\n}\n\nfunction runScripts(root: ShadowRoot) {\n  for (const old of root.querySelectorAll(\"script\")) {\n    const script = document.createElement(\"script\");\n    for (const { name, value } of old.attributes) script.setAttribute(name, value);\n    script.textContent = old.textContent;\n    old.replaceWith(script);\n  }\n}\n\n/**\n * Renders a raw HTML snippet inline, inside a declarative shadow root. The\n * markup is part of the server-rendered page (so crawlers index it) while its\n * styles stay isolated from the site's in both directions.\n */\nexport const InlineEmbed = ({ content, className, style }: InlineEmbedProps) => {\n  const hostRef = useRef<HTMLDivElement>(null);\n  const appliedRef = useRef<string | null>(null);\n  const { links, body } = prepareEmbed(content);\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n\n    // A server-rendered host already has its shadow root from the HTML\n    // parser; a client-rendered one (editor, client navigation) does not,\n    // because innerHTML ignores declarative shadow roots.\n    const root = host.shadowRoot ?? host.attachShadow({ mode: \"open\" });\n    if (appliedRef.current === body) return;\n    // The HTML parser already ran the scripts of a server-rendered shadow\n    // root; only markup set through innerHTML (which never runs scripts)\n    // needs them re-created, or they'd run twice.\n    if (appliedRef.current !== null || !root.hasChildNodes()) {\n      root.innerHTML = body;\n      runScripts(root);\n    }\n    appliedRef.current = body;\n  }, [body]);\n\n  // Mirror the site's color mode onto the host so snippets can use\n  // `:host(.dark)`.\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const sync = () =>\n      host.classList.toggle(\n        \"dark\",\n        !!host.parentElement?.closest(\".dark\") ||\n          document.documentElement.classList.contains(\"dark\"),\n      );\n    sync();\n    const observer = new MutationObserver(sync);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n      subtree: true,\n    });\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      ref={hostRef}\n      className={className}\n      style={style}\n      suppressHydrationWarning\n      dangerouslySetInnerHTML={{\n        // Only the HTML parser turns the template into a shadow root; on the\n        // client the effect attaches it instead.\n        __html:\n          typeof window === \"undefined\"\n            ? `${links}<template shadowrootmode=\"open\">${body}</template>`\n            : links,\n      }}\n    />\n  );\n};\n"],"mappings":";;;;AAGA,SAAS,WAAW,cAAc;AAiH9B;AAvGJ,IAAM,eACJ;AAWK,SAAS,aAAa,SAAiB;AAC5C,QAAM,QAAQ,QAAQ,MAAM,YAAY,GAAG,KAAK,EAAE,KAAK;AACvD,QAAM,SAAS,QACZ,QAAQ,cAAc,EAAE,EACxB,QAAQ,oDAAoD,EAAE,EAC9D;AAAA,IACC;AAAA,IACA;AAAA,EACF,EACC;AAAA,IACC;AAAA,IACA,CAAC,GAAG,OAAe,QAAgB;AACjC,YAAM,SAAS,IACZ,QAAQ,YAAY,OAAO,EAC3B,QAAQ,4BAA4B,gBAAgB,EACpD,QAAQ,oCAAoC,SAAS,EACrD,QAAQ,oCAAoC,qBAAqB,EACjE,QAAQ,8BAA8B,cAAc,EACpD,QAAQ,qBAAqB,OAAO,EACpC;AAAA,QACC;AAAA,QACA;AAAA,MACF;AACF,aAAO,SAAS,KAAK,IAAI,MAAM;AAAA,IACjC;AAAA,EACF;AAEF,QAAM,OAAO,sGAAsG,MAAM;AACzH,SAAO,EAAE,OAAO,KAAK;AACvB;AAEA,SAAS,WAAW,MAAkB;AACpC,aAAW,OAAO,KAAK,iBAAiB,QAAQ,GAAG;AACjD,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,eAAW,EAAE,MAAM,MAAM,KAAK,IAAI,WAAY,QAAO,aAAa,MAAM,KAAK;AAC7E,WAAO,cAAc,IAAI;AACzB,QAAI,YAAY,MAAM;AAAA,EACxB;AACF;AAOO,IAAM,cAAc,CAAC,EAAE,SAAS,WAAW,MAAM,MAAwB;AAC9E,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,aAAa,OAAsB,IAAI;AAC7C,QAAM,EAAE,OAAO,KAAK,IAAI,aAAa,OAAO;AAE5C,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AAKX,UAAM,OAAO,KAAK,cAAc,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAClE,QAAI,WAAW,YAAY,KAAM;AAIjC,QAAI,WAAW,YAAY,QAAQ,CAAC,KAAK,cAAc,GAAG;AACxD,WAAK,YAAY;AACjB,iBAAW,IAAI;AAAA,IACjB;AACA,eAAW,UAAU;AAAA,EACvB,GAAG,CAAC,IAAI,CAAC;AAIT,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AACX,UAAM,OAAO,MACX,KAAK,UAAU;AAAA,MACb;AAAA,MACA,CAAC,CAAC,KAAK,eAAe,QAAQ,OAAO,KACnC,SAAS,gBAAgB,UAAU,SAAS,MAAM;AAAA,IACtD;AACF,SAAK;AACL,UAAM,WAAW,IAAI,iBAAiB,IAAI;AAC1C,aAAS,QAAQ,SAAS,iBAAiB;AAAA,MACzC,YAAY;AAAA,MACZ,iBAAiB,CAAC,OAAO;AAAA,MACzB,SAAS;AAAA,IACX,CAAC;AACD,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,0BAAwB;AAAA,MACxB,yBAAyB;AAAA;AAAA;AAAA,QAGvB,QACE,OAAO,WAAW,cACd,GAAG,KAAK,mCAAmC,IAAI,gBAC/C;AAAA,MACR;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/server/islands/marquee-track.d.ts

@@ -0,0 +1,18 @@
+import React__default from 'react';
+
+/**
+ * Infinite horizontal scroller. Measures the width of one copy of the
+ * content, then renders enough duplicate copies to always cover at least
+ * twice the container's width, and animates a translateX loop across
+ * exactly one content-width — because the duplicates repeat the same
+ * sequence, the loop point is visually seamless regardless of how the
+ * content width compares to the container width.
+ */
+declare function MarqueeTrack({ children, speed, direction, pauseOnHover, }: {
+    children: React__default.ReactNode;
+    speed: number;
+    direction: "left" | "right";
+    pauseOnHover?: boolean;
+}): React__default.JSX.Element;
+
+export { MarqueeTrack };