@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/SuggestionInput/SuggestionInput.stories.tsx

@@ -1,144 +0,0 @@
-import { useMemo, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SuggestionInput, type SuggestionOption } from './SuggestionInput';
-
-const meta = {
-  title: 'Components/SuggestionInput',
-  component: SuggestionInput,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'A text field with an anchored, keyboard-navigable list of async suggestions, plus an optional trailing "create new" row so free text is always a valid commit.',
-      },
-    },
-  },
-  args: {
-    value: '',
-    onChange: () => {},
-    options: [],
-    onSelect: () => {},
-    'aria-label': 'Add an item',
-  },
-} satisfies Meta<typeof SuggestionInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const CATALOG: SuggestionOption[] = [
-  { id: '1', label: 'Bananas', icon: '🍌', meta: 'bought 4× recently' },
-  { id: '2', label: 'Banana bread mix', icon: '🍞' },
-  { id: '3', label: 'Milk', icon: '🥛' },
-  { id: '4', label: 'Eggs', icon: '🥚' },
-  { id: '5', label: 'Olive oil', icon: '🫒' },
-];
-
-function ControlledSuggestionInput({ withCreateRow = true }: { withCreateRow?: boolean }) {
-  const [value, setValue] = useState('');
-  const [selected, setSelected] = useState<string | null>(null);
-  const options = useMemo(
-    () =>
-      value.trim()
-        ? CATALOG.filter((c) => c.label.toLowerCase().includes(value.trim().toLowerCase()))
-        : [],
-    [value],
-  );
-
-  return (
-    <div style={{ width: 320 }}>
-      <SuggestionInput
-        value={value}
-        onChange={setValue}
-        options={options}
-        onSelect={(option) => {
-          setSelected(option.label);
-          setValue('');
-        }}
-        placeholder="Add an item…"
-        aria-label="Add an item"
-        createLabel={withCreateRow ? (v) => `Add "${v}" as a new item` : undefined}
-        onCreate={
-          withCreateRow
-            ? (v) => {
-                setSelected(v);
-                setValue('');
-              }
-            : undefined
-        }
-      />
-      {selected && <p style={{ marginTop: 12, fontSize: 13 }}>Added: {selected}</p>}
-    </div>
-  );
-}
-
-export const Default: Story = {
-  render: () => <ControlledSuggestionInput />,
-};
-
-export const NoCreateRow: Story = {
-  name: 'Without create row (matched options only)',
-  render: () => <ControlledSuggestionInput withCreateRow={false} />,
-};
-
-export const OpenWithOptions: Story = {
-  render: () => (
-    <div style={{ width: 320 }}>
-      <SuggestionInput
-        value="ban"
-        onChange={() => {}}
-        options={CATALOG.slice(0, 2)}
-        onSelect={() => {}}
-        aria-label="Add an item"
-        createLabel={(v) => `Add "${v}" as a new item`}
-        onCreate={() => {}}
-      />
-    </div>
-  ),
-};
-
-export const Loading: Story = {
-  render: () => (
-    <div style={{ width: 320 }}>
-      <SuggestionInput
-        value="ban"
-        onChange={() => {}}
-        options={[]}
-        onSelect={() => {}}
-        loading
-        aria-label="Add an item"
-      />
-    </div>
-  ),
-};
-
-export const Empty: Story = {
-  name: 'Empty (no matches, no create row)',
-  render: () => (
-    <div style={{ width: 320 }}>
-      <SuggestionInput
-        value="xyz"
-        onChange={() => {}}
-        options={[]}
-        onSelect={() => {}}
-        aria-label="Add an item"
-      />
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <div style={{ width: 320 }}>
-      <SuggestionInput
-        value=""
-        onChange={() => {}}
-        options={[]}
-        onSelect={() => {}}
-        disabled
-        placeholder="Add an item…"
-        aria-label="Add an item"
-      />
-    </div>
-  ),
-};

package/src/components/SuggestionInput/SuggestionInput.tsx

@@ -1,207 +0,0 @@
-'use client';
-
-import { useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
-import { Popover } from '../Popover/Popover';
-import styles from './SuggestionInput.module.css';
-
-export interface SuggestionOption {
-  id: string;
-  label: string;
-  icon?: ReactNode;
-  /** Secondary text shown right-aligned on the row, e.g. "bought 4× recently". */
-  meta?: string;
-}
-
-export interface SuggestionInputProps {
-  value: string;
-  onChange: (value: string) => void;
-  options: SuggestionOption[];
-  onSelect: (option: SuggestionOption) => void;
-  placeholder?: string;
-  'aria-label': string;
-  id?: string;
-  disabled?: boolean;
-  /** Shown in place of the options list while a suggestion fetch is in flight. */
-  loading?: boolean;
-  /**
-   * Label for a trailing, always-selectable row that commits the raw typed
-   * text instead of a matched option — e.g. `(v) => \`Add "${v}" as a new item\`}`.
-   * Shown whenever `value` is non-empty and `onCreate` is provided, even
-   * when `options` is empty, so the input is never a dead end.
-   */
-  createLabel?: (value: string) => string;
-  onCreate?: (value: string) => void;
-  className?: string;
-}
-
-/**
- * SuggestionInput — a text field with an anchored, keyboard-navigable list
- * of async suggestions (a combobox), plus an optional trailing "create new"
- * row so free text is always a valid commit, not just a matched option.
- *
- * Fully controlled: the caller owns `value`/`onChange` and supplies
- * `options` (e.g. debounced server-fetched results) — this component only
- * handles open/close, keyboard navigation, and selection. Built on `Popover`
- * for positioning (`width: 'trigger'`, so the panel always matches the
- * input's own width).
- */
-export function SuggestionInput({
-  value,
-  onChange,
-  options,
-  onSelect,
-  placeholder,
-  'aria-label': ariaLabel,
-  id,
-  disabled = false,
-  loading = false,
-  createLabel,
-  onCreate,
-  className,
-}: SuggestionInputProps) {
-  const generatedId = useId();
-  const inputId = id ?? generatedId;
-  const listId = `${inputId}-suggestions`;
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [focused, setFocused] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(-1);
-
-  const showCreateRow = Boolean(onCreate && createLabel && value.trim());
-  const rowCount = options.length + (showCreateRow ? 1 : 0);
-  const open = focused && (rowCount > 0 || loading);
-
-  function close() {
-    setFocused(false);
-    setActiveIndex(-1);
-  }
-
-  function commitIndex(index: number) {
-    if (index < 0 || index >= rowCount) return;
-    const option = options[index];
-    if (option) {
-      onSelect(option);
-    } else if (onCreate) {
-      onCreate(value);
-    }
-    close();
-  }
-
-  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
-    if (!open) return;
-    // Some synthetic input sources (seen from automated/CDP-driven key
-    // dispatch) send a keydown with `key`/`code` as "Unidentified" or empty
-    // and no `keyCode` either — nothing here can special-case that further,
-    // but checking the legacy numeric code costs nothing and covers sources
-    // that do populate it even when `key` doesn't (older browsers, some
-    // assistive tech, IME edge cases).
-    const isArrowDown = e.key === 'ArrowDown' || e.keyCode === 40;
-    const isArrowUp = e.key === 'ArrowUp' || e.keyCode === 38;
-    const isEnter = e.key === 'Enter' || e.keyCode === 13;
-    const isEscape = e.key === 'Escape' || e.keyCode === 27;
-
-    if (isArrowDown) {
-      e.preventDefault();
-      setActiveIndex((i) => (i + 1) % rowCount);
-    } else if (isArrowUp) {
-      e.preventDefault();
-      setActiveIndex((i) => (i <= 0 ? rowCount - 1 : i - 1));
-    } else if (isEnter) {
-      e.preventDefault();
-      commitIndex(activeIndex === -1 ? 0 : activeIndex);
-    } else if (isEscape) {
-      close();
-    }
-  }
-
-  const trigger = (
-    <input
-      ref={inputRef}
-      id={inputId}
-      type="text"
-      role="combobox"
-      aria-expanded={open}
-      aria-controls={listId}
-      aria-autocomplete="list"
-      aria-activedescendant={activeIndex >= 0 ? `${listId}-option-${activeIndex}` : undefined}
-      aria-label={ariaLabel}
-      className={[styles.input, className].filter(Boolean).join(' ')}
-      value={value}
-      placeholder={placeholder}
-      disabled={disabled}
-      autoComplete="off"
-      onChange={(e) => {
-        onChange(e.target.value);
-        setActiveIndex(-1);
-      }}
-      onFocus={() => setFocused(true)}
-      onKeyDown={handleKeyDown}
-    />
-  );
-
-  return (
-    <Popover
-      trigger={trigger}
-      open={open}
-      onClose={close}
-      width="trigger"
-      aria-label={`${ariaLabel} suggestions`}
-    >
-      <ul id={listId} role="listbox" className={styles.list}>
-        {loading ? (
-          <li className={styles.status}>Loading…</li>
-        ) : (
-          <>
-            {options.map((option, index) => (
-              <li key={option.id} role="none">
-                <button
-                  id={`${listId}-option-${index}`}
-                  role="option"
-                  aria-selected={index === activeIndex}
-                  type="button"
-                  className={[styles.option, index === activeIndex ? styles.optionActive : '']
-                    .filter(Boolean)
-                    .join(' ')}
-                  // Selecting via mouse fires before the input's blur — use
-                  // onMouseDown (not onClick) so the click doesn't lose focus
-                  // and close the popover before the selection registers.
-                  onMouseDown={(e) => {
-                    e.preventDefault();
-                    commitIndex(index);
-                  }}
-                >
-                  {option.icon && <span className={styles.optionIcon}>{option.icon}</span>}
-                  <span className={styles.optionLabel}>{option.label}</span>
-                  {option.meta && <span className={styles.optionMeta}>{option.meta}</span>}
-                </button>
-              </li>
-            ))}
-            {showCreateRow && createLabel && (
-              <li role="none">
-                {options.length > 0 && <div className={styles.divider} />}
-                <button
-                  id={`${listId}-option-${options.length}`}
-                  role="option"
-                  aria-selected={options.length === activeIndex}
-                  type="button"
-                  className={[
-                    styles.option,
-                    styles.optionCreate,
-                    options.length === activeIndex ? styles.optionActive : '',
-                  ]
-                    .filter(Boolean)
-                    .join(' ')}
-                  onMouseDown={(e) => {
-                    e.preventDefault();
-                    commitIndex(options.length);
-                  }}
-                >
-                  {createLabel(value)}
-                </button>
-              </li>
-            )}
-          </>
-        )}
-      </ul>
-    </Popover>
-  );
-}

package/src/components/SwipableMobileCarousel/SwipableMobileCarousel.module.css

@@ -1,64 +0,0 @@
-.wrap {
-  position: relative;
-  height: 100%;
-  width: 100%;
-}
-
-.scroller {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scroll-snap-type: x mandatory;
-  /* Momentum + rubber-banding come from the browser's native scroll physics —
-     no hand-rolled pointer/touch dragging. Deliberately NOT
-     -webkit-overflow-scrolling: touch: that legacy iOS <13 hint promotes its
-     element to its own compositing layer for GPU-accelerated momentum
-     scroll, and that layer's paint order relative to siblings/fixed
-     descendants elsewhere in the tree isn't always reliable on real iOS
-     Safari (confirmed via sovereign-tasks' and sovereign-shopper's own
-     carousels, which hit and fixed this exact bug — a position:fixed
-     overlay opened above the scroller painted BEHIND it instead of above).
-     Removing it doesn't disable momentum scrolling on any iOS version this
-     platform realistically targets. */
-}
-
-.slide {
-  flex: 0 0 100%;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  overflow: hidden;
-  scroll-snap-align: start;
-  scroll-snap-stop: always;
-  /* Slide content is a flex column so Header/Footer stay their natural size
-     and Body (flex: 1 1 auto, min-height: 0) fills and scrolls the rest —
-     see SwipableMobileCarouselSlideParts.module.css. */
-  display: flex;
-  flex-direction: column;
-}
-
-.indicatorSlot {
-  /* Overlays the bottom of .wrap rather than taking its own layout row —
-     matches both sovereign-tasks' and sovereign-shopper's existing dots
-     placement. Applied by the carousel itself around WHATEVER
-     renderIndicator returns (the default SwipableMobileCarouselDots or a
-     caller-supplied override) — a custom renderIndicator has no way to
-     import this module's locally-scoped class itself (CSS Modules classnames
-     aren't cross-file importable), so positioning must live here, not be
-     something each indicator implementation opts into. Previously this class
-     was only ever applied to the *default* indicator branch, which silently
-     left any custom renderIndicator unpositioned — a static, in-flow sibling
-     pushed below the full-height .scroller and clipped out of view instead
-     of overlaid on top of it. */
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: var(--sv-space-3);
-  pointer-events: none;
-}
-
-.indicatorSlot > * {
-  pointer-events: auto;
-}

package/src/components/SwipableMobileCarousel/SwipableMobileCarousel.tsx

@@ -1,243 +0,0 @@
-'use client';
-
-import {
-  Children,
-  isValidElement,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  type ReactElement,
-  type ReactNode,
-} from 'react';
-import { useSnapCarousel } from '../../hooks/useSnapCarousel';
-import { SwipableMobileCarouselDots } from '../SwipableMobileCarouselDots/SwipableMobileCarouselDots';
-import { SwipableMobileCarouselSlide } from './SwipableMobileCarouselSlide';
-import { CarouselSlideMountContext } from './context';
-import styles from './SwipableMobileCarousel.module.css';
-
-export interface SwipableMobileCarouselIndicatorProps {
-  count: number;
-  activeIndex: number;
-  labels: (string | undefined)[];
-  onJump: (index: number) => void;
-}
-
-export interface SwipableMobileCarouselProps {
-  /** Controlled active slide index — the caller owns this (typically via
-   *  useCarouselRouteSync, or plain useState). */
-  activeIndex: number;
-  /** Called when a swipe gesture settles on a different index, or when the
-   *  reorder-jump fix re-snaps after the active slide's position changes.
-   *  The caller is responsible for updating `activeIndex` in response. */
-  onSettle: (index: number) => void;
-  /** How many slides on each side of the active one stay mounted. Default 1
-   *  matches both sovereign-tasks' and sovereign-shopper's existing "swipe
-   *  never shows a spinner" behavior. Slides outside this window keep their
-   *  DOM slot (so scroll-snap's position-based indexing stays correct) but
-   *  their children are not mounted at all. */
-  prefetchDistance?: number;
-  /** Passed straight through to the internal useSnapCarousel. */
-  settleDebounceMs?: number;
-  /** Required — labels the scroller region for assistive tech. No generic
-   *  fallback, since one would be wrong for every actual consumer. */
-  'aria-label': string;
-  /** Renders the indicator. Defaults to SwipableMobileCarouselDots. Pass
-   *  `null` to render no indicator at all. */
-  renderIndicator?: null | ((props: SwipableMobileCarouselIndicatorProps) => ReactNode);
-  className?: string;
-  /** Must be SwipableMobileCarouselSlide elements (nullish/boolean children
-   *  are safely skipped for conditional slides). A dev-mode warning is
-   *  logged for any other child type — see resolveSlides below. */
-  children: ReactNode;
-}
-
-interface ResolvedSlide {
-  key: string;
-  label: string | undefined;
-  element: ReactElement;
-}
-
-function describeChild(child: unknown): string {
-  if (isValidElement(child)) {
-    const type = child.type;
-    if (typeof type === 'string') return `<${type}>`;
-    if (typeof type === 'function') {
-      const named = type as { displayName?: string; name?: string };
-      return `<${named.displayName ?? named.name ?? 'Component'}>`;
-    }
-    return '<unknown>';
-  }
-  if (typeof child === 'string') return `string "${child}"`;
-  return String(child);
-}
-
-function resolveSlides(children: ReactNode): ResolvedSlide[] {
-  const slides: ResolvedSlide[] = [];
-  Children.forEach(children, (child, index) => {
-    if (child === null || child === undefined || child === false || child === true) return;
-    if (!isValidElement(child) || child.type !== SwipableMobileCarouselSlide) {
-      if (process.env.NODE_ENV !== 'production') {
-        console.error(
-          '[SwipableMobileCarousel] Every child must be a <SwipableMobileCarouselSlide>. ' +
-            `Found ${describeChild(child)} at position ${index}. A non-Slide child shifts every ` +
-            "subsequent slide's index, desyncing scroll-snap position from activeIndex.",
-        );
-      }
-      return;
-    }
-    const slideProps = child.props as { slideKey: string; label?: string };
-    if (process.env.NODE_ENV !== 'production' && !slideProps.label) {
-      console.warn(
-        `[SwipableMobileCarousel] SwipableMobileCarouselSlide "${slideProps.slideKey}" has no ` +
-          'label — it will show as "Slide N of count" in the default dots indicator.',
-      );
-    }
-    slides.push({ key: slideProps.slideKey, label: slideProps.label, element: child });
-  });
-  return slides;
-}
-
-/**
- * SwipableMobileCarousel — a compound component for swiping between full-
- * width slides (each an independent route/view on mobile), wrapping
- * useSnapCarousel. This library's first compound component: every other
- * component here is flat/prop-based, but slide content is large, arbitrary,
- * per-plugin subtrees that need a header-known/body-loading split an
- * array-of-objects prop would only express with worse JSX ergonomics.
- *
- * Owns rendering and mount-window mechanics only — it has no opinion on
- * where slide data lives. Do NOT: (a) aggregate cross-slide data inside a
- * SwipableMobileCarouselSlideBody (that recomputes on every slide render
- * regardless of which slide is active — belongs in the parent, which
- * already knows every slide exists); (b) mount a detail overlay (Sheet,
- * Dialog) inside a Slide's children — mount it as a sibling of
- * SwipableMobileCarousel instead, controlled by the same state that would
- * otherwise drive a routed page's overlay. sovereign-tasks' current
- * hand-rolled carousel does both and is measurably laggier than
- * sovereign-shopper's equivalent, which keeps its overlay in the routed pane.
- */
-export function SwipableMobileCarousel({
-  activeIndex,
-  onSettle,
-  prefetchDistance = 1,
-  settleDebounceMs = 120,
-  'aria-label': ariaLabel,
-  renderIndicator,
-  className,
-  children,
-}: SwipableMobileCarouselProps) {
-  const slides = useMemo(() => resolveSlides(children), [children]);
-  const count = slides.length;
-  const clampedActiveIndex = count === 0 ? 0 : Math.max(0, Math.min(count - 1, activeIndex));
-
-  // Initial scroll position, once — subsequent activeIndex changes come
-  // either from the user's own swipe (already reflected in DOM scroll
-  // position; re-syncing to the same index below is a harmless no-op) or an
-  // external navigation, which the effect below scrolls to explicitly.
-  const initialActiveIndexRef = useRef(clampedActiveIndex);
-
-  const { scrollRef, scrollToIndex, liveIndex } = useSnapCarousel({
-    itemCount: count,
-    onSettle,
-    debounceMs: settleDebounceMs,
-    initialIndex: initialActiveIndexRef.current,
-  });
-  useLayoutEffect(() => {
-    scrollToIndex(initialActiveIndexRef.current, 'instant');
-    // Runs once on mount only, matching both existing plugins' identical pattern.
-  }, []);
-
-  const didMountActiveIndexSyncRef = useRef(false);
-  useEffect(() => {
-    if (!didMountActiveIndexSyncRef.current) {
-      didMountActiveIndexSyncRef.current = true;
-      return;
-    }
-    scrollToIndex(clampedActiveIndex, 'smooth');
-  }, [clampedActiveIndex, scrollToIndex]);
-
-  // Reorder-jump fix: scroll-snap position tracks DOM order, not slide
-  // identity. If the previously-active slide's key still exists but moved
-  // (a caller re-sorted their slide array while mounted), re-snap to its
-  // new position and report it via onSettle so the caller's activeIndex
-  // stays in sync — otherwise scroll position silently desyncs from slide
-  // identity. Runs every commit (no dependency array) since it needs to
-  // notice any children change, not just a specific prop.
-  const prevKeysRef = useRef<string[] | null>(null);
-  useLayoutEffect(() => {
-    const currentKeys = slides.map((s) => s.key);
-    const prevKeys = prevKeysRef.current;
-    if (prevKeys) {
-      const sameOrder =
-        prevKeys.length === currentKeys.length && prevKeys.every((k, i) => k === currentKeys[i]);
-      if (!sameOrder) {
-        const activeKey = prevKeys[clampedActiveIndex];
-        if (activeKey !== undefined) {
-          const newIndex = currentKeys.indexOf(activeKey);
-          if (newIndex !== -1 && newIndex !== clampedActiveIndex) {
-            scrollToIndex(newIndex, 'instant');
-            onSettle(newIndex);
-          }
-        }
-      }
-    }
-    prevKeysRef.current = currentKeys;
-  });
-
-  function handleJump(index: number) {
-    // scrollToIndex sets useSnapCarousel's own dedupe ref synchronously, so
-    // the natural scroll-settle detection will NOT re-report this index —
-    // onSettle must be called directly here, same pairing as the
-    // reorder-jump fix above.
-    scrollToIndex(index, 'smooth');
-    onSettle(index);
-  }
-
-  const labels = slides.map((s) => s.label);
-  const indicator =
-    renderIndicator === null ? null : renderIndicator ? (
-      renderIndicator({ count, activeIndex: clampedActiveIndex, labels, onJump: handleJump })
-    ) : (
-      <SwipableMobileCarouselDots
-        count={count}
-        activeIndex={clampedActiveIndex}
-        labels={labels}
-        aria-label={ariaLabel}
-        onJump={handleJump}
-      />
-    );
-
-  return (
-    <div className={[styles.wrap, className].filter(Boolean).join(' ')}>
-      <div className={styles.scroller} ref={scrollRef} role="region" aria-label={ariaLabel}>
-        {slides.map((slide, i) => (
-          <div className={styles.slide} key={slide.key}>
-            <CarouselSlideMountContext.Provider
-              value={{
-                // Union of the settled index and the live (real-time,
-                // pre-settle) scroll position — see useSnapCarousel's own
-                // liveIndex doc comment. A single fast flick can carry
-                // native scroll-snap momentum past an intermediate slide to
-                // one two-or-more away before settle-detection's debounce
-                // window ever reports it; without also checking liveIndex,
-                // the slide the container had already visually scrolled to
-                // stays unmounted (rendering nothing at all, not even a
-                // loading skeleton) for that entire window.
-                isMounted:
-                  Math.abs(i - clampedActiveIndex) <= prefetchDistance ||
-                  Math.abs(i - liveIndex) <= prefetchDistance,
-              }}
-            >
-              {slide.element}
-            </CarouselSlideMountContext.Provider>
-          </div>
-        ))}
-      </div>
-      {/* Positioning (overlay the bottom of .wrap) lives here, applied around
-          whatever renderIndicator returns — see .indicatorSlot's own doc
-          comment for why this can't be delegated to the indicator itself. */}
-      {indicator && <div className={styles.indicatorSlot}>{indicator}</div>}
-    </div>
-  );
-}

package/src/components/SwipableMobileCarousel/SwipableMobileCarouselSlide.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import { useContext, type ReactNode } from 'react';
-import { CarouselSlideMountContext } from './context';
-
-export interface SwipableMobileCarouselSlideProps {
-  /** Stable identity for this slide, independent of its position among
-   *  siblings — required. This is what makes SwipableMobileCarousel's
-   *  reorder-jump fix possible: a plain array index can't distinguish "this
-   *  slide moved to position 2" from "this slide was removed and a
-   *  different one is now at position 2." Reuse whatever id the caller
-   *  already keys their `.map()` on (e.g. a list's own id). */
-  slideKey: string;
-  /** Accessible label surfaced to the default dots indicator (e.g.
-   *  "Groceries"). Falls back to "Slide N of count" if omitted — omitting it
-   *  logs a dev-mode warning, since every real slide usually has a title
-   *  available synchronously already. */
-  label?: string;
-  /** SwipableMobileCarouselSlideHeader/Body/Footer, in any order/subset. */
-  children: ReactNode;
-}
-
-/**
- * SwipableMobileCarouselSlide — a single slide of a SwipableMobileCarousel.
- * Renders its children only while within the carousel's mount window (the
- * active slide ± its configured prefetchDistance); outside that window it
- * renders nothing, matching both sovereign-tasks and sovereign-shopper's
- * existing "never fetch/render a non-neighbor slide" behavior, now
- * centralized instead of hand-rolled per plugin.
- */
-export function SwipableMobileCarouselSlide({ children }: SwipableMobileCarouselSlideProps) {
-  const ctx = useContext(CarouselSlideMountContext);
-  if (!ctx?.isMounted) return null;
-  return <>{children}</>;
-}