MIDDAG Docs

Appearance

@middag-io/react ​

0.30.0 ​

Minor Changes ​

  • 619d216 Thanks @michaelmeneses! - Form-on-wire (#16) consumer alignment and contract regen: source the form-field union from the generated schema, add the FileValue wire value, type the csrf/logout fields, evaluate required_when/disabled_when field conditions, and tighten the PRO status/delta enums. Plus accumulated fixes since 0.29.0.

0.29.0 ​

Minor Changes ​

  • PRO interactive blocks, keyboard accessibility, and a demo-wide e2e suite.
    • PRO interactive blocks: gradebook (editable data matrix), report composer (drag-and-resize canvas), scheduler (week/month/agenda/resource-lanes calendar), and rich document (Lexical editor with merge tags).
    • i18next-based i18n replacing react-intl, plus a demo LocaleSwitcher with five display modes.
    • Keyboard accessibility across the drag/edit surfaces: keyboard widget moves on the report canvas, keyboard move/resize/delete and lane changes in the scheduler, one-cell keyboard steps in the month view, spreadsheet-style cell navigation in editable grids, and hover-only controls (delete/resize/favorite) now revealed on keyboard focus.
    • Shell a11y: localised AppearanceToggle aria/tooltips and accessible names on the host/theme switchers, sidebar, and Moodle-boost header controls; DataTable select/row-action/scroll-region labelling and keyboard-focusable scroll regions in ProductShell.
    • Demo-wide Playwright e2e suite with axe-core scanning: a smoke + a11y sweep across every demo route plus shell and per-archetype specs (table list, entity form, detail/inspector, dashboard, builders).

0.28.0 ​

Minor Changes ​

  • 137a851 Thanks @michaelmeneses! - Shell, form, and table fixes surfaced by the demo QA pass:
    • BasicShell now renders the contract's page.actions (Edit/back/etc. were destructured but never rendered) and adds an account menu — avatar + identity + a data-driven Logout (POSTs to an optional logoutUrl shared prop so non-demo auth backends set their own endpoint; hidden when absent).
    • EntityPickerField accepts an initialOption so an async picker shows the preselected value's label on edit (the option list is empty until search; the input now seeds from the label).
    • DenseTable (clientSide) seeds its search from the URL ?search= param (tag-chip links and shareable search URLs filter on load) and replaces the global filter with one that searches nested cell values, so object/array cells like tag chips [{label,href}] match by their label.

0.27.0 ​

Minor Changes ​

  • 65adf48 Thanks @michaelmeneses! - FREE/PRO tier placement: i18n string contribution + ChartType narrowing.

    • Add registerUiStrings(strings) so add-on packages (e.g. @middag-io/react-pro) can contribute default UI strings into the i18n lookup chain at bootstrap, instead of the Community engine carrying defaults for blocks it never renders. Resolution order is unchanged: server > overrides > async > built-in defaults (engine + contributed) > key.
    • Narrow the FREE ChartType to line | bar | area. The advanced pie variant is premium (@middag-io/react-pro) and donut is removed. Breaking for consumers typing ChartType as "pie" or "donut".

    The premium block default strings (condition_tree, sentence_builder, form_builder) now ship in @middag-io/react-pro via PRO_UI_DEFAULTS and are registered by registerProDefaults().

0.26.2 ​

Patch Changes ​

  • #65 1dc34f8 Thanks @michaelmeneses! - feat(create-middag-ui): detect PHP host in custom scaffold and target the doc-root

    The custom host path now probes for a PHP backend (composer.json + public/, with Symfony/Laravel framework hints via bin/console/artisan). When detected, vite.config.custom.ts is generated as an app-entry build into <app>/public/build with base: "/build/", so lazy block chunks (ChartPanel, FormPanel, DateField, …) resolve correctly when served from the PHP doc-root.

    Non-PHP custom hosts and PHP hosts without a public/ directory keep the previous library build into ../dist. Derived from the middag-php-demo-standalone dogfood, whose hand-fixed config the generated output now matches byte-for-byte.

0.26.1 ​

Patch Changes ​

  • accbaf8 Thanks @michaelmeneses! - fix(theme): sync color-scheme on <html> when applying a theme

    applyTheme() now sets document.documentElement.style.colorScheme alongside the .dark class. Without it, switching to dark left native form controls (text inputs, textareas, native selects, date/number pickers, autofill, scrollbars) in the UA light scheme — light foreground text on a light native background read as invisible inside forms. Native widgets now render in the matching scheme. Benefits standalone scaffolds and Moodle/WP host embeds alike.

0.26.0 ​

Minor Changes ​

  • 1a56dee Thanks @michaelmeneses! - Add three product-agnostic Community partials and honor Inertia v3 prop merging.
    • New partials (public API): MenuBar (data-driven application menu bar), ToggleGroupControl (controlled single/multiple segmented control), and TreeView (data-driven tree over @headless-tree). Prepared without a consumer; exported from the barrel.
    • ActivityTimelineBlock now reads its data from the live page prop (with a fallback to the contract-embedded data), so backend merge directives (mergeProps/prependProps/deepMergeProps/matchPropsOn) accumulate through @inertiajs/core before render. Zero regression when the prop is absent.
    • Use a numeric strokeWidth in the ReUI Tree folder-toggle icons (was a string, which broke type-checking once the primitive gained a shipped consumer).

0.25.0 ​

Minor Changes ​

  • f44d88f Thanks @michaelmeneses! - Promote form_panel block from Pro to Community as a lazy-loaded block, re-orient the FREE+PRO scaffold around the middag-php-demo-standalone Tasks CRUD, and harden navigation rendering.

    • form_panel is now a Community block (tier line: form_panel = free, form_builder = Pro). The heavy implementation (zod + react-hook-form) loads on demand via React.lazy + Suspense; the barrel exports the lazy wrapper as FormPanelBlock, so the heavy chunk only loads when a page actually renders the block.
    • create-middag-ui scaffold (FREE and PRO templates) now generates a Tasks CRUD demo (login / tasks / task-form / task-detail) mirroring middag-php-demo-standalone.
    • BasicShell reads navigation tree/footer defensively (?? []) to avoid a blank-screen crash when a consumer omits footer from NavigationTreePayload.

    All publishable packages version in lockstep (fixed group): @middag-io/react, @middag-io/react-pro, @middag-io/react-demo, create-middag-ui.

0.24.0 ​

Minor Changes ​

  • 10fe500 Thanks @michaelmeneses! - Require Inertia v3 + React 19; drop the Inertia v2 peer.

    The peer range for @inertiajs/core and @inertiajs/react moves from ^2.0.0 to ^3.0.0 (root lib and @middag-io/react-pro). The library was already v3-clean — no removed/renamed v3 API is in use — so this is non-breaking internally, but it is breaking for consumers: hosts (Moodle local_middag, WordPress) must move to Inertia v3 in lockstep, otherwise npm install will fail to resolve the peer.

    create-middag-ui scaffolds now pin Inertia ^3.0.0 in generated host projects.

0.23.0 ​

Minor Changes ​

  • 9d69fd7 Thanks @michaelmeneses! - Polish the FREE/Custom scaffold dev experience and the BasicShell.
    • Add i18n defaults for the appearance toggle (middag.ui.appearance.*) in EN + PT-BR, so BasicShell's light/dark button shows a label instead of the raw key.
    • create-middag-ui: the FREE dev server now excludes @middag-io/react from Vite's dep pre-bundle, so the lib and the app share one Inertia-adapter instance — the BasicShell sidebar and header now get navigation and page meta (they were empty).
    • create-middag-ui: the dashboard demo's status column uses variant: "badge" (the dense_table contract) with string values, so the status renders as a colored badge instead of [object Object].
    • create-middag-ui: the example now wires up end to end — the custom HelloBlock renders the standalone Greeting component and is registered + used on the dashboard (previously both were dead files).
    • create-middag-ui: the FREE production register no longer imports ProductShell and FormPanelBlock (both premium-only, absent from the free barrel) — it registers BasicShell for the "product" shell key and the 12 standard blocks.

0.22.0 ​

Minor Changes ​

  • d017e91 Thanks @michaelmeneses! - Add BasicShell — a free app shell with a simple sidebar + header.

    The free counterpart to the premium ProductShell: a persistent sidebar with flat navigation from the contract (no drilldown), a header with title and breadcrumbs, and a light/dark toggle — all built from the free ReUI sidebar primitives. Registered as the "basic" shell.

    create-middag-ui: the FREE/Custom scaffold now registers BasicShell as its dev shell instead of the bare ImmersiveShell (which had no sidebar), and the dashboard demo's status column uses type instead of variant so the status badge renders (it was showing the raw object).

0.21.0 ​

Minor Changes ​

  • 799e272 Thanks @michaelmeneses! - create-middag-ui: fix the FREE/Custom scaffold so npm run dev works out of the box.
    • Ensure each file's parent directory exists before writing it, so src/vite-env.d.ts no longer fails with ENOENT when scaffolding config files.
    • Register the free ImmersiveShell as the dev "product" shell instead of generating a DevShell that imported react-pro-only chrome (SidebarNav, PageHeader, AppearanceToggle), which broke the dev server with a missing-export error.

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.mjs → src/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