@real-music-packages/web-core 0.34.1 → 0.35.0

package/dist/index.d.ts

@@ -160,4 +160,28 @@ interface ChordVoicing {
  */
 declare function distributeChord(midiNotes: number[]): ChordVoicing[];
 
-export { ALL_KEYS, type BestPositionOpts, CHORD_TEMPLATES, type ChordTemplate, type ChordVoicing, type FretPosition, INTERVALS, type IntervalDef, KEYS_PREFER_FLATS, MAJOR_SCALE_INTERVALS, MAX_FRET, NOTE_NAMES, NOTE_NAMES_FLAT, STRINGS, STRING_COUNT, bestPosition, buildPlacementMap, chosenPlacement, distributeChord, enumerateBoardCells, getMidiNote, getScaleDegree, getStability, intervalBySemitones, isInScale, midiToFrequency, midiToNoteName, midiToPositions, noteNameToIndex, noteToFret, pitchClass, useFlatsForKeyFifths, useFlatsForKeyName };
+interface ShareCardOptions {
+    appName: string;
+    accentColor: string;
+    drillTitle: string;
+    score: number;
+    total: number;
+    streakBest: number;
+    url: string;
+    logoText?: string;
+}
+declare function shareFilename(appName: string, drillTitle: string): string;
+declare function shareCardLines(r: {
+    score: number;
+    total: number;
+    streakBest: number;
+}): {
+    scoreLine: string;
+    percentLine: string;
+    streakLine: string;
+};
+declare function renderShareCard(opts: ShareCardOptions): Promise<Blob>;
+/** Share via navigator.share(files) → clipboard image → download. Never throws. */
+declare function shareOrDownload(blob: Blob, filename: string, shareText: string): Promise<'shared' | 'copied' | 'downloaded'>;
+
+export { ALL_KEYS, type BestPositionOpts, CHORD_TEMPLATES, type ChordTemplate, type ChordVoicing, type FretPosition, INTERVALS, type IntervalDef, KEYS_PREFER_FLATS, MAJOR_SCALE_INTERVALS, MAX_FRET, NOTE_NAMES, NOTE_NAMES_FLAT, STRINGS, STRING_COUNT, type ShareCardOptions, bestPosition, buildPlacementMap, chosenPlacement, distributeChord, enumerateBoardCells, getMidiNote, getScaleDegree, getStability, intervalBySemitones, isInScale, midiToFrequency, midiToNoteName, midiToPositions, noteNameToIndex, noteToFret, pitchClass, renderShareCard, shareCardLines, shareFilename, shareOrDownload, useFlatsForKeyFifths, useFlatsForKeyName };

package/dist/index.js

@@ -50,6 +50,83 @@ var CHORD_TEMPLATES = [
   { name: "sus4", intervals: [0, 5, 7] },
   { name: "sus2", intervals: [0, 2, 7] }
 ];
+
+// src/shareCard.ts
+function shareFilename(appName, drillTitle) {
+  const slug = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  return `${slug(appName)}-${slug(drillTitle)}-score.png`;
+}
+function shareCardLines(r) {
+  return {
+    scoreLine: `${r.score} / ${r.total}`,
+    percentLine: `${Math.round(r.score / r.total * 100)}%`,
+    streakLine: `Best streak: ${r.streakBest}`
+  };
+}
+var W = 1080;
+var H = 1350;
+var FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+async function renderShareCard(opts) {
+  const canvas = document.createElement("canvas");
+  canvas.width = W;
+  canvas.height = H;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("canvas 2d unavailable");
+  const { scoreLine, percentLine, streakLine } = shareCardLines(opts);
+  ctx.fillStyle = "#0b0e14";
+  ctx.fillRect(0, 0, W, H);
+  const glow = ctx.createRadialGradient(W * 0.8, H * 0.15, 0, W * 0.8, H * 0.15, W * 0.9);
+  glow.addColorStop(0, opts.accentColor + "55");
+  glow.addColorStop(1, "transparent");
+  ctx.fillStyle = glow;
+  ctx.fillRect(0, 0, W, H);
+  ctx.textAlign = "center";
+  ctx.fillStyle = "#9aa3b2";
+  ctx.font = `600 44px ${FONT}`;
+  ctx.fillText((opts.logoText ?? opts.appName).toUpperCase(), W / 2, 140);
+  ctx.fillStyle = "#e8ecf3";
+  ctx.font = `800 72px ${FONT}`;
+  ctx.fillText(opts.drillTitle, W / 2, 320);
+  ctx.fillStyle = opts.accentColor;
+  ctx.font = `800 260px ${FONT}`;
+  ctx.fillText(percentLine, W / 2, 680);
+  ctx.fillStyle = "#e8ecf3";
+  ctx.font = `600 56px ${FONT}`;
+  ctx.fillText(`${scoreLine} correct`, W / 2, 790);
+  ctx.fillText(streakLine, W / 2, 880);
+  ctx.fillStyle = "#9aa3b2";
+  ctx.font = `600 44px ${FONT}`;
+  ctx.fillText("Can you beat it?", W / 2, 1120);
+  ctx.fillStyle = opts.accentColor;
+  ctx.font = `700 48px ${FONT}`;
+  ctx.fillText(opts.url.replace(/^https?:\/\//, ""), W / 2, 1200);
+  return await new Promise(
+    (resolve, reject) => canvas.toBlob((b) => b ? resolve(b) : reject(new Error("toBlob failed")), "image/png")
+  );
+}
+async function shareOrDownload(blob, filename, shareText) {
+  const file = new File([blob], filename, { type: "image/png" });
+  try {
+    if (typeof navigator !== "undefined" && navigator.canShare?.({ files: [file] })) {
+      await navigator.share({ files: [file], text: shareText });
+      return "shared";
+    }
+  } catch {
+  }
+  try {
+    if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
+      await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+      return "copied";
+    }
+  } catch {
+  }
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(blob);
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(a.href);
+  return "downloaded";
+}
 export {
   ALL_KEYS,
   CHORD_TEMPLATES,
@@ -77,6 +154,10 @@ export {
   noteNameToIndex,
   noteToFret,
   pitchClass,
+  renderShareCard,
+  shareCardLines,
+  shareFilename,
+  shareOrDownload,
   useFlatsForKeyFifths,
   useFlatsForKeyName
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/frequency.ts","../src/chords.ts"],"sourcesContent":["/** Equal-temperament MIDI → frequency (A4 = MIDI 69 = 440 Hz). */\nexport function midiToFrequency(midi: number): number {\n  return 440 * Math.pow(2, (midi - 69) / 12);\n}\n","export interface ChordTemplate { name: string; intervals: number[] }\n\n/** Chord-quality templates, richer qualities first so naming matches the\n *  most specific quality (e.g. maj7 before plain major). */\nexport const CHORD_TEMPLATES: ChordTemplate[] = [\n  { name: 'maj7', intervals: [0, 4, 7, 11] },\n  { name: '7',    intervals: [0, 4, 7, 10] },\n  { name: 'm7',   intervals: [0, 3, 7, 10] },\n  { name: 'dim7', intervals: [0, 3, 6, 9] },\n  { name: 'm7b5', intervals: [0, 3, 6, 10] },\n  { name: '',     intervals: [0, 4, 7] },\n  { name: 'm',    intervals: [0, 3, 7] },\n  { name: 'dim',  intervals: [0, 3, 6] },\n  { name: 'aug',  intervals: [0, 4, 8] },\n  { name: 'sus4', intervals: [0, 5, 7] },\n  { name: 'sus2', intervals: [0, 2, 7] },\n];\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACO,SAAS,gBAAgB,MAAsB;AACpD,SAAO,MAAM,KAAK,IAAI,IAAI,OAAO,MAAM,EAAE;AAC3C;;;ACCO,IAAM,kBAAmC;AAAA,EAC9C,EAAE,MAAM,QAAQ,WAAW,CAAC,GAAG,GAAG,GAAG,EAAE,EAAE;AAAA,EACzC,EAAE,MAAM,KAAQ,WAAW,CAAC,GAAG,GAAG,GAAG,EAAE,EAAE;AAAA,EACzC,EAAE,MAAM,MAAQ,WAAW,CAAC,GAAG,GAAG,GAAG,EAAE,EAAE;AAAA,EACzC,EAAE,MAAM,QAAQ,WAAW,CAAC,GAAG,GAAG,GAAG,CAAC,EAAE;AAAA,EACxC,EAAE,MAAM,QAAQ,WAAW,CAAC,GAAG,GAAG,GAAG,EAAE,EAAE;AAAA,EACzC,EAAE,MAAM,IAAQ,WAAW,CAAC,GAAG,GAAG,CAAC,EAAE;AAAA,EACrC,EAAE,MAAM,KAAQ,WAAW,CAAC,GAAG,GAAG,CAAC,EAAE;AAAA,EACrC,EAAE,MAAM,OAAQ,WAAW,CAAC,GAAG,GAAG,CAAC,EAAE;AAAA,EACrC,EAAE,MAAM,OAAQ,WAAW,CAAC,GAAG,GAAG,CAAC,EAAE;AAAA,EACrC,EAAE,MAAM,QAAQ,WAAW,CAAC,GAAG,GAAG,CAAC,EAAE;AAAA,EACrC,EAAE,MAAM,QAAQ,WAAW,CAAC,GAAG,GAAG,CAAC,EAAE;AACvC;","names":[]}
+{"version":3,"sources":["../src/frequency.ts","../src/chords.ts","../src/shareCard.ts"],"sourcesContent":["/** Equal-temperament MIDI → frequency (A4 = MIDI 69 = 440 Hz). */\nexport function midiToFrequency(midi: number): number {\n  return 440 * Math.pow(2, (midi - 69) / 12);\n}\n","export interface ChordTemplate { name: string; intervals: number[] }\n\n/** Chord-quality templates, richer qualities first so naming matches the\n *  most specific quality (e.g. maj7 before plain major). */\nexport const CHORD_TEMPLATES: ChordTemplate[] = [\n  { name: 'maj7', intervals: [0, 4, 7, 11] },\n  { name: '7',    intervals: [0, 4, 7, 10] },\n  { name: 'm7',   intervals: [0, 3, 7, 10] },\n  { name: 'dim7', intervals: [0, 3, 6, 9] },\n  { name: 'm7b5', intervals: [0, 3, 6, 10] },\n  { name: '',     intervals: [0, 4, 7] },\n  { name: 'm',    intervals: [0, 3, 7] },\n  { name: 'dim',  intervals: [0, 3, 6] },\n  { name: 'aug',  intervals: [0, 4, 8] },\n  { name: 'sus4', intervals: [0, 5, 7] },\n  { name: 'sus2', intervals: [0, 2, 7] },\n];\n","// Post-round score-share card: branded 1080×1350 PNG rendered client-side.\n// Pure-canvas, no font/image fetches — safe on any origin.\n\nexport interface ShareCardOptions {\n  appName: string;      // \"Real Ear Trainer\"\n  accentColor: string;  // app theme accent, e.g. \"#5492D4\"\n  drillTitle: string;   // \"Name the Interval\"\n  score: number;\n  total: number;\n  streakBest: number;\n  url: string;          // canonical drill URL printed on the card\n  logoText?: string;    // defaults to appName\n}\n\nexport function shareFilename(appName: string, drillTitle: string): string {\n  const slug = (s: string) =>\n    s.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');\n  return `${slug(appName)}-${slug(drillTitle)}-score.png`;\n}\n\nexport function shareCardLines(r: { score: number; total: number; streakBest: number }) {\n  return {\n    scoreLine: `${r.score} / ${r.total}`,\n    percentLine: `${Math.round((r.score / r.total) * 100)}%`,\n    streakLine: `Best streak: ${r.streakBest}`,\n  };\n}\n\nconst W = 1080;\nconst H = 1350;\nconst FONT = \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\";\n\nexport async function renderShareCard(opts: ShareCardOptions): Promise<Blob> {\n  const canvas = document.createElement('canvas');\n  canvas.width = W;\n  canvas.height = H;\n  const ctx = canvas.getContext('2d');\n  if (!ctx) throw new Error('canvas 2d unavailable');\n  const { scoreLine, percentLine, streakLine } = shareCardLines(opts);\n\n  // Background: near-black with a soft accent glow top-right.\n  ctx.fillStyle = '#0b0e14';\n  ctx.fillRect(0, 0, W, H);\n  const glow = ctx.createRadialGradient(W * 0.8, H * 0.15, 0, W * 0.8, H * 0.15, W * 0.9);\n  glow.addColorStop(0, opts.accentColor + '55');\n  glow.addColorStop(1, 'transparent');\n  ctx.fillStyle = glow;\n  ctx.fillRect(0, 0, W, H);\n\n  ctx.textAlign = 'center';\n  ctx.fillStyle = '#9aa3b2';\n  ctx.font = `600 44px ${FONT}`;\n  ctx.fillText((opts.logoText ?? opts.appName).toUpperCase(), W / 2, 140);\n\n  ctx.fillStyle = '#e8ecf3';\n  ctx.font = `800 72px ${FONT}`;\n  ctx.fillText(opts.drillTitle, W / 2, 320);\n\n  ctx.fillStyle = opts.accentColor;\n  ctx.font = `800 260px ${FONT}`;\n  ctx.fillText(percentLine, W / 2, 680);\n\n  ctx.fillStyle = '#e8ecf3';\n  ctx.font = `600 56px ${FONT}`;\n  ctx.fillText(`${scoreLine} correct`, W / 2, 790);\n  ctx.fillText(streakLine, W / 2, 880);\n\n  ctx.fillStyle = '#9aa3b2';\n  ctx.font = `600 44px ${FONT}`;\n  ctx.fillText('Can you beat it?', W / 2, 1120);\n  ctx.fillStyle = opts.accentColor;\n  ctx.font = `700 48px ${FONT}`;\n  ctx.fillText(opts.url.replace(/^https?:\\/\\//, ''), W / 2, 1200);\n\n  return await new Promise<Blob>((resolve, reject) =>\n    canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('toBlob failed'))), 'image/png')\n  );\n}\n\n/** Share via navigator.share(files) → clipboard image → download. Never throws. */\nexport async function shareOrDownload(\n  blob: Blob,\n  filename: string,\n  shareText: string\n): Promise<'shared' | 'copied' | 'downloaded'> {\n  const file = new File([blob], filename, { type: 'image/png' });\n  try {\n    if (typeof navigator !== 'undefined' && navigator.canShare?.({ files: [file] })) {\n      await navigator.share({ files: [file], text: shareText });\n      return 'shared';\n    }\n  } catch {\n    /* user cancelled or share failed — fall through */\n  }\n  try {\n    if (typeof ClipboardItem !== 'undefined' && navigator.clipboard?.write) {\n      await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);\n      return 'copied';\n    }\n  } catch {\n    /* clipboard blocked — fall through */\n  }\n  const a = document.createElement('a');\n  a.href = URL.createObjectURL(blob);\n  a.download = filename;\n  a.click();\n  URL.revokeObjectURL(a.href);\n  return 'downloaded';\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@real-music-packages/web-core",
-  "version": "0.34.1",
+  "version": "0.35.0",
   "description": "Shared music-theory + audio primitives for the music-suite web apps",
   "type": "module",
   "main": "./dist/index.js",