@mostrom/app-shell 0.1.0

package/src/components/ui/actions-dropdown.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export interface ActionsDropdownItem {
+  /** Unique identifier for the item */
+  id: string
+  /** Display text for the item */
+  label: string
+  /** Optional icon to display before the label */
+  icon?: React.ReactNode
+  /** Click handler for the item */
+  onClick?: () => void
+  /** Whether the item is disabled */
+  disabled?: boolean
+  /** Visual variant - use "destructive" for delete actions */
+  variant?: "default" | "destructive"
+}
+
+export interface ActionsDropdownProps {
+  /** The items to display in the dropdown */
+  items: ActionsDropdownItem[]
+  /** The label for the dropdown trigger button */
+  children?: React.ReactNode
+  /** Button variant */
+  variant?: "default" | "outline" | "secondary" | "ghost" | "primary"
+  /** Alignment of the dropdown content */
+  align?: "start" | "center" | "end"
+  /** Additional class name for the trigger button */
+  className?: string
+}
+
+/**
+ * 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
+ * ```tsx
+ * <ActionsDropdown
+ *   items={[
+ *     { id: "edit", label: "Edit", icon: <PencilIcon className="size-4" /> },
+ *     { id: "duplicate", label: "Duplicate", icon: <CopyIcon className="size-4" /> },
+ *     { id: "delete", label: "Delete", variant: "destructive", icon: <Trash2Icon className="size-4" /> },
+ *   ]}
+ * >
+ *   Actions
+ * </ActionsDropdown>
+ * ```
+ */
+export function ActionsDropdown({
+  items,
+  children = "Actions",
+  variant = "outline",
+  align = "end",
+  className,
+}: ActionsDropdownProps) {
+  // Group items by separators (items with id starting with "divider" or "separator")
+  const groupedItems: (ActionsDropdownItem | "separator")[] = []
+
+  items.forEach((item) => {
+    if (item.id.startsWith("divider") || item.id.startsWith("separator")) {
+      groupedItems.push("separator")
+    } else {
+      groupedItems.push(item)
+    }
+  })
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant={variant === "primary" ? "default" : variant} className={className}>
+          {children}
+          <ChevronDownIcon className="ml-2 size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={align}>
+        {groupedItems.map((item, index) => {
+          if (item === "separator") {
+            return <DropdownMenuSeparator key={`separator-${index}`} />
+          }
+
+          return (
+            <DropdownMenuItem
+              key={item.id}
+              onClick={item.onClick}
+              disabled={item.disabled}
+              variant={item.variant}
+            >
+              {item.icon}
+              {item.label}
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/ui/assignee-selector.tsx

@@ -0,0 +1,209 @@
+"use client"
+
+import * as React from "react"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface Assignee {
+  id: string;
+  name: string;
+  email: string;
+  avatar?: string;
+}
+
+export interface AssigneeSelectorProps {
+  /** Whether the selector is open */
+  open: boolean
+  /** Callback when the open state changes */
+  onOpenChange: (open: boolean) => void
+  /** List of available assignees */
+  assignees: Assignee[]
+  /** Currently selected assignee ID */
+  selectedId?: string
+  /** Callback when an assignee is selected */
+  onSelect: (assignee: Assignee | null) => void
+  /** Placeholder text for search input */
+  placeholder?: string
+  /** Title for the dialog (for accessibility) */
+  title?: string
+  /** Allow unassigning (selecting no one) */
+  allowUnassign?: boolean
+  /**
+   * Mode: 'popover' renders as anchored popover (for inline use),
+   * 'dialog' renders as centered modal (legacy behavior)
+   * @default 'popover'
+   */
+  mode?: 'popover' | 'dialog'
+  /**
+   * Trigger element for popover mode. If not provided, the popover will be
+   * controlled externally and you must position it yourself.
+   */
+  children?: React.ReactNode
+  /**
+   * Alignment for popover mode
+   * @default 'start'
+   */
+  align?: 'start' | 'center' | 'end'
+  /**
+   * Side for popover mode
+   * @default 'bottom'
+   */
+  side?: 'top' | 'right' | 'bottom' | 'left'
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function getInitials(name: string): string {
+  const parts = name
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+
+  if (parts.length === 0) return "?"
+
+  return parts
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? "")
+    .join("")
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function AssigneeSelector({
+  open,
+  onOpenChange,
+  assignees,
+  selectedId,
+  onSelect,
+  placeholder = "Search by name or email...",
+  title = "Select Assignee",
+  allowUnassign = true,
+  mode = 'popover',
+  children,
+  align = 'start',
+  side = 'bottom',
+}: AssigneeSelectorProps) {
+  const handleSelect = (assignee: Assignee | null) => {
+    onSelect(assignee)
+    onOpenChange(false)
+  }
+
+  const commandContent = (
+    <Command className="**:data-[selected=true]:bg-muted **:data-selected:bg-transparent">
+      <CommandInput placeholder={placeholder} />
+      <CommandList>
+        <CommandEmpty>No team members found.</CommandEmpty>
+        <CommandGroup heading="Team Members">
+          {allowUnassign && (
+            <CommandItem
+              onSelect={() => handleSelect(null)}
+              className="gap-2 py-2"
+            >
+              <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
+                <span className="text-xs">?</span>
+              </div>
+              <div className="flex flex-1 flex-col">
+                <span className="text-sm font-medium">Unassigned</span>
+                <span className="text-muted-foreground text-xs">
+                  Remove assignee
+                </span>
+              </div>
+              {!selectedId && (
+                <div className="ml-auto text-primary" data-slot="command-shortcut">
+                  <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </div>
+              )}
+            </CommandItem>
+          )}
+          {assignees.map((assignee) => (
+            <CommandItem
+              key={assignee.id}
+              value={`${assignee.name} ${assignee.email}`}
+              onSelect={() => handleSelect(assignee)}
+              className="gap-2 py-2"
+            >
+              <Avatar className="size-6 shrink-0">
+                {assignee.avatar && (
+                  <AvatarImage src={assignee.avatar} alt={assignee.name} />
+                )}
+                <AvatarFallback className="text-xs">
+                  {getInitials(assignee.name)}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex flex-1 flex-col">
+                <span className="text-sm font-medium">{assignee.name}</span>
+                <span className="text-muted-foreground text-xs">
+                  {assignee.email}
+                </span>
+              </div>
+              {selectedId === assignee.id && (
+                <div className="ml-auto text-primary" data-slot="command-shortcut">
+                  <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </div>
+              )}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+
+  // Dialog mode (legacy centered modal)
+  if (mode === 'dialog') {
+    return (
+      <CommandDialog
+        open={open}
+        onOpenChange={onOpenChange}
+        title={title}
+        description="Search and select a team member to assign"
+        showCloseButton={false}
+      >
+        {commandContent}
+      </CommandDialog>
+    )
+  }
+
+  // Popover mode (anchored below trigger)
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      {children && <PopoverTrigger asChild>{children}</PopoverTrigger>}
+      <PopoverContent
+        className="w-72 p-0"
+        align={align}
+        side={side}
+        sideOffset={4}
+      >
+        {commandContent}
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/components/ui/avatar.tsx

@@ -0,0 +1,107 @@
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "xs" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6 data-[size=xs]:size-5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs group-data-[size=xs]/avatar:text-[10px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5 text-muted-foreground", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

package/src/components/ui/button-group.tsx

@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,64 @@
+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(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "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 }