@smartsoft001-mobilems/claude-plugins 2.86.0 → 2.87.0

package/plugins/mobilems/skills/mobilems-project-init/references/config-providers.md

@@ -0,0 +1,203 @@
+# app.config.ts — the MobilEMS provider set
+
+Overwrite `apps/web/src/app/app.config.ts` with the providers below (the base shipped a minimal
+version). Thread `<PREFIX>` (reference uses `@msr`). `app.config.server.ts` and
+`app.routes.server.ts` stay as the base emitted them.
+
+The imports from `@<PREFIX>/angular` (`LanguageInterceptor`, `PreviewAuthInterceptor`,
+`SsrTimeoutInterceptor`, `LocalStorageService`, `EnvironmentService`) come from the shared lib
+populated in step 7 — so in **foundation-only** mode, omit the three interceptor providers and the
+`@<PREFIX>/angular` interceptor imports (they don't exist yet).
+
+```ts
+import {
+  HTTP_INTERCEPTORS,
+  HttpClient,
+  provideHttpClient,
+  withFetch,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import {
+  ApplicationConfig,
+  Injectable,
+  provideBrowserGlobalErrorListeners,
+  provideZonelessChangeDetection,
+  importProvidersFrom,
+  inject,
+  provideEnvironmentInitializer,
+  isDevMode,
+  provideAppInitializer,
+} from '@angular/core';
+import {
+  provideClientHydration,
+  withEventReplay,
+  withI18nSupport,
+} from '@angular/platform-browser';
+import { provideRouter, withInMemoryScrolling } from '@angular/router';
+import { EffectsModule, provideEffects } from '@ngrx/effects';
+import { provideStore, StoreModule } from '@ngrx/store';
+import { provideStoreDevtools } from '@ngrx/store-devtools';
+import {
+  InterpolatableTranslationObject,
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
+import {
+  AppService,
+  ErrorService,
+  NgrxSharedModule,
+  StyleService,
+} from '@smartsoft001/angular';
+import {
+  ISearchData,
+  SEARCH_CONFIG_TOKEN,
+  SharedModule,
+} from '@smartsoft001-mobilems/angular';
+import { MasonryModule } from '@thisissoon/angular-masonry';
+import { catchError, firstValueFrom, map, of, timeout } from 'rxjs';
+
+import {
+  environment,
+  EnvironmentService,
+  LanguageInterceptor,
+  LocalStorageService,
+  PreviewAuthInterceptor,
+  SsrTimeoutInterceptor,
+} from '@<PREFIX>/angular';
+
+import { appRoutes } from './app.routes';
+
+@Injectable()
+class NoOpAppService extends AppService {
+  override initTitle(): void {
+    // No-op: disable AppService.initTitle() which overrides
+    // page titles set by components via SeoService.updateTitle()
+  }
+}
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideClientHydration(withEventReplay(), withI18nSupport()),
+    provideBrowserGlobalErrorListeners(),
+    provideZonelessChangeDetection(),
+    provideRouter(
+      appRoutes,
+      withInMemoryScrolling({ scrollPositionRestoration: 'top' }),
+    ),
+    provideHttpClient(withFetch(), withInterceptorsFromDi()),
+    { provide: HTTP_INTERCEPTORS, useClass: LanguageInterceptor, multi: true },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: PreviewAuthInterceptor,
+      multi: true,
+    },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: SsrTimeoutInterceptor,
+      multi: true,
+    },
+    importProvidersFrom(
+      StoreModule.forRoot(
+        {},
+        {
+          runtimeChecks: {
+            strictStateImmutability: false,
+            strictActionImmutability: false,
+          },
+        },
+      ),
+      MasonryModule.forRoot(),
+      TranslateModule.forRoot(),
+      EffectsModule.forRoot([]),
+      NgrxSharedModule,
+      SharedModule.forRoot({
+        apiUrl: environment.apiUrl,
+        multimediaUrl: environment.multimediaUrl,
+        mainLogoPath: 'logo.png',
+        styleVariables: {},
+      }),
+    ),
+    { provide: StyleService, useClass: StyleService },
+    { provide: AppService, useClass: NoOpAppService },
+    {
+      provide: ErrorService,
+      useValue: {
+        log: (err: any) => {
+          console.error('Global error handler:', err);
+        },
+      },
+    },
+    provideEnvironmentInitializer(() => {
+      const envService = inject(EnvironmentService);
+      envService.init();
+    }),
+    provideStore(),
+    provideEffects(),
+    provideStoreDevtools({
+      maxAge: 25,
+      logOnly: !isDevMode(),
+      autoPause: true,
+      trace: true,
+      traceLimit: 75,
+    }),
+    {
+      provide: SEARCH_CONFIG_TOKEN,
+      useValue: {
+        apiUrl: environment.apiUrl,
+        searchMap: (txt: string, data: ISearchData) => {
+          return {
+            news: `${environment.apiUrl}search/Article/page/1?maxPerPage=1&filter[phrase]=${encodeURIComponent(txt)}&filter[template]=AKTUALNO%C5%9ACI`,
+            articles: `${environment.apiUrl}search/Article/page/1?maxPerPage=1&filter[phrase]=${encodeURIComponent(txt)}&filter[template]=POZOSTAŁE`,
+            partners: `${environment.apiUrl}dictionary/Department/search/page/1?maxPerPage=999&sort=random&_type=query&q=${encodeURIComponent(txt)}`,
+          };
+        },
+      },
+    },
+    provideAppInitializer(async () => {
+      const httpClient = inject(HttpClient);
+      const translateService = inject(TranslateService);
+      const localStorageService = inject(LocalStorageService);
+
+      // Initialize language before fetching translations so the
+      // language interceptor sends the correct Accept-Language header.
+      localStorageService.initLang();
+
+      async function fetchTranslations() {
+        const url = environment.production
+          ? environment.apiUrl + 'setting/theme'
+          : '/api/translations';
+
+        const translations = (await firstValueFrom(
+          httpClient.get<{ data: any }>(url).pipe(
+            timeout(5000),
+            map((response) => {
+              return response?.data?.translations ?? { en: {}, pl: {} };
+            }),
+            catchError(() => of(null)),
+          ),
+        )) as {
+          en: InterpolatableTranslationObject;
+          pl: InterpolatableTranslationObject;
+        } | null;
+
+        if (!translations || !translations.en || !translations.pl) {
+          console.warn('Translations are missing or malformed:', translations);
+          return;
+        }
+
+        translateService.setTranslation('en', translations.en);
+        translateService.setTranslation('pl', translations.pl);
+      }
+
+      await fetchTranslations();
+    }),
+  ],
+};
+```
+
+## Notes
+
+- `searchMap` is plain URL-string config — keep it verbatim even though it references `partners`
+  (out of scope) and `news`/`articles` (added later). It's runtime config, not an import dependency.
+- The `news`/`articles` template values (`AKTUALNO%C5%9ACI` = AKTUALNOŚCI, `POZOSTAŁE`) match the
+  `baseQuery` the `mobilems-articles` skill threads into `ArticlesSharedModule.forFeature`.

package/plugins/mobilems/skills/mobilems-project-init/references/npm-deps.md

@@ -0,0 +1,66 @@
+# npm dependencies — the MobilEMS foundation set
+
+Add these to the workspace root `package.json` `dependencies`. **Resolve every version at run
+time — never hardcode.** Anchor on the installed `@smartsoft001/angular` line (the same anchor
+`scaffold-nx-workspace` used): read its installed `package.json` version, or
+`npm view @smartsoft001/<pkg> version`. The `@smartsoft001*` libs move together; match their lines.
+
+## Add in project-init (foundation — used by the shared lib + app.config)
+
+**Framework (smartsoft001 + MobilEMS shared):**
+
+- `@smartsoft001/angular`
+- `@smartsoft001/crud-shell-angular`
+- `@smartsoft001/domain-core`
+- `@smartsoft001/models`
+- `@smartsoft001/utils`
+- `@smartsoft001-mobilems/angular` (provides `SharedModule`, `SeoService`, `ConfigsFacade`, `SEARCH_CONFIG_TOKEN`)
+- `@smartsoft001-mobilems/models` (provides `Config`, `Page`, `PageSlide`, `MsFile`)
+
+**State + i18n:**
+
+- `@ngrx/store`, `@ngrx/effects`, `@ngrx/store-devtools`, `@ngrx/signals`
+- `@ngx-translate/core`
+
+**Shared-UI / runtime libraries** (used by **generic** shared-lib components, so they are
+foundation deps — verified against the reference):
+
+- `@thisissoon/angular-masonry` + `masonry-layout` (masonry grids; `MasonryModule.forRoot()` in app.config)
+- `swiper` (generic `slider` component)
+- `leaflet` + `@types/leaflet` (generic `map` component + `styles.scss` `leaflet.css` import)
+- `openseadragon` + `@types/openseadragon` (generic `gallery/gallery-fullscreen` deep-zoom)
+- `@angular/cdk` (`BreakpointObserver` in the home carousels; the `orientation` service)
+- `moment` + `moment-timezone` (date handling across shared components)
+
+The runtime libraries go in `dependencies`; their `@types/*` packages (`@types/leaflet`,
+`@types/openseadragon`) go in `devDependencies`. Pin `@angular/cdk` to the workspace's Angular line
+(`@angular/core` version). `@angular/forms` is used by the shared filter components — it normally
+comes with the Angular base; ensure it's present (same Angular line) and add it if the base lacks it.
+
+> `express` + `dotenv` are already present from the base `server.ts` — verify, don't re-add.
+
+## Feature packages — added by the module skills, not here
+
+Each module skill adds its own feature packages when it builds that module:
+
+| Package(s)                                                                             | Added by                      |
+| -------------------------------------------------------------------------------------- | ----------------------------- |
+| `@smartsoft001-mobilems/objects-{domain,shell-angular,shell-dtos}`, `online-3d-viewer` | `mobilems-objects`            |
+| `@smartsoft001-mobilems/public-collections-{domain,shell-angular,shell-dtos}`          | `mobilems-object-collections` |
+| `@smartsoft001-mobilems/articles-{domain,shell-angular,shell-dtos}`                    | `mobilems-articles`           |
+
+Keep these out of the foundation: a feature package belongs with the feature shared components that
+use it, so the foundation library builds on its own.
+
+## Resolution recipe
+
+```bash
+# anchor line (e.g. 2.122.0 → use ^2.122.0 for @smartsoft001/*, the matching mobilems line for @smartsoft001-mobilems/*)
+npm view @smartsoft001/angular version
+npm view @smartsoft001-mobilems/angular version
+# third-party: take the current published line unless the base already pinned a compatible one
+npm view <pkg> version
+```
+
+Write `^<resolved>` ranges (matching the reference's style). Do not run `npm install` unless the
+user approves (skip during eval).

package/plugins/mobilems/skills/mobilems-project-init/references/server-env.md

@@ -0,0 +1,89 @@
+# Runtime env delta — multimediaUrl + /api/translations
+
+The base shipped `environment.{ts,prod.ts}`, `EnvironmentService`, a `server.ts` with `/env.js`, and
+the SSRF allowed-hosts list — all keyed on `API_URL` / `SITE_URL` / `APP_VERSION` only. MobilEMS adds
+a **`multimediaUrl`** key (media/CDN host) and an **`/api/translations`** dev endpoint. These are the
+only env changes; do not otherwise rewrite the base SSR infra.
+
+## 1. `libs/shared/angular/src/lib/environments/environment.ts` + `environment.prod.ts`
+
+Add the `multimediaUrl` field to **both** files, mirroring the existing keys:
+
+```ts
+  multimediaUrl:
+    typeof window !== 'undefined' && (window as any)['env']
+      ? (window as any)['env']['multimediaUrl']
+      : process.env['MULTIMEDIA_URL'],
+```
+
+(Append after `siteUrl`. In reference mode the copied shared lib already carries this — verify it's
+present rather than duplicating.)
+
+## 2. `EnvironmentService` (shared lib)
+
+In `EnvironmentService.initFromProcessEnv()` and `init()`, propagate `multimediaUrl` alongside
+`apiUrl`/`siteUrl`/`version` (set from `process.env['MULTIMEDIA_URL']` on the server; copy from the
+transfer-state / `window.env` on the client). In reference mode this comes with the copied service —
+just confirm it.
+
+## 3. `apps/web/src/server.ts` — two additions
+
+**a) Allowed-hosts:** after the `SITE_URL` block and before the `API_URL` block, add a
+`MULTIMEDIA_URL` host so SSR can fetch media during render:
+
+```ts
+const multimediaUrl = process.env['MULTIMEDIA_URL'];
+if (multimediaUrl) {
+  try {
+    allowedHosts.push(
+      new URL(
+        multimediaUrl.startsWith('http')
+          ? multimediaUrl
+          : `https://${multimediaUrl}`,
+      ).hostname,
+    );
+  } catch {
+    // ignore invalid URL
+  }
+}
+```
+
+**b) `/env.js` template:** add the `multimediaUrl` line + its replacement:
+
+```ts
+window['env']['multimediaUrl'] = '${MULTIMEDIA_URL}';
+```
+
+```ts
+    .replace(/\$\{MULTIMEDIA_URL\}/g, process.env['MULTIMEDIA_URL'] || '')
+```
+
+**c) `/api/translations` endpoint** (needs `import * as fs from 'fs'` and `import * as path from 'path'`
+at the top): serve the translations JSON from dist, falling back to the public source. Register it
+**before** the static-file middleware and the catch-all `app.use('/**', …)`:
+
+```ts
+app.get('/api/translations', (req, res) => {
+  let translationPath = path.join(
+    process.cwd(),
+    'dist/apps/web/browser/translations.json',
+  );
+  if (!fs.existsSync(translationPath)) {
+    translationPath = path.join(
+      process.cwd(),
+      'apps/web/public/translations.json',
+    );
+  }
+  if (fs.existsSync(translationPath)) {
+    const translations = JSON.parse(fs.readFileSync(translationPath, 'utf8'));
+    res.json(translations);
+  } else {
+    console.error('Translation file not found at:', translationPath);
+    res.status(404).json({ error: 'Translation file not found' });
+  }
+});
+```
+
+The `app.config.ts` `provideAppInitializer` hits `/api/translations` in dev and `apiUrl + 'setting/theme'`
+in prod (see `references/config-providers.md`). Optionally seed an empty
+`apps/web/public/translations.json` (`{"en":{},"pl":{}}`) so dev SSR doesn't 404.

package/plugins/mobilems/skills/mobilems-project-init/references/shared-lib.md

@@ -0,0 +1,125 @@
+# Build the foundation shared library
+
+The shared library `libs/shared/angular` (alias `@<PREFIX>/angular`) holds the museum's shared
+Angular building blocks: the `App` shell, header, footer, the generic page renderer, filters,
+gallery, map, slider, carousels, content widgets, WCAG + SEO services, interceptors, pipes,
+directives, tools, models, and `configs.module.ts`. Build it by copying from the reference repo's
+`libs/shared/angular/src/lib` and threading `<PREFIX>` (the reference uses `@msr`).
+
+The library starts as the base shell that exports only `environment` + `EnvironmentService` with
+empty `lib/` placeholder dirs — fill those dirs with the **foundation shared components**.
+
+## Foundation shared components vs feature shared components
+
+The shared library contains two kinds of shared component, separated by a simple structural rule:
+
+- A **foundation shared component** depends only on Angular, the smartsoft framework packages, and
+  other foundation shared components. **Build these here.**
+- A **feature shared component** imports a feature domain package
+  (`@smartsoft001-mobilems/objects-domain`, `…/articles-domain`, `…/public-collections-domain`) to
+  render that entity, e.g. the per-entity grid/list cards and the object/article gallery widgets.
+  Each of these belongs to its feature's module skill (`mobilems-objects`,
+  `mobilems-object-collections`, `mobilems-articles`), which builds it alongside the feature's npm
+  package. The foundation does not build them, because the foundation does not install those
+  packages.
+
+This rule keeps the layering clean and lets the foundation library build on its own. The home-page
+carousels (`new-objects-carousel`, `news-carousel`, `partners-carousel`) and the home page are
+**foundation** shared components — they take `IObject` / `IArticle` / `IPartner` from the shared
+`models/data.interface.ts` and never import a feature package, so build them here.
+
+## Identify the foundation set
+
+Run `python3 scripts/classify-shared-components.py <reference-repo>/libs/shared/angular/src/lib/components`.
+It prints two lists — **FOUNDATION** (build here) and **FEATURE-OWNED** (built by a module skill) —
+by following imports: any component that imports a feature package, or a component that does, is
+FEATURE-OWNED. A typical FEATURE-OWNED set (confirm with the classifier on your reference app) is:
+
+| Feature shared component                   | Built by                       |
+| ------------------------------------------ | ------------------------------ |
+| `objects-grid-item`, `objects-list-item`   | `mobilems-objects`             |
+| `widget/gallery-object`                    | `mobilems-objects`             |
+| `collections-grid-item`                    | `mobilems-object-collections`  |
+| `articles-grid-item`, `articles-list-item` | `mobilems-articles` (articles) |
+| `news-grid-item`, `news-list-item`         | `mobilems-articles` (news)     |
+| `widget/gallery-article`                   | `mobilems-articles`            |
+
+Build everything else — `app`, `header`, `footer`, `page`, the `filter*` family, `breadcrumbs`,
+`pagination`, `searchbar`, `loader`, `error-retry`, `scroll-top`, `skip-links`, `wcag`, `gallery`,
+`map`, `slider`, `carousel`, the three carousels above, `category-dropdown`, `dropdown`, `menu-item`,
+`next-page`, `calendar`, `confirmation-modal`, `newsletter-*`, `image-info-panel`, `icons`, `tabs`,
+and the `widget` container with its foundation widgets.
+
+> Trust the script over this table for the **leaf** components (the grid/list cards and the
+> `widget/gallery-*` sub-widgets) — if the reference diverges, the script is authoritative there.
+> **One expected exception:** the script also lists the `widget` **container** (`components/widget`)
+> as FEATURE-OWNED, because the reference container imports the feature gallery sub-widgets. That is
+> not a signal to skip it — the container is foundation infrastructure. Build it (see "The widget
+> container" below) registering only the foundation widgets.
+
+## The widget container
+
+`components/widget/widget.component.ts` renders content blocks by mapping an `ArticleWidgetType` to a
+component. The classifier flags this container FEATURE-OWNED (the reference one imports the feature
+gallery sub-widgets), but build it here — it is foundation infrastructure the page renderer needs.
+Build it registering only the **foundation widgets** — `text`, `image`, `video`, `audio`,
+`gallery-image`, `media` — and their type-map entries; do not import or register the
+`gallery-object` / `gallery-article` sub-widgets (those don't exist in the foundation). The
+`mobilems-objects` / `mobilems-articles` skills add their `GALLERY_OBJECT` / `GALLERY_ARTICLE` imports
+and type-map entries when they build those widgets. Build the widget barrel
+(`components/widget/index.ts`) exporting the foundation widgets only.
+
+## models/objects.model.ts
+
+This file holds foundation model types the shared components use (`SortType`, `KeyValue` → `dropdown`,
+`AdvancedFilterType` → `filter-dictionary-input`, `FileType`, `MULTIMEDIA_DICTIONARY`,
+`IModel3DObject`, `IAnimationObject`, …). Build it with those types. The one object-specific type,
+`ISpecificObject extends MsObject`, is a feature type — the `mobilems-objects` skill adds it (with
+the `MsObject` import) when it builds the objects module. Keep `models/index.ts` exporting
+`./objects.model`.
+
+## The rest of the lib
+
+Build `services/`, `pipes/`, `directives/`, `tools/`, `models/` (incl. `data.interface.ts` with
+`IObject`/`IArticle`/`IPartner`), `interceptors/`, `environments/` (with the `multimediaUrl` field —
+see `server-env.md`), and `configs.module.ts`. These are foundation code. Confirm with the
+build-safety grep below; if any of these files imports a feature package on your reference, it is
+feature code and belongs to a module skill — leave it out.
+
+## Barrels
+
+- `src/index.ts` — the full barrel: re-export `./lib/components`, `./lib/services`,
+  `./lib/configs.module`, `./lib/models`, `./lib/pipes`, `./lib/tools`, `./lib/interceptors`,
+  `./lib/directives`, `./lib/environments`.
+- `components/index.ts` — export the foundation shared components (and keep the `COMPONENTS` array,
+  which holds `AppComponent`/`FooterComponent`/`HeaderComponent`). Module skills add their feature
+  shared components' exports when they build them.
+
+## Build-safety invariant
+
+The foundation library must build with no feature package installed. The check is positive and
+authoritative — this grep over the workspace's shared lib returns nothing:
+
+```bash
+grep -rlnE "from '@[^']*/(objects|articles|public-collections)-(domain|shell-angular|shell-dtos)'" \
+  libs/shared/angular/src
+```
+
+`verify-init.sh` runs it, plus checks the `widget` container imports no gallery-object/article and
+`objects.model.ts` carries no `MsObject` import.
+
+## project.json / build config
+
+Keep the base's normalized `libs/shared/angular/project.json`, `ng-package.json`, `jest.config.ts`,
+and tsconfigs (a full base already fixed the generator's `packages/shared/angular` leftover). Verify
+`tsconfig.lib.json` keeps `"types": ["node"]` (the env code uses `process.env`). If the base's shared
+lib is minimal and ships only `src/` (no `project.json`/`ng-package.json`/`jest.config.ts`/tsconfigs),
+copy those from the reference and normalize their `dest`/`coverageDirectory`/paths to
+`libs/shared/angular/...`.
+
+## Thread the prefix everywhere — including the lib's own package.json
+
+After copying, the only reference-prefix string left should be gone. Beyond the import statements,
+remember to thread `<PREFIX>` in `libs/shared/angular/package.json` `"name"` (it reads
+`@<reference-prefix>/angular` in the reference → set it to `@<PREFIX>/angular`). A workspace-wide grep
+for the reference prefix (`@msr/`) should return nothing.

package/plugins/mobilems/skills/mobilems-project-init/references/tailwind-styles.md

@@ -0,0 +1,106 @@
+# Tailwind (smart- prefix) layered onto scss
+
+The base is scss-only. MobilEMS adds Tailwind with the **`smart-`** class prefix (so utilities read
+`smart-flex`, `smart-container`, …) and a museum global stylesheet. Tailwind processes the scss via
+postcss, so scss and Tailwind coexist — no migration.
+
+## 1. `tailwind.config.js` (workspace root — create verbatim, no placeholders)
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./apps/web/src/**/*.{html,ts}', './libs/**/*.{html,ts}'],
+  prefix: 'smart-',
+  darkMode: ['class', '[class~="contrast-high"]'],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: '#414141',
+          active: 'rgb(223 223 223)',
+          red: 'rgb(193 18 31)',
+        },
+        dark: {
+          DEFAULT: '#100f0d',
+          yellow: '#ffff00',
+        },
+      },
+      gridTemplateColumns: {
+        'auto-fit': 'repeat(auto-fit, minmax(min(350px, 100%), 1fr))',
+      },
+      boxShadow: {
+        custom:
+          '0px 5px 5px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.15)',
+      },
+      fontFamily: {
+        satoshi: [
+          'Satoshi',
+          'Satoshi Fallback',
+          'Satoshi Fallback Android',
+          'sans-serif',
+        ],
+        oswald: [
+          'Oswald',
+          'Oswald Fallback',
+          'Oswald Fallback Android',
+          'sans-serif',
+        ],
+        'fira-sans': [
+          'Fira Sans',
+          'Fira Sans Fallback',
+          'Fira Sans Fallback Android',
+          'sans-serif',
+        ],
+      },
+      fontWeight: { extralight: '200' },
+    },
+  },
+  plugins: [],
+};
+```
+
+> The `content` globs already cover `libs/**`, so feature libs added later are picked up — no edit
+> needed when modules arrive. `darkMode` keys off `contrast-high` for the WCAG high-contrast toggle.
+
+## 2. postcss
+
+Add Tailwind + autoprefixer to postcss. If the base has a `postcss.config.js`/`.json`, add the
+plugins; otherwise create `postcss.config.js`:
+
+```js
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+
+Add `tailwindcss` + `autoprefixer` to `devDependencies` (resolve current lines via `npm view`). The
+base `.eslintignore` already ignores `**/tailwind.config.js`.
+
+## 3. `apps/web/src/styles.scss` (overwrite)
+
+**Reference mode:** copy `apps/web/src/styles.scss` from the reference repo verbatim. It is ~500
+lines of pure CSS/scss — font-face metric-override fallbacks (CLS mitigation), the Tailwind
+directives (`@tailwind base/components/utilities`), the swiper + leaflet css imports, `.smart-container*`
+layout utilities, WCAG body classes (`text-small`/`text-large`/letter+word spacing/grayscale),
+masonry column widths, fullscreen-`dialog` rules, and the Windows `forced-colors` block. It targets
+some feature selectors (e.g. `app-thematic-paths-menu`) but that is harmless — CSS for absent
+elements is a no-op, so copy it whole.
+
+**Foundation-only mode:** write a minimal `styles.scss` with just the Tailwind directives + the
+`@import` lines for swiper/leaflet and the `.smart-container` utility; note the rest in the TODO doc.
+
+The structure is:
+
+```scss
+@import 'swiper/swiper-bundle.css';
+@import 'leaflet/dist/leaflet.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* font-face fallbacks, @layer utilities { .smart-container … }, WCAG, masonry, dialogs, forced-colors */
+```