v0.4.6
Astryx 0.4.6 — all @astryxdesign/* packages ship at this version.
npx astryx upgrade --apply@astryxdesign/core
New Features
-
DateInput fits the pointer: a touch picker on a finger, the text field
on a mouse (#5243)DateInputhas always been a control for a mouse — a field you type into with a calendar in a popover beside it. On a phone or a tablet that is the wrong shape: the popover is a desktop calendar operated by thumb, and focusing the field summons a keyboard that covers the thing it is meant to fill in.The same component now renders a second surface where the primary pointer is a finger (
pointer: coarse): a bottom sheet holding one month per screen, swiped sideways, with month and year wheels behind the header title for the far jumps swiping is bad at, arrows in the header corner for a single step, and every target floored at 44px. A day commits the moment it is tapped and leaves the sheet up, so a mistake can be corrected in place; Save closes the picker, and Reset puts it back to how it opened — no date, current month. The grid spills adjacent-month days, muted and unselectable, and the weekday header is three letters rather than two, both as the desktop calendar has them.The month and year wheels are one layer that fades in and out on top of the calendar. The calendar itself never fades — it is covered and uncovered, so the only thing moving is the thing arriving. The layer carries an opaque background of its own, which is what makes the fade uniform: it renders as a finished image and the fade applies to the image, rather than the wheels' translucent selection band compositing against a live grid on its own terms.
Nothing changes at the call site. It is one component with two surfaces, not two components — same props, same values, no new import, no media query to write. Existing usage is untouched: with a mouse the rendered output is the control that was always there.
The switch is the pointer alone, deliberately with no width bound.
pointermeans the PRIMARY device, so a touchscreen laptop reportsfineand keeps the typable field (its keyboard is right there), while a narrowed desktop window is still a mouse. Adding a width test would only re-exclude tablets, which are the clearest case for a thumb picker.The public surface barely moves: six
@astryx.dateInput.*catalog keys for the picker's header and footer, and nothing else. No new props, no new exports —DateInputPropsis byte-identical at 25.Nothing else is published, on purpose. There is no export that forces a surface: the touch picker is reachable by being on a touch device, which is the only place it is worth looking at. The media query the switch runs on is an internal constant, not an export — six other core components write
@media (pointer: coarse)inline rather than sharing one, and nothing has asked to ask the same question. The picker's two sizes (the 44px day cell, the 28px wheel row) are compile-time constants rather than theme variables — the day size is an accessibility floor, and a variable a theme can quietly lower is not a floor. And the sheet's header button is addressed by adata-attribute rather than a theme target, because nothing has asked to restyle it. Each of those is additive later and awkward to withdraw once shipped.The wheels also answer a mouse now. A wheel is a scroll container, so a finger pans it for free; a mouse got nothing, because browsers do not drag-scroll an overflow container — pressing and pulling on the one control shaped like a thing you spin did nothing at all. Dragging with a mouse works, and fixes a related bug on the way: BottomSheet begins its own drag from a
pointerdownon its body and captures the pointer for it, so a click on a wheel row that wobbled more than a pixel or two used to select nothing. -
Export
useLocaleanduseCollatorfor provider-backed formatting and comparison (#5194) -
RadioListItem: the
radio-list-itemrow theme target now carriessize,selected, anddisabledstate variants (matchingmulti-selector-option), so themes can style selected or disabled rows (#5143). -
RadioListItem: the
radio-list-itemtheme target now rides the painting row element (converging withlist-item), so a theme can style the row's hover background, padding, and border radius — previously it sat on a layout-only wrapper that painted nothing. The default (unthemed) row appearance is unchanged: it stays a bare surface with no row padding, radius, or hover/selected background (only the radio indicator tints on hover) (#5143). -
Section,Stack(withHStack/VStack) andCenteraccept a padding prop for each of the four edges —paddingBlockStart,paddingBlockEnd,paddingInlineStartandpaddingInlineEnd— so an edge can take its own spacing step without anxstyleescape hatch.Sectionalso gains thepaddingInlineaxis prop it was missing, so all three components now expose the same seven-prop set (#5224).
Each prop takes the same spacing scale aspadding, and resolution is most-specific-wins, per edge:edge prop → axis prop (
paddingInline/paddingBlock) →paddingAn edge prop changes its own edge and leaves the other three alone.
<Section padding={6} paddingBlockStart={2}>…</Section> // tight top, 24px elsewhere <Stack padding={4} paddingInlineEnd={0}>…</Stack> // flush trailing edge
The inline props are logical, so
paddingInlineStartis the left edge in LTR and the right edge in RTL.On
Sectionthe matching--container-padding-*custom property moves with the prop, so bleed children (Table,Divider, a nestedSection) keep compensating against the padding actually applied.Existing code is unaffected:
padding,paddingInlineandpaddingBlockbehave exactly as before, and their generated class output is unchanged. -
Selector: add the
selector-option-rowtheme target on the dropdown option row, carryingsizeplusselected/disabledstate — so a theme can restyle row padding and density directly (mirroringmulti-selector-option), instead of reaching the barerole="option"element with a structural selector (#5179). -
MediaTheme: add
mode="auto"andmode="off"(#5299)
A theme is free to define--color-background-invertedas something that is not inverted — and a component that hardcodesmode="dark"then paints white text on pale grey at 1.25:1. The surface color is a runtime value and the mode was a compile-time guess, so no amount of care in the component could catch it.mode="auto"measures the surface the browser actually painted and applies whichever of the theme's own--color-on-dark/--color-on-lightreads better on it. There is no threshold and no contrast target: it picks between the theme's two answers, so a theme that wants a soft pairing still gets one. Deciding a surface needs no media context stays an authoring choice — that is the newmode="off", which renders the same element without the media attribute so children never remount.When the backdrop is not knowable from CSS — during SSR, on the first client frame, and most often behind a
background-image, whose pixels need sampling (seeuseImageMode) rather than a computed style —autouses the newfallbackprop instead of guessing.Toast now uses
mode="auto", with its previous rule kept only as that fallback. Every stock Astryx surface renders exactly as before. -
Tooltip and HoverCard: tap to open where there is no hover (#5248)
Hover is the one trigger a touch screen cannot express, and both components were answering that badly.Tooltipsuppressed itself on any device reporting(hover: none), so its content — often the only label an icon button has — was simply unreachable on a phone.HoverCarddid nothing at all: themouseentera tap synthesizes opened the card on every tap of its trigger, over the control the user was aiming at, with no gesture that closed it again.Both now take a
touchTriggerprop, and what the trigger DOES decides the default. A trigger that performs an action — a button, a link, a form control — keeps its tap underauto: the layer stays shut, because the tap already has somewhere to go and a hint about a control the user just operated is noise. A trigger that performs no action — an info icon, an abbreviation, a truncated label — has nothing to lose, so the tap opens the layer, with no show delay (a tap is a decision, not the hover intent the delay exists to filter) and a tap outside to dismiss it.tapandnonestate the choice outright;tapis what an info icon rendered as a button wants, since it looks like an action to the DOM while revealing the layer is the only thing it does.Hover-capable devices are unaffected, hybrid ones included: the decision is made per interaction from the pointer type rather than once per device from a media query, so the same trigger opens on hover under a mouse and on tap under a finger. A stylus is a hover device by the same rule — a pen in detection range fires hover events with nothing in contact, so it opens the layer on hover, and only a pen that lands counts as a tap. Neither layer opens from the focus a tap leaves behind any more — the second way a tap could bury the control it activated, and on
Tooltipit is the tapped text fields that were affected, since those match:focus-visibleby design.[fix] InfoTip (lab): opts into
touchTrigger="tap". Its trigger is a real button, so theautorule would hand the tap to the control — but revealing the tooltip is that button's only purpose, and suppressing it left an InfoTip's content unreachable on a phone.
Fixes
-
Avatar: a status element now reports its own accessible label to the avatar through context, so wrapping
AvatarStatusDotin a component of your own keeps the status in the avatar's accessible name ("Jane Doe, Online") instead of silently dropping it — therole="img"root prunes descendant semantics, so composing it in is the only route to assistive tech (WCAG 4.1.2). Readinglabeloff a directly-passed element still works and still resolves on the first render. An interactive avatar (href/onClick) with noname/altwarns in development, and a status label no longer counts as the control's identity: "Online" reads as a legitimate name while saying nothing about where the link goes. Derivedrole/aria-label/aria-hiddennow spread before the passthrough props, following Icon, so a consumer's own values win. No API change (#5034) -
AvatarGroup: four defects out of the component audit, three of them in
AvatarGroupOverflow(#5055).
The indicator wasdisplay: flexon a span, which is a block-level flex container, so the exported component rendered as a full-width bar instead of a circle anywhere outside anAvatarGroup: measured 1168px wide in a 1168px parent. It isinline-flexnow; inside a group nothing changes, because a flex item is blockified either way.Its label font size was a bare
size * 0.35, which computes 7px atxsmand 8.4px atsm. That is under the 12px legibility floor, and the effect is worse than the number suggests: the glyph stroke ends up thinner than a pixel, so it never reaches its own text colour. Decoded from a screenshot, the darkest pixel atxsmis#bebebeon a#f0f0f0field, a contrast of 1.63:1 where 4.5:1 is required. The size now floors at the--text-supporting-sizerole token and scales proportionally above it, somdand larger are unchanged.The indicator also kept its negative overlap margin when it was the first child of a group, hanging 12px outside the group's own box. It now carries the same
:not(:first-child)guardAvataralready had. And a negativecountrendered the string+-3and announced "-3 more"; since the documented shape for the prop istotal - visibleCount, which goes negative whenever the list is shorter than the slice, it now clamps at zero.Docs: the guidance told readers to "set max to limit visible avatars", and there is no
maxprop. The API is compositional on purpose, so the consumer slices; the guidance now says that. The keyboard behaviour names the APG roving tabindex technique it implements, andsizenow says that the group's value wins over each child avatar's ownsize, including when the group leaves it at the default. -
Blockquote: the
citeattribution renders as a bare<cite>instead of being wrapped in a<footer>, which was becoming acontentinfodocument landmark. Also guards the slot withisRenderable, socite={condition && author}no longer emits an empty<cite>, and wraps long unbroken words instead of overflowing (#5144). -
Bottom Sheet: float the grab handle so content sits closer to the top (#5222)
The drag area above the sheet's content was a 48px row in the sheet's flex column, pushing everything below it down by its full height and reading as an empty band above the first line of content.The bar is now 24px and floats over the content: the scrolling area starts at the sheet's top edge and rides up under the pill, so a heading sits 24px closer to the top. The pill is 4px tall centered in the band, so it occupies only 10-14px from the edge — inside the top padding a content wrapper already provides — and a surface gradient behind it keeps it legible over whatever sits or scrolls beneath.
-
BottomSheet: give the sheet one uniform edge against the scrim. Two things were wrong in dark mode. The sheet drew no edge of its own — surface and scrim sit a few RGB steps apart and the
--shadow-highdrop shadow is black on near-black, so the left and right edges were invisible (measured 1.16:1 boundary contrast in dark against 2.89:1 in light); it now carries a--border-width/--color-borderhairline on its three scrim-facing edges, the same treatment MobileNav gives its scrim-facing edge. And under a theme that packs an inset ring into--shadow-high(every bundled theme adds one in dark mode) that ring was painted over by an opaque content wrapper such asSection, so it showed only in the gap below where the content ended and the side edges appeared to change width partway down; the scrolling body now paints the surface across the sheet's whole inner box, hiding the ring evenly (#5305). -
Breadcrumbs: button crumbs keep the link's vertical padding, the variant reaches the item theme targets, and interactive crumbs paint the shared focus ring (#5332)
-
DateInput's touch calendar no longer rests between two months (#5319)
Swiping the month calendar on iOS could leave it parked a couple of columns into a pane: the left of March and the right of April on screen at once, under one square Sun-to-Sat header, with the title still naming March. The grid was never skewed — the scrollport was simply at rest where no month begins.scroll-snap-type: mandatoryis supposed to make that impossible, and on a static list it does. This list is virtualized: seven panes exist out of twelve hundred, and the panes ARE the snap areas, so every month the finger crosses mounts one and unmounts another while the fling is still running. iOS scrolls off the main thread — it picks a landing place from the snap points it knows about at that moment, and a React re-render that lands after the decision moves them. The scroller stops where a snap point used to be and nothing re-snaps it. Chrome never showed it because it snaps again after the mutation.The rest position is now corrected rather than trusted: once the gesture is genuinely over — touch released, the scroller quiet, AND its offset confirmed unchanged across a frame — a scroller that is off a pane boundary is moved to the nearest one. A scroller the browser snapped for itself is left alone, so nothing extra happens on Chrome, and sub-pixel drift on a fractional viewport is ignored.
That last condition is what keeps the fix from becoming a worse bug than the one it fixes. A quiet period is not proof of rest: iOS runs its own snap animation for a few hundred milliseconds after the finger lifts and fires scroll events irregularly while it does, so a correction that trusts quiet alone can land mid-animation, round an offset still travelling toward next month back to the month it came from, and reverse the swipe.
-
A disabled element answers the pointer with
default, never an interactive cursor. Everycursorin core and lab carries':is(:disabled,[aria-disabled="true"])': 'default', and the reset gives the same cursor to any disabled element that declares none —[aria-disabled]included, which previously got nothing. A lint rule and a Chromium sweep over every story keep it that way. Disabled elements sealed behindpointer-events: noneare unchanged: the pointer never reaches them, so their cursor comes from an ancestor — which is why the guarantee isdefaultrather than a distinct disabled cursor the library could only paint on some of them (#5323). -
Disabled elements no longer paint a hover state: every self-
:hoverin core and lab, and every:hovera theme authors, now carries the zero-specificity guard:hover:where(:not(:disabled,[aria-disabled="true"])), so existing overrides weigh exactly what they weighed before. A lint rule and a Chromium sweep over every story keep it that way (#5247). -
InputClearButton: the clear (✕) affordance now meets the WCAG 2.5.8 AA 24×24 minimum on touch. The shared button rendered a 20px glyph with a 20px tap target, so every input that clears through it — Typeahead, Tokenizer, FileInput and the rest of the family — was under the floor on a phone. An
::afteroverlay now expands the tappable region to 24×24, gated behind@media (pointer: coarse): on a fine pointer the overlay is not generated at all, because a mouse is precise enough, an unconditional overlay could overlap neighboring controls in dense desktop layouts, and an overlay covering the button would take hover away from theastryx-input-clear-icontheme target. The visual glyph is unchanged at every breakpoint, and the overlay stops at 24px so it stays clear of the 8px adornment gap and the input's own caret area (#4956). -
MobileNav: the drawer now slides in when it opens, instead of only sliding out when it closes. Two things were needed, and each is useless without the other. First, the dialog is
display: nonewhile closed, so the drawer's first rendered frame already holds the on-screen transform and a transition has no before-change value to run from —@starting-stylesupplies it, for the drawer's transform and for the::backdrop's opacity. Second, the dialog clipped the off-screen drawer withoverflow: hidden, which makes it a scroll container; a scroll container in the top layer whose subtree holds another scroller (the drawer's content area) does not paint a@starting-styleentry transition for its descendants in Chromium — the transition ticks in the CSSOM while every painted frame shows the end value.overflow: clipclips identically without creating a scroll container. The drawer now slides in from its own edge (mirrored under RTL) and the scrim fades up, both on--duration-mediumand both collapsing underprefers-reduced-motion, exactly as the close already did (#5218). -
NumberInput: the number-stepper column now tracks a themed padding and radius instead of assuming the defaults. Theming
number-inputpadding left the steppers short of the field edges (a gap top and bottom), and a themedborderRadiusrounded the field while the stepper corners kept the default radius. The wrapper's padding now goes through the shared container expansion, so it is picked up from any spelling a theme writes it in —padding: 14px 20px,paddingBlock, or a singlepaddingBlockStart— and both the wrapper and the column read the resulting per-side--astryx-number-input-padding-*tokens; an asymmetricpaddingBlock: 4px 12pxis cancelled correctly at each edge. A themednumber-inputborderRadius now also reaches--_field-radius, which the column's outer corners follow. Byte-identical by default, and inert for the no-stepper case and every other input (#5181). -
Stop the container padding system at every overlay boundary. Follow-up to #5209, which zeroed
--container-padding-*on four overlay roots and closed the visible overflow in #5208 (#5231).
Two gaps remained. The variables descendants ADD (--layout-padding-*, and a Section's propagated padding) still crossed the boundary, so an unpaddedSectioninside an overlay took the page's padding instead of the theme default — 40px where 16px was meant. AndLightbox,ContextMenuandHoverCardwere never covered.The reset now lives in one place (
overlayPaddingReset, exported from@astryxdesign/core/Layout) instead of being hand-copied per overlay, and moved onto theuseLayerroot, which covers every layer surface at once. Values descendants subtract are zeroed; values they add are cleared toinitialso readers fall through to their own default rather than losing their padding.Section's padding propagation moved from the public
--astryx-section-paddingtoken to a private--_section-padding-propagated. The two carried different authority under one name — a theme's value versus one ancestor's — and an overlay could not drop the inherited one without blanking the theme's. Propagated values still win over the theme for nested sections, so behavior is unchanged. Themes are unaffected:--astryx-section-paddingremains the public token and still reaches inside overlays. -
Theming: a physical
paddingTop/paddingBottomnow reaches the container padding expansion, socard,dialog,sectionandnumber-inputtrack it the way they already track the logical spellings. A physical block longhand matched none of the padding property names the expansion recognizes, so it landed raw on the element while the component's internals kept reading the default — the NumberInput stepper column came up ~10px short of the field edges, and container bleed compensated by the wrong amount. Mixing spellings was worse than either alone:padding: '10px'pluspaddingTop: '14px'published 10px in the tokens while the element painted 14px on top.padding-topandpadding-bottomARE the block edges in every horizontal writing mode, so this normalization assumes no direction.paddingLeft/paddingRightare deliberately unchanged: they are direction-relative — left is inline-start in LTR and inline-end in RTL — and the tokens are consumed by logical properties, so routing them would silently move the padding to the opposite edge under RTL. They keep their physical meaning, exactly as before (#5244). -
DateInput,DateTimeInput,DateRangeInput, andCalendarnow format and parse dates using the ambientInternationalizationProviderlocale instead of the host/browser locale.plainDateFormat(backingformatSharedDate) previously calledIntl.DateTimeFormat(undefined, ...), anddateParser's day/month disambiguation heuristic for ambiguous numeric input (e.g.3/4/2026) calledIntl.DateTimeFormat()with no locale at all, so a tree wrapped in a non-Englishlocalestill formatted and parsed dates using the host locale (#5120). -
Use the InternationalizationProvider locale for sorting, formatting, and speech defaults (#5195)
-
RadioListItem: the whole row is now a click target. Clicking the description — or the empty space in a row's hover area — selects the radio, matching CheckboxListItem. Previously only the radio and its label text responded, so the description and surrounding row were dead space. The row delegates surface clicks to the radio input (one tab stop per option preserved), and the radio keeps its accessible name via
aria-label(#5143). -
Reset container padding custom properties on overlay elements (
BottomSheet,Dialog,MobileNav,Popover) to prevent nestedSectioncomponents from inheriting ancestor section padding (#5209). -
ResizeHandle: dragging the lower half of a tall handle works again. The invisible grab zone is stretched along the handle, but the offset that biases it onto the pill also carried the pill's own
-50%centering shift — so the zone slid half the handle's length off the divider. On a full-height panel at 1440x900 the 16x900 hit box sat at y=-434, leaving everything below the pill's centre dead: a pointerdown on the visible grip's centre, or anywhere lower, started no drag at all. The dead region grew with the panel, and the same shift stranded the grab zone sideways on vertical handles. The bias now moves the zone along the pill's axis only (#5198). -
Opening a Dialog, BottomSheet, Lightbox, or MobileNav no longer shifts the page sideways when the browser has a classic scrollbar (#5219)
Locking background scroll hides the document's scrollbar. Where that scrollbar takes layout space — Windows/Linux desktop, and macOS set to always show scroll bars — hiding it widened the layout viewport by its width (~15px), so the whole page reflowed sideways behind the overlay and back again on close.Both scroll locks now hold that gutter open with
scrollbar-gutter: stablefor the duration of the lock, which keepsposition: fixedchrome (sticky headers, toast viewports) still as well as in-flow content. Pages with no space-taking scrollbar, and pages that already setscrollbar-gutterthemselves, are left alone. Engines withoutscrollbar-guttersupport fall back to padding the measured difference. -
SegmentedControl: keep item labels on a single line, truncating overflow with an ellipsis instead of wrapping to multiple lines (#5035)
-
Selector:
SelectorOptionDatagainsdescription, and the closed trigger now shows the selected option instead of just its label. The two-line option rowSelectorOptiondraws was unreachable from theoptionsprop — the data type carried onlyvalue/label/disabled/icon— so consumers kept a side map of descriptions keyed by value and re-rendered the row throughrenderOption.descriptionnow sits on the option data andDefaultOptionforwards it. On the trigger, the selected option's owniconrenders in the closed state (startIconstill wins when set, so a pinned field icon never doubles up), which retires the app-sidestartIcon={value === 'x' ? … : …}mirroring of state the component already knows.renderValueis the seam for drawing the selection yourself — the description included (#5202).
[feat] Item: newlayoutprop —'stacked'(default, unchanged) or'inline', which keeps the description on the label's line with the description ellipsizing first. The inline row centers its two lines rather than sharing a baseline: two font sizes on one baseline make a line box taller than either line, which would push a fixed-height host off its size token. Every row built onItemgets the axis,SelectorOptionincluded.[fix] Selector: the trigger is sized by padding rather than a fixed height, so it is the
--size-element-*token for a one-line value (28/32/36) and exactly one text line taller for a two-line one (48/52/56). The token and a text line are both multiples of 4, so every trigger lands on the 4px rhythm and lines up with the Buttons and inputs beside it — and no prop chooses the height, the content does. It previously swapped the fixed height for a minimum wheneverrenderValuewas passed, keyed on the prop being present rather than on the content needing the room: a one-line value measured 39px and a two-line one 58px at every size, so thesizeprop stopped affecting the trigger at all. Inside anInputGroup, where the group pins the row, the relaxed height did nothing and the content bled 4px through its own border. The group owns the row now and the trigger clamps its own value box to it, so nothing a caller draws can paint over the rows above and below: aSelectorOptionfolds onto one line and ellipsizes, and any other node is cut off at the row's edge. The trigger also stops asserting a height floor of its own there, so a control sized above its group —<InputGroup size="md">around asize="lg"control — sits in the group's row instead of growing it. The trigger's line box is pinned to that same token rather than a ratio, so the coarse-pointer font bump — and any theme that changes--font-size-base— grows the glyphs without moving the control off its size token. -
Sliderwithorientation="vertical"now gets the same 24px touch hit area the horizontal one got: its track was still only 20px wide on coarse pointers, under the WCAG 2.5.8 AA minimum. The whole track is the tap target for both orientations — the fix that floored the horizontal track's block size did nothing for vertical, whose short axis is the inline one — so the inline size is now floored to 24px on touch, with the same@media (pointer: coarse)gate. The rail, fill, marks and thumb all center on the inline 50%, so nothing visible moves and desktop is untouched (#5173). -
@astryxdesign/core/theme/syntaxis importable from a server component again: the presets are data, not client references (#5076).
The subpath's barrel carried'use client', and it is the only entry point for the syntax module. React therefore replaced every export with a client reference for a server importer — includingdracula,oneLight,allSyntaxPresets,syntaxTokenDefaultsanddefineSyntaxTheme, none of which need a boundary. Reading a preset in a Next.js server module (deriving a code-block ground, emitting theme CSS at build time) got a proxy instead of data, sopreset.tokenswasundefinedand the failure surfaced far from its cause — the same import under plain Node worked perfectly.The directive now sits only on
SyntaxTheme.tsx, the provider that actually needs it, soSyntaxThemeanduseSyntaxThemekeep their client boundary while the data exports resolve as data. No API change.
@astryxdesign/cli
New Features
- An integration can contribute reference-doc topics: point
docsat a root inastryx.integration.*and every{topic}.doc.{ts,mjs,js}under it is served byastryx docs, indexed byastryx search, and named in the agent-docs block, beside the built-in topics. A topic may also declarereplaces: '<topic>'to take over an existing one (renaming it leaves the old name resolving as an alias) orextends: '<topic>'to merge onto one section by section. A name that collides without declaring either is aninvalid_docissue rather than a silent override, andvalidate-integrationreports it. (#5311)
Also fixes the agent-docs block's topic list, which scanned for\w+and so silently dropped every hyphenated topic —getting-started,cli-integrations,browser-support,styling-librariesandworking-with-aiwere missing from every block ever written, and an agent cannot ask for a topic it was never told about. - Five dashboard page templates:
dashboard-cohort-funnel,dashboard-data,dashboard-executive-summary,dashboard-project-statusanddashboard-service-monitoring. Each is a complete page — layout, realistic sample data, and the component choices that go with the shape of the data — soastryx template <name>gives you something to edit rather than a blank frame (#5245).
Fixes
componentbuilt the import specifier for an integration component by joining the package name and the component name, which assumes every component is exported from a subpath named after itself. Components are commonly grouped behind a single entry point named after the concept, so the suggested import pointed at a subpath the package does not export and did not resolve (#4810).
The specifier is now resolved against the owning package'sexportsmap, keyed on the directory the component's doc file sits in, and falls back to the package root when that directory is not an exported subpath. A specifier a doc file states for itself is also no longer overwritten.- The upgrade codemod no longer collapses significant JSX whitespace when it renames an element tag. Renaming
<OldName>next to text and a{expression}(e.g.hello {name} world) previously dropped the adjacent space (hello {name}world); element-tag renames are now spliced into the output so the surrounding JSX is left untouched (#5149). - The XDS-prefix codemod no longer produces a file that will not compile. Dropping the prefix renames
XDSButtontoButton, but if the file already had a local binding calledButtonthe rewrite collided with it and shadowed one of the two. The import is now aliased instead, so both survive and the file still typechecks (#5225).
Contributors
Thanks to everyone who contributed to this release:
@cixzhang @ejhammond @ernestt @freddymeta @Geervan @HelloOjasMutreja @imdreamrunner @josephfarina @kentonquatman @nynexman4464 @rubyycheung
Full Changelog: v0.4.5...v0.4.6