@gxp-dev/tools 2.0.63 → 2.0.64

package/runtime/dev-tools/MockDataEditor.vue

@@ -1,621 +1,644 @@
 <template>
-    <div class="mock-data-editor">
-        <div class="editor-description">
-            <p>
-                Edit mock data that simulates platform responses during development.
-                Changes are applied in memory and will reset on page reload.
-            </p>
-        </div>
-
-        <div class="data-sections">
-            <div class="data-section">
-                <div class="section-header" @click="toggleSection('theme')">
-                    <span class="toggle-icon">{{ expandedSections.theme ? '▼' : '▶' }}</span>
-                    <h4>Theme Settings</h4>
-                </div>
-                <div v-if="expandedSections.theme" class="section-content">
-                    <div class="color-grid">
-                        <div v-for="(value, key) in themeColors" :key="key" class="color-field">
-                            <label>{{ formatLabel(key) }}</label>
-                            <div class="color-input-wrapper">
-                                <input
-                                    type="color"
-                                    :value="extractColor(value)"
-                                    @input="updateThemeColor(key, $event.target.value)"
-                                    class="color-picker"
-                                />
-                                <input
-                                    type="text"
-                                    :value="value"
-                                    @input="updateThemeColor(key, $event.target.value)"
-                                    class="color-text"
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="data-section">
-                <div class="section-header" @click="toggleSection('navigation')">
-                    <span class="toggle-icon">{{ expandedSections.navigation ? '▼' : '▶' }}</span>
-                    <h4>Navigation Items</h4>
-                </div>
-                <div v-if="expandedSections.navigation" class="section-content">
-                    <div class="nav-items">
-                        <div
-                            v-for="(item, index) in navigationItems"
-                            :key="index"
-                            class="nav-item"
-                        >
-                            <input
-                                v-model="item.title"
-                                class="nav-input"
-                                placeholder="Title"
-                            />
-                            <input
-                                v-model="item.route"
-                                class="nav-input"
-                                placeholder="Route"
-                            />
-                            <button class="btn-icon" @click="removeNavItem(index)" title="Remove">
-                                &times;
-                            </button>
-                        </div>
-                        <button class="btn-add" @click="addNavItem">
-                            + Add Navigation Item
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <div class="data-section">
-                <div class="section-header" @click="toggleSection('user')">
-                    <span class="toggle-icon">{{ expandedSections.user ? '▼' : '▶' }}</span>
-                    <h4>User Session</h4>
-                </div>
-                <div v-if="expandedSections.user" class="section-content">
-                    <div class="user-fields">
-                        <div class="field-row">
-                            <label>Authenticated:</label>
-                            <label class="toggle-switch">
-                                <input type="checkbox" v-model="userSession.authenticated" />
-                                <span class="toggle-slider"></span>
-                            </label>
-                        </div>
-                        <div class="field-row">
-                            <label>User ID:</label>
-                            <input
-                                type="text"
-                                v-model="userSession.userId"
-                                class="field-input"
-                            />
-                        </div>
-                        <div class="field-row">
-                            <label>Username:</label>
-                            <input
-                                type="text"
-                                v-model="userSession.username"
-                                class="field-input"
-                            />
-                        </div>
-                        <div class="field-row">
-                            <label>Email:</label>
-                            <input
-                                type="email"
-                                v-model="userSession.email"
-                                class="field-input"
-                            />
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="data-section">
-                <div class="section-header" @click="toggleSection('permissions')">
-                    <span class="toggle-icon">{{ expandedSections.permissions ? '▼' : '▶' }}</span>
-                    <h4>Permission Flags</h4>
-                </div>
-                <div v-if="expandedSections.permissions" class="section-content">
-                    <div class="permissions-list">
-                        <label
-                            v-for="flag in availablePermissions"
-                            :key="flag"
-                            class="permission-item"
-                        >
-                            <input
-                                type="checkbox"
-                                :checked="activePermissions.includes(flag)"
-                                @change="togglePermission(flag)"
-                            />
-                            <span>{{ flag }}</span>
-                        </label>
-                        <div class="add-permission">
-                            <input
-                                v-model="newPermission"
-                                placeholder="Add custom permission..."
-                                class="field-input"
-                                @keydown.enter="addPermission"
-                            />
-                            <button class="btn-add-sm" @click="addPermission">Add</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="editor-actions">
-            <button class="btn btn-secondary" @click="resetAllData">
-                Reset All to Defaults
-            </button>
-            <button class="btn btn-primary" @click="exportData">
-                Export as JSON
-            </button>
-        </div>
-    </div>
+	<div class="mock-data-editor">
+		<div class="editor-description">
+			<p>
+				Edit mock data that simulates platform responses during development.
+				Changes are applied in memory and will reset on page reload.
+			</p>
+		</div>
+
+		<div class="data-sections">
+			<div class="data-section">
+				<div class="section-header" @click="toggleSection('theme')">
+					<span class="toggle-icon">{{
+						expandedSections.theme ? "▼" : "▶"
+					}}</span>
+					<h4>Theme Settings</h4>
+				</div>
+				<div v-if="expandedSections.theme" class="section-content">
+					<div class="color-grid">
+						<div
+							v-for="(value, key) in themeColors"
+							:key="key"
+							class="color-field"
+						>
+							<label>{{ formatLabel(key) }}</label>
+							<div class="color-input-wrapper">
+								<input
+									type="color"
+									:value="extractColor(value)"
+									@input="updateThemeColor(key, $event.target.value)"
+									class="color-picker"
+								/>
+								<input
+									type="text"
+									:value="value"
+									@input="updateThemeColor(key, $event.target.value)"
+									class="color-text"
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="data-section">
+				<div class="section-header" @click="toggleSection('navigation')">
+					<span class="toggle-icon">{{
+						expandedSections.navigation ? "▼" : "▶"
+					}}</span>
+					<h4>Navigation Items</h4>
+				</div>
+				<div v-if="expandedSections.navigation" class="section-content">
+					<div class="nav-items">
+						<div
+							v-for="(item, index) in navigationItems"
+							:key="index"
+							class="nav-item"
+						>
+							<input
+								v-model="item.title"
+								class="nav-input"
+								placeholder="Title"
+							/>
+							<input
+								v-model="item.route"
+								class="nav-input"
+								placeholder="Route"
+							/>
+							<button
+								class="btn-icon"
+								@click="removeNavItem(index)"
+								title="Remove"
+							>
+								&times;
+							</button>
+						</div>
+						<button class="btn-add" @click="addNavItem">
+							+ Add Navigation Item
+						</button>
+					</div>
+				</div>
+			</div>
+
+			<div class="data-section">
+				<div class="section-header" @click="toggleSection('user')">
+					<span class="toggle-icon">{{
+						expandedSections.user ? "▼" : "▶"
+					}}</span>
+					<h4>User Session</h4>
+				</div>
+				<div v-if="expandedSections.user" class="section-content">
+					<div class="user-fields">
+						<div class="field-row">
+							<label>Authenticated:</label>
+							<label class="toggle-switch">
+								<input type="checkbox" v-model="userSession.authenticated" />
+								<span class="toggle-slider"></span>
+							</label>
+						</div>
+						<div class="field-row">
+							<label>User ID:</label>
+							<input
+								type="text"
+								v-model="userSession.userId"
+								class="field-input"
+							/>
+						</div>
+						<div class="field-row">
+							<label>Username:</label>
+							<input
+								type="text"
+								v-model="userSession.username"
+								class="field-input"
+							/>
+						</div>
+						<div class="field-row">
+							<label>Email:</label>
+							<input
+								type="email"
+								v-model="userSession.email"
+								class="field-input"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="data-section">
+				<div class="section-header" @click="toggleSection('permissions')">
+					<span class="toggle-icon">{{
+						expandedSections.permissions ? "▼" : "▶"
+					}}</span>
+					<h4>Permission Flags</h4>
+				</div>
+				<div v-if="expandedSections.permissions" class="section-content">
+					<div class="permissions-list">
+						<label
+							v-for="flag in availablePermissions"
+							:key="flag"
+							class="permission-item"
+						>
+							<input
+								type="checkbox"
+								:checked="activePermissions.includes(flag)"
+								@change="togglePermission(flag)"
+							/>
+							<span>{{ flag }}</span>
+						</label>
+						<div class="add-permission">
+							<input
+								v-model="newPermission"
+								placeholder="Add custom permission..."
+								class="field-input"
+								@keydown.enter="addPermission"
+							/>
+							<button class="btn-add-sm" @click="addPermission">Add</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="editor-actions">
+			<button class="btn btn-secondary" @click="resetAllData">
+				Reset All to Defaults
+			</button>
+			<button class="btn btn-primary" @click="exportData">
+				Export as JSON
+			</button>
+		</div>
+	</div>
 </template>
 
 <script setup>
-import { ref, reactive, computed } from 'vue';
+import { ref, reactive, computed } from "vue"
 
 const props = defineProps({
-    store: {
-        type: Object,
-        required: true
-    }
-});
+	store: {
+		type: Object,
+		required: true,
+	},
+})
 
 const expandedSections = reactive({
-    theme: true,
-    navigation: false,
-    user: false,
-    permissions: false
-});
+	theme: true,
+	navigation: false,
+	user: false,
+	permissions: false,
+})
 
 const themeColors = reactive({
-    background_color: '#ffffff',
-    text_color: '#333333',
-    primary_color: '#FFD600',
-    start_background_color: '#667eea',
-    start_text_color: '#ffffff',
-    final_background_color: '#4CAF50',
-    final_text_color: '#ffffff'
-});
+	background_color: "#ffffff",
+	text_color: "#333333",
+	primary_color: "#FFD600",
+	start_background_color: "#667eea",
+	start_text_color: "#ffffff",
+	final_background_color: "#4CAF50",
+	final_text_color: "#ffffff",
+})
 
 const navigationItems = reactive([
-    { title: 'Start', route: '/start' },
-    { title: 'Plugin', route: '/plugin' },
-    { title: 'Final', route: '/final' },
-    { title: 'Logout', route: '/logout', system_type: 'logout' }
-]);
+	{ title: "Start", route: "/start" },
+	{ title: "Plugin", route: "/plugin" },
+	{ title: "Final", route: "/final" },
+	{ title: "Logout", route: "/logout", system_type: "logout" },
+])
 
 const userSession = reactive({
-    authenticated: false,
-    userId: '',
-    username: '',
-    email: ''
-});
+	authenticated: false,
+	userId: "",
+	username: "",
+	email: "",
+})
 
 const availablePermissions = ref([
-    'admin',
-    'editor',
-    'viewer',
-    'can_upload',
-    'can_delete',
-    'can_share'
-]);
+	"admin",
+	"editor",
+	"viewer",
+	"can_upload",
+	"can_delete",
+	"can_share",
+])
 
-const activePermissions = ref([]);
-const newPermission = ref('');
+const activePermissions = ref([])
+const newPermission = ref("")
 
 function toggleSection(section) {
-    expandedSections[section] = !expandedSections[section];
+	expandedSections[section] = !expandedSections[section]
 }
 
 function formatLabel(key) {
-    return key
-        .replace(/_/g, ' ')
-        .replace(/\b\w/g, l => l.toUpperCase());
+	return key.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase())
 }
 
 function extractColor(value) {
-    // Extract hex color from value (handle gradients, etc.)
-    if (typeof value !== 'string') return '#ffffff';
-    const match = value.match(/#[0-9A-Fa-f]{6}/);
-    return match ? match[0] : '#ffffff';
+	// Extract hex color from value (handle gradients, etc.)
+	if (typeof value !== "string") return "#ffffff"
+	const match = value.match(/#[0-9A-Fa-f]{6}/)
+	return match ? match[0] : "#ffffff"
 }
 
 function updateThemeColor(key, value) {
-    themeColors[key] = value;
-    // Update store if available
-    if (props.store?.theme) {
-        props.store.theme[key] = value;
-    }
-    console.log(`[DevTools] Theme ${key} updated:`, value);
+	themeColors[key] = value
+	// Update store if available
+	if (props.store?.theme) {
+		props.store.theme[key] = value
+	}
+	console.log(`[DevTools] Theme ${key} updated:`, value)
 }
 
 function addNavItem() {
-    navigationItems.push({ title: '', route: '' });
+	navigationItems.push({ title: "", route: "" })
 }
 
 function removeNavItem(index) {
-    navigationItems.splice(index, 1);
+	navigationItems.splice(index, 1)
 }
 
 function togglePermission(flag) {
-    const index = activePermissions.value.indexOf(flag);
-    if (index > -1) {
-        activePermissions.value.splice(index, 1);
-    } else {
-        activePermissions.value.push(flag);
-    }
-    // Update store
-    if (props.store?.permissionFlags) {
-        props.store.permissionFlags.splice(0, props.store.permissionFlags.length, ...activePermissions.value);
-    }
-    console.log('[DevTools] Permissions updated:', activePermissions.value);
+	const index = activePermissions.value.indexOf(flag)
+	if (index > -1) {
+		activePermissions.value.splice(index, 1)
+	} else {
+		activePermissions.value.push(flag)
+	}
+	// Update store
+	if (props.store?.permissionFlags) {
+		props.store.permissionFlags.splice(
+			0,
+			props.store.permissionFlags.length,
+			...activePermissions.value,
+		)
+	}
+	console.log("[DevTools] Permissions updated:", activePermissions.value)
 }
 
 function addPermission() {
-    if (newPermission.value && !availablePermissions.value.includes(newPermission.value)) {
-        availablePermissions.value.push(newPermission.value);
-        activePermissions.value.push(newPermission.value);
-        newPermission.value = '';
-    }
+	if (
+		newPermission.value &&
+		!availablePermissions.value.includes(newPermission.value)
+	) {
+		availablePermissions.value.push(newPermission.value)
+		activePermissions.value.push(newPermission.value)
+		newPermission.value = ""
+	}
 }
 
 function resetAllData() {
-    // Reset theme
-    Object.assign(themeColors, {
-        background_color: '#ffffff',
-        text_color: '#333333',
-        primary_color: '#FFD600',
-        start_background_color: '#667eea',
-        start_text_color: '#ffffff',
-        final_background_color: '#4CAF50',
-        final_text_color: '#ffffff'
-    });
-
-    // Reset navigation
-    navigationItems.splice(0, navigationItems.length,
-        { title: 'Start', route: '/start' },
-        { title: 'Plugin', route: '/plugin' },
-        { title: 'Final', route: '/final' },
-        { title: 'Logout', route: '/logout', system_type: 'logout' }
-    );
-
-    // Reset user
-    Object.assign(userSession, {
-        authenticated: false,
-        userId: '',
-        username: '',
-        email: ''
-    });
-
-    // Reset permissions
-    activePermissions.value = [];
-
-    console.log('[DevTools] All mock data reset to defaults');
+	// Reset theme
+	Object.assign(themeColors, {
+		background_color: "#ffffff",
+		text_color: "#333333",
+		primary_color: "#FFD600",
+		start_background_color: "#667eea",
+		start_text_color: "#ffffff",
+		final_background_color: "#4CAF50",
+		final_text_color: "#ffffff",
+	})
+
+	// Reset navigation
+	navigationItems.splice(
+		0,
+		navigationItems.length,
+		{ title: "Start", route: "/start" },
+		{ title: "Plugin", route: "/plugin" },
+		{ title: "Final", route: "/final" },
+		{ title: "Logout", route: "/logout", system_type: "logout" },
+	)
+
+	// Reset user
+	Object.assign(userSession, {
+		authenticated: false,
+		userId: "",
+		username: "",
+		email: "",
+	})
+
+	// Reset permissions
+	activePermissions.value = []
+
+	console.log("[DevTools] All mock data reset to defaults")
 }
 
 async function exportData() {
-    const data = {
-        theme: { ...themeColors },
-        navigation: [...navigationItems],
-        userSession: { ...userSession },
-        permissions: [...activePermissions.value]
-    };
-
-    try {
-        await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
-        console.log('[DevTools] Mock data exported to clipboard');
-    } catch (err) {
-        console.error('[DevTools] Failed to export:', err);
-    }
+	const data = {
+		theme: { ...themeColors },
+		navigation: [...navigationItems],
+		userSession: { ...userSession },
+		permissions: [...activePermissions.value],
+	}
+
+	try {
+		await navigator.clipboard.writeText(JSON.stringify(data, null, 2))
+		console.log("[DevTools] Mock data exported to clipboard")
+	} catch (err) {
+		console.error("[DevTools] Failed to export:", err)
+	}
 }
 </script>
 
 <style scoped>
 .mock-data-editor {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
 }
 
 .editor-description {
-    background: #2d2d2d;
-    padding: 12px 16px;
-    border-radius: 8px;
+	background: #2d2d2d;
+	padding: 12px 16px;
+	border-radius: 8px;
 }
 
 .editor-description p {
-    margin: 0;
-    font-size: 13px;
-    color: #888;
+	margin: 0;
+	font-size: 13px;
+	color: #888;
 }
 
 .data-sections {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
 }
 
 .data-section {
-    background: #2d2d2d;
-    border-radius: 8px;
-    overflow: hidden;
+	background: #2d2d2d;
+	border-radius: 8px;
+	overflow: hidden;
 }
 
 .section-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 16px;
-    cursor: pointer;
-    transition: background 0.2s;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px 16px;
+	cursor: pointer;
+	transition: background 0.2s;
 }
 
 .section-header:hover {
-    background: #3d3d3d;
+	background: #3d3d3d;
 }
 
 .section-header h4 {
-    margin: 0;
-    font-size: 13px;
-    font-weight: 500;
+	margin: 0;
+	font-size: 13px;
+	font-weight: 500;
 }
 
 .toggle-icon {
-    font-size: 10px;
-    color: #888;
-    width: 12px;
+	font-size: 10px;
+	color: #888;
+	width: 12px;
 }
 
 .section-content {
-    padding: 12px 16px;
-    border-top: 1px solid #3d3d3d;
+	padding: 12px 16px;
+	border-top: 1px solid #3d3d3d;
 }
 
 /* Theme Colors */
 .color-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 12px;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 12px;
 }
 
 .color-field label {
-    display: block;
-    font-size: 11px;
-    color: #888;
-    margin-bottom: 4px;
+	display: block;
+	font-size: 11px;
+	color: #888;
+	margin-bottom: 4px;
 }
 
 .color-input-wrapper {
-    display: flex;
-    gap: 8px;
+	display: flex;
+	gap: 8px;
 }
 
 .color-picker {
-    width: 40px;
-    height: 32px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    background: transparent;
+	width: 40px;
+	height: 32px;
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+	background: transparent;
 }
 
 .color-text {
-    flex: 1;
-    background: #1e1e1e;
-    border: 1px solid #3d3d3d;
-    color: #e0e0e0;
-    padding: 6px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    font-family: 'SF Mono', Monaco, monospace;
+	flex: 1;
+	background: #1e1e1e;
+	border: 1px solid #3d3d3d;
+	color: #e0e0e0;
+	padding: 6px 8px;
+	border-radius: 4px;
+	font-size: 12px;
+	font-family: "SF Mono", Monaco, monospace;
 }
 
 /* Navigation */
 .nav-items {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
 }
 
 .nav-item {
-    display: flex;
-    gap: 8px;
-    align-items: center;
+	display: flex;
+	gap: 8px;
+	align-items: center;
 }
 
 .nav-input {
-    flex: 1;
-    background: #1e1e1e;
-    border: 1px solid #3d3d3d;
-    color: #e0e0e0;
-    padding: 8px 12px;
-    border-radius: 4px;
-    font-size: 12px;
+	flex: 1;
+	background: #1e1e1e;
+	border: 1px solid #3d3d3d;
+	color: #e0e0e0;
+	padding: 8px 12px;
+	border-radius: 4px;
+	font-size: 12px;
 }
 
 .btn-icon {
-    background: transparent;
-    border: none;
-    color: #888;
-    font-size: 18px;
-    cursor: pointer;
-    padding: 4px 8px;
+	background: transparent;
+	border: none;
+	color: #888;
+	font-size: 18px;
+	cursor: pointer;
+	padding: 4px 8px;
 }
 
 .btn-icon:hover {
-    color: #ff6b6b;
+	color: #ff6b6b;
 }
 
 .btn-add {
-    background: #3d3d3d;
-    border: 1px dashed #555;
-    color: #888;
-    padding: 8px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 12px;
-    text-align: center;
-    transition: all 0.2s;
+	background: #3d3d3d;
+	border: 1px dashed #555;
+	color: #888;
+	padding: 8px;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 12px;
+	text-align: center;
+	transition: all 0.2s;
 }
 
 .btn-add:hover {
-    background: #4d4d4d;
-    color: #e0e0e0;
+	background: #4d4d4d;
+	color: #e0e0e0;
 }
 
 /* User Session */
 .user-fields {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
 }
 
 .field-row {
-    display: flex;
-    align-items: center;
-    gap: 12px;
+	display: flex;
+	align-items: center;
+	gap: 12px;
 }
 
 .field-row > label:first-child {
-    min-width: 100px;
-    font-size: 12px;
-    color: #888;
+	min-width: 100px;
+	font-size: 12px;
+	color: #888;
 }
 
 .field-input {
-    flex: 1;
-    background: #1e1e1e;
-    border: 1px solid #3d3d3d;
-    color: #e0e0e0;
-    padding: 8px 12px;
-    border-radius: 4px;
-    font-size: 12px;
+	flex: 1;
+	background: #1e1e1e;
+	border: 1px solid #3d3d3d;
+	color: #e0e0e0;
+	padding: 8px 12px;
+	border-radius: 4px;
+	font-size: 12px;
 }
 
 /* Toggle Switch */
 .toggle-switch {
-    position: relative;
-    display: inline-block;
-    width: 44px;
-    height: 24px;
+	position: relative;
+	display: inline-block;
+	width: 44px;
+	height: 24px;
 }
 
 .toggle-switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
+	opacity: 0;
+	width: 0;
+	height: 0;
 }
 
 .toggle-slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #3d3d3d;
-    transition: 0.3s;
-    border-radius: 24px;
+	position: absolute;
+	cursor: pointer;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: #3d3d3d;
+	transition: 0.3s;
+	border-radius: 24px;
 }
 
 .toggle-slider:before {
-    position: absolute;
-    content: "";
-    height: 18px;
-    width: 18px;
-    left: 3px;
-    bottom: 3px;
-    background-color: #888;
-    transition: 0.3s;
-    border-radius: 50%;
+	position: absolute;
+	content: "";
+	height: 18px;
+	width: 18px;
+	left: 3px;
+	bottom: 3px;
+	background-color: #888;
+	transition: 0.3s;
+	border-radius: 50%;
 }
 
 input:checked + .toggle-slider {
-    background-color: #61dafb;
+	background-color: #61dafb;
 }
 
 input:checked + .toggle-slider:before {
-    transform: translateX(20px);
-    background-color: #1e1e1e;
+	transform: translateX(20px);
+	background-color: #1e1e1e;
 }
 
 /* Permissions */
 .permissions-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
 }
 
 .permission-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 12px;
-    cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 12px;
+	cursor: pointer;
 }
 
 .permission-item input[type="checkbox"] {
-    accent-color: #61dafb;
+	accent-color: #61dafb;
 }
 
 .add-permission {
-    display: flex;
-    gap: 8px;
-    margin-top: 8px;
+	display: flex;
+	gap: 8px;
+	margin-top: 8px;
 }
 
 .btn-add-sm {
-    background: #3d3d3d;
-    border: none;
-    color: #e0e0e0;
-    padding: 8px 12px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 12px;
+	background: #3d3d3d;
+	border: none;
+	color: #e0e0e0;
+	padding: 8px 12px;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 12px;
 }
 
 .btn-add-sm:hover {
-    background: #4d4d4d;
+	background: #4d4d4d;
 }
 
 /* Actions */
 .editor-actions {
-    display: flex;
-    gap: 8px;
-    justify-content: flex-end;
-    padding-top: 16px;
-    border-top: 1px solid #3d3d3d;
+	display: flex;
+	gap: 8px;
+	justify-content: flex-end;
+	padding-top: 16px;
+	border-top: 1px solid #3d3d3d;
 }
 
 .btn {
-    padding: 8px 16px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 12px;
-    transition: all 0.2s;
+	padding: 8px 16px;
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 12px;
+	transition: all 0.2s;
 }
 
 .btn-primary {
-    background: #61dafb;
-    color: #1e1e1e;
+	background: #61dafb;
+	color: #1e1e1e;
 }
 
 .btn-primary:hover {
-    background: #4fc3f7;
+	background: #4fc3f7;
 }
 
 .btn-secondary {
-    background: #3d3d3d;
-    color: #e0e0e0;
+	background: #3d3d3d;
+	color: #e0e0e0;
 }
 
 .btn-secondary:hover {
-    background: #4d4d4d;
+	background: #4d4d4d;
 }
 </style>