@brianmsm/quarto-bento 0.0.0-stage → 0.1.0

package/distribution/runtime/src/studio/registry.js

@@ -0,0 +1,283 @@
+/** Studio form editor: explicit registry Save, independent of native deck edits. */
+export function attachRegistryEditor({ api, getState, showError }) {
+  const $ = (id) => document.getElementById(id);
+  let snapshot, saving = false, loading = false, dirty = false, serial = 0;
+  const note = (text) => {
+    $("registry-note").textContent = text;
+  };
+  function changed() {
+    dirty = true;
+    note(
+      "Cambios de diseño sin guardar. Cerrar conserva este borrador en la pestaña.",
+    );
+  }
+  function field(label, value, options = {}) {
+    const node = document.createElement("label"),
+      input = document.createElement("input");
+    input.id = "registry-field-" + (++serial);
+    node.htmlFor = input.id;
+    node.append(document.createTextNode(label));
+    input.value = String(value);
+    input.required = true;
+    Object.assign(input, options);
+    input.oninput = changed;
+    node.append(input);
+    return { node, input };
+  }
+  function activeOptions(rename) {
+    const select = $("registry-active"), current = rename ?? select.value;
+    select.replaceChildren(
+      new Option("Selecciona un tema (o ninguno si no hay temas)", ""),
+    );
+    for (const row of $("registry-themes").children) {
+      select.add(new Option(row.fields.name.value, row.fields.name.value));
+    }
+    select.value = current;
+  }
+  function addRow(kind, name, definition) {
+    const root = $("registry-" + kind),
+      row = document.createElement("fieldset");
+    row.className = "registry-row";
+    const legend = document.createElement("legend");
+    legend.textContent = kind === "layouts"
+      ? "Layout con nombre"
+      : "Tema con nombre";
+    row.append(legend);
+    row.fields = {};
+    const add = (key, label, value, options) => {
+      const item = field(label, value, options);
+      row.fields[key] = item.input;
+      row.append(item.node);
+    };
+    add("name", "Nombre", name, {
+      maxLength: 64,
+      pattern: "[a-z][a-z0-9\\-]{0,63}",
+    });
+    if (kind === "layouts") {
+      add("columns", "Columnas", definition.columns, {
+        type: "number",
+        min: "1",
+        max: "6",
+        step: "1",
+      });
+      add("gap", "Separación (px)", definition.gap, {
+        type: "number",
+        min: "0",
+        max: "1000",
+        step: "any",
+      });
+      add("padding", "Margen interior (px)", definition.padding, {
+        type: "number",
+        min: "0",
+        max: "1000",
+        step: "any",
+      });
+    } else {
+      for (
+        const [key, label] of [["background", "Fondo"], ["color", "Texto"], [
+          "accent",
+          "Acento",
+        ], ["fontFamily", "Familia tipográfica"]]
+      ) {
+        add(key, label, definition[key], {
+          maxLength: key === "fontFamily" ? 200 : 100,
+        });
+      }
+      let previous = name;
+      row.fields.name.addEventListener("input", () => {
+        const active = $("registry-active").value === previous
+          ? row.fields.name.value
+          : $("registry-active").value;
+        previous = row.fields.name.value;
+        activeOptions(active);
+      });
+    }
+    const remove = document.createElement("button");
+    remove.type = "button";
+    remove.textContent = kind === "layouts"
+      ? "Eliminar layout"
+      : "Eliminar tema";
+    remove.onclick = () => {
+      row.remove();
+      activeOptions();
+      changed();
+    };
+    row.append(remove);
+    root.append(row);
+  }
+  function display(value) {
+    $("registry-layouts").replaceChildren();
+    $("registry-themes").replaceChildren();
+    for (const [name, definition] of Object.entries(value.layouts ?? {})) {
+      addRow("layouts", name, definition);
+    }
+    for (const [name, definition] of Object.entries(value.themes ?? {})) {
+      addRow("themes", name, definition);
+    }
+    activeOptions(value.activeTheme ?? "");
+    dirty = false;
+  }
+  function controlsDisabled(value) {
+    $("designs").disabled = value;
+    for (
+      const node of $("registry-form").querySelectorAll("input, select, button")
+    ) node.disabled = value;
+  }
+  async function load() {
+    if (loading || saving) return;
+    loading = true;
+    controlsDisabled(true);
+    note("Cargando el registro…");
+    try {
+      const next = await api("design-registry"), state = getState();
+      if (next.docId !== state.docId || next.revision !== state.revision) {
+        throw new Error(
+          "Otra pestaña cambió el proyecto. Recarga el proyecto antes de editar sus diseños.",
+        );
+      }
+      snapshot = next;
+      display(next.registry);
+      note(
+        "Registro cargado. Guardar diseños no modifica QMD ni ejecuta cálculos.",
+      );
+    } finally {
+      loading = false;
+      controlsDisabled(false);
+    }
+  }
+  function serialize() {
+    const registry = { schemaVersion: 1 };
+    for (const kind of ["layouts", "themes"]) {
+      const result = Object.create(null);
+      for (const row of $("registry-" + kind).children) {
+        const { name, ...fields } = row.fields;
+        if (Object.hasOwn(result, name.value)) {
+          throw new Error(`El nombre ${name.value} está repetido.`);
+        }
+        result[name.value] = Object.fromEntries(
+          Object.entries(fields).map((
+            [key, input],
+          ) => [
+            key,
+            input.type === "number" ? Number(input.value) : input.value,
+          ]),
+        );
+      }
+      if (Object.keys(result).length) registry[kind] = result;
+    }
+    if ($("registry-active").value) {
+      registry.activeTheme = $("registry-active").value;
+    }
+    if (registry.themes && !registry.activeTheme) {
+      throw new Error(
+        "Selecciona explícitamente el tema activo antes de guardar.",
+      );
+    }
+    return registry;
+  }
+  $("designs").onclick = async () => {
+    try {
+      if (loading || saving) return;
+      if (!snapshot || !dirty) await load();
+      $("registry-dialog").showModal();
+      if (dirty) {
+        note(
+          "Borrador conservado. Guardar comprobará si el proyecto o el registro cambiaron.",
+        );
+      }
+    } catch (error) {
+      showError(error);
+    }
+  };
+  $("registry-add-layout").onclick = () => {
+    if ($("registry-layouts").children.length >= 64) {
+      note("Se admiten como máximo 64 layouts.");
+      return;
+    }
+    let index = 1;
+    while (
+      [...$("registry-layouts").children].some((row) =>
+        row.fields.name.value === "layout-" + index
+      )
+    ) index++;
+    addRow("layouts", "layout-" + index, { columns: 2, gap: 32, padding: 0 });
+    changed();
+  };
+  $("registry-add-theme").onclick = () => {
+    if ($("registry-themes").children.length >= 32) {
+      note("Se admiten como máximo 32 temas.");
+      return;
+    }
+    let index = 1;
+    while (
+      [...$("registry-themes").children].some((row) =>
+        row.fields.name.value === "tema-" + index
+      )
+    ) index++;
+    addRow("themes", "tema-" + index, {
+      background: "#ffffff",
+      color: "#172a35",
+      accent: "#156f65",
+      fontFamily: "Arial, sans-serif",
+    });
+    activeOptions();
+    changed();
+  };
+  $("registry-active").onchange = changed;
+  $("registry-reload").onclick = async () => {
+    try {
+      await load();
+    } catch (error) {
+      note(error.message);
+    }
+  };
+  $("registry-form").onsubmit = async (event) => {
+    event.preventDefault();
+    if (saving || loading || !snapshot) return;
+    try {
+      const registry = serialize();
+      saving = true;
+      const controls = [
+        ...$("registry-form").querySelectorAll("input, select, button"),
+      ];
+      controls.forEach((node) => {
+        node.disabled = true;
+      });
+      try {
+        const next = await api("design-registry", {
+          registry,
+          expectedDocId: snapshot.docId,
+          expectedRevision: snapshot.revision,
+          expectedHash: snapshot.hash,
+        });
+        snapshot = next;
+        dirty = false;
+        note(
+          "Diseños guardados. Recalcular aplicará los valores seleccionados conservando tu diseño guardado y los cambios pendientes.",
+        );
+      } finally {
+        controls.forEach((node) => {
+          node.disabled = false;
+        });
+        saving = false;
+      }
+    } catch (error) {
+      note(
+        error.message +
+          " El borrador se conserva.",
+      );
+    }
+  };
+  $("registry-close").onclick = () => {
+    if (!saving && !loading) $("registry-dialog").close();
+  };
+  $("registry-dialog").addEventListener("cancel", (event) => {
+    if (saving || loading) event.preventDefault();
+  });
+  addEventListener("beforeunload", (event) => {
+    if (dirty || saving) {
+      event.preventDefault();
+      event.returnValue = "";
+    }
+  });
+}

package/distribution/runtime/src/studio/relations.js

@@ -0,0 +1,169 @@
+/** Explicit diagram relationships, with saved source/native identities. */
+export function attachGraphRelations(
+  { api, getState, saveBefore, setBusy, reloadEditor, showError },
+) {
+  const $ = (id) => document.getElementById(id);
+  let snapshot, working = false;
+  const graph = () =>
+    snapshot?.graphs.find((graph) =>
+      graph.slideId === $("relation-slide").value &&
+      graph.componentId === $("relation-graph").value
+    );
+  const edge = () =>
+    graph()?.edges.find((edge) => edge.id === $("relation-edge").value);
+  function options(id, items, label = (item) => item.label) {
+    $(id).replaceChildren();
+    for (const item of items) {
+      const option = document.createElement("option");
+      option.value = item.id;
+      option.textContent = label(item);
+      $(id).append(option);
+    }
+  }
+  function controls(disabled) {
+    working = disabled;
+    for (
+      const control of $("relations-dialog").querySelectorAll("button, select")
+    ) control.disabled = disabled;
+    if (!disabled) {
+      const editable = graph()?.kind === "diagram" && !!edge();
+      for (const id of ["relation-edge", "relation-from", "relation-to"]) {
+        $(id).disabled = !editable;
+      }
+      $("relation-save").disabled = !editable ||
+        $("relation-from").value === $("relation-to").value;
+    }
+  }
+  function showEdge() {
+    const current = graph(), relation = edge();
+    options(
+      "relation-from",
+      current?.nodes ?? [],
+      (node) => `${node.label} · #${node.id}`,
+    );
+    options(
+      "relation-to",
+      current?.nodes ?? [],
+      (node) => `${node.label} · #${node.id}`,
+    );
+    if (relation) {
+      $("relation-from").value = relation.fromNodeId;
+      $("relation-to").value = relation.toNodeId;
+    }
+    $("relation-sequence").textContent = current?.kind === "timeline"
+      ? current.nodes.map((node) => `${node.label} (#${node.id})`).join(" → ")
+      : "";
+    $("relation-note").textContent = !current
+      ? "Este proyecto no tiene diagramas ni secuencias QMD existentes."
+      : current.kind === "timeline"
+      ? "Secuencia de solo lectura: sus relaciones derivan del orden de los hitos en QMD. Reordena los bloques y recalcula para cambiarla."
+      : relation?.detached
+      ? "El conector está desvinculado. Selecciona ambos nodos para reconectarlo explícitamente. Guardar conserva el cambio pendiente; Revisar cambios permite aplicarlo a QMD."
+      : "Guardar conserva la relación pendiente sin recalcular. Después usa Revisar cambios para comprobar el diagrama y aplicar el parche a QMD.";
+    controls(false);
+  }
+  function showGraph() {
+    const current = graph();
+    options(
+      "relation-edge",
+      current?.kind === "diagram" ? current.edges : [],
+      (edge) => `${edge.label || "Conexión"} · #${edge.id}`,
+    );
+    showEdge();
+  }
+  function showSlide() {
+    options(
+      "relation-graph",
+      snapshot?.graphs.filter((graph) =>
+        graph.slideId === $("relation-slide").value
+      ).map((graph) => ({
+        id: graph.componentId,
+        label: `${
+          graph.kind === "diagram" ? "Diagrama" : "Secuencia · solo lectura"
+        } · #${graph.componentId}`,
+      })) ?? [],
+    );
+    showGraph();
+  }
+  function checkedSnapshot() {
+    const current = getState();
+    if (
+      !snapshot || snapshot.docId !== current?.docId ||
+      snapshot.revision !== current?.revision
+    ) {
+      throw new Error(
+        "El proyecto cambió desde que abriste este diálogo. Ciérralo y vuelve a abrir Relaciones; tus cambios siguen guardados.",
+      );
+    }
+  }
+  $("relations").onclick = async () => {
+    if (working) return;
+    controls(true);
+    setBusy(true);
+    $("busy").textContent = "Guardando cambios antes de revisar relaciones…";
+    try {
+      await saveBefore();
+      snapshot = await api("graphs/relations");
+      checkedSnapshot();
+      const slides = [
+        ...new Map(
+          snapshot.graphs.map((
+            graph,
+          ) => [graph.slideId, {
+            id: graph.slideId,
+            label: `${graph.slideLabel} · #${graph.slideId}`,
+          }]),
+        ).values(),
+      ];
+      options("relation-slide", slides);
+      showSlide();
+      $("relations-dialog").showModal();
+    } catch (error) {
+      showError(error);
+    } finally {
+      controls(false);
+      setBusy(false);
+    }
+  };
+  $("relation-slide").onchange = showSlide;
+  $("relation-graph").onchange = showGraph;
+  $("relation-edge").onchange = showEdge;
+  for (const id of ["relation-from", "relation-to"]) {
+    $(id).onchange = () => controls(false);
+  }
+  $("relation-form").onsubmit = async (event) => {
+    event.preventDefault();
+    if (working || graph()?.kind !== "diagram" || !edge()) return;
+    try {
+      checkedSnapshot();
+      const current = graph();
+      controls(true);
+      setBusy(true);
+      $("busy").textContent = "Guardando relación pendiente en el proyecto…";
+      await api("graphs/relations", {
+        expectedDocId: snapshot.docId,
+        expectedRevision: snapshot.revision,
+        expectedSourceHash: snapshot.sourceHash,
+        slideId: current.slideId,
+        componentId: current.componentId,
+        edgeId: edge().id,
+        fromNodeId: $("relation-from").value,
+        toNodeId: $("relation-to").value,
+      });
+      $("relations-dialog").close();
+      reloadEditor();
+    } catch (error) {
+      $("relation-note").textContent = error.message;
+      setBusy(false);
+      showError(error);
+    } finally {
+      controls(false);
+    }
+  };
+  $("relation-close").onclick = () => {
+    if (!working) $("relations-dialog").close();
+  };
+  $("relations-dialog").addEventListener("cancel", (event) => {
+    if (working) event.preventDefault();
+  });
+}