ClintchizandClaude Opus 5
afa2a8c093
Raises the typescript devDependency across the workspace, bumps package versions, re-adds ignoreDeprecations, and repoints the @wrnexus registry. These were pre-existing working-tree changes, committed as-is rather than authored here. The .npmrc change redirects @wrnexus publishes from registry.npmjs.org to registry.workroot.in — confirm that is intended before publishing from this branch. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@wrnexus/image
Secure responsive-image planning, loader adapters, picture sources, preload hints, placeholders, and performance auditing for WRNexusJS.
Build-time conversion is available through optimizeImage. It normalizes and
bounds width/format variants, prevents variant explosions, writes deterministic
filenames, and returns a manifest with dimensions and byte sizes:
import { optimizeImage } from "@wrnexus/image";
const manifest = await optimizeImage("public/hero.jpg", {
outputDir: "public/generated/images",
widths: [480, 960, 1440],
formats: ["avif", "webp"],
quality: 80,
});
Install the optional sharp peer (bun add sharp) for the default AVIF/WebP
processor. Build systems can instead supply an ImageProcessor adapter, which
also makes transformation pipelines deterministic in tests.
Helper API
import {
createResponsiveImage,
createPicture,
createCdnImageLoader,
createPathImageLoader,
createBlurPlaceholder,
imagePreload,
auditImage,
} from "@wrnexus/image";
const loader = createCdnImageLoader("https://images.example.com/transform");
const picture = createPicture({
src: "/hero.jpg",
alt: "Product dashboard",
width: 1600,
height: 900,
widths: [480, 768, 1200, 1600],
formats: ["avif", "webp"],
sizes: "(max-width: 768px) 100vw, 1200px",
fetchPriority: "high",
loader,
});
Remote loaders require HTTPS. Source URLs are validated, dimensions and quality are bounded, placeholder colors are restricted to safe CSS colors, and preload attributes are escaped.
Components
Enable imagePlugin() and use:
<OptimizedImage /><Picture /><ImageCard />
The package-owned blocks compose @wrnexus/ui where a complete UI block is appropriate while keeping the low-level image element lightweight.