scitex 2.7.0__py3-none-any.whl → 2.7.3__py3-none-any.whl

scitex/{vis → fig}/editor/flask_editor/templates/_styles.py

@@ -188,6 +188,70 @@ body {
     pointer-events: none;
 }
 
+/* Debug mode - show all hit areas */
+.debug-rect {
+    fill: rgba(255, 0, 0, 0.15);
+    stroke: rgba(255, 0, 0, 0.6);
+    stroke-width: 1;
+    stroke-dasharray: 4 2;
+    pointer-events: none;
+}
+
+.debug-rect-trace {
+    fill: rgba(0, 255, 0, 0.15);
+    stroke: rgba(0, 200, 0, 0.8);
+    stroke-width: 1;
+    stroke-dasharray: 3 2;
+    pointer-events: none;
+}
+
+.debug-rect-legend {
+    fill: rgba(255, 165, 0, 0.2);
+    stroke: rgba(255, 140, 0, 0.8);
+    stroke-width: 1;
+    stroke-dasharray: 3 2;
+    pointer-events: none;
+}
+
+.debug-label {
+    font-size: 8px;
+    fill: rgba(255, 0, 0, 0.9);
+    pointer-events: none;
+    font-family: monospace;
+}
+
+.debug-path {
+    fill: none;
+    stroke: rgba(0, 200, 0, 0.7);
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: 5 3;
+    pointer-events: none;
+}
+
+.debug-toggle {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    z-index: 1000;
+    padding: 8px 12px;
+    background: #333;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.debug-toggle:hover {
+    background: #555;
+}
+
+.debug-toggle.active {
+    background: #c00;
+}
+
 .hover-scatter {
     fill: rgba(100, 180, 255, 0.7);
     stroke: rgba(100, 180, 255, 0.9);
@@ -296,7 +360,7 @@ input[type="range"]::-moz-range-thumb {
 }
 
 .controls-header {
-    padding: 16px 20px;
+    padding: 12px 16px;
     border-bottom: 1px solid var(--workspace-border-subtle);
     display: flex;
     justify-content: space-between;
@@ -308,13 +372,13 @@ input[type="range"]::-moz-range-thumb {
 }
 
 .controls-header h1 {
-    font-size: 1.1em;
+    font-size: 1.0em;
     font-weight: 600;
     color: var(--status-success);
 }
 
 .controls-body {
-    padding: 0 20px 20px;
+    padding: 0 14px 14px;
     flex: 1;
 }
 
@@ -325,6 +389,13 @@ input[type="range"]::-moz-range-thumb {
     word-break: break-all;
 }
 
+.panel-path {
+    font-size: 0.75em;
+    color: var(--text-muted);
+    margin-top: 2px;
+    opacity: 0.8;
+}
+
 /* Theme toggle */
 .theme-toggle {
     background: transparent;
@@ -349,31 +420,31 @@ input[type="range"]::-moz-range-thumb {
  * Section Headers
  * ============================================================================= */
 .section {
-    margin-top: 16px;
+    margin-top: 10px;
 }
 
 .section-header {
-    font-size: 0.75em;
+    font-size: 0.72em;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: var(--text-inverse);
     background: var(--status-success);
-    padding: 8px 12px;
+    padding: 6px 10px;
     border-radius: 4px;
-    margin-bottom: 12px;
+    margin-bottom: 8px;
 }
 
 /* =============================================================================
  * Form Fields
  * ============================================================================= */
-.field { margin-bottom: 12px; }
+.field { margin-bottom: 8px; }
 
 .field label {
     display: block;
-    font-size: 0.8em;
+    font-size: 0.78em;
     font-weight: 500;
-    margin-bottom: 4px;
+    margin-bottom: 3px;
     color: var(--text-secondary);
 }
 
@@ -381,12 +452,12 @@ input[type="range"]::-moz-range-thumb {
 .field input[type="number"],
 .field select {
     width: 100%;
-    padding: 8px 10px;
+    padding: 5px 8px;
     border: 1px solid var(--border-muted);
     border-radius: 4px;
     background: var(--bg-surface);
     color: var(--text-primary);
-    font-size: 0.85em;
+    font-size: 0.82em;
     transition: border-color 0.2s;
 }
 
@@ -408,18 +479,18 @@ input[type="range"]::-moz-range-thumb {
 
 .field-row {
     display: flex;
-    gap: 10px;
+    gap: 8px;
 }
 
-.field-row .field { flex: 1; }
+.field-row .field { flex: 1; margin-bottom: 0; }
 
 /* Checkbox styling */
 .checkbox-field {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
     cursor: pointer;
-    padding: 6px 0;
+    padding: 4px 0;
 }
 
 .checkbox-field input[type="checkbox"] {
@@ -466,6 +537,17 @@ input[type="range"]::-moz-range-thumb {
 
 .trace-item:last-child { border-bottom: none; }
 
+.trace-item-highlight {
+    background: var(--status-success);
+    color: var(--text-inverse);
+    animation: traceHighlightFade 1.5s ease-out forwards;
+}
+
+@keyframes traceHighlightFade {
+    0% { background: var(--status-success); }
+    100% { background: var(--bg-muted); }
+}
+
 .trace-color {
     width: 24px;
     height: 24px;
@@ -525,8 +607,8 @@ input[type="range"]::-moz-range-thumb {
  * ============================================================================= */
 .btn {
     width: 100%;
-    padding: 10px 16px;
-    margin-top: 8px;
+    padding: 7px 12px;
+    margin-top: 6px;
     border: none;
     border-radius: 4px;
     cursor: pointer;
@@ -660,6 +742,65 @@ input[type="range"]::-moz-range-thumb {
     background: #000000;
 }
 
+/* =============================================================================
+ * Section Hints
+ * ============================================================================= */
+.section-hint {
+    font-size: 0.75em;
+    color: var(--text-muted);
+    font-style: italic;
+    margin-bottom: 10px;
+    padding: 6px 8px;
+    background: var(--bg-muted);
+    border-radius: 4px;
+    border-left: 2px solid var(--border-default);
+}
+
+/* =============================================================================
+ * Element Statistics
+ * ============================================================================= */
+.element-stats {
+    margin-top: 12px;
+    padding: 10px;
+    background: var(--bg-muted);
+    border-radius: 4px;
+    border: 1px solid var(--border-muted);
+}
+
+.stats-header {
+    font-size: 0.8em;
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+}
+
+.stat-item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.stat-label {
+    font-size: 0.7em;
+    color: var(--text-muted);
+    text-transform: uppercase;
+}
+
+.stat-value {
+    font-size: 0.85em;
+    font-weight: 500;
+    color: var(--text-primary);
+    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+}
+
 /* =============================================================================
  * Status Bar
  * ============================================================================= */
@@ -733,6 +874,472 @@ input[type="range"]::-moz-range-thumb {
 .annotations-list::-webkit-scrollbar-thumb:hover {
     background: var(--text-muted);
 }
+
+/* =============================================================================
+ * Statistics Section
+ * ============================================================================= */
+#stats-container {
+    font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', monospace;
+    font-size: 11px;
+    line-height: 1.5;
+}
+
+.stats-loading {
+    color: var(--text-muted);
+    font-style: italic;
+    padding: 10px;
+    text-align: center;
+}
+
+.stats-empty {
+    color: var(--text-muted);
+    padding: 10px;
+    text-align: center;
+    background: var(--bg-muted);
+    border-radius: 4px;
+}
+
+.stats-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--workspace-border-subtle);
+    border-radius: 6px;
+    padding: 12px;
+    margin-bottom: 10px;
+}
+
+.stats-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--workspace-border-subtle);
+}
+
+.stats-card-title {
+    font-weight: 600;
+    font-size: 12px;
+    color: var(--text-primary);
+}
+
+.stats-significance {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-weight: bold;
+    font-size: 11px;
+}
+
+.stats-significance.sig-high {
+    background: #dcfce7;
+    color: #166534;
+}
+
+.stats-significance.sig-medium {
+    background: #fef9c3;
+    color: #854d0e;
+}
+
+.stats-significance.sig-low {
+    background: #fee2e2;
+    color: #991b1b;
+}
+
+.stats-significance.sig-ns {
+    background: var(--bg-muted);
+    color: var(--text-muted);
+}
+
+.stats-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 3px 0;
+}
+
+.stats-label {
+    color: var(--text-secondary);
+}
+
+.stats-value {
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.stats-groups {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px dashed var(--workspace-border-subtle);
+}
+
+.stats-group {
+    background: var(--bg-muted);
+    padding: 8px;
+    border-radius: 4px;
+    font-size: 10px;
+}
+
+.stats-group-name {
+    font-weight: 600;
+    margin-bottom: 4px;
+    color: var(--text-primary);
+}
+
+.stats-correction-badge {
+    display: inline-block;
+    background: var(--color-cta);
+    color: white;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 9px;
+    margin-left: 6px;
+}
+
+.stats-summary-header {
+    background: var(--scitex-01);
+    color: var(--text-inverse);
+    padding: 10px 12px;
+    border-radius: 6px 6px 0 0;
+    font-weight: 600;
+    margin-bottom: 0;
+}
+
+.stats-summary-body {
+    background: var(--bg-surface);
+    border: 1px solid var(--scitex-01);
+    border-top: none;
+    border-radius: 0 0 6px 6px;
+    padding: 12px;
+}
+
+/* =============================================================================
+ * Subsection Headers (for grouped controls like X/Y axis settings)
+ * ============================================================================= */
+.subsection-header {
+    font-size: 0.68em;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    color: var(--text-secondary);
+    padding: 4px 6px;
+    margin-bottom: 6px;
+    margin-top: 8px;
+    background: var(--bg-muted);
+    border-left: 2px solid var(--status-success);
+    border-radius: 0 4px 4px 0;
+}
+
+.subsection-header:first-child {
+    margin-top: 0;
+}
+
+/* =============================================================================
+ * Axis Tabs (for X/Y/Z axis switching)
+ * ============================================================================= */
+.axis-tabs {
+    display: flex;
+    gap: 3px;
+    margin-bottom: 8px;
+    background: var(--bg-muted);
+    padding: 3px;
+    border-radius: 6px;
+}
+
+.axis-tab {
+    flex: 1;
+    padding: 4px 8px;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.8em;
+    font-weight: 600;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.15s ease;
+}
+
+.axis-tab:hover {
+    background: var(--bg-surface);
+    color: var(--text-primary);
+}
+
+.axis-tab.active {
+    background: var(--scitex-01);
+    color: var(--bg-primary);
+}
+
+.axis-panel {
+    animation: fadeIn 0.15s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+/* =============================================================================
+ * Loading Spinner Overlay
+ * ============================================================================= */
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    border-radius: 8px;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--scitex-06);
+    border-top: 3px solid var(--status-success);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* =============================================================================
+ * Panel Grid View (for multi-panel figz bundles)
+ * ============================================================================= */
+.panel-grid-section {
+    width: 100%;
+    margin-bottom: 20px;
+    background: var(--workspace-bg-elevated);
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.panel-grid-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.panel-grid-header h3 {
+    font-size: 1em;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0;
+}
+
+.panel-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
+}
+
+.panel-card {
+    background: var(--preview-bg);
+    background-size: 16px 16px;
+    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
+    border-radius: 6px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 2px solid transparent;
+    position: relative;
+}
+
+.panel-card:hover {
+    border-color: var(--color-cta);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.panel-card.active {
+    border-color: var(--status-success);
+    box-shadow: 0 0 0 2px var(--status-success);
+}
+
+.panel-card img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.panel-card-container {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+}
+
+.panel-card-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    z-index: 5;
+}
+
+.panel-card-label {
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    background: rgba(0,0,0,0.7);
+    color: white;
+    padding: 3px 8px;
+    border-radius: 4px;
+    font-size: 0.75em;
+    font-weight: 600;
+}
+
+.panel-card-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 120px;
+    color: var(--text-muted);
+    font-size: 0.85em;
+}
+
+/* Panel Navigation Header */
+.preview-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: var(--workspace-bg-elevated);
+    border-radius: 8px 8px 0 0;
+    border-bottom: 1px solid var(--workspace-border-subtle);
+}
+
+#current-panel-name {
+    font-weight: 600;
+    color: var(--text-primary);
+    font-size: 0.9em;
+}
+
+.panel-nav {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+#panel-indicator {
+    font-size: 0.8em;
+    color: var(--text-muted);
+    min-width: 50px;
+    text-align: center;
+}
+
+.btn-sm {
+    padding: 4px 10px;
+    font-size: 0.8em;
+    width: auto;
+    margin: 0;
+}
+
+/* Preview area adjustments when panel header is visible */
+.preview-wrapper:has(.preview-header:not([style*="display: none"])) {
+    border-radius: 0 0 8px 8px;
+}
+
+.preview {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.preview > .preview-wrapper {
+    flex-shrink: 0;
+}
+
+/* =============================================================================
+ * Draggable Panel Canvas
+ * ============================================================================= */
+.panel-canvas {
+    position: relative;
+    min-height: 400px;
+    background: var(--workspace-bg-secondary);
+    border: 2px dashed var(--workspace-border-default);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.panel-canvas-item {
+    position: absolute;
+    cursor: move;
+    user-select: none;
+    transition: box-shadow 0.2s;
+    background: var(--preview-bg);
+    background-size: 16px 16px;
+    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
+    border-radius: 6px;
+    overflow: hidden;
+    border: 2px solid transparent;
+}
+
+.panel-canvas-item:hover {
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    z-index: 10;
+}
+
+.panel-canvas-item.dragging {
+    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+    z-index: 100;
+    opacity: 0.9;
+}
+
+.panel-canvas-item.active {
+    border-color: var(--status-success);
+}
+
+.panel-canvas-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    pointer-events: none;
+}
+
+.panel-canvas-label {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    background: rgba(0,0,0,0.7);
+    color: white;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 0.7em;
+    font-weight: 600;
+    pointer-events: none;
+}
+
+.panel-canvas-resize {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 16px;
+    height: 16px;
+    cursor: se-resize;
+    background: linear-gradient(135deg, transparent 50%, var(--color-cta) 50%);
+    border-radius: 0 0 4px 0;
+}
+
+.canvas-controls {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.canvas-controls button {
+    padding: 4px 12px;
+    font-size: 0.8em;
+}
 """