feat(Resizable): createResizable is public, and component:Resizable FR3 names it as the owner ResizeHandle and useResizable go through

.changeset/create-resizable.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[feat] `createResizable(handle, options)` makes a plain element a window splitter that resizes a region, without React: a pointer drag that holds its pointer across embedded frames, the arrow keys, Home, End, Enter and a double-click, with bounds, snap points, collapse and saved sizes. It reports the size through `subscribe` and `onSizeChange`, and you size the panel; `destroy` removes every listener and attribute it added. The handle is named and announced with the message catalog's English messages: `label` names it, and `collapsedLabel` replaces the "Collapsed" it announces while collapsed. `useResizable(handleRef, options)` is its React form. The configuration-object `useResizable` and ResizeHandle build on it, with no behavior change beyond the fixes listed separately.
+
+@vjeux

.changeset/resizable-percentage-default-after-hydration.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] A server-rendered `useResizable` region whose `defaultSize` is a percentage and that has no `containerRef` hydrates with the server's markup, then resolves the percentage against the window, instead of keeping the size the server resolved.
+
+@vjeux

.changeset/resizable-saved-size-after-hydration.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] A server-rendered `useResizable` region with an `autoSaveId` hydrates with the server's markup and takes its saved size in the next commit, so hydration no longer reports a mismatch and the handle announces the saved size.
+
+@vjeux

.changeset/resize-handle-disabled-tab-stop.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] A disabled `ResizeHandle` keeps its tab stop. Before, it left the tab order, so keyboard users could not reach it to hear that it is disabled. Now it stays in the tab order, as a disabled control keeps its tab stop, and it still ignores pointer and keyboard input and says so with `aria-disabled`.
+
+@vjeux

.changeset/use-resizable-handle-ref.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[feat] `useResizable(handleRef, options)` makes the element behind the ref a window splitter, beside the configuration-object form: give the same ref to `ResizeHandle` (or to a plain element) and render the panel at `size`. It returns the region's size, collapse state and controls, in the commit that `onCollapseChange`'s own state lands in. A `ResizeHandle` given the ref renders the region and drives it, and a plain element is named and announced through the message catalog. Its options type, `CreateResizableOptions`, is exported, and its `collapsedLabel` replaces the "Collapsed" text that a collapsed handle announces.
+
+@vjeux

apps/storybook/stories/createResizable.stories.tsx

@@ -0,0 +1,124 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {useEffect, useRef} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import * as stylex from '@stylexjs/stylex';
+import {
+  colorVars,
+  radiusVars,
+  spacingVars,
+} from '@astryxdesign/core/theme/tokens.stylex';
+import {createResizable} from '@astryxdesign/core/Resizable';
+
+const s = stylex.create({
+  shell: {
+    display: 'flex',
+    height: 300,
+    width: '100%',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colorVars['--color-border'],
+    borderRadius: radiusVars['--radius-container'],
+    overflow: 'hidden',
+  },
+  // The width the region reports is the sidebar's whole width, so the
+  // padding sits on an inner element: a sidebar collapsed to 0 leaves no
+  // strip.
+  sidebar: {
+    flexShrink: 0,
+    backgroundColor: colorVars['--color-background-muted'],
+    overflow: 'hidden',
+  },
+  sidebarContent: {
+    padding: spacingVars['--spacing-3'],
+    whiteSpace: 'nowrap',
+  },
+  divider: {
+    flexShrink: 0,
+    width: 8,
+    cursor: 'col-resize',
+    backgroundColor: colorVars['--color-border'],
+    outline: {
+      default: 'none',
+      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
+    },
+    touchAction: 'none',
+  },
+  preview: {
+    flexGrow: 1,
+    minWidth: 0,
+    borderWidth: 0,
+  },
+});
+
+/**
+ * A split view whose divider is a plain element: createResizable makes it a
+ * window splitter, and the sidebar's width follows `size` through
+ * `subscribe`. React renders the elements once and holds no resize state.
+ * The preview is an embedded frame: a drag across it keeps going, because the
+ * divider holds its pointer for the whole drag.
+ */
+function PlainSplit() {
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const sizeRef = useRef<HTMLSpanElement>(null);
+  const dividerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const sidebar = sidebarRef.current;
+    const size = sizeRef.current;
+    const divider = dividerRef.current;
+    if (sidebar == null || size == null || divider == null) {
+      return;
+    }
+    const resizable = createResizable(divider, {
+      defaultSize: 160,
+      minSize: 120,
+      maxSize: 320,
+      collapsible: true,
+      label: 'Resize sidebar',
+    });
+    const paint = () => {
+      sidebar.style.width = `${resizable.size}px`;
+      size.textContent = `${Math.round(resizable.size)}px`;
+    };
+    paint();
+    const stop = resizable.subscribe(paint);
+    return () => {
+      stop();
+      resizable.destroy();
+    };
+  }, []);
+  return (
+    <div {...stylex.props(s.shell)}>
+      <div ref={sidebarRef} data-testid="sidebar" {...stylex.props(s.sidebar)}>
+        <div {...stylex.props(s.sidebarContent)}>
+          Sidebar <span ref={sizeRef} data-testid="sidebar-size" />
+        </div>
+      </div>
+      <div ref={dividerRef} {...stylex.props(s.divider)} />
+      <iframe
+        title="Preview"
+        srcDoc="<!doctype html><body style='margin:0;font:14px system-ui;display:grid;place-items:center;height:100vh'>Embedded preview</body>"
+        {...stylex.props(s.preview)}
+      />
+    </div>
+  );
+}
+
+const meta: Meta<typeof PlainSplit> = {
+  title: 'Core/Hooks/createResizable',
+  component: PlainSplit,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'createResizable(handle, options) makes a plain element a window splitter, without React. It reports the size; the caller sizes the panel. In React, use useResizable(handleRef, options) with ResizeHandle.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PlainSplit>;
+
+/** Drag the divider right, across the preview, and back; or focus it and use the arrow keys, Home, End and Enter. */
+export const WithEmbeddedFrame: Story = {};

docs/architecture/internationalization.md

@@ -440,7 +440,7 @@ callers remain conformance work and do not relax INV1a, INV8, INV9, or INV10.
 | INV1, INV1a, INV7  | hardcoded-string lint, catalog tests, component translation tests with a non-English provider                                                                                                                                                                                                                                                                                                                                                                                                                                   | Astryx-owned text bypasses the catalog, an announcement or count is assembled from fragments or a hand-rolled plural, or non-string output reaches visible/AT attributes                                                                                                                                                                                                      |
 | INV2, INV13, INV14 | export drift checks, public i18n tests, compatibility review                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | A parallel/replacement runtime lands without migration, or client hooks claim server behavior                                                                                                                                                                                                                                                                                 |
 | INV3–INV5          | resolver and provider rerender tests                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | no-provider output depends on the host, locale swaps stay stale, fallback order changes, or malformed-locale behavior is described as graceful                                                                                                                                                                                                                                |
-| INV3a              | factory unit tests: a flat option or `labels` key replaces its message, including under a provider, and outside a provider its absence announces or shows shipped English; wrapper tests: under a non-English provider its absence gives the translation. Evidence gap: no factory test covers a flat option or `labels` key yet                                                                                                                                                                                                | a factory announces or shows Astryx text that no option or `labels` key can replace, groups more than one string outside one `labels` object, takes a translator, ignores a given string, or gives something other than the catalog message when it is absent                                                                                                                 |
+| INV3a              | factory unit tests: a flat option or `labels` key replaces its message, including under a provider, and outside a provider its absence announces or shows shipped English; wrapper tests: under a non-English provider its absence gives the translation. Evidence gap: no factory test covers a `labels` key, or a flat option under a provider, yet                                                                                                                                                                           | a factory announces or shows Astryx text that no option or `labels` key can replace, groups more than one string outside one `labels` object, takes a translator, ignores a given string, or gives something other than the catalog message when it is absent                                                                                                                 |
 | INV6               | `check:i18n-catalog`, key-format lint, and focused mutation tests                                                                                                                                                                                                                                                                                                                                                                                                                                                               | stale/malformed keys, malformed ICU, or source/translation runtime-contract drift passes CI                                                                                                                                                                                                                                                                                   |
 | INV15              | generator tests, `check:i18n-runtime`, package-export drift check, provider/resolver runtime-catalog tests; per-module English resolution-parity test (every key each Core module names, in every shipped locale’s fallback path, its own map versus the whole catalog); import-cost check (component bundles carry only the English they name; public paths keep the whole catalog)                                                                                                                                            | a generated module carries descriptions or is committed, a malformed entry projects instead of failing, a rich export path changes, or a `RuntimeCatalog` input is rejected or leaks a non-rich context shape, a key a module names resolves differently from the whole catalog, a component bundle carries the whole catalog, or a public path stops resolving a shipped key |
 | INV16              | build-plugin unit and real-build tests                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | a rich or generated locale import fails to resolve through the standard plugin                                                                                                                                                                                                                                                                                                |