@c4h/chuci 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,33 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2025-01-13
+
+### Added
+- Initial release of Chuci Web Components library
+- `cc-swiper` component for creating multimedia carousels
+- `cc-swiper-slide` component for individual carousel slides
+- `cc-viewer` base viewer component with navigation support
+- `cc-viewer-image` for displaying images with ViewerJS integration
+- `cc-viewer-video` for HTML5 video playback
+- `cc-viewer-youtube` for YouTube video embedding
+- `cc-viewer-panorama` for 360° panoramic images
+- `cc-viewer-3dmodel` for 3D model viewing with Three.js
+- `cc-viewer-gaussian` for Gaussian Splatting visualization
+- TypeScript type definitions
+- ESM, CommonJS, and UMD build outputs
+
+### Fixed
+- Shadow DOM rendering issues for WebGL-based viewers (3D Model and Gaussian)
+- Navigation button event handling across all viewer types
+- Duplicate event listener registration
+- ViewerJS timing issues in image viewer
+
+### Changed
+- Unified viewer implementation using Template Method pattern
+- Simplified 3D model data format from pipe-separated to separate attributes
+- Migrated to Code4History standards with @c4h scope

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Code for History
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.ja.md

@@ -0,0 +1,144 @@
+# Chuci (楚辞)
+
+[Quyuan](https://github.com/code4history/Quyuan)から抽出されたスタンドアロンのマルチメディアスワイパーとビューアWebコンポーネントライブラリです。フレームワークに依存せず、タッチ対応のカルーセルとマルチメディアビューアを提供します。
+
+## 特徴
+
+- 🚀 **フレームワーク非依存**: 純粋なWeb Components、任意のフレームワークまたはバニラJSで動作
+- 📱 **タッチ対応**: Swiper.jsをベースとしたスムーズなタッチ操作
+- 🎬 **複数のメディアタイプ**: 画像、パノラマ、動画、YouTube、3Dモデル、Gaussianスプラットに対応
+- 🔧 **ゼロ依存関係**: すべての依存関係がバンドル済み（Lit依存なし）
+- 📦 **軽量**: tree-shakingサポートによる最適化されたバンドルサイズ
+- 🛠️ **TypeScript**: 型定義付きの完全なTypeScriptサポート
+
+## インストール
+
+```bash
+npm install @c4h/chuci
+```
+
+## 使用方法
+
+### 基本的なスワイパー
+
+```html
+<cc-swiper>
+  <cc-swiper-slide 
+    thumbnail-url="thumb1.jpg" 
+    image-url="full1.jpg" 
+    image-type="image"
+    caption="最初の画像">
+  </cc-swiper-slide>
+  <cc-swiper-slide 
+    thumbnail-url="thumb2.jpg" 
+    image-url="full2.jpg" 
+    image-type="image"
+    caption="2番目の画像">
+  </cc-swiper-slide>
+</cc-swiper>
+
+<script type="module">
+  import '@c4h/chuci'
+</script>
+```
+
+### サムネイルギャラリー付き
+
+```html
+<cc-swiper has-thumb>
+  <cc-swiper-slide thumbnail-url="..." image-url="..." image-type="image"></cc-swiper-slide>
+  <cc-swiper-slide thumbnail-url="..." image-url="..." image-type="image"></cc-swiper-slide>
+</cc-swiper>
+```
+
+### 自動再生
+
+```html
+<cc-swiper autoplay>
+  <!-- スライド -->
+</cc-swiper>
+```
+
+## サポートされるメディアタイプ
+
+- **image**: 通常の画像（jpg, png, gif など）
+- **panorama**: 360°パノラマ画像
+- **youtube**: YouTube動画（YouTube URLを提供）
+- **video**: HTML5動画（mp4, webm など）
+- **3dmodel**: 3Dモデル（OBJ/MTL形式）
+- **gaussian**: Gaussianスプラッティングファイル（.splat, .ply）
+
+## コンポーネント
+
+### `<cc-swiper>`
+
+メインのカルーセルコンポーネント。
+
+**属性:**
+- `has-thumb`: サムネイルギャラリーを表示
+- `autoplay`: 自動再生を有効化
+
+### `<cc-swiper-slide>`
+
+個別のスライドコンポーネント。
+
+**属性:**
+- `thumbnail-url`: サムネイル画像のURL
+- `image-url`: フルメディアのURL
+- `image-type`: メディアタイプ（上記のサポートされるタイプを参照）
+- `caption`: オプションのキャプションテキスト
+
+### ビューア固有の属性
+
+3DモデルとGaussianスプラット用:
+- `fit-to-container`: モデルをコンテナサイズに合わせる
+- `debug-mode`: デバッグ情報を表示
+- `camera-position`: 初期カメラ位置を設定（例: "0,0,5"）
+- `camera-target`: カメラターゲットを設定（例: "0,0,0"）
+- `show-texture`: テクスチャの表示/非表示（3Dモデル用）
+
+## スタイリング
+
+CSSカスタムプロパティ:
+
+```css
+cc-swiper {
+  --cc-slider-theme-color: #007aff;
+  --cc-slider-navigation-color: #007aff;
+}
+
+cc-viewer {
+  --cc-viewer-z-index: 1000;
+}
+```
+
+## ブラウザサポート
+
+Web Componentsをサポートするすべてのモダンブラウザで動作:
+- Chrome/Edge 79+
+- Firefox 63+
+- Safari 12.1+
+
+## 開発
+
+```bash
+# 依存関係のインストール
+pnpm install
+
+# 開発サーバーの起動
+pnpm run dev
+
+# テストの実行
+pnpm test
+
+# ライブラリのビルド
+pnpm run build
+```
+
+## ライセンス
+
+MIT License - 詳細はLICENSEファイルを参照してください。
+
+## クレジット
+
+Code for Historyによる[Quyuan](https://github.com/code4history/Quyuan)から抽出。

package/README.md

@@ -0,0 +1,225 @@
+# Chuci (楚辞)
+
+[![CI](https://github.com/code4history/Chuci/actions/workflows/ci.yml/badge.svg)](https://github.com/code4history/Chuci/actions/workflows/ci.yml)
+[![npm version](https://badge.fury.io/js/@c4h%2Fchuci.svg)](https://www.npmjs.com/package/@c4h/chuci)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+A standalone multimedia swiper and viewer web components library extracted from [Quyuan](https://github.com/code4history/Quyuan). Provides touch-enabled carousel and multimedia viewers without any framework dependencies.
+
+## Features
+
+- 🚀 **Framework-agnostic**: Pure Web Components, works with any framework or vanilla JS
+- 📱 **Touch-enabled**: Built on Swiper.js for smooth touch interactions
+- 🎬 **Multiple media types**: Support for images, panoramas, videos, YouTube, 3D models, and Gaussian splats
+- 🔧 **Zero dependencies**: All dependencies are bundled (no Lit dependency)
+- 📦 **Lightweight**: Optimized bundle size with tree-shaking support
+- 🛠️ **TypeScript**: Full TypeScript support with type definitions
+
+## Installation
+
+```bash
+npm install @c4h/chuci
+```
+
+## Usage
+
+### Basic Swiper
+
+```html
+<cc-swiper>
+  <cc-swiper-slide 
+    thumbnail-url="thumb1.jpg" 
+    image-url="full1.jpg" 
+    image-type="image"
+    caption="First image">
+  </cc-swiper-slide>
+  <cc-swiper-slide 
+    thumbnail-url="thumb2.jpg" 
+    image-url="full2.jpg" 
+    image-type="image"
+    caption="Second image">
+  </cc-swiper-slide>
+</cc-swiper>
+
+<script type="module">
+  import '@c4h/chuci'
+</script>
+```
+
+### Programmatic Usage
+
+```javascript
+import '@c4h/chuci';
+
+// Get swiper element
+const swiper = document.querySelector('cc-swiper');
+
+// Open viewer programmatically
+swiper.openViewer('path/to/image.jpg', 'image', 0);
+
+// Listen to slide changes
+swiper.addEventListener('slidechange', (e) => {
+  console.log('Current slide:', e.detail.activeIndex);
+});
+```
+
+### With Thumbnails Gallery
+
+```html
+<cc-swiper has-thumb>
+  <cc-swiper-slide thumbnail-url="..." image-url="..." image-type="image"></cc-swiper-slide>
+  <cc-swiper-slide thumbnail-url="..." image-url="..." image-type="image"></cc-swiper-slide>
+</cc-swiper>
+```
+
+### Autoplay
+
+```html
+<cc-swiper autoplay>
+  <!-- slides -->
+</cc-swiper>
+```
+
+## Supported Media Types
+
+- **image**: Regular images (jpg, png, gif, etc.)
+- **panorama**: 360° panoramic images
+- **youtube**: YouTube videos (provide YouTube URL)
+- **video**: HTML5 videos (mp4, webm, etc.)
+- **3dmodel**: 3D models (OBJ/MTL format)
+- **gaussian**: Gaussian splatting files (.splat, .ply)
+
+## Components
+
+### `<cc-swiper>`
+
+Main carousel component.
+
+**Attributes:**
+- `has-thumb`: Show thumbnail gallery
+- `autoplay`: Enable autoplay
+
+**Methods:**
+- `openViewer(imageUrl: string, imageType: string, slideIndex?: number)`: Programmatically open viewer
+
+**Events:**
+- `slidechange`: Fired when slide changes
+
+### `<cc-swiper-slide>`
+
+Individual slide component.
+
+**Attributes:**
+- `thumbnail-url`: URL for thumbnail image
+- `image-url`: URL for full media
+- `image-type`: Media type (see supported types above)
+- `caption`: Optional caption text
+
+### Viewer Components
+
+All viewer components inherit from `CcViewerBase` and support:
+
+**Methods:**
+- `open(url: string)`: Open viewer with media
+- `close()`: Close viewer
+
+**Properties:**
+- `showPrevButton`: Show/hide previous button
+- `showNextButton`: Show/hide next button
+
+### Media-specific Examples
+
+#### 3D Model Viewer
+```html
+<cc-swiper-slide 
+  thumbnail-url="thumb.jpg"
+  image-url="model.obj"
+  image-type="3dmodel"
+  material-url="model.mtl"
+  debug-mode="true"
+  camera-position="0,1,5"
+  camera-target="0,0,0"
+  show-texture="true">
+</cc-swiper-slide>
+```
+
+#### Gaussian Splatting Viewer
+```html
+<cc-swiper-slide
+  thumbnail-url="thumb.jpg"
+  image-url="scene.splat"
+  image-type="gaussian"
+  debug-mode="true"
+  camera-position="0,0,10">
+</cc-swiper-slide>
+```
+
+#### YouTube Video
+```html
+<cc-swiper-slide
+  thumbnail-url="thumb.jpg"
+  image-url="https://www.youtube.com/watch?v=VIDEO_ID"
+  image-type="youtube">
+</cc-swiper-slide>
+```
+
+## Styling
+
+CSS Custom Properties:
+
+```css
+cc-swiper {
+  --cc-slider-theme-color: #007aff;
+  --cc-slider-navigation-color: #007aff;
+}
+
+cc-viewer {
+  --cc-viewer-z-index: 1000;
+}
+```
+
+## Browser Support
+
+Works in all modern browsers that support Web Components:
+- Chrome/Edge 79+
+- Firefox 63+
+- Safari 12.1+
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm run dev
+
+# Run tests
+pnpm test
+
+# Build library
+pnpm run build
+```
+
+## License
+
+MIT License - see LICENSE file for details.
+
+## Migration from Quyuan
+
+If you're migrating from the original Quyuan implementation:
+
+1. Change imports from `quyuan` to `@c4h/chuci`
+2. Component names remain the same (`cc-swiper`, `cc-swiper-slide`, etc.)
+3. 3D model URLs no longer use pipe-separated format:
+   ```html
+   <!-- Old -->
+   <cc-swiper-slide image-url="model.obj|model.mtl" ...>
+   
+   <!-- New -->
+   <cc-swiper-slide image-url="model.obj" material-url="model.mtl" ...>
+   ```
+
+## Credits
+
+Extracted from [Quyuan](https://github.com/code4history/Quyuan) by Code for History.