@wrrdev/fenix-ui 1.1.14 → 1.1.15

package/dist/components/editor/styles.js

@@ -0,0 +1,446 @@
+const FX_EDITOR_CONTENT_CSS = `
+.content { line-height: 1.55; color: var(--fx-text-default); }
+.content p { margin: 0 0 0.65em; }
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
+  margin: 0.8em 0 0.4em; line-height: 1.25; font-weight: 600; color: var(--fx-text-default);
+}
+.content h1 { font-size: 1.8em; }
+.content h2 { font-size: 1.5em; }
+.content h3 { font-size: 1.25em; }
+.content h4 { font-size: 1.1em; }
+.content h5, .content h6 { font-size: 1em; }
+.content ul, .content ol { margin: 0 0 0.65em; padding-left: 1.6em; }
+.content li { margin: 0.15em 0; }
+.content blockquote {
+  margin: 0.5em 0; padding: 0.25em 0 0.25em 1em;
+  border-left: 3px solid var(--fx-color-primary); color: var(--fx-text-muted);
+}
+.content pre {
+  margin: 0.6em 0; padding: var(--fx-space-md); overflow: auto;
+  background: var(--fx-surface-surface); border-radius: var(--fx-radius-sm);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em;
+}
+.content code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.92em; background: var(--fx-surface-surface);
+  padding: 0.1em 0.3em; border-radius: 3px;
+}
+.content pre code { background: none; padding: 0; }
+.content hr { border: none; border-top: 1px solid var(--fx-border-default); margin: 1em 0; }
+.content a { color: var(--fx-color-primary); text-decoration: underline; cursor: pointer; }
+.content img { max-width: 100%; height: auto; display: block; }
+.content figure { margin: 1em 0; }
+.content figure.fx-image img { margin: 0 auto; }
+.content figure.fx-image[data-align="left"] { float: left; max-width: 50%; margin: 0 1em 0.5em 0; }
+.content figure.fx-image[data-align="right"] { float: right; max-width: 50%; margin: 0 0 0.5em 1em; }
+.content figure.fx-image[data-align="center"] { margin-left: auto; margin-right: auto; }
+.content figure.fx-video[data-align="left"],
+.content figure.fx-embed[data-align="left"] { float: left; max-width: 50%; margin: 0 1em 0.5em 0; }
+.content figure.fx-video[data-align="right"],
+.content figure.fx-embed[data-align="right"] { float: right; max-width: 50%; margin: 0 0 0.5em 1em; }
+.content figure.fx-video[data-align="center"],
+.content figure.fx-embed[data-align="center"] { margin-left: auto; margin-right: auto; }
+.content figcaption {
+  margin-top: 0.4em; color: var(--fx-text-muted);
+  font-size: 0.85em; text-align: center;
+}
+.content video { display: block; width: 100%; background: #000; border-radius: var(--fx-radius-sm); }
+.content iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
+.content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
+.content th, .content td { border: 1px solid var(--fx-border-default); padding: var(--fx-space-xs) var(--fx-space-sm); vertical-align: top; }
+.content th { background: var(--fx-surface-surface); text-align: left; font-weight: 600; }
+.content table.fx-grid { border: none; margin: 0.6em 0; }
+.content table.fx-grid > tbody > tr > td {
+  border: 1px dashed var(--fx-border-default); padding: var(--fx-space-sm);
+  vertical-align: top;
+}
+@media (max-width: 640px) {
+  .content table.fx-grid[data-stack] > tbody > tr > td {
+    display: block; width: 100% !important; border: none; padding: var(--fx-space-xs) 0;
+  }
+}
+`;
+const EDITOR_STYLES = `
+:host {
+  display: block;
+  width: 100%;
+  font-family: var(--fx-font-family);
+  font-size: var(--fx-font-size);
+  color: var(--fx-text-default);
+  --fx-editor-min-height: 240px;
+  --fx-editor-max-height: none;
+  --fx-editor-radius: var(--fx-radius-md);
+  --fx-editor-toolbar-bg: var(--fx-surface-surface);
+  --fx-editor-content-padding: var(--fx-space-md) var(--fx-space-lg);
+}
+:host([full]) { width: 100%; }
+.editor {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--fx-surface-background);
+  border: 1px solid var(--fx-border-default);
+  border-radius: var(--fx-editor-radius);
+  transition: border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),
+    box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);
+}
+.editor:focus-within {
+  border-color: var(--fx-color-primary);
+  box-shadow: var(--fx-effect-focus-ring, none);
+}
+:host([error]) .editor, :host([invalid]) .editor {
+  border-color: var(--fx-color-danger, #dc2626);
+  box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
+}
+:host([success]) .editor, :host([valid]) .editor {
+  border-color: var(--fx-color-success, #16a34a);
+  box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
+}
+:host([disabled]) { opacity: 0.55; pointer-events: none; }
+:host([readonly]) .toolbar { display: none; }
+
+.toolbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1px;
+  padding: var(--fx-space-xs);
+  background: var(--fx-editor-toolbar-bg);
+  border-bottom: 1px solid var(--fx-border-default);
+  user-select: none;
+}
+.toolbar[hidden] { display: none; }
+.tb-group {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  padding: 0 var(--fx-space-xs);
+  border-right: 1px solid var(--fx-border-default);
+}
+.tb-group:last-child { border-right: none; }
+.tb-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  border-radius: var(--fx-radius-sm);
+  background: transparent;
+  color: var(--fx-text-default);
+  font-size: 19px;
+  cursor: pointer;
+  transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);
+}
+.tb-btn:hover { background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.06)); }
+.tb-btn:focus-visible { outline: 2px solid var(--fx-color-primary); outline-offset: -2px; }
+.tb-btn.active {
+  background: color-mix(in srgb, var(--fx-color-primary) 14%, transparent);
+  color: var(--fx-color-primary);
+}
+.tb-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.tb-select {
+  height: 30px;
+  padding: 0 var(--fx-space-xs);
+  border: 1px solid var(--fx-border-default);
+  border-radius: var(--fx-radius-sm);
+  background: var(--fx-surface-background);
+  color: var(--fx-text-default);
+  font-family: inherit;
+  font-size: calc(var(--fx-font-size) - 2px);
+  cursor: pointer;
+}
+.tb-color {
+  width: 30px;
+  height: 30px;
+  padding: 2px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+.tb-color input { width: 26px; height: 26px; padding: 0; border: none; background: none; cursor: pointer; }
+.body { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; }
+.content {
+  position: relative;
+  min-height: var(--fx-editor-min-height);
+  max-height: var(--fx-editor-max-height);
+  overflow: auto;
+  padding: var(--fx-editor-content-padding);
+  outline: none;
+  box-sizing: border-box;
+}
+.content[hidden] { display: none; }
+.content.is-empty::before {
+  content: attr(data-placeholder);
+  color: var(--fx-text-muted);
+  pointer-events: none;
+  position: absolute;
+}
+.content[contenteditable="false"] { background: var(--fx-surface-surface-hover, rgba(0,0,0,.02)); }
+.content figure.fx-image { touch-action: none; }
+
+.media-overlay {
+  position: absolute;
+  z-index: 5;
+  pointer-events: none;
+  border: 1px solid var(--fx-color-primary);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-color-primary) 30%, transparent);
+}
+.media-overlay[hidden] { display: none; }
+.media-handle {
+  position: absolute;
+  width: 11px;
+  height: 11px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  background: var(--fx-color-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+  pointer-events: auto;
+  touch-action: none;
+}
+.media-handle.nw { left: -6px; top: -6px; cursor: nwse-resize; }
+.media-handle.ne { right: -6px; top: -6px; cursor: nesw-resize; }
+.media-handle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
+.media-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
+.media-size {
+  position: absolute;
+  top: -24px;
+  left: 0;
+  padding: 2px 6px;
+  border-radius: var(--fx-radius-sm);
+  background: var(--fx-color-primary);
+  color: #fff;
+  font-size: 11px;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+.media-delete {
+  position: absolute;
+  top: -32px;
+  right: -1px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--fx-color-danger, #dc2626);
+  color: #fff;
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+}
+.media-delete:hover { filter: brightness(0.92); }
+.media-delete:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
+
+.content figure.fx-image,
+.content figure.fx-video,
+.content figure.fx-embed { position: relative; }
+.fx-media-quick {
+  position: absolute;
+  top: 6px;
+  z-index: 4;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--fx-color-primary) 35%, transparent);
+  border-radius: var(--fx-radius-sm);
+  background: var(--fx-surface-background);
+  color: var(--fx-text-default);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--fx-motion-duration-fast) var(--fx-motion-easing), background var(--fx-motion-duration-fast) var(--fx-motion-easing);
+}
+.content figure:hover > .fx-media-quick,
+.content figure:focus-within > .fx-media-quick { opacity: 1; }
+.content figure.fx-video > .fx-media-quick,
+.content figure.fx-embed > .fx-media-quick { opacity: 0.92; }
+.fx-media-quick:hover { background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.06)); }
+.fx-media-quick.active { background: var(--fx-color-primary); color: #fff; }
+.fx-media-quick.quick-left { right: 82px; }
+.fx-media-quick.quick-center { right: 56px; }
+.fx-media-quick.quick-right { right: 30px; }
+.fx-media-quick.quick-delete { right: 4px; background: var(--fx-color-danger, #dc2626); color: #fff; border-color: transparent; }
+.fx-media-quick:focus-visible { outline: 2px solid var(--fx-color-primary); outline-offset: 1px; }
+
+.link-overlay {
+  position: absolute;
+  z-index: 6;
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  background: var(--fx-surface-background);
+  border: 1px solid var(--fx-border-default);
+  border-radius: var(--fx-radius-sm);
+  box-shadow: var(--fx-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.16));
+}
+.link-overlay[hidden] { display: none; }
+.link-overlay button {
+  border: none;
+  background: none;
+  color: var(--fx-text-default);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.4;
+  padding: 4px 8px;
+  border-radius: var(--fx-radius-sm);
+  cursor: pointer;
+}
+.link-overlay button:hover { background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.06)); }
+.link-overlay button[data-link-action="remove"] { color: var(--fx-color-danger, #dc2626); }
+.link-overlay button:focus-visible { outline: 2px solid var(--fx-color-primary); outline-offset: 1px; }
+
+.source {
+  display: block;
+  width: 100%;
+  min-height: var(--fx-editor-min-height);
+  max-height: var(--fx-editor-max-height);
+  padding: var(--fx-editor-content-padding);
+  border: none;
+  outline: none;
+  resize: vertical;
+  background: var(--fx-surface-background);
+  color: var(--fx-text-default);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.55;
+  box-sizing: border-box;
+}
+.source[hidden] { display: none; }
+
+.statusbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--fx-space-sm);
+  min-height: 28px;
+  padding: 2px var(--fx-space-md);
+  border-top: 1px solid var(--fx-border-default);
+  color: var(--fx-text-muted);
+  font-size: calc(var(--fx-font-size) - 3px);
+}
+.statusbar:empty { display: none; }
+.statusbar[hidden] { display: none; }
+.source-actions { display: inline-flex; gap: var(--fx-space-xs); }
+.source-actions[hidden] { display: none; }
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--fx-z-modal, 1100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--fx-text-default, #000) 45%, transparent);
+}
+.backdrop[hidden] { display: none; }
+.dialog {
+  width: min(460px, calc(100vw - 32px));
+  max-height: calc(100vh - 48px);
+  overflow: auto;
+  background: var(--fx-surface-background);
+  border: 1px solid var(--fx-border-default);
+  border-radius: var(--fx-radius-lg);
+  box-shadow: var(--fx-shadow-xl);
+  font-family: var(--fx-font-family);
+  font-size: var(--fx-font-size);
+}
+.dialog header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--fx-space-md) var(--fx-space-lg);
+  border-bottom: 1px solid var(--fx-border-default);
+}
+.dialog h3 { margin: 0; font-size: 1rem; font-weight: 600; }
+.dialog-close {
+  border: none; background: transparent; color: var(--fx-text-muted);
+  font-size: 1.4rem; line-height: 1; cursor: pointer;
+}
+.dialog-body { display: flex; flex-direction: column; gap: var(--fx-space-sm); padding: var(--fx-space-lg); }
+.field { display: flex; flex-direction: column; gap: 3px; font-size: calc(var(--fx-font-size) - 2px); color: var(--fx-text-muted); }
+.field input, .field select {
+  height: var(--fx-size-md);
+  padding: 0 var(--fx-space-sm);
+  border: 1px solid var(--fx-border-default);
+  border-radius: var(--fx-radius-sm);
+  background: var(--fx-surface-background);
+  color: var(--fx-text-default);
+  font: inherit;
+  font-size: var(--fx-font-size);
+}
+.field input:focus, .field select:focus { outline: none; border-color: var(--fx-color-primary); box-shadow: var(--fx-effect-focus-ring, none); }
+.dialog footer {
+  display: flex; justify-content: flex-end; gap: var(--fx-space-sm);
+  padding: var(--fx-space-md) var(--fx-space-lg);
+  border-top: 1px solid var(--fx-border-default);
+}
+.btn {
+  min-height: var(--fx-size-sm);
+  padding: 0 var(--fx-space-md);
+  border: 1px solid var(--fx-border-default);
+  border-radius: var(--fx-radius-sm);
+  background: var(--fx-surface-background);
+  color: var(--fx-text-default);
+  font: inherit; font-size: calc(var(--fx-font-size) - 2px);
+  cursor: pointer;
+}
+.btn:hover { background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }
+.btn.primary { background: var(--fx-color-primary); border-color: transparent; color: #fff; }
+.btn.primary:hover { filter: brightness(0.92); }
+
+.panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: var(--fx-space-md);
+  z-index: 6;
+  padding: var(--fx-space-sm);
+  background: var(--fx-surface-background);
+  border: 1px solid var(--fx-border-default);
+  border-radius: var(--fx-radius-md);
+  box-shadow: var(--fx-shadow-lg);
+}
+.panel[hidden] { display: none; }
+.grid-picker { display: grid; grid-template-columns: repeat(8, 18px); gap: 3px; }
+.grid-picker button {
+  width: 18px; height: 18px; padding: 0;
+  border: 1px solid var(--fx-border-default);
+  border-radius: 2px; background: var(--fx-surface-background); cursor: pointer;
+}
+.grid-picker button.on { background: var(--fx-color-primary); border-color: var(--fx-color-primary); }
+.panel-title { margin: 0 0 6px; font-size: 11px; color: var(--fx-text-muted); }
+.panel-actions { display: flex; flex-wrap: wrap; gap: 4px; max-width: 210px; }
+.panel-actions .btn { min-height: 26px; padding: 0 6px; font-size: 11px; }
+
+:host([fullscreen]) {
+  position: fixed;
+  inset: 0;
+  z-index: var(--fx-z-modal, 1100);
+  background: var(--fx-surface-background);
+}
+:host([fullscreen]) .editor { height: 100%; border: none; border-radius: 0; }
+:host([fullscreen]) .content, :host([fullscreen]) .source { flex: 1 1 auto; max-height: none; }
+
+@media (max-width: 640px) {
+  .toolbar { gap: 0; }
+  .tb-group { padding: 0 1px; }
+  .tb-btn { width: 28px; height: 28px; }
+}
+${FX_EDITOR_CONTENT_CSS}
+
+
+`;
+export {
+  EDITOR_STYLES,
+  FX_EDITOR_CONTENT_CSS
+};
+//# sourceMappingURL=styles.js.map

package/dist/components/editor/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/editor/styles.ts"],"sourcesContent":["/**\n * Estilos do <fx-editor>.\n *\n * Tudo isolado no Shadow DOM. A parte de conteúdo também é exportada em\n * `FX_EDITOR_CONTENT_CSS` para quem salva o HTML e precisa renderizá-lo fora\n * do componente.\n */\n\nexport const FX_EDITOR_CONTENT_CSS = `\n.content { line-height: 1.55; color: var(--fx-text-default); }\n.content p { margin: 0 0 0.65em; }\n.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {\n  margin: 0.8em 0 0.4em; line-height: 1.25; font-weight: 600; color: var(--fx-text-default);\n}\n.content h1 { font-size: 1.8em; }\n.content h2 { font-size: 1.5em; }\n.content h3 { font-size: 1.25em; }\n.content h4 { font-size: 1.1em; }\n.content h5, .content h6 { font-size: 1em; }\n.content ul, .content ol { margin: 0 0 0.65em; padding-left: 1.6em; }\n.content li { margin: 0.15em 0; }\n.content blockquote {\n  margin: 0.5em 0; padding: 0.25em 0 0.25em 1em;\n  border-left: 3px solid var(--fx-color-primary); color: var(--fx-text-muted);\n}\n.content pre {\n  margin: 0.6em 0; padding: var(--fx-space-md); overflow: auto;\n  background: var(--fx-surface-surface); border-radius: var(--fx-radius-sm);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em;\n}\n.content code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 0.92em; background: var(--fx-surface-surface);\n  padding: 0.1em 0.3em; border-radius: 3px;\n}\n.content pre code { background: none; padding: 0; }\n.content hr { border: none; border-top: 1px solid var(--fx-border-default); margin: 1em 0; }\n.content a { color: var(--fx-color-primary); text-decoration: underline; cursor: pointer; }\n.content img { max-width: 100%; height: auto; display: block; }\n.content figure { margin: 1em 0; }\n.content figure.fx-image img { margin: 0 auto; }\n.content figure.fx-image[data-align=\"left\"] { float: left; max-width: 50%; margin: 0 1em 0.5em 0; }\n.content figure.fx-image[data-align=\"right\"] { float: right; max-width: 50%; margin: 0 0 0.5em 1em; }\n.content figure.fx-image[data-align=\"center\"] { margin-left: auto; margin-right: auto; }\n.content figure.fx-video[data-align=\"left\"],\n.content figure.fx-embed[data-align=\"left\"] { float: left; max-width: 50%; margin: 0 1em 0.5em 0; }\n.content figure.fx-video[data-align=\"right\"],\n.content figure.fx-embed[data-align=\"right\"] { float: right; max-width: 50%; margin: 0 0 0.5em 1em; }\n.content figure.fx-video[data-align=\"center\"],\n.content figure.fx-embed[data-align=\"center\"] { margin-left: auto; margin-right: auto; }\n.content figcaption {\n  margin-top: 0.4em; color: var(--fx-text-muted);\n  font-size: 0.85em; text-align: center;\n}\n.content video { display: block; width: 100%; background: #000; border-radius: var(--fx-radius-sm); }\n.content iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }\n.content table { width: 100%; border-collapse: collapse; margin: 1em 0; }\n.content th, .content td { border: 1px solid var(--fx-border-default); padding: var(--fx-space-xs) var(--fx-space-sm); vertical-align: top; }\n.content th { background: var(--fx-surface-surface); text-align: left; font-weight: 600; }\n.content table.fx-grid { border: none; margin: 0.6em 0; }\n.content table.fx-grid > tbody > tr > td {\n  border: 1px dashed var(--fx-border-default); padding: var(--fx-space-sm);\n  vertical-align: top;\n}\n@media (max-width: 640px) {\n  .content table.fx-grid[data-stack] > tbody > tr > td {\n    display: block; width: 100% !important; border: none; padding: var(--fx-space-xs) 0;\n  }\n}\n`;\n\nexport const EDITOR_STYLES = `\n:host {\n  display: block;\n  width: 100%;\n  font-family: var(--fx-font-family);\n  font-size: var(--fx-font-size);\n  color: var(--fx-text-default);\n  --fx-editor-min-height: 240px;\n  --fx-editor-max-height: none;\n  --fx-editor-radius: var(--fx-radius-md);\n  --fx-editor-toolbar-bg: var(--fx-surface-surface);\n  --fx-editor-content-padding: var(--fx-space-md) var(--fx-space-lg);\n}\n:host([full]) { width: 100%; }\n.editor {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--fx-surface-background);\n  border: 1px solid var(--fx-border-default);\n  border-radius: var(--fx-editor-radius);\n  transition: border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n    box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n}\n.editor:focus-within {\n  border-color: var(--fx-color-primary);\n  box-shadow: var(--fx-effect-focus-ring, none);\n}\n:host([error]) .editor, :host([invalid]) .editor {\n  border-color: var(--fx-color-danger, #dc2626);\n  box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n}\n:host([success]) .editor, :host([valid]) .editor {\n  border-color: var(--fx-color-success, #16a34a);\n  box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n}\n:host([disabled]) { opacity: 0.55; pointer-events: none; }\n:host([readonly]) .toolbar { display: none; }\n\n.toolbar {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 1px;\n  padding: var(--fx-space-xs);\n  background: var(--fx-editor-toolbar-bg);\n  border-bottom: 1px solid var(--fx-border-default);\n  user-select: none;\n}\n.toolbar[hidden] { display: none; }\n.tb-group {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n  padding: 0 var(--fx-space-xs);\n  border-right: 1px solid var(--fx-border-default);\n}\n.tb-group:last-child { border-right: none; }\n.tb-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  padding: 0;\n  border: none;\n  border-radius: var(--fx-radius-sm);\n  background: transparent;\n  color: var(--fx-text-default);\n  font-size: 19px;\n  cursor: pointer;\n  transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n}\n.tb-btn:hover { background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.06)); }\n.tb-btn:focus-visible { outline: 2px solid var(--fx-color-primary); outline-offset: -2px; }\n.tb-btn.active {\n  background: color-mix(in srgb, var(--fx-color-primary) 14%, transparent);\n  color: var(--fx-color-primary);\n}\n.tb-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n.tb-select {\n  height: 30px;\n  padding: 0 var(--fx-space-xs);\n  border: 1px solid var(--fx-border-default);\n  border-radius: var(--fx-radius-sm);\n  background: var(--fx-surface-background);\n  color: var(--fx-text-default);\n  font-family: inherit;\n  font-size: calc(var(--fx-font-size) - 2px);\n  cursor: pointer;\n}\n.tb-color {\n  width: 30px;\n  height: 30px;\n  padding: 2px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n}\n.tb-color input { width: 26px; height: 26px; padding: 0; border: none; background: none; cursor: pointer; }\n.body { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; }\n.content {\n  position: relative;\n  min-height: var(--fx-editor-min-height);\n  max-height: var(--fx-editor-max-height);\n  overflow: auto;\n  padding: var(--fx-editor-content-padding);\n  outline: none;\n  box-sizing: border-box;\n}\n.content[hidden] { display: none; }\n.content.is-empty::before {\n  content: attr(data-placeholder);\n  color: var(--fx-text-muted);\n  pointer-events: none;\n  position: absolute;\n}\n.content[contenteditable=\"false\"] { background: var(--fx-surface-surface-hover, rgba(0,0,0,.02)); }\n.content figure.fx-image { touch-action: none; }\n\n.media-overlay {\n  position: absolute;\n  z-index: 5;\n  pointer-events: none;\n  border: 1px solid var(--fx-color-primary);\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-color-primary) 30%, transparent);\n}\n.media-overlay[hidden] { display: none; }\n.media-handle {\n  position: absolute;\n  width: 11px;\n  height: 11px;\n  border: 1px solid #fff;\n  border-radius: 50%;\n  background: var(--fx-color-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);\n  pointer-events: auto;\n  touch-action: none;\n}\n.media-handle.nw { left: -6px; top: -6px; cursor: nwse-resize; }\n.media-handle.ne { right: -6px; top: -6px; cursor: nesw-resize; }\n.media-handle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }\n.media-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }\n.media-size {\n  position: absolute;\n  top: -24px;\n  left: 0;\n  padding: 2px 6px;\n  border-radius: var(--fx-radius-sm);\n  background: var(--fx-color-primary);\n  color: #fff;\n  font-size: 11px;\n  line-height: 1.4;\n  white-space: nowrap;\n}\n.media-delete {\n  position: absolute;\n  top: -32px;\n  right: -1px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: var(--fx-color-danger, #dc2626);\n  color: #fff;\n  font-size: 15px;\n  line-height: 1;\n  cursor: pointer;\n  pointer-events: auto;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);\n}\n.media-delete:hover { filter: brightness(0.92); }\n.media-delete:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }\n\n.content figure.fx-image,\n.content figure.fx-video,\n.content figure.fx-embed { position: relative; }\n.fx-media-quick {\n  position: absolute;\n  top: 6px;\n  z-index: 4;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: 1px solid color-mix(in srgb, var(--fx-color-primary) 35%, transparent);\n  border-radius: var(--fx-radius-sm);\n  background: var(--fx-surface-background);\n  color: var(--fx-text-default);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--fx-motion-duration-fast) var(--fx-motion-easing), background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n}\n.content figure:hover > .fx-media-quick,\n.content figure:focus-within > .fx-media-quick { opacity: 1; }\n.content figure.fx-video > .fx-media-quick,\n.content figure.fx-embed > .fx-media-quick { opacity: 0.92; }\n.fx-media-quick:hover { background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.06)); }\n.fx-media-quick.active { background: var(--fx-color-primary); color: #fff; }\n.fx-media-quick.quick-left { right: 82px; }\n.fx-media-quick.quick-center { right: 56px; }\n.fx-media-quick.quick-right { right: 30px; }\n.fx-media-quick.quick-delete { right: 4px; background: var(--fx-color-danger, #dc2626); color: #fff; border-color: transparent; }\n.fx-media-quick:focus-visible { outline: 2px solid var(--fx-color-primary); outline-offset: 1px; }\n\n.link-overlay {\n  position: absolute;\n  z-index: 6;\n  display: flex;\n  gap: 2px;\n  padding: 3px;\n  background: var(--fx-surface-background);\n  border: 1px solid var(--fx-border-default);\n  border-radius: var(--fx-radius-sm);\n  box-shadow: var(--fx-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.16));\n}\n.link-overlay[hidden] { display: none; }\n.link-overlay button {\n  border: none;\n  background: none;\n  color: var(--fx-text-default);\n  font: inherit;\n  font-size: 12px;\n  line-height: 1.4;\n  padding: 4px 8px;\n  border-radius: var(--fx-radius-sm);\n  cursor: pointer;\n}\n.link-overlay button:hover { background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.06)); }\n.link-overlay button[data-link-action=\"remove\"] { color: var(--fx-color-danger, #dc2626); }\n.link-overlay button:focus-visible { outline: 2px solid var(--fx-color-primary); outline-offset: 1px; }\n\n.source {\n  display: block;\n  width: 100%;\n  min-height: var(--fx-editor-min-height);\n  max-height: var(--fx-editor-max-height);\n  padding: var(--fx-editor-content-padding);\n  border: none;\n  outline: none;\n  resize: vertical;\n  background: var(--fx-surface-background);\n  color: var(--fx-text-default);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 13px;\n  line-height: 1.55;\n  box-sizing: border-box;\n}\n.source[hidden] { display: none; }\n\n.statusbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--fx-space-sm);\n  min-height: 28px;\n  padding: 2px var(--fx-space-md);\n  border-top: 1px solid var(--fx-border-default);\n  color: var(--fx-text-muted);\n  font-size: calc(var(--fx-font-size) - 3px);\n}\n.statusbar:empty { display: none; }\n.statusbar[hidden] { display: none; }\n.source-actions { display: inline-flex; gap: var(--fx-space-xs); }\n.source-actions[hidden] { display: none; }\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: var(--fx-z-modal, 1100);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--fx-text-default, #000) 45%, transparent);\n}\n.backdrop[hidden] { display: none; }\n.dialog {\n  width: min(460px, calc(100vw - 32px));\n  max-height: calc(100vh - 48px);\n  overflow: auto;\n  background: var(--fx-surface-background);\n  border: 1px solid var(--fx-border-default);\n  border-radius: var(--fx-radius-lg);\n  box-shadow: var(--fx-shadow-xl);\n  font-family: var(--fx-font-family);\n  font-size: var(--fx-font-size);\n}\n.dialog header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--fx-space-md) var(--fx-space-lg);\n  border-bottom: 1px solid var(--fx-border-default);\n}\n.dialog h3 { margin: 0; font-size: 1rem; font-weight: 600; }\n.dialog-close {\n  border: none; background: transparent; color: var(--fx-text-muted);\n  font-size: 1.4rem; line-height: 1; cursor: pointer;\n}\n.dialog-body { display: flex; flex-direction: column; gap: var(--fx-space-sm); padding: var(--fx-space-lg); }\n.field { display: flex; flex-direction: column; gap: 3px; font-size: calc(var(--fx-font-size) - 2px); color: var(--fx-text-muted); }\n.field input, .field select {\n  height: var(--fx-size-md);\n  padding: 0 var(--fx-space-sm);\n  border: 1px solid var(--fx-border-default);\n  border-radius: var(--fx-radius-sm);\n  background: var(--fx-surface-background);\n  color: var(--fx-text-default);\n  font: inherit;\n  font-size: var(--fx-font-size);\n}\n.field input:focus, .field select:focus { outline: none; border-color: var(--fx-color-primary); box-shadow: var(--fx-effect-focus-ring, none); }\n.dialog footer {\n  display: flex; justify-content: flex-end; gap: var(--fx-space-sm);\n  padding: var(--fx-space-md) var(--fx-space-lg);\n  border-top: 1px solid var(--fx-border-default);\n}\n.btn {\n  min-height: var(--fx-size-sm);\n  padding: 0 var(--fx-space-md);\n  border: 1px solid var(--fx-border-default);\n  border-radius: var(--fx-radius-sm);\n  background: var(--fx-surface-background);\n  color: var(--fx-text-default);\n  font: inherit; font-size: calc(var(--fx-font-size) - 2px);\n  cursor: pointer;\n}\n.btn:hover { background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }\n.btn.primary { background: var(--fx-color-primary); border-color: transparent; color: #fff; }\n.btn.primary:hover { filter: brightness(0.92); }\n\n.panel {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: var(--fx-space-md);\n  z-index: 6;\n  padding: var(--fx-space-sm);\n  background: var(--fx-surface-background);\n  border: 1px solid var(--fx-border-default);\n  border-radius: var(--fx-radius-md);\n  box-shadow: var(--fx-shadow-lg);\n}\n.panel[hidden] { display: none; }\n.grid-picker { display: grid; grid-template-columns: repeat(8, 18px); gap: 3px; }\n.grid-picker button {\n  width: 18px; height: 18px; padding: 0;\n  border: 1px solid var(--fx-border-default);\n  border-radius: 2px; background: var(--fx-surface-background); cursor: pointer;\n}\n.grid-picker button.on { background: var(--fx-color-primary); border-color: var(--fx-color-primary); }\n.panel-title { margin: 0 0 6px; font-size: 11px; color: var(--fx-text-muted); }\n.panel-actions { display: flex; flex-wrap: wrap; gap: 4px; max-width: 210px; }\n.panel-actions .btn { min-height: 26px; padding: 0 6px; font-size: 11px; }\n\n:host([fullscreen]) {\n  position: fixed;\n  inset: 0;\n  z-index: var(--fx-z-modal, 1100);\n  background: var(--fx-surface-background);\n}\n:host([fullscreen]) .editor { height: 100%; border: none; border-radius: 0; }\n:host([fullscreen]) .content, :host([fullscreen]) .source { flex: 1 1 auto; max-height: none; }\n\n@media (max-width: 640px) {\n  .toolbar { gap: 0; }\n  .tb-group { padding: 0 1px; }\n  .tb-btn { width: 28px; height: 28px; }\n}\n${FX_EDITOR_CONTENT_CSS}\n\n\n`;\n"],"names":[],"mappings":"AAQO,MAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+D9B,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuX3B,qBAAqB;AAAA;AAAA;AAAA;"}

package/dist/components/editor/table-utils.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Utilitários de tabela do <fx-editor>.
+ *
+ * O editor usa `td/th` com colspan/rowspan; para mesclar/dividir células
+ * precisamos de uma matriz lógica que considere os spans. Este módulo é puro
+ * (recebe a tabela e o Range) para poder ser testado sem o componente.
+ */
+export interface TableCellPosition {
+    row: number;
+    col: number;
+}
+export interface TableMatrix {
+    rows: HTMLTableRowElement[];
+    matrix: Array<Array<HTMLTableCellElement | null>>;
+}
+/** Constrói a matriz lógica da tabela respeitando colspan/rowspan. */
+export declare function tableMatrix(table: HTMLTableElement): TableMatrix;
+/** Posição lógica (primeira célula da matriz) de uma célula. */
+export declare function cellPosition(table: HTMLTableElement, cell: HTMLTableCellElement): TableCellPosition | null;
+/** Células tocadas pela seleção atual. */
+export declare function selectedCells(table: HTMLTableElement, range: Range): HTMLTableCellElement[];
+/**
+ * Mescla as células selecionadas em uma única célula retangular.
+ * Retorna a célula mesclada ou null quando a seleção não forma um retângulo
+ * simples (spans que saem da área, seleção em uma única célula etc.).
+ */
+export declare function mergeSelectedCells(table: HTMLTableElement, range: Range): HTMLTableCellElement | null;
+/**
+ * Divide uma célula mesclada.
+ * Retorna as células criadas (sem a original) ou [] se não havia merge.
+ */
+export declare function splitCell(table: HTMLTableElement, cell: HTMLTableCellElement): HTMLTableCellElement[];
+//# sourceMappingURL=table-utils.d.ts.map

package/dist/components/editor/table-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-utils.d.ts","sourceRoot":"","sources":["../../../src/components/editor/table-utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,oBAAoB,GAAG,IAAI,CAAC,CAAC,CAAC;CACnD;AAED,sEAAsE;AACtE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,WAAW,CA0BhE;AAED,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,oBAAoB,GAAG,iBAAiB,GAAG,IAAI,CAQ1G;AAED,0CAA0C;AAC1C,wBAAgB,aAAa,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,GAAG,oBAAoB,EAAE,CAQ3F;AASD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,gBAAgB,EACvB,KAAK,EAAE,KAAK,GACX,oBAAoB,GAAG,IAAI,CAsD7B;AA8BD;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,CA6CrG"}

package/dist/components/editor/table-utils.js

@@ -0,0 +1,150 @@
+function tableMatrix(table) {
+  const rows = Array.from(table.rows);
+  const matrix = rows.map(() => []);
+  for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+    const row = rows[rowIndex];
+    for (const cell of Array.from(row.cells)) {
+      let col = 0;
+      while (matrix[rowIndex][col]) col++;
+      const rowspan = Math.max(1, Math.min(cell.rowSpan || 1, rows.length - rowIndex));
+      const colspan = Math.max(1, cell.colSpan || 1);
+      for (let r = rowIndex; r < rowIndex + rowspan; r++) {
+        if (!matrix[r]) matrix[r] = [];
+        for (let c = col; c < col + colspan; c++) matrix[r][c] = cell;
+      }
+    }
+  }
+  const width = matrix.reduce((max, row) => Math.max(max, row.length), 0);
+  for (const row of matrix) {
+    while (row.length < width) row.push(null);
+  }
+  return { rows, matrix };
+}
+function cellPosition(table, cell) {
+  const { matrix } = tableMatrix(table);
+  for (let row = 0; row < matrix.length; row++) {
+    for (let col = 0; col < matrix[row].length; col++) {
+      if (matrix[row][col] === cell) return { row, col };
+    }
+  }
+  return null;
+}
+function selectedCells(table, range) {
+  return Array.from(table.querySelectorAll("td,th")).filter((cell) => {
+    try {
+      return range.intersectsNode(cell);
+    } catch {
+      return false;
+    }
+  });
+}
+function copyCellAttributes(from, to) {
+  for (const attr of Array.from(from.attributes)) {
+    if (attr.name === "colspan" || attr.name === "rowspan") continue;
+    to.setAttribute(attr.name, attr.value);
+  }
+}
+function mergeSelectedCells(table, range) {
+  const cells = selectedCells(table, range);
+  if (cells.length < 2) return null;
+  const { matrix } = tableMatrix(table);
+  const positions = cells.map((cell) => ({ cell, position: cellPosition(table, cell) })).filter((item) => Boolean(item.position));
+  if (positions.length !== cells.length) return null;
+  const minRow = Math.min(...positions.map((item) => item.position.row));
+  const maxRow = Math.max(...positions.map((item) => item.position.row));
+  const minCol = Math.min(...positions.map((item) => item.position.col));
+  const maxCol = Math.max(...positions.map((item) => item.position.col));
+  for (const { cell, position } of positions) {
+    if (position.row < minRow || position.col < minCol) return null;
+    if (position.row + Math.max(1, cell.rowSpan || 1) - 1 > maxRow) return null;
+    if (position.col + Math.max(1, cell.colSpan || 1) - 1 > maxCol) return null;
+  }
+  const selected = new Set(cells);
+  for (let row = minRow; row <= maxRow; row++) {
+    for (let col = minCol; col <= maxCol; col++) {
+      const cell = matrix[row]?.[col];
+      if (!cell || !selected.has(cell)) return null;
+    }
+  }
+  const anchor = matrix[minRow]?.[minCol];
+  if (!anchor) return null;
+  const tag = cells.every((cell) => cell.tagName.toLowerCase() === "th") ? "th" : "td";
+  const merged = document.createElement(tag);
+  copyCellAttributes(anchor, merged);
+  if (tag === "td") merged.removeAttribute("scope");
+  merged.colSpan = maxCol - minCol + 1;
+  merged.rowSpan = maxRow - minRow + 1;
+  if (merged.colSpan === 1) merged.removeAttribute("colspan");
+  if (merged.rowSpan === 1) merged.removeAttribute("rowspan");
+  for (const cell of cells) {
+    while (cell.firstChild) merged.appendChild(cell.firstChild);
+  }
+  anchor.replaceWith(merged);
+  for (const cell of cells) {
+    if (cell !== anchor && cell.parentNode) cell.remove();
+  }
+  return merged;
+}
+function insertCellAtColumn(table, row, col, cell) {
+  const rowIndex = Array.from(table.rows).indexOf(row);
+  const { matrix } = tableMatrix(table);
+  let before = null;
+  for (const existing of Array.from(row.cells)) {
+    let start = -1;
+    for (let c = 0; c < (matrix[rowIndex]?.length ?? 0); c++) {
+      if (matrix[rowIndex][c] === existing) {
+        start = c;
+        break;
+      }
+    }
+    if (start >= col) {
+      before = existing;
+      break;
+    }
+  }
+  row.insertBefore(cell, before);
+}
+function splitCell(table, cell) {
+  const colspan = Math.max(1, cell.colSpan || 1);
+  const rowspan = Math.max(1, cell.rowSpan || 1);
+  if (colspan === 1 && rowspan === 1) return [];
+  const position = cellPosition(table, cell);
+  if (!position) return [];
+  const rows = Array.from(table.rows);
+  const makeCell = () => {
+    const next = document.createElement(cell.tagName.toLowerCase());
+    if (next.tagName.toLowerCase() === "th") {
+      next.setAttribute("scope", cell.getAttribute("scope") ?? "col");
+    }
+    next.innerHTML = "<p><br></p>";
+    return next;
+  };
+  const created = [];
+  let last = cell;
+  for (let index = 1; index < colspan; index++) {
+    const next = makeCell();
+    last.after(next);
+    last = next;
+    created.push(next);
+  }
+  cell.removeAttribute("colspan");
+  cell.removeAttribute("rowspan");
+  for (let index = 1; index < rowspan; index++) {
+    const row = rows[position.row + index];
+    if (!row) break;
+    for (let offset = 0; offset < colspan; offset++) {
+      const next = makeCell();
+      insertCellAtColumn(table, row, position.col + offset, next);
+      created.push(next);
+    }
+  }
+  return created;
+}
+export {
+  cellPosition,
+  mergeSelectedCells,
+  selectedCells,
+  splitCell,
+  tableMatrix
+};
+//# sourceMappingURL=table-utils.js.map