@kawaijs/renderer-dom 0.1.13 → 0.1.14

package/src/theme.css

@@ -140,16 +140,25 @@ body.kawa-fullscreen {
   transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Directional wipe transitions */
+/* Directional wipe & push & zoom transitions */
 .kawa-background[data-transition="wipeleft"] .kawa-bg-layer,
-.kawa-background[data-transition="wiperight"] .kawa-bg-layer {
-  transition: opacity 0.55s ease, clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1);
+.kawa-background[data-transition="wiperight"] .kawa-bg-layer,
+.kawa-background[data-transition="wipeup"] .kawa-bg-layer,
+.kawa-background[data-transition="wipedown"] .kawa-bg-layer,
+.kawa-background[data-transition="circlewipe"] .kawa-bg-layer,
+.kawa-background[data-transition="iris"] .kawa-bg-layer,
+.kawa-background[data-transition="pushleft"] .kawa-bg-layer,
+.kawa-background[data-transition="pushright"] .kawa-bg-layer,
+.kawa-background[data-transition="pushup"] .kawa-bg-layer,
+.kawa-background[data-transition="pushdown"] .kawa-bg-layer,
+.kawa-background[data-transition="zoom"] .kawa-bg-layer,
+.kawa-background[data-transition="blur"] .kawa-bg-layer {
+  transition: opacity 0.55s ease, clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1), transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), filter 0.55s ease;
 }
 
 .kawa-bg-layer.kawa-wipe-from-left {
   clip-path: inset(0 100% 0 0);
 }
-
 .kawa-bg-layer.kawa-wipe-from-left.active {
   clip-path: inset(0 0 0 0);
 }
@@ -157,11 +166,75 @@ body.kawa-fullscreen {
 .kawa-bg-layer.kawa-wipe-from-right {
   clip-path: inset(0 0 0 100%);
 }
-
 .kawa-bg-layer.kawa-wipe-from-right.active {
   clip-path: inset(0 0 0 0);
 }
 
+.kawa-bg-layer.kawa-wipe-from-up {
+  clip-path: inset(0 0 100% 0);
+}
+.kawa-bg-layer.kawa-wipe-from-up.active {
+  clip-path: inset(0 0 0 0);
+}
+
+.kawa-bg-layer.kawa-wipe-from-down {
+  clip-path: inset(100% 0 0 0);
+}
+.kawa-bg-layer.kawa-wipe-from-down.active {
+  clip-path: inset(0 0 0 0);
+}
+
+.kawa-bg-layer.kawa-wipe-circle {
+  clip-path: circle(0% at 50% 50%);
+}
+.kawa-bg-layer.kawa-wipe-circle.active {
+  clip-path: circle(120% at 50% 50%);
+}
+
+.kawa-bg-layer.kawa-push-from-left {
+  transform: translateX(-100%);
+}
+.kawa-bg-layer.kawa-push-from-left.active {
+  transform: translateX(0);
+}
+
+.kawa-bg-layer.kawa-push-from-right {
+  transform: translateX(100%);
+}
+.kawa-bg-layer.kawa-push-from-right.active {
+  transform: translateX(0);
+}
+
+.kawa-bg-layer.kawa-push-from-up {
+  transform: translateY(-100%);
+}
+.kawa-bg-layer.kawa-push-from-up.active {
+  transform: translateY(0);
+}
+
+.kawa-bg-layer.kawa-push-from-down {
+  transform: translateY(100%);
+}
+.kawa-bg-layer.kawa-push-from-down.active {
+  transform: translateY(0);
+}
+
+.kawa-bg-layer.kawa-zoom-in {
+  transform: scale(1.15);
+  filter: blur(8px);
+}
+.kawa-bg-layer.kawa-zoom-in.active {
+  transform: scale(1);
+  filter: blur(0px);
+}
+
+.kawa-bg-layer.kawa-blur-transition {
+  filter: blur(16px);
+}
+.kawa-bg-layer.kawa-blur-transition.active {
+  filter: blur(0px);
+}
+
 /* Characters Layer */
 .kawa-characters {
   position: absolute;
@@ -1330,6 +1403,17 @@ body.kawa-fullscreen {
   animation: kawa-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.kawa-bg-video,
+.kawa-cg-video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+  z-index: 1;
+}
+
 /* ==========================================================================
    Camera Shake, Flash & Stage Directives
    ========================================================================== */
@@ -1810,13 +1894,55 @@ body.kawa-fullscreen {
   display: none !important;
 }
 
-/* Embed / iframe compact chrome (`?embed=1`) */
-.kawa-root.kawa-embed .kawa-quick-menu {
-  display: none !important;
+/* Embed: always letterbox 16:9 — never inherit full-page mobile fill sizing. */
+.kawa-root.kawa-embed {
+  min-height: 0 !important;
+  height: 100% !important;
+  max-height: 100% !important;
+}
+
+.kawa-root.kawa-embed .kawa-stage {
+  max-width: 100% !important;
+  max-height: 100% !important;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.kawa-root.kawa-embed .kawa-ui-layer {
+  padding: clamp(8px, 2.2vh, 16px) clamp(10px, 2.5vw, 18px);
 }
 
 .kawa-root.kawa-embed .kawa-dialogue-box {
+  min-height: 0;
   max-width: min(920px, 94%);
+  padding: clamp(10px, 1.8vh, 16px) clamp(12px, 2.5vw, 20px);
+}
+
+.kawa-root.kawa-embed .kawa-dialogue-text {
+  font-size: clamp(0.88rem, 2.6vw, 1.05rem);
+  line-height: 1.45;
+}
+
+.kawa-root.kawa-embed .kawa-choice-container {
+  width: min(92%, 440px);
+  gap: 8px;
+  top: 48%;
+}
+
+.kawa-root.kawa-embed .kawa-choice-btn {
+  font-size: clamp(0.82rem, 2.4vw, 1rem);
+  padding: 0.65rem 0.9rem;
+  min-height: 42px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
+}
+
+.kawa-root.kawa-embed .kawa-choice-btn:hover,
+.kawa-root.kawa-embed .kawa-choice-btn:focus-visible {
+  transform: none;
+}
+
+.kawa-root.kawa-embed .kawa-quick-menu {
+  display: none !important;
 }
 
 .kawa-continue-link-btn {
@@ -1863,13 +1989,14 @@ body.kawa-fullscreen {
 }
 
 @media (max-width: 768px), (pointer: coarse) {
-  .kawa-root {
+  /* Full-page player only — never blow up embedded previews (playground / iframe). */
+  .kawa-root:not(.kawa-embed) {
     /* Use dynamic viewport so mobile browser chrome doesn't clip the stage */
     min-height: 100dvh;
     height: 100dvh;
   }
 
-  .kawa-stage {
+  .kawa-root:not(.kawa-embed) .kawa-stage {
     width: 100% !important;
     max-width: none;
     max-height: none;
@@ -1880,7 +2007,7 @@ body.kawa-fullscreen {
   }
 
   @media (orientation: portrait) {
-    .kawa-stage {
+    .kawa-root:not(.kawa-embed) .kawa-stage {
       height: 100% !important;
       aspect-ratio: auto;
     }
@@ -2079,3 +2206,109 @@ body.kawa-fullscreen {
   font-size: 0.75rem;
   color: #64748b;
 }
+
+/* ==========================================================================
+   Accessibility & Themes (A11y, Dyslexia Font & High Contrast)
+   ========================================================================== */
+
+.kawa-dyslexia-font,
+.kawa-dyslexia-font .kawa-dialogue-text,
+.kawa-dyslexia-font .kawa-speaker-tag,
+.kawa-dyslexia-font .kawa-choice-btn,
+.kawa-dyslexia-font .kawa-modal-card {
+  font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
+  letter-spacing: 0.05em !important;
+  word-spacing: 0.12em !important;
+  line-height: 1.7 !important;
+}
+
+.kawa-high-contrast .kawa-dialogue-box {
+  background: #000000 !important;
+  border: 3px solid #ffffff !important;
+  box-shadow: 0 0 0 2px #000000 !important;
+}
+
+.kawa-high-contrast .kawa-dialogue-text {
+  color: #ffffff !important;
+  font-weight: 700 !important;
+  text-shadow: none !important;
+}
+
+.kawa-high-contrast .kawa-speaker-tag {
+  background: #ffff00 !important;
+  color: #000000 !important;
+  border: 2px solid #ffffff !important;
+  font-weight: 900 !important;
+}
+
+.kawa-high-contrast .kawa-choice-btn {
+  background: #000000 !important;
+  color: #ffffff !important;
+  border: 2px solid #ffff00 !important;
+  font-weight: 700 !important;
+}
+
+.kawa-high-contrast .kawa-choice-btn:hover,
+.kawa-high-contrast .kawa-choice-btn:focus-visible {
+  background: #ffff00 !important;
+  color: #000000 !important;
+}
+
+.kawa-setting-section {
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.kawa-setting-section-title {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: #f8fafc;
+  margin-bottom: 2px;
+}
+
+.kawa-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 0.9rem;
+  color: #cbd5e1;
+  cursor: pointer;
+}
+
+.kawa-toggle-label input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--kawa-primary-accent, #f43f5e);
+  cursor: pointer;
+}
+
+.kawa-select {
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.8);
+  color: #f8fafc;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  font-size: 0.95rem;
+  cursor: pointer;
+  outline: none;
+}
+
+.kawa-select:focus {
+  border-color: var(--kawa-primary-accent, #f43f5e);
+}
+
+.kawa-sprite.kawa-speaking {
+  animation: kawa-sprite-lip-sync 0.35s ease-in-out infinite alternate;
+}
+
+@keyframes kawa-sprite-lip-sync {
+  0% { transform: translateY(0) scale(1); }
+  100% { transform: translateY(-3px) scale(1.015); }
+}
+
+