@brianmsm/quarto-bento 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,188 @@
+/** Explicit roles and durable recovery, using the saved project revision. */
+export function attachComponentEditor(
+  { api, getState, saveBefore, setBusy, reloadEditor, showError },
+) {
+  const $ = (id) => document.getElementById(id);
+  let snapshot, submitting = false;
+  const labels = {
+    title: "Título",
+    body: "Cuerpo",
+    label: "Etiqueta",
+    value: "Valor escrito",
+    detail: "Detalle (opcional)",
+  };
+  function showFields() {
+    $("component-fields").replaceChildren();
+    const roles = $("component-kind").value === "card"
+      ? ["title", "body"]
+      : ["label", "value", "detail"];
+    for (const role of roles) {
+      const label = document.createElement("label");
+      label.textContent = labels[role];
+      const input = document.createElement(
+        role === "body" || role === "detail" ? "textarea" : "input",
+      );
+      input.name = role;
+      input.dataset.role = role;
+      input.maxLength = 6000;
+      input.required = role !== "detail";
+      label.append(input);
+      $("component-fields").append(label);
+    }
+  }
+  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 Añadir componente.",
+      );
+    }
+    return current;
+  }
+  function actionControls(disabled) {
+    submitting = disabled;
+    for (
+      const input of $("component-dialog").querySelectorAll(
+        "button, input, textarea, select",
+      )
+    ) input.disabled = disabled;
+  }
+  async function run(action) {
+    if (submitting) return;
+    try {
+      const current = checkedSnapshot();
+      actionControls(true);
+      setBusy(true);
+      $("busy").textContent = "Guardando componente en el proyecto…";
+      await api("components/action", {
+        ...action,
+        revision: current.revision,
+        expectedDocId: current.docId,
+      });
+      $("component-dialog").close();
+      reloadEditor();
+    } catch (error) {
+      $("component-note").textContent = error.message;
+      setBusy(false);
+      showError(error);
+    } finally {
+      actionControls(false);
+    }
+  }
+  function showPending() {
+    $("component-pending").replaceChildren();
+    for (const intent of snapshot.componentCreations ?? []) {
+      const section = document.createElement("section"),
+        title = document.createElement("h4");
+      const first = intent.members[0].snapshot.html.replace(/<[^>]*>/g, "");
+      title.textContent = `${
+        intent.kind === "card" ? "Tarjeta" : "Indicador"
+      }: ${first}`;
+      section.append(title);
+      const slide = snapshot.emitted.slides.find((slide) =>
+        slide.id === intent.slideId
+      );
+      const ids = [
+        intent.backgroundId,
+        ...intent.members.map((member) => member.nativeId),
+      ];
+      const missing = ids.filter((id) =>
+        !slide?.elements.some((element) => element.id === id)
+      );
+      const background = slide?.elements.find((element) =>
+        element.id === intent.backgroundId
+      );
+      const invalid = !!background &&
+          (background.type !== "shape" || background.shape !== "rect") ||
+        slide?.elements.some((element) =>
+          intent.members.some((member) => member.nativeId === element.id) &&
+          element.type !== "text"
+        );
+      const extra = slide?.elements.some((element) =>
+        element.groupId === intent.id && !ids.includes(element.id)
+      );
+      const note = document.createElement("p");
+      note.textContent = !slide
+        ? "Su diapositiva está pendiente de eliminación. Restáurala en Diapositivas o revisa su eliminación para resolver este componente."
+        : missing.length
+        ? "Componente incompleto. Restaurar recupera los miembros ausentes con su último contenido y diseño guardados; conserva los que siguen presentes."
+        : invalid || extra
+        ? "El tipo de algún miembro cambió o hay objetos adicionales en el grupo. Puedes resolverlos en Bento o descartar esta creación pendiente."
+        : "Creación pendiente. Revisar cambios mostrará su inserción completa en QMD.";
+      section.append(note);
+      if (slide && missing.length) {
+        const restore = document.createElement("button");
+        restore.type = "button";
+        restore.textContent = "Restaurar componente incompleto";
+        restore.onclick = () => run({ action: "restore", id: intent.id });
+        section.append(restore);
+      }
+      const discard = document.createElement("button");
+      discard.type = "button";
+      discard.textContent = "Descartar componente pendiente";
+      discard.onclick = () => run({ action: "discard", id: intent.id });
+      section.append(discard);
+      $("component-pending").append(section);
+    }
+    $("component-pending-title").hidden = !snapshot.componentCreations?.length;
+  }
+  $("components").onclick = async () => {
+    if (submitting) return;
+    setBusy(true);
+    $("busy").textContent = "Guardando cambios antes de añadir un componente…";
+    try {
+      await saveBefore();
+      snapshot = await api("state");
+      checkedSnapshot();
+      $("component-slide").replaceChildren();
+      for (
+        const slide of snapshot.emitted.slides.filter((slide) =>
+          snapshot.generatedBaseline.slides.some((baseline) =>
+            baseline.id === slide.id
+          )
+        )
+      ) {
+        const option = document.createElement("option");
+        option.value = slide.id;
+        option.textContent = slide.name || slide.id;
+        $("component-slide").append(option);
+      }
+      $("component-kind").value = "card";
+      showFields();
+      showPending();
+      $("component-note").textContent = "";
+      $("component-dialog").showModal();
+    } catch (error) {
+      showError(error);
+    } finally {
+      setBusy(false);
+    }
+  };
+  $("component-kind").onchange = showFields;
+  $("component-form").onsubmit = async (event) => {
+    event.preventDefault();
+    const fields = {};
+    for (
+      const input of $("component-fields").querySelectorAll("input, textarea")
+    ) {
+      if (input.name !== "detail" || input.value.trim()) {
+        fields[input.name] = input.value;
+      }
+    }
+    await run({
+      action: "create",
+      kind: $("component-kind").value,
+      slideId: $("component-slide").value,
+      fields,
+    });
+  };
+  $("component-close").onclick = () => {
+    if (!submitting) $("component-dialog").close();
+  };
+  $("component-dialog").addEventListener("cancel", (event) => {
+    if (submitting) event.preventDefault();
+  });
+}

package/distribution/runtime/src/studio/index.html

@@ -0,0 +1,283 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Quarto-Bento Studio</title>
+    <style>
+    body {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      margin: 0;
+      font: 15px system-ui;
+      color: #e8efed;
+      background: #152c32;
+    }
+    header {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 18px;
+      min-height: 42px;
+    }
+    h1 {
+      font-size: 17px;
+      margin: 0 16px 0 0;
+    }
+    button {
+      font: inherit;
+      padding: 8px 12px;
+      border: 0;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: .5;
+      cursor: default;
+    }
+    #status {
+      margin-left: auto;
+      max-width: 100%;
+    }
+    #project-diagnostics {
+      flex-shrink: 0;
+      max-height: 25vh;
+      overflow: auto;
+      padding: 10px 18px;
+      color: #382710;
+      background: #fff1cf;
+      border-block: 1px solid #d7a64b;
+      overflow-wrap: anywhere;
+    }
+    #project-diagnostics h2 {
+      font-size: 16px;
+      margin: 0 0 6px;
+    }
+    #diagnostic-list {
+      margin: 0;
+      padding-left: 22px;
+    }
+    #diagnostic-list li + li {
+      margin-top: 8px;
+    }
+    #editor-region {
+      flex: 1;
+      min-height: 0;
+      position: relative;
+    }
+    iframe {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border: 0;
+      background: white;
+    }
+    dialog {
+      width: min(880px,90vw);
+      max-height: 78vh;
+      overflow: auto;
+      border: 0;
+      border-radius: 12px;
+      padding: 24px;
+      color: #172a35;
+    }
+    dialog::backdrop {
+      background: #102a35aa;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      background: #f3f6f5;
+      padding: 12px;
+      border-radius: 6px;
+    }
+    #busy {
+      position: absolute;
+      inset: 0;
+      z-index: 20;
+      background: #eff5f0ed;
+      color: #172a35;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+    }
+    #busy:not([hidden]) {
+      display: flex;
+    }
+    .registry-row {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 12px;
+      margin: 14px 0;
+      border: 1px solid #cbd9d6;
+      border-radius: 6px;
+    }
+    .registry-row label {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .registry-row input {
+      font: inherit;
+      padding: 6px;
+      min-width: 0;
+    }
+    #component-fields {
+      display: grid;
+      gap: 14px;
+      margin: 18px 0;
+    }
+    #component-fields label {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    #component-fields input,
+    #component-fields textarea {
+      font: inherit;
+      padding: 8px;
+    }
+    #component-fields textarea {
+      min-height: 80px;
+      resize: vertical;
+    }
+    #component-pending section {
+      border-top: 1px solid #cbd9d6;
+      margin-top: 16px;
+    }
+    #component-pending button {
+      margin: 0 8px 8px 0;
+    }
+    #registry-note {
+      min-height: 2em;
+    }
+    #registry-form > button {
+      margin-top: 12px;
+    }
+    #patches section {
+      margin: 18px 0;
+      border-top: 1px solid #cbd9d6;
+    }
+    .before {
+      border-left: 4px solid #ac4646;
+    }
+    .after {
+      border-left: 4px solid #247367;
+    }
+    #apply {
+      background: #156f65;
+      color: white;
+    }
+    #sync-selection label,
+    #delete-confirmations label {
+      display: block;
+      margin: 10px 0;
+    }
+    #sync-note {
+      line-height: 1.5;
+    }
+    #slide-list section {
+      margin: 18px 0;
+      border-top: 1px solid #cbd9d6;
+    }
+    #slide-list button {
+      margin-right: 8px;
+    }
+    #presenter-dialog {
+      width: 95vw;
+      max-width: none;
+      height: 90vh;
+      max-height: 92vh;
+      padding: 12px;
+    }
+    #presenter-frame {
+      height: calc(90vh - 50px);
+    }
+    #delete-confirmations label {
+      display: block;
+      margin: 12px 0;
+    }
+    </style>
+  </head>
+  <body>
+    <header><h1>Quarto-Bento</h1><button id="save" disabled>Guardar proyecto</button><button id="slides" disabled>Diapositivas</button><button id="components" disabled>Añadir componente</button><button id="relations" disabled>Relaciones</button><button id="layouts" disabled>Aplicar diseño</button><button id="designs" disabled>Diseños y temas</button><button id="review" disabled>Revisar cambios</button><button id="reconcile" disabled>Comparar con QMD</button><button id="render" disabled>Recalcular</button><button id="presenter" disabled>Presentar con gráficos</button><span id="status" role="status">Abriendo…</span></header>
+    <section id="project-diagnostics" hidden role="status" aria-live="polite"
+      aria-labelledby="diagnostic-title">
+      <h2 id="diagnostic-title">Avisos del proyecto</h2>
+      <ul id="diagnostic-list"></ul>
+    </section>
+    <main id="editor-region">
+      <iframe id="editor" src="/deck" title="Editor Bento"></iframe>
+      <div id="busy" hidden
+        role="status">Recalculando. Tus cambios están guardados.</div>
+    </main>
+    <dialog
+      id="review-dialog"><h2>Revisar cambios hacia QMD</h2><p id="sync-note">Guardar conserva el proyecto; sincronizar aplica únicamente los cambios que revisas aquí.</p><p>Selecciona los cambios que quieres sincronizar. Los cambios excluidos se conservan pendientes. Los miembros de un componente deben revisarse juntos.</p><div id="sync-selection"></div><p id="sync-selection-summary" role="status"></p><div id="delete-confirmations"></div><div id="patches"></div><details><summary>Origen y detalle de los cambios</summary><div id="changes"></div></details><button id="apply" disabled>Aplicar estos cambios a QMD</button> <button id="close">Cerrar</button></dialog>
+    <dialog
+      id="slides-dialog"><h2>Diapositivas</h2><p>Ocultar conserva el contenido y lo omite en la presentación y el PDF. Marcar para eliminar guarda una eliminación pendiente; después debes revisarla y confirmarla para modificar QMD. Puedes restaurarla antes de sincronizar.</p><p id="slides-note" role="status"></p><div id="slide-list"></div><button id="slides-close">Cerrar</button></dialog>
+    <dialog id="layouts-dialog" aria-labelledby="layouts-title">
+      <h2 id="layouts-title">Aplicar diseño reutilizable</h2>
+      <p>Elige los objetos de cada columna. El título y los objetos no seleccionados conservan su posición. Las columnas siguen el orden actual de los objetos; dentro de cada columna reciben espacios iguales. Texto e imágenes usan ese marco y las tablas conservan la altura de sus filas.</p>
+      <p>Se aplican los valores actuales del diseño. Si cambias su definición en Diseños y temas, vuelve a aplicarlo a estos objetos. No se modifica QMD; sus atributos explícitos quedan pendientes para Revisar cambios.</p>
+      <form id="layouts-form">
+        <label for="layout-slide">Diapositiva</label><select id="layout-slide"></select>
+        <label for="layout-name">Diseño</label><select id="layout-name"></select>
+        <div id="layout-objects"></div>
+        <p id="layout-note" role="status"></p><pre id="layout-preview" hidden></pre>
+        <button id="layout-preview-button" type="button">Vista previa de posiciones</button>
+        <button id="layout-apply" type="submit" disabled>Aplicar a los objetos seleccionados</button>
+        <button id="layout-close" type="button">Cerrar</button>
+      </form>
+    </dialog>
+    <dialog id="relations-dialog" aria-labelledby="relations-title">
+      <h2 id="relations-title">Relaciones de diagramas QMD</h2>
+      <p>Elige los nodos por su etiqueta e identidad fuente. Guardar conserva un cambio pendiente; la revisión posterior es el paso que modifica QMD.</p>
+      <form id="relation-form">
+        <p><label for="relation-slide">Diapositiva</label> <select id="relation-slide" required></select></p>
+        <p><label for="relation-graph">Diagrama o secuencia</label> <select id="relation-graph" required></select></p>
+        <p><label for="relation-edge">Conexión</label> <select id="relation-edge" required></select></p>
+        <p><label for="relation-from">Desde</label> <select id="relation-from" required></select></p>
+        <p><label for="relation-to">Hacia</label> <select id="relation-to" required></select></p>
+        <p id="relation-sequence"></p>
+        <p id="relation-note" role="status" aria-live="polite"></p>
+        <button id="relation-save" type="submit">Guardar relación pendiente</button> <button id="relation-close" type="button">Cerrar</button>
+      </form>
+    </dialog>
+    <dialog
+      id="reconcile-dialog"><h2>Comparar QMD y Bento</h2><p>La comparación ejecuta el QMD. Elige cómo resolver cada diferencia; las demás seguirán pendientes. Estas decisiones guardan el proyecto. Escribir el QMD requiere después revisar y aplicar la sincronización.</p><p id="reconcile-note" role="status"></p><div id="reconcile-changes"></div><button id="resolve" disabled>Guardar decisiones</button> <button id="resolve-close">Cerrar</button></dialog>
+    <dialog id="component-dialog" aria-labelledby="component-title">
+      <h2 id="component-title">Añadir componente</h2>
+      <p>Crea una tarjeta o un indicador con campos escritos. Se guarda en el proyecto; Revisar cambios permite insertar después su contenido completo en QMD. Puedes editar y diseñar los objetos en Bento.</p>
+      <p>El valor del indicador es texto escrito. Para un valor calculado, escribe su expresión en QMD.</p>
+      <form id="component-form">
+        <p><label for="component-slide">Diapositiva</label> <select id="component-slide" required></select></p>
+        <p><label for="component-kind">Componente</label> <select id="component-kind"><option value="card">Tarjeta</option><option value="kpi">Indicador</option></select></p>
+        <div id="component-fields"></div>
+        <p id="component-note" role="status" aria-live="polite"></p>
+        <button id="component-create" type="submit">Crear componente</button> <button id="component-close" type="button">Cerrar</button>
+      </form>
+      <h3 id="component-pending-title" hidden>Componentes pendientes</h3>
+      <div id="component-pending"></div>
+    </dialog>
+    <dialog id="registry-dialog" aria-labelledby="registry-title">
+      <h2 id="registry-title">Layouts y temas del proyecto</h2>
+      <p>Guardar diseños actualiza el registro del proyecto; no cambia QMD ni ejecuta cálculos. Recalcular aplica los valores seleccionados y conserva tu diseño guardado y los cambios pendientes.</p>
+      <p>Los layouts se usan desde QMD con <code>bento-layout-name</code>. Renombrar o eliminar un layout no actualiza sus referencias en QMD; revísalas antes de recalcular. <code>two-column</code> sigue disponible como layout integrado.</p>
+      <form id="registry-form">
+        <h3>Layouts con nombre</h3><div id="registry-layouts"></div><button id="registry-add-layout" type="button">Añadir layout</button>
+        <h3>Temas con nombre</h3><div id="registry-themes"></div><button id="registry-add-theme" type="button">Añadir tema</button>
+        <p><label for="registry-active">Tema activo</label> <select id="registry-active"></select></p>
+        <p id="registry-note" role="status" aria-live="polite"></p>
+        <button id="registry-save" type="submit">Guardar diseños</button> <button id="registry-reload" type="button">Descartar borrador y recargar registro</button> <button id="registry-close" type="button">Cerrar</button>
+      </form>
+    </dialog>
+    <dialog
+      id="presenter-dialog"><button id="presenter-close">Cerrar presentación</button><iframe id="presenter-frame" title="Presenter con gráficos interactivos"></iframe></dialog>
+    <script>
+    globalThis.qbentoToken = __QBENTO_TOKEN__;
+    </script>
+    <script type="module" src="/client.js"></script>
+  </body>
+</html>

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

@@ -0,0 +1,170 @@
+/** Explicit object-to-column assignments; preview and save use the same core operation. */
+export function attachLayoutEditor(
+  { api, getState, setBusy, showError, saveBefore, reloadEditor },
+) {
+  const $ = (id) => document.getElementById(id);
+  let snapshot, prepared, working = false;
+  function options(select, items) {
+    select.replaceChildren();
+    for (const [value, label] of items) {
+      const option = document.createElement("option");
+      option.value = value;
+      option.textContent = label;
+      select.append(option);
+    }
+  }
+  function controls(value) {
+    working = value;
+    for (
+      const control of $("layouts-dialog").querySelectorAll("button,select")
+    ) control.disabled = value;
+    $("layout-apply").disabled = value || !prepared;
+  }
+  function invalidate() {
+    prepared = undefined;
+    $("layout-preview").hidden = true;
+    $("layout-note").textContent =
+      "Asigna al menos un objeto a cada columna y revisa las posiciones antes de aplicar.";
+    controls(false);
+  }
+  function objects() {
+    const slide = snapshot.slides.find((s) => s.id === $("layout-slide").value);
+    const layout = snapshot.layouts[$("layout-name").value];
+    $("layout-objects").replaceChildren();
+    for (const element of slide?.elements ?? []) {
+      const row = document.createElement("p"),
+        label = document.createElement("label"),
+        select = document.createElement("select");
+      label.textContent =
+        `${element.label} · ${element.type} · #${element.id} `;
+      select.dataset.elementId = element.id;
+      select.setAttribute("aria-label", `Columna para ${element.id}`);
+      options(select, [
+        ["", "Conservar posición"],
+        ...Array.from(
+          { length: layout.columns },
+          (_, index) => [String(index), `Columna ${index + 1}`],
+        ),
+      ]);
+      select.onchange = invalidate;
+      label.append(select);
+      row.append(label);
+      $("layout-objects").append(row);
+    }
+    invalidate();
+  }
+  function request() {
+    const current = getState();
+    if (
+      snapshot.docId !== current?.docId ||
+      snapshot.revision !== current?.revision
+    ) {
+      throw new Error(
+        "El proyecto cambió. Cierra y vuelve a abrir Aplicar diseño.",
+      );
+    }
+    const columns = Array.from({
+      length: snapshot.layouts[$("layout-name").value].columns,
+    }, () => []);
+    for (const select of $("layout-objects").querySelectorAll("select")) {
+      if (select.value !== "") {
+        columns[Number(select.value)].push(select.dataset.elementId);
+      }
+    }
+    return {
+      expectedDocId: snapshot.docId,
+      expectedRevision: snapshot.revision,
+      expectedSourceHash: snapshot.sourceHash,
+      expectedRegistryHash: snapshot.registryHash,
+      slideId: $("layout-slide").value,
+      layout: $("layout-name").value,
+      columns,
+    };
+  }
+  async function open() {
+    if (working || $("layouts-dialog").open) return;
+    controls(true);
+    setBusy(true);
+    $("busy").textContent = "Guardando cambios antes de aplicar un diseño…";
+    try {
+      await saveBefore();
+      snapshot = await api("layouts");
+      if (
+        snapshot.docId !== getState()?.docId ||
+        snapshot.revision !== getState()?.revision
+      ) throw new Error("El proyecto cambió; vuelve a abrir Aplicar diseño.");
+      options(
+        $("layout-slide"),
+        snapshot.slides.map((s) => [s.id, `${s.label} · #${s.id}`]),
+      );
+      options(
+        $("layout-name"),
+        Object.entries(snapshot.layouts).map((
+          [id, layout],
+        ) => [
+          id,
+          `${
+            id === "two-column" ? "Dos columnas" : id
+          } · ${layout.columns} columnas`,
+        ]),
+      );
+      objects();
+      $("layouts-dialog").showModal();
+    } catch (error) {
+      showError(error);
+    } finally {
+      controls(false);
+      setBusy(false);
+    }
+  }
+  $("layouts").onclick = open;
+  $("layout-slide").onchange = objects;
+  $("layout-name").onchange = objects;
+  $("layout-close").onclick = () => $("layouts-dialog").close();
+  $("layouts-dialog").addEventListener("cancel", (event) => {
+    if (working) event.preventDefault();
+  });
+  $("layout-preview-button").onclick = async () => {
+    if (working) return;
+    try {
+      const candidate = request();
+      controls(true);
+      const preview = await api("layouts/preview", candidate);
+      prepared = candidate;
+      $("layout-preview").textContent = preview.placements.map((p) =>
+        `#${p.id}: x=${p.x.toFixed(1)}, y=${p.y.toFixed(1)}, ancho=${
+          p.w.toFixed(1)
+        }, alto=${p.h.toFixed(1)}`
+      ).join("\n");
+      $("layout-preview").hidden = false;
+      $("layout-note").textContent =
+        `Se moverán ${preview.placements.length} objetos. Pendientes después de aplicar: ${preview.pending}. El contenido y los identificadores se conservan.`;
+    } catch (error) {
+      prepared = undefined;
+      $("layout-note").textContent = error.message;
+    } finally {
+      controls(false);
+    }
+  };
+  $("layouts-form").onsubmit = async (event) => {
+    event.preventDefault();
+    if (working || !prepared) return;
+    try {
+      request();
+      controls(true);
+      setBusy(true);
+      $("busy").textContent =
+        "Aplicando el diseño a los objetos seleccionados…";
+      await api("layouts/apply", prepared);
+      $("layouts-dialog").close();
+      prepared = undefined;
+      controls(false);
+      reloadEditor();
+    } catch (error) {
+      $("layout-note").textContent = error.message;
+      controls(false);
+      setBusy(false);
+    }
+  };
+  return { open };
+}