@editora/ui-core

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.

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-gantt, 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.

Gantt Planning Timeline

ui-gantt is the framework-agnostic planning timeline behind the React Gantt wrapper. It supports task, summary, and milestone rows; dependency routing; drag/resize editing; keyboard selection; baselines; critical tasks; split segments; and row virtualization for large schedules.

<ui-gantt id="releasePlan" zoom="week" sort="start" bar-variant="soft"></ui-gantt>

<script type="module">
  import '@editora/ui-core';

  const gantt = document.getElementById('releasePlan');

  gantt.setAttribute('tasks', JSON.stringify([
    {
      id: 'api',
      label: 'API contracts',
      start: '2026-02-10',
      end: '2026-02-24',
      progress: 62,
      baselineStart: '2026-02-07',
      baselineEnd: '2026-02-21',
      critical: true
    },
    {
      id: 'qa',
      label: 'QA sign-off',
      start: '2026-02-27',
      type: 'milestone',
      tone: 'success'
    }
  ]));

  gantt.setAttribute('links', JSON.stringify([
    { id: 'api-qa', source: 'api', target: 'qa', type: 'e2s' }
  ]));

  gantt.addEventListener('taskchange', (event) => console.log('task changed', event.detail));
  gantt.addEventListener('taskdelete', (event) => console.log('delete task', event.detail.id));
  gantt.addEventListener('linkselect', (event) => console.log('dependency selected', event.detail));
</script>

• Dependency types: e2s, s2s, e2e, and s2e, with routed SVG connectors and arrowheads.
• Bar variants: solid, soft, striped, outline, and glass.
• Toolbar controls: zoom, filter, and sort; use readonly for non-editable reports.

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.