@bendyline/squisq-editor-react 2.3.3 → 2.4.0

package/dist/styles/index.css

@@ -8891,6 +8891,88 @@
   caret-color: var(--squisq-theme-text, #1f2937);
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='22' viewBox='0 0 16 22'><g fill='none' stroke-linecap='round'><path d='M5 3 L11 3 M5 19 L11 19 M8 3 L8 19' stroke='white' stroke-width='3.2'/><path d='M5 3 L11 3 M5 19 L11 19 M8 3 L8 19' stroke='%231f2937' stroke-width='1.4'/></g></svg>") 8 11, text;
 }
+.squisq-wysiwyg-editor .squisq-video-node {
+  display: block;
+  width: min(100%, 640px);
+  max-width: 640px;
+  margin: 0.75em auto;
+  overflow: hidden;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  background: #111827;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
+}
+.squisq-wysiwyg-editor .squisq-video-node--selected {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.24);
+}
+.squisq-video-placement-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 34px;
+  padding: 4px 6px;
+  border-bottom: 1px solid #d1d5db;
+  background: #f9fafb;
+  color: #374151;
+  font-family: var(--squisq-ux-font, system-ui, sans-serif);
+  user-select: none;
+}
+.squisq-video-placement-label {
+  margin: 0 4px 0 2px;
+  color: #6b7280;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+.squisq-video-placement-button {
+  min-height: 24px;
+  padding: 2px 8px;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  background: transparent;
+  color: #4b5563;
+  font: 500 11px/1 var(--squisq-ux-font, system-ui, sans-serif);
+  cursor: pointer;
+}
+.squisq-video-placement-button:hover {
+  background: #e5e7eb;
+  color: #111827;
+}
+.squisq-video-placement-button[aria-pressed=true] {
+  border-color: #60a5fa;
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+.squisq-video-placement-button--lock {
+  margin-left: auto;
+  border-color: #d1d5db;
+}
+.squisq-wysiwyg-editor .squisq-video-node video {
+  margin: 0;
+  border-radius: 0;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-video-placement-toolbar {
+  border-bottom-color: #374151;
+  background: #111827;
+  color: #d1d5db;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-video-placement-label {
+  color: #9ca3af;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-video-placement-button {
+  color: #d1d5db;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-video-placement-button:hover {
+  background: #1f2937;
+  color: #f9fafb;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-video-placement-button[aria-pressed=true] {
+  border-color: #60a5fa;
+  background: #172554;
+  color: #93c5fd;
+}
 .squisq-wysiwyg-editor .prosemirror-dropcursor-block,
 .squisq-wysiwyg-editor .prosemirror-dropcursor-inline {
   background: var(--squisq-editor-accent, #4a9eff) !important;
@@ -9539,7 +9621,19 @@
 .squisq-editor-shell[data-presentation-mode=control],
 .squisq-editor-shell[data-presentation-mode=fullscreen] {
   position: relative;
-  background: #000;
+  background: var(--squisq-bg, #f5f5f5);
+}
+.squisq-editor-shell[data-presentation-mode=control] {
+  position: fixed !important;
+  z-index: 2147483000 !important;
+  inset: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  height: 100dvh !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  max-width: none !important;
+  max-height: none !important;
 }
 .squisq-editor-shell[data-presentation-mode=control] > .squisq-editor-header,
 .squisq-editor-shell[data-presentation-mode=fullscreen] > .squisq-editor-header,
@@ -9558,7 +9652,7 @@
 .squisq-editor-shell[data-presentation-mode=control] .squisq-preview-player,
 .squisq-editor-shell[data-presentation-mode=fullscreen] .squisq-preview-player {
   padding: 0;
-  background: #000;
+  background: var(--squisq-bg, #f5f5f5);
 }
 .squisq-editor-shell[data-presentation-mode=fullscreen]:fullscreen {
   width: 100vw !important;
@@ -9571,27 +9665,33 @@
 .squisq-presentation-exit {
   position: absolute;
   z-index: 1001;
-  top: 12px;
-  right: 12px;
+  bottom: max(16px, env(safe-area-inset-bottom));
+  left: 50%;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   min-height: 34px;
   padding: 7px 11px;
-  border: 1px solid rgba(255, 255, 255, 0.35);
+  border: 1px solid var(--squisq-presentation-control-border, var(--squisq-border, #d1d5db));
   border-radius: 7px;
-  background: rgba(15, 23, 42, 0.78);
-  color: #fff;
+  background: color-mix(in srgb, var(--squisq-presentation-control-bg, var(--squisq-input-bg, #fff)) 88%, transparent);
+  color: var(--squisq-presentation-control-text, var(--squisq-text, #1f2937));
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
   font: 600 12px/1 var(--squisq-ux-font, sans-serif);
   cursor: pointer;
   opacity: 0.72;
   backdrop-filter: blur(8px);
-  transition: opacity 0.12s ease, background 0.12s ease;
+  transform: translateX(-50%);
+  transition:
+    opacity 0.12s ease,
+    background 0.12s ease,
+    border-color 0.12s ease;
 }
 .squisq-presentation-exit:hover,
 .squisq-presentation-exit:focus-visible {
   outline: none;
-  background: rgba(15, 23, 42, 0.94);
+  border-color: var( --squisq-presentation-control-border, var(--squisq-accent, var(--squisq-text, #1f2937)) );
+  background: var(--squisq-presentation-control-bg, var(--squisq-input-bg, #fff));
   opacity: 1;
 }
 .squisq-presentation-window {
@@ -9599,7 +9699,7 @@
   height: 100%;
   display: flex;
   overflow: hidden;
-  background: #000;
+  background: inherit;
 }
 .squisq-presentation-window-preview,
 .squisq-presentation-window-surface,
@@ -9614,7 +9714,7 @@
 }
 .squisq-presentation-window-surface {
   padding: 0;
-  background: #000;
+  background: inherit;
   pointer-events: none;
 }
 .squisq-presentation-teleprompter {
@@ -9623,7 +9723,7 @@
   pointer-events: none;
 }
 .squisq-presentation-connecting {
-  color: rgba(255, 255, 255, 0.72);
+  color: var(--squisq-text-muted, #6b7280);
   font: 500 14px/1.4 var(--squisq-ux-font, sans-serif);
 }
 .squisq-presentation-error {
@@ -10181,7 +10281,17 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
+.squisq-media-bin-actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.squisq-media-bin-record,
 .squisq-media-bin-upload {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
   font-size: 11px;
   padding: 2px 8px;
   cursor: pointer;
@@ -10190,9 +10300,24 @@
   border: 1px solid #d1d5db;
   border-radius: 4px;
 }
+.squisq-media-bin-record-dot {
+  width: 7px;
+  height: 7px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: #dc2626;
+  box-shadow: 0 0 0 1px rgba(127, 29, 29, 0.24);
+}
+.squisq-media-bin-record:hover,
 .squisq-media-bin-upload:hover {
   background: #d1d5db;
 }
+.squisq-media-bin-record:focus-visible,
+.squisq-media-bin-upload:focus-visible {
+  outline: 2px solid #93c5fd;
+  outline-offset: 1px;
+}
+.squisq-media-bin-record:disabled,
 .squisq-media-bin-upload:disabled {
   cursor: default;
   opacity: 0.5;
@@ -10343,14 +10468,14 @@
 .squisq-editor-shell[data-theme=dark] .squisq-media-bin .squisq-media-bin-title {
   color: #d1d5db;
 }
-.squisq-media-bin--dark .squisq-media-bin-upload,
-.squisq-editor-shell[data-theme=dark] .squisq-media-bin .squisq-media-bin-upload {
+.squisq-media-bin--dark :is(.squisq-media-bin-record, .squisq-media-bin-upload),
+.squisq-editor-shell[data-theme=dark] .squisq-media-bin :is(.squisq-media-bin-record, .squisq-media-bin-upload) {
   background: #374151;
   color: #d1d5db;
   border-color: #4b5563;
 }
-.squisq-media-bin--dark .squisq-media-bin-upload:hover,
-.squisq-editor-shell[data-theme=dark] .squisq-media-bin .squisq-media-bin-upload:hover {
+.squisq-media-bin--dark :is(.squisq-media-bin-record, .squisq-media-bin-upload):hover,
+.squisq-editor-shell[data-theme=dark] .squisq-media-bin :is(.squisq-media-bin-record, .squisq-media-bin-upload):hover {
   background: #4b5563;
 }
 .squisq-media-bin--dark .squisq-media-bin-item,
@@ -11422,7 +11547,26 @@
   flex: 0 0 auto;
   min-height: 0;
 }
-.squisq-editor-with-gutter > .squisq-block-card {
+.squisq-editor-with-gutter > .squisq-block-card-frame {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+.squisq-block-card-frame {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.squisq-block-card-frame-body {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+  display: flex;
+}
+.squisq-block-card-frame-body > .squisq-raw-editor-container,
+.squisq-block-card-frame-body > .squisq-wysiwyg-container {
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
@@ -11606,6 +11750,208 @@
   height: 0;
   overflow: hidden;
 }
+.squisq-timeline-toolbar {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 36px;
+  padding: 4px 10px;
+  border-bottom: 1px solid #b0a99a;
+  background: #efece6;
+  color: #374151;
+  font-family: var(--squisq-ux-font, system-ui, sans-serif);
+}
+.squisq-timeline-toolbar-title {
+  margin-right: 3px;
+  color: #6b7280;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+.squisq-timeline-pane-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 27px;
+  padding: 3px 9px;
+  border: 1px solid #c8c2b7;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #374151;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.squisq-timeline-pane-toggle:hover:not(:disabled) {
+  border-color: #9ca3af;
+  background: #f9fafb;
+}
+.squisq-timeline-pane-toggle[aria-pressed=true] {
+  border-color: #2563eb;
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+.squisq-timeline-pane-toggle:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.squisq-editor-primary {
+  min-width: 0;
+}
+.squisq-timeline-preview-panel {
+  flex: 1 1 0;
+  min-width: 220px;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: #171717;
+  border-left: 1px solid #b0a99a;
+}
+.squisq-timeline-video-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 34px;
+  padding: 0 8px 0 12px;
+  background: #f9fafb;
+  border-bottom: 1px solid #d1d5db;
+  color: #374151;
+  font-size: 12px;
+}
+.squisq-timeline-video-title {
+  font-weight: 600;
+}
+.squisq-timeline-video-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #6b7280;
+}
+.squisq-timeline-video-time {
+  margin-left: auto;
+  color: #6b7280;
+  font-variant-numeric: tabular-nums;
+}
+.squisq-timeline-video-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #6b7280;
+  font-size: 18px;
+  cursor: pointer;
+}
+.squisq-timeline-video-close:hover {
+  background: #e5e7eb;
+  color: #111827;
+}
+.squisq-timeline-video-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  overflow: auto;
+}
+.squisq-timeline-video-stage {
+  position: relative;
+  width: 100%;
+  max-width: 900px;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: #000000;
+  border: 1px solid #374151;
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
+}
+.squisq-timeline-composition-stage {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 900px;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: #000000;
+  border: 1px solid #374151;
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
+}
+.squisq-timeline-composition-stage > .doc-player {
+  width: 100%;
+  height: 100%;
+}
+.squisq-timeline-video-stage .doc-player__media-clips {
+  position: absolute;
+  inset: 0;
+}
+.squisq-timeline-video-stage .doc-player__media-video {
+  opacity: 0;
+  visibility: hidden;
+}
+.squisq-timeline-video-stage .doc-player__media-video--active {
+  opacity: 1;
+  visibility: visible;
+}
+.squisq-timeline-video-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  color: #9ca3af;
+  font-size: 12px;
+  text-align: center;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-timeline-video-header {
+  background: #111827;
+  border-bottom-color: #2a3144;
+  color: #e5e7eb;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-timeline-preview-panel {
+  border-left-color: #2a3144;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-timeline-video-label,
+.squisq-editor-shell[data-theme=dark] .squisq-timeline-video-time,
+.squisq-editor-shell[data-theme=dark] .squisq-timeline-video-close {
+  color: #9ca3af;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-timeline-video-close:hover {
+  background: #1f2937;
+  color: #f9fafb;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-timeline-toolbar {
+  border-bottom-color: #2a3144;
+  background: #151923;
+  color: #d1d5db;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-timeline-toolbar-title {
+  color: #9ca3af;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-timeline-pane-toggle {
+  border-color: #374151;
+  background: #111827;
+  color: #d1d5db;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-timeline-pane-toggle:hover:not(:disabled) {
+  background: #1f2937;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-timeline-pane-toggle[aria-pressed=true] {
+  border-color: #60a5fa;
+  background: #172554;
+  color: #93c5fd;
+}
 .squisq-timeline-scroll {
   flex: 1;
   overflow-x: auto;
@@ -11747,6 +12093,10 @@
       transparent 6px,
       transparent 12px);
 }
+.squisq-timeline-clip--locked {
+  cursor: default;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
 .squisq-timeline-clip-label {
   white-space: nowrap;
   overflow: hidden;
@@ -13104,6 +13454,134 @@
 .squisq-transition-flyout[data-theme=dark] {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
 }
+.squisq-transform-menu {
+  position: relative;
+  flex-shrink: 0;
+  margin-left: 2px;
+}
+.squisq-transform-menu-popover {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 90;
+  min-width: 280px;
+  margin-top: 4px;
+  padding: 6px 0;
+  background: var(--squisq-bg, #fff);
+  border: 1px solid var(--squisq-border, #e5e7eb);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  color: var(--squisq-text, #1f2937);
+}
+.squisq-transform-menu-state {
+  padding: 4px 12px 8px;
+  font-size: 11px;
+  color: var(--squisq-text-muted, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  border-bottom: 1px solid var(--squisq-border, #e5e7eb);
+  margin-bottom: 4px;
+}
+.squisq-transform-menu-item {
+  padding: 2px 6px;
+}
+.squisq-transform-menu-action {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  width: 100%;
+  padding: 6px;
+  font: inherit;
+  text-align: left;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: inherit;
+  cursor: pointer;
+}
+.squisq-transform-menu-action:hover:not(:disabled) {
+  background: var(--squisq-row-hover, #f3f4f6);
+}
+.squisq-transform-menu-action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.squisq-transform-menu-action-label {
+  font-size: 13px;
+  font-weight: 600;
+}
+.squisq-transform-menu-action-desc {
+  font-size: 11.5px;
+  color: var(--squisq-text-muted, #6b7280);
+}
+.squisq-transform-menu-widths {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 6px 6px;
+}
+.squisq-transform-menu-width {
+  padding: 2px 8px;
+  font: inherit;
+  font-size: 12px;
+  background: var(--squisq-input-bg, #fff);
+  color: inherit;
+  border: 1px solid var(--squisq-border, #d1d5db);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.squisq-transform-menu-width--active {
+  border-color: var(--squisq-accent, #4f46e5);
+  color: var(--squisq-accent, #4f46e5);
+  font-weight: 600;
+}
+.squisq-transform-menu-width:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.squisq-transform-menu-width-input {
+  width: 64px;
+  padding: 2px 6px;
+  font: inherit;
+  font-size: 12px;
+  background: var(--squisq-input-bg, #fff);
+  color: var(--squisq-text, #1f2937);
+  border: 1px solid var(--squisq-border, #d1d5db);
+  border-radius: 4px;
+}
+.squisq-transform-menu-note {
+  padding: 6px 12px 2px;
+  font-size: 11.5px;
+  color: var(--squisq-text-muted, #6b7280);
+}
+.squisq-transform-menu-status {
+  min-height: 16px;
+  padding: 4px 12px 2px;
+  font-size: 11.5px;
+  color: var(--squisq-text-muted, #6b7280);
+}
+.squisq-editor-shell[data-theme=dark] .squisq-transform-menu-popover {
+  background: #1f2937;
+  border-color: #374151;
+  color: #d1d5db;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-transform-menu-state {
+  border-bottom-color: #374151;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-transform-menu-action:hover:not(:disabled) {
+  background: #374151;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-transform-menu-width,
+.squisq-editor-shell[data-theme=dark] .squisq-transform-menu-width-input {
+  background: #111827;
+  border-color: #374151;
+  color: #d1d5db;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-transform-menu-width--active {
+  border-color: var(--squisq-accent, #818cf8);
+  color: var(--squisq-accent, #818cf8);
+}
 
 /* src/styles/code-context.css */
 .squisq-ccx-zone {
@@ -14504,7 +14982,7 @@
   border: 1px solid var(--squisq-border, #e2e8f0);
   border-radius: 8px;
   overflow: hidden;
-  background: var(--squisq-surface, #ffffff);
+  background: var(--squisq-surface, var(--squisq-bg, #ffffff));
 }
 .squisq-diagram-canvas {
   position: relative;
@@ -14613,7 +15091,7 @@
   position: relative;
   flex: 1;
   margin: 24px;
-  background: var(--squisq-surface, #ffffff);
+  background: var(--squisq-surface, var(--squisq-bg, #ffffff));
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
@@ -14938,10 +15416,20 @@
   padding: 5px 9px;
   border: 1px solid var(--squisq-border, #cbd5e1);
   border-radius: 6px;
-  background: var(--squisq-surface-subtle, #f8fafc);
-  color: inherit;
+  background: var( --squisq-surface-subtle, var(--squisq-surface-raised, var(--squisq-input-bg, #f8fafc)) );
+  color: var(--squisq-text, #1e293b);
   cursor: pointer;
 }
+.squisq-mermaid-properties-header button:hover,
+.squisq-mermaid-properties-footer button:hover {
+  border-color: var(--squisq-accent, #4f46e5);
+  background: var( --squisq-surface-hover, var(--squisq-surface-subtle, var(--squisq-input-bg, #f1f5f9)) );
+}
+.squisq-mermaid-properties-header button:focus-visible,
+.squisq-mermaid-properties-footer button:focus-visible {
+  outline: 2px solid var(--squisq-accent, #4f46e5);
+  outline-offset: 2px;
+}
 .squisq-mermaid-properties-header button {
   width: 30px;
   padding: 0;
@@ -14950,9 +15438,13 @@
   justify-content: flex-end;
 }
 .squisq-mermaid-properties-footer button[data-primary=true] {
-  border-color: #4f46e5;
-  background: #4f46e5;
-  color: #fff;
+  border-color: var(--squisq-accent, #4f46e5);
+  background: var(--squisq-accent, #4f46e5);
+  color: var(--squisq-text-on-accent, #fff);
+}
+.squisq-mermaid-properties-footer button[data-primary=true]:hover {
+  border-color: var(--squisq-accent-hover, var(--squisq-accent, #4338ca));
+  background: var(--squisq-accent-hover, var(--squisq-accent, #4338ca));
 }
 .squisq-mermaid-properties-fields {
   display: flex;
@@ -14987,6 +15479,9 @@
   min-height: 30px;
   color: var(--squisq-text, #1e293b);
 }
+.squisq-mermaid-property-toggle input {
+  accent-color: var(--squisq-accent, #4f46e5);
+}
 .squisq-mermaid-shape-search {
   box-sizing: border-box;
   width: 100%;