Skip to content

@middag-io/react

0.20.0

Minor Changes

  • 1f1f618 Thanks @michaelmeneses! - Dev harness onboarding restored: npm run dev now launches the react-demo host-sim (was the library config), and the mock registers the PRO blocks (form_panel, chart_panel, ...).

    Republishes react-pro and react-demo at 0.20.0 (version-locked to the lib).

0.19.0

Minor Changes

  • #53 58b341b Thanks @michaelmeneses! - Contracts: align with middag-php-ui (canonical wire shape, single source of truth).

    The TypeScript types and zod schema in src/contracts/ are now generated from the middag-php-ui value objects via JSON Schema (scripts/gen-contracts.mjssrc/contracts/generated/), with a hand-authored premium overlay (extensions.ts). PHP is the canonical source; the wire schemas are committed to docs/public/schemas/{page-contract,fragment}.json and bundled by the MCP server.

    Breaking (pre-1.0): the action contract is now canonical and has no legacy fallbacks.

    • Action carries a discriminated target (link | route | request) instead of flat href/method, an i18n-aware label (string | Translatable), a required 8-value intent, and a premium display (inline | overflow) — the new home of intent: "menu".
    • ActionConfirmation extends the canonical Confirmation (message, variant).
    • PageMeta, BlockDescriptor, LayoutDescriptor, PageResources, PageContract, Breadcrumb are composed from the generated wire types plus the React premium overlay.

    Hosts (Moodle/WordPress) must migrate fixtures from the flat action shape to target.

0.18.0

Minor Changes

  • 9f40d8f Thanks @michaelmeneses! - Export base partials as public API + InspectorResponse type

    New exports (consumers import from @middag-io/react directly):

    • All base/partials/ components: ActionBar, ConfirmationDialog, DataTable (+ types + cell renderers), DetailSection, EmptyPlaceholder, FilterBar, FormSection, LogViewer, MarkdownContent, StatRow, StatusBar, StatusIndicator, StepIndicator, TimelineList
    • InspectorResponse type (from InspectorProvider / useInspector)

    Barrel src/base/partials/index.ts added — future partials only need a single line there; src/index.ts stays stable.

  • 9f40d8f Thanks @michaelmeneses! - page-contract-data.ts + scaffold AMD support + PRO licensing pipeline

    • contracts/page-contract-data.ts: auto-generated TypeScript interfaces from PHP Data classes (B-096)
    • create-middag-ui scaffold: complete Moodle AMD build support (emit-build.mjs, vite-plugin-moodle-amd.ts template, PRO licensing pipeline)

0.17.0

Minor Changes

  • c742fcd - feat: add useLazyTabs hook and move scaffold adapters to mock/
    • New useLazyTabs(defaultTab) hook for lazy-loading tab data via Inertia partial reloads — tracks loaded/loading/error state per tab with retryTab() support
    • Scaffold generator (create-middag-ui) now generates Inertia mock adapters in mock/adapters/ instead of src/adapters/, enforcing the src/ = production, mock/ = dev-only convention
    • New @mock/ Vite alias in scaffolded projects for clean imports from mock directory

0.16.0

Minor Changes

  • 060ad0b Thanks @michaelmeneses! - Export registerDefaultCells, registerDefaultFields, registerDefaultIcons from barrel

    All 5 register categories from register-defaults.ts are now individually importable, enabling selective registration without calling registerDefaults() (which pulls all 19 blocks + lazy deps). Consumers can mix: registerBlock() for specific blocks + registerDefaultCells() + registerDefaultFields() + registerDefaultIcons().

    Also includes: TimestampCell now accepts ISO 8601 date strings via Date.parse() fallback (previously only accepted unix timestamps, ISO strings rendered as blank).

0.15.6

Patch Changes

  • ac3ba28 Thanks @michaelmeneses! - fix(table): TimestampCell accepts ISO 8601 strings in addition to unix timestamps fix(mock): add extends constraint to usePage generic for @inertiajs/react compat
    • TimestampCell now parses both ISO 8601 date strings and unix epoch numbers
    • usePage<T> generic in mock Inertia adapter uses T extends Record<string, unknown> matching the real @inertiajs/react signature for type compatibility
    • PRO scaffold adapter also updated to re-export with correct generic constraint

0.15.5

Patch Changes

  • 62f187e Thanks @michaelmeneses! - fix(shell): defensive guard for undefined navigation in SidebarNav

    Prevents crash when navigation prop is undefined or uses legacy format.

0.15.4

Patch Changes

  • 3599a76 Thanks @michaelmeneses! - fix(create-middag-ui): PRO adapters re-export from lib mock for shared React context

    PRO scaffold was generating FREE adapters with own React context, causing usePage() to return empty data. Now generates thin re-exports from @middag-io/react/mock.

0.15.3

Patch Changes

  • #44 6c6a68c Thanks @michaelmeneses! - fix: export DropdownMenu from barrel, externalize ReUI in dist-mock, fix navigation template
    • Export DropdownMenu* from barrel so dist-mock shares React context with dist-lib
    • Revert ReUI bundling in dist-mock — externalize all @/ to barrel
    • Fix navigation template: { sections } → { tree, footer } matching NavigationTreePayload

0.15.2

Patch Changes

  • #42 a9ddc43 Thanks @michaelmeneses! - fix(mock-lib): bundle ReUI primitives into dist-mock instead of externalizing

    ReUI source files (dropdown-menu, sidebar, tooltip, sonner) have internal @/ imports that consumers cannot resolve. Bundling them into dist-mock eliminates the dependency on deep-import source resolution in consumer projects.

0.15.1

Patch Changes

  • #40 7dd2912 Thanks @michaelmeneses! - fix(mock-lib): externalize ReUI components as deep imports in dist-mock build

    MockProductShell's DropdownMenu, Sidebar, Tooltip, Sonner imports now resolve to @middag-io/react/reui/* instead of the main barrel which doesn't export them.

0.15.0

Minor Changes

  • #36 0fc47c4 Thanks @michaelmeneses! - fix(create-middag-ui): add --yes flag, fix version drift, align mock barrel exports
    • Add --yes / -y flag to skip all interactive prompts (defaults: ui/, public registry)
    • Add --github flag for non-interactive PRO path
    • Fix getLibVersion() to read from monorepo root instead of CLI package version
    • Align mock/index.ts with mock/index-lib.ts — export setMockNavigate, router, usePage, Head, Link

0.14.0

Minor Changes

  • c77929d - Centralize test suite in tests/ and add block render + integration tests.

    Test centralization

    • Move all __tests__/ from src/ and mock/ into tests/ at the project root
    • Eliminate 10 scattered __tests__/ directories
    • Single vitest include pattern: tests/**/*.test.{ts,tsx}

    Block render tests (19 blocks)

    • Render smoke tests for all 13 standard blocks: metric_card, dense_table, empty_state, detail_panel, form_panel, card_grid, status_strip, tabbed_panel, link_list, action_grid, activity_timeline, markdown_panel, workflow_progress
    • Render smoke tests for all 6 lazy-loaded blocks: chart_panel, kanban_board, flow_editor, form_builder, condition_tree, sentence_builder
    • Each test verifies: renders without crash, key content visible, edge cases (empty data, missing optionals)

    Integration tests (9 tests)

    • Full pipeline: PageContract JSON → registerDefaults → ContractPage → Shell → Layout → Blocks
    • Covers: dashboard layout, stack layout, sidebar layout, unknown block/shell/layout fallbacks, invalid contract validation, multiple blocks per region

    Shared test infrastructure

    • tests/setup.tsx — common mocks (Inertia, matchMedia, ResizeObserver, IntersectionObserver)
    • tests/helpers.ts — mock data factories for all 19 block types

    Total: 241 → 304 tests, 0 → 19/19 blocks covered, 36 test files, all passing.

0.13.0

Minor Changes

  • fb7266d - ### @middag-io/react

    SOLID architecture overhaul, theme system, 6 registries, and MCP server.

    Architecture

    • Consolidate shells (4 → 2: product, immersive) and layouts (6 → 4: stack, sidebar, dashboard, wizard) with BlockRegion
    • SOLID overhaul: action hierarchy (ActionBase → ExecutableAction → ConditionalAction), FormFieldNode discriminated union, storage scoping
    • 6 registries: shell, layout, block, field, icon, cell — all populated by registerDefaults()
    • Lazy-load heavy fields (date, phone, document) and 6 blocks (chart_panel, kanban_board, flow_editor, form_builder, condition_tree, sentence_builder) — main bundle -59%

    New features

    • Theme system: 4 built-in themes (classic, enterprise, soft, midnight) with OKLCH tokens
    • Form refactor: React Hook Form + Zod validation, 28 field types
    • Enterprise interaction patterns: sidebar, inspector, header meta, Jira-like filter tabs, HostSlot
    • Icon registry (50+ icons) and cell registry (8 renderer types)
    • ReUI adoption: 6 components (file-upload, input-group, rating, chart, kanban, date-range)
    • 19 blocks total (12 standard + 7 lazy-loaded), 9 JSON schemas

    MCP server

    • New package: packages/mcp-middag-ui/ — Cloudflare Worker at ui-mcp.middag.io
    • 9 schema resources, 7 tools, 6 prompts for AI-driven contract generation
    • AI contract manifest (ai-contract-manifest.json) with validation rules and anti-patterns

    Docs

    • Reorganize CLAUDE.md (668 → 188 lines), migrate reference content to docs/
    • Sync schemas with src/ (17 → 19 blocks, 26 → 28 fields)

    create-middag-ui

    Audit and align scaffold with current lib state.

    • Fix connectors page: template "split" → "sidebar" (split was never a built-in layout)
    • Fix register-free.ts: 5 → 9 blocks (add card_grid, status_strip, tabbed_panel, link_list)
    • Fix register-pro.ts: 9 → 13 blocks (all standard barrel exports)
    • Both registers: add WizardLayout and ImmersiveShell
    • Fix PRO main.tsx: dev mode now calls lib registerDefaults() (19 blocks)
    • Fix tsconfig template: include ["src", "mock"] for PRO cross-directory imports
    • Add route-helper-custom.ts template (was missing)
    • Fix PRO main.tsx: dev mode now calls lib registerDefaults() (19 blocks)
    • Fix tsconfig template: include ["src", "mock"] for PRO cross-directory imports
    • Add route-helper-custom.ts template (was missing)

0.12.0

Minor Changes

  • 0782475 Thanks @michaelmeneses! - Add scaffold PRO/FREE templates, EntityRoutes, PageContract enhancements
    • Scaffold: PRO/FREE split with shared templates (page-resolver, register, demo-page, route-helper-wp)
    • EntityRoutes provider for cross-page entity link resolution
    • DenseTableBlock: link_group column, entity-aware columns, rich_status variant
    • FormField: phone, document, currency, color, slug, tags field types
    • SidebarNav: drilldown navigation, entity-type icon resolution, tree payload support
    • ContractPage: Zod validation, overlay screen support
    • i18n: new block/field translation keys

0.11.0

Minor Changes

  • 6d60019 Thanks @michaelmeneses! - Add HostProductShell, @layer host compatibility, and scaffold host templates
    • HostProductShell: Production-ready offcanvas shell with collapse toggle and AppearanceToggle. No mock-only features. Use registerShell("product", HostProductShell) in host entry points.
    • @layer host compat: Unlayered CSS in tailwind.css ensures sidebar visibility when host platform CSS (WordPress/Moodle) overrides Tailwind @layer utilities.
    • create-middag-ui scaffold: Per-host entry points (entry-wordpress.tsx, entry-moodle.tsx, entry-custom.tsx), Vite build configs (IIFE for WP/Moodle, ESM for Custom), and host-specific theme.css sections.
    • Host detection: Ancestor directory walk (5 levels) for wp-config.php. Moodle plugin detection via $plugin->component in version.php. Moodle root detection via $version + $release.
    • dev-release.sh: Auto-resolves GITHUB_TOKEN from gh CLI when not set.

0.10.3

Patch Changes

  • afedfdc Thanks @michaelmeneses! - Fix mock barrel: correct router stub, export Inertia adapters, add type declarations
    • Fix router exclusion path (extension mismatch) reducing bundle from 626KB to 327KB
    • Export usePage/Head/Link/router from mock barrel to share MockPageContext
    • Add mock/index-lib.d.ts for consumer TypeScript compatibility
    • Add eslint/prettier configs and format scripts to scaffold
    • Generate adapter shims in PRO scaffold instead of raw TS aliases

0.10.2

Patch Changes

  • 6c006e1 Thanks @michaelmeneses! - Remove HostAdapter from create-middag-ui PRO scaffold to fix duplicate headers

0.10.1

Patch Changes

  • #27 fb9c6a7 Thanks @michaelmeneses! - Fix mock lib build leaking absolute CI runner paths into dist-mock/middag-mock.js

    Excluded files (mock/pages/, mock/router.tsx) were externalized with their resolved absolute path, causing consumer resolution failures. Now generates empty stub modules via load() hook instead.

0.10.0

Minor Changes

  • #25 266d082 Thanks @michaelmeneses! - Pre-build mock barrel as ESM for consumer projects

    The @middag-io/react/mock export now resolves to a pre-built ESM bundle (dist-mock/middag-mock.js) instead of raw TypeScript source. Consumer projects no longer need to configure @/ or @mock Vite aliases.

    New exports: PageFilterTabs, CommandPalette, HelpProvider, HelpPanel, useHelp, InlineInspector, InspectorProvider, useInspector, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, lottie, ptBR.

0.9.0

Minor Changes

  • #23 af2d403 Thanks @michaelmeneses! - create-middag-ui: PRO/FREE scaffold paths, collapse-aware SidebarNav, dynamic host header detection

    create-middag-ui CLI:

    • Two scaffold paths: PRO (GitHub Packages, MockProductShell, mock barrel) and FREE (npm public, DevShell, local adapters)
    • Both use BrowserRouter (no hash routing)
    • PRO generates NavigateBridge for Inertia mock router integration
    • FREE generates PageProvider context + local adapters

    SidebarNav collapse-aware:

    • Icon-only collapsed mode via collapsible="icon" in ProductShell
    • Sidebar sections collapse to icon representation
    • Group labels hidden in collapsed state, tooltips on hover

    Dynamic --host-header-height:

    • initHostHeaderHeight() detects real host header (Moodle Boost, WordPress admin bar) at runtime
    • Sidebar uses var(--host-header-height, 0px) for correct positioning below host chrome
    • ProductShell calls initHostHeaderHeight() on mount
    • MockProductShell/DevShell set height manually for dev

    New exports:

    • initHostHeaderHeight, setHostHeaderHeight, getHostHeaderHeight from @middag-io/react

    Docs:

    • Schema JSONs now published to /schemas/ on CF Pages (previously missing from deploy)

0.8.0

Minor Changes

  • 0de62f9 - i18n: full coverage + date/time/currency formatting + PT-BR locale + 6 new form fields

    i18n Provider:

    • Added formatDate, formatDateTime, formatRelative, formatNumber, formatCurrency to useTranslation()
    • Added locale to context (reads from Inertia shared props)
    • Uses Intl.DateTimeFormat / Intl.NumberFormat with locale-aware formatting
    • Currency defaults to BRL

    i18n Coverage:

    • Migrated 15+ hardcoded PT-BR strings to t() across DataTable, FilterBar, DetailSection, DetailPanel, FormBuilder, MarkdownContent, SentenceBuilder, SelectField, FormField
    • SentenceBuilder operators and audience text use template strings for translator-friendly reordering
    • GROUP_LABELS in sidebar moved to i18n keys
    • NavBadge aria-labels moved to i18n keys
    • Official PT-BR locale file at src/app/providers/locales/pt-BR.ts, exported as localePtBR

    Sidebar Quick Find:

    • Search expands parent nodes to reveal matching sub-items (isSearching prop)
    • Search in drilldown mode searches full tree and hides drilldown header temporarily
    • Quick find hidden during drilldown navigation

    NavErrorBoundary:

    • Fallback uses hardcoded strings instead of useTranslation() (error boundary must not depend on providers)

    New Form Fields:

    • PhoneField — international phone input with country flags (react-phone-number-input, E.164)
    • DocumentField — masked input with validation (CPF, CNPJ, EIN, VAT ID)
    • CurrencyField — locale-aware currency formatting via formatCurrency
    • ColorField — native color picker with hex input
    • SlugField — auto-generates URL-friendly slugs from source value
    • TagsField — chip-based tag input with keyboard support

    Mock:

    • MockApp wraps I18nProvider with base MockPageProvider (theme.strings available at mount)
    • PT-BR translations active when locale is pt_BR
    • Lottie catalog at /lotties route with play/pause, search, copy path

    Docs:

    • Theme schema (JSON Schema), defaults, blocks schema, components schema
    • Schema manifest for AI-driven theme generation
    • Lottie animation reference with usage examples

    Scaffold (create-middag-ui):

    • Added theme.strings and scope to mock shared props for v0.7+ compat

0.7.2

Patch Changes

  • #20 559b237 Thanks @michaelmeneses! - Fix create-middag-ui scaffold: wrap App with I18nProvider

    Since v0.7.0 all lib components use useTranslation() which requires I18nProvider in the component tree. The scaffolded app.tsx was missing it, causing a crash on first render.

0.7.1

Patch Changes

0.7.0

Minor Changes

  • d694cd5 - Extensibility, i18n, a11y, error telemetry, and DX improvements

    i18n: All ~95 hardcoded strings in src/base/ now use useTranslation().t() with middag.ui.* keys. LIB_UI_DEFAULTS provides EN defaults. Consumers override via Inertia theme.strings or asyncResolver. PT-BR translations in mock locales.

    Extensibility: Shell and LayoutTemplate types opened from fixed enum to extensible string. Consumers register custom shells/layouts and send from PHP. Zod schema accepts any string (no whitelist).

    Providers: AuthProvider, FlashProvider, ScopeProvider, ProgressProvider now exported from barrel. SidebarProvider and useSidebar also exported for consumer shells.

    ErrorReporter: Pluggable error telemetry provider. Inject Sentry, New Relic, or any reporter. NavErrorBoundary reports through it. Default: console.error.

    Mock SPA: mock/ directory and ./mock entry point added to package.json. MockApp, HostAdapter, MockI18nProvider, MockRouter exported. GitHub Packages only (npm public strips mock/).

    a11y: Skip-to-content links in AdminShell/ProductShell. DataTable aria-sort on sortable columns, role=grid. EmptyState role=status. FormPanel role=form. DetailPanel role=region. All a11y strings go through i18n.

    Docs: Complete theme token reference (60+ CSS properties). CLI upgrade codemod framework.

    Misc: Fix block count test 16->17 (WorkflowProgressBlock). Fix 2 exhaustive-deps lint warnings.

0.6.0

Minor Changes

  • d3ac7b9 - feat: selective registration, lazy blocks, WorkflowProgressBlock
    • Export individual shells, layouts, and 13 standard blocks from barrel for selective registration
    • Add ./reui/* and ./blocks/* package.json exports for deep imports
    • Add LazyBlock wrapper for deferred block data via Inertia partial reload
    • Add WorkflowProgressBlock (horizontal stepper with past/current/future states)
    • IIFE consumers (WordPress) can now register only the blocks they need

0.5.0

Minor Changes

  • e2c2361 Thanks @michaelmeneses! - Pre-v1.0 engineering review: expanded API surface, runtime validation, lazy blocks
    • API surface: Export 100+ types, register*/resolve* functions, block data types, navigation tree model, connector types
    • Validation: Zod runtime validation for PageContract — catches malformed contracts before rendering
    • Performance: Lazy-load 4 heavy blocks via React.lazy (main bundle -26%, 788K → 578K)
    • DX: tsc-alias fixes .d.ts path aliases — consumer TypeScript compilation works correctly
    • Safety: Stack fallback for unknown layouts, Suspense boundary for lazy blocks, Tailwind error styling
    • Tests: 27 unit tests for core src/ code + pack acceptance test
    • Types: PageResources.auth typed as SharedPropsAuth, ContractPageProps deduplicated
    • Docs: Block catalog updated to 16 types, custom blocks and validation examples in README

0.4.2

Patch Changes

  • d1044f0 Thanks @michaelmeneses! - feat(create-middag-ui): redesign scaffold with src/ structure, progressive examples, and theme customization
    • Replace mock/ directory with unified src/ structure (pages/, adapters/, blocks/, components/)
    • Add 3 progressive page contract examples: dashboard (starter), connectors (intermediate), settings (advanced)
    • Add hash-based page router (src/app.tsx) with sidebar navigation between examples
    • Add src/theme.css with token override guide, .theme-ocean example theme, and custom styles section
    • Move index.html to project root (standard Vite), rename vite.mock.config.ts to vite.config.ts
    • Add documentation comments to all scaffolded files (dev-only markers, CSS cascade order, alias explanations)
    • Simplify package.json scripts: npm run dev instead of npm run dev:mock
    • Remove @tailwindcss/vite from consumer scaffold (CSS pre-compiled in style.css)

0.4.1

Patch Changes

  • 9f04cf3 Thanks @michaelmeneses! - fix: remove circular CSS variable in ProductShell/AdminShell, add sidebar CSS safelist

    ProductShell and AdminShell set --sidebar-width: var(--sidebar-width) as inline style, creating a circular reference that resolved to nothing. Content rendered behind the sidebar. Removed the self-referencing style prop — SidebarProvider sets correct defaults internally.

    Also added sidebar-safelist.txt and @source directives so Tailwind v4 generates all dynamic sidebar classes (collapsible variants, width calculations) in the compiled CSS.

0.4.0

Minor Changes

  • c563f48 Thanks @michaelmeneses! - feat: include complete Tailwind CSS in published style.css, fix DenseTableBlock optional fields
    • Import tailwind.css in lib entry so style.css includes all tokens, theme mappings, and utility classes
    • Consumers only need import "@middag-io/react/style.css" — no Tailwind config required
    • Export theme.css for consumers who want to integrate their own Tailwind pipeline
    • DenseTableBlock: add optional chaining for sort, filters, pagination (prevents crash with minimal data)

0.3.3

Patch Changes

  • 7950dac Thanks @michaelmeneses! - fix: patch Rolldown CJS require() polyfill out of ESM bundle

    Rolldown (Vite 8) emits a require() polyfill when CJS deps call require() on externals. Post-build script replaces it with ESM import map so the bundle works in browser ESM context without "Dynamic require" errors.

0.3.2

Patch Changes

  • 0e6ca32 Thanks @michaelmeneses! - fix: strip dependencies from npm public package to prevent CJS pre-bundling errors

    The ESM bundle already inlines all dependencies. Declaring them in package.json caused consumers to install 50+ unnecessary CJS packages that Vite failed to pre-bundle ("Dynamic require of react is not supported").

0.3.1

Patch Changes

0.3.0

Minor Changes

  • 46abe94 Thanks @michaelmeneses! - feat: generate TypeScript declarations (.d.ts) in published package

    Consumers now get full TypeScript type definitions on both npm public and GitHub Packages registries.

0.2.1

Patch Changes

  • 6b15206 Thanks @michaelmeneses! - fix(ci): restore changesets version management, fix CLI scaffold version, fix npm publish pipeline

0.2.0

Minor Changes

  • c43ce6b Thanks @michaelmeneses! - Add CLI tooling, VitePress documentation, and DX improvements
    • CLI commands: doctor, dev, add-block, upgrade (via npx @middag-io/react)
    • Bootstrap wizard: npx create-middag-ui (separate npm public package)
    • VitePress documentation site with 18 pages (getting started, host guides, reference, CLI)
    • Static API example endpoints simulating Moodle/WordPress responses
    • Error messages with doc_url links and zero silent failures in registries
    • Deprecation utility for future breaking change warnings
    • CONTRIBUTING.md with development workflow

0.1.0

Minor Changes

  • Initial release of @middag-io/react
    • Contract-driven page rendering system (ContractPage, PageContract)
    • Shell registry with 2 built-in shells: product, immersive
    • Layout registry with 4 templates: stack, sidebar, dashboard, wizard
    • Block registry with 17 block types across 4 categories:
      • Data Display: dense_table, detail_panel, card_grid, link_list, status_strip, activity_timeline
      • Forms: form_panel, form_builder, sentence_builder, condition_tree
      • Content: empty_state, markdown_panel, tabbed_panel, action_grid
      • Visualization: metric_card, flow_editor, workflow_progress
    • Provider system: I18nProvider, AuthProvider, FlashProvider, ScopeProvider, ProgressProvider
    • Theme system with three-tier resolution (manual > host > OS), dark mode, and RTL support
    • Navigation system with tree payload, drilldown, collapsible groups, and badges
    • Host adapter support for Moodle (Boost) and WordPress (WP Admin)
    • Full TypeScript type exports for all contracts and data shapes
    • ESM library build via Vite
    • Mock application at ui-demo.middag.io

MIDDAG © 2015-2026