senangwebs-tour 1.0.3 → 1.0.6

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 (23) hide show
  1. package/dist/swt-editor.css +36 -2
  2. package/dist/swt-editor.css.map +1 -1
  3. package/dist/swt-editor.js +3137 -223
  4. package/dist/swt-editor.js.map +1 -1
  5. package/dist/swt-editor.min.css +1 -1
  6. package/dist/swt-editor.min.js +1 -1
  7. package/dist/swt.js +292 -26
  8. package/dist/swt.js.map +1 -1
  9. package/dist/swt.min.js +1 -1
  10. package/package.json +2 -1
  11. package/src/AssetManager.js +13 -2
  12. package/src/HotspotManager.js +93 -20
  13. package/src/IconRenderer.js +123 -0
  14. package/src/SceneManager.js +7 -1
  15. package/src/editor/css/main.css +41 -2
  16. package/src/editor/js/editor.js +108 -23
  17. package/src/editor/js/export-manager.js +56 -9
  18. package/src/editor/js/hotspot-editor.js +10 -57
  19. package/src/editor/js/preview-controller.js +132 -105
  20. package/src/editor/js/scene-manager.js +35 -14
  21. package/src/editor/js/ui-controller.js +91 -8
  22. package/src/editor/js/utils.js +1 -0
  23. package/src/index.js +56 -3
package/dist/swt-editor.css CHANGED
@@ -196,7 +196,6 @@ body {
196
196
  }
197
197
  .scene-card.active {
198
198
  border-color: var(--accent-primary);
199
- background: rgba(59, 130, 246, 0.1);
200
199
  }
201
200
  .scene-thumbnail {
202
201
  width: 100%;
@@ -589,7 +588,6 @@ body {
589
588
  }
590
589
  .hotspot-item.active {
591
590
  border-color: var(--accent-primary);
592
- background: rgba(59, 130, 246, 0.1);
593
591
  }
594
592
  .hotspot-color {
595
593
  width: 24px;
@@ -885,6 +883,42 @@ body {
885
883
  transform: rotate(360deg);
886
884
  }
887
885
  }
886
+ /* Icon Grid */
887
+ .icon-grid {
888
+ display: grid;
889
+ grid-template-columns: repeat(5, 1fr);
890
+ gap: 8px;
891
+ margin-top: 8px;
892
+ height: 280px;
893
+ overflow-y: auto;
894
+ }
895
+ /* Icon Grid Buttons */
896
+ .icon-btn {
897
+ width: 100%;
898
+ aspect-ratio: 1;
899
+ border: 2px solid var(--border-color);
900
+ border-radius: 6px;
901
+ background: var(--bg-secondary);
902
+ cursor: pointer;
903
+ display: flex;
904
+ align-items: center;
905
+ justify-content: center;
906
+ transition: all 0.2s ease;
907
+ color: var(--text-secondary);
908
+ }
909
+ .icon-btn ss-icon {
910
+ width: 20px;
911
+ height: 20px;
912
+ }
913
+ .icon-btn:hover {
914
+ background: var(--bg-hover);
915
+ border-color: var(--text-muted);
916
+ }
917
+ .icon-btn.active {
918
+ border-color: var(--accent-primary);
919
+ background: rgba(0, 255, 153, 0.1);
920
+ color: var(--accent-primary);
921
+ }
888
922
  /* Responsive */
889
923
  @media (max-width: 1024px) {
890
924
  .sidebar {
package/dist/swt-editor.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["css/main.css","editor-entry.css"],"names":[],"mappings":"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","file":"swt-editor.css","sourcesContent":["/* SenangWebs Tour Editor - Main Styles */\r\n\r\n@import url(\"https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap\");\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: var(--font-family);\r\n}\r\n\r\n:root {\r\n --font-family: \"Outfit\", sans-serif;\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: #d4d4d4; /* 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 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(\r\n 135deg,\r\n var(--accent-primary),\r\n var(--accent-cyan)\r\n );\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 display: flex;\r\n align-items: center;\r\n justify-content: center;\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: 16px;\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: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n width: 100%;\r\n justify-content: space-evenly;\r\n gap: 8px;\r\n}\r\n\r\n.tab {\r\n padding: 6px 8px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\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 ss-icon {\r\n font-size: 20px;\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 width: 32px;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: transparent;\r\n border: 1px solid var(--danger);\r\n border-radius: 4px;\r\n color: var(--danger);\r\n cursor: pointer;\r\n font-size: 16px;\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,\r\n.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%,\r\n 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.7;\r\n }\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","/* 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"]}
1
+ {"version":3,"sources":["css/main.css","editor-entry.css"],"names":[],"mappings":"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","file":"swt-editor.css","sourcesContent":["/* SenangWebs Tour Editor - Main Styles */\r\n\r\n@import url(\"https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap\");\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: var(--font-family);\r\n}\r\n\r\n:root {\r\n --font-family: \"Outfit\", sans-serif;\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: #d4d4d4; /* 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 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(\r\n 135deg,\r\n var(--accent-primary),\r\n var(--accent-cyan)\r\n );\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}\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 display: flex;\r\n align-items: center;\r\n justify-content: center;\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: 16px;\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: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n width: 100%;\r\n justify-content: space-evenly;\r\n gap: 8px;\r\n}\r\n\r\n.tab {\r\n padding: 6px 8px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\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 ss-icon {\r\n font-size: 20px;\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}\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 width: 32px;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: transparent;\r\n border: 1px solid var(--danger);\r\n border-radius: 4px;\r\n color: var(--danger);\r\n cursor: pointer;\r\n font-size: 16px;\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,\r\n.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%,\r\n 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.7;\r\n }\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/* Icon Grid */\r\n.icon-grid {\r\n display: grid;\r\n grid-template-columns: repeat(5, 1fr);\r\n gap: 8px;\r\n margin-top: 8px;\r\n height: 280px;\r\n overflow-y: auto;\r\n}\r\n\r\n/* Icon Grid Buttons */\r\n.icon-btn {\r\n width: 100%;\r\n aspect-ratio: 1;\r\n border: 2px solid var(--border-color);\r\n border-radius: 6px;\r\n background: var(--bg-secondary);\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.2s ease;\r\n color: var(--text-secondary);\r\n}\r\n\r\n.icon-btn ss-icon {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n.icon-btn:hover {\r\n background: var(--bg-hover);\r\n border-color: var(--text-muted);\r\n}\r\n\r\n.icon-btn.active {\r\n border-color: var(--accent-primary);\r\n background: rgba(0, 255, 153, 0.1);\r\n color: var(--accent-primary);\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","/* 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"]}