ClintchizandClaude Opus 5
7a2b58652a
Bumps all 47 packages, the root manifest and the VS Code extension to 0.8.6, and rebuilds the editor compiler, language server and extension bundles that embed the version. The release carries the output delivery fix: camelCase outputs now reach parent bindings, and 18 components emit through output.* instead of hand-built CustomEvents. See the 0.8.6 migration entry for what changes for consumers. 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.