velo-text 1.0.0-beta.1

package/themes/editor-columns.css

@@ -0,0 +1,121 @@
+/* Column layouts + nested images in cells/slots */
+.pde-columns {
+  display: flex;
+  align-items: stretch;
+  margin: 1.1em 0;
+  width: 100%;
+  box-sizing: border-box;
+  gap: 12px;
+}
+.pde-column {
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  border: 1px dashed var(--pde-color-border, #d8dce3);
+  border-radius: var(--pde-radius-sm);
+  min-height: 2.4em;
+}
+.pde-column > p { margin: 0.2em 0; }
+.pde-editor td figure.pde-image-block,
+.pde-column figure.pde-image-block { max-width: 100%; }
+.pde-editor td figure.pde-image-block img,
+.pde-column figure.pde-image-block img { max-width: 100%; height: auto; }
+.pde-columns-btn {
+  position: absolute;
+  z-index: 28;
+  width: 26px;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--pde-color-border);
+  background: var(--pde-color-surface);
+  border-radius: var(--pde-radius-sm);
+  cursor: pointer;
+  padding: 0;
+  color: var(--pde-color-muted);
+}
+.pde-columns-menu { min-width: 220px; max-height: 360px; overflow: auto; }
+.pde-menu-title {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 6px 10px 2px;
+  color: var(--pde-color-muted);
+}
+.pde-preset-bars {
+  display: inline-flex;
+  gap: 2px;
+  width: 48px;
+  height: 12px;
+}
+.pde-preset-bars i {
+  display: block;
+  background: var(--pde-color-primary);
+  border-radius: 1px;
+  opacity: 0.7;
+}
+
+.pde-size-picker {
+  position: fixed;
+  z-index: 200;
+  min-width: 140px;
+  padding: 8px 10px 6px;
+  background: var(--pde-color-surface, #1c1f24);
+  color: var(--pde-color-text, #f4f6f8);
+  border: 1px solid var(--pde-color-border, #3a4048);
+  border-radius: var(--pde-radius-sm, 6px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
+  font: 12px/1.3 var(--pde-font-ui, system-ui, sans-serif);
+}
+.pde-size-picker-label {
+  font-size: 12px;
+  font-weight: 600;
+  margin: 0 0 6px;
+  color: var(--pde-color-text);
+}
+.pde-size-picker-grid {
+  display: grid;
+  gap: 3px;
+}
+.pde-size-cell {
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid var(--pde-color-border, #5b6370);
+  background: transparent;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.pde-size-cell.is-on {
+  border-color: var(--pde-color-primary, #6ea8ff);
+  background: var(--pde-color-selection, rgba(110, 168, 255, 0.25));
+}
+.pde-size-picker-foot,
+.pde-mosaic-preset {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  margin-top: 6px;
+  padding: 6px 4px;
+  border: 0;
+  border-top: 1px solid var(--pde-color-border, #3a4048);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+.pde-mosaic-preset { border-top: 0; }
+.pde-mosaic-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin: 4px 0;
+}
+.pde-mosaic-row > span {
+  width: 22px;
+  font-size: 11px;
+  color: var(--pde-color-muted);
+}
+

package/themes/editor-overlays.css

@@ -0,0 +1,464 @@
+/* Block handle + menu */
+.pde-block-handle {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border-radius: var(--pde-radius-sm);
+  background: var(--pde-color-surface);
+  border: 1px solid var(--pde-color-border);
+  z-index: 1;
+  opacity: 1;
+  transform: translateX(calc(-100% - 2px));
+}
+.pde-handle-grip, .pde-handle-plus {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--pde-color-muted);
+}
+.pde-handle-grip:hover, .pde-handle-plus:hover {
+  background: var(--pde-color-selection);
+  color: var(--pde-color-primary);
+}
+.pde-block-menu {
+  position: absolute;
+  z-index: 40;
+  min-width: 170px;
+  background: var(--pde-color-surface);
+  border: 1px solid var(--pde-color-border);
+  border-radius: var(--pde-radius-md);
+  box-shadow: var(--pde-shadow-panel);
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+}
+.pde-block-menu button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border: none;
+  background: none;
+  color: var(--pde-color-text);
+  font-size: 13px;
+  border-radius: var(--pde-radius-sm);
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+}
+.pde-block-menu button:hover { background: var(--pde-color-selection); }
+.pde-block-menu .pde-icon { color: var(--pde-color-muted); }
+
+/* Image resize */
+.pde-image-resize {
+  position: absolute;
+  z-index: 25;
+  border: 2px solid var(--pde-color-primary);
+  border-radius: 4px;
+  pointer-events: none;
+}
+.pde-img-handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: var(--pde-color-primary);
+  border: 1px solid #fff;
+  border-radius: 3px;
+  pointer-events: all;
+  cursor: nwse-resize;
+}
+.pde-img-handle.nw { left: -5px; top: -5px; }
+.pde-img-handle.se { right: -5px; bottom: -5px; }
+
+/* Table column/row resize + menu */
+.pde-table-resize { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
+.pde-col-handle, .pde-row-handle {
+  position: absolute;
+  background: var(--pde-color-primary);
+  opacity: 0;
+  border-radius: 3px;
+  pointer-events: all;
+  z-index: 26;
+}
+.pde-col-handle {
+  width: 8px;
+  cursor: col-resize;
+}
+.pde-row-handle {
+  height: 8px;
+  cursor: row-resize;
+}
+.pde-col-handle:hover, .pde-row-handle:hover, .pde-gutter-handle:hover { opacity: 0.75; }
+.pde-column-gutters { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
+.pde-gutter-handle {
+  position: absolute;
+  width: 8px;
+  background: var(--pde-color-primary);
+  opacity: 0;
+  border-radius: 3px;
+  pointer-events: all;
+  z-index: 26;
+  cursor: col-resize;
+}
+.pde-table-btn {
+  position: absolute;
+  z-index: 28;
+  width: 26px;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--pde-color-border);
+  background: var(--pde-color-surface);
+  border-radius: var(--pde-radius-sm);
+  cursor: pointer;
+  color: var(--pde-color-muted);
+  padding: 0;
+}
+.pde-table-btn:hover { color: var(--pde-color-primary); background: var(--pde-color-selection); }
+.pde-table-menu { min-width: 200px; }
+
+/* Toolbar */
+.pde-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 8px;
+  margin: 0 auto 16px;
+  max-width: 860px;
+  background: var(--pde-color-surface);
+  border: 1px solid var(--pde-color-border);
+  border-radius: var(--pde-radius-md);
+  box-shadow: var(--pde-shadow-panel);
+}
+.pde-toolbar-group {
+  display: flex;
+  gap: 2px;
+  padding: 0 6px;
+  border-right: 1px solid var(--pde-color-border);
+}
+.pde-toolbar-group:last-child { border-right: none; }
+.pde-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: var(--pde-radius-sm);
+  background: none;
+  color: var(--pde-color-text);
+  cursor: pointer;
+}
+.pde-toolbar button:hover { background: var(--pde-color-selection); }
+.pde-toolbar button[aria-pressed="true"],
+.pde-toolbar button.active { background: var(--pde-color-selection); color: var(--pde-color-primary); }
+.pde-toolbar button:disabled { opacity: 0.4; cursor: default; }
+
+.pde-handle-grip {
+  cursor: grab;
+}
+.pde-dragging .pde-handle-grip {
+  cursor: grabbing;
+}
+
+/* Drag feedback */
+.pde-dragging .pde-editor > * { pointer-events: none; }
+.pde-dragging .pde-editor > table,
+.pde-dragging .pde-editor > .pde-columns { pointer-events: auto; }
+.pde-editor > .pde-drag-source { opacity: 0.45; }
+.pde-editor > .pde-drop-above { box-shadow: 0 -2px 0 var(--pde-color-primary); }
+.pde-editor > .pde-drop-below { box-shadow: 0 2px 0 var(--pde-color-primary); }
+.pde-drop-line {
+  position: absolute;
+  left: 52px;
+  right: 24px;
+  height: 2px;
+  background: var(--pde-color-primary);
+  pointer-events: none;
+  z-index: 30;
+  display: none;
+}
+
+/* Editor wrapper + UI layer (overlays live OUTSIDE the contenteditable) */
+.pde-editor-wrapper { position: relative; }
+.pde-ui-layer { pointer-events: none; }
+.pde-ui-layer .pde-block-handle,
+.pde-ui-layer .pde-block-menu,
+.pde-ui-layer .pde-img-handle,
+.pde-ui-layer .pde-table-menu,
+.pde-ui-layer .pde-table-btn,
+.pde-ui-layer .pde-col-handle,
+.pde-ui-layer .pde-row-handle,
+.pde-ui-layer .pde-columns-btn,
+.pde-ui-layer .pde-columns-menu,
+.pde-ui-layer .pde-gutter-handle,
+.pde-ui-layer .pde-img-meta { pointer-events: auto; }
+
+.pde-col-handle:focus-visible,
+.pde-row-handle:focus-visible,
+.pde-gutter-handle:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--pde-color-primary);
+  outline-offset: 1px;
+}
+
+.pde-palette, .pde-find, .pde-keys, .pde-sel-bubble, .pde-link-pop, .pde-drop-hint, .pde-drop-msg, .pde-page-diag {
+  pointer-events: auto;
+  position: absolute;
+  z-index: 80;
+  background: var(--pde-color-surface);
+  border: 1px solid var(--pde-color-border);
+  border-radius: var(--pde-radius-md);
+  box-shadow: var(--pde-shadow-panel);
+  color: var(--pde-color-text);
+  font-family: var(--pde-font-ui);
+}
+.pde-palette {
+  left: 50%;
+  top: 24px;
+  transform: translateX(-50%);
+  width: min(420px, calc(100% - 24px));
+  padding: 8px;
+}
+.pde-palette input {
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 6px;
+  padding: 8px;
+  font: inherit;
+}
+.pde-palette [data-list] { max-height: 240px; overflow: auto; display: flex; flex-direction: column; }
+.pde-palette [data-list] button {
+  text-align: left;
+  border: none;
+  background: none;
+  padding: 8px 10px;
+  cursor: pointer;
+  color: inherit;
+  border-radius: var(--pde-radius-sm);
+}
+.pde-palette [data-list] button.is-active,
+.pde-palette [data-list] button:hover { background: var(--pde-color-selection); }
+.pde-sel-bubble {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 4px;
+  max-width: min(100%, 360px);
+}
+.pde-sel-bubble button {
+  min-width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: inherit;
+  border-radius: var(--pde-radius-sm);
+}
+.pde-sel-bubble button .pde-icon { display: block; }
+.pde-sel-bubble button:hover { background: var(--pde-color-selection); }
+.pde-find {
+  right: 12px;
+  top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 6px;
+  align-items: center;
+}
+.pde-find input { width: 120px; padding: 4px; font: inherit; }
+.pde-find-hit { background: #fff59d; color: inherit; }
+.pde-keys { left: 50%; top: 40px; transform: translateX(-50%); padding: 12px 16px; }
+.pde-keys th { text-align: left; padding-right: 16px; font-family: ui-monospace, monospace; }
+.pde-drop-hint, .pde-drop-msg {
+  left: 50%;
+  top: 40%;
+  transform: translate(-50%, -50%);
+  padding: 16px 24px;
+}
+.pde-link-pop, .pde-var-popover { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
+.pde-link-pop input, .pde-var-popover input { font: inherit; padding: 4px; }
+.pde-img-meta {
+  pointer-events: auto;
+  position: absolute;
+  z-index: 80;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 8px;
+  width: max-content;
+  max-width: min(240px, calc(100% - 16px));
+  padding: 6px 8px;
+  font-size: 11px;
+  line-height: 1.3;
+  background: var(--pde-color-surface);
+  border: 1px solid var(--pde-color-border);
+  border-radius: var(--pde-radius-md);
+  box-shadow: var(--pde-shadow-panel);
+  color: var(--pde-color-text);
+  font-family: var(--pde-font-ui);
+}
+.pde-img-meta label {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+  color: var(--pde-color-muted);
+  font-size: 10px;
+}
+.pde-img-meta input {
+  width: 104px;
+  max-width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  font-size: 12px;
+  padding: 3px 6px;
+  border: 1px solid var(--pde-color-border);
+  border-radius: var(--pde-radius-sm);
+  background: transparent;
+  color: inherit;
+}
+.pde-page-preview {
+  background: #d8dde4;
+  padding: 16px 0 28px;
+}
+.pde-page-preview .pde-editor {
+  max-width: var(--pde-page-w, 794px);
+  min-height: var(--pde-page-h, 1123px);
+  margin: 0 auto;
+  padding: var(--pde-m-t, 76px) var(--pde-m-r, 76px) var(--pde-m-b, 76px) var(--pde-m-l, 76px);
+  box-shadow: var(--pde-shadow-panel);
+  outline: none;
+  overflow: visible;
+  background-color: var(--pde-color-bg, #fff);
+  background-image: repeating-linear-gradient(
+    to bottom,
+    var(--pde-color-bg, #fff) 0,
+    var(--pde-color-bg, #fff) var(--pde-page-h, 1123px),
+    #d8dde4 var(--pde-page-h, 1123px),
+    #d8dde4 calc(var(--pde-page-h, 1123px) + var(--pde-page-gap, 24px))
+  );
+}
+.pde-page-preview .pde-editor > figure,
+.pde-page-preview .pde-editor > table,
+.pde-page-preview .pde-editor > [data-node-type="columns"],
+.pde-page-preview .pde-editor > [data-node-type="equation-block"],
+.pde-page-preview .pde-editor > h1,
+.pde-page-preview .pde-editor > h2,
+.pde-page-preview .pde-editor > h3 {
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+.pde-page-diag { left: 12px; bottom: 8px; padding: 6px 10px; font-size: 12px; color: var(--pde-color-danger); }
+.pde-var-preview { margin: 0; font-size: 12px; color: var(--pde-color-muted); }
+
+@media (max-width: 430px) {
+  .pde-toolbar { justify-content: flex-start; flex-wrap: wrap; overflow: visible; }
+  .pde-toolbar-group:nth-child(n+4) { display: none; }
+  .pde-sel-bubble { z-index: 90; }
+}
+
+/* Menus polish */
+.pde-block-menu button {
+  min-height: 30px;
+  font-family: var(--pde-font-ui);
+}
+.pde-block-menu button .pde-icon { color: var(--pde-color-muted); }
+.pde-block-menu button:hover .pde-icon { color: var(--pde-color-primary); }
+.pde-table-menu { min-width: 200px; max-height: min(70vh, 480px); overflow-y: auto; overflow-x: hidden; }
+.pde-submenu-wrap { display: flex; flex-direction: column; }
+.pde-submenu-wrap > button.pde-submenu-trigger { width: 100%; justify-content: flex-start; }
+.pde-submenu-wrap > button.pde-submenu-trigger .pde-icon:last-child { margin-left: auto; }
+.pde-submenu {
+  display: none;
+  flex-direction: column;
+  padding: 2px 0 4px 10px;
+  border-left: 2px solid var(--pde-color-border);
+  margin: 0 6px 4px;
+}
+.pde-submenu:not([hidden]) { display: flex; }
+.pde-menu-danger,
+.pde-menu-danger .pde-icon { color: var(--pde-color-danger); }
+
+/* Tables */
+.pde-editor table.pde-table,
+.pde-editor table {
+  min-width: 240px;
+}
+.pde-editor td, .pde-editor th {
+  min-height: 28px;
+  position: relative;
+}
+.pde-drop-host {
+  outline: 2px dashed var(--pde-color-primary);
+  outline-offset: -2px;
+  background: color-mix(in srgb, var(--pde-color-primary) 12%, transparent);
+}
+.pde-eq-editor {
+  position: absolute;
+  left: 50%;
+  top: 24px;
+  transform: translateX(-50%);
+  z-index: 50;
+  width: min(720px, calc(100% - 24px));
+  background: var(--pde-color-surface);
+  border: 1px solid var(--pde-color-border);
+  border-radius: var(--pde-radius-md);
+  box-shadow: var(--pde-shadow-panel);
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.pde-eq-cats, .pde-eq-snips, .pde-eq-tabs, .pde-eq-foot {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+.pde-eq-cats button, .pde-eq-snip, .pde-eq-tabs button, .pde-eq-foot button {
+  font: inherit;
+  font-size: 12px;
+  padding: 4px 8px;
+  border: 1px solid var(--pde-color-border);
+  border-radius: var(--pde-radius-sm);
+  background: var(--pde-color-bg, transparent);
+  color: inherit;
+  cursor: pointer;
+}
+.pde-eq-snip { font-family: "Cambria Math", "STIX Two Math", serif; min-width: 28px; text-align: center; }
+.pde-eq-cats button.is-on, .pde-eq-tabs button[aria-selected="true"] {
+  border-color: var(--pde-color-primary);
+  color: var(--pde-color-primary);
+}
+.pde-eq-pane { display: none; }
+.pde-eq-pane.is-on { display: block; }
+.pde-eq-preview {
+  min-height: 72px;
+  padding: 16px;
+  text-align: center;
+  font-size: 1.25em;
+}
+.pde-eq-hint { margin: 0; color: var(--pde-color-muted); font-size: 13px; }
+.pde-eq-pane textarea {
+  width: 100%;
+  min-height: 80px;
+  font-family: ui-monospace, monospace;
+  font-size: 13px;
+}
+.pde-eq-keys { margin-left: auto; font-size: 11px; color: var(--pde-color-muted); }
+.pde-eq-keys kbd { font: inherit; }