wordinweb 0.2.0 → 0.2.2

package/dist/{chunk-XGTWJMDG.js → chunk-JGXXZTQE.js}

@@ -20533,8 +20533,14 @@ function setPageLayout(doc, patch, target) {
       return key ? elm.attrs[key] : void 0;
     };
     if (patch.size) {
-      setAttr(pgSz, "w", String(Math.round(patch.size.width * TWIPS_PER_INCH)));
-      setAttr(pgSz, "h", String(Math.round(patch.size.height * TWIPS_PER_INCH)));
+      let width = Math.round(patch.size.width * TWIPS_PER_INCH);
+      let height = Math.round(patch.size.height * TWIPS_PER_INCH);
+      const currentWidth = parseInt(getAttr(pgSz, "w") ?? "12240", 10);
+      const currentHeight = parseInt(getAttr(pgSz, "h") ?? "15840", 10);
+      const isLandscape = getAttr(pgSz, "orient") === "landscape" || currentWidth > currentHeight;
+      if (isLandscape !== width > height) [width, height] = [height, width];
+      setAttr(pgSz, "w", String(width));
+      setAttr(pgSz, "h", String(height));
     }
     if (patch.orientation) {
       const cw = parseInt(getAttr(pgSz, "w") ?? "12240", 10);
@@ -34206,6 +34212,7 @@ function WordArtMenu({ api }) {
 }
 function ChartMenu({ api, label = "Chart" }) {
   const [open, setOpen] = useState2(false);
+  const [editing, setEditing] = useState2(false);
   const [type, setType] = useState2("column");
   const [title, setTitle] = useState2("");
   const [categories, setCategories] = useState2(["", ""]);
@@ -34222,16 +34229,35 @@ function ChartMenu({ api, label = "Chart" }) {
   }, [open]);
   const submit = () => {
     const categoryValues = categories.map((value) => value.trim());
-    const rawSeries = series.map((entry) => ({
+    const rawSeries = (type === "pie" ? series.slice(0, 1) : series).map((entry) => ({
       name: entry.name.trim(),
       values: entry.values.map((value) => value.trim())
     }));
-    if (categoryValues.some((value) => !value) || rawSeries.some((entry) => !entry.name || entry.values.some((value) => value === "" || !Number.isFinite(Number(value))))) {
-      setError("Give every category and series a name, and enter a number in every data cell.");
+    if (categoryValues.some((value) => !value)) {
+      setError(type === "pie" ? "Enter a label for every slice." : "Enter a name for every category.");
+      return;
+    }
+    if (type !== "pie" && rawSeries.some((entry) => !entry.name)) {
+      setError("Enter a name for every series.");
+      return;
+    }
+    if (rawSeries.some((entry) => entry.values.some((value) => value === "" || !Number.isFinite(Number(value))))) {
+      setError("Enter a number in every value field.");
+      return;
+    }
+    if (type === "pie" && rawSeries.some((entry) => entry.values.some((value) => Number(value) < 0))) {
+      setError("Pie chart values must be zero or greater.");
+      return;
+    }
+    if (type === "pie" && rawSeries.every((entry) => entry.values.every((value) => Number(value) === 0))) {
+      setError("Enter at least one pie chart value greater than zero.");
       return;
     }
-    const seriesValues = rawSeries.map((entry) => ({ name: entry.name, values: entry.values.map(Number) }));
-    const data = { type, title, categories: categoryValues, series: seriesValues };
+    const seriesValues = rawSeries.map((entry) => ({
+      name: type === "pie" ? entry.name || "Values" : entry.name,
+      values: entry.values.map(Number)
+    }));
+    const data = { type, title: title.trim(), categories: categoryValues, series: seriesValues };
     if (api?.updateSelectedChart(data) || api?.insertChart(data)) {
       setError("");
       setOpen(false);
@@ -34246,97 +34272,187 @@ function ChartMenu({ api, label = "Chart" }) {
     setCategories(categories.filter((_, itemIndex) => itemIndex !== index));
     setSeries(series.map((entry) => ({ ...entry, values: entry.values.filter((_, itemIndex) => itemIndex !== index) })));
   };
+  const changeType = (next) => {
+    setType(next);
+    if (next === "pie") {
+      setSeries((current) => [
+        current[0] ?? { name: "Values", values: categories.map(() => "") }
+      ]);
+    }
+    setError("");
+  };
   const anchor = open ? rootRef.current?.getBoundingClientRect() : null;
   const viewportWidth = typeof window === "undefined" ? 456 : window.innerWidth;
   const popoverWidth = Math.min(440, viewportWidth - 16);
   const popoverLeft = Math.max(8, Math.min(anchor?.left ?? 8, viewportWidth - popoverWidth - 8));
   const fieldStyle = { width: "100%", boxSizing: "border-box", border: `1px solid ${T.border}`, borderRadius: 6, padding: "6px 8px", font: "13px system-ui, sans-serif", color: T.fg, background: T.popoverBg };
+  const fieldLabelStyle = { display: "grid", gap: 3, color: T.muted, font: "11px system-ui, sans-serif" };
+  const tableHeaderStyle = { padding: "0 3px 4px", textAlign: "left", verticalAlign: "bottom", color: T.muted, font: "600 11px system-ui, sans-serif" };
+  const tableCellStyle = { padding: 3, verticalAlign: "bottom" };
   const toggle = () => {
     if (open) {
       setOpen(false);
       return;
     }
     const selected = api?.getSelectedChart();
+    const nextCategories = selected?.categories.length ? [...selected.categories] : ["", ""];
+    const nextSeries = selected?.series.length ? selected.series.map((entry) => ({
+      name: entry.name,
+      values: nextCategories.map((_, index) => String(entry.values[index] ?? ""))
+    })) : [{ name: "", values: nextCategories.map(() => "") }];
+    setEditing(!!selected);
     setType(selected?.type ?? "column");
     setTitle(selected?.title ?? "");
-    setCategories(selected ? [...selected.categories] : ["", ""]);
-    setSeries(selected ? selected.series.map((entry) => ({ name: entry.name, values: entry.values.map(String) })) : [{ name: "", values: ["", ""] }]);
+    setCategories(nextCategories);
+    setSeries(selected?.type === "pie" ? nextSeries.slice(0, 1) : nextSeries);
     setError("");
     setOpen(true);
   };
+  const chartTypes = [
+    { value: "column", label: "Column" },
+    { value: "bar", label: "Bar" },
+    { value: "line", label: "Line" },
+    { value: "pie", label: "Pie" }
+  ];
   return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
     /* @__PURE__ */ jsx2("button", { title: "Insert or edit chart", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: toggle, children: label }),
     open && /* @__PURE__ */ jsxs2("div", { style: { position: "fixed", top: anchor?.bottom ?? 28, left: popoverLeft, zIndex: 100, width: popoverWidth, maxHeight: "calc(100vh - 48px)", overflow: "auto", boxSizing: "border-box", padding: 10, display: "grid", gap: 8, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
-      /* @__PURE__ */ jsx2(
-        ToolbarMenuSelect,
-        {
-          value: type,
-          ariaLabel: "Chart type",
-          width: "100%",
-          menuWidth: 300,
-          options: [
-            { value: "column", label: "Column" },
-            { value: "bar", label: "Bar" },
-            { value: "line", label: "Line" },
-            { value: "pie", label: "Pie" }
-          ],
-          onChange: (value) => setType(value),
-          style: fieldStyle
-        }
-      ),
-      /* @__PURE__ */ jsx2("input", { "aria-label": "Chart title", value: title, onChange: (event) => setTitle(event.target.value), placeholder: "Chart title", style: fieldStyle }),
+      /* @__PURE__ */ jsx2("strong", { style: { color: T.fg, font: "600 13px system-ui, sans-serif" }, children: editing ? "Edit chart" : "Insert chart" }),
+      /* @__PURE__ */ jsxs2("fieldset", { style: { minWidth: 0, margin: 0, padding: 0, border: 0 }, children: [
+        /* @__PURE__ */ jsx2("legend", { style: { marginBottom: 4, color: T.muted, font: "11px system-ui, sans-serif" }, children: "Chart type" }),
+        /* @__PURE__ */ jsx2("div", { role: "radiogroup", "aria-label": "Chart type", style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 5 }, children: chartTypes.map((chartType) => {
+          const selected = chartType.value === type;
+          return /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": selected,
+              onClick: () => changeType(chartType.value),
+              style: {
+                minHeight: 34,
+                border: `1px solid ${selected ? T.accent : T.border}`,
+                borderRadius: 6,
+                background: selected ? T.tabActiveBg : T.popoverBg,
+                color: selected ? T.accent : T.fg,
+                cursor: "pointer",
+                font: "600 12px system-ui, sans-serif"
+              },
+              children: chartType.label
+            },
+            chartType.value
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { style: fieldLabelStyle, children: [
+        /* @__PURE__ */ jsx2("span", { children: "Chart title (optional)" }),
+        /* @__PURE__ */ jsx2("input", { "aria-label": "Chart title", value: title, onChange: (event) => setTitle(event.target.value), style: fieldStyle })
+      ] }),
       /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": "Chart data", style: { display: "grid", gap: 7 }, children: [
-        /* @__PURE__ */ jsx2("strong", { style: { color: T.fg, font: "600 11.5px system-ui, sans-serif" }, children: "Data" }),
-        /* @__PURE__ */ jsx2("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: `minmax(110px,1.2fr) repeat(${categories.length},minmax(72px,1fr)) 62px`, gap: 5, minWidth: categories.length > 3 ? 430 : void 0 }, children: [
-          /* @__PURE__ */ jsx2("span", { style: { alignSelf: "center", color: T.muted, font: "11px system-ui, sans-serif" }, children: "Series" }),
-          categories.map((category, index) => /* @__PURE__ */ jsxs2("label", { style: { display: "grid", gridTemplateColumns: "1fr auto", gap: 3 }, children: [
-            /* @__PURE__ */ jsx2(
-              "input",
-              {
-                "aria-label": `Chart category ${index + 1}`,
-                value: category,
-                placeholder: "Category",
-                onChange: (event) => setCategories(categories.map((value, itemIndex) => itemIndex === index ? event.target.value : value)),
-                style: fieldStyle
-              }
-            ),
-            categories.length > 1 && /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `Remove chart category ${index + 1}`, onClick: () => removeCategory(index), style: { ...pillBtn, padding: "0 6px" }, children: "\xD7" })
-          ] }, index)),
-          /* @__PURE__ */ jsx2("span", {}),
-          series.map((entry, seriesIndex) => /* @__PURE__ */ jsxs2(Fragment, { children: [
-            /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx2("strong", { style: { color: T.fg, font: "600 11.5px system-ui, sans-serif" }, children: type === "pie" ? "Slices" : "Chart data" }),
+        /* @__PURE__ */ jsx2("div", { style: { overflowX: "auto" }, children: type === "pie" ? /* @__PURE__ */ jsxs2("table", { "aria-label": "Pie chart data", style: { width: "100%", borderCollapse: "collapse" }, children: [
+          /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+            /* @__PURE__ */ jsx2("th", { scope: "col", style: tableHeaderStyle, children: "Slice label" }),
+            /* @__PURE__ */ jsx2("th", { scope: "col", style: tableHeaderStyle, children: "Value" }),
+            /* @__PURE__ */ jsx2("th", { scope: "col", "aria-label": "Actions" })
+          ] }) }),
+          /* @__PURE__ */ jsx2("tbody", { children: categories.map((category, index) => /* @__PURE__ */ jsxs2("tr", { children: [
+            /* @__PURE__ */ jsx2("th", { scope: "row", style: { ...tableCellStyle, width: "52%", fontWeight: 400 }, children: /* @__PURE__ */ jsxs2("label", { style: fieldLabelStyle, children: [
+              /* @__PURE__ */ jsxs2("span", { children: [
+                "Slice ",
+                index + 1
+              ] }),
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  "aria-label": `Chart slice ${index + 1} label`,
+                  value: category,
+                  onChange: (event) => setCategories(categories.map((value, itemIndex) => itemIndex === index ? event.target.value : value)),
+                  style: fieldStyle
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx2("td", { style: tableCellStyle, children: /* @__PURE__ */ jsx2(
               "input",
               {
-                "aria-label": `Chart series ${seriesIndex + 1} name`,
-                value: entry.name,
-                placeholder: "Series",
-                onChange: (event) => setSeries(series.map((value, itemIndex) => itemIndex === seriesIndex ? { ...value, name: event.target.value } : value)),
+                "aria-label": `Chart slice ${index + 1} value`,
+                type: "number",
+                min: "0",
+                step: "any",
+                value: series[0]?.values[index] ?? "",
+                onChange: (event) => setSeries([{
+                  ...series[0] ?? { name: "Values", values: categories.map(() => "") },
+                  values: categories.map((_, itemIndex) => itemIndex === index ? event.target.value : series[0]?.values[itemIndex] ?? "")
+                }]),
                 style: fieldStyle
               }
-            ),
-            entry.values.map((value, valueIndex) => /* @__PURE__ */ jsx2(
+            ) }),
+            /* @__PURE__ */ jsx2("td", { style: tableCellStyle, children: categories.length > 1 && /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `Remove chart slice ${index + 1}`, onClick: () => removeCategory(index), style: { ...pillBtn, padding: "0 7px" }, children: "Remove" }) })
+          ] }, index)) })
+        ] }) : /* @__PURE__ */ jsxs2("table", { "aria-label": `${type} chart data`, style: { minWidth: series.length > 2 ? 430 : void 0, width: "100%", borderCollapse: "collapse" }, children: [
+          /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+            /* @__PURE__ */ jsx2("th", { scope: "col", style: tableHeaderStyle, children: "Category" }),
+            series.map((entry, seriesIndex) => /* @__PURE__ */ jsxs2("th", { scope: "col", style: tableHeaderStyle, children: [
+              /* @__PURE__ */ jsxs2("label", { style: fieldLabelStyle, children: [
+                /* @__PURE__ */ jsxs2("span", { children: [
+                  "Series ",
+                  seriesIndex + 1,
+                  " name"
+                ] }),
+                /* @__PURE__ */ jsx2(
+                  "input",
+                  {
+                    "aria-label": `Chart series ${seriesIndex + 1} name`,
+                    value: entry.name,
+                    onChange: (event) => setSeries(series.map((value, itemIndex) => itemIndex === seriesIndex ? { ...value, name: event.target.value } : value)),
+                    style: fieldStyle
+                  }
+                )
+              ] }),
+              series.length > 1 && /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `Remove chart series ${seriesIndex + 1}`, onClick: () => setSeries(series.filter((_, itemIndex) => itemIndex !== seriesIndex)), style: { ...pillBtn, marginTop: 3, padding: "0 7px" }, children: "Remove" })
+            ] }, seriesIndex)),
+            /* @__PURE__ */ jsx2("th", { scope: "col", "aria-label": "Actions" })
+          ] }) }),
+          /* @__PURE__ */ jsx2("tbody", { children: categories.map((category, categoryIndex) => /* @__PURE__ */ jsxs2("tr", { children: [
+            /* @__PURE__ */ jsx2("th", { scope: "row", style: { ...tableCellStyle, minWidth: 120, fontWeight: 400 }, children: /* @__PURE__ */ jsxs2("label", { style: fieldLabelStyle, children: [
+              /* @__PURE__ */ jsxs2("span", { children: [
+                "Category ",
+                categoryIndex + 1
+              ] }),
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  "aria-label": `Chart category ${categoryIndex + 1}`,
+                  value: category,
+                  onChange: (event) => setCategories(categories.map((value, itemIndex) => itemIndex === categoryIndex ? event.target.value : value)),
+                  style: fieldStyle
+                }
+              )
+            ] }) }),
+            series.map((entry, seriesIndex) => /* @__PURE__ */ jsx2("td", { style: { ...tableCellStyle, minWidth: 82 }, children: /* @__PURE__ */ jsx2(
               "input",
               {
-                "aria-label": `Chart series ${seriesIndex + 1} value ${valueIndex + 1}`,
+                "aria-label": `Chart series ${seriesIndex + 1} value ${categoryIndex + 1}`,
                 type: "number",
                 step: "any",
-                value,
-                placeholder: "0",
-                onChange: (event) => setSeries(series.map((seriesValue, itemIndex) => itemIndex === seriesIndex ? { ...seriesValue, values: seriesValue.values.map((itemValue, itemValueIndex) => itemValueIndex === valueIndex ? event.target.value : itemValue) } : seriesValue)),
+                value: entry.values[categoryIndex] ?? "",
+                onChange: (event) => setSeries(series.map((seriesValue, itemIndex) => itemIndex === seriesIndex ? {
+                  ...seriesValue,
+                  values: categories.map((_, itemValueIndex) => itemValueIndex === categoryIndex ? event.target.value : seriesValue.values[itemValueIndex] ?? "")
+                } : seriesValue)),
                 style: fieldStyle
-              },
-              valueIndex
-            )),
-            /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `Remove chart series ${seriesIndex + 1}`, disabled: series.length === 1, onClick: () => setSeries(series.filter((_, itemIndex) => itemIndex !== seriesIndex)), style: { ...pillBtn, padding: "0 7px" }, children: "Remove" })
-          ] }, seriesIndex))
+              }
+            ) }, seriesIndex)),
+            /* @__PURE__ */ jsx2("td", { style: tableCellStyle, children: categories.length > 1 && /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `Remove chart category ${categoryIndex + 1}`, onClick: () => removeCategory(categoryIndex), style: { ...pillBtn, padding: "0 7px" }, children: "Remove" }) })
+          ] }, categoryIndex)) })
         ] }) }),
         /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 6 }, children: [
-          /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => setSeries([...series, { name: "", values: categories.map(() => "") }]), style: { ...pillBtn, background: T.popoverBg, color: T.fg }, children: "Add series" }),
-          /* @__PURE__ */ jsx2("button", { type: "button", onClick: addCategory, style: { ...pillBtn, background: T.popoverBg, color: T.fg }, children: "Add category" })
+          type !== "pie" && /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => setSeries([...series, { name: "", values: categories.map(() => "") }]), style: { ...pillBtn, background: T.popoverBg, color: T.fg }, children: "Add series" }),
+          /* @__PURE__ */ jsx2("button", { type: "button", onClick: addCategory, style: { ...pillBtn, background: T.popoverBg, color: T.fg }, children: type === "pie" ? "Add slice" : "Add category" })
         ] })
       ] }),
       error && /* @__PURE__ */ jsx2("div", { role: "alert", style: { color: "#c5221f", font: "11.5px system-ui, sans-serif" }, children: error }),
-      /* @__PURE__ */ jsx2("button", { onClick: submit, style: { border: 0, borderRadius: 6, padding: "7px 10px", background: T.accent, color: T.accentFg, cursor: "pointer", font: "600 12px system-ui, sans-serif" }, children: "Insert or update chart" })
+      /* @__PURE__ */ jsx2("button", { onClick: submit, style: { border: 0, borderRadius: 6, padding: "7px 10px", background: T.accent, color: T.accentFg, cursor: "pointer", font: "600 12px system-ui, sans-serif" }, children: editing ? "Update chart" : "Insert chart" })
     ] })
   ] });
 }
@@ -38205,4 +38321,4 @@ export {
 cfb/cfb.js:
   (*! crc32.js (C) 2014-present SheetJS -- http://sheetjs.com *)
 */
-//# sourceMappingURL=chunk-XGTWJMDG.js.map
+//# sourceMappingURL=chunk-JGXXZTQE.js.map