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

package/dist/{chunk-RBJBODQP.js → server/theme.js}

@@ -1,752 +1,3 @@
-"use client";
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React10 from 'react';
-import React10__default, { useRef, useState, useLayoutEffect } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-
-// src/primitives/lib/utils.ts
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var Preheader = ({
-  children,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const typographyStyles = theme?.typography?.preheader;
-  const classes = cn(
-    // Base styles
-    "text-sm font-medium uppercase tracking-wide",
-    // Theme typography
-    typographyStyles?.fontFamily,
-    typographyStyles?.fontSize,
-    typographyStyles?.fontWeight,
-    typographyStyles?.lineHeight,
-    typographyStyles?.letterSpacing,
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
-    className
-  );
-  return /* @__PURE__ */ jsx("p", { className: classes, ...props, children });
-};
-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
-  );
-  return /* @__PURE__ */ jsx("h3", { 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 Subheader1 = ({ children, className = "", theme, component = "h5", ...props }) => {
-  const typographyStyles = theme?.typography?.subheader1;
-  const classes = cn(
-    typographyStyles?.fontFamily || "font-sans",
-    typographyStyles?.fontSize || "text-lg",
-    typographyStyles?.fontWeight || "font-medium",
-    typographyStyles?.lineHeight || "leading-relaxed",
-    typographyStyles?.letterSpacing || "tracking-normal",
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
-    className
-  );
-  return component === "h5" ? /* @__PURE__ */ jsx("h5", { className: classes, ...props, children }) : /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
-};
-var Subheader2 = ({
-  children,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const typographyStyles = theme?.typography?.subheader2;
-  const classes = [
-    typographyStyles?.fontFamily || "font-sans",
-    typographyStyles?.fontSize || "text-base",
-    typographyStyles?.fontWeight || "font-medium",
-    typographyStyles?.lineHeight || "leading-relaxed",
-    typographyStyles?.letterSpacing || "tracking-normal",
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("h6", { className: classes, ...props, children });
-};
-var Text1 = ({ children, className = "", theme, component = "p", ...props }) => {
-  const typographyStyles = theme?.typography?.text1;
-  const classes = cn(
-    // Base styles
-    "text-base",
-    // Theme overrides
-    typographyStyles?.fontFamily,
-    typographyStyles?.fontSize,
-    typographyStyles?.fontWeight,
-    typographyStyles?.lineHeight,
-    typographyStyles?.letterSpacing,
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
-    className
-  );
-  return component === "p" ? /* @__PURE__ */ jsx("p", { className: classes, ...props, children }) : /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
-};
-var Text2 = ({ children, className = "", theme, component = "p", ...props }) => {
-  const typographyStyles = theme?.typography?.text2;
-  const classes = cn(
-    // Base styles
-    "text-sm",
-    // Theme overrides
-    typographyStyles?.fontFamily,
-    typographyStyles?.fontSize,
-    typographyStyles?.fontWeight,
-    typographyStyles?.lineHeight,
-    typographyStyles?.letterSpacing,
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
-    className
-  );
-  return component === "p" ? /* @__PURE__ */ jsx("p", { className: classes, ...props, children }) : /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
-};
-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__ */ jsx(
-    "span",
-    {
-      className: classes,
-      style: {
-        ...style,
-        textShadow: linkStyles?.textShadow || void 0
-      },
-      ...props,
-      children
-    }
-  );
-};
-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 = React10.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-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__ */ jsx(
-    Button,
-    {
-      variant,
-      size,
-      disabled,
-      className: classes,
-      ...props,
-      children
-    }
-  );
-};
-var Input = React10.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "input",
-      {
-        type,
-        className: cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
-var Input2 = React10__default.forwardRef(
-  ({
-    className = "",
-    theme,
-    error = false,
-    /*style = {},*/
-    ...props
-  }, ref) => {
-    const inputStyles = theme?.interactives?.input;
-    const typographyStyles = theme?.typography?.input;
-    const classes = cn(
-      // Base styles
-      // "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-      // Theme typography
-      typographyStyles?.fontFamily,
-      typographyStyles?.fontSize,
-      typographyStyles?.fontWeight,
-      typographyStyles?.lineHeight,
-      typographyStyles?.letterSpacing,
-      typographyStyles?.textTransform,
-      typographyStyles?.textDecoration,
-      typographyStyles?.textOverflow,
-      // Theme interactivity
-      inputStyles?.padding?.x,
-      inputStyles?.padding?.y,
-      inputStyles?.border?.width,
-      inputStyles?.border?.style,
-      inputStyles?.border?.radius,
-      // inputStyles?.border?.color,
-      inputStyles?.shadow,
-      // Theme disabled states
-      props.disabled && inputStyles?.disabled?.opacity,
-      props.disabled && inputStyles?.disabled?.cursor,
-      props.disabled && inputStyles?.disabled?.color,
-      props.disabled && inputStyles?.disabled?.background,
-      props.disabled && inputStyles?.disabled?.border,
-      // Error state
-      error && "border-red-300 focus:border-red-500 focus:ring-red-500",
-      // User overrides
-      inputStyles?.custom,
-      className
-    );
-    return /* @__PURE__ */ jsx(Input, { ref, className: classes, ...props });
-  }
-);
-Input2.displayName = "Input";
-var Textarea = React10__default.forwardRef(
-  ({ className = "", theme, error = false, ...props }, ref) => {
-    const inputStyles = theme?.interactives?.input;
-    const typographyStyles = theme?.typography?.input;
-    const classes = cn(
-      "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50",
-      typographyStyles?.fontFamily,
-      typographyStyles?.fontSize,
-      typographyStyles?.fontWeight,
-      typographyStyles?.lineHeight,
-      typographyStyles?.letterSpacing,
-      inputStyles?.padding?.x,
-      inputStyles?.padding?.y,
-      inputStyles?.border?.width,
-      inputStyles?.border?.style,
-      inputStyles?.border?.radius,
-      inputStyles?.shadow,
-      props.disabled && inputStyles?.disabled?.opacity,
-      props.disabled && inputStyles?.disabled?.cursor,
-      error && "border-red-300 focus:border-red-500 focus:ring-red-500",
-      inputStyles?.custom,
-      className
-    );
-    return /* @__PURE__ */ jsx("textarea", { ref, className: classes, ...props });
-  }
-);
-Textarea.displayName = "Textarea";
-var Caption = ({
-  children,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const typographyStyles = theme?.typography?.caption;
-  const classes = cn(
-    // Base styles
-    "text-xs leading-7 text-muted-foreground",
-    // Theme overrides
-    typographyStyles?.fontFamily,
-    typographyStyles?.fontSize,
-    typographyStyles?.fontWeight,
-    typographyStyles?.lineHeight,
-    typographyStyles?.letterSpacing,
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
-    className
-  );
-  return /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
-};
-var PageCard = ({
-  isLink,
-  children,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const cardStyles = theme?.interactives?.card;
-  const classes = cn(
-    // Base styles
-    "bg-card text-card-foreground",
-    // Theme interactivity
-    cardStyles?.border?.width,
-    cardStyles?.border?.radius,
-    cardStyles?.border?.style,
-    cardStyles?.shadow,
-    isLink ? "cursor-pointer" : "",
-    // User overrides
-    cardStyles?.custom,
-    className
-  );
-  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children });
-};
-var PageCardImage = ({
-  src,
-  alt,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const classes = cn(
-    // Base styles
-    "w-full",
-    className
-  );
-  return /* @__PURE__ */ jsx("img", { src, alt, className: classes, ...props });
-};
-var PageCardContent = ({
-  children,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const cardStyles = theme?.interactives?.card;
-  const classes = cn(
-    // Base styles
-    "p-4",
-    // Theme interactivity
-    cardStyles?.padding?.x,
-    cardStyles?.padding?.y,
-    className
-  );
-  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children });
-};
-var PageCardHeader = ({
-  children,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const classes = cn(
-    // Base styles
-    "pb-4",
-    className
-  );
-  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children: /* @__PURE__ */ jsx(Header4, { theme, children }) });
-};
-var labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
-var Label = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  LabelPrimitive.Root,
-  {
-    ref,
-    className: cn(labelVariants(), className),
-    ...props
-  }
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-var Label2 = React10__default.forwardRef(
-  ({ className = "", theme, error = false, ...props }, ref) => {
-    const typographyStyles = theme?.typography?.text2;
-    const classes = cn(
-      // Theme typography
-      typographyStyles?.fontFamily,
-      typographyStyles?.fontSize,
-      typographyStyles?.fontWeight,
-      typographyStyles?.lineHeight,
-      typographyStyles?.letterSpacing,
-      typographyStyles?.textTransform,
-      typographyStyles?.textDecoration,
-      typographyStyles?.textOverflow,
-      // Error state
-      error && "text-red-500",
-      className
-    );
-    return /* @__PURE__ */ jsx(Label, { ref, className: classes, ...props });
-  }
-);
-Label2.displayName = "Label";
-function resolveBackgroundLayerStyle(background, nextTheme) {
-  const isDark = nextTheme === "dark";
-  const attachment = background.backgroundAttachment || "scroll";
-  if (background.type === "color") {
-    return {
-      backgroundColor: isDark ? background.backgroundColorDark || background.backgroundColor : background.backgroundColor
-    };
-  }
-  if (background.type === "image") {
-    return {
-      backgroundImage: background.media?.file ? `url(${background.media.file})` : 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
-  };
-}
-var Section = ({
-  children,
-  className = "",
-  theme,
-  background,
-  nextTheme,
-  component = "section",
-  ...props
-}) => {
-  const classes = cn("bg-background text-foreground relative", className);
-  const isFixed = background && background.type !== "color" && background.backgroundAttachment === "fixed";
-  return /* @__PURE__ */ jsx(Fragment, { children: React10__default.createElement(
-    component,
-    {
-      // `overflow-clip` keeps a fixed-attachment layer painted
-      // only within the section bounds without creating a new
-      // scroll container (unlike overflow-hidden in some cases).
-      className: cn(classes, isFixed && "overflow-clip"),
-      ...props
-    },
-    /* @__PURE__ */ jsxs(Fragment, { children: [
-      background && /* @__PURE__ */ jsx(
-        "div",
-        {
-          suppressHydrationWarning: true,
-          "aria-hidden": true,
-          className: "pointer-events-none absolute inset-0 z-0",
-          style: resolveBackgroundLayerStyle(
-            background,
-            nextTheme
-          )
-        }
-      ),
-      background && background.type === "image" && /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-hidden": true,
-          className: "pointer-events-none absolute inset-0 z-[1]",
-          style: {
-            backgroundColor: nextTheme === "dark" ? background?.overlay?.colorDark || background?.overlay?.color : background?.overlay?.color,
-            opacity: background?.overlay?.opacity ? background.overlay.opacity / 10 : 0,
-            mixBlendMode: background?.overlay?.blendMode
-          }
-        }
-      ),
-      background && background.type === "image" && /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-hidden": true,
-          className: "pointer-events-none absolute inset-0 z-[2]",
-          style: {
-            backdropFilter: background?.blur ? `blur(${background?.blur}px)` : void 0
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "mx-auto z-[3] relative overflow-hidden",
-            `lg:${theme?.structure?.page?.width || "max-w-6xl"}`,
-            theme?.structure?.section?.padding?.x || "px-4",
-            theme?.structure?.section?.padding?.y || "py-4"
-          ),
-          children
-        }
-      )
-    ] })
-  ) });
-};
-var badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
-}
-var Badge2 = ({
-  variant = "default",
-  children,
-  className = "",
-  style = {},
-  theme,
-  ...props
-}) => {
-  const typographyStyles = theme?.typography?.caption;
-  const buttonStyles = theme?.interactives?.button;
-  const classes = cn(
-    // Base styles
-    // "bg-secondary",
-    // Theme typography from caption
-    typographyStyles?.fontFamily,
-    typographyStyles?.fontSize,
-    typographyStyles?.fontWeight,
-    typographyStyles?.lineHeight,
-    typographyStyles?.letterSpacing,
-    typographyStyles?.textTransform,
-    buttonStyles?.border?.width,
-    buttonStyles?.border?.radius,
-    buttonStyles?.border?.style,
-    className
-  );
-  return /* @__PURE__ */ jsx(
-    Badge,
-    {
-      variant,
-      className: classes,
-      style: {
-        ...style,
-        backgroundColor: style.backgroundColor,
-        color: style.color
-      },
-      ...props,
-      children
-    }
-  );
-};
-var Switch = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SwitchPrimitives.Root,
-  {
-    className: cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
-    ),
-    ...props,
-    ref,
-    children: /* @__PURE__ */ jsx(
-      SwitchPrimitives.Thumb,
-      {
-        className: cn(
-          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-        )
-      }
-    )
-  }
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-var Switch2 = React10__default.forwardRef(({ className = "", theme, ...props }, ref) => {
-  const classes = cn(
-    // Base styles
-    "",
-    // User overrides
-    className
-  );
-  return /* @__PURE__ */ jsx(Switch, { ref, className: classes, ...props });
-});
-
 // src/primitives/themes/classic.ts
 var themeStyles = {
   colors: {
@@ -840,19 +91,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",
@@ -926,6 +187,7 @@ var themeStyles = {
       letterSpacing: "tracking-normal"
     }
   },
+  highlight: "marker",
   interactives: {
     button: {
       padding: {
@@ -943,6 +205,30 @@ var themeStyles = {
       },
       custom: "transition-colors duration-200"
     },
+    menu: {
+      padding: { x: "px-1", y: "py-1" },
+      border: { width: "border", radius: "rounded-xl", style: "border-solid" },
+      shadow: "shadow-xs",
+      item: {
+        padding: { x: "px-3", y: "py-2" },
+        border: { radius: "rounded-lg" }
+      }
+    },
+    dialog: {
+      padding: { x: "px-6", y: "py-6" },
+      border: { width: "border-0", radius: "rounded-xl" },
+      shadow: "shadow-lg"
+    },
+    popover: {
+      padding: { x: "px-4", y: "py-4" },
+      border: { width: "border-0", radius: "rounded-xl" },
+      shadow: "shadow-md"
+    },
+    tooltip: {
+      padding: { x: "px-2", y: "py-1" },
+      border: { width: "border-0", radius: "rounded-sm" },
+      shadow: "shadow-sm"
+    },
     link: {
       custom: "underline-offset-4 hover:underline",
       disabled: {
@@ -1000,168 +286,179 @@ var classic = {
   theme: themeStyles
 };
 
-// src/primitives/themes/studio.ts
+// src/primitives/themes/editorial.ts
 var themeStyles2 = {
   colors: {
     light: {
-      background: "#f4f1ea",
-      foreground: "#1c1917",
-      card: "#fffcf7",
-      cardForeground: "#1c1917",
-      popover: "#fffcf7",
-      popoverForeground: "#1c1917",
-      primary: "#0f766e",
-      primaryForeground: "#f4fffc",
-      secondary: "#ebe4d6",
-      secondaryForeground: "#1c1917",
-      muted: "#ebe6dc",
-      mutedForeground: "#57534e",
-      accent: "#d9f3ee",
-      accentForeground: "#115e59",
-      destructive: "#dc2626",
-      border: "#e0d8cc",
-      input: "#e0d8cc",
-      ring: "#0f766e",
-      chart1: "#0f766e",
-      chart2: "#0d9488",
-      chart3: "#14b8a6",
-      chart4: "#5eead4",
-      chart5: "#ccfbf1",
-      sidebar: "#fffcf7",
-      sidebarForeground: "#1c1917",
-      sidebarPrimary: "#0f766e",
-      sidebarPrimaryForeground: "#f4fffc",
-      sidebarAccent: "#ebe4d6",
-      sidebarAccentForeground: "#1c1917",
-      sidebarBorder: "#e0d8cc",
-      sidebarRing: "#0f766e",
-      shadow2xs: "0 1px 2px 0 rgb(28 25 23 / 0.04)",
-      shadowXs: "0 1px 2px 0 rgb(28 25 23 / 0.05)",
-      shadowSm: "0 1px 2px 0 rgb(15 118 110 / 0.08), 0 1px 3px -1px rgb(28 25 23 / 0.08)",
-      shadowMd: "0 6px 16px -4px rgb(28 25 23 / 0.1), 0 2px 6px -2px rgb(15 118 110 / 0.08)",
-      shadowLg: "0 16px 32px -8px rgb(28 25 23 / 0.12), 0 6px 12px -4px rgb(15 118 110 / 0.08)",
-      shadowXl: "0 24px 48px -12px rgb(28 25 23 / 0.16)",
-      shadow2xl: "0 32px 64px -16px rgb(28 25 23 / 0.22)"
+      background: "#f6f1e8",
+      foreground: "#1a1612",
+      card: "#fffaf2",
+      cardForeground: "#1a1612",
+      popover: "#fffaf2",
+      popoverForeground: "#1a1612",
+      primary: "#1e3a8a",
+      primaryForeground: "#fffaf2",
+      secondary: "#c2410c",
+      secondaryForeground: "#fffaf2",
+      muted: "#ece4d6",
+      mutedForeground: "#5c5348",
+      accent: "#1d4ed8",
+      accentForeground: "#fffaf2",
+      border: "#e0d5c4",
+      destructive: "#b91c1c",
+      input: "#e0d5c4",
+      ring: "#1e3a8a",
+      chart1: "#1e3a8a",
+      chart2: "#c2410c",
+      chart3: "#1d4ed8",
+      chart4: "#b91c1c",
+      chart5: "#78716c",
+      sidebar: "#fffaf2",
+      sidebarForeground: "#1a1612",
+      sidebarPrimary: "#1e3a8a",
+      sidebarPrimaryForeground: "#fffaf2",
+      sidebarAccent: "#ece4d6",
+      sidebarAccentForeground: "#1a1612",
+      sidebarBorder: "#e0d5c4",
+      sidebarRing: "#1e3a8a",
+      shadow2xs: "0 1px 2px 0 rgb(26 22 18 / 0.05)",
+      shadowXs: "0 1px 2px 0 rgb(26 22 18 / 0.06)",
+      shadowSm: "0 1px 2px 0 rgb(26 22 18 / 0.06), 0 2px 6px -2px rgb(26 22 18 / 0.1)",
+      shadowMd: "0 8px 20px -6px rgb(26 22 18 / 0.12)",
+      shadowLg: "0 16px 32px -10px rgb(26 22 18 / 0.14)",
+      shadowXl: "0 24px 48px -12px rgb(26 22 18 / 0.16)",
+      shadow2xl: "0 32px 64px -16px rgb(26 22 18 / 0.2)"
     },
     dark: {
-      background: "#12100d",
-      foreground: "#f4efe6",
-      card: "#1b1814",
-      cardForeground: "#f4efe6",
-      popover: "#1b1814",
-      popoverForeground: "#f4efe6",
-      primary: "#2dd4bf",
-      primaryForeground: "#042f2e",
-      secondary: "#2a241c",
-      secondaryForeground: "#f4efe6",
-      muted: "#221e19",
-      mutedForeground: "#a8a29e",
-      accent: "#134e4a",
-      accentForeground: "#ccfbf1",
+      background: "#100e0c",
+      foreground: "#f6f1e8",
+      card: "#1b1713",
+      cardForeground: "#f6f1e8",
+      popover: "#1b1713",
+      popoverForeground: "#f6f1e8",
+      primary: "#93c5fd",
+      primaryForeground: "#100e0c",
+      secondary: "#fb923c",
+      secondaryForeground: "#100e0c",
+      muted: "#241f19",
+      mutedForeground: "#c4b8a5",
+      accent: "#60a5fa",
+      accentForeground: "#100e0c",
+      border: "#3a3228",
       destructive: "#f87171",
-      border: "#2e2922",
-      input: "#2e2922",
-      ring: "#2dd4bf",
-      chart1: "#2dd4bf",
-      chart2: "#5eead4",
-      chart3: "#99f6e4",
-      chart4: "#14b8a6",
-      chart5: "#0f766e",
-      sidebar: "#1b1814",
-      sidebarForeground: "#f4efe6",
-      sidebarPrimary: "#2dd4bf",
-      sidebarPrimaryForeground: "#042f2e",
-      sidebarAccent: "#2a241c",
-      sidebarAccentForeground: "#f4efe6",
-      sidebarBorder: "#2e2922",
-      sidebarRing: "#2dd4bf",
-      shadow2xs: "0 1px 2px 0 rgb(0 0 0 / 0.28)",
-      shadowXs: "0 1px 2px 0 rgb(0 0 0 / 0.32)",
-      shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.36), 0 1px 3px -1px rgb(0 0 0 / 0.4)",
-      shadowMd: "0 8px 20px -6px rgb(0 0 0 / 0.48)",
-      shadowLg: "0 16px 32px -8px rgb(0 0 0 / 0.52)",
-      shadowXl: "0 24px 48px -10px rgb(0 0 0 / 0.56)",
-      shadow2xl: "0 32px 64px -12px rgb(0 0 0 / 0.64)"
+      input: "#3a3228",
+      ring: "#93c5fd",
+      chart1: "#93c5fd",
+      chart2: "#fb923c",
+      chart3: "#60a5fa",
+      chart4: "#f87171",
+      chart5: "#a8a29e",
+      sidebar: "#1b1713",
+      sidebarForeground: "#f6f1e8",
+      sidebarPrimary: "#93c5fd",
+      sidebarPrimaryForeground: "#100e0c",
+      sidebarAccent: "#241f19",
+      sidebarAccentForeground: "#f6f1e8",
+      sidebarBorder: "#3a3228",
+      sidebarRing: "#93c5fd",
+      shadow2xs: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
+      shadowXs: "0 1px 2px 0 rgb(0 0 0 / 0.35)",
+      shadowSm: "0 2px 6px 0 rgb(0 0 0 / 0.4)",
+      shadowMd: "0 8px 20px -6px rgb(0 0 0 / 0.5)",
+      shadowLg: "0 16px 32px -10px rgb(0 0 0 / 0.55)",
+      shadowXl: "0 24px 48px -12px rgb(0 0 0 / 0.6)",
+      shadow2xl: "0 32px 64px -16px rgb(0 0 0 / 0.7)"
     }
   },
   typography: {
     preheader: {
-      fontFamily: "font-montserrat",
+      fontFamily: "font-work-sans",
       fontSize: "text-xs",
-      fontWeight: "font-semibold",
-      lineHeight: "leading-normal",
+      fontWeight: "font-medium",
+      lineHeight: "leading-relaxed",
       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-montserrat",
+      fontFamily: "font-playfair-display",
       fontSize: "text-6xl",
-      fontWeight: "font-semibold",
-      lineHeight: "leading-none",
-      letterSpacing: "tracking-tighter"
+      fontWeight: "font-medium",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 30, max: 52 }
     },
     header2: {
-      fontFamily: "font-montserrat",
+      fontFamily: "font-playfair-display",
       fontSize: "text-4xl",
-      fontWeight: "font-semibold",
+      fontWeight: "font-medium",
       lineHeight: "leading-tight",
-      letterSpacing: "tracking-tight"
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 24, max: 36 }
     },
     header3: {
-      fontFamily: "font-montserrat",
-      fontSize: "text-2xl",
-      fontWeight: "font-semibold",
+      fontFamily: "font-source-serif-4",
+      fontSize: "text-3xl",
+      fontWeight: "font-medium",
       lineHeight: "leading-snug",
       letterSpacing: "tracking-tight"
     },
     header4: {
-      fontFamily: "font-montserrat",
-      fontSize: "text-xl",
+      fontFamily: "font-source-serif-4",
+      fontSize: "text-2xl",
       fontWeight: "font-medium",
-      lineHeight: "leading-snug"
+      lineHeight: "leading-snug",
+      letterSpacing: "tracking-tight"
     },
     subheader1: {
-      fontFamily: "font-source-sans-3",
+      fontFamily: "font-source-serif-4",
       fontSize: "text-xl",
       fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     subheader2: {
-      fontFamily: "font-source-sans-3",
+      fontFamily: "font-work-sans",
       fontSize: "text-lg",
       fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     text1: {
-      fontFamily: "font-source-sans-3",
-      fontSize: "text-base",
+      fontFamily: "font-source-serif-4",
+      fontSize: "text-lg",
       fontWeight: "font-normal",
-      lineHeight: "leading-relaxed"
+      lineHeight: "leading-loose"
     },
     text2: {
-      fontFamily: "font-source-sans-3",
+      fontFamily: "font-work-sans",
       fontSize: "text-sm",
       fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     link: {
-      fontFamily: "font-source-sans-3",
+      fontFamily: "font-work-sans",
       fontSize: "text-base",
       fontWeight: "font-medium"
     },
     button: {
-      fontFamily: "font-montserrat",
+      fontFamily: "font-work-sans",
       fontSize: "text-sm",
       fontWeight: "font-medium",
       letterSpacing: "tracking-wide"
     },
     input: {
-      fontFamily: "font-source-sans-3",
+      fontFamily: "font-work-sans",
       fontSize: "text-base",
       fontWeight: "font-normal"
     },
     caption: {
-      fontFamily: "font-source-sans-3",
+      fontFamily: "font-work-sans",
       fontSize: "text-xs",
       fontWeight: "font-medium",
       lineHeight: "leading-normal",
@@ -1173,55 +470,77 @@ var themeStyles2 = {
       padding: { x: "px-6", y: "py-3" },
       border: {
         width: "border-0",
-        radius: "rounded-2xl"
+        radius: "rounded-full"
       },
-      shadow: "shadow-xs",
+      shadow: "shadow-none",
       custom: "transition-colors duration-200",
       disabled: {
         opacity: "opacity-50",
         cursor: "cursor-not-allowed"
       }
     },
+    menu: {
+      padding: { x: "px-1", y: "py-1" },
+      border: { width: "border-0", radius: "rounded-none" },
+      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-0", radius: "rounded-none" },
+      shadow: "shadow-none"
+    },
+    popover: {
+      padding: { x: "px-4", y: "py-4" },
+      border: { width: "border-0", radius: "rounded-none" },
+      shadow: "shadow-none"
+    },
+    tooltip: {
+      padding: { x: "px-2", y: "py-1" },
+      border: { width: "border-0", radius: "rounded-none" },
+      shadow: "shadow-none"
+    },
     link: {
       padding: { x: "px-0", y: "py-0" },
-      custom: "underline-offset-4 transition-colors duration-150 hover:underline"
+      custom: "underline-offset-4 decoration-1 hover:underline"
     },
     card: {
       padding: { x: "px-8", y: "py-8" },
       border: {
-        width: "border",
-        radius: "rounded-3xl",
-        style: "border-solid"
+        width: "border-0",
+        radius: "rounded-none"
       },
-      shadow: "shadow-xs",
-      custom: "transition-shadow duration-200 hover:shadow-lg"
+      shadow: "shadow-none",
+      custom: ""
     },
     input: {
-      borderRadius: "rounded-2xl",
       padding: { x: "px-4", y: "py-3" },
       border: {
         width: "border",
-        style: "border-solid",
-        radius: "rounded-2xl"
+        radius: "rounded-none",
+        style: "border-solid"
       },
       shadow: "shadow-none",
-      custom: "transition-shadow duration-150",
+      custom: "",
       disabled: {
-        cursor: "cursor-not-allowed",
-        opacity: "opacity-50"
+        opacity: "opacity-50",
+        cursor: "cursor-not-allowed"
       }
     }
   },
   structure: {
-    page: { width: "max-w-6xl" },
+    page: { width: "max-w-5xl" },
     section: {
       padding: { x: "px-6", y: "py-24" }
     }
   }
 };
-var studio = {
-  id: "studio",
-  name: "Studio",
+var editorial = {
+  id: "editorial",
+  name: "Editorial",
   theme: themeStyles2
 };
 
@@ -1318,19 +637,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",
@@ -1406,6 +735,30 @@ var themeStyles3 = {
         cursor: "cursor-not-allowed"
       }
     },
+    menu: {
+      padding: { x: "px-1", y: "py-1" },
+      border: { width: "border", radius: "rounded-2xl", style: "border-solid" },
+      shadow: "shadow-xs",
+      item: {
+        padding: { x: "px-3", y: "py-2" },
+        border: { radius: "rounded-xl" }
+      }
+    },
+    dialog: {
+      padding: { x: "px-6", y: "py-6" },
+      border: { width: "border", radius: "rounded-2xl", style: "border-solid" },
+      shadow: "shadow-xl"
+    },
+    popover: {
+      padding: { x: "px-4", y: "py-4" },
+      border: { width: "border", radius: "rounded-2xl", style: "border-solid" },
+      shadow: "shadow-lg"
+    },
+    tooltip: {
+      padding: { x: "px-2", y: "py-1" },
+      border: { width: "border", radius: "rounded-lg", style: "border-solid" },
+      shadow: "shadow-sm"
+    },
     link: {
       padding: { x: "px-0", y: "py-0" },
       custom: "underline-offset-4 hover:underline"
@@ -1448,169 +801,434 @@ var midnight = {
   theme: themeStyles3
 };
 
-// src/primitives/themes/editorial.ts
+// src/primitives/themes/neobrutalism.ts
 var themeStyles4 = {
   colors: {
     light: {
-      background: "#f6f1e8",
-      foreground: "#1a1612",
-      card: "#fffaf2",
-      cardForeground: "#1a1612",
-      popover: "#fffaf2",
-      popoverForeground: "#1a1612",
-      primary: "#1e3a8a",
-      primaryForeground: "#fffaf2",
-      secondary: "#c2410c",
-      secondaryForeground: "#fffaf2",
-      muted: "#ece4d6",
-      mutedForeground: "#5c5348",
-      accent: "#1d4ed8",
-      accentForeground: "#fffaf2",
-      border: "#e0d5c4",
-      destructive: "#b91c1c",
-      input: "#e0d5c4",
-      ring: "#1e3a8a",
-      chart1: "#1e3a8a",
-      chart2: "#c2410c",
-      chart3: "#1d4ed8",
-      chart4: "#b91c1c",
-      chart5: "#78716c",
-      sidebar: "#fffaf2",
-      sidebarForeground: "#1a1612",
-      sidebarPrimary: "#1e3a8a",
-      sidebarPrimaryForeground: "#fffaf2",
-      sidebarAccent: "#ece4d6",
-      sidebarAccentForeground: "#1a1612",
-      sidebarBorder: "#e0d5c4",
-      sidebarRing: "#1e3a8a",
-      shadow2xs: "0 1px 2px 0 rgb(26 22 18 / 0.05)",
-      shadowXs: "0 1px 2px 0 rgb(26 22 18 / 0.06)",
-      shadowSm: "0 1px 2px 0 rgb(26 22 18 / 0.06), 0 2px 6px -2px rgb(26 22 18 / 0.1)",
-      shadowMd: "0 8px 20px -6px rgb(26 22 18 / 0.12)",
-      shadowLg: "0 16px 32px -10px rgb(26 22 18 / 0.14)",
-      shadowXl: "0 24px 48px -12px rgb(26 22 18 / 0.16)",
-      shadow2xl: "0 32px 64px -16px rgb(26 22 18 / 0.2)"
+      background: "#f3fff9",
+      foreground: "#050505",
+      card: "#ffffff",
+      cardForeground: "#050505",
+      popover: "#ffffff",
+      popoverForeground: "#050505",
+      primary: "#ffe600",
+      primaryForeground: "#050505",
+      secondary: "#7df9ff",
+      secondaryForeground: "#050505",
+      muted: "#e7fff4",
+      mutedForeground: "#3f3f46",
+      accent: "#2ff2f2",
+      accentForeground: "#050505",
+      border: "#050505",
+      destructive: "#ff4911",
+      input: "#050505",
+      ring: "#050505",
+      chart1: "#ffe600",
+      chart2: "#7df9ff",
+      chart3: "#2ff2f2",
+      chart4: "#ff4911",
+      chart5: "#6fffd7",
+      sidebar: "#ffffff",
+      sidebarForeground: "#050505",
+      sidebarPrimary: "#ffe600",
+      sidebarPrimaryForeground: "#050505",
+      sidebarAccent: "#2ff2f2",
+      sidebarAccentForeground: "#050505",
+      sidebarBorder: "#050505",
+      sidebarRing: "#050505",
+      shadow2xs: "2px 2px 0 0 #050505",
+      shadowXs: "3px 3px 0 0 #050505",
+      shadowSm: "4px 4px 0 0 #050505",
+      shadowMd: "6px 6px 0 0 #050505",
+      shadowLg: "8px 8px 0 0 #050505",
+      shadowXl: "10px 10px 0 0 #050505",
+      shadow2xl: "14px 14px 0 0 #050505"
     },
     dark: {
-      background: "#100e0c",
-      foreground: "#f6f1e8",
-      card: "#1b1713",
-      cardForeground: "#f6f1e8",
-      popover: "#1b1713",
-      popoverForeground: "#f6f1e8",
-      primary: "#93c5fd",
-      primaryForeground: "#100e0c",
-      secondary: "#fb923c",
-      secondaryForeground: "#100e0c",
-      muted: "#241f19",
-      mutedForeground: "#c4b8a5",
-      accent: "#60a5fa",
-      accentForeground: "#100e0c",
-      border: "#3a3228",
-      destructive: "#f87171",
-      input: "#3a3228",
-      ring: "#93c5fd",
-      chart1: "#93c5fd",
-      chart2: "#fb923c",
-      chart3: "#60a5fa",
-      chart4: "#f87171",
-      chart5: "#a8a29e",
-      sidebar: "#1b1713",
-      sidebarForeground: "#f6f1e8",
-      sidebarPrimary: "#93c5fd",
-      sidebarPrimaryForeground: "#100e0c",
-      sidebarAccent: "#241f19",
-      sidebarAccentForeground: "#f6f1e8",
-      sidebarBorder: "#3a3228",
-      sidebarRing: "#93c5fd",
-      shadow2xs: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
-      shadowXs: "0 1px 2px 0 rgb(0 0 0 / 0.35)",
-      shadowSm: "0 2px 6px 0 rgb(0 0 0 / 0.4)",
-      shadowMd: "0 8px 20px -6px rgb(0 0 0 / 0.5)",
-      shadowLg: "0 16px 32px -10px rgb(0 0 0 / 0.55)",
-      shadowXl: "0 24px 48px -12px rgb(0 0 0 / 0.6)",
-      shadow2xl: "0 32px 64px -16px rgb(0 0 0 / 0.7)"
+      background: "#050505",
+      foreground: "#6fffd7",
+      card: "#0a0a0a",
+      cardForeground: "#6fffd7",
+      popover: "#0a0a0a",
+      popoverForeground: "#6fffd7",
+      primary: "#ffe600",
+      primaryForeground: "#050505",
+      secondary: "#7df9ff",
+      secondaryForeground: "#050505",
+      muted: "#141414",
+      mutedForeground: "#a1a1aa",
+      accent: "#2ff2f2",
+      accentForeground: "#050505",
+      border: "#6fffd7",
+      destructive: "#ff4911",
+      input: "#6fffd7",
+      ring: "#6fffd7",
+      chart1: "#ffe600",
+      chart2: "#7df9ff",
+      chart3: "#2ff2f2",
+      chart4: "#ff4911",
+      chart5: "#6fffd7",
+      sidebar: "#050505",
+      sidebarForeground: "#6fffd7",
+      sidebarPrimary: "#ffe600",
+      sidebarPrimaryForeground: "#050505",
+      sidebarAccent: "#2ff2f2",
+      sidebarAccentForeground: "#050505",
+      sidebarBorder: "#6fffd7",
+      sidebarRing: "#6fffd7",
+      shadow2xs: "2px 2px 0 0 #6fffd7",
+      shadowXs: "3px 3px 0 0 #6fffd7",
+      shadowSm: "4px 4px 0 0 #6fffd7",
+      shadowMd: "6px 6px 0 0 #6fffd7",
+      shadowLg: "8px 8px 0 0 #6fffd7",
+      shadowXl: "10px 10px 0 0 #6fffd7",
+      shadow2xl: "14px 14px 0 0 #6fffd7"
     }
   },
   typography: {
     preheader: {
-      fontFamily: "font-work-sans",
-      fontSize: "text-xs",
-      fontWeight: "font-medium",
-      lineHeight: "leading-relaxed",
+      fontFamily: "font-inter",
+      fontSize: "text-sm",
+      fontWeight: "font-bold",
       letterSpacing: "tracking-widest",
       textTransform: "uppercase"
     },
-    header1: {
-      fontFamily: "font-playfair-display",
+    display: {
+      fontFamily: "font-inter",
       fontSize: "text-6xl",
-      fontWeight: "font-medium",
-      lineHeight: "leading-none",
-      letterSpacing: "tracking-tighter"
+      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-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 28, max: 48 }
     },
     header2: {
-      fontFamily: "font-playfair-display",
+      fontFamily: "font-inter",
       fontSize: "text-4xl",
-      fontWeight: "font-medium",
+      fontWeight: "font-extrabold",
       lineHeight: "leading-tight",
-      letterSpacing: "tracking-tighter"
+      letterSpacing: "tracking-tight",
+      fluid: { min: 24, max: 36 }
     },
     header3: {
-      fontFamily: "font-source-serif-4",
-      fontSize: "text-3xl",
-      fontWeight: "font-medium",
-      lineHeight: "leading-snug",
-      letterSpacing: "tracking-tight"
-    },
-    header4: {
-      fontFamily: "font-source-serif-4",
+      fontFamily: "font-inter",
       fontSize: "text-2xl",
+      fontWeight: "font-extrabold",
+      lineHeight: "leading-snug"
+    },
+    header4: {
+      fontFamily: "font-inter",
+      fontSize: "text-xl",
+      fontWeight: "font-bold",
+      lineHeight: "leading-snug"
+    },
+    subheader1: {
+      fontFamily: "font-inter",
+      fontSize: "text-lg",
+      fontWeight: "font-medium",
+      lineHeight: "leading-relaxed"
+    },
+    subheader2: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-medium"
+    },
+    text1: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
       fontWeight: "font-medium",
+      lineHeight: "leading-relaxed"
+    },
+    text2: {
+      fontFamily: "font-inter",
+      fontSize: "text-sm",
+      fontWeight: "font-medium"
+    },
+    link: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-extrabold"
+    },
+    button: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-extrabold",
+      letterSpacing: "tracking-wide"
+    },
+    input: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-medium"
+    },
+    caption: {
+      fontFamily: "font-inter",
+      fontSize: "text-xs",
+      fontWeight: "font-bold",
+      letterSpacing: "tracking-wide",
+      textTransform: "uppercase"
+    }
+  },
+  highlight: "marker",
+  interactives: {
+    button: {
+      padding: { x: "px-6", y: "py-3" },
+      border: {
+        width: "border-2",
+        radius: "rounded-none",
+        style: "border-solid"
+      },
+      shadow: "shadow-md",
+      custom: "transition-transform duration-150 ease-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none",
+      disabled: {
+        opacity: "opacity-50",
+        cursor: "cursor-not-allowed"
+      }
+    },
+    menu: {
+      padding: { x: "px-1", y: "py-1" },
+      border: { width: "border-2", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-md",
+      item: {
+        padding: { x: "px-3", y: "py-2" },
+        border: { radius: "rounded-none" }
+      }
+    },
+    dialog: {
+      padding: { x: "px-6", y: "py-6" },
+      border: { width: "border-2", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-md"
+    },
+    popover: {
+      padding: { x: "px-4", y: "py-4" },
+      border: { width: "border-2", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-md"
+    },
+    tooltip: {
+      padding: { x: "px-2", y: "py-1" },
+      border: { width: "border-2", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-md"
+    },
+    link: {
+      padding: { x: "px-0", y: "py-0" },
+      custom: "underline decoration-2 underline-offset-4"
+    },
+    card: {
+      padding: { x: "px-6", y: "py-6" },
+      border: {
+        width: "border-2",
+        radius: "rounded-none",
+        style: "border-solid"
+      },
+      shadow: "shadow-md",
+      custom: "transition-transform duration-150 ease-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none"
+    },
+    input: {
+      padding: { x: "px-4", y: "py-3" },
+      border: {
+        width: "border-2",
+        style: "border-solid",
+        radius: "rounded-none"
+      },
+      shadow: "shadow-sm",
+      custom: "",
+      disabled: {
+        cursor: "cursor-not-allowed",
+        opacity: "opacity-50"
+      }
+    }
+  },
+  structure: {
+    page: { width: "max-w-6xl" },
+    section: {
+      padding: { x: "px-6", y: "py-16" }
+    }
+  }
+};
+var neobrutalism = {
+  id: "neobrutalism",
+  name: "Neo-Brutalism",
+  theme: themeStyles4
+};
+
+// src/primitives/themes/studio.ts
+var themeStyles5 = {
+  colors: {
+    light: {
+      background: "#f4f1ea",
+      foreground: "#1c1917",
+      card: "#fffcf7",
+      cardForeground: "#1c1917",
+      popover: "#fffcf7",
+      popoverForeground: "#1c1917",
+      primary: "#0f766e",
+      primaryForeground: "#f4fffc",
+      secondary: "#ebe4d6",
+      secondaryForeground: "#1c1917",
+      muted: "#ebe6dc",
+      mutedForeground: "#57534e",
+      accent: "#d9f3ee",
+      accentForeground: "#115e59",
+      destructive: "#dc2626",
+      border: "#e0d8cc",
+      input: "#e0d8cc",
+      ring: "#0f766e",
+      chart1: "#0f766e",
+      chart2: "#0d9488",
+      chart3: "#14b8a6",
+      chart4: "#5eead4",
+      chart5: "#ccfbf1",
+      sidebar: "#fffcf7",
+      sidebarForeground: "#1c1917",
+      sidebarPrimary: "#0f766e",
+      sidebarPrimaryForeground: "#f4fffc",
+      sidebarAccent: "#ebe4d6",
+      sidebarAccentForeground: "#1c1917",
+      sidebarBorder: "#e0d8cc",
+      sidebarRing: "#0f766e",
+      shadow2xs: "0 1px 2px 0 rgb(28 25 23 / 0.04)",
+      shadowXs: "0 1px 2px 0 rgb(28 25 23 / 0.05)",
+      shadowSm: "0 1px 2px 0 rgb(15 118 110 / 0.08), 0 1px 3px -1px rgb(28 25 23 / 0.08)",
+      shadowMd: "0 6px 16px -4px rgb(28 25 23 / 0.1), 0 2px 6px -2px rgb(15 118 110 / 0.08)",
+      shadowLg: "0 16px 32px -8px rgb(28 25 23 / 0.12), 0 6px 12px -4px rgb(15 118 110 / 0.08)",
+      shadowXl: "0 24px 48px -12px rgb(28 25 23 / 0.16)",
+      shadow2xl: "0 32px 64px -16px rgb(28 25 23 / 0.22)"
+    },
+    dark: {
+      background: "#12100d",
+      foreground: "#f4efe6",
+      card: "#1b1814",
+      cardForeground: "#f4efe6",
+      popover: "#1b1814",
+      popoverForeground: "#f4efe6",
+      primary: "#2dd4bf",
+      primaryForeground: "#042f2e",
+      secondary: "#2a241c",
+      secondaryForeground: "#f4efe6",
+      muted: "#221e19",
+      mutedForeground: "#a8a29e",
+      accent: "#134e4a",
+      accentForeground: "#ccfbf1",
+      destructive: "#f87171",
+      border: "#2e2922",
+      input: "#2e2922",
+      ring: "#2dd4bf",
+      chart1: "#2dd4bf",
+      chart2: "#5eead4",
+      chart3: "#99f6e4",
+      chart4: "#14b8a6",
+      chart5: "#0f766e",
+      sidebar: "#1b1814",
+      sidebarForeground: "#f4efe6",
+      sidebarPrimary: "#2dd4bf",
+      sidebarPrimaryForeground: "#042f2e",
+      sidebarAccent: "#2a241c",
+      sidebarAccentForeground: "#f4efe6",
+      sidebarBorder: "#2e2922",
+      sidebarRing: "#2dd4bf",
+      shadow2xs: "0 1px 2px 0 rgb(0 0 0 / 0.28)",
+      shadowXs: "0 1px 2px 0 rgb(0 0 0 / 0.32)",
+      shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.36), 0 1px 3px -1px rgb(0 0 0 / 0.4)",
+      shadowMd: "0 8px 20px -6px rgb(0 0 0 / 0.48)",
+      shadowLg: "0 16px 32px -8px rgb(0 0 0 / 0.52)",
+      shadowXl: "0 24px 48px -10px rgb(0 0 0 / 0.56)",
+      shadow2xl: "0 32px 64px -12px rgb(0 0 0 / 0.64)"
+    }
+  },
+  typography: {
+    preheader: {
+      fontFamily: "font-montserrat",
+      fontSize: "text-xs",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-normal",
+      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-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",
+      fluid: { min: 24, max: 36 }
+    },
+    header3: {
+      fontFamily: "font-montserrat",
+      fontSize: "text-2xl",
+      fontWeight: "font-semibold",
       lineHeight: "leading-snug",
       letterSpacing: "tracking-tight"
     },
+    header4: {
+      fontFamily: "font-montserrat",
+      fontSize: "text-xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-snug"
+    },
     subheader1: {
-      fontFamily: "font-source-serif-4",
+      fontFamily: "font-source-sans-3",
       fontSize: "text-xl",
       fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     subheader2: {
-      fontFamily: "font-work-sans",
+      fontFamily: "font-source-sans-3",
       fontSize: "text-lg",
       fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     text1: {
-      fontFamily: "font-source-serif-4",
-      fontSize: "text-lg",
+      fontFamily: "font-source-sans-3",
+      fontSize: "text-base",
       fontWeight: "font-normal",
-      lineHeight: "leading-loose"
+      lineHeight: "leading-relaxed"
     },
     text2: {
-      fontFamily: "font-work-sans",
+      fontFamily: "font-source-sans-3",
       fontSize: "text-sm",
       fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     link: {
-      fontFamily: "font-work-sans",
+      fontFamily: "font-source-sans-3",
       fontSize: "text-base",
       fontWeight: "font-medium"
     },
     button: {
-      fontFamily: "font-work-sans",
+      fontFamily: "font-montserrat",
       fontSize: "text-sm",
       fontWeight: "font-medium",
       letterSpacing: "tracking-wide"
     },
     input: {
-      fontFamily: "font-work-sans",
+      fontFamily: "font-source-sans-3",
       fontSize: "text-base",
       fontWeight: "font-normal"
     },
     caption: {
-      fontFamily: "font-work-sans",
+      fontFamily: "font-source-sans-3",
       fontSize: "text-xs",
       fontWeight: "font-medium",
       lineHeight: "leading-normal",
@@ -1622,275 +1240,330 @@ var themeStyles4 = {
       padding: { x: "px-6", y: "py-3" },
       border: {
         width: "border-0",
-        radius: "rounded-full"
+        radius: "rounded-2xl"
       },
-      shadow: "shadow-none",
+      shadow: "shadow-xs",
       custom: "transition-colors duration-200",
       disabled: {
         opacity: "opacity-50",
         cursor: "cursor-not-allowed"
       }
     },
+    menu: {
+      padding: { x: "px-1", y: "py-1" },
+      border: { width: "border", radius: "rounded-2xl", style: "border-solid" },
+      shadow: "shadow-xs",
+      item: {
+        padding: { x: "px-3", y: "py-2" },
+        border: { radius: "rounded-xl" }
+      }
+    },
+    dialog: {
+      padding: { x: "px-6", y: "py-6" },
+      border: { width: "border-0", radius: "rounded-2xl" },
+      shadow: "shadow-lg"
+    },
+    popover: {
+      padding: { x: "px-4", y: "py-4" },
+      border: { width: "border-0", radius: "rounded-2xl" },
+      shadow: "shadow-md"
+    },
+    tooltip: {
+      padding: { x: "px-2", y: "py-1" },
+      border: { width: "border-0", radius: "rounded-lg" },
+      shadow: "shadow-sm"
+    },
     link: {
       padding: { x: "px-0", y: "py-0" },
-      custom: "underline-offset-4 decoration-1 hover:underline"
+      custom: "underline-offset-4 transition-colors duration-150 hover:underline"
     },
     card: {
       padding: { x: "px-8", y: "py-8" },
       border: {
-        width: "border-0",
-        radius: "rounded-none"
+        width: "border",
+        radius: "rounded-3xl",
+        style: "border-solid"
       },
-      shadow: "shadow-none",
-      custom: ""
+      shadow: "shadow-xs",
+      custom: "transition-shadow duration-200 hover:shadow-lg"
     },
     input: {
+      borderRadius: "rounded-2xl",
       padding: { x: "px-4", y: "py-3" },
       border: {
         width: "border",
-        radius: "rounded-none",
-        style: "border-solid"
+        style: "border-solid",
+        radius: "rounded-2xl"
       },
       shadow: "shadow-none",
-      custom: "",
+      custom: "transition-shadow duration-150",
       disabled: {
-        opacity: "opacity-50",
-        cursor: "cursor-not-allowed"
+        cursor: "cursor-not-allowed",
+        opacity: "opacity-50"
       }
     }
   },
   structure: {
-    page: { width: "max-w-5xl" },
+    page: { width: "max-w-6xl" },
     section: {
       padding: { x: "px-6", y: "py-24" }
     }
   }
 };
-var editorial = {
-  id: "editorial",
-  name: "Editorial",
-  theme: themeStyles4
+var studio = {
+  id: "studio",
+  name: "Studio",
+  theme: themeStyles5
 };
 
-// src/primitives/themes/neobrutalism.ts
-var themeStyles5 = {
+// src/primitives/themes/terminal.ts
+var themeStyles6 = {
   colors: {
     light: {
-      background: "#f3fff9",
-      foreground: "#050505",
+      background: "#ffffff",
+      foreground: "#111111",
       card: "#ffffff",
-      cardForeground: "#050505",
+      cardForeground: "#111111",
       popover: "#ffffff",
-      popoverForeground: "#050505",
-      primary: "#ffe600",
-      primaryForeground: "#050505",
-      secondary: "#7df9ff",
-      secondaryForeground: "#050505",
-      muted: "#e7fff4",
-      mutedForeground: "#3f3f46",
-      accent: "#2ff2f2",
-      accentForeground: "#050505",
-      border: "#050505",
-      destructive: "#ff4911",
-      input: "#050505",
-      ring: "#050505",
-      chart1: "#ffe600",
-      chart2: "#7df9ff",
-      chart3: "#2ff2f2",
-      chart4: "#ff4911",
-      chart5: "#6fffd7",
+      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: "#050505",
-      sidebarPrimary: "#ffe600",
-      sidebarPrimaryForeground: "#050505",
-      sidebarAccent: "#2ff2f2",
-      sidebarAccentForeground: "#050505",
-      sidebarBorder: "#050505",
-      sidebarRing: "#050505",
-      shadow2xs: "2px 2px 0 0 #050505",
-      shadowXs: "3px 3px 0 0 #050505",
-      shadowSm: "4px 4px 0 0 #050505",
-      shadowMd: "6px 6px 0 0 #050505",
-      shadowLg: "8px 8px 0 0 #050505",
-      shadowXl: "10px 10px 0 0 #050505",
-      shadow2xl: "14px 14px 0 0 #050505"
+      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: "#050505",
-      foreground: "#6fffd7",
-      card: "#0a0a0a",
-      cardForeground: "#6fffd7",
-      popover: "#0a0a0a",
-      popoverForeground: "#6fffd7",
-      primary: "#ffe600",
-      primaryForeground: "#050505",
-      secondary: "#7df9ff",
-      secondaryForeground: "#050505",
-      muted: "#141414",
-      mutedForeground: "#a1a1aa",
-      accent: "#2ff2f2",
-      accentForeground: "#050505",
-      border: "#6fffd7",
-      destructive: "#ff4911",
-      input: "#6fffd7",
-      ring: "#6fffd7",
-      chart1: "#ffe600",
-      chart2: "#7df9ff",
-      chart3: "#2ff2f2",
-      chart4: "#ff4911",
-      chart5: "#6fffd7",
-      sidebar: "#050505",
-      sidebarForeground: "#6fffd7",
-      sidebarPrimary: "#ffe600",
-      sidebarPrimaryForeground: "#050505",
-      sidebarAccent: "#2ff2f2",
-      sidebarAccentForeground: "#050505",
-      sidebarBorder: "#6fffd7",
-      sidebarRing: "#6fffd7",
-      shadow2xs: "2px 2px 0 0 #6fffd7",
-      shadowXs: "3px 3px 0 0 #6fffd7",
-      shadowSm: "4px 4px 0 0 #6fffd7",
-      shadowMd: "6px 6px 0 0 #6fffd7",
-      shadowLg: "8px 8px 0 0 #6fffd7",
-      shadowXl: "10px 10px 0 0 #6fffd7",
-      shadow2xl: "14px 14px 0 0 #6fffd7"
+      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-inter",
-      fontSize: "text-sm",
-      fontWeight: "font-bold",
+      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-inter",
+      fontFamily: "font-archivo",
       fontSize: "text-5xl",
-      fontWeight: "font-black",
-      lineHeight: "leading-none",
-      letterSpacing: "tracking-tighter"
+      fontWeight: "font-extrabold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight",
+      fluid: { min: 28, max: 44 }
     },
     header2: {
-      fontFamily: "font-inter",
-      fontSize: "text-4xl",
+      fontFamily: "font-archivo",
+      fontSize: "text-3xl",
       fontWeight: "font-extrabold",
       lineHeight: "leading-tight",
-      letterSpacing: "tracking-tight"
+      letterSpacing: "tracking-tight",
+      fluid: { min: 22, max: 32 }
     },
     header3: {
-      fontFamily: "font-inter",
-      fontSize: "text-2xl",
-      fontWeight: "font-extrabold",
-      lineHeight: "leading-snug"
+      fontFamily: "font-archivo",
+      fontSize: "text-xl",
+      fontWeight: "font-bold",
+      lineHeight: "leading-snug",
+      letterSpacing: "tracking-tight"
     },
     header4: {
-      fontFamily: "font-inter",
-      fontSize: "text-xl",
+      fontFamily: "font-archivo",
+      fontSize: "text-lg",
       fontWeight: "font-bold",
-      lineHeight: "leading-snug"
+      lineHeight: "leading-snug",
+      letterSpacing: "tracking-tight"
     },
     subheader1: {
       fontFamily: "font-inter",
       fontSize: "text-lg",
-      fontWeight: "font-medium",
+      fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     subheader2: {
       fontFamily: "font-inter",
       fontSize: "text-base",
-      fontWeight: "font-medium"
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
     },
     text1: {
       fontFamily: "font-inter",
       fontSize: "text-base",
-      fontWeight: "font-medium",
+      fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     text2: {
       fontFamily: "font-inter",
       fontSize: "text-sm",
-      fontWeight: "font-medium"
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
     },
     link: {
       fontFamily: "font-inter",
-      fontSize: "text-base",
-      fontWeight: "font-extrabold"
+      fontSize: "text-sm",
+      fontWeight: "font-medium"
     },
     button: {
-      fontFamily: "font-inter",
-      fontSize: "text-base",
-      fontWeight: "font-extrabold",
-      letterSpacing: "tracking-wide"
+      fontFamily: "font-jetbrains-mono",
+      fontSize: "text-xs",
+      fontWeight: "font-medium",
+      letterSpacing: "tracking-wider",
+      textTransform: "uppercase"
     },
     input: {
-      fontFamily: "font-inter",
-      fontSize: "text-base",
-      fontWeight: "font-medium"
+      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-inter",
+      fontFamily: "font-jetbrains-mono",
       fontSize: "text-xs",
-      fontWeight: "font-bold",
-      letterSpacing: "tracking-wide",
+      fontWeight: "font-normal",
+      letterSpacing: "tracking-wider",
       textTransform: "uppercase"
     }
   },
+  highlight: "marker",
   interactives: {
     button: {
-      padding: { x: "px-6", y: "py-3" },
-      border: {
-        width: "border-2",
-        radius: "rounded-none",
-        style: "border-solid"
-      },
-      shadow: "shadow-md",
-      custom: "transition-transform duration-150 ease-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none",
-      disabled: {
-        opacity: "opacity-50",
-        cursor: "cursor-not-allowed"
+      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 decoration-2 underline-offset-4"
+      custom: "underline-offset-4 hover:underline"
     },
     card: {
       padding: { x: "px-6", y: "py-6" },
-      border: {
-        width: "border-2",
-        radius: "rounded-none",
-        style: "border-solid"
-      },
-      shadow: "shadow-md",
-      custom: "transition-transform duration-150 ease-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none"
+      border: { width: "border", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-none",
+      custom: ""
     },
     input: {
       padding: { x: "px-4", y: "py-3" },
-      border: {
-        width: "border-2",
-        style: "border-solid",
-        radius: "rounded-none"
-      },
-      shadow: "shadow-sm",
+      border: { width: "border", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-none",
       custom: "",
-      disabled: {
-        cursor: "cursor-not-allowed",
-        opacity: "opacity-50"
-      }
+      disabled: { cursor: "cursor-not-allowed", opacity: "opacity-50" }
     }
   },
   structure: {
     page: { width: "max-w-6xl" },
     section: {
-      padding: { x: "px-6", y: "py-16" }
+      dividers: true,
+      padding: { x: "px-6", y: "py-20" }
     }
   }
 };
-var neobrutalism = {
-  id: "neobrutalism",
-  name: "Neo-Brutalism",
-  theme: themeStyles5
+var terminal = {
+  id: "terminal",
+  name: "Terminal",
+  theme: themeStyles6
 };
 
 // src/primitives/themes/index.ts
@@ -1899,113 +1572,100 @@ var themes = [
   studio,
   midnight,
   editorial,
-  neobrutalism
+  neobrutalism,
+  terminal
 ];
-var Sheet = SheetPrimitive.Root;
-var SheetTrigger = SheetPrimitive.Trigger;
-var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  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 = cva(
-  "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"
-    }
+
+// src/renderer/generate-theme-styles.ts
+import convert from "color-convert";
+function formatHSL(hsl) {
+  return `${hsl[0]} ${hsl[1]}% ${hsl[2]}%`;
+}
+var SHORT_OR_LONG_HEX = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;
+var HEX_WITH_ALPHA = /^#([0-9a-f]{4}|[0-9a-f]{8})$/i;
+var CSS_COLOR_FUNCTION = /^(oklch|oklab|lab|lch|hwb|hsla?|rgba?|color)\(\s*[-+0-9a-z%.,/\s]+\)$/i;
+function resolveThemeColor(value) {
+  const color = value?.trim();
+  if (!color) return "";
+  if (SHORT_OR_LONG_HEX.test(color)) {
+    return `hsl(${formatHSL(convert.hex.hsl(color.replace("#", "")))})`;
   }
-);
-var SheetContent = React10.forwardRef(({ side = "right", className, children, container, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { container: container ?? void 0, children: [
-  /* @__PURE__ */ jsx(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__ */ jsx(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-var SheetTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SheetPrimitive.Title,
-  {
-    ref,
-    className: cn("text-lg font-semibold text-foreground", className),
-    ...props
+  if (HEX_WITH_ALPHA.test(color) || CSS_COLOR_FUNCTION.test(color)) return color;
+  return "";
+}
+function generateThemeStyles(theme, selector = ".pb-theme") {
+  const colors = theme?.theme?.colors;
+  if (!colors) {
+    return "";
   }
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SheetPrimitive.Description,
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
+  const { light, dark } = colors;
+  if (!light || !dark) {
+    return "";
   }
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-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 instanceof HTMLElement ? root : null);
-  }, []);
-  return /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { ref: triggerWrapRef, children: trigger }) }),
-    /* @__PURE__ */ jsx(
-      SheetContent,
-      {
-        side,
-        style,
-        container,
-        className: cn(
-          "bg-background text-foreground",
-          !container && "pb-theme",
-          className
-        ),
-        children
-      }
-    )
-  ] });
+  const block = (c) => `
+        --background: ${resolveThemeColor(c.background)};
+        --foreground: ${resolveThemeColor(c.foreground)};
+        --card: ${resolveThemeColor(c.card)};
+        --card-foreground: ${resolveThemeColor(c.cardForeground)};
+        --popover: ${resolveThemeColor(c.popover)};
+        --popover-foreground: ${resolveThemeColor(c.popoverForeground)};
+        --primary: ${resolveThemeColor(c.primary)};
+        --primary-foreground: ${resolveThemeColor(c.primaryForeground)};
+        --secondary: ${resolveThemeColor(c.secondary)};
+        --secondary-foreground: ${resolveThemeColor(c.secondaryForeground)};
+        --muted: ${resolveThemeColor(c.muted)};
+        --muted-foreground: ${resolveThemeColor(c.mutedForeground)};
+        --accent: ${resolveThemeColor(c.accent)};
+        --accent-foreground: ${resolveThemeColor(c.accentForeground)};
+        --destructive: ${resolveThemeColor(c.destructive)};
+        --border: ${resolveThemeColor(c.border)};
+        --input: ${resolveThemeColor(c.input)};
+        --ring: ${resolveThemeColor(c.ring)};
+        --chart-1: ${resolveThemeColor(c.chart1)};
+        --chart-2: ${resolveThemeColor(c.chart2)};
+        --chart-3: ${resolveThemeColor(c.chart3)};
+        --chart-4: ${resolveThemeColor(c.chart4)};
+        --chart-5: ${resolveThemeColor(c.chart5)};
+        --sidebar-background: ${resolveThemeColor(c.sidebar)};
+        --sidebar-foreground: ${resolveThemeColor(c.sidebarForeground)};
+        --sidebar-primary: ${resolveThemeColor(c.sidebarPrimary)};
+        --sidebar-primary-foreground: ${resolveThemeColor(c.sidebarPrimaryForeground)};
+        --sidebar-accent: ${resolveThemeColor(c.sidebarAccent)};
+        --sidebar-accent-foreground: ${resolveThemeColor(c.sidebarAccentForeground)};
+        --sidebar-border: ${resolveThemeColor(c.sidebarBorder)};
+        --sidebar-ring: ${resolveThemeColor(c.sidebarRing)};
+        --shadow-2xs: ${c.shadow2xs ?? ""};
+        --shadow-xs: ${c.shadowXs ?? ""};
+        --shadow-sm: ${c.shadowSm ?? ""};
+        --shadow-md: ${c.shadowMd ?? ""};
+        --shadow-lg: ${c.shadowLg ?? ""};
+        --shadow-xl: ${c.shadowXl ?? ""};
+        --shadow-2xl: ${c.shadow2xl ?? ""};
+    `;
+  return `
+        ${selector} {
+            ${block(light)}
+        }
+        ${selector}:is(.dark, .dark *) {
+            ${block(dark)}
+        }
+    `;
 }
 
-export { Badge2 as Badge, Button, Button2, Caption, Drawer, Header1, Header2, Header3, Header4, Input2 as Input, Label2 as Label, Link, PageCard, PageCardContent, PageCardHeader, PageCardImage, Preheader, Section, Subheader1, Subheader2, Switch, Switch2, Text1, Text2, Textarea, cn, themes };
-//# sourceMappingURL=chunk-RBJBODQP.js.map
-//# sourceMappingURL=chunk-RBJBODQP.js.map
+// src/theme/index.ts
+function resolveTheme(themeId, themeStyle) {
+  if (themeStyle) {
+    return {
+      id: themeId ?? "custom",
+      name: "Custom",
+      theme: themeStyle
+    };
+  }
+  return themes.find((theme) => theme.id === themeId) ?? themes[0];
+}
+export {
+  generateThemeStyles,
+  resolveTheme,
+  themes
+};
+//# sourceMappingURL=theme.js.map