@mostrom/app-shell 0.1.2 → 0.1.3

package/README.md

@@ -1,6 +1,6 @@
 # App Shell
 
-Shared Cloudscape-based layout shell used by all platform services. Mirrors the AWS Console layout pattern.
+Shared layout shell used by all platform services. Provides a consistent layout pattern with global header, service navigation, and content areas.
 
 ## Publishing to npm
 
@@ -33,11 +33,24 @@ npm run publish:npm -- --tag next
 
 The script reads `NODE_AUTH_TOKEN` from environment variables, and also checks `app-shell/.env` for that key. It stores the last successful version in `scripts/.publish-version` and auto-increments patch versions on subsequent runs.
 
+No init script is shipped in the published package.
+
 ## Quick Start
 
 ### Setup (No Init Script)
 
-App setup is now file-based and does not require running an init command.
+App setup is file-based and does not require running an init command.
+
+Install using npm aliases so existing imports stay as `@platform/*`:
+
+```json
+{
+  "dependencies": {
+    "@platform/app-shell": "npm:@mostrom/app-shell@latest",
+    "@platform/service-catalog": "npm:@mostrom/service-catalog@latest"
+  }
+}
+```
 
 Required app files:
 
@@ -82,66 +95,55 @@ Required app files:
 +--------+-----------------------------------------+---------------+
 ```
 
-## Component Map (Cloudscape)
-
-### Global Header (top-most, full width)
-
-Cloudscape `TopNavigation`.
-
-| Position | Element  | Cloudscape Component                                   | Behavior               |
-| -------- | -------- | ------------------------------------------------------ | ---------------------- |
-| Left     | Logo     | `TopNavigation` `identity`                             | Navigate to home       |
-| Center   | Search   | `TopNavigation` `search` with `Input` or `Autosuggest` | Global search          |
-| Right    | Apps     | `TopNavigation` utility with `Icon` `grid-view`        | Opens dropdown (empty) |
-| Right    | Settings | `TopNavigation` utility with `Icon` `settings`         | Opens dropdown (empty) |
-| Right    | User     | `TopNavigation` utility with `Icon` `user-profile`     | User menu              |
+## UI Components
 
-### Service Header (below Global Header, full width)
+App Shell provides a comprehensive set of UI components built with Radix UI and Tailwind CSS:
 
-Cloudscape `AppLayoutToolbar`.
+### Layout Components
 
-| Position | Element      | Cloudscape Component                             | Behavior                 |
-| -------- | ------------ | ------------------------------------------------ | ------------------------ |
-| Left     | Menu         | `Button` (icon-only) with `Icon` `menu`          | Toggles Left Panel       |
-| Left     | Service Name | Text                                             | Current service name     |
-| Center   | Breadcrumbs  | `BreadcrumbGroup`                                | Single breadcrumb source |
-| Right    | Panel Toggle | `Button` (icon-only) with `Icon` `view-vertical` | Toggles Right Panel      |
+| Component | Description |
+| --------- | ----------- |
+| `AppShell` | Main layout wrapper with header, navigation, and content areas |
+| `SpaceBetween` | Flexbox container with consistent gap sizing (xxxs to xxl) |
 
-### Left Panel
+### Form & Input Components
 
-- Slot: `navigation` in `AppLayoutToolbar`
-- Component: `SideNavigation`
-- Header: `Header` with an icon-only `Button` (`Icon` `angle-left`) to collapse
-- Content: Empty placeholder list (service provides content)
+| Component | Description |
+| --------- | ----------- |
+| `Button` | Primary, normal, outline, ghost, link, and destructive variants |
+| `Input` | Text input with validation states |
+| `Select` | Dropdown selection with search/filter support |
+| `Toggle` | On/off switch component |
 
-### Right Panel
+### Display Components
 
-- Slot: `tools` in `AppLayoutToolbar`
-- Content: Empty container (no `HelpPanel`)
+| Component | Description |
+| --------- | ----------- |
+| `Badge` | Status indicators with color variants (blue, green, grey, red) |
+| `Avatar` | User/entity avatars with fallback initials |
+| `Card` | Content container with header/footer slots |
 
-### Notifications
+### Data Components
 
-- Slot: `notifications` in `AppLayoutToolbar`
-- Component: `Flashbar`
-
-### Main Content Area
-
-- Renders `children` passed to `AppShell`
-
-## Required Cloudscape Packages
-
-- `@cloudscape-design/components`
-- `@cloudscape-design/global-styles` (import once per app for base styles/fonts)
+| Component | Description |
+| --------- | ----------- |
+| `DataTable` | Full-featured table with sorting, filtering, and pagination |
+| `SectionedListBoard` | Kanban-style board with drag-and-drop |
+| `SectionedListTable` | Grouped list view with collapsible sections |
 
 ## Service Catalog Dependency
 
-The App Shell builds the **All services** menu and global search suggestions from
-`@mostrom/service-catalog`. Until we move to a monorepo workspace setup, each
-app should explicitly depend on this package to avoid module resolution issues.
+The App Shell builds the **All services** menu and global search suggestions from service-catalog.
+
+Use this alias in consuming apps:
 
-When consuming published packages, install `@platform/service-catalog` as an npm alias to `@mostrom/service-catalog`.
+```json
+{
+  "@platform/service-catalog": "npm:@mostrom/service-catalog@latest"
+}
+```
 
 ## Notes
 
-- Do not duplicate breadcrumbs outside the `BreadcrumbGroup`.
-- Use Cloudscape components as-is. No custom styling overrides required for the initial scaffold.
+- Use the provided UI components for consistent styling across all services.
+- Import `@platform/app-shell/styles.css` in your app's entry point.

package/package.json

@@ -1,12 +1,8 @@
 {
   "name": "@mostrom/app-shell",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "type": "module",
-  "bin": {
-    "app-shell": "./bin/init.js",
-    "app-shell-init": "./bin/init.js"
-  },
   "exports": {
     ".": "./src/index.ts",
     "./styles.css": "./src/styles.css",
@@ -27,15 +23,13 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.1.0",
-    "@cloudscape-design/components": "*",
-    "@cloudscape-design/global-styles": "*",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/dom": "^1.7.5",
     "@hookform/resolvers": "^5.2.2",
-    "@platform/service-catalog": "npm:@mostrom/service-catalog@^0.1.2",
+    "@platform/service-catalog": "npm:@mostrom/service-catalog@^0.1.3",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",

package/src/AppShell.tsx

@@ -1,8 +1,8 @@
 /**
  * AppShell Component
  *
- * The primary layout wrapper for all platform services. Implements AWS Cloudscape
- * design system patterns to ensure visual and behavioral consistency.
+ * The primary layout wrapper for all platform services. Provides consistent
+ * visual and behavioral patterns across the platform.
  *
  * LAYOUT STRUCTURE:
  * ┌─────────────────────────────────────────────────────────────────────────────┐
@@ -43,7 +43,6 @@
 
 import React from "react";
 
-import "@cloudscape-design/global-styles/index.css";
 import "./styles.css";
 
 import { AppFlashbar, type FlashbarMessage } from "./components/layout/AppFlashbar";
@@ -72,7 +71,7 @@ import { GlobalHeaderSearch } from "./components/global-header/GlobalHeaderSearc
 import { type SearchOption } from "./components/search/GlobalSearch";
 import { HeaderUtilities } from "./components/global-header/HeaderUtilities";
 
-/** Local drawer type (replaces Cloudscape AppLayoutToolbarProps.Drawer) */
+/** Drawer configuration for slide-in panels */
 interface Drawer {
   id: string;
   ariaLabels?: {
@@ -640,10 +639,9 @@ export function AppShell({
    * Left-side collapsible panel containing service-specific navigation.
    * Shows the service name in the header and hierarchical navigation items.
    */
-  // Cast to internal type - both Cloudscape and custom types share the same shape
   const normalizedNavigationItems = (navigationItems ?? []) as ReadonlyArray<NavigationItem>;
 
-  // Adapter to normalize Cloudscape CustomEvent to our NavigationFollowEvent
+  // Adapter to normalize NavigationFollowEvent
   const handleNavigationFollow = onNavigationFollow
     ? (event: NavigationFollowEvent) => {
         onNavigationFollow(event as CompatibleNavigationFollowEvent);

package/src/components/data-table/index.ts

@@ -27,6 +27,6 @@ export type {
 export { CreateButtonGroup } from "../ui/create-button-group"
 export type { CreateButtonGroupProps } from "../ui/create-button-group"
 
-// Actions dropdown (replaces Cloudscape ButtonDropdown)
+// Actions dropdown
 export { ActionsDropdown } from "../ui/actions-dropdown"
 export type { ActionsDropdownProps, ActionsDropdownItem } from "../ui/actions-dropdown"

package/src/components/global-header/ServicesMenu.tsx

@@ -2,7 +2,7 @@ import { useState, useMemo, type MouseEvent } from "react";
 
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 
-// Custom types to replace Cloudscape ButtonDropdownProps
+// Menu dropdown types
 export interface MenuDropdownItem {
   id: string;
   text: string;

package/src/components/layout/AppBreadcrumb.tsx

@@ -26,7 +26,6 @@ export interface AppBreadcrumbProps {
 
 /**
  * AppBreadcrumb - A wrapper around reui Breadcrumb components
- * that provides a similar API to Cloudscape's BreadcrumbGroup
  */
 export function AppBreadcrumb({ items, onFollow, className }: AppBreadcrumbProps) {
   if (!items || items.length === 0) {

package/src/components/layout/AppLayout.tsx

@@ -54,7 +54,7 @@ const HEADER_HEIGHT = 56;
 const SERVICE_BAR_HEIGHT = 56;
 
 /**
- * AppLayout - A custom layout component replacing Cloudscape's AppLayoutToolbar.
+ * AppLayout - A custom layout component for platform services.
  *
  * Layout structure:
  * ┌──────────────────────────────────────────────────────────────────────┐

package/src/components/layout/AppNavigation.tsx

@@ -100,8 +100,8 @@ export interface AppNavigationProps {
 }
 
 /**
- * AppNavigation - A navigation component that provides Cloudscape-compatible API
- * using Tailwind styling. Designed to work within AppLayout's navigation slot.
+ * AppNavigation - A navigation component using Tailwind styling.
+ * Designed to work within AppLayout's navigation slot.
  */
 export function AppNavigation({
   serviceName,

package/src/components/layout/AppSidebar.tsx

@@ -35,8 +35,7 @@ export interface AppSidebarProps {
 }
 
 /**
- * AppSidebar - A sidebar wrapper that provides Cloudscape-compatible API
- * using shadcn Sidebar components internally.
+ * AppSidebar - A sidebar wrapper using shadcn Sidebar components internally.
  */
 export function AppSidebar({
   serviceName,

package/src/components/sectioned-list-table/README.md

@@ -69,7 +69,7 @@ function ExampleTable({ sections }: { sections: Section<Deal>[] }) {
 - `type`:
   - `text`: plain string rendering.
   - `currency`: localized currency formatting.
-  - `badge`: Cloudscape badge with optional `badgeColorMap`.
+  - `badge`: badge with optional `badgeColorMap`.
   - `avatar`: initials avatar from string field.
 - `editable`: defaults to editable for `text`; set `false` to lock.
 

package/src/components/ui/actions-dropdown.tsx

@@ -43,7 +43,6 @@ export interface ActionsDropdownProps {
 /**
  * ActionsDropdown - A dropdown menu for action buttons.
  *
- * This component replaces Cloudscape's ButtonDropdown with our design system.
  * Use it for action menus like "Actions", "More options", etc.
  *
  * @example

package/src/components/ui/badge.tsx

@@ -19,7 +19,7 @@ const badgeVariants = cva(
         ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         link: "text-primary underline-offset-4 [a&]:hover:underline",
       },
-      // Color variants for Cloudscape compatibility
+      // Color variants for status indicators
       color: {
         blue: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
         green: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",

package/src/components/ui/button.tsx

@@ -19,7 +19,7 @@ const buttonVariants = cva(
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
-        // Cloudscape-compatible variants
+        // Semantic variants
         primary: "bg-primary text-primary-foreground hover:bg-primary/90",
         normal:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",

package/src/index.ts

@@ -39,7 +39,7 @@ export type {
 export { AppLayout } from "./components/layout/AppLayout";
 export type { AppLayoutProps } from "./components/layout/AppLayout";
 
-// Flashbar components (replaces Cloudscape Flashbar)
+// Flashbar components
 export { AppFlashbar } from "./components/layout/AppFlashbar";
 export type { AppFlashbarProps, FlashbarMessage } from "./components/layout/AppFlashbar";
 

package/src/styles.css

@@ -1,7 +1,7 @@
 /* =============================================================================
  * Global Design System Styles
  * =============================================================================
- * Core styles previously in @platform/design-system, now merged into app-shell
+ * Core styles for @platform/app-shell
  *
  * NOTE: Font is loaded via <link> tag in AppShell component, not @import
  * NOTE: tw-animate-css is imported in the app's tailwind.css, not here
@@ -18,10 +18,6 @@
   --font-family-base: "Hanken Grotesk", -apple-system, BlinkMacSystemFont,
     "Segoe UI", sans-serif;
 
-  /* Override Cloudscape font variables */
-  --awsui-font-family-base: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --awsui-font-family-monospace: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", monospace;
-
   /* Dropdown styling */
   --dropdown-border-radius: 8px;
 
@@ -78,68 +74,11 @@ body,
   font-family: var(--font-family-base);
 }
 
-/* Force Hanken Grotesk on all Cloudscape components */
-[class*="awsui"] {
-  font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
-}
-
 /* =============================================================================
  * App Shell Styles
  * =============================================================================
  */
 
-/*
- * Force dark background on Cloudscape dropdown PORTALS only
- * CRITICAL: Use body > div[class*="awsui_dropdown"] to ONLY target dropdown portals
- * NOT body > div[class*="awsui"] which would match other portals and is too broad
- * This prevents styling table cells which also use "interior" class patterns
- */
-body > div[class*="awsui_dropdown"] [class*="awsui_dropdown-content-wrapper"],
-body > div[class*="awsui_dropdown"] [class*="awsui_interior"],
-body > div[class*="awsui_dropdown"] [class*="awsui_options-list"],
-body > div[class*="awsui_dropdown"] [class*="awsui_items-list"],
-body > div[class*="awsui_dropdown"] ul[class*="awsui"],
-body > div[class*="awsui_dropdown"] ul {
-  background-color: #171717 !important;
-  color: #f5f5f5 !important;
-}
-
-body > div[class*="awsui_dropdown"] li[class*="awsui"],
-body > div[class*="awsui_dropdown"] li,
-body > div[class*="awsui_dropdown"] [class*="awsui_option"],
-body > div[class*="awsui_dropdown"] [class*="awsui_item-element"] {
-  background-color: transparent !important;
-  color: #f5f5f5 !important;
-}
-
-body > div[class*="awsui_dropdown"] [class*="awsui_highlighted"],
-body > div[class*="awsui_dropdown"] li:hover,
-body > div[class*="awsui_dropdown"] li:focus,
-body > div[class*="awsui_dropdown"] [class*="awsui_option"]:hover,
-body > div[class*="awsui_dropdown"] [class*="awsui_item-element"]:hover {
-  background-color: transparent !important;
-  color: #26c6ff !important;
-}
-
-/* Ensure hover color applies to the text content inside dropdown items */
-body > div[class*="awsui_dropdown"] [class*="awsui_item-element"]:hover [class*="awsui_option-content"],
-body > div[class*="awsui_dropdown"] [class*="awsui_item-element"]:hover [class*="awsui_link"],
-body > div[class*="awsui_dropdown"] [class*="awsui_option"]:hover [class*="awsui_option-content"],
-body > div[class*="awsui_dropdown"] [class*="awsui_highlighted"] [class*="awsui_option-content"],
-body > div[class*="awsui_dropdown"] [class*="awsui_highlighted"] [class*="awsui_link"],
-body > div[class*="awsui_dropdown"] [aria-selected="true"] [class*="awsui_option-content"] {
-  color: #26c6ff !important;
-  background-color: transparent !important;
-}
-
-/* Override Cloudscape light mode dropdown backgrounds - scoped to dropdown portals */
-body > div[class*="awsui_dropdown"][class*="awsui_open"] [class*="awsui_interior"],
-body > div[class*="awsui_dropdown"] [class*="awsui_dropdown-content"],
-body > div[class*="awsui_dropdown"] > div,
-body > div[class*="awsui_dropdown"] ul {
-  background-color: #171717 !important;
-}
-
 /* Global header - high z-index to ensure dropdowns appear above everything */
 #global-header {
   background-color: #171717;
@@ -149,19 +88,8 @@ body > div[class*="awsui_dropdown"] ul {
   overflow: visible !important;
 }
 
-#global-header [class*="awsui_top-navigation"],
-#global-header header {
-  background-color: #171717 !important;
-  overflow: visible !important;
-}
-
-#global-header [class*="awsui_utility"],
-#global-header [class*="awsui_utilities"] {
-  overflow: visible !important;
-}
-
 /* =============================================================================
- * Custom Global Header Styles (non-Cloudscape)
+ * Custom Global Header Styles
  * =============================================================================
  */
 
@@ -412,65 +340,6 @@ body > div[class*="awsui_dropdown"] ul {
   background-color: #263445;
 }
 
-/* Force light mode background for app content area */
-body,
-#root,
-[class*="awsui_app-layout"],
-[class*="awsui_app-layout"] [class*="awsui_content"],
-[class*="awsui_app-layout"] [class*="awsui_content"] > * {
-  background-color: #ffffff !important;
-  color: #0f172a !important;
-}
-
-/* Panel trigger buttons in app layout (not global header) - circle shape */
-[class*="awsui_app-layout"] button[class*="awsui_trigger"],
-[class*="awsui_app-layout"] button[class*="awsui_circle"] {
-  border-radius: 50% !important;
-}
-
-/* When panel is closed (no .selected class) - white background, dark icon */
-[class*="awsui_app-layout"] button[class*="awsui_trigger"]:not([class*="selected"]),
-[class*="awsui_app-layout"] button[class*="awsui_circle"]:not([class*="selected"]) {
-  background-color: #ffffff !important;
-  border: 1px solid #d5dbdb !important;
-  color: #171717 !important;
-}
-
-/* Remove hover effects from trigger buttons */
-[class*="awsui_app-layout"] button[class*="awsui_trigger"]:hover:not([class*="selected"]),
-[class*="awsui_app-layout"] button[class*="awsui_circle"]:hover:not([class*="selected"]) {
-  background-color: #ffffff !important;
-  border: 1px solid #d5dbdb !important;
-  color: #171717 !important;
-}
-
-[class*="awsui_app-layout"] button[class*="awsui_trigger"]:not([class*="selected"]) svg,
-[class*="awsui_app-layout"] button[class*="awsui_circle"]:not([class*="selected"]) svg {
-  color: #171717 !important;
-}
-
-/* When panel is open (.selected class) - dark background, white icon */
-[class*="awsui_app-layout"] button[class*="awsui_trigger"][class*="selected"],
-[class*="awsui_app-layout"] button[class*="awsui_circle"][class*="selected"] {
-  background-color: #171717 !important;
-  border: 1px solid #171717 !important;
-  color: #ffffff !important;
-}
-
-/* Remove hover effects from selected trigger buttons */
-[class*="awsui_app-layout"] button[class*="awsui_trigger"][class*="selected"]:hover,
-[class*="awsui_app-layout"] button[class*="awsui_circle"][class*="selected"]:hover {
-  background-color: #171717 !important;
-  border: 1px solid #171717 !important;
-  color: #ffffff !important;
-}
-
-[class*="awsui_app-layout"] button[class*="awsui_trigger"][class*="selected"] svg,
-[class*="awsui_app-layout"] button[class*="awsui_circle"][class*="selected"] svg {
-  color: #ffffff !important;
-  fill: #ffffff !important;
-}
-
 /* Custom navigation trigger button with Menu icon */
 .app-shell-nav-trigger {
   display: flex;
@@ -504,54 +373,17 @@ body,
   font-weight: 400 !important;
 }
 
-/* Dark mode: ensure side navigation links are visible on dark background */
-body.awsui-dark-mode .app-shell-side-navigation a,
-body.awsui-dark-mode .app-shell-side-navigation button,
-body.awsui-dark-mode .app-shell-side-navigation [role="link"] {
-  color: #f5f5f5 !important;
-}
-
-/* Keep the side navigation header/title bold */
-.app-shell-side-navigation [class*="awsui_header"],
-.app-shell-side-navigation [class*="awsui_header"] a,
-.app-shell-side-navigation [class*="awsui_header"] [class*="awsui_header-link"],
-.app-shell-side-navigation [class*="awsui_header"] [class*="awsui_header-text"] {
-  font-weight: 600 !important;
-  color: #171717 !important;
-}
-
-body.awsui-dark-mode .app-shell-side-navigation [class*="awsui_header"],
-body.awsui-dark-mode .app-shell-side-navigation [class*="awsui_header"] a,
-body.awsui-dark-mode .app-shell-side-navigation [class*="awsui_header"] [class*="awsui_header-link"],
-body.awsui-dark-mode .app-shell-side-navigation [class*="awsui_header"] [class*="awsui_header-text"] {
-  color: #ffffff !important;
-}
-
 .app-shell-side-navigation a:hover,
 .app-shell-side-navigation button:hover,
 .app-shell-side-navigation [role="link"]:hover {
   color: #0972d3 !important;
 }
 
-.app-shell-side-navigation [aria-current="page"],
-.app-shell-side-navigation [class*="awsui_active"] {
+.app-shell-side-navigation [aria-current="page"] {
   color: #0972d3 !important;
   font-weight: 600 !important;
 }
 
-body.awsui-dark-mode .app-shell-side-navigation [aria-current="page"],
-body.awsui-dark-mode .app-shell-side-navigation [class*="awsui_active"] {
-  color: #26c6ff !important;
-  font-weight: 600 !important;
-}
-
-.app-shell-side-navigation [class*="awsui_link-text"],
-.app-shell-side-navigation [class*="awsui_item-text"],
-.app-shell-side-navigation [class*="awsui_item"] {
-  color: inherit !important;
-  font-weight: inherit !important;
-}
-
 /* Search container with even spacing */
 .app-shell-search {
   display: flex;
@@ -808,7 +640,7 @@ button.app-shell-apps-button:hover .app-shell-apps-icon,
 }
 
 /* =============================================================================
- * Custom Global Search Styles (non-Cloudscape)
+ * Custom Global Search Styles
  * =============================================================================
  */
 
@@ -1072,655 +904,6 @@ button.app-shell-apps-button:hover .app-shell-apps-icon,
   color: #f5f5f5;
 }
 
-/* Legacy Cloudscape search styles (for backward compatibility) */
-.app-shell-search-input-wrapper [class*="awsui_input"] {
-  background-color: #171717 !important;
-  border-radius: 20px !important;
-}
-
-/* Inner elements of autosuggest dropdown - no radius (wrapper handles clipping) */
-.app-shell-search-input-wrapper [class*="awsui_dropdown"],
-.app-shell-search-input-wrapper [class*="awsui_content"],
-[class*="awsui_autosuggest"] [class*="awsui_dropdown"],
-[class*="awsui_autosuggest"] [class*="awsui_content"] {
-  border-radius: 0 !important;
-}
-
-/*
- * Force left alignment - override CloudScape's centered search layout.
- * Scoped to the global header to avoid impacting AppLayoutToolbar internals.
- */
-#global-header [class*="awsui_header"] {
-  gap: 0 !important;
-}
-
-/* Logo/identity area */
-#global-header [class*="awsui_identity"] {
-  padding-inline-start: 8px !important;
-  padding-inline-end: 8px !important;
-}
-
-#global-header [class*="awsui_search"],
-#global-header [data-utility-special="search"] {
-  flex: 0 1 auto !important;
-  justify-content: flex-start !important;
-  margin-inline-start: 0 !important;
-  padding-inline-start: 0 !important;
-  margin-inline-end: auto !important;
-}
-
-#global-header [class*="awsui_inputs"] {
-  justify-content: flex-start !important;
-  margin-inline-start: 0 !important;
-}
-
-#global-header [class*="awsui_center"] {
-  flex: 0 1 auto !important;
-  justify-content: flex-start !important;
-}
-
-/* Keep logo size stable to avoid layout shifts */
-#global-header [class*="awsui_identity"] img {
-  height: 24px;
-  width: auto;
-  display: block;
-}
-
-/*
- * Remove rounded corners from ALL dropdown menus globally
- * Cloudscape renders dropdowns in portals at document body level.
- * Using very specific dropdown selectors to avoid affecting cards/containers.
- */
-
-/* Dropdown containers - apply rounded corners */
-[class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-/* Interior elements - no rounded corners (container handles it) */
-[class*="awsui_dropdown-content"][class*="awsui_interior"],
-[class*="awsui_list-bottom"],
-[class*="awsui_open-dropdown"] {
-  border-radius: 0 !important;
-}
-
-/* Dropdown list containers */
-[class*="awsui_options-list"],
-[class*="awsui_items-list-container"],
-ul[class*="awsui_options"] {
-  border-radius: 0 !important;
-}
-
-/* Individual dropdown/menu items - remove all rounded corners */
-[class*="awsui_item-element"],
-li[class*="awsui_option"],
-[class*="awsui_highlighted"] {
-  border-radius: 0 !important;
-}
-
-/* First and last items in dropdown lists */
-[class*="awsui_options-list"] li:first-child,
-[class*="awsui_options-list"] li:last-child,
-[class*="awsui_items-list-container"] li:first-child,
-[class*="awsui_items-list-container"] li:last-child {
-  border-radius: 0 !important;
-}
-
-/*
- * DROPDOWN BORDER RADIUS OVERRIDE - Scoped to dropdown portals only
- * CRITICAL: Use body > div[class*="awsui_dropdown"] to avoid affecting tables
- */
-body > div[class*="awsui_dropdown"] [class*="awsui_dropdown-content-wrapper"],
-body > div[class*="awsui_dropdown"] [class*="awsui_interior"],
-body > div[class*="awsui_dropdown"][class*="awsui_open"],
-body > div[class*="awsui_dropdown"] ul[class*="awsui_options-list"],
-body > div[class*="awsui_dropdown"] ul[class*="awsui_items-list"],
-body > div[class*="awsui_dropdown"] [class*="awsui_items-list-container"],
-body > div[class*="awsui_dropdown"] li[class*="awsui_option"],
-body > div[class*="awsui_dropdown"] li[class*="awsui_item-element"],
-body > div[class*="awsui_dropdown"] li[class*="awsui_highlighted"],
-body > div[class*="awsui_dropdown"] li,
-body > div[class*="awsui_dropdown"] li:first-child,
-body > div[class*="awsui_dropdown"] li:last-child {
-  border-radius: 0 !important;
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-/* Global header dropdown theme - wrapper containers get rounded corners */
-body .app-shell-apps-dropdown [class*="awsui_dropdown-content-wrapper"],
-body .app-shell-search-autosuggest [class*="awsui_dropdown-content-wrapper"],
-body .app-shell-categories-dropdown [class*="awsui_dropdown-content-wrapper"] {
-  background-color: #171717 !important;
-  color: #f5f5f5 !important;
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-
-/* Global header dropdown theme - interior elements no radius */
-body .app-shell-apps-dropdown [class*="awsui_dropdown"],
-body .app-shell-search-autosuggest [class*="awsui_dropdown"],
-body .app-shell-apps-dropdown [class*="awsui_dropdown-content"],
-body .app-shell-search-autosuggest [class*="awsui_dropdown-content"],
-body .app-shell-apps-dropdown [class*="awsui_items-list-container"],
-body .app-shell-search-autosuggest [class*="awsui_items-list-container"],
-body .app-shell-apps-dropdown [class*="awsui_options-list"],
-body .app-shell-search-autosuggest [class*="awsui_options-list"],
-body .app-shell-apps-dropdown ul[class*="awsui"],
-body .app-shell-search-autosuggest ul[class*="awsui"],
-body .app-shell-categories-dropdown [class*="awsui_dropdown"],
-body .app-shell-categories-dropdown [class*="awsui_dropdown-content"],
-body .app-shell-categories-dropdown [class*="awsui_items-list-container"],
-body .app-shell-categories-dropdown [class*="awsui_options-list"],
-body .app-shell-categories-dropdown ul[class*="awsui"] {
-  background-color: #171717 !important;
-  color: #f5f5f5 !important;
-  border-radius: 0 !important;
-}
-
-/* Force Apps dropdown to be wide enough for 4 columns */
-body .app-shell-apps-dropdown [class*="awsui_dropdown"],
-body .app-shell-apps-dropdown [class*="awsui_dropdown-content-wrapper"],
-body .app-shell-apps-dropdown [class*="awsui_dropdown-content"],
-body .app-shell-apps-dropdown [class*="awsui_items-list-container"],
-body [class*="awsui_dropdown"]:has([aria-label="Apps"]),
-body [class*="awsui_dropdown-content-wrapper"]:has([aria-label="Apps"]),
-body [class*="awsui_dropdown-content"]:has([aria-label="Apps"]),
-body [class*="awsui_items-list-container"]:has([aria-label="Apps"]) {
-  width: 1000px !important;
-  min-width: 1000px !important;
-  max-width: 1180px !important;
-}
-
-/* Search results dropdown: keep dark background, text-only hover */
-body .app-shell-search-autosuggest [class*="awsui_dropdown-content-wrapper"],
-body .app-shell-search-autosuggest [class*="awsui_dropdown-content"],
-body .app-shell-search-autosuggest [class*="awsui_interior"],
-body .app-shell-search-autosuggest [class*="awsui_options-list"],
-body .app-shell-search-autosuggest [class*="awsui_virtual-list"],
-body .app-shell-search-autosuggest ul {
-  background-color: #171717 !important;
-  color: #f5f5f5 !important;
-}
-
-body .app-shell-search-autosuggest li,
-body .app-shell-search-autosuggest [class*="awsui_option"],
-body .app-shell-search-autosuggest [class*="awsui_selectable-item"],
-body .app-shell-search-autosuggest [class*="awsui_item-element"],
-body .app-shell-search-autosuggest [class*="awsui_option-content"] {
-  background-color: transparent !important;
-  box-shadow: none !important;
-  border: none !important;
-  outline: none !important;
-  color: #f5f5f5 !important;
-}
-
-body .app-shell-search-autosuggest li:hover,
-body .app-shell-search-autosuggest [class*="awsui_option"]:hover,
-body .app-shell-search-autosuggest [class*="awsui_selectable-item"]:hover,
-body .app-shell-search-autosuggest [class*="awsui_item-element"]:hover,
-body .app-shell-search-autosuggest [class*="awsui_option-content"]:hover,
-body .app-shell-search-autosuggest [class*="awsui_item-element"]:focus,
-body .app-shell-search-autosuggest [class*="awsui_item-element"]:focus-visible,
-body .app-shell-search-autosuggest [class*="awsui_highlighted"],
-body .app-shell-search-autosuggest [aria-selected="true"] {
-  background-color: transparent !important;
-  box-shadow: none !important;
-  border: none !important;
-  outline: none !important;
-  color: #26c6ff !important;
-}
-
-/* Autosuggest dropdown background - force dark theme */
-[class*="awsui_autosuggest"] [class*="awsui_dropdown-content-wrapper"],
-[class*="awsui_autosuggest"] [class*="awsui_dropdown-content"],
-[class*="awsui_autosuggest"] [class*="awsui_interior"],
-[class*="awsui_autosuggest"] [class*="awsui_options-list"],
-body [class*="awsui_autosuggest"] ul {
-  background-color: #171717 !important;
-  color: #f5f5f5 !important;
-}
-
-[class*="awsui_autosuggest"] li,
-[class*="awsui_autosuggest"] [class*="awsui_option"] {
-  background-color: transparent !important;
-  color: #f5f5f5 !important;
-}
-
-[class*="awsui_autosuggest"] [class*="awsui_highlighted"],
-[class*="awsui_autosuggest"] li:hover {
-  background-color: transparent !important;
-  color: #26c6ff !important;
-}
-
-/* Top navigation dropdowns (apps/search/settings/user) */
-body .awsui-context-top-navigation [class*="awsui_dropdown-content-wrapper"] {
-  background-color: #171717 !important;
-  border: none !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-  padding-block: 0 !important;
-}
-
-body .awsui-context-top-navigation [class*="awsui_dropdown-content-wrapper"]::after {
-  border: none !important;
-  border-radius: 0 !important;
-}
-
-body .awsui-context-top-navigation [class*="awsui_options-list"],
-body .awsui-context-top-navigation [class*="awsui_items-list-container"] {
-  background-color: #171717 !important;
-  color: #f5f5f5 !important;
-  border: none !important;
-  border-radius: 0 !important;
-}
-
-/* Inner content elements - no radius (container handles clipping) */
-body .awsui-context-top-navigation [class*="awsui_dropdown-content"],
-body .awsui-context-top-navigation [class*="awsui_dropdown"]::after,
-body .awsui-context-top-navigation [class*="awsui_dropdown-content-wrapper"]::after {
-  border-radius: 0 !important;
-  border: none !important;
-  box-shadow: none !important;
-}
-
-body .awsui-context-top-navigation [class*="awsui_dropdown"] [class*="awsui_focus"],
-body .awsui-context-top-navigation [class*="awsui_dropdown"] [class*="awsui_focus-ring"] {
-  box-shadow: none !important;
-  outline: none !important;
-}
-
-body .awsui-context-top-navigation [class*="awsui_item-element"],
-body .awsui-context-top-navigation [class*="awsui_option"] {
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
-  color: #f5f5f5 !important;
-}
-
-body .awsui-context-top-navigation [class*="awsui_item-element"]:hover,
-body .awsui-context-top-navigation [class*="awsui_item-element"]:focus,
-body .awsui-context-top-navigation [class*="awsui_item-element"]:focus-visible,
-body .awsui-context-top-navigation [class*="awsui_highlighted"] {
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
-  color: #26c6ff !important;
-}
-
-/* List elements inside dropdown - no radius (container handles clipping) */
-body ul[aria-label="Apps"],
-body ul[aria-label="Categories"],
-body ul[aria-label="Search"] {
-  background-color: #171717 !important;
-  color: #f5f5f5 !important;
-  border-radius: 0 !important;
-}
-
-body .app-shell-apps-dropdown li,
-body .app-shell-categories-dropdown li,
-body .app-shell-search-autosuggest li,
-body .app-shell-apps-dropdown [class*="awsui_item-element"],
-body .app-shell-categories-dropdown [class*="awsui_item-element"],
-body .app-shell-search-autosuggest [class*="awsui_item-element"] {
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
-  border-radius: 0 !important;
-  color: #f5f5f5 !important;
-}
-
-body ul[aria-label="Apps"] li,
-body ul[aria-label="Categories"] li,
-body ul[aria-label="Search"] li,
-body ul[aria-label="Apps"] [class*="awsui_item-element"],
-body ul[aria-label="Categories"] [class*="awsui_item-element"],
-body ul[aria-label="Search"] [class*="awsui_item-element"] {
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
-  border-radius: 0 !important;
-  color: #f5f5f5 !important;
-}
-
-body .app-shell-apps-dropdown [class*="awsui_item-element"]:hover,
-body .app-shell-categories-dropdown [class*="awsui_item-element"]:hover,
-body .app-shell-search-autosuggest [class*="awsui_item-element"]:hover,
-body .app-shell-apps-dropdown [class*="awsui_item-element"]:focus,
-body .app-shell-categories-dropdown [class*="awsui_item-element"]:focus,
-body .app-shell-search-autosuggest [class*="awsui_item-element"]:focus,
-body .app-shell-apps-dropdown [class*="awsui_item-element"]:focus-visible,
-body .app-shell-categories-dropdown [class*="awsui_item-element"]:focus-visible,
-body .app-shell-search-autosuggest [class*="awsui_item-element"]:focus-visible,
-body .app-shell-apps-dropdown [class*="awsui_highlighted"],
-body .app-shell-categories-dropdown [class*="awsui_highlighted"],
-body .app-shell-search-autosuggest [class*="awsui_highlighted"] {
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
-  color: #26c6ff !important;
-}
-
-body ul[aria-label="Apps"] [class*="awsui_item-element"]:hover,
-body ul[aria-label="Categories"] [class*="awsui_item-element"]:hover,
-body ul[aria-label="Search"] [class*="awsui_item-element"]:hover,
-body ul[aria-label="Apps"] [class*="awsui_item-element"]:focus,
-body ul[aria-label="Categories"] [class*="awsui_item-element"]:focus,
-body ul[aria-label="Search"] [class*="awsui_item-element"]:focus,
-body ul[aria-label="Apps"] [class*="awsui_item-element"]:focus-visible,
-body ul[aria-label="Categories"] [class*="awsui_item-element"]:focus-visible,
-body ul[aria-label="Search"] [class*="awsui_item-element"]:focus-visible,
-body ul[aria-label="Apps"] [class*="awsui_highlighted"],
-body ul[aria-label="Categories"] [class*="awsui_highlighted"],
-body ul[aria-label="Search"] [class*="awsui_highlighted"] {
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
-  color: #26c6ff !important;
-}
-
-body ul[aria-label="Apps"] a:focus-visible,
-body ul[aria-label="Categories"] a:focus-visible,
-body ul[aria-label="Search"] a:focus-visible,
-body ul[aria-label="Apps"] button:focus-visible,
-body ul[aria-label="Categories"] button:focus-visible,
-body ul[aria-label="Search"] button:focus-visible {
-  outline: none !important;
-  box-shadow: none !important;
-}
-
-/* Make the "All services" dropdown wider + multi-column */
-body ul[aria-label="Apps"] {
-  display: block !important;
-  column-count: 4 !important;
-  column-width: 220px !important;
-  column-gap: 20px !important;
-  column-fill: balance;
-  min-width: 960px !important;
-  max-width: 1180px !important;
-  padding-block: 16px !important;
-}
-
-body ul[aria-label="Apps"] > li {
-  break-inside: avoid;
-}
-
-body ul[aria-label="Apps"] [class*="awsui_item-element"] {
-  width: 100%;
-}
-
-/* Settings and User dropdown - remove gap from header */
-body ul[aria-label="Settings"],
-body ul[aria-label="User menu"] {
-  padding: 4px 0 !important;
-  min-width: 140px !important;
-}
-
-/* Categories dropdown - match standard dropdown padding */
-body ul[aria-label="Categories"] {
-  padding: 4px 0 !important;
-  min-width: 220px !important;
-}
-
-body ul[aria-label="Categories"] [class*="awsui_item-element"] {
-  padding: 4px 12px !important;
-}
-
-/* Remove the gap between header and Settings/User dropdowns */
-#global-header [class*="awsui_menu-dropdown"] [class*="awsui_dropdown-content-wrapper"],
-body .awsui-context-top-navigation [class*="awsui_menu-dropdown"] [class*="awsui_dropdown-content-wrapper"] {
-  margin-top: -8px !important;
-  top: 100% !important;
-  padding-top: 0 !important;
-}
-
-#global-header [class*="awsui_menu-dropdown"] [class*="awsui_dropdown"],
-body .awsui-context-top-navigation [class*="awsui_menu-dropdown"] [class*="awsui_dropdown"] {
-  margin-top: -8px !important;
-  padding-top: 0 !important;
-}
-
-/* Portal dropdowns for Settings/User - force flush to header with rounded corners */
-body [class*="awsui_dropdown-content-wrapper"]:has(ul[aria-label="Settings"]),
-body [class*="awsui_dropdown-content-wrapper"]:has(ul[aria-label="User menu"]) {
-  margin-top: -8px !important;
-  transform: translateY(-8px) !important;
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-
-/* Target portal-rendered Settings/User dropdowns and remove gap */
-body > div[class*="awsui"] [class*="awsui_dropdown-content-wrapper"] {
-  margin-top: 0 !important;
-}
-
-body > div[class*="awsui"][class*="awsui_dropdown"] {
-  margin-top: 0 !important;
-  padding-top: 0 !important;
-}
-
-body ul[aria-label="Settings"] [class*="awsui_item-element"],
-body ul[aria-label="User menu"] [class*="awsui_item-element"] {
-  padding: 4px 12px !important;
-}
-
-/* General top navigation dropdown list padding */
-body .awsui-context-top-navigation [class*="awsui_items-list-container"] ul {
-  padding: 4px 0 !important;
-}
-
-body .awsui-context-top-navigation [class*="awsui_items-list-container"] [class*="awsui_item-element"] {
-  padding: 4px 12px !important;
-}
-
-/*
- * Comprehensive dropdown border-radius styling
- * Targets: Apps dropdown, Autosuggest, ButtonDropdown, all menu types
- * Uses --dropdown-border-radius variable for consistent rounded corners
- */
-
-/* Autosuggest dropdown containers - apply rounded corners */
-[class*="awsui_autosuggest"] [class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-[class*="awsui_autosuggest"] [class*="awsui_interior"],
-[class*="awsui_autosuggest"] [class*="awsui_dropdown-content"],
-[class*="awsui_autosuggest"] ul,
-[class*="awsui_autosuggest"] li {
-  border-radius: 0 !important;
-}
-
-/* ButtonDropdown containers (Apps button, Settings, Profile) - apply rounded corners */
-[class*="awsui_button-dropdown"] [class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-[class*="awsui_button-dropdown"] [class*="awsui_interior"],
-[class*="awsui_button-dropdown"] [class*="awsui_dropdown-content"],
-[class*="awsui_button-dropdown"] ul,
-[class*="awsui_button-dropdown"] li {
-  border-radius: 0 !important;
-}
-
-/* Top navigation menu containers - apply rounded corners */
-[class*="awsui_menu-dropdown"] [class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-[class*="awsui_menu-dropdown"] [class*="awsui_interior"],
-[class*="awsui_menu-dropdown"] ul,
-[class*="awsui_menu-dropdown"] li {
-  border-radius: 0 !important;
-}
-
-/* Select component dropdown containers - apply rounded corners */
-[class*="awsui_select"] [class*="awsui_dropdown-content-wrapper"],
-[class*="awsui_select-dropdown"] [class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-[class*="awsui_select"] [class*="awsui_interior"],
-[class*="awsui_select"] [class*="awsui_dropdown-content"],
-[class*="awsui_select"] ul,
-[class*="awsui_select"] li,
-[class*="awsui_select-dropdown"] [class*="awsui_interior"],
-[class*="awsui_select-dropdown"] ul,
-[class*="awsui_select-dropdown"] li {
-  border-radius: 0 !important;
-}
-
-/* Multiselect component dropdown containers - apply rounded corners */
-[class*="awsui_multiselect"] [class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-[class*="awsui_multiselect"] [class*="awsui_interior"],
-[class*="awsui_multiselect"] [class*="awsui_dropdown-content"],
-[class*="awsui_multiselect"] ul,
-[class*="awsui_multiselect"] li {
-  border-radius: 0 !important;
-}
-
-/*
- * DROPDOWN PORTAL STYLES - All scoped to body > div[class*="awsui_dropdown"]
- * CRITICAL: Avoids affecting table cells which also use "interior" class patterns
- * Uses --dropdown-border-radius for consistent rounded corners on containers
- */
-
-/* Portal-rendered dropdown containers - apply rounded corners */
-body > div[class*="awsui_dropdown"] [class*="awsui_dropdown-content-wrapper"],
-body > div[class*="awsui_select"] [class*="awsui_dropdown-content-wrapper"],
-body > div[class*="awsui_multiselect"] [class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
-  outline: none !important;
-  border: none !important;
-  overflow: hidden !important;
-}
-
-/* Universal portal dropdown wrappers - ensure rounded corners for all Cloudscape dropdowns */
-body > div[class*="awsui"][class*="dropdown"] [class*="awsui_dropdown-content-wrapper"],
-body > div[class*="awsui"] > [class*="awsui_dropdown-content-wrapper"],
-body > div[class*="awsui"] [class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-
-/* Interior and list elements - no rounded corners (container handles it) */
-body > div[class*="awsui_dropdown"] [class*="awsui_interior"],
-body > div[class*="awsui_dropdown"] [class*="awsui_content-wrapper"],
-body > div[class*="awsui_dropdown"] ul[class*="awsui"],
-body > div[class*="awsui_dropdown"] li[class*="awsui"],
-body > div[class*="awsui_select"] [class*="awsui_interior"],
-body > div[class*="awsui_select"] ul[class*="awsui"],
-body > div[class*="awsui_select"] li[class*="awsui"],
-body > div[class*="awsui_multiselect"] [class*="awsui_interior"],
-body > div[class*="awsui_multiselect"] ul[class*="awsui"],
-body > div[class*="awsui_multiselect"] li[class*="awsui"] {
-  border-radius: 0 !important;
-}
-
-/* List items inside dropdown portals only */
-body > div[class*="awsui_dropdown"] [class*="awsui_list"] li,
-body > div[class*="awsui_dropdown"] ul li {
-  border-radius: 0 !important;
-}
-
-/* Interior wrapper inside dropdown portals */
-body > div[class*="awsui_dropdown"] [class*="awsui_interior"],
-body > div[class*="awsui_select"] [class*="awsui_interior"],
-body > div[class*="awsui_multiselect"] [class*="awsui_interior"] {
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  outline: none !important;
-  border: none !important;
-}
-
-/* Inner elements inside dropdown portals */
-body > div[class*="awsui_dropdown"] [class*="awsui_dropdown-content-wrapper"] > *,
-body > div[class*="awsui_dropdown"] [class*="awsui_dropdown-content"],
-body > div[class*="awsui_dropdown"] [class*="awsui_dropdown-content"] > * {
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  outline: none !important;
-  border: none !important;
-}
-
-/* Pseudo-elements inside dropdown portals */
-body > div[class*="awsui_dropdown"]::before,
-body > div[class*="awsui_dropdown"]::after,
-body > div[class*="awsui_dropdown"] *::before,
-body > div[class*="awsui_dropdown"] *::after {
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  outline: none !important;
-  border: none !important;
-  display: none !important;
-}
-
-/* Options list inside dropdown portals */
-body > div[class*="awsui_dropdown"] [class*="awsui_optionsList"],
-body > div[class*="awsui_dropdown"] [class*="awsui_options-list"],
-body > div[class*="awsui_dropdown"] [class*="awsui_virtual-list"],
-body > div[class*="awsui_select"] [class*="awsui_optionsList"],
-body > div[class*="awsui_select"] [class*="awsui_options-list"],
-body > div[class*="awsui_select"] [class*="awsui_virtual-list"],
-body > div[class*="awsui_multiselect"] [class*="awsui_optionsList"],
-body > div[class*="awsui_multiselect"] [class*="awsui_options-list"],
-body > div[class*="awsui_multiselect"] [class*="awsui_virtual-list"] {
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  border: none !important;
-}
-
-/* Focus rings inside dropdown portals */
-body > div[class*="awsui_dropdown"] *:focus,
-body > div[class*="awsui_dropdown"] *:focus-visible,
-body > div[class*="awsui_dropdown"] *:focus-within {
-  outline: none !important;
-  box-shadow: none !important;
-}
-
-/* All element types inside dropdown portals */
-body > div[class*="awsui_dropdown"] div,
-body > div[class*="awsui_dropdown"] ul,
-body > div[class*="awsui_dropdown"] li,
-body > div[class*="awsui_dropdown"] span,
-body > div[class*="awsui_dropdown"] a,
-body > div[class*="awsui_dropdown"] button {
-  border-radius: 0 !important;
-}
-
-/* Hover styling inside dropdown portals */
-body > div[class*="awsui_dropdown"] [role="option"]:hover,
-body > div[class*="awsui_dropdown"] [role="menuitem"]:hover,
-body > div[class*="awsui_dropdown"] [role="menuitemcheckbox"]:hover,
-body > div[class*="awsui_dropdown"] [role="menuitemradio"]:hover,
-body > div[class*="awsui_dropdown"] [role="option"][aria-selected="true"],
-body > div[class*="awsui_dropdown"] [role="menuitem"][aria-selected="true"] {
-  color: #26c6ff !important;
-  background-color: transparent !important;
-}
-
-body > div[class*="awsui_dropdown"] [role="option"]:hover *,
-body > div[class*="awsui_dropdown"] [role="menuitem"]:hover *,
-body > div[class*="awsui_dropdown"] [role="menuitemcheckbox"]:hover *,
-body > div[class*="awsui_dropdown"] [role="menuitemradio"]:hover *,
-body > div[class*="awsui_dropdown"] [role="option"][aria-selected="true"] *,
-body > div[class*="awsui_dropdown"] [role="menuitem"][aria-selected="true"] * {
-  color: #26c6ff !important;
-}
-
 /* ---break---
  */
 
@@ -1772,6 +955,18 @@ body > div[class*="awsui_dropdown"] [role="menuitem"][aria-selected="true"] * {
   --invert-foreground: var(--color-zinc-50);
 }
 
+/* Dark mode: ensure side navigation links are visible on dark background */
+.dark .app-shell-side-navigation a,
+.dark .app-shell-side-navigation button,
+.dark .app-shell-side-navigation [role="link"] {
+  color: #f5f5f5 !important;
+}
+
+.dark .app-shell-side-navigation [aria-current="page"] {
+  color: #26c6ff !important;
+  font-weight: 600 !important;
+}
+
 /* ---break---
  */
 

package/src/vite.js

@@ -101,6 +101,40 @@ function ssrCssStubPlugin() {
  * });
  */
 export function getSharedViteConfig(appDir) {
+  const installedAppShellSrc = path.resolve(appDir, "node_modules/@platform/app-shell/src");
+  const resolvedAppShellSrc = fs.existsSync(installedAppShellSrc) ? installedAppShellSrc : APP_SHELL_SRC_DIR;
+
+  // NPM-first shared config: keep only essential aliases/SSR handling.
+  return {
+    plugins: [ssrCssStubPlugin()],
+    resolve: {
+      preserveSymlinks: true,
+      alias: [
+        {
+          find: /^@\/(.*)$/,
+          replacement: `${resolvedAppShellSrc}/$1`,
+        },
+      ],
+      dedupe: ["react", "react-dom"],
+    },
+    ssr: {
+      external: [
+        /^react(\/.*)?$/,
+        /^react-dom(\/.*)?$/,
+        /^katex\/dist\/.*\.css$/,
+      ],
+      noExternal: [
+        /^@platform\/app-shell/,
+        /^@platform\/service-catalog/,
+        /^@copilotkit\//,
+        /^@copilotkitnext\//,
+        /^streamdown/,
+        /^rehype-katex/,
+        /^katex$/,
+      ],
+    },
+  };
+
   const monorepoRoot = getMonorepoRoot(appDir);
   const appNodeModules = path.resolve(appDir, "node_modules");
   const appShellSrc = APP_SHELL_SRC_DIR;
@@ -206,7 +240,6 @@ export function getSharedViteConfig(appDir) {
         /^katex\/dist\/.*\.css$/,
       ],
       noExternal: [
-        /^@cloudscape-design\//,
         /^@radix-ui\//,
         /^@base-ui\//,
         /^radix-ui/,