codecaine-cli 0.1.0 → 0.1.3

package/dist/resources/bb-plugin/src/snapshot.ts

@@ -0,0 +1,74 @@
+/**
+ * What a mention or a request keeps of a layer. No imports: the bb plugin loads
+ * this inside bb's process, and the editor's request brief reuses it.
+ */
+
+/** How much of a layer's markup a mention carries. A fingerprint to find or
+ *  rebuild the layer by, not its source — getLayer and exportHtml have that. */
+const SNAPSHOT_HTML_MAX = 1200;
+const SNAPSHOT_TEXT_MAX = 200;
+/** Mentions that carry a picture at once; a whole selection of forty layers is
+ *  not forty pictures. */
+export const SNAPSHOT_MAX_LAYERS = 3;
+
+function clip(text: string, max: number): string {
+  const flat = text.replace(/\s+/g, " ").trim();
+  return flat.length > max ? `${flat.slice(0, max)}…` : flat;
+}
+
+/** The frame an element of a running page belongs to: `live:<frame>:<handle>`. */
+export function frameOfLiveId(id: string): string | null {
+  if (!id.startsWith("live:")) return null;
+  const body = id.slice("live:".length);
+  const split = body.lastIndexOf(":");
+  return split > 0 ? body.slice(0, split) : null;
+}
+
+/**
+ * What a mention keeps of a layer so that it still means something once its id
+ * is gone — a reload, a re-import or a restored project renumbers layers, and
+ * "make @Hero bigger" then names nothing. The id stays first (it is what the
+ * tools take while it lasts); after it come the things that survive: name, kind,
+ * place in the tree, words, address of a running page, a short markup excerpt,
+ * and a small picture on disk. Deliberately short: the context rides along on
+ * every later turn of the conversation.
+ */
+export function layerSnapshot(input: {
+  layer: Record<string, unknown>;
+  html?: string | null;
+  /** Of the running page this layer is an element of, when it is one. */
+  page?: { id: string; address: string } | null;
+  shot?: string | null;
+}): string {
+  const { layer, page } = input;
+  const str = (value: unknown): string => (typeof value === "string" ? value : "");
+  const id = str(layer.id);
+  const name = str(layer.name) || str(layer.type) || "layer";
+  const kind = [str(layer.type), str(layer.tag) && str(layer.tag) !== str(layer.type) ? `<${str(layer.tag)}>` : ""]
+    .filter(Boolean)
+    .join(" ");
+  const props = (layer.props ?? {}) as Record<string, unknown>;
+  const size = (layer.size ?? {}) as { width?: unknown; height?: unknown };
+  const lines = [`Layer "${name}" — ${kind || "layer"}, canvas node id ${id}.`];
+  const where = str(layer.path);
+  if (where) lines.push(`Where: ${where}`);
+  if (typeof size.width === "number" && typeof size.height === "number") {
+    lines.push(`Size: ${Math.round(size.width)}×${Math.round(size.height)}`);
+  }
+  const text = str(layer.text);
+  if (text) lines.push(`Text: ${clip(text, SNAPSHOT_TEXT_MAX)}`);
+  const address = page?.address || (/^https?:\/\//.test(str(props.src)) ? str(props.src) : "");
+  if (address) {
+    lines.push(
+      page
+        ? `Element of the running page ${address} (page canvas node id ${page.id}); if the element id above is stale, find it by the markup below.`
+        : `Running page: ${address}`,
+    );
+  }
+  if (input.html) lines.push(`Markup (excerpt): ${clip(input.html, SNAPSHOT_HTML_MAX)}`);
+  if (input.shot) lines.push(`Picture of how it looked when mentioned: ${input.shot}`);
+  lines.push(
+    "If this id no longer resolves, the design was reloaded: find the layer again with listLayers by name or text, or use the markup and picture above.",
+  );
+  return lines.join("\n");
+}