@middag-io/react
0.20.0
Minor Changes
1f1f618Thanks @michaelmeneses! - Dev harness onboarding restored:npm run devnow 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
58b341bThanks @michaelmeneses! - Contracts: align withmiddag-php-ui(canonical wire shape, single source of truth).The TypeScript types and zod schema in
src/contracts/are now generated from themiddag-php-uivalue objects via JSON Schema (scripts/gen-contracts.mjs→src/contracts/generated/), with a hand-authored premium overlay (extensions.ts). PHP is the canonical source; the wire schemas are committed todocs/public/schemas/{page-contract,fragment}.jsonand bundled by the MCP server.Breaking (pre-1.0): the action contract is now canonical and has no legacy fallbacks.
Actioncarries a discriminatedtarget(link|route|request) instead of flathref/method, an i18n-awarelabel(string | Translatable), a required 8-valueintent, and a premiumdisplay(inline|overflow) — the new home ofintent: "menu".ActionConfirmationextends the canonicalConfirmation(message,variant).PageMeta,BlockDescriptor,LayoutDescriptor,PageResources,PageContract,Breadcrumbare 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
9f40d8fThanks @michaelmeneses! - Export base partials as public API + InspectorResponse typeNew exports (consumers import from
@middag-io/reactdirectly):- All
base/partials/components:ActionBar,ConfirmationDialog,DataTable(+ types + cell renderers),DetailSection,EmptyPlaceholder,FilterBar,FormSection,LogViewer,MarkdownContent,StatRow,StatusBar,StatusIndicator,StepIndicator,TimelineList InspectorResponsetype (fromInspectorProvider/useInspector)
Barrel
src/base/partials/index.tsadded — future partials only need a single line there;src/index.tsstays stable.- All
9f40d8fThanks @michaelmeneses! - page-contract-data.ts + scaffold AMD support + PRO licensing pipelinecontracts/page-contract-data.ts: auto-generated TypeScript interfaces from PHP Data classes (B-096)create-middag-uiscaffold: complete Moodle AMD build support (emit-build.mjs,vite-plugin-moodle-amd.tstemplate, 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 withretryTab()support - Scaffold generator (
create-middag-ui) now generates Inertia mock adapters inmock/adapters/instead ofsrc/adapters/, enforcing thesrc/= production,mock/= dev-only convention - New
@mock/Vite alias in scaffolded projects for clean imports from mock directory
- New
0.16.0
Minor Changes
060ad0bThanks @michaelmeneses! - Export registerDefaultCells, registerDefaultFields, registerDefaultIcons from barrelAll 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
ac3ba28Thanks @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 usesT 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
62f187eThanks @michaelmeneses! - fix(shell): defensive guard for undefined navigation in SidebarNavPrevents crash when navigation prop is undefined or uses legacy format.
0.15.4
Patch Changes
3599a76Thanks @michaelmeneses! - fix(create-middag-ui): PRO adapters re-export from lib mock for shared React contextPRO 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
6c6a68cThanks @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
a9ddc43Thanks @michaelmeneses! - fix(mock-lib): bundle ReUI primitives into dist-mock instead of externalizingReUI 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
7dd2912Thanks @michaelmeneses! - fix(mock-lib): externalize ReUI components as deep imports in dist-mock buildMockProductShell'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
0fc47c4Thanks @michaelmeneses! - fix(create-middag-ui): add --yes flag, fix version drift, align mock barrel exports- Add
--yes/-yflag to skip all interactive prompts (defaults: ui/, public registry) - Add
--githubflag for non-interactive PRO path - Fix
getLibVersion()to read from monorepo root instead of CLI package version - Align
mock/index.tswithmock/index-lib.ts— exportsetMockNavigate,router,usePage,Head,Link
- Add
0.14.0
Minor Changes
c77929d- Centralize test suite intests/and add block render + integration tests.Test centralization
- Move all
__tests__/fromsrc/andmock/intotests/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.
- Move all
0.13.0
Minor Changes
fb7266d- ### @middag-io/reactSOLID 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
0782475Thanks @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
6d60019Thanks @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.
- HostProductShell: Production-ready offcanvas shell with collapse toggle and AppearanceToggle. No mock-only features. Use
0.10.3
Patch Changes
afedfdcThanks @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
6c006e1Thanks @michaelmeneses! - Remove HostAdapter from create-middag-ui PRO scaffold to fix duplicate headers
0.10.1
Patch Changes
#27
fb9c6a7Thanks @michaelmeneses! - Fix mock lib build leaking absolute CI runner paths into dist-mock/middag-mock.jsExcluded 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
266d082Thanks @michaelmeneses! - Pre-build mock barrel as ESM for consumer projectsThe
@middag-io/react/mockexport 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@mockVite aliases.New exports: PageFilterTabs, CommandPalette, HelpProvider, HelpPanel, useHelp, InlineInspector, InspectorProvider, useInspector, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, lottie, ptBR.
0.9.0
Minor Changes
#23
af2d403Thanks @michaelmeneses! - create-middag-ui: PRO/FREE scaffold paths, collapse-aware SidebarNav, dynamic host header detectioncreate-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,getHostHeaderHeightfrom@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 fieldsi18n Provider:
- Added
formatDate,formatDateTime,formatRelative,formatNumber,formatCurrencytouseTranslation() - Added
localeto context (reads from Inertia shared props) - Uses
Intl.DateTimeFormat/Intl.NumberFormatwith 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 aslocalePtBR
Sidebar Quick Find:
- Search expands parent nodes to reveal matching sub-items (
isSearchingprop) - 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 viaformatCurrencyColorField— native color picker with hex inputSlugField— auto-generates URL-friendly slugs from source valueTagsField— 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
/lottiesroute 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.stringsandscopeto mock shared props for v0.7+ compat
- Added
0.7.2
Patch Changes
#20
559b237Thanks @michaelmeneses! - Fix create-middag-ui scaffold: wrap App with I18nProviderSince 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
- #17
a72a10fThanks @michaelmeneses! - Include README.md in npm public package and update Community vs PRO branding
0.7.0
Minor Changes
d694cd5- Extensibility, i18n, a11y, error telemetry, and DX improvementsi18n: 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
LazyBlockwrapper 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
e2c2361Thanks @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
d1044f0Thanks @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 devinstead ofnpm run dev:mock - Remove @tailwindcss/vite from consumer scaffold (CSS pre-compiled in style.css)
0.4.1
Patch Changes
9f04cf3Thanks @michaelmeneses! - fix: remove circular CSS variable in ProductShell/AdminShell, add sidebar CSS safelistProductShell 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
c563f48Thanks @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
7950dacThanks @michaelmeneses! - fix: patch Rolldown CJS require() polyfill out of ESM bundleRolldown (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
0e6ca32Thanks @michaelmeneses! - fix: strip dependencies from npm public package to prevent CJS pre-bundling errorsThe 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
d02f4ecThanks @michaelmeneses! - fix: correct style.css export path to dist-lib/middag-react.css
0.3.0
Minor Changes
46abe94Thanks @michaelmeneses! - feat: generate TypeScript declarations (.d.ts) in published packageConsumers now get full TypeScript type definitions on both npm public and GitHub Packages registries.
0.2.1
Patch Changes
6b15206Thanks @michaelmeneses! - fix(ci): restore changesets version management, fix CLI scaffold version, fix npm publish pipeline
0.2.0
Minor Changes
c43ce6bThanks @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
- CLI commands: doctor, dev, add-block, upgrade (via
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
- Data Display:
- 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
- Contract-driven page rendering system (