@place-framework/place-block-image 1.0.4 → 1.0.5

package/dist/react/PlaceBlockImage.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+interface PlaceBlockImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    src: string;
+    alt: string;
+    imagePrefix?: string;
+    lazy?: boolean;
+}
+/**
+ * PlaceBlockImage — prevents layout shift using CSS custom properties.
+ * Import: import PlaceBlockImage from '@place-framework/place-block-image/react'
+ *
+ * Usage:
+ *   <PlaceBlockImage src="/assets/logo.png" alt="Logo" />
+ *   <PlaceBlockImage src="/assets/hero.jpg" alt="Hero" lazy={true} />
+ */
+export declare const PlaceBlockImage: React.FC<PlaceBlockImageProps>;
+export default PlaceBlockImage;
+//# sourceMappingURL=PlaceBlockImage.d.ts.map

package/dist/react/PlaceBlockImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaceBlockImage.d.ts","sourceRoot":"","sources":["../../src/react/PlaceBlockImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,UAAU,oBAAqB,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IAC9E,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuC1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/vue/PlaceBlockImage.d.ts

@@ -0,0 +1,41 @@
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const __VLS_export: DefineComponent<ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    alt: {
+        type: StringConstructor;
+        required: true;
+    };
+    imagePrefix: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    alt: {
+        type: StringConstructor;
+        required: true;
+    };
+    imagePrefix: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    lazy: boolean;
+    imagePrefix: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/vue/index.d.ts

@@ -0,0 +1 @@
+export { default as PlaceBlockImage } from './PlaceBlockImage';

package/dist/vue/src/constants/index.d.ts

@@ -0,0 +1,8 @@
+export declare const IMAGE_PREFIX = "image-";
+export declare const CLASS_NAMES: {
+    readonly LAZY: "lazy";
+    readonly LOADED: "loaded";
+    readonly WRAPPER_SUFFIX: "wrapper";
+};
+export declare const getWrapperClassName: (imagePrefix: string) => string;
+export declare const getImageClassName: (imagePrefix: string, filename: string) => string;

package/dist/vue/src/utils/index.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Converts any image URL or path into a CSS-safe kebab-case string.
+ * Used at build time by generateImageClassName() and at runtime by
+ * the Vue/React components to derive the CSS class from the src prop.
+ */
+export declare const cleanImagePath: (src: string) => string;
+/**
+ * Generate CSS class name from a file path — path-agnostic, works with any URL format.
+ * Matches the runtime getImageClassName logic emitted by getSharedLogic().
+ *
+ * @param filePath     - Relative path from imageDir (e.g. "story/accent-orchid.png")
+ * @param imagePrefix  - The prefix to add to the class name (e.g. "image-")
+ * @param outputPrefix - Optional output path prefix prepended before filePath to mirror
+ *                       the served URL (e.g. "images/" when assetModuleFilename outputs
+ *                       to "images/…" so the browser requests "/images/story/…")
+ * @returns The generated CSS class name (e.g. "image-images-story-accent-orchid")
+ */
+export declare function generateImageClassName(filePath: string, imagePrefix: string, outputPrefix?: string): string;
+/**
+ * Strips the Vite/webpack plugin's injected asset-path prefix from a src string
+ * so the remaining path matches what the plugin used when generating CSS classes.
+ *
+ * @param src       - The raw src value (may include the asset path prefix)
+ * @param assetPath - The value of __PLUGIN_ASSET_PATH__ (empty string if undefined)
+ */
+export declare function resolveAssetPath(src: string, assetPath: string): string;
+/**
+ * Derives the per-image CSS class from a src URL, stripping the asset-path
+ * prefix first so the class matches what the plugin generated at build time.
+ *
+ * @param src         - Raw src prop value
+ * @param imagePrefix - e.g. "image-"
+ * @param assetPath   - Value of __PLUGIN_ASSET_PATH__ (pass '' if not defined)
+ */
+export declare function getImageClass(src: string, imagePrefix: string, assetPath: string): string;
+/**
+ * Builds the full className string for the <picture> wrapper element.
+ *
+ * @param src         - Raw src prop value
+ * @param imagePrefix - e.g. "image-"
+ * @param assetPath   - Value of __PLUGIN_ASSET_PATH__ (pass '' if not defined)
+ * @param extraClass  - Any additional class(es) passed by the consumer (e.g. className prop)
+ */
+export declare function getWrapperClass(src: string, imagePrefix: string, assetPath: string, extraClass?: string): string;
+/**
+ * Returns the CSS class string for the <img> element based on lazy-load state.
+ *
+ * @param lazy     - Whether lazy loading is enabled
+ * @param isLoaded - Whether the image has been loaded (intersected)
+ */
+export declare function getLazyClass(lazy: boolean, isLoaded: boolean): string;
+/**
+ * Creates an IntersectionObserver that fires `onIntersect` once when the given
+ * element enters the viewport, then automatically stops observing.
+ *
+ * @param element      - The DOM element to observe
+ * @param onIntersect  - Callback invoked when the element intersects
+ * @param threshold    - Intersection threshold (default 0.1)
+ * @returns The created IntersectionObserver (call .disconnect() to clean up early)
+ */
+export declare function createLazyObserver(element: Element, onIntersect: () => void, threshold?: number): IntersectionObserver;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@place-framework/place-block-image",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A utility package for generating CSS custom properties from image dimensions to prevent layout shift",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -49,8 +49,10 @@
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0",
     "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/language-core": "^3.1.8",
     "typescript": "^5.0.0",
-    "vite": "^8.0.16"
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2"
   },
   "dependencies": {
     "glob": "^10.0.0",

package/tsconfig.vue.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "jsx": "preserve",
+    "baseUrl": "."
+  },
+  "include": ["src/vue/**/*", "src/utils/**/*", "src/constants/**/*"]
+}

package/vite.react.config.mts

@@ -1,10 +1,18 @@
 import { resolve } from 'path';
 import type { UserConfig } from 'vite';
+import dts from 'vite-plugin-dts';
 
-
-// Builds src/react/PlaceBlockImage.tsx → dist/react/PlaceBlockImage.{js,cjs}
+// Builds src/react/PlaceBlockImage.tsx → dist/react/PlaceBlockImage.{js,cjs,d.ts}
 // React and its runtime are kept external — consumers supply their own.
 export const reactConfig: UserConfig = {
+  plugins: [
+    dts({
+      include: ['src/react/PlaceBlockImage.tsx'],
+      outDirs: 'dist/react',
+      entryRoot: 'src/react',
+      tsconfigPath: './tsconfig.json',
+    }),
+  ],
   build: {
     outDir: 'dist/react',
     emptyOutDir: true,

package/vite.vue.config.mts

@@ -1,12 +1,22 @@
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import type { UserConfig } from 'vite';
+import dts from 'vite-plugin-dts';
 
-
-// Builds src/vue/PlaceBlockImage.vue → dist/vue/PlaceBlockImage.{js,cjs}
+// Builds src/vue/PlaceBlockImage.vue → dist/vue/PlaceBlockImage.{js,cjs,d.ts}
 // Vue and its runtime are kept external — consumers supply their own.
 export const vueConfig: UserConfig = {
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    dts({
+      outDirs: 'dist/vue',
+      entryRoot: 'src/vue',
+      tsconfigPath: './tsconfig.vue.json',
+      processor: 'vue',
+      cleanVueFileName: true,
+      staticImport: true,
+    }),
+  ],
   build: {
     outDir: 'dist/vue',
     emptyOutDir: true,