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

figrecipe/_editor/_templates/_styles/__init__.py

@@ -0,0 +1,78 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""CSS styles for the figure editor.
+
+This package contains modular CSS styles organized by component:
+- base: CSS variables, reset, container
+- preview: Preview panel, branding, zoom controls
+- hitmap: Hitregion overlay shapes
+- selection: Selection overlay shapes
+- dynamic_props: Dynamic call properties panel
+- controls: Controls panel, tabs, sections
+- forms: Form elements and inputs
+- buttons: Button styles, download dropdown
+- color_input: Color picker components
+- labels: Axis type toggle, label inputs, legend
+- overlays: Ruler, grid, column overlays
+- modals: Shortcuts modal, kbd styling
+- inspector: Element inspector overlay
+"""
+
+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
+from ._labels import STYLES_LABELS
+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
+    + STYLES_DYNAMIC_PROPS
+    + STYLES_CONTROLS
+    + STYLES_FORMS
+    + STYLES_BUTTONS
+    + STYLES_COLOR_INPUT
+    + STYLES_LABELS
+    + STYLES_OVERLAYS
+    + STYLES_MODALS
+    + STYLES_INSPECTOR
+    + STYLES_SPINNER
+    + STYLES_DATATABLE
+)
+
+__all__ = [
+    "STYLES",
+    "STYLES_BASE",
+    "STYLES_FILE_BROWSER",
+    "STYLES_PREVIEW",
+    "STYLES_HITMAP",
+    "STYLES_SELECTION",
+    "STYLES_DYNAMIC_PROPS",
+    "STYLES_CONTROLS",
+    "STYLES_FORMS",
+    "STYLES_BUTTONS",
+    "STYLES_COLOR_INPUT",
+    "STYLES_LABELS",
+    "STYLES_OVERLAYS",
+    "STYLES_MODALS",
+    "STYLES_INSPECTOR",
+    "STYLES_SPINNER",
+    "STYLES_DATATABLE",
+]
+
+# EOF

figrecipe/_editor/_templates/_styles/_base.py

@@ -0,0 +1,111 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Base CSS styles for the figure editor.
+
+This module contains CSS for:
+- CSS variables (light and dark theme)
+- Reset and base styles
+- Main container layout
+"""
+
+STYLES_BASE = """
+/* CSS Variables for theming */
+:root {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f5f5f5;
+    --bg-tertiary: #e8e8e8;
+    --text-primary: #1a1a1a;
+    --text-secondary: #666666;
+    --border-color: #d0d0d0;
+    --accent-color: #2563eb;
+    --accent-hover: #1d4ed8;
+    --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"] {
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #252525;
+    --bg-tertiary: #333333;
+    --text-primary: #e8e8e8;
+    --text-secondary: #a0a0a0;
+    --border-color: #404040;
+    --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 */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    height: 100vh;
+    overflow: hidden;
+}
+
+/* Main container */
+.editor-container {
+    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"]
+
+# EOF

figrecipe/_editor/_templates/_styles/_buttons.py

@@ -0,0 +1,327 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Button CSS styles for the figure editor.
+
+This module contains CSS for:
+- Base button styles
+- Primary, secondary, warning buttons
+- Theme toggle and style info
+- Download dropdown
+"""
+
+STYLES_BUTTONS = """
+/* Buttons */
+button {
+    padding: 8px 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+button:hover {
+    background: var(--bg-secondary);
+}
+
+.btn-primary {
+    background: var(--accent-color);
+    border-color: var(--accent-color);
+    color: white;
+}
+
+.btn-primary:hover {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+}
+
+.btn-secondary {
+    background: var(--bg-secondary);
+}
+
+.btn-warning {
+    background: #f59e0b;
+    border-color: #f59e0b;
+    color: white;
+}
+
+.btn-warning:hover {
+    background: #d97706;
+    border-color: #d97706;
+}
+
+.style-info {
+    padding: 8px 16px;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.style-label {
+    color: var(--text-secondary);
+}
+
+.style-name {
+    color: var(--accent-color);
+    font-weight: 600;
+    font-family: monospace;
+}
+
+.theme-selector {
+    padding: 4px 8px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    color: var(--accent-color);
+    font-weight: 600;
+    font-family: monospace;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.theme-selector:hover {
+    border-color: var(--accent-color);
+}
+
+.theme-selector:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+}
+
+.theme-actions {
+    display: flex;
+    gap: 4px;
+    margin-left: auto;
+}
+
+.btn-small {
+    padding: 4px 8px;
+    font-size: 11px;
+    border-radius: 3px;
+}
+
+/* Split dropdown for download button */
+.download-dropdown {
+    position: relative;
+    display: flex;
+}
+
+.download-main {
+    border-radius: 4px 0 0 4px;
+    padding: 8px 16px;
+    font-weight: 500;
+}
+
+.download-toggle {
+    border-radius: 0 4px 4px 0;
+    padding: 8px 8px;
+    border-left: 1px solid rgba(255, 255, 255, 0.2);
+    font-size: 10px;
+}
+
+.download-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 100;
+    margin-top: 4px;
+    overflow: hidden;
+}
+
+.download-menu.open {
+    display: block;
+}
+
+.download-option {
+    display: block;
+    width: 100%;
+    padding: 10px 16px;
+    text-align: left;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 13px;
+    border-radius: 0;
+}
+
+.download-option:hover {
+    background: var(--bg-secondary);
+}
+
+.download-option.active {
+    background: var(--accent-color);
+    color: white;
+}
+
+.download-option.active:hover {
+    background: var(--accent-hover);
+}
+
+/* Legacy download buttons (kept for compatibility) */
+.download-buttons {
+    display: flex;
+    gap: 8px;
+}
+
+.download-buttons button {
+    flex: 1;
+}
+
+/* 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;
+    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;
+}
+
+.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 */
+.loading {
+    opacity: 0.6;
+    pointer-events: none;
+}
+"""
+
+__all__ = ["STYLES_BUTTONS"]
+
+# EOF

figrecipe/_editor/_templates/_styles/_color_input.py

@@ -0,0 +1,123 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Color input component CSS styles for the figure editor.
+
+This module contains CSS for:
+- Color swatches and pickers
+- RGB display
+- Custom color inputs
+"""
+
+STYLES_COLOR_INPUT = """
+/* Color Input Component */
+.color-input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    flex-wrap: wrap;
+}
+
+.color-swatch {
+    width: 28px;
+    height: 28px;
+    border: 2px solid var(--border-color);
+    border-radius: 4px;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: border-color 0.15s;
+}
+
+.color-swatch:hover {
+    border-color: var(--accent-color);
+}
+
+.color-text-input {
+    flex: 1;
+    min-width: 80px;
+}
+
+.rgb-display {
+    font-size: 10px;
+    color: var(--text-secondary);
+    font-family: monospace;
+    white-space: nowrap;
+}
+
+.color-preset-select {
+    padding: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    font-size: 10px;
+    cursor: pointer;
+}
+
+.color-picker-hidden {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    width: 0;
+    height: 0;
+}
+
+.color-custom-input {
+    padding: 4px 8px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    font-size: 11px;
+    min-width: 100px;
+}
+
+.color-custom-input:focus {
+    outline: none;
+    border-color: var(--accent-color);
+}
+
+.color-select {
+    padding: 4px 6px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    font-size: 11px;
+    min-width: 70px;
+    cursor: pointer;
+}
+
+/* Color List Component (for pie chart colors array) */
+.color-list-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+}
+
+.color-list-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.color-list-index {
+    font-size: 10px;
+    color: var(--text-secondary);
+    min-width: 18px;
+}
+
+.color-swatch-small {
+    width: 18px;
+    height: 18px;
+    border-width: 1px;
+}
+
+.color-select-small {
+    padding: 2px 4px;
+    font-size: 10px;
+    min-width: 60px;
+}
+"""
+
+__all__ = ["STYLES_COLOR_INPUT"]
+
+# EOF

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"]