feat(ui): publish @decocms/ui as an npm package

.github/workflows/publish-ui-npm.yaml

@@ -0,0 +1,80 @@
+name: Publish @decocms/ui
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "packages/ui/**"
+  workflow_dispatch:
+
+permissions:
+  contents: write
+  id-token: write
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+
+      - name: Setup Node.js for npm registry
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24"
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Check if version changed
+        id: version-check
+        run: |
+          CURRENT_VERSION=$(node -e "console.log(require('./package.json').version)")
+
+          if npm view @decocms/ui@$CURRENT_VERSION version >/dev/null 2>&1; then
+            echo "version-changed=false" >> $GITHUB_OUTPUT
+            echo "⏭️ Version $CURRENT_VERSION already published, skipping publish"
+          else
+            echo "version-changed=true" >> $GITHUB_OUTPUT
+            echo "✅ Version $CURRENT_VERSION not found in npm, will publish"
+          fi
+
+          echo "current-version=$CURRENT_VERSION" >> $GITHUB_OUTPUT
+
+          if [[ "$CURRENT_VERSION" == *-* ]]; then
+            echo "npm-tag=next" >> $GITHUB_OUTPUT
+            echo "📦 Prerelease version detected, will publish with tag 'next'"
+          else
+            echo "npm-tag=latest" >> $GITHUB_OUTPUT
+            echo "📦 Stable version detected, will publish with tag 'latest'"
+          fi
+        working-directory: packages/ui
+
+      - name: Publish to npm
+        if: steps.version-check.outputs.version-changed == 'true'
+        run: npm publish --access public --tag ${{ steps.version-check.outputs.npm-tag }} --provenance
+        working-directory: packages/ui
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Create Release
+        if: steps.version-check.outputs.version-changed == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh release create "ui-v${{ steps.version-check.outputs.current-version }}" \
+            --title "@decocms/ui v${{ steps.version-check.outputs.current-version }}" \
+            --notes "## Changes
+
+          Automated release of @decocms/ui package.
+
+          ### Installation
+          \`\`\`bash
+          npm install @decocms/ui
+          \`\`\`"

apps/mesh/index.css

@@ -1,4 +1,4 @@
-@import "@deco/ui/styles/global.css";
+@import "@decocms/ui/styles/global.css";
 @import "@daveyplate/better-auth-ui/css";
 
 @layer base {

apps/mesh/package.json

@@ -75,7 +75,7 @@
     "@anthropic-ai/claude-agent-sdk": "^0.2.80",
     "@better-auth/sso": "1.4.1",
     "@daveyplate/better-auth-ui": "^3.2.7",
-    "@deco/ui": "workspace:*",
+    "@decocms/ui": "workspace:*",
     "@decocms/better-auth": "1.5.17",
     "@decocms/bindings": "workspace:*",
     "@decocms/mcp-utils": "workspace:*",

apps/mesh/src/mcp-apps/mcp-app-renderer.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@deco/ui/lib/utils.ts";
+import { cn } from "@decocms/ui/lib/utils.ts";
 import { useMCPReadResource } from "@decocms/mesh-sdk";
 import type {
   McpUiDisplayMode,

apps/mesh/src/web/components/account-popover.tsx

@@ -4,21 +4,21 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@deco/ui/components/popover.tsx";
+} from "@decocms/ui/components/popover.tsx";
 import {
   Drawer,
   DrawerContent,
   DrawerTitle,
-} from "@deco/ui/components/drawer.tsx";
-import { Avatar } from "@deco/ui/components/avatar.tsx";
+} from "@decocms/ui/components/drawer.tsx";
+import { Avatar } from "@decocms/ui/components/avatar.tsx";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@deco/ui/components/tooltip.tsx";
-import { cn } from "@deco/ui/lib/utils.ts";
-import { useIsMobile } from "@deco/ui/hooks/use-mobile.ts";
+} from "@decocms/ui/components/tooltip.tsx";
+import { cn } from "@decocms/ui/lib/utils.ts";
+import { useIsMobile } from "@decocms/ui/hooks/use-mobile.ts";
 import {
   Check,
   Copy01,
@@ -36,11 +36,11 @@ import {
   VolumeX,
 } from "@untitledui/icons";
 import { GitHubIcon } from "@daveyplate/better-auth-ui";
-import { SidebarMenuButton } from "@deco/ui/components/sidebar.tsx";
+import { SidebarMenuButton } from "@decocms/ui/components/sidebar.tsx";
 import { authClient } from "@/web/lib/auth-client";
 import { CreateOrganizationDialog } from "@/web/components/create-organization-dialog";
 import { usePreferences, type ThemeMode } from "@/web/hooks/use-preferences.ts";
-import { toast } from "@deco/ui/components/sonner.js";
+import { toast } from "@decocms/ui/components/sonner.js";
 
 function getOrgColorStyle(name: string): {
   backgroundColor: string;

apps/mesh/src/web/components/agent-icon.tsx

@@ -10,7 +10,7 @@
  *   - null → deterministic fallback
  */
 
-import { cn } from "@deco/ui/lib/utils.ts";
+import { cn } from "@decocms/ui/lib/utils.ts";
 import * as AllIcons from "@untitledui/icons";
 import { useState, type ComponentType, type SVGProps } from "react";
 

apps/mesh/src/web/components/automations/add-starter-popover.tsx

@@ -5,7 +5,7 @@
 
 import { useAutomationTriggerAdd } from "@/web/hooks/use-automations";
 import { SCHEDULE_UNITS } from "@/web/lib/cron-utils.ts";
-import { Button } from "@deco/ui/components/button.tsx";
+import { Button } from "@decocms/ui/components/button.tsx";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,7 +14,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@deco/ui/components/dropdown-menu.tsx";
+} from "@decocms/ui/components/dropdown-menu.tsx";
 import { Clock, Plus, Zap } from "@untitledui/icons";
 import { useState } from "react";
 import { toast } from "sonner";

apps/mesh/src/web/components/automations/trigger-card.tsx

@@ -24,8 +24,8 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@deco/ui/components/alert-dialog.tsx";
-import { Button } from "@deco/ui/components/button.tsx";
+} from "@decocms/ui/components/alert-dialog.tsx";
+import { Button } from "@decocms/ui/components/button.tsx";
 import { Clock, Edit01, Loading01, XClose, Zap } from "@untitledui/icons";
 import { useState } from "react";
 import { toast } from "sonner";

apps/mesh/src/web/components/chat/connections-banner.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@deco/ui/lib/utils.ts";
+import { cn } from "@decocms/ui/lib/utils.ts";
 import { ChevronRight } from "@untitledui/icons";
 
 const FEATURED_ICONS = [

apps/mesh/src/web/components/chat/context-panel.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@deco/ui/lib/utils.ts";
+import { cn } from "@decocms/ui/lib/utils.ts";
 import {
   AlertCircle,
   CheckCircle,

apps/mesh/src/web/components/chat/credits-empty-state.tsx

@@ -9,20 +9,20 @@
 
 import { useState } from "react";
 import { Coins04, ArrowRight } from "@untitledui/icons";
-import { Button } from "@deco/ui/components/button.tsx";
-import { Input } from "@deco/ui/components/input.tsx";
+import { Button } from "@decocms/ui/components/button.tsx";
+import { Input } from "@decocms/ui/components/input.tsx";
 import {
   ToggleGroup,
   ToggleGroupItem,
-} from "@deco/ui/components/toggle-group.tsx";
+} from "@decocms/ui/components/toggle-group.tsx";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogDescription,
-} from "@deco/ui/components/dialog.tsx";
-import { cn } from "@deco/ui/lib/utils.ts";
+} from "@decocms/ui/components/dialog.tsx";
+import { cn } from "@decocms/ui/lib/utils.ts";
 import { useMutation } from "@tanstack/react-query";
 import { toast } from "sonner";
 import {

apps/mesh/src/web/components/chat/credits-exhausted-banner.tsx

@@ -8,20 +8,20 @@
 
 import { useState } from "react";
 import { Check } from "@untitledui/icons";
-import { Button } from "@deco/ui/components/button.tsx";
+import { Button } from "@decocms/ui/components/button.tsx";
 import {
   ToggleGroup,
   ToggleGroupItem,
-} from "@deco/ui/components/toggle-group.tsx";
+} from "@decocms/ui/components/toggle-group.tsx";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogDescription,
-} from "@deco/ui/components/dialog.tsx";
-import { Input } from "@deco/ui/components/input.tsx";
-import { cn } from "@deco/ui/lib/utils.ts";
+} from "@decocms/ui/components/dialog.tsx";
+import { Input } from "@decocms/ui/components/input.tsx";
+import { cn } from "@decocms/ui/lib/utils.ts";
 import { useMutation } from "@tanstack/react-query";
 import { toast } from "sonner";
 import {

apps/mesh/src/web/components/chat/credits-eyebrow.tsx

@@ -7,7 +7,7 @@
  */
 
 import { Coins04, AlertCircle } from "@untitledui/icons";
-import { cn } from "@deco/ui/lib/utils.ts";
+import { cn } from "@decocms/ui/lib/utils.ts";
 import { useNavigate } from "@tanstack/react-router";
 import { useProjectContext } from "@decocms/mesh-sdk";
 

apps/mesh/src/web/components/chat/dialog-prompt-arguments.tsx

@@ -2,24 +2,24 @@ import {
   displayToolName,
   getGatewayClientId,
 } from "@decocms/mcp-utils/aggregate";
-import { Button } from "@deco/ui/components/button.tsx";
+import { Button } from "@decocms/ui/components/button.tsx";
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@deco/ui/components/dialog.tsx";
+} from "@decocms/ui/components/dialog.tsx";
 import {
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from "@deco/ui/components/form.tsx";
-import { Input } from "@deco/ui/components/input.tsx";
-import { Spinner } from "@deco/ui/components/spinner.tsx";
+} from "@decocms/ui/components/form.tsx";
+import { Input } from "@decocms/ui/components/input.tsx";
+import { Spinner } from "@decocms/ui/components/spinner.tsx";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { Prompt } from "@modelcontextprotocol/sdk/types.js";
 import { useId } from "react";

apps/mesh/src/web/components/chat/highlight/approval.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { Button } from "@deco/ui/components/button.tsx";
+import { Button } from "@decocms/ui/components/button.tsx";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@deco/ui/components/select.tsx";
+} from "@decocms/ui/components/select.tsx";
 import { ShieldTick } from "@untitledui/icons";
 import { useState } from "react";
 import {

apps/mesh/src/web/components/chat/highlight/card.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@deco/ui/lib/utils.ts";
+import { cn } from "@decocms/ui/lib/utils.ts";
 import { ArrowLeft, ArrowRight } from "@untitledui/icons";
 
 // ============================================================================

apps/mesh/src/web/components/chat/highlight/index.tsx

@@ -1,5 +1,5 @@
-import { Button } from "@deco/ui/components/button.tsx";
-import { cn } from "@deco/ui/lib/utils.ts";
+import { Button } from "@decocms/ui/components/button.tsx";
+import { cn } from "@decocms/ui/lib/utils.ts";
 import { AlertCircle, AlertTriangle, X } from "@untitledui/icons";
 import { usePreferences } from "@/web/hooks/use-preferences.ts";
 import { useChatStream, useChatTask } from "../context";

apps/mesh/src/web/components/chat/highlight/propose-plan.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@deco/ui/components/button.tsx";
+import { Button } from "@decocms/ui/components/button.tsx";
 import { Check } from "@untitledui/icons";
 import { HighlightCard } from "./card";
 import { MessageTextPart } from "../message/parts/text-part.tsx";

apps/mesh/src/web/components/chat/highlight/user-ask-question.tsx

@@ -1,13 +1,13 @@
-import { Button } from "@deco/ui/components/button.tsx";
+import { Button } from "@decocms/ui/components/button.tsx";
 import {
   Form,
   FormControl,
   FormField,
   FormItem,
   FormMessage,
-} from "@deco/ui/components/form.tsx";
-import { Tabs, TabsContent } from "@deco/ui/components/tabs.tsx";
-import { cn } from "@deco/ui/lib/utils.ts";
+} from "@decocms/ui/components/form.tsx";
+import { Tabs, TabsContent } from "@decocms/ui/components/tabs.tsx";
+import { cn } from "@decocms/ui/lib/utils.ts";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Edit02, MessageQuestionCircle } from "@untitledui/icons";
 import { useEffect, useRef, useState } from "react";

apps/mesh/src/web/components/chat/ice-breakers.tsx

@@ -3,28 +3,28 @@ import {
   getGatewayClientId,
   stripToolNamespace,
 } from "@decocms/mcp-utils/aggregate";
-import { Spinner } from "@deco/ui/components/spinner.tsx";
+import { Spinner } from "@decocms/ui/components/spinner.tsx";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@deco/ui/components/tooltip.tsx";
-import { cn } from "@deco/ui/lib/utils.ts";
+} from "@decocms/ui/components/tooltip.tsx";
+import { cn } from "@decocms/ui/lib/utils.ts";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
-} from "@deco/ui/components/dialog.tsx";
+} from "@decocms/ui/components/dialog.tsx";
 import {
   Drawer,
   DrawerContent,
   DrawerHeader,
   DrawerTitle,
-} from "@deco/ui/components/drawer.tsx";
+} from "@decocms/ui/components/drawer.tsx";
 import { CollectionSearch } from "@/web/components/collections/collection-search.tsx";
-import { useIsMobile } from "@deco/ui/hooks/use-mobile.ts";
+import { useIsMobile } from "@decocms/ui/hooks/use-mobile.ts";
 import {
   getPrompt,
   getWellKnownDecopilotVirtualMCP,

apps/mesh/src/web/components/chat/image-lightbox.tsx

@@ -5,8 +5,8 @@ import {
   DialogPortal,
   DialogOverlay,
   DialogTitle,
-} from "@deco/ui/components/dialog.tsx";
-import { cn } from "@deco/ui/lib/utils.js";
+} from "@decocms/ui/components/dialog.tsx";
+import { cn } from "@decocms/ui/lib/utils.js";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Download01, ZoomIn, ZoomOut } from "@untitledui/icons";
 import { useRef, useState } from "react";

apps/mesh/src/web/components/chat/index.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@deco/ui/lib/utils.ts";
+import { cn } from "@decocms/ui/lib/utils.ts";
 import type { PropsWithChildren } from "react";
 import {
   ChatContextProvider,