60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62:T548,/** @skrewww-component card */ import { createElement, type HTMLAttributes, type ReactNode } from "react"; import { cn } from "@/lib/cn"; import styles from "@/components/ui/card.module.css"; export type CardElevation = "flat" | "raised"; export type CardElement = "div" | "article" | "section" | "li"; export type CardProps = HTMLAttributes & { /** Semantic wrapper. Defaults to `div`. Use `article` only for independently meaningful content. */ as?: CardElement; elevation?: CardElevation; title?: string; /** Heading level for the optional title. Defaults to `h3`. */ headingLevel?: "h2" | "h3" | "h4"; footer?: ReactNode; bodyClassName?: string; }; export function Card({ as = "div", elevation = "flat", title, headingLevel: Heading = "h3", footer, bodyClassName, children, className, ...props }: CardProps) { return createElement( as, { className: cn( styles.card, elevation === "raised" ? styles.raised : styles.flat, className, ), ...props, }, title ? (

{title}

) : null,

{children}

, footer ? : null, ); } 63:Tb43,.card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--shape-radius-container); background-color: var(--surface-fill-default); background-image: var(--component-surface-gradient-overlay); border: 1px solid var(--surface-border-default); color: var(--semantic-text-primary); /* `none` outside Glass mode, where --glass-backdrop-filter-md is undefined — same enabling pattern as the squircle clip-path above. */ backdrop-filter: var(--glass-backdrop-filter-md, none); } .flat { box-shadow: none; } .raised { box-shadow: var(--surface-shadow-raised); border-color: transparent; } /* * clip-path clips box-shadow exactly like it clips outline (same underlying * reason). Rather than lose .raised's elevation shadow entirely in Squircle * mode, the fill and border move to a ::before layer that gets the real * clip-path curve, while .card itself — which keeps box-shadow, unclipped — * still uses its own border-radius above so the shadow's silhouette stays a * close visual match to the squircle rather than a plain rectangle. This is * a real, deliberate trade-off, not a bug: a shadow's soft, blurred edge * makes the sub-pixel difference between "traces the squircle exactly" and * "traces a similarly-sized rounded rect" imperceptible in practice. Card's * own overflow: hidden (for child content) is left on the existing * border-radius for the same reason — this codebase's Card usage always * pads content well away from the corners, so the two boundaries never * visibly diverge. */ [data-skrewww-shape="squircle"] .card { background: none; border-color: transparent; } [data-skrewww-shape="squircle"] .card::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--squircle-clip-path-container); background-color: var(--surface-fill-default); background-image: var(--component-surface-gradient-overlay); /* Squircle moves the fill here, so Glass's blur has to move with it — .card's own backdrop-filter above has nothing to blur once its background is none. */ backdrop-filter: var(--glass-backdrop-filter-md, none); border: 1px solid var(--surface-border-default); } [data-skrewww-shape="squircle"] .card.raised::before { border-color: transparent; } .header { padding: 1rem 1.25rem 0; } .title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--semantic-text-primary); } .body { padding: 1rem 1.25rem; font-size: 0.875rem; line-height: 1.6; color: var(--semantic-text-secondary); } .body:first-child { padding-top: 1.25rem; } .footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: auto; padding: 0 1.25rem 1.25rem; } .header + .body { padding-top: 0.5rem; } .body + .footer { padding-top: 0; } 5f:["$","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":[null,["$","$L60",null,{"namespace":"@skrewww","registryDependencies":["@skrewww/foundation"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/ui/Card.tsx","content":"$62","type":"registry:ui","target":"~/components/ui/Card.tsx"},{"path":"components/ui/card.module.css","content":"$63","type":"registry:ui","target":"~/components/ui/card.module.css"},{"path":"lib/cn.ts","content":"export function cn(...classes: Array): string {\n return classes.filter(Boolean).join(\" \");\n}\n","type":"registry:lib","target":"~/lib/cn.ts"}],"className":"h-[70svh] min-h-80"}]]}]