@editora/ui-core

Framework-agnostic UI primitives and Web Components for production-grade applications.

Overview

@editora/ui-core is the framework-agnostic UI layer in the Editora ecosystem. It ships custom elements, dialog managers, token-based theming helpers, and overlay/focus utilities for complex UI flows.

Import rule: load @editora/ui-core once at app bootstrap to register all custom elements.

Installation

npm install @editora/ui-core

Bootstrap

import '@editora/ui-core';

Quick Start (Vanilla / Any Framework)

<ui-field label="Email" hint="Work email">
  <ui-input name="email" type="email" placeholder="you@company.com" required></ui-input>
</ui-field>

<ui-button variant="primary">Save</ui-button>

Core Utilities

  • createSignal, computed, effect
  • ElementBase
  • applyTheme, defaultTokens
  • Portal/overlay/focus helpers: showPortalFor, autoUpdatePosition, focus managers
  • showToast

Dialog Managers (Promise API)

  • createDialogManager / DialogManager
  • createAlertDialogManager / AlertDialogManager
import '@editora/ui-core';
import { createDialogManager } from '@editora/ui-core';

const dialogs = createDialogManager();

const result = await dialogs.confirm({
  title: 'Delete record',
  description: 'This action cannot be undone.',
  submitText: 'Delete',
  cancelText: 'Cancel',
  mode: 'queue'
});

if (result.action === 'submit') {
  // delete
}

Component Catalog

Primitives and forms

ui-button, ui-input, ui-textarea, ui-field, ui-form, ui-checkbox, ui-select, ui-combobox, ui-date-picker, ui-color-picker and related controls.

Layout and navigation

ui-layout, ui-sidebar, ui-app-header, ui-breadcrumb, ui-navigation-menu, ui-menubar, ui-tabs, ui-grid, ui-container.

Data and display

ui-data-table, ui-pagination, ui-table, ui-chart, ui-calendar, ui-progress, ui-skeleton, ui-empty-state.

Overlays and interaction

ui-dialog, ui-alert-dialog, ui-popover, ui-dropdown, ui-context-menu, ui-tooltip, ui-drawer, ui-floating-toolbar, ui-command-palette.

Events and Integration Pattern

<ui-date-picker id="start" name="startDate" clearable></ui-date-picker>
<script type="module">
  import '@editora/ui-core';

  const picker = document.getElementById('start');
  picker.addEventListener('change', (e) => {
    console.log('new date', e.detail.value);
  });
</script>

Most events are dispatched as CustomEvent with typed detail, and usually bubble across shadow boundaries.

Theming

import { applyTheme, defaultTokens } from '@editora/ui-core';

applyTheme({
  ...defaultTokens,
  colors: {
    ...defaultTokens.colors,
    primary: '#0f766e',
    text: '#0f172a',
    background: '#ffffff'
  },
  radius: '10px'
});

Performance and Production Notes

  • Package is sideEffects: true because custom element registration happens at module import time.
  • Use virtualized table mode for large datasets (ui-data-table[virtualize]).
  • Avoid heavy synchronous work inside frequently fired event handlers.
  • Initialize theme tokens early to avoid flash-of-unstyled-components.

Related Docs