@bendyline/squisq-editor-react 2.1.0 → 2.3.0

package/src/styles/mermaid-diagram.css

@@ -1,487 +0,0 @@
-/* Lossless Mermaid-fence editor. Mermaid owns syntax/rendering; Squisq owns
- * the same source/maximize/resize chrome used by the ASCII diagram canvas. */
-
-.squisq-wysiwyg-editor pre.squisq-mermaid-fence-hidden {
-  display: none;
-}
-
-.squisq-wysiwyg-editor pre.squisq-mermaid-fence-source {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
-  white-space: pre;
-  overflow-x: auto;
-  line-height: 1.35;
-  tab-size: 2;
-}
-
-.squisq-mermaid-diagram-widget-host {
-  margin: 0.75rem 0 1.25rem;
-}
-
-.squisq-mermaid-canvas {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background: var(--squisq-surface, #ffffff);
-}
-
-.squisq-mermaid-canvas-scroll {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  padding: 44px 24px 24px;
-}
-
-.squisq-mermaid-canvas-scroll[data-panning='true'] {
-  cursor: grabbing;
-  user-select: none;
-}
-
-.squisq-mermaid-svg {
-  position: relative;
-  min-height: 100%;
-  margin: 0 auto;
-  will-change: transform;
-  transition: width 120ms ease;
-}
-
-.squisq-mermaid-svg > div:first-child > svg {
-  display: block;
-  width: 100% !important;
-  height: auto !important;
-  max-width: none !important;
-  margin: 0 auto;
-}
-
-.squisq-mermaid-svg g.node {
-  cursor: pointer;
-}
-
-.squisq-mermaid-svg g.node:focus-visible {
-  outline: none;
-  filter: drop-shadow(0 0 4px #4f46e5);
-}
-
-.squisq-mermaid-svg g.squisq-mermaid-node-selected {
-  filter: drop-shadow(0 0 5px #4f46e5);
-}
-
-.squisq-mermaid-svg g.squisq-mermaid-connect-source {
-  filter: drop-shadow(0 0 6px #0d9488);
-}
-
-.squisq-mermaid-svg .edgePath,
-.squisq-mermaid-svg path.flowchart-link,
-.squisq-mermaid-svg .edgeLabel {
-  cursor: pointer;
-}
-
-.squisq-mermaid-svg path.squisq-mermaid-edge-hit-target {
-  fill: none;
-  stroke: rgba(0, 0, 0, 0.001);
-  stroke-width: 14px;
-  pointer-events: stroke;
-  cursor: pointer;
-}
-
-.squisq-mermaid-svg .squisq-mermaid-edge-selected {
-  filter: drop-shadow(0 0 3px #4f46e5);
-}
-
-/* Mermaid's default lineColor is #333, which is nearly invisible against the
- * editor's dark canvas. Retheme default relationship strokes and arrowheads
- * while leaving explicitly authored edge strokes (linkStyle/style) intact. */
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-svg {
-  --squisq-mermaid-edge: #cbd5e1;
-  --squisq-mermaid-edge-label-bg: rgba(15, 23, 42, 0.88);
-}
-
-.squisq-editor-shell[data-theme='dark']
-  .squisq-mermaid-svg
-  :is(
-    path.flowchart-link,
-    .edgePath .path,
-    .relationshipLine,
-    .messageLine0,
-    .messageLine1,
-    .transition
-  ):not([style*='stroke:']) {
-  stroke: var(--squisq-mermaid-edge) !important;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-svg :is(.marker, .arrowheadPath),
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-svg marker :is(path, polygon) {
-  stroke: var(--squisq-mermaid-edge) !important;
-}
-
-.squisq-editor-shell[data-theme='dark']
-  .squisq-mermaid-svg
-  marker
-  :is(path, polygon):not([fill='none']):not([style*='fill:none']):not([style*='fill: none']) {
-  fill: var(--squisq-mermaid-edge) !important;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-svg .edgeLabel,
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-svg .edgeLabel :is(span, p) {
-  color: var(--squisq-mermaid-edge) !important;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-svg .edgeLabel p,
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-svg .edgeLabel rect {
-  background: var(--squisq-mermaid-edge-label-bg) !important;
-  fill: var(--squisq-mermaid-edge-label-bg) !important;
-}
-
-.squisq-mermaid-selection-actions {
-  position: absolute;
-  z-index: 12;
-  display: inline-flex;
-  gap: 2px;
-  padding: 3px;
-  border: 1px solid var(--squisq-border, #cbd5e1);
-  border-radius: 7px;
-  background: var(--squisq-surface, #ffffff);
-  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
-  transform: translate(-50%, calc(-100% - 8px));
-}
-
-.squisq-mermaid-selection-actions[data-placement='below'] {
-  transform: translate(-50%, 8px);
-}
-
-.squisq-mermaid-inline-rename {
-  position: absolute;
-  z-index: 14;
-  margin: 0;
-  transform: translate(-50%, -50%);
-}
-
-.squisq-mermaid-inline-rename input {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 36px;
-  padding: 6px 10px;
-  border: 2px solid var(--squisq-accent, #4f46e5);
-  border-radius: 7px;
-  outline: none;
-  background: var(--squisq-surface, #ffffff);
-  color: var(--squisq-text, #1e293b);
-  box-shadow:
-    0 0 0 3px color-mix(in srgb, var(--squisq-accent, #4f46e5) 22%, transparent),
-    0 6px 18px rgba(15, 23, 42, 0.2);
-  font: inherit;
-  font-size: 16px;
-  line-height: 1.3;
-  text-align: center;
-}
-
-.squisq-mermaid-inline-rename input:invalid {
-  border-color: #dc2626;
-}
-
-.squisq-mermaid-inline-rename span {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 50%;
-  padding: 3px 7px;
-  border: 1px solid var(--squisq-border, #cbd5e1);
-  border-radius: 5px;
-  background: var(--squisq-surface, #ffffff);
-  color: var(--squisq-text-muted, #64748b);
-  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
-  font-size: 11px;
-  line-height: 1.2;
-  white-space: nowrap;
-  transform: translateX(-50%);
-  pointer-events: none;
-}
-
-.squisq-mermaid-selection-actions button {
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--squisq-text, #1e293b);
-  cursor: pointer;
-}
-
-.squisq-mermaid-selection-actions button:hover {
-  background: var(--squisq-surface-hover, #f1f5f9);
-}
-
-.squisq-mermaid-selection-actions button[data-danger='true'] {
-  color: #b91c1c;
-}
-
-.squisq-mermaid-connect-hint {
-  position: absolute;
-  top: 10px;
-  left: 50%;
-  z-index: 11;
-  padding: 6px 10px;
-  border-radius: 999px;
-  background: #312e81;
-  color: #fff;
-  font-size: 12px;
-  transform: translateX(-50%);
-  pointer-events: none;
-}
-
-.squisq-mermaid-shape-palette,
-.squisq-mermaid-direction-picker {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 0;
-  z-index: 40;
-  display: flex;
-  box-sizing: border-box;
-  width: 360px;
-  max-height: min(520px, 70vh);
-  flex-direction: column;
-  padding: 8px;
-  border: 1px solid var(--squisq-border, #e2e8f0);
-  border-radius: 8px;
-  background: var(--squisq-surface, #ffffff);
-  color: var(--squisq-text, #1e293b);
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
-}
-
-.squisq-mermaid-shape-search {
-  box-sizing: border-box;
-  width: 100%;
-  margin-bottom: 6px;
-  padding: 7px 8px;
-  border: 1px solid var(--squisq-border, #cbd5e1);
-  border-radius: 6px;
-  background: var(--squisq-surface-subtle, #f8fafc);
-  color: inherit;
-}
-
-.squisq-mermaid-shape-scroll {
-  min-height: 0;
-  flex: 1 1 auto;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-
-.squisq-mermaid-shape-heading {
-  margin: 9px 3px 4px;
-  color: var(--squisq-text-muted, #64748b);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.squisq-mermaid-shape-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 3px;
-}
-
-.squisq-mermaid-shape-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  padding: 5px;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font-size: 12px;
-  text-align: left;
-}
-
-.squisq-mermaid-shape-item svg {
-  width: 34px;
-  height: 24px;
-  flex: 0 0 34px;
-}
-
-.squisq-mermaid-shape-item span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.squisq-mermaid-shape-item:hover,
-.squisq-mermaid-shape-item--selected {
-  border-color: #a5b4fc;
-  background: #eef2ff;
-  color: #3730a3;
-}
-
-.squisq-mermaid-direction-picker {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 7px;
-  width: min(344px, calc(100vw - 24px));
-  padding: 10px;
-  overflow: auto;
-  overscroll-behavior: contain;
-}
-
-.squisq-mermaid-direction-heading {
-  display: flex;
-  grid-column: 1 / -1;
-  flex-direction: column;
-  gap: 2px;
-  padding: 1px 3px 5px;
-}
-
-.squisq-mermaid-direction-heading strong {
-  font-size: 13px;
-}
-
-.squisq-mermaid-direction-heading span {
-  color: var(--squisq-text-muted, #64748b);
-  font-size: 11px;
-}
-
-.squisq-mermaid-direction-card {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 5px;
-  padding: 7px;
-  border: 1px solid var(--squisq-border, #cbd5e1);
-  border-radius: 7px;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  text-align: left;
-}
-
-.squisq-mermaid-direction-card svg {
-  width: 100%;
-  height: 64px;
-  border-radius: 5px;
-  background: var(--squisq-surface-subtle, rgb(148 163 184 / 10%));
-  color: var(--squisq-text, #334155);
-}
-
-.squisq-mermaid-direction-card svg rect,
-.squisq-mermaid-direction-card svg path {
-  fill: none;
-  stroke: currentcolor;
-  stroke-width: 1.8;
-}
-
-.squisq-mermaid-direction-card svg polygon,
-.squisq-mermaid-direction-card svg text {
-  fill: currentcolor;
-}
-
-.squisq-mermaid-direction-card svg text {
-  font-size: 9px;
-  text-anchor: middle;
-}
-
-.squisq-mermaid-direction-copy {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.squisq-mermaid-direction-copy strong {
-  overflow: hidden;
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.squisq-mermaid-direction-copy small {
-  color: var(--squisq-text-muted, #64748b);
-  font-size: 10px;
-}
-
-.squisq-mermaid-direction-card:hover,
-.squisq-mermaid-direction-card[aria-pressed='true'] {
-  border-color: #818cf8;
-  background: #eef2ff;
-  color: #3730a3;
-}
-
-.squisq-mermaid-direction-card:hover svg,
-.squisq-mermaid-direction-card[aria-pressed='true'] svg {
-  color: currentcolor;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-direction-card svg {
-  color: #cbd5e1;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-connect-hint,
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-shape-item:hover,
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-shape-item--selected,
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-direction-card:hover,
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-direction-card[aria-pressed='true'] {
-  border-color: #6366f1;
-  background: #312e81;
-  color: #eef2ff;
-}
-
-.squisq-mermaid-edit-notice {
-  margin-top: 6px;
-  padding: 7px 9px;
-  border: 1px solid #fbbf24;
-  border-radius: 6px;
-  background: #fffbeb;
-  color: #92400e;
-  font-size: 12px;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-edit-notice {
-  border-color: #92400e;
-  background: #451a03;
-  color: #fde68a;
-}
-
-.squisq-mermaid-status,
-.squisq-mermaid-error {
-  display: flex;
-  min-height: 180px;
-  align-items: center;
-  justify-content: center;
-  color: var(--squisq-text-muted, #64748b);
-  text-align: center;
-}
-
-.squisq-mermaid-error {
-  box-sizing: border-box;
-  flex-direction: column;
-  gap: 8px;
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding: 16px;
-  border: 1px solid #fca5a5;
-  border-radius: 8px;
-  background: #fef2f2;
-  color: #991b1b;
-  text-align: left;
-}
-
-.squisq-mermaid-error pre {
-  width: 100%;
-  max-height: 160px;
-  overflow: auto;
-  margin: 0;
-  padding: 8px;
-  white-space: pre-wrap;
-  background: transparent;
-  color: inherit;
-  font-size: 12px;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-mermaid-error {
-  border-color: #7f1d1d;
-  background: #450a0a;
-  color: #fecaca;
-}

package/src/styles/tree-view.css

@@ -1,189 +0,0 @@
-/* ASCII tree fences in the WYSIWYG editor.
- *
- * A qualifying code fence is hidden behind its interactive outline widget
- * (TreeOutlineWidget). The raw art is always editable in the Source / Raw
- * view; there is no on-canvas source toggle.
- *
- * Colors use the editor-shell CSS custom properties (`--squisq-bg`,
- * `--squisq-input-bg`, `--squisq-border`, `--squisq-text`,
- * `--squisq-text-muted`) which the shell flips for `[data-theme='dark']`,
- * so the outline follows the editor's light/dark mode. */
-
-.squisq-wysiwyg-editor pre.squisq-tree-fence-hidden {
-  display: none;
-}
-
-.squisq-tree-widget-host {
-  margin: 0.75rem 0 1.25rem;
-}
-
-.squisq-tree-outline {
-  border: 1px solid var(--squisq-border, #e2e8f0);
-  border-radius: 8px;
-  padding: 8px 10px;
-  background: var(--squisq-input-bg, #ffffff);
-  color: var(--squisq-text, #1e293b);
-  font-size: 14px;
-}
-
-.squisq-tree-toolbar {
-  display: flex;
-  gap: 6px;
-  margin-bottom: 6px;
-}
-
-.squisq-tree-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 12px;
-  padding: 3px 8px;
-  border: 1px solid var(--squisq-border, #e2e8f0);
-  border-radius: 5px;
-  background: var(--squisq-bg, #f8fafc);
-  color: var(--squisq-text, #1e293b);
-  cursor: pointer;
-}
-.squisq-tree-btn:hover {
-  border-color: var(--squisq-text-muted, #94a3b8);
-}
-
-/* Include the widget wrapper so this reset wins over the editor's generic
- * `.squisq-wysiwyg-editor ul` padding. Otherwise every nested rail picks up
- * another 24px of list indentation. */
-.squisq-tree-outline .squisq-tree-rows {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.squisq-tree-rows .squisq-tree-rows {
-  border-left: 1px solid var(--squisq-border, #e2e8f0);
-  margin-left: 8px;
-}
-
-.squisq-tree-item {
-  position: relative;
-}
-
-.squisq-tree-row {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 1px 0;
-  border-radius: 4px;
-}
-.squisq-tree-row:hover .squisq-tree-controls {
-  opacity: 1;
-}
-
-.squisq-tree-item--dragging {
-  opacity: 0.42;
-}
-
-.squisq-tree-item--drop-before > .squisq-tree-row::before,
-.squisq-tree-item--drop-after::after {
-  content: '';
-  position: absolute;
-  z-index: 2;
-  left: 0;
-  right: 0;
-  height: 2px;
-  border-radius: 999px;
-  background: #6366f1;
-  pointer-events: none;
-}
-.squisq-tree-item--drop-before > .squisq-tree-row::before {
-  top: -1px;
-}
-/* An after-drop becomes the target's sibling, so show the marker below its
- * complete subtree rather than directly below the target row. */
-.squisq-tree-item--drop-after::after {
-  bottom: -1px;
-}
-.squisq-tree-item--drop-child > .squisq-tree-row {
-  background: rgba(99, 102, 241, 0.12);
-  box-shadow: inset 0 0 0 1px #6366f1;
-}
-
-.squisq-tree-chevron {
-  flex: 0 0 auto;
-  width: 16px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  color: var(--squisq-text-muted, #64748b);
-  padding: 0;
-  font-size: 11px;
-}
-.squisq-tree-chevron--empty {
-  cursor: default;
-}
-
-.squisq-tree-icon {
-  flex: 0 0 auto;
-  width: 18px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  color: #6366f1;
-  padding: 0;
-}
-
-.squisq-tree-label {
-  flex: 1 1 auto;
-  min-width: 0;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 1px 4px;
-  font: inherit;
-  color: var(--squisq-text, #1e293b);
-  background: transparent;
-}
-.squisq-tree-label:focus {
-  outline: none;
-  border-color: #6366f1;
-  background: var(--squisq-bg, #f8fafc);
-}
-
-.squisq-tree-controls {
-  flex: 0 0 auto;
-  display: inline-flex;
-  gap: 2px;
-  opacity: 0;
-  transition: opacity 0.12s;
-}
-.squisq-tree-drag-handle {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  color: var(--squisq-text-muted, #64748b);
-  cursor: grab;
-}
-.squisq-tree-drag-handle:active {
-  cursor: grabbing;
-}
-.squisq-tree-controls button {
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  color: var(--squisq-text-muted, #64748b);
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-size: 11px;
-}
-.squisq-tree-controls button:hover {
-  background: var(--squisq-bg, #f1f5f9);
-  color: var(--squisq-text, #1e293b);
-}
-.squisq-tree-controls .squisq-tree-delete:hover {
-  color: #ef4444;
-}
-
-.squisq-tree-warnings {
-  margin-top: 6px;
-  font-size: 12px;
-  color: var(--squisq-text-muted, #6b7280);
-}