@stachelock/ui 0.5.0 → 0.5.2

package/dist/{ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-DkABeWJt.js → ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-CKCoHD1o.js}

@@ -1,12 +1,12 @@
-import { defineComponent as $, ref as m, computed as n, onMounted as j, onBeforeUnmount as B, createElementBlock as o, openBlock as a, createElementVNode as r, createVNode as U, createCommentVNode as u, normalizeStyle as v, normalizeClass as k, renderSlot as f, createBlock as I, toDisplayString as c, Transition as R, withCtx as S } from "vue";
-import M from "./components/CloudinaryImage.js";
-const P = { class: "sl-relative sl-flex sl-items-center sl-gap-3" }, T = ["aria-expanded"], V = ["src", "alt"], O = {
-  key: 2,
+import { defineComponent as B, ref as m, computed as o, onMounted as I, onBeforeUnmount as U, createElementBlock as n, openBlock as a, createElementVNode as r, createVNode as j, createCommentVNode as u, normalizeStyle as v, normalizeClass as k, renderSlot as f, createBlock as R, toDisplayString as c, Transition as S, withCtx as M } from "vue";
+import P from "./components/CloudinaryImage.js";
+const T = { class: "sl-relative sl-flex sl-items-center sl-gap-3" }, V = ["aria-expanded"], O = {
+  key: 1,
   class: "sl-w-full sl-h-full sl-inline-flex sl-items-center sl-justify-center sl-bg-stachelock-200 dark:sl-bg-stachelock-700"
 }, A = { class: "sl-p-4 sl-border-b sl-border-gray-200 dark:sl-border-slate-700" }, D = { class: "sl-text-sm sl-font-medium sl-text-gray-900 dark:sl-text-white" }, H = { class: "sl-text-xs sl-text-gray-500 dark:sl-text-slate-400" }, K = {
   key: 0,
   class: "sl-py-1"
-}, J = /* @__PURE__ */ $({
+}, J = /* @__PURE__ */ B({
   __name: "ProfileHeaderAvatar",
   props: {
     userName: {},
@@ -22,62 +22,58 @@ const P = { class: "sl-relative sl-flex sl-items-center sl-gap-3" }, T = ["aria-
   },
   emits: ["logout", "menu-toggle"],
   setup(e, { expose: y, emit: b }) {
-    const s = e, d = b, l = m(!1), x = m(null), p = m(null), w = n(() => s.userName ? s.userName.split(" ").map((t) => t[0]).join("").toUpperCase().slice(0, 2) : "U"), C = n(() => `hover:sl-ring-2 hover:${s.ringColorClass}`), z = n(() => `sl-ring-2 ${s.ringColorClass}`), N = n(() => s.size < 32 ? "sl-text-xs" : s.size < 48 ? "sl-text-sm" : "sl-text-base"), E = n(() => ({
+    const s = e, d = b, l = m(!1), x = m(null), p = m(null), w = o(() => !!s.imagePublicId || !!s.imageUrl), C = o(() => s.userName ? s.userName.split(" ").map((t) => t[0]).join("").toUpperCase().slice(0, 2) : "U"), z = o(() => `hover:sl-ring-2 hover:${s.ringColorClass}`), E = o(() => `sl-ring-2 ${s.ringColorClass}`), L = o(() => s.size < 32 ? "sl-text-xs" : s.size < 48 ? "sl-text-sm" : "sl-text-base"), N = o(() => ({
       top: s.menuTop,
       right: s.menuRight
     })), g = () => {
       l.value = !l.value, d("menu-toggle", l.value);
     }, i = () => {
       l.value && (l.value = !1, d("menu-toggle", !1));
-    }, L = () => {
+    }, $ = () => {
       i(), d("logout");
     }, h = (t) => {
       t.key === "Escape" && i();
     };
-    return j(() => {
+    return I(() => {
       document.addEventListener("keydown", h);
-    }), B(() => {
+    }), U(() => {
       document.removeEventListener("keydown", h);
     }), y({
       toggleMenu: g,
       closeMenu: i,
       isMenuOpen: l
-    }), (t, q) => (a(), o("div", P, [
+    }), (t, q) => (a(), n("div", T, [
       r("button", {
         ref_key: "avatarButton",
         ref: x,
         type: "button",
         onClick: g,
         class: k(["sl-relative sl-inline-flex sl-items-center sl-justify-center sl-rounded-full sl-overflow-hidden sl-transition-all sl-flex-shrink-0 focus:sl-outline-none", [
-          C.value,
-          { [z.value]: l.value }
+          z.value,
+          { [E.value]: l.value }
         ]]),
         style: v({ width: `${e.size}px`, height: `${e.size}px` }),
         "aria-expanded": l.value,
         "aria-haspopup": "true"
       }, [
         f(t.$slots, "avatar", {}, () => [
-          e.imagePublicId ? (a(), I(M, {
+          w.value ? (a(), R(P, {
             key: 0,
+            src: e.imageUrl,
             "public-id": e.imagePublicId,
             alt: e.userName,
             width: e.size,
             height: e.size,
             "custom-classes": { image: { "sl-w-full sl-h-full sl-object-cover sl-object-center": !0 } },
             skeleton: "user"
-          }, null, 8, ["public-id", "alt", "width", "height"])) : e.imageUrl ? (a(), o("img", {
-            key: 1,
-            src: e.imageUrl,
-            alt: e.userName,
-            class: "sl-w-full sl-h-full sl-object-cover sl-object-center"
-          }, null, 8, V)) : (a(), o("div", O, [
+          }, null, 8, ["src", "public-id", "alt", "width", "height"])) : (a(), n("div", O, [
             r("span", {
-              class: k(["sl-font-semibold sl-text-stachelock-700 dark:sl-text-stachelock-200", N.value])
-            }, c(w.value), 3)
+              class: k(["sl-font-semibold sl-text-stachelock-700 dark:sl-text-stachelock-200", L.value])
+            }, c(C.value), 3)
           ]))
         ])
-      ], 14, T),
-      U(R, {
+      ], 14, V),
+      j(S, {
         "enter-active-class": "sl-transition sl-ease-out sl-duration-100",
         "enter-from-class": "sl-transform sl-opacity-0 sl-scale-95",
         "enter-to-class": "sl-transform sl-opacity-100 sl-scale-100",
@@ -85,13 +81,13 @@ const P = { class: "sl-relative sl-flex sl-items-center sl-gap-3" }, T = ["aria-
         "leave-from-class": "sl-transform sl-opacity-100 sl-scale-100",
         "leave-to-class": "sl-transform sl-opacity-0 sl-scale-95"
       }, {
-        default: S(() => [
-          l.value ? (a(), o("div", {
+        default: M(() => [
+          l.value ? (a(), n("div", {
             key: 0,
             ref_key: "menuRef",
             ref: p,
             class: "sl-absolute sl-bg-white dark:sl-bg-slate-800 sl-rounded-lg sl-shadow-lg sl-border sl-border-gray-200 dark:sl-border-slate-700 sl-z-50 sl-min-w-max sl-overflow-hidden",
-            style: v(E.value),
+            style: v(N.value),
             role: "menu",
             "aria-orientation": "vertical"
           }, [
@@ -101,13 +97,13 @@ const P = { class: "sl-relative sl-flex sl-items-center sl-gap-3" }, T = ["aria-
                 r("p", H, c(e.userEmail), 1)
               ])
             ]),
-            t.$slots["menu-items"] ? (a(), o("div", K, [
+            t.$slots["menu-items"] ? (a(), n("div", K, [
               f(t.$slots, "menu-items")
             ])) : u("", !0),
-            e.showLogout ? (a(), o("button", {
+            e.showLogout ? (a(), n("button", {
               key: 1,
               type: "button",
-              onClick: L,
+              onClick: $,
               class: "sl-w-full sl-text-left sl-px-4 sl-py-2 sl-text-sm sl-text-red-600 dark:sl-text-red-400 hover:sl-bg-red-50 dark:hover:sl-bg-red-900/20 sl-transition-colors",
               role: "menuitem"
             }, c(e.logoutLabel), 1)) : u("", !0)
@@ -115,7 +111,7 @@ const P = { class: "sl-relative sl-flex sl-items-center sl-gap-3" }, T = ["aria-
         ]),
         _: 3
       }),
-      l.value ? (a(), o("div", {
+      l.value ? (a(), n("div", {
         key: 0,
         class: "sl-fixed sl-inset-0 sl-z-40",
         onClick: i,
@@ -127,4 +123,4 @@ const P = { class: "sl-relative sl-flex sl-items-center sl-gap-3" }, T = ["aria-
 export {
   J as _
 };
-//# sourceMappingURL=ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-DkABeWJt.js.map
+//# sourceMappingURL=ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-CKCoHD1o.js.map

package/dist/ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-CKCoHD1o.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-CKCoHD1o.js","sources":["../src/components/layouts/ProfileHeaderAvatar.vue"],"sourcesContent":["<!--\n  @component ProfileHeaderAvatar\n  @description User avatar with dropdown menu for profile actions.\n  \n  A flexible user avatar component that displays a profile image (via Cloudinary)\n  or initials fallback, with an expandable dropdown menu showing user info and actions.\n  \n  @props\n  - userName (string): Display name of the user\n  - userEmail (string): Email address of the user\n  - imagePublicId (string, optional): Cloudinary public_id for profile image\n  - imageUrl (string, optional): Direct URL for profile image (fallback if no publicId)\n  - showLogout (boolean): Show logout button in dropdown (default: true)\n  - logoutLabel (string): Label for logout button (default: 'Log Out')\n  - size (number): Avatar size in pixels (default: 40)\n  - ringColor (string): Tailwind ring color class for hover/active state\n  - menuPosition (object): Position overrides for dropdown menu\n  \n  @emits\n  - logout: Emitted when logout button is clicked\n  - menu-toggle: Emitted when menu is opened/closed with boolean state\n  \n  @slots\n  - menu-header: Custom header content in dropdown (replaces default name/email)\n  - menu-items: Additional menu items between user info and logout\n  - avatar: Custom avatar content (replaces default image/initials)\n  \n  @example\n  <ProfileHeaderAvatar\n    user-name=\"John Doe\"\n    user-email=\"john@example.com\"\n    image-public-id=\"users/john-doe-avatar\"\n    @logout=\"handleLogout\"\n  />\n-->\n<template>\n  <div class=\"sl-relative sl-flex sl-items-center sl-gap-3\">\n    <!-- User Avatar Button -->\n    <button \n      ref=\"avatarButton\"\n      type=\"button\"\n      @click=\"toggleMenu\"\n      class=\"sl-relative sl-inline-flex sl-items-center sl-justify-center sl-rounded-full sl-overflow-hidden sl-transition-all sl-flex-shrink-0 focus:sl-outline-none\"\n      :class=\"[\n        ringClasses,\n        { [activeRingClass]: isMenuOpen }\n      ]\"\n      :style=\"{ width: `${size}px`, height: `${size}px` }\"\n      :aria-expanded=\"isMenuOpen\"\n      aria-haspopup=\"true\"\n    >\n      <slot name=\"avatar\">\n        <!-- Cloudinary image if public_id or URL available -->\n        <CloudinaryImage \n          v-if=\"hasImage\" \n          :src=\"imageUrl\"\n          :public-id=\"imagePublicId\" \n          :alt=\"userName\" \n          :width=\"size\"\n          :height=\"size\" \n          :custom-classes=\"{ image: { 'sl-w-full sl-h-full sl-object-cover sl-object-center': true } }\" \n          skeleton=\"user\" \n        />\n        <!-- Initials fallback -->\n        <div \n          v-else \n          class=\"sl-w-full sl-h-full sl-inline-flex sl-items-center sl-justify-center sl-bg-stachelock-200 dark:sl-bg-stachelock-700\"\n        >\n          <span \n            class=\"sl-font-semibold sl-text-stachelock-700 dark:sl-text-stachelock-200\"\n            :class=\"initialsTextSize\"\n          >\n            {{ computedInitials }}\n          </span>\n        </div>\n      </slot>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <Transition\n      enter-active-class=\"sl-transition sl-ease-out sl-duration-100\"\n      enter-from-class=\"sl-transform sl-opacity-0 sl-scale-95\"\n      enter-to-class=\"sl-transform sl-opacity-100 sl-scale-100\"\n      leave-active-class=\"sl-transition sl-ease-in sl-duration-75\"\n      leave-from-class=\"sl-transform sl-opacity-100 sl-scale-100\"\n      leave-to-class=\"sl-transform sl-opacity-0 sl-scale-95\"\n    >\n      <div \n        v-if=\"isMenuOpen\"\n        ref=\"menuRef\"\n        class=\"sl-absolute sl-bg-white dark:sl-bg-slate-800 sl-rounded-lg sl-shadow-lg sl-border sl-border-gray-200 dark:sl-border-slate-700 sl-z-50 sl-min-w-max sl-overflow-hidden\"\n        :style=\"menuStyles\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n      >\n        <!-- Header with user info -->\n        <div class=\"sl-p-4 sl-border-b sl-border-gray-200 dark:sl-border-slate-700\">\n          <slot name=\"menu-header\">\n            <p class=\"sl-text-sm sl-font-medium sl-text-gray-900 dark:sl-text-white\">{{ userName }}</p>\n            <p class=\"sl-text-xs sl-text-gray-500 dark:sl-text-slate-400\">{{ userEmail }}</p>\n          </slot>\n        </div>\n        \n        <!-- Custom menu items slot -->\n        <div v-if=\"$slots['menu-items']\" class=\"sl-py-1\">\n          <slot name=\"menu-items\" />\n        </div>\n        \n        <!-- Logout button -->\n        <button \n          v-if=\"showLogout\"\n          type=\"button\"\n          @click=\"handleLogout\"\n          class=\"sl-w-full sl-text-left sl-px-4 sl-py-2 sl-text-sm sl-text-red-600 dark:sl-text-red-400 hover:sl-bg-red-50 dark:hover:sl-bg-red-900/20 sl-transition-colors\"\n          role=\"menuitem\"\n        >\n          {{ logoutLabel }}\n        </button>\n      </div>\n    </Transition>\n\n    <!-- Backdrop for closing menu -->\n    <div \n      v-if=\"isMenuOpen\" \n      class=\"sl-fixed sl-inset-0 sl-z-40\" \n      @click=\"closeMenu\" \n      aria-hidden=\"true\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * ProfileHeaderAvatar - User avatar with dropdown menu\n * \n * @module components/layouts/ProfileHeaderAvatar\n */\nimport { ref, computed, onMounted, onBeforeUnmount, type CSSProperties } from 'vue';\nimport CloudinaryImage from '../CloudinaryImage.vue';\n\ninterface Props {\n  /** Display name of the user */\n  userName: string;\n  /** Email address of the user */\n  userEmail?: string;\n  /** Cloudinary public_id for profile image */\n  imagePublicId?: string;\n  /** Direct URL for profile image (fallback if no publicId) */\n  imageUrl?: string;\n  /** Show logout button in dropdown */\n  showLogout?: boolean;\n  /** Label for logout button */\n  logoutLabel?: string;\n  /** Avatar size in pixels */\n  size?: number;\n  /** Custom ring color class for hover/active state */\n  ringColorClass?: string;\n  /** Menu position from top */\n  menuTop?: string;\n  /** Menu position from right */\n  menuRight?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  userEmail: '',\n  showLogout: true,\n  logoutLabel: 'Log Out',\n  size: 40,\n  ringColorClass: 'sl-ring-stachelock-400',\n  menuTop: '3rem',\n  menuRight: '0',\n});\n\nconst emit = defineEmits<{\n  /** Emitted when logout button is clicked */\n  logout: [];\n  /** Emitted when menu is opened/closed */\n  'menu-toggle': [isOpen: boolean];\n}>();\n\nconst isMenuOpen = ref(false);\nconst avatarButton = ref<HTMLButtonElement | null>(null);\nconst menuRef = ref<HTMLDivElement | null>(null);\n\n// Check if we have any image source\nconst hasImage = computed(() => {\n  return !!props.imagePublicId || !!props.imageUrl;\n});\n\n// Computed initials from user name\nconst computedInitials = computed(() => {\n  if (!props.userName) return 'U';\n  return props.userName\n    .split(' ')\n    .map((n: string) => n[0])\n    .join('')\n    .toUpperCase()\n    .slice(0, 2);\n});\n\n// Ring classes for hover and active states\nconst ringClasses = computed(() => {\n  return `hover:sl-ring-2 hover:${props.ringColorClass}`;\n});\n\nconst activeRingClass = computed(() => {\n  return `sl-ring-2 ${props.ringColorClass}`;\n});\n\n// Text size based on avatar size\nconst initialsTextSize = computed(() => {\n  if (props.size < 32) return 'sl-text-xs';\n  if (props.size < 48) return 'sl-text-sm';\n  return 'sl-text-base';\n});\n\n// Menu positioning styles\nconst menuStyles = computed((): CSSProperties => ({\n  top: props.menuTop,\n  right: props.menuRight,\n}));\n\n// Toggle menu open/close\nconst toggleMenu = () => {\n  isMenuOpen.value = !isMenuOpen.value;\n  emit('menu-toggle', isMenuOpen.value);\n};\n\n// Close menu\nconst closeMenu = () => {\n  if (isMenuOpen.value) {\n    isMenuOpen.value = false;\n    emit('menu-toggle', false);\n  }\n};\n\n// Handle logout click\nconst handleLogout = () => {\n  closeMenu();\n  emit('logout');\n};\n\n// Handle escape key to close menu\nconst handleEscapeKey = (event: KeyboardEvent) => {\n  if (event.key === 'Escape') {\n    closeMenu();\n  }\n};\n\nonMounted(() => {\n  document.addEventListener('keydown', handleEscapeKey);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', handleEscapeKey);\n});\n\n// Expose methods for parent components\ndefineExpose({\n  toggleMenu,\n  closeMenu,\n  isMenuOpen,\n});\n</script>\n"],"names":["props","__props","emit","__emit","isMenuOpen","ref","avatarButton","menuRef","hasImage","computed","computedInitials","n","ringClasses","activeRingClass","initialsTextSize","menuStyles","toggleMenu","closeMenu","handleLogout","handleEscapeKey","event","onMounted","onBeforeUnmount","__expose","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeStyle","_renderSlot","_ctx","_createBlock","CloudinaryImage","_hoisted_3","_normalizeClass","_createVNode","_Transition","_hoisted_4","_hoisted_5","_toDisplayString","_hoisted_6","$slots","_hoisted_7"],"mappings":"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"}

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":";;;AAEe,SAASA,EAAOC,GAAMC,GAAQ;AAC3C,SAAQC,EAAU,GAAIC,EAAoB,OAAO;AAAA,IAC/C,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,eAAe;AAAA,IACf,aAAa;AAAA,EACjB,GAAK;AAAA,IACDC,EAAoB,QAAQ;AAAA,MAC1B,aAAa;AAAA,MACb,GAAG;AAAA,MACH,aAAa;AAAA,IACnB,CAAK;AAAA,EACL,CAAG;AACH;ACde,SAASL,EAAOC,GAAMC,GAAQ;AAC3C,SAAQC,EAAU,GAAIC,EAAoB,OAAO;AAAA,IAC/C,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,eAAe;AAAA,IACf,aAAa;AAAA,EACjB,GAAK;AAAA,IACDC,EAAoB,QAAQ;AAAA,MAC1B,aAAa;AAAA,MACb,GAAG;AAAA,MACH,aAAa;AAAA,IACnB,CAAK;AAAA,EACL,CAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC4FA,UAAMC,IAAmBC,EAItB,cAAc,EAAE,GAUbC,IAAcC,EAAI,EAAK,GACvBC,IAAaD,EAAI,EAAK,GACtBE,IAAYF,EAAI,EAAI,GAEpBG,IAAOC,GAKPC,IAAQC,GAgFRC,IAAY,CAACC,MACZA,IACEA,EAAM,WAAW,SAAS,KAAKA,EAAM,WAAW,UAAU,KAAKA,EAAM,WAAW,IAAI,IADxE,IAKfC,IAAYC,EAAS,MAErBL,EAAM,OAAOE,EAAUF,EAAM,GAAG,IAC3BA,EAAM,MAIXA,EAAM,OAAO,aACRA,EAAM,MAAM,aAEhBA,EAAM,OAAe,MAChBA,EAAM,MAAc,MAI1BA,EAAM,YAAYE,EAAUF,EAAM,QAAQ,IACrCA,EAAM,WAEXA,EAAM,iBAAiBE,EAAUF,EAAM,aAAa,IAC/CA,EAAM,gBAGR,IACR,GAGKM,IAAoBD,EAAS,MAE7BD,EAAU,QAAc,OAExBJ,EAAM,OAAO,YACRA,EAAM,MAAM,YAEdA,EAAM,iBAAiBA,EAAM,YAAYA,EAAM,oBAAoB,IAC3E,GAGKO,IAAyBF,EAAS,MAAM;AAC5C,UAAI,CAACC,EAAkB,MAAO,QAAO;AAErC,YAAME,IAAYhB,GAAkB,aAAa,QAC3CiB,IAAUjB,GAAkB,WAAW,8BAA8BgB,CAAS,iBAG9EE,IAA4B,CAAA;AAGlC,MAAIV,EAAM,SAASA,EAAM,UAAU,UACjCU,EAAgB,KAAK,KAAKV,EAAM,KAAK,EAAE,GAErCA,EAAM,UAAUA,EAAM,WAAW,UACnCU,EAAgB,KAAK,KAAKV,EAAM,MAAM,EAAE,GAItCA,EAAM,WACRU,EAAgB,KAAK,KAAKV,EAAM,OAAO,EAAE,GAIvCA,EAAM,oBACRU,EAAgB,KAAK,OAAOV,EAAM,gBAAgB,EAAE,GAItDU,EAAgB,KAAK,QAAQ,GAG7BA,EAAgB,KAAK,QAAQ;AAE7B,YAAMC,IAAkBD,EAAgB,KAAK,GAAG;AAEhD,aAAO,GAAGD,CAAO,IAAIE,CAAe,IAAIL,EAAkB,KAAK;AAAA,IACjE,CAAC,GAGKM,IAAcP,EAAS,MAEvBD,EAAU,QACLA,EAAU,QAIZG,EAAuB,KAC/B,GAGKM,IAAoBR,EAAS,MAC1BL,EAAM,aAAa,SAASc,IAAiBC,CACrD,GAGKC,IAAmBX,EAAS,MAAM;AACtC,YAAMY,IAAgC,CAAA;AAEtC,aAAIjB,EAAM,SAASA,EAAM,UAAU,WACjCiB,EAAM,QAAQ,OAAOjB,EAAM,SAAU,WAAW,GAAGA,EAAM,KAAK,OAAOA,EAAM,QAEzEA,EAAM,UAAUA,EAAM,WAAW,WACnCiB,EAAM,SAAS,OAAOjB,EAAM,UAAW,WAAW,GAAGA,EAAM,MAAM,OAAOA,EAAM,SAE5EA,EAAM,gBACRiB,EAAM,cAAc,OAAOjB,EAAM,WAAW,IAGvCiB;AAAA,IACT,CAAC,GAEKC,IAAmBb,EAAS,OAAO;AAAA,MACvC,kCAAkC;AAAA,MAClC,GAAGL,EAAM,eAAe;AAAA,IAAA,EACxB,GAEImB,IAAwBd,EAAS,OAAO;AAAA,MAC5C,wCAAwC;AAAA,MACxC,GAAGL,EAAM,eAAe;AAAA,IAAA,EACxB,GAEIoB,IAAwBf,EAAS,OAAO;AAAA,MAC5C,wCAAwC;AAAA,MACxC,GAAGL,EAAM,eAAe;AAAA,IAAA,EACxB,GAEIqB,IAAqBhB,EAAS,OAAO;AAAA,MACzC,uCAAuC;AAAA,MACvC,GAAGL,EAAM,eAAe;AAAA,IAAA,EACxB,GAEIsB,IAAqBjB,EAAS,OAAO;AAAA,MACzC,WAAW;AAAA,IAAA,EACX,GAGIkB,IAAc,MAAM;AACxB,MAAA7B,EAAY,QAAQ,IACpBE,EAAW,QAAQ,IACnBE,EAAK,sBAAsB,EAAI;AAAA,IACjC,GAEM0B,IAAe,CAACC,MAAiB;AACrC,MAAK5B,EAAU,UAEfD,EAAW,QAAQ,IACnBF,EAAY,QAAQ,IACpBI,EAAK,SAAS2B,CAAK;AAAA,IACrB;AAGA,WAAAC;AAAA,MACE,MAAMd,EAAY;AAAA,MAClB,MAAM;AACJ,QAAAlB,EAAY,QAAQ,IACpBE,EAAW,QAAQ;AAAA,MACrB;AAAA,IAAA,GAIF+B,EAAU,MAAM;AACd,MAAA9B,EAAU,QAAQ;AAAA,IACpB,CAAC,GAED+B,EAAY,MAAM;AAChB,MAAA/B,EAAU,QAAQ;AAAA,IACpB,CAAC,mBA9UCP,EAwBM,OAAA;AAAA,MAxBA,SAAO0B,EAAA,KAAgB;AAAA,MAAG,SAAOE,EAAA,KAAgB;AAAA,IAAA;MAErDW,EAAAtC,EAIM,OAJNuC,GAIM;AAAA,QAHJvC,EAEM,OAAA;AAAA,UAFD,MAAK;AAAA,UAAU,gCAA8BU,EAAA,MAAA,CAAK,CAAA;AAAA,QAAA;WACrDZ,KAAA0C,EAAoEC,EAApDnB,EAAA,KAAiB,GAAA;AAAA,YAAG,SAAOM,EAAA,KAAqB;AAAA,UAAA;;;QAFtD,CAAAc,GAAA,CAAAvC,EAAA,UAAgBE,EAAA,KAAU;AAAA,MAAA;MAOxCiC,EAAAtC,EAEM,OAFN2C,GAEM;AAAA,SADJ7C,KAAA0C,EAAoEC,EAApDnB,EAAA,KAAiB,GAAA;AAAA,UAAG,SAAOO,EAAA,KAAqB;AAAA,QAAA;;QADrD,CAAAa,GAAArC,EAAA,UAAeF,EAAA,KAAW;AAAA,MAAA;MAK5BkB,EAAA,SAAef,EAAA,QAA1BgC,GAAAxC,KAAAC,EASM,OATN6C,GASM;AAAA,QARJ5C,EAOE,OAAA;AAAA,UANC,KAAKqB,EAAA;AAAA,UACL,KAAKX,EAAA;AAAA,UACL,QAAMsB;AAAA,UACN,SAAOC;AAAA,UACP,SAAOH,EAAA,KAAkB;AAAA,UACzB,SAAOC,EAAA,KAAkB;AAAA,QAAA;;YAPe5B,EAAA,KAAW;AAAA,MAAA;;;;;;","x_google_ignoreList":[0,1]}

package/dist/index.js

@@ -58,7 +58,7 @@ import { _ as So } from "./DefaultLayout.vue_vue_type_script_setup_true_lang-BZA
 import { _ as Io } from "./HeaderLayout.vue_vue_type_script_setup_true_lang-BY2G6hCc.js";
 import { _ as Vo } from "./NavigationGroup.vue_vue_type_script_setup_true_lang-BWq5fpEm.js";
 import { _ as Ao } from "./NavigationItem.vue_vue_type_script_setup_true_lang-C8aX-84Q.js";
-import { _ as Lo } from "./ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-DkABeWJt.js";
+import { _ as Lo } from "./ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-CKCoHD1o.js";
 import { _ as Fo } from "./ProjectLogo.vue_vue_type_script_setup_true_lang-DYjp-RNh.js";
 import { _ as zo } from "./SidebarLayout.vue_vue_type_script_setup_true_lang-BJ5jadgZ.js";
 import { _ as No } from "./UiMapAll.vue_vue_type_script_setup_true_lang-CMAyvJMk.js";

package/dist/layouts/ProfileHeaderAvatar.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-DkABeWJt.js";
+import { _ as f } from "../ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-CKCoHD1o.js";
 export {
   f as default
 };

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;