@jhits/plugin-images 0.0.6 → 0.0.8

package/src/utils/transforms.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Image Transform Utilities
+ */
+export interface ImageTransformOptions {
+    scale: number;
+    positionX: number;
+    positionY: number;
+    baseScale?: number;
+}
+/**
+ * Calculates the CSS transform string
+ * Order: Center -> Scale -> Translate (Offset)
+ *
+ * Position values are stored as percentages of the CONTAINER, not the image.
+ * This makes them consistent across different container sizes.
+ *
+ * IMPORTANT: The image uses width: auto; height: auto with minWidth: 100%; minHeight: 100%
+ * This allows the image to maintain its natural aspect ratio while ensuring it covers the container.
+ * baseScale handles the "fitting" to ensure the image is large enough to fill the container.
+ *
+ * Applying SCALE before POSITION makes the position relative to the visual size you see,
+ * not the original raw file size. This ensures consistent positioning across different scales.
+ */
+export declare function getImageTransform(options: ImageTransformOptions, needsCentering?: boolean, caller?: string): string;
+export declare function getImageFilter(brightness?: number, blur?: number): string | undefined;
+//# sourceMappingURL=transforms.d.ts.map

package/src/utils/transforms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transforms.d.ts","sourceRoot":"","sources":["transforms.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAC7B,OAAO,EAAE,qBAAqB,EAC9B,cAAc,GAAE,OAAe,EAC/B,MAAM,CAAC,EAAE,MAAM,GAChB,MAAM,CAmBR;AAED,wBAAgB,cAAc,CAAC,UAAU,GAAE,MAAY,EAAE,IAAI,GAAE,MAAU,GAAG,MAAM,GAAG,SAAS,CAG7F"}

package/src/utils/transforms.js

@@ -0,0 +1,38 @@
+/**
+ * Image Transform Utilities
+ */
+/**
+ * Calculates the CSS transform string
+ * Order: Center -> Scale -> Translate (Offset)
+ *
+ * Position values are stored as percentages of the CONTAINER, not the image.
+ * This makes them consistent across different container sizes.
+ *
+ * IMPORTANT: The image uses width: auto; height: auto with minWidth: 100%; minHeight: 100%
+ * This allows the image to maintain its natural aspect ratio while ensuring it covers the container.
+ * baseScale handles the "fitting" to ensure the image is large enough to fill the container.
+ *
+ * Applying SCALE before POSITION makes the position relative to the visual size you see,
+ * not the original raw file size. This ensures consistent positioning across different scales.
+ */
+export function getImageTransform(options, needsCentering = false, caller) {
+    const { scale, positionX, positionY, baseScale = 1 } = options;
+    const totalScale = baseScale * scale;
+    // 1. Center the image (if using top:50% left:50%)
+    const center = needsCentering ? 'translate(-50%, -50%)' : '';
+    // 2. Apply the scaling (base x zoom) FIRST
+    // This ensures the position offset is relative to the scaled visual size
+    const zoom = `scale(${totalScale})`;
+    // 3. Apply the offset (positionX/Y) AFTER scaling
+    // Position values are stored as percentage of CONTAINER
+    // Since scale is applied first, the translate is relative to the scaled visual size
+    const offset = `translate(${positionX}%, ${positionY}%)`;
+    // Combining them: Center first, then scale, then move
+    // Order matters: scale before translate ensures position is relative to visual size
+    return `${center} ${zoom} ${offset}`.trim();
+}
+export function getImageFilter(brightness = 100, blur = 0) {
+    if (brightness === 100 && blur === 0)
+        return undefined;
+    return `brightness(${brightness}%) blur(${blur}px)`;
+}

package/src/views/ImageManager.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Image Manager View
+ * Main view for managing uploaded images
+ */
+export interface ImageManagerViewProps {
+    siteId: string;
+    locale: string;
+}
+export declare function ImageManagerView({ siteId, locale }: ImageManagerViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImageManager.d.ts.map

package/src/views/ImageManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageManager.d.ts","sourceRoot":"","sources":["ImageManager.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,MAAM,WAAW,qBAAqB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,qBAAqB,2CAczE"}

package/src/views/ImageManager.js

@@ -0,0 +1,9 @@
+/**
+ * Image Manager View
+ * Main view for managing uploaded images
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ImageManagerView({ siteId, locale }) {
+    return (_jsx("div", { className: "min-h-screen bg-dashboard-bg p-8", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsx("h1", { className: "text-4xl font-black uppercase tracking-tighter text-dashboard-text mb-8", children: "Image Manager" }), _jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 mb-8", children: "This plugin provides image upload and management functionality. Use the ImagePicker component in other plugins to select images." })] }) }));
+}