【実装】herdr app の mod で Files パネルを拡張する — Markdown・HTML・PDF・画像をその場でプレビュー

mods/<name>/
├── main.js    # mod 本体（View を継承したクラスを default export）
└── mod.json   # 最初にどこに出すか {"place": "right" | "none" ...}

import { View, div } from "gpui-kit";
import { v_flex } from "gpui-base";
import { theme } from "herdr";

export default class Hello extends View {
  init(_props, cx) { this.count = 0; }
  render() {
    const t = theme();
    return v_flex().size_full().p(12).bg(t.surface)
      .child(div().id("btn").on_click((_e, cx) => { this.count++; cx.notify(); })
        .child(`clicked ${this.count}`));
  }
}

herdr-app do mod.clone '{"name":"files","as":"my-files"}'
herdr-app do layout.clone '{"name":"main","as":"my-layout"}'

import json
d = json.load(open("layouts/my-layout.json"))
def walk(x):
    if isinstance(x, dict):
        c = x.get("content")
        if isinstance(c, dict) and c.get("mod") == "files":
            c["mod"] = "my-files"
        for v in x.values(): walk(v)
    elif isinstance(x, list):
        for v in x: walk(v)
walk(d)
json.dump(d, open("layouts/my-layout.json", "w"), indent=2, ensure_ascii=False)

function kindOf(path) {
  const ext = (path?.split(".").pop() ?? "").toLowerCase();
  if (["md", "mdx", "markdown"].includes(ext)) return "md";
  if (["html", "htm", "xhtml"].includes(ext)) return "html";
  if (["png", "jpg", "jpeg", "gif", "webp", "bmp", "tif", "tiff", "ico", "svg"].includes(ext)) return "image";
  if (ext === "pdf") return "pdf";
  return null;
}

const view = this.kind === "html"
  ? TextView.html(`html-${this.file}`, this.text)
  : TextView.markdown(`md-${this.file}`, this.text);
return v_flex().id("md-preview").flex_1().min_h(0).overflow_y_scrollbar().px(18).py(14)
  .child(view.selectable(true).on_link_click((url, cx) => this.onLink(url, cx)));

modeSwitch(t) {
  const seg = (mode, label) => div().id(`md-mode-${mode}`).px(8).h(22).flex().items_center()
    .rounded(5).cursor_pointer().text_size(11.5)
    .bg(this.mdMode === mode ? t.selected : t.background)
    .text_color(this.mdMode === mode ? t.foreground : t.muted)
    .on_click((_e, cx) => { this.mdMode = mode; cx.notify(); }).child(label);
  return h_flex().gap(2).p(2).rounded(7).border_1().border_color(t.border)
    .child(seg("preview", "Preview")).child(seg("source", "Source"));
}

mod="$HOME/.config/herdr-app/mods/my-files"; c="$mod/.cache"; mkdir -p "$c"
find "$c" -mindepth 1 -maxdepth 1 -mtime +2 -exec rm -rf {} + 2>/dev/null || true
id="$(md5 -q -s "$src")-$(stat -f %m "$src")"
ext="$(printf %s "${src##*.}" | tr A-Z a-z)"; f="img-$id.$ext"
[ -e "$c/$f" ] || cp "$src" "$c/$f"

// osascript -l JavaScript pdf2png.jxa <pdf> <outdir> [maxPages] [width]
ObjC.import('AppKit');
ObjC.import('Quartz');
function run(argv) {
  const src = argv[0], out = argv[1], max = Number(argv[2]) || 40, W = Number(argv[3]) || 1400;
  const doc = $.PDFDocument.alloc.initWithURL($.NSURL.fileURLWithPath(src));
  if (!doc || doc.isNil()) throw new Error('Cannot open PDF');
  const total = Number(doc.pageCount), n = Math.min(total, max), images = [];
  for (let i = 0; i < n; i++) {
    const page = doc.pageAtIndex(i);
    const b = page.boundsForBox(0); // kPDFDisplayBoxMediaBox
    const rot = Number(page.rotation) % 180 !== 0;
    const w0 = rot ? b.size.height : b.size.width, h0 = rot ? b.size.width : b.size.height;
    const H = Math.round(W * h0 / w0);
    const img = page.thumbnailOfSizeForBox($.NSMakeSize(W, H), 0);
    const rep = $.NSBitmapImageRep.imageRepWithData(img.TIFFRepresentation);
    const png = rep.representationUsingTypeProperties(4, $({})); // PNG
    const name = 'p' + String(i + 1).padStart(3, '0') + '.png';
    png.writeToFileAtomically(out + '/' + name, true);
    images.push({ name: name, w: W, h: H });
  }
  return JSON.stringify({ pages: total, images: images });
}

const w = Math.max(120, (this.width ?? 368) - 36);
return v_flex().id("pdf-preview").flex_1().min_h(0).overflow_y_scrollbar().p(12).gap(10)
  .children(index.images.map(p => image(dir + p.name).w(w).h(Math.round(w * p.h / p.w)).flex_none()));

mdp() {
  local f="${1:-README.md}"
  [[ -f "$f" ]] || { echo "mdp: $f not found" >&2; return 1; }
  f="${f:A}"
  herdr-app do pane.split "{\"direction\":\"right\",\"mod\":\"md-preview\",\"props\":{\"file\":\"$f\"}}"
}