From 982e8840f0c03cccb90bf304857f8aac361c4f41 Mon Sep 17 00:00:00 2001
From: venwork-dev <victorwork24@yahoo.com>
Date: Sun, 22 Feb 2026 20:37:01 -0600
Subject: [PATCH] refactor(App.svelte): replace brand-shell usage with specific
 BrandHeader and BrandFooter components

---
 .changeset/hungry-snakes-stay.md   |  5 +++
 starters/svelte-npm/src/App.svelte | 51 +++++++++++++++---------------
 2 files changed, 30 insertions(+), 26 deletions(-)
 create mode 100644 .changeset/hungry-snakes-stay.md

diff --git a/.changeset/hungry-snakes-stay.md b/.changeset/hungry-snakes-stay.md
new file mode 100644
index 0000000..f59a325
--- /dev/null
+++ b/.changeset/hungry-snakes-stay.md
@@ -0,0 +1,5 @@
+---
+"brand-shell": patch
+---
+
+replace brand-shell usage with specific BrandHeader and BrandFooter components
diff --git a/starters/svelte-npm/src/App.svelte b/starters/svelte-npm/src/App.svelte
index 9fceb4b..56adcdb 100644
--- a/starters/svelte-npm/src/App.svelte
+++ b/starters/svelte-npm/src/App.svelte
@@ -1,37 +1,36 @@
 <script>
-  import { brandShell } from "brand-shell/svelte";
+  import { BrandHeader, BrandFooter } from "brand-shell/svelte";
   import "brand-shell/default.css";
 
-  const shellProps = {
-    details: {
-      name: "Brand Shell",
-      homeHref: "/",
-      navLinks: [
-        { label: "Docs", href: "/docs" },
-        { label: "Blog", href: "/blog" }
-      ],
-      primaryAction: { label: "Contact", href: "mailto:hello@example.com" },
-      secondaryAction: {
-        label: "Storybook",
-        href: "https://6992723e39539a58d711f188-ceiwmlxyrh.chromatic.com/",
-        target: "_blank"
-      },
-      github: "https://github.com/venwork-dev/brand-shell",
-      linkedin: "https://linkedin.com/in/example",
-      email: "hello@example.com",
-      tagline: "Starter app validating npm package publish output."
+  const details = {
+    name: "Brand Shell",
+    homeHref: "/",
+    navLinks: [
+      { label: "Docs", href: "/docs" },
+      { label: "Blog", href: "/blog" }
+    ],
+    primaryAction: { label: "Contact", href: "mailto:hello@example.com" },
+    secondaryAction: {
+      label: "Storybook",
+      href: "https://6992723e39539a58d711f188-ceiwmlxyrh.chromatic.com/",
+      target: "_blank"
     },
-    theme: {
-      primaryColor: "#2563eb",
-      backgroundColor: "#0f172a",
-      textColor: "#f8fafc"
-    }
+    github: "https://github.com/venwork-dev/brand-shell",
+    linkedin: "https://linkedin.com/in/example",
+    email: "hello@example.com",
+    tagline: "Starter app validating npm package publish output."
+  };
+
+  const theme = {
+    primaryColor: "#2563eb",
+    backgroundColor: "#0f172a",
+    textColor: "#f8fafc"
   };
 </script>
 
-<brand-header use:brandShell={shellProps}></brand-header>
+<BrandHeader {details} {theme} />
 <main style="padding: 1rem;">
   <h1 style="margin: 0; font-size: 1.25rem;">Starter smoke (Svelte)</h1>
   <p style="margin-top: 0.5rem;">This app validates the published npm artifact through the Svelte adapter.</p>
 </main>
-<brand-footer use:brandShell={shellProps}></brand-footer>
+<BrandFooter {details} {theme} />