ooxml-ui 1.24.0 → 1.26.0

package/dist/chunk-P4FRKIPE.js

@@ -0,0 +1,953 @@
+import { parseSvgPreview } from './chunk-FN7IF6M6.js';
+import { OfficeElement, controlStyles, definer } from './chunk-QLHCGV4C.js';
+import { html, nothing } from 'lit';
+import { hexToRgbChannels } from 'ooxml-core/color';
+import { resolveDrawingColor, DIAGRAM_COLOR_SECTIONS, DIAGRAM_COLOR_ENTRIES, DIAGRAM_STYLE_ENTRIES, diagramDesignEdit, diagramNodeOutline } from 'ooxml-core/diagram';
+
+var SVG_NS = "http://www.w3.org/2000/svg";
+var EMU_PER_PX = 9525;
+function colorToCss(color, scheme, report) {
+  if (!color) return void 0;
+  const resolved = resolveDrawingColor(color, { scheme: (name) => scheme[name] });
+  const unapplied = resolved?.unapplied ?? color.transforms.map((transform) => transform.name);
+  if (report && unapplied.length)
+    report.unappliedColorTransforms = [
+      .../* @__PURE__ */ new Set([...report.unappliedColorTransforms ?? [], ...unapplied])
+    ];
+  if (resolved) {
+    if (resolved.alpha === 1) return resolved.hex;
+    const rgb = hexToRgbChannels(resolved.hex);
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${resolved.alpha})`;
+  }
+  if (color.kind === "preset")
+    return /^[a-z]+$/i.test(color.value) ? color.value.toLowerCase() : "#808080";
+  if (color.kind === "system" && !color.fallback) return void 0;
+  return "#9ca3af";
+}
+function fillToCss(fill, scheme, report) {
+  if (!fill) return "none";
+  if (fill.kind === "none") return "none";
+  if (fill.kind === "solid") return colorToCss(fill.color, scheme, report) ?? "none";
+  if (!report.approximatedFills.includes(fill.kind)) report.approximatedFills.push(fill.kind);
+  if (fill.kind === "gradient") return colorToCss(fill.stops[0]?.color, scheme, report) ?? "none";
+  return "#d1d5db";
+}
+function pathData(path, widthPx, heightPx) {
+  const sx = path.width ? widthPx / path.width : 1;
+  const sy = path.height ? heightPx / path.height : 1;
+  const x = (v) => +(v * sx).toFixed(2);
+  const y = (v) => +(v * sy).toFixed(2);
+  const out = [];
+  for (const c of path.commands) {
+    if (c.op === "M" || c.op === "L") out.push(`${c.op}${x(c.x)} ${y(c.y)}`);
+    else if (c.op === "C")
+      out.push(`C${x(c.x1)} ${y(c.y1)} ${x(c.x2)} ${y(c.y2)} ${x(c.x)} ${y(c.y)}`);
+    else if (c.op === "Q") out.push(`Q${x(c.x1)} ${y(c.y1)} ${x(c.x)} ${y(c.y)}`);
+    else if (c.op === "Z") out.push("Z");
+  }
+  return out.join("");
+}
+var hasArc = (shape) => Boolean(shape.paths?.some((p) => p.commands.some((c) => c.op === "A")));
+function shapeElement(doc, shape, report) {
+  const { frame } = shape;
+  const w = frame.width / EMU_PER_PX;
+  const h = frame.height / EMU_PER_PX;
+  if (shape.paths?.length) {
+    const el = doc.createElementNS(SVG_NS, "g");
+    for (const path of shape.paths) {
+      const p = doc.createElementNS(SVG_NS, "path");
+      p.setAttribute("d", pathData(path, w, h));
+      el.append(p);
+    }
+    if (hasArc(shape) && !report.approximatedGeometries.includes("custom:arc")) {
+      report.approximatedGeometries.push("custom:arc");
+    }
+    return el;
+  }
+  if (shape.geometry === "ellipse") {
+    const e = doc.createElementNS(SVG_NS, "ellipse");
+    e.setAttribute("rx", String(w / 2));
+    e.setAttribute("ry", String(h / 2));
+    e.setAttribute("cx", String(w / 2));
+    e.setAttribute("cy", String(h / 2));
+    return e;
+  }
+  const rect2 = doc.createElementNS(SVG_NS, "rect");
+  rect2.setAttribute("width", String(w));
+  rect2.setAttribute("height", String(h));
+  if (shape.geometry === "roundRect") {
+    const adj = (shape.adjustments?.adj ?? 16667) / 1e5;
+    rect2.setAttribute("rx", String(Math.min(w, h) * adj));
+  } else if (shape.geometry !== "rect" && !report.approximatedGeometries.includes(shape.geometry)) {
+    report.approximatedGeometries.push(shape.geometry);
+    rect2.setAttribute("data-approximated", shape.geometry);
+  }
+  return rect2;
+}
+function renderDiagramDrawing(doc, drawing, scheme = {}, fonts = {}) {
+  const report = {
+    shapeCount: drawing.shapes.length,
+    approximatedGeometries: [],
+    flattened3d: 0,
+    approximatedFills: []
+  };
+  const svg = doc.createElementNS(SVG_NS, "svg");
+  let right = 0;
+  let bottom = 0;
+  for (const shape of drawing.shapes) {
+    const { frame } = shape;
+    right = Math.max(right, (frame.x + frame.width) / EMU_PER_PX);
+    bottom = Math.max(bottom, (frame.y + frame.height) / EMU_PER_PX);
+    const group = doc.createElementNS(SVG_NS, "g");
+    group.dataset.modelId = shape.modelId;
+    const cx = frame.width / EMU_PER_PX / 2;
+    const cy = frame.height / EMU_PER_PX / 2;
+    const fx = shape.flipHorizontal ? -1 : 1;
+    const fy = shape.flipVertical ? -1 : 1;
+    const transform = [`translate(${frame.x / EMU_PER_PX} ${frame.y / EMU_PER_PX})`];
+    if (shape.rotation) transform.push(`rotate(${shape.rotation} ${cx} ${cy})`);
+    if (fx !== 1 || fy !== 1) {
+      transform.push(`translate(${cx} ${cy}) scale(${fx} ${fy}) translate(${-cx} ${-cy})`);
+    }
+    group.setAttribute("transform", transform.join(" "));
+    const body = shapeElement(doc, shape, report);
+    body.setAttribute("fill", fillToCss(shape.fill, scheme, report));
+    const stroke = shape.line?.fill?.kind === "solid" ? colorToCss(shape.line.fill.color, scheme, report) : void 0;
+    body.setAttribute("stroke", stroke ?? "none");
+    if (stroke)
+      body.setAttribute(
+        "stroke-width",
+        String(Math.max(0.5, (shape.line?.widthEmu ?? 9525) / EMU_PER_PX))
+      );
+    group.append(body);
+    if (shape.has3d) {
+      report.flattened3d += 1;
+      group.setAttribute("data-flattened-3d", "");
+    }
+    if (shape.text?.text) group.append(textElement(doc, shape, scheme, fonts, report));
+    svg.append(group);
+  }
+  svg.setAttribute("viewBox", `0 0 ${Math.max(right, 1)} ${Math.max(bottom, 1)}`);
+  return { svg, report };
+}
+function textElement(doc, shape, scheme, fonts, report) {
+  const frame = shape.textFrame ?? {
+    x: shape.frame.x,
+    y: shape.frame.y,
+    width: shape.frame.width,
+    height: shape.frame.height
+  };
+  const ox = (frame.x - shape.frame.x) / EMU_PER_PX;
+  const oy = (frame.y - shape.frame.y) / EMU_PER_PX;
+  const w = frame.width / EMU_PER_PX;
+  const h = frame.height / EMU_PER_PX;
+  const text = doc.createElementNS(SVG_NS, "text");
+  const first = shape.text?.paragraphs[0]?.runs[0];
+  const sizePx = (first?.sizePt ?? 12) * 96 / 72;
+  text.setAttribute("x", String(ox + w / 2));
+  text.setAttribute("y", String(oy + h / 2));
+  text.setAttribute("text-anchor", "middle");
+  text.setAttribute("dominant-baseline", "central");
+  text.setAttribute("font-size", String(sizePx));
+  text.setAttribute(
+    "fill",
+    colorToCss(first?.color ?? shape.style?.font?.color, scheme, report) ?? "currentColor"
+  );
+  if (first?.bold) text.setAttribute("font-weight", "700");
+  if (first?.italic) text.setAttribute("font-style", "italic");
+  const ref = shape.style?.font?.fontIndex;
+  const inherited = ref === "major" ? fonts.major : ref === "minor" ? fonts.minor : void 0;
+  const typeface = first?.typeface;
+  const font = typeface === "+mj-lt" ? fonts.major : typeface === "+mn-lt" ? fonts.minor : typeface ?? inherited;
+  if (font) text.setAttribute("font-family", font);
+  text.textContent = shape.text?.paragraphs.map((p) => p.runs.map((r) => r.text).join("")).join(" ") ?? "";
+  return text;
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/smartart/smartart.css?raw
+var smartart_default = ":host {\n	display: block;\n}\nsvg {\n	display: block;\n	width: 100%;\n	height: auto;\n	max-height: 100%;\n}\ntext {\n	pointer-events: none;\n}\ntext:not([font-family]) {\n	font-family: var(--office-font);\n}\n.empty {\n	padding: var(--office-space-2);\n	font-size: var(--office-font-size-sm);\n	color: var(--office-muted-foreground);\n}\n@media (forced-colors: active) {\n	text {\n		fill: CanvasText;\n	}\n}\n";
+
+// src/smartart/smartart.ts
+var OfficeUiSmartArt = class extends OfficeElement {
+  static styles = controlStyles(smartart_default);
+  static properties = {
+    drawing: { attribute: false },
+    schemeColors: { attribute: false },
+    schemeFonts: { attribute: false },
+    label: { type: String }
+  };
+  figure;
+  lastReport;
+  constructor() {
+    super();
+    this.drawing = void 0;
+    this.schemeColors = {};
+    this.schemeFonts = {};
+    this.label = null;
+  }
+  /** The report of the last render (undefined while empty). */
+  get report() {
+    return this.lastReport;
+  }
+  /** The SVG is rebuilt only when the drawing or the scheme colours change. */
+  willUpdate(changed) {
+    if (changed.has("drawing") || changed.has("schemeColors") || changed.has("schemeFonts")) {
+      if (!this.drawing || this.drawing.shapes.length === 0) {
+        this.figure = void 0;
+        this.lastReport = void 0;
+      } else {
+        const { svg, report } = renderDiagramDrawing(
+          this.ownerDocument,
+          this.drawing,
+          this.schemeColors,
+          this.schemeFonts
+        );
+        svg.setAttribute("role", "img");
+        this.figure = svg;
+        this.lastReport = report;
+      }
+    }
+    this.figure?.setAttribute("aria-label", this.label ?? "Diagram");
+  }
+  updated(changed) {
+    if (this.lastReport && (changed.has("drawing") || changed.has("schemeColors") || changed.has("schemeFonts")))
+      this.fire("office-smartart-render", this.lastReport);
+  }
+  render() {
+    if (this.figure) return this.figure;
+    return html`<div class="empty"
+			>${this.drawing ? "This diagram has no cached drawing to show." : ""}</div
+		>`;
+  }
+};
+var defineSmartArt = definer("office-ui-smartart", () => OfficeUiSmartArt);
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/smartart/smartart-picker.css?raw
+var smartart_picker_default = ":host {\n	display: grid;\n	grid-template-columns: minmax(\n			calc(var(--office-space-6) * 5),\n			calc(var(--office-space-4) * 10)\n		) minmax(0, 1fr) minmax(calc(var(--office-space-4) * 10), calc(var(--office-space-5) * 11));\n	gap: var(--office-space-3);\n	min-height: calc(var(--office-space-5) * 14);\n	font-family: var(--office-font);\n	font-size: var(--office-font-size);\n	color: var(--office-foreground);\n}\n[hidden] {\n	display: none !important;\n}\n.categories {\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-1);\n	padding-right: var(--office-space-2);\n	border-right: var(--office-border-width) solid var(--office-border);\n}\n.category {\n	min-height: var(--office-control-height-md);\n	padding: var(--office-space-1) var(--office-space-2);\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	text-align: left;\n	cursor: pointer;\n}\n.category:hover {\n	background: var(--office-surface);\n}\n.category[aria-pressed='true'] {\n	background: var(--office-selected);\n	border-color: var(--office-accent);\n}\n.layouts {\n	display: grid;\n	grid-template-columns: repeat(3, minmax(0, 1fr));\n	align-content: start;\n	gap: var(--office-space-2);\n	max-height: calc(var(--office-space-6) * 15);\n	overflow-y: auto;\n	padding: var(--office-space-1);\n}\n.layout {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: var(--office-space-1);\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.layout:hover {\n	background: var(--office-surface);\n}\n.layout[aria-selected='true'] {\n	border-color: var(--office-accent);\n	background: var(--office-selected);\n}\n.tile {\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	width: calc(var(--office-space-4) * 4);\n	height: calc(var(--office-space-5) * 2);\n	overflow: hidden;\n	pointer-events: none;\n}\n.tile > * {\n	max-width: 100%;\n	max-height: 100%;\n}\n.name {\n	font-size: var(--office-font-size-2xs);\n	line-height: 1.2;\n	text-align: center;\n}\n.details {\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-2);\n	min-width: 0;\n}\n.preview {\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	aspect-ratio: 200 / 125;\n	overflow: hidden;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n}\n.preview > * {\n	max-width: 100%;\n	max-height: 100%;\n}\n.title {\n	margin: 0;\n	font-size: var(--office-font-size);\n	font-weight: 600;\n}\n.description {\n	margin: 0;\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-sm);\n}\n.items {\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-1);\n}\n.items > span {\n	font-size: var(--office-font-size-sm);\n	color: var(--office-muted-foreground);\n}\ntextarea {\n	box-sizing: border-box;\n	width: 100%;\n	padding: var(--office-space-1) var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n	resize: vertical;\n}\nbutton:focus-visible,\ntextarea:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: 0;\n}\n@media (max-width: 40em) {\n	:host {\n		grid-template-columns: minmax(0, 1fr);\n	}\n	.categories {\n		flex-direction: row;\n		flex-wrap: wrap;\n		padding-right: 0;\n		border-right: 0;\n	}\n}\n@media (forced-colors: active) {\n	.category[aria-pressed='true'],\n	.layout[aria-selected='true'] {\n		border-color: Highlight;\n		outline: var(--office-focus-width) solid Highlight;\n	}\n}\n";
+
+// src/ribbon/svg-preview.ts
+function safeColor(color, fallback = "none") {
+  if (!color) {
+    return fallback;
+  }
+  const c = color.trim();
+  if (/^#[0-9a-f]{3,8}$/iu.test(c) || /^rgba?\([\d\s.,%]+\)$/iu.test(c) || c === "none") {
+    return c;
+  }
+  if (c === "transparent") {
+    return "none";
+  }
+  return fallback;
+}
+function svgTile(width, height, defs, body) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" aria-hidden="true" focusable="false">${defs ? `<defs>${defs}</defs>` : ""}${body}</svg>`;
+}
+
+// src/smartart/tiles.ts
+var round = (value) => String(Math.round(value * 100) / 100);
+var rect = (x, y, w, h, fill, rx = 1.5) => `<rect x="${round(x)}" y="${round(y)}" width="${round(w)}" height="${round(h)}" rx="${rx}" fill="${fill}"/>`;
+var circle = (x, y, r, fill, opacity = 1) => `<circle cx="${round(x)}" cy="${round(y)}" r="${round(r)}" fill="${fill}" fill-opacity="${opacity}"/>`;
+var poly = (points, fill) => `<polygon points="${points.map(([x, y]) => `${round(x)},${round(y)}`).join(" ")}" fill="${fill}"/>`;
+var line = (x1, y1, x2, y2, stroke) => `<path d="M${round(x1)} ${round(y1)}L${round(x2)} ${round(y2)}" stroke="${stroke}" stroke-width="1" fill="none"/>`;
+var DRAWINGS = {
+  list: (f, w, h) => [0, 1, 2].map((i) => rect(6, 5 + i * (h - 10) * 0.36, w - 12, (h - 10) * 0.26, f)).join(""),
+  process: (f, w, h) => [0, 1, 2].map((i) => rect(4 + i * ((w - 8) / 3), h * 0.3, (w - 8) / 3 - 4, h * 0.4, f)).join(""),
+  cycle: (f, w, h) => [
+    [w / 2, 8],
+    [w - 14, h / 2],
+    [w / 2, h - 8],
+    [14, h / 2]
+  ].map(([x, y]) => circle(x, y, 5, f)).join(""),
+  hierarchy: (f, w) => rect(w / 2 - 9, 4, 18, 8, f) + line(w / 2, 12, w / 2, 18, f) + line(14, 18, w - 14, 18, f) + rect(6, 19, 18, 8, f) + rect(w - 24, 19, 18, 8, f),
+  relationship: (f, w, h) => circle(w * 0.32, h / 2, 9, f) + circle(w * 0.68, h / 2, 9, f) + line(w * 0.32 + 9, h / 2, w * 0.68 - 9, h / 2, "#FFFFFF"),
+  matrix: (f, w) => [0, 1, 2, 3].map(
+    (i) => rect(10 + i % 2 * ((w - 20) / 2), 5 + Math.floor(i / 2) * 14, (w - 20) / 2 - 3, 11, f)
+  ).join(""),
+  pyramid: (f, w, h) => poly(
+    [
+      [w / 2, 4],
+      [w / 2 + 6, 13],
+      [w / 2 - 6, 13]
+    ],
+    f
+  ) + poly(
+    [
+      [w / 2 - 7, 15],
+      [w / 2 + 7, 15],
+      [w / 2 + 13, 24],
+      [w / 2 - 13, 24]
+    ],
+    f
+  ) + poly(
+    [
+      [w / 2 - 14, 26],
+      [w / 2 + 14, 26],
+      [w / 2 + 20, h - 4],
+      [w / 2 - 20, h - 4]
+    ],
+    f
+  ),
+  funnel: (f, w) => [0, 1, 2].map((i) => {
+    const half = 20 - i * 6;
+    return poly(
+      [
+        [w / 2 - half, 5 + i * 9],
+        [w / 2 + half, 5 + i * 9],
+        [w / 2 + half - 4, 12 + i * 9],
+        [w / 2 - half + 4, 12 + i * 9]
+      ],
+      f
+    );
+  }).join(""),
+  target: (f, w, h) => circle(w / 2, h / 2, 14, f, 0.35) + circle(w / 2, h / 2, 9, f, 0.6) + circle(w / 2, h / 2, 4, f),
+  gear: (f, w, h) => circle(w * 0.38, h * 0.55, 9, f) + circle(w * 0.38, h * 0.55, 3, "#FFFFFF") + circle(w * 0.66, h * 0.36, 6, f) + circle(w * 0.66, h * 0.36, 2, "#FFFFFF"),
+  venn: (f, w, h) => circle(w * 0.38, h * 0.42, 10, f, 0.55) + circle(w * 0.62, h * 0.42, 10, f, 0.55) + circle(w * 0.5, h * 0.64, 10, f, 0.55),
+  timeline: (f, w, h) => line(5, h / 2, w - 5, h / 2, f) + [0, 1, 2].map((i) => circle(12 + i * ((w - 24) / 2), h / 2, 3.5, f)).join("") + [0, 1, 2].map((i) => rect(7 + i * ((w - 24) / 2), i % 2 ? h / 2 + 6 : 5, 10, 7, f)).join(""),
+  chevron: (f, w, h) => [0, 1, 2].map((i) => {
+    const x = 4 + i * ((w - 8) / 3);
+    const cw = (w - 8) / 3;
+    return poly(
+      [
+        [x, h * 0.3],
+        [x + cw - 5, h * 0.3],
+        [x + cw, h / 2],
+        [x + cw - 5, h * 0.7],
+        [x, h * 0.7],
+        [x + 5, h / 2]
+      ],
+      f
+    );
+  }).join(""),
+  bending: (f, w, h) => rect(5, 5, 14, 9, f) + rect(w / 2 - 7, 5, 14, 9, f) + rect(w - 19, 5, 14, 9, f) + rect(w - 19, h - 14, 14, 9, f) + rect(w / 2 - 7, h - 14, 14, 9, f)
+};
+function smartArtLayoutTileSvg(type, fill, size) {
+  const color = safeColor(fill, "#4472C4");
+  const draw = DRAWINGS[type] ?? DRAWINGS.process;
+  const bg = rect(0, 0, size.width, size.height, "#FFFFFF", 0);
+  return svgTile(size.width, size.height, "", bg + draw(color, size.width, size.height));
+}
+function smartArtTileSvg(id, fills, style, size) {
+  const safeId = `sat-${id}`.replace(/[^\w-]/gu, "_");
+  const pad = 4;
+  const gap = 4;
+  const w = (size.width - pad * 2 - gap * 2) / 3;
+  const h = size.height * 0.46;
+  const y = (size.height - h) / 2;
+  let defs = "";
+  let filter = "";
+  if (style !== "flat") {
+    const intense = style === "intense";
+    defs += `<filter id="${safeId}-s" x="-30%" y="-30%" width="160%" height="170%"><feDropShadow dx="0" dy="${intense ? 1.6 : 0.9}" stdDeviation="${intense ? 1.2 : 0.7}" flood-color="#000000" flood-opacity="${intense ? 0.45 : 0.3}"/></filter>`;
+    filter = ` filter="url(#${safeId}-s)"`;
+  }
+  const boxes = [];
+  for (let i = 0; i < 3; i++) {
+    const color = safeColor(fills[i % fills.length], "#4472C4");
+    let paint = color;
+    if (style === "intense") {
+      defs += `<linearGradient id="${safeId}-g${i}" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="${color}" stop-opacity="0.8"/><stop offset="1" stop-color="${color}"/></linearGradient>`;
+      paint = `url(#${safeId}-g${i})`;
+    }
+    const x = pad + i * (w + gap);
+    boxes.push(
+      `<rect x="${round(x)}" y="${round(y)}" width="${round(w)}" height="${round(h)}" rx="${round(Math.min(w, h) * 0.12)}" fill="${paint}" stroke="#FFFFFF" stroke-width="0.75"${filter}/>`
+    );
+  }
+  const bg = `<rect x="0" y="0" width="${size.width}" height="${size.height}" fill="#FFFFFF"/>`;
+  return svgTile(size.width, size.height, defs, bg + boxes.join(""));
+}
+
+// src/smartart/smartart-picker.ts
+var ENGLISH = {
+  categories: "SmartArt categories",
+  layouts: "SmartArt layouts",
+  items: "Items (one per line)"
+};
+var TILE = { width: 64, height: 40 };
+var PREVIEW = { width: 200, height: 125 };
+var COLUMNS = 3;
+var sameItems = (a, b) => a.length === b.length && a.every((item, index) => item === b[index]);
+var OfficeUiSmartArtPicker = class extends OfficeElement {
+  static styles = controlStyles(smartart_picker_default);
+  static properties = {
+    itemsEditor: { type: Boolean, attribute: "items-editor" },
+    accent: { type: String }
+  };
+  categoryList = [];
+  layoutList = [];
+  text = ENGLISH;
+  draw;
+  shown = "";
+  choice = { layout: "", items: [] };
+  previews = /* @__PURE__ */ new Map();
+  constructor() {
+    super();
+    this.itemsEditor = false;
+    this.accent = null;
+  }
+  get categories() {
+    return this.categoryList;
+  }
+  set categories(value) {
+    this.categoryList = value;
+    if (!value.some((category) => category.id === this.shown)) this.showCategory(value[0]?.id);
+    this.requestUpdate("categories");
+  }
+  get layouts() {
+    return this.layoutList;
+  }
+  set layouts(value) {
+    this.layoutList = value;
+    this.previews.clear();
+    if (!value.some((layout) => layout.id === this.choice.layout)) this.showCategory(this.shown);
+    this.requestUpdate("layouts");
+  }
+  get labels() {
+    return this.text;
+  }
+  set labels(value) {
+    this.text = { ...ENGLISH, ...value };
+    this.requestUpdate("labels");
+  }
+  get drawPreview() {
+    return this.draw;
+  }
+  set drawPreview(value) {
+    this.draw = value;
+    this.previews.clear();
+    this.requestUpdate("drawPreview");
+  }
+  /** The category whose layouts the gallery shows. */
+  get category() {
+    return this.shown;
+  }
+  set category(value) {
+    this.showCategory(value);
+    this.requestUpdate("category");
+  }
+  /** The choice; `items` leaves out blank lines and surrounding spaces. */
+  get value() {
+    const items = this.choice.items.map((item) => item.trim()).filter(Boolean);
+    return { layout: this.choice.layout, items };
+  }
+  set value(value) {
+    this.choice = { layout: value.layout, items: [...value.items] };
+    const layout = this.layoutList.find((entry) => entry.id === value.layout);
+    if (layout) this.shown = layout.category;
+    this.requestUpdate("value");
+  }
+  /** Shows `id`'s layouts and selects the first, unless the choice is already one of them. */
+  showCategory(id) {
+    this.shown = id ?? "";
+    const current = this.layoutList.find((layout) => layout.id === this.choice.layout);
+    if (current?.category === this.shown) return;
+    const first = this.layoutList.find((layout) => layout.category === this.shown);
+    this.choice = { layout: first?.id ?? "", items: [...first?.defaultItems ?? []] };
+  }
+  pick(layout) {
+    const previous = this.layoutList.find((entry) => entry.id === this.choice.layout);
+    const edited = previous && !sameItems(this.choice.items, previous.defaultItems ?? []);
+    this.choice = {
+      layout: layout.id,
+      items: edited ? this.choice.items : [...layout.defaultItems ?? []]
+    };
+    this.requestUpdate("value");
+    this.fire("office-smartart-change", this.value);
+  }
+  chooseCategory(id) {
+    const before = this.choice.layout;
+    this.showCategory(id);
+    this.requestUpdate("category");
+    if (this.choice.layout !== before) this.fire("office-smartart-change", this.value);
+  }
+  visible() {
+    return this.layoutList.filter((layout) => layout.category === this.shown);
+  }
+  onTileKey(event, index) {
+    const layouts = this.visible();
+    const step = {
+      ArrowRight: 1,
+      ArrowLeft: -1,
+      ArrowDown: COLUMNS,
+      ArrowUp: -COLUMNS
+    };
+    let next;
+    if (event.key in step)
+      next = Math.min(layouts.length - 1, Math.max(0, index + step[event.key]));
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = layouts.length - 1;
+    else if (event.key === "Enter") {
+      event.preventDefault();
+      this.fire("office-smartart-activate", this.value);
+      return;
+    }
+    const layout = next === void 0 ? void 0 : layouts[next];
+    if (!layout) return;
+    event.preventDefault();
+    this.pick(layout);
+    [...this.renderRoot.querySelectorAll("[data-layout]")].find((tile) => tile.dataset.layout === layout.id)?.focus();
+  }
+  preview(layout, tile) {
+    const key = `${tile ? "t" : "p"}:${layout.id}`;
+    if (this.previews.has(key)) return this.previews.get(key) ?? null;
+    const size = tile ? TILE : PREVIEW;
+    let drawn;
+    try {
+      drawn = this.draw?.(layout, size, tile);
+    } catch {
+      drawn = void 0;
+    }
+    const svg = drawn ?? smartArtLayoutTileSvg(layout.family ?? layout.category, this.accent ?? void 0, size);
+    const node = typeof svg === "string" ? parseSvgPreview(this.ownerDocument, svg) : svg;
+    this.previews.set(key, node);
+    return node;
+  }
+  render() {
+    const text = this.text;
+    const layouts = this.visible();
+    const chosen = this.layoutList.find((layout) => layout.id === this.choice.layout);
+    const category = this.categoryList.find((entry) => entry.id === this.shown);
+    const focusable = layouts.some((layout) => layout.id === this.choice.layout) ? this.choice.layout : layouts[0]?.id;
+    return html`<nav class="categories" aria-label=${text.categories}
+				>${this.categoryList.map(
+      (entry) => html`<button
+							type="button"
+							class="category"
+							data-category=${entry.id}
+							aria-pressed=${entry.id === this.shown ? "true" : "false"}
+							@click=${() => this.chooseCategory(entry.id)}
+							>${entry.label}</button
+						>`
+    )}</nav
+			><div class="layouts" role="listbox" aria-label=${text.layouts}
+				>${layouts.map(
+      (layout, index) => html`<button
+							type="button"
+							class="layout"
+							role="option"
+							data-layout=${layout.id}
+							title=${layout.label}
+							aria-selected=${layout.id === this.choice.layout ? "true" : "false"}
+							tabindex=${layout.id === focusable ? "0" : "-1"}
+							@click=${() => this.pick(layout)}
+							@dblclick=${() => {
+        this.pick(layout);
+        this.fire("office-smartart-activate", this.value);
+      }}
+							@keydown=${(event) => this.onTileKey(event, index)}
+							><span class="tile" aria-hidden="true">${this.preview(layout, true) ?? nothing}</span
+							><span class="name">${layout.label}</span></button
+						>`
+    )}</div
+			><div class="details" aria-live="polite"
+				>${chosen ? html`<div class="preview" aria-hidden="true"
+									>${this.preview(chosen, false) ?? nothing}</div
+								><h3 class="title">${chosen.label}</h3
+								>${category?.description ? html`<p class="description">${category.description}</p>` : nothing}` : nothing}${this.itemsEditor ? html`<label class="items"
+								><span>${text.items}</span
+								><textarea
+									data-key="items"
+									rows="5"
+									aria-label=${text.items}
+									.value=${this.choice.items.join("\n")}
+									@input=${(event) => {
+      const value = event.target.value;
+      this.choice = { ...this.choice, items: value.split("\n") };
+      this.fire("office-smartart-change", this.value);
+    }}
+								></textarea>
+							</label>` : nothing}</div
+			>`;
+  }
+};
+var defineSmartArtPicker = definer(
+  "office-ui-smartart-picker",
+  () => OfficeUiSmartArtPicker
+);
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/smartart/smartart-text-pane.css?raw
+var smartart_text_pane_default = ":host {\n	display: flex;\n	flex-direction: column;\n	min-width: calc(var(--office-space-6) * 8);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n	color: var(--office-foreground);\n	font-family: var(--office-font);\n	font-size: var(--office-font-size);\n	box-shadow: var(--office-shadow);\n}\n[hidden] {\n	display: none !important;\n}\n.header {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-2);\n	padding: var(--office-space-1) var(--office-space-2);\n	border-bottom: var(--office-border-width) solid var(--office-border);\n	background: var(--office-surface);\n}\n.title {\n	font-weight: var(--office-font-weight-bold);\n}\n.close {\n	min-width: var(--office-control-height-xs);\n	min-height: var(--office-control-height-xs);\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.close:hover {\n	background: var(--office-surface);\n}\n.close:focus-visible,\n.append:focus-visible,\n.tool:focus-visible,\ninput:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-width) * -1);\n}\n.outline {\n	margin: 0;\n	padding: var(--office-space-2);\n	list-style: none;\n	overflow-y: auto;\n	max-height: calc(var(--office-space-6) * 10);\n}\n.line {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-2);\n	padding-inline-start: calc(var(--level, 0) * var(--office-space-5));\n}\n.bullet {\n	flex: none;\n	width: calc(var(--office-space-1) * 1.5);\n	height: calc(var(--office-space-1) * 1.5);\n	border-radius: var(--office-radius-full);\n	background: var(--office-foreground);\n}\ninput {\n	flex: 1;\n	min-width: 0;\n	min-height: var(--office-control-height-xs);\n	padding: 0 var(--office-space-1);\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n}\ninput:hover {\n	border-color: var(--office-border);\n}\n.line[aria-selected='true'] input {\n	background: var(--office-selected);\n}\ninput::placeholder {\n	color: var(--office-muted-foreground);\n}\n.empty {\n	margin: 0;\n	padding: var(--office-space-3);\n	color: var(--office-muted-foreground);\n}\n.marker {\n	flex: none;\n	min-width: var(--office-space-3);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-xs);\n	text-align: center;\n}\n.append,\n.tool {\n	min-height: var(--office-control-height-xs);\n	padding: 0 var(--office-space-1);\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.append {\n	margin-inline-start: auto;\n	border-color: var(--office-border);\n}\n.append:hover:not(:disabled),\n.tool:hover:not(:disabled) {\n	background: var(--office-background);\n	border-color: var(--office-border);\n}\n.append:disabled,\n.tool:disabled,\ninput:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.tools,\n.styles {\n	display: flex;\n	flex: none;\n	align-items: center;\n	gap: var(--office-space-1);\n}\n.styles {\n	flex-basis: 100%;\n	padding-inline-start: var(--office-space-5);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-xs);\n}\n.swatch {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1);\n}\n.swatch input {\n	flex: none;\n	width: var(--office-space-5);\n	min-height: 0;\n	height: var(--office-space-4);\n	padding: 0;\n	border-color: var(--office-border);\n	cursor: pointer;\n}\n.toggle.bold {\n	font-weight: var(--office-font-weight-bold);\n}\n.toggle.italic {\n	font-style: italic;\n}\n.toggle[aria-pressed='true'] {\n	border-color: var(--office-accent);\n	background: var(--office-selected);\n}\n.note {\n	margin: 0;\n	padding: 0 var(--office-space-2) var(--office-space-2);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-xs);\n}\n";
+var DEFAULT_FILL = "#4472c4";
+var DEFAULT_FONT = "#ffffff";
+function renderLineActions(node, name, text, disabled, fire) {
+  const canRemove = node.canRemove !== false;
+  const button = (className, label, glyph, blocked, onClick, title = label) => html`<button
+			type="button"
+			class=${`tool ${className}`}
+			aria-label=${`${label}: ${name}`}
+			title=${title}
+			?disabled=${disabled || blocked}
+			@click=${onClick}
+			>${glyph}</button
+		>`;
+  return html`<span class="tools"
+		>${button(
+    "move-up",
+    text.moveUp,
+    "\u2191",
+    node.canMoveUp === false,
+    () => fire("office-smartart-node-move", { id: node.id, direction: -1 })
+  )}${button(
+    "move-down",
+    text.moveDown,
+    "\u2193",
+    node.canMoveDown === false,
+    () => fire("office-smartart-node-move", { id: node.id, direction: 1 })
+  )}${node.canAddChild === false ? nothing : button(
+    "add-child",
+    text.addChild,
+    "+",
+    false,
+    () => fire("office-smartart-node-add-child", { id: node.id })
+  )}${button(
+    "remove",
+    text.remove,
+    "\xD7",
+    !canRemove,
+    () => fire("office-smartart-node-remove", { id: node.id }),
+    canRemove ? text.remove : text.removeUnavailable
+  )}</span
+	>`;
+}
+function renderLineStyle(node, name, text, disabled, fire) {
+  const style = node.style ?? {};
+  const change = (patch) => fire("office-smartart-node-style", { id: node.id, style: patch });
+  const swatch = (className, label, value, key) => html`<label class=${`swatch ${className}`}
+			><span>${label}</span
+			><input
+				type="color"
+				aria-label=${`${label}: ${name}`}
+				.value=${value}
+				?disabled=${disabled}
+				@change=${(event) => change({ [key]: event.target.value })}
+		/></label>`;
+  const toggle = (className, label, glyph, key) => html`<button
+			type="button"
+			class=${`tool toggle ${className}`}
+			aria-label=${`${label}: ${name}`}
+			aria-pressed=${style[key] ? "true" : "false"}
+			title=${label}
+			?disabled=${disabled}
+			@click=${() => change({ [key]: !style[key] })}
+			>${glyph}</button
+		>`;
+  return html`<span class="styles" role="group" aria-label=${name}
+		>${swatch("fill", text.fill, style.fillColor ?? DEFAULT_FILL, "fillColor")}${swatch(
+    "font",
+    text.fontColor,
+    style.fontColor ?? DEFAULT_FONT,
+    "fontColor"
+  )}${toggle("bold", text.bold, "B", "bold")}${toggle("italic", text.italic, "I", "italic")}</span
+	>`;
+}
+
+// src/smartart/smartart-text-pane.ts
+var ENGLISH2 = {
+  title: "Type your text here",
+  placeholder: "[Text]",
+  close: "Close",
+  outline: "SmartArt text",
+  empty: "This diagram has no shapes with text.",
+  add: "Add shape",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  addChild: "Add sub-item",
+  remove: "Remove",
+  removeUnavailable: "The layout needs this shape",
+  fill: "Fill",
+  fontColor: "Text",
+  bold: "Bold",
+  italic: "Italic"
+};
+var OfficeUiSmartArtTextPane = class extends OfficeElement {
+  static styles = controlStyles(smartart_text_pane_default);
+  static properties = {
+    closable: { type: Boolean },
+    selected: { type: String },
+    disabled: { type: Boolean },
+    tools: { type: Boolean },
+    appendDisabled: { type: Boolean, attribute: "append-disabled" }
+  };
+  list = [];
+  text = ENGLISH2;
+  hints = [];
+  focusPending = false;
+  /** Tracked from focus events: reading a shadow root's `activeElement` is not safe everywhere. */
+  focusWithin = false;
+  constructor() {
+    super();
+    this.closable = false;
+    this.selected = null;
+    this.disabled = false;
+    this.tools = false;
+    this.appendDisabled = false;
+    this.addEventListener("focusin", () => this.focusWithin = true);
+    this.addEventListener("focusout", () => this.focusWithin = false);
+  }
+  /** Hint lines shown under the outline. */
+  get notes() {
+    return this.hints;
+  }
+  set notes(value) {
+    this.hints = value;
+    this.requestUpdate("notes");
+  }
+  get nodes() {
+    return this.list;
+  }
+  set nodes(value) {
+    this.list = value;
+    this.requestUpdate("nodes");
+  }
+  get labels() {
+    return this.text;
+  }
+  set labels(value) {
+    this.text = { ...ENGLISH2, ...value };
+    this.requestUpdate("labels");
+  }
+  /** Moves the focus to the selected node's line (or the first line). */
+  focusSelected() {
+    const inputs = this.inputs();
+    (inputs.find((input) => input.dataset.node === this.selected) ?? inputs[0])?.focus();
+  }
+  inputs() {
+    return [...this.renderRoot.querySelectorAll("input[data-node]")];
+  }
+  onKey(event, node, index) {
+    const input = event.target;
+    if (this.disabled) return;
+    const request = (name) => {
+      event.preventDefault();
+      this.focusPending = true;
+      this.fire(name, { id: node.id });
+    };
+    if (event.key === "Enter") request("office-smartart-node-add");
+    else if (event.key === "Tab")
+      request(event.shiftKey ? "office-smartart-node-promote" : "office-smartart-node-demote");
+    else if ((event.key === "Backspace" || event.key === "Delete") && input.value === "" && node.canRemove !== false)
+      request("office-smartart-node-remove");
+    else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      const next = this.inputs()[index + (event.key === "ArrowUp" ? -1 : 1)];
+      if (!next) return;
+      event.preventDefault();
+      next.focus();
+    }
+  }
+  updated(changed) {
+    const byId = new Map(this.list.map((node) => [node.id, node]));
+    for (const input of this.inputs()) {
+      const text = byId.get(input.dataset.node ?? "")?.text ?? "";
+      if (input.value !== text) input.value = text;
+    }
+    if ((this.focusPending || this.focusWithin) && (changed.has("selected") || changed.has("nodes"))) {
+      this.focusPending = false;
+      this.inputs().find((input) => input.dataset.node === this.selected)?.focus();
+    }
+  }
+  render() {
+    const text = this.text;
+    const fire = (name, detail) => this.fire(name, detail);
+    return html`<div class="header"
+				><span class="title">${text.title}</span>${this.tools ? html`<button
+								type="button"
+								class="append"
+								?disabled=${this.disabled || this.appendDisabled}
+								@click=${() => this.fire("office-smartart-node-append", {})}
+								>${text.add}</button
+							>` : nothing}${this.closable ? html`<button
+								type="button"
+								class="close"
+								aria-label=${text.close}
+								title=${text.close}
+								@click=${() => this.fire("office-smartart-text-pane-close", {})}
+								>×</button
+							>` : nothing}</div
+			>${this.list.length === 0 ? html`<p class="empty">${text.empty}</p>` : html`<ul class="outline" role="tree" aria-label=${text.outline}
+							>${this.list.map((node, index) => {
+      const name = node.label ?? (node.text || text.placeholder);
+      return html`<li
+									class="line"
+									role="treeitem"
+									aria-level=${String(node.level + 1)}
+									aria-selected=${node.id === this.selected ? "true" : "false"}
+									style="--level: ${node.level}"
+									>${node.marker === void 0 ? html`<span class="bullet" aria-hidden="true"></span>` : html`<span class="marker" aria-hidden="true">${node.marker}</span>`}<input
+										type="text"
+										data-node=${node.id}
+										data-testid="smartart-node-text"
+										placeholder=${text.placeholder}
+										aria-label=${name}
+										?disabled=${this.disabled}
+										@focus=${() => {
+        if (this.selected === node.id) return;
+        this.selected = node.id;
+        this.fire("office-smartart-node-select", { id: node.id });
+      }}
+										@input=${(event) => this.fire("office-smartart-text-change", {
+        id: node.id,
+        text: event.target.value
+      })}
+										@keydown=${(event) => this.onKey(event, node, index)}
+									/>${this.tools ? [
+        renderLineActions(node, name, text, this.disabled, fire),
+        renderLineStyle(node, name, text, this.disabled, fire)
+      ] : nothing}</li
+								>`;
+    })}</ul
+						>`}${this.hints.map((note) => html`<p class="note" role="note">${note}</p>`)}`;
+  }
+};
+var defineSmartArtTextPane = definer(
+  "office-ui-smartart-text-pane",
+  () => OfficeUiSmartArtTextPane
+);
+var TILE2 = { width: 56, height: 36 };
+var same = (english) => english;
+function smartArtColorsGalleryState(accents, current, t = same) {
+  return {
+    id: "smartArtColors",
+    label: t("Change Colors"),
+    sections: DIAGRAM_COLOR_SECTIONS.map((section) => ({
+      title: t(section.title),
+      columns: 5,
+      tileWidth: TILE2.width,
+      tileHeight: TILE2.height,
+      items: DIAGRAM_COLOR_ENTRIES.filter((entry) => entry.section === section.id).map((entry) => ({
+        id: entry.id,
+        label: t(entry.name),
+        applied: entry.id === current,
+        preview: smartArtTileSvg(
+          entry.id,
+          entry.accents.map((accent) => accents[accent] ?? "#4472C4"),
+          "flat",
+          TILE2
+        )
+      }))
+    }))
+  };
+}
+function smartArtStylesGalleryState(accent1, current, t = same) {
+  return {
+    id: "smartArtStyles",
+    label: t("SmartArt Styles"),
+    sections: [
+      {
+        title: t("Best Match for Document"),
+        columns: 5,
+        tileWidth: TILE2.width,
+        tileHeight: TILE2.height,
+        items: DIAGRAM_STYLE_ENTRIES.map((entry) => ({
+          id: entry.id,
+          label: t(entry.name),
+          applied: entry.id === current,
+          preview: smartArtTileSvg(`style-${entry.id}`, [accent1 ?? "#4472C4"], entry.id, TILE2)
+        }))
+      }
+    ]
+  };
+}
+var SmartArtTextPaneController = class {
+  constructor(doc, host, className) {
+    this.host = host;
+    defineSmartArtTextPane(doc.defaultView?.customElements);
+    this.pane = doc.createElement("office-ui-smartart-text-pane");
+    this.pane.className = className;
+    this.pane.closable = true;
+    this.pane.hidden = true;
+    this.pane.addEventListener("office-smartart-text-change", (event) => {
+      const { id, text } = event.detail;
+      host.setText(id, text);
+    });
+    const request = (name, edit) => this.pane.addEventListener(name, (event) => {
+      const { id } = event.detail;
+      this.current = id;
+      this.apply(edit(id));
+    });
+    request("office-smartart-node-add", (id) => ({ kind: "add", position: "after", nodeId: id }));
+    request("office-smartart-node-promote", (id) => ({ kind: "promote", nodeId: id }));
+    request("office-smartart-node-demote", (id) => ({ kind: "demote", nodeId: id }));
+    this.pane.addEventListener("office-smartart-node-remove", (event) => {
+      const { id } = event.detail;
+      const nodes = this.pane.nodes;
+      const index = nodes.findIndex((node) => node.id === id);
+      this.current = nodes[index - 1]?.id ?? nodes[index + 1]?.id ?? null;
+      this.apply({ kind: "remove", nodeId: id });
+    });
+    this.pane.addEventListener("office-smartart-node-select", (event) => {
+      this.current = event.detail.id;
+    });
+    this.pane.addEventListener("office-smartart-text-pane-close", () => this.setOpen(false));
+  }
+  host;
+  pane;
+  paneOpen = false;
+  /** The node the text pane (and so Add Shape, Promote...) acts on. */
+  current = null;
+  get open() {
+    return this.paneOpen;
+  }
+  /** Opens or closes the pane (Text Pane toggle); focuses its current line on opening. */
+  setOpen(open) {
+    if (this.paneOpen === open) return;
+    this.paneOpen = open;
+    this.sync();
+    this.host.toggled(open);
+    if (open) this.pane.focusSelected();
+  }
+  /** Puts the pane on a node (a newly inserted diagram's first node, for example). */
+  select(nodeId) {
+    this.current = nodeId;
+    this.sync();
+  }
+  /** The node commands act on: the text pane's, else the diagram's last node. */
+  currentNode() {
+    const nodes = this.host.nodes();
+    if (!nodes) return void 0;
+    if (this.current && nodes.some((node) => node.id === this.current)) return this.current;
+    return nodes.at(-1)?.id;
+  }
+  /**
+   * Runs a SmartArt Design node command on the current node; returns false for the commands that
+   * are not node edits (`textPane`, `changeLayout`) or when nothing is selected.
+   */
+  runCommand(key) {
+    if (!this.host.nodes()) return false;
+    const edit = diagramDesignEdit(key, this.currentNode());
+    if (!edit) return false;
+    this.apply(edit);
+    return true;
+  }
+  apply(edit) {
+    const nodeId = this.host.edit(edit);
+    if (nodeId) this.current = nodeId;
+    this.sync();
+  }
+  /** Shows the pane for the selected diagram while it is open, with its current outline. */
+  sync() {
+    const nodes = this.host.nodes();
+    this.pane.hidden = !this.paneOpen || !nodes;
+    if (!nodes) return;
+    this.pane.nodes = diagramNodeOutline(nodes);
+    const current = this.currentNode() ?? null;
+    if (this.pane.selected !== current) this.pane.selected = current;
+  }
+  /** Translated pane strings; `t` looks up the shared SmartArt UI keys. */
+  setLabels(t) {
+    this.pane.labels = {
+      title: t("Type your text here"),
+      placeholder: t("[Text]"),
+      close: t("Close"),
+      outline: t("SmartArt text"),
+      empty: t("This diagram has no shapes with text.")
+    };
+  }
+  /** A new document: no current node, and the pane closed. */
+  reset() {
+    this.current = null;
+    this.paneOpen = false;
+    this.sync();
+  }
+};
+
+export { OfficeUiSmartArt, OfficeUiSmartArtPicker, OfficeUiSmartArtTextPane, SmartArtTextPaneController, defineSmartArt, defineSmartArtPicker, defineSmartArtTextPane, renderDiagramDrawing, safeColor, smartArtColorsGalleryState, smartArtLayoutTileSvg, smartArtStylesGalleryState, smartArtTileSvg, svgTile };