From 988d01ae5173156173bf1fc64c3d6e47daa5f5e7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 10 Jun 2026 07:56:17 +0000
Subject: [PATCH 1/2] 0.73.0 - Add BrowserFrame component for mock browser
 window screenshots

Introduces a composable BrowserFrame component for rendering content inside
a mock browser chrome (macOS / Windows / minimal variants). Useful for
landing pages, product screenshots, and documentation.

Includes:
- BrowserFrame, BrowserFrameHeader, BrowserFrameControls,
  BrowserFrameNavButtons, BrowserFrameAddressBar, BrowserFrameTabs,
  BrowserFrameTab, BrowserFrameContent subcomponents
- Theming via card/background/border/muted tokens from @schemavaults/theme
- Variants (macos, windows, minimal) and sizes (sm, md, lg)
- Storybook stories covering all variants, tabs, editable address bar,
  fixed aspect ratio, and insecure (http) URL leading icon
---
 package.json                                  |   2 +-
 .../ui/browser-frame/BrowserFrame.stories.tsx | 253 ++++++++
 .../ui/browser-frame/browser-frame.tsx        | 559 ++++++++++++++++++
 src/components/ui/browser-frame/index.ts      |   2 +
 src/components/ui/index.ts                    |   3 +
 5 files changed, 818 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/browser-frame/BrowserFrame.stories.tsx
 create mode 100644 src/components/ui/browser-frame/browser-frame.tsx
 create mode 100644 src/components/ui/browser-frame/index.ts

diff --git a/package.json b/package.json
index 7e0a35e..9d2e2ba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@schemavaults/ui",
-  "version": "0.72.3",
+  "version": "0.73.0",
   "private": false,
   "license": "UNLICENSED",
   "description": "React.js UI components for SchemaVaults frontend applications",
diff --git a/src/components/ui/browser-frame/BrowserFrame.stories.tsx b/src/components/ui/browser-frame/BrowserFrame.stories.tsx
new file mode 100644
index 0000000..7596cab
--- /dev/null
+++ b/src/components/ui/browser-frame/BrowserFrame.stories.tsx
@@ -0,0 +1,253 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ReactElement } from "react";
+
+import {
+  BrowserFrame,
+  BrowserFrameAddressBar,
+  BrowserFrameContent,
+  BrowserFrameControls,
+  BrowserFrameHeader,
+  BrowserFrameNavButtons,
+  BrowserFrameTab,
+  BrowserFrameTabs,
+  browserFrameSizeIds,
+  browserFrameVariantIds,
+} from "./browser-frame";
+
+const meta = {
+  title: "Components/BrowserFrame",
+  component: BrowserFrame,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      options: browserFrameVariantIds,
+      control: { type: "radio" },
+    },
+    size: {
+      options: browserFrameSizeIds,
+      control: { type: "radio" },
+    },
+  },
+} satisfies Meta<typeof BrowserFrame>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function PlaceholderContent(): ReactElement {
+  return (
+    <div className="grid h-full min-h-[300px] place-items-center bg-gradient-to-br from-primary/5 via-background to-primary/10 p-10">
+      <div className="flex max-w-md flex-col items-center gap-3 text-center">
+        <div className="size-12 rounded-xl bg-primary/20" aria-hidden="true" />
+        <h2 className="text-2xl font-semibold tracking-tight text-foreground">
+          SchemaVaults
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          A mock browser frame that wraps any content. Useful for landing pages,
+          screenshots, and product demos.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  args: {
+    variant: "macos",
+    size: "md",
+  },
+  render: (args): ReactElement => {
+    const variant = args.variant ?? "macos";
+    const size = args.size ?? "md";
+    return (
+      <BrowserFrame {...args} className="max-w-3xl">
+        <BrowserFrameHeader variant={variant} size={size}>
+          <BrowserFrameControls variant={variant} />
+          <BrowserFrameAddressBar value="https://schemavaults.com" />
+        </BrowserFrameHeader>
+        <BrowserFrameContent>
+          <PlaceholderContent />
+        </BrowserFrameContent>
+      </BrowserFrame>
+    );
+  },
+};
+
+export const MacOS: Story = {
+  render: (): ReactElement => (
+    <BrowserFrame variant="macos" className="max-w-3xl">
+      <BrowserFrameHeader variant="macos">
+        <BrowserFrameControls variant="macos" />
+        <BrowserFrameNavButtons />
+        <BrowserFrameAddressBar value="https://schemavaults.com/dashboard" />
+      </BrowserFrameHeader>
+      <BrowserFrameContent>
+        <PlaceholderContent />
+      </BrowserFrameContent>
+    </BrowserFrame>
+  ),
+};
+
+export const Windows: Story = {
+  render: (): ReactElement => (
+    <BrowserFrame variant="windows" className="max-w-3xl">
+      <BrowserFrameHeader variant="windows">
+        <BrowserFrameNavButtons />
+        <BrowserFrameAddressBar value="https://schemavaults.com" />
+        <BrowserFrameControls variant="windows" />
+      </BrowserFrameHeader>
+      <BrowserFrameContent>
+        <PlaceholderContent />
+      </BrowserFrameContent>
+    </BrowserFrame>
+  ),
+};
+
+export const Minimal: Story = {
+  render: (): ReactElement => (
+    <BrowserFrame variant="minimal" className="max-w-3xl">
+      <BrowserFrameHeader variant="minimal">
+        <BrowserFrameAddressBar value="https://schemavaults.com" />
+      </BrowserFrameHeader>
+      <BrowserFrameContent>
+        <PlaceholderContent />
+      </BrowserFrameContent>
+    </BrowserFrame>
+  ),
+};
+
+export const WithTabs: Story = {
+  render: (): ReactElement => (
+    <BrowserFrame variant="macos" className="max-w-3xl">
+      <BrowserFrameHeader variant="macos">
+        <BrowserFrameControls variant="macos" />
+        <BrowserFrameAddressBar value="https://schemavaults.com/schemas" />
+      </BrowserFrameHeader>
+      <BrowserFrameTabs>
+        <BrowserFrameTab active favicon={<span aria-hidden="true">🗄️</span>} closable>
+          Schemas — SchemaVaults
+        </BrowserFrameTab>
+        <BrowserFrameTab favicon={<span aria-hidden="true">📊</span>} closable>
+          Dashboard
+        </BrowserFrameTab>
+        <BrowserFrameTab favicon={<span aria-hidden="true">⚙️</span>} closable>
+          Settings
+        </BrowserFrameTab>
+      </BrowserFrameTabs>
+      <BrowserFrameContent>
+        <PlaceholderContent />
+      </BrowserFrameContent>
+    </BrowserFrame>
+  ),
+};
+
+export const InsecureUrl: Story = {
+  render: (): ReactElement => (
+    <BrowserFrame variant="macos" className="max-w-3xl">
+      <BrowserFrameHeader variant="macos">
+        <BrowserFrameControls variant="macos" />
+        <BrowserFrameAddressBar value="http://example.com" />
+      </BrowserFrameHeader>
+      <BrowserFrameContent>
+        <PlaceholderContent />
+      </BrowserFrameContent>
+    </BrowserFrame>
+  ),
+};
+
+export const EditableAddress: Story = {
+  render: (): ReactElement => (
+    <BrowserFrame variant="macos" className="max-w-3xl">
+      <BrowserFrameHeader variant="macos">
+        <BrowserFrameControls variant="macos" />
+        <BrowserFrameAddressBar
+          defaultValue="https://schemavaults.com"
+          readOnly={false}
+          placeholder="Search or enter a URL"
+        />
+      </BrowserFrameHeader>
+      <BrowserFrameContent>
+        <PlaceholderContent />
+      </BrowserFrameContent>
+    </BrowserFrame>
+  ),
+};
+
+export const FixedAspectRatio: Story = {
+  render: (): ReactElement => (
+    <BrowserFrame variant="macos" className="max-w-2xl">
+      <BrowserFrameHeader variant="macos">
+        <BrowserFrameControls variant="macos" />
+        <BrowserFrameAddressBar value="https://schemavaults.com/landing" />
+      </BrowserFrameHeader>
+      <BrowserFrameContent aspectRatio="16 / 10">
+        <PlaceholderContent />
+      </BrowserFrameContent>
+    </BrowserFrame>
+  ),
+};
+
+function AllVariantsExample(): ReactElement {
+  return (
+    <div className="flex flex-col gap-8">
+      {browserFrameVariantIds.map((variant) => (
+        <div key={variant} className="flex flex-col gap-2">
+          <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            {variant}
+          </span>
+          <BrowserFrame variant={variant} className="max-w-3xl">
+            <BrowserFrameHeader variant={variant}>
+              {variant !== "minimal" ? (
+                <BrowserFrameControls variant={variant} />
+              ) : null}
+              <BrowserFrameAddressBar value="https://schemavaults.com" />
+              {variant === "windows" ? (
+                <BrowserFrameControls variant={variant} />
+              ) : null}
+            </BrowserFrameHeader>
+            <BrowserFrameContent>
+              <div className="grid h-40 place-items-center bg-muted/30 text-sm text-muted-foreground">
+                {variant} variant
+              </div>
+            </BrowserFrameContent>
+          </BrowserFrame>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export const AllVariants: Story = {
+  render: (): ReactElement => <AllVariantsExample />,
+};
+
+function AllSizesExample(): ReactElement {
+  return (
+    <div className="flex flex-col gap-8">
+      {browserFrameSizeIds.map((size) => (
+        <div key={size} className="flex flex-col gap-2">
+          <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            {size}
+          </span>
+          <BrowserFrame variant="macos" size={size} className="max-w-3xl">
+            <BrowserFrameHeader variant="macos" size={size}>
+              <BrowserFrameControls variant="macos" />
+              <BrowserFrameAddressBar value="https://schemavaults.com" />
+            </BrowserFrameHeader>
+            <BrowserFrameContent>
+              <div className="grid h-32 place-items-center bg-muted/30 text-muted-foreground">
+                {size}
+              </div>
+            </BrowserFrameContent>
+          </BrowserFrame>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export const AllSizes: Story = {
+  render: (): ReactElement => <AllSizesExample />,
+};
diff --git a/src/components/ui/browser-frame/browser-frame.tsx b/src/components/ui/browser-frame/browser-frame.tsx
new file mode 100644
index 0000000..36b423e
--- /dev/null
+++ b/src/components/ui/browser-frame/browser-frame.tsx
@@ -0,0 +1,559 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type {
+  HTMLAttributes,
+  InputHTMLAttributes,
+  ReactElement,
+  ReactNode,
+  Ref,
+} from "react";
+
+import { cn } from "@/lib/utils";
+
+export const browserFrameVariantIds = [
+  "macos",
+  "windows",
+  "minimal",
+] as const satisfies string[];
+
+export type BrowserFrameVariantId = (typeof browserFrameVariantIds)[number];
+
+export const browserFrameSizeIds = [
+  "sm",
+  "md",
+  "lg",
+] as const satisfies string[];
+
+export type BrowserFrameSizeId = (typeof browserFrameSizeIds)[number];
+
+const browserFrameVariants = cva(
+  "flex w-full flex-col overflow-hidden border bg-card text-card-foreground shadow-lg",
+  {
+    variants: {
+      variant: {
+        macos: "rounded-xl border-border",
+        windows: "rounded-md border-border",
+        minimal: "rounded-lg border-border",
+      } satisfies Record<BrowserFrameVariantId, string>,
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+      } satisfies Record<BrowserFrameSizeId, string>,
+    },
+    defaultVariants: {
+      variant: "macos",
+      size: "md",
+    },
+  },
+);
+
+export interface BrowserFrameProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof browserFrameVariants> {
+  ref?: Ref<HTMLDivElement>;
+}
+
+function BrowserFrame({
+  className,
+  variant,
+  size,
+  ref,
+  ...props
+}: BrowserFrameProps): ReactElement {
+  return (
+    <div
+      ref={ref}
+      data-slot="browser-frame"
+      data-variant={variant ?? "macos"}
+      data-size={size ?? "md"}
+      className={cn(browserFrameVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+}
+BrowserFrame.displayName = "BrowserFrame";
+
+const browserFrameHeaderVariants = cva(
+  "flex items-center gap-3 border-b bg-muted/60 backdrop-blur-sm",
+  {
+    variants: {
+      variant: {
+        macos: "border-border px-3 py-2.5",
+        windows: "border-border px-2 py-1.5",
+        minimal: "border-border px-3 py-2",
+      } satisfies Record<BrowserFrameVariantId, string>,
+      size: {
+        sm: "min-h-8",
+        md: "min-h-10",
+        lg: "min-h-12",
+      } satisfies Record<BrowserFrameSizeId, string>,
+    },
+    defaultVariants: {
+      variant: "macos",
+      size: "md",
+    },
+  },
+);
+
+export interface BrowserFrameHeaderProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof browserFrameHeaderVariants> {
+  ref?: Ref<HTMLDivElement>;
+}
+
+function BrowserFrameHeader({
+  className,
+  variant,
+  size,
+  ref,
+  ...props
+}: BrowserFrameHeaderProps): ReactElement {
+  return (
+    <div
+      ref={ref}
+      data-slot="browser-frame-header"
+      className={cn(browserFrameHeaderVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+}
+BrowserFrameHeader.displayName = "BrowserFrameHeader";
+
+export interface BrowserFrameControlsProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: BrowserFrameVariantId;
+  /**
+   * Disable the visual difference between hover/idle dots. When true,
+   * the controls render as non-interactive decorations only.
+   */
+  decorative?: boolean;
+  ref?: Ref<HTMLDivElement>;
+}
+
+const macosControlColors = [
+  {
+    label: "Close",
+    className: "bg-[#ff5f57] border-[#e0443e]",
+  },
+  {
+    label: "Minimize",
+    className: "bg-[#febc2e] border-[#dea123]",
+  },
+  {
+    label: "Maximize",
+    className: "bg-[#28c840] border-[#1aab29]",
+  },
+] as const;
+
+function BrowserFrameControls({
+  className,
+  variant = "macos",
+  decorative = true,
+  ref,
+  ...props
+}: BrowserFrameControlsProps): ReactElement {
+  if (variant === "minimal") {
+    return (
+      <div
+        ref={ref}
+        data-slot="browser-frame-controls"
+        className={cn("flex items-center", className)}
+        aria-hidden={decorative ? "true" : undefined}
+        {...props}
+      />
+    );
+  }
+
+  if (variant === "windows") {
+    return (
+      <div
+        ref={ref}
+        data-slot="browser-frame-controls"
+        data-variant="windows"
+        className={cn(
+          "ml-auto flex items-center gap-0 text-muted-foreground",
+          className,
+        )}
+        aria-hidden={decorative ? "true" : undefined}
+        {...props}
+      >
+        <span className="flex h-6 w-9 items-center justify-center hover:bg-muted">
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path d="M0 5h10" stroke="currentColor" strokeWidth="1" />
+          </svg>
+        </span>
+        <span className="flex h-6 w-9 items-center justify-center hover:bg-muted">
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="none"
+            aria-hidden="true"
+          >
+            <rect
+              x="0.5"
+              y="0.5"
+              width="9"
+              height="9"
+              stroke="currentColor"
+              strokeWidth="1"
+              fill="none"
+            />
+          </svg>
+        </span>
+        <span className="flex h-6 w-9 items-center justify-center hover:bg-destructive hover:text-white">
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path d="M0 0L10 10M10 0L0 10" stroke="currentColor" strokeWidth="1" />
+          </svg>
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={ref}
+      data-slot="browser-frame-controls"
+      data-variant="macos"
+      className={cn("flex items-center gap-1.5", className)}
+      aria-hidden={decorative ? "true" : undefined}
+      {...props}
+    >
+      {macosControlColors.map((control) => (
+        <span
+          key={control.label}
+          aria-label={decorative ? undefined : control.label}
+          className={cn(
+            "block size-3 rounded-full border",
+            control.className,
+          )}
+        />
+      ))}
+    </div>
+  );
+}
+BrowserFrameControls.displayName = "BrowserFrameControls";
+
+export interface BrowserFrameNavButtonsProps
+  extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+}
+
+function BrowserFrameNavButtons({
+  className,
+  ref,
+  ...props
+}: BrowserFrameNavButtonsProps): ReactElement {
+  return (
+    <div
+      ref={ref}
+      data-slot="browser-frame-nav-buttons"
+      className={cn(
+        "flex items-center gap-1 text-muted-foreground",
+        className,
+      )}
+      aria-hidden="true"
+      {...props}
+    >
+      <button
+        type="button"
+        tabIndex={-1}
+        disabled
+        className="flex size-6 items-center justify-center rounded-md hover:bg-muted disabled:opacity-50"
+        aria-label="Back"
+      >
+        <svg viewBox="0 0 16 16" className="size-3.5" fill="none" aria-hidden="true">
+          <path
+            d="M10 12L6 8L10 4"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+      <button
+        type="button"
+        tabIndex={-1}
+        disabled
+        className="flex size-6 items-center justify-center rounded-md hover:bg-muted disabled:opacity-50"
+        aria-label="Forward"
+      >
+        <svg viewBox="0 0 16 16" className="size-3.5" fill="none" aria-hidden="true">
+          <path
+            d="M6 4L10 8L6 12"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+      <button
+        type="button"
+        tabIndex={-1}
+        className="flex size-6 items-center justify-center rounded-md hover:bg-muted"
+        aria-label="Reload"
+      >
+        <svg viewBox="0 0 16 16" className="size-3.5" fill="none" aria-hidden="true">
+          <path
+            d="M13 8a5 5 0 1 1-1.46-3.54M13 3v3h-3"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}
+BrowserFrameNavButtons.displayName = "BrowserFrameNavButtons";
+
+export interface BrowserFrameAddressBarProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Optional icon (e.g. a lock/globe) rendered at the start of the bar.
+   * Defaults to a lock icon for HTTPS-looking URLs, globe otherwise.
+   */
+  leadingIcon?: ReactNode;
+  /**
+   * Optional element rendered at the end (e.g. star, share).
+   */
+  trailingIcon?: ReactNode;
+  /**
+   * When true, the bar is rendered as a static label rather than an input.
+   * This is the default — most usages are decorative.
+   */
+  readOnly?: boolean;
+  ref?: Ref<HTMLInputElement>;
+}
+
+function defaultLeadingIcon(value: string | number | readonly string[] | undefined): ReactElement {
+  const url = typeof value === "string" ? value : "";
+  const isSecure = url.startsWith("https://") || url === "";
+  if (isSecure) {
+    return (
+      <svg viewBox="0 0 16 16" className="size-3.5" fill="none" aria-hidden="true">
+        <rect
+          x="3"
+          y="7"
+          width="10"
+          height="7"
+          rx="1"
+          stroke="currentColor"
+          strokeWidth="1.25"
+        />
+        <path
+          d="M5 7V5a3 3 0 1 1 6 0v2"
+          stroke="currentColor"
+          strokeWidth="1.25"
+          strokeLinecap="round"
+        />
+      </svg>
+    );
+  }
+  return (
+    <svg viewBox="0 0 16 16" className="size-3.5" fill="none" aria-hidden="true">
+      <circle cx="8" cy="8" r="5.5" stroke="currentColor" strokeWidth="1.25" />
+      <path
+        d="M2.5 8h11M8 2.5c1.5 1.5 2.5 3.5 2.5 5.5s-1 4-2.5 5.5M8 2.5C6.5 4 5.5 6 5.5 8s1 4 2.5 5.5"
+        stroke="currentColor"
+        strokeWidth="1.25"
+      />
+    </svg>
+  );
+}
+
+function BrowserFrameAddressBar({
+  className,
+  value,
+  defaultValue,
+  leadingIcon,
+  trailingIcon,
+  readOnly = true,
+  ref,
+  ...props
+}: BrowserFrameAddressBarProps): ReactElement {
+  const resolvedLeadingIcon =
+    leadingIcon ?? defaultLeadingIcon(value ?? defaultValue);
+  return (
+    <div
+      data-slot="browser-frame-address-bar"
+      className={cn(
+        "flex min-w-0 flex-1 items-center gap-2 rounded-md border border-border/60 bg-background px-3 py-1 text-muted-foreground",
+        "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30",
+        className,
+      )}
+    >
+      {resolvedLeadingIcon ? (
+        <span className="flex shrink-0 items-center">{resolvedLeadingIcon}</span>
+      ) : null}
+      <input
+        ref={ref}
+        type="text"
+        value={value}
+        defaultValue={defaultValue}
+        readOnly={readOnly}
+        className={cn(
+          "min-w-0 flex-1 truncate bg-transparent text-foreground/80 outline-none placeholder:text-muted-foreground",
+          "selection:bg-primary/20",
+          readOnly && "cursor-default",
+        )}
+        {...props}
+      />
+      {trailingIcon ? (
+        <span className="flex shrink-0 items-center">{trailingIcon}</span>
+      ) : null}
+    </div>
+  );
+}
+BrowserFrameAddressBar.displayName = "BrowserFrameAddressBar";
+
+export interface BrowserFrameTabsProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+}
+
+function BrowserFrameTabs({
+  className,
+  ref,
+  ...props
+}: BrowserFrameTabsProps): ReactElement {
+  return (
+    <div
+      ref={ref}
+      role="tablist"
+      data-slot="browser-frame-tabs"
+      className={cn(
+        "flex items-end gap-0.5 border-b border-border bg-muted/40 px-2 pt-1.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+BrowserFrameTabs.displayName = "BrowserFrameTabs";
+
+export interface BrowserFrameTabProps
+  extends HTMLAttributes<HTMLDivElement> {
+  active?: boolean;
+  /** Optional favicon node (image, emoji, or svg). */
+  favicon?: ReactNode;
+  /** When true, shows a close affordance on hover. */
+  closable?: boolean;
+  ref?: Ref<HTMLDivElement>;
+}
+
+function BrowserFrameTab({
+  className,
+  active = false,
+  favicon,
+  closable = false,
+  children,
+  ref,
+  ...props
+}: BrowserFrameTabProps): ReactElement {
+  return (
+    <div
+      ref={ref}
+      role="tab"
+      aria-selected={active}
+      data-active={active}
+      data-slot="browser-frame-tab"
+      className={cn(
+        "group flex max-w-[14rem] items-center gap-2 rounded-t-md border border-b-0 px-3 py-1.5 text-xs",
+        active
+          ? "border-border bg-background text-foreground"
+          : "border-transparent bg-transparent text-muted-foreground hover:bg-background/40",
+        className,
+      )}
+      {...props}
+    >
+      {favicon ? (
+        <span className="flex size-3.5 shrink-0 items-center justify-center">
+          {favicon}
+        </span>
+      ) : null}
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+      {closable ? (
+        <button
+          type="button"
+          tabIndex={-1}
+          aria-label="Close tab"
+          className={cn(
+            "flex size-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted",
+            active ? "opacity-70" : "opacity-0 group-hover:opacity-70",
+          )}
+        >
+          <svg viewBox="0 0 10 10" className="size-2.5" fill="none" aria-hidden="true">
+            <path
+              d="M1 1L9 9M9 1L1 9"
+              stroke="currentColor"
+              strokeWidth="1.25"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+      ) : null}
+    </div>
+  );
+}
+BrowserFrameTab.displayName = "BrowserFrameTab";
+
+export interface BrowserFrameContentProps
+  extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * When provided, the content area is rendered with a fixed aspect ratio,
+   * useful for screenshot embeds. Expressed as `width / height`.
+   */
+  aspectRatio?: string;
+  ref?: Ref<HTMLDivElement>;
+}
+
+function BrowserFrameContent({
+  className,
+  style,
+  aspectRatio,
+  ref,
+  ...props
+}: BrowserFrameContentProps): ReactElement {
+  return (
+    <div
+      ref={ref}
+      data-slot="browser-frame-content"
+      style={aspectRatio ? { aspectRatio, ...style } : style}
+      className={cn(
+        "relative flex-1 overflow-hidden bg-background text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+BrowserFrameContent.displayName = "BrowserFrameContent";
+
+export {
+  BrowserFrame,
+  BrowserFrameHeader,
+  BrowserFrameControls,
+  BrowserFrameNavButtons,
+  BrowserFrameAddressBar,
+  BrowserFrameTabs,
+  BrowserFrameTab,
+  BrowserFrameContent,
+  browserFrameVariants,
+  browserFrameHeaderVariants,
+};
diff --git a/src/components/ui/browser-frame/index.ts b/src/components/ui/browser-frame/index.ts
new file mode 100644
index 0000000..fbdbfad
--- /dev/null
+++ b/src/components/ui/browser-frame/index.ts
@@ -0,0 +1,2 @@
+export * from "./browser-frame";
+export type * from "./browser-frame";
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index 4a4627c..df4b4a7 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -293,3 +293,6 @@ export type * from "./time-picker";
 
 export * from "./mark";
 export type * from "./mark";
+
+export * from "./browser-frame";
+export type * from "./browser-frame";

From f08b97ffedc0ab669e661df81dedc0b101b8104c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 11 Jun 2026 12:39:58 +0000
Subject: [PATCH 2/2] 0.73.0 - Fix AllVariants story rendering Windows controls
 on both sides of the BrowserFrame

---
 src/components/ui/browser-frame/BrowserFrame.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/browser-frame/BrowserFrame.stories.tsx b/src/components/ui/browser-frame/BrowserFrame.stories.tsx
index 7596cab..f0057d8 100644
--- a/src/components/ui/browser-frame/BrowserFrame.stories.tsx
+++ b/src/components/ui/browser-frame/BrowserFrame.stories.tsx
@@ -199,7 +199,7 @@ function AllVariantsExample(): ReactElement {
           </span>
           <BrowserFrame variant={variant} className="max-w-3xl">
             <BrowserFrameHeader variant={variant}>
-              {variant !== "minimal" ? (
+              {variant === "macos" ? (
                 <BrowserFrameControls variant={variant} />
               ) : null}
               <BrowserFrameAddressBar value="https://schemavaults.com" />