Files
Ekklesia/packages/ui/src/index.ts
T
ekklesiaandClaude Opus 5.5 5a7d44781b
CI / verify (pull_request) Successful in 1m8s
CI / infrastructure-smoke (pull_request) Successful in 34s
CI / package-release (pull_request) Successful in 51s
CI / migration-smoke (pull_request) Successful in 2m27s
CI / image-build (pull_request) Successful in 1m6s
CI / deploy-smoke (same-origin) (pull_request) Successful in 50s
CI / package-publication (pull_request) Successful in 56s
CI / deploy-smoke (split) (pull_request) Successful in 2m44s
feat(ui): shared confirmation, toasts, error, skeleton, and Back primitives
Stage 1's later screens and modules need the interactions DESIGN.md
fixes once for the product (ADR 0059). @ekklesia/ui gains them,
additively:

- ConfirmationDialog: simple, destructive, or typed-phrase
  confirmation, with severity chosen by the caller. Destructive is
  marked by symbol and frame, not colour alone, and starts on Cancel.
  A required phrase must match exactly (forgiving only surrounding
  whitespace and NFC). While busy, Cancel and Escape are disabled.
- ToastProvider / useToasts: a top-center toast system per React tree,
  never a package singleton (ADR 0040). Live regions are mounted
  before any toast arrives; errors are assertive and persist until
  dismissed; routine toasts last at least three seconds and longer for
  longer text. Timers pause on hover and focus; duplicates refresh;
  errors are never displaced; every timer is cleared on unmount.
- ErrorState: recovery actions, plus collapsed technical details and a
  reference, rendered as bounded inert text.
- Skeleton / SkeletonGroup: an aria-busy region labelled once, with
  every animation stopped under prefers-reduced-motion.
- PageHeader `back` (link or button) above the page's one h1.
- Dialog: the focus trap ADR 0039 deferred, plus focus restoration and
  an accessible description. Escape is now handled on the dialog
  itself, so a drawer it was opened from stays open.

The shell validates Back targets (parseReturnTarget, dashboardBack):
only a canonical Dashboard page on this origin is accepted, otherwise
Back goes to the page's parent. It never uses history.back().

Biome's scope-aware suspicious/noAlert is now an error in the root
biome.json. tests/native-dialogs.test.ts proves it catches real
dialogs and not lookalikes, and scans for the forms the rule misses.
It supersedes the shell-only regex test.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-14 18:24:07 -05:00

101 lines
2.4 KiB
TypeScript

/**
* `@ekklesia/ui` — the foundational Ekklesia elements every Ekklesia screen is built from, whether
* that screen belongs to the Dashboard shell, to a module's own management UI, or to a renderer one
* module contributes to another.
*
* Every element draws its colour, type, spacing, radius, shadow, and interaction state from
* `@ekklesia/design-tokens`. There is no hardcoded brand value anywhere in the package, which is
* what makes a future theme editor possible rather than aspirational.
*
* This is deliberately **not** a large component catalogue, a design-system site, a brand builder,
* or a theme editor. It is the set a real module dashboard cannot be built without, and nothing
* more; a component earns its place here when two independent consumers need the same one.
*/
export { classNames } from "./class-names.js";
export {
Button,
type ButtonProps,
Checkbox,
type CheckboxProps,
type EkklesiaButtonVariant,
type EkklesiaControlSize,
Field,
type FieldProps,
IconButton,
type IconButtonProps,
Select,
type SelectProps,
TextInput,
type TextInputProps,
} from "./controls.js";
export {
List,
type ListItemProps,
ListItem,
type ListProps,
Table,
TableBody,
TableCell,
type TableCellProps,
TableHead,
type TableProps,
TableRow,
type TableRowProps,
type TableSectionProps,
} from "./data.js";
export {
ConfirmationDialog,
type ConfirmationDialogProps,
type ConfirmationTone,
} from "./confirmation.js";
export { EkklesiaUiStyles } from "./EkklesiaUiStyles.js";
export {
Badge,
type BadgeProps,
type EkklesiaStatusTone,
EmptyState,
type EmptyStateProps,
ErrorState,
type ErrorStateProps,
InlineNotice,
type InlineNoticeProps,
LoadingState,
type LoadingStateProps,
Skeleton,
SkeletonGroup,
type SkeletonGroupProps,
type SkeletonProps,
Toast,
type ToastProps,
ToastStack,
type ToastStackProps,
} from "./feedback.js";
export {
EKKLESIA_UI_STYLE_ATTRIBUTE,
EKKLESIA_UI_STYLESHEET,
type EkklesiaUiStyleRoot,
installEkklesiaUiStyles,
} from "./styles.js";
export {
ActionBar,
type ActionBarProps,
Dialog,
type DialogProps,
Panel,
type PanelProps,
PageHeader,
type PageHeaderBack,
type PageHeaderProps,
type TabDefinition,
Tabs,
type TabsProps,
} from "./surfaces.js";
export {
type ToastApi,
type ToastOptions,
ToastProvider,
type ToastProviderProps,
type ToastTone,
useToasts,
} from "./toasts.js";