@diagrammo/dgmo-standalone 0.64.0

package/dist/auto.css

@@ -0,0 +1,557 @@
+/* anti-flash: hide source elements until either render swaps them out
+   or the error path replaces them with the standard error card */
+pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
+.dgmo:not(svg *):not(.dgmo-rendered):not(.dgmo-rendered *):not(.dgmo--error):not(.dgmo--error *) {
+  visibility: hidden;
+}
+.dgmo-rendered, .dgmo-rendered *,
+.dgmo--error, .dgmo--error * {
+  visibility: visible !important;
+}
+
+.dgmo-rendered {
+  display: block;
+  position: relative;
+  margin: 1em 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-size: 14px;
+  line-height: 1.4;
+  color-scheme: light dark;
+}
+
+.dgmo--loading {
+  opacity: 0.6;
+  font-size: 12px;
+  font-family: ui-monospace, monospace;
+}
+
+/* @diagrammo/dgmo block — standard embed chrome.
+ * Override the [data-theme="dark"] selectors if your site uses .dark or
+ * another color-mode convention. */
+
+/* === Color-mode visibility (dual-render) === */
+.dgmo-dark {
+  display: none;
+}
+[data-theme="dark"] .dgmo-light {
+  display: none;
+}
+[data-theme="dark"] .dgmo-dark {
+  display: block;
+}
+
+/* === Diagram sizing ===
+ * SVGs are emitted with viewBox only (no fixed width/height). Force them to
+ * fill their wrapper so light and dark variants render at identical sizes. */
+.dgmo-light > svg,
+.dgmo-dark > svg,
+.dgmo-svg > svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+}
+
+/* === Toolbar ===
+ * The diagram is the star: the toolbar is an overlay pinned to the diagram's
+ * bottom-right corner (position:absolute — it reserves no layout space, so the
+ * block is exactly as tall as the chart). Bottom-right (not top-right) so it
+ * never collides with a host's own top-right chart chrome — e.g. Obsidian's
+ * code-block copy button. It stays fully transparent until the block is
+ * hovered or focused, or the source panel is open. It is the <summary> of the
+ * source <details>, so toggling works without any JS. No text labels, no
+ * disclosure triangle — three wordless icon buttons.
+ *
+ * Anchored to .dgmo-source-wrap (position:relative below), whose top edge is
+ * always the diagram's bottom edge — bottom:calc(100% + gap) therefore keeps
+ * the toolbar at the diagram's bottom-right whether the source panel is open or
+ * closed (a figure-anchored bottom would drift down below the open code). */
+.dgmo-source-wrap {
+  margin: 0;
+  position: relative;
+}
+.dgmo-toolbar {
+  position: absolute;
+  bottom: calc(100% + 0.4em);
+  right: 0.4em;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.25em;
+  padding: 0.15em;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  color: rgba(127, 127, 127, 0.9);
+}
+.dgmo-toolbar::-webkit-details-marker {
+  display: none;
+}
+/* Reveal is keyed to the diagram IMAGE (the svg wrappers), not the whole
+ * figure — hovering the open code panel keeps the page quiet. The toolbar's
+ * own :hover keeps it alive while the pointer travels down from the image
+ * (they're adjacent, so there's no dead gap). focus-within covers keyboard
+ * and touch-tap. */
+.dgmo-light:hover ~ .dgmo-source-wrap > .dgmo-toolbar,
+.dgmo-dark:hover ~ .dgmo-source-wrap > .dgmo-toolbar,
+.dgmo-svg:hover ~ .dgmo-source-wrap > .dgmo-toolbar,
+.dgmo-toolbar:hover,
+.dgmo:focus-within .dgmo-toolbar {
+  opacity: 1;
+}
+/* Touch devices have no hover: keep the icons faintly visible so the
+ * affordance is discoverable at all. */
+@media (hover: none) {
+  .dgmo-toolbar {
+    opacity: 0.5;
+  }
+}
+
+.dgmo-toggle,
+.dgmo-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.9em;
+  height: 1.9em;
+  border-radius: 0.35em;
+  background: none;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.75;
+  transition:
+    opacity 0.15s ease,
+    background-color 0.15s ease;
+}
+.dgmo-toggle:hover,
+.dgmo-toolbar-btn:hover {
+  opacity: 1;
+  background: rgba(127, 127, 127, 0.12);
+}
+.dgmo-toggle svg,
+.dgmo-toolbar-btn svg {
+  width: 1em;
+  height: 1em;
+}
+/* Active state while the source panel is open. */
+.dgmo-source-wrap[open] > .dgmo-toolbar .dgmo-toggle {
+  opacity: 1;
+  background: rgba(127, 127, 127, 0.15);
+}
+.dgmo-copy--success {
+  color: #5cba7a;
+  opacity: 1;
+}
+
+/* === Full-screen lightbox ===
+ * The expand button clones the visible diagram into a native <dialog> that
+ * the client shows with showModal(): top-layer, so it escapes any transformed
+ * or overflow-clipped ancestor (docs sidebars) and fills the whole viewport.
+ * Escape / backdrop-click / the close button dismiss it. The <dialog> itself
+ * fills the viewport with a transparent background (so a click landing on it
+ * — outside the centered card — reads as a backdrop dismiss); the dim comes
+ * from ::backdrop. */
+.dgmo-lightbox {
+  width: 100vw;
+  height: 100vh;
+  max-width: 100vw;
+  max-height: 100vh;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  overflow: hidden;
+}
+.dgmo-lightbox[open] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dgmo-lightbox::backdrop {
+  background: rgba(0, 0, 0, 0.72);
+}
+.dgmo-lightbox-svg {
+  width: 95vw;
+  max-width: 95vw;
+  max-height: 95vh;
+  overflow: auto;
+  border-radius: 0.5em;
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
+  /* Opaque surface behind the enlarged diagram so a transparent embed doesn't
+   * show the page through it. The client overrides this inline with the block's
+   * own palette bg (data-dgmo-bg); this is the fallback for blocks that predate
+   * that attribute. */
+  background: #fff;
+}
+[data-theme="dark"] .dgmo-lightbox-svg {
+  background: #1e1e1e;
+}
+.dgmo-lightbox-svg > svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+}
+.dgmo-lightbox-close {
+  position: fixed;
+  top: max(1rem, env(safe-area-inset-top));
+  right: max(1rem, env(safe-area-inset-right));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.4em;
+  height: 2.4em;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.dgmo-lightbox-close:hover {
+  background: rgba(0, 0, 0, 0.75);
+}
+
+/* === Frame the whole block ===
+ * When the source panel is open, diagram + toolbar + code get one shared
+ * border so the code visibly belongs to the chart above it. The frame box
+ * (border + padding) is RESERVED at all times — with the border transparent
+ * while closed — so opening the panel only paints the border in. It never
+ * reflows the diagram. position:relative anchors the overlay toolbar to
+ * this box. */
+.dgmo:has(> .dgmo-source-wrap) {
+  position: relative;
+  border: 1px solid transparent;
+  border-radius: 0.6em;
+  padding: 0.75em 0.75em 0.5em;
+}
+.dgmo:has(> .dgmo-source-wrap[open]) {
+  border-color: rgba(127, 127, 127, 0.3);
+}
+
+/* === Source panel (hidden until toggled) === */
+.dgmo-source-inner {
+  border-top: 1px solid rgba(127, 127, 127, 0.25);
+  background: rgba(127, 127, 127, 0.06);
+  overflow: hidden;
+  margin: 0 -0.75em -0.5em;
+  border-radius: 0 0 0.6em 0.6em;
+}
+.dgmo-pre {
+  white-space: pre;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.85em;
+  line-height: 1.5;
+  margin: 0;
+  padding: 1em;
+}
+.dgmo-code {
+  display: block;
+}
+
+/* === Error card === */
+.dgmo--error {
+  border: 1px solid rgba(220, 80, 80, 0.5);
+  border-radius: 0.5em;
+  padding: 0.75em 1em;
+}
+.dgmo--error pre {
+  white-space: pre;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.85em;
+  margin: 0.5em 0 0;
+}
+.dgmo-error-docs {
+  display: inline-block;
+  margin-top: 0.6em;
+  font-size: 0.9em;
+  font-weight: 600;
+  color: inherit;
+}
+
+/* === Source highlight roles ===
+ * Light values mirror LIGHT_ROLE_STYLES; dark overrides mirror
+ * NORD_ROLE_STYLES. Guarded by the parity test in tests/block.test.ts. */
+.dgmo-tok-keyword {
+  color: #3b6ea5;
+  font-weight: bold;
+}
+.dgmo-tok-controlKeyword {
+  color: #7d5ba6;
+  font-weight: bold;
+}
+.dgmo-tok-definitionKeyword {
+  color: #2f5a86;
+  font-weight: bold;
+}
+.dgmo-tok-modifier {
+  color: #7d5ba6;
+}
+.dgmo-tok-chartType {
+  color: #b8691f;
+  font-weight: bold;
+}
+.dgmo-tok-operator {
+  color: #c0504d;
+  font-weight: bold;
+}
+.dgmo-tok-number {
+  color: #7d5ba6;
+}
+.dgmo-tok-comment {
+  color: #677483;
+  font-style: italic;
+}
+.dgmo-tok-heading {
+  color: #b8691f;
+  font-weight: bold;
+}
+.dgmo-tok-bracket {
+  color: #5b6672;
+}
+.dgmo-tok-separator {
+  color: #2d7268;
+}
+.dgmo-tok-deprecatedSyntax {
+  color: #c0504d;
+  text-decoration: line-through;
+}
+.dgmo-tok-url {
+  color: #3b6ea5;
+  text-decoration: underline;
+}
+.dgmo-tok-colorAnnotation {
+  color: #b8691f;
+  font-style: italic;
+}
+.dgmo-tok-punctuation {
+  color: #677483;
+}
+.dgmo-tok-propertyName {
+  color: #2d7268;
+}
+.dgmo-tok-string {
+  color: #3f7a3b;
+}
+.dgmo-tok-noteContent {
+  color: #677483;
+  font-style: italic;
+}
+
+[data-theme="dark"] .dgmo-tok-keyword {
+  color: #81a1c1;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-controlKeyword {
+  color: #b48ead;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-definitionKeyword {
+  color: #5e81ac;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-modifier {
+  color: #b48ead;
+}
+[data-theme="dark"] .dgmo-tok-chartType {
+  color: #d08770;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-operator {
+  color: #bf616a;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-number {
+  color: #b48ead;
+}
+[data-theme="dark"] .dgmo-tok-comment {
+  color: #616e88;
+  font-style: italic;
+}
+[data-theme="dark"] .dgmo-tok-heading {
+  color: #d08770;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-bracket {
+  color: #5e81ac;
+}
+[data-theme="dark"] .dgmo-tok-separator {
+  color: #88c0d0;
+}
+[data-theme="dark"] .dgmo-tok-deprecatedSyntax {
+  color: #bf616a;
+  text-decoration: line-through;
+}
+[data-theme="dark"] .dgmo-tok-url {
+  color: #88c0d0;
+  text-decoration: underline;
+}
+[data-theme="dark"] .dgmo-tok-colorAnnotation {
+  color: #d08770;
+  font-style: italic;
+}
+[data-theme="dark"] .dgmo-tok-punctuation {
+  color: #616e88;
+}
+[data-theme="dark"] .dgmo-tok-propertyName {
+  color: #88c0d0;
+}
+[data-theme="dark"] .dgmo-tok-string {
+  color: #a3be8c;
+}
+[data-theme="dark"] .dgmo-tok-noteContent {
+  color: #616e88;
+  font-style: italic;
+}
+
+/* === Live links ===
+ * A withdrawn pointer's placeholder, and the "this moved" affordance a host's
+ * client script falls back to when it can see a diagram has changed but cannot
+ * safely swap it in. Both are deliberately quiet: a page peppered with badges
+ * is worse than one that is a few days behind. */
+.dgmo--tombstone {
+  border: 1px dashed currentColor;
+  border-radius: 6px;
+  opacity: 0.6;
+  padding: 1.5rem;
+  text-align: center;
+}
+.dgmo-tombstone-text {
+  font-size: 0.9em;
+  margin: 0;
+}
+.dgmo-updated {
+  display: block;
+  font-size: 0.8em;
+  margin-top: 0.4rem;
+  opacity: 0.7;
+  text-align: right;
+}
+/* The card a docs site shows when live links are switched OFF, plus its
+ * hover-revealed way to turn them on. Hover-only on purpose: a READER never
+ * meets it, and anyone mousing over a diagram-shaped thing on their own docs
+ * site is almost certainly its author — which makes this the fix for a build
+ * warning nobody reads. The markup is the WRAPPER's (only it knows the feature
+ * is off); the styling is here because there is one stylesheet. */
+.dgmo-live-link-off {
+  position: relative;
+}
+.dgmo-live-link-view {
+  display: block;
+  text-decoration: none;
+}
+/* pointer-events: none alongside the fade, or an invisible link sits over the
+ * card's bottom-right corner and navigates a reader who clicks near it. Focus
+ * still reveals it (:focus-within on the wrapper), so a keyboard user is not
+ * shut out of something a mouse user can reach. */
+.dgmo-live-link-enable {
+  bottom: 0.5rem;
+  font-size: 0.8em;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0.5rem;
+  transition: opacity 0.15s ease-in-out;
+}
+.dgmo-live-link-off:hover .dgmo-live-link-enable,
+.dgmo-live-link-off:focus-within .dgmo-live-link-enable {
+  opacity: 1;
+  pointer-events: auto;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dgmo-live-link-enable {
+    transition: none;
+  }
+}
+
+.dgmo-theme-dark selectors if your site uses .dark or
+ * another color-mode convention. */
+
+/* === Color-mode visibility (dual-render) === */
+.dgmo-dark {
+  display: none;
+}
+.dgmo-theme-dark .dgmo-light {
+  display: none;
+}
+.dgmo-theme-dark .dgmo-dark {
+  display: block;
+}
+.dgmo-theme-dark .dgmo-lightbox-svg {
+  background: #1e1e1e;
+}
+.dgmo-theme-dark .dgmo-tok-keyword {
+  color: #81a1c1;
+  font-weight: bold;
+}
+.dgmo-theme-dark .dgmo-tok-controlKeyword {
+  color: #b48ead;
+  font-weight: bold;
+}
+.dgmo-theme-dark .dgmo-tok-definitionKeyword {
+  color: #5e81ac;
+  font-weight: bold;
+}
+.dgmo-theme-dark .dgmo-tok-modifier {
+  color: #b48ead;
+}
+.dgmo-theme-dark .dgmo-tok-chartType {
+  color: #d08770;
+  font-weight: bold;
+}
+.dgmo-theme-dark .dgmo-tok-operator {
+  color: #bf616a;
+  font-weight: bold;
+}
+.dgmo-theme-dark .dgmo-tok-number {
+  color: #b48ead;
+}
+.dgmo-theme-dark .dgmo-tok-comment {
+  color: #616e88;
+  font-style: italic;
+}
+.dgmo-theme-dark .dgmo-tok-heading {
+  color: #d08770;
+  font-weight: bold;
+}
+.dgmo-theme-dark .dgmo-tok-bracket {
+  color: #5e81ac;
+}
+.dgmo-theme-dark .dgmo-tok-separator {
+  color: #88c0d0;
+}
+.dgmo-theme-dark .dgmo-tok-deprecatedSyntax {
+  color: #bf616a;
+  text-decoration: line-through;
+}
+.dgmo-theme-dark .dgmo-tok-url {
+  color: #88c0d0;
+  text-decoration: underline;
+}
+.dgmo-theme-dark .dgmo-tok-colorAnnotation {
+  color: #d08770;
+  font-style: italic;
+}
+.dgmo-theme-dark .dgmo-tok-punctuation {
+  color: #616e88;
+}
+.dgmo-theme-dark .dgmo-tok-propertyName {
+  color: #88c0d0;
+}
+.dgmo-theme-dark .dgmo-tok-string {
+  color: #a3be8c;
+}
+.dgmo-theme-dark .dgmo-tok-noteContent {
+  color: #616e88;
+  font-style: italic;
+}