sapium-ui 0.1.0__tar.gz

sapium_ui-0.1.0/.github/workflows/ci.yml

@@ -0,0 +1,20 @@
+name: CI
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  commons:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.13"
+      - name: Install dependencies
+        run: pip install -e ".[dev]"
+      - name: Lint
+        run: ruff check src/ && ruff format --check src/
+      - name: Test
+        run: pytest tests/

sapium_ui-0.1.0/.github/workflows/publish.yml

@@ -0,0 +1,24 @@
+name: Publish
+
+on:
+  push:
+    tags:
+      - "v*"
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.13"
+      - name: Build package
+        run: |
+          pip install build
+          python -m build
+      - uses: pypa/gh-action-pypi-publish@release/v1

sapium_ui-0.1.0/.gitignore

@@ -0,0 +1,16 @@
+__pycache__
+.pytest_cache
+.venv
+logs
+*.egg-info
+test.ipynb
+_bmad*
+.claude
+deploy/.env
+deploy/settings/
+.coverage
+CLAUDE.md
+.github/skills
+.github/agents
+.agents
+node_modules

sapium_ui-0.1.0/PKG-INFO

@@ -0,0 +1,8 @@
+Metadata-Version: 2.4
+Name: sapium-ui
+Version: 0.1.0
+Summary: Sapium shared frontend layer — CSS, Jinja2 base template, and JS for all Sapium consoles
+Requires-Python: >=3.12
+Provides-Extra: dev
+Requires-Dist: pytest; extra == 'dev'
+Requires-Dist: ruff>=0.15.0; extra == 'dev'

sapium_ui-0.1.0/README.md

@@ -0,0 +1,127 @@
+# sapium-ui
+
+Shared frontend layer for all Sapium consoles: compiled CSS, Jinja2 base template, and shared JS.
+
+Consoles install this package and receive a pre-compiled stylesheet (Tailwind v4 + DaisyUI v5), a `base.html` shell to extend, and two JS files for theme toggling and confirm modal behaviour. No Node.js is required in any console's Dockerfile.
+
+## Package contents
+
+```
+src/sapium_ui/
+├── __init__.py                      # get_static_dir(), get_templates_dir()
+├── static/
+│   ├── css/
+│   │   ├── custom.css               # Tailwind source — reference copy
+│   │   └── dist.css                 # pre-compiled output — checked in, shipped in wheel
+│   └── js/
+│       ├── theme.js                 # dark/light theme toggle
+│       └── confirm.js               # htmx:confirm → DaisyUI modal bridge
+└── templates/
+    └── sapium_ui/
+        └── base.html                # shared Jinja2 shell
+```
+
+## Using in a console
+
+### 1. Add the dependency
+
+```toml
+# pyproject.toml
+[project]
+dependencies = ["sapium-ui"]
+```
+
+### 2. Wire up Jinja2 and static files
+
+```python
+from jinja2 import ChoiceLoader, Environment, PackageLoader
+import sapium_ui
+from fastapi.staticfiles import StaticFiles
+
+env = Environment(
+    loader=ChoiceLoader([
+        PackageLoader("sapium_my_console"),   # console-local templates win
+        PackageLoader("sapium_ui"),           # shared templates as fallback
+    ]),
+    autoescape=True,
+)
+
+app.mount("/static/ui", StaticFiles(directory=str(sapium_ui.get_static_dir())), name="ui-static")
+```
+
+### 3. Extend the base template
+
+```html
+{% extends "sapium_ui/base.html" %}
+
+{% block title %}My Console{% endblock %}
+{% block product_name %}My Console{% endblock %}
+{% block viewport_class %}xl{% endblock %}
+
+{% block nav %}
+<nav aria-label="Main navigation" class="flex-1 py-4 overflow-y-auto">
+  <ul class="space-y-1 px-2">
+    <li>
+      <a href="/" {{ nav_aria_current('/') }}
+         class="{{ nav_link_class('/') }} flex items-center gap-3 px-3 py-2 rounded text-sm transition-colors">
+        Dashboard
+      </a>
+    </li>
+  </ul>
+</nav>
+{% endblock %}
+
+{% block content %}
+  {# page content #}
+{% endblock %}
+```
+
+### Template context variables
+
+| Variable | Required | Description |
+|---|---|---|
+| `theme_key` | No | `localStorage` key for theme persistence (default: `sapium-theme`) |
+| `logo_url` | No | URL for the favicon and sidebar logo |
+| `ui_static_url` | No | Base URL where sapium-ui static assets are mounted (default: `/static/ui`) |
+| `viewport_class` | No | Minimum breakpoint: `xl` (1280px, fixed sidebar) or `lg` (1024px, icon sidebar) |
+
+### Template blocks
+
+| Block | Purpose |
+|---|---|
+| `title` | `<title>` tag content |
+| `product_name` | Name shown in sidebar header |
+| `viewport_class` | Override minimum breakpoint (alternative to context variable) |
+| `viewport_message` | Small-screen message text |
+| `nav` | Sidebar navigation — receives `nav_link_class(href)` and `nav_aria_current(href)` macros |
+| `breadcrumb` | Top header breadcrumb area |
+| `page_action` | Top header right-side action button |
+| `content` | Main page content |
+
+### Nav helper macros
+
+The base template defines two macros accessible in `{% block nav %}` overrides:
+
+- `nav_link_class(href)` — returns active/hover Tailwind classes based on the current URL path
+- `nav_aria_current(href)` — returns `aria-current="page"` when the link is active
+
+## Rebuilding the CSS
+
+The CSS build is a **maintainer-only step** run before cutting a release. Consumers receive the pre-compiled `dist.css` in the wheel.
+
+```bash
+cd build
+npm install
+npm run build
+```
+
+Dependencies: `@tailwindcss/cli@^4`, `daisyui@^5`
+
+The compiled output is committed to the repo and included in the wheel.
+
+## Design system
+
+- **Dark theme** (`business`): DaisyUI v5 built-in base surfaces provide depth. Only brand tokens are overridden (primary, neutral, status colours, shape).
+- **Light theme**: same brand tokens plus `--color-base-200: white` for cards-on-white. Sidebar stays dark.
+- **Sapium purple**: `oklch(38.5% 0.183 293.5)` — `#6a0dad`
+- **WCAG AA**: error components force `color: var(--color-error-content)` to guarantee contrast.

sapium_ui-0.1.0/build/custom.css

@@ -0,0 +1,107 @@
+@import "tailwindcss";
+@plugin "daisyui";
+
+/* ─── Business (dark) theme — brand tokens only; DaisyUI v5 handles base surfaces ─── */
+:root,
+[data-theme="business"] {
+  color-scheme: dark;
+
+  /* brand */
+  --color-primary: oklch(38.5% 0.183 293.5);          /* #6a0dad — sapium purple */
+  --color-primary-content: oklch(100% 0 0);            /* white on primary bg */
+
+  /* sidebar */
+  --color-neutral: oklch(19.59% 0.027 286.57);         /* #2A2535 — sidebar bg */
+  --color-neutral-content: oklch(91.19% 0.022 291.29); /* #E5E0F0 — sidebar text */
+
+  /* status */
+  --color-success: oklch(72.32% 0.189 142.5);          /* #22C55E */
+  --color-success-content: oklch(100% 0 0);
+  --color-error: oklch(50% 0.213 22.18);               /* ~red-700; white text ≥4.5:1 */
+  --color-error-content: oklch(100% 0 0);
+  --color-warning: oklch(77.48% 0.154 74.45);          /* #F59E0B */
+  --color-warning-content: oklch(15% 0 0);
+  --color-info: oklch(63.37% 0.19 255.5);              /* #3B82F6 */
+  --color-info-content: oklch(100% 0 0);
+
+  /* shape (DaisyUI v5 names) */
+  --radius-box: 0.75rem;
+  --radius-selector: 0.5rem;
+  --radius-field: 0.375rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
+}
+
+/* ─── Light theme ─── */
+[data-theme="light"] {
+  color-scheme: light;
+
+  /* pure white base-200 — makes cards-on-white work */
+  --color-base-200: oklch(100% 0 0);                   /* pure white */
+
+  /* brand */
+  --color-primary: oklch(38.5% 0.183 293.5);          /* #6a0dad — sapium purple */
+  --color-primary-content: oklch(100% 0 0);
+
+  /* sidebar — stays dark in light mode */
+  --color-neutral: oklch(19.59% 0.027 286.57);         /* #2A2535 — sidebar bg */
+  --color-neutral-content: oklch(91.19% 0.022 291.29); /* #E5E0F0 — sidebar text */
+
+  /* status */
+  --color-success: oklch(72.32% 0.189 142.5);          /* #22C55E */
+  --color-success-content: oklch(100% 0 0);
+  --color-error: oklch(50% 0.213 22.18);               /* red-700; white text ≥4.5:1 */
+  --color-error-content: oklch(100% 0 0);
+  --color-warning: oklch(77.48% 0.154 74.45);          /* #F59E0B */
+  --color-warning-content: oklch(15% 0 0);
+  --color-info: oklch(63.37% 0.19 255.5);              /* #3B82F6 */
+  --color-info-content: oklch(15% 0 0);               /* dark text — white fails WCAG AA on ~63% L blue */
+
+  /* shape */
+  --radius-box: 0.75rem;
+  --radius-selector: 0.5rem;
+  --radius-field: 0.375rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+/* WCAG AA fix: DaisyUI v5 error components inherit color from --color-error
+   which can fail contrast on dark backgrounds. Force error-content (white). */
+[data-theme="business"] .alert-error,
+[data-theme="business"] .badge-error,
+[data-theme="business"] .btn-error {
+  color: var(--color-error-content);
+}
+
+[data-theme="light"] .alert-error,
+[data-theme="light"] .badge-error,
+[data-theme="light"] .btn-error:not(.btn-outline) {
+  color: var(--color-error-content);
+}
+
+[data-theme="light"] .btn-outline.btn-error {
+  border-color: var(--color-error);
+  color: var(--color-error);
+  background-color: transparent;
+}
+[data-theme="light"] .btn-outline.btn-error:hover {
+  background-color: var(--color-error);
+  border-color: var(--color-error);
+  color: var(--color-error-content);
+}
+
+/* expand/collapse chevron — CSS-only rotate, no JS */
+.card-chevron {
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+  transform: rotate(0deg);
+}
+details[open] summary .card-chevron {
+  transform: rotate(90deg);
+}