flet-box 1.1.0 → 1.1.2

package/src/navigations/AppBar.js

@@ -131,18 +131,27 @@ export const AppBar = (props) => {
   // Auto-create a back button if requested and no custom leading was supplied.
   let finalLeading = leading;
   if (showBackButton && !finalLeading) {
-    const backButton = Icon({
+    // `onclick` as a prop, not an assignment: the engine reads it while the
+    // widget is being built, and that is what gives the icon a role, a Tab stop
+    // and Enter. Assigned afterwards it is a mouse-only glyph. A named icon is
+    // also the only way it is not `aria-hidden`, and an aria-hidden control you
+    // can tab to is worse than no control.
+    finalLeading = Icon({
       name: "arrow_back",
       size: 24,
+      // 24 of glyph plus 8 of padding is the 40-unit target a thumb needs. Both
+      // numbers are framework units, so the target grows with the reader's font.
+      paddingVertical: 8,
+      paddingHorizontal: 8,
       color: iconColor,
       cursor: "pointer",
+      "aria-label": "Go back",
+      onclick: () => {
+        if (onBackPress) onBackPress();
+        else if (backButtonRoute) goTo(backButtonRoute);
+        else goBack();
+      },
     });
-    backButton.onclick = () => {
-      if (onBackPress) onBackPress();
-      else if (backButtonRoute) goTo(backButtonRoute);
-      else goBack();
-    };
-    finalLeading = backButton;
   }
 
   // ========== BACKGROUND ==========

package/src/navigations/BottomNavigation.js

@@ -101,6 +101,10 @@ export const BottomNavigation = (props) => {
 
   const container = WidgetFactory({
     tag: "nav",
+    // A page with a sidebar, a tab bar and this bar has three regions called
+    // "navigation"; the name is what tells them apart. An app that disagrees can
+    // pass its own `aria-label`, which wins below.
+    "aria-label": "Main navigation",
     display: "flex",
     width: `calc(100% - ${toREM(finalMarginLeft)} - ${toREM(finalMarginRight)})`,
     height: height,
@@ -116,6 +120,19 @@ export const BottomNavigation = (props) => {
     ...rest,
   });
 
+  /**
+   * Mark which tab is the page you are on. The colour says it to an eye and
+   * nothing says it to a reader, who otherwise hears a row of identical buttons.
+   *
+   * @param {number} index - The index of the newly active tab.
+   */
+  const markActive = (index) => {
+    buttons.forEach((btnData, i) => {
+      if (i === index) btnData.btn.setAttribute("aria-current", "page");
+      else btnData.btn.removeAttribute("aria-current");
+    });
+  };
+
   /**
    * Update icon and label colors for the given active tab index.
    * Used exclusively in non-router mode where the bar manages its own state.
@@ -123,6 +140,7 @@ export const BottomNavigation = (props) => {
    * @param {number} index - The index of the newly active tab.
    */
   const updateActive = (index) => {
+    markActive(index);
     buttons.forEach((btnData, i) => {
       const isActive = i === index;
       const icon = btnData.btn.querySelector(".material-icons");
@@ -159,6 +177,8 @@ export const BottomNavigation = (props) => {
       if (isSelected) activeIndex = idx;
     });
 
+    markActive(activeIndex);
+
     // Fire only when the route actually moved the selection. A consumer that
     // navigates from `onTabChange` (the normal case) would otherwise recurse:
     // route change -> callback -> goTo -> route change, until the stack blows.
@@ -189,6 +209,9 @@ export const BottomNavigation = (props) => {
       cursor: "pointer",
       padding: "8px 0",
       backgroundColor: "transparent",
+      // Which page you are on has to be said, not only coloured. In router mode
+      // `markActive` re-states this on every navigation.
+      "aria-current": isActive ? "page" : undefined,
       onclick: () => {
         if (useRouter) {
           goTo(itemRoute);
@@ -218,7 +241,7 @@ export const BottomNavigation = (props) => {
       // vacío. La prop correcta para contenido de texto es `text`.
       labelWidget = Text({
         text: item.label,
-        size: 11,
+        size: 12,
         color: isActive ? selectedColor : unselectedColor,
         fontWeight: isActive ? "500" : "400",
         className: "bottom-nav-label",

package/src/navigations/CollapsibleSideBar.js

@@ -1,7 +1,6 @@
 // navigations/CollapsibleSideBar.js
 import { WidgetFactory } from "../widget-factory/index.js";
 import { Container } from "../widgets/Container.js";
-import { Column } from "../widgets/Column.js";
 import { Icon } from "../widgets/Icon.js";
 import { useState } from "../tools/useState.js";
 import { colors } from "../utils/themes.js";

package/src/navigations/Drawer.js

@@ -52,6 +52,10 @@ let drawerInstance = null;
  * two corners that face away from the screen edge) to maintain a flush
  * attachment at the edge side.
  *
+ * The panel paints edge to edge and pads its content by the device's safe-area
+ * insets, so a header clears the notch and a footer clears the home indicator
+ * without the background leaving a gap at either edge.
+ *
  * The module keeps a singleton reference so the standalone helper functions
  * (openDrawer, closeDrawer, etc.) can be called without passing an instance.
  *
@@ -59,6 +63,7 @@ let drawerInstance = null;
  * @returns {DrawerInstance}
  */
 import { toREM } from "../utils/units.js";
+import { trapFocus } from "../utils/focusScope.js";
 
 export const Drawer = (props = {}) => {
   const {
@@ -77,12 +82,16 @@ export const Drawer = (props = {}) => {
     closeOnEsc = true,
     borderRadius = 24,
     margin = 0,
-    ...rest
   } = props;
 
   const element = document.createElement("div");
   let isOpen = false;
   let closeTimer = null;
+  // What `trapFocus` hands back while the drawer is open: with a backdrop over
+  // the page, Tab must not walk into that page (see Modal.js for the argument).
+  // `trapFocus`'s release is idempotent, so close and unmount can both call it,
+  // and the no-op default covers "closed before it was ever opened".
+  let releaseFocusScope = () => {};
 
   // The outer wrapper covers the full screen so the backdrop sits above all
   // other content. It starts hidden and becomes visible on open().
@@ -116,12 +125,26 @@ export const Drawer = (props = {}) => {
   drawerPanel.style.flexDirection = "column";
   drawerPanel.style.backgroundColor = bgColor;
   drawerPanel.style.overflow = "hidden";
+  // A full-height panel reaches both edges of the screen, and on a notched
+  // phone those edges are the status bar and the home indicator: the header
+  // disappeared under the island and the footer's last row sat under the
+  // gesture bar. The background must stay flush, so only the content moves —
+  // which makes the insets padding, and `border-box` is what stops that padding
+  // from pushing the panel past the height it was just given. `env()` reads 0
+  // wherever the device has no inset, so this is the same no-configuration
+  // platform detection the AppBar's top padding already uses.
+  drawerPanel.style.boxSizing = "border-box";
+  drawerPanel.style.paddingTop = "env(safe-area-inset-top, 0px)";
+  drawerPanel.style.paddingBottom = "env(safe-area-inset-bottom, 0px)";
 
   // Apply border radius only to the corners that face away from the screen edge.
   // A left drawer gets rounded right corners; a right drawer gets rounded left corners.
   if (position === "left") {
     drawerPanel.style.left = toREM(margin);
     drawerPanel.style.right = "auto";
+    // In landscape the notch moves to the anchored side, so the content steps
+    // away from it while the panel keeps covering the edge.
+    drawerPanel.style.paddingLeft = "env(safe-area-inset-left, 0px)";
     drawerPanel.style.borderTopRightRadius = toREM(borderRadius);
     drawerPanel.style.borderBottomRightRadius = toREM(borderRadius);
     drawerPanel.style.borderTopLeftRadius = "0";
@@ -129,6 +152,7 @@ export const Drawer = (props = {}) => {
   } else {
     drawerPanel.style.right = toREM(margin);
     drawerPanel.style.left = "auto";
+    drawerPanel.style.paddingRight = "env(safe-area-inset-right, 0px)";
     drawerPanel.style.borderTopLeftRadius = toREM(borderRadius);
     drawerPanel.style.borderBottomLeftRadius = toREM(borderRadius);
     drawerPanel.style.borderTopRightRadius = "0";
@@ -200,6 +224,8 @@ export const Drawer = (props = {}) => {
   });
 
   drawerPanel.appendChild(contentContainer);
+  drawerPanel.setAttribute("role", "dialog");
+  drawerPanel.setAttribute("aria-modal", "true");
   element.appendChild(overlay);
   element.appendChild(drawerPanel);
 
@@ -232,6 +258,9 @@ export const Drawer = (props = {}) => {
       closeTimer = null;
       if (onClose) onClose();
     }, 300);
+    // Released now, not with the 300 ms hide: the person closing the drawer
+    // should have their keyboard back while it is still sliding out.
+    releaseFocusScope();
     if (closeOnEsc) document.removeEventListener("keydown", handleKeyDown);
   };
 
@@ -257,6 +286,7 @@ export const Drawer = (props = {}) => {
     drawerPanel.style.transform = "translateX(0)";
     if (onOpen) onOpen();
     if (closeOnEsc) document.addEventListener("keydown", handleKeyDown);
+    releaseFocusScope = trapFocus(drawerPanel);
   };
 
   /**
@@ -273,6 +303,7 @@ export const Drawer = (props = {}) => {
    */
   const destroy = () => {
     if (closeTimer) clearTimeout(closeTimer);
+    releaseFocusScope();
     if (closeOnEsc) document.removeEventListener("keydown", handleKeyDown);
     removeResizeListener();
     if (element.parentNode) element.parentNode.removeChild(element);

package/src/navigations/DrawerItem.js

@@ -218,7 +218,7 @@ export const DrawerItem = (props) => {
 
   const textWidget = Text({
     text: label,
-    size: 15,
+    size: 14,
     color: unselectedColor,
     fontWeight: "400",
     flex: 1,

package/src/navigations/Router.js

@@ -358,7 +358,6 @@ export const goTo = (path, params = {}) => {
     console.error(`Route "${cleanPathStr}" does not exist`);
     // Graceful fallback to a wildcard or 404 route when defined.
     if (routes["*"] || routes["/404"]) {
-      const notFoundRoute = routes["*"] || routes["/404"];
       currentPath = "*";
       currentParams = {};
       currentQuery = {};

package/src/navigations/Scaffold.js

@@ -1,5 +1,6 @@
 // navigations/Scaffold.js
 import { WidgetFactory } from "../widget-factory/index.js";
+import { applyEffects } from "../widget-factory/effects.js";
 import { colors } from "../utils/themes.js";
 import { initRouter, getCurrentRoute, subscribe } from "./Router.js";
 
@@ -143,8 +144,6 @@ export const Scaffold = (props) => {
   let rightNavBarContainer = null;
   let mainContentContainer = null;
 
-  let currentAppBar = null;
-
   /**
    * Removes all direct children from a container, calling their `_cleanup`
    * hook first to release subscriptions and event listeners.
@@ -200,7 +199,6 @@ export const Scaffold = (props) => {
         : toElement(cfg);
     if (widget) {
       appBarContainer.appendChild(widget);
-      currentAppBar = widget;
       // Auto-wire the first Material Icons "menu" icon to open the drawer,
       // so callers don't need to pass an explicit onPress handler.
       if (drawer && drawerInstance) {
@@ -219,6 +217,14 @@ export const Scaffold = (props) => {
               drawerInstance.toggle();
             }
           };
+          // An unnamed `Icon` is `aria-hidden` decoration, and a control you can
+          // tab to that a reader is told to ignore is worse than either. Then run
+          // the engine's own pass over it: role, Tab stop, Enter and Space — and
+          // the release of the handler it adds, which a hand-written
+          // `addEventListener` would leak.
+          menuIcon.removeAttribute("aria-hidden");
+          menuIcon.setAttribute("aria-label", "Open menu");
+          applyEffects(menuIcon);
         }
       }
     }

package/src/navigations/Tabs.js

@@ -7,6 +7,7 @@ import { Row } from "../widgets/Row.js";
 import { Text } from "../widgets/Text.js";
 import { Icon } from "../widgets/Icon.js";
 import { toREM } from "../utils/units.js";
+import { PILL } from "../tools/index.js";
 
 /**
  * @typedef {Object} TabDefinition
@@ -48,8 +49,11 @@ import { toREM } from "../utils/units.js";
  * - `pills` — rounded pill-shaped tab buttons.
  * - `slider` — an animated filled thumb that slides under the active tab.
  *
- * The active tab tracks a `currentIndex` state internally. Keyboard
- * navigation (Enter/Space) and ARIA attributes are included for accessibility.
+ * The active tab tracks a `currentIndex` state internally. The bar is a
+ * `tablist` of `tab`s that control a `tabpanel`: the bar is one stop on the Tab
+ * path (roving `tabIndex`) and the arrow keys, Home and End move between the
+ * tabs and activate what they land on. Enter and Space press the tab through
+ * the engine's own keyboard handler.
  *
  * A ResizeObserver and a window resize listener keep the slider thumb
  * position correct when the tab bar dimensions change.
@@ -59,6 +63,8 @@ import { toREM } from "../utils/units.js";
  *   - `activeIndex` (getter/setter) — read or set the active tab index.
  *   - `setActiveTab(index: number)` — alias for the setter.
  */
+let tabsIdSeed = 0;
+
 export const Tabs = (props) => {
   const {
     tabs = [],
@@ -94,6 +100,16 @@ export const Tabs = (props) => {
   let tabsWrapperRef = null;
   let tabButtonsRef = [];
 
+  // A tab and its panel point at each other (`aria-controls` one way,
+  // `aria-labelledby` back), so both need ids. Derived from the caller's `id`
+  // when there is one, so a re-render keeps the pairing instead of moving it.
+  const baseId =
+    typeof rest.id === "string" && rest.id
+      ? rest.id
+      : `fletbox-tabs-${++tabsIdSeed}`;
+  const panelId = `${baseId}-panel`;
+  const tabId = (idx) => `${baseId}-tab-${idx}`;
+
   // Size preset lookup — controls padding, font size, icon size, content
   // padding, and minimum height in a single prop for consistent scaling.
   const sizes = {
@@ -151,6 +167,10 @@ export const Tabs = (props) => {
   });
 
   const tabsWrapper = Row({
+    // The bar is a set of tabs, not a row of buttons: without the `tablist`
+    // parent, a reader hears five unrelated controls and a panel belonging to
+    // none of them.
+    role: "tablist",
     alignItems: "center",
     justifyContent: fullWidth ? "space-between" : "flex-start",
     gap: variant === "pills" ? 4 : 0,
@@ -165,6 +185,27 @@ export const Tabs = (props) => {
 
   const tabButtons = [];
 
+  /**
+   * Activate a tab and, when asked, hand it the keyboard.
+   *
+   * One helper because three doors lead here: the click, the arrow keys and the
+   * public `activeIndex` setter. Each used to repeat the same three statements,
+   * and only the click and the setter carried the panel with them.
+   */
+  const selectTab = (idx, moveFocus = false) => {
+    if (idx < 0 || idx >= tabs.length || currentIndex === idx) return;
+    currentIndex = idx;
+    updateActiveTab(idx);
+    onChange?.(idx);
+    if (moveFocus) tabButtonsRef[idx]?.focus();
+  };
+
+  /** The tab `delta` places along the bar, wrapping at both ends. */
+  const stepTab = (from, delta) => {
+    if (!tabs.length) return 0;
+    return (((from + delta) % tabs.length) + tabs.length) % tabs.length;
+  };
+
   tabs.forEach((tab, idx) => {
     const label = getLabel(tab);
     const icon = getIcon(tab);
@@ -192,11 +233,14 @@ export const Tabs = (props) => {
       : null;
     const badgeWidget = badge
       ? Container({
-          backgroundColor: colors.danger,
-          borderRadius: 10,
-          padding: "2px 6px",
+          // The signal red is a words-on-a-page tone; white on it measured
+          // 2.77:1 in the dark theme. A count is a fill carrying white, so it
+          // takes the plate (`dangerPlate`) and the palette's white (`onSecondary`).
+          backgroundColor: colors.dangerPlate,
+          borderRadius: PILL,
+          padding: "4px 8px",
           marginLeft: 4,
-          child: Text({ text: String(badge), size: 10, color: "#fff" }),
+          child: Text({ text: String(badge), size: 12, color: colors.onSecondary }),
         })
       : null;
 
@@ -241,31 +285,53 @@ export const Tabs = (props) => {
       // Subtract the slider's internal padding so buttons don't overflow it.
       minHeight: sz.h - (variant === "slider" ? 8 : 0),
       zIndex: 2,
-      // Accessibility: expose as a tab role with aria-selected.
+      // Accessibility: a tab, selected or not, that owns the panel below it.
+      // `aria-controls` is what tells a reader that pressing here has a place
+      // they will land, not only a colour change.
       role: "tab",
-      tabIndex: 0,
+      id: tabId(idx),
+      "aria-controls": panelId,
       "aria-selected": isActive.toString(),
+      // Roving tabindex: the whole bar is one stop on the Tab path and the
+      // arrows move inside it. Every tab left at 0 would make a reader Tab
+      // through the entire bar before reaching the content it is on about.
+      tabIndex: isActive ? 0 : -1,
+      // The press is a prop, not an assignment made after `Container()` has
+      // returned: the engine reads `widget.onclick` while the widget is built,
+      // and a handler wired afterwards is a tab only a mouse can press. That
+      // is also why Enter and Space are absent below — the engine's own key
+      // handler turns them into this click, and repeating them here would run
+      // the press twice.
+      onclick: () => selectTab(idx),
+      // The indicator is placed from `getBoundingClientRect()`, so a press that
+      // scaled the tab would report a narrower button than the one it is
+      // measuring and the underline would land off-centre mid-press.
+      disableTransform: true,
       onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          if (currentIndex !== idx) {
-            currentIndex = idx;
-            updateActiveTab(idx);
-            onChange?.(idx);
-          }
+        switch (e.key) {
+          case "ArrowRight":
+          case "ArrowDown":
+            e.preventDefault();
+            selectTab(stepTab(currentIndex, 1), true);
+            break;
+          case "ArrowLeft":
+          case "ArrowUp":
+            e.preventDefault();
+            selectTab(stepTab(currentIndex, -1), true);
+            break;
+          case "Home":
+            e.preventDefault();
+            selectTab(0, true);
+            break;
+          case "End":
+            e.preventDefault();
+            selectTab(tabs.length - 1, true);
+            break;
         }
       },
       child: content,
     });
 
-    btn.onclick = () => {
-      if (currentIndex !== idx) {
-        currentIndex = idx;
-        updateActiveTab(idx);
-        onChange?.(idx);
-      }
-    };
-
     tabButtons.push(btn);
     tabsWrapper.appendChild(btn);
   });
@@ -306,6 +372,13 @@ export const Tabs = (props) => {
   container.appendChild(tabBar);
 
   const contentContainer = Container({
+    // The pane is the thing a tab `aria-controls`: named by the tab that opened
+    // it, and a stop itself, so a reader who presses Tab from the bar lands
+    // inside the content instead of jumping past it.
+    role: "tabpanel",
+    id: panelId,
+    "aria-labelledby": tabs.length ? tabId(currentIndex) : undefined,
+    tabIndex: 0,
     display: "flex",
     padding: `${toREM(sz.cp)} 0`,
     width: "100%",
@@ -347,8 +420,12 @@ export const Tabs = (props) => {
     tabButtonsRef.forEach((btn, i) => {
       const isActive = i === idx;
 
-      // Keep aria-selected in sync with the visual state.
+      // Keep the announced state, the Tab path and the panel's name in sync with
+      // the visual state. All three are the same fact seen from the keyboard: a
+      // tab that looks active but is not `aria-selected`, or a bar where every
+      // tab is still a stop, is a control that answers differently to two senses.
       btn.setAttribute("aria-selected", isActive.toString());
+      btn.tabIndex = isActive ? 0 : -1;
 
       const textSpan = btn.querySelector("span:not(.material-icons)");
       if (textSpan) {
@@ -365,6 +442,8 @@ export const Tabs = (props) => {
 
     updateSliderPosition();
     updateContent();
+    // The pane changed hands, so the tab it is named by changes too.
+    contentContainer.setAttribute("aria-labelledby", tabId(idx));
   };
 
   // Mount the initially active pane during construction. Without this the pane
@@ -436,13 +515,7 @@ export const Tabs = (props) => {
   // ========== PUBLIC API ==========
   Object.defineProperty(container, "activeIndex", {
     get: () => currentIndex,
-    set: (idx) => {
-      if (idx >= 0 && idx < tabs.length && currentIndex !== idx) {
-        currentIndex = idx;
-        updateActiveTab(idx);
-        onChange?.(idx);
-      }
-    },
+    set: (idx) => selectTab(idx),
   });
 
   /**

package/src/services/RamStore.js

@@ -37,9 +37,8 @@ const notifySubscribers = (key, newValue, oldValue) => {
 export const saveRam = (key, value) => {
   try {
     const oldValue = ramStore.get(key);
-    const result = ramStore.set(key, value);
+    ramStore.set(key, value);
     notifySubscribers(key, value, oldValue);
-    // console.log(`[RamStore] saved: ${key} =`, value);
     return true;
   } catch (error) {
     console.error("Error saving to RAM:", error);

package/src/tools/breakpoints.js

@@ -0,0 +1,113 @@
+// src/tools/breakpoints.js
+// The framework's responsive vocabulary: one width table, the name it answers,
+// and a subscription that only fires when the name changes.
+
+/**
+ * The widths a FletBox screen answers to. These are viewport widths in CSS
+ * pixels, not framework units: a breakpoint is a fact about the window, and the
+ * window does not scale with the reader's font.
+ *
+ * `md` is 768 because that is the switch `AdaptiveScaffold` has always used —
+ * the drawer side of the fence — and a framework with two breakpoint tables
+ * gives every app two answers to one question.
+ */
+export const BREAKPOINTS = Object.freeze({ xs: 0, sm: 560, md: 768, lg: 1024, xl: 1280 });
+
+/** The names in width order, so `pick()` can fall back toward smaller steps. */
+export const BREAKPOINT_NAMES = Object.freeze(["xs", "sm", "md", "lg", "xl"]);
+
+/**
+ * Which breakpoint a viewport width answers to.
+ *
+ * @param {number} px - A width in CSS pixels.
+ * @returns {"xs" | "sm" | "md" | "lg" | "xl"} The largest step the width reaches.
+ */
+export const breakpointForWidth = (px) => {
+  let name = "xs";
+  for (const candidate of BREAKPOINT_NAMES) {
+    if (px >= BREAKPOINTS[candidate]) name = candidate;
+  }
+  return name;
+};
+
+/**
+ * The current breakpoint, read live from the window.
+ *
+ * @returns {"xs" | "sm" | "md" | "lg" | "xl"}
+ */
+export const currentBreakpoint = () =>
+  breakpointForWidth(typeof window === "undefined" ? 0 : window.innerWidth);
+
+/**
+ * Whether the viewport has reached a breakpoint. `atLeast("md")` is the sentence
+ * a two-column layout actually needs, and it is the same 768 the scaffold uses.
+ *
+ * @param {"xs" | "sm" | "md" | "lg" | "xl"} name
+ * @returns {boolean}
+ */
+export const atLeast = (name) => {
+  const from = BREAKPOINT_NAMES.indexOf(currentBreakpoint());
+  const wanted = BREAKPOINT_NAMES.indexOf(name);
+  // An unknown name is not "true by accident": it asks for nothing, so any
+  // screen answers it.
+  if (wanted === -1) return true;
+  return from >= wanted;
+};
+
+/**
+ * Choose a value by breakpoint. Keys are breakpoint names, and a step that is
+ * not named inherits the nearest smaller one that is:
+ * `{ xs: 8, md: 16 }` gives 8, 8, 16, 16, 16.
+ *
+ * @param {Record<string, any>} values - Values keyed by breakpoint name.
+ * @param {any} [fallback=undefined] - What to return when nothing matches.
+ * @returns {any}
+ */
+export const pick = (values, fallback) => {
+  if (!values) return fallback;
+  const name = currentBreakpoint();
+  for (let index = BREAKPOINT_NAMES.indexOf(name); index >= 0; index--) {
+    const key = BREAKPOINT_NAMES[index];
+    if (key in values) return values[key];
+  }
+  return fallback;
+};
+
+// One resize listener for the whole framework, and one remembered name. The
+// callback fires when the *breakpoint* changes, not on every pixel: a screen
+// that rebuilt itself per pixel would resize itself into a loop the moment its
+// own layout changed the scrollbar.
+let lastName = null;
+const listeners = new Set();
+let removeResize = null;
+
+const handleResize = () => {
+  const next = currentBreakpoint();
+  if (next === lastName) return;
+  lastName = next;
+  for (const listener of [...listeners]) listener(next);
+};
+
+/**
+ * Subscribe to breakpoint crossings.
+ *
+ * @param {(breakpoint: "xs" | "sm" | "md" | "lg" | "xl") => void} listener
+ *   Called with the new name whenever the window crosses a step.
+ * @returns {() => void} The unsubscribe. Call it from `onUnmount`.
+ */
+export const onBreakpointChange = (listener) => {
+  if (typeof listener !== "function") return () => {};
+  if (lastName === null) lastName = currentBreakpoint();
+  listeners.add(listener);
+  if (typeof window !== "undefined" && !removeResize) {
+    window.addEventListener("resize", handleResize);
+    removeResize = () => {
+      window.removeEventListener("resize", handleResize);
+      removeResize = null;
+    };
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) removeResize?.();
+  };
+};

package/src/tools/createList.js

@@ -1,7 +1,5 @@
 // src/components/flet-box/tools/createList.js
 
-import { random } from "./random.js";
-
 /**
  * Creates a list of items with generated data
  * @module tools/createList