@devfellowship/components 1.3.0 → 1.5.0

package/dist/cli.js

@@ -726,6 +726,149 @@ function registerUxPaths(program2) {
   registerStamp(group);
 }
 
+// src/cli/check-style-imports/index.ts
+import { resolve as resolve6 } from "path";
+import { existsSync as existsSync6 } from "fs";
+import chalk9 from "chalk";
+
+// src/cli/check-style-imports/detect.ts
+import { readdirSync, readFileSync as readFileSync5 } from "fs";
+import { join, relative, sep } from "path";
+var SCAN_EXTENSIONS = [".css", ".scss", ".sass", ".less", ".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs"];
+var IGNORE_DIRS = /* @__PURE__ */ new Set([
+  "node_modules",
+  "dist",
+  "build",
+  ".git",
+  ".next",
+  ".expo",
+  "storybook-static",
+  "coverage",
+  ".turbo",
+  ".cache"
+]);
+function importRegex(exportName) {
+  return new RegExp(
+    String.raw`(?:@import\s+url\(\s*|@import\s+|import\s+|require\(\s*)` + String.raw`['"]@devfellowship/components/${exportName}(?:\.css)?['"]`
+  );
+}
+var STYLES_RE = importRegex("styles");
+var SHADCN_RE = importRegex("shadcn");
+function detectInText(text, file = "<text>") {
+  const hits = [];
+  const lines = text.split(/\r?\n/);
+  for (let i = 0; i < lines.length; i++) {
+    const raw = lines[i];
+    if (STYLES_RE.test(raw)) {
+      hits.push({ file, line: i + 1, export: "styles", text: raw.trim() });
+    }
+    if (SHADCN_RE.test(raw)) {
+      hits.push({ file, line: i + 1, export: "shadcn", text: raw.trim() });
+    }
+  }
+  return hits;
+}
+function* walk(dir) {
+  let entries;
+  try {
+    entries = readdirSync(dir, { withFileTypes: true, encoding: "utf8" });
+  } catch {
+    return;
+  }
+  for (const entry of entries) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (IGNORE_DIRS.has(entry.name)) continue;
+      yield* walk(full);
+    } else if (entry.isFile()) {
+      const dot = entry.name.lastIndexOf(".");
+      if (dot < 0) continue;
+      const ext = entry.name.slice(dot);
+      if (SCAN_EXTENSIONS.includes(ext)) yield full;
+    }
+  }
+}
+function detectInDir(root) {
+  const hits = [];
+  for (const full of walk(root)) {
+    let text;
+    try {
+      text = readFileSync5(full, "utf8");
+    } catch {
+      continue;
+    }
+    const rel = relative(root, full).split(sep).join("/");
+    hits.push(...detectInText(text, rel));
+  }
+  return summarize(hits);
+}
+function summarize(hits) {
+  const styles = hits.filter((h) => h.export === "styles");
+  const shadcn = hits.filter((h) => h.export === "shadcn");
+  return {
+    hits,
+    styles,
+    shadcn,
+    conflict: styles.length > 0 && shadcn.length > 0
+  };
+}
+
+// src/cli/check-style-imports/index.ts
+var DOC_URL = "https://github.com/devfellowship/dfl-components-cli#consuming-the-ds-styles-in-an-app";
+function registerCheckStyleImports(program2) {
+  program2.command("check-style-imports [dir]").description(
+    "Fail if an app imports BOTH @devfellowship/components/styles and /shadcn (clobbers --background \u2192 transparent surfaces)."
+  ).option("--json", "Emit the raw detection result as JSON instead of a human report.").action((maybeDir, opts) => {
+    const root = resolve6(process.cwd(), maybeDir || ".");
+    if (!existsSync6(root)) {
+      console.error(chalk9.red("Directory not found:"), root);
+      process.exit(2);
+    }
+    const result = detectInDir(root);
+    if (opts.json) {
+      console.log(JSON.stringify(result, null, 2));
+      process.exit(result.conflict ? 1 : 0);
+    }
+    if (!result.conflict) {
+      if (result.hits.length === 0) {
+        console.log(
+          chalk9.green("OK"),
+          "no @devfellowship/components/{styles,shadcn} imports found."
+        );
+      } else {
+        const which = result.styles.length > 0 ? "styles" : "shadcn";
+        console.log(
+          chalk9.green("OK"),
+          `app imports only @devfellowship/components/${which} (${result.hits.length} reference${result.hits.length === 1 ? "" : "s"}).`
+        );
+      }
+      process.exit(0);
+    }
+    console.error(
+      chalk9.red("CONFLICT"),
+      "this app imports BOTH @devfellowship/components/styles AND /shadcn."
+    );
+    console.error(
+      chalk9.yellow(
+        "\nThese exports define the SAME CSS vars (--background, --primary, \u2026) in INCOMPATIBLE formats:\n  - /styles  ships them as HEX        (#0A0908)\n  - /shadcn  ships them as HSL CHANNELS (30 11% 4%)\nImporting both clobbers --background \u2014 e.g. hsl(#0A0908) is invalid CSS \u2192 the\ndeclaration drops \u2192 surfaces render TRANSPARENT (the transparent-dialog bug).\n"
+      )
+    );
+    console.error(chalk9.bold("  /styles imports:"));
+    for (const h of result.styles) console.error(`    ${h.file}:${h.line}  ${h.text}`);
+    console.error(chalk9.bold("  /shadcn imports:"));
+    for (const h of result.shadcn) console.error(`    ${h.file}:${h.line}  ${h.text}`);
+    console.error(
+      chalk9.cyan(
+        `
+FIX: keep exactly ONE. A DS-native (hex) app imports /styles only; a
+shadcn-slate (HSL-channel) app imports /shadcn only. NEVER both.
+See: ${DOC_URL}`
+      )
+    );
+    process.exit(1);
+  });
+}
+
 // src/cli/index.ts
 var program = new Command();
 program.name("dfl-components").description(
@@ -734,4 +877,5 @@ program.name("dfl-components").description(
 program.command("init").description("Initialize your project with dfl-components configuration").option("-y, --yes", "Skip prompts and use defaults").option("-c, --cwd <path>", "Working directory", process.cwd()).action(init);
 program.command("add").description("Add a component to your project").argument("[components...]", "Components to add").option("-y, --yes", "Skip confirmation prompts").option("-o, --overwrite", "Overwrite existing files").option("-c, --cwd <path>", "Working directory", process.cwd()).option("-a, --all", "Add all available components").action(add);
 registerUxPaths(program);
+registerCheckStyleImports(program);
 program.parse();

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,14 +5124,17 @@ function Gantt({
   rowsHeader = "Stage / Task",
   stagesOnly = false,
   header,
-  labelWidth = 240,
+  labelWidth,
+  nameColWidth,
   weekMinWidth = 64,
+  onMilestoneClick,
   className,
   style,
   ...rest
 }) {
   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 +5175,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 +5239,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 +5279,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 +5294,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 +5368,42 @@ 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 }),
+                            onMilestoneClick ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => onMilestoneClick(m, stage),
+                                title: m.title,
+                                className: cn(
+                                  "min-w-0 flex-1 truncate rounded-[var(--p-radius-sm,4px)] text-left text-[13px] transition-colors hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--s-brand-solid,#E07A4A)]",
+                                  m.done ? "text-[var(--s-ink-muted,#7D7568)] line-through" : "text-[var(--s-ink-secondary,#C9C0B4)]"
+                                ),
+                                children: m.title
+                              }
+                            ) : /* @__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 +5956,7 @@ var useFeatureFlags = () => {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  DEFAULT_NAME_COL_WIDTH,
   DflRemote,
   Dialog,
   DialogClose,
@@ -6095,6 +6156,7 @@ var useFeatureFlags = () => {
   memberHueVar,
   navigationMenuTriggerStyle,
   parseTags,
+  resolveNameColWidth,
   resolveWeekCount,
   resolveWeekLabels,
   stageProgress,

package/dist/index.d.cts

@@ -985,11 +985,33 @@ 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;
+    /**
+     * Optional click handler for a milestone. When provided, each milestone's
+     * name-column cell becomes a keyboard-accessible button that invokes this
+     * callback with the milestone and its parent stage. When omitted, milestone
+     * rows render exactly as before (a non-interactive cell) — fully
+     * backward-compatible, so existing consumers are unaffected.
+     */
+    onMilestoneClick?: (milestone: GanttMilestone, stage: GanttStage) => void;
 }
+/** 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 +1028,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, onMilestoneClick, 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 +1105,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,33 @@ 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;
+    /**
+     * Optional click handler for a milestone. When provided, each milestone's
+     * name-column cell becomes a keyboard-accessible button that invokes this
+     * callback with the milestone and its parent stage. When omitted, milestone
+     * rows render exactly as before (a non-interactive cell) — fully
+     * backward-compatible, so existing consumers are unaffected.
+     */
+    onMilestoneClick?: (milestone: GanttMilestone, stage: GanttStage) => void;
 }
+/** 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 +1028,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, onMilestoneClick, 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 +1105,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,14 +4802,17 @@ function Gantt({
   rowsHeader = "Stage / Task",
   stagesOnly = false,
   header,
-  labelWidth = 240,
+  labelWidth,
+  nameColWidth,
   weekMinWidth = 64,
+  onMilestoneClick,
   className,
   style,
   ...rest
 }) {
   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 +4853,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 +4917,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 +4957,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 +4972,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 +5046,42 @@ 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 }),
+                            onMilestoneClick ? /* @__PURE__ */ jsx63(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => onMilestoneClick(m, stage),
+                                title: m.title,
+                                className: cn(
+                                  "min-w-0 flex-1 truncate rounded-[var(--p-radius-sm,4px)] text-left text-[13px] transition-colors hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--s-brand-solid,#E07A4A)]",
+                                  m.done ? "text-[var(--s-ink-muted,#7D7568)] line-through" : "text-[var(--s-ink-secondary,#C9C0B4)]"
+                                ),
+                                children: m.title
+                              }
+                            ) : /* @__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 +5637,7 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  DEFAULT_NAME_COL_WIDTH,
   DflRemote,
   Dialog,
   DialogClose,
@@ -5778,6 +5837,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.5.0",
   "description": "DFL Design System — UI components, hooks, utils and providers",
   "type": "module",
   "sideEffects": [