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

figrecipe/_editor/_routes_snapshot.py

@@ -0,0 +1,94 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Routes for panel snapshot generation (isolated rendering)."""
+
+import base64
+import io
+import threading
+
+# Lock to prevent concurrent matplotlib figure access (not thread-safe)
+_figure_lock = threading.Lock()
+
+
+def register_snapshot_routes(app, editor):
+    """Register snapshot-related routes.
+
+    Parameters
+    ----------
+    app : Flask
+        Flask application instance.
+    editor : FigureEditor
+        Editor instance with figure state.
+    """
+
+    @app.route("/get_panel_snapshot/<int:ax_index>")
+    def get_panel_snapshot(ax_index):
+        """Render a single panel in isolation and return as base64 PNG.
+
+        This hides all other axes to produce a clean snapshot without
+        overlap artifacts from neighboring panels.
+
+        Parameters
+        ----------
+        ax_index : int
+            Index of the axis/panel to render.
+
+        Returns
+        -------
+        dict
+            JSON with success status and base64-encoded PNG image.
+        """
+        # DISABLED: Modifying figure visibility corrupts shared state
+        # TODO: Implement proper solution (deep copy figure or pre-render)
+        return {"success": False, "error": "Snapshot temporarily disabled"}
+
+        try:
+            # Use lock to prevent concurrent matplotlib access (not thread-safe)
+            with _figure_lock:
+                # Get matplotlib figure from RecordingFigure wrapper
+                mpl_fig = editor.fig.fig if hasattr(editor.fig, "fig") else editor.fig
+                axes = mpl_fig.get_axes()
+
+                if ax_index < 0 or ax_index >= len(axes):
+                    return {"success": False, "error": f"Invalid ax_index: {ax_index}"}
+
+                # Store original visibility states
+                original_visibility = [ax.get_visible() for ax in axes]
+
+                try:
+                    # Hide all axes except the target
+                    for i, ax in enumerate(axes):
+                        ax.set_visible(i == ax_index)
+
+                    # Render to buffer with transparent background
+                    # Use full figure size (no bbox_inches="tight" to preserve dimensions)
+                    buf = io.BytesIO()
+                    mpl_fig.savefig(
+                        buf,
+                        format="png",
+                        transparent=True,
+                        facecolor="none",
+                        edgecolor="none",
+                    )
+                    buf.seek(0)
+                    image_base64 = base64.b64encode(buf.read()).decode("utf-8")
+
+                    return {
+                        "success": True,
+                        "image": image_base64,
+                        "ax_index": ax_index,
+                    }
+
+                finally:
+                    # Restore original visibility
+                    for i, ax in enumerate(axes):
+                        ax.set_visible(original_visibility[i])
+
+        except Exception as e:
+            # Return JSON error instead of 500 to avoid console errors
+            return {"success": False, "error": str(e)}
+
+
+__all__ = ["register_snapshot_routes"]
+
+# EOF

figrecipe/_editor/_routes_style.py

@@ -27,6 +27,11 @@ def register_style_routes(app, editor):
             }
         )
 
+    @app.route("/overrides")
+    def get_overrides():
+        """Get current manual overrides."""
+        return jsonify(editor.style_overrides.manual_overrides)
+
     @app.route("/theme")
     def get_theme():
         """Get current theme YAML content for display."""
@@ -91,7 +96,7 @@ def register_style_routes(app, editor):
             # Extract color_palette from nested colors.palette
             if "colors" in new_style and isinstance(new_style["colors"], dict):
                 colors_dict = new_style["colors"]
-                if "palette" in colors_dict:
+                if "palette" in colors_dict and colors_dict["palette"] is not None:
                     flat_style["color_palette"] = list(colors_dict["palette"])
 
             editor.style_overrides.base_style = flat_style
@@ -105,10 +110,15 @@ def register_style_routes(app, editor):
             mpl_fig = editor.fig.fig if hasattr(editor.fig, "fig") else editor.fig
             behavior = new_style.get("behavior", {})
             for ax in mpl_fig.get_axes():
-                hide_top = behavior.get("hide_top_spine", True)
-                hide_right = behavior.get("hide_right_spine", True)
-                ax.spines["top"].set_visible(not hide_top)
-                ax.spines["right"].set_visible(not hide_right)
+                # Handle all four spine directions
+                for side, default in [
+                    ("top", True),
+                    ("right", True),
+                    ("bottom", False),
+                    ("left", False),
+                ]:
+                    hide = behavior.get(f"hide_{side}_spine", default)
+                    ax.spines[side].set_visible(not hide)
 
                 if behavior.get("grid", False):
                     ax.grid(True, alpha=0.3)
@@ -176,6 +186,9 @@ def register_style_routes(app, editor):
         # Restore original axes positions
         editor.restore_axes_positions()
 
+        # Restore original annotation positions (panel labels, text)
+        editor.restore_annotation_positions()
+
         if editor._initial_base64 and not editor.dark_mode:
             base64_img = editor._initial_base64
             import base64 as b64
@@ -188,10 +201,17 @@ def register_style_routes(app, editor):
             img_size = img.size
             mpl_fig = editor.fig.fig if hasattr(editor.fig, "fig") else editor.fig
             original_dpi = mpl_fig.dpi
-            mpl_fig.set_dpi(150)
-            mpl_fig.canvas.draw()
+            try:
+                mpl_fig.set_dpi(150)
+                mpl_fig.canvas.draw()
+            except Exception:
+                # Ignore matplotlib/tkinter threading issues in background thread
+                pass
             bboxes = extract_bboxes(mpl_fig, img_size[0], img_size[1])
-            mpl_fig.set_dpi(original_dpi)
+            try:
+                mpl_fig.set_dpi(original_dpi)
+            except Exception:
+                pass
         else:
             base64_img, bboxes, img_size = render_with_overrides(
                 editor.fig,

figrecipe/_editor/_templates/__init__.py

@@ -14,7 +14,11 @@ from datetime import datetime
 from pathlib import Path
 from typing import Any, Dict, Tuple
 
+import figrecipe
+
 from ._html import HTML_TEMPLATE
+from ._html_components import HTML_FILE_BROWSER
+from ._html_datatable import HTML_DATATABLE_PANEL
 from ._scripts import SCRIPTS
 from ._styles import STYLES
 
@@ -23,7 +27,7 @@ _SERVER_START_TIME = datetime.now().strftime("%H:%M:%S")
 
 # Load SciTeX icon as base64
 _SCITEX_ICON_PATH = (
-    Path(__file__).parent.parent.parent.parent.parent / "docs" / "scitex-icon.png"
+    Path(__file__).parent.parent / "static" / "icons" / "scitex-icon.png"
 )
 _SCITEX_ICON_BASE64 = ""
 if _SCITEX_ICON_PATH.exists():
@@ -41,6 +45,8 @@ def build_html_template(
     style_name: str = "SCITEX",
     hot_reload: bool = False,
     dark_mode: bool = False,
+    figure_has_content: bool = True,
+    debug_mode: bool = False,
 ) -> str:
     """
     Build complete HTML template for figure editor.
@@ -68,6 +74,8 @@ def build_html_template(
         Enable hot reload auto-reconnect JavaScript.
     dark_mode : bool
         Initial dark mode state from saved preferences.
+    figure_has_content : bool
+        Whether the figure has plot content (hides welcome overlay if True).
 
     Returns
     -------
@@ -128,6 +136,13 @@ def build_html_template(
 
     # Inject data into template
     html = HTML_TEMPLATE
+    html = html.replace("<!-- FILE_BROWSER_PLACEHOLDER -->", HTML_FILE_BROWSER)
+
+    # Insert datatable panel before preview panel
+    html = html.replace(
+        "<!-- Preview Panel -->",
+        HTML_DATATABLE_PANEL + "\n        <!-- Preview Panel -->",
+    )
     html = html.replace("/* STYLES_PLACEHOLDER */", STYLES)
     html = html.replace("/* SCRIPTS_PLACEHOLDER */", SCRIPTS + hot_reload_script)
     html = html.replace("IMAGE_BASE64_PLACEHOLDER", image_base64)
@@ -141,11 +156,34 @@ def build_html_template(
 
     # Dark mode preference - set initial state
     html = html.replace("DARK_MODE_THEME_PLACEHOLDER", "dark" if dark_mode else "light")
-    html = html.replace("DARK_MODE_CHECKED_PLACEHOLDER", "checked" if dark_mode else "")
 
     # Server start time for debugging
     html = html.replace("SERVER_START_TIME_PLACEHOLDER", _SERVER_START_TIME)
 
+    # Version number
+    html = html.replace("VERSION_PLACEHOLDER", figrecipe.__version__)
+
+    # Welcome overlay - show only for empty figures
+    welcome_display = "none" if figure_has_content else "flex"
+    html = html.replace("WELCOME_DISPLAY_PLACEHOLDER", welcome_display)
+
+    # Debug mode - enables Element Inspector and Show All Bboxes
+    html = html.replace("DEBUG_MODE_PLACEHOLDER", "true" if debug_mode else "false")
+
+    # Debug shortcuts section - only shown when debug mode is enabled
+    debug_shortcuts_html = ""
+    if debug_mode:
+        debug_shortcuts_html = """<div class="shortcut-section debug-shortcuts"><h4>Debug <span class="debug-badge">DEBUG MODE</span></h4>
+                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd>I</kbd></span><span class="shortcut-desc">Element Inspector</span></div>
+                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd>B</kbd></span><span class="shortcut-desc">Show All Bboxes</span></div>
+                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>I</kbd></span><span class="shortcut-desc">Debug Snapshot</span></div></div>"""
+    html = html.replace("DEBUG_SHORTCUTS_PLACEHOLDER", debug_shortcuts_html)
+
+    # Debug meta (server start time) - only shown in debug mode
+    html = html.replace(
+        "DEBUG_META_DISPLAY_PLACEHOLDER", "" if debug_mode else 'style="display:none"'
+    )
+
     return html
 
 

figrecipe/_editor/_templates/_html.py

@@ -10,28 +10,24 @@ HTML_TEMPLATE = """
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>figrecipe Editor</title>
+    <title>FigRecipe Editor</title>
+    <link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="192x192" href="/static/icons/scitex-icon.png">
     <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
     <style>
         /* STYLES_PLACEHOLDER */
     </style>
 </head>
 <body>
+    <div class="spinner-overlay"><div class="spinner-container"><div class="spinner"></div><div class="spinner-text">Loading...</div></div></div>
     <div class="editor-container">
+        <!-- FILE_BROWSER_PLACEHOLDER -->
         <!-- Preview Panel -->
-        <div class="preview-panel">
+        <div class="preview-panel" id="preview-panel">
             <div class="preview-header">
-                <a href="https://scitex.ai" target="_blank" class="scitex-branding" title="FigRecipe - Part of SciTeX">
-                    <img src="data:image/png;base64,SCITEX_ICON_PLACEHOLDER" alt="SciTeX" class="scitex-icon">
-                    <span class="figrecipe-title">FigRecipe Editor</span>
-                </a>
-                <span id="server-start-time" style="font-size: 10px; color: #888; margin-left: 8px;">Started: SERVER_START_TIME_PLACEHOLDER</span>
-                <div class="file-switcher">
-                    <select id="file-selector" class="file-selector" title="Switch between recipe files">
-                        <option value="">Loading files...</option>
-                    </select>
-                    <button id="btn-new-figure" class="btn-new" title="Create new blank figure">+</button>
-                </div>
+                <button id="btn-collapse-preview" class="btn-collapse" title="Collapse canvas">&#x276F;</button>
+                <span class="panel-label">CANVAS</span>
                 <div class="preview-controls">
                     <div class="download-dropdown">
                         <button id="btn-download-main" class="btn-primary download-main" title="Download as PNG">Download PNG</button>
@@ -44,20 +40,27 @@ HTML_TEMPLATE = """
                             <button id="btn-download-csv-menu" class="download-option" data-format="csv" title="Export plot data as CSV">CSV (Data)</button>
                         </div>
                     </div>
-                    <button id="btn-refresh" title="Refresh preview">Refresh</button>
+                    <button id="btn-refresh" title="Re-render figure (R)">Render</button>
                     <div class="zoom-controls">
-                        <button id="btn-zoom-out" title="Zoom out (-)">−</button>
-                        <span id="zoom-level">100%</span>
-                        <button id="btn-zoom-in" title="Zoom in (+)">+</button>
-                        <button id="btn-zoom-reset" title="Reset zoom (0)">⟲</button>
+                        <select id="zoom-select" title="Zoom level (+/- or scroll)">
+                            <option value="25">25%</option>
+                            <option value="50">50%</option>
+                            <option value="75">75%</option>
+                            <option value="100" selected>100%</option>
+                            <option value="125">125%</option>
+                            <option value="150">150%</option>
+                            <option value="200">200%</option>
+                        </select>
                         <button id="btn-zoom-fit" title="Fit to view (F)">Fit</button>
                     </div>
-                    <button id="btn-ruler-grid" class="btn-ruler" title="Toggle rulers and grid overlay (G)">Ruler & Grid</button>
-                    <button id="btn-shortcuts" class="btn-shortcuts" title="Show keyboard shortcuts (?)">⌨</button>
-                    <label class="theme-toggle">
-                        <input type="checkbox" id="dark-mode-toggle" DARK_MODE_CHECKED_PLACEHOLDER>
-                        <span>Dark Mode</span>
-                    </label>
+                    <button id="btn-ruler-grid" class="btn-ruler" title="Toggle rulers and grid (G)">Grid</button>
+                    <button id="dark-mode-toggle" class="btn-theme" title="Toggle theme (D)">🌙</button>
+                    <div class="toolbar-separator"></div>
+                    <button id="btn-undo" class="btn-icon" title="Undo (Ctrl+Z)" disabled>↶</button>
+                    <button id="btn-redo" class="btn-icon" title="Redo (Ctrl+Y)" disabled>↷</button>
+                    <button id="btn-restore" class="btn-secondary" title="Revert all changes">Revert</button>
+                    <button id="btn-save" class="btn-primary" title="Save (Ctrl+S)">Save</button>
+                    <button id="btn-shortcuts" class="btn-icon btn-shortcuts" title="Keyboard shortcuts (?)">⌨</button>
                 </div>
             </div>
             <div class="preview-wrapper" id="preview-wrapper">
@@ -70,17 +73,21 @@ HTML_TEMPLATE = """
                     <svg id="column-overlay" class="column-overlay"></svg>
                     <canvas id="hitmap-canvas" style="display: none;"></canvas>
                 </div>
+                <!-- Welcome overlay -->
+                <div id="welcome-overlay" class="welcome-overlay" style="display: WELCOME_DISPLAY_PLACEHOLDER;"><div class="welcome-content"><h2>Getting Started</h2><div class="welcome-steps"><div class="welcome-step"><span class="step-number">1</span><span class="step-text">Drop CSV/TSV in <strong>Data</strong></span></div><div class="welcome-step"><span class="step-number">2</span><span class="step-text">Click <strong>Plot</strong></span></div><div class="welcome-step"><span class="step-number">3</span><span class="step-text">Adjust in <strong>Properties</strong></span></div></div><p class="welcome-hint">Or load .yaml from Files</p></div></div>
+            </div>
+            <!-- Caption Pane (below canvas) -->
+            <div class="caption-pane" id="caption-pane">
+                <span id="canvas-caption-text"><b>Fig. 1.</b></span>
             </div>
         </div>
 
         <!-- Controls Panel -->
-        <div class="controls-panel">
+        <div class="controls-panel" id="controls-panel">
             <div class="controls-header">
-                <h2>Properties</h2>
-                <div class="controls-actions">
-                    <button id="btn-restore" class="btn-warning" title="Restore to original programmatic style">Restore</button>
-                    <button id="btn-reset" class="btn-secondary" title="Reset to last saved">Reset</button>
-                    <button id="btn-save" class="btn-primary">Save</button>
+                <div class="header-title">
+                    <button id="btn-collapse-properties" class="btn-collapse" title="Collapse panel">&#x276F;</button>
+                    <span>PROPERTIES</span>
                 </div>
             </div>
             <div class="style-info">
@@ -89,11 +96,10 @@ HTML_TEMPLATE = """
                     <option value="SCITEX">SCITEX</option>
                     <option value="MATPLOTLIB">MATPLOTLIB</option>
                 </select>
-                <div class="theme-actions">
-                    <button id="btn-view-theme" class="btn-small" title="View theme contents">View</button>
-                    <button id="btn-download-theme" class="btn-small" title="Download theme as YAML">Download</button>
-                    <button id="btn-copy-theme" class="btn-small" title="Copy theme to clipboard">Copy</button>
-                </div>
+                <label class="checkbox-inline" title="Transparent background">
+                    <input type="checkbox" id="output_transparent" checked>
+                    <span>Transparent</span>
+                </label>
             </div>
             <!-- Theme Modal -->
             <div id="theme-modal" class="modal" style="display: none;">
@@ -117,39 +123,22 @@ HTML_TEMPLATE = """
                         <button id="shortcuts-modal-close" class="modal-close">&times;</button>
                     </div>
                     <div class="shortcuts-content">
-                        <div class="shortcut-section">
-                            <h4>General</h4>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>S</kbd></span><span class="shortcut-desc">Save overrides</span></div>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>S</kbd></span><span class="shortcut-desc">Download PNG</span></div>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>I</kbd></span><span class="shortcut-desc">Debug snapshot</span></div>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>F5</kbd> / <kbd>Ctrl</kbd>+<kbd>R</kbd></span><span class="shortcut-desc">Refresh preview</span></div>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>Esc</kbd></span><span class="shortcut-desc">Clear selection</span></div>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>R</kbd></span><span class="shortcut-desc">Reset to theme defaults</span></div>
-                        </div>
-                        <div class="shortcut-section">
-                            <h4>Navigation</h4>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>1</kbd></span><span class="shortcut-desc">Figure tab</span></div>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>2</kbd></span><span class="shortcut-desc">Axis tab</span></div>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>3</kbd></span><span class="shortcut-desc">Element tab</span></div>
-                        </div>
-                        <div class="shortcut-section">
-                            <h4>View</h4>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>G</kbd></span><span class="shortcut-desc">Toggle ruler &amp; grid</span></div>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>+</kbd> / <kbd>-</kbd></span><span class="shortcut-desc">Zoom in/out</span></div>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>0</kbd></span><span class="shortcut-desc">Reset zoom</span></div>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>F</kbd></span><span class="shortcut-desc">Fit to view</span></div>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>?</kbd></span><span class="shortcut-desc">Show this help</span></div>
-                        </div>
-                        <div class="shortcut-section">
-                            <h4>Developer</h4>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd>I</kbd></span><span class="shortcut-desc">Toggle element inspector</span></div>
-                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd></span><span class="shortcut-desc">Screenshot + console logs</span></div>
-                        </div>
+                        <div class="shortcut-section"><h4>General</h4>
+                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>Z</kbd>/<kbd>Shift+Z</kbd></span><span class="shortcut-desc">Undo/Redo</span></div>
+                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>S</kbd>/<kbd>Shift+S</kbd></span><span class="shortcut-desc">Save/Download</span></div>
+                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>F5</kbd>/<kbd>Esc</kbd>/<kbd>R</kbd></span><span class="shortcut-desc">Refresh/Clear/Reset</span></div></div>
+                        <div class="shortcut-section"><h4>Navigation</h4>
+                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>1</kbd>/<kbd>2</kbd>/<kbd>3</kbd></span><span class="shortcut-desc">Figure/Axis/Element tab</span></div></div>
+                        <div class="shortcut-section"><h4>View</h4>
+                            <div class="shortcut-row"><span class="shortcut-keys"><kbd>G</kbd>/<kbd>+</kbd>/<kbd>-</kbd>/<kbd>0</kbd>/<kbd>F</kbd></span><span class="shortcut-desc">Grid/Zoom/Reset/Fit</span></div></div>
+                        <div class="shortcut-section"><h4>Panel</h4>
+                            <div class="shortcut-row"><span class="shortcut-keys">Drag/<kbd>Alt</kbd>+Drag</span><span class="shortcut-desc">Move (snap/free)</span></div></div>
+                        DEBUG_SHORTCUTS_PLACEHOLDER
                     </div>
                 </div>
             </div>
             <div id="override-status" class="override-status" style="display: none;">
-                <span class="override-indicator">Manual overrides active</span>
+                <span class="override-indicator">Modified</span>
                 <span id="override-timestamp" class="override-timestamp"></span>
             </div>
 
@@ -164,7 +153,7 @@ HTML_TEMPLATE = """
                 <!-- FIGURE TAB -->
                 <div id="tab-content-figure" class="tab-content active">
                     <!-- Dimensions Section -->
-                    <details class="section" open>
+                    <details class="section">
                         <summary>Dimensions</summary>
                         <div class="section-content">
                             <div class="subsection">
@@ -172,19 +161,19 @@ HTML_TEMPLATE = """
                                 <div class="form-grid">
                                     <div class="form-row">
                                         <label>Left</label>
-                                        <input type="number" id="margins_left_mm" step="1" min="0" max="50" placeholder="12">
+                                        <input type="number" id="margins_left_mm" step="1" min="0" max="50" placeholder="1">
                                     </div>
                                     <div class="form-row">
                                         <label>Right</label>
-                                        <input type="number" id="margins_right_mm" step="1" min="0" max="50" placeholder="3">
+                                        <input type="number" id="margins_right_mm" step="1" min="0" max="50" placeholder="1">
                                     </div>
                                     <div class="form-row">
                                         <label>Bottom</label>
-                                        <input type="number" id="margins_bottom_mm" step="1" min="0" max="50" placeholder="10">
+                                        <input type="number" id="margins_bottom_mm" step="1" min="0" max="50" placeholder="1">
                                     </div>
                                     <div class="form-row">
                                         <label>Top</label>
-                                        <input type="number" id="margins_top_mm" step="1" min="0" max="50" placeholder="6">
+                                        <input type="number" id="margins_top_mm" step="1" min="0" max="50" placeholder="1">
                                     </div>
                                 </div>
                             </div>
@@ -206,13 +195,19 @@ HTML_TEMPLATE = """
                     <details class="section">
                         <summary>Output</summary>
                         <div class="section-content">
-                            <div class="form-row">
-                                <label>DPI</label>
-                                <input type="number" id="output_dpi" step="50" min="72" max="600">
-                            </div>
-                            <div class="form-row">
-                                <label>Transparent</label>
-                                <input type="checkbox" id="output_transparent">
+                            <div class="form-row"><label>DPI</label><input type="number" id="output_dpi" step="50" min="72" max="600"></div>
+                            <div class="form-row"><label>Transparent</label><input type="checkbox" id="output_transparent"></div>
+                        </div>
+                    </details>
+                    <!-- Figure Caption (Scientific) -->
+                    <details class="section">
+                        <summary>Figure Caption</summary>
+                        <div class="section-content">
+                            <div class="form-row"><label>Fig. #</label><input type="number" id="caption_figure_number" min="1" max="99" step="1" value="1" style="width:60px"></div>
+                            <div class="form-row caption-row"><label>Caption</label><textarea id="caption_figure_text" class="caption-textarea" rows="2" placeholder="e.g., Comparison of sin and cos functions"></textarea></div>
+                            <div class="composed-caption-preview" id="composed-caption-container">
+                                <div class="composed-caption-label">Composed Caption:</div>
+                                <div class="composed-caption-text" id="composed-caption-text"><b>Fig. 1.</b></div>
                             </div>
                         </div>
                     </details>
@@ -223,14 +218,12 @@ HTML_TEMPLATE = """
                     <div class="tab-hint" id="axis-tab-hint">Select an axis element (title, label, ticks, legend) to edit</div>
 
                     <!-- Panel Position Section -->
-                    <details class="section" open>
+                    <details class="section">
                         <summary>Panel Position</summary>
                         <div class="section-content">
-                            <div class="form-row">
+                            <div class="form-row panel-indicator-row">
                                 <label>Panel</label>
-                                <select id="panel_selector">
-                                    <option value="0">Panel 0</option>
-                                </select>
+                                <span id="current_panel_indicator" class="panel-indicator">Select an element</span>
                             </div>
                             <div class="position-grid">
                                 <div class="form-row">
@@ -272,24 +265,27 @@ HTML_TEMPLATE = """
                     </details>
 
                     <!-- Labels Section -->
-                    <details class="section" open>
+                    <details class="section">
                         <summary>Labels</summary>
                         <div class="section-content">
-                            <div class="form-row">
-                                <label>Title</label>
-                                <input type="text" id="label_title" class="label-input" placeholder="(no title)">
-                            </div>
-                            <div class="form-row">
-                                <label>X Label</label>
-                                <input type="text" id="label_xlabel" class="label-input" placeholder="(no xlabel)">
-                            </div>
-                            <div class="form-row">
-                                <label>Y Label</label>
-                                <input type="text" id="label_ylabel" class="label-input" placeholder="(no ylabel)">
+                            <div class="form-row"><label>Title</label><input type="text" id="label_title" class="label-input" placeholder="(no title)"></div>
+                            <div class="form-row"><label>X Label</label><input type="text" id="label_xlabel" class="label-input" placeholder="(no xlabel)"></div>
+                            <div class="form-row"><label>Y Label</label><input type="text" id="label_ylabel" class="label-input" placeholder="(no ylabel)"></div>
+                            <div class="form-row"><label>Suptitle</label><input type="text" id="label_suptitle" class="label-input" placeholder="(no suptitle)"></div>
+                        </div>
+                    </details>
+
+                    <!-- Caption Section -->
+                    <details class="section">
+                        <summary>Caption</summary>
+                        <div class="section-content">
+                            <div class="form-row caption-row">
+                                <label>Panel</label>
+                                <textarea id="caption_panel_text" class="caption-textarea" rows="2" placeholder="e.g., Line plot showing sinusoidal functions"></textarea>
                             </div>
-                            <div class="form-row">
-                                <label>Suptitle</label>
-                                <input type="text" id="label_suptitle" class="label-input" placeholder="(no suptitle)">
+                            <div class="form-row caption-row">
+                                <label>Figure</label>
+                                <textarea id="caption_figure_text" class="caption-textarea" rows="3" placeholder="e.g., Overview of visualization methods..."></textarea>
                             </div>
                         </div>
                     </details>
@@ -396,13 +392,11 @@ HTML_TEMPLATE = """
                                 <label>Thickness (mm)</label>
                                 <input type="number" id="axes_thickness_mm" step="0.05" min="0.1" max="2" placeholder="0.35">
                             </div>
-                            <div class="form-row">
-                                <label>Hide Top</label>
-                                <input type="checkbox" id="behavior_hide_top_spine">
-                            </div>
-                            <div class="form-row">
-                                <label>Hide Right</label>
-                                <input type="checkbox" id="behavior_hide_right_spine">
+                            <div class="spine-visibility-grid">
+                                <div class="form-row"><label>Hide Top</label><input type="checkbox" id="behavior_hide_top_spine"></div>
+                                <div class="form-row"><label>Hide Right</label><input type="checkbox" id="behavior_hide_right_spine"></div>
+                                <div class="form-row"><label>Hide Bottom</label><input type="checkbox" id="behavior_hide_bottom_spine"></div>
+                                <div class="form-row"><label>Hide Left</label><input type="checkbox" id="behavior_hide_left_spine"></div>
                             </div>
                             <div class="form-row">
                                 <label>Grid</label>

figrecipe/_editor/_templates/_html_components/__init__.py

@@ -0,0 +1,13 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""HTML components for the figure editor.
+
+This package contains modular HTML components:
+- file_browser: File browser panel
+"""
+
+from ._file_browser import HTML_FILE_BROWSER
+
+__all__ = ["HTML_FILE_BROWSER"]
+
+# EOF