@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/scene/scene.css

@@ -1,874 +0,0 @@
-/*
- * Squisq Scene engine — visual styles for the 2D editing surface.
- *
- * The Scene is a position:relative root with three children:
- *   1. Optional toolbar (top-left)
- *   2. SVG viewport (fills the root)
- *   3. Optional maximize button (top-right)
- *
- * Colors lean on existing `--squisq-*` CSS variables so light/dark
- * themes apply automatically.
- */
-
-.squisq-scene-root {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background: var(--squisq-surface, #ffffff);
-  border: 1px solid var(--squisq-border, #e2e8f0);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-shell {
-  --squisq-surface: #0f172a;
-  --squisq-surface-hover: #1e293b;
-  --squisq-border: #475569;
-  --squisq-text: #f8fafc;
-  --squisq-text-muted: #94a3b8;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-root,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-inline,
-.squisq-editor-shell[data-theme='dark'] .squisq-diagram-inline {
-  background: #0f172a;
-  border-color: #475569;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-layer--shape,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-layer--path,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-layer--text {
-  filter: invert(1) hue-rotate(180deg) saturate(0.9);
-}
-
-/* Scene extras (diagram/drawing connectors) already use the dark-aware
-   --squisq-text tokens below. Inverting this group a second time turns the
-   intended light strokes and arrowheads nearly black against the canvas. */
-
-.squisq-scene-viewport {
-  display: block;
-  width: 100%;
-  height: 100%;
-  touch-action: none;
-  background: transparent;
-  user-select: none;
-  outline: none;
-}
-
-.squisq-scene-viewport:focus,
-.squisq-scene-viewport:focus-visible {
-  outline: none;
-}
-
-/* Custom URL-based cursors with a white halo around a dark stroke, so
-   the pointer stays visible regardless of canvas background or the
-   user's OS cursor scheme (Windows lets users render system cursors
-   in pure white, which makes the OS-stock keywords invisible on the
-   editor's light surface — mirrors the I-beam workaround in
-   editor.css). Each tool sets `data-cursor` on the SVG; the matching
-   selector picks the right URL with a keyword fallback when the URL
-   fails to load. */
-
-/* Default arrow — used by SelectTool. Hotspot at the tip (3, 3). */
-.squisq-scene-viewport[data-cursor='default'] {
-  cursor:
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'><path d='M3 3 L3 17 L7 13 L10 19 L12 18 L9 12 L15 12 Z' fill='%231f2937' stroke='white' stroke-width='1.5' stroke-linejoin='round'/></svg>")
-      3 3,
-    default;
-}
-
-/* Crosshair — used by ConnectTool / PathTool / ShapeTool. Hotspot is
-   the cross center (11, 11). */
-.squisq-scene-viewport[data-cursor='crosshair'] {
-  cursor:
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23'><g fill='none' stroke-linecap='round'><path d='M11 1 L11 21 M1 11 L21 11' stroke='white' stroke-width='3.2'/><path d='M11 1 L11 21 M1 11 L21 11' stroke='%231f2937' stroke-width='1.4'/><circle cx='11' cy='11' r='2' fill='white' stroke='%231f2937' stroke-width='1'/></g></svg>")
-      11 11,
-    crosshair;
-}
-
-/* Text I-beam — used by TextTool. Re-uses the same shape as
-   `.squisq-wysiwyg-editor` in editor.css so the look is consistent. */
-.squisq-scene-viewport[data-cursor='text'] {
-  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-scene-dot {
-  fill: var(--squisq-text-muted, #94a3b8);
-  fill-opacity: 0.35;
-}
-
-/* ── Selection ─────────────────────────────────────────────── */
-
-.squisq-scene-selection-outline {
-  fill: none;
-  stroke: #6366f1;
-  stroke-width: 1.5;
-  stroke-dasharray: 4 3;
-  vector-effect: non-scaling-stroke;
-}
-
-.squisq-scene-selection-handle {
-  fill: #ffffff;
-  stroke: #6366f1;
-  stroke-width: 1.5;
-  vector-effect: non-scaling-stroke;
-}
-
-/* ── Tool overlays ────────────────────────────────────────── */
-
-.squisq-scene-marquee {
-  fill: rgba(99, 102, 241, 0.08);
-  stroke: #6366f1;
-  stroke-width: 1;
-  stroke-dasharray: 4 3;
-  vector-effect: non-scaling-stroke;
-}
-
-.squisq-scene-connect-preview {
-  fill: none;
-  stroke: #6366f1;
-  stroke-width: 2;
-  stroke-dasharray: 6 4;
-  vector-effect: non-scaling-stroke;
-  pointer-events: none;
-}
-
-.squisq-scene-connection-point {
-  fill: #ffffff;
-  stroke: #6366f1;
-  stroke-width: 2;
-  vector-effect: non-scaling-stroke;
-  pointer-events: none;
-}
-
-.squisq-scene-connection-point--active {
-  fill: #6366f1;
-}
-
-/* ── Toolbar ──────────────────────────────────────────────── */
-
-.squisq-scene-toolbar {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  z-index: 10;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 4px;
-  padding: 4px;
-  background: #ffffff;
-  border: 1px solid #cbd5e1;
-  border-radius: 6px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
-  max-width: calc(100% - 16px);
-}
-
-.squisq-scene-tool {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 28px;
-  height: 28px;
-  padding: 0 8px;
-  background: #ffffff;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #1e293b;
-  cursor: pointer;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.squisq-scene-tool:hover {
-  background: #f1f5f9;
-  border-color: #cbd5e1;
-  color: #1e293b;
-}
-
-.squisq-scene-tool:focus-visible {
-  outline: 2px solid #6366f1;
-  outline-offset: 1px;
-}
-
-.squisq-scene-tool--active {
-  background: #eef2ff;
-  border-color: #6366f1;
-  color: #4338ca;
-}
-
-.squisq-scene-tool--active:hover {
-  background: #e0e7ff;
-  border-color: #4f46e5;
-  color: #4338ca;
-}
-
-.squisq-scene-tool-label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: inherit;
-}
-
-/* ── Block toolbar (above & outside the canvas) ───────────────
- * Shared chrome for diagram / drawing / layout. A right-aligned row
- * that sits above the canvas box (rendered by `SceneBlockToolbar`).
- * Tool buttons reuse `.squisq-scene-tool`; actions use `.squisq-scene-action`. */
-.squisq-scene-block-toolbar {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-bottom: 6px;
-  min-height: 30px;
-}
-
-.squisq-scene-block-tools,
-.squisq-scene-block-actions {
-  display: inline-flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 4px;
-  padding: 3px;
-  background: var(--squisq-surface, #ffffff);
-  border: 1px solid var(--squisq-border, #cbd5e1);
-  border-radius: 6px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-}
-
-.squisq-scene-action {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  height: 28px;
-  padding: 0 10px;
-  background: #ffffff;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #1e293b;
-  cursor: pointer;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.squisq-scene-action:hover:not(:disabled) {
-  background: #f1f5f9;
-  border-color: #cbd5e1;
-}
-
-.squisq-scene-action--active,
-.squisq-scene-action--active:hover:not(:disabled) {
-  background: #e0e7ff;
-  border-color: #4f46e5;
-  color: #4338ca;
-}
-
-.squisq-scene-action-popover-anchor {
-  position: relative;
-  display: inline-flex;
-}
-
-.squisq-scene-action:focus-visible {
-  outline: 2px solid #6366f1;
-  outline-offset: 1px;
-}
-
-.squisq-scene-action:disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-
-.squisq-scene-action-icon {
-  font-size: 13px;
-  line-height: 1;
-}
-
-.squisq-scene-action-label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.squisq-scene-action--danger {
-  color: #b91c1c;
-}
-
-.squisq-scene-action--danger:hover:not(:disabled) {
-  background: #fef2f2;
-  border-color: #fecaca;
-  color: #b91c1c;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-toolbar,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-block-tools,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-block-actions,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-block-props {
-  background: #111827;
-  border-color: #475569;
-  color: #e5e7eb;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-tool,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-action {
-  background: #111827;
-  color: #e5e7eb;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-tool:hover,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-action:hover:not(:disabled) {
-  background: #1f2937;
-  border-color: #64748b;
-  color: #f8fafc;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-tool--active,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-tool--active:hover,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-action--active,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-action--active:hover:not(:disabled) {
-  background: #312e81;
-  border-color: #818cf8;
-  color: #f8fafc;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-action--danger {
-  color: #fca5a5;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-action--danger:hover:not(:disabled) {
-  background: #450a0a;
-  border-color: #f87171;
-  color: #fecaca;
-}
-
-/* Maximized overlay: a flex-filling canvas with the toolbar as a right-hand
-   column (full screen has room to reserve it). */
-.squisq-scene-block-max {
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  gap: 12px;
-  width: 100%;
-  height: 100%;
-  padding: 12px;
-}
-.squisq-scene-block-max > .squisq-diagram-canvas,
-.squisq-scene-block-max > .squisq-scene-stage,
-.squisq-scene-block-max > .squisq-mermaid-canvas {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-}
-
-/* ── Side (gutter) contextual toolbar ─────────────────────────
-   The drawing/layout/diagram toolbar renders as a vertical ~180px column to
-   the RIGHT of the canvas instead of a horizontal bar above it, so it doesn't
-   reserve any vertical canvas space. Inline, it floats in the page's right
-   gutter (outside the content column); maximized, it's a normal right column. */
-.squisq-scene-shell {
-  position: relative;
-}
-
-.squisq-scene-side-toolbar {
-  position: absolute;
-  top: 0;
-  left: 100%;
-  margin-left: 12px;
-  width: 180px;
-}
-
-.squisq-scene-block-max > .squisq-scene-side-toolbar {
-  position: static;
-  flex: 0 0 180px;
-  width: 180px;
-  overflow-y: auto;
-}
-
-/* Re-flow the (normally horizontal, right-aligned) gutter toolbar into a
-   top-aligned vertical column whose button groups wrap within the 180px. */
-.squisq-scene-side-toolbar .squisq-scene-block-toolbar {
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: flex-start;
-  width: 100%;
-  margin: 0;
-}
-.squisq-scene-side-toolbar .squisq-scene-block-tools,
-.squisq-scene-side-toolbar .squisq-scene-block-actions,
-.squisq-scene-side-toolbar .squisq-scene-block-props {
-  width: 100%;
-}
-
-/* In the gutter the Shape palette can't drop straight down (it'd run off the
-   page edge), so open it toward the canvas (to the left of the button). */
-.squisq-scene-side-toolbar .squisq-scene-tool-popover-anchor .squisq-shape-palette {
-  top: 0;
-  left: auto;
-  right: calc(100% + 6px);
-}
-
-.squisq-scene-side-toolbar .squisq-scene-action-popover-anchor > [role='dialog'] {
-  top: 0;
-  left: auto;
-  right: calc(100% + 6px);
-}
-
-/* ── Narrow-width fallback bar ─────────────────────────────────
-   When SceneSideToolbar measures that the right gutter can't hold the 180px
-   column, it renders the same toolbar as an in-flow horizontal bar above the
-   canvas instead. Normal flow (not an overlay) so it always paints and is
-   never clipped; it just keeps the toolbar's natural horizontal layout and
-   wraps on very narrow widths. */
-.squisq-scene-inline-toolbar {
-  display: flex;
-  margin-bottom: 8px;
-}
-.squisq-scene-inline-toolbar .squisq-scene-block-toolbar {
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  width: 100%;
-  margin: 0;
-}
-
-/* ── View controls + maximize ─────────────────────────────── */
-
-.squisq-scene-view-controls {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  z-index: 10;
-  display: inline-flex;
-  align-items: center;
-  overflow: hidden;
-  border: 1px solid var(--squisq-border, #e2e8f0);
-  border-radius: 6px;
-  background: var(--squisq-surface, #ffffff);
-  color: var(--squisq-text, #1e293b);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-}
-
-.squisq-scene-view-controls button,
-.squisq-scene-view-scale {
-  box-sizing: border-box;
-  min-width: 32px;
-  height: 32px;
-  padding: 0 8px;
-  border: 0;
-  border-right: 1px solid var(--squisq-border, #e2e8f0);
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 12px;
-  line-height: 32px;
-  text-align: center;
-}
-
-.squisq-scene-view-controls button {
-  cursor: pointer;
-}
-
-.squisq-scene-view-controls button:last-child {
-  border-right: 0;
-}
-
-.squisq-scene-view-controls button:hover,
-.squisq-scene-view-fit[data-active='true'] {
-  background: var(--squisq-surface-hover, #f1f5f9);
-}
-
-.squisq-scene-view-fit[data-active='true'] {
-  color: #4338ca;
-  font-weight: 600;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-view-controls {
-  background: #111827;
-  border-color: #475569;
-  color: #e5e7eb;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-view-controls button:hover,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-view-fit[data-active='true'] {
-  background: #312e81;
-  color: #f8fafc;
-}
-
-.squisq-scene-maximize-btn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-  width: 32px;
-  height: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: #ffffff;
-  border: 1px solid #cbd5e1;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 16px;
-  line-height: 1;
-  color: #1e293b;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-}
-
-.squisq-scene-maximize-btn:hover {
-  background: #f1f5f9;
-  border-color: #94a3b8;
-  color: #0f172a;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-maximize-btn {
-  background: #111827;
-  border-color: #475569;
-  color: #e5e7eb;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-maximize-btn:hover {
-  background: #1f2937;
-  border-color: #64748b;
-  color: #f8fafc;
-}
-
-/* ── Diagram node card (used by nodeCard.tsx) ─────────────── */
-
-.squisq-scene-node-card {
-  fill: var(--squisq-surface, #ffffff);
-  stroke: var(--squisq-text, #1e293b);
-  stroke-width: 2;
-  vector-effect: non-scaling-stroke;
-}
-
-.squisq-scene-node-label {
-  fill: var(--squisq-text, #1e293b);
-  font-weight: 600;
-  font-size: 22px;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
-  user-select: none;
-  pointer-events: none;
-}
-
-.squisq-scene-node-handle {
-  fill: var(--squisq-text, #1e293b);
-  cursor: crosshair;
-  pointer-events: all;
-}
-
-.squisq-scene-node-handle:hover {
-  fill: #6366f1;
-}
-
-.squisq-scene-edge-path {
-  fill: none;
-  stroke: var(--squisq-text, #1e293b);
-  stroke-width: 2;
-  vector-effect: non-scaling-stroke;
-}
-
-.squisq-scene-edge-arrow {
-  fill: var(--squisq-text, #1e293b);
-}
-
-.squisq-scene-edge-marker-open {
-  fill: none;
-  stroke: var(--squisq-text, #1e293b);
-  stroke-width: 1.5;
-}
-
-.squisq-scene-edge-label {
-  fill: var(--squisq-text-muted, #64748b);
-  font-size: 14px;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
-  pointer-events: none;
-  user-select: none;
-}
-
-/* ── Drawing shape palette + properties panel ──── */
-
-.squisq-scene-stage {
-  position: relative;
-}
-
-/* Anchor for a toolbar dropdown (the shape palette below the Shape tool). */
-.squisq-scene-tool-popover-anchor {
-  position: relative;
-  display: inline-flex;
-}
-
-/* Shape palette — a light dropdown that pops DOWN from the Shape tool
-   button in the contextual toolbar. */
-.squisq-shape-palette {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 0;
-  width: 320px;
-  max-height: 420px;
-  display: flex;
-  flex-direction: column;
-  background: #ffffff;
-  color: #1e293b;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
-  z-index: 30;
-  padding: 8px;
-}
-
-.squisq-shape-palette-search {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 6px 8px;
-  margin-bottom: 6px;
-  background: #f8fafc;
-  color: inherit;
-  border: 1px solid #cbd5e1;
-  border-radius: 6px;
-}
-
-.squisq-shape-palette-scroll {
-  overflow-y: auto;
-}
-
-.squisq-shape-palette-heading {
-  font-size: 11px;
-  font-weight: 600;
-  opacity: 0.7;
-  margin: 8px 2px 4px;
-  text-transform: uppercase;
-}
-
-.squisq-shape-palette-grid {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 2px;
-}
-
-.squisq-shape-palette-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.squisq-shape-palette-item:hover {
-  background: #f1f5f9;
-  border-color: #e2e8f0;
-}
-
-.squisq-shape-thumb {
-  fill: none;
-  stroke: #334155;
-  stroke-width: 1.5;
-}
-
-.squisq-shape-thumb-line {
-  stroke: #334155;
-  stroke-width: 1.5;
-}
-
-.squisq-shape-thumb-text {
-  fill: #334155;
-  font-size: 22px;
-  font-weight: 700;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-shape-palette {
-  background: #111827;
-  color: #e5e7eb;
-  border-color: #475569;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-shape-palette-search,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-prop-select {
-  background: #0f172a;
-  color: #e5e7eb;
-  border-color: #475569;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-shape-palette-item:hover,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-prop-clear:hover {
-  background: #1f2937;
-  border-color: #64748b;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-shape-thumb,
-.squisq-editor-shell[data-theme='dark'] .squisq-shape-thumb-line {
-  stroke: #e5e7eb;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-shape-thumb-text {
-  fill: #e5e7eb;
-}
-
-/* Per-selection style controls, inline in the contextual toolbar (Fill /
-   Stroke / Color swatches + connector dropdowns) — styled as a pill that
-   matches the tools/actions groups. */
-.squisq-scene-block-props {
-  display: inline-flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  padding: 3px 8px;
-  background: var(--squisq-surface, #ffffff);
-  border: 1px solid var(--squisq-border, #cbd5e1);
-  border-radius: 6px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-  color: #1e293b;
-  font-size: 11px;
-}
-
-.squisq-scene-prop {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.squisq-scene-prop-label {
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  opacity: 0.7;
-}
-
-.squisq-scene-prop-color {
-  width: 26px;
-  height: 22px;
-  padding: 0;
-  background: none;
-  border: 1px solid #cbd5e1;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.squisq-scene-prop-select {
-  background: #f8fafc;
-  color: inherit;
-  border: 1px solid #cbd5e1;
-  border-radius: 4px;
-  padding: 2px 4px;
-  font-size: 11px;
-}
-
-.squisq-scene-prop-clear {
-  font-size: 10px;
-  background: none;
-  border: 1px solid #cbd5e1;
-  color: inherit;
-  border-radius: 4px;
-  padding: 2px 5px;
-  cursor: pointer;
-}
-
-.squisq-scene-prop-clear:hover {
-  background: #f1f5f9;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-prop-color,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-prop-clear {
-  background: #0f172a;
-  color: #e5e7eb;
-  border-color: #475569;
-}
-
-/* ── Inline widget host (mirrors squisq-diagram-inline) ──── */
-
-.squisq-scene-widget-host {
-  margin: 0.75rem 0 1.25rem;
-}
-
-.squisq-scene-inline {
-  position: relative;
-  width: 100%;
-  height: 420px;
-  border: 1px solid var(--squisq-border, #e2e8f0);
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--squisq-surface, #ffffff);
-}
-
-.squisq-scene-inline-placeholder {
-  height: 420px;
-  border: 1px dashed var(--squisq-border, #e2e8f0);
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--squisq-text-muted, #64748b);
-  font-size: 14px;
-}
-
-.squisq-scene-inline-placeholder::before {
-  content: 'Canvas open in full screen — press Esc to return';
-}
-
-/* Hide sub-headings that belong to a layout/drawing block — the canvas
-   owns their visual representation. */
-[data-squisq-scene-child='true'] {
-  display: none;
-}
-
-/* ── Empty state ──────────────────────────────────────────── */
-
-.squisq-scene-empty {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  pointer-events: none;
-  text-align: center;
-  padding: 24px;
-}
-
-.squisq-scene-empty-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--squisq-text, #1e293b);
-}
-
-.squisq-scene-empty-hint {
-  font-size: 12px;
-  color: var(--squisq-text-muted, #64748b);
-  max-width: 320px;
-  line-height: 1.45;
-}
-
-.squisq-scene-empty-btn {
-  pointer-events: auto;
-  margin-top: 4px;
-  padding: 6px 12px;
-  font-size: 12px;
-  font-weight: 500;
-  color: #ffffff;
-  background: #6366f1;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.squisq-scene-empty-btn:hover {
-  background: #4f46e5;
-}