@mostrom/app-shell 0.1.1 → 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
 
@@ -14,69 +14,63 @@ From `platform/shared/packages/app-shell`:
 Default scope is `@mostrom` (override with `--scope` if needed).
 
 ```bash
-# Dry run
-npm run publish:npm:dry-run -- --version 0.1.0
-# or: sh scripts/publish-npm.sh --version 0.1.0 --dry-run
+# Dry run (auto-increment patch version)
+npm run publish:npm:dry-run
+# or: sh scripts/publish-npm.sh --dry-run
 
-# Publish to latest
+# Publish to latest (auto-increment patch version)
+npm run publish:npm
+# or: sh scripts/publish-npm.sh
+
+# First run or explicit override
 npm run publish:npm -- --version 0.1.0
 # or: sh scripts/publish-npm.sh --version 0.1.0
 
 # Publish to custom tag
-npm run publish:npm -- --version 0.1.0 --tag next
-# or: sh scripts/publish-npm.sh --version 0.1.0 --tag next
+npm run publish:npm -- --tag next
+# or: sh scripts/publish-npm.sh --tag next
 ```
 
-The script reads `NODE_AUTH_TOKEN` from environment variables, and also checks `app-shell/.env` for that key.
+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
 
-### Initial Setup (New Apps)
+### Setup (No Init Script)
 
-Run the init script to configure a new app to use app-shell:
+App setup is file-based and does not require running an init command.
 
-```bash
-# From your app's frontend directory, run the init script directly
-node ../../../shared/packages/app-shell/bin/init.js
+Install using npm aliases so existing imports stay as `@platform/*`:
 
-# Force overwrite existing files
-node ../../../shared/packages/app-shell/bin/init.js --force
-
-# Alternative: If app-shell is linked in node_modules, use the bin
-./node_modules/.bin/app-shell-init
+```json
+{
+  "dependencies": {
+    "@platform/app-shell": "npm:@mostrom/app-shell@latest",
+    "@platform/service-catalog": "npm:@mostrom/service-catalog@latest"
+  }
+}
 ```
 
-> **Note:** In this monorepo, prefer running the local init script directly. If you publish to npm, consumers can also use the installed bin (`app-shell-init`).
-
-The init script creates/updates:
-
-- `app/tailwind.css` - Imports app-shell styles
-- `tailwind.config.ts` - Configured to scan app-shell components
-- `components.json` - shadcn/ui configuration
-- `app/lib/utils.ts` - Utility functions (cn, getBasePathHref)
+Required app files:
 
-### When to Run Init
-
-| Scenario                                    | Run Init?                                            |
-| ------------------------------------------- | ---------------------------------------------------- |
-| Setting up a new app                        | Yes                                                  |
-| CSS changes in app-shell                    | No - changes are picked up automatically             |
-| Adding new shadcn components                | No - use `npx shadcn@latest add <component>`         |
-| Tailwind not scanning app-shell classes     | Yes, with `--force` to regenerate tailwind.config.ts |
-| Upgrading app-shell with new required files | Yes, with `--force`                                  |
+- `app/tailwind.css`
+- `tailwind.config.ts`
+- `components.json`
+- `app/lib/utils.ts`
+- `vite.config.ts` using `getSharedViteConfig()` from `@platform/app-shell/vite`
 
 ### Troubleshooting
 
 **Styles not applying from app-shell:**
 
-1. Ensure `tailwind.config.ts` includes the app-shell path in `content`:
+1. Ensure `tailwind.config.ts` includes app-shell content:
    ```ts
    content: [
      "./app/**/*.{ts,tsx,js,jsx}",
-     "../../../shared/packages/app-shell/src/**/*.{ts,tsx}",
+     "./node_modules/@platform/app-shell/src/**/*.{ts,tsx}",
    ],
    ```
-2. Run `node ../../../shared/packages/app-shell/bin/init.js --force` to regenerate config files
 
 **Conflicting CSS (wrong colors, broken layout):**
 
@@ -101,72 +95,55 @@ The init script creates/updates:
 +--------+-----------------------------------------+---------------+
 ```
 
-## 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              |
-
-### Service Header (below Global Header, full width)
-
-Cloudscape `AppLayoutToolbar`.
-
-| 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      |
-
-### Left Panel
+## UI 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)
+App Shell provides a comprehensive set of UI components built with Radix UI and Tailwind CSS:
 
-### Right Panel
+### Layout Components
 
-- Slot: `tools` in `AppLayoutToolbar`
-- Content: Empty container (no `HelpPanel`)
+| Component | Description |
+| --------- | ----------- |
+| `AppShell` | Main layout wrapper with header, navigation, and content areas |
+| `SpaceBetween` | Flexbox container with consistent gap sizing (xxxs to xxl) |
 
-### Notifications
+### Form & Input Components
 
-- Slot: `notifications` in `AppLayoutToolbar`
-- Component: `Flashbar`
+| 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 |
 
-### Main Content Area
+### Display Components
 
-- Renders `children` passed to `AppShell`
+| 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 |
 
-## Required Cloudscape Packages
+### Data Components
 
-- `@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.
 
-Add this to your app's `package.json` dependencies:
+Use this alias in consuming apps:
 
 ```json
 {
-  "@mostrom/service-catalog": "file:../../../shared/packages/service-catalog"
+  "@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

@@ -35,9 +35,11 @@
         "vaul": "^1.1.2",
         "zod": "^4.3.6",
       },
+      "devDependencies": {
+        "@types/react": "19.2.14",
+        "@types/react-dom": "19.2.3",
+      },
       "peerDependencies": {
-        "@types/react": "^19.0.0",
-        "@types/react-dom": "^19.0.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
       },
@@ -242,7 +244,7 @@
 
     "@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
 
-    "@types/react": ["@types/react@19.2.13", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-KkiJeU6VbYbUOp5ITMIc7kBfqlYkKA5KhEHVrGMmUUMt7NeaZg65ojdPk+FtNrBAOXNVM5QM72jnADjM+XVRAQ=="],
+    "@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="],
 
     "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
 

package/package.json

@@ -1,12 +1,8 @@
 {
   "name": "@mostrom/app-shell",
-  "version": "0.1.1",
+  "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,14 +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.3",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
@@ -53,8 +48,7 @@
     "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
-    "zod": "^4.3.6",
-    "@mostrom/service-catalog": "^0.1.1"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@types/react": "19.2.14",

package/scripts/publish-npm.sh

@@ -4,14 +4,15 @@ set -eu
 usage() {
   cat <<USAGE
 Usage:
-  ./scripts/publish-npm.sh --version <version> [--scope <scope>] [--tag <tag>] [--otp <code>] [--dry-run]
-  ./scripts/publish-npm.sh <version> [--scope <scope>] [--tag <tag>] [--otp <code>] [--dry-run]
+  ./scripts/publish-npm.sh [--version <version>] [--scope <scope>] [--tag <tag>] [--otp <code>] [--dry-run]
+  ./scripts/publish-npm.sh [<version>] [--scope <scope>] [--tag <tag>] [--otp <code>] [--dry-run]
 
 Examples:
+  ./scripts/publish-npm.sh
   ./scripts/publish-npm.sh 0.1.0
   ./scripts/publish-npm.sh --version 0.1.0 --scope @mostrom --tag next
   ./scripts/publish-npm.sh --version 0.1.0 --scope mostrom --otp 123456
-  ./scripts/publish-npm.sh --version 0.1.0 --dry-run
+  ./scripts/publish-npm.sh --dry-run
 USAGE
 }
 
@@ -19,6 +20,7 @@ SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
 APP_SHELL_DIR="$(cd "${SCRIPT_DIR}/.." && pwd)"
 PACKAGES_DIR="$(cd "${APP_SHELL_DIR}/.." && pwd)"
 SERVICE_CATALOG_DIR="${PACKAGES_DIR}/service-catalog"
+VERSION_STATE_FILE="${SCRIPT_DIR}/.publish-version"
 
 VERSION=""
 SCOPE="@mostrom"
@@ -69,12 +71,6 @@ while [ "$#" -gt 0 ]; do
   esac
 done
 
-if [ -z "$VERSION" ]; then
-  echo "Error: version is required." >&2
-  usage
-  exit 1
-fi
-
 case "$SCOPE" in
   @*) ;;
   *) SCOPE="@$SCOPE" ;;
@@ -89,6 +85,54 @@ fi
 SERVICE_CATALOG_PACKAGE_NAME="${SCOPE}/service-catalog"
 APP_SHELL_PACKAGE_NAME="${SCOPE}/app-shell"
 
+bump_patch_version() {
+  current_version="$1"
+  CURRENT_VERSION="$current_version" node - <<'NODE'
+const value = process.env.CURRENT_VERSION;
+if (!/^\d+\.\d+\.\d+$/.test(value || "")) {
+  process.exit(1);
+}
+const [major, minor, patch] = value.split('.').map(Number);
+process.stdout.write(`${major}.${minor}.${patch + 1}`);
+NODE
+}
+
+infer_next_version() {
+  if [ -f "$VERSION_STATE_FILE" ]; then
+    last_version="$(tr -d '[:space:]' < "$VERSION_STATE_FILE")"
+    if [ -z "$last_version" ]; then
+      echo "Error: $VERSION_STATE_FILE is empty. Pass --version explicitly once." >&2
+      exit 1
+    fi
+    next_version="$(bump_patch_version "$last_version" || true)"
+    if [ -z "$next_version" ]; then
+      echo "Error: invalid version in $VERSION_STATE_FILE ($last_version). Pass --version explicitly once." >&2
+      exit 1
+    fi
+    echo "$next_version"
+    return 0
+  fi
+
+  latest_registry_version="$(npm view "$SERVICE_CATALOG_PACKAGE_NAME" version 2>/dev/null || true)"
+  if [ -n "$latest_registry_version" ]; then
+    next_version="$(bump_patch_version "$latest_registry_version" || true)"
+    if [ -z "$next_version" ]; then
+      echo "Error: failed to parse latest registry version ($latest_registry_version). Pass --version explicitly." >&2
+      exit 1
+    fi
+    echo "$next_version"
+    return 0
+  fi
+
+  echo "Error: Could not infer next version. Pass --version explicitly once (for example: --version 0.1.0)." >&2
+  exit 1
+}
+
+if [ -z "$VERSION" ]; then
+  VERSION="$(infer_next_version)"
+  echo "==> Auto-incremented version: ${VERSION}"
+fi
+
 TMP_DIR="$(mktemp -d)"
 cleanup() {
   rm -rf "$TMP_DIR"
@@ -126,6 +170,7 @@ copy_pkg() {
     --exclude .env \
     --exclude test-results \
     --exclude .DS_Store \
+    --exclude scripts/.publish-version \
     "$from_dir/" "$to_dir/"
 }
 
@@ -135,12 +180,14 @@ rewrite_manifest() {
   package_name="$3"
   service_catalog_package="${4:-}"
   service_catalog_range="${5:-}"
+  service_catalog_alias="${6:-}"
 
   MANIFEST_PATH="$manifest_path" \
   PACKAGE_VERSION="$package_version" \
   PACKAGE_NAME="$package_name" \
   SERVICE_CATALOG_PACKAGE="$service_catalog_package" \
   SERVICE_CATALOG_RANGE="$service_catalog_range" \
+  SERVICE_CATALOG_ALIAS="$service_catalog_alias" \
   node - <<'NODE'
 const fs = require('fs');
 const p = process.env.MANIFEST_PATH;
@@ -148,15 +195,18 @@ const version = process.env.PACKAGE_VERSION;
 const packageName = process.env.PACKAGE_NAME;
 const serviceCatalogPackage = process.env.SERVICE_CATALOG_PACKAGE;
 const serviceCatalogRange = process.env.SERVICE_CATALOG_RANGE;
+const serviceCatalogAlias = process.env.SERVICE_CATALOG_ALIAS;
 const pkg = JSON.parse(fs.readFileSync(p, 'utf8'));
 pkg.name = packageName;
 pkg.version = version;
 pkg.private = false;
 pkg.publishConfig = { ...(pkg.publishConfig || {}), access: 'public' };
-if (pkg.dependencies && pkg.dependencies['@platform/service-catalog']) {
-  delete pkg.dependencies['@platform/service-catalog'];
-}
-if (serviceCatalogPackage && serviceCatalogRange) {
+if (serviceCatalogAlias) {
+  pkg.dependencies = { ...(pkg.dependencies || {}), ['@platform/service-catalog']: serviceCatalogAlias };
+  if (serviceCatalogPackage && pkg.dependencies && pkg.dependencies[serviceCatalogPackage]) {
+    delete pkg.dependencies[serviceCatalogPackage];
+  }
+} else if (serviceCatalogPackage && serviceCatalogRange) {
   pkg.dependencies = { ...(pkg.dependencies || {}), [serviceCatalogPackage]: serviceCatalogRange };
 }
 fs.writeFileSync(p, JSON.stringify(pkg, null, 2) + '\n');
@@ -171,7 +221,7 @@ copy_pkg "$SERVICE_CATALOG_DIR" "$SERVICE_TMP_DIR"
 copy_pkg "$APP_SHELL_DIR" "$APP_SHELL_TMP_DIR"
 
 rewrite_manifest "${SERVICE_TMP_DIR}/package.json" "$VERSION" "$SERVICE_CATALOG_PACKAGE_NAME"
-rewrite_manifest "${APP_SHELL_TMP_DIR}/package.json" "$VERSION" "$APP_SHELL_PACKAGE_NAME" "$SERVICE_CATALOG_PACKAGE_NAME" "^${VERSION}"
+rewrite_manifest "${APP_SHELL_TMP_DIR}/package.json" "$VERSION" "$APP_SHELL_PACKAGE_NAME" "$SERVICE_CATALOG_PACKAGE_NAME" "^${VERSION}" "npm:${SERVICE_CATALOG_PACKAGE_NAME}@^${VERSION}"
 
 publish_pkg() {
   pkg_dir="$1"
@@ -196,7 +246,14 @@ publish_pkg() {
 publish_pkg "$SERVICE_TMP_DIR" "$SERVICE_CATALOG_PACKAGE_NAME"
 publish_pkg "$APP_SHELL_TMP_DIR" "$APP_SHELL_PACKAGE_NAME"
 
+if [ "$DRY_RUN" -eq 0 ]; then
+  printf "%s\n" "$VERSION" > "$VERSION_STATE_FILE"
+fi
+
 echo "==> Done"
 echo "Published version: ${VERSION}"
 echo "Scope: ${SCOPE}"
 echo "Tag: ${TAG}"
+if [ "$DRY_RUN" -eq 0 ]; then
+  echo "Version state file: ${VERSION_STATE_FILE}"
+fi

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-board/board-card-content.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import * as Popover from "@radix-ui/react-popover";
-import Badge from "@cloudscape-design/components/badge";
-import Button from "@cloudscape-design/components/button";
-import SpaceBetween from "@cloudscape-design/components/space-between";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { SpaceBetween } from "../ui/space-between";
 import { format, isToday, isTomorrow, isValid, parseISO } from "date-fns";
 import {
   DateSelector,

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/sectioned-list-table/table-cell-content.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Badge from "@cloudscape-design/components/badge";
+import { Badge } from "../ui/badge";
 import type { Assignee, ColumnDefinition, TableBadgeColor } from "./types";
 import { AssigneeSelector } from "@/components/ui/assignee-selector";
 

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

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+      // 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",
+        grey: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200",
+        red: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  color,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  // If color is provided, use color variant; otherwise use variant (defaulting to "default")
+  const resolvedVariant = color ? undefined : (variant ?? "default")
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={color ?? variant}
+      className={cn(badgeVariants({ variant: resolvedVariant, color }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }