components

LARC Components

Version License Security

Production-ready UI web components built on the PAN messaging bus

A comprehensive library of framework-agnostic UI components that communicate via the PAN (Page Area Network) messaging system. Build complex UIs with zero coupling between components.

Features

📊 Bundle Size Comparison

Typical React Dashboard:

React + ReactDOM:           172 KB
Material-UI or Ant Design:  300-500 KB
State Management:           20-50 KB
Router:                     20 KB
────────────────────────────────────
Total (before your code):   512-742 KB

LARC Approach:

PAN Core Lite:              9 KB minified (3 KB gzipped) ⭐
Components (on-demand):     ~7 KB each minified (~2 KB gzipped)
57 components total:        396 KB minified (110 KB gzipped)
Only load what you use:     9-100 KB typical (core-lite + components needed)
────────────────────────────────────
Savings:                    80-95% smaller

Note: Using @larcjs/core-lite instead of full @larcjs/core saves an additional 31KB!

Real Example: A dashboard with sidebar, header, data table, charts, and modals:

Installation

npm install @larcjs/components @larcjs/core

Quick Start

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- Load LARC Core autoloader -->
  <script type="module" src="https://unpkg.com/@larcjs/core@1.1.1/src/pan.js"></script>
</head>
<body>
  <!-- Components load automatically on demand -->
  <pan-data-table
    resource="users"
    columns='["id", "name", "email"]'>
  </pan-data-table>

  <!-- Inspector for debugging -->
  <pan-inspector></pan-inspector>
</body>
</html>

Module Usage

import '@larcjs/core';
import '@larcjs/components/pan-data-table';
import '@larcjs/components/pan-form';

// Components are now registered and ready to use

Core Components

Data Display

<pan-data-table>

Enterprise-grade data grid with sorting, filtering, pagination, and inline editing.

<pan-data-table
  resource="products"
  columns='["id", "name", "price", "stock"]'
  sortable="true"
  filterable="true"
  editable="true">
</pan-data-table>

Features:

<pan-grid>

Flexible data grid with drag-and-drop reordering and customizable layouts.

<pan-grid
  resource="cards"
  layout="masonry"
  columns="3">
</pan-grid>

<pan-chart>

Interactive charts powered by Chart.js integration.

<pan-chart
  type="line"
  topic="analytics.data"
  x-axis="date"
  y-axis="sales">
</pan-chart>

Forms & Input

<pan-form>

Schema-driven form generator with validation and error handling.

<pan-form
  resource="user"
  schema-topic="user.schema"
  submit-topic="user.save">
</pan-form>

Features:

<pan-dropdown>

Searchable dropdown with keyboard navigation.

<pan-dropdown
  topic="country.select"
  options-topic="countries.list.state"
  placeholder="Select country">
</pan-dropdown>

<pan-date-picker>

Accessible date/time picker with localization.

<pan-date-picker
  topic="booking.date"
  min="2024-01-01"
  format="YYYY-MM-DD">
</pan-date-picker>

Data Providers

<pan-data-provider>

Connects to REST APIs and manages data state.

<pan-data-provider
  resource="users"
  endpoint="/api/users"
  auto-load="true">
</pan-data-provider>

Features:

<pan-data-connector>

Generic connector for any data source.

<pan-data-connector
  resource="products"
  adapter="graphql"
  endpoint="https://api.example.com/graphql">
</pan-data-connector>

UI Controls

<pan-modal>

Accessible modal dialogs with backdrop.

<pan-modal id="confirmDialog" title="Confirm Action">
  <p>Are you sure you want to proceed?</p>
  <button slot="footer">Confirm</button>
</pan-modal>

<pan-tabs>

Tab navigation with lazy loading.

<pan-tabs>
  <pan-tab label="Overview" active>Content 1</pan-tab>
  <pan-tab label="Details">Content 2</pan-tab>
  <pan-tab label="Settings">Content 3</pan-tab>
</pan-tabs>

<pan-toolbar>

Action toolbar with responsive overflow menu.

<pan-toolbar>
  <button data-action="save">Save</button>
  <button data-action="delete">Delete</button>
  <button data-action="export">Export</button>
</pan-toolbar>

State Management

NEW: Advanced state management components for building offline-first, cross-tab synchronized applications with persistent state.

<pan-state-sync>

Cross-tab state synchronization using BroadcastChannel API.

<pan-state-sync
  channel="myapp-sync"
  topics="users.*,todos.*"
  strategy="last-write-wins"
  leader="auto">
</pan-state-sync>

Features:

<pan-computed-state>

Derived/computed state with automatic dependency tracking.

<pan-computed-state
  sources="cart.items,user.discount"
  output="cart.total"
  debounce="100"
  retain>
  <script>
    (items, discount) => {
      return items.reduce((sum, item) => sum + item.price, 0) - (discount || 0);
    }
  </script>
</pan-computed-state>

Features:

<pan-offline-sync>

Offline-first support with automatic queue management and sync.

<pan-offline-sync
  storage="offline-queue"
  retry-max="3"
  topics="todos.*,notes.*"
  endpoints='{"todos.*": "/api/todos"}'>
</pan-offline-sync>

Features:

<pan-persistence-strategy>

Declarative persistence routing to different storage backends.

<pan-persistence-strategy auto-hydrate>
  <strategy topics="session.*" storage="memory" ttl="1800000"></strategy>
  <strategy topics="user.preferences.*" storage="localStorage"></strategy>
  <strategy topics="*.list.*" storage="indexedDB" database="app-data"></strategy>
</pan-persistence-strategy>

Features:

<pan-schema-validator>

Runtime JSON Schema validation without build tools.

<pan-schema-validator topic="users.item.*" strict>
  <script type="application/json">
  {
    "type": "object",
    "properties": {
      "email": { "type": "string", "format": "email" },
      "age": { "type": "number", "minimum": 0 }
    },
    "required": ["email"]
  }
  </script>
</pan-schema-validator>

Features:

<pan-undo-redo>

Time-travel debugging with undo/redo support.

<pan-undo-redo
  topics="editor.*"
  max-history="50"
  channel="history"
  auto-snapshot>
</pan-undo-redo>

Features:

See State Management Patterns Guide for complete documentation and examples.

Developer Tools

<pan-inspector>

Enhanced real-time message inspector with state tree, metrics, and debugging tools.

<pan-inspector></pan-inspector>

Features:

Message Contracts

Components communicate via standardized topic patterns:

List Operations

// Request list
bus.publish('users.list.get', {});

// Receive list state
bus.subscribe('users.list.state', (msg) => {
  console.log('Users:', msg.payload.items);
});

Item Operations

// Select an item
bus.publish('users.item.select', { id: 123 });

// Request item details
await bus.request('users.item.get', { id: 123 });

// Save item
await bus.request('users.item.save', {
  item: { id: 123, name: 'Alice' }
});

// Delete item
await bus.request('users.item.delete', { id: 123 });

Theming

Customize appearance using CSS custom properties:

:root {
  /* Colors */
  --pan-primary-color: #007bff;
  --pan-secondary-color: #6c757d;
  --pan-success-color: #28a745;
  --pan-danger-color: #dc3545;

  /* Typography */
  --pan-font-family: system-ui, sans-serif;
  --pan-font-size: 14px;

  /* Spacing */
  --pan-spacing-sm: 8px;
  --pan-spacing-md: 16px;
  --pan-spacing-lg: 24px;

  /* Borders */
  --pan-border-radius: 4px;
  --pan-border-color: #dee2e6;
}

See Theme System Documentation for complete customization guide.

Security

All components have been security audited:

See Security Audit Report for details.

Browser Support

Component Catalog

View all components with live examples:

🎯 When to Use What

Use LARC for:

Keep React/Vue for:

Best practice: Mix them! Use LARC for 80% of your UI, React/Vue for the 20% that needs framework power.

Contributing

Contributions are welcome! Please see our Contributing Guide.

License

MIT © Chris Robison

Support

This site is open source. Improve this page.