2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T2096,"use client"; import { IconShare3 } from "@tabler/icons-react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { toast } from "@/components/ui/toast"; import { cn } from "@/lib/utils"; import { mrchShopUrl } from "../../../lib/commerce/adapters/mrch"; import { formatMoney } from "../../../lib/commerce/select"; import type { Product } from "../../../lib/commerce/types"; import { Price } from "../../ui/price/price"; import { useCart } from "../_shared/cart-store"; import { PendingButton } from "../_shared/pending-button"; import { QuantityStepper } from "../_shared/ui/quantity-stepper"; import { StockMarker } from "../_shared/ui/stock-marker"; import { defaultTrustItems, TrustRow, type TrustItem } from "../_shared/ui/trust-row"; import { useLocked, type Locked } from "../_shared/use-locked"; import { useAddToCart } from "../_shared/use-add-to-cart"; import { useResolvedSelection, type VariantSelection } from "../_shared/use-variant-selection"; import { WindowFrame, type WindowTone } from "../_shared/window-frame"; import { PdpSizeGuide } from "../pdp-size-guide/pdp-size-guide"; import { PdpVariantPicker, type PdpVariantPickerProps } from "../pdp-variant-picker/pdp-variant-picker"; /* * Buy-state rule (shared by buy box, quick view, sticky bar and cart drawer): * - "Add to cart" stays enabled whenever the selected variant is `available`: the local bag works * even before a store exists. * - When the variant has no storeUrl (BuyTarget `soon`) there is exactly ONE quiet .micro line under * the button ("checkout opens on mrch.shop when the store goes live"). No second disabled button. * - A disabled "Sold out" button appears only when `available === false`. */ export type PdpBuyBoxProps = { product: Product; selection?: VariantSelection; /** * default: display-l title, full column. window: title-bar framed (playful brands). minimal: quiet, no extras. * compact: smaller title, for the quick view. */ variant?: "default" | "window" | "minimal" | "compact"; /** Brand slug for the mrch.shop UTM wrapper. Falls back to the CartProvider brand. */ brandSlug?: string; /** Placement tag for analytics (`utm_medium`). */ placement?: string; sizes?: readonly string[]; soldOutSizes?: readonly string[]; pickerVariant?: PdpVariantPickerProps["variant"]; /** Window title for the `window` variant. */ windowTitle?: string; /** Title-bar color: quiet (default), accent (light accents), accent-solid (dark accents). */ windowTone?: WindowTone; trust?: TrustItem[] | false; showSizeGuide?: boolean; /** Heading level of the title. */ as?: "h1" | "h2" | "p"; /** Pre-drop: while now < dropsAt the primary button is a disabled "Drops in 13d" and "Notify me" calls onNotify. */ locked?: Locked; onNotify?: () => void; className?: string; }; async function share(title: string) { const url = window.location.href; try { if (navigator.share) { await navigator.share({ title, url }); return; } await navigator.clipboard.writeText(url); toast({ message: "Link copied", state: "success" }); } catch { /* share sheet dismissed */ } } export function PdpBuyBox({ product, selection, variant = "default", brandSlug, placement = "product-buy", sizes, soldOutSizes, pickerVariant, windowTitle = "buy.exe", windowTone, trust, showSizeGuide = true, locked, onNotify, as: Heading = "h1", className, }: PdpBuyBoxProps) { const sel = useResolvedSelection(product, selection, { sizes }); const cart = useCart(); const { pending, add } = useAddToCart(sel); const [qty, setQty] = useState(1); const slug = brandSlug ?? cart.brand?.slug; const drop = useLocked(locked); const v = sel.variant; const compact = variant === "compact"; const minimal = variant === "minimal"; const trustItems = trust === false || minimal || compact ? null : (trust ?? defaultTrustItems); const mrchHref = v?.storeUrl ? slug ? mrchShopUrl(slug, placement, v.storeUrl, { designSlug: product.handle }) : v.storeUrl : null; const garment = sel.selected.Garment; const color = sel.selected.Color; const body = (

{product.line && product.line !== product.title ? ( {product.line} ) : product.collection ? ( {product.collection.replace(/-/g, " ")} ) : null} {product.title}

{minimal ? null : }

{variant === "window" && product.description ? (

{product.description}

) : null}

: undefined} />

(sel.available && !drop.locked ? add(qty) : undefined)} className="h-12 min-w-0 flex-1 text-base" > {drop.locked ? ( {drop.label} {drop.text} ) : sel.available ? ( "Add to cart" ) : ( "Sold out" )}

{drop.locked && onNotify ? ( ) : null} {drop.locked ? null : mrchHref ? ( ) : (

checkout opens on mrch.shop when the store goes live

)}

{trustItems ? : null} {minimal || compact ? null : (

)}

{v ? `${v.title} selected, ${formatMoney(sel.price)}` : ""}

); if (variant === "window") { return ( {body} ); } return body; } export default PdpBuyBox; 31:T2934,"use client"; import { motion, useReducedMotion } from "motion/react"; import { useId } from "react"; import type { ReactNode } from "react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import type { Product } from "../../../lib/commerce/types"; import { colorValue } from "../../ui/swatch/colors"; import { OptionPills, type OptionPillOption } from "../_shared/ui/option-pills"; import { EASE_OUT } from "../_shared/motion"; import { PortalScope } from "../_shared/portal-scope"; import { useResolvedSelection, type VariantSelection } from "../_shared/use-variant-selection"; export type PdpVariantPickerProps = { product: Product; selection?: VariantSelection; /** swatches: color dots + pills + segmented garment. dropdowns: Kobra select per option. pills-only: every option as pills. */ variant?: "swatches" | "dropdowns" | "pills-only"; /** Static size list when the product has no Size option (default S to 2XL). */ sizes?: readonly string[]; /** Sizes to show struck + disabled with a "Sold out" tooltip. Only pass what the store reports. */ soldOutSizes?: readonly string[]; /** Rendered beside the Size label: the size-guide trigger. */ sizeGuide?: ReactNode; className?: string; }; const ORDER = ["Garment", "Color", "Size"]; const rank = (name: string) => { const i = ORDER.indexOf(name); return i === -1 ? 1.5 : i; }; function Label({ name, value, aside, id }: { name: string; value?: string; aside?: ReactNode; id?: string }) { return (

{name} {value ? : {value} : null} {aside}

); } /** Round color dots on toggle-group. Hover or focus shows the colorway's own image in a tooltip. Arrow keys move within the group. */ function Swatches({ product, sel, name, }: { product: Product; sel: VariantSelection; name: string; }) { const values = product.options.find((o) => o.name === name)?.values ?? []; return ( next[0] && sel.select(name, next[0])} spacing={2} className="flex-wrap" > {values.map((value) => { const image = sel.imageForOption(name, value); const sold = !sel.isOptionAvailable(name, value); return ( } /> {image ? ( // eslint-disable-next-line @next/next/no-img-element

) : null} {sold ? `${value}, sold out` : value} ); })} ); } function Dropdown({ name, values, sel, invalid }: { name: string; values: OptionPillOption[]; sel: { value: string | undefined; onChange: (v: string) => void }; invalid?: boolean }) { return ( ); } /** Color swatches, size pills, garment segmented control. Emits through the shared variant selection. */ export function PdpVariantPicker({ product, selection, variant = "swatches", sizes, soldOutSizes = [], sizeGuide, className, }: PdpVariantPickerProps) { const sel = useResolvedSelection(product, selection, { sizes }); const reduce = useReducedMotion(); const uid = useId(); // Each Color maps 1:1 to a Garment (noteam: every garment has one colorway): hide Color, print it in the garment label. const colorByGarment = new Map>(); const garmentByColor = new Map>(); for (const v of product.variants) { const g = v.options.Garment; const c = v.options.Color; if (!g || !c) continue; colorByGarment.set(g, (colorByGarment.get(g) ?? new Set()).add(c)); garmentByColor.set(c, (garmentByColor.get(c) ?? new Set()).add(g)); } const colorMirrorsGarment = colorByGarment.size > 1 && colorByGarment.size === garmentByColor.size && [...colorByGarment.values()].every((s) => s.size === 1) && [...garmentByColor.values()].every((s) => s.size === 1); const names = [...product.options] .map((o) => o.name) .filter((n) => !(colorMirrorsGarment && n === "Color")) .sort((a, b) => rank(a) - rank(b)); const optionList = (name: string): OptionPillOption[] => (product.options.find((o) => o.name === name)?.values ?? []).map((value) => ({ value, label: colorMirrorsGarment && name === "Garment" ? `${value} · ${[...(colorByGarment.get(value) ?? [])][0]}` : undefined, disabled: !sel.isOptionAvailable(name, value), })); const sizeOptions: OptionPillOption[] = sel.sizes.map((value) => ({ value, disabled: soldOutSizes.includes(value), })); const sizeLabelId = `size-label-${uid}`; return (

{names.map((name) => { const isColor = name === "Color"; const isGarment = name === "Garment"; const isSize = name === "Size"; const options = optionList(name); if (options.length === 1) { // One value: nothing to choose, so a static "Label: value" line instead of a lone selected control. return (

{isColor && sel.imageNote ?

photo shows {sel.imageNote.toLowerCase()}

: null}

); } return (

{variant === "dropdowns" ? ( sel.select(name, v) }} /> ) : isColor && variant === "swatches" ? ( ) : ( String(o.label ?? o.value)).join("").length <= 26 ? "segmented" : "pill"} options={options} value={sel.selected[name]} onValueChange={(v) => sel.select(name, v)} /> )} {isColor && sel.imageNote ?

photo shows {sel.imageNote.toLowerCase()}

: null}

); })} {sel.needsSize ? (

{variant === "dropdowns" ? ( ) : ( )} {sel.sizeError ? (

Choose a size to add this to your cart.

) : null}

); } export default PdpVariantPicker; 32:T1b74,"use client"; import { IconRuler2 } from "@tabler/icons-react"; import { useState, type ReactNode } from "react"; import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"; import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { cn } from "@/lib/utils"; import { FOCUS_RING } from "../_shared/motion"; import { PortalScope } from "../_shared/portal-scope"; import { chartFor, defaultSizeCharts } from "../_shared/size-charts"; import type { SizeChart } from "../_shared/types"; import { useIsDesktop } from "../_shared/use-media-query"; export type PdpSizeGuideProps = { /** Garment label of the selected variant ("hoodie", "heavyweight tee"); picks the chart. */ garment?: string; charts?: SizeChart[]; /** Highlights this size's row. */ activeSize?: string; /** * auto: side sheet on md+, bottom drawer below. sheet: always a Kobra sheet (end edge on md+, bottom below); * use inside another dialog, where a second Vaul drawer would fight the focus trap. */ presentation?: "auto" | "sheet"; /** Replace the default text-link trigger. Rendered inside the trigger button. */ trigger?: ReactNode; defaultUnit?: "in" | "cm"; /** Slot for a "measure yourself" illustration. Defaults to a line drawing. */ illustration?: ReactNode; className?: string; }; function MeasureDrawing() { return ( ); } function Body({ chart, activeSize, unit, onUnit, illustration, }: { chart: SizeChart; activeSize?: string; unit: "in" | "cm"; onUnit: (u: "in" | "cm") => void; illustration?: ReactNode; }) { const fmt = (n: number) => (unit === "in" ? String(n) : String(Math.round(n * 2.54))); return (

{chart.rows.length ? `${chart.label}, flat garment, ${unit === "in" ? "inches" : "cm"}` : chart.label} {chart.rows.length ? ( next[0] && onUnit(next[0] as "in" | "cm")} > {(["in", "cm"] as const).map((u) => ( {u} ))} ) : }

{chart.rows.length ? ( Size {chart.columns.map((c) => ( {c} ))} {chart.rows.map((row) => ( {row.size} {row.values.map((v, i) => ( {fmt(v)} ))} ))}

) : null} {chart.notes?.length ? (

) : null} {chart.rows.length ? (

{illustration ?? }

Measure yourself Lay a tee that fits you flat. Measure chest edge to edge under the arms, and length from the top of the shoulder down.

) : null}

); } const linkClass = cn( "inline-flex items-center gap-1.5 rounded-sm text-sm text-ink-muted underline underline-offset-4 transition-colors duration-150 hover:text-ink", FOCUS_RING, ); /** Size guide: a Kobra sheet (md+) or drawer (below) with a table, in/cm toggle, fit notes and a measuring slot. */ export function PdpSizeGuide({ garment, charts = defaultSizeCharts, activeSize, presentation = "auto", trigger, defaultUnit = "in", illustration, className, }: PdpSizeGuideProps) { const desktop = useIsDesktop(); const [unit, setUnit] = useState<"in" | "cm">(defaultUnit); const chart = chartFor(garment, charts); const label = trigger ?? ( <> Size guide ); const body = ; const description = "Garment measurements. Between sizes, size up for a relaxed fit."; if (presentation === "auto" && !desktop) { return ( Size guide {description} {body} ); } return ( }>{label} Size guide {description} {body} ); } export default PdpSizeGuide; 33:T271d,"use client"; /* * Tiny client cart (no zustand): React context + a module store read with * useSyncExternalStore, persisted to localStorage per brand (`kc-cart:`). * * API (stable; the customizer imports this): * * * ...blocks... * * - `products` resolves stored lines back to product + variant for display. Lines whose * product is not in `products` (or registered through `add(item, product)`) are hidden. * - mounts Kobra (bottom-center) unless `toaster={false}`. * * const cart = useCart(); // safe outside a provider: `ready: false` and every method is a no-op * cart.ready boolean * cart.brand Brand | undefined * cart.shopifyDomain string | null set when the brand checks out on its own Shopify store * cart.items CartItem[] { variantId, productHandle, qty, size? } * cart.lines CartLine[] item + product + variant + lineTotal + key + checkoutHref * cart.count number total quantity * cart.subtotal Money | null null when the bag is empty * cart.open / cart.setOpen(boolean) drawer visibility (cart-drawer reads this) * cart.add(item: Omit & { qty?: number }, product?: Product) * cart.remove(key) cart.setQty(key, qty) cart.clear() (key = lineKey(item)) * cart.checkoutUrl(items?: CartItem[]) => string | null (items default to the bag) * * checkoutUrl(items, { brandSlug, shopifyDomain?, products }) => string | null (pure) * - brand has shopifyDomain -> https:///cart/:,: * - else the mrch.shop storeUrl of the FIRST item, wrapped with mrchShopUrl (UTM + attribution) * - else null ("checkout on mrch.shop coming soon") * mrch.shop checks out one design at a time, so the bag exits per line (CartLine.checkoutHref). * * lineKey(item) => string variantId + size, the identity of a bag line. */ import { createContext, useCallback, useContext, useMemo, useState, useSyncExternalStore, type ReactNode, } from "react"; import { Toasts } from "@/components/ui/toast"; import { PortalScope } from "./portal-scope"; import { mrchShopUrl } from "../../../lib/commerce/adapters/mrch"; import type { Brand, Money, Product, Variant } from "../../../lib/commerce/types"; import { buildCheckoutUrl, clampQty, lineKey, parseCart, type CartItem, type CheckoutContext } from "./cart-core"; export { lineKey, type CartItem }; export type CartLine = CartItem & { key: string; product: Product; variant: Variant; lineTotal: Money; /** Where this single line checks out (mrch.shop URL with UTM, or the Shopify permalink), or null. */ checkoutHref: string | null; }; export type Cart = { ready: boolean; brand: Brand | undefined; shopifyDomain: string | null; items: CartItem[]; lines: CartLine[]; count: number; subtotal: Money | null; open: boolean; setOpen: (open: boolean) => void; add: (item: Omit & { qty?: number }, product?: Product) => void; remove: (key: string) => void; setQty: (key: string, qty: number) => void; clear: () => void; checkoutUrl: (items?: CartItem[]) => string | null; }; export type { CheckoutContext }; export function checkoutUrl(items: CartItem[], ctx: CheckoutContext): string | null { return buildCheckoutUrl(items, ctx, (slug, placement, url, designSlug) => mrchShopUrl(slug, placement, url, { designSlug })); } /* ---- persistence: one module store per storage key --------------------------------------- */ type Store = { key: string; items: CartItem[]; loaded: boolean; listeners: Set<() => void>; }; const EMPTY: CartItem[] = []; const stores = new Map(); function storeFor(key: string): Store { let store = stores.get(key); if (!store) { store = { key, items: EMPTY, loaded: false, listeners: new Set() }; stores.set(key, store); } return store; } const parse = (raw: string | null): CartItem[] => { const items = parseCart(raw); return items.length ? items : EMPTY; }; function snapshot(store: Store): CartItem[] { if (!store.loaded && typeof window !== "undefined") { store.loaded = true; try { store.items = parse(window.localStorage.getItem(store.key)); } catch { store.items = EMPTY; } } return store.items; } function commit(store: Store, items: CartItem[]) { store.items = items.length ? items : EMPTY; store.loaded = true; try { window.localStorage.setItem(store.key, JSON.stringify(store.items)); } catch { /* private mode: the bag lives for the session */ } store.listeners.forEach((l) => l()); } function subscribe(store: Store, listener: () => void) { store.listeners.add(listener); const onStorage = (e: StorageEvent) => { if (e.key !== store.key) return; store.items = parse(e.newValue); listener(); }; window.addEventListener("storage", onStorage); return () => { store.listeners.delete(listener); window.removeEventListener("storage", onStorage); }; } /* ---- context ------------------------------------------------------------------------------ */ const noop = () => {}; const NO_CART: Cart = { ready: false, brand: undefined, shopifyDomain: null, items: EMPTY, lines: [], count: 0, subtotal: null, open: false, setOpen: noop, add: noop, remove: noop, setQty: noop, clear: noop, checkoutUrl: () => null, }; const CartContext = createContext(NO_CART); export function useCart(): Cart { return useContext(CartContext); } export type CartProviderProps = { brand: Brand; products: Product[]; shopifyDomain?: string | null; /** Mount the Kobra toast stack (the add-to-cart "Added" toast needs one). Default true. */ toaster?: boolean; children: ReactNode; }; export function CartProvider({ brand, products, shopifyDomain = null, toaster = true, children, }: CartProviderProps) { const store = storeFor(`kc-cart:${brand.slug}`); const items = useSyncExternalStore( (l) => subscribe(store, l), () => snapshot(store), () => EMPTY, ); const [open, setOpen] = useState(false); const [extra, setExtra] = useState([]); const catalog = useMemo(() => { const byHandle = new Map(); for (const p of extra) byHandle.set(p.handle, p); for (const p of products) byHandle.set(p.handle, p); return byHandle; }, [products, extra]); const checkoutFor = useCallback( (list: CartItem[]) => checkoutUrl(list, { brandSlug: brand.slug, shopifyDomain, products: [...catalog.values()], }), [brand.slug, shopifyDomain, catalog], ); const lines = useMemo(() => { const out: CartLine[] = []; for (const item of items) { const product = catalog.get(item.productHandle); const variant = product?.variants.find((v) => v.id === item.variantId); if (!product || !variant) continue; out.push({ ...item, key: lineKey(item), product, variant, lineTotal: { amount: variant.price.amount * item.qty, currency: variant.price.currency }, checkoutHref: checkoutFor([item]), }); } return out; }, [items, catalog, checkoutFor]); const add = useCallback( (item, product) => { if (product && !catalog.has(product.handle)) { setExtra((list) => [...list, product]); } const qty = clampQty(item.qty); const key = lineKey(item); const current = snapshot(store); const found = current.some((i) => lineKey(i) === key); commit( store, found ? current.map((i) => (lineKey(i) === key ? { ...i, qty: Math.min(99, i.qty + qty) } : i)) : [...current, { variantId: item.variantId, productHandle: item.productHandle, size: item.size, qty }], ); }, [store, catalog], ); const remove = useCallback( (key) => commit(store, snapshot(store).filter((i) => lineKey(i) !== key)), [store], ); const setQty = useCallback( (key, qty) => commit( store, !(qty >= 1) ? snapshot(store).filter((i) => lineKey(i) !== key) : snapshot(store).map((i) => (lineKey(i) === key ? { ...i, qty: clampQty(qty) } : i)), ), [store], ); const clear = useCallback(() => commit(store, EMPTY), [store]); const value = useMemo(() => { const count = lines.reduce((n, l) => n + l.qty, 0); const subtotal: Money | null = lines.length ? { amount: lines.reduce((n, l) => n + l.lineTotal.amount, 0), currency: lines[0].lineTotal.currency, } : null; return { ready: true, brand, shopifyDomain, items, lines, count, subtotal, open, setOpen, add, remove, setQty, clear, checkoutUrl: (list = items) => checkoutFor(list), }; }, [brand, shopifyDomain, items, lines, open, add, remove, setQty, clear, checkoutFor]); return ( {children} {toaster ? ( // A transformed ancestor becomes the containing block of the toast stack's fixed container, // so shifting this wrapper lifts the toasts above a sticky bar (--kc-sticky-offset, set by pdp-sticky-buy-bar).

) : null} ); } 34:T76c,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { toast } from "@/components/ui/toast"; import { useCart } from "./cart-store"; import type { VariantSelection } from "./use-variant-selection"; /* * Add to cart with the Kobra pending contract: the control keeps its word and shows a spinner * (`pending`), repeat presses are dropped. Demo latency is simulated (`delayMs`, default 600). * Success is a Kobra toast "Added" with an "Open cart" action. * * const { pending, add } = useAddToCart(selection); * add(qty) -> Promise false when nothing was added (sold out, no size, pending) */ export function useAddToCart(selection: VariantSelection, opts: { delayMs?: number } = {}) { const cart = useCart(); const [pending, setPending] = useState(false); const busy = useRef(false); const mounted = useRef(true); const delay = opts.delayMs ?? 600; useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []); const add = useCallback( async (qty = 1) => { const { variant, product, size, needsSize } = selection; if (busy.current || !variant || !variant.available) return false; if (needsSize && !size) { selection.flagSizeError(); return false; } busy.current = true; setPending(true); await new Promise((r) => setTimeout(r, delay)); cart.add({ variantId: variant.id, productHandle: product.handle, qty, size: needsSize ? size : undefined }, product); busy.current = false; if (mounted.current) setPending(false); if (cart.ready) { toast({ message: "Added", state: "success", action: { label: "Open cart", run: () => cart.setOpen(true) }, }); } return true; }, [selection, cart, delay], ); return { pending, add }; } 35:T1d21,"use client"; /* * Variant selection for PDP blocks. * * const selection = useVariantSelection(product, { sizes?, initial?, initialSize? }); * * Returns a VariantSelection (see the type below): selected options, the resolved * `variant` (via `variantFor`), `price` / `compareAt`, gallery `images` (via * `imagesFor`, the variant image first), availability, and a static size list. * * Size is NOT a product option in brand-factory data (no per-size data exists), so it is * tracked beside the options: `size`, `setSize`, `needsSize`. When a product DOES have a * "Size" option (Shopify/Printify), it behaves like any other option and `needsSize` is false. * * Share one selection between blocks either by passing `selection` down as a prop, or by * wrapping them in ; every PDP block resolves * its selection with `useResolvedSelection(product, selectionProp)`. */ import { createContext, createElement, useCallback, useContext, useMemo, useState, type ReactNode, } from "react"; import { findCheapestVariant, variantFor } from "../../../lib/commerce/select"; import { DEFAULT_SIZES, sizesFor } from "./sizes"; import { imagesForVariant, initialVariant } from "./variant-images"; import type { Money, Product, ProductImage, Variant } from "../../../lib/commerce/types"; export { DEFAULT_SIZES }; export type VariantSelection = { product: Product; /** Selected product options, e.g. { Garment: "hoodie", Color: "Black" }. */ selected: Record; /** Select one option. If the combination does not exist, the other options snap to the closest variant. */ select: (name: string, value: string) => void; /** The resolved variant (undefined only if the product has no variants). */ variant: Variant | undefined; price: Money; compareAt: Money | undefined; /** Gallery images for the selection: the variant image first, then the product's. */ images: ProductImage[]; /** Set when the photo shown belongs to a different Color than the one selected ("photo shows "). */ imageNote: string | undefined; /** images[0]. */ image: ProductImage | undefined; /** The selected variant can be bought (not sold out). */ available: boolean; /** Available AND has a store URL ("coming soon" when false but available). */ buyable: boolean; /** Selected variant's mrch.shop / checkout URL, or null ("coming soon"). */ storeUrl: string | null; /** Static size list (empty when the product has its own "Size" option). */ sizes: readonly string[]; size: string | undefined; setSize: (size: string) => void; /** True when a size must be chosen before adding to the cart. */ needsSize: boolean; /** Set when an add was attempted without a size; clears when a size is chosen. */ sizeError: boolean; flagSizeError: () => void; /** Whether any available variant carries this option value (a sold-out value is disabled). */ isOptionAvailable: (name: string, value: string) => boolean; /** The image a variant with this option value shows (for swatch hover previews). */ imageForOption: (name: string, value: string) => ProductImage | undefined; }; export type UseVariantSelectionOptions = { initial?: Record; sizes?: readonly string[]; initialSize?: string; }; export function hasSizeOption(product: Product): boolean { return product.options.some((o) => o.name === "Size"); } function closest(product: Product, name: string, value: string, selected: Record) { const pool = product.variants.filter((v) => v.options[name] === value); if (pool.length === 0) return undefined; const score = (v: Variant) => Object.entries(selected).filter(([k, val]) => k !== name && v.options[k] === val).length + (v.available ? 0.5 : 0); return pool.reduce((a, b) => (score(b) > score(a) ? b : a)); } export function useVariantSelection( product: Product, opts: UseVariantSelectionOptions = {}, ): VariantSelection { const [selected, setSelected] = useState>(() => ({ ...(initialVariant(product)?.options ?? {}), ...opts.initial, })); const [size, setSizeState] = useState(opts.initialSize); const [sizeError, setSizeError] = useState(false); // Garment-aware: a product Size option wins; else the explicit `sizes` option; else sizesFor(garment) (null = one size). const rule = opts.sizes ?? sizesFor(selected.Garment); const needsSize = !hasSizeOption(product) && rule !== null; const sizes = needsSize && rule ? rule : []; const variant = useMemo(() => variantFor(product, selected), [product, selected]); const shown = useMemo(() => imagesForVariant(product, variant), [product, variant]); const images = shown.images; const select = useCallback( (name: string, value: string) => { setSelected((prev) => { const next = { ...prev, [name]: value }; if (variantFor(product, next)) return next; const near = closest(product, name, value, prev); return near ? { ...near.options } : prev; }); }, [product], ); const setSize = useCallback((value: string) => { setSizeState(value); setSizeError(false); }, []); const flagSizeError = useCallback(() => setSizeError(true), []); const isOptionAvailable = useCallback( (name: string, value: string) => product.variants.some((v) => v.options[name] === value && v.available), [product], ); const imageForOption = useCallback( (name: string, value: string) => (closest(product, name, value, selected) ?? undefined)?.image, [product, selected], ); const fallback = findCheapestVariant(product); // A product with no variants is "unavailable": no throw, price falls back to the catalog range. const available = Boolean(variant?.available); return { product, selected, select, variant, price: (variant ?? fallback)?.price ?? product.priceRange.min, compareAt: variant?.compareAt, images, imageNote: shown.mismatch ? shown.shownColor : undefined, image: images[0], available, buyable: available && Boolean(variant?.storeUrl), storeUrl: variant?.storeUrl ?? null, sizes, size, setSize, needsSize, sizeError, flagSizeError, isOptionAvailable, imageForOption, }; } const SelectionContext = createContext(null); /** Shares one selection with every PDP block below it. */ export function VariantSelectionProvider({ product, children, ...opts }: UseVariantSelectionOptions & { product: Product; children: ReactNode }) { const selection = useVariantSelection(product, opts); return createElement(SelectionContext.Provider, { value: selection }, children); } /** The selection from a surrounding VariantSelectionProvider, or null (for optional wiring). */ export function useSharedSelection(): VariantSelection | null { return useContext(SelectionContext); } /** The explicit prop, else the provider's selection for the same product, else a private one. */ export function useResolvedSelection( product: Product, selection?: VariantSelection, opts?: UseVariantSelectionOptions, ): VariantSelection { const shared = useContext(SelectionContext); const own = useVariantSelection(product, opts); if (selection) return selection; if (shared && shared.product.handle === product.handle) return shared; return own; } 36:T7c9,"use client"; import type { ComponentProps } from "react"; import { Button } from "@/components/ui/button"; import { Spinner } from "@/components/ui/spinner"; import { cn } from "@/lib/utils"; import { EASE_EXIT, EASE_OUT } from "./motion"; type Props = ComponentProps & { pending?: boolean }; /** * The Kobra busy button: the label turns out and a spinner turns in (one shared flip, in the * same grid cell so the width never changes). `aria-busy`, repeat presses dropped, never * `disabled` (that would dim the spinner). Reduced motion: plain crossfade, the spinner still turns. */ export function PendingButton({ pending = false, children, onClick, className, ...props }: Props) { const handle: Props["onClick"] = (e) => { if (pending) { e.preventDefault(); return; } onClick?.(e); }; return ( ); } 37:T6b1,import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; /** Title-bar window (the lonelyboi move): accent title bar with three dots, hairline body. Tokens only. */ export type WindowTone = "quiet" | "accent" | "accent-solid"; const TONES: Record = { /** Surface bar, ink title, accent dots. Safe for every brand. */ quiet: "bg-surface text-ink border-b border-rule", /** Accent bar with ink title: for light accents (lonelyboi blue). */ accent: "bg-accent-brand text-ink", /** Accent bar with the accent-foreground title: for dark accents. */ "accent-solid": "bg-accent-brand text-accent-brand-foreground", }; export function WindowFrame({ title, children, className, bodyClassName, tone = "quiet", }: { title: string; children: ReactNode; className?: string; bodyClassName?: string; tone?: WindowTone; }) { return (

{title}

{children}

); } 38:Tb73,"use client"; import { IconMinus, IconPlus } from "@tabler/icons-react"; import { cva, type VariantProps } from "class-variance-authority"; import type { KeyboardEvent } from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; const stepper = cva( "inline-flex items-center rounded-lg border border-rule bg-canvas text-ink has-focus-visible:ring-3 has-focus-visible:ring-ring/50", { variants: { size: { default: "h-10", compact: "h-8", large: "h-12", }, }, defaultVariants: { size: "default" }, }, ); const readout = cva("tabular grid place-items-center text-center select-none outline-none focus-visible:ring-3 focus-visible:ring-ring/50 rounded-sm", { variants: { size: { default: "min-w-10 text-sm", compact: "min-w-8 text-[13px]", large: "min-w-14 text-base" }, }, defaultVariants: { size: "default" }, }); export type QuantityStepperProps = VariantProps & { value: number; onValueChange: (value: number) => void; min?: number; max?: number; /** Accessible name, e.g. "Quantity" or "Quantity of Wrench Grease Repeat". */ label?: string; className?: string; }; /** Minus, number, plus. The number is a spinbutton: arrow keys step it, tabular digits keep the width. */ export function QuantityStepper({ value, onValueChange, min = 1, max = 99, label = "Quantity", size = "default", className, }: QuantityStepperProps) { const set = (next: number) => onValueChange(Math.min(max, Math.max(min, next))); const onKeyDown = (e: KeyboardEvent) => { if (e.key === "ArrowUp" || e.key === "ArrowRight") { e.preventDefault(); set(value + 1); } else if (e.key === "ArrowDown" || e.key === "ArrowLeft") { e.preventDefault(); set(value - 1); } }; const iconSize = size === "compact" ? "icon-xs" : size === "large" ? "icon-lg" : "icon-sm"; return (

{value}

); } 39:T59c,import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; export type StockStatus = "made-to-order" | "in-stock" | "low" | "sold-out" | "coming-soon"; const LABEL: Record = { "made-to-order": "Printed on demand", "in-stock": "In stock", low: "Low stock", "sold-out": "Sold out", "coming-soon": "Coming soon", }; const DOT: Record = { "made-to-order": "bg-ink-muted", "in-stock": "bg-success", low: "bg-warning", "sold-out": "bg-error", "coming-soon": "bg-ink-muted", }; const marker = cva("micro inline-flex items-center gap-2 text-ink-muted", { variants: { variant: { dot: "", pill: "rounded-full border border-rule px-2.5 py-1", text: "", }, }, defaultVariants: { variant: "dot" }, }); export type StockMarkerProps = VariantProps & { status: StockStatus; /** Override the default label. */ label?: string; className?: string; }; /** Availability marker. Only pass in-stock / low / sold-out when the data says so; print-on-demand is "made-to-order". */ export function StockMarker({ status, label, variant, className }: StockMarkerProps) { return ( {variant === "text" ? null : } {label ?? LABEL[status]} ); } 3a:T5f9,import { IconBox, IconRefresh, IconTruckDelivery, IconPrinter } from "@tabler/icons-react"; import type { ComponentType } from "react"; import { cn } from "@/lib/utils"; export type TrustItem = { icon?: "shipping" | "returns" | "made-to-order" | "package" | ComponentType<{ className?: string }>; label: string; }; const ICONS = { shipping: IconTruckDelivery, returns: IconRefresh, "made-to-order": IconPrinter, package: IconBox, } as const; /** Neutral defaults: statements the print-on-demand setup can stand behind, no numbers or promises. */ export const defaultTrustItems: TrustItem[] = [ { icon: "made-to-order", label: "Made to order" }, { icon: "shipping", label: "Shipping at checkout" }, { icon: "returns", label: "Returns per store policy" }, ]; export type TrustRowProps = { items?: TrustItem[]; /** Stack vertically (quick view) instead of wrapping inline. */ stacked?: boolean; className?: string; }; export function TrustRow({ items = defaultTrustItems, stacked, className }: TrustRowProps) { return (

{item.label}

); } 3b:T6df,import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { formatMoney } from "../../../lib/commerce/select"; import type { Money } from "../../../lib/commerce/types"; const price = cva("tabular inline-flex items-baseline gap-2 text-ink", { variants: { variant: { default: "text-base", large: "display-m", "strike-compare": "text-base", "from-range": "text-base", }, }, defaultVariants: { variant: "default" }, }); export type PriceProps = VariantProps & { money: Money; /** Original price, shown struck through with the `strike-compare` variant. */ compareAt?: Money; /** Upper bound; with `from-range` renders "From $min" or "$min to $max". */ max?: Money; locale?: string; className?: string; }; export function Price({ variant = "default", money, compareAt, max, locale, className, }: PriceProps) { const now = formatMoney(money, locale); if (variant === "strike-compare" && compareAt) { return ( {now} ~~{formatMoney(compareAt, locale)}~~ ); } if (variant === "from-range") { const range = max && max.amount !== money.amount; return ( {range ? ( <> From {now} ) : ( {now} )} ); } return {now}; } 3c:T10b7,// Faithful port of mrch-agent/brand-kit/lib/network.ts (UTM scheme intact). import networkJson from "../../../../../data/network.json" with { type: "json" }; export type BrandKind = "premade" | "custom" | "hybrid"; export type BrandStatus = "live" | "preview" | "staging"; export interface NetworkBrand { slug: string; name: string; url: string | null; tagline: string; kind: BrandKind; status: BrandStatus; } export interface Network { schema: string; platform: { mrch: { name: string; url: string; tagline: string }; sellmerch: { name: string; url: string; tagline: string; startUrl: string }; }; brands: NetworkBrand[]; } export const network = networkJson as Network; export function siblingBrands( currentSlug: string, net: Network = network, ): (NetworkBrand & { url: string })[] { return net.brands.filter( (b): b is NetworkBrand & { url: string } => b.status === "live" && !!b.url && b.slug !== currentSlug, ); } export function findBrand(slug: string, net: Network = network): NetworkBrand | undefined { return net.brands.find((b) => b.slug === slug); } export interface Utm { source: string; medium: string; campaign?: string; content?: string; } export function withUtm(url: string, utm: Utm): string { const u = new URL(url); u.searchParams.set("utm_source", utm.source); u.searchParams.set("utm_medium", utm.medium); if (utm.campaign) u.searchParams.set("utm_campaign", utm.campaign); if (utm.content) u.searchParams.set("utm_content", utm.content); return u.toString(); } function b64url(s: string): string { const b64 = typeof Buffer !== "undefined" ? Buffer.from(s, "utf8").toString("base64") : btoa(String.fromCharCode(...new TextEncoder().encode(s))); return b64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""); } export interface MakeYourOwnOptions { slug: string; medium: string; prompt?: string; title?: string; campaign?: string; content?: string; } /** sellmerch.ai build URL (utm_source=, utm_medium=, utm_campaign=make-your-own-merch). */ export function makeYourOwnUrl(o: MakeYourOwnOptions, net: Network = network): string { const brand = findBrand(o.slug, net); const p = ( o.prompt || `I want to make my own shirt in the style of ${brand?.name ?? o.slug}.` ).slice(0, 600); const seed: Record = { v: 1, p }; if (o.title) seed.t = o.title; const u = new URL(net.platform.sellmerch.startUrl); u.searchParams.set("r", b64url(JSON.stringify(seed))); u.searchParams.set("dest", "organic"); u.searchParams.set("utm_source", o.slug); u.searchParams.set("utm_medium", o.medium); u.searchParams.set("utm_campaign", o.campaign || "make-your-own-merch"); if (o.content) u.searchParams.set("utm_content", o.content); return u.toString(); } export const BRAND_NETWORK_CART = "nofun-brand-factory"; export interface MrchShopUrlOptions { designSlug?: string | null; } /** * mrch.shop URL with UTM plus Shopify cart note attributes so purchase * attribution survives checkout. Existing query on product URLs is preserved. */ export function mrchShopUrl( slug: string, medium: string, target?: string | null, netOrOpts: Network | MrchShopUrlOptions = network, maybeOpts?: MrchShopUrlOptions, ): string { const net: Network = netOrOpts && typeof netOrOpts === "object" && "brands" in (netOrOpts as Network) ? (netOrOpts as Network) : network; const opts: MrchShopUrlOptions = maybeOpts || (netOrOpts && typeof netOrOpts === "object" && !("brands" in (netOrOpts as Network)) ? (netOrOpts as MrchShopUrlOptions) : {}); const base = target && /^https?:\/\//.test(target) ? target : net.platform.mrch.url + (target ?? ""); const withCampaign = withUtm(base, { source: slug, medium, campaign: "network" }); const u = new URL(withCampaign); u.searchParams.set("dest", "organic"); u.searchParams.set("attributes[dest]", "organic"); u.searchParams.set("attributes[brand]", slug); u.searchParams.set("attributes[brand_network]", BRAND_NETWORK_CART); if (opts.designSlug) { u.searchParams.set("attributes[design_slug]", opts.designSlug); } return u.toString(); } export const OUTBOUND_REL = "noopener"; 3d:Ta9c,