kawaijs 1.0.0 → 1.0.1

package/templates/starter/game/assets/characters/yumia/excited.svg

@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 1000" width="600" height="1000">
+  <defs>
+    <linearGradient id="hairGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#fb7185"/>
+      <stop offset="100%" stop-color="#e11d48"/>
+    </linearGradient>
+    <linearGradient id="uniformGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e293b"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Body / School Uniform -->
+  <path d="M220 450 L380 450 L420 900 L180 900 Z" fill="url(#uniformGrad)"/>
+  <!-- White Collar -->
+  <polygon points="260,450 300,530 340,450 380,450 300,560 220,450" fill="#ffffff"/>
+  <!-- Red Ribbon -->
+  <polygon points="285,520 315,520 330,580 300,550 270,580" fill="#f43f5e"/>
+
+  <!-- Neck -->
+  <rect x="275" y="380" width="50" height="80" fill="#fed7aa"/>
+
+  <!-- Long Hair (Back) -->
+  <path d="M160 250 C130 500, 150 750, 190 850 C230 750, 200 500, 220 280 Z" fill="url(#hairGrad)"/>
+  <path d="M440 250 C470 500, 450 750, 410 850 C370 750, 400 500, 380 280 Z" fill="url(#hairGrad)"/>
+
+  <!-- Face -->
+  <ellipse cx="300" cy="320" rx="100" ry="115" fill="#ffedd5"/>
+
+  <!-- Starry / Excited Eyes -->
+  <circle cx="245" cy="310" r="16" fill="#881337"/>
+  <circle cx="355" cy="310" r="16" fill="#881337"/>
+  <polygon points="245,298 249,307 258,307 251,313 253,322 245,317 237,322 239,313 232,307 241,307" fill="#fbbf24"/>
+  <polygon points="355,298 359,307 368,307 361,313 363,322 355,317 347,322 349,313 342,307 351,307" fill="#fbbf24"/>
+
+  <!-- Blush -->
+  <ellipse cx="235" cy="355" rx="22" ry="12" fill="#f43f5e" opacity="0.6"/>
+  <ellipse cx="365" cy="355" rx="22" ry="12" fill="#f43f5e" opacity="0.6"/>
+
+  <!-- Wide Open Happy Mouth -->
+  <path d="M275 360 Q300 410 325 360 Z" fill="#e11d48"/>
+  <path d="M285 390 Q300 405 315 390 Z" fill="#fda4af"/>
+
+  <!-- Hair (Front & Bangs) -->
+  <path d="M200 250 C210 160, 390 160, 400 250 C380 280, 350 310, 330 280 C310 320, 290 320, 270 280 C250 310, 220 280, 200 250 Z" fill="url(#hairGrad)"/>
+  <path d="M190 240 C170 340, 180 430, 210 470 C195 410, 195 330, 205 260 Z" fill="url(#hairGrad)"/>
+  <path d="M410 240 C430 340, 420 430, 390 470 C405 410, 405 330, 395 260 Z" fill="url(#hairGrad)"/>
+
+  <!-- Bouncing Ahoge -->
+  <path d="M300 170 Q340 80 370 110 Q335 120 305 170" fill="url(#hairGrad)"/>
+</svg>

package/templates/starter/game/assets/characters/yumia/happy.svg

@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 1000" width="600" height="1000">
+  <defs>
+    <linearGradient id="hairGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#fb7185"/>
+      <stop offset="100%" stop-color="#e11d48"/>
+    </linearGradient>
+    <linearGradient id="uniformGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e293b"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Body / School Uniform -->
+  <path d="M220 450 L380 450 L420 900 L180 900 Z" fill="url(#uniformGrad)"/>
+  <!-- White Collar -->
+  <polygon points="260,450 300,530 340,450 380,450 300,560 220,450" fill="#ffffff"/>
+  <!-- Red Ribbon -->
+  <polygon points="285,520 315,520 330,580 300,550 270,580" fill="#f43f5e"/>
+
+  <!-- Neck -->
+  <rect x="275" y="380" width="50" height="80" fill="#fed7aa"/>
+
+  <!-- Long Hair (Back) -->
+  <path d="M160 250 C130 500, 150 750, 190 850 C230 750, 200 500, 220 280 Z" fill="url(#hairGrad)"/>
+  <path d="M440 250 C470 500, 450 750, 410 850 C370 750, 400 500, 380 280 Z" fill="url(#hairGrad)"/>
+
+  <!-- Face -->
+  <ellipse cx="300" cy="320" rx="100" ry="115" fill="#ffedd5"/>
+
+  <!-- Blush -->
+  <ellipse cx="235" cy="355" rx="18" ry="10" fill="#f43f5e" opacity="0.4"/>
+  <ellipse cx="365" cy="355" rx="18" ry="10" fill="#f43f5e" opacity="0.4"/>
+
+  <!-- Cheerful Eyes (Happy Arcs) -->
+  <path d="M225 315 Q245 295 265 315" fill="none" stroke="#881337" stroke-width="6" stroke-linecap="round"/>
+  <path d="M335 315 Q355 295 375 315" fill="none" stroke="#881337" stroke-width="6" stroke-linecap="round"/>
+
+  <!-- Smiling Mouth -->
+  <path d="M280 365 Q300 395 320 365 Z" fill="#e11d48"/>
+
+  <!-- Hair (Front & Bangs) -->
+  <path d="M200 250 C210 160, 390 160, 400 250 C380 280, 350 310, 330 280 C310 320, 290 320, 270 280 C250 310, 220 280, 200 250 Z" fill="url(#hairGrad)"/>
+  <path d="M190 240 C170 340, 180 430, 210 470 C195 410, 195 330, 205 260 Z" fill="url(#hairGrad)"/>
+  <path d="M410 240 C430 340, 420 430, 390 470 C405 410, 405 330, 395 260 Z" fill="url(#hairGrad)"/>
+
+  <!-- Cute Ahoge (Hair Strand) -->
+  <path d="M300 170 Q320 100 350 120 Q325 125 305 170" fill="url(#hairGrad)"/>
+</svg>

package/templates/starter/game/assets/characters/yumia/normal.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 1000" width="600" height="1000">
+  <defs>
+    <linearGradient id="hairGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#fb7185"/>
+      <stop offset="100%" stop-color="#e11d48"/>
+    </linearGradient>
+    <linearGradient id="uniformGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e293b"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Body / School Uniform -->
+  <path d="M220 450 L380 450 L420 900 L180 900 Z" fill="url(#uniformGrad)"/>
+  <polygon points="260,450 300,530 340,450 380,450 300,560 220,450" fill="#ffffff"/>
+  <polygon points="285,520 315,520 330,580 300,550 270,580" fill="#f43f5e"/>
+
+  <!-- Neck -->
+  <rect x="275" y="380" width="50" height="80" fill="#fed7aa"/>
+
+  <!-- Long Hair (Back) -->
+  <path d="M160 250 C130 500, 150 750, 190 850 C230 750, 200 500, 220 280 Z" fill="url(#hairGrad)"/>
+  <path d="M440 250 C470 500, 450 750, 410 850 C370 750, 400 500, 380 280 Z" fill="url(#hairGrad)"/>
+
+  <!-- Face -->
+  <ellipse cx="300" cy="320" rx="100" ry="115" fill="#ffedd5"/>
+
+  <!-- Normal Eyes -->
+  <circle cx="245" cy="315" r="14" fill="#881337"/>
+  <circle cx="355" cy="315" r="14" fill="#881337"/>
+  <circle cx="249" cy="311" r="5" fill="#ffffff"/>
+  <circle cx="359" cy="311" r="5" fill="#ffffff"/>
+
+  <!-- Neutral Gentle Smile -->
+  <path d="M285 365 Q300 380 315 365" fill="none" stroke="#e11d48" stroke-width="4" stroke-linecap="round"/>
+
+  <!-- Hair (Front & Bangs) -->
+  <path d="M200 250 C210 160, 390 160, 400 250 C380 280, 350 310, 330 280 C310 320, 290 320, 270 280 C250 310, 220 280, 200 250 Z" fill="url(#hairGrad)"/>
+  <path d="M190 240 C170 340, 180 430, 210 470 C195 410, 195 330, 205 260 Z" fill="url(#hairGrad)"/>
+  <path d="M410 240 C430 340, 420 430, 390 470 C405 410, 405 330, 395 260 Z" fill="url(#hairGrad)"/>
+</svg>

package/templates/starter/game/assets/characters/yumia/sad.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 1000" width="600" height="1000">
+  <defs>
+    <linearGradient id="hairGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#fb7185"/>
+      <stop offset="100%" stop-color="#e11d48"/>
+    </linearGradient>
+    <linearGradient id="uniformGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e293b"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Body / School Uniform -->
+  <path d="M220 450 L380 450 L420 900 L180 900 Z" fill="url(#uniformGrad)"/>
+  <polygon points="260,450 300,530 340,450 380,450 300,560 220,450" fill="#ffffff"/>
+  <polygon points="285,520 315,520 330,580 300,550 270,580" fill="#f43f5e"/>
+
+  <!-- Neck -->
+  <rect x="275" y="380" width="50" height="80" fill="#fed7aa"/>
+
+  <!-- Long Hair (Back) -->
+  <path d="M160 250 C130 500, 150 750, 190 850 C230 750, 200 500, 220 280 Z" fill="url(#hairGrad)"/>
+  <path d="M440 250 C470 500, 450 750, 410 850 C370 750, 400 500, 380 280 Z" fill="url(#hairGrad)"/>
+
+  <!-- Face -->
+  <ellipse cx="300" cy="320" rx="100" ry="115" fill="#ffedd5"/>
+
+  <!-- Sad / Pouting Eyes -->
+  <circle cx="245" cy="315" r="14" fill="#881337"/>
+  <circle cx="355" cy="315" r="14" fill="#881337"/>
+  <!-- Tear droplet -->
+  <circle cx="230" cy="335" r="5" fill="#38bdf8"/>
+
+  <!-- Pout / Frown -->
+  <path d="M285 375 Q300 360 315 375" fill="none" stroke="#e11d48" stroke-width="4" stroke-linecap="round"/>
+
+  <!-- Hair (Front & Bangs) -->
+  <path d="M200 250 C210 160, 390 160, 400 250 C380 280, 350 310, 330 280 C310 320, 290 320, 270 280 C250 310, 220 280, 200 250 Z" fill="url(#hairGrad)"/>
+  <path d="M190 240 C170 340, 180 430, 210 470 C195 410, 195 330, 205 260 Z" fill="url(#hairGrad)"/>
+  <path d="M410 240 C430 340, 420 430, 390 470 C405 410, 405 330, 395 260 Z" fill="url(#hairGrad)"/>
+</svg>

package/templates/starter/game/favicon.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Game icon">
+  <rect width="512" height="512" rx="96" fill="#0f172a"/>
+  <circle cx="256" cy="210" r="110" fill="#f43f5e" opacity="0.95"/>
+  <path d="M120 400c40-70 100-100 136-100s96 30 136 100" fill="none" stroke="#f43f5e" stroke-width="28" stroke-linecap="round"/>
+  <circle cx="210" cy="190" r="14" fill="#0f172a"/>
+  <circle cx="302" cy="190" r="14" fill="#0f172a"/>
+</svg>

package/templates/starter/game/script.kawa

@@ -0,0 +1,160 @@
+# Kawaijs Showcase — "Code of Hearts"
+# Living syntax guide: define, input, transitions, sakura, audio, camera, CG.
+character yumia "Yumia" #f43f5e
+character kaori "Kaori" #0284c7
+
+define bg classroom = "classroom.svg"
+define bg rooftop = "rooftop.svg"
+define bg sunset_courtyard = "sunset_courtyard.svg"
+define music ambient = "bgm_ambient"
+define music upbeat = "bgm_upbeat"
+
+label start:
+    set player_name = "Sensei"
+    set dev_score = 0
+    set creative_score = 0
+
+    play music ambient fade 2
+
+    scene bg classroom with fade
+    vfx sakura
+    show yumia happy at left with bounce
+    show kaori normal at right with dissolve
+
+    yumia "Welcome to the {b}Game Development Club{/b}! I'm Yumia."
+    kaori "And I'm Kaori. Before we begin — what should we call you?"
+
+    input player_name "What is your name?"
+    yumia "Nice to meet you, [player_name]! Watch the {color=#fda4af}sakura{/color} — that's {b}vfx sakura{/b}."
+    kaori "Scenes use {b}define{/b} aliases and transitions like {b}fade{/b}, {b}dissolve{/b}, or {b}wipeleft{/b}."
+
+    window hide
+    pause 700
+    window show
+
+    yumia "We need your help choosing our project's direction, [player_name]! What's your strength?"
+
+    menu:
+        "High-performance architecture & Web Audio":
+            play sound sfx_click
+            camera vpunch
+            set dev_score += 2
+            show kaori happy at right with nod
+            show yumia normal at left
+            kaori "Impressive. An engineer with an eye for modularity and crisp performance."
+            yumia "Hey! Don't forget that great stories need emotional resonance too!"
+            jump technical_route
+
+        "Rich storytelling, character drama & art":
+            play sound sfx_click
+            camera shake 500
+            set creative_score += 2
+            show yumia excited at left with bounce
+            show kaori thinking at right
+            yumia "Yes!! Players remember characters that touch their hearts."
+            kaori "A solid script is essential, provided the memory footprint stays lightweight."
+            jump creative_route
+
+        "Full-stack mastery: Code, Music, and Narrative":
+            play sound sfx_click
+            camera flash
+            set dev_score += 1
+            set creative_score += 1
+            show yumia excited at left with bounce
+            show kaori smug at right with nod
+            kaori "Ambitious. A true solo-dev Renaissance creator."
+            yumia "That means we can make something unforgettable together, [player_name]!"
+            jump courtyard_scene
+
+label technical_route:
+    play music upbeat fade 1
+    scene bg rooftop with wipeleft
+    vfx fog
+    show kaori smug at center with dissolve
+
+    kaori "Up here on the misty rooftop — {b}vfx fog{/b} after a wipe transition."
+    kaori "Rollback snapshots, live reload, and a modular audio pipeline come free with the toolchain."
+
+    play sound sfx_sparkle
+    camera flash
+    pause 600
+    cg "cg_sunset_promise.svg" as "sunset_promise"
+    kaori "Look at the horizon, [player_name]. Dev score: [dev_score]. That's a fullscreen {b}cg{/b}."
+    jump evaluate_ending
+
+label creative_route:
+    play music upbeat fade 1
+    scene bg sunset_courtyard with dissolve
+    vfx sakura
+    vfx tint "#fda4af"
+    show yumia happy at center with bounce
+
+    yumia "Isn't the sunset courtyard breathtaking, [player_name]?"
+    yumia "{b}vfx sakura{/b} plus {b}vfx tint{/b} — pink light over falling petals."
+
+    play sound sfx_sparkle
+    camera flash
+    pause 600
+    cg "cg_sunset_promise.svg" as "sunset_promise"
+    yumia "Creative score: [creative_score]. Great stories bloom when imagination meets great tools."
+    jump evaluate_ending
+
+label courtyard_scene:
+    play music upbeat fade 1
+    scene bg sunset_courtyard with wiperight
+    vfx sakura
+    show yumia happy at left with bounce
+    show kaori happy at right with nod
+
+    yumia "Look at the sunset! Story branches and characters are already outlined."
+    kaori "The bundle is light. The Web Audio controller is ready."
+
+    yumia "Try a web-native {b}theme{/b}, a {b}style{/b} skin, and clickable {b}hotspots{/b}."
+    theme "sakura"
+    style dialogue glass
+    window hide
+    hotspot door 8 35 22 40 jump ending_master
+    hotspot poster 72 20 20 28 jump evaluate_ending
+    window show
+
+    camera hpunch
+    yumia "Let's bring all our talents together, [player_name]!"
+    jump evaluate_ending
+
+label evaluate_ending:
+    if dev_score >= 2:
+        jump ending_tech
+    else:
+        if creative_score >= 2:
+            jump ending_creative
+        else:
+            jump ending_master
+
+label ending_tech:
+    scene bg rooftop with fade
+    vfx fog
+    show kaori smug at center with dissolve
+    kaori "Engineering mastery with [dev_score] dev points. Our next release will be revolutionary."
+    narrator "{b}Ending 1/3: The Master Architect{/b} — High Performance & Flawless Code."
+    stop music fade 2
+    return
+
+label ending_creative:
+    scene bg sunset_courtyard with fade
+    vfx sakura
+    show yumia excited at center with bounce
+    yumia "Creative score [creative_score]! This VN will touch hearts around the world!"
+    narrator "{b}Ending 2/3: The Renowned Storyteller{/b} — Emotion, Art & Unforgettable Characters."
+    stop music fade 2
+    return
+
+label ending_master:
+    play sound sfx_sparkle
+    camera flash
+    pause 800
+    cg "cg_celebration.svg" as "celebration"
+    yumia "Code, art, music, and story in harmony! Dev: [dev_score], Creative: [creative_score]!"
+    kaori "You have unlocked the full power of Kawaijs, [player_name]."
+    narrator "{b}Ending 3/3: The Renaissance Visionary{/b} — A True Master of Interactive Fiction."
+    stop music fade 2
+    return

package/templates/starter/game/style.css

@@ -0,0 +1,41 @@
+/*
+ * Project CSS — override design tokens or target Kawaijs classes.
+ *
+ * Script hooks (no CSS edit required):
+ *   theme "noir" | "sakura" | "ocean" | "dusk"
+ *   style dialogue glass | solid | minimal
+ *   style choices pill | card | underline
+ *   style stage dim | vignette
+ *
+ * Official tokens (see @kawaijs/renderer-dom/theme.css):
+ *   --kawa-primary-accent, --kawa-primary-glow, --kawa-dialogue-bg,
+ *   --kawa-dialogue-border, --kawa-font-body, --kawa-font-heading
+ */
+:root {
+  --kawa-primary-accent: #f43f5e;
+  --kawa-primary-glow: rgba(244, 63, 94, 0.45);
+  --kawa-dialogue-radius: 18px;
+  --kawa-choice-radius: 12px;
+}
+
+/* Custom Dialogue Box Glassmorphism */
+.kawa-dialogue-box,
+.kawa-dialogue {
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.8), 0 0 30px rgba(244, 63, 94, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(244, 63, 94, 0.4);
+}
+
+/* Custom Choice Buttons */
+.kawa-choice-btn,
+.kawa-choice {
+  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  letter-spacing: 0.02em;
+}
+
+.kawa-choice-btn:hover,
+.kawa-choice:hover {
+  transform: translateY(-3px) scale(1.025);
+  box-shadow: 0 12px 30px rgba(244, 63, 94, 0.5), 0 0 20px rgba(244, 63, 94, 0.3);
+}

package/templates/starter/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "starter-visual-novel",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "kawa dev",
+    "build": "kawa build",
+    "validate": "kawa validate"
+  },
+  "dependencies": {
+    "kawaijs": "^1.0.0"
+  }
+}