weg-shared-layout 0.0.16 → 0.0.18

package/docs/angular.md

@@ -9,7 +9,7 @@ Assumes Angular 17+ with **standalone** components (default for `ng new`).
 | `<weg-header>` | `import 'weg-shared-layout/weg-header';` |
 | `<weg-footer>` | `import 'weg-shared-layout/weg-footer';` |
 
-Both accept the same `layout` payload ([`dummy-data.json`](../src/assets/dummy-data.json)). `<weg-header>` also accepts **`signed-in`** and emits **`wegAuthClick`**.
+Both accept the same `layout` payload ([`dummy-data.json`](../src/assets/dummy-data.json)). `<weg-header>` also accepts **`signed-in`**, **`user-name`**, and emits **`wegAuthClick`**.
 
 ## 1. Install
 
@@ -33,8 +33,6 @@ defineCustomElements();
 bootstrapApplication(App, appConfig).catch((err) => console.error(err));
 ```
 
-If `defineCustomElements` is async in your Stencil build, `await` it before bootstrapping.
-
 **Alternative:** side-effect import only the tags you need (no loader call):
 
 ```ts
@@ -54,6 +52,7 @@ Use **`[layout]="..."`** so Angular sets the JavaScript `layout` property, not a
 // src/app/app.ts
 import { Component, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from '../auth';
 import layoutFixture from 'weg-shared-layout/dummy-data.json';
 
 @Component({
@@ -66,19 +65,19 @@ import layoutFixture from 'weg-shared-layout/dummy-data.json';
 export class App {
   protected readonly layoutData = signal(layoutFixture);
   protected readonly signedIn = signal(false);
+  protected readonly userName = signal<string | undefined>(undefined);
 
   protected onAuthClick(event: Event) {
     const customEvent = event as CustomEvent<{ action: 'sign-in' | 'sign-out' }>;
     customEvent.preventDefault();
 
     if (customEvent.detail.action === 'sign-out') {
-      // call your logout service
       this.signedIn.set(false);
+      window.location.href = ACCOUNT_LOGIN_HREF;
       return;
     }
 
-    // navigate to sign-in, e.g. inject Router
-    window.location.href = '/account/login';
+    window.location.href = layoutFixture.header.signIn?.href ?? HEADER_SIGN_IN.href;
   }
 }
 ```
@@ -88,6 +87,7 @@ export class App {
 <weg-header
   [layout]="layoutData()"
   [signedIn]="signedIn()"
+  [userName]="userName()"
   (wegAuthClick)="onAuthClick($event)"
 ></weg-header>
 
@@ -98,17 +98,23 @@ export class App {
 
 Enable `resolveJsonModule` in `tsconfig.app.json` if you import `dummy-data.json`.
 
+Define auth URLs in `src/app/auth.ts` (same shape as the React/Next examples).
+
 In production, replace `layoutFixture` with data from your services; keep the same object shape.
 
-## Header: `signed-in` and `wegAuthClick`
+## Header: `signed-in`, `user-name`, and `wegAuthClick`
 
 | Input / output | Binding | Notes |
 | --- | --- | --- |
-| Session state | `[signedIn]="signedIn()"` | When `true`, shows `layout.header.signOut` instead of `signIn` |
+| CMS nav | `[layout]="layoutData()"` | `dropdowns`, `links`, `signIn` used when signed out |
+| Session state | `[signedIn]="signedIn()"` | When `true`, CMS nav is ignored; built-in signed-in nav is shown |
+| User name | `[userName]="userName()"` | First name on Manage Account (signed in only) |
 | Auth click | `(wegAuthClick)="onAuthClick($event)"` | `event.detail.action` is `'sign-in'` or `'sign-out'` |
-| Prevent default | `event.preventDefault()` in handler | Stops link navigation / `signOut.href` redirect |
+| Prevent default | `event.preventDefault()` in handler | Stops link navigation / redirect |
+
+**Signed-in nav (built into the component):** Find a job, Dashboard, Manage Account, Sign out.
 
-Logo is bundled in the component — not configurable via `layout`.
+Logo **image** is bundled. Logo **link** uses `layout.header.logoHref` when signed out (defaults to WEG home).
 
 ## Footer
 
@@ -119,20 +125,11 @@ Logo is bundled in the component — not configurable via `layout`.
 | Symptom | Cause / fix |
 | --- | --- |
 | `'weg-header'` / `'weg-footer'` is not a known element | Add `CUSTOM_ELEMENTS_SCHEMA` on the component template that uses the tag. |
-| Header/footer empty | `defineCustomElements()` not called before bootstrap, tag bundle not imported, or `layout` not set — compare with `dummy-data.json`. |
+| Header/footer empty | `defineCustomElements()` not called before bootstrap, tag bundle not imported, or `layout` not set. |
 | Auth always shows Sign in | `[signedIn]` not bound or still `false`. |
+| Manage Account shows generic label | `[userName]` not set when signed in. |
 | SSR: `document is not defined` | Guard `defineCustomElements()` with `typeof window !== 'undefined'` or `isPlatformBrowser`. |
 
-## TypeScript typings
-
-```ts
-/// <reference types="weg-shared-layout/dist/types/components" />
-```
-
-## Legacy `NgModule`
-
-Add `CUSTOM_ELEMENTS_SCHEMA` on the module that declares components using these tags. `defineCustomElements()` in `main.ts` is still required when using the loader.
-
 ## See also
 
 - **[React SPA](./react.md)**

package/docs/nextjs.md

@@ -6,10 +6,10 @@ Guide for **Next.js 13+ App Router** (`app/` directory). For Vite/CRA-style clie
 
 | Tag | Purpose |
 | --- | --- |
-| `<weg-header>` | Site header — logo (bundled), nav, Sign in / Sign out |
+| `<weg-header>` | Site header — bundled logo, CMS nav (signed out), built-in nav (signed in), Sign in / Manage Account / Sign out |
 | `<weg-footer>` | Site footer — social, columns, legal text |
 
-Both accept **`layout`** (JSON string recommended in Next). `<weg-header>` also accepts **`signed-in`** and emits **`wegAuthClick`**.
+Both accept **`layout`** (JSON string recommended in Next). `<weg-header>` also accepts **`signed-in`**, **`user-name`**, and emits **`wegAuthClick`**.
 
 ## Why Next.js is different
 
@@ -50,7 +50,21 @@ const nextConfig: NextConfig = {
 export default nextConfig;
 ```
 
-## 2. Client layout components
+## 2. Auth constants (host app)
+
+Keep sign-in/out URLs in your app — not imported from `weg-shared-layout`:
+
+```ts
+// src/auth.ts
+export const HEADER_SIGN_IN = {
+  label: 'Sign in',
+  href: 'https://account.warwickemploymentgroup.com/account/login',
+};
+
+export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
+```
+
+## 3. Client layout components
 
 ```tsx
 // src/components/layout/Header.tsx
@@ -58,26 +72,29 @@ export default nextConfig;
 
 import { useCallback } from 'react';
 import { defineCustomElements } from 'weg-shared-layout/loader';
+import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from '@/auth';
 import 'weg-shared-layout/weg-header';
 
 defineCustomElements();
 
 type LayoutData = {
   header?: {
+    logoHref?: string;
     dropdowns?: { label: string; items: { label: string; href: string }[] }[];
     links?: { label: string; href: string }[];
     signIn?: { label: string; href: string };
-    signOut?: { label: string; href?: string };
   };
 };
 
 export function Header({
   layout,
   signedIn,
+  userName,
   onSignedInChange,
 }: {
   layout: LayoutData;
   signedIn: boolean;
+  userName?: string;
   onSignedInChange?: (signedIn: boolean) => void;
 }) {
   const onAuthClick = useCallback(
@@ -85,12 +102,12 @@ export function Header({
       event.preventDefault();
 
       if (event.detail.action === 'sign-out') {
-        // your logout(), then:
         onSignedInChange?.(false);
+        window.location.href = ACCOUNT_LOGIN_HREF;
         return;
       }
 
-      window.location.href = layout.header?.signIn?.href ?? '/account/login';
+      window.location.href = layout.header?.signIn?.href ?? HEADER_SIGN_IN.href;
     },
     [layout, onSignedInChange],
   );
@@ -98,9 +115,9 @@ export function Header({
   return (
     <weg-header
       layout={JSON.stringify(layout)}
-      signed-in={signedIn}
+      signedIn={signedIn}
+      {...(userName ? { userName } : {})}
       suppressHydrationWarning
-      // @ts-expect-error Stencil custom event
       onWegAuthClick={onAuthClick}
     />
   );
@@ -137,10 +154,16 @@ export function SiteChrome({
   children: React.ReactNode;
 }) {
   const [signedIn, setSignedIn] = useState(false);
+  const userName = signedIn ? 'Alex' : undefined; // from your session
 
   return (
     <>
-      <Header layout={layout} signedIn={signedIn} onSignedInChange={setSignedIn} />
+      <Header
+        layout={layout}
+        signedIn={signedIn}
+        userName={userName}
+        onSignedInChange={setSignedIn}
+      />
       {children}
       <Footer layout={layout} />
     </>
@@ -158,7 +181,7 @@ export function SiteChrome({
 
 Do **not** pass `layout={layoutObject}` directly on the custom elements in Next.
 
-## 3. Server layout
+## 4. Server layout
 
 ```tsx
 // app/layout.tsx (Server Component)
@@ -176,7 +199,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
 
-## 4. Production: fetch layout on the server
+## 5. Production: fetch layout on the server
 
 ```tsx
 // app/layout.tsx
@@ -205,19 +228,23 @@ export default async function RootLayout({ children }: { children: React.ReactNo
 
 Pass the plain object into the Client Component; **stringify inside** the header/footer wrappers.
 
-Wire **`signedIn`** from your auth provider (e.g. session from a client context populated after mount, or a client-only wrapper around `<Header />`).
+Wire **`signedIn`** and **`userName`** from your auth provider (session hook / context in a client wrapper).
 
 ## Header auth reference
 
-| API | Usage |
-| --- | --- |
-| `layout.header.signIn` | `{ label, href }` — shown when `signed-in` is false |
-| `layout.header.signOut` | `{ label, href? }` — shown when `signed-in` is true |
-| `signed-in` prop | Boolean session flag from host app |
-| `wegAuthClick` event | `event.detail.action`: `'sign-in'` \| `'sign-out'` |
-| `event.preventDefault()` | Skip default link navigation / redirect |
+| API | Signed out | Signed in |
+| --- | --- | --- |
+| `layout.header.dropdowns` / `links` | CMS nav rendered | Ignored — built-in nav used |
+| `layout.header.signIn` | Sign in button | Not shown |
+| `layout.header.logoHref` | Logo link target | Built-in WEG home URL |
+| `signed-in` prop | `false` | `true` — session flag from host app |
+| `user-name` prop | — | User's first name on Manage Account |
+| `wegAuthClick` event | `'sign-in'` on Sign in click | `'sign-out'` on Sign out click |
+| `event.preventDefault()` | Skip default navigation | Skip default redirect |
+
+**Signed-in nav (built into the component):** Find a job, Dashboard, Manage Account, Sign out.
 
-Logo is bundled in the component — not in `layout`.
+The logo **image** is bundled. The logo **link** uses `layout.header.logoHref` when signed out.
 
 ## Passing `layout` — quick reference
 
@@ -254,6 +281,7 @@ declare module 'react' {
 | `document is not defined` | Loader in Server Component | Keep registration in `"use client"` files only. |
 | Empty after hydration | Object passed to CE without stringify | `JSON.stringify` in client wrapper. |
 | Logo missing | Stale package | Logo is inlined in `logo-data.ts`; rebuild / upgrade. |
+| Header not clickable | Overlapping page content | `:host` uses `z-index: 20`; upgrade package if missing. |
 | Auth not updating | `signed-in` only on server | Manage session in client state / context. |
 | Hydration warning | Shadow DOM mismatch | `suppressHydrationWarning` on both tags. |
 | Build error | Package not transpiled | `transpilePackages: ['weg-shared-layout']`. |
@@ -263,7 +291,7 @@ declare module 'react' {
 - [ ] `weg-shared-layout` installed
 - [ ] `transpilePackages` in `next.config`
 - [ ] Client `Header.tsx` / `Footer.tsx` with loader, tag imports, `JSON.stringify`, `suppressHydrationWarning`
-- [ ] Auth: `signed-in` + `wegAuthClick` handler on header
+- [ ] Auth: `signed-in`, `user-name`, and `wegAuthClick` handler on header
 - [ ] Server `layout.tsx` imports client chrome only (no `defineCustomElements` on server)
 - [ ] Layout fetched or imported server-side, passed as serializable props
 - [ ] TypeScript augmentation for `'weg-header'` and `'weg-footer'`

package/docs/react.md

@@ -6,12 +6,12 @@ Guide for **client-rendered** React apps (Vite, Create React App, etc.). If you
 
 | Tag | Purpose |
 | --- | --- |
-| `<weg-header>` | Site header — logo (bundled), nav dropdowns, flat links, Sign in / Sign out |
+| `<weg-header>` | Site header — bundled logo, CMS nav (signed out), built-in nav (signed in), Sign in / Manage Account / Sign out |
 | `<weg-footer>` | Site footer — social links, columns, credits, copyright |
 
 Both are **presentational** [Stencil](https://stenciljs.com/) Web Components. They **do not fetch data** — your app passes a **`layout`** payload (API, CMS, or [`dummy-data.json`](../src/assets/dummy-data.json)).
 
-`<weg-header>` additionally accepts **`signed-in`** and emits **`wegAuthClick`** for auth handling.
+`<weg-header>` additionally accepts **`signed-in`**, **`user-name`**, and emits **`wegAuthClick`**.
 
 ## Requirements
 
@@ -46,15 +46,6 @@ import 'weg-shared-layout/weg-header';
 import 'weg-shared-layout/weg-footer';
 ```
 
-**Alternative:** import individual tag bundles only (no loader):
-
-```ts
-import 'weg-shared-layout/weg-header';
-import 'weg-shared-layout/weg-footer';
-```
-
-Use the loader when you may add more tags from this package later.
-
 ## 2. Layout shell
 
 ### Recommended: pass `layout` as an object (React 19+)
@@ -84,42 +75,63 @@ export function SiteLayout({ children }: { children: React.ReactNode }) {
 
 ## 3. Header auth
 
-The WEG logo is bundled inside `<weg-header>` — not configurable via `layout`.
+Define auth URLs once in your app:
+
+```ts
+// auth.ts
+export const HEADER_SIGN_IN = {
+  label: 'Sign in',
+  href: 'https://account.warwickemploymentgroup.com/account/login',
+};
+
+export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
+```
+
+### Signed out
 
-Configure labels in `layout.header`:
+Pass CMS/API layout with `dropdowns`, `links`, and `signIn`. Use [`dummy-data.json`](../src/assets/dummy-data.json) for the full shape. Keep auth URLs in a local file:
 
-```json
-"signIn": { "label": "Sign in", "href": "/account/login" },
-"signOut": { "label": "Sign out" }
+```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;
 ```
 
-Set **`signed-in`** from your session state and listen for **`wegAuthClick`**:
+### Signed in
+
+Set **`signed-in`** and optionally **`user-name`**. The component **ignores CMS nav** and shows built-in links: Find a job, Dashboard, Manage Account, Sign out.
 
 ```tsx
 import { useCallback, useState } from 'react';
+import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth';
 import 'weg-shared-layout/weg-header';
 import layout from 'weg-shared-layout/dummy-data.json';
 
 export function SiteHeader() {
   const [signedIn, setSignedIn] = useState(false);
+  const userName = signedIn ? 'Alex' : undefined;
 
   const onAuthClick = useCallback((event: CustomEvent<{ action: 'sign-in' | 'sign-out' }>) => {
     event.preventDefault();
 
     if (event.detail.action === 'sign-out') {
-      // your logout(), then:
       setSignedIn(false);
+      window.location.href = ACCOUNT_LOGIN_HREF;
       return;
     }
 
-    window.location.href = '/account/login';
+    window.location.href = layout.header.signIn?.href ?? HEADER_SIGN_IN.href;
   }, []);
 
   return (
     <weg-header
       layout={layout}
-      signed-in={signedIn}
-      // @ts-expect-error Stencil custom event
+      signedIn={signedIn}
+      {...(userName ? { userName } : {})}
       onWegAuthClick={onAuthClick}
     />
   );
@@ -128,7 +140,8 @@ export function SiteHeader() {
 
 | Prop / event | Purpose |
 | --- | --- |
-| `signed-in={boolean}` | Shows Sign out when `true` |
+| `signedIn={boolean}` | Switches to signed-in nav when `true` |
+| `userName={string}` | First name beside profile icon on Manage Account |
 | `onWegAuthClick` | Host handles routing / logout; call `event.preventDefault()` to override defaults |
 
 **Ref fallback for the event** (if `onWegAuthClick` does not bind in your React version):
@@ -152,11 +165,9 @@ useEffect(() => {
   return () => el.removeEventListener('wegAuthClick', handler);
 }, []);
 
-return <weg-header ref={ref} layout={layout} signed-in={signedIn} />;
+return <weg-header ref={ref} layout={layout} signedIn={signedIn} userName="Alex" />;
 ```
 
-Update `signedIn` via `ref.current.signedIn = true` if property binding is unreliable.
-
 ## 4. Production: fetch layout from your API
 
 ```tsx
@@ -222,16 +233,6 @@ declare module 'react' {
 }
 ```
 
-Enable in `tsconfig.json` when importing JSON fixtures:
-
-```json
-{
-  "compilerOptions": {
-    "resolveJsonModule": true
-  }
-}
-```
-
 ## `layout` prop vs attribute
 
 | How data is set | Works with object? |
@@ -240,21 +241,16 @@ Enable in `tsconfig.json` when importing JSON fixtures:
 | **Attribute** `layout="[object Object]"` / React 18 `layout={obj}` | No — components stay empty |
 | **Attribute** `layout={JSON.stringify(obj)}` | Yes — component parses JSON |
 
-Both components accept `layout` as an object or JSON string.
-
-## Note: `prop:layout` is unreliable in React
-
-Prefer `layout={object}`, `layout={JSON.stringify(object)}`, or ref assignment — not `prop:layout`.
-
 ## Troubleshooting
 
 | Symptom | Likely cause | Fix |
 | --- | --- | --- |
-| Empty header/footer | Loader/tag import missing | `defineCustomElements()` + `import 'weg-shared-layout/weg-header'` (and footer). |
+| Empty header/footer | Loader/tag import missing | `defineCustomElements()` + tag imports. |
 | Empty despite correct data | React set `layout` as attribute | React 19+, or `JSON.stringify`, or ref assignment. |
 | Logo missing on header | Old build without inlined logo | Upgrade package; logo is bundled in `logo-data.ts`. |
-| Auth always Sign in | `signed-in` not set | Bind `signed-in={!!session}`. |
-| `onWegAuthClick` not firing | React CE event binding | Use `addEventListener` on a ref (see above). |
+| Auth always Sign in | `signed-in` not set | Bind `signedIn={!!session}`. |
+| Manage Account shows label not name | `user-name` not set | Pass `userName` when signed in. |
+| `onWegAuthClick` not firing | React CE event binding | Use `addEventListener` on a ref. |
 | TS: unknown element | No augmentation | Add `weg-shared-layout-jsx.d.ts`. |
 
 ## See also

package/docs/vanilla.md

@@ -4,10 +4,10 @@
 
 | Tag | Purpose |
 | --- | --- |
-| `<weg-header>` | Site header — logo (bundled), nav dropdowns, flat links, Sign in / Sign out |
+| `<weg-header>` | Site header — bundled logo, CMS nav (signed out), built-in nav (signed in), Sign in / Manage Account / Sign out |
 | `<weg-footer>` | Site footer — social links, columns, credits, copyright |
 
-Both components are **presentational**: they do **not** fetch data. Pass the same `layout` payload to each (or one shared object on both).
+Both components are **presentational**: they do **not** fetch data. Pass the same `layout` payload to each.
 
 Payload shape: [`dummy-data.json`](../src/assets/dummy-data.json) (see [readme](../readme.md#how-it-works)).
 
@@ -23,6 +23,7 @@ With a bundler that resolves `node_modules` imports:
 <script type="module">
   import { defineCustomElements } from 'weg-shared-layout/loader';
   import layout from 'weg-shared-layout/dummy-data.json';
+  import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth.js';
 
   defineCustomElements();
 
@@ -49,51 +50,76 @@ Assign the **`layout` JavaScript property** (recommended):
 element.layout = layoutObject;
 ```
 
-Or pass a JSON **string** on the `layout` attribute — the component parses it the same way:
+Or pass a JSON **string** on the `layout` attribute:
 
 ```html
 <weg-header layout='{"header":{"links":[]}}'></weg-header>
 ```
 
+## Header layout fields (signed out)
+
+| Field | Purpose |
+| --- | --- |
+| `header.logoHref` | Logo link target (defaults to WEG home) |
+| `header.dropdowns` | Dropdown menus from CMS |
+| `header.links` | Flat nav links from CMS |
+| `header.signIn` | Sign in button `{ label, href }` |
+
+See [`dummy-data.json`](../src/assets/dummy-data.json) for production URL examples.
+
 ## Header auth (Sign in / Sign out)
 
-The logo is bundled inside `<weg-header>` and cannot be changed via `layout`.
+Define auth URLs in `./auth.js`:
+
+```js
+export const HEADER_SIGN_IN = {
+  label: 'Sign in',
+  href: 'https://account.warwickemploymentgroup.com/account/login',
+};
+
+export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
+```
+
+### Signed out
+
+Renders `dropdowns`, `links`, and `signIn` from `layout`.
 
-Set **`signedIn`** when the user has a session (maps to the `signed-in` attribute):
+### Signed in
+
+Set **`signedIn`** and optionally **`userName`**. CMS nav is ignored; built-in links are shown (Find a job, Dashboard, Manage Account, Sign out).
 
 ```js
 header.signedIn = true;
+header.userName = 'Alex';
 // or
 header.setAttribute('signed-in', '');
+header.setAttribute('user-name', 'Alex');
 ```
 
-Labels come from `layout.header.signIn` and `layout.header.signOut`:
-
-```json
-"signIn": { "label": "Sign in", "href": "/account/login" },
-"signOut": { "label": "Sign out" }
-```
-
-Listen for **`wegAuthClick`** to handle sign-in routing or sign-out logic:
+Listen for **`wegAuthClick`**:
 
 ```js
+import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth.js';
+
 header.addEventListener('wegAuthClick', (event) => {
-  event.preventDefault(); // stop default navigation / redirect
+  event.preventDefault();
 
   if (event.detail.action === 'sign-out') {
-    // your logout()
     header.signedIn = false;
+    window.location.href = ACCOUNT_LOGIN_HREF;
     return;
   }
 
-  window.location.href = '/account/login';
+  window.location.href = layout.header.signIn?.href ?? HEADER_SIGN_IN.href;
 });
 ```
 
 | `event.detail.action` | Default behaviour if not prevented |
 | --- | --- |
 | `'sign-in'` | Browser follows `signIn.href` |
-| `'sign-out'` | Navigates to `signOut.href` if set; otherwise event only |
+| `'sign-out'` | Redirects to built-in sign-out URL |
+
+Logo **image** is bundled. Logo **link** uses `layout.header.logoHref` when signed out.
 
 ## Without a bundler
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weg-shared-layout",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Shared layout Web Components built with Stencil",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -45,16 +45,9 @@
     "dist/",
     "docs/",
     "loader/",
-    "src/assets/dummy-data.json"
+    "src/assets/dummy-data.json",
+    "src/constants/"
   ],
-  "scripts": {
-    "prepack": "npm run build",
-    "build": "stencil build",
-    "start": "stencil build --dev --watch --serve",
-    "test": "stencil-test --prod",
-    "test:watch": "stencil-test --prod --watch",
-    "generate": "stencil generate"
-  },
   "devDependencies": {
     "@stencil/core": "^4.27.1 || ^5.0.0-0",
     "@stencil/vitest": "^1.8.3",
@@ -63,5 +56,12 @@
     "playwright": "^1.52.0",
     "vitest": "^4.0.0"
   },
-  "license": "MIT"
-}
+  "license": "MIT",
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil-test --prod",
+    "test:watch": "stencil-test --prod --watch",
+    "generate": "stencil generate"
+  }
+}