@bendyline/squisq-editor-react 1.5.3 → 1.6.0

package/src/scene/scene.css

@@ -0,0 +1,649 @@
+/*
+ * 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-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;
+}
+
+/* ── 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: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;
+}
+
+/* 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 {
+  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) toolbar into a top-aligned
+   vertical column whose button groups wrap within the 180px width. */
+.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);
+}
+
+/* ── Maximize button ──────────────────────────────────────── */
+
+.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;
+}
+
+/* ── 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;
+}
+
+/* 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;
+}
+
+/* ── 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;
+}