Phase 6: Visual Creator Tools for HoloScript+ - Trait Editor and Real-Time Preview Dashboard
npm install @holoscript/creator-toolsbash
Install
npm install @holoscript/creator-tools
Import React components
import { TraitEditor, PreviewDashboard, Phase6CompleteDemo } from '@holoscript/creator-tools'
Use complete demo
`
---
📦 What's Included
$3
- TraitAnnotationEditor (500+ LOC) - Visual editing backend
- RealtimePreviewEngine (600+ LOC) - Multi-device preview engine
$3
- TraitEditor (600+ LOC) - Visual trait editor UI
- PreviewDashboard (800+ LOC) - Real-time metrics dashboard
- Phase6CompleteDemo (300+ LOC) - Complete integrated application
$3
- PHASE_6_UI_COMPONENTS_GUIDE.md - Complete integration guide
- API Reference - Full TypeScript definitions
- Examples - Real-world usage patterns
Total: 1,700+ LOC of production-ready code
---
🎯 Features
$3
✅ Visual Property Controls
- 🎚️ Sliders for numeric values
- 🎨 Color pickers for colors
- 📋 Dropdowns for enums
- ✓ Checkboxes for booleans
- 📝 Text inputs for strings
✅ Professional Presets
- Gold (shiny metallic)
- Steel (industrial)
- Studio (optimized)
- High-Performance (minimal)
✅ Developer Friendly
- Live HoloScript+ code generation
- Undo/Redo (50-item history)
- Import/Export configuration
- Full validation system
- Event subscription
$3
✅ Multi-Device Support
- 📱 iPhone 15 Pro
- 📱 iPad Pro 12.9
- 🥽 Meta Quest 3
- 🥽 Apple Vision Pro
- 🥽 HoloLens 2
- 💻 RTX 4090
✅ Performance Metrics
- 📈 FPS (60+ FPS target)
- 🧠 GPU Memory (% of budget)
- 🎯 Draw Calls
- 📐 Vertices Rendered
- ⚡ Shader Compile Time
✅ Intelligence
- 💡 AI-powered recommendations
- 📊 Cross-device comparison
- 📈 Performance history (300 samples)
- ⚠️ Warnings & error detection
- 🎯 Optimization suggestions
$3
✅ Three View Modes
- ✏️ Editor-only view
- 👁️ Preview-only view
- ⚔️ Split view (side-by-side)
✅ Live Workflow
- Real-time property editing
- Instant code generation
- Live device preview
- Performance monitoring
- Smart recommendations
---
📚 Usage
$3
`typescript
import React from 'react'
import { TraitEditor } from '@holoscript/creator-tools'
export function MyCreator() {
const [code, setCode] = React.useState('')
const config = {
type: 'material' as const,
properties: {
metallic: {
name: 'metallic',
value: 0.8,
type: 'number' as const,
min: 0,
max: 1,
step: 0.01,
description: 'Metallic intensity',
category: 'pbr'
}
},
isDirty: false
}
return (
onCodeChange={setCode}
theme="light"
/>
)
}
`
$3
`typescript
import React from 'react'
import { PreviewDashboard } from '@holoscript/creator-tools'
export function MyPreview() {
return (
autoRefresh={true}
refreshInterval={1000}
/>
)
}
`
$3
`typescript
import React from 'react'
import { Phase6CompleteDemo } from '@holoscript/creator-tools'
export default function App() {
return
}
`
---
🏗️ Architecture
$3
`
Phase6CompleteDemo
├── TraitEditor
│ ├── PropertiesPanel
│ │ └── PropertyControl × N
│ ├── CodePanel
│ └── PreviewPanel
│
└── PreviewDashboard
├── DeviceOverviewCard × 6
├── DetailedMetricsPanel
├── RecommendationsPanel
├── PerformanceComparisonTable
├── MetricsHistoryChart
└── WarningsErrorsPanel
`
$3
`
User edits property
↓
TraitEditor receives change
↓
Backend editor validates
↓
Code generated in real-time
↓
onCodeChange() callback fires
↓
Preview engine updates
↓
All 6 devices render preview
↓
Metrics calculated
↓
PreviewDashboard displays results
`
---
📊 Performance
$3
- Initial render: <500ms
- Property update: <100ms
- Preview update: 200-500ms
- Metrics update: 60 FPS
$3
- Idle state: ~12 MB
- With preview engine: ~35 MB
- Full history (300 samples): ~50 MB
$3
- TraitEditor: ~45 KB (gzipped)
- PreviewDashboard: ~52 KB (gzipped)
- Combined with backends: ~175 KB (gzipped)
---
🎨 Styling
All components use inline styles with a professional design system:
Colors:
- Primary: #2196f3 (blue)
- Success: #4caf50 (green)
- Warning: #ff9800 (orange)
- Error: #f44336 (red)
- Background: #ffffff (white)
- Surface: #f5f5f5 (light gray)
Typography:
- Font: system-ui, -apple-system, sans-serif
- Monospace: monospace (for code)
Spacing:
- Base unit: 0.5rem (8px)
- Standard gaps: 1rem (16px)
- Section spacing: 1.5rem (24px)
Borders & Shadows:
- Border color: #e0e0e0
- Border radius: 4-8px
- Box shadows: subtle 0-2px effects
---
🔧 API Reference
$3
`typescript
interface TraitEditorProps {
initialConfig: EditableTraitConfig
onCodeChange?: (code: string) => void
onMetricsUpdate?: (metrics: Map) => void
theme?: 'light' | 'dark'
previewDevices?: ('mobile' | 'vr' | 'desktop')[]
}
`
$3
`typescript
interface PreviewDashboardProps {
traitCode: string
onMetricsUpdate?: (metrics: Map) => void
onRecommendation?: (recommendation: string) => void
autoRefresh?: boolean
refreshInterval?: number
}
`
$3
`typescript
class TraitAnnotationEditor {
generateCode(): string
updateProperty(name: string, value: unknown): { success: boolean; error?: string }
applyPreset(name: string): void
undo(): void
redo(): void
exportConfig(): string
importConfig(json: string): void
on(event: string, callback: Function): void
off(event: string, callback: Function): void
}
`
$3
`typescript
class RealtimePreviewEngine {
registerDevice(device: PreviewDevice): void
updatePreview(traitCode: string): Promise
startMonitoring(interval?: number): void
stopMonitoring(): void
getRecommendations(): string[]
compareMetrics(): ComparisonResult[]
exportResults(): string
on(event: string, callback: Function): void
}
`
---
🎓 Examples
$3
`typescript
const materialConfig: EditableTraitConfig = {
type: 'material',
properties: {
type: {
name: 'type',
value: 'pbr',
type: 'enum',
options: ['pbr', 'standard', 'unlit'],
description: 'Material type',
category: 'core'
},
metallic: {
name: 'metallic',
value: 0.8,
type: 'number',
min: 0,
max: 1,
description: 'Metallic intensity',
category: 'pbr'
},
roughness: {
name: 'roughness',
value: 0.2,
type: 'number',
min: 0,
max: 1,
description: 'Surface roughness',
category: 'pbr'
},
baseColor: {
name: 'baseColor',
value: '#ffffff',
type: 'color',
description: 'Primary color',
category: 'appearance'
}
},
isDirty: false
}
// Generated code:
// @material { type: pbr, metallic: 0.8, roughness: 0.2, baseColor: #ffffff }
`
$3
`typescript
const lightingConfig: EditableTraitConfig = {
type: 'lighting',
properties: {
intensity: {
name: 'intensity',
value: 1.0,
type: 'number',
min: 0,
max: 5,
description: 'Light intensity',
category: 'intensity'
},
color: {
name: 'color',
value: '#ffffff',
type: 'color',
description: 'Light color',
category: 'appearance'
},
castShadows: {
name: 'castShadows',
value: true,
type: 'boolean',
description: 'Enable shadow casting',
category: 'rendering'
}
},
isDirty: false
}
`
$3
`typescript
function PerformanceMonitor() {
const [metrics, setMetrics] = React.useState>(new Map())
const [status, setStatus] = React.useState('idle')
return (
onMetricsUpdate={(newMetrics) => {
setMetrics(newMetrics)
// Check if any device is underperforming
const poorPerformance = Array.from(newMetrics.values())
.some(m => m.fps < 30)
setStatus(poorPerformance ? 'warning' : 'ok')
}}
autoRefresh={true}
refreshInterval={1000}
/>
Status: {status}
)
}
`
---
🧪 Testing
`bash
Run all tests
npm run test
Run with UI
npm run test:ui
Type checking
npm run type-check
Linting
npm run lint
Format code
npm run format
`
---
📋 Supported Trait Types
$3
`
@material {
type: 'pbr' | 'standard' | 'unlit' | 'transparent'
metallic: 0-1
roughness: 0-1
baseColor: hex color
emissive: hex color
aoIntensity: 0-1
}
`
$3
`
@lighting {
type: 'directional' | 'point' | 'spot'
intensity: 0-5
color: hex color
castShadows: boolean
shadowResolution: 512 | 1024 | 2048 | 4096
}
`
$3
`
@rendering {
quality: 'low' | 'medium' | 'high' | 'ultra'
targetFps: 30 | 60 | 90 | 120
useComputeShaders: boolean
enableRayTracing: boolean
}
`
---
🔐 Browser Support
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
All modern browsers with ES2020+ support and React 18+
---
📦 Installation Options
$3
`bash
npm install @holoscript/creator-tools
`
$3
`bash
yarn add @holoscript/creator-tools
`
$3
`bash
pnpm add @holoscript/creator-tools
``