flet-box 1.1.0 → 1.1.2

package/src/index.d.ts

@@ -6,10 +6,15 @@ declare module 'flet-box' {
   // Tipos base
   // =========================================================================
   export type Widget = HTMLElement;
+  // A Scaffold slot: an element, a factory it re-runs on each route change (so a
+  // nav can relight the active item), a boolean show/hide, or null for absent.
+  export type Slot = Widget | (() => Widget) | boolean | null;
   export type Color = string;
   export type Size = number | string;
   export type Padding = number | string;
   export type Margin = number | string;
+  /** How a single flex child answers its parent's cross-axis `alignItems`. */
+  export type AlignSelf = 'auto' | 'flex-start' | 'center' | 'flex-end' | 'baseline' | 'stretch';
 
   /**
    * The element returned by `WidgetFactory()`. It is a real `HTMLElement` with
@@ -77,8 +82,35 @@ declare module 'flet-box' {
     // `Size`, not `number`: for a Text this is a font size and for a Button it is
     // the `small | medium | large` preset — the widget decides which it reads.
     size?: Size;
+    // The engine routes these as plain style on every widget, so declaring them
+    // only on `Container` made `Column({ maxWidth: 720, flex: 1 })` — the layout
+    // recipe the design skill teaches — a false error in a JS editor.
+    flex?: number;
+    minWidth?: Size;
+    maxWidth?: Size;
+    minHeight?: Size;
+    maxHeight?: Size;
+    border?: string;
+    borderTop?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    borderRight?: string;
+    cursor?: string;
+    // The engine routes `display` untouched; `Stack` sets it internally and an
+    // app that overrides it is doing something the type must not forbid.
+    display?: string;
     padding?: Padding;
     margin?: Margin;
+    // The engine routes each margin side, and the `mt/mr/mb/ml` aliases, as rem
+    // lengths on every widget: `Text({ marginTop: 4 })` is legal at runtime.
+    marginTop?: Size;
+    marginRight?: Size;
+    marginBottom?: Size;
+    marginLeft?: Size;
+    mt?: Size;
+    mr?: Size;
+    mb?: Size;
+    ml?: Size;
     bgColor?: Color;
     // Alias kept because the engine routes it and every generated template uses
     // it: `bgColor` is the Flet-style short name for the same style.
@@ -98,6 +130,15 @@ declare module 'flet-box' {
     disabled?: boolean;
     onPress?: (widget: Widget) => void;
     onClick?: (widget: Widget) => void;
+    // The lowercase alias the engine also routes (`{ prop: "onclick" }` in
+    // translateProps); the generated AppBar reaches for it.
+    onclick?: (widget: Widget) => void;
+    // A child's own cross-axis answer to its parent's `alignItems`. It belongs on
+    // `CommonProps` rather than on the layouts because the widget that needs it is
+    // the *child* — a chip centred inside a row whose other children stretch.
+    alignSelf?: AlignSelf;
+    // Alias of `alignSelf`, matching the `justify` / `alignItems` shorthand style.
+    selfAlign?: AlignSelf;
     id?: string;
     className?: string;
     ref?: (widget: Widget) => void;
@@ -251,7 +292,9 @@ declare module 'flet-box' {
     direction?: 'row' | 'column';
     gap?: number | string;
     justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
-    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch';
+    // `start`/`end`/`baseline` are CSS Box Alignment values the engine passes
+    // through untouched, so the type has to admit them.
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'start' | 'end' | 'baseline' | 'stretch';
     wrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
     child?: Widget;
     children?: Widget[];
@@ -284,6 +327,17 @@ declare module 'flet-box' {
   }
   export function Column(props: ColumnProps): Widget;
 
+  /**
+   * Layers its children in the same box.
+   *
+   * The first child stays in the flow and gives the stack its size; every child
+   * after it is taken out of the flow and painted over that box, so a stack with
+   * nothing sized and no sized first child has no room for its layers.
+   *
+   * `alignment` is the corner a layer with no edges of its own sits on
+   * (top-left by default). A layer that names `top`/`right`/`bottom`/`left` keeps
+   * those, and a child that declares its own `position` is left in the flow.
+   */
   export interface StackProps extends CommonProps {
     children?: Widget[];
     position?: 'relative' | 'absolute' | 'stack';
@@ -323,6 +377,12 @@ declare module 'flet-box' {
     columns?: number;
     spacing?: number;
     itemHeight?: number;
+    /**
+     * The cells themselves, laid out `columns` per row. This is the same contract
+     * as `data` + `renderItem` read the other way round: pass the built widgets
+     * here, or the items plus a builder. One of the two — `data` wins.
+     */
+    children?: Widget[] | Widget;
   }
   export function GridView(props: GridViewProps): Widget;
 
@@ -503,7 +563,9 @@ declare module 'flet-box' {
     color?: Color;
     textColor?: Color;
     borderColor?: Color;
-    size?: 'small' | 'medium' | 'large';
+    // Chip reads `size` as a font size in pixels and scales its icons from it,
+    // so the preset union was a type the implementation never accepted.
+    size?: number;
     borderRadius?: number | string;
     elevation?: number;
     gap?: number;
@@ -656,7 +718,7 @@ declare module 'flet-box' {
     margin?: number | { top?: number; right?: number; bottom?: number; left?: number };
     orientation?: 'horizontal' | 'vertical';
   }
-  export function Divider(props: DividerProps): Widget;
+  export function Divider(props?: DividerProps): Widget;
 
   // =========================================================================
   // Formularios e interacción
@@ -738,6 +800,12 @@ declare module 'flet-box' {
     size?: number;
     activeColor?: Color;
     label?: string;
+    /**
+     * How the checked state is painted. `outlined` (default) keeps the box hollow and
+     * draws the tick in `activeColor`; `filled` turns the whole box into an
+     * `activeColor` plate and takes the tick to whichever ink reads on it.
+     */
+    variant?: 'outlined' | 'filled';
   }
   export function Checkbox(props: CheckboxProps): Widget & {
     setChecked(checked: boolean, triggerCallback?: boolean): void;
@@ -906,16 +974,17 @@ declare module 'flet-box' {
   // Navegación
   // =========================================================================
   export interface ScaffoldProps extends CommonProps {
-    appBar?: Widget | boolean;
+    appBar?: Slot;
     body?: Widget | Record<string, any>;
-    bottomBar?: Widget | boolean;
-    fab?: Widget | boolean;
-    drawer?: Widget;
-    leftNavBar?: Widget;
+    bottomBar?: Slot;
+    fab?: Slot;
+    // `Drawer()` returns an instance, not an element, and Scaffold unwraps it.
+    drawer?: Widget | DrawerInstance | null;
+    leftNavBar?: Slot;
     leftNavBarWidth?: number;
-    rightNavBar?: Widget;
+    rightNavBar?: Slot;
     rightNavBarWidth?: number;
-    navSideBar?: Widget;
+    navSideBar?: Slot;
     navSideBarWidth?: number;
     navSideBarPosition?: 'left' | 'right';
     routes?: Record<string, any>;
@@ -933,14 +1002,14 @@ declare module 'flet-box' {
   };
 
   export interface AdaptiveScaffoldProps extends CommonProps {
-    appBar?: Widget;
+    appBar?: Slot;
     body?: Widget | Record<string, any>;
-    bottomBar?: Widget;
-    fab?: Widget;
-    drawer?: Widget;
-    leftNavBar?: Widget | (() => Widget);
+    bottomBar?: Slot;
+    fab?: Slot;
+    drawer?: Widget | DrawerInstance | null;
+    leftNavBar?: Slot;
     leftNavBarWidth?: number;
-    rightNavBar?: Widget | (() => Widget);
+    rightNavBar?: Slot;
     rightNavBarWidth?: number;
     routes?: Record<string, any>;
     backgroundColor?: Color;
@@ -1139,16 +1208,20 @@ declare module 'flet-box' {
     effect: string;
     from: any;
     to: any;
-    duration?: number;
+    /** Milliseconds as a number (`400`) or a CSS time as a string (`"0.4s"`). Defaults to 500. */
+    duration?: number | string;
     reverse?: boolean;
+    /** Repeats this step forever; a loop and a one-shot generate separate `@keyframes`. */
     loop?: boolean;
-    delay?: string;
+    /** Milliseconds as a number (`120`) or a CSS time as a string (`"0.12s"`). Defaults to the widget's `delay`. */
+    delay?: number | string;
   }
   export interface AnimatedBoxProps extends CommonProps {
     animations: AnimationStep[];
     child: Widget;
     timing?: string;
-    delay?: string;
+    /** Default delay for the steps that do not name one: milliseconds or a CSS time. */
+    delay?: number | string;
     fillMode?: string;
     top?: number | string;
     right?: number | string;
@@ -1161,6 +1234,7 @@ declare module 'flet-box' {
     child: Widget;
     animations: AnimationStep[];
     sameTime?: boolean;
+    /** Seconds between consecutive characters (`0.05` is a 50 ms stagger). */
     delayBetween?: number;
     orientation?: 'row' | 'column';
   }
@@ -1203,7 +1277,7 @@ declare module 'flet-box' {
     from: any,
     to: any,
     duration?: number,
-    easing?: string
+    easing?: Easing
   ): () => boolean;
   export function stopAnimation(widget: Widget, property?: string): boolean;
   export function animateAsync(
@@ -1212,7 +1286,7 @@ declare module 'flet-box' {
     from: any,
     to: any,
     duration?: number,
-    easing?: string
+    easing?: Easing
   ): Promise<Widget>;
   export function fadeOut(widget: Widget, duration?: number): () => boolean;
   export function fadeIn(widget: Widget, duration?: number): () => boolean;
@@ -1221,6 +1295,123 @@ declare module 'flet-box' {
   export function fadeInAsync(widget: Widget, duration?: number): Promise<Widget>;
   export function pulseAsync(widget: Widget, duration?: number): Promise<Widget>;
 
+  // ----- Easings, springs and the motion preference -----
+  /** A curve name the imperative engine knows. */
+  export type EasingName =
+    | 'linear'
+    | 'easeIn'
+    | 'easeOut'
+    | 'easeInOut'
+    | 'easeInCubic'
+    | 'easeOutCubic'
+    | 'easeInOutCubic'
+    | 'easeInQuart'
+    | 'easeOutQuart'
+    | 'easeInOutQuart'
+    | 'easeInExpo'
+    | 'easeOutExpo'
+    | 'easeInOutExpo'
+    | 'easeInCirc'
+    | 'easeOutCirc'
+    | 'easeInOutCirc'
+    | 'easeInBack'
+    | 'easeOutBack'
+    | 'easeInOutBack'
+    | 'easeInElastic'
+    | 'easeOutElastic'
+    | 'easeOutBounce'
+    | 'standard'
+    | 'emphasized'
+    | 'emphasizedDecelerate'
+    | 'emphasizedAccelerate';
+  /** A curve name, or a curve built by `cubicBezier()` / returned by `spring()`. */
+  export type Easing = EasingName | ((progress: number) => number);
+  /** Every `EasingName`, in the order they are documented. */
+  export const EASING_NAMES: EasingName[];
+  export interface SpringOptions {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    initialVelocity?: number;
+    epsilon?: number;
+    maxDuration?: number;
+  }
+  export interface SpringCurve {
+    easing: (progress: number) => number;
+    duration: number;
+    overshoot: boolean;
+  }
+  /** The cubic-bezier timing function as a curve, for imperative animation. */
+  export function cubicBezier(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number
+  ): (progress: number) => number;
+  /** A damped spring: the curve plus the duration it needs to settle. */
+  export function spring(options?: SpringOptions): SpringCurve;
+  export function animateSpring(
+    widget: Widget,
+    property: string,
+    from: any,
+    to: any,
+    options?: SpringOptions
+  ): () => boolean;
+  export function animateSpringAsync(
+    widget: Widget,
+    property: string,
+    from: any,
+    to: any,
+    options?: SpringOptions
+  ): Promise<Widget>;
+
+  export interface SlideInOptions {
+    direction?: 'up' | 'down' | 'left' | 'right';
+    distance?: number;
+    duration?: number;
+    easing?: Easing;
+    fade?: boolean;
+  }
+  export interface PopInOptions {
+    from?: number;
+    to?: number;
+    duration?: number;
+    easing?: Easing;
+    fade?: boolean;
+  }
+  export interface ShakeOptions {
+    axis?: 'x' | 'y';
+    distance?: number;
+    cycles?: number;
+    duration?: number;
+  }
+  export function slideIn(widget: Widget, options?: SlideInOptions): () => boolean;
+  export function slideInAsync(widget: Widget, options?: SlideInOptions): Promise<Widget>;
+  export function slideOut(widget: Widget, options?: SlideInOptions): () => boolean;
+  export function slideOutAsync(widget: Widget, options?: SlideInOptions): Promise<Widget>;
+  export function popIn(widget: Widget, options?: PopInOptions): () => boolean;
+  export function popInAsync(widget: Widget, options?: PopInOptions): Promise<Widget>;
+  export function shake(widget: Widget, options?: ShakeOptions): () => boolean;
+  export function shakeAsync(widget: Widget, options?: ShakeOptions): Promise<Widget>;
+
+  export type MotionMode = 'auto' | 'reduce' | 'full';
+  export interface StaggerOptions {
+    start?: number;
+    step?: number;
+    max?: number;
+  }
+  /** True when the app or the operating system asked for no movement. */
+  export function prefersReducedMotion(): boolean;
+  export function getMotionMode(): MotionMode;
+  export function setMotionMode(mode: MotionMode): MotionMode;
+  export function onMotionModeChange(
+    listener: (reduced: boolean) => void
+  ): () => void;
+  /** The duration to actually run: 0 when motion is reduced. */
+  export function motionDuration(duration: number): number;
+  /** The capped delay of item `index` in an entrance. */
+  export function stagger(index: number, options?: StaggerOptions): number;
+
   // =========================================================================
   // Widgets adicionales (Data, Media, Utils)
   // =========================================================================
@@ -1555,6 +1746,7 @@ declare module 'flet-box' {
 
   export interface InstallButtonProps extends CommonProps {
     text?: string;
+    icon?: string;
     variant?: 'filled' | 'outlined' | 'text';
     size?: 'small' | 'medium' | 'large';
     borderRadius?: number;
@@ -2011,10 +2203,58 @@ declare module 'flet-box' {
     orientation(): 'portrait' | 'landscape';
     isTouch(): boolean;
     hasGesture(): boolean;
-    onOrientationChange(callback: (orientation: string) => void): void;
-    onResize(callback: (size: { width: number; height: number; orientation: string }) => void): void;
+    // Both return the unsubscribe; the runtime always did, the type hid it.
+    onOrientationChange(callback: (orientation: string) => void): () => void;
+    onResize(callback: (size: { width: number; height: number; orientation: string }) => void): () => void;
   };
 
+  /** The five viewport widths a screen answers to, in CSS pixels. */
+  export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** `md` is 768 — the same switch `AdaptiveScaffold` uses for its drawer. */
+  export const BREAKPOINTS: Record<Breakpoint, number>;
+  export const BREAKPOINT_NAMES: Breakpoint[];
+
+  /** Which breakpoint a given width answers to (pure, no DOM). */
+  export function breakpointForWidth(px: number): Breakpoint;
+  /** The breakpoint the live viewport is in; `xs` where there is no window. */
+  export function currentBreakpoint(): Breakpoint;
+  /** Whether the viewport has reached `name`. */
+  export function atLeast(name: Breakpoint): boolean;
+
+  /**
+   * Value for the current breakpoint. Keys are breakpoint names and an unnamed
+   * step inherits the nearest smaller one: `pick({ xs: 8, md: 16 })` is 8, 8, 16,
+   * 16, 16.
+   */
+  export function pick<T>(values: Partial<Record<Breakpoint, T>>, fallback?: T): T;
+
+  /**
+   * Subscribe to breakpoint crossings — not to every pixel of a resize.
+   * @returns The unsubscribe. Call it from `onUnmount`.
+   */
+  export function onBreakpointChange(listener: (breakpoint: Breakpoint) => void): () => void;
+
+  export interface LoadFontOptions {
+    /** Weights to fetch, e.g. `[400, 600]`. Google needs them or you get 400 only. */
+    weights?: number[];
+    /** A stylesheet to load instead of the provider URL — a self-hosted `@font-face`. */
+    url?: string;
+    /** CSS `font-display`, provider URLs only. Defaults to `"swap"`. */
+    display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+  }
+
+  /**
+   * Load a webfont family so a `fontFamily` prop has the bytes behind it. One
+   * request per family, whoever asks first. Resolves `false` when the face could
+   * not be had — a webfont is a network request, and the screen keeps its
+   * fallback instead of failing.
+   */
+  export function loadFont(family: string, options?: LoadFontOptions): Promise<boolean>;
+
+  /** Wait for the faces the document has already started, before a canvas paint. */
+  export function fontsReady(): Promise<boolean>;
+
   export const os: {
     name(): string;
     version(): string;
@@ -2061,8 +2301,114 @@ declare module 'flet-box' {
     isSafe(value: string): boolean;
   };
 
-  export function formatDate(date: Date | string | number, format?: string): string;
-  export function relativeTime(date: Date | string | number): string;
+  /** Tokens `YYYY MM DD HH mm ss`; anything else passes through. Defaults to `YYYY-MM-DD`. */
+  export function formatDate(date: DateInput, format?: string): string;
+  export function relativeTime(date: DateInput): string;
+  export function timeAgo(date: DateInput): string;
+  export function timeAgoLocale(date: DateInput, locale?: "en" | "es"): string;
+
+  /** Anything `new Date()` accepts. */
+  export type DateInput = Date | string | number;
+
+  /** Unit names accepted by {@link dateDiff}; a calendar month counts as 30 days and a year as 365. */
+  export type DateDiffUnit =
+    | "milliseconds"
+    | "seconds"
+    | "minutes"
+    | "hours"
+    | "days"
+    | "weeks"
+    | "months"
+    | "years";
+
+  /** Milliseconds in `n` seconds. */
+  export function seconds(n: number): number;
+  /** Milliseconds in `n` minutes. */
+  export function minutes(n: number): number;
+  /** Milliseconds in `n` hours. */
+  export function hours(n: number): number;
+  /** Milliseconds in `n` days. */
+  export function days(n: number): number;
+  /** Milliseconds in `n` weeks. */
+  export function weeks(n: number): number;
+  /** Milliseconds in `n` months, a month being 30 days. */
+  export function months(n: number): number;
+  /** Milliseconds in `n` years, a year being 365 days. */
+  export function years(n: number): number;
+
+  export function today(): string;
+  export function yesterday(): string;
+  export function tomorrow(): string;
+
+  /** Full English weekday name, e.g. `"Monday"`. */
+  export function dayOfWeek(date: DateInput): string;
+  /** Full English month name, e.g. `"January"`. */
+  export function monthName(date: DateInput): string;
+
+  export function isToday(date: DateInput): boolean;
+  export function isYesterday(date: DateInput): boolean;
+  export function isTomorrow(date: DateInput): boolean;
+  export function isWeekend(date: DateInput): boolean;
+  export function isLeapYear(year: number): boolean;
+
+  /** `"Monday, January 15, 2024"` — the Intl long date for `locale`. */
+  export function formatDateLong(date: DateInput, locale?: string): string;
+  export function formatDateShort(date: DateInput, locale?: string): string;  /** 24-hour `HH:mm:ss`. */
+  export function formatTime(date: DateInput): string;
+  /** 12-hour `hh:mm:ss AM`. */
+  export function formatTimeAmPm(date: DateInput): string;
+
+  /** Token-based parse; the separators of `format` are `-`, `/`, `:` or a space. */
+  export function parseDate(str: string, format?: string): Date;
+
+  /** Absolute difference, so the argument order does not matter. */
+  export function dateDiff(date1: DateInput, date2: DateInput, unit?: DateDiffUnit): number;
+
+  /** New `Date` — the input is never mutated. A negative `n` subtracts. */
+  export function addDays(date: DateInput, n: number): Date;
+  export function addHours(date: DateInput, n: number): Date;
+  export function addMinutes(date: DateInput, n: number): Date;
+  export function addSeconds(date: DateInput, n: number): Date;
+  export function subtractDays(date: DateInput, n: number): Date;
+  export function subtractHours(date: DateInput, n: number): Date;
+  export function subtractMinutes(date: DateInput, n: number): Date;
+  export function subtractSeconds(date: DateInput, n: number): Date;
+
+  /** Alias of {@link sleep}. */
+  export function waitFor(ms: number): Promise<void>;
+  /** Alias of {@link sleep}. */
+  export function wait(ms: number): Promise<void>;
+
+  /**
+   * Polls `condition` until it is truthy.
+   * @throws when `timeout` elapses first.
+   */
+  export function waitUntil(
+    condition: () => boolean,
+    timeout?: number,
+    interval?: number,
+  ): Promise<true>;
+
+  /**
+   * Polls the DOM for `selector` until the element appears. Needs a document:
+   * use it in a browser, never at module scope.
+   * @throws when `timeout` elapses first.
+   */
+  export function waitForElement(
+    selector: string,
+    timeout?: number,
+    interval?: number,
+  ): Promise<Element>;
+
+  /** One-shot performance clock. `stop()` logs and returns the ms; `elapsed()` reads without logging. */
+  export function timer(label: string): { stop(): number; elapsed(): number };
+
+  /** `setInterval` with the arguments in the order a reader expects. */
+  export function every(ms: number, callback: () => void): number;
+  export function everySecond(callback: () => void): number;
+  export function everyMinute(callback: () => void): number;
+  export function everyHour(callback: () => void): number;
+  export function everyDay(callback: () => void): number;
   export function formatMediaTime(seconds: number): string;
   export function formatMediaTimeLong(seconds: number): string;
   export function getProgressPercent(current: number, total: number): number;
@@ -2225,6 +2571,12 @@ declare module 'flet-box' {
   export function upperCase(str: string): string;
   export function reverseString(str: string): string;
   export function truncate(str: string, length?: number, suffix?: string): string;
+  export function startsWith(str: string, prefix: string): boolean;
+  export function endsWith(str: string, suffix: string): boolean;
+  export function includes(str: string, substr: string): boolean;
+  export function split(str: string, separator: string): string[];
+  export function join(arr: readonly any[], separator?: string): string;
+  export function trim(str: string): string;
 
   export function shuffle<T>(arr: T[]): T[];
   export function reverse<T>(arr: T[]): T[];

package/src/index.js

@@ -37,6 +37,12 @@ export {
   upperCase,
   reverseString,
   truncate,
+  startsWith,
+  endsWith,
+  includes,
+  split,
+  join,
+  trim,
   animation,
   border,
   gradient,
@@ -60,11 +66,63 @@ export {
   now,
   formatDate,
   relativeTime,
+  seconds,
+  minutes,
+  hours,
+  days,
+  weeks,
+  months,
+  years,
+  today,
+  yesterday,
+  tomorrow,
+  dayOfWeek,
+  monthName,
+  isToday,
+  isYesterday,
+  isTomorrow,
+  isWeekend,
+  isLeapYear,
+  formatDateLong,
+  formatDateShort,
+  formatTime,
+  formatTimeAmPm,
+  parseDate,
+  dateDiff,
+  addDays,
+  addHours,
+  addMinutes,
+  addSeconds,
+  subtractDays,
+  subtractHours,
+  subtractMinutes,
+  subtractSeconds,
+  timeAgo,
+  timeAgoLocale,
+  waitFor,
+  wait,
+  waitUntil,
+  waitForElement,
+  timer,
+  every,
+  everySecond,
+  everyMinute,
+  everyHour,
+  everyDay,
   device,
   os,
   dimensions,
   width,
   height,
+  BREAKPOINTS,
+  BREAKPOINT_NAMES,
+  breakpointForWidth,
+  currentBreakpoint,
+  atLeast,
+  pick,
+  onBreakpointChange,
+  loadFont,
+  fontsReady,
   useState,
   useWatchState,
   memo,
@@ -289,4 +347,23 @@ export {
   fadeInAsync,
   fadeOutAsync,
   pulseAsync,
+  animateSpring,
+  animateSpringAsync,
+  slideIn,
+  slideInAsync,
+  slideOut,
+  slideOutAsync,
+  popIn,
+  popInAsync,
+  shake,
+  shakeAsync,
+  prefersReducedMotion,
+  getMotionMode,
+  setMotionMode,
+  onMotionModeChange,
+  motionDuration,
+  stagger,
+  EASING_NAMES,
+  cubicBezier,
+  spring,
 } from "./animations/index.js";

package/src/navigations/AdaptiveScaffold.js

@@ -2,6 +2,7 @@ import { Scaffold } from "./Scaffold.js";
 import { Drawer } from "./Drawer.js";
 import { CollapsibleSideBar } from "./CollapsibleSideBar.js";
 import { device } from "../tools/device.js";
+import { BREAKPOINTS } from "../tools/breakpoints.js";
 import { colors } from "../utils/themes.js";
 
 /**
@@ -27,7 +28,8 @@ import { colors } from "../utils/themes.js";
  * switches navigation patterns based on screen width and device type.
  *
  * Layout rules:
- * - **Mobile** (`window.innerWidth < 768` or `device.isMobile()` or `forceMobile`):
+ * - **Mobile** (`window.innerWidth < BREAKPOINTS.md`, i.e. under 768, or
+ *   `device.isMobile()` or `forceMobile`):
  *   - `leftNavBar` is placed inside a slide-over Drawer (hidden by default).
  *   - `rightNavBar` is hidden entirely.
  * - **Desktop** (all other cases):
@@ -61,9 +63,11 @@ export const AdaptiveScaffold = (props) => {
   // Determine the layout mode. forceMobile/forceDesktop props override the
   // automatic detection, which uses both the device API and the window width
   // so that resizing a desktop browser to a small width triggers mobile layout.
+  // The width is the framework's own `md` step rather than a private 768, so the
+  // scaffold and every `atLeast("md")` in the app answer to the same line.
   const isMobile =
     forceMobile ||
-    (!forceDesktop && (device.isMobile() || window.innerWidth < 768));
+    (!forceDesktop && (device.isMobile() || window.innerWidth < BREAKPOINTS.md));
 
   let finalLeftNavBar = null;
   let drawerInstance = null;