@uibit/360-viewer 0.1.0

package/dist/360-viewer.js

@@ -0,0 +1,320 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { customElement, fromLucide, getIcon, msg, UIBitElement } from '@uibit/core';
+import { Move, ChevronLeft, ChevronRight } from 'lucide';
+import { property, state } from 'lit/decorators.js';
+import { styles } from './styles';
+/**
+ * 360° product viewer driven by an array of sequential images.
+ * Supports drag, touch, auto-rotation, and keyboard controls.
+ *
+ * @fires {{ index: number, total: number }} change - Fired each time the displayed frame changes
+ *
+ * @cssprop [--uibit-360-viewer-bg=#f9fafb] - Background color of the viewer container
+ * @cssprop [--uibit-360-viewer-border=#e5e7eb] - Border color of the viewer container
+ * @cssprop [--uibit-360-viewer-button-bg=rgba(255,255,255,0.75)] - Background of control buttons
+ * @cssprop [--uibit-360-viewer-button-bg-hover=rgba(255,255,255,0.95)] - Hover background of control buttons
+ * @cssprop [--uibit-360-viewer-button-color=#374151] - Icon/text color of control buttons
+ * @cssprop [--uibit-360-viewer-focus-color=#000000] - Focus outline color for interactive elements
+ * @cssprop [--uibit-360-viewer-progress-track-bg=rgba(0,0,0,0.08)] - Background of the progress bar track
+ * @cssprop [--uibit-360-viewer-hint-bg=rgba(17,24,39,0.65)] - Background of the drag hint overlay
+ */
+let Viewer360 = class Viewer360 extends UIBitElement {
+    constructor() {
+        super(...arguments);
+        this.images = [];
+        /** Automatically rotate through frames when no user interaction is occurring. */
+        this.autoRotate = false;
+        /** Milliseconds between frames during auto-rotation. Lower values spin faster. */
+        this.rotationSpeed = 150;
+        /** Horizontal pixel distance a drag must travel before advancing one frame. */
+        this.dragSensitivity = 15;
+        /** Show the play/pause and directional control buttons. */
+        this.showControls = true;
+        /** Show the frame progress bar at the bottom of the viewer. */
+        this.showProgressBar = true;
+        this.currentIndex = 0;
+        this.isDragging = false;
+        this.firstFrameReady = false;
+        this.aspectRatio = '16 / 9';
+        this.startX = 0;
+        this.startImageIndex = 0;
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stopAutoRotate();
+        this.clearResumeTimer();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('autoRotate') || changedProperties.has('rotationSpeed')) {
+            if (this.autoRotate) {
+                this.startAutoRotate();
+            }
+            else {
+                this.stopAutoRotate();
+            }
+        }
+        if (changedProperties.has('images')) {
+            this.currentIndex = 0;
+            this.firstFrameReady = false;
+            this.stopAutoRotate();
+        }
+    }
+    startAutoRotate() {
+        this.stopAutoRotate();
+        if (!this.autoRotate || this.images.length === 0 || !this.firstFrameReady)
+            return;
+        this.autoRotateTimer = window.setInterval(() => {
+            this.next();
+        }, this.rotationSpeed);
+    }
+    stopAutoRotate() {
+        if (this.autoRotateTimer) {
+            clearInterval(this.autoRotateTimer);
+            this.autoRotateTimer = undefined;
+        }
+    }
+    scheduleAutoRotateResume() {
+        if (!this.autoRotate)
+            return;
+        this.clearResumeTimer();
+        this.resumeTimer = window.setTimeout(() => {
+            this.startAutoRotate();
+        }, 2000);
+    }
+    clearResumeTimer() {
+        if (this.resumeTimer) {
+            clearTimeout(this.resumeTimer);
+            this.resumeTimer = undefined;
+        }
+    }
+    handleFrameLoad(e, index) {
+        if (index === 0) {
+            const img = e.target;
+            if (img.naturalWidth && img.naturalHeight) {
+                this.aspectRatio = `${img.naturalWidth} / ${img.naturalHeight}`;
+            }
+            this.firstFrameReady = true;
+            if (this.autoRotate)
+                this.startAutoRotate();
+        }
+    }
+    next() {
+        if (this.images.length === 0)
+            return;
+        this.currentIndex = (this.currentIndex + 1) % this.images.length;
+        this.emitChange();
+    }
+    prev() {
+        if (this.images.length === 0)
+            return;
+        this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
+        this.emitChange();
+    }
+    emitChange() {
+        this.dispatchCustomEvent('change', {
+            index: this.currentIndex,
+            image: this.images[this.currentIndex]
+        });
+    }
+    handlePointerDown(e) {
+        if (this.images.length === 0)
+            return;
+        this.isDragging = true;
+        this.startX = e.clientX;
+        this.startImageIndex = this.currentIndex;
+        this.stopAutoRotate();
+        this.clearResumeTimer();
+        const viewer = e.currentTarget;
+        viewer.setPointerCapture(e.pointerId);
+    }
+    handlePointerMove(e) {
+        if (!this.isDragging || this.images.length === 0)
+            return;
+        const deltaX = e.clientX - this.startX;
+        const step = this.dragSensitivity;
+        const offset = Math.round(deltaX / step);
+        let newIndex = (this.startImageIndex - offset) % this.images.length;
+        if (newIndex < 0) {
+            newIndex += this.images.length;
+        }
+        if (newIndex !== this.currentIndex) {
+            this.currentIndex = newIndex;
+        }
+    }
+    handlePointerUp(e) {
+        if (!this.isDragging)
+            return;
+        this.isDragging = false;
+        try {
+            const viewer = e.currentTarget;
+            viewer.releasePointerCapture(e.pointerId);
+        }
+        catch {
+            // Ignore pointer capture release exceptions if target unmounted
+        }
+        this.scheduleAutoRotateResume();
+    }
+    handleKeyDown(e) {
+        if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            this.stopAutoRotate();
+            this.clearResumeTimer();
+            this.next();
+            this.scheduleAutoRotateResume();
+        }
+        else if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            this.stopAutoRotate();
+            this.clearResumeTimer();
+            this.prev();
+            this.scheduleAutoRotateResume();
+        }
+    }
+    handleSlotChange(e) {
+        const slot = e.target;
+        const elements = slot.assignedElements({ flatten: true }).filter(el => el.tagName === 'IMG');
+        if (elements.length > 0) {
+            this.images = elements.map(el => el.getAttribute('src') || el.src || '');
+            this.currentIndex = 0;
+            this.firstFrameReady = false;
+        }
+    }
+    render() {
+        const progressPercent = this.images.length > 0
+            ? ((this.currentIndex + 1) / this.images.length) * 100
+            : 0;
+        return html `
+      <slot @slotchange=${this.handleSlotChange} style="display: none;"></slot>
+      <div
+        part="viewer"
+        class="viewer ${this.isDragging ? 'dragging' : ''}"
+        tabindex="0"
+        role="region"
+        aria-label=${msg('360 degree product view. Use drag, arrow keys, or buttons to rotate.')}
+        @pointerdown=${this.handlePointerDown}
+        @pointermove=${this.handlePointerMove}
+        @pointerup=${this.handlePointerUp}
+        @pointercancel=${this.handlePointerUp}
+        @keydown=${this.handleKeyDown}
+      >
+        ${this.images.length > 0 ? html `
+          <div
+            class="frames ${this.firstFrameReady ? 'ready' : ''}"
+            style="aspect-ratio: ${this.aspectRatio};"
+          >
+            ${this.images.map((src, i) => html `
+              <img
+                part="image"
+                class="frame ${i === this.currentIndex ? 'frame-active' : ''}"
+                src="${src}"
+                alt=""
+                aria-hidden="${i !== this.currentIndex}"
+                @load=${(e) => this.handleFrameLoad(e, i)}
+              />
+            `)}
+          </div>
+        ` : html `
+          <p style="padding: 24px; text-align: center; color: var(--uibit-360-viewer-button-color);">No images provided</p>
+        `}
+
+        ${!this.firstFrameReady && this.images.length > 0 ? html `
+          <div part="skeleton" class="skeleton"></div>
+        ` : ''}
+
+        ${this.firstFrameReady && !this.isDragging ? html `
+          <slot name="hint">
+            <div part="drag-hint" class="drag-hint">
+              ${getIcon('move', 16, fromLucide(Move))}
+              Drag to rotate
+            </div>
+          </slot>
+        ` : ''}
+
+        ${this.showControls && this.firstFrameReady ? html `
+          <slot name="prev" @click=${(e) => {
+            e.stopPropagation();
+            this.stopAutoRotate();
+            this.clearResumeTimer();
+            this.prev();
+            this.scheduleAutoRotateResume();
+        }}>
+            <button
+              part="nav-button nav-button-prev"
+              class="nav-button nav-button-prev"
+              aria-label=${msg('Rotate left')}
+            >
+              ${getIcon('chevron-left', 20, fromLucide(ChevronLeft))}
+            </button>
+          </slot>
+          <slot name="next" @click=${(e) => {
+            e.stopPropagation();
+            this.stopAutoRotate();
+            this.clearResumeTimer();
+            this.next();
+            this.scheduleAutoRotateResume();
+        }}>
+            <button
+              part="nav-button nav-button-next"
+              class="nav-button nav-button-next"
+              aria-label=${msg('Rotate right')}
+            >
+              ${getIcon('chevron-right', 20, fromLucide(ChevronRight))}
+            </button>
+          </slot>
+        ` : ''}
+
+        ${this.showProgressBar && this.firstFrameReady ? html `
+          <div part="progress-track" class="progress-track" role="progressbar" aria-valuemin="1" aria-valuemax="${this.images.length}" aria-valuenow="${this.currentIndex + 1}">
+            <div part="progress-bar" class="progress-bar" style="width: ${progressPercent}%"></div>
+          </div>
+        ` : ''}
+      </div>
+    `;
+    }
+};
+__decorate([
+    state()
+], Viewer360.prototype, "images", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'auto-rotate' })
+], Viewer360.prototype, "autoRotate", void 0);
+__decorate([
+    property({ type: Number, attribute: 'rotation-speed' })
+], Viewer360.prototype, "rotationSpeed", void 0);
+__decorate([
+    property({ type: Number, attribute: 'drag-sensitivity' })
+], Viewer360.prototype, "dragSensitivity", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-controls' })
+], Viewer360.prototype, "showControls", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-progress-bar' })
+], Viewer360.prototype, "showProgressBar", void 0);
+__decorate([
+    state()
+], Viewer360.prototype, "currentIndex", void 0);
+__decorate([
+    state()
+], Viewer360.prototype, "isDragging", void 0);
+__decorate([
+    state()
+], Viewer360.prototype, "firstFrameReady", void 0);
+__decorate([
+    state()
+], Viewer360.prototype, "aspectRatio", void 0);
+Viewer360 = __decorate([
+    customElement('uibit-360-viewer')
+], Viewer360);
+export { Viewer360 };
+export default Viewer360;
+//# sourceMappingURL=360-viewer.js.map

package/dist/360-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"360-viewer.js","sourceRoot":"","sources":["../src/360-viewer.ts"],"names":[],"mappings":"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"}

package/dist/frameworks/angular/index.ts

@@ -0,0 +1,50 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, booleanAttribute, numberAttribute } from '@angular/core';
+import '@uibit/360-viewer';
+import type { Viewer360 as HTMLElementClass } from '@uibit/360-viewer';
+
+@Component({
+  selector: 'uibit-360-viewer',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  host: {
+    '(change)': 'change.emit($event)'
+  }
+})
+export class NgxViewer360 {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.autoRotate = this.autoRotate();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.rotationSpeed = this.rotationSpeed();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.dragSensitivity = this.dragSensitivity();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.showControls = this.showControls();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.showProgressBar = this.showProgressBar();
+      }
+    });
+  }
+
+  readonly autoRotate = input<boolean, any>(false, { transform: booleanAttribute });
+  readonly rotationSpeed = input<number, any>(150, { transform: numberAttribute });
+  readonly dragSensitivity = input<number, any>(15, { transform: numberAttribute });
+  readonly showControls = input<boolean, any>(true, { transform: booleanAttribute });
+  readonly showProgressBar = input<boolean, any>(true, { transform: booleanAttribute });
+
+  readonly change = output<CustomEvent<{ index: number, total: number }>>();
+}

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

@@ -0,0 +1,10 @@
+import type { Viewer360 as HTMLElementClass } from '@uibit/360-viewer';
+import '@uibit/360-viewer';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-360-viewer': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+    }
+  }
+}

package/dist/frameworks/nuxt/index.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('@uibit/360-viewer');
+  }
+});

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

@@ -0,0 +1,17 @@
+import type { JSX } from 'preact';
+import type { Viewer360 as HTMLElementClass } from '@uibit/360-viewer';
+import '@uibit/360-viewer';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-360-viewer': JSX.HTMLAttributes<HTMLElementClass> & {
+      autoRotate?: boolean;
+      rotationSpeed?: number;
+      dragSensitivity?: number;
+      showControls?: boolean;
+      showProgressBar?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

@@ -0,0 +1,10 @@
+import { component$, Slot } from '@builder.io/qwik';
+import '@uibit/360-viewer';
+
+export const Viewer360 = component$<any>((props) => {
+  return (
+    <uibit-360-viewer {...props}>
+      <Slot />
+    </uibit-360-viewer>
+  );
+});

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

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { Viewer360 as HTMLElementClass } from '@uibit/360-viewer';
+import '@uibit/360-viewer';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-360-viewer': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      autoRotate?: boolean;
+      rotationSpeed?: number;
+      dragSensitivity?: number;
+      showControls?: boolean;
+      showProgressBar?: boolean;
+      onChange?: (event: any) => void;
+        };
+      }
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import type { JSX } from 'solid-js';
+import type { Viewer360 as HTMLElementClass } from '@uibit/360-viewer';
+import '@uibit/360-viewer';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-360-viewer': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              autoRotate?: boolean;
+      rotationSpeed?: number;
+      dragSensitivity?: number;
+      showControls?: boolean;
+      showProgressBar?: boolean;
+      "on:change"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import type { Viewer360 as HTMLElementClass } from '@uibit/360-viewer';
+import '@uibit/360-viewer';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-360-viewer': HTMLElementClass & {
+    autoRotate?: boolean;
+    rotationSpeed?: number;
+    dragSensitivity?: number;
+    showControls?: boolean;
+    showProgressBar?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import '@uibit/360-viewer';
+  import type { Viewer360 as HTMLElementClass } from '@uibit/360-viewer';
+  
+  let {
+    autoRotate = undefined,
+      rotationSpeed = undefined,
+      dragSensitivity = undefined,
+      showControls = undefined,
+      showProgressBar = undefined,
+      children
+  } = $props<{
+    children?: any;
+    autoRotate?: boolean;
+    rotationSpeed?: number;
+    dragSensitivity?: number;
+    showControls?: boolean;
+    showProgressBar?: boolean;
+  
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && autoRotate !== undefined) {
+      elementRef.autoRotate = autoRotate;
+    }
+    if (elementRef && rotationSpeed !== undefined) {
+      elementRef.rotationSpeed = rotationSpeed;
+    }
+    if (elementRef && dragSensitivity !== undefined) {
+      elementRef.dragSensitivity = dragSensitivity;
+    }
+    if (elementRef && showControls !== undefined) {
+      elementRef.showControls = showControls;
+    }
+    if (elementRef && showProgressBar !== undefined) {
+      elementRef.showProgressBar = showProgressBar;
+    }
+  });
+  
+</script>
+
+<uibit-360-viewer bind:this={elementRef} {...$$restProps}>
+
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-360-viewer>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,28 @@
+import { defineComponent, h } from 'vue';
+import type { Viewer360 as HTMLElementClass } from '@uibit/360-viewer';
+import '@uibit/360-viewer';
+
+export const Viewer360 = defineComponent({
+  name: 'Viewer360',
+  props: {
+    autoRotate: { type: [String, Number, Boolean, Array, Object] as any },
+    rotationSpeed: { type: [String, Number, Boolean, Array, Object] as any },
+    dragSensitivity: { type: [String, Number, Boolean, Array, Object] as any },
+    showControls: { type: [String, Number, Boolean, Array, Object] as any },
+    showProgressBar: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: ['change'],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+      eventListeners['onChange'] = (event: Event) => {
+        emit('change', event);
+      };
+
+      return h('uibit-360-viewer', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default, Viewer360 } from './360-viewer';
+export type { Viewer360Config, Hotspot360 } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default, Viewer360 } from './360-viewer';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+LlB,CAAC"}