@bendyline/squisq-editor-react 2.3.4 → 2.4.1

package/dist/styles/index.css

@@ -8766,7 +8766,7 @@
   border-color: color-mix(in oklch, currentColor 42%, transparent);
   outline: none;
 }
-:is(.squisq-block-props-popover, .squisq-transition-picker, .squisq-transition-flyout) {
+:is(.squisq-block-props-popover, .squisq-transition-picker, .squisq-transition-flyout, .squisq-timeline-item-menu) {
   --squisq-block-props-surface: #ffffff;
   --squisq-block-props-surface-hover: #f3f4f6;
   --squisq-block-props-input: #ffffff;
@@ -8776,7 +8776,7 @@
   --squisq-block-props-border: #d1d5db;
   --squisq-block-props-divider: #e5e7eb;
 }
-:is(.squisq-block-props-popover, .squisq-transition-picker, .squisq-transition-flyout)[data-theme=dark] {
+:is(.squisq-block-props-popover, .squisq-transition-picker, .squisq-transition-flyout, .squisq-timeline-item-menu)[data-theme=dark] {
   --squisq-block-props-surface: #1f2937;
   --squisq-block-props-surface-hover: #374151;
   --squisq-block-props-input: #111827;
@@ -8886,11 +8886,93 @@
   color: var(--squisq-theme-text, #1f2937);
   background: var(--squisq-theme-bg, #fff);
   box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
-  font-family: var(--squisq-theme-body-font, inherit);
+  font-family: var(--squisq-theme-body-font, var(--squisq-write-body-font, inherit));
   font-size: var(--squisq-write-text-size, inherit);
   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;
@@ -8908,7 +8990,7 @@
 .squisq-wysiwyg-editor h4,
 .squisq-wysiwyg-editor h5,
 .squisq-wysiwyg-editor h6 {
-  font-family: var(--squisq-theme-title-font, var(--squisq-theme-body-font, inherit));
+  font-family: var( --squisq-theme-title-font, var( --squisq-write-header-font, var(--squisq-theme-body-font, var(--squisq-write-body-font, inherit)) ) );
 }
 .squisq-wysiwyg-editor h1 {
   font-size: 2em;
@@ -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;
@@ -10250,6 +10375,36 @@
   min-width: 0;
   flex: 1;
 }
+.squisq-media-bin-download {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: #4b5563;
+  cursor: pointer;
+  font: inherit;
+  font-size: 16px;
+  line-height: 1;
+}
+.squisq-media-bin-download:hover {
+  border-color: #d1d5db;
+  background: #e5e7eb;
+}
+.squisq-media-bin-download:focus-visible {
+  border-color: #93c5fd;
+  outline: 2px solid #93c5fd;
+  outline-offset: 1px;
+}
+.squisq-media-bin-download:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
 .squisq-media-bin-name {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -10343,14 +10498,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,
@@ -10376,6 +10531,15 @@
 .squisq-editor-shell[data-theme=dark] .squisq-media-bin .squisq-media-bin-size {
   color: #6b7280;
 }
+.squisq-media-bin--dark .squisq-media-bin-download,
+.squisq-editor-shell[data-theme=dark] .squisq-media-bin .squisq-media-bin-download {
+  color: #d1d5db;
+}
+.squisq-media-bin--dark .squisq-media-bin-download:hover,
+.squisq-editor-shell[data-theme=dark] .squisq-media-bin .squisq-media-bin-download:hover {
+  border-color: #4b5563;
+  background: #374151;
+}
 .squisq-media-bin--dark .squisq-media-bin-unused-badge,
 .squisq-editor-shell[data-theme=dark] .squisq-media-bin .squisq-media-bin-unused-badge {
   background: #78350f;
@@ -11422,7 +11586,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,10 +11789,216 @@
   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-composition-panel .squisq-preview-controls {
+  padding-left: 0;
+}
+.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;
-  overflow-y: hidden;
+  overflow: auto;
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
   padding: 8px 0 0;
   min-width: 0;
   min-height: 0;
@@ -11663,7 +12052,14 @@
 }
 .squisq-timeline-row--media {
   height: 26px;
-  margin-bottom: 0;
+  margin: 0;
+  flex: 0 0 26px;
+}
+.squisq-timeline-media-tracks {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 4px;
 }
 .squisq-timeline-block {
   position: absolute;
@@ -11713,6 +12109,55 @@
   border-radius: 3px;
   padding: 0 4px;
 }
+.squisq-timeline-item-menu-trigger {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  z-index: 4;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  translate: 0 -50%;
+  border: 1px solid rgba(107, 114, 128, 0.45);
+  border-radius: 5px;
+  background: rgba(255, 255, 255, 0.92);
+  color: #374151;
+  font: 700 15px/1 var(--squisq-ux-font, system-ui, sans-serif);
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+}
+.squisq-timeline-block:hover .squisq-timeline-item-menu-trigger,
+.squisq-timeline-block--active .squisq-timeline-item-menu-trigger,
+.squisq-timeline-clip:hover .squisq-timeline-item-menu-trigger,
+.squisq-timeline-item-menu-trigger:focus-visible,
+.squisq-timeline-item-menu-trigger[aria-expanded=true] {
+  opacity: 1;
+  pointer-events: auto;
+}
+.squisq-timeline-item-menu-trigger:hover,
+.squisq-timeline-item-menu-trigger:focus-visible {
+  border-color: var(--squisq-outline-accent, #6c5ce7);
+  outline: none;
+}
+.squisq-timeline-item-menu-trigger--clip {
+  right: 6px;
+  width: 18px;
+  height: 18px;
+  border-color: rgba(255, 255, 255, 0.55);
+  background: rgba(15, 23, 42, 0.62);
+  color: #ffffff;
+  font-size: 13px;
+}
+@media (hover: none) {
+  .squisq-timeline-item-menu-trigger {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
 .squisq-timeline-clip {
   position: absolute;
   top: 0;
@@ -11733,6 +12178,35 @@
 .squisq-timeline-clip--video {
   background: #2b6cb0;
 }
+.squisq-timeline-video-filmstrip {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: flex;
+  pointer-events: none;
+  background: #1e3a5f;
+}
+.squisq-timeline-video-filmstrip video {
+  display: block;
+  min-width: 0;
+  flex: 1 1 0;
+  height: 100%;
+  border-right: 1px solid rgba(255, 255, 255, 0.18);
+  object-fit: cover;
+  opacity: 0.78;
+}
+.squisq-timeline-video-filmstrip video:last-child {
+  border-right: 0;
+}
+.squisq-timeline-clip--video .squisq-timeline-clip-label {
+  position: relative;
+  z-index: 2;
+  max-width: calc(100% - 4px);
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: rgba(15, 23, 42, 0.72);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
+}
 .squisq-timeline-clip--embedded {
   opacity: 0.8;
   border: 1px dashed rgba(255, 255, 255, 0.7);
@@ -11747,6 +12221,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;
@@ -11756,6 +12234,7 @@
 .squisq-timeline-edge {
   position: absolute;
   top: 0;
+  z-index: 3;
   width: 7px;
   height: 100%;
   cursor: ew-resize;
@@ -11798,6 +12277,11 @@
 .squisq-editor-shell[data-theme=dark] .squisq-timeline-block-label {
   background: rgba(17, 24, 39, 0.82);
 }
+.squisq-editor-shell[data-theme=dark] .squisq-timeline-block .squisq-timeline-item-menu-trigger {
+  border-color: #4b5563;
+  background: rgba(17, 24, 39, 0.92);
+  color: #e5e7eb;
+}
 .squisq-editor-shell[data-theme=dark] .squisq-timeline-zoom-button {
   border-color: #374151;
   background: #111827;
@@ -11819,6 +12303,145 @@
 .squisq-editor-shell[data-theme=dark] .squisq-timeline-tick-label {
   color: #9ca3af;
 }
+.squisq-timeline-item-menu {
+  box-sizing: border-box;
+  width: 320px;
+  max-width: calc(100vw - 16px);
+  overflow: auto;
+  color: var(--squisq-block-props-text);
+  background: var(--squisq-block-props-surface);
+  border: 1px solid var(--squisq-block-props-divider);
+  border-radius: 10px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.1);
+  font-family: var(--squisq-ux-font, system-ui, sans-serif);
+  user-select: none;
+}
+.squisq-timeline-item-menu-header {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  padding: 9px 12px;
+  border-bottom: 1px solid var(--squisq-block-props-divider);
+}
+.squisq-timeline-item-menu-kind {
+  flex: 0 0 auto;
+  color: var(--squisq-block-props-muted);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.squisq-timeline-item-menu-title {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--squisq-block-props-text);
+  font-size: 12px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.squisq-timeline-item-menu-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 11px 12px 12px;
+}
+.squisq-timeline-item-menu-row,
+.squisq-timeline-item-menu-field,
+.squisq-timeline-item-menu-check {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 0;
+}
+.squisq-timeline-item-menu-check {
+  justify-content: flex-start;
+  color: var(--squisq-block-props-text);
+  font-size: 12px;
+  cursor: pointer;
+}
+.squisq-timeline-item-menu-check input {
+  accent-color: var(--squisq-block-props-accent, #6366f1);
+}
+.squisq-timeline-item-menu-hint {
+  margin: -5px 0 0 24px;
+  color: var(--squisq-block-props-quiet);
+  font-size: 10px;
+  line-height: 1.35;
+}
+.squisq-timeline-item-menu-label {
+  flex: 0 0 auto;
+  color: var(--squisq-block-props-muted);
+  font-size: 11px;
+  font-weight: 600;
+}
+.squisq-timeline-item-menu-number {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.squisq-timeline-item-menu-number input,
+.squisq-timeline-item-menu-field select {
+  box-sizing: border-box;
+  min-width: 0;
+  padding: 5px 7px;
+  color: var(--squisq-block-props-text);
+  background: var(--squisq-block-props-input);
+  border: 1px solid var(--squisq-block-props-border);
+  border-radius: 5px;
+  font: inherit;
+  font-size: 12px;
+  outline: none;
+}
+.squisq-timeline-item-menu-number input {
+  width: 78px;
+}
+.squisq-timeline-item-menu-field select {
+  max-width: 205px;
+}
+.squisq-timeline-item-menu-number input:focus,
+.squisq-timeline-item-menu-field select:focus {
+  border-color: var(--squisq-block-props-accent, #6366f1);
+}
+.squisq-timeline-item-menu-number input:disabled {
+  opacity: 0.55;
+}
+.squisq-timeline-item-menu-number > span {
+  color: var(--squisq-block-props-quiet);
+  font-size: 11px;
+}
+.squisq-timeline-item-menu-row .squisq-transition-picker-trigger-label {
+  display: none;
+}
+.squisq-timeline-item-menu-segments {
+  display: inline-flex;
+  overflow: hidden;
+  border: 1px solid var(--squisq-block-props-border);
+  border-radius: 6px;
+}
+.squisq-timeline-item-menu-segments button {
+  padding: 5px 8px;
+  color: var(--squisq-block-props-muted);
+  background: var(--squisq-block-props-surface);
+  border: 0;
+  border-right: 1px solid var(--squisq-block-props-border);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+.squisq-timeline-item-menu-segments button:last-child {
+  border-right: 0;
+}
+.squisq-timeline-item-menu-segments button:hover {
+  background: var(--squisq-block-props-surface-hover);
+}
+.squisq-timeline-item-menu-segments button[aria-pressed=true] {
+  color: var(--squisq-block-props-accent, #4338ca);
+  background: color-mix(in oklch, var(--squisq-block-props-accent, #6366f1) 14%, transparent);
+  font-weight: 600;
+}
 .squisq-editor-shell {
   --squisq-preview-accent: #6366f1;
   --squisq-preview-accent-muted: #94a3b8;
@@ -13104,6 +13727,202 @@
 .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 {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px;
+  font: inherit;
+  text-align: left;
+  background: var(--squisq-input-bg, #fff);
+  border: 1px solid var(--squisq-border, #d1d5db);
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+  color: inherit;
+  cursor: pointer;
+}
+.squisq-transform-menu-action:hover:not(:disabled) {
+  background: var(--squisq-row-hover, #f3f4f6);
+  border-color: var(--squisq-accent, #4f46e5);
+}
+.squisq-transform-menu-action:focus-visible {
+  border-color: var(--squisq-accent, #4f46e5);
+  outline: 2px solid var(--squisq-accent, #4f46e5);
+  outline-offset: 1px;
+}
+.squisq-transform-menu-action:active:not(:disabled) {
+  box-shadow: none;
+  transform: translateY(1px);
+}
+.squisq-transform-menu-action--current {
+  border-color: var(--squisq-accent, #4f46e5);
+  background: color-mix(in oklch, var(--squisq-accent, #4f46e5) 8%, var(--squisq-input-bg, #fff));
+}
+.squisq-transform-menu-action-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  color: #111827;
+  font-size: 15px;
+  line-height: 1;
+  text-align: center;
+}
+.squisq-transform-menu-action-icon > svg {
+  width: 22px;
+  height: 22px;
+  overflow: visible;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.65;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.squisq-transform-menu-action-icon > i {
+  line-height: 1;
+}
+.squisq-transform-menu-action-copy {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+.squisq-transform-menu-action-heading {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+.squisq-transform-menu-current-badge {
+  padding: 1px 5px;
+  color: var(--squisq-accent, #4f46e5);
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  line-height: 1.35;
+  white-space: nowrap;
+}
+.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;
+  margin-top: 2px;
+  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-icon {
+  color: #fff;
+}
+.squisq-editor-shell[data-theme=dark] .squisq-transform-menu-action:hover:not(:disabled) {
+  background: #4b5563;
+}
+.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 +15323,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 +15432,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);