@pattern-stack/frontend-patterns 0.2.0-alpha.11 → 0.2.0-alpha.13

package/CHANGELOG.md

@@ -7,6 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.0-alpha.13]
+
+### Changed
+- **AppHeader defaults are now opt-in** (BREAKING):
+  - `showSearch`, `showUserMenu`, and `showConnectionStatus` now all default to `false`.
+  - The global search slot was previously rendered by default but is non-trivial to wire and looks broken when it's a no-op in consumer apps. Consumers must now explicitly pass `showSearch`, `showUserMenu`, or `showConnectionStatus` to enable each slot.
+  - **Migration**: if your app relied on these slots appearing automatically, pass `header={{ showSearch: true, showUserMenu: true, showConnectionStatus: true }}` (or whichever subset you need) when constructing `<AppLayout>` / `createReactApp`.
+- **AppHeader search width reduced** when shown: `max-w-2xl` → `max-w-md`. The full-width search bar dominated the header; the trimmer width sits comfortably between branding and the right-hand cluster.
+
+### Added
+- **`Sidebar` `footer` prop**: pass any `ReactNode` to render in the sidebar footer slot. When omitted, the entire footer (and its top border) is not rendered — no empty space.
+- **`AppLayoutProps.sidebar`**: new `{ footer?: ReactNode }` prop on `<AppLayout>`, plumbed through to `<Sidebar>`.
+- **`AppConfig.sidebar`**: `createReactApp` now accepts a `sidebar: { footer }` config that mirrors the existing `header` plumbing.
+
+### Fixed
+- **`createReactApp` no longer leaks the built-in `<DefaultHome />` placeholder** to consumer apps that have registered their own routes. The "✅ Template integration successful" / "🌿 {title}" landing page used to win the `/` index route even when a consumer called `addRoutes('/', ...)`. `DefaultHome` is now only rendered in the zero-config case — when the consumer has not registered any routes at all.
+
+### Removed
+- **Hardcoded "AloeVera v1.0" / "v1.0" sidebar footer text**. The sidebar no longer ships with template branding; consumers supply their own footer node (or none).
+
 ### Fixed
 - **TypeScript Build Errors**: Resolved all TypeScript compilation errors across codegen and auth modules
   - Added missing type imports in OpenAPI codegen (`ParsedParameter`, `ClientGeneratorOptions`)

package/dist/index.es.js

@@ -10650,7 +10650,7 @@ const SidebarButton = ({
     }
   );
 };
-const Sidebar = ({ className }) => {
+const Sidebar = ({ className, footer }) => {
   const { isExpanded, toggleSidebar } = useSidebar();
   const { navigation } = useNavigation();
   const location = useLocation();
@@ -10724,42 +10724,56 @@ const Sidebar = ({ className }) => {
             item.value
           );
         }) }),
-        /* @__PURE__ */ jsx(
+        footer != null && /* @__PURE__ */ jsx(
           "div",
           {
             className: cn("p-4 border-t border-border", !isExpanded && "px-3"),
             "data-component-name": "SidebarFooter",
-            children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "text-xs text-muted-foreground text-center",
-                    "absolute inset-0 transition-opacity duration-200 ease-out",
-                    !isExpanded ? "opacity-100" : "opacity-0"
-                  ),
-                  children: "v1.0"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "text-xs text-muted-foreground whitespace-nowrap",
-                    "transition-opacity duration-200 ease-out",
-                    isExpanded ? "opacity-100" : "opacity-0"
-                  ),
-                  children: "AloeVera v1.0"
-                }
-              )
-            ] })
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "text-xs text-muted-foreground",
+                  "transition-opacity duration-200 ease-out",
+                  isExpanded ? "opacity-100" : "opacity-70",
+                  !isExpanded && "text-center"
+                ),
+                children: footer
+              }
+            )
           }
         )
       ]
     }
   );
 };
-const AppHeader = ({ className }) => {
+function isBrandingObject(v) {
+  return v != null && typeof v === "object" && !React__default.isValidElement(v) && "title" in v;
+}
+const AppHeader = ({
+  className,
+  branding,
+  searchPlaceholder = "Search models, tests, jobs, and components...",
+  showSearch = false,
+  showUserMenu = false,
+  showConnectionStatus = false
+}) => {
+  const isTrialMode = false;
+  const brandingNode = (() => {
+    if (branding == null) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold text-foreground", children: "Frontend Template" }),
+        isTrialMode
+      ] });
+    }
+    if (isBrandingObject(branding)) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold text-foreground", children: branding.title }),
+        branding.badge
+      ] });
+    }
+    return branding;
+  })();
   return /* @__PURE__ */ jsx(
     "header",
     {
@@ -10770,35 +10784,28 @@ const AppHeader = ({ className }) => {
         className
       ),
       children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold text-foreground", children: "Frontend Template" }),
-          /* @__PURE__ */ jsx(DataBadge, { variant: "status", status: "info", display: "icon-text", children: "Trial Mode" })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-2xl mx-8", children: /* @__PURE__ */ jsx(
-          GlobalSearch,
-          {
-            className: "w-full",
-            placeholder: "Search models, tests, jobs, and components..."
-          }
-        ) }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: brandingNode }),
+        showSearch && /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-md mx-8", children: /* @__PURE__ */ jsx(GlobalSearch, { className: "w-full", placeholder: searchPlaceholder }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
-          /* @__PURE__ */ jsx(ConnectionStatus, {}),
-          /* @__PURE__ */ jsx(UserMenu, { category: 8 })
+          showConnectionStatus && /* @__PURE__ */ jsx(ConnectionStatus, {}),
+          showUserMenu && /* @__PURE__ */ jsx(UserMenu, { category: 8 })
         ] })
       ] }) })
     }
   );
 };
-const AppLayout = () => {
+const AppLayout = ({ header, sidebar } = {}) => {
   const { isExpanded } = useSidebar();
+  const hideHeader = header === false;
   return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-background", children: [
-    /* @__PURE__ */ jsx(AppHeader, {}),
-    /* @__PURE__ */ jsx(Sidebar, {}),
+    !hideHeader && /* @__PURE__ */ jsx(AppHeader, { ...header ?? {} }),
+    /* @__PURE__ */ jsx(Sidebar, { footer: sidebar == null ? void 0 : sidebar.footer }),
     /* @__PURE__ */ jsx(
       "main",
       {
         className: cn(
-          "pt-16 min-h-screen transition-all duration-300 ease-in-out",
+          "min-h-screen transition-all duration-300 ease-in-out",
+          hideHeader ? "" : "pt-16",
           isExpanded ? "ml-64" : "ml-16"
         ),
         children: /* @__PURE__ */ jsx(Outlet, {})
@@ -15600,6 +15607,8 @@ function createReactApp(config) {
     auth,
     navigation,
     customProviders = [],
+    header,
+    sidebar,
     persistQueryCache = false,
     queryCacheKey = "PATTERN_STACK_QUERY_CACHE"
   } = appConfig;
@@ -15695,8 +15704,10 @@ function createReactApp(config) {
         }
         return component;
       };
-      const AppContent = () => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen", children: "Loading..." }), children: /* @__PURE__ */ jsx(Routes, { children: /* @__PURE__ */ jsxs(Route, { path: "/", element: /* @__PURE__ */ jsx(AppLayout, {}), children: [
-        /* @__PURE__ */ jsx(Route, { index: true, element: wrapWithProtection("/", /* @__PURE__ */ jsx(DefaultHome, {})) }),
+      const consumerHasRoot = routes.some((r) => r.path === "/");
+      const showDefaultHome = routes.length === 0;
+      const AppContent = () => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen", children: "Loading..." }), children: /* @__PURE__ */ jsx(Routes, { children: /* @__PURE__ */ jsxs(Route, { path: "/", element: /* @__PURE__ */ jsx(AppLayout, { header, sidebar }), children: [
+        showDefaultHome && !consumerHasRoot && /* @__PURE__ */ jsx(Route, { index: true, element: wrapWithProtection("/", /* @__PURE__ */ jsx(DefaultHome, {})) }),
         routes.map(({ path, component }, index) => /* @__PURE__ */ jsx(Route, { path, element: wrapWithProtection(path, component) }, index))
       ] }) }) });
       return createProviderTree(/* @__PURE__ */ jsx(AppContent, {}));