lumina-slides 8.9.4 → 9.0.0

package/src/directives/vStudio.ts

@@ -0,0 +1,45 @@
+import { Directive, DirectiveBinding } from 'vue';
+
+export const vStudio: Directive = {
+    mounted(el: HTMLElement, binding: DirectiveBinding) {
+        // binding.value should be the path string e.g. "elements.0.title"
+
+        // We use a data attribute to store the path for debugging/logic
+        el.dataset.studioPath = binding.value;
+
+        // Hover Effect
+        el.addEventListener('mouseenter', () => {
+            // Only if studio mode is enabled? 
+            // We can check a global class on body or just always emit and let parent decide.
+            // Better: check if a specific class exists on a parent, or use a store if possible (hard in directive).
+            // For now, let's just add a class that we can style in CSS only when .studio-mode is active.
+            el.classList.add('studio-hover');
+        });
+
+        el.addEventListener('mouseleave', () => {
+            el.classList.remove('studio-hover');
+        });
+
+        // Click Handler
+        el.addEventListener('click', (e) => {
+            // We want to stop propagation so we select the most specific element
+            e.stopPropagation();
+
+            const rect = el.getBoundingClientRect();
+
+            const event = new CustomEvent('studio-select', {
+                bubbles: true,
+                detail: {
+                    path: binding.value,
+                    rect: rect
+                }
+            });
+
+            el.dispatchEvent(event);
+        });
+    },
+
+    updated(el: HTMLElement, binding: DirectiveBinding) {
+        el.dataset.studioPath = binding.value;
+    }
+};

package/src/index.ts

@@ -0,0 +1,175 @@
+/**
+ * lumina-slides — Renders declarative JSON into animated slide decks. Vanilla JS; Vue not required.
+ *
+ * ---
+ * ## Quick reference for LLMs and code agents
+ *
+ * **Entry:** `import { Lumina } from "lumina-slides"; import "lumina-slides/style.css";`
+ * `const engine = new Lumina("#app", options); engine.load(deck);`
+ *
+ * **Deck:** `{ meta: { title, initialElementState?, elementControl?, effects? }, slides: [...] }`
+ * Slide types: statement, features, half, timeline, steps, flex, chart, diagram, custom, video.
+ *
+ * **Element control:** `engine.element(id)` or `engine.element(slideIndex, path)` → ElementController:
+ * `.show()`, `.hide()`, `.toggle()`, `.opacity(n)`, `.transform(s)`, `.animate({ preset?, from?, to?, duration?, ease? })`.
+ * Presets: fadeUp, fadeIn, scaleIn, slideLeft, slideRight, zoomIn, blurIn, spring, drop, fadeOut. `to` optional when using preset.
+ * Ids: `engine.elements(slideIndex)` or `s{N}-{path}` (e.g. s0-tag, s1-features-0). `meta.initialElementState`:
+ * `{ [id]: { visible?: false } }` to start hidden; then `engine.element(id).show()`.
+ *
+ * **Helpers:** `hideAll(slideIndex?)`, `showAll(slideIndex?)`, `showOnly(ids?)`, `hideAllExcept(exceptIds?)`,
+ * `resetSlide(slideIndex?)`, `delay(ms)`, `revealInSequence(slideIndex?, { delayMs?, staggerMode?, preset?, from?, to?, duration?, ease?, hideFirst?, only?, exclude? })`.
+ * StaggerMode: sequential, center-out, ends-in, wave, random. Animation: `getPreset`, `registerPreset`, `computeStagger`, `BUILTIN_PRESETS`.
+ *
+ * **Timeline (Remotion-style):** `slide.timelineTracks` = `{ [id]: { "0": { opacity?, x?, y?, scale?, rotate?, visible? }, "0.3": {...}, "1": {...} } }`.
+ * `type: "free"` layout: `elements: [{ type: "text"|"image"|"box", text?, src?, width?, height?, ... }]` — absolute positioning, storytelling.
+ * `engine.seekTo(progress)`, `engine.playTimeline(duration?)` → `[Promise, cancel]`, `engine.timelineProgress`, `element(id).animateToProgress(progress, keyframes)`. Example: *Animation: Timeline* in Examples.
+ *
+ * **Animation config:** All timings/eases overridable via `options.animation`, `deck.meta.effects`, `slide.meta.effects`.
+ * `resolveTransitionConfig(store, slide?)` returns merged config. `ANIMATION_DEFAULTS` has all keys.
+ * Keys: durationIn, durationOut, stagger, ease, revealDelayMs, revealDuration, revealEase, elementDuration, elementEase, easeOut, etc.
+ *
+ * **Events:** `engine.on("ready"|"slideChange"|"action"|"error"|"patch"|"destroy"|"navigate"|"themeChange"|"speakerNotesOpen"|"speakerNotesClose"|"timelineSeek"|"timelineComplete"|"revealStart"|"revealComplete"|"revealElement", handler)`. `engine.emitError(err)` to forward errors.
+ * **State for LLM:** `engine.exportState()` → `{ currentSlide, narrative, history }`.
+ * **Key-value store:** `engine.data.get(key)`, `engine.data.set(key, value)`, `engine.data.has(key)`, `engine.data.delete(key)`, `engine.data.clear()`, `engine.data.keys()`. Persists across deck loads.
+ *
+ * **Streaming:** `parsePartialJson(buffer)` then `engine.load(json)`. Or `createDebouncedLoader(engine.load, ms)`.
+ * **Prompts:** `generateSystemPrompt({ mode, includeSchema, includeTheming })`, `generateThemePrompt()`.
+ * **Schema:** `getLuminaJsonSchema()`.
+ *
+ * **More:** IMPLEMENTATION.md, AGENTS.md, ELEMENT_IDS.md. Full JSDoc: this package includes `src/`; read
+ * `src/core/Lumina.ts`, `src/core/animationConfig.ts`, `src/core/types.ts`. Minified `dist/` strips comments.
+ */
+export { Lumina } from './core/Lumina';
+
+export type {
+    LuminaOptions,
+    LuminaDataStore,
+    Deck,
+    BaseSlideData as SlideData,
+    ThemeConfig,
+    LuminaEventMap,
+    // Detailed Types for Docs
+    DeckMeta,
+    // Slide Interfaces
+    SlideStatement,
+    SlideFeatures,
+    SlideHalf,
+    SlideTimeline,
+    SlideSteps,
+    SlideFlex,
+    SlideChart,
+    SlideFree,
+    SlideGeneric,
+    SlideCustom,
+    FreeElement,
+    FeatureItem,
+    StepItem,
+    TimelineItem,
+    SlideMeta,
+    LuminaEventType,
+    SlideChangePayload,
+    ActionPayload,
+    PatchPayload,
+    NavigatePayload,
+    ThemeChangePayload,
+    TimelineSeekPayload,
+    TimelineCompletePayload,
+    RevealStartPayload,
+    RevealCompletePayload,
+    RevealElementPayload,
+    LuminaUIOptions,
+    LuminaAnimationOptions,
+    LuminaKeyBindings,
+    // Chart Types
+    ChartType,
+    ChartData,
+    ChartDataset,
+    // Flex Types
+    FlexElement,
+    FlexChildElement,
+    FlexSize,
+    SpacingToken,
+    VAlign,
+    HAlign,
+    TextAlign,
+    FlexElementImage,
+    FlexElementContent,
+    FlexElementTitle,
+    FlexElementText,
+    FlexElementBullets,
+    FlexElementOrdered,
+    FlexElementButton,
+    FlexElementTimeline,
+    FlexElementStepper,
+    FlexElementSpacer,
+    // Speaker Notes
+    SpeakerSyncPayload,
+    // Theme Types (NEW)
+    ThemeColors,
+    ThemeTypography,
+    ThemeSpacing,
+    ThemeBorderRadius,
+    ThemeEffects,
+    ThemeComponents,
+} from './core/types';
+
+// Events
+export { bus, EventBus, type Handler } from './core/events';
+
+// Speaker Notes
+export { SpeakerChannel, type MessageHandler } from './core/speaker-channel';
+
+// Theme System (NEW)
+export { ThemeManager, DEFAULT_THEME } from './core/theme';
+export { THEME_PRESETS } from './core/presets';
+export { getLuminaJsonSchema, getThemeJsonSchema, ThemeConfigSchema } from './core/schema';
+
+// Prompt Generation
+export { generateSystemPrompt, generateThemePrompt, type SystemPromptOptions } from './core/prompts';
+
+// Streaming (for LLM token streams and partial JSON)
+export { parsePartialJson, createDebouncedLoader, isSlideReady } from './utils/streaming';
+
+// Animation config: centralized defaults and resolution (options / meta.effects / slide.meta.effects)
+export { resolveTransitionConfig, ANIMATION_DEFAULTS, type ResolvedTransitionConfig } from './core/animationConfig';
+
+// Animation: presets, stagger, resolver (ANIMATION_IDEAS.md, ANIMATION_STRATEGY.md)
+export {
+  BUILTIN_PRESETS,
+  getPreset,
+  registerPreset,
+  resolveAnimationFromInput,
+  computeStagger,
+  type StaggerMode,
+  type StaggerOptions,
+  type StaggerStep,
+  type PresetDef,
+} from './animation';
+
+// Element control: resolution and discovery (for engine.element(id), engine.element(slideIndex, path), engine.elements(slideIndex))
+export { elemId } from './core/elementId';
+export {
+  resolveId,
+  parsePath,
+  pathToKey,
+  getElementPaths,
+  getElementIds,
+  registerElementPaths,
+  type ElementPath,
+  type PathGenerator
+} from './core/elementResolver';
+
+export type {
+    ElementState,
+    ElementController,
+    AnimateOptions,
+    RevealInSequenceOptions,
+    InitialElementState,
+    TimelineKeyframes,
+    TimelineKeyframeState,
+    TimelineTracks,
+} from './core/types';
+
+export { default as LuminaDeck } from './components/LuminaDeck.vue';
+export { default as LuminaStudio } from './components/studio/LuminaStudio.vue';
+import './style/main.css';

package/src/main.ts

@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './style/main.css'
+import { initFirebase } from './utils/firebase'
+
+// Initialize Infrastructure
+try {
+    initFirebase();
+} catch (e) {
+    console.error("Failed to initialize Firebase:", e);
+}
+
+import router from './router'
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')

package/src/router/index.ts

@@ -0,0 +1,92 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import { getFirebaseAuth } from '../utils/firebase';
+
+const routes: RouteRecordRaw[] = [
+    {
+        path: '/',
+        component: () => import('../views/SiteLayout.vue'),
+        children: [
+            {
+                path: '',
+                name: 'home',
+                component: () => import('../components/site/SiteHome.vue')
+            },
+            {
+                path: 'dashboard',
+                name: 'dashboard',
+                component: () => import('../components/site/SiteDashboard.vue'),
+                meta: { requiresAuth: true }
+            },
+            {
+                path: 'examples',
+                name: 'examples',
+                component: () => import('../components/site/SiteExamples.vue')
+            },
+            {
+                path: 'docs',
+                name: 'docs',
+                component: () => import('../components/site/SiteDocs.vue')
+            },
+            {
+                path: 'playground',
+                name: 'playground',
+                component: () => import('../components/site/SitePlayground.vue')
+            },
+            {
+                path: 'prompt-builder',
+                name: 'prompt-builder',
+                component: () => import('../components/site/SitePromptBuilder.vue')
+            },
+            {
+                path: 'api',
+                name: 'api',
+                component: () => import('../components/site/SiteApi.vue')
+            }
+        ]
+    },
+    {
+        path: '/studio/:id?',
+        name: 'studio',
+        component: () => import('../views/StudioView.vue'),
+        meta: { requiresAuth: true }
+    },
+    {
+        path: '/deck/:id',
+        name: 'deck',
+        component: () => import('../views/DeckView.vue')
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes,
+    scrollBehavior(_to, _from, savedPosition) {
+        if (savedPosition) {
+            return savedPosition;
+        }
+        return { top: 0 };
+    }
+});
+
+// Navigation Guard
+router.beforeEach(async (to, _from, next) => {
+    const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
+
+    // Simple check - in a real app wait for auth init
+    if (requiresAuth) {
+        try {
+            const auth = getFirebaseAuth();
+            if (!auth.currentUser) {
+                // If not logged in, redirect home or show login
+                // For now, we allow access but components might handle logic, 
+                // or we could redirect to home with a query param
+                // next({ name: 'home' }); 
+            }
+        } catch (e) {
+            // Auth not initialized yet, proceed (components handle it)
+        }
+    }
+    next();
+});
+
+export default router;