52: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"] 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:T176b,/** * @module PixelParagraph * * Renders a paragraph where specific words / phrases use a pixel font * while the rest of the text stays in the normal font. * * Setup — Geist Pixel Fonts with Tailwind CSS * ============================================= * * All Geist fonts can be used through CSS variables: * * GeistSans: --font-geist-sans * GeistMono: --font-geist-mono * GeistPixelSquare: --font-geist-pixel-square * GeistPixelGrid: --font-geist-pixel-grid * GeistPixelCircle: --font-geist-pixel-circle * GeistPixelTriangle: --font-geist-pixel-triangle * GeistPixelLine: --font-geist-pixel-line * * 1. Register the font variables in app/layout.js: * * ```js * import { GeistSans } from "geist/font/sans"; * import { GeistMono } from "geist/font/mono"; * import { GeistPixelSquare } from "geist/font/pixel"; * * export default function RootLayout({ children }) { * return ( * * {children} * * ); * } * ``` * * 2. Map the CSS variables in your Tailwind CSS v4 theme (tailwind.css): * * ```css * @theme { * --font-sans: var(--font-geist-sans); * --font-mono: var(--font-geist-mono); * --font-pixel-square: var(--font-geist-pixel-square); * --font-pixel-grid: var(--font-geist-pixel-grid); * --font-pixel-circle: var(--font-geist-pixel-circle); * --font-pixel-triangle: var(--font-geist-pixel-triangle); * --font-pixel-line: var(--font-geist-pixel-line); * } * ``` * * Once configured, the `font-pixel-*` utility classes used by this * component will resolve correctly. * * @example * */ import { cn } from "@/lib/utils" /* ------------------------------------------------------------------ */ /* Pixel-font constants */ /* ------------------------------------------------------------------ */ type PixelFont = "square" | "grid" | "circle" | "triangle" | "line" const PIXEL_FONT_MAP: Record = { square: "font-pixel-square", grid: "font-pixel-grid", circle: "font-pixel-circle", triangle: "font-pixel-triangle", line: "font-pixel-line", } /* ------------------------------------------------------------------ */ /* Text-splitting helper */ /* ------------------------------------------------------------------ */ type Segment = { type: "plain"; text: string } | { type: "pixel"; text: string } /** * Splits `text` into alternating plain / pixel segments based on the * provided `pixelWords`. Longer phrases are matched first so that * "shadcn/ui" wins over a hypothetical "ui" match. */ function splitTextByPixelWords(text: string, pixelWords: string[]): Segment[] { if (pixelWords.length === 0) return [{ type: "plain", text }] // Sort by length descending so longer matches take priority const sorted = [...pixelWords].sort((a, b) => b.length - a.length) // Escape regex-special characters in each word const escaped = sorted.map((w) => w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")) const pattern = new RegExp(`(${escaped.join("|")})`, "g") const segments: Segment[] = [] let lastIndex = 0 for (const match of text.matchAll(pattern)) { const matchStart = match.index ?? 0 if (matchStart > lastIndex) { segments.push({ type: "plain", text: text.slice(lastIndex, matchStart) }) } segments.push({ type: "pixel", text: match[0] }) lastIndex = matchStart + match[0].length } if (lastIndex < text.length) { segments.push({ type: "plain", text: text.slice(lastIndex) }) } return segments } /* ------------------------------------------------------------------ */ /* PixelParagraph */ /* ------------------------------------------------------------------ */ export interface PixelParagraphProps extends React.ComponentProps<"p"> { /** The paragraph text to render. */ text: string /** * Words or phrases within `text` to render in a pixel font. * Matching is case-sensitive and longest-match-first. */ pixelWords?: string[] /** The wrapper element to render. @default "p" */ as?: "p" | "span" | "div" /** The pixel font for highlighted words. @default "square" */ font?: PixelFont /** Extra className applied to each pixel-word span. */ pixelWordClassName?: string } /** * Paragraph that renders specific words / phrases in a pixel font * while the rest stays in the normal typeface. * * @example * */ export function PixelParagraph({ text, pixelWords = [], as: Tag = "p", className, font = "square", pixelWordClassName, ...props }: PixelParagraphProps) { const segments = splitTextByPixelWords(text, pixelWords) const fontClass = PIXEL_FONT_MAP[font] return ( {segments.map((segment, index) => { const key = `${segment.type}-${segment.text}-${index}` return segment.type === "pixel" ? ( {segment.text} ) : ( {segment.text} ) })} ) } 51:["$","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","geist",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/geist","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":"geist"}]]}]}]]}],["$","$L52",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/pixel-paragraph-words.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]