4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T2e0e,"use client"; import { ArrowUpRight } from "lucide-react"; import { motion, useReducedMotion, type Transition } from "motion/react"; import { useId, useState, type CSSProperties } from "react"; import { cn } from "@/lib/utils"; const FIELD_BOX = 100; const GLYPH_GRID = 24; const DEFAULT_GLYPH_SIZE = 62; /** * Plus marks and the grid they sit on. `TILE` is the pitch between marks and * `PLUS_ARM` is half the length of one, so the pair controls how dense and how * heavy the field reads. Smaller arms with a tighter tile give a finer grain. */ const TILE = 2.1; const PLUS_ARM = 0.4; const PLUS_STROKE = 0.18; const PLUS_CENTER = TILE / 2; const PLUS_PATH = `M${PLUS_CENTER - PLUS_ARM} ${PLUS_CENTER}h${PLUS_ARM * 2}M${PLUS_CENTER} ${PLUS_CENTER - PLUS_ARM}v${PLUS_ARM * 2}`; /** * Hover defocus for the resting field. * * The blur is applied to a `` inside the SVG, so the radius is in user * units, not CSS pixels: the field is a 100-unit viewBox stretched across the * card, so one unit is roughly 3.8px on a 380px card and `FIELD_BLUR` reads as * under 2px on screen. * * Blur averages pixels rather than moving them, so a mark thinner than the * radius loses its peak and fades to nothing. At the resting stroke of 0.18 * units a defocused field does not go soft, it disappears. The stroke and the * opacity therefore grow together with the blur, which is what keeps the haze * visible instead of empty. Widen `FIELD_BLUR` and both have to follow. */ const FIELD_BLUR = 0.44; const PLUS_STROKE_DEFOCUSED = 0.34; const REST_OPACITY = 1; const REST_OPACITY_DEFOCUSED = 0.5; const FIELD_ORIGIN: CSSProperties = { transformBox: "view-box", transformOrigin: `${FIELD_BOX / 2}px ${FIELD_BOX / 2}px`, }; const PLUS_ORIGIN: CSSProperties = { transformOrigin: `${PLUS_CENTER}px ${PLUS_CENTER}px`, }; const FOCUS: Transition = { duration: 0.24, ease: [0.22, 1, 0.36, 1], }; const REDUCED: Transition = { duration: 0 }; /** * Published-file fallbacks. `--primary` and `--card-foreground` are this site's * tokens, so a consumer project without them would otherwise render the artwork * in an invalid color. Literals mirror the light-theme token values. */ const FALLBACK_ACCENT = "#1447E6"; const FALLBACK_CARD_FOREGROUND = "#0A0A0A"; export interface GlyphCardProps { /** Small mono label in the top-left, for example "Runtime". */ eyebrow: string; title: string; subtitle?: string; /** Makes the whole card a link. Omit for a static card. */ href?: string; /** Link target attribute, for example "_blank". */ target?: string; /** Link rel attribute, for example "noopener noreferrer". */ rel?: string; /** Explicit accessible label for the card link. */ "aria-label"?: string; /** SVG path data authored on a 24x24 grid. */ glyph: string; /** * Shifts the glyph inside the 24x24 viewBox, in grid units. * * Most brand marks are already centered on the grid and need nothing. A mark * that is not, for example one whose art only occupies the bottom-right * quadrant, ends up off-center inside the card. Rather than rewriting the path * coordinates, pass the offset that recenters it: a mark whose bounding box * runs x 10..22 and y 8..24 has a center of (16, 16), so it wants * `glyphOffset={[-4, -4]}` to land on (12, 12). */ glyphOffset?: readonly [number, number]; /** * Size of the glyph viewport inside the 100x100 field. */ glyphSize?: number; /** Accent for the artwork and link arrow. */ accent?: string; className?: string; } export function GlyphCard({ eyebrow, title, subtitle, href, target, rel, "aria-label": ariaLabel, glyph, glyphOffset, glyphSize = DEFAULT_GLYPH_SIZE, accent = `var(--primary, ${FALLBACK_ACCENT})`, className, }: GlyphCardProps) { const uid = `gc-${useId().replace(/:/g, "-")}`; const restPatternId = `${uid}-rp`; const hoverPatternId = `${uid}-hp`; const outsideMaskId = `${uid}-om`; const insideMaskId = `${uid}-im`; const [isActive, setIsActive] = useState(false); const reduceMotion = useReducedMotion(); const focus = reduceMotion ? REDUCED : FOCUS; const glyphScale = reduceMotion ? 1 : 0.965; // A quarter turn would look identical because a plus is 90-degree symmetric. // Forty-five degrees makes the background marks resolve into subtle x shapes. const plusRotation = reduceMotion || !isActive ? 0 : 45; /* * The glyph sits in a `glyphSize` box centered inside the 100x100 field, so * the inset is half the leftover space. Both masks share it, which is what * keeps the resting field and the hover field cut to the same shape. */ const glyphInset = (FIELD_BOX - glyphSize) / 2; /* * Applied on a wrapping so both masks move together. The transform is in * grid units, which are the units the glyph author already knows. */ const glyphTransform = glyphOffset ? `translate(${glyphOffset[0]} ${glyphOffset[1]})` : undefined; /* * The SVG covers the complete card. preserveAspectRatio="none" lets the plus * field reach every edge, while each mask contains a nested 24x24 SVG that * preserves the glyph proportions inside a centered responsive viewport. */ const field = ( ); const isExternal = target === "_blank" || (typeof href === "string" && (href.startsWith("http://") || href.startsWith("https://"))); const content = ( <>

{eyebrow} {href ? ( ) : null}

{title}

{subtitle ? (

{subtitle}

) : null}

); const rootClass = cn( "group relative grid h-full w-full min-w-0 grid-rows-[auto_1fr_auto] gap-4 overflow-hidden rounded-none", "bg-background p-2 ring-1 ring-inset ring-border sm:p-5", // Mirrors the site's `.micro-transition`, inlined so the published file // carries no dependency on a class that only exists in this project. "transition-[transform,background-color,border-color,color,opacity,box-shadow]", "duration-[220ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", className, ); const interactionProps = { onHoverStart: () => setIsActive(true), onHoverEnd: () => setIsActive(false), onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), }; const style = { color: accent }; if (href) { const computedRel = rel ?? (target === "_blank" ? "noopener noreferrer" : undefined); return ( {field} {content} ); } return ( {field} {content} ); } 4b:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L4c",null,{"namespace":"@akoder","registryDependencies":[]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ui/glyph-card.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]