interactive-markdown 0.1.1 → 0.3.0

package/styles/app.css

@@ -103,6 +103,7 @@ body {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 0;
+  min-width: 0;
 }
 
 @media (max-width: 900px) {
@@ -110,12 +111,17 @@ body {
     grid-template-columns: 1fr;
     grid-template-rows: 45vh 1fr;
   }
+
+  .im-graph-canvas {
+    max-height: 22rem;
+  }
 }
 
 .pane {
   display: flex;
   flex-direction: column;
   min-height: 0;
+  min-width: 0;
   border-right: 1px solid var(--border);
 }
 
@@ -133,9 +139,44 @@ body {
   background: #0c1424;
 }
 
-#editor {
+.pane-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  background: #0c1424;
+}
+
+.pane-tabs button {
+  font: inherit;
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  padding: 0.65rem 0.95rem;
+  cursor: pointer;
+}
+
+.pane-tabs button[aria-selected="true"] {
+  color: var(--text);
+  border-bottom-color: var(--accent);
+}
+
+#editor,
+#graph-editor {
   flex: 1;
   width: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+#editor[hidden],
+#graph-editor[hidden] {
+  display: none !important;
+}
+
+#editor {
   resize: none;
   border: 0;
   outline: none;
@@ -148,9 +189,16 @@ body {
   tab-size: 2;
 }
 
+#graph-editor {
+  overflow: auto;
+  padding: 0.85rem 1rem 1.5rem;
+  background: var(--panel-2);
+}
+
 #preview {
   flex: 1;
   overflow: auto;
+  min-width: 0;
   padding: 1rem 1.15rem 2rem;
   background: #0a101c;
 }
@@ -222,6 +270,8 @@ body {
 /* IVM widgets */
 .im-ivm-host {
   margin: 1.1rem 0 1.4rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .im-ivm {
@@ -319,6 +369,34 @@ body {
   margin: 0 auto;
 }
 
+/* A figure with no controls (self-animated SVG) fills the preview instead of the widget card. */
+.im-ivm-static {
+  max-width: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+.im-ivm-static .im-svg-host {
+  background: transparent;
+  border: none;
+  padding: 0;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+/* XY plots: white chart card, no dark SVG stage */
+.im-ivm-plot .im-svg-host {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  padding: 0.35rem;
+}
+
+.im-ivm-plot {
+  max-width: 640px;
+}
+
+
 .im-errors {
   white-space: pre-wrap;
   color: var(--danger);
@@ -334,3 +412,583 @@ body {
 #file-input {
   display: none;
 }
+
+/* Graph editor — node box matches NODE_W / NODE_H in src/graph-editor.js */
+.im-ivm-graph {
+  max-width: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+.im-graph {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.im-graph-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.im-graph-bar button,
+.im-graph-kind-label select,
+.im-graph-kind-label input {
+  font: inherit;
+  font-size: 0.8rem;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--text);
+  padding: 0.35rem 0.65rem;
+  cursor: pointer;
+}
+
+.im-graph-bar button[data-action="add"] {
+  background: linear-gradient(135deg, #0ea5e9, #6366f1);
+  border-color: transparent;
+  color: white;
+  font-weight: 600;
+}
+
+.im-graph-bar button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.im-graph-motion-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.im-graph-motion-bar[hidden] {
+  display: none !important;
+}
+
+.im-graph-kind-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+
+.im-graph-kind-label input {
+  width: 4.5rem;
+  cursor: text;
+}
+
+.im-graph-count {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+.im-graph-help {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.78rem;
+  line-height: 1.4;
+}
+
+.im-graph-canvas {
+  width: 100%;
+  max-width: 100%;
+  overflow: auto;
+  max-height: 32rem;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background:
+    radial-gradient(circle, #1e293b 1px, transparent 1.2px) 0 0 / 16px 16px,
+    #020617;
+  outline: none;
+  user-select: none;
+}
+
+.im-graph-canvas:focus {
+  border-color: #334155;
+  box-shadow: inset 0 0 0 1px #334155;
+}
+
+.im-graph-stage {
+  position: relative;
+  min-width: 100%;
+}
+
+.im-graph-edges {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.im-graph-edge-hit {
+  fill: none;
+  stroke: transparent;
+  stroke-width: 14;
+  pointer-events: stroke;
+  cursor: pointer;
+}
+
+.im-graph-edge {
+  fill: none;
+  stroke: #8ea2d8;
+  stroke-width: 1.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
+.im-graph-edge.is-selected {
+  stroke: #dbe4ff;
+  stroke-width: 2.4;
+}
+
+.im-graph-edge.is-animated {
+  stroke-dasharray: 6 8;
+  animation: im-graph-march 1.2s linear infinite;
+}
+
+.im-graph-edge.is-animated.is-reverse {
+  animation-direction: reverse;
+}
+
+.im-graph-motion {
+  pointer-events: none;
+}
+
+.im-graph-stage.is-animated .im-graph-node {
+  animation: im-graph-pulse 2.4s ease-in-out infinite;
+}
+
+@keyframes im-graph-march {
+  to {
+    stroke-dashoffset: -28;
+  }
+}
+
+@keyframes im-graph-pulse {
+  0%,
+  100% {
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(56, 189, 248, 0);
+  }
+  50% {
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), 0 0 0 4px rgba(56, 189, 248, 0.35);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .im-graph-edge.is-animated,
+  .im-graph-stage.is-animated .im-graph-node {
+    animation: none;
+  }
+
+  .im-graph-edge.is-animated {
+    stroke-dasharray: none;
+  }
+
+  .im-graph-motion {
+    display: none;
+  }
+}
+
+.im-graph-edge-temp {
+  stroke: #7dd3fc;
+  stroke-dasharray: 5 4;
+  pointer-events: none;
+}
+
+.im-graph-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  text-align: center;
+  color: var(--muted);
+  pointer-events: none;
+}
+
+.im-graph-empty[hidden] {
+  display: none;
+}
+
+.im-graph-node {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 168px;
+  height: 56px;
+  padding: 0 18px;
+  border: 1px solid #334155;
+  border-radius: 12px;
+  background: #111827;
+  color: var(--text);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
+  cursor: grab;
+  touch-action: none;
+}
+
+.im-graph-node.is-selected {
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 1px #38bdf8, 0 8px 20px rgba(0, 0, 0, 0.28);
+}
+
+.im-graph-kind-input {
+  border-radius: 28px;
+  background: #0c1f33;
+  border-color: #0369a1;
+}
+
+.im-graph-kind-output {
+  background: #102318;
+  border-color: #166534;
+}
+
+.im-graph-kind-decision {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.im-graph-kind-decision.is-selected {
+  box-shadow: none;
+}
+
+.im-graph-diamond {
+  position: absolute;
+  inset: 1px 6px;
+  z-index: 0;
+  background: #8b7cc8;
+  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
+}
+
+.im-graph-diamond::after {
+  content: "";
+  position: absolute;
+  inset: 1.5px;
+  background: #1a1530;
+  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
+}
+
+.im-graph-kind-decision.is-selected .im-graph-diamond {
+  background: #c4b5fd;
+}
+
+.im-graph-label {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.86rem;
+  text-align: center;
+}
+
+.im-graph-port {
+  position: absolute;
+  z-index: 2;
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  border: 2px solid #8ea2d8;
+  border-radius: 50%;
+  background: #0f172a;
+  cursor: crosshair;
+}
+
+.im-graph-port-left {
+  top: 50%;
+  left: -6px;
+  margin-top: -6px;
+}
+
+.im-graph-port-right {
+  top: 50%;
+  right: -6px;
+  margin-top: -6px;
+}
+
+.im-graph-port-top {
+  top: -6px;
+  left: 50%;
+  margin-left: -6px;
+}
+
+.im-graph-port-bottom {
+  bottom: -6px;
+  left: 50%;
+  margin-left: -6px;
+}
+
+.im-graph-port:hover,
+.im-graph-port:focus-visible {
+  background: #38bdf8;
+  border-color: #e0f2fe;
+}
+
+.im-graph-rename {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  padding: 0.2rem 0.3rem;
+  border: 1px solid #38bdf8;
+  border-radius: 6px;
+  background: #020617;
+  color: var(--text);
+  font: inherit;
+  font-size: 0.86rem;
+  text-align: center;
+}
+
+.im-doc {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+  max-width: 52rem;
+}
+
+.im-doc-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.im-doc-add {
+  position: relative;
+}
+
+.im-doc-menu {
+  position: absolute;
+  z-index: 6;
+  top: calc(100% + 0.35rem);
+  left: 0;
+  min-width: 14rem;
+  max-height: 22rem;
+  overflow: auto;
+  padding: 0.35rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
+}
+
+.im-doc-menu[hidden] {
+  display: none !important;
+}
+
+.im-doc-menu-group + .im-doc-menu-group {
+  margin-top: 0.35rem;
+  padding-top: 0.35rem;
+  border-top: 1px solid var(--border);
+}
+
+.im-doc-menu-label {
+  margin: 0.15rem 0.45rem 0.25rem;
+  font-size: 0.68rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.im-doc-menu button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border-color: transparent;
+  cursor: grab;
+  touch-action: none;
+}
+
+.im-doc.is-dragging,
+.im-doc.is-dragging .im-doc-menu button {
+  cursor: grabbing;
+}
+
+.im-doc-drag-ghost {
+  position: fixed;
+  z-index: 20;
+  pointer-events: none;
+  padding: 0.35rem 0.65rem;
+  border-radius: 8px;
+  border: 1px solid var(--accent);
+  background: var(--panel);
+  color: var(--text);
+  font-size: 0.8rem;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+.im-doc-drag-ghost[hidden],
+.im-doc-snap[hidden] {
+  display: none !important;
+}
+
+.im-doc-snap {
+  position: fixed;
+  z-index: 15;
+  height: 2px;
+  margin-top: -1px;
+  border-radius: 2px;
+  background: var(--accent);
+  pointer-events: none;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
+}
+
+.im-doc-block.is-snap-target {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+}
+
+.im-doc-bar button,
+.im-doc-bar select,
+.im-doc-block-bar button,
+.im-doc-sub button,
+.im-doc-field input,
+.im-doc-field textarea,
+.im-doc-field select {
+  font: inherit;
+  font-size: 0.8rem;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--text);
+  padding: 0.35rem 0.65rem;
+}
+
+.im-doc-bar button,
+.im-doc-block-bar button,
+.im-doc-sub button {
+  cursor: pointer;
+}
+
+.im-doc-bar button:hover,
+.im-doc-block-bar button:hover,
+.im-doc-sub button:hover {
+  border-color: var(--accent);
+}
+
+.im-doc-block-bar button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.im-doc-help,
+.im-doc-empty {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.im-doc-empty[hidden] {
+  display: none;
+}
+
+.im-doc-blocks {
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  min-width: 0;
+}
+
+.im-doc-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  min-width: 0;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel);
+}
+
+.im-doc-block.is-selected {
+  border-color: var(--accent);
+}
+
+.im-doc-block-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.im-doc-kind {
+  font-weight: 600;
+}
+
+.im-doc-summary {
+  margin: 0;
+  white-space: pre-wrap;
+  font-size: 0.92rem;
+}
+
+.im-doc-prose {
+  margin: 0;
+}
+
+.im-doc-inspector {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.im-doc-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+.im-doc-field input,
+.im-doc-field textarea,
+.im-doc-field select {
+  width: 100%;
+}
+
+.im-doc-field input[type="checkbox"] {
+  width: auto;
+  justify-self: start;
+}
+
+.im-doc-sub {
+  margin: 0;
+  padding: 0.55rem 0.65rem 0.7rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+
+.im-doc-sub legend {
+  padding: 0 0.3rem;
+  color: var(--text);
+  font-size: 0.8rem;
+}
+
+.im-doc-live,
+.im-doc-live-host {
+  min-width: 0;
+  max-width: 100%;
+}