@owlmeans/web-panel 0.1.18-rc.45 → 0.1.18-rc.47

package/README.md

@@ -11,7 +11,7 @@ but never started.
 ## Installation
 
 ```sh
-bun add @owlmeans/web-panel@^0.1.18-rc.43
+bun add @owlmeans/web-panel@^0.1.18-rc.47
 ```
 
 Peer requirements (the consuming app provides these): `react`, `react-dom`,
@@ -226,7 +226,8 @@ alias. Default keys are `nav.<section>` and `modules.<alias>`.
 | `NavLayout` | `nav`, `translate?`, `title?`, `home?` (brand target; defaults to the first section's first item), `actions?`, `footer?` (`PanelNavLink[]` renders the standard footer, a node replaces it), `headerClassName?`, `contentClassName?`, `containerClassName?`, `className?`, `style?` |
 | `TopNav` | `config`, `translate?`, `ariaLabel?`, `className?`, `style?` |
 | `SideNav` | the same, plus `variant?: 'side' \| 'bar'` |
-| `Footer` | `links?`, `translate?`, `containerClassName?`, `children?`, `className?`, `style?` |
+| `Footer` | `links?`, `translate?`, `containerClassName?`, `children?`, `className?`, `style?` — always renders the platform/owner credit line too, via `ShellCredit` |
+| `ShellCredit`, `useShellCredit` | `className?` — "Powered by OwlMeans" plus the owner's copyright, resolved the same way the sign-in screen's credit is |
 
 ### 4. Forms, panels and status
 
@@ -330,8 +331,9 @@ The dialog's strings are the lib-tier `socket` namespace (`reload.title`, `reloa
 
 | Symbol | Kind | Purpose |
 |---|---|---|
-| `NavLayout`, `TopNav`, `SideNav`, `Footer` | component | Navigation shell and its pieces |
-| `NavLayoutProps`, `TopNavProps`, `SideNavProps`, `FooterProps` | type | Their props |
+| `NavLayout`, `TopNav`, `SideNav`, `Footer`, `ShellCredit` | component | Navigation shell and its pieces, including the footer's platform/owner credit |
+| `NavLayoutProps`, `TopNavProps`, `SideNavProps`, `FooterProps`, `ShellCreditProps` | type | Their props |
+| `useShellCredit` | hook | Resolves the credit `ShellCredit` renders, without rendering it |
 | `Layout`, `LayoutProps` | component, type | Plain content wrapper |
 | `Form`, `WebFormProps` | component, type | Web form; `FormProps` plus `className` / `style` |
 | `TextInput`, `TextInputProps` | component, type | `react-hook-form` controlled input |
@@ -461,7 +463,7 @@ This package ships embedded agent skills under `agent-meta/`. After installing y
 your project's skill store (`.agents/skills/`):
 
 ```sh
-npx @owlmeans/agent-skills@^0.1.18-rc.24
+npx @owlmeans/agent-skills@^0.1.18-rc.27
 ```
 
 The embedded files are version-matched to this package release. Do not edit them

package/agent-meta/manifest.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": 2,
   "package": "@owlmeans/web-panel",
-  "version": "0.1.18-rc.45",
-  "generatedAt": "2026-09-15T12:59:01.076Z",
+  "version": "0.1.18-rc.47",
+  "generatedAt": "2026-09-15T18:16:10.668Z",
   "canonicalRepo": "https://github.com/owlmeans/common",
   "entries": [
     {

package/agent-meta/skills/web-panel/SKILL.md

@@ -8,7 +8,7 @@ user-invocable: false
 # @owlmeans/web-panel
 
 **Layer:** Web (React)
-**Install:** `"@owlmeans/web-panel": "^0.1.18-rc.45"` in `dependencies`
+**Install:** `"@owlmeans/web-panel": "^0.1.18-rc.47"` in `dependencies`
 
 ## Key Exports
 
@@ -112,6 +112,7 @@ header. Both render the same items; only one is visible at a time.
 | `TopNav` | `config: PanelNavConfig`, `translate?`, `ariaLabel?`, `className?`, `style?` |
 | `SideNav` | the same, plus `variant?: 'side' \| 'bar'` |
 | `Footer` | `links?: PanelNavLink[]`, `translate?`, `containerClassName?` (the shell's rhythm, so the footer row lines up with the header and content), `children?`, `className?`, `style?` |
+| `ShellCredit` / `useShellCredit` | `className?`; the platform/owner credit line `Footer` always renders — see below |
 
 **The style slots are REGIONS, and each region is its own SURFACE.** `className` is the root —
 the full-height page *behind* the header, side menu and footer. `headerClassName` is the sticky
@@ -129,6 +130,33 @@ invisible. Pinned by `tests/nav.spec.ts` → "the header is its own surface", wh
 rendered lightness rather than class names; the harness root carries a dark shell permanently so
 every navigation test runs against that case.
 
+**The header is opaque even when `headerClassName` fails to be.** Behind the header's own visible
+content sits a `[data-nav-backdrop]` layer that always paints `bg-background`, at negative
+z-index inside the header's own `isolate` stacking context — so it never covers a caller's actual
+header content, only whatever the header's own background would have been. It exists because
+`headerClassName` is free text a design or restyle pass writes, and three shapes of it leave
+tailwind-merge with no background utility at all on the header: a bare `bg-transparent`, an alpha
+surface (`bg-<x>/50`), or Tailwind v3's dead syntax for referencing a CSS variable
+(`bg-[--my-var]` — square brackets; v4's real shorthand is `bg-(--my-var)`, parentheses). Any of
+those used to leave the sticky header fully see-through, with page content visibly scrolling
+through the menu. A caller that genuinely wants a coloured bar still gets it: `headerClassName`'s
+own background renders on top of the backdrop. Pinned by `nav.spec.ts` → "a broken headerClassName
+still leaves the backdrop layer opaque".
+
+**`Footer` always renders the platform/owner credit line, and there is no prop that hides it.**
+Below the links (or on its own, when a layout passes no `footer` at all — `NavLayout` renders
+`<Footer>` unconditionally now), `ShellCredit` shows "Powered by OwlMeans" and the owner's own
+copyright notice, resolved from `security.auth.login.credit` via `resolveCredit`
+(`@owlmeans/client-auth/login`) — the SAME resolver and the SAME config the sign-in screen's
+`LoginCredit` reads, so an owner who pays to drop the platform credit (`poweredBy: false`) drops
+it everywhere, not only on a screen a signed-in visitor may never see again. Order is the opposite
+of the sign-in screen's: the owner's own notice leads, the platform credit follows — a footer is
+read as "whose page is this, and who built it". The links row and the credit are both centred
+(`justify-center`), not left-aligned. `useShellCredit()` is exported separately so a caller that
+needs to know whether there is anything to show (without rendering it) can ask, exactly how
+`Footer` itself decides whether to render `null`. Pinned by `nav.spec.ts` → "the shell footer
+credit".
+
 **Every style slot is MERGED over its default — none of them substitutes.** `className`,
 `headerClassName`, `contentClassName` and `containerClassName` all go through `cn`, so a caller
 names only the utility it wants to move and tailwind-merge drops just the one it conflicts with.

package/build/components/footer/component.d.ts

@@ -1,12 +1,18 @@
 import type { FC } from 'react';
 import type { FooterProps } from './types.js';
 /**
- * The standard footer — a row of links plus whatever the app adds as children.
+ * The standard footer — a centred row of links plus whatever the app adds as children, followed
+ * by the platform/owner credit line.
  *
  * Labels are resolved HERE and handed to `Link` as children: `Link`'s own default label
  * looks up `modules.<alias>` with no fallback, so an app without i18n would print the raw
  * key. Resolving first means a literal label, a translation, or a humanized alias — never
  * a key.
+ *
+ * The credit is rendered unconditionally — never behind a prop, so a restyle cannot delete it.
+ * `useShellCredit` decides emptiness here (rather than letting `ShellCredit` render null inside
+ * an otherwise-empty bordered strip): the footer as a whole returns `null` only when links,
+ * children AND the resolved credit are all empty.
  */
 export declare const Footer: FC<FooterProps>;
 //# sourceMappingURL=component.d.ts.map

package/build/components/footer/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/footer/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAqBlC,CAAA"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/footer/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA0BlC,CAAA"}

package/build/components/footer/component.js

@@ -2,23 +2,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { defaultNavTranslate, resolveNavLabel } from '@owlmeans/client-panel';
 import { cn } from '../../@/lib/utils.js';
 import { Link } from '../link.js';
+import { ShellCredit, useShellCredit } from './credit.js';
 /**
- * The standard footer — a row of links plus whatever the app adds as children.
+ * The standard footer — a centred row of links plus whatever the app adds as children, followed
+ * by the platform/owner credit line.
  *
  * Labels are resolved HERE and handed to `Link` as children: `Link`'s own default label
  * looks up `modules.<alias>` with no fallback, so an app without i18n would print the raw
  * key. Resolving first means a literal label, a translation, or a humanized alias — never
  * a key.
+ *
+ * The credit is rendered unconditionally — never behind a prop, so a restyle cannot delete it.
+ * `useShellCredit` decides emptiness here (rather than letting `ShellCredit` render null inside
+ * an otherwise-empty bordered strip): the footer as a whole returns `null` only when links,
+ * children AND the resolved credit are all empty.
  */
 export const Footer = ({ links, translate = defaultNavTranslate, children, className, style, containerClassName }) => {
-    if ((links == null || links.length < 1) && children == null) {
+    const credit = useShellCredit();
+    const hasLinks = (links != null && links.length > 0) || children != null;
+    if (!hasLinks && !credit.poweredBy && credit.line == null) {
         return null;
     }
-    return _jsx("footer", { className: cn('border-t py-6', className), style: style, children: _jsxs("div", { className: cn('flex flex-wrap items-center gap-4 text-sm px-4', containerClassName), children: [links?.map((link, idx) => {
-                    const label = resolveNavLabel(translate, link.label, `modules.${link.alias ?? link.href ?? ''}`, link.alias ?? link.href);
-                    return link.href != null
-                        ? _jsx(Link, { src: link.href, open: link.open, children: label }, `${link.href}:${idx}`)
-                        : _jsx(Link, { module: link.alias, open: link.open, children: label }, `${link.alias}:${idx}`);
-                }), children] }) });
+    return _jsx("footer", { className: cn('border-t py-6', className), style: style, children: _jsxs("div", { className: cn('flex flex-col items-center gap-3 text-center', containerClassName), children: [hasLinks && _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4 text-sm", children: [links?.map((link, idx) => {
+                            const label = resolveNavLabel(translate, link.label, `modules.${link.alias ?? link.href ?? ''}`, link.alias ?? link.href);
+                            return link.href != null
+                                ? _jsx(Link, { src: link.href, open: link.open, children: label }, `${link.href}:${idx}`)
+                                : _jsx(Link, { module: link.alias, open: link.open, children: label }, `${link.alias}:${idx}`);
+                        }), children] }), _jsx(ShellCredit, {})] }) });
 };
 //# sourceMappingURL=component.js.map

package/build/components/footer/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/footer/component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC7E,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAIjC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,KAAK,EAAE,SAAS,GAAG,mBAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EACvF,EAAE,EAAE;IACH,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,IAAI,IAAI,EAAE,CAAC;QAC5D,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,iBAAQ,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,YACpE,eAAK,SAAS,EAAE,EAAE,CAAC,gDAAgD,EAAE,kBAAkB,CAAC,aACrF,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;oBACxB,MAAM,KAAK,GAAG,eAAe,CAC3B,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAC3F,CAAA;oBAED,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI;wBACtB,CAAC,CAAC,KAAC,IAAI,IAA6B,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,YAAG,KAAK,IAA9D,GAAG,IAAI,CAAC,IAAI,IAAI,GAAG,EAAE,CAAiD;wBACnF,CAAC,CAAC,KAAC,IAAI,IAA8B,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,YAAG,KAAK,IAAnE,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,EAAE,CAAqD,CAAA;gBAC5F,CAAC,CAAC,EACD,QAAQ,IACL,GACC,CAAA;AACX,CAAC,CAAA"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/footer/component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC7E,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAIzD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,KAAK,EAAE,SAAS,GAAG,mBAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EACvF,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,cAAc,EAAE,CAAA;IAC/B,MAAM,QAAQ,GAAG,CAAC,KAAK,IAAI,IAAI,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,IAAI,IAAI,CAAA;IACxE,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC;QAC1D,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,iBAAQ,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,YACpE,eAAK,SAAS,EAAE,EAAE,CAAC,8CAA8C,EAAE,kBAAkB,CAAC,aACnF,QAAQ,IAAI,eAAK,SAAS,EAAC,0DAA0D,aACnF,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;4BACxB,MAAM,KAAK,GAAG,eAAe,CAC3B,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAC3F,CAAA;4BAED,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI;gCACtB,CAAC,CAAC,KAAC,IAAI,IAA6B,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,YAAG,KAAK,IAA9D,GAAG,IAAI,CAAC,IAAI,IAAI,GAAG,EAAE,CAAiD;gCACnF,CAAC,CAAC,KAAC,IAAI,IAA8B,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,YAAG,KAAK,IAAnE,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,EAAE,CAAqD,CAAA;wBAC5F,CAAC,CAAC,EACD,QAAQ,IACL,EACN,KAAC,WAAW,KAAG,IACX,GACC,CAAA;AACX,CAAC,CAAA"}

package/build/components/footer/credit.d.ts

@@ -0,0 +1,29 @@
+import type { FC } from 'react';
+import type { ResolvedCredit } from '@owlmeans/client-auth/login';
+export interface ShellCreditProps {
+    className?: string;
+}
+/**
+ * The platform credit and the owner's own copyright notice, resolved from the same
+ * `security.auth.login.credit` configuration the sign-in screen reads (`resolveCredit`,
+ * `@owlmeans/client-auth/login`) — one source, so an owner who pays to drop the platform credit
+ * drops it everywhere it can appear, not only on a screen a signed-in visitor may never see
+ * again.
+ *
+ * Exported separately from {@link ShellCredit} so `Footer` can decide, WITHOUT rendering
+ * anything, whether it has nothing at all to show — an empty bordered strip is worse than no
+ * footer, and only the resolved credit knows it is empty.
+ */
+export declare const useShellCredit: () => ResolvedCredit;
+/**
+ * The platform credit and the owner's own copyright notice, in every area's footer.
+ *
+ * There is deliberately no prop to hide this component: the only way to remove the platform
+ * half is the config `poweredBy: false` the entitlement gate sets, and the owner's own notice is
+ * never something a restyle should be able to delete.
+ *
+ * Order is the opposite of the sign-in screen's `LoginCredit`: a footer is read as "whose page is
+ * this, and who built it", so the owner's own copyright leads and the platform credit follows.
+ */
+export declare const ShellCredit: FC<ShellCreditProps>;
+//# sourceMappingURL=credit.d.ts.map

package/build/components/footer/credit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"credit.d.ts","sourceRoot":"","sources":["../../../src/components/footer/credit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAIjE,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,QAAO,cAMjC,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAkB5C,CAAA"}

package/build/components/footer/credit.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from '@owlmeans/client';
+import { useI18nLib } from '@owlmeans/client-i18n';
+import { resolveCredit } from '@owlmeans/client-auth/login';
+import { cn } from '../../@/lib/utils.js';
+/**
+ * The platform credit and the owner's own copyright notice, resolved from the same
+ * `security.auth.login.credit` configuration the sign-in screen reads (`resolveCredit`,
+ * `@owlmeans/client-auth/login`) — one source, so an owner who pays to drop the platform credit
+ * drops it everywhere it can appear, not only on a screen a signed-in visitor may never see
+ * again.
+ *
+ * Exported separately from {@link ShellCredit} so `Footer` can decide, WITHOUT rendering
+ * anything, whether it has nothing at all to show — an empty bordered strip is worse than no
+ * footer, and only the resolved credit knows it is empty.
+ */
+export const useShellCredit = () => {
+    const context = useContext();
+    const cfg = context.cfg.security?.auth?.login?.credit;
+    const brand = context.cfg.brand;
+    return resolveCredit(cfg, brand, context.cfg.service);
+};
+/**
+ * The platform credit and the owner's own copyright notice, in every area's footer.
+ *
+ * There is deliberately no prop to hide this component: the only way to remove the platform
+ * half is the config `poweredBy: false` the entitlement gate sets, and the owner's own notice is
+ * never something a restyle should be able to delete.
+ *
+ * Order is the opposite of the sign-in screen's `LoginCredit`: a footer is read as "whose page is
+ * this, and who built it", so the owner's own copyright leads and the platform credit follows.
+ */
+export const ShellCredit = ({ className }) => {
+    const { poweredBy, line } = useShellCredit();
+    const t = useI18nLib('auth');
+    if (!poweredBy && line == null) {
+        return null;
+    }
+    return _jsxs("p", { "data-shell-credit": true, className: cn('text-center text-xs text-muted-foreground', className), children: [line != null && _jsx("span", { children: line }), poweredBy && line != null && _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }), poweredBy && _jsx("span", { "data-login-powered": true, children: t('login.credit.powered', { defaultValue: 'Powered by OwlMeans' }) })] });
+};
+//# sourceMappingURL=credit.js.map

package/build/components/footer/credit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"credit.js","sourceRoot":"","sources":["../../../src/components/footer/credit.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAG3D,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAA;AAMzC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAmB,EAAE;IACjD,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,GAAG,GAAI,OAAO,CAAC,GAAoB,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAA;IACvE,MAAM,KAAK,GAAI,OAAO,CAAC,GAAoB,CAAC,KAAK,CAAA;IAEjD,OAAO,aAAa,CAAC,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;AACvD,CAAC,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACjE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,cAAc,EAAE,CAAA;IAC5C,MAAM,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,CAAA;IAE5B,IAAI,CAAC,SAAS,IAAI,IAAI,IAAI,IAAI,EAAE,CAAC;QAC/B,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,wCAEL,SAAS,EAAE,EAAE,CAAC,2CAA2C,EAAE,SAAS,CAAC,aAEpE,IAAI,IAAI,IAAI,IAAI,yBAAO,IAAI,GAAQ,EACnC,SAAS,IAAI,IAAI,IAAI,IAAI,IAAI,8BAAkB,MAAM,yBAAW,EAChE,SAAS,IAAI,qDACX,CAAC,CAAC,sBAAsB,EAAE,EAAE,YAAY,EAAE,qBAAqB,EAAE,CAAC,GAC9D,IACL,CAAA;AACN,CAAC,CAAA"}

package/build/components/footer/index.d.ts

@@ -1,3 +1,4 @@
 export type * from './types.js';
 export * from './component.js';
+export * from './credit.js';
 //# sourceMappingURL=index.d.ts.map

package/build/components/footer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/footer/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,YAAY,CAAA;AAE/B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/footer/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,YAAY,CAAA;AAE/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA"}

package/build/components/footer/index.js

@@ -1,2 +1,3 @@
 export * from './component.js';
+export * from './credit.js';
 //# sourceMappingURL=index.js.map

package/build/components/footer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/footer/index.ts"],"names":[],"mappings":"AAEA,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/footer/index.ts"],"names":[],"mappings":"AAEA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA"}

package/build/components/nav/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/components/nav/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAO/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAahD;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAwDxC,CAAA"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/components/nav/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAO/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAahD;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAkFxC,CAAA"}

package/build/components/nav/layout.js

@@ -33,8 +33,10 @@ export const NavLayout = ({ nav, translate, title, home, actions, footer, childr
     // winning on the utility it names and leaves the rest of the rhythm standing, so a width-only
     // value stays a width-only change; `px-8` still overrides the padding when that is the intent.
     const container = cn(CONTAINER, containerClassName);
-    return _jsxs("div", { className: cn('flex min-h-screen flex-col bg-background text-foreground', className), style: style, children: [_jsxs("header", { className: cn('sticky top-0 z-40 border-b bg-background text-foreground', headerClassName), children: [_jsxs("div", { className: cn('flex h-14 items-center gap-6', container), children: [title != null ? _jsx("a", { onClick: brandAlias != null ? navigator.press(brandAlias) : undefined, className: cn('brand flex items-center gap-2 text-lg font-semibold', brandAlias != null && 'cursor-pointer'), children: title }) : null, _jsx(TopNav, { config: nav, translate: translate, ariaLabel: "Sections" }), _jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })] }), _jsx(SideNav, { config: nav, translate: translate, variant: "bar", ariaLabel: "Screens", className: "md:hidden" })] }), _jsxs("div", { className: "flex flex-1", children: [_jsx(SideNav, { config: nav, translate: translate, variant: "side", ariaLabel: "Screens", className: "hidden md:block" }), _jsx("main", { className: cn('flex-1 py-8', contentClassName), children: _jsx("div", { className: cn(container), children: children }) })] }), Array.isArray(footer)
+    return _jsxs("div", { className: cn('flex min-h-screen flex-col bg-background text-foreground', className), style: style, children: [_jsxs("header", { className: cn('sticky top-0 z-40 isolate border-b bg-background text-foreground', headerClassName), children: [_jsxs("div", { className: cn('flex h-14 items-center gap-6', container), children: [title != null ? _jsx("a", { onClick: brandAlias != null ? navigator.press(brandAlias) : undefined, className: cn('brand flex items-center gap-2 text-lg font-semibold', brandAlias != null && 'cursor-pointer'), children: title }) : null, _jsx(TopNav, { config: nav, translate: translate, ariaLabel: "Sections" }), _jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })] }), _jsx(SideNav, { config: nav, translate: translate, variant: "bar", ariaLabel: "Screens", className: "md:hidden" }), _jsx("div", { "aria-hidden": "true", "data-nav-backdrop": true, className: "absolute inset-0 -z-10 bg-background pointer-events-none" })] }), _jsxs("div", { className: "flex flex-1", children: [_jsx(SideNav, { config: nav, translate: translate, variant: "side", ariaLabel: "Screens", className: "hidden md:block" }), _jsx("main", { className: cn('flex-1 py-8', contentClassName), children: _jsx("div", { className: cn(container), children: children }) })] }), Array.isArray(footer)
                 ? _jsx(Footer, { links: footer, translate: translate, containerClassName: container })
-                : footer != null ? _jsx(Footer, { containerClassName: container, children: footer }) : null] });
+                : footer != null
+                    ? _jsx(Footer, { containerClassName: container, children: footer })
+                    : _jsx(Footer, { containerClassName: container })] });
 };
 //# sourceMappingURL=layout.js.map

package/build/components/nav/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/components/nav/layout.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/components/nav/layout.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owlmeans/web-panel",
-  "version": "0.1.18-rc.45",
+  "version": "0.1.18-rc.47",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -44,33 +44,33 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
-    "@owlmeans/api-config-client": "^0.1.18-rc.25",
-    "@owlmeans/auth": "^0.1.18-rc.21",
-    "@owlmeans/auth-common": "^0.1.18-rc.25",
-    "@owlmeans/basic-envelope": "^0.1.18-rc.24",
-    "@owlmeans/client": "^0.1.18-rc.28",
-    "@owlmeans/client-auth": "^0.1.18-rc.33",
-    "@owlmeans/client-config": "^0.1.18-rc.24",
-    "@owlmeans/client-context": "^0.1.18-rc.25",
-    "@owlmeans/client-entrypoint": "^0.1.18-rc.25",
-    "@owlmeans/client-flow": "^0.1.18-rc.29",
-    "@owlmeans/client-i18n": "^0.1.18-rc.27",
-    "@owlmeans/client-panel": "^0.1.18-rc.36",
-    "@owlmeans/client-route": "^0.1.18-rc.25",
-    "@owlmeans/client-socket": "^0.1.18-rc.26",
-    "@owlmeans/config": "^0.1.18-rc.24",
-    "@owlmeans/context": "^0.1.18-rc.20",
-    "@owlmeans/entrypoint": "^0.1.18-rc.23",
-    "@owlmeans/error": "^0.1.18-rc.20",
-    "@owlmeans/flow": "^0.1.18-rc.26",
-    "@owlmeans/i18n": "^0.1.18-rc.20",
-    "@owlmeans/route": "^0.1.18-rc.21",
-    "@owlmeans/state": "^0.1.18-rc.22",
-    "@owlmeans/web-client": "^0.1.18-rc.37",
-    "@owlmeans/web-consent": "^0.1.18-rc.19",
-    "@owlmeans/web-db": "^0.1.18-rc.26",
-    "@owlmeans/web-flow": "^0.1.18-rc.29",
-    "@owlmeans/web-router": "^0.1.18-rc.26",
+    "@owlmeans/api-config-client": "^0.1.18-rc.26",
+    "@owlmeans/auth": "^0.1.18-rc.26",
+    "@owlmeans/auth-common": "^0.1.18-rc.28",
+    "@owlmeans/basic-envelope": "^0.1.18-rc.27",
+    "@owlmeans/client": "^0.1.18-rc.31",
+    "@owlmeans/client-auth": "^0.1.18-rc.36",
+    "@owlmeans/client-config": "^0.1.18-rc.28",
+    "@owlmeans/client-context": "^0.1.18-rc.29",
+    "@owlmeans/client-entrypoint": "^0.1.18-rc.28",
+    "@owlmeans/client-flow": "^0.1.18-rc.32",
+    "@owlmeans/client-i18n": "^0.1.18-rc.30",
+    "@owlmeans/client-panel": "^0.1.18-rc.37",
+    "@owlmeans/client-route": "^0.1.18-rc.29",
+    "@owlmeans/client-socket": "^0.1.18-rc.29",
+    "@owlmeans/config": "^0.1.18-rc.28",
+    "@owlmeans/context": "^0.1.18-rc.24",
+    "@owlmeans/entrypoint": "^0.1.18-rc.27",
+    "@owlmeans/error": "^0.1.18-rc.26",
+    "@owlmeans/flow": "^0.1.18-rc.29",
+    "@owlmeans/i18n": "^0.1.18-rc.27",
+    "@owlmeans/route": "^0.1.18-rc.25",
+    "@owlmeans/state": "^0.1.18-rc.25",
+    "@owlmeans/web-client": "^0.1.18-rc.40",
+    "@owlmeans/web-consent": "^0.1.18-rc.21",
+    "@owlmeans/web-db": "^0.1.18-rc.29",
+    "@owlmeans/web-flow": "^0.1.18-rc.32",
+    "@owlmeans/web-router": "^0.1.18-rc.29",
     "i18next-browser-languagedetector": "^8.0.0",
     "qrcode.react": "^4.2.0",
     "react-google-recaptcha": "^3.1.0",
@@ -95,7 +95,7 @@
   },
   "devDependencies": {
     "@owlmeans/dep-config": "workspace:*",
-    "@owlmeans/test-ui": "^0.1.18-rc.27",
+    "@owlmeans/test-ui": "^0.1.18-rc.29",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.14",

package/src/components/footer/component.tsx

@@ -2,36 +2,48 @@ import type { FC } from 'react'
 import { defaultNavTranslate, resolveNavLabel } from '@owlmeans/client-panel'
 import { cn } from '../../@/lib/utils.js'
 import { Link } from '../link.js'
+import { ShellCredit, useShellCredit } from './credit.js'
 
 import type { FooterProps } from './types.js'
 
 /**
- * The standard footer — a row of links plus whatever the app adds as children.
+ * The standard footer — a centred row of links plus whatever the app adds as children, followed
+ * by the platform/owner credit line.
  *
  * Labels are resolved HERE and handed to `Link` as children: `Link`'s own default label
  * looks up `modules.<alias>` with no fallback, so an app without i18n would print the raw
  * key. Resolving first means a literal label, a translation, or a humanized alias — never
  * a key.
+ *
+ * The credit is rendered unconditionally — never behind a prop, so a restyle cannot delete it.
+ * `useShellCredit` decides emptiness here (rather than letting `ShellCredit` render null inside
+ * an otherwise-empty bordered strip): the footer as a whole returns `null` only when links,
+ * children AND the resolved credit are all empty.
  */
 export const Footer: FC<FooterProps> = ({
   links, translate = defaultNavTranslate, children, className, style, containerClassName
 }) => {
-  if ((links == null || links.length < 1) && children == null) {
+  const credit = useShellCredit()
+  const hasLinks = (links != null && links.length > 0) || children != null
+  if (!hasLinks && !credit.poweredBy && credit.line == null) {
     return null
   }
 
   return <footer className={cn('border-t py-6', className)} style={style}>
-    <div className={cn('flex flex-wrap items-center gap-4 text-sm px-4', containerClassName)}>
-      {links?.map((link, idx) => {
-        const label = resolveNavLabel(
-          translate, link.label, `modules.${link.alias ?? link.href ?? ''}`, link.alias ?? link.href
-        )
+    <div className={cn('flex flex-col items-center gap-3 text-center', containerClassName)}>
+      {hasLinks && <div className="flex flex-wrap items-center justify-center gap-4 text-sm">
+        {links?.map((link, idx) => {
+          const label = resolveNavLabel(
+            translate, link.label, `modules.${link.alias ?? link.href ?? ''}`, link.alias ?? link.href
+          )
 
-        return link.href != null
-          ? <Link key={`${link.href}:${idx}`} src={link.href} open={link.open}>{label}</Link>
-          : <Link key={`${link.alias}:${idx}`} module={link.alias} open={link.open}>{label}</Link>
-      })}
-      {children}
+          return link.href != null
+            ? <Link key={`${link.href}:${idx}`} src={link.href} open={link.open}>{label}</Link>
+            : <Link key={`${link.alias}:${idx}`} module={link.alias} open={link.open}>{label}</Link>
+        })}
+        {children}
+      </div>}
+      <ShellCredit />
     </div>
   </footer>
 }

package/src/components/footer/credit.tsx

@@ -0,0 +1,60 @@
+import type { FC } from 'react'
+import { useContext } from '@owlmeans/client'
+import { useI18nLib } from '@owlmeans/client-i18n'
+import { resolveCredit } from '@owlmeans/client-auth/login'
+import type { ResolvedCredit } from '@owlmeans/client-auth/login'
+import type { CommonConfig } from '@owlmeans/config'
+import { cn } from '../../@/lib/utils.js'
+
+export interface ShellCreditProps {
+  className?: string
+}
+
+/**
+ * The platform credit and the owner's own copyright notice, resolved from the same
+ * `security.auth.login.credit` configuration the sign-in screen reads (`resolveCredit`,
+ * `@owlmeans/client-auth/login`) — one source, so an owner who pays to drop the platform credit
+ * drops it everywhere it can appear, not only on a screen a signed-in visitor may never see
+ * again.
+ *
+ * Exported separately from {@link ShellCredit} so `Footer` can decide, WITHOUT rendering
+ * anything, whether it has nothing at all to show — an empty bordered strip is worse than no
+ * footer, and only the resolved credit knows it is empty.
+ */
+export const useShellCredit = (): ResolvedCredit => {
+  const context = useContext()
+  const cfg = (context.cfg as CommonConfig).security?.auth?.login?.credit
+  const brand = (context.cfg as CommonConfig).brand
+
+  return resolveCredit(cfg, brand, context.cfg.service)
+}
+
+/**
+ * The platform credit and the owner's own copyright notice, in every area's footer.
+ *
+ * There is deliberately no prop to hide this component: the only way to remove the platform
+ * half is the config `poweredBy: false` the entitlement gate sets, and the owner's own notice is
+ * never something a restyle should be able to delete.
+ *
+ * Order is the opposite of the sign-in screen's `LoginCredit`: a footer is read as "whose page is
+ * this, and who built it", so the owner's own copyright leads and the platform credit follows.
+ */
+export const ShellCredit: FC<ShellCreditProps> = ({ className }) => {
+  const { poweredBy, line } = useShellCredit()
+  const t = useI18nLib('auth')
+
+  if (!poweredBy && line == null) {
+    return null
+  }
+
+  return <p
+    data-shell-credit
+    className={cn('text-center text-xs text-muted-foreground', className)}
+  >
+    {line != null && <span>{line}</span>}
+    {poweredBy && line != null && <span aria-hidden="true"> · </span>}
+    {poweredBy && <span data-login-powered>
+      {t('login.credit.powered', { defaultValue: 'Powered by OwlMeans' })}
+    </span>}
+  </p>
+}

package/src/components/footer/index.ts

@@ -1,3 +1,4 @@
 export type * from './types.js'
 
 export * from './component.js'
+export * from './credit.js'

package/src/components/nav/layout.tsx

@@ -60,8 +60,17 @@ export const NavLayout: FC<NavLayoutProps> = ({
       * and it is not redundant with the root: pairing has to be restated by every element that
       * repaints its own background. `headerClassName` lands after it, so an app that wants a
       * dark bar overrides BOTH halves through tailwind-merge.
+      *
+      * The `data-nav-backdrop` layer underneath is what keeps that promise even when
+      * `headerClassName` does NOT: a restyle that hands it an invalid Tailwind v4 arbitrary-value
+      * class (`bg-[--x]`, dropped silently), a bare `bg-transparent`, or a translucent surface
+      * (`bg-x/50`) used to leave the sticky bar with no background paint at all, and page content
+      * scrolled visibly through the menu. `-z-10` keeps it behind everything `header` renders and
+      * `pointer-events-none` keeps it out of the way of clicks; it paints `bg-background` no
+      * matter what `headerClassName` does or fails to do, and a caller who genuinely wants a dark
+      * bar still gets it because `headerClassName`'s own background paints OVER this one.
       */}
-    <header className={cn('sticky top-0 z-40 border-b bg-background text-foreground', headerClassName)}>
+    <header className={cn('sticky top-0 z-40 isolate border-b bg-background text-foreground', headerClassName)}>
       <div className={cn('flex h-14 items-center gap-6', container)}>
         {title != null ? <a
           onClick={brandAlias != null ? navigator.press(brandAlias) : undefined}
@@ -71,6 +80,15 @@ export const NavLayout: FC<NavLayoutProps> = ({
         <div className="ml-auto flex items-center gap-2">{actions}</div>
       </div>
       <SideNav config={nav} translate={translate} variant="bar" ariaLabel="Screens" className="md:hidden" />
+      {/*
+        * Last in source order, not first — `header`'s own FIRST `div` child is what the layout
+        * test locates to measure the shared rhythm (`header > div`, `.first()`), and this element
+        * is not part of that rhythm. Negative z-index inside `header`'s own `isolate` stacking
+        * context paints a layer behind every normal-flow child regardless of where it sits in the
+        * DOM, so moving it here changes nothing about what is visible — only which `div` a
+        * position-based query finds first.
+        */}
+      <div aria-hidden="true" data-nav-backdrop className="absolute inset-0 -z-10 bg-background pointer-events-none" />
     </header>
     <div className="flex flex-1">
       <SideNav config={nav} translate={translate} variant="side" ariaLabel="Screens" className="hidden md:block" />
@@ -78,8 +96,16 @@ export const NavLayout: FC<NavLayoutProps> = ({
         <div className={cn(container)}>{children}</div>
       </main>
     </div>
+    {/*
+      * The footer is rendered unconditionally, `footer` prop or not: `Footer` itself renders the
+      * platform/owner credit line even when there are no links and no children, and only that
+      * component gets to decide there is nothing to show. Gating this on `footer` used to make
+      * the credit disappear from every layout that never passed one.
+      */}
     {Array.isArray(footer)
       ? <Footer links={footer} translate={translate} containerClassName={container} />
-      : footer != null ? <Footer containerClassName={container}>{footer}</Footer> : null}
+      : footer != null
+        ? <Footer containerClassName={container}>{footer}</Footer>
+        : <Footer containerClassName={container} />}
   </div>
 }

package/tests/harness/mount.tsx

@@ -85,12 +85,21 @@ const LoginHarness: FC = () => <LoginScreen
   translate={(_key, defaultValue) => defaultValue}
 />
 
+// `?header=broken` simulates the layout-restyle bug this harness pins: a `headerClassName`
+// carrying an invalid Tailwind v4 arbitrary-value background (v3 syntax, silently dropped) and a
+// bare `bg-transparent`, either of which used to leave the sticky header with no background paint
+// of its own at all. One harness process serves both branches, exactly like `reloadDialog` above.
+const brokenHeader = new URLSearchParams(window.location.search).get('header') === 'broken'
+// `?footer=none` omits the `footer` prop entirely — the shape every area layout had before the
+// shell grew a footer-links convention. `NavLayout` must still render the credit line then.
+const noFooterProp = new URLSearchParams(window.location.search).get('footer') === 'none'
+
 const Layout: FC<PropsWithChildren> = ({ children }) => <>
   <NavLayout
     nav={navConfig}
     title="Harness"
     actions={<button id="action-slot">action</button>}
-    footer={footerLinks}
+    {...(noFooterProp ? {} : { footer: footerLinks })}
     // A DARK APPLICATION SHELL, which is what a themed app does to the root: a contrasting
     // surface pair, both halves correct. The header paints its own opaque background, so it is
     // a different surface, and everything in it must stay legible against `--background`
@@ -101,6 +110,7 @@ const Layout: FC<PropsWithChildren> = ({ children }) => <>
     // page. It names the width and nothing else, so the centring and the side padding must
     // survive it — substituting this for the default is a page running flush to the window edge.
     containerClassName="max-w-[1280px]"
+    {...(brokenHeader ? { headerClassName: 'bg-[--nope] bg-transparent' } : {})}
   >{children}</NavLayout>
   {/* Mounted ONCE, in the layout — exactly where an application mounts it. */}
   <Toaster />

package/tests/nav.spec.ts

@@ -178,6 +178,86 @@ describe('@owlmeans/web-panel — the header is its own surface', () => {
       await close()
     }
   }, TIMEOUT)
+
+  test('a broken headerClassName still leaves the backdrop layer opaque', async () => {
+    // `?header=broken` hands the header a Tailwind v3 arbitrary-value class v4 never emits, plus
+    // a bare `bg-transparent` — exactly what a layout-restyle pass produced once. tailwind-merge
+    // drops the header's own `bg-background` for both, so `header` itself legitimately reports a
+    // transparent computed background — that is `headerClassName` doing exactly what it says.
+    // What must NOT be transparent is the backdrop layer painted behind it: that is the element
+    // actually responsible for keeping content from showing through the bar.
+    const { page, close } = await open('/dash?header=broken')
+    try {
+      await page.waitForSelector('#dash')
+      const background = await page.locator('[data-nav-backdrop]').first()
+        .evaluate(el => window.getComputedStyle(el).backgroundColor)
+
+      expect(background).not.toMatch(/rgba\(0, 0, 0, 0\)|transparent/)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the backdrop layer never changes which div the shared-rhythm query finds first', async () => {
+    // `data-nav-backdrop` sits last in `header`'s DOM but paints behind everything via negative
+    // z-index — this pins that a position-based query for the header's own content div
+    // (`header > div`, `.first()`) still finds the rhythm div, not the backdrop.
+    const { page, close } = await open('/dash')
+    try {
+      await page.waitForSelector('#dash')
+      const first = await page.locator('header > div').first().getAttribute('data-nav-backdrop')
+      expect(first).toBeNull()
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+})
+
+describe('@owlmeans/web-panel — the shell footer credit', () => {
+  test('the platform credit and the owner notice render, owner notice first', async () => {
+    // The harness configures `credit: { poweredBy: true, product: 'Harness', organization: 'Acme' }`
+    // with no explicit `line`, so `resolveCredit` composes one from product/organization — the
+    // same resolver the sign-in screen uses. Order here is the opposite of the sign-in screen's:
+    // the owner's own notice leads, the platform credit follows.
+    const { page, close } = await open('/dash')
+    try {
+      await page.waitForSelector('#dash')
+      const credit = page.locator('footer [data-shell-credit]')
+      await credit.waitFor()
+      const text = await credit.textContent()
+      expect(text).toContain('Acme')
+      expect(text).toContain('Powered by OwlMeans')
+      expect(text?.indexOf('Acme')).toBeLessThan(text!.indexOf('Powered by OwlMeans'))
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the footer links and the credit are centred, not left-aligned', async () => {
+    const { page, close } = await open('/dash')
+    try {
+      await page.waitForSelector('#dash')
+      const justify = await page.locator('footer > div').first()
+        .evaluate(el => window.getComputedStyle(el).alignItems)
+      expect(justify).toBe('center')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('a layout with no footer prop still shows the credit', async () => {
+    // `NavLayout` used to skip `Footer` entirely when no `footer` prop was passed, which made the
+    // credit disappear from any area layout that never wired footer links. `?footer=none` omits
+    // the prop from the harness's own `NavLayout` call.
+    const { page, close } = await open('/dash?footer=none')
+    try {
+      await page.waitForSelector('#dash')
+      expect(await page.locator('footer a').count()).toBe(0)
+      expect(await page.locator('footer [data-shell-credit]').count()).toBe(1)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
 })
 
 describe('@owlmeans/web-panel — layout rhythm and link styling', () => {