senangwebs-tour 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/LICENSE.md +21 -0
  2. package/README.md +653 -0
  3. package/dist/swt-editor.css +869 -0
  4. package/dist/swt-editor.css.map +1 -0
  5. package/dist/swt-editor.js +2853 -0
  6. package/dist/swt-editor.js.map +1 -0
  7. package/dist/swt-editor.min.css +1 -0
  8. package/dist/swt-editor.min.js +1 -0
  9. package/dist/swt.js +873 -0
  10. package/dist/swt.js.map +1 -0
  11. package/dist/swt.min.js +1 -0
  12. package/package.json +39 -0
  13. package/src/AssetManager.js +153 -0
  14. package/src/HotspotManager.js +193 -0
  15. package/src/SceneManager.js +162 -0
  16. package/src/components/hotspot-listener.js +114 -0
  17. package/src/editor/css/main.css +1002 -0
  18. package/src/editor/editor-entry.css +4 -0
  19. package/src/editor/editor-entry.js +30 -0
  20. package/src/editor/js/editor.js +629 -0
  21. package/src/editor/js/export-manager.js +286 -0
  22. package/src/editor/js/hotspot-editor.js +237 -0
  23. package/src/editor/js/preview-controller.js +556 -0
  24. package/src/editor/js/scene-manager.js +202 -0
  25. package/src/editor/js/storage-manager.js +193 -0
  26. package/src/editor/js/ui-controller.js +387 -0
  27. package/src/editor/js/ui-init.js +164 -0
  28. package/src/editor/js/utils.js +217 -0
  29. package/src/index.js +245 -0
package/dist/swt-editor.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["editor-entry.css","css/main.css"],"names":[],"mappings":"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","file":"swt-editor.css","sourcesContent":["/* SenangWebs Tour Editor - CSS Entry Point */\r\n/* This file bundles all editor styles for distribution */\r\n\r\n@import url('./css/main.css');\r\n","/* SenangWebs Tour Editor - Main Styles */\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n:root {\r\n --bg-primary: #09090B; /* darker */\r\n --bg-secondary: #18181B; /* dark (brand.dark) */\r\n --bg-tertiary: #1F1F22; /* slightly lighter for panels */\r\n --bg-hover: #232426; /* hover state for dark surfaces */\r\n --border-color: #2A2A2D; /* subtle border on dark bg */\r\n --text-primary: #FFFFFF; /* readable on dark backgrounds */\r\n --text-secondary: #A7CFC6; /* soft mint/teal for secondary text */\r\n --text-muted: #7A8086; /* muted gray for helper text */\r\n --accent-primary: #00FF99; /* brand primary */\r\n --accent-hover: #00D882; /* ~15% darker than primary for hover */\r\n --accent-cyan: #00D1E6; /* cyan/teal accent (mix of primary + blue tone) */\r\n --success: #006045; /* green success tone (derived from primary) */\r\n --danger: #EF4444; /* standard danger red */\r\n --warning: #F59E0B; /* standard warning orange */\r\n}\r\n\r\nbody {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\r\n background: var(--bg-primary);\r\n color: var(--text-primary);\r\n height: 100vh;\r\n overflow: hidden;\r\n}\r\n\r\n/* Header */\r\n.editor-header {\r\n background: var(--bg-secondary);\r\n border-bottom: 1px solid var(--border-color);\r\n padding: 12px 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: 60px;\r\n}\r\n\r\n.header-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n}\r\n\r\n.logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 18px;\r\n font-weight: 600;\r\n}\r\n\r\n.logo-icon {\r\n width: 24px;\r\n height: 24px;\r\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-cyan));\r\n border-radius: 4px;\r\n}\r\n\r\n.project-info {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding-left: 16px;\r\n border-left: 1px solid var(--border-color);\r\n}\r\n\r\n.project-label {\r\n color: var(--text-muted);\r\n font-size: 12px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.project-name {\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-weight: 500;\r\n}\r\n\r\n.header-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.btn {\r\n padding: 8px 16px;\r\n border: none;\r\n border-radius: 6px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n}\r\n\r\n.btn-secondary {\r\n background: var(--bg-tertiary);\r\n color: var(--text-primary);\r\n border: 1px solid var(--border-color);\r\n}\r\n\r\n.btn-secondary:hover {\r\n background: var(--bg-hover);\r\n}\r\n\r\n.btn-primary {\r\n background: var(--accent-primary);\r\n color: var(--bg-primary);\r\n}\r\n\r\n.btn-primary:hover {\r\n background: var(--accent-hover);\r\n}\r\n\r\n.btn-success {\r\n background: var(--success);\r\n color: white;\r\n}\r\n\r\n.btn-success:hover {\r\n opacity: 0.9;\r\n}\r\n\r\n.btn-icon {\r\n width: 16px;\r\n height: 16px;\r\n}\r\n\r\n/* Main Layout */\r\n.editor-main {\r\n display: flex;\r\n height: calc(100vh - 60px);\r\n position: relative;\r\n}\r\n\r\n/* Sidebar */\r\n.sidebar {\r\n width: 280px;\r\n background: var(--bg-secondary);\r\n border-right: 1px solid var(--border-color);\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.sidebar-header {\r\n padding: 12px 16px;\r\n border-bottom: 1px solid var(--border-color);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n\r\n.sidebar-title {\r\n font-size: 14px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n color: var(--text-secondary);\r\n}\r\n\r\n.btn-add {\r\n background: var(--accent-primary);\r\n color: var(--bg-primary);\r\n padding: 8px 16px;\r\n border: none;\r\n border-radius: 6px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n}\r\n\r\n.btn-add:hover {\r\n background: var(--accent-hover);\r\n}\r\n\r\n.scenes-list {\r\n flex: 1;\r\n overflow-y: auto;\r\n padding: 12px;\r\n}\r\n\r\n.scene-card {\r\n background: var(--bg-tertiary);\r\n border: 2px solid transparent;\r\n border-radius: 8px;\r\n margin-bottom: 12px;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.scene-card img {\r\n width: 100%;\r\n aspect-ratio: 2/1;\r\n object-fit: cover;\r\n}\r\n\r\n.scene-card:hover {\r\n border-color: var(--border-color);\r\n}\r\n\r\n.scene-card.active {\r\n border-color: var(--accent-primary);\r\n background: rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.scene-thumbnail {\r\n width: 100%;\r\n height: 120px;\r\n background: var(--bg-primary);\r\n border-radius: 4px;\r\n margin-bottom: 8px;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.scene-thumbnail img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.scene-info {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n margin: 6px 8px;\r\n}\r\n\r\n.scene-name {\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: var(--text-primary);\r\n}\r\n\r\n.scene-meta {\r\n font-size: 12px;\r\n color: var(--text-muted);\r\n}\r\n\r\n.scene-actions {\r\n display: flex;\r\n gap: 4px;\r\n margin: 6px 8px;\r\n}\r\n\r\n.btn-icon-small {\r\n padding: 4px 8px;\r\n background: var(--bg-hover);\r\n border: 1px solid var(--border-color);\r\n border-radius: 4px;\r\n cursor: pointer;\r\n font-size: 11px;\r\n color: var(--text-secondary);\r\n transition: all 0.2s;\r\n}\r\n\r\n.btn-icon-small:hover {\r\n background: var(--bg-tertiary);\r\n color: var(--text-primary);\r\n}\r\n\r\n.btn-icon {\r\n width: 32px;\r\n height: 32px;\r\n background: transparent;\r\n border: 1px solid var(--border-color);\r\n border-radius: 4px;\r\n cursor: pointer;\r\n font-size: 12px;\r\n color: var(--text-secondary);\r\n transition: all 0.2s;\r\n}\r\n\r\n.btn-icon:hover {\r\n background: var(--danger);\r\n color: white;\r\n border-color: var(--danger);\r\n}\r\n\r\n.drag-handle {\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n cursor: move;\r\n padding: 8px;\r\n background: rgba(0, 0, 0, 0.75);\r\n border-radius: 4px;\r\n z-index: 10;\r\n cursor: move;\r\n width: 32px;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n fill: var(--text-secondary);\r\n}\r\n\r\n/* Canvas Area */\r\n.canvas-area {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n background: var(--bg-primary);\r\n}\r\n\r\n.canvas-area.preview-active {\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n width: 100vw;\r\n height: 100%;\r\n z-index: 100;\r\n}\r\n\r\n.toolbar {\r\n background: var(--bg-secondary);\r\n border-bottom: 1px solid var(--border-color);\r\n padding: 12px 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.toolbar-tabs {\r\n display: flex;\r\n width: 100%;\r\n justify-content: space-evenly;\r\n gap: 4px;\r\n}\r\n\r\n.tab {\r\n padding: 8px 16px;\r\n background: transparent;\r\n border: none;\r\n border-radius: 6px;\r\n color: var(--text-secondary);\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n}\r\n\r\n.tab:hover {\r\n background: var(--bg-tertiary);\r\n color: var(--text-primary);\r\n}\r\n\r\n.tab.active {\r\n background: var(--accent-primary);\r\n color: var(--bg-primary);\r\n}\r\n\r\n.toolbar-controls {\r\n display: flex;\r\n gap: 8px;\r\n align-items: center;\r\n}\r\n\r\n.zoom-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 4px 12px;\r\n background: var(--bg-tertiary);\r\n border-radius: 6px;\r\n border: 1px solid var(--border-color);\r\n}\r\n\r\n.zoom-btn {\r\n background: none;\r\n border: none;\r\n color: var(--text-secondary);\r\n cursor: pointer;\r\n padding: 4px;\r\n font-size: 16px;\r\n transition: color 0.2s;\r\n}\r\n\r\n.zoom-btn:hover {\r\n color: var(--text-primary);\r\n}\r\n\r\n.zoom-value {\r\n font-size: 12px;\r\n color: var(--text-secondary);\r\n min-width: 40px;\r\n text-align: center;\r\n}\r\n\r\n.canvas-container {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 20px;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.preview-container {\r\n flex: 1;\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n}\r\n\r\n.preview-area {\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n}\r\n\r\n#preview {\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.preview-empty {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n height: 100%;\r\n color: var(--text-muted);\r\n}\r\n\r\n.preview-empty p {\r\n margin: 4px 0;\r\n}\r\n\r\n.canvas-viewport {\r\n width: 100%;\r\n max-width: 1200px;\r\n aspect-ratio: 16/9;\r\n background: var(--bg-secondary);\r\n border-radius: 8px;\r\n border: 1px solid var(--border-color);\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.canvas-viewport img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.hotspot-marker {\r\n position: absolute;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n border: 3px solid white;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.hotspot-marker:hover {\r\n transform: scale(1.2);\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);\r\n}\r\n\r\n.hotspot-marker.selected {\r\n border-width: 4px;\r\n box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n.empty-state {\r\n text-align: center;\r\n padding: 40px 20px;\r\n color: var(--text-muted);\r\n}\r\n\r\n.empty-state p {\r\n margin: 8px 0;\r\n}\r\n\r\n.empty-state .hint {\r\n font-size: 12px;\r\n color: var(--text-muted);\r\n}\r\n\r\n/* Properties Panel */\r\n.properties-panel {\r\n width: 320px;\r\n background: var(--bg-secondary);\r\n border-left: 1px solid var(--border-color);\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.panel-header {\r\n padding: 16px;\r\n border-bottom: 1px solid var(--border-color);\r\n}\r\n\r\n.panel-title {\r\n font-size: 14px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n color: var(--text-secondary);\r\n}\r\n\r\n.panel-content {\r\n flex: 1;\r\n overflow-y: auto;\r\n padding: 16px;\r\n}\r\n\r\n.form-group {\r\n margin-bottom: 20px;\r\n}\r\n\r\n.form-label {\r\n display: block;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: var(--text-secondary);\r\n margin-bottom: 8px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.form-input {\r\n width: 100%;\r\n padding: 10px 12px;\r\n background: var(--bg-tertiary);\r\n border: 1px solid var(--border-color);\r\n border-radius: 6px;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n transition: all 0.2s;\r\n}\r\n\r\n.form-input:focus {\r\n outline: none;\r\n border-color: var(--accent-primary);\r\n background: var(--bg-primary);\r\n}\r\n\r\n.form-textarea {\r\n min-height: 80px;\r\n resize: vertical;\r\n font-family: inherit;\r\n}\r\n\r\n.form-select {\r\n width: 100%;\r\n padding: 10px 12px;\r\n background: var(--bg-tertiary);\r\n border: 1px solid var(--border-color);\r\n border-radius: 6px;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n cursor: pointer;\r\n}\r\n\r\n.form-checkbox {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n cursor: pointer;\r\n}\r\n\r\n.form-checkbox input {\r\n width: 18px;\r\n height: 18px;\r\n cursor: pointer;\r\n}\r\n\r\n.form-checkbox label {\r\n font-size: 14px;\r\n color: var(--text-primary);\r\n cursor: pointer;\r\n}\r\n\r\n.color-picker-group {\r\n display: flex;\r\n gap: 12px;\r\n align-items: center;\r\n}\r\n\r\n.color-preview {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 6px;\r\n border: 2px solid var(--border-color);\r\n cursor: pointer;\r\n}\r\n\r\n.color-input {\r\n flex: 1;\r\n}\r\n\r\n.position-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 8px;\r\n}\r\n\r\n.position-input {\r\n padding: 8px;\r\n background: var(--bg-tertiary);\r\n border: 1px solid var(--border-color);\r\n border-radius: 4px;\r\n color: var(--text-primary);\r\n font-size: 12px;\r\n text-align: center;\r\n}\r\n\r\n.hotspot-controls {\r\n display: flex;\r\n gap: 8px;\r\n margin-bottom: 20px;\r\n justify-content: space-between;\r\n}\r\n\r\n.hotspot-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.hotspot-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 12px;\r\n background: var(--bg-tertiary);\r\n border: 2px solid transparent;\r\n border-radius: 6px;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n}\r\n\r\n.hotspot-item:hover {\r\n border-color: var(--border-color);\r\n}\r\n\r\n.hotspot-item.active {\r\n border-color: var(--accent-primary);\r\n background: rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.hotspot-color {\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 4px;\r\n border: 2px solid var(--border-color);\r\n flex-shrink: 0;\r\n}\r\n\r\n.hotspot-info {\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.hotspot-title {\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: var(--text-primary);\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.hotspot-target {\r\n font-size: 12px;\r\n color: var(--text-muted);\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.hotspot-actions {\r\n display: flex;\r\n gap: 4px;\r\n}\r\n\r\n.btn-delete {\r\n padding: 4px 8px;\r\n background: transparent;\r\n border: 1px solid var(--border-color);\r\n border-radius: 4px;\r\n color: var(--danger);\r\n cursor: pointer;\r\n font-size: 12px;\r\n transition: all 0.2s;\r\n}\r\n\r\n.btn-delete:hover {\r\n background: var(--danger);\r\n color: white;\r\n}\r\n\r\n.section {\r\n margin-bottom: 20px;\r\n}\r\n\r\n.section h3 {\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: var(--text-secondary);\r\n margin-bottom: 16px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.btn-block {\r\n width: 100%;\r\n}\r\n\r\n/* Toast Notification */\r\n.toast {\r\n position: fixed;\r\n bottom: 20px;\r\n right: 20px;\r\n background: var(--bg-secondary);\r\n color: var(--text-primary);\r\n padding: 12px 20px;\r\n border-radius: 8px;\r\n border: 1px solid var(--border-color);\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: all 0.3s;\r\n pointer-events: none;\r\n z-index: 10000;\r\n}\r\n\r\n.toast.show {\r\n opacity: 1;\r\n transform: translateY(0);\r\n pointer-events: auto;\r\n}\r\n\r\n.toast.success {\r\n border-color: var(--success);\r\n background: rgba(16, 185, 129, 0.1);\r\n}\r\n\r\n.toast.error {\r\n border-color: var(--danger);\r\n background: rgba(239, 68, 68, 0.1);\r\n}\r\n\r\n.toast.info {\r\n border-color: var(--accent-cyan);\r\n background: rgba(6, 182, 212, 0.1);\r\n}\r\n\r\n/* Modal */\r\n.modal {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.7);\r\n z-index: 9999;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.modal.show {\r\n display: flex;\r\n}\r\n\r\n.modal-content {\r\n background: var(--bg-secondary);\r\n border-radius: 12px;\r\n border: 1px solid var(--border-color);\r\n max-width: 600px;\r\n width: 90%;\r\n max-height: 90vh;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.modal-header {\r\n padding: 20px;\r\n border-bottom: 1px solid var(--border-color);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n\r\n.modal-header h3 {\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: var(--text-primary);\r\n}\r\n\r\n.modal-close {\r\n background: none;\r\n border: none;\r\n color: var(--text-secondary);\r\n font-size: 24px;\r\n cursor: pointer;\r\n padding: 0;\r\n width: 32px;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 4px;\r\n transition: all 0.2s;\r\n}\r\n\r\n.modal-close:hover {\r\n background: var(--bg-hover);\r\n color: var(--text-primary);\r\n}\r\n\r\n.modal-body {\r\n padding: 20px;\r\n overflow-y: auto;\r\n flex: 1;\r\n}\r\n\r\n.modal-body h4 {\r\n font-size: 16px;\r\n font-weight: 600;\r\n margin-top: 20px;\r\n margin-bottom: 12px;\r\n color: var(--text-primary);\r\n}\r\n\r\n.modal-body h4:first-child {\r\n margin-top: 0;\r\n}\r\n\r\n.modal-body p {\r\n margin-bottom: 12px;\r\n line-height: 1.6;\r\n color: var(--text-secondary);\r\n}\r\n\r\n.modal-body ul, .modal-body ol {\r\n margin-bottom: 12px;\r\n padding-left: 24px;\r\n line-height: 1.8;\r\n color: var(--text-secondary);\r\n}\r\n\r\n.modal-body li {\r\n margin-bottom: 8px;\r\n}\r\n\r\n.modal-body kbd {\r\n background: var(--bg-tertiary);\r\n border: 1px solid var(--border-color);\r\n border-radius: 4px;\r\n padding: 2px 6px;\r\n font-family: monospace;\r\n font-size: 12px;\r\n}\r\n\r\n.modal-footer {\r\n padding: 16px 20px;\r\n border-top: 1px solid var(--border-color);\r\n display: flex;\r\n gap: 8px;\r\n justify-content: flex-end;\r\n}\r\n\r\n.export-info {\r\n background: var(--bg-tertiary);\r\n border: 1px solid var(--border-color);\r\n border-radius: 6px;\r\n padding: 16px;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.export-info p {\r\n margin-bottom: 8px;\r\n font-size: 13px;\r\n}\r\n\r\n.export-info p:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n.export-preview {\r\n width: 100%;\r\n height: 200px;\r\n background: var(--bg-tertiary);\r\n border: 1px solid var(--border-color);\r\n border-radius: 6px;\r\n padding: 12px;\r\n font-family: monospace;\r\n font-size: 12px;\r\n color: var(--text-primary);\r\n resize: vertical;\r\n}\r\n\r\n.btn-active {\r\n animation: pulse 2s infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0.7; }\r\n}\r\n\r\n.dragging {\r\n opacity: 0.5;\r\n}\r\n\r\n/* Scrollbar Styling */\r\n::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\r\n}\r\n\r\n::-webkit-scrollbar-track {\r\n background: var(--bg-primary);\r\n}\r\n\r\n::-webkit-scrollbar-thumb {\r\n background: var(--bg-tertiary);\r\n border-radius: 4px;\r\n}\r\n\r\n::-webkit-scrollbar-thumb:hover {\r\n background: var(--bg-hover);\r\n}\r\n\r\n/* Loading Overlay */\r\n.preview-loading {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(9, 9, 11, 0.85);\r\n backdrop-filter: blur(4px);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n transition: opacity 0.3s ease;\r\n}\r\n\r\n.preview-loading.hidden {\r\n opacity: 0;\r\n pointer-events: none;\r\n}\r\n\r\n.loading-spinner {\r\n width: 48px;\r\n height: 48px;\r\n border: 3px solid var(--border-color);\r\n border-top-color: var(--accent-primary);\r\n border-radius: 50%;\r\n animation: spin 0.8s linear infinite;\r\n}\r\n\r\n.loading-text {\r\n margin-top: 16px;\r\n color: var(--text-secondary);\r\n font-size: 14px;\r\n font-weight: 500;\r\n}\r\n\r\n@keyframes spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n/* Responsive */\r\n@media (max-width: 1024px) {\r\n .sidebar {\r\n width: 240px;\r\n }\r\n .properties-panel {\r\n width: 280px;\r\n }\r\n}\r\n"]}