@hosanna/chordpro 1.1.0

package/dist/chunk-CTBAE2XK.mjs

@@ -0,0 +1,1154 @@
+import {
+  chordDictionary,
+  parseChordPro,
+  transposeChord
+} from "./chunk-PENNIH4J.mjs";
+
+// src/renderer/ChordProRenderer.tsx
+import {
+  BookOpen,
+  Disc,
+  Flame,
+  HelpCircle,
+  Info,
+  Key,
+  LayoutGrid,
+  Music,
+  Pause,
+  Play,
+  Repeat,
+  SkipBack,
+  SkipForward,
+  User,
+  X
+} from "lucide-react";
+import React, { useCallback, useMemo as useMemo2, useRef, useState } from "react";
+import YouTube from "react-youtube";
+
+// src/renderer/ChordRoll.tsx
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function GuitarDiagram({
+  frets,
+  fingers,
+  barre
+}) {
+  const maxFret = Math.max(...frets);
+  let startFret = 1;
+  if (maxFret > 4) {
+    const minFret = Math.min(...frets.filter((f) => f > 0));
+    startFret = minFret;
+  }
+  const numFrets = 4;
+  const width = 100;
+  const height = 110;
+  const getStringX = (index) => 14 + index * 14;
+  const getFretY = (index) => 22 + index * 20;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width,
+      height,
+      className: "text-m3-text dark:text-m3-dark-text select-none",
+      children: [
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: getStringX(0),
+            y1: getFretY(0) - (startFret === 1 ? 3 : 0),
+            x2: getStringX(5),
+            y2: getFretY(0) - (startFret === 1 ? 3 : 0),
+            className: "stroke-zinc-800 dark:stroke-zinc-200",
+            strokeWidth: startFret === 1 ? 3.5 : 1.5
+          }
+        ),
+        startFret > 1 && /* @__PURE__ */ jsxs(
+          "text",
+          {
+            x: getStringX(0) - 4,
+            y: getFretY(0) + 12,
+            fontSize: "8",
+            className: "font-mono font-black fill-m3-primary dark:fill-m3-dark-primary",
+            textAnchor: "end",
+            children: [
+              startFret,
+              "\xAA"
+            ]
+          }
+        ),
+        [0, 1, 2, 3, 4, 5].map((idx) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: getStringX(idx),
+            y1: getFretY(0),
+            x2: getStringX(idx),
+            y2: getFretY(numFrets),
+            className: "stroke-zinc-400 dark:stroke-zinc-600",
+            strokeOpacity: "0.5",
+            strokeWidth: "1.2"
+          },
+          idx
+        )),
+        [0, 1, 2, 3, 4].map((idx) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: getStringX(0),
+            y1: getFretY(idx),
+            x2: getStringX(5),
+            y2: getFretY(idx),
+            className: "stroke-zinc-400 dark:stroke-zinc-600",
+            strokeOpacity: "0.4",
+            strokeWidth: "1"
+          },
+          idx
+        )),
+        barre !== void 0 && (() => {
+          const barreFretInWindow = barre - startFret;
+          if (barreFretInWindow >= 0 && barreFretInWindow < numFrets) {
+            const y = getFretY(barreFretInWindow) + 10;
+            const startStr = frets.findIndex((f) => f === barre);
+            const endStr = 5;
+            if (startStr !== -1) {
+              return /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: getStringX(startStr) - 4,
+                  y: y - 4,
+                  width: getStringX(endStr) - getStringX(startStr) + 8,
+                  height: 8,
+                  rx: 4,
+                  className: "fill-m3-primary dark:fill-m3-dark-primary opacity-80"
+                }
+              );
+            }
+          }
+          return null;
+        })(),
+        frets.map((fret, stringIdx) => {
+          if (fret === -1) {
+            return /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: getStringX(stringIdx),
+                y: 12,
+                fontSize: "10",
+                fontWeight: "bold",
+                className: "fill-red-500 font-black",
+                textAnchor: "middle",
+                children: "\xD7"
+              },
+              stringIdx
+            );
+          }
+          if (fret === 0) {
+            return /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: getStringX(stringIdx),
+                cy: 10,
+                r: 2,
+                fill: "none",
+                className: "stroke-emerald-500",
+                strokeWidth: "1.2"
+              },
+              stringIdx
+            );
+          }
+          const fretInWindow = fret - startFret;
+          if (fretInWindow >= 0 && fretInWindow < numFrets) {
+            const cx = getStringX(stringIdx);
+            const cy = getFretY(fretInWindow) + 10;
+            const finger = fingers ? fingers[stringIdx] : 0;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              !(barre !== void 0 && fret === barre && stringIdx >= frets.findIndex((f) => f === barre)) && /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r: 5,
+                  className: "fill-m3-primary dark:fill-m3-dark-primary"
+                }
+              ),
+              finger > 0 && /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: cx,
+                  y: cy + 2.5,
+                  fontSize: "6.5",
+                  fontWeight: "bold",
+                  fill: "white",
+                  textAnchor: "middle",
+                  className: "font-bold fill-white",
+                  children: finger
+                }
+              )
+            ] }, stringIdx);
+          }
+          return null;
+        })
+      ]
+    }
+  );
+}
+function PianoDiagram({ highlightKeys }) {
+  const whiteKeySemitones = [
+    0,
+    2,
+    4,
+    5,
+    7,
+    9,
+    11,
+    // Octave 1
+    12,
+    14,
+    16,
+    17,
+    19,
+    21,
+    23
+    // Octave 2
+  ];
+  const keyWidth = 14;
+  const keyHeight = 56;
+  const blackWidth = 9;
+  const blackHeight = 34;
+  const blackKeySemitones = [1, 3, 6, 8, 10, 13, 15, 18, 20, 22];
+  const getBlackKeyX = (semitone) => {
+    const octave = Math.floor(semitone / 12);
+    const semitoneInOctave = semitone % 12;
+    let whiteIndexBefore = 0;
+    if (semitoneInOctave === 1) whiteIndexBefore = 1;
+    else if (semitoneInOctave === 3) whiteIndexBefore = 2;
+    else if (semitoneInOctave === 6) whiteIndexBefore = 4;
+    else if (semitoneInOctave === 8) whiteIndexBefore = 5;
+    else if (semitoneInOctave === 10) whiteIndexBefore = 6;
+    const absoluteWhiteIndex = octave * 7 + whiteIndexBefore;
+    return absoluteWhiteIndex * keyWidth - blackWidth / 2;
+  };
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: 14 * keyWidth + 2,
+      height: keyHeight + 4,
+      className: "text-m3-text dark:text-m3-dark-text p-1 rounded-lg bg-zinc-100 dark:bg-zinc-900 border border-m3-border dark:border-m3-dark-border select-none",
+      children: [
+        whiteKeySemitones.map((st, idx) => {
+          const isHighlighted = highlightKeys.includes(st);
+          const x = idx * keyWidth + 1;
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x,
+                y: 2,
+                width: keyWidth - 1,
+                height: keyHeight,
+                rx: 1.5,
+                className: `${isHighlighted ? "fill-m3-primary dark:fill-m3-dark-primary" : "fill-white dark:fill-zinc-800"} stroke-zinc-300 dark:stroke-zinc-700`,
+                strokeWidth: "0.8"
+              }
+            ),
+            isHighlighted && /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: x + (keyWidth - 1) / 2,
+                cy: keyHeight - 8,
+                r: 2,
+                className: "fill-white dark:fill-zinc-900"
+              }
+            )
+          ] }, st);
+        }),
+        blackKeySemitones.map((st) => {
+          const isHighlighted = highlightKeys.includes(st);
+          const x = getBlackKeyX(st) + 1;
+          return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x,
+              y: 2,
+              width: blackWidth,
+              height: blackHeight,
+              rx: 1,
+              className: `${isHighlighted ? "fill-m3-primary dark:fill-m3-dark-primary" : "fill-zinc-800 dark:fill-zinc-950"} stroke-zinc-900 dark:stroke-black`,
+              strokeWidth: "0.8"
+            }
+          ) }, st);
+        })
+      ]
+    }
+  );
+}
+function ChordRoll({
+  uniqueChords,
+  transposeVal,
+  capoVal = 0,
+  onChordClick,
+  instrument,
+  showDiagrams,
+  showChords
+}) {
+  const isGuitar = instrument === "guitar";
+  const effectiveTranspose = transposeVal - (isGuitar ? capoVal : 0);
+  const chordItems = useMemo(() => {
+    return uniqueChords.map((chord) => {
+      const transposed = transposeChord(chord, effectiveTranspose);
+      const fingering = chordDictionary.getFingering(transposed);
+      return {
+        original: chord,
+        transposed,
+        fingering
+      };
+    });
+  }, [uniqueChords, effectiveTranspose]);
+  if (uniqueChords.length === 0 || !showDiagrams || !showChords) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "w-full select-none mb-6",
+      onTouchStart: (e) => e.stopPropagation(),
+      onTouchMove: (e) => e.stopPropagation(),
+      onTouchEnd: (e) => e.stopPropagation(),
+      children: [
+        isGuitar && capoVal > 0 && /* @__PURE__ */ jsx("div", { className: "px-4 mb-2 flex items-center justify-between", children: /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-bold text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/50 px-2.5 py-0.5 rounded-md border border-amber-200 dark:border-amber-900/40", children: [
+          "Capo na ",
+          capoVal,
+          "\xAA casa \u2014 acordes em formato relativo"
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-row overflow-x-auto gap-6 py-2 px-4 no-scrollbar scroll-smooth", children: chordItems.map((item, idx) => {
+          const isPiano = instrument === "piano";
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onClick: () => onChordClick?.(item.transposed),
+              className: `flex flex-col items-center p-2 transition-all cursor-pointer hover:opacity-85 shrink-0 ${isPiano ? "w-48" : "w-24"}`,
+              title: "Clique para ver detalhes do acorde",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-black text-m3-primary dark:text-m3-dark-primary font-mono mb-1.5", children: item.transposed }),
+                /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center flex-1 min-h-17.5", children: item.fingering ? isPiano && item.fingering.piano ? /* @__PURE__ */ jsx(
+                  PianoDiagram,
+                  {
+                    highlightKeys: item.fingering.piano.highlightKeys
+                  }
+                ) : !isPiano && item.fingering.guitar ? /* @__PURE__ */ jsx(
+                  GuitarDiagram,
+                  {
+                    frets: item.fingering.guitar.frets,
+                    fingers: item.fingering.guitar.fingers,
+                    barre: item.fingering.guitar.barre
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "text-[10px] text-zinc-400 font-mono italic", children: "Sem visual" }) : /* @__PURE__ */ jsx("div", { className: "text-[10px] text-zinc-400 font-mono italic", children: "N\xE3o registado" }) }),
+                item.fingering?.piano && /* @__PURE__ */ jsx("span", { className: "text-[9px] font-bold text-m3-secondary dark:text-m3-dark-secondary mt-1.5 font-mono whitespace-nowrap overflow-hidden text-ellipsis max-w-full", children: item.fingering.piano.notes.join(" - ") })
+              ]
+            },
+            idx
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/renderer/ChordProRenderer.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var YT_ID_REGEX = /(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([^&?]+)/;
+function extractYoutubeId(urlOrId) {
+  const match = urlOrId.match(YT_ID_REGEX);
+  return match?.[1] || urlOrId;
+}
+function getDuration(duration) {
+  const seconds = Number(duration);
+  if (isNaN(seconds)) {
+    return "00:00";
+  } else {
+    return `${Math.trunc(seconds / 60)}:${seconds % 60}`;
+  }
+}
+var ChordProRenderer = React.memo(
+  ({
+    content,
+    showChords,
+    transposeVal = 0,
+    capoVal = 0,
+    onTransposeChange,
+    onCapoChange,
+    twoColumnLayout = false,
+    fontSize,
+    instrument = "guitar",
+    showDiagrams = false,
+    fileName,
+    showYoutubePlayer: showYoutubePlayerProp,
+    onShowYoutubePlayerChange,
+    scrollContainerRef
+  }) => {
+    const [ytPlayerRef, setYtPlayerRef] = useState(null);
+    const [isPlayingYoutube, setIsPlayingYoutube] = useState(false);
+    const [isYoutubeRepeat, setIsYoutubeRepeat] = useState(false);
+    const [showYoutubeInternal, setShowYoutubeInternal] = useState(false);
+    const showYoutubePlayer = showYoutubePlayerProp ?? showYoutubeInternal;
+    const setShowYoutubePlayer = useCallback(
+      (val) => {
+        setShowYoutubeInternal(val);
+        onShowYoutubePlayerChange?.(val);
+      },
+      [onShowYoutubePlayerChange]
+    );
+    const isYoutubeRepeatRef = useRef(isYoutubeRepeat);
+    isYoutubeRepeatRef.current = isYoutubeRepeat;
+    const parsedSong = useMemo2(() => {
+      return parseChordPro(content);
+    }, [content]);
+    const { metadata } = parsedSong;
+    const isGuitar = instrument === "guitar";
+    const effectiveCapo = isGuitar ? capoVal : 0;
+    const effectiveTranspose = transposeVal - effectiveCapo;
+    const soundingKey = useMemo2(() => {
+      return transposeChord(metadata.key || "C", transposeVal);
+    }, [metadata.key, transposeVal]);
+    const renderedKey = useMemo2(() => {
+      return transposeChord(metadata.key || "C", effectiveTranspose);
+    }, [metadata.key, effectiveTranspose]);
+    const resolvedUniqueChords = useMemo2(() => {
+      const chords = /* @__PURE__ */ new Set();
+      for (const section of parsedSong.sections) {
+        for (const line of section.lines) {
+          if (line.segments) {
+            for (const seg of line.segments) {
+              if (seg.chord) chords.add(seg.chord);
+            }
+          }
+          if (line.measures) {
+            for (const m of line.measures) {
+              for (const c of m.chords) {
+                if (c.chord) chords.add(c.chord);
+              }
+            }
+          }
+        }
+      }
+      return Array.from(chords);
+    }, [parsedSong]);
+    const [selectedChord, setSelectedChord] = useState(null);
+    const [modalInstrument, setModalInstrument] = useState(
+      instrument
+    );
+    const chordFingering = useMemo2(() => {
+      if (!selectedChord) return null;
+      return chordDictionary.getFingering(selectedChord);
+    }, [selectedChord]);
+    const handleChordClick = (chord) => {
+      setModalInstrument(instrument);
+      setSelectedChord(chord);
+    };
+    return /* @__PURE__ */ jsxs2("div", { className: "relative flex flex-col flex-1 overflow-hidden h-full", children: [
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          ref: scrollContainerRef,
+          className: "flex-1 overflow-y-auto px-4 py-4 sm:px-6 bg-slate-50 dark:bg-slate-950 print-page select-text leading-relaxed no-scrollbar relative",
+          children: /* @__PURE__ */ jsxs2("div", { className: "max-w-3xl mx-auto print-song-card", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "mb-6 border-b border-neutral-100 dark:border-slate-800 pb-5 select-none", children: [
+              /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [
+                /* @__PURE__ */ jsxs2("div", { children: [
+                  /* @__PURE__ */ jsx2("h2", { className: "text-2xl font-bold tracking-tight text-neutral-900 dark:text-white", children: metadata.title }),
+                  metadata.subtitle && /* @__PURE__ */ jsx2("h3", { className: "text-[15px] font-medium text-neutral-600 dark:text-neutral-400 mt-1", children: metadata.subtitle }),
+                  (metadata.artist || metadata.composer) && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5 text-xs text-neutral-500 mt-2 font-medium flex-wrap", children: [
+                    /* @__PURE__ */ jsx2(User, { className: "w-3.5 h-3.5 text-[#0284c7]" }),
+                    /* @__PURE__ */ jsxs2("span", { children: [
+                      "Por:",
+                      " ",
+                      [metadata.artist, metadata.composer].filter(Boolean).join(" / ")
+                    ] })
+                  ] }),
+                  metadata.translator && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5 text-xs text-neutral-500 mt-2 font-medium flex-wrap", children: [
+                    /* @__PURE__ */ jsx2(User, { className: "w-3.5 h-3.5 text-[#0284c7]" }),
+                    /* @__PURE__ */ jsxs2("span", { children: [
+                      "Traduzido por: ",
+                      metadata.translator
+                    ] })
+                  ] }),
+                  metadata.album && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5 text-xs text-neutral-500 mt-1 font-medium", children: [
+                    /* @__PURE__ */ jsx2(Disc, { className: "w-3.5 h-3.5 text-[#0284c7]" }),
+                    /* @__PURE__ */ jsxs2("span", { children: [
+                      "\xC1lbum: ",
+                      metadata.album
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-1.5 justify-end", children: [
+                  metadata.songNumber && /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-bold bg-neutral-100 dark:bg-slate-800 text-neutral-600 dark:text-neutral-400 px-2 py-1 rounded-lg border border-neutral-200 dark:border-slate-700", children: [
+                    "N\xBA ",
+                    metadata.songNumber
+                  ] }),
+                  (metadata.key || transposeVal !== 0) && /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-bold bg-indigo-50 dark:bg-indigo-950/40 text-indigo-700 dark:text-indigo-300 px-2.5 py-1 rounded-lg border border-indigo-100 dark:border-indigo-950/50 flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx2(Key, { className: "w-3 h-3" }),
+                    "Tom: ",
+                    soundingKey
+                  ] }),
+                  effectiveCapo > 0 && /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-bold bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300 px-2.5 py-1 rounded-lg border border-amber-100 dark:border-amber-950/50", children: [
+                    "Capo: ",
+                    effectiveCapo,
+                    "\xAA casa"
+                  ] }),
+                  effectiveCapo > 0 && /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-bold bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 px-2.5 py-1 rounded-lg border border-emerald-100 dark:border-emerald-950/50", children: [
+                    "Formato: ",
+                    renderedKey
+                  ] }),
+                  metadata.originalKey && /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-bold bg-purple-50 dark:bg-purple-950/40 text-purple-700 dark:text-purple-300 px-2.5 py-1 rounded-lg border border-purple-100 dark:border-purple-950/50", children: [
+                    "Tom Orig: ",
+                    metadata.originalKey
+                  ] }),
+                  metadata.capo && metadata.capo !== "0" && effectiveCapo === 0 && /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-bold bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300 px-2.5 py-1 rounded-lg border border-amber-100 dark:border-amber-950/50", children: [
+                    "Capo Orig: ",
+                    metadata.capo,
+                    "\xAA casa"
+                  ] }),
+                  metadata.tempo && /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-bold bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 px-2.5 py-1 rounded-lg border border-emerald-100 dark:border-emerald-950/50 flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx2(Flame, { className: "w-3 h-3" }),
+                    metadata.tempo,
+                    " BPM"
+                  ] }),
+                  metadata.time && /* @__PURE__ */ jsx2("span", { className: "text-[10px] font-bold bg-cyan-50 dark:bg-cyan-950/40 text-cyan-700 dark:text-cyan-300 px-2.5 py-1 rounded-lg border border-cyan-100 dark:border-cyan-950/50", children: metadata.time }),
+                  metadata.ccli && /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-bold bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 px-2.5 py-1 rounded-lg border border-slate-200 dark:border-slate-700", children: [
+                    "CCLI: ",
+                    metadata.ccli
+                  ] })
+                ] })
+              ] }),
+              (metadata.copyright || metadata.duration) && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4 text-[10px] text-neutral-400 dark:text-neutral-500 mt-3 pt-3 border-t border-neutral-100 dark:border-slate-800/50", children: [
+                metadata.copyright && /* @__PURE__ */ jsxs2("span", { children: [
+                  "\xA9 ",
+                  metadata.copyright
+                ] }),
+                metadata.duration && /* @__PURE__ */ jsxs2("span", { children: [
+                  "Dura\xE7\xE3o: ",
+                  getDuration(metadata.duration)
+                ] })
+              ] }),
+              (transposeVal !== 0 || effectiveCapo !== 0) && /* @__PURE__ */ jsxs2("div", { className: "mt-4 bg-indigo-50 dark:bg-indigo-950/40 text-xs px-3 py-2 rounded-xl text-indigo-700 dark:text-indigo-300 flex items-center justify-between border border-indigo-100 dark:border-indigo-950/50 flex-wrap gap-2", children: [
+                /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                  /* @__PURE__ */ jsxs2("span", { className: "font-semibold", children: [
+                    "Tom:",
+                    " ",
+                    /* @__PURE__ */ jsx2("span", { className: "text-indigo-600 dark:text-indigo-400 font-bold bg-white dark:bg-zinc-900 px-2 py-0.5 rounded border ml-0.5 text-xs", children: soundingKey })
+                  ] }),
+                  effectiveCapo > 0 && /* @__PURE__ */ jsxs2("span", { className: "font-semibold text-amber-700 dark:text-amber-300", children: [
+                    "\u2022 Capo:",
+                    " ",
+                    /* @__PURE__ */ jsxs2("span", { className: "text-amber-700 dark:text-amber-300 font-bold bg-amber-100 dark:bg-amber-900/60 px-2 py-0.5 rounded border border-amber-300 dark:border-amber-800 text-xs ml-0.5", children: [
+                      effectiveCapo,
+                      "\xAA casa (",
+                      renderedKey,
+                      ")"
+                    ] })
+                  ] })
+                ] }),
+                (onTransposeChange || onCapoChange) && /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      onTransposeChange?.(0);
+                      onCapoChange?.(0);
+                    },
+                    className: "text-[10px] font-bold hover:underline underline-offset-2 uppercase text-indigo-600 dark:text-indigo-400 cursor-pointer",
+                    children: "Repor Tom / Capo"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx2(
+              ChordRoll,
+              {
+                uniqueChords: resolvedUniqueChords,
+                transposeVal,
+                capoVal: effectiveCapo,
+                onChordClick: handleChordClick,
+                instrument,
+                showDiagrams,
+                showChords
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: `font-sans leading-relaxed text-sm select-text ${twoColumnLayout ? "columns-1 sm:columns-2 gap-8 space-y-6 [column-fill:_balance]" : "space-y-6"}`,
+                style: fontSize ? { fontSize: `${fontSize}px` } : void 0,
+                children: parsedSong.sections.map((section, secIdx) => {
+                  const isChorus = section.type === "chorus";
+                  const isBridge = section.type === "bridge";
+                  if (section.type === "new_song") {
+                    return /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        className: "w-full my-12 flex items-center justify-center select-none break-before-column",
+                        children: [
+                          /* @__PURE__ */ jsx2("div", { className: "flex-1 border-t-2 border-slate-200 dark:border-slate-800 border-dashed" }),
+                          /* @__PURE__ */ jsx2(Music, { className: "w-5 h-5 mx-4 text-slate-300 dark:text-slate-700" }),
+                          /* @__PURE__ */ jsx2("div", { className: "flex-1 border-t-2 border-slate-200 dark:border-slate-800 border-dashed" })
+                        ]
+                      },
+                      secIdx
+                    );
+                  }
+                  if (section.type === "grid") {
+                    const maxMeasures = Math.max(
+                      1,
+                      ...section.lines.map((l) => l.measures?.length || 1)
+                    );
+                    return /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        className: `bg-slate-100/60 dark:bg-slate-900/40 p-4 rounded-xl border border-slate-200/80 dark:border-slate-800/60 my-6 ${twoColumnLayout ? "break-inside-avoid-column inline-block w-full" : ""}`,
+                        children: [
+                          /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between mb-3", children: [
+                            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5 text-[11px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider select-none", children: [
+                              /* @__PURE__ */ jsx2(LayoutGrid, { className: "w-3.5 h-3.5" }),
+                              /* @__PURE__ */ jsx2("span", { children: section.label || "Instrumental" })
+                            ] }),
+                            section.repeat && /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-black bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 px-2 py-0.5 rounded uppercase border border-indigo-200 dark:border-indigo-800/50", children: [
+                              "Repetir ",
+                              section.repeat,
+                              "x"
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ jsx2("div", { className: "space-y-1.5 font-medium", children: section.lines.map((line, lineIdx) => /* @__PURE__ */ jsx2(
+                            LineRenderer,
+                            {
+                              line,
+                              showChords,
+                              transpose: effectiveTranspose,
+                              onChordClick: handleChordClick,
+                              maxGridMeasures: maxMeasures
+                            },
+                            lineIdx
+                          )) })
+                        ]
+                      },
+                      secIdx
+                    );
+                  }
+                  if (isChorus || isBridge) {
+                    const borderColor = isChorus ? "border-m3-primary/30 dark:border-m3-dark-primary/30" : "border-amber-500/30 dark:border-amber-400/30";
+                    const labelColor = isChorus ? "text-m3-text dark:text-m3-dark-text" : "text-amber-700 dark:text-amber-400";
+                    const iconColor = isChorus ? "text-m3-secondary" : "text-amber-500";
+                    return /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        className: `pl-4 md:pl-6 border-l-2 my-6 ${borderColor} ${twoColumnLayout ? "break-inside-avoid-column inline-block w-full" : ""}`,
+                        children: [
+                          /* @__PURE__ */ jsxs2(
+                            "div",
+                            {
+                              className: `flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wider mb-3 select-none ${labelColor}`,
+                              children: [
+                                /* @__PURE__ */ jsx2(
+                                  Music,
+                                  {
+                                    className: `w-3.5 h-3.5 shrink-0 ${iconColor}`
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx2("span", { children: section.label || (isChorus ? "Refr\xE3o" : "Ponte") }),
+                                section.repeat && /* @__PURE__ */ jsxs2(
+                                  "span",
+                                  {
+                                    className: `ml-2 px-2 py-0.5 rounded text-[10px] font-black border ${isChorus ? "bg-blue-100/50 border-blue-200 text-blue-700 dark:bg-blue-900/30 dark:border-blue-800 dark:text-blue-300" : "bg-amber-100/50 border-amber-200 text-amber-700 dark:bg-amber-900/30 dark:border-amber-800 dark:text-amber-300"}`,
+                                    children: [
+                                      section.repeat,
+                                      "x"
+                                    ]
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx2("div", { className: "space-y-4 font-medium", children: section.lines.length === 0 ? /* @__PURE__ */ jsx2(
+                            "div",
+                            {
+                              className: `text-xs italic my-1 opacity-70 ${labelColor}`,
+                              children: "(Repete o refr\xE3o)"
+                            }
+                          ) : section.lines.map((line, lineIdx) => /* @__PURE__ */ jsx2(
+                            LineRenderer,
+                            {
+                              line,
+                              showChords,
+                              transpose: effectiveTranspose,
+                              onChordClick: handleChordClick
+                            },
+                            lineIdx
+                          )) })
+                        ]
+                      },
+                      secIdx
+                    );
+                  }
+                  if (section.type === "tab") {
+                    return /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        className: `bg-slate-900 p-4 pt-6 rounded-xl shadow-inner border border-slate-800 my-6 select-text relative group ${twoColumnLayout ? "break-inside-avoid-column inline-block w-full" : ""}`,
+                        children: [
+                          /* @__PURE__ */ jsx2("div", { className: "absolute top-0 left-4 -translate-y-1/2 bg-slate-800 text-[10px] font-bold text-slate-300 uppercase tracking-widest px-2 py-0.5 rounded border border-slate-700 shadow-sm select-none", children: section.label || "Tablatura" }),
+                          /* @__PURE__ */ jsx2("div", { className: "overflow-x-auto no-scrollbar", children: /* @__PURE__ */ jsx2("pre", { className: "font-mono text-[13px] md:text-sm text-slate-300 leading-relaxed whitespace-pre drop-shadow-sm", children: section.lines.map((line) => line.text || "").join("\n") }) })
+                        ]
+                      },
+                      secIdx
+                    );
+                  }
+                  if (section.type === "comment") {
+                    return /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        className: `my-2 select-none pl-3 text-[11px] italic text-m3-secondary/70 dark:text-m3-dark-secondary/70 ${twoColumnLayout ? "break-inside-avoid-column inline-block w-full" : ""}`,
+                        children: section.lines.map((l) => l.text).join(", ")
+                      },
+                      secIdx
+                    );
+                  }
+                  return /* @__PURE__ */ jsxs2(
+                    "div",
+                    {
+                      className: `relative pl-6 sm:pl-8 border-l border-m3-border/30 dark:border-m3-dark-border/30 py-1.5 my-4 ${twoColumnLayout ? "break-inside-avoid-column inline-block w-full" : ""}`,
+                      children: [
+                        section.label && /* @__PURE__ */ jsx2("div", { className: "absolute -left-0.5 top-0 bottom-0 w-0.5 bg-m3-secondary/20 dark:bg-m3-dark-secondary/20 rounded-full" }),
+                        section.label && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5 text-[11px] font-bold text-m3-text/60 dark:text-m3-dark-text/60 uppercase tracking-wider mb-3 select-none", children: [
+                          /* @__PURE__ */ jsx2(Music, { className: "w-3.5 h-3.5 text-m3-secondary/60 shrink-0" }),
+                          /* @__PURE__ */ jsx2("span", { children: section.label }),
+                          section.repeat && /* @__PURE__ */ jsxs2("span", { className: "ml-2 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 px-2 py-0.5 rounded text-[10px] font-black border border-slate-200 dark:border-slate-700", children: [
+                            section.repeat,
+                            "x"
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsx2("div", { className: "space-y-4", children: section.lines.map((line, lineIdx) => /* @__PURE__ */ jsx2(
+                          LineRenderer,
+                          {
+                            line,
+                            showChords,
+                            transpose: effectiveTranspose,
+                            onChordClick: handleChordClick
+                          },
+                          lineIdx
+                        )) })
+                      ]
+                    },
+                    secIdx
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsxs2("div", { className: "border-t border-neutral-100 dark:border-zinc-900 pt-6 mt-12 pb-12 text-center text-[10px] text-neutral-400 dark:text-neutral-500 select-none space-y-1.5", children: [
+              metadata.artist && /* @__PURE__ */ jsxs2("p", { children: [
+                "Artista Original: ",
+                metadata.artist
+              ] }),
+              metadata.composer && /* @__PURE__ */ jsxs2("p", { children: [
+                "Compositor: ",
+                metadata.composer
+              ] }),
+              metadata.lyricist && /* @__PURE__ */ jsxs2("p", { children: [
+                "Letra: ",
+                metadata.lyricist
+              ] }),
+              metadata.arranger && /* @__PURE__ */ jsxs2("p", { children: [
+                "Arranjo: ",
+                metadata.arranger
+              ] }),
+              metadata.year && /* @__PURE__ */ jsxs2("p", { children: [
+                "Ano: ",
+                metadata.year
+              ] }),
+              metadata.originalKey && /* @__PURE__ */ jsxs2("p", { children: [
+                "Tom Original: ",
+                metadata.originalKey
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { className: "pt-2 mt-2 border-t border-neutral-50/50 dark:border-zinc-900/50 inline-block", children: [
+                metadata.copyright && /* @__PURE__ */ jsxs2("p", { children: [
+                  "\xA9 Copyright: ",
+                  metadata.copyright
+                ] }),
+                metadata.ccli && /* @__PURE__ */ jsxs2("p", { children: [
+                  "CCLI: ",
+                  metadata.ccli
+                ] })
+              ] }),
+              fileName && /* @__PURE__ */ jsxs2("p", { className: "mt-4 opacity-50", children: [
+                "Ficheiro base: ",
+                fileName
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      metadata.youtube && showYoutubePlayer && /* @__PURE__ */ jsx2("div", { className: "hidden", children: /* @__PURE__ */ jsx2(
+        YouTube,
+        {
+          videoId: extractYoutubeId(metadata.youtube),
+          opts: {
+            height: "0",
+            width: "0",
+            playerVars: { autoplay: 1, controls: 0, disablekb: 1 }
+          },
+          onReady: (e) => {
+            setYtPlayerRef(e.target);
+            e.target.pauseVideo();
+            setIsPlayingYoutube(false);
+          },
+          onPlay: () => setIsPlayingYoutube(true),
+          onPause: () => setIsPlayingYoutube(false),
+          onEnd: (e) => {
+            if (isYoutubeRepeatRef.current) {
+              e.target.seekTo(0, true);
+              e.target.playVideo();
+            } else {
+              setIsPlayingYoutube(false);
+            }
+          }
+        }
+      ) }),
+      showYoutubePlayer && metadata.youtube && /* @__PURE__ */ jsxs2("div", { className: "fixed bottom-0 left-0 right-0 h-16 bg-m3-card dark:bg-m3-dark-card border-t border-m3-border dark:border-m3-dark-border shadow-[0_-4px_10px_rgba(0,0,0,0.05)] z-[200] px-4 flex items-center justify-between animate-in slide-in-from-bottom-full", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx2("div", { className: "w-10 h-10 rounded overflow-hidden bg-slate-200 dark:bg-slate-800 shrink-0 border border-m3-border/50", children: metadata.youtube.match(YT_ID_REGEX) || metadata.youtube.match(/^[^&?]+$/) ? /* @__PURE__ */ jsx2(
+            "img",
+            {
+              src: `https://img.youtube.com/vi/${extractYoutubeId(metadata.youtube)}/default.jpg`,
+              alt: "YouTube Thumbnail",
+              className: "w-full h-full object-cover scale-150"
+            }
+          ) : /* @__PURE__ */ jsx2(Disc, { className: "w-5 h-5 m-auto mt-2.5 text-m3-secondary opacity-50" }) }),
+          /* @__PURE__ */ jsxs2("div", { className: "hidden sm:block", children: [
+            /* @__PURE__ */ jsx2("p", { className: "text-[10px] font-black text-m3-text dark:text-m3-dark-text truncate max-w-[120px]", children: metadata.title }),
+            /* @__PURE__ */ jsx2("p", { className: "text-[9px] text-m3-secondary font-medium", children: "\xC1udio do YouTube" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: async () => {
+                if (!ytPlayerRef) return;
+                const t = await ytPlayerRef.getCurrentTime();
+                ytPlayerRef.seekTo(Math.max(0, t - 10), true);
+              },
+              className: "text-m3-secondary hover:text-m3-primary transition-colors active:scale-95",
+              title: "Retroceder 10s",
+              children: /* @__PURE__ */ jsx2(SkipBack, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: () => {
+                if (!ytPlayerRef) return;
+                if (isPlayingYoutube) ytPlayerRef.pauseVideo();
+                else ytPlayerRef.playVideo();
+              },
+              className: "w-10 h-10 rounded-full bg-m3-primary text-white flex items-center justify-center hover:opacity-95 shadow-md active:scale-95 transition-all",
+              children: isPlayingYoutube ? /* @__PURE__ */ jsx2(Pause, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx2(Play, { className: "w-5 h-5 ml-1" })
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: async () => {
+                if (!ytPlayerRef) return;
+                const t = await ytPlayerRef.getCurrentTime();
+                ytPlayerRef.seekTo(t + 10, true);
+              },
+              className: "text-m3-secondary hover:text-m3-primary transition-colors active:scale-95",
+              children: /* @__PURE__ */ jsx2(SkipForward, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: () => setIsYoutubeRepeat((r) => !r),
+              className: `ml-2 transition-colors active:scale-95 ${isYoutubeRepeat ? "text-m3-primary" : "text-m3-secondary hover:text-m3-text"}`,
+              children: /* @__PURE__ */ jsx2(Repeat, { className: "w-4 h-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => {
+              ytPlayerRef?.pauseVideo();
+              setIsPlayingYoutube(false);
+              setShowYoutubePlayer(false);
+            },
+            className: "p-2 text-m3-secondary hover:text-red-500 transition-colors",
+            children: /* @__PURE__ */ jsx2(X, { className: "w-4 h-4" })
+          }
+        ) })
+      ] }),
+      selectedChord && /* @__PURE__ */ jsx2("div", { className: "fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 select-none animate-in fade-in duration-200", children: /* @__PURE__ */ jsxs2("div", { className: "bg-m3-card dark:bg-m3-dark-card border border-m3-border dark:border-m3-dark-border rounded-3xl w-full max-w-sm overflow-hidden shadow-2xl flex flex-col p-6 space-y-4 animate-in zoom-in-95 duration-200", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx2(BookOpen, { className: "w-5 h-5 text-m3-primary dark:text-m3-dark-primary" }),
+            /* @__PURE__ */ jsxs2("h3", { className: "text-sm font-black text-m3-text dark:text-m3-dark-text uppercase tracking-wider", children: [
+              "Dicion\xE1rio: ",
+              selectedChord
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: () => setSelectedChord(null),
+              className: "p-1 rounded-full hover:bg-m3-hover dark:hover:bg-m3-dark-hover text-m3-secondary dark:text-m3-dark-secondary",
+              children: /* @__PURE__ */ jsx2(X, { className: "w-5 h-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex bg-m3-sidebar dark:bg-m3-dark-sidebar p-1 rounded-2xl border border-m3-border dark:border-m3-dark-border", children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: () => setModalInstrument("guitar"),
+              className: `flex-1 py-2 text-xs font-bold rounded-xl transition-all ${modalInstrument === "guitar" ? "bg-m3-primary text-white shadow-sm" : "text-m3-secondary dark:text-m3-dark-secondary hover:text-m3-text"}`,
+              children: "Diagrama de Guitarra"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: () => setModalInstrument("piano"),
+              className: `flex-1 py-2 text-xs font-bold rounded-xl transition-all ${modalInstrument === "piano" ? "bg-m3-primary text-white shadow-sm" : "text-m3-secondary dark:text-m3-dark-secondary hover:text-m3-text"}`,
+              children: "Teclado de Piano"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "py-4 flex flex-col items-center justify-center min-h-[140px] border border-m3-border/30 dark:border-m3-dark-border/30 rounded-2xl bg-m3-sidebar/30 dark:bg-m3-dark-sidebar/10", children: chordFingering ? modalInstrument === "guitar" && chordFingering.guitar ? /* @__PURE__ */ jsx2(
+          GuitarDiagram,
+          {
+            frets: chordFingering.guitar.frets,
+            fingers: chordFingering.guitar.fingers,
+            barre: chordFingering.guitar.barre
+          }
+        ) : modalInstrument === "piano" && chordFingering.piano ? /* @__PURE__ */ jsx2(
+          PianoDiagram,
+          {
+            highlightKeys: chordFingering.piano.highlightKeys
+          }
+        ) : /* @__PURE__ */ jsxs2("div", { className: "text-center p-4", children: [
+          /* @__PURE__ */ jsx2(HelpCircle, { className: "w-8 h-8 mx-auto text-amber-500 opacity-80 mb-2" }),
+          /* @__PURE__ */ jsxs2("p", { className: "text-xs text-m3-secondary dark:text-m3-dark-secondary font-medium", children: [
+            "O diagrama para",
+            " ",
+            modalInstrument === "guitar" ? "Guitarra" : "Piano",
+            " ",
+            "n\xE3o p\xF4de ser calculado."
+          ] })
+        ] }) : /* @__PURE__ */ jsxs2("div", { className: "text-center p-6 space-y-2", children: [
+          /* @__PURE__ */ jsx2(HelpCircle, { className: "w-8 h-8 mx-auto text-amber-500 opacity-80" }),
+          /* @__PURE__ */ jsxs2("p", { className: "text-xs text-m3-text dark:text-m3-dark-text font-bold", children: [
+            'Acorde "',
+            selectedChord,
+            '" n\xE3o registado'
+          ] }),
+          /* @__PURE__ */ jsx2("p", { className: "text-[10px] text-m3-secondary dark:text-m3-dark-secondary max-w-[200px] leading-normal", children: "Este acorde n\xE3o se encontra no nosso dicion\xE1rio estrito, mas pode toc\xE1-lo com as notas de acompanhamento habituais." })
+        ] }) }),
+        chordFingering?.piano && /* @__PURE__ */ jsxs2("div", { className: "text-center font-mono text-xs text-m3-secondary dark:text-m3-dark-secondary bg-m3-sidebar dark:bg-m3-dark-sidebar py-2 rounded-xl", children: [
+          "Notas do Acorde:",
+          " ",
+          /* @__PURE__ */ jsx2("span", { className: "font-bold text-m3-primary dark:text-m3-dark-primary", children: chordFingering.piano.notes.join(" - ") })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => setSelectedChord(null),
+            className: "w-full bg-m3-sidebar dark:bg-m3-dark-sidebar hover:bg-m3-hover dark:hover:bg-m3-dark-hover text-m3-text dark:text-m3-dark-text text-xs py-3 rounded-2xl border border-m3-border dark:border-m3-dark-border font-bold active:scale-95 transition-all",
+            children: "Voltar ao C\xE2ntico"
+          }
+        )
+      ] }) })
+    ] });
+  }
+);
+var LineRenderer = React.memo(
+  ({
+    line,
+    showChords,
+    transpose = 0,
+    onChordClick,
+    maxGridMeasures
+  }) => {
+    if (line.type === "empty") return /* @__PURE__ */ jsx2("div", { className: "h-2" });
+    if (line.type === "comment") return /* @__PURE__ */ jsx2(CommentRenderer, { line });
+    if (line.type === "comment_box") return /* @__PURE__ */ jsx2(CommentBoxRenderer, { line });
+    if (line.type === "chord-section")
+      return /* @__PURE__ */ jsx2(
+        ChordSectionRenderer,
+        {
+          line,
+          showChords,
+          transpose,
+          onChordClick,
+          maxMeasures: maxGridMeasures
+        }
+      );
+    return /* @__PURE__ */ jsx2(
+      LyricsRenderer,
+      {
+        line,
+        showChords,
+        transpose,
+        onChordClick
+      }
+    );
+  }
+);
+var CommentRenderer = React.memo(({ line }) => /* @__PURE__ */ jsx2("div", { className: "text-xs text-slate-400 dark:text-slate-500 italic my-1", children: line.text }));
+var CommentBoxRenderer = React.memo(({ line }) => /* @__PURE__ */ jsxs2("div", { className: "bg-amber-100 dark:bg-amber-900/30 border-l-4 border-amber-500 text-amber-900 dark:text-amber-200 p-2.5 my-2.5 rounded-r-md text-xs font-bold tracking-wide flex items-center gap-2 shadow-sm max-w-fit", children: [
+  /* @__PURE__ */ jsx2(Info, { className: "w-4 h-4 shrink-0 text-amber-600 dark:text-amber-500" }),
+  /* @__PURE__ */ jsx2("span", { children: line.text })
+] }));
+var LyricsRenderer = React.memo(
+  ({
+    line,
+    showChords,
+    transpose = 0,
+    onChordClick
+  }) => {
+    const segments = line.segments || [];
+    return /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap items-end leading-relaxed", children: segments.map((seg, segIdx) => {
+      const hasChord = !!seg.chord;
+      const transposed = hasChord ? transposeChord(seg.chord, transpose) : "";
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: "flex flex-col justify-end relative select-text",
+          style: {
+            minWidth: hasChord && showChords ? `${Math.max(1.1, transposed.length * 0.65)}em` : void 0
+          },
+          children: [
+            showChords && hasChord && /* @__PURE__ */ jsx2(
+              "span",
+              {
+                className: "font-black text-[#0284c7] font-mono select-none pr-1 inline-block pb-0.5 transition-all cursor-pointer hover:opacity-80",
+                style: { fontSize: "0.85em", lineHeight: "1" },
+                onClick: () => onChordClick?.(transposed),
+                children: transposed
+              }
+            ),
+            /* @__PURE__ */ jsx2("span", { className: "text-slate-800 dark:text-slate-200 whitespace-pre", children: seg.text || "\xA0" })
+          ]
+        },
+        segIdx
+      );
+    }) });
+  }
+);
+var ChordSectionRenderer = React.memo(
+  ({
+    line,
+    showChords,
+    transpose = 0,
+    onChordClick,
+    maxMeasures
+  }) => {
+    if (!showChords) return null;
+    const measures = line.measures || [];
+    const hasTiming = measures.some(
+      (m) => m.chords.some((c) => c.timing !== void 0 && c.timing !== 1)
+    );
+    const isGridAligned = maxMeasures !== void 0 && maxMeasures > 0;
+    return /* @__PURE__ */ jsxs2("div", { className: "my-1.5 p-1 w-full flex items-stretch bg-slate-50/80 dark:bg-slate-900/40 rounded-lg border border-slate-200/50 dark:border-slate-800/50 shadow-sm", children: [
+      line.startBarline && /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center shrink-0 w-6", children: renderBarline(line.startBarline) }),
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: isGridAligned ? "grid gap-1 flex-1" : "flex flex-wrap flex-1",
+          style: isGridAligned ? {
+            gridTemplateColumns: `repeat(${maxMeasures}, minmax(0, 1fr))`
+          } : void 0,
+          children: [
+            measures.map((measure, mIdx) => {
+              return /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  className: `flex items-stretch border-r border-slate-200/60 dark:border-slate-700/50 last:border-none ${isGridAligned ? "" : "flex-1 min-w-[120px]"}`,
+                  children: [
+                    /* @__PURE__ */ jsx2("div", { className: "flex-1 flex items-center justify-evenly gap-1 px-1 py-1", children: measure.chords.map((chordSeg, cIdx) => {
+                      const transposed = transposeChord(
+                        chordSeg.chord,
+                        transpose
+                      );
+                      const timing = chordSeg.timing ?? 1;
+                      return /* @__PURE__ */ jsxs2(
+                        "span",
+                        {
+                          className: "flex-1 flex items-center justify-center cursor-pointer rounded transition-colors hover:bg-white dark:hover:bg-slate-800 py-1.5 px-1 min-w-max shadow-sm border border-transparent hover:border-slate-200 dark:hover:border-slate-700",
+                          style: { flexGrow: timing },
+                          onClick: () => onChordClick?.(transposed),
+                          title: timing !== 1 ? `Dura\xE7\xE3o: ${timing}x` : void 0,
+                          children: [
+                            /* @__PURE__ */ jsx2("span", { className: "font-bold text-[#0284c7] dark:text-sky-400 font-mono select-none text-[15px] tracking-wide", children: transposed }),
+                            hasTiming && timing !== 1 && /* @__PURE__ */ jsxs2("span", { className: "ml-0.5 mt-0.5 text-[10px] font-semibold text-indigo-400 dark:text-indigo-500 opacity-80", children: [
+                              timing,
+                              "\xD7"
+                            ] })
+                          ]
+                        },
+                        cIdx
+                      );
+                    }) }),
+                    measure.endBarline && /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center shrink-0 px-1 w-6 bg-slate-100/50 dark:bg-slate-800/50 rounded-r", children: renderBarline(measure.endBarline) })
+                  ]
+                },
+                mIdx
+              );
+            }),
+            isGridAligned && Array.from({
+              length: Math.max(0, maxMeasures - measures.length)
+            }).map((_, i) => /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: "border-r border-slate-200/60 dark:border-slate-700/50 last:border-none bg-slate-50/30 dark:bg-slate-800/10 rounded-sm"
+              },
+              `empty-${i}`
+            ))
+          ]
+        }
+      )
+    ] });
+  }
+);
+function renderBarline(barline) {
+  const wrapperStyle = "flex items-center justify-center flex-shrink-0 select-none";
+  const repeatStyle = "text-indigo-400 dark:text-indigo-500 text-[18px] leading-none";
+  const normalStyle = "text-slate-300 dark:text-slate-600 font-black text-[16px] leading-none";
+  switch (barline) {
+    case "|:":
+      return /* @__PURE__ */ jsx2("span", { className: wrapperStyle, title: "Start repeat", children: /* @__PURE__ */ jsx2("span", { className: repeatStyle, children: "\u{1D106}" }) });
+    case ":|":
+      return /* @__PURE__ */ jsx2("span", { className: wrapperStyle, title: "End repeat", children: /* @__PURE__ */ jsx2("span", { className: repeatStyle, children: "\u{1D107}" }) });
+    case "||":
+      return /* @__PURE__ */ jsx2("span", { className: wrapperStyle, title: "Double barline", children: /* @__PURE__ */ jsx2("span", { className: normalStyle, children: "\u2016" }) });
+    case "|]":
+      return /* @__PURE__ */ jsx2("span", { className: wrapperStyle, title: "End of piece", children: /* @__PURE__ */ jsx2("span", { className: normalStyle, children: "\u{1D102}" }) });
+    case "|":
+      return /* @__PURE__ */ jsx2("span", { className: wrapperStyle, children: /* @__PURE__ */ jsx2("span", { className: normalStyle, children: "|" }) });
+    default:
+      return /* @__PURE__ */ jsx2(
+        "span",
+        {
+          className: `${wrapperStyle} text-slate-400 dark:text-slate-500 text-xs font-bold tracking-widest`,
+          children: barline
+        }
+      );
+  }
+}
+var ChordProRenderer_default = ChordProRenderer;
+
+export {
+  GuitarDiagram,
+  PianoDiagram,
+  ChordRoll,
+  ChordProRenderer,
+  ChordProRenderer_default
+};
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */