figrecipe 0.7.4__py3-none-any.whl → 0.9.0__py3-none-any.whl

figrecipe/_editor/_templates/_styles/__init__.py

@@ -22,7 +22,9 @@ from ._base import STYLES_BASE
 from ._buttons import STYLES_BUTTONS
 from ._color_input import STYLES_COLOR_INPUT
 from ._controls import STYLES_CONTROLS
+from ._datatable import STYLES_DATATABLE
 from ._dynamic_props import STYLES_DYNAMIC_PROPS
+from ._file_browser import STYLES_FILE_BROWSER
 from ._forms import STYLES_FORMS
 from ._hitmap import STYLES_HITMAP
 from ._inspector import STYLES_INSPECTOR
@@ -31,10 +33,12 @@ from ._modals import STYLES_MODALS
 from ._overlays import STYLES_OVERLAYS
 from ._preview import STYLES_PREVIEW
 from ._selection import STYLES_SELECTION
+from ._spinner import STYLES_SPINNER
 
 # Combined STYLES constant for backward compatibility
 STYLES = (
     STYLES_BASE
+    + STYLES_FILE_BROWSER
     + STYLES_PREVIEW
     + STYLES_HITMAP
     + STYLES_SELECTION
@@ -47,11 +51,14 @@ STYLES = (
     + STYLES_OVERLAYS
     + STYLES_MODALS
     + STYLES_INSPECTOR
+    + STYLES_SPINNER
+    + STYLES_DATATABLE
 )
 
 __all__ = [
     "STYLES",
     "STYLES_BASE",
+    "STYLES_FILE_BROWSER",
     "STYLES_PREVIEW",
     "STYLES_HITMAP",
     "STYLES_SELECTION",
@@ -64,6 +71,8 @@ __all__ = [
     "STYLES_OVERLAYS",
     "STYLES_MODALS",
     "STYLES_INSPECTOR",
+    "STYLES_SPINNER",
+    "STYLES_DATATABLE",
 ]
 
 # EOF

figrecipe/_editor/_templates/_styles/_base.py

@@ -22,6 +22,18 @@ STYLES_BASE = """
     --success-color: #10b981;
     --error-color: #ef4444;
     --selection-color: rgba(37, 99, 235, 0.3);
+    /* Solid selection colors for tables (opaque, theme-aware) */
+    --cell-selected-bg: #dbeafe;
+    --cell-hover-bg: #f0f4f8;
+    --header-bg: #e8e8e8;
+    --header-input-bg: #f5f5f5;
+    --row-num-bg: #f0f0f0;
+    /* Variable-linked column colors (light mode) */
+    --var-linked-bg: #c7d9f0;
+    --var-linked-cell-bg: #e8f0fa;
+    /* Consistent panel header styling */
+    --panel-header-height: 42px;
+    --panel-header-bg: var(--bg-tertiary);
 }
 
 [data-theme="dark"] {
@@ -34,6 +46,15 @@ STYLES_BASE = """
     --accent-color: #3b82f6;
     --accent-hover: #60a5fa;
     --selection-color: rgba(59, 130, 246, 0.3);
+    /* Solid selection colors for tables (opaque, theme-aware) */
+    --cell-selected-bg: #1e3a5f;
+    --cell-hover-bg: #2a2a35;
+    --header-bg: #2a2a2a;
+    --header-input-bg: #333333;
+    --row-num-bg: #1e1e1e;
+    /* Variable-linked column colors (dark mode) */
+    --var-linked-bg: #2a4a6a;
+    --var-linked-cell-bg: #1a3045;
 }
 
 /* Reset and base */
@@ -57,6 +78,32 @@ body {
     display: flex;
     height: 100vh;
 }
+
+/* Global scrollbar styling - thin and theme-responsive */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-secondary);
+}
+
+/* Firefox scrollbar */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-color) var(--bg-secondary);
+}
 """
 
 __all__ = ["STYLES_BASE"]

figrecipe/_editor/_templates/_styles/_buttons.py

@@ -180,18 +180,139 @@ button:hover {
     flex: 1;
 }
 
-/* Theme toggle */
-.theme-toggle {
+/* Theme toggle button */
+.btn-theme {
+    width: 36px;
+    height: 32px;
+    padding: 0;
+    font-size: 16px;
+    border: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.btn-theme:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--accent-color);
+}
+
+/* Icon buttons (Undo/Redo) */
+.btn-icon {
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    font-size: 16px;
+    border: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.btn-icon:hover:not(:disabled) {
+    background: var(--bg-tertiary);
+    border-color: var(--accent-color);
+}
+
+.btn-icon:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+/* Context Menu Styles */
+.canvas-context-menu,
+.files-context-menu,
+.datatable-context-menu {
+    position: fixed;
+    min-width: 180px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    z-index: 10000;
+    padding: 4px 0;
+    font-size: 13px;
+}
+
+.context-menu-item {
     display: flex;
     align-items: center;
-    gap: 8px;
+    justify-content: space-between;
+    padding: 8px 12px;
     cursor: pointer;
+    color: var(--text-primary);
+    transition: background 0.1s;
+}
+
+.context-menu-item:hover {
+    background: var(--bg-secondary);
+}
+
+.context-menu-item .shortcut {
+    font-size: 11px;
+    color: var(--text-tertiary);
+    margin-left: 16px;
+}
+
+.context-menu-divider {
+    height: 1px;
+    background: var(--border-color);
+    margin: 4px 8px;
+}
+
+.context-menu-danger {
+    color: #ef4444;
+}
+
+.context-menu-danger:hover {
+    background: rgba(239, 68, 68, 0.1);
+}
+
+/* Toast notification */
+.toast-notification {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 10px 20px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 10001;
     font-size: 13px;
 }
 
-.theme-toggle input {
-    width: 18px;
-    height: 18px;
+.toast-notification.success {
+    border-color: var(--success-color);
+}
+
+.toast-notification.error {
+    border-color: #ef4444;
+    color: #ef4444;
+}
+
+/* Inline checkbox */
+.checkbox-inline {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-left: auto;
+}
+
+.checkbox-inline input {
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+}
+
+.checkbox-inline span {
+    user-select: none;
 }
 
 /* Loading state */

figrecipe/_editor/_templates/_styles/_composition.py

@@ -0,0 +1,87 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""CSS styles for composition toolbar."""
+
+STYLES_COMPOSITION = """
+/* Composition Toolbar */
+.composition-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 12px;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    flex-wrap: wrap;
+}
+
+.composition-toolbar .toolbar-label {
+    font-size: 11px;
+    color: var(--text-secondary);
+    margin-right: 4px;
+}
+
+.composition-toolbar .toolbar-separator {
+    width: 1px;
+    height: 20px;
+    background: var(--border-color);
+    margin: 0 6px;
+}
+
+.composition-toolbar .toolbar-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 4px 6px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    min-width: 28px;
+    height: 28px;
+}
+
+.composition-toolbar .toolbar-btn:hover {
+    background: var(--bg-hover);
+    border-color: var(--accent-color);
+}
+
+.composition-toolbar .toolbar-btn:active {
+    transform: scale(0.95);
+}
+
+.composition-toolbar .toolbar-btn svg {
+    width: 16px;
+    height: 16px;
+}
+
+.composition-toolbar .toolbar-btn-primary {
+    background: var(--accent-color);
+    color: white;
+    border-color: var(--accent-color);
+    padding: 4px 10px;
+}
+
+.composition-toolbar .toolbar-btn-primary:hover {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+}
+
+.composition-toolbar .toolbar-btn span {
+    font-size: 11px;
+    font-weight: 500;
+}
+
+/* Dark mode adjustments */
+[data-theme="dark"] .composition-toolbar {
+    background: var(--bg-secondary);
+}
+
+[data-theme="dark"] .composition-toolbar .toolbar-btn {
+    background: var(--bg-tertiary);
+}
+"""
+
+__all__ = ["STYLES_COMPOSITION"]

figrecipe/_editor/_templates/_styles/_controls.py

@@ -13,35 +13,144 @@ STYLES_CONTROLS = """
 /* Controls Panel */
 .controls-panel {
     width: 350px;
+    min-width: 280px;
+    max-width: 500px;
     display: flex;
     flex-direction: column;
     background: var(--bg-primary);
     overflow: hidden;
+    position: relative;
+    border-left: 1px solid var(--border-color);
+    transition: width 0.2s ease-out, min-width 0.2s ease-out;
+    order: 20;  /* Always stay at far right */
+}
+
+.controls-panel.collapsed {
+    width: 42px;
+    min-width: 42px;
+}
+
+.controls-panel.collapsed .controls-sections,
+.controls-panel.collapsed .style-info,
+.controls-panel.collapsed .override-status,
+.controls-panel.collapsed #theme-modal,
+.controls-panel.collapsed #shortcuts-modal,
+.controls-panel.collapsed .properties-resize {
+    display: none;
+}
+
+.controls-panel.collapsed .controls-header {
+    flex-direction: column;
+    padding: 10px 6px;
+    gap: 8px;
+}
+
+.controls-panel.collapsed .controls-header .header-title {
+    justify-content: center;
+}
+
+.controls-panel.collapsed .controls-header h2,
+.controls-panel.collapsed .controls-header span {
+    display: none;
+}
+
+.controls-panel.collapsed .controls-actions {
+    flex-direction: column;
+    gap: 4px;
+    width: 100%;
+}
+
+.controls-panel.collapsed .controls-actions {
+    display: none;
+}
+
+/* Flip collapse button when collapsed (now points left to expand) */
+.controls-panel.collapsed .header-title .btn-collapse {
+    transform: rotate(180deg);
+}
+
+/* Properties resize handle */
+.properties-resize {
+    width: 4px;
+    cursor: col-resize;
+    background: transparent;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 10;
+    transition: background 0.2s;
+}
+
+.properties-resize:hover,
+.properties-resize.resizing {
+    background: var(--accent-color);
 }
 
 .controls-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 12px 16px;
-    background: var(--bg-secondary);
+    padding: 0 12px;
+    height: var(--panel-header-height);
+    min-height: var(--panel-header-height);
+    background: var(--panel-header-bg);
     border-bottom: 1px solid var(--border-color);
 }
 
+.controls-header .header-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.controls-header .header-title .btn-collapse {
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.controls-header .header-title .btn-collapse:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
 .controls-header h2 {
     font-size: 16px;
     font-weight: 600;
+    margin: 0;
+}
+
+/* Panel label matching FILES, DATA, CANVAS style */
+.controls-header span {
+    font-size: 11px;
+    font-weight: 600;
+    margin: 0;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-secondary);
 }
 
 .controls-actions {
     display: flex;
     gap: 8px;
+    align-items: center;
 }
 
 .controls-sections {
     flex: 1;
     overflow-y: auto;
-    padding: 8px;
+    padding: 8px 12px 8px 8px;  /* Extra right padding for scrollbar clearance */
 }
 
 /* Tab Navigation */
@@ -258,6 +367,62 @@ STYLES_CONTROLS = """
     padding: 12px 14px;
     background: var(--bg-primary);
 }
+
+/* Panel Indicator */
+.panel-indicator-row {
+    align-items: center;
+}
+
+.panel-indicator {
+    padding: 6px 12px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    background: var(--bg-secondary);
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    display: inline-block;
+}
+
+.panel-indicator.panel-selected {
+    color: var(--accent-color);
+    background: rgba(37, 99, 235, 0.1);
+    border-color: var(--accent-color);
+    font-weight: 600;
+}
+
+[data-theme="dark"] .panel-indicator.panel-selected {
+    background: rgba(59, 130, 246, 0.15);
+}
+
+/* Override Status - subtle indicator */
+.override-status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 12px;
+    font-size: 11px;
+    color: var(--text-tertiary);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.override-indicator {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.override-indicator::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    background: var(--accent-color);
+    border-radius: 50%;
+}
+
+.override-timestamp {
+    opacity: 0.6;
+}
 """
 
 __all__ = ["STYLES_CONTROLS"]

figrecipe/_editor/_templates/_styles/_datatable/__init__.py

@@ -0,0 +1,40 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Datatable CSS styles - orchestrator.
+
+Combines all datatable CSS modules:
+- _panel.py: Panel layout, header, toggle
+- _toolbar.py: Toolbar, import, hints
+- _table.py: Spreadsheet table
+- _vars.py: Variable assignment with color linking
+- _editable.py: Editable table styles
+"""
+
+from ._editable import CSS_DATATABLE_EDITABLE
+from ._panel import CSS_DATATABLE_PANEL
+from ._table import CSS_DATATABLE_TABLE
+from ._toolbar import CSS_DATATABLE_TOOLBAR
+from ._vars import CSS_DATATABLE_VARS
+
+
+def get_styles_datatable() -> str:
+    """Generate combined datatable CSS."""
+    return (
+        CSS_DATATABLE_PANEL
+        + "\n"
+        + CSS_DATATABLE_TOOLBAR
+        + "\n"
+        + CSS_DATATABLE_TABLE
+        + "\n"
+        + CSS_DATATABLE_VARS
+        + "\n"
+        + CSS_DATATABLE_EDITABLE
+    )
+
+
+# For backward compatibility
+STYLES_DATATABLE = get_styles_datatable()
+
+__all__ = ["STYLES_DATATABLE", "get_styles_datatable"]
+
+# EOF