Bundled storefront patterns only

🔧 Admin Tools

Backend management interfaces, configuration panels, and rule builders rebuilt with the same selectors shipped by the storefront styles.css bundle.

🖥️ System Health Dashboard

Real-time monitoring rebuilt with bundled progress bars, status cards, and utility surfaces.

Resource usage

Bundled sparkles-progress* markup with real variant classes.

CPU usage 67%

Workers are busy, but the node is still under the alert threshold.

Memory usage 84%

A red bar spotlights processes that need investigation before peak traffic.

Disk usage 45%

Low storage pressure leaves room for exports, media syncs, and reindexes.

Database health 92%

Gradient variant shows a healthy primary system without importing admin-only progress skins.

Service status

Each row uses regular card utilities and semantic status color mapping.

📦 Data Import / Export Center

The upload surface now leans on bundled cards, buttons, progress bars, and success messaging instead of the retired import-only stylesheet.

Drop a CSV or Excel file here

Choose a product feed, customer export, or pricing workbook up to 10MB.

✅ File ready for validation

Bundled utility button + bundled progress flow

Processing import

Validation, duplicate detection, and batch writes update the same progress component.

0%
0%
Total records
Processed
Successful
Errors

Import completed successfully

Reusable storefront alert styling covers success, warning, and failure outcomes without a separate admin asset.

Imported
Skipped
0
Failed
Duration

⚙️ Configuration Management

Form inputs still use Sparkles form primitives, while toggles now use the actual bundled switch markup.

Store information

Performance settings

Improves response time by serving reusable content from cache layers.

Expose detailed diagnostics during QA runs, never on live storefront traffic.

⚠️ Security recommendation

Two-factor authentication and automatic session expiration should be enabled for all admin operators.

Access controls

🔌 API Configuration & Webhooks

Key lists and webhook rows now use the same storefront cards, pills, and action buttons as the public bundle.

API keys

Token-like values stay monospaced without importing any admin-only key manager stylesheet.

Webhook endpoints

Status pills stay visible with plain utility markup and bundled color tokens.

🧠 Business Rule Builder

Rule rows now sit on the same shared bordered-card foundation as other storefront modules.

Usage examples

// Bundled progress markup
<div class="sparkles-progress sparkles-progress-md">
    <div class="sparkles-progress-bar bg-amber-500" style="width: 67%"></div>
</div>
// Bundled toggle markup
<button class="sparkles-toggle sparkles-toggle-md sparkles-toggle-checked" role="switch" aria-checked="true">
    <span class="sparkles-toggle-track transition-colors duration-300"></span>
    <span class="sparkles-toggle-thumb transition-transform duration-300"></span>
</button>
// Bundled card + input primitives
<section class="sparkles-admin-card p-6">
    <label class="section-mb-xs block text-sm font-medium text-gray-700">Store name</label>
    <input type="text" class="sparkles-input" />
</section>

Performance & accessibility

Performance notes

  • •The showcase now exercises selectors already present in styles.css, so it no longer inflates requests with admin-only component files.
  • •Alpine state stays local to each card, avoiding heavyweight admin dashboard bootstraps.
  • •Reusable bundled progress and toggle components preserve behavior while trimming showcase-only CSS dependencies.

Accessibility notes

  • •Switches use semantic role="switch" plus live aria-checked state.
  • •Upload actions stay keyboard accessible by forwarding the visible button to the hidden file input.
  • •Status pills, success alerts, and progress labels keep critical state visible without relying on color alone.