Astryx 0.7.5 is a patch release. Every @astryxdesign/* package ships at 0.7.5, and there are no breaking changes.

OLD_VERSION=0.7.4  # the Core version your project uses today
npm install @astryxdesign/core@0.7.5 @astryxdesign/cli@0.7.5  # plus every other @astryxdesign/* package you use, at 0.7.5
npx @astryxdesign/cli upgrade --from "$OLD_VERSION" --apply --path .

Status text, icons, and input borders now use readable shades on the page, and Info is a status of its own instead of borrowing your accent. Text on dark-mode error fills reaches 4.5:1 contrast. In Tailwind, text-<status> and border-<status> now use the readable shades; write text-[var(--color-warning)] to keep the old fill color on text.

Before · 0.7.4	After · 0.7.5

A sheet opened over another sheet now stacks on top. The sheet underneath keeps its state, only one backdrop dims the page, and Escape or a swipe closes just the top sheet. When one sheet closes as another opens, the new one replaces it smoothly, so a multi-step flow can be plain BottomSheets. BottomSheetSwitcher is deprecated but keeps working; the Core changelog has the four-step migration.

- <BottomSheetSwitcher activeSheet={step} onActiveSheetChange={setStep}>
-   <BottomSheet sheetId="shipping" label="Shipping">…</BottomSheet>
-   <BottomSheet sheetId="payment" label="Payment">…</BottomSheet>
- </BottomSheetSwitcher>
+ <BottomSheet isOpen={step === 'shipping'} onOpenChange={isOpen => !isOpen && setStep(s => (s === 'shipping' ? null : s))} label="Shipping">…</BottomSheet>
+ <BottomSheet isOpen={step === 'payment'} onOpenChange={isOpen => !isOpen && setStep(s => (s === 'payment' ? null : s))} label="Payment">…</BottomSheet>

Popover takes presentation: 'popover', 'bottom-sheet', or 'adaptive', which uses a sheet on phones. Adaptive menus and selectors now share one rule for "phone-sized": narrower than the theme's md breakpoint (768px by default) or shorter than 500px. On touch screens, a phone in landscape now gets the sheet, and a screen exactly 768px wide keeps the popover.

- <Popover label="Settings" content={<SettingsContent />}>
+ <Popover label="Settings" content={<SettingsContent />} presentation="adaptive">
    <Button label="Settings" />
  </Popover>

C, C++, SQL, Rust, Kotlin, Swift, and Go are highlighted with no setup. Nine more languages load one at a time, and you can define your own with createCodeLanguage. endContent places your own buttons next to Copy. In a block without a header, Copy gets its own column and no longer covers code.

+ import {createCodeLanguage} from '@astryxdesign/core/CodeBlock';
+ import {graphql} from '@astryxdesign/core/CodeBlock/languages/graphql';
- <CodeBlock code={source} language="zig" tokenizer={tokenize} />
+ <CodeBlock code={source} language={createCodeLanguage({name: 'zig', identifiers: ['zig'], tokenize})} />
+ <CodeBlock code={query} language={graphql} />
+ <CodeBlock code="pnpm astryx init" hasLanguageLabel={false} endContent={<Button label="Run in terminal" />} />

Before · 0.7.4	After · 0.7.5

This is opt-in: pass a useAnimatedLayout handle to Collapsible, TreeList, or Table row expansion as animatedLayout, and the content around the change glides into place instead of jumping. Reduce Motion is respected.

+ const containerRef = useRef(null);
+ const animatedLayout = useAnimatedLayout({containerRef}); // from '@astryxdesign/core/hooks'
- <div>
-   <Collapsible trigger="Advanced settings">…</Collapsible>
+ <div ref={containerRef}>
+   <Collapsible trigger="Advanced settings" animatedLayout={animatedLayout}>…</Collapsible>
  </div>

Numbered markers end on one edge, and multi-digit numbers stay on one line, so the periods after 10, 11, and 12 line up with those after 1 to 9. TreeList chevrons and guide lines sit 4px closer to the edge, with more room before the label.

Before · 0.7.4	After · 0.7.5

A theme icon can pick its artwork by size and by variant, as in <Icon icon="info" variant="filled" />, and themes can set the real glyph size of each Icon size. Built themes keep all of this. Themes that don't use these features look the same as before.

  defineTheme({
+   iconVariants: ['filled'],
    icons: {
-     info: <InfoIcon />,
+     info: ({variant}) => (variant === 'filled' ? <InfoFilledIcon /> : <InfoIcon />),
    },
  });
- <Icon icon="info" />
+ <Icon icon="info" variant="filled" />

astryx experimental render <page> turns a page built with Astryx into one self-contained HTML file that runs no scripts and loads nothing from the network, and --reverse turns the file back into source. Building an icon-set package from an icon library also takes fewer steps. Experimental commands may change in any patch release.

102 fixes, mostly for keyboard, screen-reader, and touch users:

• Reachable and announced: disabled TextInput, TextArea, and NumberInput fields stay in the tab order. Your aria-labelledby and aria-describedby are kept by TextInput, NumberInput, Selector, MultiSelector, Slider, and SegmentedControl. Announcements made inside dialogs and sheets are now spoken, and messages announced together are no longer dropped.
• Touch: the phone keyboard opens on the first tap of a clear button or search field. Tooltips open only on a real tap. Pinch-zoom works over swipeable rows and date pickers. A long-press ContextMenu stays open when the finger lifts.
• Layers and motion: toasts stay usable above open bottom sheets. Tall tooltips no longer cover their trigger. Popovers no longer capture Tab presses from the rest of the page. Reduce Motion now gives touch users a short fade instead of slides.
• Faster: pages with many closed popovers load faster, and scrolling does less work per frame.
• CLI: astryx upgrade finishes and lists anything it can't migrate safely, lists the files it already changed when it fails, and skips symlinked dependency folders.

None. No package, entry point, or exported name was removed. BottomSheetSwitcher, BottomSheet's sheetId, and CodeBlock's tokenizer prop are deprecated but still work.

core · cli · richtext · build · theme-butter · theme-chocolate · theme-gothic · theme-matcha · theme-neutral · theme-stone · theme-y2k

The images are real renders of the same scene, built from the 0.7.4 source and from 0.7.5 in Chrome with the default theme. The two animations are recorded from the project's own Storybook examples at 0.7.5.

Thanks to everyone who contributed to this release:

@aashish254 @cixzhang @ejhammond @ernestt @harjothkhara @HelloOjasMutreja @imdreamrunner @josephfarina @kentonquatman @korkt-kim @kyu-rong @light-merlin-dark @nbozidarevic @nynexman4464 @parinith-web @rubyycheung @thewebartisan7 @vjeux

Full Changelog: https://github.com/meta/astryx/compare/v0.7.4...v0.7.5

Astryx 0.7.5 is a patch release. Every @astryxdesign/* package ships at 0.7.5, and there are no breaking changes.

OLD_VERSION=0.7.4  # the Core version your project uses today
npm install @astryxdesign/core@0.7.5 @astryxdesign/cli@0.7.5  # plus every other @astryxdesign/* package you use, at 0.7.5
npx @astryxdesign/cli upgrade --from "$OLD_VERSION" --apply --path .

Status text, icons, and input borders now use readable shades on the page, and Info is a status of its own instead of borrowing your accent. Text on dark-mode error fills reaches 4.5:1 contrast. In Tailwind, text-<status> and border-<status> now use the readable shades; write text-[var(--color-warning)] to keep the old fill color on text.

Before · 0.7.4	After · 0.7.5

A sheet opened over another sheet now stacks on top. The sheet underneath keeps its state, only one backdrop dims the page, and Escape or a swipe closes just the top sheet. When one sheet closes as another opens, the new one replaces it smoothly, so a multi-step flow can be plain BottomSheets. BottomSheetSwitcher is deprecated but keeps working; the Core changelog has the four-step migration.

- <BottomSheetSwitcher activeSheet={step} onActiveSheetChange={setStep}>
-   <BottomSheet sheetId="shipping" label="Shipping">…</BottomSheet>
-   <BottomSheet sheetId="payment" label="Payment">…</BottomSheet>
- </BottomSheetSwitcher>
+ <BottomSheet isOpen={step === 'shipping'} onOpenChange={isOpen => !isOpen && setStep(s => (s === 'shipping' ? null : s))} label="Shipping">…</BottomSheet>
+ <BottomSheet isOpen={step === 'payment'} onOpenChange={isOpen => !isOpen && setStep(s => (s === 'payment' ? null : s))} label="Payment">…</BottomSheet>

Popover takes presentation: 'popover', 'bottom-sheet', or 'adaptive', which uses a sheet on phones. Adaptive menus and selectors now share one rule for "phone-sized": narrower than the theme's md breakpoint (768px by default) or shorter than 500px. On touch screens, a phone in landscape now gets the sheet, and a screen exactly 768px wide keeps the popover.

- <Popover label="Settings" content={<SettingsContent />}>
+ <Popover label="Settings" content={<SettingsContent />} presentation="adaptive">
    <Button label="Settings" />
  </Popover>

C, C++, SQL, Rust, Kotlin, Swift, and Go are highlighted with no setup. Nine more languages load one at a time, and you can define your own with createCodeLanguage. endContent places your own buttons next to Copy. In a block without a header, Copy gets its own column and no longer covers code.

+ import {createCodeLanguage} from '@astryxdesign/core/CodeBlock';
+ import {graphql} from '@astryxdesign/core/CodeBlock/languages/graphql';
- <CodeBlock code={source} language="zig" tokenizer={tokenize} />
+ <CodeBlock code={source} language={createCodeLanguage({name: 'zig', identifiers: ['zig'], tokenize})} />
+ <CodeBlock code={query} language={graphql} />
+ <CodeBlock code="pnpm astryx init" hasLanguageLabel={false} endContent={<Button label="Run in terminal" />} />

Before · 0.7.4	After · 0.7.5

This is opt-in: pass a useAnimatedLayout handle to Collapsible, TreeList, or Table row expansion as animatedLayout, and the content around the change glides into place instead of jumping. Reduce Motion is respected.

+ const containerRef = useRef(null);
+ const animatedLayout = useAnimatedLayout({containerRef}); // from '@astryxdesign/core/hooks'
- <div>
-   <Collapsible trigger="Advanced settings">…</Collapsible>
+ <div ref={containerRef}>
+   <Collapsible trigger="Advanced settings" animatedLayout={animatedLayout}>…</Collapsible>
  </div>

Numbered markers end on one edge, and multi-digit numbers stay on one line, so the periods after 10, 11, and 12 line up with those after 1 to 9. TreeList chevrons and guide lines sit 4px closer to the edge, with more room before the label.

Before · 0.7.4	After · 0.7.5

A theme icon can pick its artwork by size and by variant, as in <Icon icon="info" variant="filled" />, and themes can set the real glyph size of each Icon size. Built themes keep all of this. Themes that don't use these features look the same as before.

  defineTheme({
+   iconVariants: ['filled'],
    icons: {
-     info: <InfoIcon />,
+     info: ({variant}) => (variant === 'filled' ? <InfoFilledIcon /> : <InfoIcon />),
    },
  });
- <Icon icon="info" />
+ <Icon icon="info" variant="filled" />

astryx experimental render <page> turns a page built with Astryx into one self-contained HTML file that runs no scripts and loads nothing from the network, and --reverse turns the file back into source. Building an icon-set package from an icon library also takes fewer steps. Experimental commands may change in any patch release.

102 fixes, mostly for keyboard, screen-reader, and touch users:

• Reachable and announced: disabled TextInput, TextArea, and NumberInput fields stay in the tab order. Your aria-labelledby and aria-describedby are kept by TextInput, NumberInput, Selector, MultiSelector, Slider, and SegmentedControl. Announcements made inside dialogs and sheets are now spoken, and messages announced together are no longer dropped.
• Touch: the phone keyboard opens on the first tap of a clear button or search field. Tooltips open only on a real tap. Pinch-zoom works over swipeable rows and date pickers. A long-press ContextMenu stays open when the finger lifts.
• Layers and motion: toasts stay usable above open bottom sheets. Tall tooltips no longer cover their trigger. Popovers no longer capture Tab presses from the rest of the page. Reduce Motion now gives touch users a short fade instead of slides.
• Faster: pages with many closed popovers load faster, and scrolling does less work per frame.
• CLI: astryx upgrade finishes and lists anything it can't migrate safely, lists the files it already changed when it fails, and skips symlinked dependency folders.

None. No package, entry point, or exported name was removed. BottomSheetSwitcher, BottomSheet's sheetId, and CodeBlock's tokenizer prop are deprecated but still work.

core · cli · richtext · build · theme-butter · theme-chocolate · theme-gothic · theme-matcha · theme-neutral · theme-stone · theme-y2k

The images are real renders of the same scene, built from the 0.7.4 source and from 0.7.5 in Chrome with the default theme. The two animations are recorded from the project's own Storybook examples at 0.7.5.

Thanks to everyone who contributed to this release:

@aashish254 @cixzhang @ejhammond @ernestt @harjothkhara @HelloOjasMutreja @imdreamrunner @josephfarina @kentonquatman @korkt-kim @kyu-rong @light-merlin-dark @nbozidarevic @nynexman4464 @parinith-web @rubyycheung @thewebartisan7 @vjeux

Full Changelog: https://github.com/meta/astryx/compare/v0.7.4...v0.7.5

• #5325 by @dylans –
  • Fix useElement and usePath re-rendering every descendant element when an ancestor element changes, such as every cell of a table on each keystroke in one cell. They now re-render only when their own element or path changes.

• Updated @platejs/core.

• Updated @platejs/core, @platejs/utils.

Thanks to everyone who contributed to this release:

@dylans

Full changelog: v53.5.1...v53.5.2

• autoplay: ignore start() and stop() on a destroyed instance (#8251) (ef055a6), closes #8036
• core: defer layout updates until a hidden container has a size (#8243) (58b4c85), closes #8240
• core: keep cssMode sliders on their slide when a resize moves the scroll (#8250) (e7d7bdc), closes #8246 #8246 #8254 #8246 #8254
• core: loop forward navigation with few slides (cards effect, loopAdditionalSlides) (e17098c), closes #8008
• core: mount elements from another window (iframe) (947ed58), closes #8245
• core: slidePrev overshoot with slidesPerView auto + slidesPerGroupAuto (602988e), closes #8235
• core: slideToLoop leaves part of the view empty in centered loop with few slides (f5f9adc), closes #8253
• navigation: prevent navigation button icon clipping and vertical disalignment (8e1723c), closes #8161
• react: reset forwarded ref on unmount (c458f3d), closes #8255
• scrollbar: reposition the drag when the scrollbar size is updated (#8252) (fd71137), closes #8248
• thumbs: scroll thumbs the right way when the main swiper loops (#8249) (88560f8), closes #8238

• fix(dockview-core): keep the active tab highlighted when a tab is reinserted for contiguity by @mathuo in https://github.com/dockview/dockview/pull/1750
• fix(dockview-core): report the group-active transition when a panel changes group by @mathuo in https://github.com/dockview/dockview/pull/1751
• fix(dockview-core): make splitview orientation changes idempotent and rescale views by @mathuo in https://github.com/dockview/dockview/pull/1752

Full Changelog: https://github.com/dockview/dockview/compare/v8.8.2...v8.8.3

• Improved performance of repeated net.fetch() calls for file: URLs. #55481 ^{(Also in 44, 45, 46)}

• Backported fixes from upstream ANGLE, Chromium, libaom, libvpx, PDFium, Skia, V8 and WebRTC. #55517

• Backported fixes from upstream Chromium. #55523
• Updated Chromium to 156.0.8078.75. #55419