@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/styles/ascii-timeline.css

@@ -1,596 +0,0 @@
-/* WYSIWYG surface for authored ASCII timeline fences.
- *
- * Keep this namespace distinct from `.squisq-timeline-*`, which belongs to
- * the editor's document playback/timing track. */
-
-.squisq-wysiwyg-editor pre.squisq-ascii-timeline-fence-hidden {
-  display: none;
-}
-
-.squisq-ascii-timeline-widget-host {
-  margin: 0.75rem 0 1.25rem;
-}
-
-.squisq-ascii-timeline-editor {
-  --squisq-ascii-timeline-accent: var(--squisq-theme-primary, #6366f1);
-  --squisq-ascii-timeline-label-width: 160px;
-  border: 1px solid var(--squisq-border, #e2e8f0);
-  border-radius: 10px;
-  background: var(--squisq-input-bg, #fff);
-  color: var(--squisq-text, #1e293b);
-  overflow: hidden;
-  font-size: 14px;
-}
-
-.squisq-ascii-timeline-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  min-height: 36px;
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--squisq-border, #e2e8f0);
-  background: var(--squisq-bg, #f8fafc);
-}
-
-.squisq-ascii-timeline-header > span {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-weight: 650;
-}
-
-.squisq-ascii-timeline-header small {
-  color: var(--squisq-text-muted, #64748b);
-}
-
-.squisq-ascii-timeline-header-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.squisq-ascii-timeline-header-actions button {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 4px 8px;
-  border: 1px solid var(--squisq-border, #cbd5e1);
-  border-radius: 5px;
-  background: var(--squisq-input-bg, #fff);
-  color: var(--squisq-ascii-timeline-accent);
-  font: inherit;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.squisq-ascii-timeline-header-actions button:hover,
-.squisq-ascii-timeline-header-actions button:focus-visible {
-  border-color: var(--squisq-ascii-timeline-accent);
-  outline: 2px solid color-mix(in srgb, var(--squisq-ascii-timeline-accent) 22%, transparent);
-}
-
-.squisq-ascii-timeline-canvas {
-  position: relative;
-  min-width: 600px;
-  padding: 8px 18px 8px 10px;
-  overflow-x: auto;
-}
-
-.squisq-ascii-timeline-track {
-  display: grid;
-  grid-template-columns: var(--squisq-ascii-timeline-label-width) minmax(420px, 1fr);
-  gap: 12px;
-  height: 96px;
-  align-items: center;
-}
-
-.squisq-ascii-timeline-track-label {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 5px;
-  color: var(--squisq-text-muted, #64748b);
-  font-size: 12px;
-  font-weight: 650;
-  text-align: right;
-  white-space: nowrap;
-}
-
-.squisq-ascii-timeline-track-name {
-  min-width: 0;
-  flex: 1 1 auto;
-  padding: 3px 4px;
-  overflow: hidden;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-button.squisq-ascii-timeline-track-name {
-  cursor: text;
-}
-
-button.squisq-ascii-timeline-track-name:hover,
-button.squisq-ascii-timeline-track-name:focus-visible {
-  border-color: var(--squisq-border, #cbd5e1);
-  background: var(--squisq-input-bg, #fff);
-  outline: none;
-}
-
-.squisq-ascii-timeline-track-name-input {
-  width: 100%;
-  min-width: 0;
-  flex: 1 1 auto;
-  padding: 3px 4px;
-  border: 1px solid var(--squisq-ascii-timeline-accent);
-  border-radius: 4px;
-  background: var(--squisq-input-bg, #fff);
-  color: var(--squisq-text, #1e293b);
-  font: inherit;
-  text-align: right;
-  outline: 2px solid color-mix(in srgb, var(--squisq-ascii-timeline-accent) 22%, transparent);
-}
-
-.squisq-ascii-timeline-track-delete {
-  display: grid;
-  width: 22px;
-  height: 22px;
-  flex: 0 0 22px;
-  place-items: center;
-  padding: 0;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--squisq-text-muted, #64748b);
-  cursor: pointer;
-}
-
-.squisq-ascii-timeline-track-delete:hover,
-.squisq-ascii-timeline-track-delete:focus-visible {
-  background: color-mix(in srgb, #ef4444 12%, transparent);
-  color: #dc2626;
-  outline: 2px solid color-mix(in srgb, #ef4444 25%, transparent);
-}
-
-.squisq-ascii-timeline-track-delete:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-
-.squisq-ascii-timeline-track-add {
-  display: grid;
-  width: 22px;
-  height: 22px;
-  flex: 0 0 22px;
-  place-items: center;
-  padding: 0;
-  border: 1px solid var(--squisq-border, #cbd5e1);
-  border-radius: 50%;
-  background: var(--squisq-input-bg, #fff);
-  color: var(--squisq-ascii-timeline-accent);
-  font:
-    700 15px/1 system-ui,
-    sans-serif;
-  cursor: pointer;
-}
-
-.squisq-ascii-timeline-track-add:hover,
-.squisq-ascii-timeline-track-add:focus-visible,
-.squisq-ascii-timeline-track-add[aria-pressed='true'] {
-  border-color: var(--squisq-ascii-timeline-accent);
-  outline: 2px solid color-mix(in srgb, var(--squisq-ascii-timeline-accent) 22%, transparent);
-}
-
-.squisq-ascii-timeline-rail {
-  position: relative;
-  height: 96px;
-  min-width: 420px;
-  outline: none;
-  cursor: default;
-}
-
-.squisq-ascii-timeline-rail--adding {
-  cursor: crosshair;
-}
-
-.squisq-ascii-timeline-rail--readonly {
-  cursor: default;
-}
-
-.squisq-ascii-timeline-rail-line {
-  position: absolute;
-  z-index: 1;
-  top: 50%;
-  right: 0;
-  left: 0;
-  height: 2px;
-  border-radius: 999px;
-  background: var(--squisq-text-muted, #94a3b8);
-  pointer-events: none;
-}
-
-.squisq-ascii-timeline-rail-line::after {
-  position: absolute;
-  top: 50%;
-  right: -1px;
-  width: 8px;
-  height: 8px;
-  border-top: 2px solid currentColor;
-  border-right: 2px solid currentColor;
-  color: var(--squisq-text-muted, #94a3b8);
-  content: '';
-  transform: translateY(-50%) rotate(45deg);
-}
-
-.squisq-ascii-timeline-add-ghost,
-.squisq-ascii-timeline-gap-add {
-  position: absolute;
-  z-index: 4;
-  top: 50%;
-  display: grid;
-  width: 22px;
-  height: 22px;
-  place-items: center;
-  border: 1px solid var(--squisq-ascii-timeline-accent);
-  border-radius: 50%;
-  background: var(--squisq-input-bg, #fff);
-  color: var(--squisq-ascii-timeline-accent);
-  font:
-    700 15px/1 system-ui,
-    sans-serif;
-  transform: translate(-50%, -50%);
-}
-
-.squisq-ascii-timeline-add-ghost {
-  opacity: 0.72;
-  pointer-events: none;
-}
-
-.squisq-ascii-timeline-gap-add {
-  padding: 0;
-  opacity: 0.12;
-  cursor: pointer;
-  transition:
-    opacity 120ms ease,
-    transform 120ms ease;
-}
-
-.squisq-ascii-timeline-rail:hover .squisq-ascii-timeline-gap-add,
-.squisq-ascii-timeline-gap-add:focus-visible {
-  opacity: 0.9;
-}
-
-.squisq-ascii-timeline-gap-add:hover,
-.squisq-ascii-timeline-gap-add:focus-visible {
-  outline: none;
-  transform: translate(-50%, -50%) scale(1.12);
-}
-
-.squisq-ascii-timeline-point {
-  position: absolute;
-  z-index: 6;
-  top: 50%;
-  width: 0;
-  height: 0;
-}
-
-.squisq-ascii-timeline-marker {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 2;
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: transparent;
-  cursor: grab;
-  touch-action: none;
-  user-select: none;
-  transform: translate(-50%, -50%);
-}
-
-.squisq-ascii-timeline-point--dragging {
-  z-index: 8;
-}
-
-.squisq-ascii-timeline-point--dragging .squisq-ascii-timeline-marker {
-  cursor: grabbing;
-}
-
-.squisq-ascii-timeline-point--dragging .squisq-ascii-timeline-marker::before {
-  box-shadow:
-    0 0 0 3px var(--squisq-input-bg, #fff),
-    0 0 0 7px color-mix(in srgb, var(--squisq-ascii-timeline-accent) 72%, transparent);
-}
-
-.squisq-ascii-timeline-rail--readonly .squisq-ascii-timeline-marker {
-  cursor: pointer;
-}
-
-.squisq-ascii-timeline-marker::before {
-  display: block;
-  width: 12px;
-  height: 12px;
-  margin: 12px;
-  border: 2px solid var(--squisq-ascii-timeline-accent);
-  border-radius: 50%;
-  background: var(--squisq-ascii-timeline-accent);
-  box-sizing: border-box;
-  content: '';
-}
-
-.squisq-ascii-timeline-marker--hollow::before {
-  background: var(--squisq-input-bg, #fff);
-}
-
-.squisq-ascii-timeline-marker--diamond::before {
-  border-radius: 2px;
-  transform: rotate(45deg);
-}
-
-.squisq-ascii-timeline-marker:hover::before {
-  box-shadow: 0 0 0 5px color-mix(in srgb, var(--squisq-ascii-timeline-accent) 18%, transparent);
-}
-
-.squisq-ascii-timeline-marker:focus-visible {
-  outline: 2px solid var(--squisq-ascii-timeline-accent);
-  outline-offset: 1px;
-}
-
-.squisq-ascii-timeline-marker--selected::before {
-  box-shadow:
-    0 0 0 3px var(--squisq-input-bg, #fff),
-    0 0 0 6px var(--squisq-ascii-timeline-accent);
-}
-
-.squisq-ascii-timeline-callout,
-.squisq-ascii-timeline-description {
-  position: absolute;
-  left: 0;
-  width: 128px;
-  overflow: hidden;
-  color: var(--squisq-text, #1e293b);
-  line-height: 1.2;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  pointer-events: none;
-  transform: translateX(-50%);
-}
-
-.squisq-ascii-timeline-callout {
-  font-size: 12px;
-  font-weight: 650;
-}
-
-.squisq-ascii-timeline-description {
-  color: var(--squisq-text-muted, #64748b);
-  font-size: 10px;
-}
-
-.squisq-ascii-timeline-callout--above {
-  bottom: 14px;
-}
-
-.squisq-ascii-timeline-callout--below {
-  top: 14px;
-}
-
-.squisq-ascii-timeline-description--above {
-  bottom: 30px;
-}
-
-.squisq-ascii-timeline-description--below {
-  top: 30px;
-}
-
-.squisq-ascii-timeline-end-label {
-  position: absolute;
-  top: calc(50% + 8px);
-  right: 0;
-  max-width: 100px;
-  overflow: hidden;
-  color: var(--squisq-text-muted, #64748b);
-  font-size: 10px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  pointer-events: none;
-}
-
-.squisq-ascii-timeline-branches {
-  position: absolute;
-  z-index: 2;
-  top: 8px;
-  right: 18px;
-  bottom: 8px;
-  left: calc(10px + var(--squisq-ascii-timeline-label-width) + 12px);
-  width: calc(100% - var(--squisq-ascii-timeline-label-width) - 40px);
-  height: calc(var(--squisq-ascii-timeline-track-count) * 96px);
-  overflow: visible;
-  pointer-events: none;
-}
-
-.squisq-ascii-timeline-branches path {
-  fill: none;
-  stroke: color-mix(in srgb, var(--squisq-ascii-timeline-accent) 72%, transparent);
-  stroke-width: 2;
-  stroke-dasharray: 4 3;
-}
-
-.squisq-ascii-timeline-link-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin: 0;
-  padding: 0 10px 8px;
-  list-style: none;
-}
-
-.squisq-ascii-timeline-link-list li {
-  padding: 2px 7px;
-  border-radius: 999px;
-  background: var(--squisq-bg, #f1f5f9);
-  color: var(--squisq-text-muted, #64748b);
-  font-size: 11px;
-  list-style: none;
-}
-
-.squisq-ascii-timeline-inspector {
-  display: grid;
-  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.5fr) 120px 120px;
-  gap: 8px;
-  margin: 0;
-  padding: 10px;
-  border: 0;
-  border-top: 1px solid var(--squisq-border, #e2e8f0);
-  background: var(--squisq-bg, #f8fafc);
-}
-
-.squisq-ascii-timeline-inspector legend {
-  grid-column: 1 / -1;
-  padding: 0 4px;
-  color: var(--squisq-text, #1e293b);
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.squisq-ascii-timeline-inspector legend span {
-  color: var(--squisq-text-muted, #64748b);
-  font-weight: 500;
-}
-
-.squisq-ascii-timeline-inspector label {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 3px;
-  color: var(--squisq-text-muted, #64748b);
-  font-size: 11px;
-}
-
-.squisq-ascii-timeline-inspector input,
-.squisq-ascii-timeline-inspector textarea,
-.squisq-ascii-timeline-inspector select {
-  min-width: 0;
-  border: 1px solid var(--squisq-border, #cbd5e1);
-  border-radius: 5px;
-  background: var(--squisq-input-bg, #fff);
-  color: var(--squisq-text, #1e293b);
-  font: inherit;
-  padding: 5px 7px;
-}
-
-.squisq-ascii-timeline-inspector input:focus,
-.squisq-ascii-timeline-inspector textarea:focus,
-.squisq-ascii-timeline-inspector select:focus {
-  border-color: var(--squisq-ascii-timeline-accent);
-  outline: 2px solid color-mix(in srgb, var(--squisq-ascii-timeline-accent) 22%, transparent);
-}
-
-.squisq-ascii-timeline-inspector-description textarea {
-  resize: vertical;
-}
-
-.squisq-ascii-timeline-inspector .squisq-ascii-timeline-checkbox {
-  grid-column: 1 / 2;
-  flex-direction: row;
-  align-items: center;
-  align-self: center;
-  color: var(--squisq-text, #1e293b);
-}
-
-.squisq-ascii-timeline-checkbox input {
-  width: auto;
-}
-
-.squisq-ascii-timeline-delete {
-  grid-column: 4 / 5;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  align-self: end;
-  padding: 5px 8px;
-  border: 1px solid color-mix(in srgb, #ef4444 45%, var(--squisq-border, #e2e8f0));
-  border-radius: 5px;
-  background: transparent;
-  color: #dc2626;
-  cursor: pointer;
-}
-
-.squisq-ascii-timeline-delete:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.squisq-ascii-timeline-warnings {
-  padding: 0 10px 8px;
-  color: var(--squisq-text-muted, #64748b);
-  font-size: 11px;
-}
-
-.squisq-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-@media (max-width: 760px) {
-  .squisq-ascii-timeline-editor {
-    --squisq-ascii-timeline-label-width: 132px;
-  }
-
-  .squisq-ascii-timeline-inspector {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .squisq-ascii-timeline-inspector-description,
-  .squisq-ascii-timeline-inspector legend {
-    grid-column: 1 / -1;
-  }
-
-  .squisq-ascii-timeline-delete {
-    grid-column: 2 / 3;
-  }
-
-  .squisq-ascii-timeline-header-actions small {
-    display: none;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .squisq-ascii-timeline-gap-add {
-    transition: none;
-  }
-}
-
-@media (forced-colors: active) {
-  .squisq-ascii-timeline-marker::before,
-  .squisq-ascii-timeline-gap-add,
-  .squisq-ascii-timeline-add-ghost {
-    border-color: ButtonText;
-    forced-color-adjust: none;
-  }
-
-  .squisq-ascii-timeline-rail-line,
-  .squisq-ascii-timeline-branches path {
-    background: CanvasText;
-    stroke: CanvasText;
-  }
-}