@bptlab/openbpt-modeler-typed-pn-variants 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Business Process Technology
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# openbpt-typed-pn-variants-modeler
+
+A modeler for various typed Petri net variants presented in literature. Currently supported types are:
+
+- [t-PNID](https://journals.sagepub.com/doi/10.3233/FI-2009-0095) (typed Petri nets with Identifiers) with inhibitor arcs
+- [OCPN](https://journals.sagepub.com/doi/abs/10.3233/FI-2020-1946) (Object-centric Petri nets)
+- [OPID](https://link.springer.com/chapter/10.1007/978-3-031-61057-8_1) (Object-centric Petri nets with Identifiers) with the exact synchronization extension presented for [DOPID](https://link.springer.com/chapter/10.1007/978-3-031-94571-7_11) (Data-aware Object-centri Petri nets with Identifiers)
+
+The modeler is based on the [openbpt-modeler-petri-net](https://github.com/bptlab/openbpt-modeler-petri-net) modeler, which makes use of the wonderful [diagram-js](https://github.com/bpmn-io/diagram-js) library and took inspiration from [bpmn-js](https://github.com/bpmn-io/bpmn-js), [object-diagram-js](https://github.com/timKraeuter/object-diagram-js) and [fcm-js](https://github.com/bptlab/fCM-design-support).
+
+## Development Setup
+
+1. Clone this repository: ``git clone git@github.com:bptlab/openbpt-typed-pn-variants-modeler.git``
+2. Navigate into the created directory
+3. Run ``npm install``
+4. Run ``npm link``
+5. Clone the [development repository](https://github.com/bptlab/openbpt-modeler-dev/tree/openbpt-typed-pn-variants-modeler): ``git clone git@github.com:bptlab/openbpt-modeler-dev.git``
+6. Navigate into the created directory
+7. Checkout the `openbpt-typed-pn-variants-modeler` branch
+8. Run ``npm install``
+9. Run ``npm link openbpt-typed-pn-variants-modeler``
+
+To start the modeler, run
+1. ``npm run watch`` in this repository to automatically compile changes to js (relevant for changes to .ts files)
+2. ``npm run dev`` in the development repo's directory.

package/assets/icons/pn-fire-transition.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" viewBox="0 0 1000 1000" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 212.722656 22.050781 C 122.566406 -29.664062 49.476562 12.699219 49.476562 116.597656 L 49.476562 883.328125 C 49.476562 987.332031 122.566406 1029.640625 212.722656 977.976562 L 882.882812 593.644531 C 973.070312 541.910156 973.070312 458.09375 882.882812 406.375 Z M 212.722656 22.050781 "/>
+</g>
+</svg>

package/assets/icons/pn-inhibitor-arc.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 2048.0001 2048"
+   height="2048mm"
+   width="2048mm"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     id="rect1"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+     d="m 1724.0002,24.000085 c -164.9253,0 -300.0003,135.074455 -300.0003,299.999775 0,62.29226 19.2693,120.32629 52.1384,168.4321 L 24.000085,1944.5702 103.42986,2024 1555.5681,571.86174 c 48.1058,32.86907 106.1399,52.13841 168.4321,52.13841 C 1888.9255,624.00015 2024,488.92518 2024,323.99986 2024,159.07454 1888.9255,24.000085 1724.0002,24.000085 Z m 0,128.353405 c 95.5581,0 171.6464,76.08811 171.6464,171.64637 0,95.55826 -76.0883,171.64637 -171.6464,171.64637 -95.5581,0 -171.6469,-76.08811 -171.6469,-171.64637 0,-95.55826 76.0888,-171.64637 171.6469,-171.64637 z" />
+</svg>

package/assets/icons/pn-place.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="2048mm"
+   height="2048mm"
+   viewBox="0 0 2048 2048"
+   version="1.1"
+   id="svg5105"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="pn-place.svg">
+  <defs
+     id="defs5099" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.11313708"
+     inkscape:cx="3731.6926"
+     inkscape:cy="3957.7145"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5102">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,1751)">
+    <path
+       id="path5650"
+       transform="matrix(0.26458333,0,0,0.26458333,0,-1751)"
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:279.05026245;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 3870.2363,374.17383 c -927.16,0 -1816.4907,368.36969 -2472.0918,1023.97067 -655.60105,655.601 -1023.97069,1544.9318 -1023.97067,2472.0918 0,927.16 368.36962,1816.4907 1023.97067,2472.0918 655.6011,655.6011 1544.9319,1023.9707 2472.0918,1023.9707 927.1601,1e-4 1816.4908,-368.3696 2472.0918,-1023.9707 655.601,-655.6011 1023.9707,-1544.9318 1023.9707,-2472.0918 0,-927.16 -368.3697,-1816.4908 -1023.9707,-2472.0918 C 5686.7271,742.54352 4797.3964,374.17383 3870.2363,374.17383 Z m 0,279.04883 c 853.2586,0 1671.4286,338.89535 2274.7735,942.24024 603.3448,603.3449 942.2402,1421.515 942.2402,2274.7734 0,853.2585 -338.8954,1671.4286 -942.2402,2274.7735 -603.3449,603.3448 -1421.5149,942.2382 -2274.7735,942.2382 -853.2584,0 -1671.4286,-338.8934 -2274.7734,-942.2382 -603.34482,-603.3449 -942.24024,-1421.515 -942.24024,-2274.7735 0,-853.2584 338.89542,-1671.4285 942.24024,-2274.7734 603.3448,-603.34489 1421.515,-942.24024 2274.7734,-942.24024 z" />
+  </g>
+</svg>

package/assets/icons/pn-transition.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 2048.0001 2048"
+   height="2048mm"
+   width="2048mm">
+  <defs
+     id="defs2">
+    <linearGradient
+       osb:paint="solid"
+       id="linearGradient4536">
+      <stop
+         id="stop4534"
+         offset="0"
+         style="stop-color:#000001;stop-opacity:1;" />
+    </linearGradient>
+  </defs>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(12.329584,2007.3581)"
+     id="layer1">
+    <path
+       d="M 374.17188,374.17578 V 458.35156 7366.3027 H 7366.2969 V 374.17578 Z M 542.5293,542.53516 H 7197.9395 V 7197.9434 H 542.5293 Z"
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:168.35902405;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       transform="matrix(0.26458333,0,0,0.26458333,-12.329584,-2007.3581)"
+       id="rect4518" />
+  </g>
+</svg>

package/assets/icons/pn-unfire-transition.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" viewBox="0 0 1000 1000" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 787.277344 977.949219 C 877.433594 1029.664062 950.5234379999999 987.300781 950.5234379999999 883.402344 L 950.5234379999999 116.671875 C 950.5234379999999 12.667968999999971 877.433594 -29.640625 787.277344 22.023438000000056 L 117.11718800000006 406.35546899999997 C 26.929688000000056 458.08984399999997 26.929688000000056 541.90625 117.11718800000006 593.625 Z M 787.277344 977.949219"/>
+</g>
+</svg>

package/assets/icons/reset.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="currentColor" d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"/></svg>

package/assets/icons/toggle-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="currentColor" d="M384 64H192C85.961 64 0 149.961 0 256s85.961 192 192 192h192c106.039 0 192-85.961 192-192S490.039 64 384 64zM64 256c0-70.741 57.249-128 128-128 70.741 0 128 57.249 128 128 0 70.741-57.249 128-128 128-70.741 0-128-57.249-128-128zm320 128h-48.905c65.217-72.858 65.236-183.12 0-256H384c70.741 0 128 57.249 128 128 0 70.74-57.249 128-128 128z"/></svg>

package/assets/icons/toggle-on.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="currentColor" d="M384 64H192C86 64 0 150 0 256s86 192 192 192h192c106 0 192-86 192-192S490 64 384 64zm0 320c-70.8 0-128-57.3-128-128 0-70.8 57.3-128 128-128 70.8 0 128 57.3 128 128 0 70.8-57.3 128-128 128z"/></svg>

package/assets/simulation.css

@@ -0,0 +1,265 @@
+.canvas {
+  padding: 0px;
+}
+
+.simulation {
+  box-shadow: inset 0px 0px 0px 4px
+    var(--token-simulation-green-base-44, #10d070);
+}
+
+.tpn-toggle-mode {
+  cursor: pointer;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background-color: var(--token-simulation-silver-darken-94, #efefef);
+  border-radius: 2px;
+  padding: 6px;
+  font-size: 16px;
+  color: var(--token-simulation-grey-darken-30, #212121);
+  user-select: none;
+  display: inline-flex;
+}
+
+.tpn-toggle-mode .tpn-toggle {
+  margin-left: 0.25em;
+  display: inline-flex;
+}
+
+.djs-container.simulation .tpn-toggle-mode,
+.tpn-toggle-mode:hover {
+  background-color: var(--token-simulation-green-base-44, #10d070);
+  color: var(--token-simulation-white, #000000);
+}
+
+.djs-container.simulation .djs-bendpoint,
+.djs-container.simulation .djs-context-pad,
+.djs-container.simulation .djs-outline,
+.djs-container.simulation .djs-palette,
+.djs-container.simulation .djs-resizer,
+.djs-container.simulation .djs-segment-dragger {
+  display: none !important;
+}
+
+.djs-container.simulation
+  .djs-overlay:not(
+    .djs-overlay-bts-context-menu,
+    .djs-overlay-bts-element-notification,
+    .djs-overlay-bts-token-count
+  ) {
+  display: none !important;
+}
+
+/* Ensure our fire overlay is visible in simulation mode */
+.djs-container.simulation .djs-overlay-bts-fire-overlay {
+  display: block !important;
+}
+
+.djs-container.simulation .djs-overlay-bts-fire-overlay .bts-fire-overlay {
+  z-index: 2000 !important;
+  pointer-events: auto !important;
+}
+
+/* Even stronger override in case other stylesheets apply display:none to .djs-overlay */
+.djs-container.simulation
+  .djs-overlays
+  .djs-overlay.djs-overlay-bts-fire-overlay {
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+  pointer-events: auto !important;
+}
+
+.djs-container .djs-palette {
+  top: 60px !important;
+}
+
+.bts-palette {
+  position: absolute;
+  top: 60px;
+  left: 20px;
+}
+
+.bts-palette.hidden {
+  display: none;
+}
+
+.bts-palette .bts-entry {
+  cursor: pointer;
+  background-color: var(--token-simulation-silver-darken-94, #efefef);
+  border-radius: 2px;
+  padding: 6px 0;
+  margin-bottom: 6px;
+  font-size: 16px;
+  color: var(--token-simulation-grey-darken-30, #212121);
+  user-select: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  box-sizing: border-box;
+  transition: all 0.1s ease;
+}
+
+.bts-palette .bts-entry:last-child {
+  margin-bottom: 0;
+}
+
+.bts-palette .bts-entry:not(.disabled):hover {
+  color: var(--token-simulation-white, #ffffff);
+  background-color: var(--token-simulation-green-base-44, #10d070);
+}
+
+.bts-palette .bts-entry.active {
+  color: var(--token-simulation-white, #ffffff);
+  background-color: var(--token-simulation-green-base-44, #10d070);
+}
+
+.bts-palette .bts-entry.disabled {
+  pointer-events: none;
+  color: var(--token-simulation-grey-base-40, #666666);
+}
+
+.bts-context-pad {
+  cursor: pointer;
+  background-color: var(--token-simulation-grey-lighten-56, #909090);
+  border-radius: 2px;
+  margin: 0;
+  font-size: 16px;
+  color: var(--token-simulation-grey-darken-30, #212121);
+  opacity: 0.5;
+  transition: all 0.1s ease-in-out;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+/* wrapper for multiple context pads so each button has its own background */
+.bts-context-menu-wrapper {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.djs-overlay-bts-context-menu .bts-context-pad {
+  /* ensure overlay sizing doesn't collapse when multiple pads exist */
+  width: 30px;
+  height: 30px;
+}
+
+.bts-context-pad:not(.disabled):hover {
+  background-color: var(--token-simulation-green-base-44, #10d070);
+  opacity: 1;
+  color: var(--token-simulation-white, #ffffff);
+}
+
+.djs-overlays:not(.hover) .bts-context-pad:not(:hover).show-hover,
+.bts-context-pad:not(:hover) .show-hover,
+.bts-context-pad:hover .hide-hover {
+  display: none;
+}
+
+.bts-context-pad.disabled {
+  background-color: var(--token-simulation-silver-darken-94, #efefef);
+  color: var(--token-simulation-grey-base-40, #666666);
+  pointer-events: none;
+}
+
+.bts-context-pad.hidden {
+  display: none;
+}
+
+.bts-context-pad [class^="bpmn-icon-"]:before,
+.bts-context-pad [class*=" bpmn-icon-"]:before {
+  margin: 0;
+}
+
+/* fast-fire icon in context pad */
+.pn-icon-fast-fire:before {
+  content: "⚡";
+}
+
+/* Fire overlay (moved from inline styles in FireTransitionHandler.js) */
+.bts-fire-overlay {
+  background: #fff;
+  padding: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  min-width: 260px;
+  box-sizing: border-box;
+}
+
+.bts-fire-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.bts-fire-title {
+  font-weight: 600;
+}
+
+.bts-fire-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.bts-fire-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.bts-fire-row select {
+  flex: 1 1 auto;
+}
+
+/* Ensure two-column layout: label (left) and control (right).
+   Apply to common adapter output shapes by selecting immediate children
+   and common form-js generated wrappers. */
+.bts-fire-fields > * {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  gap: 8px !important;
+}
+
+.bts-fire-fields label,
+.bts-fire-fields .fjs-label,
+.bts-fire-fields .field-label {
+  /* label min-width will be adjusted dynamically by JS; provide a sensible default */
+  min-width: 120px;
+  margin: 0;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+
+.bts-fire-fields select,
+.bts-fire-fields .fjs-input,
+.bts-fire-fields .field-control {
+  flex: 1 1 auto;
+}
+
+.bts-fire-footer {
+  text-align: right;
+  margin-top: 6px;
+}
+
+.bts-fire-cancel,
+.bts-fire-fast {
+  margin-right: 8px;
+}
+
+.bts-fire-confirm:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.bts-entry.disabled img {
+  filter: grayscale(100%) opacity(0.6);
+  pointer-events: none;
+}

package/assets/tpn-js.css

@@ -0,0 +1,101 @@
+@import "diagram-js/assets/diagram-js.css";
+@import "bpmn-font/dist/css/bpmn.css";
+@import url("./simulation.css");
+
+/* Overwriting diagram-js classes */
+.djs-context-pad .entry.active {
+  color: var(--popup-header-entry-selected-color);
+  border: solid 1px var(--popup-header-entry-selected-color);
+  background-color: var(--popup-header-entry-selected-background-color);
+  font-size: 20px;
+}
+
+.djs-palette .separator {
+  background-color: transparent;
+  opacity: 1;
+}
+
+.custom-token-modal {
+  background: #fff;
+  padding: 20px;
+  border: 1px solid #ccc;
+  z-index: 10000;
+  border-radius: 6px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  min-width: 220px;
+  height: auto;
+}
+
+.custom-token-btn-row {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.custom-token-btn {
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  background: #f5f5f5;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.custom-token-btn:hover {
+  background: #e0e0e0;
+}
+
+.structurally-incorrect-overlay {
+  position: relative;
+}
+
+.structurally-incorrect-tooltip {
+  position: absolute;
+  bottom: 120%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #fff3cd;
+  color: #856404;
+  border: 1px solid #856404;
+  border-radius: 4px;
+  padding: 8px 10px;
+  font-size: 16px;
+  line-height: 1.3;
+  white-space: pre-line;
+  min-width: 210px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.1s ease-in-out;
+}
+
+.structurally-incorrect-overlay:hover .structurally-incorrect-tooltip {
+  opacity: 1;
+}
+
+/* center diagram-js palette and context-pad icons */
+.djs-context-pad .entry,
+.djs-palette .entry {
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.djs-palette .entry {
+  display: flex;
+}
+
+.djs-context-pad .entry img {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  display: block;
+}
+
+.djs-palette .entry img {
+  width: 30px;
+  height: 30px;
+  object-fit: contain;
+  display: block;
+}