@stachelock/ui 0.6.15 → 0.6.17

package/dist/maps/UiMapMarker.js

@@ -1,7 +1,7 @@
-import { defineComponent as O, defineAsyncComponent as j, inject as N, computed as a, createBlock as A, createCommentVNode as g, openBlock as i, unref as E, withCtx as R, createElementBlock as s, normalizeStyle as o, renderSlot as W, createElementVNode as m, toDisplayString as F } from "vue";
-import { m as y } from "../mapThemes-DFE9fZm3.js";
-import { _ as U } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-const V = ["src", "alt"], q = /* @__PURE__ */ O({
+import { defineComponent as G, defineAsyncComponent as x, inject as J, computed as l, createBlock as z, createCommentVNode as C, openBlock as n, unref as M, withCtx as K, createElementVNode as p, normalizeStyle as a, createElementBlock as f, toDisplayString as D } from "vue";
+import { m as L } from "../mapThemes-DFE9fZm3.js";
+import { _ as Q } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const X = ["src", "alt"], Y = /* @__PURE__ */ G({
   __name: "UiMapMarker",
   props: {
     /** Geographic position */
@@ -73,164 +73,273 @@ const V = ["src", "alt"], q = /* @__PURE__ */ O({
     ready: {
       type: Boolean,
       default: !0
+    },
+    /** Use legacy Marker instead of AdvancedMarker (no Map ID required) */
+    legacy: {
+      type: Boolean,
+      default: !1
+    },
+    /** Whether this marker represents a cluster */
+    cluster: {
+      type: Boolean,
+      default: !1
+    },
+    /** Number of items in the cluster (required when cluster=true) */
+    clusterSize: {
+      type: Number,
+      default: 0
+    },
+    /** Custom cluster color */
+    clusterColor: {
+      type: String,
+      default: void 0
     }
   },
   emits: ["click", "dragstart", "drag", "dragend", "mouseover", "mouseout"],
-  setup(l, { emit: k }) {
-    const v = j(
-      () => import("vue3-google-map").then((e) => e.AdvancedMarker)
-    ), t = l, n = k, d = N("slMapInstance", { isDark: { value: !1 } }), b = a(() => t.ready && t.visible), r = a(() => ({
-      id: t.id,
-      position: t.position,
-      title: t.title,
-      data: t.data,
-      zIndex: t.zIndex,
-      draggable: t.draggable,
-      visible: t.visible
-    })), c = a(() => t.color in y ? y[t.color] : t.color), u = a(() => {
-      const e = { sm: 16, md: 24, lg: 32 };
-      return e[t.size] || e.md;
-    }), h = a(() => ({
-      position: t.position,
-      title: t.title,
-      zIndex: t.zIndex,
-      gmpDraggable: t.draggable,
+  setup(o, { emit: w }) {
+    const I = x(
+      () => import("vue3-google-map").then((t) => t.AdvancedMarker)
+    ), O = x(
+      () => import("vue3-google-map").then((t) => t.Marker)
+    ), e = o, i = w, c = J("slMapInstance", { isDark: { value: !1 } }), m = l(() => e.ready && e.visible), $ = l(() => e.icon?.url ? "icon" : e.cluster ? "cluster" : e.pin ? "pin" : "circle"), W = l(() => e.legacy || c?.useLegacyMarkers?.value || !1), r = l(() => ({
+      id: e.id,
+      position: e.position,
+      title: e.title,
+      data: e.data,
+      zIndex: e.zIndex,
+      draggable: e.draggable,
+      visible: e.visible
+    })), u = l(() => e.color in L ? L[e.color] : e.color), s = l(() => {
+      const t = { sm: 20, md: 32, lg: 48 };
+      return t[e.size] || t.md;
+    }), B = l(() => {
+      if (!e.cluster) return {};
+      const d = Math.min(40 + Math.log(e.clusterSize) * 10, 64), g = e.clusterColor || y(e.clusterSize);
+      return {
+        width: `${d}px`,
+        height: `${d}px`,
+        backgroundColor: g,
+        borderRadius: "50%",
+        border: "4px solid white",
+        boxShadow: "0 4px 12px rgba(0,0,0,0.35), 0 0 0 2px rgba(0,0,0,0.1)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "white",
+        fontWeight: "700",
+        fontSize: e.clusterSize >= 100 ? "13px" : e.clusterSize >= 10 ? "14px" : "16px",
+        cursor: "pointer",
+        transition: "transform 0.15s ease, box-shadow 0.15s ease"
+      };
+    });
+    function y(t) {
+      return t < 10 ? "#22c55e" : t < 25 ? "#3b82f6" : t < 50 ? "#f59e0b" : t < 100 ? "#f97316" : "#ef4444";
+    }
+    const j = l(() => ({
+      position: e.position,
+      title: e.title,
+      zIndex: e.zIndex,
+      gmpDraggable: e.draggable,
       gmpClickable: !0
-    })), x = a(() => ({
+    })), R = l(() => {
+      const t = {
+        position: e.position,
+        title: e.title,
+        zIndex: e.zIndex,
+        draggable: e.draggable,
+        clickable: !0,
+        animation: e.animation ? google.maps.Animation[e.animation] : void 0
+      };
+      if (e.cluster) {
+        const g = Math.min(18 + Math.log(e.clusterSize) * 4, 28), H = e.clusterColor || y(e.clusterSize);
+        return t.icon = {
+          path: google.maps.SymbolPath.CIRCLE,
+          scale: g,
+          fillColor: H,
+          fillOpacity: 0.9,
+          strokeColor: "#ffffff",
+          strokeWeight: 3
+        }, t.label = {
+          text: String(e.clusterSize),
+          color: "#ffffff",
+          fontWeight: "bold",
+          fontSize: e.clusterSize >= 100 ? "11px" : e.clusterSize >= 10 ? "12px" : "14px"
+        }, t;
+      }
+      return e.icon?.url ? t.icon = {
+        url: e.icon.url,
+        scaledSize: e.icon.scaledSize ? new google.maps.Size(e.icon.scaledSize.width, e.icon.scaledSize.height) : void 0
+      } : e.icon?.path !== void 0 ? t.icon = {
+        path: e.icon.path,
+        scale: e.icon.scale || s.value / 2,
+        fillColor: e.icon.fillColor || u.value,
+        fillOpacity: e.icon.fillOpacity ?? 1,
+        strokeColor: e.icon.strokeColor || "#ffffff",
+        strokeWeight: e.icon.strokeWeight ?? 2
+      } : t.icon = {
+        path: google.maps.SymbolPath.CIRCLE,
+        scale: s.value / 2,
+        fillColor: u.value,
+        fillOpacity: 1,
+        strokeColor: "#ffffff",
+        strokeWeight: 2
+      }, e.label && (typeof e.label == "string" ? t.label = e.label : t.label = {
+        text: e.label.text,
+        color: e.label.color,
+        fontFamily: e.label.fontFamily,
+        fontSize: e.label.fontSize,
+        fontWeight: e.label.fontWeight
+      }), t;
+    }), E = l(() => ({
       cursor: "pointer",
       transform: "translate(-50%, -100%)"
-    })), S = a(() => ({
-      width: `${u.value}px`,
-      height: `${u.value}px`,
+    })), N = l(() => ({
+      width: `${s.value}px`,
+      height: `${s.value}px`,
       borderRadius: "50%",
-      backgroundColor: c.value,
-      border: `2px solid ${d?.isDark?.value ? "#374151" : "#ffffff"}`,
+      backgroundColor: u.value,
+      border: `2px solid ${c?.isDark?.value ? "#374151" : "#ffffff"}`,
       boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
-    })), z = a(() => ({
+    })), A = l(() => ({
       display: "flex",
       flexDirection: "column",
       alignItems: "center"
-    })), D = a(() => ({
-      width: `${u.value}px`,
-      height: `${u.value}px`,
+    })), F = l(() => ({
+      width: `${s.value}px`,
+      height: `${s.value}px`,
       borderRadius: "50% 50% 50% 0",
-      backgroundColor: c.value,
-      border: `2px solid ${d?.isDark?.value ? "#374151" : "#ffffff"}`,
+      backgroundColor: u.value,
+      border: `2px solid ${c?.isDark?.value ? "#374151" : "#ffffff"}`,
       boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
       transform: "rotate(-45deg)"
-    })), C = a(() => ({
+    })), P = l(() => ({
       width: "4px",
       height: "4px",
-      backgroundColor: c.value,
+      backgroundColor: u.value,
       marginTop: "-2px"
-    })), M = a(() => {
-      const e = t.label;
-      return e ? typeof e == "string" ? {
-        color: d?.isDark?.value ? "#f3f4f6" : "#1f2937",
+    })), T = l(() => {
+      const t = e.label;
+      return t ? typeof t == "string" ? {
+        color: c?.isDark?.value ? "#f3f4f6" : "#1f2937",
         fontSize: "10px",
         fontWeight: "600"
       } : {
-        color: e.color ?? (d?.isDark?.value ? "#f3f4f6" : "#1f2937"),
-        fontFamily: e.fontFamily ?? "inherit",
-        fontSize: e.fontSize ?? "10px",
-        fontWeight: e.fontWeight ?? "600"
+        color: t.color ?? (c?.isDark?.value ? "#f3f4f6" : "#1f2937"),
+        fontFamily: t.fontFamily ?? "inherit",
+        fontSize: t.fontSize ?? "10px",
+        fontWeight: t.fontWeight ?? "600"
       } : {};
-    }), I = a(() => t.icon?.scaledSize ? {
-      width: `${t.icon.scaledSize.width}px`,
-      height: `${t.icon.scaledSize.height}px`
+    }), U = l(() => e.icon?.scaledSize ? {
+      width: `${e.icon.scaledSize.width}px`,
+      height: `${e.icon.scaledSize.height}px`
     } : {});
-    function $(e) {
-      n("click", {
+    function V(t) {
+      i("click", {
+        marker: r.value,
+        position: e.position,
+        event: t
+      });
+    }
+    function q(t) {
+      i("click", {
         marker: r.value,
-        position: t.position,
-        event: e
+        position: t.latLng ? { lat: t.latLng.lat(), lng: t.latLng.lng() } : e.position,
+        event: t
       });
     }
-    function w(e) {
-      n("dragstart", {
+    function b(t) {
+      i("dragstart", {
         marker: r.value,
-        position: e.latLng ? { lat: e.latLng.lat(), lng: e.latLng.lng() } : t.position,
-        event: e
+        position: t.latLng ? { lat: t.latLng.lat(), lng: t.latLng.lng() } : e.position,
+        event: t
       });
     }
-    function L(e) {
-      n("drag", {
+    function k(t) {
+      i("drag", {
         marker: r.value,
-        position: e.latLng ? { lat: e.latLng.lat(), lng: e.latLng.lng() } : t.position,
-        event: e
+        position: t.latLng ? { lat: t.latLng.lat(), lng: t.latLng.lng() } : e.position,
+        event: t
       });
     }
-    function B(e) {
-      n("dragend", {
+    function h(t) {
+      i("dragend", {
         marker: r.value,
-        position: e.latLng ? { lat: e.latLng.lat(), lng: e.latLng.lng() } : t.position,
-        event: e
+        position: t.latLng ? { lat: t.latLng.lat(), lng: t.latLng.lng() } : e.position,
+        event: t
       });
     }
-    function f() {
-      n("mouseover", { marker: r.value });
+    function S() {
+      i("mouseover", { marker: r.value });
     }
-    function p() {
-      n("mouseout", { marker: r.value });
+    function v() {
+      i("mouseout", { marker: r.value });
     }
-    return (e, H) => b.value ? (i(), A(E(v), {
+    return (t, d) => m.value && W.value ? (n(), z(M(O), {
       key: 0,
-      options: h.value,
-      onClick: $,
-      onDrag: L,
-      onDragstart: w,
-      onDragend: B
+      options: R.value,
+      onClick: q,
+      onDrag: k,
+      onDragstart: b,
+      onDragend: h,
+      onMouseover: S,
+      onMouseout: v
+    }, null, 8, ["options"])) : m.value ? (n(), z(M(I), {
+      key: `adv-${$.value}`,
+      options: j.value,
+      onClick: V,
+      onDrag: k,
+      onDragstart: b,
+      onDragend: h
     }, {
-      default: R(() => [
-        l.icon?.url ? (i(), s("img", {
-          key: 1,
-          src: l.icon.url,
-          alt: l.title,
-          style: o(I.value),
-          onMouseenter: f,
-          onMouseleave: p
-        }, null, 44, V)) : (i(), s("div", {
-          key: 0,
-          class: "sl-marker-pin",
-          style: o(x.value),
-          onMouseenter: f,
-          onMouseleave: p
+      default: K(() => [
+        p("div", {
+          class: "sl-marker-content",
+          style: a(E.value),
+          onMouseenter: S,
+          onMouseleave: v
         }, [
-          W(e.$slots, "content", {}, () => [
-            l.pin ? (i(), s("div", {
+          o.icon?.url ? (n(), f("img", {
+            key: 0,
+            src: o.icon.url,
+            alt: o.title,
+            style: a(U.value)
+          }, null, 12, X)) : o.cluster ? (n(), f("div", {
+            key: 1,
+            class: "sl-cluster-marker",
+            style: a(B.value)
+          }, D(o.clusterSize), 5)) : o.pin ? (n(), f("div", {
+            key: 2,
+            class: "sl-pin-marker",
+            style: a(A.value)
+          }, [
+            p("div", {
+              class: "sl-pin-head",
+              style: a(F.value)
+            }, null, 4),
+            p("div", {
+              class: "sl-pin-point",
+              style: a(P.value)
+            }, null, 4)
+          ], 4)) : (n(), f("div", {
+            key: 3,
+            class: "sl-circle-marker",
+            style: a(N.value)
+          }, [
+            o.label ? (n(), f("span", {
               key: 0,
-              class: "sl-pin-marker",
-              style: o(z.value)
-            }, [
-              m("div", {
-                class: "sl-pin-head",
-                style: o(D.value)
-              }, null, 4),
-              m("div", {
-                class: "sl-pin-point",
-                style: o(C.value)
-              }, null, 4)
-            ], 4)) : (i(), s("div", {
-              key: 1,
-              class: "sl-circle-marker",
-              style: o(S.value)
-            }, [
-              l.label ? (i(), s("span", {
-                key: 0,
-                class: "sl-marker-label",
-                style: o(M.value)
-              }, F(typeof l.label == "string" ? l.label : l.label.text), 5)) : g("", !0)
-            ], 4))
-          ], !0)
-        ], 36))
+              class: "sl-marker-label",
+              style: a(T.value)
+            }, D(typeof o.label == "string" ? o.label : o.label.text), 5)) : C("", !0)
+          ], 4))
+        ], 36)
       ]),
-      _: 3
-    }, 8, ["options"])) : g("", !0);
+      _: 1
+    }, 8, ["options"])) : C("", !0);
   }
-}), J = /* @__PURE__ */ U(q, [["__scopeId", "data-v-fb51a81d"]]);
+}), te = /* @__PURE__ */ Q(Y, [["__scopeId", "data-v-a942df25"]]);
 export {
-  J as default
+  te as default
 };

package/dist/maps/index.js

@@ -1,7 +1,7 @@
 import { default as r } from "./GoogleMap.js";
 import { default as f } from "./UiInfoWindow.js";
 import { default as t } from "./UiMap.js";
-import { _ as d } from "../UiMapAll.vue_vue_type_script_setup_true_lang-11yT7mTH.js";
+import { _ as d } from "../UiMapAll.vue_vue_type_script_setup_true_lang-DKcK0HmT.js";
 import { default as s } from "./UiMapMarker.js";
 export {
   r as GoogleMap,

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

@@ -0,0 +1,88 @@
+/**
+ * SecureHandoffCard - Presentational component for cross-app authentication handoffs
+ *
+ * This component provides visual feedback during the secure handoff process between
+ * applications in the Stachelock ecosystem. It supports three states:
+ * - loading: Shows a spinner while connecting/verifying
+ * - success: Shows a success message while redirecting
+ * - error: Shows an error message with retry action
+ *
+ * @example
+ * ```vue
+ * <SecureHandoffCard
+ *   status="loading"
+ *   title="Connecting your session"
+ *   statusMessage="Verifying your secure session..."
+ *   @action-click="handleRetry"
+ * />
+ * ```
+ */
+export type SecureHandoffStatus = 'loading' | 'success' | 'error';
+export interface SecureHandoffCardProps {
+    /** Current status of the handoff process */
+    status: SecureHandoffStatus;
+    /** Label shown above the title (e.g., "Secure Handoff") */
+    label?: string;
+    /** Main title text */
+    title?: string;
+    /** Status message shown below the title */
+    statusMessage?: string;
+    /** Message shown on success before redirect */
+    successMessage?: string;
+    /** Error message shown when handoff fails */
+    errorMessage?: string;
+    /** Label for the action button (shown in error state) */
+    actionLabel?: string;
+    /** Use full-screen layout (min-h-screen) */
+    fullScreen?: boolean;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SecureHandoffCardProps>, {
+    status: string;
+    label: string;
+    title: string;
+    statusMessage: string;
+    successMessage: string;
+    errorMessage: string;
+    actionLabel: string;
+    fullScreen: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "action-click": () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SecureHandoffCardProps>, {
+    status: string;
+    label: string;
+    title: string;
+    statusMessage: string;
+    successMessage: string;
+    errorMessage: string;
+    actionLabel: string;
+    fullScreen: boolean;
+}>>> & Readonly<{
+    "onAction-click"?: (() => any) | undefined;
+}>, {
+    label: string;
+    errorMessage: string;
+    title: string;
+    status: SecureHandoffStatus;
+    successMessage: string;
+    actionLabel: string;
+    fullScreen: boolean;
+    statusMessage: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -22,9 +22,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>>> & Readonly<{}>, {
     label: string;
     size: ProgressSize;
-    color: ProgressColor;
     value: number;
     showLabel: boolean;
+    color: ProgressColor;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -24,9 +24,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>>> & Readonly<{}>, {
     label: string;
     size: number;
-    color: ProgressColor;
     value: number;
     showLabel: boolean;
+    color: ProgressColor;
     trackWidth: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/src/components/charts/chartTheme.d.ts

@@ -45,7 +45,35 @@ export declare const chartTypography: {
         color: string;
     };
 };
+export declare const chartTypographyDark: {
+    fontFamily: string;
+    title: {
+        fontSize: number;
+        fontWeight: number;
+        color: string;
+    };
+    subtitle: {
+        fontSize: number;
+        fontWeight: number;
+        color: string;
+    };
+    label: {
+        fontSize: number;
+        fontWeight: number;
+        color: string;
+    };
+    axis: {
+        fontSize: number;
+        fontWeight: number;
+        color: string;
+    };
+};
 export declare const baseTheme: Partial<EChartsOption>;
+export declare const baseThemeDark: Partial<EChartsOption>;
+/**
+ * Get the appropriate theme based on dark mode setting
+ */
+export declare const getTheme: (isDark: boolean) => Partial<EChartsOption>;
 export declare const lineChartConfig: Partial<EChartsOption>;
 export declare const areaChartConfig: Partial<EChartsOption>;
 export declare const barChartConfig: Partial<EChartsOption>;
@@ -135,7 +163,32 @@ declare const _default: {
             color: string;
         };
     };
+    chartTypographyDark: {
+        fontFamily: string;
+        title: {
+            fontSize: number;
+            fontWeight: number;
+            color: string;
+        };
+        subtitle: {
+            fontSize: number;
+            fontWeight: number;
+            color: string;
+        };
+        label: {
+            fontSize: number;
+            fontWeight: number;
+            color: string;
+        };
+        axis: {
+            fontSize: number;
+            fontWeight: number;
+            color: string;
+        };
+    };
     baseTheme: Partial<EChartsOption>;
+    baseThemeDark: Partial<EChartsOption>;
+    getTheme: (isDark: boolean) => Partial<EChartsOption>;
     lineChartConfig: Partial<EChartsOption>;
     areaChartConfig: Partial<EChartsOption>;
     barChartConfig: Partial<EChartsOption>;

package/dist/src/components/formatters/DateFormatter.d.ts

@@ -105,8 +105,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
         date: boolean;
         secondaryRelativeDate: boolean;
     };
-    format: string;
     space: boolean;
+    format: string;
     secondaryRelativeDate: DateInputValue;
     secondarySuffix: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {

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

@@ -1,5 +1,6 @@
 export { default as CloudinaryImage } from './CloudinaryImage';
 export { default as LottieAnimation } from './LottieAnimation';
+export { default as SecureHandoffCard } from './SecureHandoffCard';
 export { default as ThemeDebugModal } from './ThemeDebugModal';
 export { default as Avatar } from './UiAvatar';
 export { default as Badge } from './UiBadge';
@@ -31,6 +32,7 @@ export * from './loading';
 export * from './maps';
 export * from './modals';
 export * from './notifications';
+export * from './palettes';
 export * from './profile-inputs';
 export * from './profiles';
 export * from './stepper';

package/dist/src/components/inputs/DatepickerInput.d.ts

@@ -267,7 +267,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
         default: undefined;
     };
     weekNumbers: {
-        type: PropType<boolean | "iso" | "local">;
+        type: PropType<boolean | "local" | "iso">;
         default: boolean;
     };
     utc: {
@@ -615,7 +615,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
         default: undefined;
     };
     weekNumbers: {
-        type: PropType<boolean | "iso" | "local">;
+        type: PropType<boolean | "local" | "iso">;
         default: boolean;
     };
     utc: {
@@ -761,7 +761,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
         solo?: boolean | undefined;
         static?: boolean | undefined;
     };
-    weekNumbers: boolean | "iso" | "local";
+    weekNumbers: boolean | "local" | "iso";
     hoursIncrement: number;
     minutesIncrement: number;
     secondsIncrement: number;