@industry-theme/xterm-terminal-panel 0.5.6 → 0.5.8

package/dist/index.css

@@ -166,3 +166,1933 @@
 .terminal-working-overlay.closing {
   animation: blinds-up .3s ease-in forwards;
 }
+
+/* node_modules/@principal-ade/panels/dist/index.css */
+.animated-resizable-layout {
+  position: relative;
+  background-color: var(--panel-background);
+  width: 100%;
+  height: 100%;
+}
+
+.hybrid-panel {
+  overflow: auto;
+  background-color: var(--panel-background);
+  height: 100%;
+}
+
+.resize-handle {
+  background-color: var(--panel-handle);
+  display: flex;
+  cursor: col-resize;
+  position: relative;
+  justify-content: center;
+  align-items:  center;
+  width: 8px;
+  transition: background-color .2s, opacity .3s, width .3s;
+}
+
+.resize-handle.collapsed {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.resize-handle:hover {
+  background-color: var(--panel-handle-hover);
+}
+
+.resize-handle:active {
+  background-color: var(--panel-handle-active);
+}
+
+.handle-bar {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items:  center;
+  width: 100%;
+  height: 100%;
+}
+
+.collapse-toggle {
+  position: absolute;
+  background: var(--panel-button-bg);
+  border: 1px solid var(--panel-button-border);
+  cursor: pointer;
+  color: var(--panel-button-icon);
+  outline: none;
+  display: flex;
+  z-index: 10;
+  border-radius: 4px;
+  justify-content: center;
+  align-items:  center;
+  padding: 4px 8px;
+  transition: all .2s;
+  font-size: 14px;
+  box-shadow: 0 2px 4px #0000001a;
+}
+
+.animated-vertical-layout {
+  position: relative;
+  background-color: var(--panel-background);
+  width: 100%;
+  height: 100%;
+}
+
+.vertical-panel {
+  overflow: auto;
+  background-color: var(--panel-background);
+  width: 100%;
+}
+
+.panel-content-wrapper {
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.vertical-resize-handle {
+  background-color: var(--panel-handle);
+  display: flex;
+  cursor: row-resize;
+  position: relative;
+  justify-content: center;
+  align-items:  center;
+  height: 8px;
+  transition: background-color .2s, opacity .3s, height .3s;
+}
+
+.vertical-resize-handle.collapsed {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.vertical-resize-handle:hover {
+  background-color: var(--panel-handle-hover);
+}
+
+.vertical-resize-handle:active {
+  background-color: var(--panel-handle-active);
+}
+
+.handle-bar {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items:  center;
+  gap: 8px;
+  width: 100%;
+  height: 100%;
+}
+
+.collapse-toggle {
+  background: var(--panel-button-bg);
+  border: 1px solid var(--panel-button-border);
+  cursor: pointer;
+  color: var(--panel-button-icon);
+  outline: none;
+  display: flex;
+  z-index: 10;
+  border-radius: 4px;
+  justify-content: center;
+  align-items:  center;
+  padding: 4px 8px;
+  transition: all .2s;
+  font-size: 14px;
+  box-shadow: 0 2px 4px #0000001a;
+}
+
+.collapse-toggle:hover:not(:disabled) {
+  background-color: var(--panel-button-hover);
+  box-shadow: 0 2px 6px #00000026;
+}
+
+.collapse-toggle:active:not(:disabled) {
+  opacity: .8;
+}
+
+.collapsible-split-pane {
+  position: relative;
+  display: flex;
+  background-color: var(--panel-background);
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.csp-header {
+  display: flex;
+  background-color: var(--panel-handle);
+  border-bottom: 1px solid var(--panel-border, #80808033);
+  -webkit-user-select: none;
+  user-select: none;
+  flex-shrink: 0;
+  align-items:  center;
+  gap: 8px;
+  padding: 0 12px;
+  transition: background-color .15s;
+}
+
+.csp-header-collapsed {
+  cursor: pointer;
+}
+
+.csp-header-collapsed:hover {
+  background-color: var(--panel-handle-hover);
+}
+
+.csp-header-collapsed:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--panel-focus-ring, #3b82f680);
+}
+
+.csp-header-icon {
+  display: flex;
+  color: var(--panel-text-secondary, #888);
+  justify-content: center;
+  align-items:  center;
+  font-size: 14px;
+}
+
+.csp-header-title {
+  color: var(--panel-text, #333);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.csp-header-toggle {
+  display: flex;
+  color: var(--panel-text-secondary, #888);
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 3px;
+  justify-content: center;
+  align-items:  center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  transition: background-color .15s, color .15s;
+}
+
+.csp-header-toggle:hover {
+  background-color: var(--panel-button-hover, #80808033);
+  color: var(--panel-text, #333);
+}
+
+.csp-content-area {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.csp-primary-content-full {
+  overflow: hidden;
+  flex: 1;
+  min-height: 0;
+}
+
+.csp-secondary-panel, .csp-primary-panel {
+  overflow: hidden;
+  background-color: var(--panel-background);
+}
+
+.csp-panel-content {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.csp-secondary-body {
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.csp-resize-handle {
+  background-color: var(--panel-handle);
+  display: flex;
+  cursor: row-resize;
+  position: relative;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items:  center;
+  height: 6px;
+  transition: background-color .15s;
+}
+
+.csp-resize-handle:hover {
+  background-color: var(--panel-handle-hover);
+}
+
+.csp-resize-handle:active {
+  background-color: var(--panel-handle-active);
+}
+
+.csp-resize-handle-bar {
+  background-color: var(--panel-handle-bar, #80808066);
+  border-radius: 2px;
+  width: 32px;
+  height: 3px;
+  transition: background-color .15s;
+}
+
+.csp-resize-handle:hover .csp-resize-handle-bar {
+  background-color: var(--panel-handle-bar-hover, #80808099);
+}
+
+.three-panel-layout {
+  display: flex;
+  position: relative;
+  background-color: var(--panel-background);
+  box-sizing: border-box;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.three-panel-item {
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--panel-background);
+  box-sizing: border-box;
+  flex-direction: column;
+}
+
+.three-panel-item[data-edit-mode="true"] {
+  background-color: var(--panel-accent-bg);
+  border-radius: 12px;
+}
+
+.three-panel-item.collapsible-panel {
+  will-change: flex;
+}
+
+.three-panel-item.collapsible-panel.animating {
+  pointer-events: none;
+}
+
+.three-panel-item.collapsible-panel.collapsed {
+  visibility: hidden;
+  overflow: hidden !important;
+  flex: 0 !important;
+  width: 0 !important;
+  min-width: 0 !important;
+  max-width: 0 !important;
+}
+
+.three-panel-item.middle-panel {
+  flex: 1;
+  min-width: 200px;
+}
+
+.panel-content-wrapper {
+  overflow-x: hidden;
+  overflow-y: auto;
+  will-change: opacity;
+  box-sizing: border-box;
+  flex: 1;
+}
+
+.resize-handle {
+  position: relative;
+  display: flex;
+  cursor: col-resize;
+  background: var(--panel-border);
+  justify-content: center;
+  align-items:  center;
+  overflow: visible !important;
+  width: 1px !important;
+}
+
+.resize-handle:before {
+  content: "";
+  position: absolute;
+  background: none;
+  inset: 0 -10px;
+}
+
+.resize-handle:after {
+  content: "";
+  position: absolute;
+  background: var(--panel-handle);
+  opacity: 0;
+  z-index: -1;
+  transition: opacity .2s;
+  inset: 0 -10px;
+}
+
+.resize-handle:hover:after {
+  opacity: 1;
+}
+
+.resize-handle:hover {
+  background: var(--panel-handle-hover);
+}
+
+.resize-handle:active:after {
+  opacity: 1;
+  background: var(--panel-handle-active);
+}
+
+.resize-handle:active {
+  background: var(--panel-handle-active);
+}
+
+.resize-handle.collapsed {
+  visibility: hidden;
+  width: 0 !important;
+}
+
+.resize-handle.left-handle.collapsed {
+  margin-right: -1px;
+}
+
+.resize-handle.right-handle.collapsed {
+  margin-left: -1px;
+}
+
+.handle-bar {
+  position: relative;
+  display: flex;
+  z-index: 2;
+  justify-content: center;
+  align-items:  center;
+  width: 100%;
+  height: 100%;
+}
+
+.collapse-toggle {
+  position: absolute;
+  background: var(--panel-button-bg);
+  border: 1px solid var(--panel-button-border);
+  display: flex;
+  cursor: pointer;
+  color: var(--panel-button-icon);
+  z-index: 10;
+  border-radius: 4px;
+  justify-content: center;
+  align-items:  center;
+  width: 20px;
+  height: 40px;
+  padding: 0;
+  transition: all .2s;
+  font-size: 12px;
+  line-height: 1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.collapse-toggle:hover {
+  background: var(--panel-button-hover);
+}
+
+.collapse-toggle:active {
+  opacity: .8;
+}
+
+.collapse-toggle:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+  .resize-handle:before, .resize-handle:after {
+    left: -8px;
+    right: -8px;
+  }
+
+  .collapse-toggle {
+    width: 24px;
+    height: 48px;
+    font-size: 14px;
+  }
+}
+
+@keyframes wiggle {
+  0% {
+    transform: rotate(0);
+  }
+
+  25% {
+    transform: rotate(1deg);
+  }
+
+  50% {
+    transform: rotate(0);
+  }
+
+  75% {
+    transform: rotate(-1deg);
+  }
+
+  to {
+    transform: rotate(0);
+  }
+}
+
+@keyframes scaleIn {
+  0% {
+    transform: scale(.95);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes pulse {
+  0%, to {
+    box-shadow: 0 0 #3b82f666;
+  }
+
+  50% {
+    box-shadow: 0 0 0 8px #3b82f600;
+  }
+}
+
+.editable-panel-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.editable-panel-layout.edit-mode-active {
+  background: #0000000d;
+}
+
+[data-slot][data-edit-mode="true"] {
+  transform-origin: center center;
+  cursor: grab;
+  will-change: transform;
+  transition: transform .3s cubic-bezier(.4,0,.2,1);
+  transform: scale(.95);
+}
+
+[data-slot][data-edit-mode="true"]:active {
+  cursor: grabbing;
+}
+
+[data-slot][data-dragging="true"] {
+  cursor: grabbing !important;
+  transition: none !important;
+  transform: scale(.95) !important;
+}
+
+.edit-mode-active [data-slot][data-edit-mode="true"] {
+  transform-origin: center center;
+}
+
+.slot-with-overlay {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.slot-with-overlay.dragging {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.slot-edit-overlay {
+  position: absolute;
+  pointer-events: auto;
+  cursor: grab;
+  z-index: 100;
+  display: flex;
+  background: none;
+  border: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items:  center;
+  inset: 0;
+}
+
+.slot-edit-overlay:hover {
+  background: #3b82f608;
+}
+
+.slot-edit-overlay:active {
+  cursor: grabbing;
+}
+
+.drag-indicator, .slot-position-label {
+  display: none;
+}
+
+.edit-mode-toggle {
+  position: absolute;
+  z-index: 1000;
+  color: #374151;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 8px 16px;
+  transition: all .2s;
+  font-size: 14px;
+  font-weight: 500;
+  top: 16px;
+  right: 16px;
+  box-shadow: 0 2px 4px #0000001a;
+}
+
+.edit-mode-toggle:hover {
+  background: #f9fafb;
+  box-shadow: 0 4px 6px #0000001a;
+}
+
+.edit-mode-toggle.active {
+  color: #fff;
+  background: #3b82f6;
+  border-color: #2563eb;
+}
+
+.edit-mode-overlay {
+  position: fixed;
+  z-index: 998;
+  animation: fadeIn .2s ease;
+  background: #0000004d;
+  inset: 0;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.edit-mode-configurator {
+  position: relative;
+  z-index: 999;
+  animation: scaleIn .3s ease;
+  padding: 20px;
+}
+
+.panel-slot {
+  position: relative;
+  border: 2px dashed #0000;
+  border-radius: 12px;
+  min-height: 120px;
+  padding: 12px;
+  transition: all .3s;
+}
+
+.panel-slot.edit-mode {
+  background: #ffffff80;
+  border-color: #d1d5db;
+}
+
+.panel-slot.drag-over {
+  background: #3b82f61a;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 4px #3b82f61a;
+}
+
+.panel-slot.empty {
+  display: flex;
+  color: #9ca3af;
+  justify-content: center;
+  align-items:  center;
+  font-size: 14px;
+}
+
+.draggable-panel {
+  position: relative;
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  margin: 8px 0;
+  padding: 12px 16px;
+  transition: all .2s;
+}
+
+.draggable-panel:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 2px 8px #0000001a;
+}
+
+.draggable-panel.dragging {
+  opacity: .5;
+  cursor: grabbing;
+}
+
+.draggable-panel.edit-mode {
+  animation: wiggle .4s ease-in-out infinite;
+  transform-origin: center;
+}
+
+.draggable-panel.edit-mode:nth-child(odd) {
+  animation-delay: .1s;
+}
+
+.draggable-panel.edit-mode:nth-child(2n) {
+  animation-delay: .2s;
+}
+
+.remove-button {
+  position: absolute;
+  color: #fff;
+  display: flex;
+  cursor: pointer;
+  opacity: 0;
+  z-index: 10;
+  background: #ef4444;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  justify-content: center;
+  align-items:  center;
+  width: 20px;
+  height: 20px;
+  transition: all .2s;
+  font-size: 12px;
+  font-weight: 700;
+  top: -6px;
+  right: -6px;
+  transform: scale(0);
+  box-shadow: 0 2px 4px #0003;
+}
+
+.draggable-panel.edit-mode .remove-button {
+  opacity: 1;
+  animation: pulse 2s infinite;
+  transform: scale(1);
+}
+
+.remove-button:hover {
+  background: #dc2626;
+  transform: scale(1.1);
+}
+
+.panel-label {
+  display: flex;
+  color: #374151;
+  align-items:  center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.panel-icon {
+  display: flex;
+  justify-content: center;
+  align-items:  center;
+  width: 20px;
+  height: 20px;
+}
+
+.drag-handle {
+  display: none;
+  opacity: .4;
+  cursor: grab;
+  width: 24px;
+  height: 24px;
+}
+
+.edit-mode .drag-handle {
+  display: flex;
+  justify-content: center;
+  align-items:  center;
+}
+
+.drag-overlay {
+  cursor: grabbing;
+  opacity: .9;
+  background: #fff;
+  border: 2px solid #3b82f6;
+  border-radius: 8px;
+  padding: 12px 16px;
+  box-shadow: 0 8px 16px #0003;
+}
+
+.panel-group {
+  background: #fff;
+  border: 2px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 8px;
+}
+
+.panel-group.edit-mode {
+  animation: wiggle .5s ease-in-out infinite;
+  border-color: #3b82f6;
+}
+
+.panel-group-header {
+  display: flex;
+  border-bottom: 1px solid #e5e7eb;
+  justify-content: space-between;
+  align-items:  center;
+  margin-bottom: 8px;
+  padding: 8px;
+}
+
+.panel-group-title {
+  color: #6b7280;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.available-panels {
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 4px 6px #0000001a;
+}
+
+.available-panels-title {
+  color: #374151;
+  margin-bottom: 12px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.available-panels-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.slot-label {
+  color: #6b7280;
+  text-transform: uppercase;
+  display: flex;
+  align-items:  center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.slot-indicator {
+  background: #d1d5db;
+  border-radius: 50%;
+  width: 8px;
+  height: 8px;
+}
+
+.slot-indicator.active {
+  background: #3b82f6;
+}
+
+.action-buttons {
+  position: fixed;
+  z-index: 1001;
+  display: flex;
+  animation: scaleIn .3s ease;
+  background: #fff;
+  border-radius: 12px;
+  gap: 12px;
+  padding: 12px 24px;
+  bottom: 24px;
+  left: 50%;
+  transform: translate(-50%);
+  box-shadow: 0 8px 16px #00000026;
+}
+
+.action-button {
+  color: #374151;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 10px 20px;
+  transition: all .2s;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.action-button:hover {
+  background: #f9fafb;
+}
+
+.action-button.primary {
+  color: #fff;
+  background: #3b82f6;
+  border-color: #2563eb;
+}
+
+.action-button.primary:hover {
+  background: #2563eb;
+}
+
+@media (max-width: 768px) {
+  .edit-mode-toggle {
+    padding: 6px 12px;
+    font-size: 12px;
+    top: 8px;
+    right: 8px;
+  }
+
+  .action-buttons {
+    padding: 10px 16px;
+    bottom: 16px;
+  }
+
+  .action-button {
+    padding: 8px 16px;
+    font-size: 13px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .edit-mode-toggle {
+    color: #f9fafb;
+    background: #1f2937;
+    border-color: #374151;
+  }
+
+  .edit-mode-toggle:hover {
+    background: #374151;
+  }
+
+  .draggable-panel {
+    color: #f9fafb;
+    background: #1f2937;
+    border-color: #374151;
+  }
+
+  .available-panels {
+    background: #1f2937;
+  }
+
+  .panel-label {
+    color: #f9fafb;
+  }
+
+  .action-buttons {
+    background: #1f2937;
+  }
+
+  .action-button {
+    color: #f9fafb;
+    background: #1f2937;
+    border-color: #374151;
+  }
+
+  .action-button:hover {
+    background: #374151;
+  }
+}
+
+.panel-configurator {
+  display: flex;
+  background: var(--configurator-bg);
+  border-radius: 8px;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1.5rem;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+}
+
+.configurator-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.section-title {
+  color: var(--configurator-title);
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  text-align: center;
+  margin: 0;
+  font-size: .875rem;
+  font-weight: 600;
+}
+
+.slots-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  align-items:  start;
+  gap: 1rem;
+  width: 75%;
+  margin: 0 auto;
+}
+
+.slot {
+  position: relative;
+  aspect-ratio: 1 / 1.3;
+  background: var(--slot-bg);
+  border: 2px solid var(--slot-border);
+  cursor: pointer;
+  display: flex;
+  overflow: hidden;
+  box-sizing: border-box;
+  border-radius: 6px;
+  flex-direction: column;
+  gap: .5rem;
+  width: 100%;
+  padding: 2.5rem 1rem 1rem;
+  transition: all .2s;
+}
+
+.slot:hover {
+  border-color: var(--slot-border-hover);
+  box-shadow: 0 2px 4px #0000000d;
+}
+
+.slot.selected {
+  border-color: var(--slot-border-selected);
+  background: var(--slot-bg-selected);
+  box-shadow: 0 0 0 3px var(--slot-bg-selected);
+}
+
+.slot.empty {
+  border-style: dashed;
+}
+
+.slot-label {
+  color: var(--slot-label);
+  text-transform: capitalize;
+  text-align: left;
+  font-size: .75rem;
+  font-weight: 600;
+}
+
+.slot[data-position="middle"] .slot-label, .slot[data-position="middle"] .slot-panel-name, .slot[data-position="middle"] .slot-empty-state {
+  text-align: center;
+}
+
+.slot[data-position="right"] .slot-label, .slot[data-position="right"] .slot-panel-name, .slot[data-position="right"] .slot-empty-state {
+  text-align: right;
+}
+
+.slot-content {
+  display: flex;
+  overflow-y: auto;
+  flex-direction: column;
+  flex: 1;
+  gap: .5rem;
+  min-height: 0;
+}
+
+.slot-panel-name {
+  color: var(--slot-content-text);
+  font-size: .875rem;
+  font-weight: 600;
+}
+
+.slot-preview {
+  display: flex;
+  background: var(--slot-preview-bg);
+  border: 1px solid var(--slot-preview-border);
+  color: var(--slot-preview-text);
+  border-radius: 4px;
+  flex: 1;
+  justify-content: center;
+  align-items:  center;
+  padding: .5rem;
+  font-size: .75rem;
+}
+
+.slot-empty-state {
+  display: flex;
+  color: var(--slot-empty-text);
+  flex: 1;
+  justify-content: center;
+  align-items:  center;
+  min-height: 0;
+  font-size: .875rem;
+  font-style: italic;
+}
+
+.slot-clear-btn {
+  position: absolute;
+  background: var(--clear-btn-bg);
+  color: var(--clear-btn-text);
+  cursor: pointer;
+  display: flex;
+  opacity: 0;
+  border: none;
+  border-radius: 4px;
+  justify-content: center;
+  align-items:  center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  transition: opacity .2s;
+  font-size: 1.25rem;
+  line-height: 1;
+  top: .25rem;
+  right: .25rem;
+}
+
+.slot:hover .slot-clear-btn {
+  opacity: 1;
+}
+
+.slot-clear-btn:hover {
+  background: var(--clear-btn-hover);
+  transform: scale(1.1);
+}
+
+.available-panels {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: .75rem;
+  width: 75%;
+  margin: 0 auto;
+}
+
+.available-panel {
+  background: var(--panel-bg);
+  border: 2px solid var(--panel-border);
+  cursor: pointer;
+  display: flex;
+  border-radius: 6px;
+  flex-direction: column;
+  gap: .5rem;
+  min-height: 80px;
+  padding: .75rem;
+  transition: all .2s;
+}
+
+.available-panel:hover {
+  border-color: var(--panel-border-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 2px 4px #0000000d;
+}
+
+.available-panel.selected {
+  border-color: var(--panel-border-selected);
+  background: var(--panel-bg-selected);
+  box-shadow: 0 0 0 3px var(--panel-bg-selected);
+}
+
+.available-panel.in-use {
+  opacity: .5;
+  border-style: dashed;
+}
+
+.available-panel.in-use:hover {
+  opacity: .6;
+  transform: translateY(0);
+}
+
+.panel-label {
+  color: var(--panel-label-text);
+  font-size: .875rem;
+  font-weight: 600;
+}
+
+.panel-preview {
+  display: flex;
+  background: var(--panel-preview-bg);
+  color: var(--panel-preview-text);
+  border-radius: 4px;
+  flex: 1;
+  justify-content: center;
+  align-items:  center;
+  padding: .5rem;
+  font-size: .75rem;
+}
+
+.selection-hint {
+  background: var(--hint-bg);
+  border: 1px solid var(--hint-border);
+  color: var(--hint-text);
+  text-align: center;
+  border-radius: 6px;
+  padding: .75rem 1rem;
+  font-size: .875rem;
+}
+
+.available-panel.multi-selected {
+  border-color: var(--panel-border-selected);
+  background: var(--panel-bg-selected);
+  box-shadow: 0 0 0 2px var(--panel-bg-selected);
+}
+
+.multi-select-badge {
+  background: var(--panel-border-selected);
+  color: #fff;
+  border-radius: 12px;
+  margin-left: .5rem;
+  padding: .25rem .5rem;
+  font-size: .75rem;
+  font-weight: 400;
+}
+
+.multi-select-hint {
+  background: var(--panel-bg-selected);
+  border-color: var(--panel-border-selected);
+}
+
+.slot.tab-group {
+  border-style: solid;
+}
+
+.group-content {
+  position: relative;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.group-badge {
+  color: var(--panel-border-selected);
+  margin-bottom: .5rem;
+  font-size: .75rem;
+  font-weight: 600;
+}
+
+.group-panels {
+  display: flex;
+  overflow-y: auto;
+  flex-direction: column;
+  flex: 1;
+  gap: .25rem;
+  min-height: 0;
+}
+
+.group-panel-label {
+  color: var(--slot-content-text);
+  background: var(--slot-preview-bg);
+  border-left: 3px solid var(--panel-border-selected);
+  border-radius: 3px;
+  padding: .25rem .5rem;
+  font-size: .75rem;
+}
+
+.slot-panel-label {
+  color: var(--slot-content-text);
+  text-align: center;
+  font-size: .875rem;
+  font-weight: 600;
+}
+
+.create-tab-group-btn {
+  background: var(--panel-border-selected);
+  color: #fff;
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+  margin-top: .5rem;
+  padding: .5rem .75rem;
+  transition: all .2s;
+  font-size: .75rem;
+  font-weight: 600;
+}
+
+.create-tab-group-btn:hover {
+  transform: scale(1.05);
+  box-shadow: 0 2px 4px #0000001a;
+}
+
+.tab-mode-toggle {
+  position: absolute;
+  background: var(--slot-bg);
+  border: 1px solid var(--slot-border);
+  cursor: pointer;
+  z-index: 10;
+  opacity: .7;
+  color: var(--slot-content-text);
+  border-radius: 4px;
+  padding: .25rem .5rem;
+  transition: all .2s;
+  font-size: .85rem;
+  top: .5rem;
+  left: .5rem;
+}
+
+.tab-mode-toggle svg {
+  display: block;
+}
+
+.tab-mode-toggle:hover {
+  opacity: 1;
+  border-color: var(--slot-border-hover);
+  background: var(--slot-preview-bg);
+}
+
+.tab-mode-toggle.active {
+  opacity: 1;
+  background: var(--panel-border-selected);
+  color: #fff;
+  border-color: var(--panel-border-selected);
+}
+
+.tab-config-controls {
+  margin-bottom: .5rem;
+}
+
+.tab-config-label {
+  display: flex;
+  color: var(--slot-label);
+  align-items:  center;
+  gap: .5rem;
+  font-size: .75rem;
+}
+
+.tab-config-label select {
+  border: 1px solid var(--slot-border);
+  background: var(--slot-bg);
+  color: var(--slot-content-text);
+  cursor: pointer;
+  border-radius: 3px;
+  padding: .25rem .5rem;
+  font-size: .7rem;
+}
+
+.group-panel-item {
+  display: flex;
+  background: var(--slot-preview-bg);
+  border-left: 3px solid var(--panel-border-selected);
+  border-radius: 3px;
+  justify-content: space-between;
+  align-items:  center;
+  gap: .5rem;
+  padding: .25rem .5rem;
+}
+
+.group-panel-label {
+  color: var(--slot-content-text);
+  display: flex;
+  flex: 1;
+  align-items:  center;
+  gap: .25rem;
+  font-size: .75rem;
+}
+
+.default-badge {
+  color: var(--panel-border-selected);
+  font-size: .9em;
+}
+
+.remove-from-group-btn {
+  background: var(--clear-btn-bg);
+  color: var(--clear-btn-text);
+  cursor: pointer;
+  display: flex;
+  opacity: .7;
+  border: none;
+  border-radius: 3px;
+  justify-content: center;
+  align-items:  center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  transition: all .2s;
+  font-size: 1rem;
+  line-height: 1;
+}
+
+.remove-from-group-btn:hover {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.usage-hint {
+  background: var(--slot-preview-bg);
+  border: 1px solid var(--slot-border);
+  color: var(--hint-text);
+  text-align: center;
+  border-radius: 6px;
+  padding: .75rem 1rem;
+  font-size: .875rem;
+}
+
+.tab-group {
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.tab-group.tab-position-top, .tab-group.tab-position-bottom {
+  flex-direction: column;
+}
+
+.tab-group.tab-position-left, .tab-group.tab-position-right {
+  flex-direction: row;
+}
+
+.tab-list {
+  display: flex;
+  background: var(--tab-list-bg, #f5f5f5);
+  border-bottom: 1px solid var(--tab-border, #ddd);
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  flex-shrink: 0;
+  gap: 0;
+  padding: 0;
+}
+
+.tab-list::-webkit-scrollbar {
+  display: none;
+}
+
+.tab-position-top .tab-list, .tab-position-bottom .tab-list {
+  width: 100%;
+}
+
+.tab-list.centered {
+  justify-content: flex-start;
+}
+
+@media (min-width: 0) {
+  .tab-list.centered {
+    justify-content: center;
+  }
+
+  .tab-list.centered:has(.tab-button:nth-child(n)) {
+    justify-content: flex-start;
+  }
+}
+
+.tab-position-bottom .tab-list {
+  border-top: none;
+  border-bottom: none;
+}
+
+.tab-position-left .tab-list, .tab-position-right .tab-list {
+  border-bottom: none;
+  border-right: none;
+  flex-direction: column;
+  width: auto;
+  min-width: 120px;
+}
+
+.tab-position-top .tab-button, .tab-position-bottom .tab-button {
+  flex: 1 1 0;
+  min-width: 40px;
+  max-width: 100%;
+}
+
+.tab-button {
+  background: var(--tab-bg, #fff);
+  border: 1px solid var(--tab-border, #ddd);
+  cursor: pointer;
+  font-family: var(--tab-font-family, inherit);
+  font-size: var(--tab-font-size, 14px);
+  font-weight: var(--tab-font-weight, 500);
+  color: var(--tab-text, #333);
+  white-space: nowrap;
+  display: flex;
+  box-sizing: border-box;
+  container-type: inline-size;
+  border-radius: 0;
+  justify-content: center;
+  align-items:  center;
+  gap: 6px;
+  height: 39px;
+  padding: 8px 16px;
+  transition: all .2s;
+  line-height: 1;
+}
+
+.tab-position-top .tab-button {
+  border-top: none;
+  border-bottom: none;
+  border-left: none;
+}
+
+.tab-position-top .tab-button:last-child {
+  border-right: none;
+}
+
+.tab-position-bottom .tab-button {
+  border-top: none;
+  border-bottom: none;
+  border-left: none;
+}
+
+.tab-position-bottom .tab-button:last-child {
+  border-right: none;
+}
+
+.tab-position-left .tab-button {
+  border-bottom: none;
+  border-right: none;
+}
+
+.tab-position-left .tab-button:last-child {
+  border-bottom: 1px solid var(--tab-border, #ddd);
+}
+
+.tab-position-right .tab-button {
+  border-bottom: none;
+  border-left: none;
+}
+
+.tab-position-right .tab-button:last-child {
+  border-bottom: 1px solid var(--tab-border, #ddd);
+}
+
+.tab-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items:  center;
+}
+
+.tab-label {
+  display: none;
+}
+
+@container (width >= 100px) {
+  .tab-label {
+    display: inline;
+  }
+
+  .tab-icon {
+    display: none;
+  }
+}
+
+.tab-button:hover {
+  background: var(--tab-bg-hover, #f9f9f9);
+}
+
+.tab-button.active {
+  background: var(--tab-bg-active, #007bff);
+  color: var(--tab-text-active, #fff);
+  border-color: var(--tab-border-active, #007bff);
+}
+
+.tab-button:focus-visible {
+  outline: 2px solid var(--tab-focus, #007bff);
+  outline-offset: 2px;
+}
+
+.tab-content {
+  overflow: auto;
+  background: var(--tab-content-bg, #fff);
+  flex: 1;
+}
+
+.tab-group-empty {
+  display: flex;
+  color: var(--tab-empty-text, #999);
+  justify-content: center;
+  align-items:  center;
+  height: 100%;
+  font-style: italic;
+}
+
+.snap-carousel-container {
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  gap: var(--snap-carousel-gap, 0px);
+  background-color: var(--panel-background);
+  box-sizing: border-box;
+  position: relative;
+  container-type: inline-size;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  left: 0;
+  transform: none;
+}
+
+.snap-carousel-container::-webkit-scrollbar {
+  display: none;
+}
+
+.snap-carousel-container.swipe-disabled {
+  touch-action: pan-y pinch-zoom;
+  overscroll-behavior-x: none;
+}
+
+.snap-carousel-panel {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  width: var(--snap-carousel-panel-width, 33.33%);
+  box-sizing: border-box;
+  overflow: hidden;
+  flex: none;
+  height: 100%;
+}
+
+@media (max-width: 540px) {
+  .snap-carousel-panel {
+    min-width: 280px;
+  }
+}
+
+.mobile-tab-layout {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.mobile-tab-content {
+  overflow: hidden;
+  flex: 1;
+  min-height: 0;
+}
+
+.mobile-tab-nav {
+  display: flex;
+  background: var(--tab-list-bg, #f5f5f5);
+  border-top: 1px solid var(--tab-border, #ddd);
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.mobile-tab-button {
+  display: flex;
+  padding: 14px 4px;
+  padding-bottom: calc(14px + min(12px, env(safe-area-inset-bottom, 0px)));
+  cursor: pointer;
+  font-family: var(--tab-font-family, inherit);
+  font-size: var(--tab-font-size, 11px);
+  font-weight: var(--tab-font-weight, 500);
+  color: var(--tab-text, #666);
+  background: none;
+  border: none;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  align-items:  center;
+  gap: 6px;
+  min-width: 0;
+  transition: color .2s;
+}
+
+.mobile-tab-button:hover {
+  color: var(--tab-text-hover, #333);
+}
+
+.mobile-tab-button.active {
+  color: var(--mobile-tab-text-active, #007bff);
+}
+
+.mobile-tab-button .tab-icon {
+  display: flex;
+  color: var(--tab-icon-color, #999);
+  justify-content: center;
+  align-items:  center;
+  transition: color .2s;
+  font-size: 24px;
+}
+
+.mobile-tab-button.active .tab-icon {
+  color: var(--mobile-tab-icon-active, #007bff);
+}
+
+.mobile-tab-button .tab-label {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: inherit;
+  opacity: 1;
+  max-width: 100%;
+  font-size: 11px;
+  line-height: 1.2;
+}
+
+.mobile-tab-button:focus-visible {
+  outline: 2px solid var(--tab-focus, #007bff);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+:root {
+  --panels-background: #fff;
+  --panels-foreground: #000;
+  --panels-border: #e5e7eb;
+  --panels-handle-bg: #f3f4f6;
+  --panels-handle-hover: #e5e7eb;
+  --panels-handle-active: #d1d5db;
+  --panels-button-bg: #fff;
+  --panels-button-hover: #f9fafb;
+  --panels-button-active: #f3f4f6;
+  --panels-shadow: #0000001a;
+  --panels-animation-duration: .3s;
+  --panels-animation-easing: cubic-bezier(.4, 0, .2, 1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --panels-background: #1a1a1a;
+    --panels-foreground: #fff;
+    --panels-border: #404040;
+    --panels-handle-bg: #2a2a2a;
+    --panels-handle-hover: #333;
+    --panels-handle-active: #404040;
+    --panels-button-bg: #2a2a2a;
+    --panels-button-hover: #333;
+    --panels-button-active: #404040;
+    --panels-shadow: #0000004d;
+  }
+}
+
+[data-theme="light"] {
+  --panels-background: #fff;
+  --panels-foreground: #000;
+  --panels-border: #e5e7eb;
+  --panels-handle-bg: #f3f4f6;
+  --panels-handle-hover: #e5e7eb;
+  --panels-handle-active: #d1d5db;
+  --panels-button-bg: #fff;
+  --panels-button-hover: #f9fafb;
+  --panels-button-active: #f3f4f6;
+  --panels-shadow: #0000001a;
+}
+
+[data-theme="dark"] {
+  --panels-background: #1a1a1a;
+  --panels-foreground: #fff;
+  --panels-border: #404040;
+  --panels-handle-bg: #2a2a2a;
+  --panels-handle-hover: #333;
+  --panels-handle-active: #404040;
+  --panels-button-bg: #2a2a2a;
+  --panels-button-hover: #333;
+  --panels-button-active: #404040;
+  --panels-shadow: #0000004d;
+}
+
+.panels-container {
+  display: flex;
+  background-color: var(--panels-background);
+  color: var(--panels-foreground);
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.panels-panel {
+  position: relative;
+  overflow: auto;
+  background-color: var(--panels-background);
+}
+
+.panels-handle {
+  background-color: var(--panels-handle-bg);
+  position: relative;
+  z-index: 10;
+  transition: background-color .15s;
+}
+
+.panels-handle:hover {
+  background-color: var(--panels-handle-hover);
+}
+
+.panels-handle:active {
+  background-color: var(--panels-handle-active);
+}
+
+.panels-handle-horizontal {
+  cursor: col-resize;
+  width: 8px;
+}
+
+.panels-handle-vertical {
+  cursor: row-resize;
+  height: 8px;
+}
+
+.panels-handle-collapsed {
+  pointer-events: none;
+  background-color: var(--panels-border) !important;
+  cursor: default !important;
+  width: 1px !important;
+  min-width: 1px !important;
+}
+
+.panels-handle-collapsed .panels-collapse-button {
+  pointer-events: auto;
+}
+
+.panels-collapse-button {
+  position: absolute;
+  background-color: var(--panels-button-bg);
+  border: 1px solid var(--panels-border);
+  display: flex;
+  cursor: pointer;
+  box-shadow: 0 1px 3px var(--panels-shadow);
+  z-index: 20;
+  border-radius: 4px;
+  justify-content: center;
+  align-items:  center;
+  width: 24px;
+  height: 24px;
+  transition: all .15s;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.panels-collapse-button:hover {
+  background-color: var(--panels-button-hover);
+  transform: translate(-50%, -50%)scale(1.1);
+}
+
+.panels-collapse-button:active {
+  background-color: var(--panels-button-active);
+  transform: translate(-50%, -50%)scale(.95);
+}
+
+.panels-collapse-button-floating {
+  position: absolute;
+  z-index: 30;
+  left: -12px;
+}
+
+.panels-collapse-icon {
+  stroke: var(--panels-foreground);
+  stroke-width: 2;
+  fill: none;
+  width: 16px;
+  height: 16px;
+  transition: transform .15s;
+}
+
+.panels-content-fade {
+  transition: opacity var(--panels-animation-duration) var(--panels-animation-easing);
+}
+
+.panels-content-fading {
+  opacity: .3;
+}
+
+.panels-content-hidden {
+  opacity: 0;
+}
+
+.panels-animating {
+  pointer-events: none;
+}
+
+@media (max-width: 768px) {
+  .panels-handle-horizontal {
+    width: 4px;
+  }
+
+  .panels-handle-vertical {
+    height: 4px;
+  }
+
+  .panels-collapse-button {
+    width: 20px;
+    height: 20px;
+  }
+
+  .panels-collapse-icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.panels-mobile-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.panels-mobile-panel {
+  border: 1px solid var(--panels-border);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.panels-tabs-header {
+  display: flex;
+  border-bottom: 1px solid var(--panels-border);
+  background-color: var(--panels-handle-bg);
+}
+
+.panels-tab {
+  color: var(--panels-foreground);
+  cursor: pointer;
+  position: relative;
+  background: none;
+  border: none;
+  flex: 1;
+  padding: .75rem 1rem;
+  transition: background-color .15s;
+}
+
+.panels-tab:hover {
+  background-color: var(--panels-handle-hover);
+}
+
+.panels-tab-active {
+  background-color: var(--panels-background);
+}
+
+.panels-tab-active:after {
+  content: "";
+  position: absolute;
+  background-color: var(--panels-foreground);
+  height: 2px;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+}
+
+.panels-drawer-toggle {
+  position: fixed;
+  z-index: 100;
+  background-color: var(--panels-button-bg);
+  border: 1px solid var(--panels-border);
+  display: flex;
+  cursor: pointer;
+  box-shadow: 0 2px 8px var(--panels-shadow);
+  border-radius: 8px;
+  justify-content: center;
+  align-items:  center;
+  width: 40px;
+  height: 40px;
+  top: 1rem;
+  left: 1rem;
+}
+
+.panels-drawer-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.panels-drawer {
+  position: fixed;
+  background-color: var(--panels-background);
+  border-right: 1px solid var(--panels-border);
+  transition: transform var(--panels-animation-duration) var(--panels-animation-easing);
+  z-index: 90;
+  overflow-y: auto;
+  width: 300px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transform: translate(-100%);
+}
+
+.panels-drawer-open {
+  transform: translate(0);
+}
+
+.panels-drawer-panel, .panels-main-panel {
+  padding: 4rem 1rem 1rem;
+}