weg-shared-layout 0.0.26 → 0.0.27

package/docs/README.md

@@ -0,0 +1,51 @@
+# Documentation index
+
+Guides for integrating **`weg-shared-layout`** (`<weg-header>`, `<weg-footer>`) in host applications.
+
+Layout shape uses **`header.menu`** (unified nav) and **`footer.menu`** (columns). Reference JSON: [`src/assets/dummy-data.json`](../src/assets/dummy-data.json).
+
+---
+
+## Choose a guide
+
+| Guide | Audience |
+| --- | --- |
+| **[../readme.md](../readme.md)** | Package overview, install, abbreviated layout shape |
+| **[angular-integration-guide.md](./angular-integration-guide.md)** | Angular 16+ — full step-by-step, HTTP, API mapping, testing, SSR |
+| **[angular.md](./angular.md)** | Angular quick start (checklist + copy-paste) |
+| **[angular-16-compatibility.md](./angular-16-compatibility.md)** | Angular 16 + TS 4.9/5.x — Stencil `.d.ts` errors, `moduleResolution`, subpath imports |
+| **[../demo/angular16/README.md](../demo/angular16/README.md)** | **Runnable Angular 16 demo** — same code as npm install (`file:../..` only for maintainers) |
+| **[react.md](./react.md)** | React 19+ SPA (Vite, CRA, etc.) |
+| **[nextjs.md](./nextjs.md)** | Next.js 13+ App Router |
+| **[vanilla.md](./vanilla.md)** | Plain HTML / vanilla JS + bundler |
+| **[publishing.md](./publishing.md)** | Maintainers — npm publish, `prepack`, release checklist |
+
+External reference (newer Angular, signals): [weg-angular-demo](https://github.com/jobsac/weg-angular-demo).
+
+---
+
+## Package entry points
+
+Published subpaths (see [`package.json` `exports`](../package.json)):
+
+| Import | Purpose |
+| --- | --- |
+| `weg-shared-layout/loader` | **`defineCustomElements()`** — register all tags (recommended) |
+| `weg-shared-layout/dummy-data.json` | Sample layout JSON + `typeof` for app types |
+| `weg-shared-layout/layout-data` | Types only (`LayoutData`, etc.) — no Stencil runtime `.d.ts` |
+| `weg-shared-layout/weg-header` | Single-tag side-effect import (needs modern `moduleResolution`) |
+| `weg-shared-layout/weg-footer` | Single-tag side-effect import |
+
+TypeScript apps should set **`resolveJsonModule": true`** and **`moduleResolution": "bundler"`** (or `"node16"` / `"nodenext"`). Classic **`"node"`** often fails to resolve these subpaths. See **[angular-16-compatibility.md](./angular-16-compatibility.md)**.
+
+---
+
+## Maintainer scripts
+
+From repo root:
+
+| Script | Action |
+| --- | --- |
+| `npm run build` | Stencil build → `dist/`, `loader/` |
+| `npm run demo:angular16` | Build library + `ng serve` in `demo/angular16` |
+| `npm run demo:angular16:build` | Build library + production build of demo |

package/docs/angular-16-compatibility.md

@@ -6,6 +6,7 @@ Guide for teams on **Angular 16** who see TypeScript errors from `weg-shared-lay
 | --- | --- |
 | **[angular-integration-guide.md](./angular-integration-guide.md)** | Full integration steps |
 | **[angular.md](./angular.md)** | Quick start |
+| **[demo/angular16/README.md](../demo/angular16/README.md)** | Copy-paste Angular 16 app (npm-style imports) |
 | **This doc** | `stencil-public-runtime.d.ts` / `Mixin<const …>` errors, subpath import resolution, layout typing on TS 4.9 |
 
 ---
@@ -174,27 +175,33 @@ Example local interfaces (equivalent to package shapes; adjust if your API diffe
 ```ts
 export interface LayoutLink {
   label: string;
-  href: string;
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  items?: LayoutLink[];
 }
 
 export interface LayoutHeaderData {
-  logoHref?: string;
-  dropdowns?: { label: string; items: LayoutLink[] }[];
-  links?: LayoutLink[];
-  signIn?: LayoutLink;
-  signOut?: { label: string; href?: string };
+  logoSrc?: string;
+  menu?: LayoutLink[];
 }
 
 export type LayoutHeaderAuthAction = 'sign-in' | 'sign-out';
 
+export interface LayoutFooterSocialLink {
+  platform: 'LinkedIn' | 'Instagram' | 'TikTok' | 'YouTube';
+  href: string;
+}
+
+export interface LayoutFooterData {
+  menu?: LayoutLink[][];
+  social?: LayoutFooterSocialLink[];
+  credits?: string;
+  copyright?: string;
+}
+
 export interface LayoutData {
   header?: Partial<LayoutHeaderData>;
-  footer?: Partial<{
-    social: unknown;
-    columns: unknown;
-    credits: unknown;
-    copyright: unknown;
-  }>;
+  footer?: Partial<LayoutFooterData>;
 }
 ```
 
@@ -228,8 +235,16 @@ Pair with **`defineCustomElements()`** in `main.ts` and **`CUSTOM_ELEMENTS_SCHEM
 
 ---
 
+## In-repo Angular 16 demo
+
+Runnable app: **[demo/angular16/README.md](../demo/angular16/README.md)** — same imports as a published npm install (`weg-shared-layout/dummy-data.json`, `weg-shared-layout/loader`); only the `package.json` dependency line differs (`file:../..` vs `^0.0.x`). Run with `npm run demo:angular16` from repo root.
+
+---
+
 ## Related
 
+- [Documentation index](./README.md)
 - [Angular integration guide](./angular-integration-guide.md)
 - [Angular quick start](./angular.md)
+- [In-repo Angular 16 demo](../demo/angular16/README.md)
 - [Publishing](./publishing.md)

package/docs/angular-integration-guide.md

@@ -7,7 +7,8 @@ Step-by-step guide for **Angular 16+** (standalone or NgModule). Covers static f
 | **This guide** | First integration, production setup, API mapping, testing, SSR |
 | **[angular.md](./angular.md)** | Short copy-paste quick start (same steps, fewer words) |
 | **[angular-16-compatibility.md](./angular-16-compatibility.md)** | TS 4.9 / `stencil-public-runtime` errors, subpath import / `moduleResolution` |
-| **[weg-angular-demo](https://github.com/jobsac/weg-angular-demo)** | Runnable reference app |
+| **[demo/angular16/README.md](../demo/angular16/README.md)** | In-repo Angular 16 app — **same imports as npm install** (copy-paste guide) |
+| **[weg-angular-demo](https://github.com/jobsac/weg-angular-demo)** | Runnable reference app (newer Angular) |
 
 ---
 
@@ -35,7 +36,7 @@ Copy this list while integrating:
 
 - [ ] **Step 1** — `npm i weg-shared-layout`
 - [ ] **Step 2** — `defineCustomElements()` in `main.ts` **before** bootstrap
-- [ ] **Step 3** — `resolveJsonModule` in `tsconfig.app.json` (if importing JSON)
+- [ ] **Step 3** — TypeScript: `resolveJsonModule`, `skipLibCheck`, `moduleResolution` (`bundler` or `node16`) — see [Step 3](#step-3--typescript-import-layout-json)
 - [ ] **Step 4** — `src/app/auth.ts` with sign-in URL constants (host app, not from package)
 - [ ] **Step 5** — `CUSTOM_ELEMENTS_SCHEMA` on the shell `@Component` (or `@NgModule`) that owns `<weg-header>` / `<weg-footer>`
 - [ ] **Step 6** — Shell template with **`[layout]`** property binding (not `layout="..."`)
@@ -74,6 +75,9 @@ The components do not depend on signals, RxJS, or standalone vs NgModule — onl
 | **Property binding** | `[layout]="obj"` — not `layout="{{ obj }}"` |
 | **`CUSTOM_ELEMENTS_SCHEMA`** | On every component template that uses the tags; **does not** cascade to routed children |
 | **One-time registration** | `defineCustomElements()` once per browser load (recommended) |
+| **TypeScript 5.0+** (Angular 16.1+) | Recommended for JSON/subpath imports; use `skipLibCheck` if staying on 4.9 — [angular-16-compatibility](./angular-16-compatibility.md) |
+
+**Runnable Angular 16 example (same imports as npm):** [demo/angular16/README.md](../demo/angular16/README.md).
 
 ---
 
@@ -117,20 +121,33 @@ import 'weg-shared-layout/weg-footer';
 
 If header/footer are empty but tags appear in the DOM, registration did not run or ran too late.
 
+Side-effect imports need **`moduleResolution": "bundler"`** (or `"node16"`). If you cannot change that, use the **loader only** — see [angular-16-compatibility.md](./angular-16-compatibility.md).
+
 ---
 
 ### Step 3 — TypeScript: import layout JSON
 
-In `tsconfig.app.json` (or `tsconfig.json`):
+In **`tsconfig.json`** and/or **`tsconfig.app.json`** (Angular 16 + TypeScript 5.1 example — matches [demo/angular16](../demo/angular16/README.md)):
 
 ```json
 {
   "compilerOptions": {
-    "resolveJsonModule": true
-  }
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler"
+  },
+  "include": ["src/**/*.ts"]
 }
 ```
 
+| Option | Why |
+| --- | --- |
+| `skipLibCheck` | Skips Stencil `stencil-public-runtime.d.ts` (TS 5 syntax) when on TS 4.9 |
+| `resolveJsonModule` | Allows `import … from 'weg-shared-layout/dummy-data.json'` |
+| `moduleResolution: "bundler"` | Resolves package `exports` (`loader`, `dummy-data.json`) |
+
+Use **`node16`** instead of **`bundler`** if required by your toolchain. Classic **`node`** does not resolve subpaths reliably.
+
 Create a shared layout type in `src/app/layout.types.ts`:
 
 ```ts
@@ -149,6 +166,14 @@ import layoutFixture from 'weg-shared-layout/dummy-data.json';
 
 Production: same shape from your API (e.g. [`GET /api/layout`](https://weg-payload-test.vercel.app/api/layout)).
 
+Types without JSON import:
+
+```ts
+import type { LayoutData } from 'weg-shared-layout/layout-data';
+```
+
+(requires `./layout-data` in package `exports` — see published version.)
+
 ---
 
 ### Step 4 — Auth URLs in your app (not from the package)
@@ -732,7 +757,7 @@ Bind the result the same way as Step 7.
 | HTTP layout | `layout$` + `\| async` | `layout = toSignal(loadLayout())` |
 | Update signed in | `this.signedIn = true` | `this.signedIn.set(true)` |
 
-Full code for both variants: **Step 6** and **Step 7** above, and [angular.md §5](./angular.md#5-layout-shell--pick-one).
+Full code for both variants: **Step 6** and **Step 7** above, and [angular.md §6](./angular.md#6-layout-shell--pick-one).
 
 ---
 
@@ -976,7 +1001,7 @@ $0.userName
 | File | Role |
 | --- | --- |
 | `src/main.ts` | `defineCustomElements()` then bootstrap |
-| `tsconfig.app.json` | `resolveJsonModule: true` |
+| `tsconfig.json` / `tsconfig.app.json` | `skipLibCheck`, `resolveJsonModule`, `moduleResolution: bundler` (or `node16`) |
 | `src/app/auth.ts` | `HEADER_SIGN_IN`, `ACCOUNT_LOGIN_HREF` |
 | `src/app/layout.types.ts` | `export type LayoutData = typeof layoutFixture` |
 | `src/app/layout.service.ts` | HTTP / API mapping (Step 7, optional arrays) |
@@ -1000,9 +1025,11 @@ $0.userName
 
 ### Related docs
 
+- [Documentation index](./README.md)
 - [Angular 16 / TypeScript 4.9 compatibility](./angular-16-compatibility.md)
+- [In-repo Angular 16 demo](../demo/angular16/README.md)
 - [Quick start (angular.md)](./angular.md)
 - [Package readme](../readme.md)
 - [Plain HTML / vanilla JS](./vanilla.md)
 - [React SPA](./react.md)
-- [Reference demo app](https://github.com/jobsac/weg-angular-demo)
+- [External reference app (newer Angular)](https://github.com/jobsac/weg-angular-demo)

package/docs/angular.md

@@ -2,13 +2,16 @@
 
 Short quick start for Angular 16+. For the full **step-by-step** guide (HTTP, API mapping, testing, SSR, troubleshooting), see **[angular-integration-guide.md](./angular-integration-guide.md)**.
 
-Reference demo: [weg-angular-demo](https://github.com/jobsac/weg-angular-demo).
+| Demo | When |
+| --- | --- |
+| **[demo/angular16/README.md](../demo/angular16/README.md)** | Angular **16** — same imports as `npm i` (in-repo: `file:../..`) |
+| [weg-angular-demo](https://github.com/jobsac/weg-angular-demo) | Newer Angular (signals) |
 
 ## Integration checklist
 
 - [ ] `npm i weg-shared-layout`
 - [ ] `defineCustomElements()` in `main.ts` **before** bootstrap
-- [ ] `resolveJsonModule` in `tsconfig.app.json` (if importing JSON)
+- [ ] `skipLibCheck`, `resolveJsonModule`, `moduleResolution: "bundler"` (or `node16`) — see [Step 3 in integration guide](./angular-integration-guide.md#step-3--typescript-import-layout-json)
 - [ ] `auth.ts` with `HEADER_SIGN_IN` / `ACCOUNT_LOGIN_HREF` (host app constants)
 - [ ] `CUSTOM_ELEMENTS_SCHEMA` on the shell component that uses the tags
 - [ ] `[layout]="layoutObject"` on `<weg-header>` and `<weg-footer>`
@@ -45,18 +48,41 @@ defineCustomElements();
 bootstrapApplication(App, appConfig).catch((err) => console.error(err));
 ```
 
-**Alternative** — side-effect imports (one of these approaches, not both):
+**Alternative** — side-effect imports (one of these approaches, not both; needs `moduleResolution` `bundler` / `node16`):
 
 ```ts
 import 'weg-shared-layout/weg-header';
 import 'weg-shared-layout/weg-footer';
 ```
 
-## 3. Allow custom elements in templates
+## 3. Layout types + TypeScript
+
+```ts
+// src/app/layout.types.ts
+import layoutFixture from 'weg-shared-layout/dummy-data.json';
+
+export type LayoutData = typeof layoutFixture;
+```
+
+```json
+// tsconfig.json (or tsconfig.app.json) — required for JSON + package subpaths
+{
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler"
+  },
+  "include": ["src/**/*.ts"]
+}
+```
+
+Angular 16 pitfalls (Stencil `.d.ts`, classic `node` resolution): **[angular-16-compatibility.md](./angular-16-compatibility.md)**.
+
+## 4. Allow custom elements in templates
 
 Add `schemas: [CUSTOM_ELEMENTS_SCHEMA]` to every `@Component` (or `@NgModule`) whose template uses `<weg-header>` or `<weg-footer>`. Does **not** cascade to `router-outlet` children.
 
-## 4. Auth constants
+## 5. Auth constants
 
 ```ts
 // src/app/auth.ts
@@ -68,18 +94,18 @@ export const HEADER_SIGN_IN = {
 export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
 ```
 
-## 5. Layout shell — pick one
+## 6. Layout shell — pick one
 
 Use **`[layout]="..."`** so Angular sets the JavaScript `layout` property, not an HTML attribute.
 
 | Variant | Angular | Template bindings |
 | --- | --- | --- |
-| **5A** Plain properties | 16+ | `[layout]="layoutData"` |
-| **5B** Signals | 16.1+ | `[layout]="layoutData()"` |
+| **6A** Plain properties | 16+ | `[layout]="layoutData"` |
+| **6B** Signals | 16.1+ | `[layout]="layoutData()"` |
 
 Full HTTP examples: integration guide **[Step 7A / 7B](./angular-integration-guide.md#step-7--load-layout-from-your-api)**.
 
-### 5A — Plain properties (Angular 16+)
+### 6A — Plain properties (Angular 16+)
 
 ```ts
 // src/app/app.ts
@@ -130,11 +156,9 @@ export class App {
 <weg-footer [layout]="layoutData"></weg-footer>
 ```
 
-Enable `resolveJsonModule` in `tsconfig.app.json` if you import `dummy-data.json`.
-
 In production, load the same shape from your API — see **[Step 7A](./angular-integration-guide.md#step-7a--http-with-rxjs--async-pipe-pairs-with-6a)**. If your API returns separate arrays, see **[mapping section](./angular-integration-guide.md#optional-api-returns-separate-arrays-not-one-layout-object)**.
 
-### 5B — Signals (Angular 16.1+)
+### 6B — Signals (Angular 16.1+)
 
 ```ts
 // src/app/app.ts
@@ -191,7 +215,7 @@ HTTP with signals: **[Step 7B](./angular-integration-guide.md#step-7b--http-with
 
 ## Header: `signed-in`, `user-name`, `wegAuthClick`
 
-| Input / output | Binding (5A) | Binding (5B) | Notes |
+| Input / output | Binding (6A) | Binding (6B) | Notes |
 | --- | --- | --- | --- |
 | CMS nav | `[layout]="layoutData"` | `[layout]="layoutData()"` | `header.menu` — groups (`items`) and flat links (`href`) when signed out |
 | Session state | `[signedIn]="signedIn"` | `[signedIn]="signedIn()"` | `true` → built-in signed-in nav |
@@ -224,6 +248,8 @@ More detail: **[integration guide § Troubleshooting](./angular-integration-guid
 
 ## See also
 
+- **[Documentation index](./README.md)**
+- **[In-repo Angular 16 demo](../demo/angular16/README.md)**
 - **[Angular 16 / TS 4.9 compatibility](./angular-16-compatibility.md)** — `stencil-public-runtime` errors, subpath imports
 - **[Angular integration guide (step-by-step)](./angular-integration-guide.md)**
 - **[React SPA](./react.md)**

package/docs/nextjs.md

@@ -28,6 +28,7 @@ Both accept **`layout`** (JSON string recommended in Next). `<weg-header>` also
 | **Next.js 13+** | App Router (`app/layout.tsx`) |
 | **`transpilePackages`** | Next must compile `weg-shared-layout` |
 | **`suppressHydrationWarning`** | Recommended on both tags (SSR placeholder vs client shadow DOM) |
+| **TypeScript** | `resolveJsonModule` if importing `weg-shared-layout/dummy-data.json` on the server |
 
 ## Install
 
@@ -77,16 +78,9 @@ import 'weg-shared-layout/weg-header';
 
 defineCustomElements();
 
-type LayoutData = {
-  header?: {
-    logoSrc?: string;
-    menu?: {
-      label: string;
-      href?: string;
-      items?: { label: string; href: string }[];
-    }[];
-  };
-};
+import type { LayoutData } from 'weg-shared-layout/layout-data';
+// Or: import layoutFixture from 'weg-shared-layout/dummy-data.json';
+//      type LayoutData = typeof layoutFixture;
 
 export function Header({
   layout,
@@ -258,6 +252,19 @@ The logo **image** uses `layout.header.logoSrc` when signed out (bundled if omit
 
 ## TypeScript
 
+### Server / client JSON imports
+
+```json
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler"
+  }
+}
+```
+
+### JSX module augmentation
+
 ```ts
 // src/types/weg-shared-layout-jsx.d.ts
 import type { JSX as WegSharedLayoutJSX } from 'weg-shared-layout';
@@ -300,7 +307,8 @@ declare module 'react' {
 
 ## See also
 
+- **[Documentation index](./README.md)**
 - **[React SPA](./react.md)**
-- **[Angular](./angular.md)**
+- **[Angular](./angular.md)** · **[Angular 16 demo](../demo/angular16/README.md)**
 - **[Plain HTML / vanilla JS](./vanilla.md)**
 - **[Package readme](../readme.md)**

package/docs/publishing.md

@@ -4,7 +4,7 @@
 
 Publishing packs **whatever is already on disk** under the paths listed in [`package.json` `files`](../package.json) (for this package: `dist/`, `loader/`, and `dummy-data.json`). It does **not** automatically run `npm run build` unless a lifecycle script does.
 
-If you publish with an empty, missing, or half-built `dist/`, consumers get a broken tarball (missing `dist/esm/loader.js`, missing `dist/components/*.js`, etc.).
+If you publish with an empty, missing, or half-built `dist/`, consumers get a broken tarball (missing `loader/index.js`, missing `dist/components/*.js`, missing type declarations, etc.).
 
 ## What this repo does
 
@@ -33,9 +33,22 @@ So the Stencil output and generated `loader/` are always fresh in the tarball.
    npm pack --dry-run
    ```
 
-   Inspect the dry-run file list and spot-check for `dist/esm/loader.js`, `dist/components/weg-footer.js`, and `loader/index.js`.
+   Inspect the dry-run file list and spot-check for:
 
-3. Publish (runs `prepack` → build again):
+   - `loader/index.js`, `loader/index.d.ts`
+   - `dist/components/weg-header.js`, `dist/components/weg-footer.js`
+   - `src/assets/dummy-data.json` (via `exports["./dummy-data.json"]`)
+   - `dist/types/types/layout-data.d.ts` (via `exports["./layout-data"]`)
+
+3. Smoke-test the Angular 16 demo (optional but recommended):
+
+   ```bash
+   npm run demo:angular16:build
+   ```
+
+   See [demo/angular16/README.md](../demo/angular16/README.md).
+
+4. Publish (runs `prepack` → build again):
 
    ```bash
    npm publish
@@ -43,6 +56,10 @@ So the Stencil output and generated `loader/` are always fresh in the tarball.
 
 Use `npm publish --dry-run` if you want to exercise the full pack pipeline without uploading.
 
+## What consumers import
+
+Documented in [docs/README.md](./README.md): `loader`, `dummy-data.json`, `layout-data` (types), and per-tag subpaths. Angular 16 apps need modern `moduleResolution` or the loader-only pattern — [angular-16-compatibility.md](./angular-16-compatibility.md).
+
 ## CI
 
 If you publish from CI, run **`npm run build`** (or rely on **`npm publish`**, which triggers **`prepack`**) in the same job before `npm publish`, and ensure **devDependencies** (e.g. `@stencil/core`) are installed so `stencil build` succeeds.

package/docs/react.md

@@ -19,7 +19,7 @@ Both are **presentational** [Stencil](https://stenciljs.com/) Web Components. Th
 | --- | --- |
 | **React 19+** | React 19 maps custom-element props to DOM **properties** when possible. Older React often sets props as string **attributes**, which breaks object payloads. |
 | **Bundler** | Must resolve `node_modules` ESM/CJS from `weg-shared-layout`. |
-| **TypeScript (optional)** | Module augmentation below; enable `resolveJsonModule` if you import `dummy-data.json`. |
+| **TypeScript (optional)** | `resolveJsonModule` + `moduleResolution` `bundler` / `node16` for JSON/subpath imports; module augmentation below. |
 
 ## Install
 
@@ -39,7 +39,7 @@ import { defineCustomElements } from 'weg-shared-layout/loader';
 defineCustomElements();
 ```
 
-Side-effect import the tags your app uses:
+**Alternative** — side-effect imports per tag (requires modern `moduleResolution`; see [angular-16-compatibility](./angular-16-compatibility.md#error-2-cannot-find-module-weg-shared-layoutweg-header)):
 
 ```ts
 import 'weg-shared-layout/weg-header';
@@ -89,17 +89,7 @@ export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
 
 ### Signed out
 
-Pass CMS/API layout with unified `header.menu`. Use [`dummy-data.json`](../src/assets/dummy-data.json) for the full shape — dropdown groups use `items`, flat links and Sign in use `href`. Keep auth URLs in a local file:
-
-```ts
-// auth.ts (host app)
-export const HEADER_SIGN_IN = {
-  label: 'Sign in',
-  href: 'https://account.warwickemploymentgroup.com/account/login',
-};
-
-export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
-```
+Pass CMS/API layout with unified **`header.menu`**. Use [`dummy-data.json`](../src/assets/dummy-data.json) for the full shape — nav groups use `items`, flat links and Sign in use `href`.
 
 ### Signed in
 
@@ -213,7 +203,27 @@ export function SiteLayout({ children }: { children: React.ReactNode }) {
 
 Replace the URL with your CMS/API. Keep the object shape aligned with `dummy-data.json`.
 
-## TypeScript: module augmentation
+## TypeScript
+
+### JSON + package subpaths
+
+```json
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler"
+  }
+}
+```
+
+```ts
+import layoutFixture from 'weg-shared-layout/dummy-data.json';
+export type LayoutData = typeof layoutFixture;
+```
+
+Or types only: `import type { LayoutData } from 'weg-shared-layout/layout-data'`.
+
+### JSX module augmentation
 
 Add once (e.g. `src/types/weg-shared-layout-jsx.d.ts`):
 
@@ -255,7 +265,8 @@ declare module 'react' {
 
 ## See also
 
+- **[Documentation index](./README.md)**
 - **[Next.js App Router](./nextjs.md)**
-- **[Angular](./angular.md)**
+- **[Angular](./angular.md)** · **[Angular 16 demo](../demo/angular16/README.md)**
 - **[Plain HTML / vanilla JS](./vanilla.md)**
 - **[Package readme](../readme.md)**

package/docs/vanilla.md

@@ -13,7 +13,7 @@ Payload shape: [`dummy-data.json`](../src/assets/dummy-data.json) (see [readme](
 
 ## Install & register
 
-With a bundler that resolves `node_modules` imports:
+With a bundler that resolves `node_modules` and package **`exports`** (TypeScript: `resolveJsonModule` + `moduleResolution` `bundler` or `node16` — see [angular-16-compatibility](./angular-16-compatibility.md)):
 
 ```html
 <weg-header id="header"></weg-header>
@@ -132,7 +132,8 @@ document.getElementById('footer').layout = layout;
 
 ## See also
 
+- **[Documentation index](./README.md)**
 - **[React SPA](./react.md)**
 - **[Next.js App Router](./nextjs.md)**
-- **[Angular](./angular.md)**
+- **[Angular](./angular.md)** · **[Angular 16 demo](../demo/angular16/README.md)**
 - **[Package readme](../readme.md)**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weg-shared-layout",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "Shared layout Web Components built with Stencil",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -53,7 +53,10 @@
     "start": "stencil build --dev --watch --serve",
     "test": "stencil-test --prod",
     "test:watch": "stencil-test --prod --watch",
-    "generate": "stencil generate"
+    "generate": "stencil generate",
+    "demo:angular16:install": "npm install --prefix demo/angular16",
+    "demo:angular16:build": "npm run build && npm run build --prefix demo/angular16",
+    "demo:angular16": "npm run build && npm run start --prefix demo/angular16"
   },
   "devDependencies": {
     "@csstools/postcss-global-data": "^4.0.0",

package/readme.md

@@ -62,19 +62,32 @@ header.addEventListener('wegAuthClick', (event) => {
 });
 ```
 
-- **From npm:** `import layout from 'weg-shared-layout/dummy-data.json'` (enable `resolveJsonModule` in TypeScript if needed).
+- **From npm:** `import layout from 'weg-shared-layout/dummy-data.json'` — in TypeScript set `resolveJsonModule` and `moduleResolution` to `bundler` or `node16` (see [docs/angular-16-compatibility.md](./docs/angular-16-compatibility.md)).
 - **In this repo:** [`src/assets/dummy-data.json`](src/assets/dummy-data.json)
 
-## Framework guides
+### Package imports (TypeScript / bundlers)
+
+| Subpath | Use |
+| --- | --- |
+| `weg-shared-layout/loader` | `defineCustomElements()` — **recommended** |
+| `weg-shared-layout/dummy-data.json` | Sample layout + `typeof` for app types |
+| `weg-shared-layout/layout-data` | Types only (`LayoutData`, …) |
+| `weg-shared-layout/weg-header` / `weg-footer` | Side-effect tag registration |
+
+## Documentation
+
+Full index: **[docs/README.md](./docs/README.md)**.
 
 | Guide | Doc |
 | --- | --- |
 | Angular (quick start) | [docs/angular.md](./docs/angular.md) |
 | Angular (step-by-step integration) | [docs/angular-integration-guide.md](./docs/angular-integration-guide.md) |
 | Angular 16 / TypeScript 4.9 | [docs/angular-16-compatibility.md](./docs/angular-16-compatibility.md) |
+| Angular 16 demo (in-repo, npm-style imports) | [demo/angular16/README.md](./demo/angular16/README.md) |
 | React (SPA, client-only) | [docs/react.md](./docs/react.md) |
 | Next.js (App Router) | [docs/nextjs.md](./docs/nextjs.md) |
 | Plain HTML / vanilla JS | [docs/vanilla.md](./docs/vanilla.md) |
+| Publishing (maintainers) | [docs/publishing.md](./docs/publishing.md) |
 
 ## Publishing (maintainers)