@microbit/ui 0.1.0-alpha.22 → 0.1.0-alpha.24

package/src/Toast.tsx

@@ -23,7 +23,6 @@ import { toast as toastRecipe } from "styled-system/recipes";
 import { CloseIcon } from "./CloseIcon";
 import { Icon } from "./Icon";
 import { uiMessage } from "./messages";
-import { VisuallyHidden } from "./VisuallyHidden";
 
 export type ToastStatus = "info" | "success" | "warning" | "error";
 
@@ -84,11 +83,11 @@ export const toastQueue = new RACToastQueue<ToastContent>({
 // call onClose, so closeAll empties both.
 const keysById = new Map<string, string>();
 
-// Status icon matching Chakra's AlertIcon (filled glyphs, coloured by the
-// toast foreground = white here). Warning is a triangle, error a circle, as
-// in Chakra — the glyph must distinguish them because the colours alone
-// don't reliably. The icon is decorative; the status is announced via the
-// visually hidden status text.
+// Status icon (filled glyphs, coloured by the toast foreground = white
+// here). Warning is a triangle, error a circle — the glyph must distinguish
+// them because the colours alone don't reliably. The glyph is also what
+// carries the status for assistive tech, via its accessible name (see
+// ToastProvider).
 const statusIcon: Record<ToastStatus, IconType> = {
   info: RiInformationFill,
   success: RiCheckboxCircleFill,
@@ -131,21 +130,24 @@ export const ToastProvider = () => {
             // group and lets old/new pair up across the transition.
             style={{ viewTransitionName: toast.key }}
           >
-            <Icon as={statusIcon[status]} className={slots.icon} aria-hidden />
-            <RACToastContent>
-              {/* Colour and icon are the only visible status signals; say it
-                  for assistive tech too. */}
-              <VisuallyHidden>
-                {intl.formatMessage(uiMessage(`ui.toast-status-${status}`))}{" "}
-              </VisuallyHidden>
-              {toast.content.title && (
-                <p className={slots.title}>{toast.content.title}</p>
-              )}
-              {toast.content.description && (
-                <div className={slots.description}>
-                  {toast.content.description}
-                </div>
-              )}
+            <RACToastContent className={slots.content}>
+              <Icon
+                as={statusIcon[status]}
+                className={slots.icon}
+                aria-label={intl.formatMessage(
+                  uiMessage(`ui.toast-status-${status}`),
+                )}
+              />
+              <div className={slots.body}>
+                {toast.content.title && (
+                  <p className={slots.title}>{toast.content.title}</p>
+                )}
+                {toast.content.description && (
+                  <div className={slots.description}>
+                    {toast.content.description}
+                  </div>
+                )}
+              </div>
             </RACToastContent>
             {toast.content.isClosable && (
               <RACButton
@@ -181,19 +183,18 @@ export interface ToastFn {
    */
   isActive(id: string): boolean;
   /**
-   * Replace a queued toast's content (Chakra's toast.update). The toast is
-   * re-added, so unlike Chakra it re-animates, restarts any timeout, and
-   * takes its place at the front of the queue.
+   * Replace a queued toast's content. The toast is re-added: it re-animates,
+   * restarts any timeout, and takes its place at the front of the queue.
    */
   update(id: string, options: ToastOptions): void;
-  /** Dismiss every toast, queued as well as displayed (Chakra's toast.closeAll). */
+  /** Dismiss every toast, queued as well as displayed. */
   closeAll(): void;
 }
 
 /**
- * useToast — imperative toast trigger in the shape of Chakra's `useToast()`
- * call sites: `toast({ title, description, status, duration })`. Unlike
- * Chakra there is no `duration: null`; use `persistent: true` instead.
+ * useToast — imperative toast trigger:
+ * `toast({ title, description, status, duration })`. There is no
+ * `duration: null`; use `persistent: true` instead.
  */
 export const useToast = (): ToastFn =>
   useMemo(() => {

package/src/Tooltip.recipe.ts

@@ -6,17 +6,12 @@
 import { defineRecipe } from "@pandacss/dev";
 
 /**
- * Tooltip recipe — Chakra's dark tooltip.
+ * Tooltip recipe — the dark tooltip.
  *
  * A recipe rather than styles inside the component because tooltip typography
- * is the kind of thing an app sets once for all of them: classroom's Chakra
- * theme did exactly that (`fontSize: md`), and a `css` override at today's
- * call sites would quietly not apply to tomorrow's.
- *
- * The colour, vertical padding and radius are Chakra's exactly. They had
- * drifted (white, `py: 1`, `borderRadius: md`) while this lived inside the
- * component, which classroom's port measured: a 6px radius where Chakra drew
- * 2px. ml-trainer and python-editor pick the correction up too.
+ * is the kind of thing an app sets once for all of them (classroom does,
+ * `fontSize: md`), and a `css` override at today's call sites would quietly
+ * not apply to tomorrow's.
  *
  * Registered in the base preset (base-preset.ts).
  */

package/src/Tooltip.tsx

@@ -12,9 +12,9 @@ import { PopoverArrow } from "./PopoverArrow";
 
 export interface TooltipProps {
   /**
-   * Tooltip body (Chakra's `label`). Not named `content`: Panda extracts
-   * utility-named props with literal values from any JSX component, so a
-   * `content` prop taking a string would emit a broken CSS `content` rule.
+   * Tooltip body. Not named `content`: Panda extracts utility-named props
+   * with literal values from any JSX component, so a `content` prop taking a
+   * string would emit a broken CSS `content` rule.
    */
   label: ReactNode;
   /** A single focusable trigger element (e.g. a Button). */
@@ -60,10 +60,8 @@ export interface TooltipProps {
    *
    * This is what makes a tooltip hoverable, as WCAG 1.4.13 asks: react-aria
    * puts hover handlers on the tooltip that re-open it, but with an immediate
-   * close it has unmounted before the pointer can cross the gap. Chakra closed
-   * on mouse-out and we matched that at first; a tooltip that vanishes as you
-   * reach for it is not worth the parity. Pass 0 where the delay is wrong for a
-   * particular control.
+   * close it has unmounted before the pointer can cross the gap. Pass 0 where
+   * the delay is wrong for a particular control.
    */
   closeDelay?: number;
   /**
@@ -79,10 +77,10 @@ export interface TooltipProps {
 }
 
 /**
- * Tooltip — react-aria-components TooltipTrigger + Tooltip, styled to match
- * Chakra's dark tooltip. The child must be a focusable element so the tooltip
- * is reachable by keyboard (RAC requirement), unless `triggerRef` provides
- * the anchor and the caller manages open state and keyboard access itself.
+ * Tooltip — react-aria-components TooltipTrigger + Tooltip in the dark
+ * tooltip style. The child must be a focusable element so the tooltip is
+ * reachable by keyboard (RAC requirement), unless `triggerRef` provides the
+ * anchor and the caller manages open state and keyboard access itself.
  */
 export const Tooltip = ({
   label,

package/src/TooltipButton.tsx

@@ -94,8 +94,7 @@ export interface TooltipButtonProps {
  * (`ContextualHelp`), not a tooltip, which would remove the hidden copy of the
  * body and the pointer-geometry keep-alive below rather than work around them.
  * Tracked as microbit-foundation/ui#63, which would deprecate this component;
- * see "Open across the completed migrations" in docs/migration-playbook.md
- * before extending it.
+ * prefer that direction over extending it.
  */
 export const TooltipButton = ({
   label,

package/src/UnmountCallback.tsx

@@ -7,8 +7,8 @@ import { useEffect, useRef } from "react";
 
 /**
  * Runs its callback when unmounted. RAC keeps an overlay tree mounted until
- * the exit transition finishes, so mounting this inside a Modal/Drawer gives
- * the equivalent of Chakra's `onCloseComplete`. Internal to shared-ui.
+ * the exit transition finishes, so mounting this inside the overlay
+ * implements Modal/Drawer's `onCloseComplete`. Internal to shared-ui.
  */
 export const UnmountCallback = ({ callback }: { callback?: () => void }) => {
   const ref = useRef(callback);

package/src/VisuallyHidden.tsx

@@ -7,7 +7,7 @@ import { styled } from "styled-system/jsx";
 
 /**
  * VisuallyHidden — screen-reader-only content (Panda's `srOnly` utility).
- * Renders a span like Chakra's; use `as="div"` for block children.
+ * Renders a span; use `as="div"` for block children.
  */
 export const VisuallyHidden = styled("span", {
   base: { srOnly: true },

package/src/base-preset.ts

@@ -63,7 +63,7 @@ import { toast } from "./Toast.recipe";
 // Override values, never names: raw var(--colors-gray-*) references and
 // paired private presets depend on the names, so a rename is a breaking
 // change to both and needs every app and paired preset moved in lockstep
-// (as was done when Chakra's misnamed darker-than-50 stop `25` became
+// (as was done when the misnamed darker-than-50 stop `25` became
 // `75`). And never override partially in a way that lets a stop fall
 // through to a different grey system.
 const gray = {
@@ -88,17 +88,17 @@ const gray = {
  * (pill `radii.button`, `outline*` focus shadows, Helvetica fonts, the
  * `language`/`toolbar` button variants in Button.recipe.ts, the
  * `languageText`/`toast*Bg`/`statusBarBg` semantic tokens), the shared-ui
- * component recipes, the react-aria condition widening, the Chakra-reset
- * parity `globalCss`, and the `staticCss` that keeps runtime-prop recipe
+ * component recipes, the react-aria condition widening, the `globalCss`
+ * defaults, and the `staticCss` that keeps runtime-prop recipe
  * variants generated. Used alone it renders in the OSS default look.
  *
  * ── Brand contract ──────────────────────────────────────────────────────
  * A private brand preset (a sibling repo, e.g. CreateAI) is merged AFTER this
  * one to restyle everything by overriding just these token *values* (never
  * their names — see the CSS-var contract in the README):
- *   - colours: the `brand` and `brand2` ramps (OSS defaults: Chakra
- *     blue / Chakra's unmodified gray). Other ramps a brand tweaks
- *     (teal/purple/pink/…) already exist in the Chakra scales below.
+ *   - colours: the `brand` and `brand2` ramps (OSS defaults: the blue
+ *     ramp / a legacy slate gray). Other ramps a brand tweaks
+ *     (teal/purple/pink/…) already exist in the base scales below.
  *   - font: `display` (OSS default: Helvetica; e.g. GT Walsheim privately).
  * The recipes and semantic tokens here reference those, so a brand swap needs
  * no recipe changes. With no private preset, these OSS defaults stand.
@@ -126,8 +126,8 @@ export const basePreset = definePreset({
         },
       },
       // Toast enter/exit, played on the view-transition snapshots (see the
-      // ::view-transition rules in globalCss). Chakra-ballpark timings: fade
-      // + short slide in, quicker fade + shrink out.
+      // ::view-transition rules in globalCss): fade + short slide in,
+      // quicker fade + shrink out.
       toastSlideIn: {
         from: { opacity: 0, transform: "translateY(-24px)" },
       },
@@ -140,9 +140,10 @@ export const basePreset = definePreset({
         ...colors,
         gray,
         // OSS default brand ramps (see the brand contract above). `brand`
-        // aliases Chakra blue; `brand2` stays Chakra's slate gray — a frozen
-        // legacy alias, deliberately decoupled from the neutral `gray` above
-        // so ml-trainer's OSS look and `statusBarBg`'s default don't move.
+        // aliases the blue ramp; `brand2` is a frozen legacy alias of the
+        // slate gray in base-tokens, deliberately decoupled from the neutral
+        // `gray` above so ml-trainer's OSS look and `statusBarBg`'s default
+        // don't move.
         // Removing the slot is a follow-up needing an ml-trainer lockstep.
         brand: colors.blue,
         brand2: colors.gray,
@@ -165,7 +166,7 @@ export const basePreset = definePreset({
       },
       shadows: {
         ...shadows,
-        // Chakra's outline shadow widened to 4px, plus dark/light-surface
+        // The 4px focus outline shadow, plus dark/light-surface
         // companions. Consumed via the `focusShadow` utility.
         outline: { value: "0 0 0 4px rgba(66, 153, 225, 0.6)" },
         outlineDark: { value: "0 0 0 4px rgba(0, 0, 0, 0.5)" },
@@ -174,7 +175,7 @@ export const basePreset = definePreset({
       fonts: {
         // Helvetica heading/body (4/4 apps); a brand preset leaves these and
         // overrides only `display` (the marketing font — see the brand
-        // contract above). `mono` is Chakra's default stack.
+        // contract above).
         heading: { value: "Helvetica, Arial, sans-serif" },
         body: { value: "Helvetica, Arial, sans-serif" },
         mono: {
@@ -195,7 +196,7 @@ export const basePreset = definePreset({
         controlCheckedBg: { value: "{colors.brand.500}" },
         controlCheckedHoverBg: { value: "{colors.brand.600}" },
         focusBorder: { value: "{colors.brand.500}" },
-        // Error/destructive ramp (Chakra red). Destructive button variants,
+        // Error/destructive ramp. Destructive button variants,
         // field error states and the error toast; the record* button
         // variants deliberately stay on red.* (recording vocabulary, not
         // danger).
@@ -211,9 +212,6 @@ export const basePreset = definePreset({
         // (CreateAI privately to brand.600 with no hover change,
         // python-editor to brand.500/600 — the default). Semantic tokens so
         // the recipe stays shared and a brand preset overrides only values.
-        // (Was brand2.* — the grey ml-trainer OSS Chakra look — but both
-        // apps' final values sit on their primary brand, so the default
-        // follows; OSS language buttons are brand blue.)
         languageText: { value: "{colors.brand.500}" },
         languageTextHover: { value: "{colors.brand.600}" },
         // The `label`/`subtitle` heading variants' colour (page-title chrome).
@@ -243,8 +241,8 @@ export const basePreset = definePreset({
           secondaryActiveBorder: { value: "{colors.brand.700}" },
           secondaryActiveBg: { value: "{colors.brand.50}" },
         },
-        // Toast status colours: the Chakra-era toast Alert restyle (teal for
-        // every status except error) shared across the app family.
+        // Toast status colours (teal for every status except error), shared
+        // across the app family.
         toastInfoBg: { value: "{colors.teal.800}" },
         toastSuccessBg: { value: "{colors.teal.800}" },
         toastWarningBg: { value: "{colors.teal.800}" },
@@ -280,20 +278,18 @@ export const basePreset = definePreset({
       toast,
     },
   },
-  // What ChakraProvider used to inject and Panda's preflight doesn't cover:
-  // the theme's styles.global (body text/background defaults, global
-  // border/placeholder colours) plus the parts of Chakra's CSS reset that
-  // Panda's has no equivalent for — kerning/text-rendering (their absence
-  // shifts glyphs page-wide), word-wrap and touch-action. Token references
-  // resolve against the merged preset stack, so the values track any brand
-  // overrides exactly as they did under Chakra's runtime theme.
+  // Global defaults Panda's preflight doesn't cover: body text/background,
+  // placeholder colour, kerning/text-rendering (their absence shifts
+  // glyphs page-wide) and touch-action. Token references resolve against
+  // the merged preset stack, so the values track any brand overrides.
   globalCss: {
     html: {
       textRendering: "optimizeLegibility",
       touchAction: "manipulation",
     },
     body: {
-      position: "relative",
+      // No `position: relative` (Chakra had it): it breaks react-aria's
+      // overlay positioning — see Tooltip's "In a scrolling page" story.
       minHeight: "100%",
       fontFeatureSettings: '"kern"',
       fontFamily: "body",
@@ -306,20 +302,20 @@ export const basePreset = definePreset({
     "*::placeholder": {
       color: "gray.500",
     },
-    // The `* { border-color; word-wrap }` Chakra-reset parity lives in
-    // ../reset.css, imported into the `reset` layer by consumers'
-    // layers.css — NOT here: globalCss emits into the `base` layer, which
-    // the legacy-Safari cascade-layer flattening specificity-boosts above
-    // runtime-injected CSS (CodeMirror themes) and other app CSS files.
-    // Resets must stay at the bottom (playbook gotcha #28).
-    // Panda's preflight, unlike Chakra's reset, doesn't set the pointer
-    // cursor on buttons. Recipes' disabled states (cursor: not-allowed)
-    // override this from the higher recipes layer.
+    // The `* { border-color; word-wrap }` defaults live in ../reset.css,
+    // imported into the `reset` layer by consumers' layers.css — NOT here:
+    // globalCss emits into the `base` layer, which the legacy-Safari
+    // cascade-layer flattening specificity-boosts above runtime-injected
+    // CSS (CodeMirror themes) and other app CSS files. Resets must stay in
+    // the bottom layer.
+    // Panda's preflight doesn't set the pointer cursor on buttons.
+    // Recipes' disabled states (cursor: not-allowed) override this from
+    // the higher recipes layer.
     "button, [role='button']": {
       cursor: "pointer",
     },
-    // Panda's preflight balance-wraps headings; Chakra didn't, and balanced
-    // multi-line headings break at different points (mobile/translations).
+    // Panda's preflight balance-wraps headings; balanced multi-line
+    // headings break at different points (mobile/translations), so undo it.
     "h1, h2, h3, h4, h5, h6": {
       textWrap: "wrap",
     },
@@ -336,8 +332,8 @@ export const basePreset = definePreset({
     },
     // Toast enter/exit (the ToastQueue wraps updates in
     // document.startViewTransition — see Toast.tsx, which also stamps the
-    // scoping class on <html> while its transitions run). Timings sit in
-    // Chakra's ballpark: 0.4s fade+slide in, 0.2s fade+shrink out; the
+    // scoping class on <html> while its transitions run). Timings: 0.4s
+    // fade+slide in, 0.2s fade+shrink out; the
     // stack reflow comes from the default group animation. `(*)` +
     // `:only-child` matches exactly the entering/exiting toast groups: the
     // root snapshot always has both old and new children, and toasts are
@@ -365,8 +361,8 @@ export const basePreset = definePreset({
   // can silently lose runtime-prop variants.
   staticCss: {
     recipes: {
-      // Size is passed responsively at call sites ported from Chakra's
-      // `size={["md", "lg"]}`, so generate the breakpoint-prefixed variants
+      // Size is passed responsively at call sites
+      // (`size={["md", "lg"]}`), so generate the breakpoint-prefixed variants
       // too — otherwise the class lands on the element with no rule behind it
       // and the button silently falls back to the base size.
       avatar: ["*"],
@@ -410,8 +406,8 @@ export const basePreset = definePreset({
       },
     },
   },
-  // Widen the interaction conditions so the Chakra-shaped recipe/style objects
-  // (`_hover`/`_active`/`_focusVisible`/`_disabled`) also respond to
+  // Widen the interaction conditions so recipe/style objects written with
+  // `_hover`/`_active`/`_focusVisible`/`_disabled` also respond to
   // react-aria-components' data attributes, not just native pseudo-classes.
   conditions: {
     extend: {

package/src/button-icon.ts

@@ -5,9 +5,8 @@
  */
 import { cva } from "styled-system/css";
 
-// Chakra's ButtonIcon: keeps the glyph centred and spaced from the label
-// (iconSpacing 0.5rem). Shared by Button and LinkButton; deliberately not
-// exported from the package index.
+// Keeps the glyph centred and spaced 0.5rem from the label. Shared by Button
+// and LinkButton; deliberately not exported from the package index.
 export const buttonIcon = cva({
   base: {
     display: "inline-flex",

package/src/dense-preset.ts

@@ -11,11 +11,10 @@ const toTokens = (values: Record<string, string>) =>
   ) as Record<string, { value: string }>;
 
 /**
- * The numeric spacing/size grid, Chakra's 0.25rem step × 0.88.
+ * The numeric spacing/size grid, the base 0.25rem step × 0.88.
  *
  * Only the numeric scale is touched: the named `sizes` (`xs`…`8xl`, `max`,
- * `full`, `container.*`) stay at their base-preset values, as they did in
- * both apps' Chakra themes.
+ * `full`, `container.*`) stay at their base-preset values.
  */
 const scale = toTokens({
   px: "1px",
@@ -81,11 +80,11 @@ const denseFontSizes = toTokens({
  * ```
  *
  * Both python-editor and classroom shipped the same "make everything
- * smaller" Chakra theme change (2022): the numeric spacing/sizes grid at
- * × 0.88 and `fontSizes` from `md` up at × 0.9. The two themes' values were
+ * smaller" theme change (2022): the numeric spacing/sizes grid at
+ * × 0.88 and `fontSizes` from `md` up at × 0.9. The two apps' values were
  * byte-identical, so the scale lives here rather than being replicated in
- * each app preset (migration-playbook gotcha #25 — a global scale override
- * hides from every safeguard, so it needs to be explicit and shared).
+ * each app preset — a global scale override hides from every safeguard,
+ * so it needs to be explicit and shared.
  *
  * Whether this density stays or the family aligns on one scale is an open
  * design question; when it is answered, this preset is the single place the

package/src/hooks/useBreakpointValue.ts

@@ -31,10 +31,10 @@ const activeBreakpoint = (): Breakpoint => {
 };
 
 /**
- * JS-side responsive value resolver, replacing Chakra's `useBreakpointValue`.
- * Panda handles responsive *styles* in CSS; this is for responsive *logic*
- * (choosing a prop value, branching behaviour). Resolves to the value at the
- * active breakpoint, falling back to the nearest smaller one that is defined.
+ * JS-side responsive value resolver. Panda handles responsive *styles* in
+ * CSS; this is for responsive *logic* (choosing a prop value, branching
+ * behaviour). Resolves to the value at the active breakpoint, falling back to
+ * the nearest smaller one that is defined.
  */
 export function useBreakpointValue<T>(
   values: Partial<Record<Breakpoint, T>>,

package/src/hooks/useClipboard.ts

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 
 /**
  * Copy a value to the clipboard with a transient `hasCopied` flag for
- * "Copied!" feedback. Replaces Chakra's `useClipboard`.
+ * "Copied!" feedback.
  */
 export function useClipboard(
   value: string,
@@ -34,11 +34,10 @@ export function useClipboard(
 }
 
 /**
- * Chakra's useClipboard wrapped the execCommand-based copy-to-clipboard
- * package, which works on a user gesture in contexts the async API refuses:
- * insecure (non-localhost http) origins, where `navigator.clipboard` is
- * undefined, and frames without a clipboard-write permissions policy, where
- * `writeText` rejects.
+ * execCommand-based fallback copy. Works on a user gesture in contexts the
+ * async API refuses: insecure (non-localhost http) origins, where
+ * `navigator.clipboard` is undefined, and frames without a clipboard-write
+ * permissions policy, where `writeText` rejects.
  */
 function execCommandCopy(value: string): boolean {
   const active = document.activeElement;

package/src/hooks/useDisclosure.ts

@@ -13,12 +13,11 @@ export interface Disclosure {
 }
 
 /**
- * useDisclosure — Chakra's hook of the same name: the open/closed state of a
- * dialog, menu or drawer, and the three functions that change it.
+ * useDisclosure — the open/closed state of a dialog, menu or drawer, and the
+ * three functions that change it.
  *
- * A thin `useState` wrapper, kept because it is the shape a Chakra app's
- * dialog call sites are written in, and because a stable object means a
- * disclosure can be passed to a memoised child without re-rendering it.
+ * A thin `useState` wrapper; the stable object means a disclosure can be
+ * passed to a memoised child without re-rendering it.
  */
 export const useDisclosure = (defaultIsOpen = false): Disclosure => {
   const [isOpen, setIsOpen] = useState(defaultIsOpen);

package/src/hooks/useMediaQuery.ts

@@ -6,10 +6,9 @@
 import { useCallback, useSyncExternalStore } from "react";
 
 /**
- * Tracks a raw CSS media query, replacing Chakra's `useMediaQuery` for
- * queries that aren't breakpoint-based (custom widths, height-based
- * queries). For the preset's breakpoint scale prefer `useBreakpointValue`.
- * Returns false during SSR.
+ * Tracks a raw CSS media query, for queries that aren't breakpoint-based
+ * (custom widths, height-based queries). For the preset's breakpoint scale
+ * prefer `useBreakpointValue`. Returns false during SSR.
  */
 export function useMediaQuery(query: string): boolean {
   const subscribe = useCallback(

package/src/hooks/usePrevious.ts

@@ -5,10 +5,7 @@
  */
 import { useEffect, useRef } from "react";
 
-/**
- * The value from the previous render (undefined on the first render).
- * Replaces Chakra's `usePrevious`.
- */
+/** The value from the previous render (undefined on the first render). */
 export function usePrevious<T>(value: T): T | undefined {
   const ref = useRef<T>();
   useEffect(() => {

package/src/index.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: MIT
  */
 /**
- * shared-ui — react-aria-components + Panda CSS primitives replacing Chakra,
- * designed to be extracted into a library shared across sibling apps. Visuals
- * match the Chakra theme; behaviour follows react-aria patterns.
+ * shared-ui — react-aria-components + Panda CSS primitives shared across the
+ * micro:bit app family. Behaviour follows react-aria patterns; styling comes
+ * from the recipe/token system in the base preset.
  */
 export * from "./system";
 export * from "./Avatar";

package/src/system.ts

@@ -22,13 +22,13 @@ export type {
   GridProps,
 } from "styled-system/jsx";
 
-// Layout patterns — the Panda-native equivalents of Chakra's Box/Flex/Stack/etc.
+// Layout patterns — Box/Flex/Stack/etc.
 //
 // `styled` is re-exported for the `styled(Component)` form, which works from
 // anywhere. The `styled.tag` JSX form does NOT: Panda recognises the factory by
 // the module it was imported from, so `<styled.table css={…}>` on a `styled`
 // imported from here silently produces no CSS. Import it from
-// "styled-system/jsx" for that (playbook gotcha #41).
+// "styled-system/jsx" for that.
 export {
   AspectRatio,
   Box,