4d: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"] 4e: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/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"],"ItemStyles"] 4f: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/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"],"CodeEditor"] 50: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"] 51:T30b2,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { createGlyphMesh, glyphGrid, normalizeGlyphOptions, type GlyphForm, type GlyphTone } from "@/lib/cojeev/glyph-mesh"; import { sculptureGeometry, type SculptureGeometryInput } from "@/lib/cojeev/sculpture-geometry"; import { rasterizeSculpture, sculptureCharacters, sculptureGrid, sculptureNumber, sculpturePrint, sculpturePrintPath, type GlyphSet, type PrintOptions } from "@/lib/cojeev/sculpture-raster"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; export type { GlyphForm, GlyphTone, GlyphSet, SculptureGeometryInput }; export { loadSculptureFile, sculptureFromGLB, sculptureFromSVG } from "@/lib/cojeev/sculpture-loaders"; export { sculptureFromPixels, sculptureGeometry } from "@/lib/cojeev/sculpture-geometry"; export type SculptureCommonProps = Omit, "children"> & { form?: GlyphForm; tone?: GlyphTone; /** Immutable triangle geometry. Centered and fitted to a unit sphere; invalid geometry exposes an error. */ geometry?: SculptureGeometryInput; speed?: number; turn?: number; pitch?: number; zoom?: number; pointerTracking?: boolean; paused?: boolean; onGeometryError?: (error: Error) => void; }; export type GlyphSculptureProps = SculptureCommonProps & { /** Character-cell height in CSS pixels, bounded to 7–20. */ cellSize?: number; glyphSet?: GlyphSet; /** Trace the silhouette with directional marks in the density set. */ edgeMatching?: boolean; }; type SurfaceOptions = { kind: "glyph" | "dither" | "ink"; cellSize?: number; glyphSet?: GlyphSet; edgeMatching?: boolean; grainSize?: number } & Omit; type Configuration = SurfaceOptions & { run: boolean; visible: boolean; pointer: boolean; speed: number; turn: number; pitch: number; zoom: number }; type Control = { configure: (configuration: Configuration) => void }; /** Shared surface primitive: geometry, print treatment and motion have separate owners. */ export function SculptureSurface({ form = "bloom", tone = "rose", geometry, speed = 1, turn = 0, pitch = 0, zoom = 1, pointerTracking = false, paused = false, onGeometryError, className, surfaceOptions, ...props }: SculptureCommonProps & { surfaceOptions: SurfaceOptions }) { const host = React.useRef(null), canvas = React.useRef(null), control = React.useRef(null); const { enabled, inView } = useMotionVisibility(host); const safeForm: GlyphForm = form === "seed" || form === "pebble" ? form : "bloom"; const safeTone: GlyphTone = ["ink", "rose", "moss", "sky"].includes(tone) ? tone : "rose"; const { speed: pace, cellSize: size, turn: degrees } = normalizeGlyphOptions({ speed, cellSize: surfaceOptions.cellSize, turn }); const tilt = sculptureNumber(pitch, 0, -80, 80), scale = sculptureNumber(zoom, 1, .6, 1.15), moving = enabled && inView && !paused && pace > 0; const { kind, glyphSet = "density", edgeMatching = true, pattern, treatment, grainSize, markSize, density, angle, relief } = surfaceOptions; const meshResult = React.useMemo(() => { try { return { mesh: geometry ? sculptureGeometry(geometry) : sculptureGeometry(createGlyphMesh(safeForm)), error: null }; } catch (error) { return { mesh: null, error: error instanceof Error ? error : new Error("The geometry could not be read.") }; } }, [geometry, safeForm]); const mesh = meshResult.mesh; React.useEffect(() => { if (meshResult.error) onGeometryError?.(meshResult.error); }, [meshResult.error, onGeometryError]); const configuration = React.useRef({ ...surfaceOptions, run: moving, visible: inView, pointer: pointerTracking, speed: pace, cellSize: size, turn: degrees, pitch: tilt, zoom: scale }); const [renderer, setRenderer] = React.useState("pending"); const still = React.useMemo(() => { if (!mesh) return null; const grid = kind === "glyph" ? glyphGrid(432, 324, 10.8) : sculptureGrid(384, 288, 4); const frame = rasterizeSculpture(mesh, grid, .35 + degrees * Math.PI / 180, -.2 + tilt * Math.PI / 180, scale); if (kind === "glyph") { const characters = sculptureCharacters(frame, glyphSet, edgeMatching), lines: string[] = []; for (let i = 0; i < characters.length; i += grid.columns) lines.push(characters.slice(i, i + grid.columns).join("")); return { text: lines.join("\n"), grid }; } return { path: sculpturePrintPath(sculpturePrint(frame, { kind, pattern, treatment, markSize, density, angle, relief }), grid.columns), grid }; }, [mesh, kind, degrees, tilt, scale, glyphSet, edgeMatching, pattern, treatment, markSize, density, angle, relief]); React.useEffect(() => { configuration.current = { kind, glyphSet, edgeMatching, pattern, treatment, grainSize, markSize, density, angle, relief, run: moving, visible: inView, pointer: pointerTracking, speed: pace, cellSize: size, turn: degrees, pitch: tilt, zoom: scale }; control.current?.configure(configuration.current); }, [kind, glyphSet, edgeMatching, pattern, treatment, grainSize, markSize, density, angle, relief, moving, inView, pointerTracking, pace, size, degrees, tilt, scale, safeTone]); React.useEffect(() => { const element = host.current, surface = canvas.current; if (!element || !surface || !mesh) return; let context: CanvasRenderingContext2D | null; try { context = surface.getContext("2d"); } catch { context = null; } if (!context) { setRenderer("fallback"); return; } let options = configuration.current, disposed = false, lost = false, frame = 0, last = 0, elapsed = 0, painted = false; let width = 1, height = 1, ratio = 1, pointerX = 0, pointerY = 0, tiltX = 0, tiltY = 0, ink = "#26282d"; let grid = glyphGrid(width, height, options.cellSize ?? 10); const hover = window.matchMedia("(any-hover: hover) and (any-pointer: fine)"); function cancel() { if (frame) cancelAnimationFrame(frame); frame = 0; last = 0; } function request() { if (!disposed && !lost && !frame && options.visible && !document.hidden) frame = requestAnimationFrame(draw); } function draw(now: number) { frame = 0; if (disposed || lost || !options.visible || document.hidden) return; if (options.run && last && now - last < 32) { request(); return; } if (options.run) { elapsed += (last ? Math.min(now - last, 70) : 0) / 1000 * options.speed; tiltX += (pointerX - tiltX) * .18; tiltY += (pointerY - tiltY) * .18; } last = now; const yaw = .35 + options.turn * Math.PI / 180 + Math.sin(elapsed * .42) * .4 + tiltX, pitch = -.2 + options.pitch * Math.PI / 180 + Math.sin(elapsed * .31) * .12 + tiltY; const result = rasterizeSculpture(mesh!, grid, yaw, pitch, options.zoom); surface!.dataset.sampling = result.sampling > 1 ? "adaptive" : "full"; context!.setTransform(ratio, 0, 0, ratio, 0, 0); context!.clearRect(0, 0, width, height); context!.fillStyle = ink; context!.globalAlpha = 1; if (options.kind === "glyph") { const characters = sculptureCharacters(result, options.glyphSet, options.edgeMatching); context!.font = `600 ${grid.cellHeight * .94}px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`; context!.textAlign = "center"; context!.textBaseline = "middle"; for (let i = 0; i < characters.length; i++) if (characters[i] !== " ") context!.fillText(characters[i], (i % grid.columns + .5) * grid.cellWidth, (Math.floor(i / grid.columns) + .5) * grid.cellHeight); } else { const marks = sculpturePrint(result, { ...options, kind: options.kind }); for (let i = 0; i < marks.length;) { if (!marks[i]) { i++; continue; } const x = i % grid.columns, y = Math.floor(i / grid.columns); let count = 1; while (x + count < grid.columns && marks[i + count]) count++; context!.fillRect(x * grid.cellWidth, y * grid.cellHeight, count * grid.cellWidth + .25, grid.cellHeight + .25); i += count; } } if (!painted) { painted = true; setRenderer("canvas2d"); } if (options.run) request(); } function resize() { const rect = element!.getBoundingClientRect(); width = Math.max(1, rect.width); height = Math.max(1, rect.height); ratio = Math.min(2, window.devicePixelRatio || 1, 2048 / Math.max(width, height), Math.sqrt(1500000 / (width * height))); const backingWidth = Math.max(1, Math.floor(width * ratio)), backingHeight = Math.max(1, Math.floor(height * ratio)); if (surface!.width !== backingWidth || surface!.height !== backingHeight) { surface!.width = backingWidth; surface!.height = backingHeight; } grid = options.kind === "glyph" ? glyphGrid(width, height, options.cellSize ?? 10) : sculptureGrid(width, height, options.kind === "dither" ? sculptureNumber(options.grainSize, 3, 1.5, 9) : 1.5); repaint(); } function repaint() { ink = getComputedStyle(element!).color; request(); } const instance: Control = { configure(next) { options = next; if (!options.pointer || !options.run) { pointerX = 0; pointerY = 0; } cancel(); resize(); } }; control.current = instance; const pointer = (event: PointerEvent) => { if (!options.run || !options.pointer || !hover.matches || event.pointerType === "touch") return; const rect = element.getBoundingClientRect(), x = (event.clientX - rect.left) / rect.width, y = (event.clientY - rect.top) / rect.height, inside = x >= 0 && x <= 1 && y >= 0 && y <= 1; pointerX = inside ? (x * 2 - 1) * .3 : 0; pointerY = inside ? (y * 2 - 1) * .2 : 0; }; const visibility = () => { cancel(); request(); }, onLost = (event: Event) => { event.preventDefault(); lost = true; cancel(); setRenderer("fallback"); }, onRestored = () => { lost = false; painted = false; resize(); }; const resizeObserver = new ResizeObserver(resize); resizeObserver.observe(element); const appearance = new MutationObserver(repaint); for (let ancestor: Element | null = element; ancestor; ancestor = ancestor.parentElement) appearance.observe(ancestor, { attributes: true, attributeFilter: ["class", "style", "data-mode", "data-tone"] }); window.addEventListener("pointermove", pointer, { passive: true }); window.addEventListener("resize", resize); window.addEventListener("cojeev:appearancechange", repaint); document.addEventListener("visibilitychange", visibility); surface.addEventListener("contextlost", onLost); surface.addEventListener("contextrestored", onRestored); resize(); return () => { disposed = true; cancel(); if (control.current === instance) control.current = null; resizeObserver.disconnect(); appearance.disconnect(); window.removeEventListener("pointermove", pointer); window.removeEventListener("resize", resize); window.removeEventListener("cojeev:appearancechange", repaint); document.removeEventListener("visibilitychange", visibility); surface.removeEventListener("contextlost", onLost); surface.removeEventListener("contextrestored", onRestored); context!.clearRect(0, 0, surface.width, surface.height); surface.width = 1; surface.height = 1; }; }, [mesh]); return

{meshResult.error ? {meshResult.error.message} : still && ("text" in still ?

{still.text}

: )}

; } /** A decorative three-dimensional surface drawn with characters and optional contour marks. */ export function GlyphSculpture({ cellSize = 10, glyphSet = "density", edgeMatching = true, ...props }: GlyphSculptureProps) { const set = glyphSet === "digits" || glyphSet === "letters" ? glyphSet : "density"; return ; } 52:T3f13,import { sculptureFromPixels, sculptureGeometry, SCULPTURE_LIMITS, type SculptureGeometry } from "@/lib/cojeev/sculpture-geometry"; type GLB = { asset?: { version?: string }; extensionsRequired?: string[]; images?: { uri?: string }[]; buffers?: { uri?: string; byteLength: number }[]; bufferViews?: { buffer: number; byteOffset?: number; byteLength: number; byteStride?: number; extensions?: unknown }[]; accessors?: { bufferView?: number; byteOffset?: number; componentType: number; count: number; type: string; normalized?: boolean; sparse?: unknown }[]; meshes?: { primitives: { attributes: { POSITION?: number }; indices?: number; mode?: number; targets?: unknown[]; extensions?: unknown }[] }[]; nodes?: { mesh?: number; skin?: number; children?: number[]; matrix?: number[]; translation?: number[]; rotation?: number[]; scale?: number[] }[]; scenes?: { nodes?: number[] }[]; scene?: number; }; const identity = () => [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; const finiteArray = (value: number[] | undefined, fallback: number[], size: number) => { const result = value ?? fallback; if (!Array.isArray(result) || result.length !== size || !result.every(Number.isFinite)) throw new Error("A model transform is invalid."); return result; }; function matrixFor(node: NonNullable[number]) { if (node.matrix) return finiteArray(node.matrix, [], 16); const [tx, ty, tz] = finiteArray(node.translation, [0, 0, 0], 3), [sx, sy, sz] = finiteArray(node.scale, [1, 1, 1], 3); let [x, y, z, w] = finiteArray(node.rotation, [0, 0, 0, 1], 4); const length = Math.hypot(x, y, z, w); if (length < 1e-8) throw new Error("A model rotation has no orientation."); x /= length; y /= length; z /= length; w /= length; return [(1 - 2 * (y * y + z * z)) * sx, 2 * (x * y + z * w) * sx, 2 * (x * z - y * w) * sx, 0, 2 * (x * y - z * w) * sy, (1 - 2 * (x * x + z * z)) * sy, 2 * (y * z + x * w) * sy, 0, 2 * (x * z + y * w) * sz, 2 * (y * z - x * w) * sz, (1 - 2 * (x * x + y * y)) * sz, 0, tx, ty, tz, 1]; } function multiply(a: number[], b: number[]) { const out = new Array(16).fill(0); for (let column = 0; column < 4; column++) for (let row = 0; row < 4; row++) for (let k = 0; k < 4; k++) out[column * 4 + row] += a[k * 4 + row] * b[column * 4 + k]; return out; } const integer = (value: number, max: number) => Number.isInteger(value) && value >= 0 && value <= max; /** Reads geometry only from uncompressed, self-contained GLB 2.0. Never loads textures, URLs, scripts, or decoders. */ export function sculptureFromGLB(buffer: ArrayBuffer): SculptureGeometry { if (buffer.byteLength < 28 || buffer.byteLength > SCULPTURE_LIMITS.fileBytes) throw new Error("Use a self-contained GLB file under 8 MiB."); const view = new DataView(buffer); if (view.getUint32(0, true) !== 0x46546c67 || view.getUint32(4, true) !== 2 || view.getUint32(8, true) !== buffer.byteLength) throw new Error("Use a valid GLB 2.0 file."); let json: GLB | undefined, binary: DataView | undefined; for (let offset = 12; offset < buffer.byteLength;) { if (offset + 8 > buffer.byteLength) throw new Error("The GLB chunk header is incomplete."); const size = view.getUint32(offset, true), kind = view.getUint32(offset + 4, true); offset += 8; if (size % 4 || offset + size > buffer.byteLength) throw new Error("The GLB chunk length is invalid."); if (kind === 0x4e4f534a) { if (json || size > 1024 * 1024) throw new Error("The model metadata is too large or duplicated."); try { json = JSON.parse(new TextDecoder().decode(new Uint8Array(buffer, offset, size))) as GLB; } catch { throw new Error("The model metadata could not be read."); } } else if (kind === 0x004e4942) { if (binary) throw new Error("Use one embedded GLB buffer."); binary = new DataView(buffer, offset, size); } offset += size; } if (!json || json.asset?.version !== "2.0" || !binary) throw new Error("The GLB must contain its own geometry buffer."); if (json.extensionsRequired?.length) throw new Error("Export an uncompressed GLB without required extensions. Draco and mesh compression are not supported."); if (json.buffers?.length !== 1 || json.buffers[0].uri || !integer(json.buffers[0].byteLength, binary.byteLength)) throw new Error("Export a self-contained GLB without external buffers."); if (!Array.isArray(json.meshes) || json.meshes.length > 32 || !Array.isArray(json.nodes) || json.nodes.length > 128 || (json.accessors?.length ?? 0) > 512 || (json.bufferViews?.length ?? 0) > 512) throw new Error("Use a model with at most 32 meshes and 128 nodes."); if (json.images?.some(image => image.uri)) throw new Error("Embed image assets in the GLB or remove them before exporting."); const model = json, bin = binary, nodes = json.nodes; function accessor(index: number | undefined, vector: boolean) { if (index === undefined || !integer(index, 511)) throw new Error("A model accessor is missing."); const a = model.accessors?.[index], b = a?.bufferView === undefined ? undefined : model.bufferViews?.[a.bufferView]; if (!a || !b || b.buffer !== 0 || b.extensions || a.sparse || a.normalized || a.type !== (vector ? "VEC3" : "SCALAR")) throw new Error("Use ordinary, uncompressed vertex and index buffers."); if (vector ? a.componentType !== 5126 : ![5121, 5123, 5125].includes(a.componentType)) throw new Error("Use float positions and unsigned integer triangle indices."); const bytes = a.componentType === 5121 ? 1 : a.componentType === 5123 ? 2 : 4, components = vector ? 3 : 1; const stride = b.byteStride ?? bytes * components, base = (b.byteOffset ?? 0) + (a.byteOffset ?? 0); if (!integer(a.count, vector ? SCULPTURE_LIMITS.vertices : SCULPTURE_LIMITS.triangles * 3) || !a.count || !integer(stride, 252) || stride < bytes * components || stride % bytes || !integer(base, bin.byteLength) || !integer(b.byteLength, bin.byteLength) || !integer(b.byteOffset ?? 0, bin.byteLength) || (b.byteOffset ?? 0) + b.byteLength > bin.byteLength || (a.byteOffset ?? 0) + (a.count - 1) * stride + bytes * components > b.byteLength) throw new Error("A model buffer is invalid or exceeds the geometry budget."); const values = new Array(a.count * components); for (let i = 0; i < a.count; i++) for (let k = 0; k < components; k++) { const at = base + i * stride + k * bytes; values[i * components + k] = vector ? bin.getFloat32(at, true) : bytes === 1 ? bin.getUint8(at) : bytes === 2 ? bin.getUint16(at, true) : bin.getUint32(at, true); } return values; } const positions: number[] = [], triangles: number[] = [], visiting = new Set(); let visits = 0; function visit(index: number, parent: number[]) { if (!integer(index, 127) || !model.nodes?.[index] || visiting.has(index) || ++visits > 128) throw new Error("The model hierarchy is cyclic or too large."); visiting.add(index); const node = model.nodes[index]; if (node.skin !== undefined) throw new Error("Export a static mesh without skinning."); const matrix = multiply(parent, matrixFor(node)); if (node.mesh !== undefined) { const mesh = model.meshes?.[node.mesh]; if (!mesh || !Array.isArray(mesh.primitives) || mesh.primitives.length > 64) throw new Error("A model mesh is missing or too complex."); for (const primitive of mesh.primitives) { if ((primitive.mode ?? 4) !== 4 || primitive.targets?.length || primitive.extensions) throw new Error("Export static triangle geometry without compression or morph targets."); const source = accessor(primitive.attributes?.POSITION, true), count = source.length / 3, offset = positions.length / 3; const indices = primitive.indices === undefined ? Array.from({ length: count }, (_, i) => i) : accessor(primitive.indices, false); if (positions.length + source.length > SCULPTURE_LIMITS.vertices * 3 || triangles.length + indices.length > SCULPTURE_LIMITS.triangles * 3) throw new Error("Reduce the model to 16,000 vertices and 20,000 triangles."); if (indices.length % 3 || indices.some(value => !integer(value, count - 1))) throw new Error("A model triangle refers to a missing vertex."); for (let i = 0; i < source.length; i += 3) { const x = source[i], y = source[i + 1], z = source[i + 2]; positions.push(matrix[0] * x + matrix[4] * y + matrix[8] * z + matrix[12], matrix[1] * x + matrix[5] * y + matrix[9] * z + matrix[13], matrix[2] * x + matrix[6] * y + matrix[10] * z + matrix[14]); } for (const index of indices) triangles.push(index + offset); } } for (const child of node.children ?? []) visit(child, matrix); visiting.delete(index); } const scene = model.scenes?.[model.scene ?? 0]; const children = new Set(nodes.flatMap(node => node.children ?? [])); const roots = scene?.nodes ?? nodes.map((_, index) => index).filter(index => !children.has(index)); for (const root of roots) visit(root, identity()); return sculptureGeometry({ positions, triangles }); } /** Filled SVG shapes are extruded into original geometry; active/external SVG features are rejected. */ export async function sculptureFromSVG(source: string, depth = .14, { signal }: { signal?: AbortSignal } = {}): Promise { checkAbort(signal); if (source.length > SCULPTURE_LIMITS.svgBytes || / 64 || (source.match(/[a-zA-Z]/g)?.length ?? 0) > 6000) throw new Error("Simplify the SVG to at most 64 elements and 6,000 path commands."); for (const element of elements) { if (!allowed.has(element.localName)) throw new Error("Use filled SVG shapes only. Text, images, masks, scripts and references are not supported."); for (const attribute of [...element.attributes]) if (/^on|href|src/i.test(attribute.name) || /url\s*\(|@import|javascript:/i.test(attribute.value)) throw new Error("Remove external references and active content from the SVG."); } const [{ SVGLoader }, { ExtrudeGeometry }] = await Promise.all([import("three/addons/loaders/SVGLoader.js"), import("three")]); checkAbort(signal); const paths = new SVGLoader().parse(new XMLSerializer().serializeToString(document)); const shapes = paths.paths.filter(path => (path.userData?.style as { fill?: string } | undefined)?.fill !== "none").flatMap(path => SVGLoader.createShapes(path)); if (!shapes.length || shapes.length > 64) throw new Error("Use an SVG with 1–64 closed, filled shapes."); const sampled = shapes.map(shape => shape.extractPoints(6)); const contourCount = sampled.reduce((sum, contour) => sum + contour.shape.length + contour.holes.reduce((total, hole) => total + hole.length, 0), 0); const holeCount = sampled.reduce((sum, contour) => sum + contour.holes.length, 0); // Both caps and sidewalls use at most twelve vertices per contour point; holes // can add two triangles to each cap, so budget them before triangulation too. if ((contourCount + holeCount) * 12 > SCULPTURE_LIMITS.vertices) throw new Error("Simplify the SVG to roughly 1,300 sampled contour points before importing."); const bounds = sampled.flatMap(contour => contour.shape); let left = Infinity, right = -Infinity, top = Infinity, bottom = -Infinity; for (const point of bounds) { left = Math.min(left, point.x); right = Math.max(right, point.x); top = Math.min(top, point.y); bottom = Math.max(bottom, point.y); } const longest = Math.max(right - left, bottom - top), thickness = Number.isFinite(depth) ? Math.max(.01, Math.min(.5, depth)) : .14; checkAbort(signal); const geometry = new ExtrudeGeometry(shapes, { depth: longest * thickness, bevelEnabled: false, steps: 1, curveSegments: 6 }); try { geometry.scale(1, -1, 1); return sculptureGeometry({ positions: geometry.getAttribute("position").array, triangles: geometry.index?.array }); } finally { geometry.dispose(); } } function imageDimensions(bytes: Uint8Array) { const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength); if (bytes.length >= 24 && view.getUint32(0) === 0x89504e47 && view.getUint32(4) === 0x0d0a1a0a) return { width: view.getUint32(16), height: view.getUint32(20), type: "image/png" }; if (bytes[0] === 255 && bytes[1] === 216) { for (let i = 2; i + 9 < bytes.length;) { if (bytes[i] !== 255) break; const marker = bytes[i + 1]; i += 2; if (marker === 255) { i--; continue; } if (marker === 217 || marker === 218) break; const size = view.getUint16(i); if (size < 2 || i + size > bytes.length) break; if ([192, 193, 194].includes(marker)) return { height: view.getUint16(i + 3), width: view.getUint16(i + 5), type: "image/jpeg" }; i += size; } } return null; } const checkAbort = (signal?: AbortSignal) => { if (signal?.aborted) throw new DOMException("Import cancelled.", "AbortError"); }; /** Local files only: self-contained GLB, filled SVG, PNG or JPEG. PNG/JPEG become luminance reliefs. */ export async function loadSculptureFile(file: Blob, { signal }: { signal?: AbortSignal } = {}): Promise { if (!file.size || file.size > SCULPTURE_LIMITS.fileBytes) throw new Error("Choose a GLB, SVG, PNG or JPEG under 8 MiB."); checkAbort(signal); const buffer = await file.arrayBuffer(), bytes = new Uint8Array(buffer); checkAbort(signal); if (bytes.length >= 4 && new DataView(buffer).getUint32(0, true) === 0x46546c67) return sculptureFromGLB(buffer); const head = new TextDecoder().decode(bytes.subarray(0, 1024)).trimStart(); if (head.startsWith(" SCULPTURE_LIMITS.imagePixels) throw new Error("Resize the image to 4 million pixels or fewer before importing."); if (typeof createImageBitmap !== "function") throw new Error("This browser cannot import images. Use a GLB or SVG instead."); let bitmap: ImageBitmap | undefined, canvas: HTMLCanvasElement | undefined; try { bitmap = await createImageBitmap(new Blob([buffer], { type: image.type })); checkAbort(signal); canvas = document.createElement("canvas"); canvas.width = Math.min(144, bitmap.width); canvas.height = Math.min(144, bitmap.height); const context = canvas.getContext("2d", { willReadFrequently: true }); if (!context) throw new Error("Image import is unavailable. Use a GLB or SVG instead."); context.drawImage(bitmap, 0, 0, canvas.width, canvas.height); const pixels = context.getImageData(0, 0, canvas.width, canvas.height); // Keep the original aspect ratio even though sampling uses a bounded square grid. const mesh = sculptureFromPixels(pixels), aspect = (bitmap.width / bitmap.height) / (canvas.width / canvas.height); for (let i = 0; i < mesh.positions.length; i += 3) { mesh.positions[i] *= Math.min(1, aspect); mesh.positions[i + 1] /= Math.max(1, aspect); } canvas.width = 1; canvas.height = 1; return sculptureGeometry({ positions: mesh.positions, triangles: mesh.triangles }); } catch (error) { if (error instanceof Error) throw error; throw new Error("The image could not be decoded. Try another PNG or JPEG."); } finally { bitmap?.close(); if (canvas) { canvas.width = 1; canvas.height = 1; } } } 53:T692,@layer cojeev-states { .v-sculpture-surface{position:relative;width:100%;min-width:0;height:clamp(240px,45vw,420px);overflow:hidden;container-type:inline-size;pointer-events:none;user-select:none;color:var(--v-text);contain:layout paint} .v-sculpture-surface[data-tone="rose"]{color:color-mix(in srgb,var(--v-text) 68%,var(--v-pink) 32%)} .v-sculpture-surface[data-tone="moss"]{color:color-mix(in srgb,var(--v-text) 68%,var(--v-olive) 32%)} .v-sculpture-surface[data-tone="sky"]{color:color-mix(in srgb,var(--v-text) 68%,var(--v-blue) 32%)} .v-sculpture-surface>[data-slot="glyph-sculpture-canvas"]{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;pointer-events:none} .v-sculpture-surface>[data-slot="glyph-sculpture-still"]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:0;border:0;background:none;color:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:min(2.25cqw,12px);line-height:1.075;font-weight:600;letter-spacing:0;white-space:pre;pointer-events:none} .v-sculpture-surface>[data-slot="sculpture-print-still"]{position:absolute;inset:0;width:100%;height:100%} .v-sculpture-surface[data-renderer="canvas2d"]>[data-slot="glyph-sculpture-canvas"]{opacity:1} .v-sculpture-surface[data-renderer="canvas2d"]>:is([data-slot="glyph-sculpture-still"],[data-slot="sculpture-print-still"]){visibility:hidden} .v-sculpture-surface>[data-slot="sculpture-error"]{position:absolute;inset:24px;display:grid;place-content:center;color:var(--v-text);font:var(--fs-body,15px)/1.5 var(--font-body,system-ui);text-align:center} @media (forced-colors:active){.v-sculpture-surface{color:CanvasText}} } 4c:["$","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","three@0.185.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","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":"three@0.185.1"}]]}]}]]}],["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json"]}]]}],["$","$L4e",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":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/glyph-sculpture.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/glyph-sculpture.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/lib/sculpture-loaders.tsx","content":"$52","type":"registry:lib","target":"lib/cojeev/sculpture-loaders.tsx"},{"path":"registry/cojeev/styles/glyph-sculpture.css","content":"$53","type":"registry:file","target":"styles/cojeev/glyph-sculpture.css"}],"className":"h-[70svh] min-h-80"}]]}]