path-router-red 0.4.0

package/src/PathRouter/readme.md

@@ -0,0 +1,427 @@
+# PathRouter
+
+A small, type-safe routing layer built on top of `react-router-dom` that adds:
+
+- A **declarative config** for pages and modals (`setPage` / `setModal`).
+- A **factory** (`createPathRouter`) that binds your config to fully-typed router pieces — no manual generics on every call site.
+- A **single React context** exposing the current page, the current modal and the search params, with imperative helpers (`navigate`, `open`, `close`, `set`, `change`, `delete`, `clear`).
+- **URL-driven modals**: a modal is represented as a segment after `/modal/` inside the path, so it survives reloads, deep links and back/forward navigation.
+- An optional **`ModalWrapper`** plugin (e.g. an animated popup) that can intercept the close action via a forwarded ref.
+
+---
+
+## File layout
+
+```text
+PathRouter/
+├── index.ts                 # Public API (factory + builders + types)
+├── createPathRouter.tsx     # The factory itself
+├── types.ts                 # All public types
+├── Container/
+│   ├── RouterContainer.tsx  # Renders <Routes> for pages + <ModalsContainer>
+│   ├── ModalsContainer.tsx  # Renders the currently open modal
+│   └── index.ts
+├── Provider/
+│   ├── PathProvider.tsx     # BrowserRouter + PathContext provider
+│   ├── context.ts           # React context object
+│   ├── usePath.ts           # Internal hook (factory wraps it for users)
+│   └── index.ts
+├── NavLink/
+│   ├── NavLink.tsx          # Internal NavLink (factory wraps it for users)
+│   └── index.ts
+└── utils/
+    ├── setters.ts           # setPage / setModal helpers
+    ├── createRoute.ts       # Flattens the nested page config
+    ├── clearSlash.ts        # Path normalization
+    ├── parseSearch.ts       # Search-params merge helper
+    └── index.ts
+```
+
+---
+
+## Quick start
+
+```ts
+// src/config/route.ts
+import { setPage, setModal } from "@/modules/PathRouter";
+import { HomePage, AddPage, NotFoundPage } from "@/Pages";
+import { TestModal } from "@/Modals/Test";
+
+export const route = {
+  pages: {
+    home:  setPage({ component: HomePage }),
+    add:   setPage({ component: AddPage }),
+    "*":   setPage({ component: NotFoundPage }),
+  },
+  modals: {
+    test: setModal({ component: TestModal }),
+  },
+} as const;
+```
+
+```ts
+// src/containers/Router/PathProvider.tsx
+import { route } from "@/config";
+import { createPathRouter } from "@/modules/PathRouter";
+
+export const {
+  PathProvider,
+  PathRouterContainer,
+  usePath,
+  NavLink,
+  getPath,
+  getModal,
+} = createPathRouter(route);
+```
+
+```tsx
+// somewhere near the root
+import { PathProvider, PathRouterContainer } from "@/containers/Router";
+
+<PathProvider>
+  <PathRouterContainer fallback={<Spinner />} />
+</PathProvider>;
+```
+
+```tsx
+// any component
+import { usePath, NavLink } from "@/containers/Router";
+
+const Foo = () => {
+  const { page, modal } = usePath();   // no <typeof config> generic needed!
+  page.navigate("add");                 // ✓ autocompleted
+  modal.open("test");                   // ✓ autocompleted
+  return <NavLink to="home" modal="test">Open</NavLink>;
+};
+```
+
+---
+
+## How it works
+
+### 1. Configuration via `setPage` / `setModal`
+
+The config is a plain object with two sections — `pages` and `modals`:
+
+```ts
+import { setPage, setModal } from "@/modules/PathRouter";
+
+export const route = {
+  pages: {
+    "/":   setPage({ component: HomePage }),
+    add:   setPage({ component: AddItemPage }),
+    users: {
+      "/":   setPage({ component: UsersListPage }),
+      ":id": setPage({ component: UserPage }),
+    },
+    modules: {
+      ...setPage({ component: ModulesIndexPage }), // page at /modules
+      routing: setPage({ component: RoutingPage }), // page at /modules/routing
+      "*":     setPage({ component: RoutingPage }), // page at /modules/*
+    },
+    "*":   setPage({ component: NotFoundPage }),
+  },
+  modals: {
+    test:    setModal({ component: TestModal }),
+    confirm: setModal({ component: ConfirmModal }),
+  },
+} as const;
+```
+
+- `setPage({ component, redirect? })` wraps the value as `{ data: {...} }`. The `data` field marks the node as a renderable page, but **does not stop** the route builder from descending — children of the same node are still discovered.
+- Pages can be **nested** as plain objects — `createRoute` walks the tree and produces a flat `[{ pathName, data }]` list (see `utils/createRoute.ts`).
+- A node may **simultaneously be a page and a container** for child routes. Spread the result of `setPage` into the node to attach a component at that path while keeping nested keys:
+
+  ```ts
+  modules: {
+    ...setPage({ component: ModulesIndexPage }), // /modules
+    routing: setPage({ component: RoutingPage }), // /modules/routing
+    "*":     setPage({ component: RoutingPage }), // /modules/*
+  }
+  ```
+
+  This is what enables breadcrumb-style hierarchies where each ancestor segment is itself a page.
+- Recursion into a node stops only when the node itself carries `component` or `redirect` at its top level (i.e. it is a bare leaf, not a `setPage(...)` result). `setPage` puts those fields under `data`, so spreading it never blocks descent.
+- A page with `redirect` (or no `component`) becomes a `<Navigate to={redirect || "/"} replace />`.
+- `setModal({ component })` is just an identity helper that preserves literal types for inference.
+- `as const` is **required** — without it TS widens string keys to `string` and you lose autocompletion.
+
+### 2. The `createPathRouter` factory
+
+`createPathRouter(route)` captures your config once and returns everything pre-bound:
+
+```ts
+const {
+  PathProvider,            // BrowserRouter + context
+  PathRouterContainer,     // renders pages + modals (config injected)
+  usePath,                 // typed hook  — no <typeof config> needed
+  NavLink,                 // typed link  — no <typeof config> needed
+  getPath,                 // identity helper: <P extends PathNamesOf<C>>(p: P) => p
+  getModal,                // identity helper: <M extends ModalNamesOf<C>>(m: M) => m
+  config,                  // the original config, re-exported
+} = createPathRouter(route);
+```
+
+Why re-exports rather than direct imports?
+
+- TypeScript cannot infer generics from a literal `typeof route` _unless_ you pass it explicitly each time. The factory passes it once for you.
+- Every consumer of the returned API gets autocompletion of routes / modal names with **zero ceremony**.
+- The package itself stays generic and reusable; the binding lives in your app code.
+
+> The factory return values are not re-exported from `@/modules/PathRouter`. The only way to obtain `PathProvider`, `PathRouterContainer`, `usePath`, `NavLink`, `getPath`, `getModal` is via `createPathRouter(config)`.
+
+### 3. Mounting
+
+```tsx
+import { PathProvider, PathRouterContainer } from "@/containers/Router";
+
+<PathProvider>
+  <PathRouterContainer
+    ModalWrapper={MyModalWrapper}   // optional
+    fallback={<Spinner />}          // optional Suspense fallback
+  />
+</PathProvider>;
+```
+
+- `PathProvider` mounts a `BrowserRouter` and an inner provider that derives the page path, the modal state and the search params from `useLocation()` (`Provider/PathProvider.tsx`).
+- `PathRouterContainer` renders the pages inside `<Suspense>` and, if a modal is open, mounts `ModalsContainer` next to the page tree. `config` is already injected by the factory — you only pass `ModalWrapper` / `fallback`.
+
+### 4. URL shape
+
+A URL is split on the literal **`/modal/`** separator:
+
+```text
+/users/42/modal/confirm/extra-crumb?tab=info
+└── page path ──┘     └─ modal ──┘
+```
+
+In `PathProvider`:
+
+```ts
+const [rawPagePath, modalPath] = location.pathname.split("/modal/");
+const segments = (modalPath || "").split("/").filter(Boolean);
+const name        = segments[0];       // "confirm"
+const breadCrumbs = segments.slice(1); // ["extra-crumb"]
+```
+
+So:
+
+- `page.path` always points to the page route the user is on, regardless of whether a modal is open.
+- `modal.name` is the first segment after `/modal/`.
+- `modal.breadCrumbs` are additional path segments that the modal can use for its own internal navigation/steps.
+- `modal.isOpen` is `true` iff `modal.name` is set.
+
+This means modals are **bookmarkable and shareable** out of the box and the browser back button closes the modal naturally.
+
+### 5. The `usePath` hook (from the factory)
+
+```ts
+import { usePath } from "@/containers/Router";
+
+const { page, modal, searchParams } = usePath();   // already typed!
+
+page.path;                 // current page pathname (no /modal/... suffix)
+page.navigate("add");      // ✓ typed against config.pages
+page.isHavePrevHistory;    // true if history.key !== "default"
+
+modal.isOpen;
+modal.name;                // current modal key
+modal.breadCrumbs;         // string[] after the modal name
+modal.path;                // "<name>/<crumb1>/<crumb2>"
+modal.open("confirm", ["step-2"]); // ✓ typed against config.modals
+modal.close();
+
+searchParams.params;       // Record<string, string[]>
+searchParams.change({ tab: "info" });           // merge (string=set, string[]=append)
+searchParams.set({ tab: ["a", "b"] });          // replace per-key
+searchParams.delete("tab");
+searchParams.clear();
+```
+
+### 6. `getPath` / `getModal` — typed identity helpers
+
+When you need a typed path or modal-name literal somewhere outside JSX (e.g. inside a side-effect, a redux thunk, a `redirect` field of another page), use the identity helpers returned by the factory:
+
+```ts
+import { getPath, getModal } from "@/containers/Router";
+
+const target = getPath("home");      // type: "home"
+const which  = getModal("test");     // type: "test"
+
+// Compile-time error: argument is not assignable to PathNamesOf<typeof route>
+const bad = getPath("does-not-exist");
+```
+
+These replace the previous `export type PathNames = NestedKeyOf<typeof routes, "data">` pattern that is impossible to express from inside an isolated package.
+
+If you really need the type itself (e.g. as a function parameter), it is still available via `typeof getPath`:
+
+```ts
+type PathNames = Parameters<typeof getPath>[0];
+type ModalNames = Parameters<typeof getModal>[0];
+```
+
+…or use the package-level generics with an explicit config:
+
+```ts
+import type { PathNamesOf, ModalNamesOf } from "@/modules/PathRouter";
+import type { route } from "@/config";
+
+type PathNames  = PathNamesOf<typeof route>;
+type ModalNames = ModalNamesOf<typeof route>;
+```
+
+### 7. `NavLink` (from the factory)
+
+```tsx
+import { NavLink } from "@/containers/Router";
+
+<NavLink to="home">Home</NavLink>
+<NavLink modal="test">Open test modal</NavLink>
+<NavLink to="users" modal="confirm" modalBreadCrumbs={["step-2"]}>
+  Users + confirm at step 2
+</NavLink>
+```
+
+- Renders a real `<a href>` (right-click / “open in new tab” / SSR work as expected).
+- Intercepts the primary-button click and routes through `page.navigate(...)`.
+- Adds `aria-current="page"` and `data-active` when active; you can override the active class via `activeClassName`.
+
+### 8. Page rendering (`RouterContainer.tsx`)
+
+- Calls `createRoute(config)` once (memoised) to flatten the page tree.
+- Renders a single `<Routes>` switch with one `<Route>` per leaf.
+- If a leaf has no `component` or has a `redirect`, the element becomes `<Navigate to={redirect || "/"} replace />`.
+- The whole switch is wrapped in `<Suspense fallback={fallback}>` so lazy components work transparently.
+- Modals are rendered as a **sibling** of `<Routes>`, only when `modal.isOpen` — they overlay the current page rather than replacing it.
+
+### 9. Modal rendering (`ModalsContainer.tsx`)
+
+- Builds a virtual location `"<pagePath>/<modalName>"` (normalized via `clearSlash`) and feeds it to a dedicated `<Routes location={routesLocation}>`. This is what makes the modal aware of the current page path.
+- Each modal route is registered at `"<pagePath>/<modalName>"`, so modals can be **page-scoped** if needed.
+- If the URL contains a modal name that does not exist in the config (no matching component), the container calls `modal.close()` automatically — broken/stale modal links self-heal.
+- If a `ModalWrapper` is provided, it is rendered with `{ modalName, isOpen, onClose, children }` and a forwarded ref. When the user triggers close, the container prefers `ref.current.handleCloseWithAnimation()` (so the wrapper can run an exit animation), and only falls back to the raw `close()` if that method is not exposed.
+
+The `ModalWrapper` contract:
+
+```ts
+interface ModalWrapperRef {
+  handleCloseWithAnimation: () => void;
+}
+
+interface ModalWrapperProps {
+  modalName?: string;
+  isOpen: boolean;
+  onClose: () => void;
+  children?: ReactNode;
+}
+
+type ModalWrapperComponent = ForwardRefExoticComponent<
+  ModalWrapperProps & RefAttributes<ModalWrapperRef>
+>;
+```
+
+Modal components themselves receive `ModalProps` (`{ onClose: () => void }`):
+
+```tsx
+import type { FC } from "react";
+import type { ModalProps } from "@/modules/PathRouter";
+
+export const TestModal: FC<ModalProps> = ({ onClose }) => (
+  <button onClick={onClose}>Close</button>
+);
+```
+
+### 10. Path normalization (`clearSlash`)
+
+All internal `navigate(...)` calls go through `clearSlash`:
+
+- collapses repeated slashes (`a//b` → `a/b`);
+- guarantees a single leading slash;
+- strips trailing slashes (root `/` stays as `/`).
+
+This keeps the URL canonical regardless of how the caller composed it.
+
+### 11. Search params
+
+`PathProvider` derives `searchParams` from `location.search` and exposes four helpers:
+
+| Method   | Behaviour                                                                 |
+| -------- | ------------------------------------------------------------------------- |
+| `change` | Merge: `string` value → set the key; `string[]` value → append values.    |
+| `set`    | Replace each provided key: deletes existing values, then writes new ones. |
+| `delete` | Removes a key entirely.                                                   |
+| `clear`  | Removes every search param.                                               |
+
+All mutations preserve `location.hash`.
+
+---
+
+## Public API of `@/modules/PathRouter`
+
+The package exposes only what cannot depend on a concrete config:
+
+### Builders / factory / utilities
+
+- `setPage`, `setModal` — config builders.
+- `createPathRouter(config)` — returns `{ PathProvider, PathRouterContainer, usePath, NavLink, getPath, getModal, config }`.
+- `clearSlash` — path normalizer.
+
+### Types — config-independent
+
+- `RouterConfig`, `PageData`, `ModalData`
+- `ModalProps` — props passed to a modal component.
+- `ModalState`, `SearchParams`, `SearchParamsState`
+- `ModalWrapperComponent`, `ModalWrapperProps`, `ModalWrapperRef`
+- `BoundPathRouterContainerProps`, `BoundNavLinkProps<C>`, `PathRouter<C>`
+
+### Types — config-dependent (must be parametrised)
+
+- `PathNamesOf<C>` — must be used as `PathNamesOf<typeof route>`.
+- `ModalNamesOf<C>` — must be used as `ModalNamesOf<typeof route>`.
+
+> `PathProvider`, `PathRouterContainer`, `usePath`, `NavLink`, `getPath`, `getModal` are **deliberately not exported** from the package — obtain them from `createPathRouter(config)`.
+> `PathContextType` is also not re-exported; the typed shape is available via the return type of the factory's `usePath`.
+
+---
+
+## Minimal end-to-end example
+
+```tsx
+import { setPage, setModal, createPathRouter } from "@/modules/PathRouter";
+
+const route = {
+  pages: {
+    "/":  setPage({ component: HomePage }),
+    add:  setPage({ component: AddItemPage }),
+    "*":  setPage({ redirect: "/" }),
+  },
+  modals: {
+    confirm: setModal({ component: ConfirmModal }),
+  },
+} as const;
+
+export const {
+  PathProvider,
+  PathRouterContainer,
+  usePath,
+  NavLink,
+  getPath,
+  getModal,
+} = createPathRouter(route);
+
+export const App = () => (
+  <PathProvider>
+    <PathRouterContainer />
+  </PathProvider>
+);
+
+const SomeButton = () => {
+  const { page, modal } = usePath();
+  return (
+    <button onClick={() => modal.open("confirm")}>
+      Open confirm (current page stays: {page.path})
+    </button>
+  );
+};
+```

package/src/PathRouter/types.ts

@@ -0,0 +1,139 @@
+import type {
+  ComponentType,
+  LazyExoticComponent,
+  ReactNode,
+  RefAttributes,
+} from "react";
+import type { Location, NavigateOptions } from "react-router-dom";
+
+/* ───────────────────────── Generic helpers ───────────────────────── */
+
+export type NestedKeyOf<ObjectType extends object, StopKey extends string> = {
+  [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
+    ? Key extends StopKey
+      ? never
+      : `${Key}` | `${Key}/${NestedKeyOf<ObjectType[Key], StopKey>}`
+    : `${Key}`;
+}[keyof ObjectType & (string | number)];
+
+/* ───────────────────────── Page / Modal data ───────────────────────── */
+
+export type PageData = {
+  component?: ComponentType<any> | LazyExoticComponent<ComponentType<any>>;
+  redirect?: string;
+} & Record<string, any>;
+
+export interface ModalProps {
+  onClose: () => void;
+}
+
+export interface ModalData {
+  component?:
+    | ComponentType<ModalProps>
+    | LazyExoticComponent<ComponentType<ModalProps>>;
+}
+
+export interface PageContent {
+  data?: PageData;
+}
+
+export interface BreadCrumbsPage {
+  [path: string]: ExtendedPage;
+}
+
+export type ExtendedPage = BreadCrumbsPage | PageContent;
+
+export interface PagesRoute {
+  [path: string]: ExtendedPage;
+}
+
+export type ModalRoutes = Record<string, ModalData>;
+
+/* ───────────────────────── Router config ───────────────────────── */
+
+export interface RouterConfig<
+  P extends PagesRoute = PagesRoute,
+  M extends ModalRoutes = ModalRoutes,
+> {
+  pages: P;
+  modals?: M;
+}
+
+/** Extract typed page paths from a user config. */
+export type PathNamesOf<C extends RouterConfig<any, any>> =
+  C extends RouterConfig<infer P, any> ? NestedKeyOf<P, "data"> : string;
+
+/** Extract typed modal names from a user config. */
+export type ModalNamesOf<C extends RouterConfig<any, any>> =
+  C extends RouterConfig<any, infer M> ? Extract<keyof M, string> : string;
+
+/* ───────────────────────── Path context ───────────────────────── */
+
+export type SearchParams = Record<string, string[]>;
+
+export interface SearchParamsState {
+  [key: string]: string | string[];
+}
+
+export interface ModalState {
+  path: string;
+  name?: string;
+  breadCrumbs: string[];
+  isOpen: boolean;
+}
+
+export interface PathContextType<
+  C extends RouterConfig<any, any> = RouterConfig<any, any>,
+> {
+  page: {
+    path: string;
+    navigate: (path: PathNamesOf<C>, options?: NavigateOptions) => void;
+    isHavePrevHistory: boolean;
+  };
+  modal: {
+    open: (name: ModalNamesOf<C>, breadCrumbs?: string[]) => void;
+    close: () => void;
+    /** Full modal path including modal name, e.g. "test/sub" */
+    path: string;
+    name?: string;
+    /** Sub-crumbs without modal name */
+    breadCrumbs: string[];
+    isOpen: boolean;
+  };
+  searchParams: {
+    params: SearchParams;
+    /** Merge: string -> set; array -> append */
+    change: (searchParams: SearchParamsState) => void;
+    /** Replace fully: each key is set to provided value(s) */
+    set: (searchParams: SearchParamsState) => void;
+    delete: (key: string) => void;
+    clear: () => void;
+  };
+  defaultLocation: Location;
+}
+
+/* ───────────────────────── Modal wrapper plugin ───────────────────────── */
+
+export interface ModalWrapperRef {
+  handleCloseWithAnimation: () => void;
+}
+
+export interface ModalWrapperProps {
+  modalName?: string;
+  isOpen: boolean;
+  onClose: () => void;
+  children?: ReactNode;
+}
+
+/**
+ * Wrapper plugin component.
+ *
+ * Accepts both a `forwardRef`-wrapped component (the container will call
+ * `ref.current.handleCloseWithAnimation()` when available) and a plain
+ * function component that simply ignores the ref. `RefAttributes` keeps
+ * `ref` as an optional prop, so any `ComponentType<ModalWrapperProps>`
+ * structurally satisfies this signature in React 19.
+ */
+export type ModalWrapperComponent = ComponentType<
+  ModalWrapperProps & RefAttributes<ModalWrapperRef>
+>;

package/src/PathRouter/utils/clearSlash.ts

@@ -0,0 +1,16 @@
+/**
+ * Normalize path:
+ *  - collapse internal "//" sequences to a single "/"
+ *  - guarantee a single leading "/"
+ *  - strip trailing "/" (root "/" stays as "/")
+ */
+export const clearSlash = (path: string): string => {
+  if (!path) return "/";
+
+  let p = path.replace(/\/{2,}/g, "/");
+
+  if (!p.startsWith("/")) p = "/" + p;
+  if (p.length > 1 && p.endsWith("/")) p = p.replace(/\/+$/, "");
+
+  return p;
+};

package/src/PathRouter/utils/createRoute.ts

@@ -0,0 +1,53 @@
+import {
+ type ExtendedPage,
+ type ModalRoutes,
+ type PageData,
+ type PagesRoute,
+ type RouterConfig,
+} from "../types";
+
+const objectIsEmpty = (obj: Record<string, any>) =>
+  Object.keys(obj).length === 0;
+
+/**
+ * Flatten a nested page config into a list of `{ pathName, data }`,
+ * and produce a flat list for modals as well.
+ */
+export const createRoute = (config: RouterConfig<any, any>) => {
+  const pagesRoutes: { pathName: string; data: PageData }[] = [];
+
+  const walk = (route: PagesRoute | ExtendedPage, currentPath: string) => {
+    Object.entries(route).forEach(([pathName, content]: [string, any]) => {
+      if (content?.data) {
+        pagesRoutes.push({
+          pathName: currentPath + pathName,
+          data: { ...content.data } as PageData,
+        });
+      }
+
+      if (
+        content &&
+        !objectIsEmpty(content) &&
+        !content.component &&
+        !content.redirect
+      ) {
+        const newPath = currentPath + pathName;
+        walk(
+          content,
+          newPath + (newPath[newPath.length - 1] !== "/" ? "/" : ""),
+        );
+      }
+    });
+  };
+
+  walk(config.pages, "");
+
+  const modalsList = Object.entries(
+    (config.modals || {}) as ModalRoutes,
+  ).map(([pathName, data]) => ({ pathName, data }));
+
+  return {
+    pages: pagesRoutes,
+    modals: modalsList,
+  };
+};

package/src/PathRouter/utils/index.ts

@@ -0,0 +1,4 @@
+export * from "./clearSlash";
+export * from "./parseSearch";
+export * from "./setters";
+export * from "./createRoute";

package/src/PathRouter/utils/parseSearch.ts

@@ -0,0 +1,15 @@
+import { type Location } from "react-router-dom";
+import { type SearchParamsState } from "../types";
+
+export const parseSearchParams = (
+  searchParams: SearchParamsState,
+  location: Location,
+) => {
+  const params = new URLSearchParams(location.search);
+  Object.entries(searchParams).forEach(([key, values]) => {
+    if (typeof values === "string") params.set(key, values);
+    else values.forEach((value) => params.append(key, value));
+  });
+
+  return params;
+};

package/src/PathRouter/utils/setters.ts

@@ -0,0 +1,8 @@
+import type { ModalData, PageData } from "../types";
+export * from "./createRoute";
+
+/** Wrap a page descriptor so the route tree can detect leaves via `data`. */
+export const setPage = <const T extends PageData>(data: T) => ({ data });
+
+/** Identity helper that gives nice inference for modal descriptors. */
+export const setModal = <const T extends ModalData>(data: T): T => data;

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./PathRouter";

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "jsx": "react-jsx",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}