From 95b762518b35c3767036f013e2e74554a6580689 Mon Sep 17 00:00:00 2001
From: cylewaitforit <cyle@cylewaitfor.it>
Date: Mon, 20 Apr 2026 10:38:16 -0500
Subject: [PATCH 1/3] docs(ui): add stories for Error page

---
 app/error.stories.ts | 79 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 app/error.stories.ts

diff --git a/app/error.stories.ts b/app/error.stories.ts
new file mode 100644
index 0000000000..8831a1ca98
--- /dev/null
+++ b/app/error.stories.ts
@@ -0,0 +1,79 @@
+import Error from './error.vue'
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import type { NuxtError } from '#app'
+
+const meta = {
+  title: 'pages/error',
+  component: Error,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Error>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Package, org, or page not found. */
+export const NotFound: Story = {
+  args: {
+    error: {
+      status: 404,
+    } as NuxtError,
+  },
+}
+
+/** Unauthorized access - shown when authentication is required. */
+export const Unauthorized: Story = {
+  args: {
+    error: {
+      status: 401,
+    } as NuxtError,
+  },
+}
+
+/** Generic server error with default message. */
+export const ServerError: Story = {
+  args: {
+    error: {
+      status: 500,
+    } as NuxtError,
+  },
+}
+
+/** Bad gateway - occurs when external services (jsDelivr, npm registry) fail. */
+export const BadGateway: Story = {
+  args: {
+    error: {
+      status: 502,
+    } as NuxtError,
+  },
+}
+
+export const Teapot: Story = {
+  args: {
+    error: {
+      status: 418,
+    } as NuxtError,
+  },
+}
+
+/** Error with a message. */
+export const WithMessage: Story = {
+  args: {
+    error: {
+      status: 404,
+      message: 'The page you are looking for does not exist.',
+    } as NuxtError,
+  },
+}
+
+/** Error with a detailed message to test text wrapping and layout. */
+export const LongMessage: Story = {
+  args: {
+    error: {
+      status: 500,
+      message:
+        'An unexpected error occurred while processing your request. Our team has been notified and is working to resolve the issue. Please try again in a few moments.',
+    } as NuxtError,
+  },
+}

From bdc6bc432a76bae5216497889879d7fc3ad3e9da Mon Sep 17 00:00:00 2001
From: cylewaitforit <cyle@cylewaitfor.it>
Date: Mon, 20 Apr 2026 10:56:17 -0500
Subject: [PATCH 2/3] fix: 503

---
 app/error.stories.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/error.stories.ts b/app/error.stories.ts
index 8831a1ca98..3689a779ec 100644
--- a/app/error.stories.ts
+++ b/app/error.stories.ts
@@ -40,11 +40,11 @@ export const ServerError: Story = {
   },
 }
 
-/** Bad gateway - occurs when external services (jsDelivr, npm registry) fail. */
-export const BadGateway: Story = {
+/** Service unavailable - occurs when external services (jsDelivr, npm registry) fail. */
+export const ServiceUnavailable: Story = {
   args: {
     error: {
-      status: 502,
+      status: 503,
     } as NuxtError,
   },
 }

From 3ae631c6fc7b5c9c46adc466c607235ed41dbbcc Mon Sep 17 00:00:00 2001
From: cylewaitforit <cyle@cylewaitfor.it>
Date: Mon, 20 Apr 2026 10:57:29 -0500
Subject: [PATCH 3/3] Update app/error.stories.ts

Co-authored-by: Willow (GHOST) <ghostdevbusiness@gmail.com>
---
 app/error.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/error.stories.ts b/app/error.stories.ts
index 3689a779ec..993064b9b5 100644
--- a/app/error.stories.ts
+++ b/app/error.stories.ts
@@ -73,7 +73,7 @@ export const LongMessage: Story = {
     error: {
       status: 500,
       message:
-        'An unexpected error occurred while processing your request. Our team has been notified and is working to resolve the issue. Please try again in a few moments.',
+        'Internal server error. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique ex ac nisi dapibus maximus. Curabitur feugiat lorem eros, sed eleifend purus facilisis at.',
     } as NuxtError,
   },
 }