Web Structure

The stack layout names the frame, routes, and modules folders for its toolchain. This realizes litespec/frontend/structure#organize-a-frontend-into-frame-routes-and-modules.

React:

apps/{frontend}/
  src/
    app/       the frame: client configuration, session, language, permissions, formatting, shell data
    routes/    one file per address, compiled into a typed route tree
    modules/   one folder per backend module, aggregate, and use case
  tests/
    unit/      logic tests
    routes/    the route contract suite
    e2e/       evidence specifications
  package.json
  vite.config.ts

Svelte:

apps/{frontend}/
  src/
    routes/    one folder per address, with a page per folder
    lib/
      app/       the frame: client configuration, session, language, permissions, formatting, shell data
      modules/   one folder per backend module, aggregate, and use case
  tests/
    unit/      logic tests
    routes/    the route contract suite
    e2e/       evidence specifications
  svelte.config.js
  vite.config.ts
  package.json

The generated route artifacts, build output, and dependency folders stay untracked.

Does each frontend tree match the layout its stack section states?

Marked guidance: a reviewer answers this question.

lib is refused on React because the frame lives in src/app, so a lib folder would be a second frame. stores is refused on Svelte because shared state belongs in the frame or beside its readers, not in one store folder.

Does any React folder take the name lib, or any Svelte folder under src/lib the name stores?

Marked guidance: a reviewer answers this question.

A column definition or a validation rule in a route file is unreachable from the second route that needs it. An import between two route files makes one address depend on another. This realizes litespec/frontend/structure#keep-a-route-entry-thin.

An order list route validates its search, prefetches its read, and composes one floorplan from module components.

export const Route = createFileRoute("/_console/orders/")({
  validateSearch: z.object({ q: z.string().trim().catch("").default(""), ...pagingSearch }),
  loaderDeps: ({ search }) => search,
  loader: ({ context, deps }) => context.queryClient.ensureQueryData(merchantOrdersQuery(deps.q, deps.page)),
  component: OrdersPage,
});

The Svelte page does the same in its load:

export async function load({ parent, url }) {
  const { queryClient } = await parent();
  const search = orderSearch.parse(Object.fromEntries(url.searchParams));
  await queryClient.ensureQueryData(merchantOrdersQuery(search.q, search.page));
  return { search };
}

Does each route file hold only its input, its load, and its component?

Marked guidance: a reviewer answers this question.

The direction keeps addresses, use-case code, cross-route values, and shared code in separate layers. This realizes litespec/frontend/structure#order-imports-from-routes-to-shared-packages.

This direction shows the allowed dependency path.

React:

src/routes -> src/modules -> src/app -> packages/*

Svelte:

src/routes -> src/lib/modules -> src/lib/app -> packages/*

A module cannot import a route. A shared package cannot import an application. A frame module cannot reach into one module's use-case folder for a second module's data. On Svelte, imports resolve through the $lib alias, which points at src/lib.

Does every import follow the route to module to frame to package direction?

Marked guidance: a reviewer answers this question.

These values cross every route. A route holding one of them holds it twice with two copies to keep equal. A browser API reached from a use-case module belongs here as well, because a module renders and reads data rather than touching the device. This realizes litespec/frontend/structure#locate-cross-route-values-in-the-frame.

Does the frame hold every cross-route value and browser use?

Marked guidance: a reviewer answers this question.