App Shell Components: Modals, Portals, Gallery, and More

import {
  Screen,
  Focusable,
  FocusScope,
  FocusGrid,
  ActionHandler,
  Portal,
  Modal,
  ActionBar,
  Grid,
  Lazy,
  Gallery,
} from "@pocketjs/framework/components";

interface ScreenProps extends ViewProps {}

function HomeScreen() {
  return (
    <Screen class="relative flex-col w-full h-full bg-slate-950 overflow-hidden">
      {/* page content */}
    </Screen>
  );
}

interface FocusableProps extends ViewProps {
  onPress?: () => void;
}

<Focusable
  class="p-2 rounded-md bg-white border-slate-200 focus:border-blue-500"
  onPress={() => select(item)}
>
  <Text class="text-sm text-slate-950">{item.title}</Text>
</Focusable>

interface FocusScopeProps extends ViewProps {
  active?: boolean | (() => boolean);  // default: true
  autoFocus?: boolean;                  // default: true — move focus to first focusable on entry
  restoreFocus?: boolean;               // default: true — return focus to previous node on exit
}

// A slide-in drawer that traps focus while open
function Drawer(props: { open: () => boolean; onClose: () => void }) {
  return (
    <FocusScope
      active={props.open}
      class="absolute top-0 right-0 h-full w-[240] bg-white shadow-lg flex-col p-4 gap-3"
    >
      <Text class="text-base text-slate-950 font-bold">Settings</Text>
      <Focusable
        class="p-2 rounded-md bg-slate-100 border-slate-200 focus:border-blue-500"
        onPress={props.onClose}
      >
        <Text class="text-sm text-slate-950">Close</Text>
      </Focusable>
    </FocusScope>
  );
}

interface FocusGridProps extends ViewProps {
  columns: number;                      // required — number of columns (floored to ≥ 1)
  wrap?: boolean;                       // default: false — wrap edges instead of clamping
  active?: boolean | (() => boolean);   // default: true
}

interface ActionHandlerProps {
  button: number;                                         // a BTN constant, or several OR'd together
  onPress: (pressed: number, buttons: number) => void;    // pressed = newly-pressed edge bits this frame
  active?: boolean | (() => boolean);                     // gate the handler on/off (default: on)
  allowWhenBlocked?: boolean;                             // keep firing even while a Modal blocks input
  children?: Element;
}

import { ActionHandler } from "@pocketjs/framework/components";
import { BTN } from "@pocketjs/framework/input";

// Single button — toggle a menu
<ActionHandler button={BTN.SELECT} onPress={() => setMenuOpen((v) => !v)} />;

// Multiple buttons with edge-bitmask inspection
<ActionHandler
  button={BTN.LTRIGGER | BTN.RTRIGGER}
  onPress={(pressed) => {
    if (pressed & BTN.LTRIGGER) prevTab();
    if (pressed & BTN.RTRIGGER) nextTab();
  }}
/>;

// Global back handler, inactive while a confirmation dialog is open
<ActionHandler
  button={BTN.CROSS}
  onPress={goBack}
  active={() => !confirmOpen()}
/>;

interface PortalProps {
  children?: Element | (() => Element);
}

import { Portal, View, Text } from "@pocketjs/framework/components";

// A "saved" toast that floats top-right without affecting page layout
<Portal>
  <View class="absolute top-3 right-3 px-2 py-1 rounded-md bg-white border-slate-200">
    <Text class="text-xs text-slate-500">Saved</Text>
  </View>
</Portal>;

interface ModalProps {
  open?: boolean | (() => boolean);   // default: true — pass a signal accessor to drive it reactively
  panelClass?: string;                // default: "flex-col gap-2 w-[328] p-3 rounded-xl shadow-lg bg-white border-slate-200"
  class?: string;                     // default: "absolute inset-0 z-50 flex-col items-center justify-center"
  children?: Element;
}

interface ActionBarProps extends ViewProps {}

import { ActionBar, Text, View } from "@pocketjs/framework/components";

<ActionBar>
  <View class="flex-row gap-3">
    <Text class="text-xs text-slate-500">CIRCLE Select</Text>
    <Text class="text-xs text-slate-500">CROSS Back</Text>
  </View>
  <Text class="text-xs text-slate-500">START Menu</Text>
</ActionBar>;

interface GridProps extends ViewProps {
  gap?: number;                         // cross-axis gap in px, applied via style object
  columns?: number;                     // column count for d-pad traversal (requires active)
  wrap?: boolean;                       // wrap traversal around edges (default: false)
  active?: boolean | (() => boolean);   // enable FocusGrid traversal
}

import { Grid, Image, Text, View } from "@pocketjs/framework/components";

<Grid
  columns={3}
  active
  gap={10}
  class="flex-row flex-wrap items-start justify-center w-[264]"
>
  {tiles.map((t) => (
    <View class="flex-col items-center gap-1 w-[78]">
      <View
        class="w-[68] h-[68] rounded-xl bg-slate-900 border-slate-700 focus:border-white items-center justify-center"
        focusable
        onPress={() => open(t)}
      >
        <Image class="w-[56] h-[56] rounded-lg" src={t.src} />
      </View>
      <Text class="text-xs text-slate-200 font-bold">{t.name}</Text>
    </View>
  ))}
</Grid>;

interface LazyProps {
  when: boolean | (() => boolean);              // mount while truthy; unmount when false
  reveal?: number;                               // frames to show fallback before revealing (default: 0)
  fallback?: Element | (() => Element);          // shown during the reveal delay
  children: () => Element;                       // deferred content — only built once active and past the reveal
}

import { Lazy, View, Text } from "@pocketjs/framework/components";

// Spinner skeleton while loading, then reveal heavy content
<Lazy when={isOpen} reveal={16} fallback={() => <Spinner />}>
  {() => <HeavyPanel />}
</Lazy>;

// Plain on-demand gate (no delay)
<Lazy when={() => tab() === "library"}>
  {() => <LibraryScreen />}
</Lazy>;

interface GalleryProps {
  count: number;                              // total number of pages
  page: () => number;                         // controlled current-page accessor (0-based)
  onPageChange?: (next: number) => void;      // called when L/R paging is requested
  renderPage: (index: number) => Element;     // page factory — only invoked for pages in the mount window
  window?: number;                            // pages kept mounted on each side (default: 1)
  duration?: number;                          // slide duration in ms (default: 300)
  easing?: EasingName;                        // slide easing (default: "out")
  bindTriggers?: boolean;                     // bind LTRIGGER/RTRIGGER internally (default: true)
  wrap?: boolean;                             // wrap past ends instead of clamping (default: false)
  class?: string;                             // override the outer viewport class
}

<ActionHandler
  button={BTN.LTRIGGER | BTN.RTRIGGER}
  onPress={(pressed) => {
    if (pressed & BTN.LTRIGGER) setPage((p) => Math.max(0, p - 1));
    if (pressed & BTN.RTRIGGER) setPage((p) => Math.min(count - 1, p + 1));
  }}
/>
<Gallery
  count={count}
  page={page}
  onPageChange={setPage}
  renderPage={(i) => <Page index={i} />}
  bindTriggers={false}
/>

// Solid: a minimal two-screen navigator
import { createSignal, Switch, Match } from "solid-js";
import { Screen, ActionHandler } from "@pocketjs/framework/components";
import { BTN } from "@pocketjs/framework/input";

function App() {
  const [screen, setScreen] = createSignal<"home" | "library">("home");
  return (
    <>
      <Switch>
        <Match when={screen() === "home"}>
          <HomeScreen onOpenLibrary={() => setScreen("library")} />
        </Match>
        <Match when={screen() === "library"}>
          <LibraryScreen />
        </Match>
      </Switch>
      <ActionHandler
        button={BTN.CROSS}
        onPress={() => setScreen("home")}
        active={() => screen() !== "home"}
      />
    </>
  );
}