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

package/dist/server/islands/support-form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/support-form/form.tsx","../../../src/primitives/lib/utils.ts","../../../src/primitives/components/ui/button.tsx","../../../src/primitives/button.tsx","../../../src/primitives/input.tsx","../../../src/primitives/components/ui/input.tsx","../../../src/primitives/label.tsx","../../../src/primitives/components/ui/label.tsx","../../../src/primitives/text2.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport type { PageData, ThemeStyle } from \"../../models\";\nimport { Button, Input, Label, Text2 } from \"../../primitives\";\nimport { cn } from \"../../primitives/lib/utils\";\n\ninterface DocumentationSuggestion {\n  documentId: string;\n  slug: string;\n  title: string | null;\n  kind?: \"blog\" | \"doc\" | \"changelog\";\n}\n\nfunction suggestionHref(item: DocumentationSuggestion) {\n  if (item.kind === \"blog\") return `/blog/${item.slug}`;\n  if (item.kind === \"changelog\") return `/changelog`;\n  return `/docs/${item.slug}`;\n}\n\n/** Documentation deflection (architecture.md §6.4/§11.2): searches the\n * team's published docs as the visitor types a subject, before they ever\n * submit a ticket. No-ops in isolated previews with no live team/API. */\nasync function searchDocumentation(\n  query: string,\n  pageData: PageData,\n): Promise<DocumentationSuggestion[]> {\n  if (!pageData.teamId || !pageData.publicApiBaseUrl || query.trim().length < 3)\n    return [];\n\n  try {\n    const res = await fetch(\n      `${pageData.publicApiBaseUrl}/public/${pageData.teamId}/content/documentation/search?q=${encodeURIComponent(query)}&k=3`,\n    );\n    if (!res.ok) return [];\n    const body = (await res.json()) as {\n      items: DocumentationSuggestion[];\n    };\n    const seen = new Set<string>();\n    return body.items.filter((item) =>\n      seen.has(item.documentId) ? false : (seen.add(item.documentId), true),\n    );\n  } catch {\n    return [];\n  }\n}\n\n/** Raises a support ticket via FrontLit's public, unauthenticated ticket\n * endpoint (architecture.md §11.2) — one of the three submission doors,\n * source: \"form\". Falls back to a local-only success in isolated previews. */\nasync function submitTicket(\n  input: { subject: string; message: string; email: string; name?: string },\n  pageData: PageData,\n): Promise<{ success: boolean }> {\n  if (!pageData.teamId || !pageData.publicApiBaseUrl) {\n    await new Promise((resolve) => setTimeout(resolve, 600));\n    return { success: true };\n  }\n\n  try {\n    const res = await fetch(\n      `${pageData.publicApiBaseUrl}/public/${pageData.teamId}/tickets`,\n      {\n        method: \"POST\",\n        headers: { \"content-type\": \"application/json\" },\n        body: JSON.stringify({ ...input, source: \"form\" }),\n      },\n    );\n    return { success: res.ok };\n  } catch {\n    return { success: false };\n  }\n}\n\n/**\n * The interactive part of the support-form block: the ticket form and its\n * success message. The block's heading stays server-rendered around it.\n */\nexport function SupportForm({\n  theme: overriddenTheme,\n  buttonCaption,\n  successMessage,\n  pageData,\n  editing,\n}: {\n  theme: ThemeStyle;\n  buttonCaption: string;\n  successMessage: string;\n  pageData: PageData;\n  editing?: boolean;\n}) {\n  const [subject, setSubject] = useState(\"\");\n  const [message, setMessage] = useState(\"\");\n  const [email, setEmail] = useState(\"\");\n  const [name, setName] = useState(\"\");\n  const [suggestions, setSuggestions] = useState<DocumentationSuggestion[]>([]);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [success, setSuccess] = useState(false);\n  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (editing) return;\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    debounceRef.current = setTimeout(() => {\n      searchDocumentation(subject, pageData).then(setSuggestions);\n    }, 400);\n    return () => {\n      if (debounceRef.current) clearTimeout(debounceRef.current);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [subject]);\n\n  const onSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    if (editing) return;\n\n    setIsSubmitting(true);\n    try {\n      const result = await submitTicket(\n        { subject, message, email, name: name || undefined },\n        pageData,\n      );\n      if (result.success) {\n        setSuccess(true);\n        setSubject(\"\");\n        setMessage(\"\");\n        setEmail(\"\");\n        setName(\"\");\n        setSuggestions([]);\n      }\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const inputStyles = overriddenTheme.interactives.input;\n  const inputTypography = overriddenTheme.typography.input;\n  const cardStyles = overriddenTheme.interactives.card;\n\n  return success ? (\n    <Text2 theme={overriddenTheme} className=\"mt-4\">\n      {successMessage}\n    </Text2>\n  ) : (\n    <form onSubmit={onSubmit} className=\"mt-4 flex w-full max-w-lg flex-col gap-3\">\n      <div className=\"flex flex-col gap-1 items-start\">\n        <Label theme={overriddenTheme} htmlFor=\"subject\">\n          Subject\n        </Label>\n        <Input\n          theme={overriddenTheme}\n          id=\"subject\"\n          value={subject}\n          onChange={(e) => setSubject(e.target.value)}\n          placeholder=\"What do you need help with?\"\n          required\n          className=\"w-full\"\n        />\n      </div>\n\n      {suggestions.length > 0 && (\n        <div\n          className={cn(\n            \"rounded-lg border border-border bg-card p-3 text-sm text-card-foreground shadow-sm\",\n            cardStyles.border?.width,\n            cardStyles.border?.radius,\n            cardStyles.border?.style,\n            cardStyles.shadow,\n          )}\n        >\n          <p className=\"mb-1 font-medium\">This might help:</p>\n          <ul className=\"list-inside list-disc\">\n            {suggestions.map((doc) => (\n              <li key={doc.documentId}>\n                <a\n                  href={suggestionHref(doc)}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  className=\"underline\"\n                >\n                  {doc.title ?? doc.slug}\n                </a>\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n\n      <div className=\"flex flex-col gap-1 items-start\">\n        <Label theme={overriddenTheme} htmlFor=\"message\">\n          Message\n        </Label>\n        <textarea\n          id=\"message\"\n          value={message}\n          onChange={(e) => setMessage(e.target.value)}\n          placeholder=\"Describe the issue…\"\n          required\n          rows={4}\n          className={cn(\n            \"w-full border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            inputTypography.fontFamily,\n            inputTypography.fontSize,\n            inputTypography.fontWeight,\n            inputTypography.lineHeight,\n            inputTypography.letterSpacing,\n            inputStyles.border?.width,\n            inputStyles.border?.style,\n            inputStyles.border?.radius,\n            inputStyles.shadow,\n            inputStyles.custom,\n          )}\n        />\n      </div>\n\n      <div className=\"flex flex-col gap-3 sm:!flex-row\">\n        <div className=\"flex flex-1 flex-col gap-1 items-start\">\n          <Label theme={overriddenTheme} htmlFor=\"email\">\n            Email\n          </Label>\n          <Input\n            theme={overriddenTheme}\n            id=\"email\"\n            type=\"email\"\n            value={email}\n            onChange={(e) => setEmail(e.target.value)}\n            placeholder=\"you@example.com\"\n            required\n            className=\"w-full\"\n          />\n        </div>\n        <div className=\"flex flex-1 flex-col gap-1 items-start\">\n          <Label theme={overriddenTheme} htmlFor=\"name\">\n            Name (optional)\n          </Label>\n          <Input\n            theme={overriddenTheme}\n            id=\"name\"\n            value={name}\n            onChange={(e) => setName(e.target.value)}\n            placeholder=\"Your name\"\n            className=\"w-full\"\n          />\n        </div>\n      </div>\n\n      <Button\n        theme={overriddenTheme}\n        type=\"submit\"\n        disabled={!editing && (isSubmitting || !subject || !message || !email)}\n        className=\"self-start\"\n      >\n        {buttonCaption}\n      </Button>\n    </form>\n  );\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import type React from \"react\";\nimport type { ThemeStyle } from \"../models\";\nimport {\n  Button as ShadcnButton,\n  type ButtonProps as ShadcnButtonProps,\n} from \"./components/ui/button\";\nimport { cn } from \"./lib/utils\";\n\nexport interface ButtonProps extends ShadcnButtonProps {\n  theme?: ThemeStyle;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  variant = \"default\",\n  size = \"default\",\n  disabled = false,\n  children,\n  className = \"\",\n  theme,\n  ...props\n}) => {\n  const buttonStyles = theme?.interactives?.button;\n  const typographyStyles = theme?.typography?.button;\n  const isIcon = size === \"icon\";\n\n  const classes = cn(\n    // Base styles\n    \"\",\n    // Theme typography\n    typographyStyles?.fontFamily,\n    typographyStyles?.fontSize,\n    typographyStyles?.fontWeight,\n    typographyStyles?.lineHeight,\n    typographyStyles?.letterSpacing,\n    typographyStyles?.textTransform,\n    typographyStyles?.textDecoration,\n    typographyStyles?.textOverflow,\n    // Theme interactivity. Icon buttons stay square — CTA padding\n    // would stretch them off the size=\"icon\" box.\n    !isIcon && buttonStyles?.padding?.x,\n    !isIcon && buttonStyles?.padding?.y,\n    buttonStyles?.border?.width,\n    buttonStyles?.border?.radius,\n    buttonStyles?.border?.style,\n    // buttonStyles?.border?.color,\n    buttonStyles?.shadow,\n    // Theme disabled states\n    disabled && buttonStyles?.disabled?.opacity,\n    disabled && buttonStyles?.disabled?.cursor,\n    disabled && buttonStyles?.disabled?.color,\n    disabled && buttonStyles?.disabled?.background,\n    disabled && buttonStyles?.disabled?.border,\n    // User overrides\n    buttonStyles?.custom,\n    className,\n  );\n\n  return (\n    <ShadcnButton\n      variant={variant}\n      size={size}\n      disabled={disabled}\n      className={classes}\n      {...props}\n    >\n      {children}\n    </ShadcnButton>\n  );\n};\n","import React from \"react\";\nimport type { ThemeStyle } from \"../models\";\nimport { Input as ShadcnInput } from \"./components/ui/input\";\nimport { cn } from \"./lib/utils\";\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  theme?: ThemeStyle;\n  error?: boolean;\n  // style?: React.CSSProperties;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className = \"\", theme, error = false, /*style = {},*/ ...props }, ref) => {\n    const inputStyles = theme?.interactives?.input;\n    const typographyStyles = theme?.typography?.input;\n\n    const classes = cn(\n      // Base styles\n      // \"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\",\n      // Theme typography\n      typographyStyles?.fontFamily,\n      typographyStyles?.fontSize,\n      typographyStyles?.fontWeight,\n      typographyStyles?.lineHeight,\n      typographyStyles?.letterSpacing,\n      typographyStyles?.textTransform,\n      typographyStyles?.textDecoration,\n      typographyStyles?.textOverflow,\n      // Theme interactivity\n      inputStyles?.padding?.x,\n      inputStyles?.padding?.y,\n      inputStyles?.border?.width,\n      inputStyles?.border?.style,\n      inputStyles?.border?.radius,\n      // inputStyles?.border?.color,\n      inputStyles?.shadow,\n      // Theme disabled states\n      props.disabled && inputStyles?.disabled?.opacity,\n      props.disabled && inputStyles?.disabled?.cursor,\n      props.disabled && inputStyles?.disabled?.color,\n      props.disabled && inputStyles?.disabled?.background,\n      props.disabled && inputStyles?.disabled?.border,\n      // Error state\n      error && \"border-red-300 focus:border-red-500 focus:ring-red-500\",\n      // User overrides\n      inputStyles?.custom,\n      className,\n    );\n\n    return <ShadcnInput ref={ref} className={classes} {...props} />;\n  },\n);\n\nInput.displayName = \"Input\";\n","import * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"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\",\n          className,\n        )}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n","import React from \"react\";\nimport type { ThemeStyle } from \"../models\";\nimport { Label as ShadcnLabel } from \"./components/ui/label\";\nimport { cn } from \"./lib/utils\";\n\nexport interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  theme?: ThemeStyle;\n  error?: boolean;\n}\n\nexport const Label = React.forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className = \"\", theme, error = false, ...props }, ref) => {\n    const typographyStyles = theme?.typography?.text2;\n\n    const classes = cn(\n      // Theme typography\n      typographyStyles?.fontFamily,\n      typographyStyles?.fontSize,\n      typographyStyles?.fontWeight,\n      typographyStyles?.lineHeight,\n      typographyStyles?.letterSpacing,\n      typographyStyles?.textTransform,\n      typographyStyles?.textDecoration,\n      typographyStyles?.textOverflow,\n      // Error state\n      error && \"text-red-500\",\n      className,\n    );\n\n    return <ShadcnLabel ref={ref} className={classes} {...props} />;\n  },\n);\n\nLabel.displayName = \"Label\";\n","import * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst labelVariants = cva(\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n);\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root\n    ref={ref}\n    className={cn(labelVariants(), className)}\n    {...props}\n  />\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n","import type React from \"react\";\nimport { cn } from \"./lib/utils\";\nimport type { TypographyProps } from \"./typography\";\n\nexport const Text2: React.FC<TypographyProps & { component?: \"p\" | \"span\" }> = ({\n  children,\n  className = \"\",\n  theme,\n  component = \"p\",\n  ...props\n}) => {\n  const typographyStyles = theme?.typography?.text2;\n  const classes = cn(\n    // Base styles\n    \"text-sm\",\n    // Theme overrides\n    typographyStyles?.fontFamily,\n    typographyStyles?.fontSize,\n    typographyStyles?.fontWeight,\n    typographyStyles?.lineHeight,\n    typographyStyles?.letterSpacing,\n    typographyStyles?.textTransform,\n    typographyStyles?.textDecoration,\n    typographyStyles?.textOverflow,\n    className,\n  );\n\n  return component === \"p\" ? (\n    <p className={classes} {...props}>\n      {children}\n    </p>\n  ) : (\n    <span className={classes} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"mappings":"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","names":["jsx","Button","React","React","jsx","jsx","Input","React","React","cva","React","jsx","cva","jsx","Label","React","jsx","jsx","Label","Input","Button"]}

package/dist/server/islands/theme-mode-switcher.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import React__default from 'react';
+import { T as ThemeStyle } from '../theme-style-5_AGy-4V.js';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonVariants: (props?: {
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    size?: "default" | "sm" | "lg" | "icon";
+} & class_variance_authority_types.ClassProp) => string;
+interface ButtonProps$1 extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+
+interface ButtonProps extends ButtonProps$1 {
+    theme?: ThemeStyle;
+}
+
+type ResolvedColorMode = "light" | "dark";
+
+/**
+ * Light / dark toggle. Public sites pass `theme` so the button uses
+ * page-builder primitives; the builder chrome omits it and matches the
+ * other icon buttons in the top bar.
+ *
+ * Preference starts as system (OS). The first click pins an explicit
+ * light or dark side; later clicks flip between those two.
+ */
+declare function ThemeModeSwitcher({ resolved, onToggle, theme, className, size, variant, }: {
+    resolved: ResolvedColorMode;
+    onToggle: () => void;
+    theme?: ThemeStyle;
+    className?: string;
+    size?: ButtonProps["size"];
+    variant?: ButtonProps["variant"];
+}): React__default.JSX.Element;
+
+export { ThemeModeSwitcher };

package/dist/server/islands/theme-mode-switcher.js

@@ -0,0 +1,169 @@
+"use client";
+"use client";
+
+// src/components/theme-mode-switcher.tsx
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+
+// src/primitives/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/primitives/components/ui/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.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";
+
+// src/primitives/button.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Button2 = ({
+  variant = "default",
+  size = "default",
+  disabled = false,
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const buttonStyles = theme?.interactives?.button;
+  const typographyStyles = theme?.typography?.button;
+  const isIcon = size === "icon";
+  const classes = cn(
+    // Base styles
+    "",
+    // Theme typography
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    // Theme interactivity. Icon buttons stay square — CTA padding
+    // would stretch them off the size="icon" box.
+    !isIcon && buttonStyles?.padding?.x,
+    !isIcon && buttonStyles?.padding?.y,
+    buttonStyles?.border?.width,
+    buttonStyles?.border?.radius,
+    buttonStyles?.border?.style,
+    // buttonStyles?.border?.color,
+    buttonStyles?.shadow,
+    // Theme disabled states
+    disabled && buttonStyles?.disabled?.opacity,
+    disabled && buttonStyles?.disabled?.cursor,
+    disabled && buttonStyles?.disabled?.color,
+    disabled && buttonStyles?.disabled?.background,
+    disabled && buttonStyles?.disabled?.border,
+    // User overrides
+    buttonStyles?.custom,
+    className
+  );
+  return /* @__PURE__ */ jsx2(
+    Button,
+    {
+      variant,
+      size,
+      disabled,
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+
+// src/components/theme-mode-switcher.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ThemeModeSwitcher({
+  resolved,
+  onToggle,
+  theme,
+  className,
+  size,
+  variant
+}) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const painted = mounted ? resolved : "light";
+  const next = painted === "dark" ? "light" : "dark";
+  const label = next === "dark" ? "Switch to dark mode" : "Switch to light mode";
+  const Icon = painted === "dark" ? Sun : Moon;
+  if (theme) {
+    return /* @__PURE__ */ jsx3(
+      Button2,
+      {
+        type: "button",
+        variant: variant ?? "outline",
+        size: size ?? "sm",
+        theme,
+        title: label,
+        "aria-label": label,
+        className,
+        onClick: onToggle,
+        children: /* @__PURE__ */ jsx3(Icon, { className: "h-4 w-4" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "icon",
+      title: label,
+      "aria-label": label,
+      className,
+      onClick: onToggle,
+      children: /* @__PURE__ */ jsx3(Icon, { className: "h-4 w-4" })
+    }
+  );
+}
+export {
+  ThemeModeSwitcher
+};
+//# sourceMappingURL=theme-mode-switcher.js.map

package/dist/server/islands/theme-mode-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/theme-mode-switcher.tsx","../../../src/primitives/lib/utils.ts","../../../src/primitives/components/ui/button.tsx","../../../src/primitives/button.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\nimport { Moon, Sun } from \"lucide-react\";\nimport { Button, type ButtonProps } from \"../primitives\";\nimport { Button as ChromeButton } from \"../primitives/components/ui/button\";\nimport type { ThemeStyle } from \"../models\";\nimport type { ResolvedColorMode } from \"../utils\";\n\n/**\n * Light / dark toggle. Public sites pass `theme` so the button uses\n * page-builder primitives; the builder chrome omits it and matches the\n * other icon buttons in the top bar.\n *\n * Preference starts as system (OS). The first click pins an explicit\n * light or dark side; later clicks flip between those two.\n */\nexport function ThemeModeSwitcher({\n  resolved,\n  onToggle,\n  theme,\n  className,\n  size,\n  variant,\n}: {\n  resolved: ResolvedColorMode;\n  onToggle: () => void;\n  theme?: ThemeStyle;\n  className?: string;\n  size?: ButtonProps[\"size\"];\n  variant?: ButtonProps[\"variant\"];\n}) {\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const painted = mounted ? resolved : \"light\";\n  const next = painted === \"dark\" ? \"light\" : \"dark\";\n  const label = next === \"dark\" ? \"Switch to dark mode\" : \"Switch to light mode\";\n  const Icon = painted === \"dark\" ? Sun : Moon;\n\n  if (theme) {\n    return (\n      <Button\n        type=\"button\"\n        variant={variant ?? \"outline\"}\n        size={size ?? \"sm\"}\n        theme={theme}\n        title={label}\n        aria-label={label}\n        className={className}\n        onClick={onToggle}\n      >\n        <Icon className=\"h-4 w-4\" />\n      </Button>\n    );\n  }\n\n  return (\n    <ChromeButton\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon\"\n      title={label}\n      aria-label={label}\n      className={className}\n      onClick={onToggle}\n    >\n      <Icon className=\"h-4 w-4\" />\n    </ChromeButton>\n  );\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import type React from \"react\";\nimport type { ThemeStyle } from \"../models\";\nimport {\n  Button as ShadcnButton,\n  type ButtonProps as ShadcnButtonProps,\n} from \"./components/ui/button\";\nimport { cn } from \"./lib/utils\";\n\nexport interface ButtonProps extends ShadcnButtonProps {\n  theme?: ThemeStyle;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  variant = \"default\",\n  size = \"default\",\n  disabled = false,\n  children,\n  className = \"\",\n  theme,\n  ...props\n}) => {\n  const buttonStyles = theme?.interactives?.button;\n  const typographyStyles = theme?.typography?.button;\n  const isIcon = size === \"icon\";\n\n  const classes = cn(\n    // Base styles\n    \"\",\n    // Theme typography\n    typographyStyles?.fontFamily,\n    typographyStyles?.fontSize,\n    typographyStyles?.fontWeight,\n    typographyStyles?.lineHeight,\n    typographyStyles?.letterSpacing,\n    typographyStyles?.textTransform,\n    typographyStyles?.textDecoration,\n    typographyStyles?.textOverflow,\n    // Theme interactivity. Icon buttons stay square — CTA padding\n    // would stretch them off the size=\"icon\" box.\n    !isIcon && buttonStyles?.padding?.x,\n    !isIcon && buttonStyles?.padding?.y,\n    buttonStyles?.border?.width,\n    buttonStyles?.border?.radius,\n    buttonStyles?.border?.style,\n    // buttonStyles?.border?.color,\n    buttonStyles?.shadow,\n    // Theme disabled states\n    disabled && buttonStyles?.disabled?.opacity,\n    disabled && buttonStyles?.disabled?.cursor,\n    disabled && buttonStyles?.disabled?.color,\n    disabled && buttonStyles?.disabled?.background,\n    disabled && buttonStyles?.disabled?.border,\n    // User overrides\n    buttonStyles?.custom,\n    className,\n  );\n\n  return (\n    <ShadcnButton\n      variant={variant}\n      size={size}\n      disabled={disabled}\n      className={classes}\n      {...props}\n    >\n      {children}\n    </ShadcnButton>\n  );\n};\n"],"mappings":"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","names":["jsx","Button","jsx","Button"]}

package/dist/server/islands/video-with-preview.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+type AspectRatio = "16/9" | "4/3" | "1/1" | "21/9" | "9/16" | "2/1" | "3/2" | string;
+interface VideoThumbnailProps {
+    title?: string;
+    thumbnailUrl?: string;
+    videoUrl: string;
+    aspectRatio?: AspectRatio;
+    modal?: boolean;
+}
+declare function VideoWithPreview({ title, thumbnailUrl, videoUrl, aspectRatio, modal, }: VideoThumbnailProps): React.JSX.Element;
+
+export { type AspectRatio, type VideoThumbnailProps, VideoWithPreview };

package/dist/server/islands/video-with-preview.js

@@ -0,0 +1,269 @@
+"use client";
+
+// src/components/video-with-preview.tsx
+import { useState, useEffect } from "react";
+import { Play, X } from "lucide-react";
+
+// src/utils/extract-video-id.ts
+var YOUTUBE_HOSTNAMES = /* @__PURE__ */ new Set([
+  "youtube.com",
+  "www.youtube.com",
+  "m.youtube.com",
+  "music.youtube.com",
+  "youtube-nocookie.com",
+  "www.youtube-nocookie.com",
+  "youtu.be"
+]);
+var VIMEO_HOSTNAMES = /* @__PURE__ */ new Set(["vimeo.com", "www.vimeo.com", "player.vimeo.com"]);
+var isNumeric = (value) => /^\d+$/.test(value);
+var extractYouTubeVideoId = (parsedUrl) => {
+  const hostname = parsedUrl.hostname.toLowerCase();
+  if (!YOUTUBE_HOSTNAMES.has(hostname)) {
+    return null;
+  }
+  if (hostname === "youtu.be") {
+    return parsedUrl.pathname.split("/").filter(Boolean)[0] || null;
+  }
+  if (parsedUrl.pathname === "/watch") {
+    return parsedUrl.searchParams.get("v");
+  }
+  const pathParts = parsedUrl.pathname.split("/").filter(Boolean);
+  const firstPart = pathParts[0];
+  const secondPart = pathParts[1];
+  if ((firstPart === "embed" || firstPart === "v" || firstPart === "shorts" || firstPart === "live") && secondPart) {
+    return secondPart;
+  }
+  return null;
+};
+var extractVimeoVideoId = (parsedUrl) => {
+  const hostname = parsedUrl.hostname.toLowerCase();
+  if (!VIMEO_HOSTNAMES.has(hostname)) {
+    return null;
+  }
+  const pathParts = parsedUrl.pathname.split("/").filter(Boolean);
+  for (let index = pathParts.length - 1; index >= 0; index--) {
+    if (isNumeric(pathParts[index])) {
+      return pathParts[index];
+    }
+  }
+  return null;
+};
+function extractVideoId(url, platform) {
+  if (!url) {
+    return null;
+  }
+  const normalizedUrl = /^[a-z][a-z\d+\-.]*:\/\//i.test(url) ? url : `https://${url}`;
+  try {
+    const parsedUrl = new URL(normalizedUrl);
+    if (platform === "youtube") {
+      return extractYouTubeVideoId(parsedUrl);
+    }
+    if (platform === "vimeo") {
+      return extractVimeoVideoId(parsedUrl);
+    }
+    return extractYouTubeVideoId(parsedUrl) || extractVimeoVideoId(parsedUrl);
+  } catch {
+    return null;
+  }
+}
+
+// src/components/video-with-preview.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function VideoWithPreview({
+  title = "Video",
+  thumbnailUrl,
+  videoUrl = "https://www.youtube.com/watch?v=7OP2bU9RWVE",
+  aspectRatio = "16/9",
+  modal = false
+}) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [vimeoThumbnail, setVimeoThumbnail] = useState(null);
+  const detectVideoType = () => {
+    if (extractVideoId(videoUrl, "youtube")) {
+      return "youtube";
+    }
+    if (extractVideoId(videoUrl, "vimeo")) {
+      return "vimeo";
+    }
+    return "self-hosted";
+  };
+  const videoType = detectVideoType();
+  const getVideoId = () => {
+    if (videoType === "youtube") {
+      return extractVideoId(videoUrl, "youtube");
+    }
+    if (videoType === "vimeo") {
+      return extractVideoId(videoUrl, "vimeo");
+    }
+    return null;
+  };
+  useEffect(() => {
+    const fetchVimeoThumbnail = async () => {
+      if (thumbnailUrl || videoType !== "vimeo") return;
+      const videoId = getVideoId();
+      if (!videoId) return;
+      try {
+        const response = await fetch(
+          `https://vimeo.com/api/oembed.json?url=https://vimeo.com/${videoId}`
+        );
+        if (response.ok) {
+          const data = await response.json();
+          setVimeoThumbnail(data.thumbnail_url);
+        }
+      } catch (error) {
+        console.error("Error fetching Vimeo thumbnail:", error);
+      }
+    };
+    fetchVimeoThumbnail();
+  }, [videoUrl, videoType, thumbnailUrl]);
+  const getThumbnailUrl = () => {
+    if (thumbnailUrl) return thumbnailUrl;
+    if (videoType === "youtube") {
+      const videoId = getVideoId();
+      if (videoId) {
+        return `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
+      }
+    }
+    if (videoType === "vimeo" && vimeoThumbnail) {
+      return vimeoThumbnail;
+    }
+    return "/placeholder.svg?height=480&width=854";
+  };
+  useEffect(() => {
+    if (isModalOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isModalOpen]);
+  const getEmbedUrl = () => {
+    const videoId = getVideoId();
+    const shouldAutoplay = isPlaying;
+    if (videoType === "youtube") {
+      if (videoId) {
+        return `https://www.youtube.com/embed/${videoId}${shouldAutoplay ? "?autoplay=1" : ""}`;
+      }
+      const hasParams = videoUrl.includes("?");
+      return videoUrl + (shouldAutoplay && !hasParams ? "?autoplay=1" : shouldAutoplay && hasParams ? "&autoplay=1" : "");
+    }
+    if (videoType === "vimeo" && videoId) {
+      return `https://player.vimeo.com/video/${videoId}${shouldAutoplay ? "?autoplay=1" : ""}`;
+    }
+    return videoUrl;
+  };
+  const aspectRatioStyle = () => {
+    if (!aspectRatio.includes("/")) return {};
+    const [width, height] = aspectRatio.split("/").map(Number);
+    if (!width || !height) return {};
+    return {
+      aspectRatio: `${width}/${height}`
+    };
+  };
+  const handleThumbnailClick = () => {
+    if (modal) {
+      setIsModalOpen(true);
+    } else {
+      setIsPlaying(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: aspectRatio === "9/16" ? "max-w-xs mx-auto" : "", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden", style: aspectRatioStyle(), children: !modal && isPlaying ? (
+      // In-place video player
+      /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: videoType !== "self-hosted" ? /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          src: getEmbedUrl(),
+          className: "w-full h-full",
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+          allowFullScreen: true
+        }
+      ) : /* @__PURE__ */ jsx(
+        "video",
+        {
+          src: videoUrl,
+          controls: true,
+          controlsList: "nodownload",
+          onContextMenu: (e) => e.preventDefault(),
+          autoPlay: true,
+          className: "w-full h-full",
+          children: "Your browser does not support the video tag."
+        }
+      ) })
+    ) : (
+      // Thumbnail with play button
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "cursor-pointer group w-full h-full",
+          onClick: handleThumbnailClick,
+          children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: getThumbnailUrl() || "/placeholder.svg",
+                alt: `Thumbnail for ${title}`,
+                className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx("span", { className: "absolute -inset-1.5 rounded-full bg-gray-200/50 animate-pulse duration-[3000ms]" }),
+              /* @__PURE__ */ jsx("div", { className: "relative z-1 rounded-full bg-primary p-4 text-primary-foreground", children: /* @__PURE__ */ jsx(Play, { className: "h-8 w-8", fill: "currentColor" }) })
+            ] }) })
+          ]
+        }
+      )
+    ) }),
+    modal && isModalOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 bg-black/95 z-50 flex items-center justify-center p-4 sm:p-6 md:p-10", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setIsModalOpen(false),
+          className: "absolute top-2 right-2 sm:top-4 sm:right-4 text-white hover:text-gray-300 focus:outline-none z-10",
+          "aria-label": "Close",
+          children: /* @__PURE__ */ jsx(X, { className: "h-6 w-6 sm:h-8 sm:w-8" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "w-full max-w-xl sm:max-w-2xl md:max-w-3xl",
+          style: aspectRatioStyle(),
+          children: videoType !== "self-hosted" ? (
+            // YouTube or Vimeo video
+            /* @__PURE__ */ jsx(
+              "iframe",
+              {
+                src: getEmbedUrl(),
+                className: "w-full h-full",
+                allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                allowFullScreen: true
+              }
+            )
+          ) : (
+            // Self-hosted video
+            /* @__PURE__ */ jsx(
+              "video",
+              {
+                src: videoUrl,
+                controls: true,
+                controlsList: "nodownload",
+                onContextMenu: (e) => e.preventDefault(),
+                autoPlay: true,
+                className: "w-full h-full",
+                children: "Your browser does not support the video tag."
+              }
+            )
+          )
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  VideoWithPreview
+};
+//# sourceMappingURL=video-with-preview.js.map

package/dist/server/islands/video-with-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/video-with-preview.tsx","../../../src/utils/extract-video-id.ts"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport { Play, X } from \"lucide-react\";\nimport { extractVideoId } from \"../utils\";\n\ntype VideoType = \"youtube\" | \"vimeo\" | \"self-hosted\";\n\nexport type AspectRatio =\n  | \"16/9\" // Widescreen\n  | \"4/3\" // Standard\n  | \"1/1\" // Square\n  | \"21/9\" // Ultrawide\n  | \"9/16\" // Vertical\n  | \"2/1\" // Panoramic\n  | \"3/2\" // Classic\n  | string; // Allow custom aspect ratios\n\nexport interface VideoThumbnailProps {\n  title?: string;\n  thumbnailUrl?: string;\n  videoUrl: string;\n  aspectRatio?: AspectRatio;\n  modal?: boolean;\n}\n\nexport function VideoWithPreview({\n  title = \"Video\",\n  thumbnailUrl,\n  videoUrl = \"https://www.youtube.com/watch?v=7OP2bU9RWVE\",\n  aspectRatio = \"16/9\",\n  modal = false,\n}: VideoThumbnailProps) {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [vimeoThumbnail, setVimeoThumbnail] = useState<string | null>(null);\n\n  const detectVideoType = (): VideoType => {\n    if (extractVideoId(videoUrl, \"youtube\")) {\n      return \"youtube\";\n    }\n\n    if (extractVideoId(videoUrl, \"vimeo\")) {\n      return \"vimeo\";\n    }\n\n    return \"self-hosted\";\n  };\n\n  const videoType = detectVideoType();\n\n  const getVideoId = () => {\n    if (videoType === \"youtube\") {\n      return extractVideoId(videoUrl, \"youtube\");\n    }\n\n    if (videoType === \"vimeo\") {\n      return extractVideoId(videoUrl, \"vimeo\");\n    }\n\n    return null;\n  };\n\n  // Fetch Vimeo thumbnail if needed\n  useEffect(() => {\n    const fetchVimeoThumbnail = async () => {\n      // Skip fetching if a thumbnail URL is already provided\n      if (thumbnailUrl || videoType !== \"vimeo\") return;\n\n      const videoId = getVideoId();\n      if (!videoId) return;\n\n      try {\n        // Use Vimeo's oEmbed API to get thumbnail (no token required)\n        const response = await fetch(\n          `https://vimeo.com/api/oembed.json?url=https://vimeo.com/${videoId}`,\n        );\n\n        if (response.ok) {\n          const data = await response.json();\n          setVimeoThumbnail(data.thumbnail_url);\n        }\n      } catch (error) {\n        console.error(\"Error fetching Vimeo thumbnail:\", error);\n      }\n    };\n\n    fetchVimeoThumbnail();\n  }, [videoUrl, videoType, thumbnailUrl]);\n\n  // Get the appropriate thumbnail URL\n  const getThumbnailUrl = () => {\n    // If a thumbnail URL is explicitly provided, use that\n    if (thumbnailUrl) return thumbnailUrl;\n\n    // For YouTube videos, generate thumbnail URL\n    if (videoType === \"youtube\") {\n      const videoId = getVideoId();\n      if (videoId) {\n        return `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;\n      }\n    }\n\n    // For Vimeo videos, use the fetched thumbnail\n    if (videoType === \"vimeo\" && vimeoThumbnail) {\n      return vimeoThumbnail;\n    }\n\n    // Fall back to placeholder\n    return \"/placeholder.svg?height=480&width=854\";\n  };\n\n  // Lock body scroll when modal is open\n  useEffect(() => {\n    if (isModalOpen) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"\";\n    }\n\n    return () => {\n      document.body.style.overflow = \"\";\n    };\n  }, [isModalOpen]);\n\n  // Get embed URL based on video type\n  const getEmbedUrl = () => {\n    const videoId = getVideoId();\n    // Add autoplay parameter for in-place videos\n    const shouldAutoplay = isPlaying;\n\n    if (videoType === \"youtube\") {\n      if (videoId) {\n        return `https://www.youtube.com/embed/${videoId}${shouldAutoplay ? \"?autoplay=1\" : \"\"}`;\n      }\n\n      // If we couldn't extract the ID but it's a YouTube URL, try to use it directly\n      const hasParams = videoUrl.includes(\"?\");\n      return (\n        videoUrl +\n        (shouldAutoplay && !hasParams\n          ? \"?autoplay=1\"\n          : shouldAutoplay && hasParams\n            ? \"&autoplay=1\"\n            : \"\")\n      );\n    }\n\n    if (videoType === \"vimeo\" && videoId) {\n      return `https://player.vimeo.com/video/${videoId}${shouldAutoplay ? \"?autoplay=1\" : \"\"}`;\n    }\n\n    // For self-hosted videos, return the URL as is\n    return videoUrl;\n  };\n\n  // Calculate aspect ratio style\n  const aspectRatioStyle = () => {\n    if (!aspectRatio.includes(\"/\")) return {};\n\n    const [width, height] = aspectRatio.split(\"/\").map(Number);\n    if (!width || !height) return {};\n\n    return {\n      aspectRatio: `${width}/${height}`,\n    };\n  };\n\n  // Handle thumbnail click\n  const handleThumbnailClick = () => {\n    if (modal) {\n      setIsModalOpen(true);\n    } else {\n      setIsPlaying(true);\n    }\n  };\n\n  return (\n    <div className={aspectRatio === \"9/16\" ? \"max-w-xs mx-auto\" : \"\"}>\n      {/* Thumbnail with play button or in-place video */}\n      <div className=\"relative overflow-hidden\" style={aspectRatioStyle()}>\n        {!modal && isPlaying ? (\n          // In-place video player\n          <div className=\"w-full h-full\">\n            {videoType !== \"self-hosted\" ? (\n              <iframe\n                src={getEmbedUrl()}\n                className=\"w-full h-full\"\n                allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                allowFullScreen\n              ></iframe>\n            ) : (\n              <video\n                src={videoUrl}\n                controls\n                controlsList=\"nodownload\" // eslint-disable-line react/no-unknown-property\n                onContextMenu={(e) => e.preventDefault()}\n                autoPlay\n                className=\"w-full h-full\"\n              >\n                Your browser does not support the video tag.\n              </video>\n            )}\n          </div>\n        ) : (\n          // Thumbnail with play button\n          <div\n            className=\"cursor-pointer group w-full h-full\"\n            onClick={handleThumbnailClick}\n          >\n            <img\n              src={getThumbnailUrl() || \"/placeholder.svg\"}\n              alt={`Thumbnail for ${title}`}\n              className=\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-105\"\n            />\n            <div className=\"absolute inset-0 bg-black/30 flex items-center justify-center\">\n              <div className=\"relative\">\n                {/* Smaller grayish concentric wave animation */}\n                <span className=\"absolute -inset-1.5 rounded-full bg-gray-200/50 animate-pulse duration-[3000ms]\"></span>\n\n                {/* Play button */}\n                <div className=\"relative z-1 rounded-full bg-primary p-4 text-primary-foreground\">\n                  <Play className=\"h-8 w-8\" fill=\"currentColor\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* Custom Video Modal (only used when modal is true) */}\n      {modal && isModalOpen && (\n        <div className=\"fixed inset-0 bg-black/95 z-50 flex items-center justify-center p-4 sm:p-6 md:p-10\">\n          <button\n            onClick={() => setIsModalOpen(false)}\n            className=\"absolute top-2 right-2 sm:top-4 sm:right-4 text-white hover:text-gray-300 focus:outline-none z-10\"\n            aria-label=\"Close\"\n          >\n            <X className=\"h-6 w-6 sm:h-8 sm:w-8\" />\n          </button>\n\n          <div\n            className=\"w-full max-w-xl sm:max-w-2xl md:max-w-3xl\"\n            style={aspectRatioStyle()}\n          >\n            {videoType !== \"self-hosted\" ? (\n              // YouTube or Vimeo video\n              <iframe\n                src={getEmbedUrl()}\n                className=\"w-full h-full\"\n                allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                allowFullScreen\n              ></iframe>\n            ) : (\n              // Self-hosted video\n              <video\n                src={videoUrl}\n                controls\n                controlsList=\"nodownload\" // eslint-disable-line react/no-unknown-property\n                onContextMenu={(e) => e.preventDefault()}\n                autoPlay\n                className=\"w-full h-full\"\n              >\n                Your browser does not support the video tag.\n              </video>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n","export type SupportedVideoPlatform = \"youtube\" | \"vimeo\";\n\nconst YOUTUBE_HOSTNAMES = new Set([\n  \"youtube.com\",\n  \"www.youtube.com\",\n  \"m.youtube.com\",\n  \"music.youtube.com\",\n  \"youtube-nocookie.com\",\n  \"www.youtube-nocookie.com\",\n  \"youtu.be\",\n]);\n\nconst VIMEO_HOSTNAMES = new Set([\"vimeo.com\", \"www.vimeo.com\", \"player.vimeo.com\"]);\n\nconst isNumeric = (value: string) => /^\\d+$/.test(value);\n\nconst extractYouTubeVideoId = (parsedUrl: URL) => {\n  const hostname = parsedUrl.hostname.toLowerCase();\n\n  if (!YOUTUBE_HOSTNAMES.has(hostname)) {\n    return null;\n  }\n\n  if (hostname === \"youtu.be\") {\n    return parsedUrl.pathname.split(\"/\").filter(Boolean)[0] || null;\n  }\n\n  if (parsedUrl.pathname === \"/watch\") {\n    return parsedUrl.searchParams.get(\"v\");\n  }\n\n  const pathParts = parsedUrl.pathname.split(\"/\").filter(Boolean);\n  const firstPart = pathParts[0];\n  const secondPart = pathParts[1];\n\n  if (\n    (firstPart === \"embed\" ||\n      firstPart === \"v\" ||\n      firstPart === \"shorts\" ||\n      firstPart === \"live\") &&\n    secondPart\n  ) {\n    return secondPart;\n  }\n\n  return null;\n};\n\nconst extractVimeoVideoId = (parsedUrl: URL) => {\n  const hostname = parsedUrl.hostname.toLowerCase();\n\n  if (!VIMEO_HOSTNAMES.has(hostname)) {\n    return null;\n  }\n\n  const pathParts = parsedUrl.pathname.split(\"/\").filter(Boolean);\n\n  for (let index = pathParts.length - 1; index >= 0; index--) {\n    if (isNumeric(pathParts[index])) {\n      return pathParts[index];\n    }\n  }\n\n  return null;\n};\n\nexport function extractVideoId(url?: string, platform?: SupportedVideoPlatform) {\n  if (!url) {\n    return null;\n  }\n\n  const normalizedUrl = /^[a-z][a-z\\d+\\-.]*:\\/\\//i.test(url) ? url : `https://${url}`;\n\n  try {\n    const parsedUrl = new URL(normalizedUrl);\n\n    if (platform === \"youtube\") {\n      return extractYouTubeVideoId(parsedUrl);\n    }\n\n    if (platform === \"vimeo\") {\n      return extractVimeoVideoId(parsedUrl);\n    }\n\n    return extractYouTubeVideoId(parsedUrl) || extractVimeoVideoId(parsedUrl);\n  } catch {\n    return null;\n  }\n}\n"],"mappings":"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","names":[]}