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:T194e,"use client" import * as React from "react" import { RenderSurface, useThemeColors, type SurfaceColor, } from "@/registry/default/render-surface/render-surface" import { cn } from "@/lib/utils" export type AsciiImageProps = React.HTMLAttributes & { src: string alt: string /** Width of one character cell in pixels. Smaller is more detailed. */ cell?: number /** Darkest character first. */ ramp?: string color?: string background?: string contrast?: number } const DEFAULT_RAMP = "@%#*+=-:. " type Scene = { grid: HTMLCanvasElement sampler: HTMLCanvasElement drawn: string | null } function rgb([r, g, b]: SurfaceColor) { return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)})` } /** * Redraws a photograph as characters. The grid is worked out once and kept, * and each frame is a single copy of it, so nothing here recomputes thousands * of letters sixty times a second. */ export function AsciiImage({ src, alt, cell = 8, ramp = DEFAULT_RAMP, color = "--foreground", background = "--background", contrast = 1.2, className, children, ...rootProps }: AsciiImageProps) { const rootRef = React.useRef(null) const picture = React.useRef(null) const [ready, setReady] = React.useState(null) // Loading lives here rather than in setup, because setup runs again for // reasons that have nothing to do with the picture. React.useEffect(() => { const image = new Image() let cancelled = false image.crossOrigin = "anonymous" image.decoding = "async" image.onload = () => { if (cancelled) return picture.current = image setReady(src) } image.src = src return () => { cancelled = true } }, [src]) const tokens = React.useMemo( () => [color, background].filter((entry) => entry.startsWith("--")), [background, color] ) const resolved = useThemeColors(rootRef, tokens) const ink = color.startsWith("--") ? resolved[color] : undefined const paper = background.startsWith("--") ? resolved[background] : undefined const themed = ink !== undefined && paper !== undefined const recipe = `${ready}|${cell}|${ramp}|${contrast}|${ink?.join()}|${paper?.join()}` const setup = React.useCallback( (): Scene => ({ grid: document.createElement("canvas"), sampler: document.createElement("canvas"), drawn: null, }), [] ) const draw = React.useCallback( ({ canvas, context, size, state, }: { canvas: HTMLCanvasElement context: CanvasRenderingContext2D size: { width: number; height: number; dpr: number } state: Scene }) => { if (!ink || !paper) return const { width, height, dpr } = size const wanted = `${recipe}|${Math.round(width)}x${Math.round(height)}|${dpr}` if (state.drawn !== wanted) { const image = picture.current state.grid.width = canvas.width state.grid.height = canvas.height const grid = state.grid.getContext("2d") if (!grid) return grid.setTransform(dpr, 0, 0, dpr, 0, 0) grid.fillStyle = rgb(paper) grid.fillRect(0, 0, width, height) if (image) { const cellWidth = Math.max(cell, 2) const cellHeight = cellWidth * 1.6 const columns = Math.max(1, Math.floor(width / cellWidth)) const rows = Math.max(1, Math.floor(height / cellHeight)) state.sampler.width = columns state.sampler.height = rows const sampling = state.sampler.getContext("2d", { willReadFrequently: true, }) if (!sampling) return // Cover, so the picture keeps its shape in whatever box it was given. const boxAspect = columns / rows const imageAspect = image.naturalWidth / Math.max(image.naturalHeight, 1) const scaled = boxAspect > imageAspect ? { w: columns, h: columns / imageAspect } : { w: rows * imageAspect, h: rows } sampling.drawImage( image, (columns - scaled.w) / 2, (rows - scaled.h) / 2, scaled.w, scaled.h ) const data = sampling.getImageData(0, 0, columns, rows).data // A canvas font string cannot hold a custom property, so the stack // is read off the canvas, which carries the monospace class. const family = getComputedStyle(canvas).fontFamily || "ui-monospace, monospace" grid.fillStyle = rgb(ink) grid.font = `${cellHeight * 0.92}px ${family}` grid.textBaseline = "top" for (let row = 0; row < rows; row += 1) { for (let column = 0; column < columns; column += 1) { const index = (row * columns + column) * 4 const luma = ((data[index] ?? 0) * 0.2126 + (data[index + 1] ?? 0) * 0.7152 + (data[index + 2] ?? 0) * 0.0722) / 255 const adjusted = Math.min( 1, Math.max(0, (luma - 0.5) * contrast + 0.5) ) const character = ramp[ Math.min(ramp.length - 1, Math.floor(adjusted * ramp.length)) ] if (character && character !== " ") { grid.fillText(character, column * cellWidth, row * cellHeight) } } } state.drawn = wanted } } context.setTransform(1, 0, 0, 1, 0, 0) context.clearRect(0, 0, canvas.width, canvas.height) context.drawImage(state.grid, 0, 0) }, [cell, contrast, ink, paper, ramp, recipe] ) return (

{themed && ( setup={setup} draw={draw} rebuildOnResize={false} revision={recipe} label={alt} className="absolute inset-0" canvasClassName="font-mono" /> )} {children !== undefined &&

{children}

}

) } 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":[null,["$","$L4c",null,{"namespace":"@mischief","registryDependencies":["utils","https://ui.tinkererslabs.com/r/render-surface.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/default/ascii-image/ascii-image.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]