@velumo/renderer-dom 0.1.0-beta.0

package/dist/default-theme.js

@@ -0,0 +1,579 @@
+export const defaultThemeId = "velumo-default";
+export const defaultTheme = {
+    id: defaultThemeId,
+    tokens: {
+        colors: {
+            background: "#0b0e14",
+            foreground: "#e8edf4",
+            muted: "#9aa6b8",
+            accent: "#6ea8fe",
+            danger: "#ff6b6b",
+            magenta: "#ff6ba3",
+            cyan: "#5bd6f0",
+            purple: "#a98bff",
+            green: "#5fd398",
+        },
+        typography: {
+            heading: {
+                fontFamily: "ui-sans-serif, system-ui, sans-serif",
+                fontSize: "clamp(2.25rem, 5cqw, 4.5rem)",
+                lineHeight: 1.05,
+                fontWeight: 760,
+                letterSpacing: "-0.045em",
+            },
+            body: {
+                fontFamily: "ui-sans-serif, system-ui, sans-serif",
+                fontSize: "clamp(1.05rem, 1.7cqw, 1.35rem)",
+                lineHeight: 1.6,
+                fontWeight: 450,
+            },
+            caption: {
+                fontFamily: "ui-sans-serif, system-ui, sans-serif",
+                fontSize: "0.92rem",
+                lineHeight: 1.45,
+                fontWeight: 520,
+                letterSpacing: "0.02em",
+            },
+        },
+        spacing: {
+            xs: "0.375rem",
+            sm: "0.75rem",
+            md: "1.25rem",
+            lg: "2rem",
+            xl: "3rem",
+        },
+        radii: {
+            card: "1.25rem",
+            pill: "999px",
+        },
+        shadows: {
+            card: "0 24px 80px rgba(0, 0, 0, 0.45)",
+        },
+        motion: {
+            quick: {
+                duration: "140ms",
+                easing: "ease-out",
+            },
+            standard: {
+                duration: "260ms",
+                easing: "cubic-bezier(0.2, 0, 0, 1)",
+            },
+        },
+        surfaces: {
+            default: "#11151c",
+            muted: "#1a1f29",
+            card: "rgba(255, 255, 255, 0.04)",
+            accent: "rgba(110, 168, 254, 0.12)",
+            inverse: "#f8fafc",
+            danger: "rgba(255, 107, 107, 0.14)",
+        },
+        text: {
+            default: "#e8edf4",
+            muted: "#9aa6b8",
+            accent: "#9ec5ff",
+            inverse: "#0b0e14",
+            danger: "#ff8585",
+        },
+    },
+};
+export const defaultThemeCss = `
+[data-velumo-renderer="dom"] {
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  scroll-padding: var(--velumo-spacing-xs, 0.375rem);
+  background: var(--velumo-color-background, #0b0e14);
+  color: var(--velumo-text-default, #e8edf4);
+  font-family: var(--velumo-typography-body-font-family, ui-sans-serif, system-ui, sans-serif);
+  font-size: var(--velumo-typography-body-font-size, 1.125rem);
+  line-height: var(--velumo-typography-body-line-height, 1.6);
+  /* Size containment makes the host's sizing of this root load-bearing: a host
+     MUST give the Velumo renderer root a definite size, or it collapses. All
+     shipped shells (CLI default, example, presenter preview, SlideThumbnail
+     surface) already do.*/
+  container-type: size;
+  container-name: velumo-slide;
+  --velumo-tone-default: var(--velumo-text-default, #e8edf4);
+  --velumo-tone-muted: var(--velumo-text-muted, #9aa6b8);
+  --velumo-tone-accent: var(--velumo-text-accent, #9ec5ff);
+  --velumo-tone-danger: var(--velumo-text-danger, #ff8585);
+  --velumo-tone-magenta: var(--velumo-color-magenta, #ff6ba3);
+  --velumo-tone-cyan: var(--velumo-color-cyan, #5bd6f0);
+  --velumo-tone-purple: var(--velumo-color-purple, #a98bff);
+  --velumo-tone-green: var(--velumo-color-green, #5fd398);
+}
+
+[data-velumo-renderer="dom"] *,
+[data-velumo-renderer="dom"] *::before,
+[data-velumo-renderer="dom"] *::after {
+  box-sizing: border-box;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-slide-id] {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--velumo-margin-frame, clamp(2.5rem, 4.5cqh, 4rem)) var(--velumo-margin-frame-x, clamp(4rem, 8cqw, 8.5rem));
+  background: transparent;
+  overflow: hidden;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-watermark] {
+  position: absolute;
+  top: var(--velumo-margin-frame, clamp(2.5rem, 4.5cqh, 4rem));
+  right: var(--velumo-margin-frame-x, clamp(4rem, 8cqw, 8.5rem));
+  z-index: 5;
+  pointer-events: none;
+  font-family: var(--velumo-font-mono, ui-monospace, "JetBrains Mono", monospace);
+  font-size: 0.72rem;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--velumo-text-muted, #9aa6b8) 62%, transparent);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-layout-root] {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-layout="stack"],
+[data-velumo-renderer="dom"] [data-velumo-layout="hero"],
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--velumo-spacing-md, 1.25rem);
+  flex: 1;
+  min-height: 0;
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="stack"][data-velumo-stack-direction="horizontal"] {
+  flex-direction: row;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-layout="hero"] {
+  justify-content: center;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"] {
+  padding: var(--velumo-spacing-lg, 2rem);
+  border: 1px solid color-mix(in srgb, var(--velumo-color-muted, #9aa6b8) 18%, transparent);
+  border-radius: var(--velumo-radius-card, 1.25rem);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--velumo-text-default, #e8edf4) 8%, transparent), color-mix(in srgb, var(--velumo-text-default, #e8edf4) 3%, transparent)), var(--velumo-surface-card, rgba(255, 255, 255, 0.04));
+  box-shadow: var(--velumo-shadow-card, 0 24px 80px rgba(0, 0, 0, 0.45));
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"][data-velumo-frame-tone="muted"] { border-color: color-mix(in srgb, var(--velumo-tone-muted) 40%, transparent); }
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"][data-velumo-frame-tone="accent"] { border-color: color-mix(in srgb, var(--velumo-tone-accent) 40%, transparent); }
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"][data-velumo-frame-tone="danger"] { border-color: color-mix(in srgb, var(--velumo-tone-danger) 40%, transparent); }
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"][data-velumo-frame-tone="magenta"] { border-color: color-mix(in srgb, var(--velumo-tone-magenta) 40%, transparent); }
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"][data-velumo-frame-tone="cyan"] { border-color: color-mix(in srgb, var(--velumo-tone-cyan) 40%, transparent); }
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"][data-velumo-frame-tone="purple"] { border-color: color-mix(in srgb, var(--velumo-tone-purple) 40%, transparent); }
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"][data-velumo-frame-tone="green"] { border-color: color-mix(in srgb, var(--velumo-tone-green) 40%, transparent); }
+
+[data-velumo-renderer="dom"] [data-velumo-layout="stack"][data-velumo-stack-justify="center"] { justify-content: center; }
+[data-velumo-renderer="dom"] [data-velumo-layout="stack"][data-velumo-stack-justify="between"] { justify-content: space-between; }
+[data-velumo-renderer="dom"] [data-velumo-layout="stack"][data-velumo-stack-justify="end"] { justify-content: flex-end; }
+[data-velumo-renderer="dom"] [data-velumo-stack-align="start"] { align-items: flex-start; }
+[data-velumo-renderer="dom"] [data-velumo-stack-align="center"] { align-items: center; }
+[data-velumo-renderer="dom"] [data-velumo-stack-align="end"] { align-items: flex-end; }
+[data-velumo-renderer="dom"] [data-velumo-stack-align="stretch"] { align-items: stretch; }
+[data-velumo-renderer="dom"] [data-velumo-layout="canvas"] { flex: 1; min-height: 0; }
+[data-velumo-renderer="dom"] [data-velumo-slide-id]::after,
+[data-velumo-renderer="dom"] [data-velumo-spatial="viewport"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+  background: radial-gradient(120% 120% at 50% 42%, transparent 55%, rgba(0, 0, 0, var(--velumo-vignette-strength, 0.5)) 100%);
+  mix-blend-mode: multiply;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-layout="grid"] {
+  display: grid;
+  grid-template-columns: repeat(var(--velumo-layout-columns, 2), minmax(0, 1fr));
+  gap: var(--velumo-spacing-md, 1.25rem);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-layout="split"] {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+  gap: var(--velumo-spacing-lg, 2rem);
+  align-items: start;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-element="heading"] {
+  margin: 0;
+  max-width: 20ch;
+  text-wrap: balance;
+  color: var(--velumo-text-default, #e8edf4);
+  font-family: var(--velumo-typography-heading-font-family, ui-sans-serif, system-ui, sans-serif);
+  font-size: var(--velumo-typography-heading-font-size, clamp(2.25rem, 5cqw, 4.5rem));
+  font-weight: var(--velumo-typography-heading-font-weight, 760);
+  letter-spacing: var(--velumo-typography-heading-letter-spacing, -0.045em);
+  line-height: var(--velumo-typography-heading-line-height, 1.05);
+}
+[data-velumo-renderer="dom"] [data-velumo-element="heading"][data-velumo-heading-size="display"] {
+  font-size: calc(var(--velumo-typography-heading-font-size, clamp(2.25rem, 5cqw, 4.5rem))*1.55);
+  line-height: 0.98;
+}
+[data-velumo-renderer="dom"] [data-velumo-element="heading"][data-velumo-heading-size="hero"] {
+  font-size: calc(var(--velumo-typography-heading-font-size, clamp(2.25rem, 5cqw, 4.5rem))*2.5);
+  line-height: 0.9;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-element="text"] {
+  margin: 0;
+  max-width: 68ch;
+  color: var(--velumo-text-default, #e8edf4);
+  font-size: var(--velumo-typography-body-font-size, 1.125rem);
+  line-height: var(--velumo-typography-body-line-height, 1.6);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-text-variant="lead"] {
+  color: var(--velumo-text-muted, #9aa6b8);
+  font-size: 1.3275rem;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-text-variant="caption"] {
+  color: var(--velumo-text-muted, #9aa6b8);
+  font-size: var(--velumo-typography-caption-font-size, 0.92rem);
+  letter-spacing: var(--velumo-typography-caption-letter-spacing, 0.02em);
+  line-height: var(--velumo-typography-caption-line-height, 1.45);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-element="media"] {
+  display: block;
+  max-width: 100%;
+  min-height: 8rem;
+  border-radius: var(--velumo-radius-card, 1.25rem);
+  background: var(--velumo-surface-muted, #1a1f29);
+  object-fit: contain;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-media-fit="cover"] {
+  object-fit: cover;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-media-fit="fill"] {
+  object-fit: fill;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-element="callout"] {
+  display: grid;
+  gap: var(--velumo-spacing-sm, 0.75rem);
+  padding: var(--velumo-spacing-md, 1.25rem) var(--velumo-spacing-lg, 2rem);
+  border: 1px solid color-mix(in srgb, var(--velumo-text-default, #e8edf4) 12%, transparent);
+  border-left: 0.3rem solid var(--velumo-color-accent, #6ea8fe);
+  border-radius: var(--velumo-radius-card, 1.25rem);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--velumo-text-default, #e8edf4) 9%, transparent), color-mix(in srgb, var(--velumo-text-default, #e8edf4) 4%, transparent));
+  box-shadow: var(--velumo-shadow-card, 0 24px 80px rgba(0, 0, 0, 0.45));
+  color: var(--velumo-text-default, #e8edf4);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-callout-tone="info"] {
+  border-left-color: var(--velumo-color-cyan, #5bd6f0);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-callout-tone="warning"] {
+  border-left-color: var(--velumo-color-magenta, #ff6ba3);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-callout-tone="success"] {
+  border-left-color: var(--velumo-color-green, #5fd398);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-callout-tone="quote"] {
+  border-left-color: var(--velumo-color-muted, #9aa6b8);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-callout-tone="danger"] {
+  border-left-color: var(--velumo-color-danger, #ff6b6b);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-layer-type="markdown"],
+[data-velumo-renderer="dom"] [data-velumo-layer-type="html"] {
+  margin-top: var(--velumo-spacing-lg, 2rem);
+  color: var(--velumo-text-default, #e8edf4);
+  font-size: var(--velumo-typography-body-font-size, 1.125rem);
+  line-height: var(--velumo-typography-body-line-height, 1.6);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-fragment="hidden"] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes velumo-rise {
+    from { opacity: 0; transform: translateY(2rem); }
+    to { opacity: 1; transform: none; }
+  }
+  @keyframes velumo-fade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes velumo-zoom {
+    from { opacity: 0; transform: scale(0.86); }
+    to { opacity: 1; transform: none; }
+  }
+  @keyframes velumo-draw {
+    from { opacity: 0; transform: scaleX(0); }
+    to { opacity: 1; transform: scaleX(1); }
+  }
+  @keyframes velumo-in-left {
+    from { opacity: 0; transform: translateX(-3rem); }
+    to { opacity: 1; transform: none; }
+  }
+  @keyframes velumo-in-right {
+    from { opacity: 0; transform: translateX(3rem); }
+    to { opacity: 1; transform: none; }
+  }
+
+  [data-velumo-renderer="dom"] [data-velumo-animation] {
+    animation-duration: var(--velumo-animation-duration, 0.8s);
+    animation-delay: var(--velumo-animation-delay, 0s);
+    animation-timing-function: var(--velumo-animation-easing, cubic-bezier(0.4, 0, 0.2, 1));
+    animation-fill-mode: both;
+  }
+  [data-velumo-renderer="dom"] [data-velumo-animation="rise"] { animation-name: velumo-rise; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="fade"] { animation-name: velumo-fade; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="zoom"] { animation-name: velumo-zoom; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="draw"] { animation-name: velumo-draw; transform-origin: left center; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="in-left"] { animation-name: velumo-in-left; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="in-right"] { animation-name: velumo-in-right; }
+
+  @keyframes velumo-glow {
+    from { text-shadow: 0 0 28px rgba(255, 209, 102, 0.4), 0 0 60px rgba(255, 61, 127, 0.28); }
+    to { text-shadow: 0 0 40px rgba(255, 209, 102, 0.6), 0 0 96px rgba(255, 61, 127, 0.42); }
+  }
+  @keyframes velumo-blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.35; }
+  }
+  @keyframes velumo-pulse {
+    0%, 100% { opacity: 0.55; transform: none; }
+    50% { opacity: 1; transform: scale(1.03); }
+  }
+  @keyframes velumo-sweep {
+    from { transform: translateX(-46%); }
+    to { transform: translateX(46%); }
+  }
+  [data-velumo-renderer="dom"] [data-velumo-animation="glow"] { animation: velumo-glow var(--velumo-animation-duration, 2.6s) var(--velumo-animation-easing, ease-in-out) var(--velumo-animation-delay, 0s) infinite alternate; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="blink"] { animation: velumo-blink max(1s, var(--velumo-animation-duration, 1.4s)) var(--velumo-animation-easing, ease-in-out) var(--velumo-animation-delay, 0s) infinite; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="pulse"] { animation: velumo-pulse var(--velumo-animation-duration, 2.4s) var(--velumo-animation-easing, ease-in-out) var(--velumo-animation-delay, 0s) infinite; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="sweep"] { animation: velumo-sweep var(--velumo-animation-duration, 3.2s) var(--velumo-animation-easing, cubic-bezier(0.4, 0, 0.2, 1)) var(--velumo-animation-delay, 0s) infinite alternate; }
+}
+
+[data-velumo-thumbnail] [data-velumo-animation] { animation: none !important; }
+
+[data-velumo-renderer="dom"] [data-velumo-text-transform="uppercase"] { text-transform: uppercase; }
+[data-velumo-renderer="dom"] [data-velumo-text-transform="lowercase"] { text-transform: lowercase; }
+[data-velumo-renderer="dom"] [data-velumo-text-transform="capitalize"] { text-transform: capitalize; }
+
+[data-velumo-renderer="dom"] [data-velumo-text-decoration="underline"] { text-decoration: underline; }
+[data-velumo-renderer="dom"] [data-velumo-text-decoration="line-through"] { text-decoration: line-through; }
+
+[data-velumo-renderer="dom"] [data-velumo-text-glow] {
+  text-shadow: 0 0 0.4em currentColor, 0 0 1.2em currentColor;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-text-tone="muted"] { color: var(--velumo-text-muted, #9aa6b8); }
+[data-velumo-renderer="dom"] [data-velumo-text-tone="accent"] { color: var(--velumo-text-accent, #9ec5ff); }
+[data-velumo-renderer="dom"] [data-velumo-text-tone="danger"] { color: var(--velumo-text-danger, #ff8585); }
+[data-velumo-renderer="dom"] [data-velumo-text-tone="magenta"] { color: var(--velumo-color-magenta, #ff6ba3); }
+[data-velumo-renderer="dom"] [data-velumo-text-tone="cyan"] { color: var(--velumo-color-cyan, #5bd6f0); }
+[data-velumo-renderer="dom"] [data-velumo-text-tone="purple"] { color: var(--velumo-color-purple, #a98bff); }
+[data-velumo-renderer="dom"] [data-velumo-text-tone="green"] { color: var(--velumo-color-green, #5fd398); }
+
+[data-velumo-renderer="dom"] [data-velumo-element="badge"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  padding: 0.35em 0.9em;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
+  color: var(--velumo-text-default, #e8edf4);
+  font-size: 0.9em;
+  line-height: 1.2;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+[data-velumo-renderer="dom"] [data-velumo-badge-mono] {
+  font-family: var(--velumo-font-mono, ui-monospace, "JetBrains Mono", monospace);
+  letter-spacing: 0.02em;
+}
+[data-velumo-renderer="dom"] [data-velumo-badge-variant="soft"] {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+[data-velumo-renderer="dom"] [data-velumo-badge-variant="solid"] {
+  background: color-mix(in srgb, currentColor 22%, transparent);
+  border-color: color-mix(in srgb, currentColor 60%, transparent);
+}
+[data-velumo-renderer="dom"] [data-velumo-badge-tone="muted"] { color: var(--velumo-text-muted, #9aa6b8); }
+[data-velumo-renderer="dom"] [data-velumo-badge-tone="accent"] { color: var(--velumo-text-accent, #9ec5ff); }
+[data-velumo-renderer="dom"] [data-velumo-badge-tone="danger"] { color: var(--velumo-text-danger, #ff8585); }
+[data-velumo-renderer="dom"] [data-velumo-badge-tone="magenta"] { color: var(--velumo-color-magenta, #ff6ba3); }
+[data-velumo-renderer="dom"] [data-velumo-badge-tone="cyan"] { color: var(--velumo-color-cyan, #5bd6f0); }
+[data-velumo-renderer="dom"] [data-velumo-badge-tone="purple"] { color: var(--velumo-color-purple, #a98bff); }
+[data-velumo-renderer="dom"] [data-velumo-badge-tone="green"] { color: var(--velumo-color-green, #5fd398); }
+[data-velumo-renderer="dom"] [data-velumo-badge-dot] {
+  width: 0.6em;
+  height: 0.6em;
+  border-radius: 999px;
+  flex: none;
+  background: currentColor;
+  box-shadow: 0 0 0.6em currentColor;
+}
+[data-velumo-renderer="dom"] [data-velumo-badge-dot="muted"] { color: var(--velumo-text-muted, #9aa6b8); }
+[data-velumo-renderer="dom"] [data-velumo-badge-dot="accent"] { color: var(--velumo-text-accent, #9ec5ff); }
+[data-velumo-renderer="dom"] [data-velumo-badge-dot="danger"] { color: var(--velumo-text-danger, #ff8585); }
+[data-velumo-renderer="dom"] [data-velumo-badge-dot="magenta"] { color: var(--velumo-color-magenta, #ff6ba3); }
+[data-velumo-renderer="dom"] [data-velumo-badge-dot="cyan"] { color: var(--velumo-color-cyan, #5bd6f0); }
+[data-velumo-renderer="dom"] [data-velumo-badge-dot="purple"] { color: var(--velumo-color-purple, #a98bff); }
+[data-velumo-renderer="dom"] [data-velumo-badge-dot="green"] { color: var(--velumo-color-green, #5fd398); }
+
+[data-velumo-renderer="dom"] [data-velumo-element="rule"] {
+  display: block;
+  flex: none;
+  background: var(--velumo-tone-default);
+}
+[data-velumo-renderer="dom"] [data-velumo-rule-tone="muted"] { background: var(--velumo-tone-muted); }
+[data-velumo-renderer="dom"] [data-velumo-rule-tone="accent"] { background: var(--velumo-tone-accent); }
+[data-velumo-renderer="dom"] [data-velumo-rule-tone="danger"] { background: var(--velumo-tone-danger); }
+[data-velumo-renderer="dom"] [data-velumo-rule-tone="magenta"] { background: var(--velumo-tone-magenta); }
+[data-velumo-renderer="dom"] [data-velumo-rule-tone="cyan"] { background: var(--velumo-tone-cyan); }
+[data-velumo-renderer="dom"] [data-velumo-rule-tone="purple"] { background: var(--velumo-tone-purple); }
+[data-velumo-renderer="dom"] [data-velumo-rule-tone="green"] { background: var(--velumo-tone-green); }
+[data-velumo-renderer="dom"] [data-velumo-rule-gradient] {
+  background: linear-gradient(90deg, var(--velumo-rule-from, var(--velumo-tone-default)), var(--velumo-rule-to, var(--velumo-tone-default)));
+}
+
+[data-velumo-renderer="dom"] pre[data-velumo-element="code"] {
+  margin: 0;
+  padding: 1.1rem 1.35rem;
+  border: 1px solid var(--velumo-color-muted, #9aa6b8);
+  border-radius: var(--velumo-radii-card, 0.75rem);
+  background: var(--velumo-surface-muted, #1a1f29);
+  color: var(--velumo-text-default, #e8edf4);
+  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 0.95em;
+  line-height: 1.6;
+  overflow: auto;
+  white-space: pre;
+}
+[data-velumo-renderer="dom"] [data-velumo-token="keyword"] { color: var(--velumo-color-purple, #a98bff); }
+[data-velumo-renderer="dom"] [data-velumo-token="function"] { color: var(--velumo-text-accent, #9ec5ff); }
+[data-velumo-renderer="dom"] [data-velumo-token="string"] { color: var(--velumo-color-green, #5fd398); }
+[data-velumo-renderer="dom"] [data-velumo-token="number"] { color: var(--velumo-color-magenta, #ff6ba3); }
+[data-velumo-renderer="dom"] [data-velumo-token="property"] { color: var(--velumo-color-cyan, #5bd6f0); }
+[data-velumo-renderer="dom"] [data-velumo-token="comment"] { color: var(--velumo-text-muted, #9aa6b8); }
+[data-velumo-renderer="dom"] [data-velumo-token="punctuation"] { color: var(--velumo-text-muted, #9aa6b8); }
+
+[data-velumo-renderer="dom"] [data-velumo-element="icon"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.6em;
+  height: 1.6em;
+  border-radius: 999px;
+  background: color-mix(in srgb, currentColor 20%, transparent);
+  vertical-align: middle;
+  flex: none;
+}
+[data-velumo-renderer="dom"] [data-velumo-element="icon"]::before {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+}
+[data-velumo-renderer="dom"] [data-velumo-icon="check"]::before {
+  width: 0.34em;
+  height: 0.62em;
+  border: solid currentColor;
+  border-width: 0 0.14em 0.14em 0;
+  transform: translateY(-0.07em) rotate(45deg);
+}
+[data-velumo-renderer="dom"] [data-velumo-icon="cross"] { position: relative; }
+[data-velumo-renderer="dom"] [data-velumo-icon="cross"]::before,
+[data-velumo-renderer="dom"] [data-velumo-icon="cross"]::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.72em;
+  height: 0.14em;
+  border-radius: 2px;
+  background: currentColor;
+}
+[data-velumo-renderer="dom"] [data-velumo-icon="cross"]::before { transform: translate(-50%, -50%) rotate(45deg); }
+[data-velumo-renderer="dom"] [data-velumo-icon="cross"]::after { transform: translate(-50%, -50%) rotate(-45deg); }
+[data-velumo-renderer="dom"] [data-velumo-icon="dash"]::before {
+  width: 0.72em;
+  height: 0.14em;
+  border-radius: 2px;
+  background: currentColor;
+}
+[data-velumo-renderer="dom"] [data-velumo-icon="ring"]::before {
+  width: 0.78em;
+  height: 0.78em;
+  border: 0.13em solid currentColor;
+  border-radius: 50%;
+}
+[data-velumo-renderer="dom"] [data-velumo-icon="dot"]::before {
+  width: 0.5em;
+  height: 0.5em;
+  background: currentColor;
+  border-radius: 50%;
+}
+[data-velumo-renderer="dom"] [data-velumo-icon="arrow"]::before {
+  width: 0.42em;
+  height: 0.42em;
+  border: solid currentColor;
+  border-width: 0.14em 0.14em 0 0;
+  transform: translateX(-0.08em) rotate(45deg);
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--velumo-color-muted, #9aa6b8);
+  border-radius: var(--velumo-radii-card, 0.75rem);
+  background: var(--velumo-surface-muted, #1a1f29);
+  overflow: hidden;
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [role="row"] {
+  display: grid;
+  grid-template-columns: var(--velumo-table-columns, 1fr);
+  align-items: center;
+  padding: 0 1.4rem;
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [data-velumo-table-head] {
+  background: color-mix(in srgb, var(--velumo-text-default, #e8edf4) 8%, transparent);
+  border-bottom: 1px solid var(--velumo-color-muted, #9aa6b8);
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [role="rowgroup"] [role="row"] + [role="row"] {
+  border-top: 1px solid color-mix(in srgb, var(--velumo-text-default, #e8edf4) 8%, transparent);
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [role="cell"],
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [role="columnheader"] {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  padding: 0.85rem 0;
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [role="columnheader"] {
+  font-weight: 650;
+  letter-spacing: 0.01em;
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [data-velumo-col-align="center"] { justify-content: center; }
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [data-velumo-col-align="end"] { justify-content: flex-end; }
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [data-velumo-col-emphasis] {
+  background: color-mix(in srgb, var(--velumo-text-accent, #6ea8fe) 10%, transparent);
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [data-velumo-table-head] [data-velumo-col-emphasis] {
+  box-shadow: inset 0 0.18rem 0 0 var(--velumo-text-accent, #6ea8fe);
+}
+`.trim();
+//# sourceMappingURL=default-theme.js.map

package/dist/default-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-theme.js","sourceRoot":"","sources":["../src/default-theme.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,EAAE,EAAE,cAAc;IAClB,MAAM,EAAE;QACN,MAAM,EAAE;YACN,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,SAAS;YACrB,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;SACjB;QACD,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,UAAU,EAAE,sCAAsC;gBAClD,QAAQ,EAAE,8BAA8B;gBACxC,UAAU,EAAE,IAAI;gBAChB,UAAU,EAAE,GAAG;gBACf,aAAa,EAAE,UAAU;aAC1B;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE,sCAAsC;gBAClD,QAAQ,EAAE,iCAAiC;gBAC3C,UAAU,EAAE,GAAG;gBACf,UAAU,EAAE,GAAG;aAChB;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,sCAAsC;gBAClD,QAAQ,EAAE,SAAS;gBACnB,UAAU,EAAE,IAAI;gBAChB,UAAU,EAAE,GAAG;gBACf,aAAa,EAAE,QAAQ;aACxB;SACF;QACD,OAAO,EAAE;YACP,EAAE,EAAE,UAAU;YACd,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX;QACD,KAAK,EAAE;YACL,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,OAAO;SACd;QACD,OAAO,EAAE;YACP,IAAI,EAAE,iCAAiC;SACxC;QACD,MAAM,EAAE;YACN,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,MAAM,EAAE,UAAU;aACnB;YACD,QAAQ,EAAE;gBACR,QAAQ,EAAE,OAAO;gBACjB,MAAM,EAAE,4BAA4B;aACrC;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,2BAA2B;YACjC,MAAM,EAAE,2BAA2B;YACnC,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,2BAA2B;SACpC;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,SAAS;SAClB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmf9B,CAAC,IAAI,EAAE,CAAC"}

package/dist/dom-renderer.d.ts

@@ -0,0 +1,62 @@
+import type { JsonValue, Layer, Manifest, SlideEntry } from "@velumo/core";
+import { type ActionContext, type ActionHandler, type LayerRenderer, type RuntimeController } from "@velumo/runtime";
+interface DomDocumentLike {
+    createElement(tagName: string): DomElementLike;
+    createElementNS(namespace: string, tagName: string): DomElementLike;
+    createTextNode(text: string): DomNodeLike;
+    readonly head?: DomElementLike;
+    querySelector?(selectors: string): DomElementLike | null;
+}
+type DomNodeChild = DomElementLike | DomNodeLike;
+type DomChild = DomNodeChild | string;
+type DomLayerRenderResult = DomChild | readonly DomChild[] | null | undefined;
+interface DomNodeLike {
+    parentNode?: unknown;
+    textContent: string;
+}
+interface DomElementLike extends DomNodeLike {
+    readonly ownerDocument: DomDocumentLike;
+    readonly style?: DomStyleLike;
+    append(...children: DomChild[]): void;
+    appendChild(child: DomNodeChild): DomNodeChild;
+    removeAttribute(name: string): void;
+    replaceChildren(...children: DomChild[]): void;
+    setAttribute(name: string, value: string): void;
+}
+interface DomStyleLike {
+    removeProperty(name: string): string;
+    setProperty(name: string, value: string): void;
+}
+export interface DomLayerRendererContext {
+    readonly layer: Layer;
+    readonly slide: SlideEntry;
+    readonly manifest: Manifest;
+    readonly runtime: RuntimeController;
+    createElement(tagName: string): DomElementLike;
+    createText(text: string): DomNodeLike;
+    dispatch(action: {
+        type: string;
+        payload?: JsonValue;
+    }): void;
+}
+interface DomRuntimeRegistry {
+    getLayerRenderer(type: string): LayerRenderer<DomLayerRendererContext, DomLayerRenderResult> | undefined;
+    getActionHandler?(type: string): ActionHandler<ActionContext> | undefined;
+}
+export interface DomRendererOptions {
+    readonly root: DomElementLike;
+    readonly manifest: Manifest;
+    readonly runtime: RuntimeController;
+    readonly registry?: DomRuntimeRegistry;
+}
+export declare class DomRenderer {
+    #private;
+    constructor(options: DomRendererOptions);
+    getRoot(): DomElementLike;
+    mount(): void;
+    render(): void;
+    unmount(): void;
+    dispose(): void;
+}
+export {};
+//# sourceMappingURL=dom-renderer.d.ts.map

package/dist/dom-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-renderer.d.ts","sourceRoot":"","sources":["../src/dom-renderer.ts"],"names":[],"mappings":"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"}