2d: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"],""] 2e: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"] 2f: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"] 30: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"] 31:T2132,"use client"; import { useRef, useState } from "react"; import { motion, useReducedMotion, type PanInfo } from "motion/react"; import { cn } from "@/lib/utils"; export type EditorialDeckCard = { id: string; date: string; title: string; image: string; imageAlt?: string; /** Card background. Defaults to the card surface; pass a wash for the editorial tint. */ tint?: string; href?: string; }; const STACK_Y = 10; const STACK_SCALE = 0.045; const STACK_PEEK = 2; const SWIPE = 90; const LIFT_Y = -64; const LIFT_SCALE = 0.92; const SETTLE = { type: "spring", duration: 0.4, bounce: 0 } as const; const LIFT = { type: "spring", duration: 0.32, bounce: 0.12 } as const; const TUCK = { type: "spring", duration: 0.38, bounce: 0 } as const; type FlyPhase = "lift" | "tuck"; function rotateOrder(prev: number[], from: number) { return [...prev.slice(from), ...prev.slice(0, from)]; } export interface EditorialDeckProps { cards: EditorialDeckCard[]; title?: string; subtitle?: string; className?: string; } /** * Draggable stack of editorial story cards. Dragging the front card past the * swipe threshold (or flicking it) lifts it and tucks it to the back; dot * buttons below jump any card to the front for keyboard users. */ export function EditorialDeck({ cards, title = "Editorial deck", subtitle = "Drag to flip through stories", className }: EditorialDeckProps) { const reduceMotion = useReducedMotion() ?? false; const [order, setOrder] = useState(() => cards.map((_, i) => i)); const [fly, setFly] = useState(false); const [peel, setPeel] = useState(0); const flight = useRef({ flying: false, phase: "idle" as FlyPhase | "idle", started: 0 }); if (cards.length === 0) return null; const lastDepth = cards.length - 1; const showIntro = Boolean(title || subtitle); const peek = Math.min(lastDepth, STACK_PEEK); const commitBack = () => { const f = flight.current; if (!f.flying) return; if (Date.now() - f.started < 180) return; f.flying = false; f.phase = "idle"; setOrder((prev) => rotateOrder(prev, 1)); setFly(false); }; const sendToBack = () => { const f = flight.current; if (f.flying) return; if (reduceMotion) { setOrder((prev) => rotateOrder(prev, 1)); return; } f.flying = true; f.phase = "lift"; f.started = Date.now(); setFly("lift"); window.setTimeout(() => { if (flight.current.phase !== "lift") return; flight.current.phase = "tuck"; setFly("tuck"); }, 300); window.setTimeout(commitBack, 720); }; const jumpToFront = (cardArrayIndex: number) => { if (flight.current.flying) return; const pos = order.indexOf(cardArrayIndex); if (pos <= 0) return; setOrder((prev) => rotateOrder(prev, pos)); }; const advanceLift = () => { if (flight.current.phase !== "lift") return; flight.current.phase = "tuck"; setFly("tuck"); }; return (

{showIntro ? (

{title ?

{title}

: null} {subtitle ?

{subtitle}

: null}

) : null}

{order .slice() .reverse() .map((cardIndex, revI) => { const restDepth = lastDepth - revI; const isFront = restDepth === 0; const depth = isFront && fly ? lastDepth : fly && restDepth > 0 ? restDepth - 1 : restDepth; return ( ); })}

{cards.map((c, i) => (

); } /** One card in the stack. Motion callbacks are its own event handlers. */ function DeckCard({ card, depth, isFront, fly, peel, setPeel, commitBack, sendToBack, onLiftSettled, }: { card: EditorialDeckCard; depth: number; isFront: boolean; fly: FlyPhase | false; peel: number; setPeel: (x: number) => void; commitBack: () => void; sendToBack: () => void; onLiftSettled: () => void; }) { const reduceMotion = useReducedMotion() ?? false; const [releaseVx, setReleaseVx] = useState(0); const isFlying = isFront && Boolean(fly); const lifting = isFront && fly === "lift"; const tucking = isFront && fly === "tuck"; const vis = Math.min(depth, STACK_PEEK); const canDrag = isFront && !fly; const peeling = canDrag && peel !== 0; const peelX = canDrag && !reduceMotion ? peel : 0; const dragShrink = Math.min(Math.abs(peelX) / 280, 0.12); const onDrag = (_: unknown, info: PanInfo) => { setPeel(info.offset.x); setReleaseVx(info.velocity.x); }; const onDragEnd = (_: unknown, info: PanInfo) => { setReleaseVx(info.velocity.x); const commit = Math.abs(info.offset.x) > SWIPE || Math.abs(info.velocity.x) > 450; setPeel(0); if (commit) sendToBack(); }; const onSettled = () => { if (!isFront) return; if (fly === "lift") { onLiftSettled(); return; } if (fly === "tuck") commitBack(); }; return (

{/* eslint-disable-next-line @next/next/no-img-element */} {card.imageAlt

{card.date}

{card.href ? ( {card.title} ) : ( card.title )}

); } export default EditorialDeck; 32:T64b,"use client"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { productFixture } from "../../../lib/commerce/fixtures/product"; import { EditorialDeck, type EditorialDeckCard } from "./editorial-deck"; const TINTS = [ "color-mix(in oklch, var(--chart-1) 16%, var(--card))", "color-mix(in oklch, var(--chart-2) 16%, var(--card))", "color-mix(in oklch, var(--chart-3) 16%, var(--card))", "color-mix(in oklch, var(--chart-4) 16%, var(--card))", "color-mix(in oklch, var(--chart-5) 16%, var(--card))", ]; export function EditorialDeckDemo({ brand }: { brand?: string }) { const fx = productFixture(brand); const cards: EditorialDeckCard[] = fx.products.slice(0, 5).map((p, i) => ({ id: p.handle, date: p.collection, title: p.title, image: (p.images.find((im) => im.hasArt !== false) ?? p.featuredImage).src, imageAlt: (p.images.find((im) => im.hasArt !== false) ?? p.featuredImage).alt, tint: TINTS[i % TINTS.length], href: `/products/${p.handle}`, })); return ( ); } export default EditorialDeckDemo; 33:T421,import type { BlockMeta } from "../../../lib/block-meta"; export const editorialDeckMeta: BlockMeta = { slug: "editorial-deck", title: "Editorial deck", description: "Draggable stack of lookbook story cards where the front card lifts and tucks to the back. Dot buttons jump any card forward; instant reorder under reduced motion.", group: "gallery", kobraDeps: [], files: [ "blocks/gallery/editorial-deck/editorial-deck.tsx", ], props: [ { name: "cards", type: "EditorialDeckCard[]", description: "{ id, date, title, image, imageAlt?, tint?, href? } in stack order." }, { name: "title", type: "string", default: "'Editorial deck'", description: "Eyebrow above the deck; empty hides the intro." }, { name: "subtitle", type: "string", default: "'Drag to flip through stories'", description: "Headline under the eyebrow." }, ], tags: ["deck", "cards", "lookbook", "swipe", "stories"], status: "ready", origin: { name: "uselayouts", url: "https://uselayouts.com/docs/components/editorial-deck", license: "MIT" }, }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#gallery","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Gallery"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Editorial deck"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Editorial deck"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Draggable stack of lookbook story cards where the front card lifts and tucks to the back. Dot buttons jump any card forward; instant reorder under reduced motion."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"editorial-deck","group":"gallery","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/gallery/editorial-deck/editorial-deck.tsx","code":"$31"},{"path":"blocks/gallery/editorial-deck/demo.tsx","code":"$32"},{"path":"blocks/gallery/editorial-deck/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]