0.1.0-rc.0 release

[karim-semmoud]

Corex 0.1.0-rc.0

First stable release candidate of Corex: accessible Phoenix components powered by Zag.js, with an optional token-based design system, generators, and MCP tooling.

Requirements: Elixir ~> 1.17, Phoenix ~> 1.8, LiveView ~> 1.1.

{:corex, "~> 0.1.0-rc.0"}

With ~> 0.1.0-rc.0, Hex resolves 0.1.0-rc.x and later 0.1.x on this line. Patch and minor 0.1 releases are additive; breaking changes ship in 0.2.0. See Updating Corex.

---

Highlights

• 40+ components with LiveView and client APIs (create, set_value, on_* events, form-friendly inputs)
• mix corex.new: scaffold a Phoenix app with Corex, design assets, theme/mode/locale options, and optional MCP
• Corex Design: mix corex.design copies tokens, themes, and BEM modifier CSS (button--accent, etc.)
• MCP: list components and read live docs from a running app (dev/test only)
• Static sites with Tableau: Corex on Tableau HEEx sites; reference templates soonex and soonex_i18n
• Docs & e2e: unified component docs with API sections, expanded demos, Markdown blog (EN + AR), and much broader test coverage
• Tetrex showcase: Checkbox Tetris built on Corex checkboxes — live play/watch/replay, leaderboard, and a GameBoard client hook
• Usage Rules: Corex usage rules for AI-assisted development (mix usage_rules.search_docs -p corex)

---

New components

• Pagination: page navigation with translations and URL/LiveView patterns (1-based page)
• Tags Input: multi-value tags with form support and gettext-backed labels
• Toggle: single on/off control (distinct from Toggle Group); recommended for light/dark mode switchers

---

Tetrex (e2e showcase)

• Checkbox Tetris with semantic piece colors (checkbox--* themes), scoring, levels, and line clears
• Live sessions: create games, watch others, presence, and a top-10 leaderboard
• Replay: frame-by-frame playback via the GameBoard hook and stored board state
• Mobile controls for touch play
• Listed on the showcases index next to Soonex / Soonex i18n

---

Generators & installer

• mix corex.gen.live / mix corex.gen.html: refreshed templates using Corex Design patterns
  • layout_heading, data_table, navigate, and Corex form inputs throughout
  • Shared Mix.Corex.Gen.Inputs picks the right Corex input per schema type (number_input, checkbox, date_picker, select, password_input, native_input, etc.)
  • Schema-driven display helpers for index/show columns (dates, decimals, enums, arrays, redacted fields)
• Accessible delete flows: confirmation via <.dialog role="alertdialog"> and Corex.Dialog.set_open/2 instead of native data-confirm
• Locale-aware routes in generated templates when the app uses --lang
• mix corex.new: hardened installer patches and expanded test coverage (including edge-case patch tests)

---

Testing & CI

• Vitest (~90+ suites) for Zag hooks, client components, and shared libs (pnpm test in CI)
• Elixir: registry completeness, hook/npm export contracts, translation helpers, MCP tools, Flash/Toast payloads, mix task and installer CLI tests
• e2e: route coverage, per-component event LiveView tests (pagination, tags input, timer, accordion, etc.), animation tests, and Tetrex registry/session tests
• Generators: expanded corex.gen.live / corex.gen.html / corex.design / installer integration test coverage
• Coveralls threshold at 90%

---

Notable improvements

API, events, and controlled mode

• Toast: aligned API (create / update / dismiss / remove), action triggers, flash via Corex.Flash, custom loading/close slots
• controlled removed from carousel, combobox, editable, number input, tree view, and dialog. Use default-value assigns and on_*_change events; controlled mode remains on accordion, angle slider, checkbox, collapsible, date picker, listbox, pagination, radio group, select, switch, tabs, tags input, toggle, and toggle group
• Radio group: size and color modifier CSS; full Zag API surface (set_value, clear_value, focus, value); form docs with :error slot

Translations & docs

• Translations: Corex.Translation macro and translation={%…Translation{}} on more components (pagination, tags input, timer, dialog, pin input, etc.)
• API docs: structured API sections on components; improved demos and doc matrices
• Action & Navigate: e2e doc pages link to Hex docs, TypeScript source, Phoenix module, and Design CSS (button / link mappings)
• Blog (e2e): _posts/ Markdown with Makeup, callouts, mix e2e.gen.post, Arabic mirror under _posts/ar/, and prose layout styling

Components & design

• Layout Heading: title_tag / subtitle_tag for correct heading hierarchy
• Carousel: 1-based page (aligned with pagination); hook maps to Zag's 0-based snap index
• Number Input: client API and attribute surface brought in line with other inputs
• Color Picker: fit_viewport default adjusted; closes [Color Picker]: Unable to edit the channels with keyboard #30
• Data Table: improved design and row ID handling
• Data List: refactored anatomy; items via Corex.Content.new/1
• Animation: shared hook helpers across accordion, dialog, tree view, and others; dedicated animation tests
• Design: full design sync; link underline for a11y; higher contrast for ink-muted; updates for date-picker, pin-input, password-input, angle-slider, toast, dialog modifiers (dialog--text-*, dialog--rounded-*, dialog--side), and carousel CSS
• 404 page and router improvements in e2e

Consistency

• Naming, attrs, and test file conventions aligned across components and e2e
• Tree view API demo page fixes

---

Breaking changes (alpha → stable)

Area	Change
Menu	Connected LiveView now performs a hard redirect by default. Use per-item redirect: false, or :patch / :navigate for LV-aware navigation.
Corex.Content	Accordion/Tabs items use :label instead of :trigger.
Toast	API names and options normalized; prefer Corex.Toast.create/5–6 and <.toast_group>.
Mode switcher	Use Toggle, not Toggle Group, for light/dark mode.
Carousel	page is 1-based (page={1} is the first slide). Update any 0-based usage.
Form invalid	field={} no longer auto-sets invalid from changeset errors on radio group, pin input, color picker, or editable. Pass invalid explicitly when you want error styling.
controlled	Removed from carousel, combobox, editable, number input, tree view, and dialog.
Design tokens	ink-muted contrast updated: re-run mix corex.design if you vendor tokens.
Data List	Corex.DataList.Item removed; use Corex.Content.new/1 for the items attribute.

Migrating form invalid styling

If you relied on changeset errors to style inputs automatically:

<.radio_group field={@form[:plan]} invalid={@form[:plan].errors != []} />

Migrating Corex.Content items

# Before
trigger: "Panel title"

# After
label: "Panel title"