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

package/dist/{chunk-SGNRWWG3.js → chunk-J7Z4UW45.js}

@@ -1,7 +1,7 @@
 "use client";
 import { getMediaUrl } from './chunk-XU7ALPGQ.js';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import { X, Check, Circle, ChevronRight, ChevronDown, ChevronUp } from 'lucide-react';
+import { X, Check, Circle, ChevronRight, ChevronDown, ChevronUp, Copy } from 'lucide-react';
 import * as React7 from 'react';
 import React7__default, { useRef, useState, useLayoutEffect } from 'react';
 import { clsx } from 'clsx';
@@ -388,29 +388,82 @@ var Caption = ({
   );
   return /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
 };
-var Header4 = ({
-  children,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const typographyStyles = theme?.typography?.header4;
-  const classes = cn(
-    // Base styles
-    "scroll-m-20 text-xl font-semibold tracking-normal",
-    // Theme overrides
-    typographyStyles?.fontFamily,
-    typographyStyles?.fontSize,
-    typographyStyles?.fontWeight,
-    typographyStyles?.lineHeight,
-    typographyStyles?.letterSpacing,
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
-    className
-  );
-  return /* @__PURE__ */ jsx("h4", { className: classes, ...props, children });
+var FLUID_MIN_VIEWPORT = 360;
+var FLUID_MAX_VIEWPORT = 1280;
+var TAILWIND_TEXT_PX = {
+  "text-xs": 12,
+  "text-sm": 14,
+  "text-base": 16,
+  "text-lg": 18,
+  "text-xl": 20,
+  "text-2xl": 24,
+  "text-3xl": 30,
+  "text-4xl": 36,
+  "text-5xl": 48,
+  "text-6xl": 60,
+  "text-7xl": 72,
+  "text-8xl": 96,
+  "text-9xl": 128
 };
+var rem = (px) => `${+(px / 16).toFixed(4)}rem`;
+function fluidFontSize({ min, max }) {
+  const slope = (max - min) / (FLUID_MAX_VIEWPORT - FLUID_MIN_VIEWPORT);
+  const intercept = min - slope * FLUID_MIN_VIEWPORT;
+  return `clamp(${rem(Math.min(min, max))}, ${rem(intercept)} + ${+(slope * 100).toFixed(4)}vw, ${rem(Math.max(min, max))})`;
+}
+function themeSize(typography) {
+  if (typography?.fluid) return fluidFontSize(typography.fluid);
+  const px = TAILWIND_TEXT_PX[typography?.fontSize ?? ""];
+  return px ? rem(px) : void 0;
+}
+function createHeading(displayName, defaultTag, baseClasses, getTypography) {
+  const Heading = ({
+    children,
+    className = "",
+    theme,
+    as: Tag = defaultTag,
+    sizeClassName,
+    style,
+    ...props
+  }) => {
+    const typography = getTypography(theme);
+    const fluid = typography?.fluid;
+    const classes = cn(
+      baseClasses,
+      typography?.fontSize,
+      // A class (not an inline font-size) so `sizeClassName` still wins.
+      fluid && "text-[length:var(--pb-theme-size)]",
+      sizeClassName,
+      typography?.fontFamily,
+      typography?.fontWeight,
+      typography?.lineHeight,
+      typography?.letterSpacing,
+      typography?.textTransform,
+      typography?.textDecoration,
+      typography?.textOverflow,
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        className: classes,
+        style: { "--pb-theme-size": themeSize(typography), ...style },
+        ...props,
+        children
+      }
+    );
+  };
+  Heading.displayName = displayName;
+  return Heading;
+}
+
+// src/primitives/header4.tsx
+var Header4 = createHeading(
+  "Header4",
+  "h4",
+  "scroll-m-20 text-xl font-semibold tracking-normal",
+  (theme) => theme?.typography?.header4
+);
 var PageCard = ({
   isLink,
   children,
@@ -718,8 +771,10 @@ function Drawer({
   const triggerWrapRef = useRef(null);
   const [container, setContainer] = useState(null);
   useLayoutEffect(() => {
-    const root = triggerWrapRef.current?.closest("[data-pb-theme], .pb-theme");
-    setContainer(root instanceof HTMLElement ? root : null);
+    const root = triggerWrapRef.current?.closest(
+      "[data-pb-theme], .pb-theme"
+    );
+    setContainer(root ?? null);
   }, []);
   return /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { ref: triggerWrapRef, children: trigger }) }),
@@ -971,75 +1026,90 @@ var DropdownMenuSubContent = React7.forwardRef(({ className, theme: providedThem
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 var DropdownMenuArrow = DropdownMenuPrimitive.Arrow;
-var Header1 = ({
-  children,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const typographyStyles = theme?.typography?.header1;
-  const classes = cn(
-    // Base styles
-    "scroll-m-20 text-4xl font-bold tracking-tight",
-    // Theme overrides
-    typographyStyles?.fontFamily,
-    typographyStyles?.fontSize,
-    typographyStyles?.fontWeight,
-    typographyStyles?.lineHeight,
-    typographyStyles?.letterSpacing,
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
-    className
-  );
-  return /* @__PURE__ */ jsx("h1", { className: classes, ...props, children });
-};
-var Header2 = ({
-  children,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const typographyStyles = theme?.typography?.header2;
-  const classes = cn(
-    // Base styles
-    "scroll-m-20 text-3xl font-bold tracking-tight",
-    // Theme overrides
-    typographyStyles?.fontFamily,
-    typographyStyles?.fontSize,
-    typographyStyles?.fontWeight,
-    typographyStyles?.lineHeight,
-    typographyStyles?.letterSpacing,
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
-    className
-  );
-  return /* @__PURE__ */ jsx("h2", { className: classes, ...props, children });
-};
-var Header3 = ({
-  children,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const typographyStyles = theme?.typography?.header3;
-  const classes = cn(
-    // Base styles
-    "scroll-m-20 text-2xl font-semibold tracking-normal",
-    // Theme overrides
-    typographyStyles?.fontFamily,
-    typographyStyles?.fontSize,
-    typographyStyles?.fontWeight,
-    typographyStyles?.lineHeight,
-    typographyStyles?.letterSpacing,
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
-    className
+function CodeSnippet({ code, prompt, theme, className }) {
+  const [copied, setCopied] = React7__default.useState(false);
+  const typography = theme?.typography?.code;
+  const card = theme?.interactives?.card;
+  React7__default.useEffect(() => {
+    if (!copied) return;
+    const timeout = setTimeout(() => setCopied(false), 2e3);
+    return () => clearTimeout(timeout);
+  }, [copied]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full min-w-0 items-start gap-3 border border-border bg-card text-card-foreground",
+        card?.border?.radius ?? "rounded-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "pre",
+          {
+            className: cn(
+              "min-w-0 flex-1 overflow-x-auto whitespace-pre px-4 py-3 text-left",
+              typography?.fontFamily ?? "font-jetbrains-mono",
+              typography?.fontSize ?? "text-sm",
+              typography?.fontWeight,
+              typography?.lineHeight ?? "leading-relaxed",
+              typography?.letterSpacing
+            ),
+            children: [
+              prompt && /* @__PURE__ */ jsx("span", { className: "mr-2 select-none text-muted-foreground", "aria-hidden": "true", children: prompt }),
+              /* @__PURE__ */ jsx("code", { children: code })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": copied ? "Copied" : "Copy to clipboard",
+            title: copied ? "Copied" : "Copy",
+            className: "m-1.5 inline-flex h-8 w-8 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            onClick: () => {
+              void navigator.clipboard?.writeText(code).then(() => setCopied(true));
+            },
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
   );
-  return /* @__PURE__ */ jsx("h3", { className: classes, ...props, children });
-};
+}
+
+// src/primitives/display.tsx
+var Display = createHeading(
+  "Display",
+  "h1",
+  "scroll-m-20 text-balance text-5xl font-bold tracking-tight",
+  (theme) => theme?.typography?.display ?? theme?.typography?.header1
+);
+
+// src/primitives/header1.tsx
+var Header1 = createHeading(
+  "Header1",
+  "h1",
+  "scroll-m-20 text-balance text-4xl font-bold tracking-tight",
+  (theme) => theme?.typography?.header1
+);
+
+// src/primitives/header2.tsx
+var Header2 = createHeading(
+  "Header2",
+  "h2",
+  "scroll-m-20 text-balance text-3xl font-bold tracking-tight",
+  (theme) => theme?.typography?.header2
+);
+
+// src/primitives/header3.tsx
+var Header3 = createHeading(
+  "Header3",
+  "h3",
+  "scroll-m-20 text-2xl font-semibold tracking-normal",
+  (theme) => theme?.typography?.header3
+);
 var Image2 = ({
   src,
   alt = "",
@@ -1287,34 +1357,43 @@ var RadioGroupItem = React7.forwardRef(({ className, theme: providedTheme, ...pr
   );
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-function resolveBackgroundLayerStyle(background, nextTheme) {
-  const isDark = nextTheme === "dark";
+function resolveBackgroundLayer(background) {
   const attachment = background.backgroundAttachment || "scroll";
   if (background.type === "color") {
     return {
-      backgroundColor: isDark ? background.backgroundColorDark || background.backgroundColor : background.backgroundColor
+      className: "[background-color:var(--pb-bg)] dark:[background-color:var(--pb-bg-dark,var(--pb-bg))]",
+      style: {
+        "--pb-bg": background.backgroundColor,
+        "--pb-bg-dark": background.backgroundColorDark
+      }
     };
   }
   if (background.type === "image") {
     const bgUrl = getMediaUrl(background.media);
     return {
-      backgroundImage: bgUrl ? `url(${bgUrl})` : void 0,
-      backgroundSize: background.backgroundSize || "cover",
-      backgroundPosition: background.backgroundPosition || "center",
-      backgroundRepeat: background.backgroundRepeat || "no-repeat",
-      backgroundAttachment: attachment,
-      maskImage: background.maskImage,
-      WebkitMaskImage: background.maskImage
+      style: {
+        backgroundImage: bgUrl ? `url(${bgUrl})` : void 0,
+        backgroundSize: background.backgroundSize || "cover",
+        backgroundPosition: background.backgroundPosition || "center",
+        backgroundRepeat: background.backgroundRepeat || "no-repeat",
+        backgroundAttachment: attachment,
+        maskImage: background.maskImage,
+        WebkitMaskImage: background.maskImage
+      }
     };
   }
   return {
-    backgroundImage: isDark ? background.backgroundImageDark || background.backgroundImage : background.backgroundImage,
-    backgroundSize: background.gradientBackgroundSize || "cover",
-    backgroundPosition: background.gradientBackgroundPosition || "center",
-    backgroundRepeat: background.gradientBackgroundRepeat || "no-repeat",
-    backgroundAttachment: attachment,
-    maskImage: background.gradientMaskImage,
-    WebkitMaskImage: background.gradientMaskImage
+    className: "[background-image:var(--pb-bg-image)] dark:[background-image:var(--pb-bg-image-dark,var(--pb-bg-image))]",
+    style: {
+      "--pb-bg-image": background.backgroundImage,
+      "--pb-bg-image-dark": background.backgroundImageDark,
+      backgroundSize: background.gradientBackgroundSize || "cover",
+      backgroundPosition: background.gradientBackgroundPosition || "center",
+      backgroundRepeat: background.gradientBackgroundRepeat || "no-repeat",
+      backgroundAttachment: attachment,
+      maskImage: background.gradientMaskImage,
+      WebkitMaskImage: background.gradientMaskImage
+    }
   };
 }
 var Section = ({
@@ -1322,11 +1401,15 @@ var Section = ({
   className = "",
   theme,
   background,
-  nextTheme,
   component = "section",
   ...props
 }) => {
-  const classes = cn("bg-background text-foreground relative", className);
+  const classes = cn(
+    "bg-background text-foreground relative",
+    component === "section" && theme?.structure?.section?.dividers && "border-t border-border",
+    className
+  );
+  const backgroundLayer = background ? resolveBackgroundLayer(background) : null;
   const isFixed = background && background.type !== "color" && background.backgroundAttachment === "fixed";
   return /* @__PURE__ */ jsx(Fragment, { children: React7__default.createElement(
     component,
@@ -1338,22 +1421,25 @@ var Section = ({
       ...props
     },
     /* @__PURE__ */ jsxs(Fragment, { children: [
-      background && /* @__PURE__ */ jsx(
+      backgroundLayer && /* @__PURE__ */ jsx(
         "div",
         {
-          suppressHydrationWarning: true,
           "aria-hidden": true,
-          className: "pointer-events-none absolute inset-0 z-0",
-          style: resolveBackgroundLayerStyle(background, nextTheme)
+          className: cn(
+            "pointer-events-none absolute inset-0 z-0",
+            backgroundLayer.className
+          ),
+          style: backgroundLayer.style
         }
       ),
       background && background.type === "image" && /* @__PURE__ */ jsx(
         "div",
         {
           "aria-hidden": true,
-          className: "pointer-events-none absolute inset-0 z-[1]",
+          className: "pointer-events-none absolute inset-0 z-[1] [background-color:var(--pb-overlay)] dark:[background-color:var(--pb-overlay-dark,var(--pb-overlay))]",
           style: {
-            backgroundColor: nextTheme === "dark" ? background?.overlay?.colorDark || background?.overlay?.color : background?.overlay?.color,
+            "--pb-overlay": background?.overlay?.color,
+            "--pb-overlay-dark": background?.overlay?.colorDark,
             opacity: background?.overlay?.opacity ? background.overlay.opacity / 10 : 0,
             mixBlendMode: background?.overlay?.blendMode
           }
@@ -1805,19 +1891,29 @@ var themeStyles = {
       letterSpacing: "tracking-widest",
       textTransform: "uppercase"
     },
+    display: {
+      fontFamily: "font-inter",
+      fontSize: "text-6xl",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 34, max: 56 }
+    },
     header1: {
       fontFamily: "font-inter",
       fontSize: "text-5xl",
       fontWeight: "font-semibold",
       lineHeight: "leading-tight",
-      letterSpacing: "tracking-tighter"
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 28, max: 48 }
     },
     header2: {
       fontFamily: "font-inter",
       fontSize: "text-4xl",
       fontWeight: "font-semibold",
       lineHeight: "leading-tight",
-      letterSpacing: "tracking-tight"
+      letterSpacing: "tracking-tight",
+      fluid: { min: 24, max: 36 }
     },
     header3: {
       fontFamily: "font-inter",
@@ -1891,6 +1987,7 @@ var themeStyles = {
       letterSpacing: "tracking-normal"
     }
   },
+  highlight: "marker",
   interactives: {
     button: {
       padding: {
@@ -2082,19 +2179,29 @@ var themeStyles2 = {
       letterSpacing: "tracking-widest",
       textTransform: "uppercase"
     },
+    display: {
+      fontFamily: "font-playfair-display",
+      fontSize: "text-7xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 34, max: 60 }
+    },
     header1: {
       fontFamily: "font-playfair-display",
       fontSize: "text-6xl",
       fontWeight: "font-medium",
-      lineHeight: "leading-none",
-      letterSpacing: "tracking-tighter"
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 30, max: 52 }
     },
     header2: {
       fontFamily: "font-playfair-display",
       fontSize: "text-4xl",
       fontWeight: "font-medium",
       lineHeight: "leading-tight",
-      letterSpacing: "tracking-tighter"
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 24, max: 36 }
     },
     header3: {
       fontFamily: "font-source-serif-4",
@@ -2330,19 +2437,29 @@ var themeStyles3 = {
       letterSpacing: "tracking-widest",
       textTransform: "uppercase"
     },
+    display: {
+      fontFamily: "font-roboto",
+      fontSize: "text-6xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 34, max: 56 }
+    },
     header1: {
       fontFamily: "font-roboto",
       fontSize: "text-5xl",
       fontWeight: "font-medium",
       lineHeight: "leading-tight",
-      letterSpacing: "tracking-tighter"
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 28, max: 48 }
     },
     header2: {
       fontFamily: "font-roboto",
       fontSize: "text-4xl",
       fontWeight: "font-medium",
       lineHeight: "leading-tight",
-      letterSpacing: "tracking-tight"
+      letterSpacing: "tracking-tight",
+      fluid: { min: 24, max: 36 }
     },
     header3: {
       fontFamily: "font-roboto",
@@ -2576,19 +2693,29 @@ var themeStyles4 = {
       letterSpacing: "tracking-widest",
       textTransform: "uppercase"
     },
+    display: {
+      fontFamily: "font-inter",
+      fontSize: "text-6xl",
+      fontWeight: "font-black",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 34, max: 56 }
+    },
     header1: {
       fontFamily: "font-inter",
       fontSize: "text-5xl",
       fontWeight: "font-black",
-      lineHeight: "leading-none",
-      letterSpacing: "tracking-tighter"
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 28, max: 48 }
     },
     header2: {
       fontFamily: "font-inter",
       fontSize: "text-4xl",
       fontWeight: "font-extrabold",
       lineHeight: "leading-tight",
-      letterSpacing: "tracking-tight"
+      letterSpacing: "tracking-tight",
+      fluid: { min: 24, max: 36 }
     },
     header3: {
       fontFamily: "font-inter",
@@ -2648,6 +2775,7 @@ var themeStyles4 = {
       textTransform: "uppercase"
     }
   },
+  highlight: "marker",
   interactives: {
     button: {
       padding: { x: "px-6", y: "py-3" },
@@ -2822,19 +2950,29 @@ var themeStyles5 = {
       letterSpacing: "tracking-widest",
       textTransform: "uppercase"
     },
+    display: {
+      fontFamily: "font-montserrat",
+      fontSize: "text-7xl",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 34, max: 60 }
+    },
     header1: {
       fontFamily: "font-montserrat",
       fontSize: "text-6xl",
       fontWeight: "font-semibold",
-      lineHeight: "leading-none",
-      letterSpacing: "tracking-tighter"
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 30, max: 52 }
     },
     header2: {
       fontFamily: "font-montserrat",
       fontSize: "text-4xl",
       fontWeight: "font-semibold",
       lineHeight: "leading-tight",
-      letterSpacing: "tracking-tight"
+      letterSpacing: "tracking-tight",
+      fluid: { min: 24, max: 36 }
     },
     header3: {
       fontFamily: "font-montserrat",
@@ -2978,8 +3116,265 @@ var studio = {
   theme: themeStyles5
 };
 
+// src/primitives/themes/terminal.ts
+var themeStyles6 = {
+  colors: {
+    light: {
+      background: "#ffffff",
+      foreground: "#111111",
+      card: "#ffffff",
+      cardForeground: "#111111",
+      popover: "#ffffff",
+      popoverForeground: "#111111",
+      primary: "#111111",
+      primaryForeground: "#ffffff",
+      secondary: "#ffffff",
+      secondaryForeground: "#111111",
+      muted: "#f5f5f5",
+      mutedForeground: "#5c5c66",
+      accent: "#f0f0f2",
+      accentForeground: "#111111",
+      border: "#dcdce0",
+      destructive: "#d92d20",
+      input: "#111111",
+      ring: "#6d28d9",
+      chart1: "#111111",
+      chart2: "#6d28d9",
+      chart3: "#2f4ad8",
+      chart4: "#5c5c66",
+      chart5: "#a1a1aa",
+      sidebar: "#ffffff",
+      sidebarForeground: "#111111",
+      sidebarPrimary: "#111111",
+      sidebarPrimaryForeground: "#ffffff",
+      sidebarAccent: "#f0f0f2",
+      sidebarAccentForeground: "#111111",
+      sidebarBorder: "#dcdce0",
+      sidebarRing: "#6d28d9",
+      shadow2xs: "none",
+      shadowXs: "none",
+      shadowSm: "none",
+      shadowMd: "none",
+      shadowLg: "none",
+      shadowXl: "none",
+      shadow2xl: "none"
+    },
+    dark: {
+      background: "#17171a",
+      foreground: "#eae8ee",
+      card: "#1c1c20",
+      cardForeground: "#eae8ee",
+      popover: "#1c1c20",
+      popoverForeground: "#eae8ee",
+      primary: "#cba6f7",
+      primaryForeground: "#17171a",
+      secondary: "#17171a",
+      secondaryForeground: "#eae8ee",
+      muted: "#222226",
+      mutedForeground: "#9b99a3",
+      accent: "#26262b",
+      accentForeground: "#eae8ee",
+      border: "#2e2e34",
+      destructive: "#f38ba8",
+      input: "#3a3a41",
+      ring: "#cba6f7",
+      chart1: "#cba6f7",
+      chart2: "#a6e3a1",
+      chart3: "#89b4fa",
+      chart4: "#f9e2af",
+      chart5: "#f38ba8",
+      sidebar: "#17171a",
+      sidebarForeground: "#eae8ee",
+      sidebarPrimary: "#cba6f7",
+      sidebarPrimaryForeground: "#17171a",
+      sidebarAccent: "#26262b",
+      sidebarAccentForeground: "#eae8ee",
+      sidebarBorder: "#2e2e34",
+      sidebarRing: "#cba6f7",
+      shadow2xs: "none",
+      shadowXs: "none",
+      shadowSm: "none",
+      shadowMd: "none",
+      shadowLg: "none",
+      shadowXl: "none",
+      shadow2xl: "none"
+    }
+  },
+  typography: {
+    preheader: {
+      fontFamily: "font-jetbrains-mono",
+      fontSize: "text-xs",
+      fontWeight: "font-normal",
+      letterSpacing: "tracking-widest",
+      textTransform: "uppercase"
+    },
+    display: {
+      fontFamily: "font-archivo",
+      fontSize: "text-7xl",
+      fontWeight: "font-black",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight",
+      fluid: { min: 36, max: 64 }
+    },
+    header1: {
+      fontFamily: "font-archivo",
+      fontSize: "text-5xl",
+      fontWeight: "font-extrabold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight",
+      fluid: { min: 28, max: 44 }
+    },
+    header2: {
+      fontFamily: "font-archivo",
+      fontSize: "text-3xl",
+      fontWeight: "font-extrabold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight",
+      fluid: { min: 22, max: 32 }
+    },
+    header3: {
+      fontFamily: "font-archivo",
+      fontSize: "text-xl",
+      fontWeight: "font-bold",
+      lineHeight: "leading-snug",
+      letterSpacing: "tracking-tight"
+    },
+    header4: {
+      fontFamily: "font-archivo",
+      fontSize: "text-lg",
+      fontWeight: "font-bold",
+      lineHeight: "leading-snug",
+      letterSpacing: "tracking-tight"
+    },
+    subheader1: {
+      fontFamily: "font-inter",
+      fontSize: "text-lg",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    subheader2: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    text1: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    text2: {
+      fontFamily: "font-inter",
+      fontSize: "text-sm",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    link: {
+      fontFamily: "font-inter",
+      fontSize: "text-sm",
+      fontWeight: "font-medium"
+    },
+    button: {
+      fontFamily: "font-jetbrains-mono",
+      fontSize: "text-xs",
+      fontWeight: "font-medium",
+      letterSpacing: "tracking-wider",
+      textTransform: "uppercase"
+    },
+    input: {
+      fontFamily: "font-jetbrains-mono",
+      fontSize: "text-sm",
+      fontWeight: "font-normal"
+    },
+    code: {
+      fontFamily: "font-jetbrains-mono",
+      fontSize: "text-sm",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    caption: {
+      fontFamily: "font-jetbrains-mono",
+      fontSize: "text-xs",
+      fontWeight: "font-normal",
+      letterSpacing: "tracking-wider",
+      textTransform: "uppercase"
+    }
+  },
+  highlight: "marker",
+  interactives: {
+    button: {
+      padding: { x: "px-5", y: "py-3" },
+      border: { width: "border", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-none",
+      custom: "transition-colors",
+      disabled: { opacity: "opacity-50", cursor: "cursor-not-allowed" }
+    },
+    menu: {
+      padding: { x: "px-1", y: "py-1" },
+      border: { width: "border", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-none",
+      item: {
+        padding: { x: "px-3", y: "py-2" },
+        border: { radius: "rounded-none" }
+      }
+    },
+    dialog: {
+      padding: { x: "px-6", y: "py-6" },
+      border: { width: "border", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-none"
+    },
+    popover: {
+      padding: { x: "px-4", y: "py-4" },
+      border: { width: "border", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-none"
+    },
+    tooltip: {
+      padding: { x: "px-2", y: "py-1" },
+      border: { width: "border", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-none"
+    },
+    link: {
+      padding: { x: "px-0", y: "py-0" },
+      custom: "underline-offset-4 hover:underline"
+    },
+    card: {
+      padding: { x: "px-6", y: "py-6" },
+      border: { width: "border", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-none",
+      custom: ""
+    },
+    input: {
+      padding: { x: "px-4", y: "py-3" },
+      border: { width: "border", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-none",
+      custom: "",
+      disabled: { cursor: "cursor-not-allowed", opacity: "opacity-50" }
+    }
+  },
+  structure: {
+    page: { width: "max-w-6xl" },
+    section: {
+      dividers: true,
+      padding: { x: "px-6", y: "py-20" }
+    }
+  }
+};
+var terminal = {
+  id: "terminal",
+  name: "Terminal",
+  theme: themeStyles6
+};
+
 // src/primitives/themes/index.ts
-var themes = [classic, studio, midnight, editorial, neobrutalism];
+var themes = [
+  classic,
+  studio,
+  midnight,
+  editorial,
+  neobrutalism,
+  terminal
+];
 var TooltipThemeContext = React7.createContext(void 0);
 function useTooltipTheme(providedTheme) {
   const contextTheme = React7.useContext(TooltipThemeContext);
@@ -3018,6 +3413,6 @@ var TooltipContent = React7.forwardRef(({ className, sideOffset = 6, theme: prov
 });
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge2 as Badge, Button, Button2, Caption, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Header1, Header2, Header3, Header4, Image2 as Image, Input2 as Input, Label3 as Label, Link, PageCard, PageCardContent, PageCardHeader, PageCardImage, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Preheader, RadioGroup2 as RadioGroup, RadioGroupItem, Section, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Subheader1, Subheader2, Switch, Switch2, Text1, Text2, Textarea, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, cn, themes };
-//# sourceMappingURL=chunk-SGNRWWG3.js.map
-//# sourceMappingURL=chunk-SGNRWWG3.js.map
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge2 as Badge, Button, Button2, Caption, Checkbox, CodeSnippet, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Display, Drawer, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Header1, Header2, Header3, Header4, Image2 as Image, Input2 as Input, Label3 as Label, Link, PageCard, PageCardContent, PageCardHeader, PageCardImage, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Preheader, RadioGroup2 as RadioGroup, RadioGroupItem, Section, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Subheader1, Subheader2, Switch, Switch2, TAILWIND_TEXT_PX, Text1, Text2, Textarea, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, cn, createHeading, fluidFontSize, themes };
+//# sourceMappingURL=chunk-J7Z4UW45.js.map
+//# sourceMappingURL=chunk-J7Z4UW45.js.map