create-procode 0.0.0-stage → 1.1.0

package/templates/base/src/Module/index.ts.tmpl

@@ -0,0 +1,26 @@
+import SampleContacts from "./Sample/Contacts.json";
+
+/**
+ * Extension point 1 of 5: slug -> schema.
+ *
+ * The slug is the URL segment after the Vite base, so this screen is at
+ * __BASE_PATH__/sample. A slug with no branch here is "page not found" — no
+ * error, no log.
+ *
+ * A screen has FOUR coordinates that must agree:
+ *   1. the slug        "sample"                     — here, and in the URL
+ *   2. the schema file src/Module/Sample/Contacts.json
+ *   3. the screenId    "sample-contacts"            — INSIDE that JSON
+ *   4. the adapter     registered against that screenId in AdapterFactory.ts
+ *
+ * Miss one and the screen renders blank or empty. Read the screenId out of the
+ * JSON; never guess it.
+ */
+export const getSchemaBySlugService = (slug: string, _appCode: string): any => {
+  switch (slug) {
+    case "sample":
+      return SampleContacts;
+    default:
+      return null;
+  }
+};

package/templates/base/src/Screens/index.tsx.tmpl

@@ -0,0 +1,45 @@
+/**
+ * The three app-level screens <Core> renders on its own. Each is passed as an
+ * ELEMENT (`LoaderElement={AppLoader}`), not a component — passing a component
+ * renders nothing. Styles live in src/assets/styles/index.scss.
+ */
+
+/**
+ * LoaderElement — shown while any request is pending. The core's default nests
+ * its overlay inside itself (a double dim) and hardcodes its colour; this one
+ * reuses the same spinner classes once, recoloured by the theme.
+ */
+export const AppLoader = (
+  <div className="prc-loading-container" role="status" aria-label="Loading">
+    <div className="prc-spinner-triple">
+      <div className="prc-spinner-arc prc-spinner-arc1" />
+      <div className="prc-spinner-arc prc-spinner-arc2" />
+      <div className="prc-spinner-arc prc-spinner-arc3" />
+    </div>
+  </div>
+);
+
+/**
+ * ErrorElement — the router error boundary for every screen route. The core
+ * already logs the error, so this stays static. It does NOT cover a throw while
+ * the header or footer schema loads; React Router's own page shows for that.
+ */
+export const AppError = (
+  <div className="prc-404-container app-screen-message">
+    <p className="prc-oops">Oops!</p>
+    <p className="prc-title">Something went wrong.</p>
+    <p className="prc-desc">Reload the page. If it keeps happening, contact support.</p>
+  </div>
+);
+
+/**
+ * PageNotFoundElement — shown when getSchemaBySlugService returns null for the
+ * slug. The miss is cached, so a slug that later becomes valid needs a reload.
+ */
+export const AppNotFound = (
+  <div className="prc-404-container app-screen-message">
+    <p className="prc-oops">404</p>
+    <p className="prc-title">Page not found</p>
+    <p className="prc-desc">Check the address, or go back to the previous page.</p>
+  </div>
+);

package/templates/base/src/Utils/errorMessages.ts.tmpl

@@ -0,0 +1,35 @@
+import type { CoreProps } from "procode-lowcode-core";
+
+/**
+ * Fallback toast text per HTTP verb and status. Used only when the verb's
+ * responseConfig[status] has `enableMessage: true` and neither the schema nor
+ * the response supplies a message.
+ *
+ * The merge with the core's table is ONE level deep: listing a verb here
+ * replaces that verb's whole table, so keep every status you still want. Verbs
+ * left out keep the core's defaults. The tables below keep every status the
+ * core lists for POST and PUT, reworded for users.
+ */
+export const errorMessageMapper = {
+  POST: {
+    201: "Successfully created",
+    204: "No content",
+    400: "Bad request",
+    401: "Your session has expired. Please sign in again.",
+    409: "This record already exists.",
+    415: "Unsupported media type",
+    422: "Please fix the highlighted fields.",
+    500: "Something went wrong. Please try again.",
+  },
+  PUT: {
+    201: "Successfully updated",
+    204: "No content",
+    400: "Bad request",
+    401: "Your session has expired. Please sign in again.",
+    404: "This record no longer exists.",
+    409: "This record already exists.",
+    415: "Unsupported media type",
+    422: "Please fix the highlighted fields.",
+    500: "Something went wrong. Please try again.",
+  },
+} as unknown as NonNullable<CoreProps["errorMessageMapper"]>;

package/templates/base/src/Utils/fieldErrorMapper.ts.tmpl

@@ -0,0 +1,46 @@
+/**
+ * Turns a 422 body into { [screenDataField]: messages[] } so each message lands
+ * under its field. Called only when the verb's responseConfig[status] has
+ * `"alertType": "fieldvalidation"`, with the formatted response's `message`.
+ * Returning {} falls back to a toast.
+ *
+ * Keys MUST equal the widget's screenDataField ("screenData.name"), or the
+ * message never renders. Accepted shapes:
+ *
+ *   { propertyName, message } or an array of them   (the core's default)
+ *   { errors: { field: ["msg"] } }                   (ASP.NET ProblemDetails)
+ *   { field: ["msg"] } / { field: "msg" }            (a plain dictionary)
+ *
+ * A key without a "screenData." prefix gets one. Adjust FIELD_PREFIX, or map
+ * names here, if the backend's field names differ from the schema's.
+ */
+const FIELD_PREFIX = "screenData.";
+
+const toField = (name: string) => (name.startsWith(FIELD_PREFIX) ? name : FIELD_PREFIX + name);
+
+export const fieldErrorMapper = (raw: unknown): Record<string, string[]> => {
+  const errors: Record<string, string[]> = {};
+  const add = (name: unknown, message: unknown) => {
+    if (typeof name !== "string" || !name) return;
+    const key = toField(name);
+    (errors[key] ??= []).push(String(message ?? ""));
+  };
+
+  if (Array.isArray(raw)) {
+    raw.forEach((item) => add(item?.propertyName, item?.message));
+    return errors;
+  }
+  if (!raw || typeof raw !== "object") return errors;
+
+  const body = raw as Record<string, unknown>;
+  if ("propertyName" in body) {
+    add(body.propertyName, body.message);
+    return errors;
+  }
+
+  const dictionary = (body.errors && typeof body.errors === "object" ? body.errors : body) as Record<string, unknown>;
+  for (const [name, value] of Object.entries(dictionary)) {
+    (Array.isArray(value) ? value : [value]).forEach((message) => add(name, message));
+  }
+  return errors;
+};

package/templates/base/src/Utils/logger.ts.tmpl

@@ -0,0 +1,21 @@
+import type { LogLevel } from "procode-lowcode-core";
+
+/**
+ * One log sink for both libraries — main.tsx registers it with the core's
+ * registerLogger and the widget library's registerWidgetLogger.
+ *
+ * Forward to an error reporter here. Keep `warn`: most silent failures (an
+ * unregistered action, effect or handler, an unresolved URL token) surface
+ * only as a warning. The core's error screen logs the same error object on
+ * every render, so errors are de-duplicated by identity.
+ */
+const reported = new WeakSet<object>();
+
+export const logSink = (level: LogLevel, ...args: unknown[]) => {
+  const first = args[0];
+  if (level === "error" && first && typeof first === "object") {
+    if (reported.has(first)) return;
+    reported.add(first);
+  }
+  (console[level] ?? console.log)(...args);
+};

package/templates/base/src/Utils/responseFormatter.ts.tmpl

@@ -0,0 +1,39 @@
+/**
+ * Runs on the body of EVERY response, and its return value REPLACES
+ * response.data — every adapter sees this output, never the raw body.
+ *
+ * The core then reads `status` and `message` from what this returns, not from
+ * HTTP: the 401 path, success/failure, the responseConfig[status] lookup, the
+ * toast text and the 422 field errors all depend on them. So:
+ *
+ *   - always return a `status`;
+ *   - never spread an array, null or a primitive — wrap it under `data`, or an
+ *     endpoint that answers with a bare array reads as an empty result;
+ *   - leave field errors in `message`, where fieldErrorMapper reads them.
+ *
+ * Beyond the core's own formatter this unwraps a JSON-encoded `message`
+ * ("{\"message\":\"...\"}") and folds a `validationErrors: string[]` array into
+ * `message`, so toasts show the server's text instead of a generic one.
+ */
+export const responseFormatter = (data: any, status: number) => {
+  if (data === null || typeof data !== "object" || Array.isArray(data)) {
+    return { status, data } as any;
+  }
+
+  let message = data.message;
+
+  if (!message && Array.isArray(data.validationErrors) && data.validationErrors.length) {
+    message = data.validationErrors.filter(Boolean).join("\n");
+  }
+
+  if (typeof message === "string") {
+    try {
+      const parsed = JSON.parse(message);
+      if (parsed && typeof parsed.message === "string") message = parsed.message;
+    } catch {
+      // not JSON — keep the string as it is
+    }
+  }
+
+  return { ...data, status: data.status ?? status, message };
+};

package/templates/base/src/Utils/storages.ts.tmpl

@@ -0,0 +1,35 @@
+import type { IStorage } from "procode-lowcode-core";
+
+/**
+ * Extra storages for the STORAGE value-replace policy, alongside the built-in
+ * LOCAL and SESSION. A schema reads one as
+ *
+ *   { "valueReplacePolicy": "STORAGE::MEMORY", "value": "<key>" }
+ *
+ * An unknown storage key resolves to "" silently. Never register "LOCAL" or
+ * "SESSION" here — that replaces the built-in for the whole app.
+ */
+
+/** Per-tab, in-memory: cleared on reload. Values are kept JSON-encoded. */
+class MemoryStorage implements IStorage {
+  private map = new Map<string, string>();
+
+  read<T>(key: string): T | null {
+    const raw = this.map.get(key);
+    return raw === undefined ? null : (JSON.parse(raw) as T);
+  }
+
+  write(key: string, value: any) {
+    this.map.set(key, JSON.stringify(value));
+  }
+
+  clear(key: string) {
+    if (key === "*") this.map.clear();
+    else this.map.delete(key);
+  }
+}
+
+/** Module scope on purpose: <Core> props must keep one identity for the app's life. */
+export const customStorages: Record<string, IStorage> = {
+  MEMORY: new MemoryStorage(),
+};

package/templates/base/src/assets/styles/index.scss.tmpl

@@ -0,0 +1,149 @@
+// ---------------------------------------------------------------------------
+// The import order below IS the cascade. Each layer expects the ones above it
+// to have been declared, and the whole stack is one Sass compilation:
+//
+//   1. vs-theme      design tokens ($space-*, $text-*, colour ramps) — nothing
+//                    above it can reference a token, so it goes first.
+//   2. kendo-widget  the _kendo-bridge that binds Kendo's variables to those
+//                    tokens; must be declared before Kendo's own theme reads
+//                    them.
+//   3. kendo-theme-default  Kendo's compiled theme. NOT declared as a peer by
+//                    anything, but the widget library imports it BY NAME — so
+//                    it is a hard build failure when missing, not an extra.
+//   4. core          runtime layout (prc-cl-N columns, skeletons).
+//   5. vs-template   toolbar, grid chrome, saved views.
+//
+// Reordering these produces "Undefined variable" at build time, or a screen
+// that renders with the wrong spacing and no error at all.
+// ---------------------------------------------------------------------------
+@import "procode-vs-theme/scss";
+@import "procode-lowcode-kendo-widget/styles";
+@import "@progress/kendo-theme-default/dist/all.scss";
+@import "procode-lowcode-core/styles";
+@import "procode-vs-template/styles";
+
+// ---------------------------------------------------------------------------
+// App styles go BELOW this line.
+//
+// Reach for a theme token or a utility class before writing a rule, and never a
+// literal hex value — the theme ships 200+ utilities that already exist.
+// Do not redeclare a `.prc-*` or `.qo-*` class: those belong to the
+// libraries, and newer versions guard them with a doubled class, so a host rule
+// silently loses anyway.
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// THE FONT FAMILY IS SET ONCE, HERE.
+//
+// The theme's reset sets no `font-family` on `body`, and several of its own
+// component classes (`.qo-page-title`, `.qo-page-subtitle`) style size, weight
+// and colour only. Anything not carrying `qo-font-family-primary` therefore
+// inherits the browser default, which is a SERIF. One line here is the single
+// point that makes every screen agree; do not repeat the class per widget.
+// ---------------------------------------------------------------------------
+body {
+  font-family: var(--qo-font-family-primary);
+}
+
+// ---------------------------------------------------------------------------
+// LOADING PLACEHOLDERS — one height, one sweep, visible on a white card.
+//
+// Core ships `--skeleton-field-height: 32px`; every control on this stack is
+// 40px (`--qo-control-height`), so the form re-flowed 8px a row as data landed.
+// Core's `#eee` base with a sheen whose brightest stop is LIGHTER than the base
+// reads as "a white background animating" on a `qo-card`; both are restated as
+// theme tokens. The two `.prc-loading-container` rules: core nests
+// that element inside itself, so two rgba(0,0,0,.1) backdrops stacked, and the
+// dim landed on the skeleton base but not its z-index:2000 shimmer.
+// ---------------------------------------------------------------------------
+:root {
+  --skeleton-field-height: var(--qo-control-height);
+  --skeleton-background-color: var(--qo-bg-disabled);
+  --skeleton-background-linear-gradient: linear-gradient(
+    110deg,
+    var(--qo-bg-disabled) 8%,
+    var(--qo-bg-light) 18%,
+    var(--qo-bg-disabled) 33%
+  );
+}
+
+.prc-loading-container .prc-loading-container {
+  background-color: transparent;
+}
+
+body:has(.prc-skeleton) .prc-loading-container {
+  background-color: transparent;
+}
+
+// ---------------------------------------------------------------------------
+// Kendo controls that a schema put on the 40px ramp — make the ramp stick.
+//
+// `qo-h-control` is (0,1,0). kendo-widget's `.k-dropdownlist, .k-picker`
+// `{ height: 32px }` ties it and loads later, so DROPDOWNs drew 8px shorter than
+// the TEXTBOXes beside them. Doubling the class is (0,2,0) and re-states the
+// theme's own token — no `!important`.
+// ---------------------------------------------------------------------------
+// KendoReact 13+ emits no fill-mode class (`k-picker-solid`, `k-input-solid`) when
+// the theme decides the fill, so the solid default is the bare base class; the
+// `:where()` keeps "not flat / not outline" at the old (0,2,0) specificity.
+.qo-h-control.k-picker:where(:not(.k-picker-flat, .k-picker-outline)),
+.qo-h-control.k-input:where(:not(.k-input-flat, .k-input-outline)) {
+  height: var(--qo-control-height);
+}
+
+// A MultiSelect grows with its chips, so it takes a floor and not a height.
+.qo-min-h-control.k-input:where(:not(.k-input-flat, .k-input-outline)),
+.qo-min-h-control.k-picker:where(:not(.k-picker-flat, .k-picker-outline)) {
+  height: auto;
+  min-height: var(--qo-control-height);
+}
+
+// ---------------------------------------------------------------------------
+// Control text — NO RULE HERE, on purpose. 12px label / 13px value.
+//
+// Add, Edit and View read in one pair of sizes, and all of it comes from the
+// libraries: a field label is vs-theme's `qo-label` (12px / 600), and every
+// control's text is 13px from kendo-widget 2.8.1 — as are a BLOCK's value and
+// the grid toolbar's search from vs-template 2.12.1. Do not put a size on
+// `.k-input-inner`: a declaration on the element beats every class on the
+// wrapper, and globally it would also pin the toolbar search and filter cells.
+// (Apps generated before 1.0.1 carried an 11px rule here; delete it when they
+// adopt kendo-widget 2.8.1.)
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Two fields in one row, one label wraps — keep the controls on one line.
+//
+// The label HOC stacks label over control in `.prc-label-field`; a row of two
+// aligns them by their TOP, so a wrapped label pushes its control down a line.
+// Aligning the controls by their BOTTOM fixes it at every width. Both
+// restrictions are load-bearing: `[class*="prc-cl-"]` keeps it on a column
+// SLOT (`:has()` is a descendant test), and `:not(.prc-flx-container)` excludes
+// a slot that is itself a layout — a scroll pane carrying `prc-cl-fl` otherwise
+// gets bottom-packed and its first section is pushed above the fold, measured.
+// Durable home: core's ContainerRenderer styles.
+// ---------------------------------------------------------------------------
+.prc-flx-container:not(.prc-verticle):not(.prc-verticle-reverse)
+  > [class*="prc-cl-"]:not(.prc-flx-container):has(.prc-label-field) {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+// ---------------------------------------------------------------------------
+// App screens (src/Screens) — the loader, error and 404 elements main.tsx
+// hands to <Core>. They reuse the core classes; only the colour and the
+// missing height are restated here, as theme tokens.
+// ---------------------------------------------------------------------------
+.prc-spinner-arc.prc-spinner-arc {
+  border-top-color: var(--qo-border-primary);
+  border-right-color: var(--qo-border-primary);
+}
+
+.prc-404-container.app-screen-message {
+  min-height: 100dvh;
+  padding: var(--qo-space-lg);
+}
+
+@import "../../Factory/Widgets/SectionNav/style.scss";

package/templates/base/src/constant.ts.tmpl

@@ -0,0 +1,53 @@
+/**
+ * Application constants and the two registration enums.
+ *
+ * Every registry in this app resolves by string key and returns null on a miss
+ * — no error, no log. A new widget needs FOUR things: the WidgetTypes member,
+ * the component, the createWidgetMap() entry and the schema reference. Miss one
+ * and it renders nothing at all. Grep the key and confirm it appears at both
+ * the definition and the registration site before calling it done.
+ */
+
+/**
+ * Must equal the code main.tsx builds `window.getAdapter<CODE>` from — the core
+ * resolves that global by name from this same env var.
+ */
+export const APPLICATION_CODE = import.meta.env.VITE_APPLICATION_CODE;
+
+export const baseUrl = import.meta.env.VITE_CENTRAL_SERVICE_BASE_URL;
+
+export const getTokenFromCookie = (): string => {
+  const m = document.cookie.match(/(?:^|;\s*)AuthToken=([^;]*)/);
+  return m ? decodeURIComponent(m[1]) : "";
+};
+
+/**
+ * A hardcoded token (in .env.local, never .env) wins over the cookie. If every
+ * request 401s locally, check both of these first.
+ */
+export const AuthToken = import.meta.env.VITE_HARDCODED_TOKEN ?? getTokenFromCookie();
+
+/**
+ * Custom widget types. A member here is NOT evidence the widget works — it has
+ * to be in CustomWidgetFactory's createWidgetMap() too.
+ *
+ * Do not register a custom TEXTBOX, DATE, DATERANGE, RADIOGROUP, CHECKBOX or
+ * DIALOG: resolution order is custom -> template -> standard, so you would
+ * shadow the widget vs-template's grid toolbar depends on and visibly break the
+ * global-search box.
+ */
+export enum WidgetTypes {
+  MY_WIDGET = "MY_WIDGET",
+  /** The left "Sections" rail on a long form or view screen — src/Factory/Widgets/SectionNav. */
+  SECTION_NAV = "SECTION_NAV",
+}
+
+/** Custom validation names, as referenced by `validations[].name` in a schema. */
+export enum ValidationTypes {
+  MY_VALIDATION = "MY_VALIDATION",
+}
+
+/** Custom rule effects, as referenced by `ruleInterpreter[].rules[].effect`. */
+export enum RuleEffectTypes {
+  CUS_READONLY = "CUS_READONLY",
+}

package/templates/base/src/icons.ts.tmpl

@@ -0,0 +1,17 @@
+import type { IconResolver, registerIcons } from "procode-lowcode-kendo-widget";
+
+/**
+ * App icons, registered once by main.tsx. Every ICON widget, the Grid toolbar
+ * and the Grid filter cell resolve a name here first, then the library's
+ * aliases, then @progress/kendo-svg-icons by name — so this is only for a glyph
+ * Kendo lacks, or to change what a name draws app-wide. BUTTON role "icon" uses
+ * a font class and is not affected.
+ *
+ * Names are trimmed and lower-cased. A value is a Kendo SVGIcon:
+ *
+ *   logo: { name: "logo", viewBox: "0 0 24 24", content: '<path d="…" />' },
+ *
+ * The library maps three names onto other Kendo glyphs: download -> import,
+ * filter -> sliders, star -> star-outline. Register the name to take it back.
+ */
+export const appIcons: Exclude<Parameters<typeof registerIcons>[0], IconResolver | null | undefined> = {};

package/templates/base/src/localizationResolver.ts.tmpl

@@ -0,0 +1,48 @@
+import { LocalizationKey, type LocalizationResolver } from "procode-vs-template";
+
+/**
+ * Answers procode-vs-template's localization lookups. Registered once in
+ * main.tsx with registerLocalization().
+ *
+ * The template's widgets ask for values only the app can know — the signed-in
+ * user's date pattern, the organisation's currency symbol — by key, and this
+ * function decides where each one is read from (a token claim, a cached
+ * settings payload, a constant). The library never learns those shapes.
+ *
+ * It runs per lookup, at render time, so a value that arrives later (an async
+ * settings call) is still picked up on the next render. Returning undefined
+ * means "no value": the widget uses its own default. A resolver that throws is
+ * treated as "no value", so a lookup can never blank a screen.
+ *
+ * Switch on LocalizationKey, never on string literals — a misspelled key fails
+ * silently. Any other key works too; answering one is an edit to this file.
+ */
+
+/** Kendo date pattern. Replace with the user's own (e.g. a token claim). */
+const DATE_FORMAT = "MM/dd/yyyy";
+
+export const localizationResolver: LocalizationResolver = (key) => {
+  switch (key) {
+    case LocalizationKey.DateFormat:
+      return DATE_FORMAT;
+
+    // The idle hint, e.g. "MM/DD/YYYY".
+    case LocalizationKey.DatePlaceholder:
+      return DATE_FORMAT.toUpperCase();
+
+    // Hints for a FOCUSED date input. Without them Kendo swaps the placeholder
+    // for its CLDR long form ("month/day/year") the moment the box takes focus.
+    case LocalizationKey.DateFormatSections:
+      return { year: "YYYY", month: "MM", day: "DD" };
+
+    // e.g. "€". Undefined keeps the plain numeric pattern.
+    case LocalizationKey.CurrencySymbol:
+      return undefined;
+
+    case LocalizationKey.CurrencyDecimals:
+      return 2;
+
+    default:
+      return undefined;
+  }
+};

package/templates/base/src/main.tsx.tmpl

@@ -0,0 +1,136 @@
+import ReactDOM from "react-dom/client";
+import axios from "axios";
+import WidgetFactory, {
+  registerIcons,
+  registerWidgetLogger,
+  registerWidgetResolver,
+} from "procode-lowcode-kendo-widget";
+import Core, { registerLogger, type CoreProps } from "procode-lowcode-core";
+import TemplateWidgetFactory, { TemplateActionFactory, registerLocalization } from "procode-vs-template";
+
+import { getAdapter } from "./AdapterProvider/AdapterFactory";
+import CustomWidgetFactory from "./Factory/CustomWidgetFactory";
+import CustomValidationFactory from "./Factory/CustomValidationFactory";
+import CustomRuleEffectFactory from "./Factory/CustomRuleEffectFactory";
+import CustomActionFactory from "./CustomAction";
+import CustomAuthorizationProvider from "./CustomAuthorizationProvider";
+import { getSchemaBySlugService } from "./Module";
+import Notification from "./Factory/Widgets/Notification";
+import { AppError, AppLoader, AppNotFound } from "./Screens";
+import { localizationResolver } from "./localizationResolver";
+import { appIcons } from "./icons";
+import { customRoute } from "./routes";
+import { responseFormatter } from "./Utils/responseFormatter";
+import { fieldErrorMapper } from "./Utils/fieldErrorMapper";
+import { errorMessageMapper } from "./Utils/errorMessages";
+import { customStorages } from "./Utils/storages";
+import { logSink } from "./Utils/logger";
+import { APPLICATION_CODE, AuthToken } from "./constant";
+import "./assets/styles/index.scss";
+
+// ===========================================================================
+// This file is the SINGLE integration point of a ProCode app, and the order of
+// the numbered statements below is load-bearing — understand each one's
+// comment before reordering anything here.
+//
+// It is also the ONLY file under src/ that may import axios. Anywhere else, a
+// bare `import axios` or `fetch(` silently forfeits the loading counter and
+// skeletons, status-code toasts, 422 -> field-error routing, action
+// chainability, a schema-visible endpoint, and per-environment retargeting
+// without a code change. Data access is apiConfig + a standard action.
+// ===========================================================================
+
+// (1) Let HTTP 4xx reach the core's SUCCESS interceptor so responseConfig
+//     entries (422 field errors, per-status toasts, the 401 handler) can run.
+//     This MUST execute before CentralService lazily calls axios.create() —
+//     after that the instance has already captured the default.
+axios.defaults.validateStatus = (status) => status < 500;
+
+// (2) One log sink for the core and the widget library.
+registerLogger(logSink);
+registerWidgetLogger(logSink);
+
+// (3) Build the three widget lists in this order — the template list is
+//     composed FROM the other two, so both have to exist first.
+const customWidgetList = CustomWidgetFactory.get();
+const standardWidgetList = WidgetFactory.get();
+const templateWidgetList = TemplateWidgetFactory.get(standardWidgetList, customWidgetList);
+
+// (4) A widget inside the kendo library that needs another widget (the Grid's
+//     header bar needs a DROPDOWN) resolves it here instead of importing its
+//     sibling — so a custom override reaches those places too. Same
+//     custom -> template -> standard order the schema renderer uses.
+registerWidgetResolver((type: string) =>
+  customWidgetList.getWidgets?.().get(type) ??
+  TemplateWidgetFactory.getTemplateWidgets?.()?.get(type) ??
+  standardWidgetList.getWidgets?.().get(type),
+);
+
+// (5) BEFORE render. The core resolves this global by NAME as
+//     "getAdapter" + VITE_APPLICATION_CODE. If the two diverge, EVERY adapter
+//     silently falls back to a dummy and no screen ever has data — on every
+//     screen at once, with nothing in the console.
+(window as any)[`getAdapter${APPLICATION_CODE ?? ""}`] = getAdapter;
+
+// (6) BEFORE render. vs-template's widgets ask this for the date pattern,
+//     currency symbol and similar per-user values by key; icons resolve the
+//     app's own glyphs first.
+registerLocalization(localizationResolver);
+registerIcons(appIcons);
+
+// HTTP 401. The core calls this INSTEAD of its own redirect, and skips the toast
+// and responseConfig for that response. Replace the redirect with a re-auth
+// dialog or an SPA route if the app has one. The flag stops a burst of
+// parallel 401s from redirecting more than once.
+let signingOut = false;
+const unauthorizedHandler = () => {
+  if (signingOut) return;
+  signingOut = true;
+  window.location.assign(import.meta.env.VITE_BASE_LOGOUT_URL || "/");
+};
+
+// The core reads these headers on every request. Mutate this object in place
+// to change a header later (e.g. a refreshed token) — a new object is ignored.
+const requestHeaders = { Authorization: `Bearer ${AuthToken}` };
+
+// Every <Core> prop, typed. <Core> itself accepts `any`, so a misspelled prop
+// written inline compiles and is silently dropped — building the props here
+// makes TypeScript catch it. All of them are fixed at first mount: <Core> is
+// rendered once, never inside React.StrictMode (its setup runs once and a
+// second run is silently ignored).
+const coreProps: CoreProps = {
+  // Widgets, resolved custom -> template -> standard.
+  widgetProvider: standardWidgetList,
+  templateWidgetProvider: templateWidgetList,
+  customWidgetProvider: customWidgetList,
+
+  // Actions, validations and rule effects — the same three-tier resolution.
+  // vs-template ships no validation or rule-effect factory, so there is no
+  // templateValidationProvider / templateRuleEffectProvider to pass.
+  templateActionProvider: TemplateActionFactory.getInstance(),
+  customActionProvider: new CustomActionFactory(),
+  customValidationProvider: new CustomValidationFactory(),
+  customRuleEffectProvider: new CustomRuleEffectFactory(),
+
+  authorizationProvider: new CustomAuthorizationProvider(),
+  getSchemaBySlugService,
+  customRoute,
+  customStorages,
+
+  // HTTP
+  requestHeaders,
+  responseFormatter,
+  fieldErrorMapper,
+  errorMessageMapper,
+  unauthorizedHandler,
+
+  // Screens the core renders itself — ELEMENTS, not components.
+  LoaderElement: AppLoader,
+  ErrorElement: AppError,
+  PageNotFoundElement: AppNotFound,
+
+  // A COMPONENT exposing showNotification() through a ref.
+  NotificationElement: Notification,
+};
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(<Core {...coreProps} />);