lumina-slides 8.9.4 → 9.0.0

package/src/components/studio/StudioSettings.vue

@@ -0,0 +1,514 @@
+<template>
+    <div class="flex flex-col h-full text-xs bg-[#111]">
+        <!-- Header -->
+        <div class="px-3 py-2 font-bold text-white/50 uppercase tracking-wider border-b border-[#333]">
+            Deck Settings
+        </div>
+
+        <div class="flex-1 overflow-y-auto p-2 space-y-2 custom-scrollbar">
+
+            <!-- Metadata Section -->
+            <CollapsibleSection title="Metadata" icon="ph-thin ph-info" :defaultExpanded="true">
+                <div class="space-y-2">
+                    <div class="space-y-1">
+                        <label class="text-white/50 uppercase tracking-wider text-[10px]">Title</label>
+                        <input type="text" :value="deckMeta?.title || ''"
+                            @input="updateMeta('title', ($event.target as HTMLInputElement).value)"
+                            placeholder="Presentation Title"
+                            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]">Author</label>
+                        <input type="text" :value="deckMeta?.author || ''"
+                            @input="updateMeta('author', ($event.target as HTMLInputElement).value)"
+                            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>
+            </CollapsibleSection>
+
+            <!-- Presets Section -->
+            <CollapsibleSection title="Theme Preset" icon="ph-thin ph-palette">
+                <div class="grid grid-cols-2 gap-2">
+                    <button v-for="preset in themePresets" :key="preset.id" @click="applyPreset(preset.id)"
+                        class="p-2 rounded border text-[10px] font-bold transition flex flex-col items-center gap-1"
+                        :class="currentTheme === preset.id
+                            ? 'border-blue-500 bg-blue-500/20 text-blue-400'
+                            : 'border-[#333] bg-[#1a1a1a] text-white/70 hover:border-white/30'">
+                        <div class="flex gap-1">
+                            <span class="w-3 h-3 rounded-full" :style="{ backgroundColor: preset.primary }"></span>
+                            <span class="w-3 h-3 rounded-full" :style="{ backgroundColor: preset.secondary }"></span>
+                            <span class="w-3 h-3 rounded-full" :style="{ backgroundColor: preset.bg }"></span>
+                        </div>
+                        {{ preset.name }}
+                    </button>
+                </div>
+            </CollapsibleSection>
+
+            <!-- Colors Section -->
+            <CollapsibleSection title="Colors" icon="ph-thin ph-drop">
+                <div class="space-y-3">
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest">Brand</div>
+                    <ColorField label="Primary" field="primary" :value="themeColors.primary"
+                        @update="updateThemeColor" />
+                    <ColorField label="Secondary" field="secondary" :value="themeColors.secondary"
+                        @update="updateThemeColor" />
+                    <ColorField label="Accent" field="accent" :value="themeColors.accent" @update="updateThemeColor" />
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">Base
+                    </div>
+                    <ColorField label="Background" field="background" :value="themeColors.background"
+                        @update="updateThemeColor" />
+                    <ColorField label="Surface" field="surface" :value="themeColors.surface"
+                        @update="updateThemeColor" />
+
+                    <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 Muted" field="muted" :value="themeColors.muted"
+                        @update="updateThemeColor" />
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest pt-2 border-t border-[#333]">
+                        Semantic</div>
+                    <ColorField label="Success" field="success" :value="themeColors.success"
+                        @update="updateThemeColor" />
+                    <ColorField label="Warning" field="warning" :value="themeColors.warning"
+                        @update="updateThemeColor" />
+                    <ColorField label="Danger" field="danger" :value="themeColors.danger" @update="updateThemeColor" />
+                </div>
+            </CollapsibleSection>
+
+            <!-- Typography Section -->
+            <CollapsibleSection title="Typography" icon="ph-thin ph-text-t">
+                <div class="space-y-3">
+                    <div class="space-y-1">
+                        <label class="text-white/50 uppercase tracking-wider text-[10px]">Heading Font</label>
+                        <select :value="typographySettings.heading"
+                            @change="updateTypography('heading', ($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">
+                            <optgroup v-for="(group, key) in fontGroups" :key="key" :label="group.label">
+                                <option v-for="font in group.options" :key="font.value" :value="font.value">
+                                    {{ font.label }}
+                                </option>
+                            </optgroup>
+                        </select>
+                    </div>
+                    <div class="space-y-1">
+                        <label class="text-white/50 uppercase tracking-wider text-[10px]">Body Font</label>
+                        <select :value="typographySettings.body"
+                            @change="updateTypography('body', ($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">
+                            <optgroup v-for="(group, key) in fontGroups" :key="key" :label="group.label">
+                                <option v-for="font in group.options" :key="font.value" :value="font.value">
+                                    {{ font.label }}
+                                </option>
+                            </optgroup>
+                        </select>
+                    </div>
+                </div>
+            </CollapsibleSection>
+
+            <!-- Spacing Section -->
+            <CollapsibleSection title="Spacing Scale" icon="ph-thin ph-ruler">
+                <div class="space-y-3">
+                    <div class="grid grid-cols-2 gap-2">
+                        <div v-for="token in spacingTokens" :key="token" class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">{{ token }}</label>
+                            <input type="text" :value="themeSpacing[token]"
+                                @input="updateSpacing(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>
+
+            <!-- Border Radius Section -->
+            <CollapsibleSection title="Border Radius" icon="ph-thin ph-corners-out">
+                <div class="space-y-3">
+                    <div class="grid grid-cols-2 gap-2">
+                        <div v-for="token in radiusTokens" :key="token" class="space-y-1">
+                            <label class="text-white/50 uppercase tracking-wider text-[10px]">{{ token }}</label>
+                            <input type="text" :value="themeRadius[token]"
+                                @input="updateRadius(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>
+
+            <!-- Effects Section -->
+            <CollapsibleSection title="Effects" icon="ph-thin ph-magic-wand">
+                <div class="space-y-3">
+                    <ToggleField label="Animations Enabled" :value="effectsSettings.animations"
+                        @update="v => updateEffect('animationsEnabled', v)" />
+
+                    <div v-if="effectsSettings.animations" class="space-y-3 pt-2 pl-2 border-l-2 border-[#333]">
+                        <div class="space-y-1">
+                            <label class="text-white/50 text-[10px] uppercase">Default Animation</label>
+                            <select :value="effectsSettings.animationType"
+                                @change="updateEffect('animationType', ($event.target as HTMLSelectElement).value)"
+                                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white font-mono">
+                                <option value="cascade">Cascade</option>
+                                <option value="fade">Fade</option>
+                                <option value="slide">Slide</option>
+                                <option value="zoom">Zoom</option>
+                                <option value="spring">Spring</option>
+                                <option value="blur">Blur</option>
+                                <option value="skew">Skew</option>
+                                <option value="flip">Flip (3D)</option>
+                                <option value="zoom-rotate">Zoom Rotate</option>
+                                <option value="elastic-up">Elastic Up</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.1" :value="effectsSettings.animationDuration"
+                                    @input="updateEffect('animationDuration', 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">Stagger</label>
+                                <input type="number" step="0.05" :value="effectsSettings.animationStagger"
+                                    @input="updateEffect('animationStagger', 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>
+                    </div>
+
+                    <div class="pt-2 border-t border-[#333]">
+                        <ToggleField label="Ambient Orb" :value="effectsSettings.orb"
+                            @update="v => updateEffect('useOrb', v)" />
+                        <div v-if="effectsSettings.orb" class="mt-2 pl-2 border-l-2 border-[#333] space-y-2">
+                            <SliderField label="Opacity" :value="effectsSettings.orbOpacity" :min="0" :max="1"
+                                :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>
+                    </div>
+
+                    <div class="pt-2 border-t border-[#333]">
+                        <ToggleField label="Glass Effect" :value="effectsSettings.glass"
+                            @update="v => updateEffect('useGlass', v)" />
+                        <div v-if="effectsSettings.glass" class="mt-2 pl-2 border-l-2 border-[#333] space-y-2">
+                            <SliderField label="Opacity" :value="effectsSettings.glassOpacity" :min="0" :max="1"
+                                :step="0.05" @update="v => updateEffect('glassOpacity', v)" />
+                            <SliderField label="Blur (px)" :value="parseInt(effectsSettings.glassBlur as string)"
+                                :min="0" :max="50" :step="2" unit="px"
+                                @update="v => updateEffect('glassBlur', v + 'px')" />
+                        </div>
+                    </div>
+
+                    <div class="pt-2 border-t border-[#333]">
+                        <ToggleField label="Shadows" :value="effectsSettings.shadows"
+                            @update="v => updateEffect('useShadows', v)" />
+                    </div>
+                </div>
+            </CollapsibleSection>
+
+            <!-- Components Section -->
+            <CollapsibleSection title="Components" icon="ph-thin ph-cubes">
+                <div class="space-y-3">
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest">Buttons</div>
+                    <div class="space-y-1">
+                        <label class="text-white/50 uppercase tracking-wider text-[10px]">Radius</label>
+                        <select :value="componentsSettings.buttonRadius"
+                            @change="updateComponent('buttonRadius', ($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="0">Square</option>
+                            <option value="0.25rem">Small</option>
+                            <option value="0.5rem">Medium</option>
+                            <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>
+                    <div class="space-y-1">
+                        <label class="text-white/50 uppercase tracking-wider text-[10px]">Radius</label>
+                        <select :value="componentsSettings.cardRadius"
+                            @change="updateComponent('cardRadius', ($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="0">Square</option>
+                            <option value="0.5rem">Small</option>
+                            <option value="1rem">Medium</option>
+                            <option value="1.5rem">Large</option>
+                            <option value="2rem">X-Large</option>
+                        </select>
+                    </div>
+                </div>
+            </CollapsibleSection>
+
+            <!-- Stats -->
+            <div class="space-y-2 pt-4 border-t border-[#333] mt-2">
+                <div class="text-white/30 text-[10px] uppercase tracking-widest">Statistics</div>
+                <div class="flex justify-between text-white/50">
+                    <span>Slides</span>
+                    <span class="font-mono text-white">{{ slideCount }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, h, defineComponent } from 'vue';
+import { useEditor } from '../../composables/useEditor';
+import { ThemeManager } from '../../core/theme';
+import type { DeckMeta } from '../../core/types';
+import CollapsibleSection from './CollapsibleSection.vue';
+import SliderField from './SliderField.vue';
+import { GOOGLE_FONTS } from '../../core/fonts';
+
+const editor = useEditor();
+
+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');
+
+// Theme presets
+const themePresets = [
+    { id: 'default', name: 'Default', primary: '#3b82f6', secondary: '#8b5cf6', bg: '#030303' },
+    { id: 'dark', name: 'Dark', primary: '#6366f1', secondary: '#a855f7', bg: '#0a0a0a' },
+    { id: 'midnight', name: 'Midnight', primary: '#3b82f6', secondary: '#06b6d4', bg: '#0f172a' },
+    { id: 'ocean', name: 'Ocean', primary: '#0ea5e9', secondary: '#14b8a6', bg: '#0c4a6e' },
+    { id: 'forest', name: 'Forest', primary: '#22c55e', secondary: '#10b981', bg: '#052e16' },
+    { id: 'sunset', name: 'Sunset', primary: '#f97316', secondary: '#ec4899', bg: '#1c1917' },
+    { id: 'cyber', name: 'Cyber', primary: '#22d3ee', secondary: '#a855f7', bg: '#020617' },
+    { id: 'minimal', name: 'Minimal', primary: '#18181b', secondary: '#3f3f46', bg: '#fafafa' },
+];
+
+// Current theme colors
+const themeColors = computed(() => ({
+    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',
+    background: editor.store.state.deck?.meta?.colors?.background || '#030303',
+    surface: editor.store.state.deck?.meta?.colors?.surface || '#0a0a0a',
+    text: editor.store.state.deck?.meta?.colors?.text || '#ffffff',
+    muted: editor.store.state.deck?.meta?.colors?.muted || '#9ca3af',
+    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',
+}));
+
+// 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',
+}));
+
+// Components settings
+const componentsSettings = computed(() => ({
+    buttonRadius: editor.store.state.deck?.meta?.components?.buttonRadius || '9999px',
+    cardRadius: editor.store.state.deck?.meta?.components?.cardRadius || '1.5rem',
+}));
+
+// Spacing settings
+const spacingTokens = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'];
+const themeSpacing = computed(() => {
+    const defaults = { xs: '0.25rem', sm: '0.5rem', md: '1rem', lg: '1.5rem', xl: '2rem', '2xl': '3rem', '3xl': '4rem', '4xl': '6rem' };
+    const saved = editor.store.state.deck?.meta?.spacing || {};
+    // @ts-ignore
+    return Object.fromEntries(spacingTokens.map(k => [k, saved[k] || defaults[k]]));
+});
+
+// Radius settings
+const radiusTokens = ['sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full'];
+const themeRadius = computed(() => {
+    const defaults = { sm: '0.125rem', md: '0.375rem', lg: '0.5rem', xl: '0.75rem', '2xl': '1rem', '3xl': '1.5rem', full: '9999px' };
+    const saved = editor.store.state.deck?.meta?.borderRadius || {};
+    // @ts-ignore
+    return Object.fromEntries(radiusTokens.map(k => [k, saved[k] || defaults[k]]));
+});
+
+// Effects settings
+const effectsSettings = computed(() => ({
+    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',
+    shadows: editor.store.state.deck?.meta?.effects?.useShadows ?? true,
+    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',
+    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',
+}));
+
+// Font groupings
+const fontGroups = computed(() => {
+    const groups = {
+        'sans-serif': { label: 'Sans Serif', options: [] as any[] },
+        'serif': { label: 'Serif', options: [] as any[] },
+        'display': { label: 'Display', options: [] as any[] },
+        'handwriting': { label: 'Handwriting', options: [] as any[] },
+        'monospace': { label: 'Monospace', options: [] as any[] }
+    };
+
+    GOOGLE_FONTS.forEach(font => {
+        // @ts-ignore
+        if (groups[font.category]) {
+            // @ts-ignore
+            groups[font.category].options.push({
+                value: `${font.family}, ${font.category}`,
+                label: font.label
+            });
+        }
+    });
+
+    // Add fallback system fonts
+    const systemGroup = {
+        label: 'System', options: [
+            { value: 'Inter, system-ui, sans-serif', label: 'Inter (Default)' },
+            { value: 'system-ui, sans-serif', label: 'System UI' }
+        ]
+    };
+
+    return { ...groups, system: systemGroup };
+});
+
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+const commitUpdate = () => {
+    // Helper to debounce updates
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+        editor.commit();
+        // Re-inject theme to sync changes
+        // Use the current theme preset as the base, and apply overrides on top
+        const meta: Partial<DeckMeta> = editor.store.state.deck?.meta || {};
+        const config = {
+            colors: meta.colors,
+            // Deep merge logic is handled in ThemeManager, but we pass what we have
+            typography: meta.typography,
+            spacing: meta.spacing,
+            borderRadius: meta.borderRadius,
+            effects: meta.effects,
+            components: meta.components
+        };
+        // Fix: Pass the current theme ID so we don't reset to Default logic
+        ThemeManager.inject(currentTheme.value, config);
+    }, 150);
+}
+
+const updateMeta = (key: string, value: any) => {
+    editor.store.updateNode(`meta.${key}`, value);
+    commitUpdate();
+};
+
+const applyPreset = (presetId: string) => {
+    // 1. Set the new theme ID
+    editor.store.updateNode('meta.theme', presetId);
+
+    // 2. Clear ALL custom overrides to ensure a fresh start with the new preset
+    // We explicitly set them to undefined to remove the keys from the store object via updateNode behavior
+    // or just set empty objects if the store expects that. Assuming updateNode handles undefined/null as "unset".
+    // Based on usage, clearing the objects is safer.
+    editor.store.updateNode('meta.colors', undefined);
+    editor.store.updateNode('meta.typography', undefined);
+    editor.store.updateNode('meta.spacing', undefined);
+    editor.store.updateNode('meta.borderRadius', undefined);
+    editor.store.updateNode('meta.components', undefined);
+    // For effects, we might want to keep some global toggles, but generally presets imply a full look change.
+    // Let's reset effects too to match the preset's defaults.
+    editor.store.updateNode('meta.effects', undefined);
+
+    // 3. Inject the clean preset
+    ThemeManager.inject(presetId);
+    editor.commit();
+};
+
+const updateThemeColor = (field: string, value: string) => {
+    editor.store.updateNode(`meta.colors.${field}`, value);
+    commitUpdate();
+};
+
+const updateSpacing = (key: string, value: string) => {
+    editor.store.updateNode(`meta.spacing.${key}`, value);
+    commitUpdate();
+};
+
+const updateRadius = (key: string, value: string) => {
+    editor.store.updateNode(`meta.borderRadius.${key}`, value);
+    commitUpdate();
+};
+
+const updateTypography = (key: string, value: string) => {
+    editor.store.updateNode(`meta.typography.fontFamily.${key}`, value);
+    commitUpdate();
+};
+
+const updateEffect = (key: string, value: any) => {
+    editor.store.updateNode(`meta.effects.${key}`, value);
+    commitUpdate();
+};
+
+const updateComponent = (key: string, value: any) => {
+    editor.store.updateNode(`meta.components.${key}`, value);
+    commitUpdate();
+};
+
+// Color Field Component
+const ColorField = defineComponent({
+    props: ['label', 'field', 'value'],
+    emits: ['update'],
+    setup(props, { emit }) {
+        return () => h('div', { class: 'flex items-center gap-2' }, [
+            h('input', {
+                type: 'color',
+                value: props.value,
+                onInput: (e: Event) => emit('update', props.field, (e.target as HTMLInputElement).value),
+                class: 'w-6 h-6 rounded border border-[#333] cursor-pointer bg-transparent'
+            }),
+            h('span', { class: 'flex-1 text-white/70' }, props.label),
+            h('input', {
+                type: 'text',
+                value: props.value,
+                onInput: (e: Event) => emit('update', props.field, (e.target as HTMLInputElement).value),
+                class: 'w-16 bg-[#1a1a1a] border border-[#333] rounded px-1.5 py-0.5 text-[10px] font-mono text-white/70'
+            })
+        ]);
+    }
+});
+
+// Toggle Field Component
+const ToggleField = defineComponent({
+    props: ['label', 'value'],
+    emits: ['update'],
+    setup(props, { emit }) {
+        return () => h('div', { class: 'flex items-center justify-between' }, [
+            h('span', { class: 'text-white/70' }, props.label),
+            h('button', {
+                onClick: () => emit('update', !props.value),
+                class: `w-8 h-4 rounded-full transition-colors relative ${props.value ? 'bg-blue-600' : 'bg-[#333]'}`
+            }, [
+                h('span', {
+                    class: `absolute top-0.5 w-3 h-3 rounded-full bg-white transition-transform ${props.value ? 'left-4.5 translate-x-1' : 'left-0.5'}`
+                })
+            ])
+        ]);
+    }
+});
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+    width: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: #333;
+    border-radius: 2px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+</style>

package/src/components/studio/StudioSidebar.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="w-64 bg-[#111] border-r border-[#333] flex flex-col">
+        <!-- Tabs -->
+        <div class="flex border-b border-[#333]">
+            <button @click="activeTab = 'elements'" class="flex-1 px-3 py-2 text-xs font-bold uppercase transition"
+                :class="activeTab === 'elements' ? 'text-white bg-[#1a1a1a]' : 'text-white/50 hover:text-white'">
+                <i class="ph-thin ph-tree-structure mr-1"></i> Elements
+            </button>
+            <button @click="activeTab = 'settings'" class="flex-1 px-3 py-2 text-xs font-bold uppercase transition"
+                :class="activeTab === 'settings' ? 'text-white bg-[#1a1a1a]' : 'text-white/50 hover:text-white'">
+                <i class="ph-thin ph-gear mr-1"></i> Settings
+            </button>
+        </div>
+
+        <!-- Panel Content -->
+        <div class="flex-1 overflow-hidden">
+            <StudioLayers v-if="activeTab === 'elements'" />
+            <StudioSettings v-else />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import StudioLayers from './StudioLayers.vue';
+import StudioSettings from './StudioSettings.vue';
+
+const activeTab = ref<'elements' | 'settings'>('elements');
+</script>