@mostrom/app-shell 0.1.1 → 0.1.2

package/README.md

@@ -14,69 +14,50 @@ 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.
 
 ## Quick Start
 
-### Initial Setup (New Apps)
-
-Run the init script to configure a new app to use app-shell:
-
-```bash
-# From your app's frontend directory, run the init script directly
-node ../../../shared/packages/app-shell/bin/init.js
-
-# Force overwrite existing files
-node ../../../shared/packages/app-shell/bin/init.js --force
+### Setup (No Init Script)
 
-# Alternative: If app-shell is linked in node_modules, use the bin
-./node_modules/.bin/app-shell-init
-```
+App setup is now file-based and does not require running an init command.
 
-> **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`).
+Required app files:
 
-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)
-
-### 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):**
 
@@ -158,13 +139,7 @@ The App Shell builds the **All services** menu and global search suggestions fro
 `@mostrom/service-catalog`. Until we move to a monorepo workspace setup, each
 app should explicitly depend on this package to avoid module resolution issues.
 
-Add this to your app's `package.json` dependencies:
-
-```json
-{
-  "@mostrom/service-catalog": "file:../../../shared/packages/service-catalog"
-}
-```
+When consuming published packages, install `@platform/service-catalog` as an npm alias to `@mostrom/service-catalog`.
 
 ## Notes
 

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,6 +1,6 @@
 {
   "name": "@mostrom/app-shell",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
   "type": "module",
   "bin": {
@@ -35,6 +35,7 @@
     "@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",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
@@ -53,8 +54,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/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/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/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 Cloudscape compatibility
+      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 }

package/src/components/ui/button.tsx

@@ -19,6 +19,10 @@ 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
+        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",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -43,10 +47,12 @@ function Button({
   variant = "default",
   size = "default",
   asChild = false,
+  fullWidth = false,
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
+    fullWidth?: boolean
   }) {
   const Comp = asChild ? Slot.Root : "button"
 
@@ -55,7 +61,7 @@ function Button({
       data-slot="button"
       data-variant={variant}
       data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={cn(buttonVariants({ variant, size, className }), fullWidth && "w-full")}
       {...props}
     />
   )

package/src/components/ui/index.ts

@@ -1,5 +1,6 @@
 // UI Components (shadcn/ui + reui)
 export * from "./avatar";
+export * from "./badge";
 export * from "./breadcrumb";
 export * from "./button";
 export * from "./button-group";
@@ -24,6 +25,7 @@ export * from "./scroll-area";
 export * from "./select";
 export * from "./separator";
 export * from "./sheet";
+export * from "./space-between";
 export * from "./sidebar";
 export * from "./skeleton";
 export * from "./sonner";

package/src/components/ui/space-between.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const spaceBetweenVariants = cva("flex", {
+  variants: {
+    direction: {
+      vertical: "flex-col",
+      horizontal: "flex-row",
+    },
+    size: {
+      xxxs: "gap-0.5",  // 2px
+      xxs: "gap-1",     // 4px
+      xs: "gap-2",      // 8px
+      s: "gap-3",       // 12px
+      m: "gap-4",       // 16px
+      l: "gap-6",       // 24px
+      xl: "gap-8",      // 32px
+      xxl: "gap-10",    // 40px
+    },
+    alignItems: {
+      center: "items-center",
+      start: "items-start",
+      end: "items-end",
+      baseline: "items-baseline",
+      stretch: "items-stretch",
+    },
+  },
+  defaultVariants: {
+    direction: "vertical",
+    size: "m",
+    alignItems: "stretch",
+  },
+})
+
+export interface SpaceBetweenProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof spaceBetweenVariants> {}
+
+function SpaceBetween({
+  className,
+  direction,
+  size,
+  alignItems,
+  children,
+  ...props
+}: SpaceBetweenProps) {
+  return (
+    <div
+      data-slot="space-between"
+      className={cn(spaceBetweenVariants({ direction, size, alignItems }), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export { SpaceBetween, spaceBetweenVariants }

package/src/vite.js

@@ -1,11 +1,15 @@
 import fs from "node:fs";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
 
 /**
  * Returns the monorepo root directory (platform/).
  * @param {string} currentDir
  * @returns {string}
  */
+const APP_SHELL_SRC_DIR = path.dirname(fileURLToPath(import.meta.url));
+const APP_SHELL_PACKAGE_DIR = path.resolve(APP_SHELL_SRC_DIR, "..");
+
 function getMonorepoRoot(currentDir) {
   let dir = currentDir;
   while (dir !== "/") {
@@ -99,9 +103,9 @@ function ssrCssStubPlugin() {
 export function getSharedViteConfig(appDir) {
   const monorepoRoot = getMonorepoRoot(appDir);
   const appNodeModules = path.resolve(appDir, "node_modules");
-  const sharedPackages = path.resolve(monorepoRoot, "shared/packages");
-  const appShellSrc = path.resolve(sharedPackages, "app-shell/src");
-  const appShellNodeModules = path.resolve(sharedPackages, "app-shell/node_modules");
+  const appShellSrc = APP_SHELL_SRC_DIR;
+  const packageNodeModules = path.resolve(APP_SHELL_PACKAGE_DIR, "node_modules");
+  const appShellNodeModules = fs.existsSync(packageNodeModules) ? packageNodeModules : appNodeModules;
   const appHasDndKit = fs.existsSync(path.resolve(appNodeModules, "@dnd-kit/core"));
   const dndKitNodeModules = appHasDndKit ? appNodeModules : appShellNodeModules;
 
@@ -111,10 +115,6 @@ export function getSharedViteConfig(appDir) {
       preserveSymlinks: true,
       alias: [
         // Source aliases for HMR during development
-        {
-          find: /^@platform\/service-catalog(\/.*)?$/,
-          replacement: `${path.resolve(sharedPackages, "service-catalog/src")}$1`,
-        },
         {
           find: /^@platform\/app-shell(\/.*)?$/,
           replacement: `${appShellSrc}$1`,

package/bin/init.js

@@ -1,269 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * @platform/app-shell init
- *
- * Sets up a new app to use the app-shell package correctly.
- * Similar to `shadcn init` but configured for our monorepo structure.
- *
- * Usage (from your app's frontend directory):
- *   node ../../../shared/packages/app-shell/bin/init.js
- *   node ../../../shared/packages/app-shell/bin/init.js --force
- *
- * Note: npx/bunx won't work - this is a private monorepo package, not published to npm.
- *
- * What it does:
- *   1. Creates minimal app/tailwind.css (delegates to app-shell)
- *   2. Creates components.json (shadcn/ui configuration)
- *   3. Creates app/lib/utils.ts (cn utility + getBasePathHref)
- *   4. Creates tailwind.config.ts
- *   5. Validates vite.config.ts uses getSharedViteConfig()
- */
-
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const cwd = process.cwd();
-
-// ANSI colors
-const green = (s) => `\x1b[32m${s}\x1b[0m`;
-const yellow = (s) => `\x1b[33m${s}\x1b[0m`;
-const red = (s) => `\x1b[31m${s}\x1b[0m`;
-const cyan = (s) => `\x1b[36m${s}\x1b[0m`;
-const dim = (s) => `\x1b[2m${s}\x1b[0m`;
-
-console.log();
-console.log(cyan("@platform/app-shell init"));
-console.log(dim("Setting up app-shell configuration..."));
-console.log();
-
-// Templates
-const TAILWIND_CSS = `@import "https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap";
-@import "tw-animate-css";
-@import "tailwindcss";
-@import "@platform/app-shell/styles.css";
-@config "../tailwind.config.ts";
-`;
-
-// Compute relative path to app-shell from current directory
-function getAppShellRelativePath() {
-  // The init script is at app-shell/bin/init.js
-  // So app-shell src is at ../src relative to this script
-  const appShellSrc = path.resolve(__dirname, "../src");
-  const relativePath = path.relative(cwd, appShellSrc);
-  return relativePath.replace(/\\/g, "/"); // Normalize for all platforms
-}
-
-const appShellPath = getAppShellRelativePath();
-
-const TAILWIND_CONFIG = `export default {
-  darkMode: "class",
-  content: [
-    "./app/**/*.{ts,tsx,js,jsx}",
-    // Include app-shell components for Tailwind to scan
-    "${appShellPath}/**/*.{ts,tsx}",
-  ],
-};
-`;
-
-const COMPONENTS_JSON = `{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "app/tailwind.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "rtl": false,
-  "aliases": {
-    "components": "~/components",
-    "utils": "~/lib/utils",
-    "ui": "~/components/ui",
-    "lib": "~/lib",
-    "hooks": "~/hooks"
-  },
-  "registries": {}
-}
-`;
-
-const UTILS_TS = `import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-/**
- * Returns a path with the VITE_BASE_PATH prefix for use in href attributes.
- * React Router's navigate() handles basename automatically, but href attributes
- * on Cloudscape Link components (or native <a> tags) do not.
- *
- * @param path - The relative path (e.g., "/clients/123" or "/scheduling/abc")
- * @returns The path prefixed with the base path (e.g., "/client-management/clients/123")
- */
-export function getBasePathHref(path: string): string {
-  const configuredBasePath = import.meta.env.VITE_BASE_PATH;
-  if (typeof configuredBasePath !== "string") {
-    throw new Error("VITE_BASE_PATH must be defined");
-  }
-  const basePath = configuredBasePath.replace(/\\/$/, "");
-  const normalizedPath = path.startsWith("/") ? path : \`/\${path}\`;
-  if (basePath === "" || basePath === "/") {
-    return normalizedPath;
-  }
-  return \`\${basePath}\${normalizedPath}\`;
-}
-`;
-
-// Helper functions
-function ensureDir(dir) {
-  if (!fs.existsSync(dir)) {
-    fs.mkdirSync(dir, { recursive: true });
-  }
-}
-
-function writeFile(filePath, content, overwrite = false) {
-  const relativePath = path.relative(cwd, filePath);
-
-  if (fs.existsSync(filePath) && !overwrite) {
-    // Check if content is different
-    const existing = fs.readFileSync(filePath, "utf-8");
-    if (existing === content) {
-      console.log(dim(`  ${relativePath} (unchanged)`));
-      return false;
-    }
-    console.log(yellow(`  ${relativePath} (exists, skipping - use --force to overwrite)`));
-    return false;
-  }
-
-  fs.writeFileSync(filePath, content);
-  console.log(green(`  ${relativePath}`));
-  return true;
-}
-
-function checkViteConfig() {
-  const viteConfigPath = path.join(cwd, "vite.config.ts");
-  if (!fs.existsSync(viteConfigPath)) {
-    console.log(yellow("  vite.config.ts not found - skipping validation"));
-    return;
-  }
-
-  const content = fs.readFileSync(viteConfigPath, "utf-8");
-
-  if (!content.includes("getSharedViteConfig")) {
-    console.log();
-    console.log(yellow("Warning: vite.config.ts does not use getSharedViteConfig()"));
-    console.log(dim("Consider updating it to use the shared config:"));
-    console.log();
-    console.log(dim(`  import { getSharedViteConfig } from "@platform/app-shell/vite";`));
-    console.log(dim(`  import { mergeConfig } from "vite";`));
-    console.log();
-    console.log(dim(`  export default defineConfig(({ mode }) => {`));
-    console.log(dim(`    const shared = getSharedViteConfig(__dirname);`));
-    console.log(dim(`    return mergeConfig(shared, { /* app-specific config */ });`));
-    console.log(dim(`  });`));
-  } else {
-    console.log(green("  vite.config.ts uses getSharedViteConfig()"));
-  }
-}
-
-function checkConflictingCss() {
-  // Check for app.css or other CSS files that might conflict with app-shell
-  const conflictingFiles = ["app/app.css", "app/global.css", "app/globals.css"];
-  const found = [];
-
-  for (const file of conflictingFiles) {
-    const filePath = path.join(cwd, file);
-    if (fs.existsSync(filePath)) {
-      const content = fs.readFileSync(filePath, "utf-8");
-      // Check if it has html/body/root blocks with hardcoded colors
-      // These patterns specifically target global style overrides
-      const hasGlobalColorOverride =
-        /(?:html|body|\:root)\s*\{[^}]*(?:background-color|background|color)\s*:/i.test(content);
-
-      if (hasGlobalColorOverride) {
-        found.push(file);
-      }
-    }
-  }
-
-  if (found.length > 0) {
-    console.log();
-    console.log(yellow("Warning: Found CSS files that may conflict with app-shell:"));
-    for (const file of found) {
-      console.log(red(`  ${file}`));
-    }
-    console.log(dim("These files have html/body/:root blocks with hardcoded colors."));
-    console.log(dim("Remove these blocks and rely on app-shell/styles.css for theming."));
-  } else {
-    console.log(green("  No conflicting CSS files found"));
-  }
-}
-
-// Check for --force flag
-const force = process.argv.includes("--force") || process.argv.includes("-f");
-
-// Preflight checks
-console.log("Preflight checks:");
-
-// Check if we're in a frontend directory
-const packageJsonPath = path.join(cwd, "package.json");
-if (!fs.existsSync(packageJsonPath)) {
-  console.log(red("  package.json not found"));
-  console.log(dim("  Run this command from your frontend directory"));
-  process.exit(1);
-}
-console.log(green("  Found package.json"));
-
-// Check for app directory (React Router convention)
-const appDir = path.join(cwd, "app");
-if (!fs.existsSync(appDir)) {
-  console.log(yellow("  app/ directory not found - will create it"));
-}
-console.log(green("  Found app/ directory"));
-
-// Check for @platform/app-shell dependency
-const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
-const hasAppShell = packageJson.dependencies?.["@platform/app-shell"] ||
-                    packageJson.devDependencies?.["@platform/app-shell"];
-if (!hasAppShell) {
-  console.log(yellow("  @platform/app-shell not in dependencies"));
-  console.log(dim("  Add it: \"@platform/app-shell\": \"file:../../../shared/packages/app-shell\""));
-} else {
-  console.log(green("  Found @platform/app-shell dependency"));
-}
-
-console.log();
-console.log("Creating files:");
-
-// Ensure directories exist
-ensureDir(path.join(cwd, "app"));
-ensureDir(path.join(cwd, "app/lib"));
-
-// Create files
-writeFile(path.join(cwd, "app/tailwind.css"), TAILWIND_CSS, force);
-writeFile(path.join(cwd, "tailwind.config.ts"), TAILWIND_CONFIG, force);
-writeFile(path.join(cwd, "components.json"), COMPONENTS_JSON, force);
-writeFile(path.join(cwd, "app/lib/utils.ts"), UTILS_TS, force);
-
-console.log();
-console.log("Validating configuration:");
-checkViteConfig();
-checkConflictingCss();
-
-console.log();
-console.log(green("Done!"));
-console.log();
-console.log("Next steps:");
-console.log(dim("  1. Run 'bun install' to install dependencies"));
-console.log(dim("  2. Import '@platform/app-shell' in your layout component"));
-console.log(dim("  3. Run 'bun run dev' to start the dev server"));
-console.log();