lumina-slides 9.0.5 → 9.0.7

package/src/components/studio/StudioSettings.vue

@@ -24,6 +24,157 @@
                             placeholder="Author Name"
                             class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none" />
                     </div>
+                    <div class="space-y-1">
+                        <label class="text-white/50 uppercase tracking-wider text-[10px]">Date</label>
+                        <input type="text" :value="deckMeta?.date || ''"
+                            @input="updateMeta('date', ($event.target as HTMLInputElement).value)"
+                            placeholder="e.g. 2024-01-15"
+                            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none" />
+                    </div>
+                </div>
+            </CollapsibleSection>
+
+            <!-- Element Control Section -->
+            <CollapsibleSection title="Element Control" icon="ph-thin ph-eye">
+                <div class="space-y-3">
+                    <ToggleField label="Default Visible" :value="elementControlSettings.defaultVisible"
+                        @update="v => updateMeta('elementControl.defaultVisible', v)" />
+                    <p class="text-[9px] text-white/30">When on, all elements visible at start (legacy). When off, elements hidden, cascade on enter.</p>
+                    
+                    <div class="pt-2 border-t border-[#333]">
+                        <div class="text-white/30 text-[10px] uppercase tracking-widest mb-2">Initial Element State</div>
+                        <div v-if="Object.keys(initialElementState).length === 0" class="text-white/30 text-[10px] italic">
+                            No initial states defined
+                        </div>
+                        <div v-else class="space-y-2">
+                            <div v-for="(state, id) in initialElementState" :key="id" 
+                                class="bg-[#1a1a1a] border border-[#333] rounded p-2">
+                                <div class="flex items-center justify-between mb-1">
+                                    <span class="text-white/70 font-mono text-[10px]">{{ id }}</span>
+                                    <button @click="removeInitialElementState(id as string)" 
+                                        class="text-red-400 hover:text-red-300 text-[10px]">
+                                        <i class="ph-thin ph-trash"></i>
+                                    </button>
+                                </div>
+                                <div class="flex items-center gap-2">
+                                    <label class="text-white/50 text-[9px]">visible:</label>
+                                    <select :value="state.visible !== false" 
+                                        @change="updateInitialElementState(id as string, 'visible', ($event.target as HTMLSelectElement).value === 'true')"
+                                        class="flex-1 bg-[#252525] border border-[#444] rounded px-1 py-0.5 text-[10px] text-white">
+                                        <option value="true">true</option>
+                                        <option value="false">false</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-2 flex gap-2">
+                            <input type="text" v-model="newElementStateId" placeholder="Element ID"
+                                class="flex-1 bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-[10px] text-white" />
+                            <button @click="addInitialElementState" 
+                                class="px-2 py-1 bg-blue-600 hover:bg-blue-500 rounded text-[10px] text-white">
+                                Add
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </CollapsibleSection>
+
+            <!-- Reveal Options Section -->
+            <CollapsibleSection title="Default Reveal" icon="ph-thin ph-sparkle">
+                <div class="space-y-3">
+                    <div class="space-y-1">
+                        <label class="text-white/50 text-[10px] uppercase">Delay (ms)</label>
+                        <input type="number" :value="revealSettings.delayMs"
+                            @input="updateReveal('delayMs', parseInt(($event.target as HTMLInputElement).value))"
+                            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white font-mono" />
+                    </div>
+                    <div class="space-y-1">
+                        <label class="text-white/50 text-[10px] uppercase">Stagger Mode</label>
+                        <select :value="revealSettings.staggerMode"
+                            @change="updateReveal('staggerMode', ($event.target as HTMLSelectElement).value)"
+                            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white">
+                            <option value="sequential">Sequential</option>
+                            <option value="center-out">Center Out</option>
+                            <option value="ends-in">Ends In</option>
+                            <option value="wave">Wave</option>
+                            <option value="random">Random</option>
+                        </select>
+                    </div>
+                    <div class="space-y-1">
+                        <label class="text-white/50 text-[10px] uppercase">Preset</label>
+                        <select :value="revealSettings.preset || ''"
+                            @change="updateReveal('preset', ($event.target as HTMLSelectElement).value || undefined)"
+                            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white">
+                            <option value="">Default</option>
+                            <option value="fadeUp">Fade Up</option>
+                            <option value="fadeDown">Fade Down</option>
+                            <option value="scaleIn">Scale In</option>
+                            <option value="slideLeft">Slide Left</option>
+                            <option value="slideRight">Slide Right</option>
+                        </select>
+                    </div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div class="space-y-1">
+                            <label class="text-white/50 text-[10px] uppercase">Duration</label>
+                            <input type="number" step="0.05" :value="revealSettings.duration"
+                                @input="updateReveal('duration', parseFloat(($event.target as HTMLInputElement).value))"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white font-mono" />
+                        </div>
+                        <div class="space-y-1">
+                            <label class="text-white/50 text-[10px] uppercase">Ease</label>
+                            <input type="text" :value="revealSettings.ease"
+                                @input="updateReveal('ease', ($event.target as HTMLInputElement).value)"
+                                placeholder="power2.out"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white font-mono" />
+                        </div>
+                    </div>
+                    <ToggleField label="Animate" :value="revealSettings.animate"
+                        @update="v => updateReveal('animate', v)" />
+                    <ToggleField label="Hide First" :value="revealSettings.hideFirst"
+                        @update="v => updateReveal('hideFirst', v)" />
+                </div>
+            </CollapsibleSection>
+
+            <!-- Motions Section -->
+            <CollapsibleSection title="Motion Definitions" icon="ph-thin ph-path">
+                <div class="space-y-3">
+                    <div v-if="Object.keys(motions).length === 0" class="text-white/30 text-[10px] italic">
+                        No custom motions defined
+                    </div>
+                    <div v-else class="space-y-2">
+                        <div v-for="(motion, id) in motions" :key="id" 
+                            class="bg-[#1a1a1a] border border-[#333] rounded p-2">
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-white/70 font-mono text-[10px]">{{ id }}</span>
+                                <button @click="removeMotion(id as string)" 
+                                    class="text-red-400 hover:text-red-300 text-[10px]">
+                                    <i class="ph-thin ph-trash"></i>
+                                </button>
+                            </div>
+                            <div class="space-y-1 text-[9px]">
+                                <div class="flex gap-2">
+                                    <span class="text-white/50 w-12">ease:</span>
+                                    <input type="text" :value="motion.ease || ''"
+                                        @input="updateMotion(id as string, 'ease', ($event.target as HTMLInputElement).value)"
+                                        class="flex-1 bg-[#252525] border border-[#444] rounded px-1 py-0.5 text-white font-mono" />
+                                </div>
+                                <div class="flex gap-2">
+                                    <span class="text-white/50 w-12">duration:</span>
+                                    <input type="number" step="0.1" :value="motion.duration"
+                                        @input="updateMotion(id as string, 'duration', parseFloat(($event.target as HTMLInputElement).value))"
+                                        class="flex-1 bg-[#252525] border border-[#444] rounded px-1 py-0.5 text-white font-mono" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex gap-2">
+                        <input type="text" v-model="newMotionId" placeholder="Motion ID"
+                            class="flex-1 bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-[10px] text-white" />
+                        <button @click="addMotion" 
+                            class="px-2 py-1 bg-blue-600 hover:bg-blue-500 rounded text-[10px] text-white">
+                            Add
+                        </button>
+                    </div>
                 </div>
             </CollapsibleSection>
 
@@ -65,6 +216,8 @@
                     <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">Text
                     </div>
                     <ColorField label="Text Main" field="text" :value="themeColors.text" @update="updateThemeColor" />
+                    <ColorField label="Text Secondary" field="textSecondary" :value="themeColors.textSecondary"
+                        @update="updateThemeColor" />
                     <ColorField label="Text Muted" field="muted" :value="themeColors.muted"
                         @update="updateThemeColor" />
 
@@ -75,12 +228,48 @@
                     <ColorField label="Warning" field="warning" :value="themeColors.warning"
                         @update="updateThemeColor" />
                     <ColorField label="Danger" field="danger" :value="themeColors.danger" @update="updateThemeColor" />
+                    <ColorField label="Info" field="info" :value="themeColors.info" @update="updateThemeColor" />
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">
+                        UI Elements</div>
+                    <ColorField label="Border" field="border" :value="themeColors.border" @update="updateThemeColor" />
+                    <ColorField label="Border Subtle" field="borderSubtle" :value="themeColors.borderSubtle"
+                        @update="updateThemeColor" />
+                    <ColorField label="Shadow" field="shadow" :value="themeColors.shadow" @update="updateThemeColor" />
+                    <ColorField label="Overlay" field="overlay" :value="themeColors.overlay" @update="updateThemeColor" />
+                    <ColorField label="Highlight" field="highlight" :value="themeColors.highlight" @update="updateThemeColor" />
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">
+                        Buttons</div>
+                    <ColorField label="Btn Primary" field="buttonPrimary" :value="themeColors.buttonPrimary"
+                        @update="updateThemeColor" />
+                    <ColorField label="Btn Primary Text" field="buttonPrimaryText" :value="themeColors.buttonPrimaryText"
+                        @update="updateThemeColor" />
+                    <ColorField label="Btn Secondary" field="buttonSecondary" :value="themeColors.buttonSecondary"
+                        @update="updateThemeColor" />
+                    <ColorField label="Btn Secondary Text" field="buttonSecondaryText" :value="themeColors.buttonSecondaryText"
+                        @update="updateThemeColor" />
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">
+                        Links</div>
+                    <ColorField label="Link" field="link" :value="themeColors.link" @update="updateThemeColor" />
+                    <ColorField label="Link Hover" field="linkHover" :value="themeColors.linkHover" @update="updateThemeColor" />
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">
+                        Gradients</div>
+                    <ColorField label="Gradient From" field="gradientFrom" :value="themeColors.gradientFrom"
+                        @update="updateThemeColor" />
+                    <ColorField label="Gradient Via" field="gradientVia" :value="themeColors.gradientVia"
+                        @update="updateThemeColor" />
+                    <ColorField label="Gradient To" field="gradientTo" :value="themeColors.gradientTo"
+                        @update="updateThemeColor" />
                 </div>
             </CollapsibleSection>
 
             <!-- Typography Section -->
             <CollapsibleSection title="Typography" icon="ph-thin ph-text-t">
                 <div class="space-y-3">
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest">Font Families</div>
                     <div class="space-y-1">
                         <label class="text-white/50 uppercase tracking-wider text-[10px]">Heading Font</label>
                         <select :value="typographySettings.heading"
@@ -105,6 +294,57 @@
                             </optgroup>
                         </select>
                     </div>
+                    <div class="space-y-1">
+                        <label class="text-white/50 uppercase tracking-wider text-[10px]">Mono Font</label>
+                        <select :value="typographySettings.mono"
+                            @change="updateTypography('mono', ($event.target as HTMLSelectElement).value)"
+                            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none">
+                            <option value="'Fira Code', monospace">Fira Code</option>
+                            <option value="'JetBrains Mono', monospace">JetBrains Mono</option>
+                            <option value="'Source Code Pro', monospace">Source Code Pro</option>
+                            <option value="monospace">System Mono</option>
+                        </select>
+                    </div>
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">Font Sizes</div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div v-for="token in fontSizeTokens" :key="token" class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">{{ token }}</label>
+                            <input type="text" :value="themeFontSize[token]"
+                                @input="updateFontSize(token, ($event.target as HTMLInputElement).value)"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none font-mono text-xs" />
+                        </div>
+                    </div>
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">Font Weights</div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div v-for="token in fontWeightTokens" :key="token" class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">{{ token }}</label>
+                            <input type="number" :value="themeFontWeight[token]"
+                                @input="updateFontWeight(token, parseInt(($event.target as HTMLInputElement).value))"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none font-mono text-xs" />
+                        </div>
+                    </div>
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">Line Heights</div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div v-for="token in lineHeightTokens" :key="token" class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">{{ token }}</label>
+                            <input type="text" :value="themeLineHeight[token]"
+                                @input="updateLineHeight(token, ($event.target as HTMLInputElement).value)"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none font-mono text-xs" />
+                        </div>
+                    </div>
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">Letter Spacing</div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div v-for="token in letterSpacingTokens" :key="token" class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">{{ token }}</label>
+                            <input type="text" :value="themeLetterSpacing[token]"
+                                @input="updateLetterSpacing(token, ($event.target as HTMLInputElement).value)"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none font-mono text-xs" />
+                        </div>
+                    </div>
                 </div>
             </CollapsibleSection>
 
@@ -174,6 +414,51 @@
                                     class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white font-mono" />
                             </div>
                         </div>
+                        <div class="grid grid-cols-2 gap-2">
+                            <div class="space-y-1">
+                                <label class="text-white/50 text-[10px] uppercase">Transition Duration</label>
+                                <input type="text" :value="effectsSettings.transitionDuration"
+                                    @input="updateEffect('transitionDuration', ($event.target as HTMLInputElement).value)"
+                                    placeholder="0.3s"
+                                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white font-mono" />
+                            </div>
+                            <div class="space-y-1">
+                                <label class="text-white/50 text-[10px] uppercase">Transition Ease</label>
+                                <input type="text" :value="effectsSettings.transitionEasing"
+                                    @input="updateEffect('transitionEasing', ($event.target as HTMLInputElement).value)"
+                                    placeholder="ease-out"
+                                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white font-mono" />
+                            </div>
+                        </div>
+                        <div class="space-y-1">
+                            <label class="text-white/50 text-[10px] uppercase">Hover Scale</label>
+                            <input type="number" step="0.01" :value="effectsSettings.hoverScale"
+                                @input="updateEffect('hoverScale', parseFloat(($event.target as HTMLInputElement).value))"
+                                placeholder="1.05"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white font-mono" />
+                        </div>
+                    </div>
+
+                    <div class="pt-2 border-t border-[#333]">
+                        <ToggleField label="Gradients" :value="effectsSettings.gradients"
+                            @update="v => updateEffect('useGradients', v)" />
+                        <div v-if="effectsSettings.gradients" class="mt-2 pl-2 border-l-2 border-[#333] space-y-2">
+                            <div class="space-y-1">
+                                <label class="text-white/50 text-[10px] uppercase">Direction</label>
+                                <select :value="effectsSettings.gradientDirection"
+                                    @change="updateEffect('gradientDirection', ($event.target as HTMLSelectElement).value)"
+                                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white">
+                                    <option value="to-t">To Top</option>
+                                    <option value="to-b">To Bottom</option>
+                                    <option value="to-l">To Left</option>
+                                    <option value="to-r">To Right</option>
+                                    <option value="to-tl">To Top Left</option>
+                                    <option value="to-tr">To Top Right</option>
+                                    <option value="to-bl">To Bottom Left</option>
+                                    <option value="to-br">To Bottom Right</option>
+                                </select>
+                            </div>
+                        </div>
                     </div>
 
                     <div class="pt-2 border-t border-[#333]">
@@ -184,6 +469,13 @@
                                 :step="0.05" @update="v => updateEffect('orbOpacity', v)" />
                             <SliderField label="Blur (px)" :value="parseInt(effectsSettings.orbBlur as string)" :min="0"
                                 :max="200" :step="10" unit="px" @update="v => updateEffect('orbBlur', v + 'px')" />
+                            <div class="space-y-1">
+                                <label class="text-white/50 text-[10px] uppercase">Orb Size</label>
+                                <input type="text" :value="effectsSettings.orbSize"
+                                    @input="updateEffect('orbSize', ($event.target as HTMLInputElement).value)"
+                                    placeholder="60vw"
+                                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white font-mono" />
+                            </div>
                         </div>
                     </div>
 
@@ -196,12 +488,40 @@
                             <SliderField label="Blur (px)" :value="parseInt(effectsSettings.glassBlur as string)"
                                 :min="0" :max="50" :step="2" unit="px"
                                 @update="v => updateEffect('glassBlur', v + 'px')" />
+                            <SliderField label="Border Opacity" :value="effectsSettings.glassBorderOpacity" :min="0" :max="1"
+                                :step="0.05" @update="v => updateEffect('glassBorderOpacity', v)" />
                         </div>
                     </div>
 
                     <div class="pt-2 border-t border-[#333]">
                         <ToggleField label="Shadows" :value="effectsSettings.shadows"
                             @update="v => updateEffect('useShadows', v)" />
+                        <div v-if="effectsSettings.shadows" class="mt-2 pl-2 border-l-2 border-[#333] space-y-2">
+                            <div class="space-y-1">
+                                <label class="text-white/50 text-[10px] uppercase">Intensity</label>
+                                <select :value="effectsSettings.shadowIntensity"
+                                    @change="updateEffect('shadowIntensity', ($event.target as HTMLSelectElement).value)"
+                                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white">
+                                    <option value="none">None</option>
+                                    <option value="sm">Small</option>
+                                    <option value="md">Medium</option>
+                                    <option value="lg">Large</option>
+                                    <option value="xl">X-Large</option>
+                                    <option value="2xl">2X-Large</option>
+                                </select>
+                            </div>
+                            <div class="space-y-1">
+                                <label class="text-white/50 text-[10px] uppercase">Shadow Color</label>
+                                <div class="flex gap-2">
+                                    <input type="color" :value="effectsSettings.shadowColor"
+                                        @input="updateEffect('shadowColor', ($event.target as HTMLInputElement).value)"
+                                        class="w-8 h-8 rounded border border-[#333] cursor-pointer bg-transparent" />
+                                    <input type="text" :value="effectsSettings.shadowColor"
+                                        @input="updateEffect('shadowColor', ($event.target as HTMLInputElement).value)"
+                                        class="flex-1 bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white font-mono" />
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </CollapsibleSection>
@@ -221,9 +541,31 @@
                             <option value="9999px">Pill (Full)</option>
                         </select>
                     </div>
-
-                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">Cards
+                    <div class="space-y-1">
+                        <label class="text-white/50 uppercase tracking-wider text-[10px]">Padding</label>
+                        <input type="text" :value="componentsSettings.buttonPadding"
+                            @input="updateComponent('buttonPadding', ($event.target as HTMLInputElement).value)"
+                            placeholder="0.75rem 1.5rem"
+                            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none font-mono text-xs" />
+                    </div>
+                    <div class="space-y-1">
+                        <label class="text-white/50 uppercase tracking-wider text-[10px]">Font Weight</label>
+                        <input type="number" :value="componentsSettings.buttonFontWeight"
+                            @input="updateComponent('buttonFontWeight', parseInt(($event.target as HTMLInputElement).value))"
+                            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none font-mono text-xs" />
                     </div>
+                    <div class="space-y-1">
+                        <label class="text-white/50 uppercase tracking-wider text-[10px]">Text Transform</label>
+                        <select :value="componentsSettings.buttonTextTransform"
+                            @change="updateComponent('buttonTextTransform', ($event.target as HTMLSelectElement).value)"
+                            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none">
+                            <option value="none">None</option>
+                            <option value="uppercase">Uppercase</option>
+                            <option value="capitalize">Capitalize</option>
+                        </select>
+                    </div>
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">Cards</div>
                     <div class="space-y-1">
                         <label class="text-white/50 uppercase tracking-wider text-[10px]">Radius</label>
                         <select :value="componentsSettings.cardRadius"
@@ -236,6 +578,110 @@
                             <option value="2rem">X-Large</option>
                         </select>
                     </div>
+                    <div class="space-y-1">
+                        <label class="text-white/50 uppercase tracking-wider text-[10px]">Padding</label>
+                        <input type="text" :value="componentsSettings.cardPadding"
+                            @input="updateComponent('cardPadding', ($event.target as HTMLInputElement).value)"
+                            placeholder="1.5rem"
+                            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none font-mono text-xs" />
+                    </div>
+                    <div class="space-y-1">
+                        <label class="text-white/50 uppercase tracking-wider text-[10px]">Border Width</label>
+                        <input type="text" :value="componentsSettings.cardBorderWidth"
+                            @input="updateComponent('cardBorderWidth', ($event.target as HTMLInputElement).value)"
+                            placeholder="1px"
+                            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none font-mono text-xs" />
+                    </div>
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">Timeline</div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">Node Size</label>
+                            <input type="text" :value="componentsSettings.timelineNodeSize"
+                                @input="updateComponent('timelineNodeSize', ($event.target as HTMLInputElement).value)"
+                                placeholder="1rem"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-white font-mono text-xs" />
+                        </div>
+                        <div class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">Line Width</label>
+                            <input type="text" :value="componentsSettings.timelineLineWidth"
+                                @input="updateComponent('timelineLineWidth', ($event.target as HTMLInputElement).value)"
+                                placeholder="2px"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-white font-mono text-xs" />
+                        </div>
+                    </div>
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">Steps</div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">Badge Size</label>
+                            <input type="text" :value="componentsSettings.stepBadgeSize"
+                                @input="updateComponent('stepBadgeSize', ($event.target as HTMLInputElement).value)"
+                                placeholder="2.5rem"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-white font-mono text-xs" />
+                        </div>
+                        <div class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">Font Size</label>
+                            <input type="text" :value="componentsSettings.stepFontSize"
+                                @input="updateComponent('stepFontSize', ($event.target as HTMLInputElement).value)"
+                                placeholder="1rem"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-white font-mono text-xs" />
+                        </div>
+                    </div>
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">Progress Bar</div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">Height</label>
+                            <input type="text" :value="componentsSettings.progressHeight"
+                                @input="updateComponent('progressHeight', ($event.target as HTMLInputElement).value)"
+                                placeholder="4px"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-white font-mono text-xs" />
+                        </div>
+                        <div class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">Radius</label>
+                            <input type="text" :value="componentsSettings.progressRadius"
+                                @input="updateComponent('progressRadius', ($event.target as HTMLInputElement).value)"
+                                placeholder="2px"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-white font-mono text-xs" />
+                        </div>
+                    </div>
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">Tags</div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">Padding</label>
+                            <input type="text" :value="componentsSettings.tagPadding"
+                                @input="updateComponent('tagPadding', ($event.target as HTMLInputElement).value)"
+                                placeholder="0.25rem 0.5rem"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-white font-mono text-xs" />
+                        </div>
+                        <div class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">Radius</label>
+                            <input type="text" :value="componentsSettings.tagRadius"
+                                @input="updateComponent('tagRadius', ($event.target as HTMLInputElement).value)"
+                                placeholder="0.25rem"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-white font-mono text-xs" />
+                        </div>
+                    </div>
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">Inputs</div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">Radius</label>
+                            <input type="text" :value="componentsSettings.inputRadius"
+                                @input="updateComponent('inputRadius', ($event.target as HTMLInputElement).value)"
+                                placeholder="0.5rem"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-white font-mono text-xs" />
+                        </div>
+                        <div class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">Padding</label>
+                            <input type="text" :value="componentsSettings.inputPadding"
+                                @input="updateComponent('inputPadding', ($event.target as HTMLInputElement).value)"
+                                placeholder="0.5rem 1rem"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-white font-mono text-xs" />
+                        </div>
+                    </div>
                 </div>
             </CollapsibleSection>
 
@@ -252,10 +698,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h, defineComponent } from 'vue';
+import { computed, h, defineComponent, ref } from 'vue';
 import { useEditor } from '../../composables/useEditor';
 import { ThemeManager } from '../../core/theme';
-import type { DeckMeta } from '../../core/types';
+import type { DeckMeta, ElementState, MotionDef } from '../../core/types';
 import CollapsibleSection from './CollapsibleSection.vue';
 import SliderField from './SliderField.vue';
 import { GOOGLE_FONTS } from '../../core/fonts';
@@ -266,6 +712,81 @@ const deckMeta = computed(() => editor.store.state.deck?.meta);
 const slideCount = computed(() => editor.store.state.deck?.slides?.length || 0);
 const currentTheme = computed(() => editor.store.state.deck?.meta?.theme || editor.store.state.deck?.theme || 'default');
 
+// Element Control settings
+const elementControlSettings = computed(() => ({
+    defaultVisible: editor.store.state.deck?.meta?.elementControl?.defaultVisible ?? false,
+}));
+
+const initialElementState = computed(() => 
+    editor.store.state.deck?.meta?.initialElementState || {} as Record<string, Partial<ElementState>>
+);
+
+const newElementStateId = ref('');
+
+const addInitialElementState = () => {
+    if (!newElementStateId.value.trim()) return;
+    editor.store.updateNode(`meta.initialElementState.${newElementStateId.value}`, { visible: false });
+    commitUpdate();
+    newElementStateId.value = '';
+};
+
+const removeInitialElementState = (id: string) => {
+    const current = { ...initialElementState.value };
+    delete current[id];
+    editor.store.updateNode('meta.initialElementState', Object.keys(current).length > 0 ? current : undefined);
+    commitUpdate();
+};
+
+const updateInitialElementState = (id: string, key: string, value: any) => {
+    editor.store.updateNode(`meta.initialElementState.${id}.${key}`, value);
+    commitUpdate();
+};
+
+// Reveal settings
+const revealSettings = computed(() => ({
+    delayMs: editor.store.state.deck?.meta?.reveal?.delayMs ?? 400,
+    staggerMode: editor.store.state.deck?.meta?.reveal?.staggerMode || 'sequential',
+    preset: editor.store.state.deck?.meta?.reveal?.preset,
+    duration: editor.store.state.deck?.meta?.reveal?.duration ?? 0.45,
+    ease: editor.store.state.deck?.meta?.reveal?.ease || 'power2.out',
+    animate: editor.store.state.deck?.meta?.reveal?.animate ?? true,
+    hideFirst: editor.store.state.deck?.meta?.reveal?.hideFirst ?? true,
+}));
+
+const updateReveal = (key: string, value: any) => {
+    editor.store.updateNode(`meta.reveal.${key}`, value);
+    commitUpdate();
+};
+
+// Motions
+const motions = computed(() => 
+    editor.store.state.deck?.meta?.motions || {} as Record<string, MotionDef>
+);
+
+const newMotionId = ref('');
+
+const addMotion = () => {
+    if (!newMotionId.value.trim()) return;
+    editor.store.updateNode(`meta.motions.${newMotionId.value}`, { 
+        ease: 'power2.out', 
+        duration: 0.5 
+    });
+    commitUpdate();
+    newMotionId.value = '';
+};
+
+const removeMotion = (id: string) => {
+    const current = { ...motions.value };
+    delete current[id];
+    editor.store.updateNode('meta.motions', Object.keys(current).length > 0 ? current : undefined);
+    commitUpdate();
+};
+
+const updateMotion = (id: string, key: string, value: any) => {
+    editor.store.updateNode(`meta.motions.${id}.${key}`, value);
+    commitUpdate();
+};
+
 // Theme presets
 const themePresets = [
     { id: 'default', name: 'Default', primary: '#3b82f6', secondary: '#8b5cf6', bg: '#030303' },
@@ -278,30 +799,146 @@ const themePresets = [
     { id: 'minimal', name: 'Minimal', primary: '#18181b', secondary: '#3f3f46', bg: '#fafafa' },
 ];
 
-// Current theme colors
+// Current theme colors (complete set)
 const themeColors = computed(() => ({
+    // Brand
     primary: editor.store.state.deck?.meta?.colors?.primary || '#3b82f6',
     secondary: editor.store.state.deck?.meta?.colors?.secondary || '#8b5cf6',
     accent: editor.store.state.deck?.meta?.colors?.accent || '#06b6d4',
+    // Base
     background: editor.store.state.deck?.meta?.colors?.background || '#030303',
     surface: editor.store.state.deck?.meta?.colors?.surface || '#0a0a0a',
+    // Text
     text: editor.store.state.deck?.meta?.colors?.text || '#ffffff',
+    textSecondary: editor.store.state.deck?.meta?.colors?.textSecondary || '#e5e7eb',
     muted: editor.store.state.deck?.meta?.colors?.muted || '#9ca3af',
+    // Semantic
     success: editor.store.state.deck?.meta?.colors?.success || '#10b981',
     warning: editor.store.state.deck?.meta?.colors?.warning || '#f59e0b',
     danger: editor.store.state.deck?.meta?.colors?.danger || '#ef4444',
+    info: editor.store.state.deck?.meta?.colors?.info || '#3b82f6',
+    // UI Elements
+    border: editor.store.state.deck?.meta?.colors?.border || 'rgba(255,255,255,0.1)',
+    borderSubtle: editor.store.state.deck?.meta?.colors?.borderSubtle || 'rgba(255,255,255,0.05)',
+    shadow: editor.store.state.deck?.meta?.colors?.shadow || '#000000',
+    overlay: editor.store.state.deck?.meta?.colors?.overlay || 'rgba(0,0,0,0.5)',
+    highlight: editor.store.state.deck?.meta?.colors?.highlight || '#3b82f6',
+    // Buttons
+    buttonPrimary: editor.store.state.deck?.meta?.colors?.buttonPrimary || '#3b82f6',
+    buttonPrimaryText: editor.store.state.deck?.meta?.colors?.buttonPrimaryText || '#ffffff',
+    buttonSecondary: editor.store.state.deck?.meta?.colors?.buttonSecondary || '#374151',
+    buttonSecondaryText: editor.store.state.deck?.meta?.colors?.buttonSecondaryText || '#ffffff',
+    // Links
+    link: editor.store.state.deck?.meta?.colors?.link || '#3b82f6',
+    linkHover: editor.store.state.deck?.meta?.colors?.linkHover || '#60a5fa',
+    // Gradients
+    gradientFrom: editor.store.state.deck?.meta?.colors?.gradientFrom || '#3b82f6',
+    gradientVia: editor.store.state.deck?.meta?.colors?.gradientVia || '',
+    gradientTo: editor.store.state.deck?.meta?.colors?.gradientTo || '#8b5cf6',
 }));
 
 // Typography settings
 const typographySettings = computed(() => ({
     heading: editor.store.state.deck?.meta?.typography?.fontFamily?.heading || 'Inter, system-ui, sans-serif',
     body: editor.store.state.deck?.meta?.typography?.fontFamily?.body || 'Inter, system-ui, sans-serif',
+    mono: editor.store.state.deck?.meta?.typography?.fontFamily?.mono || 'monospace',
 }));
 
-// Components settings
+// Font size scale
+const fontSizeTokens = ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'];
+const themeFontSize = computed(() => {
+    const defaults: Record<string, string> = { 
+        xs: '0.75rem', sm: '0.875rem', base: '1rem', lg: '1.125rem', xl: '1.25rem', 
+        '2xl': '1.5rem', '3xl': '1.875rem', '4xl': '2.25rem', '5xl': '3rem', '6xl': '3.75rem', '7xl': '4.5rem' 
+    };
+    const saved = editor.store.state.deck?.meta?.typography?.fontSize || {};
+    return Object.fromEntries(fontSizeTokens.map(k => [k, (saved as any)[k] || defaults[k]]));
+});
+
+const updateFontSize = (key: string, value: string) => {
+    editor.store.updateNode(`meta.typography.fontSize.${key}`, value);
+    commitUpdate();
+};
+
+// Font weight scale
+const fontWeightTokens = ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'];
+const themeFontWeight = computed(() => {
+    const defaults: Record<string, number> = { 
+        light: 300, normal: 400, medium: 500, semibold: 600, bold: 700, extrabold: 800 
+    };
+    const saved = editor.store.state.deck?.meta?.typography?.fontWeight || {};
+    return Object.fromEntries(fontWeightTokens.map(k => [k, (saved as any)[k] || defaults[k]]));
+});
+
+const updateFontWeight = (key: string, value: number) => {
+    editor.store.updateNode(`meta.typography.fontWeight.${key}`, value);
+    commitUpdate();
+};
+
+// Line height scale
+const lineHeightTokens = ['tight', 'snug', 'normal', 'relaxed', 'loose'];
+const themeLineHeight = computed(() => {
+    const defaults: Record<string, string> = { 
+        tight: '1.1', snug: '1.25', normal: '1.5', relaxed: '1.625', loose: '2' 
+    };
+    const saved = editor.store.state.deck?.meta?.typography?.lineHeight || {};
+    return Object.fromEntries(lineHeightTokens.map(k => [k, (saved as any)[k] || defaults[k]]));
+});
+
+const updateLineHeight = (key: string, value: string) => {
+    editor.store.updateNode(`meta.typography.lineHeight.${key}`, value);
+    commitUpdate();
+};
+
+// Letter spacing scale
+const letterSpacingTokens = ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest'];
+const themeLetterSpacing = computed(() => {
+    const defaults: Record<string, string> = { 
+        tighter: '-0.05em', tight: '-0.025em', normal: '0', wide: '0.025em', wider: '0.05em', widest: '0.1em' 
+    };
+    const saved = editor.store.state.deck?.meta?.typography?.letterSpacing || {};
+    return Object.fromEntries(letterSpacingTokens.map(k => [k, (saved as any)[k] || defaults[k]]));
+});
+
+const updateLetterSpacing = (key: string, value: string) => {
+    editor.store.updateNode(`meta.typography.letterSpacing.${key}`, value);
+    commitUpdate();
+};
+
+// Components settings (complete set)
 const componentsSettings = computed(() => ({
+    // Buttons
     buttonRadius: editor.store.state.deck?.meta?.components?.buttonRadius || '9999px',
+    buttonPadding: editor.store.state.deck?.meta?.components?.buttonPadding || '0.75rem 1.5rem',
+    buttonFontWeight: editor.store.state.deck?.meta?.components?.buttonFontWeight ?? 600,
+    buttonTextTransform: editor.store.state.deck?.meta?.components?.buttonTextTransform || 'none',
+    // Cards
     cardRadius: editor.store.state.deck?.meta?.components?.cardRadius || '1.5rem',
+    cardPadding: editor.store.state.deck?.meta?.components?.cardPadding || '1.5rem',
+    cardBorderWidth: editor.store.state.deck?.meta?.components?.cardBorderWidth || '1px',
+    cardBackground: editor.store.state.deck?.meta?.components?.cardBackground || '',
+    // Timeline
+    timelineNodeSize: editor.store.state.deck?.meta?.components?.timelineNodeSize || '1rem',
+    timelineLineWidth: editor.store.state.deck?.meta?.components?.timelineLineWidth || '2px',
+    timelineNodeColor: editor.store.state.deck?.meta?.components?.timelineNodeColor || '',
+    timelineLineColor: editor.store.state.deck?.meta?.components?.timelineLineColor || '',
+    // Steps
+    stepBadgeSize: editor.store.state.deck?.meta?.components?.stepBadgeSize || '2.5rem',
+    stepFontSize: editor.store.state.deck?.meta?.components?.stepFontSize || '1rem',
+    // Progress
+    progressHeight: editor.store.state.deck?.meta?.components?.progressHeight || '4px',
+    progressRadius: editor.store.state.deck?.meta?.components?.progressRadius || '2px',
+    progressBackground: editor.store.state.deck?.meta?.components?.progressBackground || '',
+    progressFill: editor.store.state.deck?.meta?.components?.progressFill || '',
+    // Tags
+    tagPadding: editor.store.state.deck?.meta?.components?.tagPadding || '0.25rem 0.5rem',
+    tagRadius: editor.store.state.deck?.meta?.components?.tagRadius || '0.25rem',
+    tagFontSize: editor.store.state.deck?.meta?.components?.tagFontSize || '0.75rem',
+    // Inputs
+    inputRadius: editor.store.state.deck?.meta?.components?.inputRadius || '0.5rem',
+    inputPadding: editor.store.state.deck?.meta?.components?.inputPadding || '0.5rem 1rem',
+    inputBorder: editor.store.state.deck?.meta?.components?.inputBorder || '',
+    inputFocusBorder: editor.store.state.deck?.meta?.components?.inputFocusBorder || '',
 }));
 
 // Spacing settings
@@ -322,20 +959,34 @@ const themeRadius = computed(() => {
     return Object.fromEntries(radiusTokens.map(k => [k, saved[k] || defaults[k]]));
 });
 
-// Effects settings
+// Effects settings (complete set)
 const effectsSettings = computed(() => ({
+    // Animations
     animations: editor.store.state.deck?.meta?.effects?.animationsEnabled ?? true,
     animationType: editor.store.state.deck?.meta?.effects?.animationType || 'cascade',
     animationDuration: editor.store.state.deck?.meta?.effects?.animationDuration ?? 0.8,
     animationStagger: editor.store.state.deck?.meta?.effects?.animationStagger ?? 0.1,
     animationEase: editor.store.state.deck?.meta?.effects?.animationEase || 'power3.out',
+    transitionDuration: editor.store.state.deck?.meta?.effects?.transitionDuration || '0.3s',
+    transitionEasing: editor.store.state.deck?.meta?.effects?.transitionEasing || 'ease-out',
+    hoverScale: editor.store.state.deck?.meta?.effects?.hoverScale ?? 1.05,
+    // Gradients
+    gradients: editor.store.state.deck?.meta?.effects?.useGradients ?? false,
+    gradientDirection: editor.store.state.deck?.meta?.effects?.gradientDirection || 'to-br',
+    // Shadows
     shadows: editor.store.state.deck?.meta?.effects?.useShadows ?? true,
+    shadowIntensity: editor.store.state.deck?.meta?.effects?.shadowIntensity || 'md',
+    shadowColor: editor.store.state.deck?.meta?.effects?.shadowColor || '#000000',
+    // Glass
     glass: editor.store.state.deck?.meta?.effects?.useGlass ?? true,
     glassOpacity: editor.store.state.deck?.meta?.effects?.glassOpacity ?? 0.12,
     glassBlur: editor.store.state.deck?.meta?.effects?.glassBlur ?? '20px',
+    glassBorderOpacity: editor.store.state.deck?.meta?.effects?.glassBorderOpacity ?? 0.1,
+    // Orb
     orb: editor.store.state.deck?.meta?.effects?.useOrb ?? true,
     orbOpacity: editor.store.state.deck?.meta?.effects?.orbOpacity ?? 0.2,
     orbBlur: editor.store.state.deck?.meta?.effects?.orbBlur ?? '120px',
+    orbSize: editor.store.state.deck?.meta?.effects?.orbSize || '60vw',
 }));
 
 // Font groupings