@buley/hexgrid-3d 1.1.0 → 1.1.2

package/site/src/app/docs/page.tsx

@@ -0,0 +1,148 @@
+import Link from 'next/link';
+
+export const metadata = {
+  title: 'Documentation - HexGrid 3D',
+  description: 'Complete documentation for HexGrid 3D component',
+};
+
+export default function DocsPage() {
+  return (
+    <div className="container" style={{ paddingTop: '4rem', paddingBottom: '4rem' }}>
+      <Link href="/" style={{ color: '#667eea', marginBottom: '2rem', display: 'inline-block' }}>
+        ← Back to Home
+      </Link>
+
+      <h1 style={{ fontSize: '3rem', marginBottom: '1rem' }}>Documentation</h1>
+      <p style={{ color: '#a0a0a0', marginBottom: '3rem', fontSize: '1.2rem' }}>
+        Complete guide to using HexGrid 3D in your projects
+      </p>
+
+      <div style={{ display: 'grid', gap: '2rem' }}>
+        <section>
+          <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Installation</h2>
+          <div className="code-block">
+            <code>npm install @buley/hexgrid-3d</code>
+          </div>
+        </section>
+
+        <section>
+          <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Basic Usage</h2>
+          <div className="code-block">
+            <code>
+              {`import { HexGrid, Photo } from '@buley/hexgrid-3d'
+
+function MyComponent() {
+  const photos: Photo[] = [
+    {
+      id: '1',
+      url: 'https://example.com/photo.jpg',
+      source: 'example',
+      createdAt: new Date().toISOString()
+    }
+  ]
+
+  return (
+    <HexGrid
+      photos={photos}
+      onHexClick={(photo) => console.log('Clicked:', photo)}
+    />
+  )
+}`}
+            </code>
+          </div>
+        </section>
+
+        <section>
+          <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Props</h2>
+          <div style={{ background: '#1a1a1a', padding: '1.5rem', borderRadius: '8px', border: '1px solid #2a2a2a' }}>
+            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+              <thead>
+                <tr style={{ borderBottom: '1px solid #2a2a2a' }}>
+                  <th style={{ padding: '0.75rem', textAlign: 'left', color: '#fff' }}>Prop</th>
+                  <th style={{ padding: '0.75rem', textAlign: 'left', color: '#fff' }}>Type</th>
+                  <th style={{ padding: '0.75rem', textAlign: 'left', color: '#fff' }}>Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr style={{ borderBottom: '1px solid #2a2a2a' }}>
+                  <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>photos</code></td>
+                  <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>Photo[]</code></td>
+                  <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>Array of photos to display</td>
+                </tr>
+                <tr style={{ borderBottom: '1px solid #2a2a2a' }}>
+                  <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>onHexClick</code></td>
+                  <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>(photo: Photo) =&gt; void</code></td>
+                  <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>Callback when hex is clicked</td>
+                </tr>
+                <tr style={{ borderBottom: '1px solid #2a2a2a' }}>
+                  <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>spacing</code></td>
+                  <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>number</code></td>
+                  <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>Grid spacing multiplier</td>
+                </tr>
+                <tr>
+                  <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>canvasRef</code></td>
+                  <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>RefObject</code></td>
+                  <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>Optional canvas reference</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        <section>
+          <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Camera Controls</h2>
+          <div style={{ background: '#1a1a1a', padding: '1.5rem', borderRadius: '8px', border: '1px solid #2a2a2a' }}>
+            <h3 style={{ marginBottom: '1rem', color: '#fff' }}>Mouse/Trackpad</h3>
+            <ul style={{ color: '#a0a0a0', lineHeight: '1.8', marginLeft: '1.5rem' }}>
+              <li>Left Click + Drag - Rotate camera (yaw and pitch)</li>
+              <li>Scroll - Zoom in/out</li>
+              <li>Click on Hex - Select photo</li>
+            </ul>
+
+            <h3 style={{ marginTop: '2rem', marginBottom: '1rem', color: '#fff' }}>Touch</h3>
+            <ul style={{ color: '#a0a0a0', lineHeight: '1.8', marginLeft: '1.5rem' }}>
+              <li>Single Touch Drag - Rotate camera</li>
+              <li>Pinch - Zoom in/out</li>
+              <li>Tap on Hex - Select photo</li>
+            </ul>
+
+            <h3 style={{ marginTop: '2rem', marginBottom: '1rem', color: '#fff' }}>Keyboard</h3>
+            <ul style={{ color: '#a0a0a0', lineHeight: '1.8', marginLeft: '1.5rem' }}>
+              <li>D - Toggle debug panel</li>
+              <li>Escape - Close debug panel</li>
+            </ul>
+          </div>
+        </section>
+
+        <section>
+          <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Performance</h2>
+          <p style={{ color: '#a0a0a0', lineHeight: '1.8', marginBottom: '1rem' }}>
+            HexGrid 3D uses Web Workers for heavy calculations to maintain 60fps rendering:
+          </p>
+          <ul style={{ color: '#a0a0a0', lineHeight: '1.8', marginLeft: '1.5rem' }}>
+            <li>Streaming Rendering - Progressively renders tiles</li>
+            <li>Texture Caching - Reuses loaded images</li>
+            <li>Adaptive Quality - Adjusts detail based on performance</li>
+            <li>Low-Res Mode - Optional reduced quality for slower devices</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>More Information</h2>
+          <p style={{ color: '#a0a0a0', lineHeight: '1.8' }}>
+            For complete API documentation, examples, and advanced usage, see the{' '}
+            <a
+              href="https://github.com/buley/hexgrid-3d"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: '#667eea' }}
+            >
+              GitHub repository
+            </a>
+            .
+          </p>
+        </section>
+      </div>
+    </div>
+  );
+}

package/site/src/app/examples/page.tsx

@@ -0,0 +1,133 @@
+import Link from 'next/link';
+
+export const metadata = {
+  title: 'Examples - HexGrid 3D',
+  description: 'Example implementations of HexGrid 3D',
+};
+
+export default function ExamplesPage() {
+  return (
+    <div className="container" style={{ paddingTop: '4rem', paddingBottom: '4rem' }}>
+      <Link href="/" style={{ color: '#667eea', marginBottom: '2rem', display: 'inline-block' }}>
+        ← Back to Home
+      </Link>
+
+      <h1 style={{ fontSize: '3rem', marginBottom: '1rem' }}>Examples</h1>
+      <p style={{ color: '#a0a0a0', marginBottom: '3rem', fontSize: '1.2rem' }}>
+        See HexGrid 3D in action with these example implementations
+      </p>
+
+      <div style={{ display: 'grid', gap: '2rem' }}>
+        <section>
+          <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Basic Example</h2>
+          <div className="code-block">
+            <code>
+              {`import { HexGrid, Photo } from '@buley/hexgrid-3d'
+
+function BasicExample() {
+  const photos: Photo[] = [
+    {
+      id: '1',
+      url: 'https://example.com/photo1.jpg',
+      source: 'example',
+      createdAt: new Date().toISOString()
+    },
+    {
+      id: '2',
+      url: 'https://example.com/photo2.jpg',
+      source: 'example',
+      createdAt: new Date().toISOString()
+    }
+  ]
+
+  return (
+    <HexGrid
+      photos={photos}
+      onHexClick={(photo) => {
+        console.log('Selected photo:', photo)
+      }}
+    />
+  )
+}`}
+            </code>
+          </div>
+        </section>
+
+        <section>
+          <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Advanced Example with Controls</h2>
+          <div className="code-block">
+            <code>
+              {`import { HexGrid, Photo, uiStore } from '@buley/hexgrid-3d'
+import { useRef, useState } from 'react'
+
+function AdvancedExample() {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const [modalOpen, setModalOpen] = useState(false)
+
+  return (
+    <div>
+      {/* Control buttons */}
+      <button onClick={() => uiStore.toggleDebug()}>
+        Toggle Debug
+      </button>
+      <button onClick={() => uiStore.toggleCamera()}>
+        Camera Controls
+      </button>
+
+      {/* Visualization */}
+      <HexGrid
+        photos={photos}
+        canvasRef={canvasRef}
+        spacing={1.2}
+        modalOpen={modalOpen}
+        onHexClick={(photo) => setModalOpen(true)}
+        autoplayQueueLimit={100}
+      />
+    </div>
+  )
+}`}
+            </code>
+          </div>
+        </section>
+
+        <section>
+          <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>With Custom Theming</h2>
+          <div className="code-block">
+            <code>
+              {`import { HexGrid, Photo } from '@buley/hexgrid-3d'
+import { setCustomAccentColor } from '@/lib/theme-colors'
+
+function ThemedExample() {
+  // Set custom accent color
+  setCustomAccentColor('#ff00ff')
+
+  return (
+    <HexGrid
+      photos={photos}
+      onHexClick={(photo) => console.log('Clicked:', photo)}
+    />
+  )
+}`}
+            </code>
+          </div>
+        </section>
+
+        <section>
+          <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>More Examples</h2>
+          <p style={{ color: '#a0a0a0', lineHeight: '1.8' }}>
+            For more examples and use cases, check out the{' '}
+            <a
+              href="https://github.com/buley/hexgrid-3d/tree/main/examples"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: '#667eea' }}
+            >
+              examples directory
+            </a>
+            {' '}in the GitHub repository.
+          </p>
+        </section>
+      </div>
+    </div>
+  );
+}

package/site/src/app/globals.css

@@ -0,0 +1,160 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+  background: #000;
+  color: #fff;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.section {
+  padding: 4rem 0;
+}
+
+.hero {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 2rem;
+}
+
+.hero h1 {
+  font-size: 4rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero p {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+  color: #a0a0a0;
+  max-width: 800px;
+}
+
+.button {
+  display: inline-block;
+  padding: 1rem 2rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: transform 0.2s, box-shadow 0.2s;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+}
+
+.button-secondary {
+  background: transparent;
+  border: 2px solid #667eea;
+  color: #667eea;
+}
+
+.button-secondary:hover {
+  background: #667eea;
+  color: white;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  margin-top: 3rem;
+}
+
+.feature-card {
+  background: #1a1a1a;
+  padding: 2rem;
+  border-radius: 12px;
+  border: 1px solid #2a2a2a;
+  transition: transform 0.2s, border-color 0.2s;
+}
+
+.feature-card:hover {
+  transform: translateY(-4px);
+  border-color: #667eea;
+}
+
+.feature-card h3 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  color: #fff;
+}
+
+.feature-card p {
+  color: #a0a0a0;
+  line-height: 1.6;
+}
+
+.code-block {
+  background: #1a1a1a;
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  padding: 1.5rem;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+}
+
+.code-block code {
+  color: #a0a0a0;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
+}
+
+.footer {
+  background: #0a0a0a;
+  padding: 3rem 0;
+  text-align: center;
+  color: #666;
+  border-top: 1px solid #1a1a1a;
+}
+
+@media (max-width: 768px) {
+  .hero h1 {
+    font-size: 2.5rem;
+  }
+
+  .hero p {
+    font-size: 1.2rem;
+  }
+
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+}

package/site/src/app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'HexGrid 3D - Immersive 3D Hexagonal Grid Visualization',
+  description: 'A powerful React component for displaying content in an immersive 3D spherical hexagonal grid layout. Perfect for portfolios, galleries, and interactive visualizations.',
+  keywords: ['3D', 'hexgrid', 'visualization', 'react', 'three.js', 'spherical', 'interactive'],
+  authors: [{ name: 'buley' }],
+  openGraph: {
+    title: 'HexGrid 3D - Immersive 3D Hexagonal Grid Visualization',
+    description: 'A powerful React component for displaying content in an immersive 3D spherical hexagonal grid layout.',
+    type: 'website',
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

package/site/src/app/page.tsx

@@ -0,0 +1,163 @@
+import Link from 'next/link';
+
+export default function HomePage() {
+  return (
+    <main>
+      {/* Hero Section */}
+      <section className="hero">
+        <h1>HexGrid 3D</h1>
+        <p>
+          A powerful React component for displaying content in an immersive 3D
+          spherical hexagonal grid layout. Perfect for portfolios, galleries, and
+          interactive visualizations.
+        </p>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', justifyContent: 'center' }}>
+          <Link href="/docs" className="button">
+            Get Started
+          </Link>
+          <Link href="/examples" className="button button-secondary">
+            View Examples
+          </Link>
+          <a
+            href="https://github.com/buley/hexgrid-3d"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="button button-secondary"
+          >
+            GitHub
+          </a>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="section container">
+        <h2 style={{ fontSize: '2.5rem', marginBottom: '1rem', textAlign: 'center' }}>
+          Powerful Features
+        </h2>
+        <p style={{ textAlign: 'center', color: '#a0a0a0', marginBottom: '3rem', fontSize: '1.2rem' }}>
+          Everything you need to create stunning 3D visualizations
+        </p>
+        <div className="features-grid">
+          <div className="feature-card">
+            <div style={{ marginBottom: '1rem', color: '#667eea', fontSize: '2rem' }}>📐</div>
+            <h3>3D Hexagonal Grid</h3>
+            <p>
+              Spherical projection with customizable curvature. Display your content
+              in an immersive 3D space that adapts to any viewport.
+            </p>
+          </div>
+
+          <div className="feature-card">
+            <div style={{ marginBottom: '1rem', color: '#667eea', fontSize: '2rem' }}>📷</div>
+            <h3>Interactive Camera</h3>
+            <p>
+              Pan, zoom, and rotate with smooth transitions. Support for mouse,
+              touch, and keyboard controls with inside/outside views.
+            </p>
+          </div>
+
+          <div className="feature-card">
+            <div style={{ marginBottom: '1rem', color: '#667eea', fontSize: '2rem' }}>⚡</div>
+            <h3>High Performance</h3>
+            <p>
+              Web Worker rendering for 60fps performance. Automatic texture caching
+              and adaptive quality based on device capabilities.
+            </p>
+          </div>
+
+          <div className="feature-card">
+            <div style={{ marginBottom: '1rem', color: '#667eea', fontSize: '2rem' }}>🎨</div>
+            <h3>Dynamic Theming</h3>
+            <p>
+              Automatic accent color extraction from images. Seamless integration
+              with your app&apos;s theme system.
+            </p>
+          </div>
+
+          <div className="feature-card">
+            <div style={{ marginBottom: '1rem', color: '#667eea', fontSize: '2rem' }}>📱</div>
+            <h3>Responsive Design</h3>
+            <p>
+              Fully responsive for mobile and desktop. Touch gestures, pinch-to-zoom,
+              and adaptive layouts for all screen sizes.
+            </p>
+          </div>
+
+          <div className="feature-card">
+            <div style={{ marginBottom: '1rem', color: '#667eea', fontSize: '2rem' }}>💻</div>
+            <h3>TypeScript Ready</h3>
+            <p>
+              Fully typed with comprehensive TypeScript definitions. Includes
+              comprehensive tests and documentation.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Quick Start Section */}
+      <section className="section container">
+        <h2 style={{ fontSize: '2.5rem', marginBottom: '2rem', textAlign: 'center' }}>
+          Quick Start
+        </h2>
+        <div className="code-block">
+          <code>
+            {`npm install @buley/hexgrid-3d`}
+          </code>
+        </div>
+        <div className="code-block">
+          <code>
+            {`import { HexGrid, Photo } from '@buley/hexgrid-3d'
+
+function MyComponent() {
+  const photos: Photo[] = [
+    {
+      id: '1',
+      url: 'https://example.com/photo.jpg',
+      source: 'example',
+      createdAt: new Date().toISOString()
+    }
+  ]
+
+  return (
+    <HexGrid
+      photos={photos}
+      onHexClick={(photo) => console.log('Clicked:', photo)}
+    />
+  )
+}`}
+          </code>
+        </div>
+        <div style={{ textAlign: 'center', marginTop: '2rem' }}>
+          <Link href="/docs" className="button">
+            Read Full Documentation
+          </Link>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="footer">
+        <div className="container">
+          <p>&copy; 2024 HexGrid 3D. Personal Use Only License.</p>
+          <p style={{ marginTop: '0.5rem', fontSize: '0.9rem' }}>
+            <a
+              href="https://github.com/buley/hexgrid-3d"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: '#667eea' }}
+            >
+              View on GitHub
+            </a>
+            {' • '}
+            <Link href="/docs" style={{ color: '#667eea' }}>
+              Documentation
+            </Link>
+            {' • '}
+            <Link href="/examples" style={{ color: '#667eea' }}>
+              Examples
+            </Link>
+          </p>
+        </div>
+      </footer>
+    </main>
+  );
+}

package/site/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/components/*": ["./src/components/*"],
+      "@/lib/*": ["./src/lib/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/site/vercel.json

@@ -0,0 +1,6 @@
+{
+  "framework": "nextjs",
+  "buildCommand": "npm run build",
+  "outputDirectory": ".next",
+  "installCommand": "npm install"
+}