@stachelock/ui 0.5.0 → 0.5.1

package/dist/components/CloudinaryImage.js

@@ -1,6 +1,7 @@
-import { createElementBlock as d, openBlock as u, createElementVNode as o, defineComponent as L, inject as M, ref as h, computed as l, watch as P, onMounted as Z, onUnmounted as E, normalizeClass as n, normalizeStyle as C, withDirectives as p, createCommentVNode as D, createBlock as x, resolveDynamicComponent as S, vShow as v } from "vue";
-import { _ as U } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-function z(i, f) {
+import { createElementBlock as d, openBlock as u, createElementVNode as r, defineComponent as U, inject as D, ref as v, computed as l, watch as F, onMounted as W, onUnmounted as z, normalizeClass as n, normalizeStyle as C, withDirectives as g, createCommentVNode as O, createBlock as x, resolveDynamicComponent as k, vShow as y } from "vue";
+import P from "https://res.cloudinary.com/demo/image/upload/sample.jpg?vue&type=CloudinaryImage&index=0&src=true&alt=Sample%20image&lang.CloudinaryImage";
+import { _ as V } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+function H(i, f) {
   return u(), d("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
@@ -8,14 +9,14 @@ function z(i, f) {
     "aria-hidden": "true",
     "data-slot": "icon"
   }, [
-    o("path", {
+    r("path", {
       "fill-rule": "evenodd",
       d: "M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0l-2.97 2.97ZM12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",
       "clip-rule": "evenodd"
     })
   ]);
 }
-function F(i, f) {
+function G(i, f) {
   return u(), d("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
@@ -23,24 +24,37 @@ function F(i, f) {
     "aria-hidden": "true",
     "data-slot": "icon"
   }, [
-    o("path", {
+    r("path", {
       "fill-rule": "evenodd",
       d: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z",
       "clip-rule": "evenodd"
     })
   ]);
 }
-const O = { class: "sl-flex sl-h-full sl-w-full sl-items-center sl-justify-center" }, V = { class: "sl-flex sl-h-full sl-w-full sl-items-center sl-justify-center" }, H = {
+const J = { class: "sl-flex sl-h-full sl-w-full sl-items-center sl-justify-center" }, K = { class: "sl-flex sl-h-full sl-w-full sl-items-center sl-justify-center" }, Q = {
   key: 0,
   class: "sl-h-full sl-w-full"
-}, G = ["src", "alt"], J = /* @__PURE__ */ L({
+}, T = ["src", "alt"], $ = /* @__PURE__ */ U({
   __name: "CloudinaryImage",
   props: {
+    /** Direct image URL - bypasses Cloudinary URL generation */
+    src: {
+      type: String,
+      required: !1,
+      default: null
+    },
+    /** Cloudinary public ID */
     publicId: {
       type: String,
       required: !1,
       default: null
     },
+    /** Alias for publicId (for compatibility with different naming conventions) */
+    imagePublicId: {
+      type: String,
+      required: !1,
+      default: null
+    },
     asset: {
       type: Object,
       default: null,
@@ -51,6 +65,12 @@ const O = { class: "sl-flex sl-h-full sl-w-full sl-items-center sl-justify-cente
       required: !1,
       default: null
     },
+    /** Fallback URL to use if primary image fails */
+    fallbackSrc: {
+      type: String,
+      required: !1,
+      default: null
+    },
     transformations: {
       type: Array,
       default: () => []
@@ -94,82 +114,84 @@ const O = { class: "sl-flex sl-h-full sl-w-full sl-items-center sl-justify-cente
   },
   emits: ["update:imageLoaded", "error"],
   setup(i, { emit: f }) {
-    const g = M("cloudinary", {}), s = h(!1), r = h(!1), c = h(!0), y = f, e = i, m = l(() => e.asset?.public_id ? e.asset.public_id : e.publicId || e.fallbackPublicId || null), w = l(() => {
-      if (!m.value) return null;
-      const t = g?.cloudName || "demo", b = g?.baseUrl || `https://res.cloudinary.com/${t}/image/upload`, a = [];
+    const b = D("cloudinary", {}), s = v(!1), o = v(!1), c = v(!0), w = f, e = i, m = (t) => t ? t.startsWith("http://") || t.startsWith("https://") || t.startsWith("//") : !1, p = l(() => e.src && m(e.src) ? e.src : e.asset?.secure_url ? e.asset.secure_url : e.asset?.url ? e.asset.url : e.publicId && m(e.publicId) ? e.publicId : e.imagePublicId && m(e.imagePublicId) ? e.imagePublicId : null), _ = l(() => p.value ? null : e.asset?.public_id ? e.asset.public_id : e.imagePublicId || e.publicId || e.fallbackPublicId || null), q = l(() => {
+      if (!_.value) return null;
+      const t = b?.cloudName || "demo", S = b?.baseUrl || `https://res.cloudinary.com/${t}/image/upload`, a = [];
       e.width && e.width !== "auto" && a.push(`w_${e.width}`), e.height && e.height !== "auto" && a.push(`h_${e.height}`), e.quality && a.push(`q_${e.quality}`), e.devicePixelRatio && a.push(`dpr_${e.devicePixelRatio}`), a.push("f_auto"), a.push("c_fill");
-      const B = a.join(",");
-      return `${b}/${B}/${m.value}`;
-    }), _ = l(() => e.skeleton === "user" ? F : z), k = l(() => {
+      const E = a.join(",");
+      return `${S}/${E}/${_.value}`;
+    }), h = l(() => p.value ? p.value : q.value), I = l(() => e.skeleton === "user" ? G : H), j = l(() => {
       const t = {};
       return e.width && e.width !== "auto" && (t.width = typeof e.width == "number" ? `${e.width}px` : e.width), e.height && e.height !== "auto" && (t.height = typeof e.height == "number" ? `${e.height}px` : e.height), e.aspectRatio && (t.aspectRatio = String(e.aspectRatio)), t;
-    }), I = l(() => ({
+    }), N = l(() => ({
       "sl-relative sl-overflow-hidden": !0,
       ...e.customClasses?.div
-    })), $ = l(() => ({
+    })), A = l(() => ({
       "sl-h-full sl-w-full sl-text-gray-200": !0,
       ...e.customClasses?.skeleton
-    })), j = l(() => ({
+    })), R = l(() => ({
       "sl-h-full sl-w-full sl-text-gray-300": !0,
       ...e.customClasses?.fallback
-    })), N = l(() => ({
+    })), B = l(() => ({
       "sl-h-full sl-w-full sl-object-cover": !0,
       ...e.customClasses?.image
-    })), q = l(() => ({
+    })), L = l(() => ({
       objectFit: "cover"
-    })), A = () => {
-      s.value = !0, r.value = !1, y("update:imageLoaded", !0);
-    }, R = (t) => {
-      c.value && (r.value = !0, s.value = !1, y("error", t));
+    })), M = () => {
+      s.value = !0, o.value = !1, w("update:imageLoaded", !0);
+    }, Z = (t) => {
+      c.value && (o.value = !0, s.value = !1, w("error", t));
     };
-    return P(
-      () => m.value,
+    return F(
+      () => h.value,
       () => {
-        s.value = !1, r.value = !1;
+        s.value = !1, o.value = !1;
       }
-    ), Z(() => {
+    ), W(() => {
       c.value = !0;
-    }), E(() => {
+    }), z(() => {
       c.value = !1;
-    }), (t, b) => (u(), d("div", {
-      style: C(k.value),
-      class: n(I.value)
+    }), (t, S) => (u(), d("div", {
+      style: C(j.value),
+      class: n(N.value)
     }, [
-      p(o("div", O, [
-        o("div", {
+      g(r("div", J, [
+        r("div", {
           role: "status",
           class: n([{ "sl-animate-pulse": i.pulse }])
         }, [
-          (u(), x(S(_.value), {
-            class: n($.value)
+          (u(), x(k(I.value), {
+            class: n(A.value)
           }, null, 8, ["class"]))
         ], 2)
       ], 512), [
-        [v, !s.value && !r.value]
+        [y, !s.value && !o.value]
       ]),
-      p(o("div", V, [
-        (u(), x(S(_.value), {
-          class: n(j.value)
+      g(r("div", K, [
+        (u(), x(k(I.value), {
+          class: n(R.value)
         }, null, 8, ["class"]))
       ], 512), [
-        [v, r.value && !s.value]
+        [y, o.value && !s.value]
       ]),
-      w.value && c.value ? p((u(), d("div", H, [
-        o("img", {
-          src: w.value,
+      h.value && c.value ? g((u(), d("div", Q, [
+        r("img", {
+          src: h.value,
           alt: i.alt,
-          onLoad: A,
-          onError: R,
-          class: n(N.value),
-          style: C(q.value)
-        }, null, 46, G)
+          onLoad: M,
+          onError: Z,
+          class: n(B.value),
+          style: C(L.value)
+        }, null, 46, T)
       ], 512)), [
-        [v, s.value]
-      ]) : D("", !0)
+        [y, s.value]
+      ]) : O("", !0)
     ], 6));
   }
-}), T = /* @__PURE__ */ U(J, [["__scopeId", "data-v-b8d07cc6"]]);
+});
+typeof P == "function" && P($);
+const te = /* @__PURE__ */ V($, [["__scopeId", "data-v-18ba2d71"]]);
 export {
-  T as default
+  te as default
 };
 //# sourceMappingURL=CloudinaryImage.js.map

package/dist/components/CloudinaryImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloudinaryImage.js","sources":["../../node_modules/@heroicons/vue/20/solid/esm/PhotoIcon.js","../../node_modules/@heroicons/vue/20/solid/esm/UserCircleIcon.js","../../src/components/CloudinaryImage.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"fill-rule\": \"evenodd\",\n      d: \"M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0l-2.97 2.97ZM12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\",\n      \"clip-rule\": \"evenodd\"\n    })\n  ]))\n}","import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"fill-rule\": \"evenodd\",\n      d: \"M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z\",\n      \"clip-rule\": \"evenodd\"\n    })\n  ]))\n}","<!--\n  @component CloudinaryImage\n  @description Cloudinary image component with loading states and fallbacks.\n  \n  Displays images from Cloudinary with automatic transformations, loading\n  skeleton, error fallback, and flexible sizing options.\n  \n  @props\n  - publicId (string, optional): Cloudinary public ID\n  - asset (CloudinaryAsset, optional): Full asset object with transformations\n  - fallbackPublicId (string, optional): Fallback image public ID\n  - transformations (array, optional): Additional Cloudinary transformations\n  - alt (string, optional): Alt text for accessibility\n  - aspectRatio (string|number, optional): Aspect ratio (e.g., '16/9')\n  - width (string|number, optional): Width in pixels or 'auto'\n  - height (string|number, optional): Height in pixels or 'auto'\n  - quality (string|number, optional): Image quality (1-100 or 'auto')\n  - skeleton (string, optional): Skeleton type - 'user' or 'photo'\n  - pulse (boolean, optional): Animate skeleton\n  \n  @emits\n  - update:imageLoaded: Emitted when image load state changes\n  - error: Emitted on image load error\n  \n  @example\n  <CloudinaryImage\n    public-id=\"avatars/user123\"\n    :width=\"200\"\n    :height=\"200\"\n    alt=\"User avatar\"\n    skeleton=\"user\"\n  />\n-->\n<template>\n  <div :style=\"computedDivStyle\" :class=\"computedDivClass\">\n    <!-- Loading skeleton -->\n    <div v-show=\"!imageLoaded && !imageError\" class=\"sl-flex sl-h-full sl-w-full sl-items-center sl-justify-center\">\n      <div role=\"status\" :class=\"[{ 'sl-animate-pulse': pulse }]\">\n        <component :is=\"skeletonComponent\" :class=\"computedSkeletonClass\" />\n      </div>\n    </div>\n\n    <!-- Error fallback -->\n    <div v-show=\"imageError && !imageLoaded\" class=\"sl-flex sl-h-full sl-w-full sl-items-center sl-justify-center\">\n      <component :is=\"skeletonComponent\" :class=\"computedFallbackClass\" />\n    </div>\n\n    <!-- Image -->\n    <div v-if=\"computedImg && isMounted\" v-show=\"imageLoaded\" class=\"sl-h-full sl-w-full\">\n      <img\n        :src=\"computedImg\"\n        :alt=\"alt\"\n        @load=\"onImageLoad\"\n        @error=\"onImageError\"\n        :class=\"computedImageClass\"\n        :style=\"computedImageStyle\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * CloudinaryImage - Image component with Cloudinary CDN support\n * \n * Provides a comprehensive image component with loading states, error handling,\n * and Cloudinary transformations. Uses plugin configuration for Cloudinary setup.\n * \n * ## Features\n * - Automatic loading skeleton\n * - Error fallback display\n * - Cloudinary URL generation\n * - Responsive sizing\n * - Aspect ratio control\n * - Quality optimization\n * \n * ## Plugin Configuration\n * Configure Cloudinary in your app setup:\n * ```typescript\n * app.use(StachelockUI, {\n *   cloudinary: {\n *     cloudName: 'your-cloud-name',\n *     defaultTransformations: [...]\n *   }\n * })\n * ```\n * \n * @module components/CloudinaryImage\n * @see {@link CloudinaryImageProps} for prop interface\n */\nimport { UserCircleIcon, PhotoIcon } from '@heroicons/vue/20/solid';\nimport { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue';\nimport type { PropType } from 'vue';\nimport type { CloudinaryAsset, CloudinaryTransformationStep } from '../types/core';\n\n// Plugin configuration injection\nconst cloudinaryConfig = inject<{\n  cloudName?: string;\n  baseUrl?: string;\n  defaultTransformations?: CloudinaryTransformationStep[];\n}>('cloudinary', {});\n\ninterface CustomClasses {\n  div?: Record<string, boolean>;\n  skeleton?: Record<string, boolean>;\n  image?: Record<string, boolean>;\n  fallback?: Record<string, boolean>;\n}\n\n// State\nconst imageLoaded = ref(false);\nconst imageError = ref(false);\nconst isMounted = ref(true);\n\nconst emit = defineEmits<{\n  'update:imageLoaded': [value: boolean];\n  'error': [error: unknown];\n}>();\n\nconst props = defineProps({\n  publicId: {\n    type: String,\n    required: false,\n    default: null\n  },\n  asset: {\n    type: Object as PropType<CloudinaryAsset | null>,\n    default: null,\n    required: false\n  },\n  fallbackPublicId: {\n    type: String,\n    required: false,\n    default: null\n  },\n  transformations: {\n    type: Array as PropType<Array<(image: unknown) => void>>,\n    default: () => []\n  },\n  alt: {\n    type: String,\n    default: ''\n  },\n  aspectRatio: {\n    type: [String, Number] as PropType<string | number>,\n    default: null\n  },\n  width: {\n    type: [String, Number] as PropType<string | number>,\n    default: 64\n  },\n  height: {\n    type: [String, Number] as PropType<string | number>,\n    default: 64\n  },\n  quality: {\n    type: [String, Number],\n    default: '90'\n  },\n  devicePixelRatio: {\n    type: String,\n    default: '2.0'\n  },\n  skeleton: {\n    type: String as PropType<'user' | 'photo'>,\n    default: 'photo'\n  },\n  pulse: {\n    type: Boolean,\n    default: true\n  },\n  customClasses: {\n    type: Object as PropType<CustomClasses>,\n    default: () => ({})\n  }\n});\n\n// Computed: Effective public ID\nconst effectivePublicId = computed(() => {\n  if (props.asset?.public_id) {\n    return props.asset.public_id;\n  }\n  return props.publicId || props.fallbackPublicId || null;\n});\n\n// Computed: Generate Cloudinary URL\nconst computedImg = computed(() => {\n  if (!effectivePublicId.value) return null;\n  \n  const cloudName = cloudinaryConfig?.cloudName || 'demo';\n  const baseUrl = cloudinaryConfig?.baseUrl || `https://res.cloudinary.com/${cloudName}/image/upload`;\n  \n  // Build transformation string\n  const transformations: string[] = [];\n  \n  // Add width/height\n  if (props.width && props.width !== 'auto') {\n    transformations.push(`w_${props.width}`);\n  }\n  if (props.height && props.height !== 'auto') {\n    transformations.push(`h_${props.height}`);\n  }\n  \n  // Add quality\n  if (props.quality) {\n    transformations.push(`q_${props.quality}`);\n  }\n  \n  // Add DPR\n  if (props.devicePixelRatio) {\n    transformations.push(`dpr_${props.devicePixelRatio}`);\n  }\n  \n  // Auto format\n  transformations.push('f_auto');\n  \n  // Crop mode\n  transformations.push('c_fill');\n  \n  const transformString = transformations.join(',');\n  \n  return `${baseUrl}/${transformString}/${effectivePublicId.value}`;\n});\n\n// Skeleton component based on type\nconst skeletonComponent = computed(() => {\n  return props.skeleton === 'user' ? UserCircleIcon : PhotoIcon;\n});\n\n// Style computations\nconst computedDivStyle = computed(() => {\n  const style: Record<string, string> = {};\n  \n  if (props.width && props.width !== 'auto') {\n    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width;\n  }\n  if (props.height && props.height !== 'auto') {\n    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height;\n  }\n  if (props.aspectRatio) {\n    style.aspectRatio = String(props.aspectRatio);\n  }\n  \n  return style;\n});\n\nconst computedDivClass = computed(() => ({\n  'sl-relative sl-overflow-hidden': true,\n  ...props.customClasses?.div\n}));\n\nconst computedSkeletonClass = computed(() => ({\n  'sl-h-full sl-w-full sl-text-gray-200': true,\n  ...props.customClasses?.skeleton\n}));\n\nconst computedFallbackClass = computed(() => ({\n  'sl-h-full sl-w-full sl-text-gray-300': true,\n  ...props.customClasses?.fallback\n}));\n\nconst computedImageClass = computed(() => ({\n  'sl-h-full sl-w-full sl-object-cover': true,\n  ...props.customClasses?.image\n}));\n\nconst computedImageStyle = computed(() => ({\n  objectFit: 'cover' as const,\n}));\n\n// Event handlers\nconst onImageLoad = () => {\n  imageLoaded.value = true;\n  imageError.value = false;\n  emit('update:imageLoaded', true);\n};\n\nconst onImageError = (error: Event) => {\n  if (!isMounted.value) return;\n  \n  imageError.value = true;\n  imageLoaded.value = false;\n  emit('error', error);\n};\n\n// Reset state when publicId changes\nwatch(\n  () => effectivePublicId.value,\n  () => {\n    imageLoaded.value = false;\n    imageError.value = false;\n  }\n);\n\n// Lifecycle\nonMounted(() => {\n  isMounted.value = true;\n});\n\nonUnmounted(() => {\n  isMounted.value = false;\n});\n</script>\n\n<style scoped>\n/* Prevent layout shift */\n[data-loading=\"true\"] {\n  min-height: 20px;\n}\n</style>\n\n"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","cloudinaryConfig","inject","imageLoaded","ref","imageError","isMounted","emit","__emit","props","__props","effectivePublicId","computed","computedImg","cloudName","baseUrl","transformations","transformString","skeletonComponent","UserCircleIcon","PhotoIcon","computedDivStyle","style","computedDivClass","computedSkeletonClass","computedFallbackClass","computedImageClass","computedImageStyle","onImageLoad","onImageError","error","watch","onMounted","onUnmounted","_withDirectives","_hoisted_1","_createBlock","_resolveDynamicComponent","_vShow","_hoisted_2","_hoisted_3"],"mappings":"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","x_google_ignoreList":[0,1]}
+{"version":3,"file":"CloudinaryImage.js","sources":["../../node_modules/@heroicons/vue/20/solid/esm/PhotoIcon.js","../../node_modules/@heroicons/vue/20/solid/esm/UserCircleIcon.js","../../src/components/CloudinaryImage.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"fill-rule\": \"evenodd\",\n      d: \"M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0l-2.97 2.97ZM12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\",\n      \"clip-rule\": \"evenodd\"\n    })\n  ]))\n}","import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"fill-rule\": \"evenodd\",\n      d: \"M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z\",\n      \"clip-rule\": \"evenodd\"\n    })\n  ]))\n}","<!--\n  @component CloudinaryImage\n  @description Cloudinary image component with loading states and fallbacks.\n  \n  Displays images from Cloudinary with automatic transformations, loading\n  skeleton, error fallback, and flexible sizing options.\n  \n  @props\n  - src (string, optional): Direct image URL (bypasses Cloudinary URL generation)\n  - publicId (string, optional): Cloudinary public ID\n  - imagePublicId (string, optional): Alias for publicId (for compatibility)\n  - asset (CloudinaryAsset, optional): Full asset object with transformations\n  - fallbackPublicId (string, optional): Fallback image public ID\n  - transformations (array, optional): Additional Cloudinary transformations\n  - alt (string, optional): Alt text for accessibility\n  - aspectRatio (string|number, optional): Aspect ratio (e.g., '16/9')\n  - width (string|number, optional): Width in pixels or 'auto'\n  - height (string|number, optional): Height in pixels or 'auto'\n  - quality (string|number, optional): Image quality (1-100 or 'auto')\n  - skeleton (string, optional): Skeleton type - 'user' or 'photo'\n  - pulse (boolean, optional): Animate skeleton\n  \n  @emits\n  - update:imageLoaded: Emitted when image load state changes\n  - error: Emitted on image load error\n  \n  @example\n  <!-- Using direct URL -->\n  <CloudinaryImage\n    src=\"https://res.cloudinary.com/demo/image/upload/sample.jpg\"\n    :width=\"200\"\n    :height=\"200\"\n    alt=\"Sample image\"\n  />\n  \n  @example\n  <!-- Using public ID with auto-generated URL -->\n  <CloudinaryImage\n    public-id=\"avatars/user123\"\n    :width=\"200\"\n    :height=\"200\"\n    alt=\"User avatar\"\n    skeleton=\"user\"\n  />\n-->\n<template>\n  <div :style=\"computedDivStyle\" :class=\"computedDivClass\">\n    <!-- Loading skeleton -->\n    <div v-show=\"!imageLoaded && !imageError\" class=\"sl-flex sl-h-full sl-w-full sl-items-center sl-justify-center\">\n      <div role=\"status\" :class=\"[{ 'sl-animate-pulse': pulse }]\">\n        <component :is=\"skeletonComponent\" :class=\"computedSkeletonClass\" />\n      </div>\n    </div>\n\n    <!-- Error fallback -->\n    <div v-show=\"imageError && !imageLoaded\" class=\"sl-flex sl-h-full sl-w-full sl-items-center sl-justify-center\">\n      <component :is=\"skeletonComponent\" :class=\"computedFallbackClass\" />\n    </div>\n\n    <!-- Image -->\n    <div v-if=\"computedImg && isMounted\" v-show=\"imageLoaded\" class=\"sl-h-full sl-w-full\">\n      <img\n        :src=\"computedImg\"\n        :alt=\"alt\"\n        @load=\"onImageLoad\"\n        @error=\"onImageError\"\n        :class=\"computedImageClass\"\n        :style=\"computedImageStyle\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * CloudinaryImage - Image component with Cloudinary CDN support\n * \n * Provides a comprehensive image component with loading states, error handling,\n * and Cloudinary transformations. Uses plugin configuration for Cloudinary setup.\n * \n * ## Features\n * - Automatic loading skeleton\n * - Error fallback display\n * - Cloudinary URL generation\n * - Responsive sizing\n * - Aspect ratio control\n * - Quality optimization\n * \n * ## Plugin Configuration\n * Configure Cloudinary in your app setup:\n * ```typescript\n * app.use(StachelockUI, {\n *   cloudinary: {\n *     cloudName: 'your-cloud-name',\n *     defaultTransformations: [...]\n *   }\n * })\n * ```\n * \n * @module components/CloudinaryImage\n * @see {@link CloudinaryImageProps} for prop interface\n */\nimport { UserCircleIcon, PhotoIcon } from '@heroicons/vue/20/solid';\nimport { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue';\nimport type { PropType } from 'vue';\nimport type { CloudinaryAsset, CloudinaryTransformationStep } from '../types/core';\n\n// Plugin configuration injection\nconst cloudinaryConfig = inject<{\n  cloudName?: string;\n  baseUrl?: string;\n  defaultTransformations?: CloudinaryTransformationStep[];\n}>('cloudinary', {});\n\ninterface CustomClasses {\n  div?: Record<string, boolean>;\n  skeleton?: Record<string, boolean>;\n  image?: Record<string, boolean>;\n  fallback?: Record<string, boolean>;\n}\n\n// State\nconst imageLoaded = ref(false);\nconst imageError = ref(false);\nconst isMounted = ref(true);\n\nconst emit = defineEmits<{\n  'update:imageLoaded': [value: boolean];\n  'error': [error: unknown];\n}>();\n\nconst props = defineProps({\n  /** Direct image URL - bypasses Cloudinary URL generation */\n  src: {\n    type: String,\n    required: false,\n    default: null\n  },\n  /** Cloudinary public ID */\n  publicId: {\n    type: String,\n    required: false,\n    default: null\n  },\n  /** Alias for publicId (for compatibility with different naming conventions) */\n  imagePublicId: {\n    type: String,\n    required: false,\n    default: null\n  },\n  asset: {\n    type: Object as PropType<CloudinaryAsset | null>,\n    default: null,\n    required: false\n  },\n  fallbackPublicId: {\n    type: String,\n    required: false,\n    default: null\n  },\n  /** Fallback URL to use if primary image fails */\n  fallbackSrc: {\n    type: String,\n    required: false,\n    default: null\n  },\n  transformations: {\n    type: Array as PropType<Array<(image: unknown) => void>>,\n    default: () => []\n  },\n  alt: {\n    type: String,\n    default: ''\n  },\n  aspectRatio: {\n    type: [String, Number] as PropType<string | number>,\n    default: null\n  },\n  width: {\n    type: [String, Number] as PropType<string | number>,\n    default: 64\n  },\n  height: {\n    type: [String, Number] as PropType<string | number>,\n    default: 64\n  },\n  quality: {\n    type: [String, Number],\n    default: '90'\n  },\n  devicePixelRatio: {\n    type: String,\n    default: '2.0'\n  },\n  skeleton: {\n    type: String as PropType<'user' | 'photo'>,\n    default: 'photo'\n  },\n  pulse: {\n    type: Boolean,\n    default: true\n  },\n  customClasses: {\n    type: Object as PropType<CustomClasses>,\n    default: () => ({})\n  }\n});\n\n/**\n * Helper to check if a string is a full URL\n */\nconst isFullUrl = (value: string | null | undefined): boolean => {\n  if (!value) return false;\n  return value.startsWith('http://') || value.startsWith('https://') || value.startsWith('//');\n};\n\n// Computed: Direct URL source (if provided)\nconst directSrc = computed(() => {\n  // Check src prop first\n  if (props.src && isFullUrl(props.src)) {\n    return props.src;\n  }\n  \n  // Check if asset has secure_url or url\n  if (props.asset?.secure_url) {\n    return props.asset.secure_url;\n  }\n  if ((props.asset as any)?.url) {\n    return (props.asset as any).url;\n  }\n  \n  // Check if publicId or imagePublicId is actually a full URL\n  if (props.publicId && isFullUrl(props.publicId)) {\n    return props.publicId;\n  }\n  if (props.imagePublicId && isFullUrl(props.imagePublicId)) {\n    return props.imagePublicId;\n  }\n  \n  return null;\n});\n\n// Computed: Effective public ID (when not using direct URL)\nconst effectivePublicId = computed(() => {\n  // If we have a direct URL, we don't need a public ID\n  if (directSrc.value) return null;\n  \n  if (props.asset?.public_id) {\n    return props.asset.public_id;\n  }\n  return props.imagePublicId || props.publicId || props.fallbackPublicId || null;\n});\n\n// Computed: Generate Cloudinary URL from public ID\nconst generatedCloudinaryUrl = computed(() => {\n  if (!effectivePublicId.value) return null;\n  \n  const cloudName = cloudinaryConfig?.cloudName || 'demo';\n  const baseUrl = cloudinaryConfig?.baseUrl || `https://res.cloudinary.com/${cloudName}/image/upload`;\n  \n  // Build transformation string\n  const transformations: string[] = [];\n  \n  // Add width/height\n  if (props.width && props.width !== 'auto') {\n    transformations.push(`w_${props.width}`);\n  }\n  if (props.height && props.height !== 'auto') {\n    transformations.push(`h_${props.height}`);\n  }\n  \n  // Add quality\n  if (props.quality) {\n    transformations.push(`q_${props.quality}`);\n  }\n  \n  // Add DPR\n  if (props.devicePixelRatio) {\n    transformations.push(`dpr_${props.devicePixelRatio}`);\n  }\n  \n  // Auto format\n  transformations.push('f_auto');\n  \n  // Crop mode\n  transformations.push('c_fill');\n  \n  const transformString = transformations.join(',');\n  \n  return `${baseUrl}/${transformString}/${effectivePublicId.value}`;\n});\n\n// Computed: Final image URL (prefers direct URL over generated)\nconst computedImg = computed(() => {\n  // Use direct URL if available\n  if (directSrc.value) {\n    return directSrc.value;\n  }\n  \n  // Otherwise use generated Cloudinary URL\n  return generatedCloudinaryUrl.value;\n});\n\n// Skeleton component based on type\nconst skeletonComponent = computed(() => {\n  return props.skeleton === 'user' ? UserCircleIcon : PhotoIcon;\n});\n\n// Style computations\nconst computedDivStyle = computed(() => {\n  const style: Record<string, string> = {};\n  \n  if (props.width && props.width !== 'auto') {\n    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width;\n  }\n  if (props.height && props.height !== 'auto') {\n    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height;\n  }\n  if (props.aspectRatio) {\n    style.aspectRatio = String(props.aspectRatio);\n  }\n  \n  return style;\n});\n\nconst computedDivClass = computed(() => ({\n  'sl-relative sl-overflow-hidden': true,\n  ...props.customClasses?.div\n}));\n\nconst computedSkeletonClass = computed(() => ({\n  'sl-h-full sl-w-full sl-text-gray-200': true,\n  ...props.customClasses?.skeleton\n}));\n\nconst computedFallbackClass = computed(() => ({\n  'sl-h-full sl-w-full sl-text-gray-300': true,\n  ...props.customClasses?.fallback\n}));\n\nconst computedImageClass = computed(() => ({\n  'sl-h-full sl-w-full sl-object-cover': true,\n  ...props.customClasses?.image\n}));\n\nconst computedImageStyle = computed(() => ({\n  objectFit: 'cover' as const,\n}));\n\n// Event handlers\nconst onImageLoad = () => {\n  imageLoaded.value = true;\n  imageError.value = false;\n  emit('update:imageLoaded', true);\n};\n\nconst onImageError = (error: Event) => {\n  if (!isMounted.value) return;\n  \n  imageError.value = true;\n  imageLoaded.value = false;\n  emit('error', error);\n};\n\n// Reset state when source changes\nwatch(\n  () => computedImg.value,\n  () => {\n    imageLoaded.value = false;\n    imageError.value = false;\n  }\n);\n\n// Lifecycle\nonMounted(() => {\n  isMounted.value = true;\n});\n\nonUnmounted(() => {\n  isMounted.value = false;\n});\n</script>\n\n<style scoped>\n/* Prevent layout shift */\n[data-loading=\"true\"] {\n  min-height: 20px;\n}\n</style>\n\n"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","cloudinaryConfig","inject","imageLoaded","ref","imageError","isMounted","emit","__emit","props","__props","isFullUrl","value","directSrc","computed","effectivePublicId","generatedCloudinaryUrl","cloudName","baseUrl","transformations","transformString","computedImg","skeletonComponent","UserCircleIcon","PhotoIcon","computedDivStyle","style","computedDivClass","computedSkeletonClass","computedFallbackClass","computedImageClass","computedImageStyle","onImageLoad","onImageError","error","watch","onMounted","onUnmounted","_withDirectives","_hoisted_1","_createBlock","_resolveDynamicComponent","_vShow","_hoisted_2","_hoisted_3"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "Stachelock UI",
+  "short_name": "Stachelock UI",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

package/dist/src/components/CloudinaryImage.d.ts

@@ -7,11 +7,24 @@ interface CustomClasses {
     fallback?: Record<string, boolean>;
 }
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Direct image URL - bypasses Cloudinary URL generation */
+    src: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
+    /** Cloudinary public ID */
     publicId: {
         type: StringConstructor;
         required: false;
         default: null;
     };
+    /** Alias for publicId (for compatibility with different naming conventions) */
+    imagePublicId: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
     asset: {
         type: PropType<CloudinaryAsset | null>;
         default: null;
@@ -22,6 +35,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         required: false;
         default: null;
     };
+    /** Fallback URL to use if primary image fails */
+    fallbackSrc: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
     transformations: {
         type: PropType<((image: unknown) => void)[]>;
         default: () => never[];
@@ -66,11 +85,24 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     error: (error: unknown) => any;
     "update:imageLoaded": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** Direct image URL - bypasses Cloudinary URL generation */
+    src: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
+    /** Cloudinary public ID */
     publicId: {
         type: StringConstructor;
         required: false;
         default: null;
     };
+    /** Alias for publicId (for compatibility with different naming conventions) */
+    imagePublicId: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
     asset: {
         type: PropType<CloudinaryAsset | null>;
         default: null;
@@ -81,6 +113,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         required: false;
         default: null;
     };
+    /** Fallback URL to use if primary image fails */
+    fallbackSrc: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
     transformations: {
         type: PropType<((image: unknown) => void)[]>;
         default: () => never[];
@@ -127,9 +165,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>, {
     width: string | number;
     height: string | number;
+    src: string;
     publicId: string;
+    imagePublicId: string;
     asset: CloudinaryAsset | null;
     fallbackPublicId: string;
+    fallbackSrc: string;
     transformations: ((image: unknown) => void)[];
     alt: string;
     aspectRatio: string | number;

package/dist/src/types/core.d.ts

@@ -536,6 +536,10 @@ export interface CloudinaryTransformationStep {
 export interface CloudinaryAsset {
     /** Cloudinary public ID */
     public_id: string;
+    /** Secure URL (from Cloudinary API response) */
+    secure_url?: string;
+    /** URL (from Cloudinary API response) */
+    url?: string;
     /** Asset transformations */
     transformations?: CloudinaryTransformationStep[];
     /** Asset format */
@@ -547,12 +551,18 @@ export interface CloudinaryAsset {
  * Props for CloudinaryImage component.
  */
 export interface CloudinaryImageProps {
+    /** Direct image URL - bypasses Cloudinary URL generation */
+    src?: string;
     /** Cloudinary public ID */
     publicId?: string;
+    /** Alias for publicId (for compatibility with different naming conventions) */
+    imagePublicId?: string;
     /** Full asset object with transformations */
     asset?: CloudinaryAsset | null;
     /** Fallback public ID if primary fails */
     fallbackPublicId?: string;
+    /** Fallback URL to use if primary image fails */
+    fallbackSrc?: string;
     /** Additional transformations to apply */
     transformations?: Array<(image: CloudinaryAsset) => void>;
     /** Alt text for accessibility */

package/dist/src/views/components/LottiePage.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/src/views/components/index.d.ts

@@ -5,6 +5,7 @@ export { default as BreadcrumbPage } from './BreadcrumbPage';
 export { default as ButtonPage } from './ButtonPage';
 export { default as CloudinaryImagePage } from './CloudinaryImagePage';
 export { default as LoadingPage } from './LoadingPage';
+export { default as LottiePage } from './LottiePage';
 export { default as MenuPage } from './MenuPage';
 export { default as ModalPage } from './ModalPage';
 export { default as ProgressPage } from './ProgressPage';