@editora/ui-core 0.1.22 → 0.1.24

package/README.md

@@ -1,55 +1,120 @@
-# @editora/ui-core
+<h1 align="center">@editora/ui-core</h1>
+
+<p align="center">
+  More than a hundred web components for building application UIs: forms, data tables, dialogs, charts, a Gantt chart
+  and more. Standard custom elements, so they work in plain HTML, React, Vue, Svelte and Angular, with promise-based
+  dialogs, theming and positioning helpers.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@editora/ui-core"><img src="https://img.shields.io/npm/v/@editora/ui-core.svg" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/@editora/ui-core"><img src="https://img.shields.io/npm/dm/@editora/ui-core.svg" alt="npm downloads"></a>
+  <a href="https://github.com/ajaykr089/Editora/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@editora/ui-core.svg" alt="license"></a>
+  <a href="https://www.npmjs.com/package/@editora/ui-core"><img src="https://img.shields.io/npm/types/@editora/ui-core.svg" alt="TypeScript types included"></a>
+</p>
+
+<p align="center">
+  <a href="https://editora-ecosystem.netlify.app/">Component catalog</a> ·
+  <a href="https://editora-ecosystem-storybook.netlify.app/">Storybook</a> ·
+  <a href="https://codesandbox.io/p/github/ajaykr089/editora-codesandbox/main">CodeSandbox</a> ·
+  <a href="https://github.com/ajaykr089/Editora">GitHub</a>
+</p>
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/ajaykr089/Editora/main/packages/ui-core/docs/images/components.png" alt="A set of components: a labelled text field, buttons, badges and avatars, a warning alert, a switch, a checkbox, a progress bar and a date picker" width="900">
+</p>
+
+## Features
+
+- **A broad catalog.** Inputs and forms, pickers, tables, tabs, menus, dialogs, drawers, charts, a calendar and a
+  Gantt planner: [the full list](#components).
+- **Standard custom elements.** Use them from any framework, or with no framework and no build step.
+- **Forms that validate.** `<ui-form>` collects the values of the controls inside it, validates them and reports
+  `submit`, `invalid` and `dirty-change`.
+- **Promise-based dialogs.** `await dialogs.confirm({...})` instead of wiring open/close state.
+- **Themeable** with design tokens, for the whole page or for one element.
+- **Positioning helpers** for menus, popovers and tooltips: flip, shift and fit to the viewport.
+- Typed, and every component is also available on its own, so you can ship only the ones you use
+  ([measured below](#import-only-what-you-use)).
+
+## Install
 
-[![Version](https://img.shields.io/npm/v/@editora/ui-core)](https://www.npmjs.com/package/@editora/ui-core)
-[![License](https://img.shields.io/npm/l/@editora/ui-core)](https://github.com/ajaykr089/Editora/blob/main/LICENSE)
-[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
-[![Size](https://img.shields.io/bundlephobia/minzip/@editora/ui-core)](https://bundlephobia.com/package/@editora/ui-core)
-
-![Editora UI Components](../../images/editora-ui-components-linkedin-graphic.png)
+```bash
+npm install @editora/ui-core
+```
 
-## Demos
+## Quick start
 
-- **CodeSandbox:** https://codesandbox.io/p/github/ajaykr089/editora-codesandbox/main
-- **CodeSandboxUI Components:** https://qjr47y-5173.csb.app/button
-- **UI Component Catalog:** https://editora-ecosystem.netlify.app/
-- **Web Demo:** https://editora-free.netlify.app/
-- **Storybook:** https://editora-ecosystem-storybook.netlify.app/
+With a bundler, import the package once to register the elements: `import '@editora/ui-core';`.
 
-Production-oriented Web Components for Editora UI.
+With no build step, map the package to a CDN and import it in a module script:
 
-`@editora/ui-core` is the framework-agnostic layer. It ships:
-- Custom elements (`<ui-button>`, `<ui-data-table>`, `<ui-date-picker>`, etc.)
-- Imperative managers for Promise-based dialogs
-- Theming/token utilities
-- Overlay, focus, portal, and plugin helpers
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "@editora/ui-core": "https://cdn.jsdelivr.net/npm/@editora/ui-core/dist/index.esm.js",
+      "@editora/icons": "https://cdn.jsdelivr.net/npm/@editora/icons/dist/index.esm.js"
+    }
+  }
+</script>
+<script type="module">
+  import '@editora/ui-core';
+</script>
 
-## Installation
+<ui-field label="Email" description="Work email" required>
+  <ui-input name="email" type="email" placeholder="you@company.com" clearable></ui-input>
+</ui-field>
 
-```bash
-npm install @editora/ui-core
+<ui-button variant="primary">Save</ui-button>
 ```
 
-## Quick Start (Vanilla / Any Framework)
+The examples below assume `@editora/ui-core` resolves, through a bundler or the import map above.
 
-Import once at app bootstrap to register all custom elements.
-
-```ts
-import '@editora/ui-core';
-```
-
-Then use components directly:
+The picture at the top of this page is made of these elements:
 
 ```html
-<ui-field label="Email" hint="Work email">
-  <ui-input name="email" type="email" placeholder="you@company.com" required></ui-input>
-</ui-field>
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start">
+  <div style="display: grid; gap: 16px">
+    <ui-field label="Project name" description="Shown in the sidebar">
+      <ui-input placeholder="Untitled" clearable></ui-input>
+    </ui-field>
+
+    <div style="display: flex; gap: 8px; flex-wrap: wrap">
+      <ui-button variant="primary">Save</ui-button>
+      <ui-button variant="secondary">Cancel</ui-button>
+      <ui-button variant="ghost">Skip</ui-button>
+      <ui-button variant="danger">Delete</ui-button>
+    </div>
+
+    <div style="display: flex; gap: 8px; align-items: center">
+      <ui-badge tone="success" text="Live"></ui-badge>
+      <ui-badge tone="warning" text="Review"></ui-badge>
+      <ui-badge tone="danger" text="Failed"></ui-badge>
+      <ui-avatar initials="AM" size="md"></ui-avatar>
+      <ui-avatar initials="JK" size="md"></ui-avatar>
+    </div>
+
+    <ui-alert title="Heads up" description="Your trial ends in 3 days." tone="warning"></ui-alert>
+  </div>
+
+  <div style="display: grid; gap: 16px">
+    <ui-switch checked label="Email notifications" description="A summary every Monday"></ui-switch>
+    <ui-checkbox checked>Remember me</ui-checkbox>
+    <ui-progress value="64"></ui-progress>
+    <ui-date-picker label="Start date" clearable></ui-date-picker>
+  </div>
+</div>
 
-<ui-button variant="primary">Save</ui-button>
+<script type="module">
+  import '@editora/ui-core';
+</script>
 ```
 
-## Standalone Component Imports
+## Import only what you use
 
-If you only want a specific custom element instead of registering the full catalog, import its standalone subpath:
+`import '@editora/ui-core'` registers every component. Each component also has its own entry, named after its tag
+without the `ui-` prefix, and registers just that element:
 
 ```ts
 import '@editora/ui-core/button';
@@ -57,85 +122,17 @@ import '@editora/ui-core/input';
 import '@editora/ui-core/date-picker';
 ```
 
-That registers only those elements and keeps the rest of the catalog out of the import path. The dedicated sortable entry remains:
-
-```ts
-import '@editora/ui-core/sortable';
-```
-
-The standalone wrappers live in `src/standalone` and are checked into the package. The build reads from that folder directly, so there is no generator step in the normal build or publish flow.
-
-## Framework Direct Usage
-
-`@editora/ui-core` can be used directly in Vue, Svelte, and Angular because the package ships standards-based custom elements.
-
-- Vue and Svelte work well directly for attribute/event-driven components, and can also handle richer elements like `ui-sortable` through refs.
-- Angular also works directly, but you should add `CUSTOM_ELEMENTS_SCHEMA` and use `@ViewChild` for array or object-valued properties.
-- Production wrappers are optional DX improvements, not a requirement for using `ui-core`.
-
-Examples:
-
-- Vue direct example: [`examples/ui-core-vue-direct`](https://github.com/ajaykr089/Editora/tree/main/examples/ui-core-vue-direct)
-- Svelte direct example: [`examples/ui-core-svelte-direct`](/https://github.com/ajaykr089/Editora/tree/main/examples/ui-core-svelte-direct)
-- Angular direct example: [`examples/ui-core-angular-direct`](https://github.com/ajaykr089/Editora/tree/main/examples/ui-core-angular-direct)
-
-More guidance lives in [`docs/FRAMEWORK_DIRECT_USAGE.md`](https://github.com/ajaykr089/Editora/tree/main/packages/ui-core/docs/FRAMEWORK_DIRECT_USAGE.md).
+Bundle sizes, measured with esbuild (minified ES modules):
 
-## What You Get
-
-### Core utilities
-- `createSignal`, `computed`, `effect`
-- `ElementBase`
-- `applyTheme`, `defaultTokens`
-- `showPortalFor`, `autoUpdatePosition`, portal helpers
-- `createPositioner`, `computePositionState`, `autoUpdatePositioner`, middleware helpers, virtual anchors
-- focus/overlay managers
-- `showToast`
-
-### Dialog managers (Promise API)
-- `createDialogManager`, `DialogManager`
-- `createAlertDialogManager`, `AlertDialogManager`
-
-## Component Catalog
-
-### Primitives and forms
-- `ui-button`, `ui-split-button`, `ui-input`, `ui-textarea`, `ui-label`, `ui-description`, `ui-field-error`, `ui-control-group`, `ui-fieldset`, `ui-field`, `ui-form`, `ui-pin-input`, `ui-otp-input`, `ui-inline-edit`
-- `ui-checkbox`, `ui-radio`, `ui-radio-group`, `ui-switch`, `ui-slider`, `ui-select`, `ui-combobox`
-- `ui-date-picker`, `ui-date-range-picker`, `ui-time-picker`, `ui-date-time-picker`, `ui-date-range-time-picker`
-- `ui-color-picker`
-
-### Navigation and layout
-- `ui-layout`, `ui-sidebar`, `ui-app-header`, `ui-breadcrumb`, `ui-navigation-menu`, `ui-menubar`, `ui-tabs`
-- `ui-box`, `ui-flex`, `ui-grid`, `ui-section`, `ui-container`
-- `ui-drawer`
-
-### Overlays and interactions
-- `ui-dialog`, `ui-alert-dialog`, `ui-popover`, `ui-dropdown`, `ui-menu`, `ui-context-menu`, `ui-tooltip`, `ui-hover-card`
-- `ui-command`, `ui-command-palette`, `ui-quick-actions`, `ui-selection-popup`, `ui-plugin-panel`, `ui-floating-toolbar`, `ui-toolbar`
-- `ui-portal`, `ui-presence`, `ui-slot`, `ui-visually-hidden`
-
-### Data and display
-- `ui-table`, `ui-data-table`, `ui-pagination`, `ui-empty-state`, `ui-skeleton`, `ui-alert`, `ui-badge`, `ui-transfer-list`
-- `ui-chart`, `ui-timeline`, `ui-gantt`, `ui-calendar`, `ui-progress`, `ui-scroll-area`, `ui-separator`
-- `ui-accordion`, `ui-collapsible`, `ui-stepper`, `ui-wizard`, `ui-avatar`, `ui-aspect-ratio`, `ui-block-controls`, `ui-icon`
-
-## Usage Patterns
-
-### 1. Attributes + events
-
-```html
-<ui-date-picker id="start" name="startDate" clearable></ui-date-picker>
-<script type="module">
-  import '@editora/ui-core';
+| Import | Size |
+| --- | --- |
+| `@editora/ui-core` (everything) | 2.4 MB (493 KB gzipped) |
+| `@editora/ui-core/button` | 165 KB (54 KB gzipped) |
+| `button`, `input` and `date-picker` together | 296 KB (85 KB gzipped) |
 
-  const picker = document.getElementById('start');
-  picker.addEventListener('change', (e) => {
-    console.log('new date', e.detail.value);
-  });
-</script>
-```
+## Forms
 
-### 2. Form validation and submit
+`<ui-form>` finds the `name`d controls inside it, so you do not wire up each field:
 
 ```html
 <ui-form id="profileForm" autosave guard-unsaved>
@@ -158,10 +155,26 @@ More guidance lives in [`docs/FRAMEWORK_DIRECT_USAGE.md`](https://github.com/aja
 </script>
 ```
 
-### 3. Data table + pagination
+<p align="center">
+  <img src="https://raw.githubusercontent.com/ajaykr089/Editora/main/packages/ui-core/docs/images/form.png" alt="The form after pressing Save with both required fields empty: each field is outlined in red with the message Please fill out this field." width="900">
+</p>
+
+| Event | `event.detail` |
+| --- | --- |
+| `submit` | `{ values }`: fired when the form is valid. |
+| `invalid` | `{ errors }`: the error message of each invalid field. |
+| `dirty-change` | `{ dirty }`: whether the values differ from the starting values. |
+| `autosave` | `{ values, dirty }`: with the `autosave` attribute, fired once the values have stopped changing for `autosave-delay` milliseconds (800 by default) and differ from the starting values. Save your draft in the handler. |
+
+A button with `type="submit"` or `type="reset"` inside the form submits or resets it. The form also has `submit()`,
+`validate()`, `getValues()` and `reset()` methods. `guard-unsaved` warns before the page is left with unsaved changes.
+
+## Data tables
+
+A table in `<ui-data-table>` gets sorting, selection and paging; a `<ui-pagination>` with a matching id is the pager:
 
 ```html
-<ui-data-table id="usersTable" sortable selectable page-size="10" pagination-id="usersPager">
+<ui-data-table id="usersTable" sortable selectable page-size="2" pagination-id="usersPager">
   <table>
     <thead>
       <tr>
@@ -173,16 +186,29 @@ More guidance lives in [`docs/FRAMEWORK_DIRECT_USAGE.md`](https://github.com/aja
     <tbody>
       <tr><td>1</td><td>Asha</td><td>Admin</td></tr>
       <tr><td>2</td><td>Marco</td><td>Editor</td></tr>
+      <tr><td>3</td><td>Lena</td><td>Viewer</td></tr>
+      <tr><td>4</td><td>Tariq</td><td>Editor</td></tr>
     </tbody>
   </table>
 </ui-data-table>
 
 <ui-pagination id="usersPager"></ui-pagination>
+
+<script type="module">
+  import '@editora/ui-core';
+</script>
 ```
 
-### 4. Gantt planning timeline
+<p align="center">
+  <img src="https://raw.githubusercontent.com/ajaykr089/Editora/main/packages/ui-core/docs/images/data-table.png" alt="A table with sortable ID, Name and Role columns showing two rows, and a pager that reads Showing 1-2 of 4" width="900">
+</p>
+
+For long tables, `virtualize` renders only the rows that are on screen.
 
-`ui-gantt` is a framework-agnostic planning workspace for schedules, release plans, and project roadmaps. It includes task, summary, and milestone rows; dependency links; drag/resize editing; baselines; critical tasks; split segments; keyboard navigation; and automatic row virtualization for large schedules.
+## Gantt chart
+
+`<ui-gantt>` is a planning timeline: tasks, summary rows and milestones, dependencies, baselines, critical tasks, drag
+and resize, and a toolbar for zoom, filter and sort. Give it `tasks` and `links` as JSON:
 
 ```html
 <ui-gantt id="releasePlan" zoom="week" sort="start" bar-variant="soft"></ui-gantt>
@@ -222,138 +248,183 @@ More guidance lives in [`docs/FRAMEWORK_DIRECT_USAGE.md`](https://github.com/aja
 </script>
 ```
 
-Useful attributes:
+<p align="center">
+  <img src="https://raw.githubusercontent.com/ajaykr089/Editora/main/packages/ui-core/docs/images/gantt.png" alt="A Gantt chart with a task bar for API contracts, a baseline under it, and an arrow to the QA sign-off milestone" width="900">
+</p>
 
-- `zoom`: `day`, `week`, `month`, `quarter`, or `year`
-- `sort`: `none`, `start`, `end`, `label`, or `progress`
-- `bar-variant`: `solid`, `soft`, `striped`, `outline`, or `glass`
-- `readonly`, `show-toolbar`, `show-today`, `filter`, `virtualized="false"`
+- `zoom`: `day`, `week`, `month`, `quarter` or `year`. `sort`: `none`, `start`, `end`, `label` or `progress`.
+- `bar-variant`: `solid`, `soft`, `striped`, `outline` or `glass`.
+- Dependency types: `e2s`, `s2s`, `e2e` and `s2e`.
+- Also: `readonly`, `show-toolbar`, `show-today`, `filter`, and `virtualized="false"` for small layouts (large task sets are
+  virtualized automatically).
 
-### 5. Promise dialog manager
+## Promise dialogs
 
-```ts
-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') {
-  // perform delete
-}
-```
+The dialog managers open a dialog and give you a promise for the answer:
 
-### 6. Promise alert dialog manager
-
-```ts
-import '@editora/ui-core';
-import { createAlertDialogManager } from '@editora/ui-core';
+```html
+<ui-button id="remove" variant="danger">Delete record</ui-button>
+<ui-button id="publish" variant="secondary">Publish</ui-button>
+<pre id="result"></pre>
 
-const alerts = createAlertDialogManager();
+<script type="module">
+  import { createAlertDialogManager, createDialogManager } from '@editora/ui-core';
+
+  const dialogs = createDialogManager();
+  const alerts = createAlertDialogManager();
+  const result = document.getElementById('result');
+
+  document.getElementById('remove').onclick = async () => {
+    const answer = await dialogs.confirm({
+      title: 'Delete record',
+      description: 'This action cannot be undone.',
+      submitText: 'Delete',
+      cancelText: 'Cancel',
+      mode: 'queue'
+    });
+
+    result.textContent = answer.action === 'submit' ? 'Deleted' : 'Kept';
+  };
+
+  document.getElementById('publish').onclick = async () => {
+    const answer = await alerts.confirm({
+      title: 'Publish changes?',
+      description: 'You can still unpublish later.',
+      confirmText: 'Publish',
+      cancelText: 'Not now'
+    });
+
+    result.textContent = answer.action === 'confirm' ? 'Published' : 'Not published';
+  };
+</script>
+```
 
-const confirm = await alerts.confirm({
-  title: 'Publish changes?',
-  description: 'You can still unpublish later.',
-  confirmText: 'Publish',
-  cancelText: 'Not now'
-});
+<p align="center">
+  <img src="https://raw.githubusercontent.com/ajaykr089/Editora/main/packages/ui-core/docs/images/dialog.png" alt="A confirm dialog titled Delete record with the text This action cannot be undone, and Cancel and Delete buttons, over a dimmed page" width="700">
+</p>
 
-if (confirm.action === 'confirm') {
-  // publish
-}
-```
+`createDialogManager()` is for general dialogs and `createAlertDialogManager()` for confirmations that need an answer.
+Call `destroy()` on a manager when your app shuts down, not right after opening a dialog.
 
 ## Theming
 
-Use `applyTheme` with token overrides:
+`applyTheme` writes the design tokens as CSS variables on the page, or on one element if you pass it as the second
+argument:
 
-```ts
-import { applyTheme, defaultTokens } from '@editora/ui-core';
-
-applyTheme({
-  ...defaultTokens,
-  colors: {
-    ...defaultTokens.colors,
-    primary: '#0f766e',
-    text: '#0f172a',
-    background: '#ffffff'
-  },
-  radius: '10px'
-});
+```html
+<ui-button variant="primary">Save</ui-button>
+<ui-badge tone="success" text="Live"></ui-badge>
+
+<script type="module">
+  import { applyTheme, defaultTokens } from '@editora/ui-core';
+
+  applyTheme({
+    ...defaultTokens,
+    colors: {
+      ...defaultTokens.colors,
+      primary: '#0f766e',
+      text: '#0f172a',
+      background: '#ffffff'
+    },
+    radius: '10px'
+  });
+</script>
 ```
 
-## Floating Positioning
+Apply the theme early, before the first render. To theme one part of the page, call
+`applyTheme(tokens, element)`.
 
-`@editora/ui-core` includes the shared floating engine used by menus, context menus, hover cards, floating toolbars, and picker overlays.
+## Floating positioning
 
-Use `@editora/ui-core/runtime` for framework-agnostic floating behavior:
+The positioning engine behind the menus, popovers and tooltips is available on its own, from
+`@editora/ui-core/runtime`:
 
-```ts
-import { createPositioner } from '@editora/ui-core/runtime';
-
-const handle = createPositioner({
-  anchor: trigger,
-  floating: panel,
-  placement: 'bottom-start',
-  strategy: 'fixed',
-  offset: 8,
-  flip: true,
-  shift: true,
-  fitViewport: true
-});
-
-// later
-handle.destroy();
+```html
+<ui-button id="trigger" variant="secondary">Open</ui-button>
+<div id="panel" style="padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 8px; background: white; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);">
+  A panel that stays next to its button.
+</div>
+
+<script type="module">
+  import { createPositioner } from '@editora/ui-core/runtime';
+
+  const trigger = document.getElementById('trigger');
+  const panel = document.getElementById('panel');
+
+  const handle = createPositioner({
+    anchor: trigger,
+    floating: panel,
+    placement: 'bottom-start',
+    strategy: 'fixed',
+    offset: 8,
+    flip: true,
+    shift: true,
+    fitViewport: true
+  });
+
+  // later: handle.destroy();
+</script>
 ```
 
-You can also use:
+Also exported: `computePositionState()` for one-off coordinates, `autoUpdatePositioner()` for observer-driven updates,
+`createVirtualPoint()`, `createVirtualRect()` and `createVirtualRange()` for virtual anchors, and
+`detectPositionerOverflow()` for diagnostics. See the
+[floating guide](https://github.com/ajaykr089/Editora/blob/main/packages/ui-core/docs/FLOATING_USAGE.md).
 
-- `computePositionState()` for one-shot coordinate calculation
-- `autoUpdatePositioner()` for observer-driven updates
-- `createVirtualPoint()`, `createVirtualRect()`, `createVirtualRange()` for virtual anchors
-- `detectPositionerOverflow()` for diagnostics and custom middleware
+## Components
 
-Full guide:
+Each component is a custom element named `ui-*`; the standalone entry is the name without the prefix.
 
-- `docs/FLOATING_USAGE.md`
+**Forms and inputs:**
+`ui-button`, `ui-split-button`, `ui-input`, `ui-textarea`, `ui-label`, `ui-description`, `ui-field-error`, `ui-control-group`, `ui-fieldset`, `ui-field`, `ui-form`,
+`ui-checkbox`, `ui-radio`, `ui-radio-group`, `ui-switch`, `ui-slider`, `ui-select`, `ui-combobox`,
+`ui-date-picker`, `ui-date-range-picker`, `ui-time-picker`, `ui-date-time-picker`, `ui-date-range-time-picker`, `ui-color-picker`
 
-## Docs
+**Navigation and layout:**
+`ui-layout`, `ui-sidebar`, `ui-app-header`, `ui-breadcrumb`, `ui-navigation-menu`, `ui-menubar`, `ui-tabs`, `ui-drawer`,
+`ui-box`, `ui-flex`, `ui-grid`, `ui-section`, `ui-container`
 
-- `docs/FRAMEWORK_DIRECT_USAGE.md` for Vue, Svelte, and Angular direct-use guidance
-- `docs/ATTRIBUTE_RENDER_MATRIX.md` for component render strategy coverage
-- `docs/FLOATING_USAGE.md` for first-party floating primitives and Floating UI-style usage
-- `docs/PRIMITIVE_GAP_MATRIX.md` for the missing primitive roadmap
-- `docs/PRIMITIVE_IMPLEMENTATION_PLAN.md` for proposed APIs and rollout order
+**Overlays and interaction:**
+`ui-dialog`, `ui-alert-dialog`, `ui-popover`, `ui-dropdown`, `ui-menu`, `ui-context-menu`, `ui-tooltip`, `ui-hover-card`,
+`ui-command`, `ui-command-palette`, `ui-quick-actions`, `ui-selection-popup`, `ui-plugin-panel`, `ui-floating-toolbar`, `ui-toolbar`,
+`ui-portal`, `ui-presence`, `ui-slot`, `ui-visually-hidden`
 
-## Developer Notes
+**Data and display:**
+`ui-table`, `ui-data-table`, `ui-pagination`, `ui-empty-state`, `ui-skeleton`, `ui-alert`, `ui-badge`, `ui-transfer-list`,
+`ui-chart`, `ui-timeline`, `ui-gantt`, `ui-calendar`, `ui-progress`, `ui-scroll-area`, `ui-separator`,
+`ui-accordion`, `ui-collapsible`, `ui-stepper`, `ui-wizard`, `ui-avatar`, `ui-aspect-ratio`, `ui-block-controls`, `ui-icon`
 
-- This package is `sideEffects: true` because component registration happens via module import.
-- Use one global import (`import '@editora/ui-core'`) in app entry.
-- Events are dispatched as `CustomEvent` with `detail`, usually `bubbles: true` and `composed: true`.
-- For best performance, keep long tables virtualized (`ui-data-table[virtualize]`) and avoid unnecessary DOM churn in cell renderers.
+Besides these, the package exports `createSignal`, `computed` and `effect` (small reactive primitives), `ElementBase` (the
+base class of the components), the portal, focus and overlay managers, and `showToast`.
 
-## Development
+## Other frameworks
 
-```bash
-cd packages/ui-core
-npm run build:tsc
-npm test
-```
+The elements are standard custom elements, so Vue, Svelte and Angular can use them directly. Vue and Svelte work well
+with attributes and events; in Angular, add `CUSTOM_ELEMENTS_SCHEMA` and use `@ViewChild` for array and object values.
+Working examples:
+[Vue](https://github.com/ajaykr089/Editora/tree/main/examples/ui-core-vue-direct),
+[Svelte](https://github.com/ajaykr089/Editora/tree/main/examples/ui-core-svelte-direct) and
+[Angular](https://github.com/ajaykr089/Editora/tree/main/examples/ui-core-angular-direct), and the
+[guide](https://github.com/ajaykr089/Editora/blob/main/packages/ui-core/docs/FRAMEWORK_DIRECT_USAGE.md). For React,
+use [`@editora/ui-react`](https://www.npmjs.com/package/@editora/ui-react).
+
+## Good to know
+
+- Components register when their module is imported, so the package is marked `sideEffects: true`. Import it before the
+  first render.
+- Events are `CustomEvent`s with a `detail`; they usually bubble and cross shadow boundaries.
+- If a component renders as an empty tag, `@editora/ui-core` (or its standalone entry) was not imported before it.
+- If the styles look unthemed, apply the tokens early with `applyTheme(...)`.
+
+## The rest of the family
 
-Full `npm run build` also runs Vite bundle output.
+| Package | |
+| --- | --- |
+| [`@editora/ui-react`](https://www.npmjs.com/package/@editora/ui-react) | These components as React components. |
+| [`@editora/ui-sortable`](https://www.npmjs.com/package/@editora/ui-sortable) | Sortable lists and boards. |
+| [`@editora/icons`](https://www.npmjs.com/package/@editora/icons) | The icon set the components use. |
+| [`@editora/toast`](https://www.npmjs.com/package/@editora/toast) | Toast notifications. |
 
-## Troubleshooting
+## License
 
-- Components not rendering:
-  - Ensure `@editora/ui-core` is imported before first render.
-- Styles look unthemed:
-  - Apply tokens early in bootstrap with `applyTheme(...)`.
-- Dialog promises never resolving:
-  - Ensure you call `destroy()` on manager during app teardown only, not immediately after open.
+MIT © [Ajay Kumar](https://github.com/ajaykr089)

package/dist/{ElementBase-YlTLMsGk.mjs → ElementBase-BeZT54Hj.mjs}

@@ -1,4 +1,5 @@
-class n extends HTMLElement {
+import { D as s } from "./domElement-ZlSGVP0l.mjs";
+class d extends s {
   constructor() {
     super(), this._isRendering = !1, this._renderRequested = !1, this._renderScheduled = !1, this._hasRendered = !1, this._visibilityGuardApplied = !1, this._lastRenderedContent = null, this.root = this.attachShadow({ mode: "open" });
   }
@@ -75,5 +76,5 @@ class n extends HTMLElement {
   }
 }
 export {
-  n as E
+  d as E
 };

package/dist/ElementBase-DxbvhLJs.js

@@ -0,0 +1 @@
+"use strict";const s=require("./domElement-DazSZBjV.js");class n extends s.DOMElement{constructor(){super(),this._isRendering=!1,this._renderRequested=!1,this._renderScheduled=!1,this._hasRendered=!1,this._visibilityGuardApplied=!1,this._lastRenderedContent=null,this.root=this.attachShadow({mode:"open"})}connectedCallback(){if(!this._hasRendered&&!this._visibilityGuardApplied&&(this.style.getPropertyValue("visibility").trim()||(this.style.setProperty("visibility","hidden"),this._visibilityGuardApplied=!0)),!this._hasRendered){this._requestRender();return}this._scheduleRender()}disconnectedCallback(){try{if(typeof this.close=="function")try{this.close()}catch{}if(typeof this._cleanup=="function"){try{this._cleanup()}catch{}this._cleanup=void 0}if(typeof this.__menuCleanup=="function"){try{this.__menuCleanup()}catch{}this.__menuCleanup=null}const e=this._portalEl;if(e&&e.parentElement)try{e.parentElement.removeChild(e)}catch{}}catch{}}attributeChangedCallback(e,t,i){t!==i&&this.isConnected&&(e&&!this.shouldRenderOnAttributeChange(e,t??null,i??null)||this._scheduleRender())}shouldRenderOnAttributeChange(e,t,i){return!0}setContent(e,t){!t?.force&&this._lastRenderedContent===e||(this.root.innerHTML=e,this._lastRenderedContent=e)}invalidateContentCache(){this._lastRenderedContent=null}requestRender(){this._scheduleRender()}_scheduleRender(){this._renderScheduled||(this._renderScheduled=!0,queueMicrotask(()=>{this._renderScheduled=!1,this._requestRender()}))}_requestRender(){if(this._isRendering){this._renderRequested=!0;return}this._isRendering=!0;try{this.render()}finally{this._isRendering=!1,this._hasRendered||(this._hasRendered=!0,this._visibilityGuardApplied&&(this.style.removeProperty("visibility"),this._visibilityGuardApplied=!1))}this._renderRequested&&(this._renderRequested=!1,this._scheduleRender())}}exports.ElementBase=n;

package/dist/ElementBase.d.ts

@@ -1,4 +1,5 @@
-export declare abstract class ElementBase extends HTMLElement {
+import { DOMElement } from './domElement';
+export declare abstract class ElementBase extends DOMElement {
     protected root: ShadowRoot;
     private _isRendering;
     private _renderRequested;

package/dist/ElementBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementBase.d.ts","sourceRoot":"","sources":["../src/ElementBase.ts"],"names":[],"mappings":"AAAA,8BAAsB,WAAY,SAAQ,WAAW;IACnD,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,uBAAuB,CAAS;IACxC,OAAO,CAAC,oBAAoB,CAAuB;;IAOnD,iBAAiB;IAejB,oBAAoB;IA2BpB,wBAAwB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAS1F,SAAS,CAAC,6BAA6B,CACrC,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,SAAS,EAAE,MAAM,GAAG,IAAI,GACvB,OAAO;IAIV,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE;IAOhE,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAIxC,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAwBtB,SAAS,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI;CAClC"}
+{"version":3,"file":"ElementBase.d.ts","sourceRoot":"","sources":["../src/ElementBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,8BAAsB,WAAY,SAAQ,UAAU;IAClD,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,uBAAuB,CAAS;IACxC,OAAO,CAAC,oBAAoB,CAAuB;;IAOnD,iBAAiB;IAejB,oBAAoB;IA2BpB,wBAAwB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAS1F,SAAS,CAAC,6BAA6B,CACrC,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,SAAS,EAAE,MAAM,GAAG,IAAI,GACvB,OAAO;IAIV,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE;IAOhE,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAIxC,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAwBtB,SAAS,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI;CAClC"}

package/dist/__tests__/setup.d.ts

@@ -3,6 +3,4 @@ declare class ResizeObserverStub {
     unobserve(): void;
     disconnect(): void;
 }
-declare class PointerEventStub extends MouseEvent {
-}
 //# sourceMappingURL=setup.d.ts.map