// In the VO definition
declare const uniqueBrand: unique symbol;
export type BrandedFolderId = string & { readonly [uniqueBrand]: never };

export class FolderId {
  // ...
  toBranded(): BrandedFolderId {
    return this.value as BrandedFolderId;
    // Caller receives a plain string at runtime,
    // but TypeScript knows it came from a valid FolderId.
  }
}

// Server Component
import { FolderItem } from "./FolderItem"; // client component

export async function FolderList() {
  const folders = /* from use case */;

  return folders.map((folder) => (
    <FolderItem
      key={folder.getId().toBranded()}
      folderId={folder.getId().toBranded()} // ✅ branded primitive
      name={folder.getName().toBranded()}    // ✅ plain string
    />
  ));
}

"use client";

import { type BrandedFolderId } from "@/folders/domain/value-objects/folderId";

interface FolderItemProps {
  folderId: BrandedFolderId; // branded primitive — valid by construction, no need to re-validate
  name: string;
}

export function FolderItem({ folderId, name }: FolderItemProps) {
  // folderId is a string at runtime, branded for type safety.
  // Pass it directly to a server action — no .from() or error handling needed.
  // The server action receives it as a string and reconstructs the VO internally.
}

// ServerPage.tsx (server)
import { ClientWidget } from "./ClientWidget";

export default async function ServerPage() {
  const data = await fetchData();
  return <ClientWidget items={data.map((d) => ({ id: d.getId().toBranded(), name: d.getName().toBranded() }))} />;
}

// Layout.tsx (server)
import { Sidebar } from "./Sidebar"; // client component
import { UserProfile } from "./UserProfile"; // server component

export default async function Layout({ children }: { children: ReactNode }) {
  return (
    <Sidebar>
      <UserProfile /> {/* server component passed as children — valid */}
      {children}
    </Sidebar>
  );
}

// Sidebar.tsx (client)
"use client";

export function Sidebar({ children }: { children: ReactNode }) {
  const [open, setOpen] = useState(true);
  return <aside>{children}</aside>; // renders server components correctly
}

// ✅ Only the button is a client component
export async function FolderCard({ folder }: Props) {
  return (
    <div>
      <h2>{folder.getName().toBranded()}</h2>
      <DeleteFolderButton folderId={folder.getId().toBranded()} /> {/* client */}
    </div>
  );
}

// ❌ The entire card becomes client just because of one button
"use client";
export function FolderCard({ folder }: Props) { ... }

// ✅ Correct — serializable props for data coming from a Server Component
interface LinksTableProps {
  links: {
    id: BrandedUUID;
    name: BrandedLinkName;
    shortLink: BrandedShortLink;
    destination: BrandedDestination;
    clicks: BrandedNonNegativeInteger;
  }[];
}

// ❌ Wrong — VO class in props passed from a Server Component (not serializable)
interface LinksTableProps {
  links: ShortUrl[]; // ShortUrl is a class — cannot cross the RSC boundary
}