@jant/core 0.2.4 → 0.2.5

package/dist/client.d.ts

@@ -3,8 +3,10 @@
  *
  * Bundles all interactive components:
  * - Datastar (reactivity)
- * - BaseCoat (dialogs, dropdowns, etc.)
+ * - BaseCoat (dialogs, dropdowns)
+ * - ImageProcessor (media uploads)
  */
 import "@sudodevnull/datastar";
 import "basecoat-css/all";
+import "./lib/image-processor.js";
 //# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,uBAAuB,CAAC;AAG/B,OAAO,kBAAkB,CAAC"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC"}

package/dist/client.js

@@ -3,8 +3,8 @@
  *
  * Bundles all interactive components:
  * - Datastar (reactivity)
- * - BaseCoat (dialogs, dropdowns, etc.)
- */ // Datastar for reactivity (data-* attributes)
-import "@sudodevnull/datastar";
-// BaseCoat interactive components
+ * - BaseCoat (dialogs, dropdowns)
+ * - ImageProcessor (media uploads)
+ */ import "@sudodevnull/datastar";
 import "basecoat-css/all";
+import "./lib/image-processor.js";

package/dist/lib/image-processor.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Client-side Image Processor
+ *
+ * Processes images before upload:
+ * - Corrects EXIF orientation
+ * - Resizes to max dimensions
+ * - Strips all metadata (privacy)
+ * - Converts to WebP format
+ */
+declare const DEFAULT_OPTIONS: {
+    maxWidth: number;
+    maxHeight: number;
+    quality: number;
+    mimeType: "image/webp";
+};
+type ProcessOptions = Partial<typeof DEFAULT_OPTIONS>;
+/**
+ * Process image file
+ */
+declare function process(file: File, options?: ProcessOptions): Promise<Blob>;
+/**
+ * Process file and create a new File object
+ */
+declare function processToFile(file: File, options?: ProcessOptions): Promise<File>;
+export declare const ImageProcessor: {
+    process: typeof process;
+    processToFile: typeof processToFile;
+};
+export {};
+//# sourceMappingURL=image-processor.d.ts.map

package/dist/lib/image-processor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-processor.d.ts","sourceRoot":"","sources":["../../src/lib/image-processor.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,QAAA,MAAM,eAAe;;;;;CAKpB,CAAC;AAEF,KAAK,cAAc,GAAG,OAAO,CAAC,OAAO,eAAe,CAAC,CAAC;AAiHtD;;GAEG;AACH,iBAAe,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE,cAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAgE9E;AAED;;GAEG;AACH,iBAAe,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE,cAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAQpF;AAED,eAAO,MAAM,cAAc;;;CAA6B,CAAC"}

package/dist/lib/image-processor.js

@@ -0,0 +1,191 @@
+/**
+ * Client-side Image Processor
+ *
+ * Processes images before upload:
+ * - Corrects EXIF orientation
+ * - Resizes to max dimensions
+ * - Strips all metadata (privacy)
+ * - Converts to WebP format
+ */ const DEFAULT_OPTIONS = {
+    maxWidth: 1920,
+    maxHeight: 1920,
+    quality: 0.85,
+    mimeType: "image/webp"
+};
+/**
+ * EXIF Orientation values and their transformations
+ */ const ORIENTATIONS = {
+    1: {
+        rotate: 0,
+        flip: false
+    },
+    2: {
+        rotate: 0,
+        flip: true
+    },
+    3: {
+        rotate: 180,
+        flip: false
+    },
+    4: {
+        rotate: 180,
+        flip: true
+    },
+    5: {
+        rotate: 90,
+        flip: true
+    },
+    6: {
+        rotate: 90,
+        flip: false
+    },
+    7: {
+        rotate: 270,
+        flip: true
+    },
+    8: {
+        rotate: 270,
+        flip: false
+    }
+};
+/**
+ * Read EXIF orientation from JPEG file
+ */ function readExifOrientation(buffer) {
+    const view = new DataView(buffer);
+    // Check for JPEG SOI marker
+    if (view.getUint16(0) !== 0xffd8) return 1;
+    let offset = 2;
+    const length = view.byteLength;
+    while(offset < length){
+        if (view.getUint8(offset) !== 0xff) return 1;
+        const marker = view.getUint8(offset + 1);
+        // APP1 marker (EXIF)
+        if (marker === 0xe1) {
+            const exifOffset = offset + 4;
+            // Check for "Exif\0\0"
+            if (view.getUint32(exifOffset) !== 0x45786966 || view.getUint16(exifOffset + 4) !== 0x0000) {
+                return 1;
+            }
+            const tiffOffset = exifOffset + 6;
+            const littleEndian = view.getUint16(tiffOffset) === 0x4949;
+            // Validate TIFF header
+            if (view.getUint16(tiffOffset + 2, littleEndian) !== 0x002a) return 1;
+            const ifdOffset = view.getUint32(tiffOffset + 4, littleEndian);
+            const numEntries = view.getUint16(tiffOffset + ifdOffset, littleEndian);
+            // Search for orientation tag (0x0112)
+            for(let i = 0; i < numEntries; i++){
+                const entryOffset = tiffOffset + ifdOffset + 2 + i * 12;
+                const tag = view.getUint16(entryOffset, littleEndian);
+                if (tag === 0x0112) {
+                    return view.getUint16(entryOffset + 8, littleEndian);
+                }
+            }
+            return 1;
+        }
+        // Skip to next marker
+        if (marker === 0xd8 || marker === 0xd9) {
+            offset += 2;
+        } else {
+            offset += 2 + view.getUint16(offset + 2);
+        }
+    }
+    return 1;
+}
+/**
+ * Load image from file
+ */ function loadImage(file) {
+    return new Promise((resolve, reject)=>{
+        const img = new Image();
+        img.onload = ()=>{
+            URL.revokeObjectURL(img.src);
+            resolve(img);
+        };
+        img.onerror = ()=>reject(new Error("Failed to load image"));
+        img.src = URL.createObjectURL(file);
+    });
+}
+/**
+ * Calculate output dimensions maintaining aspect ratio
+ */ function calculateDimensions(width, height, maxWidth, maxHeight) {
+    if (width <= maxWidth && height <= maxHeight) {
+        return {
+            width,
+            height
+        };
+    }
+    const ratio = Math.min(maxWidth / width, maxHeight / height);
+    return {
+        width: Math.round(width * ratio),
+        height: Math.round(height * ratio)
+    };
+}
+/**
+ * Process image file
+ */ async function process(file, options = {}) {
+    const opts = {
+        ...DEFAULT_OPTIONS,
+        ...options
+    };
+    // Read file buffer for EXIF
+    const buffer = await file.arrayBuffer();
+    const orientation = readExifOrientation(buffer);
+    const transform = ORIENTATIONS[orientation] || ORIENTATIONS[1];
+    // Load image
+    const img = await loadImage(file);
+    // For 90° or 270° rotation, swap dimensions
+    const isRotated = transform.rotate === 90 || transform.rotate === 270;
+    const srcWidth = isRotated ? img.height : img.width;
+    const srcHeight = isRotated ? img.width : img.height;
+    // Calculate output size
+    const { width, height } = calculateDimensions(srcWidth, srcHeight, opts.maxWidth, opts.maxHeight);
+    // Create canvas
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Failed to get canvas context");
+    // Apply transformations
+    ctx.save();
+    ctx.translate(width / 2, height / 2);
+    if (transform.rotate) {
+        ctx.rotate(transform.rotate * Math.PI / 180);
+    }
+    if (transform.flip) {
+        ctx.scale(-1, 1);
+    }
+    const drawWidth = isRotated ? height : width;
+    const drawHeight = isRotated ? width : height;
+    ctx.drawImage(img, -drawWidth / 2, -drawHeight / 2, drawWidth, drawHeight);
+    ctx.restore();
+    // Export as WebP
+    return new Promise((resolve, reject)=>{
+        canvas.toBlob((blob)=>{
+            if (blob) {
+                resolve(blob);
+            } else {
+                reject(new Error("Failed to create blob"));
+            }
+        }, opts.mimeType, opts.quality);
+    });
+}
+/**
+ * Process file and create a new File object
+ */ async function processToFile(file, options = {}) {
+    const blob = await process(file, options);
+    // Generate new filename with .webp extension
+    const originalName = file.name.replace(/\.[^.]+$/, "");
+    const newName = `${originalName}.webp`;
+    return new File([
+        blob
+    ], newName, {
+        type: "image/webp"
+    });
+}
+export const ImageProcessor = {
+    process,
+    processToFile
+};
+// Expose globally for inline scripts
+if (typeof window !== "undefined") {
+    window.ImageProcessor = ImageProcessor;
+}

package/dist/routes/dash/media.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../src/routes/dash/media.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,OAAO,KAAK,EAAE,QAAQ,EAAS,MAAM,gBAAgB,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAOjD,KAAK,GAAG,GAAG;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,YAAY,CAAA;CAAE,CAAC;AAE3D,eAAO,MAAM,WAAW,kDAAkB,CAAC"}
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../src/routes/dash/media.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,OAAO,KAAK,EAAE,QAAQ,EAAS,MAAM,gBAAgB,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAMjD,KAAK,GAAG,GAAG;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,YAAY,CAAA;CAAE,CAAC;AAE3D,eAAO,MAAM,WAAW,kDAAkB,CAAC"}

package/dist/routes/dash/media.js

@@ -10,7 +10,6 @@ import { DashLayout } from "../../theme/layouts/index.js";
 import { EmptyState, DangerZone } from "../../theme/components/index.js";
 import * as time from "../../lib/time.js";
 import { getMediaUrl, getImageUrl } from "../../lib/image.js";
-import { getAssets } from "../../lib/assets.js";
 export const mediaRoutes = new Hono();
 /**
  * Format file size for display
@@ -73,7 +72,7 @@ export const mediaRoutes = new Hono();
  *
  * Uses plain JavaScript for upload state management (more reliable than Datastar signals
  * for complex async flows like file uploads with SSE responses).
- */ function MediaListContent({ mediaList, r2PublicUrl, imageTransformUrl, imageProcessorUrl }) {
+ */ function MediaListContent({ mediaList, r2PublicUrl, imageTransformUrl }) {
     const { t } = useLingui();
     const processingText = t({
         message: "Processing...",
@@ -245,9 +244,6 @@ function processSSEEvent(event) {
 `.trim();
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            /*#__PURE__*/ _jsx("script", {
-                src: imageProcessorUrl
-            }),
             /*#__PURE__*/ _jsx("script", {
                 dangerouslySetInnerHTML: {
                     __html: uploadScript
@@ -535,7 +531,6 @@ mediaRoutes.get("/", async (c)=>{
     const siteName = await c.var.services.settings.get("SITE_NAME") ?? "Jant";
     const r2PublicUrl = c.env.R2_PUBLIC_URL;
     const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
-    const assets = getAssets();
     return c.html(/*#__PURE__*/ _jsx(DashLayout, {
         c: c,
         title: "Media",
@@ -544,8 +539,7 @@ mediaRoutes.get("/", async (c)=>{
         children: /*#__PURE__*/ _jsx(MediaListContent, {
             mediaList: mediaList,
             r2PublicUrl: r2PublicUrl,
-            imageTransformUrl: imageTransformUrl,
-            imageProcessorUrl: assets.imageProcessor
+            imageTransformUrl: imageTransformUrl
         })
     }));
 });

package/dist/theme/layouts/BaseLayout.d.ts

@@ -3,6 +3,8 @@
  *
  * Provides the HTML shell with meta tags, styles, and scripts.
  * If Context is provided, automatically wraps children with I18nProvider.
+ *
+ * Uses vite-ssr-components for automatic dev/prod asset path resolution.
  */
 import type { FC, PropsWithChildren } from "hono/jsx";
 import type { Context } from "hono";

package/dist/theme/layouts/BaseLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseLayout.d.ts","sourceRoot":"","sources":["../../../src/theme/layouts/BaseLayout.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAIpC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,OAAO,CAAC;CACb;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,iBAAiB,CAAC,eAAe,CAAC,CA8B7D,CAAC"}
+{"version":3,"file":"BaseLayout.d.ts","sourceRoot":"","sources":["../../../src/theme/layouts/BaseLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAIpC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,OAAO,CAAC;CACb;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,iBAAiB,CAAC,eAAe,CAAC,CA0B7D,CAAC"}

package/dist/theme/layouts/BaseLayout.js

@@ -3,12 +3,12 @@
  *
  * Provides the HTML shell with meta tags, styles, and scripts.
  * If Context is provided, automatically wraps children with I18nProvider.
+ *
+ * Uses vite-ssr-components for automatic dev/prod asset path resolution.
  */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
-import { getAssets } from "../../lib/assets.js";
+import { Script, Link, ViteClient } from "vite-ssr-components/hono";
 import { I18nProvider } from "../../i18n/index.js";
 export const BaseLayout = ({ title, description, lang = "en", c, children })=>{
-    // Get assets at render time (supports runtime manifest loading)
-    const assets = getAssets();
     // Automatically wrap with I18nProvider if Context is provided
     const content = c ? /*#__PURE__*/ _jsx(I18nProvider, {
         c: c,
@@ -33,14 +33,13 @@ export const BaseLayout = ({ title, description, lang = "en", c, children })=>{
                         name: "description",
                         content: description
                     }),
-                    assets.styles && /*#__PURE__*/ _jsx("link", {
-                        rel: "stylesheet",
-                        href: assets.styles
+                    /*#__PURE__*/ _jsx(ViteClient, {}),
+                    /*#__PURE__*/ _jsx(Link, {
+                        href: "/src/style.css",
+                        rel: "stylesheet"
                     }),
-                    /*#__PURE__*/ _jsx("script", {
-                        type: "module",
-                        src: assets.client,
-                        defer: true
+                    /*#__PURE__*/ _jsx(Script, {
+                        src: "/src/client.ts"
                     })
                 ]
             }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jant/core",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "A modern, open-source microblogging platform built on Cloudflare Workers",
   "type": "module",
   "bin": {
@@ -22,7 +22,6 @@
   "files": [
     "bin",
     "dist",
-    "static",
     "migrations",
     "src"
   ],
@@ -72,6 +71,7 @@
     "typescript": "^5.9.3",
     "unplugin-swc": "^1.5.9",
     "vite": "^7.3.1",
+    "vite-ssr-components": "^0.5.2",
     "wrangler": "^4.61.1"
   },
   "repository": {
@@ -105,7 +105,7 @@
     "build:types": "tsc -p tsconfig.build.json",
     "deploy": "pnpm build && wrangler deploy",
     "preview": "vite preview",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc -p tsconfig.client.json",
     "lint": "eslint src/",
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",

package/src/client.ts

@@ -3,11 +3,10 @@
  *
  * Bundles all interactive components:
  * - Datastar (reactivity)
- * - BaseCoat (dialogs, dropdowns, etc.)
+ * - BaseCoat (dialogs, dropdowns)
+ * - ImageProcessor (media uploads)
  */
 
-// Datastar for reactivity (data-* attributes)
 import "@sudodevnull/datastar";
-
-// BaseCoat interactive components
 import "basecoat-css/all";
+import "./lib/image-processor.js";

package/src/lib/image-processor.ts

@@ -0,0 +1,218 @@
+/**
+ * Client-side Image Processor
+ *
+ * Processes images before upload:
+ * - Corrects EXIF orientation
+ * - Resizes to max dimensions
+ * - Strips all metadata (privacy)
+ * - Converts to WebP format
+ */
+
+const DEFAULT_OPTIONS = {
+  maxWidth: 1920,
+  maxHeight: 1920,
+  quality: 0.85,
+  mimeType: "image/webp" as const,
+};
+
+type ProcessOptions = Partial<typeof DEFAULT_OPTIONS>;
+
+/**
+ * EXIF Orientation values and their transformations
+ */
+const ORIENTATIONS: Record<number, { rotate: number; flip: boolean }> = {
+  1: { rotate: 0, flip: false }, // Normal
+  2: { rotate: 0, flip: true }, // Flipped horizontally
+  3: { rotate: 180, flip: false }, // Rotated 180°
+  4: { rotate: 180, flip: true }, // Flipped vertically
+  5: { rotate: 90, flip: true }, // Rotated 90° CCW + flipped
+  6: { rotate: 90, flip: false }, // Rotated 90° CW
+  7: { rotate: 270, flip: true }, // Rotated 90° CW + flipped
+  8: { rotate: 270, flip: false }, // Rotated 90° CCW
+};
+
+/**
+ * Read EXIF orientation from JPEG file
+ */
+function readExifOrientation(buffer: ArrayBuffer): number {
+  const view = new DataView(buffer);
+
+  // Check for JPEG SOI marker
+  if (view.getUint16(0) !== 0xffd8) return 1;
+
+  let offset = 2;
+  const length = view.byteLength;
+
+  while (offset < length) {
+    if (view.getUint8(offset) !== 0xff) return 1;
+
+    const marker = view.getUint8(offset + 1);
+
+    // APP1 marker (EXIF)
+    if (marker === 0xe1) {
+      const exifOffset = offset + 4;
+
+      // Check for "Exif\0\0"
+      if (
+        view.getUint32(exifOffset) !== 0x45786966 ||
+        view.getUint16(exifOffset + 4) !== 0x0000
+      ) {
+        return 1;
+      }
+
+      const tiffOffset = exifOffset + 6;
+      const littleEndian = view.getUint16(tiffOffset) === 0x4949;
+
+      // Validate TIFF header
+      if (view.getUint16(tiffOffset + 2, littleEndian) !== 0x002a) return 1;
+
+      const ifdOffset = view.getUint32(tiffOffset + 4, littleEndian);
+      const numEntries = view.getUint16(tiffOffset + ifdOffset, littleEndian);
+
+      // Search for orientation tag (0x0112)
+      for (let i = 0; i < numEntries; i++) {
+        const entryOffset = tiffOffset + ifdOffset + 2 + i * 12;
+        const tag = view.getUint16(entryOffset, littleEndian);
+
+        if (tag === 0x0112) {
+          return view.getUint16(entryOffset + 8, littleEndian);
+        }
+      }
+
+      return 1;
+    }
+
+    // Skip to next marker
+    if (marker === 0xd8 || marker === 0xd9) {
+      offset += 2;
+    } else {
+      offset += 2 + view.getUint16(offset + 2);
+    }
+  }
+
+  return 1;
+}
+
+/**
+ * Load image from file
+ */
+function loadImage(file: File): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(img.src);
+      resolve(img);
+    };
+    img.onerror = () => reject(new Error("Failed to load image"));
+    img.src = URL.createObjectURL(file);
+  });
+}
+
+/**
+ * Calculate output dimensions maintaining aspect ratio
+ */
+function calculateDimensions(
+  width: number,
+  height: number,
+  maxWidth: number,
+  maxHeight: number
+): { width: number; height: number } {
+  if (width <= maxWidth && height <= maxHeight) {
+    return { width, height };
+  }
+
+  const ratio = Math.min(maxWidth / width, maxHeight / height);
+  return {
+    width: Math.round(width * ratio),
+    height: Math.round(height * ratio),
+  };
+}
+
+/**
+ * Process image file
+ */
+async function process(file: File, options: ProcessOptions = {}): Promise<Blob> {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+
+  // Read file buffer for EXIF
+  const buffer = await file.arrayBuffer();
+  const orientation = readExifOrientation(buffer);
+  const transform = ORIENTATIONS[orientation] || ORIENTATIONS[1];
+
+  // Load image
+  const img = await loadImage(file);
+
+  // For 90° or 270° rotation, swap dimensions
+  const isRotated = transform.rotate === 90 || transform.rotate === 270;
+  const srcWidth = isRotated ? img.height : img.width;
+  const srcHeight = isRotated ? img.width : img.height;
+
+  // Calculate output size
+  const { width, height } = calculateDimensions(
+    srcWidth,
+    srcHeight,
+    opts.maxWidth,
+    opts.maxHeight
+  );
+
+  // Create canvas
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Failed to get canvas context");
+
+  // Apply transformations
+  ctx.save();
+  ctx.translate(width / 2, height / 2);
+
+  if (transform.rotate) {
+    ctx.rotate((transform.rotate * Math.PI) / 180);
+  }
+
+  if (transform.flip) {
+    ctx.scale(-1, 1);
+  }
+
+  const drawWidth = isRotated ? height : width;
+  const drawHeight = isRotated ? width : height;
+  ctx.drawImage(img, -drawWidth / 2, -drawHeight / 2, drawWidth, drawHeight);
+
+  ctx.restore();
+
+  // Export as WebP
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error("Failed to create blob"));
+        }
+      },
+      opts.mimeType,
+      opts.quality
+    );
+  });
+}
+
+/**
+ * Process file and create a new File object
+ */
+async function processToFile(file: File, options: ProcessOptions = {}): Promise<File> {
+  const blob = await process(file, options);
+
+  // Generate new filename with .webp extension
+  const originalName = file.name.replace(/\.[^.]+$/, "");
+  const newName = `${originalName}.webp`;
+
+  return new File([blob], newName, { type: "image/webp" });
+}
+
+export const ImageProcessor = { process, processToFile };
+
+// Expose globally for inline scripts
+if (typeof window !== "undefined") {
+  (window as unknown as { ImageProcessor: typeof ImageProcessor }).ImageProcessor = ImageProcessor;
+}

package/src/routes/dash/media.tsx

@@ -13,7 +13,6 @@ import { DashLayout } from "../../theme/layouts/index.js";
 import { EmptyState, DangerZone } from "../../theme/components/index.js";
 import * as time from "../../lib/time.js";
 import { getMediaUrl, getImageUrl } from "../../lib/image.js";
-import { getAssets } from "../../lib/assets.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -96,12 +95,10 @@ function MediaListContent({
   mediaList,
   r2PublicUrl,
   imageTransformUrl,
-  imageProcessorUrl,
 }: {
   mediaList: Media[];
   r2PublicUrl?: string;
   imageTransformUrl?: string;
-  imageProcessorUrl: string;
 }) {
   const { t } = useLingui();
 
@@ -265,8 +262,7 @@ function processSSEEvent(event) {
 
   return (
     <>
-      {/* Scripts - script tags need closing tag, self-closing doesn't work in HTML */}
-      <script src={imageProcessorUrl}></script>
+      {/* Upload script */}
       <script dangerouslySetInnerHTML={{ __html: uploadScript }}></script>
 
       {/* Header */}
@@ -493,7 +489,6 @@ mediaRoutes.get("/", async (c) => {
   const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
   const r2PublicUrl = c.env.R2_PUBLIC_URL;
   const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
-  const assets = getAssets();
 
   return c.html(
     <DashLayout c={c} title="Media" siteName={siteName} currentPath="/dash/media">
@@ -501,7 +496,6 @@ mediaRoutes.get("/", async (c) => {
         mediaList={mediaList}
         r2PublicUrl={r2PublicUrl}
         imageTransformUrl={imageTransformUrl}
-        imageProcessorUrl={assets.imageProcessor}
       />
     </DashLayout>
   );

package/src/theme/layouts/BaseLayout.tsx

@@ -3,11 +3,13 @@
  *
  * Provides the HTML shell with meta tags, styles, and scripts.
  * If Context is provided, automatically wraps children with I18nProvider.
+ *
+ * Uses vite-ssr-components for automatic dev/prod asset path resolution.
  */
 
 import type { FC, PropsWithChildren } from "hono/jsx";
 import type { Context } from "hono";
-import { getAssets } from "../../lib/assets.js";
+import { Script, Link, ViteClient } from "vite-ssr-components/hono";
 import { I18nProvider } from "../../i18n/index.js";
 
 export interface BaseLayoutProps {
@@ -24,9 +26,6 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
   c,
   children,
 }) => {
-  // Get assets at render time (supports runtime manifest loading)
-  const assets = getAssets();
-
   // Automatically wrap with I18nProvider if Context is provided
   const content = c ? <I18nProvider c={c}>{children}</I18nProvider> : children;
 
@@ -37,10 +36,9 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>{title}</title>
         {description && <meta name="description" content={description} />}
-        {/* CSS */}
-        {assets.styles && <link rel="stylesheet" href={assets.styles} />}
-        {/* Client JS (includes Datastar + BaseCoat) */}
-        <script type="module" src={assets.client} defer />
+        <ViteClient />
+        <Link href="/src/style.css" rel="stylesheet" />
+        <Script src="/src/client.ts" />
       </head>
       <body class="bg-background text-foreground antialiased">
         {content}

package/src/lib/assets.ts

@@ -1,49 +0,0 @@
-/**
- * Asset paths for SSR
- *
- * Development: Paths injected via vite.config.ts `define`
- * Production: Paths replaced at build time with hashed filenames
- */
-
-interface Assets {
-  /** CSS path */
-  styles: string;
-  /** Main client bundle (includes Datastar + BaseCoat) */
-  client: string;
-  /** Image processor script (lazy-loaded on media page) */
-  imageProcessor: string;
-}
-
-// Injected by vite.config.ts via `define`
-declare const __JANT_DEV_STYLES__: string;
-declare const __JANT_DEV_CLIENT__: string;
-declare const __JANT_DEV_IMAGE_PROCESSOR__: string;
-
-// Production paths - replaced at build time
-const PROD_ASSETS: Assets = {
-  styles: "__JANT_ASSET_STYLES__",
-  client: "__JANT_ASSET_CLIENT__",
-  imageProcessor: "__JANT_ASSET_IMAGE_PROCESSOR__",
-};
-
-/**
- * Get assets based on environment
- */
-export function getAssets(): Assets {
-  try {
-    if (import.meta.env?.DEV) {
-      return {
-        styles: __JANT_DEV_STYLES__,
-        client: __JANT_DEV_CLIENT__,
-        imageProcessor: __JANT_DEV_IMAGE_PROCESSOR__,
-      };
-    }
-  } catch {
-    // import.meta.env may not exist in all environments
-  }
-
-  return PROD_ASSETS;
-}
-
-// For static imports
-export const ASSETS = PROD_ASSETS;

package/static/assets/image-processor.js

@@ -1,234 +0,0 @@
-/**
- * Client-side Image Processor
- *
- * Processes images before upload:
- * - Corrects EXIF orientation
- * - Resizes to max dimensions
- * - Strips all metadata (privacy)
- * - Converts to WebP format
- */
-
-window.ImageProcessor = (() => {
-  const DEFAULT_OPTIONS = {
-    maxWidth: 1920,
-    maxHeight: 1920,
-    quality: 0.85,
-    mimeType: 'image/webp',
-  };
-
-  /**
-   * EXIF Orientation values and their transformations
-   * @see https://exiftool.org/TagNames/EXIF.html
-   */
-  const ORIENTATIONS = {
-    1: { rotate: 0, flip: false },     // Normal
-    2: { rotate: 0, flip: true },      // Flipped horizontally
-    3: { rotate: 180, flip: false },   // Rotated 180°
-    4: { rotate: 180, flip: true },    // Flipped vertically
-    5: { rotate: 90, flip: true },     // Rotated 90° CCW + flipped
-    6: { rotate: 90, flip: false },    // Rotated 90° CW
-    7: { rotate: 270, flip: true },    // Rotated 90° CW + flipped
-    8: { rotate: 270, flip: false },   // Rotated 90° CCW
-  };
-
-  /**
-   * Read EXIF orientation from JPEG file
-   * @param {ArrayBuffer} buffer - File buffer
-   * @returns {number} Orientation value (1-8), defaults to 1
-   */
-  function readExifOrientation(buffer) {
-    const view = new DataView(buffer);
-
-    // Check for JPEG SOI marker
-    if (view.getUint16(0) !== 0xFFD8) return 1;
-
-    let offset = 2;
-    const length = view.byteLength;
-
-    while (offset < length) {
-      if (view.getUint8(offset) !== 0xFF) return 1;
-
-      const marker = view.getUint8(offset + 1);
-
-      // APP1 marker (EXIF)
-      if (marker === 0xE1) {
-        const exifOffset = offset + 4;
-
-        // Check for "Exif\0\0"
-        if (
-          view.getUint32(exifOffset) !== 0x45786966 ||
-          view.getUint16(exifOffset + 4) !== 0x0000
-        ) {
-          return 1;
-        }
-
-        const tiffOffset = exifOffset + 6;
-        const littleEndian = view.getUint16(tiffOffset) === 0x4949;
-
-        // Validate TIFF header
-        if (view.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) return 1;
-
-        const ifdOffset = view.getUint32(tiffOffset + 4, littleEndian);
-        const numEntries = view.getUint16(tiffOffset + ifdOffset, littleEndian);
-
-        // Search for orientation tag (0x0112)
-        for (let i = 0; i < numEntries; i++) {
-          const entryOffset = tiffOffset + ifdOffset + 2 + i * 12;
-          const tag = view.getUint16(entryOffset, littleEndian);
-
-          if (tag === 0x0112) {
-            return view.getUint16(entryOffset + 8, littleEndian);
-          }
-        }
-
-        return 1;
-      }
-
-      // Skip to next marker
-      if (marker === 0xD8 || marker === 0xD9) {
-        offset += 2;
-      } else {
-        offset += 2 + view.getUint16(offset + 2);
-      }
-    }
-
-    return 1;
-  }
-
-  /**
-   * Load image from file
-   * @param {File} file - Image file
-   * @returns {Promise<HTMLImageElement>}
-   */
-  function loadImage(file) {
-    return new Promise((resolve, reject) => {
-      const img = new Image();
-      img.onload = () => {
-        URL.revokeObjectURL(img.src);
-        resolve(img);
-      };
-      img.onerror = () => reject(new Error('Failed to load image'));
-      img.src = URL.createObjectURL(file);
-    });
-  }
-
-  /**
-   * Calculate output dimensions maintaining aspect ratio
-   * @param {number} width - Original width
-   * @param {number} height - Original height
-   * @param {number} maxWidth - Maximum width
-   * @param {number} maxHeight - Maximum height
-   * @returns {{ width: number, height: number }}
-   */
-  function calculateDimensions(width, height, maxWidth, maxHeight) {
-    if (width <= maxWidth && height <= maxHeight) {
-      return { width, height };
-    }
-
-    const ratio = Math.min(maxWidth / width, maxHeight / height);
-    return {
-      width: Math.round(width * ratio),
-      height: Math.round(height * ratio),
-    };
-  }
-
-  /**
-   * Process image file
-   * @param {File} file - Image file to process
-   * @param {Object} options - Processing options
-   * @returns {Promise<Blob>} Processed image as WebP blob
-   */
-  async function process(file, options = {}) {
-    const opts = { ...DEFAULT_OPTIONS, ...options };
-
-    // Read file buffer for EXIF
-    const buffer = await file.arrayBuffer();
-    const orientation = readExifOrientation(buffer);
-    const transform = ORIENTATIONS[orientation] || ORIENTATIONS[1];
-
-    // Load image
-    const img = await loadImage(file);
-
-    // For 90° or 270° rotation, swap dimensions
-    const isRotated = transform.rotate === 90 || transform.rotate === 270;
-    const srcWidth = isRotated ? img.height : img.width;
-    const srcHeight = isRotated ? img.width : img.height;
-
-    // Calculate output size
-    const { width, height } = calculateDimensions(
-      srcWidth,
-      srcHeight,
-      opts.maxWidth,
-      opts.maxHeight
-    );
-
-    // Create canvas
-    const canvas = document.createElement('canvas');
-    canvas.width = width;
-    canvas.height = height;
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) throw new Error('Failed to get canvas context');
-
-    // Apply transformations
-    ctx.save();
-
-    // Move to center for rotation
-    ctx.translate(width / 2, height / 2);
-
-    // Apply rotation
-    if (transform.rotate) {
-      ctx.rotate((transform.rotate * Math.PI) / 180);
-    }
-
-    // Apply flip
-    if (transform.flip) {
-      ctx.scale(-1, 1);
-    }
-
-    // Draw image centered
-    const drawWidth = isRotated ? height : width;
-    const drawHeight = isRotated ? width : height;
-    ctx.drawImage(img, -drawWidth / 2, -drawHeight / 2, drawWidth, drawHeight);
-
-    ctx.restore();
-
-    // Export as WebP
-    return new Promise((resolve, reject) => {
-      canvas.toBlob(
-        (blob) => {
-          if (blob) {
-            resolve(blob);
-          } else {
-            reject(new Error('Failed to create blob'));
-          }
-        },
-        opts.mimeType,
-        opts.quality
-      );
-    });
-  }
-
-  /**
-   * Process file and create a new File object
-   * @param {File} file - Original file
-   * @param {Object} options - Processing options
-   * @returns {Promise<File>} Processed file with .webp extension
-   */
-  async function processToFile(file, options = {}) {
-    const blob = await process(file, options);
-
-    // Generate new filename with .webp extension
-    const originalName = file.name.replace(/\.[^.]+$/, '');
-    const newName = `${originalName}.webp`;
-
-    return new File([blob], newName, { type: 'image/webp' });
-  }
-
-  return { process, processToFile };
-})();
-
-// Also export for module systems
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = window.ImageProcessor;
-}