pagiera 0.2.0-alpha.46 → 0.2.0-alpha.47

package/dist/full-editor.js

@@ -4980,7 +4980,7 @@ function stylesheetFor(elements, rootStyle) {
     // element selector and leak the editor's typeface into the site.
     // The shell spans the viewport; the content width is applied by each
     // band's inner box, so section backgrounds reach both edges.
-    `.pg-root{font-family:${resolveFont(rootStyle.fontFamily)}}.pg-node{box-sizing:border-box}.pg-node:is(input,textarea,button){font:inherit}.pg-node:is(input,textarea){outline:none}.pg-node:is(select){outline:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27%23888%27 stroke-width=%271.6%27><path d=%27M4 6.5 8 10.5 12 6.5%27/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}.pg-node[role=radiogroup]{display:flex;flex-direction:column;gap:8px}.pg-choice{display:flex;align-items:center;gap:8px;cursor:pointer}.pg-choice input{accent-color:currentColor;margin:0}.pg-node:is(input[type=checkbox],input[type=radio]){accent-color:currentColor}.pg-node:is(textarea){resize:none}.pg-form-status:empty{display:none}.pg-form-status{font-size:12px;line-height:1.4}.pg-node[data-pg-state=success] .pg-form-status{color:#22c55e}.pg-node[data-pg-state=error] .pg-form-status{color:#ef4444}.pg-node img{display:block;width:100%;height:100%}.pg-node:is(ul,ol){list-style:none}.pg-list{counter-reset:pg-list}.pg-list>li{position:relative}.pg-list-bullet>li::before{content:'\\2022';position:absolute;left:-1em;opacity:.65}.pg-list-number>li::before{counter-increment:pg-list;content:counter(pg-list) '.';position:absolute;left:-1.6em;opacity:.65;font-variant-numeric:tabular-nums}.pg-node hr{border:0;width:100%;height:100%}.pg-node iframe{display:block;width:100%;height:100%;border:0}.pg-svg-glyph>svg{display:block;width:100%;height:100%}.pg-link{text-decoration:none;color:inherit}`
+    `.pg-root{font-family:${resolveFont(rootStyle.fontFamily)}}.pg-node{box-sizing:border-box}.pg-node:is(input,textarea,button){font:inherit}.pg-node:where(button){appearance:none;background-color:transparent;border-width:0;color:inherit;text-align:inherit}.pg-node:is(input,textarea){outline:none}.pg-node:is(select){outline:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27%23888%27 stroke-width=%271.6%27><path d=%27M4 6.5 8 10.5 12 6.5%27/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}.pg-node[role=radiogroup]{display:flex;flex-direction:column;gap:8px}.pg-choice{display:flex;align-items:center;gap:8px;cursor:pointer}.pg-choice input{accent-color:currentColor;margin:0}.pg-node:is(input[type=checkbox],input[type=radio]){accent-color:currentColor}.pg-node:is(textarea){resize:none}.pg-form-status:empty{display:none}.pg-form-status{font-size:12px;line-height:1.4}.pg-node[data-pg-state=success] .pg-form-status{color:#22c55e}.pg-node[data-pg-state=error] .pg-form-status{color:#ef4444}.pg-node img{display:block;width:100%;height:100%}.pg-node:is(ul,ol){list-style:none}.pg-list{counter-reset:pg-list}.pg-list>li{position:relative}.pg-list-bullet>li::before{content:'\\2022';position:absolute;left:-1em;opacity:.65}.pg-list-number>li::before{counter-increment:pg-list;content:counter(pg-list) '.';position:absolute;left:-1.6em;opacity:.65;font-variant-numeric:tabular-nums}.pg-node hr{border:0;width:100%;height:100%}.pg-node iframe{display:block;width:100%;height:100%;border:0}.pg-svg-glyph>svg{display:block;width:100%;height:100%}.pg-link{text-decoration:none;color:inherit}`
   );
   for (const element of elements) {
     const emitted = rulesFor(element, byId, baseId, rootStyle, cascade).map(([suffix, decl]) => `.${classFor(element.id)}${suffix}{${decl}}`).join("");
@@ -9908,7 +9908,20 @@ function RenderedNode({
     );
   }
   const tag = customTagOf(element) ?? semanticTag(element);
+  const animates = style.entrance !== "none";
   return React2.createElement(tag, withCustom(element, {
+    /**
+     * The entrance script runs while the document is still parsing, which
+     * is before React hydrates, and it reveals whatever is already on
+     * screen by adding `pg-in` to the element's class list. React then
+     * finds a `class` it did not write and reports a hydration mismatch on
+     * every visible animated node.
+     *
+     * The difference is intentional and client-only, so it is declared as
+     * such. Only animated elements are excused: a mismatch anywhere else is
+     * a real bug and must keep surfacing.
+     */
+    suppressHydrationWarning: animates || void 0,
     id: classFor(element.id),
     htmlFor: tag === "label" && element.labelFor ? classFor(element.labelFor) : void 0,
     type: tag === "button" ? element.buttonType ?? "button" : void 0,
@@ -12280,7 +12293,12 @@ function AiPanel({
               id: event.id,
               label: event.label,
               status: event.status === "start" ? "running" : event.status,
-              facts: event.status === "start" ? turn.sections[at]?.facts : event.facts
+              // A second "start" for the same section is a retry,
+              // and it carries the reason the last attempt was
+              // discarded. Facts sent with a start are therefore
+              // kept; only a start with nothing to say leaves the
+              // section's existing facts alone.
+              facts: event.facts ?? (event.status === "start" ? turn.sections[at]?.facts : void 0)
             };
             const sections = at >= 0 ? turn.sections.slice() : [...turn.sections, next];
             if (at >= 0) sections[at] = next;
@@ -13800,7 +13818,7 @@ function Editor({
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null;
   const selectedElement = selectedId ? byId.get(selectedId) : void 0;
   const deviceWidth = frameWidthForBreakpoint;
-  const frameWidth = rootStyle.fullWidth ? deviceWidth : Math.min(deviceWidth, rootStyle.maxWidth);
+  const frameWidth = rootStyle.layout === "absolute" && !rootStyle.fullWidth ? Math.min(deviceWidth, rootStyle.maxWidth) : deviceWidth;
   useEffect12(() => setCanvasHeight(rootStyle.canvasHeight), [rootStyle.canvasHeight]);
   useEffect12(() => {
     if (!componentMode || !activeComponentMaster) return;