@jant/core 0.2.4 → 0.2.6

package/dist/jant/index.js

@@ -0,0 +1,2 @@
+export { P as POST_TYPES, V as VISIBILITY_LEVELS, e as createApp, w as default, m as markdown, f as sqid, t as time, u as url } from './assets/worker-entry-CAzIsRGm.js';
+import 'node:events';

package/dist/jant/wrangler.json

@@ -0,0 +1 @@
+{"configPath":"/Users/green/project/jant/packages/core/wrangler.toml","userConfigPath":"/Users/green/project/jant/packages/core/wrangler.toml","topLevelName":"jant","definedEnvironments":[],"legacy_env":true,"compatibility_date":"2026-01-20","compatibility_flags":["nodejs_compat"],"jsx_factory":"React.createElement","jsx_fragment":"React.Fragment","rules":[{"type":"ESModule","globs":["**/*.js","**/*.mjs"]}],"name":"jant","main":"index.js","triggers":{},"assets":{"directory":"../client"},"vars":{"SITE_URL":"https://local.jant.me"},"durable_objects":{"bindings":[]},"workflows":[],"migrations":[],"kv_namespaces":[],"cloudchamber":{},"send_email":[],"queues":{"producers":[],"consumers":[]},"r2_buckets":[{"binding":"R2","bucket_name":"jant-media"}],"d1_databases":[{"binding":"DB","database_name":"jant-db","database_id":"local","migrations_dir":"src/db/migrations"}],"vectorize":[],"hyperdrive":[],"services":[],"analytics_engine_datasets":[],"dispatch_namespaces":[],"mtls_certificates":[],"pipelines":[],"secrets_store_secrets":[],"unsafe_hello_world":[],"worker_loaders":[],"ratelimits":[],"vpc_services":[],"logfwdr":{"bindings":[]},"python_modules":{"exclude":["**/*.pyc"]},"dev":{"ip":"localhost","port":9019,"local_protocol":"http","upstream_protocol":"http","enable_containers":true,"generate_types":false},"no_bundle":true}

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.6",
   "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/preset.css

@@ -1,13 +1,21 @@
 /**
  * Jant Core Preset
  *
- * Includes basecoat UI and component styles.
- * Note: @source must be in user's style.css (doesn't work via @import)
+ * Includes basecoat UI, component styles, and source scanning for @jant/core components.
+ * This file should be imported in user's style.css after tailwindcss.
  */
 
+/* BaseCoat UI framework */
 @import "basecoat-css";
+
+/* Jant component styles */
 @import "./styles/components.css";
 
+/* Scan @jant/core source files for Tailwind classes */
+/* These paths are relative to this CSS file's location */
+@source "./theme/**/*.{ts,tsx}";
+@source "./routes/**/*.{ts,tsx}";
+
 @theme {
   --radius-default: 0.5rem;
 }

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>
   );