### Complete Integration Example

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/DASH_DOCK_RESPONSIVE_GUIDE.md

Full setup demonstrating imports, dock configuration, and layout structure.

```python
from dash import Dash, html, dcc
import dash_dock
import dash_mantine_components as dmc
from dash_iconify import DashIconify

# Dock configuration
dock_config = {
    "global": {
        "tabEnableClose": False,
        "tabEnableFloat": True
    },
    "layout": {
        "type": "row",
        "children": [
            {
                "type": "tabset",
                "weight": 65,
                "children": [
                    {"type": "tab", "name": "Dashboard", "id": "tab-dashboard"}
                ]
            },
            {
                "type": "tabset",
                "weight": 35,
                "children": [
                    {"type": "tab", "name": "Analytics", "id": "tab-analytics"},
                    {"type": "tab", "name": "Settings", "id": "tab-settings"}
                ]
            }
        ]
    }
}
```

--------------------------------

### Install dash-pannellum

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_pannellum/dash_pannellum.md

Install the library using pip.

```bash
pip install dash-pannellum
```

--------------------------------

### Installation

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_mui_charts/dash_mui_charts.md

Instructions on how to install the dash-mui-charts package and configure Pro features.

```APIDOC
## Installation

Install the package using pip:

```bash
pip install dash-mui-charts
```

For Pro features, set your MUI_PRO_API_KEY in your `.env` file:

```
MUI_PRO_API_KEY=your-license-key-here
```
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/PRINTER_INTEGRATION_GUIDE.md

Commands to set up the virtual environment and install required Python packages.

```bash
# Navigate to project directory
cd CaffeMistico

# Create virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Install custom Clerk auth package
cd dist
pip install dash_clerk_auth-0.1.0.tar.gz
cd ..

# Install optional packages for full functionality
pip install qrcode[pil]  # For QR code printing
pip install Pillow       # For image processing
```

--------------------------------

### Install Dependencies

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_pos_printer/dash_pos_printer.md

Install the necessary Python packages for the integration.

```bash
pip install requests python-dotenv Pillow qrcode[pil]
```

--------------------------------

### Install dash-mui-charts

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_mui_charts/dash_mui_charts.md

Install the package via pip.

```bash
pip install dash-mui-charts
```

--------------------------------

### Install dash-fullcalendar

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/full_calendar_component/full_calendar_components.md

Use pip to install the component library in your Python environment.

```bash
pip install dash-fullcalendar
```

--------------------------------

### Install dash-widgetbot

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_widgetbot/dash_widgetbot.md

Install the base package or include optional bot and AI features.

```bash
pip install dash-widgetbot
pip install dash-widgetbot[bot,ai]   # with Discord bot + Gemini AI
```

--------------------------------

### Install dash-image-gallery

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_image_gallery/dash_image_gallery.md

Install the dash-image-gallery component using pip. This command should be run in your project's virtual environment.

```bash
pip install dash-image-gallery
```

--------------------------------

### Install Dependencies

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/STARMICRONICS.md

Command to install required project dependencies.

```bash
pip install -r requirements.txt
```

--------------------------------

### Install Dash Excalidraw

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_excalidraw/dash_excalidraw.md

Use this command to install the dash-excalidraw package. Ensure you have pip installed.

```bash
pip install dash-excalidraw
```

--------------------------------

### Install dash-model-viewer

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_model_viewer/dash_model_viewer.md

Install the package via pip to begin using the component in Dash applications.

```bash
pip install dash-model-viewer
```

--------------------------------

### Basic Dash Excalidraw Example

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_excalidraw/dash_excalidraw.md

A simple example demonstrating how to integrate the Excalidraw component into a Dash application. This requires importing the component.

```python
import dash
from dash import html
from dash_excalidraw import DashExcalidraw

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("Excalidraw Example"),
    DashExcalidraw(id='excalidraw')
])

if __name__ == '__main__':
    app.run_server(debug=True)

```

--------------------------------

### Install dash-insta-stories

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_insta_stories/dash_insta_stories.md

Install the dash-insta-stories component using pip. This command is used to add the library to your Python environment.

```bash
pip install dash-insta-stories
```

--------------------------------

### Install Python Dependencies

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/PRINTER_INTEGRATION_GUIDE.md

Install the necessary Python libraries for printer integration and web framework.

```bash
pip install requests==2.32.4
python-dotenv==1.1.0
Pillow
qrcode[pil]
dash==3.2+
dash-mantine-components==2.2.1+
stripe==12.2.0
```

--------------------------------

### Install Dash Flows

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_flows/dash_flows.md

Install the core package and optional dependencies for enhanced functionality.

```bash
pip install dash-flows
```

```bash
pip install dash-iconify          # For custom icons
pip install dash-mantine-components  # For theming & UI
```

--------------------------------

### Example Receipt Markup

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/PRINTER_INTEGRATION_GUIDE.md

A complete example of a receipt formatted using Star Document Markup Language.

```python
receipt = """[align: center]
[bold][mag: w 2; h 2]CAFFE MISTICO[normal][mag: w 1; h 1]
━━━━━━━━━━━━━━━━━━━━━━━━━━
Sea Treasures Restaurant
123 Ocean Ave, Miami, FL

[align: left]
Order #: ORD-12345
Customer: John Doe
Time: 02:30 PM

================================
[bold]ITEMS:[normal]
 2 x Lobster Roll         $35.98
 1 x Clam Chowder         $12.99
--------------------------------
Subtotal:                 $48.97
Tax (8.25%):              $4.04
================================
[bold]TOTAL:                    $52.01[normal]

Payment: Credit Card

[align: center]
Thank you for your order!
Visit us again soon!

[cut]"""
```

--------------------------------

### Install Dash Emoji Mart

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_emoji_mart/dash_emoji_mart.md

Use pip to install the component library into your Python environment.

```bash
pip install dash-emoji-mart
```

--------------------------------

### Live Printer Test Example

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_pos_printer/dash_pos_printer.md

Connect to a real Star Micronics printer using the CloudPRNT API for live testing. This example requires environment variables for authentication and device identification.

```python
import os

# Example of how to access environment variables
api_key = os.environ.get('STAR_MICRONICS')
group_path = os.environ.get('STAR_GROUP_PATH')
device_id = os.environ.get('STAR_DEVICE_ID')
region = os.environ.get('STAR_REGION')

if not all([api_key, group_path, device_id, region]):
    print("Error: Missing required environment variables.")
else:
    # Placeholder for actual CloudPRNT API interaction
    print("Connecting to printer...")
    # Replace with actual API call to send a test message
    print("Test message sent (simulated).")
```

--------------------------------

### Initialize a Basic DashPlanet Menu

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_planet/introduction.md

A minimal example demonstrating how to set up a DashPlanet component with a central avatar and three satellite action buttons.

```python
from dash import Dash
from dash_planet import DashPlanet
import dash_mantine_components as dmc
from dash_iconify import DashIconify

app = Dash(__name__)

app.layout = DashPlanet(
    id='my-planet',
    centerContent=dmc.Avatar(
        size="lg",
        radius="xl",
        src="path/to/avatar.png"
    ),
    children=[
        dmc.ActionIcon(
            DashIconify(icon="clarity:settings-line", width=20, height=20),
            size="lg",
            variant="filled",
            id="action-icon-1",
        ),
        dmc.ActionIcon(
            DashIconify(icon="mdi:email", width=20, height=20),
            size="lg",
            variant="filled",
            id="action-icon-2",
        ),
        dmc.ActionIcon(
            DashIconify(icon="mdi:bell", width=20, height=20),
            size="lg",
            variant="filled",
            id="action-icon-3",
        ),
    ],
    orbitRadius=80,
    rotation=0,
)

if __name__ == '__main__':
    app.run_server(debug=True)
```

--------------------------------

### Skeleton Loading Example

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/design.txt

Displays a stack of skeleton loaders to indicate content is loading.

```python
# Skeleton Loading
dmc.Stack([
    dmc.Skeleton(height=40, mb="md"),
    dmc.Skeleton(height=20),
    dmc.Skeleton(height=20),
    dmc.Skeleton(height=20, width="70%"),
])
```

--------------------------------

### DashGauge Component Example

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_gauge/dash_gauge.md

This example demonstrates the basic usage of the DashGauge component. It shows how to set the value, type, and min/max values for the gauge.

```python
from dash import Dash, html
from dash_gauge import DashGauge

app = Dash(__name__)

app.layout = html.Div([
    DashGauge(id='gauge-component', value=33, type='grafana', minValue=0, maxValue=100)
])

if __name__ == '__main__':
    app.run_server(debug=True)

```

--------------------------------

### Install dash-dock-view

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_dock_view/dash_dock_view.md

Install the dash-dock-view package using pip. Ensure Python version is 3.7+ and Dash version is 2.0+.

```bash
pip install dash-dock-view
```

--------------------------------

### Install DashPlanet via pip

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_planet/introduction.md

Use this command to install the dash-planet package in your Python environment.

```bash
pip install dash-planet
```

--------------------------------

### Install flexlayout-dash

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_flex_layout/dash_flex_layout.md

Install the flexlayout-dash component using pip. Ensure Python version is >= 3.7 and Dash version is >= 2.0.

```bash
pip install flexlayout-dash
```

--------------------------------

### Install Dash and Dash Mantine Components

Source: https://github.com/pip-install-python/pip-documentation/blob/main/pages/home.md

Use pip to install the required Dash and Dash Mantine Components libraries. Ensure you are using compatible versions.

```bash
pip install dash>=3.0
pip install dash-mantine-components>=2.4
```

--------------------------------

### Implement Keyboard Shortcuts

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/design.txt

Enhance efficiency by providing keyboard shortcuts for common actions. This example shows how to label a button with its shortcut and suggests implementing it with a client-side callback.

```python
# Add keyboard shortcuts for common actions
dmc.Button(
    "Save (Ctrl+S)",
    id="save-btn"
)

# Implement with clientside callback
```

--------------------------------

### Install dash-gauge Package

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_gauge/dash_gauge.md

Use pip to install the dash-gauge package. This command should be run in your terminal or command prompt.

```bash
pip install dash-gauge
```

--------------------------------

### Local Development Server

Source: https://github.com/pip-install-python/pip-documentation/blob/main/CLAUDE.md

Command to start the local development server for the project. The application will be available at http://localhost:8553.

```bash
python run.py
# Available at http://localhost:8553
```

--------------------------------

### Python Example for Component Usage

Source: https://github.com/pip-install-python/pip-documentation/blob/main/CLAUDE.md

A basic Python script demonstrating how to use a Dash Mantine Components (DMC) component and run a Dash application.

```python
import dash_mantine_components as dmc
from dash import Dash, html

app = Dash(__name__)

component = dmc.YourComponent(
    id="my-component",
    prop1="value1",
)

app.layout = dmc.Container(component)

if __name__ == '__main__':
    app.run(debug=True)
```

--------------------------------

### Project Application Structure

Source: https://github.com/pip-install-python/pip-documentation/blob/main/CLAUDE.md

Illustrates the directory structure of the Pip Install Python Documentation project, showing the organization of assets, components, documentation, libraries, pages, and configuration files.

```text
/Users/pip/PycharmProjects/pip-docs+/
├── assets/                      # Static assets and client-side code
│   ├── main.css                 # Global styles (theme-aware)
│   ├── m2d.css                  # Markdown-to-Dash styling
│   ├── sun_rotation.js          # Theme toggle animations
│   ├── text_animation.js        # Text animations
│   ├── chat.js / chat_debug.js  # Chat functionality
│   ├── model_viewer/            # 3D model viewer assets
│   ├── apple-touch-icon.png     # App icon
│   └── 404-styles.css           # 404 page styling
│
├── components/                  # Reusable UI components
│   ├── appshell.py              # Main layout with MantineProvider
│   ├── header.py                # Header with search, theme toggle, "Other Apps" menu
│   └── navbar.py                # Navigation sidebar with custom ordering
│
├── docs/                        # Documentation content (markdown + Python examples)
│   ├── dash_dock/               # Dock layout component docs
│   ├── dash_emoji_mart/         # Emoji picker component docs
│   ├── dash_insta_stories/      # Instagram stories component docs
│   ├── dash_summernote/         # Rich text editor docs
│   ├── dash_image_gallery/      # Image gallery docs
│   ├── dash_fullcalendar/       # Calendar component docs
│   ├── dash_gauge/              # Gauge component docs
│   ├── dash_pannellum/          # 360 panorama viewer docs
│   ├── dash_planet/             # Orbital menu docs
│   ├── dash_model_viewer/       # 3D model viewer docs
│   └── dash_excalidraw/         # Drawing component docs
│
├── lib/                         # Utility libraries
│   ├── constants.py             # App-wide constants
│   ├── directives/              # Custom markdown directives
│   │   ├── llms_copy.py         # LLM-friendly content directive
│   │   ├── source.py            # Source code display directive
│   │   ├── toc.py               # Table of contents directive
│   │   └── kwargs.py            # Component props table generator
│   └── page_chat/               # Chat functionality (if applicable)
│
├── pages/                       # Dash multi-page app pages
│   ├── home.md                  # Home page markdown content
│   ├── home.py                  # Home page Python layout
│   ├── download_counter.py      # PyPI download statistics aggregator
│   ├── markdown.py              # Dynamic markdown page loader
│   ├── chat_test.py             # Chat testing page
│   └── not_found_404.py         # Custom 404 page
│
├── callbacks/                   # Dash callbacks
│
├── templates/
│   └── index.html               # SEO-optimized HTML template
│
├── CLAUDE.md                    # This file - developer documentation
├── README.md                    # User-facing documentation
├── CHANGELOG.md                 # Version history
├── requirements.txt             # Python dependencies
├── package.json                 # Node.js dependencies
├── Dockerfile                   # Container definition
├── docker-compose.yml           # Docker compose config
└── run.py                       # Application entry point

```

--------------------------------

### Key Project Dependencies

Source: https://github.com/pip-install-python/pip-documentation/blob/main/CLAUDE.md

Highlights essential dependencies for the Pip Install Python Documentation project, including libraries for UI, markdown processing, and API interactions.

```text
dash-iconify: 0.1.2
python-frontmatter: 1.0.0
markdown2dash: (latest)
pydantic: 2.3.0+
pandas: 1.2.3+
dash-improve-my-llms: 0.3.0
gunicorn: 21.2.0
requests: (for pypistats API)
```

--------------------------------

### Direct Component Import in Python Layout

Source: https://github.com/pip-install-python/pip-documentation/blob/main/CLAUDE.md

Example of directly importing a component's layout in `pages/home.py` as an alternative to using the `.. exec::` directive in markdown.

```python
# pages/home.py
from pages.download_counter import layout as download_counter_layout

layout = dmc.Container(
    children=[
        dcc.Markdown(content),
        download_counter_layout(),  # Direct import instead of .. exec::
    ]
)
```

--------------------------------

### Use StarPrinterService

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/PRINTER_INTEGRATION_GUIDE.md

Example usage of the StarPrinterService class to list devices, check status, and print receipts.

```python
from printer_service import StarPrinterService

# Initialize service (reads from environment variables)
printer = StarPrinterService()

# Get all devices in your group
devices = printer.get_device_list()
for device in devices:
    print(f"Device: {device['Id']}")
    print(f"Status: {device['Status']}")
    print(f"Queue: {device['QueuedJobs']} jobs")

# Get specific device status
device_id = "ABC123DEF456"
status = printer.get_device_status(device_id)
print(f"Online: {status['Status']['Online']}")
print(f"Paper: {'OK' if not status['Status']['PaperEmpty'] else 'Empty'}")

# Print a simple receipt
content = """[align: center]
[bold][mag: w 2; h 2]TEST RECEIPT[normal][mag: w 1; h 1]

This is a test print
[cut]"""

result = printer.print_receipt(
    content=content,
    job_name="Test_Print",
    device_id=device_id
)

if 'error' not in result:
    print(f"✅ Printed! Job ID: {result['JobId']}")
else:
    print(f"❌ Error: {result['error']}")
```

--------------------------------

### Basic Image Stories Setup

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_insta_stories/dash_insta_stories.md

Create a basic Instagram-style story viewer with an array of image URLs. The component handles automatic progression and tap controls for navigation.

```python
from dash import Dash
from dash_insta_stories import DashInstaStories

app = Dash(__name__)

stories = [
    'https://picsum.photos/400/600?image=1',
    'https://picsum.photos/400/600?image=2',
    'https://picsum.photos/400/600?image=3',
]

app.layout = DashInstaStories(
    id='simple-stories',
    stories=stories,
    width=360,
    height=640,
    defaultInterval=3000,  # 3 seconds per story
)
```

--------------------------------

### Implement Onboarding Steps

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/design.txt

Use illustrations within stepper components to visualize onboarding progress.

```python
# Step illustrations
dmc.Stepper([
    dmc.StepperStep(
        label="Create account",
        description="Sign up details",
        children=[
            dmc.Image(src="/illustrations/signup.svg", h=150),
            dmc.Text("Create your account to get started"),
        ]
    ),
    # More steps...
])
```

--------------------------------

### Configure Premium DashPlanet Features

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_planet/introduction.md

Example of enabling premium features by providing an API key and setting advanced properties like draggable satellites and bounce animations.

```python
DashPlanet(
    apiKey="your-api-key-here",
    # Premium features now available
    dragableSatellites=True,
    bounce=True,
    bounceDirection="TOP",
)
```

--------------------------------

### Print Welcome Page

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/PRINTER_INTEGRATION_GUIDE.md

Prints the welcome page and test pattern for the specified device.

```python
# Prints printer information and test pattern
success = printer.print_welcome_page(device_id)
```

--------------------------------

### Client-Side Callback Setup

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_model_viewer/dash_model_viewer.md

Use this pattern to trigger JavaScript functions from Python for dynamic component interactions. Ensure your JS file is in the 'assets' folder and functions are namespaced.

```python
app.clientside_callback(
    dash.ClientsideFunction(
        namespace='dash_clientside.clientside.modelViewer',
        function_name='update_hotspots'
    ),
    Output('your-model-viewer-id', 'hotspots'),
    [Input('your-model-viewer-id', 'id'), State('your-data-source', 'data')],
)
```

--------------------------------

### Print welcome page

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/PRINTER_INTEGRATION_GUIDE.md

Prints a test pattern and device information.

```python
success = printer.print_welcome_page('ABC123')
```

--------------------------------

### Configure Environment Variables

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_pos_printer/dash_pos_printer.md

Set up the .env file with your Star Micronics API credentials.

```bash
# Star Micronics Configuration
STAR_MICRONICS=your_api_key_here
STAR_GROUP_PATH=yourcompany
STAR_DEVICE_ID=ABC123DEF456  # Optional: default device
```

--------------------------------

### Initialize StarPrinterService

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_pos_printer/dash_pos_printer.md

Create a service instance to interact with printers; configuration is loaded from environment variables.

```python
from printer_service import StarPrinterService

# Initialize (reads from .env)
printer = StarPrinterService()
```

--------------------------------

### Create Documentation Folder

Source: https://github.com/pip-install-python/pip-documentation/blob/main/CLAUDE.md

Use this command to create a new directory for your component's documentation.

```bash
mkdir -p docs/my-component
```

--------------------------------

### Bash Command for Package Installation

Source: https://github.com/pip-install-python/pip-documentation/blob/main/CLAUDE.md

Standard bash command to install a Python package using pip.

```bash
pip install package-name
```

--------------------------------

### Initialize Dash Application Entry Point

Source: https://context7.com/pip-install-python/pip-documentation/llms.txt

Initializes the Dash application with multi-page support, external scripts, and custom index templates. Includes configuration for SEO, AI integration routes, and the main layout.

```python
import dash
from dash import Dash
from components.appshell import create_appshell
import dash_mantine_components as dmc
from dash_improve_my_llms import add_llms_routes, RobotsConfig, register_page_metadata

# Initialize Dash app with multi-page support
app = Dash(
    __name__,
    suppress_callback_exceptions=True,
    use_pages=True,
    external_scripts=["https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"],
    update_title=None,
    prevent_initial_callbacks=True,
    index_string=open('templates/index.html').read(),
    health_endpoint="health"
)

# Configure SEO and bot management
app._base_url = "https://pip-install-python.com"
app._robots_config = RobotsConfig(
    block_ai_training=False,
    allow_ai_search=True,
    allow_traditional=True,
    crawl_delay=10,
    disallowed_paths=[],
)

# Add LLM routes for AI integration
add_llms_routes(app)

# Register home page metadata
register_page_metadata(
    path="/",
    name="Dash Documentation Boilerplate",
    description="A modern documentation system for Dash applications"
)

# Set layout using AppShell
app.layout = create_appshell(dash.page_registry.values())
server = app.server

if __name__ == "__main__":
    app.run(debug=False, host='0.0.0.0', port='8504')
```

--------------------------------

### Optimize Transitions for ImageGallery

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_image_gallery/dash_image_gallery.md

Configure GPU-accelerated transitions and timing for smoother visual feedback.

```python
ImageGallery(
    items=images,
    useTranslate3D=True,              # Use GPU-accelerated transitions
    slideDuration=450,                 # Smooth transition (450ms)
    swipingTransitionDuration=0,       # Instant swipe feedback
)
```

--------------------------------

### Prioritize Information with Stack Layouts

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/design.txt

Shows how to adjust component sizing and color to ensure the most important data is visually prominent.

```python
# Bad: Label larger than value
dmc.Stack([
    dmc.Title("Earnings", order=2),
    dmc.Text("$4,981.00", size="sm")
])

# Good: Value is prominent
dmc.Stack([
    dmc.Title("$4,981.00", order=2),
    dmc.Text("Earnings", size="sm", c="dimmed")
])
```

--------------------------------

### Example of Varying Card Heights (Bad Practice)

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/design.txt

Illustrates a scenario with inconsistent card heights due to varying content lengths within a grid. This is presented as a 'bad' example to highlight the problem that uniform card heights aim to solve.

```python
# Bad: Varying card heights
dmc.Grid([
    dmc.GridCol(dmc.Card("Short content"), span=4),
    dmc.GridCol(dmc.Card("Much longer content that makes this card taller"), span=4),
    dmc.GridCol(dmc.Card("Medium content here"), span=4),
])
```

--------------------------------

### Print receipt result structure

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/PRINTER_INTEGRATION_GUIDE.md

Example return values for print_receipt.

```python
# Success
{'JobId': 'job_abc123xyz'}

# Error
{'error': 'Error message'}
```

--------------------------------

### GET /get_device_status

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/PRINTER_INTEGRATION_GUIDE.md

Retrieves the current status of a specific printer device.

```APIDOC
## GET /get_device_status

### Description
Retrieves the current status of a specific printer device.

### Method
GET

### Parameters
#### Query Parameters
- **device_id** (str) - Optional - Device Access Identifier. Uses STAR_DEVICE_ID if not provided.

### Response
#### Success Response (200)
- **status** (dict) - Device dictionary containing status information (Online, PaperEmpty, etc.).
```

--------------------------------

### Responsive Design Patterns

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/design.txt

Demonstrates grid systems, responsive spacing, and conditional visibility based on screen breakpoints.

```python
# Responsive Grid
dmc.Grid([
    dmc.GridCol([
        # Content
    ], span={"base": 12, "sm": 6, "lg": 4}),
])

# Responsive Spacing
dmc.Container([
    # Content
], px={"base": "md", "sm": "lg", "lg": "xl"})

# Hide/Show at Breakpoints
dmc.Box([
    # Desktop only content
], visibleFrom="md")

dmc.Box([
    # Mobile only content
], hiddenFrom="md")
```

--------------------------------

### GET /get_device_list

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/PRINTER_INTEGRATION_GUIDE.md

Retrieves a list of all devices associated with the configured group.

```APIDOC
## GET /get_device_list

### Description
Retrieves a list of all devices associated with the configured group.

### Method
GET

### Response
#### Success Response (200)
- **devices** (list) - A list of device dictionaries containing ID, AccessIdentifier, Status, and other printer metadata.
```

--------------------------------

### Get device status

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/PRINTER_INTEGRATION_GUIDE.md

Retrieves the status of a specific printer by its ID.

```python
status = printer.get_device_status('ABC123')
```

--------------------------------

### Configure DMC AppShell

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/DASH_DOCK_RESPONSIVE_GUIDE.md

Sets up the AppShell with a responsive navbar breakpoint that aligns with dash-dock's layout behavior.

```python
dmc.AppShell(
    children=[
        # Header, Navbar, Main content with dash-dock
    ],
    header={"height": 70},
    navbar={
        "width": 280,
        "breakpoint": "md",  # Navbar collapses at 992px
        "collapsed": {"mobile": True},  # Hidden on mobile
    },
    withBorder=True,
)
```

--------------------------------

### Scatter Charts

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_mui_charts/dash_mui_charts.md

Examples for generating Scatter Charts with multi-series and color mapping.

```APIDOC
## Scatter Charts

This section covers the implementation of Scatter Charts, supporting multiple series and z-axis color mapping.

### Endpoint

`/pip/dash_mui_charts` (Conceptual endpoint for chart components)

### Request Body Example (Conceptual)

```json
{
  "data": [
    {"x": [1, 2, 3], "y": [4, 5, 6], "z": [10, 20, 30]},
    {"x": [1, 2, 3], "y": [6, 5, 4], "z": [30, 20, 10]}
  ],
  "type": "ScatterChart",
  "options": {
    "color": {"scheme": "viridis"}
  }
}
```
```

--------------------------------

### Verify .env File and API Key

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/PRINTER_INTEGRATION_GUIDE.md

Check the .env file for the STAR_MICRONICS API key and ensure it is correctly formatted without leading/trailing spaces.

```bash
# Verify .env file exists
cat .env | grep STAR_MICRONICS

# Check API key is correct (no spaces)
STAR_MICRONICS=your_key_here  # Correct
STAR_MICRONICS= your_key_here  # Wrong (space)
```

--------------------------------

### Pie Charts

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_mui_charts/dash_mui_charts.md

Usage examples for creating Pie Charts and Donut Charts.

```APIDOC
## Pie Charts

This section provides examples for creating Pie Charts, including donut and nested variations.

### Endpoint

`/pip/dash_mui_charts` (Conceptual endpoint for chart components)

### Request Body Example (Conceptual)

```json
{
  "data": [
    {"id": "A", "value": 30},
    {"id": "B", "value": 50},
    {"id": "C", "value": 20}
  ],
  "type": "PieChart"
}
```
```

--------------------------------

### Line Charts

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_mui_charts/dash_mui_charts.md

Basic usage and examples for creating Line Charts with dash-mui-charts.

```APIDOC
## Line Charts

This section covers the basic implementation of Line Charts.

### Endpoint

`/pip/dash_mui_charts` (Conceptual endpoint for chart components)

### Request Body Example (Conceptual)

```json
{
  "data": [
    {"x": [1, 2, 3], "y": [4, 5, 6]}
  ],
  "type": "LineChart"
}
```

### Response Example (Conceptual)

```json
{
  "status": "success",
  "chart_id": "linechart-123"
}
```
```

--------------------------------

### Success Notification Example

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/design.txt

Shows a success notification with a title, message, color, and action.

```python
# Success Notification
dmc.Notification(
    title="Success",
    message="Your changes have been saved",
    color="green",
    action="showNotification",
)
```

--------------------------------

### Error Alert Example

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/design.txt

Displays an error alert with a title, message, color, and icon.

```python
# Error Alerts
dmc.Alert(
    "An error occurred while saving your changes. Please try again.",
    title="Error",
    color="red",
    icon=DashIconify(icon="tabler:alert-circle"),
)
```

--------------------------------

### Configure Pro License Key

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_mui_charts/dash_mui_charts.md

Set the license key in your .env file to enable Pro features.

```text
MUI_PRO_API_KEY=your-license-key-here
```

--------------------------------

### Sparkline Charts

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_mui_charts/dash_mui_charts.md

Usage examples for Sparkline Charts, suitable for compact inline visualizations.

```APIDOC
## Sparkline Charts

This section provides examples for creating Sparkline Charts, which are designed for compact inline visualizations within tables or KPI cards.

### Endpoint

`/pip/dash_mui_charts` (Conceptual endpoint for chart components)

### Request Body Example (Conceptual)

```json
{
  "data": [1, 5, 2, 6, 3, 7],
  "type": "SparklineChart"
}
```
```

--------------------------------

### Inline Success Alert Example

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/design.txt

Displays an inline success alert with a message, color, and icon.

```python
# Inline Success
dmc.Alert(
    "Form submitted successfully!",
    color="green",
    icon=DashIconify(icon="tabler:check"),
)
```

--------------------------------

### Docker Image Build and Run

Source: https://github.com/pip-install-python/pip-documentation/blob/main/CLAUDE.md

Commands to build a Docker image for the project and run it as a container. The application will be accessible at http://localhost:8550.

```bash
docker build -t pip-docs .
docker run -p 8550:8550 pip-docs
# Available at http://localhost:8550
```

--------------------------------

### Get Device Status

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/PRINTER_INTEGRATION_GUIDE.md

Checks the health, paper status, and connection mode of a specific printer.

```python
status = printer.get_device_status(device_id)

# Check printer health
is_online = status['Status']['Online']
paper_empty = status['Status']['PaperEmpty']
paper_low = status['Status']['PaperLow']
cover_open = status['Status']['CoverOpen']
queue_count = status['QueuedJobs']

# Connection info
last_connection = status['LastConnection']  # 0 = MQTT mode, >0 = seconds since last poll
connection_mode = "MQTT" if last_connection == 0 else "HTTP Polling"
```

--------------------------------

### GET /api/packages/{package}/overall

Source: https://github.com/pip-install-python/pip-documentation/blob/main/CLAUDE.md

Retrieves the overall download history for a specific Python package.

```APIDOC
## GET /api/packages/{package}/overall

### Description
Fetches the overall download statistics for a given package name.

### Method
GET

### Endpoint
https://pypistats.org/api/packages/{package}/overall

### Parameters
#### Path Parameters
- **package** (string) - Required - The name of the Python package to query.

### Response
#### Success Response (200)
- **data** (array) - List of download records containing category, downloads, and date.
- **package** (string) - The name of the requested package.
- **type** (string) - The type of statistics returned (e.g., "overall_downloads").

#### Response Example
{
  "data": [
    {
      "category": "without_mirrors",
      "downloads": 123456,
      "date": "2024-01-01"
    }
  ],
  "package": "package-name",
  "type": "overall_downloads"
}
```

--------------------------------

### Create Empty States

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/design.txt

Use illustrations and descriptive text to guide users when content is missing.

```python
# Engaging empty state
dmc.Center([
    dmc.Stack([
        dmc.Image(
            src="/illustrations/empty-inbox.svg",
            h=200,
            w="auto",
        ),
        dmc.Title("No messages yet", order=3, ta="center"),
        dmc.Text(
            "When you receive messages, they'll appear here",
            c="dimmed",
            ta="center",
        ),
        dmc.Button("Compose Message", variant="light"),
    ], align="center")
], h=400)
```

--------------------------------

### Star Micronics Environment Variables Setup

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/STARMICRONICS.md

Set up environment variables for Star Micronics integration. Include your API key, group path, and optionally a default device ID. Choose the correct API base URL for your region.

```bash
# Star Micronics Configuration
STAR_MICRONICS=your_api_key_here
STAR_GROUP_PATH=your_group_path
STAR_DEVICE_ID=device_access_identifier  # Optional, for default device

# API Endpoints (choose based on region)
STAR_API_BASE_URL=https://api.stario.online/v1  # US
# STAR_API_BASE_URL=https://eu-api.stario.online/v1  # EU
```

--------------------------------

### Refine Whitespace Usage

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/design.txt

Start with generous spacing and refine as needed to maintain a consistent rhythm.

```python
# Start generous
dmc.Container([
    dmc.Title("Heading", mb="xl"),
    dmc.Text("Paragraph", mb="xl"),
    dmc.Button("Action", mt="xl"),
], p="xl")

# Refine as needed
dmc.Container([
    dmc.Title("Heading", mb="lg"),
    dmc.Text("Paragraph", mb="md"),
    dmc.Button("Action", mt="lg"),
], p="lg")
```

```python
# Bad: Random spacing
dmc.Stack([
    dmc.TextInput(label="Name", mb=7),
    dmc.TextInput(label="Email", mb=19),
    dmc.TextInput(label="Phone", mb=13),
])

# Good: Rhythmic spacing
dmc.Stack([
    dmc.TextInput(label="Name", mb="md"),
    dmc.TextInput(label="Email", mb="md"),
    dmc.TextInput(label="Phone", mb="md"),
])
```

```python
# Bad: Cramped
dmc.Card([
    dmc.Stack([
        dmc.Title("Title"),
        dmc.Text("Description"),
        dmc.Button("Action"),
    ], gap=0)
], p="xs")
```

--------------------------------

### Create a DashPaneLayout

Source: https://github.com/pip-install-python/pip-documentation/blob/main/docs/dash_dock_view/dash_dock_view.md

Implement a DashPaneLayout for an accordion-style interface. Panels can be configured to start collapsed or expanded.

```python
from dash_dock_view import DashPaneLayout

DashPaneLayout(
    id="my-panes",
    panels=[
        {"id": "pane-1", "title": "Section 1", "collapsed": False},
        {"id": "pane-2", "title": "Section 2", "collapsed": True},
    ],
    children=[
        html.Div(id="pane-1", children="Content 1"),
        html.Div(id="pane-2", children="Content 2"),
    ],
    height="400px",
)
```

--------------------------------

### Form Section Example

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/design.txt

Defines a section for personal information with text input fields for name and email.

```python
form_section("Personal Information", [
    dmc.TextInput(label="Full Name"),
    dmc.TextInput(label="Email"),
])
```

--------------------------------

### Run Test Configuration

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/STARMICRONICS.md

Command to launch the interactive printer service test menu.

```bash
python printer_service.py
```

--------------------------------

### pypistats.org API Response Format

Source: https://github.com/pip-install-python/pip-documentation/blob/main/CLAUDE.md

Example JSON structure for download history data from the pypistats.org API.

```json
{
  "data": [
    {
      "category": "without_mirrors",
      "downloads": 123456,
      "date": "2024-01-01"
    },
    // ...
  ],
  "package": "package-name",
  "type": "overall_downloads"
}
```

--------------------------------

### Define Theme with MantineProvider

Source: https://github.com/pip-install-python/pip-documentation/blob/main/support_files/design.txt

Configures the global theme including colors, fonts, and spacing, then wraps the application in a MantineProvider.

```python
from dash import Dash
import dash_mantine_components as dmc

theme = {
    "primaryColor": "blue",
    "fontFamily": "Inter, -apple-system, sans-serif",
    "defaultRadius": "md",
    "spacing": {
        "xs": 8,
        "sm": 12,
        "md": 16,
        "lg": 24,
        "xl": 32,
    },
    "colors": {
        "brand": [
            "#E6F7FF", "#BAE7FF", "#91D5FF", "#69C0FF", "#40A9FF",
            "#1890FF", "#096DD9", "#0050B3", "#003A8C", "#002766"
        ]
    }
}

app = Dash(__name__)
app.layout = dmc.MantineProvider(
    theme=theme,
    children=[
        # Your app content
    ]
)
```