feat: Add shadcn config and sidebar

packages/serverless-workflow-diagram-editor/README.md

@@ -40,6 +40,52 @@ pnpm run build:storybook
 pnpm run start
 ```
 
+## shadcn/ui
+
+This package uses [shadcn/ui](https://ui.shadcn.com/) for UI primitives. Configuration lives in `components.json` at the package root.
+
+### Key settings
+
+- **Style**: `new-york` — compact spacing and sharper corners
+- **Tailwind prefix**: `dec:` — all generated classes are prefixed to avoid conflicts with host applications
+- **CSS target**: `src/components/ui/shadcn.css` — where shadcn injects its CSS variables
+- **Path aliases**: `@/components`, `@/lib`, `@/hooks` — resolved via `tsconfig.json` paths and Vite's `tsconfigPaths`
+- **Icon library**: `lucide` (generates `lucide-react` imports)
+
+### Adding a new shadcn component
+
+The shadcn CLI doesn't understand pnpm catalogs, so adding a component requires a manual step.
+
+1. **Generate the component**
+
+   ```bash
+   cd packages/serverless-workflow-diagram-editor
+   pnpm dlx shadcn@latest add <component>
+   ```
+
+   This creates the component in `src/components/ui/` and adds any new dependencies (e.g. `@radix-ui/*`) to `package.json` with a pinned version.
+
+2. **Move the dependency to the pnpm catalog**
+
+   The CLI writes something like `"@radix-ui/react-tooltip": "^1.2.3"` directly into `package.json`. To follow the workspace convention:
+   - Add the package and version to the `catalog:` section in the **root** `pnpm-workspace.yaml`
+   - Replace the pinned version in the editor's `package.json` with `"catalog:"`
+
+3. **Verify consistency**
+
+   ```bash
+   # From the repo root
+   pnpm dependencies:check
+   ```
+
+   This runs syncpack to confirm all workspace packages use the catalog. If you missed a dependency, run `pnpm dependencies:fix`.
+
+4. **Install**
+
+   ```bash
+   pnpm install
+   ```
+
 ## Package Structure
 
 ```

packages/serverless-workflow-diagram-editor/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/components/ui/shadcn.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": "dec"
+  },
+  "aliases": {
+    "components": "@/components",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "utils": "@/lib/utils",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

packages/serverless-workflow-diagram-editor/package.json

@@ -44,7 +44,10 @@
     "@serverlessworkflow/i18n": "workspace:*",
     "@serverlessworkflow/sdk": "catalog:",
     "@xyflow/react": "catalog:",
-    "js-yaml": "catalog:"
+    "class-variance-authority": "catalog:",
+    "clsx": "catalog:",
+    "js-yaml": "catalog:",
+    "radix-ui": "catalog:"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "catalog:",

packages/serverless-workflow-diagram-editor/src/components/ui/button.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "dec:inline-flex dec:shrink-0 dec:items-center dec:justify-center dec:gap-2 dec:rounded-md dec:text-sm dec:font-medium dec:whitespace-nowrap dec:transition-all dec:outline-none dec:focus-visible:border-ring dec:focus-visible:ring-[3px] dec:focus-visible:ring-ring/50 dec:disabled:pointer-events-none dec:disabled:opacity-50 dec:aria-invalid:border-destructive dec:aria-invalid:ring-destructive/20 dec:dark:aria-invalid:ring-destructive/40 dec:[&_svg]:pointer-events-none dec:[&_svg]:shrink-0 dec:[&_svg:not([class*=size-])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "dec:bg-primary dec:text-primary-foreground dec:hover:bg-primary/90",
+        destructive:
+          "dec:bg-destructive dec:text-white dec:hover:bg-destructive/90 dec:focus-visible:ring-destructive/20 dec:dark:bg-destructive/60 dec:dark:focus-visible:ring-destructive/40",
+        outline:
+          "dec:border dec:bg-background dec:shadow-xs dec:hover:bg-accent dec:hover:text-accent-foreground dec:dark:border-input dec:dark:bg-input/30 dec:dark:hover:bg-input/50",
+        secondary: "dec:bg-secondary dec:text-secondary-foreground dec:hover:bg-secondary/80",
+        ghost: "dec:hover:bg-accent dec:hover:text-accent-foreground dec:dark:hover:bg-accent/50",
+        link: "dec:text-primary dec:underline-offset-4 dec:hover:underline",
+      },
+      size: {
+        default: "dec:h-9 dec:px-4 dec:py-2 dec:has-[>svg]:px-3",
+        xs: "dec:h-6 dec:gap-1 dec:rounded-md dec:px-2 dec:text-xs dec:has-[>svg]:px-1.5 dec:[&_svg:not([class*=size-])]:size-3",
+        sm: "dec:h-8 dec:gap-1.5 dec:rounded-md dec:px-3 dec:has-[>svg]:px-2.5",
+        lg: "dec:h-10 dec:rounded-md dec:px-6 dec:has-[>svg]:px-4",
+        icon: "dec:size-9",
+        "icon-xs": "dec:size-6 dec:rounded-md dec:[&_svg:not([class*=size-])]:size-3",
+        "icon-sm": "dec:size-8",
+        "icon-lg": "dec:size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

packages/serverless-workflow-diagram-editor/src/components/ui/input.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "dec:h-9 dec:w-full dec:min-w-0 dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:px-3 dec:py-1 dec:text-base dec:shadow-xs dec:transition-[color,box-shadow] dec:outline-none dec:selection:bg-primary dec:selection:text-primary-foreground dec:file:inline-flex dec:file:h-7 dec:file:border-0 dec:file:bg-transparent dec:file:text-sm dec:file:font-medium dec:file:text-foreground dec:placeholder:text-muted-foreground dec:disabled:pointer-events-none dec:disabled:cursor-not-allowed dec:disabled:opacity-50 dec:md:text-sm dec:dark:bg-input/30",
+        "dec:focus-visible:border-ring dec:focus-visible:ring-[3px] dec:focus-visible:ring-ring/50",
+        "dec:aria-invalid:border-destructive dec:aria-invalid:ring-destructive/20 dec:dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

packages/serverless-workflow-diagram-editor/src/components/ui/separator.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "dec:shrink-0 dec:bg-border dec:data-[orientation=horizontal]:h-px dec:data-[orientation=horizontal]:w-full dec:data-[orientation=vertical]:h-full dec:data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

packages/serverless-workflow-diagram-editor/src/components/ui/shadcn.css

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+  shadcn/ui component styles.
+
+  The shadcn CLI (via components.json) points here for CSS variable
+  injection. Keep all shadcn-specific CSS in this file so it stays
+  isolated from the editor's own global styles in styles.css.
+
+  Imported by styles.css.
+*/
+
+.dec-root {
+  --sidebar: hsl(0 0% 98%);
+
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+
+  --sidebar-primary: hsl(240 5.9% 10%);
+
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+
+  --sidebar-accent: hsl(240 4.8% 95.9%);
+
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+
+  --sidebar-border: hsl(220 13% 91%);
+
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+.dec-root.dark {
+  --sidebar: #2d3748;
+
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+
+  --sidebar-accent: #3d4a5c;
+
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+
+  --sidebar-border: #3d4a5c;
+
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+@theme inline {
+  --color-sidebar: var(--sidebar);
+
+  --color-sidebar-foreground: var(--sidebar-foreground);
+
+  --color-sidebar-primary: var(--sidebar-primary);
+
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+
+  --color-sidebar-accent: var(--sidebar-accent);
+
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+
+  --color-sidebar-border: var(--sidebar-border);
+
+  --color-sidebar-ring: var(--sidebar-ring);
+}