@c4h/chuci 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,203 @@
+export declare class CcSwiper extends ChuciElement {
+    private slider?;
+    private divContainer?;
+    private divSlides?;
+    private divGallery?;
+    private divPagination?;
+    private divPrevious?;
+    private divNext?;
+    static get observedAttributes(): string[];
+    get hasThumb(): boolean;
+    get autoplay(): boolean;
+    get slides(): CcSwiperSlide[];
+    openViewer(imageUrl: string, imageType: string, slideIndex?: number): Promise<void>;
+    protected firstUpdated(): void;
+    protected render(): void;
+    private initializeSwiper;
+}
+
+export declare class CcSwiperSlide extends ChuciElement {
+    static get observedAttributes(): string[];
+    get thumbnailUrl(): string;
+    get imageUrl(): string;
+    get imageType(): string;
+    get caption(): string;
+    protected render(): void;
+}
+
+export declare class CcViewer extends ChuciElement {
+    private swiper;
+    private currentSlideIndex;
+    private currentType;
+    private boundHandleNavigatePrev?;
+    private boundHandleNavigateNext?;
+    open(imgUrl: string, type: string, attributes?: Record<string, any>): void;
+    protected firstUpdated(): void;
+    private handleNavigatePrev;
+    private handleNavigateNext;
+    private navigateToSlide;
+    private updateNavigationButtons;
+    private setNavigationVisibility;
+    setSwiper(swiper: any): void;
+    setCurrentSlideIndex(index: number): void;
+    protected render(): void;
+}
+
+export declare class CcViewer3DModel extends CcViewerBase {
+    private modelUrl;
+    private materialUrl;
+    private debugMode;
+    private cameraPosition;
+    private cameraTarget;
+    private showTexture;
+    private scene?;
+    private camera?;
+    private renderer?;
+    private controls?;
+    private animationId?;
+    private container?;
+    private currentModel?;
+    private originalMaterials;
+    private resizeObserver?;
+    private externalCanvas?;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected doOpen(url: string): Promise<void>;
+    protected doClose(): void;
+    protected getViewerContent(): string;
+    protected getCustomStyles(): string;
+    protected onAfterRender(): void;
+    private cleanup;
+    private storeOriginalMaterials;
+    private toggleTexture;
+    private getCameraDebugInfo;
+    private getTargetDebugInfo;
+    private updateDebugInfo;
+    private initializeViewer;
+    private loadModel;
+    private animateLoop;
+    private handleResize;
+}
+
+export declare abstract class CcViewerBase extends ChuciElement {
+    private _showPrevButton;
+    private _showNextButton;
+    protected isShow: boolean;
+    protected isLoading: boolean;
+    get showPrevButton(): boolean;
+    set showPrevButton(value: boolean);
+    get showNextButton(): boolean;
+    set showNextButton(value: boolean);
+    protected abstract doOpen(url: string): void | Promise<void>;
+    protected abstract doClose(): void;
+    protected abstract getViewerContent(): string;
+    open(url: string): void;
+    close(): void;
+    protected cleanupNavigationListeners(): void;
+    protected render(): void;
+    protected shouldUseCustomRender(): boolean;
+    protected customRender(): void;
+    protected getCustomStyles(): string;
+    protected onAfterRender(): void;
+    protected navigatePrev(): void;
+    protected navigateNext(): void;
+    protected getNavigationButtons(): string;
+    protected getNavigationStyles(): string;
+    protected addNavigationListeners(): void;
+    protected updateNavigationVisibility(): void;
+}
+
+export declare class CcViewerGaussian extends CcViewerBase {
+    private splatUrl;
+    private debugMode;
+    private cameraPosition;
+    private _cameraTarget;
+    private scene?;
+    private camera?;
+    private renderer?;
+    private controls?;
+    private animationId?;
+    private canvas?;
+    private swiper?;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected doOpen(url: string): Promise<void>;
+    protected doClose(): void;
+    protected getViewerContent(): string;
+    protected shouldUseCustomRender(): boolean;
+    protected customRender(): void;
+    private cleanup;
+    private getCameraDebugInfo;
+    private getTargetDebugInfo;
+    private updateDebugInfo;
+    private initializeViewer;
+    private handleResize;
+}
+
+export declare class CcViewerImage extends CcViewerBase {
+    private viewer?;
+    private container?;
+    private imageUrl;
+    protected doOpen(url: string): void;
+    protected doClose(): void;
+    protected getViewerContent(): string;
+    protected getCustomStyles(): string;
+    protected onAfterRender(): void;
+}
+
+export declare class CcViewerPanorama extends CcViewerBase {
+    private imgUrl;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected doOpen(imgUrl: string): void;
+    protected doClose(): void;
+    protected getViewerContent(): string;
+    protected getCustomStyles(): string;
+    protected onAfterRender(): void;
+}
+
+export declare class CcViewerVideo extends CcViewerBase {
+    private videoUrl;
+    private fitToContainer;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected doOpen(url: string): void;
+    protected doClose(): void;
+    protected getViewerContent(): string;
+    protected getCustomStyles(): string;
+    protected onAfterRender(): void;
+    private handleVideoError;
+}
+
+export declare class CcViewerYoutube extends CcViewerBase {
+    private videoUrl;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected doOpen(videoUrl: string): void;
+    private extractYouTubeId;
+    protected doClose(): void;
+    protected getViewerContent(): string;
+    protected getCustomStyles(): string;
+}
+
+/**
+ * Base class for Chuci web components without Lit dependency
+ */
+export declare abstract class ChuciElement extends HTMLElement {
+    private _shadowRoot;
+    private _connected;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
+    protected firstUpdated(): void;
+    protected abstract render(): void;
+    protected html(strings: TemplateStringsArray, ...values: any[]): string;
+    protected css(strings: TemplateStringsArray, ...values: any[]): string;
+    protected updateShadowRoot(content: string): void;
+    protected query<T extends HTMLElement>(selector: string): T | null;
+    protected queryAll<T extends HTMLElement>(selector: string): NodeListOf<T>;
+    protected dispatch(eventName: string, detail?: any): void;
+}
+
+export { }

package/dist/index.html

@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Chuci Demo</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 20px;
+      font-family: Arial, sans-serif;
+      background: #f5f5f5;
+    }
+    .demo-container {
+      max-width: 800px;
+      margin: 0 auto;
+      background: white;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    h1 {
+      color: #333;
+      text-align: center;
+    }
+    .swiper-demo {
+      height: 400px;
+      margin: 20px 0;
+    }
+    .section {
+      margin: 40px 0;
+    }
+    h2 {
+      color: #555;
+      border-bottom: 2px solid #eee;
+      padding-bottom: 10px;
+    }
+  </style>
+</head>
+<body>
+  <div class="demo-container">
+    <h1>Chuci (楚辞) Demo</h1>
+    
+    <div class="section">
+      <h2>Basic Swiper</h2>
+      <div class="swiper-demo">
+        <cc-swiper>
+          <cc-swiper-slide 
+            thumbnail-url="https://picsum.photos/300/200?random=1" 
+            image-url="https://picsum.photos/800/600?random=1" 
+            image-type="image"
+            caption="First slide caption">
+          </cc-swiper-slide>
+          <cc-swiper-slide 
+            thumbnail-url="https://picsum.photos/300/200?random=2" 
+            image-url="https://picsum.photos/800/600?random=2" 
+            image-type="image"
+            caption="Second slide caption">
+          </cc-swiper-slide>
+          <cc-swiper-slide 
+            thumbnail-url="https://picsum.photos/300/200?random=3" 
+            image-url="https://picsum.photos/800/600?random=3" 
+            image-type="image"
+            caption="Third slide caption">
+          </cc-swiper-slide>
+        </cc-swiper>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>Swiper with Thumbnails</h2>
+      <div class="swiper-demo">
+        <cc-swiper has-thumb>
+          <cc-swiper-slide 
+            thumbnail-url="https://picsum.photos/300/200?random=4" 
+            image-url="https://picsum.photos/800/600?random=4" 
+            image-type="image">
+          </cc-swiper-slide>
+          <cc-swiper-slide 
+            thumbnail-url="https://picsum.photos/300/200?random=5" 
+            image-url="https://picsum.photos/800/600?random=5" 
+            image-type="image">
+          </cc-swiper-slide>
+          <cc-swiper-slide 
+            thumbnail-url="https://picsum.photos/300/200?random=6" 
+            image-url="https://picsum.photos/800/600?random=6" 
+            image-type="image">
+          </cc-swiper-slide>
+          <cc-swiper-slide 
+            thumbnail-url="https://picsum.photos/300/200?random=7" 
+            image-url="https://picsum.photos/800/600?random=7" 
+            image-type="image">
+          </cc-swiper-slide>
+        </cc-swiper>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>Autoplay Swiper</h2>
+      <div class="swiper-demo">
+        <cc-swiper autoplay>
+          <cc-swiper-slide 
+            thumbnail-url="https://picsum.photos/300/200?random=8" 
+            image-url="https://picsum.photos/800/600?random=8" 
+            image-type="image">
+          </cc-swiper-slide>
+          <cc-swiper-slide 
+            thumbnail-url="https://picsum.photos/300/200?random=9" 
+            image-url="https://picsum.photos/800/600?random=9" 
+            image-type="image">
+          </cc-swiper-slide>
+          <cc-swiper-slide 
+            thumbnail-url="https://picsum.photos/300/200?random=10" 
+            image-url="https://picsum.photos/800/600?random=10" 
+            image-type="image">
+          </cc-swiper-slide>
+        </cc-swiper>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>All Media Types Demo</h2>
+      <p>Demonstrates all supported media types: Image, Panorama, YouTube, Video, 3D Model, and Gaussian Splatting</p>
+      <div class="swiper-demo">
+        <cc-swiper>
+          <!-- Regular Image -->
+          <cc-swiper-slide 
+            thumbnail-url="https://images.unsplash.com/photo-1542281286-9e0a16bb7366?w=400" 
+            image-url="https://images.unsplash.com/photo-1542281286-9e0a16bb7366?w=1600" 
+            image-type="image"
+            caption="Regular Image">
+          </cc-swiper-slide>
+          
+          <!-- 360° Panorama -->
+          <cc-swiper-slide 
+            thumbnail-url="./assets/azumaya_panorama1.png" 
+            image-url="./assets/azumaya_panorama1.png" 
+            image-type="panorama"
+            caption="360° Panorama Image">
+          </cc-swiper-slide>
+          
+          <!-- YouTube Video -->
+          <cc-swiper-slide 
+            thumbnail-url="https://img.youtube.com/vi/dQw4w9WgXcQ/mqdefault.jpg" 
+            image-url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" 
+            image-type="youtube"
+            caption="YouTube Video">
+          </cc-swiper-slide>
+          
+          <!-- MP4 Video -->
+          <cc-swiper-slide 
+            thumbnail-url="https://images.unsplash.com/photo-1536240478700-b869070f9279?w=400" 
+            image-url="https://www.w3schools.com/html/mov_bbb.mp4" 
+            image-type="video"
+            caption="MP4 Video File">
+          </cc-swiper-slide>
+          
+          <!-- MP4 Video with fit-to-container -->
+          <cc-swiper-slide 
+            thumbnail-url="https://images.unsplash.com/photo-1574375927938-d5a98e8ffe85?w=400" 
+            image-url="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" 
+            image-type="video"
+            caption="MP4 Video (fit-to-container)"
+            fit-to-container>
+          </cc-swiper-slide>
+          
+          <!-- 3D Model (OBJ/MTL) -->
+          <cc-swiper-slide 
+            thumbnail-url="https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=400" 
+            image-url="https://t.tilemap.jp/3ddata/okuman.obj" 
+            material-url="https://t.tilemap.jp/3ddata/okuman.mtl"
+            image-type="3dmodel"
+            caption="3D OBJ/MTL Model (Debug Mode)"
+            debug-mode
+            camera-position="5,5,5"
+            camera-target="0,0,0">
+          </cc-swiper-slide>
+          
+          <!-- Simple 3D Model (OBJ only, no material) -->
+          <cc-swiper-slide 
+            thumbnail-url="https://images.unsplash.com/photo-1609205807490-b15b9d5d5a28?w=400" 
+            image-url="https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/models/obj/walt/WaltHead.obj" 
+            image-type="3dmodel"
+            caption="Simple 3D Model (OBJ only)"
+            camera-position="0,0,100"
+            camera-target="0,0,0">
+          </cc-swiper-slide>
+          
+          <!-- 3D Gaussian Splatting -->
+          <cc-swiper-slide 
+            thumbnail-url="https://images.unsplash.com/photo-1633613286991-611fe299c4be?w=400" 
+            image-url="https://t.tilemap.jp/3ddata/okuman.splat" 
+            image-type="gaussian"
+            caption="Gaussian Splatting Model"
+            debug-mode>
+          </cc-swiper-slide>
+        </cc-swiper>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>Media Types with Thumbnails Navigation</h2>
+      <div class="swiper-demo">
+        <cc-swiper has-thumb>
+          <cc-swiper-slide 
+            thumbnail-url="https://images.unsplash.com/photo-1542281286-9e0a16bb7366?w=400" 
+            image-url="https://images.unsplash.com/photo-1542281286-9e0a16bb7366?w=1600" 
+            image-type="image"
+            caption="Image with Thumbnail">
+          </cc-swiper-slide>
+          
+          <cc-swiper-slide 
+            thumbnail-url="./assets/azumaya_panorama1.png" 
+            image-url="./assets/azumaya_panorama1.png" 
+            image-type="panorama"
+            caption="Panorama with Thumbnail">
+          </cc-swiper-slide>
+          
+          <cc-swiper-slide 
+            thumbnail-url="https://img.youtube.com/vi/dQw4w9WgXcQ/mqdefault.jpg" 
+            image-url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" 
+            image-type="youtube"
+            caption="YouTube with Thumbnail">
+          </cc-swiper-slide>
+          
+          <cc-swiper-slide 
+            thumbnail-url="https://images.unsplash.com/photo-1633613286991-611fe299c4be?w=400" 
+            image-url="https://t.tilemap.jp/3ddata/okuman.splat" 
+            image-type="gaussian"
+            caption="3DGS with Thumbnail"
+            camera-position="500,500,500"
+            camera-target="0,0,0">
+          </cc-swiper-slide>
+        </cc-swiper>
+      </div>
+    </div>
+  </div>
+
+  <script type="module" src="/src/index.ts"></script>
+</body>
+</html>

package/dist/test-image.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Generate Test Images</title>
+</head>
+<body>
+    <h1>Test Image Generator</h1>
+    <p>Save these canvases as images for testing:</p>
+    
+    <div id="images"></div>
+    
+    <script>
+        const colors = [
+            { bg: '#FF6B6B', name: 'Red' },
+            { bg: '#4ECDC4', name: 'Green' },
+            { bg: '#45B7D1', name: 'Blue' },
+            { bg: '#F7DC6F', name: 'Yellow' },
+            { bg: '#BB8FCE', name: 'Purple' },
+            { bg: '#85C1E2', name: 'Light Blue' }
+        ];
+        
+        const container = document.getElementById('images');
+        
+        colors.forEach((color, index) => {
+            // Thumbnail
+            const thumbCanvas = document.createElement('canvas');
+            thumbCanvas.width = 300;
+            thumbCanvas.height = 200;
+            const thumbCtx = thumbCanvas.getContext('2d');
+            thumbCtx.fillStyle = color.bg;
+            thumbCtx.fillRect(0, 0, 300, 200);
+            thumbCtx.fillStyle = '#FFF';
+            thumbCtx.font = '24px Arial';
+            thumbCtx.textAlign = 'center';
+            thumbCtx.fillText(`Thumb ${index + 1}`, 150, 100);
+            
+            // Full size
+            const fullCanvas = document.createElement('canvas');
+            fullCanvas.width = 800;
+            fullCanvas.height = 600;
+            const fullCtx = fullCanvas.getContext('2d');
+            fullCtx.fillStyle = color.bg;
+            fullCtx.fillRect(0, 0, 800, 600);
+            fullCtx.fillStyle = '#FFF';
+            fullCtx.font = '48px Arial';
+            fullCtx.textAlign = 'center';
+            fullCtx.fillText(`Full Image ${index + 1}`, 400, 300);
+            
+            const div = document.createElement('div');
+            div.innerHTML = `
+                <h3>${color.name} (${index + 1})</h3>
+                <p>Thumbnail (300x200):</p>
+                ${thumbCanvas.outerHTML}
+                <p>Full (800x600):</p>
+                ${fullCanvas.outerHTML}
+                <hr>
+            `;
+            container.appendChild(div);
+        });
+    </script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@c4h/chuci",
+  "version": "0.1.0",
+  "description": "Standalone multimedia swiper and viewer web components",
+  "type": "module",
+  "private": false,
+  "main": "./dist/chuci.cjs",
+  "module": "./dist/chuci.js",
+  "browser": "./dist/chuci.umd.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "browser": "./dist/chuci.umd.js",
+      "import": "./dist/chuci.js",
+      "require": "./dist/chuci.cjs"
+    },
+    "./package.json": "./package.json",
+    "./dist/*": "./dist/*"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite --host='0.0.0.0'",
+    "build": "npm run typecheck && cross-env BUILD_MODE=package vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint src tests",
+    "lint:fix": "eslint src tests --fix",
+    "prepublishOnly": "npm run typecheck && npm run build"
+  },
+  "dependencies": {
+    "@photo-sphere-viewer/core": "^5.11.4",
+    "gsplat": "^1.2.4",
+    "swiper": "^11.1.15",
+    "three": "^0.171.0",
+    "viewerjs": "^1.11.7"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^22.10.2",
+    "@types/three": "^0.171.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.2",
+    "@typescript-eslint/parser": "^8.18.2",
+    "@vitest/coverage-v8": "^3.2.4",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "jsdom": "^25.0.1",
+    "prettier": "^3.4.2",
+    "typescript": "^5.7.2",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.4.0",
+    "vitest": "^3.2.4"
+  },
+  "keywords": [
+    "swiper",
+    "viewer",
+    "webcomponents",
+    "multimedia",
+    "carousel",
+    "panorama",
+    "3d"
+  ],
+  "author": "Code for History",
+  "contributors": ["kobakazu0429 <kobakazu10@gmail.com>"],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/code4history/Chuci.git"
+  },
+  "bugs": {
+    "url": "https://github.com/code4history/Chuci/issues"
+  },
+  "homepage": "https://github.com/code4history/Chuci#readme"
+}

package/src/components/swiper/cc-swiper-slide.ts

@@ -0,0 +1,50 @@
+import { ChuciElement } from '@/utils/base-element'
+
+export class CcSwiperSlide extends ChuciElement {
+  static get observedAttributes() {
+    return ['thumbnail-url', 'image-url', 'image-type', 'caption']
+  }
+  
+  get thumbnailUrl() {
+    return this.getAttribute('thumbnail-url') || ''
+  }
+  
+  get imageUrl() {
+    return this.getAttribute('image-url') || ''
+  }
+  
+  get imageType() {
+    return this.getAttribute('image-type') || ''
+  }
+  
+  get caption() {
+    return this.getAttribute('caption') || ''
+  }
+  
+  protected render() {
+    const styles = this.css`
+      :host {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        width: 100%;
+        background-size: cover !important;
+        background-repeat: no-repeat !important;
+        background-position: center !important;
+      }
+    `
+    
+    this.updateShadowRoot(styles)
+  }
+}
+
+if (!customElements.get('cc-swiper-slide')) {
+  customElements.define('cc-swiper-slide', CcSwiperSlide)
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cc-swiper-slide': CcSwiperSlide
+  }
+}

package/src/components/swiper/cc-swiper-styles.ts

@@ -0,0 +1,29 @@
+export const swiperStyles = `
+  :host {
+    display: block;
+    --swiper-theme-color: #007aff;
+    --swiper-navigation-size: 44px;
+    --swiper-navigation-color: #007aff;
+  }
+  
+  .swiper {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`