@pattern-stack/frontend-patterns 0.2.0-alpha.12 → 0.2.0-alpha.14

package/CHANGELOG.md

@@ -7,6 +7,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.0-alpha.14]
+
+### Fixed
+- **`Button` no longer wraps `children` in a `<span>`** when `iconOnlyMobile` is false. The previous unconditional `<span>` (default `display: inline`) broke the parent `inline-flex` layout for any consumer passing multiple children — block-level children inside the inline span would stack vertically instead of sitting beside their siblings. Most visible victim: `SidebarButton`, whose expanded items rendered the icon centered ABOVE the label instead of horizontally next to it. The wrapper `<span>` is now only emitted when `iconOnlyMobile` is true (its sole purpose — applying `hidden sm:inline`); otherwise children are rendered directly so they participate in the button's flex layout.
+
+## [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/atoms/components/core/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/core/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,WAAW,IAAI,aAAa,EAClC,MAAM,4BAA4B,CAAC;AAKpC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;IAClE,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,mCAAmC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kCAAkC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,uFAiDlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/core/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,WAAW,IAAI,aAAa,EAClC,MAAM,4BAA4B,CAAC;AAKpC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;IAClE,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,mCAAmC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kCAAkC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,uFAkDlB,CAAC"}

package/dist/index.es.js

@@ -4121,7 +4121,7 @@ const Button = React__default.forwardRef(
         children: [
           loading && /* @__PURE__ */ jsx(Spinner$1, { className: "w-4 h-4 mr-2" }),
           !loading && icon && /* @__PURE__ */ jsx("span", { className: cn("inline-flex shrink-0", children && "mr-2"), children: icon }),
-          children && /* @__PURE__ */ jsx("span", { className: cn(iconOnlyMobile && "hidden sm:inline"), children }),
+          children && (iconOnlyMobile ? /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children }) : /* @__PURE__ */ jsx(Fragment, { children })),
           !loading && iconAfter && /* @__PURE__ */ jsx("span", { className: cn("inline-flex shrink-0", children && "ml-2"), children: iconAfter })
         ]
       }
@@ -10650,7 +10650,7 @@ const SidebarButton = ({
     }
   );
 };
-const Sidebar = ({ className }) => {
+const Sidebar = ({ className, footer }) => {
   const { isExpanded, toggleSidebar } = useSidebar();
   const { navigation } = useNavigation();
   const location = useLocation();
@@ -10724,35 +10724,23 @@ 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
+              }
+            )
           }
         )
       ]
@@ -10766,9 +10754,9 @@ const AppHeader = ({
   className,
   branding,
   searchPlaceholder = "Search models, tests, jobs, and components...",
-  showSearch = true,
-  showUserMenu = true,
-  showConnectionStatus = true
+  showSearch = false,
+  showUserMenu = false,
+  showConnectionStatus = false
 }) => {
   const isTrialMode = false;
   const brandingNode = (() => {
@@ -10797,7 +10785,7 @@ const AppHeader = ({
       ),
       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__ */ jsx("div", { className: "flex items-center gap-3", children: brandingNode }),
-        showSearch && /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-2xl mx-8", children: /* @__PURE__ */ jsx(GlobalSearch, { className: "w-full", placeholder: searchPlaceholder }) }),
+        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: [
           showConnectionStatus && /* @__PURE__ */ jsx(ConnectionStatus, {}),
           showUserMenu && /* @__PURE__ */ jsx(UserMenu, { category: 8 })
@@ -10806,12 +10794,12 @@ const AppHeader = ({
     }
   );
 };
-const AppLayout = ({ header } = {}) => {
+const AppLayout = ({ header, sidebar } = {}) => {
   const { isExpanded } = useSidebar();
   const hideHeader = header === false;
   return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-background", children: [
     !hideHeader && /* @__PURE__ */ jsx(AppHeader, { ...header ?? {} }),
-    /* @__PURE__ */ jsx(Sidebar, {}),
+    /* @__PURE__ */ jsx(Sidebar, { footer: sidebar == null ? void 0 : sidebar.footer }),
     /* @__PURE__ */ jsx(
       "main",
       {
@@ -15620,6 +15608,7 @@ function createReactApp(config) {
     navigation,
     customProviders = [],
     header,
+    sidebar,
     persistQueryCache = false,
     queryCacheKey = "PATTERN_STACK_QUERY_CACHE"
   } = appConfig;
@@ -15715,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, { header }), 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, {}));