vistaview 1.0.3 → 2.0.0

package/frameworks/svelte/dist/VistaView.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { VistaOpt, VistaInterface } from 'vistaview';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const VistaView: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    selector?: string | undefined;
+    options?: VistaOpt | undefined;
+    id?: string | undefined;
+    vistaRef?: ((obj: {
+        vistaView: VistaInterface | null;
+        container: HTMLElement | null;
+    } | null) => void) | undefined | undefined;
+    getApi?: (() => {
+        vistaView: VistaInterface | null;
+        container: HTMLDivElement | null;
+    }) | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {
+    getApi: () => {
+        vistaView: VistaInterface | null;
+        container: HTMLDivElement | null;
+    };
+}, string>;
+type VistaView = InstanceType<typeof VistaView>;
+export default VistaView;

package/frameworks/svelte/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as VistaView } from "./VistaView.svelte";
+export { useVistaView } from "./use-vistaview.js";
+export type { VistaViewProps, VistaComponentRef } from "./types.js";

package/frameworks/svelte/dist/index.js

@@ -0,0 +1,2 @@
+export { default as VistaView } from "./VistaView.svelte";
+export { useVistaView } from "./use-vistaview.js";

package/frameworks/svelte/dist/types.d.ts

@@ -0,0 +1,14 @@
+import type { VistaInterface, VistaOpt } from 'vistaview';
+export interface VistaViewProps {
+    selector?: string;
+    options?: VistaOpt;
+    id?: string;
+    vistaRef?: (obj: {
+        vistaView: VistaInterface | null;
+        container: HTMLElement | null;
+    } | null) => void;
+}
+export type VistaComponentRef = {
+    vistaView: VistaInterface | null;
+    container: HTMLElement | null;
+} | null;

package/frameworks/svelte/dist/types.js

@@ -0,0 +1 @@
+export {};

package/frameworks/svelte/dist/use-vistaview.d.ts

@@ -0,0 +1,2 @@
+import type { VistaParams, VistaInterface } from 'vistaview';
+export declare function useVistaView(options: VistaParams): VistaInterface;

package/frameworks/svelte/dist/use-vistaview.js

@@ -0,0 +1,24 @@
+import { onMount, onDestroy } from 'svelte';
+import { vistaView } from 'vistaview';
+export function useVistaView(options) {
+    let instance = null;
+    onMount(() => {
+        instance = vistaView(options);
+    });
+    onDestroy(() => {
+        instance?.destroy();
+        instance = null;
+    });
+    return {
+        open: (i = 0) => instance?.open(i),
+        close: () => instance?.close() ?? Promise.resolve(),
+        reset: () => instance?.reset(),
+        next: () => instance?.next(),
+        prev: () => instance?.prev(),
+        zoomIn: () => instance?.zoomIn(),
+        zoomOut: () => instance?.zoomOut(),
+        getCurrentIndex: () => instance?.getCurrentIndex() ?? -1,
+        view: (i) => instance?.view(i),
+        destroy: () => instance?.destroy(),
+    };
+}

package/frameworks/svelte/dist/use-vistaview.test.d.ts

@@ -0,0 +1 @@
+export {};

package/frameworks/svelte/dist/use-vistaview.test.js

@@ -0,0 +1,115 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/svelte';
+import HookHarness from '../HookHarness.svelte';
+import { useVistaView } from './use-vistaview';
+const { mockVistaView, mockInstance } = vi.hoisted(() => {
+    const mockInstance = {
+        open: vi.fn(),
+        close: vi.fn(() => Promise.resolve()),
+        reset: vi.fn(),
+        next: vi.fn(),
+        prev: vi.fn(),
+        zoomIn: vi.fn(),
+        zoomOut: vi.fn(),
+        getCurrentIndex: vi.fn(() => -1),
+        view: vi.fn(),
+        destroy: vi.fn(),
+    };
+    return {
+        mockVistaView: vi.fn(() => mockInstance),
+        mockInstance,
+    };
+});
+vi.mock('vistaview', () => ({
+    vistaView: mockVistaView,
+}));
+function createWrapper(options = {}) {
+    let api;
+    const { unmount } = render(HookHarness, {
+        props: {
+            options: options,
+            onReady: (a) => {
+                api = a;
+            },
+        },
+    });
+    return { getApi: () => api, unmount };
+}
+describe('useVistaView', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    it('returns the full VistaInterface shape', () => {
+        const { getApi } = createWrapper({ elements: '#gallery a' });
+        const api = getApi();
+        expect(api).toHaveProperty('open');
+        expect(api).toHaveProperty('close');
+        expect(api).toHaveProperty('reset');
+        expect(api).toHaveProperty('next');
+        expect(api).toHaveProperty('prev');
+        expect(api).toHaveProperty('zoomIn');
+        expect(api).toHaveProperty('zoomOut');
+        expect(api).toHaveProperty('getCurrentIndex');
+        expect(api).toHaveProperty('view');
+        expect(api).toHaveProperty('destroy');
+    });
+    it('passes options to vistaView on mount', () => {
+        createWrapper({ elements: '#gallery a' });
+        expect(mockVistaView).toHaveBeenCalledWith({ elements: '#gallery a' });
+    });
+    it('delegates open to the core instance', () => {
+        const { getApi } = createWrapper({ elements: '#gallery a' });
+        getApi().open(1);
+        expect(mockInstance.open).toHaveBeenCalledWith(1);
+    });
+    it('delegates close to the core instance', async () => {
+        const { getApi } = createWrapper({ elements: '#gallery a' });
+        await getApi().close();
+        expect(mockInstance.close).toHaveBeenCalled();
+    });
+    it('delegates reset to the core instance', () => {
+        const { getApi } = createWrapper({ elements: '#gallery a' });
+        getApi().reset();
+        expect(mockInstance.reset).toHaveBeenCalled();
+    });
+    it('delegates next to the core instance', () => {
+        const { getApi } = createWrapper({ elements: '#gallery a' });
+        getApi().next();
+        expect(mockInstance.next).toHaveBeenCalled();
+    });
+    it('delegates prev to the core instance', () => {
+        const { getApi } = createWrapper({ elements: '#gallery a' });
+        getApi().prev();
+        expect(mockInstance.prev).toHaveBeenCalled();
+    });
+    it('delegates zoomIn to the core instance', () => {
+        const { getApi } = createWrapper({ elements: '#gallery a' });
+        getApi().zoomIn();
+        expect(mockInstance.zoomIn).toHaveBeenCalled();
+    });
+    it('delegates zoomOut to the core instance', () => {
+        const { getApi } = createWrapper({ elements: '#gallery a' });
+        getApi().zoomOut();
+        expect(mockInstance.zoomOut).toHaveBeenCalled();
+    });
+    it('delegates getCurrentIndex to the core instance', () => {
+        const { getApi } = createWrapper({ elements: '#gallery a' });
+        expect(getApi().getCurrentIndex()).toBe(-1);
+        expect(mockInstance.getCurrentIndex).toHaveBeenCalled();
+    });
+    it('delegates view to the core instance', () => {
+        const { getApi } = createWrapper({ elements: '#gallery a' });
+        getApi().view(3);
+        expect(mockInstance.view).toHaveBeenCalledWith(3);
+    });
+    it('delegates destroy to the core instance', () => {
+        const { getApi } = createWrapper({ elements: '#gallery a' });
+        getApi().destroy();
+        expect(mockInstance.destroy).toHaveBeenCalled();
+    });
+    it('calls destroy on unmount', () => {
+        const { unmount } = createWrapper({ elements: '#gallery a' });
+        unmount();
+        expect(mockInstance.destroy).toHaveBeenCalledTimes(1);
+    });
+});

package/frameworks/vue/dist/main.es.js

@@ -0,0 +1,95 @@
+import { computed, createElementBlock, defineComponent, mergeProps, nextTick, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, useSlots, watch } from "vue";
+import { vistaView } from "vistaview";
+function useVistaView(e) {
+	let o = ref(null);
+	return onMounted(() => {
+		o.value = vistaView(e);
+	}), onBeforeUnmount(() => {
+		o.value?.destroy(), o.value = null;
+	}), {
+		open: (e = 0) => o.value?.open(e),
+		close: () => o.value?.close?.() ?? Promise.resolve(),
+		reset: () => o.value?.reset(),
+		next: () => o.value?.next(),
+		prev: () => o.value?.prev(),
+		zoomIn: () => o.value?.zoomIn(),
+		zoomOut: () => o.value?.zoomOut(),
+		getCurrentIndex: () => o.value?.getCurrentIndex?.() ?? -1,
+		view: (e) => o.value?.view(e),
+		destroy: () => o.value?.destroy()
+	};
+}
+var vistaview_vue_vue_type_script_lang_default = defineComponent({
+	name: "VistaView",
+	props: {
+		selector: {
+			type: String,
+			default: "> a"
+		},
+		options: {
+			type: Object,
+			default: () => ({})
+		},
+		id: {
+			type: String,
+			default: ""
+		}
+	},
+	setup(o, { expose: s }) {
+		let c = ref(null), f = ref(null), m = Math.random().toString(36).slice(2, 9), h = computed(() => o.id || `vvw-gallery-${m}`), g = useSlots(), _ = {
+			open: (e = 0) => f.value?.open(e),
+			close: () => f.value?.close?.() ?? Promise.resolve(),
+			reset: () => f.value?.reset(),
+			next: () => f.value?.next(),
+			prev: () => f.value?.prev(),
+			zoomIn: () => f.value?.zoomIn(),
+			zoomOut: () => f.value?.zoomOut(),
+			getCurrentIndex: () => f.value?.getCurrentIndex?.() ?? -1,
+			view: (e) => f.value?.view(e),
+			destroy: () => f.value?.destroy()
+		};
+		function v() {
+			if (!c.value) return;
+			let e = c.value.id;
+			f.value?.destroy(), f.value = vistaView({
+				...o.options,
+				elements: `#${e} ${o.selector}`
+			});
+		}
+		return onMounted(() => {
+			v();
+		}), onBeforeUnmount(() => {
+			f.value?.destroy(), f.value = null;
+		}), watch(() => o.selector, () => {
+			nextTick(() => v());
+		}), watch(() => o.options, () => {
+			nextTick(() => v());
+		}, { deep: !0 }), watch(() => g.default?.(), () => {
+			requestAnimationFrame(() => {
+				_.reset();
+			});
+		}), s({
+			vistaView: _,
+			get container() {
+				return c.value;
+			}
+		}), {
+			containerRef: c,
+			galleryId: h
+		};
+	}
+}), __plugin_vue_export_helper_default = (e, o) => {
+	let s = e.__vccOpts || e;
+	for (let [e, c] of o) s[e] = c;
+	return s;
+}, _hoisted_1 = ["id"];
+function _sfc_render(e, s, l, u, d, p) {
+	return openBlock(), createElementBlock("div", mergeProps({
+		id: e.galleryId,
+		ref: "containerRef"
+	}, e.$attrs), [renderSlot(e.$slots, "default")], 16, _hoisted_1);
+}
+var vistaview_default = /* @__PURE__ */ __plugin_vue_export_helper_default(vistaview_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+export { vistaview_default as VistaView, useVistaView };
+
+//# sourceMappingURL=main.es.js.map

package/frameworks/vue/dist/main.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.es.js","names":[],"sources":["../src/use-vistaview.ts","../src/vistaview.vue","../src/vistaview.vue"],"sourcesContent":["import { ref, onMounted, onBeforeUnmount } from 'vue';\nimport { vistaView } from 'vistaview';\nimport type { VistaParams, VistaInterface } from 'vistaview';\n\nexport function useVistaView(options: VistaParams): VistaInterface {\n  const instance = ref<VistaInterface | null>(null);\n  \n  onMounted(() => {\n    instance.value = vistaView(options);\n  });\n\n  onBeforeUnmount(() => {\n    instance.value?.destroy();\n    instance.value = null;\n  });\n\n  return {\n    open: (i = 0) => instance.value?.open(i),\n    close: () => instance.value?.close?.() ?? Promise.resolve(),\n    reset: () => instance.value?.reset(),\n    next: () => instance.value?.next(),\n    prev: () => instance.value?.prev(),\n    zoomIn: () => instance.value?.zoomIn(),\n    zoomOut: () => instance.value?.zoomOut(),\n    getCurrentIndex: () => instance.value?.getCurrentIndex?.() ?? -1,\n    view: (i: number) => instance.value?.view(i),\n    destroy: () => instance.value?.destroy(),\n  } as unknown as VistaInterface;\n}","<script lang=\"ts\">\nimport { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch, nextTick, useSlots } from 'vue';\nimport { vistaView } from 'vistaview';\nimport type { VistaInterface, VistaOpt } from 'vistaview';\n\nexport default defineComponent({\n  name: 'VistaView',\n  props: {\n    selector: { type: String, default: '> a' },\n    options: { type: Object as () => VistaOpt, default: () => ({}) },\n    id: { type: String, default: '' },\n  },\n  setup(props, { expose }) {\n    const containerRef = ref<HTMLElement | null>(null);\n    const instanceRef = ref<VistaInterface | null>(null);\n    const generatedId = Math.random().toString(36).slice(2, 9);\n    const galleryId = computed(() => (props.id || `vvw-gallery-${generatedId}`));\n    const slots = useSlots();\n\n    // API object to expose and optionally assign to the passed `vistaRef` prop\n    const api = {\n      open: (i = 0) => instanceRef.value?.open(i),\n      close: () => instanceRef.value?.close?.() ?? Promise.resolve(),\n      reset: () => instanceRef.value?.reset(),\n      next: () => instanceRef.value?.next(),\n      prev: () => instanceRef.value?.prev(),\n      zoomIn: () => instanceRef.value?.zoomIn(),\n      zoomOut: () => instanceRef.value?.zoomOut(),\n      getCurrentIndex: () => instanceRef.value?.getCurrentIndex?.() ?? -1,\n      view: (i: number) => instanceRef.value?.view(i),\n      destroy: () => instanceRef.value?.destroy(),\n    } as unknown as VistaInterface;\n\n    // helper to initialize the instance; destroys previous instance if any\n    function initInstance() {\n      if (!containerRef.value) return;\n      const id = containerRef.value.id;\n      instanceRef.value?.destroy();\n      instanceRef.value = vistaView({\n        ...(props.options as VistaOpt),\n        elements: `#${id} ${props.selector}`,\n      });\n    }\n\n    onMounted(() => {\n      // initial instantiation\n      initInstance();\n    });\n\n    onBeforeUnmount(() => {\n      instanceRef.value?.destroy();\n      instanceRef.value = null;\n    });\n\n    // watch props for changes and re-initialize\n    watch(() => props.selector, () => {\n      nextTick(() => initInstance());\n    });\n\n    watch(() => props.options, () => {\n      nextTick(() => initInstance());\n    }, { deep: true });\n\n    watch(\n      () => slots.default?.(),\n      () => {\n        requestAnimationFrame(() => {\n          api.reset()\n        })\n      }\n    );\n\n    // also expose API and DOM on the component instance for users who use `ref` on the component\n    // expose: { vistaView, container } where `container` is a live getter to the DOM element\n    expose({\n      vistaView: api,\n      get container() {\n        return containerRef.value;\n      },\n    });\n\n    return { containerRef, galleryId };\n  },\n});\n</script>\n\n<template>\n  <div :id=\"galleryId\" ref=\"containerRef\" v-bind=\"$attrs\">\n    <slot />\n  </div>\n</template>\n","<script lang=\"ts\">\nimport { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch, nextTick, useSlots } from 'vue';\nimport { vistaView } from 'vistaview';\nimport type { VistaInterface, VistaOpt } from 'vistaview';\n\nexport default defineComponent({\n  name: 'VistaView',\n  props: {\n    selector: { type: String, default: '> a' },\n    options: { type: Object as () => VistaOpt, default: () => ({}) },\n    id: { type: String, default: '' },\n  },\n  setup(props, { expose }) {\n    const containerRef = ref<HTMLElement | null>(null);\n    const instanceRef = ref<VistaInterface | null>(null);\n    const generatedId = Math.random().toString(36).slice(2, 9);\n    const galleryId = computed(() => (props.id || `vvw-gallery-${generatedId}`));\n    const slots = useSlots();\n\n    // API object to expose and optionally assign to the passed `vistaRef` prop\n    const api = {\n      open: (i = 0) => instanceRef.value?.open(i),\n      close: () => instanceRef.value?.close?.() ?? Promise.resolve(),\n      reset: () => instanceRef.value?.reset(),\n      next: () => instanceRef.value?.next(),\n      prev: () => instanceRef.value?.prev(),\n      zoomIn: () => instanceRef.value?.zoomIn(),\n      zoomOut: () => instanceRef.value?.zoomOut(),\n      getCurrentIndex: () => instanceRef.value?.getCurrentIndex?.() ?? -1,\n      view: (i: number) => instanceRef.value?.view(i),\n      destroy: () => instanceRef.value?.destroy(),\n    } as unknown as VistaInterface;\n\n    // helper to initialize the instance; destroys previous instance if any\n    function initInstance() {\n      if (!containerRef.value) return;\n      const id = containerRef.value.id;\n      instanceRef.value?.destroy();\n      instanceRef.value = vistaView({\n        ...(props.options as VistaOpt),\n        elements: `#${id} ${props.selector}`,\n      });\n    }\n\n    onMounted(() => {\n      // initial instantiation\n      initInstance();\n    });\n\n    onBeforeUnmount(() => {\n      instanceRef.value?.destroy();\n      instanceRef.value = null;\n    });\n\n    // watch props for changes and re-initialize\n    watch(() => props.selector, () => {\n      nextTick(() => initInstance());\n    });\n\n    watch(() => props.options, () => {\n      nextTick(() => initInstance());\n    }, { deep: true });\n\n    watch(\n      () => slots.default?.(),\n      () => {\n        requestAnimationFrame(() => {\n          api.reset()\n        })\n      }\n    );\n\n    // also expose API and DOM on the component instance for users who use `ref` on the component\n    // expose: { vistaView, container } where `container` is a live getter to the DOM element\n    expose({\n      vistaView: api,\n      get container() {\n        return containerRef.value;\n      },\n    });\n\n    return { containerRef, galleryId };\n  },\n});\n</script>\n\n<template>\n  <div :id=\"galleryId\" ref=\"containerRef\" v-bind=\"$attrs\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;AAIA,SAAgB,aAAa,GAAsC;CACjE,IAAM,IAAW,IAA2B,KAAK;AAWjD,QATA,gBAAgB;AACd,IAAS,QAAQ,UAAU,EAAQ;GACnC,EAEF,sBAAsB;AAEpB,EADA,EAAS,OAAO,SAAS,EACzB,EAAS,QAAQ;GACjB,EAEK;EACL,OAAO,IAAI,MAAM,EAAS,OAAO,KAAK,EAAE;EACxC,aAAa,EAAS,OAAO,SAAS,IAAI,QAAQ,SAAS;EAC3D,aAAa,EAAS,OAAO,OAAO;EACpC,YAAY,EAAS,OAAO,MAAM;EAClC,YAAY,EAAS,OAAO,MAAM;EAClC,cAAc,EAAS,OAAO,QAAQ;EACtC,eAAe,EAAS,OAAO,SAAS;EACxC,uBAAuB,EAAS,OAAO,mBAAmB,IAAI;EAC9D,OAAO,MAAc,EAAS,OAAO,KAAK,EAAE;EAC5C,eAAe,EAAS,OAAO,SAAS;EACzC;;AEtBH,IAAA,6CAAe,gBAAgB;CAC7B,MAAM;CACN,OAAO;EACL,UAAU;GAAE,MAAM;GAAQ,SAAS;GAAO;EAC1C,SAAS;GAAE,MAAM;GAA0B,gBAAgB,EAAE;GAAG;EAChE,IAAI;GAAE,MAAM;GAAQ,SAAS;GAAI;EAClC;CACD,MAAM,GAAO,EAAE,aAAU;EACvB,IAAM,IAAe,IAAwB,KAAK,EAC5C,IAAc,IAA2B,KAAK,EAC9C,IAAc,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,EACpD,IAAY,eAAgB,EAAM,MAAM,eAAe,IAAe,EACtE,IAAQ,UAAU,EAGlB,IAAM;GACV,OAAO,IAAI,MAAM,EAAY,OAAO,KAAK,EAAE;GAC3C,aAAa,EAAY,OAAO,SAAQ,IAAK,QAAQ,SAAS;GAC9D,aAAa,EAAY,OAAO,OAAO;GACvC,YAAY,EAAY,OAAO,MAAM;GACrC,YAAY,EAAY,OAAO,MAAM;GACrC,cAAc,EAAY,OAAO,QAAQ;GACzC,eAAe,EAAY,OAAO,SAAS;GAC3C,uBAAuB,EAAY,OAAO,mBAAkB,IAAK;GACjE,OAAO,MAAc,EAAY,OAAO,KAAK,EAAE;GAC/C,eAAe,EAAY,OAAO,SAAS;GAC7C;EAGA,SAAS,IAAe;AACtB,OAAI,CAAC,EAAa,MAAO;GACzB,IAAM,IAAK,EAAa,MAAM;AAE9B,GADA,EAAY,OAAO,SAAS,EAC5B,EAAY,QAAQ,UAAU;IAC5B,GAAI,EAAM;IACV,UAAU,IAAI,EAAE,GAAI,EAAM;IAC3B,CAAC;;AAwCJ,SArCA,gBAAgB;AAEd,MAAc;IACd,EAEF,sBAAsB;AAEpB,GADA,EAAY,OAAO,SAAS,EAC5B,EAAY,QAAQ;IACpB,EAGF,YAAY,EAAM,gBAAgB;AAChC,kBAAe,GAAc,CAAC;IAC9B,EAEF,YAAY,EAAM,eAAe;AAC/B,kBAAe,GAAc,CAAC;KAC7B,EAAE,MAAM,IAAM,CAAC,EAElB,YACQ,EAAM,WAAW,QACjB;AACJ,+BAA4B;AAC1B,MAAI,OAAM;KACX;IAEJ,EAID,EAAO;GACL,WAAW;GACX,IAAI,YAAY;AACd,WAAO,EAAa;;GAEvB,CAAC,EAEK;GAAE;GAAc;GAAW;;CAErC,CAAC;;;;;;qBAIA,mBAEM,OAFN,WAEM;EAFA,IAAI,EAAA;EAAW,KAAI;IAAuB,EAAA,OAAM,EAAA,CACpD,WAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA,WAAA"}

package/{dist → main/dist}/lib/components.d.ts

@@ -1,6 +1,5 @@
-import { VistaExtension, VistaOpt } from './types';
+import type { VistaExtension, VistaOpt } from './types';
 export declare function vistaViewComponent({ controls, extensions, }: {
     controls: VistaOpt['controls'];
     extensions: Set<VistaExtension>;
 }): DocumentFragment;
-//# sourceMappingURL=components.d.ts.map

package/main/dist/lib/components.js

@@ -0,0 +1,107 @@
+/// <reference types="trusted-types" />
+// Optimized SVG icons - common attributes applied via CSS
+const chevronLeft = `<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>`;
+const chevronRight = `<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>`;
+const zoomInIcon = `<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>`;
+const zoomOutIcon = `<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>`;
+const closeIcon = `<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
+let cachedPolicy = null;
+function getPolicy() {
+    if (cachedPolicy)
+        return cachedPolicy;
+    if (!window.trustedTypes) {
+        window.trustedTypes = {
+            createPolicy: (_name, rules) => rules,
+        };
+    }
+    cachedPolicy = window.trustedTypes.createPolicy('vistaView-policy', {
+        createHTML: (input) => input, // HTML is generated by us, not user input
+        createScript: () => {
+            throw new Error('Not implemented');
+        },
+        createScriptURL: () => {
+            throw new Error('Not implemented');
+        },
+    });
+    return cachedPolicy;
+}
+function createTrustedHtml(htmlString) {
+    const policy = getPolicy();
+    const trustedHtml = policy.createHTML(htmlString);
+    const template = document.createElement('template');
+    template.innerHTML = trustedHtml;
+    const html = template.content;
+    template.remove();
+    return html;
+}
+function convertControlToHtml(control, extensions) {
+    if (typeof control === 'string') {
+        switch (control) {
+            case 'zoomIn':
+                return `<div class="vvw-ui"><button aria-label="Zoom In" class="vvw-zoom-in">${zoomInIcon}</button></div>`;
+            case 'zoomOut':
+                return `<div class="vvw-ui"><button aria-label="Zoom Out" disabled class="vvw-zoom-out">${zoomOutIcon}</button></div>`;
+            case 'close':
+                return `<div class="vvw-ui"><button aria-label="Close" class="vvw-close">${closeIcon}</button></div>`;
+            case 'indexDisplay':
+                return `<div class="vvw-index vvw-ui" aria-hidden="true"></div>`;
+            case 'description':
+                return `<div class="vvw-desc vvw-ui" role="status" aria-live="polite" aria-atomic="true"></div>`;
+            default:
+                // Check if it's an extension control name
+                const ext = extensions[control];
+                if (ext && ext.control) {
+                    return `<div class="vvw-ext vvw-ui" aria-label="${ext.description || ext.name}" data-vvw-control="${ext.name}"></div>`;
+                }
+                console.warn(`Unknown control: ${control}. Will return empty string.`);
+                return '';
+        }
+    }
+    return '';
+}
+export function vistaViewComponent({ controls, extensions, }) {
+    // convert extensions to object for faster search
+    const objectExtensions = {};
+    extensions.forEach((ext) => {
+        objectExtensions[ext.name] = ext;
+    });
+    const mapCtrl = (arr) => arr ? arr.map((ctrl) => convertControlToHtml(ctrl, objectExtensions)).join('') : '';
+    const html = createTrustedHtml(`<div class="vvw-root" id="vvw-root">
+    <div class="vvw-container">
+      <div class="vvw-bg"></div>
+      <div class="vvw-image-container"></div>
+      <div class="vvw-top-bar">
+        <div>${mapCtrl(controls?.topLeft)}</div>
+        <div>${mapCtrl(controls?.topCenter)}</div>
+        <div>${mapCtrl(controls?.topRight)}</div>
+      </div>
+      <div class="vvw-bottom-bar">
+        <div>${mapCtrl(controls?.bottomLeft)}</div>
+        <div>${mapCtrl(controls?.bottomCenter)}</div>
+        <div>${mapCtrl(controls?.bottomRight)}</div>
+      </div>
+      <div class="vvw-prev vvw-ui"><button aria-label="Previous">${chevronLeft}</button></div>
+      <div class="vvw-next vvw-ui"><button aria-label="Next">${chevronRight}</button></div>
+    </div>
+    </div>`);
+    // Populate extension containers with actual elements
+    [
+        ...(controls?.topLeft || []),
+        ...(controls?.topCenter || []),
+        ...(controls?.topRight || []),
+        ...(controls?.bottomLeft || []),
+        ...(controls?.bottomCenter || []),
+        ...(controls?.bottomRight || []),
+    ].forEach((ctrl) => {
+        // Look up extension by name (ctrl is always a string now)
+        const ext = objectExtensions[ctrl];
+        if (ext && ext.control) {
+            const container = html.querySelector(`[data-vvw-control="${ext.name}"]`);
+            const el = ext.control();
+            if (container && el) {
+                container.appendChild(el);
+            }
+        }
+    });
+    return html;
+}

package/main/dist/lib/defaults/close.d.ts

@@ -0,0 +1,2 @@
+import type { VistaView } from '../vista-view';
+export declare function close(_vistaView: VistaView): void;

package/main/dist/lib/defaults/close.js

@@ -0,0 +1,4 @@
+// run on close of the viewer
+export function close(_vistaView) {
+    // deliberately empty
+}

package/main/dist/lib/defaults/image-setup.d.ts

@@ -0,0 +1,3 @@
+import type { VistaData } from '../types';
+import type { VistaView } from '../vista-view';
+export declare function imageSetup(_params: VistaData, _vistaView: VistaView): void;

package/main/dist/lib/defaults/image-setup.js

@@ -0,0 +1,4 @@
+// run everytime new set of images are to be viewed
+export function imageSetup(_params, _vistaView) {
+    // deliberately empty
+}

package/main/dist/lib/defaults/init.d.ts

@@ -0,0 +1,2 @@
+import type { VistaView } from '../vista-view';
+export declare function init(vistaView: VistaView): void;

package/main/dist/lib/defaults/init.js

@@ -0,0 +1,97 @@
+// run on initialization, when we initiate the class
+export function init(vistaView) {
+    registerPointerListener(vistaView);
+}
+// register external pointer listener
+function registerPointerListener(vistaView) {
+    let start = { x: 0, y: 0 };
+    let current = { x: 0, y: 0 };
+    let axis = null;
+    // external pointer listener
+    vistaView.registerPointerListener((e) => {
+        // return if event has internal execution
+        if (e.hasInternalExecution)
+            return;
+        // we only deal with pointers of length 1 here
+        if (e.pointers.length > 1)
+            return;
+        // on down, record start positions
+        if (e.event === 'down') {
+            start = { x: e.pointer.x, y: e.pointer.y };
+            current = { x: e.pointer.x, y: e.pointer.y };
+            // abort any slide animation
+            // if currently animating to a different slide,
+            // this will instantly move the slider to that slide
+            e.abortController?.abort();
+        }
+        // on move, calculate deltas and translate image container
+        if (e.event === 'move') {
+            current = { x: e.pointer.x, y: e.pointer.y };
+            const deltaX = current.x - start.x;
+            const deltaY = current.y - start.y;
+            // prettier-ignore
+            if ((!axis && Math.abs(deltaY) > Math.abs(deltaX)) ||
+                axis === 'y') {
+                const percentY = (deltaY / window.innerHeight) * 100;
+                vistaView.imageContainer.style.transition = 'none';
+                vistaView.imageContainer.style.transform = `translateY(${percentY}vh)`;
+                axis = 'y';
+            }
+            // prettier-ignore 
+            else if ((!axis && Math.abs(deltaX) > Math.abs(deltaY)) ||
+                axis === 'x' && e.state.elmLength > 1) {
+                const percentX = (deltaX / window.innerWidth) * 100;
+                vistaView.imageContainer.style.transition = 'none';
+                vistaView.imageContainer.style.transform = `translateX(${percentX}vw)`;
+                axis = 'x';
+            }
+        }
+        // on up or cancel, determine if we should close or reset position
+        if (e.event === 'up' || e.event === 'cancel') {
+            function resetPosition(transform) {
+                vistaView.imageContainer?.addEventListener('transitionend', function handler() {
+                    vistaView.imageContainer?.removeEventListener('transitionend', handler);
+                    vistaView.imageContainer.style.transition = '';
+                    vistaView.imageContainer.style.transform = '';
+                });
+                vistaView.imageContainer.style.transition = 'transform 222ms ease';
+                vistaView.imageContainer.style.transform = transform;
+            }
+            // handle vertical swipe
+            if (axis === 'y') {
+                const deltaY = current.y - start.y;
+                // swipe down
+                if (Math.abs(deltaY) > 144) {
+                    vistaView.imageContainer.style.transition = 'transform 222ms ease';
+                    vistaView.imageContainer.style.transform = `translateY(0vh)`;
+                    vistaView.close();
+                }
+                // reset position
+                else {
+                    resetPosition(`translateY(0vh)`);
+                }
+            }
+            // handle horizontal swipe
+            if (axis === 'x' && e.state.elmLength > 1) {
+                const deltaX = current.x - start.x;
+                vistaView.imageContainer.style.transition = '';
+                // swipe right
+                if (deltaX > 64) {
+                    vistaView.prev();
+                }
+                // swipe left
+                else if (deltaX < -64) {
+                    vistaView.next();
+                }
+                // reset position
+                else {
+                    resetPosition(`translateX(0vw)`);
+                }
+            }
+            // reset
+            axis = null;
+            start = { x: 0, y: 0 };
+            current = { x: 0, y: 0 };
+        }
+    });
+}

package/main/dist/lib/defaults/open.d.ts

@@ -0,0 +1,2 @@
+import type { VistaView } from '../vista-view';
+export declare function open(vistaView: VistaView): void;

package/main/dist/lib/defaults/open.js

@@ -0,0 +1,8 @@
+// run when we open the viewer
+export function open(vistaView) {
+    // setup container width and position
+    const preloads = vistaView.options.preloads;
+    vistaView.imageContainer.style.width = `${(preloads * 2 + 1) * 100}vw`;
+    vistaView.imageContainer.style.left = `-${preloads * 100}vw`;
+    vistaView.imageContainer.style.display = 'flex';
+}

package/main/dist/lib/defaults/options.d.ts

@@ -0,0 +1,2 @@
+import type { VistaOpt } from '../types';
+export declare const DefaultOptions: VistaOpt;

package/main/dist/lib/defaults/options.js

@@ -0,0 +1,15 @@
+export const DefaultOptions = {
+    // debug, don't remove
+    // animationDurationBase: 1000,
+    animationDurationBase: 333,
+    maxZoomLevel: 2,
+    preloads: 1,
+    keyboardListeners: true,
+    arrowOnSmallScreens: false,
+    rapidLimit: 222,
+    controls: {
+        topLeft: ['indexDisplay'],
+        topRight: ['zoomIn', 'zoomOut', 'close'],
+        bottomLeft: ['description'],
+    },
+};

package/{dist → main/dist}/lib/defaults/transition.d.ts

@@ -1,7 +1,6 @@
-import { VistaData } from '../types';
-import { VistaView } from '../vista-view';
+import type { VistaData } from '../types';
+import type { VistaView } from '../vista-view';
 export declare function transition({ htmlElements: { to: HtmlTo }, index: { from: fromIndex, to: toIndex } }: VistaData, signal: AbortSignal, vistaView: VistaView): {
     cleanup: () => void;
     transitionEnded: Promise<void>;
 } | undefined;
-//# sourceMappingURL=transition.d.ts.map