@seanmozeik/markdown-display 0.3.5 → 0.4.1

package/src/ui/picker.ts

@@ -0,0 +1,120 @@
+import { autocomplete, isCancel } from '@clack/prompts';
+import { Effect, Schema } from 'effect';
+import fuzzysort from 'fuzzysort';
+
+import { getTerminalHeight } from '../lib/width';
+import { getMutedColor } from './themes/semantic';
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+class PickerError extends Schema.TaggedErrorClass<PickerError>()('PickerError', {
+  cause: Schema.Unknown,
+}) {}
+
+const MIN_PICKER_ITEMS = 5;
+const PICKER_VERTICAL_RESERVE = 6;
+
+const isHiddenPathSegment = (part: string): boolean => part.startsWith('.') && part !== '.';
+
+const shouldSkipMarkdownPath = (file: string): boolean =>
+  file.includes('node_modules/') ||
+  file.includes('.git/') ||
+  file.split('/').some((part) => isHiddenPathSegment(part));
+
+/**
+ * Find all markdown files in current directory, sorted by modification time.
+ * Ignores node_modules, .git, and hidden directories.
+ */
+const scanMarkdownFiles = async (): Promise<string[]> => {
+  const glob = new Bun.Glob('**/*.md');
+  const files: string[] = [];
+
+  for await (const file of glob.scan({ cwd: '.', onlyFiles: true })) {
+    if (!shouldSkipMarkdownPath(file)) {
+      files.push(file);
+    }
+  }
+
+  const filesWithMtime = await Promise.all(
+    files.map(async (file) => {
+      const stat = await Bun.file(file).stat();
+      return { file, mtime: stat.mtime };
+    }),
+  );
+
+  filesWithMtime.sort((a, b) => b.mtime.getTime() - a.mtime.getTime());
+
+  return filesWithMtime.map((entry) => entry.file);
+};
+
+const findMarkdownFiles = Effect.fn('md.find-markdown-files')(function* findMarkdownFilesGen() {
+  return yield* Effect.tryPromise({
+    catch: (cause) => new PickerError({ cause }),
+    try: () => scanMarkdownFiles(),
+  });
+});
+
+/**
+ * Create a fuzzy filter function for use with @clack/prompts autocomplete.
+ * Uses fuzzysort for fast, subsequence-based matching (like fzf/SublimeText).
+ */
+const createFuzzyFilter = (): ((input: string, options: Option[]) => Option[]) => {
+  return (input: string, options: Option[]): Option[] => {
+    if (input.trim().length === 0) {
+      return options;
+    }
+
+    const results = fuzzysort.go(input, options, { key: 'label', limit: 100, threshold: 0.2 });
+
+    return results.map((result) => result.obj);
+  };
+};
+
+const isStringSelection = (value: unknown): value is string => typeof value === 'string';
+
+/**
+ * Show interactive file picker for markdown files.
+ * Returns array of selected file paths, or empty array if cancelled/no files.
+ */
+const showFilePicker = Effect.fn('md.show-file-picker')(function* showFilePickerGen() {
+  const files = yield* findMarkdownFiles();
+
+  if (files.length === 0) {
+    yield* Effect.sync(() => {
+      console.log(getMutedColor()('No markdown files found in current directory.'));
+    });
+    return [];
+  }
+
+  const allOptions = files.map((f) => ({ label: f, value: f }));
+  const maxItems = Math.max(MIN_PICKER_ITEMS, getTerminalHeight() - PICKER_VERTICAL_RESERVE);
+  const filter = createFuzzyFilter();
+
+  const selected = yield* Effect.tryPromise({
+    catch: (cause) => new PickerError({ cause }),
+    try: () =>
+      autocomplete({
+        maxItems,
+        message: 'Select a markdown file',
+        options() {
+          const input = this.userInput || '';
+          return filter(input, allOptions);
+        },
+      }),
+  });
+
+  if (isCancel(selected)) {
+    return [];
+  }
+
+  if (!isStringSelection(selected)) {
+    return [];
+  }
+
+  return [selected];
+});
+
+export { createFuzzyFilter, findMarkdownFiles, PickerError, showFilePicker };

package/src/ui/themes/ansi.ts

@@ -0,0 +1,161 @@
+// Src/ui/themes/ansi.ts
+import { getColorLevel } from './color-support';
+
+const ESC = '\u001B';
+const RESET = `${ESC}[0m`;
+
+const ANSI_STANDARD_COUNT = 16;
+const ANSI_CUBE_BASE = 16;
+const ANSI_CUBE_SIZE = 36;
+const ANSI_GRAYSCALE_BASE = 232;
+const ANSI_PALETTE_SIZE = 256;
+const RGB_MAX = 255;
+const RGB_MID = 128;
+const RGB_LIGHT = 192;
+const CUBE_LEVELS = 6;
+const CUBE_RGB_OFFSET = 55;
+const CUBE_RGB_STEP = 40;
+const GRAY_RAMP_START = 8;
+const GRAY_RAMP_STEP = 10;
+
+type Rgb = [number, number, number];
+
+const STANDARD_ANSI_COLORS: readonly Rgb[] = [
+  [0, 0, 0],
+  [RGB_MID, 0, 0],
+  [0, RGB_MID, 0],
+  [RGB_MID, RGB_MID, 0],
+  [0, 0, RGB_MID],
+  [RGB_MID, 0, RGB_MID],
+  [0, RGB_MID, RGB_MID],
+  [RGB_LIGHT, RGB_LIGHT, RGB_LIGHT],
+  [RGB_MID, RGB_MID, RGB_MID],
+  [RGB_MAX, 0, 0],
+  [0, RGB_MAX, 0],
+  [RGB_MAX, RGB_MAX, 0],
+  [0, 0, RGB_MAX],
+  [RGB_MAX, 0, RGB_MAX],
+  [0, RGB_MAX, RGB_MAX],
+  [RGB_MAX, RGB_MAX, RGB_MAX],
+] as const;
+
+const cubeComponentToRgb = (value: number): number =>
+  value === 0 ? 0 : CUBE_RGB_OFFSET + value * CUBE_RGB_STEP;
+
+/**
+ * ANSI 256-color palette RGB values.
+ * Colors 0-15: Standard colors (system-dependent, skip)
+ * Colors 16-231: 6x6x6 color cube
+ * Colors 232-255: Grayscale ramp
+ */
+const getAnsi256Color = (code: number): Rgb => {
+  if (code < ANSI_STANDARD_COUNT) {
+    const color = STANDARD_ANSI_COLORS[code];
+    return color ?? [0, 0, 0];
+  }
+
+  if (code < ANSI_GRAYSCALE_BASE) {
+    const idx = code - ANSI_CUBE_BASE;
+    const r = Math.floor(idx / ANSI_CUBE_SIZE);
+    const g = Math.floor((idx % ANSI_CUBE_SIZE) / CUBE_LEVELS);
+    const b = idx % CUBE_LEVELS;
+    return [cubeComponentToRgb(r), cubeComponentToRgb(g), cubeComponentToRgb(b)];
+  }
+
+  const gray = GRAY_RAMP_START + (code - ANSI_GRAYSCALE_BASE) * GRAY_RAMP_STEP;
+  return [gray, gray, gray];
+};
+
+const hexToRgb = (hex: string): Rgb => {
+  const h = hex.replace('#', '').toLowerCase();
+  return [
+    Number.parseInt(h.slice(0, 2), 16),
+    Number.parseInt(h.slice(2, 4), 16),
+    Number.parseInt(h.slice(4, 6), 16),
+  ];
+};
+
+const colorDistance = ([r1, g1, b1]: Rgb, [r2, g2, b2]: Rgb): number =>
+  (r1 - r2) ** 2 + (g1 - g2) ** 2 + (b1 - b2) ** 2;
+
+const hexToAnsi256 = (hex: string): number => {
+  const target = hexToRgb(hex);
+  let closest = ANSI_CUBE_BASE;
+  let minDist = Infinity;
+
+  for (let i = ANSI_CUBE_BASE; i < ANSI_PALETTE_SIZE; i += 1) {
+    const dist = colorDistance(target, getAnsi256Color(i));
+    if (dist < minDist) {
+      minDist = dist;
+      closest = i;
+    }
+  }
+
+  return closest;
+};
+
+const ansiFg = (hex: string): ((text: string) => string) => {
+  if (getColorLevel() >= 3) {
+    const [r, g, b] = hexToRgb(hex);
+    return (text: string) => `${ESC}[38;2;${r};${g};${b}m${text}${RESET}`;
+  }
+  const code = hexToAnsi256(hex);
+  return (text: string) => `${ESC}[38;5;${code}m${text}${RESET}`;
+};
+
+const ansiBg = (hex: string): ((text: string) => string) => {
+  if (getColorLevel() >= 3) {
+    const [r, g, b] = hexToRgb(hex);
+    return (text: string) => `${ESC}[48;2;${r};${g};${b}m${text}${RESET}`;
+  }
+  const code = hexToAnsi256(hex);
+  return (text: string) => `${ESC}[48;5;${code}m${text}${RESET}`;
+};
+
+const ansiFgBg = (fgHex: string, bgHex: string): ((text: string) => string) => {
+  if (getColorLevel() >= 3) {
+    const [fgR, fgG, fgB] = hexToRgb(fgHex);
+    const [bgR, bgG, bgB] = hexToRgb(bgHex);
+    return (text: string) =>
+      `${ESC}[38;2;${fgR};${fgG};${fgB};48;2;${bgR};${bgG};${bgB}m${text}${RESET}`;
+  }
+  const fgCode = hexToAnsi256(fgHex);
+  const bgCode = hexToAnsi256(bgHex);
+  return (text: string) => `${ESC}[38;5;${fgCode};48;5;${bgCode}m${text}${RESET}`;
+};
+
+const ansiBold = (hex: string): ((text: string) => string) => {
+  if (getColorLevel() >= 3) {
+    const [r, g, b] = hexToRgb(hex);
+    return (text: string) => `${ESC}[1;38;2;${r};${g};${b}m${text}${RESET}`;
+  }
+  const code = hexToAnsi256(hex);
+  return (text: string) => `${ESC}[1;38;5;${code}m${text}${RESET}`;
+};
+
+const ansiItalic = (hex: string): ((text: string) => string) => {
+  if (getColorLevel() >= 3) {
+    const [r, g, b] = hexToRgb(hex);
+    return (text: string) => `${ESC}[3;38;2;${r};${g};${b}m${text}${RESET}`;
+  }
+  const code = hexToAnsi256(hex);
+  return (text: string) => `${ESC}[3;38;5;${code}m${text}${RESET}`;
+};
+
+/**
+ * Style text with foreground color, transitioning to another color instead of resetting.
+ * Useful for styled text embedded in colored contexts (like box titles in borders).
+ */
+const ansiFgTransition = (fgHex: string, transitionHex: string): ((text: string) => string) => {
+  if (getColorLevel() >= 3) {
+    const [fgR, fgG, fgB] = hexToRgb(fgHex);
+    const [trR, trG, trB] = hexToRgb(transitionHex);
+    return (text: string) =>
+      `${ESC}[38;2;${fgR};${fgG};${fgB}m${text}${ESC}[38;2;${trR};${trG};${trB}m`;
+  }
+  const fgCode = hexToAnsi256(fgHex);
+  const trCode = hexToAnsi256(transitionHex);
+  return (text: string) => `${ESC}[38;5;${fgCode}m${text}${ESC}[38;5;${trCode}m`;
+};
+
+export { ansiBg, ansiBold, ansiFg, ansiFgBg, ansiFgTransition, ansiItalic, hexToAnsi256, hexToRgb };

package/src/ui/themes/color-support.ts

@@ -0,0 +1,106 @@
+// Src/ui/themes/color-support.ts
+import supportsColor from 'supports-color';
+
+type ColorLevel = 0 | 1 | 2 | 3;
+
+let cachedLevel: ColorLevel | null = null;
+let configOverride: boolean | 'auto' = 'auto';
+
+/**
+ * Initialize color environment on module load.
+ * Syncs NO_COLOR to FORCE_COLOR for chalk/boxen consistency.
+ */
+const initColorEnvironment = (): void => {
+  const noColorEnv = Bun.env['NO_COLOR'] !== undefined && Bun.env['NO_COLOR'] !== '';
+  const noColorFlag = process.argv.includes('--no-color');
+
+  if (noColorEnv || noColorFlag) {
+    Bun.env['FORCE_COLOR'] = '0';
+  }
+};
+
+initColorEnvironment();
+
+/**
+ * Set color configuration override.
+ * @param truecolor - true for truecolor, false for 256-color, 'auto' for detection
+ */
+const setColorConfig = (truecolor: boolean | 'auto'): void => {
+  configOverride = truecolor;
+  cachedLevel = null;
+
+  if (truecolor === true) {
+    Bun.env['FORCE_COLOR'] = '3';
+  } else if (truecolor === false) {
+    Bun.env['FORCE_COLOR'] = '2';
+  }
+};
+
+/** Reset the cached color level. Useful for testing. */
+const resetColorCache = (): void => {
+  cachedLevel = null;
+};
+
+const detectAutoColorLevel = (): ColorLevel => {
+  const force = Bun.env['FORCE_COLOR'];
+  if (force === '0') {
+    return 0;
+  }
+  if (force === '1') {
+    return 1;
+  }
+  if (force === '2') {
+    return 2;
+  }
+  if (force === '3') {
+    return 3;
+  }
+
+  if (!process.stdout.isTTY) {
+    return 0;
+  }
+
+  const colorterm = Bun.env['COLORTERM'];
+  if (colorterm === 'truecolor' || colorterm === '24bit') {
+    return 3;
+  }
+
+  const term = Bun.env['TERM'] ?? '';
+  if (term.includes('256color')) {
+    return 2;
+  }
+
+  const detected = supportsColor.stdout;
+  if (detected === false) {
+    return 0;
+  }
+  return detected.level as ColorLevel;
+};
+
+/** Get the current color level: 0 (none), 1 (basic), 2 (256), or 3 (truecolor). */
+const getColorLevel = (): ColorLevel => {
+  if (cachedLevel !== null) {
+    return cachedLevel;
+  }
+
+  let level: ColorLevel;
+
+  if (Bun.env['NO_COLOR'] !== undefined && Bun.env['NO_COLOR'] !== '') {
+    level = 0;
+  } else if (configOverride === true) {
+    level = 3;
+  } else if (configOverride === false) {
+    level = 2;
+  } else {
+    level = detectAutoColorLevel();
+  }
+
+  cachedLevel = level;
+  return level;
+};
+
+/** Check if truecolor is supported. */
+const supportsTruecolor = (): boolean => getColorLevel() >= 3;
+
+export type { ColorLevel };
+export { getColorLevel, resetColorCache, setColorConfig, supportsTruecolor };