276ed71f31
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm
Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)
Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability
Migration completed: $(date)
🤖 Clean migration with full functionality preserved
76 lines
2.2 KiB
JavaScript
76 lines
2.2 KiB
JavaScript
// DSS Team Portal - State Bridge & Token Synchronizer
|
|
import { subscribe } from './store.js';
|
|
import { camera } from './scene.js';
|
|
import { updateCrystalColor } from './scene.js';
|
|
import gsap from 'gsap';
|
|
|
|
const uiContainer = document.getElementById('ui-container');
|
|
|
|
function initializeBridge() {
|
|
// 1. StateBridge: Subscribe to store changes and trigger animations
|
|
subscribe((state) => {
|
|
const { viewState } = state;
|
|
|
|
if (viewState === 'TRANSITION_TO_2D') {
|
|
gsap.to(camera.position, {
|
|
duration: 1.5,
|
|
z: 10, // Dolly out
|
|
ease: 'power2.inOut',
|
|
});
|
|
gsap.to(uiContainer, {
|
|
duration: 1.5,
|
|
opacity: 1,
|
|
y: 0,
|
|
ease: 'power2.inOut',
|
|
onComplete: () => store.getState().actions.setViewState('2D_WORKBENCH')
|
|
});
|
|
}
|
|
|
|
if (viewState === 'TRANSITION_TO_3D') {
|
|
gsap.to(camera.position, {
|
|
duration: 1.5,
|
|
z: 5, // Dolly in
|
|
ease: 'power2.inOut',
|
|
});
|
|
gsap.to(uiContainer, {
|
|
duration: 1.5,
|
|
opacity: 0,
|
|
y: 20,
|
|
ease: 'power2.inOut',
|
|
onComplete: () => store.getState().actions.setViewState('3D_HOME')
|
|
});
|
|
}
|
|
});
|
|
|
|
// Set initial UI state
|
|
gsap.set(uiContainer, { opacity: 0, y: 20 });
|
|
}
|
|
|
|
function initializeTokenSynchronizer() {
|
|
// 2. TokenSynchronizer: Sync theme colors to the 3D scene
|
|
const sync = () => {
|
|
const style = getComputedStyle(document.body);
|
|
const primaryColor = style.getPropertyValue('--color-primary').trim();
|
|
if (primaryColor) {
|
|
updateCrystalColor(primaryColor);
|
|
}
|
|
};
|
|
|
|
// Sync on init
|
|
sync();
|
|
|
|
// Sync when theme changes
|
|
subscribe((state, prevState) => {
|
|
if (state.theme !== prevState.theme) {
|
|
document.body.dataset.theme = state.theme;
|
|
// Allow time for CSS to apply
|
|
setTimeout(sync, 50);
|
|
}
|
|
});
|
|
|
|
// Set initial theme
|
|
document.body.dataset.theme = store.getState().theme;
|
|
}
|
|
|
|
export { initializeBridge, initializeTokenSynchronizer };
|