50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T27df,"use client" import * as React from "react" import { cn } from "cn" import { PaymentCard, type PaymentCardProps } from "@/components/ui/payment-card" /** An access key as a plastic card with a magnetic stripe. A PaymentCard underneath. */ function Keycard({ className, children, tone = "graphite", ...props }: PaymentCardProps) { return ( {children} ) } function KeycardLabel({ className, ...props }: React.ComponentProps<"span">) { return ( ) } type KeycardKeyProps = Omit, "children"> & { /** The full key. Only its prefix and last four are shown unless revealed. */ value: string revealed?: boolean } /** The key itself, masked to its prefix and last four characters. */ function KeycardKey({ value, revealed = false, className, ...props }: KeycardKeyProps) { const prefix = value.match(/^[a-z]+[-_]/i)?.[0] ?? "" const last4 = value.slice(-4) return ( {revealed ? ( value ) : ( <> {prefix} •••••••• ending in {last4} )} ) } type KeycardSlotProps = React.ComponentProps<"div"> & { /** The card is in the reader. */ inserted?: boolean /** Text on the reader plate. Defaults describe whether a key is in. */ status?: React.ReactNode } /** A brass card reader. Put a Keycard inside; set `inserted` and it slides into the slot. */ function KeycardSlot({ className, inserted = false, status, children, ...props }: KeycardSlotProps) { return (

{/* The reader hides whatever part of the card is inside it. */}

{children}

{status ?? (inserted ? "Key in use" : "No key inserted")}

) } // A swipe counts once the card has travelled this share of the channel, // or if it's flicked faster than this (px/ms), however short the drag. const SWIPE_DISTANCE = 0.6 const SWIPE_VELOCITY = 0.11 // Resistance past either end of the channel. const FRICTION = 0.2 /** * Run `then` when the element's transition ends. Falls back to a timer so a * hidden tab (where transitions don't run) can't leave the reader stuck. */ function afterTransition(element: HTMLElement, animated: boolean, then: () => void) { if (!animated) return then() let done = false const finish = () => { if (done) return done = true then() } element.addEventListener("transitionend", finish, { once: true }) const seconds = parseFloat(getComputedStyle(element).transitionDuration) || 0 window.setTimeout(finish, seconds * 1000 + 50) } type KeycardSwipeProps = Omit, "children"> & { /** Called when a swipe completes, by drag, flick or keyboard. */ onSwipe?: () => void /** Lights the reader lamp, e.g. once a key is accepted. */ accepted?: boolean /** Text on the reader plate, announced politely. */ status?: React.ReactNode /** The action, read before the card's own text: "Swipe key: Your OpenAI key…". */ label?: string /** A Keycard. */ children: React.ReactNode } /** * A swipe reader: drag the card left to right through the channel. A long * enough drag or a quick flick completes the swipe; a short one springs * back. Enter or Space swipes from the keyboard. */ function KeycardSwipe({ className, onSwipe, accepted = false, status, label = "Swipe key", children, ...props }: KeycardSwipeProps) { const trackRef = React.useRef(null) const cardRef = React.useRef(null) const drag = React.useRef<{ pointerId: number; startX: number; startTime: number; x: number } | null>(null) const busy = React.useRef(false) const position = React.useRef(0) const statusId = React.useId() const travel = () => (trackRef.current?.clientWidth ?? 0) - (cardRef.current?.offsetWidth ?? 0) const reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches // Position is written straight to the element so dragging never re-renders. const moveTo = (x: number, transition: "none" | "through" | "back" | "spring", then?: () => void) => { const card = cardRef.current if (!card) return const animated = transition !== "none" && !reducedMotion() && position.current !== x position.current = x card.style.transition = animated ? { through: "translate var(--bevel-duration-move) var(--bevel-ease-out)", back: "translate var(--bevel-duration-ambient) var(--bevel-ease-in-out)", spring: "translate var(--bevel-duration-move) var(--bevel-ease-spring)", none: "none", }[transition] : "none" card.style.translate = `${x}px 0` if (then) afterTransition(card, animated, then) } const swipe = () => { if (busy.current) return busy.current = true // The swipe is decided now; state doesn't wait for the animation. onSwipe?.() moveTo(travel(), "through", () => // Then the card comes back out of the reader, slower than it went through. moveTo(0, "back", () => { busy.current = false }) ) } return (

{ if (event.key !== "Enter" && event.key !== " ") return event.preventDefault() swipe() }} onPointerDown={(event) => { // One finger at a time; a second touch mid-drag is ignored. if (drag.current || busy.current || event.button !== 0) return event.currentTarget.setPointerCapture(event.pointerId) drag.current = { pointerId: event.pointerId, startX: event.clientX, startTime: event.timeStamp, x: 0 } }} onPointerMove={(event) => { const d = drag.current if (!d || d.pointerId !== event.pointerId) return const raw = event.clientX - d.startX const max = travel() // Friction past either end instead of a hard stop. d.x = raw < 0 ? raw * FRICTION : raw > max ? max + (raw - max) * FRICTION : raw moveTo(d.x, "none") }} onPointerUp={(event) => { const d = drag.current if (!d || d.pointerId !== event.pointerId) return drag.current = null const velocity = d.x / Math.max(1, event.timeStamp - d.startTime) if (d.x >= travel() * SWIPE_DISTANCE || velocity > SWIPE_VELOCITY) swipe() else moveTo(0, "spring") }} onPointerCancel={() => { drag.current = null moveTo(0, "spring") }} > {/* The action leads the name; the card's visible text follows, so voice users can say what they see. */} {label}: {children}

{status ?? (accepted ? "Key accepted" : "Swipe the card to the right")}

) } export { Keycard, KeycardLabel, KeycardKey, KeycardSlot, KeycardSwipe } export type { KeycardKeyProps, KeycardSlotProps, KeycardSwipeProps } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@bevel","registryDependencies":["https://bevel-ui.vercel.app/r/bevel.json","https://bevel-ui.vercel.app/r/payment-card.json"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":":root {\n\t--keycard-stripe: oklch(0.18 0.01 260);\n\t--keycard-plate-height: 3.75rem;\n\t--keycard-insert: 62%;\n\t--keycard-swipe-overlap: 1.25rem;\n\t--keycard-slot-ok: oklch(0.8 0.17 150);\n\t--keycard-slot-idle: oklch(0.45 0.01 260);\n}\n\n[data-slot=\"keycard-slot\"] {\n\t--bevel-led: var(--keycard-slot-idle);\n}\n\n[data-slot=\"keycard-slot\"][data-inserted], [data-slot=\"keycard-swipe\"][data-accepted] {\n\t--bevel-led: var(--keycard-slot-ok);\n}\n\n[data-slot=\"keycard-swipe\"] {\n\t--bevel-led: var(--keycard-slot-idle);\n}\n\n[data-slot=\"keycard-reader\"] {\n\t--bevel-material: var(--bevel-brass);\n\t--bevel-material-edge: var(--bevel-brass-edge);\n}\n\n@utility keycard-mouth {\n\tclip-path: inset(-2rem -2rem calc(var(--keycard-plate-height) * -1) -2rem);\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/bevel/ui/keycard.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]