@devfellowship/components 1.3.0 → 1.4.0

package/dist/index.cjs

@@ -112,6 +112,7 @@ __export(src_exports, {
   ContextMenuSubContent: () => ContextMenuSubContent,
   ContextMenuSubTrigger: () => ContextMenuSubTrigger,
   ContextMenuTrigger: () => ContextMenuTrigger,
+  DEFAULT_NAME_COL_WIDTH: () => DEFAULT_NAME_COL_WIDTH,
   DflRemote: () => DflRemote,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
@@ -311,6 +312,7 @@ __export(src_exports, {
   memberHueVar: () => memberHueVar,
   navigationMenuTriggerStyle: () => navigationMenuTriggerStyle,
   parseTags: () => parseTags,
+  resolveNameColWidth: () => resolveNameColWidth,
   resolveWeekCount: () => resolveWeekCount,
   resolveWeekLabels: () => resolveWeekLabels,
   stageProgress: () => stageProgress,
@@ -5074,6 +5076,12 @@ function AppNavbar({
 // src/components/organisms/Gantt.tsx
 var React44 = __toESM(require("react"), 1);
 var import_jsx_runtime63 = require("react/jsx-runtime");
+var DEFAULT_NAME_COL_WIDTH = 320;
+function resolveNameColWidth(nameColWidth, labelWidth) {
+  if (typeof nameColWidth === "number" && nameColWidth > 0) return Math.round(nameColWidth);
+  if (typeof labelWidth === "number" && labelWidth > 0) return Math.round(labelWidth);
+  return DEFAULT_NAME_COL_WIDTH;
+}
 function clampPct(value) {
   if (value == null || Number.isNaN(value)) return 0;
   return Math.max(0, Math.min(100, Math.round(value)));
@@ -5116,7 +5124,8 @@ function Gantt({
   rowsHeader = "Stage / Task",
   stagesOnly = false,
   header,
-  labelWidth = 240,
+  labelWidth,
+  nameColWidth,
   weekMinWidth = 64,
   className,
   style,
@@ -5124,6 +5133,7 @@ function Gantt({
 }) {
   const weekCount = resolveWeekCount(stages, weeks);
   const weekLabels = resolveWeekLabels(weekCount, weeks);
+  const nameWidth = resolveNameColWidth(nameColWidth, labelWidth);
   const [collapsed, setCollapsed] = React44.useState(
     () => Object.fromEntries(stages.filter((s) => s.collapsed).map((s) => [s.id, true]))
   );
@@ -5164,7 +5174,8 @@ function Gantt({
     window.addEventListener("resize", handler);
     return () => window.removeEventListener("resize", handler);
   }, [dependencies.length, recomputeEdges]);
-  const trackTemplate = `${labelWidth}px repeat(${weekCount}, minmax(${weekMinWidth}px, 1fr))`;
+  const trackTemplate = `${nameWidth}px repeat(${weekCount}, minmax(${weekMinWidth}px, 1fr))`;
+  const stickyCol = "sticky left-0 z-20 after:absolute after:inset-y-0 after:right-0 after:w-px after:bg-[var(--s-border-subtle,#2A2622)]";
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
     "div",
     {
@@ -5227,7 +5238,16 @@ function Gantt({
               className: "grid items-center border-b border-[var(--s-border-subtle,#2A2622)] bg-[var(--s-surface-raised,#1A1714)]",
               style: { gridTemplateColumns: trackTemplate },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "px-4 py-2.5 font-[var(--s-font-mono,monospace)] text-[10.5px] font-medium uppercase tracking-[0.6px] text-[var(--s-ink-muted,#7D7568)]", children: rowsHeader }),
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      stickyCol,
+                      "bg-[var(--s-surface-raised,#1A1714)] px-4 py-2.5 font-[var(--s-font-mono,monospace)] text-[10.5px] font-medium uppercase tracking-[0.6px] text-[var(--s-ink-muted,#7D7568)]"
+                    ),
+                    children: rowsHeader
+                  }
+                ),
                 weekLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
                   "div",
                   {
@@ -5258,7 +5278,10 @@ function Gantt({
                       {
                         type: "button",
                         onClick: () => toggle(stage.id),
-                        className: "flex items-center gap-2 px-4 py-3 text-left hover:bg-[var(--s-surface-raised,#1A1714)] transition-colors",
+                        className: cn(
+                          stickyCol,
+                          "flex items-center gap-2 bg-[var(--s-surface-panel,#141210)] px-4 py-3 text-left transition-colors hover:bg-[var(--s-surface-raised,#1A1714)]"
+                        ),
                         "aria-expanded": !isCollapsed,
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Chevron, { open: !isCollapsed }),
@@ -5270,8 +5293,22 @@ function Gantt({
                             }
                           ),
                           /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "min-w-0", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "block truncate text-[13px] font-semibold text-[var(--s-ink-primary,#F6F1E7)]", children: stage.title }),
-                            stage.subtitle && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "block truncate text-[11px] text-[var(--s-ink-muted,#7D7568)]", children: stage.subtitle })
+                            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                              "span",
+                              {
+                                className: "block truncate text-[13px] font-semibold text-[var(--s-ink-primary,#F6F1E7)]",
+                                title: stage.title,
+                                children: stage.title
+                              }
+                            ),
+                            stage.subtitle && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                              "span",
+                              {
+                                className: "block truncate text-[11px] text-[var(--s-ink-muted,#7D7568)]",
+                                title: stage.subtitle,
+                                children: stage.subtitle
+                              }
+                            )
                           ] }),
                           ms.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "ml-auto shrink-0 rounded-[var(--c-badge-radius,4px)] bg-[var(--s-surface-elevated,#1F1C18)] px-1.5 py-0.5 font-[var(--s-font-mono,monospace)] text-[10px] tabular-nums text-[var(--s-ink-secondary,#C9C0B4)]", children: [
                             done,
@@ -5330,20 +5367,30 @@ function Gantt({
                     className: "grid items-center border-b border-[var(--s-border-subtle,#2A2622)] bg-[var(--s-surface-page,#0A0908)]",
                     style: { gridTemplateColumns: trackTemplate },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center gap-2 py-2 pl-10 pr-4", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StatusDot, { done: m.done, color: dot }),
-                        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                          "span",
-                          {
-                            className: cn(
-                              "min-w-0 flex-1 truncate text-[13px]",
-                              m.done ? "text-[var(--s-ink-muted,#7D7568)] line-through" : "text-[var(--s-ink-secondary,#C9C0B4)]"
+                      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+                        "div",
+                        {
+                          className: cn(
+                            stickyCol,
+                            "flex items-center gap-2 bg-[var(--s-surface-page,#0A0908)] py-2 pl-10 pr-4"
+                          ),
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StatusDot, { done: m.done, color: dot }),
+                            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                              "span",
+                              {
+                                className: cn(
+                                  "min-w-0 flex-1 truncate text-[13px]",
+                                  m.done ? "text-[var(--s-ink-muted,#7D7568)] line-through" : "text-[var(--s-ink-secondary,#C9C0B4)]"
+                                ),
+                                title: m.title,
+                                children: m.title
+                              }
                             ),
-                            children: m.title
-                          }
-                        ),
-                        m.points != null && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "shrink-0 font-[var(--s-font-mono,monospace)] text-[10px] tabular-nums text-[var(--s-ink-muted,#7D7568)]", children: m.points })
-                      ] }),
+                            m.points != null && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "shrink-0 font-[var(--s-font-mono,monospace)] text-[10px] tabular-nums text-[var(--s-ink-muted,#7D7568)]", children: m.points })
+                          ]
+                        }
+                      ),
                       /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
                         "div",
                         {
@@ -5896,6 +5943,7 @@ var useFeatureFlags = () => {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  DEFAULT_NAME_COL_WIDTH,
   DflRemote,
   Dialog,
   DialogClose,
@@ -6095,6 +6143,7 @@ var useFeatureFlags = () => {
   memberHueVar,
   navigationMenuTriggerStyle,
   parseTags,
+  resolveNameColWidth,
   resolveWeekCount,
   resolveWeekLabels,
   stageProgress,

package/dist/index.d.cts

@@ -985,11 +985,25 @@ interface GanttProps extends React$1.HTMLAttributes<HTMLDivElement> {
     stagesOnly?: boolean;
     /** Optional header strip (e.g. member + per-stage progress pills). */
     header?: React$1.ReactNode;
-    /** Px width of the left rows column. Defaults to 240. */
+    /**
+     * Px width of the left (sticky) name column.
+     * @deprecated prefer `nameColWidth` — kept as a fallback for back-compat.
+     */
     labelWidth?: number;
+    /**
+     * Px width of the left (sticky) STAGE/TASK name column. Takes precedence
+     * over `labelWidth`. Defaults to 320 — wide enough that long stage/task
+     * titles read in full; overflow ellipsizes with a native tooltip. Bump this
+     * higher (e.g. 420) on full-width pages where you have the room.
+     */
+    nameColWidth?: number;
     /** Min px width of a single week column. Defaults to 64. */
     weekMinWidth?: number;
 }
+/** Default width of the sticky name column. ~2× the original 240 → readable. */
+declare const DEFAULT_NAME_COL_WIDTH = 320;
+/** Resolve the effective name-column width: `nameColWidth` > `labelWidth` > default. */
+declare function resolveNameColWidth(nameColWidth?: number, labelWidth?: number): number;
 /** Clamp a 0..100 percentage to an integer. */
 declare function clampPct(value: number | undefined): number;
 /** Progress for a stage: explicit `progress`, else done/total of milestones. */
@@ -1006,7 +1020,7 @@ declare function barGridColumn(weekStart: number, weekSpan: number, weekCount: n
     start: number;
     span: number;
 };
-declare function Gantt({ stages, weeks, dependencies, rowsHeader, stagesOnly, header, labelWidth, weekMinWidth, className, style, ...rest }: GanttProps): react_jsx_runtime.JSX.Element;
+declare function Gantt({ stages, weeks, dependencies, rowsHeader, stagesOnly, header, labelWidth, nameColWidth, weekMinWidth, className, style, ...rest }: GanttProps): react_jsx_runtime.JSX.Element;
 
 /** Minimal subset of `@supabase/supabase-js` SupabaseClient we rely on.
  * Kept structural so the package never hard-depends on supabase-js. */
@@ -1083,4 +1097,4 @@ declare function validatePublishForm(input: {
 }): string | null;
 declare function PublishDrawer({ open, onOpenChange, supabase, videoUrl, transcript, suggestedTitle, suggestedDescription, suggestedThumbnailUrl, thumbnailTemplateId, buId, registerLesson, onPublished, onError, className, }: PublishDrawerProps): react_jsx_runtime.JSX.Element;
 
-export { ALLOWED_ORIGINS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppNavbar, type AppNavbarProps, AppSidebar, type AppSidebarProps, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEntry, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DflIframeMessage, type DflNavigateMessage, type DflReadyMessage, DflRemote, type DflRemoteProps, type DflResizeMessage, type DflSetTokenMessage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gantt, type GanttDependency, type GanttMilestone, type GanttProps, type GanttStage, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, IframeAware, type IframeAwareProps, IframeContext, type IframeContextValue, type IframeMessageType, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, type KbdProps, Label, LoginPage, type LoginPageProps, LoginScreen, type LoginScreenProps, MEMBER_PALETTE_SIZE, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavGroup, type NavItem, type NavbarUserInfo, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, Progress, ProtectedRoute, type ProtectedRouteProps, PublishDrawer, type PublishDrawerProps, type PublishDrawerSupabase, type PublishResult, type PublishStatus, type PublisherAccount, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SonnerToaster, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast, ToastAction, type ToastActionElement, ToastClose, type ToastComponentProps, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatar, type UserAvatarProps, type UserInfo, UserMenu, type UserMenuItem, type UserMenuProps, badgeVariants, barGridColumn, buttonVariants, clampPct, filterPublishableAccounts, getInitials, iconButtonVariants, isAllowedOrigin, kbdVariants, labelVariants, memberHueIndex, memberHueVar, navigationMenuTriggerStyle, parseTags, resolveWeekCount, resolveWeekLabels, stageProgress, toggleVariants, useFormField, useSidebar, validatePublishForm };
+export { ALLOWED_ORIGINS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppNavbar, type AppNavbarProps, AppSidebar, type AppSidebarProps, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEntry, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_NAME_COL_WIDTH, type DflIframeMessage, type DflNavigateMessage, type DflReadyMessage, DflRemote, type DflRemoteProps, type DflResizeMessage, type DflSetTokenMessage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gantt, type GanttDependency, type GanttMilestone, type GanttProps, type GanttStage, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, IframeAware, type IframeAwareProps, IframeContext, type IframeContextValue, type IframeMessageType, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, type KbdProps, Label, LoginPage, type LoginPageProps, LoginScreen, type LoginScreenProps, MEMBER_PALETTE_SIZE, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavGroup, type NavItem, type NavbarUserInfo, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, Progress, ProtectedRoute, type ProtectedRouteProps, PublishDrawer, type PublishDrawerProps, type PublishDrawerSupabase, type PublishResult, type PublishStatus, type PublisherAccount, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SonnerToaster, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast, ToastAction, type ToastActionElement, ToastClose, type ToastComponentProps, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatar, type UserAvatarProps, type UserInfo, UserMenu, type UserMenuItem, type UserMenuProps, badgeVariants, barGridColumn, buttonVariants, clampPct, filterPublishableAccounts, getInitials, iconButtonVariants, isAllowedOrigin, kbdVariants, labelVariants, memberHueIndex, memberHueVar, navigationMenuTriggerStyle, parseTags, resolveNameColWidth, resolveWeekCount, resolveWeekLabels, stageProgress, toggleVariants, useFormField, useSidebar, validatePublishForm };

package/dist/index.d.ts

@@ -985,11 +985,25 @@ interface GanttProps extends React$1.HTMLAttributes<HTMLDivElement> {
     stagesOnly?: boolean;
     /** Optional header strip (e.g. member + per-stage progress pills). */
     header?: React$1.ReactNode;
-    /** Px width of the left rows column. Defaults to 240. */
+    /**
+     * Px width of the left (sticky) name column.
+     * @deprecated prefer `nameColWidth` — kept as a fallback for back-compat.
+     */
     labelWidth?: number;
+    /**
+     * Px width of the left (sticky) STAGE/TASK name column. Takes precedence
+     * over `labelWidth`. Defaults to 320 — wide enough that long stage/task
+     * titles read in full; overflow ellipsizes with a native tooltip. Bump this
+     * higher (e.g. 420) on full-width pages where you have the room.
+     */
+    nameColWidth?: number;
     /** Min px width of a single week column. Defaults to 64. */
     weekMinWidth?: number;
 }
+/** Default width of the sticky name column. ~2× the original 240 → readable. */
+declare const DEFAULT_NAME_COL_WIDTH = 320;
+/** Resolve the effective name-column width: `nameColWidth` > `labelWidth` > default. */
+declare function resolveNameColWidth(nameColWidth?: number, labelWidth?: number): number;
 /** Clamp a 0..100 percentage to an integer. */
 declare function clampPct(value: number | undefined): number;
 /** Progress for a stage: explicit `progress`, else done/total of milestones. */
@@ -1006,7 +1020,7 @@ declare function barGridColumn(weekStart: number, weekSpan: number, weekCount: n
     start: number;
     span: number;
 };
-declare function Gantt({ stages, weeks, dependencies, rowsHeader, stagesOnly, header, labelWidth, weekMinWidth, className, style, ...rest }: GanttProps): react_jsx_runtime.JSX.Element;
+declare function Gantt({ stages, weeks, dependencies, rowsHeader, stagesOnly, header, labelWidth, nameColWidth, weekMinWidth, className, style, ...rest }: GanttProps): react_jsx_runtime.JSX.Element;
 
 /** Minimal subset of `@supabase/supabase-js` SupabaseClient we rely on.
  * Kept structural so the package never hard-depends on supabase-js. */
@@ -1083,4 +1097,4 @@ declare function validatePublishForm(input: {
 }): string | null;
 declare function PublishDrawer({ open, onOpenChange, supabase, videoUrl, transcript, suggestedTitle, suggestedDescription, suggestedThumbnailUrl, thumbnailTemplateId, buId, registerLesson, onPublished, onError, className, }: PublishDrawerProps): react_jsx_runtime.JSX.Element;
 
-export { ALLOWED_ORIGINS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppNavbar, type AppNavbarProps, AppSidebar, type AppSidebarProps, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEntry, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DflIframeMessage, type DflNavigateMessage, type DflReadyMessage, DflRemote, type DflRemoteProps, type DflResizeMessage, type DflSetTokenMessage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gantt, type GanttDependency, type GanttMilestone, type GanttProps, type GanttStage, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, IframeAware, type IframeAwareProps, IframeContext, type IframeContextValue, type IframeMessageType, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, type KbdProps, Label, LoginPage, type LoginPageProps, LoginScreen, type LoginScreenProps, MEMBER_PALETTE_SIZE, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavGroup, type NavItem, type NavbarUserInfo, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, Progress, ProtectedRoute, type ProtectedRouteProps, PublishDrawer, type PublishDrawerProps, type PublishDrawerSupabase, type PublishResult, type PublishStatus, type PublisherAccount, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SonnerToaster, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast, ToastAction, type ToastActionElement, ToastClose, type ToastComponentProps, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatar, type UserAvatarProps, type UserInfo, UserMenu, type UserMenuItem, type UserMenuProps, badgeVariants, barGridColumn, buttonVariants, clampPct, filterPublishableAccounts, getInitials, iconButtonVariants, isAllowedOrigin, kbdVariants, labelVariants, memberHueIndex, memberHueVar, navigationMenuTriggerStyle, parseTags, resolveWeekCount, resolveWeekLabels, stageProgress, toggleVariants, useFormField, useSidebar, validatePublishForm };
+export { ALLOWED_ORIGINS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppNavbar, type AppNavbarProps, AppSidebar, type AppSidebarProps, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEntry, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_NAME_COL_WIDTH, type DflIframeMessage, type DflNavigateMessage, type DflReadyMessage, DflRemote, type DflRemoteProps, type DflResizeMessage, type DflSetTokenMessage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gantt, type GanttDependency, type GanttMilestone, type GanttProps, type GanttStage, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, IframeAware, type IframeAwareProps, IframeContext, type IframeContextValue, type IframeMessageType, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, type KbdProps, Label, LoginPage, type LoginPageProps, LoginScreen, type LoginScreenProps, MEMBER_PALETTE_SIZE, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavGroup, type NavItem, type NavbarUserInfo, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, Progress, ProtectedRoute, type ProtectedRouteProps, PublishDrawer, type PublishDrawerProps, type PublishDrawerSupabase, type PublishResult, type PublishStatus, type PublisherAccount, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SonnerToaster, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast, ToastAction, type ToastActionElement, ToastClose, type ToastComponentProps, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatar, type UserAvatarProps, type UserInfo, UserMenu, type UserMenuItem, type UserMenuProps, badgeVariants, barGridColumn, buttonVariants, clampPct, filterPublishableAccounts, getInitials, iconButtonVariants, isAllowedOrigin, kbdVariants, labelVariants, memberHueIndex, memberHueVar, navigationMenuTriggerStyle, parseTags, resolveNameColWidth, resolveWeekCount, resolveWeekLabels, stageProgress, toggleVariants, useFormField, useSidebar, validatePublishForm };

package/dist/index.js

@@ -4754,6 +4754,12 @@ function AppNavbar({
 // src/components/organisms/Gantt.tsx
 import * as React44 from "react";
 import { jsx as jsx63, jsxs as jsxs31 } from "react/jsx-runtime";
+var DEFAULT_NAME_COL_WIDTH = 320;
+function resolveNameColWidth(nameColWidth, labelWidth) {
+  if (typeof nameColWidth === "number" && nameColWidth > 0) return Math.round(nameColWidth);
+  if (typeof labelWidth === "number" && labelWidth > 0) return Math.round(labelWidth);
+  return DEFAULT_NAME_COL_WIDTH;
+}
 function clampPct(value) {
   if (value == null || Number.isNaN(value)) return 0;
   return Math.max(0, Math.min(100, Math.round(value)));
@@ -4796,7 +4802,8 @@ function Gantt({
   rowsHeader = "Stage / Task",
   stagesOnly = false,
   header,
-  labelWidth = 240,
+  labelWidth,
+  nameColWidth,
   weekMinWidth = 64,
   className,
   style,
@@ -4804,6 +4811,7 @@ function Gantt({
 }) {
   const weekCount = resolveWeekCount(stages, weeks);
   const weekLabels = resolveWeekLabels(weekCount, weeks);
+  const nameWidth = resolveNameColWidth(nameColWidth, labelWidth);
   const [collapsed, setCollapsed] = React44.useState(
     () => Object.fromEntries(stages.filter((s) => s.collapsed).map((s) => [s.id, true]))
   );
@@ -4844,7 +4852,8 @@ function Gantt({
     window.addEventListener("resize", handler);
     return () => window.removeEventListener("resize", handler);
   }, [dependencies.length, recomputeEdges]);
-  const trackTemplate = `${labelWidth}px repeat(${weekCount}, minmax(${weekMinWidth}px, 1fr))`;
+  const trackTemplate = `${nameWidth}px repeat(${weekCount}, minmax(${weekMinWidth}px, 1fr))`;
+  const stickyCol = "sticky left-0 z-20 after:absolute after:inset-y-0 after:right-0 after:w-px after:bg-[var(--s-border-subtle,#2A2622)]";
   return /* @__PURE__ */ jsxs31(
     "div",
     {
@@ -4907,7 +4916,16 @@ function Gantt({
               className: "grid items-center border-b border-[var(--s-border-subtle,#2A2622)] bg-[var(--s-surface-raised,#1A1714)]",
               style: { gridTemplateColumns: trackTemplate },
               children: [
-                /* @__PURE__ */ jsx63("div", { className: "px-4 py-2.5 font-[var(--s-font-mono,monospace)] text-[10.5px] font-medium uppercase tracking-[0.6px] text-[var(--s-ink-muted,#7D7568)]", children: rowsHeader }),
+                /* @__PURE__ */ jsx63(
+                  "div",
+                  {
+                    className: cn(
+                      stickyCol,
+                      "bg-[var(--s-surface-raised,#1A1714)] px-4 py-2.5 font-[var(--s-font-mono,monospace)] text-[10.5px] font-medium uppercase tracking-[0.6px] text-[var(--s-ink-muted,#7D7568)]"
+                    ),
+                    children: rowsHeader
+                  }
+                ),
                 weekLabels.map((label, i) => /* @__PURE__ */ jsx63(
                   "div",
                   {
@@ -4938,7 +4956,10 @@ function Gantt({
                       {
                         type: "button",
                         onClick: () => toggle(stage.id),
-                        className: "flex items-center gap-2 px-4 py-3 text-left hover:bg-[var(--s-surface-raised,#1A1714)] transition-colors",
+                        className: cn(
+                          stickyCol,
+                          "flex items-center gap-2 bg-[var(--s-surface-panel,#141210)] px-4 py-3 text-left transition-colors hover:bg-[var(--s-surface-raised,#1A1714)]"
+                        ),
                         "aria-expanded": !isCollapsed,
                         children: [
                           /* @__PURE__ */ jsx63(Chevron, { open: !isCollapsed }),
@@ -4950,8 +4971,22 @@ function Gantt({
                             }
                           ),
                           /* @__PURE__ */ jsxs31("span", { className: "min-w-0", children: [
-                            /* @__PURE__ */ jsx63("span", { className: "block truncate text-[13px] font-semibold text-[var(--s-ink-primary,#F6F1E7)]", children: stage.title }),
-                            stage.subtitle && /* @__PURE__ */ jsx63("span", { className: "block truncate text-[11px] text-[var(--s-ink-muted,#7D7568)]", children: stage.subtitle })
+                            /* @__PURE__ */ jsx63(
+                              "span",
+                              {
+                                className: "block truncate text-[13px] font-semibold text-[var(--s-ink-primary,#F6F1E7)]",
+                                title: stage.title,
+                                children: stage.title
+                              }
+                            ),
+                            stage.subtitle && /* @__PURE__ */ jsx63(
+                              "span",
+                              {
+                                className: "block truncate text-[11px] text-[var(--s-ink-muted,#7D7568)]",
+                                title: stage.subtitle,
+                                children: stage.subtitle
+                              }
+                            )
                           ] }),
                           ms.length > 0 && /* @__PURE__ */ jsxs31("span", { className: "ml-auto shrink-0 rounded-[var(--c-badge-radius,4px)] bg-[var(--s-surface-elevated,#1F1C18)] px-1.5 py-0.5 font-[var(--s-font-mono,monospace)] text-[10px] tabular-nums text-[var(--s-ink-secondary,#C9C0B4)]", children: [
                             done,
@@ -5010,20 +5045,30 @@ function Gantt({
                     className: "grid items-center border-b border-[var(--s-border-subtle,#2A2622)] bg-[var(--s-surface-page,#0A0908)]",
                     style: { gridTemplateColumns: trackTemplate },
                     children: [
-                      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 py-2 pl-10 pr-4", children: [
-                        /* @__PURE__ */ jsx63(StatusDot, { done: m.done, color: dot }),
-                        /* @__PURE__ */ jsx63(
-                          "span",
-                          {
-                            className: cn(
-                              "min-w-0 flex-1 truncate text-[13px]",
-                              m.done ? "text-[var(--s-ink-muted,#7D7568)] line-through" : "text-[var(--s-ink-secondary,#C9C0B4)]"
+                      /* @__PURE__ */ jsxs31(
+                        "div",
+                        {
+                          className: cn(
+                            stickyCol,
+                            "flex items-center gap-2 bg-[var(--s-surface-page,#0A0908)] py-2 pl-10 pr-4"
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsx63(StatusDot, { done: m.done, color: dot }),
+                            /* @__PURE__ */ jsx63(
+                              "span",
+                              {
+                                className: cn(
+                                  "min-w-0 flex-1 truncate text-[13px]",
+                                  m.done ? "text-[var(--s-ink-muted,#7D7568)] line-through" : "text-[var(--s-ink-secondary,#C9C0B4)]"
+                                ),
+                                title: m.title,
+                                children: m.title
+                              }
                             ),
-                            children: m.title
-                          }
-                        ),
-                        m.points != null && /* @__PURE__ */ jsx63("span", { className: "shrink-0 font-[var(--s-font-mono,monospace)] text-[10px] tabular-nums text-[var(--s-ink-muted,#7D7568)]", children: m.points })
-                      ] }),
+                            m.points != null && /* @__PURE__ */ jsx63("span", { className: "shrink-0 font-[var(--s-font-mono,monospace)] text-[10px] tabular-nums text-[var(--s-ink-muted,#7D7568)]", children: m.points })
+                          ]
+                        }
+                      ),
                       /* @__PURE__ */ jsx63(
                         "div",
                         {
@@ -5579,6 +5624,7 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  DEFAULT_NAME_COL_WIDTH,
   DflRemote,
   Dialog,
   DialogClose,
@@ -5778,6 +5824,7 @@ export {
   memberHueVar,
   navigationMenuTriggerStyle,
   parseTags,
+  resolveNameColWidth,
   resolveWeekCount,
   resolveWeekLabels,
   stageProgress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devfellowship/components",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "DFL Design System — UI components, hooks, utils and providers",
   "type": "module",
   "sideEffects": [