@mostrom/app-shell 0.1.2 → 0.1.4

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/bun.lock

@@ -6,15 +6,13 @@
       "name": "@platform/app-shell",
       "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": "file:../service-catalog",
+        "@platform/service-catalog": "npm:@mostrom/service-catalog@latest",
         "@radix-ui/react-dropdown-menu": "^2.1.4",
         "@tanstack/react-table": "^8.21.3",
         "class-variance-authority": "^0.7.1",
@@ -52,18 +50,6 @@
 
     "@base-ui/utils": ["@base-ui/utils@0.2.4", "", { "dependencies": { "@babel/runtime": "^7.28.4", "@floating-ui/utils": "^0.2.10", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-smZwpMhjO29v+jrZusBSc5T+IJ3vBb9cjIiBjtKcvWmRj9Z4DWGVR3efr1eHR56/bqY5a4qyY9ElkOY5ljo3ng=="],
 
-    "@cloudscape-design/collection-hooks": ["@cloudscape-design/collection-hooks@1.0.82", "", { "dependencies": { "@cloudscape-design/component-toolkit": "^1.0.0-beta" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-e9l8aRGlwXuZ46lK3pSc7OsGj3eKiAzkNTGhTkjxSBa749K1dY/MZ001elJPWpq+ZI5rui5j5950cNPM5sG+sQ=="],
-
-    "@cloudscape-design/component-toolkit": ["@cloudscape-design/component-toolkit@1.0.0-beta.138", "", { "dependencies": { "tslib": "^2.3.1", "weekstart": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-soKxjnmFvY5XroSVqsD0FkYI2ZclF0FipdM8cfrF+eGhuOe5Vs2kcVH+OJz4ZYJddgwaGHCbTO6s0iOA16yVeA=="],
-
-    "@cloudscape-design/components": ["@cloudscape-design/components@3.0.1200", "", { "dependencies": { "@cloudscape-design/collection-hooks": "^1.0.0", "@cloudscape-design/component-toolkit": "^1.0.0-beta", "@cloudscape-design/test-utils-core": "^1.0.0", "@cloudscape-design/theming-runtime": "^1.0.0", "@dnd-kit/core": "^6.0.8", "@dnd-kit/sortable": "^7.0.2", "@dnd-kit/utilities": "^3.2.1", "ace-builds": "^1.34.0", "clsx": "^1.1.0", "d3-shape": "^1.3.7", "date-fns": "^2.25.0", "intl-messageformat": "^10.3.1", "mnth": "^2.0.0", "react-keyed-flatten-children": "^2.2.1", "react-transition-group": "^4.4.2", "tslib": "^2.4.0", "weekstart": "^1.1.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-V/2Ah+f2D4IbNTGu5gI+9dZTWf0V+CVpyKCVxSGlfiti/OLH5kjzeZTzFxSVVDH2ZzMm0CdZH1W8iw94wGnVvQ=="],
-
-    "@cloudscape-design/global-styles": ["@cloudscape-design/global-styles@1.0.50", "", {}, "sha512-IF/z6yhFvN+jWJeXgpHqvs5Eib52R3xOIzPkX/HcoXcDIO818IIwx9cFFgnt9ZHKyduIlmQ1wtBbCdIixMISHw=="],
-
-    "@cloudscape-design/test-utils-core": ["@cloudscape-design/test-utils-core@1.0.71", "", { "dependencies": { "css-selector-tokenizer": "^0.8.0", "css.escape": "^1.5.1" } }, "sha512-4rXQlsd6Rdg+KCNoltLa1+0wjgNugbduuK7L4nTa/Aw/gJIYqrTU78ip5A2VmbDhiE6fiGqtCFmU6LcKCMP//A=="],
-
-    "@cloudscape-design/theming-runtime": ["@cloudscape-design/theming-runtime@1.0.91", "", { "dependencies": { "@material/material-color-utilities": "^0.3.0", "tslib": "^2.4.0" } }, "sha512-umIE/M+tzrFo9c4Skrh4AFFtaDC4eANkjp+xYikUj7ng6wTXj6kkSzxbVbg2fBEmIUgLYAzMHYbyKUzQWuz0ag=="],
-
     "@date-fns/tz": ["@date-fns/tz@1.4.1", "", {}, "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA=="],
 
     "@dnd-kit/accessibility": ["@dnd-kit/accessibility@3.1.1", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, ""],
@@ -84,21 +70,9 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
 
-    "@formatjs/ecma402-abstract": ["@formatjs/ecma402-abstract@2.3.6", "", { "dependencies": { "@formatjs/fast-memoize": "2.2.7", "@formatjs/intl-localematcher": "0.6.2", "decimal.js": "^10.4.3", "tslib": "^2.8.0" } }, "sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw=="],
-
-    "@formatjs/fast-memoize": ["@formatjs/fast-memoize@2.2.7", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ=="],
-
-    "@formatjs/icu-messageformat-parser": ["@formatjs/icu-messageformat-parser@2.11.4", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.6", "@formatjs/icu-skeleton-parser": "1.8.16", "tslib": "^2.8.0" } }, "sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw=="],
-
-    "@formatjs/icu-skeleton-parser": ["@formatjs/icu-skeleton-parser@1.8.16", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.6", "tslib": "^2.8.0" } }, "sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ=="],
-
-    "@formatjs/intl-localematcher": ["@formatjs/intl-localematcher@0.6.2", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA=="],
-
     "@hookform/resolvers": ["@hookform/resolvers@5.2.2", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="],
 
-    "@material/material-color-utilities": ["@material/material-color-utilities@0.3.0", "", {}, "sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g=="],
-
-    "@platform/service-catalog": ["@platform/service-catalog@file:../service-catalog", {}],
+    "@platform/service-catalog": ["@mostrom/service-catalog@0.1.3", "", {}, "sha512-q3GMS6sz4+KTRSFrI5zOPYInCYqnNp6HdZ4yjNq8J6X8Pn2HyEih4QVfB/C4LtJ5g6Qa6P6GS9/GEzctkAnJzA=="],
 
     "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
 
@@ -248,8 +222,6 @@
 
     "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
 
-    "ace-builds": ["ace-builds@1.43.6", "", {}, "sha512-L1ddibQ7F3vyXR2k2fg+I8TQTPWVA6CKeDQr/h2+8CeyTp3W6EQL8xNFZRTztuP8xNOAqL3IYPqdzs31GCjDvg=="],
-
     "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
 
     "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
@@ -258,12 +230,6 @@
 
     "cmdk": ["cmdk@1.1.1", "", { "dependencies": { "@radix-ui/react-compose-refs": "^1.1.1", "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-id": "^1.1.0", "@radix-ui/react-primitive": "^2.0.2" }, "peerDependencies": { "react": "^18 || ^19 || ^19.0.0-rc", "react-dom": "^18 || ^19 || ^19.0.0-rc" } }, "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg=="],
 
-    "css-selector-tokenizer": ["css-selector-tokenizer@0.8.0", "", { "dependencies": { "cssesc": "^3.0.0", "fastparse": "^1.1.2" } }, "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg=="],
-
-    "css.escape": ["css.escape@1.5.1", "", {}, "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="],
-
-    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
-
     "csstype": ["csstype@3.2.3", "", {}, ""],
 
     "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
@@ -276,11 +242,11 @@
 
     "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
 
-    "d3-path": ["d3-path@1.0.9", "", {}, "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="],
+    "d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
 
     "d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
 
-    "d3-shape": ["d3-shape@1.3.7", "", { "dependencies": { "d3-path": "1" } }, "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw=="],
+    "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
 
     "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
 
@@ -292,8 +258,6 @@
 
     "date-fns-jalali": ["date-fns-jalali@4.1.0-0", "", {}, "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg=="],
 
-    "decimal.js": ["decimal.js@10.6.0", "", {}, "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg=="],
-
     "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
 
     "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
@@ -304,14 +268,10 @@
 
     "fast-equals": ["fast-equals@5.4.0", "", {}, "sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw=="],
 
-    "fastparse": ["fastparse@1.1.2", "", {}, "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="],
-
     "get-nonce": ["get-nonce@1.0.1", "", {}, "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="],
 
     "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
 
-    "intl-messageformat": ["intl-messageformat@10.7.18", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.6", "@formatjs/fast-memoize": "2.2.7", "@formatjs/icu-messageformat-parser": "2.11.4", "tslib": "^2.8.0" } }, "sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g=="],
-
     "js-tokens": ["js-tokens@4.0.0", "", {}, ""],
 
     "lodash": ["lodash@4.17.23", "", {}, "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="],
@@ -320,8 +280,6 @@
 
     "lucide-react": ["lucide-react@0.563.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA=="],
 
-    "mnth": ["mnth@2.0.0", "", { "dependencies": { "@babel/runtime": "^7.8.0" } }, "sha512-3ZH4UWBGpAwCKdfjynLQpUDVZWMe6vRHwarIpMdGLUp89CVR9hjzgyWERtMyqx+fPEqQ/PsAxFwvwPxLFxW40A=="],
-
     "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
 
     "object-assign": ["object-assign@4.1.1", "", {}, ""],
@@ -340,8 +298,6 @@
 
     "react-is": ["react-is@18.3.1", "", {}, ""],
 
-    "react-keyed-flatten-children": ["react-keyed-flatten-children@2.2.1", "", { "dependencies": { "react-is": "^18.2.0" }, "peerDependencies": { "react": ">=15.0.0" } }, "sha512-6yBLVO6suN8c/OcJk1mzIrUHdeEzf5rtRVBhxEXAHO49D7SlJ70cG4xrSJrBIAG7MMeQ+H/T151mM2dRDNnFaA=="],
-
     "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
 
     "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
@@ -382,22 +338,8 @@
 
     "victory-vendor": ["victory-vendor@36.9.2", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ=="],
 
-    "weekstart": ["weekstart@1.1.0", "", {}, "sha512-ZO3I7c7J9nwGN1PZKZeBYAsuwWEsCOZi5T68cQoVNYrzrpp5Br0Bgi0OF4l8kH/Ez7nKfxa5mSsXjsgris3+qg=="],
-
     "zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],
 
-    "@cloudscape-design/component-toolkit/weekstart": ["weekstart@2.0.0", "", {}, "sha512-HjYc14IQUwDcnGICuc8tVtqAd6EFpoAQMqgrqcNtWWZB+F1b7iTq44GzwM1qvnH4upFgbhJsaNHuK93NOFheSg=="],
-
-    "@cloudscape-design/components/@dnd-kit/sortable": ["@dnd-kit/sortable@7.0.2", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.0", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.0.7", "react": ">=16.8.0" } }, "sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA=="],
-
-    "@cloudscape-design/components/clsx": ["clsx@1.2.1", "", {}, "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="],
-
-    "@cloudscape-design/components/date-fns": ["date-fns@2.30.0", "", { "dependencies": { "@babel/runtime": "^7.21.0" } }, "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw=="],
-
     "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
-    "victory-vendor/d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
-
-    "victory-vendor/d3-shape/d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
   }
 }

package/package.json

@@ -1,12 +1,8 @@
 {
   "name": "@mostrom/app-shell",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "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.4",
     "@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/CategoriesButton.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import React from "react";
 import { Button } from "../ui/button";
 import {
   DropdownMenu,

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,
@@ -226,4 +225,4 @@ export function AppSidebar({
   );
 }
 
-export { useSidebar, SidebarProvider, SidebarTrigger, SidebarInset } from "./ui/sidebar";
+export { useSidebar, SidebarProvider, SidebarTrigger, SidebarInset } from "../ui/sidebar";

package/src/components/patterns/p-navigation-menu-2.tsx

@@ -0,0 +1,69 @@
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu"
+
+const components = [
+  {
+    title: "Alert Dialog",
+    href: "#",
+    description:
+      "A modal dialog that interrupts the user with important content.",
+  },
+  {
+    title: "Hover Card",
+    href: "#",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "#",
+    description:
+      "Displays an indicator showing the completion progress of a task.",
+  },
+  {
+    title: "Scroll-area",
+    href: "#",
+    description: "Visually or semantically separates content.",
+  },
+]
+
+export function Pattern() {
+  return (
+    <div className="flex items-center justify-center">
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2">
+                {components.map((component) => (
+                  <li key={component.title}>
+                    <NavigationMenuLink
+                      asChild
+                      className="flex flex-col items-start gap-2 p-3"
+                    >
+                      <a href={component.href}>
+                        <div className="text-sm leading-none font-medium">
+                          {component.title}
+                        </div>
+                        <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                          {component.description}
+                        </p>
+                      </a>
+                    </NavigationMenuLink>
+                  </li>
+                ))}
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  )
+}