uxoxo/eb2ab

1"""2ebook2audiobook Design System3 4A comprehensive, object-oriented UI design system for Gradio applications5following OOUX principles:6 7- Object-Oriented Interface: Everything maps to persistent objects8- State Transparency: Visual feedback for all states9- Modularity: Reusable components across screens10- Affordance Clarity: Direct, contextual actions11- Progressive Disclosure: Calm UI with deep details on demand12- Accessibility + Delight: Feedback through color, animation, and motion13 14Author: Claude Code15Date: 2025-10-2116Version: 1.0.017 18Usage:19    from design_system import theme, components, layouts20    from design_system import button, card, dashboard21 22    # Create app with theme23    app = gr.Blocks(theme=theme.create_theme(), css=theme.get_custom_css())24 25    # Use components26    with app:27        button("Click me", variant="primary")28        card(title="My Card", ...)29 30    # Use layouts31    dashboard(projects=[...])32"""33 34# Core modules35from .design_tokens import DesignTokens, tokens36from .theme import (37    Ebook2AudiobookTheme,38    create_theme,39    get_custom_css,40    load_css_file,41    apply_theme_to_app42)43from . import components44from . import layouts45 46# Component shortcuts47from .components import (48    Components,49    button,50    progress_bar,51    tag,52    spinner,53    card,54    estimate_box,55    alert,56    status_indicator,57    project_card,58    chunk_row_table,59    split_pane_editor,60    voice_selector,61    processing_queue_bar62)63 64# Layout shortcuts65from .layouts import (66    Layouts,67    dashboard,68    table_drawer_workspace,69    modernizer,70    studio,71    audiobook_studio,72    wizard,73    export_wizard,74    empty_state,75    error_state76)77 78__version__ = "1.0.0"79 80__all__ = [81    # Tokens82    "DesignTokens",83    "tokens",84 85    # Theme86    "Ebook2AudiobookTheme",87    "create_theme",88    "get_custom_css",89    "load_css_file",90    "apply_theme_to_app",91 92    # Modules93    "components",94    "layouts",95 96    # Component classes97    "Components",98    "Layouts",99 100    # Component functions101    "button",102    "progress_bar",103    "tag",104    "spinner",105    "card",106    "estimate_box",107    "alert",108    "status_indicator",109    "project_card",110    "chunk_row_table",111    "split_pane_editor",112    "voice_selector",113    "processing_queue_bar",114 115    # Layout functions116    "dashboard",117    "table_drawer_workspace",118    "modernizer",119    "studio",120    "audiobook_studio",121    "wizard",122    "export_wizard",123    "empty_state",124    "error_state",125]126 127 128def init_design_system():129    """130    Initialize the design system131 132    Call this function once when your application starts to ensure133    all resources are loaded properly.134    """135    print(f"ebook2audiobook Design System v{__version__} initialized")136    print("Design principles: OOUX-based, accessible, delightful")137    return True138 139 140# Quick start guide141QUICK_START = """142# Quick Start Guide143 144## 1. Import the design system145```python146from design_system import create_theme, get_custom_css, button, card, dashboard147```148 149## 2. Create your Gradio app with the theme150```python151import gradio as gr152 153app = gr.Blocks(154    theme=create_theme(),155    css=get_custom_css()156)157```158 159## 3. Use components160```python161with app:162    # Buttons with variants163    button("Primary Action", variant="primary")164    button("Secondary", variant="secondary")165    button("Danger", variant="destructive", size="lg")166 167    # Cards168    with card(title="My Card"):169        gr.Markdown("Card content here")170 171    # Progress indicators172    progress_bar(value=75, state="processing")173    tag("Approved", state="approved")174```175 176## 4. Use layout templates177```python178# Dashboard layout179dashboard(180    projects=[181        {"title": "Project 1", "progress": 50, "state": "processing"},182        {"title": "Project 2", "progress": 100, "state": "approved"}183    ]184)185 186# Modernizer workspace187modernizer(188    chunks=[...],189    on_chunk_edit=handle_edit190)191```192 193## 5. Access design tokens194```python195from design_system import tokens196 197# Use in custom CSS198custom_css = f'''199.my-element {{200    color: {tokens.PRIMARY};201    padding: {tokens.SPACE_4};202    border-radius: {tokens.RADIUS_LG};203}}204'''205```206 207## Component Variants208 209### Buttons210- `variant`: primary, secondary, success, destructive, outline, ghost211- `size`: sm, md, lg212- `icon`: Optional emoji/icon213 214### Tags215- `state`: pending, processing, modernized, approved, error216 217### Progress Bars218- `state`: default, processing, complete, error219 220### Alerts221- `variant`: info, success, warning, error222 223## Layout Templates224 2251. **dashboard**: Project grid view2262. **table_drawer_workspace**: Main editing pattern2273. **modernizer**: Text modernization interface2284. **studio**: Control panel + preview2295. **audiobook_studio**: Voice and audio controls2306. **wizard**: Step-by-step flow2317. **empty_state**: No content placeholder2328. **error_state**: Error display233 234For full documentation, see DESIGN_SYSTEM.md235"""236 237 238def print_quick_start():239    """Print the quick start guide"""240    print(QUICK_START)241