@mostrom/app-shell 0.1.0

package/src/components/layout/AppLayout.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import React from "react";
+import { Menu, Bolt, Settings } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+export interface AppLayoutProps {
+  /** Content for the left navigation panel */
+  navigation?: React.ReactNode;
+  /** Whether the navigation panel is open */
+  navigationOpen?: boolean;
+  /** Callback when navigation open state changes */
+  onNavigationChange?: (open: boolean) => void;
+  /** Hide the navigation panel entirely */
+  navigationHide?: boolean;
+  /** Content for the right tools panel */
+  tools?: React.ReactNode;
+  /** Whether the tools panel is open */
+  toolsOpen?: boolean;
+  /** Callback when tools panel open state changes */
+  onToolsChange?: (open: boolean) => void;
+  /** Hide the tools panel entirely */
+  toolsHide?: boolean;
+  /** Content for the copilot panel */
+  copilot?: React.ReactNode;
+  /** Whether the copilot panel is open */
+  copilotOpen?: boolean;
+  /** Callback when copilot panel open state changes */
+  onCopilotChange?: (open: boolean) => void;
+  /** Hide the copilot button entirely */
+  copilotHide?: boolean;
+  /** Breadcrumbs to display above the content */
+  breadcrumbs?: React.ReactNode;
+  /** Notifications/alerts to display below breadcrumbs */
+  notifications?: React.ReactNode;
+  /** Header content above the main content */
+  contentHeader?: React.ReactNode;
+  /** Main content */
+  content?: React.ReactNode;
+  /** Disable default content padding */
+  disableContentPaddings?: boolean;
+  /** Maximum content width in pixels */
+  maxContentWidth?: number;
+  /** Minimum content width in pixels */
+  minContentWidth?: number;
+  /** Children (alternative to content prop) */
+  children?: React.ReactNode;
+}
+
+const NAVIGATION_WIDTH = 280;
+const TOOLS_WIDTH = 320;
+const COPILOT_WIDTH = 400;
+const HEADER_HEIGHT = 56;
+const SERVICE_BAR_HEIGHT = 56;
+
+/**
+ * AppLayout - A custom layout component replacing Cloudscape's AppLayoutToolbar.
+ *
+ * Layout structure:
+ * ┌──────────────────────────────────────────────────────────────────────┐
+ * │ Service Bar (full width) - nav toggle + breadcrumbs + tools toggle   │
+ * ├──────────────┬───────────────────────────────────────┬───────────────┤
+ * │ Sidebar      │ Content Area                          │ Tools Panel   │
+ * │ (navigation) │ - notifications                       │ (right)       │
+ * │              │ - content header                      │               │
+ * │              │ - main content                        │               │
+ * └──────────────┴───────────────────────────────────────┴───────────────┘
+ */
+export function AppLayout({
+  navigation,
+  navigationOpen = true,
+  onNavigationChange,
+  navigationHide = false,
+  tools,
+  toolsOpen = false,
+  onToolsChange,
+  toolsHide = false,
+  copilot,
+  copilotOpen = false,
+  onCopilotChange,
+  copilotHide = false,
+  breadcrumbs,
+  notifications,
+  contentHeader,
+  content,
+  disableContentPaddings = false,
+  maxContentWidth,
+  minContentWidth,
+  children,
+}: AppLayoutProps) {
+  const mainContent = content ?? children;
+  const showToolsPanel = !toolsHide && tools;
+  const showCopilotButton = !copilotHide;
+
+  const handleToggleNavigation = () => {
+    onNavigationChange?.(!navigationOpen);
+  };
+
+  const handleToggleTools = () => {
+    onToolsChange?.(!toolsOpen);
+  };
+
+  const handleToggleCopilot = () => {
+    onCopilotChange?.(!copilotOpen);
+  };
+
+  return (
+    <div
+      className="flex flex-col overflow-hidden bg-background"
+      style={{ height: `calc(100vh - ${HEADER_HEIGHT}px)` }}
+    >
+      {/* Service Bar - spans full width */}
+      <div
+        className="flex items-center border-b border-border bg-background text-foreground"
+        style={{ height: SERVICE_BAR_HEIGHT, minHeight: SERVICE_BAR_HEIGHT }}
+      >
+        {/* Navigation Toggle Button */}
+        {!navigationHide && (
+          <div className="flex items-center" style={{ paddingLeft: 24, paddingRight: 12 }}>
+            <button
+              type="button"
+              onClick={handleToggleNavigation}
+              className="service-bar-button"
+              aria-label={navigationOpen ? "Close navigation" : "Open navigation"}
+              aria-expanded={navigationOpen}
+            >
+              <Menu className="h-5 w-5" />
+            </button>
+          </div>
+        )}
+
+        {/* Breadcrumbs */}
+        {breadcrumbs && (
+          <div className="flex-1 min-w-0 px-4">
+            {breadcrumbs}
+          </div>
+        )}
+
+        {/* Spacer if no breadcrumbs */}
+        {!breadcrumbs && <div className="flex-1" />}
+
+        {/* Right side buttons container */}
+        <div className="flex items-center gap-1" style={{ paddingLeft: 12, paddingRight: 24 }}>
+          {/* Copilot Toggle Button */}
+          {showCopilotButton && (
+            <button
+              type="button"
+              onClick={handleToggleCopilot}
+              className="service-bar-button"
+              aria-label={copilotOpen ? "Close copilot" : "Open copilot"}
+              aria-expanded={copilotOpen}
+            >
+              <Bolt className="h-5 w-5" />
+            </button>
+          )}
+
+          {/* Tools Toggle Button */}
+          {showToolsPanel && (
+            <button
+              type="button"
+              onClick={handleToggleTools}
+              className="service-bar-button"
+              aria-label={toolsOpen ? "Close tools panel" : "Open tools panel"}
+              aria-expanded={toolsOpen}
+            >
+              <Settings className="h-5 w-5" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Content Area - sidebar + main content + tools panel side by side */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Navigation Panel */}
+        {!navigationHide && (
+          <aside
+            className="flex-shrink-0 bg-sidebar overflow-hidden"
+            style={{
+              width: navigationOpen ? NAVIGATION_WIDTH : 0,
+              borderRight: navigationOpen ? '1px solid #d1d5db' : 'none',
+              transition: 'width 300ms cubic-bezier(0.4, 0, 0.2, 1)'
+            }}
+            aria-hidden={!navigationOpen}
+            {...(!navigationOpen && { inert: true })}
+          >
+            <div
+              className="h-full overflow-y-auto"
+              style={{
+                width: NAVIGATION_WIDTH,
+                opacity: navigationOpen ? 1 : 0,
+                transition: 'opacity 200ms ease-in-out'
+              }}
+            >
+              {navigation}
+            </div>
+          </aside>
+        )}
+
+        {/* Main Content */}
+        <main className="flex-1 overflow-y-auto min-w-0">
+          <div
+            className={cn("mx-auto h-full", !disableContentPaddings && "p-6")}
+            style={{
+              maxWidth: maxContentWidth ? `${maxContentWidth}px` : undefined,
+              minWidth: minContentWidth ? `${minContentWidth}px` : undefined,
+            }}
+          >
+            {/* Notifications */}
+            {notifications && <div className="mb-4">{notifications}</div>}
+
+            {/* Content Header */}
+            {contentHeader && <div className="mb-6">{contentHeader}</div>}
+
+            {/* Main Content */}
+            {mainContent}
+          </div>
+        </main>
+
+        {/* Tools Panel */}
+        {showToolsPanel && (
+          <aside
+            className="flex-shrink-0 bg-sidebar overflow-hidden"
+            style={{
+              width: toolsOpen ? TOOLS_WIDTH : 0,
+              borderLeft: toolsOpen ? '1px solid #d1d5db' : 'none',
+              transition: 'width 300ms cubic-bezier(0.4, 0, 0.2, 1)'
+            }}
+            aria-hidden={!toolsOpen}
+            {...(!toolsOpen && { inert: true })}
+          >
+            <div
+              className="h-full overflow-y-auto"
+              style={{
+                width: TOOLS_WIDTH,
+                opacity: toolsOpen ? 1 : 0,
+                transition: 'opacity 200ms ease-in-out'
+              }}
+            >
+              {tools}
+            </div>
+          </aside>
+        )}
+
+        {/* Copilot Panel */}
+        {showCopilotButton && (
+          <aside
+            className="flex-shrink-0 bg-sidebar overflow-hidden"
+            style={{
+              width: copilotOpen ? COPILOT_WIDTH : 0,
+              borderLeft: copilotOpen ? '1px solid #d1d5db' : 'none',
+              transition: 'width 300ms cubic-bezier(0.4, 0, 0.2, 1)'
+            }}
+            aria-hidden={!copilotOpen}
+            {...(!copilotOpen && { inert: true })}
+          >
+            <div
+              className="h-full overflow-y-auto"
+              style={{
+                width: COPILOT_WIDTH,
+                opacity: copilotOpen ? 1 : 0,
+                transition: 'opacity 200ms ease-in-out'
+              }}
+            >
+              {copilot}
+            </div>
+          </aside>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/layout/AppNavigation.tsx

@@ -0,0 +1,313 @@
+import React from "react";
+import { ChevronLeft } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+/** Base navigation item with common properties */
+interface BaseNavigationItem {
+  /** Optional info or additional content */
+  info?: React.ReactNode;
+}
+
+/** A link item in the navigation */
+export interface NavigationLinkItem extends BaseNavigationItem {
+  type: "link";
+  /** Display text for the link */
+  text: string;
+  /** URL the link points to */
+  href?: string;
+  /** Whether link opens in a new tab */
+  external?: boolean;
+  /** Nested link items */
+  items?: ReadonlyArray<NavigationLinkItem>;
+}
+
+/** A divider line between navigation items */
+export interface NavigationDividerItem {
+  type: "divider";
+}
+
+/** A section with a title and nested items */
+export interface NavigationSectionItem extends BaseNavigationItem {
+  type: "section";
+  /** Section title */
+  text?: string;
+  /** Items in this section */
+  items?: ReadonlyArray<NavigationItem>;
+  /** Default expanded state */
+  defaultExpanded?: boolean;
+}
+
+/** A group of sections */
+export interface NavigationSectionGroupItem extends BaseNavigationItem {
+  type: "section-group";
+  /** Group title */
+  title?: string;
+  /** Items in this group */
+  items?: ReadonlyArray<NavigationItem>;
+}
+
+/** An expandable group of links */
+export interface NavigationExpandableLinkGroupItem extends BaseNavigationItem {
+  type: "expandable-link-group";
+  /** Group title */
+  text?: string;
+  /** URL for the group header */
+  href?: string;
+  /** Items in this group */
+  items?: ReadonlyArray<NavigationItem>;
+  /** Default expanded state */
+  defaultExpanded?: boolean;
+}
+
+/** Union of all navigation item types */
+export type NavigationItem =
+  | NavigationLinkItem
+  | NavigationDividerItem
+  | NavigationSectionItem
+  | NavigationSectionGroupItem
+  | NavigationExpandableLinkGroupItem;
+
+/** Detail passed to onFollow callback */
+export interface NavigationFollowDetail {
+  href: string;
+  external: boolean;
+}
+
+/** Event passed to onFollow callback */
+export interface NavigationFollowEvent {
+  detail: NavigationFollowDetail;
+  preventDefault: () => void;
+  stopPropagation: () => void;
+}
+
+export interface AppNavigationProps {
+  /** Service name displayed in the header */
+  serviceName: string;
+  /** Link destination when clicking the service name */
+  headerHref?: string;
+  /** Navigation items for the sidebar */
+  items?: ReadonlyArray<NavigationItem>;
+  /** Currently active navigation item href for highlighting */
+  activeHref?: string;
+  /** Callback when a navigation item is clicked */
+  onFollow?: (event: NavigationFollowEvent) => void;
+  /** Callback when the close button is clicked */
+  onClose?: () => void;
+  /** Additional className for the navigation */
+  className?: string;
+  /** Base path to prepend to all internal hrefs (e.g., "/demo") */
+  basePath?: string;
+}
+
+/**
+ * AppNavigation - A navigation component that provides Cloudscape-compatible API
+ * using Tailwind styling. Designed to work within AppLayout's navigation slot.
+ */
+export function AppNavigation({
+  serviceName,
+  headerHref = "#",
+  items = [],
+  activeHref,
+  onFollow,
+  onClose,
+  className,
+  basePath = "",
+}: AppNavigationProps) {
+  /**
+   * Resolves a href by prepending the basePath for internal links.
+   * External links and anchors (#) are returned unchanged.
+   */
+  const resolveHref = (href: string | undefined, external?: boolean): string => {
+    if (!href) return "#";
+    // Don't modify external links, anchors, or absolute URLs
+    if (external || href === "#" || href.startsWith("http://") || href.startsWith("https://")) {
+      return href;
+    }
+    // Don't double-prepend if href already starts with basePath
+    if (basePath && href.startsWith(basePath)) {
+      return href;
+    }
+    // Prepend basePath for internal links
+    if (basePath && href.startsWith("/")) {
+      return `${basePath}${href}`;
+    }
+    return href;
+  };
+
+  const handleClick = (
+    event: React.MouseEvent,
+    item: { href?: string; external?: boolean }
+  ) => {
+    if (onFollow) {
+      const followEvent: NavigationFollowEvent = {
+        detail: {
+          href: item.href ?? "",
+          external: item.external ?? false,
+        },
+        preventDefault: () => event.preventDefault(),
+        stopPropagation: () => event.stopPropagation(),
+      };
+      onFollow(followEvent);
+    }
+  };
+
+  const renderItem = (item: NavigationItem, index: number): React.ReactNode => {
+    if (item.type === "divider") {
+      return (
+        <div
+          key={`divider-${index}`}
+          className="my-2 h-px bg-border"
+        />
+      );
+    }
+
+    if (item.type === "section") {
+      return (
+        <div key={`section-${index}`} className="mb-4">
+          {item.text && (
+            <div className="mb-2 px-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+              {item.text}
+            </div>
+          )}
+          <ul className="space-y-1">
+            {item.items?.map((subItem, subIndex) =>
+              renderItem(subItem, subIndex)
+            )}
+          </ul>
+        </div>
+      );
+    }
+
+    if (item.type === "section-group") {
+      return (
+        <div key={`section-group-${index}`} className="mb-4">
+          {item.title && (
+            <div className="mb-2 px-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+              {item.title}
+            </div>
+          )}
+          <ul className="space-y-1">
+            {item.items?.map((subItem, subIndex) =>
+              renderItem(subItem, subIndex)
+            )}
+          </ul>
+        </div>
+      );
+    }
+
+    if (item.type === "link") {
+      const isActive = activeHref === item.href;
+
+      if (item.items && item.items.length > 0) {
+        return (
+          <li key={`link-${index}`}>
+            <a
+              href={resolveHref(item.href, item.external)}
+              onClick={(e) => handleClick(e, item)}
+              target={item.external ? "_blank" : undefined}
+              rel={item.external ? "noopener noreferrer" : undefined}
+              className={cn(
+                "flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors",
+                "hover:bg-accent hover:text-accent-foreground",
+                isActive && "bg-accent text-accent-foreground font-medium"
+              )}
+            >
+              {item.text}
+            </a>
+            <ul className="ml-4 mt-1 space-y-1 border-l border-border pl-2">
+              {item.items.map((subItem, subIndex) => {
+                const isSubActive = activeHref === subItem.href;
+                return (
+                  <li key={`sublink-${subIndex}`}>
+                    <a
+                      href={resolveHref(subItem.href, subItem.external)}
+                      onClick={(e) => handleClick(e, subItem)}
+                      target={subItem.external ? "_blank" : undefined}
+                      rel={subItem.external ? "noopener noreferrer" : undefined}
+                      className={cn(
+                        "flex items-center gap-2 rounded-md px-3 py-1.5 text-sm transition-colors",
+                        "hover:bg-accent hover:text-accent-foreground",
+                        isSubActive && "bg-accent text-accent-foreground font-medium"
+                      )}
+                    >
+                      {subItem.text}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          </li>
+        );
+      }
+
+      return (
+        <li key={`link-${index}`}>
+          <a
+            href={resolveHref(item.href, item.external)}
+            onClick={(e) => handleClick(e, item)}
+            target={item.external ? "_blank" : undefined}
+            rel={item.external ? "noopener noreferrer" : undefined}
+            className={cn(
+              "flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors",
+              "hover:bg-accent hover:text-accent-foreground",
+              isActive && "bg-accent text-accent-foreground font-medium"
+            )}
+          >
+            {item.text}
+          </a>
+        </li>
+      );
+    }
+
+    if (item.type === "expandable-link-group") {
+      return (
+        <div key={`expandable-${index}`} className="mb-4">
+          {item.text && (
+            <div className="mb-2 px-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+              {item.text}
+            </div>
+          )}
+          <ul className="space-y-1">
+            {item.items?.map((subItem, subIndex) =>
+              renderItem(subItem, subIndex)
+            )}
+          </ul>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <nav className={cn("flex flex-col h-full", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-4">
+        <a
+          href={resolveHref(headerHref)}
+          onClick={(e) => handleClick(e, { href: headerHref })}
+          className="block px-3 text-lg font-bold text-foreground hover:text-foreground/80 transition-colors"
+        >
+          {serviceName}
+        </a>
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            className="service-bar-button"
+            aria-label="Close sidebar"
+          >
+            <ChevronLeft className="h-5 w-5" />
+          </button>
+        )}
+      </div>
+
+      {/* Navigation Items */}
+      <div className="flex-1 overflow-y-auto px-4 py-2">
+        <ul className="space-y-1">
+          {items.map((item, index) => renderItem(item, index))}
+        </ul>
+      </div>
+    </nav>
+  );
+}