@vfrey/vfrey 0.0.1 → 1.0.0-beta.0

package/vendor/framey/dist/component-QF5VGYMU.js

@@ -0,0 +1,176 @@
+import { createRequire as __hf_createRequire } from "node:module";
+import { fileURLToPath as __hf_fileURLToPath } from "node:url";
+import { dirname as __hf_dirname } from "node:path";
+var require = __hf_createRequire(import.meta.url);
+var __filename = __hf_fileURLToPath(import.meta.url);
+var __dirname = __hf_dirname(__filename);
+import {
+  downloadRender,
+  runAssetImport
+} from "./chunk-QAMKOG67.js";
+import {
+  FigmaClientError,
+  createFigmaClient,
+  nodeToHtml,
+  parseFigmaRef,
+  readBindings,
+  resolveBindings,
+  withFigmaErrors
+} from "./chunk-ZW6DURPF.js";
+import "./chunk-P5ZBLXJ6.js";
+import {
+  defineCommand
+} from "./chunk-S3S4TGEH.js";
+import "./chunk-VORQIH64.js";
+import "./chunk-JVBRJMOP.js";
+import {
+  slugify
+} from "./chunk-VC76R6W2.js";
+import "./chunk-SDYDNHEE.js";
+import "./chunk-M2WBOQ2Q.js";
+
+// src/commands/figma/component.ts
+import { existsSync, mkdirSync, writeFileSync } from "fs";
+import { join, relative } from "path";
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+async function runComponentImport(refInput, deps) {
+  const ref = parseFigmaRef(refInput);
+  if (!ref.nodeId) throw new Error(`ref "${refInput}" has no node id`);
+  const tree = await deps.client.nodeTree(ref);
+  const bindings = resolveBindings(tree, readBindings(deps.projectDir));
+  const mapped = nodeToHtml(tree, bindings, { rootName: deps.name });
+  const name = slugify(deps.name ?? tree.name);
+  const componentDir = join(deps.projectDir, "compositions", "components", name);
+  if (existsSync(componentDir))
+    console.warn(
+      `component dir compositions/components/${name} already exists \u2014 overwriting (rename the figma frame for a separate import)`
+    );
+  mkdirSync(componentDir, { recursive: true });
+  const { html, frozenAssets, failedRasterize } = await rasterizeFallback(
+    mapped,
+    ref.fileKey,
+    componentDir,
+    deps
+  );
+  const htmlFile = join(componentDir, `${name}.html`);
+  writeFileSync(htmlFile, html + "\n");
+  const registryItem = {
+    name,
+    type: "hyperframes:component",
+    description: `Imported from figma ${ref.fileKey}/${ref.nodeId}`,
+    files: [
+      {
+        path: `${name}.html`,
+        target: `compositions/components/${name}/${name}.html`,
+        type: "hyperframes:snippet"
+      },
+      // The paths the frozen files ACTUALLY landed at (image_NNN.svg), which
+      // is also what the emitted HTML references — not the slug names.
+      ...frozenAssets.map((p) => ({
+        path: p.split("/").pop() ?? p,
+        target: p.replaceAll("\\", "/"),
+        type: "hyperframes:asset"
+      }))
+    ]
+  };
+  writeFileSync(
+    join(componentDir, "registry-item.json"),
+    JSON.stringify(registryItem, null, 2) + "\n"
+  );
+  return {
+    name,
+    htmlPath: relative(deps.projectDir, htmlFile),
+    unresolved: bindings.unresolved,
+    rasterized: mapped.rasterize,
+    failedRasterize
+  };
+}
+async function rasterizeFallback(mapped, fileKey, componentDir, deps) {
+  let html = mapped.html;
+  const frozenAssets = [];
+  const failedRasterize = [];
+  for (const req of mapped.rasterize) {
+    const asset = await renderWithPngRetry(fileKey, req, deps);
+    if (asset === null) {
+      failedRasterize.push(req.nodeId);
+      console.warn(
+        `could not render node ${req.nodeId} ("${req.name}") as svg or png \u2014 leaving its placeholder without src`
+      );
+      continue;
+    }
+    frozenAssets.push(asset.record.path);
+    const srcRel = relative(componentDir, join(deps.projectDir, asset.record.path)).replaceAll(
+      "\\",
+      "/"
+    );
+    const emittedId = escapeAttr(req.nodeId);
+    html = html.replaceAll(
+      `data-figma-rasterize="${emittedId}" `,
+      `data-figma-rasterize="${emittedId}" src="${escapeAttr(srcRel)}" `
+    );
+  }
+  return { html, frozenAssets, failedRasterize };
+}
+async function renderWithPngRetry(fileKey, req, deps) {
+  for (const format of ["svg", "png"]) {
+    try {
+      return await runAssetImport(
+        `${fileKey}:${req.nodeId}`,
+        { format, description: req.name },
+        { projectDir: deps.projectDir, client: deps.client, download: deps.download }
+      );
+    } catch (err) {
+      if (!(err instanceof FigmaClientError) || err.code !== "RENDER_FAILED") throw err;
+    }
+  }
+  return null;
+}
+var component_default = defineCommand({
+  meta: { name: "component", description: "Import a figma frame as an editable HTML component" },
+  args: {
+    ref: { type: "positional", description: "figma URL or fileKey:nodeId", required: true },
+    name: {
+      type: "string",
+      description: "component name override (variant frames often share a name and would collide)"
+    },
+    dir: { type: "string", description: "project directory", default: "." }
+  },
+  async run({ args }) {
+    await withFigmaErrors("figma:component", async () => {
+      const t0 = Date.now();
+      const client = createFigmaClient({ token: process.env.FIGMA_TOKEN ?? "" });
+      const result = await runComponentImport(args.ref, {
+        projectDir: args.dir,
+        client,
+        download: downloadRender,
+        name: args.name
+      });
+      console.log(`imported component "${result.name}" \u2192 ${result.htmlPath}`);
+      if (result.rasterized.length > 0) {
+        const ok = result.rasterized.length - result.failedRasterize.length;
+        console.log(
+          result.failedRasterize.length > 0 ? `rasterized ${ok}/${result.rasterized.length} node(s) via asset export \u2014 ${result.failedRasterize.length} skipped (unrenderable; placeholders have no src)` : `rasterized ${result.rasterized.length} node(s) via asset export`
+        );
+      }
+      if (result.unresolved.length > 0) {
+        console.log(
+          `${result.unresolved.length} binding(s) reference tokens not yet imported \u2014 colors baked as literals (flagged data-figma-unresolved). Run \`framey figma tokens\` on the source/library file, then re-import to link them.`
+        );
+      }
+      const { trackFigmaImport } = await import("./telemetry-UN55N6U6.js");
+      trackFigmaImport({
+        phase: "component",
+        unresolvedBindings: result.unresolved.length,
+        rasterizedNodes: result.rasterized.length,
+        rasterizeFailures: result.failedRasterize.length,
+        durationMs: Date.now() - t0
+      });
+    });
+  }
+});
+export {
+  component_default as default,
+  runComponentImport
+};

package/vendor/framey/dist/compositions-XT3PMNDF.js

@@ -0,0 +1,238 @@
+import { createRequire as __hf_createRequire } from "node:module";
+import { fileURLToPath as __hf_fileURLToPath } from "node:url";
+import { dirname as __hf_dirname } from "node:path";
+var require = __hf_createRequire(import.meta.url);
+var __filename = __hf_fileURLToPath(import.meta.url);
+var __dirname = __hf_dirname(__filename);
+import {
+  withMeta
+} from "./chunk-O4YRB27L.js";
+import {
+  resolveProject
+} from "./chunk-O7BGSQ5F.js";
+import "./chunk-P5ZBLXJ6.js";
+import {
+  ensureDOMParser
+} from "./chunk-442JNXRM.js";
+import "./chunk-GNEFDLFB.js";
+import "./chunk-2UZQHDM7.js";
+import "./chunk-NYEXNSHM.js";
+import {
+  defineCommand
+} from "./chunk-S3S4TGEH.js";
+import "./chunk-54HJ63Q2.js";
+import "./chunk-ISN5GRYI.js";
+import {
+  c
+} from "./chunk-VORQIH64.js";
+import "./chunk-JVBRJMOP.js";
+import "./chunk-TIQB63MX.js";
+import "./chunk-IZCW2NKT.js";
+import "./chunk-RNV3DM4S.js";
+import "./chunk-DLA44CMS.js";
+import "./chunk-UJZREAV6.js";
+import "./chunk-VC76R6W2.js";
+import "./chunk-X7HBSTCZ.js";
+import "./chunk-B7RJV74O.js";
+import "./chunk-DPVXBVLL.js";
+import "./chunk-OFQWTKPW.js";
+import "./chunk-634HSJ3J.js";
+import "./chunk-FXMKHHPO.js";
+import "./chunk-RQVDTPGD.js";
+import "./chunk-AHX34EFP.js";
+import "./chunk-T2EUWCJE.js";
+import "./chunk-T6AGUTZJ.js";
+import "./chunk-XT6MXC7A.js";
+import "./chunk-K4MJX7SR.js";
+import "./chunk-4UMPIPCQ.js";
+import {
+  resolveReferencedStart
+} from "./chunk-4P7NX5BM.js";
+import "./chunk-VAS6HQX3.js";
+import {
+  readProjectFile
+} from "./chunk-6BNTGNGD.js";
+import {
+  resolveCompositionDuration
+} from "./chunk-CZGHFATT.js";
+import "./chunk-PKZ7RK5N.js";
+import "./chunk-W2LGJSEN.js";
+import "./chunk-MMQ52NIZ.js";
+import {
+  readDataDurationSeconds
+} from "./chunk-BSQ7XANM.js";
+import "./chunk-SDYDNHEE.js";
+import "./chunk-RXATE6FZ.js";
+import "./chunk-3422KMTD.js";
+import "./chunk-3GXQPCJC.js";
+import "./chunk-M2WBOQ2Q.js";
+
+// src/commands/compositions.ts
+import { readFileSync } from "fs";
+import { resolve, dirname } from "path";
+var examples = [
+  ["List compositions in the current project", "framey compositions"],
+  ["Output as JSON", "framey compositions --json"]
+];
+var NON_RENDERED_TAGS = /* @__PURE__ */ new Set(["script", "style", "link", "meta", "template"]);
+function countRenderableDescendants(root) {
+  return Array.from(root.querySelectorAll("*")).filter(
+    (el) => !NON_RENDERED_TAGS.has(el.tagName.toLowerCase())
+  ).length;
+}
+function estimateDurationFromScripts(root) {
+  let duration = 0;
+  for (const script of Array.from(root.querySelectorAll("script"))) {
+    const content = script.textContent ?? "";
+    const durationPattern = /\bduration\s*:\s*(\d+(?:\.\d+)?)/g;
+    let match;
+    while ((match = durationPattern.exec(content)) !== null) {
+      const value = Number.parseFloat(match[1] ?? "");
+      if (Number.isFinite(value) && value > duration) {
+        duration = value;
+      }
+    }
+  }
+  return duration;
+}
+function parseCompositions(html, baseDir) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "text/html");
+  const compositionDivs = doc.querySelectorAll("[data-composition-id]");
+  const compositions = [];
+  const startCache = /* @__PURE__ */ new Map();
+  const visiting = /* @__PURE__ */ new Set();
+  compositionDivs.forEach((div) => {
+    const id = div.getAttribute("data-composition-id") ?? "unknown";
+    const width = parseInt(div.getAttribute("data-width") ?? "1920", 10);
+    const height = parseInt(div.getAttribute("data-height") ?? "1080", 10);
+    const compositionSrc = div.getAttribute("data-composition-src");
+    if (compositionSrc) {
+      const subPath = resolve(baseDir, compositionSrc);
+      const sub = readProjectFile(subPath);
+      if (sub.kind === "file") {
+        const subInfo = parseSubComposition(sub.text, id, width, height);
+        compositions.push({ ...subInfo, source: compositionSrc });
+        return;
+      }
+    }
+    const timedChildren = div.querySelectorAll("[data-start]");
+    const clipEndsSeconds = [];
+    let elementCount = 0;
+    timedChildren.forEach((el) => {
+      elementCount++;
+      const start = resolveReferencedStart(doc, el, startCache, visiting);
+      const endAttr = el.getAttribute("data-end");
+      const durationAttr = el.getAttribute("data-duration");
+      let end;
+      if (endAttr) {
+        end = parseFloat(endAttr);
+      } else if (durationAttr) {
+        end = start + parseFloat(durationAttr);
+      } else {
+        end = start + 5;
+      }
+      clipEndsSeconds.push(end);
+    });
+    const duration = resolveCompositionDuration({
+      authoredDurationSeconds: readDataDurationSeconds((name) => div.getAttribute(name)),
+      clipEndsSeconds
+    }).seconds ?? 0;
+    compositions.push({
+      id,
+      duration,
+      width,
+      height,
+      elementCount
+    });
+  });
+  return compositions;
+}
+function parseSubComposition(html, fallbackId, fallbackWidth, fallbackHeight) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "text/html");
+  const template = doc.querySelector("template");
+  const searchDocument = template?.content ?? doc;
+  const compDiv = searchDocument.querySelector("[data-composition-id]");
+  const id = compDiv?.getAttribute("data-composition-id") ?? fallbackId;
+  const width = parseInt(compDiv?.getAttribute("data-width") ?? String(fallbackWidth), 10);
+  const height = parseInt(compDiv?.getAttribute("data-height") ?? String(fallbackHeight), 10);
+  const searchRoot = compDiv ?? searchDocument;
+  const timedChildren = searchRoot.querySelectorAll("[data-start], .clip, .caption-group");
+  let elementCount = timedChildren.length;
+  if (elementCount === 0 && compDiv) {
+    elementCount = countRenderableDescendants(compDiv);
+  }
+  const clipEndsSeconds = [];
+  if (compDiv) {
+    const timedEls = compDiv.querySelectorAll("[data-start]");
+    const startCache = /* @__PURE__ */ new Map();
+    const visiting = /* @__PURE__ */ new Set();
+    timedEls.forEach((el) => {
+      elementCount = Math.max(elementCount, timedEls.length);
+      const start = resolveReferencedStart(doc, el, startCache, visiting);
+      const endAttr = el.getAttribute("data-end");
+      const durAttr = el.getAttribute("data-duration");
+      let end;
+      if (endAttr) {
+        end = parseFloat(endAttr);
+      } else if (durAttr) {
+        end = start + parseFloat(durAttr);
+      } else {
+        end = start + 5;
+      }
+      clipEndsSeconds.push(end);
+    });
+  }
+  let duration = resolveCompositionDuration({
+    authoredDurationSeconds: readDataDurationSeconds((name) => compDiv?.getAttribute(name)),
+    clipEndsSeconds
+  }).seconds ?? 0;
+  if (duration <= 0) {
+    duration = estimateDurationFromScripts(searchRoot);
+  }
+  return { id, duration, width, height, elementCount };
+}
+var compositions_default = defineCommand({
+  meta: { name: "compositions", description: "List all compositions in a project" },
+  args: {
+    dir: { type: "positional", description: "Project directory", required: false },
+    json: { type: "boolean", description: "Output as JSON", default: false }
+  },
+  async run({ args }) {
+    const project = resolveProject(args.dir);
+    const html = readFileSync(project.indexPath, "utf-8");
+    ensureDOMParser();
+    const compositions = parseCompositions(html, dirname(project.indexPath));
+    if (args.json) {
+      console.log(JSON.stringify(withMeta({ compositions }), null, 2));
+      return;
+    }
+    if (compositions.length === 0) {
+      console.log(`${c.success("\u25C7")}  ${c.accent(project.name)} \u2014 no compositions found`);
+      return;
+    }
+    const compositionLabel = compositions.length === 1 ? "1 composition" : `${compositions.length} compositions`;
+    console.log(
+      `${c.success("\u25C7")}  ${c.accent(project.name)} ${c.dim("\u2014")} ${c.dim(compositionLabel)}`
+    );
+    console.log();
+    const maxIdLen = compositions.reduce((max, comp) => Math.max(max, comp.id.length), 0);
+    for (const comp of compositions) {
+      const id = c.accent(comp.id.padEnd(maxIdLen));
+      const duration = c.bold(`${comp.duration.toFixed(1)}s`);
+      const resolution = c.dim(`${comp.width}\xD7${comp.height}`);
+      const elements = c.dim(
+        `${comp.elementCount} ${comp.elementCount === 1 ? "element" : "elements"}`
+      );
+      const source = comp.source ? c.dim(` \u2190 ${comp.source}`) : "";
+      console.log(`   ${id}   ${duration}   ${resolution}   ${elements}${source}`);
+    }
+  }
+});
+export {
+  compositions_default as default,
+  examples,
+  parseCompositions,
+  parseSubComposition
+};

package/vendor/framey/dist/contactSheet-7W6GYHBQ.js

@@ -0,0 +1,24 @@
+import { createRequire as __hf_createRequire } from "node:module";
+import { fileURLToPath as __hf_fileURLToPath } from "node:url";
+import { dirname as __hf_dirname } from "node:path";
+var require = __hf_createRequire(import.meta.url);
+var __filename = __hf_fileURLToPath(import.meta.url);
+var __dirname = __hf_dirname(__filename);
+import {
+  createAssetContactSheet,
+  createContactSheet,
+  createScrollContactSheet,
+  createSnapshotContactSheet,
+  createSvgContactSheet
+} from "./chunk-6GV5XSOR.js";
+import "./chunk-GKZEVJIB.js";
+import "./chunk-VMC4WSH5.js";
+import "./chunk-6BEFEWFB.js";
+import "./chunk-M2WBOQ2Q.js";
+export {
+  createAssetContactSheet,
+  createContactSheet,
+  createScrollContactSheet,
+  createSnapshotContactSheet,
+  createSvgContactSheet
+};