@devfellowship/components 1.4.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

@@ -5127,6 +5127,7 @@ function Gantt({
   labelWidth,
   nameColWidth,
   weekMinWidth = 64,
+  onMilestoneClick,
   className,
   style,
   ...rest
@@ -5376,7 +5377,19 @@ function Gantt({
                           ),
                           children: [
                             /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StatusDot, { done: m.done, color: dot }),
-                            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                            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(

package/dist/index.d.cts

@@ -999,6 +999,14 @@ interface GanttProps extends React$1.HTMLAttributes<HTMLDivElement> {
     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;
@@ -1020,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, nameColWidth, 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. */

package/dist/index.d.ts

@@ -999,6 +999,14 @@ interface GanttProps extends React$1.HTMLAttributes<HTMLDivElement> {
     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;
@@ -1020,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, nameColWidth, 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. */

package/dist/index.js

@@ -4805,6 +4805,7 @@ function Gantt({
   labelWidth,
   nameColWidth,
   weekMinWidth = 64,
+  onMilestoneClick,
   className,
   style,
   ...rest
@@ -5054,7 +5055,19 @@ function Gantt({
                           ),
                           children: [
                             /* @__PURE__ */ jsx63(StatusDot, { done: m.done, color: dot }),
-                            /* @__PURE__ */ jsx63(
+                            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(

package/package.json

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