47:Tb38a,
import { cn } from "cn"

export type Milestone = {
  name: string
  /** Committed date. */
  committed: Date
  /** Real (or forecast) date when it differs from the committed one. */
  actual?: Date
  state: "done" | "current" | "future"
}

const month = new Intl.DateTimeFormat("es-MX", { month: "short" })
const day = new Intl.DateTimeFormat("es-MX", { day: "numeric", month: "short" })

function Diamond({ state, ghost }: { state: Milestone["state"]; ghost?: boolean }) {
  return (
    <span
      aria-hidden
      className={cn(
        "block size-3 rotate-45 rounded-[2px]",
        state === "done" && "bg-success",
        state === "current" && "border-2 border-primary bg-background",
        state === "future" && "bg-border",
        ghost && "opacity-30"
      )}
    />
  )
}

/** Milestone Gantt: month axis, dashed "today" line, 12 px diamonds and a ghost for slipped dates. */
export function MilestoneGantt({
  start,
  end,
  today = new Date(),
  milestones,
  className,
}: {
  start: Date
  end: Date
  today?: Date
  milestones: Milestone[]
  className?: string
}) {
  const span = end.getTime() - start.getTime()
  const pct = (d: Date) => `${Math.min(100, Math.max(0, ((d.getTime() - start.getTime()) / span) * 100))}%`
  const months: Date[] = []
  for (let d = new Date(start.getFullYear(), start.getMonth(), 1); d <= end; d = new Date(d.getFullYear(), d.getMonth() + 1, 1)) months.push(d)
  const showToday = today >= start && today <= end

  return (
    <div className={cn("overflow-x-auto rounded-xl border border-border bg-card shadow-xs", className)}>
      <div className="relative grid min-w-[640px] grid-cols-[180px_1fr]">
        <div className="border-b border-border px-4 py-2 text-xs font-medium text-muted-foreground">Hito</div>
        <div className="relative border-b border-border">
          {months.map((m) => (
            <span key={m.toISOString()} className="absolute top-0 py-2 pl-1.5 text-xs text-muted-foreground" style={{ left: pct(m) }}>
              {month.format(m)}
            </span>
          ))}
        </div>

        {milestones.map((m) => {
          const slipped = m.actual && m.actual.getTime() !== m.committed.getTime()
          const at = slipped ? m.actual! : m.committed
          return (
            <div key={m.name} className="contents">
              <div className="flex min-h-11 flex-col justify-center border-b border-border px-4 py-1.5">
                <span className="truncate text-sm font-medium">{m.name}</span>
                <span className="text-xs text-muted-foreground tabular-nums">
                  {day.format(at)}
                  {slipped && ` · comprometido ${day.format(m.committed)}`}
                </span>
              </div>
              <div className="relative border-b border-border">
                {months.map((d) => (
                  <span key={d.toISOString()} aria-hidden className="absolute inset-y-0 w-px bg-border/60" style={{ left: pct(d) }} />
                ))}
                {slipped && (
                  <>
                    <span
                      aria-hidden
                      className="absolute top-1/2 h-px bg-muted-foreground/50"
                      style={{
                        left: m.committed < at ? pct(m.committed) : pct(at),
                        right: `calc(100% - ${m.committed < at ? pct(at) : pct(m.committed)})`,
                      }}
                    />
                    <span className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2" style={{ left: pct(m.committed) }}>
                      <Diamond state={m.state} ghost />
                    </span>
                  </>
                )}
                <span className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2" style={{ left: pct(at) }}>
                  <Diamond state={m.state} />
                </span>
              </div>
            </div>
          )
        })}
        {showToday && (
          <div aria-hidden className="pointer-events-none absolute inset-y-0 right-0 left-[180px]">
            <span className="absolute inset-y-0 border-l border-dashed border-primary" style={{ left: pct(today) }} />
            <span
              className="absolute bottom-1.5 -translate-x-1/2 rounded-full bg-primary px-1.5 text-[10px] font-medium text-primary-foreground"
              style={{ left: pct(today) }}
            >
              Hoy
            </span>
          </div>
        )}
      </div>
    </div>
  )
}
46:["$","div",null,{"className":"overflow-auto px-4 py-3.5 font-mono text-[13px] leading-6 [&_pre]:!bg-transparent [&_span]:text-(--shiki-light) dark:[&_span]:text-(--shiki-dark)","style":{"maxHeight":560},"dangerouslySetInnerHTML":{"__html":"$47"}}]
Reglas Konfront
