@djangocfg/layouts 2.1.511 → 2.1.513

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.511",
+  "version": "2.1.513",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.511",
-    "@djangocfg/api": "^2.1.511",
-    "@djangocfg/centrifugo": "^2.1.511",
-    "@djangocfg/devtools": "^2.1.511",
-    "@djangocfg/i18n": "^2.1.511",
-    "@djangocfg/ui-core": "^2.1.511",
+    "@djangocfg/analytics": "^2.1.513",
+    "@djangocfg/api": "^2.1.513",
+    "@djangocfg/centrifugo": "^2.1.513",
+    "@djangocfg/devtools": "^2.1.513",
+    "@djangocfg/i18n": "^2.1.513",
+    "@djangocfg/ui-core": "^2.1.513",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -124,14 +124,14 @@
     "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.511",
-    "@djangocfg/api": "^2.1.511",
-    "@djangocfg/centrifugo": "^2.1.511",
-    "@djangocfg/devtools": "^2.1.511",
-    "@djangocfg/i18n": "^2.1.511",
-    "@djangocfg/typescript-config": "^2.1.511",
-    "@djangocfg/ui-core": "^2.1.511",
-    "@djangocfg/ui-tools": "^2.1.511",
+    "@djangocfg/analytics": "^2.1.513",
+    "@djangocfg/api": "^2.1.513",
+    "@djangocfg/centrifugo": "^2.1.513",
+    "@djangocfg/devtools": "^2.1.513",
+    "@djangocfg/i18n": "^2.1.513",
+    "@djangocfg/typescript-config": "^2.1.513",
+    "@djangocfg/ui-core": "^2.1.513",
+    "@djangocfg/ui-tools": "^2.1.513",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/components/errors/ErrorLayout.tsx

@@ -39,6 +39,20 @@ export interface ErrorLayoutProps {
   illustration?: React.ReactNode;
   /** Support email for contact link */
   supportEmail?: string;
+  /**
+   * Public service-status page (e.g. `https://status.example.com`).
+   *
+   * Rendered as a secondary recovery link beside the support line, answering
+   * the question a 500 actually raises — "is it me or is it them?". No default:
+   * this package is generic, so the URL belongs to the consuming product, and
+   * an app that passes nothing gets exactly the previous behaviour.
+   *
+   * Pass this ONLY on server-fault pages (500/502/503/504, `global-error`).
+   * Not on a 404: telling someone who mistyped a URL to check whether our
+   * servers are down is noise, and it teaches people to ignore the link when
+   * it finally matters.
+   */
+  statusUrl?: string;
 }
 
 /**
@@ -230,6 +244,7 @@ export function ErrorLayout({
   showDefaultActions = true,
   illustration,
   supportEmail = 'support@example.com',
+  statusUrl,
 }: ErrorLayoutProps) {
   const t = useAppT();
 
@@ -238,6 +253,7 @@ export function ErrorLayout({
     goHome: t('layouts.errors.goHome'),
     needHelp: t('layouts.errors.needHelp'),
     contactSupport: t('layouts.errors.contactSupport'),
+    checkStatus: t('layouts.errors.checkStatus'),
     error: t('layouts.errors.error'),
   }), [t]);
 
@@ -319,7 +335,14 @@ export function ErrorLayout({
           )}
         </div>
 
-        {/* Additional Info */}
+        {/* Additional Info
+          *
+          * Both links are TERTIARY on purpose. The visitor's one real intent on
+          * an error page is to get back to what they were doing, which is what
+          * the buttons above serve; a third equal-weight button would make the
+          * common case harder in order to serve the rare one. The status link
+          * answers a secondary question for whoever is asking it, and is quiet
+          * for everyone else. */}
         <div className="pt-8 text-sm text-muted-foreground">
           <p>
             {labels.needHelp}{' '}
@@ -330,6 +353,37 @@ export function ErrorLayout({
               {labels.contactSupport}
             </a>
           </p>
+
+          {statusUrl && (
+            <p className="mt-2">
+              <a
+                href={statusUrl}
+                target="_blank"
+                rel="noreferrer noopener"
+                className="inline-flex items-center gap-1.5 text-primary hover:underline"
+              >
+                {labels.checkStatus}
+                {/* Inline SVG, not an icon package. `ErrorLayout` renders inside
+                  * Next.js error boundaries where the tree is partially blown
+                  * out and a provider-dependent icon runtime may fail to
+                  * resolve — see the glyph note above. */}
+                <svg
+                  className="size-3.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={1.5}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M14 5h5v5" />
+                  <path d="M19 5l-8 8" />
+                  <path d="M18 14v4.5A1.5 1.5 0 0 1 16.5 20h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H10" />
+                </svg>
+              </a>
+            </p>
+          )}
         </div>
       </div>
     </div>

package/src/components/errors/README.md

@@ -16,6 +16,32 @@ All boundaries here build on the single `Boundary` primitive in
 | `ErrorLayout.tsx` | Full-page error layout (`getErrorContent` / `ERROR_CODES`). |
 | `ErrorsTracker/` | Global runtime tracker — listens for error CustomEvents and shows toasts. |
 
+## ErrorLayout — `statusUrl`
+
+`ErrorLayout` takes an optional `statusUrl`, rendered as a secondary link beside
+the support line (`layouts.errors.checkStatus`). It answers the question a 500
+actually raises — *is it me or is it them?*
+
+```tsx
+<ErrorLayout code={500} supportEmail={…} statusUrl="https://status.example.com" />
+```
+
+There is **no default**: this package is generic, so the URL belongs to the
+consuming product. Omit it and the link does not render.
+
+Two rules:
+
+- **Server faults only** (500/502/503/504, `global-error`). Never on a 404 —
+  sending someone who mistyped a URL to check for an outage is noise, and it
+  teaches people to ignore the link when it matters.
+- **Never fetch it to show status inline.** An error page renders when the
+  infrastructure is already unhealthy, so that request is the least likely to
+  succeed — and a failed one would either reassure falsely or raise a second
+  error inside the first. A link always works.
+
+This is a *user-facing recovery* path. `ErrorsTracker` below is the
+*developer-facing debugging* path. Different audiences — keep them apart.
+
 ## ErrorsTracker
 
 `ErrorTrackingProvider` listens on `window` for typed error events dispatched by